Recomendados
Mais conteúdo relacionado
Semelhante a MS TechDays 2011 - HTML 5 All the Awesome Bits
Semelhante a MS TechDays 2011 - HTML 5 All the Awesome Bits (20)
Mais de Spiffy
Mais de Spiffy (20)
Último
Último (20)
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
- 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
- 13. SYNTAX & SEMANTICS OBLSOLETE ELEMENTS <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. SYNTAX & SEMANTICS CONTENT TYPES
- 17. SYNTAX & SEMANTICS the semantic web NEW SEMANTIC ELEMENTS Tim Berners- Lee (http://en.wikipedia.org/wiki/Tim_Berners-Lee)
- 18. SYNTAX & SEMANTICS MOST 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
- 19. SYNTAX & SEMANTICS MOST 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
- 20. SYNTAX & SEMANTICS NEW SEMANTIC ELEMENTS
- 21. SYNTAX & SEMANTICS NEW SEMANTIC ELEMENTS
- 23. SYNTAX & AUDIO & VIDEO SEMANTICS
- 24. GRAPHICS VIDEO/AUDIO Fully scriptable and eventable Pay attention to fallback situations (codecs + feature support) Codec situation is not awesome
- 25. AUDIO & VIDEO GRAPHICS
- 26. GRAPHICS CANVAS 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
- 27. GRAPHICS THE 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(…);
- 28. GRAPHICS SVG vector images | logos |existing vector formats | complex shapes
- 29. GRAPHICS CSS
- 30. CSS CSS CSS3.info Vendor prefixes div.coolEffect { -ms-box-shadow: -moz-box-shadow: -webkit-box-shadow: -o-box-shadow:}
- 31. THIS IS JUST THE BEGINING
- 32. SITES TO LIVE BY RESOURCES BEAUTYOFTHEWEB.COM HTML5DOCTOR.COM W3.ORG/TR/HTML5 MAKEAWESOMEWEB.COM
- 33. THANK YOU @DELIC8GENIUS HTTP DELICATEGENIUSBLOG.COM