Desafío en CSS + XHTML: hereje

tunait · #1 (**permalink**) 08/02/2006, 16:30

Desafío lanzado desde este tema http://www.forosdelweb.com/f95/competencia-desaf-css-xhtml-362325/

Propuesta de hereje
http://www.tunait.com/css/hereje/hereje.html

Sus comentarios sobre esta propuesta pueden dejarlos aquí.

Saludos

Hereje · #2 (**permalink**) 08/02/2006, 17:30

Hola a todos !!

Bueno, este es mi trabajo, espero puedan darme críticas constructivas que las recibiré con respeto, siempre tratando de cumplir con el objetivo de esta competencia que es APRENDER.

Seguramente cada uno de los participantes hicieron sus trabajos basandose en sus gustos y experencias personales al navegar por la web. También así se deben haber adaptado a las preferencias de sus configuraciones en su sistema operativo y explorador. Yo así lo hice, entonces decidí diseñar un sitio que sea "líquido", de buena vista y lectura en resoluciones grandes (1280, como yo utilizo) pero sin descuidar las otras resoluciones. También utilizo Firefox (se vé mejor en él) y las tipografias se ven mejor con redondeado ClearType.

La maquetación en realidad es de dos columnas, a la izquierda el menú y otras opciones que formarian parte de la plantilla ( en todas la páginas ) y a la derecha el contenido. A su vez, el contenido de la página de inico la dividí en dos columnas, en las cuales en la parte superior elegí poner editorial (a la derecha flota la lista de secciones editoriales para encontrarlas rápidamente) y en la derecha las notas de actualidad. Abajo quedaron los contenidos menos importantes.

El tema de la publicidad la coloqué junto con el pie de página para no sacrificar el diseño de arriba. De todas formas no me pareció mala idea, ya que queda llamativa de igual forma y, al no ser un espacio tradicional para publicidades, no pasa desapercibida.

Comentarios técnicos: como las bases del concurso lo dicen, utilicé XHTML 1.0 Estricto para la estructura y CSS para el diseño. El CSS esta dividido en dos, la plantilla para todas las paginas por un lado y el contenido específico de la sección en otra, para lograr tener organizado los estilos en difefrentes archivos y no todo en uno solo. En cuanto a Accesibilidad, cumple con el nivel A (con sólo algunos cambios pasaria a ser doble-A).

También como algunos de los colegas, yo en realidad soy desarrollador de aplicaciones web en asp, asp.net y php, y me fui metiendo en el diseño de a poquito, asi que seguro me falta mucho por aprender, y por eso la participación aquí.

Me gustó mucho la idea de la competencia, espero la proxima vez seamos más y podamos organizar la forma de aprender, los conocimientos adquiridos, etc. para que sea mas efectiva. También ver el tema de la difusión y más tiempo para preever las decisiones.

Saludos a todos!

RoQ · #3 (**permalink**) 08/02/2006, 17:47

me encanto ese diseño a 4 columnas

y el diseño tambien esta genial, le voy a dar una buena chequeada a tu CSS, la verdad que no se cual me gusta mas si este o el de fullmental

webosiris · #4 (**permalink**) 08/02/2006, 18:12

sin desmerecer a los otros participantes, creo que este es la mejor propuesta

(junto con la de kahlito

)

Pegas: en 800 x 600 a 4 columnas como que no se si queda bien...

#5 (**permalink**) 08/02/2006, 18:18

la verdad es que es el que se le nota más trabajo, tiene una estética bastante uniforme e interesante. Bravo hereje

.

sin embargo me parece que le deja demasiado poco espacio al contenido de la página.....

creo que se gana el 1º lugar.....

(espero al menos quedar 2º

)

Saludos.

Hereje · #6 (**permalink**) 08/02/2006, 18:33

Muchas gracias a todos por los comentarios y la buena onda!

Con respecto a lo que dice alvlin, sobre lo de poco espacio al contenido, es relativo explícitamente. Ésto es debido a que justamente ése es el bloque que se "estira" y se "contrae" según el tamaño de la ventana. Es cierto que podria haberle dado un ancho mínimo, pues lo tiene, pero está ajustado para la resolución 640.

De todas formas tendré en cuenta el detalle para el futuro. Muchas gracias!

Saludos!

ramm · #7 (**permalink**) 08/02/2006, 18:33

De verdad, entre todos este fue el que me gusto más también. El contenido se ve bien organizado, se encuentra todo fácilmente, y la combinación de colores esta muy buena, fácil de leer y no molesta.

Críticas:
-Echo en falta un poco de fuerza en el tope de la página, no es que se ve amal, pero se me hace un poco débil. Quizás era solo cuestión de agrandar los títulos, o de separarlos con otro color.
-La columna de "Secciones Editoriales" y "Popular en Editorial" creo que necesitaria algo que la "separe" del resto, quizas una línea vertical a los lados, on leve cambio al color de fondo...algo asi.
-El color de los vínculos de las columnas a la derecha, me llama mas la atención que la parte del editorial, no se si estoy mal, pero yo hubiera dado más importancia al editorial.
-Se ve un poco ahogado, creo que le faltaría un poco mas de aire. De hecho, si separaras un poco las entradas del editorial, al alargarse hacia abajo, podrías meter los "Sitios Amigos" y las "Reuniones y Eventos" en la primera columna (la izquierda), ya que no son tantos, así no quedaban un poco "desubicados" como están ahorita.

Anyway, este es solo mi criterio, de resto me parece un trabajo excelente, incluso no dudaría en usarlo (con las respectivas correcciones) en MDW, que ya le hace falta el cambio.

Good Job!!!

Hereje · #8 (**permalink**) 08/02/2006, 19:01

Muchas gracias por tu tiempo ramm.

Estoy de acuerdo con algunas de tus críticas, las tendré en cuenta para el futuro.

Saludos!

fullmental · #9 (**permalink**) 08/02/2006, 19:41

felicidades!!! me gusto bastante esta diagramación "liquida"... se nota que es la mas trabajada de las propuestas.

creo que todo esta en su debido lugar y tiene el peso necesario segun la relevancia, los colores son armónicos y quedan bien en conjunto. sólo me queda una duda: el patrocinador estará de acuerdo con el banner hasta allá abajo???
jeje en fin todo lo de mas me gusto mucho.

Hereje · #10 (**permalink**) 09/02/2006, 01:45

fullmental, pensé bastante con el tema del banner, al final decidí que esta es mi propuesta y deberia hacer las cosas como ami me parecen con este tipo de decisiones triviales. De todas formas, armar un encabezado alternativo con el banner arriba no tardaria mucho, pero en realidad, estoy cansadisimo de los banner arriba, ya cae pesado (por lo frecuente), por lo menos eso siento cada vez que veo uno, los ignoro totalmente.

Saludos! Mañana prometo comentar cada uno de los trabajos, es que les quiero dedicar el tiempo que se merecen.

kazafun · #11 (**permalink**) 09/02/2006, 03:53

Muy bueno!
Esas 4 columnas se salen de lo habitual, me encanta la combinacion de colores y la tipografia es muy facil de leer.
Es el tipico diseño que de un primer momento asusta ( letras por todos lados ) pero que luego se te hace imprescindible.

Aguanta muy bien cuando reduces la resolucion.

Gran trabajo!

kahlito · #12 (**permalink**) 10/02/2006, 05:10

Hola a todos.

Hereje, este es el que más me ha gustado, el estilo a 4 columnas tambien ha sido mi propuesta, con la única diferencia de que al final la 3 columna la dejé con una imagen ya que lo veia todo muy saturado en contenido, de ahí la única pequeña pega que le veo a tu diseño que la información de la zona derecha se hace un poco seguida y monótona, aún así te ha quedado bastante legible. Personalmente le hubiese puesto a tu columna 3 ( Secciones editoriales y popular en el Editorial) un fondo de otro color para así diferenciar aun más las zonas.

En general se nota que es un trabajo muy bien realizado, muy bueno felicidades

kemie · #13 (**permalink**) 10/02/2006, 08:37

Me encanta la sencillez del diseño. minimalismo bien hecho. muy legible.

sufre de una div-itis un poco extraña por ahi...( <div class="dis0"><div class="dis1"><div class="dis2"><div class="dis3"><div class="dis4"><div class="dis5">)

jesusbet · #14 (**permalink**) 10/02/2006, 08:46

sip, muy bonito, legible, claro, excelente.

Pero quitándole las hojas de estilo, el contenido principal queda debajo del contenido del sidebar :s

Hereje · #15 (**permalink**) 10/02/2006, 10:31

Hola kemie, esa "div-itis" se debe a los bordes redondeados (primero era flexible la botonera), y no los pude pulir por falta de tiempo. Mientras diseñaba, la maquetación sufrió bastantes cambios radicales y éstos son los resultados, por ahi se me pasaron varias cosas, también en las hojas de estilos.

Saludos!

Editado: por cierto kemie, ¿a qué se debe tu ausencia en este evento?

caricatos · #16 (**permalink**) 11/02/2006, 10:16

Hola:

Enhorabuena. Uno de los trabajos más agradables a la vista... me gustó la combinación de colores, y es una que no se descuadra con los cambios de tamaños de la ventana del explorador.

Felicidades

Jorolo · #17 (**permalink**) 11/02/2006, 13:09

Hola a todos hola hereje.

Enhorabuena.

Visualmente, tu propuesta es me ha encantado.

1- la ausencia de cabecera: los contenidos empiezan arriba.

2- la liquidez: los contenidos empiezan arriba y lo ocupan todo.

3- el banner abajo: sí señor.

4- los colores: azul a los lados, verde en el centro, puntos naranja envolviendo...

metacortex · #18 (**permalink**) 28/02/2006, 05:21

Otro de los mejores trabajos que he visto hasta ahora. No me atrevo a decir que es el mejor hasta no verlos todos. Qué buen dominio del CSS. También del equilibrio del color, el uso de fondos, tamaño de fuentes. Un código fuente muy bien comentado, entendible, al igual que la hoja de estilos. Buen trabajo Hereje, te felicito de veras.

Observaciones: Por la jerarquía del bloque, las Notas de Actualidad debieron tomar el lugar de Secciones Editoriales y viceversa, ya que supuestamente representan datos dinámicos de artículos, mientras que los otros son links fijos que pueden ocupar una posición menos relevante. Muchos de los enlaces podrían haber sido resumidos en un formulario o menú desplegable. La publicidad no se encuentra en un lugar privilegiado sino en el pie de la página.

Saludos.