Giuliana Barreto da Cruz
Análise e Desenvolvimento de Sistemas, 2013
Sumário














Script.aculo.us...................................................3
Quem Desenvolveu..........................................4
O que é..............................................................5
O que é..............................................................6
Quem utiliza.....................................................7
Download..........................................................8
Download..........................................................9
Download..........................................................10
Download..........................................................11
Efeitos...............................................................12
Efeitos...............................................................13
Vantantagens...................................................14
Desvantagens...................................................15
Informações.....................................................16
2
Script.aculo.us
 Biblioteca JavaScript
 Embutida sobre o Prototype, JavaScript, Framework
 Efeitos visuais dinâmicos
 Elementos de interface com usuário;
3
Desenvolvido por:
Thomas Fuchs
Última versão: 1.8.2 /
18 novembro 08
Tamanho: ~247 KB
Licença: MIT License
Website:
http://script.aculo.us;
4
O que é ?
 O componente mais popular são efeitos, utilizados
para anexar uma variedade de efeitos cinematográficos
para eventos de UI, em geral, o script.aculo.us
funcionam de forma confiável em diferentes
navegadores (Internet Explorer 6 + para
Windows,Firefox, Safari, com poucas exceções,
Opera).
5
O que é?
 script.aculo.us oferece atraentes efeitos e transições visuais
e elementos de drag-and-drop poderosos. A relação entre
Prototype e script.aculo.us está perto. Ambos são
desenvolvidos em conjunto com Rails, e eles compartilham
estilos de codificação muito semelhantes e API. Na
verdade, um pouco do que é agora script.aculo.us era
originalmente parte de Prototype. Apesar dos laços
estreitos, as duas bibliotecas têm objetivos diferentes.
 Script.aculo.us funciona a um nível superior, mais estreita
aos níveis de aplicação e interface do usuário, fornecendo
componentes construídos em Prototype. Em alguns casos,
os componentes são surpreendentemente complexo e ainda
utilizável com apenas poucas linhas de código.
6
Quem Utiliza
7
Download de Instalação
 http://script.aculo.us/downloads
 Descompactar
Prototype.js,
scrip.aculo.us.js,
builder.js, effects.js, dragdrop.js, slider.js, controls.js e
sound.js em diretório, por exemplo/javascripts.
 Se não for necessário todas as funcionalidades , pode
se limitar os scripts adicionais que serão carregados
 Builder, effects, dragdrop, controls, slider e sound.
<script src=“scriptaculous.js?load=effects,dragdrop”
Type= “text/javascript”></script>;
8
Download de Instalação
9
Download de Instalação
10
Download de Instalação
 Após extrair os arquivos
você abrira o código no
notepad++ ou no
netbeans verificara os
códigos e suas funções a
partir da sua escolha
monte seu trabalho com
os efeitos desejados;
11
Efeitos Utilizados
 Efect Puff :
<div id="Puff demo" style="width:80px; height:80px;
background:#c2defb; border:1px solid #333;"></div>
<ul> <li><a href="#" onclick="new Effect.Puff('Puff
demo'); return false;">Click here for a demo!</a></li>
<li><a href="#" onclick="$('Puff demo').setStyle({
display: 'block', opacity:1, width:'80px', height:'80px' });
return false;">Reset</a></li> </ul>;
12
Efeitos Utilizados
Effect.BlindDown,EffectBlindUp:
<div id="blindup_demo" style="width:80px;
height:80px; background:#ccc;"> This is some test
content. This is some test content. </div> <ul> <li><a
href="#" onclick="Effect.BlindUp('blindup_demo');
return false;">Click here for a demo!</a></li> <li><a
href="#" onclick="$('blindup_demo').show(); return
false;">Reset</a></li> </ul>;
13
Vantagens
 Interfaces mais interativas e dinâmicas com o usuário;
 Arquivos javascripts separados para cada tipo de
funcionalidade;
14
Desvantangens
 “Não vive sem” o Prototype Framework (?)
 Funcionalidades com problemas de compatibilidade
com alguns navegadores
 Javascript pode ser desabilitado pelo usuário
15
Website: http://script.aculo.us, http://www.slideshare.net
16