# Logro 4: Aplicando formatos ## Los objetivos de esta consigna son: * Que los ingresantes tengan un conocimiento básico de cómo aplicar formatos en sus publicaciones. * Que los ingresantes puedan utilizar formatos avanzados con los modelos provistos. Una publicación debe tener un buen formato para que sea sencillo de leer. Steemit soporta los diferentes formatos y puedes alcanzar un resultado bastante atractivo, sólo utilizando una sintaxis de comandos básica y fácil de recordar. También, hay otras herramientas que puedes utilizar como editores, **como hackmd.io**. Aquí debajo se encuentra una compilación de formatos básicos y avanzados que puedes utilizar en tus publicaciones. La compilación fue realizada por @katerinaramm y el posteo original puedes encontrarlo aquí (**here goes the link to the original post!**). (**Here goes the 1st picture! It should say "Tips y trucos para realizar publicaciones en Steemit" and "Aprende los formatos básicos para escribir"**) ## Títulos Los títulos y los subtítulos son elementos importantes, ya que determinan la estructura de tu publicación y _guían_ al lector. Tiene dos formas de crear un título. (a) En el comienzo de la fila, inserta un signo de numeral #. A mayor cantidad de numerales # incluyas, el tamaño del título decrecerá. Por ejemplo: # Título 1 ## Título 2 ### Título 3 #### Título 4 ##### Título 5 ###### Título 6 Estos se crean con de la siguiente forma: ~# Título 1~ ~## Título 2~ ~### Título 3~ ~#### Título 4~ ~##### Título 5~ ~###### Título 6~ Tips para títulos (sólo para T1 y T2) En vez de agregar el #, puedes agregar tu título y, debajo, tres guiones ó tres signos iguales. Este es un título 2 ~---~ Este es un título 1 ~===~ _Tip_ Puedes centrar el título, darle formato itálica o tachado de la siguiente forma: Título centrado #<~center> Tu título aquí</center~>center> Título en itálica #~Headline` Tachado #~Headline& Headline # Texto Puedes hacer ciertas cosas con el texto también. Algo que puedes hacer a la hora de escribir un artículo en Steemit es justificar el texto. ## Texto justificado <~div class="text-justify"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget purus a tortor egestas placerat sit amet vitae sem. Nullam sit amet finibus justo. Donec volutpat ipsum leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse sit amet dignissim ante. </div> _El resultado será el siguiente:_ <div class="text-justify"> Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget purus a tortor egestas placerat sit amet vitae sem. Nullam sit amet finibus justo. Donec volutpat ipsum leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Suspendisse sit amet dignissim ante. </div> _(Sin el comando de justificado >)_ Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc eget purus a tortor egestas placerat sit amet vitae sem. Nullam sit amet finibus justo. Donec volutpat ipsum leo. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. ## Alinear el texto en dos columnas A veces necesitas escribir algo en dos idiomas o sensillamente deseas colocarlo en dos columnas diferentes. <~div class="pull-right"> TEXT RIGHT Cras pellentesque, diam ut fringilla luctus, massa mauris fringilla magna, sed consequat mi odio in ante. </div> TEXT LEFT Cras pellentesque, diam ut fringilla luctus, massa mauris fringilla magna, sed consequat mi odio in ante. <div class="pull-right">TEXT RIGHT Cras pellentesque, diam ut fringilla luctus, massa mauris fringilla magna, sed consequat mi odio in ante.</div> TEXT LEFT Cras pellentesque, diam ut fringilla luctus, massa mauris fringilla magna, sed consequat mi odio in ante. ## How to center text Para centrar el texto, debes agregar la etiqueta <~center> tu texto aquí </center> para alinear el texto. ## Cómo agregar subíndices Puedes usar el formato <~sub> tu texto o número aquí </sub> para hacer que tu texto o número figura por debajo de la línea base. H<~sub>2</sub>O has as output the H2O También puedes utilizar un subíndice para agregar una nota o comentario entre tu texto o debajo de una foto o video. ## Cómo agregar un superíndice Puedes utilizar el comando <sup~> para que un texto figure por encima de la línea base. Aquí va una referencia <~sup>1</sup> figura de la siguiente forma >> **Aquí va una referencia<sup>1</sup>** _Tip:_ Puedes agregar un hipervínculo Aquí va una referencia<~sup>[1](https://steemd.com)</sup> figura de la siguiente forma >> Aquí va una referencia ## Links Agregar hipervínculos en nuestras publicaciones es muy útil y solemos hacerlo bastante seguido. Cuando etiquetamos a un usuario de Steemit acompañado de un arroba @, el nombre se vuelve un hipervículo (que te conduce al blog de Steemit), por ejemplo @katerinaramm Cuando agregamos un link, es reconocido automáticamente, por ejemplo: https://steemit.com/@katerinaramm > > https://steemit.com/@katerinaramm Podemos esconder un link en una palabra o frase, utilizando la siguiente sintaxis: We can _hide_ a link in a word or phrase, using the below syntax [este será el hipervínculo que se mostrará](https://steemit.com/@katerinaramm) se transforma en >> este será el hipervínculo que se mostrará ## Tablas Puedes crear una tabla de dos formas diferentes: ### Una forma sencilla de crear una tabla Copia y pega el formato que se muestra aquí debajo y agrega tantos encabezados y celdas como necesites. Encabezado 1 | Encabezado 2 --------- | ---------- Celda 1 | Celda 2 Dará como resultado >> Encabezado 1 | Encabezado 2 --------- | ---------- Celda 1 | Celda 2 ## Crear una tabla utilizando html Una tabla HTML se puede crear utilizando la etiqueta <~table> Cada fila de la tabla se define con la etiqueta <~tr>. El encabezado se define con la etiqueta <~th>. Por default, los encabezados de la tabla figurarán en negrita y centrados. Cada una de las celdas de la tabla se definirá con la etiqueta <~td>. Fuente (**here goes the link from html tables**) <~table> <tr~> <th~> Encabezado 1 </th> <~th> Encabezado 2 </th> <tr~> <td~> Celda 1 </td> <~td> Celda 2 </td> </tr> <tr~> <td~> Celda 3 </td> <~td> Celda 4</td> </tr> </table~> El resultado de este código, será el siguiente: Encabezado 1 Encabezado 2 Celda 1 Celda 2 Celda 3 Celda 4 _Tips_ * Puedes agregar celdas incluyendo los comandos <~td> y <~/td> entre la sintaxis. Puedes, también, agregar filas extra incluyendo <tr~> y <~/tr> * Si deseas agregar un hipervínculo, deberás utilizar el comando <~a href="link">título</a> * Si utilizas imágenes dentro de la tabla, asegúrate que tengan las dimensiones similares y correctas, de modo que sea armónico. * Dentro de las celdas, puedes utilizar comandos como centrado, títulos, etc. ## Código A veces, es necesario agregar comandos en las publicaciones. Funcionan de estas dos formas: a. Agregar una tilde invertida (`) antes y después de la sintaxis del formato. **Negrita** >> Negrita ó b. Puedes utilizar la etiqueta <~code> antes y después del comando <~/code> al final de la palabra u oración. <~code> *hello* </code> el resultado será >> hello Puedes encontrar más información aquí.(**here goes the markdown cheatsheet link**) ## Citas - blockquotes A menudo, necesitamos escribir una cita, una frase que alguien más dijo o escribió. En esos casos, utilizamos el signo > al inicio de la oración. Cita lo que alguien ha dicho/escrito utilizando >. > “Any fool can know. The point is to understand.” ― Albert Einstein “Any fool can know. The point is to understand.” ― Albert Einstein ## Saltos de línea En el caso que necesites una línea extra entre las líneaws del texto, puedes utilizar el comando <~br> para incluirla ## Videos Muchas veces deseamos insertar videos o gifs en nuestras publicaciones. Los videos de YouTube se adjuntan instantáneamente, por lo que puedes ingresar un link y que aparezca. Si de cualquier manera esto interfiere con el texto o con otras imágenes que hayas incluído, puedes agregar comandos antes y después del link del video. Los gifs también pueden ser adjuntados, sólo pon el link e incluye otros comandos que desees, como <~center>, por ejemplo. https://media.tenor.com/images/917de53340b903bb7c142031b411593e/tenor.gif _Tip_: Debes encontrar la url que tiene la terminación .gif Los videos de DTube también pueden ser adjuntados, pero requiere un poco más de tiempo y trabajo que YouTube. _ Escenario a_: Cuando cargas un video a DTube, automáticamente será posteado a tu blog de Steemit.También muestra un link al video de youtube y a la vista preliminar del mismo. Por ejemplo: https://steemit.com/music/@thetroublenotes/ap0ofmc6 (**Here goes the dtube.jpg pic**) Estas dos cosas son las que necesitaremos, el link de Dtube y la captura del video. Si ya tienes esta información, puedes adjuntar el video utilizando el siguiente comando: <~center><~a href='https://d.tube/#!/v/thetroublenotes/ap0ofmc6'><~img src='https://ipfs.io/ipfs/QmNnrP6KnhTHqFAfwt8CnB6XeRHfMZ5Qj2ngyT7dgt2UwP'><~/a><~/center> (Resultado) (**Here goes the first vid!**) _Escenario B_ No tienes el link de Steemit donde el video de DTube está cargado, pero tienes el link de DTube. En este caso, le das click derecho al video y clickeas en "save snapshot/guardar imagen". Luego de seleccionar una carpeta, lo cargas como una foto normal en Steemit e insertas el siguiente código (similar al anterior): <~center><~a href='https://d.tube/#!/v/thetroublenotes/ap0ofmc6'><~img src='https://cdn.steemitimages.com/DQmYc7f5HaZhZC1tnofBByafrCrq7dC2x4CbjskYkJvWguC/QmdkNq6R6yvrxN6kvQDVnCHqqqHyoWHtbzysNGdVyitLob.jpg'><~/a><~/center> El resultado será el siguiente: (**Here goes the second vid!**) _PD:_ ¡La parte positiva de cargarlo de esta forma es que puedes seleccionar tu captura favorita del video! ## Separadores Si deseas separar un tema de otro dentro de tu publicación, puedes cargar un separador o utilizar en el inicio de la línea 3 guiones, asteriscos o signos de igualdad. --- or *** or === ## Imágenes ### Cómo alinear imágenes Puedes alinear imágenes a la izquierda, derecha o centrarlas. ### Alineación a la izquierda <~div class="pull-left"> https://cdn.steemitimages.com/DQmbFjWmi4mxw5AXo9BjVNvobWGc5fmAQyxvhR8S3s4QMtf/20180312_114323.jpg <~/div> Aquí deberías colocar tu texto Éste es el resultado de la sintaxis que mencionamos aquí arriba. Si alineas la imagen a la izquierda, el texto se colocará en la derecha. Esto también reducirá la dimensión de la imagen a la mitad. Puedes escribir más texto Y más Y más... ## Alineación a la derecha <~div class="pull-right"> https://cdn.steemitimages.com/DQmbFjWmi4mxw5AXo9BjVNvobWGc5fmAQyxvhR8S3s4QMtf/20180312_114323.jpg </div> Aquí deberías colocar tu texto Éste es el resultado de la sintaxis que mencionamos aquí arriba. Si alineas la imagen a la derecha, el texto se colocará en la derecha. Esto también reducirá la dimensión de la imagen a la mitad. Puedes escribir más texto Y más Y más... ## Alineación centrada <~center>https://cdn.steemitimages.com/DQmbFjWmi4mxw5AXo9BjVNvobWGc5fmAQyxvhR8S3s4QMtf/20180312_114323.jpg</center> Éste es el resultado del a alineación centrada, la dimensión de la imágen no cambia. ## Una forma simple y elegante es insertar un link y un epígrafe debajo de una imágen centrada (con la ayuda de @mobbs y @noble-noah) <~div class="pull-left"><center>https://cdn.steemitimages.com/DQmbFjWmi4mxw5AXo9BjVNvobWGc5fmAQyxvhR8S3s4QMtf/20180312_114323.jpg<sub><a href="https://www.steemit.com">Nombre del hipervínculo</a></sub></center></div> Resultado (**Here goes the picture**) Aquí va tu texto Y más... ## ¿Cómo puedo hacer que al clickear sobre mi imágen se abra una versión más amplia? PASO 1. Deberás subir ambas imágenes (en ambas dimensiones: grande y pequeña) ![244.jpg](https://cdn.steemitimages.com/DQmYHaS3cTTweaGZNvyeLksCjZ1oXHE3uc7ziBDeBLWBs2P/244.jpg) ![500500.jpg](https://cdn.steemitimages.com/DQmXMrYxPPVCRN4SMyHzd3KFrNjmzdURQnLoh6yoscrN8Fx/500500.jpg) PASO 2. Quitas el ![~text]( y el paréntesis final ) PASO 3. Agregas el coding de la siguiente forma: <~center><~a href="https://cdn.steemitimages.com/DQmXMrYxPPVCRN4SMyHzd3KFrNjmzdURQnLoh6yoscrN8Fx/500500.jpg"><~img src="https://cdn.steemitimages.com/DQmYHaS3cTTweaGZNvyeLksCjZ1oXHE3uc7ziBDeBLWBs2P/244.jpg"></a></center> Así se verá el resultado: (**Here goes the picture of the cat with the link!**) ## ¿Cómo bajar la dimensión de una imagen en Steemit? Siempre es mejor si modificas el tamaño de tu imagen antes de cargarla en Steemit. Sin embargo, a veces no tenemos tiempo o no nos es posible, por lo que los pasos para hacerlo desde Steemit son los siguientes: PASO 1. Cargas la imágen, el código se verá de la siguiente forma: ![~20180127_094041.jpg](~https://cdn.steemitimages.com/DQmeNf3mCmKEGR2mmF2jRxS55oExBc398GSgLEzsg6ex7eK/20180127_094041.jpg) PASO 2. Puedes dejar únicamente la imagen, sin el texto y los paréntesis. https://cdn.steemitimages.com/DQmeNf3mCmKEGR2mmF2jRxS55oExBc398GSgLEzsg6ex7eK/20180127_094041.jpg PASO 3: Copias este link https://steemitimages.com y le agregas el comando /0x0/ de modo que se transforme en: https://steemitimages.com/0x0/ PASO 4. You paste it on the start point of your photo so that it will look like this https://steemitimages.com/0x0/https://cdn.steemitimages.com/DQmeNf3mCmKEGR2mmF2jRxS55oExBc398GSgLEzsg6ex7eK/20180127_094041.jpg PASO 5. ¡Ya estás listo para achicar tu imagen! Detalle el número de píxeles que quieres en el primer o segundo lugar que ocupan los 0. Esto dará como resultado que la imagen se modifique según las dimensiones que hayas detallado. #### EXAMPLE Esta imagen tiene una dimensión de 3200x1470 https://cdn.steemitimages.com/DQmeNf3mCmKEGR2mmF2jRxS55oExBc398GSgLEzsg6ex7eK/20180127_094041.jpg Esta imagen tiene una altura de 600 https://steemitimages.com/600x0/https://cdn.steemitimages.com/DQmeNf3mCmKEGR2mmF2jRxS55oExBc398GSgLEzsg6ex7eK/20180127_094041.jpg Esta imagen tiene un ancho de 100 https://steemitimages.com/0x100/https://cdn.steemitimages.com/DQmeNf3mCmKEGR2mmF2jRxS55oExBc398GSgLEzsg6ex7eK/20180127_094041.jpg **Nota:** Es muy importante el copyright de las imágenes. Si no estás seguro de qué imagenes usar y cómo encontrar las mejores, haz click aquí (**Here goes the link of copyright**) ## Bonus Muchas veces nos pasa que vemos una publicación e instantáneamente nos preguntamos ¿¡Cómo fue que lo hizo!? Es posible ver el código en cada publicación de Steemit. Todo lo que debes hacer es reemplazar en la url el "it" por "d". Por ejemplo, en mi publicación: https://steemit.com/steemit/@katerinaramm/make-the-most-out-of-steemit-a-personal-approach-by-katerinaramm Sería: https://steemd.com/steemit/@katerinaramm/make-the-most-out-of-steemit-a-personal-approach-by-katerinaramm Si reemplazas el "it" por la "d", verás lo siguiente: (**Here goes the pic of steemd.com**) Puedes clickear en los tres puntos para aperturar la totalidad del texto y ver el código. --- Agregado de @mathowl (Gracias!) > Si en una publicaicón ves algún tipo de layout que no tienes idea cómo replicar, siempre puedes acceder al código de la fuente en tu explorador (das click derecho -> ver código de fuente de la página) y hacer copy/paste en lo que necesites :) Utilizalo sabiamente! ## Extra bonus - Compilación de modelos de código: Puedes revisar esta publicación de modelos de códigos que puedes utilizar para tus publicaciones de música, poesía, fotografía, recetas o historias de ficción. (**Here goes the pic of the extra bonus post**) --- ## Consigna para el logro 4: Aplicando formatos Crea contenido de tu preferencia utilizando al menos 5 tipos de formatos detallados en esta publicación. El título de tu publicación debería ser "Logro 4 por @tunombredeusuario - Consigna: Aplicando formatos" Por favor, etiquétame a mi/a tu mentor: "A la atención de @cryptokannon/@usuariodetumentor" al final de tu publicación y agrega etiquetas, tales como #achievement4 #cryptokannon / #usuariodetumentor, y así podremos encontrar fácilmente tu publicación entre otras. ¡Estaré esperando ansiosa tu publicación!