Este post lo he creado con la intención de ayudar un poco a algunos usuarios que están intentando mejorar la visual de sus posts. Hay muchas formas de hacerlo, estos son solo algunos tips que pueden guiar a estos usuarios a mejorar ahora y encontrar luego su propio estilo.
English
I created this post with the intention of helping a little to some users who are trying to improve the visuals of their posts. There are many ways to do it, these are just some tips that can guide these users to improve now and find their own style later.
Paragraphs and dividers
Párrafos y divisores
Algo muy importante es el ritmo de la lectura. Además de los signos de puntuación, la longitud de los párrafos juega un papel muy importante en atraer a los lectores. Un párrafo grande en un post no está mal si es necesario, pero un post con solo párrafos gigantescos, o que luce como un párrafo gigante, sin separaciones, o con solo líneas en blanco separando, hace que el post sea poco estético, poco atractivo.
English
Something very important is the rhythm of reading. In addition to punctuation marks, paragraph length plays a huge role in engaging readers. A large paragraph in a post is not bad if necessary, but a post with only gigantic paragraphs, or that looks like a giant paragraph, without separations, or with only blank lines separating it, makes the post unaesthetic, unattractive.
Por eso es importante tener en mente un máximo de 10 líneas (en desktop), y utilizar divisores entre cada párrafo. Estos pueden ser:
- Subtítulos
- Línea
- Imagen o fotografía
- Divisor con diseño personalizado
- Tablas
Cualquier estructura que genere esa división visual ayuda a mejorar el ritmo del post. Puedes escoger el tipo de divisor según la diferencia que tengan las diferentes secciones. En este caso utilizo líneas e imágenes cuando es parte de la misma idea, y divisor personalizado cuando paso a una nueva.
English
That is why it is important to keep in mind a maximum of 10 lines (on desktop), and use dividers between each paragraph. These might be, subtitles, lines, images or photographs, dividers with custom designs, tables, etc.
Any structure that generates that visual division helps improve the rhythm of the post. You can choose the type of divider depending on the difference between the different sections. In this case I use lines and images when it is part of the same idea, and a custom divider when I move on to a new one.
Subtitles and translations
Subtítulos y traducciones
Los subtítulos no deben ser "Introducción", "Conclusión", etc. Los subtítulos deben identificar lo que contiene el párrafo, ellos proveen información inmediata al lector de lo que el texto contiene, y muchas veces se puede entender un post entero a partir de sus subtítulos. Los motores de búsqueda también leen estos subtítulos para clasificar las publicaciones y determinar su relevancia cuando se realiza una búsqueda.
Utiliza subtítulos de segundo y tercer nivel, ya que el primer nivel está reservado para el título del post.
English
Subtitles should not be "Introduction", "Conclusion", etc. Subtitles must identify what the paragraph contains, they provide immediate information to the reader about what the text contains, and many times an entire post can be understood from its subtitles. Search engines also read these subheadings to rank posts and determine their relevance when a search is performed.
Use second and third level subtitles, since the first level is reserved for the title of the post.
En cuanto a las traducciones, muchos afirman que estas hacen daño al SEO, otros que no hace diferencia. En este caso, aunque optimicemos lo más posible para el SEO, no podemos dejar de lado el componente humano. Nuestra comunidad no merece tener que traducir manualmente cada post que intentan leer, así que mientras los front-end incorporan traducción automática, podemos (si queremos) incluirla manualmente. De este modo podemos tener la lengua común (el inglés) y nuestra lengua nativa.
Para esto puedes añadir una segunda columna, duplicar el post en la parte inferior, y mi favorita personal, incluir un spoiler debajo del idioma principal del post en cada párrafo. Aquí no hay correcto o incorrecto, es cuestión de preferencia. Solo debe hacerse lo posible para que ambos sean buenas experiencias.
English
Regarding translations, many claim that they harm SEO, others that it makes no difference. In this case, even if we optimize as much as possible for SEO, we cannot leave aside the human component. Our community doesn't deserve to have to manually translate every post they try to read, so while the front-ends incorporate automatic translation, we can (if we want) include it manually. In this way we can have the common language (English) and our native language.
For this you can add a second column, duplicate the post at the bottom, and my personal favorite, include a spoiler below the main language of the post in each paragraph. There is no right or wrong here, it's a matter of preference. You just have to do everything possible so that both are good experiences.
Layout
Maquetado
Esta es una de las partes más complejas, no mucho si te enfocas en solo un front-end, pero debido a que los principales front-ends no son 100% compatibles unos con otros, los posts no se verán igual en todos ellos. Aquí es una buena opción buscar un punto medio, donde diseñes para tu front-end favorito (en mi caso InLeo) pero buscando cierta uniformidad que se traduzca bien a los demás. El maquetado básico se lee bien en todos, son las opciones visibles en el editor de texto. Son los extra los que generan algunos inconvenientes, solo es cuestión de encontrar la combinación que se adapte mejor. Abajo, el código que uso para estos bloques de texto.
English
This is one of the most complex parts, not much if you focus on just one front-end, but because the main front-ends are not 100% compatible with each other, posts will not look the same on all of them. Here it is a good option to look for a middle ground, where you design for your favorite front-end (in my case InLeo) but looking for a certain uniformity that translates well to others. The basic layout reads well in everyone, the options are visible in the text editor. It is the extras that generate some inconveniences, it is just a matter of finding the combination that best suits. Bellow you will find the code I use for these blocks.
<div align="justify">
<div class="text-justify">
Text
<details>
<summary> *English* </summary>
*Translation*
</details>
</div>
</div>
Espero que este post sea de ayuda, pueden copiar y pegar el código que les mostré y modificarlo a gusto. Ese código luce bien, no igual, pero bien, en Inleo, PeakD y Ecency. Estas son solo algunas nociones, cada quien puede desarrollar su estilo propio, eso de hecho es lo importante, tener un estilo, no escribir por escribir sin que la presentación sea tomada en cuenta.
English
I hope this post is helpful, you can copy and paste the code that I showed you and modify it as you like. That code looks good, not the same, but good, in Inleo, PeakD and Ecency. These are just some notions, everyone can develop their own style, that is actually the important thing, having a style, not writing for the sake of writing without the presentation being taken into account.
Espero les haya gustado, hasta la próxima publicación
Hope you liked it, until the next time
Designed by @jes.seth
 |  |  |  |
|---|
Designed by @pashinni