[Propuesta atrasada] Desafío en CSS + XHTML: CORE

[webosiris]

Tras analizarlo, para ser justos con los demás participantes esta propuesta no participará de la votación "formal" ya que llegó fuera de tiempo, pero como la idea de la competencia es sobre todo aprender, creímos que se debería de publicar.

Propuesta de CORE
http://www.proyectocss.com/concurso/mdw/core

Sus comentarios sobre esta propuesta pueden dejarlos aquí.

[kazafun]

Originalidad entre 0 y 10 le doy un 12, aunque para el proposito de la pagina es un poco confuso.

[kahlito]

La verdad es que es muy original, sin embargo tambien coincido en que confunde.

Los menús, encabezados o títulos son poco legibles, los menús tienen muy poco contraste con el fondo y es dificil de apreciarlo, los títulos se ven pixelados.

En Iexplorer no se respeta el diseño, y en Mozilla y Opera el contenido pasa por encima de Editorial al mover el scroll.

Al cambiar de resoluciones siempre queda a la izquierda.

Bueno es mi opinión solo, personalmente me gustó más el que hicistes hace tiempo como propuesta personal CORE ya que lo veo más adecuado para un portal amplio.

Saludosss

[CORE]

Muchas Gracias a los dos por sus comentarios
ahora dejen les explico por que

1 Mi intencion no era ganar ningun concurso si no demostrar a los que se inician en las css que no solo se pueden crear sitios en columna y que se pueden crear diseño sin recorte de imagenes. si con sun web developer hacen un Image View Information se daran cuenta que son imagenes completas y no han sido recortadas para adaptarla al diseño.

2 Las imagenes son PNGs transparentes ya que es un estandar del W3C y se obtiene una mejor nitidez que con los gifs que si se exportan con fondo transparente se denta la imagen y los resultados no gustan mucho

3 Tecnicas

a. Bueno casi todo se posiciona con z-index para poder montar capa sobre capa y obetener lo que se puede ver,

b. Remplazo de textos, hay muchos ejemplos de remplazo.

desde el logo de maestros del web <h1>Maestros del Web</h1>
o de los titulos de la editorial
<h3 id="title_1">Una deliciosa forma de guardar tus favoritos</h3>

c. Uso de background-position en el menu, esto para evitar una precarga de una segunda imaegn en el hover. si por ejemplos haz querido cambiar una imagen en un hover muchas veces esta no carga o tarda demas. la solucion es jugar con la propiedas position y meter la imagen en una



css

Código:

ul#menu a{
	background-image: url(../imagenes/menu_li.png);
}

como ya se sabe que imagen esta de fondo solo cambiamos de posicion al hacer un hover

Código:

ul#menu a:hover{ position:absolute; top:20px; left:75px; }

el mismo ejemplo se puede apreciar al estar el foco dentro del input el fondo cambia y es una sola imagen.


y como dice kahlito ya tenia una propuesta de CSS para MDW que anteriormente habia publicado, pero contenia varios errores de codigo en las CSS y era el mismo diseño que actualememte tiene mdw. y no tenia mucho sentido poner algo que ya estaba hecho.

Gracias de nuevo por los comentarios
saludos

[metacortex]

Tienen razón, es una propuesta muy original. Debió haber llevado bastante trabajo y pruebas. Los efectos están muy bien y hubo buen gusto en la combinación de colores. Los globos de diálogo (tipo comics) para los formularios nunca los había visto y han resultado muy creativos, así como el resto de la página. Me gustó el espaciado de la hoja de estilos.

Observaciones: En IE no se ve bien. La navegabilidad a través de los artículos se hace algo incómoda con el scroll; el código fuente está como un bloque, podría mejorar en el sentido semántico. La página es algo pesada para cargar comparada con el resto. El Tidy reporta un par de problemas con los input.

Saludos.