• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
HTML5 Driven Development
 

HTML5 Driven Development

on

  • 392 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
392
Views on SlideShare
392
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 HTML5 Driven Development Presentation Transcript

    • HTML5drivendevelopmentMarcin Dembowski .NET Developer @ Goyello Dzień Informatyki w Akademii Marynarki Wojennej w Gdyni 26 Apr 2012
    • 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 …
    • "A developer starts using an application from viewing its source code"
    • 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}
    • 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
    • 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>
    • GeolocationDetermine user’s locationPrecision depends on hardware used • GPS, WiFi IE Chrome Firefox Opera Safari 9+ 5+ 3.5+ 10.6+ 5+ W3C API
    • 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}
    • DemoAudio, Video and Geolocation HTML5Demo s YouTube Live
    • CanvasIndividual pixel manupulation IE Chrome Firefox Opera Safari 9+ 4+ 2+ 9+ 3.2+ Cheat Sheet Live
    • Scalable Vector GraphicsScalable, objects IE Chrome Firefox Opera Safari 9+ 4+ 2+ 9+ 3.2+ Tutorial
    • Pac ManDemo Irish SpringScalable Vector Graphics & Canvas SVG Bullets SVG Girl Live
    • DemoWindows 8 HTML 5 application Live
    • 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