Ando procurando a bastante tempo um plugin pra Joomla! que faça o mesmo trabalho visto na maioria dos portais como Terra, Globo.com e Uol, mostrando na página inicial os destaques de conteúdos do site, com controle avançar/voltar e descrição de cada uma. Tinha muita vontade de colocar uma no meu site, mas nao queria criar isso em flash.
Foi lendo um artigo do blog Usuário Compulsivo que cheguei até Jonathan Schemoul, o cara que criou a Smoothgallery, uma galeria feita com mootools que faz justamente o que eu queria. Depois de ver alguns exemplos, baixei e vou utilizar-la no meu site.
Agora só falta adaptar pra utilizar no Joomla!, já que todos os plugins desse tipo existentes são pagos…

Todos os que usam ou usaram Javasacript para alguma coisa, já sentiram muitas dificuldades para manipular os objetos DOM criados nos browsers devido ao cross-bowser.

O JQuery facilita essa tarefa de cross-bowser, e ainda provê outras facilidades como efeitos de animação e manipulação de requests AJAX, tanto para request comuns como para formulários.

Ainda existe a possiblidade da criação de plugins para o JQuery por qualquer desenvolvedor. Eu mesmo, em conjunto com o Leandro Cunha do site Rio Lounge, desenvolvemos um plugin de Lightbox escalonável, que se adapta a resolução da tela ou tamanho da janela do browser. Em breve disponibilizaremos na web.

Vejamos um exemplo de como JQuery facilita o acesso aos elementos DOM.

Caso você queria que todos os elementos “a” com class definida como link_teste, ao serem clicados exibam um alerta dizendo “Hello world!!!”, ficaria da seguinte forma em javascript puro:

var x = document.getElementsByTagName('a');
for(var i = 0; i < x.length; i++){
    if(x[i].className == 'link_teste')
        x[i].onclick = function(){ alert('Hello world!!!');return false;};
}

Já usando JQuery podemos fazer da seguinte forma:

$('a.link_teste').each(function(){
    $(this).click(function(){ alert('Hello world!!!'); return false;});
});

Uma forma muito mais intuitiva e simples que na forma tradicional.

Um outro ponto a favor do JQuery é o tamanho total da biblioteca, que é bem menor do que os seu concorrentes como Prototype e Moo-FX.

Nos próximos posts coloco explicações mais específicas sobre a biblioteca.

Abs.

MooTools is a compact, modular, Object-Oriented JavaScript framework designed for the intermediate to advanced JavaScript developer. It allows you to write powerful, flexible, and cross-browser code with its elegant, well documented, and coherent API.
Reffer: http://mootools.net/

Premetto che ho sempre usato librerie aggiuntive scritte in Javascript solo quando erano necessarie chiamate Ajax o effetti speciali particolari (tipo per l’apertura di menù). Ho sempre usato quella di Prototype (qui un otitmo manuale) abbinata a Scriptaculous per gli effetti.
So che sono uscite numerose altre librerie che non hanno nulla da invidiare a quelle sopracitate.
A volte ho usato Moo.fx (creata da un italiano) ma alla fine non è mai rientrata in un mio progetto andato online: in alcune occasioni usata solo in siti di prova, in altre ho preferito Scriptaculous che conosco meglio.

La scorsa settimana mi è capitata sott’occhio jQuery. Ho potuto documentarmi solo nei pochi momenti liberi e oggi ho dato uno sguardo più approfondito ai plugin sviluppati ad hoc per questa libreria.
A primo acchito mi sembra veramente completa e potentissima. A conoscerla bene “sembra” che si possa comandare con pochissime righe di codice. Mi ha veramente stupito.
Il sito ufficiale è ben fatto, documentato e ricco di plugins. Sono infatti queste piccole parti di codice messe a disposizioni dagli sviluppatori a renderla così leggera e dinamica.
Il core pesa infatti 27KB, gli si devono poi aggiungere i plugin che si desidera usare.
Quelli che ho visto vanno dalla sottolineatura delle righe della tabella al passaggio del mouse, ai popup window, dalla creazione di librerie di immagini, agli effetti sulle foto, dagli inserimenti automatici di plugin per video (quicktime, mpeg, flash ecc) grazie a una semplice “class”, alla gestione di complicati “tree”, dalla validazione dei form ai soliti usai di Ajax con chiamate asincrone e autocompletatori. E mille altri effetti.

Cheddire: veramente fica!

Appena mi capiterà l’occasione la userò molto volentieri.
Peccato che il nuovo sito al quale sto lavorando non la necessiti (per ora ).

Recently i was very much attracted toward moo.fx library. For my website I was previously using scriptaculous, but because of the size problem i decided to move toward moo.fx. The size of moo.fx library is really pretty low(its just around 3kb).
As a matter of fact i would like to tell u that i just wanted to use moo.fx over prototype, i didn’t wanted to use mootools. Actually initially when the development of moo.fx started it was just built on top of prototype.js, but later on they moved to make mootools as underlying library in place of prototype.
During my study i couldn’t find any good article on web which can give me some example to use just moo.fx. The documentation available on http://docs.mootools.net is using mootools library. Other resources available on internet are using some older version of moo.fx. So i finally thought that it would be better it i write something which can be used directly to use moo.fx library.

I don’t believe in talking about code, its always better to understand code as it is.
The first example is to make an Accordion.

At first include the files in <head> section

<script type=”text/javascript” src=”js/prototype.js”></script>
<script type=”text/javascript” src=”js/moo.fx.js”></script>
<script type=”text/javascript” src=”js/accordion.js”></script>

Write following code in <body> section.

<div id=”accordion”>
<h3 class=”toggler”>
History
</h3>
<div class=”element”>
<p>
The first suggestion that all organisms may have had a common ancestor and diverged
Venus physique. </p>
</div>
<h3 class=”toggler”>
Evidence of universal common descent
</h3>
<div class=”element”>
<h4>
Common biochemistry and genetic code
</h4>
<p>
All known forms of life are based on the same fundamental biochemical organisation:
common descent. Analysis of the small differences in the genetic code has also
provided support for. </p>
<div style=”clear:both”></div>
</div>
<h3 class=”toggler”>
Examples of common descent
</h3>
<div class=”element”>
<h4>
Artificial selection
</h4>
<p>
Artificial selection offers remarkable examples of the amount of diversity that can
selection, like the ones below, occurred without the guidance of modern scientific
insight.
</p>
</div></div>
Now come the actual catch: Copy this code in last of body section.

<script type=”text/javascript”>
var h3s =document.getElementsByClassName(‘toggler’)
var divs = document.getElementsByClassName(‘element’)
var accordion = new Fx.Accordion(h3s, divs);
</script>

I think this would help you in creating accordion using moo.fx.

Wait for next blog, to use moo.fx in changing styles.

Certo, achei o nifty corners cube… muito bom mesmo. Mas minha surpresa foi usar ele com o pngfix.js (aquele famoso pra o IE rederizar png): as bordas simplesmente nao aparecem! Procurei um pouco hoje sobre como resolver, mas ate agora nada.

Solução temporária? USE JPG (ou gif, tanto faz).

Submit your forms 'the Ajax way' with hidden iframes! This way you will still have full GET/POST/FILE upload support without messy string joining, escaping and encoding in javascript.
This uses prototype lite from moo.fx and is almost 100% compatible with moo.ajax!

read more | digg story

Pois é… acredite. Eu procuro, procuro, procuro… e acabo achando outra coisa! hahaha. Estava eu, vagando pela internet tentando achar, nem que fosse por acaso, alguma coisa sobre “background gradient”. Queria o efeito que se faz como o filtro da M$, mas que rodasse no Firefox também. Dai que por acaso entrando em um blog (que infelizmente nao me lembro qual) vi um artigo sobre “rounded transparent corners”… isso me chamou atenção. Fui conferir e me surpreendi: cantos arredondados transparentes… e sem imagem! Baixei o tal do Transcorners, o script que possibilita isso e estou buscando implementar ele em um site que estou terminando de desenvolver. Interessante é que usa o Mootools… pra variar hehe. Assim que tiver novidades sobre o dito cujo, posto aki.

Up: Descobri que o Transcorners não funciona com a última versão do mootools (rev. 83). Em compensação achei outros scripts q funcionam bem, como o curvycorners e o Niftycube.

Ow… eh muita coisa nova ao mesmo tempo pra assimilar. Navegando por ai conversando com amigos, descobri algumas coisas novas na web. Tudo bem, pode me chamar de atrasado e blá blá blá. Mas agora eu to empolgadão com o tal do ajax e as tais bibliotecas de javascript q fazem um monte de coisas legais e te fazem ganhar bastante em visual junto com CSS. Não me peçam nomes técnicos, eu nem sou ligado muito com isso. Me importa mesmo eh o resultado. Ainda to iniciando no uso, com algumas dificuldades… mas deu pra perceber q o skema eh forte. Dando uma olhada no moo.fx vc vai ver como o negócio eh bonito. Limpo, leve, elegante… tudo que eu tava procurando. hehe. Espero que seja um bom futuro. E eu continuo aki aprendendo…