*Thanks to Arunraj Chandrasekaran, Sahar Hosseini, Eric Graham, Emil Åström, Alexander Dunn, Nia...
-
date post
21-Dec-2015 -
Category
Documents
-
view
216 -
download
3
Transcript of *Thanks to Arunraj Chandrasekaran, Sahar Hosseini, Eric Graham, Emil Åström, Alexander Dunn, Nia...
![Page 1: *Thanks to Arunraj Chandrasekaran, Sahar Hosseini, Eric Graham, Emil Åström, Alexander Dunn, Nia Samir and Bob Elward For providing feedback!](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d5f5503460f94a3f70e/html5/thumbnails/1.jpg)
![Page 2: *Thanks to Arunraj Chandrasekaran, Sahar Hosseini, Eric Graham, Emil Åström, Alexander Dunn, Nia Samir and Bob Elward For providing feedback!](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d5f5503460f94a3f70e/html5/thumbnails/2.jpg)
DEV343 :: Application Development with HTML5
Brandon SatromDeveloper EvangelistMicrosoft
![Page 3: *Thanks to Arunraj Chandrasekaran, Sahar Hosseini, Eric Graham, Emil Åström, Alexander Dunn, Nia Samir and Bob Elward For providing feedback!](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d5f5503460f94a3f70e/html5/thumbnails/3.jpg)
About Me
Husband and FatherDeveloper Evangelist, MicrosoftWeb developer for lifeBased in Austin, TX
![Page 4: *Thanks to Arunraj Chandrasekaran, Sahar Hosseini, Eric Graham, Emil Åström, Alexander Dunn, Nia Samir and Bob Elward For providing feedback!](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d5f5503460f94a3f70e/html5/thumbnails/4.jpg)
What you said you wanted to hear…
New features that can be used todaySemantic replacements for generic elementsFeatures we shouldn’t use because of compatibility problemsBest practices for HTML5 developmentHow to implement cross-document messagingNew aspects of CSS3Tools that help in leveraging HTML5 featuresWhat should designers and developers learn first
*Thanks to Arunraj Chandrasekaran, Sahar Hosseini, Eric Graham, Emil Åström, Alexander Dunn, Nia Samir and Bob Elward For providing feedback!
![Page 5: *Thanks to Arunraj Chandrasekaran, Sahar Hosseini, Eric Graham, Emil Åström, Alexander Dunn, Nia Samir and Bob Elward For providing feedback!](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d5f5503460f94a3f70e/html5/thumbnails/5.jpg)
Agenda
History of HTML5Defining The HTML5 “Standard”Add Six Words to Your Development VocabularyThe HTML5 “Standard” and YouSome Thoughts on Development Tools
![Page 6: *Thanks to Arunraj Chandrasekaran, Sahar Hosseini, Eric Graham, Emil Åström, Alexander Dunn, Nia Samir and Bob Elward For providing feedback!](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d5f5503460f94a3f70e/html5/thumbnails/6.jpg)
A History of HTML5*With some help from Dr. Seuss
![Page 7: *Thanks to Arunraj Chandrasekaran, Sahar Hosseini, Eric Graham, Emil Åström, Alexander Dunn, Nia Samir and Bob Elward For providing feedback!](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d5f5503460f94a3f70e/html5/thumbnails/7.jpg)
A History of the Web
199119941996 +19971998
20002005 AJAX2009 + +
HTML
CSS 1 JavaScript
HTML 2
HTML 4
CSS 2
XHTML 2
AJAX
HTML5 CSS 3 ECMAScript 5
![Page 8: *Thanks to Arunraj Chandrasekaran, Sahar Hosseini, Eric Graham, Emil Åström, Alexander Dunn, Nia Samir and Bob Elward For providing feedback!](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d5f5503460f94a3f70e/html5/thumbnails/8.jpg)
2004
Filling in the Gaps (1991 to Present)
HTML 2 3 3.2 4 4.01
XML XHTML1 1.1 1SE 2
Web Forms 2 Web Apps 1 HTML5
![Page 9: *Thanks to Arunraj Chandrasekaran, Sahar Hosseini, Eric Graham, Emil Åström, Alexander Dunn, Nia Samir and Bob Elward For providing feedback!](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d5f5503460f94a3f70e/html5/thumbnails/9.jpg)
Butter side up? Or down?
W3C vs. WHATWGStandard A vs. Standard BBrowser Wars 2.0?
We just want the Web!
![Page 10: *Thanks to Arunraj Chandrasekaran, Sahar Hosseini, Eric Graham, Emil Åström, Alexander Dunn, Nia Samir and Bob Elward For providing feedback!](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d5f5503460f94a3f70e/html5/thumbnails/10.jpg)
Defining The HTML5 “Standard”*Air Quotes Required
![Page 11: *Thanks to Arunraj Chandrasekaran, Sahar Hosseini, Eric Graham, Emil Åström, Alexander Dunn, Nia Samir and Bob Elward For providing feedback!](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d5f5503460f94a3f70e/html5/thumbnails/11.jpg)
“ ”=HTML5 CSS 3JavaScript
APIs++
![Page 12: *Thanks to Arunraj Chandrasekaran, Sahar Hosseini, Eric Graham, Emil Åström, Alexander Dunn, Nia Samir and Bob Elward For providing feedback!](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d5f5503460f94a3f70e/html5/thumbnails/12.jpg)
HTML5 – An Umbrella Term
Official “HTML5” SpecificationCSS3JavaScript APIs enabling:
Canvas/SVGAudio and VideoGolocationWebStorageAnd much, much, much, much, much, much, more…
![Page 13: *Thanks to Arunraj Chandrasekaran, Sahar Hosseini, Eric Graham, Emil Åström, Alexander Dunn, Nia Samir and Bob Elward For providing feedback!](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d5f5503460f94a3f70e/html5/thumbnails/13.jpg)
Technology Areas of HTML5Performance
3D Effects
Semantics Styling Multimedia
Device Access
ConnectivityOffline & Storage
![Page 14: *Thanks to Arunraj Chandrasekaran, Sahar Hosseini, Eric Graham, Emil Åström, Alexander Dunn, Nia Samir and Bob Elward For providing feedback!](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d5f5503460f94a3f70e/html5/thumbnails/14.jpg)
Add Six Words to Your Development Vocabulary*”Validation” isn’t one of them
![Page 15: *Thanks to Arunraj Chandrasekaran, Sahar Hosseini, Eric Graham, Emil Åström, Alexander Dunn, Nia Samir and Bob Elward For providing feedback!](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d5f5503460f94a3f70e/html5/thumbnails/15.jpg)
#1 - Hyperbole*It’s the best thing ever!
![Page 16: *Thanks to Arunraj Chandrasekaran, Sahar Hosseini, Eric Graham, Emil Åström, Alexander Dunn, Nia Samir and Bob Elward For providing feedback!](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d5f5503460f94a3f70e/html5/thumbnails/16.jpg)
Next up, an album of Tony Bennett covers…
![Page 17: *Thanks to Arunraj Chandrasekaran, Sahar Hosseini, Eric Graham, Emil Åström, Alexander Dunn, Nia Samir and Bob Elward For providing feedback!](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d5f5503460f94a3f70e/html5/thumbnails/17.jpg)
HTML5 is Kind of a Big Deal…
![Page 18: *Thanks to Arunraj Chandrasekaran, Sahar Hosseini, Eric Graham, Emil Åström, Alexander Dunn, Nia Samir and Bob Elward For providing feedback!](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d5f5503460f94a3f70e/html5/thumbnails/18.jpg)
…he just made that up.
![Page 19: *Thanks to Arunraj Chandrasekaran, Sahar Hosseini, Eric Graham, Emil Åström, Alexander Dunn, Nia Samir and Bob Elward For providing feedback!](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d5f5503460f94a3f70e/html5/thumbnails/19.jpg)
“Don’t believe the hype…”
“Taffeta phrases, silken phrases precise,Three-piled hyperbole, spruce affectation,Figures pedantical—these summer fliesHave blown me full of maggot ostentation.I do forswear them.” – William Shakespeare
![Page 20: *Thanks to Arunraj Chandrasekaran, Sahar Hosseini, Eric Graham, Emil Åström, Alexander Dunn, Nia Samir and Bob Elward For providing feedback!](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d5f5503460f94a3f70e/html5/thumbnails/20.jpg)
…But do believe that HTML5 is changing everything
“The future of the web is HTML5.”— Dean Hachamovitch, Microsoft
“We're betting big on HTML 5.”— Vic Gundotra, Google
“The world is moving to HTML5.”— Steve Jobs, Apple
![Page 21: *Thanks to Arunraj Chandrasekaran, Sahar Hosseini, Eric Graham, Emil Åström, Alexander Dunn, Nia Samir and Bob Elward For providing feedback!](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d5f5503460f94a3f70e/html5/thumbnails/21.jpg)
#2 - Compatibility*Your GeoCities sites are safe.
![Page 22: *Thanks to Arunraj Chandrasekaran, Sahar Hosseini, Eric Graham, Emil Åström, Alexander Dunn, Nia Samir and Bob Elward For providing feedback!](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d5f5503460f94a3f70e/html5/thumbnails/22.jpg)
The Web is the largest legacy software system in the history of the universe.
![Page 23: *Thanks to Arunraj Chandrasekaran, Sahar Hosseini, Eric Graham, Emil Åström, Alexander Dunn, Nia Samir and Bob Elward For providing feedback!](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d5f5503460f94a3f70e/html5/thumbnails/23.jpg)
#3 - Semantics*Tags have meaning
![Page 24: *Thanks to Arunraj Chandrasekaran, Sahar Hosseini, Eric Graham, Emil Åström, Alexander Dunn, Nia Samir and Bob Elward For providing feedback!](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d5f5503460f94a3f70e/html5/thumbnails/24.jpg)
Neutral vs. Rich Semantics
<div> <div id=“header”> <header>
![Page 25: *Thanks to Arunraj Chandrasekaran, Sahar Hosseini, Eric Graham, Emil Åström, Alexander Dunn, Nia Samir and Bob Elward For providing feedback!](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d5f5503460f94a3f70e/html5/thumbnails/25.jpg)
#4 - JavaScript*It’s not your father’s scripting language. Well, ok, actually it is.
![Page 26: *Thanks to Arunraj Chandrasekaran, Sahar Hosseini, Eric Graham, Emil Åström, Alexander Dunn, Nia Samir and Bob Elward For providing feedback!](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d5f5503460f94a3f70e/html5/thumbnails/26.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 27: *Thanks to Arunraj Chandrasekaran, Sahar Hosseini, Eric Graham, Emil Åström, Alexander Dunn, Nia Samir and Bob Elward For providing feedback!](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d5f5503460f94a3f70e/html5/thumbnails/27.jpg)
#5 - Applications*The “web” is dead. Long live the Web!
![Page 28: *Thanks to Arunraj Chandrasekaran, Sahar Hosseini, Eric Graham, Emil Åström, Alexander Dunn, Nia Samir and Bob Elward For providing feedback!](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d5f5503460f94a3f70e/html5/thumbnails/28.jpg)
Client vs. Web
Desktop Applications Web Applications
Accessed through executable Accessed through the browser
Can operate when disconnected Must be connected
Can use local storage for performance Cookies are only local storage option
Can access the user’s filesystem No access to user’s filesystem
Can leverage OS features and utilities No access to user’s OS
Can interact with user when application is closed or minimized
Can only interact with user from within the browser window.
Rich 2D and 3D animation Rudimentary animation, no native 3D
![Page 29: *Thanks to Arunraj Chandrasekaran, Sahar Hosseini, Eric Graham, Emil Åström, Alexander Dunn, Nia Samir and Bob Elward For providing feedback!](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d5f5503460f94a3f70e/html5/thumbnails/29.jpg)
#5 - Polyfills*It’s like shims in JavaScript… for hipsters.
![Page 30: *Thanks to Arunraj Chandrasekaran, Sahar Hosseini, Eric Graham, Emil Åström, Alexander Dunn, Nia Samir and Bob Elward For providing feedback!](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d5f5503460f94a3f70e/html5/thumbnails/30.jpg)
Ex. Polyfills with Modernizr
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 31: *Thanks to Arunraj Chandrasekaran, Sahar Hosseini, Eric Graham, Emil Åström, Alexander Dunn, Nia Samir and Bob Elward For providing feedback!](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d5f5503460f94a3f70e/html5/thumbnails/31.jpg)
The HTML5 “Standard” and You*Things you can use, things you can polyfill and things you should keep an critical eye on
![Page 32: *Thanks to Arunraj Chandrasekaran, Sahar Hosseini, Eric Graham, Emil Åström, Alexander Dunn, Nia Samir and Bob Elward For providing feedback!](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d5f5503460f94a3f70e/html5/thumbnails/32.jpg)
Use These…*Mature and Fully Supported(-ish)
![Page 33: *Thanks to Arunraj Chandrasekaran, Sahar Hosseini, Eric Graham, Emil Åström, Alexander Dunn, Nia Samir and Bob Elward For providing feedback!](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d5f5503460f94a3f70e/html5/thumbnails/33.jpg)
Semantic Markup*Alas, poor <div>, I hardly knew ye.
![Page 34: *Thanks to Arunraj Chandrasekaran, Sahar Hosseini, Eric Graham, Emil Åström, Alexander Dunn, Nia Samir and Bob Elward For providing feedback!](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d5f5503460f94a3f70e/html5/thumbnails/34.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 35: *Thanks to Arunraj Chandrasekaran, Sahar Hosseini, Eric Graham, Emil Åström, Alexander Dunn, Nia Samir and Bob Elward For providing feedback!](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d5f5503460f94a3f70e/html5/thumbnails/35.jpg)
A Valid HTML5 Document
<!DOCTYPE html><meta charset="utf-8"><title> Hello </title><p> HTML5! </p>
![Page 36: *Thanks to Arunraj Chandrasekaran, Sahar Hosseini, Eric Graham, Emil Åström, Alexander Dunn, Nia Samir and Bob Elward For providing feedback!](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d5f5503460f94a3f70e/html5/thumbnails/36.jpg)
But we really ought to be compatible…
<!DOCTYPE html><html>
<head><meta charset="utf-8"><title> Hello </title>
</head><body>
<p> HTML5! </p></body>
</html>
![Page 37: *Thanks to Arunraj Chandrasekaran, Sahar Hosseini, Eric Graham, Emil Åström, Alexander Dunn, Nia Samir and Bob Elward For providing feedback!](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d5f5503460f94a3f70e/html5/thumbnails/37.jpg)
28 New Elements
article footer rtaside header rubyaudio hgroup sectioncanvas keygen sourcecommand mark summarydatalist meter timeembed output wbrfigcaption progressfigure rp
![Page 38: *Thanks to Arunraj Chandrasekaran, Sahar Hosseini, Eric Graham, Emil Åström, Alexander Dunn, Nia Samir and Bob Elward For providing feedback!](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d5f5503460f94a3f70e/html5/thumbnails/38.jpg)
demo
Semantic Markup
![Page 39: *Thanks to Arunraj Chandrasekaran, Sahar Hosseini, Eric Graham, Emil Åström, Alexander Dunn, Nia Samir and Bob Elward For providing feedback!](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d5f5503460f94a3f70e/html5/thumbnails/39.jpg)
Canvas*Your old Nintendo games, reborn! (Plus DOOM)
![Page 40: *Thanks to Arunraj Chandrasekaran, Sahar Hosseini, Eric Graham, Emil Åström, Alexander Dunn, Nia Samir and Bob Elward For providing feedback!](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d5f5503460f94a3f70e/html5/thumbnails/40.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 41: *Thanks to Arunraj Chandrasekaran, Sahar Hosseini, Eric Graham, Emil Åström, Alexander Dunn, Nia Samir and Bob Elward For providing feedback!](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d5f5503460f94a3f70e/html5/thumbnails/41.jpg)
demo
<canvas>
![Page 42: *Thanks to Arunraj Chandrasekaran, Sahar Hosseini, Eric Graham, Emil Åström, Alexander Dunn, Nia Samir and Bob Elward For providing feedback!](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d5f5503460f94a3f70e/html5/thumbnails/42.jpg)
Audio and Video*Coming this fall to theaters: The DaVinci Codec
![Page 43: *Thanks to Arunraj Chandrasekaran, Sahar Hosseini, Eric Graham, Emil Åström, Alexander Dunn, Nia Samir and Bob Elward For providing feedback!](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d5f5503460f94a3f70e/html5/thumbnails/43.jpg)
Media on your page… no plugins required.<video id=“video" controls autoplay> <source src="video.mp4" type="video/mp4“ /> <object height="380"
type="application/x-silverlight-2" width="640">…</object>
</video>document.getElementById("video").play();
<audio id="audio" src="sound.mp3" controls></audio>document.getElementById("audio").muted = false;
![Page 44: *Thanks to Arunraj Chandrasekaran, Sahar Hosseini, Eric Graham, Emil Åström, Alexander Dunn, Nia Samir and Bob Elward For providing feedback!](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d5f5503460f94a3f70e/html5/thumbnails/44.jpg)
demo
<audio> and <video>
![Page 45: *Thanks to Arunraj Chandrasekaran, Sahar Hosseini, Eric Graham, Emil Åström, Alexander Dunn, Nia Samir and Bob Elward For providing feedback!](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d5f5503460f94a3f70e/html5/thumbnails/45.jpg)
Geolocation*Useful for finding all those pokemon
![Page 46: *Thanks to Arunraj Chandrasekaran, Sahar Hosseini, Eric Graham, Emil Åström, Alexander Dunn, Nia Samir and Bob Elward For providing feedback!](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d5f5503460f94a3f70e/html5/thumbnails/46.jpg)
You are (within a few 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 }); // Add a pushpin to the map representing the current location var pin = new Microsoft.Maps.Pushpin(location); _map.entities.push(pin);}, errorHandler);
![Page 47: *Thanks to Arunraj Chandrasekaran, Sahar Hosseini, Eric Graham, Emil Åström, Alexander Dunn, Nia Samir and Bob Elward For providing feedback!](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d5f5503460f94a3f70e/html5/thumbnails/47.jpg)
demo
Geolocation
![Page 48: *Thanks to Arunraj Chandrasekaran, Sahar Hosseini, Eric Graham, Emil Åström, Alexander Dunn, Nia Samir and Bob Elward For providing feedback!](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d5f5503460f94a3f70e/html5/thumbnails/48.jpg)
Storage*Cookies, Roger Clemens style
![Page 49: *Thanks to Arunraj Chandrasekaran, Sahar Hosseini, Eric Graham, Emil Åström, Alexander Dunn, Nia Samir and Bob Elward For providing feedback!](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d5f5503460f94a3f70e/html5/thumbnails/49.jpg)
Working with localStorage
// use localStorage for persistent storagesaveButton.addEventListener('click', function () {
window.localStorage.setItem('value', area.value); window.localStorage.setItem('timestamp',
(new Date()).getTime());}, false);textarea.value = window.localStorage.getItem('value');
![Page 50: *Thanks to Arunraj Chandrasekaran, Sahar Hosseini, Eric Graham, Emil Åström, Alexander Dunn, Nia Samir and Bob Elward For providing feedback!](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d5f5503460f94a3f70e/html5/thumbnails/50.jpg)
demo
Local Storage
![Page 51: *Thanks to Arunraj Chandrasekaran, Sahar Hosseini, Eric Graham, Emil Åström, Alexander Dunn, Nia Samir and Bob Elward For providing feedback!](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d5f5503460f94a3f70e/html5/thumbnails/51.jpg)
Polyfill These…*Some support ::Use Modernizr and JavaScript to close the gap
![Page 52: *Thanks to Arunraj Chandrasekaran, Sahar Hosseini, Eric Graham, Emil Åström, Alexander Dunn, Nia Samir and Bob Elward For providing feedback!](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d5f5503460f94a3f70e/html5/thumbnails/52.jpg)
Web Forms*New Tags and Attributes for richer forms
![Page 53: *Thanks to Arunraj Chandrasekaran, Sahar Hosseini, Eric Graham, Emil Åström, Alexander Dunn, Nia Samir and Bob Elward For providing feedback!](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d5f5503460f94a3f70e/html5/thumbnails/53.jpg)
<input type=“see below”>
color month urldatalist number weekdate rangedatetime searchdatetime-local telemail time
![Page 54: *Thanks to Arunraj Chandrasekaran, Sahar Hosseini, Eric Graham, Emil Åström, Alexander Dunn, Nia Samir and Bob Elward For providing feedback!](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d5f5503460f94a3f70e/html5/thumbnails/54.jpg)
Working with Forms and Validation
<input type="text" required /><input type="email" value="[email protected]" /><input type="date" min="2010-08-14" max="2011-08-14" /><input type="range" min="0" max="50" value="10" /><input type="search" results="10" placeholder="Search..." /><input type="tel" pattern="^\(?\d{3}\)?[-\s]\d{3}[-\s]\d{4}.*?$" /><input type="color" placeholder="e.g. #bbbbbb" /><input type="number" step="1" min="-5" max="10" value="0" />
![Page 55: *Thanks to Arunraj Chandrasekaran, Sahar Hosseini, Eric Graham, Emil Åström, Alexander Dunn, Nia Samir and Bob Elward For providing feedback!](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d5f5503460f94a3f70e/html5/thumbnails/55.jpg)
demo
Web Forms and Validation
![Page 56: *Thanks to Arunraj Chandrasekaran, Sahar Hosseini, Eric Graham, Emil Åström, Alexander Dunn, Nia Samir and Bob Elward For providing feedback!](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d5f5503460f94a3f70e/html5/thumbnails/56.jpg)
CSS3*Style Enhancements
![Page 57: *Thanks to Arunraj Chandrasekaran, Sahar Hosseini, Eric Graham, Emil Åström, Alexander Dunn, Nia Samir and Bob Elward For providing feedback!](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d5f5503460f94a3f70e/html5/thumbnails/57.jpg)
(Some of) What’s new in CSS3
SelectorsBackgrounds and BordersFonts (WOFF)Media QueriesColorTransformationsNamespacesValues and Units
![Page 58: *Thanks to Arunraj Chandrasekaran, Sahar Hosseini, Eric Graham, Emil Åström, Alexander Dunn, Nia Samir and Bob Elward For providing feedback!](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d5f5503460f94a3f70e/html5/thumbnails/58.jpg)
Working with New Styles.row:nth-child(even) { background: #dde;}.row:nth-child(odd) { background: white;}
@font-face { font-family: 'LeagueGothic'; src: url(LeagueGothic.otf);}header { font-family: 'LeagueGothic';}
:not(span) { display: block; }
h2:first-child { ... }
h2 + header { ... }
border-radius: 32px;
![Page 59: *Thanks to Arunraj Chandrasekaran, Sahar Hosseini, Eric Graham, Emil Åström, Alexander Dunn, Nia Samir and Bob Elward For providing feedback!](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d5f5503460f94a3f70e/html5/thumbnails/59.jpg)
demo
CSS3
![Page 60: *Thanks to Arunraj Chandrasekaran, Sahar Hosseini, Eric Graham, Emil Åström, Alexander Dunn, Nia Samir and Bob Elward For providing feedback!](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d5f5503460f94a3f70e/html5/thumbnails/60.jpg)
Keep and Eye on These…*Immature standards or incomplete support, but the web moves fast!
![Page 61: *Thanks to Arunraj Chandrasekaran, Sahar Hosseini, Eric Graham, Emil Åström, Alexander Dunn, Nia Samir and Bob Elward For providing feedback!](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d5f5503460f94a3f70e/html5/thumbnails/61.jpg)
Web Sockets*The web, in real time
![Page 62: *Thanks to Arunraj Chandrasekaran, Sahar Hosseini, Eric Graham, Emil Åström, Alexander Dunn, Nia Samir and Bob Elward For providing feedback!](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d5f5503460f94a3f70e/html5/thumbnails/62.jpg)
Making real time connections
var socket = new WebSocket('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'); }
![Page 63: *Thanks to Arunraj Chandrasekaran, Sahar Hosseini, Eric Graham, Emil Åström, Alexander Dunn, Nia Samir and Bob Elward For providing feedback!](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d5f5503460f94a3f70e/html5/thumbnails/63.jpg)
Web Workers*Your script engine has bought into this whole outsourcing craze
![Page 64: *Thanks to Arunraj Chandrasekaran, Sahar Hosseini, Eric Graham, Emil Åström, Alexander Dunn, Nia Samir and Bob Elward For providing feedback!](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d5f5503460f94a3f70e/html5/thumbnails/64.jpg)
Offloading Work to a Worker
main.js:var worker = new Worker('task.js');worker.onmessage = function(event) { alert(event.data); };worker.postMessage('data');
task.js:self.onmessage = function(event) { // Do some work. self.postMessage("recv'd: " + event.data);};
![Page 65: *Thanks to Arunraj Chandrasekaran, Sahar Hosseini, Eric Graham, Emil Åström, Alexander Dunn, Nia Samir and Bob Elward For providing feedback!](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d5f5503460f94a3f70e/html5/thumbnails/65.jpg)
IndexedDB*An Object Database for your browser
![Page 66: *Thanks to Arunraj Chandrasekaran, Sahar Hosseini, Eric Graham, Emil Åström, Alexander Dunn, Nia Samir and Bob Elward For providing feedback!](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d5f5503460f94a3f70e/html5/thumbnails/66.jpg)
A DB in your browser…
var idbRequest = window.indexedDB.open('Database Name');idbRequest.onsuccess = function(event) { var db = event.result; var transaction = db.transaction([], IDBTransaction.READ_ONLY); var curRequest = transaction.objectStore(‘name').openCursor(); curRequest.onsuccess = function() { // Do Something };};
![Page 67: *Thanks to Arunraj Chandrasekaran, Sahar Hosseini, Eric Graham, Emil Åström, Alexander Dunn, Nia Samir and Bob Elward For providing feedback!](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d5f5503460f94a3f70e/html5/thumbnails/67.jpg)
demo
Web Sockets, Web Workers and IndexedDB
![Page 68: *Thanks to Arunraj Chandrasekaran, Sahar Hosseini, Eric Graham, Emil Åström, Alexander Dunn, Nia Samir and Bob Elward For providing feedback!](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d5f5503460f94a3f70e/html5/thumbnails/68.jpg)
But wait, there’s more!
AppCache – Offline access to application resourcesWebM – Open Video CodecWebGL – 3-D CanvasSVG – in-browser Scalable Vector Graphics supportHistory API – Manipulate browser history without reloadingDevice API – Videoconferencing without pluginsFile API – Sandboxed in-browser file systemAudio data API – create music with JavaScriptServer-sent events –sever-initiated communicationMicrodata – add custom vocabularies to your markupAnd even more… seriously.
![Page 69: *Thanks to Arunraj Chandrasekaran, Sahar Hosseini, Eric Graham, Emil Åström, Alexander Dunn, Nia Samir and Bob Elward For providing feedback!](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d5f5503460f94a3f70e/html5/thumbnails/69.jpg)
Some Thoughts on Tools*At Microsoft, we got lots of ‘em
![Page 70: *Thanks to Arunraj Chandrasekaran, Sahar Hosseini, Eric Graham, Emil Åström, Alexander Dunn, Nia Samir and Bob Elward For providing feedback!](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d5f5503460f94a3f70e/html5/thumbnails/70.jpg)
HTML5 in Web Technologies
Visual Studio 2010 SP1HTML5 Schema ValidatorIntellisense for new semantic elements and attributesIntellisense support for CSS3
Microsoft WebMatrixHTML5 doctype is default for html/cshtml/vbhtml pages.
Expression Web 4 SP1HTML5 Schema ValidatorIntellisense for new semantic elements and attributesIntellisense for CSS3; Richer style editing
*Or, create your own files and templates!
![Page 71: *Thanks to Arunraj Chandrasekaran, Sahar Hosseini, Eric Graham, Emil Åström, Alexander Dunn, Nia Samir and Bob Elward For providing feedback!](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d5f5503460f94a3f70e/html5/thumbnails/71.jpg)
A word of advice…*I’m very opinionated (see that “Tools” slide)
![Page 72: *Thanks to Arunraj Chandrasekaran, Sahar Hosseini, Eric Graham, Emil Åström, Alexander Dunn, Nia Samir and Bob Elward For providing feedback!](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d5f5503460f94a3f70e/html5/thumbnails/72.jpg)
Those Six Words Again
HyperboleCompatibilitySemanticsJavaScriptApplicationsPolyfills
![Page 73: *Thanks to Arunraj Chandrasekaran, Sahar Hosseini, Eric Graham, Emil Åström, Alexander Dunn, Nia Samir and Bob Elward For providing feedback!](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d5f5503460f94a3f70e/html5/thumbnails/73.jpg)
Things you need to learn (aka Resources)Read two good HTML5 books
Introducing HTML5HTML5 Up and Running
Read a good CSS3 bookCSS3: Visual QuickStart Guide
Learn JavaScriptJavaScript: The Good PartsEloquent JavaScript
Learn a JavaScript Framework (like jQuery)JQuery in Action
Learn the Developer Tools in your favorite browserIE9? Just hit F12!
![Page 74: *Thanks to Arunraj Chandrasekaran, Sahar Hosseini, Eric Graham, Emil Åström, Alexander Dunn, Nia Samir and Bob Elward For providing feedback!](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d5f5503460f94a3f70e/html5/thumbnails/74.jpg)
Go Start using HTML5 today!
Use• Semantic Markup• Canvas• Audio and Video• Geolocation• Web Storage
Polyfill • Web Forms• CSS3
Watch• Web Sockets• Web Workers• IndexedDB• Everything else…
Questions?
![Page 75: *Thanks to Arunraj Chandrasekaran, Sahar Hosseini, Eric Graham, Emil Åström, Alexander Dunn, Nia Samir and Bob Elward For providing feedback!](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d5f5503460f94a3f70e/html5/thumbnails/75.jpg)
Related Content
Breakout Sessions (session codes and titles)
Interactive Sessions (session codes and titles)
Hands-on Labs (session codes and titles)
Product Demo Stations (demo station title and location)
Related Certification Exam
Find Me Later At…
![Page 76: *Thanks to Arunraj Chandrasekaran, Sahar Hosseini, Eric Graham, Emil Åström, Alexander Dunn, Nia Samir and Bob Elward For providing feedback!](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d5f5503460f94a3f70e/html5/thumbnails/76.jpg)
Track Resources
Resource 1
Resource 2
Resource 3
Resource 4
![Page 77: *Thanks to Arunraj Chandrasekaran, Sahar Hosseini, Eric Graham, Emil Åström, Alexander Dunn, Nia Samir and Bob Elward For providing feedback!](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d5f5503460f94a3f70e/html5/thumbnails/77.jpg)
Resources
www.microsoft.com/teched
Sessions On-Demand & Community Microsoft Certification & Training Resources
Resources for IT Professionals Resources for Developers
www.microsoft.com/learning
http://microsoft.com/technet http://microsoft.com/msdn
Learning
http://northamerica.msteched.com
Connect. Share. Discuss.
![Page 78: *Thanks to Arunraj Chandrasekaran, Sahar Hosseini, Eric Graham, Emil Åström, Alexander Dunn, Nia Samir and Bob Elward For providing feedback!](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d5f5503460f94a3f70e/html5/thumbnails/78.jpg)
Complete an evaluation on CommNet and enter to win!
![Page 79: *Thanks to Arunraj Chandrasekaran, Sahar Hosseini, Eric Graham, Emil Åström, Alexander Dunn, Nia Samir and Bob Elward For providing feedback!](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d5f5503460f94a3f70e/html5/thumbnails/79.jpg)
MS Tag Placeholder Slide
![Page 80: *Thanks to Arunraj Chandrasekaran, Sahar Hosseini, Eric Graham, Emil Åström, Alexander Dunn, Nia Samir and Bob Elward For providing feedback!](https://reader030.fdocuments.net/reader030/viewer/2022032521/56649d5f5503460f94a3f70e/html5/thumbnails/80.jpg)
© 2011 Microsoft Corporation. All rights reserved. Microsoft, Windows, Windows Vista and other product names are or may be registered trademarks and/or trademarks in the U.S. and/or other countries.The information herein is for informational purposes only and represents the current view of Microsoft Corporation as of the date of this presentation. Because Microsoft must respond to changing market conditions, it should not be interpreted to
be a commitment on the part of Microsoft, and Microsoft cannot guarantee the accuracy of any information provided after the date of this presentation. MICROSOFT MAKES NO WARRANTIES, EXPRESS, IMPLIED OR STATUTORY, AS TO THE INFORMATION IN THIS
PRESENTATION.