index.html.itex: Convert index.html to itex2MML-generated source
authorW. Trevor King <wking@tremily.us>
Wed, 22 May 2013 00:10:22 +0000 (20:10 -0400)
committerW. Trevor King <wking@tremily.us>
Wed, 22 May 2013 00:10:22 +0000 (20:10 -0400)
For easy math inclusion.  Also fill in the bulk of my talk, up to the
salt stuff.  All of the figure generation is handled by the Makefile,
just run `make` and point your browser at the generated index.html.

Makefile [new file with mode: 0644]
css/local.css [new file with mode: 0644]
index.html [deleted file]
index.html.itex [new file with mode: 0644]

diff --git a/Makefile b/Makefile
new file mode 100644 (file)
index 0000000..ddc0149
--- /dev/null
+++ b/Makefile
@@ -0,0 +1,135 @@
+SRC = media/src
+DEST = media/build
+
+# full-sized image dimensions
+WIDTH = 960
+HEIGHT = 480
+
+HALF_WIDTH = 480
+HALF_HEIGHT = 240
+
+THIRD_WIDTH = 320
+THIRD_HEIGHT = 160
+
+THUMBNAILS = \
+       $(DEST)/1TIT-atoms.mp4 \
+       $(DEST)/takamori-fig4b-fw-fh.png \
+       $(DEST)/skeletal-muscle-fw-fh.png \
+       $(DEST)/titin-fw-fh.png \
+       $(DEST)/1TIT-fw-fh.png \
+       $(DEST)/1TIT-tw-th.png \
+       $(DEST)/pirchi-fig1-fw-hh.png \
+       $(DEST)/afm-3d-fw-fh.png \
+       $(DEST)/contact-afm.ogv \
+       $(DEST)/afm-fw-fh.png \
+       $(DEST)/piezo-fw-fh.png \
+       $(DEST)/unfolding-fw-fh.png \
+       $(DEST)/unfolding-hw-fh.png \
+       $(DEST)/unfolding-hw-hh.png \
+       $(DEST)/expt-sawtooth-fw-fh.png \
+       $(DEST)/expt-sawtooth-hw-hh.png \
+       $(DEST)/carrion-vazquez-fig2-fw-fh.png \
+       $(DEST)/lu-fig1-fw-fh.png \
+       $(DEST)/apparatus-fw-fh.png \
+       $(DEST)/labview-fw-fh.png \
+       $(DEST)/pyafm-fw-fh.png \
+       $(DEST)/ants-fw-fh.png \
+       $(DEST)/cantilever.jpg \
+       $(DEST)/tip.jpg \
+       $(DEST)/vibration-fw-fh.png \
+       $(DEST)/vibration-hw-fh.png \
+       $(DEST)/bump-fw-fh.png \
+       $(DEST)/florin-fig2-hw-fh.png \
+       $(DEST)/pbs-hist-hw-hh.png \
+       $(DEST)/sawsim-states-hw-fh.png \
+       $(DEST)/sawsim-states-hw-hh.png \
+       $(DEST)/monte-carlo-fw-fh.png \
+       $(DEST)/landscape-hw-hh.png \
+       $(DEST)/landscape-hw-fh.png \
+       $(DEST)/landscape-bell-hw-hh.png \
+       $(DEST)/kramers-integrand-hw-hh.png \
+       $(DEST)/wlc-model-hw-fh.png \
+       $(DEST)/fjc-model-hw-fh.png \
+       $(DEST)/fit-valley-fw-fh.png \
+       $(DEST)/1TIT-hbond-fw-fh.png
+
+#      $(DEST)/landscape-cant-hw-hh.png
+
+.PRECIOUS: $(DEST)/% $(DEST)/%.png $(DEST)/%.pdf
+
+all: index.html $(THUMBNAILS)
+
+clean:
+       rm -f index.html $(DEST)/* $(SRC)/pymol/*-0*.png
+
+%: %.itex
+       itex2MML < "$(<)" > "$(@)"
+
+## Get the high-resolution source into PNG format
+
+# plain copy
+$(DEST)/%: $(SRC)/binary/%
+       cp "$(<)" "$(@)"
+
+# TODO: re-render and crop?
+$(DEST)/%: $(SRC)/matplotlib/%
+       cp "$(<)" "$(@)"
+
+# TODO: re-render and crop?
+$(DEST)/%: $(SRC)/tikz/%
+       cp "$(<)" "$(@)"
+
+# TODO: extract from the VI?  (probably not ;)
+$(DEST)/%: $(SRC)/labview/%
+       cp "$(<)" "$(@)"
+
+# convert JPEGs
+$(DEST)/%.png: $(SRC)/binary/%.jpg
+       convert "$(<)" "$(@)"
+
+# convert PDFs
+$(DEST)/%.png: $(SRC)/binary/%.pdf
+       convert -density 350 "$(<)" "$(@)"
+
+# compile Asymptote graphics
+$(DEST)/%.pdf: $(SRC)/asy/%.asy
+       asy -noprc -render=0 -f pdf -cd "$(<D)" -o "$(*).pdf" "$(*).asy"
+       mv "$(<D)/$(*).pdf" "$(@)"
+
+# convert Asympote PDFs
+$(DEST)/%.png: $(DEST)/%.pdf
+       convert -density 350 "$(<)" "$(@)"
+
+# convert PyMol images
+$(DEST)/%.png: $(SRC)/pymol/%.pml
+       cd "$(SRC)/pymol" && pymol -cq "$(*).pml"
+       mv "$(SRC)/pymol/$(*).png" "$(@)"
+
+# convert PyMol images
+$(DEST)/%.mp4: $(SRC)/pymol/%.pml
+       cd "$(SRC)/pymol" && pymol -cq "$(*).pml"
+       ffmpeg -y -r 20 -i "$(SRC)/pymol/$(*)-%4d.png" -s 640x480 -vcodec libx264 \
+               -preset slower -vpre ipod640 -b:v 800k -bt 800k -aspect 640:480 \
+               -threads 0 "$(@)"
+
+## Convert to the desired geometry
+
+# full width, full height
+$(DEST)/%-fw-fh.png: $(DEST)/%.png
+       convert -format png -strip -quality 95 "$(<)" -thumbnail $(WIDTH)x$(HEIGHT) "$(@)"
+
+# half width, full height
+$(DEST)/%-hw-fh.png: $(DEST)/%.png
+       convert -format png -strip -quality 95 "$(<)" -thumbnail $(HALF_WIDTH)x$(HEIGHT) "$(@)"
+
+# full width, half height
+$(DEST)/%-fw-hh.png: $(DEST)/%.png
+       convert -format png -strip -quality 95 "$(<)" -thumbnail $(WIDTH)x$(HALF_HEIGHT) "$(@)"
+
+# half width, half height
+$(DEST)/%-hw-hh.png: $(DEST)/%.png
+       convert -format png -strip -quality 95 "$(<)" -thumbnail $(HALF_WIDTH)x$(HALF_HEIGHT) "$(@)"
+
+# third width, third height
+$(DEST)/%-tw-th.png: $(DEST)/%.png
+       convert -format png -strip -quality 95 "$(<)" -thumbnail $(THIRD_WIDTH)x$(THIRD_HEIGHT) "$(@)"
diff --git a/css/local.css b/css/local.css
new file mode 100644 (file)
index 0000000..66e6984
--- /dev/null
@@ -0,0 +1,4 @@
+table.center {
+       margin-left: auto; 
+       margin-right: auto;
+}
diff --git a/index.html b/index.html
deleted file mode 100644 (file)
index 3670474..0000000
+++ /dev/null
@@ -1,366 +0,0 @@
-<!doctype html>
-<html lang="en">
-
-       <head>
-               <meta charset="utf-8">
-
-               <title>reveal.js - The HTML Presentation Framework</title>
-
-               <meta name="description" content="A framework for easily creating beautiful presentations using HTML">
-               <meta name="author" content="Hakim El Hattab">
-
-               <meta name="apple-mobile-web-app-capable" content="yes" />
-               <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
-
-               <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
-
-               <link rel="stylesheet" href="css/reveal.min.css">
-               <link rel="stylesheet" href="css/theme/default.css" id="theme">
-
-               <!-- For syntax highlighting -->
-               <link rel="stylesheet" href="lib/css/zenburn.css">
-
-               <!-- If the query includes 'print-pdf', use the PDF print sheet -->
-               <script>
-                       document.write( '<link rel="stylesheet" href="css/print/' + ( window.location.search.match( /print-pdf/gi ) ? 'pdf' : 'paper' ) + '.css" type="text/css" media="print">' );
-               </script>
-
-               <!--[if lt IE 9]>
-               <script src="lib/js/html5shiv.js"></script>
-               <![endif]-->
-       </head>
-
-       <body>
-
-               <div class="reveal">
-
-                       <!-- Any section element inside of this container is displayed as a slide -->
-                       <div class="slides">
-
-                               <section>
-                                       <h1>Reveal.js</h1>
-                                       <h3>HTML Presentations Made Easy</h3>
-                                       <p>
-                                               <small>Created by <a href="http://hakim.se">Hakim El Hattab</a> / <a href="http://twitter.com/hakimel">@hakimel</a></small>
-                                       </p>
-                               </section>
-
-                               <section>
-                                       <h2>Heads Up</h2>
-                                       <p>
-                                               reveal.js is a framework for easily creating beautiful presentations using HTML. You'll need a browser with
-                                               support for CSS 3D transforms to see it in its full glory.
-                                       </p>
-
-                                       <aside class="notes">
-                                               Oh hey, these are some notes. They'll be hidden in your presentation, but you can see them if you open the speaker notes window (hit 's' on your keyboard).
-                                       </aside>
-                               </section>
-
-                               <!-- Example of nested vertical slides -->
-                               <section>
-                                       <section>
-                                               <h2>Vertical Slides</h2>
-                                               <p>
-                                                       Slides can be nested inside of other slides,
-                                                       try pressing <a href="#" class="navigate-down">down</a>.
-                                               </p>
-                                               <a href="#" class="image navigate-down">
-                                                       <img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
-                                               </a>
-                                       </section>
-                                       <section>
-                                               <h2>Basement Level 1</h2>
-                                               <p>Press down or up to navigate.</p>
-                                       </section>
-                                       <section>
-                                               <h2>Basement Level 2</h2>
-                                               <p>Cornify</p>
-                                               <a class="test" href="http://cornify.com">
-                                                       <img width="280" height="326" src="https://s3.amazonaws.com/hakim-static/reveal-js/cornify.gif" alt="Unicorn">
-                                               </a>
-                                       </section>
-                                       <section>
-                                               <h2>Basement Level 3</h2>
-                                               <p>That's it, time to go back up.</p>
-                                               <a href="#/2" class="image">
-                                                       <img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Up arrow" style="-webkit-transform: rotate(180deg);">
-                                               </a>
-                                       </section>
-                               </section>
-
-                               <section>
-                                       <h2>Slides</h2>
-                                       <p>
-                                               Not a coder? No problem. There's a fully-featured visual editor for authoring these, try it out at <a href="http://slid.es" target="_blank">http://slid.es</a>.
-                                       </p>
-                               </section>
-
-                               <section>
-                                       <h2>Point of View</h2>
-                                       <p>
-                                               Press <strong>ESC</strong> to enter the slide overview.
-                                       </p>
-                                       <p>
-                                               Hold down alt and click on any element to zoom in on it using <a href="http://lab.hakim.se/zoom-js">zoom.js</a>. Alt + click anywhere to zoom back out.
-                                       </p>
-                               </section>
-
-                               <section>
-                                       <h2>Works in Mobile Safari</h2>
-                                       <p>
-                                               Try it out! You can swipe through the slides and pinch your way to the overview.
-                                       </p>
-                               </section>
-
-                               <section>
-                                       <h2>Marvelous Unordered List</h2>
-                                       <ul>
-                                               <li>No order here</li>
-                                               <li>Or here</li>
-                                               <li>Or here</li>
-                                               <li>Or here</li>
-                                       </ul>
-                               </section>
-
-                               <section>
-                                       <h2>Fantastic Ordered List</h2>
-                                       <ol>
-                                               <li>One is smaller than...</li>
-                                               <li>Two is smaller than...</li>
-                                               <li>Three!</li>
-                                       </ol>
-                               </section>
-
-                               <section data-markdown>
-                                       <script type="text/template">
-                                               ## Markdown support
-
-                                               For those of you who like that sort of thing. Instructions and a bit more info available [here](https://github.com/hakimel/reveal.js#markdown).
-
-                                               ```
-                                               <section data-markdown>
-                                                 ## Markdown support
-
-                                                 For those of you who like that sort of thing.
-                                                 Instructions and a bit more info available [here](https://github.com/hakimel/reveal.js#markdown).
-                                               </section>
-                                               ```
-                                       </script>
-                               </section>
-
-                               <section id="transitions">
-                                       <h2>Transition Styles</h2>
-                                       <p>
-                                               You can select from different transitions, like: <br>
-                                               <a href="?transition=cube#/transitions">Cube</a> -
-                                               <a href="?transition=page#/transitions">Page</a> -
-                                               <a href="?transition=concave#/transitions">Concave</a> -
-                                               <a href="?transition=zoom#/transitions">Zoom</a> -
-                                               <a href="?transition=linear#/transitions">Linear</a> -
-                                               <a href="?transition=fade#/transitions">Fade</a> -
-                                               <a href="?transition=none#/transitions">None</a> -
-                                               <a href="?#/transitions">Default</a>
-                                       </p>
-                               </section>
-
-                               <section id="themes">
-                                       <h2>Themes</h2>
-                                       <p>
-                                               Reveal.js comes with a few themes built in: <br>
-                                               <a href="?theme=sky#/themes">Sky</a> -
-                                               <a href="?theme=beige#/themes">Beige</a> -
-                                               <a href="?theme=simple#/themes">Simple</a> -
-                                               <a href="?theme=serif#/themes">Serif</a> -
-                                               <a href="?theme=night#/themes">Night</a> -
-                                               <a href="?#/themes">Default</a>
-                                       </p>
-                                       <p>
-                                               <small>
-                                                       * Theme demos are loaded after the presentation which leads to flicker. In production you should load your theme in the <code>&lt;head&gt;</code> using a <code>&lt;link&gt;</code>.
-                                               </small>
-                                       </p>
-                               </section>
-
-                               <section>
-                                       <section data-state="alert">
-                                               <h2>Global State</h2>
-                                               <p>
-                                                       Set <code>data-state="something"</code> on a slide and <code>"something"</code>
-                                                       will be added as a class to the document element when the slide is open. This lets you
-                                                       apply broader style changes, like switching the background.
-                                               </p>
-                                               <a href="#" class="image navigate-down">
-                                                       <img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
-                                               </a>
-                                       </section>
-                                       <section data-state="blackout">
-                                               <h2>"blackout"</h2>
-                                               <a href="#" class="image navigate-down">
-                                                       <img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Down arrow">
-                                               </a>
-                                       </section>
-                                       <section data-state="soothe">
-                                               <h2>"soothe"</h2>
-                                               <a href="#" class="image navigate-next">
-                                                       <img width="178" height="238" src="https://s3.amazonaws.com/hakim-static/reveal-js/arrow.png" alt="Up arrow" style="-webkit-transform: rotate(-90deg);">
-                                               </a>
-                                       </section>
-                               </section>
-
-                               <section data-state="customevent">
-                                       <h2>Custom Events</h2>
-                                       <p>
-                                               Additionally custom events can be triggered on a per slide basis by binding to the <code>data-state</code> name.
-                                       </p>
-                                       <pre><code data-trim contenteditable style="font-size: 18px; margin-top: 20px;">
-Reveal.addEventListener( 'customevent', function() {
-       console.log( '"customevent" has fired' );
-} );
-                                       </code></pre>
-                               </section>
-
-                               <section>
-                                       <h2>Clever Quotes</h2>
-                                       <p>
-                                               These guys come in two forms, inline: <q cite="http://searchservervirtualization.techtarget.com/definition/Our-Favorite-Technology-Quotations">
-                                               &ldquo;The nice thing about standards is that there are so many to choose from&rdquo;</q> and block:
-                                       </p>
-                                       <blockquote cite="http://searchservervirtualization.techtarget.com/definition/Our-Favorite-Technology-Quotations">
-                                               &ldquo;For years there has been a theory that millions of monkeys typing at random on millions of typewriters would
-                                               reproduce the entire works of Shakespeare. The Internet has proven this theory to be untrue.&rdquo;
-                                       </blockquote>
-                               </section>
-
-                               <section>
-                                       <h2>Pretty Code</h2>
-                                       <pre><code data-trim contenteditable>
-function linkify( selector ) {
-  if( supports3DTransforms ) {
-
-    var nodes = document.querySelectorAll( selector );
-
-    for( var i = 0, len = nodes.length; i &lt; len; i++ ) {
-      var node = nodes[i];
-
-      if( !node.className ) ) {
-        node.className += ' roll';
-      }
-    };
-  }
-}
-                                       </code></pre>
-                                       <p>Courtesy of <a href="http://softwaremaniacs.org/soft/highlight/en/description/">highlight.js</a>.</p>
-                               </section>
-
-                               <section>
-                                       <h2>Intergalactic Interconnections</h2>
-                                       <p>
-                                               You can link between slides internally,
-                                               <a href="#/2/3">like this</a>.
-                                       </p>
-                               </section>
-
-                               <section>
-                                       <section>
-                                               <h2>Fragmented Views</h2>
-                                               <p>Hit the next arrow...</p>
-                                               <p class="fragment">... to step through ...</p>
-                                               <ol>
-                                                       <li class="fragment"><code>any type</code></li>
-                                                       <li class="fragment"><em>of view</em></li>
-                                                       <li class="fragment"><strong>fragments</strong></li>
-                                               </ol>
-
-                                               <aside class="notes">
-                                                       This slide has fragments which are also stepped through in the notes window.
-                                               </aside>
-                                       </section>
-                                       <section>
-                                               <h2>Fragment Styles</h2>
-                                               <p>There's a few styles of fragments, like:</p>
-                                               <p class="fragment grow">grow</p>
-                                               <p class="fragment shrink">shrink</p>
-                                               <p class="fragment roll-in">roll-in</p>
-                                               <p class="fragment fade-out">fade-out</p>
-                                               <p class="fragment highlight-red">highlight-red</p>
-                                               <p class="fragment highlight-green">highlight-green</p>
-                                               <p class="fragment highlight-blue">highlight-blue</p>
-                                       </section>
-                               </section>
-
-                               <section>
-                                       <h2>Spectacular image!</h2>
-                                       <a class="image" href="http://lab.hakim.se/meny/" target="_blank">
-                                               <img width="320" height="299" src="http://s3.amazonaws.com/hakim-static/portfolio/images/meny.png" alt="Meny">
-                                       </a>
-                               </section>
-
-                               <section>
-                                       <h2>Export to PDF</h2>
-                                       <p>Presentations can be <a href="https://github.com/hakimel/reveal.js#pdf-export">exported to PDF</a>, below is an example that's been uploaded to SlideShare.</p>
-                                       <iframe id="slideshare" src="http://www.slideshare.net/slideshow/embed_code/13872948" width="455" height="356" style="margin:0;overflow:hidden;border:1px solid #CCC;border-width:1px 1px 0;margin-bottom:5px" allowfullscreen> </iframe>
-                                       <script>
-                                               document.getElementById('slideshare').attributeName = 'allowfullscreen';
-                                       </script>
-                               </section>
-
-                               <section>
-                                       <h2>Take a Moment</h2>
-                                       <p>
-                                               Press b or period on your keyboard to enter the 'paused' mode. This mode is helpful when you want to take distracting slides off the screen
-                                               during a presentation.
-                                       </p>
-                               </section>
-
-                               <section>
-                                       <h2>Stellar Links</h2>
-                                       <ul>
-                                               <li><a href="http://slid.es">Try the online editor</a></li>
-                                               <li><a href="https://github.com/hakimel/reveal.js">Source code on GitHub</a></li>
-                                               <li><a href="http://twitter.com/hakimel">Follow me on Twitter</a></li>
-                                       </ul>
-                               </section>
-
-                               <section>
-                                       <h1>THE END</h1>
-                                       <h3>BY Hakim El Hattab / hakim.se</h3>
-                               </section>
-
-                       </div>
-
-               </div>
-
-               <script src="lib/js/head.min.js"></script>
-               <script src="js/reveal.min.js"></script>
-
-               <script>
-
-                       // Full list of configuration options available here:
-                       // https://github.com/hakimel/reveal.js#configuration
-                       Reveal.initialize({
-                               controls: true,
-                               progress: true,
-                               history: true,
-                               center: true,
-
-                               theme: Reveal.getQueryHash().theme, // available themes are in /css/theme
-                               transition: Reveal.getQueryHash().transition || 'default', // default/cube/page/concave/zoom/linear/fade/none
-
-                               // Optional libraries used to extend on reveal.js
-                               dependencies: [
-                                       { src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
-                                       { src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
-                                       { src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
-                                       { src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
-                                       { src: 'plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } },
-                                       { src: 'plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } }
-                                       // { src: 'plugin/search/search.js', async: true, condition: function() { return !!document.body.classList; } }
-                                       // { src: 'plugin/remotes/remotes.js', async: true, condition: function() { return !!document.body.classList; } }
-                               ]
-                       });
-
-               </script>
-
-       </body>
-</html>
diff --git a/index.html.itex b/index.html.itex
new file mode 100644 (file)
index 0000000..b5152d9
--- /dev/null
@@ -0,0 +1,780 @@
+<!doctype html>
+<html lang="en">
+
+       <head>
+               <meta charset="utf-8">
+
+               <title>Open source single molecule force spectroscopy</title>
+
+               <meta name="description" content="Controlling and analyzing SMFS with varying salt concentrations">
+               <meta name="author" content="Trevor King">
+
+               <meta name="apple-mobile-web-app-capable" content="yes" />
+               <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent" />
+               <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+
+               <link rel="stylesheet" href="css/reveal.min.css">
+               <link rel="stylesheet" href="css/theme/beige.css" id="theme">
+               <link rel="stylesheet" href="css/local.css" id="local">
+
+               <!-- For syntax highlighting -->
+               <link rel="stylesheet" href="lib/css/zenburn.css">
+
+               <!-- If the query includes 'print-pdf', use the PDF print sheet -->
+               <script>
+                       document.write( '<link rel="stylesheet" href="css/print/' + ( window.location.search.match( /print-pdf/gi ) ? 'pdf' : 'paper' ) + '.css" type="text/css" media="print">' );
+               </script>
+
+               <!--[if lt IE 9]>
+               <script src="lib/js/html5shiv.js"></script>
+               <![endif]-->
+       </head>
+
+       <body>
+
+               <div class="reveal">
+
+                       <!-- Any section element inside of this container is displayed as a slide -->
+                       <div class="slides">
+
+                               <section>
+                                       <h2>Open source<br/> single molecule<br/> force spectroscopy</h2>
+                                       <h3>Protein unfolding in varying salt concentrations</h3>
+                                       <p style="text-align: center;">
+                                               <small>Trevor King</small>
+                                       </p>
+                               </section>
+                               <section>
+                                       <section>
+                                               <h2>Proteins: What are they?</h2>
+                                               <p>
+                                                       <video width="640" height="480"
+                                                                                preload="auto" loop="" controls=""> <!--autoplay=""-->
+                                                               <source src="media/build/1TIT-atoms.mp4"
+                                                                                               type='video/mp4; codecs="avc1.42E01E, mp4a.40.2"' />
+                                                       </video>
+                                                       <!-- generated with PyMol from
+                                                                        http://www.rcsb.org/pdb/explore.do?structureId=1TIT -->
+                                               </p>
+                                       </section>
+                                       <section>
+                                               <h2>Proteins: Where are they?</h2>
+                                               <p>
+                                                       <img src="media/build/takamori-fig4b-fw-fh.png" />
+                                               </p>
+                                               <p style="text-align: center;">
+                                                       <small>
+                                                               <a href="http://dx.doi.org/10.1016/j.cell.2006.10.030">
+                                                                       Takamori, Holt, Stenius, et al., 2006
+                                                               </a>
+                                                       </small>
+                                               </p>
+                                       </section>
+                                       <section>
+                                               <h2>Proteins: Titin</h2>
+                                               <p>
+                                                       <img src="media/build/skeletal-muscle-fw-fh.png" />
+                                               </p>
+                                               <p style="text-align: center;">
+                                                       <small>
+                                                               Adapted from
+                                                               <a href="http://en.wikipedia.org/wiki/File:Skeletal_muscle.jpg">
+                                                                       Wikipedia
+                                                               </a>
+                                                       </small>
+                                               </p>
+                                       </section>
+                                       <section>
+                                               <h2>Proteins: Titin's I27</h2>
+                                               <p>
+                                                       <img src="media/build/titin-fw-fh.png" />
+                                               </p>
+                                               <p style="text-align: center;">
+                                                       <small>
+                                                               <a href="http://www.ks.uiuc.edu/Research/telethonin/">
+                                                                       U. Illinois Biophysics Group
+                                                               </a>
+                                                       </small>
+                                               </p>
+                                       </section>
+                                       <section>
+                                               <h2>Proteins: I27</h2>
+                                               <p>
+                                                       <img src="media/build/1TIT-fw-fh.png" />
+                                               </p>
+                                               <p style="text-align: center;">
+                                                       <small>
+                                                               <a href="http://www.rcsb.org/pdb/explore.do?structureId=1TIT">
+                                                                       PDB structure 1TIT
+                                                               </a>
+                                                       </small>
+                                               </p>
+                                       </section>
+                                       <section>
+                                               <h2>Proteins: What's the problem?</h2>
+                                               <table class="center">
+                                                       <tr>
+                                                               <td style="vertical-align: middle;">
+                                                                       <pre style="display: table; width: auto;">
+MHHHHHHSSLIEV
+EKPLYGVEVFVGE
+TAHFEIELSEPDV
+HGQWKLKGQPLTA
+SPDCEIIEDGKKH
+ILILHNCQLGMTG
+EVSFQAANAKSAA
+NLKVKEL</pre>
+                                                               </td>
+                                                               <td style="vertical-align: middle;"><p>  →  </p></td>
+                                                               <td style="vertical-align: middle;">
+                                                                       <img src="media/build/1TIT-tw-th.png" />
+                                                               </td>
+                                                       </tr>
+                                                       <tr>
+                                                               <td colspan="3">
+                                                                       <p>
+                                                                               <img src="media/build/pirchi-fig1-fw-hh.png" />
+                                                                       </p>
+                                                                       <p style="text-align: center;">
+                                                                               <small>
+                                                                                       <a href="http://dx.doi.org/10.1038/ncomms1504">
+                                                                                               Pirchi, Ziv, Riven, et al., 2011
+                                                                                       </a>
+                                                                               </small>
+                                                                       </p>
+                                                               </td>
+                                                       </tr>
+                                               </table>
+                                       </section>
+                               </section>
+                               <section>
+                                       <section>
+                                               <h2>Atomic force microscopy</h2>
+                                               <p>
+                                                       <img src="media/build/afm-3d-fw-fh.png" />
+                                               </p>
+                                       </section>
+                                       <section>
+                                               <h2>AFM: Cantilever geometry</h2>
+                                               <p>
+                                                       <!-- need height to stretch low-resolution pictures -->
+                                                       <img src="media/build/cantilever.jpg" height="272" />
+                                                       <img src="media/build/tip.jpg" height="272" />
+                                               </p>
+                                               <p style="text-align: center;">
+                                                       <small>
+                                                               <a href="http://probe.olympus-global.com/en/product/omcl_tr800psa_w/">
+                                                                       Olympus TR800PSA
+                                                               </a>, images from
+                                                               <a href="http://www.asylumresearch.com/Probe/TR400PSA,Olympus">
+                                                                       Asylum Research
+                                                               </a><br/>
+                                                               We use the thinner
+                                                               <a href="http://probe.olympus-global.com/en/product/omcl_tr400psa_hw/">
+                                                                        TR400PSA
+                                                               </a>
+                                                       </small>
+                                               </p>
+                                       </section>
+                                       <section>
+                                               <h2>AFM: Laser deflection</h2>
+                                               <p>
+                                                       <video width="640" height="480"
+                                                                                preload="auto" loop="" controls=""> <!--autoplay=""-->
+                                                               <source src="media/build/contact-afm.ogv"
+                                                                                               type='video/ogg; codecs="theora,vorbis"' />
+                                                       </video>
+                                               </p>
+                                               <p style="text-align: center;">
+                                                       <small>
+                                                               <a href="http://www.freesbi.ch/fr/illustration/animations">
+                                                                       Charles Roduit
+                                                               </a>
+                                                       </small>
+                                               </p>
+                                       </section>
+                                       <section>
+                                               <h2>AFM: Piezo positioning</h2>
+                                               <p>
+                                                       <img src="media/build/afm-fw-fh.png" />
+                                               </p>
+                                       </section>
+                                       <section>
+                                               <h2>The piezoelectric effect</h2>
+                                               <p>
+                                                       <object data="media/perovskite.svg" type="image/svg+xml"
+                                                                       width="640" height="350"></object>
+                                               </p>
+                                               <p style="text-align: center;">
+                                                       <small>
+                                                               <a href="http://en.wikipedia.org/wiki/File:Perovskite.svg">
+                                                                       Wikipedia
+                                                               </a>
+                                                       </small>
+                                               </p>
+                                       </section>
+                                       <section>
+                                               <h2>AFM: Tubular piezos</h2>
+                                               <p>
+                                                       <img src="media/build/piezo-fw-fh.png" />
+                                               </p>
+                                       </section>
+                               </section>
+                               <section>
+                                       <section>
+                                               <h2>Single molecule force spectroscopy</h2>
+                                               <p>
+                                                       <img src="media/build/unfolding-fw-fh.png" />
+                                               </p>
+                                       </section>
+                                       <section>
+                                               <h2>SMFS: Sawtooth curve</h2>
+                                               <p>
+                                                       <img src="media/build/expt-sawtooth-fw-fh.png" width="640" />
+                                               </p>
+                                       </section>
+                                       <section>
+                                               <h2>SMFS: What's going on?</h2>
+                                               <p>
+                                                       <img src="media/build/carrion-vazquez-fig2-fw-fh.png" />
+                                               </p>
+                                               <p>
+                                                       <small>
+                                                               <a href="http://dx.doi.org/10.1016/S0079-6107(00)00017-1">
+                                                                       Carrion-Vazquez, et al., 2000;
+                                                                       adapted from Baljon and Robbins, 1996
+                                                               </a>
+                                                       </small>
+                                               </p>
+                                       </section>
+                                       <section>
+                                               <h2>SMFS: Unfolding one domain</h2>
+                                               <p>
+                                                       <img src="media/build/lu-fig1-fw-fh.png" />
+                                               </p>
+                                               <p>
+                                                       <small>
+                                                               <a href="http://dx.doi.org/10.1016/S0006-3495(00)76273-4">
+                                                                       Lu and Schulten, 2000
+                                                               </a>
+                                                       </small>
+                                               </p>
+                                       </section>
+                               </section>
+                               <section>
+                                       <section>
+                                               <h2>Experiment control</h2>
+                                               <p>
+                                                       <img src="media/build/apparatus-fw-fh.png" />
+                                               </p>
+                                       </section>
+                                       <section>
+                                               <h2>Control: Quick-and-dirty</h2>
+                                               <p>
+                                                       <img src="media/build/labview-fw-fh.png" />
+                                               </p>
+                                       </section>
+                                       <section>
+                                               <h2>Control: Modular stack</h2>
+                                               <p>
+                                                       <img src="media/build/pyafm-fw-fh.png" />
+                                               </p>
+                                       </section>
+                                       <section>
+                                               <h2>Open source: Existing layers</h2>
+                                               <table class="center">
+                                                       <tr>
+                                                               <td><img src="media/logo/tux.png" height="150" /></td>
+                                                               <td><object data="media/logo/gnu.svg" type="image/svg+xml"
+                                                                                                               height="150"></object></td>
+                                                               <td><object data="media/logo/gentoo.svg" type="image/svg+xml"
+                                                                                                               height="150"></object></td>
+                                                               <td><object data="media/logo/python.svg" type="image/svg+xml"
+                                                                                                               height="150"></object></td>
+                                                               <td><object data="media/logo/scipy.svg" type="image/svg+xml"
+                                                                                                               height="150"></object></td>
+                                                       </tr>
+                                                       <tr>
+                                                               <td><a href="https://www.kernel.org/">Linux</a></td>
+                                                               <td>
+                                                                       <a href="http://www.gnu.org/">
+                                                                               <abbr title="GNU's Not Unix!">GNU</abbr>
+                                                                       </a>
+                                                               </td>
+                                                               <td><a href="http://www.gentoo.org/">Gentoo</a></td>
+                                                               <td><a href="http://www.python.org/">Python</a></td>
+                                                               <td><a href="http://www.scipy.org/">SciPy</a></td>
+                                                       </tr>
+                                                       <tr>
+                                                               <td>
+                                                                       <small>
+                                                                               <a href="http://www.comedi.org/">
+                                                                                       <abbr title="Control and Measurement Device Interface">Comedi<abbr>
+                                                                               </a>
+                                                                       </small>
+                                                               </td>
+                                                               <td>
+                                                                       <small>
+                                                                               <a href="http://matplotlib.org/">matplotlib</a>
+                                                                       </small>
+                                                               </td>
+                                                               <td>
+                                                                       <small>
+                                                                               <a href="https://github.com/bashwork/pymodbus">pymodbus</a>
+                                                                       </small>
+                                                               </td>
+                                                               <td>
+                                                                       <small>
+                                                                               <a href="http://www.cython.org/">Cython</a>
+                                                                       </small>
+                                                               </td>
+                                                               <td>
+                                                                       <small>
+                                                                               <a href="https://www.numpy.org/">NumPy</a>
+                                                                       </small>
+                                                               </td>
+                                                       </tr>
+                                                       <tr>
+                                                               <td>
+                                                                       <small>
+                                                                               <a href="http://www.h5py.org/">h5py</a>
+                                                                       </small>
+                                                               </td>
+                                                               <td><small>…</small></td>
+                                                       </tr>
+                                               </table>
+                                       </section>
+                                       <section>
+                                               <h2>Open source: Teamwork</h2>
+                                               <p>
+                                                       <img src="media/build/ants-fw-fh.png" />
+                                               </p>
+                                               <p style="text-align: center;">
+                                                       <small>
+                                                               <a href="http://dx.doi.org/10.1073/pnas.1016658108">
+                                                                       Mlot, Tovey, and Hu, 2011
+                                                               </a>
+                                                       </small>
+                                               </p>
+                                       </section>
+                                       <section>
+                                               <h2>Control: Example code</h2>
+                                               <pre><code data-trim="">
+class Unfolder (object):
+    …
+    def run(self):
+        """Approach-bind-unfold-save[-plot] cycle.
+        """
+        ret = {}
+        ret['timestamp'] = _email_utils.formatdate(localtime=True)
+        ret['temperature'] = self.afm.get_temperature()
+        ret['approach'] = self._approach()
+        self._bind()
+        ret['unfold'] = self._unfold()
+        self._save(**ret)
+        if _package_config['matplotlib']:
+            self._plot(**ret)
+        return ret
+                                               </code></pre>
+                                       </section>
+                                       <section>
+                                               <h2>Archival: HDF5 and h5config</h2>
+                                               <!-- h5dump -H 2013-03-04T12-43-38.h5 |
+                                                                grep 'GROUP\|DATASET' | sed 's/ {.*//' -->
+                                               <pre>
+GROUP <span style="color: blue">&quot;/&quot;</span>
+   GROUP <span style="color: blue">&quot;approach&quot;</span>
+      …
+   GROUP <span style="color: blue">&quot;config&quot;</span>
+      GROUP <span style="color: blue">&quot;afm&quot;</span>
+         …
+      GROUP <span style="color: blue">&quot;approach&quot;</span>
+         …
+      DATASET <span style="color: blue">&quot;bind time&quot;</span>
+      …
+      GROUP <span style="color: blue">&quot;unfold&quot;</span>
+         …
+         DATASET <span style="color: blue">&quot;velocity&quot;</span>
+   GROUP <span style="color: blue">&quot;environment&quot;</span>
+      DATASET <span style="color: blue">&quot;temperature&quot;</span>
+      DATASET <span style="color: blue">&quot;timestamp&quot;</span>
+      …
+   GROUP <span style="color: blue">&quot;unfold&quot;</span>
+      DATASET <span style="color: blue">&quot;deflection&quot;</span>
+      DATASET <span style="color: blue">&quot;frequency&quot;</span>
+      DATASET <span style="color: blue">&quot;z&quot;</span></pre>
+                                       </section>
+                                       <section>
+                                               <h2>Archival: Version control</h2>
+                                               <pre>
+<span style="color: red">commit 32bfbf98d79c73eba50b77d0917df100e0e33bcf</span>
+Author: W. Trevor King &lt;wking@tremily.us&gt;
+Date:   Fri Jan 18 22:54:49 2013 -0500
+
+    afm: Optionally return stepper_approach data with `record_data`
+
+    Sometimes these approach curves are pretty funky, so I'll start
+    recording them by default in calibcant-calibrate.py.
+
+<span style="font-weight: bold">diff --git a/pyafm/afm.py b/pyafm/afm.py
+index 60741c6..e76b118 100644
+--- a/pyafm/afm.py
++++ b/pyafm/afm.py</span>
+<span style="color: blue">@@ -460,10 +460,11 @@</span> class AFM (object):
+         _LOG.warn(e)
+         raise e
+
+<span style="color: red">-    def stepper_approach(self, target_deflection):</span>
+<span style="color: green">+    def stepper_approach(self, target_deflection, record_data=None):</span>
+…</pre>
+                                       </section>
+                               </section>
+                               <section>
+                                       <section>
+                                               <h2>Cantilever calibration</h2>
+                                               <p>
+                                                       <img src="media/build/unfolding-fw-fh.png" />
+                                               </p>
+                                       </section>
+                                       <section>
+                                               <h2>Calibration: Geometry</h2>
+                                               <p>
+                                                       <!-- need height to stretch low-resolution pictures -->
+                                                       <img src="media/build/cantilever.jpg" height="272" />
+                                                       <img src="media/build/tip.jpg" height="272" />
+                                               </p>
+                                               <p style="text-align: center;">
+                                                       <small>
+                                                               <a href="http://probe.olympus-global.com/en/product/omcl_tr800psa_w/">
+                                                                       Olympus TR800PSA
+                                                               </a>, images from
+                                                               <a href="http://www.asylumresearch.com/Probe/TR400PSA,Olympus">
+                                                                       Asylum Research
+                                                               </a><br/>
+                                                               We use the thinner
+                                                               <a href="http://probe.olympus-global.com/en/product/omcl_tr400psa_hw/">
+                                                                        TR400PSA
+                                                               </a>
+                                                       </small>
+                                               </p>
+                                       </section>
+                                       <section>
+                                               <h2>Calibration: Equipartition</h2>
+                                               <p>
+                                                       For a damped harmonic oscillator
+                                               </p>
+
+\[
+  -\kappa x_c
+  - \gamma \frac{\mathrm{d}\! x_c}{\mathrm{d}\! t}
+  + F_\text{ext}(t)
+    = m\frac{\mathrm{d}^2\! x}{\mathrm{d}\! t^2} \;,
+\]
+
+                                               <p>
+                                                       the energy in each degree of freedom is $\frac{1}{2}k_B
+                                                       T$.
+                                               </p>
+
+\[
+  \frac{1}{2} \kappa \left\langle x_c^2 \right\rangle = \frac{1}{2}k_B T \;,
+\]
+
+                                               <p>
+                                                       where $k_B$ is Boltzmann's constant and $T$ is the
+                                                       temperature.
+                                               </p>
+                                       </section>
+                                       <section>
+                                               <h2>Calibration: Vibration</h2>
+                                               <p>
+                                                       <img src="media/build/vibration-fw-fh.png" width="620" />
+                                               </p>
+                                       </section>
+                                       <section>
+                                               <h2>Calibration: Photodiode calibration</h2>
+                                               <p>
+                                                       <img src="media/build/bump-fw-fh.png" />
+                                               </p>
+                                       </section>
+                                       <section>
+                                               <h2>Calibration: Results</h2>
+
+\[
+\begin{aligned}
+  T &= 298.15 \pm 0.03 \; \text{K}  &
+  \sigma_p &= 35.7 \pm 0.9 \; \text{mV/nm} \\
+  \left\langle V_p^2 \right\rangle &= 97 \pm 1 \; \text{mV}^2  &
+  \sqrt{\left\langle x_c^2 \right\rangle}
+    &= \sqrt{\frac{\left\langle V_p^2 \right\rangle}{\sigma_p^2}}
+    = 0.28 \; \text{nm} \\
+  \kappa &= \frac{k_B T \sigma_p^2}{\left\langle V_p^2 \right\rangle}
+    = 54 \pm 3 \; \text{pN/nm}
+\end{aligned}
+\]
+
+                                       </section>
+                                       <section>
+                                               <h2>Calibration: Stability</h2>
+                                               <table class="center">
+                                                       <thead>
+                                                               <tr>
+                                                                       <th>Quant.</th>
+                                                                       <th>Units</th>
+                                                                       <th> </th>
+                                                                       <!-- 2013-03-03T16-37-12 -->
+                                                                       <th colspan="2" style="text-align: center">Day 1</th>
+                                                                       <th> </th>
+                                                                       <!-- 2013-03-04T12-21-54 -->
+                                                                       <th colspan="2" style="text-align: center">Day 2</th>
+                                                               </tr>
+                                                       </thead>
+                                                       <tbody>
+                                                               <tr>
+                                                                       <td>$T$</td>
+                                                                       <td>K</td>
+                                                                       <td></td>
+                                                                       <td>296.30</td>
+                                                                       <td>±0.02</td>
+                                                                       <td></td>
+                                                                       <td>294.27</td>
+                                                                       <td>±0.02</td>
+                                                               </tr>
+                                                               <tr>
+                                                                       <td>$\sigma_p$</td>
+                                                                       <td>mV/nm</td>
+                                                                       <td></td>
+                                                                       <td>&#x2007;46.2</td>
+                                                                       <td>±0.8</td>
+                                                                       <td></td>
+                                                                       <td>&#x2007;41.3</td>
+                                                                       <td>±0.2</td>
+                                                               </tr>
+                                                               <tr>
+                                                                       <td>$\left\langle V_p^2 \right\rangle$</td>
+                                                                       <td>mV$^2$</td>
+                                                                       <td></td>
+                                                                       <td>108</td>
+                                                                       <td>±1</td>
+                                                                       <td></td>
+                                                                       <td>105</td>
+                                                                       <td>±2</td>
+                                                               </tr>
+                                                               <tr>
+                                                                       <td>$\kappa$</td>
+                                                                       <td>pN/nm</td>
+                                                                       <td></td>
+                                                                       <td>&#x2007;67</td>
+                                                                       <td>±2</td>
+                                                                       <td></td>
+                                                                       <td>&#x2007;66</td>
+                                                                       <td>±2</td>
+                                                               </tr>
+                                                       </tbody>
+                                               </table>
+                                       </section>
+                                       <section>
+                                               <h2>Calibration: Inconsistency</h2>
+                                               <table class="center">
+                                                       <tr>
+                                                               <td style="vertical-align: middle;">
+                                                                       <img src="media/build/florin-fig2-hw-fh.png" />
+                                                               </td>
+                                                               <td style="vertical-align: middle;">
+                                                                       <img src="media/build/vibration-hw-fh.png" />
+                                                               </td>
+                                                       </tr>
+                                               </table>
+                                               <p style="text-align: center;">
+                                                       <small>
+                                                               <a href="http://dx.doi.org/10.1016/0896-6273(88)90139-0">
+                                                                       Florin, Rief, Lehmann, et al., 1995
+                                                               </a>
+                                                       </small>
+                                               </p>
+                                       </section>
+                               </section>
+                               <section>
+                                       <section>
+                                               <h2>Monte Carlo unfolding simulations</h2>
+                                               <table class="center">
+                                                       <tr>
+                                                               <td rowspan="2" style="vertical-align: middle;">
+                                                                       <img src="media/build/unfolding-fw-fh.png" />
+                                                               </td>
+                                                               <td style="vertical-align: top;">
+                                                                       <img src="media/build/expt-sawtooth-hw-hh.png" />
+                                                               </td>
+                                                       </tr>
+                                                       <tr>
+                                                               <td><img src="media/build/pbs-hist-hw-hh.png" /></td>
+                                                       </tr>
+                                               </table>
+                                       </section>
+                                       <section>
+                                               <h2>Sawsim: State model</h2>
+                                               <p>
+                                                       <img src="media/build/unfolding-hw-fh.png"
+                                                                        style="vertical-align: middle;">
+                                                       <img src="media/build/sawsim-states-hw-fh.png"
+                                                                        style="vertical-align: middle;">
+                                               </p>
+                                       </section>
+                                       <section>
+                                               <h2>Sawsim: Simulation loop</h2>
+                                               <ol>
+                                                       <li>Calculate piezo-induced gap $x_t(t)=v t$</li>
+                                                       <li>
+                                                               Find tension model parameters for each state
+                                                       </li>
+                                                       <li>
+                                                               Distribute per-state stretching ($x_c$, $x_u$, …) to
+                                                               balance the tension
+                                                       </li>
+                                                       <li>
+                                                               Calculate the transition rates between states
+                                                       </li>
+                                                       <li>
+                                                               Roll the dice to determine if transitions take
+                                                               place as you step forward in time
+                                                       </li>
+                                               </ol>
+                                       </section>
+                                       <section>
+                                               <h2>Sawsim: Monte Carlo</h2>
+                                               <p>
+                                                       <img src="media/build/monte-carlo-fw-fh.png" />
+                                               </p>
+                                       </section>
+                                       <section>
+                                               <h2>Sawsim: Unfolding models</h2>
+                                               <table class="center">
+                                                       <tr>
+                                                               <td style="text-align: center;">
+                                                                       <img src="media/build/unfolding-hw-hh.png"
+                                                                                        style="vertical-align: middle;">
+                                                               </td>
+                                                               <td>
+                                                                       <img src="media/build/landscape-hw-hh.png"
+                                                                                        style="vertical-align: middle;">
+                                                               </td>
+                                                       </tr>
+                                                       <tr>
+                                                               <td style="text-align: center;">
+                                                                       <img src="media/build/sawsim-states-hw-hh.png"
+                                                                                        style="vertical-align: middle;">
+                                                               </td>
+                                                               <td>
+                                                                       <img src="media/build/landscape-bell-hw-hh.png"
+                                                                                        style="vertical-align: middle;">
+                                                               </td>
+                                                       </tr>
+                                               </table>
+                                       </section>
+                                       <section>
+                                               <h2>Sawsim: Kramers' model</h2>
+
+\[
+  \frac{1}{k_u}
+    = \frac{1}{D}
+      \int_{-\infty}^{\infty} \mathrm{d}\! x \;
+        e^{\frac{U_F(x)}{k_B T}}
+        \int_{-\infty}^{x} \mathrm{d}\! x' \;
+          e^{\frac{-U_F(x')}{k_B T}}
+\]
+
+                                               <p>
+                                                       <img src="media/build/landscape-hw-hh.png"
+                                                                        style="vertical-align: middle;">
+                                                       <img src="media/build/kramers-integrand-hw-hh.png"
+                                                                        style="vertical-align: middle;">
+                                               </p>
+                                       </section>
+                                       <section>
+                                               <h2>Sawsim: Tension models</h2>
+                                               <table class="center">
+                                                       <tr>
+                                                               <td style="text-align: center;">
+                                                                       <img src="media/build/unfolding-hw-hh.png"
+                                                                                        style="vertical-align: middle;">
+                                                               </td>
+                                                               <td rowspan="2" style="vertical-align: middle;">
+                                                                       <img src="media/build/wlc-model-hw-fh.png">
+                                                               </td>
+                                                               <td rowspan="2" style="vertical-align: middle;">
+                                                                       <img src="media/build/fjc-model-hw-fh.png">
+                                                               </td>
+                                                       </tr>
+                                                       <tr>
+                                                               <td style="text-align: center;">
+                                                                       <img src="media/build/sawsim-states-hw-hh.png"
+                                                                                        style="vertical-align: middle;">
+                                                               </td>
+                                                       </tr>
+                                               </table>
+                                       </section>
+                                       <section>
+                                               <h2>Sawsim: Fitting models</h2>
+                                               <p>
+                                                       <img src="media/build/fit-valley-fw-fh.png" />
+                                               </p>
+                                       </section>
+                               </section>
+                               <section>
+                                       <section>
+                                               <h2>Sawsim: Salt</h2>
+                                               <p>
+                                                       <img src="media/build/lu-fig1-fw-fh.png" />
+                                               </p>
+                                               <p style="text-align: center;">
+                                                       <small>
+                                                               <a href="http://dx.doi.org/10.1016/S0006-3495(00)76273-4">
+                                                                       Lu and Schulten, 2000
+                                                               </a>
+                                                       </small>
+                                               </p>
+                                       </section>
+                                       <section>
+                                               <h2>Sawsim: Glutamic acid</h2>
+                                               <p>
+                                                       <img src="media/build/1TIT-hbond-fw-fh.png" />
+                                               </p>
+                                       </section>
+                               </section>
+                               <section>
+                                       <h1>THE END</h1>
+                                       <p style="text-align: center;">
+                                       Written with <a href="http://lab.hakim.se/reveal-js/">reveal.js</a>
+                                       </p>
+                               </section>
+                       </div>
+               </div>
+               <script src="lib/js/head.min.js"></script>
+               <script src="js/reveal.min.js"></script>
+               <script>
+                       // Full list of configuration options available here:
+                       // https://github.com/hakimel/reveal.js#configuration
+                       Reveal.initialize({
+                               controls: true,
+                               progress: true,
+                               history: true,
+                               center: true,
+                               theme: Reveal.getQueryHash().theme, // available themes are in /css/theme
+                               transition: Reveal.getQueryHash().transition || 'none', // default/cube/page/concave/zoom/linear/fade/none
+                               // Optional libraries used to extend on reveal.js
+                               dependencies: [
+                                       { src: 'lib/js/classList.js', condition: function() { return !document.body.classList; } },
+                                       { src: 'plugin/markdown/marked.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
+                                       { src: 'plugin/markdown/markdown.js', condition: function() { return !!document.querySelector( '[data-markdown]' ); } },
+                                       { src: 'plugin/highlight/highlight.js', async: true, callback: function() { hljs.initHighlightingOnLoad(); } },
+                                       { src: 'plugin/zoom-js/zoom.js', async: true, condition: function() { return !!document.body.classList; } },
+                                       { src: 'plugin/notes/notes.js', async: true, condition: function() { return !!document.body.classList; } }
+                                       // { src: 'plugin/search/search.js', async: true, condition: function() { return !!document.body.classList; } }
+                                       // { src: 'plugin/remotes/remotes.js', async: true, condition: function() { return !!document.body.classList; } }
+                               ]
+                       });
+
+               </script>
+
+       </body>
+</html>