-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
249 lines (231 loc) · 8.97 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
<!DOCTYPE html>
<html lang="en">
<head>
<meta
name="google-site-verification"
content="eVQkpMj5Dk1ZjdpCpDPCEInMwNYu-_eqED5fxfsFjzE"
/>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Baltimore Classification of Viruses</title>
<meta
name="description"
content="Slideshow of the seven classes of viral genomes as defined by the Baltimore Classification of Viruses. The slides show an example virus for each class."
/>
<link rel="apple-touch-icon" sizes="180x180" href="apple-touch-icon.png" />
<link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png" />
<link rel="icon" type="image/png" sizes="16x16" href="favicon-16x16.png" />
<link rel="manifest" href="site.webmanifest" />
<link rel="mask-icon" href="safari-pinned-tab.svg" color="#5bbad5" />
<meta name="msapplication-TileColor" content="#da532c" />
<meta name="theme-color" content="#ffffff" />
<script src="js/scripts.js" defer></script>
<link rel="stylesheet" href="css/style.css" />
</head>
<body>
<div class="container">
<header class="header">
<h1>Baltimore Classification of Viruses</h1>
</header>
<div class="slides-container">
<div class="slides-info">
<span class="slide-number"></span>/<span class="slide-total"></span>
</div>
<div class="slides slides-fade">
<picture>
<source
srcset="img/0-seven-classes-viral-genomes-v2.webp"
type="image/webp"
/>
<img
src="img/0-seven-classes-viral-genomes-v2.png"
alt="The seven classes of viral genomes"
/>
</picture>
<div class="slides-caption" id="caption-1">
<p>
+mRNA must be made from all viral genomes in order for viral
proteins to be translated. Classes II, IV, VI and VII require
intermediaries before +mRNA can be produced.
</p>
</div>
</div>
<div class="slides slides-fade">
<picture>
<source srcset="img/1-I-dsDNA.webp" type="image/webp" />
<img src="img/1-I-dsDNA.png" alt="Genome: Double-stranded DNA" />
</picture>
<div class="slides-caption" id="caption-2">
<p>
The negative strand of dsDNA viruses is used to transcribe +mRNA.
dsDNA viruses make use of several mechanisms to replicate their
genomes.
</p>
</div>
</div>
<div class="slides slides-fade">
<picture>
<source srcset="img/2-II-sDNAplusOrMinus.webp" type="image/webp" />
<img
src="img/2-II-sDNAplusOrMinus.png"
alt="Genome: single-stranded DNA (plus or minus)"
/>
</picture>
<div class="slides-caption" id="caption-3">
<p>
The ssDNA, which can be positive or negative, is made into the
dsDNA form by a DNA polymerase upon entering a host cell.
</p>
</div>
</div>
<div class="slides slides-fade">
<picture>
<source srcset="img/3-III-dsRNA.webp" type="image/webp" />
<img src="img/3-III-dsRNA.png" alt="Genome: double-stranded RNA" />
</picture>
<div class="slides-caption" id="caption-4">
<p>
The +mRNA is transcribed from the negative strand of the dsRNA.
The +mRNA is used for both translation of the viral proteins and
replication of the dsRNA genome.
</p>
</div>
</div>
<div class="slides slides-fade">
<picture>
<source srcset="img/4-IV-ssRNAplus.webp" type="image/webp" />
<img
src="img/4-IV-ssRNAplus.png"
alt="Genome: single-stranded RNA plus"
/>
</picture>
<div class="slides-caption" id="caption-5">
<p>
The ss +RNA genome functions as +mRNA, so viral proteins can be
translated immediately. The ss +RNA also produces a negative
strand of -RNA from which positive strand copies of the genome
will be produced.
</p>
</div>
</div>
<div class="slides slides-fade">
<picture>
<source srcset="img/5-V-ssRNAminus.webp" type="image/webp" />
<img
src="img/5-V-ssRNAminus.png"
alt="Genome: single-stranded RNA minus"
/>
</picture>
<div class="slides-caption" id="caption-6">
<p>
The +mRNA is transcribed directly from the negative sense genome.
</p>
</div>
</div>
<div class="slides slides-fade">
<picture>
<source srcset="img/6-VI-ssRNAplusRT.webp" type="image/webp" />
<img
src="img/6-VI-ssRNAplusRT.png"
alt="Genome: single-stranded RNA plus"
/>
</picture>
<div class="slides-caption" id="caption-7">
<p>
Retroviral ss +RNA viruses use reverse transcription to produce a
dsDNA strand. It is called a provirus because it is integrated
into the host cell genome, from where the genomic +RNA is
transcribed and viral proteins are translated. See
“<a
href="https://chrisnajman.github.io/hiv/"
target="_blank"
rel="noopener noreferrer"
>HIV</a
>” by the same author for details on reverse
transcription and HIV.
</p>
</div>
</div>
<div class="slides slides-fade">
<picture>
<source srcset="img/7-VII-gappedDsDNA.webp" type="image/webp" />
<img
src="img/7-VII-gappedDsDNA.png"
alt="Genome: double-stranded DNA (gapped)"
/>
</picture>
<div class="slides-caption" id="caption-8">
<p>
dsDNA retroviruses have a gap in one of the strands of the genome,
which is subsequently repaired. From this a +RNA strand is
transcribed which is then reverse transcribed into genomic, i.e.
gapped, dsDNA.
</p>
</div>
</div>
<button class="cards-reset cards-reset-right">Reset</button>
<button class="slides-prev previous slides-nav">❮</button>
<button class="slides-next next slides-nav">❯</button>
</div>
<blockquote class="quote">
<p>
Baltimore classification groups viruses together based on their manner
of mRNA synthesis. Characteristics directly related to this include
whether the genome is made of deoxyribonucleic acid (DNA) or
ribonucleic acid (RNA), the strandedness of the genome, which can be
either single- or double-stranded, and the sense of a single-stranded
genome, which is either positive or negative. The primary advantage of
Baltimore classification is that by classifying viruses according to
the aforementioned characteristics, viruses that behave in the same
manner can be studied as distinct groups.
</p>
</blockquote>
<p class="quote-source">
Source:
<a
href="https://en.wikipedia.org/wiki/Baltimore_classification"
target="_blank"
rel="noopener noreferrer"
>Wikipedia, Baltimore Classification</a
>
</p>
<footer class="footer">
<h2>Image credits</h2>
<ul>
<li>
The slides are essentially reworked versions of the illustrations
featured in the excellent Vincent Racaniello (Columbia University)
YouTube video lecture on
<a
href="https://www.youtube.com/watch?v=ZVwsdRN-Jf0&list=PLGhmZX2NKiNlsqbNuq__7jeedNkdEaZBv&index=4"
target="_blank"
rel="noopener noreferrer"
>Virology 2015 Lecture #3: Genomes and Genetics</a
>.
</li>
<li>
All images created with
<a
href="https://app.biorender.com"
target="_blank"
rel="noopener noreferrer"
title="External link"
>BioRender.com</a
>.
</li>
<li>
PNG to WEBP conversion:
<a
href="https://onlineconvertfree.com/complete/png-webp/"
target="_blank"
rel="noopener noreferrer"
class="word-break"
>https://onlineconvertfree.com/complete/png-webp/</a
>.
</li>
</ul>
</footer>
</div>
</body>
</html>