Efeitos Na Mootools

março, 12 - 2008

Voltei pessoal! E falando da Mootools, que andei estudando recentemente, mais especificamente sobre efeitos, uma parte muito divertida e legal.
Os efeitos na Mootools são divididos em algumas classes, que estão dentro de Fx, cada uma delas com um objetivo diferente. Falarei hoje nesse post da Fx.Style, Fx.Styles e inevitávelmente da Fx.Transitions, as duas primeiras basicamente mudam uma propriedade de estilo CSS gradualmente ao longo de um tempo de acordo com uma determinada transição, que está contida dentro da última classe referida. A principal diferença entre as duas classes é que a primeira só aplica efeito sobre uma propriedade e a segunda sobre mais de uma propriedade, as duas relacionadas a um elemento.

Transições

A classe Fx.Transitions nos fornece uma lista de transições, que alterarão a animação, para serem usadas em nossos efeitos. Transições são responsáveis por modificar os valores intermediarios entre o inicio e o fim de uma animação. Por exemplo, quando se quer modificar a largura de um elemento de 10 a 15 pixels, a transição será responsável por definir que, por exemplo, no 300º milissegundo da animação a largura terá 12 pixels. Cada transição, exceto a linear, contem 3 opções de easing:

  • easeIn: o efeito é mais intenso no ínicio da animação
  • easeOut: o efeito é mais intenso no final da animação
  • easeInOut: o efeito é mais intenso no ínicio e no final

Escolhida a transição e o método easing, você pode obte-lá desse modo:

// Fx.Transitions.[tipo de transição].[método easing]
Fx.Transitions.Sine.easeInOut

A dica pra escolher a combinação certa é testando, verifique cada transição nesse demo de transições.

Alterando Uma Única Propriedade CSS Com Fx.Style

Primeiro nos precisamos decidir o elemento que receberá o efeito, depois disso temos dois meios de criar o efeito. O primeiro, clássico, usando o construtor, que aceita três argumentos: o primeiro o elemento em si, o segundo a propriedade CSS que será modificada e o terceiro uma lista de opções:

var obj = $("box");
var fx = new Fx.Style(obj, "height", {
	"transition": Fx.Transitions.Sine.easeInOut, // Transição a ser usada na animação
	"duration": 1000, // Duração em milissegundos
	"unit": "px", // Unidade usada para alterar a propriedade
	"wait": true, // Aguardar ou não a animação anterior de mesma instância para começar
	"fps": 50 // Quadros por segundo da animação, quanto maior melhor e mais lento
});

O segundo meio, que eu prefiro, é um atalho no próprio objeto (instância de Element), o método effect, que recebe os argumentos 2 e 3 iguais do construtor acima:

var obj = $("box");
var fx = obj.effect("height", {
	// Mesmas opções
});

Terminada a criação do efeito, temos que iniciá-lo efetivamente, para isso temos o método start. Ele aceita 1 ou 2 argumentos, no primeiro caso o primeiro argumento é o valor final da propriedade, o inicial será o valor atual:

fx.start(350); // O objeto terá a largura igual a 350 pixels no final

Já no segundo caso, o primeiro argumento é o valor inicial e o segundo o final:

fx.start(10, 350); // O objeto terá 10 pixels no ínicio do efeito e 350 depois de terminado

Dica: Se você for alterar a mesma propriedade várias vezes não crie uma nova instância a cada vez, use a que já foi criada e chame o método start pra cada efeito.
Pronto, bem mais legal do que mudar propriedades sem efeito, né?!

Alterando Várias Propriedades CSS Com Fx.Styles

Quase a mesma coisa que a classe Fx.Style, porém algumas diferenças. Continuamos com 2 meios de se obter a instância, ou pelo construtor, que aceita 2 argumentos iguais ao anterior: o elemento e as opções, a exeção é o nome da propriedade que será modificada, já que são mais de uma propriedades elas serão definidas na hora de iniciar o efeito:

var obj = $("box");
var fx = new Fx.Styles(obj, {
	// Mesmas opções
});

Ou pelo método effects do objeto:

var obj = $("box");
var fx = obj.effects({
	// Mesmas opções
});

Agora vamos iniciar o efeito, a diferença principal para Fx.Style é que é aqui que serão definidos os valroes das propriedades atrávez de um objeto (JSON):

fx.start({
	"height": 350, // Efeito iniciará com altura atual e terminará com 350 pixels
	"width": [10, 350], // Efeito iniciará com largura 10 pixels e terminará com 350 pixels
	"background-color": ["#FF0000", "#0000FF"], // Cor de fundo vermelha no início e azul no final
	"color": "#FFFFFF" // Cor do texto atual no início e branca no final
});

Como se pode perceber, se você fornecer um Array como valor da propriedade, o primeiro elemento será o valor para ser usado no início do efeito e o segundo no final, ou se fornecer somente um valor, esse será o valor final e o inicial será o valor atual da propriedade.
A mesma dica anterior também vale aqui, porém como aqui se modificam várias propriedades, a regra é: se você tiver que aplicar vários efeitos a um elemento várias vezes, use a mesma instância e chame o método start.

Viu como não é difícil brincar com a Mootools, gostei muito do suporte a efeitos, animações, esse tipo de coisa, é muito transparente, quem já implementou (ou tentou implementar) algo assim sabe como é difícil fazer um trabalho bem feito e ao mesmo tempo simples de se usar. Esse é um ponto forte da Mootools.

Flws pessoal, até a próxima!

Anúncios

Internet Explorer 8 Nos Padrões

dezembro, 20 - 2007


Esse vídeo não é falso (espero!), o Internet Explorer 8 passou no teste Acid2. Finalmente podemos ver uma luz no final do túnel em relação aos padrões e o Internet Explorer. Isso será um fato histórico se a versão final comprir o que promete. Há quanto tempo você xinga a Microsoft enquanto desenvolve um layout?! Isso vai acabar! Isso não quer dizer que usarei IE agora, nem perto disso, Firefox está a anos-luz dele, mas é uma notícia que merece ser comemorada. Fiquei sabendo no Revolução Etc, notícia original no site da evangelizadora dos padrões, que foi contratada pela Microsoft, Molly: Sim senhoras e senhores, nós temos um sorriso.

Powered by ScribeFire.


About the Framework

fevereiro, 17 - 2007

People,
To acabando o Framework Untitled hehehe. Não tenho idéia de que nome coloco nele, me ajudem, comentem aí. Comecei com jRuf, nome horrível, depois pensei em jThing, já que estava sem idéia, horrível também. Preciso de opinião galera.
Como comecei há um tempo, não estava nem aí pro Framework, um dia codificava mais um pouco, outro dia não codificava. Foi recentemente que notei o quão grande ficou, meu objetivo inicial era só algumas funções para ajudar no desenvolvimento de projetos, mas acabou ficando grande. Pensei, por que guardar isso só para mim? resolvi divulgar, falta criar a documentação (ohh preguiça) e comentar o código (tenho uma mania horrível de não comentar!), depois de fazer isso, vou criar um site para o Framework (untitled yet, hehe) e divulga-lo mais.
Agora vou apontar a página aonde testei os métodos do Framework, coisa suja mesmo era só para testar. E a página demo que estou desenvolvendo. Não façam download ainda não pois estou terminando, o Framework é composto por 4 módulos, são eles: 

  • Prod: Estende Classes nativas como String e Array + Funções DOM, CSS e etc.
  • Effects: Efeitos + Outras funções
  • Ajax: Ficou legal, ótimo suporte, para requisições simples e complexas
  • DragDrop: Ainda está pequena, comecei recentemente

Flwss pessoal e comentem aí!

powered by performancing firefox


Reportando diferenças de javascript entre navegadores e suas soluções

janeiro, 4 - 2007

Gente, estou fazendo uma espécie de Framework para uso próprio, sei que muitos vão falar que isso é idiotice blá, blá. Conheço diversos Frameworks ótimos como o Prototype, jQuery, etc… Mas quero me centrar em um arquivo que use em todas as minhas produções e trabalhos (Não é bem um “Framework”). Bom este arquivo tem muitas funções, diversas já postadas aqui. A partir de agora, reportarei todas as dificuldades de interpretação de Javascript entre Browser e as soluções que consegui. Hoje não postarei nada, mas prometo que breve começarei, e por favor comentem, escrever pra “ninguém” é chato! Flwss pessoal. Até!


Codificação de Caracteres no Eclipse

dezembro, 28 - 2006

Alo galera! Talvez essa seja a matéria de final de ano aqui hehe. Boas Festas para Todos!

Vou falar sobre uma coisa que muito me encomodou durante minha transição do Dreamweaver para o Eclipse, a codificação. O Eclipse como muitos já sabem é considerado uma ótima IDE pela facilidade de instalar plugins e integrar todo o desenvolvimento nele, seja qual for a linguagem. Tive que passar para o Eclipse pelo fato de o DW não ter suporte a Ruby, quanto menos a Rails, que estou começando a aprender (linguagem super simples!) e como já usava o Aptana integrei tudo logo, desde então não o largo mais, é ótimo.

Por exemplo, nele mesmo eu programo em Javascript, PHP (com PHP IDE), Ruby (com RDT) e Ruby com o Rails (com RadRails), e para layout e dados com CSS, XHTML e HTML uso em conjunto o Aptana e o WST, tudo isso com plugins, aliás nem programo em Java (não sei!) nele, hehehe. Além de ter a vantagem de poder levar na Pen Drive.

Mas quando eu mudava meu ambiente tudo ia a mil maravilhas até que abro uma página cheia de "?" no lugar de letras acentuadas, xiihh f####. Fui ver de quem era o problema, se era da página codificada erroneamente pelo DW ou se era do recém Eclipse mal configurado. O único jeito de verificar que achei foi abrir o arquivo no Bloco de Notas e ver como estava. Para meu espanto estava tudo certo com os acentos etc. Pronto! O erro era do Eclipse!

Abaixo eu mostro todos os passos que fiz para conseguir abrir os arquivos com acodificação certa, com a certeza de que seus arquivos sejam codificados em "ISO-8859-1"ou "Latim 1".

  1. Vá até "Window > Preferences… > General > Workspace > Text file encoding" lá embaixo e mude de "Default (Cp1252)" para "Other: ISO-8859-1".
  2. Vá nas configurações do seu plugin editor (se tiver) e mude a codificação para "Other: ISO-8859-1" para criar e abrir arquivos.
  3. Agora em "Window > Preferences… > General > Content Types" e abra a opção "text", selecione o tipo de arquivo que esta com problemas, e lá embaixo em "Default Encoding" coloque "ISO-8859-1".

Por hoje é só, espero que tirem bom proveito. Um próspero ano novo a todos! Boas Festas!


Entrevista com o Maujor e a Validação

novembro, 26 - 2006

Entrevista

Então galera, como alguns podem ter visto o site iEvolution fez uma entrevista com Maurício Samy, mas conhecido por Maujor.

Muito legal, para os que ainda não passaram lá aqui vai o link para a entrevista com o Maujor, lá eles vão discutir muitas coisas e lógico com o maior foco em CSS WebStandards etc. Tem várias perguntas das mais variadas, vale a pena conferir.

Validação

” Validação e semântica são conceitos completamente diferentes e sem qualquer dependência entre si.” – Disse Maujor na entrevista. Ele fala que um site bom deve ser validado e semântico, até aí concordo plenamente. Mas sobre o que eu citei ali, não acho que sejam completamente diferentes, pois vamos comparar o HTML à lingua Portuguesa, Validação seria escrever certo e Semântica seria escrever com lógica, com as palavras nos lugares certos. Por isso acho que não são conceitos completamente diferentes, até aí tudo bem. Mas sem qualquer depêndencia entre si?! Pra mim tem sim, nada adianta você escrever um código completamente semântico sem fechar nenhuma tag (diferente de total validação, alguns erros são completamente normais e acarretam em não validação), ele não vai ser renderizado igualmente entre os navegadores. É daí que vem o conceito de XHTML que se assemelha ao XML, o qual não pode ter erros de sintaxe já que é interpretado por maquinas. Concordo com ele que um selo não prova nada em um site, tanto que nem selos eu coloco, hehe.

Mas quem sou eu pra questionar o Maujor, acho que todo mundo que escreve sob os padrões já deve ter visitado seu site. Como dizem lá na entrevista ele é uma referência em CSS e XHTML. Então deve ter tido sérios motivos para dizer o que disse, além do que é ele que prega ainda mais a prática do uso dos Padrões da Web (i.e. WebStandards) no Brasil.

Hoje fico por aqui.