Blog

Enfim passa mais uma semana e, claro, chega a Sexta-feira dos Web Standards em sua nona edição! Muitos links interessantes sobre CSS, uso de Padrões no envio de e-mails, etc… Vale a pena dar uma olhada nessa lista:

• 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 Microformats, 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!

Technorati Tags: Web Standards, CSS, Microformats

Para os felizardos que possuem Mac OS X 10.5 e não possuiam uma ferramenta a altura do Operator (extensão para Firefox), saiu uma boa opção: extensão Microformat para Safari.

Assim como no Operator, o plugin para Safari possibilita a detecção de Microformats nos sites e fácil importação de hCards entre outros tipos de padrões, facilitando a vida do usuário.

Technorati Tags: Microformats

Lançaram a ferramenta Optimus (remetendo ao personagem dos Transformers) que, ao utilizada, converte conteúdos em Microformats para XML ou JSON.

Os formatos suportados pela ferramentas são os seguintes:

• hCalendar
• hCard
• hAtom
• hResume
• hReview
• xFolkentry
• adr
• geo
• xfn
• votelinks
• rel-nofollow
• rel-tag
• rel-license

Fonte: microformatique

Technorati Tags: Optimus, Microformats, XML, JSON

Há algum tempo, iniciei uma série de posts (que desejo continuar) sobre exemplos práticos de Microformats, para incentivar aqueles que nunca utilizaram ou não possuem interesse. No primeiro post, citei o hCard, situação na qual acredito que os Microformats são mais utilizados atualmente.

Agora meu objetivo é falar de outra prática comum no mundo dos Microformats: hCalendar. Como em todo microformat, para aplicá-lo, basta seguir as classes pré-definidas e começar a utilizá-lo em seus projetos. Aliás, não há empecilhos em utilizá-lo num sistema totalmente dinamizado, por exemplo.

Na prática, o hCalendar pode ser utilizado como um simples calendário ou até uma agenda de eventos que, inclusive, venho utilizando em meus últimos trabalhos, tanto pessoais como na agência na qual trabalho. Este método se destina a ser aplicado em XHTML, Atom, RSS e XML.

Para facilitar a nossa vida, assim como no hCard, foi desenvolvido um gerador de hCalendar, visando deixar mais prático o processo de aplicação deste padrão.

Technorati Tags: Microformats, hCalendar, XHTML

Foi lançada mais uma extensão para Firefox, a WebCards, com o intuito de difundir os Microformats, algo que se torna muito importante, enquanto não há suporte nativo por parte dos browsers atuais.

Há várias características semelhantes à outras extensões do gênero, como a Operator, mas um diferencial é que você lida com os dados em tempo real, na própria página, o que a torna uma extensão muito interessante.

Futuramente eles planejam adaptá-la a outros browsers mas, por enquanto, só no Firefox mesmo.

Technorati Tags: Firefox, Microformats

Muitos iniciantes ainda encontram dificuldades em aliar um bom design, com um código bem feito e semanticamente correto.

Posso dar como maior exemplo, aqueles sites com utilização de fontes bem elaboradas para a logo, título do site, das páginas, dos textos, etc. Porém, como todos sabemos, textos “puros” devem ser escritos com fontes que todos possam visualizar, ou seja, você deve planejar seu site com uma fonte em que todos possam visualizar da mesma maneira, senão o layout vai por água abaixo.
Uma boa saída é utilização de imagens ao invés de simples texto, nestes casos em que é estritamente necessária a utilização de fontes diferentes. Digo isso somente em casos extremos, nos quais o visual do site irá se prejudicar bastante, caso não seja utilizada uma fonte padrão.

Porém, muitos não sabem que a semântica e indexação nos sistemas de busca será afetada com utilização de imagens para fins de leitura. Na verdade, imagens não possuem significado de texto, no máximo podemos utilizar o atributo alt para definir uma legenda para tal imagem.

Para poder utilizar uma imagem em títulos e que ela possa ter uma semântica correta, sem afetar a indexação do conteúdo nos sistemas de busca (além da acessibilidade, etc.), podemos seguir o exemplo abaixo, caso a intenção seja utilizar uma imagem para o título de uma página:

Código HTML:

<h2>Título da Página</h2>

No CSS fica assim:

h2 { width: largura desejada; height: altura desejada; background: url(endereço da imagem) no-repeat; text-indent: -9999em; }

Este é um exemplo muito básico, mas basta para mostrar a idéia da prática. O que fizemos nada mais foi que, no código HTML, mantivemos o texto limpo, sem inserção de tags img, deixando-o limpo e acessível, tanto para pessoas como máquinas.
Agora, no CSS, definimos uma largura, altura, uma imagem de fundo e, ao final, adicionamos a propriedade text-indent, fazendo com que o texto desapareça, mantendo, somente, a imagem de fundo.

Desta maneira, seu site possuirá imagens com as fontes desejadas sem perder a semântica, acessibilidade, indexação, etc.

O único contra desta “técnica” seria a dificuldade na atualização destas imagens, pois se trata de um processo manual. Mas há técnicas de image replacement que podem ser pesquisadas, caso a intenção seja esta.

Como já venho defendendo esta idéia há um tempo, acredito que os Microformats dão mostra do que será a Internet num futuro próximo; onde as informações são organizadas e cada uma possui seu significado, de maneira que tudo possa ser aproveitado de acordo com sua real finalidade. É o conteúdo sendo mais valorizado e, em maior escala, aproveitado, devido ao suporte maior por parte dos browsers e programas à parte.

Preocupando-se com essa nova realidade, a Mozilla desenvolveu uma extensão para Firefox 2, chamada Operator, que tem como intuito aproveitar as possibilidades que os microformatos nos dão. Não é a primeira extensão do tipo, mas representa um grande avanço e incentivo aos desenvolvedores para que, cada vez em maior número, adotem esta metodologia.

Para mais detalhes do projeto, é só visitar o post oficial sobre o lançamento.

Technorati Tags: Microformats, browsers, Mozilla, Firefox

Há algum tempo postei o link para uma lista de propriedades dos Microformats, auxiliando muito na utilização dos mesmos.

Estou disponibilizando o link para a versão atualizada dessa lista e, novamente, recomendo altamente para quem pretende utilizar Microformats em seus futuros projetos.

A lista tem mais utilidade como guia. Se você estiver interessado em aprender mais sobre o assunto, já escrevi alguns posts e pretendo continuar mostrando mais alguns exemplos práticos, a fim de divulgar essa metodologia de desenvolvimento.

Technorati Tags: Microformats

Estamos passado por uma fase na qual muitos se perguntam do verdadeiro papel da W3C e se ela está sabendo desempenhá-lo, de acordo com as expectativas geradas ao longo dos anos e, claro, com a expansão dos Web Standards nos sites e blogs pelo mundo a fora.

Não podemos negar a importância que a W3C teve (e tem) na evolução do Desenvolvimento Web, mas devido a algumas falhas, seja na atualização de seu conteúdo, como nas medidas adotadas, o pessoal acabou tomando iniciativa e criando novos padrões “independentes” que, com o passar do tempo, vêm possuindo mais e mais adeptos. No meu ponto de vista, o maior exemplo de uma iniciativa vinda de fora da W3C são os Microformats, cada vez mais aceitos em grandes e pequenos sites, se firmando como uma das grandes tendências dessa evolução da Internet, inclusive sendo reverenciado como um dos pilares da Web 3.0 (!!).

Na busca por essa padronização na maneira de se desenvolver o código do site e pela semântica do mesmo, foram criados diversos tipos de microformatos para diversas finalidades (seja para criar um perfil no seu site, mostrar sua localização geográfica, empresa na qual está trabalhando, telefone de casa, calendário, eventos importantes, copyrights, etc.) as quais citarei aqui.

O primeiro tipo de microformato que citarei, é o hCard, que também utilizo aqui no project.47. Continuar lendo…

Technorati Tags: Web Standards, W3C, Desenvolvimento Web, Microformats, hCard

Imagine-se trabalhando numa agência qualquer, na qual se tem prazos curtíssimos e muita coisa a fazer.

Será que tem como aplicar Microformats a grandes projetos, com curto período para desenvolvimento?

Estou passando por isso atualmente, e acho que os Microformatos foram criados possuindo sua função muito importante no desenvolvimento de qualquer tipo de site. Porém, para podermos aplicá-los corretamente, devemos seguir as classes pré-definidas, obviamente, para fazer sentido utilizá-los.

Essa consulta acaba prejudicando, em certo ponto, o andamento do projeto, o que pode deixá-lo impraticável em certos tipos de trabalhos.

Porém, no caminho inverso, estou desenvolvendo o site da minha banda e, como não tenho prazo de entrega, pretendo utilizar muitos recursos dos Microformats, assim como já faço aqui, especialmente no Portfolio. Assim, desenvolvendo com bastante calma, posso implementar as classes nos itens correspondentes, dando significado para cada um deles, auxiliando consideravelmente na semântica do site.