View
217
Download
0
Category
Preview:
Citation preview
Application Development with HTML5
Brandon SatromWeb EvangelistMicrosoft
About Me
www.userinexperience.com@BrandonSatrombrsatrom@microsoft.com
Husband and fatherDeveloper evangelist, MicrosoftWeb developer for lifeBased in Austin, TX
All or none of these?
What is “HTML5”? The direction the web is going?
What’s new and interesting on the web?
Just some new markup?
“Upgrade the site to HTML5? by close of business TOMORROW?”
What does “HTML5” Mean to YOU?*
How you evaluate HTML5 technologiesWhat you choose to adoptHow you implement themAND how to avoid leaving older browsers behind
*Tattoos optional
Agenda
Defining HTML5The five most important words about HTML5HTML5: mix tape editionSome thoughts on development toolsStuff you should learn
Defining HTML5*
*Air Quotes Required
“ ”=HTML CSS 3JavaScript
APIs++ GeolocationWeb StorageWeb SocketsFileAPIMedia CaptureIndexedDBEtc…
MarkupFormsARIAMicrodataCanvasVideoEtc…
SelectorsMedia Queries FontsTransformsTransitionsAnimationsEtc…
Technology Areas of HTML5Performance
3D Effects
Semantics Styling Multimedia
Device Access
ConnectivityOffline & Storage
First Published Working Draft Working Draft Last Call Candidate
Recommendation Recommendation
“I’m Just a Spec, Yes Only a Spec”
GeolocationMedia QueriesWAI-ARIA
Server-Sent EventsSVG 1.1 (2nd Ed)Web WorkersWOFF
MathMLSVG 1.1Selectors (L3)
CanvasFontsFormsMarkupMessaging
MicrodataTransformsTransitionsWeb SocketsWeb Storage
The Five Most Important Words about HTML5*
* “Validation” isn’t one of them.
#1 – Hyperbole*
*It’s the best thing ever!
Next Up, an Album of Tony Bennett Covers…
“Don’t Believe the Hype…”
“Taffeta phrases, silken phrases precise, three-piled hyperbole, spruce
affectation, figures pedantical — these summer flies have blown me full of
maggot ostentation. I do forswear them.”
– William Shakespeare
Do believe that HTML5 is changing everything.
“The future of the web is HTML5.”– Dean Hachamovitch, Microsoft
“We’re betting big on HTML5.” – Vic Gundotra, Google
“The world is moving to HTML5.” – Steve Jobs, Apple
#2 - Compatibility*
*Your GeoCities sites are safe.
The Web is the Largest Legacy Software System in the History of the Universe
#3 - Semantics*
*Tags have meaning.
Neutral vs. Rich Semantics
<div><div
id=“header”><header>
#4 – JavaScript*
*It’s not your father’s scripting language. Well, ok... actually it is.
JavaScript and the Growth of the Client
Client Server Database
JavaScript
1990’s
Client Server Database
JavaScript
2000’s
Client Server Database
JavaScript
Today
#5 – Polyfills*
*It’s like shims in JavaScript…for hipsters.
Ex. Polyfills with Modernizr
Not supported in older browsers!
“Polyfill” support with a jQuery plugin
article { -moz-border-radius:10px; -webkit-border-radius:10px; border-radius:10px; }
$(function() { if (!Modernizr.borderradius) { // Use a jQuery plugin to round those corners $.getScript("js/jquery.corner.js", function () { $("article").corner(); }); }});
HTML5: Mix Tape Edition*
* Things you should use, things you should polyfill and things you should experiment with and prototype.
Adopt (and Polyfill)*
*Mature, Site-Ready HTML5
Semantic Markup*
*Alas, poor <div>, I hardly knew ye.
A Sample XHTML Document
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html>
<head><meta http-equiv="content-type"
content="text/html; charset=utf-8">
</head><body>
<p> XHTML :/ </p></body>
</html>
A Sample HTML5 Document
<!DOCTYPE html><html>
<head><meta charset="utf-8"><title> Hello </title>
</head><body>
<p> HTML5! </p></body>
</html>
article footer rtaside header rubyaudio hgroup sectioncanvas keygen sourcecommand mark summarydatalist meter timeembed output wbrfigcaption progressfigure rp
28 New Elements
article footer rtaside header rubyaudio hgroup sectioncanvas keygen sourcecommand mark summarydatalist meter timeembed output wbrfigcaption progressfigure rp
demo
Semantic Markup
Canvas and SVG*
*Your old Nintendo games, reborn! (Plus DOOM)
<canvas> + JavaScript = Crazy Deliciousvar canvasContext = document.getElementById("canvas") .getContext("2d"); canvasContext.fillRect(250, 25, 150, 100); canvasContext.beginPath(); canvasContext.arc(450, 110, 100,
Math.PI * 1/2, Math.PI * 3/2); canvasContext.lineWidth = 15; canvasContext.lineCap = 'round'; canvasContext.strokeStyle =
'rgba(255, 127, 0, 0.5)'; canvasContext.stroke();
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 220.5 199.5"> <title>HTML5 CSS Styling Logo</title> <path d="M32.8,0L25.4,37.0 176.0,37.0 171.3,60.9 20.6,60.9 13.3,97.9 163.9,97.9 155.5,140.1 94.8,160.2 42.2,140.1 45.8,121.8 8.8,121.8 0,166.2 87.0,199.5 187.3,166.2 200.6,99.4 203.3,86.0 220.4,0z"/></svg>
<style> svg path { fill: navy; }</style>
<svg> + <html> = Stylable, Scriptable SVG
demo
<canvas> and <svg>
Audio and Video*
*Media without Plugins, but lots of Codecs
Media on Your Page… No Plugins Required.<video id=“video" controls autoplay> <source src="video.mp4" type="video/mp4“ /></video>document.getElementById("video").play();
<audio id="audio" src="sound.mp3" controls></audio>document.getElementById("audio").muted = false;
demo
<video>
Geolocation*
*Now you can try Geocaching with your ten pound laptop.
You are (within a Few Hundred Meters of) Here
//Get my location, and put it on a mapnavigator.geolocation.getCurrentPosition(function(position) { var location = new Microsoft.Maps.Location(
position.coords.latitude, position.coords.longitude); _map.setView({ zoom: 18, center: location }); var pin = new Microsoft.Maps.Pushpin(location); _map.entities.push(pin);}, errorHandler);
demo
Geolocation
Storage*
*Watch those cookies crumble…
Working with localStorage
$('#save').click(function () { window.localStorage.setItem('name',$('#name').val()); window.localStorage.email = $('#email').val(); });
$('#name').val(window.localStorage.getItem('name'));$('#email').val(window.localStorage.email);
demo
Local Storage
Experiment*, Prototype, Give Feedback…
* Use IE10 PP and Html5 Labs to try out upcoming features.
Site Ready HTML5
Microsoft Approach
Invest on Interoperability
Work with Developers
Innovate with Emerging Standards
Platform Preview 1
PP2PP3
PP4Beta
PP6PP7
PP8RTM
PP1 & PP2
Work with Developers
3.16.10 5.5.10 6.23.10 8.4.10 9.15.10 10.28.10 11.17.10 2.10.11 3.14.11 4.12.11 6.29.11
New in IE10:
CSS3 FlexboxCSS3 GradientECMAScript StrictWeb WorkersForms & ValidationDrag and DropFile API
IE 10
FileAPI – File Objects in Web Apps
var file = document.getElementById('file').files[0];document.getElementById('name').textContent = file.fileName;document.getElementById('size').textContent = file.fileSize; var reader = new FileReader();reader.readAsText(file);
Evi
lPla
ns.t
xt
Name
Size
Data
demo
IE10 PP2 & File API
Innovate with Emerging Standards
Web Sockets – Real Time Connections
var socket = new WebSocketDraft('ws://my.websocket.org/echo');socket.onopen = function(event) { socket.send('Hello, WebSocket');};socket.onmessage = function(event) { alert(event.data); }socket.onclose = function(event) { alert('closed'); }
Ser
verClient
TCP
HTTP
demo
HTML5 Labs and Web Sockets
HTML5 in Web Technologies
VS 2010 SP1 – HTML5 Schema and IntellisenseWebMatrix – HTML5 default doctype
ASP.NET MVC 3 tools updateHTML5 template for new projectsModernizr 1.7 included in new projects
Expression Web 4 SP1 – HTML5 Schema and IntellisenseRicher CSS style editingSuperPreview Page Interaction Mode and Online Service
Things You Need to Learn (a.k.a. Resources)
Read two good HTML5 booksRead a good CSS3 bookRelearn JavaScript
Learn a JavaScript framework jQuery, for instance
Learn the dev tools in your favorite browser
IE9? Just hit F12!
Go Start Using HTML5 Today!
Adopt
– Semantic Markup– Canvas– Audio and Video– Geolocation– Web Storage– CSS3
Experiment – IE10 Platform Preview– HTML5 Labs
@BrandonSatromwww.userinexperience.combrsatrom@microsoft.com
Slides and Demos :: http://bit.ly/ivQATJ
Recommended