BitBonsai Labs

Testing pastie.org embed

mw — Tue, 29 Jun 2010 12:25:05 +0000

How to use Google Chrome to simulate an iPhone Safari

mw — Thu, 27 May 2010 14:38:47 +0000

If you want to look how a test (or any other site) will behave in an iPhone safari from the comfort of your Desktop, do the following steps:

Windows 7

In Windows Explorer, go to
C:\Users\YOUR_USERNAME\AppData\Local\Google\Chrome\Application\
Create a link to chrome.exe (right click, Create Shortcut)
Alter the target property in this shortcut:

From: C:\Users\YOUR_USERNAME\AppData\Local\Google\Chrome\Application\chrome.exe

To: C:\Users\YOUR_USERNAME\AppData\Local\Google\Chrome\Application\chrome.exe --user-agent="Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/3.0 Mobile/1A543a Safari/419.3"

I use the Web Developer extension, so I can resize my window to iPhone’s defaults (320x480 or 480x320)

JS Tip: Revealing Module Pattern

mw — Tue, 27 Apr 2010 17:59:00 +0000

From Christian Heilmann. Nothing too fancy for those who are used to write jQ plugins, but nice to save it for reference...

var myApp = function(){
	var nome = 'Mauricio Wolff';
	var idade = 35;
 
	function insertPessoa(){
		// [...]
	}
 
	function updatePessoa(){
		// [...]
	}
 
	function setPessoa () {
		// [ usa insert ou update ]
	}
 
	function getPessoa () {
		// [...]
	}
 
	return{
		set: setPessoa,
		get: getPessoa
	}
}();
 
// Example usage:
myApp.get();

How does Google 2010 looks in msie3?

mw — Thu, 22 Apr 2010 13:01:46 +0000

Google 2010 in msie 3.0

Just for fun... but believe me, it looks better than Bing. :)

h1n1 – interessante…

mw — Thu, 08 Apr 2010 20:15:59 +0000

Não sou muito fã de teorias da conspiração, mas achei todo esse movimento de criar uma vacina a jato e vários governos do mundo comprando milhões de unidades e fazendo campanhas mundiais de vacinação muito estranhas...

Aí achei um filme em três partes no youtube, que tem algumas informações no mínimo interessantes... deixo a decisão para o julgamento de cada um:

Novo Site Publicado

mw — Thu, 01 Apr 2010 23:12:04 +0000

O site terra-flor.com já estava em produção há algum tempo... Ele conta com o admbonsai, que é o gerenciador de conteúdo próprio, com uma série de plugins e produtos (gerenciador de eventos, produtos, locais de revenda, contatos, gerenciador de FAQs, mailer...)

Com uma série de recursos de HTML5 e CSS3 e jQuery na veia, é um bom case. Vou ter de escrever um case completo para retratar as features de uma forma legal.

Site Terra-Flor Aromaterapia

How to Make an HTML5 iPhone App

mw — Mon, 29 Mar 2010 13:12:44 +0000

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

Sonho de consumo…

mw — Fri, 12 Mar 2010 21:47:24 +0000

Iniciando em mongoDB

mw — Thu, 11 Mar 2010 14:13:09 +0000

Recentemente descobri o mongoDB, e como tem driver para PHP via Pecl, resolvi investigar...

Uma das primeiras coisas que me chamou atenção era a aparente falta de autenticação, controle de usuários, etc. Eis que hoje descobri como funciona:

Mais ou menos como o mySQL tem uma collection (admin) que, tendo-se usuário e senha para ele, se tem em todos os dbs do sistema. Para se ter auth, basta rodar o daemon com --auth

Em cada banco tem uma collection chamada system.users. Ex: num banco chamado projectx, tem uma collection projectx.system.users. Pra começar a autenticar, é preciso criar um usuário no banco admin (equivalente ao banco mysql):

$ ./mongo
> use admin
> db.addUser("theadmin", "anadminpassword")

Depois disso vai precisar autenticar para fazer ações administrativas:

> db.auth("theadmin", "anadminpassword")

Pra ver todos os usuários do sistema:

> db.system.users.find()

Criando usuários para um banco específico:

$ ./mongo
> use projectx
> db.addUser("joe", "passwordForJoe")

pode-se criar tb usuários somente leitura:

> use projectx
> db.addUser("guest", "passwordForGuest", true)

Web Designer Wheel (Roda do Webdesigner)

mw — Tue, 09 Mar 2010 00:17:24 +0000

Original de Woorkup, tradução e adaptação, moi.

The Web Designer Wheel é um modelo de processo simples que descreve em 5 passos como construir um projeto pequeno para web, e como conduzir as relações com o cliente. Esta abordagem permite um melhor trabalho, ensina a definir e cumprir prazos e estabelecer relações lucrativas e duradouras com o cliente. Eis o processo: