Archive for 'mtzlib'
Você conhece a freeDOM?
December 11th, 2006. Published under DOM, ajax, freeDOM.js, javascript, mtzlib. 3 Comments.
Se você conheceu a mtzlib, estará familiarizado com a freeDOM. Uma vez que ela (mtzlib) mudou o seu nome para freeDOM.
freeDOM.js
O que é?
É um projeto iniciado para desenvolver uma biblioteca de funções JavaScript simples e poderosa, para ajudar o desenvolvimento e aumentar a produtividade de websites e aplicativos web.
Porque freeDOM?
freeDOM é um joguinho de palavras que representa exatamente nossa coleção de funções: free(gratuito) + DOM(Document Object Model). Ao mesmo tempo expressa nossa intenção de dar liberdade ao desenvolvedor, utilizando as funções e parâmetros do jeito que melhor lhe convém.
Funcionalidades
O desenvolvimento da freeDOM ainda está em fase inicial, porém já dá suporte as principais funcionalidades do DOM e inclui um add-on que transforma aplicações ajax em uma tarefa extremamente simples.
Como colaborar?
Atualmente o projeto é atualmente mantido apenas por Andre Metzen (andre[at]metzen.com.br) e Leandro Vieira (leandro[at]w3invent.com.br). Se você tem interesse em colaborar de qualquer forma, é só nos enviar um e-mail.
Download
Acessa a página do freeDOM.js
Disponível o w3FormValidation 2.2
December 9th, 2006. Published under DOM, add-on, javascript, mtzlib. 5 Comments.
o w3FormValidation 2.2 está recheado de novidades e irei contar todas elas para você 
Disponibilizei o changeLog do w3FormValidation via RSS para lhe ajudar estar sempre antenado com os novos “releases”.
Nesta versão 2.2 houve uma padronização nos nomes dos tipos de validação; agora todos eles estarão em inglês.
Foi corrigido o bug no tipo de validação: url. O qual considerava uma estrutura de subdomínio inválida.
Agora o w3FormValidation oferece suporte a validação de radio buttons de forma simples e fácil, como deve ser.
Novos tipos de validação foram acrescentados e irei abordar um por um aqui no blog, aguarde. Enquanto isto, lhe informo quais foram os novos tipos de validação:
- digits
- length
- range
- if (condicional)
Consulte os tipos de validação do w3FormValidation.
O código do w3FormValidation foi liberado e comentado
December 5th, 2006. Published under add-on, javascript, mtzlib. 5 Comments.
No post anterior em que anunciei o w3FormValidation 2.0 o Jader Rubini contribuiu com um interessante comentário.
Em seguida respondi a ele e como promessa é dívida o código está liberado nas duas versões: o original (16,1 KB) - todo comentado e indentado - e o compactado (6,29 KB).
Desta forma será possível um feedback melhor dos leitores e o envio de sugestões para o w3FormValidation, conto com o seu
Os novos tipos de validação e o suporte a validação de radio buttons já está aqui no forno, quando finalizar irei disponibilizá-la - é claro - e comentarei a respeito.
Aplicativo web 2.0 para prevê assasinatos
December 5th, 2006. Published under mtzlib, opinião, web 2.0. 1 Comment.
Para início de conversa, eu preciso afirmar: não existe um aplicativo web 2.0 para prevê assassinatos (ou existe e eu o desconheço). Mas, acabei de ler uma matéria no IDG Now que me chamou a atenção.
Na referida notícia, há uma abordagem do fato da cidade de Filadélfia ter um auto índice de criminalidade e que devido a isso, ela (a cidade) estaria elaborando o desenvolvimento de um software para prevê assassinatos. Trabalhando em conjunto com o criminalista Richard Berk da Universidade da Pensilvânia.
O criminalista foi questionado quanto ao critério de avaliação dos possíveis assassinatos, e segundo ele seria “a exposição à violência na juventude”.
Então, para tal criminalista essa tarefa não será tão difícil daqui algum tempo, uma vez que várias pessoas se expõe cada vez mais em sites de relacionamentos. E nesses sites, elas falam (e muito) sobre si mesma, seus gostos, preferências e tendências.
Então, a solução seria desenvolver um algoritmo que analisasse o perfil do suspeito em vários sites de relacionamentos, cruzar com suas participações em comunidades, com os comentários dos amigos referente a sua pessoa e sua ficha na polícia.
Para finalizar, deixe o aplicativo rodando na plataforma que chamamos de web, utilize um framework para ser mais ágil, uma biblioteca de JavaScript, um design e um nome “cool” e claro não se esqueça do selo web 2.0.
w3FormValidation 2.0 está disponível
November 26th, 2006. Published under DOM, add-on, javascript, mtzlib. 9 Comments.
O w3FormValidation 2.0 está a sua disposição. Acrescentei novos recursos a este sistema de validação e dedicarei este post para falar sobre eles. Vamos lá.
[UPDATE]o w3FormValidation trabalha com a Mtzlib 0.2.6 ou superior.[/UPDATE]
Primeiramente. Se você não sabe do que se trata o w3FormValidation vou lhe dizer: é uma forma simples, rápida, simples e não-obstrutiva para validação de formulários web.
Esta segunda versão mantém o mesmo engine de validação da primeira, o que significa dizer que a forma para informar as regras de validação dos campos é a mesma. Vide exemplo:
var camposVal = [];
camposVal.push(’tipo-de-validação,id-do-campo,mensagem’);
…
Agora você poderá customizar o título do box da mensagem, informando o texto desejado através de um parâmetro ao chamar o w3FormValidation. Observe:
var valida = new w3FormValidation(camposVal,'Texto que será utilizado no título');
Se o título não for informado, será utilizado o título padrão: Observações!
Outra customização é a possibilidade de dizer ao w3FormValidation qual será a distância entre o box da mensagem e o topo do viewport do browser. Por padrão a distância é zero, e você pode informar essa distância da seguinte maneira:
var valida = new w3FormValidation(camposVal,'Texto que será utilizado no título',100);
Ou seja, o box da mensagem terá 100px de distância entre o topo do viewport.
O w3FormValidation 2.0 utiliza um overlay sobre o body, deixando os demais elementos na página de forma translúcida e um foco exclusivo e total ao box da mensagem. Mas se você não quiser utilizar este recurso, você poderá desativá-lo assim:
var valida = new w3FormValidation(camposVal,'Texto que será utilizado no título',100,false);
Ou seja, informando false como valor para o quarto parâmetro.
Na versão 1.0 do w3FormValidation o box da mensagem sempre era exibido no topo do página, o que tornava a exibição chata e desconfortável caso o formulário estivesse no rodapé da página, por exemplo. Nesta segunda versão, é verificado a localização do usuário na página no momento em que ele envia o formulário, dessa forma é possível exibir o formulário exatamente no local em que o usuário e o formulário se encontram na página.
Outro recurso adicionado foi a possibilidade do box da mensagem acompanhar a rolagem da página feita pelo usuário. Mas se você não quiser utilizar este recurso, você também pode desativá-lo, da seguinte forma:
var valida = new w3FormValidation(camposVal,'Texto que será utilizado no título',100,false,false);
Como você percebeu, é só informar no quinto parâmetro o valor false que tal recurso não será utilizado.
Outro detalhe é importante, é que esta versão retira do campo a classe w3FieldError caso ele tenha passado no validação desejada. Nesta versão também foi incluído o w3FadingOpacity.
Os tipos de validação reconhecidos e suportados pelo w3FormValidation ainda são os mesmos. Novos tipos estão anotados e já estou planejamento o desenvolvimento, mas julguei estas modificações mais emergenciais e necessárias para este add-on.
Conto com seu comentário, sugestão e crítica para melhorar cada vez mais este sistema de validação.
Overlay para o body com JavaScript com a Mtzlib
November 25th, 2006. Published under DOM, add-on, javascript, mtzlib. No Comments.
Expliquei no post anterior - Overlay para o body com JavaScript - como criar um overlay para o body com JavaScript. Neste post, falarei sobre o mesmo assunto, ou melhor, explicarei a mesma coisa.
Mas agora, iremos reproduzir o mesmo efeito, mas utilizando a Mtzlib. Assim, você poderá comparar a função bodyOverlay que criamos anteriormente com esta agora. Observe:
function bodyOverlay() {
var sizesPage = getPageSize();
$append($new("div","id=bodyOverlay",''));
$('bodyOverlay').style.height = arrayPageSize[1] + ‘px’;
}
Veja como a Mtzlib facilitou nossa vida e tornou todo o processo mais fácil.
Veremos agora, como adicionar o add-on w3FadingOpacity. Observe mais uma vez:
function bodyOverlay() {
var sizesPage = getPageSize();
$append($new("div","id=bodyOverlay",''));
$('bodyOverlay').style.height = arrayPageSize[1] + ‘px’;
var fadeOverlay = new w3FadingOpacity(’bodyOverlay’,0,80,0);
fadeOverlay.start();
}
Para remover o overlay criado, você pode utilizar a seguinte função:
function removerOverlay() {
if ( $('bodyOverlay') ) {
$remove($('bodyOverlay'));
}
}
Um detalhe. Já que está utilizando o w3FadingOpacity você deverá fazer uma simples alteração nas CSS, observe:
opacity: 0;
filter:alpha(opacity=0);
Se você não leu o post anterior: Overlay para o body com JavaScript leia-o para você compreender este melhor. Uma vez que este tem a simples intenção de demonstrar como é mais simples trabalhar com JavaScript e DOM utilizando a Mtzlib.
[UPDATE] Veja um exemplo deste efeito [/UPDATE]
Desenvolvimento web em camadas - camada de comportamento
November 23rd, 2006. Published under DOM, ajax, css, html, javascript, mtzlib. 2 Comments.
O desenvolvimento básico de um aplicativo web consiste em HTML para a marcação do conteúdo, das CSS para estilizá-lo e do JavaScript juntamente com o DOM para modificarmos/concedermos comportamentos aos elementos de uma página web.
Você certamente já trabalha com as duas primeiras camadas citadas anteriormente. Mais por que ainda não trabalha com a terceira?
Acredito pelo fato deste assunto ser pouco discutido aqui no brasil. Encontramos um ou outro falando sobre o assunto em blogs.
Em agosto deste ano, lançei um curso em parceria com o iMasters Shop chamado Web Sites Com Ajax e nele falo de forma prática sobre a camada de comportamentos. Uma vez que o projeto final do curso é desenvolvido nessa lógica, ou seja, separar as camadas de desenvolvimento e trabalhar com JavaScript não-obstrutivo.
Vou abordar esse assunto por aqui, visto que o conteúdo relacionado a isto é vago (ainda). Mas com certeza tratarei de assuntos diferentes dos apresentados no curso, por respeito aqueles que adquiriram o curso (quem sabe o próximo possa ser você :))
Aqui no meu blog farei uma abordagem do assunto utilizando a Mtzlib e assim vocês verão como o nosso dia-a-dia pode ser mais produtivo, divertido e prazeroso ao se trabalhar com JavaScript e DOM através dessa biblioteca de JavaScript. Até lá.
w3FormValidation - Add-on para a Mtzlib
November 21st, 2006. Published under DOM, add-on, javascript, mtzlib. 13 Comments.
Finalizei o segundo add-on para a Mtzlib e ao mesmo tempo uma página dedicada a ele. O w3FormValidation é um add-on que vai simplificar seu trabalho ao validar formulários, tornando essa tarefa mais simples e eficiente.
Esse add-on para validação de formulário tem algumas vantagens interessantes de serem destacadas, vejamos:
Ele cria um “box” em HTML - com tag div - para simular o alert box do JavaScript. Com isso você poderá estilizá-lo e deixá-lo de acordo com a identidade visual do seu projeto.
Além do mais, mesmo que o alerta - criado pelo w3FormValidation - esteja na tela será possível prosseguir com o cadastro, coisa que não aconteçe quando um alert box do JavaScript é exibido.
Outra coisa bacana, é que você poderá por exemplo, manter todas suas regras de validação em único arquivo JS e editá-lo como e quando precisar, sem precisar mexer no HTML da sua página. Observe um exemplo:
var camposVal = [];
camposVal.push(’req,campo_nome,Oops! Informe o seu nome aí.’);
camposVal.push(’email,campo_email,Oops! Informe um e-mail válido.’);
camposVal.push(’url,campo_url,Oops! Informe uma URL válida.’);
camposVal.push(’igual,senha1,senha2,Oops! As senhas informadas não conferem.’);
ou seja, você pode criar várias regras como a demonstrada acima, e manter todas elas em um único arquivo. A seqüência da regra é a seguinte:
‘tipo-de-validação,id-do-campo,mensagem-a-ser-exibida.’
Até o momento, o w3FormValidation suporta quatro tipos de validação, sendo eles:
- req = requerido (o campo informado precisa ser preenchido);
- email = email válido (o campo informado precisa conter uma estrutura de e-mail válida);
- url = url válida (o campo informado precisa conter uma estrutura de URL válida);
- igual = os dois campos informados precisarão conter o mesmo valor - serem iguais.
Irei desenvolver outros tipos de validação, como: data, cpf, cnpj, números inteiros, entre outros. Gostaria muito da sua sugestão combinado? Ficarei no aguardo, até mais.
Validar um formulário é muito importante.
November 17th, 2006. Published under add-on, javascript, mtzlib. 2 Comments.
Com o advento dos aplicativos web, o usuário passou a se interagir quantitativamente com as interfaces. E uma das formas dessa interação entre o usuário e a interface são os formulários que essa última dispõe. Uma vez que os formulários possibilita ao usuário dizer a interface os seus gostos, dados pessoais, senhas, e diversos outros.
O problema nisso aí refere-se ao seguinte: como saber se o usuário está enviando os dados corretamente e da forma como o aplicativo espera recebê-los? A resposta é simples: validando os dados por ele enviados, por isso: validar um formulário é muito importante.
Mas a validação proporciona muito mais para ambas as partes - usuário e interface - veja só:
Se o usuário envia uma informação em um formato desconhecido, nossa aplicação pode ter uma reação indesejada, como: exibir uma página toda em branco sem nenhuma informação ao usuário. A validação pode prevenir este acontecimento, e além do mais, exibir uma mensagem de alerta ao usuário, esclarecendo a ele o que está acontecendo.
Códigos maliciosos podem ser injetados em sua aplicação na falta de uma validação. Infelizmente não podemos confiar no que os usuários nos enviam. Outra vantagem da validação é “forçar” o usuário a preencher todos os campos requeridos e evitar a falta de informação necessária ao sistema.
Podemos realizar dois tipos de validação: client-side (javascript) ou server-side (php, por exemplo).
A validação server-side é mais segura, uma vez que nós desenvolvedores temos total controle sobre ela, ao contrário da validação client-side. Mas essa última é importante por acontecer em tempo real e evitar processamento desnecessário na aplicação.
Para facilitar o meu trabalho com a validação dos formulários, estou desenvolvendo um Add-on para a Mtzlib que cuidará disso. Ele já se encontra em fase final de desenvolvimento e irei postá-lo em breve.
PS.: Gostou do assunto? Leia mais.
w3FadingOpacity - Add-on para a Mtzlib
November 17th, 2006. Published under DOM, add-on, javascript, mtzlib. 1 Comment.
O primeiro add-on para a Mtzlib está pronto e ganhou uma página própria. Nessa página temos todas as informações referente ao add-on e um tutorial explicando sua utilização. Acho que um tutorial nem precisaria, uma vez que é tão simples utilizar o w3FadingOpacity, veja só:
var efeito = new w3FadingOpacity('idDoObjeto',0,100,300,fazerAlgoDepois);
efeito.start();
Ou seja, instanciamos o add-on e informamos a ele cinco parâmetros: ID do objeto que receberá o efeito, opacidade inicial - 0 - e final - 100 - tempo de duração do efeito - 300 - e pedimos para ele chamar a função fazerAlgoDepois quando o efeito for concluído, somente. Esse último parâmetro é opcional.
Ficarei no aguardo do seu feedback, até lá.