Construíndo Aplicativos em Plataforma Cruzada com HTML5

O que é um App em plataforma cruzada ? Uma aplicação que alcança seus consumidores através de qualquer dispositivo que eles tenham em sua frente, em qualquer lugar que estejam: enquanto usam um PC com Windows* no trabalho, um iPad* da Apple* em uma cafeteria ou um smarpthone Android* enquanto estão se deslocando.

Por que HTML5 ? Ao invés de tornar-se um especialista em uma grande quantidade de tecnologias – C# com APIs do Windows e Visual Studio*; Objective-C com APIs do iOS* e Xcode; Java* com APIs do Android e Eclipse*; e assim por diante – você pode se beneficiar das características de plataforma cruzada do HTML5, APIs e ferramentas. Ao invés de portar código sem necessidade, você pode focar seus esforços em coisa que realmente importam: desenvolver as funcionalidades corretas para a sua aplicação, e otimizar a experiência do usuário com ela. Além disso, como seu código está desenvolvido em HMTL5, sua aplicação vai funcionar em novos dispositivos tão logo eles sejam lançados no mercado.

Se você está usando HMTL5 hoje para criar páginas web (ou web apps) com interface rica e interativa, então você já está familiarizado com os benefícios da utilização do HTML5 como uma ferramenta para distribuir acesso através de múltiplos sistemas operacionais e navegadores. Apps em plataforma cruzada construídas com HTML5 são uma extensão lógica deste modelo, onde a plataforma não é um navegador (como o Chrome*, Safari* ou Firefox*), mas um runtime web interno (também conhecido como webview) dentro da plataforma alvo.

As apps em plataforma cruzada de hoje trazem oportunidades e desafios. A diversidade de dispositivos existentes em vários formatos continua a aumentar, com o tamanho da tela sendo um dos seus componentes chave. As apps em plataforma cruzada de hoje precisam se adaptar a esta variedade de tamanhos de tela, resoluções, proporções de tela e orientações. Os dispositivos de hoje também possuem novas características, como câmeras, acelerômetro e GPS. Apps em plataforma cruzada deveriam ter a capacidade de tirar vantagem destas capacidades de uma forma portátil para entregar uma experiência de uso rica e contextual em toda a grande gama de dispositivos.

Apps HTML5 não estão limitadas a páginas web visualizadas em um navegador. Você pode também empacotar seu código HTML5 e distribui-lo como um aplicativo nativo, instalado localmente, como um app web híbrido. Isso permite a utilização dos mesmos canais de distribuição e monetização dos apps nativos, bem como da mesma experiência de instalação e execução. Ao invés de ser executado em uma janela de nagevador dentro de uma sandbox, seu app executa em um webview em tela cheia, com controle total da tela e dos recursos do dispositivo.

Este artigo vai explicar as seguintes boas práticas para a construção de apps HTML5 em plataforma cruzada neste novo mundo centrado nos dispositivos:

Evitar APIs específicas de plataformas

Sua aplicação HTML5 só é em plataforma cruzada quando cada uma das plataformas alvo suportam todas as APIs utilizadas em seu app. Isto é importante na prática por duas razões principais:

Primeiro, simplesmente porque o fato de uma API ter sido escrita em JavaScript não significa que ela seja em plataforma cruzada. JavaScript não é mais uma ferramenta para utilização somente por navegadores padrão baseados em HTML5; ela foi transformada em uma cidadã de programação de de primeira classe por algumas das últimas ferramentas de desenvolvimento, como o Microsoft* Visual Studio*, Appcelerator* Titanium* e Node.js. Apps que utilizam uma API específica de uma plataforma, como a JavaScript Windows Runtime API no WinJS ou a Chrome* API encontrada no Google Chrome Extensions, deixam de ser aplicações em plataforma cruzada.

Segundo, como vocês que vêm do mundo web já sabem, a evolução dos padrões web é direcionada por implementações experimentais de runtime. Isto significa que as runtimes HTML5 implementas em suas plataformas alvo irão sempre suportar APIs um pouco diferentes. Funcionalidades maduras e populares convergem com o passar do tempo em novas funcionalidades lançadas continuamente. Isto é ótimo para a inovação da plataforma HTML5, mas é um transtorno para o desenvolvimento de apps. Sendo assim, aplicações HTML5 frequentemente precisam utilizar uma biblioteca de APIs em JavaScript para mascarar as diferenças entre implementações de runtime, e para cobrir as funcionalidades que estejam faltando.

Uma API importante em plataforma cruzada existente neste novo mundo centrado em dispositivos é o Apache Cordova*1  O Cordova permite o acesso à funções do dispositivo – como câmera, acelerômetro e geolocalização – de forma consistente através das diversas plataformas de dispositivos.Usando o Cordova, você pode desenvolver uma base de código HTML5 que é executado em qualquer lugar, se beneficiando de funções nativas dos dispositivos para entregar experiências de uso ricas e contextuais, mesmo quando as funções nativas dos dispositivos ainda não são acessíveis através das APIs padrão do HTML5. O Cordova permite o acesso à implementações nativas para cada plataforma operacional alvo, cuidando dos detalhes de como interfacear com aquele sistema operacional para acessar as funções de hardware que você quer. Aplicativos que utilizam o Cordova devem ser empacotados como um app web híbrido; lembrando que mesmo que seu código seja portável, sua aplicação empacotada é específica para um dispositivo. Você pode utilizar ferramentas como o Adobe PhoneGap Build* para empacotar para múltiplas plataformas simultaneamente com apenas alguns cliques. O Cordova foi implementado utilizando padrões da web, então ele pode servir como um caminho de migração para a padronização de APIs de dispositivos para runtimes de plataformas HTML5.

1 Versões antigas da Cordova API e suas bibliotecas são conhecidas como PhoneGap*. O nome PhoneGap é agora utilizado para a distribuição da Adobe do Apache Cordova.

Adaptação Dinâmica aos Parâmetros de Tela

Para ser realmente em plataforma cruzada, o seu app deve também fornecer uma boa experiência de uso através de uma grande variedade de tamanhos de tela, resoluções, proporções de tela e orientações. Existem muitas técnicas disponíveis para te ajudar a adaptar o seu código HTML5 para várias telas.

Escalonamento

De forma bem simples, você pode escalonar os componentes da sua interface de usuário (UI) de acordo com as dimensões da tela e, opcionalmente, ajustar o espaçamento ao redor dos componentes da interface, para melhor acomodar diversas proporções de tela. Você usualmente vai fazer o design para plataformas móveis primeiro, e então escalonar a partir daí, para garantir a usabilidade em telas pequenas. Também se lembre que cada dispositivo possui dois conjuntos de dimensões para o design: em modo paisagem ou retrato. Para conseguir o escalonamento, você pode utilizar as unidades relativas do CSS, ou se basear em um framework responsivo para interfaces gráficas como o jQuery Mobile ou o Sencha Touch para que façam o trabalho pesado para você.

Imagens Responsivas

Imagens podem requerer mais do que um simples escalonamento, tendo em vista que você pode querer cortar uma imagem de forma diferente ou carregar uma imagem diferente, otimizada para uma resolução específica. Por favor, leia este guia para selecionar a solução responsiva de imagem para você, e este overview descrevendo alguns padrões da web propostos para suportar imagens responsivas.

Layout Responsivo

Se a UI do seu app possui múltiplas seções, você deve considerar um layout fluído, no qual você rearranje (ou mesmo oculte seletivamente) as seções baseado no tamanho real de tela disponível. Por favor, veja estes padrões de layouts responsivos e padrões de navegação responsivos para  ideias sobre como projetar a sua própria UI responsiva. Para obter fluidez, você pode aplicar a técnica de design web responsivo, ou utilizar um dos muitos sistemas fluidos de grade para fazer o trabalho pesado para você.

Gerenciando Particularidades

Apesar de todos os esforços – utilizando APIs em plataforma cruzada e aplicando técnicas de design responsivo de interfaces gráficas – as diferenças no comportamento do runtime de cada plataforma vão complicar o desenvolvimento em plataforma cruzada. A evolução rápida do padrão HTML5 significa que não existem apenas diferenças no nível das implementações de tags HTML, atributos CSS e APIs de JavaScript, mas também que algumas destas funcionalidades se comportam de forma diferente em fução da plataforma alvo.

Por exemplo, uma reclamação comum dentro da plataforma Android é o comportamento inconsistente de reprodução de áudio e vídeo entre as diversas implementações dos fabricantes de dispositivos. Outro exemplo é o comportamento do campo de entrada de formulários HTML do tipo “datetime”, que dispara a utilização de um selecionador de data padrão em um dispositivo iOS5, mas mostra um teclado simples em um Android ou em versões mais antigas do iOS.

Algumas destas diferenças podem ser facilmente resolvidas através da utilização de APIs em bibliotecas em plataforma cruzada do JavaScript que mascaram as diferenças de implementação de runtime, como a Modernizr  Algumas inconsistências do CSS podem ser endereçadas através de ferramentas como a Normalize.css ou utilizando pré processadores CSS como o LESS e o SASS  Ainda assim, alguns problemas devem ser solucionados através do desenvolvimento de código específico para a plataforma, e neste caso você vai precisar detectar a plataforma. Uma forma de se fazer isso é através da propriedade device.name fornecida pelo Apache Cordova.

Conclusão

O que podemos esperar da Intel sobre ferramentas e recursos para o desenvolvimento de HTML5 no futuro ? A Intel está comprometida em trazer a melhor experiência possível para o desenvolvimento de aplicativos em plataforma cruzada na Arquitetura Intel. Nós vamos oferecer ferramentas e recursos para educar, treinar e suportar desenvolvedores através do Portal HTML5 da Intel Developer Zone.

A tecnologia HTML5 aplicada ao desenvolvimento de aplicativos para dispositivos é algo novo para muitos desenvolvedores. A Intel oferece um dos maiores programas para desenvolvedores de software e com da canalização de recursos através do nosso portal de HTML5, esperamos fornecer acesso aos recursos que você precisa para desenvolver e distribuir aplicativos que sejam executados em plataforma cruzada. Como um advisor com neutralidade de sistema operacional, a Intel pode oferecer recursos técnicos importantes sobre HTML5 que irão te ajudar a escrever uma vez e distribuir para múltiplas plataformas.

Para obter informações mais completas sobre otimizações do compilador, consulte nosso aviso de otimização.