DeliveryApp

Este proyecto es una aplicación de entrega que simula una plataforma para ordenar comida, diseñada con un enfoque en las mejores prácticas de desarrollo web.

Tabla de Contenidos

• Características
• Tecnologías Utilizadas
• Instalación
• Uso
• Estructura del Proyecto

Características

• Diseño responsivo para una experiencia de usuario óptima en cualquier dispositivo.
• Estilos modulares y bien organizados gracias a SASS.
• Optimización automática de imágenes para un mejor rendimiento (JPG, PNG a WebP, AVIF).
• Autoprefijos CSS para asegurar compatibilidad con diferentes navegadores.
• Mapas de origen (Sourcemaps) para facilitar la depuración de CSS.

Tecnologías Utilizadas

• HTML5: Utilizado para la estructura semántica y accesible de todo el contenido de la aplicación.
• CSS3/SASS: Empleado para el diseño y estilo de la interfaz de usuario. SASS permite una arquitectura CSS más organizada y modular, facilitando el mantenimiento y escalabilidad de los estilos.
• Gulp.js: Esencial como automatizador de tareas en el flujo de trabajo de desarrollo. Gulp se encarga de:
  • Compilación de SASS a CSS.
  • Autoprefijos CSS (con PostCSS y Autoprefixer) para compatibilidad cross-browser.
  • Optimización y compresión de imágenes (con gulp-imagemin, gulp-webp y gulp-avif) para mejorar los tiempos de carga.
  • Generación de Sourcemaps para una depuración eficiente del CSS.

Instalación

Para configurar el proyecto localmente, sigue estos pasos:

1. Clona el repositorio:

   git clone https://github.com/tu-usuario/DeliveryApp.git
   cd DeliveryApp

2. Instala las dependencias de Node.js: Asegúrate de tener Node.js y npm (o yarn) instalados en tu sistema.

   npm install
   # o si usas yarn
   # yarn install

Uso

Una vez instaladas las dependencias, puedes ejecutar los siguientes comandos:

• Modo de desarrollo: Este comando iniciará Gulp en modo de vigilancia, recompilando automáticamente el SCSS y optimizando imágenes cada vez que se detecten cambios.

  npm run dev

  Luego, abre index.html en tu navegador para ver la aplicación.

• Compilación única: Para compilar los archivos SCSS y optimizar las imágenes una sola vez (útil para despliegues o antes de npm run dev si no se ha hecho previamente):

  gulp

Estructura del Proyecto

• src/: Contiene los archivos fuente de la aplicación (SCSS, imágenes).
  • src/scss/: Archivos SASS organizados modularmente. app.scss es el punto de entrada principal.
  • src/img/: Imágenes originales antes de la optimización.
• build/: Contiene los archivos generados y optimizados listos para producción.
  • build/css/: Archivos CSS compilados y sourcemaps.
  • build/img/: Imágenes optimizadas en varios formatos (JPG, PNG, WebP, AVIF).
• gulpfile.js: Configuración de Gulp para la automatización de tareas.
• package.json: Metadatos del proyecto y lista de dependencias.
• index.html: El archivo HTML principal de la aplicación.