Mootools for the masses!!!

Há! Finalmente! Meu primeiro post sobre o framework Javascript Mootools!

Como usuário assíduo do Mootools à quase 2 anos e meio, é quase vergonhoso que só agora minha pessoa tenha se dignificado a gastar alguns minutos de minha madrugada escrevendo sobre este estupendo framework. Bem, não mais! O ócio foi vencido, e agora, venho aqui, falar deste, que é um concorrente a altura de outros frameworks conhecidos como Dojo, Mochkit e JQuey.

Bem, tentando respeitar a didática de meus antepassados, vou começar falando primeiro o que o Mootools é: O Mootools é um conjunto de funções e funcionalidades que permitem, aliadas a um navegador web, extender a usabilidade do Javascript a níveis aceitáveis. Ou seja, o javascript com o Mootools passa a ser o que o Javascript devia ser, sem o Mootools. Não acredita? Exemplo simples:

Para pegar um elemento de uma página web, pelo seu atributo id, utilizando Javascript, o seguinte código seria necessário:

document.getElementById('id_do_elemento');

com Mootools, o mesmo resultado se pode ser obtido com o seguinte trecho:

$('id_do_elemento');

Iaí, grande diferença? Não? Tenta fazer o primeiro código 20 vezes em um arquivo js ou dentro de uma página, para você ver o tamanho do parto! Mas, o Mootools não se detem a isso. Ele também permite diversos outros truques, pois ele não apenas te fornece funções para trabalhar com js, ele cria novas funcionalidades e formas de se realizar tarefas comuns a páginas web.

Por exemplo, adicionar eventos a elementos de uma página como o evento de "click", onde uma função é disparada ao se clicar em um botão, texto ou imagem, pode ser feito através da função addEvent, que é automaticamente adicionada a todos os elementos do documento.

$('elemento').addEvent('click', function(event){ alert('fui chamado com um clique do mouse!') });

Outra: o Mootools também fornece uma série de funções prontinhas que permitem criar "efeitos" visuais legais, com movimento até, utilizando apenas Javascript. Para quem é da velha guarda, tais feitos somente poderiam ser alcançados com algum flash ou applet da vida. Com Mootools, é na lata! Não precisa adicionar plugin nem máquina virtual alguma, só o Mootools.
Vamos a um exemplo:

digamos que você queira que, após um evento de clique, um objeto suma, aos pouquinhos. Tipo, vá ficando mais claro até desaparecer(efeito também conhecido como "fade out"). No Mootools, tal feito seria obtido com o seguinte comando:

$('id_do_elemento').addEvent('click', function(e){ this.fade('out'); });

Prontinho! Elegante, rápido e conciso. Outra funcionalidade interessante, além de efeitos prontos e busca facilitada é que o mootools te permite modificar atributos e propriedades do estilo de elementos facilmente. Por exemplo:

Para alterar a cor do texto de um elemento, o seguinte código bastaria:

$("id_do_elemento").setStyle('color', "#abc");

Para alterar um atributo, fariamos assim:

$("id_do_elemento").set("atributo", "novo_valor");

Enquanto para adicionar uma classe ao elemento(ato bastante comum), fariamos:

$("id_do_elemento").addClass("nova_classe");

Existem ainda outras funções bastante úteis e muitos outros efeitos tentadores. Mas, para visualizá-los, você terá que visitar a documentação do projeto Mootools, disponível no site do mesmo.

Dica: Bem, nada como uma dica! Um erro muito comum de iniciantes no Javascript é colocar scripts que trabalham com elementos da página web para serem executados antes da página estar completamente carregada. Para evitar esse tipo de problema, coloque quaisquer scripts que devam ser executados apenas quando a página tiver sido carregada, dentro de um evento domready ligado ao objeto window do DOM. Algo assim:

window.addEvent("domready", function(e){ /* seu código aqui */ });

Dica valiosa, galera! Não esquecer.

Por que usar o Mootools e não o JQuery?

Bem, não sei como é aí na sua cidade, mas aqui na minha, a galera é meio "doente" pelo JQuery. Costumo achar que essas febres são sempre modinha, tipo ruby. Particularmente, já dei uma olhada no JQuery e não gostei. Achei o código bem feio, e, código feio para mim é o mesmo que café velho. Eu evito!

É verdade que o JQuery funciona melhor com outros frameworks e scripts Javascript que o Mootools, pois tem uma utilização de namespace mais sadia, mas, francamente, quem é que usaria vários frameworks JS em um mesmo aplicativo? Seria uma brutalidade com os mantenedores do código. Também é verdade que o JQuery é mais difundido, possui mais plugins e projetos baseados nele, entretanto, mesmo assim, eu não indicaria o JQuery para um novo projeto.

Semelhanças

• pequenos(menos de 60kb)
• permitem manipulação do DOM dos elementos da página
• permitem criar efeitos muito bonitos e interativos
• utilizam um sistema de "plugins"
  
• funcionam bem nos navegadores mais comuns
• comunidades bastante ativas
• trabalham com Ajax
  

Diferenças

• A comunidade do JQuery é maior
• O JQuery possui mais projetos baseados nele
• JQuery trabalha melhor com outros frameworks
• O Mootools muda sua sintaxe a cada milestone
  
• A sintaxe do Mootools é mais bonita

Bem, concluido meu pequeno review do Mootools. Se alguém quiser alguma postagem sobre um assunto específico do Mootools, favor avisar. Abraço a todos!

ps: uso o Mootools a muito tempo e nunca tive grandes problemas. Mesmo "não parecendo" uma boa escolha devido à lista de prós e contras, gostaria de aconselhá-lo, pois é um ótimo framework. Se você não tem preguiça de fazer buscas no fórum do Mootools, nem de ler documentação, a maioria das vantagens do JQuery sobre o Mootools passam desapercebidas.

web.py com jinja2!

Primeiramente, Feliz Natal meu povo! rsrsrs, meu natal não foi grande coisa, passei doente em casa, mas o de vocês pode ter sido massa, não é mesmo? Bem, de qualquer forma, os panettones vão entrar em promoção e a vida será bela novamente!

Agora, planejamentos para o final de ano. Vamo ver oq a prefeita vai aprontar.

De qualquer forma, a idéia aqui é falar da utilização do jinja2 com o web.py. Para quem não sabe, o web.py é um framework minimalista escrito em python, que foca na criação de pequenos sites que precisam ficar prontos logo, não tem grandes perspectivas de crescimento, e precisam ser rápidos.

O web.py é um framework bem completo, levando em conta o que ele se propõe a fazer. Ele te oferece uma camada de abstração sobre os templates(arquivos html), sobre o modelo(o banco de dados), e sobre a camada de negócios(a lógica do aplicativo). Tudo de forma bem simples, entretanto, para algumas pessoas, isso não é o bastante.

Bem, eu venho de um bom tempo de desenvolvimento com django, então, eu estou acustumado(e gosto) ao estilo de templates do django. Códigos python nos meus templates, nem na base de bala! Então, quando fui tentar utilizar o web.py para fazer um site aqui, a primeira coisa que notei era que o sistema de templates dele era bem feio e difícil(não tão fácil quanto poderia). Então, conhecendo o jinja2, que é um sistema de templates semelhante ao do django, resolvi logo testá-lo no meu aplicativo.

Procedimento

Usar bibliotecas que não são do web.py no web.py é bem fácil. Adicione o jinja2 dentro do seu projeto, do lado do pacote web contendo o código do framework web.py. Nisso, a partir do código principal do seu aplicativo(onde você configura a url e o quê fica onde), você adiciona o jinja2, cria um environment para ele, e usa para fazer a renderização dos templates. Vejamos como ficaria um código exemplo:

# módulo do python
import os

# importando o que precisamos do jinja2
from jinja2 import Environment
from jinja2 import FileSystemLoader
from jinja2 import TemplateNotFound, TemplateSyntaxError

# dicionário com as configurações do ambiente
env_config = {
# marque com True para que o Jinja procure por atualizações no template
"auto_reload":False,
# marque com True para que todos os templates sejam "escaped"
"autoescape":False,
# define quantas páginas ficarão no cache por vez
"cache_size":50,
# ser para adicionar tags {% nome %} aos templates.
"extensions":[],
# templates loader. Tupla que informa ao jinja2 onde procurar os templates
"loader":FileSystemLoader(TEMPLATE_DIRS),
}

# os templates serão carregados a partir do objeto env, que é uma instância de
# environment
env = Environment(**env_config)

# path é o caminho (relativo aos caminhos do TEMPLATE_DIRS) para o template
# vars é um dicionário com variáveis a serem disponibilizados no template
def render(path, vars):
try:
# templates are automatically cached
template = env.get_template(path)
except TemplateNotFound:
raise TemplateNotFound(path)
except TemplateSyntaxError:
raise TemplateSyntaxError(path)
return template.render(vars)

Bem, o código acima funciona bem, mas colocá-lo junto com o arquivo principal do ambiente não é uma boa. Sugiro que você crie um arquivo view.py e coloque o código acima dentro, e a partir das classes que processam as requisições(Handlers) você chame o método render de view.

Outra dica é colocar para que a classe Handler busque templates que possuam o seu nome. Por exemplo, um handler Casa na classe Barco devolveria o template barco/casa.html. Essa é uma prática legal que já economiza algum código.

Bem, de qualquer forma, é isso. Vou aqui brincando com o web.py até achar algo que me faça sair dele. rsrsrs, ou não. bem, ele é minimalista, então, para coisinhas, acho que vou sempre usar ele.

ps: depois posto um template para projetos web.py, com classes e pastas para facilitar a vida de quem desenvolve.

Até mais e boas festividades!

Programador + Framework Css = Pessoa feliz!

Seguinte, durante minha cadeira de Computadores e Sociedade(deus sabe se eu passo nisso ~__~) o professor pediu a seus valorosos alunos que escrevessem um artigo sobre um tema que tivesse relação com a sociedade. Algo "for the kids, ya know" (rsrsrs, quero ver que entende essa) . De qualquer forma, eu tentei com um colega, fazer um trabalho sobre a incidência de LER(Lesão por Esforço Repetitivo) nos profissionais da computação e informática. Tendo em vista que alguns dos meus colegas de faculdade são agraciados com essa p**ra. De qualquer forma, eu fiz um site com um questionário onde um usuário poderia se cadastrar, informando a empresa dele, e responder ao questionário. Nada muito chique, mas deu um trabalhão.

De qualquer forma, apenas consegui uma empresa que colaborasse, a de um amigo meu, e, mesmo assim, não consegui que todos os cadastrados respondessem ao questionário por completo. A experiência foi um fracasso para o artigo, entretanto, muito instrutiva. Aprendi que questionários online devem ser curtos, objetivos, e se a resposta for discursiva, a pergunta deve ser única. Sim, e o que isso tem a ver com frameworks Web? Muita coisa!

Lá estava eu, desolado, precisando entregar o artigo no outro dia e sem conteúdo para colocar no artigo. Nisso, vou afogar minhas mágoas em um de meus sites preferidos de notícias, o Digg , quando me deparo com uma nóticia sobre frameworks css. Eu fiquei meio desnorteado com aquilo. A primeira coisa que pensei foi : "que idéia boa! Eu sempre tenho problemas para fazer a estrutura dos meus sites. E elas não costumam ficar nem bonitas!" . Pois é, nessa hora, comprei a idéia. Juntei a fome com a vontade de comer e parti para o artigo.

Nessa minha empreitada, encontrei 2 frameworks que valem a pena mencionar, o primeiro foi o YAML , um framework pago mas que pode ser utilizado em sites sem fins lucrativos, e o BluePrintcss , que é gratuito para qualquer "budega" que a vossa pessoa pense em fazer. Ambos com documentação boa, entretanto, o BluePrint me pareceu bem mais fácil de utilizar a começo, e, como meu artigo era para o outro dia, era ou ele, ou ele mesmo.

Tudo bem, fui lá no site, baixei o bixin, descobri que a documentação dele está, basicamente, no próprio código do mesmo, e fui a luta. Durante essa minha empreitada, notei a facilidade que foi, para minha pessoa, um programador desprovido de qualidades webdesignísticas criar o layout que eu queria, do jeito que eu queria. Gostei muito do fato dele ser orientado a grids,
e do fato de ele ter funcionado da mesma forma, tanto no firefox2, quanto no Internet Explorer6. Dentre outras qualidades, teve também o fato dos "visuais" pré-feitos para botões, links e caixas de texto. Tudo muito limpo e padronizado.

Particularmente, para pessoas minimalistas como eu, a utilização de frameworks é uma grande ajuda, pois me permitiu fazer o meu artigo e o meu site modelo sem grande esforço, e ficou bonito. Bonito mesmo. O framework me disponibilizou todas as funcionalidades que eu esperava dele, para o meu projetinho, e, acredito que, com algumas melhorias, ou mesmo com uma bulida do usuário, ele pode muito bem ser utilizado em qualquer projeto. Acredito que essa onda de frameworks css tem tudo para pegar, e espero que mais pessoas possam desfrutar desse trabalho tão legal feito com o BluePrintCSS.

Outras vantagens estão no fato de você ter controle sobre o código do seu (x)html; muita WebAberração deixa de acontecer quando se faz o site na unha. De qualquer forma, a mensagem foi passada. Espero que desperte a curiosidade de alguém. Senão, paciência, rsrsrs. Eu gostei! Subscrevo-me.