ea38a12055
Todos los componentes del NIVEL 2 ya están implementados correctamente: - ✅ Notification Bar (#49) - ✅ Navbar (#50) - ✅ Hero Section (#51) - ✅ Sidebar (#52) - ✅ Footer (#53) Solo se actualizó notification-bar.css para usar variables CSS. Próximo paso: NIVEL 3 (Refinamientos visuales) 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
557 lines
13 KiB
Markdown
557 lines
13 KiB
Markdown
# GAP Implementation Checklist
|
|
|
|
**Tracking de Implementación**
|
|
**Fecha Inicio:** 2025-11-04
|
|
**Fecha Estimada Fin:** 2025-11-08
|
|
**Tiempo Total:** 3.85 días
|
|
|
|
---
|
|
|
|
## Sprint 1: Componentes Críticos (Día 1-2)
|
|
|
|
### Issue #41: TOC Sticky con ScrollSpy ⏱️ 1 día
|
|
|
|
**Desarrollo:**
|
|
- [ ] Modificar `assets/css/toc.css`
|
|
- [ ] Agregar `position: sticky` con `top: 5.5rem`
|
|
- [ ] Implementar scrollbar personalizado webkit
|
|
- [ ] Implementar scrollbar personalizado firefox
|
|
- [ ] Estilos para `.apus-toc-link.active`
|
|
- [ ] Media queries responsive
|
|
- [ ] Modificar `assets/js/toc.js`
|
|
- [ ] Implementar función `initTOCScrollSpy()`
|
|
- [ ] Configurar IntersectionObserver con rootMargin
|
|
- [ ] Observer callback para highlighting
|
|
- [ ] Scroll suave del TOC para mantener visible
|
|
- [ ] Cleanup en beforeunload
|
|
|
|
**Testing:**
|
|
- [ ] TOC permanece visible en scroll (desktop)
|
|
- [ ] Link activo se resalta correctamente
|
|
- [ ] Smooth scroll al hacer click en TOC link
|
|
- [ ] Scrollbar personalizado visible y funcional
|
|
- [ ] En mobile: TOC no sticky, posición relativa
|
|
- [ ] Keyboard navigation funcional
|
|
- [ ] Screen reader anuncia cambios
|
|
- [ ] Performance: no lag en scroll
|
|
|
|
**Browsers:**
|
|
- [ ] Chrome (latest)
|
|
- [ ] Firefox (latest)
|
|
- [ ] Safari (latest)
|
|
- [ ] Edge (latest)
|
|
- [ ] Mobile Safari (iOS)
|
|
- [ ] Chrome Mobile (Android)
|
|
|
|
**Accesibilidad:**
|
|
- [ ] Focus visible en TOC links
|
|
- [ ] ARIA attributes correctos
|
|
- [ ] Keyboard navigation completa
|
|
- [ ] Screen reader friendly
|
|
- [ ] Contraste WCAG AA
|
|
|
|
**Commit & PR:**
|
|
- [ ] Branch: `issue-41-toc-sticky-scrollspy`
|
|
- [ ] Commit con mensaje descriptivo
|
|
- [ ] Push a remote
|
|
- [ ] Create PR con checklist en body
|
|
- [ ] Request review
|
|
- [ ] Merge después de approval
|
|
|
|
---
|
|
|
|
### Issue #42: Navbar Underline Hover ⏱️ 0.5 días
|
|
|
|
**Desarrollo:**
|
|
- [ ] Modificar `assets/css/header.css`
|
|
- [ ] Agregar `position: relative` a `.navbar-nav .nav-link`
|
|
- [ ] Implementar `::after` pseudo-elemento
|
|
- [ ] Estilos hover con `width: 100%`
|
|
- [ ] Background color hover rgba
|
|
- [ ] Estados active y current
|
|
- [ ] Focus state para accesibilidad
|
|
- [ ] Media query para ocultar en mobile
|
|
|
|
**Testing:**
|
|
- [ ] Underline aparece en hover (desktop)
|
|
- [ ] Animación suave de width
|
|
- [ ] Color turquesa #61c7cd correcto
|
|
- [ ] Background color sutil en hover
|
|
- [ ] Active page muestra underline
|
|
- [ ] En mobile: sin underline
|
|
- [ ] Focus state visible
|
|
- [ ] No layout shift
|
|
|
|
**Browsers:**
|
|
- [ ] Chrome (latest)
|
|
- [ ] Firefox (latest)
|
|
- [ ] Safari (latest)
|
|
- [ ] Edge (latest)
|
|
|
|
**Visual QA:**
|
|
- [ ] Underline centered bajo texto
|
|
- [ ] Height 2px exacto
|
|
- [ ] Transición 0.3s suave
|
|
- [ ] No gaps o glitches
|
|
|
|
**Commit & PR:**
|
|
- [ ] Branch: `issue-42-navbar-underline`
|
|
- [ ] Commit con mensaje descriptivo
|
|
- [ ] Push a remote
|
|
- [ ] Create PR
|
|
- [ ] Merge después de approval
|
|
|
|
---
|
|
|
|
### Issue #43: Verificar Colores Notification Bar ⏱️ 0.25 días
|
|
|
|
**Desarrollo:**
|
|
- [ ] Auditar `assets/css/notification-bar.css`
|
|
- [ ] Verificar background: #4C5C6B
|
|
- [ ] Verificar link color: #61c7cd
|
|
- [ ] Verificar link hover: #4fb3b9
|
|
- [ ] Verificar close button color
|
|
- [ ] Verificar border-bottom si existe
|
|
- [ ] Agregar focus states si faltan
|
|
|
|
**Testing:**
|
|
- [ ] Colores exactos match RDash
|
|
- [ ] Links se ven claramente
|
|
- [ ] Hover effect en links
|
|
- [ ] Close button visible y funcional
|
|
- [ ] Contraste WCAG AA
|
|
|
|
**Visual QA:**
|
|
- [ ] Background color exacto con eyedropper
|
|
- [ ] Link underline visible
|
|
- [ ] Hover transition suave
|
|
|
|
**Commit & PR:**
|
|
- [ ] Branch: `issue-43-notification-bar-colors`
|
|
- [ ] Commit con cambios (si hay)
|
|
- [ ] Push a remote
|
|
- [ ] Create PR o cerrar issue si ya está correcto
|
|
|
|
---
|
|
|
|
## Sprint 2: Componentes Altos (Día 2-3)
|
|
|
|
### Issue #44: Botón "Let's Talk" Header ⏱️ 0.5 días
|
|
|
|
**Desarrollo:**
|
|
- [ ] Modificar `header.php`
|
|
- [ ] Agregar botón después de menu items
|
|
- [ ] Wrapper con `d-none d-lg-block`
|
|
- [ ] Link con clase `btn-lets-talk`
|
|
- [ ] Aria-label para accesibilidad
|
|
- [ ] URL dinámico a página contacto
|
|
- [ ] Modificar `assets/css/header.css`
|
|
- [ ] Gradiente naranja #FF6B35 → #FF8C42
|
|
- [ ] Padding 0.875rem 1.75rem
|
|
- [ ] Border-radius 8px
|
|
- [ ] Box-shadow con rgba naranja
|
|
- [ ] Hover: transform y shadow
|
|
- [ ] Focus state
|
|
- [ ] Media query hide < 992px
|
|
|
|
**Testing:**
|
|
- [ ] Botón visible en desktop (>= 992px)
|
|
- [ ] Botón oculto en tablet/mobile
|
|
- [ ] Gradiente se ve correctamente
|
|
- [ ] Hover effect suave
|
|
- [ ] Click redirige a contacto
|
|
- [ ] Focus state visible
|
|
- [ ] No afecta menu mobile
|
|
|
|
**Visual QA:**
|
|
- [ ] Gradiente correcto con eyedropper
|
|
- [ ] Posición alineada con navbar
|
|
- [ ] No overlapping con menu items
|
|
- [ ] Sombra visible pero sutil
|
|
|
|
**Commit & PR:**
|
|
- [ ] Branch: `issue-44-lets-talk-button`
|
|
- [ ] Commit cambios PHP y CSS
|
|
- [ ] Push a remote
|
|
- [ ] Create PR con screenshot
|
|
- [ ] Merge después de approval
|
|
|
|
---
|
|
|
|
### Issue #45: Related Posts Cards Grises ⏱️ 0.5 días
|
|
|
|
**Desarrollo:**
|
|
- [ ] Modificar `assets/css/related-posts.css`
|
|
- [ ] Cambiar background a #f7fafc
|
|
- [ ] Agregar border 1px #e2e8f0
|
|
- [ ] Implementar `::before` para borde lateral
|
|
- [ ] Gradiente azul vertical en ::before
|
|
- [ ] Hover: opacity 1 en ::before
|
|
- [ ] Hover: transform translateY(-8px)
|
|
- [ ] Hover: background #ffffff
|
|
- [ ] Hover: border-color #1a73e8
|
|
- [ ] Hover: shadow más profundo
|
|
- [ ] Ajustar padding contenido
|
|
- [ ] Prefers-reduced-motion
|
|
|
|
**Testing:**
|
|
- [ ] Cards tienen fondo gris #f7fafc
|
|
- [ ] Hover cambia a blanco
|
|
- [ ] Borde lateral aparece en hover
|
|
- [ ] Transform -8px funciona
|
|
- [ ] Gradiente azul correcto
|
|
- [ ] Imagen zoom en hover
|
|
- [ ] Título cambia color en hover
|
|
- [ ] No layout shift
|
|
- [ ] Reduced motion respetado
|
|
|
|
**Visual QA:**
|
|
- [ ] Gris de fondo correcto
|
|
- [ ] Borde lateral 4px width
|
|
- [ ] Gradiente smooth sin bandas
|
|
- [ ] Transición suave
|
|
|
|
**Browsers:**
|
|
- [ ] Chrome (latest)
|
|
- [ ] Firefox (latest)
|
|
- [ ] Safari (latest)
|
|
- [ ] Edge (latest)
|
|
- [ ] Mobile Safari
|
|
- [ ] Chrome Mobile
|
|
|
|
**Commit & PR:**
|
|
- [ ] Branch: `issue-45-related-posts-gray`
|
|
- [ ] Commit con cambios CSS
|
|
- [ ] Push a remote
|
|
- [ ] Create PR con before/after screenshots
|
|
- [ ] Merge después de approval
|
|
|
|
---
|
|
|
|
## Sprint 3: Componentes Medios (Día 3-4)
|
|
|
|
### Issue #46: Paginación Profesional ⏱️ 0.5 días
|
|
|
|
**Desarrollo:**
|
|
- [ ] Modificar `style.css` (líneas 437-479)
|
|
- [ ] Cambiar border a 2px
|
|
- [ ] Cambiar border-radius a 8px
|
|
- [ ] Transition cubic-bezier
|
|
- [ ] Hover: background #1a73e8
|
|
- [ ] Hover: transform translateY(-2px)
|
|
- [ ] Hover: box-shadow
|
|
- [ ] Current: gradiente azul
|
|
- [ ] Current: box-shadow
|
|
- [ ] Dots: border none
|
|
- [ ] Focus state
|
|
- [ ] Active state
|
|
- [ ] Prefers-reduced-motion
|
|
- [ ] Media query mobile
|
|
|
|
**Testing:**
|
|
- [ ] Números tienen borde 2px
|
|
- [ ] Border-radius 8px visible
|
|
- [ ] Hover eleva elemento
|
|
- [ ] Hover cambia a azul
|
|
- [ ] Current tiene gradiente
|
|
- [ ] Dots sin border
|
|
- [ ] Focus visible
|
|
- [ ] Mobile: tamaños reducidos
|
|
- [ ] Keyboard navigation
|
|
|
|
**Visual QA:**
|
|
- [ ] Gradiente current smooth
|
|
- [ ] Shadow depth correcto
|
|
- [ ] Transform smooth
|
|
- [ ] Colores exactos
|
|
|
|
**Commit & PR:**
|
|
- [ ] Branch: `issue-46-pagination-professional`
|
|
- [ ] Commit con cambios
|
|
- [ ] Push a remote
|
|
- [ ] Create PR
|
|
- [ ] Merge después de approval
|
|
|
|
---
|
|
|
|
### Issue #47: Modal Contacto Refinamiento ⏱️ 0.25 días
|
|
|
|
**Desarrollo:**
|
|
- [ ] Modificar `assets/css/modal-contact.css`
|
|
- [ ] Border-radius 16px en .modal-content
|
|
- [ ] Box-shadow 0 20px 60px
|
|
- [ ] Header border-radius 16px 16px 0 0
|
|
- [ ] Btn-close filter invert para blanco
|
|
- [ ] Form-control border-radius 8px
|
|
- [ ] Form-control border 2px
|
|
- [ ] Focus: border-color #1a73e8
|
|
- [ ] Btn-primary gradiente azul
|
|
- [ ] Btn-primary hover transform
|
|
- [ ] Media query mobile
|
|
|
|
**Testing:**
|
|
- [ ] Modal esquinas redondeadas 16px
|
|
- [ ] Sombra profunda visible
|
|
- [ ] Botón close blanco
|
|
- [ ] Inputs redondeados 8px
|
|
- [ ] Focus azul en inputs
|
|
- [ ] Botón gradiente azul
|
|
- [ ] Botón hover eleva
|
|
- [ ] Mobile: padding reducido
|
|
|
|
**Visual QA:**
|
|
- [ ] Border-radius smooth
|
|
- [ ] Shadow no too harsh
|
|
- [ ] Close button contraste OK
|
|
- [ ] Gradiente button smooth
|
|
|
|
**Commit & PR:**
|
|
- [ ] Branch: `issue-47-modal-refinement`
|
|
- [ ] Commit con cambios
|
|
- [ ] Push a remote
|
|
- [ ] Create PR
|
|
- [ ] Merge después de approval
|
|
|
|
---
|
|
|
|
## Sprint 4: Componentes Bajos (Día 4+)
|
|
|
|
### Issue #48: Animación Pulse CTA Box ⏱️ 0.25 días
|
|
|
|
**Desarrollo:**
|
|
- [ ] Modificar `assets/css/cta-box-sidebar.css`
|
|
- [ ] Crear @keyframes pulse
|
|
- [ ] Scale 1 → 1.02 → 1
|
|
- [ ] Shadow animation
|
|
- [ ] Aplicar animation 3s infinite
|
|
- [ ] Hover: animation none
|
|
- [ ] Prefers-reduced-motion: animation none
|
|
- [ ] Transform-origin center
|
|
|
|
**Testing:**
|
|
- [ ] Animación sutil visible
|
|
- [ ] 3 segundos de duración
|
|
- [ ] Loop infinito funciona
|
|
- [ ] Hover detiene animación
|
|
- [ ] Reduced motion desactiva
|
|
- [ ] No performance issues
|
|
|
|
**Visual QA:**
|
|
- [ ] Pulse sutil, no molesto
|
|
- [ ] Shadow expansion smooth
|
|
- [ ] Scale imperceptible
|
|
|
|
**Commit & PR:**
|
|
- [ ] Branch: `issue-48-pulse-animation`
|
|
- [ ] Commit con cambios
|
|
- [ ] Push a remote
|
|
- [ ] Create PR
|
|
- [ ] Merge después de approval (opcional)
|
|
|
|
---
|
|
|
|
### Issue #49: Hero Section Padding ⏱️ 0.1 días
|
|
|
|
**Desarrollo:**
|
|
- [ ] Modificar `assets/css/hero-section.css`
|
|
- [ ] Padding 3rem 1rem
|
|
- [ ] Text-align center
|
|
- [ ] Media query tablet: 2rem 1rem
|
|
- [ ] Media query mobile: 1.5rem 0.75rem
|
|
|
|
**Testing:**
|
|
- [ ] Padding correcto en desktop
|
|
- [ ] Padding reducido en tablet
|
|
- [ ] Padding mínimo en mobile
|
|
- [ ] Text centrado
|
|
- [ ] No overflow
|
|
|
|
**Visual QA:**
|
|
- [ ] Espaciado balanceado
|
|
- [ ] Texto centrado visualmente
|
|
|
|
**Commit & PR:**
|
|
- [ ] Branch: `issue-49-hero-padding`
|
|
- [ ] Commit con cambios
|
|
- [ ] Push a remote
|
|
- [ ] Create PR
|
|
- [ ] Merge después de approval
|
|
|
|
---
|
|
|
|
## Post-Implementation
|
|
|
|
### Testing Final Completo
|
|
|
|
**Funcionalidad:**
|
|
- [ ] Todas las animaciones funcionan
|
|
- [ ] Todos los hovers responden
|
|
- [ ] Todos los focus states visibles
|
|
- [ ] Navegación por teclado completa
|
|
- [ ] Links funcionan correctamente
|
|
|
|
**Visual:**
|
|
- [ ] Colores exactos RDash verificados
|
|
- [ ] Gradientes smooth sin bandas
|
|
- [ ] Sombras depth correcto
|
|
- [ ] Border-radius consistente
|
|
- [ ] Spacing balanceado
|
|
|
|
**Performance:**
|
|
- [ ] Lighthouse score > 90
|
|
- [ ] No layout shifts (CLS < 0.1)
|
|
- [ ] Animaciones 60fps
|
|
- [ ] Scroll smooth
|
|
- [ ] No memoria leaks
|
|
|
|
**Accesibilidad:**
|
|
- [ ] WCAG AA compliance
|
|
- [ ] Keyboard navigation completa
|
|
- [ ] Screen reader friendly
|
|
- [ ] Focus indicators visible
|
|
- [ ] ARIA labels correctos
|
|
- [ ] Contraste suficiente
|
|
|
|
**Responsive:**
|
|
- [ ] Desktop (>= 992px) ✓
|
|
- [ ] Tablet (768px - 991px) ✓
|
|
- [ ] Mobile (< 768px) ✓
|
|
- [ ] Small mobile (< 576px) ✓
|
|
|
|
**Cross-Browser:**
|
|
- [ ] Chrome Windows/Mac
|
|
- [ ] Firefox Windows/Mac
|
|
- [ ] Safari Mac/iOS
|
|
- [ ] Edge Windows
|
|
- [ ] Chrome Android
|
|
|
|
**Edge Cases:**
|
|
- [ ] Prefers-reduced-motion
|
|
- [ ] Prefers-color-scheme: dark
|
|
- [ ] High contrast mode
|
|
- [ ] Zoom 200%
|
|
- [ ] Touch devices
|
|
- [ ] Slow network
|
|
|
|
### Documentación
|
|
|
|
- [ ] Actualizar CHANGELOG.md
|
|
- [ ] Documentar nuevos componentes
|
|
- [ ] Screenshots antes/después
|
|
- [ ] Update README si necesario
|
|
- [ ] Cerrar todos los issues
|
|
|
|
### Deployment
|
|
|
|
- [ ] Merge todos los PRs a main
|
|
- [ ] Tag version (v1.1.0?)
|
|
- [ ] Deploy a staging
|
|
- [ ] QA en staging
|
|
- [ ] Deploy a production
|
|
- [ ] Monitoring post-deploy
|
|
|
|
---
|
|
|
|
## Métricas de Éxito
|
|
|
|
### Antes vs Después
|
|
|
|
| Métrica | Antes | Después | Objetivo |
|
|
|---------|-------|---------|----------|
|
|
| Componentes Implementados | 50% | 100% | ✓ |
|
|
| Visual Consistency | 70% | 100% | ✓ |
|
|
| UX Score | 7/10 | 9/10 | ✓ |
|
|
| Lighthouse Performance | 90+ | 90+ | ✓ |
|
|
| Accessibility Score | 95+ | 95+ | ✓ |
|
|
| Cross-browser Issues | ~5 | 0 | ✓ |
|
|
|
|
### KPIs
|
|
|
|
- [ ] Time on page increase > 10%
|
|
- [ ] Bounce rate decrease > 5%
|
|
- [ ] CTA click rate increase > 15%
|
|
- [ ] Mobile engagement increase > 10%
|
|
- [ ] Page load time < 2s
|
|
- [ ] Core Web Vitals all green
|
|
|
|
---
|
|
|
|
## Issues Tracking
|
|
|
|
### GitHub Issues Status
|
|
|
|
- [ ] #41 - TOC Sticky con ScrollSpy → **Status:** Not Started
|
|
- [ ] #42 - Navbar Underline Hover → **Status:** Not Started
|
|
- [ ] #43 - Notification Bar Colors → **Status:** Not Started
|
|
- [ ] #44 - Botón "Let's Talk" → **Status:** Not Started
|
|
- [ ] #45 - Related Posts Grises → **Status:** Not Started
|
|
- [ ] #46 - Paginación Profesional → **Status:** Not Started
|
|
- [ ] #47 - Modal Refinamiento → **Status:** Not Started
|
|
- [ ] #48 - Pulse Animation → **Status:** Not Started
|
|
- [ ] #49 - Hero Padding → **Status:** Not Started
|
|
|
|
### Progress Tracking
|
|
|
|
```
|
|
Sprint 1: ░░░░░░░░░░ 0/3 issues
|
|
Sprint 2: ░░░░░░░░░░ 0/2 issues
|
|
Sprint 3: ░░░░░░░░░░ 0/2 issues
|
|
Sprint 4: ░░░░░░░░░░ 0/2 issues
|
|
|
|
Total: ░░░░░░░░░░ 0/9 issues (0%)
|
|
```
|
|
|
|
---
|
|
|
|
## Notas y Observaciones
|
|
|
|
### Día 1
|
|
- [ ] Iniciar implementación
|
|
|
|
### Día 2
|
|
- [ ]
|
|
|
|
### Día 3
|
|
- [ ]
|
|
|
|
### Día 4
|
|
- [ ]
|
|
|
|
### Blockers
|
|
- [ ] Ninguno identificado
|
|
|
|
### Aprendizajes
|
|
- [ ]
|
|
|
|
---
|
|
|
|
## Sign-off
|
|
|
|
**Desarrollo Completado:**
|
|
- [ ] Todos los issues implementados
|
|
- [ ] Todos los tests pasados
|
|
- [ ] Todos los PRs merged
|
|
- [ ] Documentación actualizada
|
|
|
|
**QA Aprobado:**
|
|
- [ ] Testing funcional completo
|
|
- [ ] Testing visual completo
|
|
- [ ] Testing cross-browser completo
|
|
- [ ] Testing accesibilidad completo
|
|
|
|
**Deployment:**
|
|
- [ ] Staging deployment exitoso
|
|
- [ ] Production deployment exitoso
|
|
- [ ] Monitoring sin errores
|
|
- [ ] Stakeholders notificados
|
|
|
|
**Firma:**
|
|
- Desarrollador: ________________ Fecha: _______
|
|
- QA: ________________ Fecha: _______
|
|
- Product Owner: ________________ Fecha: _______
|
|
|
|
---
|
|
|
|
**Última actualización:** 2025-11-04
|
|
**Próxima revisión:** Diaria durante implementación
|