Woopra
Dec 26, 2008 Sites
Para quem ainda não conhece, o Woopra é um programa que permite controlar e analisar estatísticas dos visitantes do teu site.
Aqui no PT Ajax temos usado o programa já a algum tempo, e sem duvida que a partir de agora usamos esta aplicação em novos sites.
Um dos programas mais conhecidos deste género é o famoso Google Analytics, outro bastante famoso é o Statcounter.
Tanto o Google Analytics e o Statcounter para funcionarem basta adicionar umas linhas de código em Javascript no seu site, e a partir desse momento começam a recolher informações sobre o seus visitantes.
O Woopra não é diferente nesse aspecto. Mas uma das coisas que distingue o Woopra da competição é o factor de para visualizares as tuas estatísticas precisas de um programa para o teu computador.
Ao contrario do Google Analytics e o Statcounter o Woopra forneçe uma aplicação em que podes correr no teu computador.
Como podemos ver assim que abrimos a aplicação no lado esquerdo é onde fazemos o login, e no lado direito temos as ultimas noticias do Woopra que ainda se encontra em fase Beta. No lado mais a direita temos publicidade, como de momento a aplicação é de borla, acredito que seja a maneira que o Woopra pensa em fazer algum dinheiro.
Assim que fazemos o login podemos ver alguma diferenças, para começar aparecem no lado direito todos os sites que temos registados, de momento tenho três sites, mas só em dois e que o woopra esta instalado.
Temos a informação das estatísticas do dia como o total das paginas vistas e o numero de visitantes.
Podes reparar que temos em cima uma navegação por tabs para cada site, e também o numero de visitantes de cada site neste preciso momento.
Assim que escolhemos um site podemos ver mais informação ao detalhe, numero de visitas, que paginas são as mais vistas, que tipo de palavras de procura foram usadas para encontrar o nosso site, de onde vem a maioria dos nossos visitantes e muito mais.
Um dos pontos que gosto bastante do Woopra é a apresentação da informação, esta mesmo bem organizado e bastante atractivo.
Outro dois pontos que me fazem gostar do Woopra é a barra em baixo, faz lembrar os programas da bolsa. Mas a barra de baixo esta em constante movimento oferecendo a ultima analisa do teu site.
Outro é a possibilidade de podermos ver em tempo real informação sobre os visitantes do nosso site.
Conclusão
O woopra oferece sem duvida uma forte alternativa a programas como o Google Analytics e o Statcounter ( e por muitos mais que existem ). Ainda está em Beta e mesmo assim já me dou por feliz com o programa.
De momento para poderes usar o programa tens que te registar e esperares que te aceitem os teu sites, mas até hoje ainda não soube de nenhum site que tenha sido rejeitado.
Vale apena, tentem o Woopra e digam o que acham.
Scriptaculous – Efeitos Aparecer e Desaparecer
Dec 14, 2008 Tutoriais
Durante esta semana o PT Ajax vai apresentar uma serie de artigos sobre os efeitos que podem ser criados usando duas frameworks bastante conhecidas prototype e o script.aculo.us.
Para começar, hoje apresentamos o efeito de aparecer e desaparecer. Basicamente este efeito consiste em fazer um elemento html aparecer ou desaparecer da nossa pagina.
Antes de mais para esta serie de artigos vamos precisar de duas frameworks em que já falamos várias vezes aqui no PT Ajax o prototype e o scriptaculous.
Depois de terem feito o download de ambas as frameworks gravem os ficheiros numa nova directoria onde se encontra o vosso projecto por exemplo “javascript” ou “js” mas podem usar qualquer nome.
Inicio
Vamos começar, criem um novo ficheiro HTML e logo no inicio vamos começar por incluir ambas as frameworks:
<html> <head> <title>Scriptaculous Efeito Aparecer e Desaparecer</title> <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1"> <script type="text/javascript" src="js/prototype.js"></script> <script type="text/javascript" src="js/scriptaculous.js"></script> </head> </html>
Agora vamos a parte de criar o efeito, primeiro temos que criar o elemento que queremos fazer aparecer e desaparecer, para este exemplo criamos uma simples caixa usando um div e css.
O estilo para o elemento.
<style type="text/css">
#caixa {width:200px; height:200px; background-color:green;}
</style>
O elemento div.
<div id="caixa" style="display:none;"> Mensagem! </div>
Ok esta tudo preparado, agora criamos dois links em que usamos a tag onClick para gerar o evento no qual chamamos a nossa função em javascript que vai lidar com o evento.
<a href="#" onClick="aparecer()">Aparece</a> <a href="#" onClick="desaparecer()">Desaparece</a>
O primeiro link Aparece usa a função aparecer() para criar o efeito aparecer, o segundo link Desaparece usa a função desaparecer() para criar o efeito desaparecer.
Por fim criamos o javascript necessário para lidar com os eventos.
<script type="text/javascript">
function aparecer(){
$('caixa').appear()
}
function desaparecer(){
$('caixa').fade()
}
</script>
Vamos ao detalhe, primeiro declaramos uma função para isso usamos:
function NomeQueQuisermosDar(){
}
No nosso caso foi aparecer e desaparecer. De seguida vamos usar prototype para dizermos que elemento queremos modificar:
$('OIdDoElementoQueQueremosModificar')
Para quem esta habituado a usar javascript, prototype permite usarmos $() em vez do típico document.GetElementById, tornando-se mais simples, e melhor ainda resolve os problemas de usar javascript em browsers diferentes.
Por fim usamos script.aculo.us para os efeitos:
.appear() .fade()
Estes efeitos já estão criados pela a framework e se tiveres curiosidade em saber mais abre o ficheiro effects.js.
Com opção do tempo
Scrip.aculo.us permite também modificarmos o tempo do efeito, para tal só precissamos de fazer uma pequena modificação.
Começamos por criar mais dois links em que vamos usar outras duas funções em javascript.
<a href="#" onClick="aparecertempo()">Aparece</a> <a href="#" onClick="desaparecertempo()">Desaparece</a>
Como podemos ver pelo o evento onClick têmos que criar duas novas funções:
function aparecertempo(){
$('caixa').appear({ duration: 5.0 })
}
function desaparecertempo(){
$('caixa').fade({ duration: 5.0 })
}
Basicamente estas novas funções são exactamente iguais as anteriores mas passamos o argumento duration no qual especificamos em segundos o tempo que queremos que o efeito dure. Sendo assim podemos controlar ainda mais o efeito.
Mais avançado
Até agora temos explicado como usar o efeito de uma maneira simples, mas e se quisermos complicar um pouco mais? Como por exemplo usar só uma função e só um link para controlarmos o efeito.
Primeiro um novo link:
<a href="#" onClick="controlarcaixa('caixa', 2.0)">Caixa</a>
Neste exemplo usamos controlarcaixa em que passamos dois argumentos. O primeiro argumento (caixa) é o ID do elemento que queremos modificar e o segundo argumento (2.0) é o tempo do efeito.
function controlarcaixa(CaixaID, Tempo){
if ($(CaixaID).style.display == 'none') {
$(CaixaID).appear({duration: Tempo})
} else {
$(CaixaID).fade({duration: Tempo})
}
}
Esta nova função controla tanto o aparecer e desaparecer do nosso elemento. Primeiro analisamos se o nosso elemento esta visível, senão estiver aplicamos o efeito de aparecer. Se estiver visível então aplicamos o efeito de desaparecer.
Conclusão
Como podemos ver com a ajuda do scrip.aculo.us e o prototype em poucas linhas de código podemos criar o efeito de aparecer e desaparecer.
Espero que este tutorial tenha dado uma ajuda para a vossa descoberta de ambas as frameworks. No proximo artigo continuamos a analisar os efeitos possiveis.
