A READING FRAMEWORK FOR SCHOLARLY CATALOGUESRobert SteinDeputy Director for Research, Technology, and EngagementIndianapolis Museum of Art

June 2, 2011

FIRST, A WORD OF THANKS

A BIT ABOUT YOU?

A READING GUIDE TO THESE SLIDES

THE WAY NORMAL PEOPLE SPEAK

THE WAY TECH GEEKS SPEAK

Credit Flickr ~timtom

ABOUT IMA LABS

IMA LabsInnovative Technology

Solutions for Arts and Culture

The Reader Team

What We Do

Dedicated to strategies that help museums meet their technology goals through collaboration, and open-source tools

Open Tools and Collaboration

Credit Flickr ~scotttboone

DESIGNINGAN ONLINE

READER

AGILE ITERATIONS - “ALWAYS USABLE”build on successes

EASY AND CLEAN READING EXPERIENCE

simple and beautiful

BUILD CONFIDENCE – ENCOURAGE CITATION

an audience of scholars

READ ANYWHEREmulti-platform

THE BIGPICTURE

Flickr Credit ~timtom

FEEDS

CONTENT MANAGEMENT

IN DRUPAL

USER EXPERIENCEHTML5 / CSS3 &

JAVASCRIPT

Our Basic Approach

A Bit About Drupal

–Used by museums–Modular–Very Flexible–Open Source & well supported–Smart about permissions and

roles

Many Books on Same Website

Possibly different requirements per catalogue(i.e. style, interaction, content model, etc…)

Two Important Modules

Drupal Book Module– Adds logical ‘book-like’ structure to text

and media in the content management system

– Features: drag-n-drop reordering, hierarchy of chapters / sections; supports multiple books on one website

Services Module(More about this later)

v

Credit Flickr ~camil_t

TYPES OF CONTENT

Types of Content

Sections are the most basic form of content in the Reader

Other content types inherit these characteristics from Section

SECTIONS•Title•Body Copy•Plate Media

Types of Content

SECTIONS•Title•Body Copy•Plate Media

ARTWORK•Tombstone•Curatorial Entry•Provenance•More …

VOLUME•ISBN•DOI•Credits

COLLECTOR•Biography•Curatorial Entry•References

Volume

Collector

Work of Art – Object Information

Work of Art - Tombstone

Work of Art – Curatorial Entry

Footnote Editor

ADDING NEW CONTENT TYPES IS SUPPORTED IN DRUPAL AND DOES NOT INVOLVE WRITING NEW CODE

your coders need a break

More about Content Types

• Users can Drag-n-Drop fields to reorder

• No Display-side templates in code

• Every field is wrapped in class-names for CSS styling

FIGURES CAN SUPPORT MANY KINDS OF MEDIA AND INTERACTION

inline media and interaction

More about Figures

• Media Content Types for Figures– i.e. Conservation Imaging Tool

• IIP Image (carves up the Image and serves tiles)

• Polymaps (provides user-interface for zoom and rendering)– Allows multiple layers and transparency– Vector Illustration is supported through SVG as an image layer

– Media content types listen for LayoutComplete event from the layout engine and then render themselves and handle interactions

Figure Editor

WIKIS & HELP FOR AUTHORS

Flickr Credit ~timtom

Authoring Helpers

–Paste from Word• strip ms-html crap from word doc

–Automated extraction of footnotes to fields in Section authoring tool–Preserves simple text-formatting– Support for Diacritics (UTF8 charset);

SUPPORTING NON-TECHNICAL, RICH WEB AUTHORING

How on earth can we possibly support sophisticated, standards compliant authoring by non-technical staff and still potentially have a chance to maintain and update the content well into the future? Let alone keeping up with the rapid pace of technical change and all that user expectation stuff – what a website ‘feels’ like – all the while continuing to keep in mind the fact that this content should last for 100’s of years and the web might not even be here then…

Wiki vs HTML

• HTML– Error prone– Terse– Proven

• Wiki

<span class=“inscription”> signed, bottom right <a href=“???”>Claude Monet 67</a></span>

signed, bottom right [[id:24 | Claude Monet 67]]

Wiki Example

Wiki Example

[[art/collections/artist/okeeffe-georgia | Georgia O’Keeffe]]

Wiki Example

Wiki Example

[[carousel:mercury-checklist-283| width=7,crop=y,thumbsize=2]]

Wiki Templates (an extension)

As seen on Wikipedia:

Wiki Templates

{{exhist:1933.439}}

==Exhibition History{{{each}}}{{{location}}}, {{{facility}}}, "{{{title}}}", {{{dates}}}, {{{cat}}}

{{{endeach}}}

Exhibition HistoryChicago, The Art Institute of Chicago, Exhibition of the Mrs. L. L. Coburn Collection: Modern Paintings and Watercolors, April 6-October 9, 1932, cat. 19 (ill.). [pp. 7, 18, cat. 19, 47, no. 19 (ill)]Paris, Galerie Georges Petit, Monet-Rodin, 1889, cat. 5.…

Authoring Helps

OSCI Reader

User Experienced Tailored for Scholars and Citable Content

Remember the Services Module?

• An abstract module that allows developers to provide API services to external clients– All front-end tools talk to the Drupal Services Module; allows Drupal to be replaced by another CMS that provides the same API’s• Navigation, Fetching Content, Figures/Footnotes• REST / JSON to the reader

SERVICES API

Credit Flickr ~timtom

FLEXIBLE DISPLAY

Multiple Layouts (no pages)

LAYOUT ENGINENo knowledge of Drupal, book, etc…Will layout any cleanly formatted HTML texts

LAYOUT IS COMPUTED USINGFont SizeLine HeightBrowser Size

LAYOUT SETTINGSMin/Max Col Width (not #)Page and Gutter margins (in pixels)Min lines per column (orphan rule) (colwrap)Keep headings with next paragraph (colwrap)

LAYOUT HINTS (HTML5 DATA ATTRIBS)Aspect ratio of figureAnchor rule (T|B|TL|TR|BL|BR)Preferred colspan (# / %)

13.1

13.2 13.3 13.2

13.5

13.4 13.3

Layout Preferences

*13.1, anchor = BR *13.3, anchor = TR

Navigation & Structure

Via Services API to Drupal– Passes book structure to the reader tool

– Provides next / prev sections… total number of sections, current section

Highlights, Notes & Citations

Highlights, Notes & Citations

Highlights, Notes & Citations

Highlights, Notes & Citations

Content Caching Module

– HTML5 local cache to improve page-flipping performance; stores layout

– Only caches data (text), no media caching (already cached in browser)

– Timeouts can be customized has to be flushed in browser cache

– Amount of local storage is device dependant and impacts reader performance (iOS 5M)

PDF / ePub Support

– Early support for static catalogues in prototype

– Fixed versions of interactives

– Fixed layout based on page size

– Endnotes instead of inline footnotes/figures

Credit Flickr ~scotttboone

JUST FOR FUN

• We’ve tested this on all size screens– Iphone– Flatpanels 1,2,3, 4, column– 3-screen– Tiled display wall

Future Extensions

• Search– Faceting by Section (Volume, Cat#)– Search Notes/Highlights by Section– Facet by Tags on Notes

• Revisions for Dated Citations• Collection Management Integration– OAI-PMH (LIDO)

New Design Possibilities?

Even More Extensions

• Conservation Imaging tools– Overlays / Interactions / Image Registration

• Print on Demand integration support• Add support for semantic markup– Need a good RDF schema that is meaningful for this

domain before marking up content• Enhanced support for tablet and multi-touch• Automated Glossary / Index creation• Export / Archiving / Preservation

THANK YOU!

DESIGN GOALS FOR THEONLINE READER

timtom/

scotttboone/

DESIGN GOALS FOR THE ONLINE

READER

timtom/

v

camil_t/

charlestilford/

jahdakinebrah/

pietroizzo/

photos/d-kav/