Google Page Speed - Dê mais velocidade as suas páginas

Google Page Speed  TM

O Google está com um produto experimental chamado Page Speed, 

Ferramenta para Blog: APTURE

Bom este post tem como fundamento explicar a inclusão de um aplicativo que irá lhe auxiliar na pesquisa de itens ou termos que possam ter duvidas, para isso você precisa selecionar parte do texto, ai irá aparecer uma imagem "LEARN MORE".

Coloque o mouse em cima desta imagem e você verá que uma janela será aberta, contendo informações sobre o texto que selecionou, é pratico pois você não precisará abrir uma nova janela e/ou aba para pesquisar o termo.

Ele irá disponibilizar um codigo para que você insira em seu site ou blog, como este aqui :)

Gostou?

Então vá ao site da Apture e faça o seu também.

Efeito rotativo em Javascript

Recentemente criei esta rotina, bem simples, envolve um pouco de CSS, HTML e JavaScript, nada muito complicado.

Fica ae para que possam utilizar.

Qualquer sugestão, comente.

01
<style type="text/css">

02
#destaques {border: 1px solid #006600; width: 333px; height: 212px;}

03
#destaques a{ text-decoration: none;}

04
#destaques a:hover{ text-decoration: underline;}

05
#destaques .bg { background-color: #E7F0BB; border-bottom: 1px solid #D7E58D; float: left; width: 100%;}

06
#destaques .foco{ text-decoration: none; background-color: #82AE01; color: #fff;}

07
#destaques img { float: left; width: 333px; height: 123px;}

08
#destaques .indice { float: left; width: 99%; height: 34px;}

09
#destaques .indice ul li{ margin: 0px; border: 1px solid #000; display: inline; height: 29px; width: 29px; }

10
#destaques .indice ul li { color: #FFF;}

11
#destaques .normal a{ text-decoration: none; color: #000;}

12
#destaques .olho { color: #848486; float: left; margin-left: 7px; padding-bottom: 2px; width: 100%; }

13
#destaques .titulo { color: #82AE01; float: left; font-weight: bold; margin: 3px; padding: 2px; width: 100%; }

14
</style>

15
<div id="destaques">

16
<div id="n1" style="display:none">

17
<a href="">

18
<img src="x" name="rotativo" border="0"/>

19
<span class="bg">

20
<span class="titulo">I.MATERIA...</span>

21
<span class="olho">Texto..</span>

22
</span>

23
</a>

24
</div>

25
<div id="n2" style="display:none">

26
<a href="">

27
<img src="x" name="rotativo" border="0"/>

28
<span class="bg">

29
<span class="titulo">II.MATERIA ...</span>

30
<span class="olho">Texto ..</span>

31
</span>

32
</a>

33
</div>

34
<div id="n3" style="display:none">

35
<a href="">

36
<img src="x" name="rotativo" border="0"/>

37
<span class="bg">

38
<span class="titulo">III. Materia.</span>

39
<span class="olho">Texto ..</span>

40
</span>

41
</a>

42
</div>

43
<div id="n4" style="display:none">

44
<a href="">

45
<img src="x" name="rotativo" border="0"/>

46
<span class="bg">

47
<span class="titulo">IV. Materia...</span>

48
<span class="olho">Texto ..</span>

49
</span>

50
</a>

51
</div>

52
<span class="indice">

53
<ul>

54
<li>&gt;</li>

55
<li id="d1"><a href="javascript:main(1,0)">1</a></li>

56
<li id="d2"><a href="javascript:main(2,0)">2</a></li>

57
<li id="d3"><a href="javascript:main(3,0)">3</a></li>

58
<li id="d4"><a href="javascript:main(4,0)">4</a></li>

59
</ul>

60
</span>

61
</div>

62

63
<script language="JavaScript">

64
var max = 4; // Total de noticias

65
var t = 5; // Sera convertido em Segundos pelo JS

66
var disp;

67
var timer;

68
function main(x,y)

69
{

70
disp = document.getElementById("n"+x).style;

71
if(disp.display=="none"){disp = "block";}

72
for(i=1;i<=max;i++)

73
{

74
if(i==x){

75
document.getElementById("n"+i).style.display="block";

76
document.getElementById("d"+i).className = "foco"; }

77
else{

78
document.getElementById("n"+i ).style.display="none";

79
document.getElementById("d"+i).className = "normal"; }

80
}

81
if(y==0){ clearTimeout(timer); }

82
if(x==max){x=1}else{x=x+1;}

83
next(x,t)

84
}

85
function next(ix,sec) { timer=setTimeout("main("+ ix +","+ sec +")",sec * 1000);}

86
main(1); // Incluir uma função em Javascript para o Onload da página

87
</script>

VirtuaStore - Loja virtual

Acredito que a maioria conheça a VirtuaStore, no inicio esta loja tinha apenas uma frente de trabalho que era a venda de Lojas Virtuais completas pelo próprio site.

Porém com o tempo o até então sócio em conjunto com o Daniel, criaram um fórum na própria Virtua Store, dai surgiu a idéia de fazerem uma versão com menos recursos e abrir para a internet, foi a que inicio a VirtuaStoreOpen, porque Open?

De OpenSource (Código aberto), para que todos que podem baixem, melhorem e contribuam com a evolução deste aplicativo que ajuda muitas pessoas na internet.

Fica a dica, entrem para o grupo.

Abs,

Canal aberto

Gostaria de deixar aberto este canal para que sugiram tópicos para que eu possa localizar e propriciar soluções para meus leitores.

O contato pode ser feito pelos comentários, prefiro não abrir para receber emails pois não conseguirei responder a todos.

Fica ae mais um canal aberto para que troquemos informações.

Abs e até apróxima

Mais um pouco de ajax

Outro site que sempre procuro novidades com o uso de Jquery é o AjaxRain, este site contém sempre novos exemplos e diversos aplicativos muitos deles gratuitos.

Ajax

Sempre navegando e pegando alguns links de densevolvimento, games entre outros, meus favoritos vão virando uma zona.

Desta forma vou recomendar aos amigos que gostam de ver coisas novas o site MiniAjax existem várias bibliotecas de ajax e muita coisa legal com o famoso JQuery.

Fica ai mais uma dica, ao longo da semana vou disponibilizando mais links.