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

Introduction Sam Nasr 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)

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

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

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

Browser Support caniuse.com html5test.com

caniuse.com

html5test.com

Simplified Markup HTML4: HTML5:

Simplified Markup HTML4: HTML5:

Simplified Markup HTML4: HTML5:

Simplified Markup HTML4: … HTML5: …

New Tags articleembedmarkruby asidefigcaptionmetersection audiofigurenavsource canvasfooteroutputsummary commandheaderprogresstime datalisthgrouprpvideo detailskeygenrtwbr

Non-Semantic Markup

Semantic Markup

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)

Canvas

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

SVG

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

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

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

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

Video The browser will use the first recognized format.

Video Support

Audio

Audio Support

Demo HTML5

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

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

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:

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

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

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

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

Transform Rotate Skew Scale

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

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); }

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); }

Demo CSS3

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

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

Demo JavaScript API

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

Resources HTML5 Rocks Developing HTML5 Jump Start Apps-Jump-Start.Net Study Group

Contact Info Thank you for attending!