Markdown básico | Maquetando una publicación

avatar
(Edited)

¡Saludos amigos de hive! Hoy me gustaría compartir con ustedes una guía básica de Markdown y HTML para un maquetado organizado de nuestras publicaciones en #Hive.

Existen una gran cantidad de publicaciones que tocan este tema, unas a más profundidad que otras, pero todas tienen en común que son los mismos códigos. Esta publicación es para apoyar la iniciativa del amigo @newnow497 en el proyecto instructivo e interactivo de clases por WhatsApp Aprendiendo HIVE desde nuestra experiencia.

png_20230317_165659_0000.png

Image by: @crptogeek

Maquetado de una publicación

Para que una publicación que de ordenada con el texto justificado, centrado, las imágenes ubicadas a la derecha o a la izquierda, texto en 2 columnas, resaltar las citas, títulos y subtitulos, es necesario utilizar algunos códigos de HTML o Markdown para lograr esta organización. Aquí les comparto los más utilizados:

Títulos:

Para darle tamaño a los títulos simplemente vamos a utiliza el símbolo # dejamos un espacio y agregamos el texto que queremos ver más grande. A medida que agreguemos # el título se va haciendo más pequeño.

Screenshot_2023-03-17-17-28-08-634_com.android.chrome-edit.jpg

Hola Hive

Hola Hive

Hola Hive

Hola Hive

Hola Hive
Hola Hive

Desde PeakD podemos utilizar las opciones que se encuentran en la parte superior de la ventana de texto. Vamos a seleccionar la H y se despliega un pequeño menú con las opción de tamaño que queremos. Seleccionamos la que necesitamos y escribimos el texto.

2cc54bdc-48f5-43ce-8626-f4f470fabc90.gif24333e3f-c8de-4c79-80ec-820e21b4815f.gif

Y podemos visualizar nuestro texto

Hola Hive

Negrita y cursiva:

Podemos resaltar alguna palabra o frase utilizando negrita y cursiva, este código es muy sencillo, consiste en el uso de * para marcar lo que queremos resaltar.

negrita y cursiva.jpg

En PeakD puedes encontrar estas opciones en el primer y segundo botón.

b4bb495a-fedc-4a99-89ad-161a1a365e8d.gif

Si queremos utilizar negrita cursiva presionamos ambos botones para que se marquen los 3* .

f655b867-127b-41af-b9d3-3bc579190f02.gif

Tachado:

Para tachar un texto debemos colocar al principio 2 tildes o virgulilla, colocamos el texto sin dejar espacio y finalmente 2 tildes más.

Hola Hive

Imagen1tachadoo.jpg

En PeakD encontramos el tachado en el cuarto botón de la parte superior S.

f47b2b49-a0ce-4753-846a-fbb6c18ccad6.gif81c5d99b-6934-4e90-809d-7a3eb6e8a0a8.gif

Subrayado:

Para este código vamos a utilizar estos símbolos para agrupar el comando <>. Dentro de los simbolos colocamos la letra u minúscula < u >, luego el texto y finalmente </ u>. Si nos damos cuenta es el mismo código pero uno abre y el que cierra se le agrega un /.

Hola Hive

subrayado.jpg

Texto justificado:

En lo personal me gusta justificar todas mis publicaciones por lo que este codigo siempre está presente:

Screenshot_2023-03-17-18-52-19-949_com.android.chrome-edit.jpg

2 columnas de texto:

Este comando se utiliza para colocar texto e imágenes en 2 columnas. Muchas veces una publicación se presta para hacer 2 columnas de texto para colocar ambos idiomas. También podemos hacer como una revista y colocar en una columna una imágen y en la columna de junto el texto.

Screenshot_2023-03-17-18-57-36-900_com.android.chrome-edit.jpg

Texto aquí

Texto aquí


Centrar:

Para centrar vamos a utilizar el comando < centrar > colocamos el texto o la imágen y luego vamos a cerrar < /centrar >.

Tablas de texto o imágenes:

Para cerar una tabla vamos a utilizar las líneas paralelas para determinar el número de columnas que necesitamos.

Screenshot_2023-03-17-19-03-51-782_com.android.chrome-edit.jpg

columna 1column2column3
content1content2content3

En la parte superior de la ventana de texto en PeakD, encontramos el botón de tabla. Simplemente debemos sustituir el texto y listo. Lo utilizamos también para organizar imágenes dentro de las tablas y que queden mejor organizadas. Por ejemplo:

Lo veríamos así en el maquetado

Screenshot_2023-03-17-19-09-15-310_com.android.chrome-edit.jpg

Y lo veríamos así en la vista previa

IMG_20230311_182817.jpgIMG_20230311_182817.jpgIMG_20230311_182817.jpg
content1content2content3

Texto en rojo:

Para el texto en rojo debenos utilizar el código < div class="phishy"> para abrir el comando, luego escribimos el texto que queremos que sea rojo y finalmente colocamos para cerrar. Se vería así en el maquetado:

Screenshot_2023-03-17-19-33-01-062_com.android.chrome-edit.jpg

Y así en la publicación:

Hola Hive

Separador fondo gris con y sin texto:

Esto podemos utilizarlo para separar un bloque de texto de otro. Cuando debemos hacer un corte de un tema y queremos separar podemos optar por un separador de fondo gris. En el medio de los códigos que abren y cierran podemos agregar texto o emojis y el codigo de centrado para ubicarlo en medio de la página.

Separador fondo gris con y sin texto.jpg

😜 🙃 😁

Recomendaciones

Para hacer mis publicaciones tengo mi propia plantilla con los códigos que más utilizo. Tengo un blog de notas con los código que pudiera necesitar así simplemente los copio y los pego para maquetar.

Recuerden que nuestro blog es nuestra marca personal. Por esto es importante establecer un formato para que nuestras publicaciones se diferencien de otras. Esto podemos hacerlo con un banner personalizado, separadores, establecer un saludo o despedida especial, así nuestros seguidores sabrán reconocer nuestro contenido.

Partiendo de este punto y desde mi experiencia, si armamos una plantilla personalizada sería mucho más sencillo maquetar una publicación.

IMG_20230317_192013~2.jpg

Espero sea de utilidad esta información. Nos vemos en una próxima oportunidad.

Fuentes consultadas


Imagen1.png

dc.png

Original content by the author.
Resources: App: Canva / Giphy / Inshot
📷 Redmi 10 Smartphone
Translation done with Deepl.com
✿ All Rights Reserved || © @chacald.dcymt 2023 ✿
💌 Discord: chacald.dcymt#3549
Twitter @chacald1
_
Contenido original del autor.
Recursos: App: Canva / Giphy / Inshot
📷 Redmi 10 Smartphone
Traducido con Deepl.com
✿ Todos los Derechos Reservados || © @chacald.dcymt 2023 ✿
💌 Discord: chacald.dcymt#3549
Twitter @chacald1



0
0
0.000
9 comments
avatar

Siempre me gustan tus publicaciones las disfruto mucho, pero esta además es súper importante por ser contenido educativo y de valor tanto para los nuevos en Hive como para nosotros, por ejemplo hay cosas que no sabía a pesar de que siempre maqueto y ahora lo implementaré gracias a tu tutorial

Gracias amiga

0
0
0.000
avatar

De verdad que me da gusto que te ayude la información que estoy compartiendo... Muchas gracias por tus palabras, valoro mucho tu visita. Eres siempre bienvenida por aquí.

🎆🎇🎉🎊🌧️💐✨🌾🌱🌹🌙🌿🍃🥀⚡🌺☘️🍀🌈🌷⭐🪴🌵🌸🌟💮🌴🌳💫☀️💮☔🌲🌳🌍🌌🌠☄️🏵️🐝🌻🌼🍄🐞🦋💙☕💜🍍🎆🎇🎉🎊

0
0
0.000
avatar

!HUESO

0
0
0.000
avatar

SORRY, you have exhausted all the uses you had for today, try again tomorrow.

Greetings from the Virtual World Community. We send you Hueso token to support your work.
Click on this banner, to be directed to the Virtual World Discord and learn more about the curation project.

0
0
0.000
avatar

Perfecto amiga que buena explicación 👍👍

0
0
0.000
avatar

Esta genial esto, ya sabía algunos comandos pero otros no así que muchas gracias por la información

0
0
0.000