TÉCNICAS DE ESTRUTURAÇÃO PARA DESIGN RESPONSIVO: AMPLIANDO A USABILIDADE NO AMBIENTE WEB

Tamanho: px

Começar a partir da página:

Download "TÉCNICAS DE ESTRUTURAÇÃO PARA DESIGN RESPONSIVO: AMPLIANDO A USABILIDADE NO AMBIENTE WEB"

Davi Baltazar Ribeiro Silveira
8 Há anos
Visualizações:

1 TÉCNICAS DE ESTRUTURAÇÃO PARA DESIGN RESPONSIVO: AMPLIANDO A USABILIDADE NO AMBIENTE WEB Tiago Volpato 1, Claudete Werner 1 1 Universidade Paranaense (Unipar) Paranavaí PR Brasil tiagovolpatobr@gmail.com, claudete@unipar.br Resumo. Este artigo apresenta o resultado de uma investigação científica sobre design responsivo, com o objetivo de apresentar as tecnologias que o permeiam e como é possível desenvolver páginas que se adaptem automaticamente a diferentes telas e resoluções. Para isso, uma página web foi desenvolvida, utilizando recursos da linguagem HTML e a tecnologia CSS. 1. Introdução As tecnologias de informação e comunicação vêm se desenvolvendo em ritmo acelerado e, cada vez mais, se incorporam na vida das pessoas, seja no âmbito pessoal ou profissional. Isso tem um impacto significativo na maneira como elas se relacionam, de como consomem informações, nos processos de trabalho, e assim por diante. Deste modo, trazendo esse cenário para o contexto do processo de desenvolvimento de produtos de software, é de extrema importância dar atenção especial em como eles serão utilizados. Isso está diretamente relacionado com a interface que estes apresentam, pois de acordo com Moran [1981], é uma das partes mais importantes dos sistemas computacionais. Durante muito tempo, por exemplo, o desenvolvimento de interfaces web se baseou no tamanho de grandes monitores, com resoluções quase que padronizadas em 960 pixels. No entanto, cada vez mais os usuários acessam a internet por meio de dispositivos móveis, com diferentes tamanhos de telas, resoluções, sistemas operacionais e navegadores. Com essa problemática, torna-se um desafio criar um design que responda de maneira adaptável, de acordo com o dispositivo, formatando o conteúdo conforme o tamanho e o tipo. Assim, este artigo apresenta um estudo sobre as tecnologias utilizadas em design responsivo como uma alternativa para minimizar esses problemas. Inicialmente, contemplamos a metodologia utilizada neste trabalho. A subseção 3.1 contextualiza o surgimento e a ideia de alguns autores sobre design responsivo. No restante do texto, algumas técnicas de estruturação HTML e CSS serão descritas e utilizadas no desenvolvimento de uma página web que seja capaz de reorganizar o conteúdo de acordo com o tamanho e resolução da tela.

Este artigo apresenta o resultado de uma investigação científica sobre design responsivo, com o objetivo de apresentar as tecnologias que o permeiam e como é possível desenvolver páginas que se

2 2. Metodologia Para este estudo, foi realizada uma consulta bibliográfica em livros, artigos e sites. Em uma fase mais prática, um protótipo foi desenvolvido, utilizando a ferramenta Brackets, na sua versão Desenvolvimento 3.1. Design responsivo Na visão de Marcotte [2010], a arquitetura é uma disciplina muito bem definida por sua permanência, em que a fundação de um prédio define sua marca, que define sua estrutura, que forma sua fachada. No entanto, segundo o autor, trabalhar na web é algo totalmente diferente, uma vez que esse trabalho é caracterizado por sua transitoriedade, muitas vezes refinada ou substituída em um ou dois anos. Janelas com larguras inconsistentes, resolução de tela, preferências de usuários e as fontes dos usuários instaladas, são apenas alguns dos intangíveis fatos [Marcotte, 2010]. Alban [et al., 2012] analisa que é quase impossível criar versões específicas de cada website para computadores de mesa, tablets e smartphones e, por isso, é necessário uma tecnologia que possibilite adaptar automaticamente, e da melhor forma possível, diferentes conteúdos em diferentes plataformas. No estudo de França [2015], o conceito de responsivo é discutido em um aspecto mais amplo, onde várias áreas e indústrias demonstram interesse no desenvolvimento de projetos com esse conceito: desde vidros inteligentes que se tornam opacos à superfícies que reagem a voz com a música. Assim, web design responsivo é aquele web design que responde a quaisquer dispositivos/resoluções e, devido a uma série de características técnicas bem específicas, é bem apresentado em qualquer um deles [Zemel, 2012]. Para Guerrato [2014], design responsivo é um conjunto de técnicas para melhorar a experiência do usuário independente do dispositivo que ele esteja utilizando, com um único conteúdo, em um mesmo endereço e em um único código. Complementando essa ideia, Garone [2012] descreve como uma técnica de estruturação HTML e CSS onde o site se adapta ao browser do usuário, sem a necessidade de definir diversas folhas de estilos para cada resolução Técnicas de Estruturação O desenvolvimento de um design responsivo para web engloba três tecnologias principais [Zemel, 2012]: Layouts flexíveis de acordo com o autor, desde a concepção do projeto, primar pela não especificação de medidas fixas no layout do projeto, torna possível que haja uma adaptação natural e automática do que se apresenta na tela. A Figura 1 exemplifica a aplicação dessa ideia em um trecho de código HTML. Observa-se neste exemplo que, antes, o tipo de medida utilizado para definir a largura (width) da coluna era pixel (px), unidade de medida fixa mais usada em CSS [Zemel, 2012].

3 Figura 1 - Antes com layout fixo e depois com layout flexível Fonte: Zemel [2012] Para que este elemento siga o conceito da responsividade de conteúdo, é preciso adaptá-lo a uma unidade de medida que, segundo o autor, seja relativo, escalável e adaptável. Neste caso, foi atribuído um valor em porcentagem (%). Imagens e recursos flexíveis através de técnicas variadas, é possível fazer com que os recursos como imagens e vídeos, por exemplo, também sejam flexíveis para garantir que a experiência do visitante prime pela excelência [Zemel, 2012]. Uma das formas de alcançar esse objetivo é utilizando um recurso disponível em CSS, conforme exemplifica o trecho de código a seguir, na Figura 2. Figura 2 - Uso de CSS para imagens adaptáveis. Fonte: Zemel [2012]. Segundo a documentação sobre max-width do W3C [2011, apud Zemel, 2012], essa propriedade permite restringir larguras de conteúdo dentro de um determinado intervalo, que neste caso, é de 100%. Ou seja, o tamanho final dessa imagem no navegador nunca vai ultrapassar o tamanho original dela. No entanto, é válido ressaltar que, de acordo com Guerrato [2014], é necessário envelopar as imagens em um container, outra estrutura em HTML. Media Queries com esse recurso, é possível ocultar, fazer aparecer e reposicionar elementos e interações conforme a resolução atual que esteja sendo usada no momento de visitação. Segundo Marcotte [2010], um media querie permite atingir não só algumas classes de dispositivo, mas inspecionar de fato as características físicas do dispositivo que está sendo utilizado. Para o autor, isso é possível incorporando uma consulta em uma folha de estilo (CSS) ligado a um tipo de mídia, conforme ilustra a Figura 3. Figura 3 - Consulta de mídia em CSS. Fonte: Marcotte [2010].

Imagens e recursos flexíveis através de técnicas variadas, é possível fazer com que os recursos como imagens e vídeos, por exemplo, também sejam flexíveis para garantir que a experiência do visitante

4 Neste exemplo, é possível observar dois componentes, (I) o tipo de mídia (media = screen ), e (II) a funcionalidade de uma mídia particular (max-device-width) para ser pesquisada, seguido por um valor (480px). Em suma, isso quer dizer que essa consulta de mídia está perguntando se o dispositivo de resolução horizontal é igual ou menor do que 480px. Se sim, este dispositivo irá carregar o arquivo shetland.css. Caso contrário, o link será totalmente ignorado [Marcotte, 2010]. Percebe-se, portanto, que o design responsivo se mostra como uma interessante alternativa para ampliar a usabilidade no contexto da web para dispositivos móveis. A Figura 4 contempla a página desenvolvida neste estudo, utilizando as estruturas discutidas anteriormente para adaptar seu conteúdo automaticamente. Desktop Tablet Smartphone Figura 4 - Página com Design Responsivo O conteúdo foi apresentado de diferentes maneiras, conforme indicado no trabalho de Alban [et al., 2012]. Observa-se que, quando o site foi acessado por um smartphone, dispositivo que apresenta tela mais estreita, as imagens mantiveram o seu tamanho, sendo apresentadas em sequência. Isso permitiu que a experiência de uso fosse aprimorada, não afetando na usabilidade durante a interação.

Se sim, este dispositivo irá carregar o arquivo shetland.css. Caso contrário, o link será totalmente ignorado [Marcotte, 2010].

5 4. Considerações finais O design responsivo tem contribuído significativamente para a comunidade web no que diz respeito ao desenvolvimento de páginas adaptáveis, de acordo com o uso e o contexto que estão inseridas. Assim, dentre as contribuições desse trabalho, destacam-se (I) a identificação e o uso de estruturas em HTML e CSS para o desenvolvimento de web sites responsivos, e (II) a importância de prezar pela usabilidade e, consequentemente, a experiência de uso na web quando acessada por dispositivos com características distintas. 5. Referências Alban, A. et al. (2012) Ampliando a usabilidade de interfaces web para idosos em dispositivos móveis: uma proposta utilizando design responsivo. Revista Renote Novas Tecnologias na Educação, v. 10, n. 3, França, F. S. (2015) Web Design Responsivo: caminhos para um site adaptável. Interfaces Científicas Exatas e Tecnológicas, v. 1, n. 2, p , Garone, E. (2012) O que é Design Responsivo? Categoria Frontend, Princiweb Blog, Disponível em < Acesso em 02/06/2015. Guerrato, D. (2014) Design Responsivo na prática 2: do layout ao HTML. São Paulo, 28 Abr Disponível em < Acesso em 02/06/2015. Marcotte, E. (2010) Responsive Web Design. A List Apart, 25 de Maio de W3c, Consórcio World Wide Web. (2011) Padrões Disponível em < Acesso em 02/05/2015. Zemel, T. (2012) Web Design Responsivo Páginas Adaptáveis para todos os dispositivos. 1. ed. Casa do Código, 2012.

Assim, dentre as contribuições desse trabalho, destacam-se (I) a identificação e o uso de estruturas em HTML e CSS para o desenvolvimento de web sites responsivos, e (II) a importância de prezar pela

Documentos relacionados

Responsive Web Design

Responsive Web Design Professor: http://jemaf.github.com DESENVOLVIMENTO DE APLICAÇÕES WEB - INFORMATICA - COLTEC/UFMG 2014 Introdução Atualmente, a web é acessada de qualquer lugar, em qualquer dispositivo. Acesso a web: Anos