Información sobre la tarea
La entrega será en formato vídeo (preferiblemente MP4). 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: 3 horas.
RA5. Desarrolla aplicaciones web interactivas integrando mecanismos de manejo de eventos.
Actividades
Es pleno julio y trabajas en una empresa de marketing digital llamada Total Marketing.
Todo el equipo de desarrollo se ha cogido vacaciones salvo tú.
El famoso director español, Juan Antonio Bayona ha contratado a Total Marketing ya que quiere promocionar su última película de espías llamada “Inyección de código”.
La campaña de marketing va a incluir numerosos elementos como carteles, pancartas, merchandising, anuncios y una página web.
Para la página web promocional, a tu jefe se le ha ocurrido una idea bastante original. La idea es que tú y tu compañero hagáis una web que simule un sistema operativo de un hacker y que cuando el usuario pulse cualquier tecla se escriba un código que supuestamente hackeará el teléfono presidencial del presidente más guapo del mundo, el de España.
Escritura automática
Tu jefe quiere que hagáis una web hacker antes de que vuelvan vuestros compañeros de vacaciones. No es necesario que sea muy bonita, ya que para eso ya habrá mas tiempo en el futuro, pero si debe tener la funcionalidad básica que se ha comentado anteriormente.
Podéis usar las siguientes webs como inspiración:
Recuerda que también deben aparecer saltos de línea en el código que aparece en la web.
Fecha y título de la película
Cuando se pulse el conjunto de teclas Ctrl + Alt + X (o cualquier otro) deberá aparecer el título y la fecha de estreno de la película en mitad de la pantalla. La fecha de estreno será el 1 de septiembre de este mismo año.
(Voluntaria) Cuenta atrás
Añade una cuenta atrás, cuando esta cuenta llegue a 0 aparecerá un cartel que ponga “Intrusión fallida”.
(Voluntaria) Mejorar la experiencia de usuario
Mejora la interfaz de usuario utilizando CSS. A continuación se listan algunas ideas que podrías implementar:
- Haz que en lugar de una letra por cada pulsación se escriban 5 letras.
- Haz que haya un scroll automático para ver siempre lo que escribes.
- Cambia el puntero del ratón.
- Utiliza un tipo de letra monospace y el color de letra que prefieras.
- Personaliza la transición de cuando aparece la cámara de seguridad.
Documentación
Documenta el código que has desarrollado por si algún compañero se une al proyecto cuando vuelva de vacaciones.
Preparación del vídeo
En unos días tienes que enseñarle tu web a Bayona a ver si le gusta. Total Marketing tiene muchas cosas que enseñar a Bayona y es un hombre bastante ocupado por lo que el vídeo no debe superar los 2 minutos.
Si no sabes como grabar un vídeo puedes leer el artículo Cómo grabar y editar vídeos
Dame tu feedback…
Bibliografía
Recuerda que si tienes tiempo puedes hacer otros proyectos que puedes poner en tu portfolio (enlaces rotos hasta que ManzDev los rehaga):