HTML5 Driven Development

  • 312 views
Uploaded on

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

  • 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
312
On Slideshare
0
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
1
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. 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