Post

jul
23

Os modernas aplicativos web de hoje precisam estar devidamente preparados para atender ao público em sua totalidade. Isso que dizer que a solução web precisa estar acessível para ser usada em navegadores de desktops e, principalmente, nos navegadores dos modernos dispositivos móveis, como smartphones e tablets, que se infiltram cada dia mais no cenário das corporações.

O fator complicador dessa nova tendência é que a filosofia de usabilidade de aplicações web nos navegadores móveis é completamente diferente da usabilidade de um navegador desktop. Mesmo os dispositivos móveis hoje tendo uma alta capacidade computacional, eles se diferem em dois aspectos chaves:

  1. Monitores reduzidos
  2. Estimulo de ação e digitação baseada em touchscreen.

Isso quer dizer uma mesma solução desenvolvida para ser utilizada no navegador do desktop pode ter seu uso totalmente impraticável em dispositivos móveis. É justamente o que tem acontecido na maioria das vezes. Temos dispositivos com alta capacidade computacional e conexão 3G, mas, quando você entra em uma solução web, logo de início percebe que fica impraticável ficar gerenciando zoom nos monitores reduzidos e usando touch para disparar as ações. Quem ainda não passou por isso?

Problemas básicos

Interface gráfica web para navegadores de dispositivos móveis não pode ser grande nem complexa, e os componentes de ações devem ser maiores com espaçamento significativo entre eles. Tudo isso tem o objetivo de gerar facilidade no momento de disparar as ações via touch. Outro fator é que essas interfaces devem ser resumidas, oferecendo objetividade no acesso e a leitura para as informações dentro do contexto da solução. Veja neste artigo (?)os pontos problemáticos de usabilidade.

E é péssimo abrir site que não esteja otimizado para mobile. Mesmo nos smartphones mais modernos com telas maiores que permitem abrir sites normais, não há dúvidas de que um site não otimizado para mobile traz uma pior experiência para o usuário. E isso prejudica suas vendas, trata mal potenciais clientes e até afeta negativamente sua marca.

Como resolver?

O responsável por uma solução web hoje deve implicitamente considerar tal requisito e assim preparar sua solução para atender a essa demanda de navegadores móveis. É justamente sobre isso que eu gostaria de falar hoje. No geral, temos duas abordagens parar resolver tal questão:


Abordagem 1 – Construir uma única camada de apresentação híbrida

Criar uma única camada de apresentação na solução para ambos os navegadores, fazendo as interfaces gráficas se comportarem especificamente quando forem acessadas por navegadores de dispositivos móveis. Quando um dispositivo móvel acessar as páginas da solução, será necessário ter certa “inteligência” que aplique algumas mudanças nas páginas como redução de layout, não envio de algumas imagens mais pesadas, maior separação entre os botões de ação e até troca de alguns componentes por outros mais intuitivos.


Pontos positivos

  • A solução terá uma única camada de apresentação.
  • Atualização única para todos os usuários.


Pontos negativos

  • Aumento da complexidade na camada de visão nessa “inteligência híbrida”.
  • Algumas páginas podem apresentar limitações que compliquem a customização justamente pelo próprio contexto do negócio ou da usabilidade da solução.  Esses limitadores podem impedir alguma customização, gerando desconforto para usuário final.


Como resolver isso arquiteturalmente?

Não existe segredo! A camada de visão necessitará ser “costurada” com decisões que gerem as mudanças adequadas que melhor customizem as páginas quando um navegador de dispositivo móvel as estiver acessando.

Abordagem 2 – Criar duas camadas de apresentação

Nesta abordagem, é criada uma camada de apresentação na solução exclusiva para cada um dos ambientes – uma para desktop e outra para os navegadores móveis. Quando o usuário acessar a página de entrada, a solução 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 experiência em usabilidade.
  • Otimização de performance por menos latência de trafego HTTP com paginas 100% customizadas.


Pontos negativos

  • Duas versões diferentes de camada de apresentação na mesma solução.
  • Manutenção duplicada.
  • Novas funcionalidades devem ser projetadas, implementadas e testadas duplicadamente nas duas camadas.


Como resolver isso arquiteturalmente?

Construa uma versão diferente de cada interface gráfica de todos os processos oferecidos pela solução:

  • Uma para o navegador desktop sem limites e sem restrições.
  • Uma para o navegador móvel com layout bem mais simples, com menos recursos, mais objetiva e com separação razoável entre os componentes visuais.

Reuso de regras de negócio

O objetivo é dar manutenção em duas interfaces gráficas diferentes, mas a regra de negócio de ambas é a mesma e dever ser totalmente reutilizável. Para alcançar isso, adicione uma camada lógica de serviço usando o padrão Facade[GOF] entre as camadas de visões e a camada de negócio da solução, não permitindo dependência direta entre elas. Com essa camada de serviço, é possível centralizar os comportamentos comuns de ambas camadas de apresentação, na interação com a camada de negócio. Isso que dizer que qualquer manutenção das regras e/ou processo de negócios serão propagados para ambas as camadas de visão.

Reuso de autenticação e autorização

Mesmo tendo duas camadas de apresentação, as regras de autenticação e autorização também continuam as mesmas. O mecanismo de autenticação e autorização da solução deve ser projetado de forma flexível para que possa reconhecer que ambas camadas de visão estão debaixo das mesmas “regras de credencialidade”.

Paradigma das páginas para dispositivos móveis

Temos hoje duas vertentes diferentes de paradigmas para a filosofia de construção das páginas web para dispositivos móveis.


Páginas otimizadas

As páginas são construídas para os dispositivos móveis iguais a uma página HTML padrão. O único diferencial é que elas são otimizadas, simples, com menos código, layout, poucas ou sem imagens, css simples e com javascript básico.


Páginas Look Feel nativas

As páginas são construídas aparentando serem interfaces gráficas desktop da própria plataforma móvel. Ou seja, as páginas aparentam ser aplicações nativas, utilizando todos os componentes específicos e a forma de usabilidade totalmente voltada para os monitores otimizados. Provedores de componentes JSF 2.0 já identificaram essa nova abordagem de solução é já estão fornecendo componentes 100% automáticos. Veja alguns exemplos:

RichFaces Mobile

PrimeFaces Mobile

Da mesma forma, já existem vários frameworks javascript oferecendo também componentes prontos para criar aplicações web mobile. Segue os destaques:

JQuery Mobile

Sencha Touch

Dojo Mobile

Na verdade, todas elas são simples páginas HTML puras com algumas imagens, css e javascript que “simulam” as funcionalidades equivalentes a aplicações nativas instaladas no próprio aparelho móvel. Dessa forma, é possível entregar uma solução web com a aparência e a usabilidade de uma aplicação nativa.

Texto por Fernando Franzini

  1.  

    |