· 9 years ago · Feb 01, 2017, 12:28 PM
1<!DOCtype html>
2<html lang="en">
3<head>
4<meta charset="UTF-8">
5<title>Assignment 2</title>
6<link type="text/css" rel="stylesheet" href="stylesheet.css" media="screen"> <!-- Changes have been made to the stylesheet! -->
7<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
8</head>
9
10<script type="text/javascript" src="java.js"></script> <!-- On this location because all the elements of the page will be parsed and in the DOM before this script runs -->
11<body>
12<h1> Assignment 2: Erkin and Cees.</h1>
13<nav> <span> <a class="topbutton" href="#lab1">Lab 1</a> <a class="topbutton" href="#lab2">Lab 2</a> <a class="topbutton" href="#lab3">Lab 3</a> <a class="topbutton" href="#lab4">Lab 4</a> <a class="topbutton" href="#lab5">Lab 5</a> <a class="topbutton" href="#lab6">Lab 6</a></span></nav>
14<form id="addproduct" action="http://wt.ops.few.vu.nl/api/3fea9124" method="post">
15 <table id="sometable" name="records_table" class="sortable">
16 <thead>
17 <tr>
18 <th class="sortable">Category</th>
19 <th class="sortable">Name</th>
20 <th class="sortable">Amount</th>
21 <th class="sortable">Location</th>
22 <th class="sortable">Date</th>
23 </tr>
24 </thead>
25 <tbody>
26 </tbody>
27 <tfoot>
28 <tr>
29 <td><input name="category" type="text"></td>
30 <td><input name="name" type="text"></td>
31 <td><input name="amount" type="text" id="number" value="0">
32 <input class="addone" type="button" onclick="incrementValue()" value="Add one"></td>
33 <td><input name="location" type="text"></td>
34 <td><input name="date" type="text"></td>
35 </tr>
36 </tfoot>
37 </table>
38 <div class="Submit">
39 <input class="button" type="submit" value="Add new product">
40 <button type="button" id="databutton">Get Table data</button>
41 <button onclick="reset()" type="button">Reset fields</button>
42 </div>
43</form>
44<div class="resetdatabase">
45 <form action="http://wt.ops.few.vu.nl/api/3fea9124/reset" method="get">
46 <input class="resetdatabase" type="submit" value="Click to reset database">
47 </form>
48</div>
49
50<h2>Browser compatibility report</h2>
51<p class="report">For testing the browser compatibility, we used the webbrowsers: Google Chrome and Mozilla Firefox. We chose both of these browsers because they are very popular alternatives of each other and, possibly, the most used browsers in the world, if you don’t take mobile phones and tablets into account. Everything worked flawlessly in Google Chrome at the first try, which made it very easy for us to test out new things we learned. We edited our code and then we were able to instantly check the result in the browser. After we finished the HTML file and the CSS file, we started working on the print version. This could also easily be checked in both browsers by pressing ctrl + p, which then showed an example of the printed version. We implemented a link method that allowed the web page CSS to remain the same, only showing the printed version when ctrl + p was pressed (or accessed through options). To check if our html file was well accessible using a mobile browser, we downloaded a Google Chrome extension called “Mobile browser emulatorâ€, which emulates a browser on a small phone or tablet screen. The only problem we ran into, was that a few characters were not recognized by Mozilla Firefox, but they were by Google Chrome. This was because Google Chrome already used a standard character set, which we later implemented into the code to make it work across most (and definitely Firefox) browsers. The explicit measure we took, to make it work in Firefox as well, was the tag: <code><meta charset="UTF-8"></code>. This way we tell Firefox which character set to use inside the html code itself.</p>
52
53 <div id="lab1">
54 <h2> Questions Lab 1</h2>
55 <ol>
56 <li> While <abbr title="World Wide Web Consortium">W3C</abbr> wanted to turn the web into a more accessible place, <abbr title="Web Hypertext Application Technology Working Group">WHATWG</abbr> wanted to turn the web into an operating system on itself, which meant that it was a place for applications, in other words: an engine that could run software. In the article they explain this as making “monkey’s danceâ€. Here’s a quote from the article where they use the metaphor to explain the difference between <abbr title="World Wide Web Consortium">W3C</abbr>’s approach to <abbr title="HyperText Markup Language">HTML</abbr> and WHATWG’s approach to <abbr title="HyperText Markup Language">HTML</abbr>:
57 <blockquote><q>To knit these aims together, the <abbr title="World Wide Web Consortium">W3C</abbr> was working on a new version of <abbr title="HyperText Markup Language">HTML</abbr>, called XHTML2, which would reinvent many of the Web page’s features with slightly better technologies, along with other standards. But, where <abbr title="World Wide Web Consortium">W3C</abbr> wanted to build a more open and accessible Web, the Web industry wanted to make the monkey dance.</q> </blockquote>
58 </li>
59 <li class="break">The difference between the two is that the internet is a massive network of networks, that simply connects millions of computers globally. The information that travels over the internet can be transferred via a variety of languages known as protocols. The web is only a portion of the internet, which only uses the HTTP protocol.
60 Source used: <a class="longlink" href="http://www.webopedia.com/DidYouKnow/Internet/Web_vs_Internet.asp">http://www.webopedia.com/DidYouKnow/Internet/Web_vs_Internet.asp</a> </li>
61 <li>
62 <ul>
63 <li>UDI</li>
64 <li>HTTP</li>
65 <li><abbr title="HyperText Markup Language">HTML</abbr></li>
66 </ul>
67 </li>
68 <li>The difference is that the code of the exported <abbr title="HyperText Markup Language">HTML</abbr> becomes very long and complex as opposed to a normal simple <abbr title="HyperText Markup Language">HTML</abbr> file with the same content. Creating a web document with the text editor makes the code harder to edit.</li>
69 <li>
70 <table id="protocolTable" class="sortable">
71 <caption>
72 Protocol Table
73 </caption>
74 <tbody>
75 <tr>
76 <th class="sortable">Protocol</th>
77 <th class="sortable">Description</th>
78 <th class="sortable">Port</th>
79 <th class="sortable">Authoritative source</th>
80 </tr>
81 <tr>
82 <td>HTTP</td>
83 <td>Hypertext Transfer protocol</td>
84 <td>80</td>
85 <td>Professor Jacco van Ossenbruggen</td>
86 </tr>
87 <tr>
88 <td>SSH</td>
89 <td>Secure Shell</td>
90 <td>22</td>
91 <td>SSH Communications security corporation</td>
92 </tr>
93 <tr>
94 <td>FTP</td>
95 <td>File transfer protocol</td>
96 <td>21</td>
97 <td>Bradley Mitchell</td>
98 </tr>
99 </tbody>
100 </table>
101 <p><em>The reason these sources are authoritative:</em></p>
102 <ul class="protocoltable">
103 <li>HTTP: These slides are used(and supposedly written) by Dr. Jacco van Ossenbruggen, he is a professor at the <abbr title="Vrije Universiteit">VU</abbr>, which makes him authoritative.</li>
104 <li>SSH: This web page is created by the SSH Communications Security Corporation itself.</li>
105 <li>FTP: This article was written by Bradley Mitchell, Bradley is a computer professional with 20 years experience in network software development, project management, and technical writing.</li>
106 </ul>
107 </li>
108 <li>
109 <dl>
110 <dt><code><b>Hello World</b></code></dt>
111 <dd>just gives the text a visual appearance of a thicker text style without any meaning.</dd>
112 <dt><code><strong>Hello World</strong></code></dt>
113 <dd>Actually tells the <abbr title="HyperText Markup Language">HTML</abbr> itself that it is important, it represents a semantic meaning of importance. So <strong> does not just only have a visual function, visual appearances should often be left in favour of CSS.</dd>
114 </dl>
115 </li>
116 <li><strong>Similarity</strong>: both of the tags section a part of the <abbr title="HyperText Markup Language">HTML</abbr> document which can be, for example, used in CSS. Also they are both non-semantic tags. <br>
117 <strong>Difference:</strong> <div> is a block tag, using this tag will cause line-breaks. <span> is an inline tag, this tag will not cause any line breaks.</li>
118 <li>Pros: ability to embed another <abbr title="HyperText Markup Language">HTML</abbr> document inside of an <abbr title="HyperText Markup Language">HTML</abbr> document.<br>
119 Cons: it is non-semantic, it blocks page onload and costs more memory, so it is a performance issue.</li>
120 <li>CSS is beneficial for use because it causes, for example, lower bandwidth use. This means that mobile data can be saved when accessing the <abbr title="HyperText Markup Language">HTML</abbr> document using 3G network. Coupled with this, CSS also loads web pages quicker than appearance being modified in jus <abbr title="HyperText Markup Language">HTML</abbr>. A big benefit would also be that CSS can make the appearance of the web page much better than just using <abbr title="HyperText Markup Language">HTML</abbr>. Another benefit is maintainability. By separating <abbr title="HyperText Markup Language">HTML</abbr> and CSS, you can modify your whole <abbr title="HyperText Markup Language">HTML</abbr> document by small changes in the CSS document, this will save you time and effort.</li>
121 <li>We expect nothing to happen, that the text just shows up like italics, because both tags have the same appearance. When we tried it in the browser, we found that nothing changed.</li>
122 <li>The browsers we choose are Google Chrome and Mozilla Firefox.
123 In our view, key differences between these two browsers are:<br>
124 Default search engines. Google is in our opinion the best search engine and Google Chrome uses this search engine as a standard search engine. The rest offers no competition to Google, so this makes searching far quicker on Google Chrome. Google Chrome also integrates your Google account into the browser itself, adjusting to your preferences, which makes accessing platforms like Gmail and Youtube easier, as you are already and always logged in. Mozilla Firefox also has a barrage of add-ons, which uses up more memory and slows down using this browser. </li>
125 </ol>
126 <figure> <img src="http://munkhuu.do.am/_ld/0/81293841.png" alt="Google Chrome versus Mozilla Firefox" width="220" height="200">
127 <figcaption>Figure 1 - Google Chrome vs. Mozilla Firefox</figcaption>
128 </figure>
129 </div>
130</section>
131<br>
132
133 <div id="lab2">
134 <h2>Questions Lab 2</h2>
135 <ol>
136 <li>The availability of ALT text, corresponds with the first guideline (1.1) of the WCAG 2.0. This guideline is “Perceivability†and it means that every non-text content should have a text alternative that serves the equivalent purpose. </li>
137 <li>We chose the website of the <abbr title="World Wide Web Consortium">W3C</abbr>, which is <a href="http://www.w3.org/">http://www.w3.org/</a> , because we would know almost 100% that this website is accessible, as it states the accessability guidelines on its own website. All the objects that have an alternative(alt) are considered good, they are marked with a green color. Although if an object does not have an alternative it’s marked red. The <abbr title="World Wide Web Consortium">W3C</abbr> website has only one object that is marked red: a missing form label in a dropdown menu.</li>
138 <li>This website checks whether the color contrast between the written text and the background is sufficient, in a way that people with certain visual impairments have no trouble reading the text. firstly we tested white text on a black background, which is the perfect contrast. The website also tells us that this is true and that this contrast corresponds with the WCAG guidelines (4x yes). It appears that the brightness difference should be 125 or higher and the color difference should be at least 500 for the contrast to be acceptable. The second test we did was with the complementary colors red and green, these colors do not correspond with the WCAG guidelines(4x no.) Because green and red would be hard to distinguish in black and white and for color blind people. The color difference might be enough(510) but that doesn’t say a whole lot about the usability of the colors. A third test was performed with the same color text as background. This meant that the text was not visible to the naked eye for any person, even non-visually impaired people. This would never correspond with the WCAG guidelines, even if they were only set up for healthy people.</li>
139 <li>An advantage of responsive app over a native app is that a responsive app works for almost every operating system as opposed to a native app, which should be created separately for every operating system. An advantage of a native app over a responsive app is that a native app works almost always quicker and does not always require internet access to be used.</li>
140 <li>Because the world does not utilize a single language, the web also consists of websites that contain different languages. This becomes an issue when setting up standards and guidelines concerning the use of text. Within the internationalization activity of <abbr title="World Wide Web Consortium">W3C</abbr>, there are a few issues that come forward. First of all, all technology should support every writing system of the world, this is why <abbr title="World Wide Web Consortium">W3C</abbr> technologies are built on “unicodeâ€, unicode allows storing the same text even though different characters are used. Also, some writing systems require extra special support. A great example is languages like Japanese, Chinese, Korean and Mongolian, these languages can be written vertically, so this needs to be able to be supported. Authors would also need to have control over their writing direction, this is because of languages that mix right-to-left and left-to-right on the same line. Other issues are support for alternative calendars, time-zones, and names in both native and transliterated forms. Content developers and content management systems must also be able to deal with linguistic and cultural issues. An example is the combination of phrases in one language translated to another. In Japan you start a book on the last page, so writing page 1-34 would not work. this suggests that content developers should not be biased and locked towards just the english language. not only page sequences but also text order should be considered and implemented when developing a website that supports multiple languages, because we know that the Arabic language reads from right to left instead of the western left to right. Cultural differences should also be taken into account for content developers. Symbolism is a good example. In many western cultures, the check mark (often green) means OK or correct. In Japan, however, this check mark refers to incorrectness and should thus be taken into account when developing multilingual content. These are examples of the view that design and content should be flexible enough to deal with local needs.</li>
141 <li><a href="https://www.few.vu.nl">www.few.vu.nl</a>: <em>130.37.164.154</em><br>
142 <a href="https://www.cs.vu.nl">www.cs.vu.nl</a>: <em>130.37.164.154</em><br>
143 We found these ip adresses by using: <a href="https://www.site24x7.com/find-ip-address-of-web-site.html">https://www.site24x7.com/find-ip-address-of-web-site.html</a> They are related because they are the same. </li>
144 <li>IPv6 is a protocol that is a newer version of the IPv4. The most notable feature of the IPv6, as opposed to the IPv4, is that using IPv6 can result in more combinations of addresses. This means that, in practice, the same address will never be used, which is beneficial for the internet as it is growing more and more every year. More features, which are not included in IPv4, include: simplifying the aspects of address assignment, , network renumbering, and router announcements when changing network connectivity providers. IPv6 handles packets of data better than IPv4, which is a big reason to move from IPv4 to IPv6. Probably the best reason for people to start using IPv6 is that the number of possible addresses easily surpassed billions. IPv6 also makes multicasting possible, which IPv4 does not standardly include. Multicasting means sending packets to multiple destinations at once.</li>
145 <li>A mime-type is a two-part identifier for file formats and format contents transmitted on the internet. Example of text types are text/plain, text/<abbr title="HyperText Markup Language">HTML</abbr>, text/css, text/javascript etc.</li>
146 <li>Another HTTP-request method is HEAD, The HEAD method is identical to GET except that the server MUST NOT return a message-body in the response.</li>
147 <li><em>3fea9124</em></li>
148 </ol>
149 </div>
150</section>
151
152<div id="lab3">
153 <h2>Questions Lab 3</h2>
154 <ol>
155 <li>The browser we used to test the console.log() was Mozilla firefox. To know how to access the browser console, we simply searched for it on Google. After we opened the console log, we could instantly see that the lab assignment page logged messages to the console which stated: ‘Hello world!’ and ‘We advise you to always have your console open during JavaScript programming.’
156</li>
157 <li>To change the background colour using javascript, we created a separate .js Javascript file, that contained a function that sets the background colour of the document to red. Then we added a button to the html body that had an event listener. When clicked, it would call the function and the background colour would change to red.
158</li>
159 <li>The pro of using Jquery is that you do not need a separate JavaScript file in order to implement the <a> tag cancellation. This would also not be the case if we used JavaScript between the <script>tags, but that was not allowed for this assignment.
160</li>
161 <li>the first difference that we noticed was that the code blocks, need to be between curly parentheses { } in Javascript, which is not the case when writing in Python, where they are defined by indentation. also, python code can be compiled to byte code while Javascript is an interpreted language that is not compiled. Javascript also recognizes only one type of numerical value, while Python recognizes three. In Python, a variable can not be defined without assigning a value to it, while Javascript can define a variable without value. Also very notable, are the semicolons at the end of code lines in Javascript, which Python don’t use.</li>
162 <li>AJAX stands for Asynchronous Javascript And XML. AJAX is asynchronous, which is what the first A stands for. This asynchronicity refers to the fact that a webpage containing AJAX, does not need to be refreshed or reloaded in order for information to be sent or received/changed on the webpage. This means that the page itself can load and send new information without having to load the whole webpage all over again, which is very convenient.</li>
163 <li>A host object is an object defined by the host environment (such as a web browser) within which the JavaScript interpreter is embedded. So its role is to have a javascript interpreter embedded within itself. Two host objects that are often used are “window†and “documentâ€. In Python and Java these are not available because the interpreter for Javascript is a browser and Python and Java are not written to be ran in a browser.</li>
164 <li>String object: the most used object. This object defines a number of characters as text. Math object: this object is used for many mathematical formulas and equations.</li>
165 <li>Events are “things†that happen to an HTML page. These things are like the page has finished loading, a button is pressed or an input field was changed. An event listener is a function that gets executed when the said event or “thing†occurs, like a button being pressed or a web page being fully loaded.</li>
166 <li>The functionality of auto complete is that users, that are utilizing the large database of Google, are assisted with their search by Google’s database itself. While typing their characters in the search bar, the database tries to match their search as closely as possible, becoming more accurate the more characters are typed.</li>
167</ol>
168</div>
169</section>
170
171
172<div id="lab4">
173 <h2>Questions Lab 4</h2>
174 <ol>
175 <li>The tokenizer did his job pretty well, most words are well sorted. At every chapter you can see how much a word is used. The only problem is that the first column v1 isn’t actually chapter one, but the text before chapter one begins. Also, “_i_†is counted as a word, even though it isn’t.
176</li>
177<li>It doesn’t make sense because these are just words that are most commonly used by any big text files. They are simple words that don’t really say much about the text itself.
178</li>
179<li>The rang number of the words, sorted on their frequency (most on top), times the frequency is constant. With every big text this will be pretty much the same. On most text files, zipfs law applies.
180</li>
181<li>Heaps law applies to this text file, it resembles vocabulary growth. The graph line increases as the text size increases. Heaps’ law means that as more instance text is gathered, there will be diminishing returns in terms of discovery of the full vocabulary from which the distinct terms are drawn.
182</li>
183<li>The term-frequency search will just count the number of occurrences of a word in the text file. However, it is possible that a term would appear much more times in long documents than shorter ones. And thus the precision is not as good as it could be.
184</li>
185<li>De TFIDF search measures the importance of a word. Court, footman, dance are the three terms with the highest TFIDF score. And since this type of search represents the importance of a term, they describe the chapters very well, because they are the most important word in that given chapter.
186</li>
187<li>The precision from the TFIDF search would be good, but not from the term-frequency search.
188</li>
189<li>The precision and recall would improve because certain terms that aren’t really seen as words get to be removed.</li>
190</ol>
191</div>
192</section>
193
194
195<div id="lab5">
196 <h2>Questions Lab 5</h2>
197 <ol>
198 <li>
199 <ol>
200 <li>In this context that means the ability to perform the same task when requested multiple times with the same results, so multiple submits won’t have different effects. </li>
201 <li>Because idempotent requests get the same information over and over again, this works in the favour of proxy caching, which purely exists to retrieve the same data over and over again, while saving bandwidth for other tasks.</li>
202 <li>Because visitor counters need to be updated every time the page is refreshed, the GET method adds one visitor every time this is done. This means that the result doesn’t stay the same and actually changes every time it is applied.</li>
203 <li> Because visitor counters are global and not bound to a single webpage or element, it would be wiser not to store them in a proxy, as every visitor would cache that proxy, defeating its purpose of preserving bandwidth.
204</li>
205 </ol>
206 </li>
207<li>A stateless protocol is a protocol that sees each request in a way that it is an independent, isolated request that is unrelated to any previous request. Http, but also IP are examples of stateless protocols. An advantage of this, is that it simplifies the server design because there is no need to dynamically allocate storage to deal with conversations in progress. The disadvantage is that the web server does not maintain any memory of the activities of any particular client, so each request is treated as a new request and not as a follow-up to a previous request.
208</li>
209<li>Cookies make it so that the user can move from page to page while storing information. The cookies record the purchase and the price of what you are buying. Without cookies you would have to invent your own method of writing to the “user’s hard drive.†This would be really time-consuming.
210</li>
211<li>The 303 status code, in response to a HTTP/1.1 request stands for redirecting web applications to a different URI, often after a POST request. The authoritative source we used was w3.org, which has been explained to be authoritative in the Lab 1 questions.
212</li>
213<li>
214 <table>
215 <tbody>
216 <tr>
217 <th>Example</th>
218 <th>Endpoint</th>
219 <th>HTTP method</th>
220 <th>Response format</th>
221 <th>Most-likely HTTP response code</th>
222 </tr>
223 <tr>
224 <td>Spotify</td>
225 <td>https://api.spotify.com/v1/albums/{id} <br>
226 The parameters vary with different music.</td>
227 <td>GET request</td>
228 <td>JSON</td>
229 <td>200:OK getting to see information about the album<br>
230304:Not modified when searching for an album that was the previous<br>
231400: bad request
232when passing an invalid parameter
233</td>
234 </tr>
235 <tr>
236 <td>Twitter</td>
237 <td>https://api.twitter.com/1.1/statuses/user_timeline.json <br>
238The parameters are screen_name and user_id</td>
239 <td>GET request</td>
240 <td>JSON</td>
241 <td>200:OK
242display searched tweet<br>
243304: Not modified
244searching a tweet that was the previous search result<br>
245400: Bad request
246invalid search terms
247 </td>
248 </tr>
249 </tbody>
250 </table>
251</li>
252<li>The other request methods are: GET, POST, OPTIONS, PUT, DELETE. the origin from which you are able to make requests is * (wildcard), which means it allows any origin to access the resource.
253</li>
254<li>We expect it to be JSON because JSON is a syntax for storing and exchanging data, which JavaScript uses to read the data. The actual content-type is, as expected, JSON, which stores album data in Spotify’s case.</li>
255<li>We changed the code, then we refreshed the website and it displayed the changes we made. When we made a syntax error, the website didn’t work properly anymore.
256</li>
257<li>When receiving JSON data, the advantage is that you can use this JSON to create multiple things, not only tables. The advantage of a html table generated by a template, is that it’s much easier, because you don’t have to create a code in your html file itself.
258</li>
259</ol>
260</div>
261</section>
262
263
264<div id="lab6">
265 <h2>Questions Lab 6</h2>
266 <ol>
267 <li>Schneiderman mentions four examples of negative aspects of Web-based social interaction: security breaches, identity theft, privacy violations, and the social disruptions of globalization. We share his view that this is a part of web-science, because people that study web-science can react to such events and provide solutions and security for these types of crimes. Security is a big part of web-science in our opinion.
268</li>
269 <li>Longtail refers to the fact that in e-commerce, the sum of unpopular products and services outnumbers the popular ones, which are often found in real life stores. This is possible because, in real life, stores have a limited amount of space. To add to that, more space costs more money, which means that you can better promote your most popular product first, or you will run the risk of losing profit. In online shops, however, as many products can be shown as you want, which means you can still offer the least popular products alongside the popular ones. Searching for specific products is also possible because you don’t have to walk around to find it. That means the least popular products are on the same level as the popular ones.
270</li>
271 <li>A potential danger of open data websites like data.gov is that it can harm the reputation of a country, people might interpret the data incorrectly, this way the concept of open data can really paint the country in a bad light.
272</li>
273 <li>A few of the problems named by Nielsen are still relevant, but it is also a subjective matter, as some people do not mind certain problems Nielsen states. For example, search engines not being able to handle typos. Some people are perfect typers and never make typos. And to add to that, Google now suggests whether you did not mean the correct spelling of the word you typed with a typo. However, most of the problems stated by Nielsen are still prevalent in a certain way. There will always be websites that do not keep up with the trends and still utilize annoying web design, as stated by Nielsen. A problem we encountered is the lack of websites that are fully compatible with mobile devices. A lot of websites do have a mobile version, but they still use a lot of data and are annoying to navigate through because of the overdone CSS.
274</li>
275 <li>If we would do an a/b test with the website https://alphaleteathletics.com/collections, a would for example be the website that it is know, and b would be the website with all the images sized down a bit(it’s a little bit over the top know in our opinion.) With this, you could test the purchase behaviour or even the time that they are on the page(dependent variables.) The independent variable is in this case the image sizing. Our hypothesis is that b will increase page time and will result in more purchases because the end user would have a little bit more overview onto the whole page.
276</li>
277 <li>A mini survey would perfectly fit https://www.youtube.com in our opinion. The reason we chose this website is because they, in our opinion, unnecessarily make changes to the website every once in a while. Users finally get accustomed to their web layout, and then they decide to change this again. We suggest that they ask users for a quick survey before they plan to actually implement or design changes. This survey would be a simple yes/no survey and it would ask questions like: ‘Do you want to see a change in YouTube’s layout’? A simple yes or no would suffice, and depending on a percentage of votes, they can decide on their changes.
278</li>
279 <li>The common log format can provide an easy-to-see view of web server information. In an experiment to log the behaviour with an improved link structure, with the common log format you can easily check whether the improved structure will get you more hits. the independent variable is improved link structure and the dependent variable is the amount of hits to the website. Our hypothesis is that an improved link structure will get you more hits, because it requires less work and thinking time to get to the website.</li>
280 <li>It all began in 2005. The first snapshot of the website we chose, http://www.youtube.com, was made on April the 28th. YouTube looked like a very basic website, created by people that had a good, but simple understanding of HTML and CSS, as it does not look too fancy and definitely not as confusing as it looks now. The nice thing is that, in more than ten years, they still have not changed the logo. The only memories we still have from that time is that we used it to look up gameplay videos of video games we used to play, and that is what everyone our age used it for. Roughly a month later, their layout had already changed. It looked like YouTube was growing in popularity, because they now display popular tags and videos on their homepage. They include funny commercials, home videos and dramatic 9/11 videos. Even bigger changes occur a few months later, when youtube introduces a social system. Users are able to create account and add each other as friends. You are able to view each other's’ favourite videos and such. There is even a list of the “last 8 users onlineâ€, which would be unthinkable nowadays, looking at the enormous amount of users that are on YouTube daily. Also, there is a box containing “Today’s featured videosâ€, which would also be obsolete nowadays, as videos are being uploaded rapidly by thousands of profiles every minute, all gaining thousands of views. The big change, however, occurs when Google buys YouTube for 1.65 billion dollars. A massive amount of money, which seems like a perfect investment nowadays, as YouTube is even used for playing music nowadays. Many things changed while Google was at the steering wheel. As we mentioned before, they decided it would be a good idea to change the website layout every month, confusing their users once more. the biggest change was that the voting system on videos got a revamp. You were no longer able to rate a video using stars (1-5), but now you could either like or dislike a video. This caused an uproar, but now it seems like it was just the right thing to do, as Facebook’s “like†gained massive popularity. As the months went by, music got a bigger and bigger role on YouTube. Copyright rules were established and video uploaders were now able to make money, as long as they were viewed enough by people. Nowadays, people see YouTube as a social platform. It contains almost everything you could think of. You just have to search.
281</li>
282
283</ol>
284</div>
285</section>
286<pre> 2017 Made by Erkin and Cees.</pre>
287</body>
288</html>