Ejercicio combinado de HTML5, CSS3 y JAVASCRIPT - Crear sitio web con nombre “EJERCICIO MULTIPLE PARTE1” - Crear estilos en css aparte, excepto los necesarios de la página, si es que los hay. - Los javascript que sean generales, extraerlos en fichero aparte, como los de las imagenes de la cabecera y todos los que sean aplicables a todos los documentos. -Tendréis que definir los estilos que se han especificado como se indique, habrá otros que sino se pone nada, serán libres. - Este sitio web, tendrá 5 páginas: PRESENTACIÓN, GALERIA, CONTACTAR, ANIMACIÓN, JUEGO - Crear plantilla, para el sitio web. Analizar cuál será la zona editable y crearla. - Al final del todo, hacer los CSS responsive web para ORDENADOR, SMARTPHONE, y TABLETS. - Al final del día, subir lo que tengáis a vuestro sitio web de pruebas, crear carpeta específica para él y enviarme la dirección del ejercicio web a mi dirección de correo , que os sale en google DRIVE.
FONDO CON UNA IMAGENE QUE CUBRA LA TOTALIDAD DEL BODY
AQUI VAN 5 IMAGENES EN MINIATURA DE FORMA QUE SI SE PULSA CAMBIARA LA IMAGEN DE LA CABECERA 1 PRESENTACIÓN
GALERIA
CONTACTAR
ANIMACIÓN
2
3
4
5
JUEGO
CREAR H1,cada página el suyo propio. Ejemplo aqui: “PRESENTACIÓN”. Cada h1 de cada página se diferenciará por un color en fondo, borde o algo, pero algo característico en cada página.
Crear un menú con los siguientes apartados, mostrarlo como se ve aquí. Elegir atributos de color fondo, bordes, a gusto del consumidor. -En el HOVER, realizar algún efecto de transformación, y que esa transformación duré 1 segundo. (transition).
TENDREMOS UN CONTENEDOR PRINCIPAL QUE OCUPARÁ 1024PX Y CENTRADO EN PAGINA CON : - SOMBREADO DE BORDE (BOX-SHADOW ) - COLOR FONDO BLANCO, CON UN PELIN DE OPACIDAD, PARA DEJAR ENTRE VER LA FOTO FONDO (RGBA) -Para la página elegir tipografiía, tamaño, colores de letra de todo el contenido general. Redefinir etiqueta BODY.
PIE FIJO QUE NO SE MUEVA DE LA POSICIÓN INFERIOR DE LA PANTALLA Y CENTRADO
FONDO CON UNA IMAGENE QUE CUBRA LA TOTALIDAD DEL BODY
AQUI VAN 5 IMAGENES EN MINIATURA DE FORMA QUE SI SE PULSA CAMBIARA LA IMAGEN DE LA CABECERA 1 PRESENTACIÓN
GALERIA
CONTACTAR
ANIMACIÓN
JUEGO
PRESENTACIÓN
Al hacer click o pasar con el ratón en estos 2 bloques se presentará una información, relacionada con el bloque. Inicialmente saldrá una foto o cualquier otra cosa.
PIE FIJO QUE NO SE MUEVA DE LA POSICIÓN INFERIOR DE LA PANTALLA Y CENTRADO
2
3
4
5
FONDO CON UNA IMAGENE QUE CUBRA LA TOTALIDAD DEL BODY
AQUI VAN 5 IMAGENES EN MINIATURA DE FORMA QUE SI SE PULSA CAMBIARA LA IMAGEN DE LA CABECERA 1 PRESENTACIÓN
GALERIA
CONTACTAR
ANIMACIÓN
2
3
4
5
JUEGO
GALERÍA Galería de fotos que al pulsar sobre cualquiera de ellas mostraremos la foto en pantalla completa y en grande. Tendremos un botón de cerrar, y un pie de foto, que se verá en la foto.
PIE FIJO QUE NO SE MUEVA DE LA POSICIÓN INFERIOR DE LA PANTALLA Y CENTRADO
FONDO CON UNA IMAGENE QUE CUBRA LA TOTALIDAD DEL BODY
AQUI VAN 5 IMAGENES EN MINIATURA DE FORMA QUE SI SE PULSA CAMBIARA LA IMAGEN DE LA CABECERA 1 PRESENTACIÓN
GALERIA
CONTACTAR
ANIMACIÓN
2
3
4
5
JUEGO
CONTACTAR Nombre
Apellidos
Teléfono
MAPA DE GOOGLE MAPS, INCORPORAR EL CÓDIGO DE LA DIRECCIÓN DE UNA EMPRESA FICTICIA
Observaciones
En cuanto a los formularios, los campos son obligatorios, el de nombre y apellido, crear estilos para el FOCUS del formulario, y para cuando los campos son VALIDOS e INVALIDOS. --> background-color o border, o cualquier otra propiedad, cuando sean incorrectos. o validos. Al del email y el teléfono, ponerles con estilos un icono como imagen de fondo, situada a la derecha de la caja.
PIE FIJO QUE NO SE MUEVA DE LA POSICIÓN INFERIOR DE LA PANTALLA Y CENTRADO
FONDO CON UNA IMAGENE QUE CUBRA LA TOTALIDAD DEL BODY
AQUI VAN 5 IMAGENES EN MINIATURA DE FORMA QUE SI SE PULSA CAMBIARA LA IMAGEN DE LA CABECERA 1 PRESENTACIÓN
GALERIA
CONTACTAR
ANIMACIÓN
JUEGO
ANIMACIÓN En está zona, crear una animación con css3. de varios elementos a la vez.
PIE FIJO QUE NO SE MUEVA DE LA POSICIÓN INFERIOR DE LA PANTALLA Y CENTRADO
2
3
4
5
FONDO CON UNA IMAGENE QUE CUBRA LA TOTALIDAD DEL BODY
AQUI VAN 5 IMAGENES EN MINIATURA DE FORMA QUE SI SE PULSA CAMBIARA LA IMAGEN DE LA CABECERA 1 PRESENTACIÓN
GALERIA
CONTACTAR
ANIMACIÓN
2
3
4
5
JUEGO
JUEGO En esta zona crear un juego o utilidad con javascript, sugerencias: - Juego de maquina tragaperras, con 3 bolas, cada una podrá tener 3 valores 1,2, ó 3. El juego consistirá que habrá que darle a un botón y que al pulsar las bolas cambiarán en un intervalo de 1 segundo, parándo al de 3 segundos. Si coincide el número aleatorio de las 3 bolas, saldrá un mensaje de premio. - Juego de Preguntas y respuestas, con contador, de respuestas correctas. Crear array con preguntas y respuestas correctas. Puntuar resultado. - Juego de parejas entre 8 figuras, al hacer click se tendrán que ir desvelando cada carta y si la segunda es igual que la primera, aumentar contador y dejarlas visibles en caso contrario dejarlas como antes. - Son sugerencias lo anterior, si alguién se le ocurre otra cosa, es válida, pero usando javascript.
PIE FIJO QUE NO SE MUEVA DE LA POSICIÓN INFERIOR DE LA PANTALLA Y CENTRADO