¡Saludos, chicos! El día de hoy les traigo el post que prometí con el contenido dado en mi Curso de Markdown, el cuál se llevó a cabo el día Viernes 26 de Junio en el Servidor de Discord de la comunidad de @votovzla.
La asistencia fue una total locura, hubo más de 20 personas, esto me hizo sentir sumamente feliz y animado, porque las personas salieron con sus dudas respondidas, y al utilizar esta publicación serán capaces de poder crear publicaciones con mayor nivel y categoría.
Si te perdiste del curso, o quieres refrescar lo dado, bienvenido a esta publicación, comencemos:
Conozcamos la teoría
Antes de hablar de los elementos que están detrás del Markdown, vamos a hablar del lenguaje de donde proviene: el HTML5.
Como pueden ver, es sencilla la explicación, se utilizan elementos llamados etiquetas, los cuales pueden verse como unos contenedores o cajas donde vamos a colocar todos los elementos que queremos mostrar en nuestro post, la manera en la que se trabajan las etiquetas es con una apertura y cierre:
Apertura de elemento:
‹NombreElemento›
Cierre de Elemento:
‹/NombreElemento›
Básicamente, los elementos cierran al colocar su mismo nombre pero colocando un «/» antes de la palabra; ahora, hablemos de Markdown:
Entonces, Markdown simplemente es una manera más sencilla de escribir el lenguaje HTML5, sin embargo, cuando los elementos son renderizados por el navegador, es decir, cuando son transformados en lo que vamos a ver en nuestro post, estos se traducen a lenguaje HTML5.
Tenemos a disponibilidad los mismos elementos en lenguaje HTML5 y su representación o «máscara» en Markdown, vamos a hablar sobre cada elemento:
1.- Títulos
Uno de los elementos que más utilizamos dentro de nuestros post son los títulos, porque nos ayudan a diferenciar y encapsular cada idea de nuestra publicación, así que tenemos a disposición el elemento header de HTML y su versión o representación en Markdown, como lo ven en la imagen de arriba, siéntanse libre de usar estos elementos.
2.- Modificadores de Texto
Cuando estamos redactando nuestras publicaciones, posiblemente vamos a requerir el modificar visualmente nuestros textos, ya sea para enfatizar ideas con las negritas, ya sea realizar citas textuales utilizando las cursivas o tal vez tratando de decir algo de forma irónica ocultándolo con el tachado, simplemente tienes a disposición los códigos de la imagen anterior.
Además de esto, podemos utilizar otros elementos, como por ejemplo:
Si queremos colocar una potencia matemática, por ejemplo: tres elevado al cuadrado.
Se realizaría de la siguiente manera:3‹sup›2‹/sup›
Y si queremos colocar por ejemplo, Logaritmo base 5 de un número cualquiera, se realizaría de la
siguiente manera:Log‹sub›5‹/sub›N
Si coloco el código acá afuera, sucede lo siguiente:
- Primer caso: 32
- Segundo caso: Log5N
Y por supuesto, también podemos mezclar elementos para aplicar varias modificaciones visuales a la vez:
Si queremos un párrafo que esté en negritas y cursivas a la vez, hacemos lo siguiente:
MARKDOWN
_**Esto es un texto cursivo y negritas_**HTML
‹b›‹em›Esto es un texto cursivo y negritas‹/em›‹/b›
Si colocamos ese código acá afuera, se vería de la siguiente forma:
Esto es un texto cursivo y en negritas
3.- Hipervínculos
En este caso, soy más partidario de utilizar el Markdown para utilizar los hipervínculos; esto con el fin de poder hacer que nuestros lectores puedan llegar a otro sitio a través de nuestro post, por ejemplo, si los quiero llevar a ver mi perfil de instagram, haría lo siguiente:
Los invito a buscarme en mi [perfil de instagram](https://www.instagram.com/dimeilaz)
ó
Los invito a buscarme en mi ‹a href="https://www.instagram.com/dimeilaz"›perfil de Instagram‹/a›
Esto haría que se vea de la siguiente manera: Los invito a buscarme en mi perfil de Instagram.
4.- Imágenes
Con la misma lógica que los elementos anteriores, se utilizan estos, la diferencia es que en su mayoría, nosotros utilizamos el editor de Markdown al crear nuestros post, esto hace que al insertar una imagen se coloque de forma automática el elemento en formato Markdown.
Divisores
Cuando creamos contenido extenso, vamos a estar utilizando todo el tiempo estos elementos conocidos como Divisores, ya que estos nos ayudan —como su nombre lo dice— a dividir el contenido en una especie de «cajas» para poder aplicarles cambios a estos elementos internos sin interferir con los otros elementos.
Cuando trabajamos con divisores, siempre debemos pensar que estamos trabajando con una caja o un contenedor, así el trabajo se vuelve bastante sencillo.
Si se preguntan para qué funciona esto, podemos poner de ejemplo el hecho de querer colocar una imagen de lado con texto alrededor en nuestro post, claro que para esto necesitaríamos colocar un dato adicional dentro de nuestro divisor llamado clase, lo que nos ayudaría a darle funcionalidad extra; para el caso mencionado anteriormente (colocar una imagen en un lado con texto alrededor) haríamos lo siguiente:
COLOCAR EL DIVISOR A LA IZQUIERDA ‹div class="pull-left"› IMAGEN TEXTO ‹/div›COLOCAR EL DIVISOR A LA DERECHA ‹div class="pull-right"› IMAGEN TEXTO ‹/div›
Entonces, tenemos a disposición dos clases para colocar contenido (imágenes, texto, etc) hacia los lados en nuestro post:
class="pull-left"
class="pull-right"
CENTRAR TODOS LOS ELEMENTOS DENTRO DE UN DIVISOR ‹div class="text-center"› IMAGEN TEXTO ‹/div›JUSTIFICAR TODOS LOS ELEMENTOS DENTRO DE UN DIVISOR ‹div class="text-justify"› IMAGEN TEXTO ‹/div›
Podemos aplicar una alineación (centrado, justificado) al texto de nuestro post utilizando las siguientes clases:
- class="text-center"
- class="text-justify"
COLOCAR TODOS LOS ELEMENTOS DE TEXTO DE UN DIVISOR EN COLOR ROJO ‹div class="phishy"› IMAGEN TEXTO ‹/div›
Podemos colocar el texto dentro de nuestro divisor en un color diferente al que solemos utilizar utilizando la siguiente clase:
- class="phishy"
¡Muchas gracias por leerme! No olvides poner en práctica lo aprendido
@ilazramusic#2853.Este post es traído a ustedes, gracias a mi gran familia de @votovzla
Si quieres formar parte de esta gran familia, te esperamos en el Servidor de Discord
