Firefox 3.5 webdev notes

30/6/2009 | Tags:, , , , , , | Escrito por: Dirceu Pauka Jr.

A nova versão do Firefox chega em um momento agitado na indústria dos navegadores. Para não fazer feio perto da forte concorrência a versão 3.5 é mais rápida na renderização e na execução de JavaScript.

Além disso a versão 3.5 trás ao Firefox suporte a novos padrões da W3C e isso é bem interessante uma vez que entre os “navegadores que prestam” o Firefox é o mais utilizado.

Novas funcionalidades para a tag canvas estão disponiveis.

Um novo modelo de se trabalhar com XMLHttpRequest foi desenvolvido e agora a função permite “Cross-site HTTP requests”.

Como sempre algumas novas funções foram implementadas ao JavaScript. Porém, são funções que deverão ser aproveitadas de melhor forma dentro de frameworks. Dessa forma é possivel utilizar melhor a capacidade do navegador sem “quebrar” a compatibilidade em navegadores que não suportam as novas funções.

Na parte do HTML 5 (draft) foi adicionado suporte a áudio e vídeo, cache de infomações (offline resources), uma API para uso do sqlite3, Workers, Geo location e o novo padrão de seletor (que suporta CSS3 nativo).

Na parte de CSS3 o Firefox implementa animações de forma parecida com o WebKit. Veja -moz-transform e -moz-transform-origin.

Se você ainda não baixou a versão 3.5 do Firefox baixe logo e saia por ai caçando exemplos que usem o potencial do canvas, animações de css3.

Ah!

Se você gerencia algum plugin de Firefox já deveria ter deixado uma versão pronta pro dia de hoje. De qualquer forma, a Mozilla explica o que deve ser feito para manter a compatibilidade dos plugins.

E

Finalmente um porn mode foi adicionado.



Widget do Submarino com YQL

4/6/2009 | Tags:, , , , , , | Escrito por: Dirceu Pauka Jr.

Meu último post foi uma tentativa de explicar o funcionamento da Yahoo Query Language. No final falei da possibilidade de se fazer um Widget do Submarino com a YQL e agora volto para implementar o prometido.

YQL

Como eu disse existe um post explicando a YQL, porém aqui vai uma explicação rápida:

A YQL pode ser usada para buscar dados nas APIs do Yahoo (Flickr, Delicious, Placemaker, Maps, …), nas APIs do DataTables (Twitter, Amazon, GeoLocation, …) ou em qualquer outro documento da web (página HTML).

Para mostrar como a busca em um documento qualquer da web é feita, escrevi o seguinte código:

Para testar use o console da YQL ou veja teste dessa busca. O YQL vai retornar o conteúdo pedido em XML ou JSON.

JSONP

“JSON with Padding” é uma técnica que permite o carregamento assíncrono de informações de um domínio externo.

Toda biblioteca de JavaScript que se preze possui um método para esse procedimento.
jQuery: $.getJSON(url, function(data) { // callback });
MooTools: Request.JSON([options]);

A implementação desse tipo de requisição é bem simples.

Sabemos que o retorno de um arquivo chamado pela tag script é imediatamente executado pelo interpretador JavaScript.

Também sabemos que um objeto em JS pode ser representado por {} e pode conter pares de chave/valor. Ex: var Objeto = { chave: ‘valor’ };

Assim sendo, o que precisamos agora é que o conteúdo de um arquivo que vai ser requisitado utilizando a tag script seja uma chamada a nossa função previamente declarada.

Atente que ao contrario do xhttprequest o elemento HTML script não possui limitações quanto ao domínio que a requisição pode ser feita. Porém, para que a técnica funcione é necessário que o servidor requisitado retorne (em texto puro) uma chamada para nossa função.

Requisição:
http://pomoti.com/arquivo.php?callback=recebe_json
PHP simples para retorno:
echo $_GET['callback'] . ‘( {chave: “valor”} )’;
Retorno:
recebe_json( {chave: ‘valor’} );

Todos webservices que queiram trabalhar com JSON devem, então, aceitar um parâmetro para envio de callback.

Widget do Submarino

Fundamentadas as técnicas necessárias para a implementação vamos ao código.

// tentando duas querys diferentes. a estrutura do submarino pode ser alterada e isso evita quebrar
getJSON(query1);
}
function getJSON(query) {
// monta a requisição REST
var url = ‘http://query.yahooapis.com/v1/public/yql?q=’+
encodeURIComponent(query)+
‘&format=json’+
‘&callback=Submarino.recebe’;

// se tag head não existir, cria uma para evitar problemas
if (!document.getElementsByTagName(’head’)[0]) {
document.getElementsByTagName(’body’)[0].appendChild( document.createElement(’head’) );
}

// adiciona o elemento