Bien, como son muchos trabajos a analizar y justamente este martes he comenzado un trabajo bastante grande, voy a empezar por poner un somero análisis de los 5 primeros trabajos de la lista. Está claro que mucho se pasará por alto, pero es que son muchos y muchas cosas a apreciar.
Comenzamos. Que nadie se lo tome a pecho porque entre tantos trabajos seguro que nos dejaremos muchas cosas de buenas y de malas que resaltar, además de que esta es una situación un tanto comprometida, vamos, como para hacer amigos
Aresillo:
Una imagen limpia y clara, bien comercial. No me gusta nada que se muevan cosas en la pantalla sin mi interacción (de hecho está bastante desaconsejado), como el gif comercial.
El diseño es estático y en una resolución menor de 1.000px de ancho aparece el scroll horizontal. Con dos aumentos de zoom (en FF) se descuadra. No me gusta que los gráficos de fondo de los menús sean estáticos, porque al crecer el tamaño de letra los fondos no les acompañan, descuadrándose de inmediato hasta salirse enseguida.
El logo y la cabecera son muy agradables, pero tienen un problema importante a mi juicio: si se usan imágenes relevantes como fondo, el problema es que al faltar las imágenes no aparecerá un texto alternativo, y teniendo en cuenta que el h1 ha sido ocultado y que el propio nombre de la empresa queda representado en la imagen de cabecera, al desactivar las imágenes nos quedamos sin nombre y sin h1.
En resumen, a mi entender no hay que usar imágenes relevantes como fondo, porque no tienen texto alternativo ni posibilidad de descripción larga.
Se ha conseguido un buen código compatible y se visualiza a la perfección en IE sin hacks de ningún tipo.
Se ha respetado la navegación con teclado resaltando los elementos activos. Se proporciona un método para saltar grupos de enlaces, pero sólo sería útil para navegadores de texto, ya que no es visible, de manera que para navegación con teclado (cuando es más necesario) no aparece.
El código CSS limpio y ordenado. Alguna pequeña cosa innecesaria como repetir el ancho de la cabecera o por ejemplo, teniendo un selector como #cajaestilos ul, siempre es mejor marcar en el siguiente la ruta por claridad (#cajaestilos ul li en lugar de #cajaestilos li), sólo por una cuestión de orden, no imprescindible.
El HTML parece bien correcto, claro y bien estructurado, haciendo uso en general de los elementos adecuados, echando de menos algunos elementos header (h2, h3, etc.) en lugar de divs para los títulos de secciones. Creo que sobra el penúltimo div vacío de corte (<div class="corte"></div>), que parece estar por olvido o precaución.
Se ha pensado bastante en la accesibilidad y se han aplicado cosas, pero aunque no hay errores automáticos de nivel AAA, hay más errores que aciertos, en cuanto a que hay elementos en movimiento, el texto no redimensiona correctamente, no hay descripciones largas, las teclas de acceso directo en principio están ocultas y no se nos informa explícitamente o están visibles en el primer acceso, los saltos de grupos de enlaces están ocultos, no se adapta en absoluto a la ventana del navegador, no hay nombre de la empresa o slogan a falta de imágenes, el contraste de color del texto es muy muy justo para gente con problemas de visión, etc.
En resumen una página bonita y profesional, con errores subsanables.
P.D.: el diseño (que no es mi apartado) es bonito y muy poco arriesgado. No me gustan nada las fotos de "catálogo" de diseño web (señorita con micrófono).
Willyfc
Diseño dinámico adaptable a la resolución, pero con un par de serios problemas: no hay un tamaño mínimo, por lo que nunca deja de reducir y colapsa todo, y por otro lado, el texto blanco del menú hace que al salirse de su sitio por reducción de la ventana quede sobre el fondo claro, por lo que casi desaparece (el primer carácter ya en 800 salta).
A mi entender no parece una agencia de diseño web, ni convencional ni todo lo contrario.
Los elementos del menú van acompañados de un número pero no sabemos qué significa (lo sabemos, pero mucha gente nunca lo sabrá).
Se visualiza perfectamente en IE6 así que el código parece bien compatible.
La visibilidad de dónde se encuentra uno navegando con el teclado es escasa. La imagen de cabecera tiene un texto alternativo igual al título, por lo que va bien sin imágenes.
Desactivando la hoja de estilo se conserva la estructura ordenada, así que el flujo del documento parece adecuado. Es bastante extraño que el primer elemento h1 sea el "contáctenos" de la dirección, y luego otro h1 del título del bloque de texto. Se desaprovecha el sentido de la jerarquía de los elementos header a mi entender.
Se tiende a no usar estilos de letra "serif" en la web porque dificultan la lectura, así como al contrario, en papel la hace más cómoda. En este caso el serif y el escaso tamaño inicial son un punto en contra.
La CSS está bien estructurada. Hace uso de cosas como "min-height:100%;height: auto!important;height:100%;" para conseguir un alto de toda la pantalla (buen recurso sin ser un hack), aunque los diferentes indentados dificultan un poco su lectura.
Nunca había visto la fuente de letra "spinwerad", y al menos en mi sistema no funciona, porque no la tengo. Alguna posible pequeña mejora pero en general se ha tendido a agrupar ahorrando código.
En definitiva un trabajo digno, en el que algunos detalles de indefinición malogran un poco, y en el que creo que no se ha pensado en exceso en la accesibilidad.
DoPeY-BBS
Da la sensación de que una vez hecha la cabecera y el menú no hubiera habido tiempo de más y se hubiera entregado con el resto casi sin hacer.
Diseño estático que no se adapta al navegador y con menos de 1.000px ya saca el scroll horizontal. La cabecera y el menú ocupan más de media pantalla de alto, lo que deja poco espacio para el contenido y obliga al scroll sin haber mucha cosa.
Va bien en IE6 sin problema. Al agrandar el texto (CTRL+) los elementos del menú montan sobre el texto que no se desplaza, debido a que el menú tiene un alto fijo y no empuja al texto hacia abajo.
No hay muchas ayudas a la accesibilidad ni la navegación, careciendo de teclas de acceso directo, saltos de bloques, etc.
La imagen de la cabecera está insertada y cuenta con texto alternativo, aunque no con una clara descripción (longdesc o un alt más esplícito).
El diseño es tan simple que al desactivar la CSS se sigue viendo perfectamente ordenado.
El HTML es limpio y sencillo, y está comentado, pero no hay elementos header que den lógica a la estructura jerárquica.
El código CSS es claro y sencillo, está bien aprovechado y agrupado, con dos pequeños detalles: suele ser habitual agrupar al principio los elementos genéricos (aunque ni mucho menos obligatorio) con "p", h1, etc.. También es preferible seguir una misma pauta, y cuando se referencia un selector con su ruta tipo "div#menu li a {...", es preferible que el resto también lo hagan, y en lugar de div#menu a:link, seguir con div#menu li a:link. Esto es sólo claridad a la hora de comprender rápidamente cada selector.
En conclusión, un trabajo excesivamente sencillo y poco elaborado, aunque limpio y muy correcto para alguien algo más principiante que otros, y sin grandes errores que resaltar.
.
. Aumentados por la imcompatibilidad con vi$ta. De hecho, creo que mi página debería haber sido declarada "no conforme" a las especificaciones de la competencia. Por eso y por alguna licencia que me tomé.
