congratulations! you are part of a global community of thousands of web developers who attend web...
TRANSCRIPT
Congratulations! You are part of a global community of thousands of web developers who attend Web Camps to keep their web development skills up-to-date Web Camps are run all over the world in 6 continents, 30 countries Join the community!
Facebook Fan Page (search for Web Camps)Follow @Webcamps on Twitter
Find out more about events here: www.webcamps.ms
You are a Web Camper!
HTML5:How about today?Katrien De Graeve@katriendg
What is HTML5?HTML5 Semantic Markup elementsCSS3Video and AudioCanvas and SVGECMAScript 262General Guidelines & Resources
Agenda
HTML5 is...the future of the webnot just a marketing messagestill under developmenthuge, and testing isn’t binaryneeds to be done the right way
What is 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
itsC
SS
Casca
din
g a
nd
Inherita
nce
CS
S Te
xt
CS
S W
riting M
od
es
CS
S Lin
e G
ridC
SS
Rub
yC
SS
Gen
era
ted
Con
ten
t for Pa
ged
Med
iaC
SS
Back
gro
und
s and
Bord
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
BPro
gra
mm
ab
le H
TTP C
ach
ing
an
d S
erv
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 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 Fo
rmattin
gD
OM
L3 A
bstra
ct Sch
em
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
Map of “HTML5”
DoctypeNew document structureNew semantic elements
section, nav, article, aside, hgroup, header, footer, figure, figcaption, ...<video>, <audio>...
The basics – HTML5 Markup
DEMONew HTML5 Markup
HTML5 shim http://remysharp.com/2009/01/07/html5-enabling-script/ Use reset CSS HTML 5 Intellisense for Visual Studio 2010 and 2008 (last update April 2010):http://visualstudiogallery.msdn.microsoft.com/en-us/d771cbc8-d60a-40b0-a1d8-f19fc393127d Rey Bango’s Visual Studio HTML5 Web and Page templates: http://blog.reybango.com/2010/09/21/how-to-create-html5-website-and-page-templates-for-visual-studio-2010/
What & How to use Today?
Colors & opacityBordes & shadowsFontsDynamic styling
SelectorsMedia queriesNamespaces
CSS3
DEMOCSS3
ModernizrMedia Queries@font-face with fallback formats (non WOFF)http://www.fontsquirrel.com/ (@font-face kit)
What & How to use Today?
.target{ -moz-border-radius: 20px; -webkit-border-radius: 20px; border-radius: 20px;}
Fallbacks with CSS
<video><audio>Containers & Codecs
H.264 WebM
Fallbacks
HTML5 Video & Audio
DEMOHTML5 Video
Fallback mechanism with Silverlight or Flash, or download video fileUse fallback for older browsersCheck codecs & containers usage
What & How to use Today?
CanvasSVG 1.1Basic shapes
PathsTextTransformsPaintingFilling, ColorScriptingStylingGradientsPatterns
Canvas & SVG
DEMOCanvas & SVG
Fallback to Flash or SilverlightFallback to images in some casesSome libraries out there (some Silverlight plugins, Raphael JavaScript library etc)
Canvas/SVG: What & How to use Today?
Native JSONNew Array Methods
indexOf, forEach, every, map
Enhanced Object Modelcreate, defineProperty, getPrototypeOf
Computational Methodsstring.trim, tolSOString, data.parse, date.now, bind
ECMA Script 262
DEMOECMAScript 5
jQuery: good framework to support multiple browsersBack-porting of new functions.JSON native support fallback to libraries on older browsers (for example use shim http://json.org/json2.js)
What & How to use Today?
GENERAL GUIDELINESUsing HTML5 Today:
What’s Generally Safe To Use?
HTML5Doc TypeSemantic ElementsAudio & VideoCanvasSelection APIsContent EditableDOM StorageAjax NavigationCross Document Messaging
SVG
Document Object ModelCore - Level 2 & 3Events – Level 2 & 3
CSS32D TransformsBackgrounds & BordersFontsMedia QueriesSelectorsColors and Opacity
Use Feature Detection vs Browser Detection
List of browsers keeps growingMany different versionsBrowser version upgrade frequently
Using Shims and Poly Fills
General guidelines
// Target Legacy Code Only<!-- IE lte 7]>
// place legacy code here
<[endif]-->
Browser Detection For Legacy Isolation
if (Modernizr.localstorage) { // Yay – use local storage persistent } else { // Boo – Resort to cookies or a polyfill }
if (Modernizr.svg) { // Yay - SVG is supported natively} else { // Boo – Resort to a fallback or polyfill}
Modernizr with JavaScript
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
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
CS
S B
ackg
rou
nd
s an
d B
ord
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
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
SVGD
ocu
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
The map of “HTML5”
First Public Working Draft
Working Draft Last Call
Candidate Recommenda
tion
Recommendation
RESOURCES
Internet Explorer 9 Beta Guide for Developershttp://msdn.microsoft.com/en-us/ie/ff468705HTML5 resourceshttp://msdn.microsoft.com/nl-be/scriptjunkieReset CSS: http://meyerweb.com/eric/tools/css/reset/ Great list of PolyFills: http://bit.ly/ddLS2d About PolyFills: http://blog.reybango.com/2010/10/11/how-polyfills-fill-in-the-gaps-to-make-html5-and-css3-usable-today/
X-icon editor: http://www.xiconeditor.com/ W3C : www.w3.org
Resources
http://html5labs.interoperabilitybridges.com/
HTML5 Labs – Prototype implementations
http://www.microsoft.com/expression/products/Web_Overview.aspx
Tool: Expression Web SuperPreview
Browser ModeChanges the rendering engine only
Great list of PolyFillsChanges the rendering engine and user agent string
Tools: F12 Developer ToolsTesting from Internet Explorer 9 to 7
Adobe Illustrator to Canvas exporter, by MIX Online teamhttp://www.visitmix.com/labs/ai2canvas/
AI > Canvas Plugin
http://visualstudiogallery.msdn.microsoft.com
PAGE 37
Tools: Visual Studio HTML5 & SVG Extensions
THANK YOU!