Artículo en construcción.
Información sobre la tarea
La entrega será en formato ZIP con un PDF dentro. Leer Entrega y presentación de tareas.
La tarea se calificará con una nota de APTO (10) o NO APTO (0).
Duración actividades obligatorias: X horas.
RA2. Crea interfaces web homogéneos definiendo y aplicando estilos.
Actividades
A continuación, se muestran las actividades a realizar.
Animaciones en freeCodeCamp
Hacer el apartado “Aprende a animar con CSS construyendo una noria” del curso Diseño Web Responsivo.
Noria
📷 Cuando termines todos los pasos, haz una captura de tu perfil público y añade el enlace de tu perfil.
Transformaciones en freeCodeCamp
Hacer el apartado “Aprende CSS Transforms construyéndo un pingüino” del curso Diseño Web Responsivo.
Pinguino
📷 Cuando termines todos los pasos, haz una captura de tu perfil público y añade el enlace de tu perfil.
(Voluntaria) Cuadrado I
Crea una página web que:
- Muestre un cuadrado rojo de 200px de lado.
- Que al poner el cursor encima gire 45 grados y cambie su color a azul.
- Que al quitar el curso vuelva a su posición y su color original.
- Que dure 2 segundos.
(Voluntaria) Cuadrado II
Crea una página web que:
- Muestre un cuadrado rojo de 200px de lado.
- Que al poner el cursor encima se cambia su ancho para ocupar 600px
- Que al quitar el curso vuelva a su tamaño original.
- Que dure 3 segundos.
Crea un programa en JavaScript+HTML+CSS que el tamaño de un texto pase de los 12px iniciales a los 30px finales y que tarde 3 segundos.
(Voluntaria) Input
Crea una página web:
- Que el fondo sea gris claro.
- Muestre un input de tipo text de fondo banco, bordes sin redondear.
- Que al poner el curso sobre él para escribir, se hagan los bordes redondeados, el color de fondo sea un azul muy clarito, se añada una sombra suave de color azul.
- Que al quitar el curso el input vuelva a su etilo original.
- Que dure 1 segundo.
(Voluntaria) Torre de Pisa I
Crea una página web:
- En el fondo se verá una foto con la torre de pisa.
- Que sobre el borde superior de la torre coloques la imagen de una pelota.
- Que al pulsar un botón se active una animación que deje caer la pelta hasta el suelo y al acabar se quede ahí.
- Si se vuelve a pulsar el botón, repetirá la animación.
- La duración de la animación será de 9,4s (Es lo que tardaría en caer una pelota desde la torre de pisa suponiendo que no hay rozamiento)
Debes probar con distintas animation-timing-function y elegir la que se parezca mas a la caída real de la pelota.
(Voluntaria) Torre de Pisa II
Repite el ejercicio anterior de la torre de pisa pero ahora será una canasta de baloncesto y una pelota de baloncesto.
Otra diferencia es que la pelota al llegar abajo rebotará y volverá hasta arriba del todo y así indefinidamente.
(Voluntaria) IIS
Crea una página web:
- En el fondo se verá una foto del espacio y de la Estación Espacial Internacional (IIS).
- Que sobre algún lado de la IIS coloques la imagen de un astronauta.
- Que al pulsar un botón se active una animación que nueva el astronauta durante 1000px y al acabar se quede ahí.
- Si se vuelve a pulsar el botón, repetirá la animación.
- La duración de la animación será de 5s
Debes probar con distintas animation-timing-function y elegir la que se parezca mas al movimiento rectilíneo uniforme que se tiene en el espacio.
(Voluntaria) Cartera I
Crea una página web:
- En el fondo se verá una foto de una carretera recta vista desde arriba.
- Que sobre el inicio de la carretera coloques la imagen de un coche visto desde arriba.
- Que al pulsar un botón se active una animación que nueva el coche hasta llegar al final de la carretera y al acabar se quede ahí.
- Si se vuelve a pulsar el botón, repetirá la animación.
- La duración de la animación será la necesaria para que de sensación de realidad.
Debes probar con distintas animation-timing-function y elegir la que se parezca mas al movimiento acelerado de un coche hasta llegar a una velocidad y luego que sigue con una velocidad constante.
(Voluntaria) Cartera II
Repite el ejercicio anterior pero ahora el coche irá frenando cuando llegue al final de la carretera.
(Voluntaria) Registro
Crea una página web:
- Que muestre un botón que tenga con el texto “Registrarse” y un icono de un usuario (usar Font Awesome).
- Que cuando pasen 20 seg desde la carga de la página, se lance una animación que haga que el icono se haga un poco mas grande y tenga “mas” color de forma que resalte.
- La animación no se debe ejecutar si el usuario antes ha pulsado el botón.
- Al acabar la animación el icono se quedará como estaba
- La animación debe durar 2s.