Guía: Dale un toque profesional a tus Publicaciones en Steemit

in #spanish7 years ago (edited)

Un toque profesional para tus Publicaciones en Steemit-Herramientas HTML


     Bienvenidos a mi primer aporte Steemianos. Tengo apenas un par de días aquí, y luego de mi primera publicación, quedo poco satisfecho con las herramientas que presenta el editor de textos para realizar publicaciones de Steemit . Para nuestra suerte permite la edición en modo Html (HyperText Markup Language), el cual es el lenguaje estándar para la realización de paginas web, es un lenguaje de etiqueta muy poderoso.

    No se si yo soy muy detallista, pero me incomoda mucho ver que algunas publicaciones no presentan un orden o una justificación adecuada, sin embargo se que muchos están aprendiendo al paso, por lo que la idea de esta publicación es ayudarlos a hacer que sus post tengan un aspecto mas profesional. No quiero que aprendan todo esto, no me centrare en explicarles el código, solo les diré lo que deben modificar, con que entiendan los parámetros que deben modificar basta, lo ideal es que copien y peguen estos código en sus post, modificando lo que necesiten para así lograr el objetivo general de esto, el cual es Mejores Post para Steemit.

     A continuación lo que presentare son una serie de códigos con sus respectivos ejemplos, esto con el fin de que los post presenten una mejor justificación de los párrafos, imágenes centradas, tablas de texto y de imágenes, citas y otras cosas. Espero poder explicarme lo mejor posible 





He tenido algunos comentarios informandome que las etiquetas no se visualizan, esto al parecer es un bug en Steemit, para los que presenten tal caso, les dejo en link para que visualicen desde la plataforma de busy

Ir a guía con interfáz de busy

.


Formateo del texto

Encabezados, saltos de párrafo y de linea

Párrafos

    Para definir un párrafo, html utiliza la etiqueta

<p>Aquí va el párrafo.</p>

Estas etiquetas sirven para definir el inicio y final de cada párrafo.

Saltos de Linea

     Los saltos de linea están definidos a partir de la etiqueta

<br>

Se pueden poner tantos como se desee, haciendo con ello un salto de linea por cada una.

Justificar todo el texto de la publicación

    Esto es relativamente fácil, y hace una gran diferencia visual en sus post, lo único que deben hacer es colocar la siguiente etiqueta, como se muestra en el siguiente ejemplo

<html> <div class= "text-justify"> Aqui va todo el texto de la publicación. Todo lo que se coloque aquí estará perfectamente justificado. </div> </html>
Encabezados

    Para colocar encabezados, html nos proveé las siguientes etiquetas, estas sirven para dividir el texto en secciones, definiendo cada numero el tamaño del texto de forma decreciente

Codigo HTML

Resultado

<h1>Hola Mundo</h1>

Hola Mundo

<h2>Hola Mundo</h2>

Hola Mundo

<h3>Hola Mundo</h3>

Hola Mundo

<h4>Hola Mundo</h4>

Hola Mundo

<h5>Hola Mundo</h5>
Hola Mundo
<h6>Hola Mundo</h6>
Hola Mundo

Centrar textos e imágenes

    El centrar texto e imágenes es simple y se hace con las etiquetas

<center> Aquí va el texto que se quiere centrar </center>

<center><img src="url de la imagen que quiero centrar"/> </center>

Aquí va el texto o el link(url) de la imagen que se quiere centrar

Si colocamos un url, obtenemos



Texto en negrita, cursiva y otros

Codigo HTML

Nombre de etiqueta

Resultado

<b>Hola Mundo </b> Negrita

Hola Mundo

<code>Hola Mundo </code> Texto en codigo Hola Mundo
<i>Hola Mundo </i> Cursiva Hola Mundo
X<sup>Hola Mundo </sup> Superíndice XHola Mundo
X<sub>Hola Mundo </sub> Subíndice XHola Mundo

    Todas las etiquetas que se presentaron anteriormente también se pueden combinar, si se respetan los ordenes se pueden lograr combinaciones de estas. Un ejemplo aquí

<center><i><b>X<sup>Hola Mundo </sup></b></i> </center>

XHola Mundo

Citas o quotes

    Un elemento realmente importante para nuestros post y que aportan calidad de profesional a ellos es reconocer a los autores de los textos o imágenes que utilizamos, esto lo podemos hacer

<blockquote>Texto a citar</blockquote>

Texto a citar

También podemos hacer

<blockquote>No todo lo que cuenta puede ser cuantificado, y no todo lo que puede ser cuantificado cuenta<sup>A. Einstein</sup></blockquote>


No todo lo que cuenta puede ser cuantificado, y no todo lo que puede ser cuantificado cuentaA. Einstein

La etiqueta anterior se usa para bloques de textos. Pero si queremos citar solo una linea ó una parte de ella, utilizamos

<q>Texto que quieres citar</q>

Texto que quieres citar
Citas con url

    Los ejemplos anteriores los podemos citar con url o direcciones web, esto se hace

<blockquote>No todo lo que cuenta puede ser cuantificado, y no todo lo que puede ser cuantificado cuenta<sup> <a href="https://es.wikipedia.org/wiki/Albert_Einstein">A. Einstein</a></sup></blockquote>


No todo lo que cuenta puede ser cuantificado, y no todo lo que puede ser cuantificado cuenta A. Einstein

ó podríamos colocar un numero en vez de A. Einstein y en la bibliografía colocar los enlances, con sus respectivas especificaciones, en fin, esto es del gusto de cada quien, lo importante es referenciar o dar los créditos a quien lo merece.


Cuadros de textos con títulos e imágenes múltiples con sus respectivas descripción


Tabla simple

    A continuación les presento un código que les permitirá realizar un cuadro simple en sus post, algo similar a lo que he presentado en esta publicación.

<table> <tr> <td> <center><b>Aquí va el titulo que ustedes quieran colocar</b></center> </td> </tr> <tr> <td> Aqui va el contenido del cuadro que ustedes quieran colocar </td> </tr> </table>

Y el resultado que se obtiene es

Aquí va el titulo que ustedes quieran colocar
Aqui va el contenido del cuadro que ustedes quieran colocar

Tabla avanzada.

     Para crear una tabla avanzada, tenemos el siguiente codigo

<table > <tr> <td> <center> <b>Titulo 1 </b> </center></td> <td> <center> <b>Titulo 2 </b> </center></td> <td> <center> <b>Titulo 3 </b></center></td> </tr> <tr> <td> <center> <b>Dato 1.1 </b> </center></td> <td> <center> <b>Dato 2.1 </b> </center></td> <td> <center> <b>Dato 3.1 </b></center></td> </tr> <tr> <td> <center> <b>Dato 1.2 </b> </center></td> <td> <center> <b>Dato 2.2 </b> </center></td> <td> <center> <b>Dato 3.2 </b></center></td> </tr> <tr> <td> <center> <b>Dato 1.3 </b> </center></td> <td> <center> <b>Dato 2.3 </b> </center></td> <td> <center> <b>Dato 3.3 </b></center></td> </tr> </table>

Y el resultado que se obtiene es


Titulo 1
Titulo 2
Titulo 3
Dato 1.1
Dato 2.1
Dato 3.1
Dato 1.2
Dato 2.2
Dato 3.2
Dato 1.3
Dato 2.3
Dato 3.3

    Estos codigos pueden ser editados a su antojo dependiendo del numero de columnas y filas que ustedes necesiten. Las filas se definen a partir de <tr></tr> y para agregar una nueva columna solo debemos agregar un <td></td> en donde lo necesitemos.

Control sobre imágenes

Imagen dividida en trozo 1.
<table> <tr> <td><center> <b>Imágenes de Da Vinci</b> </center></td> <td> <center> <b>Descripcion</b></center></td> </tr> <tr> <td><img src="url de la imagen"></td> <td> <center> <b>Aqui va la descripcion 1</b> </center></td> </tr> <tr> <td><img src="url de la imagen"> <td> <center> <b>Aqui va la descripcion 2 </b> </center></td> </tr> </table>

Y el resultado que se obtiene es

Imágenes de Da Vinci
Descripcion
Aqui va la descripcion 1
Aqui va la descripcion 2
Imagen dividida en trozo 2
<table border="0" cellspacing="0" cellpadding="0"> <tr> <td><b>Tipo de frutas 1</b></td> <td><b>Tipo de frutas 2</b></td> </tr> <tr> <td><img src="url de la imagen 1" WIDTH=128 HEIGHT=81 BORDER=0 ALT=""></td> <td><img src="url de la imagen 2" WIDTH=128 HEIGHT=81 BORDER=0 ALT=""></td> </tr> <tr> <td><img src="url de la imagen 1.1" WIDTH=128 HEIGHT=90 BORDER=0 ALT=""></td> <td><img src="url de la imagen 2.1" WIDTH=128 HEIGHT=90 BORDER=0 ALT=""></td> </tr> </table>

colocando los respectivos url, se puede obtener

Tipo de frutas 1 Tipo de frutas 2

Agregar ecuaciones a nuestro post: Formato Latex

    Para hacer esto en html existen múltiples formas, sin embargo aquí presento una sola, y es agregando ecuaciones en a través de imágenes, para nuestra suerte existe una pagina que hace muy bien este trabajo, esta es

Ir al editor de ecuaciones en latex




    Lo único que tienen que hacer en esa pagina es crear su ecuación y luego seleccionar la opción de HTML, copian el código que les genera y lo pegan aquí, como pueden ver las ecuaciones están en excelente calidad, de lujo diría yo.



    Bueno steemianos esto es todo, creo que me extendí un poco, queria agregar unas cosas mas pero me parece que ya asi esta bien, lastimosamente el código html no se adapta perfectamente a este editor, como se puede ver los cuadros no presentan los bordes que uno quisiera, a los textos no le sirven las etiquetas para darle colores y los enlaces internos no funcionan o por lo menos de las dos formas en que se hacerlo no me funcionaron, si así lo fuera el post lo hubiera extendido mucho mas. Espero con esto poder ayudar a muchos a que sus publicaciones tengan un aspecto mas profesional. La idea no es que se vuelvan expertos en esto, si no que aprendan, entiendan el código para que así puedan reutilizarlo y con esto lograr sus objetivos. Para aquellos que no les guste html aun pueden hacer uso de un excelente programa que te permite escribir en Markdown, este programa lo pueden descargar desde su pagina oficial, el link es

Ir al editor de textos en Markdown


    Aquí en link para los que quieran ver mi introducción y así puedan saber mas o menos por donde van a venir mis aportes

Introducción de @sneikder


    Tambien soy co-autor de una novela ligera titulada “La Danza de los Mundos:Epifanía” el prólogo ya esta publicado, para los que gusten leer sobre ciencia-ficción algo así como paradojas espacio-temporales, conflictos bélicos, filosofía y tramas psicológicos existencialistas, aquí les dejo el link para que me apoyen, se las recomiendo por mucho.

“La Danza de los Mundos: Epifanía”

Por

@smanuels

@sneikder

@mervin-gil



    Finalmente, sin mas que decir y muy agradecidos con aquellos que visiten y colaboren en mis post ya sea con criticas constructivas, UpVotes ó Re-Post. Estoy a la orden por si tienen alguna duda.

Sort:  

¡Su post ha sido votado en nombre del Equipo de Curación dropahead!

Gracias por seguir las reglas

ADVERTENCIA: El Equipo de Curación dropahead no necesariamente comparte las opiniones expresadas en este artículo. Sin embargo, creemos que el esfuerzo y/o contribución del autor merece una mejor recompensa y visibilidad.

Ayudenos a darle mayores recompensas:

¡Vote este comentario!
¡Vote el último Reporte Diario de @dropahead!
Únase al Trail de Curación dropahead
¡Para maximizar sus recompensas de curación!
Vote por dropahead Witness con SteemConnect
Active el Voto Proxy de dropahead witness
con SteemConnect
Delegue o done STEEM POWER a @dropahead
Haciendo lo anterior tendremos más Steem Power (SP) ¡Para poder brindarle mayores recompensas la próxima vez!

Noticias de dropahead: ¡Adiós 25+ y 50+! ¡Bienvenidos 20+ 40+ y 60+!

Hola @sneikder recibe nuestro humilde voto.

Pues @alisabelsilva consideró que tienes el don de ofrecernos una gema y te otorgo nuestro...

¡Te damos la bienvenida a la familia!

Contamos contigo para hacer crecer esta red que es una gran aventura.


Llámalo cuando quieras, avisa a @nnnarvaez si alguien lo utilizó donde exista plagio. Si tienes preguntas búscanos en discord Reveur-Venezuela

Buenas, @Alisabelsilva y @nnnarvaez los estoy siguiendo junto a Reveur.

Your post has been resteemed to my 3000 followers

Resteem a post for free here

Power Resteem Service - The powerhouse for free resteems, paid resteems, random resteems

Upvote this comment if you like this service

buen aporte lo tendre en cuenta para mi próxima publicación gracias

Excelente, esa es la idea. Mejorar las publicaciones

Bro creo que saltaste unos detalles, revisa tu post, soy amigo de tu hermano, saludos.

Gracias! Por favor dime en donde, tal vez pueda explicar con mas detalle. Recuerda que la guía esta para que puedas copiar y pegar el codigo en tu post

tremendamente útil pero no logro ver ver ninguna de las etiquetas que mencionas

Gracias! Las etiquetas las presento en los cuadros, algunas en los mismos códigos, si no las ves intenta cambiar de navegador ó puede ser un bug de steemit. La idea de este post es que las etiquetas las puedas copiar y pegar en tu publicación modificando solo lo que indico, por lo que mi objetivo principal es mostrarlas. Ya solucione al parecer es un bug en Steemit, por lo que si quieres visualizar todo entra en la version de busy, aqui el link Ir a guía con interfáz de busy.

Muy bueno tu post, realmente informativo, me encanta habían cosas que hasta los momentos no conocía. Gracias por compartirlo, saludos :).

Esta muy bueno para los que están ingresando a la plataforma, y para los que como yo no sabíamos de algunas herramientas que explicas aquí. Gracias por combatir y ayudar.

POST votado por el equipo de

@votovzla

Nuestra iniciativa es apoyar al talento venezolano, que aporte a esta comunidad.

Síguenos y participas en nuestros concursos

Post seleccionado de la curación en vivo

Valioso aporte

Gracias! Esta es idea, hacer aportes valiosos a la comunidad.