project-promo-r-module-2-team-9's Introduction

Proyecto grupal Awesome profile-cards

Autoras

Bella García - @bellita85
Lara R. Poblet - @lrpoblet
María Somoza Jurado - @MariaSJ
Nayra Romero Salas - @nayraromero

Resumen

Se trata de una aplicación web que 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.

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

Especificaciones

El proyecto consta de 2 páginas:

Una página landing de bienvenida
Una página con la aplicación de crear tarjetas

En el desarrollo de esta aplicación web se han usado 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
Uso de JavaScript
Gestión de eventos en el navegador
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

Adalab Starter Kit

NOTA: Necesitas tener instalado Node JS para trabajar con este Starter Kit e instalar las dependencias locales ejecutando en la terminal el comando: npm install

Para el proyecto se ha usado el Starter Kit de Adalab, creado en node y gulp.

Este Kit incluye un motor de plantillas HTML, el preprocesador SASS y un servidor local y muchas cosas más. Se ha usado para trabajar más cómodamente y automatizar tareas.

En el Kit hay 3 tipos de ficheros y carpetas:

Los ficheros que están sueltos en la raíz del repositorio, como gulpfile.js, package.json... Son la configuración del proyecto y no se necesita modificarlos. La carpeta src/: son los ficheros de nuestra página web, como HTML, CSS, JS...
Las carpetas public/ y docs/, que son generadas automáticamente cuando arrancamos el proyecto. El Kit lee los ficheros que hay dentro de src/, los procesa y los genera dentro de public/ y docs/.