Proyecto de Chat Interactivo

🌐 Página en gh-pages | Repositorio en GitHub

Descripción del Proyecto

Este proyecto consiste en la creación de una aplicación de chat interactivo llamada Soporte Rebis. La aplicación permite a los usuarios comunicarse a través de mensajes instantáneos, buscar conversaciones, ver el historial de chat, enviar y recibir mensajes, y adjuntar archivos. La interfaz está diseñada para ser intuitiva y responsiva, adaptándose a diferentes tamaños de pantalla.

Desafíos Importantes

1. Manipulación del DOM
   • Desafío: Integrar y manipular múltiples elementos del DOM para actualizar dinámicamente la interfaz de usuario.
   • Solución: Utilizar métodos de JavaScript como getElementById, addEventListener, y classList.toggle para gestionar eventos y actualizar el DOM en tiempo real.
2. Interactividad y Navegación
   • Desafío: Implementar una navegación fluida y una interfaz interactiva que responda a las acciones del usuario, como mostrar y ocultar el menú, y actualizar el historial de chat.
   • Solución: Desarrollar funciones específicas para cada acción, como showMenu, showContacts, y setID, asegurando una experiencia de usuario sin interrupciones.
3. Gestión de Datos
   • Desafío: Manejar y filtrar datos de contactos y mensajes para mostrar el historial de chat y los mensajes correspondientes.
   • Solución: Utilizar arrays y métodos de filtrado (filter, map) para procesar los datos y generar el HTML correspondiente dinámicamente.
4. Estilos Responsivos
   • Desafío: Asegurar que la aplicación sea completamente responsiva y se vea bien en diferentes tamaños de pantalla.
   • Solución: Implementar estilos CSS responsivos utilizando media queries para ajustar el diseño según el tamaño del dispositivo.

Habilidades Utilizadas

1. JavaScript (ES6+)
   • Importación y exportación de módulos.
   • Manipulación y actualización del DOM.
   • Gestión de eventos y creación de funciones interactivas.
2. HTML5
   • Estructuración del contenido de la página web.
   • Uso de etiquetas semánticas para mejorar la accesibilidad y SEO.
3. CSS3
   • Diseño y estilos avanzados para una interfaz atractiva.
   • Uso de flexbox y grid para un layout responsivo.
   • Aplicación de media querys para adaptar el diseño a diferentes tamaños de pantalla.
4. Herramientas y Bibliotecas Adicionales
   • Font Awesome: Para iconos y elementos visuales.
   • Responsive Design: Adaptación de la interfaz para diferentes dispositivos.