Get rid of cillium and an extraneous 'a'
[kai/lca12.git] / antismash_lca2011.html
1 <!DOCTYPE html>
2 <!--[if lt IE 7]> <html class="no-js ie6" lang="en"> <![endif]-->
3 <!--[if IE 7]>    <html class="no-js ie7" lang="en"> <![endif]-->
4 <!--[if IE 8]>    <html class="no-js ie8" lang="en"> <![endif]-->
5 <!--[if gt IE 8]><!-->  <html class="no-js" lang="en"> <!--<![endif]-->
6 <head>
7   <meta charset="utf-8">
8   <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
9
10   <title>antiSMASH: Searching for New Antibiotics Using Open Source Tools</title>
11
12   <meta name="description" content="A presentation of the antiSMASH software for Linux.Conf.AU 2012">
13   <meta name="author" content="Kai Blin">
14   <meta name="viewport" content="width=1024, user-scalable=no">
15
16   <!-- Core and extension CSS files -->
17   <link rel="stylesheet" href="core/deck.core.css">
18   <link rel="stylesheet" href="extensions/goto/deck.goto.css">
19   <link rel="stylesheet" href="extensions/menu/deck.menu.css">
20   <link rel="stylesheet" href="extensions/navigation/deck.navigation.css">
21   <link rel="stylesheet" href="extensions/status/deck.status.css">
22   <link rel="stylesheet" href="extensions/hash/deck.hash.css">
23   <link rel="stylesheet" href="extensions/scale/deck.scale.css">
24
25   <!-- Theme CSS files (menu swaps these out) -->
26   <link rel="stylesheet" id="style-theme-link" href="themes/style/uni-tue.css">
27   <link rel="stylesheet" id="transition-theme-link" href="themes/transition/horizontal-slide.css">
28
29   <!-- Custom CSS just for this page -->
30   <link rel="stylesheet" href="antismash_talk.css">
31   <link rel="stylesheet" href="cell.css">
32
33   <script src="modernizr.custom.js"></script>
34 </head>
35
36 <body>
37
38 <header>
39  <p>antiSMASH: Searching for New Antibiotics Using Open Source Tools</p>
40 </header>
41
42 <article class="deck-container">
43
44 <section class="slide" id="title-slide">
45   <div id="title-slide-logo">
46     <img height="10%" src="antismash_logo.svg">
47   </div>
48   <div id="subtitle">
49     <h4>An Antibiotics and Secondary Metabolites Analysis Shell</h4>
50     Kai Blin<br>
51     Division for Microbiology/Biotechnology
52   </div>
53   </section>
54
55   <section class="slide" id="background">
56   <h1>Biological Background</h2>
57   </section>
58
59   <section class="slide" id="background-biotech">
60   <h1>Biotechnology</h1>
61   </section>
62
63   <section class="slide" id="background-definition">
64     <h2>Biotechnology - Definition</h2>
65
66     <blockquote cite="http://www.cbd.int/convention/articles/?a=cbd-02">
67         [...] any <span id="definition-technological">technological application</span>
68         that uses <span id="definition-biological">biological systems, living organisms,
69         or derivatives thereof</span>, to make or modify
70         <span id="definition-products">products or processes</span> for specific use.
71     </blockquote>
72     <cite>The UN Convention on Biological Diversity</cite>
73     <div class="slide" id="background-definition-technological"></div>
74     <div class="slide" id="background-definition-biological"></div>
75     <div class="slide" id="background-definition-products"></div>
76   </section>
77
78
79
80   <section class="slide" id="cell-animation-begin">
81     <h2>Biotechnology</h2>
82     <div id="cell-canvas"></div>
83     <div class="slide" id="cell-animation-factory"></div>
84   </section>
85
86   <section class="slide" id="background-example-beer">
87     <img src="beer.jpg">
88   </section>
89
90   <section class="slide" id="background-example-insulin">
91     <img src="insulin.jpg">
92   </section>
93
94   <section class="slide" id="bacteria-animation-begin">
95     <h2>Biofactories</h2>
96     <div id="bacteria-canvas"></div>
97     <div class="slide" id="bacteria-animation-grow"></div>
98   </section>
99
100   <section class="slide" id="background-metaphor-machines">
101   <img src="protein_metaphor.svg" height="300">
102   <div class="float-left-small">
103       <div class="slide" id="enzymes"><img src="enzyme.svg"></div>
104       <div class="slide" id="sensors"><img src="protein_sensor.svg"></div>
105       <div class="slide" id="regulators"><img src="protein_regulator.svg"></div>
106       <div class="slide" id="ribosomes"><img src="protein_ribosome.svg"></div>
107   </section>
108
109   <section class="slide" id="background-metaphor-gene-tools">
110     <img src="a_lot_of_proteins.svg">
111   </section>
112
113   <section class="slide" id="background-metaphor-gene-blueprint">
114     <img src="blueprint.svg" height="600">
115     <h3 class="centered">Gene</h3>
116   </section>
117
118   <section class="slide" id="background-protein-vs-enzyme">
119   <h2>Nomenclature</h2>
120   <div class="float-left-large">
121     <div class="slide" id="when-protein"><img src="protein_parts.svg"></div>
122     <div class="slide" id="when-enzyme"><img src="enzyme.svg"></div>
123   </div>
124   </section>
125
126   <section class="slide" id="background-natures-storage-system">
127   <h1>Nature's Storage System</h1>
128   </section>
129
130   <section class="slide" id="background-miescher-lab">
131   <img src="miescherlab.jpg">
132   </section>
133
134   <section class="slide" id="background-dna">
135   <h2>DNA</h2>
136     <div id="dna-canvas"></div>
137     <div class="slide" id="background-dna-single"></div>
138     <div class="slide" id="background-dna-double"></div>
139   </section>
140
141   <section class="slide" id="background-dna-double-helix">
142     <img src="dna_animation_white.gif">
143     <h3 class="centered">DNA double helix</h3>
144   </section>
145
146   <section class="slide" id="background-amino-acids">
147   <h2>Amino Acids</h2>
148     <img src="amino_acids.svg">
149   </section>
150
151   <section class="slide" id="background-codon">
152     <h2>Codon Wheel</h2>
153     <img src="codon_wheel.svg" height="550">
154   </section>
155
156   <section class="slide" id="background-dna-vs-rna">
157     <img src="dna_vs_rna.svg">
158   </section>
159
160   <section class="slide" id="background-central-dogma">
161   <h2>Central Dogma of Molecular Biology</h2>
162   <img src="central_dogma.svg">
163   </section>
164
165   <section class="slide" id="background-gene-cluster">
166   <h2>Gene Cluster</h2>
167   <img src="gene_cluster.svg" width="750">
168   </section>
169
170   <section class="slide" id="background-metabolism">
171   <h1>Metabolism</h1>
172   </section>
173
174   <section class="slide" id="background-metabolism-beer">
175   <h2>Toxic Waste</h2>
176   <img src="beer_recycling.png">
177   </section>
178
179   <section class="slide" id="background-secondary-metabolism">
180   <h2>Secondary Metabolism</h2>
181   <div class="float-left-large">
182     <div class="slide" id="sec-met-pigments"><img src="pigments.jpg"></div>
183     <div class="slide" id="sec-met-antibiotics"><img src="triple_antibiotic.jpg"></div>
184   </div>
185   </section>
186
187   <section class="slide" id="background-streptomycetes">
188   <img src="bio_background.jpg">
189   </section>
190
191   <section class="slide" id="background-antibiotics-classes">
192   <img src="antibiotics_locations_of_action.svg">
193   </section>
194
195   <section class="slide" id="background-antibiotics-fight">
196   <img src="fight.png" height="600">
197   </section>
198
199   <section class="slide" id="background-bioassay">
200   <img src="antibiotics_screening_small.jpg">
201   </section>
202
203   <section class="slide" id="background-fleming">
204   <img src="fleming.jpg">
205   </section>
206
207   <section class="slide" id="background-why-antibiotics">
208   <h2>Why do we need more antibiotics?</h2>
209   <img src="mrsa_map.png" height="550">
210   </section>
211
212   <section class="slide" id="background-antibiotic-resistance">
213   <img src="antibiotic_resistance.svg">
214   </section>
215
216   <section class="slide" id="background-central-dogma-exception">
217   <img src="central_dogma_exception.svg">
218   </section>
219
220   <section class="slide" id="background-nrps">
221   <h2>Non-Ribosomal Peptide Synthesis</h2>
222   <img src="nrps.svg">
223   </section>
224
225   <section class="slide" id="main-talk">
226   <img src="antismash_logo.svg" height="550">
227   <img src="tueblogo.gif" style="float:left;margin-left:9em;">
228   <img src="ruglogo.gif" style="float:left;margin-left:1em;">
229   <img src="gbblogo.gif" style="float:left;margin-left:1em;">
230   <img src="ucsflogo.gif" style="float:left;margin-left:1em;">
231   </section>
232
233   <section class="slide" id="antismash-languages-used">
234     <h2>Languages Used</h2>
235     <img src="languages_used.png" height="550">
236   </section>
237
238   <section class="slide" id="antismash-schema">
239   <img src="server_architecture_old.png">
240   </section>
241
242   <section class="slide" id="antismash-gene-finding">
243   <h2>Gene Finding</h2>
244   <img src="gene_finding.svg">
245   </section>
246
247   <section class="slide" id="antismash-find-orfs">
248   <h2>ORF Finding Example</h2>
249   <div id="orf-canvas"><img src="sequence_unannotated.svg"></div>
250   <div class="slide" id="antismash-find-orfs-start"></div>
251   <div class="slide" id="antismash-find-orfs-stop"></div>
252   <div class="slide" id="antismash-find-orfs-all"></div>
253   </section>
254
255   <section class="slide" id="antismash-cluster-identification">
256   <h1>Cluster Identification</h1>
257   </section>
258
259   <section class="slide" id="antismash-why-aa-seqs">
260   <h2>Why Use Amino Acid Sequences?</h2>
261   <img src="degenerate_code.svg">
262   </section>
263
264   <section class="slide" id="antismash-profile">
265   <h2>Creating a Profile</h2>
266   <img src="alignment.png" height="600">
267   </section>
268
269   <section class="slide" id="antismash-cluster-identification-logic">
270   <h2>Cluster Identification Logic</h2>
271   <img src="sec_met_rules.png">
272   </section>
273
274   <section class="slide" id="antismash-clusterblast">
275   <h2>Cluster BLAST</h2>
276   <img src="clusterblast.svg" width="850">
277   </section>
278
279   <section class="slide" id="antismash-nrps-cluster">
280   <h2>NRPS Cluster</h2>
281   <img src="nrps_cluster.svg">
282   <div class="slide" id="antismash-nrps-modules">
283     <h2>NRPS Modules</h2>
284     <img src="nrps_modules.svg">
285   </div>
286   </section>
287
288   <section class="slide" id="antismash-svm">
289   <h2>Support Vector Machines</h2>
290   <div id="svm-canvas"><img src='classification-untrained.png' height="500"></div>
291   <div class="slide" id="antismash-svm-trained"></div>
292   <div class="slide" id="antismash-svm-new"></div>
293   </section>
294
295   <section class="slide" id="antismash-structure-generation">
296   <h2>Creating Structures</h2>
297   <img src="genecluster10.png">
298   </section>
299
300   <section class="slide" id="antismash-browser-new-os">
301   <h1>The Browser is the New OS</h1>
302   </section>
303
304   <section class="slide" id="antismash-website-generation">
305   <h2>Result Page</h2>
306   <img src="html_generation.png" height="650">
307   </section>
308
309   <section class="slide" id="antismash-frontend">
310   <h2>antiSMASH Web Frontend</h2>
311   <ul>
312     <li>Flask</li>
313     <li>Flask-SQLAlchemy</li>
314     <li>MySQL</li>
315     <li>JQuery</li>
316     <li>SVG</li>
317   </ul>
318   </section>
319
320   <section class="slide" id="demo">
321   <h1>Demo Time!</h1>
322   </section>
323
324   <section class="slide" id="thanks">
325   <h1>Thank you</h1>
326   </section>
327
328   <section class="slide" id="sources">
329   Pictures used:<br>
330   <a href="pigments.jpg">pigments.jpg</a> by
331   <a href="http://en.wikipedia.org/wiki/File:Indian_pigments.jpg">Dan Brady</a>
332   </section>
333
334 <a href="#" class="deck-prev-link" title="Previous">&#8592;</a>
335 <a href="#" class="deck-next-link" title="Next">&#8594;</a>
336
337 <p class="deck-status">
338   <span class="deck-status-current"></span>
339   /
340   <span class="deck-status-total"></span>
341 </p>
342
343 <form action="." method="get" class="goto-form">
344   <label for="goto-slide">Go to slide:</label>
345   <input type="text" name="slidenum" id="goto-slide" list="goto-datalist">
346   <datalist id="goto-datalist"></datalist>
347   <input type="submit" value="Go">
348 </form>
349
350 <a href="." title="Permalink to this slide" class="deck-permalink">#</a>
351
352 </article>
353 <footer>
354 <div id="affiliation">Interfakutäres Intstitut für Mikrobiologie und
355 Infektionsmedizin Tübingen (IMIT)
356 </div>
357 <img src="uni_logo.svg" id="uni-logo">
358 </footer>
359
360   <script src="jquery.js"></script>
361
362 <!-- Deck Core and extensions -->
363 <script src="core/deck.core.js"></script>
364 <script src="extensions/hash/deck.hash.js"></script>
365 <script src="extensions/menu/deck.menu.js"></script>
366 <script src="extensions/goto/deck.goto.js"></script>
367 <script src="extensions/status/deck.status.js"></script>
368 <script src="extensions/navigation/deck.navigation.js"></script>
369 <script src="extensions/scale/deck.scale.js"></script>
370
371 <script src="d3.js"></script>
372
373 <!-- Specific to this page -->
374 <script src="antismash_talk.js"></script>
375
376 </body>
377 </html>