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!

Entradas relacionadas:

Como insertar código fuente en wordpress
- 199
Vemos como podemos hacer para introducir código fuente en un wordpress sin tener que recurrir a capturas de pantalla.
Dónde comprar plantillas para wordpress
- 98
Si estás buscando dónde comprar plantillas para wordpress en esta publicación encontarás mi top 10 de lugares favoritos y algunos criterios que tengo en cuenta para asegurarme una buena elección para ...
Estrategias para luchar contra el spam 2/2
- 239
WordPress tiene soluciones alternativas para combatir el spam y que no requieren de la instalación de plugins. Esta entrada completa la de ayer en la que se planteaba una solución mediante un plugin....
Diferencias entre categorías y etiquetas en wordpress
- 323
Existen una serie de diferencias entre categorías y etiquetas wordpress. En esta entrada vemos las cuestiones técnicas para que cada uno pueda decidir que uso dar a las categorías y etiquetas. Esta en...
Factores que afectan al tiempo de carga de una página web
- 256
Resumimos los principales factores que deberemos tener en cuenta desde el punto de vista de alguien que ha estudiado un curso de confección y publicación de páginas web para la optimización y mejora d...
En que se diferencian widgets y plugins de wordpress
- 198
¿Cuales son las diferencias y puntos en común entre widgets y plugins? Esta entrada puede ser una buena introducción si estás empezando a aprender wordpress o si ya tienes un nivel intermedio.
Como configurar los menús en wordpress
- 210
Configurar el menús de una página web en base wordpress es una tarea sencilla que puede resultar un poco abrumadora cuando se está aprendiendo a usar el CMS por primera vez. Con esta entrada verás com...
Los contenidos de los comentarios posicionan
- 233
Los comentarios que las personas hacemos en las entradas de webs y blogs son leídos e indexados por google junto con el contenido que google bot ha rastreado. No estoy diciendo si mucho o si poco. Per...
Usa el borrador de wordpress para guardar ideas
- 326
Continuamente pienso en nuevos contenidos que serían de interés para el blog. Pero cuando me pongo en frente del ordenador para escribir muchas de estas imágenes ya se han ido. Aplicaciones como Googl...
Mantenimiento web. La obsesión por actualizar todo siempre
- 111
Si algo funciona no lo toques. ¿A que se debe la manía de tener que esta siempre actualizando todo? En esta entrada explico mi opinión personal sobre bajo que supuestos me lanzo a una nueva actualizac...
Etiquetas:
Francesc Ricart
hola@francescricart.com

Soy un ingeniero industrial a quién le apasiona aprender y enseñar. En el mundo del marketing online he encontrado una de mis pasiones. Ejerzo como docente ocupacional y privado para empresas. Y también hago consultoría web para PIMES, autónomos y otros emprendedores como yo. Ayudo a las empresas en cualquier temática relacionada con su presencia digital y herramientas web. Aunque mi especialidad es el posicionamiento en buscadores (SEO). A nivel de formación lo que más feliz me hace es que un alumno haga de mi pasión una forma de vida y le ayude a encontrar trabajo. A nivel de negocios ayudo a empresarios a desenvolverse con soltura en el mundo digital y les animo a hacer cada vez más cosas que nunca hubieran imaginado que ellos también podían hacer. En este camino les ayudo haciendo todo aquello dónde ellos no llegan y crecemos juntos. 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.