martes, 29 de octubre de 2013

Plantilla, conmutador css y load de jQuery

Para esta entrega he encontrado algunas plantillas css  tras buscar un poquito por la red.
Al final me he decidido por escoger una de la página: http://www.mejoresplantillasgratis.es/free-templates/Plantillas-CSS.html.
He elegido esa porque ya estaba orientada a una empresa agraria y el esqueleto se ajusta perfectamente a lo que buscaba.



Dispone de 5 ficheros html, cada uno para los distintos apartados de la navegación:

Home






Products
Technology




Pricinig

Contacts



Una vez descargada y después de haber leído un poco el html, css y scripts de jQuery pasé a cambiar el title en el head por "Bodegas y Viñedos Hermanos Blanco".
A continuación traduje la navegación a español y la adapté a los apartados que yo quiero incluir: Inicio, Viñedos, Bodega, Catálogo y Contacto.
Después de esto pasé a realizar lo pedido en la entrega.
He introducido un conmutador de estilos css mediante un switcher que permita alternar entre dos ficheros .css, añadiendo unas líneas de código al html y un fichero styleswitcher.js con el script a realizar.
A efectos de usuario esto permite la selección de dos diseños para la misma página mediante dos links que he situado en la parte superior izquierda de la misma. Además cada vez que se selecciona uno u otro se almacena una cookie que permite que el navegador "recuerde" el css elegido por el usuario y lo seleccione cada vez que abra la página.
Terminada esta parte introduje la función load de jQuery y la he integrado de manera que la barra de navegación, la presentación de imágenes  y el footer permanezcan fijos y el contenido entre ambos vaya cambiando según se pinche con el ratón en un apartado u otro.
Tras esto retoqué el script del load para que cada vez que se pincha en un apartado de la navegación este resalte sobre los demás como que está pinchado jugando un poco con las id y el className de los elementos de la lista y los ancle.
Por último he introducido un icono para que aparezca en la pestaña de la web recortando el logo de la empresa de una fotografía y a su vez he empezado a mirar cómo puedo cambiar las fotos de la plantilla por las mías, así como el contenido.

jueves, 24 de octubre de 2013

Trabajando con paletas de colores

1. Mirando los enlaces de la web, parte del logo de tu web (si no lo tienes ahora, coge cualquier otro o bien una foto) y define la paleta de colores de tu web. usa http://kuler.adobe.com

 
Utilizaré esta imagen que tiene distintas tonalidades de rojo y morado para definir la paleta de colores de la página.
















2. Comenta qué alternativas tienes (monocromo, etc.), cuál seleccionas y por qué. ¿Por qué has seleccionado estos colores, al margen de la gama?
Podemos definir la paleta siguiendo un estilo monocromático, de triadas, complementario, compuesto, de sombras y personalizado.
He elegido un primer estilo monocromático con tonalidades de rojo y después he añadido personalmente dos tonos más oscuros de gris y marron.

 





3. Muestra diferentes paletas sobre tu web.
Podemos seleccionar cada uno de los colores de la paleta base y desarrollar paletas monocromáticas a partir de él.

Gris: 
 

Primer rojo: 
 


Marrón:

Segundo rojo:

Último rojo:



4. Razona sobre las texturas de tu web
Aún es pronto para decidir sobre las texturas, quizá añada algún degradado pero no puedo asegurar nada con certeza.