Como hacer tus post atractivos y ordenados con Markdown y HTML
Que tal queridos amigos de Steemit, en esta ocasión les traigo un pequeño post que los ayudara a crecer como usuarios dentro de esta plataforma. Con estos tips que les ayudaran a crear posts mas estructurados, ordenados y atractivos visualmente. Hoy aprenderemos un poco a usar el Markdown y codigos HTML a la hora de crear nuestros post, a pesar que este tipo de post abunda en la red, la mayoría está en inglés y por otro lado los nuevos usuarios no saben cómo encontrarlos. Por esta razón he decidido actualizarles esta información.
Fuente / Steemit / HTML
¿Que es el Markdown?
Es un lenguaje que trata de conseguir la mayor facilidad a la hora de publicar contenido en la web, este se aplica mediante caracteres especiales que dan un acceso a la misma conversión que tendría usar HTML. Entre sus ventajas podemos encontrar:
Este sera el resultado:
Este sera el resultado:
Este sera el resultado:
Párrafo Centrado
Este sera el resultado:
- Es fácil y rápido de usar.
- Puede ser usado en combinación con HTML.
- Resulta fácil encontrar errores y modificarlos.
Títulos y Encabezados
En la siguiente tabla se expresara como se debe escribir a la hora de crear el post con el uso de ambos lenguajes, solo necesitaras usar uno.
# Titulo 1 | <h1>Titulo 1</h1> |
## Titulo 2 | <h2>Titulo 2</h2> |
### Titulo 3 | <h3>Titulo 3</h3> |
#### Titulo 4 | <h4>Titulo 4</h4> |
##### Titulo 5 | <h5>Titulo 5</h5> |
###### Titulo 6 | <h6>Titulo 6</h6> |
Este sera el resultado:
Titulo 1
Titulo 2
Titulo 3
Titulo 4
Titulo 5
Titulo 6
Énfasis
Estos son los comando que usaremos cuando queremos resaltar un texto en especifico, tales como negrita o cursiva, ademas de así quererlo podemos combinarlas. Cabe resaltar que la palabra que va en su interior es el texto que deseamos resaltar.
**Negrita** o __Negrita__ | <b>Negrita</b> |
*Cursiva* o _Cursiva_ | <i>Cursiva</i> |
~~Tachado~~ | <strike>Tachado</strike> |
Este sera el resultado:
Normal
Negrita
Cursiva
Tachado
Ajuste de parrafos
Si hay algo que llame la atención de un párrafo es verlo justificado, algo que únicamente podremos hacer usando HTML, lamentablemente al principio muchos no sabemos como hacer esto, ¡Eso se acabo!.
| Justificado | <div class="text-justify">Párrafo justificado</div> |
| Alinear a la Derecha | <div class="pull-right”>Párrafo alineado a la Derecha</div> |
| Alinear a la Izquierda | <div class="pull-left”>Párrafo alineado a la Izquierda</div> |
| Centrar | <center>Párrafo Centrado</center> |
Este sera el resultado:
Párrafo justificado Párrafo justificado Párrafo justificado Párrafo justificado Párrafo justificado Párrafo justificado Párrafo justificado Párrafo justificado Párrafo justificado Párrafo justificado Párrafo justificado .
Párrafo alineado a la derecha
Párrafo alineado a la izquierda
Listados
Podemos hacer listados tanto con símbolos como numéricos, ademas de sub listados. Cabe resaltar que con Markdown podemos usar hasta tres comando diferentes para hacer listas.
| Tipo de Listado | Markdown | HTML | Resultado |
|---|---|---|---|
| Numerico |
|
|
|
| Simbolo |
|
|
|
Enlaces
En nuestros post siempre usaremos imágenes que por lo general sacamos de Internet, así mismo también usamos texto copiado de otra web para hacer referencia a lo que estamos escribiendo. Por esta razón es necesario saber como colocar los enlaces de donde hemos sacado dicha información o imagen, ya que de lo contrario estaríamos apropiándonos del contenido que otra persona con mucho esfuerzo ha creado.
[Fuente](Enlace) | <a href="Enlace">Fuente</a> | Fuente |
Citas y Destacar codigo
En ocasiones necesitamos citar a un autor al escribir una de sus frases, e incluso citarnos a nosotros mismos. Por otro lado los que solemos crear post de programación en el cual es necesario enseñarles la parte del código, podemos destacarle para que sea mas claro de leer y entender. El símbolo real se los dejare al lado del ejemplo.
| Citar | > Citar | > |
| Destacar código lineal | 'Código' | ` |
| Destacar código grupal | '''Código''' | ` |
Este sera el resultado:
Citar: La cita de un autor reconocido - Autor reconocido.
Código lineal
Código Grupal
If (0 >1){}
Otros
Por ultimo pero no menos importante tenemos el salto de linea y los separadores, los cuales usamos con mucha frecuencia y podemos usarlos con tres símbolos diferentes.
| Separador | *** o --- o ___ |
| Salto de linea | <br> |
Extra
Para aquellos amantes de los emojis o emoticonos les dejare una lista de los mas usados y el código de como aplicarlos.
| 😉 | 😉 |
| 😊 | 😊 |
| 😠 | 😠 |
| 😜 | 😜 |
| 😧 | 😧 |
| 😱 | 😱 |
| 😆 | 😆 |
| 😎 | 😎 |
| 😍 | 😍 |
| 😭 | 😭 |
| 😞 | 😞 |
| 😶 | 😶 |
| 😇 | 😇 |
| 😈 | 😈 |
| 😵 | 😵 |
Bueno amigos eso ha sido todo, espero les sea de mucha ayuda y así mejoren sus futuros post para que reciban mas Upvotes y Resteem. Si les gusto y desean tener a la mano estas herramientas no duden en darle Resteem a este post, de igual forma también pueden copiar todo lo aquí explicado y almacenarlo en un documento en su computador. Por ultimo acá les dejo los enlaces de donde recopile la información. ¡Hasta pronto!
ADVERTENCIA: El Equipo de Curación dropahead no necesariamente comparte las opiniones expresadas en este artículo. Sin embargo, creemos que el esfuerzo y/o contribución del autor merece una mejor recompensa y visibilidad.
¡Para maximizar sus recompensas de curación!
con SteemConnect
Haciendo lo anterior tendremos más Steem Power (SP) ¡Para poder brindarle mayores recompensas la próxima vez!
Noticias de dropahead: Como retribuir al Proyecto dropahead en 15 segundos o menos
Control de calidad del Equipo de Curación dropahead
De acuerdo a nuestros estándares de calidad(1), su publicación ha alcanzado una calificación de 85%.
Bien dijo Gabriel García Marquez: "Se aprende a escribir escribiendo" ¡ Siga esforzandose, pronto alcanzará la excelencia !
(1) Estándares de calidad de dropahead Witness:
- Relación gráfica al texto (Elección de imágenes de acuerdo al texto)
- Orden y Coherencia
- Estilo y autenticidad (Toque personal, lógica, complejidad, lo que hace que sea interesante y fácil de entender para el lector)
- Fuente de las imágenes y su licencia de uso
Gracias por su apoyo, Saludos.
Excelente post @hadro
Me resulta de gran utilidad en la plataforma. Sigue así dándonos más tips...
Que bueno que te sirva amigo, gracias. Siempre que encuentre algo que le ayude a otro miembro, lo publicare. Saludos
Estos post son bien interesantes, más para los que no conocemos sobre programación (no tan afondo). Excelente, empezare a integrar esos consejos. Saludos
Ojala esto te ayude a darle un impulso a tus post para así ser votado y crecer con rapidez, Suerte.
Congratulations! This post has been upvoted from the communal account, @minnowsupport, by hadro from the Minnow Support Project. It's a witness project run by aggroed, ausbitbank, teamsteem, theprophet0, someguy123, neoxian, followbtcnews, and netuoso. The goal is to help Steemit grow by supporting Minnows. Please find us at the Peace, Abundance, and Liberty Network (PALnet) Discord Channel. It's a completely public and open space to all members of the Steemit community who voluntarily choose to be there.
If you would like to delegate to the Minnow Support Project you can do so by clicking on the following links: 50SP, 100SP, 250SP, 500SP, 1000SP, 5000SP.
Be sure to leave at least 50SP undelegated on your account.
@reveur ven considero que este post puede ayudar a muchos usuarios, ademas de que se ve bien organizado.
hola! soy nueva en esta comunidad y me parece que se post me hace de gran ayuda
excelente, saludos.
Hola, en lo que pueda me paso por tu blog. Gracias espero te sirva en el futuro venidero.
You got a 8.62% upvote from @yourwhale courtesy of @hadro!
Acabo de usar tus consejos, y mira que mi post quedó bien bonito :)
Muchas gracias por la información.
Me alegra, es bueno saber que le haya servido esta información a muchos usuarios para mejorar. Un placer..
Excelente post, súper bien explicado y muy fácil de entender. Gracias por compartir.
Gracias a ti por darte una pasada y leerlo, saludos.
La información ha sido bastante útil muchas gracias