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.

w3Opacity – Efeitos de opacidade em elementos HTML com JavaScript

Eu havia criado anteriormente o w3FadingOpacity, mas agora ele se chama w3Opacity.

w3Opacity são recursos em JavaScript para você trabalhar com efeitos de opacidade em elementos HTML de forma fácil, simples e prática.

Com o w3Opacity será simples realizar Fade Out, Fade In, Toogle de Fade, Definir opacidade e consultar a opacidade de elementos HTML. Veja alguns exemplos:

Exemplo de um Fade Out

w3Opacity.fading('img_fadeout',100,0,600);

Onde, img_fadeout é o ID do objeto; 100 é a opacidade inicial e 0 a final; 600 é o tempo em milisegundos que o efeito irá durar.

Exemplo de um Fade In

w3Opacity.fading('img_fadein',0,100,600)

Percebeu a diferença entre o Fade Out? Exatamente, a opacidade inicial é menor do que a final, somente.

Exemplo de Toggle de Fade

w3Opacity.toggle('img_togglefade',600);

O Toggle de fade funciona assim: o método – toggle – consultará a opacidade do elemento HTML, se ele estiver visível será realizado um Fade Out, caso contrário, um Fade In.

Como definir Opacidade

Definir opacidade em elementos HTML com o w3Opacity é super simples, observe:

w3Opacity.set('img_set',30);

onde img_set é o ID do objeto e 30 é a opacidade desejada, ou seja, 30% de opacidade.

Como consultar a Opacidade de um objeto

Utilize o método get_opacity para tal, assim:

w3Opacity.get_opacity('img_get_opacity');

Há outros projetos no meu Labs.

Labs do Leandro Vieira Pinho e Fórum para trocarmos idéias

[UPDATE] O Labs do Leandro Vieira Pinho agora é uma página denominada como Projetos. O Fórum foi removido. [/UPDATE]

Estava precisando organizar melhor os projetos em que estou envolvido, juntamente com os add-ons, scripts e afins que faço regularmente. Então, surgiu o Labs do Leandro Vieira Pinho (em versão BETA até o dia em que sobreviver)

Juntamente criei o Fórum do Labs do Leandro Vieira Pinho para podermos trocar boas idéias e experiências. A quantidade de e-mails relacionados a scripts estava crescendo, mas o meu tempo está em sentido contrário. Então, com as dúvidas, sugestões, bugs e demais de forma pública será mais fácil para consultas futuras. Além de facilitar a interação entre todos nós.

Conto com vocês por lá, um abraço.

Tag: Objetivos para 2007

Fui tagueado – que palavra hein, não seria melhor rotulado? – pelo Bruno Dulcetti e essa brincadeira – iniciada pelo Bruno Alves – consiste em definir cinco objetivos para 2007 e linkar cinco blogs para que eles façam o mesmo.

Então, segue minha lista:

  1. Largar a minha vida sedentária, praticar algum tipo de esporte, namorar mais e trabalhar menos :)
  2. Comprar um carro, não aguento mais esse negócio de andar de moto;
  3. Colocar em prática alguns projetos que estão na gaveta e no Backpack;
  4. Criar um blog sobre um assunto específico – já iniciei – e tentar fazer com ele seja referência nacional sobre o assunto: Firefox;
  5. Que eu tenha forças, tempo e enfrente as críticas para manter o desenvolvimento da freeDOM.js junto com o amigo Metzen.

Agora, já chegou minha vez de taguear, hehehe. Lá vai a lista dos cinco blogs:

  1. Frederick van Amstel do Usabilidoido;
  2. Elcio Ferreira do fechaTag;
  3. Flávio Theruo Kaminisse o Japs;
  4. Tiago Madeira;
  5. Gustavo Paes do Nerdfication

Uma observação: essa brincadeira está parecendo um telefone sem fio – ou seria um blog sem fio, risos – uma vez que o nome iniciou como Tag: Objetivos para 2007 e já vi muito por aí Tag: Resoluções para 2007

Alterar o visualizador de código fonte do Firefox

Você pode utilizar o Bloco de notas – Notepad, o Dreamweaver, ou qualquer outro programa para visualizar o código fonte de uma página web aberta no Firefox.

O Firefox por padrão exibe o código fonte de uma página web através de um visualizador próprio. Eu o adoro, pela sua simplicidade e pela coloração nos códigos.

O problema do visualizador de código fonte padrão do Firefox está na impossibilidade de editar e salvar o código que estamos visualizando. Então se você deseja alterar o visualizador de código fonte do Firefox por algum outra programa externo é possível.

Para realizar essa alteração é super simples, digite na barra de endereços – Address bar – do Firefox o seguinte: about:config. Após procure por: view_source.editor.external e altere o valor para truepara alterar dê dois cliques sobre a linha informada. Com isso, você está dizendo ao Firefox para abrir o código fonte da página em um programa externo.

Mas o Firefox não irá adivinhar qual o programa a ser utilizado na exibição do código fonte, então você irá informá-lo através do seguinte comando view_source.editor.path informando como valor o endereço para o programa desejado.

Por exemplo, para usar o Notepad informe o seguinte valor: C:\Windows\NOTEPAD.exe ou para usar o Dreamweaver informe: C:\Arquivos de programas\Macromedia\Dreamweaver 8\Dreamweaver.exe – é claro se você tiver tal programa instalado :)

Como fazer design para a web 2.0

A web 2.0 tem suas próprias características e muitas delas são marcantes. Se tratando de design, ela trouxe a tona a evidência de diversos conceitos de design que são empregados fielmente em diversos sites a la 2.0.

Para fazer design para a web 2.0, é preciso levar em conta alguns simples, porém muito importantes conceitos de design. Que infelizmente algumas vezes são desprezados; e quando bem aplicados os resultados são maravilhosos.

Abaixo há uma lista com excelentes informações sobre esses conceitos. Leitura extremamente recomendada para os web designers.

  1. Simplicity
  2. Central layout
  3. Fewer columns
  4. Separate top section
  5. Solid areas of screen real-estate
  6. Simple nav
  7. Bold logos
  8. Bigger text
  9. Bold text introductions
  10. Strong colours
  11. Rich surfaces
  12. Gradients
  13. Reflections
  14. Cute icons
  15. Star flashes

Recomendo também a leitura de dois outros excelentes artigos sobre o assunto:

  1. Current style in web design
  2. The visual design of Web 2.0

Como exibir anúncios do Google AdSense de forma rotativa

[update]
Preocupado com o regulamento do Google AdSense, entrei em contato com o suporte do programa para verificar se esta prática que desenvolvi é aceitável pelo programa. E a resposta foi: NÃO.

A justificativa segundo o André – da Equipe Google AdSense – foi:

“[...]os editores do AdSense não estão autorizados a alterar o layout, o comportamento, a segmentação ou a distribuição dos anúncios e, assim, não podem usar IFRAMEs para exibir o código do anúncio.”

E ainda ressaltou:

“[...]Não permitimos alterar o comportamento ou o direcionamento dos anúncios do Google. Isso inclui o recarregamento dos anúncios sem que a página seja recarregada. Desta forma, pedimos que você não utilize este script que você desenvolveu.”

Portanto, retirei o script aqui do blog e se você quiser utilizá-lo, será por sua conta e risco.

Obs: Meu blog tem um tráfego pequeno e minha média de impressões diárias é de 1.000. Antes de retirar o script verifiquei e chegou a 10.000 page impressions (uau). Mas os clicks mantiveram a mesma média :(
[/update]

Estive pensando numa forma de rotacionar os anúncios do Google AdSense, afim de exibir aos usuários uma maior quantidade de anúncios sobre aquele assunto em que ele se interessa. Com a intenção de aumentar a quantidade de clicks.

Com uma maior quantidade de anúncios disponíveis sobre um mesmo assunto, a chance de aparecer um que agrada ao usuário é bem maior. Então a idéia é a seguinte.

Criar uma página exclusivamente para armazenar os códigos do bloco de anúncio desejado; desenvolver um script que criaria um iframe e daria um reload em seu conteúdo em uma quantidade x de segundos.

Bom, adicionei esse recurso ontem aqui no blog e verei no que isso dá. Mas, se você se interessou também poderá testá-lo, afim de compartilharmos a idéia, contarmos nossas experiências e avaliarmos se o método é compensativo ou não.

  • Crie uma página exclusivamente para armazenar o código do bloco de anúncio – como esta aqui;
  • Crie uma div com o seguinte id: w3_adsense_reload;
  • Dentro dessa div insira a chamada ao código: w3_adsense_reload.start();

Agora, observe o script e sua configuração:

/*
	w3_adsense_reload (0.1) - 04/01/2007
	Por Leandro Vieira Pinho - http://leandro.w3invent.com.br
*/
var w3_adsense_reload = {
	intTimeDelay: 20000, // Tempo - em milisegundos - para o recarregamento dos anúncios. 60000 = 1 minuto
	strPageWithAdsense: "http://leandro.w3invent.com.br/wp-includes/js/adsense-refresh-iframe-home.php", // Endereço da página que contém os anúncios
	intAdWidth: 336, // Largura do bloco de anúncio
	intAdHeight: 280, // Altura do bloco de anúncio
	// Daqui pra baixo não há necessidade de alteração.
	// Se modificar, encontrar algo errado ou tiver alguma sugestão
	// Gostaria de ser informado :)
	objDate: new Date(),
	start: function() {
		var w3_iframe_create = document.createElement("iframe");
		w3_iframe_create.setAttribute("id","w3_adsense_reload_iframe");
		w3_iframe_create.setAttribute("width",this.intAdWidth);
		w3_iframe_create.setAttribute("height",this.intAdHeight);
		w3_iframe_create.setAttribute("frameborder",0);
		w3_iframe_create.setAttribute("scrolling","no");
		w3_iframe_create.setAttribute("src","");
		if ( !this.$("w3_adsense_reload_iframe") ) {
			this.$("w3_adsense_reload").appendChild(w3_iframe_create);
		}
		this._reload();
	},
	_reload: function() {
		this.$("w3_adsense_reload_iframe").src = this.strPageWithAdsense + "?w3NoCache=" + this.objDate.getTime();
		if ( typeof(this.intTimeDelay) == "number" ) {
			setTimeout("w3_adsense_reload._reload();",this.intTimeDelay);
		}

	},
	$: function(strObjID) {
		return document.getElementById(strObjID);
	}
}

O script está auto-explicativo, lhe informando onde e como configurá-lo. Faça os testes e volte com um feedback para melhorar-mos a idéia :)