-
-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathabout.html
154 lines (140 loc) · 7.61 KB
/
about.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
<!DOCTYPE html>
<html lang="en">
<head>
<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>Iron Maiden - Virtual Drumming Integration PoC</title>
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="./assets/css/style.css" />
</head>
<body>
<div id="header">
<div class="nav-bar">
<div class="wrapper">
<a href="./" class="logo" title="Iron Maiden"></a>
<div class="nav-right">
<div class="nav-wrapper">
<ul class="nav">
<li class="active"><a href="./">Home</a></li>
<li><a href="./about.html" title="News">About</a></li>
<li><a href="./virtual-drum-kit.html" title="News">Virtual Drumkit</a></li>
</ul>
</div>
</div>
</div>
</div>
<div class="social-bar">
</div>
</div>
<div id="middle">
<!-- BEGIN page content -->
<div class="row-gallery bg-black">
<div class="wrapper">
<div class="row-title">
<h2 class="display-block" id="gallery-title">About This Site</h2>
</div>
<div class="row">
<section>
<h3 class="display-block" id="gallery-title">Overview</h3>
<p>This website is a hypothetical proof of concept, for an integration between
<em><strong>Virtual Drumming</strong></em>
and <em><strong>Iron Maiden</strong></em>.
</p>
<p>The hypothetical scenario being played out is:</p>
<blockquote>
<em>
I have been contracted by <strong>Virtual Drumming</strong>, to produce a
proof-of-concept virtual drumkit,
integrated within <strong>Iron Maiden's</strong> official website. The PoC site would be
used within a sales pitch
to <strong>Iron Maiden</strong>, to provide a mini-game for their website; with the aim
of boosting marketing for an
upcoming drum Masterclass series, on <strong>Virtual Drumming</strong>, hosted by
<strong>Nicko McBrain</strong>.
</em>
</blockquote>
<p>
To this end, the skeleton framework of the site is heavily based around the design from
<a href="https://www.ironmaiden.com" target="_blank">www.ironmaiden.com</a>. Their choice of
typography, logos, favicon,
background assets, and general page structure have all been retained. This is to ensure that
the
proof of concept design is as close as possible to the site it would eventually be hosted
on.
</p>
<p>
The virtual drumkit audio, and visual assets, for Nicko's drumkit, have been lifted from
<a href="http://www.virtualdrumming.com" target="_blank">www.virtualdrumming.com</a>, and
tweaked to fit into a new host
container. This is to ensure that the proof of concept mini-game is as close as possible to
the
original, as possible.
</p>
<p>
Finally, a full JS framework has been written from scratch to allow multiple ways of
interacting
with the virtual drumkit.
</p>
<ul>
<li>Clicking on each instrument, within the image on the screen.</li>
<li>Clicking on each box that displays the keyboard shortcut for each instrument.</li>
<li>Pressing the associated keyboard shortcut, for each instrument.</li>
</ul>
</section>
<section>
<h3 class="display-block" id="gallery-title">Disclaimer</h3>
<p>
This hypothetical case scenario is solely an educational exercise and does not necessarily
reflect the official position of <em><strong>Virtual Drumming</strong></em>,
or <em><strong>Iron Maiden</strong></em> on this issue. At time of publication, no such
collaborations exist between the two entities, and nothing like this hypothetical scenario
has been discussed within the public realm, by either entity. This hypothetical scenario has
been imagined for an educational assignment, based around audio-visual control on a website,
using JavaScript.
</p>
</section>
<section>
<h3 class="display-block" id="gallery-title">Asset Attribution</h3>
<p>
All visual, and audio assets from <em><strong>Virtual Drumming</strong></em> and
<em><strong>Iron
Maiden</strong></em> are being used under fair dealing, as an educational resource;
within a derived work,
created to demonstrate, and evaluate their usage.
</p>
<ul>
<li><strong>Iron Maiden Website Assets:</strong> - Rights reserved by <em><strong>Keane
Creative Ltd</strong></em>.</li>
<li><strong>Virtual Drumming Audio Assets:</strong> - Rights reserved by <em><strong>Virtual
Drumming</strong></em>.</li>
<li><strong>Virtual Drumming Visual Assets:</strong> - Rights reserved by
<em><strong>Virtual Drumming</strong></em>.</li>
</ul>
</section>
</div>
<div class="row-title">
</div>
</div>
</div>
<!-- END page content -->
</div>
<div id="footer">
<div class="wrapper container-fluid">
<div class="row">
<div>
<span class="logo"></span>
</div>
</div>
<div class="row">
<div>
Website Design Cloned by Peter C. Matthews, but copyright is retained to © 2023 - Iron Maiden -
<a href="http://www.keanecreative.co.uk/?utm_source=ironmaiden&utm_medium=link&utm_campaign=websitelink"
target="_blank" title="Website Design Doncaster - Keane Creative Ltd.">Original Website Designed
& Developed by Keane Creative Ltd.</a>
</div>
</div>
</div>
</div>
</body>
</html>