Instituto Tecnológico de Tijuana > Ingeniería en Sistemas Computacionales
Este proyecto consiste en el diseño y desarrollo de un prototipo de alta fidelidad para una plataforma web dedicada a la comercialización de teléfonos inteligentes renovados (refurbished). El objetivo principal es ofrecer una alternativa tecnológica sustentable y económica, a través de una interfaz de usuario (UI) moderna y una experiencia de usuario (UX) fluida.
Este desarrollo se enfoca fuertemente en la aplicación de estándares web modernos, asegurando que la plataforma sea completamente responsiva y accesible para todos los usuarios, independientemente del dispositivo o de sus capacidades visuales o motrices.
- Diseño Responsivo (Mobile-First): La interfaz se adapta dinámicamente a diferentes tamaños de pantalla (móviles, tablets y escritorio) utilizando Media Queries y Flexbox/Grid en CSS.
- Accesibilidad Web (A11y):
- Uso estricto de etiquetas semánticas de HTML5 (
<header>,<nav>,<main>,<article>,<section>,<footer>). - Optimización del contraste de colores para facilitar la lectura.
- Tamaños de fuente escalables y jerarquía tipográfica clara.
- Uso estricto de etiquetas semánticas de HTML5 (
- Prototipado en Alta Fidelidad: Diseño interactivo creado en Figma, simulando el flujo de navegación del usuario antes de la codificación.
El desarrollo de este proyecto se llevó a cabo de manera colaborativa, aplicando control de versiones y revisión continua.
| Nombre | Rol / Contribución Principal (Ejemplo a editar) |
|---|---|
| Jaime Alvarez Crisostomo | Accesibilidad / Estructura HTML Semántica |
| Aaron Casildo Ruvalcaba | Desarrollo UI / Estilos CSS y Responsividad |
| Daniel Romero Bravo | Previsualización / Diseño en Figma |
| Ernesto Torres Pineda | Comportamiento / Pruebas de Lighthouse |
- Se crearon wireframes iniciales para definir la estructura.
- Se desarrolló el prototipo de alta fidelidad definiendo la paleta de colores (enfocada en tecnología y ecología), tipografía y componentes (botones, tarjetas de productos).
- Se utilizó la nube de Figma para gestionar versiones, compartir el enlace con el equipo y dejar comentarios de retroalimentación en tiempo real.
- 🔗 Enlace al Prototipo Interactivo en Figma
- Implementación del diseño a código utilizando únicamente HTML puro y CSS (sin frameworks para solidificar las bases de maquetación).
- Gestión del código fuente mediante Git y GitHub, utilizando ramas (branches) para evitar conflictos en el código principal.
Para garantizar la calidad del sitio, se sometió a pruebas rigurosas utilizando:
- Google Lighthouse: Para medir Rendimiento, Accesibilidad, Mejores Prácticas y SEO. (Puntuación objetivo: >90 en Accesibilidad).
- Captura de pantalla de análisis de lighthouse (Calificacion promedio: 100):
