¿Deseas darle mejor apariencia a tus posts? Tutorial Markdown para imágenes (Guía de aprendizaje)

in #spanish7 years ago (edited)

marbhs.jpg

¿Qué sería de la vida sin colores? La misma analogía para Steemit, ¿qué sería de los posts sin imágenes?

En mi corto recorrido por estas aguas steemianas me he dado cuenta que una imagen impactante y un título atractivo es la clave para que tu post sea considerado por otro usuario, ¡ya eso es un paso ganado! el resto queda en las manos sugestivas de un buen contenido que mantenga seducido al lector. En fin, me dediqué a recopilar información relacionada a la inserción de imágenes en Steemit y este fue el resultado de la búsqueda.

Vamos a dar inicio a este maravilloso mundo. ¡Sea bienvenido, una vez más!

Markdown para imágenes

  1. Posición de la imagen
    • Imagen centrada
    • Imagen alineada a la derecha
    • Imagen alineada a la izquierda
  2. Imágenes enlazadas
  3. Imágenes en movimiento (GIFs)
  4. Serie de imágenes
    • Horizontal
    • Vertical
    • Cuadrícula

1. Posición de la imagen

Según lo que deseemos plantear, la posición de la imagen será importante para mostrar de mejor forma nuestra publicación, ya sea que la insertemos de manera centrada o paralela al texto con el mismo estilo que utilizan las revistas y periódicos. Para lograr eso sólo necesitamos algunos códigos.

  • Imagen centrada
    Para centrar la imagen debemos usar el siguiente código:

<center> IMAGEN </center>

Así se verá:

DQmdVi9tGH54mqjPQH1NWfUf5ACKBxJzci2jsMgweCRYZ2r.jpg

  • Imagen alineada a la derecha
    Si queremos que nuestra imagen se vea a la derecha del texto sólo debe usar el código a continuación (es importante dar 2 espacios después del código para empezar a escribir el texto), por ejemplo:

<div class="pull-right">
IMAGEN
</div>

Así se verá:

DQmdVi9tGH54mqjPQH1NWfUf5ACKBxJzci2jsMgweCRYZ2r.jpg

Lugar especial guardado en un distinguido espacio de mi hipocampo. Todo un paraíso bañado en aguas saladas. Diría el gran Cervantes, palabras más, palabras menos: "mi lugar de la Mancha cuyo nombre llevaré tatuado en mis recuerdos". En sus aguas disfruté los mejores momentos. Cada summer, cada semana santa, cada hueco en el tiempo donde la rutina nos daba un respiro, escapábamos para aceptar la seductora invitación de la naturaleza.

  • Imagen alineada a la izquierda
    Si queremos que nuestra imagen se vea a la izquierda del texto sólo debe usar el código a continuación (es importante dar 2 espacios después del código para empezar a escribir el texto):

<div class="pull-left">
IMAGEN
</div>

Así se verá:

DQmdVi9tGH54mqjPQH1NWfUf5ACKBxJzci2jsMgweCRYZ2r.jpg

Lugar especial guardado en un distinguido espacio de mi hipocampo. Todo un paraíso bañado en aguas saladas. Diría el gran Cervantes, palabras más, palabras menos: "mi lugar de la Mancha cuyo nombre llevaré tatuado en mis recuerdos". En sus aguas disfruté los mejores momentos. Cada summer, cada semana santa, cada hueco en el tiempo donde la rutina nos daba un respiro, escapábamos para aceptar la seductora invitación de la naturaleza.

2. Imágenes enlazadas

Cada vez que insertemos una imagen en Steemit que no sea de nuestra autoría es importante señalar la fuente. Una de las maneras de hacerlo es a través de un enlace ubicado en la parte inferior de la imagen que al hacerle click redireccione a la página web de origen [Fuente](Enlace web) y otra forma que me ha fascinado (confieso) es haciendo click en la propia imagen.

Si eres de las personas que no les agrada ver la palabra “Fuente” debajo de sus imágenes porque cree que rompe con la estética de su redacción, les tengo la solución y se llama “imágenes enlazadas”. Así es, su imagen es el enlace y al dar click sobre ella lo redireccionará a la página web de origen.

Es similar a como creamos un enlace (link) en Steemit. Entre [ ] insertamos la imagen y entre () copiamos el link de la página web.

Así se escribe:

[Imagen](Enlace de la imagen)

Así se verá:

hermosa (1).jpg


3. Imágenes en movimiento (GIFs)

Las imágenes en movimiento, en el argot informático, se conocen como GIFs. El hecho de que sean imágenes animadas no añade complejidad a la hora de insertarlas en Steemit, incluso es el mismo procedimiento que las imágenes sin movimiento. Sólo debe insertar el link de la imagen que descargó en el editor de Steemit y listo, podrá ver su GIF.

hsk.gif


4. Serie de imágenes

Les voy a confesar el secreto de insertar varias imágenes dispuestas en orden en Steemit: saber hacer una tabla y tener mucha imaginación.

  • Horizontal
    Si deseamos mostrar imágenes dispuestas en forma horizontal sólo debemos crear una tabla de una sola fila y con el número de columnas igual a cuantas imágenes deseemos mostrar.

Por ejemplo, para una serie de 3 imágenes en horizontal usamos el siguiente código:

||||
|---|---|---|
| IMAGEN | IMAGEN | IMAGEN |

Así se verá:

14088970_10209713852940158_521377590_n.jpg14054742_10209713847980034_2109526499_n.jpg14054667_10209713849260066_21557707_n.jpg

Incluso si deseamos añadir texto o algún título lo hacemos de esta manera:

|TEXTO|TEXTO|TEXTO|TEXTO|
|---|---|---|---|
|IMAGEN|IMAGEN|IMAGEN|IMAGEN|
|TEXTO|TEXTO|TEXTO| TEXTO|
|IMAGEN|IMAGEN|IMAGEN|IMAGEN|

Así se verá

Venezuela
Argentina
Brasil
México
banderas-21.pngbanderas-1.pngbanderas-8.pngbanderas-14.png
Perú
Colombia
Chile
Puerto Rico
banderas-18.pngbanderas-9.pngbanderas-3.pngbanderas-19.png

Fuente

  • Vertical
    Para esto aplicamos la lógica anterior, sólo que como deseamos las imágenes dispuestas en forma vertical, el número de filas aumenta tantas imágenes queremos mostrar y el número de columnas es igual a uno.

Por ejemplo, para una serie de 3 imágenes en vertical usamos el siguiente código:

|IMAGEN|
|---|
|IMAGEN|
|IMAGEN|

Así se verá:

20161227_155404.jpg
20161227_155408.jpg
20161227_155410.jpg

Si deseamos añadir texto hacemos lo siguiente:

|IMAGEN|TEXTO|
|---|---|
|IMAGEN|TEXTO|
|IMAGEN|TEXTO|
|IMAGEN|TEXTO|
|IMAGEN|TEXTO|

Así se verá:

Mundial de fútbol 2018
GRUPO B
pt.png
Portugal
es.png
España
ma.png
Marruecos
ir.png
Irán

Fuente

  • Cuadrícula
    Podemos mostrar imágenes en una cuadrícula y esto se sigue haciendo gracias al número de celdas que deseemos modificar con el formato de tabla, por ejemplo, para mostrar 9 fotos de manera ordenada podemos hacer lo siguiente:

|IMAGEN|IMAGEN|IMAGEN|
|---|---|---|
|IMAGEN|IMAGEN|IMAGEN|
|IMAGEN|IMAGEN|IMAGEN|

Así se verá:

14055733_10209713839219815_715351512_n.jpg
14054795_10209713830739603_942297723_n.jpg
14081270_10209713835939733_347291154_n.jpg
14081397_10209713841179864_2018368369_n.jpg
14089571_10209713835739728_429568329_n.jpg
14101560_10209713847900032_1641822973_n.jpg
14101613_10209713836819755_152013745_n.jpg
14101777_10209713837499772_837937600_n.jpg
14089571_10209713835739728_429568329_n.jpg

DQmcu2ZiV1iLJhzGhY2JKFBPkabW5nu8CnygytxfbgvgLxE.png

Espero sea de su provecho esta información.

Gracias ♡

¿Deseas darle mejor apariencia a tus posts? Tutorial Markdown para textos (Guía de aprendizaje)

Sort:  

Que genial te quedo la forma de explicar el tan poco conocido Markdown, que nos permite poder colocar imagenes y darle una apariencia mas llamativa a nuestras publicaciones :D sobre todo me encanto que das ejemplo utilizando fotos tuyas, para que se vea mas real y demuestras que es fácil de utilizar :D solo con entenderlo un poco basta para poder crear bonitas y llamativas publicaciones :D

Es un placer enorme que le haya gustado y ayudar a mejorar el aspecto de nuestros posts. Siempre agradecida con el equipo @reveur y @castellano

Guao muy buena información, no hace mucho había visto una cuadricula de imagen en un post y me preguntaba como lo habrían logrado hacer?, muchas gracias por tu aporte

Me encanta este tipo de comentarios. Que sea siempre de tu provecho.

Excelente iniciativa. Felicitaciones.

Gracias, siempre gracias ♡

Muy buena e interesante informacion...Gracias

Gracias a ti, espero puedas sacarle provecho a la información. Al final también está la guía para dar formato al texto.

Buenisimo gracias por compartir tus conocimientos

Estamos a la orden.

Excelente información y muy bien redactada.

Gracias a usted por el comentario.

Excelente post. Con él estás haciendo que la comunidad de Steemit mejore. Gracias.

Con esa intención fue realizado, incluso para mí.

Esto es un salvavidas. Gracias a publicaciones como esta cada día me voy sintiendo menos ignorante y más preparado para mejorar mis posts. Muchas gracias.

Gracias a ti, que sea de tu entero provecho.

Estas guías siempre son buenas para aquellos que como yo se nos complica un poco los códigos HTML

Te comprendo perfectamente. A mí me suele suceder esas complicaciones.

Excelente @ennyta, muy buena información para crecer por estos caminos. Ojalá pudieras elaborar un tutorial sobre como elaborar imagen en página web, pues me gusta como termina el tuyo. Saludos.

A tu entera disposición siempre

Excelente tutorial, @ennyta. ¡Felicitaciones!

Siempre agradecida contigo @zeleiracordero

wow de verdad esto si me sera super util ami :D en mis comic santo dios... xD

Excelente. Tu haces un trabajo buenisimo, por cierto, felicidades.

Excelente información, de otra manera no lo fuera entendido, muchas gracias y saludos

Gracias a ud. Que sea su entero provecho. Nos estamos viendo.

Muuuuchisimas gracias, la verdad es que estoy nuevo y precisamente buscaba este tipo de información para darle más vistosidad a las publicaciones, ahora solo me queda practicar. Saludos, nos estamos leyendo.

Buenísimo. Me complace mucho que esta información sea aprovechada para dar ese toque coqueto a las publicaciones. Saluditos!

Me encanta! Esta guía me hacia falta! sobre todo porque voy empezando y no comprendía muy bien como colocar las imágenes de diferentes formas! GRACIAS!

Te comprendo a la perfección, me hallaba en la misma confusión en mis inicios. Al final del post está el link de otra guía para dar formato a texto, espero sea de tu ayuda. Me cuentas que tal te va. Saludos.

No se si te lo dije en tu post anterior de Markdown pero te lo repito si no fué asi, demasiado genial y útil tus post. hay otros con la misma información pero regados y no tan "didácticos" o fáciles de utilizar, muchas gracias. Saludos!

Gracias amigo. Me agrada encontrarme con comentarios tan geniales. Gracias a ti, saludos.

Justo lo que necesitaba. Lo mejor que he visto en el día.
Eres grande, eres más grande que Cristiano Ronaldo!!!
Gracias por esta publicación.

¡Jaja menuda comparación! Que sea de todo tu provecho @leomolina un placer ♡ Saludos.

jajajaja
Saludos!

Excelente aporte, Saludos.

¡Saludos amigo!

Debo guardar este post para mis futuras publicaciones!! me encanta. Muchas graciass @ennyta

Excelente, exprímele el jugo al máximo, que sean super geniales tus publicaciones. Saludos.

Tutoriales como estos hacen falta para los nuevos Steemians, tienes mi vto y mi admiración por tu trabajo, muchas gracias, saludos y bendiciones. ♥

Muchas gracias a ti por tus alentadoras palabras. Estamos para ayudar, unidos somos más fuertes

Excelente post. Gracias por la informacion

Que lo aproveche al máximo.

Imágenes enlazadas es lo mejor, gracias es de mucha ayuda este post me ayudara a mejorar mis post.

Esa es la idea. Gracias especiales para ti.

Congratulations @ennyta! You have completed some achievement on Steemit and have been rewarded with new badge(s) :

Award for the number of upvotes

Click on any badge to view your own Board of Honor on SteemitBoard.
For more information about SteemitBoard, click here

If you no longer want to receive notifications, reply to this comment with the word STOP

Upvote this notification to help all Steemit users. Learn why here!