Formulario

Formulario realizado para el curso de Desarrollo Web de Bejob.


Comunica un bug · Añade una nueva funcionalidad

Tabla de contenidos

1. Sobre el proyecto
   • Creado con
2. Antes de comenzar
   • VS Code
   • Gulp
3. Próximos Pasos
4. Contribuir
5. Licencia
6. Contacto

Sobre el proyecto

Tercera práctica realizada para el curso de Desarrolladora Web. La práctica consiste en la creación de un formulario de alta telefónica. Para ello se ha usado HTML y SASS para la estructura y los estilos usando propiedades como flexbox. Además, se ha automatizado las tareas de compilación de los diferentes archivos (Typescript y SASS) y la recarga automática del servidor.

A tener en cuenta:

• No tiene modo responsive
• No esta optimizado para pantallas pequeñas

Creado con:

• HTML,CSS
• Typescript
• SASS
• VS Code
• Gulp
• Browser Sync
• Babel

Antes de comenzar

Para guardar una copia local y hacerla funcionar sigue los pasos de la sección que aplique. Para modificar los archivos .scss tienes que tener instalada la extensión de Sass de VS Code o en su defecto usar Gulp.

VS Code

1. Clona el repositorio

git clone https://github.com/Xhiel23/PracticaFinal_Formulario.git

2. Abre la carpeta en VS Code

Gulp

1. Clona el repositorio

git clone https://github.com/Xhiel23/PracticaFinal_Formulario.git

2. Asegurate de tener instalado Nodejs

node --version
>> v14.15.4

3. Instala npm si no lo tienes instalado ya

npm install

4. Instala Gulp si no lo tienes instalado ya

sudo npm install gulp -g

5. Navega a la carpeta donde clonaste el repositorio e inicia npm

npm init

6. Sigue las instrucciones de la pantalla para configurar el archivo package.json
7. Una vez configurado, instala Gulp, Sass, Babel y Browser Sync

npm install gulp gulp-sass browser-sync gulp-babel @babel/preset-typescript

El archivo gulpfile.js contiene las siguientes tareas de Gulp:

• Compila los archivos SCSS y los convierte en CSS.
• Compila los archivos .ts cuando se genera algún cambio en el archivo y los convierte en Javascript.
• Mira si hay algún cambio en los archivos de Sass (.scss) o Javascript (.js).
• Recarga automática de BrowserSync.
• (Opcional) Hay una tarea no incluida en el default para generar la misma estructura de carpetas que se usa en este proyecto (gulp makeStructure).

Próximos Pasos

Próximas implementaciones:

• Más combinaciones de colores.
• Modo responsive.
• Más diseños de los elementos.

Además, puedes mirar en open issues para una lista completa de las mejoras propuestas (y bugs conocidos).

Contribuir

Para contribuir sigue los siguientes pasos:

1. Haz fork al proyecto
2. Crea una rama para tu propuesta (git checkout -b propuesta/PropuestaMaravillosa)
3. Haz commit a los cambios (git commit -m 'He añadido esta PropuestaMaravillosa')
4. Haz push a la Rama (git push origin propuesta/PropuestaMaravillosa)
5. Abre un Pull Request

Licencia

Distribuido bajo la licencia MIT. Para más información mira el archivo LICENSE.

Contacto

Linkedin: Beatriz Cabrero

Link del proyecto: https://github.com/Xhiel23/Practica2_STKLM

Agradecimientos

• Plantilla original del readme
• Bejob
• Women4IT