introduction to html5 by sam nasr, mcad, mct, mcts, mvp nasr information systems october 22, 2013
TRANSCRIPT
![Page 1: Introduction to HTML5 By Sam Nasr, MCAD, MCT, MCTS, MVP Nasr Information Systems October 22, 2013](https://reader038.vdocument.in/reader038/viewer/2022102900/551512ee55034673228b4a90/html5/thumbnails/1.jpg)
Introduction to HTML5
BySam Nasr, MCAD, MCT, MCTS, MVP
Nasr Information Systems
October 22, 2013
![Page 2: Introduction to HTML5 By Sam Nasr, MCAD, MCT, MCTS, MVP Nasr Information Systems October 22, 2013](https://reader038.vdocument.in/reader038/viewer/2022102900/551512ee55034673228b4a90/html5/thumbnails/2.jpg)
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)
![Page 3: Introduction to HTML5 By Sam Nasr, MCAD, MCT, MCTS, MVP Nasr Information Systems October 22, 2013](https://reader038.vdocument.in/reader038/viewer/2022102900/551512ee55034673228b4a90/html5/thumbnails/3.jpg)
HousekeepingForum for learning
Feel free to ask questions
Cell Phones on vibrate please
![Page 4: Introduction to HTML5 By Sam Nasr, MCAD, MCT, MCTS, MVP Nasr Information Systems October 22, 2013](https://reader038.vdocument.in/reader038/viewer/2022102900/551512ee55034673228b4a90/html5/thumbnails/4.jpg)
AgendaBrowser CompatibilityNew Features in HTML5
Simplified MarkupNew AttributesNew Tags
New Features in CSS3SelectorsAdvanced Layout and Animation
New JavaScript API
![Page 5: Introduction to HTML5 By Sam Nasr, MCAD, MCT, MCTS, MVP Nasr Information Systems October 22, 2013](https://reader038.vdocument.in/reader038/viewer/2022102900/551512ee55034673228b4a90/html5/thumbnails/5.jpg)
Why HTML5?UbiquitousEase of DevelopmentWidely SupportedForged by many tech leadersBetter PerformanceMore Capabilities
![Page 6: Introduction to HTML5 By Sam Nasr, MCAD, MCT, MCTS, MVP Nasr Information Systems October 22, 2013](https://reader038.vdocument.in/reader038/viewer/2022102900/551512ee55034673228b4a90/html5/thumbnails/6.jpg)
Browser Supportcaniuse.comhtml5test.com
![Page 7: Introduction to HTML5 By Sam Nasr, MCAD, MCT, MCTS, MVP Nasr Information Systems October 22, 2013](https://reader038.vdocument.in/reader038/viewer/2022102900/551512ee55034673228b4a90/html5/thumbnails/7.jpg)
caniuse.com
![Page 8: Introduction to HTML5 By Sam Nasr, MCAD, MCT, MCTS, MVP Nasr Information Systems October 22, 2013](https://reader038.vdocument.in/reader038/viewer/2022102900/551512ee55034673228b4a90/html5/thumbnails/8.jpg)
html5test.com
![Page 9: Introduction to HTML5 By Sam Nasr, MCAD, MCT, MCTS, MVP Nasr Information Systems October 22, 2013](https://reader038.vdocument.in/reader038/viewer/2022102900/551512ee55034673228b4a90/html5/thumbnails/9.jpg)
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>
![Page 10: Introduction to HTML5 By Sam Nasr, MCAD, MCT, MCTS, MVP Nasr Information Systems October 22, 2013](https://reader038.vdocument.in/reader038/viewer/2022102900/551512ee55034673228b4a90/html5/thumbnails/10.jpg)
Simplified MarkupHTML4:
<meta http-equiv="content-type" content="text/html; charset=UTF-8“>
HTML5:<meta charset="utf-8">
![Page 11: Introduction to HTML5 By Sam Nasr, MCAD, MCT, MCTS, MVP Nasr Information Systems October 22, 2013](https://reader038.vdocument.in/reader038/viewer/2022102900/551512ee55034673228b4a90/html5/thumbnails/11.jpg)
Simplified MarkupHTML4:
<link type="text-css" rel="stylesheet" href="MyStyle.css">
HTML5:<link rel="stylesheet" href="MyStyle.css">
![Page 12: Introduction to HTML5 By Sam Nasr, MCAD, MCT, MCTS, MVP Nasr Information Systems October 22, 2013](https://reader038.vdocument.in/reader038/viewer/2022102900/551512ee55034673228b4a90/html5/thumbnails/12.jpg)
Simplified MarkupHTML4:
<script type="text/javascript" src="Myscript.js"><script type="text/javascript">
…</script>
HTML5:<script src="Myscript.js"><script>
…</script>
![Page 13: Introduction to HTML5 By Sam Nasr, MCAD, MCT, MCTS, MVP Nasr Information Systems October 22, 2013](https://reader038.vdocument.in/reader038/viewer/2022102900/551512ee55034673228b4a90/html5/thumbnails/13.jpg)
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
![Page 14: Introduction to HTML5 By Sam Nasr, MCAD, MCT, MCTS, MVP Nasr Information Systems October 22, 2013](https://reader038.vdocument.in/reader038/viewer/2022102900/551512ee55034673228b4a90/html5/thumbnails/14.jpg)
Non-Semantic Markup<div id="Header">
<div id="Article"> <div id="Aside">
<div id="Footer">
![Page 15: Introduction to HTML5 By Sam Nasr, MCAD, MCT, MCTS, MVP Nasr Information Systems October 22, 2013](https://reader038.vdocument.in/reader038/viewer/2022102900/551512ee55034673228b4a90/html5/thumbnails/15.jpg)
Semantic Markup<Header>
<Article> <Aside>
<Footer>
![Page 16: Introduction to HTML5 By Sam Nasr, MCAD, MCT, MCTS, MVP Nasr Information Systems October 22, 2013](https://reader038.vdocument.in/reader038/viewer/2022102900/551512ee55034673228b4a90/html5/thumbnails/16.jpg)
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>
![Page 17: Introduction to HTML5 By Sam Nasr, MCAD, MCT, MCTS, MVP Nasr Information Systems October 22, 2013](https://reader038.vdocument.in/reader038/viewer/2022102900/551512ee55034673228b4a90/html5/thumbnails/17.jpg)
Canvas
![Page 18: Introduction to HTML5 By Sam Nasr, MCAD, MCT, MCTS, MVP Nasr Information Systems October 22, 2013](https://reader038.vdocument.in/reader038/viewer/2022102900/551512ee55034673228b4a90/html5/thumbnails/18.jpg)
CanvasContext methodsbeginPath()moveTo()lineTo()fill()fillRect()arc()
![Page 19: Introduction to HTML5 By Sam Nasr, MCAD, MCT, MCTS, MVP Nasr Information Systems October 22, 2013](https://reader038.vdocument.in/reader038/viewer/2022102900/551512ee55034673228b4a90/html5/thumbnails/19.jpg)
SVG
![Page 20: Introduction to HTML5 By Sam Nasr, MCAD, MCT, MCTS, MVP Nasr Information Systems October 22, 2013](https://reader038.vdocument.in/reader038/viewer/2022102900/551512ee55034673228b4a90/html5/thumbnails/20.jpg)
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
![Page 21: Introduction to HTML5 By Sam Nasr, MCAD, MCT, MCTS, MVP Nasr Information Systems October 22, 2013](https://reader038.vdocument.in/reader038/viewer/2022102900/551512ee55034673228b4a90/html5/thumbnails/21.jpg)
New Attributes<input type="text"
name="First" autofocus placeholder="Enter First Name" />
![Page 22: Introduction to HTML5 By Sam Nasr, MCAD, MCT, MCTS, MVP Nasr Information Systems October 22, 2013](https://reader038.vdocument.in/reader038/viewer/2022102900/551512ee55034673228b4a90/html5/thumbnails/22.jpg)
Input Types<input type= "color"
"date""datetime""datetime-local""email""month""number""range""search""tel""time""url""week"
![Page 23: Introduction to HTML5 By Sam Nasr, MCAD, MCT, MCTS, MVP Nasr Information Systems October 22, 2013](https://reader038.vdocument.in/reader038/viewer/2022102900/551512ee55034673228b4a90/html5/thumbnails/23.jpg)
Validation input:required {
border:3px solid red; }
input:valid {border:3px solid gray;
}
![Page 24: Introduction to HTML5 By Sam Nasr, MCAD, MCT, MCTS, MVP Nasr Information Systems October 22, 2013](https://reader038.vdocument.in/reader038/viewer/2022102900/551512ee55034673228b4a90/html5/thumbnails/24.jpg)
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.
![Page 25: Introduction to HTML5 By Sam Nasr, MCAD, MCT, MCTS, MVP Nasr Information Systems October 22, 2013](https://reader038.vdocument.in/reader038/viewer/2022102900/551512ee55034673228b4a90/html5/thumbnails/25.jpg)
Video Support
![Page 26: Introduction to HTML5 By Sam Nasr, MCAD, MCT, MCTS, MVP Nasr Information Systems October 22, 2013](https://reader038.vdocument.in/reader038/viewer/2022102900/551512ee55034673228b4a90/html5/thumbnails/26.jpg)
Audio <audio controls loop> <source src="yyy.mp3" /> <source src="yyy.ogg" /> <source src="yyy.wav" /> </audio>
![Page 27: Introduction to HTML5 By Sam Nasr, MCAD, MCT, MCTS, MVP Nasr Information Systems October 22, 2013](https://reader038.vdocument.in/reader038/viewer/2022102900/551512ee55034673228b4a90/html5/thumbnails/27.jpg)
Audio Support
![Page 28: Introduction to HTML5 By Sam Nasr, MCAD, MCT, MCTS, MVP Nasr Information Systems October 22, 2013](https://reader038.vdocument.in/reader038/viewer/2022102900/551512ee55034673228b4a90/html5/thumbnails/28.jpg)
DemoHTML5
![Page 29: Introduction to HTML5 By Sam Nasr, MCAD, MCT, MCTS, MVP Nasr Information Systems October 22, 2013](https://reader038.vdocument.in/reader038/viewer/2022102900/551512ee55034673228b4a90/html5/thumbnails/29.jpg)
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
![Page 30: Introduction to HTML5 By Sam Nasr, MCAD, MCT, MCTS, MVP Nasr Information Systems October 22, 2013](https://reader038.vdocument.in/reader038/viewer/2022102900/551512ee55034673228b4a90/html5/thumbnails/30.jpg)
CSS3 SelectorsVisible State
Validation
:enabled:disabled:checked
:valid:invalid:optional:required
![Page 31: Introduction to HTML5 By Sam Nasr, MCAD, MCT, MCTS, MVP Nasr Information Systems October 22, 2013](https://reader038.vdocument.in/reader038/viewer/2022102900/551512ee55034673228b4a90/html5/thumbnails/31.jpg)
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:
![Page 32: Introduction to HTML5 By Sam Nasr, MCAD, MCT, MCTS, MVP Nasr Information Systems October 22, 2013](https://reader038.vdocument.in/reader038/viewer/2022102900/551512ee55034673228b4a90/html5/thumbnails/32.jpg)
Fonts@font-face { font-family: FriendlyFontName; src: url('fontname.woff') format('woff');}
selector { font-family: FriendlyFontName;}
FontSquirrel.com
![Page 33: Introduction to HTML5 By Sam Nasr, MCAD, MCT, MCTS, MVP Nasr Information Systems October 22, 2013](https://reader038.vdocument.in/reader038/viewer/2022102900/551512ee55034673228b4a90/html5/thumbnails/33.jpg)
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
![Page 34: Introduction to HTML5 By Sam Nasr, MCAD, MCT, MCTS, MVP Nasr Information Systems October 22, 2013](https://reader038.vdocument.in/reader038/viewer/2022102900/551512ee55034673228b4a90/html5/thumbnails/34.jpg)
Resize selector { resize: both; /* none|horizontal|vertical */ overflow: auto; /* required */ max-width: 600px; /* optional */ max-height: 800px; /* optional */}
![Page 35: Introduction to HTML5 By Sam Nasr, MCAD, MCT, MCTS, MVP Nasr Information Systems October 22, 2013](https://reader038.vdocument.in/reader038/viewer/2022102900/551512ee55034673228b4a90/html5/thumbnails/35.jpg)
Rounded Cornersselector { border-radius: 2em;}
selector { border-top-left-radius:2em; border-bottom-left-radius:2em;}
![Page 36: Introduction to HTML5 By Sam Nasr, MCAD, MCT, MCTS, MVP Nasr Information Systems October 22, 2013](https://reader038.vdocument.in/reader038/viewer/2022102900/551512ee55034673228b4a90/html5/thumbnails/36.jpg)
TransformRotateSkewScale
![Page 37: Introduction to HTML5 By Sam Nasr, MCAD, MCT, MCTS, MVP Nasr Information Systems October 22, 2013](https://reader038.vdocument.in/reader038/viewer/2022102900/551512ee55034673228b4a90/html5/thumbnails/37.jpg)
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
![Page 38: Introduction to HTML5 By Sam Nasr, MCAD, MCT, MCTS, MVP Nasr Information Systems October 22, 2013](https://reader038.vdocument.in/reader038/viewer/2022102900/551512ee55034673228b4a90/html5/thumbnails/38.jpg)
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); }
![Page 39: Introduction to HTML5 By Sam Nasr, MCAD, MCT, MCTS, MVP Nasr Information Systems October 22, 2013](https://reader038.vdocument.in/reader038/viewer/2022102900/551512ee55034673228b4a90/html5/thumbnails/39.jpg)
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);}
![Page 40: Introduction to HTML5 By Sam Nasr, MCAD, MCT, MCTS, MVP Nasr Information Systems October 22, 2013](https://reader038.vdocument.in/reader038/viewer/2022102900/551512ee55034673228b4a90/html5/thumbnails/40.jpg)
DemoCSS3
![Page 41: Introduction to HTML5 By Sam Nasr, MCAD, MCT, MCTS, MVP Nasr Information Systems October 22, 2013](https://reader038.vdocument.in/reader038/viewer/2022102900/551512ee55034673228b4a90/html5/thumbnails/41.jpg)
data- attributes<div data-firstname="David" id="fName">
var div = getElementById("fName");var fn = div.dataset("firstname");
![Page 42: Introduction to HTML5 By Sam Nasr, MCAD, MCT, MCTS, MVP Nasr Information Systems October 22, 2013](https://reader038.vdocument.in/reader038/viewer/2022102900/551512ee55034673228b4a90/html5/thumbnails/42.jpg)
Web StorageCapacity: 2-10MB (W3C recommends 5MB)Local Storage vs Session Storage
![Page 43: Introduction to HTML5 By Sam Nasr, MCAD, MCT, MCTS, MVP Nasr Information Systems October 22, 2013](https://reader038.vdocument.in/reader038/viewer/2022102900/551512ee55034673228b4a90/html5/thumbnails/43.jpg)
DemoJavaScript API
![Page 44: Introduction to HTML5 By Sam Nasr, MCAD, MCT, MCTS, MVP Nasr Information Systems October 22, 2013](https://reader038.vdocument.in/reader038/viewer/2022102900/551512ee55034673228b4a90/html5/thumbnails/44.jpg)
RecapBrowser CompatibilityNew Features in HTML5
Simplified MarkupNew AttributesNew Tags
New Features in CSS3SelectorsAdvanced Layout and Animation
New JavaScript API
![Page 45: Introduction to HTML5 By Sam Nasr, MCAD, MCT, MCTS, MVP Nasr Information Systems October 22, 2013](https://reader038.vdocument.in/reader038/viewer/2022102900/551512ee55034673228b4a90/html5/thumbnails/45.jpg)
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/
![Page 46: Introduction to HTML5 By Sam Nasr, MCAD, MCT, MCTS, MVP Nasr Information Systems October 22, 2013](https://reader038.vdocument.in/reader038/viewer/2022102900/551512ee55034673228b4a90/html5/thumbnails/46.jpg)
Contact [email protected]
http://ClevelandDotNet.blogspot.com
@SamNasr
http://www.linkedin.com/in/samsnasr
http://speakerrate.com/samnasr
Thank you for attending!