VOTACIONES Rookies v R. Actividad CSS de Mayo

[kseso?]

ROOKIES v´s ROOKIES: EL DISFRUTE DE LOS TRABAJOS.

El momento esperado ha llegado y ya podemos disfrutar de las páginas realizadas para la actividad de Mayo en el foro de CSS.
Y lo primero de todo es agradecer y felicitar a los equipos participantes por su trabajo.
Quizás os preguntéis por qué esta vez no hay votaciones. La respuesta breve: razones técnicas han impedido montarla tal como era mi intención. Pero esto no quita para que puedas valorar, dar tu opinión y elegir tu página favorita en tres aspectos.

ENCUESTA INCLUIDA GRACIAS A TUNAIT:
Puedes votar en cada una de las opciones siguientes la del equipo que creas merecedor de tu voto:

PRESENTACIÓN VISUAL:
En base a las sensaciones que tengas al navegar por cada página como un simple usuario de internet. Los colores, imágenes, tipos y tamaños de letras, etc. No hablamos de diseño, sólo de tus impresiones al ver las páginas por primera vez.

DISEÑO:
Aquí entran en juego otros factores, además de lo visual. Usabilidad, disposición de los elementos, relaciones entre todos los componentes de la página y de éstos con el visitante... qué te voy a decir yo de este tema que tú no sepas ya.

CÓDIGO XHTML+CSS 2.1
Creo que esto no necesita explicación.

Pero recuerda que el motivo pedir tu opinión es que ayudes a mejorar las habilidades y conocimientos de los participantes en esta actividad, reseñando los aciertos y también indicando aquello que crees es mejorable.
Y esa es la mejor manera de darles las gracias por regalarnos su tiempo y trabajo.

Y después de tanto rollo:
PODÉIS VER LAS PÁGINAS PRESENTADAS AQUÍ


Nota: Los trabajos de los dos equipos que han sido entregados ya está en línea.

Algo de historia:
La convocatoria
El dosier con la información facilitado a los tres equipos.

[pao01]

Wow, ahora a ver los trabajos
Esperemos se resuelva lo del trabajo en espera.

[Aresillo]

Bueno, pues ya está la cosa en marcha..

Qué ha pasado con el equipo codesign??

Saludos!

[kseso?]

Pues que ni está ni se le espera.
Algo me comentó Xlogus por mp hace dos días sobre a la desaparición misteriosa de algún componente, pero supongo que ya os darán la oportuna explicación de su ausencia.

Un saludo

[pao01]

Qué pena, hubiera sido lindo ver todos los trabajos.
Bueno, voy a echar miradita a los trabajitos presentados que se ven buenos, ya con más tiempito emitiré mi opinión. Felicidades a ambos equipos

[hades87]

Pues pintan bien los trabajos, a ver si el grupo desaparecido aparece y nos lo muestra :)

[jeybi]

Que bien, llego la hora :). Que habra pasado con Xlogus y Dalvenjha , yo estaria deacuerdo en que presentaran su trabajo (aunque la fecha limite haya pasado), esperemos que haya uno .

Saludos
PD: Olvidamos colocar los enlaces de validacion (error mio).

[kseso?]

Gracias a TUNAIT, tenemos la posibilidad de votar.

Elije de cada apartado( presentación visual, diseño y código) el equipo que prefieras: Supercoco o WA

Pero déjame pedirte un favor: pasa por aquí y comparte las razones de tu elección

Un saludo

[hades87]

Pues yo me decanto en las tres opciones por supercoco, principalmente por que la cabecera la veo mas trabajado, un diseño moderno y claro y la información bien estructurada, la de WA no esta mal, pero quizás la vea algo simple.

Saludos y suerte a ambos :)

[willyfc]

Bueno esperemos más participación del público para que den sus opiniones.

Gracias hades por tomarte tu tiempo de ver los trabajos y tu opinión.

[kseso?]

Pues la encuesta se estrenó. Gracias Hades87. Seguro que tu valoración nos es de utilidad para todos.

Un saludo

[hades87]

Gracias a ambos, la verdad que ahora que en 2 semanas acabo el curso me gustaría poder hacer alguna competencia contra alguna de las magnificas personas que hyay por aquí :D

[kseso?]

Eso es fácil, Hades.
Espera algún día, y si nadie ha montado otra actividad, lanza un reto. O de forma general en un tema nuevo o llama "gallina, capitán de las sardinas, que no te atreves, que aquí te espero comiendo un huevo" a alguien en particular.

Malo será que no encontréis a alguien que quiera hacer de árbitro.

[hades87]

Jaja, lot endré en cuenta amigo :D, la verdad que ahora tengo 2 semanas que voy un poco de culo. Pero a partir del 12 todo se podría ver y para arbitro ya estás tu :D

[kseso?]

Iniciado por hades87

para arbitro ya estás tu :D

Bien, ya te paso por mp el correo de mi agente
Será fácil que os pongáis de acuerdo.

[WillxD]

En presentación visual, tiene una mejor impresión la de SUPERCOCO, se ve más moderna.

En tanto el diseño, también a mi parecer está mejor el de SUPERCOCO, está más trabajado, al de WA lo veo demasiado simple (pero no mal ).

En cuanto a código, están bien los dos.

Espero se sigan haciendo más concursos

Salu2!

[Triby]

Si se me permite la libertad, voy a hacer una descripcion de mis votos (de la encuesta ) y los porques:

Presentacion visual: Basado en la sugerencia de kseso? solamente me fije en cual de los dos trabajos me sentia mas comodo navegando.

Vote por WA por la colocacion de textos, que se ven bien distribuidos y facilces de leer, a pesar de estar todo en una misma pagina, mientras que en la de Supercoco los siento un poco forzados dentro de los contenedores y me incomoda.

Diseño:

Vote por Supercoco porque, a pesar de que no me gusta el logo ni la sensacion de corte en la linea del menu, eligieron mejor los colores y, sobre todo, los contenedores de la columna derecha, muy llamativos y bien logrados.

No es que el diseño de WA sea malo, al contrario, me gusta, pero los colores no acaban de convencerme, tampoco el corte que se ve en el fondo del menu, como que la esquina superior izquierda tiene defecto en el redondeo y no se pega completamente a la derecha; tampoco me gusto mucho lo que hicieron con los titulares, cortando el borde del contenedor y colocando una flecha a la derecha que parece no pertenecer al texto o se encima en el al ajustar la ventana.

Codigo:

WA, hicieron un trabajo excelente, muy bien indentado el HTML, ojala el CSS lo hubieran trabajado igual.

Supercoco, no pasan el validador de HTML ni de CSS.

Se vale hablar de otras cosas no contempladas en la encuesta?... como cumplimiento de reglas, practicas SEO, etc.

[pao01]

Para comenzar felicitar a los participantes de esta competencia.
Quien haya estado del sitio en que ellos se encuentran sabe del esfuerzo, dedicación y empeño que se le pone, motivo que me lleva a realizar un análisis dentro de mis posibilidades en retribución a su esfuerzo.

PRESENTACIÓN VISUAL:
Respecto a este punto en particular he de considerar que a primera vista conforme lo solicitara Kseso?, quien más me impacta es Supercoco. Los colores son los que me llevan a esa primer impresión.

DISEÑO:
SUPERCOCO:
Me agrada mucho el formato general.
Me gusta la idea del auto, aunque le encuentro dos problemas: el primero es que ejerce visualmente un peso muy grande que desequilibra la página hacia la izquierda.
El segundo es que la página trata de "La Rueda" y si bien los automóviles llevan ruedas, el escoger el auto encasilla la temática en un único punto y no me parece que sea la idea que intenta transmitir el contenido de la página.
Me agrada la tipografía escogida.
No me agradan los contenedores rectangulares que encierran los diferentes textos tratados, la línea del menú tiene un estilo curvilíneo y le da una fluidez que dichos contenedores me cortan abruptamente.
En ese caso hubiera escogido trabajar con esquinas redondeadas ó simplemente por una elección personal prescindir de ellos dejando el texto sin más.
Me agradan las cajas de la derecha de competidores y créditos con las esquinas redondeadas, pero encuentro aquí otro punto que considero importante mencionar, y es la de los íconos escogidos.
En "Los Competidores" se escoge una bandera a cuadros, donde se vuelve a caer en la idea de lo automovilístico, llevando nuevamente a la idea que no se intenta transmitir por lo ya mencionado ya que el tema era "La rueda".
y el ícono de "Los créditos" donde se escoge un fajo de dinero, y la idea de estos créditos es diferente al del aspecto monetario.

Continúa...

[pao01]

WA:
Es una página despojada y limpia.
No me termina de agradar la rueda escogida, pero se ajusta perfectamente a la temática que desarrolla.
De la barra del menú me molesta la línea horizontal verde que pasa por debajo del menú, de optar por dejarla, hubiera procurado que no llegase a la derecha, sino que terminara donde termina el fondo verde del menú.
Los colores son suaves y funcionan independientemente de no agradarme el verde escogido.
En el sector izquierdo que es donde más textura hay sobre el fondo, llega a visualizarse el corte de la imágen cada vez que se repite, no es tan terrible pero es notorio.
Me agradan los contenedores de texto, aunque me molesta que los bordes se recorten donde va el título.
En líneas generales me parece un diseño conservador de no tanto impacto visual. Sin embargo me parece que posee más aciertos que desaciertos.
Mi voto aquí para WA.

CODIGO:
Por una cuestión ética aquí no haré grandes apreciaciones, simplemente ajustarme al hecho de las validaciones, donde WA valida y Supercoco no.

Es todo y va con la mejor intención. Buen trabajo ambos equipos.

[kseso?]

Gracias Triby y Pao.

Se vale hablar de otras cosas no contempladas en la encuesta?... como cumplimiento de reglas, practicas SEO, etc.

Cómo no, Triby
La idea es aprender, y aunque inicialmente se marcan unos puntos para que hagan de nexo de unión entre las propuestas, seguro que los participantes agradecen todas las indicaciones para mejorar de aquí en adelante. Esa es la idea.

(Y como ya votaste ... )

[willyfc]

Triby y pao, muchísimas gracias por darse el tiempo de hacer un análisis de los trabajos.

Triby pero claro que es bienvenida tu crítica. Sinceramente lo de los titulares haciendo el corte del borde del contenedor flexible a mi me agrado(obviamente se acepta la crítica), y con lo de la flecha estoy totalmente de acuerdo pero fue algo que ya no me dio tiempo de cambiar, con el código tienes toda la razón, lo que pasa es que es la forma en que siempre los trabajo y tome no en cuenta que otras personas tenían que verlo y poder sobre todo hacer una buena lectura del código para analizarla(gran error de parte mía).

Pao, la rueda se escogió por que el diseño va con una idea de antigüedad por eso también los colores escogidos, viendo ahora considero que tienes toda la razón con el verde(pero ya sabes que me encantan esos colores y me remito a la anterior competencia en la que participe) desentona con la temática.

Gracias por el tiempo prestando. Todas sus críticas son bienvenidas.

[jeybi]

Gracias por sus opiniones, han hecho notar puntos que no me habría imaginado. Recuerden que habían ciertas recomendaciones de kseso?, como contenedor elástico, sprites (solo se permitian 4 imágenes utilizadas por CSS), esquinas redondeadas, etc. Podrían opinar sobre eso también.

Saludos y sigan opinando.

PD: ¿ No seria buena idea liberar todos los archivos enviados por los competidores ?

[kseso?]

Iniciado por jeybi

1º) ... Recuerden que habían ciertas recomendaciones de kseso?...

2º) PD: ¿ No seria buena idea liberar todos los archivos enviados por los competidores ?

Hola Jeybi
1º: Por eso los enlaces a la convocatoria y hacer público el .pdf que os mandé en su día
2º: No se a que te refieres.

Un saludo

[Triby]

Ok, notese que fue kseso? quien abrio la puerta para ampliar comentarios y, por favor no vayan a tomar a mal nada de lo que comente, son solo apreciaciones, todos estamos aprendiendo gracias a estas competencias.

WA

1- Reglas: Hasta donde veo, respetaron practicamente todas las reglas, pero siento que para las esquinas redondeadas del marco de contenido pudieron usar sprites tambien, en lugar de 4 imagenes adicionales, ya tienen "cuadro.png" listo para cortar y pegar donde sea necesario.

2- Semantica y practicas SEO:
2.1- Titulares. Estan haciendo buen uso de h1, pero el h2 lo estan aplicando para el resto de titulares, sin asignar la importancia (jerarquia) que debe tener cada bloque. Tal vez seria suficiente usar h2 para los titulos en el marco de contenido y h3 para los titulos en la columna izquierda.

2.2- Orden de presentacion. Es muy importante estructurar el html de forma que el navegador (asi como motores de busqueda) reciban el contenido en orden de importancia y, el unico error que cometieron en este sentido, fue colocar la columna izquierda antes del "contenido real" de la pagina. Lo unico que tenian que hacer es flotar el marco de contenido a la derecha y colocarlo en el html arriba de la columna izquierda, aunque el formato liquido podria representar algunas dificultades para lograrlo. En todo caso, si pareciera imposible, podrian haber cambiado el orden de las columnas.

En el siguiente mensaje, vamos con Supercoco.

[Triby]

Supercoco

1- Reglas: Hay un par de reglas que no cumplieron, como el validado de HTML y CSS, asi como enlaces a los validadores; Algún elemento contenedor de anchura variable, implementadas vía css, tiene que tener esquinas redondeadas, si bien, hay dos bloques con esquinas redondeadas, su anchura es fija.

2- Semantica y practicas SEO:
2.1- Titulares. Aplicaron bien el orden de uso de h1 a h3, lamentablemente todos son solo imagenes, en el caso de h2 y h3 me resultan innecesarias, porque es una fuente convencional que no aporta grandes cosas al diseño y si puede tener impacto negativo en la correcta lectura (por parte de usuarios y motores de busqueda), independientemente de contar con un texto alternativo; lo mismo pasa con el menu principal.

Para confirmar esta teoria, copien el texto del recuadro de contenido y peguenlo en en bloc de notas. Si bien, el texto alternativo se encuentra ahi, no es tan facil como pensamos llegar a el.

2.2- Orden de presentacion. Bien presentado el contenido, solo me "hacen ruido" algunas cosas como tener dos divs para presentar un texto simple en el footer.

Solo como observacion, la idea de usar sprites es aligerar la carga de peticiones al servidor, pero en http://www.devillasbuenas.es/fdw/may.../No-Repeat.png no estan optimizados los espacios y se genero una imagen muy pesada. Tal vez el menu con sprites tambien quedaria mejor.

[jeybi]

Iniciado por Triby

1- Reglas: Hay un par de reglas que no cumplieron, como el validado de HTML y CSS, asi como enlaces a los validadores; Algún elemento contenedor de anchura variable, implementadas vía css, tiene que tener esquinas redondeadas, si bien, hay dos bloques con esquinas redondeadas, su anchura es fija.

Respecto a las esquinas redondeadas eran opcionales, pero si te fijas el contendor principal tiene un borde redondo (de 3 px creo) .

Iniciado por Triby

2.2- Orden de presentación. Bien presentado el contenido, solo me "hacen ruido" algunas cosas como tener dos divs para presentar un texto simple en el footer.

Solo como observación, la idea de usar sprites es aligerar la carga de peticiones al servidor, pero en http://www.devillasbuenas.es/fdw/may.../No-Repeat.png no estan optimizados los espacios y se genero una imagen muy pesada. Tal vez el menú con sprites también quedaría mejor.

Aunque si falto una buena optimización (falta de tiempo) los sprites cumplen su cometido en verdad, las imágenes por separado pesan un poco mas que los 116KB que pesa esta (+ peticiones), además no queríamos romper las reglas y usar mas de 4 imágenes . Al otro equipo les falto ese punto, ya que si te fijas tienen mas de 4 imágenes y creo que no usaron sprites en ninguna parte.

Mm, no veo la forma de hacer ese menú con sprites (o sin ellos) ya que al no cargas las imágenes no se apreciarían las opciones. ( simples <li><span class="invisible">Item</span</li> sin mucho que aportar).

Tienes razón sobre el footer, no se como rayos quedo ese DIV hay, creo que se coló al codear el Sticky Footer.

De todas formas, gracias por la reseña triby, seriamos mejores webmasters(?) si mas gente se esforzara en dar criticas como las tuyas.

PD: kseso? al "liberar" los archivos me refería a que los postearas para descarga, asi podrían ver como se estructura el árbol jerárquico(que para mi es un aspecto importante). Solo es una idea.

Saludos

[Triby]

jeybi, sorry si hubo una confusion respecto a las esquinas redondeadas, me base en el pdf donde, segun mi interpretacion, no eran opcionales; lo de los 3 pixeles, la verdad, es dificil verlos.

En cuanto a los sprites, la foto del coche por separado (u optimizada) ayudaria a reducir considerablemente el tamaño total de imagenes. WA solo usaron los sprites en los contenedores de la columna izquierda.

Ambos equipos fallaron en respetar el uso de 4 imagenes, las del menu tambien cuentan.

Iniciado por jeybi

Mm, no veo la forma de hacer ese menú con sprites (o sin ellos) ya que al no cargas las imágenes no se apreciarían las opciones. ( simples <li><span class="invisible">Item</span</li> sin mucho que aportar).

No soy partidario de crear los menus solo con imagenes, sin embargo, una opcion podria ser: <li><img src="transparente.png" alt="texto alternativo" /></li>, no digo que sea lo mas eficiente, pero es practicamente el mismo resultado, pero les hubiera permitido jugar con efectos hover, logrando mejor presentacion.

A fin de cuentas, como ya lo mencione dos mensajes arriba, hablamos de cuestiones de apreciacion, solo digo lo que veo y con la mejor de las intenciones.

[kseso?]

Iniciado por jeybi

PD: kseso? al "liberar" los archivos me refería a que los postearas para descarga, asi podrían ver como se estructura el árbol jerárquico(que para mi es un aspecto importante). Solo es una idea.
Saludos

Ahora sí, Jeybi. Comprendido.

No lo había creído necesario, ya que se pueden tener con "guardar la página completa" en la de WA que es "unipágina", y en vuestro caso al llevar un "todos los derechos..." al pie no hubiera podido.
Pero ahora que lo mientas, ese aspecto (la organización de los archivos) es algo que no recuerdo que se haya sometido a valoración. Y es un aspecto que puede tener su miga en proyectos amplios, sí.

[jeybi]

Iniciado por Triby

jeybi, sorry si hubo una confusion respecto a las esquinas redondeadas, me base en el pdf donde, segun mi interpretacion, no eran opcionales; lo de los 3 pixeles, la verdad, es dificil verlos.

En cuanto a los sprites, la foto del coche por separado (u optimizada) ayudaria a reducir considerablemente el tamaño total de imagenes. WA solo usaron los sprites en los contenedores de la columna izquierda.

Ambos equipos fallaron en respetar el uso de 4 imagenes, las del menu tambien cuentan.



No soy partidario de crear los menus solo con imagenes, sin embargo, una opcion podria ser: <li><img src="transparente.png" alt="texto alternativo" /></li>, no digo que sea lo mas eficiente, pero es practicamente el mismo resultado, pero les hubiera permitido jugar con efectos hover, logrando mejor presentación.

A fin de cuentas, como ya lo mencione dos mensajes arriba, hablamos de cuestiones de apreciación, solo digo lo que veo y con la mejor de las intenciones.

Bueno en ese sentido es cierto, por hay recuerdo haber sacado un car.jpg mucho menor en tamaño.

Sobre los sprites, solo usamos 4 imágenes, No-Repeat, Y-Repeat, X-Repeat, y la del contenedor principal. Las imágenes (<img />) del menú no cuentan:

Iniciado por http://www.devillasbuenas.es/fdw/mayo/rookies.pdf

Uso de
"esprites"
para las imágenes implementadas via css, con un máximo de 4 archivos de imagen para
contenerlas.

Se que lo haces con la mejor de las intenciones y desde un punto de vista critico, no te preocupes no lo tomo a mal .

Iniciado por kseso?

Ahora sí, Jeybi. Comprendido.

No lo había creído necesario, ya que se pueden tener con "guardar la página completa" en la de WA que es "unipágina", y en vuestro caso al llevar un "todos los derechos..." al pie no hubiera podido.
Pero ahora que lo mientas, ese aspecto (la organización de los archivos) es algo que no recuerdo que se haya sometido a valoración. Y es un aspecto que puede tener su miga en proyectos amplios, sí.

Jeje, sorry por la leyenda, supongo que uno se acostumbra a dejarla siempre hay . Lo decía a manera de información solamente, para al que le interesara.

Saludos

[willyfc]

Muchas gracias Triby por el análisis detallado.