Modernizr – Bonus 2 de 2|Detectando e Aplicando Polyfill | Série HTML5 | SW9
Olá a todos. Sejam bem-vindos ao Canal e Blog SW9 (http://blog.sw9.com.br)
Dando continuidade a MEGA Série sobre HTML5. O Objetivo é apresentar os recursos e as possibilidades que surgiram com o advento do HTML5.
A bola da vez é a biblioteca Modernizr. São ao todo 5 aulas + bonus sobre este tema, onde explicarei passo a passo o uso desta biblioteca, passando pela introdução, instalação, configuração, detecção de recursos HTML5, detecção de recursos CSS3 e o uso conjunto com Polyfill para trazer uma solução para os navegadores não compatíveis.
O que veremos nesta aula?
Nesta segunda AULA BONUS, eu vou aplicar o processo de detecção de recurso em nosso formulário web e aplicar um Polyfill caso os novos campos HTML5 não sejam compatíveis com o navegador do usuário.
Logo abaixo eu apresento o nosso fluxo de trabalho até chegarmos ao resultado esperado:
1- Utilizar a biblioteca Modernizr para testar se os tipos de campos são compatíveis ou não com o navegador do usuário;
2- Se os recursos forem compatíveis, não faremos nenhum tratamento, pois o navegador terá condições de usar os novos campos de forma nativa;
3- Se pelo menos um dos recursos não for compatível, usaremos os métodos criados na Aula passada (os métodos de carregamento condicional) para carregar o nosso Polyfill;
4- Fazer os testes necessários utilizando dois navegadores diferentes. Nesta AULA usaremos o Google Chrome e o Internet Explorer.
Importante: No momento que formos tratar do item 3, vou mostrar como identificar as opções de Polyfill no próprio site da Biblioteca Modernizr.
Para este projeto usaremos o Polyfill chamado WebShim [http://afarkas.github.io/webshim]
Então preparem-se, agora chegou a hora de colocarmos a ‘mão na massa’ assitindo ao vídeo.
[Conclusão]
Na aula de hoje [Modernizr – Bonus 2 de 2|Detectando e Aplicando Polyfill | Série HTML5 | SW9], demos sequência na Mega série sobre HTML 5.
Implementamos passo a passo o processo de detecção de recursos de formulários HTML5 e aplicamos um Polyfill para os navegadores não compatíveis.
Vou disponibilizar este projeto na minha área de downloads, para acessá-lo basta clicar no link a seguir http://blog.sw9.com.br/acesso-area-de-downloads/, informar um e-mail válido e automaticamente receberá as instruções para acesso. Dentro da minha área de Downloads, procure pela pasta HTML5. O resto é com vocês
Bom, por hoje é só. Aproveitem o vídeo e bons estudos. Fiquem antenados, que em breve teremos mais novidades.
Espero que gostem deste vídeo. Aproveito para pedir a participação de vocês no canal e blog, curtindo, compartilhando, dando sua opinião e se inscrevendo no canal e blog para receber as novidades em primeira mão.
Fiquem com Deus e até o próximo vídeo.
[Links úteis]
Curso Relacionado: [Aprenda HTML 5 e CSS 3 e Comece a Criar Seus Próprios Sites] – https://goo.gl/QsLPph
Modernizr: https://modernizr.com/
Cloud 9: https://c9.io/login
PlayList Cloud 9: https://goo.gl/7aQbD6
PlayList Mega Série HTML5: https://www.youtube.com/watch?v=D-XN-miEwP0&list=PLtluGZbI5ESj8XWTJcJmrVW6Q_tCi7uR8
Área de Downloads: http://blog.sw9.com.br/acesso-area-de-downloads/
Meu Blog: http://blog.sw9.com.br
Meu GitHub: https://sw9brl.github.io/MyGitHubPage
Canal youtube: https://youtube.com/+sw9brl
Link do vídeo: https://youtu.be/E8NaazqY0O8
Parceria: https://www.tubebuddy.com/pricing?a=sw9brl
✔ Clique em gostei ✔ Compartilhe ✔ Inscreva-se
Que tal me pagar um café :-)
Uma pequena quantidade de café foi consumida durante a produção de um post + vídeo. Se puder, contribua adicionando mais combustível para que eu tenha condições de seguir em frente.
Brincadeiras à parte, o valor selecionado é multiplicado por 2 (x2) que representa a multiplicação de minha dedicação a cada contribuição que recebo.
Deixe um comentário