-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
451 lines (319 loc) · 21.5 KB
/
index.html
File metadata and controls
451 lines (319 loc) · 21.5 KB
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
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
<!DOCTYPE html>
<html lang="en">
<head>
<title></title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="css/themes/PoliticalParty.min.css" />
<link rel="stylesheet" href="css/themes/jquery.mobile.icons.min.css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile.structure-1.4.5.min.css" />
<link rel="stylesheet" type="text/css" href="css/politicalparty.css">
<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript" src="http://www.google.com/jsapi"></script>
<!-- SET UP ICON FOR VARIOUS SIZES-->
<meta name="apple-mobile-web-app-capable" content="yes">
<link rel="apple-touch-icon" href="img/theconnecticon.png">
<link rel="apple-touch-icon" sizes="76x76" href="img/theconnecticon.png">
<link rel="apple-touch-icon" sizes="120x120" href="img/theconnecticon.png">
<link rel="apple-touch-icon" sizes="152x152" href="img/theconnecticon.png">
<link rel="apple-touch-icon-precomposed" href="img/theconnecticon.png">
<!-- ANDROID-->
<link rel="shortcut icon" sizes="57x57" href="img/theconnecticon.png">
</head>
<body>
<div data-role="page" data-theme="a" id="page01">
<div data-role="header" data-theme="a">
<h1>The Connect</h1>
<p style="font-size:90%; text-align: center"> "Your Canadian Political News Source"</p>
</div>
<div id="paperbox">
<object type="image/svg+xml" data="img/papers.svg" alt="newspaper boxes"></object>
</div>
<div data-role="content" data-theme="a" class="feedclass">
<ul data-role="listview">
<li data-role="list-divider" style="background-color:#4751b8; border: none; font-size:120%; white-space: normal">
Navigate through the options below
</li>
<li>
<a href='#page02' class="ui-btn ui-icon-arrow-r ui-btn-icon-left" data-transition="pop">
Political News
<p> Latest RSS feeds from CBC, Maclean's, Globe and Mail, and CTV News</p>
</a>
</li>
<li>
<a href='#page07' class="ui-btn ui-icon-bullets ui-btn-icon-left" data-transition="pop">
Party Compass
<p> Find out which political party your views align with</p>
</a>
</li>
<li>
<a href='#page08' class="ui-btn ui-icon-video ui-btn-icon-left" data-transition="pop">
The Election According To TomoNews
<p> A video from the Taiwanese Animators</p>
</a>
</li>
<li>
<a href='#page09' class="ui-btn ui-icon-arrow-r ui-btn-icon-left" data-transition="pop">
About Page
<p>Learn more about this web app</p>
</a>
</li>
</ul>
</div>
<div data-role="footer" data-theme="b" class="foot">
<button id="button1" class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-action" onclick="fullScreen()" data-inline="true">FULLSCREEN</button>
</div>
<div class="bufferpage" style="background-color: #BE1824">
<p class="Luke">© 2015 Luke Garwood</p>
</div>
</div>
<!---------end of page------------->
<div data-role="page" data-theme="a" id="page02">
<div data-role="header" data-position="inline">
<h1>The Connect - RSS Feeds</h1>
</div>
<div id="paperbox">
<object type="image/svg+xml" data="img/papersopen.svg" alt="newspaper boxes"></object>
</div>
<div data-role="content" data-theme="a">
<ul data-role="listview">
<li data-role="list-divider" style="background-color:#4751b8; border:none;font-size: 110%">
Choose a news source below
</li>
<li>
<a href='#page03' class="ui-btn ui-icon-carat-r ui-btn-icon-right" data-transition="slideup">
CBC
<img src="img/cbc.svg" alt="cbc logo" class="ui-li-icon">
</a>
</li>
<li>
<a href='#page04' class="ui-btn ui-icon-carat-r ui-btn-icon-right" data-transition="slideup">
Maclean's
<img src="img/macleans.svg" alt="macleans logo" class="ui-li-icon">
</a>
</li>
<li>
<a href='#page05' class="ui-btn ui-icon-carat-r ui-btn-icon-right" data-transition="slideup">
Globe and Mail
<img src="img/globeandmail.svg" alt="globe logo" class="ui-li-icon">
</a>
</li>
<li>
<a href='#page06' class="ui-btn ui-icon-carat-r ui-btn-icon-right" data-transition="slideup">
CTV News
<img src="img/ctv.svg" alt="CTV logo" class="ui-li-icon">
</a>
</li>
<li data-role="list-divider" style=" color: white; background-color:#4751b8; border:none;font-size: 110%">
Find more RSS feeds from a choice of news sources
</li>
<br>
<label for="select-choice" class="select"> Pick a news outlet:</label>
<select name="select-choice" id="select-choice" data-inline="true">
<option value="CNN.com">CNN</option>
<option value="torontosun.com">Toronto Sun</option>
<option value="cbc.ca">CBC</option>
<option value="nationalpost.com">National Post</option>
<option value="macleans.ca">Maclean's</option>
<option value="thestar.com">Toronto Star</option>
<option value="globalnews.ca">Global</option>
<option value="ledevoir.com">Le Devoir</option>
<option value="theglobeandmail.com">The Globe and Mail</option>
<option value="ctvnews.ca">CTV News</option>
</select>
<br>
<label for="searchinput"> Input Keyword:</label>
<input type="search" name="searchinput" id="searchinput" placeholder="example: Trudeau" value="" />
<input type="submit" value="Submit Search" id="searchsubmit" onclick="location.href='#page10'">
</ul>
</div>
<div data-role="footer" data-theme="b" class="foot">
<button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-home" onclick="location.href='#page01'">HOME</button>
<button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-action" onclick="fullScreen()" data-inline="true">FULLSCREEN</button>
</div>
<div class="bufferpage" style="background-color:#E13408">
<p class="Luke">© 2015 Luke Garwood</p>
</div>
</div>
<!---------end of page ----->
<div data-role="page" data-theme="a" id="page03">
<div data-role="header" data-theme="a">
<h1>The Connect - CBC</h1>
</div>
<div data-role="content" data-theme="a" class="feedclass">
<div id="cbcFeed"></div>
</div>
<div data-role="footer" data-theme="b" class="foot">
<button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-home" onclick="location.href='#page01'" data-inline="true">HOME</button>
<button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-action" onclick="fullScreen()" data-inline="true">FULLSCREEN</button>
</div>
<div class="bufferpage" style="background-color: #BE1824">
<p class="Luke">© 2015 Luke Garwood</p>
</div>
</div>
<!-- ----end of page --------- -->
<div data-role="page" id="page04" data-theme="c">
<div data-role="header" data-theme="c">
<h1>The Connect - Maclean's</h1>
</div>
<div data-role="content" data-theme="c" class="feedclass">
<div id="macFeed"></div>
</div>
<div data-role="footer" data-theme="b" class="foot">
<button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-home" onclick="location.href='#page01'">HOME</button>
<button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-action" onclick="fullScreen()" data-inline="true">FULLSCREEN</button>
</div>
<div class="bufferpage" style="background-color: #E13408">
<p class="Luke">© 2015 Luke Garwood</p>
</div>
</div>
<!-- --------end of page --------->
<div data-role="page" data-theme="b" id="page05">
<div data-role="header" data-theme="b">
<h1>The Connect - Globe and Mail</h1>
</div>
<div data-role="content" data-theme="b" class="feedclass">
<div id="globeandmailFeed"></div>
</div>
<div data-role="footer" data-theme="b" class="foot">
<button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-home" onclick="location.href='#page01'">HOME</button>
<button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-action" onclick="fullScreen()" data-inline="true">FULLSCREEN</button>
</div>
<div class="bufferpage" style="background-color: #2126C2">
<p class="Luke">© 2015 Luke Garwood</p>
</div>
</div>
<!-- ----------end of page-------------->
<div data-role="page" id="page06" data-theme="c">
<div data-role="header" data-theme="c">
<h1>The Connect - CTV</h1>
</div>
<div data-role="content" data-theme="c" class="feedclass">
<div id="ctvFeed"></div>
</div>
<div data-role="footer" data-theme="b" class="foot">
<button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-home" onclick="location.href='#page01'">HOME</button>
<button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-action" onclick="fullScreen()" data-inline="true">FULLSCREEN</button>
</div>
<div class="bufferpage" style="background-color: #E13408">
<p class="Luke">© 2015 Luke Garwood</p>
</div>
</div>
<!-------end of page------->
<div data-role="page" id="page07" data-theme="c">
<div data-role="header" data-theme="c">
<h1>The Connect - Form</h1>
</div>
<div data-role="content" data-theme="c" class="feedclass">
<h3>Complete the form below and find out which Canadian political party your views align with.</h3>
<form>
<fieldset data-role="controlgroup">
<div data-role="fieldcontain">
<legend>How should the arts be supported in Canada?</legend>
<input type="radio" name="arts-choice" id="arts-choice-1" value="Liberal" />
<label for="arts-choice-1">Double the funding for the Canada Council of the Arts.</label>
<input type="radio" name="arts-choice" id="arts-choice-2" value="NDP" />
<label for="arts-choice-2">Support individual artists through tax breaks.</label>
<input type="radio" name="arts-choice" id="arts-choice-3" value="Conservative" />
<label for="arts-choice-3">Maintain the arts by making strategic cuts to entities such as the CBC. </label>
<input type="radio" name="arts-choice" id="arts-choice-4" value="Green" />
<label for="arts-choice-4">Champion Canadian content by revisiting content regulations.</label>
</div>
<div data-role="fieldcontain">
<label for="enviro-range" style="width:100%">On a scale of 0 - 10, how much should the environment affect domestic policies? 0 being not at all, and 10 being always </label>
<input type="range" name="enviro-range" id="enviro-range" value="5" min="0" max="10" data-highlight="true" />
</div>
<div data-role="fieldcontain">
<legend>When it comes to drugs, you feel that..</legend>
<input type="radio" name="marijuana-choice" id="marijuana-choice-1" value="Conservative" />
<label for="marijuana-choice-1">Marijuana should not be legalized, but should continue to be used for medicinal purposes.</label>
<input type="radio" name="marijuana-choice" id="marijuana-choice-2" value="Green" />
<label for="marijuana-choice-2"> Canada should seriously consider legalizing marijuana.</label>
<input type="radio" name="marijuana-choice" id="marijuana-choice-3" value="Liberal, NDP" />
<label for="marijuana-choice-3"> Canada should legalize marijuana right away.</label>
</div>
<div data-role="fieldcontain">
<legend>The Canadian economy needs...</legend>
<input type="radio" name="economy-choice" id="economy-choice-1" value="NDP" />
<label for="economy-choice-1">A 17% corporate tax rate for funds to put towards childcare, healthcare, and infrastructure.</label>
<input type="radio" name="economy-choice" id="economy-choice-2" value="Liberal" />
<label for="economy-choice-2">Investment in job creation and infrastructure, by running a 3 year deficit.</label>
<input type="radio" name="economy-choice" id="economy-choice-3" value="Conservative" />
<label for="economy-choice-3"> To keep taxes low, keep income splitting for families with childern under 18, and increase contribution limits to Tax-Free savings accounts.</label>
</div>
<div data-role="fieldcontain">
<label for="hair-range" style="width:100%">On a scale of 0 - 10, how important is your Prime Minister's hair? 0 being not so much, and 10 meaning a helluva a lot</label>
<input type="range" name="hair-range" id="hair-range" value="5" min="0" max="10" data-highlight="true" />
</div>
</fieldset>
</form>
<p style="font-size:1.2em" id="showpartyresults"></p>
<div id="results">
<input type="button" value="Submit" onclick="formresults()"></input>
</div>
</div>
<div data-role="footer" data-theme="b" class="foot">
<button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-home" onclick="location.href='#page01'">HOME</button>
<button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-action" onclick="fullScreen()" data-inline="true">FULLSCREEN</button>
</div>
<div class="bufferpage" style="background-color: #E13408">
<p class="Luke">*This form is not quite scientific. © 2015 Luke Garwood</p>
</div>
</div>
<!-- --------end of form page------->
<div data-role="page" id="page08" data-theme="c">
<div data-role="header" data-theme="c">
<h1>The Connect - Video</h1>
</div>
<div data-role="content" data-theme="c" class="feedclass">
<iframe src="https://www.youtube.com/embed/Ecda9RKe3Gc?rel=0&showinfo=0;" frameborder="0" width="100%" allowfullscreen alt="Animated video of the election according to Tomo News"></iframe>
</div>
<div data-role="footer" data-theme="b" class="foot">
<button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-home" onclick="location.href='#page01'">HOME</button>
<button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-action" onclick="fullScreen()" data-inline="true">FULLSCREEN</button>
</div>
<div class="bufferpage" style="background-color: #E13408">
<p class="Luke">© 2015 Luke Garwood</p>
</div>
</div>
<!-- ----------------end of page-------------->
<div data-role="page" data-theme="a" id="page09">
<div data-role="content" data-theme="a" class="feedclass">
<h1><i>The Connect</i> - About This Web App</h1>
<p> Following the recent federal election, I was inspired to make a politically centered web app. Not knowing much about RSS feeds at the onset, I also sought to research more about them, and how best to use them to create a one-stop hub for news content. <i>The Connect</i> turned into a centralized aggregator for Canadian political news. The web app taps into the latest from national news articles from the CBC, Maclean's, The Globe and Mail, and CTV news. I wanted an element of customizability included in the app so I included an additional RSS search feature. I was able to cull together a search feature which allows the scan of several news sources' RSS feeds in order to display their news articles on a given subject, achieved by combining the Google Reader API with Google Feed API. Weaving the two together presented a tricky coding challenge, with online support waning as the Google Reader API moves towards deprecation. I eventually worked out the logic, and treated the search for feeds a little differently than the four main feeds. The end result means the user now has the choice of four main feeds, and the ability to select a news source form a drop down menu, and search with a keyword for new articles. </p>
<p> <i>The Connect</i> also contains a "Party Compass" which is a form with several questions that, when completed, reveals which of the 4 main political parties the user's views align with. Though I don't claim the form as scientific, I sourced much of the information from the parties own documentation, The Globe and Mail, National Post, and the CBC. In creating this form, I was able to expand my base knowledge of jQuery Mobile's form elements, and use them in a way that matched the political theme of the app.</p>
<p> The last section of the app simply displays a video made by the infamous TomoNews. Although jQuery mobile and Themeroller allow for a fairly easy fluid design (though more difficult customizability and styling), here I used jQuery to code the dimensions of the video to match the size of the user's device.</p>
<p> In making this app, I also set out to create with accessibility in mind. My colour choices came out of the political theme, but were adjusted so that text could pass AAA standards, as verified with the Colour Contrast Analyser from the Paciello Group. Other considerations include adding language to the html tag, and providing alt attributes, something I had previously not been aware of, for all images and videos. I also chose a "web-safe" font for visibility and cross platform compatability.</p>
<p> In my short time in DF, I usually take every opportunity to lean projects towards pursuing the artistic potential of the technology before me. In this case, knowing that that could be accomplished in other aspects of the class, I took on the challenge of creating something that came out of, and pursued, functionality. To clarify, I don't mean that art and function live inherently separately, just that it was a different approach for me to take on from the onset, and one in which I learned a great deal.</p>
<p>Thanks for your time,<br>Luke</p>
</div>
<div data-role="footer" data-theme="b" class="foot">
<button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-home" onclick="location.href='#page01'" data-inline="true">HOME</button>
<button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-action" onclick="fullScreen()" data-inline="true">FULLSCREEN</button>
</div>
<div class="bufferpage" style="background-color: #BE1824">
<p class="Luke">© 2015 Luke Garwood</p>
</div>
</div>
<!-- -----------------end of page-------------->
<div data-role="page" id="page10" data-theme="c">
<div data-role="header" data-theme="c">
<h1>The Connect - Search</h1>
</div>
<div data-role="content" data-theme="c" class="feedclass">
<div id="searchresults">
<img src="img/loading.svg" alt="loading">
</div>
</div>
<div data-role="footer" data-theme="b" class="foot">
<button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-home" onclick="location.href='#page01'">HOME</button>
<button class="ui-btn ui-shadow ui-corner-all ui-btn-icon-left ui-icon-action" onclick="fullScreen()" data-inline="true">FULLSCREEN</button>
</div>
<div class="bufferpage" style="background-color: #E13408">
<p class="Luke">© 2015 Luke Garwood</p>
</div>
</div>
<script type="text/javascript" src="js/theconnect.js"></script>
</body>
</html>