O que é aprimoramento progressivo?

O aprimoramento progressivo é uma técnica que ajuda a garantir que seu software seja robusto e acessível. Ao segui-lo, você pode garantir que o maior número possível de pessoas poderá usar seu site ou aplicativo.

Comece com uma versão minimamente viável do seu web design e certifique-se de que funcione conforme necessário. Em seguida, adicione funcionalidade e estilo extras para que navegadores mais capazes possam se beneficiar.

Como funciona o aprimoramento progressivo?

Devido à sua natureza extremamente distribuída, a web sempre precisou suportar uma grande variedade de dispositivos. De computadores básicos da década de 1970 a desktops, tablets e televisões modernos e capazes, os sites percorreram um longo caminho.

No coração de tudo está o HTML. Como é uma linguagem “complacente”, os navegadores exibirão o HTML tão bem quanto o entendam. Normalmente, eles ignoram qualquer coisa que não apoiem.

Isso pode ser útil do ponto de vista do desenvolvedor, mas pode causar problemas para os leitores. Se o seu site exibir uma página em branco quando o JavaScript não puder ser executado, os usuários terão pouca escolha a não ser abandoná-la. O aprimoramento progressivo incentiva você a fornecer conteúdo principal a todos que possam acessá-lo e, em seguida, aprimorar esse conteúdo usando tecnologias apropriadas, como CSS e JavaScript.

Uma abordagem progressiva para o estilo

CSS é a linguagem de folha de estilo da web que você pode usar para personalizar cores, fontes, layouts, e muitos outros aspectos visuais de suas páginas. Você pode usá-lo para aprimorar a aparência padrão do seu conteúdo, mas isso não significa que você não deva estruturar seu conteúdo adequadamente em primeiro lugar.

Pegue uma barra de menu, por exemplo; você pode estruturá-lo assim:

<navegação>
<a href ="/register">registro</a>
<a href ="/login">Conecte-se</a>
<a href ="/about">sobre nós</a>
<a href ="/contact">contato</a>
</nav>

Para exibir um menu horizontal, com cada link parecendo um botão, você pode estilizá-lo usando este CSS:

navegar em {
decoração de texto: nenhum;
exibição: bloco em linha;
preenchimento: 00,5em 1em;
borda: 1px sólido;
raio da borda: 8px;
margem direita: 1em;
}

Quando o navegador renderizar totalmente isso, ele deve se parecer com o seguinte:

No entanto, se o CSS não estiver disponível, o menu será exibido assim:

Observe como isso não se parece em nada com um menu e não é muito fácil de usar, pois os links se fundem em um só.

Você pode usar uma estrutura alternativa para tornar o design mais robusto:

<navegação>
<ul>
<li><a href ="/register">registro</a></li>
<li><a href ="/login">Conecte-se</a></li>
<li><a href ="/about">sobre nós</a></li>
<li><a href ="/contact">contato</a></li>
</ul>
</nav>

Como essa marcação usa um elemento de lista não ordenado, é muito mais utilizável na ausência de CSS:

Observe como é mais fácil digitalizar e entender rapidamente esses links, mesmo com o estilo padrão do navegador. Essa abordagem exigirá que você adicione um pouco mais de CSS para substituir os estilos de lista padrão:

navegaçãoli { mostrar: em linha; }

Embora a estrutura e o estilo finais sejam mais complicados e a maioria dos usuários tenha o CSS habilitado, essa abordagem é mais robusta. Será mais amigável para usuários de leitores de tela e navegadores baseados em terminal.

Apresentando Funcionalidades Progressivamente

O aprimoramento progressivo é mais importante quando se trata do funcionamento de um site ou aplicativo. O princípio afirma que, não importa o que aconteça, seu site deve funcionar da melhor maneira possível.

Na prática, isso normalmente se aplica ao JavaScript. Se você introduzir o comportamento do lado do cliente, ele deve colocar a funcionalidade em cima de um site ou aplicativo que já funciona sem ele.

Um caso muito comum é a manipulação de eventos. Imagine uma página que carrega conteúdo adicional sob demanda. Pode ser uma rolagem infinita manual, uma incorporação de comentário ou algo semelhante.

<corpo>
<!--... -->
<botão ao clicar ="Carregue mais();">
Carregar Mais
</button>
<!--... -->
</body>

Os botões ao clicar O atributo contém código JavaScript que será executado quando alguém clicar no botão. No entanto, se o JavaScript não estiver disponível, esse botão não fará nada. Um usuário ficará clicando neste botão sem nenhum feedback e nenhuma ideia do que está acontecendo de errado. Uma abordagem muito melhor usa aprimoramento progressivo:

<corpo>
<!--... -->
<um id ="p2" href="/page/2">Página 2</a>

<roteiro>
funçãoCarregue mais() { console.registro("!"); }

/* Substituir link por botão */
var ligação = documento.getElementById("p2");
var botão = documento.createElement("botão");
button.innerText = "Carregue mais";
botão.addEventListener("clique", Carregue mais);
documento.corpo.inserirAntes(botão, link);
link.parentNode.removeCriança(link);
</script>
</body>

Esse código transforma o link básico em um botão com um manipulador de eventos. Ao introduzir a dependência do JavaScript usando o próprio JavaScript, você pode ter certeza de que funcionará. E há um comportamento padrão funcional que funciona, na forma do link padrão para /page/2.

O aprimoramento progressivo é realmente necessário?

Todo mundo usa navegadores com CSS e JavaScript, então por que se preocupar em atender a uma situação que não surge? Bem, existem vários motivos para você adotar a boa prática do realce progressivo.

1. Primeiro, nem todo mundo que visita seu site está usando um navegador. Alguns visitantes serão bots, como um indexador de mecanismo de pesquisa, e podem não entender CSS ou JavaScript.
2. Em segundo lugar, nem todas as pessoas que visitam seu site usarão um navegador com CSS e JavaScript. Alguns visitantes podem usar um navegador baseado em terminal, que exibe texto simples com formatação mínima. Outros podem usar um leitor de tela.
3. Em terceiro lugar, mesmo que um navegador suporte CSS e JavaScript, as coisas dão errado. Um link quebrado ou uma conexão de rede ruim pode resultar na falta de um arquivo .css ou .js. Um bug no JavaScript pode fazer com que outro código não seja executado.
4. Finalmente, alguns visitantes podem decidir ativamente desabilitar CSS ou JavaScript. Eles podem fazer isso por questões de privacidade ou porque estão em uma conexão lenta ou paga por uso.

Uma mentalidade progressiva faz maravilhas

Acima de tudo, o aprimoramento progressivo incentiva você a adotar uma abordagem de conteúdo em primeiro lugar. O conteúdo é rei, então seu texto e imagens devem estar sempre disponíveis, para todos, independentemente de como eles acessam seu site.

Ao oferecer a todos os leitores a melhor experiência possível e, em seguida, torná-la ainda melhor para aqueles que podem se beneficiar, você pode ter o melhor dos mundos. O aprimoramento progressivo é apenas um componente-chave da boa prática de acessibilidade e usabilidade.