http://imasters.com.

br/artigo/24256/mobile/nova-tendencia-de-aplicativos-moveis-web

Nova tendncia de aplicativos mveis web

Os modernas aplicativos web de hoje precisam estar devidamente preparados para atender ao pblico em sua totalidade. Isso que dizer que a soluo web precisa estar acessvel para ser usada em navegadores de desktops e, principalmente, nos navegadores dos modernos dispositivos mveis, como smartphones e tablets, que se infiltram cada dia mais no cenrio das corporaes. O fator complicador dessa nova tendncia que a filosofia de usabilidade de aplicaes web nos navegadores mveis completamente diferente da usabilidade de um navegador desktop. Mesmo os dispositivos mveis hoje tendo uma alta capacidade computacional, eles se diferem em dois aspectos chaves: 1. Monitores reduzidos 2. Estimulo de ao e digitao baseada em touchscreen. Isso quer dizer uma mesma soluo desenvolvida para ser utilizada no navegador do desktop pode ter seu uso totalmente impraticvel em dispositivos mveis. justamente o que tem acontecido na maioria das vezes. Temos dispositivos com alta capacidade computacional e conexo 3G, mas, quando voc entra em uma soluo web, logo de incio percebe que fica impraticvel ficar gerenciando zoom nos monitores reduzidos e usando touch para disparar as aes. Quem ainda no passou por isso?

Problemas bsicos Interface grfica web para navegadores de dispositivos mveis no pode ser grande nem complexa, e os componentes de aes devem ser maiores com espaamento significativo entre eles. Tudo isso tem o objetivo de gerar facilidade no momento de disparar as aes via touch. Outro fator que essas interfaces devem ser resumidas, oferecendo objetividade no acesso e a leitura para as informaes dentro do contexto da soluo. Veja neste artigo (?)os pontos problemticos de usabilidade.
E pssimo abrir site que no esteja otimizado para mobile. Mesmo nos smartphones mais modernos com telas maiores que permitem abrir sites normais, no h dvidas de que um site no otimizado para mobile traz uma pior experincia para o usurio. E isso prejudica suas vendas, trata mal potenciais clientes e at afeta negativamente sua marca.

Como resolver?
O responsvel por uma soluo web hoje deve implicitamente considerar tal requisito e assim preparar sua soluo para atender a essa demanda de navegadores mveis. justamente sobre isso que eu gostaria de falar hoje. No geral, temos duas abordagens parar resolver tal questo:

Abordagem 1 Construir uma nica camada de apresentao hbrida

Criar uma nica camada de apresentao na soluo para ambos os navegadores, fazendo as interfaces grficas se comportarem especificamente quando forem acessadas por navegadores de dispositivos mveis. Quando um dispositivo mvel acessar as pginas da soluo, ser necessrio ter certa inteligncia que aplique algumas mudanas nas pginas como reduo de layout, no envio de algumas imagens mais pesadas, maior separao entre os botes de ao e at troca de alguns componentes por outros mais intuitivos. Pontos positivos
A soluo ter uma nica camada de apresentao. Atualizao nica para todos os usurios.

Pontos negativos
Aumento da complexidade na camada de viso nessa inteligncia hbrida. Algumas pginas podem apresentar limitaes que compliquem a

customizao justamente pelo prprio contexto do negcio ou da usabilidade da soluo. Esses limitadores podem impedir alguma customizao, gerando desconforto para usurio final. Como resolver isso arquiteturalmente? No existe segredo! A camada de viso necessitar ser costurada com decises que gerem as mudanas adequadas que melhor customizem as pginas quando um navegador de dispositivo mvel as estiver acessando.

Abordagem 2 Criar duas camadas de apresentao

Nesta abordagem, criada uma camada de apresentao na soluo exclusiva para cada um dos ambientes - uma para desktop e outra para os navegadores mveis. Quando o usurio acessar a pgina de entrada, a soluo identificar o navegador corrente e redirecionar para determinada camada A ou B. Essa a abordagem mais usada hoje pelos grandes players do mercado. Pontos positivos
Melhor experincia em usabilidade. Otimizao de performance por menos latncia de trafego HTTP com

paginas 100% customizadas. Pontos negativos

Duas verses diferentes de camada de apresentao na mesma soluo. Manuteno duplicada.

 Novas funcionalidades devem ser projetadas, implementadas e testadas

duplicadamente nas duas camadas. Como resolver isso arquiteturalmente? Construa uma verso diferente de cada interface grfica de todos os processos oferecidos pela soluo:
Uma para o navegador desktop sem limites e sem restries. Uma para o navegador mvel com layout bem mais simples, com menos

recursos, mais objetiva e com separao razovel entre os componentes visuais.

Reuso de regras de negcio

O objetivo dar manuteno em duas interfaces grficas diferentes, mas a regra de negcio de ambas a mesma e dever ser totalmente reutilizvel. Para alcanar isso, adicione uma camada lgica de servio usando o padro Facade[GOF] entre as camadas de vises e a camada de negcio da soluo, no permitindo dependncia direta entre elas. Com essa camada de servio, possvel centralizar os comportamentos comuns de ambas camadas de apresentao, na interao com a camada de negcio. Isso que dizer que qualquer manuteno das regras e/ou processo de negcios sero propagados para ambas as camadas de viso.

Reuso de autenticao e autorizao

Mesmo tendo duas camadas de apresentao, as regras de autenticao e autorizao tambm continuam as mesmas. O mecanismo de autenticao e autorizao da soluo deve ser projetado de forma flexvel para que possa reconhecer que ambas camadas de viso esto debaixo das mesmas regras de credencialidade.

Paradigma das pginas para dispositivos mveis

Temos hoje duas vertentes diferentes de paradigmas para a filosofia de construo das pginas web para dispositivos mveis. Pginas otimizadas As pginas so construdas para os dispositivos mveis iguais a uma pgina HMLT padro. O nico diferencial que elas so otimizadas, simples, com menos cdigo, layout, poucas ou sem imagens, css simples e com javascript bsico.

Pginas Look Feel nativas As pginas so construdas aparentando serem interfaces grficas desktop da prpria plataforma mvel. Ou seja, as pginas aparentam ser aplicaes nativas, utilizando todos os componentes especficos e a forma de usabilidade totalmente voltada para os monitores otimizados. Provedores de componentes JSF 2.0 j identificaram essa nova abordagem de soluo j esto fornecendo componentes 100% automticos. Veja alguns exemplos: RichFaces Mobile Projeto - https://community.jboss.org/wiki/GettingStartedWithMobileRichFaces Execute em um navegador de dispositivo mvel - http://showcase.richfaces.org/phoneHome.jsf#home PrimeFaces Mobile http://www.primefaces.org/showcase-labs/mobile/index.jsf Execute em um navegador de dispositivo mvel - http://www.primefaces.org/showcase-labs/mobile/showcase.jsf? javax.faces.RenderKitId=PRIMEFACES_MOBILE Da mesma forma, j existem vrios frameworks javascript oferecendo tambm componentes prontos para criar aplicaes web mobile. Segue os destaques: JQuery Mobile Framework JavaScript - http://jquerymobile.com/ Execute em um navegador de dispositivo mvel http://jquerymobile.com/demos/1.1.0-rc.1/ Sencha Touch http://www.sencha.com/learn/touch/ Dojo Mobile http://dojotoolkit.org/features/mobile Na verdade, todas elas so simples pginas HTML puras com algumas imagens, css e javascript que simulam as funcionalidades equivalentes a aplicaes nativas instaladas no prprio aparelho mvel. Dessa forma, possvel entregar uma soluo web com a aparncia e a usabilidade de uma aplicao nativa.