El editor visual de wordpress y el HTML5

El editor visual de wordpress y el HTML5

Print Friendly, PDF & Email
El editor visual de wordpress y el HTML5
5 (100%) 2 votos

 En muchas formaciones de nivel introductorio de wordpress el temario suele ser parecido a:

  1. Diferencias entre wordpress.com y wordpress.org
  2. Páginas, entradas, categorías y etiquetas
  3. Menús y widgets
  4. Plugins
  5. Plantillas
  6. Formularios
  7. En ocasiones algo de photoshop

Y algo más en función del grupo y de lo que de tiempo según horas disponibles.

profesor wordpress
El editor texto es el gran olvidado de muchas formaciones.

Todos los profesionales del sector terminamos siguiendo un guión bastante parecido y es que se trata de un índice de contenidos bastante correcto para una iniciación.

Sin embargo, a medida que vas profundizando en el uso de wordpress poco a poco te vas dando cuenta de pequeños detalles que no están del todo «pulidos» en la herramienta.

Veamos un error típico que muchos (y me incluyo) cometemos cuando redactamos una entrada…. y este es el de abuso de etiquetas semánticas de html5.

El editor de wordpress

El editor de entradas y páginas (y widget de texto) es el gran olvidado de muchas formaciones. Su simplicidad y parecido con el word hace que a menudo no se le preste la atención que debiera. Lo cual en mi opinión es una verdadera lástima.

Empecemos por los básicos.

El editor de wordpress tiene un editor visual y un editor html.

El editor visual

El editor visual incluye por defecto todas las funciones mínimas para un redactado.

Ordenados de izquierda a derecha en la imagen encontramos: párrafos, encabezados hasta 6 niveles, negritas, cursivas, listas no ordenadas, listas numeradas, citas, alineado a la izquierda, centrado, alineado a la derecha, enlaces (permalinks), una línea divisoria, tachado, colores personalizadas, pegar desde word, borrar formatos, caracteres especiales, sangría a la derecha, sangría a la izquierda y el gran Ctrl + z.

Y en caso de que tengas una plantilla de pago o algún plugin instalado algunos iconos extra que añaden shortcodes.

Pero…. y el editor HTML?

editor visual wordpress
Ejemplo de uso del editor visual de wordpress para esta entrada

El editor HTML

En los cursos normalmente se suele explicar el visual y nos olvidamos de la parte de lenguaje de marcado. Como lo hacemos si queremos insertar tablas?

En ocasiones la solución pasa por insertar algún tipo de plugin cuando en realidad no haría falta. Únicamente sería necesario escribir un poquito de html básico…

Pero esto no es grave

El editor visual conlleva el riesgo de que es demasiado visual.  En ocasiones ensucia mucho el código. Etiquetas vacías, saltos de línea a mansalva nbsp que no deberían estar, párrafos vacíos, css en línea en lugar de usar clases, … etc

editor html wordpress
Ejemplo de uso del editor html de wordpress para esta entrada

Uso indebido de etiquetas html

Démosle al César lo que es del César.  En cualquier formación de web se explica que el html únicamente se debe usar para aportar contenido y forma y que el css sirve para dar formatos.

Es decir, que por poner un ejemplo… nunca debería usar un «título 1» en lugar de un «título 2» porqué nos gusta más lo bonito que queda el «título 1» en nuestra plantilla de wordpress.

Es más, el título de la entrada es por defecto siempre un «Título 1». Por temas de SEO en una página únicamente debería haber uno… por lo tanto directamente evita el uso de este «formato».

Nunca deberíamos usar una etiqueta en detrimento de otra simplemente porque «nos gusta como artísticamente«

El editor de wordpress y el HTML5

Veamos que etiqueta html usa wordpress en algunos casos.

FormatoEtiqueta wordpress¿HTML5?Equivalente no semántico
Negrita<strong>Si<strong>
Cursiva<em>Si<i>
Cita<blockquote>SiSe haría mediante css
Tachado<del>SiSe haría mediante css. Las etiquetas <s> y <strike> están "deprecated"
Si nos pasamos pintando corremos el riesgo de diluir la fuerza semántica de nuestras etiquetas.

Las etiquetas html5 sirven para dar significado semántico a nuestro documento web. Por ejemplo una etiqueta <header> indicará a los navegadores que están leyendo una parte del documento que típicamente tendrá el logotipo y un menú de navegación. <nav> indicará el menú de navegación principal de nuestra web.

En un documento web, deberíamos usar únicamente un <nav>, una <header> y una <footer> por poner un ejemplo….

Si queréis profundizar sobre la semántica de html5 os recomiendo este escrito.

Pues bien, las etiquetas que se muestran en la tabla lateral indican a google que el contenido que se está leyendo es «especial» y que destaca sobre las otras palabras de la web. De algún modo le estamos pidiendo que los ojos de google presten en estas etiquetas su atención.

¿Genial verdad?

¿Pero que pasa si en un documento web empezamos a poner negritas en todas partes? En algunas ocasiones será un uso acertado, pero en otras simplemente estético para facilitar la lectura diagonal de nuestro visitante.

¿Se entiende por dónde voy?

Si nos pasamos pintando corremos el riesgo de diluir el mensaje. 

Consejos para un redactado óptimo en wordpress

  • Para terminar con esta entrada remarcaremos una vez más que debemos tener el costumbre de revisar el editor de html cuando redactemos directamente en wordpress.
  • No abusaremos de las negritas, itálicas, comentarios… y si debemos hacerlo miraremos de combinar las etiquetas que el editor visual escribe por defecto con aquellas de html que no tienen significado semántico y que resultan en el mismo formato.
  • Evitaremos instalar nuevos plugins para usos que únicamente requieren de un html muy sencillo.

¡Y hasta aquí la entrada de hoy querido lector! Espero que a partir de ahora mires las herramientas de editor visual y editor html con otros ojos 😉

¡Hasta mañana!

Etiquetas:
Francesc Ricart
hola@francescricart.com

Aprender y enseñar. Enseñar y aprender. En el ámbito docente soy docente ocupacional. En el ámbito profesional consultor web. Ofrezco servicios de mejora continua y mantenimiento web. ¿Qué quieres aprender hoy? Encontraréis más acerca de mi en la página sobre mi

No hay comentarios

Escribir un comentario

  Acepto la política de privacidad

Responsable: FRANCESC RICART MUÑOZ.

Finalidad: Gestionar los comentarios que realizas en este blog.

Destinatarios: No se cederán datos a terceros, salvo obligación legal.

Derechos: Tienes derecho a acceder, rectificar y suprimir los datos, así como otros derechos, como se explica en la política de privacidad.