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:

Fazendo upgrade

Em nome de Thundera estamos em reformas, não reparem na zona.
Esperamos estar com um visual novo em poucos dias, ou antes do próximo FDS. Ou sigam nossos outros feeds