Como visto no artigo anterior, páginas desenvolvidas para dispositivos móveis têm características singulares e diversos quesitos a serem seguidos no momento de confeccioná-las. Um destes critérios é o DOCTYPE adequado, que permite tanto a correta renderização das páginas quanto a validação e mensuração das mesmas.

O Doctype correto para WAP

Os navegadores de dispositivos móveis são mais exigentes. As páginas devem ser construídas como XHTML strict, ou seja, não há tolerâncias para tags que não pertençam mais ao XHTML. Fazemos esta indicação através de um Doctype específico para WAP que é utilizado, inclusive, pelas ferramentas de depuração para avaliar se o site contém erros de marcação e semântica. O Doctype a ser utilizado é o seguinte:

<?xml version="1.0"?> <!DOCTYPE wml PUBLIC "-WAPFORUMDTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml&quot;&gt;

Sem esta declaração no topo do documento, alguns navegadores nem ao menos abrem a página.

Testando e validando sua aplicação

Uma questão importante é saber de fato como o seu website irá aparecer nos dispositivos móveis. Quando eu acreditava que apenas um CSS era suficiente para fazer de um site mobile-friendly, testava apenas mudando o media-type e reduzindo o tamanho da janela do navegador. Ledo engano.

A renderização irá depender dos dispositivo, do navegadores e da resolução utilizados. Além disso, é preciso avaliar questões como o custo e tempo do carregamento. Mas como?

O site ready.mobi, que me forneceu embasamento para o artigo anterior, possui uma ferramenta de mobile-checker. Ela avalia o custo, o tamanho da página, fornece um ranking (de 0 a 5) e aponta acertos e erros baseados em determinadas premissas como a semântica do código, uso de folhas de estilos, configurações de performance, etc. Além disso, ele possui um simulador onde é possível testar sua aplicação em aproximadamente 5 aparelhos distintos.

Não podemos esquecer também o OperaMini, que ganhou um artigo há mais de dois anos aqui no meu blog. O simulador do OperaMini - navegador presente em diversos aparelhos - permite testar sua aplicação como se estivesse realmente utilizando a interface de um celular.

Adobe Device Central

Mas o destaque maior dentre as ferramentas que já utilizei vai para o Adobe Device Central, software presente a partir do Creative Suite 3, que possui integração com o Dreamweaver e permite testar em centenas de aparelhos de diversos fabricantes com resoluções diferentes, com direito até à skin do celular que está sendo utilizado. Com esta ferramenta, é possível ver claramente as discrepâncias na renderização das páginas web de acordo com o aparelho.

Outros simuladores

Para quem busca softwares que simulam outras plataformas de mobile, sugiro os sites da Nokia, BlackBerry e Windows Mobile, que possuem até mesmo alguns SDKs para desenvolvimento e outros tipos de aplicativos. Para o iPhone e iPod Touch, a renderização das páginas em mobile é normal utilizando o Safari, pois ele é capaz de dar zoom nos elementos a serem interagidos pelos usuário. Entretanto, você pode fazer o download do SDK para iPhone e desenvolver executáveis para o aparelho, mas precisará ter um Mac.

Validando o código segundo o W3C

Há agum tempo atrás, o W3C possuia apenas as diretrizes para mobile, mas não havia desenvolvido um validador específico para este fim.

Mas recentemente foi inaugurado o W3C Mobile Checker, que possui a mesma função do validador padrão de XHTML. Diferentemente do ready.mobi, que segue as diretrizes do W3C para realizar a validação, o Mobile Checker "oficial" é muito mais rigoroso, porém, completo.

Bom, pessoal, ficam aí as dicas das principais práticas para quem deseja se aventurar neste pequeno mundo móvel, que ainda tem muito a oferecer e modificou a maneira de se pensar sobre web.

Referências

Ready.mobi

CYBIS, W, et.al. Ergonomia e Usabilidade: Conhecimento, Métodos e Aplicações. São Paulo: Novatec Editora, 2007.

Artigo Original:
Webdesign Experience - Websites para mobile não são miniaturas dos sites convencionais - parte II

Linha de Código - Introdução à tecnologia WAP