0
SINGAPORE          DEVELOPMENT, ADVANCED          Michael Kordahi          Developer Evangelist, Microsoft AustraliaHTML5t...
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                               ...
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> ...
SYNTAX & SEMANTICSDOCTYPE      <!DOCTYPE HTML>
SYNTAX & SEMANTICSSYNTAX No need to self-close tags:       <img src="nice.jpg" />       <img src="nice.jpg"> No need to wr...
SYNTAX & SEMANTICSCONTENT TYPES
SYNTAX & SEMANTICSthe semantic webNEW SEMANTIC ELEMENTS                  Tim Berners- Lee (http://en.wikipedia.org/wiki/Ti...
SYNTAX & SEMANTICSMOST POPULAR CLASS NAMES 2009   copyright     header      style2        title    content        text  ms...
SYNTAX & SEMANTICSMOST POPULAR ID NAMES 2009  autonumber1        layer1        menu        table1         main     contain...
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 situa...
AUDIO & VIDEO  GRAPHICS
GRAPHICSCANVASHTML5 element that allows for dynamic,scriptable rendering of 2D shapes and bitmapsImmediate mode renderingS...
GRAPHICSTHE ENTIRE CANVAS API•   state                                     •   Shadows                               •    ...
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
MS TechDays 2011 - HTML 5 All the Awesome Bits
MS TechDays 2011 - HTML 5 All the Awesome Bits
MS TechDays 2011 - HTML 5 All the Awesome Bits
MS TechDays 2011 - HTML 5 All the Awesome Bits
Upcoming SlideShare
Loading in...5
×

MS TechDays 2011 - HTML 5 All the Awesome Bits

903

Published on

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
903
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
21
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "MS TechDays 2011 - HTML 5 All the Awesome Bits"

  1. 1. SINGAPORE DEVELOPMENT, ADVANCED Michael Kordahi Developer Evangelist, Microsoft AustraliaHTML5theawesomebits
  2. 2. WHO AM I?DELICATEGENIUSBLOG.COM @DELIC8GENIUS
  3. 3. MAKER OF INTERNETY TYPE THINGS @DELIC8GENIUS
  4. 4. http://www.w3.org/html/logo
  5. 5. IS FUTURETHE WEB HAS BEEN WEB
  6. 6. state of “HTML5” Candidate First Public Recommendatio Working Draft Last Call Recommendatio Working Draft n n * as of early 2011
  7. 7. the spec… http://www.w3.org/TR/html5/
  8. 8. SYNTAX & SEMANTICS AUDIO/VIDEO GRAPHICS CSS3
  9. 9. SYNTAX &SEMANTICS
  10. 10. SYNTAX & SEMANTICSOBLSOLETE ELEMENTS <basefont> <big> <center> <font> <s> <strike> <frame> <frameset> <noframes> <applet> <dir> <isindex> <tt> <u> <acronym>
  11. 11. SYNTAX & SEMANTICSDOCTYPE <!DOCTYPE HTML>
  12. 12. 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>
  13. 13. SYNTAX & SEMANTICSCONTENT TYPES
  14. 14. SYNTAX & SEMANTICSthe semantic webNEW SEMANTIC ELEMENTS Tim Berners- Lee (http://en.wikipedia.org/wiki/Tim_Berners-Lee)
  15. 15. 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
  16. 16. 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
  17. 17. SYNTAX & SEMANTICSNEW SEMANTIC ELEMENTS
  18. 18. SYNTAX & SEMANTICSNEW SEMANTIC ELEMENTS
  19. 19. SYNTAX &AUDIO & VIDEO SEMANTICS
  20. 20. GRAPHICSVIDEO/AUDIOFully scriptable and eventablePay attention to fallback situations (codecs +feature support)Codec situation is not awesome
  21. 21. AUDIO & VIDEO GRAPHICS
  22. 22. GRAPHICSCANVASHTML5 element that allows for dynamic,scriptable rendering of 2D shapes and bitmapsImmediate mode renderingSimple API: 45 methods, 21 attributesRemember <canvas> is dumb
  23. 23. 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(…);
  24. 24. GRAPHICSSVG vector images | logos |existing vector formats | complex shapes
  25. 25. GRAPHICS CSS
  26. 26. CSSCSSCSS3.infoVendor prefixesdiv.coolEffect { -ms-box-shadow: -moz-box-shadow: -webkit-box-shadow: -o-box-shadow:}
  27. 27. THIS IS JUST THE BEGINING
  28. 28. SITES TO LIVE BYRESOURCES BEAUTYOFTHEWEB.COM HTML5DOCTOR.COM W3.ORG/TR/HTML5 MAKEAWESOMEWEB.COM
  29. 29. THANK YOU@DELIC8GENIUS HTTP DELICATEGENIUSBLOG.COM
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×