¡Bienvenidos estudiantes y lectores de nuestra hermosa plataforma! Hoy les traemos una lección nueva del tópico de Markdown, mentoría que fue dada por @ilazramusic el día Viernes 12 de Octubre a las 7:00pm (Hora Venezuela).

_{Este post es hecho por @ilazramusic para hacer Power Up con la cuenta del proyecto, posteriormente se realizará la misma publicación en inglés para recibir 50% de recompensa y 50% de SP.}

Continuación de la lección anterior

Como sabrán, nosotros realizamos mentorias con diversos tópicos dentro del proyecto tanto para nuevos usuarios (que nunca hayan ingresado a Steemit), como para usuarios medianamente experimentados que necesiten afinar algunos detalles para mejorar sus publicaciones. Esta es la lección que da continuidad a la planteada en el siguiente post ---> Proyecto SWIM | Markdown | Lección #1 |

Dicho todo esto, podemos dar comienzo a un nuevo post tutorial sobre Markdown.

Combinación de elementos anteriores

Como sabrán, en la lección anterior hablamos sobre varios elementos y maneras de mostrar nuestro contenido en las publicaciones, fuimos desde alineación y estilizado de texto hasta alineación de imágenes. Con todo lo aprendido anteriormente, ahora vamos a subir las cosas un poco de nivel a demostrar cómo podemos combinar estos elementos para conseguir resultados muy agradables a la vista de nuestros lectores, veamos las posibles combinaciones:

1.- Fusión de textos e imágenes

Esta es una de las maneras en las que muchas personas pueden utilizar imágenes de apoyo para sus publicaciones. Hay maneras de mostrar imágenes alineadas con párrafos para que coexistan dentro de la misma publicación sin perder el orden, y todo dependerá de la codificación que le demos al momento de escribir la publicación. Veamos a qué nos referimos.

Si por ejemplo, tenemos el siguiente párrafo:

_{Texto tomado del editor de texto Sublime 3, elemento lorem para crear un párrafo aleatorio en HTML.}

ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Y tenemos la siguiente imagen:

Dependiendo de lo que queramos hacer, tenemos dos maneras de hacer que estos dos elementos coexistan dentro de una misma publicación, en primer lugar, tenemos que tomar en cuenta los límites de nuestra imagen, veamos:

Sabiendo esto, ahora vamos a conversar sobre las dos maneras de hacer coexistir dos elementos (párrafos e imágenes) en nuestra publicación:

_{No aplica para los vídeos.}

Coexistencia Simétrica: Este tipo de coexistencia consiste en crear dos divisores y separar el párrafo hacia un lado y la imagen hacia el otro, al colocar un contenedor después del otro, los dos elementos van a coexistir pero el texto no va a invadir el espacio del contenedor de la imagen luego de superar su límite inferior, así mismo, tampoco el texto va a invadir el límite superior de la imagen si esta se encuentra después del párrafo. Ejemplo:

Si tenemos la siguiente codificación:

<div class="pull-left"> Párrafo </div>

<div class="pull-right"> Enlace de la imagen </div>

Y reemplazamos párrafo con el párrafo anteriormente mencionado y enlace de la imagen con el enlace de la imagen anteriormente mencionada, obtenemos lo siguiente:

Si vemos cada div como una caja, podríamos imaginar lo siguiente:

Ambas cajas coexisten pero como cada divisor tiene sus límites, estos se respetan entre sí.

Coexistencia Asimétrica: Este tipo de coexistencia se basa en el hecho de solo colocar la imagen dentro de un divisor, de esta manera, el párrafo será libre de invadir el espacio de dicho divisor luego de que este supere los límites superior o inferior de la imagen. Ejemplo:

Si tenemos la siguiente codificación:

Párrafo

<div class="pull-right"> Enlace de la imagen </div>

Y reemplazamos párrafo con el párrafo anteriormente mencionado y enlace de la imagen con el enlace de la imagen anteriormente mencionada, obtenemos lo siguiente:

Fíjense esta vez, el párrafo invade los límites del divisor pero respetando el límite superior de la imagen. Si vemos lo anterior con la imagen rodeada por el divisor, tendríamos lo siguiente:

Eso pasa cuando invade el límite superior, ahora veamos cómo invadir el límite inferior. Para lograr esto, simplemente hay que alterar el orden de la codificación y colocar la codificación de la imagen primero y el párrafo después, Ejemplo:

Si tenemos el siguiente código (el mismo código anterior pero invertido):

<div class="pull-right"> Enlace de la imagen </div>

Párrafo

Y reemplazamos párrafo con el párrafo anteriormente mencionado y enlace de la imagen con el enlace de la imagen anteriormente mencionada, obtenemos lo siguiente:

Fíjense esta vez, el párrafo invade los límites del divisor pero respetando el límite inferior de la imagen. Si vemos lo anterior con la imagen rodeada por el divisor, tendríamos lo siguiente:

Y por supuesto, si queremos que la imagen quede de uno de los dos lados y el párrafo invada tanto por el límite superior como por el inferior haríamos lo siguiente:

Si tenemos el siguiente código:

Primera parte del párrafo

<div class="pull-right"> Enlace de la imagen </div>

Segunda parte del párrafo

Y reemplazamos párrafo con el párrafo anteriormente mencionado y enlace de la imagen con el enlace de la imagen anteriormente mencionada, obtenemos lo siguiente:

Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Si vemos el divisor de la imagen como una caja con su área, podríamos imaginar lo siguiente:

Les recordamos que aunque lean esto una y mil veces la idea siempre va a ser aprender por medio de la práctica, pongan en práctica lo aprendido en estos tutoriales y así podrán crecer como creadores de contenido.

2.- Hipervínculos, ¿qué son y cómo usarlos?

En nuestras publicaciones, hay veces en las que tenemos que utilizar recursos externos para apoyar el contenido que estamos mostrando. Con este fin, nuestro deber es citar el contenido externo que estamos utilizando para saber que no estamos cometiendo malas prácticas como plagio o para poder referenciar a las personas hacia contenido que tenga que ver con nuestra publicación, podría ser inclusive contenido propio que tenga que ver nuestra publicación actual.

Para tal fin, podemos utilizar lo que se conoce como hipervínculos. Los hipervínculos son maneras de referenciar contenido por medio de texto o imágenes al contenido que se encuentre fuera de nuestras publicaciones. La estructura de los hipervínculos es la siguiente:

Hipervínculos en Texto: Para referenciar contenido externo por medio de texto, debemos utilizar la siguiente estructura:

[Texto a referenciar](Enlace de referencia)

Por ejemplo, si queremos enviar a las personas al perfil del proyecto al darle click a un texto que diga "Ir hacia el perfil del proyecto", utilizamos la estructura anterior reemplazando Texto a referenciar con Ir hacia el perfil del proyecto y Enlace de referencia con https://steemit.com/@swimproject. Haciendo esto obtenemos lo siguiente:

Ir hacia el perfil del proyecto

Pueden darle click y hacer la prueba ustedes mismos.

Hipervínculos en Imágenes: Para referenciar contenido externo por medio de imágenes, debemos utilizar la siguiente estructura:

[![](Enlace de la imagen)](Enlace de referencia)

En este caso se complica la cosa un poco más, sin embargo, pueden solo copiar y pegar el código anteriormente mostrado y reemplazar "Enlace de la imagen" y "Enlace de referencia". Veamos un ejemplo de esto:

Supongamos que tenemos esta imagen:

El enlace de la misma (y de cualquier imagen) pueden conseguirlo al darle click derecho y luego a donde dice copiar dirección de imagen, de esta manera:

Una vez copiado el enlace, solo deben pegarlo en el post para ver la misma, en el caso de la imagen anterior (logo de SWIM) el código es el siguiente:

Ahora, si coloco el código anterior en "Enlace de la imagen" y coloco https://steemit.com/@swimproject en "Enlace de referencia" podemos enviar a las personas al blog del proyecto al darle click al logo, pueden hacer la prueba, quedaría de la siguiente manera:

3.- El "Truco" para hacer un post bilingüe

Hay muchas personas que intentan hacer publicaciones bilingües con los párrafos en ambos idiomas dentro del mismo post y que además se vea estéticamente bien uno al lado del otro, vamos a hablar sobre este estilo de armar publicaciones, vamos a explicar cómo colocar un párrafo a la izquierda y otro párrafo a la derecha, y que se vean debidamente ordenados.

En primer lugar, vamos a querer por supuesto que nuestros párrafos estén justificados para que se vean ordenados y simétricos dentro de nuestros contenedores (divisores), entonces comenzamos colocando el código que conocimos en la clase anterior para justificar texto:

<div class="text-justify"> </div>

Una vez que tenemos este primer código, vamos ahora a crear el párrafo que vamos a colocar a la izquierda y le aplicaremos su debido código aprendido en la clase pasada para colocar un texto hacia la izquierda:

Tomando otro texto lorem, tenemos:

Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Y el código a utilizar sería el siguiente:

<div class="pull-left"> Párrafo </div>

Combinando ambos códigos tendríamos:

<div class="text-justify"> <div class="pull-left"> Párrafo 1 </div> </div>

Y como resultado nos daría lo siguiente:

Ahora, si queremos colocar el otro párrafo (utilizaré el mismo pero lo colocaré en negritas para diferenciarlo) debemos hacer lo mismo pero colocando "pull-right" en el código en lugar de "pull-left" y añadirlo a nuestra combinación de códigos, lo que nos daría el siguiente resultado:

<div class="text-justify"> <div class="pull-left"> Párrafo 1 </div> <div class="pull-right"> Párrafo 2 </div> </div>

Si aplicamos eso entonces con los párrafos a utilizar obtenemos lo siguiente:

Muy bien, esto ha sido todo el post tutorial para la lección número 2 del tópico Markdown, esperamos que haya sido de su agrado y si pueden ayudarnos a compartir este contenido hecho por y para los creadores de contenido estaríamos muy agradecidos.

¡Apoya a nuestros Swimmers!

Todo el apoyo que podamos recibir en este proyecto es un apoyo para todos los que llegan a nosotros buscando crecer como creadores de contenido, así que si deseas unirte a nuestra causa puedes hacerlo de varias maneras:

1- Donaciones

Puedes donar cualquier monto en STEEM o en SBD a la cuenta @swimproject, todos los fondos ahí reunidos irán para iniciativas que realizaremos para nuestros estudiantes, pagos para nuestros mentores y demás (Por los momentos contamos con un fondo de 38.575 STEEM, todos enviados por nuestro creador al proyecto como fondo y presupuesto que ya ha sido utilizado por primera vez para incentivar a nuestros primeros alumnos.

_{Para más detalles pueden consultar el siguiente post ---> Proyecto SWIM - Tercera Actualización por @ilazramusic.}

Todos los hechos que ameriten una transparencia adicional serán explicados a través del blog de nuestro CEO ---> @ilazramusic.

2- Delegaciones

De querer aportar con un poco más de peso, también pueden delegarnos Steem Power, lo cual podremos utilizar para hacer crecer el proyecto y poder brindar un apoyo en votos a los creadores de contenido que forman parte de nuestro proyecto. Si deseas realizar una delegación, te invitamos a utilizar cualquiera de los botones a continuación los cuales conectan directamente con Steem Connect:

50SP	100SP	250SP	500SP	1000SP	5000SP

_{Recuerda dejar más de 50SP sin delegar para evitar problemas de RC.}

3- Feedback

No hay nada que más haga crecer a un proyecto que el feedback y la recepción de los lectores, por lo que si eres un Steemian Experimentado y quieres ser testigo de nuestras mentorias para aconsejar a nuestros swimmers puedes encontrarnos en nuestro servidor de Discord por medio de este link ---> https://discord.gg/9scEcRg

Además, te invitamos a dejarnos un comentario que nos ayude a crecer como proyecto, cualquier opinión, queja, crítica, o mensaje de amor lo recibiremos con todo gusto.

Proyecto SWIM | Markdown | Lección #2 |

Continuación de la lección anterior

Combinación de elementos anteriores

1.- Fusión de textos e imágenes

2.- Hipervínculos, ¿qué son y cómo usarlos?

3.- El "Truco" para hacer un post bilingüe

¡Apoya a nuestros Swimmers!

1- Donaciones

2- Delegaciones

3- Feedback

¡Esto es SWIM!