Voto de Alvlin
Aquí va mi análisis, como siempre basado completamente en la subjetividad. Lo siento, pero la objetividad es algo que sé que no voy a alcanzar.
Quiero advertir que mis comentarios buscan los puntos débiles, más que los fuertes. Que esto no desanime a nadie, todos los presentados son muy buenos trabajos. Que nadie se sienta atacado, ni crea por un segundo que desmerezco su trabajo.
Probé los sitios con Opera 9.52, Firefox 2 (Gecko) y Konqueror (WebKit, Safari y Chrome). Tuve toda la intención de probar también Internet Explorer, principalmente porque en el trabajo del grupo Nadie, no veía la "n" de "noticias".
Mala fue la impresión cuando vi que tampoco se ve en IE8.
A efectos de mi consideración para el puntaje, los equipos Nicks y novatos tienen 0, de entrada.
Nicks queda eliminado dado que utilizó código javascript tomado de internet, y eliminando la licencia de uso. Es probable que lo hayan copiado ya sin licencia, pero de todas formas es un código "prefabricado".
Simplemente revisen por acá:
http://www.gamarod.com.ar/. La función para detectar el navegador es la misma, y cada código tiene su mini-licencia de uso.
novatos queda eliminado porque uno de los requisitos era que el código fuese válido, y en su trabajo hay errores en la página de contacto.
Lo siento chicos, hicieron un buen trabajo pero no puedo considerarlos para el premio. Igual no se preocupen que soy solamente 1 de los que votan. De todas formas voy a dar un comentario sobre su trabajo en cada categoría, porque lo importante siempre es participar y aprender.
Análisis 1. La estética (visión general)
Mejor conocido como "el punto en el que divago", dada mi absoluta torpeza para el diseño.
o Nadie: Los colores del menú no contrastan bien con el texto, dificultando la lectura.
Solamente Firefox mostró el menú como corresponde y la palabra "noticias" completa. Incluso IE8 cayó en el mismo problema. El tipo de letra queda bien en el menú superior y en el lateral, pero no en el texto. Debería haber más juego con las tipografías. Me gustó mucho el trabajo con el logo.
El diseño se descuadra al aumentar el tamaño de la letra, lo cual es necesario en pantallas como la mía. El diseño no es líquido, esto no es necesariamente un requerimiento pero siempre se agradece algo de flexibilidad.
Da la impresión de tener más trabajo en la cabecera que en el contenido, la cabecera parece desproporcionada.
o Nicks: No me agrada el uso de páginas de "introducción". Creo que únicamente me obligan a hacer un clic más. Y lo veo inútil al considerar el buen diseño que hay detrás de esa página de presentación.
Simple y efectivo. Solamente le agregaría algo más de color a la sección de noticias, el resto me gustó mucho. El sitio escala muy bien al reducir el tamaño de la ventana.
o dBlers: La estética oscura les quedó muy bien.
Pienso que el texto "menú" quizás no debería ir (queda claro que es un menú).
Buen uso de la interactividad.
Parece un diseño equilibrado, con buen uso de los espacios. Parece lo suficientemente líquido, no se descuadra al redimensionar la ventana. Muy buen trabajo, un diseño bien logrado.
o novatos: Un sitio de apariencia seria y profesional, aunque la cabecera me habría gustado un poco más pequeña.
No me gustó el estilo de los recuadros, y al ser un elemento que se repite tanto, es un poco molesto.
El efecto de la botonera al pasar el ratón por encima no me parece adecuado. Más que activarse, parece que se desactiva, al usar un tono similar al que las interfaces de usuario indican que un elemento está desactivado (tono grisáceo). Sí me gusta el color elegido para la página activa. Se nota que tiene mucho trabajo, pero hay algo en el aspecto que no me convence. Me gustaría saber lo suficiente de diseño como para identificar qué es.
Puntuación parcial: Nadie 0 - dBlers 1 2. El código HTML
A partir de ahora sí me meto con seguridad...
o Nadie: Faltó enlace al validador.
Al validar, sale una advertencia con respecto a la codificación de caracteres. Quizás se trate de un problema del servidor (que manda por defecto la codificación ISO) pero es algo a considerar.
El código sufre una cierta divitis, pero considerando la complejidad del diseño en realidad es correcto, y además bien sangrado.
Se divide la página en varias cajas usando la etiqueta div, pero hace falta una estructura semántica en el contenido.
Hay un uso excesivo de etiquetas div en el formulario de contacto.
Se echan en falta algunas etiquetas META comunes, pero esto no es necesariamente malo.
o Nicks: Usan una gran cantidad de dives vacíos para lograr los efectos gráficos.
Hay saltos de línea para generar margen antes y después de divisiones horizontales (etiquetas hr, que de por sí no se deberían usar).
Como el de Nadie, sufre de divitis, necesita algo de limpieza.
Hace un buen uso de etiquetas LINK para demostrar los vínculos entre las páginas
Se echan en falta algunas etiquetas META comunes, pero esto no es necesariamente malo.
Un código HTML bien sangrado, aunque complicado de leer debido a la divitis.
o dBlers: No hay sangría en el código.
Usa la nunca bien vista entidad para separar texto.
El texto "inhabilitado" es candidato perfecto a ser agregado mediante :after, o mediante Javascript.
Se usan etiquetas br para generar margen entre distintos div
Usan muchos div, sin embargo hay elementos claramente decorativos añadidos mediante etiquetas img. ¡Y con títulos que indican que es meramente decorativo! No parece una buena decisión
A pesar de todo, es el trabajo que hace uso más correcto de las etiquetas de encabezados (aunque se saltea h1)
o novatos: Código bien estructurado, pero con la peor divitis entre los 4 trabajos. Una cantidad de elementos div absolutamente excesiva.
El sangrado está correcto, y el uso de las etiquetas META está muy bien.
Muchachos: denle más trabajo al CSS y menos al HTML.
Puntuación parcial: Nadie 1 - dBlers 1 3. El código CSS o Nadie: Correcto, bien comentado. Se podría haber optimizado un poco al agrupar algunas declaraciones.
Se lleva el punto.
o Nicks y dBlers: Está bien ahorrar en ancho de banda, pero creo que al tratarse de una competencia donde el CSS será valorado, es mejor dar un código fácil de leer.
o novatos: Un código correcto, aunque algunos comentarios serían de gran ayuda.
Puntuación parcial: Nadie 2 - dBlers 1 4. Javascript o Nadie - novatos: No usa javascript. Lo cual no es malo, pero es un punto a valorar, así que hay que darle el reconocimiento merecido a quien sí lo usa.
Y además el formulario de contacto era el lugar ideal para implementar una validación con javascript.
o Nicks: Muchachos, aquí el motivo de su descalificación (por mi parte).
Se pedía que no se usaran prefabricados, ustedes tomaron un script prehecho (al menos la función bw_check) y no solamente la usaron sino que violaron la licencia del código.
Como programador, no puedo dejarlo pasar. Lo siento pero no pueden ganar mi voto. Por supuesto que tienen derecho a réplica y sin ninguna clase de soberbia me retractaré si me demuestran la originalidad del código que usaron.
o dBlers: El código no es invasivo, sin embargo hay elementos (como el enlace de "cerrar") que sin javascript se transforman en elementos sin sentido ni función alguna. Hay algunas cosas a mejorar en el código, algunas que puedo ver a simple vista:
Si se hacen varias modificaciones al estilo de un elemento, es más rápido ocultar el elemento primero, aplicar los cambios, y volver a mostrarlo. Le evitan al navegador tener que redibujar la página en cada cambio.
Al usar setTimeout/setInterval, no pasen el primer argumento entre comillas. Equivale a usar un eval(), lo cual tiene un peor rendimiento que simplemente pasar el objeto función.
Si bien Javascript agrega un ; cuando falta al final de una línea, el confiar en esto puede llevar a errores difíciles de notar. Asegúrense de siempre añadir un ; al final de una sentencia.
Puntuación parcial: Nadie 2 - dBlers 2