No Webkit as informações são armazenadas utilizando [...]]]>

Uma das funcionalidades mais robustas presentes nessa nova versão do HTML é exatamente o suporte ao armazenamento local, sem ser por Cookie mas sim pelo banco de dados presente no browser. Tal funcionalidade já está presente no Webkit que fornece uma aplicação de exemplo: http://webkit.org/demos/sticky-notes/.

No Webkit as informações são armazenadas utilizando SQLite, e acredito que o Firefox irá pelo mesmo caminho, já que ele também utiliza o SQLite para armazenar os “Favoritos”.

Para abrir a conexão com a banco de dados (openDatabase) deve-se informar o nome do banco (database name), a versão (database version), o nome de exibição (display name) e o tamanho estimado em bytes (estimated size) que será armazenado.

var db;
try {
    if (window.openDatabase) {
        db = openDatabase("MyDB", "1.0", "HTML5 Database Example", 200000);
        if (!db) {
            alert("Failed to open the database.");
        }
    } else {
        alert("Couldn't open the database.");
    }
} catch(err) { }

Uma vez estabelecida a conexão a interação passa ser efetuada através de comandos SQL.

db.transaction(function(tx) {
tx.executeSql("CREATE TABLE myTable (id REAL UNIQUE, name TEXT, description TEXT, timestamp REAL");
});

db.transaction(function (tx) {
tx.executeSql("INSERT INTO myTable (id, name, description, timestamp) VALUES (?, ?, ?, ?)", [id, name, description, timestamp]);
});

db.transaction(function(tx) {
tx.executeSql("DELETE FROM myTable WHERE id = ?", [id]);
});

db.transaction(function(tx) {
    tx.executeSql(
        "SELECT * FROM myTable WHERE id = ?",
         [id],
         function(tx, result) {
             // success
             if (result.rows.length > 0) {
                   alert("My name is: " + result.rows.item(0)['name']);
             } else {
                  alert("Sorry, no result for this id");
              }
         },
         function(tx, error) {
             // error
             alert("Error when try retrieve data: " + error.message);
         }
    );
});

O método executeSql pode receber 4 parâmetros, sendo eles:

• O SQL a ser executado
• Os valores parametrizados para serem utilizados na consulta (array)
• Função callback para ser executada caso haja sucesso (onSuccess)
• Função callback para ser executada caso haja falha (onError)

Sinceramente eu achei muito legal conceder mais esse poder ao Javascript no HTML5, porém “com grandes poderes vêm grandes responsabilidades”.

Então, mesmo depois de muito tempo da versão já lançada, deixo um novo post testados nos browsers [...]]]>

Há algum tempo postei sobre como centralizar verticalmente e horizontalmente usando CSS, o que gerou alguns posts de visitantes revoltados porque não funcionava no IE7, fato que na época eu não tinha testado para essa versão do IE.

Então, mesmo depois de muito tempo da versão já lançada, deixo um novo post testados nos browsers Firefox 2, IE6, IE7 e Opera 9.

html, body {
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
}

#table {
    width: 100%;
    height: 100%;
    position: static;
    display: table;
    *overflow: hidden; /* hack para o IE6 e IE7 */
    *position: relative; /* hack para o IE6 e IE7 */
}

#cell {
    vertical-align: middle;
    display: table-cell;
    position: static;
    *top: 50%; /* hack para o IE6 e IE7 */
    *position: absolute; /* hack para o IE6 e IE7 */
}

#conteudo {
    top: -50%;
    width: 500px;
    margin: auto;
    position: relative;
    background: red;
}

link para o outro post e comentários

Há duas maneiras de se fazer isso sem muito trabalho.

A primeira consiste em definir a posição do objeto como absolute e suas posições top e left com 50% e tirando a diferença (subtraindo) da metade [...]]]>

Uma grande dúvida que sempre surge é como centralizar um elemento no HTML, tanto verticalmente quanto horizontalmente, usando CSS.

Há duas maneiras de se fazer isso sem muito trabalho.

A primeira consiste em definir a posição do objeto como absolute e suas posições top e left com 50% e tirando a diferença (subtraindo) da metade de sua altura e metade de sua largura na margem. Por exemplo se um elemento tem 500px de largura e 400px de altura na margem vai ter um valor negativo (para top e left) igual a metade destes valores:

#minhaDiv {
    width: 500px;
    height: 400px;
    top: 50%;
    left: 50%;
    margin-top: -200px;
    margin-left: -250px;
    position: absolute;
    border: 1px solid black;
}

Ou resumindo: margin: -200px auto auto -250px;

Pronto sua div vai ficar centralizada na janela. Mas temos um problema com isso.

Nesse caso sabemos o valor da altura do objeto, então tiramos a diferença na margem. Mas e se tivessemos um objeto em que sua altura pode variar (ou seja não sabemos o valor da altura) ?

Podemos solucionar isso usando o vertical-align, mas para ele funcionar temos que definir o display da div como table. A má notícia é que o nosso amigo IE não reconhece essa propriedade (e nem o valor table como display). A boa notícia que usando um hack para o IE dá pra acertar isso.

A estrutura para simular uma tabela fica assim:

<div id="tabela">
    <div id="cell">
        <div id="conteudo">
            <p>parágrafo</p>
        </div>
    </div>
</div>

E definimos no CSS o display da div tabela como table e da div cell como table-cell. Mas antes temos que acertar o html, body e a tabela para 100% (largura e altura).

html, body {
    width: 100%;
    height: 100%;
    margin: 0px; /* retirando a margem padrão */
    padding: 0px; /* retirando o padding padrão */
}

#table {
    width: 100%;
    height: 100%;
    display: table;
}

#cell {
    display: table-cell;
}

Com as divs já funcionando como tabela vamos definir a vertical-align como middle, isso na div cell.

#cell {
    vertical-align: middle;
    display: table-cell;
}

Falta agora setar a margin do conteudo como auto. E colocar um valor para largura, senão vai ficar 100%.

#conteudo {
    width: 500px;
    margin: auto;
}

Pronto, a div já vai aparecer centralizada no browser. Mas ainda está faltando o nosso amigo IE.

A idéia é quase a mesma da primeira situação. Como antes do conteudo temos uma div (cell), a gente defini seu position como absolute, e top como 50%. E na conteudo com position como relative, e top como -50%.

Lembrando que para não atrapalhar a definição correta, usaremos um hack que só influenciará no Internet Explorer.

Ficando o CSS final assim:

html, body {
    width: 100%;
    height: 100%;
    margin: 0px;
    padding: 0px;
}

#table {
    width: 100%;
    height: 100%;
    display: table;
    background: #f1f1f1;
}

#cell {
    vertical-align: middle;
    display: table-cell;
    _position: absolute;
    _top: 50%;
}

#conteudo {
    width: 500px;
    margin: auto;
    padding: 20px;
    border: 1px solid black;
    _position: relative;
    _top: -50%;
}

E o HTML:

<div id="table">
    <div id="cell">
        <div id="conteudo">
            <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</p>
        </div>
    </div>
</div>

Mais sobre:

Exemplo com a primeira situação

Maujor – Centralizar Vertical

[update testado="IE6, IE7, FIREFOX 2 e OPERA 9"]

html, body {
    width: 100%;
    height: 100%;
    padding: 0px;
    margin: 0px;
}

#table {
    width: 100%;
    height: 100%;
    position: static;
    display: table;
    *overflow: hidden; /* hack para o IE6 e IE7 */
    *position: relative; /* hack para o IE6 e IE7 */
}

#cell {
    vertical-align: middle;
    display: table-cell;
    position: static;
    *top: 50%; /* hack para o IE6 e IE7 */
    *position: absolute; /* hack para o IE6 e IE7 */
}

#conteudo {
    top: -50%;
    width: 500px;
    margin: auto;
    position: relative;
    background: red;
}

[/update]

Trata-se de um dicionário em português.

Não sabia muito bem para que “servia” (é um dicionário oras) mas acabei instalando assim mesmo.

E hoje ao responder uma mensagem no Orkut, vi que todas as palavras escritas erradas, ou simplesmente abreviadas (internetês), estavam sublinhadas. [...]]]>

Esses dias instalei aqui em casa um plugin novo para o Firefox.

Trata-se de um dicionário em português.

Não sabia muito bem para que “servia” (é um dicionário oras) mas acabei instalando assim mesmo.

E hoje ao responder uma mensagem no Orkut, vi que todas as palavras escritas erradas, ou simplesmente abreviadas (internetês), estavam sublinhadas. Como o verificador ortográfico do Microsoft Office.

Achei até que poderia ser mais uma inovação da Google. Mas continuando a escrever textos em inputs navegando pelo Firefox, notei que o mesmo continuava a acontecer.
Então, puta merda! A parada funciona melhor do que eu imaginava. É um corretor ortográfico embutido no browser. Muito bom para quem digita rápido e/ou tem alguma dúvida de como se escreve a determinada
palavra.

E enquanto digito esse texto, acabei de me surpreender mais. Só de sacanagem apertei com o botão direito em cima da palavra sublinhada, e eis que aparece sugestões e uma opção para adicionar ao
dicionário.

Carai, tô feitu ! (essa exclamação por exemplo abriu até um popup me xingando, hehehe, sacanagem).
Para quem quiser fazer download do plugin, segue o link:

https://addons.mozilla.org/firefox/3257/

[update]

inglês aqui

[/update]

Extensão e uma breve descrição.

FireFTP – que tal conectar ao ftp pelo Firefox. Rápido e seguro.

IE View Lite – para você poder visualizar como está ficando seu código no Internet Explorer sem [...]]]>

Aqui vão algumas dicas de extensões para deixar seu Firefox muito mais robusto e personalizado.

Extensão e uma breve descrição.

FireFTP – que tal conectar ao ftp pelo Firefox. Rápido e seguro.

IE View Lite – para você poder visualizar como está ficando seu código no Internet Explorer sem sair do Firefox.

IE Tab – também para visualizar pelo Firefox como está ficando no Internet Explorer (acho melhor).

JSView – embora os browsers têm a opção para ver o código-fonte, eles não abrem os arquivos externos, o que acontece essa extensão permite.

Image zoom – dê um close nas imagens.

ImageBot – faça upload de suas imagens para um host grátis de forma bem rápida.

View Source Chart – veja o código da página de forma bem ilustrativa e legível.

MR Tech Disable XPI Install Delay – retire aquele delay, tempo de espera, na instalação das Extensões.

HTML Validator – após abrir a página já demonstra os erros e os alertas da página (muito bom).

Online W3C HTML Validator – verifique se seu código está validado pela W3C.

Extension Manager Extended – gerencie melhor suas extensões com essa extensão.

Web Developer – menu com algumas ferramentas para o desenvolvedores Web.

MeasureIt – uma régua para medir as imagens, ou qualquer coisa na página, excelente para definir os tamanhos e margens.

ColorZilla – quer saber o número da cor daquela imagem? Use esse colorpicker.

CSS Validator – verifique se seu CSS está validado pela W3C.

Dummy Lipsum – gerador do famoso Lorem Lipsum.

LoremIpsum Content Generator – gerador do Lorem Lipsum também, só que sem a opção de mostrar tag (<p>) igual ao Dummy Lipsum.

Stylish – fácil gerenciador de estilos (CSS).

CSS Viewer – com essa extensão você pode visualizar o estilo aplicado só aonde desejar (muito bom).

EditCSS – modifique seu CSS na Sidebar.

Server Spy – espie qual servidor e a sua versão, no qual o site está rodando.

Tab Mix Plus – permite adicionar abas de por exemplo: download em execução ou extensões.

Fast Fox – melhore a perfomance e velocidade do navegador.

VideoDownloader – baixe os videos dos sites como: YouTube e Google.

DownThemAll! – gerenciador de download.

Foxmarks – agora nunca mais você vai perder seus favoritos, armazena-os online.

Google Pagerank – veja o rank da página que está acessando, definido pelo Google Pagerank.

Translation Panel – tradutor em vários idiomas.

GeoURL – veja as coordenadas do site. Mostrando no mapa sua localização.

ChatSum – converse com os demais visitandes da mesma página que você.

Pong! Multiplayer – esse é para descontrair, clássico joguinho pong.

mais:

Para mais Extensões só acessar o site da Mozilla/Firefox na parte de addons.