Centro Federal de Educação Tecnológica de Minas Gerais Técnico em Informática Aplicações para WEB. Aplicações para WEB

Transcrição

1 Centro Federal de Educação Tecnológica de Minas Gerais Técnico em Informática Aplicações para WEB Aplicações para WEB Professor: Marcelo Corrêa Mussel Varginha 2017

2 .

3 Sumário Apostila de Desenvolvimento de Aplicações Web 1 Introdução Referências O que é Bootstrap Características Testando Bootstrap Grid System Entendo o Grid System Criando layout com Bootstrap Estrutura de Pastas Logo, navbar e formulário de busca Código default navbar do bootstrap Entendendo o navbar Dividindo o conteúdo Analisando o código

4 .

5 1 Introdução 1.1 Referências Apostila de Desenvolvimento de Aplicações Web Este exemplo foi adaptado de: O que é Bootstrap Bootstrap é um framework front-end que facilita a vida dos desenvolvedores web para criar sites com tecnologia mobile (responsivo) sem ter que digitar uma linha de CSS. O termo Bootstrap em inglês significa inicialização, algo que possui um ponto de partida.. Além disso, o Bootstrap possui uma diversidade de componentes (plugins) em JavaScript (jquery) que auxiliam o designer a implementar: tootlip, menu-dropdown, modal, carousel, slideshow, entre outros sem a menor dificuldade, apenas acrescentando algumas configurações no código, sem a necessidade de criar scripts e mais scripts. O objetivo principal e lógico do Bootstrap é consumir o menor tempo possível no desenvolvimento de um website, seja ele uma página simples estática ou um grande portal dinâmico. 1.3 Características Possui uma interface super amigável e moderna; Atualmente possui uma grande diversidade de temas; Grande quantidade de plugins adaptados ou desenvolvidos para o framework; Sistema responsivo; Integração com qualquer linguagem de programação; Um dos frameworks mais utilizados no desenvolvimento de portais e sistemas do mundo; Totalmente FREE! Para inicializar o uso do Bootstrap é muito simples, basta que você: Faça o download do framework no site do desenvolvedor Após realizar o download, adicione os arquivos bootstrap.min.css e bootstrap.min.js nas respectivas pastas do seu projeto. Link o CSS e o JS dentro da tag <head> do seu HTML E pronto! Observação: Não se esqueça do jquery. O bootstrap faz uso da biblioteca jquery para ativar o comportamento dos seus plugins. 1.4 Testando Para verificar se o framework está funcionando, crie um arquivo index.html, conforme abaixo, e abra em algum navegador. 1 <!DOCTYPE html> 2 <html lang="pt-br"> 3 <head> 4 <meta charset="utf-8"> 5 <title>testando o Bootstrap</title> 6 <link href="css/bootstrap.min.css" rel="stylesheet" type="text/css" media= "all" /> 7 <script src="js/jquery min.js" type="text/javascript"></script> 8 <script src="js/bootstrap.min.js" type="text/javascript"></script> 9 </head>

6 1 <body> 2 <nav class="navbar navbar-inverse" role="navigation"> 3 <div class="container"> 4 <p class="navbar-text">teste Bootstrap</p> 5 </div> 6 </nav> 7 <div class="container"> 8 <div class="row"> 9 <div class="col-xs-12 col-sm-6 col-md-6"> 10 <table class="table table-bordered table-condensed table-striped"> 11 <caption>exemplo de Tabela</caption> 12 <thead> 13 <tr > 14 <th>header</th> 15 <th>header</th> 16 <th>header</th> 17 <th>header</th> 18 </tr> 19 </thead> 20 <tbody> 21 <tr > 22 <td>data</td> 23 <td>data</td> 24 <td>data</td> 25 <td>data</td> 26 </tr> 27 </tbody> 28 </table> 29 </div> 30 <div class="col-xs-12 col-sm-6 col-md-6"> 31 <form role="form"> 32 <div class="form-group"> 33 <label for="exampleinput 1">endereço de </label> 34 <input type=" " class="form-control" id="exampleinput 1" placeholder="informe o "> 35 </div> 36 <div class="form-group"> 37 <label for="exampleinputpassword1">senha</label> 38 <input type="password" class="form-control" id=" exampleinputpassword1" placeholder="senha"> 39 </div> 40 <div class="form-group"> 41 <label for="exampleinputfile">arquivo</label> 42 <input type="file" id="exampleinputfile"> 43 <p class="help-block">exemplo texto em nível de bloco.</p> 44 </div> 45 <div class="checkbox"> 46 <label> 47 <input type="checkbox"> Caixa de Seleção 48 </label> 49 </div> 50 <button type="submit" class="btn btn-default">enviar</button> 51 </form> 52 </div> 53 </div> 54 </div> 55 </body> 56 </html>

7 2 Bootstrap Grid System Quando começamos a desenvolver um tema de site, primeiramente passamos pelo processo de desenho (design) do layout, portanto vamos imaginar que nosso layout seguirá a imagem abaixo: Figura 1: Exemplo de layout Analisando o layout, temos: Cabeçalho Logo Menu Superior Busca Corpo do site Conteúdo Sidebar Rodapé Links Importantes Redes Sociais Logo do rodapé Copyright Um layout bem básico mas que levaríamos um bom tempo para posicionar os elementos em CSS caso não estivéssemos trabalhando com bootstrap. Agora que temos o Layout, vamos entender como funciona o sistema de grade. O Framework Bootstrap trabalha com um sistema chamado (Grid System). Esse sistema é baseado em linhas e colunas, assim como uma tabela. Quando realizamos o download do framework, por padrão, ele vem com 12 colunas. Podemos trabalhar com uma quantidade de colunas superior, dependendo da quantidade de informação que pretendemos apresentar em nosso site. A maioria dos sites são desenvolvidos em 12 colunas, portanto vamos permanecer no padrão.

8 A imagem abaixo é a representação do Grid System. Figura 2: Grid System do Bootstrap Como o Bootstrap segue um princípio de divisão em colunas, ele criou em sua biblioteca uma nomenclatura para distinguir coluna por coluna. Na versão 3.0, são as seguintes: col-xs-1, col-xs-2, col-xs-3 até a col-xs-12; col-sm-1, col-sm-2, col-sm-3 até a col-sm-12; col-md-1, col-md-2, col-md-3 até a col-md-12; col-lg-1, col-lg-2, col-lg-3 até a col-lg-12; 2.1 Entendo o Grid System O Bootstrap criou um sistema de classes que são distinguidas pelas nomenclaturas (xs, sm, md e lg) que fazem referência a quantidade de colunas que serão apresentadas para o usuário dependendo da resolução de seu dispositivo. Classe Dispositivo Resolução XS (Extra Small) Dispositivos muito pequenos(smartphones) <768px SM (Small) Dispositivos pequenos (Tablets) 768px MD (Medium) Dispositivos médios (Desktops) 992px LG (Large)Dispositivos grandes (Desktops) 1200px Para enterdermos o funcionamento, vamos analisar o código abaixo: 1 <div class="col-xs-12 col-sm-4 col-md-6 col-lg-6"> 2 <p>teste de colunas</p> 3 </div> Veja que eu utilizei todos os tipos de classe no mesmo elemento. Essa que é a jogada! Com essa sopa de classes, estou querendo dizer o seguinte:

9 Quando a div estiver sendo visualizada em um dispositivo com 1200px, a div ficará com col-lg-6 colunas. Quando a div estiver sendo visualizada em um dispositivo com 992px, a div ficará com col-md-6 colunas. Quando a div estiver sendo visualizada em um dispositivo com 768px, a div ficará com col-sm-4 colunas. Quando a div estiver sendo visualizada em um dispositivo com <768px, a div ficará com col-xs-12 colunas. 3 Criando layout com Bootstrap 3.1 Estrutura de Pastas Para iniciar nosso layout, vamos primeiro criar uma pasta com o nome (LayoutBootstrap). Agora dentro dessa pasta, vamos criar 4 novas pastas: img, js, css e fonts. Observação: Se você já fez o download do bootstrap, copie o arquivo bootstrap.min.css para dentro da pasta css e o arquivo bootstrap.min.js para dentro da pasta js. Não se esqueça do arquivo jquery min.js na pasta js. Copie também todos os arquivos que estão dentro da pasta fonts do bootstrap para a pasta fonts que você criou. Figura 3: Estrutura de pastas Com as pastas criadas, vamos dar início ao código. Utilizando qualquer editor de texto, vamos criar um arquivo index.html e linkar o bootstrap.min.css, o bootstrap.js.min e o jquery min.js dentro da tag <head> do no site. 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8" /> 5 <meta http-equiv="x-ua-compatible" content="ie=edge" /> 6 <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" /> 7 <link href="css/bootstrap.min.css" rel="stylesheet" /> 8 <link rel="stylesheet" href="css/estilo.css"> 9 <script type="text/javascript" src="js/jquery min.js"></script> 10 <script type="text/javascript" src="js/bootstrap.min.js"></script> 11 </head> 12 <body> </body> 16 </html>

10 Importante: A meta tag viewport é extremamente necessária para que o layout responsivo funcione perfeitamente nos dispositivos móveis. Sem essa meta tag o seu site pode não funcionar. Agora vamos começar a trabalhar em nosso <body>. 3.2 Logo, navbar e formulário de busca Código default navbar do bootstrap 1 <body> 2 <nav class="navbar navbar-default" role="navigation"> 3 <div class="container"> 4  5 <div class="navbar-header"> 6 <button class="navbar-toggle" type="button" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> 7 <span class="sr-only">toggle navigation</span> 8 </button> 9 <a class="navbar-brand" href="#">meu Site</a> 10 </div> 11  12 <div class="collapse navbar-collapse" id="bs-example-navbar-collapse -1"> 13 <ul class="nav navbar-nav"> 14 <li class="active"><a href="#">home</a></li> 15 <li class="dropdown"><a class="dropdown-toggle" href="#" datatoggle="dropdown">categorias <b class="caret"></b></a> 16 <ul class="dropdown-menu"> 17 <li><a href="#">jogos</a></li> 18 <li class="divider"></li> 19 <li><a href="#">tutoriais</a></li> 20 <li class="divider"></li> 21 <li><a href="#">vídeo aulas</a></li> 22 </ul> 23 </li> 24 <li><a href="#">empresa</a></li> 25 <li><a href="#">contato</a></li> 26 </ul> 27 <form class="navbar-form navbar-right" role="search"> 28 <div class="form-group"><input class="form-control" type="text" placeholder="pesquisar" /></div> 29 <button class="btn btn-default" type="submit">pesquisar</button> 30 </form> 31 </div> 32 </div> 33 </nav>  36 </body> Entendendo o navbar <nav class= navbar navbar-default >: Essa tag possui 2 classes navbar navbar-default : navbar: identifica a criação do menu, portanto é classe pai desse elemento e extremamente necessária e insubstituível. navbar-default: aplica estilo à navbar. Essa classe pode ser alterada pela classe navbarinverse conforme sua necessidade. A navbar-inverse apresenta um sistema de cores inversas a navbar-default.

11 <button class= navbar-toggle >: Esse elemento é o botão que aparece quando o site é apresentado em resoluções menores para que o menu possa ser visualizado. <a class= navbar-brand >: O navbar-brand é o lugar onde sua LOGO deve ficar. Essa classe possui configurações css que definem a visualização da logo nos dispositivos móveis. <div class= collapse navbar-collapse >: Aqui começa o menu. Tudo que estiver dentro desse elemento vai ser renderizado dentro do contexto do menu. Ao reduzir a tela do computador, ele compacta os elementos internos e esconde, sendo possível visualizar somente ao clicar no botão <button class= navbar-toggle > para expandir o menu. <ul class= nav navbar-nav >: Inicia a lista de links do menu. As 2 classes são necessárias para esse tipo de menu superior. <li class= active >: A classe active é utilizada para informar o item de menu que está selecionado, a página que está sendo visualizada. <form class= navbar-form navbar-left >: É o formulário de pesquisa que iremos utilizar. navbar-form: indica um formulário adaptado para a navbar; navbar-left: acrescenta um float:left ao elemento. Podemos utilizar ao invés da classe navbar-left a classe navbar-right que faz o oposto, aplica um float:right. 3.3 Dividindo o conteúdo Abaixo do fechamento da tag nav, digite o código abaixo: 1 <div class="wrapper" role="main"> 2 <div class="container"> 3 <div class="row"> 4 <div id="conteudo" class="col-md-9"> 5 <div class="artigo" role="article"> 6 <div class="row"> 7 <div class="col-md-4"> 8 <a href="#" title=""> 9 <img src="img/figura01.jpg" alt=""> 10 </a> 11 </div> 12 <div class="col-md-8"> 13 <h2><a href="#">título do artigo</a></h2> 14 <p> 15 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 16 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 17 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 18 consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 19 cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 20 proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 21 </p > 22 <a href="#">saiba mais</a> 23 </div> 24 </div> 25 </div> 26 <div class="artigo" role="article"> 27 <div class="row">

12 28 <div class="col-md-4"> 29 <a href="#" title=""> 30 <img src="img/figura01.jpg" alt=""> 31 </a> 32 </div> 33 <div class="artigo" role="article"> 34 <div class="row"> 35 <div class="col-md-4"> 36 <a href="#" title=""> 37 <img src="img/figura01.jpg" alt=""> 38 </a> 39 </div> 40 <div class="col-md-8"> 41 <h2><a href="#">título do artigo</a></h2> 42 <p> 43 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 44 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 45 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 46 consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 47 cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 48 proident, sunt in culpa qui officia deserunt mollit anim id est laborum. 49 </p > 50 <a href="#">saiba mais</a> 51 </div> 52 </div> 53 </div> 54 <div class="artigo" role="article"> 55 <div class="row"> 56 <div class="col-md-4"> 57 <a href="#" title=""> 58 <img src="img/figura01.jpg" alt=""> 59 </a> 60 </div> 61 <div class="artigo" role="article"> 62 <div class="row"> 63 <div class="col-md-4"> 64 <a href="#" title=""> 65 <img src="img/figura01.jpg" alt=""> 66 </a> 67 </div> 68 <div class="col-md-8"> 69 <h2><a href="#">título do artigo</a></h2> 70 <p> 71 Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod 72 tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, 73 quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo 74 consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse 75 cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non 76 proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

13 77 </p > 78 <a href="#">saiba mais</a> 79 </div> 80 </div> 81 </div> 82 <div class="artigo" role="article"> 83 <div class="row"> 84 <div class="col-md-4"> 85 <a href="#" title=""> 86 <img src="img/figura01.jpg" alt=""> 87 </a> 88 </div> 89 </div> 90  91 <div id="sidebar" class="col-md-3"> 92 <div class="widget"> 93 <h3>newsletter</h3> 94 <form class="form" role="form"> 95 <div class="form-group"> 96 <label class="sr-only" for="exampleinput 2">entre com seu </label> 97 <input type=" " class="form-control" id="exampleinput 2" placeholder="entre com seu "> 98 </div> 99 <button type="submit" class="btn btn-success">cadastrar</button> 100 </form> 101 </div> 102 <div class="widget"> 103 <h3>parceiros</h3> 104 <ul > 105 <li><a href="">parceiro 1</a></li> 106 <li><a href="">parceiro 2</a></li> 107 <li><a href="">parceiro 3</a></li> 108 <li><a href="">parceiro 4</a></li> 109 <li><a href="">parceiro 5</a></li> 110 </ul> 111 </div> 112 </div> 113 </div> 114 </div> 115 </div> 116 <footer>  117 <div class="container"> 118 <div class="row"> 119 <div id="linksimportantes" class="col-md-3"> 120 <h4>links Importantes</h4> 121 <ul > 122 <li><a href="#">link1</a></li> 123 <li><a href="#">link2</a></li> 124 <li><a href="#">link3</a></li> 125 <li><a href="#">link4</a></li> 126 </ul> 127 </div>  128 <div id="redessociais" class="col-md-3"> 129 <h4>redes Sociais</h4> 130 <ul > 131 <li><a href="#">facebook</a></li> 132 <li><a href="#">googleplus</a></li> 133 <li><a href="#">twitter</a></li> 134 </ul> 135 </div>

14 136 <div id="logofooter" class="col-md-offset-3 col-md-3"> 137 <h2>meu site</h2> 138 </div>  139 </div> 140 </div> 141 </ footer > 142 <div class="copyright"> 143 <div class="container"> 144 <div class="row"> 145 <div class="col-md-12"> 146 <p> Todos os direitos reservados.</p> 147 </div> 148 </div> 149 </div> 150 </div> Analisando o código <div class= wrapper role= main >: Esse elemento não é padrão do bootstrap. Somente acrescentei para poder ter um controle melhor dos elementos internos do conteúdo do site. Ele engloba o conteúdo e o sidebar deixando o menu superior e o rodapé separados. <div class= container >: Esse elemento é padrão do bootstrap e é uma das classes mais utilizadas e importantes do framework. Com ela informamos que a partir daquele elemento nós teremos um container que possui largura específica e que se adapta com relação a resolução do navegador. Dêem uma observada no código e percebam que essa classe é chamada 3 vezes: no navbar, outra no conteúdo e no footer. Sem essa classe nós deixamos de limitar a largura do site, sem falar que a falta dela pode acarretar alguns problemas no layout. Portanto, sempre que for criar uma nova área que engloba as colunas, deve-se invocar essa classe. OBS: A classe container é chamada somente uma vez por área. <div class= row >: Esse elemento é padrão do bootstrap e é bastante importante para o framework. Ela faz parceria com o container. O container cria um quadrado imaginário em volta dos elementos e o row, que fica sempre dentro do container, divide esse quadrado em linhas. Vejam abaixo como funciona, em forma de ilustração, as classes container e row. Figura 4: Container e Row

15 <div class= col-md-? >: as divs que possuem classes como col-md-9 / col-sm-? / col-lg-? e etc, são identificadas como colunas. O md indica que quando o site estiver sendo visualizado em resolução maior ou igual a 992px, aquele elemento terá o número de colunas identifica pela classe col-md-numero. Portanto, em nosso exemplo o conteúdo terá 9 colunas na resolução md e o sidebar terá 3 colunas. <footer>: Tag do html5 que identifica que aquele bloco será reconhecido como o rodapé do site. <div class= col-md-offset-3 col-md-3 >: Esse elemento estou destacando somente por causa da classe col-md-offset-3. O col-md vocês já sabem o que significa. O offset-3 indica que aquele elemento será empurrado 3 colunas para a direita.