Links quebrados e páginas de Erro 404

Por: Henrique Pereira

Monday 19 July 2010 às 13:47

Categoria: Experiência de usuário, HTML / CSS / JavaScript, Internet / Web

Links quebrados, também conhecido em inglês como broken Links ou link rot (link podre ou estragado) são links que não mais levam o usuário para onde originalmente deveria levar. Em outras palavras, são links para páginas inexistentes. As causas disso são variadas, como um site que deixou de existir ou uma página que foi migrada para outro local devido ao redesign do site ou a página foi deletada, etc. O fato é que links quebrados são responsáveis por basicamente dois problemas distintos que você deve evitar em qualquer site. O primeiro deles é uma péssima experiência de usuário que os visitantes vão ter no seu site ao se depararem com “páginas inexistentes” – o famoso erro 404 – e o segundo problema é o desperdício de tráfego inútil na web ao requisitar ao servidor uma página que não mais existe.

Se você se preocupa com a indexação do seu site pelos mecanismos de busca você também precisa se preocupar em deixar seu site livre dos links quebrados. A internet é interligada por hyperlinks. Mecanismos de busca são estruturados em torno de links. Quanto mais links apontando pra um endereço mais relevante ele é. Se você possui muitos links quebrados ou páginas com erro 404, o Google pode não encontrar razão em dar alguma relevância para seu site, visto que o mesmo não oferece uma boa experiência de usuário. E isso é razão mais do que suficiente pra você se preocupar em manter seu site sempre atualizado e livre de links quebrados.

Erro 404 e como minimizar uma péssima experiência de usuário

Erro 404 é a denominação da famosa mensagem de “Página não encontrada” que todo mundo já se deparou alguma vez. Trata-se de uma resposta enviada pelo servidor informando que o endereço que você está tentando acessar não existe. E sabe quando essa tela aparece? Quando você deixou algum link interno quebrado ou removeu alguma página e não fez nenhum redirect para um novo endereço.

Geralmente a mensagem enviada pelo servidor, por padrão, não é muito útil como você pode ver na imagem acima. O correto é você personalizar essa página de erro 404 com uma mensagem mais amigável e mais explicativa para o usuário. Infelizmente a maioria dos sites não a personalizam deixando o usuário perdido e sem qualquer possibilidade de encontrar algum conteúdo similar no seu site. A Smashing Magazine publicou um texto sobre várias boas práticas relacionadas com páginas de erro 404 que vale a pena dar uma olhada antes de construir a sua. O Google também publicou algumas observações importantes sobre o assunto.

Evite round-trip times desnecessários

Round-trip Times (tempo de ida e volta em português), também abreviado por RTT é o tempo gasto para que uma aplicação client side (um browser por exemplo) gasta para enviar uma requisição ao servidor somado ao tempo que o servidor vai gastar para responder esse pedido. O RTT não inclui o tempo de transferência desses dados, trata-se apenas do tempo de comunicação entre cliente e servidor.

Vamos supor que na sua folha de estilos de CSS você chama uma imagem de background que não existe. Vamos supor que você nem notou que essa imagem não existe mas a regra de CSS que “linka” essa imagem continua lá. Toda vez que alguém acessa o seu site ou blog, sua folha de estilos vai enviar uma requisição ao seu servidor desnecessariamente. Pode parecer pequeno, mas em sites com grande audiência isso é um grande desperdício de recursos do servidor, consequentemente menos grana no seu bolso. Uma boa prática em desenvolvimento web para deixar sites mais rápidos é minimizar a quantidade round-trip times. Principalmente os desnecessários como aqueles originados dos maditos links quebrados.

Detectando e combatendo links quebrados

Depois de identificado 2 grandes problemas relacionados com broken links, o que você precisa fazer agora é colocar a mão na massa. Se seu site possui muitos links quebrados, ela passa uma impressão amadora e descuidada. Quanto mais importante — financeiramente falando — seu site representar pra você, mais cuidadoso com ele você deve ser. E combater links quebrados é uma tarefa que você não deveria esquivar-se nunca. Não há outra forma de combatê-los senão verificando link por link. Como fazer isso manualmente seria um tanto desumano, existem ferramentas que fazem isso por você.

Há várias soluções de ferramentas que checam links quebrados, mas neste artigo vou indicar apenas algumas que eu já utilizei.

W3C Link Checker: O W3C Link Checker é um verificar de links quebrados online parte de um grupo de ferramentas de qualidade da W3C. A vantagem desse verificador é que você não precisa instalar nada no seu computador.

Xenu’s Link Sleuth: O Xenu trata-se de um aplicativo desktop (roda somente em plataforma Windows) muito popular entre os desenvolvedores. Ele verifica imagens, JavScripts e CSS. Possui algumas informações em relatórios interessantes.

Firefox extension: LinkChecker: O LinkChecker é bem popular e fácil de usar. Basta instalá-lo como uma extension no Mozilla Firefox.

WordPress: Broken Link Checker Plugin para o WordPress que estará sempre monitorando seu blog atrás de links quebrados, te poupando muito esforço.

Além dessas ferramentas é sempre bom nunca tirar os olhos do Google Webmasters Tools e do Yahoo! Site Explorer atrás de problemas de indexação e report de erros. Nada substitui essas duas ferramentas.

P.S.: Sim, eu tenho alguns links quebrados por aqui e pretendo exterminá-los em breve. Eu disse que é algo que precisa ser feito e não que era um trabalho fácil.

Comentários: 3

Tem gente que não sabe linkar!

Por: Henrique Pereira

Wednesday 30 April 2008 às 13:43

Categoria: Internet / Web

O que eu acho mais curioso na internet é o quanto ela consegue ser “geral”. Tem de tudo aqui. Desde como aprender a trocar fraldas até receitas caseiras de napalm. Mas o que mais me deixa encabulado, de nariz torcido, careta na cara, é ver sites, principalmente os que possuem o que poderíamos chamar de “tradição”, demonstrar uma completa ignorância no funcionamento mais básico da web, que é o link. Tem gente que não sabe linkar!

O princípio básico e elementar da web é que tudo pode estar conectado, através de links. E ele é de graça. Porque toda a web está fundada no link. Para quem não trabalha com isso ou está começando agora, é desculpável não saber linkar. Agora vejamos por exemplo esta notícia do IDG NOW, que é um veículo de comunicação que, pessoalmente, eu aprecio muito e é sobre tecnologia (sic). Adoro o trabalho deles. Mas ao ver a notícia chamada “Criador do BlogBlogs anuncia Brasigo, serviço de perguntas e respostas” sem NENHUM link apontando ou para o BlogBlogs do amigo e conterrâneo Manoel Lemos, ou para o Brasigo (que já tem até um blog), achei o fim da picada. Porque diabos não tem um link ali?

Dei o exemplo do IDG NOW porque foi o que eu vi agora a pouco, (e por isso ele vai servir de bode por todos os outros que fazem isso) mas muitos sites da imprensa (e blogs também) são capazes de falar de um determinado assunto, muitas vezes relacionado a algo que está na internet (dãrrrr) e não colocar um link! O único link citado na notícia do IDG NOW foi para uma matéria deles mesmo. O leitor que não conhece o BlogBlogs, vai continuar não conhecendo, o que tornará o assunto da notícia para o leitor leigo algo abstrato, uma vez que não há uma referência (leia-se link) direta relacionada com o próprio assunto. Desculpas pelo desabafo, mas se alguém aí puder mandar este tutorial de hyperlink que eu fiz anos atrás para quem precisa aprender o que é um link, sinta-se a vontade.

Comentários: 22

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

CSS Tooltip

Por: Henrique Pereira

Saturday 25 February 2006 às 18:25

Categoria: HTML / CSS / JavaScript

Encontrei um artigo interessante no CSS Beauty, uma galeria de web sites que seguem os padrões. Trata-se de um texto sobre como personalisar os tool tips do atributo title usando JavaScript e CSS.

Resolvi implementar aqui como teste e achei interessante. Na página de teste do artigo você encontra o script e o CSS disponível para reproduzir no seu site. Testei no Internet Explorer, Mozilla Firefox e Opera e funcionou perfeitamente nos três. Usando um JavaScript não obstrusivo e apenas uma regra de CSS você consegue personalizar a maneira com que os browsers exibem o title inserido nos hyperlinks.

Um ponto negativo é que o script é feito apenas para personalizar o title inserido em hyperlinks. Seria legal se alguém estivesse disposto a adaptá-lo para personalizar todos os title inseridos em todas as tags que o suportam, como abbr, acronym etc. Se alguém se interessar, faça as alterações no script e me envie novamente que eu posto aqui dando os devidos créditos.

[ UPDATE - 26/02/2006 - 08:03h ]

O Robson Júnior, seguido pelo Newton Horta fizeram atualizações no JavaScript do qTip. O Robson até escreveu um post (o site não existe mais) descrevendo a alteração feita. O script que ele alterou é o que está sendo usado aqui agora. E seguindo a sugestão que eu encontrei no script do Newton (o arquivo foi removido) eu adicionei no array do script do Robson o elemento input.

[ /UPDATE ]

Comentários: 12

Microformats: os atributos rel e rev

Por: Henrique Pereira

Friday 17 February 2006 às 20:50

Categoria: HTML / CSS / JavaScript

Além de dar continuidade na série de artigos sobre hyperlinks, este texto também trata sobre as especificações microformats que utilizam estes atributos como parte de sua especificação. Apesar destes atributos estarem presentes nas documentações da W3C do HTML desde meados da década de 90, só agora eles estão sendo amplamente utilizados com o advento das especificações microformats. Vamos ver todas estas especificações aqui uma a uma.

O atributo Rel: qual é a relação?

O atributo rel (“rel vem da palavra “relationship” ou “relação”, “relacionamento” em português) pode ser aplicado aos elementos e para informar a relação que a URL que você está linkando tem em relação com a página onde o link está. Por exemplo, se eu posto um link aqui no meu site para o site do Flávio Japs eu poderia usar o atributo rel da seguinte forma:

<a rel="friend co-worker" title="Visite o site do Japs"
href="http://www.japs.etc.br/">Japs </a>

Isto pode ser lido da seguinte maneira: O site Japs é um amigo (friend) e trabalha junto comigo (co-worker). Ou seja, links são pessoas. Principalmente no mundo dos blogs. O atributo rel te permite informar a relação que você (www.seusite.com.br) tem com os links que você posta diariamente no seu site.

Veja outro exemplo do atributo rel aplicado na tag link:

<link title="RevolucaoEtc - Todos os Posts"
type="application/rss+xml" rel="alternate" />

Isto pode ser lido da seguinte maneira: o link para os feeds do meu site (http://feeds.feedburner.com/Revolucao) é um conteúdo alternativo (rel=”alternate”) para o meu próprio site (www.revolucao.etc.br) que é onde o link se encontra. Esta é a função deste atributo criado pela W3C desde meados da década de 90. Fornecer informação e meta-informação de relação entre uma fonte (URL) e outra na web, ou entre um documento (.html) e outro.

O atributo Rev: qual a relação reversa?

Agora que você entendeu o atributo rel, entender o atributo rev e a diferença entre eles é mais fácil. Acima eu exibi a relação que o meu site tem com o meu endereço de feeds (alternate). Agora dentro do meu arquivo de feed, eu poderia colocar um link para o meu site e inserir o atributo rev da seguinte maneira:

<a rev="alternate"
href="http://www.revolucao.etc.br/wp-admin/www.revolucao.etc.br">
Revolução etc
</a>

Ou seja rev (da palavra “reverse” que significa, “inverso” ou “ao contrário”) informa a relação contrária que uma fonte (URL) tem com outra. Se você ainda está com uma pulga atrás da orelha, vamos dar uma olhada nas especificações microformats uma a uma para entender melhor como isso funciona.

Rel Tag

Ao adicionar o atributo rel com o valor de tag (rel=”tag”) em um hyperlink, você está indicando aos user agents que o destino daquele link refere-se ao que chamamos de “tag” (ou “categoria”) de um site. Quando você escreve um artigo no seu site e o classifica em uma ou mais de uma categoria, espera-se que o usuário possa acessar uma listagem de artigos relacionados com aquela categoria específica. Ou seja, o destino deste hyperlink deve existir como uma página e que funcione como um filtro que relacione apenas os textos relacionados com aquela categoria específica. Veja um exemplo:

<a rel="tag" title="Technorat"
href="http://www.revolucao.etc.br/archives/category/technorat/">
Technorat
</a>

A aplicação desta especificação rel-tag está muito relacionada com blogs mas não limitando-se a ela. O maior exemplo prático disso você encontra no Technorati, o maior mecanismo de busca relacionado a blogs. Lá você faz uma busca selecionando uma tag que busca em milhares de sites espalhados pelo mundo e que compartilham da mesma palavra chave (tag). O Technorati é o maior incentivador desta especificação e até ensina os usuários a taggear corretamente.

As tags (ou categorias como preferir) são tipos de de meta-informação visíveis, ou seja, através de uma listagem de tags em um site, você consegue acessar informações muito mais facilmente relacionada com uma palavra-chave, como na lateral do meu site. No site microformats você pode ver diversas implementações que podem servir como sugestões pra você.

XHTML Friends Network (XFN)

A W3C especificou um atributo para ser inserido na tag HEAD chamado “profile” ou “Meta data profiles”. A função deste atributo é especificar a localição de um perfil de meta-informação onde usar agents podem utilizar estes perfis profile reconhecendo uma identidade comum e executar algum tipo de atividade baseado nas convenções daquele perfil. Por exemplo, os mecanismos de busca podem fornecer uma interface de busca que utilize um catálogo de documentos HTML onde todos estes documentos utilizem o mesmo perfil de entrada. Um exemplo prático disso é o buscador Rubhub que faz suas buscas baseadas na relação que um site tem com outro utilizando o perfil do XFN.

O XHTML Friends Network é um profile criado para representar relacionamentos entre sites através de hyperlinks onde você informa a relação que você tem com os sites que você linka no seu blog, apenas utilizando o atributo “rel” nos seus hyperlinks. Vamos ver como isso funciona.
Primeiro você insere o atributo profile com o valor apontando para a página de profiles do XFN da seguinte maneira:

<head profile="http://gmpg.org/xfn/11">

Nesta página linkada, se encontra o perfil de meta-informação de relacionamentos (XFN 1.1 relationships meta data profile) que você pode utilizar. Lá cada item está explicado um a um. A aplicação destes perfis é como no exemplo que eu dei logo acima. Veja novamente:

<a rel="friend co-worker" title="Visite o site do Japs"
href="http://www.japs.etc.br/">Japs</a>

Como eu mostrei no exemplo acima, eu indiquei através do atributo “rel” que o Flávio Japs é meu amigo (friend) e trabalha junto comigo (co-worker) conforme especificado no perfil que eu referênciei na tag head do meu site através do atributo profile.

O Technorati, WordPress, Feedster (o site foi descontinuado) são alguns exemplos de sistemas que já adotam amplamente o XFN.

Rel-license

Rel-license nada mais é do que um padrão para indicar conteúdo relacionado a licença. Adicionando rel=”license” a um hyperlink você estará indicando que o destino do hyperlink se refere a licença da página atual. Veja um exemplo que você pode encontrar no meu site:

 <a title="Creative Commons License" rel="license"
href="http://creativecommons.org/licenses/by-nc-sa/2.0/br/">
Creative Commons License
</a>

Declarando desta maneira eu estou indicando que o meu site está sob a licença da Creative Commons License. Para vocês terem uma idéia da implementação disto, o Yahoo e o Google (o Google removeu esta página) possuem em seus mecanismos de buscas formas específicas de encontrar conteúdo baseado na licença de uso.

Rel-nofollow

A especificação Rel-nofollow inserida em hyperlinks através do atributo rel (rel=”nofollow”) indica que o destino do hyperlink não deve ser seguido por nenhum tipo de user agent automatizado, como os mecanismos de busca por exemplo. Para você ter uma idéia prática sobre esta especificação, sabe aqueles comentários nos blogs de pessoas que só querem divulgar seus sites para aumentar o hanking deles no Google espalhando, da forma mais viral possível, links em todos os sites que permite comentários? O Google estimula o uso de rel=”nofollow” em todos os links de comentários nos sites como uma forma de combater os comentários de spammers. Veja um exemplo:

<a rel="nofollow" xhref="http://www.example.com/">Exemplo</a>

O Google estimula o uso de rel=”nofollow” em qualquer lugar em que os usuários podem inserir por si próprios comentários e hyperlinks, como nas áreas de comentários de qualquer site. São várias as ferramentas de blogs que já trazem esta especificação por padrão, como o Blogger, WordPress e Flickr. No WordPress, bem como no meu site, por exemplo, todos os links dos sites das pessoas que comentam aqui, trazem por padrão o atributo rel=”nofollow” toda vez que você preenche o campo “site” para inserir algum comentário, ou seja, o Google não considera os links inseridos aqui e eles não são links válidos para aumentar o hanking de ninguém.

Vote Links

Sistemas de indexação geralmente tratam os hyperlinks como um tipo de “apoio” que se oferece ao destino do próprio hyperlink, ou seja, uma forma de expressar aprovação, suporte, admiração etc. Quantos de nós não fica feliz a cada vez que o nosso site é linkado espontaneamente em outro site como uma referência? Isto também em certos aspectos é sinal de prestígio. Uma das razões práticas que justifica esse prestígio é que a cada vez que o seu site é linkado, o seu hanking na web aumenta, por que naturalmente se consideranda que quanto mais links o seu site possui espalhado pelo mundo, mais relevante ele é em relação aqueles que possuem menos links. Este é um princípio básico de SEO. Agora e quando queremos demonstrar o sentimento oposto de desaprovação a uma referência na web? Qual seria a solução?

A especificação microformat vote-links propõe três novos valores para ser inserido no atributo rel. Eles são vote-for (voto a favor), vote-abstain (abster do voto) ou vote-against (voto contra) que significam respectivamente concordância, abstenção ou indiferença e desacordo.

Um hyperlink qualquer inserido no seu site que não utilize nenhum destes valores através do atributo “rel” julga-se implicitamente que o fato de estar linkando para um determinado endereço, sua relação seja de apoio, suporte e aprovação conforme eu descrevi acima a relação que os hyperlinks naturalmente suportam. Com exceção do rel=”nofollow” que na prática funciona como um rel=”vote-against”, ou seja, não se declara à favor e nem contra.
De modo geral as possibilidades de aplicação desta especificação microformat é enorme. Você pode criar user agents específicos que avaliam índices de aprovaçao ou desaprovação nos sites, gerar estatísticas e medir a populaidade sobre determinado assunto simplesmente implementando a especificação vote-links.

O Paolo Massa chegou até a criar uma extensão para o Firefox chamada SemanticLinks que mostra de uma forma visual através de ícones certas meta-informações inseridas nos links, como vote-links, rel-nofolow etc.

Referências:

• Microformats: rel vs rev
• W3C – Link types
• XFN
• XFN Creator
• rel-license
• rel-tag
• rel-nofollow
• rel-vote-links
• rel faq

Comentários: 20

Hyperlinks: o atributo target e algumas querelas morais.

Por: Henrique Pereira

Thursday 02 February 2006 às 20:33

Categoria: HTML / CSS / JavaScript

Este é o segundo texto tratando sobre os atributos de hyperlinks. Como eu disse no primeiro artigo, vou tratar de todos os atributos não só de forma técnica mas também conceitual. Para este segundo artigo eu quis dedicá-lo exclusivamente ao target blank para me expressar de forma mais clara e expansiva sobre algo que já gerou muita discussão: devemos ou não forçar o usuário a abrir links externos em outra janela do browser ou ele deve ter a liberdade de escolher? Eu não vou defender nenhum dos lados aqui, mas pretendo esclarecer detalhes que julgo não terem sido considerados anteriormente.

O atributo target

A função do atributo target () basicamente é indicar o nome de um frame na página onde um documento deve ser aberto. Outro controle que você pode ter com ele é se o hyperlink deve ser aberto na própria janela ou no próprio frame (target:”_self”) onde o próprio link se encontra ou se a URL do link deve ser aberta em outra janela (target=”_blank”) do seu browser. Essa é a única função do atributo target e é basicamente tudo o que precisar saber sobre ele. Veja o exemplo:

<a href="slide.html" target="_self">slide 1.</a>
<a href="slide.html" target="_blank">slide 2.</a>
<a href="slide2.html" target="dynamic">slide 3.</a>
<a href="www.exemplo.com.br" target="miolo">meu amigo.</a>
<a href="www.google.com”  target="miolo">Google</a>

Onde eu posso usar?

Independente deste atributo não ser aceito com o doctype de XHTML strict, somente no transitional e frameset, ele continua fazendo parte da recomendação da W3C. Muitas vezes alguns usuários pedantes que estão começando a aprender alguma coisa torcem o nariz para coisas que continuam sendo recomendação da W3C, como o HTML 4, sem saber muito do que estão falando. Então não se esqueça, o atributo target ainda é uma recomendação da W3C, independente das discussões morais sobre o assunto. Você só não deve usá-lo com o doctype strict de XHTML, mas com o doctype transitional e frameset você pode usar sem culpa. E antes que alguém levante esta questão, doctypes como o “transitional” e o “frameset” são recomendações. Sim, esta discução vai ficar pra outra oportunidade!

Meu conselho geralmente é que mesmo que você não vai escrever seu site em XHTML strict, faça seu código o mais compatível possível com o XHTML, ou seja, não use o atributo target. Na verdade este é o conselho da W3C. Mas ninguém “peca” em não fazer isso. Ou seja, seu site não vai deixar de ser “semântico” se usar o atributo target, e o Google ou qualquer outro mecanismo de busca não tem preconceito com doctypes, lembre-se disso também. Então não importa o doctype que você usa para os objetivos que te interessa, o que importa é ter um código semântico e sempre limpo.  A idéia de escrever seu código o mais compatível possível com o XHTML é para um futuro que não se pode mensurar quando será, onde tudo o que for compartilhado na web, seja compatível com XML. Mas para reforçar a idéia isso não te impede de usar este atributo se não estiver escrevendo em XHTML Strict.

Outra razão disso começar a cair em desuso é que este atributo, quando não é usado para abrir links em outras janelas, ele é usado  abrir links em frames. Hoje geralmente diversos desenvolvedores ainda utilizam frames ou iframes em determinados lugares para evitar dar refresh na página quando apenas um pequeno conteúdo precisar ser atualizado. Mas soluções que utilizam AJAX para citar um exemplo, conseguem fornecer soluções para isso em determinados contextos. Cada caso é um caso.

Forçando a barra

Mas se você quer forçar com que os links externos no seu site (ou mesmo os internos quando necessário) sejam abertos em outras janelas em um site que tem o doctype de XHTML Strict, eu já escrevi sobre uma solução em JavaScript que faz isso. O Walmar discute em um texto muito interessante aconselhando a não obrigar o usuário a abrir um link em uma nova janela. As as discussões sobre isso são longas. Eu eu não vou dar continuidade nelas. Mas eu defendo a idéia em que haverá contextos em que isso será necessário.

Não confunda comportamento com semântica.

Dezenas de leitores me escreveram e outros comentaram se seria “semântico” em um código escrito em XHTML Strict utilizar um script que o força links serem abertos em outras janelas, considerando que a W3C baniu o atributo target do doctype strict. A questão é todos levantaram essa idéia confundiram “comportamento” com “semântica”. Se você misturar os conceitos, você deve banir a palavra AJAX do seu vocabulário. Por isso não confunda. O fato de utilizar JavaScript para fazer qualquer coisa, seja ela idealizada ou não pela W3C, seja simulando um atributo como o target blank que foi banido no XHTML Strict, ou qualquer outra coisa, não torna seu código nem mais e nem menos semântico. Você só deve se preocupar para que este script não seja obstrusivo. Isso é uma questão de funcionalidade e nada mais. Comportamento e semântica são completamente distintos. Uma coisa não tem nenhuma relação com a outra.

O estudo referenciado pelo Walmar tem todo o sentido e tem seu espaço. Mas não se deve pensar que nunca será necessário simular este comportamento de forçar links a abrir em outra janela mesmo em um mundo digital todo escrito em XHTML Strict. Isso é tão absurdo quanto confundir “comportamento” com “semântica”.

Vá e não peques mais

O que a W3C vem fazendo pensando no futuro é estimular a modularidade, que facilita a vida de todos. Observe o advento do CSS por exemplo, onde tudo que estiver relacionado com apresentação de um site deve estar dentro de uma folha de estilos externa e não mais no código fonte. Depois que o CSS estava relativamente implementado pelos browsers a W3C excluiu a tag <font> do HTML. Ou seja, não significa que você não deve escolher uma fonte para por no seu site, significa que você não deve mais escolhê-la de dentro do código HTML, e sim dentro de uma folha de estilos. A W3C baniu também a tag <i> (itálico). Significa que nunca mais você deve usar qualquer tipo de texto em itálico no seu site porque isso não seria semãntico? Claro que não, agora você deve fazê-lo por CSS. A W3C baniu o atributo target. Significa que agora você nunca mais deve ter controle sobre onde um link deve abrir porque isso seria imoral? Claro que não, só que agora você deve fazer por JavaScript ou qualquer outra coisa que não seja no código fonte e que não seja usando target=”_blank”. Entendeu a lógica? Você não precisa limitar os comportamentos que podem ser agregados ao seu site, só porque não existe uma tag que faça isso ou aquilo automaticamente.

Dependendo do público, forçar com que links sejam abertos em outras janelas será necessário. Pode acreditar nisso. Só quem trabalha em uma agência web onde você constrõe web sites e sistemas web para todos os tipos de usuários sabe disso. A questão é saber usar. Eu pessoalmente evito o máximo que posso, mas haverá circusntãncias em que será preciso trabalhar com este comportamento. Semanas atrás eu bani deste site a solução em JavaScript que forçava os links externos a abrirem em outra janela. A razão disso? Eu simplesmente cansei. Eu acho que o perfil do meu público conhece muito bem o browser que usa e sabe escolher quando quer ou não sair daqui. Não é pelo fato de forçar você quando clicar em link e manter esta janela em que lê este texto aberto, que vai te fazer gostar mais ou menos do meu site, muito menos te ajudar a ficar por aqui mais um pouco. Cabe a você estudar (e não eu) e tentar diagnosticar quando este “comportamento” de abrir links externos em outra janela deverá ser usado. Existem regras semânticas e não regras para comportamentos. Só não confundam isso.

Comentários: 23

Hyperlinks

Por: Henrique Pereira

Tuesday 31 January 2006 às 21:10

Categoria: HTML / CSS / JavaScript

Introdução

As vezes pensamos que determinado assunto já foi esgotado até a última gota. Um desses assuntos até que poderia ser sobre hyperlinks. Não é possível viver sem eles na web. Muitas pessoas ainda não sabem usá-los com eficiência, as vezes por estarem fadados a fazer toda a codificação em programas wysiwyg ou então por falta de conhecimento. Uma das formas mais geniais de navegação na internet anda deficiente e muito.

Com este texto eu espero atingir usuários iniciantes e avançados. Se você não sabe quase nada sobre o assunto, espero que encontre aqui tudo o mais digerido possível. Se você já sabe muito, espero que algumas relações e discussões que eu trarei aqui talvez te ajude a se lembrar de uma coisa ou outra, discutindo não só o lado técnico mas também o lado conceitual. Boa parte da eficiência da utilização de um código semântico, nem sempre está relacionado ao conhecimento somente técnico. Entender a “lógica” é a base para uma aplicação técnica perfeita, e não o contrário. Se você está estudando web standards, aprender a usar bem hyperlinks é o caminho para o cálice sagrado. Vamos ver todos os padrões  e recomendações da W3C existentes para os hyperlinks, seus atributos, valores e em contextos de acessibilidade e técnicas de otimização de mecanismos de busca (SEO). Como este assunto é muito extenso e meu documento acabou ficando com mais de 10 páginas, resolvi dividir o assunto em alguns capítulos bem menores, mas melhores dissecados.

Dissecando

A principal referência normativa que você pode se basear para estudar hyperlinks nos documentos da W3C continua sendo a do HTML 4.01. Basicamente nada mudou deste então. Lá você encontra tudo o que precisa dissecado ponto a ponto em uma linguagem mais técnica mas completa sobre o assunto. No início quando estamos aprendendo web standards, é comum ter certo medo das documentações da W3C. Parecem técnicas demais e ou fazem referências demais. Mas beba sempre da fonte. Se dedique a ler estas documentações e com o tempo, você aprende todo o vocabulário que vai te fazer compreender aqueles textos mais facilmente. Este texto pretende ser mais abrangente, conceitual, técnico e informativo o quanto for possível. Sem exageros. Atributos que cairam em desuso não serão explorados aqui.

Âncoras

As âncoras representam uma forma de fazer referência a um trecho específico dentro de um documento. Observe os “links permanente” de cada comentário inserido pelos leitores neste site. Cada comentário possuiu um número em ordem crescente e uma âncora individual que não se repete no site. Através dele, você pode citar apenas trechos específicos de um documento ou comentário em um site. São as âncoras que me permite ficar citando trechos específicos da documentação da W3C. Elas são compostas de basicamente duas partes distintas, o link que chama a âncora e a âncora propriamente dita.

Ancora: <a name="exemplo" id="exemplo"></a>

A âncora é formada pelos atributos “name”

e ou “id” que podem ser inseridos juntos dentro da tag a. Além dos dois atributos terem o mesmo nome, não podem existir na mesma página elementos que tenham o mesmo nome ou id. Eles devem ser únicos na página e tanto o name quanto o id devem possuir o mesmo nome. A razão de colocar ambos os atributos é a compatibilidade com browsers antigos. Por isso comumente sempre se utiliza o name e id juntos. Se você não está muito preocupado com browsers antigo, basta apenas atribuir um id ou um name (geralmente a preferência é pelo id).

Link: <a href="#exemplo">Veja o Exemplo</a>

O link que faz referência a âncora, deve trazer o caracter “sharp” ou “sustenido ( # ) seguido do nome da âncora como no exemplo acima. Agora, se a âncora estiver em outra página, por exemplo, será preciso colocar a URL completa do documento a ser linkado seguido de sustenido mais o nome da âncora, como no exemplo abaixo:

<a  href=”http://www.revolucao.etc.br/archives/microformats/#comment-193”>
  	Comentário do Henrique no artigo Microformats
</a>

Usar âncoras é uma forma muito inteligênte de permitir com que apenas partes de um documento ou artigo, ou o que for que você esteja compartilhando na web, sejam referências dentro do próprio documento ou fora dele. Artigos longos, que tratam de partes específicas e que se encontra dentro de um mesmo documento, sugere que você utilize âncoras, bem como comentários em blogs etc.

Hyperlinks

O mais importante sobre o uso de hyperlinks, através do elemento <a>, é a relação que ele tem com os atributos que podem ser inseridos. Um hyperlink elegante e semântico com certeza será a combinação de alguns atributos colocados no lugar correto e na hora certa. E é basicamente sobre a listagem abaixo que os próximos artigos vão tratar. Os atributos são:

• id, class (document-wide identifiers)
• lang (language information), dir (text direction)
• title (element title)
• style (inline style information )
• shape and coords (image maps)
• onfocus, onblur, onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup (intrinsic events )
• target (target frame information)
• tabindex (tabbing navigation)
• accesskey (access keys)
• href, hreflang, type, rel, rev (links and anchors)

Atributo id e class

Há varias razões pelas quais você pode inserir ids em um link específico ou em qualquer outro elemento de XHTML. Você pode querer manipulá-lo por JavaScript, alterar um elemento com um id específico dinâmicamente por programação e até mesmo estilizar ou posicionar um elemento de forma precisa e específica. Lembre-se somente que um id é um identificador (id = identificador) único que nunca deve se repetir na mesma página e que cada elemento ou tag do XHTML só pode ter um único id. Essas são as regras.

Além de ser um identificador, o id possui as mesmas características que o atributo class. A diferença é que apenas o “id” serve como identificador e não o class. Uma característica interessante do “id”, é que ele também serve para propósitos gerais processados por user agents.

Várias especificações Microformats utilizam nomes de classes padronizados, e se tornaram um tipo de design pattern, criando  semântica onde antes não existia. Já que estes atributos nos permite fornecer valores que podem ser utilizados com propósitos gerais, inclusive com propósito semântico, os microformats encontrou nesta “brecha” o DNA necessário para se tornar um “padrão”.  Este assunto, você pode ler mais detalhadamente no meu texto “microformats: o mundo de significado do atributo class.” Lá você você tem o restante das informações relacionadas com estes atributos.

Comentários: 12