Logro 4: Aplicando FormatossteemCreated with Sketch.

in Newcomers' Communitylast year (edited)

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í.

Fuente


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:

  • centrado # <center> Título here</center>center>
  • itálica #Título`
  • Tachado #Título& 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:

    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.

    (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">
    TEXTO A LA DERECHA Cras pellentesque, diam ut fringilla luctus, massa mauris fringilla magna, sed consequat mi odio in ante.
    </div>
    TEXTO A LA IZQUIERDA Cras pellentesque, diam ut fringilla luctus, massa mauris fringilla magna, sed consequat mi odio in ante.


    TEXTO A LA DERECHA Cras pellentesque, diam ut fringilla luctus, massa mauris fringilla magna, sed consequat mi odio in ante.
    TEXTO A LA IZQUIERDA Cras pellentesque, diam ut fringilla luctus, massa mauris fringilla magna, sed consequat mi odio in ante.


    Para centrar tu texto, debes incluir la etiqueta <center> texto aquí </center> para alinearlo.

    Cómo agregar subíndices

    Puedes utilizar el código <sub> texto o número aquí </sub> para que aparezca por debajo de la base de las líneas.
    H<sub>2</sub>O da como resultado 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 código <sup> para que aparezca por sobre las demás líneas

    Aquí va tu referencia here<sup>1</sup> y da como resultado>> Aquí va tu referencia1

    Tip: Puedes agregar un link también

    Aquí va tu referencia<sup>[1](https://steemd.com)</sup> y da como resultado >> Aquí va tu referencia1


    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:

  • Podemos ocultar un link o frase, usando la siguiente sintaxis
    [aquí irá tu link](https://steemit.com/@katerinaramm) y se transforma en >>
    Este será su link

  • 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á este resultado: >>

    Encabezado 1Encabezado 2
    Celda 1Celda 2

    Crea una tabla utilizando HTML

    Una tabla HTML se define con la etiqueta <table>

    Cada fila se define con la etiqueta<tr>. Un encabdezado de la tabla se define con la etiqueta <th>.Por default, los encabezados se muestran en negrita y centrados. Una celda se define con la etiqueta<td>. Fuente


    <table>
    <tr>
    <th> Encabezado 1 </th> <th> Encabezado 2 </th>
    <tr>
    <td> Celda1 </td> <td> Celda 2 </td>
    </tr>
    <tr>
    <td> Celda 3 </td> <td> Celda 4</td>
    </tr>
    </table>

    El resultado será:

    Encabezado 1 Encabezado 2
    Celda 1 Celda 2
    Celda 3 Celda 4

    Tips

  • Puedes agregar más celdas incluyendo la etiqueta <td> and </td> y la sintaxis en el medio
  • Puedes agregar más filas: <tr>&</tr>
  • Si quieres, puedes incluir un link: <a href="link">title</a>
  • Si utilizas imágenes dentro de la tabla, asegúrate que tengan dimensiones similares para que quede alineado
  • Puedes utilizar otros comandos dentro de la tabla, como centrado, negrita, 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 frase/oración

    <code> *Hola!* </code> dará como resultado >> Hola!

    Puedes encontrar más información aquí.


    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íneas del texto, puedes utilizar el comando
    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.

    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

    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)

    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:

    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ás 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-left">
    https://cdn.steemitimages.com/DQmbFjWmi4mxw5AXo9BjVNvobWGc5fmAQyxvhR8S3s4QMtf/20180312_114323.jpg
    </div>
    Aquí deberás 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 izquierda.
    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

    <div class="pull-right">
    https://cdn.steemitimages.com/DQmbFjWmi4mxw5AXo9BjVNvobWGc5fmAQyxvhR8S3s4QMtf/20180312_114323.jpg
    </div>

    É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">LINK NAME</a></sub></center></div>

    Resultado


    aquí va tu texto


    y un poco 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. Remover esta parte del código ![text](y los paréntesis )


    PASO 3. Agregas el código 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>


    Este será el resultado:


    ¿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 el link de https://steemitimages.com y le agregas la etiqueta /0x0/, de modo que quede esto: https://steemitimages.com/0x0/

    PASO 4.Lo pegas al comienzo de tu foto, de forma que quede así:

    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.

    EJEMPLO
    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í.

    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:

    Puedes clickear en los tres puntos para aperturar la totalidad del texto y ver el código.


    Agregado de @mathowl (Gracias!)

    Si en una publicació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.


    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:
    “Agrega etiquetas, tales como #achievement4 y un hashtag del país en el que te encuentras residiendo actualmente **

    ¡Estaré esperando ansiosa tu publicación!


    Sort:  
     3 months ago 
     6 months ago 

    buen día aquí les dejo mi entrada de mi Logro 4

     6 months ago 

    Buenos días saludos por aquí les envío mi logro 4 espero que sea de su agrado https://steemit.com/hive-172186/@adriancabrera/logro-4-por-adriancabrera-consigna-aplicando-formatos

     5 months ago 

    Saludos aquí mi presentación del #logro4 muchas gracias, espero cumplir con lo exigido.
    "Logro 4 por @joseyari Consigna: Aplicando formatos”

     5 months ago 

    Buenas tardes, comparto por acá mi Logro # 4 para ser verificado. Muchas gracias de antemano.

     5 months ago 

    Nuestro Logro 4 esperamos les guste

    Saludos

     5 months ago 

    hola a toda la comunidad por aca les dejo mi LOGRO1 gracias por tan buena iniciativa para con las nuevos ingresos. completado

     5 months ago 

    Muy importante esta publicación amigo.

     5 months ago (edited)

    Hola a todos, aquí les dejo mi "Logro 4" en el cual espero que les guste:
    Mi logro 4 aqui

     5 months ago 

    Buenas noches por acá dejo mi logro 4

     4 months ago 

    felicidades amiga por tu logro, adelante @ferrerloz

     4 months ago 

    Hola amigos mi entrada logro 4.

    Gracias por su apoyo, saludos.

     4 months ago 

    Que Bueno felicidades, también estoy en mi elaboración del logro 4 @victornavarro

     4 months ago 

    Buenas noches muchas Bendiciones, encantado de mostrar mi logro 4, Disfrutenlo

    Pueden saber mas de mi Leyendo mi Logro 1

     4 months ago 

    Por acá dejo mi entrada del LOGRO 4 https://steemit.com/hive-172186/@arriechek/logro-4-por-arriechek-consigna-aplicando-formatos

    Espero su verificación y apoyo @wilmer1988

    Muchas Gracias de Antemano.

     4 months ago 

    Por aca de entrada de logro 4, espero la verificación y agradezco el proceso
    https://steemit.com/hive-172186/@goyoricardo/logro-4-por-goyoricardo-consigna-aplicando-formatos

    @wilmer1988 gracias por su guia...

     4 months ago 

    hola a todos espero estén bien por acá dejo mi logro 4 para ser verificados gracias
    https://steemit.com/hive-172186/@julianrod/logro-4-por-julianrod-aplicando-formatos
    @tocho2 @fendit

     4 months ago 

    excelente post. muy buena la información

     4 months ago 

    Saludos a Todos, acá Le dejo Mi entrada: El Agradecimiento; para Su verificación. Disfrútela.

     4 months ago 
     4 months ago 

    Hola buenas tardes! acá mi participación en el Logro 4

    Saludos!

     4 months ago 

    Hola yo soy Lia @ladyleilei, aquí les dejo mi logro 4 espero les guste.

    LOGRO 4

     4 months ago 

    Hola quiero compartir con ustedes mi Logro 4

    InShot_20210522_001636374.jpg

    Gracias @fendit por tus instrucciones.

    Muchas gracias por la información.
    Procesado.
    Saludos

    Banner Buen trabajo.jpg

     4 months ago 

    Hola, por aquí mi Logro 4.

     4 months ago 

    Muchas gracias por publicar este artículo, voy de inmediato a empezar a escribir mi logro 4. Espero sea de tu gusto 😃

     4 months ago 

    Hola, aquí dejo mi logro 4, espero te guste 😊

    Logro 4 de @jadedib

     4 months ago (edited)

    Muy buen post gracias a el pude cumplir mi logro 4 acá se los dejo, muchas gracias d eantemano por su apoyo Logro4

     4 months ago 

    Aquí esta mi logro 4

     4 months ago 
     4 months ago 
     4 months ago 

    Saludos, aqui les dejo mi logro #4 Feliz día.

     4 months ago 
     3 months ago (edited)

    Buenas amigos aca les dejo mi logro 4 por @Pepo84

    IMG-20210414-WA0003.jpg

     3 months ago 

    Hola amigos por aca les dejo MI LOGRO 4

    IMG-20210414-WA0003.jpg

     3 months ago 

    ¡Buenas!

    Aquí comparto mi Logro 4.

    ¡Saludos!

     3 months ago 

    Me acabo de dar cuenta que no agregué las etiquetas #achievement4 ni #venezuela en la publicación, y traté de editarla, pero no me quedan recursos suficientes. Es solo para que sepan.

     3 months ago 

    Bendiciones para todos. Por aqui les dejo Mi logro 4

     3 months ago 

    Muy interesante. Estoy empezando en esta plataforma y toda esta información me viene como anillo al dedo. Gracias!

     3 months ago 
     3 months ago 
     3 months ago (edited)
     3 months ago 

    Hola a todos aquí dejo Mi logro #4 espero ser pronto verificado gracias :D

     3 months ago 

    Hola saluditos aqui mi Logro 4

     3 months ago 

    hola aqui les dejo mi logro numero 4
    Logro4

     3 months ago 

    Hola amiga @graceleon le presento mi post del logro 4. Gracias por la orientacion.

    https://steemit.com/hive-172186/@yrasilva08/logro-4-yrasilva08-consigna-aplicando-formatos

     3 months ago 

    Hola amigos aqui le dejo mi LOGRO4


    LOGRO  4 PAINT.png

     3 months ago (edited)

    Mi logro4 Aplicando Formato
    Logro4

    Pueden ver también:
    Logro1
    Logro2
    Logro3
    ÉXITOS A TODOS. GRACIAS.

     3 months ago 
     3 months ago 

    https://steemit.com/hive-172186/@marisabril/logro-4-por-marisabril-aplicando-formato
    Saludos. Aquí mi publicación aplicando los formatos, para su verificación.

     3 months ago 

    Buen día, por aquí dejo mi Logro 4, espero cumplir con todas las reglas.

     2 months ago 

    Buenos días acá comparto mi logro Numero 4 espero les guste y sea de su agrado https://steemit.com/hive-172186/@estefanicorrea22/mi-logro-na4-por-estefanicorrea22-consigna-aplicando-formatos

     2 months ago 

    Buenas aqui les dejo mi logro 4 muchas gracias

     last month 
     last month 
     29 days ago 

    Hola aquí mi logro #4 Aplicando Formatos

     28 days ago 

    muy buenas noches,aqui tiene mi presentacion del logro 4,gracias por su tiempo

     23 days ago 

    Saludos amigos aquí mi logro #4 ya realizado

     23 days ago 
     21 days ago 
     15 days ago 
     12 days ago 

    Saludos aquí envío mi logro 4 para su verificación.
    Muchas Gracias

    https://steemit.com/hive-172186/@draisysm/logro-4-por-draisysm-consigna-aplicando-formatos