• Save
HTML5 Driven Development
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

HTML5 Driven Development

on

  • 446 views

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

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

Statistics

Views

Total Views
446
Views on SlideShare
446
Embed Views
0

Actions

Likes
0
Downloads
1
Comments
0

0 Embeds 0

No embeds

Accessibility

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

HTML5 Driven Development Presentation Transcript

  • 1. HTML5drivendevelopmentMarcin Dembowski .NET Developer @ Goyello Dzień Informatyki w Akademii Marynarki Wojennej w Gdyni 26 Apr 2012
  • 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. "A developer starts using an application from viewing its source code"
  • 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. 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. 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. 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. 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. DemoAudio, Video and Geolocation HTML5Demo s YouTube Live
  • 10. CanvasIndividual pixel manupulation IE Chrome Firefox Opera Safari 9+ 4+ 2+ 9+ 3.2+ Cheat Sheet Live
  • 11. Scalable Vector GraphicsScalable, objects IE Chrome Firefox Opera Safari 9+ 4+ 2+ 9+ 3.2+ Tutorial
  • 12. Pac ManDemo Irish SpringScalable Vector Graphics & Canvas SVG Bullets SVG Girl Live
  • 13. DemoWindows 8 HTML 5 application Live
  • 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