Sin categoría

El blog y los estándares web

Valid XHTML 1.0 Transitional Desde que Infected-FX (un crack) realizara el experimento de comprobar que blogs de su blogroll validaban según los estándares de la W3C me encontré con una tarea pendiente. Bueno, en realidad no es que el código no validase sino que ni siquiera podí­a analizarse, pero ahora os contaré porqué.

No obstante, ya puedo decir que el código valida para XHTML 1.0 Transitional y bueno, uno se siente mejor. Así­ que, si tenéis pensado validar vuestro código os diré con que problemas me encontré yo, por si os sirve de ayuda.

En primer lugar, el código no podí­a analizarse como he dicho antes. El motivo, habí­a caracateres que el validador no interpretaba como utf-8.
Después de intentar entender cuál era el error y porqué demonios podí­a suceder decidí­ indagar en el código en base a las indicaciones que me daban en la página de error.

¿Qué encontré? Sorpresa el buscador de Google que está en la barra lateral era el causante del error. La letra acentuada de “Búsqueda” es decir la ú, estaba escrita tal cual en el código fuente en lugar de su entidad equivalente ú

Una vez solucionado esto conseguí­ que el validador analizara el código y encontrara los errores, mis consejos:

– Si has añadido algún elemento de otra web, podrí­a ser una buena idea quitarlo antes de validar el código. La mayorí­a de los errores provienen de utilidades, imágenes… que añadimos de otros sitios web sin que éstos se preocupen porque valide. Una vez que valides tu código puedes volver a añadir uno a uno cada elemento para comprobar si alguno provoca un error.

– Cuando valides tu código si el validador te muestra un número alto de errores, no desesperes, la mayorí­a son consecuencia de otro.

– Los errores más comúnes suelen ser:

1. Omitir la etiqueta alt en las imágenes, acuérdate de hacerlo también en cada post donde incluyas una imagen sino te dará un error. Imagina que consigues validar tu código, si ese dí­a escribes un post con una imagen y omites la etiqueta ya no validara.

2. Debes cerrar cada etiqueta, es decir, <div></div>, o <img src=”…” alt=”…” />

3. Presta atención a las jerarquí­as y anidación de los elementos, por ejemplo: <ul><li></li></ul>

Si alteras ese orden no validará.

4. Respeta los requisitos de mayúsculas, en XHTML no está permitido su uso en las etiquetas y los atributos. Es decir: en lugar de <BODY>, escribe <body>

5. Los valores de los atributos además deben ir entre comillas, por ejemplo, width:100 vs width: “100”

ínimo y válida tu código!

About the author

Dimas

View all posts

6 Comments

  • Para la parte de las tildes, no es necesario que las cambies por sus entidades HTML equivalentes, sólo tienes que usar un editor con soporte para UTF-8 o la codificación que usas,

  • 5. Los valores de las etiquetas además deben ir entre comillas, por ejemplo, width: “100px”

    Varias anotaciones sobre este punto:

    Inicialmente decir que seria width=”100″ o width=”100%” si es HTML no lleva “px”. No obstante la etiqueta width no es estándar de XHTML así que debería ir en el CSS.

    Un ejemplo mas sencillo sería el class=”claseCss” vs class=claseCss.

    Un saludo

  • Alex pero el editor al final lo que hace es cambiar la tilde por su entidad equivalente. Yo me referería al caso del buscador de Google, en el que tienes que editar el código fuente porque las palabras causantes del error no son visibles.

    Manuel, lo de px, costumbre del CSS, por otro lado ¿width no lo admite XHTML?, pero valida un código con width en una tabla por ejemplo

  • alex: o poner el charset adecuado en la cabecera de los HTMLs (se puede configurar en la plantilla).

    el problema puede aparecer cuando cambias el charset de la plantilla con artículos ya publicados, o simplemente cuando añades uno diferente si no estaba puesto. En pruebas que he hecho, no sé si en Blogger o WordPress, te puede montar un destrozo monumental y, supongo, te obliga a repasar todos los artículos para corregir las entidades (de esto depende la magnitud del destrozo). El problema puede surgir también cuando el administrador de un sistema, de repente, cambia la configuración del servidor web (que debería ir siempre en UTF-8) a otro mapa de caracteres, como el español. La solución pasa siempre por incluir en la cabecera del HTML el mapa de caracteres adecuado (iso-8859-1) para ver el español de España correctamente. WordPress, por defecto, coloca siempre UTF-8 y no sé si en la traducción al español han corregido eso porque nunca he hecho pruebas con esa versión. Tampoco entiendo bien qué es explica Dimas que ocurre con la palabra “Búsqueda” y por qué no da el mismo problema con cualquier otra palabra acentuada.

    Manuel, ¿cómo que un valor en píxeles no es admitido? No sé dónde o quién dice eso ¿quién no lo admite?. Pero sea donde sea, si miras las especificaciones de CSS del W3C, en cualquier ejemplo, aparecen las unidades en que se mide cada cosa (punto 4.3.2 de la especificación de CSS2, http://www.w3c.org). Si no lo pones, de hecho, se considera ilegal:

    IMG { border-width: 3 } /* a unit must be specified for length values */

    (sic; punto 4.2 de la normativa: “illegal rules”)
    ()

    por supuesto, si hay algún sitio en donde diga lo contrario, por favor, dínoslo.

    ¡Ah! “width” no es una etiqueta, es una propiedad que admiten algunas etiquetas. A las cosas por su nombre, por favor, que hablamos de lenguajes técnicos.

  • Cierto, quería decir atributos, escribir de madrugada a veces afecta…

    Respecto a lo de Google lo que ahora te dan así:
    <label for="ss1" title="Buscar http://www.blogmundi.com"><font size="-1" color="black">BlogMundi</font></label>

    Antes lo daban así:

    <label for="ss1" title="Búsqueda http://www.blogmundi.com"><font size="-1" color="#000000">BlogMundi</font></label>

    Esa ú de búsqueda daba el problema.

  • Dimas, eso depende del editor que uses, si estás en Windows, puedes hacer tus cambios con Notepad2 o Intype.

    Si tienes un tiempo, puedes ver que en el código de mi blog no existe ni una sóla entidad HTML para las tildes o la ñ y valida correctamente — al menos la página principal. 😉