Introduction to HTML5

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

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

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 .

com html5test.com .Browser Support caniuse.

caniuse.com .

com .html5test.

Simplified Markup HTML4: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.w3.dtd"> HTML5: <!DOCTYPE html> .0 Transitional//EN" "http://www.org/TR/xhtml1/DTD/xhtml1transitional.

charset=UTF-8“> HTML5: <meta charset="utf-8"> .Simplified Markup HTML4: <meta http-equiv="content-type" content="text/html.

css"> HTML5: <link rel="stylesheet" href="MyStyle.css"> .Simplified Markup HTML4: <link type="text-css" rel="stylesheet" href="MyStyle.

Simplified Markup HTML4: <script type="text/javascript" src="Myscript.js"> <script type="text/javascript"> … </script> HTML5: <script src="Myscript.js"> <script> … </script> .

New Tags article embed mark ruby aside figcaption meter section audio figure nav source canvas footer output summary command header progress time datalist hgroup rp video details keygen rt wbr .

Non-Semantic Markup <div id="Header"> <div id="Article"> <div id="Footer"> <div id="Aside"> .

Semantic Markup <Header> <Article> <Aside> <Footer> .

by the way</p> </aside> </article> <footer> <p>Copyright 2012 (c)</p> </footer> . The Universe and Everything</h2> <div id="nav"> <h2>Page Navigation</h2> <ul> <li><a href="#">News</a></li> <li><a href="#">Sports</a></li> <li><a href="#">Weather</a></li> </ul> </div> </div> <div id="article"> <h1>Breaking News</h1> <p>The quick brown fox jumps over the lazy dog</p> <div id="aside"> <h3>Side Note</h3> <p>Oh.Semantic <div class="header"> <h1>My Page</h1> <h2>Life. The Universe and Everything</h2> </hgroup> <nav> <h1>Page Navigation</h1> <ul> <li><a href="#">News</a></li> <li><a href="#">Sports</a></li> <li><a href="#">Weather</a></li> </ul> </nav> </header> <article> <h1>Breaking News</h1> <p>The quick brown fox jumps over the lazy dog</p> <aside> <h1>Side Note</h1> <p>Oh. by the way</p> </div> </div> <div id="footer"> <p>Copyright 2012 (c)</p> </div> <header> <hgroup> <h1>My Page</h1> <h2>Life.

Canvas .

Canvas Context methods beginPath() moveTo() lineTo() fill() fillRect() arc() .

SVG .

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 .Canvas vs.

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

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

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

mp4" /> <source src="HTML5Rocks. .Video <video controls loop poster=“HTML5Rocks.webm" /> <source src="HTML5Rocks.wma” /> </video> The browser will use the first recognized format.ogv" /> <source src=“HTML5Rocks.png"> <source src=“HTML5Rocks.

Video Support .

wav" /> </audio> .Audio <audio controls loop> <source src="yyy.mp3" /> <source src="yyy.ogg" /> <source src="yyy.

Audio Support .

Demo HTML5 .

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

CSS3 Selectors Visible State :enabled :disabled :checked Validati on :valid :invalid :optional :required .

Compatibility Style Browser(s) feature [W3C Standard] -ms-feature IE -moz-feature Firefox -webkit-feature Safari and Chrome -o-feature Opera : #title { x E } transform:rotate(-15deg). -o-transform:rotate(-15deg). . -webkit-transform:rotate(-15deg). -ms-transform:rotate(-15deg). -moz-transform:rotate(-15deg).

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

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

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

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

Transform Rotate Skew Scale .

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

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

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

Demo CSS3 .

data.attributes <div data-firstname="David" id="fName"> var div = getElementById("fName").dataset("firstname"). var fn = div. .

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 .

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

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