Competencia Junio

[kazafun]

No se si todavia se puede hablar, no recuerdo las normas.

Por eso no pondre nombre alguno, pero uno de los trabajos es realmente excelente.

[gnzlo]

Hola a todos, finalmente vengo con algo http://www.gnzlo.com/blues/index.html , aunque el xhtml no paso la validacion...no entiendo por q, aparecen unos parametros que dan errores, deberia sentarme a corregirlos y estudiarlos pero el tiempo no me llega asi que aqui les dejo mi idea del scroll y el sitio, si el menu estubiece aun mas abajo seria mejor, pero ahi se entiende bastante bien...

[sumolari]

Gnzlo, no puedo ver los contenidos, cuando le doy a algún link del menú no cambia nada, todo sigue como antes.

[gnzlo]

si l verdad no me dio tiempo de terminar nada, envio hace para perder con algo por lo menos jeje, el trabajo no me deja mucho tiempo...

[daPhyre]

¡Yo te ayudo!

1) Al primer "IMG" te faltó el alt y el / antes de cerrarlo.

2) a <div class="menu" id="#menu">, borrale el [id="#menu"]

3) onclick, onmouseout, onmouseover, deben ir con minusculas!!! Por cierto, creo que eso lo haces para cambiar la imagen de fondo, pero eso deberías mejor hacerlo desde CSS con a:link y a:hover

4) Tienes un IMG y un DIV con la ID "guitarra", cosa que no debería. Recuerda que son únicos, debes ponerles nombres distintos, o usarlos como CLASS si tu ibjetivo es que tengan las mismas propiedades-

5) Para que los links te lleven a sus secciones, debes de poner al link de esta forma:
<a href="#guitarras">Guitarras</a>
Y al título donde dice guitarras así:
<a name="guitarras">Guitarras</a>

Creo que con eso ya tre validará. Por cierto, no veo tu fondo fijo, que creo había sido el motivo principal por el que se hizo este contest. Además, no comprendí que era eso que querías que hicieramos que no comprendimos...

[gnzlo]

ha q bien daphyre revisare esos detalles tienes razon debe ser por eso seguramente. lo q me referia con el home es q , si te fijas cuando abre la web, osea el home, lo primero y unico q se ve es una imagen y algo del menu abajo, esa imagen podria interpretarse como una portada digamos...algo asi era, tengo otro ejemplo para mostrar q puede ayudar a comprender mi idea, mientras la subo arreglare el xhtml, gracias de nuevo daphyre!

[[NiRVaNa]]

Como es el analisis y la votacion?

[daPhyre]

Estamos aun analizando el analizis

Lo que se es que deben tener las siguientes bases para participar:
-Que cumpla con lo estipulado
-Que valide el XHTML y el CSS
-Que tenga minimo 7.6 en eXaminator
-Que tenga fondo fijo
-Que el total de archivos no sea mayor a 80Kb

Y para evaluar, nos podemos basar en este estandar, aunque no es forzoso (Pero si recomendable):
http://www.forosdelweb.com/f95/todos...ml#post2434570

[Raulmmmm]

-Que el total de archivos no sea mayor a 80Kb

¿Dónde se ha dicho eso? Mi página supera los 100kb .

[daPhyre]

Iniciado por Raulmmmm

¿Dónde se ha dicho eso? Mi página supera los 100kb .

Reglas: http://www.forosdelweb.com/f95/compe...8/#post2448443

Yo me maté haciendo que pesaran menos de 80Kb, originalmente pesaba 124... Fue solo optimizar imagenes, por suerte FireWorks me ayudó... ¿Será que puedas optimizar tus imagenes? Si no quizá podamos perdonartela por esta vez

[Raulmmmm]

Vaya, no me fijé. Ahora mismo me pongo a optimizar .

PD: Ahora son 93,8kb, voy a borrar los fondos de las imágenes y a ver si lo consigo :.
PD2: ¡Arghhhhhhhhhhhhhhhhh! ¡80,3kb!!!!
PD3: ¡Por fin! 78,9kb es lo que ocupa ahora. He tenido que borrar a 3 intérpretes para bajarlo de 93 a 78, pero bueno, ya cumple las normas.

[newboy_master]

Buenos trabajos, aver si terminais de analizarlos y empezais con la competencia de Julio.

Salu2.

[metacortex]

hades87
http://www.wellcometomyworld.com/blues/

El azul del fondo está muy bien, pero el del contenedor es muy "16 restricted". Igualmente lo veo ausente de contenido. El trompetista saliendo te quedó genial. sin embargo debiste trabajar más ese cabezal.
___________________

sumolari
http://blog-sumolari.sumolari.com/fdw/cp-6-08-css/

Excelente el efecto de ocultamiento de fondo, pero lamentablemente no funciona en IE. Me encantó esa semántica. El CSS está muy bien, aunque el primer estilo pudo haberse obviado. Existen comodines para ahorrar ese trabajo.
___________________

Carlmycol
http://carlmycol.awardspace.com/blues/

Buen manejo del monocromo. El contenedor angosto le da buen aire de elegancia a tu maquetación.

Tu código está bien, pero tienes esos "<br /><br />" tras cada párrafo. La forma correcta es utilizar un margin:top/bottom y problema resuelto. Los íconos azules no me gustaron. Los hubieses desaturado y convertido a monocromos también
___________________

daPhyre
http://mx.geocities.com/daphyreweb/fdw/blues/index.html

Te arriesgaste mucho con esa combinación amarillo-azul, que por cierto me agradó bastante . Sin embargo debiste trabajar más la tipografía hombre, tanto tamaño como carácter, color, medidas, todo. Descuidaste ese aspecto, pero aún así el resto me hace olvidar un poco el detalle. Los discos son buena iniciativa, pero visualmente chocan un poco.
___________________

Raulmmmm
http://retocss.110mb.com/elblues/

Mi voto es para este tiro. Simplemente excelente en todos los sentidos. Raul, de verdad me impresionó cuánto ha mejorado tu estilo y me alegra ser testigo de ello. Se nota que tomas muy en serio la disciplina y por eso te hago llegar unas sinceras felicitaciones.

En IE6 faltaron algunas pocas cosas por ajustar al tiro, no obstante me sigo quedando con éste.
___________________


Ahora mismo los agregaremos al Clan CSS Foros del Web. Felicitaciones a todos.


Comienzan las votaciones para nuestros competidores:

hades87 = 0
sumolari = 0
Carlmycol = 0
Raulmmmm = 1
daPhyre = 0

Quien haga una votación, por favor vaya actualizando esta cuenta por sí mismo.

[kazafun]

Mi voto es para sumolari, una gran pureza visual combinada con ese bonito efecto del fondo en el scroll vertical, descubriendo las notas. A pesar de que no funciona en IE6 creo que es el mejor trabajo con diferencia.

hades87 = 0
sumolari = 1
Carlmycol = 0
Raulmmmm = 1
daPhyre = 0

[Raulmmmm]

Gracias metacortex por tu análisis. Es verdad, cambié los estilos en el último momento y no me acordé de ponerlos bien en IE6.

[newboy_master]

A mi me gusta más el de sumolari también.

hades87 = 0
sumolari = 2
Carlmycol = 0
Raulmmmm = 1
daPhyre = 0

Salu2.

[AlvaroG]

Hola a todos, felicitaciones por muy buenos trabajos.
Pero como solamente se puede votar por 1, hay que analizar...
(de puro copión voy a usar el mismo orden que metacortex )

Estética
- hades87: Me gusta la cabecera, aunque creo que podrías haber logrado el mismo efecto con menos altura. La franja lateral resulta un detalle agradable.
Creo que deberías haber trabajado más con las tipografías, y agregar un título a cada página.
No me gustó el efecto de los botones, y creo que el degradado del fondo debería haber sido más largo y más suave en la parte superior.

- sumolari: Un diseño bonito en general, me gusta la simpleza (aparente) y la combinación de colores en el texto, así como los adornos a los lados.
La cabecera se ve un poco descuidada, quizás un margen superior igual al inferior, con un poco de margen izquierdo, lograría un mejor efecto.
La elección del fondo para los botones cuando tienen el ratón encima me parece desafortunada, no encaja con el resto del diseño.
En Opera 9.50 la transición entre el contenido y la "portada" (al desplazarse hacia abajo) deja una franja de unos 5cm de fondo. Pero esto es un detalle que al menos en mi opinión no es importante.

- Carlmycol: Me gusta mucho tu trabajo. Se hechan de menos algunos enlaces del texto, que podrían romper un poco con la monotonía. También creo que deberías haber dado un mejor resaltado al efecto sobre los enlaces de la cabecera.
Un último detalle, muy menor: a la imagen de HTML válido se le ve un borde que no se le ve a la de CSS válido.

- Raulmmmm: Buen diseño, buena disposición del contenido. Los colores no me gustan pero el balance de tonos es agradable. El diseño con pestañas quedó bien, aunque en Opera no se ve el contenido hasta que se "activa" una de ellas. Por lo que a simple vista parece que estuviera vacío.

- daPhyre: Coincido con metacortex en que deberías haber trabajado mejor la tipografía. Los laterales quedaron bonitos, y la disposición de colores en general no está mal. Te faltó un pie donde colocar los detalles de licencia y demás, la letra negra sobre fondo azul no se puede leer bien. El menú desplegable es una buena idea, aunque creo que hubiese quedado mejor si le ponías "position : fixed" para que siempre estuviese visible.
Te hago el mismo comentario que a Carlmycol: conservar los enlaces hubiera sido una buena manera de romper con la monotonía en los textos largos. No me gustó pero para nada el color que elegiste para los enlaces del menú cuando el ratón les pasa por encima.

En estética mi voto va a Carlmycol

Código HTML
- hades87: Prolijo y bastante limpio, pero no valida como XHTML. Olvidaste cerrar un par de etiquetas <br>. Tampoco incluiste enlaces al validador
- sumolari: Prolijo, limpio y completo. Muy bien hecho. Pero usaste <p>&nbsp;</p> para espaciar... usar margen habría sido mejor.
- Carlmycol: Prolijo y limpio, aunque usaste los <br/><br/> para separar secciones, ¡eso se hace con márgenes! También usaste el atributo "style" para las imágenes del validador, algo que no está mal pero no se aconseja. Hay ahí un div ("header") que no usaste, y lo cerraste inmediatamente.
- Raulmmmm: El código es bastante prolijo y limpio, aunque encuentro extraño que hayas usado un "<a name="arriba">" cuando podés lograr el mismo efecto haciendo un enlace con href="#".
- daPhyre: Otra vez código prolijo, muy buen trabajo a todos :) No valida por culpa del código insertado por tu alojamiento, aunque el código que vos escribiste funciona bien.

En Código HTML mi voto va a sumolari.

Código CSS
- No me gustó la presentación del código de daPhyre y Raulmmmm, con casi todos los espacios removidos. El de sumolari tiene un gran trozo de código comentado, se ve extraño.
Carlmycol y hades87 lo hicieron muy bien en este sentido, un puntito de mi parte para cada uno en este punto.

Semántica
- Todos usaron un código HTML limpio y prolijo, pero solamente sumolari usó etiquetas <cite> y <blockquote>. Aunque usó también algunos div vacíos, el código resulta bien estructurado. El punto en este caso va para sumolari

Accesibilidad
- Carlmycol y hades87 no definieron teclas de acceso por teclado.
- Carlmycol: Si elijo ver tu propuesta sin estilos, el título se pierde. Me quedo sin ver de qué se trata la página.
- daPhyre, hiciste un buen uso de longdesc, fuiste el único. Una lástima que no se pueda validar debido al servidor donde lo alojaste.
- sumolari: buen trabajo. Lo que se esperaba.
- Raulmmmm: el problema con el sistema de pestañas es que usando el teclado para navegar en la página no puedo ver todo el contenido, al menos con Opera y con IE.

Por el detalle del uso de longdesc, mi voto en este punto va para daPhyre

Usabilidad
- La novedad va en contra de la usabilidad, la verdad es que mientras más sencillo y claro sea un diseño mejor.
Los mejores en este sentido son los trabajos de sumolari, Carlmycol y hades87
El diseño de sumolari es claro, pero no provee una forma sencilla de volver arriba si por error hice clic en un enlace. Debería ver la sección completa o desplazarme hacia arriba, cosa que no es tan clara por la intención de dejar cada sección como si fuera una página diferente.
El de hades87 está claro y sencillo, pero se hechan de menos frases resaltadas o subtítulos.
Al diseño de Carlmycol le hacen falta enlaces para volver arriba, y un mejor resaltado de los enlaces del menú.

En este punto mi voto va para Carlmycol.

Opinión general, mucho más subjetiva que lo anterior
Los diseños que más me gustaron fueron los de sumolari y Carlmycol. El de sumolari se ve más trabajado, aunque hay algunas inconsistencias y detalles a reparar.
El diseño de Carlmycol es muy bueno, va con el tema tratado, aunque tiene algunos problemas, como no incluir un título claro, no resaltar los botones del menú, y no romper la monotonía de los bloques de texto.

En este punto, el voto va para sumolari


En definitiva, y después de analizarlo mi voto va para sumolari. Felicitaciones


Votos:
hades87 = 0
sumolari = 3
Carlmycol = 0
Raulmmmm = 1
daPhyre = 0

[metacortex]

Ufff muchacho. Voy a contratarte como tester .

[sumolari]

Hace tiempo que no paso por aquí, y veréis lo que me pasa: Resulta que estamos cambiando los muebles y pitnando la habitación donde tengo el ordenador, así que lo he trasladado a otra. En la que está ahora no llega el cable de red, así que me conecto por Wi-Fi, pero Windows no me detecta la tarjeta de Wi-Fi (hice mi diseño con windows, y allí tengo las imágenes y demás).

Cuando leí que no funcionaba con IE me extrañé, lo probé usando IE 7, porque el 6 no lo tengo, ya que mi Windows es el Vista. Con Opera tampoco lo miré, eso sí que fue un error, pero supongo que se verá parecido.

Respecto al código comentado, en el primer diseño que creé era un diseño a dos columnas. La izquierda era fija, mientras que la derecha contenía el texto. Además el menú estaba en la parte superior, fijo sin moverse.
Más tarde leí que tenía que tener un diseño de tipo portada y otro para el texto, así que descarté mi primer diseño, pero para mantener los estilos por si quería copiar algo, comenté el CSS anterior. Probablemente se me olvidase borrarlo antes de subirlo.

El error que se comenta en Opera puede que sea el mismo que encontré yo. Al hacer scroll hay un momento en el que empieza a aparecer el fondo, pero no cubre toda la pantalla. Traté de arreglarlo, pero no conseguí nada. Pensé que con los links del menú superior y los de "Arriba" bastaba.

Votos:
hades87 = 0
sumolari = 3
Carlmycol = 0
Raulmmmm = 1
daPhyre = 0

¿Qué decir...? Pues ¡me alegro que os haya gustado mi diseño!

[metacortex]

¿Les parece si fijamos el plazo de votaciones hasta el domingo 20?

[Raulmmmm]

Vale, a mí me parece bien .

[DragonX]

Raulmmmm mi voto es para usted muy buen laburo!

[juaniquillo]

Pues déjame botar y después hacer el analisis antes (espero tener tiempo... :D

Mi voto es para Raulmmmm. Puse dos votos para él porque DragonX no puso el conteo. Si lo hice mal me dicen..


Votos:
hades87 = 0
sumolari = 3
Carlmycol = 0
Raulmmmm = 3
daPhyre = 0

[Mikmoro]

hades87:
que yo sepa, nunca en una competencia css se ha hecho más de una página, vamos, que normalmente se hace a una sola página.

sumolari:
bonito diseño, pero en IE6 además de no conseguir el efecto de las notas musicales, en la parte del texto, justo debajo de Gehard Kubik, se hace un desastre con un fondo que se va a la derecha y rompe todo, y el png de la partitura no transparenta, claro.

Carlmycol:
El texto demasiado pequeño para mi gusto, pero el único diseño que funciona exactamente igual en FF que en IE.

daPhyre:
El menú de los acceskey no despliega en IE6, y la cabecera es más ancha que el cuadro amarillo del texto, descomponiendo el diseño. La partitura no tiene borde.

Raulmmmm:
En IE6 hay alguna cosa descuadrada de los menús, y al pasar el ratón hay bloques de texto que desbordan por la derecha fuera de la composición, a pesar de haber usado comentarios condicionales para poner una hoja específica para él. Diseño agradable con colores bonitos, sobre todo suave y elegante la cabecera.

No he entrado a analizar otros aspectos, pero sólo con esto mi voto tiene que ser para Carlmycol, el único diseño que se comporta bien tanto en FF y Opera como en Explorer 6 y 7.

Para mi, que nos pasemos el día arreglando cosas y dando consejos a usuarios sobre cómo adaptar las cosas para IE6 y luego no tenerlas en cuenta al hacer nuestros diseños me parece pecado mortal. Hoy en día estamos todavía obligados a conseguir que las cosas funcionen bien para ese maldito navegador, lo queramos o no.

Vamos, que si gana la competencia un diseño casi inaccesible para el 80% de los navegantes me descuadra todo.

O quizá es que no he entendido prácticamente nada de las competencias y debería empezar a leerme toda su literatura para entender qué se pretende.

Votos:
hades87 = 0
sumolari = 3
Carlmycol = 1
Raulmmmm = 3
daPhyre = 0

Mikel.

[metacortex]

Iniciado por Mikmoro

Vamos, que si gana la competencia un diseño casi inaccesible para el 80% de los navegantes me descuadra todo.

Que no se vea igual no es sinónimo de inaccesibilidad.

[AlvaroG]

Es un punto de vista válido, pero IE6 no tiene el 80% del mercado. Quizás IE lo tenga si se suman IE6 e IE7, pero el IE7 es bastante mejor que el 6.

En mi opinión, no está mal que el IE lo muestre mal. Después de todo, las competencias son de CSS, y no es culpa de los competidores que el IE apeste con CSS. Veo a estos juegos como la posibilidad de experimentar, y no se puede experimentar teniendo que cumplir con el peor de los navegadores actualmente en uso. Claro, tanto experimento es hacer un diseño novedoso solamente con CSS como hacer que ese diseño novedoso funcione en el IE, ambos ejercicios son enriquecedores (aunque el arreglar el IE 6 con suerte dejará de ser importante en algunos años) y útiles.

Igual cualquiera de los extremos me parece malo, yo personalmente no probé ninguna de las propuestas en IE porque no lo tengo.

Las votaciones son abiertas y cualquier opinión fundamentada es respetable. Creo que esto es un punto a aclarar en la competencia de Julio, para que quede claro para todos los participantes (entre los que con suerte me incluyo)


Saludos

[Raulmmmm]

Sí, alvlin, pero la cuestión es dónde dejar el límite. Es imposible que se vea exactamente igual en todos los navegadores (por ejemplo en Firefox, si pones la letra en porcentajes o em sale más pequeña que en el resto).

[kazafun]

Esta discusion es muy constructiva.
Entiendo perfectamente la opinión de Mikmoro, y tiene mucha razon en algunas cosas.

En esta ocasión mi voto no se ha decantado por los motivos que el argumenta pero posiblemente en otra ocasion si lo haga.

Esta muy bien que nos recuerden de vez en cuando que el apestoso IE6 todavia tiene mucho mercado.



Estas competiciones estan muy bien porque bailamos en el filo de lo que es profesionalmente coherente (intentar codigo aceptado por todos los navegdores) y lo estrictamente correcto.

[Mikmoro]

Iniciado por metacortex

Que no se vea igual no es sinónimo de inaccesibilidad.

No, efectivamente, pero si un desplegable no funciona, si un bloque de texto aparece desbordado por un lateral sin scroll, si un bloque aparece fuera de la pantalla o si unos botones no funcionan, etcétera, entonces sí es inaccesible. A mi no me preocupa tanto que en IE un margen sea el doble que en FF, por ejemplo, pero sí que todo el texto se vea, que no haya un fondo que haga la letra ilegible, etcétera. Cosas así.

Alvlin

Es un punto de vista válido, pero IE6 no tiene el 80% del mercado. Quizás IE lo tenga si se suman IE6 e IE7, pero el IE7 es bastante mejor que el 6.

Bueno, un 80% era un decir. Me refiero a que todavía muchísima gente lo usa.
Y por tu comentario, veo que efectivamente he sido yo el que no ha entendido el fundamento de las competencias.

Raulmmmm:

Sí, alvlin, pero la cuestión es dónde dejar el límite. Es imposible que se vea exactamente igual en todos los navegadores (por ejemplo en Firefox, si pones la letra en porcentajes o em sale más pequeña que en el resto).

No, no es imposible. Otra cosa es que se importante o no.

Nada, nada, por mi no preocuparse. Si alguna otra vez participo intentaré entenderlo mejor y precisar lo más posible todos lo aspectos antes de empezar.

Mikel.

[metacortex]

Iniciado por Mikmoro

No, efectivamente, pero si un desplegable no funciona, si un bloque de texto aparece desbordado por un lateral sin scroll, si un bloque aparece fuera de la pantalla o si unos botones no funcionan, etcétera, entonces sí es inaccesible. A mi no me preocupa tanto que en IE un margen sea el doble que en FF, por ejemplo, pero sí que todo el texto se vea, que no haya un fondo que haga la letra ilegible, etcétera. Cosas así.

Estamos de acuerdo, pero en tu comentario te referías a los tiros de la competencia. Particularmente pude acceder a los contenidos de todos ellos con IE ¿tú no?. Por eso me extrañó la afirmación. De todas formas no es para extenderse mucho, fue una observación.