Tarea para LMSGI02

Diseñar una aplicación web que dispone de las siguientes vistas:

vista 1

vista 2
vista 3

vista 4
Requisitos:
• En el menú que aparece en cada una de las vistas, si pulsamos sobre la opción
“Inicio” aparecerá la vista 1 que además será la inicial, cuando pulsemos sobre la
opción “Posicionamiento” aparecerá la vista 2, cuando lo hagamos sobre “Sobre
mi” aparecerá la vista 3 que será vuestra página personal y por último cuando
accedamos a “Registro” aparecerá la vista 4.
• Desde cualquier vista se podrá acceder a cualquiera de las otras a través del
menú.
• Las vistas 1, 2 y 4 no tendrán scroll.
• En todas las vistas habrá que escapar los caracteres especiales.
• Todos los documento HTML no debe tener errores de validación según W3C.
• Todos los documentos que componen la aplicación deben estar correctamente
estructurados en carpetas.
A continuación vamos a explicar los requisitos que deben cumplir cada una de estas
vistas.
1. Inicio (vista 1)
1.1. Para el menú
a) Letra Verdana con un tamaño relativo de 1em.
b) Color del fondo: #192666;
c) Color del enlace: #B5C4E3;
d) Color del fondo del enlace: #253575;
e) El puntero del ratón cambia a la “manita” cuando se pasa el ratón por
encima y cuando hacemos clic sobre la opción y además el color del fondo
cambia a #31479B;
f) Cuando seleccionamos una opción el color de la fuente pasa a #FF9000; y
el fondo a #FFF;
1.2. Para el cuerpo de la página
a) El título tendrá 1.4em de tamaño y el color de la letra será naranja.
b) La imagen se adjunta ([Link]).
c) Tendrá que quedar igual que aparece en la vista 1.
1.3. Para el píe
a) Tamaño de la fuente 0.8em de color blanco y fondo #192666;
2. Posicionamiento (vista 2)
2.1. Utiliza la fuente “Fontinsans” que hay que importar con la regla @font-face. El
fichero de la fuente se adjunta (Fontin_Sans_R_45b.otf) y que estará en negrita.
 2.2. El mensaje también aparece con sombra.
2.3. Las cajas se realizan con cajas (div) y tienen que tener la misma disposición
de la vista 2.
2.4. Todas las cajas disponen de sombra.
3. Sobre mi (vista 3)
3.1. Esta vista es de diseño libre pero el menú deberá estar visible como en todas
las vistas. Pueden aparecer cuáles son tus estudios, profesión o aficiones
(pueden ser datos inventados).
3.2. Incluye, al menos, una fotografía, una tabla y algún enlace a una página
externa que se abrirá en una nueva pestaña del navegador.
4. Registro (vista 4)
4.1. Cuando pasamos el ratón por los diferentes apartados cambia el color del
fondo a #FF9.
4.2. Además el primer bloque tiene un texto de ayuda que aparecerá al pasar el
puntero del ratón por encima, tal y como muestra la siguiente pantalla:

4.3. Cuando se sitúa el puntero del ratón sobre un determinado control (input o
select) debe cambiar el fondo (#E6B700) y la letra (#FFF) tal y como se
muestra:
 4.4. El puntero del ratón cambia a la “manita” cuando se pasa el ratón por encima
y cuando hacemos clic sobre la los botones.
4.5. Todos los campos o apartados que llevan un asterisco delante son
obligatorios.
4.6. El correo electrónico debe tener un formato adecuado.
4.7. El código postal y los teléfonos deben ser válidos. El teléfono fijo empieza por
9 y móvil empieza por 6 ó 7.
4.8. En los “select” de Provincia y País con tres entradas basta.
4.9. Cuando se pulse sobre el botón “Limpiar formulario” se limpiará toda la
información que el usuario haya introducido.
4.10. Cuando se pulse sobre el botón “Enviar formulario” se enviará el contenido a
la URL [Link] mediante el método “post”.
4.11. La caja que contiene el formulario dispone de sombra.
4.12. La colocación de los distintos controles y etiquetas no se podrá realizar con
elementos “table”.
4.13. Los siguientes campos deben tener como máximo los siguientes cantidad de
caracteres:
▪ Nombre – 12
▪ Apellidos – 15 cada uno
▪ Correo electrónico – 40
▪ Domicilio – 40
▪ Código postal – 5
▪ Municipio - 25
▪ Teléfonos – 9
Criterios de calificación. Total 10 puntos.
1. Vista 1 – 2 puntos.
1.1. Visualización correcta – puntuación máxima 0,5 puntos
1.2. Utilización de elementos adecuados – puntuación máxima 0,75 puntos
1.3. Uso adecuado de las hojas de estilo – puntuación máxima 0,5 puntos
1.4. El fichero HTML está validado – puntuación máxima 0,25 puntos
2. Vista 2 – 2 puntos.
2.1. Visualización correcta – puntuación máxima 0,5 puntos
2.2. Utilización de elementos adecuados – puntuación máxima 0,75 puntos
2.3. Uso adecuado de las hojas de estilo – puntuación máxima 0,5 puntos
 2.4. El fichero HTML está validado – puntuación máxima 0,25 puntos.
3. Vista 3 – 2,5 puntos.
3.1. Visualización correcta – puntuación máxima 0,75 puntos
3.2. Utilización de elementos adecuados – puntuación máxima 1 punto
3.3. Uso adecuado de las hojas de estilo – puntuación máxima 0,5 puntos
3.4. El fichero HTML está validado – puntuación máxima 0,25 puntos
4. Vista 4 – 2,5 puntos.
4.1. Visualización correcta – puntuación máxima 0,75 punto
4.2. Utilización de elementos adecuados – puntuación máxima 0,75 punto
4.3. Uso adecuado de las hojas de estilo – puntuación máxima 0,5 puntos
4.4. Validaciones – puntuación máxima 0,25 puntos
4.5. El fichero HTML está validado – puntuación máxima 0,25 puntos
5. Estructura de los diferentes ficheros en carpetas – 0,75 puntos.
6. Entrega correcta del ejercicio (nombre, ficheros) – 0,25 puntos
Recursos para realizar la tarea
Imagen de la vista 1 ([Link])
Fuente de la vista 2 (Fontin_Sans_R_45b.otf)
Indicaciones de entrega
Una vez realizado el examen elaborarás un único documento tipo zip o rar donde figuren
los documentos necesarios para ver correctamente la aplicación. Los nombres de los
ficheros HTML y CSS aparecen en la vista 1.
El envío se realizará a través de la plataforma de la forma establecida para ello, y el
archivo se nombrará siguiendo las siguientes pautas:
apellido1_apellido2_nombre_LMSGI02_tarea

Asegúrate que el nombre no contenga la letra ñ, tildes ni caracteres especiales extraños.

sanchez_manas_begona_LMSGI02_tarea

La carpeta, cuando se descomprima el fichero que se envía con la tarea, se llamará igual
que el fichero que se entrega pero sin extensión.