-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
398 lines (355 loc) · 20.7 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
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
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
<!DOCTYPE html>
<head>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-137853326-2"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-137853326-2');
</script>
<meta charset="utf-8">
<meta name="description" content="BLNKDISRUPTION is a project which aims to investigate the evolution of creative media, what it is today and what it could develop into in the future.">
<meta name="keywords" content="blnkdisruption augmented reality dkit dundalk ireland creative media fis graduate projection colouring book therapy">
<meta name="author" content="Renno Riyadi">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<meta http-equiv="content-language" content="en" />
<title>BLNKDISRUPTION</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/bootstrap-grid.min.css">
<link rel="stylesheet" href="css/animate.css">
<link href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700" rel="stylesheet">
<!-- Favicon -->
<link rel="apple-touch-icon-precomposed" sizes="57x57" href="img/favicon/apple-touch-icon-57x57.png" />
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/favicon/apple-touch-icon-114x114.png" />
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/favicon/apple-touch-icon-72x72.png" />
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/favicon/apple-touch-icon-144x144.png" />
<link rel="apple-touch-icon-precomposed" sizes="60x60" href="img/favicon/apple-touch-icon-60x60.png" />
<link rel="apple-touch-icon-precomposed" sizes="120x120" href="img/favicon/apple-touch-icon-120x120.png" />
<link rel="apple-touch-icon-precomposed" sizes="76x76" href="img/favicon/apple-touch-icon-76x76.png" />
<link rel="apple-touch-icon-precomposed" sizes="152x152" href="img/favicon/apple-touch-icon-152x152.png" />
<link rel="icon" type="image/png" href="img/favicon/favicon-196x196.png" sizes="196x196" />
<link rel="icon" type="image/png" href="img/favicon/favicon-96x96.png" sizes="96x96" />
<link rel="icon" type="image/png" href="img/favicon/favicon-32x32.png" sizes="32x32" />
<link rel="icon" type="image/png" href="img/favicon/favicon-16x16.png" sizes="16x16" />
<link rel="icon" type="image/png" href="img/favicon/favicon-128.png" sizes="128x128" />
<meta name="application-name" content=" "/>
<meta name="msapplication-TileColor" content="#FFFFFF" />
<meta name="msapplication-TileImage" content="img/favicon/mstile-144x144.png" />
<meta name="msapplication-square70x70logo" content="img/favicon/mstile-70x70.png" />
<meta name="msapplication-square150x150logo" content="img/favicon/mstile-150x150.png" />
<meta name="msapplication-wide310x150logo" content="img/favicon/mstile-310x150.png" />
<meta name="msapplication-square310x310logo" content="img/favicon/mstile-310x310.png" />
</head>
<body>
<!-- Hero -->
<div class="blnk-hero" data-vide-bg="video/blnk-hero">
<!-- Navigational Bar -->
<div class="blnk-navbar">
<div class="container">
<div class="row">
<div class="blnk-project-logo col-6 col-sm-6 col-md-6 col-lg-2 col-xl-2">
<img src="img/misc/blnk-project-logo.svg"></img>
</div>
<div class="blnk-navbar-link text-center d-none d-sm-none d-md-none d-lg-block d-xl-block col-md-8 col-lg-8 col-xl-8">
<a href="#blnk-project-scroll">Our Project</a>
<a href="#blnk-documentary-scroll">Documentary</a>
<a href="#blnk-instagram-scroll">#ALLUPINYOURSPACE</a>
<a href="#blnk-mtt-scroll">Meet the Team</a>
</ul>
</div>
<div class="blnk-navbar-instagram col-6 col-sm-6 col-md-6 col-lg-2 col-xl-2"><a href="http://www.instagram.com/blnkdisruption">Follow Our Process</a></div>
</div>
</div>
</div>
<div class="blnk-hero-content text-center wow fadeIn">
<div class="container">
<div class="row justify-content-center">
<div class="col-xl-12">
<h1>#ALLUPINYOURSPACE</h1>
<h2>Exploring Audience Reactions to the Progression from Traditional to Contemporary Creative Media</h2>
<div class="blnk-hero-caption">
<p>Final Year Project for <a href="https://www.dkit.ie">Dundalk Institute of Technolgy</a></p>
<p class="blnk-hero-caption-padding">Exhibited at <a href="https://fis.comp.dkit.ie/">FÍS19 Graduate Show</a></p>
</div>
<p class="blnk-hero-documentary"><a href="#blnk-documentary-scroll">Watch the Montage</a></p>
</div>
</div>
</div>
</div>
<p class="blnk-hero-scroll"><a href="#blnk-project-scroll">Scroll Down to Learn More</a></p>
</div>
<!-- About -->
<div class="blnk-project" id="blnk-project-scroll">
<div class="container wow fadeIn">
<div class="row">
<div class="col-lg-6">
<h1>OUR PROJECT</h1>
<p class="blnk-project-1">BLNKDISRUPTION is a project which aims to investigate the evolution of creative media, what it is in its traditional form and what is can develop into with the assistance of modern technologies.</p>
<p class="blnk-project-2">The core of the project is to explore the progression of creative media from traditional to contemporary. The project also examines the potential reaction this could have on an audience.</p>
<p class="blnk-project-2">BLNKDISRUPTION encourages everyone to experience the progression between the two mediums. The first step is to access the Snapchat app. Next you must hover you camera over our Lens Code to unlock our unique lens. Now you’re ready to bring our elephant to life!</p>
<p class="blnk-project-2">Our ambition was to produce a powerful and inspirational project that will create an enlightening user experience through the use of a Snapchat Lens, we have enabled a piece of traditional creative media to come to life. This process showcases the progression of to traditional to contemporary creative media and highlights the potential of techonlogy on traditional media.</p>
<p class="blnk-project-3">Can't make it to the Exhibition? Try out the AR experience from the comfort of your home by scanning <a href="img/scan/blnk-scan.png">this image</a> using <a href="https://www.snapchat.com/unlock/?type=SNAPCODE&uuid=0875b1715521427db21eda56715c8df4&metadata=01">Our Lens</a> via <a href="https://www.snapchat.com/download">Snapchat</a></p>
</div>
<div class="col-lg-6 text-right"><img src="img/index/blnk-project-photo.jpg">
</div>
</div>
</div>
</div>
<!-- Findings -->
<div class="blnk-findings">
<div class="container wow fadeIn">
<div class="row">
<div class="col-lg-12">
<h1>Project Findings</h1>
<p class="blnk-project-1">As part of our research question, we wanted to analyse people’s reactions to using traditional vs using contemporary creative media. In order to obtain these results, we used both quantitative and qualitative research methods. </p>
<img class="blnk-graph-1" src="img/graph/blnk-graph-1.png">
<p class="blnk-project-2">For the first part of our project we conducted a survey with the participants for our traditional painting experience. Overall, we had 29 participants in the study. There were 55.2% majority of females and 44.8% of males involved. As the study was undertaken with undergrad students in the college, 96.6% of the participants were aged between 18-30 and 3.4% 30-40.</p>
<img class="blnk-graph-2" src="img/graph/blnk-graph-2.png" />
<p class="blnk-project-2">In our research we discovered that art therapy and community- based art can be interlinked so we wanted to investigate if the participants felt relaxed while painting. 72.4% said yes, 17.2% said they were unsure and 10.3% said no.</p>
<p class="blnk-project-2">In the focus group, participant A said they really enjoyed the experience she can’t remember the last time they had painted. Participant B said they found the experience very therapeutic. Participant A stated that the second art piece brought the project into the modern world. They stated that everything is either snapchat or Instagram, basically everything has a filter. They said they like the artistic ability of the first piece but said by turning it into a digital piece it brings your imagination into reality.</p>
</div>
</div>
</div>
</div>
<div class="blnk-disc">
<div class="container wow fadeIn">
<div class="row">
<div class="col-lg-12">
<h1>Discussion</h1>
<p class="blnk-project-1">From the results of both the survey and the focus group, the researchers analyzed whether the interaction with the participants and their reaction to the project was successful or not.</p>
<p class="blnk-project-2">Firstly, the participants who were involved in the painting workshop day had an overall positive reaction to creating the artwork together. Overall, they enjoyed the experience of using the paint as one participant stated “haven’t painted in years, and it was great fun”. This positive result can reflect the researchers initial research into community-based art and how it can have a positive affect on people.</p>
<p class="blnk-project-2">In our research we discovered that art therapy and community- based art can be interlinked so we wanted to investigate if the participants felt relaxed while painting. 72.4% said yes, 17.2% said they were unsure and 10.3% said no.</p>
<p class="blnk-project-2">In regard to the focus group, once again the researchers received positive feedback from the participants. The main aim of the focus group was to investigate whether or not the they liked the contemporary piece.</p>
<p class="blnk-project-2">From the results it can be stated that the participants liked the traditional artwork but by bringing it into the modern world it brings the art from imagination to reality.</p>
<p class="blnk-project-2">Overall, the results were expected from the two studies, the researchers did not expect the project to be a life-changing experience for the participants but they glad there was a positive affirmation for the project.</p>
</div>
</div>
</div>
</div>
<!-- Documentary -->
<div class="blnk-documentary" id="blnk-documentary-scroll">
<div class="container wow fadeIn">
<div class="row">
<div class="blnk-documentary-video col-lg-12">
<iframe src="https://www.youtube.com/embed/SkGKIBy-PiQ?autoplay=0&rel=0" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="blnk-documentary-left col-xl-4 col-md-4 order-2 order-md-1 order-xl-1">
<p><span class="blnk-documentary-bold">#ALLUPINYOURSPACE</span></p>
<p>A Mini Montage by BLNKDISRUPTION</p>
<br>
<p><span class="blnk-documentary-bold">Director:</span> Dearbhla Brodigan</p>
<p><span class="blnk-documentary-bold">Editor:</span> Dearbhla Brodigan, Faye Flynn</p>
<p><span class="blnk-documentary-bold">Sound:</span> Faye Flynn</p>
<p><span class="blnk-documentary-bold">Camera:</span> Dearbhla Brodigan, Mary McKeever</p>
<br>
<p><span class="blnk-documentary-bold">Video Duration</span></p>
<p>2 Minutes</p>
<br>
<p><span class="blnk-documentary-bold">Share this Video</span></p>
<p><a href='https://www.facebook.com/sharer/sharer.php?u=https://riyadirenno.github.io/blnkdisruption/index.html' target='share'>Facebook</a> and <a href='https://twitter.com/intent/tweet?text=https://riyadirenno.github.io/blnkdisruption/index.html' target='share'>Twitter</a></p>
</div>
<div class="col-xl-8 col-md-8 order-1 order-md-2 order-xl-2">
<p class="blnk-documentary-1">One of the main deliverables of this project is a mini documentary documenting our process and our findings throughout the duration of the project.</p>
<p class="blnk-documentary-2">This video includes a mini montage of the work the researchers did in order to prepare for the traditional painting day. This included painting the boards white, projecting the design onto the boards, sketching the design and redoing it with black marker. The montage video also shows a snippet of the traditional painting day and the long process it took in order to complete the design. The last part of the montage is showing the participants who painted on the first day the finished contemporary piece. The researchers had a lot of fun making the project and the montage hopefully reflects this. </p>
</div>
</div>
</div>
</div>
<!-- Border -->
<div class="container">
<div class="row">
<div class="col-lg-12">
<hr class="blnk-hr-documentary">
</div>
</div>
</div>
<!-- #ALLUPINYOURSPACE -->
<div class="blnk-allupinyourspace" id="blnk-instagram-scroll">
<div class="container wow fadeIn">
<div class="container">
<div class="row">
<div class="blnk-allupinyourspace-content col-xl-6 order-2 order-xl-1">
<p class="blnk-allupinyourspace-1">We always wanted our process to be as transparent as possible. We want you; yes, you! To get involved! View our posts on Instagram, personally curated by members of our team.</p>
<p class="blnk-allupinyourspace-2">Use our Hashtag <a href="https://www.instagram.com/explore/tags/allupinyourspace/">#ALLUPINYOURSPACE</a> to get your post featured in our Instagram page!</p>
</div>
<div class="blnk-allupinyourspace-header col-xl-6 order-1 order-xl-2">
<h1>#ALLUPINYOURSPACE</h1>
</div>
</div>
</div>
<div class="row" id="instafeed">
</div>
<div class="blnk-allupinyourspace-link text-center">
<a href="https://www.instagram.com/blnkdisruption">View our Instagram Feed</a>
</div>
</div>
</div>
<!-- Meet the Team -->
<div class="blnk-mtt" id="blnk-mtt-scroll">
<div class="container wow fadeIn">
<div class="row">
<div class="col-xl-12">
<h1>MEET THE TEAM</h1>
</div>
<div class="col-xl-12">
<a href="https://youtu.be/prBVvrI4BB8"><img src="img/index/blnk-team-photo.jpg" alt="BLNKDISRUPTION team photo, from left to right: Dearbhla Brodigan, Renno Riyadi, Mary McKeever, Faye Flynn"></img></a>
</div>
<div class="col-xl-3 col-6">
<p class="blnk-mtt-name">Dearbhla Brodigan</p>
<p class="blnk-mtt-position">Project Manager & Videographer</p>
<div class="blnk-mtt-insta-portfolio row">
<div class="col-6">
<p>Instagram</p>
<a href="https://www.instagram.com/dearbhlabrodigan/">dearbhlabrodigan</a>
</div>
<div class="col-6">
<p>Portfolio</p>
<a href="http://bit.ly/2ITdGvA">Portfolio Link</a>
</div>
</div>
</div>
<div class="col-xl-3 col-6">
<p class="blnk-mtt-name">Renno Riyadi</p>
<p class="blnk-mtt-position">Graphic Designer & Developer</p>
<div class="blnk-mtt-insta-portfolio row">
<div class="col-6">
<p>Instagram</p>
<a href="https://www.instagram.com/riyadirenno/">riyadirenno</a>
</div>
<div class="col-6">
<p>Portfolio</p>
<a href="http://bit.ly/2LjAbvJ">Portfolio Link</a>
</div>
</div>
</div>
<div class="blnk-mtt-padding col-xl-3 col-6">
<p class="blnk-mtt-name">Mary McKeever</p>
<p class="blnk-mtt-position">Graphic Designer & Researcher</p>
<div class="blnk-mtt-insta-portfolio row">
<div class="col-6">
<p>Instagram</p>
<a href="https://www.instagram.com/marymckeever_/">marymckeever_</a>
</div>
<div class="col-6">
<p>Portfolio</p>
<a href="http://bit.ly/2LjAbvJ">Portfolio Link</a>
</div>
</div>
</div>
<div class="blnk-mtt-padding col-xl-3 col-6">
<p class="blnk-mtt-name">Faye Flynn</p>
<p class="blnk-mtt-position">Digital Marketer & Researcher</p>
<div class="blnk-mtt-insta-portfolio row">
<div class="col-6">
<p>Instagram</p>
<a href="https://www.instagram.com/fayeflynn_/">fayeflynn_</a>
</div>
<div class="col-6">
<p>Portfolio</p>
<a href="http://bit.ly/2WgZtvH">Portfolio Link</a>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Border -->
<div class="blnk-z-index container">
<div class="row">
<div class="col-lg-12">
<hr class="blnk-hr-acknowledgements">
</div>
</div>
</div>
<!-- Acknowledgements -->
<div class="blnk-acknowledgements">
<div class="container">
<div class="row justify-content-center">
<div class="col-xl-7 col-md-9 text-center">
<p>BLNKDISRUPTION is our final year project which will be showcased at <a href="https://fis.comp.dkit.ie/FIS19">FÍS19 Graduate Show.</a></p>
<p class="blnk-acknowledgements-padding-1">We would like to thank everyone who has helped and participated in our workshops.</p>
<p>Lastly, we would also like to thank our supervisor Fiachra O’Cuinneagain for helping and guiding us throughout the duration of the project.</p>
<p class="blnk-acknowledgements-padding-2">#weareallartists</p>
</div>
</div>
</div>
</div>
<!-- Footer -->
<div class="blnk-footer">
<div class="container">
<div class="row">
<div class="blnk-footer-left col-xl-6 col-lg-12 col-12">
<hr class="blnk-footer-hr">
<div class="blnk-footer-link-1">
<p class="">Instagram</p>
<a href="https://www.instagram.com/blnkdisruption">@blnkdisruption</a>
</div>
<div class="blnk-footer-link-2">
<p class="">Twitter</p>
<a href="https://www.twitter.com/blnkdisruption">@blnkdisruption</a>
</div>
<div class="blnk-footer-link-3">
<p class="">Dundalk Institute of Technology</p>
<a href="https://www.dkit.ie">Dublin Road, Dundalk, Co. Louth, Ireland</a>
</div>
</div>
<hr class="blnk-footer-hr">
<div class="blnk-footer-right col-xl-6 col-lg-12 col-12 text-right">
<br>
<a href="https://fis.comp.dkit.ie/" class="blnk-footer-fis-portal">FÍS19 Graduate Show Portal</a>
<span class="blnk-footer-copyright">© BLNKDISRUPTION <script type="text/javascript">document.write(new Date().getFullYear());</script></span>
<span class="blnk-footer-credit">Website by <a href="https://www.riyadirenno.com">Renno Riyadi</span>
</div>
<div class="col-12 blnk-footer-scroll-top">
<a href="#scroll-to-top">Scroll to Top</a>
</div>
</div>
</div>
</div>
</body>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="js/jquery.vide.js"></script>
<script src="js/wow.min.js"></script>
<script src="js/instafeed.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var userFeed = new Instafeed({
get: 'user',
userId: '9256342693',
limit: 8,
resolution: 'standard_resolution',
accessToken: '9256342693.1677ed0.d2f241538dda411c9c116c8c1a6481a0',
sortBy: 'most-recent',
template: '<div class="col-xl-3 col-lg-3 col-md-6 col-6 instaimg"><a href="{{link}}" title="{{caption}}" target="_blank"><img src="{{image}}" alt="{{caption}}"/></a></div>',
});
userFeed.run();
});
</script>
<script>
new WOW().init();
</script>
<script type="text/javascript">
<!-- Scroll to top settings -->
$("a[href='#scroll-to-top']").click(function() {
$("html, body").animate({
scrollTop: 0
}, "slow");
return false;
});
$(function() {
$(document).scroll(function() {
var $nav = $(".fixed-top");
$nav.toggleClass('scrolled', $(this).scrollTop() > $nav.height());
});
});
$('a[href*="#"]').on('click', function(e) {
e.preventDefault();
$('html, body').animate({
scrollTop: $($(this).attr('href')).offset().top
}, 500, 'linear');
});
</script>
</html>