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.
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:
“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.
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’) );
}
Esse exemplo utilizou a tabela do Twitter que faz parte do projeto DataTables. Projeto que reúne várias tabelas criadas por outros desenvolvedores.
Então é possivel criar novas tabelas!?
É sim! É possivel até mandar o Yahoo fazer screen scraping e retornar o resultado em JSON!
Mais um exemplo!
Digamos que eu quero fazer um widget para retornar alguns produtos do Submarino.
Cumprindo seu papel de maior e-commerce brasileiro o Submarino não dá a minima para os desenvolvedores e não possui até hoje uma API. Vamos “hackear” uma ;D
A busca pelo site é feito pelo seguinte HTTP GET: http://www.submarino.com.br/busca?q=ipod
Usaremos essa URL para buscar dados no Submarino utilizando a YQL.
A primeira parte para fazer o YQL ler documentos é simples:
select * from html where url=”http://www.submarino.com.br/busca?q=ipod”
A segunda é um pouco complicada. Para entender é necessário o minimo de conhecimento sobre XPath.
Para extrair o XPath da parte desejada do conteúdo usei o Firebug, porém é possivel usar o XPather também.
No Firebug use o “Inspect” para encontrar o elemento desejado:
Copie o XPath:
Com o XPath do elemento HTML “pai” do produto temos a chamada YQL completa.
select * from html where url=”http://www.submarino.com.br/busca?q=ipod” and xpath=’/html/body/div/div[2]/div/div/div/div/div/div/div[2]/div/div/div/ul/li/div/a[3]‘
Abra o Console do YQL e teste. Legal! Temos uma busca de produtos no Submarino retornando XML ou JSON e aprendemos a usar o YQL com APIs do Yahoo, com APIs do DataTables e com qualquer documento da Web ;D
No #brhackday08 o foco dos desenvolvedores do Y! já parecia ser o de abrir a sua API.
Parte do Yahoo Open Strategy, SearchMonkey e BOSS foram os destaques das apresentações, mas uma serie de outros serviços da empresa foram apresentados para os desenvolvedores.
API do Yahoo!
O termo é realmente vago para quem nunca olhou a lista de serviços (web services) que a empresa oferece.
Pipes e SearchMonkey são possivelmente os mais conhecidos. Mas outros produtos do Y! para desenvolvedores são interessantes.
Pipes
O serviço permite a criação de mashups entre outras fontes de dados. O fluxo de dados extraídos das paginas pode ser construído usando uma interface visual bem legalzinha.
SearchMonkey
SearchMonkey é a ferramenta que permite modificar o visual da busca do Yahoo!
As informações que aparecerão nos resultados da buscas podem ser extraídas das paginas usando XPath.
Exemplo de resultado da busca com SearchMonkey:
BOSS
Busca aberta. API que retorna os resultados da busca do Yahoo! em JSON ou XML.
É possivel facilmente “re-rankear” os resultados antes de mostrar para o usuário adicionando novas regras.
Music
Essa API pouco conhecida abre possibilidades interessantes para criação de serviços em cima.
Ela dá acesso a informações sobre artistas, álbuns, músicas e vídeos e permite buscas com diversos parâmetros.
Weather
API usada pela Apple em sua aplicação “Weather” do iPhone OS.
Além é claro de poder ser usada em gadgets como iPods e Wii, mashups (principalmente com geodata) podem ser criados com essa ferramenta disponibilizada pelo Y!
Todas essas “fontes de dados” do Yahoo! podem ser usadas de uma melhor forma com geodata.
O Google Latitude está em funcionamento a algum tempo e sua proposta (geo location) vai ajudar muito a filtrar o querola na real-time web.
O Yahoo! não quer ficar de fora.
Yahoo! Placemaker™ Beta
Lançado recentemente em conjunto junto com o Y! Geoplanet™ o Placemaker™ não é uma solução de geo location.
O que ele faz na verdade é buscar em um documento por informações sobre “locais”.
O exemplo dado pela pagina do projeto é ruim de se entender por não enviar um texto e sim o nome exato do local.
Mas esse exemplo é interessante. Não deixe de ver.
O documento de resposta do Yahoo! contem o que é chamado de woeids.
Mas e ai, o que fazer com um “woeid”?
O woeid é na verdade uma identificação numérica referente a um local no GeoPlanet™.
GeoPlanet™
GeoPlanet é outro webservice do Y!. Lançado junto com o Placemaker promete ser útil em todo futuro desenvolvimento com geodata.
A busca por um “woeid” retorna dados específicos sobre o lugar. Dados que são organizados e catalogados pelo Y! e não exigem nenhum grande trabalho para quem for utilizar o serviço.
YQL
A linguagem de buscas YQL (Yahoo Query Language) é uma grande idéia e códigos que facilitam o uso dela já comeram a serem criados.
A única forma oficial de colocar uma aplicação na iTunes Music Store é a produzindo na linguagem Objective-C usando a SDK de desenvolvimento da Apple.
Porem, a SDK possui um componente chamado UIWebKit. Esse componente nada mais é que uma janela do navegador Safari, que pode ser usado pela aplicação.
O UIWebKit, assim como o Safari, possui um interpretador JavaScript. Isso permite que um desenvolvedor com habilidades em HTML, CSS e JavaScript utilize toda a força de um navegador moderno como o WebKit (SQLite, HTML5, Canvas, etc) para fazer fortuna na lojinha de Jobs.
Indo além, o tal do UIWebKit pode ser estendido para executar funções da SDK de dentro do interpretador JavaScript. Por exemplo: a funcionalidade que faz o iPhone vibrar não é disponível para a API JavaScript do Safari, porém código (Objective-C) pode ser escrito de forma que o JavaScript tenha acesso a tal função.
PhoneGap
Um projeto chamado PhoneGap tem a intenção de juntar em um só lugar os códigos que fazem a ligação entre o componente UIWebKit e as APIs publicas do iPhone OS.
Ele não é um framework nem uma API. Muito menos faz chamadas a API do iPhone que são de uso somente da Apple (API privada).
O PhoneGap é somente um esqueleto de aplicação com um Safari preenchendo toda a tela da aplicação e carregando o arquivo index.html da pasta www (que vai junto com a aplicação). É simples assim. Se você manja HTML, CSS e JavaScript poderia ficar rico também na App Store.
Poderia meu irmão, poderia.
Na semana passada alguns revisores da Apple começaram a recusar aplicações que levam pelo menos um pouco do PhoneGap. Essa semana, conforme reportado na lista de discussão do projeto, nenhuma aplicação foi aceita. Todas recebem a mesma reposta:
Após a análise da sua aplicação, ** não pode ser enviado para App Store devido ao uso de API privada.
O uso de APIs privadas é proibido conforme descrito no ponto 3.3.2 do “iPhone SDK Agreement”:
“Uma aplicação não pode instalar ou executar outro código por nenhum meio, incluindo sem limitação o uso de plug-ins, chamadas a outros frameworks, outras APIs ou outra forma.
Nenhuma código interpretado pode ser baixado e usado em uma aplicação, exeto o código que é interpretado e executado pelo ‘Apple’s Published APIs’ e seus interpretadores.”
A API do PhoneGap implementada na sua aplicação é um framework externo.
Por enquanto nenhuma outra posição da Apple ou dos desenvolvedores do PhoneGap foi tomada. A recomendação é que quem precisar colocar a aplicação na App Store não arrisque com o PhoneGap.
The term Internet meme or meme for the short, it’s given to a kind of content that spreads really really fast threw the web, (mostly by some social network) from person-to-person.
Meme was developed by a Brazilian team of Yahoo!, which up until yesterday, has released some invitations by mail.
Meme has nearly the same appeal of weheartit (social image bookmarking), though at the same time, it work can be seen as inspired by many other social nets such as del.icio.us, blip.fm, YouTube, Vimeo, last.fm, Facebook, digg, orkut, Flickr, plurk, meadiciona, and so it goes with an infinity of nameless apps that I don’t even have to say so that you get it: The new Yahoo! Service follows the company’s tradition of creating mashups or buying social nets of content sharing, and is not a copy of any other product.
Currently the service finds itself closed to any new registrations while Yahoo! performs the analysis of the alpha feedback (the test period before it be released to the open public).
Alpha was open for a day so that users could send invitations to their friends. I guess it was so that it wouldn’t give a bad impression to any new user, with the lack of some functionality, the invitations system was disabled today.
I truly hope that the Brazilian team at Yahoo! keep going with the great work e I’ll take the apportunity to comment something that it’s tremendously important IMHO:
If you’re wearing a good framework, building an API as good as Flickr shouldn’t be so hard. Make it fast, before that scripts be programmed to perform actions at the service pages. Definitely this will be heavier than some JSON or any others HTTP verbs.
O termo “Internet meme” ou somente “meme” é dado a um conteúdo que se espalha muito rápido pela internet sendo passado (muitas vezes por meio de uma rede social ) de pessoa a pessoa.
Desenvolvido por uma equipe brasileira do Yahoo! o meme teve alguns convites enviados por e-mail para o começo dos testes.
O meme tem um apelo parecido com o weheartit (que é um social image bookmarking) mas ao mesmo tempo é uma obra inspirada em outras
redes sociais como o delicious, blip.fm, youtube, vimeo, last.fm, facebook, digg, orkut, flickr, plurk, me adiciona, e outra infinidade de aplicativos que não preciso citar para me fazer entender: o novo serviço do Yahoo! segue uma tradição da empresa que é a criação de mashups ou a compra de redes sociais de compartilhamento de conteúdo e não é uma copia de nenhum outro produto.
Atualmente o serviço se encontra fechado para novas inscrições enquanto o Yahoo! analisa o feedback do alpha, a fase de testes antes do produto ser liberado para as massas.
Por um dia os usuários do alpha puderam enviar convites a amigos. Creio que para não prejudicar a experiência de novos usuários com a falta de algumas funcionalidades o envio de convites foi desabilitado hoje.
Espero que a equipe brasileira do Yahoo! continue com o ótimo trabalho e aproveito para comentar algo que na minha opinião é importante:
Se estiverem usando um bom framework, fazer uma API tão boa quanto a do Flickr não deve ser difícil. Façam rápido antes que scripts sejam programados para executar funções nas páginas dos serviço. Com certeza isso será muito são mais pesadas do que um simples JSON ou outros verbos do HTTP. Vocês sabem do que estou falando
Essa é uma tradução de “Improve your jQuery-fu, write plugins” de Tomáš Kramár Trnava.
Escolhi traduzir esse texto pois ele foi o tutorial mais simples que encontrei quando precisei escrever um plugin. No final dele você será capaz de entender como o jQuery trabalha com plugins e poderá escrever os seus próprios.
jQuery é um framework JavaScript simples e poderoso que mudou minha forma de programar JavaScript. Um novo JavaScript dizem alguns com certa razão. O código que você cria é pura elegância.
Você começa com 10 linhas de jQuery que poderiam ter sido 20 linhas do tedioso JavaScript manipulando DOM. No final você acaba ficando com duas ou três linhas.
E esse numero pode ficar ainda menor se você refatorar o código para um plugin do jQuery.
Quando o assunto é escrever plugins, pessoas (tipo eu) normalmente pulam fora com medo. Eu ouvi sobre plugins de jQuery a bastante tempo mas nunca havia tentado escrever um. Quando pensava no assunto algumas idéias vinham na minha cabeça:
Deve ser difícil e por isso deixe isso somente para jedis
Isso deve precisar de um conhecimento profundo do jQuery
O que eu vou ganhar?
(Eu vim do mundo Java, imagine).
Nota do tradutor:
(Eu vim do mundo Ruby ;D).
Nada do que eu imaginava é verdade. Escrever um plugin é facil como escrever algo usando o jQuery. Não é necessario nenhum conhecimento especial. Tudo o que é preciso é extender um objeto jQuery. Algo como:
Lembra? Isso é JavaScript, não Java. O código acima é tudo que você precisa para criar um plugin. Dentro da função, $this é a referencia ao objeto jQuery de onde o plugin foi chamado.
No exemplo, $this é um objeto com os elementos
e você pode fazer de tudo com eles. Como o plugin retorna $this, você pode continuar executando metodos do jQuery usando “Method Chaining”.
De volta a minha última questão. O que você possivelmente vai ganhar criando um plugin?
Alto nivel de reusabilidade
Muitos pedaços de JavaScript são geralmente reaproveitáveis, mas criando um plugin você passa ele para outro nível.
Configuração
Isso é ligado ao ponto anterior. O cenário sem plugin é ter um pedaço de código que você copia e cola modificando para seu proposito. Isso pode ficar muito mais fácil com plugins. Você pode escrever o seu para, por exemplo, aceitar algumas opções. Veja como fica agora:
Elegância
O código acima parece melhor que um script inteiro, não parece?
Agora é a hora de mostrar um exemplo real. Vamos fazer um script para tornar clicável cada linha da tabela.
Sempre que eu queria fazer as linhas clicáveis eu copiava esse código e mudava a URL ou o nome do parâmetro.
Com o plugin fica assim:
settings = $.extend(defaults, settings); // escreve em cima das opções default com as opções enviadas
$this = $(this);
É interessante para quem pretende fazer scripts de Greasemonkey utilizar a biblioteca jQuery para agilizar o desenvolvimento. Para isso o código comentado a seguir vai ajudar:
// Verifica se o jQuery pode ser usado
function GM_wait() {
if(typeof unsafeWindow.jQuery == ‘undefined’) { window.setTimeout(GM_wait,100); }
else { $ = unsafeWindow.jQuery; letsJQuery(); }
}
GM_wait();
function letsJQuery() {
// pode usar o $ aqui ;D
}
Obs: se você utiliza outro navegador existem outras opções para executar “user scripts”. Uma delas é o GreaseKit para WebKit (Safari).
Atualmente os captchas usados no Megaupload não são muito “difíceis” de resolver (de fato eles são muito ruins – exemplos abaixo).
Existem porém pontos interessantes aqui:
A API getImageData do HTML 5 é usada para pegar informações sobre os pixels da imagem. No HTML 5 é permitido adicionar uma imagem no elemento canvas (de onde então pose-se extrair informações sobre cada pixel usando JavaScript).
O script implementa uma rede neural, escrita em puro JavaScript.
As informações do pixel, extraídas da imagem usando canvas, são jogadas dentro da rede neural em uma tentativa de adivinhar o caractere usado – algo parecido com Optical Character Recognition (OCR).
Se abrirmos o código fonte podemos perceber que o funcionamento recai em como o captcha é implementado. Como mencionado anteriormente esse não é um captcha muito bom. Ele tem 3 letras, cada uma em uma cor diferente, usando uma possibilidade de 26 caracteres e eles são todos do mesmo tipo gráfico.
O primeiro passo é fácil de entender: O captcha é copiado dentro do canvas e então convertido para escala de cinza.
O canvas é então quebrado em três matrizes de pixels - cada uma contendo um caractere (isso é bem fácil de fazer - uma vez que cada caractere é de uma cor diferente, eles são separados pela diferença de cores usadas).
// Muda todos pixels de tal cor para a cor branca
if (image_data.data[i] == colour) {
image_data.data[i] = 255;
image_data.data[i+1] = 255;
image_data.data[i+2] = 255;
} else { // Todo o resto vira preto
image_data.data[i] = 0;
image_data.data[i+1] = 0;
image_data.data[i+2] = 0;
}
}
}
}
Finalmente qualquer pixel solto é removido da imagem (retornando um caractere limpo). Isso é feito procurando por pixels brancos (que eram da cor da letra) que são cercados de preto (que não bateram com nenhuma cor de letra). Se esse for o caso o pixel é simplesmente removido.
Estamos bem próximos de ter uma forma que pode alimentar uma rede neural, mas não estamos lá ainda. O script agora vai fazer uma forma bem crua de detecção de borda na forma, procurando pelos pixels que cercam o caractere e então o transformando em um retângulo. Nesse trecho a matriz também é reduzida para 20 por 25 pixels.
Então, após todo esse trabalho, o que nós temos? Uma matriz de 20 por 25 pixels contendo um único retângulo preenchido com preto e branco. Terrivelmente excitante.
Agora alguns pontos estratégicos são extraído da matriz para serem usado como "receptores" (eles que alimentarão a rede neural). Como exemplo, o receptor deve olhar para o pixel da posição 9x6 e verificar se ele está "ligado" ou não. Somente 64 estados (muito menos do que a matriz de 20 por 25 inteira) são então jogados para dentro da rede neural.
A questão que você deve estar se perguntando agora é: Por que não fazer somente uma simples comparação de pixels? Por que "isso de" redes neurais? Bom, o problema é que com toda essa redução da informação um monte de ambiguidade existe. Se você rodar a demonstração do script vai perceber que a comparação simples de pixels vai falhar mais que a nossa rede.
A próxima etapa é tentar adivinhar a letra. A rede é então alimentada com 64 valores boleanos (coletados das letras) juntamente com uma serie de valores pre-computados. Um dos conceitos por trás do funcionamento de redes neurais é que você reutiliza valores de execuções anteriores. É como se o autor do script rodasse ele várias vezes e coletasse uma serie de resultados para conseguir um valor ótimo. O resultado em si não tem nenhuma funcionalidade por si só mas ele ajuda a derivar o valor final.
A rede neural utiliza os 64 valores extraídos dos caracteres do captcha para comparar com valores pré-computados de cada letra do alfabeto. O resultado retornado dessas comparações é parecido com ‘98% de chances para A’, ‘36% de chances para B’, etc..
Repetindo com todas letras do captcha o objetivo é atingido. Ele não é 100% perfeito (imagino que resultados melhores seriam alcançados se a letra não fosse transformada em um simples retângulo antes da execução do algoritmo) mas é bom pelo que é – e impressionante considerando que tudo acontece 100% no navegador usando padrões emergentes.
Como nota – o que acontece aqui é bem especifico para esse captcha. Essa técnica deve funcionar em mais alguns captchas mal implementados, mas além disso a complexidade da maioria dos captchas é muito avançada (principalmente para qualquer analise no lado do cliente).
Eu estou esperando trabalhos interessantes derivados desse projeto – isso carrega bastante potencial.
RSS
