Proyecto del Curso (IV): Web estática versión final

Novedades:

1. Script para que en uno de los estilos la imagen de fondo cambie y en el otro estilo no.
2. Creación de pantallas y un menu transparente y separación de los menús.
3. Sombras de menús y logo.
4. Creación de favicon
5.  Reducción de peso de las imágenes de la web. Conversión de png's. a jpgs
   

1. Script de cambio de fondo.

Buscando por la web encontré un ejemplo en el que cambiaban el background mediante js:
http://www.forosdelweb.com/f13/hacer-que-background-cambie-imagen-cada-cierto-tiempo-894861/

Aplicado a mi web sería algo así:

Intentando llevarla a mi web surgió ante todo un problema, el style switcher. Si se utiliza  una función para cambiar el estilo de la página, sin tener en cuenta nada más. Por lo tanto al meterlo en mi página, estuvieses en el estilo que estuvieses el fondo era el mismo, el dado por este script.

Usando las cookies, e identificando en cuál de los dos estilos se está se puede empezar a trabajar.

Si estamos originalmente en el estilo que no queremos cambiar, existe la posibilidad de que se haga un cambio de estilo al hacer click en el switcher [$(".colororange").click(function(){...});]
Cuando se hace click se entra en el bucle do-while, pero ¿qué pasa si se hace click en el blue otra vez?
Hay que romper el bucle. Para esto usamos el valor de la cookie, dado que al hacer click en el blue otra vez, el colorchanger apunta a blue.css [if($.cookie("colorchanger") == "./css/blue.css"){break;}]. También hay que poner la imagen de fondo que tenía que haber en el estilo estático.


Si estamos originalmente en el estilo que queremos cambiar usamos la función directamente de cambio de fondo y usamos un evento de click para que cuando hagan click en el switcher estático cambie el fondo y se haga un break en el bucle do-while de esta última función. El código quedaría de la siguiente forma:

Funcionalidad: http://www.youtube.com/watch?v=_FUsYgEtfjs&feature=youtu.be


2. Creación de pantallas y un menu transparente y separación de los menús.

 La idea vino de http://cssround.com/, donde aprendí sobre los menús y como hacerlos menos opacos, quedando más elegante la página:
 En la página de estilo se escribe
background:rgba(207,219,227,0.7);  por ejemplo. El 0.7, da idea del nivel de opacidad del fondo. varía entre 0 y 1.
La separación de los menus se crea con margin.


3. Sombras en menú y logo

 Dan impresión de volumen. Utilizadas en el estilo yellowing.css:
  En menús:
   box-shadow: 3px 3px 5px #333;
  En logo:
   text-shadow: 0.1em 0.1em 0.2em black

4. Favicon:

Creado a través del programa IcoFX

5. Reducción llevada a cabo con pixlr, el fondo ha sido alterado y alguna png eliminada. Se ha ahorrado más de 3 mb de tamaño.


Aqui unas imágenes de como va quedando la web: