html5 more than just html5 v final
DESCRIPTION
Introduction to HTML5TRANSCRIPT
"HTML5” – More than just HTML5
Lohith G N
About Me…
- Mysorian, Working in Bangalore
- B.E. – I & P, 10 years of experience
- Microsoft MVP 2K11 – ASP.NET/IIS
- Telerik Insider – Speakers sponsored by Telerik
- Bangalore DotNet User Group Member
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• Industry-standard MPEG-4/H.264 video• Video can be composited with anything else on the page• 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> De
mo
<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•A block element that allows developers to draw 2d graphics using JavaScript•Methods for drawing include: paths, boxes, circles, text and rasterized images
Demo
SVG or CanvasCharacteristic 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 triangulationfunction 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
24
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
25
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 toW3C
HTML
M
icrod
ata
HTM
L+R
DFa
Po
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
itsC
SS
Casca
din
g a
nd
Inh
erita
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 M
edia
C
SS
Fon
tsC
SS
Basic B
ox M
od
el
CS
S M
ulti-co
lum
n La
you
tC
SS
Tem
pla
te La
you
t
CS
S S
peech
C
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
C
SS
3D
Tran
sform
atio
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
BPro
gra
mm
able
HTTP C
ach
ing a
nd S
erv
ing
Prog
ress E
ven
tsS
ele
ctors A
PI
Sele
ctors A
PI L2
Serv
er-S
en
t Even
tsU
nifo
rm M
essa
gin
g Po
licyW
eb
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 R
an
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
Form
attin
gD
OM
L3 A
bstra
ct Sch
em
as
SVG
Te
xt
Scrip
ting
Sty
ling
Fo
nts
Filters
Geolo
catio
n
ECMA
ECMA Script
262
EC
MA
Scrip
t 26
2
QUIZ
• www.w3c.org• www.beautyoftheweb.in • www.ietestdrive.com• www.html5labs.com
Resources