¡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
Gracias @ilazramusic excelente publicación. Soy nueva en esta fascinante mundo de Hive y realmente para mi a sido un tema todo lo relacionado a la presentación de mis publicaciones, en este post aclara muchas de mi dudas. Realmente gracias por este excelente contenido.
Saludos Cordiales
Muchísimas gracias por comentar, para mí siempre es un placer ayudar.
No tenía una noción sobre el Markdown en su definición.
Por lo general a nivel de software privado, se utilizaba bastante Adobe Dreamweaver, más no me dediqué a ello, a razón que nunca profundizé a nivel de diseño web, se manejar PHP, WAMP, MYSQ, XAMPP, y en ese sentido debo actualizarme bastante, ya que el blogging usa mucho:
Compartido en mi Twitter: ~~~ embed:1278552640553615362?s=20 #posh twitter metadata:RGltZWlsYXp8fGh0dHBzOi8vdHdpdHRlci5jb20vRGltZWlsYXovc3RhdHVzLzEyNzg1NTI2NDA1NTM2MTUzNjJ8 ~~~
¡Hola @ilazramusic! Agradecida por tan didáctica explicación. La pondré en práctica.
Gracias por la información, saludos
Extraordinario contenido @ilazramusic, uno de los más didácticos que he leído y de los mejores logrados desde el punto de vista de presentación.
Muchísimas gracias por este aporte de altísimo valor para todos quienes aspiran lograr un nivel de calidad superior al publicar.
Muchísimas gracias por este comentario, en este momento donde estamos apostando por la comunidad, necesitamos unirnos y aportar todo lo que podamos.
Este es un tópico que muchas personas no dominan y en definitiva, es información útil de por vida, y me alegra que pueda aportar algo a cada persona que me lee.
Saludos y bendiciones, ante cualquier duda, estoy totalmente a la orden.
Honor a quien honor merece
Fuerte abrazo
Brutal Guille, me ayudaste un monton
Gracias por el post, me ha servido de ayuda.
Gracias por esta información tan valiosa, nos ayuda para mejorar nuestras publicaciones. Gracias reiteradas.
Justo lo que buscaba, muchas gracias me viene genial
Muchisimas gracias me guardaré este post para siempre jajajaja
Muchisimas gracias por el gran resumen. Me ha ayudado a desempolvar lo poquito que sé en cuanto al HTML y también animado a continuar aprendiendo.
Esta información es de un gran valor. Gracias por tomarte el tiempo de hacer este contenido. Lo único que creo que faltó es cómo reducir una imagen de tamaño. Hago la connotación porque justo estoy buscando ello, no obstante quedo agradecido contigo, porque tenía tiempo sin utilizar esta interfaz y me ayudaste mucho con este post.
Buenas ayuda muchas gracias por su aporte que ha servido de mucho porque me ayudó a refrescar este tema que bien importante es a la hora de publicar saludos desde Cuba
Este post fue de gran utilidad para mí, gracias maestro!
Gracias por la información, soy nueva en Hive y habia sacado unos codigo de internet pero ahora me dejas otros nuevos claros, saludos🤗
Saludos amigo excelente, no ayuda a todos para lo que no saben y tambien para refrecar