badulaques, gadgets e outros…

Como vimos no artigo anterior, uma das novidades do HTML 5 é o Web SQL Database, que permite utilizar SQL para armazenar dados no lado do cliente através do SQLite. Vamos ver o seu funcionamento passo-a-passo a seguir:

Abrindo uma Conexão

var db = openDatabase('CONTATOS', '0.1', 'Lista de contatos', 200000);

O código acima cria um objeto de banco de dados “db” com 4 argumentos:

1. Nome do banco de dados;
2. Versão;
3. Descrição;
4. Tamanho estimado da base de dados.

Não se preocupe com o tamanho da base de dados pois ela é flexível. Aparentemente ao exceder o tamanho o navegador mostrará ao usuário uma janela pedindo autorização para expandir o espaço.

Para testar se a conexão foi criada com sucesso, basta verificar se “db” é nulo:

if (! db) alert ("Falha ao conectar no banco de dados.");

É muito importante fazer este teste de conexão antes de qualquer outro código pois existem várias razões pela qual o navegador poderá negar acesso ao banco, como por exemplo por questões de segurança e espaço.

Criando uma Tabela

db.transaction(function (tx) {
        tx.executeSql('CREATE TABLE IF NOT EXISTS contatos (id INTEGER PRIMARY  KEY AUTOINCREMENT, nome VARCHAR, tel INTEGER)');
});

(Para saber os Datatypes do SQLite visite a página Datatypes In SQLite Version 3.)

Executando Consultas

O bacana desta API é que ela trata as operações como transações. Com transações é possível reverter as operações em caso de erro. Cada transação pode conter várias SQL e caso alguma apresente falha, nada é alterado no banco, preservando sua consistência.

Há também erro e callbacks de sucesso na transação, assim você pode gerenciar os erros, mas é importante entender que as operações têm a capacidade de reverter as mudanças.

Transação é uma simples função que contém os códigos SQL:

db.transaction(function (tx) {
        // Aqui acontece a mágina com a SQL utilizando o objeto "tx" que foi passado por parâmetro
});

Para ficar mais claro, vamos a alguns exemplos:

Inserindo um Registro

db.transaction(function(tx) {
        tx.executeSql('INSERT INTO contatos (nome, tel) VALUES (?,?)', ['Marcos', '2222-3333'], null, function(tx, e) {
                // caso ocorra algum erro
                alert(e.message);
        });
});

Lendo os Registros

// busca os contatos do banco
db.transaction(function (tx) {
        tx.executeSql('SELECT * FROM contatos', [], function (tx, resultado) {
                for (i = 0; i < resultado.rows.length; i++)
                        alert(resultado.rows.item(i)['nome']);
        });
});

Exemplo Funcional

Atenção, verifique se o seu navegador tem suporte a Web SQL Database antes de clicar no exemplo.

Simples Exemplo de uso do HTML Web SQL Storage.

Gostou? Deixe um comentário!

Todo mundo já deve ter visto em alguns sites, ao inserir a imagem do profile, uma tela onde vc seleciona parte da imagem que vc fez upload para ser recortada. A maioria já pré-estabelece a proporção correta para que seu avatar não fique feio ao ser exibido no layout do site.

O bom dessas ferramentas, é que elas podem ser usadas em sistemas CMS onde usuários leigos podem inserir tranquilamente a imagem da matéria de capa sem ter que depender de um designer (e sem estragar o layout dele).

Uma ferramenta poderosa é o Jcrop, ela oferece bloqueio de proporção, animação e você ainda pode personalizar o css e deixar mais a cara da sua aplicação. E ainda é cross-browser.

Como usar é bem simples, basta incluir o arquivo do plugin e aplicar o plugin com o seguinte comando:

$(function(){
	$('#id-da-imagem').Jcrop();
});

Claro que esta é a forma mais simples, mas na área de exemplos do site existem os códigos para você incrementar este código da maneira que você precisar.

Mas não pára por aí, não adianta selecionar a parte da imagem que você quer se não houver o corte da imagem. Para isso vou usar o exemplo do próprio autor utilizando a biblioteca GD do PHP.

Antes de mais nada, precisamos postar as posições a serem cortadas. Para isso, utilize campos input hidden da seguinte forma:

E a seguinte função para popular esses campos:

jQuery(function(){
        jQuery('#id-da-imagem').Jcrop({
                aspectRatio: 1,
                onSelect: updateCoords
        });
});

function updateCoords(c)
{
        jQuery('#x').val(c.x);
        jQuery('#y').val(c.y);
        jQuery('#w').val(c.w);
        jQuery('#h').val(c.h);
};

Postado as coordenadas da imagem, utilizamos o seguinte código PHP para criar a nova imagem:

$targ_w = $targ_h = 150;
$jpeg_quality = 90;

$src = 'demo_files/flowers.jpg';
$img_r = imagecreatefromjpeg($src);
$dst_r = ImageCreateTrueColor( $targ_w, $targ_h );

imagecopyresampled($dst_r,$img_r,0,0,$_POST['x'],$_POST['y'],
    $targ_w,$targ_h,$_POST['w'],$_POST['h']);

header('Content-type: image/jpeg');
imagejpeg($dst_r, null, $jpeg_quality);