Boas práticas de Desenvolvimento com Padrões Web » Extensões

Para ficar de olho: Microformats

Elcio Ferreira — Mon, 08 Jan 2007 13:41:13 +0000

Veja este artigo da Read/Write Web: Mozilla Does Microformats: Firefox 3 as Information Broker.

Enquanto isso, recebemos muitos e-mails de gente que ainda não entendeu o que são os tais microformats, ou, o que é muito mais comum, para que eles exatamente servem. Então vamos tentar elucidar, escolhendo um microformat como exemplo: hCard, um dos mais populares, vai servir perfeitamente.

Quase todo mundo, ao criar um site, precisa colocar informações como nome, endereço, e-mail, telefone, etc. É algo comum, recorrente, e você mesmo já deve ter feito isso uma porção de vezes, para uma porção de gente. E talvez para cada cliente você pode ter escrito markup diferente para a mesma informação. E mesmo que você tenha um padrão, e que use o mesmo código XHTML para os “perfis”, “endereços”, “informações de contato” e “sobre” de todos os seus clientes, seu padrão é diferente do meu, que é diferente do de todo mundo mais.

A idéia dos microformats é nos dar um padrão. Não um padrão quando a Web Semântica estiver funcionando, se é que um dia vai estar. Mas um padrão hoje, para a construção da web semântica com letras minúsculas. Assim, ao invés de inventar seu próprio padrão para os profiles de seus clientes, você pode usar o padrão hCard. Na prática, o padrão consiste geralmente em uma série de nomes de classes para cada informação que você pode querer descrever, acompanhado às vezes das tags que você deve usar.

Então é fácil, ao invés de cada um de nós inventar seu próprio jeito de descrever as coisas, nós compartilhamos de um padrão comum. O mesmo padrão está sendo usado nos profiles do Last.fm e do Flickr, nos resultados do Yahoo Local, E daí, para que serve isso?

O truque é que, se eu e você usarmos o mesmo código para o mesmo tipo de informação, as aplicações desenvolvidas para entender meu site provavelmente vão entender o seu. E isso se torna muito atraente para quem desenvolve aplicações, principalmente se além de eu e você, o resto do mundo também estiver usando o mesmo padrão. É o caso do Firefox 3 que, segundo o artigo da Read/Write Web, vai entender os microformats em seu site e permitir ao usuário abrí-los com a aplicação padrão em sua máquina ou na web. Se você quer ter uma idéia de como isso funciona, experimente instalar a extensão Operator para o Firefox.

Você pode achar tudo meio sem graça ao navegar com isso e não encontrar muitos sites com o recurso. Isso me lembra o começo do RSS. Não sei se você se lembra disso, mas a gente tinha dificuldades em encontrar sites com RSS para assinar. O Charles criou inclusive um projeto, o RSSficado, com ferramentas para a criação de RSS de sites que não se preocupavam em oferecer o recurso. O projeto foi seguido de diversos outros semelhantes, em diferentes linguagens e plataformas de programação. Eu fiz até uma ferramenta semelhante em ASP que na época chegou a me servir duzentos feeds.

Hoje o projeto RSSficado foi descontinuado. O Wiki está até meio largado, cheio de spam. Meu RSSficador, assim como uma porção de outros que conheci também cairam no esquecimento. Por quê? Porque todo site que se preze hoje se preocupa em oferecer RSS para os leitores. Se encontro algum site que não oferece o recurso, simplesmente deixo de lê-lo, porque o concorrente provavelmente tem conteúdo tão bm quanto, e com um feed para eu assinar.

Suponho que a mesma história vai se repetir com os microformats. Conforme os sites forem adotando os padrões de mark-up, a coisa inteira vai ficando mais útil, mais aplicações interessantes irão surgindo para usar os microformats, e mais vai parecer óbvio usá-los.

Segue então minha listinha de coisas que você pode fazer para tornar mais úteis seus sites e aplicações:

Use microformats: essa é a parte mais fácil. Ao escrever datas para divulgar eventos, use hCalendar, ao publicar suas informações pessoais ou comerciais, ou as de seus clientes, use hCard, ao apontar para suas coordenadas geográficas, use geo, ao escrever avaliações sobre um produto qualquer, use hreview, e assim por diante. Dê uma olhada nos links, esses formatos são mesmo simples de se implementar.
Coloque seus clientes na dianteira: mas não saia feito um fanfarrão tentando explicar para eles o que são os microformats e etc. A não ser que seus clientes sejam técnicos, contratando uma consultoria estratégica em padrões e o futuro da web, coloque microformats nos sites deles, onde for adequado, e não conte a eles. Essa coisa toda é técnica demais, e o cara te contratou justamente porque ele não entende disso. Seus clientes não-técnicos não ficam felizes porque o site deles foi escrito em XHTML válido e semântico, mas porque o site carrega rápido, os clientes com Mac e Linux pararam de reclamar e a nova posição no Google aumentou as vendas. Ele talvez nem saiba que o blog que você criou para ele tem RSS, e talvez nem saiba o que é RSS. Mas ele fica feliz porque as pessoas, que ele nem sabe que chegaram ao site porque assinaram o feed, lêem, comentam e até compram.
Use aplicações que trabalham com microformats: de duas maneiras. Primeiro, instale em sua máquina ou se cadastre em aplicações online para uso pessoal. Por exemplo, instale a Operator. O segundo jeito legal de fazer isso é oferecer aos seus visitantes suporte a microformats através de aplicações online. Veja, por exemplo, este artigo do Henrique, que aponta para esse conversor online.
Divulgue os microformats: bem, você entendeu, quanto mais gente estiver usando isso, mais útil será a coisa toda. Então faça sua parte.
Crie aplicações que suportem microformats: se você vai criar um site de currículos para uma empresa de RH, que tal facilitar a vida do candidato, perguntando a URL do site dele e, se ele tiver hCard, importando os dados para o formulário de contato para que ele só precise preencher o que não está lá? Há demanda para geradores, importadores, exportadores e consumidores de microformats.
Escreva javascript que trabalhe com microformats: se você escreve um script que trabalha com hCalendar, por exemplo, exibindo as informações de uma maneira especial, criando um link para um serviço online, ou fazendo qualquer outra coisa útil que sua criatividade puder produzir, ele poderá ser usado com facilidade por qualquer um que tenha hCalendar em seu site.
Crie novos microformats: se você tem uma necessidade específica, e não há nenhum microformat que a contemple, escreva um e envie a proposta para o microformats.org. Quem sabe você não vai estar resolvendo o problema de muita gente, e ajudando a criar possibilidades para novas e interessantes aplicações que vão beneficiar todo mundo, inclusive seus clientes? Sinto falta, por exemplo, de microformats relacionados com e-commerce. Não achei nada sobre isso lá. Que tal um microformat com os dados sobre um produto num site de e-commerce, inclusive os dados sobre preço e pagamento? Imagine como seria mais simples a vida de quem faz sites de comparação de preços, programas de afiliados e afins.

Update: para aqueles que pediram um exemplo.

Foxmarks

Diego Eis — Fri, 09 Jun 2006 02:01:54 +0000

Você tem um computador em casa, um no trabalho, um na casa da namorada, outro na casa da avó e quer manter seu favoritos sincronizado entre eles? Seus problemas acabaram!

O Foxmarks sincroniza os favoritos guardando uma versão do seu favoritos online. Ele compara os favoritos do firefox que você está usando, e se for mais ou novo ou mais velho, ele atualiza para você automaticamente.

dica do Rigonatti.

FootieFox: a Copa em nosso navegador predileto.

Elcio Ferreira — Thu, 08 Jun 2006 00:57:07 +0000

Dica do Marcelo Moreschi: FootieFox, acompanhe os jogos da Copa do Mundo em seu Firefox. Além disso, mostra os resultados de partidas de diversos países mas, infelizmente, não do Brasil.

Interessante e impressionante, mostra um pouco do potencial da plataforma Mozilla, do XML e da Web. A aplicação é multi-plataforma, multi-idioma e atualizada em tempo real. Há alguns o desenvolvimento de uma aplicação dessas era um trabalho e tanto. Hoje é quase trivial.

HTML Validator

Diego Eis — Wed, 07 Jun 2006 10:30:18 +0000

A extensão HTML Validator é muito simples: Ela te mostra se o site está validado corretamente ou não. Quando instalada, ela mostra um iconezinho no lado inferior direito, mostrando se há erros, warnings ou se está totalmente validado. Além disso, ela muda a janela de Source do Firefox… Melhorando a forma de análise do código!

Você pode ver mais dicas de extesões aqui.

Google Page Rank Status

Diego Eis — Wed, 07 Jun 2006 10:01:02 +0000

O Google Page Rank Status mostra na barra de status do Firefox, a pontuação que o site que você está visitando recebe no ranking do Google. Simples assim.

O Tableless é apenas 6. Já sites bem conhecidos, como da Apple ou Adobe por exemplo, chegam a ter 10 na pontuação facilmente.
Podíamos fazer uma campanhazinha para aumentar o ranking do Tableless, o que acham?

Quer saber sobre mais extensões para Firefox? Visite nossa categoria sobre Extensões.

Chatsum

Diego Eis — Mon, 05 Jun 2006 00:52:07 +0000

Tá bom… eu queria ter sido um dos primeiros a falar desta extensão, mas parece que o Meiobit.com e o GuiLeite chegaram primeiro. Este poste estava agendado para amanhã de manhã… Mas, lá vai; Chatsum é uma extensão interessante: Ela permite que pessoas que estejam visitando um site ao mesmo tempo, participem de um chat.
Quando usada, ela abre um pequeno painel onde eles podem trocar mensagens. Legal… seria mais ou menos como um sisteminha de comentário “ao vivo”. Gostei da ferramenta, vou começar a usar!

O ponto ruim é que tem que se cadastrar no site para poder postar imagens. Mas vale a pena. O cadastro é tão pequeno quem nem dá preguiça de preencher.
Uma coisa que não funcionou aqui também foi o atalho. Seria CTRL+ALT+C, mas não funcionou. Mas para acessar é só ir em: Exibir > Painel > Chatsum.

Ahh, e se alguém quiser visitar meu profile, basta seguir este link.

Para saber sobre mais extensões, visite nossa categoria Extensions.

CSS Viewer

Diego Eis — Sun, 04 Jun 2006 16:03:32 +0000

A CSSViwer permite que você veja todas as informações de um objeto. Ela te mostra as informações de fonte e texto, cores e background, informações de box, ou seja, tudo que possa interessar. Bem interessante e útil para quando você visitar um site por exemplo, que quiser descobrir a família de fonte e o seu tamanho, ou a cor de fundo e largura e altura do objeto.

Extension: Mouse Gestures

Diego Eis — Fri, 03 Feb 2006 10:00:59 +0000

Quem usa Opera já tem essa função a muito tempo. Os Mouse Gestures são extremamente úteis para facilitar a navegação pelos sites e fechar abas sem ter que acertar o X ou ter que pressionar as teclas de atalho.

Para quem não conhece… Essa extensão permite que você faça alguns movimentos com o mouse para executar algumas funções costumeiras, por exemplo: fechar abas, refresh, duplicar abas, voltar e avançar na página, etc…
Realmente, muito interessante.

Mouse Gestures de Optimoz Team.

Translation Panel

Diego Eis — Tue, 31 Jan 2006 10:00:19 +0000

Sempre é bom ter um bom tradutor por perto. Usando a Translation Panel, isso fica um atalho de distância. Ela usa vários sites para traduzir textos que você preferir.

Apertando CTRL + Q, um painelzinho é aberto no lado esquerdo do seu Firefox. Lá você escolhe os idiomas que quer traduzir e por qual site você prefere traduzir. Eu uso sempre o Free Translation and Profession Translation Services.

Translation Panel de Nazo

Update:
Versão da extensão para Firefox 1.5.

Session Saver

Diego Eis — Thu, 26 Jan 2006 10:00:30 +0000

Você estava com uma centena de tabs abertas, todos muito importantes, que se o Firefox ou o Windows travasse nessa hora, você seria capaz de vender seu rim para que pudesse te-las de volta… Pois é… esse medo pode ser deixado de lado.
A extensão SessionSaver restaura as abas que estavam abertas quando o Firefox foi fechado na última vez.
Ou seja, ele guarda todos as tabs, com os últimos sites que você estava visitando, se acontecer algum chabu, elas ficam lá, intactas.

SessionSaver de Rue