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:
<!-- 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.
- Charset:
<!-- Declaramos la codificación de juego de caracteres para el documento -->
<meta charset="utf-8">- X-UA-Compatible:
<!-- 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:
<!-- Viewport para diseño web responsivo -->
<meta name="viewport" content="width=device-width, initial-scale=1">- Title:
<!-- 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)
- Description:
<!-- 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:
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 Web App Meta:
<!-- 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)
- Windows Tiles:
<!-- 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)
- Canonical:
rel="canonical"para evitar contenido duplicado.
<!-- Ayuda a prevenir problemas de contenido duplicado -->
<link rel="canonical" href="http://ejemplo.com/2017/09/articulo-nuevo-para-leer.html">- Language tag:
<!-- Indicamos el idioma definido para la página actual -->
<html lang="es">- Direction tag:
<!-- Indicamos la dirección de lectura (rtl = right to left/ derecha a izquierda) -->
<html dir="rtl">- Alternate language:
<!-- Indicamos el idioma definido para la página actual -->
<link rel="alternate" href="https://es.example.com/" hreflang="es">- Comentarios condicionales:
📖 Comentarios condicionales (Internet Explorer) - MSDN - Microsoft
(fuente en inglés)
-
RSS feed:
-
CSS Crítico:
<style></style>en una sola línea (minificado).
- Orden del CSS:
<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:
Nota: Al usar
og:image:widthyog:image:heightse 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
- Twitter Card:
<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:
📖 Referencia HTML
(fuente en inglés)
-
Páginas de error:
-
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:
- Obedece al W3C:
- HTML Lint:
- Verificador de enlaces:
- Prueba de Adblockers:
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)
- Formato de fuentes:
- 📖 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:
- Cargador de fuentes:
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:
- CSS Print:
- Preprocesador:
- ID único:
- Reinicio de CSS:
- 📖 Reset.css
- 📖 Normalize.css
- 📖 Reboot
- Prefijos JS:
<div id="js-slider" class="my-slider">
<!-- Or -->
<div id="id-used-by-cms" class="js-slider my-slider">- CSS incrustado:
- Vendor prefixes:
- Concatenado:
- Minificado:
- No bloquea renderizado:
- CSS sin utilizar:
- Stylelint:
-
Diseño web responsivo:
-
Validador CSS:
- Navegadores de escritorio:
- Navegadores móviles:
- Sistema Operativo:
- Fidelidad al diseño:
- Dirección de lectura:
- 📖 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:
- 🛠 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:
-
Retina:
-
Sprite:
-
Ancho y altura:
<img>tienen una altura y ancho establecido (No especificar px o %). -
Lazy loading:
-
Texto alternativo:
- 📖 Textos alternativos - La guía definitiva
(fuente en inglés)
- JavaScript Incrustado:
- Concatenado:
- Minificado:
.min).
- Seguridad JavaScript:
Guidelines for Developing Secure Applications Utilizing JavaScript*
-
noscripttag:<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:
asynco deferidos usando el atributodefer.
📖 Remover Javascript que bloquea el renderizado
(fuente en inglés)
- Modernizr:
<html>.
- ESLint:
- HTTPS:
- HTTP Strict Transport Security (HSTS):
- Cross Site Request Forgery (CSRF):
📖 Cross-Site Request Forgery (CSRF) Prevention Cheat Sheet - OWASP
- Cross Site Scripting (XSS):
- Opciones de Content-Type
- X-Frame-Options (XFO)
- Política de seguridad del contenido:
- Metas a alcanzar:
- 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
- Minificado:
-
Lazy loading:
-
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:
- Resolución de DNS:
dns-prefetch.
<link rel="dns-prefetch" href="https://example.com">- Pre-conexión:
preconnect.
<link rel="preconnect" href="https://example.com">- Prefetching:
prefetch.
<link rel="prefetch" href="image.png">- Precarga:
<body>) son solicitados por adelantado usandopreload.
<link rel="preload" href="app.js">- Google PageSpeed:
Notas: Puedes mirar la lista de reproducción A11ycasts with Rob Dodson 📹
- Mejora progresiva:
- Contraste de color:
- H1:
- Encabezados:
📹 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:
- Etiqueta:
<label>es asociada a cada elemento del formulario. En caso de que una etiqueta no pueda ser mostrada, usaaria-labelen su lugar.
- Pruebas de estándares de accesibilidad:
- Navegación con teclado:
- Screen-reader:
- Focus style:
- Google Analytics:
- Lógica de encabezados:
- sitemap.xml:
- robots.txt:
- 📖 The robots.txt file
- 🛠 Test your robots.txt with Google Robots Testing Tool
- Datos estructurados:
- 📖 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:
- Enlaces con etiquetas de paginación:
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.
➔
[](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.
