Bookmarklet Microformats
Por: Tuesday 30 January 2007 às 11:30
Microformats é uma coisa que com certeza está fazendo minha cabeça! Navegando por ai encontrei um parser de microformats que varre seu HTML em busca dehCard e hCalendar quando você clica no bookmarklet que você vai colocar no seu browser. Como resultado ele mostra uma tela com os ítens encontrados e permite você selecionar o ítem que quiser e converter/exportar para .vcf (formato vcard) e .ics (formato icalendar) para ser importado por seu programa favorito!
Um bookmarklet (também conhecido como favelets) é um script pequeno que pode ser armazenado em uma url em um bookmark no seu browser (ou em um hyperlink no seu site) e que pode ser ativada apenas com um click! Para adicionar o bookmarklet microformats no seu browser (Firefox, Opera e Safari), basta inserir um item na navigation toolbar e adicionar o seguinte script:
javascript:if%20(!document.getElementById('MF_jq'))%20{var%20q=document.createElement('script');q.setAttribute('id',%20'MF_jq');q.setAttribute('src',%20'http://leftlogic.com/js/jquery.js');document.getElementsByTagName('body')[0].appendChild(q);}%20var%20s=document.createElement('script');s.setAttribute('id','MF_loader');%20s.setAttribute('src',%20'http://leftlogic.com/js/microformats.js');document.getElementsByTagName('head')[0].appendChild(s);void(s);
Ou então pressione o botão do mouse e arraste o link abaixo para a mesma navigation toolbar:
Para encontrar microformats teste no meu site por exemplo. E se quiser ver uma página com vários hCard e vários hCalendar implementados, visite este site que possui vários trechos dessas duas especificações. Lembre-se que quanto maior for o HTML, mais o script demora para varrê-lo todo atrás de microformats. Por isso pode haver um pequeno delay.
Por causa da forma como este script foi desenvolvido ele não funciona em sites com o mime-type application/xhtml+xml. Faça o teste no Adactio por exemplo. Eu tive que trocar o mime type do meu próprio site para text/html para poder funcionar e escrever este texto. Eu já entrei em contato com o autor do script e dei este feedback a ele. Se alguém quiser pegar os scripts dele e tentar alterar de forma que funcione em sites application/xhtml+xml tanto quanto text/html, sinta-se á vontade! Darei os créditos aqui e tenho certeza que o cara do Left Logic fará o mesmo.
Este bookmarklet foi criado por Left Logic
Compartilhe seu hCard com ícones Microformats
Por: Friday 5 January 2007 às 17:5
Parece que padrões quando bem implementado é algo que está pegando facilmente na web, até quando trata-se de ícones. Temos o ícone do feed que foi adotado até pela Microsoft, o ícone do OPML e agora os ícones microformats criados por Wolfgang Bartelme e Chris Messina.
Eu implementei o ícone de hCard aqui no site (no rodapé) e o ícone de tag. Não se lembra ou não sabe o que é hCard ainda, leia este texto! Para compartilhar seu hCard no seu site é bem simples. Vá até o hCard Creator para criar o seu e coloque em algum lugar do seu site. Depois vá até o XHTML2VCARD criado por Biran Suda que é um XSLT que vai pegar seu hcard e transformá-lo de um arquivo padrão de vCard utilizado por várias aplicações como Firefox, Outlook, Yahho Mail, Thunderbird etc. Daí é só jogar seu vCard por servidor, colocar o ícone de download do vcard e o link apontando pro arquivo.
Esta é uma forma bem criativa de divulgar os micro-padrões e chamar a atenção de quem está dando os primeiros passos. Os ícones em várias cores em formato de Photoshop e Adobe Ilustrator estão disponíveis para download.
Tags: Microformats Revolução Etc hCard
Technorati, Pingerati e Microformats Search
Por: Monday 5 June 2006 às 13:5
Mais uma vez o Technorati avança e inova com um mecanismo de busca de Microformats e um redistribuidor de pings, o Pingerati. O que eu acho muito interessante sobre o Technorati é o quanto esta empresa cresce em tamanho proporcionalemente ao incentivo e divulgação dos padrões que ela investe, mais especificamente os microformats. Se você ainda não sabe nada sobre microformats, leia os diversos textos que eu escrevi sobre o assunto para ficar por dentro.
Technorati
Para quem não conhece, o Technorati é hoje a maior autoridade em blogs do mundo. Ele é o maior indexador de conteúdo vindo especificamente de blogs. As principais ferramentas gratuitas e pagas de publicação de conteúdo como o WordPress e Movable Type te permitem enviar pings automáticos para o Technorati a cada novo post que você escreve. Através dele você consegue ver a rede de conexões que se cria entre os sites e inclusive ver uma lista de todos os sites que linkam você.
O Technorati também é o maior incentivador dos microformats hoje. Desde janeiro de 2005 o atributo rel="tag", a marca registrada da “folksonomia” onde os autores “taggeam” seu próprio conteúdo classificando-o em palavras chaves, se tornou uma inovação no Technorati ao implementarem um sistema de busca que indexa essas tags criadas pelos próprios autores de blogs. O Technorati Tag Search permite você encontrar conteúdos publicados no mundo inteiro a partir das tags que você mesmo cria e utiliza no seu site por exemplo.
Pingerati
Os Microformats já estão presentes em vários blogs e feeds espalhados pelo mundo. E uma das formas que o Technorati encontrou para ajudar a propagação e distribuição desse conteúdo formatado com um objetivo comum (reviews, calendários, informações de contato etc), foi o Pingerati.
Ele funciona da seguinte maneira: a medida que os microformats crescem em todo o mundo, há uma necessidade de conectar estes formatos de dados específicos com os mecanismos de busca, o que tornará possível com que nós usuários possamos obter resultados de busca cada vez mais específicos, como data de eventos, informações sobre contatos comerciais e reviews de produtos por exemplo. O Pingerati diariamente recebe pings de sites e blogs do mundo inteiro em vários formatos como hCards, hReviews, hCalendar etc. Além de armazenar esse conteúdo, ele foi feito para repassar essas informações para outros mecanismos de busca e indexação que tiverem interesse em receber este tipo de conteúdo, como o Google, Yahoo e MSN por exemplo. Bastam ter o interesse. Esse processo é mais ou menos o mesmo que o próprio Technorati já faz com o conteúdo publicado em blogs, mas o Pingerati é um mecanismo específico para trechos de conteúdo publicados em alguma especificação microformat.
Se seu site eventualmente publica conteúdo que leva alguma especificação Microformats seja ele um blog ou não, você pode programar seu editor de conteúdo para enviar pings automaticos para o Pingerati. No WordPress basta ir em Options e depois em Writing. No final da página em Update Services basta colocar a seguinte url:
http://pingerati.net/ping/http://www.revolucao.etc.br/
No seu caso, é claro, basta apenas substituir a URL do Revolução Etc pela sua. Esse processo também pode ser automatizados em outros editores de conteúdo como o Drupal e o Movable Type, basta você procurar na documentação que você encontra como fazer. Se seu editor de conteúdo já “pinga” automaticamente no Technorati, vale lembrar que ele já indexa seu conteúdo microformat mesmo que você não envie pings para o Pingerati.
E o Pingerati é apenas a ponta do iceberg daquilo que ainda será feito com os microformats. É só esperar pra ver.
Microformats Search
O lançamento pela Technorati do Microformats Search é mais uma cartada que aposta no crescimento do ecosistema microformats pelo mundo. Como o Tantek Çelik expressou em seu texto de anúncio do Microformats Search, a utilização dos micro-formatos permite com que as pessoas tenham controle sobre seus próprios dados e informações, através de uma simples padronização na marcação do HTML ou do XML. Isso facilita com que os mecanismos de busca tratem essas informações publicadas em todo o mundo de forma específica, como informações sobre contato, reviews, datas, eventos etc. Se por exemplo você quiser fazer uma busca apenas por eventos que foram realizados em uma determinada data entre janeiro e fevereiro de 2006, isso será perfeitamente possível com o Microformats Search. Mas lembre-se que isso ainda não está implementado, é apenas uma das várias maneiras com que a informação recebida poderá ser tratada.
Neste novo mecanismo, você pode realizar buscas por contatos, eventos e reviews separadamente. Como eu já discuti anteriormente em vários textos, a aplicação dos microformats elevam o valor semântico de determinados trechos, dando significados para pequenos blocos de conteúdo que as tags XHTML são limitadas e incapazes de atribuir.
Com o tempo, está é uma previsão minha e no meu ponto de vista até meio óbvia, as técnicas de SEO e as empresas encarregadas de estudar estratégias de como tornar um conteúdo relevante na web, terão os microformats como uma extensão obrigatória do estudo de semântica. Porque os microformats abrem um leque muito maior para dar significado ao conteúdo que nós compartilhamos na web do que simplesmente utilizar as tags corretamente e na hora certa. Semântica de XHTML é muito relevante com toda certeza, mas microformats (e um mecanismo de busca específico para isso) prova que só isso não basta. Só o tempo provará essa previsão pra você e nem adianta me escrever questionando isso.
Referências:
Tags: Blogs Microformats Pingerati SEO Semântica Web Technorati hCalendar hCard hReview markup relTag
hCard
Por: Wednesday 25 January 2006 às 19:25
Como parte da minha cruzada de publicar aqui no Revolução Etc sobre todas as especificações Microformats, este é o meu texto sobre a especificação hCard.
Antes de você ler este artigo, você deve ler outros que eu escrevi, se já não tiver lido antes. É aconselhável ler o artigo de introdução aos Microformats e outro texto sobre o mundo de significado do atributo class. No geral para você poder entender qualquer outra coisa sobre Microformats você deve seguir a ordem dos textos relacionados acima. Entendendo todos os princípios que se encontram nestes textos base, você vai conseguir compreender qualquer especificação microformat com facilidade.
As perguntas e pedidos de comentários e sugestões feitas aqui, cuja resposta já se encontra em outros artigos não serão respondidas nem comentadas, muito menos exploradas em outros textos. E neste artigo e nos próximos que vierem, cada vez menos eu farei referências a conceitos básicos , como a razão do nome de classes e suas padronizações. Você realmente terá que ler os outros textos se quiser entender este artigo e os próximos.
Emergindo dos padrões
Algumas pessoas ainda discutem sobre a “utilidade” dos padrões. E essa discussão pode ser mais filosófica por tratar-se da maneira com que o homem se relaciona em sociedade, do que uma simples discussão de boteco. São através de padrões sonoros, que conseguimos estabelecer uma lingua, um idioma. Através de padrões ideográficos conseguimos estabelecer a linguagem escrita. E através de padrões conseguimos publicar na web hoje e ter a certeza de que qualquer pessoa no planeta vai conseguir ter acesso aquilo que publicamos na web. Mesmo que não esteja no mesmo idioma.
Microformats trata-se de semântica, logo também trata-se de padrões. E sua utilização vai depender somente do seu interesse em compartilhar ou não este tipo de informação. O hCard é uma especificação microformat e se refere a uma solução modular que pode ser encaixada em um documento XHTML para exibir informações pessoais do tipo compartilhadas em cartões de visitas.
Origem
A especificação microformat hCardé baseada na padronização vCard já implementada e utilizada ha vários anos. Vários programas como o Outlook, o Thunderbird, programas de e-mail da Apple dentre vários outros, utilizam a padronização do vCard, que é internacional. O hCard é a adaptação precisa, para o XHTML desta padronização. Milhares de pessoas publicam informações pessoais na internet todos os dias, sejam em blogs, sites pessoais, empresas, sejam informações de contato ou informações profissionais. Esta especificação microformat é uma padronização que pode ser inserida em qualquer site.
Princípios semânticos
Veja um exemplo de código fonte.
<div class="vcard">
<a class="url fn" href="website">Nome Completo</a>
<div class="org">Empresa</div>
<div class="adr">
<div class="street-address">Endereço completo</div>
<span class="locality">Cidade</span>,
<span class="region">Estado</span>
<span class="postal-code">Código Postal</span>
</div>
<div class="tel">Telefone</div>
</div>
O código acima foi gerado à partir do hCard Creator. Os princípios semânticos aplicados ali te deixam livre para escolher as tags que forem mais apropriadas para cada contexto, não precisam ser necessariamente as tags geradas pelo hcard Creator, mas por padrão, você deve utilizar os nomes de classe padrão para descrever cada campo de informação que você está fornecendo, ou seja, os nomes padronizados relacionados a cada campo.
Você não precisa ficar preso apenas as tags e aos campos gerados pelo hCard creator. Por exemplo o endereço gerado. A tag <address> tem o propósito de conter informações de “contato”, ou seja, informações sobre alguém ou alguma empresa que me permite entrar em contato com ela. Seja um endereço físico (rua, avenida, caixa postal, etc), seja o endereço de um site ou e-mails. Já o hCard tem como propósito fornecer informações pessoais sobre alguém, seja elas relacionadas a informações de contato ou não. O meu sobrenome por exemplo não vai permiter com que você me encontre. É simplesmente uma informação pessoal. Então observe o trecho abaixo e logo em seguida as alterações que eu fiz.
<div class="adr">
<div class="street-address">Endereço completo</div>
<span class="locality">Cidade</span>,
<span class="region">Estado</span>
<span class="postal-code">Código Postal</span>
</div>
Você pode convertê-lo no seguinte:
<address class=”adr”>
<span class="street-address">Endereço completo</span>
<span class="locality">Cidade</span>,
<span class="region">Estado</span>
<span class="postal-code">Código Postal</span>
</address>
Eu adaptei o código gerado pelo hCard creator para um código equivalente mais semântico seguindo os princípios fornecidos na documentação sobre a especificação. É preciso entender que o que é extremamente relevante é o conjunto de nomes de classes que foram padronizados para cada campo. As tags podem ser adaptadas e contextualizadas.
O nome da classe raiz onde todo o hCard deve estar contido, deve ser "vcard". A lista de propriedades também deve ser seguida, incluindo as subpropriedades. No hCard Profile você pode ter acesso a todos os padrões existentes para cada campo que te interessar.
Quem está usando?
Você pode ter uma idéia das diversas possibilidades e aplicações do hCard, na página Wiki do microformats e ver a quantidade de exemplos aplicados em diversos sites. Navegando por estes links e observando o código fonte deles você pode ter uma noção sobre a quantidade de informação pessoal que pode ser compartilhada atrvés do hCard. Agora só falta você compartilhar o seu!
Tags: Microformats Semântica Web XHTML class hCard
Microformats: o mundo de significado do atributo class
Por: Friday 20 January 2006 às 13:20
O atributo de (X)HTML “class” tem uma característica interessante que tem feito com que certos padrões sejam criados e contextualizados na aplicação no XHTML e tudo isso em torno deste atributo. Várias especificações Microformats utilizam nomes de classes padronizados, se tornando um tipo de design pattern e criando semântica onde antes não existia e era puro silêncio. Me deixe explicar melhor esta idéia.
Microformats e as classes
Nomes de classes podem ser usados para servirem de referências para estilização por CSS e para propósitos gerais processados por user agents. Quem definiu isso foi a W3C. User agent é qualquer aplicação que navega pela sua página. Os browsers e os mecanismos de busca são tipos de user agents, porque de alguma forma eles lêem o código fonte e fazem o trabalho pelo qual foram criados; ou seja, os browsers renderizam o código para você navegar tornando-o aparentável, e os mecanismos de busca criam relações, rankings, armazenam, indexam baseado nas informações e meta-informações contidas em um site. A W3C especificou que os nomes de classes podem ser usados para qualquer própósito que os user agents queiram, inclusive atribuir valores “semânticos” a eles, por que não?.
Semântica, é significado, lembra-se? Atribuir um valor semântico a alguma coisa é dar-lhe significado em um contexto. Um <h1> tem o significado de ser um “título” (o título principal) e a lógica segue assim por diante com qualquer outra tag existente. Cada tag tem seu significado próprio previamente atribuido pela W3C e isso ninguém discute. Mas por padrão os nomes de classes não tem significado nenhum, lembre-se disso. Então como dar significado semântico para nome de classes?
E fez-se a luz!
O Technorati e o Google são user agents. O Google já “interpreta” (só se interpreta aquilo que tem significado, certo?) certas especificações microformats bem como o Technorati como você pode observar nesta área de desenvolvimento dentro do próprio Technorati. Agora como funciona uma especificação Microformat? Bom uma delas, como o hCard, por exemplo, utiliza nome de classes como uma forma de meta-informação para descrever trechos específicos de um cartão de visitas. Veja o exemplo:
<div class="vcard">
<a class="url fn" href="http://tantek.com/">Tantek Çelik</a>
<div class="org">Technorati</div>
</div>
Estes nomes de classes acima se tornaram padrões da especificação Microformats hCard. Você não pode colocar o nome de classe que quiser ali, senão você terá tudo, menos um hCard. Se você quiser criar um user agent na sua casa e atribuir a ele o valor de vcard que seja igual a “informações pessoais sobre alguém” você pode. Daí sempre que o seu user agent navegar por um site e encontrar uma classe com o valor de “vcard”, ele sempre vai armazenar as informações contidas ali dentro como “informações pessoais sobre alguém”. Entendeu? Ou seja, você atribuiu valor semântico a um conjunto de nomes de classes.
O Technorati fez isso e é fantástico! A estrutura de hCard acima é parte de um padrão criado, usando tags semânticas com nome de classes padronizados. Uma vez padronizado, é possível reproduzir este padrão seguindo uma lógica, ou seja, de acordo com um significado previamente determinado, que é o que faz com que microformats seja algo semântico no aspecto mais abrangente possível. Coloque na sua cabeça que Microformats é semântica.
O que o Google e o Technorati fizeram, foi pegar as especificações microformats (algumas delas), reconhecer seus valores que associados com outros em uma página, torna possível criar relações entre as informações contidas em um documento inclusive utilizando nomes de classes como meta-informação. Microformats extende o mundo de significado e semântica do XHTML como eu já disse anteriormente. Se você entendeu por completo estes conceitos acima, basta estudar quais são os padrões individuais de cada especificação, que você será capaz de entender facilmente qualquer coisa relacionado com Microformats.
Mais de um valor para as classes.
Outra característica do atributo class, é que você pode atribuir-lhe mais de um valor ao mesmo tempo separado por espaço, ao contrário do id, que deve ter um único valor individual em toda a página. Se você olhar no header do meu site vai ver o seguinte:
<p class="titulo header">...
O mesmo vale para o meu hCard:
<a class="url fn" href=”www.revolucao.etc.br” ...
As vantages de se ter mais de um valor em um atributo class são inúmeras. Faça seus testes e explore você mesmo. Eu espero que este texto tenha solucionado todas suas dúvidas relativas aos Microformats e sua relação com os nomes de classes. Compreender este ponto é a porta para entender semântica e microformats. Continue fazendo perguntas e me enviando suas dúvidas, que algumas delas foram atendidas aqui.
Tags: Artigos e Estudos Google Microformats Semântica Web Technorati User Agent W3C Web Standards XHTML class hCard hyperlinks web
Microformats
Por: Thursday 8 December 2005 às 21:8
Introducao
O assunto é Microformats. E cada dia que passa me admiro mais com as possibilidades semânticas dessas especificações que são um tipo de design pattern.
Microformats é uma palavra que praticamente ainda não chegou aqui. Com exceção de uma citação ou outra nada se discutiu ainda no Brasil. Neste artigo eu vou tentar falar sobre isso que também é relativamente novo para mim. Após escrever e estudar melhor sobre o assunto e publicar alguns textos, resolvi voltar aqui e fazer algumas alterações neste artigo que serve como introdução sobre o assunto. O texto ficou mais modular e melhor subdividido, podendo ter partes específicas citadas em outros lugares para fazer referência a conceitos específicos. Se você não compreender alguma coisa e quiser dar alguma sugestão ou comentar alguma coisa, utilize o formulário abaixo e deixe seus comentários.
Bom, antes que você questione sobre a relevância deste assunto, principalmente depois que eu disse que essa palavra nem chegou aqui, Microformats é uma especificação criada por Tantek Çelik, chefe de tecnologia do Technorati, membro do Web Standards Project e especialista da W3C Cascading Style Sheet. O mesmo cara que criou o infame Box Model Hack. Outro cara é o Eric Meyer que dispensa maiores apresentações. São eles que estão falando sobre isso lá fora. Algumas pessoas me escreveram perguntando sobre as últimas coisas que estavam vendo nos meus feeds e que fazem parte da integração dos feeds do Revolução Etc com o meu del.icio.us. Este texto é a explicação de muitas coisas que foram parar lá. Se você quiser ver mais textos sobre isso, assine meu feed principal que praticamente todos os dias eu tenho inserido novos artigos que vão complementar e muito meus textos escritos aqui.
Antes ainda de falar mais sobre o que é Microformats quero citar uma repercussão específica que me chamou a atenção e deixar aqui como uma fonte de referência para pesquisa. O assunto esteve presente este ano no Web Essencial 05, um congresso de desenvolvedores web que aconteceu em Sydney na Austrália. O próprio Tantek estava lá para falar sobre o assunto. Você pode conferir quase tudo o que eles falaram lá na programação do site lendo e ouvindo os podcastings. Agora vamos ao que interessa.
- Indice:
O que é Microformats?
Microformats é uma série de especificações que tem como foco principal relacionar a informação ou os dados com os humanos em primeiro lugar e em segundo com as máquinas. É uma nova maneira de se pensar sobre dados. Esta série de especificações constitui um “dicionário” de conteúdo semântico para (X)HTML que tem como base os web standards e é escrito para descrever a informação de forma mais simples possível. O que significa descrever a informação?
A função destas especificações é enriquecer a informação inserida em páginas web com meta informação. “Meta” é uma palavra de origem grega que significa “além de” (beyond) e é usada geralmente como prefixo em palavras que indicam conceitos que explicam ou falam de outros conceitos. Esta é a função das meta tags, fornecer informações que estão além daquilo que é visto em um primeiro momento, ou seja, o próprio conteúdo. Mas microformats se refere a descrever trechos de conteúdos específicos de um site, como datas de eventos, informações de contato, descrição de links etc, coisas que estão além do escopo das meta tags. Ou seja, tratando "Pequenos formatos" (micro + format) de dados (informação) válidos no código do seu XHTML é possível enriquecer a maneira com que nós lidamos com a informação e a maneira com que as máquinas armazenam, indexam e organizam toda essa meta-informação. A função dessas especificações é fornecer o máximo de meta-informação sobre o conteúdo que você insere, ou seja, descrevendo os seus próprios dados.
Porque Microformats?
Pense na quantidade de informação que existe hoje circulando na web. Pense nos seus e-mails, nos comentários em blogs, nos artigos, nas fotos, versões de arquivos, textos, documentos, arquivos de áudio e vídeo, feeds etc. É preciso padrões para organizar toda essa informação com precisão. Os search engines ou spiders possuem um algoritmo onde sua principal função é verificar o que é mais relevante, criando relações entre as informações obtidas sobre cada documento da web e que por sua vez geram ratings, hankings etc, baseando-se nestas inter-relações. Parte desse critério de avaliação é relacionar a meta informação com a própria informação. Quando você digita uma palavra no Google, ele vai retornar uma lista do que é mais relevante relacionado com a palavra que você digitou. Básico não é? As tags do HTML/XHTML são relativamente muito limitadas para descrever a informação que nós inserimos na web. Microformats tenta suprir esta lacuna estendendo para um outro nível as possibilidades de descrever esta informação.
Qual o ambiente propício para Microformats ou como eu posso aplicar isto?
Para aplicar Microformats é preciso aprender antes de mais nada a utilizar um código semanticamente correto. A primeira descrição de dados começa usando as tags certas com o objetivo pelo qual elas foram criadas. Eu já escrevi aqui alguns artigos sobre como definir isso, qual a melhor maneira de exibir dados tabulares, listas, headings etc. Com um código bem formatado, com tags sendo usadas corretamente, está lançado o ambiente perfeito para você aplicar microformats em trechos específico de códigos para resolver questões específicas. Uma característica de Microformats possui, é o conceito de modularidade. Microformats não é uma linguagem nova, são formatos de descrição de dados que podem ser aplicados em trechos específicos do seu código, sem precisar refazer nada. Se você tem um site e o seu código é semanticamente correto, basta você implementar e tratar estes trechos específicos sem precisar de alterações estruturais. O manifesto Microformat é o seguinte:
- Criado para resolver problemas específicos.
- Ser o mais simples possível
- Criado primeiro para humanos e máquinas em segundo lugar
- Reutilizar blocos de código quanto necessário utilizados dentro dos padrões web.
- Alicação em blocos e trechos específicos (modularidade)
Semântica é significado
Como eu escrevi aqui anteriormente que semântica é o estudo do significado das palavras e sua relação uma com as outras. Não estou me referindo aqui a semântica de SGML da qual o XHTML é um dos derivados. É um assunto muito distante do escopo deste texto. Estou falando de semântica de XHTML e nada mais. Neste sentido estrito, um código semântico nada mais é do que utilizar as tags no sentido real pelo qual elas foram criadas. Se você vai escrever uma lista, você pode usar <ol> <ul> ou <dl>, se vai escrever um endereço você deve usar <adderess>, se precisa de um título, você tem os headings <h1>, <h2>, <h3> e assim por diante. Utilizar as tags no sentido correto é igual a “código semântico” que por sua vez justifica o termo “web standards”. Seguir os web standards é respeitar a semântica!
O validador de HTML verifica a ortografia do seu código, ou seja, verificam se não há erros de escrita nele. E nada mais! É só isso que ele faz. Leia o que eu escrevi em Validação e Semântica. Ele não avalia se o conteúdo que você inseriu, e que só tem significado para seres humanos, foi inserido dentro das tags correspondentes aquele tipo de conteúdo. Ou seja, o validador nem ao menos vai te falar se seu código está dentro dos padrões e nem ao menos significa que seu trabalho seja uma boa página! O validador não vai te informar se este trecho deve estar dentro de um <h1> ou dentro de uma <li>. Isso é impossível de ser feito!
Não existe e nunca vai existir um “validador semântico”. Você vai precisar estudar e ler muito para avaliar você mesmo se o seu XHTML segue os padrões ou não. A semântica é a alma dos web standards. Seguir os padrões é descrever seus dados usando as tags de forma correta. Você precisa dizer para os user agents o que é um título, o que é uma lista ordenada, o que é um endereço e assim por diante.
Modularidade
Praticamente em tudo que você for ler sobre Microformats, uma coisa que deve estar bem clara na sua mente é o conceito de modularidade. Pense que uma página escrita em (X)HTML é feita de diversas partes e de diversos trechos distintos de código. Temos links, parágrafos, listagens, tabelas (sim, por que não?), abreviações, endereços, títulos e subtítulos e por aí vai. Compare isso com várias peças de Lego encaixadas uma nas outras. Imagine que você pode arrancar ou colocar outras peças sem descaracterizar o restante ou ter que fazer tudo do zero. Isso é modularidade. Se um trecho está errado, jogue o trecho fora e coloque outro no lugar. Simples assim! Microformats te fornece várias peças diferentes, para problemas específicos, que podem ser colocadas onde for necessário sem que você precise refazer alguma coisa do início.
A W3C dedicou toda uma documentação chamada de Modularization of XHTML (Modularização do XHTML ), que serve de base para poder compreender que modularidade está no sangue do XHTML. Nesta documentação você vai encontrar vários tópicos terminados com a palavra “module”, que traduzido do inglês significa “módulo” ou “unidade”. Ou seja, são dezenas de unidades (módulos, peças) individuais que podem fazer parte de um documento XHTML, seja ele complexo ou simples. As especificações Microformats se aproveitam desse conceito e oferece soluções padronizadas e semânticas prontas para serem encaixadas onde for necessário. Se você tem um site e se o código dele é semanticamente correto, basta você implementar e tratar estes trechos específicos sem precisar de alterações estruturais.
Padronizando com classe
Nomes de classes podem ser usados para servirem de referências para estilização por CSS e para propósitos gerais processados por user agents. Quem definiu isso foi a W3C. User agent é qualquer aplicação que navega pela sua página. Os browsers e os mecanismos de busca são tipos de user agents, porque de alguma forma eles lêem o código fonte e fazem o trabalho pelo qual foram criados; ou seja, os browsers renderizam o código para você navegar tornando-o aparentável, e os mecanismos de busca criam relações, rankings, armazenam, indexam baseado nas informações e meta-informações contidas em um site. A W3C especificou que os nomes de classes podem ser usados para qualquer própósito que os user agents queiram, inclusive atribuir valores “semânticos” a eles, por que não?.
Semântica, é significado, lembra-se? Atribuir um valor semântico a alguma coisa é dar-lhe significado em um contexto. Um <h1> tem o significado de ser um “título” (o título principal) e a lógica segue assim por diante com qualquer outra tag existente. Cada tag tem seu significado próprio previamente atribuido pela W3C e isso ninguém discute. Mas por padrão os nomes de classes não tem significado nenhum, lembre-se disso. Então como dar significado semântico para nome de classes? Veja no texto que eu escrevi sobre o mundo de significado do atributo class.
Microformats na prática.
Se você entendeu todos estes conceitos até aqui, é mais fácil entender como usar. Como uma série de especificações, esta também possui padrões a serem seguidos. O Microformats já possui algumas especificações estabelecidas e alguns drafts que ainda não foram completamente estabelecidos. A série de especificações são:
- hCalendar
- hCard
- rel-license
- rel-nofollow
- rel-tag
- VoteLinks
- XFN (http://gmpg.org/xfn/) (see also: xfn-implementations)
- XMDP (http://gmpg.org/xmdp/)
- XOXO
Não vou detalhar cada uma delas agora, farei isso em artigos futuros. Estas especificações oferecem aos autores padrões suficientes para descreverem suas informações de forma mais consistente possível. Estas especificações são aplicadas combinando tags e nome de classes para descrever a informação. Veja o exemplo da aplicação do hCalendar abaixo:
<span class="vevent">
<a class="url" href="http://www.web2con.com/">
<span class="summary">Web 2.0 Conference</span>:
<abbr class="dtstart" title="2005-10-05">October 5</abbr>-
<abbr class="dtend" title="2005-10-08">7</abbr>,
at the <span class="location">Argent Hotel, San Francisco, CA</span>
</a>
</span>
Este exemplo é apresentado da seguinte maneira:
Web 2.0 Conference:
October 5-7, at the Argent Hotel, San Francisco, CA
Se for a primeira vez que você está vendo isso, talvez sua reação seja a mesma que eu tive quanto vi isto sendo aplicado desta maneira: espanto. Através de nome de classes padronizados, é possível ampliar a descrição daquilo que está sendo inserido combinando tags semanticamente corretas com classes. A aplicação de microformats gira basicamente em torno disso: criar relações descritivas entre conteúdo e meta informação inserida de forma que comibine tags semanticamente corretas, classes e atributos de HTML.
Veja um exemplo mais simples para descrever uma licensa utilizando a especificação rel-license apenas aplicando o atributo “rel” no link:
<a href="http://creativecommons.org/licenses/by/2.0/"
rel="license">cc by 2.0</a>O atributo “rel” deve ser usado para indicar a relação que o site que insere o link tem com o site referenciado. Para isso foi criada uma série de profiles distintos que representam diferentes tipos de relação que o seu site pode ter com os sites que você linka.
Espero que este texto sirva de introdução ao microformats. A medida que eu for aplicando de forma mais consistente no meu site eu vou escrever mais artigos detalhados sobre as especificações e suas aplicações. Se quiser ir muito além deste texto, basta ler cada link e referência que eu postei aqui.
Referências
- Textos publicados aqui relacionados com Microformats:
- Referências normativas
Tags: Blog CSS Folksonomia Microformats SEO Semântica Web Tag Technorati User Agent Validação W3C Web Standards Web2 XFN XHTML XOXO class del.icio.us hCalendar hCard hReview rel rel-nofollow relLicense relTag rev vote-links web
