HTML5 - JINR
advertisement
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>
HTML header
<title>School Announcement</title>
</head>
<body>
Heading
<h1>JINR/CERN School 2014</h1>
link
<p>JINR, <a href="http:\\www.cern.ch">CERN</a> and MEPhI are
organizing a school on grid and advanced information systems.</p>
Paragraph
<p class="topics">
The main topics of the school are:
<ul>
List
<li>NICA project</li>
<li>Advanced Information Systems</li>
<li>Introduction to the GRID technologies</li>
</ul>
</p>
</body>
</html>
CSS: Reminder
CSS = Cascading Style Sheets
<link rel="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}
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
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
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/
HTML5: Simplification of code
Markup version
HTML4
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0
Transitional//EN" http://www.w3.org/TR/xhtml1/DTD/xhtml1transitional.dtd>
HTML5
<!DOCTYPE html>
Metadata
HTML4
<meta http-equiv="content-type" content="text/html;
charset=UTF-8" />
HTML5
<meta charset=''utf-8''/>
HTML5: New form elements
HTML: Structure
No semantics in layout
<div id=“header”>
<div class=“post”>
<div
id=“sidebar”>
<div class=“post”>
<div id=“footer”>
HTML5: Semantic markup
<header”>
<section>
<header>
<nav>
<article>
<footer>
<header”>
<aside>
HTML5: Semantic elements example
<header>
<nav>
<aside>
<section>
<footer>
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
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
11+
Example:
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: 123456});
store.put({title: "Water Buffaloes", author: "Fred", isbn: 234567});
store.put({title: "Bedrock Nights", author: "Barney", isbn: 345678});
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
http://www.youtube.com/html5
Special JavaScript events:
play, pause, ended, playing, progress, …
HTML5: Media Support
HTML 4:
HTML 5:
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.
HTML5: Canvas
Canvas is an API for 2D drawing
<canvas/>
Context selector
Lines,
shapes,
path,
…
Pixels
Save image
(Data URL)
Canvas example
… a more advanced example
https://sketch.io/sketchpad/
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
http://glslsandbox.com/
HTML5 or Flash?
https://en.wikipedia.org/wiki/Comparison_of_HTML5_and_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.
<script>
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 +
"<br>Longitude: " + position.coords.longitude;
}
</script>
HTML5 Communication
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
}
Thank You!
More information:
Rostislav.Titov@cern.ch
30
