Duelo: Santany vs dachux (LLego el Valiente)

[Carlos Santany]

Hola que tal soy Carlos, soy nuevo registrado en estos foros aunque siempre he sido fiel seguidor (como lector) de forosdelweb, me gustaría aportar mi granito de arena a este gran foro que me ha ayudado para desarrollarme como webmaster.

Pues bien, viendo que las competencias estan casi muertas y teniendo en cuenta que me encantaría participar, pues lanzo el reto a cualquier persona que quiera enfrentarse en un duelo CSS conmigo (Tengo Nivel Medio, pero no importa si ustedes son avanzados, aqui se viene a divertirse y a aprender que es lo primordial).

¿Por que me gustaría participar en una competencia?

Pues bien, actualmente estoy impartiendo un curso en una universidad, sobre el Desarrollo Web 2.0, y me gustaría que mis alumnos aprendieran un poco más con CSS y que vieran la competencia.

Bueno esto creo que seria todo, aver si alguien se anima y nos damos duro jeje, les dejo mi MSN por si alguien gusta agregarme, ya que no conosco a muchas personas de por aqui, pero espero conocerlas y hacerlas colegas.

Venga, un Saludo y espero al primer valiente.

NOTA: El que acepte el reto tendra que poner las reglas, el tema, fecha de entrega y demás, si la fecha de entrega fuera pasando esta semana estaría genial ya que por esta semana tengo unos proyectos encima.

Atte. Carlos Santany.

EDITADO: Ya tengo competidor, el usuario Dachux (Jesus), esperamos sea un duelo a muerte jeje, que gane el mejor.

[Carlos Santany]

¿No hay ningun valiente?...

[Carlos Santany]

Pues bien un gran valiente me ha agregado para ponernos de acuerdo (dachux), estamos viendo que temas podriamos usar, las fechas y las reglas del juego, si alguien tiene temas interesantes le agradeceria los pusiera por aqui, como bien lo dije aqui se viene a aprender y a divertirse.

[Carlos Santany]

Bueno aqui les dejo un tema que seria muy interesante:

Día Internacional de la Mujer

¿Que opinan?

Y como imagen podría ser esta:
i.mota.ru/3d/img/3d_1036.jpg

Espero tu respuesta Dachux, por aqui o por MSN, saludines.

[yournightmare86]

Me parece buen tema! Siempre que la foto sea ams pequeña jeje. Seguiré este duelo, que ésta sección anda un poco muerta. Saludos.

[sergiold]

Ánimo a los dos a ver que nos presentais.

Saludos,

[Carlos Santany]

Gracias por el apoyo chicos, ya hablamos Jesus y yo, y llegamos a un acuerdo en lo que compete a las reglas y fechas, mas tarde el se pasara por aqui y me confirmara.

Reglas (Establecidas por los 2):
-La Web debe verse igual en IE y FF.
-Debe ser un documento css valido sin ningún warning.
-Debe ser un documento XHTML valido.
-Debe obtener por lo menos un promedio de 9 en el validador de accesibilidad (eXaminator).
-No debe haber enlaces muertos... (#).
-Fecha de entrega: 19 y 20 de Marzo de 2007.

Pues creo que serian todas, las votaciones yo creo que serian desde el día en que los 2 mostraramos nuestros trabajos, bueno espero tu confirmación DaChux.

Venga que esto se pone bueno.

[DaChux]

te confirmo y acepto todo. Para el texto se podria usar
http://es.wikipedia.org/wiki/D%C3%AD...er_Trabajadora

Un saludo

[DaChux]

Bueno Santany, como llevas la página? conectate al msn o escribe por aqui, yo ya tengo algun boceto hecho. Espero terminarla para mediados o finales de semana...

Un saludo

[yournightmare86]

Tengo mucho interés por ver sus resultados. ¿Al final el tema fué la mujer trabajadora?
Saludos.

[sumolari]

estaré atento al duelo

[Carlos Santany]

El Diseño que te mostre no lo presentare, estoy pensando en otra idea, se va a poner interesante, el domingo se los publico, saludos.

[Carlos Santany]

Pues bueno, como yo fui el que inicio el duelo, pues sere el primero en presentarlo, asi que aqui les dejo mi humilde creación (recíen hecha hace 40 min) lo que pasa es que estuve muy ocupado y no pude hacerle todo lo que quería, pero pues este es mi sitio para el duelo, espero les guste...

Apartir de que DaChux publique el suyo, que empiecen las votaciones...

www.ratefunnyface.com/Duelo/index.html

Les comento un poco...

-HTML Válido
-CSS Válido
-9.7 de Promedio en accesibilidad (me falto un punto, pero me dio flojera terminarlo).
-Se adapta perfectamente a cualquier resolución.
-Mmmm creo que sería todo, ya todo depende de ustedes.

Un Saludo y le agradesco a Dachux la oportunidad de participar en este duelo, espero participar en algunos más.

[DaChux]

Pues yo tambien pongo la mia. Me ha faltado retocar algunas cosillas, pero al final no tenemos todo el tiempo que queremos, asi que ahi va:
http://www.serviciopymes.com/8marzo/

A mi de primeras me ha validado el xhtml, el css y me ha pasado sin errores el wcag AAA.

Y un saludo para Santany, un placer hacer amigos aunque sea por el msn.

Bueno, ya nos comentais, esperamos vuestros votos

Saludetes

[Carlos Santany]

Muy buen sitio te creaste Dachux, me gusto mucho, que gane el mejor.

[Shiryu_Libra]

muy buenos los dos sitios , fue un detalle el poner el Día Internacional de la Mujer, es complicado inclinarse a un lugar,

dado que la sencilles que tuvieron los dos en la creacion de los sitios es algo de admiracion, y es algo que me gusta mas a mi.

puedo decir empate??

[Carlos Santany]

Gracias...

Score:
Santany 1
DaChux 1

[AlvaroG]

Carlos Santany:
Visualmente muy bueno, un gran trabajo.

En Opera se ve un tanto "raro", no se va el recuadro negro hasta el final, asumo que es un caprichito de Opera porque hay temas más importantes que mencionar.

El código fuente es bastante limpio, sin embargo usás cosas como <p><span class="texto">.....</span></p> que creo que no son la mejor forma de hacer las cosas.
También hacés cosas como <p><strong>1910</strong></p>, cuando esta clase de subtítulos debería ir con alguno de los <hX>, <h5> por ejemplo.
Estás también llamando a la hoja de estilos con un import, cuando sería más sencillo llamarla con una etiqueta <link> (aunque eso no sea un error).

Sin embargo lo que más me preocupa es lo que al parecer hiciste únicamente para llegar a los puntos de accesibilidad: los 3 enlaces de la barra horizontal tienen el mismo "acceskey", y el documento relacionado "start" provoca un 404. Y me parece que hacer esas cosas va completamente en contra de la accesibilidad.

DaChux:
Un diseño muy bonito también, gran trabajo. Has manejado muy bien el html, solo puedo disentir en el uso de los <a name...>, personalmente prefiero vincularlos usando id="", pero sé que no funciona en el IE

Solo un problema: no has vinculado a los validadores de HTML y de CSS.


Mi voto: Aunque visualmente están muy bien ambos, en el uso de HTML la diferencia es muy clara.
Además, si bien la cabecera del diseño de Santany es más bonita, el uso de las imágenes por parte de DaChux hace que la lectura del artículo sea más amena.

Mi voto va para DaChux, sin dejar de reconocer el excelente trabajo de Carlos Santany.


Saludos.

[PatomaS]

Hola gente

Solo aportaré algunas cosas de las que he visto, no quiero aburrir mucho si no apuntar hacia ciertos detalles que son mejorables de forma fácil y que deben ser tenidos en consideración. Alguna de las cosas que menciono ya han sido mencionadas, disculpen por la repetición. Da mucho valor a la imagen de la chica en la zona superior izquierda, afectando a la relación estética - contenido.

Es un buen esfuerzo y una página bastante buena en líneas generales que, obviamente, tiene cosas que mejorar, pero podemos decir que su autor va por buen camino.

Bueno, veamos ...
__________________________________________________

La página carga bastante rápido, es fácil de leer tiene una buena estética, sencilla y clara. Su menú superior es un despropósito por no tener que ver con el contenido, pero estéticamente está bien. El degradado de fondo está bien, aunque debería abarcar más de la página o al menos pasar al blanco como último paso de forma que no se note el salto entre el final de la imagen y el fondo.

1. HTML:
El <blockquote> está mal usado, se debe usar para tabular citas, no bloques de texto.

Podemos asumir la buena intención del uso al estar tabulando un texto copiado de otra página, pero dado que el texto se copió entero, no se usa <blockquote>. Si se usa, se deben usar itálicas en el texto entero, lo que dificulta su lectura, por lo que no es aconsejable. Finalmente, dentgro del bloque tabulado, está incluida la fuente del artículo, lo que es un error o refuerza la teoría de haber usado el <blockquote> para tabular.

El accesskey se usa para facilitar o acelerar el acceso a secciones importantes de la página, en este caso, solo se usa para llegar al vínculo de la fuente del artículo, lo cual, no es prioritario en la página en si. Las otras 3 apariciones de accesskey, son aun menos relevantes y están mal hechas ya que usan la misma tecla.

@import se usa para importar reglas a un documento css desde otro, aunque es posible usarlo en el propio documento html como la llamada al css principal, ese es un uso incorrecto. El único sentido de usar @import en el propio html, es llamar de forma condicional a reglas extra dependiendo del navegador o alguna otra situación.

El <link href="documento.html" rel="start" type="text/html" title="Documento" /> llama a un documento que no existe.

Los <span> dentro de las <p> para poner el texto, son inncesarios.

2. css:

La clase texto no hace nada en el código ya que mantiene las propiedades del body y estas son hereditarias.

La clase ajuste no tiene sentido, se usa un clear: both pero no hay floats que limpiar.

Las clases asignadas a los "headings" son incorrectas, se están usando las h? para maquetar y no para indicar jerarquía o estructura.

La solución para la presentación del título con y sin css es ingeniosa.


3. Accesibilidad:

El menú superior debería ser accesible mediante acceskey (diferentes).

Si se va a usar un cambio de color en eventos, como en el menú superior, el color debe ser legible o el texto debe mimetizarse totalmente con el fondo, aunque la segunda opción es menos adecuada.

Las opciones de los menús deben cambiar de color o forma una vez visitados.

El contenido debe ser lo primero que aparezca en el código de la página o debe ofrecerse una forma de llegar directamente al mismo.

El texto del vínculo "HTML" está en inglés y no realiza la validación como debería. ¿Significa el texto que me llevará a un documento xhtml 1.0 transicional válido?

El texto del vínculo "CSS" dice "Documento CSS válido" ¿significa que ese enlace me llevará aun documento css válido? ¿a dónde lleva ese vínculo?

El texto del vínculo "Accesibilidad" dice "Promedio: 9.7" ¿es eso útil de alguna manera? ¿qué significa? ¿a dónde lleva ese vínculo?

4. Usabilidad:

El menú superior debe llevar a las secciones de la página, jamás fuera del propio sitio.

El texto del vínculo "HTML" está en inglés y no realiza la validación como debería. ¿Significa el texto que me llevará a un documento xhtml 1.0 transicional válido?

El texto del vínculo "CSS" dice "Documento CSS válido" ¿significa que ese enlace me llevará aun documento css válido? ¿a dónde lleva ese vínculo?

El texto del vínculo "Accesibilidad" dice "Promedio: 9.7" ¿es eso útil de alguna manera? ¿qué significa? ¿a dónde lleva ese vínculo?

5. Generalidades:

Todo texto con secciones debe tener un índice que permita identificar y acceder a las secciones mencionadas.

Esta página no pasa la validación de nivel 2 de taw. Aprobar los análisis automáticos es el primer paso, pero deben comprobarse y solucionarse los elementos de revisión manual.

La página pesa más de 430 KB, para algo tan sencillo como esta y tomando en cuenta que el contenido solo pesa poco más de 10 KB, no debería superarse los 30 KB.
__________________________________________________

Felicidad

[PatomaS]

Hola gente

Solo aportaré algunas cosas de las que he visto, no quiero aburrir mucho si no apuntar hacia ciertos detalles que son mejorables de forma fácil y que deben ser tenidos en consideración. Alguna de las cosas que menciono ya han sido mencionadas, disculpen por la repetición. Da mucho valor a la imagen de la chica en la zona superior izquierda, afectando a la relación estética - contenido.

Es una página bastante buena, con ciertas deficiencias provocadas seguramente por la búsqueda del cumplimiento de puntos determinados en las validaciones, lo que indica falta de claridad en la acción y la toma de decisiones pero proactividad en el trabajo. Hay futuro en ello.

Bueno, veamos ...
__________________________________________________

La página carga bastante rápido, no es tan fácil de leer como se esperaría debido al excesivo alto de línea y el reducido tamaño de letra, tiene una buena estética, sencilla y clara. El menú superior debería tener un interlineado menor que el de los párrafos, no solo para mejorar su estética, si no para aprovechar mejor el espacio. El contador de visitas de Google en la parte inferior se ve muy pequeño, al menos yo que solo veo el texto.

Los iconos de los servicios de validación deberían estar vinculados.

La estructura de la página y la estructura del código es bastante buena y clara.

1. HTML:
Los textos alternativos de las imágenes deben describir lo que está en la foto, al menos brevemente. No deben ser confundidos con el título de la misma.

Debería aportarse metainformación en la página, al menos en la cabecera.

Los textos alternativos de los vínculos deberían dar una descripción del destino del vínculo.


2. css:
La regla @charset "utf-8"; es innecesaria ya que no se usan nombres de clases o instancias de objetos con caracteres ajenos al ASCII.

En el body hace una referencia al tamaño de fuente como "62.5%", sin embargo, no hay una indicación previa de tamaño, por lo que este porcentaje será aplicado de forma diferente en diferentes navegadores.

Las clases definidas de la forma #contenido h2, ocupan valiosos KB de descarga ya que todos los elementos referenciados están dentro del contenedor "contenido", es decir, su mención es redundante.

El uso de clear en el objeto footer y los h?, es inadecuado, clear es para limpiar o eliminar el efecto de los posicionamientos con float. En esta página, los float se usan en imágenes que están dentro de textos, es decir, en elementos inline dentro de elementos block.


3. Accesibilidad:
El menú superior debería ser accesible mediante acceskey.

Las opciones de los menús deben cambiar de color o forma una vez visitados.

El contenido debe ser lo primero que aparezca en el código de la página o debe ofrecerse una forma de llegar directamente al mismo.

Los textos de las imágenes del taw, xhtml y css no tiene textos descriptivos. Lo mismo que ocurre con las imágenes de los textos.


4. Usabilidad:
El alto de línea es demasiado, haciendo difícil distinguir entre un párrafo nuevo y un punto y seguido en algunos casos.


5. Generalidades:
Los números entre corchetes en algunos títulos no ayudan a clarificar nada, si se quiere indicar al usuario que poseen teclas de acceso rápido, es mejor hacerlo desde una página de ayuda.

Si vemos la página sin imágenes y con estilos, los textos alternativos de las imágenes parecen parte del texto, no hay diferencia visual suficiente para saber que son algo aparte.


__________________________________________________

Felicidad

[DaChux]

gracias por los comentarios, solo una cosilla

El uso de clear en el objeto footer y los h?, es inadecuado, clear es para limpiar o eliminar el efecto de los posicionamientos con float. En esta página, los float se usan en imágenes que están dentro de textos, es decir, en elementos inline dentro de elementos block.

Antes de los h o del footer hay una lista que flota a la derecha, esto en el explorer hace que se "monte" la lista con el footer o con los h, por eso le aplique el clear

En el body hace una referencia al tamaño de fuente como "62.5%", sin embargo, no hay una indicación previa de tamaño, por lo que este porcentaje será aplicado de forma diferente en diferentes navegadores.

Lo puse asi justo por eso... es decir, si yo cambio el tamaño de la fuente desde mi explorador, y luego veo una pagina que me define el tamaño de la fuente... no le veo mucho sentido, por eso le doy 62.5%, asi el que haya cambiado la fuente por que lo quiere ver todo mas grande lo vea...

Explicame eso de que cuando ves la pagina sin hojas de estilo no diferencias la descripcion de las fotografias con el texto... la verdad, no habia probado a verla sin css, pero ahora que lo pruebo las descripciones de las fotos directamente no las veo.

Un saludo

[PatomaS]

Hola

Bueno, lo de las fuentes, aunque tu enfoque es válido, es parcialmente incorrecto debido a lo siguiente. Usaré un par de ejemplos nada más, pero supongo que te valdrá la idea.

Firefox, Netscape, K-meleon y algunos otros, permiten definir un tamaño inicial de fuente, el cual, la mayoría de la gente no manipula, este tamaño, suele ser 16. La medida, si no recuerdo mal la definición de especificaciones de Netscape y similares, es en pixels, asumamos por el momento esa definición. En explorer, los tamaños son del 1 al 5, basados en las definiciones de tamaño de css xx-small, small, medium, large, x-large; estos tamaños son relativos y no absolutos, aunque claro, tienen valores iniciales, los cuales, yo desconozco.

Aunque ambas formas ofrecen tamaños similares de base, no son iguales y en algunas ocasiones se nota un montón. Por eso, si un explorer tiene omo base el tamaño xx-small y de eso ponemos el tamaño de 62%, queda una fuente de aproximadamente 6 pixels, lo que es ilegible.

Resumiendo, debes hacer que la página sea accesible a la mayoría y ara la minoría, debes ofrecer formas de hacerla tan cómoda, usable y accesible como para el resto.

Sobre el clear, en efecto usas floats en elementos como la lista que mencionas, sin emargo, la mejor forma de posicionarla, es definir las dimensiones de un elemento de bloque, ubicarlo tan a la derecha como desees y despues allí poner la lista. Esta podría estar usando float o inline. Sin embargo, tienes razón en que olvidé mencionar eso en mi comentario previo.

Otra cosilla, es que los altos de línea no son iguales en explorer y en firefox. Mi comentario anterior, está basado en la definición misma del estilo usado, no entré en detalles específicos de como se ven las cosas en uno u otro, solo en análisis de los códigos y lo que la experienca me indica. Si comparo como se ven en diversos navegadores, hay más diferencias, sin embargo, no son graves en general, son detalles que habría que cuidar o depurar si fuera un proyecto final, comercial o personal, pero que por ahora no son tan importantes.

Sobre la descripción de las fotos cuando no veo las imágenes. Bueno, como sabrás, al no estar la imagen, debe verse el texto alternativo de la misma, si yo desactivo el uso de imágenes en firefox, veo los comentarios del mismo tamaño que el texto, así que cosas como "fotografia principios de siglo", lo veo al lado de "Las referencias sobre el ...", no exactamente alineados, pero bastante cerca en altura. La página la estoy viendo en un portatil viejo con una pantalla que ya tiee muchas horas de combate encima, por lo que no ofrece grandes variaciones cromáticas. Pero eso es justamente a lo que voy, ambos textos, si miro la página por encima, parecen ser parte del conjunto narrativo y no un comentario alternativo paralelo o extra.

Felicidad

[Shiryu_Libra]

PatomaS

excelente la forma de orientar a los competidores, creo que estos comentarios aunados a los de alvlin, indica perfectamente a donde se debe dirigir para crear estos sitios codificados de la mejor manera posible. incluso me he quedado asi . definitivamente excelente.

[sumolari]

Me gusta más el de dachux, pero el de carlos está muy bien tambien.

[Carlos Santany]

Gracias por sus comentarios los tomare en cuenta, jeje como comente arriba en mi post, fue un maqueteo de 45min ya que durante toda la semana estuve ocupado al igual que DaChux de ultimo momento los 2 estabamos terminando los sitios jeje, pero bueno no es excusa, muy acertados los comentarios de todos, muchas gracias, espero mejorar para mi próximo duelo.

[yournightmare86]

Yo también voto por Dachux. El de Carlos hubiera sido bastante bueno de haber acompañado imágenes al texto. Saludos.

[MaXaC]

Felicitaciones a ambos participantes por los trabajos, mi voto es para dachux, puesto que como mencionan, tiene el codigo mas correcto, aunque visualmente el de Santany esta muy bien

Tambien quiero felicitar a PatomaS y alvlin, sus comentarios son excelentes, y ayudan y orientan a todos los miembros del foro, incluyendome.

Me gustaria participar en un duelo, tal vez el subsiguiente a este, puesto que ahora ando con el tiempo ajustado.

Saludos

[stock]

Muy buenos los sitios, mi voto va para dachux, aunque me gusto uchola cabecera de santany.

have funnnnnnnnnn

[DaChux]

pues gracias a todos por oponiar, y especialmente a patomas.

Un saludo y hasta la proxima ;)