Modernizr – Aula 3 de 5 | Detectar se Javascript Está Ativo | 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.
Serão ao todo 5 aulas sobre este tema (+ bonus), 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.
E o melhor de tudo, iremos implementar todo esse controle no projeto que estamos construindo, e que disponibilizo em minha área de downloads.
O que veremos nesta aula?
Nesta terceira aula, vou explicar como detectar se o Javascript do navegador está ativo ou não e exibir um alerta ao usuário.
Caso você ainda não tenha assistido as aulas anteriores, eu recomendo que o faça, pois servirão como base para as próximas aulas.
Requisitos necessários
Para criarmos o nosso código que vai exibir um alerta caso o Javascript do Navegador esteja ativo ou não, será necessário atender os requisitos abaixo:
- Nosso projeto esteja aberto, seja ele no cloud 9 ou em outra IDE de sua preferência;
- A biblioteca Modernizr esteja instalada e configurada (minha sugestão é você assistir a AULA, onde eu explico o processo de instalação e configuração da biblioteca);
Com os requisitos acima atendidos, é hora de explicar como vamos implementar.
Implementação Passo a Passo
Conforme havia explicado nas aulas anteriores, o Modernizr inclui uma série de classes na tag HTML toda vez que o usuário carrega a sua página.
Caso alguma característica não seja compatível, o Modernizr vai incluir o prefixo [no-] no nome da classe, caso contrário ele irá manter o nome nativo da classe.
Como nós queremos aqui detectar se o Javascript do Navegador está ativo ou não, iremos usar as classes (js e no-js).
Vamos então criar um estilo customizado para a classe js (Javascript ativado) e um estilo customizado para a classe no-js (Javascript desativado).
Em seguida, iremos usar uma tag DIV em nossa página e incluir o texto padrão [Notificação ::]. Será nesta DIV que iremos incluir o alerta.
O nosso objetivo é incluir um texto logo após o conteúdo [Notificação ::], ficando da seguinte forma:
1. Se Javascript desativado, o alerta será da cor vermelha e o texto [Notificação :: Favor ativar o Javascript do Navegador];
2. Se Javascript ativado, o alerta será da cor verde e o texto [Notificação :: Javascript Ativado].
Para conseguir adicionar o alerta logo após o conteúdo [Notificação ::], iremos usar um recurso do CSS chamado pseudo-elemento.
No nosso caso, o pseudo-elemento que vamos usar é o ::after. O que ele faz? Quando usamos o pseudo-elemento ::after, ele vai incluir conteúdo logo após o já existente.
Logo abaixo seguem duas imagens com o resultado final:
Javascript Ativado
Javascript Desativado
Mas não se preocupem, explicarei em detalhes todo este processo de detecção, criação dos estilos e uso do pseudo-elemento.
[Conclusão]
Na aula de hoje [Modernizr – Aula 3 de 5 | Detectar se Javascript Está Ativo | Série HTML 5], demos sequência na Mega série sobre HTML 5. Expliquei como detectar se o Javascript está ou não ativo no navegador, e na sequência exibir um alerta ao usuário.
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/rIy6onDAs9w
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