Criando aplicativos HTML5

Usando HTML5 para criar experiências móveis

Brandon Satrom

Baixar o código de exemplo

No último mês, apresentei as consultas de mídia CSS3 (msdn.microsoft.com/magazine/hh882445), um novo módulo que permite adaptar estilos de página com base em regras condicionais. Embora as consultas de mídia tenham aplicação ampla no espectro de dispositivos, elas são frequentemente mencionadas no contexto de criar sites e aplicativos para aplicativos móveis. Isto é, a apresentação das consultas de mídia no artigo anterior foi enquadrada em torno da criação de experiências de tablet e de dispositivos móveis.

Considerando-se as dificuldades que a criação de sites e aplicativos para dispositivos móveis apresentam, não é de se admirar que as consultas de mídia tenham decolado. Em comparação com alternativas indesejáveis, como a detecção de navegador (às vezes chamada de detecção de dispositivo) e a necessidade de criar experiências para dispositivos móveis baseadas em plataformas individuais, as consultas de mídia são um verdadeiro presente. São módulos brilhantes, com certeza, e a razão pela qual escrevi a respeito no mês passado é porque você deve estar usando-os hoje.

Design para a Web responsivo revisitado

Mas a história não termina aí: As consultas de mídia CSS são excelentes, mas são apenas uma parte do que você realmente precisa para criar boas experiências para dispositivos móveis na Web. No mês passado, mencionei o termo "design para a Web responsivo", um termo cunhado por Ethan Marcotte em seu artigo precursor do mesmo nome (bit.ly/9AMjxh). Marcotte focaliza as consultas de mídia, mas também indica duas outras práticas necessárias: grades fluidas e imagens flexíveis. As consultas de mídia são os mecanismos que permitem sites adaptáveis e responsivos, mas eles são efetivos apenas quando o design do site também é responsivo e adaptável. Este mês, apresentarei algumas ideias relacionadas aos esses outros dois pilares do Design para a Web responsivo. Vou começar com uma visão geral de alguns módulos de layout de CSS existentes e futuros e, em seguida, discutirei algumas técnicas para tornar elementos não textuais, como imagens e vídeos incorporados também adaptáveis. Ao longo do caminho, indicarei algumas estruturas e bibliotecas que ajudam a adotar essas técnicas. Também mencionarei algumas estruturas populares para a criação de aplicativos Web para dispositivos móveis e concluirei com uma breve discussão sobre o uso do HTML5 para criar aplicativos "nativos". Quando terminar de ler este artigo, você terá uma base sólida para implementar design para a Web responsivo em seus próprios aplicativos.    

Grades e layouts fluidos

O uso de uma grade para design tipográfico é uma prática que tem sido usada de uma forma ou de outra há séculos, muito antes da invenção do tipo móvel. Essa estrutura de duas dimensões composta de eixos verticais e horizontais que se cruzam permite que um designer alinhe e organize elementos de uma maneira agradável visualmente, conforme ilustrado na Figura 1. No últimos anos, os designers da Web começaram a aplicar muitos dos mesmos princípios a seu trabalho digital, e várias estruturas populares, como o 960 Grid System (960.gs) e o Semantic Grid System (semantic.gs), agora tornam os layouts de grade acessíveis a todos.

Figura 1 Grade tipográfica A

No entanto, a aplicação direta de uma grade tipográfica na Web apresenta uma falha vital: os layouts de impressão são fixos, os layouts da Web não são. Além disso, muitas implementações de grade não são extremamente semânticas, o que indica que exigem a adição de marcação para definir a grade, misturando apresentação com conteúdo em suas páginas HTML.

O que nos leva à "grade fluida" de Marcotte. Para serem realmente responsivas, as grades (ou layouts) devem se adaptar às experiências em alteração. Conforme discuti no mês passado, as consultas de mídia ajudam a definir as regras para o reposicionamento dos elementos, mas, para serem efetivos, esses elementos primeiro precisam ser definidos em um contêiner fluido ou flexível. As ferramentas que mencionei anteriormente (assim como muitas outras) realmente resolvem esse problema, nativamente (a grade semântica) ou por meio do uso de uma biblioteca complementar (Adapt.js para a Grade 960 — adapt.960.gs), mas também existem módulos CSS novos e emergentes que ajudam a criar layouts fluidos.

Observe que estou tomando algumas liberdades com o termo grades fluidas de Marcotte reformulando-o como layouts fluidos. Estou reformulando o termo porque alguns dos novos módulos CSS, embora não sejam baseados em uma grade, ainda podem ajudar você a criar contêineres fluidos adaptáveis.

Vamos examinar primeiro o CSS3 Flexible Box Layout Module (ou Flexbox), que pode ser localizado no bit.ly/yguOHU. O Flexbox foi desenvolvido para ajudar você a criar contêineres de layout para elementos que posicionarão filhos automaticamente em um fluxo horizontal ou vertical e fornecerão espaçamento automatizado (Adeus ao “ul li { float: right; }”!). Esse módulo tem suporte, com prefixos do fornecedor, na Visualização da Plataforma do Internet Explorer 10, no Firefox, no Chrome, no Safari, no iOS Safari e no Android (consulte caniuse.com/flexbox para obter mais informações).

Começaremos aplicando o Flexbox ao site de galeria de fotos apresentado no mês passado. No CSS mostrado na Figura 2, você pode ver o resultado com um estilo adicionado para fins ilustrativos na Figura 3. Observe que o CSS da Figura 2 está usando apenas o prefixo de fornecedor “-ms-”. No código de exemplo disponível online (archive.msdn.microsoft.com/mag201205HTML5), incluí os prefixos de outros fornecedores (-webkit, -moz, -o), e você também deverá fazer isso em seus sites.

Figura 2 CSS para uso do módulo Flexbox

ul.thumbnails {
  width: 100%;
  background: #ababab;
  display: -ms-box;
  -ms-box-orient: horizontal;
  -ms-box-pack: center;
  -ms-box-align: center;
}
ul.thumbnails li {
  -ms-box-flex: 1;
}

Figura 3 Imagens da galeria de fotos com a aplicação do Flexbox

Isso está bom, mas na verdade é parecido com o que já tínhamos. Para ilustrar o flex no Flexbox, redimensione a janela do seu navegador ou abra a página em um emulador de dispositivo móvel ou em um dispositivo. Não há nenhuma consulta de mídia definida neste exemplo e mesmo assim o layout está um pouco mais fluido. Combine os dois módulos e você poderá criar contêineres fluidos que alinham, espaçam e alternam elementos de uma maneira responsiva. Por exemplo, você pode criar uma regra de consulta de mídia para telas menores que 480 pixels, alterar a orientação da caixa para vertical e, voilá, você terá o começo de um layout para dispositivos móveis.

O CSS Grid Layout (ou simplesmente CSS Grid), que pode ser encontrado no bit.ly/ylx7Gq, é uma especificação mais recente, enviada ao Grupo de trabalho do CSS do World Wide Web Consortium (W3C) em abril de 2011 e que atualmente está implementada apenas no Internet Explorer 10 Consumer Preview. A ideia é fornecer suporte robusto a grades nativamente no navegador. Para os desenvolvedores e os designers, o resultado é uma grade tipográfica sofisticada sem a necessidade de layouts de tabela ou a presença de marcação neutra semanticamente.

A Grade CSS permite que você defina um layout de página com linhas e colunas predefinidas, bem como regras que especificam como flui o conteúdo dentro e entre esses elementos. A primeira etapa é definir um contêiner de grade, especificando "grid" como a propriedade de exibição para elementos selecionados:

body {
  display: -ms-grid; // A vendor prefix is required.
}

Estou selecionando o elemento de corpo aqui, o que significa que minha grade preencherá o documento inteiro. Isso não é necessário, e eu poderia facilmente criar uma grade em uma seção menor da página ou até definir várias grades em uma única página. Depois de definir a grade, preciso definir o tamanhos de suas linhas e colunas:

body {
  display: -ms-grid;
  -ms-grid-rows: 50px 30% 20% auto;
  -ms-grid-columns: 75px 25px 2fr 1fr;
}

Aqui, estou especificando uma grade de quatro colunas e quatro linhas, tornando o tamanho absoluto em alguns casos (50 px, 75 px, por exemplo), relativo ao tamanho da janela para alguns (30%, 20%) e baseado automaticamente na largura de seu conteúdo (auto). Também estou usando a nova unidade do valor da fração, fr, que é definida na especificação CSS Grid como “… uma fração do espaço disponível”. Os valores da fração são calculados depois que os tamanhos fixos são atribuídos e divididos proporcionalmente entre todas as linhas e colunas definidas com esses valores. No contexto do meu exemplo, isso significa que depois que 100 pixels forem reservados para as colunas um e dois, a coluna três receberá dois-terços do espaço restante e a coluna quatro receberá um-terço.

Com a grade definida, é fácil posicionar elementos filho dentro da grade atribuindo valores de linhas e colunas, da seguinte maneira:

#main {
  -ms-grid-row: 2;
  -ms-grid-column: 2;
  -ms-grid-row-span: 2;
  -ms-grid-row-align: center;
}

Aqui, estou colocando meu elemento de corte "principal" na segunda linha e na segunda coluna da grade. Estou permitindo que esse elemento ocupe duas linhas e estou centralizando o conteúdo no contêiner. O site de Demonstração do test drive do Microsoft Internet Explorer usa sua implementação do CSS Grid Layout para criar uma implementação exata do popular site do Grid System, thegridsystem.org, e você mesmo pode conferi-lo no bit.ly/gEkZkE.

Se você já tentou algo parecido com marcação e CSS2.1, com certeza, já conhece a flexibilidade fornecida pelo CSS Grid. Além disso, quando combinado com consultas de mídia, o CSS Grid pode ser usado para criar layouts adaptáveis, que são fáceis de ajustar com menos alterações de regras à medida que os usuários ajustam o tamanho e a orientação do dispositivo.

A especificação de layout final que apresentarei é o CSS Multi-Column Layout Module, que pode ser encontrado no bit.ly/yYEdts. O CSS Multi-Column está no estado de “Candidate Recommendation” (bit.ly/x5IbJv) e tem suporte amplo em todos os navegadores, incluindo suporte planejado no Internet Explorer 10. Conforme o nome infere, o Multi-Column permite dispor colunas em uma página sem posicionamento manual ou flutuações. Tudo o que você precisa é aplicar a propriedade “column-width” (com prefixos onde necessário) em um contêiner, como a seguir:

article {
  width: 960px;
  column-width: 240px;
}

Com essa regra, os elementos do artigo serão divididos em colunas de 240 pixels, criando tantas colunas quantas o contêiner permitir (neste caso, são necessárias quatro colunas de 240 pixels para preencher o contêiner de 960 pixels). Eu também poderia usar a propriedade column-count para definir um número fixo de colunas, em cujo caso as larguras das colunas seriam distribuídas uniformemente na largura de meu contêiner.

Assim como com os módulos Flexbox e Grid, a combinação do módulo com consultas de mídia permitirá que você defina rapidamente regras simples e adaptáveis para fornecer uma experiência ideal para os usuários de dispositivos móveis.

Os três módulos que descrevi têm muito em comum, e cada um deles tem recursos que podem ser usados para criar os tipos de layout fluido que são um requisito para sites realmente responsivos. Recomendo que você pesquise e trabalhe com cada um deles para poder escolher o módulo apropriado ao solucionar um determinado desafio de layout.

Você também desejará verificar as estruturas emergentes que utilizam essas especificações. Usar uma delas pode ser uma bom ponto de partida para criar layouts fluidos para seus próprios sites. Duas estruturas eminentes são a Skeleton (getSkeleton.com) e a Bootstrap (twitter.github.com/bootstrap), um kit de início completo do Twitter. Recentemente, criei um de meus próprios sites com a ajuda da Skeleton (confira-o no html5tx.com).

Mídia responsiva

Na área do design para a Web responsivo, principalmente para dispositivos móveis, a mídia é o ponto difícil. Vamos começar com imagens. Uma das maneiras mais fáceis de definir o estilo das imagens para torná-las mais responsivas é adicionar o seguinte às suas folhas de estilo:

img {
    max-width: 100%;
  }

Essa regra sempre dimensionará suas imagens (para cima ou para baixo) para se ajustarem dentro desse contêiner pai da imagem. Assim, se os elementos de seu contêiner forem responsivos (talvez usando uma das técnicas descritas anteriormente), suas imagens também serão.

O desafio desse método é que as imagens de seu site precisarão ser grandes o suficiente para serem dimensionadas para qualquer tamanho que seja concebivelmente necessário. No site de galeria de fotos que estou usando, as imagens brutas são muito grandes e, portanto, podem ser redimensionadas.

O uso de imagens grandes redimensionáveis, no entanto, leva a um enorme problema para dispositivos móveis: à sobrecarga, e, portanto, a experiências para dispositivos móveis potencialmente inadequadas. Mesmo que você esteja redimensionando uma grande imagem para ajuste em uma janela de 320 x 240, a imagem completa é transferida para o dispositivo. Isso significa que você pode potencialmente estar enviando uma foto de 2 MB quando uma foto de 10 KB é tudo o que o dispositivo requer. No mundo dos dispositivos móveis, a largura de banda ainda é importante, portanto, a estratégia da largura do dispositivo deve ser suplantada por outras abordagens.

Infelizmente, isso ainda é um desafio, e o W3C ainda não dá suporte formal a uma abordagem específica. Existem vários métodos para lidar com imagens responsivas, mas todos caem em uma de duas categorias: ou lidam com o problema no servidor ou tentam fazer isso no cliente. Muitas abordagens de servidor, como a descrita no bit.ly/rQG0Kw, contam com o uso de imagens de espaço reservado de 1 x 1 pixel, cookies de cliente e regras de reescrita de servidor para fornecer a imagem certa para o dispositivo certo. As abordagens de cliente, como a descrita no bit.ly/tIdNYh, com frequência, utilizam JavaScript, fallbacks de <noscript>, comentários condicionais e alguns truques interessantes no CSS. As duas abordagens parecem gambiarras (pois são), mas representam o melhor que pudemos fazer com as restrições da marca <img>. No curto prazo, é conveniente você examinar as duas abordagens e decidir qual delas funciona para seus aplicativos.

A longo prazo, no entanto, talvez haja esperança. Em um artigo da Smashing Magazine, “Semânticas do HTML5” (bit.ly/rRZ5Bl), Bruce Lawson da Opera discute a adição de um elemento <picture> que se comportaria de maneira semelhante às marcas <audio> e <video>, o que significa que os desenvolvedores precisariam acessar vários elementos filho <source> dentro do <picture> pai. Quando combinado com consultas de mídia embutidas, um novo elemento <picture> pode fornecer uma boa maneira de finalmente entregar uma solução robusta para imagens responsivas:

<picture alt="cat gallery">
  <source src="nyan-high.png" media="min-width:800px" />
  <source src="nyan-med.png" media="min-width:480px" />
  <source src="nyan-low.png" />
  <!-- fallback for unsupporting browsers -->
  <img src="nyan-med.png" alt="cat gallery" />
</picture>

Embora esta solução seja comprovadamente popular, e um Grupo da comunidade do W3C tenha sido formado para ela (bit.ly/AEjoNt), não existe um grupo de trabalho formal do qual eu tenha conhecimento. Talvez vejamos esse elemento ter sucesso em tempo para o HTML6.

Existem desafios semelhantes para a adição de vídeo responsivo a sites e aplicativos, embora existam soluções mais robustas no HTML5 para vídeo do que para imagens. Para iniciantes, o elemento <source> de consulta de mídia avançada, conforme ilustrado no elemento <picture> fictício mencionado anteriormente, é válido para vídeo, conforme ilustrado aqui:

<video>
  <source src="nyan-mashup-high.webm" media="min-width:800px" />
  <source src="nyan-mashup-med.webm" media="min-width:480px" />
  <source src="nyan-mashup-low.webm" />
  <!-- Insert Silverlight or Flash Fallback here -->
</video>

Se estiver disponibilizando o vídeo em seus próprios servidores ou usando um serviço que forneça várias versões a serem inseridas, recomendo fortemente usar essa sintaxe para garantir que seus usuários tenham um vídeo amigável para o dispositivo.

Embora essa solução ajude a economizar a largura de banda dos usuários, você ainda precisará pensar sobre o dimensionamento dos elementos de vídeo inseridos, da mesma forma como o faz para imagens. Com consultas de mídia, é fácil adaptar seus elementos de vídeo com base em diferentes tamanhos de tela, mas se estiver procurando uma solução que seja um pouco mais automatizada, dê uma olhada no FitVids.js (fitvidsjs.com), um plug-in do jQuery que fará automaticamente com que seus elementos de vídeo sejam fluidos e responsivos. No entanto, lembre-se de que, como um plug-in do jQuery, essa solução não funcionará para usuários que tenham o JavaScript desabilitado.

Criando aplicativos Web para dispositivos móveis com estruturas HTML5

Agora que já cobrimos os outros dois pilares do design para a Web responsivo, layouts fluidos e imagens flexíveis, vamos falar um pouco sobre casos onde você não está apenas criando sites ou aplicativos amigáveis para dispositivos móveis, mas onde sua meta é especificamente uma experiência para dispositivos móveis.

No mundo do desenvolvimento, a área de trabalho tradicional (ou o cliente) e os paradigmas da Web deram lugar a um terceiro tipo de aplicativos, normalmente chamados de aplicativos nativos, porque são residentes em um determinado dispositivo (um smartphone baseado no Windows Phone ou no iPad, por exemplo), são desenvolvidos usando estruturas específicas ao dispositivo (iOS e Android) e são instalados por meio de uma Loja de Aplicativos ou do Marketplace.

Embora essas estruturas sejam robustas, algumas vezes os desenvolvedores da Web desejam fornecer uma "aparência nativa" a seus aplicativos Web para dispositivos móveis. Esses aplicativos ainda residem em seus servidores e podem ser entregues fora de uma Loja de Aplicativos ou do Marketplace.

Embora certamente seja possível criar esses tipos de aplicativos manualmente, é comum usar estruturas para isso. Uma opção popular para aplicativos Web para dispositivos móveis é o jQuery Mobile (jquerymobile.com), uma estrutura de desenvolvimento para dispositivos móveis que fornece um sistema de interface de usuário baseado no HTML5 para quase qualquer plataforma de dispositivos móveis. A Figura 4 mostra um exemplo do aplicativo para dispositivos móveis do OpenTable.com, que foi criado usando a interface do usuário do jQuery.

Figura 4 Uma tela de dispositivo móvel de exemplo criada com o jQuery Mobile

Outra opção popular para a criação de aplicativos para dispositivos móveis com uma aparência nativa é o Kendo UI Mobile (kendoui.com), uma estrutura de HTML5, JavaScript e CSS da Telerik Inc. O Kendo UI permite criar aplicativos para dispositivos móveis, que parecem totalmente nativos em dispositivos baseados no iOS e no Android, e fazer isso com uma única base de código. A Figura 5 e a Figura 6 mostram esse recurso em ação, que você mesmo pode conferir no bit.ly/wBgFBj.

Figura 5 Um aplicativo de demonstração do Kendo UI Mobile em um dispositivo baseado em iOS

Figura 6 Um aplicativo de exemplo do Kendo UI Mobile em um dispositivo baseado em Android

Criando aplicativos nativos com o HTML5

O fornecimento de uma aparência nativa a aplicativos Web é uma boa maneira de não apenas utilizar suas habilidade de desenvolvedor da Web, mas de criar aplicativos em conformidade com as expectativas dos usuários em uma configuração para dispositivo móvel. Ainda assim, esses aplicativos podem ir apenas até a utilização de APIs e sensores nativos nesses dispositivos. Enquanto alguns recursos, como a localização geográfica, são fornecidos para navegadores de dispositivos móveis, muitos como o acelerômetro ou o vídeo, não são. Para acessar esses recursos, os aplicativos nativos ainda são o caminho a seguir.

No entanto, a grande novidade é que a popularidade da programação da Web habilitou que o HTML5, o JavaScript e o CSS se “tornassem nativos”, de certo modo. Estruturas populares, como o PhoneGap (phonegap.com) e o Titanium Appcelerator (appcelerator.com) permitem usar o HTML5 e o JavaScript para criar aplicativos nativos para iOS, Android e Windows Phone, com acesso à API do dispositivo para inicialização. Além disso, as estruturas de desenvolvimento para dispositivos móveis, como o jQuery Mobile e o Kendo UI Mobile, funcionam tão bem nesses ambientes como no navegador. A Figura 7 mostra um aplicativo iOS nativo criado com o PhoneGap e o Kendo UI. Para obter mais informações, consulte a postagem no blog bit.ly/zpIAPY.

Figura 7 Um aplicativo iOS criado com HTML, JavaScript e CSS

A Microsoft levou o desenvolvimento da Web nativo para um novo nível, adicionando formalmente suporte para a criação de aplicativos do Windows 8 com o uso do HTML5, do JavaScript e do CSS, tudo sem a necessidade de abstrações ou estruturas adicionais. Você pode conferir o Consumer Preview do Windows 8, bem como as novas ferramentas para desenvolvedores para essas plataformas, no dev.windows.com. 

No que diz respeito à Web para dispositivos móveis, você tem opções! Se você for um programador da Web que deseje criar experiências nativas, completas com recursos com realidade aumentada, confira o Windows 8 ou uma estrutura como o PhoneGap ou o Titanium Appcelerator. Se estiver procurando apenas uma aparência nativa no navegador, examine o jQuery UI e o Kendo UI Mobile. Finalmente, se seu objetivo for criar um único site ou aplicativo Web que responda a muitos dispositivos e experiências, tente as estratégias responsivas que discuti neste e no artigo do mês passado. Não há dúvida de que os dispositivos móveis são uma das plataformas mais interessantes para o desenvolvimento atualmente. Sua melhor opção, independentemente das estratégias ou plataformas que você escolher, é tornar o desenvolvimento de dispositivos móveis sua principal prioridade.

Brandon Satrom é gerente de produto do Kendo UI (kendoui.com), um conjunto de ferramentas para HTML5 e para dispositivos móveis fornecido pela Telerik. Ele mantém um blog em userinexperience.com, pode ser acompanhado no Twitter em twitter.com/brandonsatrom e está freneticamente escrevendo o livro “Building Metro Style Apps for Windows 8 in JavaScript” com Chris Sells.

Agradecemos aos seguintes especialistas técnicos pela revisão deste artigo: Jon Box, Burke Holland e Clark Sell