SlideShare a Scribd company logo

Breaking the Mobile Web with HTML5

My talk at Breaking Development Conference about Mobile Web, present & future of HTML5 on mobile devices. Nashville, sep 12, 2011

1 of 286
Download to read offline
BREAKING THE
                           MOBILE WEB
                                   Max Firtman
                                       @firt
                                     firt.mobi
                Sep, 12th, 2011
                   Nashville

Monday, September 12, 11
who am I?

      mobile+web developer
      mobilexweb.com blog


                           @firt

Monday, September 12, 11
where?




Monday, September 12, 11
where?
        buenos aires ~ argentina




Monday, September 12, 11
where?
        buenos aires ~ argentina
                           patagonia
                           soccer
                           meat & wine
                           tango
Monday, September 12, 11
where?
        buenos aires ~ argentina
                           patagonia
                           soccer
                           meat & wine
                           tango
Monday, September 12, 11

Recommended

Goto aarhus: Mobile Browser as a platform
Goto aarhus: Mobile Browser as a platformGoto aarhus: Mobile Browser as a platform
Goto aarhus: Mobile Browser as a platformMaximiliano Firtman
 
Collaborating, Presenting and Publishing in your classroom - New Pedagogy
Collaborating, Presenting and Publishing in your classroom - New Pedagogy Collaborating, Presenting and Publishing in your classroom - New Pedagogy
Collaborating, Presenting and Publishing in your classroom - New Pedagogy Mark Woolley
 
The CoffeeScript Edge
The CoffeeScript EdgeThe CoffeeScript Edge
The CoffeeScript EdgeTrevorBurnham
 
Just Ship: Managing to Stay Out of the Way
Just Ship: Managing to Stay Out of the WayJust Ship: Managing to Stay Out of the Way
Just Ship: Managing to Stay Out of the WayKen Little
 
deSymfony 2012 - El entorno de Symfony2
deSymfony 2012 - El entorno de Symfony2deSymfony 2012 - El entorno de Symfony2
deSymfony 2012 - El entorno de Symfony2Albert Jessurum
 
Understanding Mobile Apps for Events: From Strategy to Selection
Understanding Mobile Apps for Events: From Strategy to SelectionUnderstanding Mobile Apps for Events: From Strategy to Selection
Understanding Mobile Apps for Events: From Strategy to SelectionMichelle Bruno
 

More Related Content

Viewers also liked

Connecting With Customers
Connecting With CustomersConnecting With Customers
Connecting With Customershometown
 
Copy Of Fthb Presentation2
Copy Of Fthb Presentation2Copy Of Fthb Presentation2
Copy Of Fthb Presentation2peglover
 
David Scott Cosmetics
David Scott CosmeticsDavid Scott Cosmetics
David Scott CosmeticsDavid Scott
 
feliz navidad 2008/2009
feliz navidad 2008/2009feliz navidad 2008/2009
feliz navidad 2008/2009arqueomaria
 
Potential Issues within BCE
Potential Issues within BCEPotential Issues within BCE
Potential Issues within BCEJISC BCE
 
Greg Linch - Publish2 contest
Greg Linch - Publish2 contestGreg Linch - Publish2 contest
Greg Linch - Publish2 contestGreg Linch
 
Chemistry Jeopardy
Chemistry JeopardyChemistry Jeopardy
Chemistry Jeopardyginaarnold
 
Embedding BCE - Introduction
Embedding BCE - IntroductionEmbedding BCE - Introduction
Embedding BCE - IntroductionJISC BCE
 
Ilumtics corp profile_dec2011
Ilumtics corp profile_dec2011Ilumtics corp profile_dec2011
Ilumtics corp profile_dec2011Thanh Nguyen
 
Review Of Naming Compounds And Balancing Equations 1205854412907095 2
Review Of Naming Compounds And Balancing Equations 1205854412907095 2Review Of Naming Compounds And Balancing Equations 1205854412907095 2
Review Of Naming Compounds And Balancing Equations 1205854412907095 2siva sankar
 
Premier Global - Solutions and Values
Premier Global - Solutions and ValuesPremier Global - Solutions and Values
Premier Global - Solutions and Valuespremierglobal
 
Sharing Superheroes - J.Boye Philadelphia 2012 Keynote
Sharing Superheroes - J.Boye Philadelphia 2012 KeynoteSharing Superheroes - J.Boye Philadelphia 2012 Keynote
Sharing Superheroes - J.Boye Philadelphia 2012 KeynoteMichael Fienen
 
Elated Presentation
Elated PresentationElated Presentation
Elated Presentationdbaudio
 
易用性研究現場實務大綱 by David Liu
易用性研究現場實務大綱 by David Liu易用性研究現場實務大綱 by David Liu
易用性研究現場實務大綱 by David Liu悠識學院
 

Viewers also liked (20)

Connecting With Customers
Connecting With CustomersConnecting With Customers
Connecting With Customers
 
Copy Of Fthb Presentation2
Copy Of Fthb Presentation2Copy Of Fthb Presentation2
Copy Of Fthb Presentation2
 
David Scott Cosmetics
David Scott CosmeticsDavid Scott Cosmetics
David Scott Cosmetics
 
feliz navidad 2008/2009
feliz navidad 2008/2009feliz navidad 2008/2009
feliz navidad 2008/2009
 
SMS Based Push Mail
SMS Based Push MailSMS Based Push Mail
SMS Based Push Mail
 
Ilmu pengetahuan dan persoalan kita
Ilmu pengetahuan dan persoalan kitaIlmu pengetahuan dan persoalan kita
Ilmu pengetahuan dan persoalan kita
 
Potential Issues within BCE
Potential Issues within BCEPotential Issues within BCE
Potential Issues within BCE
 
Greg Linch - Publish2 contest
Greg Linch - Publish2 contestGreg Linch - Publish2 contest
Greg Linch - Publish2 contest
 
Ot 15.2
Ot 15.2Ot 15.2
Ot 15.2
 
Chemistry Jeopardy
Chemistry JeopardyChemistry Jeopardy
Chemistry Jeopardy
 
Mark Hughes
Mark HughesMark Hughes
Mark Hughes
 
Embedding BCE - Introduction
Embedding BCE - IntroductionEmbedding BCE - Introduction
Embedding BCE - Introduction
 
Ilumtics corp profile_dec2011
Ilumtics corp profile_dec2011Ilumtics corp profile_dec2011
Ilumtics corp profile_dec2011
 
Review Of Naming Compounds And Balancing Equations 1205854412907095 2
Review Of Naming Compounds And Balancing Equations 1205854412907095 2Review Of Naming Compounds And Balancing Equations 1205854412907095 2
Review Of Naming Compounds And Balancing Equations 1205854412907095 2
 
Pp6
Pp6Pp6
Pp6
 
Premier Global - Solutions and Values
Premier Global - Solutions and ValuesPremier Global - Solutions and Values
Premier Global - Solutions and Values
 
Sharing Superheroes - J.Boye Philadelphia 2012 Keynote
Sharing Superheroes - J.Boye Philadelphia 2012 KeynoteSharing Superheroes - J.Boye Philadelphia 2012 Keynote
Sharing Superheroes - J.Boye Philadelphia 2012 Keynote
 
Elated Presentation
Elated PresentationElated Presentation
Elated Presentation
 
易用性研究現場實務大綱 by David Liu
易用性研究現場實務大綱 by David Liu易用性研究現場實務大綱 by David Liu
易用性研究現場實務大綱 by David Liu
 
TmarketingConsulitng Services
TmarketingConsulitng ServicesTmarketingConsulitng Services
TmarketingConsulitng Services
 

Similar to Breaking the Mobile Web with HTML5

Ester Ytterbrink - FOSS for crips
Ester Ytterbrink - FOSS for cripsEster Ytterbrink - FOSS for crips
Ester Ytterbrink - FOSS for cripsFSCONS
 
Maximiliano Firtman
Maximiliano FirtmanMaximiliano Firtman
Maximiliano FirtmanColombia3.0
 
Multiplatform, Promises and HTML5
Multiplatform, Promises and HTML5Multiplatform, Promises and HTML5
Multiplatform, Promises and HTML5C4Media
 
Windows 1-8 voor het bedrijfsleven. Wat moet je ermee
Windows 1-8 voor het bedrijfsleven. Wat moet je ermeeWindows 1-8 voor het bedrijfsleven. Wat moet je ermee
Windows 1-8 voor het bedrijfsleven. Wat moet je ermeeVincent Everts
 
Hacks & hackers
Hacks & hackersHacks & hackers
Hacks & hackerstwh
 
Localizing iOS Apps
Localizing iOS AppsLocalizing iOS Apps
Localizing iOS Appsweissazool
 
Preso ricoh-final-deel-I
Preso ricoh-final-deel-IPreso ricoh-final-deel-I
Preso ricoh-final-deel-IRonnie Overgoor
 
Managing Databases In A DevOps Environment
Managing Databases In A DevOps EnvironmentManaging Databases In A DevOps Environment
Managing Databases In A DevOps EnvironmentRobert Treat
 
Optimizing your site for contextual ads: SEO, Design and Content
Optimizing your site for contextual ads: SEO, Design and ContentOptimizing your site for contextual ads: SEO, Design and Content
Optimizing your site for contextual ads: SEO, Design and ContentRaven Tools
 
Tackling Big Data with Hadoop
Tackling Big Data with HadoopTackling Big Data with Hadoop
Tackling Big Data with Hadooppoorlytrainedape
 
Android Design: Beyond the Guidelines
Android Design: Beyond the GuidelinesAndroid Design: Beyond the Guidelines
Android Design: Beyond the Guidelineskevingrant5
 
South Africa: Doing Things Differently
South Africa: Doing Things DifferentlySouth Africa: Doing Things Differently
South Africa: Doing Things DifferentlyWilliam Price
 
Vlogging for Assessment and Critical Reflection
Vlogging for Assessment and Critical ReflectionVlogging for Assessment and Critical Reflection
Vlogging for Assessment and Critical ReflectionAmy Burvall
 
Oliver Weidlich presentation
Oliver Weidlich presentationOliver Weidlich presentation
Oliver Weidlich presentationMetro Screen
 
Orientacao a objetos e design patterns - Secomp Londrina
Orientacao a objetos e design patterns - Secomp LondrinaOrientacao a objetos e design patterns - Secomp Londrina
Orientacao a objetos e design patterns - Secomp LondrinaVinicius Quaiato
 

Similar to Breaking the Mobile Web with HTML5 (20)

Ester Ytterbrink - FOSS for crips
Ester Ytterbrink - FOSS for cripsEster Ytterbrink - FOSS for crips
Ester Ytterbrink - FOSS for crips
 
Maximiliano Firtman
Maximiliano FirtmanMaximiliano Firtman
Maximiliano Firtman
 
Multiplatform, Promises and HTML5
Multiplatform, Promises and HTML5Multiplatform, Promises and HTML5
Multiplatform, Promises and HTML5
 
Mobile? WT... F?
Mobile? WT... F?Mobile? WT... F?
Mobile? WT... F?
 
Pulse News: porting android app to tablet
Pulse News: porting android app to tabletPulse News: porting android app to tablet
Pulse News: porting android app to tablet
 
Windows 1-8 voor het bedrijfsleven. Wat moet je ermee
Windows 1-8 voor het bedrijfsleven. Wat moet je ermeeWindows 1-8 voor het bedrijfsleven. Wat moet je ermee
Windows 1-8 voor het bedrijfsleven. Wat moet je ermee
 
Hacks & hackers
Hacks & hackersHacks & hackers
Hacks & hackers
 
Localizing iOS Apps
Localizing iOS AppsLocalizing iOS Apps
Localizing iOS Apps
 
Preso ricoh-final-deel-I
Preso ricoh-final-deel-IPreso ricoh-final-deel-I
Preso ricoh-final-deel-I
 
Reviving RIM
Reviving RIMReviving RIM
Reviving RIM
 
Embedjs
EmbedjsEmbedjs
Embedjs
 
Managing Databases In A DevOps Environment
Managing Databases In A DevOps EnvironmentManaging Databases In A DevOps Environment
Managing Databases In A DevOps Environment
 
Optimizing your site for contextual ads: SEO, Design and Content
Optimizing your site for contextual ads: SEO, Design and ContentOptimizing your site for contextual ads: SEO, Design and Content
Optimizing your site for contextual ads: SEO, Design and Content
 
Tackling Big Data with Hadoop
Tackling Big Data with HadoopTackling Big Data with Hadoop
Tackling Big Data with Hadoop
 
Android Design: Beyond the Guidelines
Android Design: Beyond the GuidelinesAndroid Design: Beyond the Guidelines
Android Design: Beyond the Guidelines
 
South Africa Tourism
South Africa TourismSouth Africa Tourism
South Africa Tourism
 
South Africa: Doing Things Differently
South Africa: Doing Things DifferentlySouth Africa: Doing Things Differently
South Africa: Doing Things Differently
 
Vlogging for Assessment and Critical Reflection
Vlogging for Assessment and Critical ReflectionVlogging for Assessment and Critical Reflection
Vlogging for Assessment and Critical Reflection
 
Oliver Weidlich presentation
Oliver Weidlich presentationOliver Weidlich presentation
Oliver Weidlich presentation
 
Orientacao a objetos e design patterns - Secomp Londrina
Orientacao a objetos e design patterns - Secomp LondrinaOrientacao a objetos e design patterns - Secomp Londrina
Orientacao a objetos e design patterns - Secomp Londrina
 

More from Maximiliano Firtman

ChatGPT and AI for Web Developers
ChatGPT and AI for Web DevelopersChatGPT and AI for Web Developers
ChatGPT and AI for Web DevelopersMaximiliano Firtman
 
Hacking Web Performance en Español - JSConf México 2020
Hacking Web Performance en Español - JSConf México 2020Hacking Web Performance en Español - JSConf México 2020
Hacking Web Performance en Español - JSConf México 2020Maximiliano Firtman
 
Uncovering Secrets of Progressive Web Apps
Uncovering Secrets of Progressive Web AppsUncovering Secrets of Progressive Web Apps
Uncovering Secrets of Progressive Web AppsMaximiliano Firtman
 
Hacking Web Performance @ ForwardJS 2017
Hacking Web Performance @ ForwardJS 2017Hacking Web Performance @ ForwardJS 2017
Hacking Web Performance @ ForwardJS 2017Maximiliano Firtman
 
La Web Salta al Mundo Físico - Web meets Physical World (spanish)
La Web Salta al Mundo Físico - Web meets Physical World (spanish)La Web Salta al Mundo Físico - Web meets Physical World (spanish)
La Web Salta al Mundo Físico - Web meets Physical World (spanish)Maximiliano Firtman
 
Progressive Web Apps (español - spanish)
Progressive Web Apps (español - spanish)Progressive Web Apps (español - spanish)
Progressive Web Apps (español - spanish)Maximiliano Firtman
 
High Performance Web - Full Stack Toronto
High Performance Web - Full Stack TorontoHigh Performance Web - Full Stack Toronto
High Performance Web - Full Stack TorontoMaximiliano Firtman
 
Responsive Images and Performance
Responsive Images and PerformanceResponsive Images and Performance
Responsive Images and PerformanceMaximiliano Firtman
 
The Physical World meets the Web
The Physical World meets the WebThe Physical World meets the Web
The Physical World meets the WebMaximiliano Firtman
 
Extreme Web Performance for Mobile Devices
Extreme Web Performance for Mobile Devices Extreme Web Performance for Mobile Devices
Extreme Web Performance for Mobile Devices Maximiliano Firtman
 
Extreme Web Performance for Mobile Device Fluent 2015
Extreme Web Performance for Mobile Device Fluent 2015Extreme Web Performance for Mobile Device Fluent 2015
Extreme Web Performance for Mobile Device Fluent 2015Maximiliano Firtman
 
Extreme Web Performance for Mobile Devices - Velocity Barcelona 2014
Extreme Web Performance for Mobile Devices - Velocity Barcelona 2014Extreme Web Performance for Mobile Devices - Velocity Barcelona 2014
Extreme Web Performance for Mobile Devices - Velocity Barcelona 2014Maximiliano Firtman
 
Extreme Web Performance for Mobile Devices - Velocity NY
Extreme Web Performance for Mobile Devices - Velocity NYExtreme Web Performance for Mobile Devices - Velocity NY
Extreme Web Performance for Mobile Devices - Velocity NYMaximiliano Firtman
 
Extreme Web Performance for Mobile Devices
Extreme Web Performance for Mobile DevicesExtreme Web Performance for Mobile Devices
Extreme Web Performance for Mobile DevicesMaximiliano Firtman
 

More from Maximiliano Firtman (20)

ChatGPT and AI for Web Developers
ChatGPT and AI for Web DevelopersChatGPT and AI for Web Developers
ChatGPT and AI for Web Developers
 
PWA Cheat Sheet 2023
PWA Cheat Sheet 2023PWA Cheat Sheet 2023
PWA Cheat Sheet 2023
 
Hacking Web Performance en Español - JSConf México 2020
Hacking Web Performance en Español - JSConf México 2020Hacking Web Performance en Español - JSConf México 2020
Hacking Web Performance en Español - JSConf México 2020
 
The modern PWA Cheat Sheet
The modern PWA Cheat SheetThe modern PWA Cheat Sheet
The modern PWA Cheat Sheet
 
Hacking Web Performance 2019
Hacking Web Performance 2019Hacking Web Performance 2019
Hacking Web Performance 2019
 
Progressive Web Apps Keynote
Progressive Web Apps KeynoteProgressive Web Apps Keynote
Progressive Web Apps Keynote
 
Hacking Web Performance
Hacking Web PerformanceHacking Web Performance
Hacking Web Performance
 
Uncovering Secrets of Progressive Web Apps
Uncovering Secrets of Progressive Web AppsUncovering Secrets of Progressive Web Apps
Uncovering Secrets of Progressive Web Apps
 
Hacking Web Performance
Hacking Web Performance Hacking Web Performance
Hacking Web Performance
 
Hacking Web Performance @ ForwardJS 2017
Hacking Web Performance @ ForwardJS 2017Hacking Web Performance @ ForwardJS 2017
Hacking Web Performance @ ForwardJS 2017
 
La Web Salta al Mundo Físico - Web meets Physical World (spanish)
La Web Salta al Mundo Físico - Web meets Physical World (spanish)La Web Salta al Mundo Físico - Web meets Physical World (spanish)
La Web Salta al Mundo Físico - Web meets Physical World (spanish)
 
Progressive Web Apps (español - spanish)
Progressive Web Apps (español - spanish)Progressive Web Apps (español - spanish)
Progressive Web Apps (español - spanish)
 
High Performance Web - Full Stack Toronto
High Performance Web - Full Stack TorontoHigh Performance Web - Full Stack Toronto
High Performance Web - Full Stack Toronto
 
Responsive Images and Performance
Responsive Images and PerformanceResponsive Images and Performance
Responsive Images and Performance
 
The Physical World meets the Web
The Physical World meets the WebThe Physical World meets the Web
The Physical World meets the Web
 
Extreme Web Performance for Mobile Devices
Extreme Web Performance for Mobile Devices Extreme Web Performance for Mobile Devices
Extreme Web Performance for Mobile Devices
 
Extreme Web Performance for Mobile Device Fluent 2015
Extreme Web Performance for Mobile Device Fluent 2015Extreme Web Performance for Mobile Device Fluent 2015
Extreme Web Performance for Mobile Device Fluent 2015
 
Extreme Web Performance for Mobile Devices - Velocity Barcelona 2014
Extreme Web Performance for Mobile Devices - Velocity Barcelona 2014Extreme Web Performance for Mobile Devices - Velocity Barcelona 2014
Extreme Web Performance for Mobile Devices - Velocity Barcelona 2014
 
Extreme Web Performance for Mobile Devices - Velocity NY
Extreme Web Performance for Mobile Devices - Velocity NYExtreme Web Performance for Mobile Devices - Velocity NY
Extreme Web Performance for Mobile Devices - Velocity NY
 
Extreme Web Performance for Mobile Devices
Extreme Web Performance for Mobile DevicesExtreme Web Performance for Mobile Devices
Extreme Web Performance for Mobile Devices
 

Breaking the Mobile Web with HTML5

  • 1. BREAKING THE MOBILE WEB Max Firtman @firt firt.mobi Sep, 12th, 2011 Nashville Monday, September 12, 11
  • 2. who am I? mobile+web developer mobilexweb.com blog @firt Monday, September 12, 11
  • 4. where? buenos aires ~ argentina Monday, September 12, 11
  • 5. where? buenos aires ~ argentina patagonia soccer meat & wine tango Monday, September 12, 11
  • 6. where? buenos aires ~ argentina patagonia soccer meat & wine tango Monday, September 12, 11
  • 7. where? buenos aires ~ argentina patagonia true lies tango scene soccer meat & wine tango Monday, September 12, 11
  • 8. books Image from my house Monday, September 12, 11
  • 10. Using the Latest Today Mobile HTML5 coming soon... Estelle Weyl & Maximiliano Firtman also by @estellevw Monday, September 12, 11
  • 11. many of you have two questions for me Monday, September 12, 11
  • 12. the first answer is no Monday, September 12, 11
  • 13. the second answer is yes Monday, September 12, 11
  • 14. other projects Blog www.mobilexweb.com +40 links, +300 emulators www.mobilexweb.com/emulators typing long URLs on mobile? www.mobiletinyurl.com Monday, September 12, 11
  • 17. agenda ‣ why? Monday, September 12, 11
  • 18. agenda ‣ why? ‣ what’s the problem? Monday, September 12, 11
  • 19. agenda ‣ why? ‣ what’s the problem? ‣ why are we here? Monday, September 12, 11
  • 20. agenda ‣ why? ‣ what’s the problem? ‣ why are we here? ‣ mobile browsers today Monday, September 12, 11
  • 21. agenda ‣ why? ‣ what’s the problem? ‣ why are we here? ‣ mobile browsers today ‣ forget & learn Monday, September 12, 11
  • 22. agenda ‣ why? ‣ what’s the problem? ‣ why are we here? ‣ mobile browsers today ‣ forget & learn ‣ mobile web toolkit Monday, September 12, 11
  • 23. agenda ‣ why? ‣ what’s the problem? ‣ why are we here? ‣ mobile browsers today ‣ forget & learn ‣ mobile web toolkit ‣ html5 today Monday, September 12, 11
  • 24. agenda ‣ why? ‣ what’s the problem? ‣ why are we here? ‣ mobile browsers today ‣ forget & learn ‣ mobile web toolkit ‣ html5 today ‣ the future Monday, September 12, 11
  • 26. mobile devices are our flying cars Monday, September 12, 11
  • 27. mobile is more about users Monday, September 12, 11
  • 29. mobile ‣ absolutely personal Monday, September 12, 11
  • 30. mobile ‣ absolutely personal ‣ +5 billions Monday, September 12, 11
  • 31. mobile ‣ absolutely personal ‣ +5 billions ‣ make us focus Monday, September 12, 11
  • 32. mobile ‣ absolutely personal ‣ +5 billions ‣ make us focus ‣ read our context... Monday, September 12, 11
  • 33. mobile ‣ absolutely personal ‣ +5 billions ‣ make us focus ‣ read our context... ‣ ... always... Monday, September 12, 11
  • 34. mobile ‣ absolutely personal ‣ +5 billions ‣ make us focus ‣ read our context... ‣ ... always... ‣ ... and everywhere. Monday, September 12, 11
  • 35. then... what is the problem? Monday, September 12, 11
  • 36. mobile is a minefield Photo by World of Good (Flickr) Malvinas / Falklands Islands Monday, September 12, 11
  • 37. lots of questions Photo by wayneandwax (Flickr) Monday, September 12, 11
  • 38. we need to learn lots of questions Monday, September 12, 11
  • 39. lots of platforms Monday, September 12, 11
  • 40. mobile web appears Monday, September 12, 11
  • 41. native vs web Monday, September 12, 11
  • 43. Are you sure? Monday, September 12, 11
  • 44. native code vs javascript Monday, September 12, 11
  • 45. browser vs installed apps & stores Monday, September 12, 11
  • 46. lack of definitions Monday, September 12, 11
  • 47. when we say mobile web Monday, September 12, 11
  • 48. when we say mobile web from a developer’s perspective it’s using HTML, CSS and JavaScript to develop mobile apps Monday, September 12, 11
  • 49. when we say mobile web from a developer’s perspective it’s using HTML, CSS and JavaScript to develop mobile apps (browser or installed) Monday, September 12, 11
  • 50. what’s the problem with mobile web? Monday, September 12, 11
  • 51. we are second class producers Monday, September 12, 11
  • 53. second class ‣vague, non-existent or outdated documentation Monday, September 12, 11
  • 54. second class ‣ vague, non-existent or outdated documentation ‣ new features discovered by third-parties Monday, September 12, 11
  • 55. second class ‣ vague, non-existent or outdated documentation ‣ new features discovered by third-parties ‣ lack of samples Monday, September 12, 11
  • 56. second class ‣ vague, non-existent or outdated documentation ‣ new features discovered by third-parties ‣ lack of samples ‣ no developer tools Monday, September 12, 11
  • 57. what? Updated: 02 Sep 2011 Monday, September 12, 11
  • 58. Testing & debugging Monday, September 12, 11
  • 60. Photo by Ben Millett (Flickr) Monday, September 12, 11
  • 62. Are you sure to be happy? Photo by Ricky David (Flickr) Monday, September 12, 11
  • 63. What is ? Monday, September 12, 11
  • 65. html5 ‣ w3c standards (all in draft) Monday, September 12, 11
  • 66. html5 ‣ w3c standards (all in draft) ‣ some are other w3c standards (css, svg, geolocation) Monday, September 12, 11
  • 67. html5 ‣ w3c standards (all in draft) ‣ some are other w3c standards (css, svg, geolocation) ‣ de-facto standards Monday, September 12, 11
  • 68. html5 ‣ w3c standards (all in draft) ‣ some are other w3c standards (css, svg, geolocation) ‣ de-facto standards ‣ w3c ex-standards Monday, September 12, 11
  • 69. html5 ‣ w3c standards (all in draft) ‣ some are other w3c standards (css, svg, geolocation) ‣ de-facto standards ‣ w3c ex-standards ‣ everything “new” on the web Monday, September 12, 11
  • 71. html5 today: Monday, September 12, 11
  • 72. html5 today: lack of real, good and practical information for mobile on the html5 community Monday, September 12, 11
  • 73. caniuse.com • Simplification of the mobile web browser space • Inaccurate information Monday, September 12, 11
  • 74. Modernizr • Inaccurate information - inlinesvg and webgl Monday, September 12, 11
  • 75. html5test.com Not clear the html5 concept behind these tests Monday, September 12, 11
  • 76. let’s try to clarify Monday, September 12, 11
  • 78. Photo by Ben Millett (Flickr) Monday, September 12, 11
  • 80. mobile browsers ‣ too many Monday, September 12, 11
  • 81. mobile browsers ‣ too many ‣ (some) too limited Monday, September 12, 11
  • 82. mobile browsers ‣ too many ‣ (some) too limited ‣ (some) too innovative Monday, September 12, 11
  • 83. mobile browsers ‣ too many ‣ (some) too limited ‣ (some) too innovative ‣ (some) proxy based Monday, September 12, 11
  • 84. mobile browsers ‣ too many ‣ (some) too limited ‣ (some) too innovative ‣ (some) proxy based ‣ (most) without documentation Monday, September 12, 11
  • 85. mobile browsers ‣ too many ‣ (some) too limited ‣ (some) too innovative ‣ (some) proxy based ‣ (most) without documentation ‣ (most) without a name Monday, September 12, 11
  • 86. mobile browsers ‣ too many ‣ (some) too limited ‣ (some) too innovative ‣ (some) proxy based ‣ (most) without documentation ‣ (most) without a name ‣ (most) without debugging tools Monday, September 12, 11
  • 88. mobile browsers ‣ (some) focus-based Monday, September 12, 11
  • 89. mobile browsers ‣ (some) focus-based ‣ (some) cursor-based Monday, September 12, 11
  • 90. mobile browsers ‣ (some) focus-based ‣ (some) cursor-based ‣ (some) touch-based Monday, September 12, 11
  • 91. mobile browsers ‣ (some) focus-based ‣ (some) cursor-based ‣ (some) touch-based ‣ (some) multitouch-based Monday, September 12, 11
  • 92. mobile browsers ‣ (some) focus-based ‣ (some) cursor-based ‣ (some) touch-based ‣ (some) multitouch-based ‣ (some) with zooming support Monday, September 12, 11
  • 93. mobile browsers ‣ (some) focus-based ‣ (some) cursor-based ‣ (some) touch-based ‣ (some) multitouch-based ‣ (some) with zooming support ‣ (most) unknown for web devs Monday, September 12, 11
  • 94. MOBILE WEB USAGE! Smartphones, Smartphones, Social,Phones, Social,Phones, Feature, Feature,Phones, Phones, MARKET SHARE! Monday, September 12, 11
  • 95. a quick, dirty list Monday, September 12, 11
  • 96. a quick, dirty list ‣ Safari on iOS ‣ Android Browser ‣ Nokia Browser for Symbian ‣ webOS Browser ‣ BlackBerry Browser ‣ Opera Mobile ‣ Opera Mini ‣ Firefox ‣ Internet Explorer Monday, September 12, 11
  • 97. a quick, dirty list (cont.) Monday, September 12, 11
  • 98. a quick, dirty list (cont.) ‣ Bada Browser ‣ NetFront ‣ Myriad ‣ Nokia Browser (Ovi) ‣ Phantom ‣ microB ‣ Skyfire ‣ BOLT Monday, September 12, 11
  • 99. they are on tablets too! Monday, September 12, 11
  • 100. they are on tablets too! ‣ Safari on iOS ‣ Android Browser ‣ webOS Browser ‣ BlackBerry Browser ‣ Opera Mini Monday, September 12, 11
  • 101. and with different versions... Monday, September 12, 11
  • 102. and there’s more! Monday, September 12, 11
  • 105. pseudobrowsers ‣ mostly on iOS and Android Monday, September 12, 11
  • 106. pseudobrowsers ‣ mostly on iOS and Android ‣ uses the internal web control Monday, September 12, 11
  • 107. pseudobrowsers ‣ mostly on iOS and Android ‣ uses the internal web control ‣ have different behavior than the native! Monday, September 12, 11
  • 109. don’t give up yet Monday, September 12, 11
  • 110. mobile IE reborn Monday, September 12, 11
  • 111. mobile IE reborn ‣ on Windows Phone Mango, full Internet Explorer 9 with HTML5 Monday, September 12, 11
  • 112. mobile IE reborn ‣ on Windows Phone Mango, full Internet Explorer 9 with HTML5 ‣ but... Monday, September 12, 11
  • 113. the WebKit problem Monday, September 12, 11
  • 114. the WebKit problem ‣ we are doing some things wrong Monday, September 12, 11
  • 115. the WebKit problem ‣ we are doing some things wrong ‣ mostly css3, using only -webkit prefix Monday, September 12, 11
  • 116. the WebKit problem ‣ we are doing some things wrong ‣ mostly css3, using only -webkit prefix ‣ IE9, Firefox, Opera second-class citizens Monday, September 12, 11
  • 117. the WebKit problem Monday, September 12, 11
  • 118. the WebKit problem ‣ do WebKit development for mobile Monday, September 12, 11
  • 119. the WebKit problem ‣ do WebKit development for mobile ‣ but also take care of the others Monday, September 12, 11
  • 120. the WebKit problem ‣ do WebKit development for mobile ‣ but also take care of the others ‣ please? Monday, September 12, 11
  • 121. we need to forget and learn Monday, September 12, 11
  • 123. forget about ‣ pixels Monday, September 12, 11
  • 124. forget about ‣ pixels ‣ static designs Monday, September 12, 11
  • 125. forget about ‣ pixels ‣ static designs ‣ desktop frameworks (ok, not always) Monday, September 12, 11
  • 126. forget about ‣ pixels ‣ static designs ‣ desktop frameworks (ok, not always) ‣ always connected Monday, September 12, 11
  • 127. forget about ‣ pixels ‣ static designs ‣ desktop frameworks (ok, not always) ‣ always connected ‣ unlimited power Monday, September 12, 11
  • 128. forget about ‣ pixels ‣ static designs ‣ desktop frameworks (ok, not always) ‣ always connected ‣ unlimited power ‣ everyone see the same Monday, September 12, 11
  • 129. forget about ‣ pixels ‣ static designs ‣ desktop frameworks (ok, not always) ‣ always connected ‣ unlimited power ‣ everyone see the same ‣ insulting your users Monday, September 12, 11
  • 130. forget about ‣ pixels ‣ static designs ‣ desktop frameworks (ok, not always) ‣ always connected ‣ unlimited power ‣ everyone see the same ‣ insulting your users ‣ device conditionals Monday, September 12, 11
  • 132. learn about ‣ server-side detection Monday, September 12, 11
  • 133. learn about ‣ server-side detection ‣ progressive enhancement Monday, September 12, 11
  • 134. learn about ‣ server-side detection ‣ progressive enhancement ‣ responsive design, but.... Monday, September 12, 11
  • 135. learn about ‣ server-side detection ‣ progressive enhancement ‣ responsive design, but.... ‣ mobile usability Monday, September 12, 11
  • 136. learn about ‣ server-side detection ‣ progressive enhancement ‣ responsive design, but.... ‣ mobile usability ‣ mobile use cases Monday, September 12, 11
  • 137. learn about ‣ server-side detection ‣ progressive enhancement ‣ responsive design, but.... ‣ mobile usability ‣ mobile use cases ‣ best experience for each context Monday, September 12, 11
  • 138. learn about ‣ server-side detection ‣ progressive enhancement ‣ responsive design, but.... ‣ mobile usability ‣ mobile use cases ‣ best experience for each context ‣ the “top model” approach, aka WPO Monday, September 12, 11
  • 139. learn about ‣ server-side detection ‣ progressive enhancement ‣ responsive design, but.... ‣ mobile usability ‣ mobile use cases ‣ best experience for each context ‣ the “top model” approach, aka WPO ‣ gain user loyalty Monday, September 12, 11
  • 141. learn about ‣ what’s the viewport and how applies to our designs Monday, September 12, 11
  • 142. learn about ‣ what’s the viewport and how applies to our designs ‣ what’s the target density (pixel ratio) Monday, September 12, 11
  • 143. learn about ‣ what’s the viewport and how applies to our designs ‣ what’s the target density (pixel ratio) ‣ how to fix elements on screen Monday, September 12, 11
  • 144. learn about ‣ what’s the viewport and how applies to our designs ‣ what’s the target density (pixel ratio) ‣ how to fix elements on screen ‣ how background code works Monday, September 12, 11
  • 145. learn about ‣ what’s the viewport and how applies to our designs ‣ what’s the target density (pixel ratio) ‣ how to fix elements on screen ‣ how background code works ‣ data URI - inlining content Monday, September 12, 11
  • 146. mobile web toolkit Monday, September 12, 11
  • 147. emulators www.mobilexweb.com/emulators Monday, September 12, 11
  • 148. friends lots of them Monday, September 12, 11
  • 149. virtual labs real devices on real networks www.perfectomobile.com www.deviceanywhere.com Monday, September 12, 11
  • 150. device libraries detect devices and abilities from server-side manually tested www.wurfl.com www.deviceatlas.com Monday, September 12, 11
  • 151. debugging tools remote web inspector (BB 7.0 y PlayBook) opera mobile (DragonFly) weinre phonegap.github.com/weinre debug.phonegap.com Monday, September 12, 11
  • 152. performance tools just starting... http://stevesouders.com/mobileperf/ Monday, September 12, 11
  • 153. and what about capabilities today? Monday, September 12, 11
  • 155. offline installation HTML5 3.0+ 2.1+ 6.0+ Mobile 11+ 5.0+ Monday, September 12, 11
  • 156. offline installation ‣ Install a package on the device HTML5 3.0+ 2.1+ 6.0+ Mobile 11+ 5.0+ Monday, September 12, 11
  • 157. offline installation ‣ Install a package on the device ‣ Complex to debug / reload HTML5 3.0+ 2.1+ 6.0+ Mobile 11+ 5.0+ Monday, September 12, 11
  • 158. offline installation ‣ Install a package on the device ‣ Complex to debug / reload ‣ Buggy on some platforms HTML5 3.0+ 2.1+ 6.0+ Mobile 11+ 5.0+ Monday, September 12, 11
  • 159. offline installation ‣ Install a package on the device ‣ Complex to debug / reload ‣ Buggy on some platforms ‣ online / offline events HTML5 3.0+ 2.1+ 6.0+ Mobile 11+ 5.0+ Monday, September 12, 11
  • 160. offline installation ‣ Install a package on the device ‣ Complex to debug / reload ‣ Buggy on some platforms ‣ online / offline events ‣ on iOS can be mixed with icons and full- screen webapp metatags HTML5 3.0+ 2.1+ 6.0+ Mobile 11+ 5.0+ Monday, September 12, 11
  • 161. geolocation Geolocation 2.0+ 2.0+ 6.0+ 9.0+ Mobile 11+ 5.0+ Monday, September 12, 11
  • 162. geolocation ‣ GPS, A-GPS, Wi-Fi, cells Geolocation 2.0+ 2.0+ 6.0+ 9.0+ Mobile 11+ 5.0+ Monday, September 12, 11
  • 163. geolocation ‣ GPS, A-GPS, Wi-Fi, cells ‣ (some) force GPS “highAccuracy” Geolocation 2.0+ 2.0+ 6.0+ 9.0+ Mobile 11+ 5.0+ Monday, September 12, 11
  • 164. geolocation ‣ GPS, A-GPS, Wi-Fi, cells ‣ (some) force GPS “highAccuracy” ‣ (some) heading Geolocation 2.0+ 2.0+ 6.0+ 9.0+ Mobile 11+ 5.0+ Monday, September 12, 11
  • 165. geolocation ‣ GPS, A-GPS, Wi-Fi, cells ‣ (some) force GPS “highAccuracy” ‣ (some) heading ‣ once or movement Geolocation 2.0+ 2.0+ 6.0+ 9.0+ Mobile 11+ 5.0+ Monday, September 12, 11
  • 166. offline web storage Web Storage 2.0+ 2.0+ 6.0+ 9.0+ Mobile 11+ 5.0+ Monday, September 12, 11
  • 167. offline web storage ‣ persistent and session storage Web Storage 2.0+ 2.0+ 6.0+ 9.0+ Mobile 11+ 5.0+ Monday, September 12, 11
  • 168. offline web storage ‣ persistent and session storage ‣ key/value (strings) Web Storage 2.0+ 2.0+ 6.0+ 9.0+ Mobile 11+ 5.0+ Monday, September 12, 11
  • 169. offline web storage ‣ persistent and session storage ‣ key/value (strings) ‣ (some) allow object storage Web Storage 2.0+ 2.0+ 6.0+ 9.0+ Mobile 11+ 5.0+ Monday, September 12, 11
  • 170. offline web storage ‣ persistent and session storage ‣ key/value (strings) ‣ (some) allow object storage ‣ limit space, non-standard ~5Mb Web Storage 2.0+ 2.0+ 6.0+ 9.0+ Mobile 11+ 5.0+ Monday, September 12, 11
  • 171. offline web storage ‣ persistent and session storage ‣ key/value (strings) ‣ (some) allow object storage ‣ limit space, non-standard ~5Mb ‣ be careful with private browsing Web Storage 2.0+ 2.0+ 6.0+ 9.0+ Mobile 11+ 5.0+ Monday, September 12, 11
  • 172. offline sql storage deprecated 2.2+ 2.0+ 6.0+ Mobile 11+ Monday, September 12, 11
  • 173. offline sql storage ‣ persistent and session storage deprecated 2.2+ 2.0+ 6.0+ Mobile 11+ Monday, September 12, 11
  • 174. offline sql storage ‣ persistent and session storage ‣ key/value (strings) deprecated 2.2+ 2.0+ 6.0+ Mobile 11+ Monday, September 12, 11
  • 175. offline sql storage ‣ persistent and session storage ‣ key/value (strings) ‣ (some) allow object storage deprecated 2.2+ 2.0+ 6.0+ Mobile 11+ Monday, September 12, 11
  • 176. offline sql storage ‣ persistent and session storage ‣ key/value (strings) ‣ (some) allow object storage ‣ limit space, non-standard ~5Mb deprecated 2.2+ 2.0+ 6.0+ Mobile 11+ Monday, September 12, 11
  • 177. offline sql storage ‣ persistent and session storage ‣ key/value (strings) ‣ (some) allow object storage ‣ limit space, non-standard ~5Mb ‣ be careful with private browsing deprecated 2.2+ 2.0+ 6.0+ Mobile 11+ Monday, September 12, 11
  • 178. multimedia API Web Storage 3.0+ 2.3+ 7.0+ 9.0+ Mobile 11+ 5.0+ Monday, September 12, 11
  • 179. multimedia API ‣ audio and video tags Web Storage 3.0+ 2.3+ 7.0+ 9.0+ Mobile 11+ 5.0+ Monday, September 12, 11
  • 180. multimedia API ‣ audio and video tags ‣ javascript api & events Web Storage 3.0+ 2.3+ 7.0+ 9.0+ Mobile 11+ 5.0+ Monday, September 12, 11
  • 181. multimedia API ‣ audio and video tags ‣ javascript api & events ‣ codecs nightmare Web Storage 3.0+ 2.3+ 7.0+ 9.0+ Mobile 11+ 5.0+ Monday, September 12, 11
  • 182. server-sent events Server-Sent events 4.1+ Mobile 11+ 6.0+ Monday, September 12, 11
  • 183. server-sent events ‣ EventSource Server-Sent events 4.1+ Mobile 11+ 6.0+ Monday, September 12, 11
  • 184. server-sent events ‣ EventSource ‣ reduce AJAX/Comet solutions Server-Sent events 4.1+ Mobile 11+ 6.0+ Monday, September 12, 11
  • 185. server-sent events ‣ EventSource ‣ reduce AJAX/Comet solutions ‣ be careful with proxies/3g connections Server-Sent events 4.1+ Mobile 11+ 6.0+ Monday, September 12, 11
  • 186. web sockets web sockets 4.2+ 6.1+ Mobile 11+ 6.0+ Monday, September 12, 11
  • 187. web sockets ‣ Evolution of bi-directional communication web sockets 4.2+ 6.1+ Mobile 11+ 6.0+ Monday, September 12, 11
  • 188. web sockets ‣ Evolution of bi-directional communication ‣ reduce AJAX/Comet solutions web sockets 4.2+ 6.1+ Mobile 11+ 6.0+ Monday, September 12, 11
  • 189. web sockets ‣ Evolution of bi-directional communication ‣ reduce AJAX/Comet solutions ‣ be careful with proxies/3g connections web sockets 4.2+ 6.1+ Mobile 11+ 6.0+ Monday, September 12, 11
  • 190. web sockets ‣ Evolution of bi-directional communication ‣ reduce AJAX/Comet solutions ‣ be careful with proxies/3g connections ‣ special server web sockets 4.2+ 6.1+ Mobile 11+ 6.0+ Monday, September 12, 11
  • 191. web sockets ‣ Evolution of bi-directional communication ‣ reduce AJAX/Comet solutions ‣ be careful with proxies/3g connections ‣ special server ‣ standard changed months ago web sockets 4.2+ 6.1+ Mobile 11+ 6.0+ Monday, September 12, 11
  • 192. web workers web workers 6.0+ Mobile 11+ 6.0+ Monday, September 12, 11
  • 193. web workers ‣ threading in JavaScript web workers 6.0+ Mobile 11+ 6.0+ Monday, September 12, 11
  • 194. web workers ‣ threading in JavaScript ‣ important for performance web workers 6.0+ Mobile 11+ 6.0+ Monday, September 12, 11
  • 195. web workers ‣ threading in JavaScript ‣ important for performance ‣ worker without DOM manipulation web workers 6.0+ Mobile 11+ 6.0+ Monday, September 12, 11
  • 196. 2d drawing api (canvas) HTML5 1.0+ 1.5+ 6.0+ 9.0+ Mob 10+ / Mini 5 4.0+ Monday, September 12, 11
  • 197. 2d drawing api (canvas) ‣ great support HTML5 1.0+ 1.5+ 6.0+ 9.0+ Mob 10+ / Mini 5 4.0+ Monday, September 12, 11
  • 198. 2d drawing api (canvas) ‣ great support ‣ javascript-based drawing HTML5 1.0+ 1.5+ 6.0+ 9.0+ Mob 10+ / Mini 5 4.0+ Monday, September 12, 11
  • 199. 2d drawing api (canvas) ‣ great support ‣ javascript-based drawing ‣ (some) allows data URI export HTML5 1.0+ 1.5+ 6.0+ 9.0+ Mob 10+ / Mini 5 4.0+ Monday, September 12, 11
  • 200. svg SVG 2.2+ 3.0+ 4.7+ 9.0+ Mob 10+ / Mini 5 4.0+ Monday, September 12, 11
  • 201. svg ‣ old standard SVG 2.2+ 3.0+ 4.7+ 9.0+ Mob 10+ / Mini 5 4.0+ Monday, September 12, 11
  • 202. svg ‣ old standard ‣ scalable vector graphics SVG 2.2+ 3.0+ 4.7+ 9.0+ Mob 10+ / Mini 5 4.0+ Monday, September 12, 11
  • 203. svg ‣ old standard ‣ scalable vector graphics ‣ (some) allows inline <svg> tag SVG 2.2+ 3.0+ 4.7+ 9.0+ Mob 10+ / Mini 5 4.0+ Monday, September 12, 11
  • 204. svg ‣ old standard ‣ scalable vector graphics ‣ (some) allows inline <svg> tag ‣ (some) allows svg as background SVG 2.2+ 3.0+ 4.7+ 9.0+ Mob 10+ / Mini 5 4.0+ Monday, September 12, 11
  • 205. svg ‣ old standard ‣ scalable vector graphics ‣ (some) allows inline <svg> tag ‣ (some) allows svg as background ‣ (some) allows svg as font SVG 2.2+ 3.0+ 4.7+ 9.0+ Mob 10+ / Mini 5 4.0+ Monday, September 12, 11
  • 206. motion sensors DeviceOrientation 4.2+ 3.0+ 4.7+ (basic) 6.0+ (moz) Monday, September 12, 11
  • 207. motion sensors ‣ accelerometer / gyroscope / magnetometer DeviceOrientation 4.2+ 3.0+ 4.7+ (basic) 6.0+ (moz) Monday, September 12, 11
  • 208. motion sensors ‣ accelerometer / gyroscope / magnetometer ‣ onorientationchange DeviceOrientation 4.2+ 3.0+ 4.7+ (basic) 6.0+ (moz) Monday, September 12, 11
  • 209. motion sensors ‣ accelerometer / gyroscope / magnetometer ‣ onorientationchange ‣ window.orientation DeviceOrientation 4.2+ 3.0+ 4.7+ (basic) 6.0+ (moz) Monday, September 12, 11
  • 210. motion sensors ‣ accelerometer / gyroscope / magnetometer ‣ onorientationchange ‣ window.orientation ‣ games, visual effects, pressure detection? DeviceOrientation 4.2+ 3.0+ 4.7+ (basic) 6.0+ (moz) Monday, September 12, 11
  • 211. motion sensors ‣ accelerometer / gyroscope / magnetometer ‣ onorientationchange ‣ window.orientation ‣ games, visual effects, pressure detection? mobilexweb.com/samples/ball.html mobilexweb.com/samples/pressure.html DeviceOrientation 4.2+ 3.0+ 4.7+ (basic) 6.0+ (moz) Monday, September 12, 11
  • 212. new form controls HTML5 2.2+ (b) 5.0+ (adv) 9.0 (basic) 10+ (med) 6.0+ (med) Monday, September 12, 11
  • 213. new form controls ‣ variable support HTML5 2.2+ (b) 5.0+ (adv) 9.0 (basic) 10+ (med) 6.0+ (med) Monday, September 12, 11
  • 214. new form controls ‣ variable support ‣ basic=different virtual keyboard HTML5 2.2+ (b) 5.0+ (adv) 9.0 (basic) 10+ (med) 6.0+ (med) Monday, September 12, 11
  • 215. new form controls ‣ variable support ‣ basic=different virtual keyboard ‣ medium=new date, number, range HTML5 2.2+ (b) 5.0+ (adv) 9.0 (basic) 10+ (med) 6.0+ (med) Monday, September 12, 11
  • 216. new form controls ‣ variable support ‣ basic=different virtual keyboard ‣ medium=new date, number, range ‣ advanced=datalist HTML5 2.2+ (b) 5.0+ (adv) 9.0 (basic) 10+ (med) 6.0+ (med) Monday, September 12, 11
  • 217. new form controls ‣ variable support ‣ basic=different virtual keyboard ‣ medium=new date, number, range ‣ advanced=datalist ‣ (some) allows validation and css3 pseudo- classes HTML5 2.2+ (b) 5.0+ (adv) 9.0 (basic) 10+ (med) 6.0+ (med) Monday, September 12, 11
  • 218. touch events Touch events 3.0+ 2.1+ 6.1+ 6.0+ Monday, September 12, 11
  • 219. touch events ‣ iOS specification Touch events 3.0+ 2.1+ 6.1+ 6.0+ Monday, September 12, 11
  • 220. touch events ‣ iOS specification ‣ some differences between implementations Touch events 3.0+ 2.1+ 6.1+ 6.0+ Monday, September 12, 11
  • 221. touch events ‣ iOS specification ‣ some differences between implementations ‣ (some) multi-touch Touch events 3.0+ 2.1+ 6.1+ 6.0+ Monday, September 12, 11
  • 222. touch events ‣ iOS specification ‣ some differences between implementations ‣ (some) multi-touch ‣ touchstart, touchmove, touchend, touchcancel Touch events 3.0+ 2.1+ 6.1+ 6.0+ Monday, September 12, 11
  • 223. touch events ‣ iOS specification ‣ some differences between implementations ‣ (some) multi-touch ‣ touchstart, touchmove, touchend, touchcancel ‣ (some) touchenter, touchleave Touch events 3.0+ 2.1+ 6.1+ 6.0+ Monday, September 12, 11
  • 224. css3 basic CSS 3 1.0+ 1.0+ 6.0+ 9.0+ 10+ 6.0+ Anna+ Monday, September 12, 11
  • 225. css3 basic ‣ basic new styling CSS 3 1.0+ 1.0+ 6.0+ 9.0+ 10+ 6.0+ Anna+ Monday, September 12, 11
  • 226. css3 basic ‣ basic new styling ‣ rounded borders, opacity CSS 3 1.0+ 1.0+ 6.0+ 9.0+ 10+ 6.0+ Anna+ Monday, September 12, 11
  • 227. css3 basic ‣ basic new styling ‣ rounded borders, opacity ‣ (some) still requires prefix CSS 3 1.0+ 1.0+ 6.0+ 9.0+ 10+ 6.0+ Anna+ Monday, September 12, 11
  • 228. css3 basic ‣ basic new styling ‣ rounded borders, opacity ‣ (some) still requires prefix ‣ -webkit, -o, -moz, -ms CSS 3 1.0+ 1.0+ 6.0+ 9.0+ 10+ 6.0+ Anna+ Monday, September 12, 11
  • 229. css3 transforms CSS 3 2.0+ 2.0+ 6.0+ 9.0+ 11+ 6.0+ Anna+ Monday, September 12, 11
  • 230. css3 transforms ‣ basic 2d transforms CSS 3 2.0+ 2.0+ 6.0+ 9.0+ 11+ 6.0+ Anna+ Monday, September 12, 11
  • 231. css3 transforms ‣ basic 2d transforms ‣ -webkit, -o, -moz, -ms CSS 3 2.0+ 2.0+ 6.0+ 9.0+ 11+ 6.0+ Anna+ Monday, September 12, 11
  • 232. css3 transforms ‣ basic 2d transforms ‣ -webkit, -o, -moz, -ms ‣ rotate, scale, skew, translate CSS 3 2.0+ 2.0+ 6.0+ 9.0+ 11+ 6.0+ Anna+ Monday, September 12, 11
  • 233. css3 transforms ‣ basic 2d transforms ‣ -webkit, -o, -moz, -ms ‣ rotate, scale, skew, translate ‣ (some) matrix CSS 3 2.0+ 2.0+ 6.0+ 9.0+ 11+ 6.0+ Anna+ Monday, September 12, 11
  • 234. css3 transforms ‣ basic 2d transforms ‣ -webkit, -o, -moz, -ms ‣ rotate, scale, skew, translate ‣ (some) matrix ‣ (some) 3d transforms CSS 3 2.0+ 2.0+ 6.0+ 9.0+ 11+ 6.0+ Anna+ Monday, September 12, 11
  • 235. css3 transitions CSS 3 2.0+ 2.0+ 6.0+ 10+ 6.0+ Anna+ Monday, September 12, 11
  • 236. css3 transitions ‣ basic animations between 2 states CSS 3 2.0+ 2.0+ 6.0+ 10+ 6.0+ Anna+ Monday, September 12, 11
  • 237. css3 transitions ‣ basic animations between 2 states ‣ prefix CSS 3 2.0+ 2.0+ 6.0+ 10+ 6.0+ Anna+ Monday, September 12, 11
  • 238. css3 animations CSS 3 2.2+ 2.0+ 6.0+ 6.0+ Anna+ Monday, September 12, 11
  • 239. css3 animations ‣ keyframe animations CSS 3 2.2+ 2.0+ 6.0+ 6.0+ Anna+ Monday, September 12, 11
  • 240. css3 animations ‣ keyframe animations ‣ attribute prefix and keyframe prefix CSS 3 2.2+ 2.0+ 6.0+ 6.0+ Anna+ Monday, September 12, 11
  • 241. css3 animations ‣ keyframe animations ‣ attribute prefix and keyframe prefix ‣ duplication :S CSS 3 2.2+ 2.0+ 6.0+ 6.0+ Anna+ Monday, September 12, 11
  • 242. what is just starting...? Monday, September 12, 11
  • 243. apis starting to appear Monday, September 12, 11
  • 244. apis starting to appear ‣ XMLHttpRequest 2 - Android 3.0 Monday, September 12, 11
  • 245. apis starting to appear ‣ XMLHttpRequest 2 - Android 3.0 ‣ Navigation Timing API - Internet Explorer 9.0 Monday, September 12, 11
  • 246. apis starting to appear ‣ XMLHttpRequest 2 - Android 3.0 ‣ Navigation Timing API - Internet Explorer 9.0 ‣ Notifications API - Firefox 6.0 Monday, September 12, 11
  • 247. apis starting to appear ‣ XMLHttpRequest 2 - Android 3.0 ‣ Navigation Timing API - Internet Explorer 9.0 ‣ Notifications API - Firefox 6.0 ‣ Network Information API - Android 2.2+ Monday, September 12, 11
  • 248. apis starting to appear ‣ XMLHttpRequest 2 - Android 3.0 ‣ Navigation Timing API - Internet Explorer 9.0 ‣ Notifications API - Firefox 6.0 ‣ Network Information API - Android 2.2+ ‣ File API and FileReader API - Android 3.0 Monday, September 12, 11
  • 249. apis starting to appear ‣ XMLHttpRequest 2 - Android 3.0 ‣ Navigation Timing API - Internet Explorer 9.0 ‣ Notifications API - Firefox 6.0 ‣ Network Information API - Android 2.2+ ‣ File API and FileReader API - Android 3.0 ‣ CORS (cross-domain AJAX) - Android 2.2+, iOS 3.2+ Monday, September 12, 11
  • 250. apis starting to appear ‣ XMLHttpRequest 2 - Android 3.0 ‣ Navigation Timing API - Internet Explorer 9.0 ‣ Notifications API - Firefox 6.0 ‣ Network Information API - Android 2.2+ ‣ File API and FileReader API - Android 3.0 ‣ CORS (cross-domain AJAX) - Android 2.2+, iOS 3.2+ ‣ Media Camera API - Android 3.0 Monday, September 12, 11
  • 251. apis starting to appear ‣ XMLHttpRequest 2 - Android 3.0 ‣ Navigation Timing API - Internet Explorer 9.0 ‣ Notifications API - Firefox 6.0 ‣ Network Information API - Android 2.2+ ‣ File API and FileReader API - Android 3.0 ‣ CORS (cross-domain AJAX) - Android 2.2+, iOS 3.2+ ‣ Media Camera API - Android 3.0 ‣ IndexedDB - Firefox 6.0 Monday, September 12, 11
  • 252. and what to expect in the future? Monday, September 12, 11
  • 253. for next year... Monday, September 12, 11
  • 254. for next year... ‣ Augmented Reality on the web Monday, September 12, 11
  • 255. for next year... ‣ Augmented Reality on the web ‣ Camera API Monday, September 12, 11
  • 256. for next year... ‣ Augmented Reality on the web ‣ Camera API ‣ MathML Monday, September 12, 11
  • 257. for next year... ‣ Augmented Reality on the web ‣ Camera API ‣ MathML ‣ Idle detection Monday, September 12, 11
  • 258. for next year... ‣ Augmented Reality on the web ‣ Camera API ‣ MathML ‣ Idle detection ‣ Speech detection Monday, September 12, 11
  • 259. for next year... ‣ Augmented Reality on the web ‣ Camera API ‣ MathML ‣ Idle detection ‣ Speech detection ‣ 3D Drawing API (aka WebGL) Monday, September 12, 11
  • 260. for next year... ‣ Augmented Reality on the web ‣ Camera API ‣ MathML ‣ Idle detection ‣ Speech detection ‣ 3D Drawing API (aka WebGL) ‣ Native integration API Monday, September 12, 11
  • 261. for next year... ‣ Augmented Reality on the web ‣ Camera API ‣ MathML ‣ Idle detection ‣ Speech detection ‣ 3D Drawing API (aka WebGL) ‣ Native integration API ‣ Contacts and Calendar API Monday, September 12, 11
  • 262. for next year... ‣ Augmented Reality on the web ‣ Camera API ‣ MathML ‣ Idle detection ‣ Speech detection ‣ 3D Drawing API (aka WebGL) ‣ Native integration API ‣ Contacts and Calendar API ‣ Messaging API Monday, September 12, 11
  • 263. for next year... ‣ Augmented Reality on the web ‣ Camera API ‣ MathML ‣ Idle detection ‣ Speech detection ‣ 3D Drawing API (aka WebGL) ‣ Native integration API ‣ Contacts and Calendar API ‣ Messaging API ‣ Orientation Lock Monday, September 12, 11
  • 264. for next year... ‣ Augmented Reality on the web ‣ Camera API ‣ MathML ‣ Idle detection ‣ Speech detection ‣ 3D Drawing API (aka WebGL) ‣ Native integration API ‣ Contacts and Calendar API ‣ Messaging API ‣ Orientation Lock ‣ Debugging tools Monday, September 12, 11
  • 265. working on these APIs... Monday, September 12, 11
  • 266. working on these APIs... ‣ W3C Device APIs Working Group Monday, September 12, 11
  • 267. working on these APIs... W3C Device APIs Working Group ‣ http://www.w3.org/2009/dap/ Monday, September 12, 11
  • 268. working on these APIs... W3C Device APIs Working Group ‣ http://www.w3.org/2009/dap/ ‣ Mozilla WebAPI effort (3-6 months) Monday, September 12, 11
  • 269. working on these APIs... W3C Device APIs Working Group ‣ http://www.w3.org/2009/dap/ Mozilla WebAPI effort (3-6 months) ‣ https://wiki.mozilla.org/WebAPI Monday, September 12, 11
  • 270. working on these APIs... W3C Device APIs Working Group ‣ http://www.w3.org/2009/dap/ Mozilla WebAPI effort (3-6 months) ‣ https://wiki.mozilla.org/WebAPI ‣ WAC Monday, September 12, 11
  • 271. working on these APIs... W3C Device APIs Working Group ‣ http://www.w3.org/2009/dap/ Mozilla WebAPI effort (3-6 months) ‣ https://wiki.mozilla.org/WebAPI WAC ‣ http://www.wacapps.net/ Monday, September 12, 11
  • 272. can i use apis today? Monday, September 12, 11
  • 273. can i use apis today? ‣ PhoneGap Monday, September 12, 11
  • 274. can i use apis today? ‣ PhoneGap http://www.phonegap.com Monday, September 12, 11
  • 275. can i use apis today? ‣ PhoneGap http://www.phonegap.com ‣ BlackBerry WebWorks Monday, September 12, 11
  • 276. can i use apis today? ‣ PhoneGap http://www.phonegap.com ‣ BlackBerry WebWorks http://us.blackberry.com/developers/browserdev/ Monday, September 12, 11
  • 277. can i use apis today? ‣ PhoneGap http://www.phonegap.com ‣ BlackBerry WebWorks http://us.blackberry.com/developers/browserdev/ ‣ Nokia webapps Monday, September 12, 11
  • 278. can i use apis today? ‣ PhoneGap http://www.phonegap.com ‣ BlackBerry WebWorks http://us.blackberry.com/developers/browserdev/ ‣ Nokia webapps http://www.developer.nokia.com/Develop/Web/ Monday, September 12, 11
  • 279. some last advices Monday, September 12, 11
  • 281. performance, performance Monday, September 12, 11
  • 283. don’t be fanatic photo by Kurt Christensen (flickr) Monday, September 12, 11
  • 285. best experience for every context Monday, September 12, 11
  • 286. you can reach a good thank you! experience firt.mobi firtman@gmail.com twitter: @firt www.mobilexweb.com Pictures)from)freedigitalphotos.net) Monday, September 12, 11