Desta forma, este artigo apresenta o processo e as alterações realizadas no design da nova versão do Agritempo a fim de melhorar continuamente a experiência do usuário em novos dispositivos, resoluções e tecnologias

BARROSO, T. de O.

ROMANI, L. A. S.

Repository Open Access to Scientific Information from Embrapa

125Resumos: X Mostra de Estagiários e Bolsistas ...124 Resumos: X Mostra de Estagiários e Bolsistas ...Design responsivo do sistema Agritempo para multidispositivosThawnee de Oliveira Barroso¹Luciana Alvim Santos Romani²¹ Faculdade Anhanguera de Campinas2 Embrapa Informática AgropecuáriaDiante da variedade de dispositivos, com diferentes resoluções de tela, o layout de um site deve ser desenvolvido de forma a adaptar-se, automatica-mente, à resolução de tela do dispositivo em que é exibido (responsive de-sign). De acordo com Marcotte (2010), o conceito de web design responsivo refere-se à elaboração de sites que forneçam uma experiência agradável de visualização, fácil leitura e navegação com um mínimo de redimensio-namento para uma variedade de telas de dispositivos, desde desktops até telefones celulares. Este conceito tem sido cada vez mais utilizado à medida que o número de dispositivos com resoluções de telas diferentes aumenta.Neste cenário, o projeto de sistemas webs devem incluir o design para multidispositivos como um dos seus requisitos. Durante o processo de desenvolvimento da segunda versão do Sistema de Monitoramento Agrometeorológico (Agritempo), devido à necessidade de acesso a partir de diferentes dispositivos, especialmente os móveis, o código foi desenvolvido prevendo a inclusão desta facilidade. A versão do sistema possui uma boa visualização para telas de desktops e tablets. No entanto, os elementos de interface ficavam muito pequenos, dificultando a visualização das informa-ções quando acessados a partir de telefones celulares.Desta forma, este artigo apresenta o processo e as alterações realizadas no design da nova versão do Agritempo a fim de melhorar continuamente a experiência do usuário em novos dispositivos, resoluções e tecnologias.No desenvolvimento do projeto foi utilizado o Netbeans, que é um ambiente de desenvolvimento, no qual foram alterados o Central de Serviços Serpro (CSS) e HTML do código do projeto, além de acrescentar as novas regras definidas de acordo com o estudo do design responsivo. Foi aplicado o uso de Media types, que inclui ainda o uso de outras técnicas como as Media queries e o próprio CSS. A proposta consistiu em adaptar e ampliar a usa-bilidade do sistema Agritempo para ser acessível em dispositivos móveis utilizando as técnicas oferecidas pela abordagem do design responsivo. A validação do novo design foi feita a partir de simulações em dispositivos de diferentes resoluções.Como pode ser visto na Figura 1, é feita uma comparação do antigo design e do novo que foi proposto para visualização em desktop. O layout foi alterado melhorando a disposição e definindo espaço entre os elementos, deixando o design mais limpo com uma melhor visualização dos elementos de interface.Figura 1. O design antes e depois do redesign do sistema Agritempo para visuali-zação em Desktop.Figura 1. O design Antes e Depois do redesign do sistema Agritempo para visualização em Desktop.Por  outro  lado,  quando  o  sistema  Agritempo  é  visualizado  em  uma  tela  de  menor resolução, é necessário esconder alguns elementos para que os principais fiquem mais visíveis, tanto na vertical quanto na horizontal. Geralmente, alguns elementos como imagens ou vídeos não ficam bem em uma tela pequena, e o que normalmente aparece são os elementos textuais. Figura 2. Visualização do Agritempo Antes e Depois da restruturação do sistema Agritempo, para visualização em tablet.A Figura 2 ilustra o sistema em seu antigo layout ao lado do novo sendo visualizado em um tablet.  Como pode ser visto, as margens foram redefinidas e apenas duas colunas de mapas podem ser visualizadas incluindo-se a seta de navegação. O  media type que define para qual regra determinado CSS será aplicado, foi utilizado para permitir a melhor visualização do sistema em dispositivos com resolução de tela menor como é o caso dos  tablets,  ou seja, para que as páginas estejam sempre adequadas para cada tipo de visualização. Isso tende a ocorrer porque são diferentes dispositivos e tem formas diferentes de navegação. Foram  feitas  várias  simulações  que  auxiliam  na  verificação  da  implementação  em diferentes resoluções de tela.  Desta forma, é possível formatar diferentes especificações para Figura 1. O design Antes e Depois do redesign do si tema Agritempo par  visualização em Desktop.Por  outro  lado,  quando  o  si tema  Agritempo  é  visualizado  em  uma  tela  de  menor resolução, é nec ssário esconder alguns el mentos par  que os principais fiquem mais visíveis, tanto na vertical quanto na horizontal. Geralmente, alguns el mentos como imagens ou vídeos não ficam bem em uma tela pequena, e o que normalmente aparec  são s el mentos textuais. Figura 2. Visualização do Agritempo Antes e Depois da restrut ração do si tema Agritempo, par  visualização em tablet.A Figura 2 ilustra o si tema em seu antigo layout ao lado do nov  sendo visualizado em um tablet.  Como pode ser visto, as margens foram redefinidas e apenas duas colunas de mapas podem ser visualizadas incluindo-se a seta de navegação. O  media type que define par  qual regra det rminado CS  será aplicado, foi utilizado par  permitir a melhor visualização do si tema em dispositivos com resolução de tela menor como é o caso dos  tablets,  ou seja, par  que as páginas estejam sempre adequadas par  cada tipo de visualização. Isso tende a oc rre  porque são difer ntes dispositivos e tem formas difer ntes de navegação. Foram  feitas  várias  simulações  que  auxiliam  na  verificação  da  implementação  em difer ntes resoluções de tela.  Desta forma, é possível format r  difer ntes especificações par  Por outro lado, quando o sistema Agritempo é visualizado em uma tela de menor resolução, é necessário esconder alguns elementos para que os principais fiquem mais visíveis, tanto na vertical quanto na horizontal. Geralmente, alguns elementos como imagens ou vídeos não ficam bem em uma tela pequena, e o que normalmente aparece são os elementos textuais.A Figura 2 ilustra o sistema em seu antigo layout ao lado do novo sendo visualizado em um tablet. Como pode ser visto, as margens foram redefini-das e apenas duas colunas de mapas podem ser visualizadas incluindo-se a seta de navegação. O media type que define para qual regra determinado CSS será aplicado, foi utilizado para permitir a melhor visualização do siste-127Resumos: X Mostra de Estagiários e Bolsistas ...126 Resumos: X Mostra de Estagiários e Bolsistas ...ma em dispositivos com resolução de tela menor como é o caso dos tablets, ou seja, para que as páginas estejam sempre adequadas para cada tipo de visualização. Isso tende a ocorrer porque são diferentes dispositivos e tem formas diferentes de navegação. Foram feitas várias simulações que auxiliam na verificação da implementa-ção em diferentes resoluções de tela. Desta forma, é possível formatar di-ferentes especificações para cada saída, e assim desenvolver mecanismos que facilitem a leitura e acesso as informações oferecidas pelo sistema. Desta forma, reduz-se a dificuldade de visualização devido ao tamanho re-duzido das telas dos dispositivos.O Responsive Web design e as técnicas discutidas acima não são a respos-ta final para o mundo em constante mudança, particularmente dos disposi-tivos móveis. Ele é um conceito que, quando aplicado corretamente pode melhorar a experiência do usuário, e a cada solução customizada podem-se criar soluções personalizadas para um número maior de usuários, em uma ampla gama de dispositivos.Palavras-chave: Desenvolvimento web, design de interfaces, css, Agritempo.Figura 2. Visualização do Agritempo antes e depois da restruturação do sistema Agritempo, para visualização em tablet.Figura 1. O design Antes e Depois do redesign do sistema Agritempo para visualização em Desktop.Por  outro  lado,  quando  o  sistema  Agritempo  é  visualizado  em  uma  tela  de  menor resolução, é necessário esconder alguns elementos para que os principais fiquem mais visíveis, tanto na vertical quanto na horizontal. Geralmente, alguns elementos como imagens ou vídeos não ficam bem em uma tela pequena, e o que normalmente aparece são os elementos textuais. Figura 2. Visualização do Agritempo Antes e Depois da restruturação do sistema Agritempo, par  visualização em tablet.A Figura 2 ilustra o sistema em seu antigo layout ao lado do novo sendo visualizado em um tablet.  Como pode ser visto, as margens foram redefinidas e apenas duas colunas de mapas podem ser visualizadas incluindo-se a seta de navegação. O  media type que define para qual regra determinado CSS será aplicado, f i utilizado para permitir a m lhor visualização do siste a em dispositivos com resolução de tela menor como é o caso dos  tablets,  ou seja, para que as páginas estejam sempre adequadas para cada tipo de visualização. Isso tende a ocorrer porque são diferentes dispositivos e tem form s diferentes de navegação. Foram  feitas  várias  simulações  que  auxiliam  na  verificação  da  implementação  em diferentes resoluções de tela.  Desta forma, é possível formatar diferentes especificações para ReferênciasMARCOTTE, E. Responsive web design: a list apart. 2010.

Design responsivo do sistema Agritempo para multidispositivos.

Abstract

Similar works

Full text

Available Versions

Repository Open Access to Scientific Information from Embrapa