Embed Size (px)
Citation preview
HTML5, part I – markupŠtěpán Bechynský, @stepanb
Developer Evangelist
Microsoft, Czech Republic
57% of time on a PC is spent in the web browser
What is HTML5?
HTML5 is future of the web development
HTML5 is future platform for some consumer applications
HTML5 is future platform for connected devices (smartphones, tablets)
Web Performance Working Group
HTML5 is multiplatform
HTML5 is markup or set of more technologies
HTML5 is not final HTML5 Markup Last Call started on 24th of May 2011 http://lists.w3.org/Archives/Public/public-html/2011May/0162.html
History
1998 – W3C, future is XML, HTML 4.01 is last version XHTML 2.0 Problems with backward compatibility
Web Hypertext Application Technology Working Group Individuals from Opera, Apple, Google Unhappy with XHTML Web Forms 2.0 Web Applications 1.0
2006 – W3C, XHTML: We were overoptimistic…
2009 – W3C stopped working on XHTML and move resources to HTML5
Who is working on HTML5?
W3C
ECMA
WHATWG
Khronos
W3C HTML Working Group Head
Sam Ruby (IBM) Paul Cotton (Microsoft) Maciej Stachowiak (Apple)
40 companies, 411 coworkers, 280 experts
8 publications HTML5 HTML Canvas 2D Context HTML: The Markup HTML5 diffs from HTML4 Polyglot Markup
Recommendations are for free
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 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
ECMA
ECMA Script
262
EC
MA
Scrip
t 26
2
Status of HTML5
First Public
Working Draft
Working Draft Last Call
Candidate
Recommendation
Recommendation
HTML5 is not finished!
Web Browser vendors use vendor prefixes for unstable parts of specification
CSS -moz-* -webkit-* -ms-* -o-*
Javascript ms moz webkit
Philosophy of HTML5 HTML describes only structure of document
It must be closer to industry needs
Not breaking the Web
Specification describes how-to create DOM from non-valid HTML5 document
Basics of HTML5
<!doctype html><meta charset=utf-8><title>HTML5</title><p>It is valid HTML5!</p>
You know this<!doctype html><html lang=cs>
<head><meta charset=utf-8><title>HTML5</title>
</head><body>
<p>Toto je validní HTML5</p>
</body></html>
HTML5 is not XML
<META CHARSET=UTF-8><META CHARSET=UTF-8 /><META CHARSET=”UTF-8”><META CHARSET=”UTF-8” /><meta charset=utf-8><meta charset=utf-8 /><meta charset=”utf-8”><meta charset=”utf-8” /><MeTa CHARset=utF-8>
Back to roots
Current semantics elements <h1>, <h2>, <strong>, …
But what is <div>?
Source: Introducing HTML5
Small statistics
Source: http://devfiles.myopera.com/articles/572/idlist-url.htm
Semantics element of HTML5
Source: Introducing HTML5
Selection of HTML5 semantics elements
section
nav
article
aside
hgroup
header
footer
figure
figcaption
mark
The article element
The article element represents a self-contained composition in a document, page, application, or site and that is, in principle, independently distributable or reusable, e.g. in syndication. This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content.
When article elements are nested, the inner article elements represent articles that are in principle related to the contents of the outer article. For instance, a blog entry on a site that accepts user-submitted comments could represent the comments as article elements nested within the article element for the blog entry.
Source: http://dev.w3.org/html5/spec/sections.html#the-article-element
Microdata
Add more semantics to elements
Supported by search engines Bing, Google, Yahoo
Dictionaries on http://www.schema.org/
Attributes itemscope itemtype itemprop itemref itemid
Custom data attributes
Custom data typically used by application
Syntax: data-my-key
Example of usages – jQuery Mobile
<div data-role="page">
<div data-role="content">
…
</div>
</div>
Forms
Input types with validation Email, url, number, tel, search
Attributes for better control of input Required, Placeholder, Pattern, Autofocus, Min, Max, Step, Multiple,
List
Psedoclasses for CSS rules :valid/:invalid, :required/:optional
Event invalid
Event property validity
Multimedia
Box element You can use CSS
Element audio AAC, MP3 Ogg Vorbis
Element video H.264 (industry standard) WebM (forced by Google) Ogg Theora (forced by Opera)
<video width="400" height="300" poster="frame.png" autoplay controls loop><source src="video.ogv" type='video/ogg; codecs="theora, vorbis"'><source src="video.mp4" type='video/mp4; codecs="avc1.42E01E,
mp4a.40.2"'></video>
Graphics using <canvas>
2D Graphics Element canvas Draw using Javascript Result is bitmap
3D Graphics Is Not part of W3C recommendation WebGL by Independent group Khronos Security issues
http://www.contextis.co.uk/resources/blog/webgl/
Animation Performance requestAnimationFrame Doesn’t run, when page is not visible You will need to count “game” time
HTML5.cz
Shromažďuje české zdroje
Komunitní překlad knihy Marka Pilgrima „Dive into HTML5“
Resources
Books Introducing HTML5 by Bruce Lawson & Remy Sharp
W3C W3C HTML5 Specification – www.w3.org/TR/html5 HTML5 Test Suite – test.w3.org/html/tests/reporting/report.htm Validator – validator.w3.org/
Microsoft Internet Explorer 9 and 10 Engineering Blog – blogs.msdn.com/ie/ Beauty Of The Web – www.beautyoftheweb.com/experience/ IE Test Drive – www.ietestdrive.com HTML5 Labs – html5labs.interoperabilitybridges.com/
