adalab / modulo-1-evaluacion-final-patriciavaquerosaenz

modulo-1-evaluacion-final-PatriciaVaqueroSaenz created by GitHub Classroom

Evaluación Final Módulo 1 Adalab de Patricia Vaquero Sáenz

Este repo tiene incluído el Starter Kit creado en node y gulp. ¿Y qué es un Starter kit? Pues es una plantilla de proyecto con funcionalidades preinstaladas y preconfiguradas.

Este Kit incluye un motor de plantillas HTML, el preprocesador SASS y un servidor local y muchas cosas más. El Kit nos ayuda a trabajar más cómodamente, nos automatiza tareas.

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.
• La carpeta src/: son los ficheros de la 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/.

Guía de inicio rápido

NOTA: Instalar previamente Node JS para trabajar con este repo:

Pasos a seguir para arrancar el proyecto desde tu ordenador:

1. No clonar este repo (porque no podrás añadir commits), descargarlo.
2. Crear un repo nuevo y añadir los archivos descargados.
3. Abre una terminal en la carpeta raíz de tu repositorio.
4. Instala las dependencias locales ejecutando en la terminal el comando:

npm install

Una vez hemos instalado las dependencias, vamos a arrancar el proyecto. El proyecto hay que arrancarlo cada vez que lo abras Para ello ejecuta el comando:

npm start

Este comando:

• Abre una ventana de Chrome y muestra la página web, al igual que hace el plugin de VS Code Live Server (Go live).
• También observa todos los ficheros que hay dentro de la carpeta src/, para que cada vez que modifiques un fichero refresca tu página en Chrome.
• También procesa los ficheros HTML, SASS / CSS y JS y los genera y guarda en la carpeta public/. Por ejemplo:
  • Convierte los ficheros SASS en CSS.
  • Combina los diferentes ficheros de HTML y los agrupa en uno o varios ficheros HTML.

Después de ejecutar npm start ya puedes empezar a editar todos los ficheros que están dentro de la carpeta src/ y programar cómodamente.

Pasos para publicar el proyecto en GitHub Pages:

Para generar la página para producción ejecuta el comando:

npm run docs

Y a continuación:

1. Sube a tu repo la carpeta docs/ que se te acaba de generar.

git add -A
git commit -m "commit message"
git push

1. Entra en la pestaña settings de tu repo.
2. Y en el apartado de GitHub Pages activa la opción master branch /docs folder.

Además, los comandos:

npm run push-docs

o

npm run deploy

son un atajo que nos genera la versión de producción y hace push de la carpeta docs/ del tirón.

Flujo de archivos con Gulp

Estas tareas de Gulp producen el siguiente flujo de archivos:

gulpfile.js y config.json

Nuestro gulpfile.js usa el fichero config.json de configuración con las rutas de los archivos a generar / observar.

De esta manera separarmos las acciones que están en gulpfile.js de la configuración de las acciones que están en config.json.

Estructura de carpetas

La estructura de carpetas tiene esta pinta:

src
 ├─ api // los ficheros de esta carpeta se copian en public/api/
 |  └─ data.json
 ├─ images
 |  └─ logo.jpg
 ├─ js // los ficheros de esta carpeta se concatenan en el fichero main.js y este se guarda en public/main.js
 |  ├─ main.js
 |  └─ events.js
 ├─ scss
 |  ├─ components
 |  ├─ core
 |  ├─ layout
 |  └─ pages
 └─ html
    └─ partials

Falta algo?

Cualquier duda o sugerencia será bienvenida.

modulo-1-evaluacion-final-patriciavaquerosaenz's Issues

Mejoras

Muy buen trabajo @PatriciaVaqueroSaenz!!!

Aquí tienes unos consejos para mejorar tu ejercicio:

Puntuación: 358 / 429

• HTML > ATRIBUTOS: Todos los img deben tener el atributo title.

• HTML > MÓDULO 3 REASON: Debe haber un elemento con el texto "Lorem ipsum dolor sit amet, consecteur.".

• HTML > MÓDULO 3 REASON: Debe haber un elemento con el texto "Mauris mattis urna quis lorem molestie.".

• CSS > FOOTER: Alguno de los elementos del footer en tablet deben estar maquetado con flexbox > order.

• CSS > TRANSICIONES: Debemos usar alguna transición CSS.

Es posible que cuando corrijas uno de estos puntos, otros se corrijan solos, ya que unos dependen de otros.

Y recuerda algo muy importante:

• Escribe tu código en inglés.
• Escribe todos los ficheros y carpetas en inglés.
• Los commits también tienen que ser en inglés, empezando por un verbo en infinitivo.

Ánimo y si tienes cualquier duda avísame!!!

Con cada mejora que hagas, márcala como completada en este issue y su súbela a este repo.

Este issue ha sido creado automáticamente por ello puede tener algún error, si hay algo que no te encaja escribe por slack al coordinador de Adalab.

Para corregir el ejercicio buscamos determinadas palabras en el código para identificar las secciones. Por ejemplo buscamos Creando para buscar el título de la página. Si has escrito mal alguna palabra en el código es posible que te aparezcan aquí falsos errores.

Por favor no cierres este issue, ya lo haremos nosotros.