Inicio Tarea: Web para Bayona
Artículo
Cancelar

Tarea: Web para Bayona

Entrega y presentación

La entrega será en formato Presentación. Leer Entrega y presentación de tareas.

Calificación

La tarea se calificará con una nota de 0 a 10.

Duración actividades obligatorias: 3 horas

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 un compañero tuyo y 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 “Black code”.

La campaña de márketing va a incluir numerosos elementos como carteles, pancartas, merchandaising, 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 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 tambíen 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 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) Cámara de seguridad

Añade un vídeo que simule una cámara de seguridad cuando hagas doble click en una zona concreta de la pantalla.

(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) Publicidad

Añade un banner de publicidad que aparezca cuando hagas click en una zona concreta de la pantalla. Seguro que es algo que Total Marketing querrá hacer en un futuro.

(Voluntaria) Mejorar la experiencia de usuario

Mejora la interfaz de usuario utilizando CSS. A continuación se listan algunas ideas que podrías implementar:

  1. Haz que en lugar de una letra por cada pulsación se escriban 5 letras.
  2. Haz que haya un scroll automático para ver siempre lo que escribes.
  3. Añade una imagen de fondo para que parezca un escritorio hacker.
  4. Cambia el puntero del ratón.
  5. Utiliza un tipo de letra monospace y el color de letra que prefieras.
  6. 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 de la presentación

En unos días tenéis que enseñarle vuestra web a Bayona a ver si le gusta la web que habéis preparado. Total Marketing tiene muchas cosas que enseñar a Bayona y es un hombre bastante ocupado por lo que la presentación no debe superar los 3 minutos.

(Voluntaria) Side projects

Si has conseguido terminar antes de tiempo y tienes ganas de más retos puedes hacer los siguientes side projects que quedarían increíbles en tu portfolio:

Este artículo está licenciado bajo CC BY 4.0 por el autor.

Validación de formularios con HTML y JavaScript

Tarea: El formulario del gobierno