roi-theme/_planeacion/GAP-IMPLEMENTATION-CHECKLIST.md

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