Guia para nuevos usuarios #4. Tutorial de diseño en steemit. Original @carlagonz.
Hi dear steemers.
Es por ello que en este post (que recomiendo guardar y usar a la hora de publicar algún post), les traigo todos los tips que conozco para diseñar sus publicaciones, por ende hacerlas mas vistosas y atraer muchos mas votos de los que esperas.
¿Que es Markdown?
Es un lenguaje de programación utilizado para realizar post y comentarios, te ayuda a organizar y que tus publicaciones sean mas llamativas y mejor estructuradas.
JUSTIFICACIÓN DE TEXTO
Para mantener tus escritos organizados y justificados, mayormente utilizado en escritos largos, solo utilizas el codigo a continuación, antes del texto que quiere y justificar y luego al final agregas el código div, recuerda que si utilizas separadores de texto, debes iniciarlo y finalizarlo luego de cada separador.
<div class="text-justify"> TEXTO </div>
CENTRAR
Centrar es una herramienta muy útil cuando deseas organizar tu post con todo perfectamente alineado al centro, esas practicas de contar los espacios ya son cosas del pasado, funciona con imágenes y textos, es ideal para poemas y prosas.
<center> TEXTO O IMAGEN </center>NEGRITA Y CURSIVA
Si deseas utilizar cursiva en algún texto solo debes colocar un asterisco (*) antes del texto y después del texto.
*texto* Si deseas utilizar negritas en algún texto solo debes utilizar dos asteriscos (**) antes y después del texto.
**texto** Si deseas utilizar negrita y cursiva en algún texto solo debes utilizar tres asteriscos (***) antes y después del texto.
***texto*** SEPARADOR
Si deseas utilizar un separador bastante util cuando cambias de tema rapidamente en tus publicaciones solo debes utilizar 4 guiones bajos (____) en el lugar donde deses separar los textos, recordando utilizar enter antes y despues de la linea de los guiones.
____
IMAGEN A LA DERECHA
Si deseas organizar tu post dándole un estilo de magazine y así hacerlo mas atractivo para cualquier lector que desee darse un paseo por tu publicación, es importante que utilices estas alineaciones a la hora de redactar. Siempre recodando que el código con la imagen debes colocarlo antes del texto que deseas este justo a su lado.
<div class="pull-right"> IMAGEN </div>IMAGEN A LA IZQUIERDA
Con este codigo HTML, podrás tener el mismo resultado que con el anterior, lo único que cambia es la orientación de la imagen. Siempre recodando que el código con la imagen debes colocarlo antes del texto que deseas este justo a su lado.
Puedes ver este post lo genial que queda con la imagenes organizadas.
<div class="pull-left"> IMAGEN </div>ENLACES
Realizar enlaces es una herramienta fundamental siempre que realices un post, siempre que debes colocar la fuentes de algún material como imágenes o citas es mejor dejar anclar un enlace a una palabra especifica que escribir toda la dirección.
EJEMPLO:
Perfil carla
[texto](URL)Ejemplo: [Perfil carla](https://steemit.com/@carlagonz)TAMAÑO DE LETRA:
Esta parte es fundamental a la hora de realizar tus post, ya que puedes cambiar el tamaño de las letras dependiendo de tus necesidades.
Siempre recuerda que luego de colocar los numeral deja un espacio y luego escribe el texto.
Grande: utilizas un numeral (#) como primer carácter de la linea que desees quede de este tamaño.
# texto
Mediano: utilizas dos numeral (##) como primeros caracteres de la linea que desees quede de este tamaño.
## texto
Pequeño: utilizas tres numeral (###) como primeros caracteres de la linea que desees quede de este tamaño.
# texto
Normal: Es la letra común que se utiliza en esta plataforma.
Letra en código de bloques.
<code> texto </code>Muy pequeñito(superposición):este tipo de letra solo sirve para markdown
<sup> texto </sup>TABLAS DE CONTENIDO
Esta herramienta es importante para organizar información comparativa o demostrativa, bastante util para resultados deportivos, propiedades fotograficas etc.
| Titulo | Descripción |
|---|---|
| steemit | inicio |
| cervantes | perfil |
| carla | perfil |
Titulo | Descripción--------- | --------------steemit | [inicio](https://steemit.com)cervantes | [perfil](https://steemit.com/@cervantes)carla | [perfil](https://steemit.com/@carlagonz)
| Titulo | Descripcion | Tiempo | Post |
|---|---|---|---|
| titulo 1 | contenido 1 | tiempo 1 | 1 post |
| titulo 2 | contenido 2 | Tiempo 2 | 2 post |
| titulo 3 | contenido 3 | Tiempo 3 | 3 post |
Titulo | Descripcion | Tiempo | Post---- | ----| ---- | ----***titulo 1*** | contenido 1 | tiempo 1 | 1 post**titulo 2** | contenido 2 | Tiempo 2 | 2 post*titulo 3* | contenido 3 | Tiempo 3 | 3 postEs bueno saber lo fácil que es crear las listas solo utilizando esta barra (|) y guiones (-). Puedes guiarte con las listas que te he dejado anteriormente, siempre recuerda dejar el espacio correspondiente entre las barras.
También recuerda que puedes combinar los códigos que he dejado anteriormente.
VIDEOS.
Para insertar los vídeos solo debes insertar el url de la dirección de youtube en la parte donde deseas que se pueda ver en tu publicación.
https://www.youtube.com/watch?v=nMahvtBFyQU
LISTAS
Las listas son bastante importante para separar temas extensos en distintos puntos, asi hacerlos mas agradables a la vista y lectura.
Solo utilizas el asterisco y espacio como primer carácter en la linea que deseas realizar como lista.
- Lista 1.
- Lista 2.
- Lista 3.
* Lista 1.
* Lista 2.
* Lista 3.
También puedes hacerla un poco mas organizada con números, solo debes colocar el numero que desees un punto y luego el espacio.
- Lista 1.
- Lista 2.
- Lista 3.
1. Lista 1.
2. Lista 2.
3. Lista 3.
CITAS
Las citas son importantes a la hora de agregar a tu post algo textual de otra pagina o libro. Solo lo realizas colocando un (>) como primer carácter de la linea que deseas citar.
texto citado
>texto citado
Q buen post, las ayudas para realizar las cosas de la mejor manera, siempre son bien recibidas, muchas gracias por compartir,
Saludos
Ahhhhh por cierto me encantó el video de la iguanita ; )
Que bueno que mi trabajo te ayude a mejorar tus publicaciones, gracias por tus bonitas palabras (:
Ok estoy pendiente por consultarte ; )
Estas guías siempre son super útiles, aun y no siendo tan nuevo siempre hay algo que consultar: Muchas gracias.
Que bueno que a pesar del tiempo que tienes en esta plataforma, este post que he realizado con bastante dedicación te sirva para mejorar la calidad de tus post, yo guardaba varias guías, pero ahora guardo la mía propia jeje (:
Saludos, @carlagonz. Muy útil tu post. Yo hasta la fecha no he podido alinear imágenes a izquierda o derecha sin hacer un desastre. Termino pidiendo ayuda. Justo ahorita acabo de tratar haciendo lo que indicas y texto que no quería alineado se va con la imagen, se desconfigura la fuente de la imagen, etc. Hay algún detalle que no se menciona acá que hay que tomar en cuenta?
a la hora de alinuear las imagenes toma en cuenta
TEXTO
<codigo pull right o left
DIRECCION DE IMAGEN
EL ENLACE
</ div>
TEXTO QUE QUIERES QUEDE AL LADO DE LA IMAGEN
Trata de hacerlo dejando un espacio es decir haciendo enter de la forma que te explique burdamente arriba jeje saludos!
Ok. Gracias :)
Me hiciste recordar un amigo caraqueño: "burda de gracias"
jejejeje no hay problema amigo, espero esto te sirva y puedas organizar tus post sin tanto problema, te entiendo al principio tenia miedo hasta de centrar las publicaciones jeje
Congratulations! This post has been upvoted from the communal account, @minnowsupport, by carlagonz from the Minnow Support Project. It's a witness project run by aggroed, ausbitbank, teamsteem, someguy123, neoxian, followbtcnews, and netuoso. The goal is to help Steemit grow by supporting Minnows. Please find us at the Peace, Abundance, and Liberty Network (PALnet) Discord Channel. It's a completely public and open space to all members of the Steemit community who voluntarily choose to be there.
If you would like to delegate to the Minnow Support Project you can do so by clicking on the following links: 50SP, 100SP, 250SP, 500SP, 1000SP, 5000SP.
Be sure to leave at least 50SP undelegated on your account.