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

Introduction to HTML5

BySam Nasr, MCAD, MCT, MCTS, MVP

Nasr Information Systems

October 22, 2013

IntroductionSam Nasr ([email protected])

Software developer since 1995Independent Software Consultant (Nasr Information

Systems)MCAD, MCT, MCTS(WSS/MOSS)President - Cleveland C#/VB.Net User GroupPresident – Cleveland WPF User GroupPresident - .Net Study GroupINETA Mentor for OhioINETA Community Champ (2010, 2013)Author for Visual Studio MagazineMicrosoft Most Valuable Professional (2013)

HousekeepingForum for learning

Feel free to ask questions

Cell Phones on vibrate please

AgendaBrowser CompatibilityNew Features in HTML5

Simplified MarkupNew AttributesNew Tags

New Features in CSS3SelectorsAdvanced Layout and Animation

New JavaScript API

Why HTML5?UbiquitousEase of DevelopmentWidely SupportedForged by many tech leadersBetter PerformanceMore Capabilities

Browser Supportcaniuse.comhtml5test.com

caniuse.com

html5test.com

Simplified MarkupHTML4:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

HTML5:<!DOCTYPE html>


<meta http-equiv="content-type" content="text/html; charset=UTF-8“>

HTML5:<meta charset="utf-8">


<link type="text-css" rel="stylesheet" href="MyStyle.css">

HTML5:<link rel="stylesheet" href="MyStyle.css">


<script type="text/javascript" src="Myscript.js"><script type="text/javascript">

…</script>

HTML5:<script src="Myscript.js"><script>

…</script>

New Tagsarticle 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="Aside">

<div id="Footer">

Semantic Markup<Header>

<Article> <Aside>

<Footer>

Semantic <header> <hgroup> <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> </aside> </article> <footer> <p>Copyright 2012 (c)</p> </footer>

<div class="header"> <h1>My Page</h1> <h2>Life, 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, by the way</p> </div> </div> <div id="footer"> <p>Copyright 2012 (c)</p> </div>

Canvas

CanvasContext methodsbeginPath()moveTo()lineTo()fill()fillRect()arc()

SVG

Canvas vs. SVGCanvas

Not a drawing object, only a containerOnly used for drawing and redrawing via

JavaScriptUsed for many HTML5 games due to

performance impact

SVGEvery object manipulated via the DOMCould 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""email""month""number""range""search""tel""time""url""week"

Validation input:required {

border:3px solid red; }

input:valid {border:3px solid gray;

}

Video <video controls loop poster=“HTML5Rocks.png"> <source src=“HTML5Rocks.mp4" /> <source src="HTML5Rocks.ogv" /> <source src=“HTML5Rocks.webm" /> <source src="HTML5Rocks.wma” /></video>

The browser will use the first recognized format.

Video Support

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

Audio Support

DemoHTML5

CSS3 SelectorsPosition Values Misc

: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 SelectorsVisible State

Validation

:enabled:disabled:checked

:valid:invalid:optional:required

CompatibilityStyle Browser(s)

feature [W3C Standard]

-ms-feature IE

-moz-feature Firefox

-webkit-feature Safari and Chrome

-o-feature Opera

#title {transform:rotate(-15deg);-ms-transform:rotate(-15deg); -moz-transform:rotate(-15deg);-webkit-transform:rotate(-15deg);-o-transform:rotate(-15deg);

}

Ex:

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

selector { font-family: FriendlyFontName;}

FontSquirrel.com

Text Shadowsdiv { text-shadow: horizontal-offset vertical-offset blur color;}

The Long, Dark Tea Time of the SoulThe 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 Cornersselector { border-radius: 2em;}

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

TransformRotateSkewScale

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

DemoCSS3

data- attributes<div data-firstname="David" id="fName">

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

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

DemoJavaScript API

RecapBrowser CompatibilityNew Features in HTML5

Simplified MarkupNew AttributesNew Tags

New Features in CSS3SelectorsAdvanced Layout and Animation

New JavaScript API

ResourcesHTML5 Rocks

http://www.html5rocks.com

Developing HTML5 Jump Starthttp://channel9.msdn.com/Series/Developing-

HTML-5-Apps-Jump-Start

.Net Study Grouphttp://www.meetup.com/Net-Study-Group/files/

Contact [email protected]

http://ClevelandDotNet.blogspot.com

@SamNasr

http://www.linkedin.com/in/samsnasr

http://speakerrate.com/samnasr

Thank you for attending!

Documents

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