¿Deseas darle mejor apariencia a tus posts? Tutorial Markdown para textos (Guía de aprendizaje)

in #spanish6 years ago (edited)

markdown.jpg
Markdown

En mi recorrido por los caminos perdidos de Steemit, donde cometer cada novatada era parte de mi día a día (y no es que ahora no los cometa); desperté una mañana y decidí que eso debía cambiar y me dije con talante rebeldía “seré novata, pero con estilo”. Me dediqué a estudiar y recopilar información de diversos documentos. Toda una investigación para alcanzar mi objetivo. Ahora estoy aquí, con la intención de enseñarles lo que hasta ahora he aprendido y ayudarles a dar ese toque coqueto (para los más vanidosos), elegante (para los más conservadores) y divertido (para los más creativos) a sus posts.

El tutorial va a estar dividido en 2 importantes ítems:

  • Texto
  • Imágenes

En vista de que la información es amplia decidí que debía realizarlo en dos posts para su fácil manejo. El primero será dedicado al formato de texto.

Vamos a dar inicio a este maravilloso mundo. ¡Sea bienvenido!


Markdown para texto

  1. Títulos y encabezados
  2. Énfasis
    • Negrita
    • Cursiva
    • Tachado
    • Negrita y cursiva
  3. Lista
    • Con viñeta
    • Con número
    • Listas anidadas
  4. Citas
  5. Enlaces y vínculos
    • Citar un enlace
    • Mencionar un usuario Steemit
    • Insertar videos Youtube
  6. Subíndices y superíndices
  7. Formato de texto
    • Centrado
    • Justificado
    • Texto a la derecha
    • Texto a la izquierda
    • Texto en dos columnas
    • Listas paralelas
  8. Tablas
  9. Línea de regla horizontal

1. Títulos y encabezados

Puede ser utilizado para títulos, subtítulos e incluso para llamar la atención con frases en su redacción. Puedes jugar con el tamaño de las letras, mientras más # más pequeña se irá haciendo (debe dejar un espacio entre el # y la palabra). En markdown sólo hay 6 tamaños de letras, por ejemplo:

Así se escribe

###### Paz y amor

##### Paz y amor

#### Paz y amor

### Paz y amor

## Paz y amor

# Paz y amor

Así se verá

Paz y amor

Paz y amor

Paz y amor

Paz y amor

Paz y amor

Paz y amor


2. Énfasis

Si desea darle mayor énfasis a sus textos y hacer resaltar palabras puedes usar esta opción.

ÉnfasisAsí se escribeAsí se verá
Negrita**Paz y amor**Paz y amor
Cursiva*Paz y amor*Paz y amor
Tachado~~Paz y amor~~Paz y amor
Negrita y cursiva***Paz y amor***Paz y amor

3. Lista

Ordenar los elementos en lista le dará mejor apariencia a su post. Hay dos formas: con viñetas y enumeradas. Para las viñetas simplemente usaremos un asterisco (no debe olvidar el espacio entre el asterisco y la palabra) y para la lista enumerada usaremos números seguidos de un punto (al igual que el asterisco, no se debe olvidar el espacio), puede repetir el número y el código entenderá que debe seguir la secuencia.

Así se escribe

* Paz
* Amor
* Respeto
* Solidaridad

Así se verá

  1. Paz
  2. Amor
  3. Respeto
  4. Solidaridad

Así se verá

  • Paz
  • Amor
  • Respeto
  • Solidaridad

Así se escribe

1. Paz
1. Amor
1. Respeto
1. Solidaridad


Incluso se puede realizar una lista anidada, eso quiere decir listas con niveles o subcategorías. Para las subcategorías se debe dar 4 espacios (con barra espaciadora) y luego escribir el número como se explicó anteriormente, por ejemplo:

Así se escribe

1. Paz
1. Amor
1. Subcategoría del amor 1
1. Subcategoría del amor 2
1. Respeto
1. Solidaridad

Así se verá

  1. Paz
  2. Amor
    1. Subcategoría del amor 1
    2. Subcategoría del amor 2
  3. Respeto
  4. Solidaridad

Las subcategorías en vez de ser enumeradas pudieran ser con viñetas (usando el mismo criterio anterior de dar 4 espacios y luego escribir el asterisco), por ejemplo:

Así se escribe

1. Paz
1. Amor
* Subcategoría del amor 1
* Subcategoría del amor 2
1. Respeto
1. Solidaridad

Así se verá

  1. Paz
  2. Amor
    • Subcategoría del amor 1
    • Subcategoría del amor 2
  3. Respeto
  4. Solidaridad

4. Citas

Cuando se desea copiar tal cual un texto que no sea de nuestra autoría se debe emplear la herramienta de cita con el fin de resguardar el derecho de autor y respetar las normas que dicta Steemit. Para citar solo es necesario escribir una > (mayor que) antes del texto, por ejemplo:

Así se escribe

> Los valores son principios que nos permiten orientar nuestro comportamiento en función de realizarnos como personas.

Así se verá

Los valores son principios que nos permiten orientar nuestro comportamiento en función de realizarnos como personas.


5. Enlaces y vínculos

Son importantes dentro de Steemit para identificar las fuentes de los elementos utilizados en nuestros posts. Para mencionar posts o perfiles de otros usuarios (se usa mucho para nuestros posts de concursos, por ejemplo), entre otras funciones.

  • Citar con enlace
    Se debe escribir el texto que se reflejará como nuestro hipervínculo entre corchetes [ ] y seguido (sin espacios) se debe escribir la URL o página web entre paréntesis ( ).

  • Mencionar un usuario Steemit
    Si desea hacer mención a un usuario de Steemit en su post, simplemente escriba arroba @ seguido del nombre de usuario usado en Steemit.

  • Videos Youtube
    Si desea insertar un video desde Youtube, simplemente copie el URL del video y péguelo en su post, automáticamente saldrá el video listo para reproducir.

EnlacesAsí se escribeAsí se verá
Citar con enlace[Bienvenidos al blog de ennyta](https://steemit.com/@ennyta)Bienvenidos al blog de ennyta
Mencionar un usuario Steemit@ennyta@ennyta
Videos de Youtubehttps://www.youtube.com/watch?v=uq-SMayBvIk

6. Subíndices y superíndices

Estos son letras o números de tamaño pequeño en comparación con las otras grafías, se colocan en el lado derecho y en la parte de abajo o arriba para indicar algo. Se utilizan, por ejemplo, en las fórmulas químicas, ecuaciones matemáticas, en citas de textos. Entre el código <sub> se escribe lo que se quiere sea el subíndice y entre el código <sup> lo que se quiere sea el superíndice, por ejemplo:

...Así se escribeAsí se verá
SubíndiceH<sub>2</sub>SH2S
SuperíndiceX<sup>n</sup>Xn

Esto se puede usar, por ejemplo, para las referencias bibliográficas de las citas. Empleando los ítems explicados anteriormente, el ejemplo quedaría de la siguiente manera:

Paz (del latín pax), definida en sentido positivo, es un estado a nivel social o personal, en el cual se encuentran en equilibrio y estabilidad las partes de una unidad[1]


7. Formato de texto

Darle formato a los bloques de texto hará que sus posts se vean mejor presentados, según el estilo e idea que se desee desarrollar.

  • Centrar texto
    Para centrar el texto se debe colocar el código correspondiente, por ejemplo:
    <center> Texto </center>

Así se escribe

<center>Las sonrisas van escaseando y las cabezas declinando, nadie levanta la voz, ahí van arando el camino del día en silencio, cada quien resguardando como oro su interés, caminando solos sin mirarle la cara al que alcanzó el mismo compás de sus pasos.</center>

Así se verá

Las sonrisas van escaseando y las cabezas declinando, nadie levanta la voz, ahí van arando el camino del día en silencio, cada quien resguardando como oro su interés, caminando solos sin mirarle la cara al que alcanzó el mismo compás de sus pasos.

  • Justificar texto
    Para justificar el texto se debe colocar el código correspondiente, por ejemplo:
    <div class="text-justify"> Texto </div>

Así se escribe

<div class="text-justify">Las sonrisas van escaseando y las cabezas declinando, nadie levanta la voz, ahí van arando el camino del día en silencio, cada quien resguardando como oro su interés, caminando solos sin mirarle la cara al que alcanzó el mismo compás de sus pasos.</div>

Así se verá

Las sonrisas van escaseando y las cabezas declinando, nadie levanta la voz, ahí van arando el camino del día en silencio, cada quien resguardando como oro su interés, caminando solos sin mirarle la cara al que alcanzó el mismo compás de sus pasos.

  • Texto a la derecha
    Para visualizar el texto alineado hacia la derecha se utiliza el siguiente código:
    <div class="text-right"> Texto </div>

Así se escribe

<div class="text-right">Las sonrisas van escaseando y las cabezas declinando, nadie levanta la voz, ahí van arando el camino del día en silencio, cada quien resguardando como oro su interés, caminando solos sin mirarle la cara al que alcanzó el mismo compás de sus pasos.</div>

Así se verá

Las sonrisas van escaseando y las cabezas declinando, nadie levanta la voz, ahí van arando el camino del día en silencio, cada quien resguardando como oro su interés, caminando solos sin mirarle la cara al que alcanzó el mismo compás de sus pasos.

  • Texto a la izquierda
    Para visualizar el texto alineado hacia la izquierda se utiliza el siguiente código:
    <div class="text-left"> Texto </div>

Así se escribe

<div class="text-left">Las sonrisas van escaseando y las cabezas declinando, nadie levanta la voz, ahí van arando el camino del día en silencio, cada quien resguardando como oro su interés, caminando solos sin mirarle la cara al que alcanzó el mismo compás de sus pasos.</div>

Así se verá

Las sonrisas van escaseando y las cabezas declinando, nadie levanta la voz, ahí van arando el camino del día en silencio, cada quien resguardando como oro su interés, caminando solos sin mirarle la cara al que alcanzó el mismo compás de sus pasos.

  • Texto en dos columnas
    Para visualizar el texto dividido en dos columnas (como los periódicos por ejemplo), se utiliza el siguiente código:
    <div class="pull-left">Texto de 1era columna</div>
    <div class="pull-right">Texto de 2da columna</div>

Así se escribe

<div class="pull-left">Las sonrisas van escaseando y las cabezas declinando, nadie levanta la voz, ahí van arando el camino del día en silencio, cada quien resguardando como oro su interés, caminando solos sin mirarle la cara al que alcanzó el mismo compás de sus pasos.</div>

<div class="pull-right">Los buenos días van escaseando. Las conversaciones son vacías, los mismos temas de días anteriores se van acumulando, se convierten en meses y años. Se sabe lo que dirá y se sabe lo que el otro responderá.</div>

Así se verá

Las sonrisas van escaseando y las cabezas declinando, nadie levanta la voz, ahí van arando el camino del día en silencio, cada quien resguardando como oro su interés, caminando solos sin mirarle la cara al que alcanzó el mismo compás de sus pasos.
Los buenos días van escaseando. Las conversaciones son vacías, los mismos temas de días anteriores se van acumulando, se convierten en meses y años. Se sabe lo que dirá y se sabe lo que el otro responderá.


  • Listas paralelas
    Esto es para crear listas dispuestas una al lado de la otra, en forma paralela. Para esto se utilizan los siguientes códigos:
    <div class="pull-right">
    Lista 1
    </div>
    <div class="pull-left">
    Lista 2
    </div>
    <div class="text-center">
    Lista 3
    </div>
    </div>

Así se escribe

<div class="pull-right">
Paz
Amor
Respeto
</div>
<div class="pull-left">
Unión
Tolerancia
Libertad
</div>
<div class="text-center">
Solidaridad
Honestidad
Dignidad
</div>
</div>

Así se verá

Paz
Amor
Respeto

Unión
Tolerancia
Libertad

Solidaridad
Honestidad
Dignidad


8. Tablas

Una forma favorable de organizar la información es a través del uso de tablas, además esto le ofrece un aspecto profesional al post. Se puede crear una tabla con el número de fila que se desee. A continuación les muestro ejemplos de tablas de 2 y 3 columnas:

  • Tabla de 2 columnas

Así se escribe

Columna 1 | Columna 2
------------ | -------------
Contenido 1.0 | Contenido 2.0
Contenido 1.1 | Contenido 2.1
Contenido 1.2 | contenido 2.2

Así se verá

Columna 1Columna 2
Contenido 1.0Contenido 2.0
Contenido 1.1Contenido 2.1
Contenido 1.2contenido 2.2
  • Tabla de 3 columnas

Así se escribe

Columna 1 | Columna 2 | Columna 3
------------ | ------------- | -------------
Contenido 1.0 | Contenido 2.0 | Contenido 3.0
Contenido 1.1 | Contenido 2.1 | Contenido 3.1
Contenido 1.2 | contenido 2.2 | contenido 3.2

Así se verá

Columna 1Columna 2Columna 3
Contenido 1.0Contenido 2.0Contenido 3.0
Contenido 1.1Contenido 2.1Contenido 3.1
Contenido 1.2contenido 2.2contenido 3.2

9. Línea de regla horizontal

Se usa para mostrar una división. Se visualiza como una línea horizontal (se debe dar un salto de línea antes y después de los guiones).

Así se escribe

---

Así se verá


DQmcu2ZiV1iLJhzGhY2JKFBPkabW5nu8CnygytxfbgvgLxE.png

Espero sea de su provecho esta información.

Gracias ♡

Sort:  

Una de las mejores guías que eh leído en este mes felicidades.
Que buen aporte le haces a la comunidad.
Saludos siempre mente positiva.

Gracias, le puse ganas y corazón para que sea del agrado de todos. Me divertí haciéndolo y sólo espero pueda ser de provecho para los futuros posts.

Existen personas que saben lo que hacen y también otras que saben lo que hacen, pero además saben explicarlo. Te felicito muy didáctico. Saludos.

Me siento agradecida por sus palabras. Me complace le haya llegado de buena manera mi intención.

Excelente guía, muy completa y didáctica. Le doy re-steem para dejarla en mis favoritos. Confieso que esto es lo más difícil para mí. Sólo me he atrevido a hacer 2 posts y es debido a que no recuerdo cómo hacer el markdown!
A ver si alguien me dice como poner el acento en la letra "e" con un teclado en Ingles... esto es frustrante.

Amigo le aconsejo primero redactar sus posts en Word, allí haciendo uso del codigo ASCII puede acentuar. Te explico: presiona la tecla Alt (no la sueltes) seguidamente escribes desde el teclado numérico con el BLOQ NUM activado, los siguientes números según la vocal que desees acentuar:
á = 160
é = 130
í = 161
ó = 162
ú = 163

Otra forma de tener tu vocal acentuada es insertando la letra desde la opción símbolo que se muestra en la barra de tareas de Word.

Espero te funcione.

Excelente información. Gracias. Lo voy a dar resteemit para que otros se ayuden como lo hago yo.

Que sea de su entero provecho ♡ Gracias.

Muchas, muchas gracias. Una guía clara y muy sencilla. Las explicaciones y los ejemplos están muy bien concatenados. Además, me encanta el video citado de youtube. Lo voy a reestemear.
Volveré en unas horas para votarte con algo más de sustancia.

Gracias a usted. Me llena de júbilo sus palabras y su gusto por la buena música.

Que buen tutorial @ennyta. Se explica solo. Espero ver pronto el tutorial de imagenes, gracias. Éxitos con esta guía, muy buena. Saludos.

Espero sea de ayuda para tí y otros más. Gracias, siempre gracias ♡

Gracias por compartir tan valiosa información

Siempre a su orden y disposición.

Muy buen post!
Conceptos claros y fácil de comprender!
Muchas gracias por tu aporte!

Que sea de su provecho, lo hice con cariño.

Veinte puntos, @ennyta.
Saludos.

Agradecida con la nota 😊 Un abrazo.

Muy informativo amigo, buen post

Está a su completa disposición. Muchas gracias por sus palabras.

Que guia tan completa @ennyta, te felicito...

Gracias amigo, deseo que muchos le puedan sacar provecho.

Lo deje hasta en mis marcadores de favoritos. Es el mejor tutorial que he visto.

Un placer leerte. Gracias por eso, me complace te haya gustado.

Definitivamente una guía para tener entre mis marcadores, excelente tu publicación y muy agradecido por el aporte.

Estamos para ayudarnos, mi pequeño aporte para esta increible plataforma. Gracias por tus palabras.

EXCELENTE APORTE AMIGA!

Gracias, que sea del provecho de todos. Saludos

Tremendo aporte, me gusto mucho! aplicare una de estas técnicas! saludos!

Excelente, esa es la intención, que lo usemos para dar mejor apariencia a nuestros posts. Saludos

qué útil @ennyta! Gracias por la mención! Un abrazo!

No quería perder la oportunidad de ejemplificar con uno de mis videos favoritos ♡ Gracias a ti.

Muy buena información que me será de mucha ayuda, gracias

Gracias. Esa es la intención, ayudar a mejorar la presentacón de los posts.

Esta muy completa tu guia @ennyta

Gracias por eso.

Está buenísimo. Muy completo
LO tengo en mis marcadores

Honor que me hace, gracias!

Muy buena guía Markdown para los nuevos que se inician y para los que ya tienen tiempo, pero aun dudan de algunas funciones, gracias por compartirlo.

Para que sea de ayuda para mucho, gracias a ti por tus palabras.

Me encanta porque esta sumamente completo, definitivamente lo guardare como "Chuleta" jajajaa, Gracias por compartir.

Seguro. Gracias a ti

Ey muy buena guía ennyta de verdad está bastante completa aunque ya conocía casi todo porque tengo algo de tiempo por aquí, pero siempre se aprender algo nuevo por lo menos no sabia ese método para hacer tablas... yo usaba la manera clásica de HTML con < table>< /table > xD. Gracias por compartir, ¡saludos!

Oh! Agradecida por tus palabras. Tienes razón y realzo lo que afirmaste "siempre se aprende algo nuevo" y eso es lo maravilloso de la vida, que nos da oportunidad de seguir descubriendo novedades. Bonito día para ti @clavismil

Muy didáctico, gracias por compartirlo, @ennyta.

A su entera disposición. Gracias a ti.

de mucha ayuda gracias

A la orden todos.

Excelente guita te felicito, muy buen post... muy completo.

Un placer tus palabras @jimramones Gracias.

Una excelente guía @ennyta. Practica para expertos y noticiarios. Muy didáctica.

¡Que genial este post @ennyta ! Me cayó como anillo al dedo. Me gustaría rebloguearlo, pero aun estoy aprendiendo a manejar esta plataforma y no se que botón debo pulsar. Gracias de antemano.

Muy excelente post de verdad me ah ayudado muchisimo, pero aun no puedo lograr utilizar las negrillas aqui dice que son dos astericos pero lo hago y no me sale saludos

excelente post! gracias por compartir tan buen trabajo, muy bien explicado y fácil de entender... me gusto!