código PHP

El código php que he usado es el siguiente:

Conmutador de estilos

Ya he solucionado el problema del conmutador de estilos, el logo quedaba por encima y no dejaba que se seleccionasen los botones para el cambio de CSS. Cambiando el ancho del logo y el margen para que no quede centrado sino a la derecha se soluciona.

Publicación 2

Ya he conseguido que compruebe si los campos del formulario están vacíos o no, y adicionalmente he añadido una comprobación para el e-mail y para el teléfono, ambas encontradas en internet

Publicación

Me he dado de alta en el servidor gratuito http://www.000webhost.com/ recomendado en clase, y he creado un subdominio para subir la aplicación a internet. Siguiendo los pasos del tutorial del moodle he creado una base de datos en el servidor para la función con php para la sección de contacto, he cambiado el archivo php con los datos para que se conecte a la base de datos y he subido todos los archivos.
Al enviar los datos del formulario, estos se guardan correctamente en la base de datos, pero no comprueba que los campos estén vacíos ni obtiene correctamente los datos una vez introducidos
La página web se puede ver en:
http://goc.site50.net

PHP

Para el apartado contacto he creado el formulario siguiente:

Nombre:

Teléfono:

e-mail:

Mensaje:

<form action="edatos.php" method="post">
<label for="nombre"> Nombre: </label><br />
<input name="nombre" type="text" /><br />
<label for="telefono">Teléfono: </label><br />
<input name="telefono" type="text" /><br />
<label for="email">e-mail: </label><br />
<input name="email" type="text" /><br />
<label for="mensaje">Mensaje: </label><br />
<textarea cols="40" name="mensaje" rows="8"> </textarea><br />
<input type="submit" value="Enviar" />
</form>

Lo que va a hacer es al darle a enviar va a guardar los datos en una base de datos, y despúes va a sacar esos datos de la base de datos para mostrarlos en la pantalla al usuario.
Tenía pensado hacer otra función con el php, ya que esto no es excesivamente útil, pero debido a la falta de tiempo, esto es lo que he hecho

Secciones

He añadido el contenido de las secciones. Al pinchar sobre cada uno de los elementos del menú de navegación superior, he hecho con jQuery que lo que se haga sea cambiar(con el comando load) el contenido del div "content" que es el que tiene el contenido principal de la página con archivos html que he hecho a parte. La sección de "Obras y proyectos" no he podido completarla así que al seleccionar cualquiera de los enlaces de la misma sale la página de "En construcción" que he creado con algunas de las imágenes que estarán en la sección.
Falta arreglar el conmutador de estilos que no he conseguido hacerlo funcionar con la cookie, y la parte del php, que haré con un formulario en la sección de contacto.

Cambios en el diseño principal

He hecho más cambios en el diseño principal, he ampliado la anchura del contenido de la página, he incluido el logo en la parte superior izquierda, con un div, poniendo la imágen como fondo del div y que no se repita la imágen, y en 'background-size' le he puesto 'contain' para que se vea bien la imágen entera. La imagen tiene el fondo transparente para que se vea el fondo de la página que es una trama que he hecho:

Además le he añadido un borde a la parte del conteido entre el nav y el footer y una sombra en la parte izquierda y en la inferior de todo el contenido.
Así es como ha quedado

He conseguido que funcione el conmutador de estilos, aunque no le he puesto cookie, por lo que no se guarda el estilo.

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.

Planificación de la web.

1. Decidir qué web vas a hacer.
La web que voy a realizar es una web para la empresa de mi padre, una oficina de proyectos de arquitectura e ingeniería especializada en instalaciones deportivas, ya que aún no tienen página web. Por lo tanto será una página que se mantendrá en el futuro y estará pública para que cualquiera pueda verla.

2. Determinar sus objetivos y público objetivo.
El objetivo de la página es dar a conocer la oficina, mostrar los proyectos realizados, premios, ponencias... al publico en general, y como publicidad destinada en particular a quien quiera realizar algún nuevo proyecto y quiera ponerse en contacto.

3. Analizar webs de la misma temática.
Algunas páginas de la mimsma temática pueden ser las siguientes:

pujol arquitectura

gmp-architekten

MONEO BROCK STUDIO

Foster + Partners

Más o menos todas contienen el mismo tipo de información con secciones muy parecidas o iguales y con distintos diseños, siendo la última la que más me gusta como está organizada y el diseño que tiene.

4. Identificar secciones de dichas webs y servicios ofrecidos.
Las secciones que aparecen en las webs y que podrían incluirse en la web a realizar podrían ser:
-Un perfil en el que se explica el tipo de trabajos que se realizan.
-Una sección de currículum donde aparece una pequeña descripción de la trayectoria profesional, artículos de prensa, premios obtenidos, cursos impartidos y recibidos...
-Una sección donde se muestran los componentes de la oficina y colaboradores.
-Una sección de proyectos donde se clasifican los trabajos realizados por cronología o por categoría/tipología.
-Una sección de consultoría donde se exponen estudios y colaboraciones realizadas.
-Y por último una sección de contacto con teléfonos de contacto, la dirección postal y un formulario para que el usuario pueda enviar un e-mail.