HTML5 - A Whirlwind tour
30
-
Upload
lohith-gn -
Category
Technology
-
view
556 -
download
0
description
Presentatiuon
Transcript of HTML5 - A Whirlwind tour
"HTML5” – More than just HTML5
Lohith G N
About Me…
- Technical Evangelist, Telerik (South India)
- Microsoft MVP – ASP.NET/IIS
- Bangalore DotNet User Group Member
- Decade old in the industry
What is “HTML5”?
HTML5 is... the future of the web still under development a huge spec, and testing isn’t binary
HTML5 is not ... “How To Meet Ladies” version 5
(Credit: @hackatac) Just a marketing message
The “map” of HTML5
W3C
HTML
HTM
L5C
anvas 2
D C
onte
xt
Micro
data
HTM
L+R
DFa
HTM
L5 M
arku
pH
TM
L5 D
iff fro
m H
TM
L4Po
lyglo
t Marku
pTe
xt a
ltern
ativ
es
CSS
CS
S S
nap
shot 2
007
CS
S N
am
esp
ace
sC
SS
Paged M
edia
CS
S P
rint P
rofile
CS
S V
alu
es a
nd
Un
its
CS
S C
asca
din
g a
nd
In
herita
nce
CS
S Te
xt
CS
S W
riting M
od
es
CS
S Lin
e G
ridC
SS
Rub
y
CS
S G
en
era
ted
Con
ten
t for Pa
ged
M
ed
ia
CS
S B
ack
gro
und
s and
B
ord
ers
CS
S Fo
nts
CS
S B
asic B
ox M
od
el
CS
S M
ulti-co
lum
n La
yout
CS
S Te
mp
late
Layou
tC
SS
Med
ia Q
uerie
sC
SS
Sp
eech
CS
S C
olo
rC
SS
Basic U
ser In
terfa
ce
CS
S S
cop
ing
CS
S G
rid Po
sition
ing
CS
S Fle
xib
le B
ox La
you
tC
SS
Imag
e V
alu
es
CS
S 2
D Tra
nsfo
rmatio
ns
CS
S 3
D Tra
nsfo
rmatio
ns
CS
S Tra
nsitio
ns
CS
S A
nim
atio
ns
Web Apps
CO
RS
Ele
men
t Traversa
lFile
API
Index D
B
Pro
gra
mm
ab
le H
TTP C
ach
ing
an
d
Serv
ing
Pro
gre
ss Even
tsS
ele
ctors A
PI
Sele
ctors A
PI L2
Serv
er-S
ent E
vents
Unifo
rm M
essa
gin
g
Policy
Web
DO
M C
ore
Web
SQ
L Data
base
Web
IDL
Web
Socke
ts API
Web
Sto
rag
eW
eb
Worke
rsX
mlH
ttpR
eq
uest
Xm
lHttp
Req
uest L2
DO
M L1
DO
M L2
Core
DO
M L2
Vie
ws
DO
M L2
Even
tsD
OM
L2 S
tyle
DO
M L2
Traversa
l an
d
Rang
e
DO
M L2
HTM
LD
OM
L3 C
ore
DO
M L3
Even
tsD
OM
L3 Lo
ad
an
d S
ave
DO
M L3
Valid
atio
nD
OM
L3 X
Path
DO
M L3
Vie
ws a
nd
Form
attin
g
DO
M L3
Abstra
ct S
chem
as
SVG
Docu
men
t Stru
cture
Basic S
hapes
Path
sTe
xt
Tran
sform
sPain
ting, Fillin
g, C
olo
rS
criptin
gS
tylin
gG
radie
nts a
nd P
atte
rns
SM
ILFo
nts
Filters
Geolo
catio
nG
eolo
catio
n A
PI
ECMA
ECMA Script
262
EC
MA
Scrip
t 26
2
Specification lifecycle
Last call
Call to impleme
nt
First Public Working Draft
Working Draft
Candidate Recommenda
tion
Proposed Recommenda
tion
Recommendation
W3C HTML5 Specification
~1200 print pages Issue Tracker: ~37 open Bug Tracker: ~208 open Mailing list: ~4000
emails/month
Link: www.w3.org/TR/html5
The map of “HTML5”W3C
HTML
HTM
L5C
an
vas 2
D C
on
text
Micro
data
HTM
L+R
DFa
HTM
L5 M
arku
pH
TM
L5 D
iff fro
m H
TM
L4Po
lyg
lot M
arku
pTe
xt a
ltern
ativ
es
CSS
CS
S S
nap
shot 2
00
7C
SS
Nam
esp
ace
sC
SS
Pag
ed
Med
iaC
SS
Print Pro
file
CS
S V
alu
es a
nd
Un
its
CS
S C
asca
din
g a
nd
In
herita
nce
CS
S Te
xt
CS
S W
riting
Mod
es
CS
S Lin
e G
ridC
SS
Ru
by
CSS G
enera
ted C
onte
nt fo
r Paged
Media
CS
S B
ackg
rou
nd
s an
d
Bord
ers
CS
S Fo
nts
CS
S B
asic B
ox M
od
el
CS
S M
ulti-co
lum
n La
you
tC
SS
Tem
pla
te La
you
tC
SS
Med
ia Q
uerie
sC
SS
Sp
eech
CS
S C
olo
rC
SS
Basic U
ser In
terfa
ce
CS
S S
cop
ing
CS
S G
rid Po
sition
ing
CS
S Fle
xib
le B
ox La
you
tC
SS
Imag
e V
alu
es
CS
S 2
D Tra
nsfo
rmatio
ns
CS
S 3
D Tra
nsfo
rmatio
ns
CS
S Tra
nsitio
ns
CS
S A
nim
atio
ns
Web Apps
CO
RS
Ele
men
t Traversa
lFile
API
Ind
ex D
B
Progra
mm
able
HTTP C
ach
ing a
nd
Serv
ing
Prog
ress E
ven
tsS
ele
ctors A
PI
Sele
ctors A
PI L2
Serv
er-S
en
t Even
ts
Un
iform
Messa
gin
g
Policy
Web
DO
M C
ore
Web
SQ
L Data
base
Web
IDL
Web
Socke
ts API
Web
Sto
rag
eW
eb
Worke
rsX
mlH
ttpR
eq
uest
Xm
lHttp
Req
uest L2
DO
M L1
DO
M L2
Core
DO
M L2
Vie
ws
DO
M L2
Even
tsD
OM
L2 S
tyle
DO
M L2
Traversa
l an
d
Ran
ge
DO
M L2
HTM
LD
OM
L3 C
ore
DO
M L3
Even
tsD
OM
L3 Lo
ad
an
d S
ave
DO
M L3
Valid
atio
nD
OM
L3 X
Path
DO
M L3
Vie
ws a
nd
Fo
rmattin
g
DO
M L3
Ab
stract
Sch
em
as
SVG
Docu
men
t Stru
cture
Basic S
hap
es
Path
sTe
xt
Tran
sform
sPain
ting
, Filling
, Colo
rS
criptin
gS
tylin
gG
rad
ien
ts an
d P
atte
rns
SM
ILFo
nts
Filters
Geolo
catio
nG
eolo
catio
n A
PI
ECMA
ECMA Script
262
EC
MA
Scrip
t 26
2
First Public Working Draft
Working Draft Last Call
Candidate Recommenda
tion
Recommendation
A whirlwind tour of “HTML5”
<!DOCTYPE..
From: HTML 4.01 Strict/Transitional/Frameset
XHTML 1.0 Strict/Transitional/Frameset
To HTML5
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<!DOCTYPE html>
<video> Support for the HTML5 <video> element
MPEG-4/H.264, can be composited with anything else
HTML content, images, SVG graphics
Hardware accelerated, GPU-based decoding
Supports fallback to different formats (mp4, webm) as well as Flash/Silverlight
<video id="myVideo" controls><source src="videos/video.mp4" type="video/mp4"/>
<!–- insert sorry message here or fall back to SL/Flash -->
<object type="application/x-silverlight-2"><param name="source" value="player.xap">
</object></video>
<audio> Add audio content to page with
native playback, events & controls Relies on browser features Supports fallback to different
formats (mp3, aac)
<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>
SVG Basics
• Scriptable, extensible, easily editable
• Easy to apply CSS styles
XML-based
• Resizable without degradation• Vector images are composed of
shapes instead of pixels
Vector graphics
• Fast download
Compression
• It is just XML!
Easy debugging
Scalable Vector Graphics (SVG)
Support for: Full DOM access to SVG elements
Document structure, scripting, styling, paths, shapes, colors, transforms, gradients, patterns, masking, clipping, markers, linking and views
<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
16
<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>
Canvas block element, allows drawing 2d graphics
using JavaScript Methods for drawing include: paths, boxes,
circles, text and rasterized images
Demo
SVG or Canvas
Characteristic SVG Canvas
When to use Highly detailed drawing, charts
Programmatic rendering, games
Drawing Mode By Runtime By Application
DOM Support Each SVG element part of DOM
<CANVAS> part of the DOM
Animation Manipulating objects in the DOM
Using direct scripting in canvas
GPU acceleration
Yes Yes
Performance Best for larger surface and/or small # of objects
Best for smaller surface and/or large # of objects
Modification Tag, Script & CSS Script only
18
GeoLocation Let websites use your location information to
improve their services Requires users consent
Navigator.geolocation.getCurrentPosition();
Navigator.geolocation.watchPosition();
Resolution via IP reverse lookup / Wi-Fi triangulation
function getLocation() { if (navigator.getlocation != undefined) { navigator.getlocation.getCurrentPosition(callBack); }}
function callBack(position) { var accuracy = position.coords[“accuracy”]; //in meters var latitude = position.coords[“latitude”]; var longitude = position.coords[“longitude”];}
Demo
CSS3 2nd largest spec in “HTML5”
Major revision to CSS 2.1
CSS 3 Borders & Colors
Backgrounds & Shadows
WOFF
Media queries
Selectors
Transforms
CSS3 Borders CSS3 Borders
Rounded corners with the border-radius property
div.top { border-radius: 152px 304px 228px 152px; border-style: double; border-width: 42px; padding: 12px;}
CSS3 Colors CSS3 Colors & Transparency
Alpha color with rgba() and hsla() color functions
Transparency control with the opacity property
Full support for CSS3 color keywords
div.top { background-color: rgba(155,0,155,0.5)}div.bottom { background-color: hsla(0,100%,50%,0.2);}
CSS3 Shadows CSS3 Shadows
box-shadow property on block elements
Inset & Multiple shadows
div{…box-shadow: 20px 20px 20px hsla(0,100%,50%,0.2);
}
div{…box-shadow: 20px 20px 20px hsla(0,100%,50%,0.2), -20px -20px 20px hsla(180,50%,50%,0.8);
}
Demo
CSS3 Backgrounds CSS3 Backgrounds
Multiple background images per element
Comma separated values
div{background-image: url("images/1.jpg"), url("images/2.jpg"), url("images/3.jpg");background-position: 90px 90px, 60px 60px, 30px 30px;
}
Demo
WOFF Fonts & @font-face No longer limited to the “web safe” font list!
WOFFs cannot be used outside of page context
Web Open Font Format allows you to package and deliver fonts as needed Designed for web use with the @font-face declaration
A simple repackaging of OpenType or TrueType font data
Source from WOFF Font Subscription Services
<style type="text/css"> @font-face { font-family:MyFontName; src: url('FontFile.woff'); } </style>
<div style="font: 24pt MyFontName, sans-serif;"> This will render using MyFontName in FontFile.woff</div>
Demo
CSS3 Media Queries Selectively style page based on properties of
the display media
<link href=“mobile.css" rel="stylesheet" media="screen and (max-width:480px)" type="text/css"/>
<link href=“netbook.css" rel="stylesheet" media="screen and (min-width:481px) and (max- width: 1024px)" type="text/css" />
<link href=“laptop.css" rel="stylesheet" media="screen and (min-width:1025px)" type="text/css" />
Demo
CSS Selectors Dynamic Styling
Style elements based on parameters such as: Pattern matching: rounded borders for all jpg
images
Element location: 1st paragraph
Many kinds of selectors: Type selectors: all H1 elements
Attribute selectors: all autoplay videos
Demo
27
CSS3 2D Transforms CSS3 2D Transforms
Matrix
Translate
Scale
Rotate
Skew
div { -ms-transform: scale(2, 2) rotate(30deg);} De
mo
DEMO
Turning things aroundBringing it all together
“HTML5” What we saw
<Audio>, <Video>, SVG, <Canvas>, Geolocation, CSS
What we didn’t get to
W3C
HTML
M
icrod
ata
HTM
L+R
DFa
Poly
glo
t M
arku
p
Text
alte
rnativ
es
CSS
CS
S S
nap
shot
20
07
CS
S
Nam
esp
ace
s
CS
S Pa
ged
M
ed
ia
CS
S Prin
t Pro
file
CS
S V
alu
es
an
d U
nits
CS
S
Casca
din
g
an
d
Inh
erita
nce
CS
S Te
xt
CS
S W
riting
M
od
es
CS
S Lin
e G
ridC
SS
Ru
by
CSS G
enera
ted
Conte
nt fo
r Paged
Media
C
SS
Fon
tsC
SS
Basic B
ox
Mod
el
CS
S M
ulti-
colu
mn
La
you
t
CS
S Te
mp
late
La
you
t
CS
S S
peech
C
SS
Basic
Use
r Inte
rface
C
SS
Sco
pin
gC
SS
Grid
Po
sition
ing
CS
S Fle
xib
le
Box
Layou
t
CS
S Im
ag
e
Valu
es
CS
S 3
D
Tran
sform
atio
ns
CS
S
Tran
sition
s
CS
S
An
imatio
ns
Web Apps
CO
RS
Ele
men
t Tra
versa
lFile
API
Ind
ex D
BPro
gra
mm
able
HTTP
Cach
ing a
nd S
erv
ing
Prog
ress
Even
tsS
ele
ctors A
PI
Sele
ctors A
PI
L2
Serv
er-S
en
t E
ven
ts
Un
iform
M
essa
gin
g
Policy
Web
DO
M
Core
Web
SQ
L D
ata
base
Web
IDL
Web
Socke
ts A
PI
Web
Sto
rag
eW
eb
Worke
rsX
mlH
ttpR
eq
uest
Xm
lHttp
Req
uest L2
DO
M L1
DO
M L2
Core
DO
M L2
Vie
ws
DO
M L2
E
ven
tsD
OM
L2 S
tyle
DO
M L2
Tra
versa
l an
d
Ran
ge
DO
M L2
HTM
LD
OM
L3 C
ore
DO
M L3
E
ven
ts
DO
M L3
Load
an
d S
ave
DO
M L3
Valid
atio
nD
OM
L3 X
Path
DO
M L3
Vie
ws
an
d
Form
attin
g
DO
M L3
A
bstra
ct S
chem
as
SVG
Te
xt
Scrip
ting
Sty
ling
Fo
nts
Filters
Geolo
cati
on
ECMA
ECMA Script 262
EC
MA
Scrip
t 2
62
Resources www.w3c.org
www.beautyoftheweb.in
www.ietestdrive.com
www.html5labs.com
