HTML5 - Myth and Reality

unevenfitterInternet and Web Development

Jun 20, 2012 (5 years and 6 months ago)

419 views

HTML5
-

Myth and Reality

Mik Chernomordikov

Client Evangelism Lead

Microsoft Russia

mik
@microsoft.com
,
http://twitter.com/
mixen


HTML 4.01

1999
-
now

Adobe Flash Player

Microsoft Silverlight

JavaScript Frameworks

+ best practices

“client side”

evolution

RIA, AJAX & Web Apps

Web 2.0 & Social Networks

Online Video & Audio

WebCam

&
Mic

Mobile Web &
Geolocation

CPU,
MultiCore

& GPU

JavaScript
Performance

Web has changed
.

(and expectations as well
)


HTML didn’t
.

(no changes for 11 years
)


Simplified

DOCType


<!
doctype

html>


Intersected tags are OK


<b
><i>But it’s a bad practice
!
</
b></i
>


No attribute quotes required


<div
class=
myClass
>Could be, but


</
div>


Attributes without value
(
binary)


<video
controls>Presence is important</
video>



Structured tags are not required

<!
doctype

html
>

<
meta charset=utf
-
8
>

<title>
Моя Страница
</
title
>

<p>This document is correct but

</
p>



<applet
>
-

you should use<embed>


<
big
>
-

you should use

CSS


<
blink
>

-

you should use CSS


<
center
>

-

you should use CSS


<
font
>

-

you should use CSS


<
marquee
>

-

crappy legacy by old

IE…



They are supported but marked as obsolete


<
ol
>

-

old in HTML 4,

back in HTML 5


<
dl
>

-

for names/values


<
cite
>

-

article or book


<
address
>

-

contact information of author


<
em
>

-

selection


<
i
>

-

“intonation” of text


<strong>

-

importance


<
b
>

-

style changing, no importance


<
hr
>

-

text separation at paragraph


<
small
>

-

small font (e.g. copyright
)


<header
>

-

header of the document


<
footer
>

-

«
footer
»


<
nav
>

-

navigation element


<
aside
>

-

insertion


<
article
>

-

block of content


<
section
>

-

section of content


<audio
>

-

аудио
without plug
-
ins


<video>
-

video without plug
-
ins


<
svg
>
-

vector images in XML


<
canvas
>
-

place for “drawing”

Native support

First
-
class elements

Open technologies



We all love HTML5!


More

-


Deep dive into

ACID3
"

We’re here

Developers can use HTML5 now and
we encourage them to do so

Ian
Jacobs,
W3C

http://html5labs.com
There are two HTML5.

HTML5 spec

Other specs

HTML5

“HTML5“

“HTML5

Core”

“HTML5 Extended“

HTML5

Spec

“Generation HTML5“

Semantics

Multimedia

Dynamic graphics

Web forms

JavaScript APIs

@font
-
face {



font
-
family
:
AyitaPro
;

src
:
url
('media/
AyitaPro.woff
');

}

<
div style="font: bold 18pt
AyitaPro
, sans
-
serif
;">

ALL ABOARD</
div>


Dependence of device capabilities


<link
href
="No.css"
rel
="
stylesheet
" media
="screen and
(max
-
width:1199px)" type="text/
css
"
/>


<
link
href
="No.css"
rel
="
stylesheet
" media="screen and
(min
-
width:1301px)" type="text/
css
"
/>


<
link
href
="Yes.css"
rel
="
stylesheet
" media="screen and
(min
-
width:1200px) and (max
-
width: 1300px)"
type="text/
css
" />


function makeAllH2Red() {



var

elem

=
document.querySelectorAll
("h2 + p
");



var

count =
elem.length
;



var

i = 0;



for
(i = 0; i <= count; i++)
{

elem
[i
].
style.color

= "red
"; }

}


var

elem

=
document.querySelectorAll
("
ul

li:nth
-
child
(odd)");//
var

elem

=
document.querySelectorAll
("
table.test

>
tr

> td");


MP3

yes

yes

yes

no

no

WAV

yes

no

yes

yes

yes

AAC

yes

yes

yes

no

no

Ogg Vorbis

no

no

yes

yes

yes

H.264

yes

yes

MS Plugin

MS Plugin

no

VP8 (
WebM
)

Go Plugin

* if codec

yes

yes

yes

Ogg
Theora

no

no

yes

yes

yes

DRM

Dynamic quality

(
Smooth Streaming in Silverlight)

Fullscreen

mode

One standard codec

One control style

no

http://ie6countdown.com


6
1


http://buildmypinnedsite.com

future of the web

(not only) marketing

big specification

(yet) not finished

want compatibility

want stability

it‘s really cool
!

HTML5
-

Myth and Reality

Mik Chernomordikov

Client Evangelism Lead

Microsoft Russia

mik
@microsoft.com
,
http://twitter.com/
mixen