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 65 caracteres</title>📖 TÃtulo - HTML - MDN
(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 Touch Icon:
<!-- Apple Touch Icon -->
<link rel="apple-touch-icon" href="/custom-icon.png">📖 Configurando Aplicaciones Web
(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>- Canonical:
rel="canonical"para evitar contenido duplicado.
<!-- Ayuda a prevenir problemas de contenido duplicado -->
<link rel="canonical" href="http://example.com/2017/09/a-new-article-to-red.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">📖 dir - HTML - MDN
- Alternate language:
<!-- Indicamos el idioma definido para la página actual -->
<link rel="alternate" href="https://es.example.com/" hreflang="es">- Comentarios condicionales:
📖 About conditional comments (Internet Explorer) - MSDN - Microsoft
-
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:
<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">
- 📖 A Guide to Sharing for Webmasters
- 🛠Test your page with the Facebook OG testing
- 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
- 🛠Test your page with the Twitter card validator
- Elementos semánticos HTML5:
📖 HTML Reference
-
Páginas de error:
-
Noopener:
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".
📖 About rel=noopener
- Limpiar comentarios:
- Obedece al W3C:
🛠W3C validator
- HTML Lint:
🛠Dirty markup
-
Navegadores de escritorio:
-
Navegadores móviles:
-
Verificador de enlaces:
🛠W3C Link Checker
- Prueba de Adblockers:
- Pixel perfect:
- Formato de fuentes:
- Tamaño 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:
- 🛠UnCSS Online ðŸ›
- 🛠PurifyCSS
- 🛠Chrome DevTools Coverage
- Stylelint:
- 🛠stylelint, a CSS linter
- 📖 Sass guidelines
-
Diseño web responsivo:
-
Validador CSS:
🛠CSS Validator
- Dirección de lectura:
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.
- Retina:
- Sprite:
- Ancho y altura:
<img>tienen una altura y ancho establecido (No especificar px o %).
Nota: Muchos desarrolladores asumen que definir el ancho y alto no es compatible con el diseño web responsivo, lo cual no es correcto.
-
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*
- No bloquea el renderizado:
asynco deferidos usando el atributodefer.
- 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)
- Peso de página:
- Minificado:
🛠W3C Validator
-
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.
- 📖 Cookie specification: RFC 6265
- 📖 Cookies
- 🛠Browser Cookie Limits
- 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:
🛠Contrast ratio
- 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:
📖 Mobile Input Types
- 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:
🛠Wave testing
- Navegación con teclado:
- Screen-reader:
- Focus style:
- Google Analytics:
- Lógica de encabezados:
- sitemap.xml:
- robots.txt:
- 🛠Test your robots.txt with Google Robots Testing Tool
- Datos estructurados:
- 📖 Introduction to Structured Data - Search - Google Developers
- 🛠Test your page with the Structured Data Testing Tool
- Sitemap HTML:
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
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.
