David-Giard-HTML5-NEWDUG
advertisement
HTML5 is the Future of the Web
HTML5, CSS3,
and new JavaScript APIs
David Giard
Microsoft Technical Evangelist
Hoopy Frood
@DavidGiard
http://davidgiard.com
http://technologyandfriends.com
This presentation
is dedicated to
Dave Bost
@DavidGiard
Space is Big!
“Space is big. You just won't believe
how vastly, hugely, mind- bogglingly
big it is. I mean, you may think it's a
long way down the road to the
chemist's, but that's just peanuts to
space.”
-Douglas Adams, The Hitchhiker’s Guide to the Galaxy
@DavidGiard
HTML5 is Big!
“HTML5 is big. You just won't believe
how vastly, hugely, mind- bogglingly
big it is. I mean, you may think it's a
long way down the road to the
chemist's, but that's just peanuts to
HTML5.”
@DavidGiard
HTML5 is Big!
“HTML5 is big., etc.”
@DavidGiard
Browser Support
• caniuse.com
• html5test.com
@DavidGiard
caniuse.com
@DavidGiard
html5test.com
@DavidGiard
HTML5
CSS3
JavaScript APIs
HTML5
@DavidGiard
What is HTML5?
•
•
•
•
Umbrella of Features
Simpler markup
Semantic markup
New Tags and attributes
@DavidGiard
Simpler Markup
OLD:
<!DOCTYPE html PUBLIC
"-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
NEW:
<!DOCTYPE html>
@DavidGiard
Simpler Markup
OLD:
<meta http-equiv="content-type" content="text/html; charset=UTF-8“>
NEW:
<meta charset="utf-8">
@DavidGiard
Simpler Markup
OLD:
<link type="text-css" rel="stylesheet" href="MyStyle.css">
NEW:
<link rel="stylesheet" href="MyStyle.css">
@DavidGiard
Simpler Markup
OLD:
<script type="text/javascript" src="Myscript.js">
NEW:
<script src="Myscript.js">
OLD:
<script type="text/javascript">
…
</script>
NEW:
<script>
…
</script>
@DavidGiard
Non-Semantic vs Semantic
<em> vs. <i>
Don’t Panic
@DavidGiard
Non-Semantic vs 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>
@DavidGiard
Non-Semantic Markup
<div id="Header">
<div id="Article">
<div id="Aside">
<div id="Footer">
@DavidGiard
Semantic Markup
<Header>
<Article>
<Aside>
<Footer>
@DavidGiard
New Markup
• New tags
• New attributes
• New Form INPUT Types
@DavidGiard
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
@DavidGiard
Figure and Figcaption
<figure>
<img src="babelfish.png">
<figcaption>
The mysterious babelfish
</figcaption>
</figure>
The mysterious babelfish
@DavidGiard
New Attributes
<input type="text"
name="First"
autofocus
placeholder="Enter First Name" />
@DavidGiard
Input Types
<input type= "button"
"checkbox"
"file"
"hidden"
"image"
"password"
"radio"
"reset"
"submit"
"text"
@DavidGiard
Input Types
<input type= "color"
"date"
"datetime"
"datetime-local"
"email"
"month"
"number"
"range"
"search"
"tel"
@DavidGiard
<wbr>
• Word break
• Tells browser where to split a word if it won’t
fit on 1 line.
@DavidGiard
Video
<video
controls
loop
poster="xxx.png"
src="yyy.mp4">
</video>
@DavidGiard
Video
<video controls loop poster="xxx.png">
<source src="yyy.mp4" />
<source src="yyy.ogv" />
<source src="yyy.webm" />
</video>
@DavidGiard
Audio
<audio controls loop>
<source src="yyy.mp3" />
<source src="yyy.ogg" />
<source src="yyy.wav" />
</audio>
@DavidGiard
Demo
@DavidGiard
CSS3
@DavidGiard
CSS Primer
<style>
selector {
style-name: style-value;
}
<LINK REL=StyleSheet
HREF="style.css" TYPE="text/css">
tag {
style-name: style-value;
}
#id {
style-name: style-value;
}
.classname {
style-name: style-value;
}
</style>
@DavidGiard
CSS Primer
<style>
div {
background-color: yellow;
}
</style>
<div>Life, the Universe</div>
<div>and Everything!</div>
Life, the Universe
and Everything!
@DavidGiard
CSS Primer
<style>
#MyDiv {
background-color: green;
}
</style>
<div id="MyDiv">Life, the Universe</div>
<div id="YourDiv">and Everything!</div>
Life, the Universe
and Everything!
@DavidGiard
CSS Primer
<style>
.CoolDiv {
background-color: purple;
}
</style>
<div>Life, the Universe</div>
<div class="CoolDiv">and Everything!</div>
Life, the Universe
and Everything!
@DavidGiard
Validation
input:required {
border:3px solid red;
}
input:invalid {
border:3px solid red;
}
input:valid {
border:3px solid gray;
}
@DavidGiard
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);
}
@DavidGiard
Fonts
@font-face {
font-family: FriendlyFontName;
src: url('fontname.woff') format('woff');
}
selector {
font-family: FriendlyFontName;
}
FontSquirrel.com
@DavidGiard
Text Shadows
div {
text-shadow: horizontal-offset
vertical-offset
blur
color;
}
The Long, Dark Tea Time of the Soul
@DavidGiard
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-of-type(#)
[attr^=value]
[attr$=value]
[attr*=value]
:root
:empty
:target
:not(…)
::selection
@DavidGiard
CSS3 Selectors
Visible State
:enabled
:disabled
:checked
Validation
:valid
:invalid
:optional
:required
@DavidGiard
Resize
selector {
resize: both;
/* none|horizontal|vertical */
overflow: auto;
/* required */
max-width: 600px; /* optional */
max-height: 800px; /* optional */
}
@DavidGiard
Rounded Corners
selector {
border-radius: 2em;
}
selector {
border-top-left-radius:2em;
border-bottom-left-radius:2em;
}
@DavidGiard
Demo
@DavidGiard
Transform
• Rotate
• Skew
• Scale
@DavidGiard
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 */
}
@DavidGiard
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
@DavidGiard
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);
}
@DavidGiard
Demo
@DavidGiard
Animations
@keyframes blackwhite
{
from {background: black;}
to {background: white;}
}
@keyframes blackwhite2
{
0% {background: black;}
100% {background: white;}
}
@DavidGiard
Animations
@keyframes blackgraywhite
{
0% {background: #000000;}
25% {background: #777777;}
50% {background: #aaaaaa;}
75% {background: #dddddd;}
100% {background: #ffffff;}
}
@-ms-keyframes
blackgraywhite
@-webkit-keyframes
@-o-keyframes
@-moz-keyframes
blackgraywhite
blackgraywhite
blackgraywhite
{{{
0%
0%
0% {background:
{background:
{background:#000000;}
#000000;}
#000000;}
25%
25%
25% {background:
{background:
{background:#777777;}
#777777;}
#777777;}
50%
50%
50% {background:
{background:
{background:#aaaaaa;}
#aaaaaa;}
#aaaaaa;}
75%
#dddddd;}
75%
75% {background:
{background:
{background:#dddddd;}
#dddddd;}
100%
{background:
#ffffff;}
100%
100%{background:
{background:#ffffff;}
#ffffff;}
}}}
selection
{
animation: blackgraywhite 8s; infinite alternate;
}
@DavidGiard
Transitions
selector {
background: white;
color:green
transition: background 2s;
}
selector:hover {
background: green;
color:white
}
@DavidGiard
Transitions
selector {
background: white;
color:green
transition: all 2s;
}
selector:hover {
background: green;
color:white
}
@DavidGiard
Transitions
selector {
background: white;
color:green
transition: background 2s;
ms-transition: background 2s;
webkit-transition: background 2s;
moz-transition: background 2s;
o-transition: background 2s;
}
selector:hover {
background: green;
color:white
}
@DavidGiard
Demo
@DavidGiard
JavaScript APIs
@DavidGiard
Detecting Browser Capabilities
• Modernizr.com
• <script src="modernizr-2.5.3.js" />
• Detect HTML capabilities
– Modernizr.canvas
– Modernizr.dragandrop
– Modernizr.audio
– Modernizr.localstorage
– etc.
@DavidGiard
Selecting Elements
document.getElementsByClassName ("Class1")
Returns Set
document.querySelector ("#Div1")
Returns First
document.querySelectorAll (".Class1")
Returns Set
@DavidGiard
Selecting Elements
• Select children
var x1 = document.querySelectorAll (".MyClass");
var x2 = x1.querySelectorAll ("span");
@DavidGiard
Canvas
<canvas
width="500" height="500"
id="MyCanvas">
</canvas>
<script>
var canvas = document.getElementById("MyCanvas");
ctx = canvas.getContext("2d");
</script>
@DavidGiard
Canvas
Context methods
• beginPath()
• moveTo()
• lineTo()
• fill()
• fillRect()
• arc()
@DavidGiard
data- attributes
<div data-firstname="David" id="fName">
var div = getElementById("fName");
var fn = div.data("firstname");
@DavidGiard
Web Storage
• Capacity: 2-10MB (W3C recommends 5MB)
• Local Storage vs Session Storage
@DavidGiard
Demo
@DavidGiard
Drag and Drop
@DavidGiard
Drag and Drop
• Source Events
– dragstart
– drag
– dragend
• Target Events
– dragenter
– dragover
– dragleave
– drop
@DavidGiard
Drag and Drop
<style>
[draggable="true"]
{
-moz-user-select: none;
-khtml-user-select: none;
-webkit-user-select: none;
user-select: none;
// Safari support
-khtml-user-drag: element;
-webkit-user-drag: element;
}
</style>
@DavidGiard
Drag and Drop
<img id="fish"
draggable="true"
src="babelfish.png" />
Source
<div id="targetDiv" data-role="drag-drop-container"></div>
Target
@DavidGiard
Drag and Drop
var dragStart = function(e) {
try {
e.dataTransfer.setData('text/plain', e.target.id);
} catch (ex) {
e.dataTransfer.setData(‘Text', e.target.id);
}
}
var dropped = function(e) {
cancel(e);
var id;
try {
id = e.dataTransfer.getData('text/plain');
} catch (ex) {
id = e.dataTransfer.getData('Text');
}
e.target.appendChild(document.querySelector('#' + id));
}
@DavidGiard
Drag and Drop
var cancel = function(e) {
e.preventDefault();
e.stopPropagation();
};
@DavidGiard
Drag and Drop
source.addEventListener('dragstart', dragStart,false);
target.addEventListener('drop', dropped,false);
target.addEventListener('dragenter', cancel,false);
target.addEventListener('dragover', cancel,false);
@DavidGiard
Demo
@DavidGiard
GeoLocation
@DavidGiard
GeoLocation
•
•
•
•
Separate spec from HTML5
Determine location of browser
Sharing Location must be turned on
Location based on
–
–
–
–
–
IP address
GPS
WiFi
Cell phone tower
User-defined settings
@DavidGiard
GeoLocation
navigator.geolocation.getCurrentPosition(
showPosition,
showError
);
“Success” function
“Error” function
function showPosition(position){
var coords = position.coords;
var lat = coords.latitude;
var lng = coords.longitude;
…
}
function showError(e) {
var errorCode = e.code;
…
}
@DavidGiard
GeoLocation
• position.coords properites
– latitude
– longitude
– accuracy
– altitude
– altitudeAccuracy
– heading
– speed
– timestamp
@DavidGiard
Demo
@DavidGiard
Resources
• aka.ms/MVA
• tinyurl.com/BizSparkInfo
@DavidGiard
So long
and thanks
for all the fish!
@DavidGiard
David Giard
• @DavidGiard
• DavidGiard.com
• TechnologyAndFriends.com
@DavidGiard
