Ajax usando a freeDOM
Ontem foi publicada a versão 0.2 do modulo de ajax da freeDOM.js. Alguns bugs corrigidos, aumento na flexibilidade e novas implementações foram algumas das mudanças da nova versão.
Além disso foi mantida total compatibilidade com as versões anteriores, portanto se você já usava, não precisa se preocupar em mudar seu código.
Criando uma requisição simples
Para quem não a conhece vou mostrar a simplicidade de se usar este modulo.
Inclua as bibliotecas freeDOM.js e freeDOM-ajax.js no seu documento, depois é só fazer a requisição:
-
ajax.addRequest("/script.php", fnRetorno, $('formulario'));
Pronto!
A função addRequest recebe basicamente 3 parâmetros: O primeiro será a URL que será requisitada, o segundo a função que será executada quando a requisição estiver completa e o terceiro serão os dados que serão passados. No exemplo é passado um formulário como parâmetro, isso fará com que o script peque todos os campos do formulário e seus valores e envie-os como POST automaticamente, poupando bastante trabalho. Você também pode passar uma string no formato da string GET da URL (x=1&y=2&z=3) ou até mesmo um vetor mesclando formulários e strings.
Agora, para finalizar, é só criar a função fnRetorno que o primeiro argumento da função será o responseText da requisição ajax.
-
function fnRetorno(str)
-
{
-
alert(str);
-
}
O Efeito 'carregando...'
Com a versão 0.2 ficou muito mais fácil criar o famoso efeito de carregamento.
Comece criando uma div com id loading contendo o texto que exibirá a mensagem. Depois defina as funções startLoading e finishLoading:
-
ajax.startLoading = function () { removeClass($("loading"), "hidden"); };
-
ajax.finishLoading = function () { addClass($("loading"), "hidden"); };
Pronto! E não esqueça de definir no CSS que a classe hidden seja display:none; e que o id loading tenha position:absolute; além de outras estilizações a seu gosto.
Posteriormente eu explicarei como criar requisições mais completas.
Blogosfera
Olá pessoal,
Leandro Vieira lançou ontem (28/12) um site que achei simples porém muito interessante: O Blogosfera.
O Blogosfera é um site brasileiro para cadastro de blogs, muito prático e todo feito em ajax. com toda aquela cara de web 2.0 ele cumpre bem o seu objetivo, e acredito que a partir dessa ideia base pode surgir uma série de serviços muito interessantes. Parabéns ao Leandro por mais essa iniciativa.
A onda agora é compartilhar, e depois?
Essa é a palavra que eu mais tenho escutado no trabalho, nas noticias e nos blogs. Acho que vou contar a quantidade de referencias a essa palavra no meu agregador de feeds (Netvibes)! Alias, não vou porque o tempo não me permite, mas acredito que daria aproximadamente metade dos posts.
Há pouco estava lendo o post do Henrique Costa Pereira sobre compartilhamento de feeds e olhem que engraçado, ele estava sugerindo que compartilhasse-mos nosso feeds, que não passam de posts compartilhados! Pode parecer maluquice mas é interessante saber o que referencias como ele estão lendo, quem sabe assim a gente não chega mais perto no nível de conhecimento deles!
Nessa (r)evolução que vem acontecendo na internet (que muitos chamam de web 2.0) a palavra-chave é share! Em todo lugar que eu vou, todo site que eu uso, todo sistema que eu testo eu a vejo. Essa onda, se não estou enganado, começou com a popularização dos feeds e a partir daí surgiu essa tendência (você compartilha seus links (del.icio.us), seus posts (feeds), seus documentos (Google Docs), sua agenda (Google Calendar) e uma infinidade de coisas que não me vem à cabeça agora) que vem fazendo com que a internet funcione nesse ritmo tão acelerado que ela anda hoje.
Agora estou me perguntando, o que virá após essa onda? Será os sistemas colaborativos? É esperar pra ver...
Aplicativos Web e XUL
De uns tempos para cá venho acompanhando a evolução do XUL... E ai você me pergunta: mas que diabos é essa tal de XUL?
XUL (se pronuncia Zool) significa XML User Interface Language, ou seja, uma linguagem baseada no padrão XML para criação de interfaces, desenvolvido pela Mozilla Foundation e é para mim uma das linguagens que será o xodó dos desenvolvedores de internet num futuro próximo.
Assim como o ajax fez para Web 2.0 e aplicativos web, o XUL deverá elevar a experiência do usuário a um novo patamar. Ele tornará ágil e simples a criação de interfaces com o look-and-fell de aplicativos desktops, sem a necessidade de se gastar horas criando e programando o comportamento da pagina usando HTML e Javascript. Muito interessante é o exemplo que meu amigo Leandro Vieira me mostrou recentemente, o ajaxSketch, que usa e abusa de tecnologias muito recentes (e também, ainda muito cruas) como SVG e claro XUL (somente o FireFox 1.5 ou superior que tem suporte a estes formatos, torço para que os outros navegadores também se juntem a ele). O resultado é um "site" que mais parece um programa desktop, com algumas vantagens:
- Não precisa instalar
- Não há necessidade de atualização
- Acessível de qualquer lugar com acesso a internet (e que possua Firefox 1.5 ou superior)
O ajaxSketch é desenvolvido pela Ajax13, que também possui outras ferramentas muito interessantes, vale a pena dar uma conferida.
Bom, vamos continuar de olho nessas novidades, acredito que tem muita coisa boa vindo por ai!
Abraços
freeDOM
Alguns de você já devem ter lido sobre a freeDOM.js , uma biblioteca Javascript que estou desenvolvendo em colaboração com Leandro Vieira e outros colaboradores (não menos importantes, mas ainda não tão ativos). Estamos ainda engatinhando, mas acredito que esse projeto possa render bons frutos visto que há ótimas pessoas nos apoiando, tanto na divulgação quanto no envio de códigos e correções.
O nome freeDOM surgiu num brainstorm que eu e Leandro fizemos, surgiram varios nomes mas nenhum expressava melhor o que nós queriamos: liberdade + manipulação do DOM (que é a parte base da biblioteca). E acho que foi uma boa escolha, já recebemos alguns elogios ao nome
Para quem ainda não ouviu falar eu vou fazer uma pequena explicação dos objetivos deste projeto:
- Principalmente, ela deve ser leve e ser flexivel (explicarei melhor essa flexibilidade futuramente)
- Prover produtividade ao desenvolvimento
- Ser modularizada, separando em pacotes códigos de "assuntos" diferentes
- Manter sempre o código aberto, de facil legibilidade para facilitar a manutenção (e adaptação para atender a necessidades especificas)
Basicamente esses são os princípios que vamos seguir para tocar pra frente esse projeto. Se alguém se opõe ou se acha q falta alguma coisa, por favor se pronuncie!
Abraços
Você sabe HTML?
A maioria dos profissionais de informática respoderiam sim a essa pergunta, mas na realidade são poucos que realmente sabem fazer marcações HTML. É simples concluir isso, basta navegar alguns minutos na internet e olhar a verdadeira sopa de letrinhas que formam o HTML da maioria dos sites atolados de <table>, <tr> e <td> em todos os cantos da pagina. Será que saber HTML é pegar o Dreamweaver e simplesmente deixar a aparência do documento do jeito que você quer?
Se a maioria das pessoas sabem HTML porque insistem em usar tabelas para formatar layout, tags <font> para estilizar as fontes entre outras coisas bizarras que vemos por ai? Claro que compreendo que haja muitas pessoas que ainda estão aprendendo a trabalhar com HTML, mas ainda é muito comum ver grandes portais utilizarem as mesmas técnicas arcaicas da época em que todos enchiam a pagina com GIFs animados para enfeitar.
HTML, como a própria sigla diz, é apenas uma linguagem de marcação, ela não foi criada para prover nenhuma estilização às tags, nem para formatar o layout da pagina. O objetivo do HTML é apenas destacar trechos de textos em um documento limpo, inserir conteúdos multimidia e fazer ligações entre um documento e outro. Portanto, modificar a estrutura de um texto ou de um documento para ele se adequar ao layout (como acontece normalmente quando fazemos um layout baseado em tabelas) não é a opção mais interessante, apesar de ainda ser a mais usada.
E é ai que entra a Web Semântica! Web semântica é sem duvida um dos conceitos mais polêmicos e importantes do desenvolvimento web. A partir da semântica é que devemos organizar nosso documento para que possamos além de seguir os padrões web, fazer sites realmente compatíveis e acessíveis. Ela consiste em usar as tags em seus reais sentidos, ignorando o efeito visual das marcações. Quando temos um texto, nós devemos usar por exemplo as tags <p> para os paragráfos, tags <h1>, <h2>, <h3> e etc. para os títulos, <strong> para reforçar uma palavra ou frase e por ai vai, utilizar as tags para as funções que elas foram feitas. Ainda é muito comum ver coisas como <span class="titulo"> e um paragrafo dentro de <div> ou até mesmo tabelas com apenas uma célula para poder ficar bem posicionado na página. Porque não utilizar as tags no real sentido delas? Isso tornaria um código mais legível para dispositivos móveis, para bots como o Googlebot (ai entra a questão do posicionamento nos resultados de busca) e para leitores de tela. Enfim, basta um pouco de bom senso na hora de escrever o código para que possamos melhorar a qualidade do nosso HTML.