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.

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.

Primera Entrega

1. Web que vas a hacer. Por qué.
No tuve que pensarlo mucho para decidirme, me he propuesto hacer una página para la empresa de mi padre, Bodegas y viñedos hermanos Blanco. Ya que tengo que hacer una web y puesto que la empresa aún no tiene ninguna procedí a consultar los detalles y con la aprobación de la misma me dispongo a crearla.

2. Objetivos y público objetivo.
El objetivo principal de la web es dar a conocer los servicios que la empresa ofrece, así como mostrar un catálogo de vinos a la venta e información variada sobre su elaboración.
La página no será una tienda virtual pero sí contará con un apartado de contacto, a través del cual se podría consultar cualquier pedido o sugerencia.
El propósito adicional es que gracias a la página se vean incrementadas las ventas y la bodega sea conocida por un número mayor de personas.

3. URLs de webs de la misma temática. Descríbelas, pon pantallazos, qué estructura tienen, qué aspectos te llaman la atención o no te gustan, etc.
Pago de Carraovejas
http://www.pagodecarraovejas.com/
Cabe destacar el menú dinámico, la presentación de imágines (bien seleccionadas) de fondo, la posibilidad de mostrar la página en inglés y los enlaces a las redes sociales de la bodega.

Bodegas Balbás
http://www.balbas.es/
También cuenta con un menú dinámico, una presentación de imágenes de fondo y la posibilidad de mostrar en inglés la página. Me llama la atención el apartado "Actualidad" donde se muestran noticias recientes de la bodega.

Vega Sicilia
http://www.vega-sicilia.com/
El menú en este caso no es dinámico pero también cuenta con una presentacion de fondo y esta vez animada con audio. Mantiene la posibilidad de escoger idioma entre español e inglés.

Viña Vilano

http://www.vinavilano.com/

No cuenta con menú dinámico pero llama la atención la variedad de idiomas disponibles contando con alemán, francés y ruso además de inglés y español.
En lugar de una presentación con imágenes se hace una pequeña introducción de la bodega, así como algunos premios obtenidos.

Bodegas Monte Baco
http://www.bodegasmontebaco.com/
Cuentan con una app para android. Añaden el chino a los idiomas disponibles.
Cuenta con una navegación y menú muy dinámicos incluyendo detalles flash.

4. Secciones y estructura (relación jerárquica de las secciones).
La estructura primitiva y provisional de las secciones estaría en un menú lateral y contaría con varios apartados:

• Inicio (anclado a la página principal).
• Viñedos (información sobre los distintos terrenos, así como su plantación y cultivo).
• Bodega (detalles técnicos de la elaboración del vino).
• Comercio (contará con un catálogo de los vinos a la venta).
• Contacto