Modernizr – Aula 2 de 5 | Instalação e Configuração | 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.

Nesta aula vamos continuar a explicar o funcionamento da biblioteca Modernizr.  Serão ao todo 5 aulas 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.

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 segunda aula, vou explicar passo a passo o processo de download/instalação e configuração da biblioteca Modernizr. Vamos aplicar este procedimento no projeto que estamos construindo ao longo da série.

Build/Download

No momento que gravei esta aula, haviam 3 métodos para build/download da biblioteca. Cobriremos nesta aula apenas dois deles.

Existem duas possibilidade de download no próprio site Modernizr. A primeira opção é fazer o download da versão de desenvolvimento, que contém todos os recursos e opções ativadas.

Existe também a opção de gerar um pacote customizado (Build Customizado) onde existe a possibilidade de escolher quais recursos e opções farão parte do nosso pacote. Neste formato, o pacote torna-se menor e vai conter apenas o que realmente interessa ao nosso projeto.

Aproveitando o embalo, falaremos da primeira forma de build/download.

Método 1 – Build/Download Customizado a partir do Site Modernizr

Neste modo, precisamos acessar diretamente a url https://modernizr.com/download. Ao carregar a página, serão exibidas várias opções para gerar o seu Build Customizado. Do lado esquerdo da página, podemos selecionar quais as opções que queremos ativar, escolher se o pacote será gerado de forma minificada (próprio para ambiente de produção) ou não minificado, e se queremos incluir as classes CSS. Do lado direito da página, será possível escolher quais recursos queremos incluir em nosso pacote. Existe a possibilidade de pesquisar por um recurso específico ou navegar entre os recursos e escolher aqueles que serão necessário ao nosso projeto.

Para selecionar cada recurso você precisar clicar duas vezes no sinal de (+). Aqui vai um ponto interessante: se você clicar apenas uma vez em um determinado recurso, vai aparecer do lado direito várias informações a respeito do recurso selecionado (nome do recurso, descrição, exemplo de utilização e informações adicionais). Bem legal né?

Bom, agora o trabalho que temos é selecionar os recursos e opções que queremos, e na sequência clicar no botão [Build]. Na tela seguinte, você deve verificar a primeira linha (chamada Build) e clicar no link [Download]. Finalmente, o pacote será gerado e o download iniciado.

Ao término do download, devemos descompatar o pacote e fazer o upload dos arquivos para o nosso projeto que está publicado na plataforma Cloud 9.

Método 2 – Build/Download do Modernizr via linha de comando

Neste método, precisamos garantir que o Node (https://nodejs.org/) e o Npm (https://npmjs.org/) estejam instalados. Como estou usando a plataforma Cloud 9, estes pré-requisitos já foram atendidos.

O próximo passo é abrir o prompt de comando e executar o comando a seguir:

npm install -g modernizr

Este comando vai simplesmente instalar a ferramenta de linha de comando do Modernizr.

Ao término da instalação, o próximo passo é criamos um diretório chamado [modernizr] dentro da pasta /js/vendor. Portanto, a estrutura ficará assim: /js/vendor/modernizr.

Devemos agora, acessar este diretório via prompt de comando e subir (fazer upload) do arquivo modernizr-config.json

Eu sei que você vai me perguntar: Mas onde posso encontrar este arquivo? Em primeiro lugar, você precisa acessar a url https://modernizr.com/download, e a partir dela, escolher quais os recursos você quer incluir no build (mesmo procedimento que fizemos no Metódo 1). Logo em seguida, devemos clicar no botão [Build] e na sequência escolher a opção [Command Line Config] -> [Download]. Fazendo isso, será iniciado o download do arquivo de configuração. Ao término do download, você deve fazer upload deste arquivo para o diretório de nosso projeto /js/vendor/modernizr.

Pronto, agora o nosso último passo é acessar o prompt de comando, entrar no diretório /js/vendor/modernizr, e por último executar o comando abaixo:

modernizr -c modernizr-config.json

Ao término da execução, a biblioteca modernizr estará disponível no diretório /js/vendor/modernizr e pronta para ser utilizada.

Método 3

Como havia comentado, não entrarei em detalhes sobre este método. Vou apenas comentar que podemos usar o Grunt ou Gulp para automatizar o processo de Build do Modernizr. Isso é útil, se por exemplo, você quiser gerar um Build para Desenvolvimento (no nosso caso sem minificar a biblioteca) ou gerar um Build para produção (neste caso minificando a biblioteca). Deixo aqui dois links para referência: https://www.npmjs.com/package/grunt-modernizr e https://www.npmjs.com/package/gulp-modernizr

Agora chegou a hora de configurar a biblioteca em nosso projeto.

Configuração

Neste ponto, a nossa biblioteca Modernizr já deve estar disponível no diretório /js/vendor/modernizr.

O próximo passo é abrir as nossas páginas Web (index.html e formularios.html), e incluir no cabeçalho das páginas (entre as tags head) uma referência ao arquivo modenizr.js.

Vai ficar da seguinte forma:

<script src="js/vendor/modernizr/modernizr.js"></script>

Em seguida, devemos inserir uma classe no-js no elemento HTML. Vai ficar assim:

<html class="no-js" lang="pt-br"></html>

Mas porque precisamos fazer isso? O Modernizr funciona substituindo essa classe pela classe “js”. Então, ele adiciona classes para todas as features que o navegador suporta e, também, para os recursos que ele não suporta, pré-fixando estas com “no-”

Pronto, a configuração da biblioteca Modernizr foi concluída

[Conclusão]

Na aula de hoje [Modernizr – Aula 2 de 5 | Instalação e Configuração | Série HTML 5], demos sequência ao tema Modernizr.

Nesta segunda aula, começamos a colocar a mão na massa e explicar passo a passo todo o processo de download, instalação e configuração da biblioteca.  E o melhor de tudo: já trabalhando diretamente em nosso projeto, que começamos a construir lá na primeira aula da Mega Série HTML5.

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/apft1GBhbkQ

Parceria: https://www.tubebuddy.com/pricing?a=sw9brl

✔ Clique em gostei ✔ Compartilhe ✔ Inscreva-se