Por que eu devo ler este artigo:Neste artigo será realizado um embasamento teórico e prático sobre as tecnologias utilizadas no front-end, neste caso Bootstrap e jQuery, permitindo que o leitor se adapte a situações de âmbito real, através da construção de um PDV (portal) Web completo, em conjunto com as tecnologias PHP para o back-end da aplicação, e MySQL para lidar com o salvamento das informações no banco dados.

Exploraremos ao máximo os recursos de ambos os frameworks com exemplos os mais próximos da realidade possível, tratando de focar sempre na integração entre todas as referidas tecnologias.

Como criar um site com Bootstrap e jQuery

É sabido que o desenvolvimento web envolto pelas “n” tecnologias, frameworks e ferramentas acarreta uma necessidade de atualização deveras constante. Seja em projetos pequenos ou de grande porte, o desenvolvedor front-end na maioria dos casos deve ter um conhecimento bem aprofundado em tecnologias como HTML5, CSS3, JavaScript e Web Services, por exemplo, além de saber como utilizar frameworks como Bootstrap, jQuery, jQueryUI, dentre outros, levando em consideração que tais frameworks estão em constante atualização, desta forma o desenvolvedor tem que saber a diferença entre as versões já em uso e buscar se atualizar para as próximas, seja uma versão beta ou apenas notas sobre as novidades das que virão em um arquivo README qualquer.

Outro ponto importante é saber o que usar em um projeto e qual versão de determinado framework será inserido no mesmo, pois em se tratando de mobilidade existe a preocupação de tornar o website responsivo, ou seja, permitir que o layout de seu site se adeque ao tamanho da tela do dispositivo em que o usuário esteja usando, seja um smartphone, tablet ou mesmo um PC.

Logo, é importante saber, antes de adotar um framework para um projeto, se o mesmo trata os recursos da responsividade, o que pode ser observado juntamente à documentação do framework. Veja na Figura 1 o portal da DevMedia proporcionando a responsividade de layout para diferentes dispositivos de seus usuários e assinantes MVP.

Portal
DevMedia com layout responsivo
Figura 1. Portal DevMedia com layout responsivo.
,

Bootstrap

O Bootstrap, ou Twitter Bootstrap, é um dos frameworks open source para front-end mais conhecidos e usados em projetos web em todo o mundo, conquista essa devida principalmente à sua produtividade. Ele foi lançado em 2011 e ganhou popularidade pela facilidade de uso para criar interfaces robustas para a web e por ser de fácil manutenção.

O Bootstrap foi idealizado e criado por membros da equipe de desenvolvedores do Twitter, especificamente encabeçando o projeto Mark Otto e Jacob Thornton.

Cansados de utilizar várias bibliotecas em projetos internos que acarretaram em várias inconsistências e inúmeras horas de manutenção, eles resolveram então criar um framework que fornecesse um kit de ferramentas para projetos web de forma fácil e produtiva, garantindo assim um padrão nos projetos web de interface com elementos HTML bem estruturados e tipograficamente elegantes e agradáveis, ou seja, em conjunto com os elementos HTML e estrutura DOM são aplicados vários estilos CSS e até mesmo recursos em JavaScript.

Curso de Bootstrap

No Bootstrap temos uma série de classes CSS que podemos utilizar facilmente com elementos divs e outros elementos da HTML. Além disso, o Bootstrap também pode ser considerado uma coleção de ferramentas que integra componentes do jQuery, facilitando, desta forma, o uso das classes CSS do Bootstrap em tags HTML para melhor organizar a estrutura do site, melhorar visualmente os componentes da página, usar recursos de responsividade e JavaScript em conjunto com CSS para criar efeitos elegantes e antenados com a web 2.0.

Tudo isso é apenas parte do Bootstrap, mais adiante veremos sua estrutura e como utilizar seus componentes em um projeto web.

A equipe do Twitter abraçou o mundo mobile no Bootstrap, desta forma a partir da versão 2 já existiam várias funcionalidades do Bootstrap para o projeto de Web Design Responsivo. Veja na Figura 2 o website do Bootstrap onde é possível realizar o download do framework.

website oficial do Bootstrap
Figura 2. website oficial do Bootstrap.

O website do projeto contempla desde um tour pelos componentes e bibliotecas do framework, até templates prontos, tutoriais e o blog oficial. Um destaque especial vai para a opção “Customize” que apresenta vários componentes reutilizáveis ​​construídos para fornecer iconografia, menus suspensos com dropdowns, botões agrupados, navegação, mensagens de alertas, grupos de inputs, paginação, badges, barras de progresso, painéis dentre outros componentes prontos para aplicar em contextos diversos de um projeto web.

Caso você prefira ter o primeiro contato com o Bootstrap no idioma português, poderá visitar a página de tradução do Bootstrap feita pela Globo.com (seção Links). Só atenha-se ao fato da versão ser uma anterior à que usaremos neste artigo, mas será o suficiente para lidar com as implementações que faremos.

Criando um projeto com Bootstrap

Os templates do Bootstrap são uma mão na roda quando se trata de iniciar uma aplicação do zero e quando não temos nenhum modelo pronto de design em mente. Até mesmo os web designers que começam o desenvolvimento de um site usam o estilo padrão fornecido pelo Bootstrap para ter uma ideia mais rápida e prática de como o mesmo irá se comportar.

No menu Expo do site oficial do framework, o leitor poderá encontrar links para sites prontos que fizeram uso do Bootstrap em suas construções. Em alguns deles é possível inclusive o reuso do estilo e estrutura usados.

Um fator importante na construção de um projeto front-end é criar uma espécie de mapa com a quantidade de páginas do seu website juntamente com a estrutura de layouts e elementos que irão compor o mesmo, pois a partir deste ponto você saberá se pode aproveitar um template pronto do Bootstrap ou se vai precisar criar seu próprio modelo, definindo a quantidade de containers bem como o sistema de grids a utilizar. A seguir veja os passos para iniciar um novo projeto com o Bootstrap.

Bootstrap CDN

Conforme apresentado na Figura 2 você pode facilmente realizar o download da última versão do Bootstrap via site, porém existe outra forma de utilizar o mesmo em um projeto sem precisar ter os arquivos do framework fisicamente no servidor de hospedagem. Para isso, seria necessário fazer uso do Bootstrap CDN que é uma forma de referência aos arquivos do projeto através do MaxCDN (Max Content Delivery Network), um provedor de conteúdo via rede muito usado. Veja na Listagem 1 como realizar este procedimento em seu projeto.

Listagem 1. Referências CDN para o projeto com Bootstrap.

  01  <!DOCTYPE html>
  02  <html lang="pt-BR">
  03    <head>
  04      <meta charset="utf-8">   
  05      <meta name="viewport" content="width=device-width, initial-scale=1">
  06      <title>Bootstrap CDN</title>
  07  
  08      <!-- Bootstrap links CDN-->
  09      <link rel= "stylesheet" href= "https://maxcdn.Bootstrapcdn.com/Bootstrap/3.3.2/css/Bootstrap.min.css" > 
  10      <link rel= "stylesheet" href= "https://maxcdn.Bootstrapcdn.com/Bootstrap/3.3.2/css/Bootstrap-theme.min.css" > 
  11    </head>
  12    <body>
  13      <h1>Bootstrap CDN!</h1>
  14      
  15     <!-- Dependência jQuery-->
  16      <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  17     <script src= "https://maxcdn.Bootstrapcdn.com/Bootstrap/3.3.2/js/Bootstrap.min.js" ></script>
  18    </body>
  19  </html>

Vejamos alguns detalhes importantes presentes na listagem:

· Linha 1: Perceba a presença da tag DOCTYPE, que indica que esta página deve ser renderizada pelo browser seguindo os padrões da HTML5. Isso é importante pois o Bootstrap irá trabalhar com elementos dessa versão da HTML em específico.

· Linha 5: Aqui foi definido na tag meta o viewport, que, conforme documentação do Bootstrap, é necessário para tornar o layout do projeto responsivo.

· Linhas 9 e 10: Foi informado o CDN para a versão minificada dos arquivos CSS do Bootstrap através do MaxCDN.

· Linha 16: Nesta linha temos uma referência à versão minificada da biblioteca JS do jQuery que é uma dependência do Bootstrap.

· Linha 17: Referência CDN à biblioteca JS minificada do Bootstrap.

A utilização do CDN tem várias vantagens, como o download dos arquivos CSS e JS do Bootstrap que não serão realizados pelo seu servidor de hospedagem, auxiliando na diminuição do consumo de banda quando seu website for visualizado por uma quantidade relativamente alta de usuários.

Uma desvantagem seria o fato de que se em algum momento você ficar sem internet no ambiente de desenvolvimento, não seria possível fazer os testes com o Bootstrap.

Configurando o Bootstrap

O primeiro passo é realizar o download do Bootstrap conforme link de download presente na seção Links. A versão que usaremos é a v3.3.2, ou seja, a versão mais recente no momento da escrita deste artigo. Após clicado no link para download, você será redirecionado para outra página que possibilita a escolha das seguintes opções conforme Figura 3, a saber:

· Bootstrap: A primeira opção possibilita realizar o download dos arquivos CSS e JavaScript compilados e minificados, ou seja, uma forma enxuta de usar o Bootstrap, uma vez que isso também ajudaria muito a reduzir o tráfico de dados via browser cliente e a sua aplicação hospedada em produção.

Isso é possível graças à remoção dos espaços em branco e quebras de linha, o que torna o mesmo bem pequeno. É importante salientar que não serão incluídos quaisquer arquivos com documentação para consulta. Esta é a opção que usaremos no projeto deste artigo.

· Source code: Se o leitor preferir entender como foi estruturado e arquitetado o projeto a nível de código fonte, pode escolher esta opção para download, pois aqui você terá os arquivos de fontes e documentação do projeto juntos, porém é necessário um compilador para usar o projeto final.

Neste caso, a equipe do Twitter usa o Grunt.js, um executor de tarefas automatizadas que gera builds através do código de projetos prontos, e cujo link para download você pode encontrar na seção Links deste artigo ou no próprio site do Bootstrap.

· Sass: Aqui você pode baixar o Twitter Bootstrap convertido de Less para Sass e pronto, já pode usá-lo, inclusive com pré-compiladores em Rails, Compass e projetos Sass-only.

Opções
de download do Bootstrap
Figura 3. Opções de download do Bootstrap.

Sass x Less

Ambos os frameworks podem ser entendidos como uma nova forma de escrever código em CSS, ou seja, com o uso de pré-processadores e frameworks de folhas de estilo para dar mais produtividade no desenvolvimento do código CSS principalmente no que diz respeito a repetição de uma mesma ação diversas vezes. Também pode ser feito o uso de variáveis em valores, propriedades e seletores, uma vez que você irá escrever arquivos com a extensão .sass e o mesmo será compilado para .css, para que você possa subir para o servidor.

Depois de realizar o download do Bootstrap e descompactá-lo, você terá uma estrutura de diretórios conforme a apresentada na Figura 4.

Perceba que existe uma pasta chamada “css” para armazenar os arquivos de CSS com os nomes Bootstrap e Bootstrap-theme com estilo pré-definido para os componentes e temas, respectivamente, porém existem algumas diferenças entre eles: Bootstrap.css e Bootstrap-theme.css são arquivos css simples, Bootstrap.min.css e Bootstrap-theme.min.css são os arquivos CSS minificados, com tamanho reduzido, e os arquivos Bootstrap.css.map e Bootstrap-theme.css.map são usados em pré-processadores e editores Less; outra pasta chamada “js” para arquivos JavaScript e outra chamada “fonts” que armazena algumas fontes utilizadas pelo Bootstrap por padrão.

Estrutura
de arquivos do Bootstrap
Figura 4. Estrutura de arquivos do Bootstrap.

Bootstrap Containers

Para iniciar o uso do Bootstrap na prática você deverá criar um diretório para salvar as páginas HTML e os recursos necessários para o website. Chamaremos a pasta de “www_Bootstrap” e dentro da mesma devem ser extraídos os arquivos do Bootstrap contidos no zip baixado anteriormente.

Feito isso, deve ser criado um novo arquivo HTML na raiz do projeto conforme apresentado na Listagem 2 com o nome de Home.html. Veja na Figura 5 a hierarquia de diretórios que você obedecer, em detrimento da pasta www do WampServer.

Nós usaremos o aplicativo WampServer para hospedar o website em ambiente de desenvolvimento e também pelo fato de que iremos precisar do mesmo para interpretar os códigos PHP que serão usados na segunda parte deste artigo. O WampServer é um pacote tudo em um, ou seja, você instala e junto vem o PHP, o servidor Apache, o PHPAdmin, o banco de dados MySQL, dentre outros aplicativos.

Estrutura
de diretórios dentro do WampServer
Figura 5. Estrutura de diretórios dentro do WampServer.

Listagem 2. Código HTML referente à página Home com uso de containers.

  01  <!DOCTYPE html>
  02    <html lang="pt-BR">
  03      <head>
  04        <meta charset="utf-8">   
  05        <meta name="viewport" content="width=device-width, initial-scale=1">
  06        <title>Website com Bootstrap</title>      
  07        <link rel= "stylesheet" href= "Bootstrap-3.3.2-dist/css/Bootstrap.min.css" > 
  08        <link rel= "stylesheet" href= "Bootstrap-3.3.2-dist/css/Bootstrap-theme.min.css" > 
  09      </head>
  10      <body>
  11           <h3>h3 fora da class Container, somente dentro de body.</h3> 
  12                  <div class="container">
  13                  <h3>h3 dentro da class Container.</h3>
  14                  </div>       
  15           <div class="jumbotron">
  16                  <h3>h3 dentro class Jumbotron.</h3>            
  17                  </div>       
  18           <div class="container">    
  19                  <div class="jumbotron">
  20                         <h3>h3 dentro class Jumbotron, e Jumbotron dentro de Container.</h3>
  21                  </div>
  22                  </div>       
  23             <div class="container-fluid">   
  24                  <div class="jumbotron">
  25                         <h3>h3 dentro class Jumbotron, e Jumbotron dentro de Container-fluid.</h3>
  26                  </div>
  27                  </div>       
  28           <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
  29           <script src= "Bootstrap-3.3.2-dist/js/Bootstrap.min.js" ></script>
  30      </body>
  31  </html>

Já em relação ao conteúdo da listagem, temos algumas configurações novas a quem ainda não conhece o framework, a saber:

· Linhas 7 e 8: Referências aos arquivos CSS do Bootstrap.

· Linha 11: Foi inserido um elemento h3 para que se possa ter uma noção de como fica um elemento HTML solto dentro do body sem uso de um container.

· Linhas 12 à 14: É definida uma div onde é atribuída a propriedade class (a classe CSS container) e dentro da mesma é inserido outro h3 para realizar uma comparação no layout em relação à linha 11.

· Linhas 15 à 17: Aqui é definida uma div com o uso da classe jumbotron interna ao framework. Veja que ela diferente da classe container pois nela algumas propriedades do CSS como padding e background-color tem valores distintos, possibilitando a cor cinza no fundo e toda a largura da tela. Por fim, dentro desta mesma div foi colocado outro h3 para uso futuro.

· Linhas 18 à 22: Temos a presença de uma div de classe jumbotron dentro de outra div de classe container, e um h3 para mostrar o resultado e o efeito em relação às margens, então dessa forma você pode facilmente agrupar um container dentro de outro para obter o resultado esperado.

· Linhas 23 à 27: Nestas linhas foi utilizado outro container, neste caso o ...

Quer ler esse conteúdo completo? Seja um assinante e descubra as vantagens.
  • 473 Cursos
  • 10K Artigos
  • 100 DevCasts
  • 30 Projetos
  • 80 Guias
Tenha acesso completo