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

fredh@microsoft.com

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

Demo

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

Demo

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

So Is HTML5 ready yet?

YES and NO

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

fredh@microsoft.com

http://blogs.msdn.com/b/cdndevs/

http://alabase2.com (in french)

http://linkedin.com/in/fredericharper

http://twitter.com/fharper

http://facebook.com/fharper