Cita: Estaría muy bien que mucha gente (y sobre todo los "notables" ), os animárais a dar vuestra opinión,
No se si tenga lo necesario para ser de los notables, pero aquí estoy de cualquier modo.
Bueno, espero no repetir lo que ya se dijo ya que no he leído todos los comentarios.
HTML
Ambos casos están organizados, aun que me gusta mas el de Calizzz. Lo encuentro más sencillo y fácil de leer. He analizado usando Firebug, por si alguien quisiera saberlo. Sin embargo si encuentro algunos problemas:
Aresillo
-Usas mucho <br />. De forma excesiva diría yo. No lo hagas, eso es basura que estás metiendo en tu código.
-Te falta espacio entre la diagonal y el elemento que estás cerrando, por ejemplo <img/> cuando debería ser <img /> Eso no te causa fallo en la validación, pero te puede confundir navegadores antiguos.
-Te sugiero que uses width y height en las imágenes. Muchos te dirán que eso va en contra de las normas por que son propiedades para controlar la presentación y eso debe hacerse con CSS, pero no lo son. Son propiedades que el navegador necesita saber para no causar ese efecto de movimiento mientras se carga la pagina que se ve en muchos sitios. Un acomodo y desacomodo total mientras se carga. Al usar width y height el navegador sabe el espacio que tiene que dejar y acomoda los elementos sin que estos se estén moviendo. De esa manera el usuario puede empezar a leer el contenido aun cuando las imágenes no se han cargado.
-El efecto lupa lo pudiste lograr usando solo una imagen y no un span con una imagen.
-El div con id="tags" no es necesario. Puedes lograr el mismo efecto sin ese div.
Calizzz
Tu código está muy limpio y eso me gusta. No he encontrado problemas con el código en si, pero si con la semántica, ya pasaremos a eso en un rato.
CSS Aresillo
-Haces buen uso de em y de las familias de puntos, eso es un punto a tu favor.
-Cometiste el error de usar imágenes como fondo para los menús. Eso te esta causando problemas en la forma en que se ven los elementos en ciertos navegadores.
-Te sugiero que trates de usar menos CSS. Tienes demasiado para lo que haces con el.
Calizz
-No estas usando una familia de fuentes y no me refiero a font-family, sino a una familia generica como serif, eso puede afectar la forma en que se ve tu web en distintos ordenadores aun usando el mismo navegador.
-Usas un width demasiado ancho para tus elementos contenedores, eso te está causando un molesto scroll horizontal. Intenta bajar el tamaño aun que sea uno 250px.
-Estas usando cm como medida en algunos elementos, eso te puede dar problemas dependiendo de la resolución y tamaño del monitor. cm es para medios impresos.
-Te recomiendo que uses shortland para los colores. Por ejemplo, #666 en lugar de #666666. Eso te ahorra algunos números y es mas fácil de leer.
Accesibilidad
Ambos usan acceskey, eso les suma un punto.
Aresillo
-tiene un punto extra por el uso de title y otro por el de alt.
-Cometiste el error de esconder el H1 de la cabecera. No tiene sentido que lo pongas si después lo vas a esconder como lo has hecho. Una forma un poco mas eficaz es desplazándolo usando por ejemplo text-indent. Pero aun así te puede causar problemas.
-Asegúrate de que tu web se vea bien aun cuando el usuario hace zoom 3 veces, mas de eso ya no hay problema, pero es sugerencia que la web se vea bien hasta los 3 zooms.
Calizzz
-El h1 en tu cabecera no se ve si las imágenes están desactivadas o inaccesibles.
-Categorías se pone por encima de frase del día cuando hace el tercer zoom. El mismo consejo que a Aresillo, asegúrate que se vea bien cuando menos con 3 zooms
-Te falta usar title, no es un gran problema, pero es mejor si lo usas. De esa forma puedes darle al usuario una mejor idea de hacia a donde lo dirige el enlace.
Diseño
En cuanto al diseño me inclino mas por el de Calizzz, el de Aresillo lo veo un poco desordenado y en algunas cosas, como el RSS, no mantiene el mismo estilo. Como que no se mantiene paralelo. Po otro lado el de Calizzz, aun que algo grande, es lipio y te invita más a leer el contenido. Ademas la cabecerá, aun que sin un elaborado logo como el de Aresillo, es atractiva y cumple su objetivo.
Semantica
Creo que ambos necesitan trabajar más en la semántica. Ni uno uso listas de definición que es lo que semanticamente se habría usado para las preguntas y respuestas. Traten de usar ids y clases mas descriptivos y apropiados, que describan el contenido y no la presentación del elemento al que representan.
Sin duda la competencia no parece de novatos. Ambos han hecho un gran trabajo y creo que ambos merecen el punto. Sin embargo, el hecho de que la web de calizzz se tenga que arreglar para poder ser vista correctamente devido a su excesivo tamaño no me deja otra opción y como hay solo un punto, me veo obligado a dárselo a Aresillo.
Aresillo: 5
Caliz: 0