Getting Ready for Web 2.0 Effects with Scriptaculous
What is Scriptaculous?
Scriptaculous is a JavaScript library available to web developers that provides a quick and customizable framework for Web 2.0 effects. With Scriptaculous, you can make your site seem alive through fluid animation sequences. The framework provides a core set of effects that can be easily triggered and compiled to create more appealing and usable web sites. I primarily use Scriptaculous daily to help create the visual portion of refined user-interfaces. By utilizing animation in the browser, you can help guide site visitors to alerts, events, and other important aspects of your design.
Working with Scriptaculous is dependent on the use of the Prototype library in conjunction. The steps you are about to undertake will also get you set up with the Prototype.js framework.
How To Get Started
Getting started with Scriptaculous is a very painless process. If you have a simple knowledge of HTML, CSS, and JavaScript, you can quickly get some Scriptaculous functionality built into your site.
Downloading. The first step in this process would be to download the library. In order to do so, head over to http://script.aculo.us and grab the latest version (the library is continually being expanded upon so it is worth checking here often to explore new features).
Unzipping. Once you have downloaded the package, go ahead an unzip the package as a folder on your hard drive. When you open your new sciptaculous folder you will notice that there are three folders here, "lib", "src", and "test". The "lib" folder contains the Prototype.js framework, which we need for our Scriptaculous effects to work. The "src" directory contains the entire Scriptaculous library that we will be installing in the next step. Go ahead and locate these folders. Now it's time to find a place to which we will install these libraries.
Installing. The install process of the Scriptaculous library is considerably simple and if you've ever added an external JavaScript file to your website you will feel right at home. First things first, you need to create a directory on your web server that you will be uploading these files to. In the case of Ryboe.com, I have a folder called "libraries" that I have created for just this purpose. Go ahead and copy the following files into your directory once you have created it– prototype.js, scriptaculous.js, builder.js, effects.js, dragdrop.js, slider.js, and controls.js (note–A unittest.js file is also found in this directory but is not necessary to upload). Now that you have the files saved to your web space, it's time to tell your website that you want to use them.
Including. On Ryboe.com, we will often refer to the process of telling your website that you wish to use an external file as "including" the file. In this step of the Scriptaculous setup we will be including some code into our site template so that we can access the Scriptaculous methods throughout your site. The way this library is set up, there is one file that acts as the central brain of the library. Without surprise, this file is adequately named scriptaculous.js. This is the file we are going to include with our HTML.
Sidenote. If you aren't familiar with the structure of HTML documents, the including of external files — CSS, Javascript, etc. — often takes place at the top of the file, between the <HEAD></HEAD> tags. I recommend keeping with this format for all your designs if you wish to have your site properly validate.
Access the file in your template that includes your default HTML <HEAD> tags (in my case this was a file called header.php as I use WordPress to power Ryboe.com). Locate the </HEAD> tag and insert the code:
<script src="/libraries/prototype.js" type="text/javascript"></script>
<script src="/libraries/scriptaculous.js" type="text/javascript"></script>
In my code, i used the path "/libraries/" because this is the name of the directory that I saved my JavaScript files to in the "Installing" step above.
Testing. Now that we have Scriptaculous properly installed and included, it is time to make sure that it works. Direct your browser to your homepage. Once your site has loaded, view the source and make sure the code we just inserted is present just like we inserted it. If the file includes do not appear here, you may have edited the wrong file.
To make sure that our new Web 2.0 Effects are properly working, it's time to fire up our first effect! Continue here to write your first Web 2.0 Effect!
