Validación de código Blogger con W3C Markup Validator Service

Ejecutar un código de calidad permite a tu sitio web disfrutar de una mayor compatibilidad con todos los navegadores y unos tiempos de ejecución más rápidos.

Hoy día los navegadores son capaces de interpretar el código fuente de una página incluso aunque esta contenga problemas de programación en su interior.

Algunos de nuestros usuarios tienden a utilizar el último navegador pero hay una "inmensa mayoría" que utiliza navegadores "antiguos"  o incluso modernos pero que no son capaces de interpretar ciertas partes del código que tiene problemas o que ha sido realizado fuera de los estándares internacionales a tal efecto.



Hemos visto cómo desarrollar nuestras hojas de estilo acorde al consorcio internacional W3C. El organismo internacional regulador de código que establece los estándares compatibles sobre los que se debe trabajar. Ahora le toca el turno a nuestro código fuente, nuestro HTML y especialmente el utilizado en Blogger.

Intentemos hacer que nuestro código fuente se adapte a los estándares e incrementemos la calidad, compatibilidad y rendimiento de nuestro trabajo con el Blog.

Conceptos Previos:

¿Qué es el W3C?

Según "reza" su web (cito con sus enlaces incluidos por el valor de toda esta información):

"El Consorcio World Wide Web (W3C) es una comunidad internacional donde las organizaciones Miembro[ingles], personal[ingles] a tiempo completo y el público en general trabajan conjuntamente para desarrollar estándares Web[ingles]. Liderado por el inventor de la Web Tim Berners-Lee[ingles] y el Director Ejecutivo (CEO)Jeffrey Jaffe[ingles], la misión del W3C es guiar la Web hacia su máximo potencial. Contacta con el W3C para más información."

¿Qué hace el W3C?

De nuevo citando su web:

"La principal actividad del W3C es desarrollar protocolos y directrices que aseguren el crecimiento de la Web a largo plazo. Los estándares del W3C definen las partes claves que hacen que la World Wide Web funcione. Conoce más sobre el objetivo del W3C."

¿En qué me puede ayudar?

Utilizar los protocolos y directrices que aseguran que tu sitio web es totalmente compatible con cualquier navegador es sólo el comienzo.

El consorcio pone a tu disposición un magnífico conjunto de herramientas que merece la pena estudiar, pues "validan" tu código informándote de aquello que no cumple con los estándares o que directamente es erróneo.

Toda su documentación y código es abierta, está disponible para cualquiera que lo desee y es muy utilizada por todas las organizaciones y empresas desarrolladoras de páginas web que se precien.

Mejorando el código fuente del HTML resultante de la plantilla de Blogger:

Conceptos previos para los no iniciados en informática o programación de páginas web (Si tienes experiencia en código HTML, y JavaScript puedes pasar directamente al detalle sobre el analizador de la W3C):

A continuación repasamos sin entrar en profundos detalles técnicos y buscando facilitar la compresión a los usuarios más noveles en cada concepto que utilizaremos en la guía:

La Plantilla de Blogger, el XML y el HTML:

Es una representación esquemática realizada en XML que sintetiza código HTML en etiquetas propias que al ser interpretadas por el servidor de Blogger conforman la presentación del blog. Al ser reutilizadas por todos los usuarios no podemos alterarlas sólo para nuestros intereses. Es por ello que cuando queremos "ir más allá" de lo que ofrecen a nivel básico, debemos reescribir algunos de los elementos que las componen. Entre esos elementos citados se encuentran las hojas de estilo, pilar básico del aspecto y formato de nuestras páginas en Blogger o en cualquier "publicación web". 

Es decir, simplificando sin entrar en tecnicismos: la plantilla contiene el contenido del blog "resumido" en un lenguaje de etiquetas extendido (el XML) que luego, cuando se ejecuta en el ordenador de los usuarios, se interpreta en el lenguaje que sus navegadores entienden (el HTML).  

JavaScript

La Wikipedia lo define como: "JavaScript es un lenguaje de programación interpretado, dialecto del estándar ECMAScript. Se define como orientado a objetos,³ basado en prototipos, imperativo, débilmente tipado y dinámico.

Se utiliza principalmente en su forma del lado del cliente (client-side), implementado como parte de un navegador web permitiendo mejoras en la interfaz de usuario y páginas web dinámicas⁴ aunque existe una forma de JavaScript del lado del servidor (Server-side JavaScript o SSJS). Su uso en aplicaciones externas a la web, por ejemplo en documentos PDF, aplicaciones de escritorio (mayoritariamente widgets) es también significativo." 

Simplificando técnicamente una vez más: es un lenguaje de programación que enriquece con funcionalidad a los componentes que componen nuestro Blog. Esta funcionalidad es muy variada, por ejemplos sencillos: con JavaScript se puede calcular el número de visitas, se pueden validar campos de un formulario para saber si tienen la longitud adecuada, podemos hacer que un botón una vez pulsado ejecute una determinada tarea... permite a nuestros componentes de la página seguir un guión, "programar" "qué van a hacer" cuando se les utilice. 

Utilizando W3C Markup Validator Service:

0) La propia W3C avisa en su herramienta: "The validator checked your document with an experimental feature: HTML5 Conformance Checker. This feature has been made available for your convenience, but be aware that it may be unreliable, or not perfectly up to date with the latest development of some cutting-edge technologies. If you find any issues with this feature, please report them. Thank you.". Es decir, la validación de HTML5 (el HTML generado por Blogger a través de su plantilla) es EXPERIMENTAL, como tal no puede ofrecer una solución perfecta como realiza en muchas otras herramientas de validación la W3C.

1) Conéctate a http://validator.w3.org/, te aparecerá una pantalla como la que se muestra a continuación:

2) Introduce la URL de tu sitio web o Blog en la caja de texto con el literal "Dirección". A continuación te mostrará el listado de "Avisos" y "Errores" en el marcado de tu código fuente:

Los Avisos, aunque de menor importancia que los errores, deben atenderse para alcanzar el mayor nivel de compatibilidad.

Los errores deben tratarse para evitar problemas de compatibilidad y mejorar la ejecución de tu código en el navegador.

EXPERIMENTAL: W3C y Blogger

AVISO: 

• los pasos aquí realizados han sido probados y realizados con mi Blog. Lo que a mí me ha funcionado no tiene porqué funcionarte a tí dado que cada página web es distinta.

• Evidentemente mi plantilla Blogger es modesta y carece de complejidad. Lo que a mí me ha funcionado no tiene porqué funcionar en todos los casos, pero me siento en el deber de compartir esto con la comunidad dado que lo considero un avance útil para todos los que trabajamos para mejorar nuestros Blogs y sitios web a todos los niveles.

• Realiza siempre una copia de seguridad de tu trabajo.

• No me responsabilizo de los daños que puedas sufrir en tu Blog por el uso de los pasos aquí explicados. Realiza siempre una copia de seguridad de tu trabajo.

0) Conviene considerar que la herramienta de validación de código para HTML5 de la W3C es altamente estricto. Prácticamente cualquier página web actual contendrá errores al pasar por este validador.

• Al igual que sucede con muchas webs, a la hora de revisar cualquier página HTML que proviene de una plantilla Blogger suele dar muchos errores. 

• En este caso debo decirte que no compensa preocuparse porque la mayor parte de navegadores hoy día no tienen ningún problema en interpretar el código que genera Blogger.

• Las plantillas con menos errores de validación W3C que he encontrado son las "nuevas" plantillas dinámicas de Blogger.

• En conclusión, no es estrictamente necesario que tu web esté perfectamente adaptada a la normativa W3C porque el código de Blogger es perfectamente rastreable por cualquier robot de cualquier buscador y suele dar muy pocos problemas al funcionar en los navegadores más actuales.

1) Si en la pantalla principal, en la que metes la dirección a tu Blog o sitio web pulsas "More options" y activas la casilla de verificación "Clean up Markup with HTML-Tidy", al final del informe el propio validador te dará el código fuente HTML puro correctamente "escrito" y validado según las normas que has visto en el informe.

En Blogger es imposible utilizar este código dado que el HTML que lanza Blogger es la interpretación de su plantilla y no el resultado final que ha llegado hasta el validador de la W3C. No obstante, si tienes una web con HTML directo, puede interesarte experimentar con esta opción. Si usas Blogger, puedes ver cómo se solucionan algunos de los problemas que aparecen en el informe.

2) La mayor parte de páginas que existen en Internet con ayuda para minimizar errores de Blogger en W3C realizan prácticas que desde luego resuelven gran parte de los errores pero sobre las que no queda claro en absoluto si son perfectamente válidas o no. En este caso debo decirte que si las realizas lo hagas bajo tu cuenta y riesgo:

• En www.Bloglution.com, dan una solución para minimizar la cantidad de errores drásticamente ajustando la cabecera del XHTML. En mis pruebas esas soluciones se demuestran efectivas. Aún así tengo mis dudas al respecto de si lo que realmente hacen es "confundir" al propio validador y obtener así menos errores o son realmente funcionales. No obstante, como prueba experimental puede interesar.
• Aconsejan (esto si es realmente útil) utilizar el atributo ALT en las imágenes. Esto debe hacerse también para la optimización de motores de búsqueda y reducirá bastantes errores. 

•  El uso de caracteres de escape para el carácter & sin &amp, también suele ser un problema común. Por lo que he encontrado en los foros de desarrolladores, con Blogger se debe escapar el & escribiendo & Esto también solucionará múltiples errores.
• En mis pruebas, un Blog "puro", sin ningún "gadget" o "widget" consigue reducir sus errores a unos 38 ó 54 dependiendo de la plantilla de la cual se parte. En cuanto se comienzan a añadir Gadgets, estos llevan el "<b:include data='post' name='postQuickEdit'/>" ó "<b:include name='quickedit'/>" en el que varias web coinciden que se encuentran gran parte de los problemas de validación de W3C. Si bien recomiendan borrarlos, no he notado que realmente solucionen el problema.