Os navegadores est\u00e3o cada vez mais poderosos, e cheios de recursos. Queremos usar os \u00faltimos avan\u00e7os e fornecer uma experi\u00eancia melhor para nossos usu\u00e1rios. Entretanto, n\u00e3o podemos esquecer que esses recursos n\u00e3o est\u00e3o dispon\u00edveis em todos os navegadores. Isso quer dizer que mesmo que voc\u00ea esteja usando a \u00faltima vers\u00e3o de um navegador, um poder\u00e1 ter suporte algum recurso e outro n\u00e3o. Isso \u00e9 muito comum de acontecer.<\/p>\n
A melhoria nos ajuda nas seguintes situa\u00e7\u00f5es: N\u00e3o podemos \u201cobrigar\u201d nossos usu\u00e1rios a baixarem o navegador com todos os recursos que gostar\u00edamos, usu\u00e1rios que desabilitam seu JavaScript, acessos a partir de dispositivos m\u00f3veis, pessoas com dificuldades visuais, motoras, etc.<\/p>\n
Melhoria progressiva<\/a> \u00e9 a estrat\u00e9gia de cria\u00e7\u00e3o de um site (aplicativo, sistema…) pensando primeiro em um n\u00edvel b\u00e1sico de experi\u00eancia, usu\u00e1rios com menos recursos por exemplo… E a adi\u00e7\u00e3o de melhorias funcionais<\/strong> quando o navegador suportar. Esses usu\u00e1rios t\u00eam que alcan\u00e7ar o mesmo objetivo (acesso a uma informa\u00e7\u00e3o, comprar algo…) do que aqueles usu\u00e1rios com suporte a recursos mais avan\u00e7ados em seus navegadores.<\/p>\n Melhora progressiva utiliza a antiga abordagem do desenvolvimento em camadas. Usar HTML para conte\u00fado, CSS para a apresenta\u00e7\u00e3o, e JavaScript para interatividade e comportamentos. Se por algum motivo JavaScript n\u00e3o funcionar, o site ainda deve manter uma boa apar\u00eancia.<\/p>\n Caso os estilos CSS n\u00e3o carregarem (veja o artigo Aplicando Progressive Enhancement no CSS<\/a>) corretamente, ou o navegador n\u00e3o entender determinada propriedade o conte\u00fado HTML ainda deve estar l\u00e1 acess\u00edvel ao usu\u00e1rio. Pense que seu site n\u00e3o precisa ter exatamente a mesma apar\u00eancia em todos navegadores, ele s\u00f3 precisa entregar corretamente o conte\u00fado e suas funcionalidade. Simples assim.<\/p>\n HTML \u00e9 a \u00fanica camada em que podemos confiar com toda a certeza. A maioria dos navegadores ir\u00e1 mostrar algo independente do suporte a um elemento HTML. Mesmo o cen\u00e1rio mais restrito<\/strong> ter\u00e1 suporte ao HTML. HTML \u00e9 a base de toda p\u00e1gina na Internet.<\/p>\n Como estamos falando de tecnologias \u00e9 claro que o HTML tamb\u00e9m evoluiu, e muito! Nos \u00faltimos anos a linguagem recebeu novos elementos sem\u00e2nticos<\/strong>, atributos, API\u2019s, elementos de formul\u00e1rios, etc. Infelizmente alguns navegadores, at\u00e9 mesmo em suas \u00faltimas vers\u00f5es, as vezes acabam demorando ou n\u00e3o implementando as recomenda\u00e7\u00f5es do W3C<\/a>.<\/p>\n Para a sorte de todos desenvolvedores as recomenda\u00e7\u00f5es do W3C s\u00e3o feitas pensando no Progressive Enhancement<\/strong>. Por exemplo: Se usarmos a marca\u00e7\u00e3o Um problema que temos em rela\u00e7\u00e3o a isso \u00e9 que nem todos navegadores seguem essas recomenda\u00e7\u00f5es acima. <\/p>\n Vers\u00f5es anteriores ao IE9 n\u00e3o reconhecem os novos elementos da HTML5. Por exemplo, Uma biblioteca JavaScript foi criada com o objetivo de resolver em partes<\/strong> essas dificuldade de vers\u00f5es mais antigas do IE darem suporte aos novos elementos do HTML. Podemos resolver problemas de estiliza\u00e7\u00e3o e interpreta\u00e7\u00e3o dos elementos HTML com uso da biblioteca https:\/\/code.google.com\/p\/html5shiv\/<\/a><\/p>\n Usei exemplos bem b\u00e1sicos apenas para ilustrar o poder de usar Progressive Enhancement<\/strong> j\u00e1 aplicando desde o HTML. Acredito que estabelecendo primeiro como seu site deve funcionar em um n\u00edvel mais b\u00e1sico , voc\u00ea consegue ter uma compreens\u00e3o mais clara dos requisitos do projeto.<\/p>\n Curta a p\u00e1gina do blog kadunew<\/a> no Facebook. Siga-me no Twitter: @kadunew<\/a> ou assine nosso Feed<\/a> e fique por dentro de todas atualiza\u00e7\u00f5es aqui do blog.<\/p>\n","protected":false},"excerpt":{"rendered":" Os navegadores est\u00e3o cada vez mais poderosos, e cheios de recursos. Queremos usar os \u00faltimos avan\u00e7os e fornecer uma experi\u00eancia melhor para nossos usu\u00e1rios. Entretanto, n\u00e3o podemos esquecer que esses recursos n\u00e3o est\u00e3o dispon\u00edveis em todos os navegadores. Isso quer dizer que mesmo que voc\u00ea esteja usando a \u00faltima vers\u00e3o de um navegador, um poder\u00e1 […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[59],"tags":[],"class_list":["post-3080","post","type-post","status-publish","format-standard","hentry","category-html"],"yoast_head":"\nAplicando Progressive Enhancement no HTML<\/h2>\n
<time>22:39<\/time><\/code> em um navegador sem suporte a esse elemento, o navegador simplesmente ir\u00e1 mostra-lo em um campo padr\u00e3o do tipo input text<\/code> (controle padr\u00e3o de formul\u00e1rio).<\/p>\n\n
<header> <\/header><\/code> \u00e9 um dos v\u00e1rios elementos que os IEs n\u00e3o d\u00e3o suporte (http:\/\/caniuse.com\/#search=header<\/a>). Os navegadores mostram o conte\u00fado dos elementos, mas n\u00e3o conseguimos estiliza-los. A boa not\u00edcia \u00e9 que temos algumas solu\u00e7\u00f5es.<\/p>\nSuporte para HTML5 em vers\u00e3o antigas do internet Explorer<\/h2>\n