Esta semana el tema de la revista seguirá siendo diferente al mío. Afortunadamente, cada día hay más usuarios nuevos y, siendo mi sección de ayuda para principiantes, me gustaría continuar y hacer una segunda parte sobre el uso del Markdown. No me extenderé mucho más, ya que hay bastante por contar aún, así que voy directamente a las sintaxis de esta semana. Espero que a todos les sea útil.
- Formato básico de texto
- Encabezamientos
- Citas o bloques de texto
- Listas con viñetas
- Líneas horizontales
- Tablas
7. Hipervínculos
Markdown tiene una sintaxis muy sencilla para los hipervínculos. Existen dos estilos, en línea y por referencia.
En línea
Son aquellos enlaces que ponemos dentro de una misma frase o párrafo.
El texto del enlace se escribe entre corchetes ([Texto del Enlace]) y la URL inmediatamente después entre paréntesis ((http://ejemplo.com)). Por ejemplo, si quiero integrar un enlace a Steemit dentro de una frase o párrafo, tendría que poner [Steemit](https://steemit.com). Como ven, puedo seguir escribiendo normalmente, la palabra Steemit es un enlace y pinchando en ella nos llevará, en este caso, a la página de inicio.
Referencia
Hemos repetido hasta el cansancio que cuando una imagen o texto no es de nuestra propiedad, hay que citar siempre al autor ¡¿verdad?!
Pues con esta sintaxis queda muy bien visualmente. Lo suyo sería ponerlo justo debajo de la imagen/texto al cual debemos citar la fuente. Se hace así:
[Fuente](link de la imagen/texto)
Ejemplo:
Fuente: Dimitry Anikin en Unsplash
Aunque muchas veces utilizo imágenes de Unsplash o Pixabay, que son libres de derechos de autor bajo Creative Commons, siempre me gusta nombrar al autor, como gesto de agradecimiento.
Con imagen
También podemos crear hipervínculos con una imagen. Las sintaxis para ello son estas (2):
[<img src="https://www.google.es/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png">](https://www.google.es/)
[](https://www.google.es/)
Resultados:
Si pinchan en cualquiera de las dos imágenes, les llevará, en este caso, a Google.
8. Imágenes
Antiguamente, añadir imágenes a Steemit no era tan sencillo como ahora, que tan sólo hay que arrastrar y soltar, no señoras y señores, antes teníamos que subir las fotos a algún sitio de alojamiento de imágenes, por ejemplo Img Safe, para que se pudiera generar un link que luego teníamos que copiar y pegar aquí. Por supuesto, cuando teníamos la imagen con enlace, era (y es) tan simple como copiar y pegar en nuestro post.
Sin embargo, hay varias cosas que se pueden hacer con una imagen que aún siguen sin ser sencillas, como centrar imágenes, poner una imagen junto a otra, texto junto a una imagen...
Para ello, tenemos que utilizar estas sintaxis:
Centrar imagen
Ya lo vimos en el anterior artículo, se hace igual que con el texto: <center>IMAGEN</center>
Imagen sin centrar:
Imagen centrada:
Una imagen junto a otra
Esto es algo que me han pedido mucho durante la semana, aquí está la sintaxis :)
<div class="pull-left">IMAGEN QUE QUIERO QUE VAYA A LA IZQUIERDA</div>
<div class="pull-right">IMAGEN QUE QUIERO QUE VAYA A LA DERECHA</div>
Resultado:
IMPORTANTE: A veces, las sintaxis se pueden romper por algo tan simple como un punto o un paréntesis de más. Yo lo que hago es probar, probar y probar maneras diferentes, hasta que lo consigo.
En este caso, tenemos que tener cuidado con una cosa, el título de la imagen.
Recordemos que, algunas veces, las imágenes que utilizamos tienen título, pues bien, para que funcione la sintaxis de arriba, hay que borrar el título y todos los corchetes y paréntesis, SIEMPRE, de lo contrario, no funcionará.
La imagen que estoy utilizando desde el principio como ejemplo es esta:
Su link original es este: 
Para utilizar esta sintaxis, dejaremos solo esta parte: https://steemitimages.com/DQmdxiM6zFK1GYmM2RgoBwBBvxbhMqeG3yY1mmv6x2BzY6h/dimitry-anikin-383611.jpg.
Como ven, no tiene nada más que el link. Si lo dejara como originalmente era, quedaría mal. Pongo el ejemplo con todo para para que lo vean:
))¿Lo ven?
Texto junto a una imagen:
La sintaxis es exactamente igual a la anterior, pero en una de las partes en lugar de poner una imagen, lo que ponemos es nuestro texto, así:
<div class="pull-left">IMAGEN QUE QUIERO QUE VAYA A LA IZQUIERDA</div>
<div class="pull-right">TEXTO QUE QUIERO QUE VAYA A LA DERECHA</div>
Quedará así:
Para indicar que quieren dejar de escribir junto a la imagen, hay que poner <br><br><br>, de lo contrario, no parará nunca y todo el texto a partir de aquí se quedaría siempre a la derecha.
Texto junto a texto:
Por supuesto, esto también lo podemos hacer sólo con texto, la sintaxis vuelve a ser la misma.
Si ponemos:
<div class="pull-left">TEXTO QUE QUIERO QUE VAYA A LA IZQUIERDA</div>
<div class="pull-right">TEXTO QUE QUIERO QUE VAYA A LA DERECHA</div>
Se verá:
Redimensionar imágenes:
Como ya mencionamos anteriormente, cuando subimos una imagen a un post, Steemit automáticamente nos genera un link. Por ejemplo, al arrastrar y soltar la imagen que estoy utilizando como ejemplo, se me ha generado este link: 
Básicamente sería: 
Para redimensionar esa imagen, lo que tenemos que hacer es añadir al link el tamaño que queremos, así:
https://steemitimages.com/300x250/https://steemitimages.com/DQmdxiM6zFK1GYmM2RgoBwBBvxbhMqeG3yY1mmv6x2BzY6h/dimitry-anikin-383611.jpg
Resultado: 
En este caso, el tamaño que he seleccionado es 300x250
¿Lo ven? Está justo después de https://steemitimages.com/300x250/...
Hay que tener en cuenta que al redimensionar, la imagen normalmente pierde calidad, pero puede ser útil en algunas ocasiones, por ejemplo, si queremos hacer una tabla donde uno de los datos que contiene sea esa foto. También nos sirve si queremos hacer un post con muchas imágenes, pero no queremos que se haga tan largo.
Más ejemplos de tamaños de imágenes:
9. Nota al pie
Al igual que la anterior, esta sintaxis es de las que hay que guardar en algún sitio, porque no es tan fácil de recordar, al menos para mi :)
Supongamos que en uno de nuestros textos hemos utilizado una palabra que consideramos que necesita definición, ya que no estamos seguros de que todos saben lo que significa. En este caso le llamaremos "Palabra a definir"; pues bien, junto a esa palabra y SIN espacios ponemos la primera sintaxis y luego, al final del post, la segunda sintaxis y la definición de la palabra. Así:
Palabra a definir<A NAME="Palabra a definir_1"></A><A HREF="#nota1"><SUP>1</SUP></A><BR><P>
Al final del post pondremos:
**Palabra a definir**<A NAME="nota_1"></A><A HREF="#Palabra a definir_1"><SUP>1</SUP></A>: **Definición de la palabra**
El resultado en el párrafo del post será este:
Palabra a definir1
Imaginando que aquí estaría el final de nuestro post, lo que se vería sería esto:
Palabra a definir1: Definición de la palabra
Si tuviéramos más de una palabra para definir, simplemente cambiamos TODOS los números por el que corresponda, el 1 por un 2, 3, 4... y así sucesivamente, tanto en la sintaxis que va junto a la palabra como en la que va al pie de la página.
Pongamos otro ejemplo y así lo ven mejor. Por ejemplo, para una segunda nota tendría, tendría que cambiar todos los números 1 de la sintaxis por el número 2, así:
En el post: Palabra a definir 2<A NAME="Palabra a definir 2_2"></A><A HREF="#nota2"><SUP>2</SUP></A><BR><P>
Al final del post: **Palabra a definir 2**<A NAME="nota_2"></A><A HREF="#Palabra a definir 2_2"><SUP>2</SUP></A>: **Definición de la palabra**
Resultado:
En el post: Palabra a definir 22
Al final del post: Palabra a definir 22: Definición de la palabra
Puede ser que aquí vean el ejemplo del final del post un poco más claro:
Palabra a definir1: Definición de la palabra 1
Palabra a definir 22: Definición de la palabra 2
¡Hasta la próxima!
Saludos, soy nuevo, y me encanto el post, muy bien explicado y claramente de entender. Muchas gracias por compartirlo.
Muchas gracias, me alegro de que sirva de ayuda :)
Realmente extraordinario amigos míos, excelente explicación y formato. felicitaciones. Muy valioso este articulo para la comunidad.
Muchas gracias @carlos-cabeza :)
Una de las secciones que más me gusta del Magazine es está, siempre la guardo en mis favoritos porque me han ayudado mucho a diagramar mis post y que se vean más atractivos. Gracias @nelyp, guardaré esta nueva entrega que esta muy completa y con nuevos códigos. Saludos
Aaawwww gracias @yaniria1 :)
Esta es la guia definitiva !
Jajajajajaja gracias crow
Muy importante lo del tamaño de la imagen, sinceramente eso ahorra mucho el trabajo de tener que editar. Como siempre muy útil el post @nelyp. + 2000$
¡Muchas gracias colo! =)
Información muy importante y bien explicada, gracias Nelyp!!!
Gracias ipa :)
Sin desperdiciooooooosssss.... me ahorras como dos horas de diagamar y cambiar cosas que quería hacer y no sabía como ... Gracias
Gracias a ti por leerlo :)
Muchas gracias por los tips @nelyp, me has ahorrado un buen de tiempo y brindado unos muy buenos recursos para empezarlos a poner en practica, saludos
Este es el tipo de post que nos permite llegar cada dia mas lejos, eternamente agradecido y las pondre en practica para futuros post. :D Feliz día/Noche!
Muchas gracias @jesuseao26. Espero que te sirva de ayuda :)
Grande!
Besoooo
Otrooo
Por fin descubro cómo centrar las imágenes, además de muchas otras posibilidades para mejorar las publicaciones. Gracias. Regresaré constantemente a consultar!! :D
Gracias! :)
Gracias por los consejos @nelyp buen post. Saludos ;)
Gracias :)
Excelente amiga. Gracias por la información. Todo un éxito.
Gracias :)
Justo lo que necesitaba excelente muy buen aporte muchas gracias esto me ayudara mucho para armar mis futuros posts.
Muchas gracias @joecha!
Excelente información Esto me ayudara muchísimo para mi siguientes post, Saludos. :)
Good job bro
I'm more like a sis hehe
Congratulations @nelyp! You have completed some achievement on Steemit and have been rewarded with new badge(s) :
Click on any badge to view your own Board of Honor on SteemitBoard.
For more information about SteemitBoard, click here
If you no longer want to receive notifications, reply to this comment with the word
STOPoh gracias!
graaaaaaaacias!
Están super buenos los tips, gracias.
Hola! Muy bueno este post gracias, ya hice algunas anotaciones para tomar en cuenta en mis siguientes publicaciones. Saludos! Un abrazo!
Me parece muy bueno y muy util que esten compartiendo este material con las personas que estan iniciando en el mundo de steemit.
Muy buenas técnicas de redacción, las tendré en cuenta :)
Muy buen post, soy nueva y realmente esto me ayuda bastante, excelente explicación. Saludos
Super agradecida con este post!!
Aaaaaaaaaaaaahhhhh esto está increíble ¡Muchísimas gracias! Siento que volví a nacer, demasiadas dudas despejadas.
saludos.. excelente post para personas como yo que soy nuevo en este mundo de steemit, que interesante que compartas con todos nosotros
Graaaaaaciaaassss.... ya me siento menos pedida. excelente aporte y consideración con los mas nuevos. 😍
hola!!! soy nueva.Me encantó y muy agradecida por este post, bastante instructivo..Una pregunta para el texto junto a una imagen la sintaxis es textualmente como lo explicas?
muchos gusto soy nuevo en esto soy venezolano gracias por la explicación muy buen contenido muchas gracias
Super! gracias!!@nelyp
gracias por compartir estos detalles amiga @nelyp
Un saludo desde Trujillo, Venezuela, me encanto tu post de ayuda, soy nuevo en esto y necesitaba algo así para guiarme, muchas gracias.
En serio me ayudo mucho este post, de verdad que muchas gracias
¡Excelente tutorial! Ya poco a poco voy agarrándole el hilo a todo esto. Muchas gracias por el aporte (=
excelente @nelyp
estupenda explicación, gracias por ese aporte, claras las dudas