Building HTML5 enabled web applications with Visual Studio 2011

  • 4,331 views
Uploaded 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 …

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.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
4,331
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
53
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. Peter Himschootpeter@u2u.netU2U
  • 2. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-str<!DOCTYPE html />
  • 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. <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. 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. Demo
  • 7. localStorage.setItem("message", “some object");value = localStorage.getItem("message");localStorage["message"] = “some object";value = localStorage["message"];
  • 8. window.addEventListener("storage", storageChanged, false);function storageChanged(/*StorageEvent*/ e){ if (e.key == "message") { var trackedMessage = $(”#trackedMessage"); trackedMessage.html( e.newValue ); }}
  • 9. Demo
  • 10. precision
  • 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. Demo
  • 13. CACHE MANIFESTCACHE:index.htmlphoto.jpgmain.jsNETWORK: Not* Cached <html manifest="cache.manifest">
  • 14. CACHE MANIFESTCACHE:...NETWORK:*FALLBACK:media/ images/placeholder.png
  • 15. if (navigator.onLine) { $(#offline).addClass(hidden);} else { $(#online).addClass(hidden);}$(window).bind(online offline, function () { $(.applicationCache).toggleClass(hidden);});
  • 16. Demo
  • 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. IE Firefox Chrome Safari iPhone Android WP7 OperaH.264 X X X X XAACTheora X X XVorbis VP8 X X X X XVorbis
  • 19. Demo
  • 20. http://aka.ms/mbl-techhttp://aka.ms/mbl-tech/devprevhttp://aka.ms/mbl-tech/html5