La Front-End Checklist es una lista exhaustiva de todos los elementos que necesitas tener/probar antes de lanzar tu sitio/página HTML a producción.
Esta basada en años de experiencia de desarrolladores Front-End, con agregados provenientes de otros checklist de código abierto.
Todos los elementos en la Front-End Checklist son requeridos para la mayoría de los proyectos, pero algunos elementos pueden ser omitidos o no son esenciales (por ejemplo, en el caso de una aplicación web administrativa, quizás no necesitas la función de RSS). Elegimos usar 3 niveles de flexibilidad:
- significa que el elemento es recomendado pero puede ser omitido en situaciones particulares.
- significa que el elemento es altamente recomendado y eventualmente puede ser omitido en casos muy particulares. Algunos elementos, si son omitidos, pueden traer malas repercusiones en términos de rendimiento o SEO.
- significa que el elemento no se puede omitir por ningún motivo. Puede causar una anomalía en su página, tener problemas de accesibilidad o SEO. Estos elementos deben tener prioridad en el test.
Algunos recursos poseen un emoticón para ayudar a entender el tipo de contenido/ayuda que podrás encontrar en el checklist:
- 📖: documentación o artículos
- 🛠: herramienta en línea / herramienta para pruebas
- 📹: media o contenido en video
Nota: Debido a que este documento es una traducción, la documentación, artículos, herramientas y medios se encuentran en inglés.
Nota: Puedes encontrar una lista de todo
(traducción en progreso)
lo que puede encontrarse en el<head>
de un documento HTML.
<!-- Doctype HTML5 -->
<!doctype html>
📖 Determinando la codificación de caracteres - HTML5 W3C
(fuente en inglés)
Los siguientes 3 meta etiquetas (Charset, X-UA Compatible and Viewport) necesitan ir primero en el head.
<!-- Declaramos la codificación de juego de caracteres para el documento -->
<meta charset="utf-8">
<!-- Ordenamos a Internet Explorer usar su motor de renderizado más reciente -->
<meta http-equiv="x-ua-compatible" content="ie=edge">
📖 Especificando modos de documento heredado (Internet Explorer)
(fuente en inglés)
<!-- Viewport para diseño web responsivo -->
<meta name="viewport" content="width=device-width, initial-scale=1">
- Title: El título es usado en todas las páginas (SEO: Google calcula el ancho de los caracteres usados en el título y los corta entre los 477 y 485 pixeles. El límite promedio en los títulos es de no más de 55 caracteres).
<!-- Título del documento -->
<title>Título de página menor a 55 caracteres</title>
📖 Título - HTML - MDN
(fuente en inglés)
- 🛠 SERP Snippet Generator
(fuente en inglés)
<!-- Meta descripción -->
<meta name="description" content="Descripción de la página en menos de 150 caracteres">
📖 Meta descripción - HTML - MDN
(fuente en inglés)
- Favicons: Cada favicon se ha creado y mostrado correctamente. Si solo tienes un
favicon.ico
, colocalo en la raíz de tu sitio. Normalmente no necesitarás usar ningún marcado. Sin embargo, es una buena práctica enlazarlo usando el ejemplo debajo. Al día de hoy, se recomienda el formato PNG sobre el formato.ico
(dimensión: 32x32px).
<!-- Favicon estandar -->
<link rel="icon" type="image/x-icon" href="https://example.com/favicon.ico">
<!-- Formato favicon recomendado -->
<link rel="icon" type="image/png" href="https://example.com/favicon.png">
- 🛠 Generador de Favicon
(herramienta en inglés)
- 🛠 RealFaviconGenerator
(herramienta en inglés)
- 📖 Favicon Cheat Sheet
(fuente en inglés)
- 📖 Favicons, Touch Icons, Tile Icons, etc. ¿Cuál necesitas? - CSS Tricks
(fuente en inglés)
- 📖 PNG favicons - caniuse
(fuente en inglés)
<!-- Apple Touch Icon (al menos de 200x200px)-->
<link rel="apple-touch-icon" href="/custom-icon.png">
<!-- Para correr aplicaciones a pantalla completa -->
<meta name="apple-mobile-web-app-capable" content="yes">
<!-- Estilo de la barra de estado (ver enlace Meta Tags soportados para valores disponibles) -->
<!-- No funcionará a menos que coloques la etiqueta anterior -->
<meta name="apple-mobile-web-app-status-bar-style" content="black">
📖 Configurando Aplicaciones Web
(fuente en inglés)
- 📖 Meta Tags soportados
(fuente en inglés)
<!-- Microsoft Tiles -->
<meta name="msapplication-config" content="browserconfig.xml" />
El marcado xml mínimo requerido para el archivo browserconfig.xml es el siguiente:
<?xml version="1.0" encoding="utf-8"?>
<browserconfig>
<msapplication>
<tile>
<square70x70logo src="small.png"/>
<square150x150logo src="medium.png"/>
<wide310x150logo src="wide.png"/>
<square310x310logo src="large.png"/>
</tile>
</msapplication>
</browserconfig>
📖 Referencia de esquema de configuración del navegador
(fuente en inglés)
<!-- Ayuda a prevenir problemas de contenido duplicado -->
<link rel="canonical" href="http://ejemplo.com/2017/09/articulo-nuevo-para-leer.html">
- Language tag: La etiqueta de lenguaje de tu sitio web está específicada y relacionada al lenguaje de la página actual.
<!-- Indicamos el idioma definido para la página actual -->
<html lang="es">
- Direction tag: La dirección de lectura es específicada en la etiqueta body (Puede ser usada en otra etiqueta HTML).
<!-- Indicamos la dirección de lectura (rtl = right to left/ derecha a izquierda) -->
<html dir="rtl">
- Alternate language: La etiqueta de lenguaje de tu sitio web está específicada y relacionada al lenguaje de la página actual .
<!-- Indicamos el idioma definido para la página actual -->
<link rel="alternate" href="https://es.example.com/" hreflang="es">
📖 Comentarios condicionales (Internet Explorer) - MSDN - Microsoft
(fuente en inglés)
-
RSS feed: Si tu proyecto es un blog o tiene artículos, un enlace RSS fue proprocionado.
-
CSS Crítico: El CSS crítico (o "above the fold") contiene todo el CSS usado para renderizar la porción visible de la página. Se incrusta antes de la llamada principal a CSS y entre
<style></style>
en una sola línea (minificado).
- Orden del CSS: Todos los archivos CSS son cargados antes que cualquier archivo JavaScript en el
<head>
. (Excepto en los casos donde los archivos JS se cargan asíncronamente en tus páginas).
Facebook OG y Twitter Cards son altamente recomendados para cualquier sitio. Otras etiquetas de medios sociales pueden ser considerados si tienes un objetivo partícular y quieres asegurar la visualización.
- Facebook Open Graph: Todos los Facebook Open Graph (OG) fueron probados y ninguno es erroneo o contiene información falsa. Las imágenes necesitan ser de al menos 600 x 315 pixeles, se recomienda 1200 x 630 pixeles.
Nota: Al usar
og:image:width
yog:image:height
se especificaran las dimensiones de la imagen al crawler para que pueda desplegar la imagen inmediatamente sin tener que descargarla y procesarla asíncronamente.
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/page.html">
<meta property="og:title" content="Título del contenido">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:description" content="Descripción aquí">
<meta property="og:site_name" content="Nombre del sitio">
<meta property="og:locale" content="en_US">
<!-- Las siguientes etiquetas son opcionales, pero recomendadas -->
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
- 📖 Guía para webmasters sobre el uso compartidos
- 🛠 Prueba tus páginas con el Depurador de contenido compartido
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@site_account">
<meta name="twitter:creator" content="@individual_account">
<meta name="twitter:url" content="https://example.com/page.html">
<meta name="twitter:title" content="Título del contenido">
<meta name="twitter:description" content="Descripción del contenido menor a 200 caracteres">
<meta name="twitter:image" content="https://example.com/image.jpg">
- 📖 Getting started with cards — Twitter Developers
(fuente en inglés)
- 🛠 Test your page with the Twitter card validator
- Elementos semánticos HTML5: Los elementos semánticos HTML5 son usados apropiadamente (header, section, footer, main...).
📖 Referencia HTML
(fuente en inglés)
-
Páginas de error: Páginas de error 400 y 5xx existen. Recuerda que las páginas de error 5xx necesitan tener su CSS integrado (sin llamadas externas del servidor actual).
-
Noopener: En caso que uses enlaces externos con
target="_blank"
, tu enlace debe tener un atributorel="noopener"
para evitar tab nabbing. Si necesitas dar soporte a versiones antigüas de Firefox, usarel="noopener noreferrer"
.
- Limpiar comentarios: Código innecesario necesita ser removido antes de enviar la página a producción.
- Obedece al W3C: Todas las páginas necesitan ser aprobadas por el validador W3C para identificar posibles problemas en el código HTML.
- HTML Lint: Uso herramientas para ayudarme a analizar cualquier problema que podría tener en mi código HTML.
- Prueba de Adblockers: Tu sitio web muesta el contenido correctamente cuando adblockers están habilitados (Puedes incluir un mensaje para sugerir a las personas deshabilitar su adblocker).
Notas: Usar fuentes web puede ocasionar retardos en la visualización de textos (Flash Of Unstyled Text/Flash Of Invisible Text), considera tener fuentes de respaldo y/0 usar cargadores de fuentes para controlar el comportamiento.
- 📖 Consideraciones técnicas acerca de webfonts
(fuente en inglés)
- 📖 WOFF - Web Open Font Format - Caniuse.
(fuente en inglés)
- 📖 WOFF 2.0 - Web Open Font Format - Caniuse.
(fuente en inglés)
- 📖 TTF/OTF - TrueType and OpenType font support
(fuente en inglés)
- 📖 Using @font-face - CSS-Tricks
(fuente en inglés)
- Tamaño de fuentes: El tamaño de las fuentes no excede los 2 MB (todas las variantes incluidas).
- Cargador de fuentes: Controlar el comportamiento de carga de fuentes con un cargador de fuentes web
Notas: Echa un vistazo a los Lineamientos CSS y Lineamientos Sass seguidos por la mayoría de los desarrolladores. Si tienes alguna duda acerca de las propiedades CSS, puedes visitar la Referencia CSS.
- Diseño Web Responsivo: El sitio wen utiliza diseño web responsivo.
- CSS Print: Se proporciona una hoja de estilo para impresión y es correcto en cada página.
- Preprocesador: Tu página utiliza un preprocesador CSS (Sass es recomendado).
- ID único: Si utilizas IDs, son únicos en la página.
- Reinicio de CSS: Un reinicio de CSS es usado y está actualizado. (Si utilizas algún Framework CSS como Bootstrap o Foundation, el reinicio de CSS ya está implementado.)
- 📖 Reset.css
- 📖 Normalize.css
- 📖 Reboot
- Prefijos JS: Todas las clases (o id- usados en archivos JavaScript) comienzan con js- y no son estilizados dentro del archivo CSS.
<div id="js-slider" class="my-slider">
<!-- Or -->
<div id="id-used-by-cms" class="js-slider my-slider">
- CSS incrustado: Evita a todo costo el CSS inscrustado (directo al HTML): solo usalo por razones válidas (ej: imagen de fondo para un slider, CSS crítico).
- Vendor prefixes: Los vendor prefixes son usados y generados de acuerdo con la compatibilidad de tu navegador. (Si utilizas un preprocesador, esta labor se puede automatizar)
- Concatenado: Los archivos CSS son concatenados en un solo archivo. (No aplica en HTTP/2)
- Minificado: Todos los archivos CSS están minificados (estilos en una sola línea).
- No bloquea renderizado: Los archivos CSS no deben afectar el tiempo carga del DOM.
-
Diseño web responsivo: Todas las páginas fueron probadas en los siguientes puntos: 320px, 768px, 1024px (pueden ser más / varia de acuerdo a tus resultados en analítica).
-
Validador CSS: El CSS fue probado y los errores pertinentes fueron corregidos.
- Navegadores de escritorio: Todas las págunas fueron probadas en todos los navegadores actuales (Safari, Firefox, Chrome, Edge...)
- Navegadores móviles: Todas las páginas fueron probadas en todos los navegadores móviles actuales (Navegador nativo, Chrome, Safari...)
- Sistema Operativo: Todas las páginas fueron probadas en todos los Sistemoas Operativos actuales (Windows, Android, iOS, Mac).
- Fidelidad al diseño: Dependiendo del proyecto y de la calidad creativa, pueden solicitarte apegarte lo más posible al diseño. Puedes utilizar herramientas para comparar los diseños con la implementación de código y asegurar consistencia.
- Dirección de lectura: Todas las páginas necesitan ser probadas para idiomas LTR y RTL si necesitan soporte.
- 📖 Building RTL-Aware Web Apps & Websites: Part 1 - Mozilla Hacks
(fuente en inglés)
- 📖 Building RTL-Aware Web Apps & Websites: Part 2 - Mozilla Hacks
(fuente en inglés)
Notas: Para un completo entendimiento de la optimización de imágenes, mira el ebook gratuito Essential Image Optimization de Addy Osmani.
- Optimización: Todas las imágesnes están optimizadas para ser renderizadas en el navegador. El formato WebP puede ser utilizado para páginas críticas (como la Página de Inicio).
- 🛠 Imagemin
- 🛠 Usa ImageOptim para optimizar tus imágenes gratis.
- 🛠 Usa Kraken.io una maravillosa alternativa tanto para optimización png o jpg. Hasta 1mb por archivo en plan gratuito.
- 🛠 TinyPNG optimiza sin perdidas png, apng (png animado) e imágenes jpg. Versiones gratuitas y de pago disponibles.
- 🛠 ZorroSVG compresion jpg para imágenes transparentes usando enmascarado svg.
- 🛠 SVGO una herramienta basada en Nodejs para optimisar archivos de gráficos vectoriales.
- 🛠 SVGOMG herramienta para optimizar archivos svgs en línea.
- Picture/Srcset: You use picture/srcset to provide the most appropriate image for the current viewport of the user.
-
Retina: Proporcionas imágenes para layouts x2 o x3, soporte para retina display.
-
Sprite: Las imágenes pequeñas están en un archivo sprite (en el caso de iconos, es recomedable colocarlos en formato SVG).
-
Ancho y altura: Todo las etiquetas
<img>
tienen una altura y ancho establecido (No especificar px o %). -
Lazy loading: Las imágenes usan lazy loading (solo cargan cuando están en la parte visible del viewport, siempre se proporciona un fallback que no use script).
-
Texto alternativo: Todas las imágenes tienen un texto alternativo que las describe.
- 📖 Textos alternativos - La guía definitiva
(fuente en inglés)
- JavaScript Incrustado: No tienes JavaScript incrustado (mezclado con tu código HTML).
- Concatenado: Los archivos JavaScript están concatenados.
- Minificado: Los archivos JavaScript están minificados (puedes agregar el subfijo
.min
).
- Seguridad JavaScript:
Guidelines for Developing Secure Applications Utilizing JavaScript*
-
noscript
tag: Usar la etiqueta<noscript>
en el cuerpo del HTML si un script en la página no es soportado o si los scripts están desactivaos en el navegaor. Esto será útil en el renderizado de aplicaciones cliente-servidor pesadas, como React,js, ver ejemplo(fuente en inglés)
<noscript>
Necesitas habilitar Javascript para visualizar la aplicación.
</noscript>
- No bloquea el renderizado: Los archivos JavaScript son cargados asíncronamente usando el atributo
async
o deferidos usando el atributodefer
.
📖 Remover Javascript que bloquea el renderizado
(fuente en inglés)
- Modernizr: Si necesitas apuntar a alguna característica específica puedes usar Modernizr para agregar clases a tu etiqueta
<html>
.
- HTTP Strict Transport Security (HSTS): La cabecera HTTP está configurada como 'Strict-Transport-Security'.
- Cross Site Request Forgery (CSRF): Asegurate que las peticiones hechas a tu servidor son legítimas y oríginadas desde tu sitio web/aplicación para prevenir ataques CSRF.
📖 Cross-Site Request Forgery (CSRF) Prevention Cheat Sheet - OWASP
- Opciones de Content-Type Previene a Google Chrome e Internet Explorer intentar ataques mime-sniff al content-type de respuestas no declaradas desde el servidor.
- Política de seguridad del contenido: Define cómo es cargado el contenido en tu sitio y desde dónde está permitido cargarlo. Puede ser usado para proteger contra ataques clckjacking.
- Metas a alcanzar: Tu página debe alcanzar las siguientes metas:
- La primera visualización significativa suceda en menos de 1 segundo
- El tiempo para interactuar es menor a 5 segundos para una configuración "promedio" (un dispositivo Android en una red 3G lenta con 400ms RTT y velocidad de transferencia de 400kbps) y menor a 2 segundos para visitas recurrentes.
- Tamaño de archivo debajo de 170Kb gzipped
-
Lazy loading: Imágenes, scripts y CSS necesitan cargarse implementando lazy loading para mejorar el tiempo de respuesta de la página actual (Mira los detalles en las secciones respectivas)
-
Tamaño de Cookie: Si estás usando cookies asegurate que cada cookie no exceda los 4096 bytes y tu nombre de dominio no tiene más de 20 cookies.
- Componentes de terceros: iframes o componentes de terceros que dependan de JS externo (como botones para compartir contenido) son reemplazados por componentes estáticos cuando sea posible, asi se limitan llamadas externas a APIs y se mantiene privada la actividad de los usuarios.
- Resolución de DNS: Los DNS de servicios de terceros que son necesarios son resueltos por adelantado durante el tiempo de inactividad usando
dns-prefetch
.
<link rel="dns-prefetch" href="https://example.com">
- Pre-conexión: Búsquedas de DNS, TCP handshakes y negociaciones TLS con servicios que serán requeridos pronto son hechos por adelantado durante el tiempo de inactividad usando
preconnect
.
<link rel="preconnect" href="https://example.com">
- Prefetching: Recursos que se necesitarán pronto (ej. imágenes con lazy loading) son solicitados por adelantado durante el tiempo de inactividad usando
prefetch
.
<link rel="prefetch" href="image.png">
- Precarga: Recursos necesarios en la página actual (ej. scripts colocados al final de la etiqueta
<body>
) son solicitados por adelantado usandopreload
.
<link rel="preload" href="app.js">
- Google PageSpeed: Todas tus páginas fueron probadas (no solo la página de inicio) y tienen una calificación de al menos 90/100.
Notas: Puedes mirar la lista de reproducción A11ycasts with Rob Dodson 📹
- Mejora progresiva: Las funcionalidad principales, como la navegación y búsquedas, deben funcionar con JavaScript deshabilitado.
- H1: Todas las páginas tienen una etiqueta H1 la cual no es el título del sitio web.
- Encabezados: Los encabezados deben ser usados en el orden correcto (H1 a H6).
📹 Why headings and landmarks are so important -- A11ycasts #18
- Role banner:
<header>
tiene el atributorole="banner"
. - Role navigation:
<nav>
tiene el atributorole="navigation"
. - Role main:
<main>
tiene el atributorole="main"
.
- Tipos de entrada HTML5 específicos son usados: Esto es importante para dispositivos móviles que muestran teclados personalizados y widgets para diferentes tipos.
- Etiqueta: Una etiqueta
<label>
es asociada a cada elemento del formulario. En caso de que una etiqueta no pueda ser mostrada, usaaria-label
en su lugar.
- Pruebas de estándares de accesibilidad: Usa la herramienta WAVE para probar si tu página respeta los estándares de accesibilidad.
- Navegación con teclado: Prueba tu sitio web utlizando solo tu teclado en un orden previsible. Todos los elementos interactivos son alcanzable y pueden usarse.
- Screen-reader: Todas las páginas son probadas en un screen reader (VoiceOver, ChromeVox, NVDA o Lynx).
- Focus style: Si se deshabilita el estado focus de los elementos, se reemplaza por un estado visible en CSS.
- sitemap.xml: Existe un sitemap.xml y fue enviado por Google Search Console (nombrado Google Webmaster Tools anteriormente).
- 📖 The robots.txt file
- 🛠 Test your robots.txt with Google Robots Testing Tool
- Datos estructurados: Las páginas usando datos estructurados son probadas y no contienen errores. Los datos estructurados ayudar a los crawlers a entender el contenido en la página actual.
- 📖 Introduction to Structured Data - Search - Google Developers
- 📖 RDFa - Linked Data in HTML
- 📖 JSON-LD
- 📖 Microdata
- 🛠 Test your page with the Structured Data Testing Tool
- 🛠 Complete list of vocabularies that can be used as structured data. Schema.org Full Hierarchy
- Sitemap HTML: Un sitemap HTML es proporcionado y es accesible con enlaces en el footer del sitio web.
- Enlaces con etiquetas de paginación: Proporcionar
rel="prev"
yrel="next"
para indicar contenido paginado.
<!-- Ejemplo: Enlaces con etiquetas de paginación de la página 2 -->
<link rel="prev" href="https://example.com/?page=1">
<link rel="next" href="https://example.com/?page=3">
La Front-End Checklist también está disponible en otros idiomas. ¡Gracias a todos los traductores y a su mágnifico trabajo!
- 🇺🇸 Inglés(repositorio principal): thedaviddias/Front-End-Checklist
- 🇯🇵 Japonés: miya0001/Front-End-Checklist
- 🇨🇳 Chino: JohnsenZhou/Front-End-Checklist
- 🇰🇷 Coreano: kesuskim/Front-End-Checklist
- 🇧🇷 Portugués: jcezarms/Front-End-Checklist
- 🇻🇳 Vietnamita: euclid1990/Front-End-Checklist
- 🇹🇼 Traditional Chinese: EngineLin/Front-End-Checklist
- 🇫🇷 French: ynizon/Front-End-Checklist
- 🇷🇺 Russian: ungear/Front-End-Checklist
- 🇹🇷 Turkish: eraycetinay/Front-End-Checklist
- 🇩🇪 German: xfuture603/Front-End-Checklist
Si quieres mostrar que estás siguiendo las reglas del Front-End Checklist, pon esta insignia en tu archivo README.
[![Front‑End_Checklist followed](https://img.shields.io/badge/Front‑End_Checklist-followed-brightgreen.svg)](https://github.com/thedaviddias/Front-End-Checklist/)
Abre un issue o un pull requesto para sugerir cambios o añadir información
El repositorio del Front-End Checklist consiste en dos ramas:
Esta rama consiste en el archivo README.md
que se refleja automaticamete en el sitio web Front-End Checklist.
Esta rama será usada para hacer cambios significativos a la estructura o contenido, de ser necesarios. Es preferible usar la rama master para pequeñas correcciones o añadir un nuevo elemento.
Dale un vistazo a todos estos asombrosos contribuyentes.
David Dias, Geoffrey Signorato, Sandeep Ramgolam and Cédric Poilly.