MS TechDays 2011 - HTML 5 All the Awesome Bits

  • 834 views
Uploaded on

 

More in: Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
834
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
20
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

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