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!

Como de costume, o evento acontece no dia 9 de Abril, e o project.47 participará novamente!

Caso queira automatizar o processo, pode-se utilizar um plugin para Wordpress que faz tudo sozinho

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.

Esse é o propósito do Blog Web Standards (nome mais sugestivo, impossível!); ser direcionado aos desenvolvedores HTML e CSS que de repente procuram alguma forma mais prática de estruturar seu documento ou soluções imediatas para determinadas questões que aparecem em nosso dia-a-dia, a exemplo de bugs em nosso grande amigo Internet Explorer 6.

Além das soluções para problemas, propomos diversos tipos de implementações (como padronização e estruturação dos códigos) que adotamos em nossa agência e, futuramente, podem ajudar os desenvolvedores que os adotarem também.

Fica aí a dica para novatos que querem ter uma boa fonte para resolver certos problemas e para os mais experientes que, de repente, não conhecem uma forma mais prática de realizar determinada tarefa.

Agora postei três dos últimos trabalhos desenvolvidos em nome da Viscount Box Design, nos quais fiz toda a parte da criação do layout, desenvolvimento do HTML/CSS e otimização para sistemas de busca (SEO). Os novos sites incluídos são:

• iBoltinfo
• Academia Espaço Fitness
• Curitiba Brownspiders

Tenho alguns grandes projetos feitos pela Mídia Digital no ano passado, mas ainda não tive autorização para colocar em meu Portfolio. Atualizarei o mais breve possível!

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!

Com o passar do tempo e crescimento do negócio, as necessidades foram se modificando e, obviamente, as pretensões da empresa também. E quando você e, principalmente, seu cliente sentem que o site já não corresponde mais as expectativas, com certeza está na hora de fazer um redesenho do site. Porém, esse redesenho não está ligado somente ao layout do site, mas a toda estrutura e objetivos do mesmo, para se moldar às novas necessidades do cliente.

Para isso devemos nos lembrar que na criação de qualquer site devemos passar por algumas etapas, como a problematização, ou seja, o briefing. Esta primeira fase deve ser a mais precisa possível, pois somente atingiremos os objetivos pretendidos se soubermos exatamente o que o cliente quer.

Uma dica que passo, aos menos experientes, é dar uma boa analisada nas qualidades que o site atual já possui, para mantê-las ou até mesmo melhorá-las, além de ficar atento com as novas necessidades do mercado, observando o que os usuários têm pesquisado com mais frequência, aumentando as chances de possíveis visitantes.

Fazendo um briefing bem feito e detalhado, as próximas etapas (Arquitetura de Informação, Redação, Design, etc.) serão mais eficientes e o trabalho será bem sucedido.

O blog não é atualizado há algum tempo, mas como acredito que este não é o tipo de site que precise ser atualizado frequentemente, estou dando prioridade a outros projetos e, claro, os freelances, sempre nos “atrapalhando” nos projetos pessoais

Como já comentei aqui, criei um blog sobre Nintendo Wii, algo que me interessa muito e vai muito bem obrigado!

Além deste site, voltei a tocar com a minha banda e aproveitamos para inaugurar nosso site, por isso também estou me dedicando no desenvolvimento deste, principalmente na otimização para os sistemas de busca.

Em breve atualizarei a seção Portfolio, com diversos trabalhos desenvolvidos ao longo de 2008 que, por falta de tempo, não pude atualizar.

Um grande abraço a todos os visitantes!