Aplicativos interativos acionados por dados com HTML5 e Ajax

HTML5 é um termo geral que designa várias tecnologias
emergentes da Web, inclusive rich media padronizada e interatividade. O
HTML5 também pode ser a base para o desenvolvimento de aplicativos
off-line robustos.

Para os desenvolvedores da Web experientes, usar o
HTML5 é mais interessante do que aprender uma linguagem compilada, como
Objective-C ou Java, mas os aplicativos em HTML5 têm a sua própria
curva de aprendizado. Vamos conferir neste artigo como combinar com êxito o
conteúdo online e, ao mesmo tempo, oferecer uma experiência rica para
usuários que não estão conectados a uma rede.

O exemplo de aplicativo

Este exemplo de aplicativo se destina a ser usado em uma ampla
variedade de dispositivos desktop e remotos. Fornece um conjunto de
receitas de alimentos e bebidas. Três receitas são estáticas e estarão
disponíveis aos usuários quando estiverem offline. Quando estiverem
online, o aplicativo poderá exibir uma “receita do dia”, fornecida por
um serviço da Web que entrega conteúdo via Ajax.

A reutilização da tecnologia é fundamental para o desenvolvimento
ágil na Web. Este exemplo de aplicativo usa duas bibliotecas bem
conhecidas de software livre:

jQuery Acesso robusto para várias plataformas ao JavaScript e ao DOM
Infraestrutura jQTouch para aplicativos remotos de HTML5 usando navegadores WebKit

Para obter melhores resultados, desenvolva aplicativos em HTML5
usando Apple Safari V4 ou posterior, embora também seja possível que o
Google Chrome funcione.

Usando o jQTouch

É melhor gerenciar aplicativos em jQTouch como documentos HTML únicos. Cada “página” do aplicativo é um <div> de HTML diferente com um atributo exclusivo de id. A estrutura básica de um aplicativo em jQTouch é assim:

Cabeçalho HTML e importações
<div> inicial
Zero página adicional ou mais como <div>s
com IDs exclusivos

Configuração das importações

A parte superior do exemplo de aplicativo importa o CSS e o JavaScript
para o aplicativo. Também configura o cache off-line de HTML5. A
Listagem 1 mostra o código necessário.

Listagem 1. Cabeçalhos necessários para o jQTouch e o HTML5 off-line

<!DOCTYPE html>
<html manifest="sample.manifest">
  <head>
    <meta charset="utf-8" />
    <title>Sample recipe application</title>
    <style type="text/css">@import "jqtouch/jqtouch/jqtouch.min.css";</style>
    <style type="text/css">@import "jqtouch/themes/jqt/theme.min.css";</style>
    <style type="text/css">@import "sample.css";</style>
    <script src="jqtouch/jqtouch/jquery.1.3.2.min.js" 
            type="text/javascript"></script>
    <script src="jqtouch/jqtouch/jqtouch.min.js" 
            type="text/javascript"></script>
    <script src="sample.js" type="text/javascript"></script>
  </head>

Habilitando o HTML5

Este exemplo de aplicativo inclui a capacidade de permanecer acessível
quando está off-line. Essa capacidade é habilitada ao incluir o atributo manifest. O valor desse atributo deve ser o caminho para o arquivo de manifesto do cache, como se mostra abaixo.

<html manifest="sample.manifest">

O manifesto de cache normalmente contém dois conjuntos de recursos:

Uma lista de recursos necessários para ser armazenados em cache para o uso off-line
Uma lista de recursos que só podem estar disponíveis quando o documento está on-line

A sintaxe do manifesto de cache é muito simples, como mostra a Listagem 2.

Listagem 2. O arquivo de manifesto de cache do exemplo de aplicativo

CACHE MANIFEST

# This is a comment and will be ignored 

# Files specific to this application:
sample.js
sample.css

# Files that are a part of jQTouch:
# (See the sample code for a complete list)
jqtouch/jqtouch/jqtouch.min.css

NETWORK:
# These resources will be available only when online:
sample.json

A primeira linha é sempre
CACHE MANIFEST. Cada recurso que pode
estar offline páginas HTML, CSS, JavaScript, imagens ou qualquer
outro tipo de arquivo é listado em uma nova linha. Quando o aplicativo
é acessado pela primeira vez, o navegador inspeciona o manifesto de
cache, faz o download de todos os recursos e os armazena para uso
offline.

Os recursos que vêm depois da linha NETWORK: não são
armazenados em cache e só podem ser acessados quando a rede está
disponível. Embora um arquivo esteja listado aqui, é possível usar nomes
de caminho parciais. Por exemplo: é possível incluir
/online/ aqui e configurar o aplicativo para que todos os recursos que só funcionam online fiquem nesse caminho.

O fato de esquecer-se de listar todos os recursos no aplicativo
como offline ou on-line geralmente faz com que todo o aplicativo não
seja identificado como habilitado para offline. Estas são outras
sutilezas nas implementações atuais que podem causar confusão:

O servidor da Web deve entregar o arquivo de manifesto como o tipo text/cache-manifest.
O arquivo que aponta para o manifesto de cache (neste exemplo, sample.html) não precisa ser listado.
Os itens listados no manifesto só serão recarregados quando você
recarregar o manifesto propriamente dito, e não quando esses recursos
mudarem.
O servidor da Web deve entregar o arquivo de manifesto com os cabeçalhos de resposta “no-cache”.
Se a página da Web faz referência a um arquivo não manifestado, o
aplicativo não é armazenado em cache para uso off-line. Com frequência,
esse erro é silencioso. No Safari V4 e posterior, verifique o painel Activity para ver se há avisos.

Se um aplicativo offline em HTML5 é configurado adequadamente,
deve ser possível acessá-lo usando um navegador e servidor uma vez e, em
seguida, desligar o servidor ou o acesso à rede local, atualizar e,
ainda assim, ser capaz de interagir com o conteúdo. Se o navegador diz
que não é possível acessar o site, verifique novamente a lista acima
para ver se há problemas de configuração.

Sobre a marcação do HTML5

O DOCTYPE simplificado pode parecer estranho aos
programadores familiarizados com DTDs e XML: o único objetivo dele é
acionar o “modo de padrões” nos navegadores da Web.

Já que os
navegadores nunca usaram validação baseada em DTD (por causa da
proliferação do HTML no estilo “sopa de tags”), não há nenhum
benefício no fornecimento de um DOCTYPE rigoroso.

Mesmo se você cria aplicativos da Web com ferramentas conscientes do XML, é possível usar
DOCTYPEs HTML V4.01 ou XHTML V1.0, mas o documento não validará totalmente por causa das extensões de HTML5.

De forma semelhante, <meta charset=”utf-8″> pode ser pouco conhecido, mas também é válido no HTML5. Ao final do artigo, consulte a seção Recursos para ver uma discussão sobre a sintaxe simplificada do HTML5.

Desenvolvendo com o jQTouch

A biblioteca do jQTouch requer várias importações:

jqtouch.min.css. O CSS para o jQTouch propriamente dito
theme.min.css. O CSS do tema atual (este exemplo usa o tema atual)
jquery.1.3.2.min.js ou posterior o jQuery propriamente dito
jqtouch.min.js. O script principal do jQTouch
samples.js. O JavaScript customizado, que define a funcionalidade exclusiva deste aplicativo

Páginas de conteúdo de jQTouch

Cada página de um aplicativo em jQTouch é, na verdade, apenas um <div> de HTML que segue algumas convenções:

Deve ter um atributo id exclusivo.
Esse ID deve ser vinculado a algum ponto do aplicativo usando um elemento de âncora normal de HTML.
A página inicial do aplicativo em jQTouch é o <div> que tem o valor de classe current.

A biblioteca do jQTouch fornece vários métodos de animar as
transições entre as páginas. Por padrão, ele usa uma interessante
transição de “swipe” usando CSS3.

Em várias implementações do WebKit, essas transições são aceleradas
pelo hardware, o que dá uma sensação natural, semelhante à de um
aplicativo. Você encontra links para essas páginas na página inicial do
aplicativo de jQTouch, como mostra a Listagem 3.

Listagem 3. A página inicial, designada pela classe com o nome “current”

<div id="home" class="current">
      <div class="toolbar">
        <h1>HTML5 Sample</h1>
      </div>
      <ul class="rounded">
        <li class="arrow"><a href="#recipe1">Breakfast Circles</a></li>
        <li class="arrow"><a href="#recipe2">Slowhand Jackson</a></li>
        <li class="arrow"><a href="#recipe3">Potato Chip Cookies</a></li>
        <li class="arrow online-required"><a href="#recipe4">Recipe of the Day</a></li>
      </ul>
    </div>

A maioria das páginas de jQTouch consiste em um <div>
externo com o seu ID exclusivo, seguido por um <div>
com o atributo toolbar que contém o título da página. O conteúdo subsequente tem a forma de uma lista ou de parágrafos adicionais.

As classes rounded e arrow
são definidas no estilo principal do jQTouch. Dependendo do tema
instalado, a aparência delas pode mudar. Este exemplo usa o tema padrão
preto e cinza, como mostra a Figura 1.

Figura 1. A página inicial do exemplo de aplicativo

As três primeiras receitas são conteúdo estático definido na mesma
página HTML5. Cada uma tem o seu ID exclusivo por exemplo: recipe1.
Esses IDs são usados para ter como destino a nova página a partir da página inicial, como se mostra aqui:

<a href="#recipe1">Breakfast Circles</a></li>

A Listagem 4 contém o código de origem dessa primeira receita. A Figura 2 mostra a renderização em HTML.

Listagem 4. Conteúdo estático em um aplicativo de jQTouch

 <div id="recipe1" class="recipe">
      <div class="toolbar">
        <h1>Breakfast Circles</h1>
        <a class="back" href="#">Back</a>
      </div>
      <ul class="rounded">
        <li>2C flour</li>
        <li>1/2C sugar</li>
        <li>1/2C confectioners sugar</li>
        <li>2T Earl Grey tea leaves (about 6 bags)</li>
        <li>1/2t salt</li>
        <li>1t vanilla</li>
        <li>1/2C butter</li>
        <li>Cold water</li>
      </ul>
      <p>
      Pulse dry ingredients in food processor to pulverize tea leaves. 
      Add vanilla, butter and pulse, adding as little water as 
      necessary to form loose dough. Divide into two 2" logs and roll 
      with parchment paper. Chill 30 min.</p>
      <p>
        Cut into 1/4"-thick wafers and bake at 375 degrees on parchment 
        until edges start to brown, about 12 min.
      </p>
    </div>

Observe que esse <div> contém um novo valor de classe: recipe. As folhas de estilo padrão do jQTouch não fornecem um bom controle de estilo sobre os elementos <p>
aninhados, que estão sendo usados aqui para as instruções da
receita.

Como o jQTouch é só um aplicativo da Web, você tem liberdade
para incluir um estilo customizado; no entanto, é conveniente usar o CSS
normal.

Nesse caso, o sample.css contém algumas customizações simples, inclusive
div.recipe p { margin: 1em; } para fornecer uma margem bonita para as instruções da receita.

Figura 2. Página inicial do exemplo de aplicativo

As três receitas estáticas estarão disponíveis para os usuários offline
porque o conteúdo das mesmas está contido na página HTML. A próxima
parte deste artigo demonstra como combinar conteúdo offline e online
para criar um aplicativo da Web extensível e flexível que fornece bons
recursos offline.

Dicas de desempenho para a Web remota

Seguindo as boas práticas gerais da Web, ponha as importações de
JavaScript na parte inferior do documento HTML, logo antes do fechamento
da tag <body>. Por uma questão de clareza, esse exemplo as põe no <head>.

Já que os dispositivos remotos têm uma sobrecarga alta de
transações de HTTP por causa de conexões wireless lentas, é recomendável
combinar vários arquivos JavaScript em uma única biblioteca. Isso é
feito por meio de uma compilação/implementação automatizada para as
pessoas, é muito mais fácil desenvolver usando bibliotecas pequenas, bem
definidas e distintas.

De forma semelhante, considere o uso de CSS sprites em vez de
várias imagens. Além disso, reduza as folhas de estilo em documentos
únicos para implementação.

Para ficar online

O último item de receita da lista, mostrado na Listagem 5, contém uma classe HTML adicional: online-required.

Listagem 5. Um item que só é mostrado quando o usuário está online

<li class="arrow online-required">
  <a href="#recipe4">Recipe of the Day</a>
</li>

Na camada de customização de CSS para esse aplicativo, .online-required está definido como display:
none. Isso significa que, por padrão, pressupõe-se que o aplicativo esteja off-line e não são mostrados recursos on-line.

Então, como o aplicativo sabe quando você está on-line? Esse
código se encontra no script de customização em JavaScript sample.js,
mostrado na Listagem 6.

Listagem 6. JavaScript para gerenciar recursos on-line

/* Initialize jQTouch on startup. 
 [ See sample code for complete listing ] */

// Standard jQuery method to run code when the browser 
// has finished loading all resources
jQuery(document).ready(function () {

  // If online, show all online-only resources
  if (window.navigator.onLine) {
    jQuery('.online-required').show();
  }
  ...

O HTML5 especifica um valor de API de Javascript window.navigator.onLine.
Quando é verdadeiro, o navegador está online e conectado a uma rede.
Quando está offline, só pode acessar recursos off-line no manifesto do
cache. Neste aplicativo, quando o aplicativo está online, todos os
elementos DOM com a classe online-required serão mostrados.

Aceitando dados online

Fornecer páginas de esqueleto para conter esses dados antecipadamente é
um método eficiente de preencher um aplicativo em jQTouch com dados
on-line. A Listagem 7 mostra o <div> da receita somente para on-line.

Listagem 7. Página de marcador do jQTouch para a receita somente on-line

<div id="recipe4" class="recipe">
  <div class="toolbar">
    <h1>Recipe of the Day</h1>
    <a class="back" href="#">Back</a>
  </div>
  <!-- The recipe will be populated here -->
</div>

Agora, no JavaScript customizado, é necessário ter um manipulador de
eventos para pedir a receita e preencher a página HTML com os
resultados. A abordagem óbvia seria definir um manipulador onclick para o ID
#recipe4.

Entretanto, o jQTouch substitui o comportamento normal de clicar
para fazer a sua “mágica” de mover de uma página para outra. Em vez
disso, é possível aproveitar o fato de que as transições de CSS3
disparam eventos de início e fim.

É possível ligar esses eventos usando o
jQuery, embora os eventos não sejam nativos do jQuery. O código é
mostrado a seguir:

jQuery('#recipe4').bind('pageAnimationStart', function () {
  ...
});

O evento pageAnimationStart dispara quase imediatamente após o evento de clique. Quando a transição termina, pageAnimationEnd dispara. Eu prefiro associar a
maioria das ações ao evento de início porque, dessa forma, o navegador
tem tempo de coletar os dados enquanto o usuário está vendo a animação.

Não está vendo a transição deslizante ou o carregamento de Ajax?

No momento em que este texto foi escrito, somente as versões 4 e 5 do
Safari e o Mobile Safari mostram a transição visual e disparam o evento pageAnimationStart. Se houver necessidade de suportar outros navegadores de WebKit, use outro evento.

Testando window.navigator.onLine

Nos navegadores da Web de desktop que não suportam o HTML5, o valor de window.navigator.onLine é invariavelmente true,
até mesmo se o computador não tem uma conexão de rede. É necessário
introduzir uma estrutura de teste que possa emular o estado offline ou o
teste usando apenas um dispositivo remoto.

Preenchendo dados via Ajax

Tudo o que resta é a interação normal em Ajax. Este exemplo pressupõe
que o formato do resultado será constituído por dados de JSON. Neste
caso, os dados vêm diretamente do arquivo de JSON sample.json,
mostrado na Listagem 8.

Listagem 8. Dados de JSON que contêm a receita do dia

[ { "title" : "Doggie Delight", "ingredients" :  \
["1 cup dry kibble", "1 pound butter",  "1 beef bouillon cube", \
"2 tbsp oregano" ], "instructions": "Combine all ingredients in bowl.\
 Season to taste. Serve immediately." }]

A Listagem 9 contém o código para tomar esses dados e preencher o <div> do marcador.

Listagem 9. Dados de JSON para preencher o marcador

jQuery.ajax({ url: "sample.json",
  success: function (data) {

    // Set the recipe title
    jQuery('#recipe4 h1').text(data[0].title);


    // Create a UL and add each recipe item to it
    var ul = jQuery('<ul class="rounded">');
    jQuery.each(data[0].ingredients, function (index, item) {
      jQuery('<li>').text(item).appendTo(ul);
    });

    // Add the ingredients list and the recipe instructions
    jQuery('#recipe4').append(ul).append(
      jQuery('<p>').text(data[0].instructions));

A Figura 3 mostra a renderização final dos dados dinâmicos.

Figura 3. A receita dinâmica em um navegador

Conclusão

A cada dia, mais dispositivos remotos chegam ao mercado. Embora seja
possível desenvolver aplicativos nativos customizados para cada
plataforma e hardware novos, existem oportunidades para que equipes
pequenas e ágeis criem aplicativos da Web remotos para várias
plataformas com características de desempenho semelhantes.

Como
protótipo de aplicativos nativos maiores ou como sites de primeira
classe, os aplicativos da Web remotos são interessantes para
desenvolvedores que já conhecem HTML, JavaScript e CSS.

As APIs de JavaScript disponíveis em HTML5 fazem que os aplicativos
da Web tenham mais acesso a dados de hardware do que nunca não só o
status da rede, mas também recursos de orientação, localização e outros.
Em vários casos, essas APIs já dispõem de um suporte amplo em
navegadores remotos bastante conhecidos.

Os desenvolvedores da Web não devem sentir que foram deixados para
trás na corrida pelo desenvolvimento de aplicativos remotos. É possível
que você já tenha todas as qualificações necessárias para desenvolver
para smartphones, netbooks e tablets.

Recursos

Aprender

Confira HTML5 para obter um vocabulário e as APIs associadas para HTML e XHTML, provenientes do W3C.
Visite WebKit para saber mais sobre o projeto de software livre e os navegadores WebKit disponíveis para várias plataformas.
Leia Building iPhone Apps
with HTML, CSS, and JavaScript para ver um excelente recurso que descreve várias técnicas de desenvolvimento de aplicativos remotos da Web.
Certifique-se de ler Dive into HTML5 para ver uma análise aprofundada e amostras práticas de código para desenvolvedores de HTML5.
Aprenda mais sobre a estrutura jQuery, indispensável para o desenvolvimento em JavaScript em todos os navegadores modernos, inclusive os remotos.
A biblioteca de jQTouch destina-se ao desenvolvimento de aplicativos da Web para Apple
iPhone, mas também funciona bem em dispositivos Android e webOS.
Confira as futuras conferências, exposições, os webcasts e outros eventos em todo o mundo que são do interesse dos desenvolvedores de software livre da IBM.
Visite a zona de software livre
do developerWorks para obter amplas informações de instruções,
ferramentas e atualizações do projeto para ajudá-lo a desenvolver com
tecnologias de software livre e usá-las com os produtos da IBM, e veja
também nossos artigos e tutoriais mais populares.
Observe e aprenda a respeito das tecnologias da IBM, de software livre e de funções de produtos com as demos gratuitas do developerWorks On demand.

Obter produtos e tecnologias

Inove o seu próximo projeto de desenvolvimento de software livre com os softwares de avaliação IBM, disponíveis para download ou em DVD.
Faça o download de
versões de avaliação de produto IBM
ou explore as avaliações on-line no Ambiente de Simulação IBM SOA e obtenha ferramentas de desenvolvimento de aplicativos e produtos de middleware de
DB2, Lotus, Rational, Tivoli e WebSphere.

***

artigo publicado originalmente no developerWorks Brasil, por Liza Daly

Liza Daly é uma engenheira de software especializada em aplicativos para
o segmento de mercado de publicações. Ela é desenvolvedora líder dos
principais produtos on-line da Oxford University Press, O’Reilly Media, e
de outros publicadores. Atualmente, ela é uma consultora independente e
fundadora da Threepress, um projeto de software livre desenvolvendo
aplicativos ebook.

De 0 a 10, o quanto você recomendaria este artigo para um amigo?