*thanks to arunraj chandrasekaran, sahar hosseini, eric graham, emil Åström, alexander dunn, nia...
Post on 21-Dec-2015
216 views
TRANSCRIPT
DEV343 :: Application Development with HTML5
Brandon SatromDeveloper EvangelistMicrosoft
About Me
Husband and FatherDeveloper Evangelist, MicrosoftWeb developer for lifeBased in Austin, TX
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!
Agenda
History of HTML5Defining The HTML5 “Standard”Add Six Words to Your Development VocabularyThe HTML5 “Standard” and YouSome Thoughts on Development Tools
A History of HTML5*With some help from Dr. Seuss
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
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
Butter side up? Or down?
W3C vs. WHATWGStandard A vs. Standard BBrowser Wars 2.0?
We just want the Web!
Defining The HTML5 “Standard”*Air Quotes Required
“ ”=HTML5 CSS 3JavaScript
APIs++
HTML5 – An Umbrella Term
Official “HTML5” SpecificationCSS3JavaScript APIs enabling:
Canvas/SVGAudio and VideoGolocationWebStorageAnd much, much, much, much, much, much, more…
Technology Areas of HTML5Performance
3D Effects
Semantics Styling Multimedia
Device Access
ConnectivityOffline & Storage
Add Six Words to Your Development Vocabulary*”Validation” isn’t one of them
#1 - Hyperbole*It’s the best thing ever!
Next up, an album of Tony Bennett covers…
HTML5 is Kind of a Big Deal…
…he just made that up.
“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
…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
#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 - Applications*The “web” is dead. Long live the Web!
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
#5 - Polyfills*It’s like shims in JavaScript… for hipsters.
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(); }); }});
The HTML5 “Standard” and You*Things you can use, things you can polyfill and things you should keep an critical eye on
Use These…*Mature and Fully Supported(-ish)
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 Valid HTML5 Document
<!DOCTYPE html><meta charset="utf-8"><title> Hello </title><p> HTML5! </p>
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>
28 New Elements
article footer rtaside header rubyaudio hgroup sectioncanvas keygen sourcecommand mark summarydatalist meter timeembed output wbrfigcaption progressfigure rp
demo
Semantic Markup
Canvas*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();
demo
<canvas>
Audio and Video*Coming this fall to theaters: The DaVinci Codec
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;
demo
<audio> and <video>
Geolocation*Useful for finding all those pokemon
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);
demo
Geolocation
Storage*Cookies, Roger Clemens style
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');
demo
Local Storage
Polyfill These…*Some support ::Use Modernizr and JavaScript to close the gap
Web Forms*New Tags and Attributes for richer forms
<input type=“see below”>
color month urldatalist number weekdate rangedatetime searchdatetime-local telemail time
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" />
demo
Web Forms and Validation
CSS3*Style Enhancements
(Some of) What’s new in CSS3
SelectorsBackgrounds and BordersFonts (WOFF)Media QueriesColorTransformationsNamespacesValues and Units
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;
demo
CSS3
Keep and Eye on These…*Immature standards or incomplete support, but the web moves fast!
Web Sockets*The web, in real time
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'); }
Web Workers*Your script engine has bought into this whole outsourcing craze
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);};
IndexedDB*An Object Database for your browser
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 };};
demo
Web Sockets, Web Workers and IndexedDB
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.
Some Thoughts on Tools*At Microsoft, we got lots of ‘em
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!
A word of advice…*I’m very opinionated (see that “Tools” slide)
Those Six Words Again
HyperboleCompatibilitySemanticsJavaScriptApplicationsPolyfills
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!
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?
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…
Track Resources
Resource 1
Resource 2
Resource 3
Resource 4
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.
Complete an evaluation on CommNet and enter to win!
MS Tag Placeholder Slide
© 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.