Artigos Recentes
Jan 10, 2009 Tutoriais
Muitos dos tutoriais que escrevemos aqui no PT Ajax usamos o prototype como uma das nossas frameworks, e por vezes temos que repetir o que já disse-mos algumas quantas vezes em outros artigos.
Este artigo vai servir de base sobre o prototype, desta maneira quando estamos a escrever outros tutoriais e falamos do prototype podemos sempre referenciar este artigo como base.
Então aqui vai, vamos começar pelo o básico.
O que é o prototype?
O prototype é uma framework que permite simplificar o processo de criar projectos para a web quando queremos usar Javascript.
Em outras palavras esta framework ajuda-nos a escrever Javascript mais fácil, mais rápido e melhor ainda, sem termos (muito) que preocupar com os diferentes browsers e como lidam com Javascript.
Como se usa?
Para usares o prototype nos teus projectos basta fazeres o download dos ficheiros e incluires no teu projecto, para tal dirigite ao site prototype e faz o download.
Já tenho os ficheiros e agora?
Agora basta na directoria do teu projecto criares uma outra directoria (se quiseres) e adicionares os ficheiros do prototype.
Por uma questão de habito e de organização normalmente dá jeito criarmos uma directoria do tipo “JS” ou “Scripts” ou “Javascript”, onde estarão todos os ficheiros em javascript.
Quando quiseres usar basta incluíres os ficheiros no teu ficheiro HTML entre as headers:
<html>
<head>
<title>Prototype o Basico</title>
<script type="text/javascript" src="js/prototype.js"></script>
</head>
E agora?
Agora já tens tudo preparado para poderes usar o prototype. Vamos começar por alguns comandos básicos para poderes ver a vantagem de usares uma framework quando escreves / usas Javascript.
Usando a função $()
Este comando é um dos comandos que se calhar mais vais usar. Em vez de usares:
document.getElementById('IDDoElemento')
Passas a usar o $:
$('IDDoElemento')
Bastante mais fácil, vamos a um exemplo, o HTML:
<div id="div1">O que diz o meu div!</div>
<a href="#" onclick="OQueDizODiv()">O que diz o div?</a>
O Javascript:
function OQueDizODiv(){
var omeudiv = $('div1')
alert(omeudiv.innerHTML)
}
Mas o melhor ainda é que permite-te usar uns métodos extras que simplificam bastante o desenvolvimento da tua aplicação como esconder ou mostrar o elemento, por exemplo:
<div id="div1">O que diz o meu div!</div>
<a href="#" onclick="EscondeODiv()">Esconde o div</a><br>
<a href="#" onclick="MostraODiv()">Mostra o div</a><br>
O Javascript:
function EscondeODiv(){
var omeudiv = $('div1')
omeudiv.hide()
}
function MostraODiv(){
var omeudiv = $('div1')
omeudiv.show()
}
Usando a função $$()
Para quem usa CSS para separar o estilo/desenho do site do código esta função ajuda bastante.
Esta função ajuda-te a referiste a elementos através das classes do CSS. Por exemplo:
<div class="classedodiv">Div 1</div>
<div class="classedodiv">Div 2</div>
<div class="classedodiv">Div 3</div>
<a href="#" onclick="DizMeOsDivs()">Diz me os divs</a>
Como podemos ver temos 3 divs todos com a mesma classe “classedodiv“, o que pretendemos agora é quando clicarmos no link “Diz me os divs“, uma caixa de alerta abre com os conteúdos dos divs que tem como classe “classedodiv“.
function DizMeOsDivs(){
var osmeusdivs = $$('div.classedodiv');
var textodosdivs = '';
for(var i=0; i<osmeusdivs.length; i++){
textodosdivs += osmeusdivs[i].innerHTML + '/';
}
alert(textodosdivs);
}
Usando a função $F()
Sem duvida nenhuma que esta função também dá bastante jeito. Muitas vezes usamos Javascript para validar valores nas nossas formas. A função $F simplifica bastante este trabalho. Começando com o HTML:
<input type="text" id="Nome" value="Manel"><br>
<input type="button" value="Diz Me O Nome" onclick="DizMeONome();">
O Javascript:
function DizMeONome(){
var Nome = $F('Nome')
alert(Nome)
}
Simples!
Conclusão
Como podemos ver o prototype traz bastantes vantagens no nosso desenvolvimento em Javascript. Neste pequeno tutorial mostramos apenas 3 das muitas funções que o prototype oferece.
Se tiverem interessados em usar o prototype para desenvolvimento em Ajax podem ver este tutorial.
Este tutorial serviu apenas como introdução e esperamos escrever mais tutoriais em que usamos o prototype. Mas como foi avisado no inicio este tutorial serve apenas como referencia a outros tutoriais que iremos apresentar aqui no PT Ajax.
Webtutoriais:26C046CA
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.
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.
Apr 29, 2008 Noticias
PTAjax esta de volta.
A partir de hoje vamos tentar voltar a dar todas as novidades no mundo Ajax.
Mar 26, 2008 Componentes, Mootools
MooFilm e uma pequena extensão que podes usar em conjunto com o Mootools para criar tooltips para imagens. Basicamente cada vez que um visitante passa com o cursor por uma imagem texto aparece.
Podes usar para explicar a imagem, ou para dizer o autor da imagem.
Último Artigo
Normalmente uso firebug quando estou a desenvolver em Javascript, mas hoje encontrei uma aplicação, ou framework, como quiserem chamar que despertou o meu interesse.
