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)

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 Don Kseso Kseso

Comentarios: 43

  1. Anónimo11/9/12

    Si no pones las "www" no va: http://casareal.es

    Brutal.

    ResponderEliminar
  2. Anónimo11/9/12

    Lo realmente grabe...

    ¿En cinta o en DVD?

    ResponderEliminar
  3. Gracias, Anónimo #2

    Corregido. Si sólo encontraste ese error, no me salió tan mal esta vez ;-)

    ResponderEliminar
  4. Anónimo11/9/12

    Y según el ABC han tardado 18 meses (http://www.abc.es/20120910/espana/abci-nueva-casa-real-201209101050.html)

    ResponderEliminar
  5. oye pero es muy bonita, jajaja

    pero no me extraña está hecha con asp.net

    ResponderEliminar
  6. Anónimo14/9/12

    Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
  7. Anónimo14/9/12

    Bueno si el código asusta, sólo decir que el diseño esta "inspirado" (copiando muchos elementos) en la whitehouse.gov

    ResponderEliminar
  8. Anónimo14/9/12

    Pues si eso lo sabe hasta un chimpancé, ¿qué otra especie diseño la de la casa real?

    ResponderEliminar
  9. Anónimo14/9/12

    Desarrolladores y arquitectos con semejante incapacidas dice mucho de nuestra competitividad informática (pero claro todo son charcuteras).
    Señores, si van a usar Sharepoint y WebForms de ese modo que sea para intranets, nunca para sitios web públicos, y mucho menos si pretenden poner los sellos del W3C. Para hacer estos sites lo mejor es tener profesionales y usar tecnologías MVC (Struts, ASP.NET MVC, Ruby, etc).
    ¿Cuanto habrán cobrado por hacer semejante mierda?¿quién es el responsable del desarrollo?¿Qué empresa ha conseguido ganar el concurso ya sea por nombre o por bajo presupuesto, que no por calidad?

    ResponderEliminar
  10. Este comentario ha sido eliminado por un administrador del blog.

    ResponderEliminar
  11. Anónimo14/9/12

    Pués según el Total Validator, a esta misma página tampoco le falta algún error:

    Page checked:
    http://ksesocss.blogspot.com/2012/09/casareal.html

    Total errors found:
    282 (Parsing: 33, HTML: 142, WCAG v2 A: 106, WCAG v2 AA: 1)

    Total warnings found:
    38 (Parsing: 11, WCAG v2 A: 27)

    ResponderEliminar
  12. Relajate Camaro que nadie te tiene en cuenta lo de las 57 etiquetas de script, melón.

    ResponderEliminar
  13. Anónimo14/9/12

    En casa del herrero...

    http://validator.w3.org/check?uri=http%3A%2F%2Fksesocss.blogspot.com%2F2012%2F09%2Fcasareal.html&charset=%28detect+automatically%29&doctype=Inline&group=0

    ResponderEliminar
  14. Anónimo14/9/12

    Camaro, vete de aqui...

    No tienes ni idea asi que aprende lo que es una auditoria de un desarrollo. Seguro eres el tipico "informatico de la oficina" que no has hecho otra cosa en tu vida, que bajarle las pelis al jefe.

    Quitate las rodilleras y coge los libros

    ResponderEliminar
  15. Anónimo14/9/12

    Cuidado!: reunion de friki-trolles en comentarios!!

    ResponderEliminar
  16. The Boss14/9/12

    Pues te falta los errores en las otras lenguas. Te ponen los titulares en inglés pero macarrónico (no se dice agenda en inglés sino diary) y la información o artículo sigue estando en spanish.

    ¿Cuánto ha costado esto? la info que me ha llegado, que por desgracia no la puedo confirmar, es de 235.000 euros.


    ResponderEliminar
  17. Anónimo14/9/12

    Camaro, no te indignes hombre! Pase lo del código... pero los tres iconos de validación... ains!

    ResponderEliminar
  18. Anónimo14/9/12

    La web está hecha en SharePoint. Lease el comentario de anónimo al respecto.

    ResponderEliminar
  19. Anónimo14/9/12

    Como se nota que no has trabajado con .NET, las tabulaciones dentro de componentes no van acorde con la pagina global, y te genera muchos divs.... si te asusta ver esto fliparías con aplicaciones hechas con GWT, o con GXT, y muchas son una maravilla.

    Hay cosas que no están bien, pero no es algo exagerado, creo que simplemente criticas por criticar, como el tema de XSS, eso es una gilipollez, no es nada inseguro ni nada, pero claro hace mucho ruido y le encanta a los medios de comunicacion y a la gente simple que no piensa.

    En fin, que para criticar cosas siempre hay listos.

    ResponderEliminar
  20. Anónimo14/9/12

    "349.08KB (84%) of CSS is not used by the current page."
    Dos hermosos errores 404 y un 403
    Más de 90 imágenes, muchas de ellas repetidas, vease como ejemplo esta de aproximadamente 300kb
    http://www.casareal.es/sitios/ListasAux/Galeras/20120913-ACTO_INSTITUCIONAL_DE_LA_ASOCI-ES-111651/20120913_premios_V_de_vida_01.jpg

    Ni una CSS comprimida.

    En fin, esto no lo ha visto ningún jefe, o si lo ha visto, me gustaría a mi ver qué jefe, por que esto es un suspenso en toda regla.

    Y al que dice que este blog tampoco pasa los test de validación decirle que por eso mismo no ostenta imagen alguna que pretenda hacer gala de ello.

    ResponderEliminar
  21. Gracias a todos por la visita y los comentarios.

    Camaro, cariñito, ¿te duele la tripita?
    Espero que se te pase, pobrecito.
    Por cierto, te fijaste que este blog está en blogger y que tú no has pagado un puto euro por su existencia.

    Pues eso.

    ResponderEliminar
  22. Anónimo14/9/12

    Está muy bien criticar, y tal....pero podías aplicar todos esos conocimientos en tu blog.

    Lo que viene siendo "Predicar con el ejemplo"

    ResponderEliminar
  23. Anónimo14/9/12

    Esta claro que el código no esta bien, pero hay muchas cosas detrás de un desarrollo de estas características, a lo mejor quién ha hecho la web no la ha podido hacer como le hubiera gustado. Digo a lo mejor por que quizás sea un puto inutil, que no lo se, pero este tipo de trabajos tienen muchas complicaciones que van en detrimento de la calidad del diseño y la programación.

    Dicho esto, lo que si estoy seguro es que en la Casa Real no hay nadie con criterio suficiente para hacer algo de calidad, joder es que son ellos los que tienen que darse cuenta que la imagen es importante, y que la tecnología también, que estamos en la puta edad de piedra...

    En fin, yo me dedico a esto y si te obligan a hacer una mierda, muchas veces no queda otra que cobrar y salir corriendo.

    Estaría bien que el responsable nos contase el por que de esta web.

    ResponderEliminar
  24. Anónimo14/9/12

    Hay muchos fallos más. El 99% de resultados en google da errores 404

    https://www.google.es/webhp#q=site:casareal.es

    los errores no tienen página personalizada, y un largo etc..

    ResponderEliminar
  25. Anónimo14/9/12

    Qué mal gusto tiene la gente por trollear y por criticar tonterías en vez de prestar atención a la importancia del mensaje.
    A aquellos que criticáis que este mismo blog no cumple los estándares os digo dos cosas:
    - Este blog no luce los sellos de estandarización como sí lo está haciendo la web de la casa real.
    - Este blog no se ha pagado con dinero público salido del bolsillo de todos los españoles.
    Así que no tiene sentido decirle al autor de este blog que predique con el ejemplo, si algo se paga con dinero del estado es de derecho exigir calidad en el producto.
    Seguramente, y como sucede mucho en este tipo de proyectos, los trámites para actualizar la web de la casa real habrían empezado hace 18 meses con un presupuesto millonario, tal y como mencionan las fuentes. A 3 meses de la entrega y después de que intermediarios y consultores se embolsaran el 90% de dicho presupuesto, se habrá encargado el trabajo a una consultora que subcontrataría a otra, y que a su vez habrá asignado el trabajo a programadores junior o becarios.
    La migración a SharePoint es solo la excusa para justificar el aumento de presupuesto y que ciertas personas o empresas se lleven su comisión.

    ResponderEliminar
  26. Anónimo14/9/12

    Pero que vergüenza me da mi propio país. Y eso que soy de los que no está tan mal... A ver si empezamos a invertir en I+D, sobre todo en la D.

    Gracias por poner en evidencia el mal hacer de la realeza.

    ResponderEliminar
  27. Anónimo14/9/12

    No os quejéis de que critiquemos que les estamos haciendo trabajo de auditoría ¡y gratis!

    Que sí, que el buen producto es el que satisface al cliente, pero tratándose de la casa real, ¿quién es el cliente?

    1. Si el cliente somos los españoles: pues visto el estado de la nación... nos la suda todo, así que bien.
    2. Si el cliente es cualquier extranjero, porque "el Rey es nuestro mejor relaciones públicas": ahí es donde nos tenemos que pedir el 100%
    3. La propia casa real: porque les gusta verse en la web, también deberían exigirse el 100%

    Bajo los puntos 2 y 3, ya solo con los tiempos de carga esta web es inadmisible, y cualquier jefe de proyecto web debería haber cortado manos al ver esto subido a producción, es más, cualquier desarrollador que trabajase para "nuestros mejores representantes" debería haber dado el 100%.

    ResponderEliminar
  28. Anónimo14/9/12

    Me parto... Sharepoint... Websphere... WTF??? Está hecho con el Word de Microsoft Office!!!! Esto lo habrá hecho el sobrino del bufón real (12 añitos + ó -) Asi, asi funcionan las adjudicaciones en toda la administración pública (por lo menos en lo que atañe al sector de informática y marketing/publicidad). No es nada nuevo. Hala ¡A disfrutar todos de nuestro dinero bien invertido!

    ResponderEliminar
  29. Anónimo14/9/12

    Está hecho con SharePoint 2010 (que es parte de la familia Office). Tampoco nos pasemos de listos...

    ResponderEliminar
  30. Anónimo14/9/12

    Se ve que eres todo un pr0 de la web publicando esto en un blogger prefabricado.

    ResponderEliminar
  31. La lastima de todo esto es que ocurre muchas veces.
    En agosto de 2011 publiqué una página donde le paso el test de validación (X)HTML y CSS a los webs de los 22 miembros de W3C España.
    Solo 7 pasan su propio test.

    Resultados del Test de validación (X)HTML del W3C para los miembros del W3C España

    ResponderEliminar
  32. Anónimo14/9/12

    El que dice que lo de XSS es una tontería no tiene ni puta idea.

    ResponderEliminar
  33. Anónimo14/9/12

    Supongo que ya habréis enviado esta "auditoría" a la Casa Real para que mejoren la página.

    Me parece de importqancia suma que allí sepan que el desarrollo informático es importante y que eso contribuye de forma significante a la imagen de lo que la Casa Real significa y en particular a su dimensión internacional.

    Si está hecho con dinero público, la crítica que haga el público es fundamental.

    Este estudio y otros similares pueden contribuir a mejorar.

    ResponderEliminar
  34. para los que crean que lo del xss es tontería...

    http://es.wikipedia.org/wiki/Cross-site_scripting

    el saber no tiene lugar

    ResponderEliminar
  35. Roberto14/9/12

    No se por qué os quejáis tanto. Es la mejor tarjeta de visita que podemos tener los españoles en el extranjero. Es una muestra de nuestra seriedad, nuestra capacidad técnica y nuestro buen hacer en genera. ¡Como en España, en ningún sitio! Vengan ustedes a hacer sus webses aquí que serán por lo menos igual de buenas que esta.

    ResponderEliminar
  36. Anónimo14/9/12

    Lo realmente grave es el comentario de más arriba que escribe GRABE.

    De los validadores para abajo, vale, es una vergüenza, y deberían auditar dónde se ha ido la pasta. De los validadores para arriba es puro talibanismo, y quedas como un gilipollas. Tú mismo.

    ResponderEliminar
  37. Anónimo14/9/12

    Luego el problema de los idiomas, por ejemplo si cambiamos a Galego pues hay partes de la web que está en español y otras en galego... Total no voy a mirar en otros idiomas suponiendo que pasa lo mismo.

    ResponderEliminar
  38. Anónimo14/9/12

    Además, como muy bien dicen por ahí, es hacer Ctrl-U en esta misma página y horrorizarse. Ah, no, que eso es todo culpa de Google, claro.

    El que tire la primera piedra.. que se la meta por el culo, por bocazas.

    ResponderEliminar
  39. Anónimo14/9/12

    yo de mayor quiero usar tecnologías MVC

    ResponderEliminar
  40. A todos esos valientes Anónimos que han sabido superar sus vergüenzas y dejarnos tan claros ejemplos de su educación y buenas formas, supongo que fruto de lo que sus padres no pudieron inculcarles, gracias por su impudor al mostrar sus carencias y enseñarnos lo bien que se saben la gramática parda.

    Por cierto, hay un post en el blog donde pedía se dijeran los fallos de este diseño. Pero ahí sería aportar algo y eso os debe causar nauseas. Es mejor ir de "valiente troll".

    Al resto, con independencia de que discrepen o coincidan con lo dicho en el post y que lo han manifestado con un mínimo de corrección, gracias.

    ResponderEliminar
  41. Es tan técnico que para un pobre inculto de la informática como yo esto suena a chino. Suena muy interesante pero ni papa, jajajaja. Un consejo. ¿Podrías crear una versión allanada de lo que explicas para los que no tenemos ni idea?. Gracias.

    ResponderEliminar
  42. Un vídeo con otro punto de vista de los problemas que tiene la web de la Casa Real: Errores web: La nueva web de la Casa Real (parte 1) y la URL: http://www.youtube.com/watch?v=spD10PX9F_Y

    ResponderEliminar
  43. Lo de que a 2012 no haya nada de responsive design o HTML5 tiene una explicación: según decían tardaron ¡2 años! en hacerla.

    Gran post :)

    ResponderEliminar

EsCss RSS del Blog RSSS Comentarios Humans.txt ᛯ Diseno por Kseso SiteMap