Votaciones Duelo Aresillo vs. CaLiZzZ

[Aresillo]

Yo no creo que los tenga enamorados...!!
Creo que la cosas hubiera estado mucho más reñida si no hubiese tenido problemas con el IE6 y estuviera diseñada para 1024, con esos dos detalles... la mitad de los votos hubieran sido tuyos...!! Mi enhorabuena también por lo que te toca...!!

Aresillo!!

[Calizman]

Pienso que me hubiera ganado el amor del publico.. si hubiera maquetado en % y no en px... ahi si me gano al mundo entero! xD

pero hice lo mejor que pude... y ten por seguro que en la revancha me desquito! xD

[buzu]

Me muero por ver la revancha. A ver que tanto mejoran con lo que se les ha comentado. Sin duda que va a estas muy buena. No dejen de avisarme.

PD. Estoy abierto a retos.

[Aresillo]

Hasta cuando seguimos con la votación??
Nos falta media de Kseso? y la del árbitro...??


Aresillo!!

[AlvaroG]

Yo quería opinar pero no he tenido tiempo... pido nomás hasta mañana :)

[DragonX]

Amigos, pido mil disculpas pero entre que me enferme de anguinas y estoy lleno de trabajo no puedo ni pensar que ya estoy perdiendo tiempo

Dejo el análisis pendiente ya que realmente no tengo mucho tiempo. En resumen ambas me parecieron muy bien, a nivel código la de Caliz me parece mejor, ya que la de aresillo presenta unos errores y esta un poco más desprolijo.

<li class="foro"><a accesskey="f" href="">Foro</a></li>
<label for="cajabusqueda" accesskey="s"></label>
<label for="imgbusq" accesskey="i"></label>

Al href le falta el valor y los dos labels están vacios.

A nivel diseño me pareció mucho más jugado el de Aresillo que el de Caliz, y como yo soy diseñador y para mi este punto es fundamental.....

Aresillo: 6
Caliz: 0

Un abrazo a todos y mil disculpas por lo resumido de mi "analisis" pero no queria dejar de aportar.

un abrazo a todos!
DX

p.d. mik todavía no me olvidé de lo que te debo, pero realmente estoy muy atereado....

[kseso?]

Iniciado por Aresillo

Hasta cuando seguimos con la votación??
Nos falta media de Kseso? y la del árbitro...??
Aresillo!!

¿Medio? Ya pe parecía a mí que me echaba algo en falta.

Sobre la propuesta de CaliZzZ:
A nivel de código ya han opinado muy acertádamente, así que unas reflexiones sobre la presentación:

Encuentro la imagen de cabecera excesivamente grande, con una tipo que no aporta ni veo muy afín con el tema (tecnología punta, deporte, velocidad, etc), y a los colores predominantes no los encuentro en armonía con el cuerpo de la página.

Sin embargo me gustó la sensación visual del resto. Cierto recuerdo a la imagen "Wiki". Frescura y limpieza. Con colores que no agreden ni cansan. Eché en falta una sutil diferencia entre sidebar izquierdo y cuerpo central.

Grato ver que logras la maquetación a base de css, tanto los bordes, como líneas de puntos, cajas, etc, manteniendo la armonía con el resto de elementos (excepción hecha del header).

En definitiva, aunque podrías haber añadido algún elemento a mayores para completar la presentación (pie de página, alguna pequeña imagen sobre el tema), has cumplido con el encargo del "cliente", sin alardes ni elementos discordantes, consiguiendo una página límpia que invita a permanecer en ella. Y todo ello sin ser tu fuerte el diseño visual.

Así que mi voto es para ti, pues aunque con un uso de menores recursos y elementos que Aresillo, tu página no muestra errores tan notables como la suya (desfase entre imagen de fondo y su menú, error en la fecha (sigue marcando día 24)

Así que:
Aresillo: 6
CaLiZzZ: 1

Una vez más, mi más sincera enhorabuena a los 2 por la valentía y ejemplo dado.
(P.D.: como no se mencionó Opera, no tengo en cuenta el descuadre parecido a Chrome en la página de CaliZzZ

[Calizman]

Wuju!!! sabia que alguien votaria por mi! jaja... gracias por la critica kseso?! y gracias por el voto... como dijeron, no se hasta cuando terminara la votacion, pero creo que ya no podre llegar a alcanzar a Areillo...

Como dije anteriormente... en la revancha me desquito! xD

Gracias por el voto kseso? y esperemos que los siguientes votadores me ayuden a alcanzar a Aresillo...

[buzu]

mientras el concurso no se cierre aun hay esperanza.

[AlvaroG]

Leyendo los comentarios anteriores creo que no quedó ningún punto sin cubrir. Sin embargo quiero dejar algún comentario para cada punto.

El código HTML es limpio y fácil de leer en ambos casos, el de CaliZzZ se ve más prolijo pero eso es un efecto directo de lo simple del diseño, comparado con el de Aresillo.

En los CSS en ambos casos se echa de menos algún salto de línea entre las secciones y algún comentario, parece todo muy junto. En el caso de CaliZzZ falta definir fuentes genéricas y como comentaba webosiris en un mensaje anterior, podría haberse hecho uso de las propiedades abreviadas en varios casos. No es un requisito, pero redunda en un archivo más sencillo, dado que se puede ajustar varias propiedades en el mismo lugar A veces cuando se usan las propiedades "largas" no quedan contiguas y luego es difícil encontrarlas.

En cuanto a accesibilidad, cualquiera de los dos trabajos se puede utilizar perfectamente desactivando CSS, aunque es ahí cuando se echa en falta el correcto marcado del HTML. No se ve una jerarquía en el texto, solamente en los títulos. No quiero repetir lo que se comentó antes, pero no veo que se haya hecho un uso correcto de las etiquetas de encabezados y de las listas.
En el trabajo de Aresillo la cabecera no existe si se deshabilitan las imágenes, en el de CaliZzZ se sigue viendo el título pero el color gris claro no ayuda en nada.

Diseño: Me gusta más el de CaliZzZ, aunque le habría agregado algo más de juego con la tipografía, tanto en colores como en tipos de letra. El de Aresillo sin duda tiene más trabajo encima, pero no se ve como una unidad. Tampoco resulta muy agradable el ya comentado efecto en el menú horizontal.
CaliZzZ: ¡cuidado la próxima vez con el ancho de la página!

En cuanto a la semántica, ya se dieron comentarios con los que coincido plenamente.

En resumen:
Ambos trabajos tienen errores que son subsanables con poco esfuerzo. Visualmente son agradables, el código es limpio, y creo que lo que les falta es el paso siguiente: la semántica, la accesibilidad y la usabilidad.
Felicitaciones a ambos.

Quienes hayan leído comentarios míos en otros juegos saben que me gustan los
diseños sencillos y efectivos. Eso, sumado a que ambos cometieron errores del mismo nivel, hace que mi voto vaya para CaliZzZ.

Una recomendación para el futuro:
Lean las advertencias del validador de CSS y de los validadore de accesibilidad. Ahí están recomendados varios puntos que se están considerando acá: el uso de fuentes genéricas en el CSS, el no uso de medidas absolutas, el uso de encabezados correctos, y demás.

Saludos

Aresillo: 6
CaLiZzZ: 2

[Calizman]

Wuju! gracias por el voto Alvlin! de verdad me alientan los comentarios asi y aun mas los votos! gracias por considerar mi diseño y por tu voto! xD

[Aresillo]

Planteo mis dudas, sobre los cambios que me habéis ido proponiendo a lo largo de esta intensa valoración:

Kseso?:

Iniciado por kseso?

Así mismo, la imagen de estos <li> (arrow.gif) en los que solo ocupan una línea queda recortada en su parte inferior.

Yo no la veo así, pregunto con que navegador estás viendolo o cómo podría arreglar esto?

Iniciado por kseso?

El efecto hover de las imágenes en "publicidad" se sobrepone en parte a la inferior.

Te refieres a la ímagen de publicidad inferior o a la siguiente caja (la de los tags)? (Esto mismo comentaba Webosiris)

Buzu

Iniciado por buzu

-Te sugiero que trates de usar menos CSS. Tienes demasiado para lo que haces con el.

¿Cómo puedo sintetizarlo?

Iniciado por buzu

-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.

El sentido que le doy, es que cuando se deshabilita el css, queda el header...¿Por qué es un error?

Aparte de esto que me falta, he mejorado todo lo demás que habéis aportado(<br/>, <hX>,...) y quedo pendiente de un menú competente y el rediseño para 980px en vez de 1000 como comentaba Webosiris...


Gracias a todos...

Aresillo!!
PD: A ver si Kseso y Buzu pueden echarme una mano con estas dudas...

EDITO: el menú y el tamaño de 980px propuesto por Webosiris... ya lo tengo listo...

[sanchy]

dudita =P como paso a la siguiente linea con CSS sin usar <br /> ? :x

[Aresillo]

Fijate en el css de CaliZzZ y tendrás la respuesta...

Aresillo!!

[AlvaroG]

Iniciado por sanchy

dudita =P como paso a la siguiente linea con CSS sin usar <br /> ? :x

Si necesitás pasar a la siguiente línea de texto, no hay problema en usar br, que para eso está.
Lo que acá se criticó fue el uso de br para generar espacio entre bloques, cosa que es trabajo de CSS mediante el uso de margin-bottom o margin-top (según el caso)

Saludos.

[Calizman]

yo la duda que tengo es... de que tamaño hago la imagen del header? o como hacer un header con imagen!? pues me comentaron que la imagen que puse era muy grande!

GRacias

[Mikmoro]

Bueno, lo cierto es que ya se han dicho muchas de las cosas que podría decir en mi análisis, que he dejado para el final para como árbitro, no influir en las votaciones.
Procuraré no ser muy redundante, aunque habrá alguna cosa repetida.

Comienzo con unas cuantas cosas para los dos, porque se repiten en ambos trabajos:

- Los accesskey, aunque vienen muy bien para superar la validación de accesibilidad, no tienen ninguna utilidad si no se informa de alguna manera de su existencia. De la misma manera, hay que tener cuidado al elegir las teclas, porque muchas podrían coincidir con comandos del propio navegador y por tanto quedarían anuladas. Es preferible usar los números de 0 al 9 (como sí ha hecho CaLiZzZ).

- Con los headers, debemos pensar como la estructura de un libro:

título del libro: h1
capítulos: h2
secciones: h3
subsecciones: h4, etc.

Nunca pondrías una subsección sin estar dentro de un capítulo (en un libro no tiene sentido). Debemos procurar mantener ese concepto de anidamiento y jerarquía (anidamiento no de etiquetas, pero sí de concepto, supongo que se entiende).

- Debemos usar los elementos de párrafo para separarlos, pero en las nuevas líneas sin ser punto y aparte no creo que haya ningún problema en usar el <br/> (como justo acabo de ver que ha aclarado alvlin).

- Generalmente usando el charset ISO-8859-1 y guardando el archivo como ANSI no necesitamos usar las entidades html, pudiendo poner tildes o eñes sin problema.

- Efectivamente como se ha dicho, si usamos el concepto de anidamiento nos podemos ahorrar muchas clases, porque poner la misma clase a todos los span dentro de p dentro de un div concreto, se soluciona mucho más fácil con algo como #imgblog p span {...}, en e caso de Aresillo, o #kers div {...} y #kers p {...} en el de CaLiZzZ.

- Me parece correcta la estructura del flujo de que primero salga el menú, después el contenido y luego los accesorios.

- Debería proporcionarse una manera de saltarse el menú e ir al contenido (con un enlace interno). Se pone un primer elemento del menú que dice "saltar menú" o "saltar al contenido", que a veces se oculta (aunque no es muy buena práctica), en el que se pone un enlace interno (href="#id"), al ID del bloque principal del contenido. Así, en un navegador de texto o en la navegación con teclado podemos saltar todo el menú de golpe e ir al contenido.

- En general hay que recordar que los analizadores automáticos de accesibilidad no pueden examinarlo todo, y hay que pensar en la accesibilidad con medidas proactivas, como lo que he comentado de los accesskey, que el texto conserve su legibilidad al aumentar o disminuir el tamaño o que las imágenes importantes sean reemplazadas por texto alternativo. La imagen principal, al ser un fondo desaparece sin dejar rastro al desactivar las imágenes o la css (en ambos trabajos).

- También es importante recordar que hay gente que navega sin ratón, por lo que es bueno que el mismo efecto que le damos a hover se lo demos a active y focus, de manera que siempre se vea claramente dónde estamos.

En conclusión, aun con cosas a mejorar, el código es diez veces más limpio que muchos trabajos profesionales. Me encanta que muchos estemos ya pensando en todas estas cuestiones a la hora de diseñar como algo importante; se nota un cambio radical.

Para mi que estos dos trabajos no están nada lejos de lo que en teoría sabemos algo más de xhtml y css; me parecen estupendos.

A continuación algunas puntualizaciones de cada trabajo.

[Mikmoro]

Aresillo:
- Ha estado muy bien trabajado estéticamente y muy imaginativo, añadiendo el buscador y la nube de etiquetas. La estructura es visualmente clara y sencilla, dejando bien claro dónde está cada cosa.
- Se cumplen todos los requisitos sin problema.
-El código está indentado sólo en parte, y la que lo está, en exceso. Sólo se busca la comodidad de quien lo vaya a leer o modificar, y sólo necesitamos pensar en eso a la hora de hacerlo o no.
-Como se ha dicho los label vacíos carecen de sentido, por lo que es mejor buscarles acomodo en nuestro diseño.
-Esto ya es gusto personal, no me gusta que un menú convierta en negrita el texto al pasar el ratón y esto provoque movimiento; hay que evitar los movimientos indeseados a toda costa a mi entender.
-Los enlaces a los validadores no tienen ninguna utilidad; hay que enlazar a la validación de la propia página, a modo de constatar que efectivamente es válida, porque al pulsar se revalida al vuelo.
- Según algunas directrices de usabilidad, todo listado como ul debería ir precedido de una etiqueta header (hx) que lo identifique (en una competencia reciente me dijeron que por qué usaba ese antiestético "Menú" delante del menú y no lo pude explicar ). De esa manera, no era necesario poner después del h2 que da título a cada listado una caja para contener el ul: el ul por sí sólo normalmente se puede manejar desde la css sin problema.

CSS:
- Sobre el menú ya se ha dicho bastante de por qué no hacerlo así, lo que te hubiera ahorrado unas cuantas líneas de background y alguna otra cosa.
- Por algunas de las cosas dichas anteriormente, efectivamente hay un poco exceso de código css, pero no es tanto problema, estando más bien ordenado y correcto.
- Aunque es bueno escribir el código en el orden que va apareciendo en el html, suele ser algo más limpio y recomendable empezar por agrupar al principio los selectores de las etiquetas genéricas (body, h1, h2, a, etc.) y luego el resto.

No veo mucho más que comentar que no se haya dicho ya. El trabajo de css es correcto para el html que había.

Por último, a mi entender es preferible el diseño líquido con tamaños máximos y mínimos, y las fuentes en em que permita ver directamente la fuente en el tamaño predeterminado de cada uno en su navegador.
Es apreciable que no se ha usado ningún tipo de hack para los navegadores exigidos, y que el diseño se mantiene perfectamente bien por haber usado código bien compatible.

CaLiZzZ:
Una cosa que hay que tener en cuenta es la primera impresión, y aunque tu diseño está muy limpio y menos arriesgado, el que la primera impresión estética resalte una contrariedad como la del tamaño de la cabecera, a veces puede cambiar el espíritu con el que uno analiza el resto de contenido, y esto te puede haber quitado algunos votos.
Es importantísimo acordarse de que no todo el mundo verá la página con la misma resolución que nosotros, así que es arriesgado usar tamaños fijos que en algunas resoluciones desborden completamente.
Como árbitro debo descalificar tu trabajo porque falla en uno de los requisitos básicos, ya que en IE6 hay un importante problema: la caja central del contenido se baja debajo de la del menú, descuadrando y dejando innavegable la página.

Por otro lado, la cabecera es suave y agradable a mi gusto, muy bien equilibrada (gráficamente). El conjunto es muy simple, con líneas sencillas y claras, y un tamaño de letra más o menos adecuado. Me gusta el diseño simple, aunque hecho de menos algo más de contraste entre las zonas de texto que me ayuden a acomodar la vista con más facilidad sobre los diferentes bloques.
Trabajo bonito y agradable, y sobre todo muy bueno para una primera competición.

HTML:
- Contiene varios de los errores citados de forma genérica.
- Es muy sencillo y limpio.
- Sí has tenido en cuenta hacer el enlace a la validación concreta excepto en el hera.
- Un problema de usar un alto concreto en algunas cajas es que si el texto es aumentado se sale de la caja (las de la izquierda). Eso es una limitación innecesaria.

CSS:
- Las etiquetas como background o margin son más fáciles de leer y con menos código si se agrupan:

background: url(img/head/head1.png) repeat-x left top;

-Tus enlaces se ven algo más con focus (falta active para IE), pero aunque les has puesto subrayado, al no quitarles el outline (recuadro punteado), aunque se resaltan el efecto de subrayado no se ve.

En definitiva, no muchos más problemas que los destacados de forma común en el primer mensaje. Un trabajo que es ya más correcto que muchos de más nivel.

[Mikmoro]

Y con esto como árbitro doy por concluida la competición, diciendo que aunque el vencedor moral es Aresillo por atesorar más votos, declaro un empate técnico, porque la competición estaba pensada para ver qué nivel de conocimiento práctico había adquirido cada uno en el poco tiempo que llevan con las hojas de estilo, y para aprender un montón de cosas nuevas. Se declaró como duelo didáctico y en eso creo que ambos son ganadores.

Gracias a los dos y a todos los que se han molestado de invertir algo de tiempo en analizar cada trabajo y dar su opinión. Creo que de esto como de casi todo, todos hemos aprendido algunas cosas interesantes, y por tanto, nadie se va de vacío.

Ahora si queréis podemos seguir usando el hilo para que hagáis consultas o resolváis dudas, que imagino que todos los que hemos estado aquí seguiremos intentando resolver.

A ver qué tal la próxima competición.

[sanchy]

Iniciado por alvlin

Si necesitás pasar a la siguiente línea de texto, no hay problema en usar br, que para eso está.
Lo que acá se criticó fue el uso de br para generar espacio entre bloques, cosa que es trabajo de CSS mediante el uso de margin-bottom o margin-top (según el caso)

Saludos.

claro pero yo quiero poner un div abajo de otro... si al que va abajo le pongo "clear:both", no queda pegadito queda un espacio. que por mas margin padding 0 queda.

se usa <br /> entonces? (en IE6 se ve con un espcio con o sin br :x)

[buzu]

mikmoro, tengo que regresar a leer tus comentarios luego, por que ahora tengo prisa, solo paso a contestar las preguntas de Aresillo:

¿Cómo puedo sintetizarlo?

Necesitaría revisarlo con mas detenimiento, yo creo que más que sintetizarlo sería escribirlo nuevamente ya que es mucho. Si quieres puedo hacer mi versión de CSS con la que logre lo mismo que tú. Esto sin afán de presumir o nada de eso, simplemente como medio de enseñanza. Tu me dices.

El sentido que le doy, es que cuando se deshabilita el css, queda el header...¿Por qué es un error?

Necesitas ver "the big pctrure". No tener CSS no es la única discapacidad de un navegador. También está el no poder mostrar la imágenes. Has visto si se ve el h1 cuando las imágenes están des habilitadas? Y que me dices de un lector de pantalla, crees que leerá el h1? La respuesta a ambas preguntas en no y es por eso que es un error la forma en que has hecho lo que haces. Yo no recomiendo reemplazar imágenes por texto por que trae mas problemas de los que soluciona.

Espero se solucionen tus dudas.

Saludos.

[buzu]

sanchy, por que no abres otro tema?. Se están mezclando dos temas y no es justo ni para ti ni para los que ya tenían este tema establecido.

EDITO:
no había visto esta linea en el comentario de mikmoro:

Ahora si queréis podemos seguir usando el hilo para que hagáis consultas o resolváis dudas, que imagino que todos los que hemos estado aquí seguiremos intentando resolver.

En cuyo caso, tu comentario no está fuera de lugar.

Saludos.

[sanchy]

Iniciado por buzu

sanchy, por que no abres otro tema?. Se están mezclando dos temas y no es justo ni para ti ni para los que ya tenían este tema establecido.

EDITO:
no había visto esta linea en el comentario de mikmoro:

En cuyo caso, tu comentario no está fuera de lugar.

Saludos.

si pregunte por eso y por q alguien hablo de q usar BR no era correcto

[kseso?]

Hola Aresillo.
Veo que algunas cosillas no las supe explicar claramente.
Te coloco una imagen, creo que la "verás como yo lo veo". Es FF 3.0.3 en vista:



Espero que ahora sí me haya explicado

Sanchy, cuando dije:

En el cuerpo principal, creo que abusas de los <br /> para separar los <p>, podrías haber logrado la separacón mediante css.

era porque creo que en un duelo de css hubiese sido más acertado lograr la separación entre <p> con la propiedad "margin-bottom"

[Aresillo]

Gracias Kseso? por lo visual de la explicación...!!
Respecto a lo de las flechas, le voy a poner un line-height del alto de la flecha, así no hay problema...

Y lo otro de que se pone encima, en principio era el efecto buscado... aunque creo que lo que os hubiera gustado es que se agrandará y se desplazara el resto de imágenes hacia abajo... Pero como he aprendido que mejor que no se amplien las cajas ni nada... pos no se me ocurre otra opción que la que esta...¿A vosotros?
También arreglaría las imagenes grandes poniendoles una sombra y transparencia en la parte blanca... por ejemplo de la última... pero como para eso tenía que poner el hack de png para IE6 pues no lo hice...
En cuanto pueda, pondré la página con todas las remodelaciones comentadas para que que se vea ya bien...

Buzu... si me enseñas como sintetizarías el css estaría más que encantado... aunque creo que es demasiado curro para tí.. así que entendería que no lo hicieras... o que ... me dijeras como reducirías algunas partes...

Necesitas ver "the big pctrure". No tener CSS no es la única discapacidad de un navegador. También está el no poder mostrar la imágenes. Has visto si se ve el h1 cuando las imágenes están des habilitadas? Y que me dices de un lector de pantalla, crees que leerá el h1? La respuesta a ambas preguntas en no y es por eso que es un error la forma en que has hecho lo que haces. Yo no recomiendo reemplazar imágenes por texto por que trae mas problemas de los que soluciona.

Y entonces cual es la mejor solución ...

Aresillo!!

[buzu]

Como te dije aresillo, no reemplaces h1 por imágenes. Esa es la mejor solución.

[Aresillo]

Iniciado por Mikmoro

-Los enlaces a los validadores no tienen ninguna utilidad; hay que enlazar a la validación de la propia página, a modo de constatar que efectivamente es válida, porque al pulsar se revalida al vuelo.

Mi intención, era ponerlos lo que no sé es porque cuando los ponía, no me validaba... lo intenté varias veces... y como no lo conseguí... desistí..

Iniciado por Mikmoro

Por último, a mi entender es preferible el diseño líquido con tamaños máximos y mínimos, y las fuentes en em que permita ver directamente la fuente en el tamaño predeterminado de cada uno en su navegador.

Mi idea, es ponerme con esto aunque me veo un poco verde al respecto... sobretodo cuando hablamos de como tratar las imágenes...

Gracias Mik

Aresillo!!
------------------------------------------
PS: Os pongo la versión mejorada de la web (según vuestras recomendaciones...)es posible que se me haya pirao alguna, si eso no dudéis en comentarlo...
Mecánica F1 (versión mejorada)

[Aresillo]

Ya he arreglado lo de los validadores...

Aresillo!!

[Calizman]

=/ Yo me he metido a tu pagina actual... y no le vi cambios! de hecho... veo las imagenes agrandadas de la misma forma... miro la barra de navegacion igual... en FF.

En opera lo vi.. y esta la barra de navegacion bien, pero las imagenes cuando se agrandan, sale la imagen agrandada en la parte de arriba donde esta la lista con las flechitas xD

Espero te sirva eso! y buen trabajo! xD

[Aresillo]

Las imágenes agrandadas siguen y seguirán de la misma forma... es el efecto buscado... aunque se puede mejorar con transparencias en png... al realizar la web sin hacks, no lo he hecho....

Respecto al menú! no hay Dios que lo haga bien! Voy a ver que hago!
¿Alguien tiene unas directrices para hacer el menú bien???

Lo del opera se ve así desde que empezaron las votaciones...y no sé como arreglarlo..

Aresillo!!