The document describes an exhibit creation tool built using the Prototype and Script.aculo.us JavaScript frameworks. It allows users to search, drag and drop items into an exhibit, add annotations, and publish the exhibit on the Ohio Memory website. The tool was created to enhance the user experience on the new CONTENTdm-based site. Details are provided on Prototype, Script.aculo.us, and other popular JavaScript libraries that can be used to build dynamic web applications. Resources for learning more about these libraries are also listed.

1. Content Outside of CONTENTdm:
Part 1: Exhibit Creation Tool using
Prototype and Script.aculo.us
Phil Sager
Ohio Historical Society
psager@ohiohistory.org

2. Old Ohio Memory with scrapbook

3. New CONTENTdm-based Ohio Memory
with exhibit creator tool:
http://www.ohiomemory.org/

4. Exhibit creation tool
http://www.ohiomemory.org/custom/exhibits/

5. Example Search on “Grant”

6. Mouseover titles

7. Drag and Drop

8. Example of dropped item
plus extra information from CDM description field by
clicking on question mark

9. Selections with annotations and title

10. After clicking on “Create Exhibit”

11. Exhibit is created

12. Different backgrounds available

13. Different background

14. “Add This” Button

15. Exhibit with annotation and CDM link

16. CONTENTdm Record

17. Prototype
• “Prototype is a JavaScript framework that
aims to ease development of dynamic web
applications. It offers a familiar class-style
OO framework, extensive Ajax support,
higher-order programming constructs, and
easy DOM manipulation.”

21. Script.aculo.us
• “script.aculo.us is a set of JavaScript
libraries to enhance the user interface of
web sites. It provides a visual effects
engine, a drag and drop library (including
sortable lists), a couple of controls (Ajax-
based autocompletion, in-place editing,
sliders) and more.”
• “It's an add-on to the fantastic Prototype
framework.”

25. Other Popular Libraries
• jQuery, jQuery UI
– http://jquery.com/
• MooTools
– http://mootools.net/
• Dojo
– http://www.dojotoolkit.org/
• Yahoo! User Interface Library (YUI)
– http://developer.yahoo.com/yui/
• Ext Core
– http://www.extjs.com/products/extcore/

26. Google AJAX Libraries API

29. Search form

30. Prototype DOM methods

31. Prototype AJAX Request

32. Server-side

33. JSON
• “JSON (JavaScript Object Notation) is a
lightweight data-interchange format. It is
easy for humans to read and write. It is
easy for machines to parse and generate.
It is based on a subset of JavaScript.”
• “The Fat-Free Alternative to XML”
• http://json.org

34. JSON Example

35. Prototype decodes JSON

36. Use Script.aculo.us to build results

37. Script.aculo.us “Draggable”

38. Scriptaculous “Droppables”

39. Create Exhibit

40. Exhibit uses Lightview
http://www.nickstakenburg.com/projects/lightview/

41. Online Resources
• Prototype: http://www.prototypejs.org
– Tips and Tutorials: http://www.prototypejs.org/learn
– Prototype Framework Tutorial:
http://www.tutorialspoint.com/prototype
• Script.aculo.us: http://script.aculo.us
– script.aculo.us Tutorial:
http://www.tutorialspoint.com/script.aculo.us
– 10 Useful tutorials to learn Scriptaculous:
http://woork.blogspot.com/2008/10/10-useful-tutorials-to-
learn.html
• Google AJAX Libraries API: http://code.google.com/apis/ajaxlibs
– Sign up for a Google API key:
http://code.google.com/apis/ajaxsearch/signup.html
• Lightview: http://www.nickstakenburg.com/projects/lightview

42. Books
• Crane, Dave, Bear Bibeault, Tom Locke, and
Thomas Fuchs. Prototype and Scriptaculous in
Action. Manning Publications, 2007.
• Dupont, Andrew. Practical Prototype and
Script.aculo.us. Apress, 2008
• Porteneuve, Christophe. Prototype and
script.aculo.us: You Never Knew JavaScript Could
Do This! Pragmatic Bookshelf, 2007.
• Rao, Sridhar. PHP and script.aculo.us Web 2.0
Application Interfaces. Packt Publishing, 2009.

43. Phil Sager
Ohio Historical Society
psager@ohiohistory.org