Kai Blin<br>
Division for Microbiology/Biotechnology
</div>
+ </section>
-
+ <section class="slide" id="background">
+ <h1>Biological Background</h2>
</section>
- <section class="slide" id="overview">
- <h2>Overview</h2>
- <ul class="toc">
- <li>Biological Background</li>
- <li>Searching for Antibiotics</li>
- <li>Some Thoughts on Academic Open Source Software Projects</li>
- </ul>
+ <section class="slide" id="background-definition">
+ <h2>Biotechnology - Definition</h2>
+
+ <blockquote cite="http://www.cbd.int/convention/articles/?a=cbd-02">
+ [...] any <span id="definition-technological">technological application</span>
+ that uses <span id="definition-biological">biological systems, living organisms,
+ or derivatives thereof</span>, to make or modify
+ <span id="definition-products">products or processes</span> for specific use.
+ </blockquote>
+ <cite>The UN Convention on Biological Diversity</cite>
+ <div class="slide" id="background-definition-technological"></div>
+ <div class="slide" id="background-definition-biological"></div>
+ <div class="slide" id="background-definition-products"></div>
</section>
- <section class="slide" id="background">
- <h1>Biological Background</h2>
+
+
+ <section class="slide" id="cell-animation-begin">
+ <h2>Cell</h2>
+ <div id="cell-canvas"></div>
+ <div class="slide" id="cell-animation-factory"></div>
</section>
- <section class="slide" id="background-metaphor">
- <h2>Biotechnology</h2>
+ <section class="slide" id="background-example-beer">
+ <img src="beer.jpg">
+ </section>
- <ul>
- <li class="slide" id="work-with-bacteria">Work with bacteria</li>
- <li class="slide" id="turn-bacteria-into-factories">Turn them into factories</li>
- </ul>
+ <section class="slide" id="background-example-insulin">
+ <img src="insulin.jpg">
</section>
+ <section class="slide" id="bacteria-animation-begin">
+ <h2>Biofactories</h2>
+ <div id="bacteria-canvas"></div>
+ <div class="slide" id="bacteria-animation-grow"></div>
+ </section>
- <section class="slide" id="background-metaphor-cell">
- Cell = Factory
+ <section class="slide" id="background-metaphor-machines">
+ <h2>Enzymes</h2>
+ <ul>
+ <li class="slide" id="enzymes">Chemical Reactions</li>
+ <li class="slide" id="sensors">Sensors</li>
+ <li class="slide" id="regulators">Regulators</li>
+ <li class="slide" id="ribosomes">Ribosomes</li>
+ </ul>
</section>
- <section class="slide" id="background-metaphor-protein">
- Protein = Machine
+ <section class="slide" id="background-metaphor-gene-tools">
+ <img src="tools.jpg">
</section>
- <section class="slide" id="background-metaphor-protein">
- Protein = Machine
+ <section class="slide" id="background-metaphor-gene-blueprint">
+ <img src="blueprint.jpg">
</section>
<section class="slide" id="background-metaphor-gene">
- Gene = Blueprint
- </section>
+ <h1>Gene</h1>
+ </slide>
<section class="slide" id="background-metaphor-assembly">
DNA --copy-> mRNA --ribosome-> Protein
// Deck initialization
$.deck('.slide');
- $('#style-themes').change(function() {
- $('#style-theme-link').attr('href', $(this).val());
- });
-
- $('#transition-themes').change(function() {
- $('#transition-theme-link').attr('href', $(this).val());
+ $(document).bind('deck.change', function(event, from, to) {
+ var target = $.deck('getSlide', to);
+ var slide_id = target.attr('id');
+ switch (slide_id) {
+ case "cell-animation-begin":
+ cell_animation_begin();
+ break;
+ case "cell-animation-factory":
+ cell_animation_factory();
+ break;
+ case "bacteria-animation-begin":
+ bacteria_animation_begin();
+ break;
+ case "bacteria-animation-grow":
+ bacteria_animation_grow();
+ break;
+ }
});
});
+function cell_animation_begin() {
+ $('#cell-canvas').text("Picture of a cell here");
+}
+
+function cell_animation_factory() {
+ $('#cell-canvas').text("Look, the cell turned into a factory!");
+}
+
+function bacteria_animation_begin() {
+ $('#bacteria-canvas').text("A single bacterium");
+}
+
+function bacteria_animation_grow() {
+ $('#bacteria-canvas').text("Look, they're growing");
+}