How to Make an HTML5 iPhone App
This is nice. An article on SixRevisions, short version here for my Archive.
If you write a couple meta tags, your html5 app will look like any other iPhone App, but will also work on Android, PalmPre, etc...
<meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> <link rel="apple-touch-icon" href="iphone_icon.png"/> <link rel="apple-touch-startup-image" href="startup.png" /> <link rel="stylesheet" href="styles.css" type="text/css" media="screen, mobile" title="main" charset="utf-8">
- apple-mobile-web-app-capable: This is another tip-off that we want to be an offline app.
- apple-mobile-web-app-status-bar-style: This hides the status bar, and nav bar when the app is offline.
- apple-touch-icon:This is the pointer to the image that want to be the icon.
- apple-touch-startup-image: This is a url pointing to the startup image.
Application Cache
Application caching allows browsers to determine in advance all the files a web page will need for the web page to work.
One tricky part to this whole thing is that the manifest (the list of files that need to be cached offline) has to be passed with a filetype Header set to text/manifest. That is why you need access to a web server that can set HTTP headers.
CACHE MANIFEST
# Version 3
style.css
index.html
init.js
# offline icons
startup.png
iphone_icon.pngOffline Data
Along with the ability to keep files that are needed offline, you can also store user data in an offline database. There are two major APIs for per user and/or per page data. The first is localStorage. localStorage, is an easy to use key-value store with a dead simple API.
localStorage.dataToStore = 5; console.log(localStorage.dataToStore); // 5
Its also possible to use a webdatabase (SQLite):
// 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 < result.rows.length; ++i) { var row = result.rows.item(i); var note = new Note(); note.id = row['id']; note.text = row['note']; note.timestamp = row['timestamp']; note.left = row['left']; note.top = row['top']; note.zIndex = row['zindex']; if (row['id'] > 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; }); });
Dois programas para ser mais produtivo
Tenho uma inclinação natural ao ceticismo, ou seja, a não aceitar imediatamente o que leio ou vejo sem, no mínimo, uma boa reflexão sobre o assunto.
Uma das afirmações que li algum tempo atrás do Leo Babuta no mnmlist.com foi a dica de fazer menos, e procurar programas com menos distrações. É interessante perceber que programas que deveriam aumentar a produtividade por permitir multitasking acabam só atrapalhado (pelo menos a mim) pois para realmente utilizá-los é preciso dedicar um bom tempo a eles ao invés de trabalhar, e acabam ficando parecidos com uma escrivaninha com pilhas de papéis e coisas a resolver, que o sujeito fica olhando sem saber por onde começar.
Pois depois de um tempo descobri que esta é uma chave para uma maior produtividade. Menos botões, menos janelas, menos tudo. Uma coisa de cada vez, wrap it up, get it done.
Isto acabou influenciando inclusive como navego na internet, pois ter 15 tabs abertos ao mesmo tempo com leituras diferentes, referências, emails, etc estavam me deixando demasiado cansado e retendo menos informação do que agora. Então preparei uma lista de programas que estão me ajudando na mudança, que espero sejam úteis para outras pessoas. Como ultimamente estou só no mac são mac-only, mas com certeza existem equivalentes para Windows.
JDarkRoom
O melhor editor de textos, totalmente geek-style, que já vi até hoje.
Junte o nano (ou pico, para os mais antigos) e os atalhos de teclado do mac e o resultado é ele. Estou escrevendo este texto nele agora, pois a falta de formatação permite que o conteúdo seja o foco. Depois de terminar o texto, salve no desktop, copie e cole no editor preferido (word, wordpress, pages, whatever) e formate da melhor forma possível. Como ele toma conta da tela, além de uma certa nostalgia dos tempos dos PC XT, nada mais distrai.
Caso precise fazer algo, tipo abrir o mail ou algo em janelas, basta usar os atalhos do Spaces para mudar de desktop e depois voltar para a imersão nas próprias palavras. ⌘ + H também funciona.
PlainView
Como eu consegui viver tantos anos lendo vários tabs ao mesmo tempo, às vezes em várias janelas, não sei.
O PlainView é um programinha super simples e despretensioso, que abre um browser (WebKit engine) em fullscreen, e os atalhos de teclado abrem HUDs (janelas modal translúcidas) que executam uma determinada função (como digitar um endereço ou ver as outras páginas abertas) e depois são fechados, eliminando as distrações.
Tão interessante que está fixo no Dock, descoberto ao acaso ao procurar uma extensão de Full Screen para o Firefox, que no Mac não funciona o F11 para o FFox. Se for preciso, também pode virar uma janela (com ⌘ + ⇪ + F) mas o grande barato é abrir um artigo em tela cheia e fechar ao terminar de ler.
Por enquanto é só, mas vou continuar na procura e se achar mais algum atualizo este post.
Capturar website screenshot no Mac
Algumas coisas no mac me deixam realmente feliz, como freewares práticos e objetivos, que fazem uma só coisa bem feita.
Agora mesmo descobri uma que é o resumo destas qualidades; precisei capturar um website, que é mais comprido que um screenshot comum me daria a possibilidade de capturar com um simples ⌘ + 3. Solução? Papparazzi!
Ele permite configurar a resolução mínima, crop na imagem final e salva em PNG. Depois é só abrir no preview para redimensionar e salvar. Doce.
Growl no Snow Leopard
Finalmente uma versão 64bits do Growl, compatível com Mail 4. Growl-1.2b3.dmg É ß, mas está funcionando perfeitamente so far...
Spaces no Snow Leopard
Um truque que usava de vez em quando no Leopard era teclar F8 para ver os Spaces, F9 para ver o Expose e, quando me incomodava ter várias janelas em vários Spaces, teclava c para consolidar todas as janelas no primeiro Space. Fui fazer isso hoje no Snow Leopard e... nada.
Não acreditei que tiraram um atalho tão útil. Procurando descobri que ele foi substituído por atalhos mais poderosos...
Agora o teclado funciona no Spaces, então pode-se navegar pelas setas. Clicando ⌘ ← por exemplo move as janelas do Space selecionado para o da esquerda. Se ao invés de ⌘ for usado ⌥, ele troca a posição do Space da direita pelo da esquerda.
Melhor, não? Até agora todas as alterações que tenho visto no Snow Leopard o são...
Snow Leopard… Notas do Upgrade
Realmente é rápido. Extremamente rápido. Vou descrever neste post algumas notas importantes da minha experiência no upgrade para Snow Leopard; encontrei algumas dificuldades e espero que estas notas poupem alguns cabelos brancos, assim como algumas que encontrei no caminho pouparam os meus. E se precisar reinstalar, que me sirva de guia.
Não faça um upgrade, instale do zero
Quando peguei o DVD, o impulso foi bootar por ele e fazer um upgrade no meu Leopard que estava atualizado. Resultado: Na hora de fazer o upgrade do XTools simplesmente não instalava. Macports não funcionava. Resultado, computador meia-boca. Solução: Carbon Copy Cloner (backup no HD externo de todo o disco do mac) e formatar o disco. Instalar o Snow Leopard do zero.
Resultado
XTools instalou de primeira, tudo parece mais rápido. No final da instalação ele perguntou se queria restaurar os dados de outro mac. Como estava com o HD externo plugado, ele reconheceu tudo. Instalei Contas de usuário, etc mas não Aplicativos. Vou instalar à medida que sentir necessidade. Já havia preparado uma pasta _install no HD externo com tudo que estava instalado no Leopard antigo, é só escolher e instalar.
Aplicativos 64bits
O que já estou vendo que vou sentir falta é o Visor (Terminal estilo Quake). Como não tem SIMBL para 64 bits, a alternativa é fazer o Terminal rodar em 32bits, selecionando Get Info ( + i) mas estou gostando da performance dele em 64. A outra alternativa é copiar o Terminal 32bits do Leopard e colocar ele junto como outra aplicação (VisorTerminal) Essa devo testar mais tarde...
First things first: layout de teclado, correções, Quicksilver, Growl & Macports
A primeira diferença que muito me agradou foi ver que colocaram um layout de teclado US International no core do SnowLeopard. Selecionando ele pode-se desabilitar o US e ficar bem mais feliz. 
Atualizar o Flash Player, pois com o DVD vem uma versão bugada. Em seguida, instalar Quicksilver e a skin que deveria ser default: BezelHud. Hmmm; tem uma versão nova do QS para SnowLeopard! E o bezelHud é novo tb... o antigo não funcionou. Outra coisa que não funcionou no upgrade foi a instalação do iStat menu pro... vamos ver agora... maza!!! instalou que foi um doce.
Em seguida, Growl. Tem um aviso no site avisando que deve-se esperar pelo 1.2 para compatibilidade, mas o que acontece é que os aplicativos 64bits não podem usar o Growl atual (32). Resumindo: no Growl for Mail por enquanto. Mas instalei assim mesmo e quando atualizarem lá, atualizo cá.
Macports
Capítulo à parte: Isto é realmente importante, pois o meu Apache, PHP, MySQL, tudo é compilado a partir do macports. Ele tem de ser resgatado do SVN e feito no terminal, então vamos ao passo-a-passo. O que for código vou colocar em verde.
Se ainda não instalou, coloque o DVD do Snow Leopard e instale XCode 3.2 (Optional Installs > Xcode.mpkg)
Instalar MacPorts para Snow Leopard
Qual não foi a minha surpresa ao descobrir que o Macports por SVN instala uma versão i386... Então melhor baixar o DMG do MacPorts e instalar. Tem muita gente usando o Apache e PHP do SL padrão, pois eles estão na última versão. Tentei, durou 1 dia. Instalar módulos não é tão prático, e quando tiver de fazer um upgrade não quero nem pensar.
Vou ter de tirar o mysql tb, pois baixei a versão em DMG do site deles. É legal ter um appletzinho no Painel de Controle, mas ele tem de ser carregado em 32 bits (o que faz com que ele tenha de relaunch o Painel) e nada que uma linha no .bash_profile não resolva...
alias mysqlstart='sudo /usr/local/mysql/bin/mysqld_safe &' alias mysqlstop='/usr/local/mysql/bin/mysqladmin -u root -p shutdown'
E mais detalhes de mysql...
Alterar /etc/my.cnf e copiar todos os bancos para o meu home, para facilitar o backup
vi /etc/my.cnf datadir = /Users/mw/mysql/data :x sudo tar -czf mysql.tar.gz /usr/local/mysql/data/mysql sudo mv *.tar.gz /Users/mw/mysql/data cd /Users/mw/mysql/data sudo tar -xzf mysql.tar.gz cd .. sudo chown _mysql data
Agora estou recompilando o coreutils em 64bits, pq antes estava em 32. Para ver se algo está em 32 ou 64 bits basta um:
vim /opt/local/etc/macports.conf # machine architectures #universal_archs x86_64 i386 universal_archs x86_64
Instalando PHP
Com o macports, tudo fica mais fácil...
sudo port install php5 +apache2 +php5-imap +php5-mysql +pear +suhosin +php5-tidy +universal
Sorry, acabou ficando incompleto, mas já é uma boa introdução para quem vai se aventurar...
IphoneApp – Hello World
Decidi escrever iPhoneApps. Primeiro passo? Aprender Objective-C.
Com uma cópia do Learn Objective-C on the Mac, de Mark Dalrymple & Scott Knaster coloquei a mão na massa. Como já tenho uma noção de C, não é tão estranho assim… claro que pensei que emNSString o NS era de NameSpace e não de NextStep, mas para essas informações super úteis um livro é essencial.
A primeira coisa, depois de baixar os 1,5GB do SDK (acho que vem com o XCode junto, que já tinha instalado) é escrever um Hello World, certo? Nada muito impressionante, mas é preciso começar por algum lugar…
Como preciso fazer algo mais bonito que o sample do livro, coloquei o fundo preto e um título na app. O grande lance é fazê-lo girar em qualquer direção e a App acompanhar. Aeae…
- (BOOL)shouldAutorotateToInterfaceOrientation: (UIInterfaceOrientation)interfaceOrientation { return YES; }