Pinceladas da Web » Microformats

Safari Microformats plugin

Pedro Rogério — Thu, 22 Nov 2007 08:00:00 +0000

Esse plugin para Safari notifica o autor se foram uilizados na página Microformats, onde você pode importar de forma fácil hCards e hCalendars para seu catálogo de endereços ou iCal. Esse plugin foi baseado na idéia de Jon Hicks.

Funcionamento

Caso seja encontrado algum Microformats na página, é mostrado um logotipo na barra de endereços:

Após isso é só clicar no logotipo e exportar o Microformat selecionado:

Download

Infelizmente esse plugin só está disponível para usuários de MAC OS.

Safari Microformats plugin

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

O poder dos Microformats

Pedro Rogério — Mon, 24 Sep 2007 09:00:16 +0000

Bem interessante esse vídeo.

Quer sabe mais sobre Microformats? Então dê uma olhada nesses outros vídeos:

O poder dos Microformats

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

Firefox 3 terá suporte nativo aos Microformats

Pedro Rogério — Mon, 16 Apr 2007 09:00:28 +0000

Nesse artigo você poderá ver o que a futura versão do Firefox irá fazer quando detectar um Microformat em uma Aplicação Web que trabalha com eles.

Firefox 3 terá suporte nativo aos Microformats

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

Ícones para Microformats

Pedro Rogério — Mon, 11 Dec 2006 08:15:37 +0000

Bartelme nos recomenda usar ícones dos microformats mais usados em nossa página, hAtom, Tag, hCard. Com isso podemos entregar aos usuários um conteúdo mais semântico. Faça o download e use a partir de agora você também.

Ícones para Microformats

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

Internet Explorer 8 com suporte a Microformats

Pedro Rogério — Thu, 09 Nov 2006 09:06:18 +0000

Devido a correria em busca de padrões, a Apple já implementou em seu Webmail o uso de Microformats, e ao que tudo indica, a próxima versão do Internet Explorer terá um amplo suporte aos mesmos.

Internet Explorer 8 com suporte a Microformats

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

Microformats cheat-sheets

Pedro Rogério — Thu, 07 Sep 2006 10:47:36 +0000

O fututo dos microformats é agora, e só quem viver verá!

Download em formato: PNG
Download em formato: PDF

Referências

Microformats cheat-sheets

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

Microformats: rel-enclosure

Pedro Rogério — Thu, 31 Aug 2006 10:03:41 +0000

Dentre os Microformats, talvez esse seja o microformato mais desconhecido entre os usuários, ele foi desenvolvido por Kevin Marks, em conjunto com o Technorati. Sua função é basicamente simples: colocado em um link, indica que o conteúdo do mesmo deve ser baixado e armazenado em cache, pode ser aplicado em (x)HTML, Atom, RSS e em XML arbitrário. Veja um exemplo de como aplicar esse microformato:


rel="enclosure">Faça o Download do Opera 9

Ele é melhor aplicado em links que indicam o download de vídeo, ou áudio, pois indica que o mesmo deve ficar armazenado em cache. Exemplo:


rel="enclosure">WWDC 2005 Keynote with chapters

Referências

Microformats: rel-enclosure

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

Microformats: hCalendar

Pedro Rogério — Wed, 09 Aug 2006 10:26:32 +0000

Voltando ao assunto dos Microformats, dessa vez iremos ver o Microformat hCalendar, ele é muito parecido com o iCalendar, usado na aplicação iCal do MAC. Como já deve ter imaginado, hCalendar é usado juntamente com o XHTML para marcar qualquer tipo de evento.

Para uma melhor compreensão dessa matéria, vamos a um exemplo:





1 de Novembro - 2 de NovembroFim do Mundo - e do Planeta Terra


Nós não iremos nos dar bem.

Como podem ver, tudo fica englobado dentro de uma div com a classe vevent, para marcar que temos dados relacionados a um evento marcado com hCalendar. Dentro da div ficará as informações do evento, que deverá ser marcado corretamente.

Para marcarmos um link com informações relevantes sobre o evento, utilizamos o atributo class=”url”. O texto do link pode ser o que queremos, mais as datas do evento, que é o que interessa aos links da url, contida no atributo href.

Outro dado importante que se deve marcar convenientemente é o resumo(summary), do evento. Para não complicar a sua vida, é melhor colocar este dado como nome do evento, e marcá-lo com a classe correspondente (class=”summary”). Juntamente com o nome do evento, costuma-se marcar o local do evento, esse dado deve ser marcado com class=”location”. Você não precisa obrigatoriamente usar div e span para marcar os dados, mas é altamente recomendado por questões de semântica.

O começo do envento deve-se marcar com class=”dtstart”, e no final deve-se usar class=”dtend”. As datas devem ficar da seguinte forma: AAAA-MM-DD.

Por último, como vocês podem ver foi citada uma pequena descrição do evento, que deve ser usado o atributo class=”description”. Mas há muitos mais dados que poderemos usar, você pode conhecê-los nas especificações do iCalendar

Microformats: hCalendar

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

Microformats: Atributo rel-license

Pedro Rogério — Fri, 07 Jul 2006 11:00:40 +0000

Dentre as várias especificações dos Microformats, uma outra especificação que podemos destacar é o atributo rel=”license”, que tem como função marcar os links das páginas com a licença que se está utilizando, seja uma licença de um blog, ou de um software desenvolvido por outras pessoas.

Dentro do site Microformats.org essa é a especificação mais simples que se pode encontrar, e podemos resumí-la da seguinte forma: Colocamos o atributo rel com o valor “license” em qualquer link que faça referência com a licença da página atual. Abaixo você pode ver um exemplo:


by-nc-sa 2.5

Exemplo de licença referente a software:


Apache 2.0

Implementações

Dreamweaver Extension suite: Extensão para o dreamweaver para a implementação de rel-license
Creative Commons (cc) license chooser
Yahoo! (cc) search
Google “Usage Rights” search

Microformats: Atributo rel-license

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

Microformats: Atributo rel=tag

Pedro Rogério — Wed, 07 Jun 2006 15:55:26 +0000

Hoje iremos ver o Microformato rel=”tag”, destinado a marcar os links com uma tag em concreto. Com toda essa onda de Web 2.0, Folksonomia, as tags ganharam uma forma bonita de catalogar conteúdo. Por isso sugre o Microformato rel=”tag”.

Para se usar esse Microformato, deve-se usar algumas regras:

O link deve ser coerente com a tag em questão.
A página que estamos linkando deve ser a página que mostra as informações referente
a essa tag.
A URL deve ter, em última instância, a tag que estamos marcando.

Seguindo essas diretrizes, podemos marcar nossos links com rel=”tag”. Mas atenção: Por ser um elemento visível, por exemplo, não poderíamos marcar um elemento link do head com esse microformato. Para uma melhor compreensão, vamos ver um exemplo: No meu Flickr eu usei a tag coreldraw onde eu guardo algumas fotos categorizadas sobre esse assunto. Veja abaixo como ficaria o link:


coreldraw

Microformats: Atributo rel=tag

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

Microformats: Atributo rev=vote-links

Pedro Rogério — Fri, 26 May 2006 18:44:16 +0000

Graças a esse Microformato podemos votar, “positiva ou negativamente”. A forma de usar esse Microformato é muito simples, como em todos os outros, você deve colocar um certo valor em cada atributo que deseja marcar, e nesse caso, o atributo a ser marcado é um hyperlink, e o atributo que usaremos será rev (antigamente se usava rel, mas acabou caindo em desuso, pois não refletia corretamente a relação do link com o documento linkado).

Os valores que podem ser usado nesse Microformato são os seguintes:

rev=”vote-for”: Esse valor deve ser usado quando queremos dar um “voto” positivo ao link que marcamos. Quando damos um voto positivo estamos dizendo que estamos de acordo com a página que linkamos.
rev=”vote-abstain”: Quando marcamos um link com esse valor, não estamos votando nem positivamente, nem negativamente, só estamos indicando que não estamos de acordo com o que está descrito na página.
rev=”vote-against”: Marcando com esse valor, estamos indicando que não estamos de acordo, que não recomendamos, estamos dando um voto negativo

Ficou confuso? Vou citar aqui alguns exemplos para vocês entenderem melhor:

Quanto vale seu site
R$ 100.000,00 jogados fora
Alguns pensamentos sobre os comentários em blogs

Como podem ver eu marquei os 3 links, usando o atributo rev para marcar minha opnião sobre cada um deles. No primeiro link de Carlos Cardoso, marquei que sou a favor.

No segundo, o artigo de Diego Eis, do Tableless, eu marquei que não sou contra e nem a favor.

E o último, um artigo de Eduardo Arcos, onde ele expõe sua opnião sobre os comentários em blogs.

Referências:

Microformats: Atributo rev=vote-links

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

Microformats: Atributo rel=nofollow

Pedro Rogério — Thu, 25 May 2006 00:51:48 +0000

Após um post do Google sobre a iniciativa para evitar o spam nos comentários, ficamos conhecendo o atributo dos Microformats rel=”nofollow”. Desde então, muitos blogs deram opniões a favor e outros contra, mas isso acabou passando despercebido. Nos dias dehoje, a essas alturas, acho que todos concordam com o uso do mesmo.

A função do microformato rel=”nofollow” serve para especificar aos user-agents (mecanismos de busca), que os links com esse atributo não devem ser seguidos pelos mesmos. Abaixo você pode ver um exemplo:

Teste

Como pode ver no exemplo acima, os buscadores (ex. Google), não poderá indexar o link em sua base e nem poderá gerar um ranking.

Referências:

Microformats: Atributo rel=nofollow

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?

Introdução aos Microformats

Pedro Rogério — Mon, 22 May 2006 22:29:42 +0000

Microformats são especificamente formato de dados projetados especialmente primeiro, para serem interpretados pelos seres humanos, e depois pelas máquinas. Basicamente são meta-informações que auxiliam no enriquecimento do seu site, ou seja, organizar a informação com o máximo de precisão. A vantagem de se usar microformatos é que não é preciso usar metatags sendo que a infomação já está na pagina. Somente com as tags do HTML e XHTML você não conseguiria fazer isso devido as suas limitações.

Abaixo você pode ver as especificações dos Microformats:

hcard – Pessoas e Organizações
hCalendar – Calendários e Eventos
hReview – Opniões, Ratings e Reviews
XFN – Redes Sociais
XMDP – XHTML Meta Data Profiles
rel-license – Licenças
rel-tag – Tags, Keywords, Categorias
rel-nofollow – Um hiperlink com esse atributo não deve ser seguido pelos robots de busca
XOXO – Listas e esboços
VoteLinks – Sistemas de Votação

Referências:

Introdução aos Microformats

Já conhece o meu outro blog? O endereço é o: CSS no Lanche

Você ainda não está me seguindo no Twitter, o que está esperando para fazer isso?