Ir para conteúdo / Skip to content

Posts da categoria: ‘ Microformats ’

SAFARI MICROFORMATS PLUGIN

blog reactions Postado em: 22 de novembro de 2007 por Pedro Rogério

Logo Safari Microformats Plugin

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:

Logotipo dos Microformats na barra de endereços

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

Tela onde você expora os Microformats selecionados

Download

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

O PODER DOS MICROFORMATS

blog reactions Postado em: 24 de setembro de 2007 por Pedro Rogério

Bem interessante esse vídeo.

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

FIREFOX 3 TERÁ SUPORTE NATIVO AOS MICROFORMATS

blog reactions Postado em: 16 de abril de 2007 por Pedro Rogério
Human Condition

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.

Aprenda com quem sabe de verdade.

ÍCONES PARA MICROFORMATS

blog reactions Postado em: 11 de dezembro de 2006 por Pedro Rogério

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.

Microformats Icon set

INTERNET EXPLORER 8 COM SUPORTE A MICROFORMATS

blog reactions Postado em: 9 de novembro de 2006 por Pedro Rogério

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.

MICROFORMATS CHEAT-SHEETS

blog reactions Postado em: 7 de setembro de 2006 por Pedro Rogério

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

Microformats Cheat Sheets

  • Download em formato: PNG
  • Download em formato: PDF

Referências

MICROFORMATS: REL-ENCLOSURE

blog reactions Postado em: 31 de agosto de 2006 por Pedro Rogério

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:


<a href="http://www.opera.com/download/get.pl?id=28277&location=171&nothanks=yes&sub=marine" rel="enclosure">Faça o Download do Opera 9</a>

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:


<a href="http://homepage.mac.com/kevinmarks/wwdc2005.mov" rel="enclosure">WWDC 2005 Keynote with chapters</a>

Referências

MICROFORMATS: hCALENDAR

blog reactions Postado em: 9 de agosto de 2006 por Pedro Rogério

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:


<div class="vevent">
<p>
<a class="url" href="http://www.fimdomundo.com.br/">
<abbr class="dtstart" title="20061101">1 de Novembro</abbr> - <abbr class="dtend" title="20061102">2 de Novembro</abbr><span class="summary">Fim do Mundo</span> - e <span class="location">do Planeta Terra</span>
</a>
</p>
<p class="description">Nós não iremos nos dar bem.</p>
</div>

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: ATRIBUTO REL-LICENSE

blog reactions Postado em: 7 de julho de 2006 por Pedro Rogério

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:


<a href="http://creativecommons.org/licenses/by-nc-sa/2.5/" title="Licença deste Blog" rel="license"><abbr title="Attribuição-Não-Commercial" xml:lang="pt-br">by-nc-sa</abbr> 2.5</a>

Exemplo de licença referente a software:


<a href="http://www.apache.org/licenses/LICENSE-2.0" rel="license">Apache 2.0</a>

Implementações

MICROFORMATS: ATRIBUTO REL=TAG

blog reactions Postado em: 7 de junho de 2006 por Pedro Rogério

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:


<a href="http://www.flickr.com/photos/pedroassis/tags/coreldraw/" title="Página com as fotos
marcadas com a tag: coreldraw" rel="tag">coreldraw</a>
Página 1 de 212»