Documenti di Didattica
Documenti di Professioni
Documenti di Cultura
Introduction to HTML5
Gil Fink
© Copyright SELA software & Education Labs Ltd. | 14-18 Baruch Hirsch St Bnei Brak, 51202 Israel | www.selagroup.com
© Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel
www.sela.co.il
Agenda
What is HTML5?
The New Elements
HTML5 JavaScript APIs
CSS3
Q&A
Summary
What is HTML5?
HTML5 ~= HTML + CSS3 + JavaScript API
The future of the web
Still under development
A lot of features supported by modern browsers
Why to use HTML5?
Accessibility
Searchability
Interoperability
Many new
HTML elements and attributes
JavaScript APIs and improved capabilities
CSS capabilities
What’s Under The HTML5
Umbrella?
Demo: HTML5 Sites Examples
Structural Elements
No need for div elements all over the place
New ways to mean what you actually meant to
mean
HTML 4 HTML 5
Main Structural Elements
Element Description
Article Defines an article (for example within a section)
Footer Footer elements contain information about their containing
element: who wrote it, copyright, etc.
Header The page header shown on the page, not the same as <head>
Nav Collection of links to other pages
Section A part or chapter in a book, or essentially the content body of the
page
And More
Inline Semantic Elements
Element Description
Mark Defines marked text
Meter Represents a scalar gauge providing a measurement within a
known range, or a fractional value
Progress Represents the completion progress of a task
Output Represents the result of a calculation
Time Represents a specific moment in time
New Input Types
Types
Email
Url
Tel
Number
Range
Search
Color
Date pickers (date,
month, week, time,
datetime, datetime-
local)
New Attributes
Attribute Description
Min, Max Accepted min and max values
Placeholder A short hint intended to aid the user with data entry
<script type="text/javascript">
var example = document.getElementById("myCanvas");
var context = example.getContext("2d");
context.fillStyle = "rgb(255,0,0)";
context.fillRect(30, 30, 50, 50);
</script>
Demo: Canvas
Scalable Vector Graphics
Create and draw 2D vector graphics
Vector images are composed of shapes instead of
pixels
Based on the SVG 1.1 2nd Edition Full specification
Support for:
Full DOM access to SVG elements
Document structure, scripting, styling, paths, shapes,
colors, transforms, gradients, patterns, masking,
clipping, markers, linking and views
2D Vector Graphics
<svg width="400" height="200" xmlns="http://www.w3.org/2000/svg">
<rect fill="red" x="20" y="20" width="100" height="75" />
<rect fill="blue" x="50" y="50" width="100" height="75" />
</svg>
Demo: SVG
2
Differences Between Canvas and SVG
Geolocation
Many applications are based on user location
Finding nearby restaurants, fuel stations, etc.
Other applications want to gather information
about user locations for future use
HTML5 introduces a new Geolocation
specification
The user must agree to share his or her location
The browser will get the user’s coordinates and other
location information
Geolocation API
The Geolocation API includes the following main
functions:
getCurrentPosition(success, error, options)
watchId = watchPosition(success, error, options)
clearWatch(watchId)
navigator.geolocation.getCurrentPosition(successCallback, errorCallback,
{ enableHighAccuracy: true,
maximumAge: 600000,
timeout: 0 });
Demo: Geolocation
Web Workers
Background workers that run scripts in parallel
with their main page
Independent of any user interface scripts
Allow thread-like operations that include
message-passing mechanisms for coordination
Expected to
Be long-lived
Have a high start-up performance cost
Have high per-instance memory cost
Initializing a Web Worker
<p>Result: <output id="result"></output></p>
<script>
var worker = new Worker('worker.js');
worker.onmessage = function (event) {
document.getElementById('result').
textContent = event.data;
};
</script>
Web Worker Script
What appears in the worker.js from the
previous slide
Use the postMessage function in order to send
messages to the UI thread
var n = 1;
while (n < 10000) {
postMessage(n);
n += 1;
}
Demo: Web Workers
Web Sockets
Bidirectional communication channel, over a
single TCP socket
Don’t allow raw access to the underlying
network
Uses the new WebSocket JavaScript object
Can replace long-polling and commet
HTML5Rocks - http://www.html5rocks.com
HTML5 Landscape Overview -
http://dret.typepad.com/dretblog/html5-api-
overview.html
My Website – http://www.gilfink.net
Follow me on Twitter – @gilfink
Thank You
Gil Fink
Senior Architect
gilf@sela.co.il
@gilfink
http://www.gilfink.net