quarta-feira, 14 de janeiro de 2015

Criando páginas responsivas com Bootstrap, do Twitter






Bootstrap é uma biblioteca de widgets HTML responsivos, que permitem criar uma página que se autoajusta ao tamanho e resolução da tela. Tem se tornado muito popular, logo, vamos mostrar um pouco dessa ferramenta maravilhosa, com um tutorial bem interessante.


Exemplos deste artigo



Os exemplos desse artigo estão em um arquivo ZIP no Dropbox. Eis o LINK.

Responsividade



É a habilidade de uma aplicação web se adaptar a vários tamanhos e resoluções de tela. Segundo a Wikipedia: Responsive Web Design (RWD) é uma abordagem para web design que visa a elaboração de sites para fornecer uma experiência de visualização, fácil leitura e navegação optimizada com um mínimo de redimensionamento, pan, e rolando-através de uma ampla gama de dispositivos (de monitores de computador desktop para telefones móveis).

CSS e Media Queries



Uma aplicação Web responsiva, ajusta sua aparência e layout, de modo a proporcionar a melhor experiência ao usuário, independentemente de qual tipo de dispositivo esteja utilizando. Um site criado de forma responsiva, usa "grades" de posicionamento de conteúdo fluídicas, baseadas em proporção, além de imagens flexíveis, e CSS Media Queries .

Bootstrap



Bootstrap é um framework HTML, CSS e Javascript, que facilita a criação de páginas responsivas, de maneira rápida e fácil.

Você pode saber mais sobre Bootstrap no site: http://getbootstrap.com/components/

Bootstrap CDN: http://www.bootstrapcdn.com/

Elementos principais do Bootstrap



Grid



O Bootstrap tem uma grade de elementos, que você pode utilizar para posicionar seu conteúdo na página Web.




Cada elemento no Grid é referenciado por sua posição, de acordo com a linha e coluna. Por exemplo:


  <body>
    <div class="container">
      <div class="row">
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
        <div class="col-md-1">.col-md-1</div>
      </div>
      <div class="row">
        <div class="col-md-8">.col-md-8</div>


Container



O conteúdo HTML deve ser colocado dentro de elementos “Container”. Eles podem ser:

•Fixos: De largura fixa (class=“container”) ;
•Fluídicos: Ocupam toda a largura da tela (class=“container-fluid”).

Exemplo de grid



Abra as duas páginas html dentro de “bootstrap/bootstrap-grid”.








Para saber mais sobre o sistema de Grid, leia a documentação CSS do Bootstrap: http://getbootstrap.com/css/#grid

Elementos HTML melhorados pelo CSS



Tabelas

Podemos melhorar muito a renderização de tabelas. Veja as páginas “tabelas-xxx.html”, dentro de “bootstrap/bootstrap-elementos”:

Tabela comum:







Tabela melhorada:







Forms

As classes “form-group” e “form-control” auxiliam a renderizar melhor o formulário. Todos os elementos com classe “form-control” são ajustados para largura 100%. Veja os arquivos “form-xxx.html”.

Form normal:








Form melhorado:








Jumbotron

Jumbotron é um texto grande, que deve chamar a atenção na página. Veja o exemplo “jumbotron.html”:







Listas

O Bootstrap tem várias classes para listas. Podemos criar listas simples, com “badges”, links etc. Veja os exemplos que começam por “lista-xxx.html”.

Barra de navegação

A barra de navegação fica na parte superior das páginas e permite navegar para vários conteúdos do site.







Abra a página “index.html”, dentro de “bootstrap/bootstrap-elementos/barra-navegacao”. Eis o formato da navbar:

        
  <body>
    <nav class="navbar navbar-default">
      <div class="container-fluid">
        <div class="navbar-header">
          <a class="navbar-brand" href="#">Minha app web</a>
        </div>
        <div>
          <ul class="nav navbar-nav">
            <li><a href="index.html">Home</a></li>
            <li><a href="produtos.html">Produtos</a></li>
            <li class="active"><a href="artigos.html">Artigos</a></li> 
            <li><a href="sobre.html">Sobre</a></li> 
          </ul>
        </div>
      </div>
    </nav>


Bootbox



Doc: http://bootboxjs.com/
CDN: http://bootboxjs.com/index.html#download

Bootbox é uma biblioteca para criar diálogos modais do Bootstrap, de maneira mais simples e prática. Vejamos um exemplo:





Para fazer isso somente com o Bootstrap, temos que criar os elementos HTML e o código de eventos para mostrar o diálogo. Eis o código que deve ser criado (arquivo: “bootbox/modalbootstrap.html”):


<!DOCTYPE html>

… blá blá blá 

      <!-- set up the modal to start hidden and fade in and out -->
      <div id="myModal" class="modal fade">
      <div class="modal-dialog">
      <div class="modal-content">
      <!-- dialog body -->
      <div class="modal-body">
      <button type="button" class="close" data-dismiss="modal">×</button>
      Hello world!
      </div>
      <!-- dialog buttons -->
          <div class="modal-footer">
            <button type="button" class="btn btn-primary">OK</button>
        </div>
      </div>
      </div>
      </div>

… blá blá blá 

      <script>
      $(document).ready(function() {
        $("#myModal").on("show", function() { 
        $("#myModal a.btn").on("click", function(e) {
        console.log("button pressed"); // just as an example...
        $("#myModal").modal('hide'); // dismiss the dialog
        });
        });
        $("#myModal").on("hide", function() { 
        $("#myModal a.btn").off("click");
        });
        $("#myModal").on("hidden", function() { 
        $("#myModal").remove();
        });
        $("#myModal").modal({ 
        "backdrop" : "static",
        "keyboard" : true,
        "show" : true 
        });
      });
      </script> 
    
  </body>
</html>


Agora, vamos ver como ficaria com o Bootbox (arquivo: “bootbox/modal-bootbox.html”). Para isso, temos que acrescentar a carga da biblioteca:


<!-- bootbox code -->
<script src="js/bootbox.min.js"></script>


E temos que mostrar o diálogo, quando a página carregar:


<script>
  $(document).ready(function() {
    bootbox.alert("Hello world!", function() {
      console.log("Alert Callback");
    });
  });
</script>


Simples! Não precisamos definir os elementos HTML do diálogo.

Vamos analisar o método “alert”:

bootbox.alert(message, callback)

A mensagem é o texto que desejamos que apareça, e o “callback” é o que deve ser invocado quando o botão “OK” for clicado. Esse “callback” será invocado quando o usuário clicar em um dos botões do alerta: “OK”, ou “X”.

Outros métodos



Confirm

Arquivo: “bootbox/confirm.html”.


<script>
  $(document).ready(function() {
    bootbox.confirm("Tem certeza que quer deletar tudo?",         
      function(resultado) {
          bootbox.alert("Bem, você escolheu: " + resultado);
        }
    );
  });
</script>                        


O resultado será true, se o usuário clicar em “OK”, e false, se clicar em “Cancel”.

Prompt

Arquivo: “bootbox/prompt.html”.



<script>
  $(document).ready(function() {
    bootbox.prompt("Qual o seu nome?", function(resultado) {
      if (resultado === null) {
        bootbox.alert("Você é tímido(a)!");
      } 
      else {
        bootbox.alert("Olá <b>"+resultado+"</b>");
      }
    });     
  });    
</script>


Demonstração



Chega de papo furado! Você quer ver uma aplicação completa, correto? Então, dentro da pasta "aplicacao", você verá isso:






Ao selecionar uma cidade, o clima atual é exibido. Ao selecionarmos o outro elemento da navegação (“Previsão”) aparece uma página semelhante. Ao selecionarmos a cidade, a previsão para os próximos 3 dias é exibida. Finalmente, ao selecionarmos a opção “Mapa”, o Mapa climático é exibido, com as nuvens e as precipitações:







Nesta aplicação eu usei MUUUUIIIIIITOOOOO jQuery e também a API do OpenWeatherMap.


OpenWeatherMap

Para saber o clima atual de uma cidade, por exemplo o Rio de Janeiro, basta acessar a URL: http://api.openweathermap.org/data/2.5/weather?q=Rio+de+Janeiro,br E você terá uma resposta JSON como essa:


{
    "coord":{"lon":-43.21,"lat":-22.9},
    "sys"{
        "message":0.8569,"country":"BR","sunrise":1420618516,
        "sunset":1420666993},
        "weather":[
                {"id":800,"main":"Clear",
                    "description":"Sky is Clear","icon":"01d"}
                ],
        "base":"cmc stations",
        "main"{
            "temp":306.484,"temp_min":306.484,"temp_max":306.484,
            "pressure":1011.74,"sea_level":1027.33,"grnd_level":1011.74,
            "humidity":51},
        "wind":{"speed":1.22,"deg":36.5001},
        "clouds":{"all":0},
        "dt":1420645543,"id":3451190,
        "name":"Rio de Janeiro","cod":200
}



Como pegar a previsão de 3 dias para uma cidade: http://api.openweathermap.org/data/2.5/forecast/daily? q=Rio+de+Janeiro&mode=json&units=metric&cnt=3

Obter o mapa é bem simples. Precisamos saber qual é a coordenada do ponto central do mapa, por exemplo: Brasília (latitude: -15,784213, longitude: -47,884334). Depois, precisamos criar uma
para colocar o mapa:

<div id="map" class="map"></div> É necessário ajustar o tamanho dessa div, usando CSS:


<style>
  .map {
    height: 400px;
    width: 100%;
  }
</style>


Temos que carregar a biblioteca gráfica do OpenLayers:

<script src="http://openlayers.org/api/OpenLayers.js" type="text/javascript"></script>

Não baixe o script! Use remoto mesmo.


O processo de preparar e exibir o mapa envolve as etapas:
1.Instanciar o mapa;
2.Acrescentar as camadas que desejamos exibir, por exemplo: nuvens e precipitação;
3.Centralizar o mapa.

O exemplo a seguir demonstra isso:


<!DOCTYPE html>
<html lang="en">
  <head>
    <style>
      .map {
        height: 400px;
        width: 100%;
      }
    </style>
    <script src="http://openlayers.org/api/OpenLayers.js" type="text/javascript"></script>
    <title>ol 3 example</title>
  </head>
  <body onload="pageLoad()">
    <h2>My Map</h2>
    <div id="map" class="map"></div>
    <script type="text/javascript">
      function pageLoad() {
        //Center of map -15.784213, -47.884334 Brasília, DF
        var lonlat = new OpenLayers.LonLat(-47.884334, -15.784213);
        var map = new OpenLayers.Map("map");
        var mapnik = new OpenLayers.Layer.OSM(); 
        var layer_cloud = new OpenLayers.Layer.XYZ(
            "clouds",
            "http://${s}.tile.openweathermap.org/map/clouds/${z}/${x}/${y}.png",
            {
                isBaseLayer: false,
                opacity: 0.7,
                sphericalMercator: true
            }
        );
  
        var layer_precipitation = new OpenLayers.Layer.XYZ(
            "precipitation",
     "http://${s}.tile.openweathermap.org/map/precipitation/${z}/${x}/${y}.png",
            {
                isBaseLayer: false,
                opacity: 0.7,
                sphericalMercator: true
            }
        );         
        map.addLayers([mapnik, layer_precipitation, layer_cloud]);
        map.setCenter(lonlat.transform('EPSG:4326', 'EPSG:3857'),3);
      }
    </script>
  </body>
</html>


jQuery

Neste exemplo, precisamos interceptar o click em todos os links, para determinar qual cidade foi escolhida. Isso pode ser feito desta forma:


<!DOCTYPE html>
<html>
  <body>
    <div id="conteudo">
      <a href="#">Primeiro</a>
      <a href="#">Segundo</a>
      <a href="#">Terceiro</a>
    </div>
    <script src="js/jquery-2.1.0.min.js"></script>
    <script>
      $('#conteudo').on('click', 'a', function(e) {
        e.preventDefault();
        var nome = $(this).text();
        alert(nome);
      });
    </script>
  </body>
</html>


Text vs Html

Dependendo do alvo no DOM que queremos alterar, teremos que usar “text()” ou “html()”. O primeiro, como o nome diz, é para alterar o texto de um elemento, e o segundo, para alterar o HTML interior.

Exemplos:

text()


...
<p id="previsao">Para ver a previsão</p>
...
$("#previsao").text("aguarde...");


html()


…
<ul id="listaDias" class="list-group"></ul>
…
$("#listaDias").html(“<li>teste</li>”);