Curso HTML 17.5 Buenas prácticas para trabajar en equipo (reviews, guías de estilo)

17.5 Buenas prácticas para trabajar en equipo (reviews, guías de estilo)

Cuando varios desarrolladores colaboran en un mismo proyecto HTML, es fundamental establecer un conjunto claro de procesos y normas que aseguren calidad, coherencia y mantenimiento fácil del código. A continuación se detallan las principales recomendaciones divididas en revisiones de código y guías de estilo.

1. Revisiones de código (Code Reviews)

• Pull Requests claros: Cada nueva funcionalidad o corrección debe enviarse en una rama propia y generar un pull request (PR) con descripción, objetivos y capturas si aplica.
• Checklist de revisión: Antes de aprobar, revisar:
  • Uso de etiquetas semánticas correcto (header, nav, main, section, article, footer).
  • Accesibilidad (etiquetas ARIA, atributos alt, roles, tabIndex).
  • Validación W3C y ausencia de errores en la consola.
  • Conformidad con la guía de estilo del proyecto.
• Comentarios constructivos: Utilizar un tono positivo y ofrecer sugerencias concretas (‘¿Podrías usar <article> aquí para mejorar la semántica?’ en lugar de ‘Esto está mal’).
• Automatización: Integrar herramientas de CI que ejecuten linters y validadores HTML (HTMLHint, W3C validator) en cada PR.

1.1 Ejemplo de plantilla para Pull Request

# Descripción


# Tipo de cambio
- [ ] Bugfix
- [ ] Nueva funcionalidad
- [ ] Refactor
- [ ] Documentación

# Pasos para probar
1. Hacer checkout a la rama
2. Ejecutar el proyecto localmente
3. Verificar que no haya errores en consola
4. Validar HTML con la herramienta de CI

# Checklist
- [ ] El código sigue la guía de estilo HTML del proyecto
- [ ] Las etiquetas semánticas son correctas
- [ ] Los atributos ARIA/alt están presentes cuando corresponde
- [ ] Todas las pruebas unitarias/páginas se renderizan correctamente
  

2. Guías de estilo (Style Guides)

Una guía de estilo documentada evita debates innecesarios y agiliza la incorporación de nuevos miembros. Entre los aspectos clave:

  
Item 1
  
Item 2

          

  Enviar

          

  
Título
  
Contenido...

          

...
          

2.1 Plantilla de archivo README para proyectos HTML

# Nombre del Proyecto

## Descripción
Breve texto explicando el objetivo.

## Estructura de carpetas
- /src
  - /components
  - /pages
  - index.html

## Guía de estilo
Enlace al documento de estilo o sección aquí.

## Cómo ejecutar
1. Abrir index.html en el navegador.
2. (Opcional) Ejecutar servidor local con `npx serve`.

## Proceso de desarrollo
1. Crear rama `feature/nombre-descriptivo`
2. Realizar commits claros (tipo: alcance)
3. Abrir Pull Request usando la plantilla
4. Esperar aprobación y merge
  

3. Herramientas complementarias

• HTMLHint: Configurar .htmlhintrc con reglas de indentación, etiquetas vacías, atributos duplicados.
• Prettier: Para formateo automático, integrable en CI.
• W3C Validator: Informe automático de validación.
• Linters de accesibilidad: axe-core, pa11y.

4. Flujo de trabajo recomendado

1. Clonar repositorio y revisar README.
2. Crear rama siguiendo convención: feature/ o bugfix/.
3. Desarrollar, correr linters y pruebas locales.
4. Subir commits descriptivos: feat: añadir sección de testimonios.
5. Abrir Pull Request, asignar revisores y enlazar tickets.
6. Corregir según feedback y mergear tras aprobación.
7. Eliminar rama y desplegar mediante pipeline de CI/CD.

Adoptar estas buenas prácticas garantizará un código HTML limpio, accesible y mantenible, acelerará la incorporación de nuevos compañeros y reducirá riesgos de errores en producción.