Eles reclamaram que o site não está sendo atualizado desde janeiro de 2011 e que algumas consultas poderiam ser prejudicadas por isso.

Resolvi encarar o desafio de fazer algo similar e que atendesse as necessidades de todos. Nasceu o Onde tem sinal ?.

Usando a API do Google Maps e os dados provenientes do site da Anatel (depois vou fazer um post contando essa aventura.), consegui deixar a aplicação funcional.

Ainda é necessário alguns ajustes, melhorias de performance, mas acredito que já atenda bem o propósito da ferramenta. Em breve vou lançar o código no Github e aviso aqui.

Comentem, digam o que acharam, sugiram melhorias, critiquem os problemas.

Ontem resolvi essa pendência. Publiquei meu primeiro aplicativo na Chrome Web Store, o Tarefas (baseado no tutorial que publiquei sobre IndexedDb).

É um app simples, para gerenciar suas tarefas e que funciona totalmente offline. Como será utilizado apenas no Chrome, não precisei me preocupar com compatibilidades cross-browser.

Instale e dê seu feedback. Gostaria de receber sugestões, críticas, reclamações, etc… Usem os comentários abaixo ou os reviews da Web Store para deixar sua opinião.

Infelizmente o anúncio concretizou-se (apesar dos protestos de usuários) e ficamos sem o nosso querido Google Reader.

Como sou antiquado e resistente à mudanças (algo inconcebível para quem trabalha com computação), resolvi criar meu próprio leitor de feeds. Agora apresento à vocês o MyReader.

Ainda estou no começo. Fiz às pressas no última final de semana, pois o dia 01/07 (data de desligamento do Google Reader) estava chegando.

Nesse momento o serviço não permite multiusuários e nem registra o que você já leu. Mas estou trabalhando arduamente nisso e espero contar com a colaboração de quem, assim como eu, gostava do Google Reader.

O código está disponível no meu GitHub. Sinta-se à vontade para contribuir, sugerir, criticar. Se você não tiver os conhecimentos necessários para ajudar no desenvolvimento, ajude com idéias, utilize os comentários aqui no blog para deixar sugestões/críticas.

Foram apenas 9. 5 querendo aprender e 4 (contando comigo) que já meteram a mão na massa. Então, pensando nisso, resolvi criar um manualzinho bem básico sobre como criar um ChromeApp.

Muitos desenvolvedores acreditam que aqueles ícones que aparecem em uma nova guia do Chrome são apenas atalhos para sites e/ou aplicações na web. Mas neste manual, você irá aprender como fazer uma aplicação que rode localmente, sem a necessidade de conexão com a internet.

Para que não percamos muito tempo pensando no que desenvolver (acredito que seja a parte mais difícil, a idéia) vamos usar a aplicação que criei no post Gerenciando suas tarefas com HTML5, IndexedDB, CSS3 e jQuery (você pode baixar os arquivos originais pelo meu Github).

Com os arquivos na sua máquina vamos começar pelo principal responsável pelo funcionamento do nosso App, o arquivo de manifesto. Vamos utilizar uma versão bem básica desse arquivo, mas você pode conhecer mais a fundo o que é possível fazer direto no Google Developers. Toda extensão, app ou tema deve utilizar o arquivo manifest.json (para saber mais sobre json, leia o ótimo artigo do Tárcio Zemel, JSON – JavaScript Object Notation). Abaixo o código da nossa aplicação.

{
    "name": "Tarefas",
    "description": "Gerenciamento de Tarefas",
    "version": "1.0",
    "manifest_version": 2,
    "offline_enabled": true,
    "icons": {
        "128": "img/128.png"
    },
    "app": {
        "launch" : {
            "local_path": "index.html"
        }
    }
}

Acredito que este arquivo seja totalmente auto-explicativo. Lembrando que ele deve ficar no diretório raiz da aplicação.

Feito isso, vamos ao passo a passo para habilitar o nosso app no Chrome.

1. Abra uma nova guia no Chrome e digite na Omnibar: chrome://extensions/;
2. Caso não esteja marcado, marque a opção “Modo do desenvolvedor”;
3. Clique no botão “Carregar extensão expandida…”;
4. Selecione o diretório onde você salvou os arquivos do app;
5. Abra uma nova guia com os Apps instalados e verifique o último da lista;

Fácil não ?

Caso você queira apenas criar um atalho para o seu site, basta trocar a linha “local_path”: “index.html” para "web_url": "http://blog.marlonpacheco.com.br/".

Se você quiser criar uma aplicação para disponibilizar na Chrome Web Store, basta fazer um cadastro de desenvolvedor e incluir os seus Apps (lembrando que há uma taxa única de US$ 5,00 para publicar seus apps).

O que achou do post ? Ajudou você ? Tirou suas dúvidas ? Se tiver dúvidas, críticas, sugestões fique a vontade nos comentários.

Aqui você pode ver o exemplo em funcionamento e fazer o download do código fonte.

Sinta-se à vontade para criticar, melhorar, sugerir alterações. Use os comentários e diga o que achou.

Com alguns caracteres a mais, você tem o efeito da imagem abaixo, onde o ambiente é uma imagem e o meme face é outra imagem.

O suporte à essa funcionalidade contempla, praticamente, todos os principais navegadores modernos. O Google Chrome oferece suporte à múltiplos backgrounds desde a versão 10, o Firefox desde a versão 3.6, o Safari desde a versão 1.3, o Opera desde a versão 10.50 (ainda na engine Presto) e o IE desde a versão 9.0 (que novidade).

Você consegue repetir a renderização da imagem acima com o seguinte código:

#trabalho {
    background: url(../img/ok.png) right bottom no-repeat, url(../img/trabalho.jpg) left top no-repeat;
}

Viu como é simples ? Basta você separar os atributos por vírgula. Mas você precisa prestar atenção no seguinte detalhe: as imagens são exibidas do primeiro plano para o plano de fundo. No exemplo acima, o arquivo ok.png é o meme face e está visível pois está declarado primeiro.

Caso você ache o código acima confuso e de manutenção complicada você pode ‘distribuir’ os atributos pelas propriedades de background.

#trabalho {
    background-image: url(../img/ok.png), url(../img/trabalho.jpg);
    background-position: right bottom, left top;
    background-repeat: no-repeat;
}

Você pode perceber que na propriedade background-repeat eu informei apenas 1 vez o atributo no-repeat. Caso não seja declarado, o navegador repetirá o último atributo para o restante das imagens. Para o caso de você exceder o número de atributos, os excedentes serão ignorados pelo seu navegador.

Você pode visualizar o nosso exemplo e baixar o código. Comente, modifique, critique, crie.

The calc() function allows mathematical expressions with addition (‘+’), subtraction (‘-’), multiplication (‘*’), and division (‘/’) to be used as component values. The ‘calc()’ expression represents the result of the mathematical calculation it contains, using standard operator precedence rules. It can be used wherever <length>, <frequency>, <angle>, <time>, <number>, or <integer> values are allowed. Components of a ‘calc()’ expression can be literal values, ‘attr()’ or ‘calc()’ expressions, or <percentage> values that resolve to one of the preceding types.

O função calc () permite expressões matemáticas, como adição (‘+’), subtração (‘-‘), multiplicação (‘*’), e divisão (‘/’) que são utilizados como valores de componentes. A expressão ‘calc ()’ representa o resultado do cálculo matemático que contém, utilizando as regras de operação padrão de precedência. Ele pode ser usado sempre que <length>, <frequency>, <angle>, <time>, <number> ou <integer> são permitidos. Componentes de uma expressão “calc () ‘podem ser valores literais,” attr () “ou” calc ()’ expressões ou valores <porcentagem> que resolver para um dos tipos anteriores.

Essa função permite, ainda, que sejam utilizadas diferentes unidades de medidas para o definir os valores dos elementos, como px, em, %, etc…

Vamos começar definindo o estilo dos nossos elementos article:

article {
    border: 1px solid #333;
    height: 80px;
    margin: auto;
    width: 800px;
}

No nosso primeiro exemplo temos um elemento article com 3 section que dividirão o espaço igualmente entre si.

O HTML:

<article id="um">
    <section class="um-um">Um Um</section>
    <section class="um-dois">Um Dois</section>
    <section class="um-tres">Um Três</section>
</article>

O CSS:

#um section {
    float:left;
    height: 80px;
    width: calc(100% / 3);
    width: -webkit-calc(100% / 3);
    width: -moz-calc(100% / 3);
}

.um-um { background: #555; }

.um-dois { background: #999; }

.um-tres { background: #ccc; }

Você pode me dizer: “Mas é só colocar as section com 33% de width que resolve.”. Aí eu te pergunto: “Onde fica o 1% que sobra?”.

Bom, reconheço que não fui muito feliz na escolha do primeiro exemplo, mas agora você vai ver o que realmente importa. Vou mudar o seu mundo (tá exagerei).

O HTML:

<article id="dois">
    <section class="dois-um">Dois Um</section>
    <section class="dois-dois">Dois Dois</section>
</article>

O CSS:

#dois section {
    float:left;
    height: calc(100% - 40px);
    height: -webkit-calc(100% - 40px);
    height: -moz-calc(100% - 40px);
    width: calc(100% / 2 - 40px);
    width: -webkit-calc(100% / 2 - 40px);
    width: -moz-calc(100% / 2 - 40px);
}

.dois-um {
    background: #ccc;
    padding: 20px;
}

.dois-dois {
    background: #999;
    margin: 20px;
}

Quando você adiciona o atributo padding/margin em um elemento, os valores desse atributo são somados ao tamanho do elemento. Neste caso, cada um dos elementos section ficaria com 50% (100$ / 2) do tamanho total do elemento article (400px) mais os 40px de padding/margin em cada lado do elemento. Assim os 2 elementos section ficarão um abaixo do outro, pois os 2 elementos terão 440px de largura total, enquanto o article tem apenas 800px de largura.

Com o CSS 2.1 não teríamos como corrigir isso. Com a função calc() basta diminuirmos o tamanho do padding/margin do tamanho do elemento.

No exemplo publicado você pode ver o funcionamento da função calc() e se quiser baixar o código fique a vontade.

Teste, modifique, questione, critique. Use o campo de comentários para sanar dúvidas. Mas atenção, essa função ainda é uma candidata a recomendação da W3C. Para utilizá-la são necessários os prefixos proprietários (somente Chrome e Firefox suportam atualmente).

Fonte:

Maujor – Função calc();

Hongkiat – CSS3 calc() function;

W3C – CSS Values and Unit Module Level 3;

Comece criando um documento HTML com a seguinte estrutura:

<!DOCTYPE html>
<html>
  <head>
    <title>Table Stripe</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/style.css">
  </head>
  <body>
      <table>
          <thead>
            <tr>
              <th>Posição - Fev 2013</th>
              <th>Posição - Fev 2012</th>
              <th>Comparativo de posição</th>
              <th>Linguagem</th>
              <th>% Fev 2013</th>
              <th>% Comparativo Fev 2012</th>
              <th>Status</th>
            </tr>
          </thead>
          <tbody>
            <tr>
                <td>1</td>
                <td>1</td>
                <td>=</td>
                <td>Java</td>
                <td>18.387%</td>
                <td>+1.34%</td>
                <td>A</td>
            </tr>
            <tr>
                <td>2</td>
                <td>2</td>
                <td>=</td>
                <td>C</td>
                <td>17.080%</td>
                <td>+0.56%</td>
                <td>A</td>
            </tr>
            <tr>
                <td>3</td>
                <td>5</td>
                <td>&uarr;&uarr;</td>
                <td>Objective-C</td>
                <td>9.803%</td>
                <td>+2.74%</td>
                <td>A</td>
            </tr>
            <tr>
                <td>4</td>
                <td>4</td>
                <td>=</td>
                <td>C++</td>
                <td>8.758%</td>
                <td>+0.91%</td>
                <td>A</td>
            </tr>
            <tr>
                <td>5</td>
                <td>3</td>
                <td>&darr;&darr;</td>
                <td>C#</td>
                <td>6.680%</td>
                <td>-1.97%</td>
                <td>A</td>
            </tr>
            <tr>
                <td>6</td>
                <td>6</td>
                <td>=</td>
                <td>PHP</td>
                <td>5.074%</td>
                <td>-0.57%</td>
                <td>A</td>
            </tr>
          </tbody>
      </table>
  </body>
</html>

Esse código deixará sua tabela com a seguinte aparência:

Agora vamos para a parte bonita do código, o nosso CSS. Começaremos aplicando um estilo básico para identificar a tabela e uma estilização do cabeçalho da tabela, lembrando que não colocamos classes ou ids para identificar nada nessa tabela.

table {
    border: 1px solid #000;
    font-family: Verdana,sans-serif;
    font-size: 12px;
    margin: 10px auto;
    width: 70%;
}

th, td {
    padding: 5px;
    text-align: center;
}

Esta parte do CSS vai deixar a tabela com a seguinte aparência:

Agora o cabeçalho.

thead tr:nth-child(1) {
    background: #02273b;
    color: #fff;
}

O pseudo-seletor nth-child é o responsável pela mágica. O parâmetro 1, indica que o estilo será aplicado no primeiro elemento filho do elemento <tr>. Assim temos a seguinte aparência na nossa tabela.

Agora vamos criar a nossa “zebrinha”.

tbody tr:nth-child(odd) {
    background: #eee;
}

O mesmo pseudo-seletor que usamos no cabeçalho, mas agora estamos aplicando o estilo nos elementos tr  ímpares que são filhos do tbody. Dessa maneira nossa tabela está pronta.

No exemplo publicado há mais algumas opções nos estilos aplicados. Baixe o código fonte, estude, melhore. Caso tenha dúvidas, pode usar a nossa caixa de comentário aqui embaixo.

Com essa pequena aplicação será composta de apenas 5 arquivos você poderá fazer a criação e a exclusão de tarefas, que podem ser organizadas por categorias. Neste primeiro post, a intenção é mostrar as funcionalidades da API IndexedDB que temos agora no HTML5.

Bom, chega de enrolar e vamos ao que interessa.

Começamos com um arquivo HTML bem simples.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Gerenciando Tarefas - HTML5 - IndexedDB</title>
    <link rel='stylesheet' href='css/style.css' />
    <script src="js/jquery-1.8.3.min.js"></script>
    <script src="js/scripts.js"></script>
</head>
<body>
    <section id="geral">
        <aside id='barra_menus'>
            <header id="topo">
                <h1 id="titulo">Tarefas</h1>
            </header>
            <nav>
                <ul class="listaCategorias">

                </ul>
            </nav>
        </aside>
        <article id="conteudo">
            <span class="formulario">
                <input type="hidden" name="categoria" id="categoria" value="">
                <input type="text" name="tarefa" id="tarefa" placeholder="Adicionar nova tarefa">
            </span>
            <br/>
            <ul class="listaTarefas">

            </ul>            
        </article>
    </section>  
</body>
</html>

Viu como é simples mesmo ? Agora o CSS para deixar a nossa aplicação com uma ‘carinha bonita’.

@charset "UTF-8";

* {margin: 0; padding: 0;}
a {text-decoration : none;}

/*
    Estilo geral
*/
body {
    background: #fff url('../img/wood.jpg') no-repeat top center;
    color : #000;
    font-family : Helvetica,sans-serif;
    font-size : 10pt;
    overflow: hidden;
    text-align : left;
}

html, body {
    height: 100%;
}

#geral {
    color : #000;
    min-height : 100%;
    margin : auto;
    position : relative;
}

#topo {
    background: #555; 
    box-shadow: 0px 0px 5px 1px rgba(0,0,0,.5);
    height : 40px;
    padding : 0 0 0 0;   
    text-align: center;
    z-index: 999;
}

#titulo {
    color : #eaeaea;
    font-size: 15pt;
    font-weight : bolder;
    padding : 3px;
    line-height: 40px;
    text-shadow: 0px 0px 6px rgba(255,255,255,.7);
    top : 5px;
}

#barra_menus {
    background: #eaeaea;
    box-shadow: 5px 0px 5px rgba(0,0,0,.5);
    height: 100%;
    width:270px;
    position: fixed;
}

nav li {
    border-bottom: 1px dotted #ccc;
    color: #555;
    cursor: pointer;
    display: block;
    font-weight: bold;
    padding: 10px;
}

nav li.ativo {
    background: #4876FF;
    border: 1px inset;
    color: #fff;
}

nav li a {
    color: #555;
    float: right;
}

#conteudo {
    color : #000;
    padding : 20px 0px 0px 270px;
}

/* 
    Formulário de tarefa;
*/
.formulario {
    padding: 20px;
}
#tarefa {
    background: rgba(0,0,0,.3);
    border: 1px inset #ccc;
    border-radius: 5px;
    box-shadow: 2px 2px 5px rgba(0,0,0,.5) inset;
    color: #fff;
    margin:3px;
    padding: 10px 20px;
    text-shadow: 2px 2px 2px rgb(0,0,0);
    width: 90%;
}

/* 
    Listagem de tarefas;
*/
.listaTarefas {
    list-style: none;
    overflow: auto;
    max-height: 500px;
    padding: 20px;
}

.listaTarefas li {
    background: #eaeaea;
    border: 1px outset rgba(255,255,255,.9);
    border-radius: 5px;
    color: #555;
    margin: 2px;
    padding: 10px;
}

.listaTarefas li a {
    float: right;
}

Se você está usando um navegador decente, a aplicação ficará igual à imagem no início do post. Caso contrário, você terá que fazer alguns ajustes no CSS. Testei o layout no Chrome, Firefox (última versão estável) e IE9 e não tive problemas de renderização.

Agora vamos mágica.

$(document).ready(function(){

    var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;
    var IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction;
    var db;

    if (!window.indexedDB) {
        alert("Seu navegavor não suporta a API IndexedDB.");
    } else {
        bdTarefas();        
    }   

    function bdTarefas(){
        var request = indexedDB.open("Tarefas", 1);  
        request.onsuccess = function (evt) {
            db = request.result;
            $('#categoria').val('Entrada');
            var categoria = $('#categoria').val();
            $('#tarefa').attr('placeholder', "Adicionar um item em \"" + categoria + "\"");        
            listaTarefas();
            listaCategorias();
        };

        request.onerror = function (evt) {
            console.log("IndexedDB error: " + evt.target.errorCode);
        };

        request.onupgradeneeded = function (evt) {
            var storeTarefas = evt.currentTarget.result.createObjectStore("tarefas", { keyPath: "id", autoIncrement: true });
            storeTarefas.createIndex("tarefa", "tarefa", { unique: false });
            storeTarefas.createIndex("categoria", "categoria", { unique: false });
            var storeCategorias = evt.currentTarget.result.createObjectStore("categorias", { keyPath: "id", autoIncrement: true });
            storeCategorias.createIndex("categoria", "categoria", { unique: true });
        };
    }

    function listaTarefas() {
        var tarefas = $('.listaTarefas');
        tarefas.empty();        
        var transaction = db.transaction("tarefas", "readwrite");
        var objectStore = transaction.objectStore("tarefas");

        var req = objectStore.openCursor();
        req.onsuccess = function(evt) {  
            var cursor = evt.target.result;  
            if (cursor) {
                if(cursor.value.categoria == $('#categoria').val()) {
                    var linha  = "<li>" + cursor.value.tarefa + "<a href='#' id='" + cursor.key + "'>[ Delete ]</a></li>";
                    $('.listaTarefas').append(linha);
                }
                cursor.continue();  
            }  
        };          
    }

    function listaCategorias() {
        var tarefas = $('.listaCategorias');
        tarefas.empty();        
        $('.listaCategorias').append("<li id='Entrada' class='categorias ativo'>Entrada</li>");
        var transaction = db.transaction("categorias", "readwrite");
        var objectStore = transaction.objectStore("categorias");

        var req = objectStore.openCursor();
        req.onsuccess = function(evt) {  
            var cursor = evt.target.result;  
            if (cursor) {
                var linha  = "<li id='"+ cursor.value.categoria +"' class='categorias'>" + cursor.value.categoria + "<a href='" + cursor.value.categoria + "' id='"+cursor.key+"'>[ X ]</a></li>";
                $('.listaCategorias').append(linha);
                cursor.continue();  
            } else {
                $('.listaCategorias').append('<li id="nova">+ Adicionar Nova Categoria</li>');                                
            }
        };   
    }    

    function insereTarefa() {
        var categoria = $('#categoria').val();
        var tarefa = $("#tarefa").val();

        var transaction = db.transaction("tarefas", "readwrite");
        var objectStore = transaction.objectStore("tarefas");                    
        var request = objectStore.add({tarefa: tarefa, categoria: categoria});
        request.onsuccess = function (evt) {
            $('#tarefa').val('');
            listaTarefas(); 
        };                   
    }    

    function insereCategoria() {
        var categoria = $('#nova_categoria').val();

        var transaction = db.transaction("categorias", "readwrite");
        var objectStore = transaction.objectStore("categorias");                    
        var request = objectStore.add({categoria: categoria});
        request.onsuccess = function (evt) {
            $('#nova_categoria').val('');
            listaCategorias(); 
        };                   
    }        

    function deletaTarefa(id) {
        var transaction = db.transaction("tarefas", "readwrite");
        var store = transaction.objectStore("tarefas");
        var req = store.delete(+id);
        req.onsuccess = function(evt) {  
            listaTarefas();
        };
    }

    function deletaCategoria(id, categoria) {
        var transaction = db.transaction("categorias", "readwrite");
        var store = transaction.objectStore("categorias");
        var req = store.delete(+id);
        req.onsuccess = function(evt) {
            limpaTarefasSemCategoria(categoria);
            bdTarefas();
        };
    }

    function limpaTarefasSemCategoria(categoria) {
        var transaction = db.transaction("tarefas", "readwrite");
        var objectStore = transaction.objectStore("tarefas");

        var req = objectStore.openCursor();
        req.onsuccess = function(evt) {  
            var cursor = evt.target.result;  
            if (cursor) {
                if(cursor.value.categoria == categoria) {
                    var del = objectStore.delete(cursor.key);
                }
                cursor.continue();  
            }
        };           
    }

    $('#tarefa').keypress(function (e) {
        if(e.keyCode == 13) {
            insereTarefa();
        }
    });

    $('.listaTarefas').on('click', 'a', function(){
        var confirma = confirm('Deseja excluir esta tarefa ?')
        if(confirma) {
            deletaTarefa(this.id);
            return false;
        }
    });

    $('.listaCategorias').on('click', 'a', function(){
        var confirma = confirm('Deseja excluir esta categoria ?\nATENÇÃO: Esta ação excluirá todas as tarefas vinculadas a esta categoria!')
        if(confirma){
            var id = this.id;
            var categoria = $(this).parent().get(0).id;
            deletaCategoria(id, categoria);       
        }
        return false;        
    });    

    $('.listaCategorias').on('keypress', '#nova_categoria', function(e) {
        if(e.keyCode == 13) {
            insereCategoria();
        }
    });

    $('.listaCategorias').on('click', '.categorias', function(){
        $('nav li').removeClass('ativo');
        $(this).addClass('ativo');        
        $('#categoria').val('');
        var id = this.id;
        $('#categoria').val(id);
        $('#tarefa').attr('placeholder', "Adicionar um item em \"" + id + "\"");        
        listaTarefas();
    });

    $('.listaCategorias').on('click','#nova', function(){
        $(this).replaceWith('<li id="nova"><input type="text" name="nova_categoria" id="nova_categoria" placeholder="Adicionar nova categoria"></li>')
        $('#nova_categoria').focus();
    });

    $('.listaCategorias').on('blur', '#nova_categoria', function(){
        $(this).replaceWith('+ Adicionar Nova Categoria')
    });
});

No código abaixo criamos as variáveis que armazenam as informações da API IndexedDB de acordo com o navegador utilizado e fazemos uma pequena verificação de compatibilidade;

    var indexedDB = window.indexedDB || window.webkitIndexedDB || window.mozIndexedDB || window.msIndexedDB;
    var IDBTransaction = window.IDBTransaction || window.webkitIDBTransaction;
    var db;

    if (!window.indexedDB) {
        alert("Seu navegavor não suporta a API IndexedDB.");
    } else {
        bdTarefas();        
    }

Caso o navegador seja compatível com a tecnologia é chamada a função bdTarefas() que é responsável por abrir a conexão com o nosso banco.

    function bdTarefas(){
        var request = indexedDB.open("Tarefas", 1);  
        request.onsuccess = function (evt) {
            db = request.result;
            $('#categoria').val('Entrada');
            var categoria = $('#categoria').val();
            $('#tarefa').attr('placeholder', "Adicionar um item em \"" + categoria + "\"");        
            listaTarefas();
            listaCategorias();
        };

        request.onerror = function (evt) {
            console.log("IndexedDB error: " + evt.target.errorCode);
        };

        request.onupgradeneeded = function (evt) {
            var storeTarefas = evt.currentTarget.result.createObjectStore("tarefas", { keyPath: "id", autoIncrement: true });
            storeTarefas.createIndex("tarefa", "tarefa", { unique: false });
            storeTarefas.createIndex("categoria", "categoria", { unique: false });
            var storeCategorias = evt.currentTarget.result.createObjectStore("categorias", { keyPath: "id", autoIncrement: true });
            storeCategorias.createIndex("categoria", "categoria", { unique: true });
        };
    }

Nas linhas 4 à 9, temos algumas funções executadas caso a requisição de abertura banco seja concluída com sucesso. Na linha 13, enviamos para o console um aviso caso a requisição execute com erro e no final (linhas 17 à 21) fazemos a criação das nossas tabelas e colunas.

As funções abaixo (listaTarefas() e listaCategorias()) são responsáveis por listar as informações de cada uma das tabelas da nossa aplicação. A função listaTarefas() começa limpando o elemento que possui a classe .listaTarefas . Em seguida fazemos a conexão com o o objeto tarefas e incluímos os resultados dentro da classe .listaTarefas, apenas das tarefas relacionadas à categoria selecionada.

A função listaCategorias() inclui no nosso menu lateral uma categoria padrão, lista as categorias criadas pelo usuário, e insere um link no final para o usuário poder criar novas categorias.

    function listaTarefas() {
        var tarefas = $('.listaTarefas');
        tarefas.empty();        
        var transaction = db.transaction("tarefas", "readwrite");
        var objectStore = transaction.objectStore("tarefas");

        var req = objectStore.openCursor();
        req.onsuccess = function(evt) {  
            var cursor = evt.target.result;  
            if (cursor) {
                if(cursor.value.categoria == $('#categoria').val()) {
                    var linha  = "<li>" + cursor.value.tarefa + "<a href='#' id='" + cursor.key + "'>[ Delete ]</a></li>";
                    $('.listaTarefas').append(linha);
                }
                cursor.continue();  
            }  
        };          
    }

    function listaCategorias() {
        var tarefas = $('.listaCategorias');
        tarefas.empty();        
        $('.listaCategorias').append("<li id='Entrada' class='categorias ativo'>Entrada</li>");
        var transaction = db.transaction("categorias", "readwrite");
        var objectStore = transaction.objectStore("categorias");

        var req = objectStore.openCursor();
        req.onsuccess = function(evt) {  
            var cursor = evt.target.result;  
            if (cursor) {
                var linha  = "<li id='"+ cursor.value.categoria +"' class='categorias'>" + cursor.value.categoria + "<a href='" + cursor.value.categoria + "' id='"+cursor.key+"'>[ X ]</a></li>";
                $('.listaCategorias').append(linha);
                cursor.continue();  
            } else {
                $('.listaCategorias').append('<li id="nova">+ Adicionar Nova Categoria</li>');                                
            }
        };   
    }

As funções abaixo executam a tarefa de incluir os dados nas tabelas.

    function insereTarefa() {
        var categoria = $('#categoria').val();
        var tarefa = $("#tarefa").val();

        var transaction = db.transaction("tarefas", "readwrite");
        var objectStore = transaction.objectStore("tarefas");                    
        var request = objectStore.add({tarefa: tarefa, categoria: categoria});
        request.onsuccess = function (evt) {
            $('#tarefa').val('');
            listaTarefas(); 
        };                   
    }    

    function insereCategoria() {
        var categoria = $('#nova_categoria').val();

        var transaction = db.transaction("categorias", "readwrite");
        var objectStore = transaction.objectStore("categorias");                    
        var request = objectStore.add({categoria: categoria});
        request.onsuccess = function (evt) {
            $('#nova_categoria').val('');
            listaCategorias(); 
        };                   
    }

Na sequência temos as funções de deleção de registros. A função deletaCategoria(id,categoria) possui uma função complementar, para excluir todas as tarefas relacionadas àquela categoria para que não fiquem registros perdidos.

    function deletaTarefa(id) {
        var transaction = db.transaction("tarefas", "readwrite");
        var store = transaction.objectStore("tarefas");
        var req = store.delete(+id);
        req.onsuccess = function(evt) {  
            listaTarefas();
        };
    }

    function deletaCategoria(id, categoria) {
        var transaction = db.transaction("categorias", "readwrite");
        var store = transaction.objectStore("categorias");
        var req = store.delete(+id);
        req.onsuccess = function(evt) {
            limpaTarefasSemCategoria(categoria);
            bdTarefas();
        };
    }

    function limpaTarefasSemCategoria(categoria) {
        var transaction = db.transaction("tarefas", "readwrite");
        var objectStore = transaction.objectStore("tarefas");

        var req = objectStore.openCursor();
        req.onsuccess = function(evt) {  
            var cursor = evt.target.result;  
            if (cursor) {
                if(cursor.value.categoria == categoria) {
                    var del = objectStore.delete(cursor.key);
                }
                cursor.continue();  
            }
        };           
    }

O restante do javascript contém algumas funções de perfumaria da aplicação. Alteração de classe da categoria selecionada, inclusão de funcionalidade de deleção nos links, etc.

Fiz este post com o intuito de demonstrar as funcionalidades da API IndexedDB. Para maiores informações, você pode consultar os links fonte no final do post.

Veja a demonstração da aplicação e baixe os fontes do meu Github. Faça seus próprios testes, melhore o código, inclua novas funcionalidades, questione, critique. Em um próximo post, vou mostrar como sincronizar essas informações com um banco de dados relacional em um servidor web.

Decidi então criar um pequeno script em PHP para a atualização automática do cache manifest. É um script sem muito ‘refinamento’, mas que atende plenamente ao nosso propósito.

Vamos relembrar um pouco do nosso código:

index.html

<!DOCTYPE html>
<html manifest="cron.appcache">
  <head>
    <title>Exemplo de uso de Cache + PHP + cron</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="style.css">
    <script>
        window.applicationCache.addEventListener('updateready', function(e) {
            if (window.applicationCache.status == window.applicationCache.UPDATEREADY) {
                window.applicationCache.swapCache();
                if (confirm('Uma nova versão dessa aplicação está disponível. Deseja carregar ?')) {
                    window.location.reload();
                }
            }
        }, false);
    </script>
  </head>
  <body>
      <header>
        <img src="logo.png" alt="HTML5">
        <h1>Aplicação Web Offline</h1>
        <h1>Usando AppCache</h1>
        <br>
        <h2>Utilizando o atualização automática via CRON</h2>
      </header>
  </body>
</html>

cron.appcache 

CACHE MANIFEST
# modificao em 05/01/2013 - 19:00

CACHE:
index.html
logo.png
style.css

NETWORK:
login.php

FALLBACK:
/ offline.html

styles.css 

* { 
    padding: 0; 
    margin: 0; 
}

header {
    background: #ccc;
    height: 200px;
    margin: 50px auto;
    padding: 30px 0 0 0;
    text-align: center;
    width: 50%;
}

Com um pouco de PHP resolvemos o ‘problema’ que é ficar atualizando o arquivo cache manifest a cada modificação da aplicação. Aqui temos o código utilizado para identificar as mudanças nos arquivos e a criação/modificação do cache manifest.

cron.php

<?php
date_default_timezone_set('America/Sao_Paulo');
//Definição do diretório que será monitorado para modificações;
$dir = "./";
//Variáveis que armazenarão as informações dos arquivos;
$cache = null;
$modf = null;
if (is_dir($dir)) {
    if ($dh = opendir($dir)) {
        while (($file = readdir($dh)) !== false) {
            if ($file != "." && $file != ".." && $file != "Thumbs.db") {
                if ($file == "cron.appcache") {
                    //Se existir o arquivo appcache, é armazenada a informação da última modificação na variável;
                    $cache .= filemtime($dir.$file);
                }
                if ($file == "index.html" || $file == "style.css" || $file == "logo.png") {
                    //Armazena em um array a informação da última modificação dos arquivos da aplicação;
                    $modf .= filemtime($dir.$file).",";
                }
            }
        }
        closedir($dh);
        $arquivos = array($modf);
        foreach ($arquivos as $arquivo) {
            //Varre as informações dos arquivos que deverão ser armazenados no cache e compara com o arquivo cache manifest;
            if ($cache < $arquivo) {
                //Se a última modificação do arquivo cache manifest for anterior à algum dos arquivos é feita a atualização;
                $result = "Houve Atualização";
                $arqCache = "cron.appcache";
                $dt_modificacao = date("d/m/Y - H:i");
                $fh = fopen($arqCache, 'w') or die("Não é possível abrir o arquivo.");
                $contCache = "CACHE MANIFEST\n";
                $contCache .= "# modificado em ". $dt_modificacao ."\n";
                $contCache .= "\n";
                $contCache .= "CACHE:\n";
                $contCache .= "index.html\n";
                $contCache .= "logo.png\n";
                $contCache .= "style.css\n";
                $contCache .= "\n";
                $contCache .= "NETWORK:\n";
                $contCache .= "login.php\n";
                $contCache .= "\n";
                $contCache .= "FALLBACK:\n";
                $contCache .= "/ offline.html";
                fwrite($fh, $contCache);
                fclose($fh);                
            } else {
                $result = "Nada modificado";
            }
        }
        echo $result;
    }
} else {
    echo "Erro";
}                
?>

Pronto. Agora é só colocar no cron do seu servidor, onde você pode definir a periodicidade da execução, para que a atualização seja automática.

Como sempre, comentem, critiquem, participem. Os arquivos estão disponíveis no meu Github e aqui você pode ver a aplicação em ação.