MS TechDays 2011 - HTML 5 All the Awesome Bits
Upcoming SlideShare
Loading in...5
×
 

MS TechDays 2011 - HTML 5 All the Awesome Bits

on

  • 1,007 views

 

Statistics

Views

Total Views
1,007
Views on SlideShare
933
Embed Views
74

Actions

Likes
0
Downloads
20
Comments
0

2 Embeds 74

http://spiffy.sg 73
http://www.spiffy.sg 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

MS TechDays 2011 - HTML 5 All the Awesome Bits MS TechDays 2011 - HTML 5 All the Awesome Bits Presentation Transcript

  • SINGAPORE DEVELOPMENT, ADVANCED Michael Kordahi Developer Evangelist, Microsoft AustraliaHTML5theawesomebits
  • WHO AM I?DELICATEGENIUSBLOG.COM @DELIC8GENIUS
  • MAKER OF INTERNETY TYPE THINGS @DELIC8GENIUS
  • http://www.w3.org/html/logo
  • IS FUTURETHE WEB HAS BEEN WEB
  • state of “HTML5” Candidate First Public Recommendatio Working Draft Last Call Recommendatio Working Draft n n * as of early 2011
  • the spec… http://www.w3.org/TR/html5/
  • SYNTAX & SEMANTICS AUDIO/VIDEO GRAPHICS CSS3
  • SYNTAX &SEMANTICS
  • SYNTAX & SEMANTICSOBLSOLETE ELEMENTS <basefont> <big> <center> <font> <s> <strike> <frame> <frameset> <noframes> <applet> <dir> <isindex> <tt> <u> <acronym>
  • SYNTAX & SEMANTICSDOCTYPE <!DOCTYPE HTML>
  • SYNTAX & SEMANTICSSYNTAX 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>
  • SYNTAX & SEMANTICSCONTENT TYPES
  • SYNTAX & SEMANTICSthe semantic webNEW SEMANTIC ELEMENTS Tim Berners- Lee (http://en.wikipedia.org/wiki/Tim_Berners-Lee)
  • SYNTAX & SEMANTICSMOST POPULAR CLASS NAMES 2009 copyright header style2 title content text msonormal style1 menu footer 0 50000 100000 150000 200000 http://devfiles.myopera.com/articles/572/idlist-url.htm
  • SYNTAX & SEMANTICSMOST POPULAR ID NAMES 2009 autonumber1 layer1 menu table1 main container logo header content footer 0 50000 100000 150000 200000 250000 300000 http://devfiles.myopera.com/articles/572/idlist-url.htm
  • SYNTAX & SEMANTICSNEW SEMANTIC ELEMENTS
  • SYNTAX & SEMANTICSNEW SEMANTIC ELEMENTS
  • SYNTAX &AUDIO & VIDEO SEMANTICS
  • GRAPHICSVIDEO/AUDIOFully scriptable and eventablePay attention to fallback situations (codecs +feature support)Codec situation is not awesome
  • AUDIO & VIDEO GRAPHICS
  • GRAPHICSCANVASHTML5 element that allows for dynamic,scriptable rendering of 2D shapes and bitmapsImmediate mode renderingSimple API: 45 methods, 21 attributesRemember <canvas> is dumb
  • GRAPHICSTHE ENTIRE CANVAS API• state • Shadows • text – void save(); – attribute double shadowOffsetX; – attribute DOMString font; – void restore(); – attribute double shadowOffsetY; – attribute DOMString textAlign; – attribute double shadowBlur; – attribute DOMString textBaseline;• transformations – attribute DOMString shadowColor; – void fillText(…); – void scale(…); • Rects – void strokeText(…); – void rotate(…); – void clearRect(…); – TextMetrics measureText(…); – void translate(…); – void transform(…); – void fillRect(…); • pixel manipulation – void strokeRect(…); – ImageData createImageData(…); – void setTransform(…); • path API – ImageData createImageData(…);• compositing – void beginPath(); – ImageData getImageData(…); – globalAlpha; – void closePath(); – void putImageData(…); – globalCompositeOperation; – void moveTo(…);• colors and styles • interface CanvasGradient { – void lineTo(…); – strokeStyle; – void quadraticCurveTo(…); – void addColorStop(…); }; – fillStyle; – void bezierCurveTo(…); • interface CanvasPattern {}; – CanvasGradient – void arcTo(…); • interface TextMetrics { createLinearGradient(…); – void rect(…); – readonly attribute double width; }; – CanvasGradient – void arc(…); • interface ImageData { createRadialGradient(…); – void fill(); – readonly attribute unsigned long width; – CanvasPattern createPattern(…); – void stroke(); – readonly attribute unsigned long height;• Line caps/joins – void clip(); – readonly attribute CanvasPixelArray data; }; – attribute double lineWidth; – boolean isPointInPath(…); • interface CanvasPixelArray { – attribute DOMString lineCap; • focus management – readonly attribute unsigned long length; – attribute DOMString lineJoin; – boolean drawFocusRing(…); – getter octet (…); – attribute double miterLimit; • drawing images – setter void (…); }; – void drawImage(…);
  • GRAPHICSSVG vector images | logos |existing vector formats | complex shapes
  • GRAPHICS CSS
  • CSSCSSCSS3.infoVendor prefixesdiv.coolEffect { -ms-box-shadow: -moz-box-shadow: -webkit-box-shadow: -o-box-shadow:}
  • THIS IS JUST THE BEGINING
  • SITES TO LIVE BYRESOURCES BEAUTYOFTHEWEB.COM HTML5DOCTOR.COM W3.ORG/TR/HTML5 MAKEAWESOMEWEB.COM
  • THANK YOU@DELIC8GENIUS HTTP DELICATEGENIUSBLOG.COM