Dia 28 de Novembro último foi comemorado o Segundo Beanie Day: um evento informal para promover os webstandards e acessibilidade.
Foi criado um grupo no flickr que reúne fotos e afins das pessoas que participaram desse movimento que, além de ter um cunho educativo, também tem seu lado de diversão.
Os mais divertidos, como sempre, são os desenhos ou vetorizações
Passe lá e quem sabe ano que vêm você não manda a sua foto! 🙂
Já ouviu falar em image flickering?
Até semana passada, eu não. Mas certamente, assim como eu, você já viu acontecer: links com imagem de fundo que, quando você passa o mouse por cima, perdem o background. No lixo do IE6.
Eu não sabia que tinha um nome bonito.
Por exemplo, essa classe CSS aqui daria problema:
.someClassName {
background:#AABBCC url(someBackGroundImage.gif) repeat-x;
}
Pelo que entendi do assunto, essa é uma questão relacionada a como o browser (não que o IE6 seja um browser, mas vamos lá…) faz cache das imagens.
Existem várias soluções para esse problema – sim, é um problema ao meu ver, e não uma propriedade do browser. De uma googlada e veja que há várias técnicas.
Uma delas seria não usar imagens de background em links. Outra, colocar uma div (ou algum outro elemento) em volta do link e usar background nela.
FAIL para ambos.
Mudar a sua marcação html por causa do IE6 não faz sentido; é um browser antigo, que não segue padrão algum, que vem caindo em desuso.
Existe um fix para isso que funciona bem em qualquer IE6 instalado numa Windows com qualquer Service Pack.
Dentro do head do seu html, coloque o javascript:
<script type="text/javascript">
try {
document.execCommand("BackgroundImageCache", false, true);
} catch(err) {}
</script>
Esse script tenta fazer com que o browser use as imagens salvas no cache da máquina.
Funciona belezinha.
Agora, e quem usa um IE6 sem Service Pack? O choro é livre.
E atualize seu browser, por favor!
Quanto mais estudo mais eu gosto de jQuery, e as possibilidades de uso aumentam a cada leitura. 🙂
Resolvi aplicar jQuery na base (framework, huh?) que utilizo para as intranets de meus clientes e isso foi responsável por grande parte do meu aprendizado, estou aplicando também na nova versão do And After (resultado do meu TCC sobre usabilidade: análise heurística).
Desenvolvi os wireframes navegáveis do And After para fazer testes de navegação mais próximos do real possível e para isso utilizei menu accordion.
Não gosto de utilizar *muitos* plugins por três motivos principais:
Porém não sejamos xiita, se existe algo pronto, bom, e que não irá atrapalhar o carregamento ou o funcionamento de nada, porque não utilizar? 🙂
Pouco código, simples e leve.
$(document).ready(function(){
$(´[rel="cont_autor"]:not(:first)´).hide();
$(´[rel="nav_autor"]´).click(function(){
$(´[rel="cont_autor"]:visible´).slideUp("normal");
$(this).next().slideDown("normal");
return false;
});
});
A primeira linha apenas "dá start" no código, para ele ser carregado quando o documento estiver pronto.
Depois procuro os conteúdos dentro do meu menu (usando o atributo rel="cont_autor"), como vocês podem ver no html ali em baixo. Todos os conteúdos são escondidos, menos o primeiro, que por padrão estará sempre aberto no meu menu.
Quando clicar no item com atributo rel="nav_autor" então escondo todos os conteúdos visíveis utilizando o slideUp e pego o elemento depoisdo navegador (o conteúdo que está logo abaixo) e mostro ele utilizando o slideDown.
Últimos artigos do autor
Nesse caso usei h4 para definir os títulos e linhas de navegação, o correto é utilizar definition list (dl), mas meu objetivo aqui era apenas mostrar o funcionamento do menu independente da estruturação do html.
Simples e funcional, sem carregar nada desnecessário. 🙂
dicas
Como vocês já devem ter percebido, tenho feito alguns posts aqui no O Desenvolvedor sobre o WordPress. Tenho usado ele em algumas soluções para trabalhos freelas onde consigo adaptá-lo para ser um CMS de rápida instalação, fácil manutenção e barata hospedagem e disponibilidade e é relativamente flexível.
Uma das coisas que eu senti falta em todos os temas que baixei, era a presença das meta-tags description e keywords. Achei estranho, mas entendi o porque: os elementos básicos de postagem do WP, post e page, não possuem esses campos. Fiquei pensando em como fazer um workaround – ou como um colega do trabalho fala, um contorno técnico.
Mas, uma coisa que eu aprendi depois de deixar a progração desktop em C e partir para web, é que reinventar a roda toda vez não é preciso. E, logicamente, deveria haver algum plugin para isso.
Voi-lá. Eis que achei o Another WordPress Meta Plugin.
Estou usando ele em dois projetos pessoais: meu site próprio e no Eu Comi! (esse surgiu numa idéia/bate-papo com o @gserrano). Já notei uma certa diferença na indexação das páginas e afins.
*quer saber mais sobre a importância das meta-tags? No And After há uma série de posts a respeito:
Voltando ao plugin, ele segue o padrão de instalação de todos outros do WP: faça download, descompacte na pasta plugins, ative pela interface de admin e faça uma alteração no arquivo de cabeçalho do seu tema. Tudo bem explicadinho no how-to do site do projeto.
Tendo isso sendo feito, toda vez que você criar um post ou page, verá dois campos logo abaixo do editor de conteúdo: um chamado keywords, e o outro description. Sem segredos!