IntroToHTML5 - Cleveland C#/VB.NET Users Group
advertisement
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
Browser Support
caniuse.com
html5test.com
caniuse.com
html5test.com
Simplified Markup
HTML4:
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
HTML5:
<!DOCTYPE html>
Simplified Markup
HTML4:
<meta http-equiv="content-type" content="text/html; charset=UTF8“>
HTML5:
<meta charset="utf-8">
Simplified Markup
HTML4:
<link type="text-css" rel="stylesheet" href="MyStyle.css">
HTML5:
<link rel="stylesheet" href="MyStyle.css">
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>
Semantic
<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>
<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>
Canvas
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"
"email"
"month"
"number"
"range"
"search"
"tel"
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
Demo
HTML5
CSS3 Selectors
Position
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-oftype(#)
[attr^=value]
[attr$=value]
[attr*=value]
:root
:empty
:target
:not(…)
::selection
CSS3 Selectors
Visible State
:enabled
:disabled
:checked
Validation
: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 {
transform:rotate(-15deg);
-ms-transform:rotate(-15deg);
-moz-transform:rotate(-15deg);
-webkit-transform:rotate(-15deg);
-o-transform:rotate(-15deg);
}
Fonts
@font-face {
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 */
}
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);
}
Skew
Selector
{
transform: scale(factor);
Scale
-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
<div data-firstname="David" id="fName">
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
http://www.html5rocks.com
Developing HTML5 Jump Start
http://channel9.msdn.com/Series/Developing-HTML-5Apps-Jump-Start
.Net Study Group
http://www.meetup.com/Net-Study-Group/files/
Contact Info
sam@nasr.info
http://ClevelandDotNet.blogspot.com
@SamNasr
http://www.linkedin.com/in/samsnasr
http://speakerrate.com/samnasr
Thank you for attending!
