Upload
frederic-harper
View
907
Download
0
Embed Size (px)
DESCRIPTION
Une présentation sur HTML5 que j'ai présenté au Day of DotNetNuke au NovaScotia
Citation preview
Nova Scotia Day of DotNetNuke - 2011-06-11
Frederic Harper
HTML5, the new buzzword
The bald guy in the front
Frederic Harper Developer Evangelist @ Microsoft
http://blogs.msdn.com/b/cdndevs/
http://alabase2.com (in french)
http://linkedin.com/in/fredericharper
http://twitter.com/fharper
http://facebook.com/fharper
The rules
#1 - Camp style presentation
#2 - Law of Two Feet
The presentation
1. What is HTML5?
2. Do I have to care about it (HTML5, CSS3
and the lovely JavaScript)?
HTML5 and you
Quizz
A. You use it
B. You will use it
C. You won’t use it
D. You don’t know what I am talking about
HTML5
• Web Standard
• Next version of HTML4 (I know, I’m so brilliant)
• Draft
• 9 new structure tags
• 16 new HTML elements
• 13 new input types
header, footer, nav,
aside, figure,
section, article
<div id=“header”>
<div id=“footer”>
<div id=“sidebar”>
<div id=“nav”>
<div id=“article”>
<div id=“article”>
<div id=“media”>
<div id=“section”>
Traditionnal Website
<header>
<footer>
<aside>
<nav>
<article>
<article>
<figure>
<section>
HTML5 Website (semantic++)
svg
Demo
Code
<svg width="400" height="200">
<rect fill="red" x="20" y="20" width="100" height="75" />
<rect fill="blue" x="50" y="50" width="100" height="75" />
</svg>
canvas
Demo
Code
<canvas id=“myCanvas" width="200" height="200">
Sorry, your browser doesn’t support HTML5
</canvas>
<script type="text/javascript">
var example = document.getElementById(“myCanvas");
var context = example.getContext("2d");
context.fillStyle = "rgb(255,0,0)";
context.fillRect(30, 30, 50, 50);
</script>
video, audio
Demo
Code
<video src="video.mp4" id="videoTag">
<source src="video.webm" />
<a href="http://videolink.com/">
Sorry, your browser doesn’t support HTML5
</a>
<!– Flash/Silverlight video here -->
</video>
Code
<audio src="audio.mp3" id="audioTag" autoplay controls>
<!– Flash/Silverlight audio here -->
</audio>
Geolocalisation
Demo
Code
function getLocation() {
if (navigator.geolocation != undefined) {
navigator.geolocation.getCurrentPosition(callBack);
}
}
function callBack(position) {
var accuracy = position.coords.accuracy;
var latitude = position.coords.latitude;
var longitude = position.coords.longitude;
}
Web Open Font
Format aka WOFF
Code
<style type="text/css">
@font-face {
font-family: MyFont;
src: url('Font.woff');
}
</style>
<div style="font: 24pt MyFont, sans-serif;">
I put my text here as usual.
</div>
CSS3 Media
Queries
Demo
Code
<link href="mobile.css" rel="stylesheet" media="screen and (max-width:480px)“ type="text/css" />
<link href="netbook.css" rel="stylesheet“ media="screen and (min-width:481px) and (max-width: 1024px)“ type="text/css" />
<link href="laptop.css" rel="stylesheet" media="screen and (min-width:1025px)“ type="text/css" />
Unleash the real
power of the Web
I am a .NET developers
You already use HTML
You already (almost) have the tools Visual Studio 2010 SP1
Visual studio 2008 + plugin http://j.mp/mDXyps
You can have help from HTML developers
Next steps
Try it
Read on it
Do a cool project
Have fun!
Ressources
http://www.w3.org/TR/html5/
http://caniuse.com
http://makeawesomeweb.com
http://html5gallery.com
http://html5labs.interoperabilitybridges.com/
http://www.beautyoftheweb.com
Questions? Comments?
Frederic Harper Developer Evangelist @ Microsoft
http://blogs.msdn.com/b/cdndevs/
http://alabase2.com (in french)
http://linkedin.com/in/fredericharper
http://twitter.com/fharper
http://facebook.com/fharper