Your SlideShare is downloading. ×
Simile Exhibit @ VGSom : A tutorial
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

Simile Exhibit @ VGSom : A tutorial

1,949
views

Published on

A tutorial on SIMILE Exhibit

A tutorial on SIMILE Exhibit

Published in: Education, Technology

0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,949
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
35
Comments
0
Likes
2
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. A TUTORIAL 2012 Simile Exhibit Submitted to: Dr. Prithwis Mukherjee Submitted by: Kanishka Chakraborty (10BM60036) Rahul Aggarwal (10BM60065) VGSoM, IIT Kharagpur
  • 2. ContentsIntroduction .................................................................................................................................................. 3SIMILE EXHIBIT .............................................................................................................................................. 6 Example-1: ................................................................................................................................................ 6 Example-2 ................................................................................................................................................. 7 Example-3 ................................................................................................................................................. 7 Example-4 ................................................................................................................................................. 8 Example-5 ................................................................................................................................................. 8EXHIBIT 3.0 .................................................................................................................................................... 9 a) Exhibit 3.0 Scripted ........................................................................................................................... 9 b) Exhibit 3.0 Staged.............................................................................................................................. 9 How to choose between Scripted and Staged Exhibit? ............................................................................ 9 Installing and Setting up Exhibit 3.0:......................................................................................................... 9 Creation of webpage using Exhibit ......................................................................................................... 11 Step 1: Gathering the tools ................................................................................................................. 11 Step 2: Collect Data & Build Spreadsheet ........................................................................................... 14 Step 3: Converting to Exhibit usable format ....................................................................................... 15 Step 4: Creation of the webpage ........................................................................................................ 19Troubleshooting .......................................................................................................................................... 25Tutorial on SIMILE Exhibit Page 2
  • 3. IntroductionSimile stands for "Semantic Interoperability of Metadata and Information in un-LikeEnvironments". It was a joint research project run by the World Wide Web Consortium (W3C),Massachusetts Institute of Technology Libraries and CSAIL (MIT Computer Science and ArtificialIntelligence Laboratory) and funded by the Andrew W. Mellon Foundation. The project ranfrom 2003 to August 2008. It focused on developing tools to increase the interoperability ofdisparate digital collections; much of SIMILEs technical focus is oriented towards Semantic Webtechnology and standards such as Resource Description Framework (RDF).The Semantic Web is a collaborative movement led by the World Wide Web Consortium (W3C)that promotes common formats for data on the World Wide Web. By encouraging the inclusionof semantic content in web pages, the Semantic Web aims at converting the current web ofunstructured documents into a "web of data". It builds on the W3Cs Resource DescriptionFramework (RDF). The RDF is a family of World Wide Web Consortium (W3C) specifications. Ithas come to be used as a general method for conceptual description or modeling ofinformation that is implemented in web resources, using a variety of syntax formats.SIMILE was focused on developing robust, open source tools that empower users to access,manage, visualize and reuse digital assets. SIMILE seeks to enhance inter-operability amongdigital assets, schemata/vocabularies/ontologies, metadata, and services.SIMILE leverages and extends DSpace, enhancing its support for arbitrary schemata andmetadata, primarily though the application of RDF and semantic web techniques mentionedabove. The project also aims to implement a digital asset dissemination architecture basedupon web standards. The dissemination architecture will provide a mechanism to add useful"views" to a particular digital artifact (i.e. asset, schema, or metadata instance), and bind thoseviews to consuming services.The SIMILE Project and its members are fully committed to the open source principles ofsoftware distribution and open development and for this reason, it releases the createdintellectual property (both software and reports) under a BSD-style license.Tutorial on SIMILE Exhibit Page 3
  • 4. The various tools published under SIMILE Project are as follows: 1. Zotz Zotz is a Firefox add-on giving you the ability to publish citations from your Zotero* to an Exhibit (via Citeline) in one step. * Zotero is powerful research tool that helps you gather, organize, and analyze sources (citations, full texts, web pages, images, and other objects), and lets you share the results of your research in a variety of ways. 2. Longwell A web-based highly-configurable faceted browser for RDF datasets. Longwell mixes the flexibility of the RDF data model with the effectiveness of the faceted browsing UI paradigm and enables you to visualize and browse any arbitrarily complex RDF dataset, allowing you to build a user-friendly web site out of your data within minutes and without requiring any code at all. 3. Piggy Bank An extension to the Firefox Web browser that turns it into a Semantic Web browser letting you make use of existing information on the Web in more useful and flexible ways not offered by the original Web sites. Piggy Bank is a Firefox extension that turns your browser into a mashup platform, by allowing you to extract data from different web sites and mix them together. 4. Solvent A Firefox extension that helps you write Javascript screen scrapers for Piggy Bank. 5. Semantic Bank The server companion of Piggy Bank that lets you persist, share and publish data collected by individuals, groups or communities. 6. Welkin A graphical graph visualizer powered by RDF data and capable of displaying graphs with a real-time interactive visualization. 7. Timeline A DHTML AJAX timeline widget for visualizing temporal information. With this widget, you can make beautiful interactive timelines.Tutorial on SIMILE Exhibit Page 4
  • 5. 8. Gadget An inspector for large quantities of XML data and its useful for useful in situations like exploration, migration, cleanup, evaluation schema emergence. This is normally useful in situations like: data understanding and exploration data migration/transformation data cleanup data complexity evaluation schema adherence understanding schema emergence 9. Referee Referee reads your web server logs, crawls your referrers (the links that point to your pages) and extract metadata from those pages and text around the links that pointed to your pages. The website says: “Ever wondered who links to your pages and what they say about them? Ever thought that trackback might be missing something? Ever subscribed an ego feed and hated the fact that the same stuff keeps coming up over and over like it was new? Ever hated those referrer spammers that pollute your autotrackback scripts? If so, Refree is for you”. 10. Babel Babel lets you convert between various data formats. In particular, it lets you convert data into the Exhibit JSON format and preview the data right inside Exhibit. 11. Exhibit Exhibit lets you create web pages with support for sorting, filtering, and rich visualizations by writing only HTML and optionally some CSS and Javascript code. There is no database and no web application technologies involved. 12. Appalachian Appalachian is a Firefox add-on that adds the ability to manage and use several OpenIDs to ease the login parts of your browsing experience. 13. Timeplot Timeplot is a cross-browser DHTML (canvas-based) time series plotting widget.Tutorial on SIMILE Exhibit Page 5
  • 6. 14. Seek Seek adds faceted browsing features to Mozilla Thunderbird and lets you search through your email more effectively. 15. Potluck Potluck is a research prototype for a user interface to mix and align structured data coming from different exhibits. 16. jsTeX jsTeX is a javascript library that is capable of interpreting some (basic) TeX encodings and transform them into HTML definitions right directly on a web page. 17. Citeline A web application to facilitate the web publishing of bibliographies and citation collections as interactive exhibits and facilitate the sharing of this type of data.SIMILE EXHIBITIt provides a Publishing Framework for Data-Rich Interactive Web Pages.Exhibit lets you easily create web pages with advanced text search and filtering functionalities,with interactive maps, timelines, and other visualizations like the following examples:Example-1: CSAIL Principal Investigators grouped by positions and their officeTutorial on SIMILE Exhibit Page 6
  • 7. Example-2: Billionaires in history – Where they are from?Example-3: US Cities by Population - Using Exhibit, this map can be made with just the twosimple files.Tutorial on SIMILE Exhibit Page 7
  • 8. Example-4: CIA World Factbook – People. It shows birth-rate Vs death-rate statistics. As theuser has clicked “Chinese” under language group, it has shown statistics for 9 countriesspeaking Chinese language:Example-5: Exhibit Timeline - 63 MIT-related Nobel Prize Winners being shown on a timelineaccording to the year in which they won Nobel Prize:Tutorial on SIMILE Exhibit Page 8
  • 9. EXHIBIT 3.0Exhibit 3.0 is the latest version of SIMILE EXHIBIT which lets you publish data-rich web pageswithout complicated programming. It can be used in two forms: a) Exhibit 3.0 Scripted (rc1): With Exhibit 3.0 Scripted mode, you can visualize data in a Web browser with a simple HTML-based configuration. No programming or server-side set up required. Exhibit 3.0 Scripted is designed for smaller data sets – for publishing rich interactive exhibits, with thousands of items, right in your Web browser. b) Exhibit 3.0 Staged (beta2): Staged mode requires the use of server software to publish bigger data sets. Exhibit 3.0 Staged mode extends the capacity of Exhibit by combining the in-browser software with greater capacity of a server-based component. The server stores and indexes data, and handles browser queries.How to choose between Scripted and Staged Exhibit?Smaller data sets numbering a few dozen, a few hundred, or up to a thousand items can run inthe browser using the Scripted mode of Exhibit. There is no set item limit for Scripted mode. Ifyour data set has smaller items with few properties and short values, you may find Scriptedmode handles a few thousand smaller items. No programming is required beyond the basicHTML you use to author an Exhibit page.Larger data sets – up to hundreds of thousands of items – are better suited to Staged mode.Running Staged mode requires that you host the server software yourself or locate a providerwho can host it for you.Installing and Setting up Exhibit 3.0:ScriptedSimply include the scripts hosted at simile-widgets.org in your page:<script src="http://api.simile-widgets.org/exhibit/3.0.0rc1/exhibit-api.js"type="text/javascript"></script>From within the repository, the code that needs to be served can be found at scripted/src/.Making the entire scripted/src/ directory available from your HTTP server is sufficient. Accessyour deployed Exhibit in your pages by using:<script src="http://yourserver/scripted/src/exhibit- api.js?bundle=false"></script>Tutorial on SIMILE Exhibit Page 9
  • 10. StagedExhibit 3.0 Staged runs on the Backstage server. Working with Backstage is not as simple asworking with Exhibit Scripted. In addition to HTML and publishing Web pages, Backstage is Javasoftware that acts as a server. Get the source:$ mkdir ~/e3src && cd ~/e3src$ git clone git://github.com/zepheira/babel.git$ git clone git://github.com/zepheira/backstage.git$ git clone git://github.com/zepheira/exhibit3.git$ svn checkout http://simile-butterfly.googlecode.com/svn/trunk/ butterfly Run the build commands:$ cd babel && mvn install$ cd ../butterfly && mvn install && ant build$ cd ../exhibit3/scripted && ant dist$ cd ../../backstage && mvn package Connect the Exhibit 3 scripts to the Web server:$ cd ../backstage && ln -s ~/e3src/exhibit3/scripted/dist modules/exhibit/api The startup script exists at ~/e3src/backstage/backstage. The following addition to web-­­app root of the web.xml document specifies a session timeoutof 1440 minutes (1 day):<session-config><session-timeout>1440</session-timeout></session-config> Execution: Once configured, run:$ ./backstageTutorial on SIMILE Exhibit Page 10
  • 11. Creation of webpage using ExhibitThis section will describe the step by step procedure of creating a webpage with the help ofSIMILE Exhibit. This widget from the SIMILE project helps in building semantic web-pageswithout the need of advanced programming. The following shows the steps followed: Gather the tools Collect data and Convert to Exhibit required build spreadsheet usable format Build the webpage using different Include timeline in views, lenses and the webpage facetsStep 1: Gathering the toolsBefore embarking on the journey of preparing a webpage using Exhibit, one must gather coupleof tools. These include the following: I. Text Editor The first thing required is an editor where one can write the HTML codes. Although it can be done with the help of common editors such as Notepad, Wordpad etc. it is better to go for Notepad++ (Windows user) / Text Wrangler (MAC users). For the purpose of this tutorial we will be using Notepad++. MAC users can download Text Wrangler here: Text WranglerTutorial on SIMILE Exhibit Page 11
  • 12. Notepad++ has many features which are useful for coding purpose. Visit http://notepad- plus.en.softonic.com/ to download the software. Click here to start the download. Once download is finished, the installer can be double clicked to start the installation. Proceed with your choice of installation language and installation directory. Complete the installation. Move on to the next step. II. Web Browser One needs to have a browser in order to run the webpage. Any of the following browsers will work: Mozilla Firefox, Google Chrome, Internet Explorer. For this tutorial Mozilla Firefox will utilized. Visit http://www.getfirefox.net/ and download the latest version of the browser.Tutorial on SIMILE Exhibit Page 12
  • 13. III. Microsoft Excel/Spreadsheet You also must have an application capable of creating spreadsheet. Spreadsheets act as an input to the Exhibit which results in creation of the WebPages. One can use Microsoft Excel, Google Spreadsheets or any other software. Google spreadsheets are available free of cost. One needs to follow the steps: Click the create Go to your Gmail Go to button and account Documents select spreadsheetTutorial on SIMILE Exhibit Page 13
  • 14. Step 2: Collect Data & Build SpreadsheetFor the purpose of this tutorial we have decided to build a webpage consisting of moviesreleased in a given month in various industries. The data has been collected from variousWikipedia pages related to Bollywood movies. The data was then compiled to form thefollowing spreadsheet:LABEL YEAR GENRE CAST DIRECTOR1971 2007 War Manoj Bajpai Amrit Sagar50 Lakh 2007 Drama Pawan Malhotra Chandra Sekhar Yeleti68 Pages 2007 NA NA NAAaja Nachle 2007 Musical Madhuri Dixit Anil MehtaAap Ka Suroor - The Real LoveStory 2007 Drama Himesh Reshammiya Prashant ChaddaAs you can see, the first row consists of the headers. It gives the field names of the variouscolumns. Each row starting from the second represents a record. It consists of the movie name,the industry it has been released, date of release etc. The following things must be consideredwhile constructing the spreadsheet: Name one column “Label”. This column must contain unique data. The label will help in identifying each record. Label YEAR GENRE CAST Aggar 2007 Drama Shreyas Talpade To store multiple data in a single cell, enter each data separated by a semi-colon. For example suppose a movie can be listed under two Genres – Romance & Comedy. To record the genres under the Genre header enter Comedy; Romance. TITLE YEAR GENRE GENRE Fool n Final 2007 Action Comedy; Romance Store dates in ISO 8601 format. It is important to make the date field compatible with Exhibit. Do not use quotes, exclamation marks, commas etc while name a field Be consistent in entering the data. Suppose you enter the Genre Comedy for one movie and comedy for another the movies will be considered to be from separate Genres.Tutorial on SIMILE Exhibit Page 14
  • 15. One can also use Multiple Spreadsheets to create the input data for Exhibit. In case multiplespreadsheets are used, the tables must be differentiated on the basis of “type” – a separatecolumn added in order to give an idea about the type of data the spreadsheet consists of.Label Type DIRECTORAggar Director Anant MahadevanNo Smoking Director Anurag KashyapRam Gopal Varma Ki Aag Director Ram Gopal VarmaLabel Type YEAR GENREAggar Movie 2007 DramaNo Smoking Movie 2007 DramaRam Gopal Varma Ki Aag Movie 2007 actionThese two spreadsheets can then be combined while converting them to Exhibit usable format(JSON). The conversion process is explained in the next stage.Step 3: Converting to Exhibit usable formatTo use the spreadsheet in building of the webpage, it must be first converted into a JSON(JavaScript Object Notation) file. It is a lightweight data-interchange format which is easy forhuman users to read and write and also easier on the part of a machine to parse andunderstand. Exhibit requires that the data fed into it is in JSON format. The spreadsheet createdcan be converted to JSON format using Babel. Visit http://service.simile-widgets.org/babel/ touse the application.It provides the option of converting various types of files to JSON format in addition to otheroutput formats. The following table lists the various input and output options provided bybabel.Input Types Output TypesBibtex Exhibit JSONExcel Exhibit JSONPExhibit JSON N3Exhibit embedding Web Page RDF/XMLJPEG RSS 1.0KML TextN3RDF/XMLTab-Separated ValuesTutorial on SIMILE Exhibit Page 15
  • 16. Select the format of Select the format Enter the the input data: Excel of the output location of the data: JSON file stored on your computerMultiple files can also be uploaded at the same time. After uploading the document click on theupload and preview button. This will generate a preview and give an option to download theJSON file. The JSON file consists of data that is Exhibit usable. Also the screen that next appearsconsists of the webpage that is created directly from the JSON file minus any formatting.Tutorial on SIMILE Exhibit Page 16
  • 17. The webpage in its raw form. This Click on this button to generate webpage has been created directly the JSON file which is shown as from the JSON file without any below formattingTutorial on SIMILE Exhibit Page 17
  • 18. A snippet of the JSON file created: { "items" : [ { "GENRE" : "Comedy", "label" : "Hari Puttar: A Comedy of Terrors", "type" : "Item", "CAST" : [ "u00A0Sweeny Khara","Sarika","u00A0Lilette Dubey","u00A0Zain Khan","u00A0Jackie Shroff","u00A0Saurabh Shukla","u00A0Vijay Raaz"], "DIRECTOR" : [ "u00A0Rajesh Bajaj", "Lucky Kohli" ], "TITLE" : "Hari Puttar: A Comedy of Terrors", "YEAR" : 2008 },As can be seen, each column item has been defined for the item labeled “Hari Puttar: A comedyof Terrors”. The contents of each column item such as cast, director etc have been shown in theJSON file. The webpage while loading uses the styling techniques defined in the HTML file andthe contents of this page. HTML page Webpage JSON fileTutorial on SIMILE Exhibit Page 18
  • 19. Step 4: Creation of the webpage This stage involves the creation of the HTML page that will define the contents and formatting of the webpage. We will provide with the ready to use code that you can directly copy and use. Make the changes as required by the type of data your spreadsheet consists of and you are ready to go. Follow the steps mentioned: I. Preparing the basic structure Open your notepad++. Then go to FileNew Copy the following into the file and save it as movies.html (remember saving as type HTML) <html> <head>This includes the <title>Movie Database</title>JSON file <link href="movies.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>This includes the </head>exhibit.js file. Thisfile consists of all <body>the codes <h1>Movie Database</h1>required for <table width="100%">preparing the <tr valign="top">webpage andbringing in the <td ex:role="viewPanel">various features <div ex:role="view"></div>supported by </td>exhibit. In other <td width="25%">words it will makeyour life simpler Code Area </td> </tr> </table> </body> </html> Tutorial on SIMILE Exhibit Page 19
  • 20. The above figure shows the webpage created with the help of the codes just written.Before moving on, some important points regarding Exhibit: <div> and <span> acts as templates for data display An <ex> is added to div or span in order to inform the Exhibit to handle it specially Views: Are used to define how a collection of data will be displayed onscreen Lenses: Lenses are used to define the formatting and styling of individual items Facets: These are used to include filtering features in the webpage II. Adding Filtering features Suppose you want to give options to the user of filtering the movies shown on the page based on Genre/Date of Release/Cast etc. As anyone with previous attempts on doing so will tell you, going by conventional way is very complex and requires programming skills. Exhibit really makes the whole task just a few clicks away (or rather a few Cltr+C &Tutorial on SIMILE Exhibit Page 20
  • 21. Cltr+V). To add the filtering feature one has to use the facet feature. This can be done by including the following codes in “Codes Area” of movies.html. <div ex:role="facet" ex:expression=".YEAR" ex:facetLabel="YEAR"></div> <div ex:role="facet" ex:expression=".CAST" ex:facetLabel="CAST"></div> <div ex:role="facet" ex:expression=".GENRE" ex:facetLabel="GENRE?"></div> <div ex:role="facet" ex:expression=".DIRECTOR" ex:facetLabel="DIRECTOR?"></div> Change these elements according to your spreadsheet elementsThe new boxes formed here are facets. Clicking on “2007” (suppose) will show the movies thatwere released in 2007 filtering out other information. This is a very useful tool as this will helpin displaying only those data that are of relevance to us. This makes looking for information onthe webpage much simpler. Another feature supported by facets is creation of search box. Thiscan be done with the help of the following code: Search : <div style="width:200px" ex:role="facet" ex:facetClass="TextSearch"></div>Tutorial on SIMILE Exhibit Page 21
  • 22. Just copy and paste it above the other facets code just added. This search button can be used tosearch for any text on the webpage. III. Adding Lenses To define how each individual item should look on the webpage lenses can be defined. They consist of the specific formatting for each of the element shown on the webpage. Include the following code inside the <div ex:role="view">: <table ex:role="lens" class="item"> <tr><td> <div ex:content=".label" class="name"></div> <div ex:content=".DIRECTOR" class="DIRECTOR"></div> <div ex:content=".YEAR" class="YEAR"></div> <div ex:content=".GENRE" class="GENRE"></div> <div ex:content=".CAST" class="CAST"></div> </td></tr> </table></div> Also add the following code inside the <style> Code here </style> body { margin: 1in;} table.item {border: 1px solid #ddd; Defines how each of the padding: 0.5em; } element the body, year elements, cast elements, genre div.name {font-weight: bold; elements and director elements font-size: 120%;} will look on the webpage. Make .YEAR { } changes to font color, size etc you want .CAST { font-style: italic; } .GENRE { color: #888; } .DIRECTOR { color: GREEN }Tutorial on SIMILE Exhibit Page 22
  • 23. Final webpageTutorial on SIMILE Exhibit Page 23
  • 24. IV. Adding timeline Another feature presented by SIMILE is timeline. It creates a pictorial showing various events categorized by the time of their occurrence. This can be included in the webpage with the following code: <div ex:role="view" ex:viewClass="Timeline" ex:start=".YEAR" ex:end=".YEAR" ex:topBandUnit="year" ex:topBandPixelsPerUnit="100" ex:bottomBandUnit="decade" ex:bottomBandPixelsPerUnit="500" ></div>Tutorial on SIMILE Exhibit Page 24
  • 25. TroubleshootingIf your Exhibit code doesn’t display as expected, check these things:1. Does your HTML file call the correct data file in the code?<link href=”nobelists.js” […]2. If you see JSON errors in your browser, double check your data file by running it throughJSONlint or another data validator. Exhibit 3.0 applies stricter JSON standards than Exhibit 2 did.3. Is your script tag pointing to a working installation of Exhibit 3.0? The Exhibit communityhosts a working installation here:http://api.simile-widgets.org/exhibit/3.0.0rc1/exhibit-api.js4. If the HTML header and title load, but your data does not display, double check the URLyou’re using to call the Exhibit JavaScript. Exhibit needs to be loaded and running in your Webserver.5. Open your browser’s error console to check whether Exhibit reported errors that might helpguide you to a solution.Tutorial on SIMILE Exhibit Page 25