-
Notifications
You must be signed in to change notification settings - Fork 0
/
timeline.html
366 lines (335 loc) · 14.4 KB
/
timeline.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
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
<!DOCTYPE html>
<html>
<head>
<title>von Neumann Boutique</title>
<link rel="stylesheet" href="styles.css">
<link rel="stylesheet" href="menu-tabs-styles.css">
<link rel="stylesheet" href="timeline-styles.css">
</head>
<header>
<a style="text-decoration:none" href="index.html">
<h1 class="vnb">The von Neumann Boutique</h1>
</a>
</header>
<body>
<div class="container">
<ul class="menu-bar">
<li><i><a href="menu.html" style="text-decoration: underline;">Menu</a></i></li>
<li><i><a href="about.html">About</a></i></li>
<li><i><a href="timeline.html" class="active">Research</a></i></li>
<li><i><a href="books.html">Results</a></i></li>
<li><i><a href="contact.html">Contact</a></i></li>
</ul>
<h1>Behind the Research</h1>
<p style="text-align: justify;">Many thanks to my advisor Dr. Bin Ren,
Assistant Professor of Computer Science at William & Mary,
for guiding this project. Special mention to Prof. Fredric Lederer,
Chancellor Professor of Law and Director of CLCT, at
William & Mary Law School for his advice.
</p>
<div class="show-research">
<button class="essay-button" id="essayBtn">Research Essay</button>
<div id="essayModal" class="modal"> <!-- Essay Modal -->
<div class="modal-content">
<span class="close essayClose">×</span>
<div class="modal-display">
<iframe class="pdf" src="Brei_ResearchEssay.pdf"></iframe>
</div>
</div>
</div>
<br>
<h1>Project Timeline</h1>
<div class="timeline">
<div class="t-container t-left">
<button class="t-content t-button" id="t1Btn">
<h2>Winter 2019-20</h2>
<p>Submit research proposal</p>
</button>
</div>
<div id="t1Modal" class="t-modal"> <!-- 1st Timeline Modal -->
<div class="t-modal-content">
<span class="close t1Close">×</span>
<div class="modal-display">
<h2>Winter 2019-2020 - Research Proposal</h2>
<p style="text-align: justify;">The research proposal application
process was selective. The following summarizes
the intentions behind my research:
</p>
<hr>
<p style="text-align: justify;">The objective is to explore a concept
in computer science and re-explain it in a work of fiction
so that the concept is easy for anyone outside the field to
understand. Specifically, I will explore the basic communication
problems in parallel computing. Using general ideas of computer
science, I will create metaphors of the parallel computing
challenges and represent them as the world of smart technology.
In this way the story will present a world that represents current
problems computer scientists are trying to solve for complex tasks.
</p>
<p style="text-align: justify;">This is an interdisciplinary project.
I plan to bridge the world of computer science and everyday life
to predict how smart technology will impact society in five years.
The goal is to communicate advanced concepts by providing concrete
metaphors for how computer science works. I will also explore ethical
problems and dilemmas introduced by smart technology. Readers will not
need a computer science background to understand these concepts; ideally
they will not even realize that they are learning computer science.
The intended audience is middle schoolers and high schoolers who might
not be considering computer science as a future career path. This story
will draw its readers into the field.</p>
</div>
</div>
</div>
<div class="t-container t-right">
<button class="t-content t-button" id="t2Btn">
<h2>Spring 2020</h2>
<p>Research historical figure, Ada Lovelace (1815-1852)</p>
</button>
</div>
<div id="t2Modal" class="t-modal"> <!-- 2nd Timeline Modal -->
<div class="t-modal-content">
<span class="close t2Close">×</span>
<div class="modal-display">
<h2>Spring 2020 - Researching Ada Lovelace</h2>
<img src="Ada_Byron_aged_seventeen_(1832).png" alt="Ada Byron aged seventeen (1832)" style="max-width: 300px;"/>
<p style="text-align: center; font-size: small;"><b>Ada Byron aged seventeen (1832)</b></p>
<p style="text-align: center; font-size: small;">By Unknown author -
Scanned from The Calculating Passion of Ada Byron by Joan Baum. <br>
Originally from the Lovelace-Byron Collection., Public Domain,
https://commons.wikimedia.org/w/index.php?curid=19076813
</p>
<br>
<p style="text-align: justify;">The historical figure, Augusta Ada (née Byron) King, Countess of Lovelace,
inspired the fictional character, ADA, in the boutique.
Before writing <i>The von Neumann Boutique</i>, I investigated several recorded events in
Lovelace's life, including Lovelace's attempted elopement with her tutor, William Turner, between
1832-1833.
My research was further advanced with the assistance of librarians from
the Bodleian Libraries at the University of Oxford. They provided electronic
access to diary entries located in the Lovelace Byron Dep.
</p>
</div>
</div>
</div>
<div class="t-container t-left">
<button class="t-content t-button" id="t3Btn">
<h2>Summer 2020</h2>
<p>Write and publish <i>The von Neumann Boutique</i></p>
</button>
</div>
<div id="t3Modal" class="t-modal"> <!-- 3rd Timeline Modal -->
<div class="t-modal-content">
<span class="close t3Close">×</span>
<div class="modal-display">
<h2>Summer 2020 - <i>The von Neumann Boutique</i></h2>
<img src="Book_Stack.png" alt="Stack of books" style="max-width: 400px;"/>
<p style="text-align: justify;">As a Monroe scholar at William & Mary, I received a research grant
to devote 7-10 weeks of my summer to research. During this time, I
studied parallel processing, drew connections to real-life events, and
wrote a story interweaving them. At the end of the summer, I published my manuscript.
<br><br>
<b>Topics in computer science:</b></p>
<ul style="text-align: justify;">
<li>Black box model</li>
<li>Serial computations</li>
<li>Bottleneck issue</li>
<li>Embarrassingly parallel computations</li>
<li>von Neumann architecture (memory, CPU/processor, input/output)</li>
<li>Multiple instruction multiple data (MIMD) parallel processing architecture</li>
<li>Interconnecting network</li>
<li>Data exchange topology</li>
<li>Fault tolerance</li>
<li>Fault resistance</li>
<li>Redundancy</li>
<li>etc.</li>
</ul>
</div>
</div>
</div>
<div class="t-container t-right">
<button class="t-content t-button" id="t4Btn">
<h2>Winter 2020-21</h2>
<p>Learn enough HTML/CSS/Javascript to create website dedicated to the Boutique</p>
</button>
</div>
<div id="t4Modal" class="t-modal"> <!-- 4th Timeline Modal -->
<div class="t-modal-content">
<span class="close t4Close">×</span>
<div class="modal-display">
<h2>Winter 2020-2021</h2>
<p><b>Ingredients for This Website: A Few Elements I Learned to Use</b></p>
<br>
<p style="text-align: justify;">The objective was to build this website
completely from scratch in HTML, CSS, and Javascript. I wanted to
test how sophisticated my website would be after a few weeks without
using Bootstrap or other libraries for templates.
Since this is the first time I've coded in HTML/CSS,
I relied on blogs and tutorials,
such as w3schools.com and tutorialspoint.com,
to learn how to use the elements and how to structure my documents.
The elements I used include the following:
</p>
<div class="lang-table">
<div class="col" style="text-align: left;">
<p><b>HTML</b></p>
<ul>
<li>Layout
<ul>
<li>head</li>
<li>header</li>
<li>body</li>
<li>footer</li>
</ul>
</li>
<li>Copy
<ul>
<li>h1 (heading 1)</li>
<li>h2 (heading 2)</li>
<li>p (paragraph)</li>
<li>b (bold)</li>
<li>i (italic)</li>
<li>a (hyperlink)</li>
<li>small (small font size)</li>
</ul>
</li>
<li>Structure
<ul>
<li>div (content division)</li>
<li>span (inline container)</li>
<li>br (break)</li>
<li>hr (horizontal rule)</li>
<li>button</li>
<li>ul (unordered list)</li>
<li>li (list element)</li>
<li>img (image) </li>
<li>iframe (embeds doc)</li>
</ul>
</li>
</ul>
</div>
<div class="col" style="text-align: left;">
<p><b>CSS</b></p>
<ul>
<li>Text
<ul>
<li>font-size</li>
<li>font-family</li>
<li>font-weight</li>
<li>text-align</li>
<li>text-decoration</li>
<li>color</li>
<li>content</li>
</ul>
</li>
<li>Spacing
<ul>
<li>padding (all, sides)</li>
<li>margin (all, sides)</li>
<li>max-width, width</li>
<li>position (fixed, sticky, relative, absolute)</li>
<li>display (block, grid, flex)</li>
<li>top, bottom</li>
<li>height</li>
<li>overflow</li>
<li>float</li>
<li>z-index</li>
</ul>
</li>
<li>Template: box, list, grid
<ul>
<li>border, border-radius, border-color</li>
<li>box-sizing</li>
<li>list-style, list-style-type</li>
<li>grid-template-columns</li>
<li>flex-direction</li>
<li>flex-shrink</li>
<li>justify-content</li>
</ul>
</li>
<li>Background
<ul>
<li>background-color</li>
<li>background-image</li>
<li>background-repeat</li>
<li>background-attachment</li>
<li>background-size</li>
</ul>
</li>
<li>Visual aid
<ul>
<li>visibility</li>
</ul>
</li>
<li>Animations
<ul>
<li>cursor (pointer)</li>
<li>hover</li>
<li>transform, transform-style</li>
<li>transition</li>
<li>animation-name</li>
<li>animation-duration</li>
<li>animation-fill-mode</li>
<li>animation-direction</li>
<li>animation-delay</li>
<li>perspective</li>
</ul>
</li>
</ul>
</div>
<div class="col" style="text-align: left;">
<p><b>Javascript</b></p>
<ul>
<li>Variables for the following:
<ul>
<li>modal</li>
<li>button</li>
<li>span</li>
</ul>
</li>
<li>Variable methods:
<ul>
<li>onclick</li>
<li>style.display</li>
</ul>
</li>
<li>Document methods:
<ul>
<li>getElementById</li>
<li>getElementsByClassName</li>
</ul>
</li>
</ul>
</div>
</div>
<br><br>
</div>
</div>
</div>
<div class="t-container t-left">
<button class="t-content t-button" id="t5Btn">
<h2>Future Research</h2>
<p>To Be Announced...</p>
</button>
</div>
</div>
<div id="t5Modal" class="t-modal"> <!-- 2nd Timeline Modal -->
<div class="t-modal-content">
<span class="close t5Close">×</span>
<div class="modal-display">
<h2>Future Work on the Horizon</h2>
<hr>
<p style="text-align: center;">
What's next for the boutique? Another book? An animation? Please send your suggestions!
</p>
<br>
<a href="contact.html" class="contact-author">Contact the author</a>
</div>
</div>
</div>
<br>
<br>
</div>
<script src="timeline.js"></script>
</body>
<footer> <small>Copyright © 2020, Anneliese Brei. All rights reserved</small> </footer>
</html>