Padrões de Sítios de Internet

Microformatos

Definição de Web Semântica

Web semântica de acordo com a W3C é:

Evoluindo a já clássica e conhecida “Web de documentos”, o W3C ajuda no desenvolvimento de tecnologias que darão suporte à “Web dos dados”, viabilizando pesquisas como num banco de dados. O objetivo final da Web de dados é possibilitar com que computadores façam coisas mais úteis e com que o desenvolvimento de sistemas possa oferecer suporte a interações na rede. O termo “Web Semântica” refere-se à visão do W3C da Web dos Dados Linkados. A Web Semântica dá às pessoas a capacidade de criarem repositórios de dados na Web, construírem vocabulários e escreverem regras para interoperarem com esses dados. A linkagem de dados é possível com tecnologias como RDF, SPARQL, OWL, SKOS.
Dados Linkados Header link

Dados Linkados Header link

A Web Semântica é a Web de Dados – de datas, títulos; números, propriedades químicas e qualquer outro dado que se possa conceber. O RDF é a base para a publicação e linkagem de dados. Outras tecnologias permitem inserir dados em documentos (RDFa, GRDDL) ou expor o que você tem em um bancos de dados SQL, ou ainda torná-lo disponível no formato RDF.
Vocabulários e Ontologias Header link

Vocabulários e Ontologias

Vocabulários são importantes ferramentas e valiosos instrumentos para organizar os dados de um domínio. Usando OWL (para construir vocabulários, ou “ontologias”) e SKOS (para projetar sistemas de gestão do conhecimento), é possível enriquecer os dados adicionando significados, permitindo que mais pessoas (e mais máquinas) possam reutilizá-los e fazerem mais com os dados.
Consultas Header link

Consultas Header link

Linguagens de consulta andam de mãos dadas com bancos de dados. E se a Web Semântica é como um banco de dados global, é fácil então perceber que será necessário uma linguagem de consulta para esses dados. SPARQL é a linguagem de consulta para a Web Semântica.

Inferência

Ao lado da Web Semântica se encontra a inferência – o raciocínio sobre os dados a partir das regras. O W3C trabalhar em regras, principalmente através de RIF e OWL, seu foco está na tradução entre linguagens de regras e intercâmbio entre diferentes sistemas.

Aplicações verticais

O W3C está trabalhando com diferentes setores – por exemplo nas áreas da Saúde, de Governos e de Energia, para promover e melhorar a colaboração, pesquisa, inovação e adoção da tecnologia de Web Semântica. Na área da Saúde, por exemplo, a Web Semântica auxilia a tomada de decisões no domínio da investigação clínica, e para interoperar informações biológicas e médicas entre as instituições.

Web Semântica

Definição de Microformatos

Os microformatos são uma forma de adicionar marcação simples para legíveis a humanos, itens de informaçãos como um evento, detalhes de contato ou uma localização, em páginas da web de modo que a informação nela contida pode ser extraída pelo software e ser indexada, buscada, salva, ter referência-cruzada ou combinada.

Mais tecnicamente, eles são itens de marcação semântica, usando só o padrão (X)HTML e com uma definição de nomes-de-classes comum. Eles são abertos, disponíveis e livres para qualquer um usar.
Por que Microformatos

Por que propusemos microformatos?

Em resumo, microformatos são uma convergência de um número de tendências:

um próximo passo lógico na evolução de web design e arquitetura de informação.
um número de pessoas e organizações que publicam informações ricas para si próprios, sem ter que confiar em serviços centralizados.
um reconhecimento que (fora da areas de especialista) esforços de meta dados “tradicional” ou tem falhado ou levado longo tempo para adquirir qualquer adoção, que uma nova abordagem foi necessária.
uma forma de usar (X)HTML para informação.

introduction-pt-br · Microformats Wiki

Definição dos microformatos hCard e hCalendar

hCard

hCard é um simples, aberto formato distribuído para represetar pessoas, companias, organizações e lugares usando uma representação 1:1 de propriedades e valores de padrão vCard (RFC2426) em semântica XHTML. hCard é um dos muitos padrões abertos de microformato apropriado para ser inserido em (X)HTML, Atom, RSS, e o arbitrário XML.

Modelo de hCard:

1<span class="tel">

2 <span class="type">home</span>:

3 <span class="value">+1.415.555.1212</span>

4</span>

hCard

hCalendar

hCalendar é um formato simples, aberto para eventos de publicação na web, usando uma representação 1:1 de iCalendar (RFC2445) VEVENT propriedades e valores em HTML. hCalendar é um dos vários padrões microformat abertos adequados para a incorporação de dados em HTML/HTML5 e Atom / RSS / XHTML ou outra XML.

Modelo de hCalendar:

1<span class="vevent">

2 <span class="summary">The microformats.org site was launched</span>

3 on <span class="dtstart">2005-06-20</span>

4 at the Supernova Conference

5 in <span class="location">San Francisco, CA, USA</span>.

6</span>

hCalendar

Aplicar microformats para marcação de contato (hCard), e informações sobre evento (hCalendar) & Passo a passo: Como utilizar uma ferramenta de tradução microformats para criar um link que permita o usuários baixar ou mover o conteúdo para outro local (por exemplo, traduzir hCard para vCard para download em um programa de catálogo de endereços).

Especificação XOXO

Essa espececificação é uma das mais fáceis de entender! XOXO é a abreviação de eXtensible Open XHTML Outlines ou Listagem em XHTML extensível. Assim como as outras ela tem sua arquitetura baseada na documentação Modularization of XHTML da W3C e tem como propósito servir listagens modulares e extensíveis facilmente inputáveis em documentos de XHTML ao mesmo tempo em que são amigáveis a engines de XML! A linguegem complicou mais do que ajudou? Então veja o que é XOXO:

<code> <ol class='xoxo'> <li>Subject1 <ol> <li>subpoint a</li> <li>subpoint b</li> </ol> </li> <li>Subject 2 <ol compact="compact"> <li>subpoint c</li> <li>subpoint d</li> </ol> </li> <li>Subject 3 <ol> <li>subpoint e</li> </ol> </li> </ol> </code>

Se for renderizado ele seria assim:

Subject1
1. subpoint a
2. subpoint b
Subject 2
1. subpoint c
2. subpoint d
Subject 3
1. subpoint e

Pois é, a primeira vez que ouvi falar de XOXO (veja a especificação) eu esperava algo mais espetacular ou mirabolante. Mas é apenas uma forma de aninhar listagens corretamente, seja elas baseadas no <ul>, <ol> ou <dl>. Se for dar uma olhada na Wiki Microformats sobre o XOXO vai ver que as informações que lá constam estão mais voltadas para quem quer desenvolver user agents do que para o desenvolvedor final. De qualquer maneira não tem segredo em sua utilização. O objetivo desse tipo de listagem aninhada é dar significado para os sub-conjuntos. Essa especificação é tão incomum, que até o uso do atributo class com o valor de xoxo é opcional como pode ver nessa faq. Veja outro exemplo:

<code> <ol class='xoxo'> <li>item 1 <dl> <dt>description</dt> <dd>This item represents the main point we're trying to make.</dd> </dl> <ol> <li>subpoint a</li> <li>subpoint b</li> </ol> </li> <li>item 2 <dl> <dt>description</dt> <dd>This item represents the main point we're trying to make.</dd> </dl> <ol> <li>subpoint a</li> <li>subpoint b</li> </ol> </li> </ol> </code>

Observe que dentro de uma <li> se inicia um outro tipo de listagem. Pode ser qualquer uma, baseado no significado que quer dar para as listagens internas. Vamos considerar o exemplo acima que começou com uma listagem ordenada ( <ol> ) e no primeiro item começou duas listagens diferentes, uma definition list (<dl> ) e em seguida uma outra listagem ordenada <ol> com subpontos. Essa estrutura facilita a vida dos parsers que conseguem facilmente enter quem é filho de quem, que tópico depende de outro e assim por diante.

XOXO é visto meio que como se fosse o irmão pobre da família microformats erroneamente. Há coisas muito interessantes que podem ser feitas com ele. Como por exemplo blogrolls dinâmicos em que você pode gerar dinamicamente um output disso para um OPML por exemplo! Emimplementations você encontra mais coisas interessantes. Eu implementei no meu site na lateral XOXO com javascript para deixar o conteúdo da listagem escondido. Quando você clica nas abas “arquivo” ou “tags” elas abrem e quando clica novamente elas fecham. E o javascript é este, basta dar uma olhada no meu HTML (busque pela classe “xoxo”) e mais a minha folha de estilos atual (nao linko ela aqui porque mudo o nome dela sempre) para ver como eu implementei. Se quiser, leia meu texto sobre XOXO escrito a mais de um ano atrás.

Especificação hCalendar

Você se lembra quando eu falei do padrão vcard, que é uma padronização internacional adotada basicamente por todos os fabricantes de software no mundo que de alguma maneira constroem programas de armazenar informações de contato? Então, existe um padrão para calendário e informações sobre eventos chamado de iCalendar. A lógica é a mesma: um hCalendar é 1:1 (um por um) 100% compatível com o padrão iCalendar utilizado em softwares como o Outlook ou o Google Calendar por exemplo.

Assim como o hCard possui o seu “creator”, o hCalendar também possui. Para se familiarizar com o formato, utilize o hCalendar Creator, e crie um evento de exemplo, copie e cole o código em um editor de HTML e dê uma olhada nas propriedades, tags e atributos gerados.

Compartilhar informações de eventos é bem comum, dado esse fato surgiu a necessidade de desenvolver um padrão microformat para se compartilhar informações de eventos. Veja todas as propriedades da especificação microformat hCalendar:

<code> class="vcalendar" class="vevent" class="category" class="class" class="description" class="dtend" (ISO Date) class="dtstamp" (ISO Date) class="dtstart" (ISO Date) class="duration" class="location" class="status" class="summary" class="uid" class="url" class="last-modified" </code>

vcalendar – Esta propriedade pode ser usada para um ou mais eventos e é aplicada como uma propriedade raiz que supõe englobar mais de um evento, onde cada evento dentro dessa propriedade “vcalendar” possui sua própria propriedade raiz “vevent”. Esta propriedade é opcional e pode ser omitida.
vevent – Esta é a propriedade raiz e sua utilização é obrigatória.
dtstart – Data de início do evento
dtend – Data do fim do evento
duration – Duração do evento
summary – Resumo do evento, ou título do evento, ou nome do evento etc.
uid – É como se fosse um identificador do evento, onde geralmente se utiliza uma url.
dtstamp – Date e hora de quando o documento sobre o evento foi criado.
method – Valores para esta propriedade são PUBLISH, REQUEST, REPLY, ADD, CANCEL, REFRESH, COUNTER, or DECLINECOUNTER. Por exemplo um valor igual a “request” indica que foi feita uma requisição para o evento ocorrer.
category – Valores comuns para esta propriedade são: MEETING, APPOINTMENT, CONFERENCE, EXPO. Esta propriedade pode repetir, onde um evento pode estar enquadrado em mais de uma categoria.
location – Diz onde o evento vai acontecer.
url – Este é óbvio. A URL dá página do evento se ouver. esta propriedade e “uid” são basicamente a mesma coisa e só foi marida no padrão hCalendar porque faz parte do padrão iCalendar.
description – Uma descrição mais detalhada e/ou uma sinopse do evento diferente da informação provida pelo campo “summary”.
last-modified – Date e hora em que a informação sobre o evento foi atualizada.
status – Valores comuns que indicam o estatus de um evento são: TENTATIVE, CONFIRMED, CANCELLED
class – Indica a classificação de um evento com os seguintes valores: PUBLIC, PRIVATE, CONFIDENTIAL

DICA: As únicas propriedades OBRIGATÓRIAS do hCalendar são apenas 3. Elas são “vevent”, a propriedade raiz que não pode faltar nunca, “summary” que é uma breve descrição do evento e “dstart”, que é a data do evento (sem isso como vamos saber que algo vai acontecer?). Todas as outras propriedades são opcionais.

Se você estiver navegando pela web pelo Firefox com a extension “operator” instalada, você pode jogar os eventos do Yahoo Local para o Google Calendar, ou para o Yahoo Calendar, ou ainda exportar um arquivo e jogar no Outlook por exemplo. Agora imagine que você pode implementar algo similar em um site que não dependa de extension e add-ons por exemplo. Ou seja, do seu próprio site (ou do site que você desenvolver) você pode criar arquivos de XSLT que podem fazer esse serviço de exportar seu conteúdo microformatado para os aplicativos que te interessar.

Veja um exemplo de hCalendar:

DICA: De acordo com a especificação do iCalendar, apenas os campos “summary” e “dtstart” são obrigatórios (em microformats sempre haverá a propriedade raiz senão não há uma forma de dizer o que o trecho de código significa). Infelizmente como o Outlook da Microsoft é muito popular, se você quiser que o seu hCalendar microformat seja facilmente exportado para ele e sem erros, você terá que incluir as propriedades “uid” e “dtstamp”.

Observe que o conteúdo que não faz parte de nenhum campo, eu deixei do lado de fora de qualquer uma das propriedas como os trechos “o que”, “quando”, “onde”, assim como eu já falei anteriormente. Observe que eu utilizei a tag proprositalmente também, mas poderiam não estar ali. Se quiser uma quebra de linha, é mais interessante que você utilize CSS para isso. De qualquer maneira, eu inseri a tag somente para mostrar que ela pode sim estar ali, desde que fora de qualquer propriedade.

Vamos ver mais algumas considerações. Você observou que o formato da data é o do design pattern <abbr> + date time? Pois é, por isso foi necessário trabalhar os coneitos dele lá atrás. Brian Suda (de novo o cara) criou um XSLT que extrai o conteúdo microformato de qualquer site com o padrão hCalendar e o exporta para o formato .ics (iCalendar) utilizado pelos softwares, chamado deX2V. Não deixe de olhar.

Vamos usar a criatividade agora e ver como nós podemos expandir a especificação hCalendar. Alguma idéia? Bom vamos misturar um hCalendar com um hCard:

<code> O que: Festa dos blogueiros Quando: <abbr class="dtstart" title="2006-09-01T19:30:00">1 de setembro às 7:30 da noite!</abbr> até ás <abbr class="dtend" title="2006-09-01T21:30:00">9:30</abbr> Onde: vcard"> Escritório da Visie: <address class="adr"> Av Fagundes Filho Vila Monte Alegre, nº 145 São Paulo <abbr class="region" title="São Paulo">SP</abbr> </address> Este é o encontro oficial de todos os blog de tenconologia do Brasil, não perca! </code>

Como eu havia dito anteriormente, o hCard também é para empresas. Ou seja, eu peguei o atributo “location” e à partir dele eu criei o hcard que poderá ser “enxergado” por parsers separadamente do evento em si. Poderíamos ter apenas colocado a especificação adr ao invés da especificação hCard? Claro que sim. Tudo vai depender do nosso interesse em manipular a informação e como nós vamos querer manipulá-la. Mas não vamos parar por aqui. Vamos colocar a especificação geo nesse bolo:

<code> O que: Festa dos blogueiros Quando: <abbr class="dtstart" title="2006-09-01T19:30:00">1 de setembro às 7:30 da noite!</abbr> até ás <abbr class="dtend" title="2006-09-01T21:30:00">9:30</abbr> Onde: Escritório da Visie: <address class="adr"> <abbr class="geo" title="42.352163;-71.062867">Av Fagundes Filho</abbr> Vila Monte Alegre, nº 145 São Paulo <abbr class="region" title="São Paulo">SP</abbr> </address> Este é o encontro oficial de todos os blog de tenconologia do Brasil, não perca! </code>

Pronto, agora nós temos um hCalendar, mais um hCard, mais a especificação geo tudo junto! Quanto informação este trecho carrega não? Por isso que chamam este tipo de microformats de “compostos”, pela capacidade que possuem de serem modulares (podem se aplicar a qualquer contexto que possua este tipo de informação) e podem ser mesclados sem perda de dados e sem redundâncias como no exemplo.

Especificação hReview

“Review” pode ser traduzido como “crítica” ou “resenha” ou “análise”. Sabe aqueles sites como oMeioBit que escrevem sobre produtos e serviços, falam sobre o que gostaram e o que não gostaram em um produto, escrevem suas críticas etc? Isso são “reviews”. Pessoas compartilham seus reviews na web sobre uma infinidade de coisas como hotéis, restaurantes, livros, filmes, peças de teatro, produtos, alimentos, bandas de música, celebridades, sites e qualquer coisa que der na cabeça. Um “padrão” na forma com que nós compartilhamos nossas resenhas pode facilitar e muito para os mecanismos de busca quando querem encontrar críticas sobre um produto ou serviço. A especificação microformat hReview resolve este tipo de problemas.

Veja a lista de propriedades da especificação hReview:

dtreviewed: Data e hora em que o review foi escrito.

summary: O título ou apenas um breve descrição do review.

reviewer: O hCard da pessoa que está fazendo o review!.

item: A “coisa” que está recebendo um review!

fn: O nome da “coisa”.

url: A url do que está sendo escrito.

photo: a URL da foto do que está recebendo o review!

rating: A nota do que está recenedo o review. Os valores para isso são entre 1.0 e 5.0, onde 1 é a menor nota e 5 a máxima.

type: A categoria em que o que está recebendo o review se enquadrou. Pode receber os seguintes valores: product, event, business, person, place, website, url.

description: Um texto completo sobre sua opinião do que está analisando.

rel=tag: Se inserir alguma “tag” (no sentido de lista de artigos organizados em torno dessa palavra) use a especificação Rel-tag.

permalink: Opção de colocar um permalink para o review se ouver, caso ele possua uma página própria.

rel=license: Use para indicar a licença associada a qualquer coisa no review.

version: Use para indicar a versão do review.

Bem como o hCard e o hCalendar, o hReview também possui o seu “creator“. Crie um review, copie e cole o código fonte em um editor de HTML e veja o que você acha de como as coisas são aninhadas.

Veja um exemplo pequeno de um hReview:

<code> O almoço não foi tão bom quanto eu esperava. </code>

Veja um exemplo um pouco maior:

<code> <div class="hreview"> Nota5 de 5 estrelas! <h4 class="summary">"Pizzaria à Bolonhesa" é fantástica!</h4> Por: Henrique Costa Pereira, <abbr class="dtreviewed" title="20050418T2300-0700">18 de Janeiro de 2006</abbr> Estive na Pizzaria à Bolonhesa , que fica na Av Paulista, nº 9999, no rodízio de pizza e todos os sabores são realmente bons, o ambiente é muito agradável e o atendimento é vip. Recomendo! </div> </code>

DICA: Ao criar um hReview, saiba que as propriedades OBRIGATÓRIAS são: “hreview”, que é a propriedade raiz, “item”, que serve para indicar o que é que está sendo criticado / analisado / resenhado. E a terceira pode ser ou “vcard”, ou “vevent” ou “fn”. Me deixe explicar! Você pode querer mesclar um hCard ou um hCalendar e fazer um review deles. Se seu review não for nenhum dos dois, então você deve usar a classe “fn” para indicar o nome daquilo que está recebendo um review.

Se você for usar a classe “vcard” ou “vevent” para fazer o seu review, você poderá inseri-la junto com a classe “item”. Porque exceção somente a estas duas? Porque ambas tratam de outras especificações microformats, caso contrário, se o seu review não for de nenhum desses dois tipo, você deve usar a classe “fn” devidamente aninhada abaixo da classe “item”. Vamos ver um exemplo disso:

<code> <div class="hreview"> Nota5 de 5 estrelas! <h4 class="summary">"Pizzaria à Bolonhesa" é fantástica!</h4> Por: Henrique Costa Pereira, <abbr class="dtreviewed" title="20050418T2300-0700">18 de Janeiro de 2006</abbr> Estive na Pizzaria à Bolonhesa , que fica na Av Paulista, nº 9999, no rodízio de pizza e todos os sabores são realmente bons, o ambiente é muito agradável e o atendimento é vip. Recomendo! </div> </code>

Agora nós subimos beeeemmm o nível de tudo que vimos até agora. Aqui vai um macete para entender a validade de um trecho microformatado. Como eu disse anteriormente, um hReview pode ser de um evento (“vevent”), de uma pessoa ou empresa ou qualquer coisa que se enquadre em um “vcard”, ou de qualquer outra coisa que tenha um nome que será inserido dentro de um “fn”. Se o item do review for um “vevent” ou um “vcard”, eles podem ser aninhados juntos com a propriedade “item”.

Bom, se um parser exclusivo de hCard passar pelo trecho acima ele vai encontrar dois ítens:

<code> Por: Henrique Costa Pereira </code>

<code> Estive na Pizzaria à Bolonhesa , que fica na Av Paulista, nº 9999, no rodízio de pizza e todos os sabores são realmente bons, o ambiente é muito agradável e o atendimento é vip. Recomendo! </code>

De dentro dos dois trechos acima podemos extrair dois hCard válidos. Agora se um parser exclusivo de de hReview passar por ali, ele vai enxergar o seguinte:

<code> <div class="hreview"> Nota5 de 5 estrelas! <h4 class="summary">"Pizzaria à Bolonhesa" é fantástica!</h4> Por: Henrique Costa Pereira, <abbr class="dtreviewed" title="20050418T2300-0700">18 de Janeiro de 2006</abbr> Estive na Pizzaria à Bolonhesa , que fica na Av Paulista, nº 9999, no rodízio de pizza e todos os sabores são realmente bons, o ambiente é muito agradável e o atendimento é vip. Recomendo! </div> </code>

Eu retirei o “org” do nome “Pizzaria à Bolonhesa” (porque é exclusivo do hCard), retirei o hCard que estava junto com o “reviewer”. Porque eu deixei o vcard junto com o “item”? Porque ele é o que está recebendo o review!

A especificação hReview ainda está sofrendo mudanças. Ela é uma das especificações que se deve ficar com um pé atrás por enquanto. Dê uma olhada aqui. Alguma propriedade pode entrar, outra pode sair, alguma pode passar a ser obrigatória etc. Eu resolvi colocar essa especificação no curso considerando sua atual complexidade e para ajudar você a compreender melhor os caminhos que microformats está seguindo. Meu conselho é que se for implementar essa especificação em uma grande aplicação, não siga a descrição que eu coloquei neste curso, esteja sempre de olho nas alterações na Wiki Microformat. Este curso estará em constante atualização a medida que novas definições surgirem.

Sobre a Markup

Sabemos que a markup (código de HTML) utilizada em qualquer especificação microformat não tem nenhum impacto na forma como o HTML em si é renderizado nos browsers. Mas por outro lado, a markup das especificações tem um impacto gigantescos nos mecanismos de busca e no processo de ampliar semanticamente o HTML. Ou seja, a forma com que você trabalha com CSS não se altera muito, pelo contrário, aplicar microformats até facilita a sua vida e te dá mais flexibilidade considerando que há mais classes disponíveis no HTML.

É importante considerar que o valor de microformats é 100% markup. O futuro dos mecanismos de buscas eficientes está em conseguir distinguir as menores nuances do HTML de forma que consigam dizer se um trecho trata-se de uma evento que vai acontecer ou de uma que já ocorreu, onde ele vai ocorrer (mostrando a localização geográfica perfeita) ou então se um trecho trata-se de informações de contato, se trata-se de informações de geo posicionamento, ou um review de produto e assim por diante.

E o que mais?

Microformats está em constante desenvolvimento. Basta dar uma olhada na home da wiki microformats para ver as constantes atualizações. Antes de microformats, nós tínhamos que nos preocupar apenas em “decorar” as tags, agora nosso trabalho está um pouco mais complexo. Por isso, consultar documentações será cada vez mais necessários que formos tratar determinados trechos e fazer implementações em aplicativos web.

Além da Wiki Microformat, existe o PDF criado por Brian Suda chamado Microformats CheatSheetcom todas as propriedades microformats em suas respectivas especificações. Para você que já fez um curso como este, basta apenas consultar este documento para se lembrar de uma propriedade ou outra quando for implementar.

Um nota sobre a “modularidade” microformat

Lembra-se do Diagrama Microformats? Dê uma olhada nele novamente agora que você já viu todas as especificações: Clique na imagem abaixo para ampliar:

Uma coisa que precisa ficar bem clara à partir desse gráfico é modularidade. Dê uma olhada também no gráfico que está nesta página no site microformats.org. Se um trecho do seu HTML não fornece a estrutura semântica ou “arquitetônica” que você poderia explorar melhor, arranque o trecho fora e coloque uma trecho em microformats, como se fossem peças de um brinquedo Lego. Veja o seguinte caso:

NuggetsHoops.com

Se estiver navegando pelo Firefox com a extension Operator, melhor ainda. Mas exiba o código fonte desse site e veja que ele é todo construído em tabelas, utiliza muitos estilos inline e é todo obsoleto. Mas observe que ele implementou hCalendar em todos os jogos da NBA. As tags que ele usou? Veja você mesmo:

<code> <tr bgcolor="#ECECE4" valign="top" class="vevent"> <td class="font-small">Mon 29</td> <td class="font-small"><abbr class="mhide">Denver Nuggets vs. </abbr> Charlotte</td> <td class="font-small"><abbr class="dtstart" title="2007-01-29T19:00:00-0700">7:00 PM</abbr><abbr class="mhide dtend" title="2007-01-29T21:30:00-0700">9:30 PM</abbr></td> <td class="font-small">Altitude</td> <td class="font-small">&nbsp;</td> <td class="font-small"></td> <td class="font-small">&nbsp;Pepsi Center loc: 1000 Chopper Cir Denver, CO 80204</td> </tr> </code>

Enquanto especificação microformat, os trechos implementados por este site são válidos? SIM!!!!! Sabe o que eu fiz de teste aqui? Navegando pelo Firefox com o Operator, eu adicionei um jogo ao Google Calendar apenas com um clique. A extension parseou o conteúdo PERFEITAMENTE e inseriu o evento na minha agenda sem erros e sem redundâncias. O que eu quero mostrar com isso é a capacidade modular que microformats possui de ser um bloco de estrutura eficiente por si só. Se esse cara conseguiu implementar microformats sem erros de sintaxe (mesmo o restante do site dele não esteja nada elegante ou semântico), o conteúdo dele pode ser parseado por qualquer sistema ou serviço na web perfeitamente e sem erros!

Implementando a Web 3.0

Microformats é o início de uma revolução! Sem demagogia, sem exageros e sem histeria. Mas boa parte das ferramentas que estão surgindo são criativas pela forma com que tratam a informação permitindo com que você possa trafegar essa informação facilmente para outros lugares que te interessar. Imagine você poder do seu site mandar seu visitante para o Google Earth ou Google Maps apenas com um clique para ele saber exatamente onde fica a sua empresa. Imagine também você construir um site ou blog insitucional de uma empresa onde o usuário pode mandar eventos como palestras que vão ocorrer direto para a lista de compromissos do Outlook ou para o Google Calendar com apenas um click sem ter que escrever todos os detalhes do evento ou até mesmo se preocupar com notificações. Imagine que as pessoas podem adicionar seu “cartão de visitas” direto no Outlook, ou no Thunderbird, ou no Yahoo Mail apenas visitanto seu site.

Isso tudo é possível com microformats. O objetivo deste curso foi te dar o conhecimento necessário de microformats para você somar ao conhecimento que você ou sua equipe já possui em JavaScript, XSLT, XML, PHP, ASP.NET, Java, Rubby, CSS, XHTML ou seja lá quais forem as linguagens que te interessa. Um pouco de microformats e criatividade na mão, é possivel implementar muita coisa útil e elegante o quanto microformats pode ser.

Sempre que implementar algo, pode ser algo pequeno, me mande o link (meu e-mail: henrique.costapereira@gmail.com) pra eu ver e dar uma olhada. Ficarei muito satisfeito em ver que este curso contribuiu na sua prática de desenvolvimento. O curso não acaba aqui. Você ainda tem mais uma página inteira com referências na web para dar uma olhda (Implementações on the wild), espiar o código fonte e ver o que já foi implementado na web com microformats. Crie exemplos, crie implementações, faça experimentos no seu próprio contexto e me escreva daqui da apostila tirando suas dúvidas. Mesmo após de meses após concluído seu curso, microformats.org estará em pleno desenvolvimento com novas implementações e talvez novas especificações surgirão.

Microformato Composto