Buenas, leitores e leitoras... faz mais de mês que não posto mais, pois é estão acontecendo algumas mudanças em minha vida particular que me impossibilitam dedicar um tempo maior a este blog. Não se preocupem, ele não será abandonado, tenho novos planos para ele... planos para 2007. Até lá prometo que irei atualiza-lo com regularidade.
Hoeeeeee!!!
Hoje venho postar sobre uma notícia forte mesmo: uma entrevista com Maujor, a lenda viva do cenário webstandard brazuca, lá no fórum iEvolution.
Tem curiosidade de saber da onde veio esse apelido de 'Maujor'? Como ele começou a mexer com HTML, CSS e Padrões Web? O que ele pensa sobre o futuro da Web? O que ele pensa a respeito dos blogs sobre padrões web brasileiros? Dicas para iniciantes e iniciados? O que ele pensa sobre a questão da validação? Entre outras diversas perguntas/informações (algumas que eu sempre tive curiosidade de saber).
Nós do fórum ficamos muito felizes ao conseguirmos a entrevista. Afinal, o cara até se considerou o padrinho pois foi o primeiro entrevistado.
Eu preparei algumas perguntas, a Fernanda outras, o Felipe me deu uma dica que eu já tinha perguntado, mas enfim: Acho que saiu uma ótima entrevista. Passem lá e confiram.
Este é o trecho de um post do blog do Micox, acho que ele já falou muito bem. Essa entrevista vale a pena ler.
Abraços
Muitos já devem ter utilizado a pseudo classe do CSS :hover. O que muitos também já devem ter notado é que esta pseudo classe só funciona (em certo(s) navegadore(s)) quando o assunto é link. Existem muitas soluções para que este(s) navegadore(s) (não irei citar nomes, não insistam...rs) implementem algo semelhante com o auxílio de JavaScript. Porém, algumas destas soluções acabam prejudicando o bom funcionamento da aplicação por aplicarem a todos os elemento a posibilidade de se utilizar algo semelhante a ":hover".
A solução que desenvolvi é muito simples. Basta declarar a função, que tem em torno de 18 linhas, e chamá-la no onload da página ou após declarar o elemento que se queira interagir. Este elemento deverá ter uma (ou mais) classe, ao passar o mouse sobre o elemento será atribuído a este nova(s) classe(s) com o nome da(s) classe(s) atuais mais o sufixo "Over".
function aplicarHover(){
for(i=0; i < arguments.length; i++){
document.getElementById(arguments[i]).onmouseover = function(){
this.className = this.className+" "+ this.className.split(' ').join('Over ')+'Over';
}
document.getElementById(arguments[i]).onmouseout = function(){
var classes = '';
var novasClasses = this.className.split(' ');
for(k=0; k < novasClasses.length; k++){
if(!novasClasses[k].match(/(Over)/))
classes += ' '+novasClasses[k];
}
this.className = classes.substring(1);
}
}
}
No (X)HTML: Basta chamar "aplicarHover" informando como argumento a identificação (id) de todos os elementos que se deseja simular a pseudo classe hover. Como falado anteriormente esta solução trabalha somente sobre as classes dos elementos, sendo obrigatório que este elemento tenha uma.
No CSS: Deve-se declarar (ou não) uma classe com o mesmo nome daquela que informamos no atributo class de nosso elemento. Também devemos declarar classes com o sufixo Over, ou seja, temos a classe botao, teremos então que ter a classe botaoOver que será ativada no momento que passarmos o mouse sobre o elemento.
Veja um exemplo de como utilizar a função
Peço a vocês que reparem na rapidez do exemplo e na forma como foi construído. Em caso de dúvida jeantwo@gmail.com
Espero que seja útil, abraço a todos
[Editado 18out2006]
No link [JavaScript do site] (menu esquerdo), você pode encontrar uma outra versão da função aplicarHover. O funcionamento dela é muito semelhante da que temos aqui, porém podemos indicar elementos pelo nome de suas classes e não só pela sua identificação. A função encontrada no JavaScript do blog requer obrigatoriamente a biblioteca Prototype 1.4.0.
PS.: O recurso de deixar os blocos de código do blog com cor laranja é proporcionado por este função.
Pessoal, tenho notado que o blog está gerando pouco feedback da parte dos internautas. Então, resolvi mudar um pouco o rumo dos assuntos, resolvi que irei postar assuntos diversos sobre tecnologia.
O AJAX vem se destacando como uma "nova" tecnologia revolucionando a interação do usuário com o site. Neste pequeno, porém útil tópico, não irei falar aonde devemos usar o AJAX e nem mesmo que framework devemos usar (apesar de eu lhes indicar a Prototype, é claro). Neste tópico irei comentar o problema que todo brasileiro enfrenta e ainda vem enfrentando com a codificação de caracteres.
Certamente vocês já leram (se já estudaram AJAX) algum artigo disponibilizando fórmulas mágicas para resolver o problema dos caracteres "estranhos" em ajax. Técnicas de encodeURI em javascript, utf8_decode / encode em PHP e por ai vai... eu sei pois já usei muitas destas técnicas.
Este tópico tem a única função de ressaltar, ainda mais, a solução mais "correta" para este problema
Uma pequena introdução primeiro! O objeto XMLHttpRequest (e os demais), tem por padrão chamar páginas com codificação UTF8, diferente do padrão que geralmente usamos, o iso-8859-1.
O que devemos fazer para que a codificação fique correta, ou seja, que nosso documento seja compreendido como sendo iso-8859-1 ao invés de UTF8, é declarar explicitamente que nosso documento é iso-8859-1. Esta declaração é feita no cabeçalho de nosso documento.
O seguinte código ilustra como fazer tal feito em PHP. Lembrando que este código deve estar antes de qualquer retorno ao navegador (do tipo echo ou qualquer outro), pois esta função manipula o cabeçalho do documento que é enviado antes do documento propriamente dito.
<?
header('content-type: text/html; charset=iso-8859-1');
? >
Por hoje é isto pessoal, bom uso do AJAX para todos, futuramente postarei mais sobre o assunto. Abraços!
Começarei hoje com uma pequena "propaganda/historinha".
Eu já tentei, por diversas vezes, ser membro ativo de um fórum, e olha que tentei em diversos fóruns, mas sempre me decepcionava, enjoava... enfim. Semana passada "tentei" novamente, mas em um fórum diferente (até rimou), o iEvolution. Tenho apenas uma coisa a dizer a vocês: "Hoje, sou membro ativo de um fórum".
"Uma das formas que prototype.js adiciona funcionalidade é extendendo as classes JavaScript existentes." [Referência da prototype.js]
Este método nos permite extender todas as propriedades e métodos de um objeto para outro qualquer. Ou seja, estabelecer herança entre objetos, sejam eles contrutores ou não.
Objetos construtores: são os objetos que servirão como classe, e devem ser chamados com o operador new. Podendo ser funções simples, possuem a variável this que aponta para o objeto que é criado/instanciado. (completando nosso post sobre Class)
Object.extend(objetoDestino, objetoBase)
O exemplo criará um construtor conta, e extenderá a este construtor (observem conta.prototype) um objeto literal com os métodos initialize (obrigatório, ver Class) e verLimite. Após criará um outro construtor de nome contaBancaria, fazendo com que este herde todos os métodos e propriedades definidos com prototype para conta. No final de nosso exemplo temos minhaConta como objeto instância de contaBancaria e um alert disparado pelo método verLimite, comprovando que o construtor contaBancaria herda métodos e propriedades de conta.
var conta = Class.create();
Object.extend(conta.prototype, {
initialize: function(){
this.limite = 100;
},
verLimite: function(){
alert(this.limite);
}
});
var contaBancaria = Class.create();
Object.extend(contaBancaria.prototype, conta.prototype);
var minhaConta = new contaBancaria();
minhaConta.verLimite();
Object.extend = function(destination, source) {
for (property in source) {
destination[property] = source[property];
}
return destination;
}
for(variavel in objeto)
Laço (loop) que retorna todos métodos e propriedades de objeto em variavel. Para testar seu funcionamento basta acrescenter as seguintes linhas no final do nosso exemplo de utilização.
for(variavel in minhaConta){
alert(variavel+' = '+minhaConta[variavel]);
}
Podemos notar que variavel "guarda" o nome da nossa propriedade ou método. Ao escrever minhaConta[variavel], estamos acessando a propriedade ou método cujo nome é o mesmo contido em variavel, no caso da primeira iteração do loop, que variavel tem valor "limite", temos minhaConta.limite.
Object.extend() é um método de Object, e não um método de instância (aqueles definidos com prototype). Logo, este método não está disponível a todas as instâncias de Object. Espero que isto tenha ficado claro para vocês. O mecanismo de funcionamento de Object.extend() é muito simples, o que ele faz é apenas percorrer as propriedades e métodos do nosso objetoBase e atribuí-las ao nosso objetoDestino.
Aconselho vocês a procurarem na própria biblioteca aplicações de Object.extend(), isto faciliterá e muito o entendimento deste método simples.
Por hoje é só pessoal me coloco a disposiçao para esclarecimento de qualquer dúvida.
"Faça um Blogueiro feliz, deixe um comentário" (pra verem como já estou apelando...rs)
Abraços!
Hoje falaremos do objeto Class. Este objeto nos permite declarar classes definindo um método initialize(), que será chamado toda vez que esta classe for instanciada. Algo semelhante ao método __construct() presente na OO do php5. Com a ressalva que a classe declarada com o objeto Class obrigatoriamente deve ter um método initialize().
var novaClasse = Class.create();
novaClasse.prototype = {
initialize: function(argumento){
this.alerta = argumento;
this.alertarArgumento();
},
alertarArgumento: function(){
alert(this.alerta);
}
};
nossaInstancia = new novaClasse('Eu sou uma classe perfeita');
alert(nossaInstancia.alerta);
O exemplo acima irá gerar dois alertas, o primeiro disparado pelo método initialize() e o segundo disparado externamente. Mais exemplos da utilização deste objeto você encontra na própria biblioteca Prototype.
var Class = {
create: function() {
return function() {
this.initialize.apply(this, arguments);
}
}
}
No momento explicarei como funciona o objeto nativo prototype (falo nativo para que não o confundam com o nome da biblioteca, este objeto é definido pelo JavaScript), que é usado para definir métodos/propriedades de nossas classes e o método apply responsável por chamar o método initialize(). Se você já conhece prototype e applay, pode pular para a próxima parte.
O objeto prototype
Este objeto facilita adicionar métodos/propriedades a todas as instâncias de um objeto. Por exemplo, ao adicionar a propriedade limite a uma instância específica do objeto ContaBancaria, as demais instâncias deste objeto não terão a propriedade limite definida. Para isto que existe o objeto prototype, com ele podemos adicionar limite a todas as instâncias do objeto contaBancaria da seguinte forma:
contaBancaria.prototype.limite = 10.9;
Outro detalhe importante é que mesmo as instâncias declaradas anteriormente terão esta propriedade encorporada, pois esta propriedade será incorporada a todas as instâncias do objeto contaBancaria.
var contaBancaria = function(){}
pedro = new contaBancaria();
contaBancaria.protoype.limite = 10.90;
paulo = new contaBancaria();
alert(paulo.limite+' '+pedro.limite);
Para maiores informações recomendo JavaScript Kit e Object Oriented Programming in JavaScript.
O método apply
Function.apply(thisArgumento[, arrayArgumento])
Este método pertence ao objeto Function, ou seja, a todas as funções, sejam elas literais ou não, definidas pelo construtor new Function ou não. Applay serve para chamar um método, permitindo definir qual o objeto pai deste método (objeto que invocará este método, não necessitando ser o objeto que define o método chamado) e ainda passar um array de argumentos.
metodoAChamar.apply(objetoPai, arrayComOsArgumentos);
Para maiores informações recomendo DevGuru.
PS.: Este método será retomado no decorrer de nossos estudos, portanto se não conseguiu compreende-lo nã se desespere.
Finalmente chegamos ao que interesse. Como funciona!.
Você já deve ter notado que nosso objeto Class possui apenas o método create e também que este método é composto de uma função que retorna uma função... Por que isto!? Simples, quando o atribuímos a um objeto (objeto este que será nossa classe) da seguinte forma: classe = Class.create(); (observe os parênteses) disparamos a nossa 1ª função, que retorna nossa 2ª função. Para compreender melhor basta adicionar ao nosso exemplo de utilização a linha em negrito.
var novaClasse = Class.create();
alert(novaClasse);
novaClasse.prototype = {
...
Então, no momento que utilizamos o operador new para criar uma instância da "classe", disparamos nossa 2ª função.
function() {
this.initialize.apply(this, arguments);
}
No nosso exemplo de utilização teríamos:
this = nossaInstancia;
argument = ['Eu sou uma classe perfeita'] (array de argumentos passadas a função)
Assim nossaInstancia.initialize é invocada por nossaInstancia (this), recebendo como argumento os mesmos argumentos recebidos por new nossaInstancia('Eu sou uma classe perfeita').
Lembre-se que apply requer (ou não) um array com os argumentos que serão passados para initialize(), e como toda função chamada tem arguments (que é um array com todos os argumentos recebidos pela função), o que applay faz é apenas uma "ponte", ou seja, uma maneira de fazer chegar até nossaInstancia.initialize os mesmos argumentos passados para nossaInstancia.
Por hoje é só pessoal, espero que tenham compreendido bem o funcionamento do objeto Class. Qualquer coisa estou a disposição para esclarecer qualquer dúvida e quem tiver alguma contribuição/correção para o post basta deixar um comentário.
Abraços.
Antes de mais nada gostaria de pedir o que acharam do novo layout? Sim, eu sei... é um layout feito por um programador, mas eu me esforcei bastante pessoal. Outra coisa, gostaria a agradecer ao Chess que me deu uma mão no CSS, resolvendo o bug dos 3 pixels e indicando um bom artigo sobre One True Layout
Site oficial: http://prototype.conio.net/
Última versão: prototype 1.4.0
Como introdução e referência para esta biblioteca espetacular desenvolvida por Sam Stephenson, indico a vocês o que foi minha primeira e única referência de estudo sobre as funcionalidades desta biblioteca: Anotações de um desenvolvedor sobre a prototype.js de Sérgio Pereira. Ressaltando que a documentação é quase que 100% em português.
Outras documentações você poderá encontrar em http://www.prototypedoc.com/
Agora que vocês já baixaram a versão atual e já leram ao menos a introdução da documentação escrita por Sérgio Pereira, vamos partir para o início de nossos estudos, ou seja, entender como funciona a Prototype e de quebra aprender JavaScript e ter um ótimo exemplo de construção perfeita de código (confesso que aprendi muito e espero que vocês possam aproveitar um pouco da maestria do criador...rs).
PS.: Recomendo uma noção básica de programação e de JavaScript antes de prosseguir
Logo neste primeiro objeto nos deparamos com uma forma literal de representação. Estamos acostumados a ver literais strings e literais números, porém, desde a sua versão 1.2 o JavaScript também suporta formas literais para objetos, arrays e funções. Uma forma literal de objeto é representada da seguinte forma:
objeto = {prop1: valor1, prop2: valor2 [,...]}
var cadeira = {
cor: 'marrom',
posicao: function(){
return pegaposicaoCadeira();
}
}
No exemplo acima temos cadeira.cor com o valor marrom e cadeira.posicao como um método constituído de uma função anônima que retorna o valor da função pegaposicaoCadeira.
Para melhor compreender literais acesse literals.
Sobre funções literais não achei nenhuma referência completa, então irei comentar um pouco sobre elas. As funcões literais são equivalentes ao construtor Function, porém as funções literais são analisadas e compiladas uma única vez, ocasionando um significativo ganho de desempenho.
Uma boa bibliografia JavaScript - Javascript: O Guia definitivo de David Flanagan
var Prototype = {
Version: '1.4.0',
ScriptFragment: '(?:<script.*?>)((\n|\r|.)*?)(?:<\/script>)',
emptyFunction: function() {},
K: function(x) {return x}
}
O objeto Prototype contém as seguintes propriedades e métodos:
- Version: define a versão da Prototype;
- ScripFragment: expressão regular que será usada por outros objetos para casar com tags <script>. (entraremos em detalhes mais adiante);
- emptyFuncion: função vazia, ao executá-la teremos um retorno vazio;
- K: método que apenas retorna o argumento passado a ele.
Como você pode notar este objeto não tem grande importância, servindo apenas de apoio para outros objetos.
Por este post é só pessoal, amanhã continuamos os estudos. O que estão achando? Deixem um comentário ou enviem um mail jeantwo@gmail.com.
Abraços
Postagem editada para correções.
Apartir deste momento tenho meu próprio blog.
Este blog é destinado a conteúdo para desenvolvedores web, ou seja, irei falar de JavaScript, php, AJAX talvez até um pouco de CSS e HTML, mesmo não sendo muito meu chão.
Como proposta inicial para o blog irei publicar uma série de posts explicando como funciona a biblioteca (Framework) Prototype. O que irei escrever é resultado de semanas de estudos em torno de como realmente funciona esta espetacular biblioteca. Mas por enquanto não irei nem ao menos explicar o que é (para aqueles que não a conhecem).
Até o próximo post: - 2º Introdução a prototype