Foros del Web » Creando para Internet » CSS » Competencias CSS »

Votaciones Competencia Enero 09

Estas en el tema de Votaciones Competencia Enero 09 en el foro de Competencias CSS en Foros del Web. Por la simplicidad me quedo con las de aresillo, buzu y juaniquillo, en mi opinión son las que permiten leer los contenidos más comodamente. En ...

  #31 (permalink)  
Antiguo 05/02/2009, 05:30
Avatar de facundocorradini
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Argentina
Mensajes: 965
Antigüedad: 9 años, 8 meses
Puntos: 52
Respuesta: Votaciones Competencia Enero 09

Por la simplicidad me quedo con las de aresillo, buzu y juaniquillo, en mi opinión son las que permiten leer los contenidos más comodamente.


En cuanto a la competencia, me parece una excelente idea, pero la estructura HTML que han usado carece de semántica (sobre todo faltarían algunos h1 y h2!) lo que sin dudas limita mucho. Por otra parte, estaría bueno usar un HTML idéntico y que solo se cambie el stylesheet, como ocurre en CSS Zen Garden. (y si la próxima vez usamos directamente el html de ZenGarden?)


La próxima competencia avisenme! no frecuento los foros de CSS pero colaboro bastante en la parte de SEO, usabilidad y accesibilidad, y me encantaría mostrar algunos de mis trucos con CSS :D
__________________
<<==== Si una respuesta te ayuda, dale al botón de Karma! Haz fluir la buena onda web!
  #32 (permalink)  
Antiguo 05/02/2009, 19:11
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Votaciones Competencia Enero 09

Bien, como son muchos trabajos a analizar y justamente este martes he comenzado un trabajo bastante grande, voy a empezar por poner un somero análisis de los 5 primeros trabajos de la lista. Está claro que mucho se pasará por alto, pero es que son muchos y muchas cosas a apreciar.

Comenzamos. Que nadie se lo tome a pecho porque entre tantos trabajos seguro que nos dejaremos muchas cosas de buenas y de malas que resaltar, además de que esta es una situación un tanto comprometida, vamos, como para hacer amigos

Aresillo:

Una imagen limpia y clara, bien comercial. No me gusta nada que se muevan cosas en la pantalla sin mi interacción (de hecho está bastante desaconsejado), como el gif comercial.
El diseño es estático y en una resolución menor de 1.000px de ancho aparece el scroll horizontal. Con dos aumentos de zoom (en FF) se descuadra. No me gusta que los gráficos de fondo de los menús sean estáticos, porque al crecer el tamaño de letra los fondos no les acompañan, descuadrándose de inmediato hasta salirse enseguida.

El logo y la cabecera son muy agradables, pero tienen un problema importante a mi juicio: si se usan imágenes relevantes como fondo, el problema es que al faltar las imágenes no aparecerá un texto alternativo, y teniendo en cuenta que el h1 ha sido ocultado y que el propio nombre de la empresa queda representado en la imagen de cabecera, al desactivar las imágenes nos quedamos sin nombre y sin h1.
En resumen, a mi entender no hay que usar imágenes relevantes como fondo, porque no tienen texto alternativo ni posibilidad de descripción larga.

Se ha conseguido un buen código compatible y se visualiza a la perfección en IE sin hacks de ningún tipo.
Se ha respetado la navegación con teclado resaltando los elementos activos. Se proporciona un método para saltar grupos de enlaces, pero sólo sería útil para navegadores de texto, ya que no es visible, de manera que para navegación con teclado (cuando es más necesario) no aparece.

El código CSS limpio y ordenado. Alguna pequeña cosa innecesaria como repetir el ancho de la cabecera o por ejemplo, teniendo un selector como #cajaestilos ul, siempre es mejor marcar en el siguiente la ruta por claridad (#cajaestilos ul li en lugar de #cajaestilos li), sólo por una cuestión de orden, no imprescindible.

El HTML parece bien correcto, claro y bien estructurado, haciendo uso en general de los elementos adecuados, echando de menos algunos elementos header (h2, h3, etc.) en lugar de divs para los títulos de secciones. Creo que sobra el penúltimo div vacío de corte (<div class="corte"></div>), que parece estar por olvido o precaución.

Se ha pensado bastante en la accesibilidad y se han aplicado cosas, pero aunque no hay errores automáticos de nivel AAA, hay más errores que aciertos, en cuanto a que hay elementos en movimiento, el texto no redimensiona correctamente, no hay descripciones largas, las teclas de acceso directo en principio están ocultas y no se nos informa explícitamente o están visibles en el primer acceso, los saltos de grupos de enlaces están ocultos, no se adapta en absoluto a la ventana del navegador, no hay nombre de la empresa o slogan a falta de imágenes, el contraste de color del texto es muy muy justo para gente con problemas de visión, etc.

En resumen una página bonita y profesional, con errores subsanables.


P.D.: el diseño (que no es mi apartado) es bonito y muy poco arriesgado. No me gustan nada las fotos de "catálogo" de diseño web (señorita con micrófono).


Willyfc

Diseño dinámico adaptable a la resolución, pero con un par de serios problemas: no hay un tamaño mínimo, por lo que nunca deja de reducir y colapsa todo, y por otro lado, el texto blanco del menú hace que al salirse de su sitio por reducción de la ventana quede sobre el fondo claro, por lo que casi desaparece (el primer carácter ya en 800 salta).
A mi entender no parece una agencia de diseño web, ni convencional ni todo lo contrario.

Los elementos del menú van acompañados de un número pero no sabemos qué significa (lo sabemos, pero mucha gente nunca lo sabrá).

Se visualiza perfectamente en IE6 así que el código parece bien compatible.

La visibilidad de dónde se encuentra uno navegando con el teclado es escasa. La imagen de cabecera tiene un texto alternativo igual al título, por lo que va bien sin imágenes.
Desactivando la hoja de estilo se conserva la estructura ordenada, así que el flujo del documento parece adecuado. Es bastante extraño que el primer elemento h1 sea el "contáctenos" de la dirección, y luego otro h1 del título del bloque de texto. Se desaprovecha el sentido de la jerarquía de los elementos header a mi entender.

Se tiende a no usar estilos de letra "serif" en la web porque dificultan la lectura, así como al contrario, en papel la hace más cómoda. En este caso el serif y el escaso tamaño inicial son un punto en contra.

La CSS está bien estructurada. Hace uso de cosas como "min-height:100%;height: auto!important;height:100%;" para conseguir un alto de toda la pantalla (buen recurso sin ser un hack), aunque los diferentes indentados dificultan un poco su lectura.

Nunca había visto la fuente de letra "spinwerad", y al menos en mi sistema no funciona, porque no la tengo. Alguna posible pequeña mejora pero en general se ha tendido a agrupar ahorrando código.

En definitiva un trabajo digno, en el que algunos detalles de indefinición malogran un poco, y en el que creo que no se ha pensado en exceso en la accesibilidad.


DoPeY-BBS

Da la sensación de que una vez hecha la cabecera y el menú no hubiera habido tiempo de más y se hubiera entregado con el resto casi sin hacer.
Diseño estático que no se adapta al navegador y con menos de 1.000px ya saca el scroll horizontal. La cabecera y el menú ocupan más de media pantalla de alto, lo que deja poco espacio para el contenido y obliga al scroll sin haber mucha cosa.

Va bien en IE6 sin problema. Al agrandar el texto (CTRL+) los elementos del menú montan sobre el texto que no se desplaza, debido a que el menú tiene un alto fijo y no empuja al texto hacia abajo.

No hay muchas ayudas a la accesibilidad ni la navegación, careciendo de teclas de acceso directo, saltos de bloques, etc.
La imagen de la cabecera está insertada y cuenta con texto alternativo, aunque no con una clara descripción (longdesc o un alt más esplícito).

El diseño es tan simple que al desactivar la CSS se sigue viendo perfectamente ordenado.
El HTML es limpio y sencillo, y está comentado, pero no hay elementos header que den lógica a la estructura jerárquica.
El código CSS es claro y sencillo, está bien aprovechado y agrupado, con dos pequeños detalles: suele ser habitual agrupar al principio los elementos genéricos (aunque ni mucho menos obligatorio) con "p", h1, etc.. También es preferible seguir una misma pauta, y cuando se referencia un selector con su ruta tipo "div#menu li a {...", es preferible que el resto también lo hagan, y en lugar de div#menu a:link, seguir con div#menu li a:link. Esto es sólo claridad a la hora de comprender rápidamente cada selector.

En conclusión, un trabajo excesivamente sencillo y poco elaborado, aunque limpio y muy correcto para alguien algo más principiante que otros, y sin grandes errores que resaltar.
__________________
Visita mi nueva web idplus.org
  #33 (permalink)  
Antiguo 05/02/2009, 19:11
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Votaciones Competencia Enero 09

Triby

Igual que el anterior, diseño estático que a menos de 1.000px obliga al scroll horizontal. Medianamente comprensible por los elementos visuales de la parte superior. En Firefox obliga incluso al scroll horizontal en 1024 debido a lo ajustado de la medida (960px).
En IE no parece haber ningún problema, por lo que el código parece bien compatible.

Aunque las imágenes no pueden ofrecer texto alternativo tampoco son excesivamente relevantes para el contenido, y el uso correcto del h1 para el título hace que éste cumpla su función tanto sin imágenes como sin CSS.

Los gráficos con fondos fijos y los elementos acomodados dentro hacen que el diseño difícilmente se sostenga en un tamaño de letra diferente al que está pensado. Eso hace entre otras cosas muy arriesgado usar un tamaño de letra en "em", porque si el visitante usa un tamaño mayor el diseño se descompone por completo enseguida. El fondo hace que se sacrifique la accesibilidad en ambos casos.
Un gusto personal, el texto sobre objetos (gráficos) nunca lo veo bien porque no me deja leer cómodamente. Bonito el diseño de los comienzos de párrafo.

La navegación con teclado no es nada visible, no hay ayudas de ningún tipo y por ejemplo, el innecesario vínculo en el título principal de la página (a mi gusto), hace que al tabular se detenga ahí el cursor, lo que resulta molesto.
Hasta el momento el único trabajo que he visto que cita las fuentes de sus elementos no propios (quizá lo haya en alguno anterior pero no me ha llamado la atención)

Muy trabajado el menú de los otros diseños para acomodarse a la curva del gráfico.
Este trabajo no presenta una cabecera al uso sin embargo el HTML comienza con un <div id="cabecera">. Correcta organización de los elementos header (h1, 2 y 3). Todo un detalle dejar en el menú inferior los corchetes fuera de los enlaces para que no actúen ni cambien de color.

Hasta el momento el HTML más limpio a mi gusto. No observo problemas ni cosas reseñables en el CSS, que es ordenado, comentado y más bien claro. Se agradecería tender a colocar las propiedades en el mismo orden, aunque esto es cosa personal.

En definitiva otro buen trabajo, diría que más orientado a conseguir un diseño curioso que vendible, limpio y correcto en el código aunque muy poco orientado a la accesibilidad.


Javi_cassi

Otro caso más de tamaño fijo que no adapta y obliga al scroll horizontal por debajo de 1.000 px (todos habéis ido a por el diseño, teniendo en cuenta que era una competencia XHTML+CSS).
Igual que se ha descrito, una bonita cabecera y un diseño más bien elegante, sin embargo en ausencia de imágenes nos quedamos sin nombre de la empresa.
Como el cuadro de texto tiene un tamaño fijo para evitar que se descomponga el diseño, al aumentar el tamaño de letra aparece un scroll sólo en ese cuadro poco estético y práctico a mi entender.

El cuadro de los diseños es más curioso y añade algo de movimiento a la página, aunque lógicamente sin CSS se destroza (es lo más natural por hacer algo más arriesgado y necesitado de CSS en una mayor amplitud).
Los iconos de las validaciones muy bonitos, de hecho creo que si me lo permites te los voy a robar par aun trabajo que estoy haciendo.

La navegación sin ratón es imposible, porque no se ha usado ningún evento que indique dónde se encuentra el cursor. No hay ninguna ayuda a la navegación, ya que existiendo teclas de acceso no son visibles ni se informa de ninguna manera de su existencia. Considero recomendable que las teclas de acceso sean números del 0 al 9, algo que se está intentado semi-estandarizar. Es desaconsejado que se indique la acción de un enlace sólo mediante el color (negro a blanco en tu caso), siendo preferible que aparezca un subrayado, un outline u otro elemento que apoye un poco el resaltado.

En IE todo se ve perfecto sin hacks de ningún tipo. Parece que hasta ahora ha sido una de las mejores cosas: todos los trabajos que he visto han conseguido código compatible.

Aunque el HTML es más bien claro y sencillo, hay un importante error de jerarquía, apareciendo un elemento h1 ocultado mediante CSS y tras él un h4 como único elemento header, evitando así la lógica de estos elementos. El cuadro de diseños tiene lógicamente un exceso de imágenes (2 por trabajo). Quizá se podría haber intentado resolver de otra manera, aunque no creo que sea fácil; hubiera sido una buena demostración.

El código CSS es limpio y bastante ordenado. Encuentro un cierto abuso de la posición absoluta, y no alcanzo a comprender por qué lo LI del menú superior tienen una clase distinta cada uno.

Resumiendo, buen trabajo elegante y algo más arriesgado que los demás hasta ahora en cuanto a CSS y también poco orientado a la accesibilidad.

Me está sorprendiendo gratamente que hasta ahora todos los trabajos son limpios y claros en general de código, tanto XHTML como CSS, diría que por encima de la media habitual de muchos diseños profesionales.


Seguiré en cuanto pueda con el resto. Estoy seguro de que con muchas de estas cosas no estaréis de acuerdo, pero recordad que sólo son mis opiniones.
__________________
Visita mi nueva web idplus.org
  #34 (permalink)  
Antiguo 05/02/2009, 19:47
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: Votaciones Competencia Enero 09

Bueno Mikel, mmmm, desde hoy somos enemigos

No, es broma, gracias por tomarte tu tiempo, y gracias por las criticas, hay muchos elementos que se me pasaron y otros detalles que la verdad no conocía(como la jerarquía de los elementos h, agradecería una breve explicación, claro si se puede), bueno creo que la competencia cumplió su cometido, me esta enseñando varias cosas que no sabia así que ahora queda mejorar, ya veras que la próxima elaboro más mi trabajo.

Gracias de nuevo

PD: lo de que el menú se salió a 800 te lo juro que lo tenía controlado,te lo juro, te lo juro Mik pero seguramente fue una de esas cosas que modifiqué de último momento y lo arruine.
__________________
WFC
codigo82
  #35 (permalink)  
Antiguo 06/02/2009, 03:10
Avatar de Aresillo
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 9 años, 8 meses
Puntos: 53
Respuesta: Votaciones Competencia Enero 09

Madre mía... que mal se me dan las cabeceras!!! aunque me he fijado que buzu lo que hace es que oculta el h1 poniendo el logo encima.. (interesante)

Por qué no puedo poner un gif luego ofrezco una descripción larga... de lo que hay..:lloron:

Muchas gracias mik por tu tiempo..

Ares
PS: por cierto, no he hecho referencia a lo que hay en la web, porque todo cumple la licencia que tiene. Las fotos de la chica y la del mundo y los iconos son libres de uso y el resto es creación mía por tanto, libre para usar también...
__________________
Las dudas son el alimento de la inteligencia. A. Einstein
Everything we are is the end result of our thoughts. Sidhartta Gautama
  #36 (permalink)  
Antiguo 06/02/2009, 03:38
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Votaciones Competencia Enero 09

Cita:
Iniciado por willyfc Ver Mensaje
Bueno Mikel, mmmm, desde hoy somos enemigos
Lo sabía
Cita:
Iniciado por willyfc Ver Mensaje
(como la jerarquía de los elementos h, agradecería una breve explicación, claro si se puede)
Es como lo títulos, capítulos y secciones de un libro, sin más: título de la web: h1, subtítulos:h2, etc. Reales en el texto o figurados en la estructura de la página.
Cita:
Iniciado por willyfc Ver Mensaje
PD: lo de que el menú se salió a 800 te lo juro que lo tenía controlado,te lo juro
Me lo creo

Cita:
Iniciado por Aresillo Ver Mensaje
Por qué no puedo poner un gif luego ofrezco una descripción larga... de lo que hay..:lloron:
Sí puedes, pero se desaconsejan elementos con movimiento propio, parpadeos, etc., y si dejas tu web abierta y haces otra cosa en tu mesa, verás por qué.
Cita:
Iniciado por Aresillo Ver Mensaje
PS: por cierto, no he hecho referencia a lo que hay en la web, porque todo cumple la licencia que tiene. Las fotos de la chica y la del mundo y los iconos son libres de uso y el resto es creación mía por tanto, libre para usar también...
No quería decir que nada se haya ocultado premeditadamente, sino que a pesar de ser libre, es bonito hacer referencia publica a la fuente por respeto, sin más.
__________________
Visita mi nueva web idplus.org
  #37 (permalink)  
Antiguo 06/02/2009, 05:25
 
Fecha de Ingreso: enero-2008
Mensajes: 268
Antigüedad: 9 años, 11 meses
Puntos: 11
Respuesta: Votaciones Competencia Enero 09

Ante todo, y lo primero, agradecerte Mik el esfuerzo y la dedicación. Eres un ejemplo a seguir, que lo sepas.

Respectoa tus comentarios:


Cita:
El cuadro de los diseños es más curioso y añade algo de movimiento a la página, aunque lógicamente sin CSS se destroza (es lo más natural por hacer algo más arriesgado y necesitado de CSS en una mayor amplitud).
Ante esto, tengo una pregunta. Por qué es importante ver qeu la página se destroza cuando no se usa el CSS?? Al fin y al cabo, el CSS está para eso, no?, para dar estilos.


Cita:
Los iconos de las validaciones muy bonitos, de hecho creo que si me lo permites te los voy a robar par aun trabajo que estoy haciendo.
Por supuestísimo que los puedes coger. Es más, cuando llegue a casa buscaré el psd para qeu puedas cambiarle el color de fondo, etc etc etc, y lo puedas tunear a tu gusto. A propósito de las referencias que comentabas con Ares, sólo decir qeu estas imágenes se las robé a Ares (mira su web), (bueno, mejor dicho, se las pedí prestadas) y luego las tuneé un poco.


Cita:
En IE todo se ve perfecto sin hacks de ningún tipo.
A decir verdad, esto no es del todo cierto. Si te das ceunta cuando haces el hover sobre el texto CODIGO CSS no hace del todo bien el cambio de imagen (en ff se pone azulado)

Cita:
Aunque el HTML es más bien claro y sencillo, hay un importante error de jerarquía, apareciendo un elemento h1 ocultado mediante CSS y tras él un h4 como único elemento header, evitando así la lógica de estos elementos.
Sí, esto me ha sucedido por desconocimiento de html. Sabía uqe las etiquetas h tenían su propio estilo, y po ello pensaba que el h1 era el de mayor letra, el h2 el siguiente, luego h3 etc etc etc, y como todas estas me parecían muy grandes, pues puse h4, porqeu tenía un tamaño idóneo. Digamos que esto ha sido un monumento hacia mi ignorancia. En fin....


Cita:
El cuadro de diseños tiene lógicamente un exceso de imágenes (2 por trabajo). Quizá se podría haber intentado resolver de otra manera, aunque no creo que sea fácil; hubiera sido una buena demostración.
he de decir qeu así es como lo tenía en un inicio, pero tube un pequeño problema con el ie6, lo que me hizo tirar de los ejemplos qeu tienes en la web. pero bueno, prometo que trataré de hacerlo de ese modo.

Cita:
no alcanzo a comprender por qué lo LI del menú superior tienen una clase distinta cada uno.
Supongo que esto es debido (de nuevo) a mi ignorancia. Es la primera vez en mi vida que uso CSS (hasta hace 3 semanas no sabía ni lo qeu significaba) y tube que ir copiando y pegando de los sitios.


Y para acabar, otra preguntita.
Cuando se hace referencia sobre un texto, imagen, etc etc etc, cómo le decías a Ares, cómo se ha de hacer?? Poniendo commo comentario??


Bueno, pues hasta aquí mis comentarios hacia los tuyos.
De nuevo me sale decir GRACIAS.
  #38 (permalink)  
Antiguo 06/02/2009, 13:25
Avatar de Triby
Mod on free time
 
Fecha de Ingreso: agosto-2008
Ubicación: $MX->Gto['León'];
Mensajes: 9.741
Antigüedad: 9 años, 4 meses
Puntos: 2113
Respuesta: Votaciones Competencia Enero 09

Mikel, muchisimas gracias por la descripcion tan detallada de los aciertos y los errores, trate de enfocarme mas a la cuestion accesibilidad que a diseño y veo que, lamentablemente es donde mas falle, principalmente porque sabia de antemano que algunos textos no serian tan visibles con los fondos elegidos, no tuve el tiempo suficiente para corregir ese detalle; ya tengo mucho material para investigar y aplicar en futuras participaciones.

Me intriga mucho el tema de los tamaños de fuentes, ya que desde hace muchos años he usado pt, pero no pasaba el examinador hera y por eso cambie a em, que no acabo de comprender del todo y, definitivamente, tendre que investigar sobre las alternativas.

Llegados a este punto, tengo que decir que mi participacion ha sido mas que satisfactoria, no por el resultado, sino porque seguramente mis proximos trabajos van a ser mejores gracias a lo que estoy aprendiendo aqui, por los comentarios, por mis errores y por los aciertos de los compañeros.

Gracias nuevamente, ten por seguro que tratare de aplicar lo aprendido a la brevedad.

P.D. Lo de los creditos es una costumbre de hace algunos ayeres, cuando era novato con esto de las Webs, en un principio por obligacion, despues por convencimiento.
__________________
- León, Guanajuato
- GV-Foto
  #39 (permalink)  
Antiguo 06/02/2009, 15:59
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Votaciones Competencia Enero 09

Cita:
Iniciado por javi_cassi Ver Mensaje
Ante esto, tengo una pregunta. Por qué es importante ver qeu la página se destroza cuando no se usa el CSS?? Al fin y al cabo, el CSS está para eso, no?, para dar estilos.
Si, desde luego, pero XHTML semántico y CSS aunque van de la mano son cosas distintas. Fíjate que en algunos he comentado que desactivando la CSS todo sigue apareciendo correctamente y en un orden lógico del flujo, y eso es por un lado porque el HTML es correcto y lógico, y por otro porque efectivamente el CSS ha proporcionado estilos, no dinamismo como en tu caso.
Por otro lado alguien podría navegar tu página con un navegador de texto, un lector de pantalla o incluso con su propia CSS, en cuyo caso sería de agradecer que los elementos HTML funcionaran de forma adecuada. No te preocupes demasiado de momento.
Cita:
Iniciado por javi_cassi Ver Mensaje
A decir verdad, esto no es del todo cierto. Si te das ceunta cuando haces el hover sobre el texto CODIGO CSS no hace del todo bien el cambio de imagen (en ff se pone azulado)
No, no me había fijado en esto.
Cita:
Iniciado por javi_cassi Ver Mensaje
Sabía uqe las etiquetas h tenían su propio estilo, y po ello pensaba que el h1 era el de mayor letra, el h2 el siguiente, luego h3 etc
No deben pensarse como elementos de diseño, sino de estructura (yo tarde un poco en tenerlo claro): son el título, capítulos, secciones, etc. de tu libro (página web).
Cita:
Iniciado por javi_cassi Ver Mensaje
Cuando se hace referencia sobre un texto, imagen, etc etc etc, cómo le decías a Ares, cómo se ha de hacer?? Poniendo commo comentario??
Piensa en un periódico digital: titular, resumen y generalmente en el pie cita la fuente, con un cambio de letra más pequeña y quizá al menos visible: (Fuente: agencia EFE). Como un pie de noticia. O si no como ha hecho triby, en un apartado específico.

Espero haberme explicado.
__________________
Visita mi nueva web idplus.org
  #40 (permalink)  
Antiguo 06/02/2009, 16:09
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Votaciones Competencia Enero 09

Cita:
Iniciado por Triby Ver Mensaje
Mikel, muchisimas gracias por la descripcion tan detallada de los aciertos y los errores, trate de enfocarme mas a la cuestion accesibilidad que a diseño y veo que, lamentablemente es donde mas falle.
No realmente no es fácil. Los analizadores automáticos te ayudan a evitar errores graves, pero no te dan pautas para incorporar ayudas proactivas, tener en cuenta distintos tipos de variables o discapacidades, etc.
Cita:
Iniciado por Triby Ver Mensaje
Me intriga mucho el tema de los tamaños de fuentes, ya que desde hace muchos años he usado pt, pero no pasaba el examinador hera y por eso cambie a em, que no acabo de comprender del todo y, definitivamente, tendre que investigar sobre las alternativas.
Así como los pt se usaban sobre todo para la impresión, los pixels son lo más usado en la pantalla, lo que fuerza a una cantidad de pixeles fija. Los "em" (tamaño de la letra m), tienen tanta potencialidad como peligro: permiten que el tamaño se adapte con exactitud al tamaño de letra establecido por defecto en el navegador del visitante, que normalmente si tiene fijado un tamaño anormalmente grande será por alguna razón. Esto es fabuloso para la accesibilidad, y entraña un serio riesgo para el diseño: si te basas en tamaños fijos en cajas y contenedores, lo más probable es que las cosas se salgan enseguida sin tu control. Al pensar en "em" hay que tener en cuenta desde el principio lo que puede ocurrir y diseñar en consecuencia (cajas elásticas, fondos divididos en piezas, cajas con tamaños también en "em", etc.).

Cita:
Iniciado por Triby Ver Mensaje
P.D. Lo de los creditos es una costumbre de hace algunos ayeres, cuando era novato con esto de las Webs, en un principio por obligacion, despues por convencimiento.
Y los aciertos propios. Me alegro de que haya estado bien para ti. La que comentas arriba es una bonita y elegante costumbre para mi gusto.
__________________
Visita mi nueva web idplus.org
  #41 (permalink)  
Antiguo 06/02/2009, 16:22
Avatar de buzu  
Fecha de Ingreso: octubre-2006
Ubicación: San Francisco, CA
Mensajes: 2.168
Antigüedad: 11 años, 1 mes
Puntos: 122
Respuesta: Votaciones Competencia Enero 09

Cita:
Iniciado por Aresillo
aunque me he fijado que buzu lo que hace es que oculta el h1 poniendo el logo encima.. (interesante)
Creo que ya te havia hablado de esa tecnica antes, o no? no lo recuerdo... pero de lo que si me ac uerdo es que en la competencia pasada te dije que no reemplazaras texto con imagenes, creo que volviste a caer en el mismo agujero . Poco a poco aprendemos, pero la verdad que te felicito por tu trabajo que te ha quedado muy bien, aun no emito mi voto pero en cuanto pueda botaré por la que me parecio la mejor, aun tengo que rebisarlas bien y dare algunas opiniones... Saludos y felicidades a todos, hicieron un muy buen trabajo.... ya vi uno que bien se puede llevar mi boto, tiene unos iconos que se prenden cuando haces rollover jajajaja... mentira, solo bromeo.
__________________
twitter: @imbuzu
  #42 (permalink)  
Antiguo 07/02/2009, 18:39
Avatar de DoPeY-BBS  
Fecha de Ingreso: octubre-2005
Ubicación: Santo Domingo, Dominican Republic, Dominican Republic
Mensajes: 574
Antigüedad: 12 años, 1 mes
Puntos: 12
Respuesta: Votaciones Competencia Enero 09

Mikmoro Quiero agracederte por la critica que le haz dado a mi web y a decir verdad, deje todo para ultimo minuto y mi inexperiencia en el diseño de css me hizo quedar mal.. sera hasta la próxima.

En cuanto a los diseños diré que me gustaron algunos como son:

Aresillo


Sn duda alguna este caballero sabe de diseño y sobre todo sabe como vender un producto, me gusto la manera en que te desenvolviste con los colores, la degradación del menú.

Es un diseño limpio a mi entender tanto el xhtml y css pero lo que no entiendo es porque dar 1000 px y luego lo centra.

Código HTML:
/* Comienza contenedor */
#contenedor{
width: 1000px;
margin: auto;
background: url(images/bg.jpg) repeat-y;
}
NOTA: no debiste tocar el css hasta que no se acabara la competencia, en firefox el menú de las validaciones sale abajo.

buzu Excelente contraste de el color crema con el blanco, la cabecera es estupenda y buen juego de colores, un buen uso de los colores. Tanto el xhtml como el css son limpio.

willyfc un buen diseño porque elegiste la estructura que yo escogí (broma) Lo que no me gusto fue el css porque esta algo un poco ilegible :)
.
Estos son los tres que mas me gustaron pero el premio se lo lleva buzu :) tanto el diseño como el css son claros :)

Dare un review de las otras web pero ahora mismo me siento cansado
__________________
http://www.htmldog.com/HTML, CSS, and JavaScript,

http://tutorialphp.net/
Aprende PHP en 12 capítulos
  #43 (permalink)  
Antiguo 07/02/2009, 19:03
Avatar de Aresillo
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 9 años, 8 meses
Puntos: 53
Respuesta: Votaciones Competencia Enero 09

Cita:
Iniciado por DoPeY-BBS Ver Mensaje
Es un diseño limpio a mi entender tanto el xhtml y css pero lo que no entiendo es porque dar 1000 px y luego lo centra.
le doy 100px al contenedor porque quiero que tenga este ancho y despues lo centro porque quiero que la web se centre... creo que no entiendo muy bien a que te refieres...

Cita:
NOTA: no debiste tocar el css hasta que no se acabara la competencia, en firefox el menú de las validaciones sale abajo.
yo con ff lo veo bien.. no se me baja... y no entiendo porque dices lo de que no debbi tocar el css ...

Un saludo

Ares
__________________
Las dudas son el alimento de la inteligencia. A. Einstein
Everything we are is the end result of our thoughts. Sidhartta Gautama
  #44 (permalink)  
Antiguo 07/02/2009, 19:13
Avatar de willyfc  
Fecha de Ingreso: octubre-2008
Ubicación: Santa Cruz - Bolivia
Mensajes: 662
Antigüedad: 9 años, 2 meses
Puntos: 40
Respuesta: Votaciones Competencia Enero 09

Cita:
le doy 100px al contenedor porque quiero que tenga este ancho y despues lo centro porque quiero que la web se centre
eso debe ser por que tiene una resolución de 1024, pon una resolución mayor para ver el efecto.

Cita:
NOTA: no debiste tocar el css hasta que no se acabara la competencia
y esto otro también que quiere decir. acabo de revisarlo en ff y a mi me sale bien.

Y gracias por la opinión sobre mi trabajo
__________________
WFC
codigo82
  #45 (permalink)  
Antiguo 07/02/2009, 19:22
Avatar de DoPeY-BBS  
Fecha de Ingreso: octubre-2005
Ubicación: Santo Domingo, Dominican Republic, Dominican Republic
Mensajes: 574
Antigüedad: 12 años, 1 mes
Puntos: 12
Respuesta: Votaciones Competencia Enero 09

No se, quizas sea la actualización que hice ayer entonces

Cita:
Mozilla/5.0 (Windows; U; Windows NT 5.1; es-AR; rv:1.9.0.6) Gecko/2009011913 Firefox/3.0.6
y si tengo una resolución de 1024 aunque crep que webosiris me dijo que eso es mas bien algo asi como que no tiene sentido eso
__________________
http://www.htmldog.com/HTML, CSS, and JavaScript,

http://tutorialphp.net/
Aprende PHP en 12 capítulos
  #46 (permalink)  
Antiguo 09/02/2009, 06:59
Avatar de Raulmmmm  
Fecha de Ingreso: marzo-2007
Ubicación: En otro lugar que tú
Mensajes: 1.549
Antigüedad: 10 años, 8 meses
Puntos: 36
Respuesta: Votaciones Competencia Enero 09

¡Buenísimos trabajos! Me quedé impresionado al verlos. Y yo que pensaba que era un buen diseño el mío... pero después de ver los suyos cambié de opinión .

No he posteado antes porque, unas horas después de enviarle el trabajo a Aresillo, me puse con gripe. Pero ahora ya estoy bien.
  #47 (permalink)  
Antiguo 09/02/2009, 10:29
Avatar de DoPeY-BBS  
Fecha de Ingreso: octubre-2005
Ubicación: Santo Domingo, Dominican Republic, Dominican Republic
Mensajes: 574
Antigüedad: 12 años, 1 mes
Puntos: 12
Respuesta: Votaciones Competencia Enero 09

No se pero me preocupa esto....

Yo sigo viendo mal tu web en firefox Aresillo y fue después que actualice a la ultima versión de firefox 3.0.6
__________________
http://www.htmldog.com/HTML, CSS, and JavaScript,

http://tutorialphp.net/
Aprende PHP en 12 capítulos
  #48 (permalink)  
Antiguo 09/02/2009, 10:47
Avatar de Aresillo
Colaborador
 
Fecha de Ingreso: marzo-2008
Ubicación: Becerril de la Sierra
Mensajes: 958
Antigüedad: 9 años, 8 meses
Puntos: 53
Respuesta: Votaciones Competencia Enero 09

pues yo la veo bien..
no se que ha podido pasar... pon un pantallazo...

Gracias..

Ares
__________________
Las dudas son el alimento de la inteligencia. A. Einstein
Everything we are is the end result of our thoughts. Sidhartta Gautama
  #49 (permalink)  
Antiguo 09/02/2009, 10:54
Avatar de Distriker  
Fecha de Ingreso: marzo-2008
Ubicación: Las Palmas De Gran Canarias
Mensajes: 924
Antigüedad: 9 años, 8 meses
Puntos: 23
Respuesta: Votaciones Competencia Enero 09

Yo también lo veo bien :S.

Saludos
__________________
Si no te quejas, nunca conseguiras nada, pero si te quejas siempre lo perderás todo.
Una mala acción da fruto a un mal Karma.
  #50 (permalink)  
Antiguo 09/02/2009, 11:17
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Votaciones Competencia Enero 09

Al ser parte interesada en la actividad, he creido conveniente esperar unos cuantos días para hacer públicas mis reflexiones sobre nuestras realizaciones. Por la misma razón he optado porque éstas sean genéricas y sin entrar en particularidades de cada una de las propuestas presentadas.
Quizás no suenen excesivamente gratas y complacientes, pero entiendo que la finalidad del trabajo era recibir opiniones y sugerencias que nos ayudasen a mejorar, resaltando los aciertos, sí, pero sobre todo poniendo de manifiesto aquellos aspectos mejorables. Que dicho sea de paso, tampoco son tantas las recibidas en esa línea.

¿Decíamos CSS?

Al tratarse de una prueba de CSS y no de diseños gráficos de layouts, lo primero que he hecho ha sido ver las páginas propuestas sin imágenes. Dicho de otra manera, quitar el photoshop de en medio (eso sería otra actividad y en el foro de al lado )

Y como una imagen vale más que mil explicaciones, juzga tu mismo los resultados:



Nos encontramos algunas páginas que simplemente pierden todo, hasta el nombre de la empresa. Otras se quedan a medias y unas pocas aguantan perfectamente esta "faena". Conservan toda la información y el acceso a los contenidos se mantiene.

Pero restablezcamos las páginas a su estado original y juzguemos su estética por el hecho diferencial que la misma empresa resalta (según sus palabras):
Cita:
destacándonos siempre con una estética diferente a la media, hace que hoy usted nos elija
Más allá de los gustos personales al juzgar la combinación de tonos, sombras o imágenes y sus reflejos, algunas están excesivamente influenciadas por la estética "bloguera". Veo excesiva influencia/apariencia web 2.0, pero sólo aparente web 2.0.

Y mi opinión al respecto ya la manifesté sobre la remodelación de mdw. Más que "estética diferente" cabría decir "estética dominante" desde hace varios años.

Un grupo minoritario opta por una presentación diferente, me recuerda los orígenes, donde la página es un escenario o plató, en concordancia con el resto de elementos, que despierta la imaginación del visitante y le incita a navegar por el site para seguir descubriendo "la historia" que se guarda en él.

Y sobre los códigos, que era de lo que íbamos ¿no?:

Excepto los bordes de Juaniquillo en los enlaces, el sprite de Buzu, las imágenes emergentes de Javi (pese a usar dos en lugar de una), los enlaces desplazados de Triby y los roll-on de Pao (con su peligro si no se cargan las imágenes), poquito más que reseñar.
Bien resultas las listas no ordenadas contenedoras de los menús y de las propuestas ajenas y su respuesta al ratón, así como el uso del "span", quizás en alguna haya algún div en demasía y alguna cosilla subsanable con tan sólo un poco más de práctica. Claro que en 200 líneas de código, o menos en más de un caso, tampoco hay sitio para mucho más.

En definitiva, páginas uniformes y correctas, respetuosas con los estándares propuestos, resuelto con sobriedad excesiva tanto el html+css como el diseño para lograr unos resultados hortodoxos para con el "correcto actual".
Aunque, según mi entender, algo alejadas de la finalidad de la actividad y de la incitación/invitación a experimentar, arriesgar y hacer algo distinto que manifestó algún "capo" de estos temas al anunciar su arbitraje.

Pese a todo lo anterior, una vez más, mis felicitaciones a todos por el trabajo realizado.
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #51 (permalink)  
Antiguo 09/02/2009, 12:43
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Votaciones Competencia Enero 09

Ahí van los otros 5:

Raulmmmm

Tenemos un diseño líquido que aunque obviamente es adaptable a la resolución, encierra algún error importante: al colocar los dos bloques principales en porcentaje, el menú va desapareciendo cuando se reduce la ventana.
El dimensionado del texto funciona bastante bien, excepto como ya se ha comentado en otros, en los gráficos de tamaño fijo, de donde el texto se sale, aunque hay cierto margen para que se conserve el diseño.
En IE6 parece que todo está bien, así que parece código compatible.

La imagen de la cabecera está incrustada en el HTML así que es reemplazada por el texto alternativo en su ausencia. La estructura del HTML queda un poco sin sentido al desactivar la CSS, con el gráfico de cabecera, el bloque de texto y después tres menús seguidos, que no parece lo más lógico.

Aunque se ofrecen teclas de atajo, éstas aparecen vía "title", es decir, son visibles al pasar el ratón sobre los enlaces pero no navegando con el teclado, cuando serían realmente necesarias o útiles. La posición del cursor es muy poco visible al navegar con el teclado, y no ayuda mucho.
Las distintas secciones carecen de títulos, por lo que aparece un h1 como único elemento estructural header. El resto del HTML con las listas y demás parece bien correcto, sin nada que resaltar.

El CSS es limpio sencillo y bien comentado. Lo cierto es que los elementos de diseño son tan escasos que el código CSS va en consonancia.

A mi juicio, aunque se ha procurado tener unas cuantas cosas en cuenta con respecto a accesibilidad, la limpieza del código, etcétera, parece que no hubo tiempo de terminar la página y se entregó sin redondear, una tanto incompleta. Trabajo digno pero que no logra la frescura propia de la sencillez.


Buzu

Diseño estático que a menos de 1024px obliga al scroll. Es gracioso (aunque fallido a mi entender) el intento de apoyar los elementos del menú con iconografía. Ha inventado un logo curioso y un tag-line acorde. Las simetrías y equilibrios son una cosa bastante personal y tema de gustos, pero a mi entender hay muchos detalles de cosas que parece quisieran ser centradas pero no lo están (o casi), falta de aire en muchos sitios, márgenes asimétricos, etcétera que me hacen sentir un tanto incómodo.

Nuevamente el uso de algunos elementos gráficos, por ejemplo el ocultar el título (h1) tras un gráfico o colocar el menú con posición absoluta hace insostenible ampliar el tamaño de letra.
Aunque IE6 no presenta prácticamente problemas, el uso de :hover sobre el elemento LI hace que en ese navegador el menú de arriba el efecto al pasar el ratón no funcione. En el menú inferior no hay ningún tipo de indicación visual de la opción a elegir.
La imágenes han sido utilizadas para dar dimensión al flujo en varios casos, por lo que al desactivarlas la página se descompone y es ilegible porque algunos elementos montan sobre otros. El flujo del HTML mantiene la estructura lógica al desactivar la CSS.

Hay una total ausencia de ayudas a la navegación, y a usar el teclado no es muy clara la posición del cursor (a pesar de conserva el outline).
No parece que el HTML presente cosas reseñables, manteniendo un orden lógico y sencillo. Hay un detalle importante: se usan innecesariamente para un asunto de estas características dos hojas de estilo, lo que además de hacer el análisis más complicado sin aportar nada bueno, creo que queda fuera de las "normas" de la competición (y de toda lógica): no sé si está dicho expresamente, pero se habló bastante de cómo nombrar y enlazar "la hoja de estilo", lo que dejaba implícito que hablábamos en todo momento de "una" hoja de estilo. Auque no sea grave, no parece nada adecuado en este caso.

Se usan bien los elementos header para el poco contenido que hay, encabezando con h2 el título del comienzo de una lista (estilos), algo que me parece una buena práctica.

En la CSS se hace un buen uso de una sola imagen de fondo para el menú superior mediante el desplazamiento del fondo. Las hojas de estilo son sencillas y correctas, con la salvedad de que es poco recomendable usar colores por su nombre (color: black).

En resumen, un trabajo digno y diferente, con la sensación de que ha sido terminado deprisa y a última hora, sin revisar los detalles, interesado en conseguir un diseño limpio y un poco minimalista, muy poco orientado a la accesibilidad y con cosas muy fácilmente mejorables con una breve revisión.


Kseso?

La propuesta más cañera, valiente e interesante de todas a mi juicio, en todos los sentidos. Desde luego no deja a nadie indiferente. También es una propuesta comercial ciertamente rompedora y vanguardista, que lo deja claro con el subtítulo: "Timoratos, vulgares y mediocres: ABSTENERSE"
Diseño mezcla de líquido y estático, que no presenta scroll vertical de entrada en 1024 x 768. Sufre mucho con el aumento del tamaño del texto. Muestra las teclas de acceso a primera vista. Quizá un exceso de elementos ocultos que deben hacerse visibles por acción, pero que por otro lado le dan espacio visual de inicio y aportan dinamismo a la página.

Presenta muy serios problemas en IE6, relacionados con las cajas ocultas y los pseudo elementos como :hover, a pesar de usar un comentario condicional y una CSS específica (comentaba kseso? qe era casi una batalla perdida por asumir tantos riesgos).
Al desactivar las imágenes desaparece el motivo principal del fondo sin dejar rastro, aunque el resto mantiene su estructura. Un buen truco para crear el título haciendo creer que es gráfico por ser una tipografía extraña. Sin CSS desaparece toda interacción obviamente, pero aunque parezca mentira, la estructura se mantiene completamente legible y entendible.
Escasa o nula ayuda visual a la navegación con tabulador o teclas de dirección.
El código HTML más extenso y complicado hasta ahora, haciendo uso de infinidad de comentarios condicionales para intentar controlar el dinamismo mediante CSS para IE6, incorporando un formulario, una lista de definiciones, etc. Lo siento pero no puedo entrar a analizar la semántica de dicho código, pero es el más trabajado con diferenca (aunque considero que hay un uso erróneo de las lista de definición).
De la misma manera, no me siento capaz (después de tantos) de ponerme a analizar una CSS tan extensa. Diré que ha sido valiente arriesgando con efectos mediante CSS exclusivamente como mantener el pie abajo, las cajas que aparecen mediante el hover, etcétera.
En definitiva, es obvio que es algo que no tiene por qué gustar a todo el mundo, pero considero que en esta competición se esperaban propuestas arriesgadas de este tipo. Hasta ahora el trabajo más interesante a mi gusto.
__________________
Visita mi nueva web idplus.org
  #52 (permalink)  
Antiguo 09/02/2009, 12:50
Avatar de Mikmoro
Colaborador
 
Fecha de Ingreso: octubre-2006
Ubicación: K-pax
Mensajes: 7.228
Antigüedad: 11 años, 2 meses
Puntos: 279
Respuesta: Votaciones Competencia Enero 09

Juaniquillo

Aprovecharé que este trabajo es también una mezcla entre elástico y fijo para comentar algo que no es la primera vez que veo: si a un diseño elástico no le damos una ancho mínimo, nunca dejará de encogerse al reducir la ventana (esto es evidente). Si a su vez usamos elementos con ancho fijo (como el h1 de juaniquillo, con width:505px), este elemento hará aparecer el scroll horizontal, sin embargo el bloque de texto seguirá encogiendo como si no hubiera scroll. Lo comento porque es un contrasentido, que se podría resolver con un ancho mínimo en el bloque de texto, añadiendo una caja vacía con una anchura dentro de la de texto, etcétera.

Bueno, entrando en materia, visualmente me parece el más limpio y sencillo, y el que mejor soporta el aumento del zoom de texto con mucho, además de adaptarse a 800 de ancho por ejemplo perfectamente.

En IE6 tiene un problema bien conocido con las listas verticales, y es que los elementos dejan un espacio entre sí enorme, aunque esto realmente sería un problema estético, no funcional y de navegabilidad de la página (se resuelve dando ese borde a los LI en lugar de a los enlaces).

Aunque no abusa de imágenes, como en algún otro caso al desactivarlas nos quedamos sin H1, sin nombre de la empresa ni título de la web. Si desactivamos la CSS el orden puede seguirse sin complicaciones.
Al haber flotado a la derecha los elementos del menú principal, estos aparecen en orden inverso (el primero está a la derecha y el último a la izquierda), y al no haber modificado los tabindex, al navegar con el teclado el salto por los elementos del menú es inverso a lo natural, además de que no hay mucha ayuda visual para saber dónde te encuentras (como en la mayoría).

Como en la mayoría de los casos, el HTML es simplísimo y no presenta complicaciones, manteniéndose limpio y claro. Quizá hubiera venido bien el apoyo de algún otro header como título de las diferentes secciones. El código CSS es también sencillo y claro (con exceso de comentarios para mi gusto), con alguna pequeña cosilla mejorable en cuanto a agrupamiento pero sin ningún problema aparente. A mi entender un cierto abuso usando la posición absoluta para evitar posibles problemas de flujo del documento.
El analizador automático de accesibilidad ya resalta que hay un par de errores de nivel AA y AAA, como no usar atajos de teclado.

En resumen, un diseño simple y claro, un buen trabajo en cuanto a intentar conseguir "más con menos", manteniendo un código escueto y claro tanto HTML como CSS, y como la mayoría, muy poco orientado a la accesibilidad.

Quepa aquí una salvedad por mi parte: creo que todo el mundo sabía que en una competencia como esta prima más el diseño limpito y bonito que la accesibilidad y otras virtudes, por lo que quizá mucha gente ha invertido más tiempo en una cosa que en la otra, lo cual es respetable.


Pao01

Un diseño más bien moderno con sensación de tecnología, que rompe por completo el menú de los trabajos (a mi gusto). Diseño de tamaño fijo que no soporta nada bien el zoom del texto, ya que en el caso del cuerpo principal desaparece bajo el pie, por ejemplo.

Una cosa que ya comentamos durante la elaboración de este trabajo (y las consultas públicas que realizaba pao), es que creando los menús con elementos gráficos exclusivamente, al desactivar las imágenes nos quedamos por completo sin menús, título, cabecera ni nada más que el cuerpo principal del texto, lo cual es un problema importante para la accesibilidad. La imagen de cabecera tiene un texto alternativo (alt="Imagen corporativa"), pero éste ni siquiera repite el nombre de la empresa, por lo que con un H1 oculto, nos quedamos sin saberlo.

El efecto :hover está bien hecho con una única imagen cambiando de posición, pero IE6 nos dice que tenemos un serio problema: el menú no se ve en absoluto.
Desactivando la CSS nos volvemos a quedar sin menú principal, viendo elementos vacíos, y un cierto desorden en el flujo del documento.
Como en la mayoría, resulta casi imposible navegar sin el ratón (con el teclado), y aunque se incorporan ayudas como los atajos de teclado para superar el analizador automático, al no ser visibles son completamente inservibles.

Los espacios en blanco en el HTML indican que éste ha sido generado con algún editor de ese lenguaje (que suelen hacer esto), y no tiene nada de malo, pero siempre que se genere de esta forma es inevitable tener que repasar el código y limpiarlo, quitando por ejemplo las tabulaciones o indentados de más y las líneas vacías.
Como en otro casos se ha empezado por un H1, pero se ha prescindido de ayudas semánticas con el uso de headers para encabezar secciones. El código acaba un tanto sucio con los elementos vacíos y los repetidos comentarios al respecto, aunque no parece que haya problemas mayores.
No suele ser especialmente práctico o útil colocar primero la columna derecha y luego el resto si no se va a usar un diseño líquido, aunque tampoco tiene mucho de malo.

El código CSS contiene alguno pequeños errores como poner margin: 00px; (sobra un cero), margin: 0 0 0 0; (debe agruparse en margin: 0;), usar background-position:left top; y background-repeat:no-repeat; cuando en realidad ese elemento no tiene background (no se ha limpiado al terminar), etcétera.
La forma elegida para el diseño obliga a abusar de los ID para identificar cada elemento no permitiendo usar muchas cosas genéricas o comunes, lo que infla un poco innecesariamente el código.

En resumen, en este caso estaba previamente declarado que era la primera experiencia con este lenguaje de pao, que siendo diseñadora ha basado lógicamente su trabajo en una puesta en escena estética moderna y curiosa, defendiéndose con dignidad en el terreno que nos ocupaba, dejando obviamente la puerta abierta a ir entendiendo más los peligros y virtudes de CSS y de la accesibilidad, ambos combinados con el propio diseño gráfico.
En ese sentido todos sabemos que pao es ya una ganadora moral

Bueno, y eso es todo. Espero que nadie se ofenda por mis análisis que evidentemente contendrán bastantes errores, pero imagino que seréis comprensivos porque han sido muchos trabajos a mirar a fondo. Me comprometí a ello y ahí está, aunque espero que nadie tome esto como un profundo análisis de su trabajo ni una crítica con algún valor, porque para eso habría que invertir bastante más tiempo.
__________________
Visita mi nueva web idplus.org
  #53 (permalink)  
Antiguo 09/02/2009, 12:56
Avatar de Dalvenjha  
Fecha de Ingreso: febrero-2008
Ubicación: $("#oficina");
Mensajes: 692
Antigüedad: 9 años, 9 meses
Puntos: 53
Respuesta: Votaciones Competencia Enero 09

Kseso, me parece un poco incorrecta tu manera de juzgar algunas cosas, quierase que lo consideres asi o no, el diseño visual de un website, es en GRAN medida, una parte importante de él, la competencia es en relación a "diseñar un site" con todo lo que este conlleva, por eso hay un juez de diseño creo yo, si no fuera el caso, solo deberían presentar sus códigos.

La innovación representa en mucha medida eso, no te olvides, que las CSS sirven para darle una "presentación gráfica" al site, separando la estructura del diseño, pero en última instancia, son basicamente DISEÑO.

El diseño ortodoxo, el diseño lanzado a ser web 2.0, no lo he visto asi, he visto propuestas más bien alejadas de ello, quizá la de WillyFC que es la que más me gustó graficamente. Pero decir que las demás también, no me parece totalmente cierto. En cuanto a compatibilidad con IE6 he visto que la gran mayoría han logrado dar en el punto, en la mejor medida de lo posible, algunos no, pero eso ya lo habrán notado los demás, asi que no mencionaré nombres.

Esto me confunde: "destacándonos siempre con una estética diferente a la media, hace que hoy usted nos elija"

La novedad está en el planteamiento de ideas de una manera distinta. Todos queremos en algún momento defender nuestro trabajo y dar a entender las bondades de este, asi como nuestros aciertos, pero creo, que eso debería ser un feedback con el visitante, si no se da cuenta este de lo que hacemos para que se sienta más cómodo entonces es porque:

No hemos hecho bien nuestro trabajo.
Lo hemos hecho tan bien, que es inherente al sitio en si.

Saludos!!
__________________
Mi Showcase ||

Compartiendo todo lo posible con los demás.
  #54 (permalink)  
Antiguo 09/02/2009, 13:16
Avatar de pao01
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 1.875
Antigüedad: 9 años, 6 meses
Puntos: 351
Respuesta: Votaciones Competencia Enero 09

Mikel, en primer término muchísimas Gracias por el análisis.
Habiendo leído previamente los comentarios que habías realizado en los cinco primeros diseños, ya iba teniendo una idea de por dónde podrían llegar a estar mis equivocaciones.
Lo único que deseo aclarar es lo siguiente:
no he utilizado editor de html, de hecho con lo único que he trabajado es con el notepad elemental que trae windows.
Pero para ser más gráfica, deseo hacer algunas aclaraciones que obviamente no quise escribirlas antes (para que no sonaran a estar abriendo el paraguas antes de que llueva).
Fue bastante complejo comenzar de cero, así que si bien he leído, visto tutoriales y buscado a mano llena; en muchos casos se trató un poco de conseguir códigos similares que pudieran servir; y a partir de allí ir investigándolos y viendo cómo se comportaban para adaptarlos y poder utilizarlos (por lo que hubo más de instinto y luego sí de prueba y error).
Respecto a IE6, confieso que no he podido evaluarlo a conciencia; el tema es simple, tengo windows vista, no son compatibles por lo tanto mi única referencia fue una prueba de cabotaje con ietester (que evidentemente no fue suficiente).
y aquí viene lo más lamentable de todo, pero debo confesarlo:
mi gran sorpresa fue al final, había que validarlo en html, en css y accesibilidad.
Pues aquí fue más dolor de cabeza que con todo el resto, para empezar creo que comencé al revés y el motivo lo explico a continuación:
me parecía absurdo colocar un título cuando yo tenía un banner con el nombre de la firma, sobre los acceskey los coloqué aunque francamente no entendía su propósito (hasta que leí a Kseso en un post explicando sobre ser creativos para que fueran visibles).
He aprendido más sobre accesibilidad una vez entregado el proyecto, pero juro que me sabía bastante mal estar haciendo algo cuyo propósito no comprendía.
Pero esta ha sido una gran experiencia, finalmente he dado el primer paso y me siento muy feliz de haberlo hecho.
Agradezco nuevamente a cada uno de los que tan gentilmente me han extendido una mano para afrontar el reto y agradezco mucho tu análisis Mik (se convertirá en un nuevo punto de partida a fin de pulir errores y comenzar nuevas cosas).
Respecto a mis compañeros, creo que todos han hecho un buen trabajo, es cierto que he votado, pero no creo contar con la altura intelectual al momento de poder establecer si algo está bien o mal, ya que como siempre he declarado, desconozco de códigos y de diseño también.
Gracias nuevamente
__________________
Entre más estrecha la mente, más grande la boca.- Ted Cook
Autosconarte-Blog
  #55 (permalink)  
Antiguo 09/02/2009, 13:37
Colaborador
 
Fecha de Ingreso: junio-2007
Mensajes: 5.798
Antigüedad: 10 años, 6 meses
Puntos: 538
Respuesta: Votaciones Competencia Enero 09

Cita:
Iniciado por Dalvenjha Ver Mensaje
Kseso, me parece un poco incorrecta tu manera de juzgar algunas cosas ...
Del D.R.A.E.:
Cita:
Incorrecto: no correcto.
Correcto:
1. adj. Dicho del lenguaje, del estilo, del dibujo, etc.: Libres de errores o defectos, conformes a las reglas.2. adj. Dicho de una persona: De conducta irreprochable.
Pues se hubiese agradecido que dijeses qué has encontrado como defectuoso o no conforme a las reglas en mi exposición. ¿O quizás te refieres a que encuentras mi conducta reprochable?
Pero tampoco merece mucho más tu comentario, mayormente fruto de tus suposiciones que de mis palabras.

Mik, gracias por el análisis. De los problemas con ie6 ya ni comento . Aumentados por la imcompatibilidad con vi$ta. De hecho, creo que mi página debería haber sido declarada "no conforme" a las especificaciones de la competencia. Por eso y por alguna licencia que me tomé.

En algún momento de mayor disponibilidad para tí te preguntaré sobre las dl/dt-dd y su uso. Y sólo como curiosidad, ¿te fijaste en la realización práctica de tu teoría sobre cómo lograr texto en vertical con css y "sin br"?

Gracias nuevamente
__________________
Por una web con mucho estilo
+++ CUENTA ABANDONADA. ¿la quieres? +++
  #56 (permalink)  
Antiguo 09/02/2009, 13:48
Avatar de Dalvenjha  
Fecha de Ingreso: febrero-2008
Ubicación: $("#oficina");
Mensajes: 692
Antigüedad: 9 años, 9 meses
Puntos: 53
Respuesta: Votaciones Competencia Enero 09

1. adj. Dicho del lenguaje, del estilo, del dibujo, etc.: Libres de errores o defectos.

Bueno si, es lo que estoy diciendo, que tienes errores en tu punto de vista, supongo que no quieres tergiversar lo que dije no?

Es feo tapar nuestras carencias minimizando aquello en lo que no salimos bien parados.

saluos!!
__________________
Mi Showcase ||

Compartiendo todo lo posible con los demás.
  #57 (permalink)  
Antiguo 09/02/2009, 14:22
Avatar de DoPeY-BBS  
Fecha de Ingreso: octubre-2005
Ubicación: Santo Domingo, Dominican Republic, Dominican Republic
Mensajes: 574
Antigüedad: 12 años, 1 mes
Puntos: 12
Respuesta: Votaciones Competencia Enero 09

Cita:
Iniciado por Aresillo Ver Mensaje
pues yo la veo bien..
no se que ha podido pasar... pon un pantallazo...

Gracias..

Ares
Aquí tiene el pantallzo y algunos gráficos de otras web se ven mal
__________________
http://www.htmldog.com/HTML, CSS, and JavaScript,

http://tutorialphp.net/
Aprende PHP en 12 capítulos
  #58 (permalink)  
Antiguo 09/02/2009, 14:32
Avatar de pao01
Colaborador
 
Fecha de Ingreso: junio-2008
Mensajes: 1.875
Antigüedad: 9 años, 6 meses
Puntos: 351
Respuesta: Votaciones Competencia Enero 09

Dalvenjha, no se si la confusión venga a raíz de lo siguiente:
estimo que Kseso? sólo ha intentado dar su punto de vista desglosando el trabajo en diferentes apartados.
y como lo que manejamos en el foro desde donde ha sido lanzada la propuesta es de css, ahí hace hincapié. Luego se detiene a evaluar desde su perspectiva el tema del diseño (y si lo adviertes, como le es habitual deja entrelíneas que no sería su terreno diciendo: es el foro de al lado...)
Al menos es lo que yo he entendido y conociéndolo un poquito no hay mala fe en su proceder
__________________
Entre más estrecha la mente, más grande la boca.- Ted Cook
Autosconarte-Blog
  #59 (permalink)  
Antiguo 09/02/2009, 14:59
Avatar de Dalvenjha  
Fecha de Ingreso: febrero-2008
Ubicación: $("#oficina");
Mensajes: 692
Antigüedad: 9 años, 9 meses
Puntos: 53
Respuesta: Votaciones Competencia Enero 09

Uhmmm, pareciera distinto, como si hubiera salido con la metralleta, todos queremos que miren nuestro trabajo, más aún si nos ha costado tanto como seguro que pasó. Pero las maneras no me parecen las correctas.

En fin, no es problema mío. Doy por cerrado el tema de mi parte.

Saludos Pa0, si puedo ayudarte en algo, dímelo nada más. =D.
__________________
Mi Showcase ||

Compartiendo todo lo posible con los demás.
  #60 (permalink)  
Antiguo 09/02/2009, 15:11
Avatar de logotype
Colaborador
 
Fecha de Ingreso: noviembre-2007
Ubicación: Latitud: 16·23`,Longitud:71·32`oeste
Mensajes: 1.126
Antigüedad: 10 años
Puntos: 137
Respuesta: Votaciones Competencia Enero 09

Bueno, tengo un tiempo disponible asi que ire subiendo mis pareceres ahora mismo, conforma los vaya redactando, solo que yo escribo con un solo dedo asi que dispensaran si me demoro un poco

Primero las felicitaciones del caso por la iniciativa a los organizadores de esta actividad y segundo el agradecimiento por el gentil detalle de pensar en mi persona y en mis modestos puntos de vista sobre diseño como relevantes para fungir de juez en el apartado correspondiente de esta actividad.

Trataré de emitir mis opiniones con la sutileza y diplomacia que el caso requiere, ya que recordemos que es una competencia de CSS y no específicamente una de Diseño Gráfico; donde con seguridad sería mucho más incisivo en mis apreciaciones.

Bueno sin más preámbulo empezaremos a “destrozar” …ejem, ejem..quise decir analizar los trabajos uno por uno.

He buscado elementos comunes a todos y que estuvieran contenidos en los trabajos participantes, para establecer algunos criterios sobre los cuales emitir opinión; entre los más resaltantes y que todos podemos apreciar elegí los siguientes:

Color.
Composición
Imagen o valor percibido

Willy FC
Color:

Tiene un adecuado y racional uso del color en una gama de verdes sin estridencias, con excepción de 2 detalles que salieron de contexto, el naranja inferior en uno de los enlaces y los detalles colocados como fondo en el texto principal y el menú lateral, no por el color, mas bien por su peso visual, debió bajarse la tonalidad.
El negro hace un perfecto complemento y al mismo tiempo de contrapunto sin agobiar al diseño.
Composición:
Es casi una constante encontrar ese aire de plantilla, en la disposición de los elementos sobre el espacio, en su mayoria no han podido sacudirse de ello, no hay atrevimiento para salirse de lo establecido.
La caja de contáctenos está mal ubicada, se sale del contexto y rompe todo el equilibrio del diseño, aunque la intención haya sido destacarla, el mayor efecto logrado ha sido el de desequilibrio en desmedro de la unidad del diseño.
Valor percibido:
Por los colores usados en la proporción adecuada para otorgar un peso equilibrado, refleja elegancia; pero por la tipografia utilizada, nada de tecnológico, informático, acaba dándole un cierto aire de antiguo, muy impersonal, casi anónimo.


Pao01
Color:

Frescura trabajada más por el lado del contraste complementario que el de la afinidad en los tonos, pero adecuadamente equilibrados, con la excepcion del rectangulo inferior rojo, que por su extensión distrae la atención visual más de lo necesario sobre un elemento secundario
La tonalidad del amarillo-naranja de los botones tal vez pudo haberse trabajado con unos puntos menos de intensidad para equilibrar y jerarquizar adecuadamente los elementos.
Composición:
Buen recurso integrar el menú superior al encabezado, la tipografia utilizada para el nombre y su tratamiento reflejan con acierto la naturaleza del producto.
La marcada disposición horizontal hace que se vea un diseño muy segmentado, el uso de la imagen del robot en los diferentes espacios no logra su cometido de integración entre los mismos, la horizontalidad tiene mayor fuerza.
Interesante detalle el de integrar los avatares en los botones del menú lateral, pero el volumen otorgado a los botones con un poco de exceso hace que no acaben de integrarse al diseño.
Valor percibido:
La imagen del robot con su acabado metalico además del nombre trabajado en el mismo estilo, le otorgan un aire tecnológico, pero faltó complementar, el diseño si bien tomo una direccion no acaba de definir su personalidad.
Es de destacar que la incursión de Pao en diseño es reciente y sorprende gratamente por la evolucion lograda.
__________________
El aprendizaje es un largo camino latido tras latido...
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 13:31.