Galería creada con javascript

En la sección diario (que inicialmente se llamaba anécdotas) he creado una galería de fotos con javascript. 
Debido al jaleo de estos últimos dias con diversos trabajos y exámenes esta sección me ha quedado un poco coja en comparación a como me la imaginaba yo inicialmente, pero cuando pasen los examenes ya con tranquilidad le dedicaré tiempo para hacerla más atractiva.

Aqui muestro como queda la sección diario con ambos estilos:

 
 Tras diversas búsquedas por internet para encontrar un codigo adecuado con el que crear una galería de fotos finalmente encontré uno asequible y con un resultado el cual me gustaba dentro de mi web.

Dentro de head se crea un script en el cual lo primero que se hace es crear dos arrays, uno de ellos para las fotos y otro para las frases que van a ir colocadas a pie de foto: 

 A continuacíon dentro del script coloco el código que se va a encargar de seleccionar la foto y frase anterior ó siguiente a la que estemos viendo según el boton que se pulse (queda bien explicado en los comentarios del puestos en el código):

 Por último y ya dentro del body coloco la parte del codigo con la que vamos a llamar al script contenida en etiquetas div para la creación de su estilo después en el css:

 En este último trozo de código se incluye la foto y la frase que querramos que aparezcan primero cuando entremos a la sección.

Creación del segundo estilo con css

Para la creación del segundo estilo, como me he basado bastante en el anterior y además ambos comparten html y mismas etiquetas, he copiado estilo.css en un nuevo documento y he ido realizando cambios hasta dar al nuevo estilo la forma deseada. Aqui voy a comentar algunos de los cambios más significativos:

Lo primero fue escoger la paleta de colores. En este caso me decidí por una paleta más oscura y debido a una foto que me gusto para el fondo del header y a que también quería que los colores fueran relacionados con la raya roja del taxi, escogi tonos rojizos oscuro casi tirando a marrones y en lugar de blanco que destacaba mucho, un gris muy pálido. El aspecto de la página con este segundo estilo es el siguiente:

 Como se puede observar en este segundo estilo:

     -He cambiado el fondo del header cambiando la foto y he cambiado de lado el conmutador y el titulo Taxi Sergy:

      -El menú lo he pasado de su posición horizontal a una posición vertical en el lado izquierdo de la página utilizando un float left, y el resto de elementos han sido movidos poniendoles un margen izquierdo de 20% para así dejar hueco a la colocación del nuevo menú:

     -Cambio del color de fondo de la página del azulado anterior al rojizo actual:

 
 

Creación del conmutador de estilos

Uno de los requisitos que tenía que cumplir nuestra página web era la inclusión de un conmutador de estilos, explicándolo con palabras de andar por casa, se trata de que la página tenga dos estilos diferenciados y el usuario pueda elegir mediante un click el que mas le guste para ver la web.

La creación de este conmutador es muy sencilla. En cada uno de los documentos html he añadido el siguiente codigo:

Dentro de la etiqueta head he colocado los enlaces a los dos documentos css, el primero de ellos el que ya tenía (estilo.css) y un segundo que hay crear y que dará a la página un nuevo estilo (estilocss2.css). Tambien hay que añadir aquí los dos enlaces a los scripts jquery.js y styleswitch.js cuyos archivos van incluidos en la carpeta que contiene la página.

Por otro lado en cada uno de los documentos html también añado en la cabecera el código indicado con el Nº2 y el cual se encarga de conmutar de un estilo a otro (a los cuales yo he llamado claro y oscuro).

Aqui añado un par de pantallazos mostrando como queda el header de cada página con el conmutador de estilos en cada uno de los estilos:

En la siguiente entrada comento la creación del segundo estilo css.

Creación de menú resaltado con javascript

Para resaltar las palabras del menú en otro color según vamos pasando el raton sobre ellas he utilizado las siguientes instrucciones de código javascript:

            onmouseover="style.color='#C31A11';"
            onmouseout="style.color='black';"

Con la primera de ellas lo que hago es que al pasar el raton por encima de cualquiera de las palabras del menú estas pasen del color negro en el que se encuentran definidas por el css, al color rojo indicado en hexadecimal como #C31A11 ya que es el tono de rojo que utilizo en el resto de la página.

Con la segunda instrucción lo que se hace es que al quitar el raton de cualquiera de las palabras del menú se des-selecione y vuelva al color negro inicial. He probado a no poner esta segunda instrucción y el resultado era que la palabra se quedaba en color rojo ya permanente cosa que no quería.

Por ultimo muestro con un pantallazo como he añadido esas instrucciones al html del menú en cada uno de los enlaces. Y este paso repetido para todos los documentos html de la página ya que todos contienen dicho menú:

Terminacion del resto de las pestañas del menú

El menú de la página web esta formado por las siguientes pestañas: Inicio, servicios, contacta, información, tarifas y anécdotas. La última de ellas aún está por completar pero el resto todas cuentan con la misma estructura html, lo que me ha ayudado a poderlas enlazar a todas con un único css. 

1. Header y menu compartido por todos los enlaces

Hay una parte de html y css común a todos los enlaces de las pestañas incluido el de inicio el cual varía un poco, se trata del header y el menu. A continuacion voy a mostrar la pantalla de inicio y de la siguiente pestaña que es la de servicios para que se pueda apreciar:

Por tanto el codigo html que coloco a continuación es el correspondiente al header y al menú que están definidos mediante div's en todos los documentos html de la página ya que son comunes. Tambien muestro el css que da forma a la vista que se puede apreciar arriba:

Para terminar de realizar la página correspondiente a la pestaña inicio cree una etiqueta div llamada centralinicio la cual incluye la foto del dibujo del taxi y la frase de al lado y por ultimo un párrafo de bienvenida:

En este punto comentar la utilización de float en el css para colocar el coche y la frase en paralelo.

Y a continuación muestro el código html y css del párrafo de bienvenida:

Y la ĺa última parte que van a tener en común todos los enlaces es el pie definido con una etiqueta div que lleva dicho nombre:

2. Estructura seguida por el resto de pestañas del menu

A continuacíon voy a mostrar la estructura común que tienen las pestañas de los enlaces servicios, contacta, información y tarifas:
 

- La etiqueta h3 hace referencia en todos los enlaces al nombre o utilidad de esa pestaña en la pagina y va colocada debajo del menú.

- A continuación y subrallado en color verde se diferencian dos etiquetas div, una llamada colizda y otra coldcha, las cuales pongo una en parelelo de la otra mediante la utilización de float.

- Y a su vez cada uno de esots dos div contiene en su interior un encabezado h4 que se coloca arriba y justo debajo y en paralelo también me diante la utilización de float coloco una imagen y un texto explicativo.

Esta estructura solo se ve modificada por una cosa en las pestañas del menú contacta y tarifas, las cuales llevan una pequeña lista en parte de arriba llamada con la id=opciones para poderla referenciar en el documento css:

Y por último en esta entrada, comentar la realización de 4 tablas que indican los precios del taxi y sus horarios. Todas ellas se ven dentro de la pestaña tarifas y van colocadas en la página a izda y dcha utilizando float y la creación de los div colizda y coldcha antes comentada:

Modificacion paleta de colores

De vuelta al trabajo con la página y antes de terminar de realizar los enlaces a las pestañas del menú, investigué un poco con la paleta de colores utilizada ya que el amarillo destacaba mucho en el azul marino.

Los cambios que realicé fueron dos:

     -Por un lado el fondo de la parte central de la pagina lo cambié y puse el color malva-azulado que se observa en la foto en lugar del fondo que había antes:

    

        #titulo {
                  background-color: #5B61F7;

    -Y por otro lado cambié el color amarillo que destacaba mucho tanto en el logo con mi nombre como en la parte central de la página, por el color rojo, el cual tambien esta relacionado con la ralla roja que llevan los taxis.

El resultado final es el siguiente:

Comparando ahora las dos páginas de inicio, ésta última me gusta muchisimo más!