HTML5 - JINR

Download Report

Transcript HTML5 - JINR

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:
[email protected]
30