miércoles, 23 de noviembre de 2011

Proyecto del Curso (II-III): Web estática versión dual

La idea de este tramo del proyecto es la creación de una web elegante, y que exista la posibilidad de cambiar el estilo. Empezamos utilizando una página de estilo sencillo como modelo.

Contamos ya con el conmutador de estilos, un menu horizontal sencillo, una imagen en el header que le da color y un par de imágenes sobre la versión de navegador.


Hacemos tres columnas nuevas y las colocamos de tal forma que en el centro quede hueco por si quisieramos poner algo. Las otras dos columnas son de enlaces. Se ha puesto también color al footer de forma temporal.

  

 Le damos algo de orden a los elementos del header, el menu horizontal ahora es más pequeño, y menos llamativo, el cambiador de estilo ahora está a la derecha en una esquina junto a las imágenes de versión, trabajo posible gracias a firebug, identificando los efectos de paddings, margins y floats fácilmente. Se añade también copyright.
  

Se crea a partir de una foto el footer mediante la herramienta pixlr (www.pixlr.com), de una imagen obtenida del banco de imágenes gratuitas: http://joseluisavilaherrera.blogspot.com/


 De modo idéntico, creamos la imagen del header, con la diferencia de añadir nubes con pixlr para evitar bordes que estropeen la página. También se cambian los iconos que cambian el estilo de la página, intentando hacerlos más atractivos.

jueves, 3 de noviembre de 2011

Trabajando con los colores

Elegimos una imagen y observamos los colores que le pueden ir bien. Para ello utilizamos la página http://kuler.adobe.com/


Gracias a las opcion "mood" obtenemos los colores adecuados dependiendo del estilo que queramos, por ejemplo para el estilo Dark son distintos:


Con otras herramientas como Photocopa de la web colourolvers se pueden ver los colores análogos, los más brillantes y más oscuros (como en kuler)