Guía de Maqueteo para Steemit
 |  |
|---|
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. |
|---|
<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. |
|---|
<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. |
|---|
[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. |
|---|
 | [](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.
<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
**Negrillas** | <b>negrita</b> | |
*Cursiva* | <i>cursiva</i> | |
***Cursiva Negrita*** | <b><i>negrita + cursiva</i></b> | |
~~Tachado~~ | <del>tachado</del> | |
~~*tachado cursiva*~~ | <del><i>tachado cursiva</i></del> | |
~~**tachado negrita**~~ | <del><b>tachado negrita</b></del> | |
~~***tachado negrita cursiva***~~ | <del><b><i>tachado negrita cursiva</i></b></del> |
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 Texto | Contenido de Texto | Contenido de Texto |
|---|---|---|
| Contenido de Texto | Contenido de Texto | Contenido 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
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: |
|---|
<center><a href="https://steemit.com/@cervantes">Superior</a></center>Link de la imagen
<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: |
|---|
* Contenido 1 | <li> Contenido 1 </li> | |
* Contenido 2 | <li> Contenido 2 </li> | |
* Contenido 3 | <li> Contenido 3 </li> |
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: |
|---|
1. Contenido 12. Contenido 23. Contenido 3 | <ol><li> Contenido 1 </li><li> Contenido 2 </li><li> Contenido 3 </li></ol> |
|
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 que significa 1 espacio, lo copiamos y pegamos tantas veces queramos hasta conseguir la separación que deseamos. |
|---|
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★
🍂
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
Gracias por la guía bro un abrazo
Saludos amigo, sácale el máximo de provecho
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
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, 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 :)