HTML5 - An Introduction

uglyveinInternet και Εφαρμογές Web

24 Ιουν 2012 (πριν από 5 χρόνια και 1 μήνα)

382 εμφανίσεις

Sascha

P. Corti

Developer Evangelist, Microsoft Switzerland

sascha.corti@microsoft.com

|
blog

|
twitter

HTML5

An Introduction

What is HTML5?

HTML5…

Adds new elements

(canvas, video, audio, inline SVG…)

Is a
draft specification

from the W3C

with over 1100 (printed) pages

Changes and removes some older
elements and attributes (center,

font…)

Is NOT done yet!

Keeps evolving.

Is NOT (only) a Marketing Message

New Markup
Elements

Article, Section,
Nav

Aside,
Hgroup
, Header,
Footer

Figure,
Figcaption

Address


<Canvas>

<Audio>

<Video
>

HTML5 Markup

<div

id
=
mainContent
>




<
article
>







article

text


The Map of HTML5

W3C HTML WG

Chair

Sam Ruby (IBM)

Paul Cotton (Microsoft)

Maciej

Stachowiak

(Apple)

40 Member Organizations, 411
Participants,
280 Invited Experts

16 people from Microsoft
Teams

8 Publications

HTML5

HTML Canvas 2D Context

HTML
: The Markup

HTML5 diffs from HTML4

Polyglot
Markup

Meetings
over IRC, Phone, Face
-
to
-
face

Recommendations produced under Royalty
-
Free
basis

www.w3.org/html/wg
Specification Status

First Public
Working
Draft

Working
Draft

Candidate
Recommen
-

dation

Proposed
Recommen
-

dation

Recommen
-

dation

May
2011

2014

http://
www.w3.org/2011/02/htmlwg
-
pr.html


Last call

(feature

complete)

Call to
implement

HTML5

Today

The Map of HTML5

First Public
Working Draft

Working Draft

Last Call

Candidate
Recommen
-
dation

Recommen
-
dation

http://
www.w3.org/News/2011
HTML5: “Same Mark
-
Up”

9

http://
ie.microsoft.com/testdrive/HTML5/BorderRadius/Default.html
Dive into HTML5

HTML5 <video>

Video
can be composited with anything else on the page

HTML
content, images, SVG
graphics

IE9: Hardware accelerated, GPU
-
based decoding

Attributes

src



specifies the location to pull the source file

autoplay



if present starts playing as soon as it’s ready

controls



if present displays controls

preload



if present loads source at page
load

loop



if present loops back to the beginning of the video

h
eight

&
width



specifies the height & width of the player

<
video

src
="video.mp4"

id
="
videoTag
"

width
="640px"

height
="360px">


<!
--

Only shown when browser doesn’t support video
--
>


<!
--

You Could Embed Flash or Silverlight Video Here
--
>

</
video
>

HTML5 <
video
> Format Support

Ogg

Theora

H.264

VP8 (
WebM
)

Manual Install

(
OpenCodecs
)

9.0

Using
Codec installed
by Chrome /

WebM

Components for
IE9 (Preview)

3.5

No

(Removed

at 11)

4.0

3.0

Windows Media Player
HTML5 Extension for
Chrome

in Win7

6.0

Manual Install

(
Xiph.org QuickTime
Components
)

3.1

Google announced a
WebM

plugin for Safari

10.50

No

10.60

http://
en.wikipedia.org/wiki/HTML5_video


Converting Videos

Expression Media

Encoder 4 Pro

Transcoding Project

Output Format: MP4

VLC Media Player


(free download)

Media


Convert/Save

Video:
H.264 + AAC (MP4
)”

“Video:
VP8 +
Vorbis

(
Webm
)”

<video>

http://
www.youtube.com/watch?v=RfMSxf6P_AM
demo

<
canvas

id
="
myCanvas
"

width
="200"

height
="200">


Your
browser doesn’t support
the HTML5 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
>

HTML5 <canvas>

A block element that allows

developers to draw 2d graphics

using JavaScript.

Methods for drawing include: paths, boxes, circles, text and
rasterized images

<canvas>

http://
www.thekillersmusic.com/HTML5
demo

Scalable Vector Graphics

Create and draw 2D vector graphics using XML

Vector images are composed of shapes instead of pixels

Based on the SVG 1.1 2
nd

Edition Full specification


Support for

Full DOM access to SVG elements

Document structure, scripting, styling, paths
,

shapes
, colors, transforms, gradients, patterns,

masking
,
clipping
, markers, linking
and views

1
7

<
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
>


Selectively style page based on properties of the
media

CSS3 Media Queries

<
link

href
="DoNotDisplay.css"

rel
="
stylesheet
"


media
="screen and (max
-
width:1199px)"

type
="text/
css
"

/>



<
link

href
="DoNotDisplay.css"

rel
="
stylesheet
"


media
="screen and (min
-
width:1301px)"

type
="text/
css
"

/>



<
link

href
="Presentation.css"

rel
="
stylesheet
"


media
="screen and (min
-
width:1200px) and (max
-
width:


1300px
)"

type
="text/
css
"

/>


Maxdesign
: CSS3 Media Queries (
SlideShare
)


<
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
the font in
FontFile.woff

</
div
>

New: @font
-
face & WOFF Fonts

No longer limited to the “web safe” font list!

Web Open Font Format allows you to package and
deliver fonts as needed, per site

Designed for web use with the
@font
-
face

declaration

A
simple repackaging of
OpenType

or TrueType font data

From the W3C Fonts Working Group

<CSS>

http://www.nevermindthebullets.com/
demo

Modernizr

Feature Detection JavaScript
library

HTML5
or CSS3
features.

Feature missing:
Modernizr

creates Fallback
.

jQuery

JavaScript library for DOM Manipulation

Event Handling
, A
nimation
,
Document Traversing.

Supported in Visual Studio.

Easel.js

JavaScript Library
for building
Canvas
-
Based Apps.

Example:
Pirates
Love Daisies
.

includes
concepts such as sprites, graphics, sparkles and game
semantics.

Ai2Canvas

Export Adobe Illustrator Vector
and
Bitmap
Artwork
directly to
HTML5 Canvas.

Provides Drawing
,
Animation
and
Coding Options
such as
Events

HTML5 Tools & Frameworks

Internet Explorer & HTML5

What about the other Specs?

http://
html5labs.interoperabilitybridges.com
IndexedDB
:


W3C
draft Web
specification for
the
storage of large amounts of
structured data in the browser
, using
indexes that allow for high
performance searches on
this data
.

WebSockets
:


Technology
designed to
simplify
much
of the complexity around bi
-
directional,
full
-
duplex

communications channels
, over a
single
Transmission
ControlProtocol

(TCP)
socket
.

Implemented
in
web browsers
,
web
servers

as well as used by any client
or server application.

Internet Explorer: Two Flavors

IE 10: Platform Preview

Frequent Releases (8 weeks)

Side
-
by
-
Side installation

Only Chakra & Trident

IE9: Stable Release

Full Browser

No Side
-
by
-
Side

Site Mode & Developer Tools

Background Thread

Core #2

Foreground (UI

Thread)

Core #1

PDC 2010 Sessions:

Unlocking JavaScript Opportunity with Internet Explorer 9

Inside Internet Explorer Performance

“Chakra” JavaScript Engine

25

Background
Compiler

Native
Code

Source
Code

Parser

ByteCode

Generator

Interpreter

Machine
Instructions

Exec Loop

JSZap
:
Compressing

JavaScript Source Code
Brand Browser in your Site’s
Colors & Logo

Disable 3
rd

Party
Add
-
Ons


Integrate in Windows 7 Taskbar

Add custom Menus

Show Dynamic Overlay Icons

IE9 “Pinned Site”

Pinned Site

http://www.nevermindthebullets.com/
Internet Explorer 9

Conclusion

HTML5 a Solution to Homogenize Mobile Space?

Users mostly still decide Pro App

Added

Interactivity

Faster

Start
-
Up

More Network Independent

Mobile: HTML5 or App?

Interation

Intense

Data

Intense

HTML5 or Plug
-
In based RIA?

Today, Browsers should not
require a Plug
-
In to play
Multimedia Content.

Today,
Line
-
of
-
Business
Applications
with lots of
Logic
are
very hard
to write
in JavaScript
.

Plug
-
In
based

Resources

W3C

HTML5 Working Group

HTML5 Test Suite
Conformance Results

Microsoft

IE Blog

IE Test Drive

IE Test Center

HTML5 Gallery


© 2011 Microsoft
Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademar
ks
and/or trademarks in the U.S. and/or other countries.

The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the
dat
e of this presentation. Because Microsoft must respond to changing market
conditions, it should not be interpreted to be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accu
rac
y of any information provided after the date of this presentation.

MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS PRESENTATION.