Casareal.es Un estudio de lo que no debería ser ni publicado ni publicitado... tanto 11.9.12
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
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:
- Uso de CSS para la presentación de la información
- Texto alternativo en las imágenes
- Uso de los estándares del W3C
- 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
EnTwitter
En Menéame (portada)
Kseso
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
Si no pones las "www" no va: http://casareal.es
ResponderEliminarBrutal.
Lo realmente grabe...
ResponderEliminar¿En cinta o en DVD?
Gracias, Anónimo #2
ResponderEliminarCorregido. Si sólo encontraste ese error, no me salió tan mal esta vez ;-)
Y según el ABC han tardado 18 meses (http://www.abc.es/20120910/espana/abci-nueva-casa-real-201209101050.html)
ResponderEliminaroye pero es muy bonita, jajaja
ResponderEliminarpero no me extraña está hecha con asp.net
Este comentario ha sido eliminado por un administrador del blog.
ResponderEliminarBueno si el código asusta, sólo decir que el diseño esta "inspirado" (copiando muchos elementos) en la whitehouse.gov
ResponderEliminarPues si eso lo sabe hasta un chimpancé, ¿qué otra especie diseño la de la casa real?
ResponderEliminarDesarrolladores y arquitectos con semejante incapacidas dice mucho de nuestra competitividad informática (pero claro todo son charcuteras).
ResponderEliminarSeñ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?
Este comentario ha sido eliminado por un administrador del blog.
ResponderEliminarPués según el Total Validator, a esta misma página tampoco le falta algún error:
ResponderEliminarPage 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)
Relajate Camaro que nadie te tiene en cuenta lo de las 57 etiquetas de script, melón.
ResponderEliminarEn casa del herrero...
ResponderEliminarhttp://validator.w3.org/check?uri=http%3A%2F%2Fksesocss.blogspot.com%2F2012%2F09%2Fcasareal.html&charset=%28detect+automatically%29&doctype=Inline&group=0
Camaro, vete de aqui...
ResponderEliminarNo 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
Cuidado!: reunion de friki-trolles en comentarios!!
ResponderEliminarPues 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.
ResponderEliminar¿Cuánto ha costado esto? la info que me ha llegado, que por desgracia no la puedo confirmar, es de 235.000 euros.
Camaro, no te indignes hombre! Pase lo del código... pero los tres iconos de validación... ains!
ResponderEliminarLa web está hecha en SharePoint. Lease el comentario de anónimo al respecto.
ResponderEliminarComo 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.
ResponderEliminarHay 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.
"349.08KB (84%) of CSS is not used by the current page."
ResponderEliminarDos 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.
Gracias a todos por la visita y los comentarios.
ResponderEliminarCamaro, 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.
Está muy bien criticar, y tal....pero podías aplicar todos esos conocimientos en tu blog.
ResponderEliminarLo que viene siendo "Predicar con el ejemplo"
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.
ResponderEliminarDicho 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.
Hay muchos fallos más. El 99% de resultados en google da errores 404
ResponderEliminarhttps://www.google.es/webhp#q=site:casareal.es
los errores no tienen página personalizada, y un largo etc..
Qué mal gusto tiene la gente por trollear y por criticar tonterías en vez de prestar atención a la importancia del mensaje.
ResponderEliminarA 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.
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.
ResponderEliminarGracias por poner en evidencia el mal hacer de la realeza.
No os quejéis de que critiquemos que les estamos haciendo trabajo de auditoría ¡y gratis!
ResponderEliminarQue 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%.
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!
ResponderEliminarEstá hecho con SharePoint 2010 (que es parte de la familia Office). Tampoco nos pasemos de listos...
ResponderEliminarSe ve que eres todo un pr0 de la web publicando esto en un blogger prefabricado.
ResponderEliminarLa lastima de todo esto es que ocurre muchas veces.
ResponderEliminarEn 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
El que dice que lo de XSS es una tontería no tiene ni puta idea.
ResponderEliminarSupongo que ya habréis enviado esta "auditoría" a la Casa Real para que mejoren la página.
ResponderEliminarMe 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.
para los que crean que lo del xss es tontería...
ResponderEliminarhttp://es.wikipedia.org/wiki/Cross-site_scripting
el saber no tiene lugar
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.
ResponderEliminarLo realmente grave es el comentario de más arriba que escribe GRABE.
ResponderEliminarDe 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.
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.
ResponderEliminarAdemá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.
ResponderEliminarEl que tire la primera piedra.. que se la meta por el culo, por bocazas.
yo de mayor quiero usar tecnologías MVC
ResponderEliminarA 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.
ResponderEliminarPor 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.
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.
ResponderEliminarUn 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
ResponderEliminarLo 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.
ResponderEliminarGran post :)