Encuesta: Votación hdennison vs dalvenjha

[XLogus]

Veamos primero las propuestas del duelo entre hdennison vs dalvenjha

Primero veamos la propuesta de hdennison
http://hdennison.com/forosdelweb/

En mi caso, he decidido hacer una pequeña aplicación web, utilizando lo siguiente:

contentEditable
El texto de la carta puede ser editado por el usuario.
localStorage
Los cambios realizados se guardan en el propio navegador, para próximas visitas.
AJAX
El contenido escondido (selectores de tipografía) solo se carga cuando es requerido.
@font-face
El documento puede utilizar tipografías no instaladas en la maquina del visitante,
Javascript
He usado jQuery 1.4.4 sin ningún plugin, pero se podría hacer todo con JS básico.
CSS
Para el CSS, he usado html5doctor.com reset css, y he tratado de escribir mi código basándome en las directivas de OOCSS


Internet explorer
Aunque no era un requisito obligatorio, he intentado que toda la aplicación sea compatible con Interet Explorer.
Esto lo he conseguido principalemente gracias a:

HTML5 IE shiv
Para poder utilizar elementos HTML5
HTML5 IE shiv

Selectivizr
Permite el uso de varios selectores CSS3, como por ejemplo nth:child(even)
Selectivizr

CSS3 PIE

Permite el uso de algunos efectos CSS3, como en mi caso border-radius
CSS3 pie

Y ahora la propuesta de dalvenjha

http://web.cap.org.pe/concurso/ index
http://web.cap.org.pe/concurso/prueba.html una de las internas


Todas las opiniones y comentarios son bienvenidos

[Dalvenjha]

=) Listo quedamos a punto.

Saludos

[bng5]

Entré dispuesto a votar por el que me gustara más, pero está muy dificil. Son cosas muy diferentes.
¿Cuál era la consigna?

Iniciado por XLogus

AJAX
El contenido escondido (selectores de tipografía) solo se carga cuando es requerido.

Quedó clarisimo lo del contenido escondido, pero eso no es AJAX.

[Dalvenjha]

http://www.forosdelweb.com/f95/duelo...venjha-852727/ estas son las bases.

[hdennison]

Iniciado por bng5

Quedó clarisimo lo del contenido escondido, pero eso no es AJAX.

Hmm, no es que esté cargado en el DOM y escondido, ese contenido no existe en la página cuando entras.

Cuando se requiere, se hace una petición ajax que carga contenido nuevo en la página, sin refrescarla.

Se usa $.get, que es una de las funciones jQuery para pedir contenido por AJAX


O igual estoy tremendamente equivocado, todo puede ser ;)

[hdennison]

Lo que opino yo de todo esto (si, me voy a mojar, si me lo permiten):

Primero temas de visuales:

1º Se nota claramente quien ha dedicado un mes al reto, y quien ha dedicado una semana.
Por organización de proyecto (fechas, trabajo constante) Dalvenjha debería ganar claramente.
Otra cosa es lo que comentan por ahi, que tal vez sea "demasiado" para un reto de un foro, que parece que lo haya hecho con otro fin, aprovechando el reto.
No me parece que esto sea malo, de hecho yo estuve pensando en hacer lo mismo :D

2º El diseño de Dalvenjha me gusta, es limpio, las transiciones / animaciones en jQuery están muy bien aplicadas, no se ven demasiado rapidas o lentas o lo que sea.. todo encaja.

En mi caso el diseño es un apaño rápido por que me organicé mal y no tuve tiempo de diseñar. Dalvenjha gana de nuevo.

Despues del almuerzo me paso a evaluar código ;)

[Dalvenjha]

Nuevamente debo agradecer a mi rival (Solo en este ejercicio ya que reconozco su calidad y es algo que le he dicho por mensaje privado), por los comentarios que hace, debo admitir que mi trabajo es también a la vez semilla de lo que puede ser mi próximo website, a que se debe esto? a que pienso que aunque sea un concurso debería ser algo funcional, y también a que me gusta abarcar demasiadas cosas a veces, debo admitir que yo tb me quedé corto de tiempo, esto se nota en cosas como el footer de la página interna, que es practicamente un apaño, y en ciertas cosas del código que no pude llegar a ordenar mejor.

Los efectos visuales que he puesto, creo que varios saben que soy un efectista y que me gusta sorprender desde la mirada, desde lo visual, sin embargo esta vez he tratado de ser sútil, las animaciones y los cambios creo que no son tan bruscos, incluso el uso de recursos como @font-face en la página interna, está solo destinado a títulos y al footer.

He tratado de hacerlo lo más crossbrowser posible, en ie se ve practicamente igual, solo por algunos detalles distintos que tuve que adaptar.

Hdennison ha hecho un aplicación interesante, ha usado html, el cual no usé pq no tiene buena respuesta en opera, que no lee bien los 'article' y 'section', y opera es mi navegador por defecto, así que tuve que dejar html5 de lado.

Tb usó @font-face y tiene un código ordenado y limpio, creo que es clara la calidad de Hdennison en todo esto, por ello van mis felicitaciones y como comenté en algún momento por interno, espero en algún momento trabajar en algún proyecto con él porque no para empezar en algún reto css por equipos.

Saludos y mucha suerte!

[hdennison]

Bueno, el tema del código lo voy mirando poco a poco, cosillas que me llaman la atención:

CSS:
Tanto Dalvenjha como yo (y el resto de mortales) usamos las clases propietarias a diestro y siniestro, aun siendo no necesarias. Por ejemplo "opacity:0; -moz-opacity:0; -webkit-opacity:0;"
A día de hoy -creo que- con "opacity" funciona en todos los navegadores modernos, no hace falta usar clases propietarias.

En el caso de Dalvenjha me soprende mucho el excesivo uso de clases que parecen no necesarias.
Si -por ejemplo- tenemos un ul (#listatra), que todos sus links tienen la misma clase (.listatra) y entiendiendo que esta clase no se reutiliza en otro sitio
podría definirse perfectamente como "#listatra a"

He utilizado este caso como ejemplo, pero otros parecidos.
Poniendonos frikis, incluso podrías cambiar la clase ".art" por "[id^="artic"] sin ningún problema entre navegadores.
Lo mismo puedes hacer con class="unicaci" id="ubicacion3" => [id^="ubicacion"] .
Te ahorras clases y vacilas bastante con el compañero de mesa ;)

En mi caso he intentado ser lo más conciso posible, y utilizar selectores CSS3, pero claro, con tan poco código lo tengo más fácil..

HTML:
El valdidador de código se vuelve loco con la página de Dalvenjha (74) errores, aunque todos son muy facilmente solucionables.
A saber:
· El documento no lleva etiqueta title !
· document type does not allow element... Creo que todos estos se solucionarán cuando le pongas title.
· general entity "XXX" not defined... La tontería de los & y & en las urls. El validador salta... pero es un fallo a tener en cuenta como tal?

·there is no attribute... El flash de groovershar está embebido utilizando etiquetas XHTML no validas. Hay varias soluciones por ahi para que no pase esto.

· <textarea type="text Textarea no tiene type!

74 errores pueden parecer muchísimos, pero son todos solucionables en cuestión de minutos, el daño no es tan grave.

En mi caso la página valida perfectamente. Igual que en el CSS, tampoco tengo demasiado código, sólo faltaba que estuviese mal escrito :P

JS:

Aqui ando bastante verde.
El código de Dalvenjha me parece correcto, bien ordenado.. etc.

En mi caso, lanzo la pregunta al aire ¿por que hay una etiqueta script embebida en el archivo fonts.html ? ¿No hay mejor manera de hacer esto?
El problema era definir funciones javascript a elementos que todavía no están cargados en el DOM, que luego cuando se crean no heredan el comportamiento. ¿Se podía haber resuelto usando .live() o similares?


Y con esto acabo mi despiece, resumiendo:

En el caso de Dalvenjha veo un proyecto bien diseñado, bien implementado (con errores minúsculos), usando XHTML y plugins de jQuery mayormente. Me ha sorprendido el uso de CSS3 "transition" especialmente en mozilla.
Buen trabajo en general, poca innovación.

En mi caso: un proyecto muy pequeño en todos los sentidos: poco diseño, poco código.
Pretendía jugar con cosas nuevas de HTML5, uso selectores y propiedades CSS3 sólo para demostrar que se puede y que son facilmente reproducibles en IE (aunque no era requisito del reto).
Pocas cosas, muy concretas: es más un experimento que un sitio web.


Por cierto, gracias a todos por vuestro interés y colaboración, a Dalvenjha el primero ;)

[valentina4you]

Cómo "jurado" en la parte de diseño voy a realizar el feedback. Voy a organizarme por puntajes del 1 al 10 para puntuar de la manera más correcta.




Equilibrio:
Creo que ambas páginas tienen un equilibrio, viéndolo bien me parece que todo esta bien distribuido en las páginas. Claro que hay más contenido en una más que en otra, pero igualmente comparto que está bien equilibrado. al tener una mayor contenido de página se debe reconocer este mérito ya que no es lo mismo equilibrar 3 o 4 partes que todo el contenido de una web.

hdennison: 8
dalvenjha: 10




Gama de colores:
Cómo ya se dijo más arriba está claro quién le dedicó más tiempo a la página, en el caso de hdennison debo decir que los colores están bastante bien para el contenido, pero aún así a mi en particular hay algo que me molesta, que si toda la página esta en escala de grises el bordeado punteado en dónde está el texto sea azúl, me recuerda a el bordeado de html que te coloca en las imágenes cuando tienen un link, por ejemplo, el internet explorer. Me parece que no tiene conjunto de nada y que si quisiera hacerse destacar debería haber sido un color que quedara mejor con el resto de la gama seleccionada. El resto me parece bien.

La página de dalvenjha debo de confesar que me gustó muchísimo. En el index me encuentro con algo que definitivamente llama mi atención y que me genera un equilibrio de color y composición visual. Si entrara en una página así definitivamente llamaría mi atención como diseñadora. Creo que la gama de grises que escogiste refleja un cierto grado de elegancia y sobriedad en el diseño y que las imágenes le dan el toque de color necesario. Creo que no podría estar mejor.

hdennison: 6
dalvenjha: 10





Efectos visuales:
En la página de hdennison no tengo ningún efecto visual para calificar.

En las páginas de dalvenjha debo decir varias cosas, ya que son varios efectos. Empezando por el index, cómo te han dicho creo que la transición de las imágenes tiene el tiempo justo y necesario, y por otra parte quiebra el color gis del resto de lapágina de forma correcta. Por otro lado el efecto de los botones al pasar el mouse también me gusta mucho, tanto el color como la sutilidad con que se realiza el efecto.

La otra página pasa algo similar, los colores utilizados para los efectos están acorde a la gama seleccionada y la transición del efecto es sutil, otro punto para otorgarle elegancia a un sitio.

hdennison: Sin Puntaje
dalvenjha: 10


Final:

And the winner is.... jeje

Creo que para mi el claro ganador es dalvenjha
Felicitaciones! y Gracias a los dos por concursar.

[hdennison]

Oye que tengo un slide! :P

Ahora en serio, comparto plenamente la opinión/veredicto de valentina4you.

Gracias por la colaboración y para futuros retos tendré mas en cuenta el diseño, que si no me tiras de las orejas ;)

[XLogus]

Coincido en gran medida con lo que dice Valentina4you

En cuanto a diseño no se puede decir mucho más de lo que dijo ella, así que me dedicaré a hablar de la programación.

Uso de modernas tecnologías
Si bien es cierto que Dalvenjha ha hecho uso de javascript y jquery para los efectos, hdennison ha hecho algo más interesante usando HTML5 y mostrando como funcionan algunas de las características de este.
En ese punto creo que hdennison gana por mostrar algo nuevo.

XHTML/HTML5
En el caso de hdennison hay solo una adevertencia, mientras que en el trabajo de Dalvenjha hay 74 errores y 91 advertencias. Hay errores desde los más clásicos hasta horrores como el de no haber cerrado correctamente la etiqueta HEAD

Aqui también gana hdennison

CSS
En el caso de hdennison hay solo una advertencia mientras que en el caso de Dalvenjha hay 419 y aunque se pueden justificar algunos problemas por la necesidad de usar hacks que hagan el sitio compatible con Internet Explorer, varios problemas allí podrían haberse prevenido especialmente de código CSS que esta sobrando.


Accesibilidad
En cuanto a hdennison no hay mucho que decir ya que no hay muchos elementos aunque es interesante que al usar HTML5 el sitio sea semánticamente correcto. En el caso de Dalvenjha ninguna imagen tiene el atributo ALT, ningún link tiene título y sin javascript la página simple y sencillamente no funciona. Así que en accesibilidad obviamente esta jalado :)

SEO
Ya se este no era un criterio dentro de la competencia pero no esta demás mencionarlo, ninguno de los 2 se preocupó de ese tema, en el caso de Dalvenjha al usar javascript para mostrar las distintas secciones termina matando la posible indexación por los buscadores.

[Dalvenjha]

Gracias Miguel, jajajaja saludos y gracias por tu colaboración.

[valentina4you]

Iniciado por hdennison

Oye que tengo un slide! :P

Ahora en serio, comparto plenamente la opinión/veredicto de valentina4you.

Gracias por la colaboración y para futuros retos tendré mas en cuenta el diseño, que si no me tiras de las orejas ;)

Jaja, como diseñadora me gusta ver cosas bonitas y como he estudiado en marketing "el empaque vende" mejor tirar las orejas así se aprende más y la próxima es mejor. :)

[hdennison]

Solo una persona me ha votado y va a parecer que he sido yo.. :D

[algoparapensar]

Tengo problemas para acceder al site de hdennison, en realidad no accede , a otro le pasa lo mismo? o esta caido? soy yo? hay algun truco?

[DragonX]

Iniciado por algoparapensar

Tengo problemas para acceder al site de hdennison, en realidad no accede , a otro le pasa lo mismo? o esta caido? soy yo? hay algun truco?

Tenes que ingresas y antes de que carge todo el sitio dale: atras, atras, adelante, cuadrado, cuadrado ..... y le haces la fatality!

[Dalvenjha]

Jajajajaja!!!! FINISH HIM!

http://www.youtube.com/watch?v=A3LK1...has_verified=1

[pao01]

Tampoco puedo ingresar al sitio de hdennison.

[metacortex]

hdennison, si tienes problemas con el servidor envíame el pack comprimido de tus archivos a metafdw en gmail para publicártelo.

[algoparapensar]

Tenes que ingresas y antes de que carge todo el sitio dale: atras, atras, adelante, cuadrado, cuadrado ..... y le haces la fatality!

aahhh.... es cuadrado, cuadrado... yo le estaba dando equis, equis, cuadrado...

[kahlito]

Iniciado por XLogus

Veamos primero las propuestas del duelo entre hdennison vs dalvenjha

Primero veamos la propuesta de hdennison
http://hdennison.com/forosdelweb/

Por ahora tampoco puedo entrar

[hdennison]

Perdonad las molestias, ayer tuvimos un error crítico en el servidor de mi empresa y llevamos 20 horas non-stop restoreando backups de todos los clientes.

En cuanto tenga un momento para respirar subo copia de mi proyecto.

[Hidek1]

avisa cuando este up el sitio... no quiero votar sin ver ambos antes :P

[zerokilled]

me apunto porque queria ver este debate.... pero no puedo hacer las calificaciones sin antes ver los trabajos. esperare a que hdennison traiga las buenas nuevas con el enlace.

[hdennison]

Os dejo un enlace a dropbox, para que por lo menos os lo podais bajar:

http://dl.dropbox.com/u/5227793/forosdelweb.rar

Gracias ;)

[Dalvenjha]

He subido el trabajo de Hdennison al siguiente espacio:

http://buenaondaperu.org/forosdelweb

[SPAWN3000]

-> Como lo veo, el trabajo de Dalvenjha lleva mas tiempo de desarrollo y las imagenes con el uso de jquery aumentan su nivel de impresion en el usuario.

-> El de hdennison es mas investigativo.

Mi calificacion Dalvenjha= 9.1(4 diseño & cantidad), hdennison=8.6(4 innovacion & variedad).

Al contrario de la opinion mayorista, me inclino por el trabajo de hdennison le sumo 1.1 a su puntaje. Por cosas que no habia visto en otras web's, y por el formato de codificacion.

Pero el en general el esfuerzo de ambos es muy bueno. Gracias por compartirlo.

[kahlito]

Iniciado por Dalvenjha

He subido el trabajo de Hdennison al siguiente espacio:

http://buenaondaperu.org/forosdelweb

La verdad es que ni en este ni en el anterior consigo ver la web de Hdennison

[hdennison]

Parece que mi blog ha muerto definitivamente... :(

Gracias por subir una copia a tu servidor dalvenjha ;)

[RadamantiusS]

No pude ver ningun trabajo, ambos sitios caidos :(