Modernizr – Aula 4 de 5 | Detectando Recursos HTML 5 | Série HTML 5 | 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 quarta aula vou explicar como detectar se um determinado recurso HTML5 é ou não compatível com o navegador do usuário. Aplicaremos estes testes em nosso próprio projeto.
O que iremos testar?
Vamos aplicar o processo de detecção para dois recursos que surgiram com o HTML5, o primeiro deles será o Canvas e o segundo Geolocalização.
Bom, apesar de ainda não termos implementado nenhum destes recursos em nosso projeto (o que farei nos próximas aulas da Mega Série HTML5), esta aula servirá de base para entendermos o processo de detecção de recursos HTML5 e já deixaremos pronto para quando formos implementar um exemplo prático de Canvas e Geolocalização em nosso projeto.
Importante
Vale ressaltar que nesta aula não vamos implementar a solução de contorno, caso o recurso testado não seja compatível com o navegador. Mas não se preocupem, na faixa bonus que eu estou preparando, vamos implementar o processo de detecção em um de nossos campos do formulário, e aplicar uma solução alternativa (com polyfill) para manter o máximo de compatibilidade possível com a variedade de navegadores.
Recomendo também que assistam as aulas anteriores sobre Modernizr para que tenham uma boa base e consigam assimilar melhor esta quarta aula 
Testando Canvas e Geolocalização
Quando o usuário carrega um site que usa a biblioteca Modernizr, em tempo real, a biblioteca cria um objeto Javascript Global com todas as propriedades no formato booleano (Exemplo: Modernizr.feature).
Vamos então usar este objeto para testar se os recursos de Canvas e Geolocalização são ou não compatíveis com o navegador do usuário.
Dica: vocês só podem testar os recursos que foram selecionados durante a fase de build da biblioteca Modernizr, pois o objeto Javascript Global será gerado com base nos recursos disponíveis no arquivo customizado Modernizr.js.
Mas não se preocupem, pois na segunda aula geramos o build do Modernizr já incluindo estes dois recursos que iremos testar aqui (Canvas e Geolocalização).
Para testar os recursos é bem simples, basta você utilizar um IF-ELSE, testando se o Objeto Global + a propriedade é verdadeira ou falsa.
Portanto, para testar o recurso de Canvas o código será:
Canvas
E para testar o recurso de Geolocalização o código será:
Geolocation
Simples não? No vídeo, mostro em detalhes a implementação destes testes em nosso projeto.
[Conclusão]
Na aula de hoje [Modernizr – Aula 4 de 5 | Detectando Recursos HTML 5 | Série HTML 5], demos sequência na Mega série sobre HTML 5. Expliquei como detectar se recursos HTML 5 são compatíveis com o navegador do usuário e exibir alerta.
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/RN40liQmCXw
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.
Paulo Eduardo, bom dia e parabéns!
Estou há tempos procurando material para trabalhar com meus alunos e não havia encontrado nada parecido com o seu blog.
Uma coisa que tenho observado é que gasto muito tempo garimpando o material que preciso.
Existe um índice ou uma playlist para eu seguir?
Tenho tido dificuldade de localizar as aulas no blog.
Grato.
0
0
Olá Ricardo. Que legal.
Em primeiro lugar obrigado pelo feedback e saber que o conteúdo está ajudando.
Sobre a questão do blog, obrigado por me sinalizar a dificuldade em encontrar as aulas. Eu vou estudar um formato melhor de interligação.
Já no meu canal do youtube eu tenho as playlists e uma forma mais facilitada de encontrar as séries. O meu canal do youtube é https://www.youtube.com/+sw9brl.
0
0