Aplicativos Interativos Acionados por Dados com HTML5 e Ajax

Aplicativos da Web para várias plataformas, para uso on-line ou off-line

À medida que o número de plataformas remotas aumenta, o desenvolvimento de aplicativos para várias plataformas e baseado em padrões se torna cada vez mais interessante. O HTML5 oferece a capacidade de escrever aplicativos completos e adequados para dispositivos remotos que incluem uso off-line, da mesma forma que os seus equivalentes de aplicativos nativos. Descubra como criar aplicativos da Web com capacidade de uso off-line utilizando somente ferramentas de software livre e técnicas conhecidas pelos desenvolvedores da Web.

Liza Daly, Software Engineer and Owner, Threepress Consulting Inc.

Photo of Liza DalyLiza 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.



27/Out/2010

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. Este artigo mostra como combinar com êxito o conteúdo on-line 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 off-line. Quando estiverem on-line, 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

Consulte Recursos para obter mais informações sobre jQuery e jQTouch.

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:

  1. Cabeçalho HTML e importações
  2. <div> inicial
  3. 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

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"), o 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. Consulte Recursos para ver uma discussão sobre a sintaxe simplificada do 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 off-line — 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 off-line.

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 on-line fiquem nesse caminho.

O fato de esquecer-se de listar todos os recursos no aplicativo como off-line ou on-line geralmente faz com que todo o aplicativo não seja identificado como habilitado para off-line. 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 off-line 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.


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

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.

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
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
Página inicial do exemplo de aplicativo

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


Para ficar on-line

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á on-line
<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á on-line e conectado a uma rede. Quando está off-line, só pode acessar recursos off-line no manifesto do cache. Neste aplicativo, quando o aplicativo está on-line, todos os elementos DOM com a classe online-required serão mostrados.

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 off-line ou o teste usando apenas um dispositivo remoto.

Aceitando dados on-line

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 () {
  ...
});

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.

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.

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
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.


Download

DescriçãoNomeTamanho
Sample scriptsos-html5data-app-code-samples.zip4KB

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.
  • Para escutar entrevistas e discussões interessantes para desenvolvedores de software, confira os podcasts do developerWorks.
  • Fique por dentro dos eventos técnicos e webcasts do developerWorks.
  • Siga o developerWorks no Twitter.
  • 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.
  • A comunidade My developerWorks é um exemplo de comunidade geral de sucesso que trata de uma ampla variedade de tópicos.
  • 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

Discutir

Comentários

developerWorks: Conecte-se

Los campos obligatorios están marcados con un asterisco (*).


Precisa de um ID IBM?
Esqueceu seu ID IBM?


Esqueceu sua senha?
Alterar sua senha

Ao clicar em Enviar, você concorda com os termos e condições do developerWorks.

 


A primeira vez que você entrar no developerWorks, um perfil é criado para você. Informações no seu perfil (seu nome, país / região, e nome da empresa) é apresentado ao público e vai acompanhar qualquer conteúdo que você postar, a menos que você opte por esconder o nome da empresa. Você pode atualizar sua conta IBM a qualquer momento.

Todas as informações enviadas são seguras.

Elija su nombre para mostrar



Ao se conectar ao developerWorks pela primeira vez, é criado um perfil para você e é necessário selecionar um nome de exibição. O nome de exibição acompanhará o conteúdo que você postar no developerWorks.

Escolha um nome de exibição de 3 - 31 caracteres. Seu nome de exibição deve ser exclusivo na comunidade do developerWorks e não deve ser o seu endereço de email por motivo de privacidade.

Los campos obligatorios están marcados con un asterisco (*).

(Escolha um nome de exibição de 3 - 31 caracteres.)

Ao clicar em Enviar, você concorda com os termos e condições do developerWorks.

 


Todas as informações enviadas são seguras.


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=80
Zone=Software livre
ArticleID=556606
ArticleTitle=Aplicativos Interativos Acionados por Dados com HTML5 e Ajax
publish-date=10272010