Download as PDF, PPTX
Uploaded bySpiffy
MS TechDays 2011 - HTML 5 All the Awesome Bits
Michael Kordahi is a developer evangelist at Microsoft Australia who focuses on HTML5 development. The document discusses the evolution of HTML5 from a candidate recommendation to full recommendation by the W3C. It summarizes new elements, syntax changes, and capabilities in HTML5 like audio, video, 2D graphics with canvas, and CSS3.
More Related Content
Similar to MS TechDays 2011 - HTML 5 All the Awesome Bits
MS TechDays 2011 - HTML 5 All the Awesome Bits
- 1. SINGAPORE DEVELOPMENT, ADVANCED Michael Kordahi Developer Evangelist, Microsoft Australia HTML5 the awesome bits
- 2. WHO AM I? DELICATEGENIUSBLOG.COM @DELIC8GENIUS
- 4. MAKER OF INTERNETY TYPE THINGS @DELIC8GENIUS
- 6.
- 8. IS FUTURE THE WEB HAS BEEN WEB
- 9. state of “HTML5” Candidate First Public Recommendatio Working Draft Last Call Recommendatio Working Draft n n * as of early 2011
- 10. the spec… http://www.w3.org/TR/html5/
- 11. SYNTAX & SEMANTICS AUDIO/VIDEO GRAPHICS CSS3
- 12.
- 13. SYNTAX & SEMANTICS OBLSOLETEELEMENTS <basefont> <big> <center> <font> <s> <strike> <frame> <frameset> <noframes> <applet> <dir> <isindex> <tt> <u> <acronym>
- 14. SYNTAX & SEMANTICS DOCTYPE <!DOCTYPE HTML>
- 15. 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>
- 16.
- 17. SYNTAX & SEMANTICS thesemantic web NEW SEMANTIC ELEMENTS Tim Berners- Lee (http://en.wikipedia.org/wiki/Tim_Berners-Lee)
- 18. SYNTAX & SEMANTICS MOSTPOPULAR 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
- 19. SYNTAX & SEMANTICS MOSTPOPULAR 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
- 20. SYNTAX & SEMANTICS NEWSEMANTIC ELEMENTS
- 21. SYNTAX & SEMANTICS NEWSEMANTIC ELEMENTS
- 23. SYNTAX & AUDIO &VIDEO SEMANTICS
- 24. GRAPHICS VIDEO/AUDIO Fully scriptable andeventable Pay attention to fallback situations (codecs + feature support) Codec situation is not awesome
- 25. AUDIO & VIDEO GRAPHICS
- 26. GRAPHICS CANVAS HTML5 element thatallows for dynamic, scriptable rendering of 2D shapes and bitmaps Immediate mode rendering Simple API: 45 methods, 21 attributes Remember <canvas> is dumb
- 27. GRAPHICS THE ENTIRE CANVASAPI • 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(…);
- 28. GRAPHICS SVG vectorimages | logos |existing vector formats | complex shapes
- 29.
- 30. CSS CSS CSS3.info Vendor prefixes div.coolEffect { -ms-box-shadow: -moz-box-shadow: -webkit-box-shadow: -o-box-shadow:}
- 31. THIS IS JUSTTHE BEGINING
- 32. SITES TO LIVEBY RESOURCES BEAUTYOFTHEWEB.COM HTML5DOCTOR.COM W3.ORG/TR/HTML5 MAKEAWESOMEWEB.COM
- 33. THANK YOU @DELIC8GENIUS HTTP DELICATEGENIUSBLOG.COM