Web design responsivo com Bootstrap e JSF 2

[rotulo-mentoring/][lead-mentoring]Neste artigo serão apresentados os conceitos relacionados a Design Responsivo e como utilizá-los em uma aplicação web. Para isso, analisaremos o Bootstrap e o JSF e como adotá-los em conjunto para alcançar esta nova meta de grande parte das aplicações atuais. Nesse contexto, veremos também como configurar o ambiente de desenvolvimento para a construção de um projeto simples com interface responsiva voltada para o cadastro de alunos, pois com a grande quantidade de dispositivos móveis, a capacidade de ajuste dos elementos de um site ao tamanho das telas desses equipamentos torna-se cada vez mais importante. [/lead-mentoring]

Segundo relatório do Google Analytics, do total de acessos ao seu sistema de busca, 60% são feitos através de telefones celulares. Demonstrando essa mesma tendência, em um levantamento realizado pelo IBGE (Instituto Brasileiro de Geografia e Estatística) em 2013, verificou-se que 57,3% das residências no Brasil acessam a internet através de dispositivos móveis. Foi observado, também pelo IBGE, que nas navegações pela rede somente por esses equipamentos, houve, em 2014, um acréscimo de 7,2 milhões de usuários se comparado ao ano anterior, e tudo indica que em 2015 esse percentual deverá aumentar.

Além disso, dados divulgados pela FGV (Fundação Getúlio Vargas) em 2015 apontaram a existência de 306 milhões de dispositivos conectados à internet no Brasil. A maioria deles, cerca de 154 milhões, são smartphones, ou seja, temos uma média três dispositivos para cada dois habitantes. Somente no segmento de celulares, também chamado de feature phone, a penetração desses equipamentos no mercado brasileiro foi de 162%, ou seja, 1,62% aparelho por habitante. Esse índice supera a média mundial, que é de 117%, e até o percentual verificado nos Estados Unidos, de 148%.

Dessa forma, verificamos que esses novos dispositivos chegaram para ficar e tudo indica que por causa deles os computadores (Desktops e Notebooks) se tornarão obsoletos no sentido que os conhecemos hoje, isto é, para o acesso à internet, leitura de documentos ou a execução de aplicativos. Tal fato pode ser observado no dia a dia, quando notamos que em diversos lugares nos deparamos com pessoas com seus smartphones e tablets realizando ações que até pouco tempo eram disponíveis apenas aos computadores.

Diante desse cenário surge a necessidade de desenvolver sites que sejam capazes de atender às características desses novos equipamentos quanto ao tamanho da tela e à forma como o conteúdo deve ser apresentado ao visitante. É certo que a forma como as informações são apresentadas a quem utiliza um smartphone deve ser diferente daquela apresentada a quem utiliza um computador, visto que são equipamentos completamente diferentes quanto ao tamanho e resolução da tela, modo de interação e capacidade de processamento. Por exemplo, determinado conteúdo pode ficar pequeno e centralizado quando visualizado com um computador ou ficar muito grande e descentralizado quando visualizado por meio de um smartphone. Além disso, a forma que a informação é exibida para o visitante pode ser crucial para o sucesso do site, pois uma navegação mais confortável pode significar a permanência ou retorno ao mesmo. Por exemplo, uma boa navegação de consumidores em uma loja virtual pode significar uma compra e a aceitação da loja pelo cliente para compras futuras.

Portanto, o desenvolvimento de sites deve possuir uma abordagem bem elaborada em sua concepção e codificação, de modo a garantir aos visitantes a capacidade de terem uma experiência visualmente rica e funcional. Com base nisso, surgiu a necessidade de uma web que suporte esses novos dispositivos, pois o cenário dominante até então, onde há um navegador instalado em um computador controlado por mouse e teclado em uma tela confortável, não atende mais à nova realidade de telas pequenas, sensíveis ao toque, redes móveis e muitas outras diferenças.

Assim, surge uma nova maneira de pensar a web, a qual visa a adaptação das páginas a todo tipo de dispositivo, abandonando as telas de tamanhos previsíveis e pensando em sites flexíveis, que suportem os mais diferentes tipos de interação e ferramentas de acesso. Nesse contexto, passa a ter destaque o Design Responsivo, a “chave” para essa nova web e solução que define um conjunto de técnicas com o intuito de melhorar a experiência do usuário na navegação independentemente do dispositivo utilizado.

Design Responsivo

Diante do crescimento do número de dispositivos móveis através dos quais a maioria dos acessos à internet são realizados, é natural que todas as empresas comecem a direcionar seus esforços para atender a esse novo ambiente da melhor maneira. Contudo, devido à variação de tamanho e qualidade das telas, não seria adequado o desenvolvimento de múltiplas versões de um mesmo site. Sendo assim, uma das soluções seria a programação do conteúdo de forma que os elementos nele existentes, tais como imagens, textos, layout, entre outros, pudessem se adaptar automaticamente a essas variáveis. Nesse contexto, inspirado por conceitos de arquitetura e no livro Interactive Architecture, de Michael Fox e Miles Kemp, Ethan Marcotte publicou em meados de 2010, no site A LIST APART, um artigo intitulado “Responsive Web Design”, onde mostrava as técnicas que poderiam garantir uma correta visualização de páginas independente do dispositivo utilizado.

Devido à grande e positiva repercussão e o grande número de questionamentos da comunidade por mais explicações sobre o tema, no ano seguinte foi lançado um livro –também escrito por Ethan – que recebeu o mesmo nome do artigo e que mudou, definitivamente, a forma de fazer design para a web. Antes disso, a maior parte das pessoas que trabalhavam com conteúdo para web construía seus sites criando uma divisão principal de largura fixa que funcionava como um contêiner, sendo todo conteúdo colocado dentro dele. Assim, tal abordagem permitia o controle do design criado, pois limitava-o pela divisão fixa definida e impedia a expansão desordenada da página pelo monitor. Como a maior parte dos computadores possuía a resolução 1024×768, foi padronizado 960 pixels como a largura ideal para um site. Entretanto, tal abordagem começou a gerar problemas quando um tipo único de equipamentos que acessava a internet deu lugar a uma rica variedade: os tablets, smartphones e até TVs. Nesse momento, a divisão principal de largura fixa ficaria pequena para uma televisão de 42 polegadas, mas muito grande para telas com resolução menor, sinalizando que a adoção de um valor fixo não é mais adequada.

A solução proposta por Ethan Marcotte é criar um design que permita ao site comportar-se de maneira diferente de acordo com o dispositivo, ajustando todo o conteúdo conforme o tamanho e resolução da tela. Para isso, Ethan utilizou três ingredientes técnicos: fluid grids (layout fuído), flexible images (imagens e recursos flexíveis) e media queries. Vejamos uma análise sobre cada um deles nos tópicos a seguir.

Layout Fluído

Layouts fluídos são conhecidos também como grids flexíveis e têm como principal característica a proibição do uso de medidas absolutas ou fixas no CSS da página, tais como a definição de pixels ou pontos. Assim, quando especificamos tamanhos de espaçamentos, paddings, margens, enfim, qualquer medida para os elementos em uma página, devemos sempre especificar valores variáveis ou relativos, como porcentagens ou ems. Os tipos de medidas para CSS são:

· Pixel (px): a unidade pixel é uma unidade de medida fixa e geralmente representa a menor parte de uma imagem digital à qual é possível atribuir uma cor. O número deles em uma imagem determina sua resolução. Da mesma forma, um pixel na tela de um dispositivo é a menor unidade endereçada nela, e a resolução é representada pela quantidade de pixels que cada dimensão pode exibir. Por exemplo: uma tela de um computador com resolução 1366x768 tem a capacidade de exibir 1366 pixels na largura por 768 pixels no comprimento, totalizando 1.049.088 pixels, ou seja, mais de um 1 megapixel. O pixel é a unidade de medida fixa mais usada em arquivos CSS para organizar os elementos na tela;

· Ponto (pt): a unidade ponto é uma unidade de medida fixa tradicionalmente utilizada para declaração do tamanho da fonte. É empregada em CSS geralmente para impressão de qualquer tipo de documento em papel, tais como jornais, revistas, outdoors, entre outros. Por exemplo, o CSS h2 {font-size: 12pt;} definiria um cabeçalho com tamanho de fonte igual a 12 pontos (12pt);

· Porcentagem (%): a unidade porcentagem é uma unidade de medida variável ou relativa e é parecida com a unidade “em” (analisada a seguir), embora apresente algumas diferenças fundamentais que não serão apresentadas aqui por entender que este artigo não carece de tal aprofundamento. Com porcentagem, para representar o tamanho da fonte correspondente ao padrão 12pt, utiliza-se 100%, e o uso dessa medida permite ao texto permanecer totalmente escalável para diferentes tamanhos de tela. Outra questão a ser observada é que quando a medida porcentagem é utilizada em um atributo font-size, o tamanho do texto estará relacionado ao font-size padrão do dispositivo, que geralmente é 12px; e quando utilizado para outras medidas, o tamanho do elemento estará relacionado à largura do elemento pai. Por exemplo, o CSS h3{font-size: 100%;} definiria o texto do cabeçalho com um tamanho de fonte igual 12px (100% do font-size padrão) e o CSS nav{width: 25%;} definiria o tamanho da barra de navegação como sendo 25% do tamanho do seu elemento pai;"