Application Development with HTML5
description
Transcript of Application Development with HTML5
![Page 1: Application Development with HTML5](https://reader036.fdocuments.in/reader036/viewer/2022062314/56813ada550346895da32088/html5/thumbnails/1.jpg)
Application Development with HTML5
Brandon SatromWeb EvangelistMicrosoft
![Page 2: Application Development with HTML5](https://reader036.fdocuments.in/reader036/viewer/2022062314/56813ada550346895da32088/html5/thumbnails/2.jpg)
About Me
www.userinexperience.com@[email protected]
Husband and fatherDeveloper evangelist, MicrosoftWeb developer for lifeBased in Austin, TX
![Page 3: Application Development with HTML5](https://reader036.fdocuments.in/reader036/viewer/2022062314/56813ada550346895da32088/html5/thumbnails/3.jpg)
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?
![Page 4: Application Development with HTML5](https://reader036.fdocuments.in/reader036/viewer/2022062314/56813ada550346895da32088/html5/thumbnails/4.jpg)
“Upgrade the site to HTML5? by close of business TOMORROW?”
![Page 5: Application Development with HTML5](https://reader036.fdocuments.in/reader036/viewer/2022062314/56813ada550346895da32088/html5/thumbnails/5.jpg)
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
![Page 6: Application Development with HTML5](https://reader036.fdocuments.in/reader036/viewer/2022062314/56813ada550346895da32088/html5/thumbnails/6.jpg)
Agenda
Defining HTML5The five most important words about HTML5HTML5: mix tape editionSome thoughts on development toolsStuff you should learn
![Page 7: Application Development with HTML5](https://reader036.fdocuments.in/reader036/viewer/2022062314/56813ada550346895da32088/html5/thumbnails/7.jpg)
Defining HTML5*
*Air Quotes Required
![Page 8: Application Development with HTML5](https://reader036.fdocuments.in/reader036/viewer/2022062314/56813ada550346895da32088/html5/thumbnails/8.jpg)
“ ”=HTML CSS 3JavaScript
APIs++ GeolocationWeb StorageWeb SocketsFileAPIMedia CaptureIndexedDBEtc…
MarkupFormsARIAMicrodataCanvasVideoEtc…
SelectorsMedia Queries FontsTransformsTransitionsAnimationsEtc…
![Page 9: Application Development with HTML5](https://reader036.fdocuments.in/reader036/viewer/2022062314/56813ada550346895da32088/html5/thumbnails/9.jpg)
Technology Areas of HTML5Performance
3D Effects
Semantics Styling Multimedia
Device Access
ConnectivityOffline & Storage
![Page 10: Application Development with HTML5](https://reader036.fdocuments.in/reader036/viewer/2022062314/56813ada550346895da32088/html5/thumbnails/10.jpg)
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
![Page 11: Application Development with HTML5](https://reader036.fdocuments.in/reader036/viewer/2022062314/56813ada550346895da32088/html5/thumbnails/11.jpg)
The Five Most Important Words about HTML5*
* “Validation” isn’t one of them.
![Page 12: Application Development with HTML5](https://reader036.fdocuments.in/reader036/viewer/2022062314/56813ada550346895da32088/html5/thumbnails/12.jpg)
#1 – Hyperbole*
*It’s the best thing ever!
![Page 13: Application Development with HTML5](https://reader036.fdocuments.in/reader036/viewer/2022062314/56813ada550346895da32088/html5/thumbnails/13.jpg)
Next Up, an Album of Tony Bennett Covers…
![Page 14: Application Development with HTML5](https://reader036.fdocuments.in/reader036/viewer/2022062314/56813ada550346895da32088/html5/thumbnails/14.jpg)
“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
![Page 15: Application Development with HTML5](https://reader036.fdocuments.in/reader036/viewer/2022062314/56813ada550346895da32088/html5/thumbnails/15.jpg)
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
![Page 16: Application Development with HTML5](https://reader036.fdocuments.in/reader036/viewer/2022062314/56813ada550346895da32088/html5/thumbnails/16.jpg)
#2 - Compatibility*
*Your GeoCities sites are safe.
![Page 17: Application Development with HTML5](https://reader036.fdocuments.in/reader036/viewer/2022062314/56813ada550346895da32088/html5/thumbnails/17.jpg)
The Web is the Largest Legacy Software System in the History of the Universe
![Page 18: Application Development with HTML5](https://reader036.fdocuments.in/reader036/viewer/2022062314/56813ada550346895da32088/html5/thumbnails/18.jpg)
#3 - Semantics*
*Tags have meaning.
![Page 19: Application Development with HTML5](https://reader036.fdocuments.in/reader036/viewer/2022062314/56813ada550346895da32088/html5/thumbnails/19.jpg)
Neutral vs. Rich Semantics
<div><div
id=“header”><header>
![Page 20: Application Development with HTML5](https://reader036.fdocuments.in/reader036/viewer/2022062314/56813ada550346895da32088/html5/thumbnails/20.jpg)
#4 – JavaScript*
*It’s not your father’s scripting language. Well, ok... actually it is.
![Page 21: Application Development with HTML5](https://reader036.fdocuments.in/reader036/viewer/2022062314/56813ada550346895da32088/html5/thumbnails/21.jpg)
JavaScript and the Growth of the Client
Client Server Database
JavaScript
1990’s
Client Server Database
JavaScript
2000’s
Client Server Database
JavaScript
Today
![Page 22: Application Development with HTML5](https://reader036.fdocuments.in/reader036/viewer/2022062314/56813ada550346895da32088/html5/thumbnails/22.jpg)
#5 – Polyfills*
*It’s like shims in JavaScript…for hipsters.
![Page 23: Application Development with HTML5](https://reader036.fdocuments.in/reader036/viewer/2022062314/56813ada550346895da32088/html5/thumbnails/23.jpg)
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(); }); }});
![Page 24: Application Development with HTML5](https://reader036.fdocuments.in/reader036/viewer/2022062314/56813ada550346895da32088/html5/thumbnails/24.jpg)
HTML5: Mix Tape Edition*
* Things you should use, things you should polyfill and things you should experiment with and prototype.
![Page 25: Application Development with HTML5](https://reader036.fdocuments.in/reader036/viewer/2022062314/56813ada550346895da32088/html5/thumbnails/25.jpg)
Adopt (and Polyfill)*
*Mature, Site-Ready HTML5
![Page 26: Application Development with HTML5](https://reader036.fdocuments.in/reader036/viewer/2022062314/56813ada550346895da32088/html5/thumbnails/26.jpg)
Semantic Markup*
*Alas, poor <div>, I hardly knew ye.
![Page 27: Application Development with HTML5](https://reader036.fdocuments.in/reader036/viewer/2022062314/56813ada550346895da32088/html5/thumbnails/27.jpg)
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>
![Page 28: Application Development with HTML5](https://reader036.fdocuments.in/reader036/viewer/2022062314/56813ada550346895da32088/html5/thumbnails/28.jpg)
A Sample HTML5 Document
<!DOCTYPE html><html>
<head><meta charset="utf-8"><title> Hello </title>
</head><body>
<p> HTML5! </p></body>
</html>
![Page 29: Application Development with HTML5](https://reader036.fdocuments.in/reader036/viewer/2022062314/56813ada550346895da32088/html5/thumbnails/29.jpg)
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
![Page 30: Application Development with HTML5](https://reader036.fdocuments.in/reader036/viewer/2022062314/56813ada550346895da32088/html5/thumbnails/30.jpg)
demo
Semantic Markup
![Page 31: Application Development with HTML5](https://reader036.fdocuments.in/reader036/viewer/2022062314/56813ada550346895da32088/html5/thumbnails/31.jpg)
Canvas and SVG*
*Your old Nintendo games, reborn! (Plus DOOM)
![Page 32: Application Development with HTML5](https://reader036.fdocuments.in/reader036/viewer/2022062314/56813ada550346895da32088/html5/thumbnails/32.jpg)
<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();
![Page 33: Application Development with HTML5](https://reader036.fdocuments.in/reader036/viewer/2022062314/56813ada550346895da32088/html5/thumbnails/33.jpg)
<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
![Page 34: Application Development with HTML5](https://reader036.fdocuments.in/reader036/viewer/2022062314/56813ada550346895da32088/html5/thumbnails/34.jpg)
demo
<canvas> and <svg>
![Page 35: Application Development with HTML5](https://reader036.fdocuments.in/reader036/viewer/2022062314/56813ada550346895da32088/html5/thumbnails/35.jpg)
Audio and Video*
*Media without Plugins, but lots of Codecs
![Page 36: Application Development with HTML5](https://reader036.fdocuments.in/reader036/viewer/2022062314/56813ada550346895da32088/html5/thumbnails/36.jpg)
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;
![Page 37: Application Development with HTML5](https://reader036.fdocuments.in/reader036/viewer/2022062314/56813ada550346895da32088/html5/thumbnails/37.jpg)
demo
<video>
![Page 38: Application Development with HTML5](https://reader036.fdocuments.in/reader036/viewer/2022062314/56813ada550346895da32088/html5/thumbnails/38.jpg)
Geolocation*
*Now you can try Geocaching with your ten pound laptop.
![Page 39: Application Development with HTML5](https://reader036.fdocuments.in/reader036/viewer/2022062314/56813ada550346895da32088/html5/thumbnails/39.jpg)
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);
![Page 40: Application Development with HTML5](https://reader036.fdocuments.in/reader036/viewer/2022062314/56813ada550346895da32088/html5/thumbnails/40.jpg)
demo
Geolocation
![Page 41: Application Development with HTML5](https://reader036.fdocuments.in/reader036/viewer/2022062314/56813ada550346895da32088/html5/thumbnails/41.jpg)
Storage*
*Watch those cookies crumble…
![Page 42: Application Development with HTML5](https://reader036.fdocuments.in/reader036/viewer/2022062314/56813ada550346895da32088/html5/thumbnails/42.jpg)
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);
![Page 43: Application Development with HTML5](https://reader036.fdocuments.in/reader036/viewer/2022062314/56813ada550346895da32088/html5/thumbnails/43.jpg)
demo
Local Storage
![Page 44: Application Development with HTML5](https://reader036.fdocuments.in/reader036/viewer/2022062314/56813ada550346895da32088/html5/thumbnails/44.jpg)
Experiment*, Prototype, Give Feedback…
* Use IE10 PP and Html5 Labs to try out upcoming features.
![Page 45: Application Development with HTML5](https://reader036.fdocuments.in/reader036/viewer/2022062314/56813ada550346895da32088/html5/thumbnails/45.jpg)
Site Ready HTML5
Microsoft Approach
Invest on Interoperability
Work with Developers
Innovate with Emerging Standards
![Page 46: Application Development with HTML5](https://reader036.fdocuments.in/reader036/viewer/2022062314/56813ada550346895da32088/html5/thumbnails/46.jpg)
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
![Page 47: Application Development with HTML5](https://reader036.fdocuments.in/reader036/viewer/2022062314/56813ada550346895da32088/html5/thumbnails/47.jpg)
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
![Page 48: Application Development with HTML5](https://reader036.fdocuments.in/reader036/viewer/2022062314/56813ada550346895da32088/html5/thumbnails/48.jpg)
demo
IE10 PP2 & File API
![Page 49: Application Development with HTML5](https://reader036.fdocuments.in/reader036/viewer/2022062314/56813ada550346895da32088/html5/thumbnails/49.jpg)
Innovate with Emerging Standards
![Page 50: Application Development with HTML5](https://reader036.fdocuments.in/reader036/viewer/2022062314/56813ada550346895da32088/html5/thumbnails/50.jpg)
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
![Page 51: Application Development with HTML5](https://reader036.fdocuments.in/reader036/viewer/2022062314/56813ada550346895da32088/html5/thumbnails/51.jpg)
demo
HTML5 Labs and Web Sockets
![Page 52: Application Development with HTML5](https://reader036.fdocuments.in/reader036/viewer/2022062314/56813ada550346895da32088/html5/thumbnails/52.jpg)
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
![Page 53: Application Development with HTML5](https://reader036.fdocuments.in/reader036/viewer/2022062314/56813ada550346895da32088/html5/thumbnails/53.jpg)
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!
![Page 54: Application Development with HTML5](https://reader036.fdocuments.in/reader036/viewer/2022062314/56813ada550346895da32088/html5/thumbnails/54.jpg)
Go Start Using HTML5 Today!
Adopt
– Semantic Markup– Canvas– Audio and Video– Geolocation– Web Storage– CSS3
Experiment – IE10 Platform Preview– HTML5 Labs
Slides and Demos :: http://bit.ly/ivQATJ