Você está deprimido há um ano, eu sei. Todos os desenvolvedores hardcore de Objective-C estão tendo um dia de feno escrevendo aplicativos para o iPhone. Você pode até ter tentado ler um ou dois tutoriais sobre desenvolvimento para o iPhone, mas é C – ou uma forma dele – e é realmente difícil de aprender. Não quero dizer que você deva desistir do objetivo: você poderá alcançá-lo eventualmente. Mas enquanto isso, há outra coisa que você pode fazer. Com a aparente complexidade do desenvolvimento de um aplicativo, pode parecer mais fácil pagar alguém para fazer isso por você. No entanto, você pode evitar o custo de fazer isso simplesmente seguindo as instruções que forneço. Você pode criar um aplicativo nativo que combine com todos os outros aplicativos e, na maior parte, será uma imitação perfeita. Tudo o que você precisa fazer é seguir minhas diretrizes de design e você terá um aplicativo HTML5 totalmente funcional para iPhone em pouco tempo! Você pode fazer isso com o conjunto de habilidades que provavelmente já possui: HTML(5), CSS e JavaScript. Vou te mostrar como criar um aplicativo HTML5 off-line para iPhone. Mais especificamente, orientarei você no processo de criação de um jogo de Tetris.
Off-line?
Do que estou falando quando digo “offline”? Bem, isso significa que temos um ícone personalizado, uma tela de inicialização personalizada, uma aparência nativa e você pode usar o aplicativo mesmo quando o telefone não estiver conectado à Internet. O aplicativo deve ser o mais funcional possível quando estiver offline, assim como os aplicativos móveis nativos normais. O principal objetivo do seu aplicativo é torná-lo o mais compatível possível com dispositivos móveis. Este é um tutorial específico para iPhones, mas a maioria dessas técnicas se aplica a todos os telefones que possuem navegadores compatíveis com HTML5. Sim, estou falando sério, confira a imagem a seguir. Não possui barra de URL nem navegação na parte inferior. Parece um aplicativo móvel nativo. 
Pré-trabalho
Você precisará de acesso a um servidor onde poderá alterar o Cabeçalhos HTTP em seus arquivos. Isso ocorre porque precisamos aproveitar as vantagens do cache offline do HTML5 (mais sobre isso mais adiante na página). O Apache faz isso muito bem e você pode simplesmente adicionar algo a um arquivo .htaccess e ele simplesmente funcionará. Aqui está um tutorial sobre como modificar cabeçalhos HTTP usando htaccess. A outra coisa que você precisa fazer é ativar a barra de depuração no navegador Safari em sua unidade iPhone. Vá para Settings.app > Safari > Developer no seu iPhone e ligue o console de depuração. Isso o ajudará a detectar possíveis erros de JavaScript. Depois de criar seu aplicativo, você deve desativar essa opção para obter a experiência completa ao testar seu aplicativo HTML5 para iPhone. 
Sobre o aplicativo
Ícone e tela inicial
O ícone precisa ter 57px x 57px. O iPhone irá arredondar os cantos do seu ícone, criar uma sombra e adicionar brilho a qualquer ícone que você usar. Deve estar no formato PNG ou JPG. Aqui está o que usei para o jogo Tetris. 
A tela inicial precisa ter 320px x 460px e também deve estar no formato PNG ou JPG. Aqui está o que usei para a tela inicial. 
Algumas dicas antes de começar
Fique pequeno, esparso e simples.
- Pequeno: Este é o desenvolvimento de aplicativos móveis, portanto, mesmo que você esteja armazenando suas coisas em cache, ainda é uma ideia inteligente manter o tamanho dos arquivos reduzido.
- Esparso: você deve tentar manter a quantidade de arquivos com os quais lida o mais baixa possível.
- Simples: comece com algumas ideias simples e execute-as. Ao manter seu escopo pequeno, você pode fazer as coisas com mais rapidez.
Cache de aplicativo
Este é um novo padrão, você pode ler as especificações aqui. O cache do aplicativo permite que os navegadores determinem antecipadamente todos os arquivos que uma página da Web precisará para funcionar. Ele armazenará esses arquivos em cache (às vezes até demais). A sintaxe deste arquivo é simples: basta listar as localizações dos seus arquivos em termos absolutos (por exemplo ) or relative to the manifest file (/picture.png). O navegador manterá esses arquivos offline. Você também pode listar algumas URLs que não devem ser armazenadas em cache, mas isso não é pertinente para nosso aplicativo offline (se estiver interessado, leia sobre isso na documentação). Uma parte complicada de tudo isso é que o manifesto (a lista de arquivos que precisam ser armazenados em cache offline) deve ser passado com um filetype Cabeçalho definido como text/manifest. É por isso que você precisa de acesso a um servidor web que possa definir cabeçalhos HTTP.
Tamanho da tela
Uma observação rápida ao projetar seu aplicativo: quando você está no modo de aplicativo, você tem um tamanho de tela de 320px x 460px. Quando você está no modo web, ele tem um tamanho de tela de 320px x 356px. Isso pode afetar a interface do usuário do seu aplicativo HTML5 off-line. Aqui você pode ver a diferença lado a lado. 
HTML
É um navegador real, então seu HTML é exatamente o mesmo. O navegador do iPhone também está na vanguarda do HTML5, então analise as especificações. Para obter detalhes mais detalhados, confira o canto do desenvolvedor Safari:
- Referência HTML do Safari
- Referência CSS do Safari
Vamos começar a codificação
O aplicativo começa definindo sua marcação. Aqui está a marcação do meu aplicativo Tetris.
offline Tetris
Primeiro, observe o Doctype. O HTML5 não é incrível? O manifest="cache.manifest" propriedade no tag is how the browser knows that we want to cache this web page offline. There’s proprietary Apple markup on our HTML5 page. A brief explanation of each:
apple-mobile-web-app-capable: Essa é mais uma dica de que queremos que seja um aplicativo offline.apple-mobile-web-app-status-bar-style: oculta a barra de status e a barra de navegação quando o aplicativo está offline.apple-touch-icon:Este é o ponteiro para a imagem que deseja ser o ícone.apple-touch-startup-image: Este é um URL que aponta para a imagem de inicialização.
Observe também que você deve colocar CSS na parte superior e JavaScript na parte inferior (as práticas recomendadas ainda se aplicam aqui).
CSS
É quase igual a uma página da web normal. Existem alguns específicos -webkit Regras CSS que você pode usar e que fazem coisas muito legais, como animação, mas este é um guia rápido e sujo e está fora do escopo deste artigo. O CSS é simplesmente Plain Jane.
body { overflow:hidden; background: #d7d7d7; margin:0; padding:0; } #tetris { width: 320px; height: 460px; background:#000; }
O estilo é realmente apenas para o div elemento em nossa página da web para garantir que ele se encaixe corretamente na janela de visualização do iPhone.
JavaScript
Usei uma versão modificada de um JavaScript de Dalton Ridenhour; eu encontrei em GitHub. O JS foi escrito originalmente para um navegador normal. As únicas modificações que tive que fazer foi para suportar a falta de teclado. Em geral, as funções JS funcionam bem no iPhone – porém, há exceções. Pense em algo como passar o mouse, o evento existe no iPhone, mas não tenho certeza de quão útil é quando você não possui um dispositivo apontador padrão (como um mouse). Quirksmode postou um artigo sobre eventos no iPhone isso é realmente útil. Quando você tiver tudo isso, poderá testá-lo abrindo seu index.html em um iPhone, e você poderá ver tudo funcionando. Então, o próximo passo é servi-lo a partir de um servidor web real que possa definir as configurações adequadas no cache.manifest. Então você poderá adicioná-lo à tela inicial e ter todos os extras e ver o modo offline. Você pode ver uma versão funcional que configurei em:
- http://tetris.alexkessinger.net
Seção bônus: dados offline
Além da capacidade de manter off-line os arquivos necessários, você também pode armazenar dados do usuário em um banco de dados off-line. Existem duas APIs principais para dados por usuário e/ou por página. O primeiro é localStorage. localStorageé um armazenamento de valores-chave fácil de usar com uma API extremamente simples.
localStorage.dataToStore = 5; console.log(localStorage.dataToStore); // 5
Você pode usar isso para armazenar a pontuação do usuário, por exemplo. O segundo é na verdade um mecanismo SQL offline, um banco de dados da web. As APIs são um pouco mais avançadas. Aqui está um pouco de você que verá.
// Try and get a database object var db; try { if (window.openDatabase) { db = openDatabase("NoteTest", "1.0", "HTML5 Database API example", 200000); if (!db) alert("Failed to open the database on disk. This is probably because the version was / bad or there is not enough space left in this domain's quota"); } else alert("Couldn't open the database. Please try with a WebKit nightly with this feature enabled"); } catch(err) { } // Check and see if you need to initalize the DB db.transaction(function(tx) { tx.executeSql("SELECT COUNT(*) FROM WebkitStickyNotes", [], function(result) { loadNotes(); }, function(tx, error) { tx.executeSql("CREATE TABLE WebKitStickyNotes (id REAL UNIQUE, note TEXT, timestamp / REAL, left TEXT, top TEXT, zindex REAL)", [], function(result) { loadNotes(); }); }); }); // Insert a test Note. var note = { id: "1", text:" This is a test note", timestamp: "112123000", left:10, top:10, zIndex:2 }; db.transaction(function (tx) { tx.executeSql("INSERT INTO WebKitStickyNotes (id, note, timestamp, left, top, zindex) VALUES / (?, ?, ?, ?, ?, ?)", [note.id, note.text, note.timestamp, note.left, note.top, note.zIndex]); }); // Get all the notes out of the database. db.transaction(function(tx) { tx.executeSql("SELECT id, note, timestamp, left, top, zindex / FROM WebKitStickyNotes", [], function(tx, result) { for (var i = 0; i highestId) highestId = row['id']; if (row['zindex'] > highestZ) highestZ = row['zindex']; } if (!result.rows.length) newNote(); }, function(tx, error) { alert('Failed to retrieve notes from database - ' + error.message); return; }); });
Conclusão
Há muito que pode ser feito com aplicativos HTML offline. Jogos, como o tetris, são até possíveis, mas você provavelmente gostaria de considerar o que deseja fazer e ter certeza de que é adequado para um aplicativo offline. Quake 3 Arena, provavelmente não. Um aplicativo de lista de tarefas, definitivamente. Deixe milhares de aplicativos florescerem!
Recursos
Conteúdo relacionado
- 10 gadgets úteis para computação móvel
- Uma rápida olhada nos designs da Web para dispositivos móveis
- O Designer Remoto: Como trabalhar enquanto estiver na estrada
- Categorias relacionadas: Desenvolvimento Web e Interface de Usuário
Perguntas Frequentes sobre Como Fazer um Aplicativo HTML5 para iPhone
O que significa "offline" neste contexto?
Do que estou falando quando digo “offline”?
O que é necessário antes de começar a criar o aplicativo?
Você precisará de acesso a um servidor onde poderá alterar os Cabeçalhos HTTP em seus arquivos e ativar a barra de depuração no navegador Safari em sua unidade iPhone.
Como são o Ícone e a Tela Inicial do aplicativo?
O ícone precisa ter 57px x 57px e a tela inicial precisa ter 320px x 460px, ambos no formato PNG ou JPG.
Quais são as dicas antes de começar o desenvolvimento do aplicativo?
Fique pequeno, esparso e simples.
O que é importante saber sobre o Cache do Aplicativo?
O cache do aplicativo permite que os navegadores determinem antecipadamente todos os arquivos que uma página da Web precisará para funcionar e armazená-los em cache offline.
