Klaus Paiva

Setas usando apenas CSS

Hoje eu estava lendo alguns feeds RSS quando acabei navegando até essa página aqui: https://developer.mozilla.org/En/Using_the_:target_selector

Nela é possível ver várias formas de utilização da pseudo-classe :target. Essa pseudo classe pode ser usada nos seus arquivos CSS quando um elemento é referenciado pela âncora lá na URL.

Ou seja, http://example.com/#isso_aqui_eh_a_ancora

Dessa forma, você pode obter alguns comportamentos dinâmicos utilizando apenas CSS. Comportamentos tipicamente feitos por JavasScript, como destacar uma foto ao clicar sobre sua imagem menor, podem ser feitos sem problemas utilizando-se esta técnica.

Ainda não ficou muito claro, né? Para facilitar as coisas, veja este exemplo funcional.

Experimente clicar nos links disponíveis abaixo da foto. Note que clicando em qualquer um deles a imagem é alterada. A "mágica"está lá no arquivo CSS:

/* esconde as imagens por padrão */
#imagens img {
	display: none;
}
#imagens #imagem-1:target,
#imagens #imagem-2:target,
#imagens #imagem-3:target,
#imagens #imagem-4:target,
#imagens #imagem-5:target,
#imagens #imagem-6:target {
	display: block;
}

Ou seja, o pseudo seletor :target só será ativado quando a âncora na URL casar com o elemento respectivo, tornando a imagem selecionada visível (e as demais invisíveis).

Em termos de compatibilidade, este exemplo foi testado e funciona em: Firefox 3.6, Chrome 5.0, Opera 10.60 e Safari 5.0.

E funciona no IE? Talvez... talvez no IE 9! (evil laugh here mwhaha!)

Já recebi vários e-mails através do formulário de contato deste blog me perguntando sobre cursos de web standards, HTML, CSS, Javascript e afins. Em termos de cursos disponíveis gratuitamente na web, eu sempre recomendei o conteúdo disponível no site W3Schools.

Porém, além desse curso, essa semana eu recebi um e-mail aqui no trabalho comentando sobre um curso oferecido pela Opera (sim, aquela do navegador Opera). Dei uma olhada geral sobre o conteúdo e parece ser bem interessante, além de abordar a maioria dos tópicos usados no dia-a-dia de quem trabalha e desenvolve interfaces web.

Sendo assim, se você está interessado num curso de desenvolvimento de front-end gratuito, esta é também uma excelente opção. Bons estudos!

Confesso que nunca passei tanto tempo na frente da TV como nos últimos meses. E não foi assistindo partidas de futebol, nem vendo seriados diversos. O motivo foi outro.

Recentemente tive a oportunidade de fazer um trabalho para uma mídia, digamos, alternativa. OK, após o anúncio da Google TV ela não é tão alternativa assim.

O maior impacto ao construir um site para ser utilizado em uma TV está na forma com que este site será usado. Enquanto que um usuário na frente do computador, geralmente, está focado nesta tarefa, o telespectador nem sempre está tão focado assim... A imagem abaixo ilustra bem isso:

Típico usuário interagindo com uma TV

Diante desse cenário, um site voltado para o uso em TVs deve possuir uma navegação com menos elementos atrativos, fontes maiores, etc... Tudo isso para reduzir a carga cognitiva que os usuários recebem ao navegar por esse site.

Agora que a devida introdução já foi feita, permita me mostrar algumas telas desse projeto:

Home geral

Vídeos

Notícias (textos)

Álbuns de fotos

Todo esse conteúdo está disponível para as TVs da linha Infinita da LG. (não, este não é um post publieditorial - aliás, quem dera fosse haha)

Neste mesmo projeto, algumas questões técnicas bem interessantes precisaram de soluções bem criativas. Mas isso é assunto pra um próximo texto.