El Diseño de tu Publicación

in #spanish6 years ago

Debido a limitaciones que establece el mismo blockchain, las posibilidades de jugar con el diseño de tu publicación es muy limitado, ya que solo dispones de unas pocas herramientas, bajo el formato conocido como Markdown.

Esto es simplemente una serie de etiquetas que te permiten darle formato a tu contenido con elementos tales como:

Formato
Cómo hacerlo
negritas**negritas**
cursivas*cursivas*
resaltado`resaltado`
tachadas~~tachadas~~
ASuperíndiceA<sup>Superíndice</sup>
ASubíndiceA<sup>Subíndice</sup>

Los numerales o "hashtags" se usan para crea títulos y hay 6 niveles (uno por cada numeral, siendo el "1" el más grande.

Se coloca de la siguiente manera:

# Título 1
## Título 2
### Título 3
#### Título 4
##### Título 5
###### Título 6

Que dará el siguiente resultado:

Título 1

Título 2

Título 3

Título 4

Título 5
Título 6

Esto en cuanto a darle estilo a nuestro texto.

Los párrafos

Por defecto todos los textos van a estar alineados a la izquierda, pero puedes usar Markdown para centrarlo:

<center> Texto centrado </center>
que dará como resultado:

Texto centrado


También tienes la posibilidad de "justificar" tu texto. El resultado de esta acción es que los espacios entre las palabras se agrandan o se achican a fin de que el texto quede alineado tanto a la derecha como a la izquierda. A continuación la etiqueta para esta tarea.

<div class="text-justify"> El contenido que quieres justificado (puede ser tu texto completo) y al final debes cerrarlo con la etiqueta </div>

Una etiqueta que nos permite cambiarle la fisionomía a nuestro artículo es una que puede tener al menos dos usos distintos, pero muy efectivos. Con esta etiqueta podemos dividir el texto que queremos en dos bloques o columnas, si lo usamos de la siguiente manera.

<div class="pull-left">Bloque de texto 1. Bloque de texto uno. </div>
<div class="pull-right">Bloque de texto 2. Bloque de texto dos. </div>

Lo que dará el siguiente resultado:

Bloque de texto 1. Bloque de texto uno.
Bloque de texto 2. Bloque de texto dos.



Pero esta etiqueta también nos permite integrar imágenes en nuestro texto, tal como está en este fragmento (la explicación de cómo insertar fotos viene enseguida después de esta parte), veamos la manera.

El código usado para este fragmento de arriba es el siguiente:

<div class="pull-right">
 
![gif.gif](https://steemitimages.com/DQmX5UHFUoXyvRhUYwL2FrQyuYxeUrNBdkR44XntNgzXawe/gif.gif)

</div>

Seguida del texto normal, el cual se ajustará a un lado de la imagen.

Las imágenes

My Post.jpg
Al tener tan pocas herramientas para darle un aspecto bonito y llamativo a nuestras publicaciones, las imágenes se convierten en un aliado importantísimo. He dejado esta parte para el final de este post a fin de hacer énfasis en este recurso, ya que resulta muy útil si lo utilizamos de manera creativa.

Tenemos tres manera de integrar fotos a nuestro texto.

  1. Seleccionar. En la parte baja de nuestra ventana de edición de texto tenemos un enlace que dice Seleccionándolos (al final del texto "Inserta imágenes arrastrando y soltando,pegando desde el portapapeles,o por Seleccionándolos.)". Este es un botón que abrirá la ventana que te permite seleccionar la imagen desde tu ordenador o computadora.
  2. Por arrastre. Desde cualquier carpeta de tu PC puedes arrastrar la imagen directamente a la ventana de edición.
  3. Copiar y pegarEn tu navegador puedes copiar la imagen que quieras directamente, también desde tu programa de edición de imágenes preferido. Luego le das pegar (o paste, si está en inglés) en el sitio donde quieras colocar la foto.

Si hay imágenes que quieras usar con frecuencia (puede ser una firma, tu logo o lo que tú consideres, deberás guardar la dirección URL que Steemit le asigne para poder volver a usarla. El formato para insertar imágenes es el siguiente:
![Título de la foto](http://direccion-url-de-la-imagen.jpg)

Conclusión

Aunque las opciones que nos da Markdown son limitadas, está en nostros sacarle el máximo provecho. Hay algunas otras etiquetas que se pueden utilizar para crear las tablas, listas y áreas de códigos. Si quieres aprender más visita el siguiente enlace

Recuerda que las imágenes pueden convertirse en tu mejor aliado. Si no dispones de un buen programa de edición de imágenes, puedes recurrir a sitios como https://spark.adobe.com o https://pixlr.com/, que son excelentes editores de fotos online.


banner-steemit-rutablockchain.gif

¡ÚNETE!

Enlace al discord de @RutaBlockchain

https://discord.gg/jtnyZGB


Publicación creada por @ylich para @RutaBlockchain

Sort:  

Muchas gracias @rutablockchain, por tu post tan explicativo y puntual para ayudar en la mejora de nuestras publicaciones. ¡Saludos!

woooo! muchas gracias, con este post puedes ayudar a principiantes como yo a mi me sirvió de mucha ayuda, Éxitos y Bendiciones

Gracias por la info, una pregunta como se hace cuando se quiere colocar varias imágenes en secuencia, una al lado de la otra. Muchas gracias

@RutaBlockchain Muy bueno su artículo, usaré este conocimiento para mis próximas entradas.

Sugiero que hagan una entrada sobre el tema, pero editando los textos con HTML.

el de superíndice y subíndice no la sabia, que buen dato para usarlo en mis textos.

Me gusto mucho porque fue directo al grano a la hora de explicar y se hizo sencillo entenderlo, gracias!

muy buen post! Gracias por compartir, hoy aprendo algo nuevo de Steemit gracias a ti!

Excelentes tips para mejorar las publicaciones, gracias.

Gracias estaba buscando algo así! muy buena información, voy revisar el canal de discord también a ver que tal ;) saludos

excelente información, pero me pregunto si tienen algunos tutoriales para quienes como yo; tendemos a ser más visuales.

Muchas gracias, la verdad es que es parecido a Steemit, pero no me lo imaginaba.