En este proyecto vamos a realizar una aplicación web que nos permite crear una tarjeta de visita personalizada. En la página web podemos introducir nuestros datos profesionales y obtener una vista maquetada con esta información. Lo bueno de este proyecto es que será una herramienta de la que os podréis beneficiar. Será una aplicación web interactiva creada por vosotras y que podéis usar para crear vuestras propias tarjetas de visita profesionales.
Aprender los conceptos básicos de programación (variables, estructuras de datos, condicionales, funciones, etc.) Comprender cómo manipular el DOM de una página y responder a eventos del usuario Manejar estructuras de datos complejas, con arrays y objetos Realizar peticiones al servidor y almacenar datos en local Implementar Scrum como marco de referencia para el desarrollo del producto, basándonos siempre en los valores de Agile como puntos clave del trabajo en equipo y la mejora continua Mejorar la comunicación entre los miembros del equipo Mejorar vuestras habilidades de comunicación en público al exponer el proyecto en la sesión final
En el desarrollo de esta aplicación web usaremos las siguientes tecnologías:
- Uso avanzado de formularios HTML
- Maquetación usando CSS avanzado, como flex y grid
- Uso de mediaqueries para que el diseño sea adaptable al dispositivo usando la estrategia mobile first
- Gestión de eventos en el navegador (al hacer click, pasa x, etc.)
- Acceso y envío de datos a un servidor
- Almacenamiento en local usando LocalStorage
- Uso de git para el control de versiones del proyecto
- Publicación del resultado en Internet usando GitHub Pages
El proyecto consta de 2 páginas:
- Una página landing de bienvenida
- Una página con la aplicación de crear tarjetas
- La aplicación funciona siguiendo estos pasos:
- Permitir al usuario elegir el estilo de la tarjeta, eligiendo paleta de colores
- Permitir al usuario que, mediante la introducción de información en un formulario, este texto se muestre maquetado automáticamente en un cuadro similar a una tarjeta de visita, que será la muestra del resultado final
- Permitir que el usuario pueda crear una web con su tarjeta y compartirla por Twitter
El diseño lo podéis inspeccionar en este proyecto de zeplin.
Aunque el diseño del proyecto está cerrado, hemos dejado algunos aspectos que podéis personalizar: Usar un logo personalizado del equipo (o nombre del equipo) en el pie de página, tras la información de copyright Utilizar un fondo personalizado en la previsualización de la tarjeta Añadir más paletas a las definidas en el diseño, pero no eliminar las que os proponemos ;)