Barra lateral do blog, jQuery, HTML5 e banners

Estou fazendo aos poucos alterações no blog, melhor eu ir aos poucos doque ficar planejando uma grande reformulação.

De inicio a barra lateral agora vai contar com widgets retráteis, isto permite ao internauta mais observador retrair os mesmos ao invés de ficar dando scrolls intermináveis.

Também fiz algumas magicas com a jQuery, mudando a forma como o TITLE é usado, ao invés da caixinha de dia clássica agora aparece uma caixa de informação parecida com a que será usada dentro do jogo. Dessa forma pretendo dar uma pré imersão ao visitante.

Esse é o video dela em desenvolvimento (já deve estar funcionando agora).



Como dá pra ver o clássico menu de links lateral também esta em reformulação, com 3 seções distintas.


Banners grandes: Um slideshow onde soquei gifs animadas sem dó, claro a média de tamanho é de 50kb. O código que gera a transição eu deixei la no GIST para quem tiver interesse.

Banners normais: Uma série de lugares legais onde o leitor pode ter idéias e pirações.

Lista de links: Links de texto normais.

A feitura foi mais complicada do que a Javascript, pois esbarrei de novo com dois problemas da HML5:
1. Falta de maturidade - Originalmente o sidebar do blog era para ser feito com a tag ASIDE, no entanto isso mudou esses dias deixando o código que eu tinha feito no começo do ano obsoleto! #RAIVA
2. Ambiguidade das tags - notoriamente o uso de DIV ainda não é excluído e serve para 98% dos casos, as tags novas tem ainda uma diversidade de interpretação muito grande. Por exemplo, eu poderia fazer o esse menu com 1 NAV e 3 DIVs ou 1 NAV e 3 SECTION! Apesar de section não agregar valor ao uso, ele agrega valor na hora de pensar noque realmente a mini-seção é! #RAIVA

Tooltip
O sistema de tooltip novo é feito usando jQuery e tem compatibilidade com HTML4, já que a LibRocket é baseada em HTML4.

Pensei em usar o objeto CANVAS mas ai eu fiz uma conta:
média da distância x entre alvo e tooltip ~ 500px (veses) possível distancia y máxima 14000px
O resultado foi algo em torno de 30MB de memória para desenhar uma linha... pula!

Fiz a linha como uma imagem de 3 pixels de altura por 1 de largura. E eu manipulo a largura e angulo apartir do CSS. Tudo com base em contas que agente costuma encontrar facilmente em ambientes de game.

Há um problema ainda com o Internet Explorer pois ele não aceita uma propriedade CSS que deixa ele imperceptivel ao mouse. Mas tem técnicas para burlar isso que irei estudar com calma outra hora.

O público do IE não é despresivel como eu imaginava.

Quase 9% e se valores como 2% a 5% já são o suficiente para não serem ignorados (a exemplo usuários deficientes se encontram nessa faixa).

Código do slideshow: