IntroToHTML5 - Cleveland C#/VB.NET Users Group

Download Report

Transcript IntroToHTML5 - Cleveland C#/VB.NET Users Group 

Introduction to HTML5
By
Sam Nasr, MCAD, MCT, MCTS, MVP
Nasr Information Systems
October 22, 2013
Introduction
Sam Nasr ([email protected])
 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
[email protected]
http://ClevelandDotNet.blogspot.com
@SamNasr
http://www.linkedin.com/in/samsnasr
http://speakerrate.com/samnasr
Thank you for attending!