Pular para conteúdo 
Зеленый кофе

O autor

Carlos Eduardo de Souza, Front-End Developer & Interface Designer na Coopers Digital Production, dedica seu tempo para o desenvolvimento de uma Web mais acessível. Possui certificado W3C em Mobile (sites e web apps) e HTML5.

Portfolio e blog sobre Web Standards – project.47, de Carlos Eduardo de Souza

Blog

Topo 05/12/07

Plugin Microformats para Safari

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 [tag]Microformats[/tag] nos sites e fácil importação de hCards entre outros tipos de padrőes, facilitando a vida do usuário.

Topo 24/09/07

Optimus – Conversor de Microformats

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

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

Topo 10/03/07

Referęncia aos Microformats – hCalendar

Há algum tempo, iniciei uma série de posts (que desejo continuar) sobre exemplos práticos de [tag]Microformats[/tag], 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: [tag]hCalendar[/tag]. 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 [tag]XHTML[/tag], 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.

Topo 17/02/07

WebCards – Mais suporte a Microformats no Firefox

Foi lançada mais uma extensão para [tag]Firefox[/tag], a WebCards, com o intuito de difundir os [tag]Microformats[/tag], 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.

Topo 10/01/07

Mantendo a semântica com imagens e textos

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.

Topo 18/12/06

Operator: o futuro da Web

Como já venho defendendo esta idéia há um tempo, acredito que os [tag]Microformats[/tag] 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 [tag]browsers[/tag] e programas ŕ parte.

Preocupando-se com essa nova realidade, a [tag]Mozilla[/tag] desenvolveu uma extensão para [tag]Firefox[/tag] 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.

Topo 07/12/06

Microformats cheatsheet

Há algum tempo postei o link para uma lista de propriedades dos [tag]Microformats[/tag], 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.

Topo 29/11/06

Referência aos Microformats – hCard

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 [tag]Web Standards[/tag] nos sites e blogs pelo mundo a fora.

Não podemos negar a importância que a [tag]W3C[/tag] teve (e tem) na evolução do [tag]Desenvolvimento Web[/tag], 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 [tag]Microformats[/tag], 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 [tag]hCard[/tag], que também utilizo aqui no project.47. Continuar lendo…

Topo 10/11/06

Microformats são viáveis comercialmente falando?

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.

Topo 09/10/06

Significado é tudo

Ao tentar conversar com outras pessoas de regiőes/estados diferentes, algumas falam gírias que ŕs vezes nem entendemos. Imagina quando falamos com pessoas de outro país, que utilizam outra língua para se comunicar, seria impossível transmitir nossas idéias (pelo menos através da fala e escrita).

Penso que no caso da Web o caso seja bastante semelhante. Mas desta vez não estou falando da língua do conteúdo, mas o modo como o site é desenvolvido.

O princípio básico para que haja comunicação é que haja alguém que esteja enviando a informação e alguém que a receba. Porém, se os dois não se comunicarem de uma forma em que ambos se identifiquem, como seria possível um entendimento entre as partes?

Continuar lendo…

Links Randômicos
Meta
Apoio
Créditos
Creative Commons