· 9 years ago · Jan 31, 2017, 10:38 AM
1<!DOCTYPE html>
2<html lang="en">
3<head>
4 <title>Assignment 1</title>
5
6 <meta charset="utf-8">
7
8 <link rel="stylesheet" type="text/css" href="Screen.css">
9
10 <link rel="stylesheet" type="text/css" href="Print.css">
11
12 <link rel="stylesheet" type="text/css" href="http://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.">
13
14 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
15 <!-- jQuery -->
16
17 <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
18 <!-- jQuery-UI-->
19
20 <script src="http://yourjavascript.com/11721571801/sorttable.js"></script>
21 <!-- Sort Tables Plugin-->
22
23 <script type="text/javascript" src="assign2.js"></script>
24 <!-- Assignment 2 JS -->
25
26</head>
27
28<body>
29
30<!-- Heading -->
31
32 <header id="topBanner">
33
34 <h1>Web Technology Assignment 1</h1>
35
36 <p>By Kuba Clark and Amir Abounnasr <strong>(Group CS13)</strong></p>
37
38 <!-- Navigation -->
39
40 <nav class="hide-print">
41
42 <a href="#lab1">Lab 1</a>
43 <a href="#lab2">Lab 2</a>
44 <a href="#lab3">Lab 3</a>
45 <a href="#lab4">Lab 4</a>
46 <a href="#lab5">Lab 5</a>
47 <a href="#lab6">Lab 6</a>
48 </nav>
49
50 </header>
51
52<!-- Product Inventory List -->
53
54 <div id="invList">
55
56 <form action="http://wt.ops.few.vu.nl/api/456d4308" method="post">
57
58 <div class="responsive-table">
59
60 <table class="sortable productInv" id="dynamicTable">
61
62 <caption>Product Inventory List</caption>
63
64 <thead>
65 <tr>
66
67 <th>Name</th>
68 <th>Category</th>
69 <th>Amount</th>
70 <th>Location</th>
71 <th>Purchase Date</th>
72
73 </tr>
74
75 </thead>
76
77 <tfoot class="hide-print">
78
79 <td><input type="text" name="name" size="15" placeholder="Product name" required></td>
80 <td><input type="text" name="category" size="8" placeholder="Category" required></td>
81 <td><input type="text" name="amount" size="7" placeholder="Amount" required></td>
82 <td><input type="text" name="location" size="13" placeholder="Location" required></td>
83 <td><input type="text" name="date" id="datepicker" required></td>
84
85 </tfoot>
86
87 </table>
88
89 </div>
90
91 <input class="submit hide-print" type="submit" value="Submit">
92
93 </form>
94
95 <button id="resetButton">Reset</button>
96
97 </div>
98
99<!-- Compatibility Report -->
100 <section id="compatibility">
101
102 <h2>Compatibility Report</h2>
103
104 <p class="answer">To test our HTMl and <abbr title="Cascading Style Sheet">CSS</abbr>, we used Google Chrome and Mozilla Firefox. Testing the Screen Style Sheet was simple enough, simply view the page. Something of note, is the fact that widows & orphans are not supported in firefox, so we had to use chrome to ensure that our widows & orphans settings work correctly.</p>
105
106 <p class="answer">There was one warning with our HTML file when going through the validator. The date input type is not supported on all browsers. Google Chrome and Mozilla Firefox support this date input type though, so we had no issues with the form we generated. There is no way to circumnavigate this warning, without the use of javascript.</p>
107
108 <p class="answer">To test the Print Style Sheet, we used the 'Print Preview' Feature in both browsers. Since our HTML and <abbr title="Cascading Style Sheet">CSS</abbr> is formatted in such a way that the print.<abbr title="Cascading Style Sheet">CSS</abbr> file is used only when printing, the style sheet was correctly shown when printing, but no other time.</p>
109
110 <p class="answer">When testing the style sheet for small screens, we resorted to reducing the size of the browser window as well as testing the HTML and <abbr title="Cascading Style Sheet">CSS</abbr> files on our phones. The experience was very similar on these "small screens", to what we experienced in our other tests.</p>
111
112 <p class="answer">In general, there was little to no difference in how the pages were presented in both browsers. Overall, the website we have generated is simple to use on all mediums we tested.</p>
113
114 </section>
115
116<!-- Questions and Answers -->
117
118<!-- Lab 1 Questions and Answers -->
119
120 <section id="lab1">
121
122 <h2>Lab 1 Questions and Answers</h2>
123
124 <ol>
125
126 <li class="qandA">
127
128 <h3>Question 1</h3>
129
130 <p class="question">Make sure you have read Paul Ford's article <q>On <abbr title="HyperText Markup Language Version 5">HTML5</abbr> and the Group That Rules the Web</q> (see Reader on BlackBoard). What is, according to this article, the key difference between the <abbr title="HyperText Markup Language Version 5">HTML5</abbr> Recommendation published by <abbr title="World Wide Web Consortium">W3C</abbr> and the one published by the <abbr title="Web Hypertext Application Technology Working Group">WHATWG</abbr>?</p>
131
132 <p class="answer">The article mentions that the key difference between the <abbr title="HyperText Markup Language Version 5">HTML5</abbr> Recommendation published by <abbr title="World Wide Web Consortium">W3C</abbr> and the one published by the <abbr title="Web Hypertext Application Technology Working Group">WHATWG</abbr> is that <abbr title="World Wide Web Consortium">W3C</abbr>'s recommendation has more precedence over the WHATWG recommendation. <abbr title="World Wide Web Consortium">W3C</abbr> adapted <abbr title="Web Hypertext Application Technology Working Group">WHATWG</abbr>'s <abbr title="HyperText Markup Language Version 5">HTML5</abbr> recommendation to what they think should be standardised.</p>
133
134 <p class="answer"><abbr title="Web Hypertext Application Technology Working Group">WHATWG</abbr> believes that <abbr title="HyperText Markup Language Version 5">HTML5</abbr> should be designed to accomodate web apps becuase they believe it is the future of the web. Whereas <abbr title="World Wide Web Consortium">W3C</abbr> believes <abbr title="HyperText Markup Language Version 5">HTML5</abbr> should be able to define the type of content that is being presented as well as making the web more semantic.These differences are highlighted in their general vision and goal of HTML. The article states:</p>
135
136 <blockquote cite="http://www.newyorker.com/tech/elements/group-rules-web">
137 <q><abbr title="Web Hypertext Application Technology Working Group">WHATWG</abbr> sees the Web as an evolving, living platform; the <abbr title="World Wide Web Consortium">W3C</abbr> exists to formally recommend certain things.</q>
138 </blockquote>
139
140 </li>
141
142 <li class="qandA">
143
144 <h3>Question 2</h3>
145
146 <p class="question">Explain the difference between <q>the Internet</q> and <q>the World-Wide Web</q>. Provide links to the online resources you used (if any) to answer this question.</p>
147
148 <p class="answer">The internet is a <em><q>network of networks</q></em>. Within each network, there are end systems. The internet allows any end system to communicate with each other using different protocols. World Wide Web (Web) is one way of transfering information across the internet. It uses the <abbr title="HyperText Transfer Protocol">HTTP</abbr> protocol to send and read data.</p>
149
150 </li>
151
152 <li class="qandA">
153
154 <h3>Question 3</h3>
155
156 <p class="question">What are the three essential technologies that Tim Berners-Lee created to build the World-Wide Web on top of the already existing Internet infrastructure?</p>
157
158 <p class="answer">Tim Berners-Lee used HTTP, HTML and <abbr title="Uniform Resource Locator">URL</abbr> to build the world wide web.</p>
159
160 </li>
161
162 <li class="qandA">
163
164 <h3>Question 4</h3>
165
166 <p class="question">Create a document with the text "Hello World!" in a word processor such as Microsoft Word or LibreOffice Writer. Save the file as a Web page or HTML document and inspect the HTML source using a plain text editor or a browser. Describe the key differences of the exported HTML against a regular HTML document created with a plain text editor. Hint: you could use the HTML <pre> tag with the proper escaping to show some example HTML source code generated by the word processor.</p>
167
168 <p class="answer">The HTML source generated by the word processor produced one line code of all the meta attributes, styling and the body. This is probably not meant to be read by a human. By convention, the code should be human readable thus when creating a HTML document in a plain text editor, usually each tags are seperated. Also through convention, the styling is defined in the HTML document where in the case of a plain text editor, the <abbr title="Cascading Style Sheet">CSS</abbr> will be defined in a seperate file. However, this might be done for performance purposes where when fetching for the web page, a page can be loaded using only one request. The plain text editor does not modify the HTML file. What you write is what is saved. The word processor adds extra files (eg. meta information) automatically.</p>
169
170 <p class="answer">I also realised that the some of the styles applied to the document is not being used.</p>
171
172 <p class="answer">Example code:</p>
173
174 <pre>
175
176 ol{margin:0;padding:0}
177
178 <body class="c1">
179 <p class="c0">
180 <span>Hello World!</span>
181 </p>
182 </body>
183
184 </pre>
185
186 </li>
187
188 <li class="qandA">
189
190 <h3>Question 5</h3>
191
192 <p class="question">Find out which port (according to the current <abbr title="Internet Assigned Numbers Authority">IANA</abbr> assignment) is used for the following protocols:</p>
193
194 <ul class="protocols">
195
196 <li><abbr title="HyperText Transfer Protocol">HTTP</abbr></li>
197 <li>SSH</li>
198 <li>FTP</li>
199
200 </ul>
201
202 <p class="question">Provide a one line description of all three protocols, indicate with a link which authoritative source you have used for each description, and why you think your source is authoritative for this topic.</p>
203
204 <p class="question">Encode your answer in an HTML table with an id attribute set to protocolTable. The table should have three rows, one for each protocol. It should have at least four columns: for each protocol, list the protocol name, port number, description and the authoritative source. You will need this table in Assignment 2.</p>
205
206 <div class="responsive-table answer">
207
208 <table class="sortable" id="staticTable1">
209
210 <caption>Protocol Table</caption>
211
212 <thead>
213
214 <tr>
215
216 <th>Protocol</th>
217
218 <th>Port Number</th>
219
220 <th>Description</th>
221
222 <th>Authoritative Source</th>
223
224 </tr>
225
226 </thead>
227
228 <tbody>
229
230 <tr>
231
232 <td><abbr title="HyperText Transfer Protocol">HTTP</abbr></td>
233
234 <td>80</td>
235
236 <td><abbr title="HyperText Transfer Protocol">HTTP</abbr> is a protocol used by the World Wide Web that is responsible for how messages are structured, sent and understood over the internet.</td>
237
238
239 <td><a href="https://www.nginx.com/resources/glossary/http/">Nginx</a></td>
240 </tr>
241
242 <tr>
243
244 <td>SSH</td>
245
246 <td>22</td>
247
248 <td>Secure Shell allows for secure remote log-on connections between end hosts.</td>
249
250 <td><a href="https://www.ssh.com/ssh/">SSH</a></td>
251
252 </tr>
253
254 <tr>
255
256 <td>FTP</td>
257
258 <td>21</td>
259
260 <td>FTP is used to exchange files between end systems.</td>
261
262 <td><a href="https://kb.iu.edu/d/aerg">Indiana University</a></td>
263
264 </tr>
265
266 </tbody>
267
268 </table>
269
270 </div>
271
272 <p class="answer">Nginx is an authoritative source because it is a well established server company.</p>
273
274 <p class="answer">SSH is an authoritative source because it is the company which made SSH.</p>
275
276 <p class="answer">Indiana University is an authoritative source because it is an established educational institution. </p>
277
278 </li>
279
280 <li class="qandA">
281
282 <h3>Question 6</h3>
283
284 <p class="question">Look at the following two HTML paragraphs:</p>
285
286 <pre><code><p>This is an <strong>important</strong> point.</p></code></pre>
287
288 <pre><code><p>This is another <b>important</b> point.</p></code></pre>
289
290 <p class="question">Explain why the HTML of the first paragraph should be preferred. Illustrate this with an example. Also, identify another pair of HTML constructs for which the same rationale holds.</p>
291
292 <p class="answer">By convention, using strong as opposed to b is prefered due to semantic markup. Using the strong tag adds meaning to the information on the page. The strong tag is also picked up by text to speech programs which are often used by visually impaired users. Another pair of HTML construct for which the same rationale applies is the <i> and <em></p>
293
294 </li>
295
296 <li class="qandA">
297
298 <h3>Question 7</h3>
299
300 <p class="question">Identify one similarity and one difference between the HTML elements span and div.</p>
301
302 <p class="answer">Span element is in-line whereas div element is block-line. They both group a chunk of content.</p>
303
304 </li>
305
306 <li class="qandA">
307
308 <h3>Question 8</h3>
309
310 <p class="question">Describe the pros and cons of using the iframe tag in HTML.</p>
311
312 <p class="answer">The disadvantages of iFrame is that it cannot display unsecure content in a secure browser due to security reasons. The content of the iframe cannot be altered if the content is external. However, using iFrame will reduce <abbr title="HyperText Transfer Protocol">HTTP</abbr> requests. It also isolates its <abbr title="Cascading Style Sheet">CSS</abbr> from the page that uses iFrame. This preserves the content of iFrame.</p>
313
314 </li>
315
316 <li class="qandA">
317
318 <h3>Question 9</h3>
319
320 <p class="question">List potential benefits of using <abbr title="Cascading Style Sheet">CSS</abbr>. (Expected length: 7-8 lines)</p>
321
322 <ul class="answer">
323
324 <li>Helps to maintain <abbr title="Don't Repeat Yourself">DRY</abbr> (Don't repeat yourself) concept.</li>
325 <li>Takes code away from HTML document which leaves the HTML document more optimised for search engines.</li>
326 <li>Can cater for different use cases/medium.</li>
327 <li>Reduce load times of pages.</li>
328 <li>Friendly to other coders. Easy for them to read the code.</li>
329 <li>Logical seperation of content and style. Easier to work with.</li>
330 <li>Additional feature such as media queries which contribute to responsive websites.</li>
331 <li>Makes the website look styled.</li>
332
333 </ul>
334
335 </li>
336
337 <li class="qandA">
338
339 <h3>Question 10</h3>
340
341 <p class="question">How would you expect a Web browser to render an emphasized word (i.e., included in an em element) in a paragraph with an italic font style? Check whether your browser behaves according to your expectation.</p>
342
343 <p class="answer">A word encapsulated by the em element will make the word italic. However, due to the fact that the text is already italic, there will be no changes to the word that is already italicized. The browser behaved according to my expectations.</p>
344
345 </li>
346
347 <li class="qandA">
348
349 <h3>Question 11</h3>
350
351 <p class="question">Pick two web browsers from the list below. What are in your view the key differences between the two browsers?</p>
352
353 <ul>
354
355 <li>Apple Safari</li>
356 <li>Google Chrome</li>
357 <li>Microsoft Internet Explorer</li>
358 <li>Mozilla Firefox</li>
359 <li>Opera Web Browser</li>
360
361 </ul>
362
363 <p class="answer">Microsoft Internet Explorer is only exclusive to Windows computers. Already comes preinstalled on Windows computers. Whereas Google Chrome can be used by linux, windows, Mac, android and iOS. Google Chrome offers more customizability with its apps. Internet Explorer just started to introduce limited add ons therefore less customizable.</p>
364
365 </li>
366
367 </ol>
368
369 </section>
370
371 <!-- Lab 2 Questions and Answers -->
372
373 <section id="lab2">
374
375 <h2>Lab 2 Questions and Answers</h2>
376
377 <ol>
378
379 <li class="qandA">
380
381 <h3>Question 1</h3>
382
383 <p class="question">Read the article by Axel Schmetzke, (2001),"Web accessibility at university libraries and library schools" (See Reader for Week 1 on BlackBoard). Schmetzke found that the most prevalent accessibility error is not having ALT texts for images. With which WCAG guideline does this correspond?</p>
384
385 <p class="answer">This corresponds to Guideline 1.1 under the perceivable princple which states: 'Provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, braille, speech, symbols or simpler language.'</p>
386
387 </li>
388
389
390 <li class="qandA">
391
392 <h3>Question 2</h3>
393
394 <p class="question">The Web Accessibility checker 'Bobby' that Schmetzke used has been taken offline, but its predecessor WAVE can be found online. Run the tool on a web site you think should be accessible. Briefly write down your key observations.</p>
395
396 <p class="answer">The WAVE tool analyses the website and identifies several features that can be modified to improve the website in terms of accessability. It also identifies errors that are present in the page.</p>
397
398 <p class="answer">For example, on the site google.com, there are three missing form labels and one empty link.</p>
399
400 </li>
401
402
403 <li class="qandA">
404
405 <h3>Question 3</h3>
406
407 <p class="question">Acquaint yourself with principles of color contrast, e.g. through the Color Contrast Check. Test three color combinations and write a short report of the results and how these should be interpreted.</p>
408
409 <figure>
410
411 <figcaption>Test 1: Background (333333/Black), Foreground (FFFF33/Yellow)</figcaption>
412
413 <img src="http://i.imgur.com/Sgh2FGf.png" alt="Result of test 1">
414
415 </figure>
416
417 <p class="answer">As the result show, the brightness difference is sufficiently high but the colour difference is not. However it still seems to be readable.</p>
418
419 <figure>
420
421 <figcaption>Test 2: Background (3333F6/Blue), Foreground (FF0032/ Red)</figcaption>
422
423 <img src="http://i.imgur.com/TLpAMyw.png" alt="Result of test 2">
424
425 </figure>
426
427 <p class="answer">The colour and brightness difference is not sufficiently high enough making it difficult to read the text. It is not WCAG 2 AA/AAA compliant.</p>
428
429 <figure>
430
431 <figcaption>Test 3: Background(0721FA/ Greenish black), Foreground (BED4D6/ Grayish blue)</figcaption>
432
433 <img src="http://i.imgur.com/KLep8Is.png" alt="Result of test 2">
434
435 </figure>
436
437 <p class="answer">The colour and brightness difference is sufficiently high enough to make the text legible. It is also WCAG 2 AA/AAA compliant.</p>
438
439 </li>
440
441 <li class="qandA">
442
443 <h3>Question 4</h3>
444
445 <p class="question">Make sure you understand the difference between a Native app versus a (responsive) Web app. Discuss at least one advantage of native apps over web apps and vice versa.</p>
446
447 <p class="answer">Native applications are made specifically for a certain device. A clear advantage of this compared to web apps is that it will run more efficiently and faster as the application is optimised to run on its target device. Native applications also have access to all the device's features which a web app does not. Web apps, on the other hand, are applications that is accessed through the use of the internet. Unlike native applications which is downloaded through the specific platform's application store, web applications does not require the user for an update. </p>
448
449 </li>
450
451
452 <li class="qandA">
453
454 <h3>Question 5</h3>
455
456 <p class="question">Summarize the key multilingual issues that <abbr title="World Wide Web Consortium">W3C</abbr> is addressing within the "Internationalization" activity. (Expected length: half page)</p>
457
458 <p class="answer">Internationalization is a key part of <abbr title="World Wide Web Consortium">W3C</abbr>'s goal to giving access to the Web for all. It tackles aspects of cultural, regional and linguistic differences in the world. Generally, <abbr title="World Wide Web Consortium">W3C</abbr> recommends flexibility to all elements in an application so that it can be catered to different cultures, regions and languages. The following describes some of the multilingual issues that <abbr title="World Wide Web Consortium">W3C</abbr> is addressing within the "Internationalization" activity. </p>
459
460 <p class="answer">One of the multilingual issues that <abbr title="World Wide Web Consortium">W3C</abbr> addresses are the writing forms. Different languages like arabic, mix their texts that is read from right to left and left to right. Also in Japanese, sometimes the texts are written vertically. These differences in writing forms require support in order for the web to be internationalized.</p>
461
462 <p class="answer">Different countries also use different forms of naming and date-time conventions. These needs to be identified so that when translating from one language to another, the conventions are considered and translated accordingly.</p>
463
464 <p class="answer">Not every phrase in one language can be translated appropriately or perfectly to another language. The order of linguistic features in sentences or phrases are different, therefore the applications in the web must allow for these changes, making sure that sentences are not locked in any order.</p>
465
466 <p class="answer">It is important to also not forget the differences in symbolic meaning. A tick mark is commonly associated with a symbol of correctness. However, in Japan, it can be mistaken for a symbol for incorrectness.</p>
467
468 <p class="answer">URI were designed to use european numbers and english alphabet. However, now users expect to use the web in their own language with their alphabet.</p>
469
470 </li>
471
472
473 <li class="qandA">
474
475 <h3>Question 6</h3>
476
477 <p class="question">What is the IP address of the server running the website at http://www.few.vu.nl? And the IP address behind the site running http://www.cs.vu.nl? Explain how you found the answer. How are these addresses related?</p>
478
479 <p class="answer">IP address of server running the website at http://www.few.vu.nl: 130.37.164.154</p>
480
481 <p class="answer">IP address behind the site running http://www.cs.vu.nl: 130.37.164.154</p>
482
483 <p class="answer">I have found the answer using a terminal command: dig [domain]. It is a command for DNS lookups.</p>
484
485 <p class="answer">These addresses are related because it has the same IP address. They are under the same domain but in a different department.</p>
486
487 </li>
488
489
490 <li class="qandA">
491
492 <h3>Question 7</h3>
493
494 <p class="question">Look up information about the new protocol for IP addresses (IPv6, IP version 6). Describe the main features of this protocol and indicate what the reasons are to move from version 4 to version 6. (Expected length: 1/4 page)</p>
495
496 <p class="answer">One of the main motivation for IPv6 was that IPv4's 32 bit address space was constraining the allotment of many more IP addresses. Due to this, IPv6 provides 4 times more bits for the addresses. The new notation for IPv6 addresses contains 8 groups of 4 hex digits (16 bits). 128 bits in total for one IPv6 address. Whereas IPv4 is only 32 bits. In other words, IPv6 provides more IP address allotments to devices.</p>
497
498 <p class="answer">Another main feature of IPv6 is its new header format. Changes from IPv4 such as taking away checksum and option fields in the header allowed for faster processing and forwarding speeds.</p>
499
500 </li>
501
502
503 <li class="qandA">
504
505 <h3>Question 8</h3>
506
507 <p class="question">What are MIME types? Find out which MIME types of type text there are. Which authoritative source(s) have you used?</p>
508
509 <p class="answer">MIME types signifies the media type of a files which are used by the web browsers to identify how to process and display it.</p>
510
511 <p class="answer">Most common MIME types of type texts are text/html for normal web pages, text/plain for plain text, text/<abbr title="Cascading Style Sheet">CSS</abbr> for styles.</p>
512
513 <p class="answer">Authoritative Source used: <a href="https://developer.mozilla.org/en-US/docs/Web/Security/Securing_your_site/Configuring_server_MIME_types">MDN</a></p>
514
515 </li>
516
517
518 <li class="qandA">
519
520 <h3>Question 9</h3>
521
522 <p class="question">Make sure you have read the blog post What Is A Web Server? as described in the Week 1 Reader on Blackboard. Knupp states that the GET method is the most common <abbr title="HyperText Transfer Protocol">HTTP</abbr> request method. Name at least one other HTTP request method and find out what the differences are between GET and the one you picked. Which authoritative source(s) have you used?</p>
523
524 <dl>
525
526 <dt>GET Method</dt>
527 <dd>retrives the data in which is requested through the URI.</dd>
528
529 <dt>DELETE Method</dt>
530 <dd>deletes the file requested through the URI at the specified path of the source server.</dd>
531
532
533 </dl>
534
535 <p class="answer">Authoritative source: <a href="https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html">W3 org</a></p>
536
537 </li>
538
539
540 <li class="qandA">
541
542 <h3>Question 10</h3>
543
544 <p class="question">Most of the well-known <abbr title="HyperText Transfer Protocol">HTTP</abbr> web servers serve HTML and other content to end users. But behind the scenes, there are many <abbr title="HyperText Transfer Protocol">HTTP</abbr> servers that provide services for other web sites. To manage who is allowed to do what on these services, they often deploy keys: short sequences of characters that are used to uniquely identify you. We will use an example of such a web site in the assignments, for which your need a key. So please go the page at http://wt.ops.few.vu.nl/keys and generate a key. Please record the value of the key generated as the answer to this question, so you can use it later in the assignments.</p>
545
546 <p class="answer">456d4308</p>
547
548 </li>
549
550
551 </ol>
552
553 </section>
554
555 <section id="lab3">
556
557 <h2>Lab 3 Questions and Answers</h2>
558
559 <ol>
560
561 <li class="qandA">
562
563 <h3>Question 1</h3>
564
565 <p class="question">Explain shortly what browser you used and how you have enabled the console.</p>
566
567 <p class="answer">On Google Chrome, console can be accessed easily by right clicking on the page and going to inspect. This will bring up the developer tools of chrome where in which you can access the console via the console tab.</p>
568
569 </li>
570
571 <li class="qandA">
572
573 <h3>Question 2</h3>
574
575 <p class="question">For the lecture preparation, you should have already made yourself familiar with the material in the introduction to the HTML DOM on w3schools.com, as listed in the Reader on BlackBoard. If you did not do this, do it now. Show how you can use JavaScript and the DOM API to change the background of the body element to the color red. Also show how you can override the behavior of clicking on an element, using only JavaScript and the DOM API, without other libraries. Check and make sure the code in your answer really works in your browser (If you do not know what an API is, find this out too!).</p>
576
577 <p class="answer">To change the background color to red the following code works:</p>
578
579 <pre><code>document.body.style.backgroundColor = "red"</code></pre>
580
581 <p class="answer">To change the behavior of the <code><a></code> tag, the following code works:</p>
582
583 <a href="google.com" id="test">Test anchor tag</a>
584
585 <pre><code>var elements = document.getElementById("test");</code></pre>
586
587 <pre><code>elements.setAttribute("onClick", "return false;");</code></pre>
588
589 </li>
590
591 <li class="qandA">
592
593 <h3>Question 3</h3>
594
595 <p class="question">
596 For the lecture preparation, should have already made yourself
597 familiar with the basics in the <a href="http://learn.jquery.com/about-jquery/how-jquery-works/">JQuery
598 tutorial</a>, as listed in
599 the Reader on BlackBoard. If you did not do this, do it now.
600 Make sure that <a href="http://learn.jquery.com/about-jquery/how-jquery-works/#complete-example">the
601 example</a> runs on your machine. Compare the use of JQuery to
602 change the behavior of the <code><a></code> element as shown in
603 the example with the code you used in the previous
604 question. List pros and cons of both methods.
605 </p>
606
607 <p class="answer">Using the JavaScript and DOM API to change the behavior of the <code><a></code> element,
608 has you change the hypertext reference of the <code><a></code> element with a certain id.</p>
609
610 <p class="answer">Using jQuery on the other hand, you prevent the default action from happening.</p>
611
612 <p class="answer"><code>event.preventDefault();</code></p>
613
614 </li>
615
616 <li class="qandA">
617 <h3>Question 4</h3>
618
619 <p class="question">Describe the major similarities and differences between Python and JavaScript.
620 (If you are more familiar with Java, you may also compare Java to JavaScript)</p>
621
622 <h4>Similarities</h4>
623
624 <ul>
625
626 <li>Both languages are object-oriented.</li>
627
628 <li>The syntax is very similar (almost the same).</li>
629
630 </ul>
631
632 <h4>Diffirences</h4>
633
634 <ul>
635
636 <li>Java is an object-oriented programming language, whereas JavaScript is an object-oriented scripting language</li>
637
638 <li>Java is a compiled language, wherease JavaScript is an interpreted language</li>
639
640 <li>Java runs on a virtual machine, whereas JavaScripts runs in the browser</li>
641
642 </ul>
643
644 </li>
645
646 <li class="qandA">
647
648 <h3>Question 5</h3>
649
650 <p class="question">What does the acronym "AJAX" stand for? Explain the role of the term the first "A" refers to.</p>
651
652 <p class="answer"><strong>A</strong>synchronous <strong>J</strong>avaScript <strong>a</strong>nd <strong>X</strong>ML</p>
653
654 <p class="answer">It allows websites change the content they're displaying, without having to reload the website</p>
655
656 </li>
657
658 <li class="qandA">
659
660 <h3>Question 6</h3>
661
662 <p class="answer">They are objects that are given by the browser environment, such as the window. </p>
663
664 <p class="answer">Two examples include: <code>Window</code> &<code> Document</code></p>
665
666 <p class="answer">Java and Python, don't have host objects, because the developer chooses what
667 environment is presented to the user, unlike in JavaScript, where it is exclusively the browser
668 (and everything related to it).</p>
669
670 </li>
671
672 <li class="qandA">
673
674 <h3>Question 7</h3>
675
676 <p class="question">Name two objects that are built into the JavaScript language. Briefly explain their role.</p>
677
678 <p class="answer">String - Store a sequence of character</p>
679
680 <p class="answer">Boolean - Store a true or false value</p>
681
682 </li>
683
684 <li class="qandA">
685
686 <h3>Question 8</h3>
687
688 <p class="question">Briefly explain the role of <strong>events</strong> and <strong>event listeners</strong> in JavaScript.</p>
689
690 <p class="answer"><strong>Events</strong> and <strong>event listeners</strong> are used in JavaScript to
691 execute specific functions, when a certain action is taken by the user, such as a double click on a particular
692 HTML element. This allows the website to be interactive.</p>
693
694 </li>
695
696 <li class="qandA">
697
698 <h3>Question 9</h3>
699
700 <p class="question">
701 Many organisations provide lectures or tutorials on web
702 technology and publish videos and slides of these lectures on
703 the web in so called "webinars". These lectures provide an
704 often overlooked, but rich source of information. Watch
705 the <a href="http://www.youtube.com/watch?v=ZE8ODPL2VPI">video of Mano Marks' Google Map API tutorial</a>.
706 Explain in 3 lines the functionality of the
707 autocomplete component that Marks describes.
708
709 (a good understanding the Google MAP API might also save you time
710 in the next queston if you choose to use geographical maps to enhance your HTML page).
711
712 See the Google Website for <a href="https://developers.google.com/maps/">more information on the API</a>.
713 </p>
714
715 <p class="answer">The autocomplete component allows a user to input a certain location (city, street name,
716 restaurant name, park etc.), and google will do its best to find the correct location of what the user wrote
717 and show it on the map.</p>
718
719 </li>
720
721 <li class="qandA">
722
723 <h3>Question 10</h3>
724
725 <p class="question">
726 Use (at least) one <strong>interactive widget</strong> from a
727 JavaScript widget library to enhance the output or input of
728 the product inventory. Be creative! If you really lack inspiration, try adding a calendar
729 widget to better support input of dates (in case your browser does not do that by default),
730 or to use a map widget for visualising the location fields in your product table.
731 </p>
732
733 <p class="answer">See JS file</p>
734
735 </li>
736
737 </ol>
738
739 </section>
740
741 <section id="lab4">
742
743 <h2>Lab 4 Questions and Answers</h2>
744
745 <ol>
746
747 <li class="qandA">
748
749 <h3>Question 1a</h3>
750
751 <p class="question">Have a closer look at the term frequency matrix. Given this table, how well do you think the tokenizer did its job? Do you see any room for improvement?</p>
752
753 <p class="answer">The tokenizer did what it's supposed to. It shows the frequency of each word in every chapter correctly.</p>
754
755 <p class="answer">To make the tokenizer better, it should ignore stop words, such as 'the', 'that', 'a' etc. as these are not descriptive of the chapter</p>
756
757 </li>
758
759 <li class="qandA">
760
761 <h3>Question 1b</h3>
762
763 <p class="question">Looking at the top 30, does it make sense to include all of them in the stop words list? Explain your answer.</p>
764
765 <p class="answer">It does not make sense to include stop words in this list, because they do not really provide relevance to the text, in most cases. The tokenizer should be able to distinguish between actual stop words (such as 'the') and words that may appear to be stop words but really are not (such as in the title 'The Who').</p>
766
767 </li>
768
769 <li class="qandA">
770
771 <h3> Question 1c</h3>
772
773 <p class="question">Looking at the top 30, do you think the frequency follows Zipf’s law? You can run <code>z <- zipf(alice_index$total)</code> to find out. Explain in your own words what "following Zipf’s law" means in this case.</p>
774
775 <p class="answer">No, the frequnecy does not follow Zipf's law. The second most frequent term does, but the subsequent terms do not follow Zipf's law, by quite a lot.</p>
776
777 <p class="answer">Since the most frequent word ('the') appears 1644 times, the second most frequent word should appear approximately 822 times(1644/2). The third most frequent word, should appear about 548 times (1644/3). The fourth should appear approximately 411 times (1643/4) and so forth.</p>
778
779 </li>
780
781 <li class="qandA">
782
783 <h3>Question 1d</h3>
784
785 <p class="question">Similarly, run h <- heaps(alice_index$total) to determine whether Heaps law applies. Explain in your own words what "Heaps’ law applies" means in this case.</p>
786
787 <p class="answer">Yes, Heap's Law applies in this case. This is because, initially the slope is steep but then it's not as steep.This means that the number of disctinct vocabulary decreases as the text is scanned.</p>
788
789 </li>
790
791 <li class="qandA">
792
793 <h3>Question 2a</h3>
794
795 <p class="question">How do you assess the quality of the TF-based search. What can you say about precision and recall?</p>
796
797 <p class="answer">To assess the quality of the TF-based search, we can examine the relevance of each result to the query.</p>
798
799 <p class="answer">Precision is the fraction of how many of the returned results are relevant.</p>
800
801 <p class="answer">Recall is the fraction of how many of the returned relevant results are retrieved.</p>
802
803 </li>
804
805 <li class="qandA">
806
807 <h3>Question 2b</h3>
808
809 <p class="question">Compare the TF-based search with the TFIDF-based search. What has changed? Try to find a few term that score relatively high on TFIDF for the highest ranking document. List the three term with the highest TFIDF score that you found, along with their score. Do you think these terms "describe" the associated Alice chapter well? </p>
810
811 <p class="answer">When using TF-based search, the numbers returned are whole, whereas when using TFIDF-based search, the numbers are decimals.</p>
812
813 <p class="answer">When using TF-based search, each term has the same weight. When using TFIDF-based search, each word receives a weight that depends on its frequency.</p>
814
815 <p class="answer">Chapter IX is about Mock Turtle. The three highest scoring terms using TFIDF are: moral - 5.46, turtle - 4.62 and mock - 4.52.</p>
816
817 <p class="answer">These terms seem to describe the chapter well enough. We know that it is about a turtle called Mock and that there is moral questioning.</p>
818 </li>
819
820 <li class="qandA">
821
822 <h3>Question 2c</h3>
823
824 <p class="question">Alice in Wonderland only has 11 chapters, what can you say about the precision at k where k=5 for both types of searches. That is, what if you would only look at the 5 highest ranked results, and discard the other results as irrelevant.</p>
825
826 <p class="answer">Using TF, the top 5 terms are not descriptive at all of the chapter, as they are almost only stop words. This means that the precision is very low, almost, if not, 0.Using TFIDF, the top 5 terms are much more descriptive of the chapter than using TF. The precision would be much higher than that of the TF search, reflecting that the terms are much more descriptive of the chapter.</p>
827
828 </li>
829
830 <li class="qandA">
831
832 <h3>Question 2d</h3>
833
834 <p class="question">What would happen to precision and recall if you implemented the improvements to the tokenizer you suggested in question 1a.?</p>
835
836 <p class="answer">The precision of the TF search will increase, as stop words are ignored, meaning the top 5 terms will be much more representative of the chapter.</p>
837
838 <p class="answer">The recall of the TFIDF will increase, since the weight of each term will increased by some amount.<p>
839
840 </li>
841
842 </ol>
843
844 </section>
845
846 <section id="lab5">
847
848 <h2>Lab 5 Questions and Answers</h2>
849
850 <ol>
851
852 <li class="qandA">
853
854 <h3>Question 1.1</h3>
855
856 <p class="question">What idempotent means in this context</p>
857
858 <p class="answer">Each time a client makes an <abbr title="HyperText Transfer Protocol">HTTP</abbr> GET request, the <abbr title="HyperText Transfer Protocol">HTTP</abbr> response will be identical each time, even if there are multiple, identical requests.</p>
859
860 </li>
861
862 <li class="qandA">
863
864 <h3>Question 1.2</h3>
865
866 <p class="question">How idempotent requests simplify the implementation of a caching HTTP proxy.</p>
867
868 <p class="answer">Idempotent request simplify implementation of a caching <abbr title="HyperText Transfer Protocol">HTTP</abbr> proxy by ensuring that the <abbr title="HyperText Transfer Protocol">HTTP</abbr> Response of the proxy server is identical to the response of the main web server.</p>
869
870 </li>
871
872 <li class="qandA">
873
874 <h3>Question 1.3</h3>
875
876 <p class="question">How so-called "visitor counters" often break this assumption?</p>
877
878 <p class="answer">Each time a new user visits a website with a "visitor counter", it increments by one. This means when a user sends an <abbr title="HyperText Transfer Protocol">HTTP</abbr> GET Request for that website, the counter will increase by 1. Thus, the <abbr title="HyperText Transfer Protocol">HTTP</abbr> Response will vary for each user.</p>
879
880 </li>
881
882 <li class="qandA">
883
884 <h3>Question 1.4</h3>
885
886 <p class="question">How such counters might be negatively affected by proxies?</p>
887
888 <p class="answer">The visitor counter might be different for the proxy server and main web server, as they more than likely do not exchange the number of visitors each one has.</p>
889
890 </li>
891
892 <li class="qandA">
893
894 <h3>Question 2</h3>
895
896 <p class="question"><abbr title="HyperText Transfer Protocol">HTTP</abbr> is a so-called stateless protocol. Explain what this means. Name at least one advantage and disadvantage of the fact that HTTP is stateless. </p>
897
898 <p class="answer">A stateless protocol, is a protocol that does not maintain user information. In the case of <abbr title="HyperText Transfer Protocol">HTTP</abbr>, this means that every <abbr title="HyperText Transfer Protocol">HTTP</abbr> Request is treated exactly the same way. This is advantageous as it allows <abbr title="HyperText Transfer Protocol">HTTP</abbr> to be a simple and open protocol. A disadvantage is that some other form of maintaining user information needs to be implemented on top of <abbr title="HyperText Transfer Protocol">HTTP</abbr>.</p>
899
900 </li>
901
902 <li class="qandA">
903
904 <h3>Question 3</h3>
905
906 <p class="question">One of the first applications of <abbr title="HyperText Transfer Protocol">HTTP</abbr> cookies was to add "shopping basket" functionality to the web sites of online shops. Explain why such sites are hard to build without cookies, and how cookies are used to implement electronic "shopping baskets". (max 100 words) </p>
907
908 <p class="answer">When a user adds an item to his/her basket, the web server needs a way to maintain this information, as the user explores the shop. It would be hard to maintain this information without cookies, since the web server would have no way to maintain user information. Cookies allows a website to correspond a cookie with some object/reference on the server, such as a shopping basket.</p>
909
910 </li>
911
912 <li class="qandA">
913
914 <h3>Question 4</h3>
915
916 <p class="question">Make sure you have read the blog-post Some REST best practices, as described in the Week 3: Reader on BlackBoard. The author mainly lists 2xx (success) and 4xx (client error) HTTP status codes. Find out what a 303 status code in response to a <abbr title="HyperText Transfer Protocol">HTTP</abbr>/1.1 request stands for. Which authoritative source(s) have you used? Explain why this is source can be considered authoritative.</p>
917
918 <p class="answer">A 303 Status code in response to a <abbr title="HyperText Transfer Protocol">HTTP</abbr>/1.1 Request stands for "See Other", meaning the response to the request is udner a different URI.</p>
919
920 <p class="answer">For the authoritative source, we used the <a href="https://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html"><abbr title="World Wide Web Consortium">W3C</abbr></a> website.</p>
921
922 </li>
923
924 <li class="qandA">
925
926 <h3>Question 5</h3>
927
928 <p class="question">Many web sites serving HTML pages for human readers, also offer RESTfull services that allow other application developers to develop web application using their services. To be able to use their services, developers need access to clear documentation that described how to use these REST APIs. Good examples of such rest documentation include: the <a href="https://developer.spotify.com/web-api/">Spotify WebAPI</a> or the Twitter <a href="https://dev.twitter.com/rest/public">REST APIs</a>. While the content of these two sites is really different, the structure of their documentation has many similarities.Study the documentation page of these two individual services:</p>
929
930 <ul>
931
932 <li><a href="https://developer.spotify.com/web-api/get-album/">Spotify API</a></li>
933
934 <li><a href="https://dev.twitter.com/rest/reference/get/statuses/user_timeline">Twitter API</a></li>
935
936 </ul>
937
938 <p class="question">Both document the three key ingredients of a REST resource: </p>
939
940 <ol>
941
942 <li>The <strong>endpoint</strong> of the resource, including the full URL and the parametersthat can be used</li>
943
944 <li>The <strong><abbr title="HyperText Transfer Protocol">HTTP</abbr> method</strong> that may be applied to the resource, e.g. GET, POST, HEAD,etc. </li>
945
946 <li>The <strong>response format</strong> in which theresource will be served, e.g. in JSON, XML, CSV, etc.</li>
947
948 </ol>
949
950 <p class="question">Make a simple (two row by three column) table and summarize briefly what, according to this documentation, the three key REST ingredients are for these two services. Both pages are not really informative about the <strong><abbr title="HyperText Transfer Protocol">HTTP</abbr> response codes</strong> you should expect, especially in case of an error. Add a fourth column with the three most likely <abbr title="HyperText Transfer Protocol">HTTP</abbr> response codes,along with for each code, a typical situation in which it might occur. For example, what <abbr title="HyperText Transfer Protocol">HTTP</abbr> response code do you expect when the server is overloaded? or when you are refused access to the data you requested?</p>
951
952 <p class="question">Note that the three key ingredients of REST are well documented, and both pages included a clear illustrative example. The two real world examples above thus provide a good indication of how to document your own REST service in Assignment 3! (but do not forget the <abbr title="HyperText Transfer Protocol">HTTP</abbr> response codes).Please complete answering this question before you start the documentation part of Assignment 3!</p>
953
954 <div class="responsive-table">
955
956 <table class="sortable" id="staticTable2S">
957
958 <caption>REST Key Ingredients</caption>
959
960 <thead>
961
962 <tr>
963
964 <th>Endpoint</th>
965
966 <th><abbr title="HyperText Transfer Protocol">HTTP</abbr> Method</th>
967
968 <th>Response Format</th>
969
970 <th>Response Codes</th>
971
972 </tr>
973
974 </thead>
975
976
977 <tbody>
978
979 <tr>
980
981 <td>https://api.spotify.com/v1/albums/{id}</td>
982
983 <td>The GET Method can be invoked</td>
984
985 <td>The response format is in JSON</td>
986
987 <td>200 OK, when the request is valid. 404 NOT FOUND, when the requested resource cannot be not found in the database. 503 SERVICE UNAVAILABLE, when the service is unavailable, such as when the server is overloaded.</td>
988
989 </tr>
990
991 <tr>
992
993 <td>https://api.twitter.com/1.1/statuses/user_timeline.json</td>
994
995 <td>The GET Method can be invoked</td>
996
997 <td>The response format is in JSON</td>
998
999 <td>200 OK, when the request is valid. 401 UNAUTHORIZED, when the request isn't authorized. 410 GONE, when the resource is gone.
1000
1001 </tr>
1002
1003 </tbody>
1004
1005 </table>
1006
1007 </div>
1008
1009 </li>
1010
1011 <li>
1012
1013 <h3>Question 6</h3>
1014
1015 <p class="question">
1016 While you can easily try out <abbr title="HyperText Transfer Protocol">HTTP</abbr> <code>GET</code> requestsin the URL bar of your browser, for other methods, you need another web client to test an RESTful service. If you are comfortable with using the command line interface (of your Linux or mac terminal, or the PowerShell on Windows), you might want to use the <code>curl</code> command line tool that is also used in the examples on the<a href="https://developer.spotify.com/web-api/get-album/">Spotify</a> pages. Many will prefer a graphical REST client. We strongly advise you to installone and learn how to use it. For example, <a href="https://www.getpostman.com/">Postman</a> is available on Windows, Mac and Linux, also as a browser plugin.
1017 </p>
1018
1019 <p class="question">Use the REST client of your choice to make an <abbr title="HyperText Transfer Protocol">HTTP</abbr> <code>HEAD</code>request to the resource used in the Spotify example: <code>https://api.spotify.com/v1/albums/0sNOF9WDwhWunNAHPD3Baj</code>. Study the <abbr title="HyperText Transfer Protocol">HTTP</abbr> response headers in the server's response you receive back. According to these response headers, which other <abbr title="HyperText Transfer Protocol">HTTP</abbr> requests methods are also allowed on this resource? And from which <code>origin</code> are you allowed to make these requests?
1020 </p>
1021
1022 <p class="answer">According to the response headers, the allowed <abbr title="HyperText Transfer Protocol">HTTP</abbr> Request Methods are: GET, POST, OPTIONS, PUT, DELETE. All origins are permitted.</p>
1023
1024 </li>
1025
1026 <li>
1027
1028 <h3>Question 7</h3>
1029
1030 <p class="question">By inspecting the response headers of the HEAD request you made above, you cannot tell what the Content-Type of a response on a GET request for the same resource would be (why not?). What do you expect it to be? Use your REST client to make a GET request to the same resource. What is the actual Content-Type of the response? Is it what you expected it to be? Explain your answer. </p>
1031
1032 <p class="question">Note that you are advised to also use the same REST client in Assignment 3 to conveniently test your own REST service. Please complete answering these lab questions before you start the coding part of Assignment 3! </p>
1033
1034 <p class="answer">The response should be in JSON, as the documentation states, and that is what the actual response is. It is what we expected, since that is what the documentation wrote it would be.</p>
1035
1036 </li>
1037
1038 <li>
1039
1040 <h3>Question 8</h3>
1041
1042 <p class="question">Web frameworks come in a wide range of flavors. Dimensions on which you can assess them include installation size and complexity. Bottle is a so called micro web-framework for Python, that can be installed on top of an existing Python installation by downloading a single file. Make sure you have done the Bottle tutorial as described in the Reader on BlackBoard and have the first "Hello World" example working on your own computer.</p>
1043
1044 <p class="question">How can you see that your code is indeed reloaded after you made a change in "hello.py"? What happens if you accidentally introduce a syntax error? </p>
1045
1046 <p class="answer">When you change the code, you will see in the terminal in which the server is running, that it is restarting/starting up again.</p>
1047
1048 <p class="answer">When a syntax error is introduced, in the terminal it will print out the error message and close the server.</p>
1049
1050 </li>
1051
1052 <li>
1053
1054 <h3>Question 9</h3>
1055
1056 <p class="question">In the Bottle tutorial, templates are used to dynamically generate HTML code from data, using Python at the server-side. Note that this is a very different from the approach we used in Assignment 2. There you also create HTML dynamically, but on client-side, using JavaScript. Note that the server on wt.ops.few.vu.nl serves its data in JSON format, not in the form of an HTML table generated by a template. List at least one key advantage of each approach, that is, an <abbr title="HyperText Transfer Protocol">HTTP</abbr> server serving database data dynamically in an HTML table versus one that serves the same data in JSON format. </p>
1057
1058 <p class="answer">An advantage of serving database data in JSON, is that it can be used in various applications & languages. An advantage of serving database data in HTMl, is that it is optimal for a webpage and reduces the amount of code.</p>
1059
1060
1061 </ol>
1062
1063 </section>
1064
1065 <section id=lab6>
1066
1067 <h2>Lab 6 Questions and Answers</h2>
1068
1069 <ol>
1070
1071 <li class="qandA">
1072
1073 <h3>Question 1</h3>
1074
1075 <p class="question">Make sure you have read Web Science: A Provocative Invitation to Computer Science (see also Week 3: Reader on BlackBoard). What examples of negative aspects of Web-based social interaction does Shneiderman mention? Do you share his view that these topics should be seen as part of Web Science? Or are these topics better left to existing research fields as sociology or law? Motivate your answer.</p>
1076
1077 <p class="answer">The examples that Shneiderman mentions are security breaches, identity theft, privacy violations and social disruptions of globalization. These topics should be explored in both computer science/Web science and sociology/law due to the fact that these disciplines relates to these topics.</p>
1078
1079 </li>
1080
1081 <li class="qandA">
1082
1083 <h3>Question 2</h3>
1084
1085 <p class="question">Explain what the term the long tail refers to in the context of web commerce. Most brick-and-mortar shops of books, games and music are forced to focus and sell only a few best-selling products. Why can the long tail still be profitable for online shops?</p>
1086
1087 <p class="answer">Long tail in the context of web commerce means selling a wide range of products that sells infrequently. By having a wide range of products, it will be able to reach wider range of customers, increasing overall sales.</p>
1088
1089 </li>
1090
1091 <li class="qandA">
1092
1093 <h3>Question 3</h3>
1094
1095 <p class="question">Explain the role of data.gov in the discussion about a more transparent government. What could be a potential danger of sites like data.gov? (if you prefer, you can instead answer the same questions about the Dutch data.overheid.nl).</p>
1096
1097 <p class="answer">Provide government-backed data to developers of various applications. The government can provide 'alternate facts' which might advertise false information.</p>
1098
1099 </li>
1100
1101 <li class="qandA">
1102
1103 <h3>Question 4</h3>
1104
1105 <p class="question">Jakob Nielsen regularly publishes columns on usability, discussing both good and bad Web design. In a 2011 column he collected his Top 10 Mistakes in Web Design. We are now in 2016, more than five years later. Do you think Nielsen's top 10 is still relevant? From your own experience, do you know of any severe usability problems you encounter on current Web sites that are missing from this list? Which problems in his top 10 have become rare in 2016?</p>
1106
1107 <p class="answer">Nielsen's top 10 are still relatively relevant to this day. In my experience, clicking on a email address that links to email software like Outlook is problematic when you do not have any email softwares installed on the computer. Point 2 of Nielsen's top 10 about PDF is quite rare unless explicitly mentioned. Opening new browser windows are also quite rare.</p>
1108
1109 </li>
1110
1111 <li class="qandA">
1112
1113 <h3>Question 5</h3>
1114
1115 <p class="question">Choose an existing website and imagine that you are designing an A/B test to evaluate changes to that website. Information on A/B tests can be found at Putting A/B Testing in Its Place. Discuss the two versions of the site you would want to test, which part of the site you would vary, and how you would measure performance of each version. What would be the dependent and independent variables in your A/B test? What would be your hypothesis?</p>
1116
1117 <p class="answer">We will be testing the facebook signup page. The test will concentrate on the form styles. One would be where all the form fields are listed. The other will involve a step by step procedure where one form field (such as name which will involve first and last name) will appear at each step. Dependent variable number of successful sign ups. Independent variable will be the type of form. We believe that the user will more likely sign up when the user sees all the form fields at once since he/she will know how much information is needed to signup. Especially due to the fact that the number of fields are small.</p>
1118
1119 </li>
1120
1121 <li class="qandA">
1122
1123 <h3>Question 6</h3>
1124
1125 <p class="question">Choose an existing web site and build a mini-survey that could appear as a popup on that web site. Explain (briefly) the purpose of your survey, and why you choose to use open questions, yes/no questions and/or questions on a scale (e.g the Likert scale). The html of the survey should work, but obviously it does not need to work on the web site you chose. Include a link to that web site instead.</p>
1126
1127 <a href="https://news.google.com/">Google News</a>
1128
1129 <p class="answer">The purpose of the survey would be to find out if the user thinks the presented articles are relevant and of high quality. We would use scale because it will be easier for the user to answer the question, meaning they will more likely to complete the survey. It provides a good metric for the developers.</p>
1130
1131 <form>
1132 <p>How relevant do you find the articles?</p>
1133
1134
1135 <label class="radio">
1136 <input type="radio" name="q1" value="0"> 0
1137 </label>
1138 <label class="radio">
1139 <input type="radio" name="q1" value="1"> 1
1140 </label>
1141 <label class="radio">
1142 <input type="radio" name="q1" value="2"> 2
1143 </label>
1144 <label class="radio">
1145 <input type="radio" name="q1" value="3"> 3
1146 </label>
1147 <label class="radio">
1148 <input type="radio" name="q1" value="4"> 4
1149 </label>
1150 <label class="radio">
1151 <input type="radio" name="q1" value="5"> 5
1152 </label>
1153
1154
1155 <p>How would you rate the quality of the articles?</p>
1156
1157
1158 <label class="radio">
1159 <input type="radio" name="q2" value="01"> 0
1160 </label>
1161 <label class="radio">
1162 <input type="radio" name="q2" value="11"> 1
1163 </label>
1164 <label class="radio">
1165 <input type="radio" name="q2" value="21"> 2
1166 </label>
1167 <label class="radio">
1168 <input type="radio" name="q2" value="31"> 3
1169 </label>
1170 <label class="radio">
1171 <input type="radio" name="q2" value="41"> 4
1172 </label>
1173 <label class="radio">
1174 <input type="radio" name="q2" value="51"> 5
1175 </label>
1176
1177
1178 <p>Would you recommend google news to other?</p>
1179
1180
1181 <label class="radio">
1182 <input type="radio" name="q3" value="yes"> Yes
1183 </label>
1184 <label class="radio">
1185 <input type="radio" name="q3" value="no"> No
1186 </label>
1187 </form>
1188
1189 </li>
1190
1191 <li class="qandA">
1192
1193 <h3>Question 7</h3>
1194
1195 <p class="question">Explain how the Common Log Format helps developing Web log analysis software. Briefly describe a scenario in which such software is used in an experiment aimed at improving a web site's link structure. Hint: after changes to the web site have been made, one could again collect log information and compare the logs collected before the change with those collected after the change, to see if the change was effective. What would be the dependent and independent variables in this experiment? What would be your hypothesis?</p>
1196
1197 <p class="answer">Since the Common Log Format is standardized, it greatly helps in developing web log analysis software. One scenario could be where there are two buttons that links to the same website but have different styles and positioned differently. Dependent variable would be the number of clicks on each button. Independent variable would be the position and style of the buttons. The button that is more accessible and visible would have more clicks.</p>
1198
1199 </li>
1200
1201 <li class="qandA">
1202
1203 <h3>Question 8</h3>
1204
1205 <p class="question">The website http://www.archive.org stores old versions of the Web. Use this archive to describe briefly the history of Google or some other site you're interested in. (Expected length: half page)</p>
1206
1207 <p class="answer">The first ever recorded webpage of google.com on archive.org is on 11th of Novemeber 1998. This version of the search engine is the prototype. The beta version was released in December 2nd 1998. By October of 1999, it was out of beta. On October 2000, advanced search option was incorporated on the site. At this time, there were just over a billion web pages in the google index. Language, display and filtering options were displayed.</p>
1208
1209 <p class="answer">By August 2001, google web directory which was organised by topic was introduced. By June 2004, images, groups, news and froogle were available. Maps were added by June 2006. The UI was simplified by July 2008, getting rid of several buttons linked to images, groups etc. By July 2010, the UI was made even more simple. In 2011, they incorporated google plus on the site. By 2012, Google doodles were a recurring theme of the website. In the current version, the design is more sleek and minimalistic. </p>
1210
1211 </li>
1212
1213 </ol>
1214
1215 </section>
1216
1217 <footer>
1218
1219 <a class="hide-print" href="#topBanner">Back to top</a>
1220
1221 <img id="logo" src="https://upload.wikimedia.org/wikipedia/en/thumb/8/85/Vrije_Universiteit_Amsterdam_logo.svg/1280px-Vrije_Universiteit_Amsterdam_logo.svg.png" alt="VU Amsterdam Logo">
1222
1223 </footer>
1224
1225</body>
1226
1227</html>