Building HTML5 enabled web applications with Visual Studio 2011
•Télécharger en tant que PPTX, PDF•
0 j'aime•1,731 vues
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.
Recommandé
Recommandé
Contenu connexe
Tendances
Tendances (20)
Similaire à Building HTML5 enabled web applications with Visual Studio 2011
Similaire à Building HTML5 enabled web applications with Visual Studio 2011 (20)
Plus de Microsoft Developer Network (MSDN) - Belgium and Luxembourg
Plus de Microsoft Developer Network (MSDN) - Belgium and Luxembourg (20)
Dernier
Dernier (20)
Building HTML5 enabled web applications with Visual Studio 2011
- 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 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>
- 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. Demo
- 17. localStorage.setItem("message", “some object"); value = localStorage.getItem("message"); localStorage["message"] = “some object"; value = localStorage["message"];
- 18. window.addEventListener("storage", storageChanged, false); function storageChanged(/*StorageEvent*/ e) { if (e.key == "message") { var trackedMessage = $(”#trackedMessage"); trackedMessage.html( e.newValue ); } }
- 19. Demo
- 23. precision
- 24. 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);
- 25. Demo
- 29. CACHE MANIFEST CACHE: index.html photo.jpg main.js NETWORK: Not * Cached <html manifest="cache.manifest">
- 31. if (navigator.onLine) { $('#offline').addClass('hidden'); } else { $('#online').addClass('hidden'); } $(window).bind('online offline', function () { $('.applicationCache').toggleClass('hidden'); });
- 32. Demo
- 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. Demo