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

Offline 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;
        });
    });

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.

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.

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…

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…

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;
}