Introduction to HTML5
gilfink
16,561 views
41 slides
Apr 01, 2014
Slide 1 of 41
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
About This Presentation
My DevWeek 2014 session which introduces HTML5.
Slide Content
© Copyright SELA software & Education Labs Ltd. | 14-18 Baruch Hirsch St Bnei Brak, 51202 Israel | www.selagroup.com
SELA DEVELOPER PRACTICE
December 20-25, 2013
© Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel
www.sela.co.il
Gil Fink
Introduction to HTML5
SELA DEVELOPER PRACTICE
December 20-25, 2013
© Copyright SELA software & Education Labs Ltd. 14-18 Baruch Hirsch St.Bnei Brak 51202 Israel
www.sela.co.il
Gil Fink
Introduction to HTML5
Agenda
What is HTML5?
The New Elements
HTML5 JavaScript APIs
CSS3
Q&A
Summary
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
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
Accessibility
Searchability
Interoperability
Many new
HTML elements and attributes
JavaScript APIs and improved capabilities
CSS capabilities
What’s Under The HTML5
Umbrella?
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
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
And More
Description Element
Defines an article (for example within a section) Article
Footer elements contain information about their containing
element: who wrote it, copyright, etc.
Footer
The page header shown on the page, not the same as <head> Header
Collection of links to other pages Nav
A part or chapter in a book, or essentially the content body of the
page
Section
And More
Description Element
Defines an article (for example within a section) Article
Footer elements contain information about their containing
element: who wrote it, copyright, etc.
Footer
The page header shown on the page, not the same as <head> Header
Collection of links to other pages Nav
A part or chapter in a book, or essentially the content body of the
page
Section
Inline Semantic Elements
Description Element
Defines marked text Mark
Represents a scalar gauge providing a measurement within a
known range, or a fractional value
Meter
Represents the completion progress of a task Progress
Represents the result of a calculation Output
Represents a specific moment in time Time
Description Element
Defines marked text Mark
Represents a scalar gauge providing a measurement within a
known range, or a fractional value
Meter
Represents the completion progress of a task Progress
Represents the result of a calculation Output
Represents a specific moment in time Time
New Input Types
Types
Email
Url
Tel
Number
Range
Search
Color
Date pickers (date,
month, week, time,
datetime, datetime-
local)
Types
Url
Tel
Number
Range
Search
Color
Date pickers (date,
month, week, time,
datetime, datetime-
local)
New Attributes
Description Attribute
Accepted min and max values Min, Max
Related to file input type, allows selection of multiple files Multiple
Specifies a pattern used to validate an input field Pattern
A short hint intended to aid the user with data entry Placeholder
Boolean attribute to indicate that the element is required Required
Limits allowed values, thus indicating the granularity required Step
And many more
Description Attribute
Accepted min and max values Min, Max
Related to file input type, allows selection of multiple files Multiple
Specifies a pattern used to validate an input field Pattern
A short hint intended to aid the user with data entry Placeholder
Boolean attribute to indicate that the element is required Required
Limits allowed values, thus indicating the granularity required Step
And many more
Demo: HTML5 New Elements
HTML5 <video> Element
Enables to play video natively in the browser
Video can be composited with anything else on the page
HTML content, images, SVG graphics
Include standard codecs like: h.264, ogg and webm
Hardware accelerated, GPU-based decoding in most of the browsers
<video src="video.mp4" id="videoTag" width="640px" height="360px">
<!-- Only shown when browser doesn’t support video -->
<!-- You Could Embed Flash or Silverlight Video Here -->
</video>
Enables to play video natively in the browser
Video can be composited with anything else on the page
HTML content, images, SVG graphics
Include standard codecs like: h.264, ogg and webm
Hardware accelerated, GPU-based decoding in most of the browsers
<video src="video.mp4" id="videoTag" width="640px" height="360px">
<!-- Only shown when browser doesn’t support video -->
<!-- You Could Embed Flash or Silverlight Video Here -->
</video>
HTML5 <audio> Element
Enables to play audio natively in the browser
Industry-standard MP3 and AAC audio
Fully scriptable via the DOM
<audio src="audio.mp3" id="audioTag" autoplay controls>
<!-- Only shown when browser doesn’t support audio -->
<!-- You could embed Flash or Silverlight audio here -->
</audio>
Enables to play audio natively in the browser
Industry-standard MP3 and AAC audio
Fully scriptable via the DOM
<audio src="audio.mp3" id="audioTag" autoplay controls>
<!-- Only shown when browser doesn’t support audio -->
<!-- You could embed Flash or Silverlight audio here -->
</audio>
Demo: Video and Audio Elements
HTML5 Canvas
A block element that allows developers to draw 2D or
3D graphics using JavaScript
For 3D you use WebGL API
<canvas id="myCanvas" width="200" height="200">
Your browser doesn’t support Canvas, sorry.
</canvas>
<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>
A block element that allows developers to draw 2D or
3D graphics using JavaScript
For 3D you use WebGL API
<canvas id="myCanvas" width="200" height="200">
Your browser doesn’t support Canvas, sorry.
</canvas>
<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 2
nd
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
Create and draw 2D vector graphics
Vector images are composed of shapes instead of
pixels
Based on the SVG 1.1 2
nd
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>
<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
0
2
0
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
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 });
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
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>
<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;
}
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
The Web Sockets protocol RFC:
http://tools.ietf.org/html/rfc6455
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
The Web Sockets protocol RFC:
http://tools.ietf.org/html/rfc6455
Web Sockets – JavaScript API
Use the WebSocket object’s built-in events:
onopen: fired when a web socket has opened
onmessage: fired when a message has been received
onclose: fired when a web socket has been closed
socket.onopen = function() {
console.log(‘Socket Status: ‘ + socket.readyState + ‘ (open)’);
}
var socket = new WebSocket('ws://someURL');
Create a WebSocket object using a URL and a list of
protocols
URL must direct to a Web Sockets server endpoint (ws://)
Use the WebSocket object’s built-in events:
onopen: fired when a web socket has opened
onmessage: fired when a message has been received
onclose: fired when a web socket has been closed
socket.onopen = function() {
console.log(‘Socket Status: ‘ + socket.readyState + ‘ (open)’);
}
var socket = new WebSocket('ws://someURL');
Create a WebSocket object using a URL and a list of
protocols
URL must direct to a Web Sockets server endpoint (ws://)
Demo: Web Sockets
Other HTML5 APIs
HTML5 includes other APIs that you can
consider.
For example:
Web Notifications – display simple notifications to
the user
File API – exposes sandboxed sections of a user’s local
file system to web applications
IndexedDB – an index database on client-side
And many more
HTML5 includes other APIs that you can
consider.
For example:
Web Notifications – display simple notifications to
the user
File API – exposes sandboxed sections of a user’s local
file system to web applications
IndexedDB – an index database on client-side
And many more
CSS3 - Media Queries
<link href="DoNotDisplay.css" rel="stylesheet"
media="screen and (max-width:1199px)" type=“text/css" />
<link href="DoNotDisplay.css" rel="stylesheet"
media="screen and (min-width:1301px)" type="text/css" />
<link href="Presentation.css" rel="stylesheet"
media="screen and (min-width:1200px) and (max-width: 1300px)"
type="text/css" />
<link href="DoNotDisplay.css" rel="stylesheet"
media="screen and (max-width:1199px)" type=“text/css" />
<link href="DoNotDisplay.css" rel="stylesheet"
media="screen and (min-width:1301px)" type="text/css" />
<link href="Presentation.css" rel="stylesheet"
media="screen and (min-width:1200px) and (max-width: 1300px)"
type="text/css" />
CSS3 Colors & Opacity
CSS3 Color
Alpha color with rgba() and hsla() color functions
Transparency control with the opacity property
CSS3 Backgrounds and Borders
Round corners with the border-radius property
Multiple background images per element
box-shadow property on block elements
CSS3 Color
Alpha color with rgba() and hsla() color functions
Transparency control with the opacity property
CSS3 Backgrounds and Borders
Round corners with the border-radius property
Multiple background images per element
box-shadow property on block elements
Demo: CSS3 Enhancements
Other CSS3 Enhancements
CSS3 include much more:
CSS3 Animations
CSS3 Transformations
CSS3 Fonts
CSS3 Border and Background
CSS3 layouts:
Flexbox
Templating
Multi-Columns
More
CSS3 include much more:
CSS3 Animations
CSS3 Transformations
CSS3 Fonts
CSS3 Border and Background
CSS3 layouts:
Flexbox
Templating
Multi-Columns
More
HTML5 Integration Strategies
HTML5 is HTML
you’re already most of the way there
Most visitors’ browsers can handle most things
Many strategies can be used to implement:
Lowest common denominator
Vertical slices – target a specific HTML5 functionality
JavaScript ‘Polyfills’ can be used to patch the holes
Using fallbacks strategies
HTML5 is HTML
you’re already most of the way there
Most visitors’ browsers can handle most things
Many strategies can be used to implement:
Lowest common denominator
Vertical slices – target a specific HTML5 functionality
JavaScript ‘Polyfills’ can be used to patch the holes
Using fallbacks strategies
Questions?
HTML5 Bottom Line
Develop once!
Multiple devices reach Multiple platforms reach
Develop once!
Multiple devices reach Multiple platforms reach
Resources
Session slide deck and demos –
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
Session slide deck and demos –
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
Tags
Categories
GeneralDownload
Download Slideshow Get the original presentation fileQuick Actions
Statistics
- Views 16,561
- Slides 41
- Favorites 10
- Age 4266 days
Related Slideshows
22
Pray For The Peace Of Jerusalem and You Will Prosper
RodolfoMoralesMarcuc
32 views
26
Don_t_Waste_Your_Life_God.....powerpoint
chalobrido8
35 views
31
VILLASUR_FACTORS_TO_CONSIDER_IN_PLATING_SALAD_10-13.pdf
JaiJai148317
32 views
14
Fertility awareness methods for women in the society
Isaiah47
30 views
35
Chapter 5 Arithmetic Functions Computer Organisation and Architecture
RitikSharma297999
29 views
5
syakira bhasa inggris (1) (1).pptx.......
ourcommunity56
30 views