· 9 years ago · Jan 26, 2017, 12:38 PM
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 <link rel="stylesheet" type="text/css" href="Print.css">
10 <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
11
12 <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
13 <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
14 <script src="sorttable.js"></script>
15 <script type="text/javascript" src="assign2V2.js"></script>
16
17</head>
18
19<body>
20
21<!-- Heading -->
22
23 <header id="topBanner">
24
25 <h1>Web Technology Assignment 1</h1>
26
27 <p>By Kuba Clark and Amir Abounnasr <strong>(Group CS13)</strong></p>
28
29 <!-- Navigation -->
30
31 <nav class="hide-print">
32
33 <a href="#lab1">Lab 1</a>
34 <a href="#lab2">Lab 2</a>
35 <a href="#lab3">Lab 3</a>
36 <a href="#lab4">Lab 4</a>
37
38 </nav>
39
40 </header>
41
42<!-- Product Inventory List -->
43
44 <div id="invList">
45
46 <form action="http://wt.ops.few.vu.nl/api/456d4308" method="post">
47
48 <div class="responsive-table">
49
50 <table class="sortable productInv" id="dynamicTable">
51
52 <caption>Product Inventory List</caption>
53
54 <thead>
55 <tr>
56
57 <th>Name</th>
58 <th>Category</th>
59 <th>Amount</th>
60 <th>Location</th>
61 <th>Purchase Date</th>
62
63 </tr>
64 </thead>
65
66 <tfoot class="hide-print">
67
68 <td><input type="text" name="name" size="15" placeholder="Product name" required></td>
69 <td><input type="text" name="category" size="8" placeholder="Category" required></td>
70 <td><input type="text" name="amount" size="7" placeholder="Amount" required></td>
71 <td><input type="text" name="location" size="13" placeholder="Location" required></td>
72 <td><input type="text" name="date" id="datepicker" required></td>
73
74 </tfoot>
75
76 </table>
77
78 </div>
79
80 <input class="submit hide-print" type="submit" value="Submit">
81
82 </form>
83
84 <button id="resetButton">reset</button>
85
86 </div>
87
88<!-- Compatibility Report -->
89 <section id="compatibility">
90
91 <h2>Compatibility Report</h2>
92
93 <p class="answer">To test our HTMl and CSS, 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>
94
95 <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>
96
97 <p class="answer">To test the Print Style Sheet, we used the 'Print Preview' Feature in both browsers. Since our HTML and CSS is formatted in such a way that the print.css file is used only when printing, the style sheet was correctly shown when printing, but no other time.</p>
98
99 <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 CSS files on our phones. The experience was very similar on these "small screens", to what we experienced in our other tests.</p>
100
101 <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>
102
103 </section>
104
105<!-- Questions and Answers -->
106
107<!-- Lab 1 Questions and Answers -->
108
109 <section id="lab1">
110
111 <h2>Lab 1 Questions and Answers</h2>
112
113 <ol>
114
115 <li class="qandA">
116
117 <h3>Question 1</h3>
118
119 <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 HTML5 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>
120
121 <p class="answer">The article mentions that the key difference between the HTML5 Recommendation published by W3C and the one published by the WHATWG is that W3C's recommendation has more precedence over the WHATWG recommendation. W3C adapted WHATWG's HTML5 recommendation to what they think should be standardised.</p>
122
123 <p class="answer">WHATWG believes that HTML5 should be designed to accomodate web apps becuase they believe it is the future of the web. Whereas W3C believes HTML5 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>
124
125 <blockquote cite="http://www.newyorker.com/tech/elements/group-rules-web">
126 <q>WHATWG sees the Web as an evolving, living platform; the W3C exists to formally recommend certain things.</q>
127 </blockquote>
128
129 </li>
130
131 <li class="qandA">
132
133 <h3>Question 2</h3>
134
135 <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>
136
137 <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>
138
139 </li>
140
141 <li class="qandA">
142
143 <h3>Question 3</h3>
144
145 <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>
146
147 <p class="answer">Tim Berners-Lee used HTTP, HTML and <abbr title="Uniform Resource Locator">URL</abbr> to build the world wide web.</p>
148
149 </li>
150
151 <li class="qandA">
152
153 <h3>Question 4</h3>
154
155 <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>
156
157 <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>
158
159 <p class="answer">I also realised that the some of the styles applied to the document is not being used.</p>
160
161 <p class="answer">Example code:</p>
162
163 <pre>
164
165 ol{margin:0;padding:0}
166
167 <body class="c1">
168 <p class="c0">
169 <span>Hello World!</span>
170 </p>
171 </body>
172
173 </pre>
174
175 </li>
176
177 <li class="qandA">
178
179 <h3>Question 5</h3>
180
181 <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>
182
183 <ul class="protocols">
184
185 <li>HTTP</li>
186 <li>SSH</li>
187 <li>FTP</li>
188
189 </ul>
190
191 <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>
192
193 <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>
194
195 <div class="responsive-table">
196 <table class="sortable" id="staticTable">
197
198 <caption>Protocol Table</caption>
199 <thead>
200 <tr>
201 <th>Protocol</th>
202 <th>Port Number</th>
203 <th>Description</th>
204 <th>Authoritative Source</th>
205 </tr>
206 </thead>
207 <tbody>
208 <tr>
209 <td>HTTP</td>
210 <td>80</td>
211 <td>HTTP is a protocol used by the World Wide Web that is responsible for how messages are structured, sent and understood over the internet.</td>
212 <td><a href="https://www.nginx.com/resources/glossary/http/">Nginx</a></td>
213 </tr>
214
215 <tr>
216 <td>SSH</td>
217 <td>22</td>
218 <td>Secure Shell allows for secure remote log-on connections between end hosts.</td>
219 <td><a href="https://www.ssh.com/ssh/">SSH</a></td>
220 </tr>
221
222 <tr>
223 <td>FTP</td>
224 <td>21</td>
225 <td>FTP is used to exchange files between end systems.</td>
226 <td><a href="https://kb.iu.edu/d/aerg">Indiana University</a></td>
227 </tr>
228 </tbody>
229 </table>
230
231 </div>
232
233 <p class="answer">Nginx is an authoritative source because it is a well established server company.</p>
234
235 <p class="answer">SSH is an authoritative source because it is the company which made SSH.</p>
236
237 <p class="answer">Indiana University is an authoritative source because it is an established educational institution. </p>
238
239 </li>
240
241 <li class="qandA">
242
243 <h3>Question 6</h3>
244
245 <p class="question">Look at the following two HTML paragraphs:</p>
246
247 <code><p>This is an <strong>important</strong> point.</p></code>
248
249 <code><p>This is another <b>important</b> point.</p></code>
250
251 <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>
252
253 <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>
254
255 </li>
256
257 <li class="qandA">
258
259 <h3>Question 7</h3>
260
261 <p class="question">Identify one similarity and one difference between the HTML elements span and div.</p>
262
263 <p class="answer">Span element is in-line whereas div element is block-line. They both group a chunk of content.</p>
264
265 </li>
266
267 <li class="qandA">
268
269 <h3>Question 8</h3>
270
271 <p class="question">Describe the pros and cons of using the iframe tag in HTML.</p>
272
273 <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 http requests. It also isolates its css from the page that uses iFrame. This preserves the content of iFrame.</p>
274
275 </li>
276
277 <li class="qandA">
278
279 <h3>Question 9</h3>
280
281 <p class="question">List potential benefits of using CSS. (Expected length: 7-8 lines)</p>
282
283 <ul>
284
285 <li>Helps to maintain <abbr title="Don't Repeat Yourself">DRY</abbr> (Don't repeat yourself) concept.</li>
286 <li>Takes code away from HTML document which leaves the HTML document more optimised for search engines.</li>
287 <li>Can cater for different use cases/medium.</li>
288 <li>Reduce load times of pages.</li>
289 <li>Friendly to other coders. Easy for them to read the code.</li>
290 <li>Logical seperation of content and style. Easier to work with.</li>
291 <li>Additional feature such as media queries which contribute to responsive websites.</li>
292 <li>Makes the website look styled.</li>
293
294 </ul>
295
296 </li>
297
298 <li class="qandA">
299
300 <h3>Question 10</h3>
301
302 <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>
303
304 <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>
305
306 </li>
307
308 <li class="qandA">
309
310 <h3>Question 11</h3>
311
312 <p class="question">Pick two web browsers from the list below. What are in your view the key differences between the two browsers?</p>
313
314 <ul>
315
316 <li>Apple Safari</li>
317 <li>Google Chrome</li>
318 <li>Microsoft Internet Explorer</li>
319 <li>Mozilla Firefox</li>
320 <li>Opera Web Browser</li>
321
322 </ul>
323
324 <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>
325
326 </li>
327
328 </ol>
329
330 </section>
331
332 <!-- Lab 2 Questions and Answers -->
333
334 <section id="lab2">
335
336 <h2>Lab 2 Questions and Answers</h2>
337
338 <ol>
339
340 <li class="qandA">
341
342 <h3>Question 1</h3>
343
344 <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>
345
346 <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>
347
348 </li>
349
350
351 <li class="qandA">
352
353 <h3>Question 2</h3>
354
355 <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>
356
357 <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>
358
359 <p class="answer">For example, on the site google.com, there are three missing form labels and one empty link.</p>
360
361 </li>
362
363
364 <li class="qandA">
365
366 <h3>Question 3</h3>
367
368 <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>
369
370 <figure>
371
372 <figcaption>Test 1: Background (333333/Black), Foreground (FFFF33/Yellow)</figcaption>
373
374 <img src="http://i.imgur.com/Sgh2FGf.png" alt="Result of test 1">
375
376 </figure>
377
378 <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>
379
380 <figure>
381
382 <figcaption>Test 2: Background (3333F6/Blue), Foreground (FF0032/ Red)</figcaption>
383
384 <img src="http://i.imgur.com/TLpAMyw.png" alt="Result of test 2">
385
386 </figure>
387
388 <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>
389
390 <figure>
391
392 <figcaption>Test 3: Background(0721FA/ Greenish black), Foreground (BED4D6/ Grayish blue)</figcaption>
393
394 <img src="http://i.imgur.com/KLep8Is.png" alt="Result of test 2">
395
396 </figure>
397
398 <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>
399
400 </li>
401
402 <li class="qandA">
403
404 <h3>Question 4</h3>
405
406 <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>
407
408 <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>
409
410 </li>
411
412
413 <li class="qandA">
414
415 <h3>Question 5</h3>
416
417 <p class="question">Summarize the key multilingual issues that W3C is addressing within the "Internationalization" activity. (Expected length: half page)</p>
418
419 <p class="answer">Internationalization is a key part of W3C's goal to giving access to the Web for all. It tackles aspects of cultural, regional and linguistic differences in the world. Generally, W3C 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 W3C is addressing within the "Internationalization" activity. </p>
420
421 <p class="answer">One of the multilingual issues that W3C 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>
422
423 <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>
424
425 <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>
426
427 <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>
428
429 <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>
430
431 </li>
432
433
434 <li class="qandA">
435
436 <h3>Question 6</h3>
437
438 <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>
439
440 <p class="answer">IP address of server running the website at http://www.few.vu.nl: 130.37.164.154</p>
441
442 <p class="answer">IP address behind the site running http://www.cs.vu.nl: 130.37.164.154</p>
443
444 <p class="answer">I have found the answer using a terminal command: dig [domain]. It is a command for DNS lookups.</p>
445
446 <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>
447
448 </li>
449
450
451 <li class="qandA">
452
453 <h3>Question 7</h3>
454
455 <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>
456
457 <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>
458
459 <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>
460
461 </li>
462
463
464 <li class="qandA">
465
466 <h3>Question 8</h3>
467
468 <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>
469
470 <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>
471
472 <p class="answer">Most common MIME types of type texts are text/html for normal web pages, text/plain for plain text, text/css for styles.</p>
473
474 <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>
475
476 </li>
477
478
479 <li class="qandA">
480
481 <h3>Question 9</h3>
482
483 <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 HTTP 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>
484
485 <dl>
486
487 <dt>GET Method</dt>
488 <dd>retrives the data in which is requested through the URI.</dd>
489
490 <dt>DELETE Method</dt>
491 <dd>deletes the file requested through the URI at the specified path of the source server.</dd>
492
493
494 </dl>
495
496 <p class="answer">Authoritative source: <a href="https://www.w3.org/Protocols/rfc2616/rfc2616-sec9.html">W3 org</a></p>
497
498 </li>
499
500
501 <li class="qandA">
502
503 <h3>Question 10</h3>
504
505 <p class="question">Most of the well-known HTTP web servers serve HTML and other content to end users. But behind the scenes, there are many HTTP 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>
506
507 <p class="answer">456d4308</p>
508
509 </li>
510
511
512 </ol>
513
514 </section>
515
516 <section id="lab3">
517
518 <h2>Lab 3 Questions and Answers</h2>
519
520 <ol>
521
522 <li class="qandA">
523
524 <h3>Question 1</h3>
525
526 <p class="question">Explain shortly what browser you used and how you have enabled the console.</p>
527
528 <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>
529
530 </li>
531
532 <li class="qandA">
533
534 <h3>Question 2</h3>
535
536 <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 <a> 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>
537
538 <p class="answer">To change the background color to red the following code works:</p>
539
540 <p class="answer"><code>document.body.style.backgroundColor = "red"</code></p>
541
542 <p class="answer">To change the behavior of the <code><a></code> tag, the following code works:</p>
543
544 <a href="#" id="test">Test anchor tag</a>
545
546 <p class="answer"><code>var elements = document.getElementById("test");</code></p>
547
548 <p class="answer"><code>elements.setAttribute("onClick", "return false;");</code></p>
549
550 </li>
551
552 <li class="qandA">
553
554 <h3>Question 3</h3>
555
556 <p class="question">
557 For the lecture preparation, should have already made yourself
558 familiar with the basics in the <a href="http://learn.jquery.com/about-jquery/how-jquery-works/">JQuery
559 tutorial</a>, as listed in
560 the Reader on BlackBoard. If you did not do this, do it now.
561 Make sure that <a href="http://learn.jquery.com/about-jquery/how-jquery-works/#complete-example">the
562 example</a> runs on your machine. Compare the use of JQuery to
563 change the behavior of the <code><a></code> element as shown in
564 the example with the code you used in the previous
565 question. List pros and cons of both methods.
566 </p>
567
568 <p class="answer">Using the JavaScript and DOM API to change the behavior of the <code><a></code> element,
569 has you change the hypertext reference of the <code><a></code> element with a certain id.</p>
570
571 <p class="answer">Using jQuery on the other hand, you prevent the default action from happening.</p>
572
573 <p class="answer"><code>event.preventDefault();</code></p>
574
575 </li>
576
577 <li class="qandA">
578 <h3>Question 4</h3>
579
580 <p class="question">Describe the major similarities and differences between Python and JavaScript.
581 (If you are more familiar with Java, you may also compare Java to JavaScript)</p>
582
583 <h4>Similarities</h4>
584
585 <ul>
586
587 <li>Both languages are object-oriented.</li>
588
589 <li>The syntax is very similar (almost the same).</li>
590
591 </ul>
592
593 <h4>Diffirences</h4>
594
595 <ul>
596
597 <li>Java is an object-oriented programming language, whereas JavaScript is an object-oriented scripting language</li>
598
599 <li>Java is a compiled language, wherease JavaScript is an interpreted language</li>
600
601 <li>Java runs on a virtual machine, whereas JavaScripts runs in the browser</li>
602
603 </ul>
604
605 </li>
606
607 <li class="qandA">
608
609 <h3>Question 5</h3>
610
611 <p class="question">What does the acronym "AJAX" stand for? Explain the role of the term the first "A" refers to.</p>
612
613 <p class="answer"><strong>A</strong>synchronous <strong>J</strong>avaScript <strong>a</strong>nd <strong>X</strong>ML</p>
614
615 <p class="answer">It allows websites change the content they're displaying, without having to reload the website</p>
616
617 </li>
618
619 <li class="qandA">
620
621 <h3>Question 6</h3>
622
623 <p class="answer">They are objects that are given by the browser environment, such as the window. </p>
624
625 <p class="answer">Two examples include: <code>Window</code> &<code> Document</code></p>
626
627 <p class="answer">Java and Python, don't have host objects, because the developer chooses what
628 environment is presented to the user, unlike in JavaScript, where it is exclusively the browser
629 (and everything related to it).</p>
630
631 </li>
632
633 <li class="qandA">
634
635 <h3>Question 7</h3>
636
637 <p class="question">Name two objects that are built into the JavaScript language. Briefly explain their role.</p>
638
639 <p class="answer">String - Store a sequence of character</p>
640
641 <p class="answer">Boolean - Store a true or false value</p>
642
643 </li>
644
645 <li class="qandA">
646
647 <h3>Question 8</h3>
648
649 <p class="question">Briefly explain the role of <strong>events</strong> and <strong>event listeners</strong> in JavaScript.</p>
650
651 <p class="answer"><strong>Events</strong> and <strong>event listeners</strong> are used in JavaScript to
652 execute specific functions, when a certain action is taken by the user, such as a double click on a particular
653 HTML element. This allows the website to be interactive.</p>
654
655 </li>
656
657 <li class="qandA">
658
659 <h3>Question 9</h3>
660
661 <p class="question">
662 Many organisations provide lectures or tutorials on web
663 technology and publish videos and slides of these lectures on
664 the web in so called "webinars". These lectures provide an
665 often overlooked, but rich source of information. Watch
666 the <a href="http://www.youtube.com/watch?v=ZE8ODPL2VPI">video of Mano Marks' Google Map API tutorial</a>.
667 Explain in 3 lines the functionality of the
668 autocomplete component that Marks describes.
669
670 (a good understanding the Google MAP API might also save you time
671 in the next queston if you choose to use geographical maps to enhance your HTML page).
672
673 See the Google Website for <a href="https://developers.google.com/maps/">more information on the API</a>.
674 </p>
675
676 <p class="answer">The autocomplete component allows a user to input a certain location (city, street name,
677 restaurant name, park etc.), and google will do its best to find the correct location of what the user wrote
678 and show it on the map.</p>
679
680 </li>
681
682 <li class="qandA">
683
684 <h3>Question 10</h3>
685
686 <p class="question">
687 Use (at least) one <strong>interactive widget</strong> from a
688 JavaScript widget library to enhance the output or input of
689 the product inventory. Be creative! If you really lack inspiration, try adding a calendar
690 widget to better support input of dates (in case your browser does not do that by default),
691 or to use a map widget for visualising the location fields in your product table.
692 </p>
693
694 <p class="answer">See JS file</p>
695
696 </li>
697
698 </ol>
699
700 </section>
701
702 <section id="lab4">
703
704 <h2>Lab 4 Questions and Answers</h2>
705
706 <ol>
707
708 <li class="qandA">
709
710 <h3>Question 1a</h3>
711
712 <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>
713
714 <p class="answer">The tokenizer did what it's supposed to. It shows the frequency of each word in every chapter correctly.</p>
715
716 <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>
717
718 </li>
719
720 <li class="qandA">
721
722 <h3>Question 1b</h3>
723
724 <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>
725
726 <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>
727
728 </li>
729
730 <li class="qandA">
731
732 <h3> Question 1c</h3>
733
734 <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>
735
736 <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>
737
738 <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>
739
740 </li>
741
742 <li class="qandA">
743
744 <h3>Question 1d</h3>
745
746 <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>
747
748 <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>
749
750 </li>
751
752 <li class="qandA">
753
754 <h3>Question 2a</h3>
755
756 <p class="question">How do you assess the quality of the TF-based search. What can you say about precision and recall?</p>
757
758 <p class="answer">To assess the quality of the TF-based search, we can examine the relevance of each result to the query.</p>
759
760 <p class="answer">Precision is the fraction of how many of the returned results are relevant.</p>
761
762 <p class="answer">Recall is the fraction of how many of the returned relevant results are retrieved.</p>
763
764 </li>
765
766 <li class="qandA">
767
768 <h3>Question 2b</h3>
769
770 <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>
771
772 <p class="answer">When using TF-based search, the numbers returned are whole, whereas when using TFIDF-based search, the numbers are decimals.</p>
773
774 <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>
775
776 <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>
777
778 <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>
779 </li>
780
781 <li class="qandA">
782
783 <h3>Question 2c</h3>
784
785 <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>
786
787 <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>
788
789 </li>
790
791 <li class="qandA">
792
793 <h3>Question 2d</h3>
794
795 <p class="question">What would happen to precision and recall if you implemented the improvements to the tokenizer you suggested in question 1a.?</p>
796
797 <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>
798
799 <p class="answer">The recall of the TFIDF will increase, since the weight of each term will increased by some amount.<p>
800
801 </li>
802
803 </ol>
804
805 </section>
806
807 <section id="lab5">
808
809 <h2>Lab 5 Questions and Answers</h2>
810
811 <ol>
812
813 <li class="qandA">
814
815 <h3>Question 1.1</h3>
816
817 <p class="question">What idempotent means in this context</p>
818
819 <p class="answer">Each time a client makes an HTTP GET request, the HTTP response will be identical each time, even if there are multiple, identical requests.</p>
820
821 </li>
822
823 <li class="qandA">
824
825 <h3>Question 1.2</h3>
826
827 <p class="question">How idempotent requests simplify the implementation of a caching HTTP proxy.</p>
828
829 <p class="answer">Idempotent request simplify implementation of a caching HTTP proxy by ensuring that the HTTP Response of the proxy server is identical to the response of the main web server.</p>
830
831 </li>
832
833 <li class="qandA">
834
835 <h3>Question 1.3</h3>
836
837 <p class="question">How so-called "visitor counters" often break this assumption?</p>
838
839 <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 HTTP GET Request for that website, the counter will increase by 1. Thus, the HTTP Response will vary for each user.</p>
840
841 </li>
842
843 <li class="qandA">
844
845 <h3>Question 1.4</h3>
846
847 <p class="question">How such counters might be negatively affected by proxies?</p>
848
849 <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>
850
851 </li>
852
853 <li class="qandA">
854
855 <h3>Question 2</h3>
856
857 <p class="question">HTTP 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>
858
859 <p class="answer">A stateless protocol, is a protocol that does not maintain user information. In the case of HTTP, this means that every HTTP Request is treated exactly the same way. This is advantageous as it allows HTTP 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 HTTP.</p>
860
861 </li>
862
863 <li class="qandA">
864
865 <h3>Question 3</h3>
866
867 <p class="question">One of the first applications of HTTP 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>
868
869 <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>
870
871 </li>
872
873 <li class="qandA">
874
875 <h3>Question 4</h3>
876
877 <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 HTTP/1.1 request stands for. Which authoritative source(s) have you used? Explain why this is source can be considered authoritative.</p>
878
879 <p class="answer">A 303 Status code in response to a HTTP/1.1 Request stands for "See Other", meaning the response to the request is udner a different URI.</p>
880
881 <p class="answer">For the authoritative source, we used the <a href="https://www.w3.org/Protocols/rfc2616/rfc2616-sec10.html">W3C</a> website.</p>
882
883 </li>
884
885 <li class="qandA">
886
887 <h3>Question 5</h3>
888
889 <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>
890
891 <ul>
892
893 <li><a href="https://developer.spotify.com/web-api/get-album/">https://developer.spotify.com/web-api/get-album/</a></li>
894
895 <li><a href="https://dev.twitter.com/rest/reference/get/statuses/user_timeline">https://dev.twitter.com/rest/reference/get/statuses/user_timeline</a></li>
896
897 </ul>
898
899 <p class="question">Both document the three key ingredients of a REST resource: </p>
900
901 <ol>
902
903 <li>The <strong>endpoint</strong> of the resource, including the full URL and the parametersthat can be used</li>
904
905 <li>The <strong>HTTP method</strong> that may be applied to the resource, e.g. GET, POST, HEAD,etc. </li>
906
907 <li>The <strong>response format</strong> in which theresource will be served, e.g. in JSON, XML, CSV, etc.</li>
908
909 </ol>
910
911 <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>HTTP response codes</strong> you should expect, especially in case of an error. Add a fourth column with the three most likely HTTP response codes,along with for each code, a typical situation in which it might occur. For example, what HTTP response code do you expect when the server is overloaded? or when you are refused access to the data you requested?</p>
912
913 <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 HTTP response codes).Please complete answering this question before you start the documentation part of Assignment 3!</p>
914
915 <div class="responsive-table">
916
917 <table class="sortable" id="staticTable">
918
919 <caption>REST Key Ingredients</caption>
920
921 <thead>
922
923 <tr>
924
925 <th>Endpoint</th>
926
927 <th>HTTP Method</th>
928
929 <th>Response Format</th>
930
931 <th>Response Codes</th>
932
933 </tr>
934
935 </thead>
936
937
938 <tbody>
939
940 <tr>
941
942 <td>https://api.spotify.com/v1/albums/{id}</td>
943
944 <td>The GET Method can be invoked</td>
945
946 <td>The response format is in JSON</td>
947
948 <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>
949
950 </tr>
951
952 <tr>
953
954 <td>https://api.twitter.com/1.1/statuses/user_timeline.json</td>
955
956 <td>The GET Method can be invoked</td>
957
958 <td>The response format is in JSON</td>
959
960 <td>200 OK, when the request is valid. 401 UNAUTHORIZED, when the request isn't authorized. 410 GONE, when the resource is gone.
961
962 </tr>
963
964 </tbody>
965
966 </table>
967
968 </div>
969
970 </li>
971
972 <li>
973
974 <h3>Question 6</h3>
975
976 <p class="question">
977 While you can easily try out HTTP <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.
978 </p>
979
980 <p class="question">Use the REST client of your choice to make an HTTP <code>HEAD</code>request to the resource used in the Spotify example: <code>https://api.spotify.com/v1/albums/0sNOF9WDwhWunNAHPD3Baj</code>. Study the HTTP response headers in the server's response you receive back. According to these response headers, which other HTTP requests methods are also allowed on this resource? And from which <code>origin</code> are you allowed to make these requests?
981 </p>
982
983 <p class="answer">According to the response headers, the allowed HTTP Request Methods are: GET, POST, OPTIONS, PUT, DELETE. All origins are permitted.</p>
984
985 </li>
986
987 <li>
988
989 <h3>Question 7</h3>
990
991 <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>
992
993 <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>
994
995 <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>
996
997 </li>
998
999 <li>
1000
1001 <h3>Question 8</h3>
1002
1003 <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>
1004
1005 <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>
1006
1007 <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>
1008
1009 <p class="answer">When a syntax error is introduced, in the terminal it will print out the error message and close the server.</p>
1010
1011 </li>
1012
1013 <li>
1014
1015 <h3>Question 9</h3>
1016
1017 <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 HTTP server serving database data dynamically in an HTML table versus one that serves the same data in JSON format. </p>
1018
1019 <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>
1020
1021
1022 </ol>
1023
1024 </section>
1025
1026 <section id=lab6>
1027
1028 <h2>Lab 6 Questions and Answers</h2>
1029
1030 <ol>
1031
1032 <li class="qandA">
1033
1034 <h3>Question 1</h3>
1035
1036 <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>
1037
1038 <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>
1039
1040 </li>
1041
1042 <li class="qandA">
1043
1044 <h3>Question 2</h3>
1045
1046 <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>
1047
1048 <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>
1049
1050 </li>
1051
1052 <li class="qandA">
1053
1054 <h3>Question 3</h3>
1055
1056 <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>
1057
1058 <p class="answer">Provide government-backed data to developers of various applications. The government can provide 'alternate facts' which might advertise false information.</p>
1059
1060 </li>
1061
1062 <li class="qandA">
1063
1064 <h3>Question 4</h3>
1065
1066 <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>
1067
1068 <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>
1069
1070 </li>
1071
1072 <li class="qandA">
1073
1074 <h3>Question 5</h3>
1075
1076 <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>
1077
1078 <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>
1079
1080 </li>
1081
1082 <li class="qandA">
1083
1084 <h3>Question 6</h3>
1085
1086 <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>
1087
1088 <a href="https://news.google.com/">Google News</a>
1089
1090 <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>
1091
1092 <form>
1093 <p>How relevant do you find the articles?</p>
1094
1095
1096 <label class="radio">
1097 <input type="radio" name="q1" value="0"> 0
1098 </label>
1099 <label class="radio">
1100 <input type="radio" name="q1" value="1"> 1
1101 </label>
1102 <label class="radio">
1103 <input type="radio" name="q1" value="2"> 2
1104 </label>
1105 <label class="radio">
1106 <input type="radio" name="q1" value="3"> 3
1107 </label>
1108 <label class="radio">
1109 <input type="radio" name="q1" value="4"> 4
1110 </label>
1111 <label class="radio">
1112 <input type="radio" name="q1" value="5"> 5
1113 </label>
1114
1115
1116 <p>How would you rate the quality of the articles?</p>
1117
1118
1119 <label class="radio">
1120 <input type="radio" name="q2" value="01"> 0
1121 </label>
1122 <label class="radio">
1123 <input type="radio" name="q2" value="11"> 1
1124 </label>
1125 <label class="radio">
1126 <input type="radio" name="q2" value="21"> 2
1127 </label>
1128 <label class="radio">
1129 <input type="radio" name="q2" value="31"> 3
1130 </label>
1131 <label class="radio">
1132 <input type="radio" name="q2" value="41"> 4
1133 </label>
1134 <label class="radio">
1135 <input type="radio" name="q2" value="51"> 5
1136 </label>
1137
1138
1139 <p>Would you recommend google news to other?</p>
1140
1141
1142 <label class="radio">
1143 <input type="radio" name="q3" value="yes"> Yes
1144 </label>
1145 <label class="radio">
1146 <input type="radio" name="q3" value="no"> No
1147 </label>
1148 </form>
1149
1150 </li>
1151
1152 <li class="qandA">
1153
1154 <h3>Question 7</h3>
1155
1156 <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>
1157
1158 <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>
1159
1160 </li>
1161
1162 <li class="qandA">
1163
1164 <h3>Question 8</h3>
1165
1166 <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>
1167
1168 <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>
1169
1170 <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>
1171
1172 </li>
1173
1174 </section>
1175
1176 <footer>
1177
1178 <a class="hide-print" href="#topBanner">Back to top</a>
1179
1180 <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">
1181
1182 </footer>
1183
1184</body>
1185
1186</html>