¡Saludos queridos estudiantes y nadadores de la hermosa plataforma de Steemit! Nos complace anunciar que todo sigue marchando como debe ser y nos encontramos en este momento planeando los próximos tutoriales y el día de hoy les traemos publicación correspondiente a la mentoría dictada el día Miércoles 10 de Octubre por @ilazramusic.
Publicación realizada por @ilazramusic y @juandvg que se usará para hacer Power Up con la cuenta, posteriormente se realizará una versión en inglés del mismo que se dividirá 50% SBD, 50% SP.
Como sabrán estaremos subiendo publicaciones que servirán como guía para aquellos estudiantes que no pudieran asistir a las mentorías en vivo, todas serán por tópicos, ya tenemos la primera lección del tópico ¿Cómo nadar en Steemit? el cual es una mentoría general con las mejores prácticas para hacer vida en la plataforma. Para más información den click acá ---> Proyecto SWIM | Lección #1 | ¿Cómo nadar en Steemit? |
Dicho todo esto, comencemos con la primera lección del tópico Markdown, lo cual serían los primeros puntos básicos del uso del Markdown y su comparación con las etiquetas HTML para estilizar el contenido en Steemit.
Estilizar con Markdown y HTML
HTML y las etiquetas
Antes de entrar en contexto, debemos tener algo muy claro desde el principio. Las publicaciones que encontramos dentro de la plataforma de Steemit están basadas en el Lenguaje de Marcado por excelencia del mundo del Desarrollo Web como lo es el lenguaje HTML (HyperText Markup Language) o Lenguaje de Marcado de HiperTexto, en este lenguaje se encuentran englobados unos elementos denominados etiquetas, los cuales son los elementos a mostrar dentro de nuestra publicación.
Estas etiquetas son los elementos que comienzan con "<>" y terminan con "</>", un ejemplo sería el elemento
<NombreEtiqueta></NombreEtiqueta>.
Las etiquetas tienen una apertura y un cierre, estas delimitan el área que van a modificar dentro del contenido escrito.
Cada elemento tiene un nombre y una funcionalidad, el día de hoy vamos a explicar con bastante detalle algunos elementos básicos. Para la apertura dichos elementos son rodeados por <> y para el cierre dichos elementos son rodeados por </>, ahora, conozcamos maneras de estilizar nuestros textos con estos elementos.
Alineación de texto
Al momento de escribir nuestras publicaciones, tenemos muchas opciones para estilizar nuestro texto, esto con el fin de darle una presencia diferente y organizar los párrafos que vayamos a utilizar al momento de redactar nuestra publicación, entre las alineaciones de texto tenemos:
Alineación Justificada
Bajo esta alineación, el texto se expande para rellenar los espacios en blanco que estén presentes dentro del contenedor (cuerpo del post) en donde se encuentra dicho párrafo. Para utilizar la justificación solo deben utilizar el siguiente código:
<div class="text-justify"> TEXTO A JUSTIFICAR </div>
Tomaremos esta párrafo de ejemplo:
Veamos un ejemplo, si tenemos este texto de prueba el cual estoy escribiendo para demostrar que si no justificamos vamos a notar una diferencia bastante grande, fíjense en los espacios que se dejan en el margen derecho mientras sigo escribiendo.
Si le aplicamos el código anterior a ese párrafo, nos da como resultado:
Veamos un ejemplo, si tenemos este texto de prueba el cual estoy escribiendo para demostrar que si no justificamos vamos a notar una diferencia bastante grande, fíjense en los espacios que se dejan en el margen derecho mientras sigo escribiendo.
Fíjense que el cambio se nota en los espacios que están a la derecha del párrafo, el texto justificado se pega hasta el máximo borde lateral derecho, mientras que el texto no justificado conserva pequeños espacios antes de aplicar el salto de línea.
Alineación Centrada
Ya conocemos la primera manera de cambiar la alineación de texto a la alineación justificada, veamos ahora como cambiar la alineación a alineación centrada.
Para alinear un párrafo hacia el centro, debemos utilizar la siguiente codificación:
<center> TEXTO A CENTRAR </center>
Si aplicamos ese código al primer párrafo anterior obtenemos lo siguiente:
Estilizado de texto
Ya conocimos lo que fue la alineación de texto, ahora vamos a conocer una manera de aplicar un estilizado a nuestros párrafos para cambiar la manera en que se muestra dentro de nuestras publicaciones, comencemos:
Texto «bold» o «negritas»
Para colocar el texto «en negritas» o con estilo «bold» hay varias maneras de hacerlo en la plataforma, ya sea con HTML (dos maneras) o con Markdown(una manera), acá te enseñaremos ambas y tú decidirás cual te gusta más:
Si quieres que tu texto esté en negrita, entonces los códigos que debes usar son estos:
Versión HTML
<strong> Si quieres que tu texto luzca como esto, entonces el código que debes usar es este: </strong> <b> Si quieres que tu texto luzca como esto, entonces el código que debes usar es este: </b>Versión Markdown
**Si quieres que tu texto luzca como esto, entonces el código que debes usar es este:**Texto «italic» o «cursivo»
Al igual que en el caso del texto «bold» o texto «en negritas», tenemos varias maneras de codificarlo, esta vez tenemos dos maneras en Markdown y una manera en HTML, veamos:
Si quieres que tu texto sea cursivo, entonces los códigos que debes usar son estos:
Versión HTML
<em> Si quieres que tu texto luzca como esto, entonces el código que debes usar es este: </em>Versión Markdown
*Si quieres que tu texto luzca como esto, entonces el código que debes usar es este:* _Si quieres que tu texto luzca como esto, entonces el código que debes usar es este:_
Alineación de imágenes
Además de alinear párrafos de texto, también podemos alinear contenido como imágenes en nuestra publicación para darle un toque de elegancia visual adicional a nuestras publicaciones, por supuesto las herramientas están presentes, ustedes solo deben dejar volar su creatividad y aplicar estas herramientas a su antojo.
Veamos cómo alinear imágenes en nuestra publicación:
Alineación a la izquierda
Supongamos que tenemos una imagen que nos gusta pero no queremos que se muestre aleatoriamente, sino que la queremos visualmente alineada hacia la izquierda de nuestra publicación, entonces:
Si quieres alinear tus imágenes a la izquierda, el código que debes usar es este:
<div class="pull-left">
[LINK (ENLACE) DE LA IMAGEN A COLOCAR A LA IZQUIERDA]
</div>
Si aplicamos ese código a la imagen anterior, obtenemos lo siguiente:
Alineación hacia la derecha
Supongamos que tenemos la imagen anterior pero no queremos que se muestre alienada hacia la izquierda o al centro, sino que la queremos visualmente alineada hacia la derecha de nuestra publicación, entonces:
Si quieres alinear tus imágenes a la derecha, el código que debes usar es este:
<div class="pull-right">
[LINK (ENLACE) DE LA IMAGEN A COLOCAR A LA IZQUIERDA]
</div>
Si aplicamos ese código a la imagen anterior, obtenemos lo siguiente:
¡Muy bien! Esto ha sido todo por esta vez, gracias por leer nuestra primera lección de markdown, para la próxima lección hablaremos sobre la creación de tablas, los interlineados, la alineación de contenido (un poco más avanzado), los hipervínculos (texto e imágenes) y demás, ¡no te lo puedes perder!
Esperamos que hayan disfrutado de esta lección y nos seguiremos leyendo por este medio.
¡Apoya a nuestros Swimmers!
Todo el apoyo que podamos recibir en este proyecto es un apoyo para todos los que llegan a nosotros buscando crecer como creadores de contenido, así que si deseas unirte a nuestra causa puedes hacerlo de varias maneras:
1- Donaciones
Puedes donar cualquier monto en STEEM o en SBD a la cuenta @swimproject, todos los fondos ahí reunidos irán para iniciativas que realizaremos para nuestros estudiantes, pagos para nuestros mentores y demás (Por los momentos contamos con un fondo de 38.575 STEEM, todos enviados por nuestro creador al proyecto como fondo y presupuesto que ya ha sido utilizado por primera vez para incentivar a nuestros primeros alumnos.
Para más detalles pueden consultar el siguiente post ---> Proyecto SWIM - Tercera Actualización por @ilazramusic.
Todos los hechos que ameriten una transparencia adicional serán explicados a través del blog de nuestro CEO ---> @ilazramusic.
2- Delegaciones
De querer aportar con un poco más de peso, también pueden delegarnos Steem Power, lo cual podremos utilizar para hacer crecer el proyecto y poder brindar un apoyo en votos a los creadores de contenido que forman parte de nuestro proyecto. Si deseas realizar una delegación, te invitamos a utilizar cualquiera de los botones a continuación los cuales conectan directamente con Steem Connect:
Recuerda dejar más de 50SP sin delegar para evitar problemas de RC.
3- Feedback
No hay nada que más haga crecer a un proyecto que el feedback y la recepción de los lectores, por lo que si eres un Steemian Experimentado y quieres ser testigo de nuestras mentorias para aconsejar a nuestros swimmers puedes encontrarnos en nuestro servidor de Discord por medio de este link ---> https://discord.gg/9scEcRg
Además, te invitamos a dejarnos un comentario que nos ayude a crecer como proyecto, cualquier opinión, queja, crítica, o mensaje de amor lo recibiremos con todo gusto.
¡Esto es SWIM!
excelente aporte, siempre será de utilidad estos post para los nuevos ingresos.. salu2
Excelente mentoria y muy buena la dinámica usada , Felicitaciones a todos los que hacen esto posible <3