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

Here’s a little code to find IP adressess inside strings (returned from a nslookup). The code is not optimal, but illustrate how both languages works. Just for some friday fun…

Python

 
Python 2.6.1 (r261:67515, Jul  7 2009,  23:51:51)
 [GCC 4.2.1 (Apple Inc. build 5646)] on darwin
 Type "help", "copyright", "credits" or "license"  for  more information.
 
>>> a  = 'yahoo.com IN A 69.147.114.224 18774s  (05:12:54)'
>>> a += 'yahoo.com IN A 209.131.36.159 18774s  (05:12:54)'
>>> a += 'yahoo.com IN A 209.191.93.53  18774s  (05:12:54)'
>>> print a
 'yahoo.com IN A 69.147.114.224  18774s (05:12:54)yahoo.com IN A 209.131.36.159 18774s  (05:12:54)yahoo.com IN A 209.191.93.53  18774s (05:12:54)'
>>>; import re
>>> p = re.compile('(?:\d{1,3}\.){3}\d{1,3}')
>>>; p.findall(a)
 ['69.147.114.224', '209.131.36.159',  '209.191.93.53']
>>>

PHP

$a  = 'yahoo.com IN A 69.147.114.224 18774s (05:12:54)';
$a .= 'yahoo.com  IN A 209.131.36.159 18774s (05:12:54)';
$a .= 'yahoo.com  IN A 209.191.93.53  18774s (05:12:54)';
 
print $a;
 
/*
saida: yahoo.com IN A 69.147.114.224 18774s (05:12:54)yahoo.com IN A  209.131.36.159 18774s (05:12:54)yahoo.com IN A 209.191.93.53 18774s  (05:12:54)
*/
 
$re = '/(\d+).(\d+).(\d+).(\d+)/';
 
preg_match_all($re, $a, $matches);
 
var_dump($matches[0]); // saida 1
var_dump($matches); // saida 2
 
/*
saida 1:
 
array(3) {
  [0]=>
  string(14) "69.147.114.224"
  [1]=>
  string(14) "209.131.36.159"
  [2]=>
  string(13) "209.191.93.53"
}
 
saida 2:
 
array(5) {
  [0]=>
  array(3) {
    [0]=>
    string(14) "69.147.114.224"
    [1]=>
    string(14) "209.131.36.159"
    [2]=>
    string(13) "209.191.93.53"
  }
  [1]=>
  array(3) {
    [0]=>
    string(2) "69"
    [1]=>
    string(3) "209"
    [2]=>
    string(3) "209"
  }
  [2]=>
  array(3) {
    [0]=>
    string(3) "147"
    [1]=>
    string(3) "131"
    [2]=>
    string(3) "191"
  }
  [3]=>
  array(3) {
    [0]=>
    string(3) "114"
    [1]=>
    string(2) "36"
    [2]=>
    string(2) "93"
  }
  [4]=>
  array(3) {
    [0]=>
    string(3) "224"
    [1]=>
    string(3) "159"
    [2]=>
    string(2) "53"
  }
}
*/

find . -type d | xargs chmod 755

It finds all subdirectories and chmod’em to 755. Clever, isn’t it?

Por exemplo: Tens de subir um site por 3g, e mesmo targzipando o site ele fica com 12Mb por causa dos .svn escondidos…

tar --exclude='.svn' -czvf file.tar.gz ./*

6MB. Simples e eficaz…

Até agora…  :)

1. Vá ao google.com
2. Se estiver em Português, clique no Go to Google.com
3. cole o código abaixo na location bar (barra de endereços) substituindo o http://google.com -
   javascript:void(document.cookie=”PREF=ID=20b6e4c2f44943bb:U=4bf292d46faad806:TM=1249677602:LM=1257919388:S=odm0Ys-53ZueXfZG;path=/; domain=.google.com”);
4. tecle ENTER
5. feche o browser
6. abra o browser
7. Vá ao google.com
8. Perceba os botões azuis e faça uma busca. tada!!!

Antes...

Depois

Gostava do antigo askjeeves.com, que depois que virou ask.com perdeu o charme pra mim. Teve o gigablast, ou algo assim, que não decolou apesar do logo ser um foguete. Acho que os pombos do pigeorank do google são melhores. E a massiva utilização tb deve ajudar.

Agora mesmo abri os três maiores sites de busca da atualidade para dar uma comparada, pois eles estão em fase de melhoria de design, etc. O Yahoo!, recém comprado pela MS precisa recuperar audiência, o Bing precisa se estabelecer e o google se manter. Ao abrir o google levei um susto, pois aquelas sugestões de feramentas, links, tudo havia sumido. Ao mover o mouse notei que voltaram. E eis as grandes diferença da google: foco e simplicidade.

o Bing está tentando o mesmo caminho, e apelando para impacto visual. Mas comparando lado-a-lado, chego a conclusão de que é MUITA informação visual. O objetivo é chegar à próxima página, dos resultados, e o brinde da foto (deleite visual) é supérfluo. E os links distraem, o sujeito tem de escanear toda a tela para ver as opções disponíveis. Em cima à esquerda, à direita, o logo, em cima e embaixo da caixa de texto, no rodapé da página.

O Yahoo! deu uma boa limpada no visual, mas ainda acho muita coisa pra ver e fazer. Como portal, tipo terra.com.br o Yahoo é uma boa alternativa, pois tem notícias, webmail, grupos, favoritos, e tudo acessível de uma boa maneira, mas… eu quero buscar! Search Engine!

E a evolução da google é justamente a de oferecer menos; ter mais para quem quer. Explico: Normalmente as pessoas abrem o browser, digitam um termo (e às vezes até um site) e teclam enter. Se esta pessoa tiver como home o google, vai ver o logo, uma caixa de texto já com foco (e letras GRANDES) e dois botões. Nada mais. Digita, enter, resultados. Se não mexer o mouse, nem vai saber que a home tem mais funções. Genial. Por este tipo de decisão é que eles vão continuar na frente…

Minimalismo Google Style

]]> http://www.bitbonsai.com/porque-a-google-vai-continuar-em-primeiro/feed/ 1 http://www.bitbonsai.com/produtivo/ http://www.bitbonsai.com/produtivo/#comments Tue, 06 Oct 2009 08:14:09 +0000 mw http://www.bitbonsai.com/blog/?p=87 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.

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…