Cervantes Magazine - Vol. 8: Consejos para principiantes

in spanish •  7 years ago 

[Cervantes Magazine - Vol. 8]



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.



Primera parte

  1. Formato básico de texto
  2. Encabezamientos
  3. Citas o bloques de texto
  4. Listas con viñetas
  5. Líneas horizontales
  6. Tablas


rishi-deep-272926.jpg

Fuente:Unsplash - Rishi Deep




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:

dimitry-anikin-383611.jpg

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/)

[![Foo](https://www.google.es/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png)](https://www.google.es/)

Resultados:

Foo

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:

main_image

Imagen centrada:

main_image


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

dimitry-anikin-383611.jpg

Su link original es este: ![dimitry-anikin-383611.jpg](https://steemitimages.com/DQmdxiM6zFK1GYmM2RgoBwBBvxbhMqeG3yY1mmv6x2BzY6h/dimitry-anikin-383611.jpg)

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:

![dimitry-anikin-383611.jpg]()
I![dimitry-anikin-383611.jpg]()

¿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í:

TEXTO QUE QUIERO QUE VAYA A LA DERECHA. Puedo escribir tooooodo lo que quiera. Al principio, el texto se irá acoplando junto a la imagen y, cuando ya no haya más espacio, se irá acoplando debajo de ella.


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

TEXTO QUE QUIERO QUE VAYA A LA IZQUIERDA
TEXTO QUE QUIERO QUE VAYA A LA DERECHA




  • 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: ![dimitry-anikin-383611.jpg](https://steemitimages.com/DQmdxiM6zFK1GYmM2RgoBwBBvxbhMqeG3yY1mmv6x2BzY6h/dimitry-anikin-383611.jpg)

Básicamente sería: ![NOMBRE DE LA IMAGEN](LINK)

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:

dimitry-anikin-383611.jpg

Imagen original


main_image main_image main_image main_image



Tamaños utilizados arriba: 88x31, 128x256, 250x250, 300x250

Tamaños utilizados debajo: 336x280 y 720x300










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!



[Volver a Portada]




Authors get paid when people like you upvote their post.
If you enjoyed what you read here, create your account today and start earning FREE STEEM!
Sort Order:  

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

estupenda explicación, gracias por ese aporte, claras las dudas

oh gracias!

graaaaaaaacias!

Congratulations @nelyp! You have completed some achievement on Steemit and have been rewarded with new badge(s) :

Award for the number of upvotes
Award for the number of posts published

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 STOP

By upvoting this notification, you can help all Steemit users. Learn how here!

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?

IMAGEN QUE QUIERO QUE VAYA A LA IZQUIERDA
...lo digo po lo que esta en ingles

TEXTO QUE QUIERO QUE VAYA A LA DERECHA

Good job bro

I'm more like a sis hehe

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

Están super buenos los tips, gracias.