How to make a publications exhibit

From SIMILE Widgets
Revision as of 23:16, 18 September 2016 by Karger (Talk | contribs)
(diff) ← Older revision | Latest revision (diff) | Newer revision → (diff)
Jump to: navigation, search

Contents

Problem

You have one or more BibTeX files and you've been dying to make a decent web page to show them, and you want to support sorting and filtering.

And yet, you don't have time to whip up a database or learn ASP, PHP, JSP, XML, XSL, CGI, or whatever acronyms that have been popping up every other day. But you can manage with some HTML and maybe some CSS.

Here's a 2 step solution:

Step 1. Making Your Bibtex Files Publicly Accessible

Well, that just means putting them on a web server somewhere so you can see them by pointing to an http://... URL.

Step 2. Making the HTML File

Copy the following HTML code into your text editor and save it as an .html file. Replace "...put your bibtex URL here..." appropriately.

   <html>
   <head>
       <title>My Publications Exhibit</title>
       <link rel="exhibit-babel" href="http://service.simile-widgets.org/babel/"/>
       <script src="https://api.simile-widgets.org/exhibit/current/exhibit-api.js" type="text/javascript"></script>
       <link rel="exhibit/data"
          href="...put your bibtex URL here..." 
          type="application/x-bibtex" />
       
       <style>
           body {
               font-family: sans-serif;
           }
           div.publication { margin-bottom: 1em; padding: 1em; border: 1px solid #ccc; }
           div.author {}
           div.title { font-weight: bold; font-size: 120%; }
       </style>
   </head>
   <body>
       <h1>My Publications Exhibit</h1>
       <table width="100%">
           <tr valign="top">
               <td>
                       <div data-ex-role="collection" data-ex-item-types="Publication"></div>
                       <div data-ex-role="exhibit-lens" ex:itemTypes="Publication" class="publication" style="display: none">
                           <span data-ex-control="copy-button" style="float: right"></span>
                           <div class="title"><span data-ex-content=".label"></span></div>
                           <div class="authors"><span data-ex-content=".author"></span></div>
                           <p data-ex-content=".abstract"></p>
                       </div>
                       <div data-ex-role="exhibit-lens" ex:itemTypes="Author" class="author" style="display: none">
                           <span data-ex-control="copy-button" style="float: right"></span>
                           <div class="title"><span data-ex-content=".label"></span></div>
                           
                           <ol class="publications" data-ex-content="!author">
                               <li data-ex-content="value"></li>
                           </ol>
                       </div>
                       <div data-ex-role="view"
                           data-ex-view-class="TileView"
                           data-ex-orders=".pub-type"
                           data-ex-possible-orders=".pub-type, .author, .year, .label"></div>
               </td>
               <td width="30%">
                   <div data-ex-role="facet" data-ex-expression=".pub-type"></div>
                   <div data-ex-role="facet" data-ex-ex:expression=".author"></div>
                   <div data-ex-role="facet" data-ex-expression=".year"></div>
               </td>
           </tr>
       </table>
   </body>
   </html>

Drag your HTML file to your browse and, voila, you should see your bibtex data as an exhibit. Here's an example using this method.

Customizing Your Publications Exhibit

Of course you'll want to make the exhibit look like the rest of your web site. You can rearrange the HTML code however you like. Change the CSS styles as you wish. Move things around. Add more stuff. Iterate until satisfied.

Optimizing Your Exhibit

Note that this method of getting your BibTeX files to show up in an exhibit is very quick. But because it makes use of our Babel service to convert the bibtex files into Exhibit's native format on-the-fly, it tends to make your exhibit slow. You might want to use Babel to convert your files just once and include the converted data into the exhibit instead. Here is how:

  • Browse to this site: http://simile.mit.edu/babel/. Hold down the Ctrl key while you click on that link so that you get a new window and don't lose these instructions.
  • Select "Bibtex" in the "from format" list.
  • Select "Exhibit JSON" in the "to format" list.
  • Click the "Browse" button and locate your bibtex file on your computer.
  • Click the "Upload and Convert" button.
  • Save the converted data as a .js or .json file in the same directory as your html file.
  • Change the link in the html file to point to that data file instead, e.g.,

<js> <link rel="exhibit/data"

    href="data.json" 
    type="application/json" />

</js>

Working from Zotero

Zotero is a free, easy-to-use Firefox extension to help you collect, manage, cite, and share your research sources. To share your Zotero collection through Exhibit will require a bit more work than what is presented above. To understand the problems and solutions, consult the discussion page at Zotero site. Because, at this writing, Zotero has greater active support and development than Babel does, increased compatibility with Exhibit is likely to originate there.

Personal tools
Namespaces
Variants
Actions
Navigation
Toolbox