Pao01 vs David El Grande (votación de duelo CSS)

[skatomundo]

Iniciado por algoparapensar

Muy bueno el "duelo", muy buena la idea, muy buenos los contenidos y muy lindos trabajos.
Listo mi voto.

¿por quién?..... ¿por quién?

[algoparapensar]

Iniciado por skatomundo

¿por quién?..... ¿por quién?

Por el que mas me gustó...

[David]

Gracias a todos por los comentarios.

Sobre las playeras, Christian debería entregarnos el paquete para que podamos repartir pero hasta ahora no llegó nada .

Iniciado por TonyChile

[...] lo del boton que no hace nada David el Grande mejor no lo pones [...]

¿Los botones del menú? Los puse ahí nada más por cuestión estética. Podría haber puesto contenido, pero ya estaría en contra de las reglas de la competencia. Así que prefería dejarlos pero indicando claramente (con el title y con el tachado en el hover) que no estaban disponibles .

[Shiryu_Libra]

yo vote y no dije nada verdad

bueno, la verdad yo vote por el mas intuitivo (facil de consultar) y sencillo de mirar
se nota a grandes rasgos que Pao, es una artista de Diseño (Quien se atreveria a objetar eso, cierto) y sabemos que Deivid, es un gran programador (sin barba :P)

se denotaban los puntos debiles de cada uno....

pero hay unos detallitos que mire en la seccion de "Testimonios".... asi que eso hizo que me decidiera a dar el voto, por el mas accesible

[pao01]

Muchas Gracias a todos nuevamente.
Gracias Webosiris, ya voy a ir viendo todo lo que me citaste para mejorarlo.

[Rafael]

Felicidades a los 2.

El voto es libre y secreto, por eso no voy a decir por quién lo hice, pero comento algunas cosillas. No he revisado el código, pero a vista de buen forohólico (alguna ventaja debería tener ciertas adicciones)...

Aparentemente Pao, le dedicaste mucho esfuerzo a las ilustraciones, (o probablemente todo lo contrario por la facilidad que tienes, la del test como que va para convertirse en un clásico), pero creo que el trabajo propiamente de aprovechar el css para facilitar la experiencia del usuario (user experience) se quedó un poco corta. Por un favoritismo (ya había hechado mis respectivas porras) visité tu sitio primero, y luego el de David, y hasta que visité el de David me dí cuenta de las diferentes secciones, por lo que hasta la 2a visita ví lo del test por ejemplo.

El css es para controlar lo que sucede en la página, no mediante absolutos, sino control, y el control es lo que da la libertad. Te arriesgaste poco y recurriste a la caballería ilustrativa.

El tuyo David se nota que aprovechaste diferentes cosas del Css, esto se ve principalmente en el formulario, claro y no cansado para leer y llenarse (no lo llené, de veras, no soy tan forohólico).

Cuando la información y su fácil acceso es lo que cuenta es clara la navegación... Pero también se notó un poco el recurrir a algunos bienaventurados cliparts. La navegación principal se quedó corta a los botoncitos mac (o hp) enviar del formulario.

Estos comentarios chicos igual y los saben más que yo. Lo pongo como una crítica constructiva para los lectores también.

Así que mi voto es para...

[kseso?]

Voy primero con el index de Pao. El método es el mismo que hemos seguido en alguna otra ocasión via mp con el objetivo de mejorar o corregir el código. No pretendo ser exhaustivo, pero sí que sea de utilidad práctica para la autora. Y supongo que el castigo a mi osadía vendrá en los sucesivos mp que esto generará con Pao
Antes de nada más, mi enhorabuena a Pao por lo conseguido a nivel de código. Hace menos de 5 meses no había escrito ni una sóla línea de html o css. Y hoy su trabajo nos deja con la boca abierta.

Esta premisa no es para Pao, sino para quienes lean este comentario sin conocernos lo suficiente.

Pero vayamos al grano:

Comienzas definiendo en el body el tamaño del texto en px, y sigues usando esa medida para más textos. Posiblemente te marcará fallo en hera.
En algunos casos defines fuentes "no seguras" como Palatino Linotype sin añadir una segunda familia alternativa.

#contenedor
creo que no has visto qué ocurre si redimensionas la ventana del navegador. ¿Te liaste para conseguir centrar tu página? (si esa era tu intención). Deberías cambiar todas su propiedades por

#contenedor {
background:#CFCDC0;
margin:0 auto 15px;
overflow:hidden; /*ver más adelante por qué*/
width:792px;
}

Porque ahora el centrado sólo lo consigues únicamente para un caso muy concreto.

No utilizas una gran ventaja de css: La Herencia. Si le hubieses colocado los padding laterales te hubieses ahorrado definir todos los mágenes laterales de sus contenidos. Igualmente con el color de fondo (#CFCDC0) que defines reiteradamente en muchos elementos.

La cabecera:
Has colocado el nombre con una imagen y no como fondo del div, reforzado con un h1 oculto por css. Bien. Supongo que en previsión de deshabilitar el css. Pero ¿y si el problema fuese que no carguen las imágenes pero sí el css?
Creo que hubiese sido más acertado en el h1 suprimir el "display: none", posicionarlo absolutamente y ocultarlo con ayuda de un z-index menor que el z-indez de #cabecera img y ya de paso, eliminamos el div "sin bautizar" que tienes para alojar la imagen.

Menú:
Bien por las acceskey, pero me costó adivinar qué eran los numeritos entre paréntesis. Teniendo espacio suficiente hubiera quedado más explícito añadiendo algo como "tecla de accseso 1".

#cuerpo
Quizás algo de divitis. Párrafos directamente en él y la imagen con una clase para colocarla en línea y flotada a la derecha.
A las dos cajas contenidas aquí le tienes dada altura, supongo que para evitar zonas sin fondo #CFCDC0, pues ambas están flotadas con lo que su padre no "crece". Por eso el "overflow" de #contenedor.
Me sorprendió encontra aquí <h2>Testimonios</h2> cuando los testimonios los tienes en el siguiente contenedor. Sería más lógico que estuviese con ellos.

#contestimonios
Creo que la parte que menos me ha gustado de tu código.
Quizás está separado de más del contenido superior por las alturas de #caja1 y #caja2 como te decía antes.
Coincido con quien te comentaba (¿cvander?) de haber colocado los <li> con los testimonios inmediatamente debajo del <h2> y sin usar fondo para el :hover, como haces con el resto de enlaces tanto en el menú como el pie.
Yo hubiese optado por prescindir del "onclick" y buscar una solución sólo con css.
Colocas todo el contenido del testimonio dentro del mismo enlace <a> con las limitaciones y peligros que ello conlleva, supongo que porque no caíste en que un li puede alojar todo lo que necesites en su interior. Así podrías haberte ahorrado esos <br /> que has empleado para simular texto.

#pie
Algo separado de los testimonios por la altura que tienes definida para éste último.
Lo tienes declarado 2 veces en el css y algunas de las propiedades son innecesarias, como "margin:auto" cuando su anchura es la misma que la de su padre.
su resalte lo confías de nuevo a la imagen de fondo, sin declarar color y sin que quede cubierto por su contenedor en este aspecto. De los peligros de ello ya te comentaba antes. Pero en este caso, yo habría optado por suprimir la imagen y esas dos líneas horizontales lograrlas mediante dos <hr /> con su respectiva clase y color de fondo.

Bueno, Pao, ¿seguimos siendo amigos? Recuerda que fuiste tú quien me animó a hacer esto así y de forma pública

[pao01]

Rafael, Muchísimas Gracias.

Kseso?, . Enormes Gracias!!!!

Seré lo más honesta posible a fuerza de cometer sincericidio, cuando David me invitó a esta batalla sentí pánico. David tiene cierta fama de genio que por mucha inexperiencia o mucha iniciación que él declare es difícil creerle.
Considerando mis puntos flojos (diseño y código), pues me di a la tarea de intentar remar la situación.
Para ello recordando algún consejo que Paolamurias me diera en la primer competencia (cruzada diseño-código), decidí emplearlo. De ahí la idea de ilustrarla.
Es obvio que suplí una carencia con aquello en lo que me sentía cómoda.
Respecto al código es mi tercer incursión en él y reconozco a medida que avanzo un poco que no tengo errores sino bestialidades, en muchos casos por partir de premisas erróneas y desconocimiento general en la materia.
Por tal motivo Kseso?, que te hayas tomado el trabajo de analizar el código al detalle es sumamente enriquecedor para mí. De cada crítica que se ha realizado he obtenido respuestas a interrogantes y hasta han hablado de cosas que no conozco y me obligan a investigar, probar y seguir aprendiendo.
Por tal motivo se agradece, éste tipo de análisis es más complejo de realizar y se valora muchísimo considerando el tiempo que han depositado en él.

Respecto a los pedidos de las playeras:
Con calma, la primera serie ya se ha agotado. Tenemos a nuestros diseñadores trabajando en nuevos modelos, continúen llenando formularios.

[TonyChile]

David el Grande
¿Los botones del menú? Los puse ahí nada más por cuestión estética. Podría haber puesto contenido, pero ya estaría en contra de las reglas de la competencia. Así que prefería dejarlos pero indicando claramente (con el title y con el tachado en el hover) que no estaban disponibles .

Gracias por la aclaracion dejenme seguir felicitando a ambos muy buenos trabajos aun stoy indeciso con el voto

[David]

Es sólo fama, mi estimada Paola, sólo fama; que la realidad es otra cosa .

Es verdad lo que te comenté sobre la poca experiencia (principalmente en CSS). De hecho, una de las razones por la cual te invité a la competencia fue la de aprender un poco más de todo esto gracias a las críticas que se hagan (kseso?, espero ansioso también tu análisis de mi trabajo).

Como había comentado en un principio, el diseño no es lo mío, y una de las cosas que justo quería ver es el dilema en que probablemente se encontrarían los jueces al ver que el diseño es el fuerte de uno y el código del otro (aunque, claro, el diseño tiene ventaja, es apreciable por todos, mientras que el código no)

Ya, después de la paliza que me estás dando, necesito unas vacaciones .

Un saludo.

[kseso?]

Iniciado por David el Grande

(kseso?, espero ansioso también tu análisis de mi trabajo)

¡si aun no llegó tu cheque. Ni camiseta tampoco!
Y eso que rellené tres veces cada formulario

[TonyChile]

David el Grande
Como había comentado en un principio, el diseño no es lo mío, y una de las cosas que justo quería ver es el dilema en que probablemente se encontrarían los jueces al ver que el diseño es el fuerte de uno y el código del otro (aunque, claro, el diseño tiene ventaja, es apreciable por todos, mientras que el código no)

Te entiendo y apoyo yo tampoco soy diseñador y cuando hay que hacer ambas cosas pucha q cuesta jajajaja y claro esta que el diseño importa ya que es lo primero y casi lo unico que se ve de una pagina la gente no se mete a ver el codigo puesto que no sabe que cresta es

Pero aunq el diseño no es lo tuyo no esta nada mal lo que hiciste por eso para mi a sido dificil la decicion ya que graficamente ni hablar de lo que hizo Pao01 pero para alguien como yo que no soy diseñador sino analista el diseño no lo es todo es solo una parte del todo y lo mismo pasa con el codigo puede ser muy bueno pero necesita un entorno grafico bueno por eso me esta costando decidirme
Wuaaaaaaaaaaaaaaaaa aun no se por quien votar

[Rafael]

Yo separaría el "diseño" en una parte funcional y otra estética. Normalmente pensamos en diseño como la parte estética solamente.

Creo que la página de David es más funcional, la información es más organizada visualmente, y eso es ya una parte importante del diseño.

Por otro lado el css da control a diferentes niveles, a grandes rasgos, por un lado layout o maquetación y por otro a nivel legibilidad del texto. En estos puntos creo que tu diseño David tiene ventajas sobre el de Pao.


Off-topic:

¡EEhhhhh, mi post 1,500. ! Espero no haber puesto 1,500 barbaridades a lo largo de este tiempo

[daPhyre]

Que alegría ver que después de tanto tiempo de andar perdido en la dimensión desconocida, aún se junta la misma gente para los mismos temas y con los mismos objetivos.

Bueno, solo me queda analizar con detalle y dar mi veredicto. Suerte a ambos!

[worldPeace_Plis]

Hola me pase un rato divertido leyendo toooodoos los post acerca de esta -mu'buena!- competencia. Pao tu trabajo me gusto mucho, creativos los testimonios, esas tres columnas en historia, ...en fin, todo excelente!

Ni hablar mi estimado David...Ahi va mio voto! Pao es Grande jejejeje!

Muchas Felicitaciones a ambos, muy buenos trabajos, ...yyyyyy ¿cuando la siguiente competencia?, esta padrisimo

PD: Porque no hacen una grafica de eliminatoria, tipo los torneos grand slam, asi el q gana pasa a la siguiente ronda

[erick_arcini]

Iniciado por worldPeace_Plis

...PD: Porque no hacen una grafica de eliminatoria, tipo los torneos grand slam, asi el q gana pasa a la siguiente ronda.

Esa es buena, pero quien va a donar los "€"

[PosicionamientoSeo]

¡Excelente duelo CSS!

[rolygc]

me gusto mucho, sobre todo el sentido del humor utilizado !!! es muy creativo y ayuda mcuhisimo a seguir observando el sitio entero, un gran trabajo felicidades a ambos

[kseso?]

David
Qué atrevimiento voy a cometer, enjuiciar un código de quien es maestro en ellos.
Lo que sigue está hecho con las mismas premisas y considerandos que los de Pao. Y cómo no, con mi felicitación por tu trabajo.

1ª sorpresa agradable: pie siempre abajo pese a que sólo lo necesitas en el index.
Hay un pequeño desplazamiento al pasar a otras páginas desde el index debido a la aparición del scroll vertical. Quizás en este caso concreto yo lo evitaría modificando en 1px el margen de #pie. Pero es una cuestión de gustos.

Recurres a una imagen para colocar el nombre de la página, en este caso como fondo. Al igual que Pao, la refuerzas con un h1 "oculto" con css, en tu caso con un desplazamiento del mismo fuera de la vista (text-indent:-99999em;). Pero el peligro es si no cargan las imágenes y el css sigue activo. Nos quedamos con un gran espacio blanco y sin nombre de la página.

En la cabecera, con la imagen, creo que tu intención fue alinearla con el borde de "testimonios":



pero como puedes ver en la imagen, al estar colocada respecto a la esquina izquierda no siempre se consigue. Sí lo conseguirías si su referencia fuese la esquina derecha, (#testimonios es de anchura fija, #contenido es variable).

Agradable sorpresa el doble subrayado de fdw utilizando la etiqueta <acronym ...>, pero se te pasó etiquetar las siglas del pie.

El borde negro del menú creo que desentona, mejor utilizar el mismo color del de #testimonios y haber dejado los dos a la misma altura, y ya que hay espacio, haber colocado también aquí un enlace a los testimonios.

Un vistazo al html nos descubre que utilizas las acceskey, pero sin indicar de ninguna forma su existencia al visitante.

Y en el css, de fácil lectura y seguimiento, descubrimos alguna sorpresilla más: listas de definición para los testimonios, el uso de párrafos flotados para la imagen de los testimonio, y cada uno de ellos en su "bockquote". Quizás hubiese sido más acertado colocar cada <p class="flotante"> dentro de su respectivo <blockquote>.

¿Y del diseño? No, no voy a decirte nada, que ya lo has dicho tú reiteradamente. Simplemente una reflexión en voz alta: "Jugar" algo más con las tipografías y los colores y sus matices. Páginas como http://www.colourlovers.com/ y similares, pueden serte de ayuda.

Después de todo no he sido tan malo, ¿eh, David?

Y ahora tendría que emitir mi voto. Pero ocurre que nunca me ha gustado ver esto como competencias o actividades con la finalidad de decidir quién lo ha hecho mejor, sino para recibir opiniones/sugerencias, puntos de vista distintos al del autor y así ir mejorando.
Por ello, creo haber cumplido ya con los artistas y el regalo que nos han hecho.

Un saludo.

[David]

Antes que nada, muchas gracias por haberte tomado el tiempo de hacer el análisis.

Algunas consideraciones:

Iniciado por kseso?

David
Qué atrevimiento voy a cometer, enjuiciar un código de quien es maestro en ellos.

¿Maestro de los códigos? Naaah

Iniciado por kseso?

Recurres a una imagen para colocar el nombre de la página, en este caso como fondo. Al igual que Pao, la refuerzas con un h1 "oculto" con css, en tu caso con un desplazamiento del mismo fuera de la vista (text-indent:-99999em;). Pero el peligro es si no cargan las imágenes y el css sigue activo. Nos quedamos con un gran espacio blanco y sin nombre de la página.

Es cierto, en este caso lo hice así después de ver cómo se hace generalmente (algunas páginas destacadas en esto de la web semántica y CSS), y la forma más común es la de ocultar completamente el texto. Aunque, como mencionas, convendría haber usado z-index para ocultarlo.

Iniciado por kseso?

En la cabecera, con la imagen, creo que tu intención fue alinearla con el borde de "testimonios"

En realidad ni me había fijado que se alineaban . Aunque, realmente, desde el punto de vista estético quedaría mejor si lo hubiera alineado. Gracias por observarlo.

Iniciado por kseso?

Un vistazo al html nos descubre que utilizas las acceskey, pero sin indicar de ninguna forma su existencia al visitante.

Lo hice en el title del elemento ("Tecla de acceso: X"). Aunque, ciertamente, es recomendable que esté lo más visible posible al usuario.

Iniciado por kseso?

Quizás hubiese sido más acertado colocar cada <p class="flotante"> dentro de su respectivo <blockquote>.

En este punto me había quedado pensando justamente a la hora de marcar. Pero en el momento lo interpreté como que <blockquote> al ser un elemento de cita debería contener únicamente la cita como tal y no al autor de la cita y su avatar (puede que sea así o no, no sé cuál es la recomendación específica de la W3C al respecto -si la hay- o en cuestión de accesibilidad y semántica).

Iniciado por kseso?

¿Y del diseño? No, no voy a decirte nada, que ya lo has dicho tú reiteradamente. Simplemente una reflexión en voz alta: "Jugar" algo más con las tipografías y los colores y sus matices. Páginas como http://www.colourlovers.com/ y similares, pueden serte de ayuda.

Muchas gracias por la recomendación, voy a revisar la página. Y, por cierto, aunque como comenté, el diseño no es lo mío, no por eso debo dejar de aprender al respecto. Así que cualquier sugerencia puntual sobre ello es igualmente bienvenida.

Gracias nuevamente, un análisis muy didáctico. Tomaré en cuenta los puntos que mencionas .

Un saludo.

[jomaruro]

Hola:

Enhorabuena a los dos por sus trabajos, son fantásticos. Mis conocimientos no me permiten valorar el código, así que me basaré en el diseño para emitir mi voto. Y lo siento David pero mi voto es para Pao. Aunque he de reconocer que me reí bastante con los dos trabajos.

Saludos.

[Calizman]

Uff... Yo he andado algo atareado... pero aun no quiero dar mi voto hasta conocer a fondo los dos trabajos... Se que la fortaleza de David es el codigo, y que la fortaleza de Pao es el diseño. Se que los dos explotaron al maximo sus fortalezas... Asi que he de tomarme un tiempo mas para dar mi opinion...

Hasta Luego!!

[Mikmoro]

Y el exhaustivo análisis de kseso? es la razón principal de que no haya hecho el mio propio: excelente trabajo, brother

Sólo añadiré que creo que el trabajo de David ha estado más orientado a la accesibilidad y compatibilidad, lo que tiene mi enhorabuena.
Aparte de eso reiterar que es el reto que más me ha gustado hace tiempo, por el contenido y el resultado.

Mi más sincera enhorabuena a los dos.

[pao01]

Gracias Mikel, se agradece de verdad la crítica; viendo pues la coincidencia con el análisis de Kseso?, ya tendré por donde ir estudiando para mejorar.
PD: Disculpa por destrozar tus preciosos códigos. Loada sea Migración sin dolor

[TonyChile]

Iniciado por CaLiZzZ

Uff... Yo he andado algo atareado... pero aun no quiero dar mi voto hasta conocer a fondo los dos trabajos... Se que la fortaleza de David es el codigo, y que la fortaleza de Pao es el diseño. Se que los dos explotaron al maximo sus fortalezas... Asi que he de tomarme un tiempo mas para dar mi opinion...

Hasta Luego!!

si no es llegar y dar un voto prque ambos tienen diferentes cualidades por eso es dificil yo tampoco e decidido mi voto.

Mikmoro
Y el exhaustivo análisis de kseso? es la razón principal de que no haya hecho el mio propio: excelente trabajo, brother

Sólo añadiré que creo que el trabajo de David ha estado más orientado a la accesibilidad y compatibilidad, lo que tiene mi enhorabuena.
Aparte de eso reiterar que es el reto que más me ha gustado hace tiempo, por el contenido y el resultado.

Kseso? tambien te felicito muy bueno tu detallado aporte
Q DIFICIL POR QUIEN VOTO

[Mikmoro]

Si lo cojo un rato quizá te pueda decir alguna cosa más, como cualquiera, claro, pero realmente coincido mucho con kseso?.

[kseso?]

Sí, sí, bonitas palabras, pero el cheque y la camiseta sin llegar.
¿Tendré que hacer grupo social con Job (santo Job)? nah...
Los artistas y su trabajo se lo merecían.
(pero es grato leer ciertas cosas) Gracias, Mik.

[tepitenio]

Me da verguenza opinar en un hilo con tantos participantes estrellados (con muchas estrellitas en el karma) pero la tentacion es mas fuerte. Con respecto a los diseños me parece que el de Pao es mejor tecnicamente, pero el de David es mas prolijo y eficiente a la hora de mostrar la info. Ademas es mas "navegable" o "amigable" como quieran decir.

Ambos trabajos me gustaron, pero si se pudiera, daria mi voto al que tuvo la idea de Foroholicos Anonimos. Hace poco que empece con los foros y me he convertido en un foroholico, especialmente de FDW y ya casi ni laburo, estoy todo el dia chequeando si hay algo interesante. Ya reemplazo la lectura del diario y ver que hay en YouTube. Sigan asi!!!!!!

[Mikmoro]

Estaréis orgullosos: ¿recordáis alguna competencia CSS con 51 votos individuales (y algunos que opinan y declaran preferir no votar)?

Eso os debe poner muy orgullosos, porque habla claramente del aprecio y cariño que os tiene mucha mucha gente a ambos

[pao01]

Gracias Mikel, de veras que he sentido muchísimas cosas a lo largo de esta competencia:
locura total al aceptar el reto y demasiado cariño de todo el mundo.
Es el trabajo que más feliz me ha hecho y no lo digo por los votos, sino por resultados que jamás hubiera esperado en cuestión del avance que persigo, aunque sepa que todavía falta aprender demasiado.
Ha sido un gran aliciente a mantenerme y seguir intentándolo porque vale la pena.