Name: larsderidder/theredbeard-pi-agent
Author: Community

Reglas de Desarrollo Web

Rendimiento

Las imágenes son la causa principal de sitios lentos: usa WebP/AVIF, carga diferida (lazy-load) para contenido fuera de pantalla y establece ancho y alto explícitos para evitar cambios de diseño.
El CSS que bloquea el renderizado retrasa la primera pintura: alinea el CSS crítico en <head> y difiere el resto.
Los scripts de terceros (analíticas, widgets de chat) a menudo añaden 500ms+: cárgalos con async o defer, audítalos regularmente.
Las fuentes causan parpadeo de texto invisible (FOIT) — usa font-display: swap y precarga las fuentes críticas.
Mide con Lighthouse en modo incógnito: las extensiones sesgan los resultados.

Comienza el CSS con estilos para móviles, añade complejidad con min-width en media queries — es más fácil escalar hacia arriba que reducir.
Los objetivos táctiles necesitan un mínimo de 44x44px — los dedos son imprecisos, los botones pequeños frustran a los usuarios.
Prueba en dispositivos reales, no solo en las herramientas de desarrollo del navegador — la simulación de limitación no captura los problemas reales.
El desplazamiento horizontal es un error crítico — prueba cada página con un ancho mínimo de 320px.
La metaetiqueta viewport es obligatoria: <meta name="viewport" content="width=device-width, initial-scale=1">.

Cada <img> necesita texto alt — alt="" para imágenes decorativas, texto descriptivo para las significativas.
Relación de contraste de color 4.5:1 como mínimo para el texto del cuerpo — usa el comprobador de contraste de WebAIM.
Las entradas de formulario deben tener elementos <label> asociados — los placeholders solos no son accesibles.
La navegación por teclado debe funcionar — prueba cada elemento interactivo con la tecla Tab.
Los lectores de pantalla anuncian la jerarquía de encabezados — usa H1-H6 en orden lógico, nunca saltes niveles.

Solo un <h1> por página — es el título de la página, no una herramienta de estilo.
Usa elementos semánticos: <nav>, <main>, <article>, <aside>, <footer> — comunican estructura a los navegadores y tecnologías de asistencia.
<button> para acciones, <a> para navegación — no uses divs con manejadores de clic.
Los enlaces externos deben tener rel="noopener" — previene vulnerabilidades de seguridad con target="_blank".
Valida el HTML — el marcado roto causa renderizado impredecible entre navegadores.

Evita !important — rompe la cascada y dificulta la depuración. Mejor corrige la especificidad.
Usa unidades relativas (rem, em, %) en lugar de px fijos para el texto — respeta las preferencias de tamaño de fuente del usuario.
Las propiedades personalizadas CSS (variables) reducen la repetición — define colores y espaciados una vez, úsalos en todas partes.
Flexbox para diseños 1D, Grid para 2D — no fuerces uno a hacer el trabajo del otro.
Prueba sin que el CSS cargue — el contenido debe seguir siendo legible en HTML plano.

La falta de favicon genera spam 404 en los registros del servidor — incluye siempre uno, aunque sea un PNG simple.
No establecer <html lang="es"> (o el idioma correspondiente) rompe la pronunciación de los lectores de pantalla.
Los enlaces http:// hardcodeados se rompen en sitios HTTPS — usa // relativo al protocolo o siempre https://.
Asumir que JavaScript está disponible — el contenido principal debe funcionar sin JS (mejora progresiva).
Olvidar los estilos de impresión — añade @media print para páginas que los usuarios puedan imprimir (recibos, artículos).

Las URL canónicas deben coincidir con la URL real que sirve el servidor — una discrepancia (ej. barra inclinada final vs. sin barra) confunde a Google y puede impedir la indexación.
Cada página de contenido necesita al menos un enlace interno que apunte a ella — las páginas que solo están en un sitemap pero sin página referente son despriorizadas por el rastreador de Google.
Los filtros de contenido en las plantillas pueden excluir páginas silenciosamente de la navegación — verifica que todas las páginas sean alcanzables siguiendo enlaces desde la página de inicio, no solo revisando el sitemap.
"Descubierto, pero actualmente no indexado" en Search Console generalmente significa que no hay enlaces internos, no un bloqueo técnico — primero corrige el enlazado antes de solicitar la indexación.

Prueba que todos los formularios realmente envíen datos — los formularios de contacto rotos pierden clientes potenciales silenciosamente.
Verifica que la página 404 exista y sea útil — la página 404 predeterminada del servidor se ve poco profesional.
Confirma las vistas previas de redes sociales con las etiquetas Open Graph — pruébalas en los depuradores de Facebook/Twitter.
Envía el sitemap a Google Search Console — acelera la indexación.
Configura monitoreo de tiempo de actividad — entérate cuando tu sitio se caiga antes de que los usuarios te lo digan.