Redactor de entradas de Blogger

Captura del redactor de entradas de Blogger

Como sabrán, el editor de entradas de Blogger tiene dos opciones: Redactar y HTML. La primera te muestra un editor de texto enriquecido o RTE (Rich Text Editor) y la segunda te muestra un editor de texto plano donde puedes escribir tu HTML directamente.

Yo hace años dejé de usar la pestaña redactar y recomiendo a todo el mundo dejar de usarla porque está dañada, siempre lo ha estado y al parecer siempre lo estará. ¡NO SIRVE!

El HTML resultante

Cuando usas el RTE de Blogger (o cualquier RTE para web) todo lo que escribes tiene que ser transfomrado al final en HTML. Pero el HTML generado por el redactor de entradas de Blogger es horrible, tiene un formato antiguo y no es nada semántico.

Los párrafos deberían ser párrafos

Cáda párrafo en tu entrada, en tu blog, en tu página, o en cualquier parte de la web debería estar correctamente contenido en sus etiquetas <p></p>, y la separación entre párrafos debería darse únicamente por estas etiquetas a menos que se quiera otro elemento en medio.

El editor de Blogger separa los párrafos con una o varias etiquetas <br>(dependiendo de cuántas veces presiones enter) y no usa en ningún momento la etiqueta <p>.

Negritas y cursivas

Las negritas en el redactor de Blogger están marcadas con <b> y las cursivas con <i>. Esto hace rato dejo de ser así. Debería ser <strong> y <em> respectivamente. Es un poco más largo, pero es lo correcto.

Aunque esto no es tan grave como lo de los párrafos pero también debería ser corregido.

Estilos en linea

Los botones Fuente, Tamaño de fuente, Color del texto y Color de fondo de texto agregan estilos en linea, por eso siempre debes evitar usarlos.

Los estilos en linea no son la manera correcta de darle estilo al texto ni a ningún elemento ya que representan un dolor de cabeza en materia de mantenibilidad.

Imagina que tienes la costumbre de resaltar lineas destacadas en tus entradas, y siempre lo haces dándole un fondo amarillo al texto que quieres resaltar. Pero un día se te dio por rediseñar el blog y ahora el texto con fondo amarillo no va con tu nuevo diseño sino que quieres un que el texto resaltado tenga ahora un fondo verde claro como en Medium.

Aquí si has estado usando estilos en linea tienes dos opciones: aceptas que tus viejas entradas no van a coincidir con el nuevo diseño de tu blog, o te pones en la tarea de editar tus entradas una por una para cambiar el amarillo por el verde. Ojalá no tengas muchas entradas.

La forma correcta de lidear con esto es agregando en el html una clase para el texto resaltado y darle los estilos en el CSS, luego cuando cambies el diseño simplemente tienes que dirigirte al CSS de tu blog y cambiar las propiedades de esta clase.


<style>
  .destacado {
    background-color: #e9fdf0;
  }
</style>

<p>En este texto de ejemplo <span class="destacado">esta parte está resaltada</span> y el resto no.</p>

Imágenes

El problema a la hora de insertar imágenes es que te genera un div de clase separator también con estilos en linea para alinear el bloque de la imagen mas una link <a> con un attributo fantasmón imageanchor="1" que solo entiende blogger y también con estilos en linea, mas el elemento de la imagen <img> con el desactualizado atributo border="1", y si todo eso no te parece lo suficientemente feo le puedes agregar una leyenda a la imagen para encontrarte en el html con que tu imagen y leyenda ahora hacen parte de una horrible tabla. Todo esto me parece un poco arcaico.

Mi concejo es que agreges las imagenes estando en el editor de texto plano (la pestaña «HTML») y cuando salga el cuadro de opciones le des en aliniacion ninguna y tamaño original. Luego borras lo que no necesitas y la encierras dentro de un elemento <figure> y para tu leyenda agregas un elemento <figcaption>. Listo, ahí tienes tu imagen con marcado moderno y semántico.

Soluciones y alternativas

La única solución real aquí es que Blogger arregle su editor de entradas. Mientras tanto, puedes buscar alternativas como escribir en markdown o escribir directamente el html de tus entradas en el editor de texto plano como nosotros los barbáricos.

0 comentarios