A Reading framework for scholarly catalogues<br />Robert SteinDeputy Director for Research, Technology, and EngagementIndi...
First, a word of thanks<br />
A bit about you?<br />
A READING GUIDE TO THESE SLIDES<br />THE WAY NORMAL PEOPLE SPEAK<br />THE WAY TECH GEEKS SPEAK<br />
Credit Flickr ~timtom<br />ABOUT <br />IMA LABS<br />
IMA Labs<br />Innovative Technology Solutions for Arts and Culture<br />
The Reader Team<br />
What We Do<br />Dedicated to strategies that help museums meet their technology goals through collaboration, and open-sour...
Open Tools and Collaboration<br />
DESIGNING<br />AN ONLINE<br />READER<br />Credit Flickr ~scotttboone<br />
Agile Iterations - “always usable”<br />build on successes<br />
Easy and clean reading experience<br />simple and beautiful<br />
build confidence – Encourage citation<br />an audience of scholars<br />
read anywhere<br />multi-platform<br />
Flickr Credit ~timtom<br />THE BIG<br />PICTURE<br />
FEEDS<br />CONTENT <br />MANAGEMENT <br />IN DRUPAL<br />USER EXPERIENCE<br />HTML5 / CSS3 &<br />JAVASCRIPT<br />Our Basi...
A Bit About Drupal<br />Used by museums<br />Modular<br />Very Flexible<br />Open Source & well supported<br />Smart about...
Many Books on Same Website<br />Possibly different requirements per catalogue(i.e. style, interaction, content model, etc…...
Two Important Modules<br />Drupal Book Module<br />Adds logical ‘book-like’ structure to text and media in the content man...
v<br />TYPES OF CONTENT<br />Credit Flickr ~camil_t<br />
Types of Content<br />SECTIONS<br /><ul><li>Title
Body Copy
Plate Media</li></ul>Sections are the most basic form of content in the Reader<br />Other content types inherit these char...
Types of Content<br />SECTIONS<br /><ul><li>Title
Body Copy
Plate Media</li></ul>COLLECTOR<br /><ul><li>Biography
Curatorial Entry
References</li></ul>ARTWORK<br /><ul><li>Tombstone
Curatorial Entry
Provenance
More …</li></ul>VOLUME<br /><ul><li>ISBN
DOI
Credits</li></li></ul><li>Volume<br />
Collector<br />
Work of Art – Object Information<br />
Work of Art - Tombstone<br />
Work of Art – Curatorial Entry<br />
Footnote Editor<br />
Adding new content types is supported in Drupal and does not involve writing new code<br />your coders need a break<br />
More about Content Types<br />Users can Drag-n-Drop fields to reorder<br />No Display-side templates in code<br />Every fi...
Figures can support many kinds of media and interaction<br />inline media and interaction<br />
More about Figures<br />Media Content Types for Figures<br />i.e. Conservation Imaging Tool<br />IIP Image (carves up the ...
Figure Editor<br />
Flickr Credit ~timtom<br />WIKIS & HELP FOR AUTHORS<br />
Authoring Helpers<br />Paste from Word<br />strip ms-html crap from word doc<br />Automated extraction of footnotes to fie...
supporting non-technical, rich web authoring<br />How on earth can we possibly support sophisticated, standards compliant ...
Wiki vs HTML<br />HTML<br />Error prone<br />Terse<br />Proven<br />Wiki<br /><span class=“inscription”>  signed, bottom r...
Wiki Example<br />
Wiki Example<br />[[art/collections/artist/okeeffe-georgia | Georgia O’Keeffe]]<br />
Wiki Example<br />
Wiki Example<br />[[carousel:mercury-checklist-283| width=7,crop=y,thumbsize=2]]<br />
Wiki Templates (an extension)<br />As seen on Wikipedia:<br />
Wiki Templates<br />{{exhist:1933.439}}<br />==Exhibition History<br />{{{each}}}<br />{{{location}}}, {{{facility}}}, "{{...
Authoring Helps<br />
OSCI Reader<br />User Experienced Tailored for Scholars and Citable Content<br />
Remember the Services Module?<br />An abstract module that allows developers to provide API services to external clients<b...
Credit Flickr ~timtom<br />FLEXIBLE DISPLAY<br />
Multiple Layouts (no pages)<br />
Layout Engine<br />No knowledge of Drupal, book, etc…<br />Will layout any cleanly formatted HTML texts<br />
Layout is computed using<br />Font Size<br />Line Height<br />Browser Size<br />
Layout settings<br />Min/Max Col Width (not #)<br />Page and Gutter margins (in pixels)<br />Min lines per column (orphan ...
Layout hints(html5 data attribs)<br />Aspect ratio of figure<br />Anchor rule (T|B|TL|TR|BL|BR)<br />Preferred colspan (# ...
13.4<br />13.2<br />13.3<br />13.2<br />13.3<br />13.1<br />13.5<br />Layout Preferences<br />*13.1, anchor = BR		*13.3, a...
Navigation & Structure<br />Via Services API to Drupal<br />Passes book structure to the reader tool<br />Provides next / ...
Highlights, Notes & Citations<br />
Highlights, Notes & Citations<br />
Highlights, Notes & Citations<br />
Highlights, Notes & Citations<br />
Content Caching Module<br />HTML5 local cache to improve page-flipping performance; stores layout<br />Only caches data (t...
PDF / ePub Support<br />Early support for static catalogues in prototype<br />Fixed versions of interactives<br />Fixed la...
JUST <br />FOR FUN<br />Credit Flickr ~scotttboone<br />
We’ve tested this on all size screens<br />Iphone<br />Flatpanels 1,2,3, 4, column<br />3-screen<br />Tiled display wall<b...
Future Extensions<br />Search<br />Faceting by Section (Volume, Cat#)<br />Search Notes/Highlights by Section<br />Facet b...
New Design Possibilities?<br />
Even More Extensions<br />Conservation Imaging tools<br />Overlays / Interactions / Image Registration<br />Print on Deman...
Upcoming SlideShare
Loading in …5
×

Presentation of the AIC-IMA publishing tool for OSCI

657 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
657
On SlideShare
0
From Embeds
0
Number of Embeds
8
Actions
Shares
0
Downloads
3
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Show wiki links and code generation
  • Show wiki links and code generation
  • Show wiki links and code generation
  • Show wiki links and code generation
  • Split into 2-3 slides…Add images of wiki-helps (i.e. image helper)Talk / show examples of ‘live preview’
  • Split into 2-3 slides…Add images of wiki-helps (i.e. image helper)Talk / show examples of ‘live preview’
  • Presentation of the AIC-IMA publishing tool for OSCI

    1. 1. A Reading framework for scholarly catalogues<br />Robert SteinDeputy Director for Research, Technology, and EngagementIndianapolis Museum of Art<br />June 2, 2011<br />
    2. 2. First, a word of thanks<br />
    3. 3. A bit about you?<br />
    4. 4. A READING GUIDE TO THESE SLIDES<br />THE WAY NORMAL PEOPLE SPEAK<br />THE WAY TECH GEEKS SPEAK<br />
    5. 5. Credit Flickr ~timtom<br />ABOUT <br />IMA LABS<br />
    6. 6. IMA Labs<br />Innovative Technology Solutions for Arts and Culture<br />
    7. 7. The Reader Team<br />
    8. 8. What We Do<br />Dedicated to strategies that help museums meet their technology goals through collaboration, and open-source tools<br />
    9. 9. Open Tools and Collaboration<br />
    10. 10. DESIGNING<br />AN ONLINE<br />READER<br />Credit Flickr ~scotttboone<br />
    11. 11. Agile Iterations - “always usable”<br />build on successes<br />
    12. 12. Easy and clean reading experience<br />simple and beautiful<br />
    13. 13. build confidence – Encourage citation<br />an audience of scholars<br />
    14. 14. read anywhere<br />multi-platform<br />
    15. 15. Flickr Credit ~timtom<br />THE BIG<br />PICTURE<br />
    16. 16.
    17. 17. FEEDS<br />CONTENT <br />MANAGEMENT <br />IN DRUPAL<br />USER EXPERIENCE<br />HTML5 / CSS3 &<br />JAVASCRIPT<br />Our Basic Approach<br />
    18. 18. A Bit About Drupal<br />Used by museums<br />Modular<br />Very Flexible<br />Open Source & well supported<br />Smart about permissions and roles<br />
    19. 19. Many Books on Same Website<br />Possibly different requirements per catalogue(i.e. style, interaction, content model, etc…)<br />
    20. 20. Two Important Modules<br />Drupal Book Module<br />Adds logical ‘book-like’ structure to text and media in the content management system<br />Features: drag-n-drop reordering, hierarchy of chapters / sections; supports multiple books on one website<br />Services Module<br /> (More about this later)<br />
    21. 21. v<br />TYPES OF CONTENT<br />Credit Flickr ~camil_t<br />
    22. 22. Types of Content<br />SECTIONS<br /><ul><li>Title
    23. 23. Body Copy
    24. 24. Plate Media</li></ul>Sections are the most basic form of content in the Reader<br />Other content types inherit these characteristics from Section<br />
    25. 25. Types of Content<br />SECTIONS<br /><ul><li>Title
    26. 26. Body Copy
    27. 27. Plate Media</li></ul>COLLECTOR<br /><ul><li>Biography
    28. 28. Curatorial Entry
    29. 29. References</li></ul>ARTWORK<br /><ul><li>Tombstone
    30. 30. Curatorial Entry
    31. 31. Provenance
    32. 32. More …</li></ul>VOLUME<br /><ul><li>ISBN
    33. 33. DOI
    34. 34. Credits</li></li></ul><li>Volume<br />
    35. 35. Collector<br />
    36. 36. Work of Art – Object Information<br />
    37. 37. Work of Art - Tombstone<br />
    38. 38. Work of Art – Curatorial Entry<br />
    39. 39. Footnote Editor<br />
    40. 40. Adding new content types is supported in Drupal and does not involve writing new code<br />your coders need a break<br />
    41. 41. More about Content Types<br />Users can Drag-n-Drop fields to reorder<br />No Display-side templates in code<br />Every field is wrapped in class-names for CSS styling<br />
    42. 42. Figures can support many kinds of media and interaction<br />inline media and interaction<br />
    43. 43. More about Figures<br />Media Content Types for Figures<br />i.e. Conservation Imaging Tool<br />IIP Image (carves up the Image and serves tiles)<br />Polymaps (provides user-interface for zoom and rendering)<br />Allows multiple layers and transparency<br />Vector Illustration is supported through SVG as an image layer<br />Media content types listen for LayoutComplete event from the layout engine and then render themselves and handle interactions<br />
    44. 44.
    45. 45.
    46. 46. Figure Editor<br />
    47. 47. Flickr Credit ~timtom<br />WIKIS & HELP FOR AUTHORS<br />
    48. 48. Authoring Helpers<br />Paste from Word<br />strip ms-html crap from word doc<br />Automated extraction of footnotes to fields in Section authoring tool<br />Preserves simple text-formatting<br />Support for Diacritics (UTF8 charset); <br />
    49. 49. supporting non-technical, rich web authoring<br />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…<br />
    50. 50. Wiki vs HTML<br />HTML<br />Error prone<br />Terse<br />Proven<br />Wiki<br /><span class=“inscription”> signed, bottom right <br /> <a href=“???”>Claude Monet <br /> 67</a><br /></span><br />signed, bottom right [[id:24 | Claude Monet 67]]<br />
    51. 51. Wiki Example<br />
    52. 52. Wiki Example<br />[[art/collections/artist/okeeffe-georgia | Georgia O’Keeffe]]<br />
    53. 53. Wiki Example<br />
    54. 54. Wiki Example<br />[[carousel:mercury-checklist-283| width=7,crop=y,thumbsize=2]]<br />
    55. 55. Wiki Templates (an extension)<br />As seen on Wikipedia:<br />
    56. 56. Wiki Templates<br />{{exhist:1933.439}}<br />==Exhibition History<br />{{{each}}}<br />{{{location}}}, {{{facility}}}, "{{{title}}}", {{{dates}}}, {{{cat}}}<br />{{{endeach}}}<br />Exhibition History<br /> 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)]<br /> Paris, Galerie Georges Petit, Monet-Rodin, 1889, cat. 5.<br /> …<br />
    57. 57. Authoring Helps<br />
    58. 58. OSCI Reader<br />User Experienced Tailored for Scholars and Citable Content<br />
    59. 59. Remember the Services Module?<br />An abstract module that allows developers to provide API services to external clients<br />All front-end tools talk to the Drupal Services Module; allows Drupal to be replaced by another CMS that provides the same API’s<br />Navigation, Fetching Content, Figures/Footnotes<br />REST / JSON to the reader<br />SERVICES API<br />
    60. 60. Credit Flickr ~timtom<br />FLEXIBLE DISPLAY<br />
    61. 61. Multiple Layouts (no pages)<br />
    62. 62.
    63. 63.
    64. 64.
    65. 65. Layout Engine<br />No knowledge of Drupal, book, etc…<br />Will layout any cleanly formatted HTML texts<br />
    66. 66. Layout is computed using<br />Font Size<br />Line Height<br />Browser Size<br />
    67. 67.
    68. 68.
    69. 69. Layout settings<br />Min/Max Col Width (not #)<br />Page and Gutter margins (in pixels)<br />Min lines per column (orphan rule) (colwrap)<br />Keep headings with next paragraph (colwrap)<br />
    70. 70. Layout hints(html5 data attribs)<br />Aspect ratio of figure<br />Anchor rule (T|B|TL|TR|BL|BR)<br />Preferred colspan (# / %)<br />
    71. 71. 13.4<br />13.2<br />13.3<br />13.2<br />13.3<br />13.1<br />13.5<br />Layout Preferences<br />*13.1, anchor = BR *13.3, anchor = TR<br />
    72. 72. Navigation & Structure<br />Via Services API to Drupal<br />Passes book structure to the reader tool<br />Provides next / prev sections… total number of sections, current section<br />
    73. 73. Highlights, Notes & Citations<br />
    74. 74. Highlights, Notes & Citations<br />
    75. 75. Highlights, Notes & Citations<br />
    76. 76. Highlights, Notes & Citations<br />
    77. 77. Content Caching Module<br />HTML5 local cache to improve page-flipping performance; stores layout<br />Only caches data (text), no media caching (already cached in browser)<br />Timeouts can be customized has to be flushed in browser cache<br />Amount of local storage is device dependant and impacts reader performance (iOS 5M) <br />
    78. 78. PDF / ePub Support<br />Early support for static catalogues in prototype<br />Fixed versions of interactives<br />Fixed layout based on page size<br />Endnotes instead of inline footnotes/figures<br />
    79. 79. JUST <br />FOR FUN<br />Credit Flickr ~scotttboone<br />
    80. 80.
    81. 81.
    82. 82.
    83. 83.
    84. 84. We’ve tested this on all size screens<br />Iphone<br />Flatpanels 1,2,3, 4, column<br />3-screen<br />Tiled display wall<br />
    85. 85.
    86. 86. Future Extensions<br />Search<br />Faceting by Section (Volume, Cat#)<br />Search Notes/Highlights by Section<br />Facet by Tags on Notes<br />Revisions for Dated Citations<br />Collection Management Integration<br />OAI-PMH (LIDO)<br />
    87. 87. New Design Possibilities?<br />
    88. 88. Even More Extensions<br />Conservation Imaging tools<br />Overlays / Interactions / Image Registration<br />Print on Demand integration support<br />Add support for semantic markup<br />Need a good RDF schema that is meaningful for this domain before marking up content<br />Enhanced support for tablet and multi-touch<br />Automated Glossary / Index creation<br />Export / Archiving / Preservation<br />
    89. 89. THANK YOU!<br />
    90. 90.
    91. 91. Design goals for theonline reader<br />timtom/<br />
    92. 92. DESIGN GOALS FOR THE ONLINE READER<br />scotttboone/<br />
    93. 93. timtom/<br />
    94. 94. v<br />camil_t/<br />
    95. 95. charlestilford/<br />
    96. 96. jahdakinebrah/<br />
    97. 97. pietroizzo/<br />
    98. 98. photos/d-kav/<br />

    ×