Pra usar é bem fácil, a interface conta com 4 quadrados, o do HTML, CSS e Javascript, tem também o quadrado do resultado que é justamente o local que junta os outros 3 e forma o resultado.

Além de testar os recursos visuais você também tem o recurso de Ajax, basta efetuar uma solicitação por Ajax nos endereços /ajax_json_echo/ para JSON e /ajax_html_echo/ para HTML. Ambos aguardam 2 segundos antes de responder, isso para simular a latência da web, ambos retornam tudo que foi enviado.

Além disso tudo o jsFiddle permite que você salve e compartilhe o seu código, além de permitir que você incorpore em qualquer site, facilitando quando você precisa fazer algum tipo de Demo para exibir o seu código, inclusive eu testei o jsFiddle aqui no site no post da classe de SlideShow com Mootools.

Abaixo tem alguns exemplos de javascripts utilizando o jsFiddle:

• jQuery Tweets – http://jsfiddle.net/pborreli/pJgyu/
• ElementStack com Mootools – http://jsfiddle.net/oskar/c6n7q/
• RequestHTML com Mootools – http://jsfiddle.net/zalun/NF2jz/

Chegando lá encontrei esse SlideShow na parte de Widget no Mootools Forge feito pelo Ryan Florence.

Perfeito para o que eu estava precisando, ele faz slide de tudo, não somente imagens. Possui transições entre os elementos ou se deseja você pode definir a sua própria transição.

A classe vem com o básico de um slideshow, você pode extender criando seus botões de navegação facilmente.

Agora chega de papo e segue o demo e link para download.

Download

Clique aqui para baixar: Mootools forge / SlideShow

Demo

Clique no link abaixo para ver uma demonstração.

http://jsfiddle.net/rpflorence/KkuRZ/light/

Achei uma excelente idéia, fica muito mais fácil eu pegar um script pronto, comentar o código em português afim de tentar explicar o funcionamento, e óbiviamente explicar também como incorporar o script no site.

Simplesmente adorei, este visitante me deu a seguinte URL como exemplo: http://ammunitiongroup.com/index.php/work/

Como podem ver existem diversos scripts nesta página, resultando em diversos efeitos diferentes.

O que irei fazer é explicar efeito por efeito, acredito que desta forma todos poderão compreender alguns dos scripts.

O Resultado final

Clique no link abaixo para abrir o script já em funcionamento, redimensione a janela do navegador e veja como ficará o conteúdo da página.

Clique aqui para ver o resultado final.

Destrinchando o script

Ok, abaixo está o código, tentei comentar tudo que entendi, caso tenham dúvidas basta comentar que tentarei ajudar.

// algumas definições iniciais
var ratio = 1;		//propoção inicial, 1 = 100%
var objs = [];		//objetos que serão monitoradis e redimensionados
var id_index = 0;	//uma variável para um contador
 
/*
Classe principal, responsável por definir a cada objeto html que chamar
esta classe os estilos que podem ser redimensionados, ou seja, nem todos
os objetos html possuem todos os estilos citados abaixo, esta classe
basicamente testa e filtra os filtros compatíveis
*/
var ScalableObject = new Class({
  initialize: function(id, obj, compatible) {
    if(typeof(compatible) != 'Array')
      this.compatible = ['height', 'width', 'top',
        'left', 'font-size','margin-top',
        'margin-bottom', 'margin-left',
        'margin-right', 'padding-top',
        'padding-left', 'padding-bottom',
        'padding-right', 'line-height',
        'bottom', 'right'];
    else
      this.compatible = compatible;
    this.obj = obj;
    $(obj).store('scaleID', id);
    this.styleList = [];
    this.id = id;
    for(var i=0; i<this.compatible.length; i++) {
      if($(obj).getStyle(this.compatible[i]).indexOf('px') == -1) {
        this.compatible.splice(i, 1);
        i--;
      } else
        this.styleList.push(
          $(obj).getStyle(this.compatible[i]).split('px')[0]
        );
    }
  },
/*
o arqumento "r" é a proporção na qual o objeto em questão será
redimensionado este valor será em porcento porém em decimais,
exemplo, 50% seria 0.5, 80% = 0.8 e por aí vai
*/
  scale: function(r) {
/*
basicamente para cada estilo compatível, calcula o tamanho de
acordo com a propoção passada e redimensiona
*/
    for(var i=0; i<this.compatible.length; i++)
      if($(this.obj).getStyle(this.compatible[i]).indexOf('%') == -1)
        $(this.obj).setStyle(
          this.compatible[i], this.styleList[i] * r +'px'
        );
  }
});
// Uma verificação básica para ver se é Safari no Mac
var isMacSafari = (
  navigator.vendor &&
  navigator.vendor.indexOf('Apple') != -1 &&
  navigator.platform &&
  navigator.platform.indexOf('Mac') != -1
);
/*
Repare que para todos os outros navegadores está sendo chamado no
domready somente no Safari do Mac que é chamado no load
*/
window.addEvent(((isMacSafari) ? 'load' : 'domready'), function() {
/*
chama a função responsável por definir os objetos compatíveis
a serem redimensionados
*/
  init_resize();
  // já calcula e redimensiona os objetos
  resize();
  // aqui é que fica algo muito importante, será chamado a função
  // resize() sempre que a tela for redimensionada
  window.addEvent('resize', function() {
    resize();
  });
});
/*
Função que define quais elementos serão redimensionados,
reparem que não são todos os elementos e alguns outros
não é nem necessário utilizar todos as propriedades css
compatíveis, portanto o ideal é definir quais propriedades
css você quer redimensionar, isso é importante pois
dependendo do css original de sua página você poderá
distorcendo tudo.
*/
function init_resize() {
  // todas as divs
  var divs = $$('div');
  // todas as imagens
  var images = $$('img');
  // todos os que estão aí abaixo
  var text = $$('a', 'h1', 'h2', 'h3', 'p', 'input', 'textarea');
  for(var i=0; i<divs.length; i++)
	objs.push(new ScalableObject(id_index++, divs[i],0));
  // repare que para as imagens somente as propriedades css que
  // foram definidas aqui serão trabalhadas
  for(var i=0; i<images.length; i++)
    objs.push(
      new ScalableObject(
        id_index++,
        images[i],
        ['height','width','margin-bottom','margin-right']
      )
    );
    for(var i=0; i<text.length; i++)
      objs.push(new ScalableObject(id_index++, text[i],0));
}
function resize() {
/*
a proporção a ser definda nos objetos da página é de acordo com o
limite definido abaixo, ou seja, o ideal seria que a altura da página
fosse 735px, qualquer coisa acima ou abaixo disso será redimensionada.
O mesmo ocorre para a largura, o ideal é que a altura fosse 1000px,
qualquer coisa acima disso será redimensionado.
Abaixo será escolhido a menor proporção.
*/
  ratio = Math.min(window.getSize().y / 735, window.getSize().x / 1000);
  // repare que a propoção será no máximo 100% e no mínimo 34%
  ratio = (ratio > 1) ? 1 : (ratio < .34) ? .34 : ratio;
  // manda redimensionar todos os objetos de acordo com a proporção
  for(var i=0; i<objs.length; i++)
    objs[i].scale(ratio);
}

Baixe os arquivos e incorpore em seu site

O javascript utilizado neste exemplo pode ser baixado clicando no link ao lado: Clique aqui para baixar

Primeiro você precisa incluir o Mootools na página, sugiro utilizar o AJAX APIs do Google para incluir o Mootools na página, veja abaixo como incluir facilmente o Mootools em seu site utilizando o Google AJAX API.

<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load("mootools", "1.2.3");
</script>

Agora basta incluir o script de redimensionamento de conteúdo na sua página, note que ambos os scripts devem ser inclusos no HEAD do documento, reparem também que o Mootools está sendo incluso antes de chamar o script.

<script src="http://www.google.com/jsapi" type="text/javascript"></script>
<script type="text/javascript">
google.load("mootools", "1.2.3");
</script>
<script src="resize.js" type="text/javascript"></script>
</head>

Conclusão

Reparem que é um script muito básico, é claro que é possível fazer isso tudo sem utilizar o Mootools, mas com Mootools o código fica muito mais fácil de ler e compreender.

Espero que tenham gostado e e até a próxima.

• Mootools Brasil muda o layout
• Mootools ganha nova versão: Mootools 1.2.2, que possui diversas atualizações de bugs e uma imensa atualização no Class.
• Já há planos para o lançamento do Mootools 2.0
• Mootools More ganha nova versão: Mootools More 1.2.2.2, esta versão possui diversos novos plugins e algumas outras novidades.
• Documentação em inglês mais completa do Mootools More foi lançada

Com Mootools você terá um ambiente fácil de programar sem se preocupar com o javascript para os diversos navegadores, á API cuidará de todo o trabalho de compatibilidade e você só precisa criar aquilo que você precisa só que utilizando Mootools.

O que você precisa saber?

O ideal é que você tenha alguma noção de javascript, isso ajuda quando você deseja criar seus próprios scripts com Mootools, aqui vai um link para aprender um pouco de javascript http://www.javascript-tutorial.com.br/content-cat-1.html

Lembrando que para inserir scripts prontos com Mootools não é necessário que você saiba javascript mas uma noção e pelo menos um conhecimento de CSS e HTML são necessários.

Baixando Mootools

Pra baixar o Mootools é bem fácil, veja a página de downloads para saber como baixar no site oficial do Mootools.

Caso você esteja querendo aprender mais sobre a biblioteca do Mootools, e já tenha algum conhecimento avançado com javascript, eu sugiro baixar a versão sem compactação, desta forma você poderá ver como é feito por trás.

Adicionando em suas páginas

Pra adicionar o Mootools em suas páginas é bem simples, basta incluir as tags <script> dentro da tag <head>, coloque primeiro a biblioteca do Mootools e depois coloque o seu script com as instruções que utilizam a biblioteca, você pode colocar as instruções na própria página ou em um arquivo externo, segue um exemplo abaixo com arquivo externo.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en" dir="ltr">
  <head profile="http://gmpg.org/xfn/11">
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <title>Your title</title>
    <script type="text/javascript" src="mootools.js"></script>
    <script type="text/javascript" src="scripts.js"></script>
    <script type="text/javascript">
    // Códigos incorporados na própria página
    </script>
  </head>
  <body>....</body>
</html>

Escrevendo os seus próprios scripts

Agora que você já sabe adicionar a API do Mootools é hora de aprender a criar seus próprios scripts, leia alguns dos tutoriais e exemplos disponíveis aqui no site e não se esqueça de consultar a documentação.

Algo que eu geralmente recomento é executar os seus scripts dentro do evento domready isso irá garantir que o seu script seja executado assim que o html for carregado, antes mesmo das imagens serem carregadas, em breve maiores informações sobre isso.

Ele veio com uma dúvida, de início parecia ser algo relacionado ao Mootools mas fui analisando, indo linha por linha do script que ele me apresentou, utilizando algumas ferramentas básicas, tal como  o Firefox e o seu maravilhoso complemento Firebug, utilizei também o HTTP Analyser para monitorar o que exatamente estava sendo solicitado por HTTP.

No final identifiquei o problema, enviei os arquivos já modificados para ele, que rapidamente enviou para o site e fez as alterações necessárias para as demais páginas funcionarem.

Foi ótimo, de certa forma foi um desafio, e eu adoro desafio, me empenho legal e só termino quando resolvo.

Alessandro, obrigado por ter acessado o meu site e ter entrado em contato comigo, espero que volte sempre por aqui.

Obs.: Qualquer visitante que tiver com alguma dúvida é só falar, farei o possível para ajudar.

Traduzi a página que fala das funções específica do Core do MooTools, ou seja, as principais funções, as que são mais utilizadas, são as funções de apoio para todo o framework.

Para visualizar a página recém traduzida basta clicar aqui para ver a página traduzida do Core do MooTools.

Se tiver algum erro de português basta me informar que irei corrigir.

O Mootools Brasil é novo, é interessante e o mais importante ele ainda não tem nada de interessante

Pois é, ainda estou juntando um material maneiro pra colocar aqui no site, é só aguardar pois este material estará aqui em breve.

Obrigado pela visita e volte sempre.