Mobile Apps Cross Platform Mobile Monday Düsseldorf 2009

1,784 views

Published on

A quick introduction on mobile apps using HTML, CSS; JavaScript - W3C Widgets, Phonegap, etc.

Published in: Technology, Business
0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
1,784
On SlideShare
0
From Embeds
0
Number of Embeds
24
Actions
Shares
0
Downloads
86
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Mobile Apps Cross Platform Mobile Monday Düsseldorf 2009

  1. 1. Mobile Apps Cross Platform enabling LBS Using HTML, CSS, JavaScript Wolfram Kriesing, uxebu @wolframkriesing
  2. 2. JavaScript FrontEnd AJAX Usability UserExperience Browser CSS djang dojo mobile Web2. widgets OpenSourc Wolfram Kriesing, uxebu @wolframkriesing
  3. 3. Stores http://distimo.com/uploads/reports/mobile%20app%20store%20overview.pdf Wolfram Kriesing, uxebu @wolframkriesing
  4. 4. Native Apps • iPhone Objective-C Wolfram Kriesing, uxebu @wolframkriesing
  5. 5. Native Apps • iPhone Objective-C • Android, Blackberry Java Wolfram Kriesing, uxebu @wolframkriesing
  6. 6. Native Apps • iPhone Objective-C • Android, Blackberry Java • Nokia Symbian C Wolfram Kriesing, uxebu @wolframkriesing
  7. 7. Native Apps • iPhone Objective-C • Android, Blackberry Java • Nokia Symbian C • Sony Ericsson Java Wolfram Kriesing, uxebu @wolframkriesing
  8. 8. Native Apps • iPhone Objective-C • Android, Blackberry Java • Nokia Symbian C • Sony Ericsson Java • Window Mobile .NET Wolfram Kriesing, uxebu @wolframkriesing
  9. 9. Native Apps • iPhone Objective-C • Android, Blackberry Java • Nokia Symbian C • Sony Ericsson Java • Window Mobile .NET Cross Platform Expensive and OUCH anyway Wolfram Kriesing, uxebu @wolframkriesing
  10. 10. Types of Mobile "Apps" Wolfram Kriesing, uxebu @wolframkriesing
  11. 11. Types of Mobile • Preinstalled Wolfram Kriesing, uxebu @wolframkriesing
  12. 12. Types of Mobile • Preinstalled • Native App (from "some" app store) Wolfram Kriesing, uxebu @wolframkriesing
  13. 13. Types of Mobile • Preinstalled • Native App (from "some" app store) • Website limited access to phone resources Wolfram Kriesing, uxebu @wolframkriesing
  14. 14. Types of Mobile • Preinstalled • Native App (from "some" app store) • Website limited access to phone resources • W3C Widget access to what the widget runtime provides Wolfram Kriesing, uxebu @wolframkriesing
  15. 15. Types of Mobile • Preinstalled • Native App (from "some" app store) • Website limited access to phone resources • W3C Widget access to what the widget runtime provides • W3C Widget wrapped as native app depends on it's runtime Wolfram Kriesing, uxebu @wolframkriesing
  16. 16. Wolfram Kriesing, uxebu @wolframkriesing
  17. 17. Small apps. Very focused. Many platforms. Wolfram Kriesing, uxebu @wolframkriesing
  18. 18. Mobile Moment Wolfram Kriesing, uxebu @wolframkriesing
  19. 19. HTML CSS JavaScript Wolfram Kriesing, uxebu @wolframkriesing
  20. 20. p le s im HTML CSS JavaScript Wolfram Kriesing, uxebu @wolframkriesing
  21. 21. we ll- p le kn s im ow n HTML CSS JavaScript Wolfram Kriesing, uxebu @wolframkriesing
  22. 22. we ll- p le kn s im ow n HTML CSS JavaScript develop fas t to Wolfram Kriesing, uxebu @wolframkriesing
  23. 23. we ll- p le kn s im ow n HTML CSS JavaScript eas y to develop dev fas t to elop Wolfram Kriesing, uxebu @wolframkriesing
  24. 24. we ll- p le kn s im ow n st HTML te ea sy to CSS JavaScript eas y to develop dev fas t to elop Wolfram Kriesing, uxebu @wolframkriesing
  25. 25. we ll- p le kn s im ow n st HTML te simp ea sy to CSS le te xt JavaScript eas y to develop dev fas t to elop Wolfram Kriesing, uxebu @wolframkriesing
  26. 26. Website as "App" Wolfram Kriesing, uxebu @wolframkriesing
  27. 27. Website as "App" • Native look ok Wolfram Kriesing, uxebu @wolframkriesing
  28. 28. Website as "App" • Native look ok • Well-known technologies (HTML, CSS, JavaScript) super Wolfram Kriesing, uxebu @wolframkriesing
  29. 29. Website as "App" • Native look ok • Well-known technologies (HTML, CSS, JavaScript) super • Access native functionality e.g.: position, contacts, sensors, ... no Wolfram Kriesing, uxebu @wolframkriesing
  30. 30. Website as "App" • Native look ok • Well-known technologies (HTML, CSS, JavaScript) super • Access native functionality e.g.: position, contacts, sensors, ... no • Offline not really Wolfram Kriesing, uxebu @wolframkriesing
  31. 31. W3C Widgets http://www.quirksmode.org/blog/archives/2009/04/introduction_to.html • Native look ok • Well-known technologies (HTML, CSS, JavaScript) super • Access native functionality e.g.: position, contacts, sensors, ... no yes • Offline not really really Wolfram Kriesing, uxebu @wolframkriesing
  32. 32. What is a W3C Wolfram Kriesing, uxebu @wolframkriesing
  33. 33. What is a W3C • Native app on the phone Wolfram Kriesing, uxebu @wolframkriesing
  34. 34. What is a W3C • Native app on the phone • Not a website! Wolfram Kriesing, uxebu @wolframkriesing
  35. 35. What is a W3C • Native app on the phone • Not a website! • Can do AJAX, SVG, CSS Transitions, etc. Wolfram Kriesing, uxebu @wolframkriesing
  36. 36. What is a W3C • Native app on the phone • Not a website! • Can do AJAX, SVG, CSS Transitions, etc. • Has it's own runtime (mostly) Wolfram Kriesing, uxebu @wolframkriesing
  37. 37. What is a W3C Wolfram Kriesing, uxebu @wolframkriesing
  38. 38. What is a W3C Wolfram Kriesing, uxebu @wolframkriesing
  39. 39. What is a W3C • HTML • CSS • JavaScript • config.xml • zip it • rename to *.wgt Wolfram Kriesing, uxebu @wolframkriesing
  40. 40. Almost for free Wolfram Kriesing, uxebu @wolframkriesing
  41. 41. Almost for free • Facebook widget Wolfram Kriesing, uxebu @wolframkriesing
  42. 42. Almost for free • Facebook widget • Dashboard widget Wolfram Kriesing, uxebu @wolframkriesing
  43. 43. Almost for free • Facebook widget • Dashboard widget • Website widget Wolfram Kriesing, uxebu @wolframkriesing
  44. 44. Almost for free • Facebook widget • Dashboard widget • Website widget • TV Widget Wolfram Kriesing, uxebu @wolframkriesing
  45. 45. Almost for free • Facebook widget • Dashboard widget • Website widget • TV Widget • ... Wolfram Kriesing, uxebu @wolframkriesing
  46. 46. Almost for free • Facebook widget • Dashboard widget • Website widget • TV Widget • ... Wolfram Kriesing, uxebu @wolframkriesing
  47. 47. Almost for free • Facebook widget • Dashboard widget • Website widget • TV Widget • ... Wolfram Kriesing, uxebu @wolframkriesing
  48. 48. Almost for free • Facebook widget • Dashboard widget • Website widget • TV Widget • ... Wolfram Kriesing, uxebu @wolframkriesing
  49. 49. Any Standards? Wolfram Kriesing, uxebu @wolframkriesing
  50. 50. W3C Widget Spec Wolfram Kriesing, uxebu @wolframkriesing
  51. 51. W3C Widget Spec • specifies packaging Wolfram Kriesing, uxebu @wolframkriesing
  52. 52. We want more! Wolfram Kriesing, uxebu @wolframkriesing
  53. 53. Native Access • Camera • Telephony • Geo location • Accelerometer • Compass • Contacts • ... Wolfram Kriesing, uxebu @wolframkriesing
  54. 54. Multiple Ways • JIL Spec http://www.jil.org/ • BONDI Spec http://bondi.omtp.org/ • W3C Spec http://w3.org/2009/dap/ Wolfram Kriesing, uxebu @wolframkriesing
  55. 55. But they are just specs :-( Wolfram Kriesing, uxebu @wolframkriesing
  56. 56. Multiple Ways Wolfram Kriesing, uxebu @wolframkriesing
  57. 57. Multiple Ways • JIL Spec http://www.jil.org/ Wolfram Kriesing, uxebu @wolframkriesing
  58. 58. Multiple Ways • JIL Spec http://www.jil.org/ • BONDI Spec http://bondi.omtp.org/ Wolfram Kriesing, uxebu @wolframkriesing
  59. 59. Multiple Ways • JIL Spec http://www.jil.org/ • BONDI Spec http://bondi.omtp.org/ • W3C Spec http://w3.org/2009/dap/ Wolfram Kriesing, uxebu @wolframkriesing
  60. 60. Multiple Ways • JIL Spec http://www.jil.org/ • BONDI Spec http://bondi.omtp.org/ • W3C Spec http://w3.org/2009/dap/ • PhoneGap http://phonegap.pbworks.com/ Wolfram Kriesing, uxebu @wolframkriesing
  61. 61. Multiple Ways • JIL Spec http://www.jil.org/ • BONDI Spec http://bondi.omtp.org/ • W3C Spec http://w3.org/2009/dap/ • PhoneGap http://phonegap.pbworks.com/ • Nokia WRT http://bit.ly/nokia-WRT-APIs Wolfram Kriesing, uxebu @wolframkriesing
  62. 62. Multiple Ways • JIL Spec http://www.jil.org/ • BONDI Spec http://bondi.omtp.org/ • W3C Spec http://w3.org/2009/dap/ • PhoneGap http://phonegap.pbworks.com/ • Nokia WRT http://bit.ly/nokia-WRT-APIs • Appcelerator http://www.codestrong.com/timobile/api/ Wolfram Kriesing, uxebu @wolframkriesing
  63. 63. Multiple Ways • JIL Spec http://www.jil.org/ • BONDI Spec http://bondi.omtp.org/ • W3C Spec http://w3.org/2009/dap/ • PhoneGap http://phonegap.pbworks.com/ • Nokia WRT http://bit.ly/nokia-WRT-APIs • Appcelerator http://www.codestrong.com/timobile/api/ • Google Chrome OS??? Wolfram Kriesing, uxebu @wolframkriesing
  64. 64. Runtimes • JIL Spec http://www.jil.org/ • BONDI Spec http://bondi.omtp.org/ Nokia S60 • W3C Spec http://w3.org/2009/dap/ iPhone • PhoneGap http://phonegap.pbworks.com/ Android • Nokia WRT http://bit.ly/nokia-WRT-APIs Blackberry • Appcelerator http://www.codestrong.com/timobile/api/ • Google Chrome OS??? Windows Mobile Wolfram Kriesing, uxebu @wolframkriesing
  65. 65. Runtimes • JIL Spec http://www.jil.org/ • BONDI Spec http://bondi.omtp.org/ Nokia S60 • W3C Spec http://w3.org/2009/dap/ iPhone • PhoneGap http://phonegap.pbworks.com/ Android • Nokia WRT http://bit.ly/nokia-WRT-APIs Blackberry • Appcelerator http://www.codestrong.com/timobile/api/ • Google Chrome OS??? Windows Mobile Wolfram Kriesing, uxebu @wolframkriesing
  66. 66. Runtimes • JIL Spec http://www.jil.org/ • BONDI Spec http://bondi.omtp.org/ Nokia S60 • W3C Spec http://w3.org/2009/dap/ iPhone • PhoneGap http://phonegap.pbworks.com/ Android • Nokia WRT http://bit.ly/nokia-WRT-APIs Blackberry • Appcelerator http://www.codestrong.com/timobile/api/ • Google Chrome OS??? Windows Mobile Wolfram Kriesing, uxebu @wolframkriesing
  67. 67. Runtimes • JIL Spec http://www.jil.org/ • BONDI Spec http://bondi.omtp.org/ Nokia S60 • W3C Spec http://w3.org/2009/dap/ iPhone • PhoneGap http://phonegap.pbworks.com/ Android • Nokia WRT http://bit.ly/nokia-WRT-APIs Blackberry • Appcelerator http://www.codestrong.com/timobile/api/ • Google Chrome OS??? Windows Mobile Wolfram Kriesing, uxebu @wolframkriesing
  68. 68. Runtimes • JIL Spec http://www.jil.org/ • BONDI Spec http://bondi.omtp.org/ Nokia S60 • W3C Spec http://w3.org/2009/dap/ iPhone • PhoneGap http://phonegap.pbworks.com/ Android • Nokia WRT http://bit.ly/nokia-WRT-APIs Blackberry • Appcelerator http://www.codestrong.com/timobile/api/ • Google Chrome OS??? Windows Mobile Wolfram Kriesing, uxebu @wolframkriesing
  69. 69. PhoneGap "An express goal of the PhoneGap project is for the project to not exist." Wolfram Kriesing, uxebu @wolframkriesing
  70. 70. PhoneGap "An express goal of the PhoneGap project is for the project to not exist." Wolfram Kriesing, uxebu @wolframkriesing
  71. 71. PhoneGap "An express goal of the PhoneGap project is for the project to not exist." Open Source Wolfram Kriesing, uxebu @wolframkriesing
  72. 72. PhoneGap "An express goal of the PhoneGap project is for the project to not exist." Open Source Wolfram Kriesing, uxebu @wolframkriesing
  73. 73. Distribution? Wolfram Kriesing, uxebu @wolframkriesing
  74. 74. Stores http://distimo.com/uploads/reports/mobile%20app%20store%20overview.pdf Wolfram Kriesing, uxebu @wolframkriesing
  75. 75. Stores http://distimo.com/uploads/reports/mobile%20app%20store%20overview.pdf Wolfram Kriesing, uxebu @wolframkriesing
  76. 76. Stores http://distimo.com/uploads/reports/mobile%20app%20store%20overview.pdf Wolfram Kriesing, uxebu @wolframkriesing
  77. 77. th http://blog.uxebu.com Wolfram Kriesing, uxebu wolfram@uxebu.com http://twitter.com/uxebu http://twitter.com/wolframkriesing Wolfram Kriesing, uxebu @wolframkriesing

×