Essa semana eu tive uma tarefa bastante interessante: fazer uma versão para celular (WAP) do Shopping UOL.
Como fazer páginas para celulares, especificamente, não é uma coisa que eu costumo fazer, tive algumas dúvidas e precisei fazer algumas pesquisas. Felizmente, encontrei este documento que me serviu como uma excelente base técnica.
Uma outra versão?
Talvez você esteja se perguntando se realmente há a necessidade de se fazer uma segunda versão de alguma página só para exibí-la num celular. A resposta é: depende. =)
No caso dos celulares, existe uma série de limitações que poderão requerer que você construa uma segunda versão do seu conteúdo. Uma versão mais simples e mais leve.
Se você já ouviu (ou leu) o slogan da Sun (referindo-se ao Java): "Write once, run anywhere" e concorda com ele, deve estar meio contrariado quanto a possibilidade de uma versão alternativa para o conteúdo.
Vou destacar alguns pontos do documento do W3C que vão permitir a você, decidir por ter ou não, uma segunda versão. Por isso eu disse que depende! =)
Tipos de celulares
Se sua página visa apenas pessoas que conseguem rodar o Opera Mini em seus celulares, ótimo e fácil! O Opera Mini é uma versão do famoso navegador Opera desenvolvida para celulares.
Seguindo a mesma linha do browser versão desktop, a versão para celular segue com grande fidelidade os padrões definidos pelo W3C.
Você pode, inclusive, aplicar estilos CSS nas suas páginas. Se você aplicar o tipo de mídia "handheld" você poderá aplicar estilos CSS que vão estilizar apenas aparelhos móveis.
Se você irá atender com sua página celulares menos poderosos, com navegadores simples conhecidos por: WAP browsers, você terá algumas limitações e preocupações extras.
Tamanho da tela
Este é um fator que você precisa considerar em qualquer tipo de celular. Como você deve saber, o tamanho da tela de um celular é bem menor se compararmos com o tamanho dos monitores atuais.
Com uma tela menor, temos uma menor área útil disponível. Isto significa que textos longos, imagens grandes, terão sua visualização, e talvez até entendimento, prejudicados.
Algumas sugestões simples do documento já mencionado são bem úteis aqui (uma tradução livre e adaptada):
- Providencie apenas uma navegação simples no topo da página;
- Tenha bom senso entre ter uma página com muitos links ou ter de passar por várias páginas para alcançar um link;
- Use uma linguagem simples e clara;
- Mantenha o contexto da página relacionado somente ao que foi pedido;
- Use tamanhos relativos para definir eventuais medidas para seu documento; (salvo imagens, comentado logo mais)
- Estruture seu código (markup) de uma forma clara, lógica e válida.
Memória interna
Este fator aplica-se muito mais a aparelhos simples, com uma capacidade de memória reduzida.
Aparelhos simples alocam um espaço bastante limitado à página que será visualizada. Se a página ou conteúdo é grande demais, ele simplesmente não é exibido.
Para garantir uma exibição aceitável na maioria dos aparelhos disponíveis atualmente é aconselhável manter sua página em no máximo 20 Kb. Isso mesmo, contando as imagens.
Manter seu código simples ajuda bastante a diminuir o tamanho das páginas. Evite ao máximo o uso de tabelas!
No caso do Shopping UOL, haviam páginas com uma série de tabelas, exibindo produtos, lojas, preços e outras informações (exemplo).
A solução foi converter os dados tabulares para parágrafos claros em forma de frases (exemplo).
Erro 413???
Durante a fase de desenvolvimento, quando eu estava testando no meu celular, ao acessar uma página eu recebi um código de erro que eu nunca tinha visto: erro 413.
404, 403, 200, 302, 500, etc... Todos estes aí a maioria de nós já deve saber o que são.
O código 413 se refere a um conteúdo muito longo, provavelmente maior do que seu dispositivo suportaria.
HTML ou WML?
Uma das primeiras dúvidas que passou pela minha cabeça foi justamente essa: "vou de (X)HTML ou de WML?".
A WML é baseada na XML, assim como a XHTML.
Um parser para WML difere muito pouco (na lógica) de um para XHTML. Como isso em mente, resolvi fazer um teste. Testei uma página XHTML no celular de várias pessoas e vi que o resultado foi positivo na interpretação, resolvi seguir em frente com XHTML.
E claro, em termos de familiaridade, sou muito mais XHTML também. =)
Teste, teste e teste
Provavelmente essa é uma das maiores certezas ao se desenvolver para dispositivos móveis. Quanto mais testes, mais seguro você estará que seu conteúdo está sendo bem interpretado.
Com a imensa variedade de celulares existentes hoje no mercado, é fato que existe também uma grande quantidade de navegadores rodando nestes aparelhos.
E assim como no mundo dos navegadores desktop, alguns melhores, outros piores. Como um upgrade de navegador (ou mesmo escolher entre um ou outro) é uma coisa rara em dispositivos simples, o ideal é testar o máximo possível.
Esta página sugere alguns emuladores de navegadores para celular. Caso você não tenha como testar em vários aparelhos físicos, é prudente usar, ao menos, os emuladores.
Resumindo
Foi bem legal ter feito esta tarefa. Aproveitei para estudar e conhecer um pouco melhor a plataforma de dispositivos móveis. Lembre-se daquelas dicas sempre que for criar um documento para dispositivos móveis e também testar sempre! =)
- Referências
- Guia de boas práticas para web móvel
- XHTML
- Opera Mini
- Aplicando CSS de acordom com o tipo de mídia
- Códigos HTTP
- Testando sua página para web móvel
- Shopping UOL WAP
- Update:
Desenvolvimento de sites para dispositivos móveis no Revolução Etc
