Markdown y HTML, Guía de bolsillo.

in #spanish4 years ago
Notas antes de comenzar:
  1. 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.

  2. 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.

  3. 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:

Así tu texto, o la imagen


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:

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.


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:

Derecha ▶ Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
◀ Izquierda Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.

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:

Click aquí


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á:

  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

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 1columna 2columna 3columna 4columna 5columna 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.

Sort:  

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.