馃専Tutorial de Markdown COMPLETO馃専 |Traducci贸n Autorizada

reallygreatsite reallygreatsite.com.png


Dominando el Markdown


OK! Eres nuevo en Hive o eres viejo (abuelit@ jajaja) pero el markdown te hace sentir cosas no muy bonitas cuando vas a intentar hacer un post, no hay problema para eso esta est茅 post!

Esta es una traducci贸n autorizada del post 馃専ULTIMATE Markdown Tutorial馃専 de la fabulosa @carrieallen Markdown Queen! Con libertad editorial m铆a as铆 que hay unos peque帽os cambios y ajustes, pero manteniendo la info tan completa que Carrie originalmente nos dio, as铆 que aqu铆 vamos鈥

隆Es hora de la clase!

Esto es lo que cubriremos:

  • Markdown 鈥 como el HTML, pero m谩s f谩cil.
  • 馃憠 Emojis
  • Im谩genes gratuitas y legales. C贸mo encontrarlos y citarlos.
  • Imagen de portada: el tama帽o perfecto.

Comencemos con un poquito de Markdown.

馃憠 Primero, aqu铆 hay algunas publicaciones s煤per 煤tiles para incluso M脕S Markdown.

Github's Markdown Cheatsheet Lo tiene TODO.
La gu铆a definitiva para Markdown. 隆Incluso tiene aplicaciones para ayudarte!

馃憠 Aqu铆 tambi茅n tienes estos 煤tiles editores de Markdown (desde el navegador).

https://hackmd.io/
https://stackedit.io/

Con ellos puedes:

  • Trabaja f谩cilmente y guarda tus publicaciones en la nube.
  • Comparte tu publicaci贸n con otros para colaborar en tiempo real.
  • Conecta y guarda todo tu trabajo en Google Drive.

Los fundamentos

basics.png

T脥TULOS

Vienen en todas las tallas. Bueno, 6 tallas.
Simplemente escriba # (hashtag) y luego un espacio antes de lo que desea como encabezado. Un hashtag es el m谩s grande y 6 es el m谩s peque帽o. Probablemente solo use 1,2 o 3.

# Encabezado 1
## T铆tulo 2
### T铆tulo 3
#### T铆tulo 4
##### T铆tulo 5
###### T铆tulo 6

Que resultan as铆:

T铆tulo 1

T铆tulo 2

T铆tulo 3

T铆tulo 4

T铆tulo 5
T铆tulo 6

TEXTO

Para cursiva solo agregue un peque帽o asterisco ANTES y DESPU脡S de la palabra u oraciones.
*cursiva*

Para negrita un asterisco m谩s en cada lado. (Dos en total)
**negrita**

Para poner en cursiva negrita, ponerlos juntos! (Entonces 3 asteriscos en cada lado).
***cursiva negrita***

Para agregar resaltado, coloque 1 ` O 3 ``` a cada lado de su palabra o frase.

agregar ``` resaltado

Para atravesar, necesitar谩s dos garabatos horizontales ... 隆Buena suerte para encontrarlo en tu teclado!
~~atravesar~~

Facilito!!


驴Pero qu茅 hay de esa peque帽a l铆nea all铆 mismo?
隆Esos son asteriscos tambi茅n! o guiones o piso.
Solo tres (o m谩s) seguidos.
***
---
___




ENLACES

隆Puede agregar enlaces de clic a todo tu texto! Como se hizo anteriormente con las 煤tiles publicaciones de Markdown.

Debes usar corchetes [] alrededor de lo que quiera que lea su bot贸n o texto en el que se pueda hacer clic. Siga eso con su enlace entre par茅ntesis ().

Se ver谩 as铆:
[Tutorial de Markdown](https://www.markdowntutorial.com/lesson/1/)

Y resulta as铆:
Tutorial de Markdown


IM脕GENES

Afortunadamente, es casi IGUAL que con los enlaces.

Se ve exactamente igual, excepto por un signo de exclamaci贸n al principio. No NECESITA tener un t铆tulo. Se puede dejar esto en blanco. Aqu铆 Copi茅/Pegu茅 un Bitmoji, como puede ver, ni siquiera trae un t铆tulo real, pero se necesitan los corchetes para completar el c贸digo.

![](https://render.bitstrips.com/v2/cpanel/7218c89b-a039-4a96-bab6-67c159880d85-d3d4519c-53ef-4609-b61a-9baaf8117504-v1.png?transparent=1&palette=1)

IM脕GENES con ENLACES CLICKLEABLES

Esto es tan f谩cil como colocar los dos 煤ltimos c贸digos juntos.
Primero, tiene una IMAGEN que se ve as铆:

![](https://files.peakd.com/file/peakd-hive/victoriabsb/bozTMUbO-Hi20My20Name20Is20Victoria201.png)

隆Solo ponemos unos corchetes [] alrededor de la imagen!

[![](https://files.peakd.com/file/peakd-hive/victoriabsb/bozTMUbO-Hi20My20Name20Is20Victoria201.png)]

Y finalmente, solo agregas el enlace que desea al final entre par茅ntesis ().

[![](https://files.peakd.com/file/peakd-hive/victoriabsb/bozTMUbO-Hi20My20Name20Is20Victoria201.png)](https://peakd.com/myhiveintro/@victoriabsb/hi-i-m-victoria-my-introduction-to-the-hive-community-and-answer-to-what-does-hive-mean-to-me-question)


CENTRAR

隆Es hora de mover algunas cosas!
Puede centrar CUALQUIER COSA, todo lo que necesita es <center> al comienzo de la palabra, imagen, etc. y </center> al final. Si NO colocas la barra diagonal inversa en el c贸digo final, centrar谩 el RESTO de su publicaci贸n desde ese punto.

C贸digo gen茅rico para copiar / pegar:

<centro> IMAGEN o TEXTO </ centro>

Ejemplo:

** <center>![](https://cdn.discordapp.com/attachments/700936926865129544/708221575752843264/x3xm84D80mlwAAAABJRU5ErkJggg.png)</center> **

隆Aqu铆 estoy en el medio!

El texto funciona de la misma manera.

## <center> **隆Eres incre铆ble! ** </center>

隆Eres incre铆ble!


馃幎 A LA IZQUIERDA 馃幎 A LA IZQUIERDA 馃幎 A LA DERECHA 馃幎 A LA DERECHA馃幎

Esto da la mayor cantidad de problemas. No te sientas mal si se te hace dif铆cil tambi茅n.

隆Adelante!

Para mover el texto a la IZQUIERDA o DERECHA de una imagen y envolverla, debes colocar el c贸digo EXACTAMENTE de esta manera (puede copiar/pegar esto y completarlo):

<div class="pull-right">DIRECCI脫N DE IMAGEN</div>EL TEXTO IR脥A AQU脥.

imageedit_1_8874097913.png
M铆rame poniendo fotos all铆. 馃槑 馃憠

Recapitulemos; Alineando a izquierda o derecha:

  • Primero, el c贸digo pull (izquierda O derecha).
    <div class="pull-left"> OR
    <div class="pull-right">
  • Inserte la DIRECCI脫N DE IMAGEN, sin espacio.
  • FINALIZA el c贸digo Pull, sin espacio. </div>
  • Despu茅s del cierre del c贸digo Pull ingrese el TEXTO que desea que se coloque a la izquierda o derecha de la imagen, sin espacio.

Puede usar estos mismos c贸digos para alinear a la izquierda o derecha solo su texto. Aqu铆 est谩 el c贸digo para copiar / pegar.

<div class = pull-right> Este texto est谩 a la derecha </div>

<div class = pull-left> Este texto est谩 a la izquierda </div>

<center> Este texto est谩 en el medio </center>

Este texto est谩 a la derecha

Este texto est谩 a la izquierda

Este texto est谩 en el medio.

Una 煤ltima cosa sobre la colocaci贸n de texto ...

Justifica el texto

驴Ya sabes? Colocarlo todo parejo. Como un peri贸dico o libro. 馃槂

Use el mismo c贸digo que el anterior, pero sustituya pull-right o left con text-justify. Aqu铆 est谩 el c贸digo:

<div class="text-justify"> TEXTO </div>

Esto formatea tu texto de manera muy agradable ... como este extracto de Wiki Las aventuras de Alicia en el pa铆s de las maravillas:

Captura de pantalla (144).png


LISTAS

Esto es bastante intuitivo. Puede usar -, + o * delante de una palabra, seguido de un espacio, y se convertir谩 en un PUNTO s贸lido.

* Esta es la primera opci贸n.
- Tambi茅n esta esta.
+ Puedes usar el +.

  • Esta es la primera opci贸n.
  • Tambi茅n esta esta.
  • Puedes usar el +.

Citas o Quotes

Esto es bastante importante. Cada vez que quiera usar las palabras exactas de otra persona, es mejor usar esto y CITAR su fuente. Tambi茅n lo uso para resaltar simplemente partes de mi post que quiero destacar.

S煤per simple, solo agregue una flecha hacia la derecha > al comienzo de su cita.

> Las citas en bloque pueden ser divertidas y agregar profundidad a tus publicaciones.

Las citas en bloque pueden ser divertidas y agregar profundidad a tus publicaciones.


Tablas

Organizan las cosas muy bien. Ahora, tu tambi茅n las podr谩s usar!

Aqu铆 hay un ejemplo:

| Encabezado 1 | Encabezado 2 | Encabezado 3 | Encabezado 4 | Encabezado 5 |
| --- | --- | --- | --- | --- |
| Rojo | Pl谩tanos | Mullido | Jefferson | Libra |
| Verde | Naranjas | Medianoche | Palisandro | Virgo |
| Azul | Fresas | Punto | Broadway | Tauro |

Que m谩gicamente se convierte en ...

Encabezado 1Encabezado 2Encabezado 3Encabezado 4Encabezado 5
RojoPl谩tanosMullidoJeffersonLibra
VerdeNaranjasMedianochePalo de rosaVirgo
AzulFresasPuntoBroadwayTauro

Aqu铆 hay uno en blanco para copiar / pegar y completar usted mismo:

| El | El | El | El | |
| --- | --- | --- | --- | --- |
| El | El | El | El | |
| El | El | El | El | |
| El | El | El | El | |

Tambi茅n puedes poner im谩genes en una tabla. Incluso clikckeables.


VIDEOS DE YOUTUBE

Esto se hace con una copia / pega b谩sica del enlace. Si desea que YouTube CUENTE las vistas que tiene el video, debe obtener el c贸digo EMBED. NO solo copie / pegue la URL.

Aqu铆 est谩n Carrie y su esposo con la canci贸n original, "Lugar correcto, momento correcto".

As铆 es como se ve la codificaci贸n primero:
<center><iframe width="560" height="315" src="https://www.youtube.com/embed/_lPKtjJBFTo" frameborder="0" allow="reproducci贸n autom谩tica; medios cifrados" allowfullscreen></iframe></center>


馃専 Emoji Time!馃専

Esto es algo que me preguntan todo el tiempo, "驴C贸mo tienes emojis en tus publicaciones, comentarios y t铆tulos?"
Bueno, 隆copio y pego, por supuesto! 馃槑
Aunque probablemente podr铆a copiar / pegar emojis desde cualquier lugar, he encontrado un GRAN sitio que simplemente mantengo abierto en mi navegador. T煤 tambi茅n deber铆as. 馃槈

Aqu铆 tienes ... un peque帽o secreto para el universo. 鈽勶笍

馃槑 Get Emoji 馃槑

Si Usas PeakD, el editor te da la opci贸n de agregar emojis directamente.

Untitled.png

rainbow motion.gif

隆IM脕GENES!

Carrie tambi茅n nos tiene un excelente tutorial de How-To usar Google para encontrar im谩genes de uso libre. (est谩 en ingl茅s, pero es f谩cil de entender)

B谩sicamente,

  • Busca en Google lo que quieras.
  • Haga clic en Im谩genes.
  • Haga clic en HERRAMIENTAS debajo de la barra de b煤squeda.
  • Haga clic en DERECHOS DE USO.
  • Elija ETIQUETADO para REUTILIZAR o REUTILIZAR CON MODIFICACI脫N.
    隆Ahora todas las im谩genes est谩n Libres y listas para ti!

Para estar m谩s seguros a煤n puedes hacer clic en el sitio, y as铆 asegurarse de que sea realmente gratuito. Incluso aun as铆 es bueno citarlos tambi茅n, para una total transparencia.

Aqu铆 hay algunos buenos sitios de im谩genes que son de uso gratuito:

Pro-Tip: Con la herramienta de imagen de Google anterior, puede usar Google para buscar en TODOS esos sitios. y as铆 ahorras tiempo!


Edici贸n b谩sica de im谩genes - Opciones gratuitas

para no alargar este post solo mencionaremos a dos sitios de edici贸n de im谩genes GRATIS:

Canva es bastante f谩cil de usar y GRATIS.

Puedes pagar tambi茅n aproximadamente $ 13/mes para obtener m谩s funciones, seg煤n lo que necesite en ese momento. Pero si no en general, la versi贸n gratuita es bastante completa y funciona bastante bien.

Untitled.png

Dentro de Canva tiene la opci贸n de crear una variedad de diferentes im谩genes de redes sociales, y tienen todas plantillas precargadas para facilitar su uso. Desafortunadamente, no hay una plantilla para Hive Blog Cover Photo ... todav铆a. Afortunadamente, PUEDES crear tu propia plantilla usando DIMENSIONES PERSONALIZADAS. o en mi caso yo uso Blog Banner tiene unas dimensiones que funcionan para mis posts.

驴Porque es esto importante?

隆Porque SI!

TAMA脩O DE LA FOTO DE LA CUBIERTA

Despu茅s de un poco de investigaci贸n, finalmente Carrie encontr贸 las dimensiones EXACTAS que (actualmente) se ajustan al feed en hive.blog y peakd.com.

Son 256 x 144.

Ese tama帽o se muestra bastante peque帽o, pero a煤n se ve perfecto en el feed.
Otras opciones de tama帽o:

512 x 288
786 x 432
1024 x576

Para crear las fotos de portada, vas a Canva y selecciona USE CUSTOM DIMENSIONS.

Es bastante f谩cil despu茅s de eso. Puedo subir im谩genes para usar, agregar texto, fondo, im谩genes y otros elementos. Todas sus creaciones se almacenan en la nube GRATIS. Para usarlos, simplemente necesita descargarlos a su dispositivo.

Hay algunas cosas que son pagas. As铆 que solo evita esos y ya.


Y finalmente un poco sobre LunaPic.

Carrie tambi茅n tiene un tutorial sobre c贸mo escalar im谩genes. Lo puedes encontrar aqu铆: 馃攨Learning LunaPic馃攨 Lesson One: Scaling an Image for comments or posts. (En ingles)

驴Una de las ventajas?

Subir f谩cilmente im谩genes. Puedes tomar una direcci贸n de imagen y colocarla en la p谩gina principal. O subir directamente desde su dispositivo. Hay MILLONES de cosas/formas diferentes de editar fotos. 馃槑 Lo puedes usar para escalar tus Bitmojis y selfies a tama帽o de comentario (150 x 150).

lunapic page.jpg


隆Hemos Terminado!


Ese fue todo el tutorial muy bien explicado que hizo la maravillosa @carrieallen, pero en ingles jajaja y me autorizo a hacer esta traducci贸n y algunos cambios muy peque帽os.

隆Espero les haya gustado y mas importante aun ayudado! Si aun tienen alguna duda, d茅jenmela saber ya sea en los comentarios o por discord en el servidor de @minnowsupport PALNet.


Como siempre gracias por leerme y
Espero leer sus comentarios!


Picture Credit: All images are of my property unless said otherwise and the emojis are made with Bitmoji.com!


I鈥檓 currently an active curator for @minnowsupport #palnet, #creativecoin and #foodie, and even though I focus on post in Spanish (cause duh!) if you know of any good post that deserves to be curated or any good author that I need to be on the lookout for 馃攷馃搶 (doesn鈥檛 matter the language) let me know in the comments!

Actualmente soy curadora activa para @minnowsupport #palnet, #creativecoin y #foodie, e incluso aunque me centre en publicaciones en espa帽ol (隆porque obvio!) 隆Si conoces alguna publicaci贸n buena que merezca ser curada o cualquier buen autor del que deba estar pendiente 馃攷馃搶 en cualquier idioma, h谩zmelo saber en los comentarios!


Proud Member and Supporter of The Minnow Support Project, If You Are Not Yet on The Community What Are You Waiting For?? CLICK below!!!

IMG PAL Net LOGO.png



IMG Signature Victoria 2.png

馃槜 Follow me on my Other Social Media...鉂楋笍猬囷笍猬囷笍猬囷笍猬囷笍

IMG Social Media Victoria.png
You can find this post shared on Twitter Here please give the tweet a like and retweet!


H2
H3
H4
3 columns
2 columns
1 column
35 Comments