SlideShare a Scribd company logo
1 of 14
HTML5
driven
development

Marcin Dembowski
                        .NET Developer @ Goyello


    Dzień Informatyki w Akademii Marynarki Wojennej w Gdyni
                          26 Apr 2012
HTML 5 – what is it ?

Web Workers     HTML          Audio        Mobile




Web 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

}
                                                                Modernizr

if (Modernizr.canvas) {
    // SUPPORTED
}
Audio and Video
Plugin free playback
No single format specified and supported
No 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>
Geolocation
Determine user’s location
Precision 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
}
Demo
Audio, Video and Geolocation   HTML5Demo
                                   s



                                YouTube



                                 Live
Canvas
Individual pixel manupulation



  IE    Chrome   Firefox   Opera   Safari
  9+      4+       2+       9+      3.2+    Cheat Sheet



                                               Live
Scalable Vector Graphics
Scalable, objects



  IE   Chrome   Firefox   Opera   Safari
  9+     4+       2+       9+      3.2+


                                           Tutorial
Pac Man



Demo                                Irish Spring



Scalable Vector Graphics & Canvas   SVG Bullets



                                     SVG Girl



                                       Live
Demo
Windows 8 HTML 5 application


                               Live
Thanks for your attention !
Marcin Dembowski
                .NET Developer @ Goyello




marcindembowski.wordpress.com               blog.goyello.com


   twitter.com/D3M80L                       twitter.com/goyello


 Name.Surname@goyello.com                  facebook.com/goyello


                 HTML5                      kariera.goyello.com

                 driven
              development

More Related Content

Similar to HTML5 Driven Development

Html5 browser api_support
Html5 browser api_supportHtml5 browser api_support
Html5 browser api_support상길 안
 
HTML5 multimedia - where we are, where we're going
HTML5 multimedia - where we are, where we're goingHTML5 multimedia - where we are, where we're going
HTML5 multimedia - where we are, where we're goingbrucelawson
 
WordCamp Thessaloniki2011 The NextWeb
WordCamp Thessaloniki2011 The NextWebWordCamp Thessaloniki2011 The NextWeb
WordCamp Thessaloniki2011 The NextWebGeorge Kanellopoulos
 
HTML5 Multimedia: where we are, where we're going
HTML5 Multimedia: where we are, where we're goingHTML5 Multimedia: where we are, where we're going
HTML5 Multimedia: where we are, where we're goingbrucelawson
 
HTML5 Intoduction for Web Developers
HTML5 Intoduction for Web DevelopersHTML5 Intoduction for Web Developers
HTML5 Intoduction for Web DevelopersSascha Corti
 
An introduction to html5 by Devs
An introduction to html5 by DevsAn introduction to html5 by Devs
An introduction to html5 by DevsDebidatta Satapathy
 
WebXR: Introducing Mixed Reality and the Immersive Web - Peter O'Shaughnessy ...
WebXR: Introducing Mixed Reality and the Immersive Web - Peter O'Shaughnessy ...WebXR: Introducing Mixed Reality and the Immersive Web - Peter O'Shaughnessy ...
WebXR: Introducing Mixed Reality and the Immersive Web - Peter O'Shaughnessy ...Codemotion
 
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5Sadaaki HIRAI
 
HTML5 in online business: Web vs App
HTML5 in online business: Web vs AppHTML5 in online business: Web vs App
HTML5 in online business: Web vs AppAlberto Varela
 
HTML5 in online business: Web vs App
HTML5 in online business: Web vs AppHTML5 in online business: Web vs App
HTML5 in online business: Web vs AppEider E Iñaki
 
soft-shake.ch - Introduction to HTML5
soft-shake.ch - Introduction to HTML5soft-shake.ch - Introduction to HTML5
soft-shake.ch - Introduction to HTML5soft-shake.ch
 
East of Toronto .NET Usergroup - Put the 5 in HTML
East of Toronto .NET Usergroup - Put the 5 in HTMLEast of Toronto .NET Usergroup - Put the 5 in HTML
East of Toronto .NET Usergroup - Put the 5 in HTMLFrédéric Harper
 
HTML5 Bootcamp: Essential HTML, CSS, & JavaScript
HTML5 Bootcamp: Essential HTML, CSS, & JavaScriptHTML5 Bootcamp: Essential HTML, CSS, & JavaScript
HTML5 Bootcamp: Essential HTML, CSS, & JavaScriptTodd Anglin
 
HTML5 and Accessibility sitting in a tree
HTML5 and Accessibility sitting in a treeHTML5 and Accessibility sitting in a tree
HTML5 and Accessibility sitting in a treebrucelawson
 

Similar to HTML5 Driven Development (20)

Html5 browser api_support
Html5 browser api_supportHtml5 browser api_support
Html5 browser api_support
 
Edge of the Web
Edge of the WebEdge of the Web
Edge of the Web
 
HTML5 multimedia - where we are, where we're going
HTML5 multimedia - where we are, where we're goingHTML5 multimedia - where we are, where we're going
HTML5 multimedia - where we are, where we're going
 
WordCamp Thessaloniki2011 The NextWeb
WordCamp Thessaloniki2011 The NextWebWordCamp Thessaloniki2011 The NextWeb
WordCamp Thessaloniki2011 The NextWeb
 
HTML5 Quick Start
HTML5 Quick StartHTML5 Quick Start
HTML5 Quick Start
 
HTML5 Multimedia: where we are, where we're going
HTML5 Multimedia: where we are, where we're goingHTML5 Multimedia: where we are, where we're going
HTML5 Multimedia: where we are, where we're going
 
Word camp nextweb
Word camp nextwebWord camp nextweb
Word camp nextweb
 
Word camp nextweb
Word camp nextwebWord camp nextweb
Word camp nextweb
 
Immersed in the Web
Immersed in the WebImmersed in the Web
Immersed in the Web
 
HTML5 Intoduction for Web Developers
HTML5 Intoduction for Web DevelopersHTML5 Intoduction for Web Developers
HTML5 Intoduction for Web Developers
 
An introduction to html5 by Devs
An introduction to html5 by DevsAn introduction to html5 by Devs
An introduction to html5 by Devs
 
WebXR: Introducing Mixed Reality and the Immersive Web - Peter O'Shaughnessy ...
WebXR: Introducing Mixed Reality and the Immersive Web - Peter O'Shaughnessy ...WebXR: Introducing Mixed Reality and the Immersive Web - Peter O'Shaughnessy ...
WebXR: Introducing Mixed Reality and the Immersive Web - Peter O'Shaughnessy ...
 
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
Familiar HTML5 - 事例とサンプルコードから学ぶ 身近で普通に使わているHTML5
 
HTML5 in online business: Web vs App
HTML5 in online business: Web vs AppHTML5 in online business: Web vs App
HTML5 in online business: Web vs App
 
HTML5 in online business: Web vs App
HTML5 in online business: Web vs AppHTML5 in online business: Web vs App
HTML5 in online business: Web vs App
 
Echo HTML5
Echo HTML5Echo HTML5
Echo HTML5
 
soft-shake.ch - Introduction to HTML5
soft-shake.ch - Introduction to HTML5soft-shake.ch - Introduction to HTML5
soft-shake.ch - Introduction to HTML5
 
East of Toronto .NET Usergroup - Put the 5 in HTML
East of Toronto .NET Usergroup - Put the 5 in HTMLEast of Toronto .NET Usergroup - Put the 5 in HTML
East of Toronto .NET Usergroup - Put the 5 in HTML
 
HTML5 Bootcamp: Essential HTML, CSS, & JavaScript
HTML5 Bootcamp: Essential HTML, CSS, & JavaScriptHTML5 Bootcamp: Essential HTML, CSS, & JavaScript
HTML5 Bootcamp: Essential HTML, CSS, & JavaScript
 
HTML5 and Accessibility sitting in a tree
HTML5 and Accessibility sitting in a treeHTML5 and Accessibility sitting in a tree
HTML5 and Accessibility sitting in a tree
 

Recently uploaded

9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding TeamAdam Moalla
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URLRuncy Oommen
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAshyamraj55
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintMahmoud Rabie
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Commit University
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsSafe Software
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?IES VE
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfJamie (Taka) Wang
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Websitedgelyza
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemAsko Soukka
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfDaniel Santiago Silva Capera
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxMatsuo Lab
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6DianaGray10
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaborationbruanjhuli
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioChristian Posta
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8DianaGray10
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1DianaGray10
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...Aggregage
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureEric D. Schabell
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Brian Pichman
 

Recently uploaded (20)

9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team9 Steps For Building Winning Founding Team
9 Steps For Building Winning Founding Team
 
Designing A Time bound resource download URL
Designing A Time bound resource download URLDesigning A Time bound resource download URL
Designing A Time bound resource download URL
 
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPAAnypoint Code Builder , Google Pub sub connector and MuleSoft RPA
Anypoint Code Builder , Google Pub sub connector and MuleSoft RPA
 
Empowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership BlueprintEmpowering Africa's Next Generation: The AI Leadership Blueprint
Empowering Africa's Next Generation: The AI Leadership Blueprint
 
Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)Crea il tuo assistente AI con lo Stregatto (open source python framework)
Crea il tuo assistente AI con lo Stregatto (open source python framework)
 
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration WorkflowsIgniting Next Level Productivity with AI-Infused Data Integration Workflows
Igniting Next Level Productivity with AI-Infused Data Integration Workflows
 
How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?How Accurate are Carbon Emissions Projections?
How Accurate are Carbon Emissions Projections?
 
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
activity_diagram_combine_v4_20190827.pdfactivity_diagram_combine_v4_20190827.pdf
 
COMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a WebsiteCOMPUTER 10 Lesson 8 - Building a Website
COMPUTER 10 Lesson 8 - Building a Website
 
Bird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystemBird eye's view on Camunda open source ecosystem
Bird eye's view on Camunda open source ecosystem
 
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdfIaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
IaC & GitOps in a Nutshell - a FridayInANuthshell Episode.pdf
 
Introduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptxIntroduction to Matsuo Laboratory (ENG).pptx
Introduction to Matsuo Laboratory (ENG).pptx
 
UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6UiPath Studio Web workshop series - Day 6
UiPath Studio Web workshop series - Day 6
 
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online CollaborationCOMPUTER 10: Lesson 7 - File Storage and Online Collaboration
COMPUTER 10: Lesson 7 - File Storage and Online Collaboration
 
Comparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and IstioComparing Sidecar-less Service Mesh from Cilium and Istio
Comparing Sidecar-less Service Mesh from Cilium and Istio
 
UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8UiPath Studio Web workshop series - Day 8
UiPath Studio Web workshop series - Day 8
 
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1UiPath Platform: The Backend Engine Powering Your Automation - Session 1
UiPath Platform: The Backend Engine Powering Your Automation - Session 1
 
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
The Data Metaverse: Unpacking the Roles, Use Cases, and Tech Trends in Data a...
 
OpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability AdventureOpenShift Commons Paris - Choose Your Own Observability Adventure
OpenShift Commons Paris - Choose Your Own Observability Adventure
 
Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )Building Your Own AI Instance (TBLC AI )
Building Your Own AI Instance (TBLC AI )
 

HTML5 Driven Development

  • 1. HTML5 driven development Marcin 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 Mobile Web 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 } Modernizr if (Modernizr.canvas) { // SUPPORTED }
  • 5. Audio and Video Plugin free playback No single format specified and supported No 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. Geolocation Determine user’s location Precision 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. Demo Audio, Video and Geolocation HTML5Demo s YouTube Live
  • 10. Canvas Individual pixel manupulation IE Chrome Firefox Opera Safari 9+ 4+ 2+ 9+ 3.2+ Cheat Sheet Live
  • 11. Scalable Vector Graphics Scalable, objects IE Chrome Firefox Opera Safari 9+ 4+ 2+ 9+ 3.2+ Tutorial
  • 12. Pac Man Demo Irish Spring Scalable Vector Graphics & Canvas SVG Bullets SVG Girl Live
  • 13. Demo Windows 8 HTML 5 application Live
  • 14. Thanks for your attention ! Marcin Dembowski .NET Developer @ Goyello marcindembowski.wordpress.com blog.goyello.com twitter.com/D3M80L twitter.com/goyello Name.Surname@goyello.com facebook.com/goyello HTML5 kariera.goyello.com driven development