A Front-End Checklist é uma lista exaustiva de todos elementos que você precisa ter / testar antes de lançar seu site / página HTML em produção.
Ela é baseada em anos de experiência de desenvolvedores Front-End, com as adições provenientes de outras checklists open-source.
Ajude a compartilhar a Front-End Checklist votando e recomendando-a no Product Hunt
Todos itens na Front-End Checklist sĂŁo necesários na maioria dos projetos, mas alguns elementos podem ser omitidos ou nĂŁo sĂŁo tĂŁo essenciais (no caso da administração de um aplicativo web, vocĂŞ pode nĂŁo precisar de um feed RSS por exemplo). NĂłs escolhemos trĂŞs nĂveis de flexibilidade:
significa que o item é recomendado mas pode ser omitido em algumas situações em particular.
significa que o item é altamente recomendado e pode eventualmente ser omitido em alguns casos realmente particulares. Alguns elementos, se omitidos, podem ter más repercussões em termos de performance ou SEO.
significa que o item não pode ser omitido por qualquer razão. Você pode causar uma disfunção na sua página ou ter problemas com acessibilidade ou SEO. A prioridade dos testes precisa estar nestes elementos primeiro.
Alguns recursos possuem um emoticon para ajudar vocĂŞ a entender qual tipo de conteĂşdo / ajuda vocĂŞ pode encontrar na checklist:
- 📖: documentação ou artigo
- đź› : ferramenta online / ferramenta de teste
- đź“ą: mĂdia ou conteĂşdo em vĂdeo
Notas: VocĂŞ pode acessar uma lista com tudo que poderia ser encontrado na
<head>de um document HTML.
- Doctype:
<!-- Doctype HTML5 -->
<!doctype html>A prĂłximas 3 meta tags (Charset, X-UA Compatible e Viewport) precisam vir primeiro no head.
- Charset:
<!-- Determine o encoding de caracteres para o document -->
<meta charset="utf-8">- X-UA-Compatible:
<!-- Instrua o Internet Explorer a usar seu mais recente engine de renderização -->
<meta http-equiv="x-ua-compatible" content="ie=edge">- Viewport:
<!-- Viewport para web design responsivo -->
<meta name="viewport" content="width=device-width, initial-scale=1">- Title:
<!-- TĂtulo do Document -->
<title>TĂtulo de Página menor que 65 caracteres</title>- Descrição:
<!-- Meta Descrição -->
<meta name="description" content="Descrição da página com menos de 150 caracteres">- Favicons:
favicon.ico, ponha-o na raiz do seu site. Normalmente você não precisa usar nenhum markup. Entretanto, ainda é uma boa prática linkar ele usando o exemplo abaixo. Atualmente, o formato PNG é recomendado ao invés do formato.ico(dimensões: 32x32px).
<!-- Favicon padrĂŁo -->
<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:
apple-mobile-web-app-capableestá presente. (Crie seu arquivo Apple Icon com pelo menos dimensão 200x200px para dar suporte a todas dimensões que você pode precisar)
<!-- Apple Touch Icon -->
<link rel="apple-touch-icon" href="/custom-icon.png">- Windows Tiles:
<!-- Microsoft Tiles -->
<meta name="msapplication-config" content="browserconfig.xml" />O markup xml mĂnimo necessário para o arquivo browserconfig.xml Ă© como segue:
<?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 conteĂşdo duplicado.
<!-- Ajuda a evitar problemas com conteĂşdo duplicado -->
<link rel="canonical" href="http://example.com/2017/09/a-new-article-to-red.html">- Atributo de linguagem:
<!-- Indicamos o idioma definido para a página atual -->
<html lang="pt-br">- Atributo de direção:
<html>(Pode ser usada em outra tag HTML).
<!-- Indicamos a direção de leitura (rtl é sigla para right to left, isto é, da direita para a esquerda) -->
<html dir="rtl">
- đź“– dir - HTML - MDN
- Idioma alternativo:
<!-- Indicamos o idioma definido para a página atual -->
<link rel="alternate" href="https://es.example.com/" hreflang="es">- Comentários condicionais:
-
RSS feed:
-
CSS CrĂtico inline:
<style></style>numa linha Ăşnica (minificado).
- Ordem CSS:
<head>. (Exceto o caso onde, algumas vezes, arquivos JS sĂŁo carregados assĂncronamente no topo da página).
Facebook OG e Twitter Cards sĂŁo, para qualquer website, altamente recomendados. As outras tags de mĂdia social podem ser consideradas se seu pĂşblico-alvo tem uma presença em particular nelas, e vocĂŞ quer se assegurar de exibĂ-las.
- Facebook Open Graph:
<meta property="og:type" content="website">
<meta property="og:url" content="https://example.com/page.html">
<meta property="og:title" content="Content Title">
<meta property="og:image" content="https://example.com/image.jpg">
<meta property="og:description" content="Description Here">
<meta property="og:site_name" content="Site Name">
<meta property="og:locale" content="en_US">
- đź“– Um Guia de Compartilhamento para Webmasters
- 🛠Teste sua página com o 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="Content Title">
<meta name="twitter:description" content="Descrição de conteúdo com menos de caracteres">
<meta name="twitter:image" content="https://example.com/image.jpg">
- 📖 Iniciando com cards — Twitter Developers
- 🛠Teste sua página com o Twitter card validator
- HTML5 Semantic Elements:
- đź“– HTML Reference
-
Páginas de erro:
-
Noopener:
target="_blank", seu link deveria ter um atributorel="noopener"para prevenir tab nabbing. Se você precisa suportar versões mais antigas do Firefox, userel="noopener noreferrer".
- đź“– Sobre rel=noopener
- Retirando comentários:
- W3C compliant:
- đź› W3C validator
- HTML Lint:
- đź› Dirty markup
- Verificador de Link:
- đź› W3C Link Checker
- Teste Bloqueadores de Publicidade:
- Formato de webfont:
- Tamanho de webfont:
Notas: DĂŞ uma olhada em Guidelines CSS e Guidelines Sass seguidas pela maioria dos desenvolvedores Front-End. Se vocĂŞ tem alguma dĂşvida sobre propriedades CSS, vocĂŞ pode visitar a CSS Reference.
- Web Design Responsivo:
- CSS Print:
- Preprocessors:
- Unique ID:
- Reset CSS:
- đź“– Reset.css
- đź“– Normalize.css
- đź“– Reboot
- JS prefix:
<div id="js-slider" class="my-slider">
<!-- ou -->
<div id="id-used-by-cms" class="js-slider my-slider">- CSS embed ou line:
<style>ou inline: apenas utilizado por razões válidas (ex: background-image para slider, CSS critical). - Vendor prefixes:
- Concatenation:
- Minification:
- Non-blocking:
- Unused CSS:
- đź› UnCSS Online đź›
- đź› PurifyCSS
- đź› Chrome DevTools Coverage
- Stylelint:
- đź› stylelint, a CSS linter
- đź“– Sass guidelines
-
Responsive web design:
-
CSS Validator:
- đź› CSS Validator
- Navegadores Desktop:
- Navegadores Mobile:
- SO:
- Pixel perfect:
- Direção de leitura:
Notas: Para um entendimento completo de otimização de imagem, veja o ebook grátis Essential Image Optimization, do Addy Osmani.
- Optimization:
- đź› Imagemin
- đź› Use ImageOptim para otimizar suas imagens gratuitamente.
- Picture/Srcset:
- Retina:
- Sprite:
- Width e Height:
widtheheightem<img>se a imagem final renderizada Ă© conhecida (pode ser omitido para CSS sizing). - Texto alternativo:
<img>tĂŞm um texto alternativo que descreve a imagem visualmente.
Nota: Vários desenvolvedores assumem que altura e largura nĂŁo sĂŁo compatĂveis com design web responsivo. Absolutamente nĂŁo Ă© o caso.
- Texto alternativo:
<img>tĂŞm um texto alternativo que as descreve visualmente. - Lazy loading:
- JavaScript Inline:
- Concatenation:
- Minification:
.min).
- JavaScript security:
- Non-blocking:
asyncou deferidos usando atributodefer.
- Modernizr:
<html>.
- ESLint:
- HTTPS:
- HTTP Strict Transport Security (HSTS):
- Cross Site Request Forgery (CSRF):
- Cross Site Scripting (XSS):
- Content Type Options
- X-Frame-Options (XFO)
- Weight page:
- Minified:
- đź› W3C Validator
-
Lazy loading:
-
Cookie size: Se você está usando cookies, certifique-se de que cada não excede 4096 bytes e que seu domain name não tem mais de 20 cookies.
- đź“– Cookie specification: RFC 6265
- đź“– Cookies
- đź› Browser Cookie Limits
- Componentes de terceiros:
- DNS resolution:
dns-prefetch.
<link rel="dns-prefetch" href="https://example.com">- Preconnection:
preconnect.
<link rel="preconnect" href="https://example.com">- Prefetching:
prefetch.
<link rel="prefetch" href="image.png">- Preloading:
<body>) adiantadamente usandopreload.
<link rel="preload" href="app.js">- Google PageSpeed:
Notas: VocĂŞ pode assistir a playlist A11ycasts com Rob Dodson đź“ą
- Melhoramento progressivo:
- Contraste de cor:
- H1:
- Cabeçalhos:
- Role banner:
<header>temrole="banner". - Role navigation:
<nav>temrole="navigation". - Role main:
<main>temrole="main".
- Inputs HTML5 especĂficos sĂŁo utilizados:
- đź“– Mobile Input Types
- Label:
aria-label.
- Testando padrões de Acessibilidade:
- đź› Wave testing
- Navegação por Teclado:
- Screen-reader:
- Estilo de Foco:
- Google Analytics:
- Headings logic:
- sitemap.xml:
- robots.txt:
- đź› Test seu robots.txt com Google Robots Testing Tool
- Dados Estruturados:
- 📖 Introdução a Dados Estruturados - Search - Google Developers
- 🛠Teste sua página com o Ferramenta de Teste de Dados Estruturados
- 🛠Lista completa de vocabulários que podem ser usados como dados estruturados. Schema.org Hierarquia Completa
- Sitemap HTML:
O Front-End Checklist tambĂ©m está disponĂvel em outros idiomas. Obrigado a todos tradutores por seu incrĂvel trabalho!
- 🇯🇵 Japonês: miya0001/Front-End-Checklist
- 🇪🇸 Espanhol: eoasakura/Front-End-Checklist-ES
- 🇨🇳 Chinês: JohnsenZhou/Front-End-Checklist
- 🇰🇷 Coreano: kesuskim/Front-End-Checklist
- 🇻🇳 Vietnamita: euclid1990/Front-End-Checklist
Se você quer mostrar que está seguindo as regras do Front-End Checklist, ponha esta badge no seu arquivo README!
âž”
[](https://github.com/thedaviddias/Front-End-Checklist/)Abra uma issue ou uma pull request para sugerir mudanças ou adições.
O repositĂłrio original do Front-End Checklist consiste em duas branches:
Esta branch consiste no arquivo README.md que Ă© automaticamente refletido no website Front-End Checklist.
Esta branch será usada para fazer algumas mudanças significativas Ă estrutura, conteĂşdo se necessário. É preferĂvel usar a branch master para arrumar erros pequenos ou adicionar um novo item.
Veja todos os incrĂveis contribuidores.
Se vocĂŞ tem alguma pergunta ou sugestĂŁo, nĂŁo hesite em usar o Gitter ou Twitter:
