Giuliana Barreto da Cruz

Análise e Desenvolvimento de Sistemas, 2013

2

Sumário Script.aculo.us...................................................3Quem Desenvolveu..........................................4O que é..............................................................5O que é..............................................................6Quem utiliza.....................................................7Download..........................................................8Download..........................................................9Download..........................................................10Download..........................................................11Efeitos...............................................................12Efeitos...............................................................13Vantantagens...................................................14Desvantagens...................................................15 Informações.....................................................16

3

Script.aculo.us

Biblioteca JavaScript Embutida sobre o Prototype, JavaScript,

Framework Efeitos visuais dinâmicos Elementos de interface com usuário;

4

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;

5

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).

6

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.

7

Quem Utiliza

8

Download de Instalaçãohttp://script.aculo.us/downloadsDescompactar 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>;

9

Download de Instalação

10

Download de Instalação

11

Download de InstalaçãoApó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;

12

Efeitos UtilizadosEfect 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>;

13

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>;

14

VantagensInterfaces mais interativas e dinâmicas com o

usuário;Arquivos javascripts separados para cada

tipo de funcionalidade;

15

Desvantangens“Não vive sem” o Prototype Framework (?)Funcionalidades com problemas de

compatibilidade com alguns navegadoresJavascript pode ser desabilitado pelo usuário

16

InformaçõesWebsite: http://script.aculo.us, http://www.slideshare.net