Notas antes de comenzar:
La intención del post no son las recompensas; la intención principal es que este contenido pueda llegar a la mayor cantidad de usuarios posible, y les sirva.
Se agradecen todos los Reblogueos.Cuando digo Guía de bolsillo, es porque la finalidad es que dejen el Link del Post en sus Favoritos o algún lugar donde lo puedan consultar cuando le necesiten.
Este contenido no es Original, existen cientos de post como este en la plataforma, la intención del mismo es ayudar a los usuarios nuevos. Incluso yo tengo otro post parecido de hace 2 años.
Adornar, Maquetear o Poner bonito tu post, se suele hacer difícil para los nuevos usuarios, e incluso a veces los más antiguos olvidamos ciertos trucos dentro de la plataforma. Por lo que hoy, quiero brindar una pequeña guía de Markdown y HTML con la cual, se podrán defender mucho mejor dentro de la plataforma.
Inspirada en la imagen de 'For Dummies'
Antes de ir de lleno a los trucos, vamos con algo sumamente importante, ¿Qué es Markdown y qué es HTML?. Pues HTML es un lenguaje código que se utiliza para el desarrollo de páginas, mientras que, Markdown es un lenguaje utilizado para escribir, y que el diseño del texto se mantenga legible en todo momento.
A pesar de que HIVE admite HTML, no lo admite en su totalidad, y en su mayoría el Texto de nuestros post se basa en Markdown.
Dejando claro esto, vamos con los trucos, que es por lo que vinieron.
Títulos y subtitulos
Con #
Etiqueta/Almohadilla/Numeral puedes crear un titulo y subtitulos para tus post. Solo debes agregar de uno a seis + un espacio, antes de tu titulo o subtitulo.
1 #
es el más grande y 6 #
el más pequeño
Es decir:
# Tamaño con 1
## Tamaño con 2
### Tamaño con 3
#### Tamaño con 4
##### Tamaño con 5
###### Tamaño con 6
Va a generar:
Tamaño con 1
Tamaño con 2
Tamaño con 3
Tamaño con 4
Tamaño con 5
Tamaño con 6
NOTA: El escribir de forma excesiva con tamaños grandes de letra, véase títulos, puede llegar a considerarse SPAM
Negrita, Cursiva, Negrita Cursiva y Tachado
Puedes hacer uso de distintos efectos en tu texto, con la finalidad de hacer énfasis en ciertas palabras o frases en tu post.
Cursiva
Con *
un Asterisco al inicio y final de tu texto, puedes escribir en cursivas
Colocas:
*Aquí tu texto*
Y obtienes:
Tu texto pero en Cursivas
Negrita
Con **
un par de Asteriscos al inicio y final de tu texto, puedes escribir en negrita
Colocas:
**Aquí tu texto**
Y obtienes:
Tu texto pero en Negritas
Negrita y Cursiva
¿Sabes que pasa si colocas ***
tres Asteriscos al inicio y final de tu texto? Pues combinas los códigos anteriores.
Colocas:
***Aquí tu texto***
Y obtienes:
Tu texto pero en Negritas y Cursivas a la vez
Tachado
Por ultimo, puedes utilizar ~~
dos Virgulilla (AltGr+5 Teclado Español) al inicio y final de tu texto, y tachar un texto.
Colocas:
~~Aquí tu texto~~
Y obtienes:
Tu texto pero ¡Cancelado!
Citas
Con >
Mayor que antes de tu texto, puedes crear una cita.
Es decir hacemos lo siguiente:
> Colocas el símbolo y comienzas con el texto que quieres citar. Esto es muy útil para traducciones también.
Y obtendrás:
Colocas el símbolo y comienzas con el texto que quieres citar. Esto es muy útil para traducciones también.
NOTA: Ahora que hablamos de citar y tengo tu atención, no olvides citar las fuentes de textos ajenos, incluso si parafraseas; de las imágenes que no te pertenecen y de todo el contenido de otros autores que uses en tu post
Linea de código
Con <code></code>
puedes hacer una linea de código, en la cual el Markdown y otros códigos HTML no funcionan, y se muestra valga la redundancia el código.
También puedes utilizar ```
tres tildes/acentos al inicio y final de tu texto.
Es decir:
<code>Lo puedes hacer así</code>
```y también de esta manera, el resultado es el mismo```
Y obtienes:
Lo puedes hacer así
y también de esta manera, el resultado es el mismo
NOTA: Recuerda que el uso excesivo de funciones, sin razón aparente puede ser considerado Spam, no hagas todo un post en lineas de código porque se vea bonito.
Bloque de código
Con ~~~
tres Virgulilla (AltGr+5 Teclado Español) antes y después de tus párrafos, puedes hacer un bloque de códigos.
Su función es la misma que la de la Linea, solo que para párrafos enteros.
Utilizamos
Primero colocas esto ▶ ~~~
¡Y aquí tus párrafos de Texto!
Luego colocas esto ▶ ~~~
Y obtienes:
Tus párrafos de Texto!
NOTA: Recuerda que el uso excesivo de funciones, sin razón aparente puede ser considerado Spam, no hagas todo un post en bloque de código.
Centrar y Justificar texto
Centrar
Con el código <p><center></center></p>
abrazando nuestro texto (Una parte del código al inicio, y otra al final) podremos centrar texto e imágenes.
Colocamos:
<p><center>Aquí tu texto, o el Link de la imagen</center></p>
Y obtienes:
Justificar / Alinear Margenes
Con el codigo <p><div class="text-justify"></div></p>
abrazando nuestro texto (Una parte del código al inicio, y otra al final) podremos Justificar/Alinear los margenes.
De esta manera:
<p><div class="text-justify">Incluimos nuestro párrafo a justificar, colocando antes la apertura del código, y finalizando con el código de cierre.
Lorem ipsum dolor sit amet, consectetur adipiscing 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. </div></p>
Obtienes:
Alinear la Izquierda o Derecha (Escribir en dos Columnas)
Con los códigos <div class="pull-right"></div>
y <div class="pull-left"></div>
podremos alinear a la derecha, o a la izquierda respectivamente.
Colocamos por ejemplo:
<div class="pull-right">Derecha ▶ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
<div class="pull-left">◀ Izquierda Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</div>
Y obtienes tu texto alineado:
NOTA: Este es el mismo código que se utiliza para escribir en dos Columnas, solo debes combinar tanto izquierda como derecha.
Superíndice y Subíndice
Los codigos <sup></sup>
para Superíndice y <sub></sub>
para Subíndice, son otros de los que soporta el formato de texto de HIVe, y que podemos aplicar en nuestros post.
Con el Superíndice reducimos el tamaño de nuestro Texto y lo colocamos en la parte superior del texto normal, ejemplo:
Mira este texto <sup>Este es el Superíndice</sup>
para obtener:
Mira este texto Este es el Superíndice
Mientras que con el Subíndice reducimos el tamaño de nuestro Texto y lo colocamos en la parte inferior del texto normal, ejemplo:
Mira este texto <sub>Este es el Subíndice</sub>
para obtener:
Mira este texto Este es el Subíndice
NOTA: Reducir el tamaño de textos largos puede dificultar su lectura, no abuses de estos códigos.
Imágenes
Aunque existe el codigo ![nombre.png](link.png)
para cargar imágenes, yo les recomiendo usar directamente el link de la imagen y borrar los caracteres extra. Esto, debido a qué no en todas las Dapps el codigo se interpreta igual, pero los link si.
Es decir:
Colocando solo el Link de tu imagen
https://files.peakd.com/file/peakd-hive/jossduarte/OyBvdS7q-Panda.png
Va a generar que se vea:
Links
Usaremos el código más basico que conozco []()
donde dentro de los []
corchetes, colocaremos la palabra o frase a destacar y dentro de ()
los paréntesis, agregaremos los links a donde nos gustaría redirigir.
Es decir:
[Click aquí](https://peakd.com/@jossduarte/)
Va a generar que se vea de esta manera:
NOTA: Este post es para ayudar, y mi mejor consejo es que uses este codigo para reconocer LAS FUENTES, y atribuir el reconocimiento a los autores.
Listas
Podemos usar la sintaxis de tipo: número.
o cualquiera de estos caracteres *
, -
y +
para crear listas
El código sería el siguiente:
1. Hola
2. Esta es una lista y hay Truco
2.1 Colocando 4 espacios en Blanco antes.
2.2 Puedes hacer Sub Listas
+ De los otros Caracteres
- No importa cual utilices
* Siempre se muestra el mismo
El resultado será:
- Hola
- Esta es una lista y hay Truco
2.1 Colocando 4 espacios en Blanco antes.
2.2 Puedes hacer Sub Listas
- De los otros Caracteres
- No importa cual utilices
- Siempre se muestra el mismo
Tablas
Al usar dos ||
plecas o barras verticales, podemos crear tablas. Este es el código donde vas a necesitar mas trabajo. El orden es, primero la cantidad de |Título|
por columnas que necesites. Luego un salto de linea y una cantidad de |-|
igual al numero de columnas. y Por ultimo |Artículos|
igual a la cantidad de columnas, y repitiendo el proceso agregaras filas.
|columna 1|columna 2|columna 3|columna 4|columna 5|columna 6| < Columnas
|-|-|-|-|-|-| < Salto de linea Obligatorío
|•|•|•|•|•|•| < Fila 1
|•|•|•|•|•|•| < Fila 2
|•|•|•|•|•|•| < Fila 3
El resultado será:
columna 1 | columna 2 | columna 3 | columna 4 | columna 5 | columna 6 | |
---|---|---|---|---|---|---|
• | • | • | • | • | • | < Fila 1 |
• | • | • | • | • | • | < Fila 2 |
• | • | • | • | • | • | < Fila 3 |
FAQS.
¿Se puede escribir a color en Hive?
Por los momentos NO, aunque HTML permite el color, Markdown no, para de esta forma mantener legibles los textos.
¿Se pueden mezclar códigos?
Si, múltiples códigos pueden usarse, yo por ejemplo uso para mis fuentes esta combinación:
<center><sub>[**Fuente**](Link)</sub></center>
¿Se pueden usar otros codigos HTML?
La respuesta es Prueba, en mi experiencia se pueden indexar en tu blog de Hive, códigos como el de reproductores de SoundCloud, pero no se puede el código de Tweets.
Conclusión
A pesar de las limitaciones a las que nos condiciona el Markdown, se pueden obtener maravillas con estos pequeños trucos. Prueba a crear tu propio formato, a combinar, a crear tu propio maquetado que adorne tus publicaciones y las haga mas atractivas de leer.
Me despido no sin antes agradecer a la gente de @rutablockchain, quienes fueron mi motivación para la redacción de este post; espero que les sea de utilidad y no olviden dejar su comentario.
Me gusta. Presentas de forma práctica la idea.
Voy a tomar en cuenta estas sugerencias
Gracias
Esta guía de bolsillo es sumamente útil para el maquetado en Hive, e incluso para Discord. Espero sea de utilidad
Me gusta...
Excelente trabajo, esto es perfecto para los nuevos usuarios 🥰
Pensando en ellos lo hice, quiero aportar mi granito de arena para que sigan creciendo.
De mis favoritos, tenias que ser tú
Ay... Deja que me sonrojo
Muy buena me encantó gracias por darnos ese gran conocimiento
Es un placer, y créame que disfrutaré ver cuando esos Post de calidad que ustedes nos ofrecen, sigan mejorando incluyendo markdown.
Está muy bueno para nosotros los principiantes. Tengo que ponerlos en práctica!
Es un placer saber que puede ser de ayuda.
Muchas gracias por compartir este manual❤️
Gracias por la clase y manual.
Lo amé 🧡
Saludos. Excelente post
Una pregunta ¿Está forma de maquetar las publicaciones aplica para la app desde el tlf?
Excelente información. Muchas gracias por compartirla.
Excelente información. Gracias por compartirla.
Realmente es una Guía muy bien detallada. Agradecido por haberme encontrado con tu publicación, tal como vemos está tan vigente hoy como ayer. Gracias.