This document provides an overview of the design goals and technical approach for developing an online scholarly reader for catalogues. Key points include: - The reader will be built using Drupal for content management, with a focus on flexible display layouts, support for different content types and media, and open collaboration. - Content like sections, artworks, collectors, and footnotes will have customizable fields and be structured for online reading. - The layout engine will compute flexible multi-column layouts based on font size and browser width. - Users will be able to highlight, annotate and cite content. A services API will provide the reader application with content and navigation functionality. - Future extensions may include

1. A Reading framework for scholarly catalogues Robert SteinDeputy Director for Research, Technology, and EngagementIndianapolis Museum of Art June 2, 2011

2. First, a word of thanks

3. A bit about you?

4. A READING GUIDE TO THESE SLIDES THE WAY NORMAL PEOPLE SPEAK THE WAY TECH GEEKS SPEAK

5. Credit Flickr ~timtom ABOUT IMA LABS

6. IMA Labs Innovative Technology Solutions for Arts and Culture

7. The Reader Team

8. What We Do Dedicated to strategies that help museums meet their technology goals through collaboration, and open-source tools

9. Open Tools and Collaboration

10. DESIGNING AN ONLINE READER Credit Flickr ~scotttboone

11. Agile Iterations - “always usable” build on successes

12. Easy and clean reading experience simple and beautiful

13. build confidence – Encourage citation an audience of scholars

14. read anywhere multi-platform

15. Flickr Credit ~timtom THE BIG PICTURE

17. FEEDS CONTENT MANAGEMENT IN DRUPAL USER EXPERIENCE HTML5 / CSS3 & JAVASCRIPT Our Basic Approach

18. A Bit About Drupal Used by museums Modular Very Flexible Open Source & well supported Smart about permissions and roles

19. Many Books on Same Website Possibly different requirements per catalogue(i.e. style, interaction, content model, etc…)

20. 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)

21. v TYPES OF CONTENT Credit Flickr ~camil_t

23. Body Copy

24. Plate MediaSections are the most basic form of content in the Reader Other content types inherit these characteristics from Section

26. Body Copy

28. Curatorial Entry

30. Curatorial Entry

31. Provenance

33. DOI

35. Collector

36. Work of Art – Object Information

37. Work of Art - Tombstone

38. Work of Art – Curatorial Entry

39. Footnote Editor

40. Adding new content types is supported in Drupal and does not involve writing new code your coders need a break

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

42. Figures can support many kinds of media and interaction inline media and interaction

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

46. Figure Editor

47. Flickr Credit ~timtom WIKIS & HELP FOR AUTHORS

48. 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);

49. 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…

50. 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]]

51. Wiki Example

52. Wiki Example [[art/collections/artist/okeeffe-georgia | Georgia O’Keeffe]]

53. Wiki Example

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

55. Wiki Templates (an extension) As seen on Wikipedia:

56. Wiki Templates {{exhist:1933.439}} ==Exhibition History {{{each}}} {{{location}}}, {{{facility}}}, "{{{title}}}", {{{dates}}}, {{{cat}}} {{{endeach}}} Exhibition History Chicago, 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. …

57. Authoring Helps

58. OSCI Reader User Experienced Tailored for Scholars and Citable Content

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

60. Credit Flickr ~timtom FLEXIBLE DISPLAY

61. Multiple Layouts (no pages)

65. Layout Engine No knowledge of Drupal, book, etc… Will layout any cleanly formatted HTML texts

66. Layout is computed using Font Size Line Height Browser Size

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

70. Layout hints(html5 data attribs) Aspect ratio of figure Anchor rule (T|B|TL|TR|BL|BR) Preferred colspan (# / %)

71. 13.4 13.2 13.3 13.2 13.3 13.1 13.5 Layout Preferences *13.1, anchor = BR *13.3, anchor = TR

72. Navigation & Structure Via Services API to Drupal Passes book structure to the reader tool Provides next / prev sections… total number of sections, current section

73. Highlights, Notes & Citations

74. Highlights, Notes & Citations

75. Highlights, Notes & Citations

76. Highlights, Notes & Citations

77. 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)

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

79. JUST FOR FUN Credit Flickr ~scotttboone

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

86. 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)

87. New Design Possibilities?

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

89. THANK YOU!

91. Design goals for theonline reader timtom/

92. DESIGN GOALS FOR THE ONLINE READER scotttboone/

93. timtom/

94. v camil_t/

95. charlestilford/

96. jahdakinebrah/

97. pietroizzo/

98. photos/d-kav/