Desenvolvimento para a Web

Artigo
06/04/2015

Criando sites para web responsivos com o Bootstrap

É apenas uma questão de tempo antes que um cliente toque na URL do site em seu dispositivo móvel. O usuário verá um processamento de seu site que é impossível usar em um telefone como se o site tivesse sido criado apenas para a desktop? Se assim, o usuário provavelmente passará para um site mais amigável para dispositivos móveis. E se esse usuário em vez disso, encontrar uma experiência de usuário criada especificamente para um fator forma de mobilidade e aproveite para interagir facilmente com o seu site?

No passado, um site da Web que desse suporte para móvel e desktop precisavam de bases de código diferentes. Hoje, no entanto, há estruturas de interface do usuário que permitem que páginas de um site da Web proporcionem suporte para móvel, tablet, desktop e até mesmo desktop com tela grande — tudo isso com uma única base de código. Embora essas ferramentas não sejam uma panaceia para desenvolvedores da Web móvel, elas podem facilitar significativamente o processo de desenvolvimento. Ainda assim, o conceito deve ser fornecido para determinar se uma é adequada para seu site.

Este artigo apresenta uma visão geral de uma dessas ferramentas, Bootstrap, que é incluída em muitos dos modelos do aplicativo web Visual Studio 2013. O Bootstrap é uma estrutura que habilita o design Web responsivo (RWD) — uma abordagem para criar sites da Web que tem o objetivo de fornecer uma experiência de exibição aceitável em todos os fatores forma com uma única base de código. Após a visão geral, vou considerar alguns fatores que podem ajudá-lo a decidir se uma estrutura como o Bootstrap é adequada para seu site.

O início

Levou um certo tempo de evolução para trazer a indústria de software para o ponto em que uma solução como Bootstrap surge. Após um início indeciso, começando em 1998, quando a Wireless Markup Language (WML), Compact HTML e XHTML Mobile Profile apareceram e, em seguida, desapareceram, o HTML5 finalmente se tornou o próxima geração HTML padrão para todos os dispositivos em 2009. Mas somente de padrões não é suficientes. Enquanto o padrão para a marcação de Web móvel estava em desenvolvimento, avanços significativos também ocorreram com hardware, navegadores de dispositivos móveis e largura de banda. Os processadores tornaram-se mais rápidos, os navegadores de dispositivos móveis avançaram ao ponto que podem exibir qualquer página da Web (mesmo se a página não tivesse sido desenvolvida para um dispositivo móvel) e a largura de banda aumentou. Isso criou um ambiente para desenvolvedores assumirem o controle.

Os desenvolvedores adoram fazer ferramentas para outros desenvolvedores, e a Web móvel não é exceção. Há mais de uma dúzia diferentes estruturas de interface do usuário no mercado atualmente. Não seria justo rotular uma dessas estruturas como "a melhor" porque existem diferentes abordagens e sites da Web têm requisitos diferentes. Eu escolhi o Bootstrap para este artigo porque ele tem um nível sólido de adoção, é totalmente documentado e está incluído nos modelos de aplicativo de Web do ASP.NET.

O que é o Bootstrap?

O Bootstrap é uma estrutura de interface do usuário responsiva para criação de sites da Web. A estrutura do Bootstrap, como muitas outras estruturas de interface do usuário para o desenvolvimento da Web, é uma coleção de classes CSS, componentes de interface do usuário e plug-ins JQuery. O Bootstrap é considerado como tendo uma estrutura leve. Em outras palavras, ele usa mais CSS do que JavaScript para fazer seu trabalho. Embora o Bootstrap seja considerado leve, uma página da Web que usa ferramentas Bootstrap ainda requer mais processamento para renderizar do que uma página criada especificamente para um determinado formato. Por esse motivo, o desempenho deve ser uma consideração importante ao projetar, desenvolver e testar páginas que usam qualquer parte da estrutura do Bootstrap.

O Bootstrap faz um monte de coisas automaticamente para você. Ele também permite personalizar facilmente o comportamento padrão para um fator forma específico, mantendo sua página funcionando bem em outros fatores formato. A versão 3 do Bootstrap vem com classes CSS que se destinam especificamente as larguras de navegador comumente encontradas em navegadores de dispositivos móveis, navegadores de tablet, navegadores de desktop e até mesmo navegadores em execução em desktop com telas maiores. Você pode usar as classes CSS do Bootstrap para comentar os elementos do HTML5. As classes CSS mais comumente usadas envolvem o sistema de grade do Bootstrap, uma coleção de classes que organizam o layout de uma página usando linhas e colunas. Descreverei o sistema de grade com mais detalhes posteriormente neste artigo.

O Bootstrap tem vários componentes de interface do usuário para a criação da interface do usuário de um site, incluindo o botão suspenso, grupo de botões, objeto Dropdown, barra de navegação, barra de endereços, objeto de mídia e barra de progresso e de paginação, apenas para citar alguns. Muitos desses componentes são eles mesmos responsivos, significando que eles sejam renderizados diferentemente com base na largura do navegador. Por exemplo, a Barra de navegação é um componente poderoso que faz automaticamente a transição de uma barra de menus que exibe as opções de menu por toda a largura da tela em computadores desktop para uma versão compacta de boa aparência que apresenta opções por meio de uma barra de menu suspenso que é ativada quando o usuário toca na Barra de navegação.

Para recursos mais avançados de interface do usuário, o Bootstrap também tem uma coleção de plug-ins personalizados do JQuery, incluindo Carrossel, Painel recolhível, Prompt de diálogo modal e mensagens popover.

Introdução

Os arquivos de JavaScript e CSS do Bootstrap são incluídos automaticamente em seu projeto quando você usa o modelo de aplicativo de Web do ASP.NET para Visual Studio 2013 para criar seu projeto. A caixa de diálogo do Novo projeto para modelos de aplicativo da Web é mostrada na Figura 1. O Bootstrap também precisa do JQuery. Quando você pega o Bootstrap a partir do modelo de aplicativo Web do Visual Studio 2013, você obtém o Bootstrap v3.0.0 com o JQuery v1.10.2. Se você usar os modelos do Visual Studio 2012, esses arquivos não serão incluídos em seu projeto. Além disso, o Bootstrap não é incluído automaticamente se você criar um novo site usando o Arquivo | Novo Site da Web.

Figura 1 Caixa de diálogo de Novo projeto do Visual Studio 2013 para o modelo de aplicativo da Web do ASP.NET

Se você preferir usar as versões mais recentes e maiores do Bootstrap e JQuery, use o NuGet para atualizar o projeto. E use o NuGet para obter Bootstrap, se você tiver uma versão do Visual Studio anterior ao Visual Studio 2013. O site Bootstrap (getbootstrap.com) mostra como vincular a uma versão hospedada em CDN do Bootstrap, o que pode fornecer uma vantagem de desempenho significativa.

Testar o Sistema de grade do Bootstrap

O Bootstrap fornece o que é conhecido como um layout de 12 colunas responsivo. Você pode dispor suas páginas usando qualquer número de linhas, mas você deve usar 12 colunas. Essas 12 colunas são dimensionadas igualmente na largura do navegador e você usa as classes CSS do Bootstrap para especificar quantas colunas um elemento HTML deve ocupar. Isso é um tipo diferente de sistema de grade que os desenvolvedores de XAML para Windows Phone e Windows 8 estão acostumados. O sistema de grade XAML permite um layout de página com qualquer número de linhas e colunas. Os desenvolvedores então colocam cada controle em uma célula, especificando um número de linha e um número de coluna. O que torna o sistema de grade do Bootstrap particularmente poderoso é que você pode especificar um intervalo de coluna diferente para computadores desktop grandes, normais, tablets e telefones. Por exemplo, um padrão de layout comum é criar uma série de divisões e para cada divisão especificar que ela deve ocupar 2 colunas em um computador desktop grande (isso significa que 6 divisões cabem em cada linha), 3 colunas em um desktop normal, 4 colunas em um tablet e 6 colunas em um telefone (que produziria 2 divisões por linha). Este cenário é codificado na Figura 2 usando as classes col* que compõem o sistema de grade do Bootstrap. As classes de cor (cinza, laranja e assim por diante) simplesmente colorem o plano de fundo de uma divisão. A Figura 3 e Figura 4 mostram como essa página será processada em um desktop e um telefone, respectivamente.

Figura 2 Um padrão comum de Layout usando o sistema de grade do Bootstrap

<body>
  <div class="container">
    <hr />
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 gray">1</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 orange">2</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 gold">3</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 lightGreen">4</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 green">5</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 lightBlue">6</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 purple">7</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 gray">8</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 orange">9</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 gold">10</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 lightGreen">11</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 green">12</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 lightBlue">13</div>
    <div class="col-xs-6 col-sm-4 col-md-3 col-lg-2 purple">14</div>
  </div> <!-- /container -->
</body>

Figura 3 O exemplo da Figura 2 renderizado em um desktop usando a classe col-md-3

Figura 4 O exemplo da Figura 2 renderizado em um telefone usando a classe col-md-6

É importante observar que o Bootstrap realmente não detecta o tipo de dispositivo. Em vez disso, o Bootstrap usa as consultas de mídia para determinar se uma classe CSS deve ser aplicada. As quatro categorias de classes são mostradas na Figura 5, junto com os intervalos de largura que farão com que cada categoria seja aplicada.

Figura 5 Categorias de classe de sistema de grade do Bootstrap

Prefixo de categoria	Fator forma	Largura em Pixels
col-xs-*	Telefone	Menos de 768
col-sm-*	Tablet	768 to 991
col-md-*	Desktop	992 to 1.200
col-lg-*	Desktop grande	Maior do que 1.200

Ao definir o layout de um elemento HTML específico, você pode usar qualquer combinação dessas categorias. Por exemplo, a linha de código a seguir usa uma classe de cada categoria:

<div class="col-xs-6 col-sm-4 col-md-3 col-lg-2"> {Other HTML elements here.} </div>

Isso é equivalente ao seguinte pseudocódigo:

Se a largura do navegador for menor que 768 pixels, então, essa divisão abrangerá 6 das 12 colunas disponíveis, o que ocupa metade (6/12) da tela.

E se a largura do navegador for entre 768 pixels e 991 pixels, então essa divisão abrangerá 4 das 12 colunas disponíveis, ocupando um terço (4/12) da tela.

E se a largura do navegador for entre 992 pixels e 1.200 pixels, então essa divisão abrangerá 3 das 12 colunas disponíveis, ocupando um quarto (3/12) da tela.

Ainda, se a largura do navegador for maior do que 1.200 pixels, então essa divisão abrangerá 2 das 12 colunas disponíveis, ocupando um sexto (2/12) da tela.

Você não precisa especificar explicitamente uma contagem de colunas para cada categoria. Se você não especificar uma categoria específica, a categoria seguinte diminuirá o tamanho que será usado. Por exemplo, se desejar um layout exclusivo para telefones, mas que funcione corretamente em tablets, computadores desktop normais e grandes com o mesmo layout, basta especificar uma classe para o telefone e tablet. Desta forma:

<div class="col-xs-6 col-sm-4"> {HTML elements here.} </div>

O Bootstrap usará a configuração de tablet para os fatores forma do desktop normal e grande. Além disso, a classe padrão para o telefone é col-xs-12, que coloca cada divisão em sua própria linha. Se esse for um layout aceitável para um telefone, a linha de código precedente pode ser reduzida ainda mais:

<div class="col-sm-4"> {HTML elements here.} </div>

Observe na Figura 2 que as linhas não são especificadas. O sistema de grade do Bootstrap avançará automaticamente uma divisão para a próxima linha se a linha atual já tiver sido usada ou se não houver espaço suficiente para a divisão. Você pode forçar uma nova linha usando a classe de linha como esta:

<div class="row">
  {Place columns here.}
</div>

Por que 12 colunas? 12 pode parecer um número escolhido aleatoriamente para esse sistema de grade, mas não é. O número 12 fornece muita divisibilidade e muito espaço para capacidade de composição. Por exemplo, os números 1, 2, 3, 4, 6 e 12 são todos divididos uniformemente por 12. O uso desses valores para os intervalos de coluna pode produzir um layout de conteúdo de 12 colunas, 6 colunas, 4 colunas, 2 colunas e 1 coluna, respectivamente. Além disso, combinações como 3 + 9, 9 + 3, 4 + 8 e 8 + 4 são combinações visualmente atraentes para dispor o conteúdo.

Componentes do Bootstrap

O Bootstrap contém mais de 20 componentes, que podem ser facilmente usados em seu estado atual ou ampliados. Confira o site do Bootstrap para obter uma descrição de cada componente e um exemplo de uso. A documentação para a mídia ainda faz uso de um vídeo de música do REO Speedwagon para demonstrar o uso do objeto. Mesmo que você não tenha crescido durante anos 80, considere a possibilidade escutar um pouco.

Vou olhar mais detalhadamente o componente da Barra de navegação, que é usado para criar uma barra de menus na parte superior de uma página. A Figura 6 mostra como usar o componente Barra de navegação para criar um menu simples que contém a marca do site e algumas opções de menu. Quando a largura do navegador for maior do que 768 pixels, barra de navegação é renderizada conforme a Figura 7. Se a largura do navegador for menor que 768 pixels, a Barra de navegação será renderizada conforme a Figura 8. Nesse caso, as opções de menu são exibidas quando o usuário toca no botão que contém as linhas horizontais.

Figura 6 Usando o componente de Barra de navegação do Bootstrap

<nav class="navbar navbar-default">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse"
        data-target="#bs-example-navbar-collapse-1">
        <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="#">Brand</a>
    </div>
    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Link 1
          <span class="sr-only">(current)</span></a></li>
        <li><a href="#">Link 2</a></li>
        <li><a href="#">Link 3</a></li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

Figura 7 A Barra de navegação renderizada para navegadores com largura igual ou maior que 768 Pixels

Figura 8 A Barra de navegação renderizada para larguras de navegador menos de 768 Pixels

Obviamente, esse é um exemplo bastante simples. A Barra de navegação também pode conter botões de menu da lista suspensa e você pode até mesmo incorporar a funcionalidade de pesquisa na Barra de navegação. Além disso, a parte da marca da Barra de navegação, que é o texto no exemplo, pode ser uma imagem.

Plug-ins JQuery

O Bootstrap tem sobre uma dúzia plug-ins JQuery, que estão documentadas na guia JavaScript no site do Bootstrap. À primeira vista eles parecem semelhantes a função para os componentes descritos na seção anterior que são classes CSS que são usadas para aumentar os elementos do HTML5. No entanto, essas classes CSS disparam a atividade JQuery quando o elemento HTML é processado ou vários eventos que lançam o elemento HTML. As páginas que usam intensamente esses plug-ins devem ser testadas para problemas de desempenho, especialmente em dispositivos com CPUs mais lentas e memória limitada.

O JavaScript necessário para executar esses plug-ins está localizado em bootstrap.js. Cada plug-in também está disponível como um arquivo autônomo, que permite que você inclua somente os plug-ins que o seu aplicativo precisa, resultando em processamento de primeira página mais rapidamente.

A Figura 9 mostra como usar o plug-in Carrossel, que fornece recursos de apresentação de slides. Se sua página já tiver um link para bootstrap.js ou bootstrap.min.js, estará tudo pronto. Ou você pode vincular ao carousel.js se o plug-in Carrossel é o único plug-in que a sua página precisa.

Figura 9 Usando o plug-in Carrossel

<div id="carousel-example-generic" class="carousel slide" data-ride="carousel">
  <!-- Indicators -->
  <ol class="carousel-indicators">
    <li data-target="#carousel-example-generic" data-slide-to="0"
      class="active"></li>
    <li data-target="#carousel-example-generic" data-slide-to="1"></li>
    <li data-target="#carousel-example-generic" data-slide-to="2"></li>
  </ol>
  <!-- Wrapper for slide content -->
  <div class="carousel-inner" role="listbox">
    <div class="item">
      <img src="..." alt="...">
      <div class="carousel-caption">
        ...
      </div>
    </div>
    ... Only one slide for brevity.
  </div>
  <!-- Controls -->
  <a class="left carousel-control" href="#carousel-example-generic" role="button"
    data-slide="prev">
    <span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>
    <span class="sr-only">Previous</span>
  </a>
  <a class="right carousel-control" href="#carousel-example-generic" role="button"
    data-slide="next">
    <span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>
    <span class="sr-only">Next</span>
  </a>
</div>

A Figura 10 mostra o plug-in Carrossel renderizado para o Windows Phone. O plug-in Carrossel alonga próprio adequadamente para fatores forma para tablet, computadores desktop normais e grandes.

Figura 10 O exemplo carrossel processado no emulador do Windows Phone

Considerações

Conforme observado anteriormente, o Bootstrap não será adequado para cada situação. Para determinar que se o Bootstrap é adequada para seu site, há algumas coisas que você deve considerar:

Se você tiver um site existente que tenha tido o desempenho ajustado ao longo dos anos e foi otimizado para seus usuários, você desejará continuar com cuidado. Criando protótipos complexas, páginas altamente usados também é uma boa ideia. Se uma página habilitada para o Bootstrap não funcionar adequadamente, considere configurar um site m e codificar tudo você mesmo. O artigo do Dino Esposito, "Colocando um Site existente em movimento" (bit.ly/1CaVEWR), mostra como configurar um site m.
Se você estiver criando um novo site, faça o protótipo de suas páginas mais complexas e as páginas que você acha que serão mais intensamente usadas. Verifique se que eles funcionam bem em dispositivos low-end e em áreas de baixa largura de banda. Se uma página está problemática tente reprojetá-la de modo que ela será executada adequadamente. Um site m também é uma opção para novos sites, mas isso deve ser feito apenas se uma reformulação não funcione.
Certifique-se de que o sistema de grade do Bootstrap e os componentes usados para navegação não são muito limitados em relação ao design de site. Entre em contato com seus designers em experiência de usuário antes, no processo de investigação e obtenção do Bootstrap. Na minha opinião, uma ferramenta como Bootstrap força a criação para dispositivos móveis, que força você a manter suas páginas limpas e organizadas. No entanto, o designer de experiência do usuário pode confirmar se o Bootstrap pode ser feito para representar sua marca corretamente e fornecer uma experiência adequada para seus usuários.

Mais informações e ferramentas

Se você pretende desenvolver seu site usando o Bootstrap, você desejará examinar todos os componentes e plug-ins do JQuery documentados no site de Bootstrap, onde você também encontrará muitos exemplos úteis. Você também deve conferir:

O Bootswatch (bootswatch.com) contém temas livres para o Bootstrap.
O Wrap Bootstrap (wrapbootstrap.com) contém os modelos e temas do Bootstrap baratos.
O Font Awesome (fontawesome.io) é um site que fornece ícones vetoriais escaláveis gratuitos que podem ser facilmente personalizados com CSS.
O "Implantar um aplicativo ASP.NET MVC 5 móveis da Web em sites do Azure" (bit.ly/1CMOGwq) mostra como aplicar o Bootstrap para um site existente para torná-lo amigáveis para dispositivos móveis. O artigo também mostra como implantar um site no Microsoft Azure.

Conclusão

O material apresentado aqui é apenas uma breve visão geral da estrutura da interface do usuário do Bootstrap. Absolutamente, ele não descreve completamente todas as classes CSS, componentes e plug-ins que acompanham o Bootstrap. Você vai querer ir para o site de Bootstrap para obter uma compreensão completa de todas as ferramentas disponíveis e para explorar as páginas de exemplo que demonstram diferentes designs de experiência do usuário. Esses exemplos são um bom ponto de partida se você precisa ter uma noção do que é possível com o Bootstrap.

Antes de prosseguir com um esforço de desenvolvimento sério usando o Bootstrap ou qualquer outra estrutura, considere o desempenho e usabilidade. Fazer o protótipo das páginas principais é a melhor maneira para confirmar que o Bootstrap podem ser incorporados ao seu site e fornecer os resultados desejados.

Keith Pijanowski é um profissional de engenharia, empreendedor e empresário. Ele tem mais de 20 anos de experiência no setor de software e trabalhou para startups e empresas de grande porte em funções que variam de escrever código ao desenvolvimento de negócios. Entre em contato com ele em keithpij@msn.com ou twitter.com/keithpij.

Agradecemos aos seguintes especialistas técnicos da Microsoft pela revisão deste artigo: Rick Anderson e Cephas Lin