soy Kseso y esto EsCSS

Casareal.es Un estudio de lo que no debería ser ni publicado ni publicitado... tanto

Estudio del desaguisado que es la nueva página de casareal.es Especialmente sangrante el uso de los iconos de validación (html, css y accesibilidad). Capturas de pantallas ilustrativas.

Casareal.es Un estudio de lo que no debería ser ni publicado ni publicitado... tanto

·Por Kseso ✎ 43

Hoy ha sido presentada a bombo y platillo la ¿nueva? página oficial de la Casa Real española. No ha habido informativo en tv o radio, ni portal de noticias que no se haya hecho eco de la buena nueva.
¿Qué te parece si echamos un vistazo algo más allá? ¿Y si hacemos lo que nadie y le pedimos al navegador que nos muestre un poco del código a ver qué encontramos?

Ya te adelanto. No se qué será peor, si que la hayamos pagado todos vía el presupuesto de la casa real que sale de los generales del estado o que haya sido un regalo.

Un vistazo a la página de inicio de casareal.es

Antes de nada. No mencionaré los errores y demoras del servidor del día de hoy. Se ve que no se esperaba tanto interés en verla.

Salvedad hecha, veámosla:

Ver código fuente de Casareal.es

Lo primero que llama la atención es este comentario al inicio de todo el código. Una buena manera de asegurarse sorpresas porque entre en modo Quirks algún navegador.

Esto explicaría que pese a contar con una hoja de estilos para IE6 metida en su correspondiente comentario condicional:

Nos encontremos con el inútil truco de alinear el texto al centro en html y compensarlo en las cajas principales:

Método, que como es sabido, sólo sirve para ie6 que no hace caso del universal "margin: 0 auto"... sólo cuando el documento no tiene doctype o entra en modo quirks por no tenerlo o reconocerlo. Por ejemplo cuando se encuentra con cualquier cosa precediendo al doctype. Como por ejemplo un comentario.

Todos sabéis de la importancia de declarar el charset, y algún meta complementario. Así, que ya puestos, dos mejor que uno. "Mejor que zozobre que mos falte", que vamos a salir en la tele:

".- Mira jefe, tengo una colección de scripts.
.- Pues guárdalos a mano, por si hace falta alguno."
Así que ya sabes dónde encontar uno de los mejores repositorios de javascrpts:

Sí, has visto bien: nada menos que 57 veces se abre la etiqueta <script>. Pero tranquilo, que se cierran todas.

Después de esta generosidad, las 11 veces que tenemos un "text/css" hasta parecen pocas

Si abandonamos el head y pasamos al body, descontamos las líneas en blanco, scripts y otros elementos que no son información o contenidos, vemos que efectivamente es una página de grandes números:

179 div´s en unas ~500 líneas se podría decir que es ser generosos en extremos, aunque algún amante de la semántica pueda invocar al demonio de la "divitis".

El número de <span /> que hay en una página es un buen indicador:

102 spans no son tantos o ¿sí?. Y algunos de tanta belleza como el vacío de la captura.

Luce bonita casareal.es

En un montón de navegadores: FF, Chrome, Opera, Safari, IE9 (y 8-7 en el 9), todos en Vista. En IE6 emulado en la última versión de IETester no pude (se rompe) pese a todo lo precedente luce increíblemente bien... con una sola condición: debes tener definido en las preferencias un tamaño de fuente (tipografía) de 16px.
Si tienes un tamaño mayor o menor el resultado es el que ves en la imagen (pincha para ampliarla):
Desbordes, descuadres, solapamientos y rotura en la disposición de las columnas la convierten en un bonito e inaccesible puzle.

Y @albertogargar pasa por twitter esta captura del menú usando Chrome en Linux:

Lo mejor, en el pie, para el final

Todo lo anterior no es nada. Pecata minuta, cosas de frikis. Nadie lo va a ver. A quién le importa. Y si por ello fuera, este artículo no existiría.

Lo realmente grave son la tres mentiras, tres, del footer. Luce 3 divisas, 3, del buen código que hay.
Tres escarapelas, tres, de validación WAII-AA, código xHtml 1.0 impoluto y Css sin mácula. Y tres enormes JA JA JA

Lo primero que da que pensar es que los iconos no enlazan al resultado de la validación de la página. No. Enlazan a diversa documentación (en inglés) sobre la cuestión.

Validación de accesibilidad Waii A-A

Sin palabras:

Bueno, espera, que es el Hera, que estas cosas tienen sus cosillas, que mejor pasamos otro:

Pues el T.A.W. tampoco quiere. Probamos otro. Y como dicen en la misma página:

Esta web ha sido desarrollada siguiendo la Norma UNE 139803:2004 y se ajusta a las pautas definidas por el grupo de trabajo permanente Web Accessibility Initiative (WAI) del Consorcio para la World Wide Web (W3C) para su nivel Doble-A. Actualmente este nivel Doble-A se cumple en la gran mayoría de las páginas.

Recuerda que todo este artículo está basado en el index en español del dominio. Bien, vamos al validador del inteco y lo hacemos con la norma UNE-139803 y doble A:

Ni el de casa. 11 problemas. 10 advertencias y 26 observaciones. Sin entrar en que la accesibilidad es algo más que:

  1. Uso de CSS para la presentación de la información
  2. Texto alternativo en las imágenes
  3. Uso de los estándares del W3C
  4. Locución de todos los contenidos textuales

Ni una sola acceskey para ayuda en la navegación y outline sin declarar, pasa desapercibido el del navegador. Ni un longdesc...

Primera medalla que se cae.

Validación código Xhtml 1.0

Por mucho que se intente, el resultado siempre es el mismo: un error 500.

Pero una prueba. Guardamos la página al disco duro y validamos su html:

161 Errors, 6 warning(s)

Segunda medalla caída.

Validación código Css

¿Esperas sorpresas? Pues la hay. Pero en la misma línea:

Tres eran tres las mentiras y gordas: 489 horrores y 8.673 advertencias.
A estas alturas, ¿qué necesidad tiene nadie de colocar estos iconos? Son todo un reclamo para ver la honestidad de las páginas que los incluyen.

Otras cuestiones finales

Mucho se ha alabado esta página. Ha habido quien la calificó de moderna, actual y no se cuántas cosas más.
A finales de 2012, no busques ni un solo atisbo de html5, ni en el marcado ni en las herramientas que ha aportado. Mucho menos nada del "responsive web design" ni en el diseño, ni en el js (con tal cantidad) ni en las imágenes. Y mucho menos optimización del html y del css y semántica en sus selectores.

Y si esperabas hacer uso del móvil, que tengas más suerte que yo: la página casareal.es no existe si escribes la dirección sin las 3w. Con ellas carga el mismo índex que la versión de pc. Ajustada a la resolución del aparato. Si quieres ver algo necesitarás un macro zoom.

Conclusión

_____________________________________________________
Saca tú la tuya y si te sientes con ganas la compartes en un comentario.

Disclaimer

Este pequeño estudio de lo que no debe ser una página institucional, la hayamos pagado o sea un regalo que ya si eso se verá..., está hecho por un amater de estos temas. ¿Te imaginas que alguien con conocimientos y herramientas sobre el particular le pasa el algodón?

Ampliación

Martes por la tarde. Twitter se hace eco de que en algunas páginas funciona el XSS.
Algunos ejemplos:

¿Qué otras sorpresas nos deparará la página de la Casa Real visto lo visto en tan sólo un día?

Ampliación: Un buen artículo de Libre y Público sobre el cambio de software libre y gratuito a privativo y paganini con el que se ha desarrollado la página casareal.es además de una estimación de su coste.

Reacciones al artículo

En
En Menéame (portada)

avatar del Editor del blog

the obCSServer ᛯ Ramajero Argonauta, Enredique Amanuense de CSS.
#impoCSSible inside
Dicen que, en español, EsCss es el mejor blog de CSS. Posíblemente exageren.
@Kseso EsCss Kseso