Delicious, mais sexy do que nunca!

Por: Henrique Pereira

Saturday 02 August 2008 às 19:02

Categoria: Internet / Web

Como o Delicious é uma das ferramentas que eu não vivo sem, não poderia deixar de prestar minha homenagem aqui, mesmo com alguns dias de atraso, à ferramenta de bookmarks mais popular da web e que acaba de receber um design mais sexy e centrado no usuário.

No último dia 31 de julho o Yahoo! finalmente colocou no ar a nova versão do Delicious, com melhoras consideráveis na performance, no motor de busca e principalmente na arquitetura da informação. Um grande problema que certos serviços vão enfrentando ao longo dos tempos são os ganhos de funcionalidades sem ajustes na arquitetura, mas realmente fica caro mexer toda vez que uma nova funcionalidade surge. Isso ocorreu com o Google Analytics e com o Skype, por exemplo, que tiveram reformulações conceituais completas após alguns anos em que novas características foram surgindo.

Me lembro de muitos meses atrás ter visto uma galeria de fotos de um teste de usabilidade para a nova interface e que demorou, mas saiu. Entretanto uma nova funcionalidade que eu esperava e não deu as caras foi a opção de ter versões em vários idiomas. Isso acaba deixando muuuiiiita gente de fora, infelizmente. Quem sabe isso não aparece em breve. Vamos esperar…

Comentários: 10

Taxonomia vs Folksonomia

Por: Henrique Pereira

Tuesday 05 June 2007 às 01:25

Categoria: HTML / CSS / JavaScript

Folksonomia tem seu papel garantido na história, isso é fato! Principalmente por causa da tal “web 2.0″. No meu Delicious por exemplo, eu odiaria não poder usar uma tag que descreve pra mim mesmo aquilo que eu penso sobre o conteúdo. Nós dizemos para nós mesmo qual o significado que o conteúdo daquela url possui e pronto!

Mas se precisar fazer uma busca em bancos de imagens, qual sistema de classificação você vai preferir, taxonomia ou folksonomia? Para comparar os dois faça uma busca específica no Stock.xchng e depois faça a mesma busca específica no Getty Images. Faça uma busca, por exemplo, por cross arms white background. O Getty Images tem um sistema de classificação feito por especialistas, ou seja, 100% taxonomia, onde cada imagem é analisada uma a uma e associa-se uma quantidade controlada de palavras. Já o sistema de classificação das imagens do Stock.xchng é 100% folksonomia, feito pelas pessoas que contribuem para o crescimento do banco de imagens lá, ou seja, os próprios usuários.

Eu sempre fico impressionado com a quantidade de query maluca que eu faço no Getty Images e as respostas que ele sempre me traz! Possui uma consistência de termos muito forte e precisa em relação as imagens. Já no Stock.xchng nem sempre é possível encontrar consistência nem de idioma. Os usuários são de culturas diferentes, e mesmo entre aqueles que falam a mesma língua, você vê uma grande diferença educacional que faz com que imagens similares sejam tagueadas de forma tão distinta uma das outras. Não estou dizendo ou defendendo que um Flickr ou o Stock.xchng são um fracasso por utilizar folksonomia. Estou só colocando minhoca na cabeça de quem está lendo isto aqui. Minha avaliação das coisas está sempre relacionada com meus objetivos. Estou mais preocupado em criar um site para as pessoas se divertirem ou para trabalho? O Flickr é um sucesso por que é divertido e foi criado para este contexto. Já quando eu uso um banco de imagens, eu nunca estou atrás de diversão. A regra principal a ser levada em consideração chama-se “contexto“.

Em resumo, quanto mais específica é a imagem que eu preciso buscar, levando em consideração produtividade e facilidade, eu não penso duas vezes em fazer minha busca no Getty Images ao invés de ficar garimpando fotos no Stock.xchng. Ou seja, prefiro o sistema de taxonomia tradicional do que a folksonomia neste contexto! E você, o que acha?

Comentários: 9

Folksonomia e a maneira com que nós colocamos ordem nas coisas

Por: Henrique Pereira

Wednesday 01 March 2006 às 14:15

Categoria: HTML / CSS / JavaScript, Internet / Web, Marketing / Comunicação

A maneira com que as coisas na web estão relacionadas uma com as outras estão em constantes mudanças. E uma das coisas que eu acho mais interessante é a maneira com que a informação é organizada e tratada. As informações que circulam na web todo dia, são avaliadas (ratings) por diversos tipos de mecanismos (user agents), e dessas avaliações, são criadas relações de relevância entre todas as informações encontradas. Quando você faz uma busca em algum destes mecanismos, o que eles fazem nada mais é do que te retornar o resultado de algo que já foi avaliado, analisado e relacionado em ratings, hankings, naturalmente tudo pré-determinado por algum algoritmo que relacionou estas informações contidas nas páginas de diferentes sites, uma com as outras.

Estes são exemplos clássicos e bem básicos de como a informação que nós publicamos na web é tratada. Os critérios dessas avaliações podem ser vários, mas no geral, sites que seguem os web standards tendem a ter uma relevância muito maior. Dentre várias formas de se tratar a informação, existe uma que ficou muito conhecida no mundo dos blogs e que a cada dia tem expandido seus horizontes, que é a folksonomia.

Antes disso, a taxonomia

Taxonomia (taxonomy) é o estudo da classificação das coisas. É o ato de dar nomes, classificar, identificar. Taxonomia é assunto de diversas áreas do conhecimento humano como a computação, antropologia, biologia dentre outras. Quando um cientista classifica um novo inseto, ele procura classificá-lo dentro de uma categoria já existente, baseado em uma lógica estabelecida, verifica qual família ele pertence e no fim encontra o nome mais adequado àquela espécie. Isso é taxonomia. O ato de classificar as coisas.

Agora, folksonomia

Folksonomia (folksonomy) é a junção de duas palavras “folk” (povo, gente) e “taxonomia”. A origem desta palavra é atribuida a um arquiteto da informação chamado Thomas Vander Wal também atual membro do Web Standards Project. O resultado final é algo do tipo “classificação do povo”. Mas não associe isso com a classificação de pessoas em si, e sim com classificação feita por pessoas.

Folksonomia é uma forma relacional (criar relações entre coisas) de categorizar e classificar na web. Ao invéz de utilizar uma forma hierárquica e centralizada de categorização de alguma coisa, o usuário escolhe palavras-chaves (conhecidas como “tags”) para classificar a informação ou partes de informação. Tag em inglês significa “etiqueta”, “identificação”. “Taggear” é identificar, etiquetar alguma coisa. Não confunda o termo tag abordado aqui com as tags de HTML, eles são dois processos distintos de classificar (dar significado?) as coisas.

Classificando

Diversas aplicações web, comumente aquelas que estão relacionadas a ferramentas sociais e colaborativas, utilizam esta forma de classificação (folksonomia) que é entregue na mão do “povo”, ou seja, dos usuários e dos autores. Classificar suas fotos e compartilhar com amigos no Flickr taggeando cada foto que você insere no seu album, bookmarks sociais no Del.icio.us onde você insere várias keywords (palavras-chaves) para classificar seus bookmarks, ferramentas de blogs como o WordPress onde os autores classificam suas entradas ou artigos em várias “tags” (categorias) ao mesmo tempo, mecanismos de busca especializados em blogs como o Technorati, que fazem buscas relacionadas com as tags que você insere no seu site, editor de texto online como o Writely, que permite você taggear todos seus documentos de texto e, mesmo que nem todos estejam compartilhados, facilita a maneira com que você pode encontrar os documentos que estão relacionados com palavras-chave específicas. São muitas as aplicações que podem utilizar este tipo de classificação conhecida como folksonomia.

Taggear é classificar

O resultado disso no mundo é uma enciclopédia de meta-informação visual gerada pelos usuários. A lógica é a seguinte, quando escrevemos, postamos imagens no Flickr ou taggeamos qualquer coisa na web, nós estamos relacionando um objeto a uma ou mais “tags” (palavras-chave) classificando este objeto. Ou seja, o que fazemos é relacionar determinada informação, como uma página web (Del.icio.us), uma foto (Flickr), um post (blogs) com um determinado conjunto de palavras-chaves. Isso é gerar meta-informação on the fly.

Como assim avaliar?

“Rating” em inglês, significa “avaliar”. Avaliar alguma coisa é fazer apreciação, analisar. Quando você taggeia um artigo no seu blog você está associando um conjunto de tags com o conteúdo, ou seja, você está criando um tipo de “rating” (avaliação) sobre aquele objeto. Você classificou determinado artigo por exemplo, em um conjunto de palavras-chaves. Quando o Google ou o Technorati (e centenas de outros mecanismos de busca) encontram o seu site, eles podem tratar a meta-informação que recebem de várias maneiras. Uma delas é verificar a relação das palavras-chaves que você inseriu com o próprio conteúdo taggeado e confirmar a relevância existente.

Se por exemplo você insere palavras a esmo, sem relação nenhuma com o conteúdo, e acha que isso pode ajudar a aumentar a relevância do seu site, os resultados podem ser desatrosos como o caso do site da BMW na Alemanha que teve o site retirado dos resultados das buscas do Google por utilizar de técnicas deste tipo. Só o conteúdo realmente relevante e devidamente codificado e taggeado terá grande valor no final. Mas lembre-se, que folksonomia bem aplicada é apenas um único aspecto de um conjunto de vários outros fatores que podem otimizar seu site nos mecanismos de busca.

Folksonomia e semântica web

Toda informação que está diretamente relacionada com outra informação, que em outras palavras serve para descevê-la, é meta-informação. As tags também são um tipo de meta-informação visível que dá significado de um conteúdo para usuários e máquinas ao mesmo tempo. Quanto mais informação existir sobre a própria informação mais os mecanismos de busca serão cada dia mais precisos. E eles dependem intimamente disso para existir. Todo desenvolvedor web que migrou do jeito antigo de estruturar sites em tabelas para seguir os padrões sabe o que um código semântico é capaz de mudar o posicionamento de um site no Google. Na minha opinião, folksonomia aplicada consistentemente é um aspecto muito importante nessa otimização (SEO).

Como taggear

A forma mais correta de taggear é através da especificação microformats Rel tag, que eu escrevi recentemente aqui no Revolução. Leia o texto para mais detalhes. Através do atributo rel você informa que determinado hyperlink trata-se do endereço de uma tag no seu site. Se você observar na lateral do Revolução Etc, vai encontrar uma sessão chamada “tag” onde se encontra a relação de todas as tags que eu utilizo no meu site. E no final de cada artigo que eu escrevo você encontra a relação de tags que foram utilizadas para taggear (classificar) aquele artigo. Se clicar em uma delas, você vai para uma página onde estará relacionado todos os artigos escritos que foram relacionados com aquela palavra-chave específica. Simples assim. Isso é taggear.

Pode dar uma olhada com mais detalhes na página do Technorati que te ensina com detalhes como implementar folksonomia no seu site e se quiser algo em português eu já escrevi sobre isso por aqui.

Flying higher

• Happy Tagiversary!
• Using Technorati tags
• Microformats: rel tag
• Microformats: Os atributos rel e rev
• Microformats
• Tag Pattern
• Site pessoal de Thomas Vander Wall

Comentários: 26

Diário de Bordo #3

Por: Henrique Pereira

Tuesday 10 January 2006 às 14:58

Categoria: HTML / CSS / JavaScript, Internet / Web

Recentemente o Revolução Etc tem recebido centenas de visitas de diversos lugares. Agradeço a todas as pessoas que contribuem com meu trabalhando citando meus textos, postando links e deixando seus comentários. Citar os nomes de alguns aqui seria minimizar a contribuição de todos. Então muito obrigado!

Em breve pretendo fazer algumas mudanças por aqui e continuar escrevendo muito. Microformats continuará sendo assunto de forma direta e indiretamente e naturalmente os web standards e suas diferentes facetas. E se você tem sugestão de assuntos relacionados com os padrões entre em contato e mande suas idéias. As criticas e sugestões de todos são sempre levadas em consideração mesmo que nem todas sejam respondidas.

Meus Feeds

Assine meus feeds para acompanhar textos e complementos via Del.icio.us, mais todos os artigos deste site. Os textos postados via Del.icio.us geralmente não aparecem por aqui e servem de referência extra para vários artigos e textos. Outra coisa que eu posto somente nos feeds são os links do “inspiration” , links relacionados a design e sites feitos dentro dos padrões.

Visie Treinamentos Web

Se você ou sua empresa está procurando treinamento em webstandards, acessibilidade, Ajax dentre outras coisas, procure o Diego e o Elcio da Visie. Você provavelmente já os conhece do Tableless e do Fecha Tag então qualquer apresentação sobre eles é dispensável. O site da Visie ficou muito bom e lá você tem todas as informações de que precisa!

Geoprocessamento

A Simone Villas Boas do Pixeladas Aleatórias escreveu um texto muito bom sobre geoprocessamento e suas relações íntimas com a web. O texto Latitude, Longitude fala muita coisa interessante e te dá algumas referências para começar a voar mais alto sobre o assunto. Em breve eu devo explorar mais sobre este assunto aqui com outros aspectos.

Textos Interessantes

O Walmar Andrade do Fator W escreveu SEO é conseqüência de um trabalho bem feito.

Ótimo texto da Simone, Padrões emergindo da Estática.

Se você teve problemas com as extensões do novo Firefox, leia a solução que o Flávio “Japs” encontrou!

Comentários: 2

Designing for Web 2

Por: Henrique Pereira

Sunday 01 January 2006 às 14:05

Categoria: Acessibilidade, HTML / CSS / JavaScript

Se você tem o hábito de ler na internet sobre web standards provavelmente você já deve ter ouvido falar sobre Web 2. E se você só lê em português provavelmente você deve saber no máximo metade de toda a história. Provavelmente você leu aquele belo texto no Carreira Solo, deve ter lido também o texto do Diego Eis no Tableless e do Bruno Torres. Talvez você até se assustou um pouco com a opinião do Bruno sobre a posição em que o Brasil está em relação a web 2; infelizmente ele está muito certo. Realmente dezenas de sites grandes ainda não sabem nem trabalhar com hiperlinks, muito menos transformar a web em um ambiente de desenvolvimento integrado. Sorry enthusiastics!

No Brasil as empresas de web ainda estão em dúvida sobre os padrões, sobre os web standards, anos depois dos conceitos deles já estarem bem amadurecidos. Se soubessem todas as reais vantagens de se fazer parte do hoje (na verdade elas estão e constroem para o passado) a situação por aqui seria bem diferente. De fato a preocupação aqui parece mais estar relacionada ao status egocêntricos de grandes agências que querem fazer aquele gigantesco site em flash ou no estilo folder, e nem se preocupam como a informação é tratada. Bonitinho mais ordinário. O primeiro problema a ser resolvido no Brasil deve começar pelo ego, depois pela web. Valorizar design acima da organização da informação é mastubar-se na frente do espelho.

O passado

Anos atrás a quantidade de publicações era muito menor em relação a quantidade de leitores. A informação estava relativamente centralizada e institucionalizada na forma de agências de notícias, governos e grandes empresas. Depois veio o CSS 1.0, o fim da guerra dos browsers e a vitória do pior deles. Hoje a quantidade de publicações diárias é milhares de vezes maior do que antes. O nosso relacionamento com a informação se inverteu. Estamos exigindo que ela venha até nós, na medida em que for relevante ao nosso interesse. Antigamente todos cultivavam seus favoritos/bookmarks e estavam sempre garimpando a informação naqueles sites lá armazenados.

Web 2.0

O conceito de lidar com a web mudou. A informação cresceu de forma assustadora e deixou de estar centralizada fragmentando-se em milhares de sites e blogs que hoje detêm o conteúdo relevante da web. Ela deixou também de ser um aglomerado de documentos e se transformou em uma rede de dados e informação. Ainda existe a porcaria e o inútil? Claro que sim, e provavelmente continuará a existir, mas a informação relevante está mais acessível e em um número milhares de vezes maior do que antes. O conceito de web 2 surge quando o comportamento de quem usa e de quem cria a web se altera de forma drástica com o advento dos agregadores de Feeds, web services, onde os dados podem ser acessíveis por SOAP (Simple Object Access Protocol) e outras tecnologias, APIS (Application Programming Interface – ), Serviços como Google Maps, Sistemas VoIP, Podcasters, Flickr, Del.cio.us, FeedBurner, acesso por celulares, palm-tops e dezenas de outros serviços e produtos e coisas que estão caracterizando esta nova maneira de lidar com a informação. Interfaces como estas mudaram a maneira com que nós acessamos, armazenamos e compartilhamos a informação. Este é o ponto. Por isso que todos estão chamando a web 2 de “a web como plataforma”. Mas eu não quero falar aqui o que é Web 2 coisa que outros já falaram,e sim sobre como desenvolver sites para a web 2.

Criando para a web 2

Acreditem ou não mas um código semântico, acessibilidade e conteúdo separado da apresentação é a base de tudo isto. Não pense em acessibilidade como algo específico para deficientes visuais. Tenho pensado mais em acessibilidade considerando que é um maneira perfeita de não obstruir informação para nenhum spider ou mecanismo de busca do que em pessoas com deficiências visuais. O resultado disso é um site mais acessível para todos, tanto pessoas quanto user agents.

Se você ler as documentações de como o Google e o Technorat “enxergam” um site, você vai perceber que eles são deficientes visuais e nunca vão “ler” o que está escrito em uma imagem ou ver um site da maneira como você as vê. É preciso dar significado para o seu conteúdo.

Semântica é significado

Recentemente eu escrevi aqui sobre Microformats e em como estes princípios resgataram e ampliaram conceitos que já existem desde o CSS1 – note que além de nomes de classes serem utilizados para chamar um seletor em CSS , elas também são utilizadas “para finalidades gerais processadas por user agents” – utilizando nomes de classes padronizadas para ampliar a descrição da informação. É preciso lembrar também que as classes em um primeiro momento são “sem significado” definido (ao contrário das tags de XHTML) tanto quanto tags em XML. Os princípios que os Microformats estenderam, foram definir profiles e padrões utilizando nomes de classes para colocar ordem em um mundo sem significado. Ou seja, foram definidos um punhado de soluções microformats para problemas específicos, como licença , exibição de datas de eventos, informações pessoais , redes de relacionamento etc.

Bom, o segundo passo para entender isso é como user agents podem interpretar essa informação. O Technorati é a maior autoridade que existe em indexar blogs hoje. Ele é um mecanismo de busca que possui um algoritmo similar ao do Google (só que exclusivo para blogs), que avalia a relevância de um site baseado na relevância semântica dele, dentre outros pequenos detalhes é claro. O Developers Wiki é uma área criada para os desenvolvedores de sites obterem informação sobre codificação e como deixar seu site mais legível para o próprio Technorati. Se você fizer uma busca por “microformats” nesta área, você verá dezenas de documentos falando sobre soluções em microformats, RankLinks (a página não existe mais), hReviewFeedback (a página não existe mais) dentre outros. Microformats não é coisa para o futuro, é realidade no presente. Basta saber usar.

Refletindo conceitualmente sobre código semântico, o tempo todo em que estamos escrevendo um XHTML, nós estamos descrevendo e dando significado para a informação que estamos inserindo no código. Seja utilizando tags corretamente ou aplicando microformats. Quando fazemos a escolha de usar <h1> no lugar de um <p>, nós estamos informando para user agents como o Google o que cada trecho de código significa. É dando significado para cada trecho de código que permite com que um mecanismo avalie se ele é relevante ou não. Um título qualquer dentro de um <h1> é mais relevante do que em qualquer outro lugar, e assim por diante.

Até a data em que eu escrevi este artigo, o meu texto sobre Microformats no Google se encontrava em 5º lugar no mundo entre 736.000 documentos e em primeiro lugar se você fizer uma busca em português. Se você digitar “target blank”, entre 10.500.000 eu estou em terceiro lugar. Como meu texto sobre Target Blank conseguiu ser mais relevante do que mais de 10 milhões de outras páginas?

Se você está preocupado com Web2, esqueça o termo completamente e estude web standards, acessibilidade e Microformats. Se Web 2 está relacionada com a informação, estes são os pilares para criar um ambiente que a priorize em primeiro lugar.

[update]

O Élcio escreveu um ótimo texto sobre Web2 que complementa este como uma luva! Não deixe de ler. Web 2.0 é no chão.

[/update]

Comentários: 12

Microformats

Por: Henrique Pereira

Thursday 08 December 2005 às 21:53

Categoria: HTML / CSS / JavaScript

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.

1. Indice:
   1. Introdução
   2. O que é Microformats
   3. Porque Microformats?
   4. Qual o ambiente propício para Microformats ou como eu poso aplicar isso?
   5. Semântica é significado
   6. Modularidade
   7. Padronizando com classe
   8. Microformats na prática
   9. Referências

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

1. Textos publicados aqui relacionados com Microformats:
   1. Microformats
   2. Microformats: XOXO
   3. Microformats: O mundo de significado do atributo class
   4. hCard
   5. Microformats: os atributos rel e rev
2. Referências normativas
   1. Microformats.org
   2. Microformats Wiki
   3. Modularization of XHTML

Comentários: 75

Diário de Bordo #1

Por: Henrique Pereira

Monday 05 December 2005 às 12:29

Categoria: HTML / CSS / JavaScript, Pessoal

Estou inaugurando o meu Diário de Bordo, uma seleção de links, notícias rápidas e outras coisas bem menores do que os artigos que eu tenho escrito. Se você gostou da idéia deixe o seu comentário.

Inspiration

Eu criei uma seção nos meus Feeds que eu chamo de “Inspiration“, onde eu vou postar sites que inspiram em design e em código não necessáriamente nesta mesma ordem! Este conteúdo não estará disponível aqui no site como post, você só terá acesso se assinar o feeds principal com todos os posts mais os artigos sobre web standards, e o inspiration.

Web 2.0

Quer ler e se informar mais sobre Web 2.0 e descobrir que isto não é de comer e nem de passar no cabelo? Leia os links abaixo:

Web2.0 Workgroup

Se quiser ficar realmente bem informado, assine todos os sites que fazem parte deste grupo.

TechCrunch

Este site analisa, produtos, serviços e companhias que estão relacionadas com Web2.0

[ UPDATE ]

20 Tipos de artigos

Meu chapa Sarmento do Lucrando na rede traduziu um bem falado artigo da web, o 20 tipos de artigos para blogs, que você não deve deixar de ler.

[ /UPDATE ]

24 Ways to impress your friends

Desde o dia 1 de dezembro até o dia 24, este site vai trazer dicas e macetes sobre 24 temas relacionados com desenvolvimento web incluido JavScript, web standards e CSS.

Previsões para 2006

Vi um post interessante no site do Alex Barnett Blog chamado “Several Predictions for 2006”. Ele postou vários links de vários artigos falando sobre as previsões em algumas áreas da web para o ano que vem. Tem alguns textos muito interessantes. O Alex Barnet Blog faz parte do  Web2.0 Workgroup. Não preciso nem avisar que todas as referências são em inglês não é?

• Predictions for 2006, Shel Israel: “The number of bloggers worldwide will exceed 150 million”
• No Blogs Next Year, ClickZ.com: “The End of blogs as we know them”
• 2006 Online Advertising Predictions, 24/7 Real Media: “Advertisers, cable providers and interactive marketing experts will collaborate to address “The TiVo Effect”
• Global Wireless Predictions For 2006, Wi-Fi Technology News/-inCode: “New entrants in mobile music battle the iTunes model”
• Direct Marketing Trends for 2006, Destination CRM: “we expect to see increased investments in two aspects of technology–marketing automation and analytics”
• Robots and TV to be big in 2006, Consumer Electronic Association: “DIY content creation is already a budding market with consumers set to spend about £8bn on devices to help them create their own content.”
• Long Bets, John S.Flowers: “By 2006 a single-answer technology other than Google will emerge as the favored answering service and will remain in power for at least two years”
• Top 10 IT Trends for 2006, Nucleus Research: “SOA: adoption will replace skepticism”
• Web Development Trends for 2006 (O site foi descontinuado), Anil Dash: “overall, user interface elements will be sliding and collapsing instead of simply disappearing”
• WTO: “world trade growth should accelerate to around 7 per cent in 2006″
• The Year of Internet Video (O site foi descontinuado), Business 2.0 Blog, “we’ll see Internet video finally start to gain some serious traction, especially user-generated video”
• 10 Issues Facing Web 2.0 Today, Dion Hinchliffe: “2006 will be a banner year for Web 2.0″
• Sites without RSS?, Scot Gatz: “all content on the web will be available in a subscribable format (RSS, Atom, whatever)”
• 7 reasons 2006 will be a big year for OPML, Alex Barnett: “OPML will ride the RSS slipstream”
• My predictions, 2006 (o site foi descontinuado), Juggins: “I might get laid”
• The Tibbetts Report: “Cheese will be the greatest killer of humans in 2006.”
• Top-10 Emarketing Predictions, iMedia: ”Product placement and advertising appear in Web 2.0 applications”
• 7 reasons 2006 will be a big year for HTML (o site foi descontinuado), Danny Ayers: “HTML will ride the RSS slipstream”
• Disruptive 2006, IDC: “the acceleration of disruptive business models”
• What’s Hot for Work 2006, ARAMARK: “Healthy vending goes mainstream”
• AMR Report, InformationWeek: “Sarbanes-Oxley requirements will cause companies to increase spending on technology in 2006″
• AXcess News: “U.S. auto sales are expected to decline.”
• Official Formula 1 Website: (o site foi descontinuado) “tyres are going to be a big talking point in 2006″

Comentários: 3