Peter Himschootpeter@u2u.netU2U
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-str<!DOCTYPE html />
“a resolution-dependent bitmap canvas which canbe used for rendering graphs, game graphics, orother visual images on the f...
<canvas id="simple_shape" width="300" height="225“     onclick="draw_simple_shape()"></canvas>function draw_simple_shape()...
for (var x = 0.5; x < 500; x += 10) {       0             1           2           3  context.moveTo(x, 0);                ...
Demo
localStorage.setItem("message", “some object");value = localStorage.getItem("message");localStorage["message"] = “some obj...
window.addEventListener("storage", storageChanged, false);function storageChanged(/*StorageEvent*/ e){  if (e.key == "mess...
Demo
precision
navigator.geolocation.getCurrentPosition(showPosition, showError, options);var showPosition = function (location) {  var w...
Demo
CACHE MANIFESTCACHE:index.htmlphoto.jpgmain.jsNETWORK:          Not*                Cached    <html manifest="cache.manife...
CACHE MANIFESTCACHE:...NETWORK:*FALLBACK:media/ images/placeholder.png
if (navigator.onLine) {  $(#offline).addClass(hidden);} else {  $(#online).addClass(hidden);}$(window).bind(online offline...
Demo
<video src="video/pr6.mp4" autoplay> This content is displayed when video is not supported</video><video autoplay controls...
IE   Firefox   Chrome   Safari   iPhone   Android   WP7   OperaH.264         X                         X        X        X...
Demo
http://aka.ms/mbl-techhttp://aka.ms/mbl-tech/devprevhttp://aka.ms/mbl-tech/html5
Building HTML5 enabled web applications with Visual Studio 2011
Building HTML5 enabled web applications with Visual Studio 2011
Building HTML5 enabled web applications with Visual Studio 2011
Building HTML5 enabled web applications with Visual Studio 2011
Building HTML5 enabled web applications with Visual Studio 2011
Building HTML5 enabled web applications with Visual Studio 2011
Building HTML5 enabled web applications with Visual Studio 2011
Building HTML5 enabled web applications with Visual Studio 2011
Building HTML5 enabled web applications with Visual Studio 2011
Building HTML5 enabled web applications with Visual Studio 2011
Building HTML5 enabled web applications with Visual Studio 2011
Building HTML5 enabled web applications with Visual Studio 2011
Building HTML5 enabled web applications with Visual Studio 2011
Building HTML5 enabled web applications with Visual Studio 2011
Building HTML5 enabled web applications with Visual Studio 2011
Building HTML5 enabled web applications with Visual Studio 2011
Building HTML5 enabled web applications with Visual Studio 2011
Building HTML5 enabled web applications with Visual Studio 2011
Building HTML5 enabled web applications with Visual Studio 2011
Building HTML5 enabled web applications with Visual Studio 2011
Upcoming SlideShare
Loading in...5
×

Building HTML5 enabled web applications with Visual Studio 2011

4,570
-1

Published on

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.

Published in: Technology, News & Politics
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
4,570
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
58
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Building HTML5 enabled web applications with Visual Studio 2011

  1. 1. Peter Himschootpeter@u2u.netU2U
  2. 2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-str<!DOCTYPE html />
  3. 3. “a resolution-dependent bitmap canvas which canbe used for rendering graphs, game graphics, orother visual images on the fly.” <canvas width="300" height="225"> Fallback content if canvas not available </canvas>
  4. 4. <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);}
  5. 5. for (var x = 0.5; x < 500; x += 10) { 0 1 2 3 context.moveTo(x, 0); 0 0.5 context.lineTo(x, 375); pixel pixel pixel pixel} 1 pixel pixel pixel pixel 2 pixel pixel pixel pixelcontext.strokeStyle = "#eee"; 3context.stroke(); pixel pixel pixel pixel
  6. 6. Demo
  7. 7. localStorage.setItem("message", “some object");value = localStorage.getItem("message");localStorage["message"] = “some object";value = localStorage["message"];
  8. 8. window.addEventListener("storage", storageChanged, false);function storageChanged(/*StorageEvent*/ e){ if (e.key == "message") { var trackedMessage = $(”#trackedMessage"); trackedMessage.html( e.newValue ); }}
  9. 9. Demo
  10. 10. precision
  11. 11. 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);
  12. 12. Demo
  13. 13. CACHE MANIFESTCACHE:index.htmlphoto.jpgmain.jsNETWORK: Not* Cached <html manifest="cache.manifest">
  14. 14. CACHE MANIFESTCACHE:...NETWORK:*FALLBACK:media/ images/placeholder.png
  15. 15. if (navigator.onLine) { $(#offline).addClass(hidden);} else { $(#online).addClass(hidden);}$(window).bind(online offline, function () { $(.applicationCache).toggleClass(hidden);});
  16. 16. Demo
  17. 17. <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>
  18. 18. IE Firefox Chrome Safari iPhone Android WP7 OperaH.264 X X X X XAACTheora X X XVorbis VP8 X X X X XVorbis
  19. 19. Demo
  20. 20. http://aka.ms/mbl-techhttp://aka.ms/mbl-tech/devprevhttp://aka.ms/mbl-tech/html5
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×