Pesquisa de site

Como escrever um aplicativo compatível com dispositivos móveis usando JQuery e Bootstrap


Na Parte 1 desta série, montamos um projeto HTML 5 básico usando o Netbeans como nosso IDE, e também apresentamos alguns elementos que foram adicionados nesta nova especificação da linguagem.

Em poucas palavras, você pode pensar em jQuery como uma biblioteca Javascript para vários navegadores e plataformas que pode simplificar bastante a criação de scripts do lado do cliente em páginas HTML. Por outro lado, Bootstrap pode ser descrito como uma estrutura completa que integra ferramentas HTML, CSS e Javascript para criar páginas da web responsivas e compatíveis com dispositivos móveis.

Neste artigo, apresentaremos jQuery e Bootstrap, dois utilitários inestimáveis para escrever código HTML 5 com mais facilidade. Tanto o jQuery quanto o Bootstrap são licenciados sob as licenças MIT e Apache 2.0, que são compatíveis com a GPL e, portanto, são softwares livres.

Observe que os conceitos básicos de HTML, CSS e Javascript não são abordados em nenhum artigo desta série. Se você acha que precisa se familiarizar com esses tópicos antes de prosseguir, recomendo fortemente o tutorial HTML 5 no W3Schools.

Incorporando jQuery e Bootstrap em nosso projeto

Para baixar o jQuery, acesse o site do projeto em http://jquery.com e clique no botão que exibe o aviso da última versão estável.

Iremos com esta segunda opção neste guia. NÃO clique no link de download ainda. Você notará que pode baixar uma versão .min.js compactada ou uma versão .js descompactada do jQuery.

O primeiro é voltado especialmente para sites e ajuda a reduzir o tempo de carregamento das páginas (e assim o Google classificará melhor o seu site), enquanto o segundo é direcionado principalmente a codificadores para fins de desenvolvimento.

Por uma questão de brevidade e facilidade de uso, faremos o download da versão compactada (também conhecida como minificada) para a pasta scripts dentro da estrutura do nosso site.

cd /home/ubuntu/NetBeansProjects/TecmintTest/public_html/scripts/
wget https://code.jquery.com/jquery-3.6.0.min.js

Agora é hora de adicionar o Bootstrap ao nosso projeto. Vá para http://getbootstrap.com e clique em Baixar Bootstrap. Na próxima página, clique na opção destacada conforme indicado abaixo para baixar os componentes minificados, prontos para uso, em um arquivo zip:

Quando o download for concluído, vá até a pasta Downloads, descompacte o arquivo e copie os arquivos destacados para os diretórios indicados dentro do seu projeto:

cd ~/Downloads
unzip -a bootstrap-5.1.3-dist.zip
cd bootstrap-5.1.3-dist/

Agora copie os arquivos CSS e JS para as respectivas pastas na estrutura do projeto.

cp css/bootstrap.min.css /home/ubuntu/NetBeansProjects/TecmintTest/public_html/styles
cp js/bootstrap.min.js /home/ubuntu/NetBeansProjects/TecmintTest/public_html/scripts

Se você agora expandir a estrutura do seu site no Netbeans, ele deverá ficar assim:

Adicionando referências

Isso certamente parece bom, mas ainda não informamos ao nosso arquivo index.html para usar qualquer um desses arquivos. Para simplificar, substituiremos primeiro o conteúdo desse arquivo por um arquivo html básico:

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>jQuery and Bootstrap</title>
</head>
<body>
 
   <!-- // Your code will appear here. -->

</body>
</html>

Depois, basta arrastar e soltar cada arquivo da seção do navegador do projeto para o código, dentro das tags , como você pode ver no screencast a seguir. Certifique-se de que a referência ao jQuery apareça antes da referência ao Bootstrap porque esta última depende da primeira:

É isso aí – você adicionou as referências ao jQuery e ao Bootstrap e agora pode começar a escrever código.

Escrevendo seu primeiro código responsivo

Vamos agora adicionar uma barra de navegação e colocá-la no topo da nossa página. Sinta-se à vontade para incluir links 4-5 com texto fictício e não vincule-os a nenhum documento por enquanto – basta inserir o seguinte trecho de código dentro do corpo do documento.

Não se esqueça de passar algum tempo se familiarizando com o recurso de preenchimento automático do Netbeans, que mostrará as classes disponibilizadas pelo Bootstrap conforme você começa a digitar.

No centro do trecho de código abaixo está a classe Bootstrap container, que é usada para colocar o conteúdo dentro de um contêiner horizontal que será redimensionado automaticamente dependendo do tamanho da tela onde está sendo visualizado. Não menos importante é a classe container-fluid, que garantirá que o conteúdo interno ocupe toda a largura da tela.

<div class="container">
  	<nav class="navbar navbar-default">
    	<div class="container-fluid">
      	<div class="navbar-header">
        	<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
          	<span class="sr-only">Toggle navigation</span>
          	<span class="icon-bar"></span>
          	<span class="icon-bar"></span>
          	<span class="icon-bar"></span>
        	</button>
        	<a class="navbar-brand" href="#">Project name</a>
      	</div>
      	<div id="navbar" class="navbar-collapse collapse">
        	<ul class="nav navbar-nav">
          	<li class="active"><a href="#">Home</a></li>
          	<li><a href="#">About</a></li>
          	<li><a href="#">Contact</a></li>
          	<li class="dropdown">
            	<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Dropdown <span class="caret"></span></a>
            	<ul class="dropdown-menu">
              	<li><a href="#">Action</a></li>
              	<li><a href="#">Another action</a></li>
              	<li><a href="#">Something else here</a></li>
              	<li role="separator" class="divider"></li>
              	<li class="dropdown-header">Nav header</li>
              	<li><a href="#">Separated link</a></li>
              	<li><a href="#">One more separated link</a></li>
            	</ul>
          	</li>
        	</ul>
      	</div><!--/.nav-collapse -->
    	</div><!--/.container-fluid -->
  	</nav>
</div>

Outro diferencial do Bootstrap é que ele elimina a necessidade de tabelas no código HTML. Em vez disso, ele usa um sistema de grade para organizar o conteúdo e faz com que ele tenha uma aparência adequada em dispositivos grandes e pequenos (desde telefones até telas grandes de desktops ou laptops).

No sistema de grade do Bootstrap, o layout da tela é dividido em 12 colunas:

Uma configuração típica consiste em usar o layout de 12 colunas dividido em 3 grupos de 4 colunas cada, como segue:

Para indicar esse fato no código, e para que seja exibido dessa forma a partir de dispositivos de tamanho médio (como laptops) e superiores, adicione o seguinte código abaixo da tag de fechamento :

...
    </nav>
   	 <div class="row">
   	 	<div class="col-md-4">This is the text in GROUP 1</div>
   	 	<div class="col-md-4">This is the text in GROUP 2</div>
   	 	<div class="col-md-4">This is the text in GROUP 3</div>
   	 </div>
</div> <!--Closing tag of the container class -->

Você provavelmente deve ter notado que as classes de coluna na grade do Bootstrap indicam o layout inicial para um tamanho de dispositivo específico e superior, já que md neste exemplo significa médio (que também abrange lg >, ou dispositivos grandes).

Para dispositivos menores (sm e xs), os divs de conteúdo são empilhados e aparecem um acima do outro.

No screencast a seguir, você pode ver como sua página deve estar agora. Observe que você pode redimensionar a janela do seu navegador para simular diferentes tamanhos de tela após iniciar o projeto usando o botão Executar projeto como aprendemos na Parte 1.

Resumo

Parabéns! Você já deve ter escrito uma página simples, mas funcional e responsiva. Não se esqueça de conferir o site Bootstrap para se familiarizar com as funcionalidades quase ilimitadas deste framework.

Como sempre, caso você tenha alguma dúvida ou comentário, não hesite em nos contatar através do formulário abaixo.