![Page 1: <img src="../i/r_14.png" />](https://reader034.vdocument.in/reader034/viewer/2022051513/5454e31eaf79593f778b8381/html5/thumbnails/1.jpg)
Content Outside of CONTENTdm: Part 1: Exhibit Creation Tool using
Prototype and Script.aculo.us
Phil Sager Ohio Historical Society
![Page 2: <img src="../i/r_14.png" />](https://reader034.vdocument.in/reader034/viewer/2022051513/5454e31eaf79593f778b8381/html5/thumbnails/2.jpg)
Old Ohio Memory with scrapbook
![Page 3: <img src="../i/r_14.png" />](https://reader034.vdocument.in/reader034/viewer/2022051513/5454e31eaf79593f778b8381/html5/thumbnails/3.jpg)
New CONTENTdm-based Ohio Memory with exhibit creator tool: http://www.ohiomemory.org/
![Page 4: <img src="../i/r_14.png" />](https://reader034.vdocument.in/reader034/viewer/2022051513/5454e31eaf79593f778b8381/html5/thumbnails/4.jpg)
Exhibit creation tool http://www.ohiomemory.org/custom/exhibits/
![Page 5: <img src="../i/r_14.png" />](https://reader034.vdocument.in/reader034/viewer/2022051513/5454e31eaf79593f778b8381/html5/thumbnails/5.jpg)
Example Search on “Grant”
![Page 6: <img src="../i/r_14.png" />](https://reader034.vdocument.in/reader034/viewer/2022051513/5454e31eaf79593f778b8381/html5/thumbnails/6.jpg)
Mouseover titles
![Page 7: <img src="../i/r_14.png" />](https://reader034.vdocument.in/reader034/viewer/2022051513/5454e31eaf79593f778b8381/html5/thumbnails/7.jpg)
Drag and Drop
![Page 8: <img src="../i/r_14.png" />](https://reader034.vdocument.in/reader034/viewer/2022051513/5454e31eaf79593f778b8381/html5/thumbnails/8.jpg)
Example of dropped item plus extra information from CDM description field by
clicking on question mark
![Page 9: <img src="../i/r_14.png" />](https://reader034.vdocument.in/reader034/viewer/2022051513/5454e31eaf79593f778b8381/html5/thumbnails/9.jpg)
Selections with annotations and title
![Page 10: <img src="../i/r_14.png" />](https://reader034.vdocument.in/reader034/viewer/2022051513/5454e31eaf79593f778b8381/html5/thumbnails/10.jpg)
After clicking on “Create Exhibit”
![Page 11: <img src="../i/r_14.png" />](https://reader034.vdocument.in/reader034/viewer/2022051513/5454e31eaf79593f778b8381/html5/thumbnails/11.jpg)
Exhibit is created
![Page 12: <img src="../i/r_14.png" />](https://reader034.vdocument.in/reader034/viewer/2022051513/5454e31eaf79593f778b8381/html5/thumbnails/12.jpg)
Different backgrounds available
![Page 13: <img src="../i/r_14.png" />](https://reader034.vdocument.in/reader034/viewer/2022051513/5454e31eaf79593f778b8381/html5/thumbnails/13.jpg)
Different background
![Page 14: <img src="../i/r_14.png" />](https://reader034.vdocument.in/reader034/viewer/2022051513/5454e31eaf79593f778b8381/html5/thumbnails/14.jpg)
“Add This” Button
![Page 15: <img src="../i/r_14.png" />](https://reader034.vdocument.in/reader034/viewer/2022051513/5454e31eaf79593f778b8381/html5/thumbnails/15.jpg)
Exhibit with annotation and CDM link
![Page 16: <img src="../i/r_14.png" />](https://reader034.vdocument.in/reader034/viewer/2022051513/5454e31eaf79593f778b8381/html5/thumbnails/16.jpg)
CONTENTdm Record
![Page 17: <img src="../i/r_14.png" />](https://reader034.vdocument.in/reader034/viewer/2022051513/5454e31eaf79593f778b8381/html5/thumbnails/17.jpg)
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.”
![Page 18: <img src="../i/r_14.png" />](https://reader034.vdocument.in/reader034/viewer/2022051513/5454e31eaf79593f778b8381/html5/thumbnails/18.jpg)
![Page 19: <img src="../i/r_14.png" />](https://reader034.vdocument.in/reader034/viewer/2022051513/5454e31eaf79593f778b8381/html5/thumbnails/19.jpg)
![Page 20: <img src="../i/r_14.png" />](https://reader034.vdocument.in/reader034/viewer/2022051513/5454e31eaf79593f778b8381/html5/thumbnails/20.jpg)
![Page 21: <img src="../i/r_14.png" />](https://reader034.vdocument.in/reader034/viewer/2022051513/5454e31eaf79593f778b8381/html5/thumbnails/21.jpg)
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.”
![Page 22: <img src="../i/r_14.png" />](https://reader034.vdocument.in/reader034/viewer/2022051513/5454e31eaf79593f778b8381/html5/thumbnails/22.jpg)
![Page 23: <img src="../i/r_14.png" />](https://reader034.vdocument.in/reader034/viewer/2022051513/5454e31eaf79593f778b8381/html5/thumbnails/23.jpg)
![Page 24: <img src="../i/r_14.png" />](https://reader034.vdocument.in/reader034/viewer/2022051513/5454e31eaf79593f778b8381/html5/thumbnails/24.jpg)
![Page 25: <img src="../i/r_14.png" />](https://reader034.vdocument.in/reader034/viewer/2022051513/5454e31eaf79593f778b8381/html5/thumbnails/25.jpg)
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/
![Page 26: <img src="../i/r_14.png" />](https://reader034.vdocument.in/reader034/viewer/2022051513/5454e31eaf79593f778b8381/html5/thumbnails/26.jpg)
Google AJAX Libraries API
![Page 27: <img src="../i/r_14.png" />](https://reader034.vdocument.in/reader034/viewer/2022051513/5454e31eaf79593f778b8381/html5/thumbnails/27.jpg)
![Page 28: <img src="../i/r_14.png" />](https://reader034.vdocument.in/reader034/viewer/2022051513/5454e31eaf79593f778b8381/html5/thumbnails/28.jpg)
![Page 29: <img src="../i/r_14.png" />](https://reader034.vdocument.in/reader034/viewer/2022051513/5454e31eaf79593f778b8381/html5/thumbnails/29.jpg)
Search form
![Page 30: <img src="../i/r_14.png" />](https://reader034.vdocument.in/reader034/viewer/2022051513/5454e31eaf79593f778b8381/html5/thumbnails/30.jpg)
Prototype DOM methods
![Page 31: <img src="../i/r_14.png" />](https://reader034.vdocument.in/reader034/viewer/2022051513/5454e31eaf79593f778b8381/html5/thumbnails/31.jpg)
Prototype AJAX Request
![Page 32: <img src="../i/r_14.png" />](https://reader034.vdocument.in/reader034/viewer/2022051513/5454e31eaf79593f778b8381/html5/thumbnails/32.jpg)
Server-side
![Page 33: <img src="../i/r_14.png" />](https://reader034.vdocument.in/reader034/viewer/2022051513/5454e31eaf79593f778b8381/html5/thumbnails/33.jpg)
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
![Page 34: <img src="../i/r_14.png" />](https://reader034.vdocument.in/reader034/viewer/2022051513/5454e31eaf79593f778b8381/html5/thumbnails/34.jpg)
JSON Example
![Page 35: <img src="../i/r_14.png" />](https://reader034.vdocument.in/reader034/viewer/2022051513/5454e31eaf79593f778b8381/html5/thumbnails/35.jpg)
Prototype decodes JSON
![Page 36: <img src="../i/r_14.png" />](https://reader034.vdocument.in/reader034/viewer/2022051513/5454e31eaf79593f778b8381/html5/thumbnails/36.jpg)
Use Script.aculo.us to build results
![Page 37: <img src="../i/r_14.png" />](https://reader034.vdocument.in/reader034/viewer/2022051513/5454e31eaf79593f778b8381/html5/thumbnails/37.jpg)
Script.aculo.us “Draggable”
![Page 38: <img src="../i/r_14.png" />](https://reader034.vdocument.in/reader034/viewer/2022051513/5454e31eaf79593f778b8381/html5/thumbnails/38.jpg)
Scriptaculous “Droppables”
![Page 39: <img src="../i/r_14.png" />](https://reader034.vdocument.in/reader034/viewer/2022051513/5454e31eaf79593f778b8381/html5/thumbnails/39.jpg)
Create Exhibit
![Page 40: <img src="../i/r_14.png" />](https://reader034.vdocument.in/reader034/viewer/2022051513/5454e31eaf79593f778b8381/html5/thumbnails/40.jpg)
Exhibit uses Lightview http://www.nickstakenburg.com/projects/lightview/
![Page 41: <img src="../i/r_14.png" />](https://reader034.vdocument.in/reader034/viewer/2022051513/5454e31eaf79593f778b8381/html5/thumbnails/41.jpg)
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
![Page 42: <img src="../i/r_14.png" />](https://reader034.vdocument.in/reader034/viewer/2022051513/5454e31eaf79593f778b8381/html5/thumbnails/42.jpg)
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.
![Page 43: <img src="../i/r_14.png" />](https://reader034.vdocument.in/reader034/viewer/2022051513/5454e31eaf79593f778b8381/html5/thumbnails/43.jpg)
Phil Sager Ohio Historical Society [email protected]