Proyecto Final: Veglio, Gonzalo

Clicpaq - Página Web de Servicios de Logística

Este proyecto corresponde a la página web de Clicpaq, una empresa dedicada a brindar servicios de logística y envíos nacionales en Argentina. El sitio está diseñado con HTML, CSS (Bootstrap y SCSS), y JavaScript, ofreciendo una interfaz moderna y accesible para los usuarios.

Estructura del Proyecto

• HTML5: Contiene la estructura semántica de la página web.
• CSS3/SCSS: Estilización personalizada usando SCSS como preprocesador para generar el CSS, junto con Bootstrap para componentes y diseño responsivo.
• JavaScript: Se utiliza principalmente para simular la búsqueda de un envío mediante un formulario. El resto de las interacciones, como el carrusel, son propias de Bootstrap.

Características principales

• Slider Principal: Un carrusel con imágenes destacadas y mensajes clave sobre los servicios ofrecidos.
• Secciones de Servicios: Descripción detallada de los servicios principales, con íconos y tarjetas interactivas.
• Mapa de Envíos: Acceso a un mapa interactivo para explorar las áreas de servicio de la empresa.
• Formulario de Búsqueda de Envíos: Permite a los clientes ingresar un número de seguimiento y obtener información sobre el estado de su envío (simulado con JavaScript).
• Diseño responsivo: Optimizado para dispositivos móviles gracias a Bootstrap.

Requisitos

Para ejecutar el proyecto de forma local, solo necesitas un navegador web moderno. No se requieren dependencias adicionales.

CDN Utilizados

• Bootstrap 5.3.3: Se utiliza para la creación de un diseño responsivo y componentes interactivos como el carrusel y el navbar.
• Google Fonts: Para las fuentes personalizadas (Open Sans y Roboto).
• Font Awesome: Para los íconos sociales y otros gráficos.

Buenas Prácticas

SEO

• Se han aplicado etiquetas semánticas como section, article, h2, h3 para mejorar la accesibilidad y la optimización en motores de búsqueda.
• Cada página tiene su propio H1 único que describe el contenido principal.
• Las imágenes tienen atributos alt para mejorar la accesibilidad y proporcionar contexto adicional a los usuarios con discapacidades visuales.

Accesibilidad

• El sitio incluye descripciones de imágenes (alt), navegación clara y componentes accesibles como botones con descripciones visuales.
• Se usan clases de Bootstrap para mejorar el diseño responsivo en diferentes dispositivos y asegurar que el contenido sea accesible en pantallas de cualquier tamaño.

Créditos

• Desarrollador: Gonzalo Veglio
• Bootstrap: https://getbootstrap.com/
• Google Fonts: https://fonts.google.com/
• Font Awesome: https://fontawesome.com/

Notas adicionales

• JavaScript: Se ha utilizado para simular la funcionalidad de búsqueda de envíos. El resto de las interacciones, como el carrusel, se implementan mediante el uso nativo de Bootstrap.
• SCSS: Se utilizó como preprocesador de CSS para facilitar la modularidad y el mantenimiento de los estilos personalizados del sitio.