Embed Size (px)
DESCRIPTION
Learn how Visual Studio 11 powers HTML5 development with new tooling and framework features. We’ll dive into some HTML5 specifics like the drawing capabilities of canvas, the geolocation API, HTML5 local storage and offline web applications.
Citation preview
Building HTML5 appsWith Visual Studio 11
Peter HimschootU2U TrainerMS Regional Director
About me…
Peter [email protected]
U2UTraining company based in BrusselsSpecialized in developer training For .NET, SharePoint, HTML5
www.u2u.be
HTML5
All about…
HTML 5• HTML5 Improvements• Drawing on Canvas• Local Storage• GeoLocation• Offline web applications• Playing plugin-less Video
HTML5
All about…
HTML5 Improvements• Simpler markup• DOCTYPE, <link>, <script> …
• Semantically richer markup• <header>, <footer>, <nav>, <aside>, • <section> and <article>• New forms <input> types
Simplified example: DOCTYPE• Required for modern browsers
• Simplified in HTML5
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<!DOCTYPE html />
Why do we need more semantics?• Think newspaper• <section> on politics• <article> on Berlusconi• <article> on Obama
• <section> on sports• <article> on football• <article> on Tour de France
Canvas
All about…
What is a Canvas• From HTML5
“a resolution-dependent bitmap canvas which can be used for rendering graphs, game graphics, or other visual images on the fly.”
<canvas width="300" height="225"> Fallback content if canvas not available</canvas>
Drawing on a <canvas>• Create the canvas
• Write some javascript
<canvas id="simple_shape" width="300" height="225“ onclick="draw_simple_shape()"></canvas>
function draw_simple_shape() { var canvas = document.getElementById("simple_shape"); var context = canvas.getContext("2d"); context.fillRect(20, 20, 50, 50); }
Canvas Path• First you draw to a path
• Then you “ink” the path
for (var x = 0.5; x < 500; x += 10) { context.moveTo(x, 0); context.lineTo(x, 375); }
context.strokeStyle = "#eee"; context.stroke();
pixel pixel pixel pixel
pixel pixel pixel pixel
pixel pixel pixel pixel
pixel pixel pixel pixel
0 21 30
1
2
3
0.5
DemoDrawing on a <canvas>
Local Storage
All about…
The need for local storage• Client app advantage: local storage• Use ALL the disk!
• Web app: no real local storage• Only cookies• Travel back and forth between browser and server• No encryption (only SSL)• Limited in size
Introducing HTML5 Storage• Store named key/value pairs• Key is a string• Value is string serialized (JSON)
• Persisted• Browser imposed storage limit (5Mb)• Never sent to the server• Allows change-tracking
Storing key-value pairs• Storage and retrieve using get/setItem
• Array syntax is also supported
localStorage.setItem("message", “some object");
value = localStorage.getItem("message");
localStorage["message"] = “some object";
value = localStorage["message"];
Tracking changes• Use the storage event• Triggers whenever a value changes
• Registering for the event
• Handling the eventwindow.addEventListener("storage", storageChanged, false);
function storageChanged(/*StorageEvent*/ e) { if (e.key == "message") { var trackedMessage = $(”#trackedMessage"); trackedMessage.html( e.newValue ); } }
DemoUsing local storage
GeoLocation
All about…
What is Geolocation?• Share your location with trusted web sites• Latitude and longitude• Optionally altitude and heading
• Supported by most modern browsers• Mobile devices typically have hardware support• GPS
Browser assent• User needs to explicitly give permission to site
How to detect position?• GPS hardware on the device• Cell tower• Wireless network connection• IP address
pre
cision
What you get...• Returned as position javascript object• No guarantee position is correct!!!
navigator.geolocation.getCurrentPosition(showPosition, showError, options);
var showPosition = function (location) { var where = new VELatLong(location.coords.latitude, location.coords.longitude); var map = new VEMap("breweryMap"); map.LoadMap(where, 10, VEMapStyle.Birdseye);
DemoShowing current location on live maps
Offline Web Applications
All about…
Why do we need offline?• Many applications fit• Gmail, office like, games, etc...
www.cuttherope.ie
Application Cache• Used to store all html, css, javascript, ...• Automatically updated when online• Requires a cache manifest file• Each page links to the cache manifest file
Using the cache manifest file• Add simple text file to server
• Refer to it on each page
CACHE MANIFESTCACHE:index.htmlphoto.jpgmain.jsNETWORK:*
Cached
NotCache
d
<html manifest="cache.manifest">
Using fallbacks• Caching large files is better not done• For example video’s
CACHE MANIFESTCACHE:...NETWORK:*FALLBACK:media/ images/placeholder.png
Online/Offline detection sample• Detect if browser is online
• Detect online/offline transition
$(window).bind('online offline', function () { $('.applicationCache').toggleClass('hidden'); });
if (navigator.onLine) { $('#offline').addClass('hidden'); } else { $('#online').addClass('hidden'); }
DemoTaking the application offline
Playing Video
All about…
<video> tag• Very much like <img> tag
• Specifying multiple sources of video
<video src="video/pr6.mp4" autoplay> This content is displayed when video is not supported </video>
<video autoplay controls > <source src="video/pr6.mp4" /> <source src="video/pr6.ogv” type='video/ogg; codecs="theora, vorbis"' /> <source src="video/pr6.webm” type='video/webm; codecs="vp8, vorbis"' /> </video>
What works on the web
Browser support for video and audioIE Firefox Chrom
e Safari iPhone Android WP7 Oper
a
H.264AAC X X X X X
Theora
VorbisX X X
VP8Vorbis X X X X X
DemoAdding a HTML5 video
Session Summary• Start using HTML5 today• Simplified web development• Plugin free browsers• Powerful API’s
Be what’s next• Find everything here
http://aka.ms/mbl-tech• Visual Studio Developer Preview Downloads
http://aka.ms/mbl-tech/devprev• MSDN HTML5 Developer Center
http://aka.ms/mbl-tech/html5
Q&A
© 2012 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.
![[MS-HTML5]: Microsoft Edge / Internet Explorer HTML5 ......2.1.55 [HTML5] Section 4.9.5 The tbody element ..... 55 2.1.56 [HTML5] Section 4.9.8 The tr element..... 55 2.1.57 [HTML5]](https://img.dokumen.tips/doc/110x75/5fb29d840f1bb936bf5a22fb/ms-html5-microsoft-edge-internet-explorer-html5-2155-html5-section.jpg)
