Feliz 2011 a todos.Com os apertos de final de semestre e a chegada das "ferias" fiquei sem tempo de postar algo novo no blog, mas hoje ao acessar minha pagina no Orkut aceitei a solicitacao de amizade de um rapaz chamado Vagner que estuda na mesma universidade que eu, tem experiencia com desenvolvimento web e um blog muito interessante que eu desconhecia. No blog ele apresenta seu portfolio e alguns comentarios sobre estruturas de dados, programacao em C e jQuery. Vale a pena dar uma olhadinha e comentar.http://vluzrmos.wordpress.com/ Em dezembro de 2011 eu comecei a desenvolver uma ferramenta de validacao de acessibilidade usando como base o parser adaptado por Resig (Pure Javascript HTML Parser). Esse validador automatico foi construido como uma extensao para o navegador Google Chrome e fornece uma analise da pagina aberta de acordo as normas do Modelo de Acessibilidade de Governo Eletronico (e-MAG 3.0).Essa ferramenta e destinada a todos aqueles que produzem conteudo para a Web, visto que o e-MAG deve ser obrigatoriamente observado no desenvolvimento de sitios do Governo Brasileiro, financiados pelo Governo ou de interesse publico (Decreto 5296; Portaria no 3, de 7 de Maio de 2007). Apesar de nao possuir a oficialidade de ferramentas como o ASES e o daSilva essa extensao pode ser utilizada para uma varredura rapida do codigo com o intuito de identificar os principais problemas que afetam a acessibildiade da pagina. Essa caracteristica me levou a batizar a ferramenta como eScanner (Electronic Scanner), fazendo mencao a varredura feita pelo validador e ao Departamento de Governo Eletronico, responsavel pelo desenvolvimento e aplicacao do e-MAG.O eScanner esta disponivel na Web Chrome Store para download gratuito. A ferramenta apresenta a descricao dos erros e alertas encontrados na pagina, suas ocorrencias, a visualizacao do codigo-fonte, informacoes sobre o Departamento de Governo Eletronico, o e-MAG, tutoriais e uma area de ajuda. Algumas melhorias ja tem sido planejadas e aplicadas para proximas versoes da extensao. Pretende-se tambem criar uma versao para o navegador Firefox. O efeito rollover e criado no CSS mudando o background de um elemento, geralmente um botao ou item de um menu, ao passar o cursor do mouse sobre ele. O efeito pode nao ficar muito legal usando imagens quando elas demoram de carregar. O botao some quando o cursor esta sobre ele e so reaparece quando a segunda imagem carrega. Para evitar esse problema basta juntar as imagens em uma so para que todas as imagens utilizadas sejam carregadas de uma so vez, como nesse exemplo:Ao inves de utilizar duas imagens, uma para o link normal e outra para quando o cursor do mouse estiver sobre o link, utilizamos uma so imagem e mostramos so a parte que interessa. So para testar, podemos criar uma div com o tamanho exato de apenas uma imagem e setar a imagem como seu background:<html> <head> <style type="text/css"> div { height:48px; width:48px; background:url(twitter.png); } </style> </head> <body> <div></div> </body> </html>Para criar o efeito rollover basta mover a imagem usando o pseudo-elemento :hover e a propriedade background-position para alterar a posicao da imagem em relacao ao eixo x:... <head>