MS TechDays 2011 - HTML 5 All the Awesome Bits

DEVELOPMENT, ADVANCED

Michael Kordahi Developer Evangelist, Microsoft Australia

SINGAPORE

HTML5

the

awesome

bits

@DELIC8GENIUS

DELICATEGENIUSBLOG.COM

WHO AM I?

MAKER OF INTERNETY TYPE THINGS

@DELIC8GENIUS

http://www.w3.org/html/logo

IS FUTURETHE WEB

HAS BEENWEB

state of “HTML5”

First Public Working Draft

Working Draft Last Call Candidate

Recommendation

Recommendation

* as of early 2011

http://www.w3.org/TR/html5/

the spec…

GRAPHICS CSS3

SYNTAX & SEMANTICS AUDIO/VIDEO

SYNTAX &

SEMANTICS

OBLSOLETE ELEMENTS

<basefont> <big> <center>

<font> <s> <strike>

<frame> <frameset>

<noframes> <applet> <dir>

<isindex> <tt> <u>

<acronym>

SYNTAX & SEMANTICS

SYNTAX & SEMANTICS

DOCTYPE

<!DOCTYPE HTML>

SYNTAX & SEMANTICS

SYNTAX

No need to self-close tags: <img src="nice.jpg" /> <img src="nice.jpg"> No need to wrap attributes in quotations: <img src="nice.jpg"> <img src=nice.jpg> Case insensitive: <IMG SRC=nice.jpg> <img src=nice.jpg> <iMg SrC=nice.jpg>

CONTENT TYPES

SYNTAX & SEMANTICS

SYNTAX & SEMANTICS

NEW SEMANTIC ELEMENTS the semantic web

Tim Berners- Lee (http://en.wikipedia.org/wiki/Tim_Berners-Lee)

0 50000 100000 150000 200000

footer

menu

style1

msonormal

text

content

title

style2

header

copyright

http://devfiles.myopera.com/articles/572/idlist-url.htm

MOST POPULAR CLASS NAMES 2009

SYNTAX & SEMANTICS

0 50000 100000 150000 200000 250000 300000

footer

content

header

logo

container

main

table1

menu

layer1

autonumber1

MOST POPULAR ID NAMES 2009

http://devfiles.myopera.com/articles/572/idlist-url.htm

SYNTAX & SEMANTICS

NEW SEMANTIC ELEMENTS

SYNTAX & SEMANTICS

NEW SEMANTIC ELEMENTS

SYNTAX & SEMANTICS

SYNTAX &

SEMANTICS AUDIO & VIDEO

Fully scriptable and eventable Pay attention to fallback situations (codecs + feature support) Codec situation is not awesome

GRAPHICS

VIDEO/AUDIO

AUDIO & VIDEO GRAPHICS

HTML5 element that allows for dynamic, scriptable rendering of 2D shapes and bitmaps Immediate mode rendering Simple API: 45 methods, 21 attributes Remember <canvas> is dumb

GRAPHICS

CANVAS

• state

– void save();

– void restore();

• transformations

– void scale(…);

– void rotate(…);

– void translate(…);

– void transform(…);

– void setTransform(…);

• compositing

– globalAlpha;

– globalCompositeOperation;

• colors and styles

– strokeStyle;

– fillStyle;

– CanvasGradient createLinearGradient(…);

– CanvasGradient createRadialGradient(…);

– CanvasPattern createPattern(…);

• Line caps/joins

– attribute double lineWidth;

– attribute DOMString lineCap;

– attribute DOMString lineJoin;

– attribute double miterLimit;

• Shadows

– attribute double shadowOffsetX;

– attribute double shadowOffsetY;

– attribute double shadowBlur;

– attribute DOMString shadowColor;

• Rects

– void clearRect(…);

– void fillRect(…);

– void strokeRect(…);

• path API

– void beginPath();

– void closePath();

– void moveTo(…);

– void lineTo(…);

– void quadraticCurveTo(…);

– void bezierCurveTo(…);

– void arcTo(…);

– void rect(…);

– void arc(…);

– void fill();

– void stroke();

– void clip();

– boolean isPointInPath(…);

• focus management

– boolean drawFocusRing(…);

• drawing images

– void drawImage(…);

• text

– attribute DOMString font;

– attribute DOMString textAlign;

– attribute DOMString textBaseline;

– void fillText(…);

– void strokeText(…);

– TextMetrics measureText(…);

• pixel manipulation

– ImageData createImageData(…);

– ImageData createImageData(…);

– ImageData getImageData(…);

– void putImageData(…);

• interface CanvasGradient {

– void addColorStop(…); };

• interface CanvasPattern {};

• interface TextMetrics {

– readonly attribute double width; };

• interface ImageData {

– readonly attribute unsigned long width;

– readonly attribute unsigned long height;

– readonly attribute CanvasPixelArray data; };

• interface CanvasPixelArray {

– readonly attribute unsigned long length;

– getter octet (…);

– setter void (…); };

THE ENTIRE CANVAS API

GRAPHICS

vector images | logos |existing vector formats | complex shapes

GRAPHICS

SVG

GRAPHICS CSS

CSS3.info Vendor prefixes div.coolEffect { -ms-box-shadow: -moz-box-shadow: -webkit-box-shadow: -o-box-shadow:}

CSS

CSS

THIS IS JUST THE BEGINING

BEAUTYOFTHEWEB.COM HTML5DOCTOR.COM W3.ORG/TR/HTML5 MAKEAWESOMEWEB.COM

RESOURCES

SITES TO LIVE BY

HTTP DELICATEGENIUSBLOG.COM

@DELIC8GENIUS

THANK YOU

Technology

MS TechDays 2011 - HTML 5 All the Awesome Bits