API tools faq
paste
Advertisement
Guest User

TEST DIT

a guest
Jan 19th, 2017
103
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 17.98 KB | None | 0 0
raw download clone embed print report
  1. <html lang="en"><head>
  2. <meta charset="UTF-8">
  3. <title>Assignment 1</title>
  4. <link type="text/css" rel="stylesheet" href="Screen1.css" media="screen">
  5. <link type="text/css" rel="stylesheet" href="Print.css" media="print">
  6. <script type="text/javascript" src="java.js"></script>
  7. <script type="text/javascript" src="jquery-3.1.1.js"></script>
  8. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
  9. <script>
  10. $(document).ready( function () {
  11. $('#addproduct').submit( function () {
  12. var formdata = $(this).serialize();
  13. $.ajax({
  14. type: "POST",
  15. url: "http://wt.ops.few.vu.nl/api/3fea9124",
  16. data: formdata,
  17. });
  18. alert("Product added to the Database, click on 'Get Table data' to see it.")
  19. return false;
  20. });
  21. });
  22. $(document).on("click","#databutton", function () {
  23. $("#sometable").find("tr:gt(0):not(:last)").remove();
  24. });
  25. $(document).on("click","#databutton", function () {
  26. $.getJSON("http://wt.ops.few.vu.nl/api/3fea9124",
  27. function (json) {
  28. var tr;
  29. for (var i = 0; i < json.length; i++) {
  30. tr = $('<tr/>');
  31. tr.append("<td>" + json[i].category + "</td>");
  32. tr.append("<td>" + json[i].name + "</td>");
  33. tr.append("<td>" + json[i].amount + "</td>");
  34. tr.append("<td>" + json[i].location + "</td>");
  35. tr.append("<td>" + json[i].date + "</td>");
  36. $('#sometable').append(tr);
  37. }
  38. });
  39. });
  40.  
  41. $('#contactForm').submit(function () {
  42. sendContactForm();
  43. return false;
  44. });
  45.  
  46. </script>
  47. </head>
  48. <body>
  49. <h1> Assignment 1: Erkin and Cees.</h1>
  50. <nav> <span> <a class="topbutton" href="#lab1">Lab 1</a> <a class="topbutton" href="#lab2">Lab 2</a> </span> </nav>
  51. <form id="addproduct" action="http://wt.ops.few.vu.nl/api/3fea9124" method="post">
  52. <table id="sometable" name="records_table" class="sortable">
  53. <thead>
  54. <tr>
  55. <th class="sortable">Category</th>
  56. <th class="sortable">Name</th>
  57. <th class="sortable">Amount</th>
  58. <th class="sortable">Location</th>
  59. <th class="sortable">Date</th>
  60. </tr>
  61. </thead>
  62. <tfoot>
  63. <tr>
  64. <td><input name="category" type="text"></td>
  65. <td><input name="name" type="text"></td>
  66. <td><input name="amount" type="text" id="number" value="0">
  67. <input class="addone" type="button" onclick="incrementValue()" value="Add one"></td>
  68. <td><input name="location" type="text"></td>
  69. <td><input name="date" type="text"></td>
  70. </tr>
  71. </tfoot>
  72. </table>
  73. <div class="Submit">
  74. <input class="button" type="submit" onclick="loadDoc()" value="Add new product">
  75. <button onclick="reset()" type="button">Reset fields</button>
  76. </div>
  77. </form>
  78. <div class="resetdatabase">
  79. <form action="http://wt.ops.few.vu.nl/api/3fea9124/reset" method="get">
  80. <input class="resetdatabase" type="submit" value="Click to reset database">
  81. </form>
  82. </div>
  83. <button type="button" id="databutton" onclick="loadDoc()">Fill row</button>
  84. <h2>Browser compatibility report</h2>
  85. <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>&lt;meta charset="UTF-8"&gt;</code>. This way we tell Firefox which character set to use inside the html code itself.</p>
  86. <section>
  87. <div id="lab1">
  88. <h2> Questions Lab 1</h2>
  89. <ol>
  90. <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>:
  91. <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>
  92. </li>
  93. <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.
  94. 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>
  95. <li>
  96. <ul>
  97. <li>UDI</li>
  98. <li>HTTP</li>
  99. <li><abbr title="HyperText Markup Language">HTML</abbr></li>
  100. </ul>
  101. </li>
  102. <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>
  103. <li>
  104. <table id="protocolTable">
  105. <caption>
  106. Protocol Table
  107. </caption>
  108. <tbody>
  109. <tr>
  110. <th>Protocol</th>
  111. <th>Description</th>
  112. <th>Port</th>
  113. <th>Authoritative source</th>
  114. </tr>
  115. <tr>
  116. <td>HTTP</td>
  117. <td>Hypertext Transfer protocol</td>
  118. <td>80</td>
  119. <td>Professor Jacco van Ossenbruggen</td>
  120. </tr>
  121. <tr>
  122. <td>SSH</td>
  123. <td>Secure Shell</td>
  124. <td>22</td>
  125. <td>SSH Communications security corporation</td>
  126. </tr>
  127. <tr>
  128. <td>FTP</td>
  129. <td>File transfer protocol</td>
  130. <td>21</td>
  131. <td>Bradley Mitchell</td>
  132. </tr>
  133. </tbody>
  134. </table>
  135. <p><em>The reason these sources are authoritative:</em></p>
  136. <ul class="protocoltable">
  137. <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>
  138. <li>SSH: This web page is created by the SSH Communications Security Corporation itself.</li>
  139. <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>
  140. </ul>
  141. </li>
  142. <li>
  143. <dl>
  144. <dt><code>&lt;b&gt;Hello World&lt;/b&gt;</code></dt>
  145. <dd>just gives the text a visual appearance of a thicker text style without any meaning.</dd>
  146. <dt><code>&lt;strong&gt;Hello World&lt;/strong&gt;</code></dt>
  147. <dd>Actually tells the <abbr title="HyperText Markup Language">HTML</abbr> itself that it is important, it represents a semantic meaning of importance. So &lt;strong&gt; does not just only have a visual function, visual appearances should often be left in favour of CSS.</dd>
  148. </dl>
  149. </li>
  150. <li>Similarity: 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>
  151. Difference: &lt;div&gt; is a block tag, using this tag will cause line-breaks. &lt;span&gt; is an inline tag, this tag will not cause any line breaks.</li>
  152. <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>
  153. Cons: it is non-semantic, it blocks page onload and costs more memory, so it is a performance issue.</li>
  154. <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>
  155. <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>
  156. <li>The browsers we choose are Google Chrome and Mozilla Firefox.
  157. In our view, key differences between these two browsers are:<br>
  158. 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>
  159. </ol>
  160. <figure> <img src="http://munkhuu.do.am/_ld/0/81293841.png" alt="Google Chrome versus Mozilla Firefox" width="220" height="200">
  161. <figcaption>Figure 1 - Google Chrome vs. Mozilla Firefox</figcaption>
  162. </figure>
  163. </div>
  164. </section>
  165. <br>
  166. <section>
  167. <div id="lab2">
  168. <h2>Questions Lab 2</h2>
  169. <ol>
  170. <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>
  171. <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>
  172. <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>
  173. <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>
  174. <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>
  175. <li><a href="https://www.few.vu.nl">www.few.vu.nl</a>: <em>130.37.164.154</em><br>
  176. <a href="https://www.cs.vu.nl">www.cs.vu.nl</a>: <em>130.37.164.154</em><br>
  177. 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>
  178. <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>
  179. <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>
  180. <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>
  181. <li><em>3fea9124</em></li>
  182. </ol>
  183. </div>
  184. </section>
  185.  
  186.  
  187. </body></html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!