Building HTML5 enabled web applications with Visual Studio 2011
•Als PPTX, PDF herunterladen•
0 gefällt mir•1,731 views
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.
Empfohlen
Empfohlen
Weitere ähnliche Inhalte
Was ist angesagt?
Was ist angesagt? (20)
Ähnlich wie Building HTML5 enabled web applications with Visual Studio 2011
Ähnlich wie Building HTML5 enabled web applications with Visual Studio 2011 (20)
Mehr von Microsoft Developer Network (MSDN) - Belgium and Luxembourg
Mehr von Microsoft Developer Network (MSDN) - Belgium and Luxembourg (20)
Kürzlich hochgeladen
Kürzlich hochgeladen (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