Your SlideShare is downloading. ×
Building HTML5 enabled web applications with Visual Studio 2011
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Building HTML5 enabled web applications with Visual Studio 2011

4,471

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 …

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,471
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
57
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

×