Logro 4: Aplicando Formatos


#

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</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://goldvoice.club/steem/@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://goldvoice.club/steem/@katerinaramm">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://goldvoice.club/steem/@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)

    https://d.tube/#!/v/thetroublenotes/ap0ofmc6

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

    https://d.tube/#!/v/thetroublenotes/ap0ofmc6

    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í

    .

    ---

    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://goldvoice.club/steem/@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!

    ---


    Comments 88


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

    01.04.2021 14:35
    0

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

    02.04.2021 15:48
    0

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

    07.04.2021 05:58
    0

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

    13.04.2021 20:54
    0

    Nuestro Logro 4 esperamos les guste

    Saludos

    03.05.2021 02:35
    0

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

    05.05.2021 01:20
    0

    Muy importante esta publicación amigo.

    05.05.2021 19:36
    0

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

    05.05.2021 20:23
    0

    Buenas noches por acá dejo mi logro 4

    06.05.2021 23:30
    0

    felicidades amiga por tu logro, adelante @ferrerloz

    07.05.2021 02:55
    0

    Hola amigos mi entrada logro 4.

    Gracias por su apoyo, saludos.

    07.05.2021 00:49
    0

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

    07.05.2021 01:32
    0

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

    Pueden saber mas de mi Leyendo mi Logro 1

    07.05.2021 02:54
    0

    Por acá dejo mi entrada del LOGRO 4 https://goldvoice.club/steem/@arriechek/logro-4-por-arriechek-consigna-aplicando-formatos

    Espero su verificación y apoyo @wilmer1988

    Muchas Gracias de Antemano.

    10.05.2021 03:14
    0

    Por aca de entrada de logro 4, espero la verificación y agradezco el proceso
    https://goldvoice.club/steem/@goyoricardo/logro-4-por-goyoricardo-consigna-aplicando-formatos

    @wilmer1988 gracias por su guia...

    10.05.2021 20:46
    0

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

    17.05.2021 02:47
    0

    excelente post. muy buena la información

    17.05.2021 22:42
    0

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

    19.05.2021 03:23
    0

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

    Saludos!

    21.05.2021 17:29
    0

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

    LOGRO 4

    21.05.2021 23:54
    0

    Hola quiero compartir con ustedes mi Logro 4

    InShot_20210522_001636374.jpg

    Gracias @fendit por tus instrucciones.

    22.05.2021 04:23
    0

    Muchas gracias por la información.
    Procesado.
    Saludos

    Banner Buen trabajo.jpg

    22.05.2021 09:44
    0

    Hola, por aquí mi Logro 4.

    26.05.2021 21:31
    0

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

    29.05.2021 00:56
    0

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

    Logro 4 de @jadedib

    30.05.2021 02:48
    0

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

    31.05.2021 16:53
    0

    Aquí esta mi logro 4

    02.06.2021 04:21
    0
    03.06.2021 20:02
    0

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

    03.06.2021 20:30
    0
    05.06.2021 19:55
    0

    Buenas amigos aca les dejo mi logro 4 por @Pepo84

    IMG-20210414-WA0003.jpg

    07.06.2021 18:52
    0

    Hola amigos por aca les dejo MI LOGRO 4

    IMG-20210414-WA0003.jpg

    09.06.2021 05:35
    0

    ¡Buenas!

    Aquí comparto mi Logro 4.

    ¡Saludos!

    10.06.2021 00:32
    0

    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.

    10.06.2021 00:39
    0

    Bendiciones para todos. Por aqui les dejo Mi logro 4

    13.06.2021 23:42
    0
    15.06.2021 09:58
    0

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

    16.06.2021 03:10
    0
    16.06.2021 17:14
    0
    18.06.2021 15:11
    0
    19.06.2021 21:13
    0

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

    22.06.2021 15:11
    0

    Hola saluditos aqui mi Logro 4

    23.06.2021 21:05
    0

    hola aqui les dejo mi logro numero 4
    Logro4

    24.06.2021 21:36
    0

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

    https://goldvoice.club/steem/@yrasilva08/logro-4-yrasilva08-consigna-aplicando-formatos

    25.06.2021 00:51
    0

    Hola amigos aqui le dejo mi LOGRO4


    LOGRO  4 PAINT.png
    26.06.2021 00:21
    0

    Mi logro4 Aplicando Formato
    Logro4

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

    27.06.2021 20:47
    0
    29.06.2021 23:25
    0

    https://goldvoice.club/steem/@marisabril/logro-4-por-marisabril-aplicando-formato
    Saludos. Aquí mi publicación aplicando los formatos, para su verificación.

    30.06.2021 03:09
    0

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

    30.06.2021 23:39
    0

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

    07.07.2021 15:28
    0