Giuliana Barreto da Cruz Análise e Desenvolvimento de Sistemas, 2013

1. Giuliana Barreto da Cruz Análise e Desenvolvimento de Sistemas, 2013

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

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

9. Download de Instalação

10. Download de Instalação

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

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

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. Vantagens • Interfaces 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 navegadores • Javascript pode ser desabilitado pelo usuário

16. Informações Website: http://script.aculo.us, http://www.slideshare.net