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
|
|
|
|
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>
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
| |
| 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
| | | |
| | | |
| | | |
| | | |
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
| | |||||||
|
<ce<> Aqui va la descripcion 1 | ||||||
|
| |
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
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
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.
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.
¡Para maximizar sus recompensas de curación!
con SteemConnect
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...
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
Excelente post, esto me ha ayudado mucho, sin dudas le da un toque profesional a tus publicaciones, muchas gracias por el gran aporte!
@reveur ven
El post más buscado de mi parte. Excelente herramienta! Felicidades.
Gracias!
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
Post seleccionado de la curación en vivo
Valioso aporte
Gracias! Esta es idea, hacer aportes valiosos a la comunidad.
Muchas graaacias por este post, es de mucha ayudaa!
Gracias, me alegra ayudar.
Excelente aporte muchas gracias.
Gracias, espero poder seguir trayéndole a la comunidad mas aportes como este.
Gracias por educar a la comunidad
Gracias! Pienso que educar e informar debería ser el objetivo de todos los Steemians.
Congratulations! This post has been upvoted from the communal account, @minnowsupport, by sneikder from the Minnow Support Project. It's a witness project run by aggroed, ausbitbank, teamsteem, theprophet0, someguy123, neoxian, followbtcnews/crimsonclad, and netuoso. The goal is to help Steemit grow by supporting Minnows and creating a social network. Please find us in 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.
me gusta!!
Excelente! Esa es la idea. Gracias
Que buen post! gracias por compartirnos esa información. Ahora te sigo y estaré pendiente de tus publicaciones, te invito a que te pases por mi perfil y por nuestro grupo de facebook "STEEMIT COLOMBIA" donde podrás compartir tus post para ganar más votos y seguidores..saludos desde Colombia! @originalworks
Excelente, gracias.