1 / 31

History of World-Wide Web and H TML

History of World-Wide Web and H TML. 1989: WWW has been invented at CERN 1991: Official birthday of HTML. HTML: Reminder. Markup version. <!DOCTYPE html> <html> < head > < title > School Announcement </ title > </ head > <body> <h1> JINR/CERN School 2014 </h1>

emerald-orr
Download Presentation

History of World-Wide Web and H TML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. History of World-Wide Web and HTML • 1989: WWW has been invented at CERN • 1991: Official birthday of HTML

  2. HTML: Reminder Markup version <!DOCTYPE html> <html> <head> <title>SchoolAnnouncement</title> </head> <body> <h1>JINR/CERN School 2014</h1> <p>JINR, <a href="http:\\www.cern.ch">CERN</a> and MEPhI are organizing a school on grid and advanced information systems.</p> <p class="topics"> The main topics of the school are: <ul> <li>NICA project</li> <li>Advanced Information Systems</li> <li>Introduction to the GRID technologies</li> </ul> </p> </body> </html> HTML header Heading link Paragraph List

  3. CSS: Reminder CSS = Cascading Style Sheets <linkrel="stylesheet"href="Style.css"> body { font-family: Arial, MS Sans Serif; background: url(gr1.jpg) repeat } h1 { background: url(gr3.jpg); color: white; padding: 10px} p { font-weight: bold; padding-left: 5px } p.topics{ color: #800517} li { list-style-image: url(b.jpg); margin-top: 1em}

  4. History of HTML Language 1991 Official birthday (20 elements) 1995 v.2.0 1996 CSS 1 1996 JavaScript 1997 3.2 and 4.0 (W3C Recommendation) 1999/2000 XHTML 2005 World is asynchronous (AJAX) 2009-… 5.0

  5. HTML5: Philosophy • Reduce the need for external plug-ins • Error handling • Device independent • Replace scripting with markup HTML5 = HTML + CSS + JavaScript

  6. HTML5: New Features in a nutshell New tags added in HTML5 • Semantic elements • New form controls • Local offline storage • New JavaScript APIs • Media: video and audio • Canvas element for drawing • User Interface improvements • SVG and WebGL http://www.testking.com/techking/infographics/ultimate-html5-cheatsheat/

  7. HTML5: Simplification of code Markup version HTML4 <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd> HTML5 <!DOCTYPE html> Metadata HTML4 <metahttp-equiv="content-type"content="text/html; charset=UTF-8" /> HTML5 <metacharset=''utf-8''/>

  8. HTML5: New form elements

  9. HTML: Structure • No semantics in layout <div id=“header”> <div id=“sidebar”> <div class=“post”> <div class=“post”> <div id=“footer”>

  10. HTML5: Semantic markup <header”> <nav> <aside> <section> <header> <article> <footer> <header”>

  11. HTML5: Semantic elements example <header> <nav> <aside> <section> <footer>

  12. Web Storage: a bit of history HTTP Cookies • Introduced in 1994 • Key-value storage • 4Kb of data per cookie • Data sent back to the server on every request • Browsers are not required to retain more than 300 cookies in total

  13. Web Storage Storing data on the client side (up to 5-10Mb) Example: • Local storage: per domain, storedforever • Session storage: per page/window, stored for a session • The API is the same for both types of storage 11+

  14. Indexed DB • Database of records and hierarchical objects • Indexed: providesfastsearch • Transactional: supports data integrity • Unlimited size, unlimited storage time varrequest=indexedDB.open("library"); request.onupgradeneeded=function() { // Thedatabasedidnotpreviouslyexist, socreateobjectstoresandindexes. vardb=request.result;varstore=db.createObjectStore("books",{keyPath:"isbn"}); vartitleIndex=store.createIndex("by_title","title",{unique:true}); varauthorIndex=store.createIndex("by_author","author"); // Populatewithinitialdata. store.put({title:"QuarryMemories",author:"Fred",isbn:123456}); store.put({title:"WaterBuffaloes",author:"Fred",isbn:234567}); store.put({title:"BedrockNights",author:"Barney",isbn:345678}); }; request.onsuccess=function() { db=request.result; }; (example from the W3C Editor’s Draft page)

  15. HTML5: Media • Extra video field attributes: • autoplay • controls • height / width • loop • preload • poster • playbackRate • Special JavaScript events: • play, pause, ended, playing, progress, … http://www.youtube.com/html5

  16. HTML5: Media Support HTML 4: HTML 5:

  17. Codecs Challenge • MPEG-4/H.264: Commonly used video compression format (not royalty-free) • OGG/Theora: Royalty-free codec not encumbered by any known patents • WebM: Multimedia format designed to provide a royalty-free, high-quality open video compression format for use with HTML5 video. Video codecs support in different browsers MPEG-4/H.264 Ogg/Theora WebM http://caniuse.com Works with an installed WebM codec No single combination of codecs works in all HTML5 browsers and this is not likely to change in the near future. To make your video watchable across all of these devices and platforms, you’re going to need to encode your video more than once.

  18. HTML5: Canvas Canvas is an API for 2D drawing <canvas/> Context selector Lines, shapes,path, … Pixels Save image(Data URL)

  19. Canvas example

  20. … a more advanced example https://sketch.io/sketchpad/

  21. HTML5: Scalable Vector Graphics (SVG) SVG is an XML-based format for describing 2D vector graphics SVG in HTML5:

  22. Canvas or SVG?

  23. Canvas + WebGL • WebGL is a JavaScript API for interactive 2D/3D graphics • Based on the OpenGL ES standard • Supported by most modern browsers without plug-ins Compatibility http://glslsandbox.com/

  24. HTML5 or Flash? https://en.wikipedia.org/wiki/Comparison_of_HTML5_and_Flash

  25. Geolocation • The geolocation API allows the user to provide their location to web applications if they so desire. For privacy reasons, the user is asked for permission to report location information. <script> var x = document.getElementById("demo"); functiongetLocation() {    if (navigator.geolocation) {navigator.geolocation.getCurrentPosition(showPosition);    } else {x.innerHTML = "Geolocationis not supported by this browser.";    }} functionshowPosition(position) {x.innerHTML = "Latitude: " + position.coords.latitude +     "<br>Longitude: " + position.coords.longitude; } </script>

  26. HTML5 Communication

  27. HTML5 and browser support Before using an HTML5 feature you must check whether it is supported • Use Modernizr • Small JS library that detects over 40 features • Easy to use • Doesn’t add missing features (but can help replacing it with a “polyfill”) “polyfill” is a JavaScript library that replicates the standard API for older browsers If (Modernizr.canvas) { // let’s draw } else { // no native canvas support available }

  28. Thank You! More information: Rostislav.Titov@cern.ch

More Related