Intro to Exhibit Workshop

3,965 views
3,796 views

Published on

A quick overview of the SIMILE offerings and a walk through using a modified version of the 2.2.0 tutorial in context.

Published in: Education, Technology
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,965
On SlideShare
0
From Embeds
0
Number of Embeds
122
Actions
Shares
0
Downloads
16
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Intro to Exhibit Workshop

  1. 1. Hands-On with Exhibit Presenting Research Products in a 'Simple'
 and Standards-based Fashion ! Shawn Day Queen’s University Library - 2 December 2013
  2. 2. Upcoming Seminars and Workshops ! ‣ ‣ ‣ ‣ ‣ 9 December - Telling Stories with Data – Collections Visualisation for Arts and Humanities Scholars (OMEKA) January - Digital Project Management Februrary - Hands On Workshop – Data Visualisation for Presentation February - Social Scholarship – Tools for Collaborative Research March - Data Visualisation for Textual and Spatial Analysis ! ‣ More to come: http://qubdh.co.uk
  3. 3. Objective ‣ To understand through hands-on 'doing' whether Exhibit might be of use in your research programmes ! ‣ Exhibit was developed at MIT to provide a lightweight framework for the presentation, searching and faceted browsing of digital collections. Exhibit lets you easily create web pages with advanced text search and filtering functionalities, with interactive maps, timelines, and other visualizations
  4. 4. Integrated Database of Text Files ‣ Simple
  5. 5. Combining Data Views
  6. 6. So What can you do with it? In Education
  7. 7. And in Fact for those with us two weeks ago … ‣ DHO:Discovery
  8. 8. Who is SIMILE? ‣ ‣ ‣ ‣ ‣ Semantic Interoperability of Metadata and Information in unLike Environments MIT Project - 2003-2011 MIT Library,W3C, Mellon-Funded A collection of tools to enhance inter-operatibility between digital objects Led to the SIMILE Widget Community
  9. 9. Others ‣ ‣ ‣ ‣ ‣ ‣ Appalachian (LogIns) Fresnel (RDF Library) HTTPTracer (Traffic Sniffer) jsTEX (TEX Render for Firefox) Zotz (publish from Zotero to Exhibit) Potluck (mixes Data from multiple Exhibits)
  10. 10. Babel ‣ Format Conversion between ! ! ! ! ! ! ! ‣ Get things ready for other tools …
  11. 11. Citeline ‣ ‣ ‣ ‣ Exhibit custom tweaked between 
 CSail and MIT Libraries Dedicated to rendering interactive bibliographies Wizard to take from bibtex to a full Exhibit Connectivity to Zotero (http://zotero.org)
  12. 12. Gadget ‣ ‣ ‣ ‣ ‣ An XML Inspector Display XML context
 in a graphical and
 browsable manner Open Source Free Approachable
  13. 13. Longwell ‣ ‣ ‣ ‣ An RDF Data Browser Customisable Graphical Comes from the Flamenco project that pioneered the concept of faceted browsing: "allow users to move through large information spaces in a flexible manner without feeling lost" "use of metadata is integrated with free-text search, allowing the user to follow links, then add search terms, then follow more links, without interrupting the interaction flow"
  14. 14. Piggybank ‣ ‣ ‣ ‣ ‣ ‣ ‣ Collect information from the Web Save information for future use Tag information with keywords Search & Browse collected information Retrieve saved information Share information you have collected Install screen scrapers - with SIMILE Solvent ! ‣ Similar to Evernote
  15. 15. RDFizers ‣ ‣ ‣ Tools to convert to RDF RDF for interoperability Linked Open Data Context + Content ‣ ‣ ‣ ‣ ‣ ‣ JPEG -> RDF MARC/MODS -> RDF OAI-PMH -> RDF EMail -> RDF BibTEX -> RDF RAW -> RDF ‣ ‣ ‣ ‣ ‣ ‣ ‣ ‣ ‣ ‣ ‣ Flat -> RDF Weather -> RDF Java -> RDF Javadoc -> RDF Random -> RDF iCal -> RDF RDF -> iCal Garmin -> RDF XLS -> RDF CSV -> RDF etc…
  16. 16. RDF is Cool Because … <http://www.flickr.com/photos/dajobe/196308964/> flickr:photo <http://farm1.static.flickr.com/57/196308964_b34cb0af68.jpg>, <http://farm1.static.flickr.com/57/196308964_b34cb0af68_m.jpg>, <http:// farm1.static.flickr.com/57/196308964_b34cb0af68_o.jpg>, <http:// farm1.static.flickr.com/57/196308964_b34cb0af68_s.jpg>, <http:// farm1.static.flickr.com/57/196308964_b34cb0af68_t.jpg> ; places:place [ places:id "WM3JEXSbBZqqRtGA" ; places:placeid "2467327" ; places:type "location" ; a places:Place ], [ places:id "WM3JEXSbBZqqRtGA" ; places:name "Pacific Grove" ; places:placeid "2467327" ; places:type "locality" ; a places:Place ], [ places:id "AQ4UpRqYA5l0BiyF .A" ; places:name "Monterey" ; places:placeid "12587696" ; places:type "county" ; a places:Place ], [ places:id "SVrAMtCbAphCLAtP" ; places:name "California" ; places:placeid "2347563" ; places:type "region" ; a places:Place ], [ places:id "4KO02SibApitvSBieQ" ; places:name "United States" ; places:placeid "23424977" ; places:type "country" ; a places:Place ]; dc:subject "jellyfish" ; dcterms:created "2006-07-22T22:28:50Z"^^xsd:dateTime ; dcterms:creator [ a foaf:Person ; foaf:maker <http://www.flickr.com/photos/dajobe/196308964/> ; foaf:name "Dave Beckett" ; foaf:nick "dajobe" ]; dcterms:dateSubmitted "2006-07-23T18:16:13Z"^^xsd:dateTime ; dcterms:issued "2006-07-23T18:16:13Z"^^xsd:dateTime ; dcterms:modified "2007-02-25T07:45:46Z"^^xsd:dateTime ; Source:Wattenberg and Viegas, Flickr Seasons Source: FlickCurl: http://librdf.org/flickcurl/
  17. 17. Referee ‣ Crawls Web Logs and Determines
 Who is Referencing your site
  18. 18. Seek ‣ Adds Faceted Browsing to Thunderbird
  19. 19. Semantic Bank ‣ ‣ ‣ Ties Longwell <——> Piggybank Create a Library of Linked Contextual
 Information for Use in Collaborative
 Environments Publish feed as RDF
  20. 20. Solvent ‣ ‣ Firefox Extension to Help Write Screenscarpers Web <—> Piggybank
  21. 21. Welkin ‣ View RDF as a Graph
  22. 22. Timeline
  23. 23. Timeplot
  24. 24. Why ‣ ‣ ‣ ‣ ‣ ‣ ‣ Simple Javascipt - Approachable - Example Based Modular Standards Based Doesn’t Require Server Technology Browser Based Allows focus on content not on the technology
  25. 25. Why ‣ ‣ ‣ ‣ ‣ ‣ ‣ ‣ ‣ ‣ Free, no cost Easy to use No programming skills required Open source platform Get involved, share your expertise, write code or add a demo Scalable - Staged mode scales to hundreds of thousands of items Lightweight publishing framework for building interactive web pages of linked data Supports search (Scripted mode), faceted navigation, interactive displays Easy to reconfigure and extend Supports customised data display
  26. 26. Setting the Stage ‣ What Do You need to Make the Magic Happen? ‣ ‣ ‣ A Text Editor - NotePad or Text Wrangler A Web Browser - Firefox? A Data Manipulation Tool - Excel, GoogleDocs? ! ‣ ‣ ‣ ‣ A Dataset An Open Mind A Few Hours Willingness to Play
  27. 27. Preparing your data for use in Exhibit ‣ Input Formats ‣ ‣ ‣ ‣ ‣ Output Formats Exhibit JSON Google Spreadsheet Generic JSONP From Babel ‣ ‣ ‣ ‣ ‣ ‣ ‣ ‣ BibTex Excel Exhibit Page JPEG RDF/XML Tab-Separated Values ‣ ‣ ‣ Exhibit JSON RDF/XML Semantic MediaWiki Tab-Separated Values BibTex
  28. 28. Structuring Your Data ‣ ‣ ‣ Rows and Columns A Row is an object in the collection A Column is a piece of metadata ! ‣ ‣ The Header is the First Row Let’s See an example
  29. 29. Let’s Start with our Data
  30. 30. Point Babel at your Excel Data File
  31. 31. Data Files ‣ ‣ ‣ ‣ ‣ An Array of Items Each Item a record Each items has properties Each property has a value Propeties surrounded by "" quotes ! ‣ Each Item muct have two properties: ‣ ‣ Label Type
  32. 32. Copy the Exhibit JSON produced
  33. 33. Validate the JSON produced
  34. 34. This is Where We Are Going
  35. 35. Exhibit in a Nutshell Data json file Description html file Browsable/ Searchable/Visual Website 'the Exhibit'
  36. 36. What Exhibit Does (Programatically) ‣ ‣ ‣ ‣ A web page is loaded The web page pulls in more code (the Exhibit framework) A lightweight database is created (within the browser) The Exhibit Object is created ‣ ‣ ‣ ‣ It extracts from the HTML the user interface It loads the data into memory It ten populates the database It waits for user interaction
  37. 37. Exercise 1 Putting Your Data on the Web
  38. 38. In Its Simplest Form ‣ ‣ ‣ ‣ ‣ ‣ ‣ index2-1.html <html> <head> <title>MIT Nobel Prize Winners</title> <link href="nobelists.js" type="application/json" rel="exhibit/data" /> <script src=http://static.simile.mit.edu/exhibit/api-2.0/exhibit-api.js type="text/javascript"></script> <style></style> </head> ! ‣ ‣ ‣ ‣ ‣ ‣ ‣ ‣ <body> <h1>MIT Nobel Prize Winners</h1> <table width="100%”> <tr valign="top”> <td ex:role="viewPanel”><div ex:role="view"></div></td><td width="25%”>browsing controls here… </td></tr> </table> </body> </html>
  39. 39. Know Your Data - Semantic { "items" : [ { type : "Nobelist", label : "Burton Richter", latlng: "42.359089,-71.093412", discipline : "Physics", shared : "yes", "last-name" : "Richter", "nobel-year" : "1976", relationship : "alumni", "co-winner" : "Samuel C.C. Ting", "relationship-detail" : "MIT S.B. 1952, Ph.D. 1956", imageURL : "http://nobelprize.org/nobel_prizes/physics/laureates/1976/ richter_thumb.jpg" }, ……… ]} nobelists.js
  40. 40. A Simple but Subtle Result index2-1.html
  41. 41. Stepping It Up - Faceted Browsing ‣ ‣ Explore data in context Filter data by attributes ! ‣ Extract the metadata from the data
  42. 42. The Faceted Browsing Code <div ex:role="facet" ex:expression=".discipline"
 ex:facetLabel="Discipline"></div> <div ex:role="facet" ex:expression=".relationship"
 ex:facetLabel="Relationship"></div> <div ex:role="facet" ex:expression=".shared"
 ex:facetLabel="Shared?"></div> <div ex:role="facet" ex:expression=".deceased"
 ex:facetLabel="Deceased?"></div>
  43. 43. Leveraging the Context of the Data index2-2.html
  44. 44. A Sidenote on Interchange ‣ That Little Orange Button ! ‣ ‣ A Lot of Power Regardless of how you provide
 data —> Exhibit will export in
 a variety of forms
  45. 45. Search Code index2-3.html <div ex:role="facet" ex:facetClass="TextSearch"></div>
  46. 46. Initial Sort Code index2-4.html <div ex:role="view" ex:orders=".discipline, .nobel-year"></ div>
  47. 47. Provide Possible Sort Options index2-5.html <div ex:role="view" ex:orders=".discipline, .nobel-year" ex:possibleOrders=".label, .lastname, .discipline, .relationship, .shared, .deceased, .nobelyear"></div>
  48. 48. Add a Table View <div ex:role="exhibit-view" ex:viewClass="Exhibit.TabularView" ex:columns=".label, .imageURL, .discipline, .nobel
 year, .relationship-detail" ex:columnLabels="name, photo, discipline, year, relationship
 with MIT" ex:columnFormats="list, image, list, list, list" ex:sortColumn="3" ex:sortAscending="false"> </div>
  49. 49. Now There’s Some Changes! index2-6.html
  50. 50. Table Considerations ‣ ‣ ‣ Header Titles - Sortable Full table styling now available Tables require knowing data formats
  51. 51. Working with Lenses <table ex:role="lens" class="nobelist"> <tr><td><img ex:src-content=".imageURL" /></td> <td><div ex:content=".label" class="name"></div> <div><span ex:content=".discipline" class="discipline"></span>, <span ex:content=".nobel-year" class="year"></span></div> <div ex:if-exists=".co-winner" class="co-winners">Co-winners: <span ex:content=".co-winner"></span></div> <div ex:content=".relationship-detail" class="relationship"></div> </td></tr> </table> ! Can You See what has happened? index2-7.html
  52. 52. Thinking Aesthetically index2-7.html <style> body { margin: 1in; font-family: "Helvetica","Arial", "Lucida Grande","Tahoma",sans-serif; background-color: #F7F8E0; background-image:url('nobel-prize2.png'); background-repeat:no-repeat; } footer { margin: 1in; font-family: "Helvetica","Arial", "Lucida Grande","Tahoma",sans-serif; background-color: #FFFFFF; } table.nobelist { border: 1px solid #ddd; padding: 0.5em; } div.name { font-weight: bold; font-size: 120%; } .discipline { } .year { font-style: italic; } .relationship { color: #888; } .co-winners { } </style>
  53. 53. To Take Stock ‣ ‣ ‣ ‣ We have taken a datafile and created a website that displays that data; We have added means for the user to search, sort and filter the data; We have added a new view to that website so that a user can choose different means to view the data; We have started to style the textual presentation. ! ‣ Let’s take a quick look at our data before we go further
  54. 54. Giving Co-Winners Credit index2-8.html "types": { "Nobelist" : { "pluralLabel": "Nobelists" } },
  55. 55. Being Grammatically Correct index2-8.html "properties": { "co-winner": { "valueType": "item" } },
  56. 56. Exercise 2 Adding New Visual Dimensions to your Exhibit index2-8.html nobelists1.js
  57. 57. Add a Timeline <script src="http://api.simile-widgets.org/exhibit/2.2.0/extensions/time/timeextension.js" type="text/javascript"></script> ! + ! <div ex:role="view" ex:viewClass="Timeline" ex:start=".nobel-year" ex:colorKey=".discipline"> </div>
  58. 58. Add a Timeline index2-9.html
  59. 59. Timeline Considerations
  60. 60. Dates ‣ ‣ ISO - 8601 So What’s That? ! ‣ ‣ ‣ ‣ At Minimum YYYY YYYY-MM-DD or YYYY-MM YYYY ! ‣ hh:mm:ss
  61. 61. A Note on Exhibit and 'ViewPanels' ‣ ‣ ‣ ‣ ‣ If you change: <td ex:role="viewPanel"> to <td> You get a very different (non-tabbed presentation) index2-91.html
  62. 62. The Thumbnail View ‣ index2-95.html Add the following ViewPanel to your html file: ! <div ex:role="view" ex:viewClass="Thumbnail" ex:showAll="true" ex:orders=".discipline" ex:possibleOrders=".label, .lastname, .discipline, .relationship, .shared, .deceased, .nobelyear">
  63. 63. The Thumbnail View index2-95.html
  64. 64. Exercise 3 Adding a Spatial Dimension
  65. 65. Add a Map View <script src="http://static.simile.mit.edu/exhibit/extensions-2.0/map/ map-extension.js"></script> ! + ! <div ex:role="view" ex:viewClass="Map" ex:latlng=".latlng" ex:pin="true"> </div>
  66. 66. Add Map View index2-10.html
  67. 67. Geospatial Considerations ‣ ‣ ‣ ‣ ‣ Have you got an hour or two or days? Can choose from Google versus OpenStreetMap Multiple Location for each item Getting the long lat data you need - geocoding Lenses Apply to the Bubble displayed
  68. 68. What Else Can You Add? Views ‣ Bar Charts ‣ Line Charts ‣ Calendars ‣ Scatter Plot ‣ PivotTables ‣ Timeplots ! ! Facets ‣ Lists ‣ Numeric Range ‣ Text Search ‣ Tag Cloud ‣ Slider ‣ Image ‣ Heirarchical
  69. 69. Exhibit in a Nutshell ‣ ‣ ‣ ‣ ‣ ‣ Pros Simple Lightweight No server required A host of visualisations Embeddable in other systems - ExhibitPress ! ! ‣ ‣ ‣ ‣ ‣ Cons Limited Scalability Some cross-browser issues Restrictions on Look and Feel Extensive customisation means getting into code
  70. 70. Making Exhibit Choices ‣ ‣ ‣ There is a Stable Proven Choice - Exhibit 2.2 There is an all new more standards-compliant Exhibit 3 Exhibit 3 comes in Two Flavours ‣ ‣ Exhibit Scripted - Like Exhibit 2 with streamlining and some visual improvements Exhibit Stages - Server Based, Robust, Scalable and the Future ! ‣ ‣ ‣ Exhibit 2.2 offers all whizzy features Exhibit 3 is faster but not fully ported (if you need maps?) Exhibit 3 Staged is a new, powerful, professional tool
  71. 71. Alternatives ‣ ‣ ‣ ‣ Aeon Timeline WordPress Drupal Stay Tuned for CMS…
  72. 72. Where to Go Next ‣ http://qubdh.co.uk/events/an-introduction-to-exhibit ! ‣ ‣ ‣ ‣ Links Examples A different sort of tutorial: The Exhibit Wiki and GitHub Pages ! ‣ http://www.simile-widgets.org
  73. 73. Upcoming Seminars and Workshops ! ‣ ‣ ‣ ‣ ‣ 9 December - Telling Stories with Data – Collections Visualisation for Arts and Humanities Scholars (OMEKA) January - Digital Project Management Februrary - Hands On Workshop – Data Visualisation for Presentation February - Social Scholarship – Tools for Collaborative Research March - Data Visualisation for Textual and Spatial Analysis ! ‣ More to come: http://qubdh.co.uk
  74. 74. Thank You Shawn Day - s.day@qub.co.uk - @iridium ! The Library/Institute for Collaborative Research in the Humanities
 18 University Square - Ground Floor http://qubdh.co.uk

×