javascript

Uma das formas mais bacanas de trabalhar com criação em HTML5 hoje em dia (pelo menos de iniciar projetos menores e utilitários) é usando um serviço de editor online. Neles, você pode editar código, testar a vontade e até salvar na própria ferramenta (ganhando uma URL impronunciável, mas com o seu código salvo "nela"). Aqui apresento algumas ferramentas interessantes para isso:

• CodePen - Editor que oferece edição do HTML, CSS e JavaScript, exibindo o resultado abaixo das áreas de edição. Oferece um plano pago, que permite upload de arquivos, modo colaborativo e modo professor.
• JS Bin - Cinco áreas disponíveis: HTML, CSS, JavaScript, Console e Output. O mais completo nesse aspecto. Ainda não o utilizei de fato.
• jsdo.it - Seria uma excelente ferramenta, não fosse um bug muito inconveniente. Nele, você se cadastra e cria projetos. Um projeto pode referenciar outro projeto, o que é bastante útil quando lidamos com bibliotecas e aplicativos de forma separada. Permite também fazer upload, o que dá condições de fazermos jogos em HTML5, mandando imagens e sons para lá. Ele também faz verificação do código escrito, com um depurador JavaScript rodando no cliente deles. O bug de que falei entra justamente aí. A opção Salvar aparentemente não salva, salva apenas para efeito de teste. Nos meus testes, perdi dois dias de trabalho por confiar nessa opção Salvar...
• jsfiddle - O mais popular. Divide a tela em 4 áreas: HTML, CSS, JavaScript e Result. Poderiam oferecer um modo de atualização automática do "Result", mas é uma excelente ferramenta. O grande diferencial é a disponibilidade de várias versões diferentes para as mesmas bibliotecas.
• Liveweave - Divide a área em 4 como o jsfiddle, mas com a vantagem de atualização em tempo real, também com opção de desativar tal recurso. Considero um dos melhores.
• Reloado - Área de JavaScript e de HTML. O usuário escolhe se quer visualizar o resultado em tempo real, a cada mudança, ou se prefere ficar clicando no botão Render. Dos melhores, na minha opinião.

Bem, agora o principal: um comparativo entre eles (adoro essas tabelas-comparison), considerando as bibliotecas oferecidas para fácil inclusão, por padrão, em cada um:

Meu xará há alguns dias twitou sobre um exemplo de jogo usando o elemento Canvas, do HTML5. Terminei aproveitando a ideia para fazer uma página de erro diferente para o meu site. É a 404 Quest.

Ao tentar acessar uma página que não exsite aqui no meu site, você será apresentado a esse jogo, que funcionará bem em navegadores web modernos.

Nesse jogo, você tem que coletar livros digitais. Uma vez coletados, aparecerá a saída (que joga na página principal do site).

Claro, isso é um jogo bem primitivo e sem objetivo. A ideia é ir melhorando a coisa com o tempo livre aos poucos. Acrescentar sistema de combate, missão mais elaborada...

Bom, basta acessar uma página inexistente para jogar ou baixar o código, que estou fornecendo agora, no anexo.

Antes de mais nada, blogroll é uma coleção de links para outros blogs. Este termo é como é conhecido internacionalmente, apesar de eu colocar em meu blog com o título Blogs amigos, tentando parecer mais amigável ao leigo (bom trocadilho, né?).

Já faz um bom tempo que mantenho esse Blogroll em meu blog. Para fazer esse blogroll antigo, eu usava dois serviços: o delicious com sua exportação para RSS e o módulo Drupal agregador de conteúdo, que é capaz de criar um bloco para um certo RSS.

Eu criei uma tag "blog" no Delicious e comecei a jogar lá todos os blogs que achava interessantes (freqüentemente, os blogs cujo RSS eu também assino). É daí que vêm minha lista de blogs amigos.

Mas havia alguns inconvenientes nessa estratégia, dentre os quais posso citar dois como principais: a dificuldade de personalizar o blogroll apenas, sem interferir em outros blocos gerados pelo mesmo esquema; e, o principal, a ordem em que aparecem os blogs ser a partir dos mais novos.

É interessante mostrar a partir dos mais novos, mas quando se trata de um blogroll com muitos blogs na fila, começa a ficar bem injusto, pois os blogs mais antigos terminam nunca mais aparecendo.

Como sera o ideal? Uma forma de pegar todos os blogs que cadastrei, escolher alguns deles (10, por exemplo) ao acaso e mostrá-los. Assim todos teriam chances iguais de aparecer.

Passei hoje no Delicious e descobri que ele oferece uma forma de manipular essas informações para apresentarmos da forma que quisermos. Sim, um arquivinho JavaScript com todo o conteúdo facilmente acessível.

A partir do exemplo que o Delicious apresenta, fiz um blogroll do jeitinho que eu queria, e mais: com o ícone de cada site!

Quem quiser usar essa idéia, fique à vontade! Aqui está o código, e você só precisa mudar o endereço http://del.icio.us/feeds/json/bardo/blog?count=100 no código, trocando bardo por seu login e blog pela tag que você usa, e definir em qtShow para a quantidade de blogs que você quer mostrar no seu blogroll. Claro que, desde que saibam o que estão fazendo, estão livres para mudar bem mais que isso no código...

<div id="myblogroll"></div>
<script type="text/javascript" src="http://del.icio.us/feeds/json/bardo/blog?count=100"></script>
<script type="text/javascript">
qtShow =13
function showImage(img){
return (function(){
img.style.display='inline'
})
}
function randOrd(a,b){
return (Math.round(Math.random()) -0.5)
}
ul =document.createElement('ul')
ul.style.listStyle ="none"
allp =new Array()
for (i in Delicious.posts){
allp.push(Delicious.posts[i])
}
allp.sort(randOrd)
last =(allp.length >qtShow) ?qtShow :allp.length -1
for(i =0; i <=last; i++){
post =allp[i]
li =document.createElement('li')
a =document.createElement('a')
a.style.marginLeft ='20px'
img =document.createElement('img')
img.style.position ='absolute'
img.style.display ='none'
img.height =img.width =16
img.src =post.u.split('/').splice(0,3).join('/')+ '/favicon.ico'
img.onload =showImage(img)
a.setAttribute('href',post.u)
a.appendChild(document.createTextNode(post.d))
li.appendChild(img)
li.appendChild(a)
ul.appendChild(li)
}
document.getElementById('myblogroll').appendChild(ul)
</script>

E pronto! É só colocar em um bloco no template do seu site e você tem o seu próprio blogroll, de facílima manutenção (é só adicionar links pelo Delicious).

Notas Anexas

Primeiro, o especialista em JavaScript aqui simplesmente não sabia que esta linguagem tinha uma estrutura de dados similar a Array (simplificado) sem usar a classe Array. Alguém sabe mais a respeito? Sabe um jeito mais prático de converter para Array ou contar seus elementos? Se alguém souber, eu agradeço!

Outra: se você tem um blog e tem acesso aos arquivos do blog, por favor coloque um favicon.ico na raiz do PATH do seu blog! Com isso, seu blog aparecerá com ícone nos blogs que usarem este código e te adicionarem.