Guía de Maqueteo para Steemit

in spanish •  3 months ago

Este es una publicación dedicada a aquellas personas que están iniciando en la plataforma de Steemit, en las cuales muchas de ellas llegan con dudas referente a cómo estructurar y poder hacerlo más estético. Por ello debemos tomar en cuenta la apariencia del contenido en relación a nuestro blog, dado a que es importante a la hora de dar a conocer nuestra información. Mostraré con ejemplos sencillos los códigos de Markdown o HTML más utilizados, desde un encabezado o título hasta cómo citar un texto de otro autor. Cómo separar en columnas, colocar un texto de un lado u otro y redimensionar el tamaño de una imagen.

Títulos o Encabezados

Siempre debemos tomar en cuenta resaltar el tema que vamos a abordar. Por ello antes de iniciar un párrafo, siempre que sea necesario, es recomendable iniciar con un título. Existen dos maneras muy sencillas para hacerlo, una es con código Markdown en la cual debemos iniciar el texto con: # dejando un espacio de por medio, a medida que se vayan sumando más el texto será cada vez más pequeño. Es decir, 1 # Título más grande 5 ###### Título más pequeño, utilizando Html podemos conseguir la misma apariencia en el texto pero el código sería diferente, es cuestión de encerrar con <H1>para conseguir un título de mayor tamaño e ir subiendo la cantidad en número a medida que queramos reducirlo. Para entender de una forma más sencilla les dejo un ejemplo.
Html
Markown
Ejemplo
<H5>Título</H5>
##### Título
Título
<H4>Título</H4>
#### Título

Título

<H3>Título</H3>
### Título

Título

<H2>Título</H2>
## Título

Título

<H1>Título</H1>
# Título

Título

Justificación de Párrafo

Cuando tenemos la ocasión de escribir un párrafo extenso a nivel de estética, tiene mayor simpatía visual si el mismo está justificado, que tanto el lado izquierdo como el derecho se encuentren lineales de forma vertical. Para muchos podría parecer difícil pero realmente es simple. Utilizando el siguiente código, iniciamos el párrafo escribiendo lo siguiente, de la misma forma que les aparece en el cuadro, lo ideal seria copiar y pegar <div class="text-justify"> dentro del texto escribiremos nuestro contenido, una vez finalizado debemos colocar al final del párrafo </div> para así, cerrar el código.

<div class="text-justify">Texto a justificar</div>

Centrar Contenido

Cuando nos referimos a centrar, su nombre lo dice muy claro, (en el centro) y no solo puede utilizarse en el texto sino también en imágenes, es uno de los códigos más sencillos de recordar, solo escribimos <center> para iniciar el centrado, colocamos el contenido y cerraremos el código colocando </center> para entenderlo de una forma mas practica, les explicaré con un par de ejemplos.

Texto que deseas centrar

<center>Texto que deseas centrar</center>

<center>Link de la imagen</center>

Hipervínculos

Es muy común ver palabras que son de un enlace a otra página y nos damos cuenta que en apariencia se ve mucho mejor, así evitamos que se vea una dirección web extensa que pueda arruinar la estética de nuestra publicación. Cuando deseamos ingresar un hipervínculo debemos insertar el siguiente código, [Aquí la palabra que se verá](link del enlace) para hacer más fácil de entender les mostraré un ejemplo.

Palabra que deseas que aparezca
Código
Cervantes
[Cervantes](https://steemit.com/@cervantes)

Insertar hipervínculo utilizando una imagen (el proceso es igual que hacerlo con texto), solo es necesario agregar 3 caracteres más a nuestro código ![] y colocar los link correspondientes en su espacio específico como les mostraré a continuación.

Imagen a mostrar
Código
[![](Link de la imagen)](Link de donde quieres que vayan)

Derecha-izquierda para el contenido

De seguro es uno de los códigos más utilizados, ya que permiten dar una gran presentación en las publicaciones. Estructurar el contenido de un lado o del otro, les dará similitud a una revista o página web de contenido; este código es válido para texto e imágenes.

Contenido a la izquierda
Contenido a la derecha
<div class="pull-left">Contenido a la izquierda</div>
<div class="pull-right">Contenido a la derecha</div>

Para modificar el estilo de la tipografía

Mark Down
HTML
Ejemplo
**Negrillas**
<b>negrita</b>
Negrillas
*Cursiva*
<i>cursiva</i>
Cursiva
***Cursiva Negrita***
<b><i>negrita + cursiva</i></b>
Cursiva Negrita
~~Tachado~~
<del>tachado</del>
Tachado
~~*tachado cursiva*~~
<del><i>tachado cursiva</i></del>
tachado cursiva
~~**tachado negrita**~~
<del><b>tachado negrita</b></del>
tachado negrita
~~***tachado negrita cursiva***~~
<del><b><i>tachado negrita cursiva</i></b></del>
tachado negrita cursiva

Columnas o bloques

Es uno de los código que mayormente utilizo, nos permite separar nuestro contenido por secciones, delimitando así una de la otra, muy práctico para estructurar galerías de imágenes o colocar contenido por bloque, ya sea un título y debajo la explicación o como lo deseen. Se pueden hacer de varias columnas con con un mínimo de 1 sin tener un máximo, dependiendo de la necesidad del usuario y lo que esté quiere lograr. Es importante resaltar que, intercalando la separación del cuadro tendrá un color diferente el fondo.

|Imagen|Imagen|Imagen|
|---|---|---|
|Imagen|Imagen|Imagen|

|Imagen|Imagen|Imagen|Imagen|
|---|---|---|---|
|Imagen|Imagen|Imagen|Imagen|

Contenido de TextoContenido de TextoContenido de Texto
Contenido de TextoContenido de TextoContenido de Texto

|Contenido de Texto|Contenido de Texto|Contenido de Texto|
|---|---|---|
|Contenido de Texto|Contenido de Texto|Contenido de Texto|

Nota:

Este código puede generar confusión, intentaré explicarlo muy sencillo. Iniciamos colocando una barra vertical | sin dejar espacio colocaremos el link en caso de ser una imagen o en texto bien sea el caso, al finalizar cerramos con otra barra igual | si quieres que sea más de 1 columna el proceso es igual: | Contenido | contenido | según las veces que separemos el contenido de arriba es necesario repetirlo en la línea siguiente, sin dejar espacio entre párrafos. |---|---| La siguiente línea será la guía de la estructura y fijamos que son dos columnas con las que vamos a trabajar en este ejemplo. Después en las líneas posteriores debes hacerlo sin espacio y siempre seguir el ejemplo | Contenido | contenido |

Citas

Cuando deseas mostrar el texto de un autor el cual está relacionado con tu contenido, con Markdown puedes hacerlo de una forma muy sencilla, utilizando > antes de comenzar el párrafo, así el lector será consciente de que el contenido no es de tu autoria ya que es una cita sacada de otro texto.

Citar texto iniciando con un signo de mayor que

Cita en segundo plano

>Citar texto iniciando con un signo de mayor que
>>Cita en segundo plano

Utilizando HTML también lo podemos hacer. Sin embargo el código es un poco más extenso en comparación a Markdown para este caso, el código es el siguiente <blockquote>Texto que deseas citar</blockquote>, el resultado es el mismo y depende de ustedes cuál utilizar.
Texto que deseas citar

Ajustar tamaño de la imagen

Cuando se da el caso que la imagen es más grande que el tamaño que deseamos podemos reducirla de la siguiente manera, antes del link de la imagen colocaremos el siguiente código https://steemitimages.com/altoXancho/ , es necesario que el link de la imagen este sin el contenido adicional que se coloca de forma automática cuando la subimos desde nuestro ordenador, como lo es el nombre del archivo. Donde vemos altoXancho es la cantidad de proporción en la que debemos editar los números reduciendo o aumentando hasta conseguir el tamaño que deseamos.

Ejemplo

Tamaño original

Ejemplos de ajuste de tamaño

https://steemitimages.com/300x300/https://Link de la imagen

https://steemitimages.com/150X150/https://Link de la imagen

https://steemitimages.com/50X50/https://Link de la imagen

Si deseas colocar una referencia o bien sea la fuente de la imagen pueden hacerlo con el siguiente código <center><a href="link de la fuente">la palabra que se mostrará</a></center> Si desean que se muestre en el lado superior, lo colocan antes del link de la imagen y si prefieren que se muestre en la parte interior, lo deben colocar al finalizar en link de la imagen. Ejemplo:

Superior

<center><a href="https://steemit.com/@cervantes">Superior</a></center>Link de la imagen

Inferior

<center><a href="https://steemit.com/@cervantes">Inferior</a></center>Link de la imagen

Viñetas

Ideal para cuando realizamos contenido y deseamos resaltar diversos puntos de forma detallada, comenzando cada párrafo utilizando una viñeta en el inicio. El proceso es sencillo antes de desarrollar el contenido debemos escribir * 1 en el caso de Markdown y <li> 1 </li> en el caso de HTML. Ejemplos:

MarkDown
HTML
Resultado
* Contenido 1
<li> Contenido 1 </li>
  • Contenido 1
  • * Contenido 2
    <li> Contenido 2 </li>
  • Contenido 2
  • * Contenido 3
    <li> Contenido 3 </li>
  • Contenido 3
  • Si deseas hacerlo numérico, puedes sustituir el * por 1., 2. , 3.en caso de MarkDown, para HTML debes comenzar el contenido con <ol> y finalizarlo con </ol> ejemplo:

    MarkDown
    HTML
    Resultado
    1. Contenido 1
    2. Contenido 2
    3. Contenido 3
    <ol>
    <li> Contenido 1 </li>
    <li> Contenido 2 </li>
    <li> Contenido 3 </li>
    </ol>
    1. Contenido 1
    2. Contenido 2
    3. Contenido 3

    Texto de Color rojo

    Iniciamos el texto escribiendo <div class="phishy">una vez terminado procedemos a cerrar el código con </div>
    Texto de color rojo
    <div class="phishy">Texto de color rojo</div>

    Sangría

               Cuando queremos iniciar un párrafo con espacio antes del primer texto es muy sencillo, antes de comenzar a escribir debemos escribir el siguiente código &nbsp; que significa 1 espacio, lo copiamos y pegamos tantas veces queramos hasta conseguir la separación que deseamos.

    Otros Tips
    Para separar entre párrafos. Tenemos dos métodos, con Markdown colocamos # como separador dejando un espacio entre líneas y con HTML, podemos utilizar <br> y en este caso, no es necesario separar entre líneas como cuando usamos #
    En algunas ocasiones, se nos presenta el caso de no cerrar de forma correcta un código y no encontramos el detalle, podemos definir el comienzo y final de un contenido utilizando HTML, con el siguiente código <p>Párrafo</p> de esta forma delimitamos algún código que pueda incurrir en otro párrafo.
    Para hacer resaltar un contenido de esta forma debemos comenzar con acento invertido ( ` ) con el que les indico dentro del paréntesis y finalizar con el mismo, así se hace con Markdown y con HTML, podemos conseguirlo con <code> para iniciar y </code> para finalizar
    Podemos utilizar un separador muy sencillo y consiste en --- colocar 3 signos menos entre párrafos
    Para cita bibliográfica es necesario iniciar el párrafo con <q> y finalizar con <q> para que se pueda apreciar de la siguiente manera.

    Cita Bibliográfica


    Que cada imagen te haga viajar y puedas sentir, oler y tocar cada fotografía.
    ★R. GIL★
    🍂

    Discord Sr. Nikon

    Chat de @cervantes en DiscordVota Cervantes como Witnees

    Authors get paid when people like you upvote their post.
    If you enjoyed what you read here, create your account today and start earning FREE STEEM!
    Sort Order:  

    Excelente tutorial, gracias por compartirlo.

    Excelente, muy didáctico y se presta para jugar.

    ·

    Sácale provecho al máximo.

    ·
    ·

    donde separas imagenes, que escribes alli ?
    |enlace|enlace|enlace|
    porque a mi no me sale igual.

    ·
    ·
    ·

    Hola amigo, si quieres me contactas por discord y te explico sobre tu duda :) estoy en Cervantes en el equipo de moderación. Al final del post deje el acceso.

    Excelente tutorial @robinsonlgil, para los nuevos y no tan nuevos. Gracias.

    ·

    Puedes tomarlo como ejemplo y hacerlo llegar a muchos mas, me ha tomado unos días hacerlo pero creo que no quedo nada por fuera.

    Todos los dias se aprende algo, no sabia como colocar imagenes seguidas. Buen post @robinsongil

    ·

    Éxitos y ya nos sorprenderás dándole uso a ese codigo :D

    Me encantó Robinson!! Gracias por compartirlo!! 📝
    Explicado de una manera fácil de comprender.

    ·

    Me alegra te gustara, cualquier duda que surja estoy por discord siempre disponible :D

    Buenísima guía porque literalmente incluyes todos los códigos y métodos para aplicar a los textos, que he encontrado de manera dispersa en decenas de artículos, en uno solo. Gracias!

    ·

    Me alegra abarcar todos aunque el de sangría lo había olvidado y ya lo incluí, échale un ojo :D

    Excelente, bro. Agarre alguno apuntes que no sabia. En verdad muy buena información no sabia que se podían hacer columnas de imágenes jejejeje, pero lo tendré en consideración muy bueno.

    ·

    Saludos amigo, la idea es ayudarles, éxitos y cualquier duda siempre a la orden por discord.

    ·
    ·

    Gracias, bro. Gracias por lo servicial eres grande hermano, y pues si me ayudaste, Gracias totales.

    esto quedó fue brutalísimo hermano, mis respetos totales para ti y tú labor! de pana que si!

    ·

    Agradecido compinche, la idea es ayudar a todos :)

    Esta hermoso este post, saludos bro!

    ·

    Gracias hijo mio, jajaja que bueno que te gustara

    Gracias, muy muy bueno.

    ·

    Sácale provecho, lo realice para ustedes :)

    Excelente post muy nutrido de información. Algunos comandos no los conocía voy a colocarlo en mi blog. Gracias por compartir este post. Besos y Saludos
    @andreinacepeda

    ·

    Gracias bonita, siempre disponible para cualquier duda

    Muchas Gracias Hermano, esto me ayudara un montón.

    ·

    Sácale provecho, para eso lo realice igual sabes que cualquier duda ya sabes donde buscarme :)

    Mil gracias por tu post, es de gran ayuda para los que recién empezamos, gracias, abrazo

    ·

    Esa es la gran idea, ayudarles a todos ya que muchos no lo tienen muy claro, igual cualquier duda en el servidor de @Cervantes siempre me puedes conseguir

    Está guía esta genial, no solo para los nuevos, también para los que tenemos meses y aún nos sentimos nuevos en todo este mundo.
    ¡Saludos, un abrazo!

    ·

    jajaja las dudas siempre se tienen, este post es mi chuleta para maquetar :D

    Muy bueno, @robinsongil. Este tipo de tutoriales siempre son necesarios, sobre todo cuando das tips tan importantes. Gracias por compartirlo. Un abrazo.

    ·

    La idea es ayudarles a hacer mejores post cada día.

    Me encanto no solo porque abarca todos los códigos, sino también la forma es que los explicas acompañados de ejemplos ;) saludos y gracias por compartirlos

    ·

    Siempre para ayudarles a todos :D cualquier dudas no temas preguntar

    Gracias por la guía bro un abrazo

    ·

    Saludos amigo, sácale el máximo de provecho

    Loading...

    que bello te quiero ;*

    ·

    se te quiere a ti tambien amigo hamk

    muchísima felicidades es ta muy completo el sistema de explicación y de una forma muy fluida

    steemit logo VENEZUELA.png

    ·

    Esa fue mi gran idea, hacer de esa guia un proceso sencillo de realizar :D gracias por pasarte y disculpa el tiempo de demora

    Gracias por condensar todo lo que necesitamos en un solo lugar. ¡Éxito!

    ·

    que bueno te gustara aunque se me paso un par de códigos que los recordé luego :D

    Felcitaciones por tu publicación. Con ella, sin duda alguna, mejoraran mis publicaciones. esta muy detallada y comprensible. Saludos

    ·

    Me alegra te gustara :D la idea es ayudar a los demás

    Wow!! Muchísimas Gracias por esta guía!

    ·

    Siempre a la orden, con ella conseguirás unos post mas bonitos, cualquier duda estaré en el discord de @cervantes

    Está súper completa esta guía, me ha encantado! Pero no comprendí del todo cómo redimensionar las imágenes :( Y me cansé de intentarlo de mil formas y nada.

    ·

    saludos, disculpa la demora, si aun conservas la duda escríbeme por discord y con gusto te ayudo

    Me encanto tu post, muy útil para los que estamos nuevos en esto! Bendiciones

    ·

    Amen espero le saques provecho :)

    A pesar del tiempo, este post sigue resultando de mucha ayuda. Felicitaciones mi amigo y gracias por la herramienta y la ayuda. Me ayudo mucho en mi mas reciente post. Saludos.

    ·

    te dejo uno que lo olvide mira que tal jajaja <sup> texto </sup>

    ·
    ·

    jeje gracias hermano! Muy bueno :)

    Lo voy a empezar a implementar y ayudar a @jesuschristo

    ·

    jajaja ayuda a ese loco sin causa, tiene que mejorar la presentación

    muy bueno bro, especial para nosotros los nuevos

    ·

    asi es compinche, sacale provecho que vale la pena tenerlo siempre a la mano :D