View
217
Download
0
Category
Tags:
Preview:
Citation preview
Introduction to HTML5
BySam Nasr, MCAD, MCT, MCTS, MVP
Nasr Information Systems
October 22, 2013
IntroductionSam Nasr (sam@nasr.info)
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>
Simplified MarkupHTML4:
<meta http-equiv="content-type" content="text/html; charset=UTF-8“>
HTML5:<meta charset="utf-8">
Simplified MarkupHTML4:
<link type="text-css" rel="stylesheet" href="MyStyle.css">
HTML5:<link rel="stylesheet" href="MyStyle.css">
Simplified MarkupHTML4:
<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 Infosam@nasr.info
http://ClevelandDotNet.blogspot.com
@SamNasr
http://www.linkedin.com/in/samsnasr
http://speakerrate.com/samnasr
Thank you for attending!
Recommended