1. Introduction to HTML5 By Sam Nasr, MCAD, MCT, MCTS, MVP Nasr Information Systems October 22, 2013

2. Introduction Sam Nasr (sam@nasr.info)sam@nasr.info Software developer since 1995 Independent Software Consultant (Nasr Information Systems) MCAD, MCT, MCTS(WSS/MOSS) President - Cleveland C#/VB.Net User Group President – Cleveland WPF User Group President -.Net Study Group INETA Mentor for Ohio INETA Community Champ (2010, 2013) Author for Visual Studio Magazine Microsoft Most Valuable Professional (2013)

3. Housekeeping Forum for learning Feel free to ask questions Cell Phones on vibrate please

4. Agenda Browser Compatibility New Features in HTML5 Simplified Markup New Attributes New Tags New Features in CSS3 Selectors Advanced Layout and Animation New JavaScript API

5. Why HTML5? Ubiquitous Ease of Development Widely Supported Forged by many tech leaders Better Performance More Capabilities

6. Browser Support caniuse.com html5test.com

7. caniuse.com

8. html5test.com

9. Simplified Markup HTML4: HTML5:

10. Simplified Markup HTML4: HTML5:

11. Simplified Markup HTML4: HTML5:

12. Simplified Markup HTML4: … HTML5: …

13. New Tags articleembedmarkruby asidefigcaptionmetersection audiofigurenavsource canvasfooteroutputsummary commandheaderprogresstime datalisthgrouprpvideo detailskeygenrtwbr

14. Non-Semantic Markup

15. Semantic Markup

16. Semantic My Page Life, The Universe and Everything Page Navigation News Sports Weather Breaking News The quick brown fox jumps over the lazy dog Side Note Oh, by the way Copyright 2012 (c) My Page Life, The Universe and Everything Page Navigation News Sports Weather Breaking News The quick brown fox jumps over the lazy dog Side Note Oh, by the way Copyright 2012 (c)

17. Canvas

18. Context methods beginPath() moveTo() lineTo() fill() fillRect() arc()

19. SVG

20. Canvas vs. SVG Canvas Not a drawing object, only a container Only used for drawing and redrawing via JavaScript Used for many HTML5 games due to performance impact SVG Every object manipulated via the DOM Could have performance issues if using many objects

21. New Attributes <input type="text" name="First" autofocus placeholder="Enter First Name" />

22. Input Types <input type= "color" "date" "datetime" "datetime-local" "email" "month" "number" "range" "search" "tel" "time" "url" "week"

23. Validation input:required { border:3px solid red; } input:valid { border:3px solid gray; }

24. Video The browser will use the first recognized format.

25. Video Support

26. Audio

27. Audio Support

28. Demo HTML5

29. CSS3 Selectors PositionValuesMisc :first-child :last-child :first-of-type :last-of-type :only-of-type :nth-child(#) :nth-last-child(#) :nth-of-type(#) :nth-last-of- type(#) [attr^=value] [attr$=value] [attr*=value] :root :empty :target :not(…) ::selection

30. CSS3 Selectors Visible StateValidation :enabled :disabled :checked :valid :invalid :optional :required

31. Compatibility StyleBrowser(s) feature[W3C Standard] -ms-featureIE -moz-featureFirefox -webkit-featureSafari and Chrome -o-featureOpera #title { transform:rotate(-15deg); -ms-transform:rotate(-15deg); -moz-transform:rotate(-15deg); -webkit-transform:rotate(-15deg); -o-transform:rotate(-15deg); } Ex:

32. Fonts @font-face { font-family: FriendlyFontName; src: url('fontname.woff') format('woff'); } selector { font-family: FriendlyFontName; } FontSquirrel.com

33. Text Shadows div { text-shadow: horizontal-offset vertical-offset blur color; } The Long, Dark Tea Time of the Soul

34. Resize selector { resize: both; /* none|horizontal|vertical */ overflow: auto; /* required */ max-width: 600px; /* optional */ max-height: 800px; /* optional */ }

35. Rounded Corners selector { border-radius: 2em; } selector { border-top-left-radius:2em; border-bottom-left-radius:2em; }

36. Transform Rotate Skew Scale

37. Rotate.rotate { transform:rotate(-15deg); -ms-transform:rotate(-15deg); /* IE */ -moz-transform:rotate(-15deg); /* Firefox */ -webkit-transform:rotate(-15deg); /* Safari, Chrome */ -o-transform:rotate(-15deg); /* Opera */ } rotate

38. Skew Selector { transform: skewX(xdeg); -ms-transform: skewX(xdeg); -moz-transform: skewX(xdeg); -webkit-transform: skewX(xdeg); -o-transform: skewX(xdeg); } selector { transform: skewY(ydeg); -ms-transform: skewY(ydeg); -moz-transform: skewY(ydeg); -webkit-transform: skewY(ydeg); -o-transform: skewY(ydeg); } selector { transform: skew(xdeg, ydeg); -ms-transform: skew(xdeg, ydeg); -moz-transform: skew(xdeg, ydeg); -webkit-transform: skew(xdeg, ydeg); -o-transform: skew(xdeg, ydeg); }

39. Scale Selector { transform: scale(factor); -ms-transform: scale(factor); -moz-transform: scale(factor); -webkit-transform: scale(factor); -o-transform: scale(factor); } Selector { transform: scaleX(factor); -ms-transform: scaleX(factor); -moz-transform: scaleX(factor); -webkit-transform: scaleX(factor); -o-transform: scaleX(factor); } Selector { transform: scaleY(factor); -ms-transform: scaleY(factor); -moz-transform: scaleY(factor); -webkit-transform: scaleY(factor); -o-transform: scaleY(factor); }

40. Demo CSS3

41. data- attributes var div = getElementById("fName"); var fn = div.dataset("firstname");

42. Web Storage Capacity: 2-10MB (W3C recommends 5MB) Local Storage vs Session Storage

43. Demo JavaScript API

44. Recap Browser Compatibility New Features in HTML5 Simplified Markup New Attributes New Tags New Features in CSS3 Selectors Advanced Layout and Animation New JavaScript API

45. Resources HTML5 Rocks http://www.html5rocks.com Developing HTML5 Jump Start http://channel9.msdn.com/Series/Developing-HTML-5- Apps-Jump-Start.Net Study Group http://www.meetup.com/Net-Study-Group/files/

46. Contact Info sam@nasr.info http://ClevelandDotNet.blogspot.com @SamNasr http://www.linkedin.com/in/samsnasr http://speakerrate.com/samnasr Thank you for attending!