Esta aplicación web 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.
🔸HTML
🔸CSS
🔸Saas
🔸JavaScript
🔸GULP + Starterkit proporcionado por Adalab
🔸GitHub Pages
🔸metodología Agile - Scrum para el seguimiento y planificación del producto
En el desarrollo de esta aplicación web usamos 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:
- Permite al usuario elegir el estilo de la tarjeta, eligiendo paleta de colores
- Permite 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
- Permite que el usuario pueda crear una web con su tarjeta y compartirla por Twitter
La tarjeta de visita consta de los siguientes campos :
Nombre completo (full_name) Profesión (desarrolladora front-end ;) (job) Datos personales Teléfono (phone) Correo electrónico (email) RRSS LinkedIn (linkedin) GitHub (github)
Respecto a la interacción con la web:
- Las modificaciones que hacemos en el formulario (diseño y contenido), aparecen automáticamente en la vista previa de la tarjeta
- Las 3 partes del proceso de creación son elementos colapsables, que al hacer clic en el título se mostrará/ocultará solo mostrando una sección a la vez
- Toda la información del formulario se almacena en LocalStorage (almacenamiento local del navegador), de forma que al recargar la página siga disponible y pueda borrarse con un botón de Reset.
- La información se puede compartir en Twitter :
- Mostramos una URL para que el usuario verifique si la tarjeta está bien definida y un botón de "Compartir" que enlazará a Twitter donde habrá un tweet con texto predefinido que incluye la URL de la tarjeta
El diseño de este proyecto está en zeplin https://app.zeplin.io/project/5c94ca7ad58aef056fdd6a67.
Aunque el diseño del proyecto estaba cerrado, hemos personalizado algunos aspectos:
- Creamos un logo personalizado del equipo.
- Utilizamos un fondo personalizado en la previsualización de la tarjeta y una tematica (Animal Crossing)
- Añadimos más paletas a las definidas en el diseño, pero sin eliminar las que nos propone el ejercicio.