Guía de Maqueteo para Steemit

4년 전

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!
    STEEMKR.COM IS SPONSORED BY
    ADVERTISEMENT
    Sort Order:  trending

    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 :)

    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

      ·  4년 전

    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

    Excelente tutorial, gracias por compartirlo.

    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

    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.

    Primero que nada, enhorabuena; porque te has dado una buena currada; y segundo enhorabuena porque no sé, si leíste mi post de editores de Markdown o no (donde te deje un tirito con todo mi cariño) y has corregido algo que llevo viendo desde el día 1 en el que entre en esta plataforma; y qué, desde mi punto de vista; están absolutamente equivocados, por razones obvias (no sé, si porque lo hacen desde la desinformación o porque simplemente no desean contar la realidad de todo lo que saben; pero es así).

    No hablo de otra cosa, más que de no darle la importancia que tiene al HTML.
    Ni tan siquiera citarlo o nombrarlo, escribir sus etiquetas; y seguir hablando de que están usando Markdown, tranquilamente, y con absoluto descaro.
    Aparte de que estén transmitiendo total desinformación absoluta al resto de la gente; y encima son aplaudidos por ello.

    Ocurre en gran cantidad de posts sobre Markdown o colocación de imágenes dentro de Steemit, por no decir; casi todos y es algo que a mi personalmente y con todo mi cariño.. Me tenía hasta los.. estom, hasta las culonas (dejémoslo así).

    Gente diciendo, mandando copiar y pegar esto y lo otro a sus audiencias y en fin. Sin demostrar si ellos sabían lo que hacen o solamente se copiaron las cositas de por ahí.

    Por ello, enhorabuena y gracias, el HTML existe aquí. Eso es una gran noticia.. ¡¡¡¡Sí!!!!!

    Utilizar Markdown no deja de ser una forma más sencilla con la que generar código HTML de forma indirecta. El markdown se transformará en HTML.

    Cabe decir aquí, qué; que yo sepa. Con markdown es imposible hoy por hoy, alinear tanto las imágenes como el texto; y qué; si como la mayoría de personas promueve.. Lo hacemos.

    Estaremos hablando de tener que entremezclar (markdown+html= a html+html) lo que puede resultar bien (es ejecutado y leído de forma correcta sin etiquetas duplicadas, ni fallas; o duplicadas que el script y el navegador ordenarán) o puede resultar mal (visualmente tu publicación será impoluta, pero el código generado; tendrá etiquetas en lugares inadecuados o vacías -que esto es directamente lo que se está realizando al crear tablas como se ha difundido en Steemit el crearlas) o puede resultar horrible (que encuentres fallos directamente sobre la parte visual de tu entrada, o que el navegador se haga la picha un lío -y reparta los márgenes superiores e inferiores a una etiqueta -como le de la real gana y los títulos, por ejemplo; se vean de forma desigual o te encuentres símbolos a mayores, una vez publiques).

    Desde mi punto de vista (eso que yo lo he hecho mal, aún sabiéndolo por todo lo que he leído y me han influido) lo ideal es que te adaptes a la fórmula que te ofrecen (con sus genialidades y sus ladillas) aceptandola como tal.

    En su defecto, que crees tus publicaciones 100% en HTML. Si no de alguna forma podrías estar cayendo en ser redundante en el código generado de lo que escribes.

    En caso de mezclar ambos, por lo que he podido observar. Cada vez que pases de markdown a HTML o de HTML a markdown, deja una línea en blanco en medio.
    En principio, eso hará que a la hora de ejecutarse (quiero pensar que generar un nuevo "div" o "bloque" con ese espacio en blanco) y así, se respeten los márgenes que por defecto aplica el editor de Steemit.

    Dicho todo esto y ahora que nadie va a llegar hasta aquí a leer, más que tú.
    Te diré:

    • Las etiquetas H1 se te han colado en mayús. y van en minus. por estandar.
    • Utilizar el código ASCII es un buen truco, en todos los casos; puesto que forma parte del estándar, y en principio; siempre serán reconocidos por los navegadores.
    • Podrías añadir el uso del slash, como símbolo de escape.
    • La etiqueta <br/> así, porque simboliza que la abres y cierras.
    • El uso de las clases (pull-left, pull-right) los podría aceptar; una clase (no sé si sabes; explicado rápido por si no; digamos que puede recibir las órdenes que tu deseas.. color, tamaño, márgenes, y agregar imágenes).
    • El uso del color rojo, a través de la clase (phisy) sin conocer de dónde o porqué se ha diseñado o para qué se ha creado esa clase. Es un error.
      Si quién lo difunde te dice que se ha creado por y para que el usuario lo use como color rojo, y escapaz de mostrarlo: le aplaudiré.
      De lo contrario, y casi seguro sea algo absurdo pensar qué; existe algún tipo de posibilidad en la que desconozcas como va a terminar siendo usada esa "clase".

    En el caso anterior, de -pull y tal- por lo general son clases, que "por defecto" son usadas para algo concreto; sí.

    Más, con ¿phishy? y estando donde está colocado dentro del fichero .css; casi al principio del documento; habría que descubrir por y para qué es.

    ¿Si fuese echo por y para dar color?¿No piensas que se llamaría red, o algo más común?¿Pero phishy?

    image.png
    Phisy de phising? I don t know.

    ¿Si un desarrollador hiciese algo sobre ello? Pongamos que le cambia el tamaño y color o le agrega un color de fondo al texto.

    El resultado sería así:
    image.png

    Así o lo que le diese la real gana a la persona equis (obviamente no es tan sencillo meter mano al código) pero, pon que les da por ingresar unos márgenes en ese punto, o una imagen de emergencia, o peor aún; una imagen porno (y de rebote, eso aparece donde todas las personas han utilizado "phisy"¿) pssssss.

    ***Aunque todo esto da absolutamente igual. Lo sé.
    Lo seguirán llamando markdown.

    ·

    lindo bigoton

    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

    ·
    ·
      ·  작년

    Me gusto mucho tu guía,De Seguro Me Ayudará @robinsongil

    Esta guía está fenomenal... Recientemente me estoy integrando a la comunidad y los escritos anteriores que he hecho, siempre me han dejado insatisfecha porque no sabía cómo emplear la estética pero a partir de este momento, su guía será mi guía jejeje.

    Saludos y bendiciones

    ¡Muy buena publicación! Ojala hubiese tenido esta guía cuando empecé en Steemit. No sabía ni que existían esos códigos. Ja ja ja Saludos

    Muchas gracias por la ayuda bro. La verdad tenia dudas a la hora de poner viñetas y ajustar las imágenes en mis publicaciones. Gracias gracias

    Gracias, mil gracias, excelente información para los novatos 👏