HTML5drivendevelopmentMarcin Dembowski                        .NET Developer @ Goyello    Dzień Informatyki w Akademii Mar...
HTML 5 – what is it ?Web Workers     HTML          Audio        MobileWeb Sockets   Geolocation      Video       WOFF Inde...
"A developer starts using an application from viewing its        source code"
Detect features !try {  var canvas = document.createElement("canvas");  if (canvas && canvas.getContext && canvas.getConte...
Audio and VideoPlugin free playbackNo single format specified and supportedNo streaming media  IE     Chrome   Firefox   O...
Video<video controls autoplay>  <source src="video.mp4" type="video/mp4" />  <source src="video.webm" type="video/webm" />...
GeolocationDetermine user’s locationPrecision depends on hardware used  •    GPS, WiFi  IE       Chrome   Firefox   Opera ...
Where am I ?navigator.geolocation.getCurrentPosition(  onPositionResponse  [onError],  [{ params: … }])function onPosition...
DemoAudio, Video and Geolocation   HTML5Demo                                   s                                YouTube   ...
CanvasIndividual pixel manupulation  IE    Chrome   Firefox   Opera   Safari  9+      4+       2+       9+      3.2+    Ch...
Scalable Vector GraphicsScalable, objects  IE   Chrome   Firefox   Opera   Safari  9+     4+       2+       9+      3.2+  ...
Pac ManDemo                                Irish SpringScalable Vector Graphics & Canvas   SVG Bullets                    ...
DemoWindows 8 HTML 5 application                               Live
Thanks for your attention !Marcin Dembowski                .NET Developer @ Goyellomarcindembowski.wordpress.com          ...
Upcoming SlideShare
Loading in...5
×

HTML5 Driven Development

360

Published on

26 Apr 2012 - "Dzień Informatyki w Akademii Marynarki Wojennej w Gdyni", Gdynia, Poland

Published in: Technology, Art & Photos
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
360
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "HTML5 Driven Development"

  1. 1. HTML5drivendevelopmentMarcin Dembowski .NET Developer @ Goyello Dzień Informatyki w Akademii Marynarki Wojennej w Gdyni 26 Apr 2012
  2. 2. HTML 5 – what is it ?Web Workers HTML Audio MobileWeb Sockets Geolocation Video WOFF Indexed DB File API JavaScript WebGL Offline CSS Performance Drag Drop Canvas SVG XHR2 …
  3. 3. "A developer starts using an application from viewing its source code"
  4. 4. Detect features !try { var canvas = document.createElement("canvas"); if (canvas && canvas.getContext && canvas.getContext("2d")) { // SUPPORTED } else { // NO SUPPORT } HTML 5 Test} catch (Exception e) { // NO SUPPORT Can I use} Modernizrif (Modernizr.canvas) { // SUPPORTED}
  5. 5. Audio and VideoPlugin free playbackNo single format specified and supportedNo streaming media IE Chrome Firefox Opera Safari 9+ 4+ 3.5+ 10.5+ 4+ MP4 MP4 MP4 MP4 MP4 Ogg Ogg Ogg Ogg Ogg WebM WebM WebM WebM WebM
  6. 6. Video<video controls autoplay> <source src="video.mp4" type="video/mp4" /> <source src="video.webm" type="video/webm" /> <embed src="http://..." type="application/x-schockwave-flash" width="640" height="480"> </embed></video>
  7. 7. GeolocationDetermine user’s locationPrecision depends on hardware used • GPS, WiFi IE Chrome Firefox Opera Safari 9+ 5+ 3.5+ 10.6+ 5+ W3C API
  8. 8. Where am I ?navigator.geolocation.getCurrentPosition( onPositionResponse [onError], [{ params: … }])function onPositionResponse(position) { var latitude = position.coords.latitude; var longitude = position.coords.longitude; var altitude = position.coords.altitude; = … accuracy = … altitudeAccuracy = … hading = … speed = … timestamp}
  9. 9. DemoAudio, Video and Geolocation HTML5Demo s YouTube Live
  10. 10. CanvasIndividual pixel manupulation IE Chrome Firefox Opera Safari 9+ 4+ 2+ 9+ 3.2+ Cheat Sheet Live
  11. 11. Scalable Vector GraphicsScalable, objects IE Chrome Firefox Opera Safari 9+ 4+ 2+ 9+ 3.2+ Tutorial
  12. 12. Pac ManDemo Irish SpringScalable Vector Graphics & Canvas SVG Bullets SVG Girl Live
  13. 13. DemoWindows 8 HTML 5 application Live
  14. 14. Thanks for your attention !Marcin Dembowski .NET Developer @ Goyellomarcindembowski.wordpress.com blog.goyello.com twitter.com/D3M80L twitter.com/goyello Name.Surname@goyello.com facebook.com/goyello HTML5 kariera.goyello.com driven development

×