TidBits

A alguns meses atrás eu fiz uma série de experimentos em HTML5, um deles foi um player de áudio simulando o bom e velho winamp.

O que tem de HTML5?

Pouco, tem a tag audio, drag and drop eu comecei a fazer pra controlar o volume.

Pesa pouco, na verdade usei o jQuery, fora isso são 14kb de js.

O player aceita todos os atalhos do Winamp :

Z > Volta Música
X > Play
C > Pause
V > Stop
B > Avançar Música

-> (Seta para direita) > Avança 5 segundos
<- (Seta para esquerda) > Volta 5 segundos

Scroll do Mouse > Aumenta e diminui o volume

O player roda no Chrome 5.0+, Firefox 3.6+ (porém no Firefox, por segurança deles, só roda se tiver num servidor, não adianta tentar abrir o html), Opera 10.5+, Safari 5+.

Pra quem quiser dar uma olhada, ou contribuir com algo, deixei o player disponível para download aqui. Como tem músicas em ogg e em mp3 (por causa do Safari que não roda .ogg), são 16mb pra baixar.

Nessa sexta-feira, teve um café com browser, um evento sediado pela w3c Brasil onde ela convida fabricantes de browsers a falarem dos seus produtos, por lá já passou o pessoal do Ópera, Firefox e até da Internet Explorer.

Porém, nessa edição o formato foi diferente, o tema era HTML5 e os convidados foram o Élcio da Visie (empresa de treinamento e desenvolvimento web que vai oferecer um curso de html5) e a AgênciaClick, onde esteve presente eu (Programador de Interface), Robson Dantas (Gerente de Tecnologia) e Ricardo Murer (Diretor de Tecnologia).

Durante a nossa apresentação, mostramos alguns protótipos de estudos que fizemos aqui na AgênciaClick, entre eles um player usando a tag <audio> simulando a interface do winamp e um jogo simulando o Guitar Hero:

O jogo está disponível aqui. Funciona para Chrome 5+, Ópera 10.5+, Safari 5+ e Firefox 3.5+ (sendo que para Firefox, é necessário estar hospedado em um servidor, ou seja, se você abrir o html como um arquivo, não funciona por questão de segurança do Firefox).

O jogo usa os conceitos de <audio> e <canvas> do HTML5, CSS3 e bastante javascript. Eu desenvolvi o game em 4 dias, ou seja, dá pra melhorar muito, devo aprimorar o código, colocar Ranking Online, mais músicas, etc.

Mas a idéia inicial era mostrar que pode ser feito um jogo em html5, com 20kb de JavaScript que antes só era possível ser desenvolvido em flash.

Nos próximos posts vou escrever um pouco das experiências em html5 que ando fazendo.

Pra iniciar, fiz um jogo simples daqueles que todo celular tem, usando somente o elemento Canvas.

O Canvas funciona como se fosse um “shape” do photoshop, você cria um elemento e lá você pode desenhar literalmente, circulos, quadrados, linhas, pontos, colocar backgrounds, usar degradê, etc.

O Canvas não dá suporte ao ie6, ie7 e ie8. Existe um elemento similar pra eles chamado “shape” e existem algumas libs em javascript que traduz automaticamente tudo o que for desenhado em canvas pra shape, ou seja, você chama o js que ele se vira com o resto. No caso, usei o explorercanvas (dica do Koji), mas também tem o html5.js e o canvas.js disponível pra gente usar.

O jogo é bem simples, não tem muitos recursos, poderia ter ranking, som, opções e um monte plus mas não era essa a intenção do primeiro post sobre html5. O jogo tem 8kb (somando html / css e javascript ) pros browsers que suportam canvas e 19kb para os que não suportam. não usa nenhum framework de javascript (do tipo jquery, mootols, prototype) e não faz requisição de nenhuma imagem, tudo que está na tela foi desenhado em canvas com javascript.

Deixei disponível o código fonte e para jogar é só clicar na imagem ou entrar aqui

Por sinal, recomento o Chrome ou Opera 10.5 que são os browsers mais rápidos da atualidade.

Quem jogar, fala quantos pontos fez.
=)

Os navegadores um pouco mais modernos tem uma barra de buscas pra você pesquisar na Internet.

O Firefox em português por exemplo além da busca no Google já vem com busca pra Wikipedia, Yahoo, Buscapé, Mercado Livre, etc (e boa parte dos lucros da Mozilla vem dessa barra de busca, acreditem).

Mas o que pouca gente sabe, é existe um método em javascript capaz de adicionar uma fonte nova de pesquisa na barra.

Primeiro é necessário criar um xml:

< ?xml version="1.0" encoding="UTF-8"? >
<OpenSearchDescription xmlns="http://a9.com/-/spec/opensearch/1.1/">
<ShortName>Buscar no TidBits</ShortName>
<Description>Programação Front End e Arquitetura de Informação</Description>
<InputEncoding>iso-8859-1</InputEncoding>
<OutputEncoding>iso-8859-1</OutputEncoding>
<Url type="text/html" template="http://www.tidbits.com.br/?s={searchTerms}"/>
<Image height="16" width="16" type="image/x-icon">http://www.tidbits.com.br/img/tidbits_fav_ico.gif</Image>
<Language>pt-BR</Language>
<Developer>Danilo Augusto Martins</Developer>
</OpenSearchDescription>

A estrutura como podem ver é bem simples, o único truque está na Url da busca :
<Url type=”text/html” template=”http://www.tidbits.com.br/?s={searchTerms}”/>

Onde {searchTerms} é a palavra que o site vai receber do Navegador, ou seja, o que o usuário digitou.

Depois, é necessario colocar no <head> uma linha específicando que existe uma aplicação opensearch:

<link title="Busca no TidBits" rel="search" type="application/opensearchdescription+xml" href="http://www.tidbits.com.br/opensearch.xml">

Agora o comando em javascript que faz isso é mais simples ainda, é só chamar o xml através do método AddSearchProvider:

window.external.AddSearchProvider('http://www.tidbits.com.br/opensearch.xml');">

Ou seja, de uma maneira porca, basta um onClick num link / botão:

<a href="#" onclick=" window.external.AddSearchProvider('http://www.tidbits.com.br/opensearch.xml');">
Adicione o TidBits na busca do seu navegador
</a>

E veja o resultado:

Adicione o TidBits na busca do seu navegador

O método não funciona em todos os browsers, pelos meus testes, funcionou no Firefox 2, Firefox 3 e Internet Explorer 7. Num total os 3 browsers, hoje, tem uma participação de 50% aproximadamente do mercado de browsers. Na especificação do IE8, diz que o método funciona, mas pelo que testei, não rolou, e ví bastante gente em fóruns reportando o mesmo problema (se alguém tiver alguma solução, poste aqui nos comentários por favor).

Mas, obviamente, o ideal é verificar o browser do usuário, e só mostrar o botão de adicionar se for um desses browsers:

Então vamos lá, crie o html:

<a id="opensearch" href="#">
Adicione o TidBits na sua barra de Busca do seu navegador
</a>

No css, deixe o botão com display:none :

#opensearch{ display:none; }

E no javascript:

var agt=navigator.userAgent.toLowerCase();
if(agt.indexOf("msie 7")!=-1 || agt.indexOf("firefox/2")!=-1 || agt.indexOf("firefox/3")!=-1) {
document.getElementById("opensearch").style.display = 'block';
document.getElementById("opensearch").onclick = function(){
window.external.AddSearchProvider("http://www.tidbits.com.br/opensearch.xml");
return false;
}
}

Bom, é isso.

Implementei um desses no meu site sobre o Corinthians, quem quiser ver (e obviamente estiver usando FF2, FF3 ou IE7), olha lá:

Espero que tenham gostado.

Abraços,