Segue abaixo a apresentação que fiz no EDTED do ano passado, aqui em Curitiba:

Um dos grandes problemas do Microformats é a falta de divulgação por parte dos desenvolvedores e, talvez por isso, não é tão comum vermos projetos comerciais utilizando a técnica, mesmo que seja tão simples de usá-la. Desta forma seu futuro foi colocado em questão, já que o HTML 5 está sendo cada vez mais discutido e, com isso, muitos imaginam que os Microformats não terão mais utilidade… Será? Analisemos cada uma das partes para tirarmos nossas conclusões!

HTML 5

A quinta versão do HTML vem aí para solucionar diversos problemas que surgiram com a crescente diversidade de aplicações disponíveis na Internet. Cada vez mais é necessário termos tags específicas para ramificar nosso conteúdo e, desta maneira, classificá-lo mais especificamente, a fim de que humanos e máquinas o compreendam corretamente.

Para isso foi criada uma série de novas tags para facilitar a aplicação do conteúdo e, por que não, do CSS também. Seguem alguns exemplos:

• section – Como o nome diz, representa uma seção do documento ou artigo, por exemplo, que pode englobar um header e um footer;
• nav – Esta é uma das tags mais interessantes, já que foi criada especificamente para o menu do site ou uma simples navegação de links. Vale ressaltar que essa tag não elimina o uso de ul já que serve como elemento pai destas listas;
• article – Pode representar um post de um fórum, blog, notícia de jornal, etc.;
• aside – A definição dessa tag parece um pouco subjetiva; uma aplicação concreta seria a definição de um termo de determinado artigo. Por exemplo, se você está escrevendo sobre uma nova tecnologia, pode envolver um bloco de texto com a tag aside com uma pequena dissertação sobre ele, servindo como um conteúdo complementar, sem fazer o usuário sair do artigo;
• header – É o cabeçalho de uma seção, podendo englobar diversos títulos (leia-se h1, h2, h3 e assim por diante);
• footer – Rodapé da seção, contendo informações como autor do conteúdo, copyrights, data de postagem, etc.

Obviamente temos diversas outras novas tags disponíveis no HTML 5, mas estes são alguns exemplos que mostram bem o “espírito” desta nova versão, oferecendo maior flexibilidade para nosso código em relação a sua semântica.

O grande problema do HTML é que foi criado com o intuito de exibir as informações na Web, mas com o tempo foi crescendo a necessidade de criarem tags para estilização, até que os Web Standards fossem amplamente usados. Por isso confio muito na próxima versão do XHTML que, desde seu início, já foi construído da maneira correta, de certa forma “forçando” o desenvolvedor a escrever seu código corretamente, extinguindo totalmente as tags que representam estilização visual. Mas essa discussão deixamos para uma próxima oportunidade!

Microformats

Como foi dito no início deste artigo, a aplicação dos Microformats é bem simples: usam-se nomes pré-estabelecidos para id’s e classes que, desta forma, atribui significado aos elementos.

Porém muita gente acha que este padrão pode morrer no momento que o HTML 5 se tornar realidade mas, analisando os fatos mais profundamente, dá para concluirmos que isso não irá acontecer, já que cada lado tem um foco diferente.

O princípio dos Microformats é solucionar problemas específicos, tomando como base outros padrões como o vCard, iCalendar, usados há vários anos.

A partir do momento que este formado surgiu para aplicarmos em determinadas ocasiões, fica fácil compreendermos a diferença deste caso com as novas tags implementadas no HTML 5. Enquanto um se preocupa com as diversas aplicações surgidas durante toda a evolução da Internet, o outro se atém a aplicações localizadas oferecendo um detalhamento tão grande que seria quase inviável com tags e/ou atributos novos!

Por isso aconselho a todos estudarem as novidades do HTML 5 (apesar de achar que este é o “assunto da moda” e acreditar mais no XHTML 2) e continuarem atentos aos padrões estabelecidos nos Microformats, pois devido sua simplicidade e foco, é uma prática viável tanto em projetos pessoais como profissionais.

• IE 8 Compatibility – Meta Tags, Http Headers, User Agent Strings etc etc – Este artigo mostra variações que podemos utilizar nos headers de nosso site para mudar o comportamento do Internet Explorer 8. Interessante conhecermos antes de começarmos a desenvolver para ele, dependendo da necessidade de cada site.
• Vertical Centering With CSS – Excelente artigo que mostra 5 métodos para fazer alinhamento vertical pelo CSS. Sabemos que não é nada fácil como aplicar valign numa célula de tabela, mas pode quebrar um galhão!
• 12 resources for getting a jump on HTML 5 – Como diz neste artigo, o mundo ainda não está preparado para usar o HTML 5, mas para podermos chegar neste ponto, temos que conhecê-lo. Então, esta página serve como referência a diversos outros sites com textos sobre o assunto. Obrigatório!
• Web Standards Test: Top 100 Sites – Zeldman resolveu fazer uma pesquisa dos 100 sites mais populares da Internet (via Alexa) e concluiu que apenas 25% deles usam os Web Standards. Veja uma pequena análise dos sites mais bem colocados.
• Como testar o site no IE6, IE7 e IE8? – Artigo que apresenta algumas maneiras de testar seu site nas diversas versões de Internet Explorer, para acabar de vez com o problema nos testes!
• 10 Rare HTML Tags You Really Should Know – Lista de 10 tags HTML que, na grande maioria, são esquecidas mas podem acrescentar muito valor e qualidade ao nosso código, se bem utilizados!

Se você necessita de alguma ferramenta para usar os Microformats em qualquer site ou até mesmo para testar os desenvolvidos por você, é só usar este bookmarklet para exibir os dados desejados.

Testado tanto em Firefox como Safari, Internet Explorer 6 e 7, o Microformat Bookmarklet é uma ótima opção para quem quer usufruir dos benefícios dos Microformats de maneira prática!

Na busca por maior implementação de significado em nosso conteúdo, foi criado um padrão denominado Microformats, amplamente divulgado aqui no project.47 e que, a curto prazo, é a melhor solução a utilizar.

Uma colocação muito interessante feita no Tableless é que os Microformats são “uma tecnologia que veio para tapar um buraco de semântica do HTML“, o que é a mais pura verdade. Apesar de parecer algo que desvalorize sua prática, a função real de se usar os Microformats é atribuir significado para o conteúdo, sem maiores dores de cabeça para seus desenvolvedores, já que o uso depende apenas de uso de classes e certos atributos como rel, por exemplo.

Imagino que no futuro, quando usarmos o HTML 5, a prática dos Microformats já não seja tão necessária, mas até lá temos muito caminho a percorrer. Então, porque esperar para melhorar a semântica de seu código, já que temos algo tão simples a aplicar?

Procure, aprenda e divulgue os Microformats, pois com certeza é a melhor solução que temos atualmente.

Alguns imaginavam que não iria mais postar estes links interessantes, mas sempre vou tentar manter a qualidade das indicações, por isso as vezes espero um tempo para reunir uma quantidade legal. Vejam abaixo os links de hoje:

• Web Standards: Where the ROI is – Todo desenvolvedor de HTML e CSS que se preze conhece a Molly, uma das grandes evangelizadoras dos Web Standards pelo mundo a fora. Neste artigo, descreve os benefícios das práticas dos padrões, falando pelo lado que interessa ao cliente: economia, agilidade e melhor confiabilidade no produto entregue. Use estes conselhos e convença seus clientes também!
• setmy.browsersize.com – Sei que este link foge um pouco ao contexto dos Web Standards, mas não deixa de ser útil a todos nós. E como o próprio nome diz, este site redimensiona a janela de seu navegador para a resolução desejada, ótimo para aqueles que desejam testar seu novo layout e sua compatibilidade com as diversas resoluções.
• How HTML 5 Is Already Changing the Web – Este artigo tenta mostrar como o HTML 5 já está mudando o cenário do desenvolvimento Web, principalmente na questão do suporte dos navegadores, etc. Interessante sua leitura para entendermos um pouco mais sobre os princípios dessa grande revolução para a nossa área de Desenvolvimento Web.
• Fixed Footers without JavaScript – Um dos grandes problemas enfrentados por nós, desenvolvedores, é o momento no qual o Designer decide que o rodapé do site deve ficar fixo no final da página, mesmo sem conteúdo suficiente para “empurrá-lo” para baixo. Já foram discutidas várias soluções, mas se esta não for a mais tranquila, é uma das simples que já vi para resolver o problema.
• DD_belatedPNG: Medicine for your IE6/PNG headache! – A questão do uso de PNG 24bits e sua transparência, no Internet Explorer 6, já é bem batida. Sempre tentei evitar os scripts que “corrigem” o problema, pois estes nunca me convenceram. Até conhecer este que, para mim, é a melhor solução até o momento. O DD_belatedPNG resolve todas as questões como background-repeat, background-position, links clicáveis, etc., somente com o uso de um JavaScript, sem usar a “gambiarra” do filter e um GIF transparente de 1×1 px.
• Semantics in HTML 5 – O site A List Apart é muito conhecido pela qualidade de seus artigos e este mostra o uso de algumas tags novas, criadas para a nova versão do HTML. O interessante é notar como a semântica do código ficará muito mais detalhada e cada vez mais específica para as nosssas necessidades; em um momento até notei uma certa semelhança com os Microformats!

O cronograma do evento foi o seguinte:

• 09:00 – Painel de abertura com os afiliados Brasil – “Os padrőes web e seus impactos no futuro da gorvernança da TI”
• 11:00 – Convidado internacional – “The ways to Web Semantic“
• 11:45 – Convidado especial – “A Web Semântica no Brasil”
• 12:15 – Debate sobre a atuação do W3C Escritório Brasil

Neste artigo vou fazer uma análise do evento, destacando os principais assuntos abordados e o que concluímos para que, no próximo evento, entrem em pauta e auxilie no crescimento do escritório da W3C no Brasil.

Pioneiros no ensino dos Web Standards em nosso país, o pessoal da iLearn foi representado por Everaldo Bechara (Presidente da empresa), que comentou a necessidade de atuarem como evangelizadores, principalmente pela resistęncia natural que o brasileiro tem contra padrőes. Um dos pontos mais interessantes de sua palestra foi o comentário sobre a flexibilidade do uso dos Web Standards para Web Design, pois este não limita a criatividade, pelo contrário, amplia as possibilidades, pois não é necessário fazer uma arquitetura totalmente baseada na idéia de tabelas, como era feito antigamente. Muitos Designers pensam o contrário, mas a realidade é que a adoção dos Web Standards trará mais flexibilidade ao layout, ao mesmo tempo que padroniza os elementos.

Além disso, muito foi comentado sobre acessibilidade, principalmente pela adoção de certas regras para melhorá-la em projetos governamentais. O decreto 5296 ajudará na conscientização da necessidade do XHTML e CSS que, somente por serem utilizados corretamente, já garantem cerca de 60% do uso por deficientes. Para que este decreto vire lei, haverá uma convenção da ONU em breve, o que certamente possibilitará na normatização de tais regras de acessibilidade e os governos ficarão mais atentos a elas.

Porém, um ponto que ainda temos muita dificuldade, e pelo jeito ainda teremos por um bom tempo, é a incompatibilidade de certos navegadores com padrőes adotados pela W3C; é só vermos o exemplo do SVG, ainda não suportado pelo Internet Explorer 8, em fase BETA.

O governo adotando os Web Standards

A palestra de Ricardo Kobashi, Coordenador dos sites de governo e Secretaria de Comunicação, de São Paulo, mostrou como o pessoal está agindo para implementar os Web Standards no meio governamental. Sabemos que novidades nem sempre são bem-vindas, mas quando falamos em dinheiro o pessoal acaba prestando atenção. E foi tocando neste assunto que eles conseguiram convencer os governantes, pois a adoção dos Web Standards gera economia, pois se faz “mais com menos”, e esse é bom argumento para utilizarmos com qualquer cliente!

Mas não é só na economia que os Web Standards contribuíram: a comunicação entre os sites foi facilitada, ou seja, a interoperabilidade entre eles ficou mais prática, já que foi adotado um padrão e, sempre que adotamos padrőes, fica mais fácil para desenvolver e realizar manutençőes. O pessoal do Governo de São Paulo estava procurando por esse padrão a ser adotado e, certamente, a adoção dos padrőes estabelecidos pela W3C foi a melhor escolha.

Quer saber o que eles já fizeram em termos de acessibilidade no Governo de São Paulo? Um belo exemplo é o site da Secretaria dos Direitos da Pessoa com Deficięncia.

Acessibilidade sempre, em qualquer projeto

Como já comentei, acessibilidade foi um tema muito comentado neste evento e, como não poderia deixar de ser comentado, o fato de que devemos utilizar AJAX com muito critério. Na palestra de Gustavo da Gama Torres, foram exemplificados certos casos, muito comuns na era da “Web 2.0″ que prejudicam muito o uso do site por pessoas deficientes.

Por isso, ao elaborar novas aplicaçőes, sempre tenha em mente o público-alvo e tome cuidado para que todos possam aproveitar seus recursos, sem o uso de tecnologias específicas como o próprio AJAX ou Flash, por exemplo. Para ter mais segurança neste quesito, nada melhor que fazer testes de acessibilidade, elaborando certas metas a serem atingidas com o site e se estes objetivos foram alcançados com pessoas deficientes ou não.

Os caminhos para a Web Semântica

Uma das gratas surpresas do evento foi a presença de Klaus Birkenbihl, Coordenador dos Escritórios Internacionais do W3C, que falou um pouco sobre a função da W3C e a importância da padronização no modo de exibir os dados, como foi feito na criação e é um dos princípios básicos do HTML.

A W3C tem como um dos fundamentos, passar a idéia de que a tecnologia web deve ser interoperável, os padrőes devem ser abertos e, consequentemente, possibilitar que tudo deve ser acessível, independente do lugar no qual está sendo acessado, capacidade do dispositivo usado, etc.

Achei bem interessante Klaus falar sobre o uso do texto “Clique aqui” em links, o que é totalmente errado e ainda praticado. Posso dizer que ainda vejo muito disso, mas o fato é que esse texto não diz nada sobre o que o usuário irá visitar (com leitores de tela, por exemplo) e, em caso dos robôs de busca, também não será nada relevante. Por isso sempre descreva seu link de maneira correta, facilitando a vida dos usuários e dos sistemas de busca!

Foi comentado, também, que o princípio básico da Web Semântica é classificar as informaçőes, categorizar o conteúdo para que as máquinas possam entendę-lo também. Já vemos belos exemplos em Microformats, mas também temos o RDF, padrão adotado pela W3C. Houve até uma certa discussão sobre RDF, em quais casos é mais utilizado e, inclusive, Klaus falou que o indicado é tentar converter todos os que conseguir, apesar de não ser o necessário.

Consideraçőes finais

O evento foi muito interessante, pois abordou diversos assuntos presentes em nosso cotidiano, principalmente na questão da acessibilidade, que vem sendo adotada cada vez mais e ainda vai se tornar um assunto muito comum para quem trabalha com web. Porém, acho que a maior contribuição foi a reunião de um grupo de pessoas realmente interessadas em contribuir com o escritório brasileiro da W3C e, certamente, outros encontros como este acontecerão no futuro.

O importante é o pessoal juntar idéias e propostas para que a representatividade do Brasil, nas questőes internacionais, seja cada vez maior, e possamos ajudar a criar novos padrőes, além de simplesmente adotá-los.

Quem quiser ver algumas fotos do evento, montei uma galeria de imagens no Flickr.

• As premissas da Web Semântica – Precisa dizer mais? Este artigo aborda de maneira bem clara o que é essa tal de Web [tag]Semântica[/tag] e a importância de seu compreendimento no desenvolvimento de sites. Para quem está começando no mundo do desenvolvimento Web, é um artigo de extrema utilidade.
• Design para CSSers – Outro grande artigo do Luli, agora abordando certos conceitos de Design que são extremamente essenciais para qualquer desenvolvedor de HTML e [tag]CSS[/tag]. Na verdade, costumo falar muito aqui sobre a necessidade dos Web Designers saberem sobre CSS, mas o contrário também deve acontecer. Claro, falo isso no sentido profissional, ou seja, aqueles que trabalham com Web Standards, assim como eu, devem ter conhecimentos sobre Design, mas não temos como exigir que um programador saiba de tudo isso ao mesmo tempo!
• Image Replacement + Google – Ahh, a velha discussão sobre image replacement e o Google. Este artigo vem elucidar muita coisa sobre o assunto, mostrando principalmente que não temos a perder com esta técnica, somente devemos ter certas precauçőes ao utilizá-la.
• Using CSS to Fix Anything: 20+ Common Bugs and Fixes – Como o próprio nome diz, este é um artigo que mostra diversas técnicas de CSS para corrigir bugs que enfrentamos corriqueiramente, seja com browsers (leia-se Internet Explorer) ou com propriedades que os desenvolvedores não conhecem muito bem e acabam tendo dificuldades, como o bom e velho float.
• Cheat Sheets for Front End Developers – Coleção de cheat sheets, ou seja, aqueles guias rápidos com propriedades e elementos a serem utilizados naqueles momentos que esquecemos a nomenclatura ou modo de uso. Excelente link para todos nós, Front End Developers e, claro, para quem não é da área e precisa daquela consulta rápida para resolver algum problema de última hora.
• Finding Harmony Between Categories and Tags on Blogs – Para finalizar, este artigo que acabei achando de última hora ajuda principalmente os blogueiros iniciantes, que não sabem a diferença entre tags e categorias, mostrando em quais casos é melhor usar um ou outro. O importante é ter bom senso principalmente na hora de usar as tags!

Após divulgarem a implementação de alguns formatos de Microformats em seu sistema de busca, foi postado um artigo no blog do Yahoo! Developer Network falando um pouco mais sobre sua utilização e uso de maneira simplificada.

Vale a pena dar uma conferida!

• CSS layout techniques – Trata-se de uma lista com referęncias para quem quer aprender mais sobre a construção de layouts em CSS e suas variaçőes.
• Checklist para Web Standards – Esta página exibe um checklist, exibindo certos pré-requisitos que devemos obedecer para assegurar a qualidade do desenvolvimento de nosso site.
• Microformats: The Fine Art of Markup – Para quem ainda não sabe o que são os [tag]Microformats[/tag], este link apresenta detalhadamente o que eles são e suas finalidades. Ah, claro, também pode-se fazer uma busca aqui pois já escrevi bastante sobre o assunto.
• Email Standards Project Acid Test – A exemplo do Acid test original, este tem por propósito assegurar a qualidade de renderização dos diversos meios de visualização de e-mail disponíveis. Muito interessante esta iniciativa, já que ainda temos poucas possibilidade quando tratamos de Padrőes no envio de e-mails.
• Fancy Form Design Using CSS – Este site exibe maneiras de construir seus formulários, utilizando código válido, com vários exemplos de layouts distintos.
• CSS Panic Guide – Ótimo guia para os iniciantes em CSS. Exibe várias referęncias importantes e conceitos que não devem ser esquecidos; desde os fundamentos da linguagem, até as melhores maneiras para a construção de layouts.
• CSS3: Cascading Stylesheets Tutorial and Reference Guide – Este site apresenta diversas referęncias de propriedades CSS, além de vários tutoriais.
• Email Standards Project: Yahoo! Signs on 100%, GMail Bad – Artigo que analisa a conformidade do Yahoo e GMail com os Padrőes e mostra que, do lado do Yahoo, as coisas estão indo muito bem.
• 22 Resources to Easily Create CSS Layouts – Lista de referęncias para construção de layouts em CSS. Bem interessante para aqueles que possuem dificuldades com layouts de várias colunas, líquidos, elásticos, etc.

Aproveitando este post, gostaria de desejar um Feliz Natal a todos que visitam e assinam os feeds do project.47. Que o Papai Noel venha bem gordo nesse ano!