Arquivo da categoria: Cotidiano

Image-replacement: use com cuidado

Na lista de discussão webstandards-br rolou há pouco uma discussão sobre o uso de image-replacement e o posicionamento do Google quanto a isso. Leia com mais detalhes o que o Google diz sobre image-replacement. Atentem para o seguinte parágrafo:

Se percebermos que o seu site tem texto e links ocultos com propósito enganoso, ele pode ser removido do índice do Google e não não vai mais aparecer nas páginas de resultados de pesquisa. Ao verificar seu site para ver se ele tem texto e links ocultos, procure por elementos que não sejam visíveis aos usuários da página. Existem textos ou links presentes exclusivamente para mecanismos de pesquisa e não para visitantes?

Isso mesmo. O Google recomenda não usar image-replacement nem esconder conteúdo textual de seus visitantes. Isso inclui aqueles textos descritivos que a gente costuma deixar no HTML só para usuários que usam tecnologias assistivas, como os links “pular para o conteúdo”, “ir para o menu principal” e etc. É bem verdade que há controvérsias quanto à rigorosidade do Google quanto isso. Uns dizem que o que não pode é exagerar no tamanho do texto escondido, que até 75 caracteres não há problema. O parágrafo acima também dá margens para um possível “bom senso” do googlebot. O certo é que é melhor prevenir do que remediar, já dizia o velho deitado.

Mas a questão principal do tópico era o uso de image-replacement no título do site, a famosa técnica de colocar o título do site em um link dentro de um h1 e, via CSS, ocultar o texto, substituindo-o pelo logotipo do site. Essa técnica é bastante usada por um sem-número de sites (inclusive de grandes evangelizadores) por aí, como o A List Apart, o Mezzoblue de Dave Shea e, só pra citar alguns dentro de nossa blogosfera: Maujor, Tableless, BrunoTorres.net e… o meu (tá, mas o meu é um tema pronto do WordPress :).

Mas qual o problema?

Se essa técnica é tão utilizada por blogs tão preocupados com os padrões e bem posicionados no Google, o que pode haver de errado com ela? Simples: A semântica. Vejamos o que o W3C nos diz sobre as tags hn (grifo meu):

A heading element briefly describes the topic of the section it introduces. Heading information may be used by user agents, for example, to construct a table of contents for a document automatically.

Como podemos ver, as tags hn são usadas para descrever seções e sub-seções de um site, e não o título do site ou o nome da empresa. Um exemplo de bom uso das tags hn é o seguinte:


<div class="secao">
    <h1>Título da seção</h1>
        <h2>Título da sub-seção</h2>
            <p>Conteúdo da sub-seção</p>

        <h2>Título da sub-seção</h2>
            <p>Conteúdo da sub-seção</p>
</div>

Como bem disse no decorrer do tópico o Israel Cefrin, se pensarmos que o HTML foi inventado para fins acadêmicos, é fácil entender o uso dos cabeçalhos, comparando-os com a estrutura básica de uma monografia, ou um trabalho acadêmico.

Mas e o título do site, como fica?

Oras, a tag title serve pra quê? Vejamos:

Authors should use the title element to identify the contents of a document. Since users often consult documents out of context, authors should provide context-rich titles. Thus, instead of a title such as “Introduction”, which doesn’t provide much contextual background, authors should supply a title such as “Introduction to Medieval Bee-Keeping” instead.

É uma boa prática, inclusive de SEO, colocar na tag title o nome do site e o contexto atual da página. Um bom exemplo do uso da tag title é esta exata página que voce está lendo. Olhe o título dela: Image-replacement: use com cuidado « Blog do Jader. Bonito, não? Isso me diz que eu estou, dentro do Blog do Jader, lendo o artigo Image-replacement: use com cuidado.

Ok, o título do site é com a tag title, mas e o logotipo?

O logotipo do site é uma imagem com relevância de conteúdo e não de decoração, certo? Logo, deve ser usada a tag img, com seu atributo alt devidamente preenchido. Isso garante que tanto mecanismos de busca quanto usuários, independentemente do dispositivo utilizado para acessar o seu site, tenham acesso ao conteúdo do logotipo.

Não faz sentido colocar essa imagem dentro de um h1 pois, como já vimos, as tags hn são para títulos de seções do site. Para que a imagem do logotipo tenha um identificador único, pra que seja mais fácil posicioná-la com CSS, basta acrescentar um id à tag e pronto, você já tem tudo o que precisa pra fazer o que quiser com ela.

Conclusões

Você pode estar se perguntando onde eu quero chegar com todo esse papo de semântica, SEO, estrutura de um documento, etc. A resposta é simples: a semântica é tudo e mesmo os gurus a deixam de lado às vezes. Boa parte das técnicas existentes que envolvem puramente HTML + CSS são baseadas na solução do problema e na validação do código. A semântica fica de lado e às vezes nem percebemos isso. Eu mesmo, antes desse tópico, nem pensava que essa prática tão comum pudesse estar tão errada semanticamente.

Faz parte do cotidiano de um desenvolvedor pesquisar novos meios de se resolver velhos problemas e, o que é mais importante, estar diposto a romper com velhos hábitos e se atualizar. O questionamento das ditas “verdades absolutas” é essencial para o crescimento não só no âmbito pessoal, mas também no profissional, e com isso nós temos sempre que estar lidando.

Anúncios

13 Comentários

Arquivado em Artigos, Cotidiano, Semântica, Tableless, Web Standards, XHTML

Sai Firefox, entra Flock

Há alguns dias saiu na Smashing Magazine um artigo sobre “browsers interessantes sobre os quais você nunca ouviu falar” e, posteriormente, o Pedro também falou sobre alguns deles.

O fato de eu descobrir que o Flock, um fork do Firefox, voltado à integração com as principais redes sociais, chegou em sua primeira versão estável, em conjunto com a minha insatisfação com o desempenho do Firefox me animou a testá-lo mais uma vez. Eu já havia testado o Flock antes, quando ele ainda estava em seus primeiros passos, mas na época não vi muita novidade e acabei não me interessando e desinstalando logo. Bem, as coisas mudaram.

Como disse, o Flock é bastante voltado para a integração com as redes sociais mais conhecidas, como Flickr, Del.icio.us, WordPress, Youtube, Facebook, entre outros. Existem recursos realmente facilitadores nele, como, por exemplo:

  • upload de fotos para o Flickr, direto do browser;
  • o Web Clipboard, uma espécie de área de transferência integrada ao browser;
  • gerenciador de contas e serviços (sem comentários);
  • interface para publicação de posts (na qual estou escrevendo este artigo), com editor bastante parecido com o usado pelo WordPress. Basta informar uma conta em algum serviço de blog conhecido, ou no seu próprio blog e começar a escrever seus posts;

Além disso, o Flock, como é baseado no Firefox, suporta todas (pelo menos das que testei) as extensões do Firefox, o que significa que você não precisa abrir mão de suas comodidades se quiser migrar do Firefox pro Flock.

Com o visual mais bonito, a mesma engine e uma integração fantástica com diversos serviços pela web, além de um desempenho melhor (meu Firefox chegava quase aos imperdoáveis 200MB de consumo) não tive que pensar duas vezes antes de mudar logo de browser. Estou confortável com o Flock e é nele que pretendo ficar, pelo menos até o lançamento “final” do Firefox 3. 🙂

Blogged with Flock

Tags: , , ,

9 Comentários

Arquivado em Artigos, Browsers, Cotidiano, Pessoal, Softwares

Diga “Oi” para o pingüim

Eu já venho namorando o Ubuntu há tempos. Desde o lançamento da penúltima versão (7.04 codinome Feisty Fawn) eu já venho tentando instalá-lo, porém, pela incompatibilidade do meu hardware (que era bem fraquinho) eu acabei desistindo por um tempo e me contentando com o Windows.

Acontece que eu comprei uma máquina nova, com hardware bem superior ao da máquina anterior e, além disso, uma nova versão do Ubuntu foi lançada exatamente na mesma semana que minha máquina nova chegou. Depois de ler em vários sites por aí e no próprio site do Ubuntu que a versão 7.10 (codinome Gutsy Gibbon) tinha um suporte melhor a diversos drivers não-suportados no Feisty, eu resolvi dar mais uma chance ao pingüim.

Meu Desktop Ubuntu Gutsy Gibbon

Baixei o .iso diretamente do site do Ubuntu um dia após o seu lançamento pois no dia do lançamento os servidores estavam congestionadíssimos e era quase impossível baixar o arquivo por lá. E a instalação foi tranqüila. Particionei o HD pelo Windows usando o PartitionMagic, dei o boot pelo CD do Gutsy, segui 7 passos super simples e pronto: com menos de 40 minutos, o Ubuntu estava instalado em minha máquina, sem necessitar de intervenção nenhuma durante a instalação. Reiniciei a máquina, tirei o CD da bandeja e dei “olá” ou admirável mundo novo.

O processo foi estupidamente simples. Ao contrário do que tinha acontecido com a tentativa de instalação do Feisty, não tive nenhum problema com hardware, nenhum sequer. Não precisei mexer em nada com relação a configurações de hardware, exceto pela instalação do driver de aceleração de vídeo da nVidia, pra poder ter todos aqueles efeitos mirabolantes na minha área de trabalho. Três cliques cuidaram disso pra mim.

Estou satisfeitíssimo com o Ubuntu, tanto pela performance quanto pela simplicidade de se fazer tudo. Você só precisa ir ao terminal se quiser, pra tudo o que você faria nele há uma aplicação gráfica que tome conta, mesmo que não esteja instalada por padrão no sistema. Enquanto isso, o Windows está lá na partição dele, pronto pra quando eu precisar de um Photoshop, Illustrator ou InDesign da vida (e só pra isso). 🙂

Ah! E aí vai a configuração da minha máquina nova:

  • ASUS P5LD2-X (som e rede integrados)
  • Intel Dual Core 1.6ghz
  • Memória 1Gb DDR2
  • nVidia geForce 7300GS 256/512Mb
  • Monitor Samsung LCD 17″ widescreen

11 Comentários

Arquivado em Artigos, Cotidiano, Linux, Pessoal

The Power Schmooze

The Power of Schmooze Award

Pois é, já há algum tempo eu fui indicado pelo Tiago Floriano para participar do meme The Power of Schmooze Award.

Esse meme consiste em indicar 5 boas referências de leitura, usualmente os 5 blogs que você deseja que haja itens novos cada vez que você abre a aba do Bloglines (ou Google Reader, se preferir). E aí vai minha lista:

6 Comentários

Arquivado em Blogosfera, Cotidiano, Memes

Designer

Que coisa linda. 🙂

Quero ser designer - Parte 01Quero ser designer - Parte 02

@ Rafael Apocalypse, que conheci na minha ida ao CodeShow, sobre o qual escrevo mais tarde, quando terminar de ler as centenas de feeds e e-mails. 😛

10 Comentários

Arquivado em Cotidiano, Design, Pessoal, Rapidinhas

Quem vai ao CodeShow?

[momento ‘help me’]
Alguém de vocês vai ao CodeShow?

Estou com uma expectativa muito boa com relação ao CodeShow, não só pelos assuntos que serão abordados no evento, mas também pelo fato de ser o primeiro evento que participo na área de internet. Acredito que será uma grande oportunidade para, além de adquirir mais conhecimento com quem sabe, conhecer melhor outras pessoas da área, fazer novos contatos, novas amizades.

Tudo bem, eu estou com inscrição paga e passagens compradas mas… preciso contar um segredinho pra vocês: nunca fui a São Paulo. 🙂 Moro em Ipatinga, interior de Minas. Por aqui não existe metrôs nem terminais rodoviários, nada além de uma estação ferroviária, uma rodoviária e um aeroporto modesto. Um bairro de São Paulo deve ser maior que Ipatinga.

Olhando bem o mapa de como chegar à Visie, não me parece complicado encontrar o lugar, pela proximidade ao metrô. Bom, pelo menos se eu soubesse como chegar ao metrô… rsrs. Um pingo de precaução não faz mal a ninguém e amigos servem pra essas coisas, não? 🙂

Se você vai ao CodeShow e pode me ajudar, sendo meu guia por lá, por favor mantenha contato comigo através do email jaderubini[at]gmail[dot]com. E se você vai ao CodeShow, mas também está meio sem rumo como eu, junte-se a mim, quem sabe a gente não consegue se perder virar juntos? ;P
[/momento ‘help me’]

11 Comentários

Arquivado em CodeShow, Comunidade, Cotidiano, Cursos, Pessoal

Colocando ordem na casa

A minha volta à blogosfera até que não foi nada mal. Olhando nas estatísticas tive um número de visitas razoável, considerando que até poucos dias atrás praticamente nem me lembrava que tinha um blog. Foram 34 visitantes únicos de domingo pra cá. Not bad… Sinceramente, achei que nem isso atingiria, devido ao tempo (e põe tempo nisso) que estava sem blogar. Bom, o que importa é que agora eu estou de volta e pretendo continuar postando material de qualidade com mais freqüência.

Mas, antes disso, eu gostaria de deixar claro pra vocês, meus leitores, que algumas mudanças ocorrerão por aqui e, mais do que nunca, gostaria de contar com a sua opinião pra que tanto eu quanto vocês saiamos ganhando nessa. 🙂

Mudanças no escopo do blog

Padrões web e desenvolvimento realmente me fascinam e eu adoro ler e escrever sobre isso. E foi esta a proposta do blog desde sua criação: postar artigos conceituais e práticos principalmente sobre XHTML e CSS. Está certo que eu já postei coisas pouco relacionadas com isso, e creio que tenha sido esse o meu erro, fugir do escopo. Mas eu gostaria de poder ir além. Sinto vontade de escrever sobre alguns assuntos diferentes e não o faço pois não sei até que ponto eu posso diversificar o conteúdo deste blog sem espantar os leitores. Entre os assuntos que gostaria de abordar estão:

  • Design em geral (conceitos, teoria e prática)
  • Usabilidade e a parte mais humana da internet
  • Publicidade (claro, focando em ações online)
  • Ferramentas de edição (principalmente Dreamweaver(!) e Photoshop)
  • e outros assuntos menos fáceis de categorizar

Como estou estudando (de novo, mas dessa vez pra valer) Python, é natural que apareça uma coisinha ou outra sobre Python e Django (framework escolhido até o momento pra programar em Python). Talvez apareça também algo relacionado a História da Arte e Semiótica, matérias que serão ministradas na faculdade neste semestre.

Ainda estou pensando na possibilidade de fazer podcasts e/ou videocasts nos moldes do roda&avisa: curtos e diretos. Mas ainda é só cogitação.

Maior integração com outros blogs

Quando eu comecei com o blog eu estava sempre tirando um tempo pra comentar os posts alheios. Com o tempo isso foi mudando e eu passei a ler os blogs somente pelo Bloglines (péssimo hábito), o que acabou me fazendo deixar de comentar.

Acredito que essa integração entre os blogueiros seja de suma importância pra toda a comunidade blogueira e até pros blogs individualmente. Trocar conhecimentos faz parte disso e é por isso que, desde sábado, quando voltei à blogosfera, estou voltando a ler os posts diretamente no blog (exceto quando estou no trabalho, pela falta de tempo mesmo) e a comentá-los sempre que tenho uma opinião que vá acrescentar algo. Além disso, estarei sempre enviando trackbacks a outros blogs que não estão na minha “rede” mas são relacionados com o assunto do post.

E finalmente… me libertar do WordPress

Acho que eu já cansei de falar sobre isso por aqui. Mas dessa vez vai! 🙂

A idéia é a seguinte: aproveitar meus estudos em Python e desenvolver eu mesmo o meu blog todo em Python/Django, incluindo aí o design, templates e, quem sabe, até o admin (o Django tem um admin que já vem “no gatilho” pra qualquer aplicação desenvolvida com ele, mas desenvolver a sua própria ferramenta é mais empolgante). E quem sabe, depois de tudo pronto, eu não libero a aplicação pra galera?

Claro, isso pode demorar um pouco muito, apesar da facilidade que estou tendo no aprendizado, mas é o único jeito dessa idéia de me libertar do WordPress engrenar.

E aí, o que acharam? Sugestões? Opiniões? Não gostou de algo? Não gostou de nada? Fala aí. 😉

5 Comentários

Arquivado em Blog, Comunidade, Cotidiano, Pessoal, Projetos