Aprimoramento progressivo

A ordem do aprimoramento progressivo: HTML , CSS e JavaScript .
Este artigo é acessível através de HTML puro (primeira camada). Sem estilo (segunda camada) e scripts (terceira camada), o conteúdo tem apenas 76 KB.

O aprimoramento progressivo é uma estratégia em web design que enfatiza primeiro o conteúdo da web , permitindo que todos acessem o conteúdo básico e a funcionalidade de uma página da web, enquanto os usuários com recursos adicionais de navegador ou acesso mais rápido à Internet recebem a versão aprimorada. Essa estratégia acelera o carregamento e facilita o rastreamento pelos mecanismos de pesquisa da web , pois o texto em uma página é carregado imediatamente por meio do código-fonte HTML , em vez de ter que esperar que o JavaScript inicie e carregue o conteúdo posteriormente, o que significa conteúdo pronto para consumo "fora do box" é servido imediatamente e não atrás de camadas adicionais. [1] [2] [3]

Esta estratégia envolve separar a semântica da apresentação do conteúdo, sendo a apresentação implementada em uma ou mais camadas opcionais, ativadas com base em aspectos do navegador ou da conexão à Internet do cliente . Na prática, isso significa servir conteúdo por meio de HTML , o "menor denominador comum" dos padrões da web, e aplicar estilo e animação por meio de CSS na medida tecnicamente possível e, em seguida, aplicar melhorias adicionais por meio de JavaScript . [4] O obsoleto Adobe Flash pode ser considerado como tendo compartilhado o lugar final com JavaScript enquanto era amplamente usado. [5] [6] Como os navegadores da web podem carregar recursos do site na medida do suporte, em vez de falhar ao carregar o site inteiro devido a um erro ou recurso ausente em JavaScript, um site aprimorado progressivamente é mais estável e compatível com versões anteriores . [4]

História

"Aprimoramento progressivo" foi cunhado por Steven Champeon e Nick Finck na conferência SXSW Interactive em 11 de março de 2003, em Austin, [7] e por meio de uma série de artigos para Webmonkey que foram publicados entre março e junho de 2003. [8]

Técnicas específicas de folhas de estilo em cascata (CSS) relativas à flexibilidade do layout da página, acomodando diferentes resoluções de tela, é o conceito associado à abordagem de web design responsivo . Em 2012, a net Magazine escolheu o Progressive Enhancement como o número 1 em sua lista das principais tendências de web design para 2012 ( o design responsivo ficou em segundo lugar). [9] O Google incentivou a adoção de melhorias progressivas para ajudar "nossos sistemas (e uma gama mais ampla de navegadores) a ver conteúdo utilizável e funcionalidades básicas quando certos recursos de design da web ainda não são suportados". [10]

Introdução

A estratégia é uma evolução de uma estratégia anterior de web design conhecida como degradação graciosa , em que as páginas da Web foram projetadas primeiro para os navegadores mais recentes, mas depois feitas para funcionar bem em versões mais antigas do software de navegador. [11] [3] A degradação graciosa visa permitir que uma página se "degrade" - para permanecer apresentável e acessível mesmo que certas tecnologias esperadas pelo design estejam ausentes. [12]

No aprimoramento progressivo, a estratégia é deliberadamente invertida: o conteúdo da web é criado com um documento de marcação , voltado para o menor denominador comum da funcionalidade do software do navegador. [13] [8] [12] Se o conteúdo fosse revelado interativamente por meio de JavaScript, como um menu de navegação recolhível, isso seria por padrão e apenas primeiro oculto pelo próprio JavaScript. [3] O desenvolvedor adiciona todas as funcionalidades desejadas à apresentação e comportamento da página, usando CSS moderno, Scalable Vector Graphics (SVG) ou JavaScript . [14]

Fundo

A abordagem de aprimoramento progressivo é derivada da experiência inicial de Champeon ( c.  1993–1994 ) com Standard Generalized Markup Language (SGML), anterior ao HTML e outras linguagens de apresentação da Web. [8]

Escrever conteúdo com marcação semântica e considerar a apresentação do conteúdo separadamente, ao invés de ser incorporado na marcação em si, é um conceito conhecido como regra de separação entre apresentação e conteúdo [15] [16] . Champeon expressou a esperança de que, uma vez que os navegadores da web fornecem um estilo de apresentação padrão para conteúdo HTML, isso resultaria em sites com seu conteúdo escrito como HTML semântico, deixando a escolha da apresentação para o navegador da web. [8] No entanto, as necessidades dos web designers fizeram com que o padrão HTML fosse estendido com recursos codificados que permitiam que o conteúdo HTML prescrevesse estilos específicos, tirando essa opção dos consumidores e de seus navegadores. [8] Esses recursos forçaram os editores a escolher entre adotar novas tecnologias disruptivas ou permitir que o conteúdo permanecesse acessível ao público que usava outros navegadores, um dilema entre design e compatibilidade. [8] [17] [12] Durante a década de 1990, um número crescente de sites não funcionava em nada além dos navegadores populares mais recentes. [12]

Essa tendência foi revertida após a década de 1990, quando o CSS foi amplamente apoiado, [8] [17] por meio de esforços educacionais de base (de Eric Costello, Owen Briggs, Dave Shea e outros) mostrando aos web designers como usar CSS para fins de layout. [ carece de fontes ]

Princípios fundamentais

A estratégia de melhoria progressiva consiste nos seguintes princípios básicos: [8]

  • O conteúdo básico deve estar acessível a todos os navegadores da web.
  • A funcionalidade básica deve estar acessível a todos os navegadores da web.
  • A marcação semântica esparsa contém todo o conteúdo.
  • O layout aprimorado é fornecido por CSS vinculado externamente. [17]
  • O comportamento aprimorado é fornecido por JavaScript vinculado externamente. [14]
  • As preferências do navegador do usuário final são respeitadas.

Apoio e adoção

  • Em agosto de 2003, Jim Wilkinson criou uma página wiki de aprimoramento progressivo para coletar alguns truques e dicas e explicar a estratégia geral. [18]
  • Designers como Jeremy Keith mostraram como a abordagem pode ser usada harmoniosamente com outras abordagens de web design moderno (como Ajax ) para fornecer experiências de usuário flexíveis, mas poderosas. [19] [20]
  • Aaron Gustafson escreveu uma série para A List Apart cobrindo os fundamentos do aprimoramento progressivo, desde a filosofia subjacente até abordagens CSS para como lidar com JavaScript. [21] [11] [22] [23]
  • CSS Zen Garden de Molly Holzschlag e Dave Shea , difundiu a adoção do termo para se referir a estratégias de design baseadas em CSS. [24]
  • Organizações como o Web Standards Project (WaSP), que esteve por trás da criação dos testes Acid2 e Acid3 , [25] adotaram o aprimoramento progressivo como base para seus esforços educacionais.
  • Em 2006, Nate Koechley no Yahoo! fez extensa referência ao aprimoramento progressivo em sua própria abordagem de design da Web e suporte a navegadores, Graded Browser Support (GBS). [12]
  • Steve Chipman, da AOL, referiu-se ao aprimoramento progressivo (por meio de scripts DOM) como base para sua estratégia de design da Web. [26]
  • David Artz, líder da equipe de Otimização da AOL, desenvolveu um conjunto de Tecnologias de Renderização Acessíveis e inventou uma técnica para desmontar o "aprimoramento" em tempo real, salvando a preferência do usuário.
  • O aprimoramento progressivo é usado nos front-ends de sites baseados no MediaWiki , como a Wikipedia , pois é legível, navegável e até mesmo editável usando a interface HTML básica sem estilo ou scripts, embora seja aprimorado por isso. Por exemplo, a barra de ferramentas do editor de wikitexto é carregada e opera através de JavaScript.
  • Chris Heilmann discutiu a importância da entrega direcionada de CSS para que cada navegador obtenha apenas o conteúdo (e melhorias) que pode suportar. [27] [28]
  • Scott Jehl do Filament Group propôs um "Aprimoramento Progressivo Orientado a Testes", [29] recomendando testar os recursos do dispositivo (em vez de inferi-los do agente do usuário detectado ) antes de fornecer melhorias.
  • Wt é uma estrutura de aplicativo da web de código aberto do lado do servidor que implementa de forma transparente melhorias progressivas durante sua inicialização, progredindo de HTML simples para Ajax completo.

Benefícios

Acessibilidade, compatibilidade e alcance

As páginas da Web criadas de acordo com os princípios do aprimoramento progressivo são, por natureza, mais acessíveis, [27] compatíveis com versões anteriores , [6] e abrangentes , porque a estratégia exige que o conteúdo básico esteja sempre disponível, não obstruído por scripts comumente não suportados ou que podem ser facilmente desativado, sem suporte (por exemplo, por navegadores da Web baseados em texto ) ou bloqueado em computadores em ambientes sensíveis. [14] Além disso, o princípio da marcação esparsa torna mais fácil para as ferramentas que leem o conteúdo em voz alta encontrá-lo. Não está claro até que ponto os sites de aprimoramento progressivo funcionam com ferramentas mais antigas projetadas para lidar com layouts de tabelas, " sopa de tags " e similares. [ carece de fontes ]

Velocidade, eficiência e controle do usuário

O cliente (computação) é capaz de selecionar quais partes de uma página baixar além do HTML básico (por exemplo, estilo, imagens, etc.) e pode optar por baixar apenas as partes necessárias para o uso desejado para acelerar o carregamento e reduzir a largura de banda e o consumo de energia. . Por exemplo, um cliente pode optar por baixar apenas HTML básico, sem carregar folhas de estilo, scripts e mídia (por exemplo, imagens), devido às baixas velocidades da Internet causadas pela localização geográfica, sinal de celular fraco ou velocidade limitada devido ao esgotamento da alta velocidade. plano de dados. Isso também reduz o consumo de largura de banda no lado do servidor.

Em comparação, as páginas cujo conteúdo inicial é carregado através de AJAX exigem que o cliente execute JavaScript de forma ineficiente para baixar e visualizar o conteúdo da página, em vez de baixar o conteúdo imediatamente.

Otimização de mecanismos de pesquisa (SEO)

Resultados aprimorados em relação à otimização de mecanismos de pesquisa (SEO) são outro efeito colateral de uma estratégia de design da Web baseada em aprimoramento progressivo. Como o conteúdo básico está sempre acessível aos spiders dos mecanismos de busca, as páginas construídas com métodos de aprimoramento progressivo evitam problemas que podem prejudicar a indexação do mecanismo de busca, ao passo que ter que renderizar o conteúdo básico da página por meio da execução de JavaScript tornaria o rastreamento lento e ineficiente. [27] [30]

Críticas e respostas

Alguns céticos, como Garret Dimon, expressaram sua preocupação de que o aprimoramento progressivo não seja viável em situações que dependem fortemente de JavaScript para obter determinadas apresentações ou comportamentos da interface do usuário. [31] Laurie Gray (arquiteta de informação da KnowledgeStorm [32] ) respondeu afirmando que as páginas informativas deveriam ser codificadas usando aprimoramento progressivo para serem indexadas pelos spiders dos mecanismos de pesquisa. [33] Geoff Stearns (autor de SWFObject , um aplicativo Flash popular) argumentou que páginas com muito Flash deveriam ser codificadas usando aprimoramento progressivo. [34]

Os designers Douglas Bowman e Bob Stein expressaram dúvidas relativamente ao princípio da separação entre conteúdo e apresentação em termos absolutos, defendendo, em vez disso, um reconhecimento realista de que os dois estão inextricavelmente ligados. [35] [15]

Veja também

Referências

  1. ^ “O aprimoramento progressivo é mais rápido” . jakearchibald. com . 03/09/2013 . Recuperado em 11/11/2021 .
  2. ^ Tse, Tiffany (15/02/2017). "O que é aprimoramento progressivo e por que você deveria se importar?" . Recuperado em 28/09/2023 .
  3. ^ abc Olsson, Tommy (06/02/2007). "Degradação graciosa e aprimoramento progressivo" . A Arte da Acessibilidade . Accessites.org. Arquivado do original em 04/03/2012 . Recuperado em 28/09/2023 .
  4. ^ ab van der Sluis, Bobby (19/04/2005). “Dez boas práticas para escrever JavaScript em 2005”. Arquivado do original em 04/07/2008 . Recuperado em 14 de abril de 2006 .
  5. ^ Mills, Chris (8 de julho de 2011). "Degradação graciosa versus aprimoramento progressivo". Consórcio World Wide Web . Recuperado em 13/08/2020 .
  6. ^ ab Nyman, Robert (01/03/2006). "O que é acessibilidade?" . Recuperado em 14 de abril de 2006 .
  7. ^ Steven Campeão; Nick Finck (11/03/2003). "Web Design Inclusivo para o Futuro (apresentação SxSWi)" . Arquivado do original em 08/11/2014 - via South by Southwest .
  8. ^ abcdefgh Champeon, Steve (21/03/2003). "Aprimoramento Progressivo e o Futuro do Web Design" . WebMonkey . Recuperado em 28/09/2023 .
  9. ^ "15 principais tendências de web design e desenvolvimento para 2012" . Bloq Criativo . líquido . 9 de janeiro de 2012. Arquivado do original em 23/08/2017.
  10. ^ Pierre Far (2014), Atualizando nossas diretrizes técnicas para webmasters, Blog da Central do webmaster
  11. ^ ab Gustafson, Aaron (07/10/2008). "Compreendendo o aprimoramento progressivo". Uma lista à parte . Recuperado em 28/09/2023 .
  12. ^ abcde Koechley, Nate (13/02/2006). "Suporte graduado ao navegador" . Yahoo! Rede de desenvolvedores . Arquivado do original em 14/04/2006.
  13. ^ "101 dicas de otimização de mecanismos de pesquisa" . www.meta4creations.com . Recuperado em 14/04/2016 . Aprimoramento Progressivo [...] significa construir seu site começando com os navegadores de menor denominador comum em mente.
  14. ^ abcJames Edwards; Cameron Adams (07/03/2006). "Script mais inteligente: JavaScript de qualidade do zero" . SitePoint . Recuperado em 14 de abril de 2006 .
  15. ^ Stein, Bob (17/11/2000). "Ansiedade de separação: o mito da separação entre estilo e conteúdo". Uma lista à parte . Recuperado em 28/09/2023 .
  16. ^ "Separação: o dilema do web designer" . Uma lista à parte . 14 de maio de 2004 . Recuperado em 24 de maio de 2017 .
  17. ^ abc Malicoat, Todd (23/08/2003). "Forma vs. Função no Design do Site". SEO hoje . Arquivado do original em 29/08/2003 . Recuperado em 14 de abril de 2006 .
  18. ^ Wilkinson, Jim (2003), Progressive Enhancement - CSS Discuss Arquivado em 09/03/2016 na Wayback Machine
  19. ^ Blog Adactio de Jeremy Keith (2005), Progressive Enhancement with Ajax
  20. ^ Keith, Jeremy (20/06/2006). “Separação Comportamental”. Uma lista à parte . Recuperado em 28/09/2023 .
  21. ^ Gustafson, Aaron (27/03/2007). "Arruinando a experiência do usuário". Uma lista à parte . Recuperado em 28/09/2023 .
  22. ^ Gustafson, Aaron (22/10/2008). "Aprimoramento Progressivo com CSS" . Uma lista à parte . Recuperado em 28/09/2023 .
  23. ^ Gustafson, Aaron (04/11/2008). "Aprimoramento Progressivo com JavaScript" . Uma lista à parte . Recuperado em 28/09/2023 .
  24. ^ Lawson, Bruce. “Uma entrevista com Dave Shea, o CSS Zen Gardener” . DMXzone. com . Arquivado do original em 08/06/2007 . Recuperado em 05/06/2007 .
  25. ^ "Resultados do teste ácido em navegador popular" . Científico . Arquivado do original em 05/05/2008 . Recuperado em 05/05/2008 . O teste Acid 3 é um trabalho em andamento e será atualizado quando o The Web Standards Project lançar a versão final do teste.
  26. ^ Steven G. Chipman (2005), Novos scripts Skool DOM
  27. ^ Heilmann, Chris (22/02/2005). "Visão dupla - forneça aos navegadores CSS que eles possam digerir" . Galpão do desenvolvedor. Arquivado do original em 20/07/2006 . Recuperado em 06/07/2017 .
  28. ^ "Sete erros de acessibilidade (parte 1)" . Revista Web Digital . 12/04/2006. Arquivado do original em 12/04/2006 . Recuperado em 14 de abril de 2006 .{{cite web}}: Manutenção CS1: URL impróprio ( link )
  29. ^ Jehl, Scott (23 de setembro de 2008). "Aprimoramento progressivo orientado a testes" . Uma lista à parte . Recuperado em 27 de outubro de 2009 .
  30. ^ Spencer, Stephan (25/09/2007). “PE é bom para SEO”. Holofote - Notícias CNET . Arquivado do original em 10/09/2011.
  31. ^ Dimon, sótão (29/08/2005). "A realidade do aprimoramento progressivo". Arquivado do original em 17/03/2007.
  32. ^ "IA Summit 2006: Biografias de palestrantes" . ASIS&T . Arquivado do original em 17/04/2006.
  33. ^ Cinza, Laurie (27/03/2006). "Web 2.0 e SEO?". Associação de Ciência e Tecnologia da Informação . Arquivado do original em 17/04/2006.
  34. ^ Stearns, Geoff (27/02/2006). “Usando conteúdo alternativo como conteúdo em Flash”. desconceito . Recuperado em 28/09/2023 .
  35. ^ Bowman, Douglas (14/10/2003). “Eles estão realmente separados?”. Stopdesign. com . Arquivado do original em 28/03/2006 . Recuperado em 14/04/2006 .

Leitura adicional

  • Briggs, Owen; Champeon, Steven; Costello, Eric; Patternson, Matthew (2004) Folhas de estilo em cascata: separando o conteúdo da apresentação (2ª ed.). São Francisco: Apress. ISBN 1-59059-231-X 
  • Gustafson, Aaron (2011) Web Design Adaptativo: Criando Experiências Ricas com Aprimoramento Progressivo . Chattanooga: leitores fáceis. ISBN 978-0-9835895-0-1 . 
  • Keith, Jeremy (2007) Ajax à prova de balas . Berkeley: Novos Cavaleiros. ISBN0-321-47266-7 _ 
  • Keith, Jeremy (2005) Scripting DOM: Web Design com JavaScript e o modelo de objeto de documento . Berkeley: amigos de ED. ISBN 1-59059-533-5 
  • Parker, Todd; Toland, Patty; Jehl, Scott; Costello Wachs, Maggie ( The Filament Group ) (2010) Projetando com aprimoramento progressivo Peachpit/New Riders. ISBN 978-0-321-65888-3 
Retrieved from "https://en.wikipedia.org/w/index.php?title=Progressive_enhancement&oldid=1210656230"