Foto-Yo estuve allí

En esta actividad lo que se va a hacer es, mediante el uso de la aplicación online Pixlr, crear una imagen de la escuela en la que aparezcamos un personaje famoso y yo, uniendo tres fotos distintas. La foto de la escuela es:

Mi foto es:

Ahora con la herramienta del lazo selecciono el contorno que voy a coger de mi foto, lo copio y creo una nueva imagen con el portapapeles y el fondo transparente. Después arrastro la capa de esta nueva imagen a la imagen de la escuela y la coloco en el lugar donde quiero que vaya. Con la herramienta del lazo quito algunos bordes que quedaban del fondo y fusiono las capas. Como se notan aún los bordes con la herramienta de desenfocar y con el pincel retoco los bordes para que quede más realista.
Así es como va quedando:

LA otra imagen que voy a usar es esta:

Que es de los personajes de la serie Breaking Bad.
Hago lo mismo que con la otra imagen, pero esta vez cambio un poco la luminosidad y la saturación para que quede más acorde con la imagen de la escuela que tiene un color menos cálido. Así es como queda:

Ahora falta por poner el texto con la herramienta de introducción de texto y ya está terminada la imagen. He aprovechado el defecto que tenía la imagen y así es como me ha quedado:

Segundo estilo

He empezado con el segundo estilo, cambiando la barra de menú al lateral izquierdo y separando el pie de página, además de separar un poco la imagen de los bordes. Le he cambiado el color al fondo para distinguirlos más, pero aún falta por definir las gamas de colores de ambos estilos y cambiar algunas cosas. Así es como va quedando:

La he probado en firefox, ie y chrome y por el momento se ve bien en los tres navegadores.

.

He quitado la barra lateral que había a la derecha de la plantilla y la imágen del fondo, falta por cambiar los colores de la página, así es como va quedando:

Primera versión de la página web.

De momento voy a coger la plantilla que ya escogí, pero no voy a cambiar nada, sólo voy a añadirle el conmutador de estilos del ejemplo del moodle. Para ello, copio el archivo css "colorchanger.css" y la carpeta de scripts de este ejemplo, además del código html del conmutador, que incluiré en la cabecera.
Ahora copio el archivo "style.css" (en el que está el css de la página) en la carpeta css y cambio el color de , y llamo a los archivos "style2.css" y "style3.css". En el archivo "mi-jquery.js" quito el código que no es del conmutador y cambio el código para que al seleccionar los botones direccione a las hojas de estilo que acabo de crear.

No me funciona, subo la página al moodle y ya lo arreglaré.

Versión móvil

Hoy he hecho una versión de la página web bastante sencilla para móvil con jQuery mobile. De momento todas las secciones están vacías. Así es como queda de momento:

Plantilla

He estado mirando plantillas, y más o menos busco una con esta estructura:

Es un diseño sencillo, pero más tarde le podría ir añadiendo más cosas. Estas son algunas de las plantillas que he visto:
http://www.css3templates.co.uk/templates/my_hotel/index.html

http://www.css3templates.co.uk/templates/photoartwork_bokeh/index.html

http://www.css3templates.co.uk/templates/CSS3_three/index.html

Esta más compleja: http://www.css3templates.co.uk/templates/CSS3_three/index.html

De momento voy a coger la tercera plantilla, si no me convence buscaré otra.

Paletas de colores

Como aún no tengo el logo para la página web, para este ejercicio voy a usar este logo:

Usando kuler.adobe.com con este logo, las opciones de colores que me da son las siguientes:
Colorful: En la que me da la opción de usar 5 colores: negro, blanco, dos tonos de verde claro y un verde oscuro.
Bright: En la que me da la opción de usar negro, gris, blanco y dos tonos de verde claro.
Muted: Igual que el anterior pero cambiando el gris por otro tono de verde claro.
Deep: Como el anterior pero con uno de los tonos verdes un poco más ocuro y los otros dos verdes con más contraste entre ellos.
Custom: con esta opción puedes cambiar manualmente los colores.
Guardando, puedo ver más gamas de colores:
monocromático, que me da varias tonalidades de verdes, triada, en la que me da verde con azul y rojo, complementario, que me da verdes con morados...

Sin embargo, la gama de colores que más me gusta es la primera que me daba al principio:

porque creo que es la gama que mejor queda con el logo, y la que quedaría mejor para una página web por el contraste que hay entre los colores, lo que además ayudaría a separar secciones y la haría más agradable a la vista.