• Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • Here are few jquery mobile apps http://www.amitpatil.me/todo-app-for-iphone-ipad-using-jquery-mobile-and-web-storage/
    Are you sure you want to
    Your message goes here
  • Good
    http://www.slideshare.net/SojoSolutions/socialcam
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
33,021
On Slideshare
0
From Embeds
0
Number of Embeds
3

Actions

Shares
Downloads
669
Comments
2
Likes
28

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. max firtman @firt firt.mobi Zurich, Oct 21 2011Tuesday, November 1, 11
  • 2. DankeTuesday, November 1, 11
  • 3. http://akosma.com http://invisible.ch @akosma @jcfischerTuesday, November 1, 11
  • 4. Learn more?Tuesday, November 1, 11
  • 5. http://mobile-training.chTuesday, November 1, 11
  • 6. m b er ove 17 .N 15 .- http://mobile-training.chTuesday, November 1, 11
  • 7. m b er ove 17 .N 15 .- /op en r/ch d“ o B ir 1400 „ Early HF C http://mobile-training.chTuesday, November 1, 11
  • 8. who am I? mobile+web developer mobilexweb.com blog @firtTuesday, November 1, 11
  • 9. where?Tuesday, November 1, 11
  • 10. where? buenos aires ~ argentinaTuesday, November 1, 11
  • 11. where? buenos aires ~ argentina patagonia football meat & wine tangoTuesday, November 1, 11
  • 12. books Image from my houseTuesday, November 1, 11
  • 13. Tuesday, November 1, 11
  • 14. Using the Latest Today Mobile HTML5 coming soon... Estelle Weyl & Maximiliano Firtman also by @estellevwTuesday, November 1, 11
  • 15. Tuesday, November 1, 11
  • 16. you have a question for meTuesday, November 1, 11
  • 17. the answer is noTuesday, November 1, 11
  • 18. why mobile?Tuesday, November 1, 11
  • 19. 2015 is coming...Tuesday, November 1, 11
  • 20. Tuesday, November 1, 11
  • 21. mobile devices are our flying carsTuesday, November 1, 11
  • 22. mobile is more about usersTuesday, November 1, 11
  • 23. mobileTuesday, November 1, 11
  • 24. mobile ‣ absolutely personalTuesday, November 1, 11
  • 25. mobile ‣ absolutely personal ‣ +5 billionsTuesday, November 1, 11
  • 26. mobile ‣ absolutely personal ‣ +5 billions ‣ will be the 1st browsing device... soonTuesday, November 1, 11
  • 27. mobile ‣ absolutely personal ‣ +5 billions ‣ will be the 1st browsing device... soon ‣ make us focusTuesday, November 1, 11
  • 28. mobile ‣ absolutely personal ‣ +5 billions ‣ will be the 1st browsing device... soon ‣ make us focus ‣ read our context...Tuesday, November 1, 11
  • 29. mobile ‣ absolutely personal ‣ +5 billions ‣ will be the 1st browsing device... soon ‣ make us focus ‣ read our context... ‣ ... always...Tuesday, November 1, 11
  • 30. mobile ‣ absolutely personal ‣ +5 billions ‣ will be the 1st browsing device... soon ‣ make us focus ‣ read our context... ‣ ... always... ‣ ... and everywhere.Tuesday, November 1, 11
  • 31. then... what is the problem?Tuesday, November 1, 11
  • 32. mobile is a minefield Photo by World of Good (Flickr) Malvinas / Falklands IslandsTuesday, November 1, 11
  • 33. lots of questions Photo by wayneandwax (Flickr)Tuesday, November 1, 11
  • 34. we need to learn lots of questionsTuesday, November 1, 11
  • 35. lots of platformsTuesday, November 1, 11
  • 36. mobile web appearsTuesday, November 1, 11
  • 37. native vs webTuesday, November 1, 11
  • 38. WAIT!Tuesday, November 1, 11
  • 39. Are you sure?Tuesday, November 1, 11
  • 40. native code vs javascriptTuesday, November 1, 11
  • 41. browser vs installed apps & storesTuesday, November 1, 11
  • 42. lack of definitionsTuesday, November 1, 11
  • 43. when we say mobile webTuesday, November 1, 11
  • 44. when we say mobile web from a developer’s perspective it’s using HTML, CSS and JavaScript to develop mobile appsTuesday, November 1, 11
  • 45. when we say mobile web from a developer’s perspective it’s using HTML, CSS and JavaScript to develop mobile apps (browser or installed)Tuesday, November 1, 11
  • 46. what are the problems with mobile web?Tuesday, November 1, 11
  • 47. we are second class producersTuesday, November 1, 11
  • 48. Testing & debuggingTuesday, November 1, 11
  • 49. Standards!Tuesday, November 1, 11
  • 50. Photo by Ben Millett (Flickr)Tuesday, November 1, 11
  • 51. Tuesday, November 1, 11
  • 52. Are you sure? Photo by Ricky David (Flickr)Tuesday, November 1, 11
  • 53. What is ?Tuesday, November 1, 11
  • 54. html5Tuesday, November 1, 11
  • 55. html5 ‣ w3c standards (all in draft)Tuesday, November 1, 11
  • 56. html5 ‣ w3c standards (all in draft) ‣ some are other w3c standardsTuesday, November 1, 11
  • 57. html5 ‣ w3c standards (all in draft) ‣ some are other w3c standards ‣ de-facto standardsTuesday, November 1, 11
  • 58. html5 ‣ w3c standards (all in draft) ‣ some are other w3c standards ‣ de-facto standards ‣ w3c ex-standardsTuesday, November 1, 11
  • 59. html5 ‣ w3c standards (all in draft) ‣ some are other w3c standards ‣ de-facto standards ‣ w3c ex-standards ‣ everything “new” on the webTuesday, November 1, 11
  • 60. mobile browsersTuesday, November 1, 11
  • 61. mobile browsers ‣ too manyTuesday, November 1, 11
  • 62. mobile browsers ‣ too many ‣ (some) too limitedTuesday, November 1, 11
  • 63. mobile browsers ‣ too many ‣ (some) too limited ‣ (some) too innovativeTuesday, November 1, 11
  • 64. mobile browsers ‣ too many ‣ (some) too limited ‣ (some) too innovative ‣ (some) proxy basedTuesday, November 1, 11
  • 65. mobile browsers ‣ too many ‣ (some) too limited ‣ (some) too innovative ‣ (some) proxy based ‣ (most) without documentationTuesday, November 1, 11
  • 66. mobile browsers ‣ too many ‣ (some) too limited ‣ (some) too innovative ‣ (some) proxy based ‣ (most) without documentation ‣ (most) without a nameTuesday, November 1, 11
  • 67. mobile browsers ‣ too many ‣ (some) too limited ‣ (some) too innovative ‣ (some) proxy based ‣ (most) without documentation ‣ (most) without a name ‣ (most) without debugging toolsTuesday, November 1, 11
  • 68. mobile browsersTuesday, November 1, 11
  • 69. mobile browsers ‣ (some) focus-basedTuesday, November 1, 11
  • 70. mobile browsers ‣ (some) focus-based ‣ (some) cursor-basedTuesday, November 1, 11
  • 71. mobile browsers ‣ (some) focus-based ‣ (some) cursor-based ‣ (some) touch-basedTuesday, November 1, 11
  • 72. mobile browsers ‣ (some) focus-based ‣ (some) cursor-based ‣ (some) touch-based ‣ (some) multitouch-basedTuesday, November 1, 11
  • 73. mobile browsers ‣ (some) focus-based ‣ (some) cursor-based ‣ (some) touch-based ‣ (some) multitouch-based ‣ (some) with zooming supportTuesday, November 1, 11
  • 74. mobile browsers ‣ (some) focus-based ‣ (some) cursor-based ‣ (some) touch-based ‣ (some) multitouch-based ‣ (some) with zooming support ‣ (most) unknown for web devsTuesday, November 1, 11
  • 75. jQuery mobileTuesday, November 1, 11
  • 76. what is ... ?Tuesday, November 1, 11
  • 77. what is not ...?Tuesday, November 1, 11
  • 78. jQuery mobile is not...Tuesday, November 1, 11
  • 79. jQuery mobile is not... ‣ alternative mobile jQuery frameworkTuesday, November 1, 11
  • 80. jQuery mobile is not... ‣ alternative mobile jQuery framework ‣ SDK for native/hybrid compilationTuesday, November 1, 11
  • 81. jQuery mobile is not... ‣ alternative mobile jQuery framework ‣ SDK for native/hybrid compilation ‣ a framework for doing all using JSTuesday, November 1, 11
  • 82. jQuery mobile is not... ‣ alternative mobile jQuery framework ‣ SDK for native/hybrid compilation ‣ a framework for doing all using JS ‣ the solution for every appTuesday, November 1, 11
  • 83. jQuery mobile is...Tuesday, November 1, 11
  • 84. jQuery mobile is... a cross-platform UI framework for creating webapps for touch-enabled smartphones and tabletsTuesday, November 1, 11
  • 85. webapp?Tuesday, November 1, 11
  • 86. a webapp can be...Tuesday, November 1, 11
  • 87. a webapp can be... ‣ a website or service based on the browserTuesday, November 1, 11
  • 88. a webapp can be... ‣ a website or service based on the browser ‣ a full-screen (chromeless) app on the browserTuesday, November 1, 11
  • 89. a webapp can be... ‣ a website or service based on the browser ‣ a full-screen (chromeless) app on the browser ‣ a hybrid -native app through stores-Tuesday, November 1, 11
  • 90. why jQuery mobile?Tuesday, November 1, 11
  • 91. Tuesday, November 1, 11
  • 92. Tuesday, November 1, 11
  • 93. typeof html5 != booleanTuesday, November 1, 11
  • 94. featuresTuesday, November 1, 11
  • 95. featuresTuesday, November 1, 11
  • 96. features ‣ non-intrusive semantic html5 codeTuesday, November 1, 11
  • 97. features ‣ non-intrusive semantic html5 code ‣ open sourcedTuesday, November 1, 11
  • 98. features ‣ non-intrusive semantic html5 code ‣ open sourced ‣ lightweightTuesday, November 1, 11
  • 99. features ‣ non-intrusive semantic html5 code ‣ open sourced ‣ lightweight ‣ multiplatform with progressive enhancementTuesday, November 1, 11
  • 100. features ‣ non-intrusive semantic html5 code ‣ open sourced ‣ lightweight ‣ multiplatform with progressive enhancement ‣ accessibility supportTuesday, November 1, 11
  • 101. features ‣ non-intrusive semantic html5 code ‣ open sourced ‣ lightweight ‣ multiplatform with progressive enhancement ‣ accessibility support ‣ customizableTuesday, November 1, 11
  • 102. features ‣ non-intrusive semantic html5 code ‣ open sourced ‣ lightweight ‣ multiplatform with progressive enhancement ‣ accessibility support ‣ customizable ‣ includes javascript apiTuesday, November 1, 11
  • 103. you don’t need to knowTuesday, November 1, 11
  • 104. you don’t need to know ‣ html5Tuesday, November 1, 11
  • 105. you don’t need to know ‣ html5 ‣ css 3Tuesday, November 1, 11
  • 106. you don’t need to know ‣ html5 ‣ css 3 ‣ javascriptTuesday, November 1, 11
  • 107. you don’t need to know ‣ html5 ‣ css 3 ‣ javascript ‣ jQueryTuesday, November 1, 11
  • 108. you don’t need to know ‣ html5 ‣ css 3 ‣ javascript ‣ jQuery but... you should :)Tuesday, November 1, 11
  • 109. Tuesday, November 1, 11
  • 110. Tuesday, November 1, 11
  • 111. what do we need?Tuesday, November 1, 11
  • 112. what do we need?Tuesday, November 1, 11
  • 113. what do we need? ‣ a text editorTuesday, November 1, 11
  • 114. what do we need? ‣ a text editor ‣ a browserTuesday, November 1, 11
  • 115. what do we need? ‣ a text editor ‣ a browser ‣ and the framework?Tuesday, November 1, 11
  • 116. what do we need? ‣ a text editor ‣ a browser ‣ and the framework? ‣ and hybrid compilers?Tuesday, November 1, 11
  • 117. what do we need? ‣ a text editor ‣ a browser ‣ and the framework? ‣ and hybrid compilers? ‣ and emulators and simulators?Tuesday, November 1, 11
  • 118. what do we need? ‣ a text editor ‣ a browser and the framework? ‣ ‣ and hybrid compilers? ‣ and emulators and simulators? www.mobilexweb.com/emulatorsTuesday, November 1, 11
  • 119. warning!Tuesday, November 1, 11
  • 120. still not stableTuesday, November 1, 11
  • 121. but near...Tuesday, November 1, 11
  • 122. Tuesday, November 1, 11
  • 123. compatibility rc2Tuesday, November 1, 11
  • 124. compatibilityTuesday, November 1, 11
  • 125. compatibility ‣ iOS ‣ Android ‣ BlackBerry >= 5.0 ‣ Symbian touch ‣ HP webOS ‣ Windows Phone ‣ Opera Mini, Opera Mobile, Firefox ‣ Bada, Meego, Kindle 3+, ... ‣ Others?Tuesday, November 1, 11
  • 126. the frameworkTuesday, November 1, 11
  • 127. the framework todayTuesday, November 1, 11
  • 128. the framework today ‣ a javascript fileTuesday, November 1, 11
  • 129. the framework today ‣ a javascript file ‣ a css file and a group of imagesTuesday, November 1, 11
  • 130. the framework today ‣ a javascript file ‣ a css file and a group of images ‣ self-hostedTuesday, November 1, 11
  • 131. the framework today ‣ a javascript file ‣ a css file and a group of images ‣ self-hosted ‣ CDN - “stable” versionsTuesday, November 1, 11
  • 132. the framework today ‣ a javascript file ‣ a css file and a group of images ‣ self-hosted ‣ CDN - “stable” versions ‣ CDN - latest versionsTuesday, November 1, 11
  • 133. the framework tomorrowTuesday, November 1, 11
  • 134. the framework tomorrow ‣ a custom javascript fileTuesday, November 1, 11
  • 135. the framework tomorrow ‣ a custom javascript file ‣ a base css fileTuesday, November 1, 11
  • 136. the framework tomorrow ‣ a custom javascript file ‣ a base css file ‣ a theme css file and a group of imagesTuesday, November 1, 11
  • 137. Tuesday, November 1, 11
  • 138. Tuesday, November 1, 11
  • 139. <div data-role="page" id="page1"> <div data-role="header"> <h1>Header</h1> </div> <div data-role="content"> <a href="#page2" data-role="button">Go to page 2</a> </div> <div data-role="footer"> <h4>Footer</h4> </div> </div>Tuesday, November 1, 11
  • 140. <div data-role="page" id="page1"> <div data-role="header"> <h1>Header</h1> </div> <div data-role="content"> <a href="#page2" data-role="button">Go to page 2</a> </div> <div data-role="footer"> <h4>Footer</h4> </div> </div>Tuesday, November 1, 11
  • 141. <div data-role="content"> <ul data-role="listview"> <li>iPhone <li>Android <li>BlackBerry <li>Symbian <li>webOS <li>MeeGo <li>Bada </ul> </div>Tuesday, November 1, 11
  • 142. <div data-role="content"> <ul data-role="listview"> <li>iPhone <li>Android <li>BlackBerry <li>Symbian <li>webOS <li>MeeGo <li>Bada </ul> </div>Tuesday, November 1, 11
  • 143. featuresTuesday, November 1, 11
  • 144. features ‣ fixed toolbarsTuesday, November 1, 11
  • 145. features ‣ fixed toolbars ‣ list, content and form rich controlsTuesday, November 1, 11
  • 146. features ‣ fixed toolbars ‣ list, content and form rich controls ‣ theming and color swatchesTuesday, November 1, 11
  • 147. features ‣ fixed toolbars ‣ list, content and form rich controls ‣ theming and color swatches ‣ transitionsTuesday, November 1, 11
  • 148. features ‣ fixed toolbars ‣ list, content and form rich controls ‣ theming and color swatches ‣ transitions ‣ ajaxTuesday, November 1, 11
  • 149. Icon Description value Info (i) info Home icon home Search icon searchTuesday, November 1, 11
  • 150. Tuesday, November 1, 11
  • 151. advanced topicsTuesday, November 1, 11
  • 152. advanced topics ‣ using javascript for loading contentTuesday, November 1, 11
  • 153. advanced topics ‣ using javascript for loading content ‣ theming and customizationTuesday, November 1, 11
  • 154. advanced topics ‣ using javascript for loading content ‣ theming and customization ‣ styling for non-compatible devicesTuesday, November 1, 11
  • 155. advanced topics ‣ using javascript for loading content ‣ theming and customization ‣ styling for non-compatible devices ‣ javascript api & eventsTuesday, November 1, 11
  • 156. advanced topics ‣ using javascript for loading content ‣ theming and customization ‣ styling for non-compatible devices ‣ javascript api & events ‣ html5 (geolocation, offline storage, offline access, accelerometer)Tuesday, November 1, 11
  • 157. you can reach a good thank you! experience firt.mobi twitter: @firt mobilexweb.com https://www.ch-open.ch/auswertung/ Pictures)from)freedigitalphotos.net)Tuesday, November 1, 11