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

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×

Introducing the official SlideShare app

Stunning, full-screen experience for iPhone and Android

Text the download link to your phone

Standard text messaging rates apply

MS TechDays 2011 - HTML 5 All the Awesome Bits

860
views

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
860
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
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