2 History of World-Wide Web and HTML  1989: WWW has been invented at CERN  1991: Official birthday of HTML

HTML: Reminder School Announcement JINR/CERN School 2014 JINR, CERN and MEPhI are organizing a school on grid and advanced information systems. The main topics of the school are: NICA project Advanced Information Systems Introduction to the GRID technologies Markup version HTML header Heading Paragraph link List

CSS: Reminder 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} CSS = Cascading Style Sheets

History of HTML Language Official birthday (20 elements) 1991 v CSS JavaScript and 4.0 (W3C Recommendation) 1997 XHTML 1999/2000 World is asynchronous (AJAX) …

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

HTML5: New Features in a nutshell  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 New tags added in HTML5 /ultimate-html5-cheatsheat/

HTML5: Simplification of code Markup version HTML4 HTML5 Metadata HTML4 HTML5

HTML5: New form elements

HTML: Structure  No semantics in layout

HTML5: Semantic markup

HTML5: Semantic elements example

Web Storage: a bit of history  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 HTTP Cookies

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

Indexed DB  Database of records and hierarchical objects  Indexed: provides fast search  Transactional: supports data integrity  Unlimited size, unlimited storage time var request = indexedDB.open("library"); request.onupgradeneeded = function() { // The database did not previously exist, so create object stores and indexes. var db = request.result; var store = db.createObjectStore("books", {keyPath: "isbn"}); var titleIndex = store.createIndex("by_title", "title", {unique: true}); var authorIndex = store.createIndex("by_author", "author"); // Populate with initial data. store.put({title: "Quarry Memories", author: "Fred", isbn: }); store.put({title: "Water Buffaloes", author: "Fred", isbn: }); store.put({title: "Bedrock Nights", author: "Barney", isbn: }); }; request.onsuccess = function() { db = request.result; }; (example from the W3C Editor’s Draft page)

HTML5: Media Extra video field attributes: autoplay controls height / width loop preload poster playbackRate Special JavaScript events: play, pause, ended, playing, progress, …

HTML5: Media Support HTML 4: HTML 5:

Codecs Challenge Ogg/Theora WebM MPEG-4/H.264 Video codecs support in different browsers Works with an installed WebM codec  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. 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.

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

Canvas example

… a more advanced example

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

Canvas or SVG?

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

HTML5 or Flash?

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. var x = document.getElementById("demo"); function getLocation() { if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else { x.innerHTML = "Geolocation is not supported by this browser."; } } function showPosition(position) { x.innerHTML = "Latitude: " + position.coords.latitude + " Longitude: " + position.coords.longitude; }

HTML5 Communication

HTML5 and browser support  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”) Before using an HTML5 feature you must check whether it is supported “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 }

Thank You! More information: 30