jQuery Mobile
33 likes51,693 views
The document appears to be notes from a presentation on mobile web development. It discusses various topics like the differences between native and web applications, challenges with mobile web like multiple platforms and browsers, and definitions around terms like mobile web and HTML5. Maximiliano Firtman is identified as the presenter and he provides opinions and insights on issues in developing for the mobile web.
jQuery Mobile
- 1. max firtman @firt firt.mobi Zurich, Oct 21 2011 Tuesday, November 1, 11
- 3. http://akosma.com http://invisible.ch @akosma @jcfischer Tuesday, November 1, 11
- 4. Learn more? Tuesday, November 1, 11
- 6. m b er ove 17 .N 15 .- http://mobile-training.ch Tuesday, 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.ch Tuesday, November 1, 11
- 8. who am I? mobile+web developer mobilexweb.com blog @firt Tuesday, November 1, 11
- 10. where? buenos aires ~ argentina Tuesday, November 1, 11
- 11. where? buenos aires ~ argentina patagonia football meat & wine tango Tuesday, November 1, 11
- 12. books Image from my house Tuesday, November 1, 11
- 13. Tuesday, November 1, 11
- 14. Using the Latest Today Mobile HTML5 coming soon... Estelle Weyl & Maximiliano Firtman also by @estellevw Tuesday, November 1, 11
- 15. Tuesday, November 1, 11
- 16. you have a question for me Tuesday, November 1, 11
- 17. the answer is no Tuesday, 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 cars Tuesday, November 1, 11
- 22. mobile is more about users Tuesday, November 1, 11
- 23. mobile Tuesday, November 1, 11
- 24. mobile ‣ absolutely personal Tuesday, November 1, 11
- 25. mobile ‣ absolutely personal ‣ +5 billions Tuesday, November 1, 11
- 26. mobile ‣ absolutely personal ‣ +5 billions ‣ will be the 1st browsing device... soon Tuesday, November 1, 11
- 27. mobile ‣ absolutely personal ‣ +5 billions ‣ will be the 1st browsing device... soon ‣ make us focus Tuesday, 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 Islands Tuesday, November 1, 11
- 33. lots of questions Photo by wayneandwax (Flickr) Tuesday, November 1, 11
- 34. we need to learn lots of questions Tuesday, November 1, 11
- 35. lots of platforms Tuesday, November 1, 11
- 36. mobile web appears Tuesday, November 1, 11
- 37. native vs web Tuesday, November 1, 11
- 38. WAIT! Tuesday, November 1, 11
- 39. Are you sure? Tuesday, November 1, 11
- 40. native code vs javascript Tuesday, November 1, 11
- 41. browser vs installed apps & stores Tuesday, November 1, 11
- 42. lack of definitions Tuesday, November 1, 11
- 43. when we say mobile web Tuesday, November 1, 11
- 44. when we say mobile web from a developer’s perspective it’s using HTML, CSS and JavaScript to develop mobile apps Tuesday, 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 producers Tuesday, November 1, 11
- 48. Testing & debugging 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. html5 Tuesday, 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 standards Tuesday, November 1, 11
- 57. html5 ‣ w3c standards (all in draft) ‣ some are other w3c standards ‣ de-facto standards Tuesday, November 1, 11
- 58. html5 ‣ w3c standards (all in draft) ‣ some are other w3c standards ‣ de-facto standards ‣ w3c ex-standards Tuesday, 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 web Tuesday, November 1, 11
- 60. mobile browsers Tuesday, November 1, 11
- 61. mobile browsers ‣ too many Tuesday, November 1, 11
- 62. mobile browsers ‣ too many ‣ (some) too limited Tuesday, November 1, 11
- 63. mobile browsers ‣ too many ‣ (some) too limited ‣ (some) too innovative Tuesday, November 1, 11
- 64. mobile browsers ‣ too many ‣ (some) too limited ‣ (some) too innovative ‣ (some) proxy based Tuesday, November 1, 11
- 65. mobile browsers ‣ too many ‣ (some) too limited ‣ (some) too innovative ‣ (some) proxy based ‣ (most) without documentation Tuesday, November 1, 11
- 66. mobile browsers ‣ too many ‣ (some) too limited ‣ (some) too innovative ‣ (some) proxy based ‣ (most) without documentation ‣ (most) without a name Tuesday, 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 tools Tuesday, November 1, 11
- 68. mobile browsers Tuesday, November 1, 11
- 69. mobile browsers ‣ (some) focus-based Tuesday, November 1, 11
- 70. mobile browsers ‣ (some) focus-based ‣ (some) cursor-based Tuesday, November 1, 11
- 71. mobile browsers ‣ (some) focus-based ‣ (some) cursor-based ‣ (some) touch-based Tuesday, November 1, 11
- 72. mobile browsers ‣ (some) focus-based ‣ (some) cursor-based ‣ (some) touch-based ‣ (some) multitouch-based Tuesday, November 1, 11
- 73. mobile browsers ‣ (some) focus-based ‣ (some) cursor-based ‣ (some) touch-based ‣ (some) multitouch-based ‣ (some) with zooming support Tuesday, 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 devs Tuesday, November 1, 11
- 75. jQuery mobile Tuesday, 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 framework Tuesday, November 1, 11
- 80. jQuery mobile is not... ‣ alternative mobile jQuery framework ‣ SDK for native/hybrid compilation Tuesday, November 1, 11
- 81. jQuery mobile is not... ‣ alternative mobile jQuery framework ‣ SDK for native/hybrid compilation ‣ a framework for doing all using JS Tuesday, 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 app Tuesday, 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 tablets Tuesday, 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 browser Tuesday, November 1, 11
- 88. a webapp can be... ‣ a website or service based on the browser ‣ a full-screen (chromeless) app on the browser Tuesday, 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 != boolean Tuesday, November 1, 11
- 96. features ‣ non-intrusive semantic html5 code Tuesday, November 1, 11
- 97. features ‣ non-intrusive semantic html5 code ‣ open sourced Tuesday, November 1, 11
- 98. features ‣ non-intrusive semantic html5 code ‣ open sourced ‣ lightweight Tuesday, November 1, 11
- 99. features ‣ non-intrusive semantic html5 code ‣ open sourced ‣ lightweight ‣ multiplatform with progressive enhancement Tuesday, November 1, 11
- 100. features ‣ non-intrusive semantic html5 code ‣ open sourced ‣ lightweight ‣ multiplatform with progressive enhancement ‣ accessibility support Tuesday, November 1, 11
- 101. features ‣ non-intrusive semantic html5 code ‣ open sourced ‣ lightweight ‣ multiplatform with progressive enhancement ‣ accessibility support ‣ customizable Tuesday, November 1, 11
- 102. features ‣ non-intrusive semantic html5 code ‣ open sourced ‣ lightweight ‣ multiplatform with progressive enhancement ‣ accessibility support ‣ customizable ‣ includes javascript api Tuesday, November 1, 11
- 103. you don’t need to know Tuesday, November 1, 11
- 104. you don’t need to know ‣ html5 Tuesday, November 1, 11
- 105. you don’t need to know ‣ html5 ‣ css 3 Tuesday, November 1, 11
- 106. you don’t need to know ‣ html5 ‣ css 3 ‣ javascript Tuesday, November 1, 11
- 107. you don’t need to know ‣ html5 ‣ css 3 ‣ javascript ‣ jQuery Tuesday, 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 editor Tuesday, November 1, 11
- 114. what do we need? ‣ a text editor ‣ a browser Tuesday, 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/emulators Tuesday, November 1, 11
- 119. warning! Tuesday, November 1, 11
- 120. still not stable Tuesday, November 1, 11
- 121. but near... Tuesday, November 1, 11
- 122. Tuesday, November 1, 11
- 123. compatibility rc2 Tuesday, 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 framework Tuesday, November 1, 11
- 127. the framework today Tuesday, November 1, 11
- 128. the framework today ‣ a javascript file Tuesday, November 1, 11
- 129. the framework today ‣ a javascript file ‣ a css file and a group of images Tuesday, November 1, 11
- 130. the framework today ‣ a javascript file ‣ a css file and a group of images ‣ self-hosted Tuesday, November 1, 11
- 131. the framework today ‣ a javascript file ‣ a css file and a group of images ‣ self-hosted ‣ CDN - “stable” versions Tuesday, 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 versions Tuesday, November 1, 11
- 133. the framework tomorrow Tuesday, November 1, 11
- 134. the framework tomorrow ‣ a custom javascript file Tuesday, November 1, 11
- 135. the framework tomorrow ‣ a custom javascript file ‣ a base css file Tuesday, November 1, 11
- 136. the framework tomorrow ‣ a custom javascript file ‣ a base css file ‣ a theme css file and a group of images Tuesday, 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. features Tuesday, November 1, 11
- 144. features ‣ fixed toolbars Tuesday, November 1, 11
- 145. features ‣ fixed toolbars ‣ list, content and form rich controls Tuesday, November 1, 11
- 146. features ‣ fixed toolbars ‣ list, content and form rich controls ‣ theming and color swatches Tuesday, November 1, 11
- 147. features ‣ fixed toolbars ‣ list, content and form rich controls ‣ theming and color swatches ‣ transitions Tuesday, November 1, 11
- 148. features ‣ fixed toolbars ‣ list, content and form rich controls ‣ theming and color swatches ‣ transitions ‣ ajax Tuesday, November 1, 11
- 149. Icon Description value Info (i) info Home icon home Search icon search Tuesday, November 1, 11
- 150. Tuesday, November 1, 11
- 151. advanced topics Tuesday, November 1, 11
- 152. advanced topics ‣ using javascript for loading content Tuesday, November 1, 11
- 153. advanced topics ‣ using javascript for loading content ‣ theming and customization Tuesday, November 1, 11
- 154. advanced topics ‣ using javascript for loading content ‣ theming and customization ‣ styling for non-compatible devices Tuesday, November 1, 11
- 155. advanced topics ‣ using javascript for loading content ‣ theming and customization ‣ styling for non-compatible devices ‣ javascript api & events Tuesday, 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