DEVELOPMENT, ADVANCED Michael Kordahi Developer Evangelist, Microsoft Australia SINGAPORE HTML5 the awesome bits
MS TechDays 2011 - HTML 5 All the Awesome Bits
May 10, 2015
Welcome message from author
This document is posted to help you gain knowledge. Please leave a comment to let me know what you think about it! Share it to your friends and learn new things together.
Transcript
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
Related Documents
