Jean Carlo Emer

Hipermídia as Avessas

Tive o prazer de palestrar no primeiro Mobile Brazil Conference junto com o Marcelo Oliveira. Quando do convite, soube que o assunto deveria ser desenvolvimento web mobile e com base na definição de Hipermídia logo chegamos no título. Hipermídia as avessas são os desafios, meios e técnicas de se entregar uma única mídia para diferentes suportes computacionais.

Existem vários dispositivos que podem ser alcançados por uma hipermídia: desktops, laptops, impressoras, TVs, smartphones e tablets só para citar alguns. Além disto, não são apenas os browsers o meio: aplicativos como Apple Store, Netflix e o Steam são escritos em HTML5. Mas a maior revolução da nossa era, sem ter como negar, é o mobile: dispositivos pequenos e de fácil locomoção. Eles é que serão foco principal do nosso estudo.

Aqui estão os slides da palestra e o vídeo. Pule para responsive design ou vá direto para o passo a passo final caso interessar. Continue a leitura por aqui para acompanhar o assunto na íntegra.

Mobile

O aparelho que foi o marco da web mobile (mesmo tendo muitos outros aparelhos e experimentos anteriores) foi o iPhone da Apple. Muito daquilo que temos hoje foi definido pela própria Apple antes mesmo de o telefone ser lançado. É claro que existia todo um suspense em torno do lançamento e por isso as documentações e especificações foram deixadas de lado. O resultado é que, no início, desenvolvedores utilizavam soluções em seus sites sem ter certeza alguma de seu funcionamento.

Uma característica bastante interessante é que o iPhone foi desenvolvido para desfrutar da mesma experiência de navegação de um desktop ou laptop. A intenção nunca foi a de utilizar o protocolo WAP, por exemplo. E isto é ótimo: "A web é de todos e para todos".

Mobile Viewport

Na época do seu lançamento, o aparelho tinha resolução de 320x480 e a maioria dos websites tinha seu layout definido com base numa resolução de 1024x768.

A solução para que o usuário tivesse uma visão completa do website à primeira vista foi definir uma resolução de viewport diferente do tamanho do display. Então, com base na maioria dos websites da época, a viewport do aparelho possui configuração inicial com largura de 980px. Os websites que não ficam adequados podem indicar uma diferente largura através da meta tag viewport a seguir.

<meta name="viewport" content="width=1024">

Pinch Zoom

O pinch zoom (ou pinch to zoom) é a principal ferramenta do usuário para driblar os pequenos displays aproximando a visualização para porções da página. A ferramenta, ativada por gesto, já vem habilitada por padrão e desabilitá-la não é uma boa prática pois os usuários já estão bastante acostumados e esperam poder utilizá-la.

Apenas desabilite o pinch zoom em jogos ou webapps que permitem interações com dois ou mais dedos através da meta tag a seguir.

<meta name="viewport" content="user-scalable=no">

Desafios da web plural

A tarefa de disponibilizar para uma gama de dispositivos o mesmo conteúdo traz consigo alguns desafios:

A técnica para enfrentar estes e mais desafios você conhece em Hipermídia as avessas: Responsive Design.