Hola gente
Pasábame por aquí y me encontré con el trabajo expuesto por Mikmoro, y aunque no he participado, pensé en dejar algunos comentarios, a fin de cuentas, aunque sea una competencia, cada página es indpendiente y merece sus comentarios.
:)
Así que vayamos por partes:
Trataré de no extenderme mucho para no aburrir.
La estética (visión general):
Está bastante bien, clara, concisa, impactante con el estallido y balanceada en color con el título, o parte de el, el cual destaca más cuanto más a la izquierda.
Se lee bien, incluido el texto sobre el estallido, lo cual hubiera podido ser un fallo típico. Hay algunos errorcillos en el texto, pero son nimiedades que no demeritan el trabajo final.
El recuadro detallando la definición de los items de la izquierda está muy bien, muy claro y elegante. Aunque en Opera 9.27 Linux, no funcionan bien, hay que mantener el clic sobre el item para que el recuadro se mantenga. En explorer 6 en LInux funciona bien al igual que en Explorer 5.5 en Linux, aunque en este caso, la barra de vínculos inferior se mueve a la izquierda, pero este navegador no es ya punto de comparación.
Veo que el diseño está pensado para 1024 o superior. En este punto agregaría que aunque es entendible el
scroll vertical ya que lo único que queda fuera es la barra inferior, hay un poco de
scroll horizontal y eso si es un puntillo a corregir.
El HTML:
Es válido.
A mi me gusta con mayor tabulación para leerlo con más calma, pero eso es una minucia y un detalle personal.
No es grande para la cantidad de texto que hay, así que la relación etiquetas texto es razonable.
Las etiquetas usadas son correctas.
En el caso de las imágenes, es recomendable poner las dimensiones en el código para facilitar el trabajo del navegador.
El CSS:
Tiene un tamaño razonable.
Algunos nombres de clases podrían ser cambiados, los mensiono más abajo.
Buen uso de las opciones abreviadas y muy buen agrupamiento de elementos comunes.
El diseño es rígido, controlado al
pixel, obviamente es lo que querías. Se nota no solo en el uso de medidas por todos lados, si no por el uso de algunos
!important que hace modificaciones mínimas, pero visibles. ;)
Buen ahorro de espacio al eliminar las tabulaciones iniciales, se lee peor, pero ahorras ancho de banda.
La semántica del código:
Aquí encontramos unos cuantos fallos, a saber:
EL
h1 está perfecto, pero el
h2 deberían ser los títulos de las opciones del menú, o al menos ser
h3. ¿Por qué?. Pues porque los títulos deben reflejar los contenidos y en este caso, las secciones del menú son eso mismo, contenidos. De hecho, los muestras como títulos, así que lo más lógico es darles ese mismo atributo semánticamente.
El menú, se llama menú, sin embargo, solo funciona como menú, pero es el contenido principal de la página, es donde expones los puntos y si no interactuamos más con la página, son el único contenido.
En mi opinión, la relación entre el contenido y la pregunta planteada, no fue abordada salvo en el subpunto de los huracanes.
La clase subtítulo tampoco es un subtítulo, es el texto que vemos.
Las demás clases si estarían bien.
Accesibilidad:
No es AAA, pero está muy cerca.
El efecto de sombra, hace que el la pregunta que planteas se lea dos veces.
La primera cosa que vemos al usar un lector de voz o un navegador de texto, es el vínculo de "versión sin css". Esto no resulta muy útil en estos casos ya que no se está usando la css. Sin embargo otros navegadores normales pero con opciones de accesibilidad lo muestran perfectamente, es decir, ocultan el vínculo.
No hay espacio entre las imágenes y el título de las secciones, resultando en palabras como "huracánHuracanes" o "incendioIncendios", pero es un detalle menor, aun es entendible.
El mayor problema lo tenemos al ser todo el texto un vínculo. cuando queremos ver los vínculos de la página, se vuelve a leer todo entero. Si usamos navegadores de texto, se resalta todo el texto y si tratamos de seguir el vínculo, no se llega a ninguna parte ya que es un truco usado para mostrar los recuadros de información adicional. Por lo tanto, no todo el contenido está disponible.
El texto alternativo de los vínculos muestra la tecla de acceso, lo cual es razonable.
La pregunta que planteas en la página se ve en navegadores de texto y se escucha en lectores de pantalla. Sin embargo, no se ve en algunos navegadores modernos al usar las opciones de accesibilidad.
Los títulos de los vínculos del pie de página están bien, aportan suficiente información para no ser seguidos a menos que quieras.
No se aporta metainformación
La navegación con teclado es lógica y ordenada.
El contraste de los colores es adecuado para la lectura
Usabilidad:
Bueno, siendo una página tan reducida, la mayoría de los elementos de usabilidad no aplican o terminan siendo muy similares a la accesibilidad. Como la accesibilidad de la página es buena, la usabilidad es buena.
Reducida en navegadores no estandar, pero no se pierde nada sustancial. Claro que eso no lo sabe el que no lo ha visto. ;)
Imágenes:
Son pequeñas en peso y en dimensiones, pero con calidad razonable, la carga es rápida, aunque algunos navegadores demoran la presentación del contenido debido a que no están definidas sus dimensiones en el HTML.
Podría mejorarse la carga, pero no habría diferencias notorias para el usuario.
No se usan en exceso si no como parte del contenido y como complemento de la información, lo cual es muy importante. Por otro lado, la imagen de fondo busca crear impacto y lo logra, dando una clara representación del título de la página.
Conclusión:
Seguro que me he dejado muchas cosas en el tintero, pero bueno, para otra vez será.
La página está chévere, es clara, elegante y fácil de leer, buenos efectos visuales conseguidos con un uso balanceado de tecnología y peso de los elementos, nada desborda mucho al resto, tal vez un poco la explosión en si, pero es la idea, lograr impacto. El tiempo de carga es rápido.
El balance es bueno.
Felicidad