Como solicitar do usuário uma confirmação ao sair de uma página

Tenho visto um recurso interessante em alguns sites e principalmente em aplicativos web a la 2.0. Trata-se de uma solicitação ao usuário quando ele tenta fechar a página ou dirigir-se a outra URL. Quando o usuário executa alguma dessas ações, será necessário uma confirmação para fechar ou sair da página em questão.

Tal recurso é feito utilizando-se do evento onbeforeunload da seguinte maneira:

window.onbeforeunload = function() {
	return "Aqui você especifica uma mensagem a ser anexada junto a mensagem padrão do navegador.";
}

Quando o usário tentar fechar a página, apertar a tecla F5 ou navegar para uma outra URL, ele deverá confirmar a sua real vontade de sair da página. Observe um exemplo:

Exemplo do box de confirmação utilizado junto ao evento onbeforeunload

Bom, utilizando a imaginação é possível fazer um bom uso desse recurso, ainda mais com o advento do Ajax e das aplicações on-line.

Infelizmente o evento onbeforeunload não funciona no Opera (ou funciona e eu não sei?), somente no Internet Explorer e a partir da versão 0.9 do Firefox.

Gecko DOM Code Hints 0.3 e freeDOM.js in DW 0.2

Disponível a versão 0.3 da Gecko DOM Code Hints e da versão 0.2 da freeDOM.js inside Dreamweaver. Confira os detalhes da nova versão dessas extensões para o Dreamweaver.

Gecko DOM Code Hints 0.3

Na versão anterior, 0.2, o Code Hints funcionava apenas nos documentos do tipo JavaScript. Nesta versão, 0.3, o Code Hints está disponível em todos os tipos de documentos.

freeDOM.js in DW 0.2

Nesta versão, 0.2, foi adicionada todas as funções da freeDOM.js e ela também trabalhará em todos os tipos de documentos no Dreamweaver.

Downloads

Otimização de códigos PHP: Prefira as funções da extensão ctype do que expressões regulares

As funções da extensão ctype devem ser utilizadas ao invés de expressões regulares para conferir caracteres e strings. Com a utilização da extensão ctype você estará otimizando seu código PHP.

Segundo o manual do PHP as funções da extensão ctype devem ser utilizadas ao invés de expressões regulares e no lugar de algumas funções str_* e is_*. Pelo simples fato da extensão ctype utilizar um biblioteca nativa, a “C library”. O que significa dizer que você terá um ganho de performance e o processamento dos seus código será mais rápido.

As função da extensão cytpe são as seguintes:

Visite a página exclusiva de cada função descrita acima e comprove que além de otimizar seu código PHP as função da extensão ctype fará com que a tarefa de conferir caracteres e strings seja simples e fácil.

Gecko DOM Code Hints 0.2

Finalizei a versão 0.2 da Gecko DOM Code Hints – uma extensão para o Dreamweaver que adiciona code hints ao Gecko DOM – e nessa versão há correção de bugs encontrados na versão 0.1.

Os bugs estão relacionados a duplicação dos itens que apareciam na lista do Code Hints.

Leia o poste relacionado a versão 0.1 – Gecko DOM Code Hints – Extensão para o Dreamweaver

Mais informações sobre a Gecko DOM Code Hints no meu Labs.

Faça o download da Gecko DOM CodeHints versão 0.2.

Gecko DOM Code Hints – Extensão para o Dreamweaver

Após a criação da freeDOM.js inside Dreamweaver – uma extensão para o Dreamweaver que oferece Code Hints para as funções da freeDOM.js – acabei de finalizar a versão 0.1 da Gecko DOM Code Hints.

A Gecko DOM Code Hints é uma iniciativa minha em oferecer Code Hints ao se trabalhar com o DOM no Dreamweaver. Inicialmente nesta versão inicial 0.1, você terá Code Hints para todos os métodos e propriedades do objeto document. Além do Code Hints há algumas tooltips dos métodos do objeto document.

Exemplo de uso

Ao digitar o prefixo: “document.” (sem aspas) o Dreamweaver exibirá um menu popup com os métodos e propriedades do objeto document. Como demonstrado na imagem abaixo:

Exemplo do CodeHints ao digitar document.

Agora, veja um exemplo da tooltip para lhe ajudar no preenchimento dos parâmetros dos métodos.

Exemplo da tooltip da Gecko DOM CodeHints

Faça o download da Gecko DOM CodeHints versão 0.1.

Aguardo seu feedback :)

freeDOM.js inside Dreamweaver

O Dreamweaver passará a reconhecer as funções da freeDOM.js através da extensão freeDOM.js inside Dreamweaver.

Criei essa extensão para facilitar meu trabalho ao utilizar a freeDOM.js no Dreamweaver. A versão atual é a 0.1 e toda sugestão será muito bem vinda :)

Exemplo de uso

Uma vez que a instalação foi instalada, abra um arquivo do tipo JavaScript e digite $ (cifrão). Ao digitar esse caractere será exibido um menu popup com as funções da freeDOM.js, com isso utilize as teclas para cima e para abaixo do seu teclado para navegar entre as funções do menu.

Observe a imagem de exemplo:

Exemplo do Float Panel da freeDOM-inDW 0.1

Ao digitar o nome da função e abrir o parênteses, por exemplo: $after(. O Dreamweaver exibirá uma tooltip com os parâmetros da referida função; à media em que você for adicionando as vírgulas para informar o parâmetro posterior o menu é atualizado; sempre exibindo em negrito o parâmetro em questão.

Observe outra imagem de exemplo; agora com a tooltip:

Exemplo da tooltip nas funções da freeDOM.js

Faça o download da freeDOM.js inside Dreamweaver (freeDOM-inDW), versão atual 0.1

Espero que go

Firefox como aliado ao desenvolvedor web – código fonte

Particularmente sou um viciado em olhar códigos fonte de um site. Não consigo me controlar, ainda mais quando o site está devidamente dentro dos padrões da web.

De qualquer forma – por vício ou não – todo desenvolvedor vive atrelado a códigos fonte, mesmo quando precisa ir dormir para descansar, uma vez que algo que precisa ser corrigido e melhorado.

No Firefox há um visualizador de código fonte nativo acessado através do menu View > Page Source (Ctrl + U), o qual é aberto em uma nova janela – dando ao desenvolvedor uma maior visibilidade do código em si – e com o recurso de colorir as tags HTML. Portanto é agradável visualizar o código fonte no Firefox, ou não? Se você acha que não, talvez você queria Alterar o visualizador de código fonte do Firefox.

O Firefox além de destacar a sintaxe dos códigos e colorí-lo, permite que você analise somente uma parte do código fonte desejado. Por exemplo, selecione através da página uma parte dos elementos nela exibidos; posteriormente clique com o botão direito do mouse e selecione a opção View Selection Source. O que aconteceu? Exatamente, foi exibido no código fonte somente o código HTML dos elementos que você selecionou. Isso facilita a localização de uma parte da página entre todo o código fonte.

Na minha opinião, o grande problema do visualizador de código fonte do Firefox está relacionado com o fato dele exibir apenas o código fonte que foi carregado quando você abriu a página, e não o que o código fonte realmente é – na maioria da vezes.

Deixa eu me explicar melhor, você abre uma página e exibe o código fonte; até esse momento ambos estão condizentes um com outro. Mas, se você utilize algum recurso oferecido pela página que insira/altere ou exclua algum elemento através do DOM, por exemplo. O Firefox já não exibe o código fonte com tais modificações e sim o mesmo quando a página foi carregada.

A solução para termos um código fonte sempre sincronizado com o real estado da página é a utilizar a opção View Generated Source disponível no Firefox através da extensão Web Developer. Esse recurso também é encontrado na extensão Firebug.

Nova forma para ganhar dinheiro com blogs

Acabei de ser aprovado na nova forma de ganhar dinheiro com blogs. Falo a respeito do Programa de Afiliados da Visie.

A idéia do programa é bem simples e oferece duas formas para você ganhar dinheiro com esse programa de afiliados.

A primeira consiste na indicação de alunos para os cursos que a Visie oferece; onde ganhamos 5% do valor do curso. Já a segunda é indicados novos afiliados ao Programa de Afiliados deles; onde faturamos sobre cada venda que nosso indicado fizer e sobre cada comissão que ele faturar indicando outros afiliados que façam vendas, nesse caso, ganhamos um valor igual à metade da comissão que ele ganhar.

Então se você deseja faturar uma grana com o seu blog cadastre-se no Programa de Afiliados da Visie e boa sorte :)

Ah, não se esqueça de ir até lá por este link aqui: Programa de Afiliados da Visie. Assim eles saberão que eu estou lhe indicando, e claro, ganharei com isso e você também.