Downloaded 58 times
![localStorage.setItem("message", “some object");
value = localStorage.getItem("message");
localStorage["message"] = “some object";
value = localStorage["message"];](https://image.slidesharecdn.com/250room8peterhimschoot-120220054907-phpapp01/75/Building-HTML5-enabled-web-applications-with-Visual-Studio-2011-17-2048.jpg)
Building HTML5 enabled web applications with Visual Studio 2011
The document discusses the HTML5 canvas element for rendering graphics and provides a code example for drawing shapes on a canvas. It also covers local storage for saving and retrieving data, geolocation for tracking user location, and media elements for video playback compatibility across various browsers. Additionally, it includes references to caching strategies and responsive design principles.
More Related Content
Similar to Building HTML5 enabled web applications with Visual Studio 2011
More from Microsoft Developer Network (MSDN) - Belgium and Luxembourg
Building HTML5 enabled web applications with Visual Studio 2011
- 2.
- 7. <!DOCTYPE html PUBLIC"-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-str <!DOCTYPE html />
- 10. “a resolution-dependent bitmapcanvas 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>
- 11. <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); }
- 12. 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 pixel context.strokeStyle = "#eee"; 3 context.stroke(); pixel pixel pixel pixel
- 13.
- 17. localStorage.setItem("message", “some object"); value= localStorage.getItem("message"); localStorage["message"] = “some object"; value = localStorage["message"];
- 18. window.addEventListener("storage", storageChanged, false); functionstorageChanged(/*StorageEvent*/ e) { if (e.key == "message") { var trackedMessage = $(”#trackedMessage"); trackedMessage.html( e.newValue ); } }
- 19.
- 23.
- 24. navigator.geolocation.getCurrentPosition(showPosition, showError, options); varshowPosition = function (location) { var where = new VELatLong(location.coords.latitude, location.coords.longitude); var map = new VEMap("breweryMap"); map.LoadMap(where, 10, VEMapStyle.Birdseye);
- 25.
- 29. CACHE MANIFEST CACHE: index.html photo.jpg main.js NETWORK: Not * Cached <html manifest="cache.manifest">
- 30.
- 31. if (navigator.onLine) { $('#offline').addClass('hidden'); } else { $('#online').addClass('hidden'); } $(window).bind('online offline', function () { $('.applicationCache').toggleClass('hidden'); });
- 32.
- 34. <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>
- 35. IE Firefox Chrome Safari iPhone Android WP7 Opera H.264 X X X X X AAC Theora X X X Vorbis VP8 X X X X X Vorbis
- 36.
- 38.