Home

Awesome

Front-End Checklist Logo

Front-End Checklist-ES

Contributors Front‑End_Checklist followed CC0

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.

Tabla de contenidos

  1. Head
  2. HTML
  3. Webfonts
  4. CSS
  5. Imágenes
  6. JavaScript
  7. Seguridad
  8. Rendimiento
  9. Accesibilidad
  10. SEO

¿Cómo usar?

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:

Algunos recursos poseen un emoticón para ayudar a entender el tipo de contenido/ayuda que podrás encontrar en el checklist:

Nota: Debido a que este documento es una traducción, la documentación, artículos, herramientas y medios se encuentran en inglés.


Head

Nota: Puedes encontrar una lista de todo (traducción en progreso) lo que puede encontrarse en el <head> de un documento HTML.

Meta tag

<!-- 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">
<!-- Título del documento -->
<title>Título de página menor a 55 caracteres</title>

📖 Título - HTML - MDN (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)

<!-- 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">
<!-- 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)

<!-- 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">

Etiquetas HTML

<!-- Indicamos el idioma definido para la página actual -->
<html lang="es">
<!-- Indicamos la dirección de lectura (rtl = right to left/ derecha a izquierda) -->
<html dir="rtl">

📖 Atributo Global dir - HTML - MDN

<!-- 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)

🛠 Critical by Addy Osmani on Github

Social meta

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.

Nota: Al usar og:image:width y og: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">
<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">

⬆ volver a arriba


HTML

Mejores prácticas

📖 Referencia HTML (fuente en inglés)

📖 About rel=noopener

Pruebas HTML

🛠 W3C validator

🛠 Dirty markup

🛠 W3C Link Checker

⬆ volver a arriba


Webfonts

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.

⬆ volver a arriba


CSS

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.

<div id="js-slider" class="my-slider">
<!-- Or -->
<div id="id-used-by-cms" class="js-slider my-slider">

🛠 Autoprefixer CSS online

Rendimiento

Pruebas CSS

🛠 CSS Validator

🛠 Pixel Perfect - Extension para Chrome

⬆ volver a arriba


Imágenes

Notas: Para un completo entendimiento de la optimización de imágenes, mira el ebook gratuito Essential Image Optimization de Addy Osmani.

Mejores prácticas

⬆ volver a arriba


JavaScript

Mejores prácticas

Minify Resources (HTML, CSS, and JavaScript)

Guidelines for Developing Secure Applications Utilizing JavaScript*

<noscript>
  Necesitas habilitar Javascript para visualizar la aplicación.
</noscript>

📖 Remover Javascript que bloquea el renderizado (fuente en inglés)

🛠 Customize your Modernizr

Pruebas de JavaScript

⬆ volver a arriba


Seguridad

Scanear verificar tu sitio web

Mejores prácticas

📖 Cross-Site Request Forgery (CSRF) Prevention Cheat Sheet - OWASP

⬆ volver a arriba


Rendimiento

Mejores prácticas

Preparando solicitudes futuras

📖 Explanation of the following techniques

<link rel="dns-prefetch" href="https://example.com">
<link rel="preconnect" href="https://example.com">
<link rel="prefetch" href="image.png">
<link rel="preload" href="app.js">

📖 Difference between prefetch and preload

Performance testing

⬆ volver a arriba


Accesibilidad

Notas: Puedes mirar la lista de reproducción A11ycasts with Rob Dodson 📹

Mejores prácticas

📖 Enable / Disable JavaScript in Chrome Developer Tools

🛠 Contrast ratio

Encabezados

📹 Why headings and landmarks are so important -- A11ycasts #18

Puntos de referencia

📖 Using ARIA landmarks to identify regions of a page

Semántica

📖 Mobile Input Types

Formulario

📖 Using the aria-label attribute - MDN

Pruebas de accesibilidad

🛠 Wave testing

📹 Managing Focus - A11ycasts #22

⬆ volver a arriba


SEO

<!-- 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">

⬆ vovler a arriba


Traducción

La Front-End Checklist también está disponible en otros idiomas. ¡Gracias a todos los traductores y a su mágnifico trabajo!

⬆ volver a arriba


Insignia 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

[![Front‑End_Checklist followed](https://img.shields.io/badge/Front‑End_Checklist-followed-brightgreen.svg)](https://github.com/thedaviddias/Front-End-Checklist/)

⬆ volver a arriba


Contribución

Abre un issue o un pull requesto para sugerir cambios o añadir información

Guía

El repositorio del Front-End Checklist consiste en dos ramas:

1. master

Esta rama consiste en el archivo README.md que se refleja automaticamete en el sitio web Front-End Checklist.

2. develop

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.

Contribuyentes

Dale un vistazo a todos estos asombrosos contribuyentes.

Autores

David Dias, Geoffrey Signorato, Sandeep Ramgolam and Cédric Poilly.

Licencia

CC0

⬆ volver a arriba