2011 08-24 mobile web app


Published on

jQueryMobile hydrological mobile web app

Published in: Technology
  • Be the first to comment

  • Be the first to like this

No Downloads
Total Views
On Slideshare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

2011 08-24 mobile web app

  1. 1. Webmobile Hydstra data on web-enabled mobile phones KISTERS Users Group Meeting 2011 August 24-25, Canberra, Australia
  2. 2. First Look
  3. 3. First Look
  4. 4. First Look
  5. 5. First Look
  6. 6. First Look
  7. 7. First Look
  8. 8. First Look
  9. 9. First Look
  10. 10. System Concept <ul><li>A user interface for web-enabled mobile phones that presents latest values from the Hydstra software database </li></ul>
  11. 11. System Development Requirements <ul><li>Access Hydstra time series database through web services </li></ul><ul><li>Efficient development process </li></ul><ul><li>Minimal development and maintenance costs </li></ul><ul><li>Maximize accessibility from web-enabled smart mobile devices </li></ul>
  12. 12. System Problem
  13. 13. Models Nokia
  14. 14. System Problem <ul><li>How do we make an application for all popular mobile device platforms? </li></ul>
  15. 15. Native App Solution <ul><li>One approach: write many native apps (android, iPhone, Windows, etc) </li></ul><ul><li>PROS: </li></ul><ul><ul><li>Access to the device features (camera and address book, etc) </li></ul></ul><ul><ul><li>Offline capability out of the box </li></ul></ul><ul><li>CONS: </li></ul><ul><ul><li>Not cross-platform </li></ul></ul><ul><ul><li>Build many times </li></ul></ul><ul><ul><li>Expensive to develop & maintain </li></ul></ul>Build Build Build Build
  16. 16. Web App Solution <ul><li>Another approach: write a web app for all web-enabled devices </li></ul><ul><li>PROS: </li></ul><ul><ul><li>Cross-platform, all mobile phones with an internet browser that handles media queries </li></ul></ul><ul><ul><li>Build once </li></ul></ul><ul><ul><li>Cheaper to build and maintain </li></ul></ul><ul><li>CONS: </li></ul><ul><ul><li>Can’t use device features (camera, etc) </li></ul></ul><ul><ul><li>Performance & accessibility depend on network speeds and network access </li></ul></ul>Build html css js
  17. 17. Mobile Web Apps & Javascript Frameworks <ul><li>There are many </li></ul><ul><ul><li>Sencha touch </li></ul></ul><ul><ul><li>GWT mobile </li></ul></ul><ul><ul><li>Dojo </li></ul></ul><ul><ul><li>jQuery </li></ul></ul><ul><ul><li>http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks </li></ul></ul>
  18. 18. Speed testing of frameworks <ul><li>Slickspeed testing of javascript frameworks for performance comparison </li></ul><ul><ul><li>http:// mootools.net/slickspeed / </li></ul></ul>
  19. 20. http:// www.google.com/trends?q =jquery%2Cdojo%2Cmootools%2Csencha+touch%2Cprototype&ctab=0&geo= all&date = all&sort =1
  20. 21. jQuery <ul><li>What is jQuery? </li></ul><ul><li>Wikipedia: </li></ul><ul><ul><li>a cross-browser JavaScript library </li></ul></ul><ul><ul><li>released in January 2006 at BarCamp NYC by John Resig. Used by over 46% of the 10,000 most visited websites [ 2 ][ 3 ] </li></ul></ul>
  21. 22. jQuery
  22. 23. jQuery Mobile <ul><li>Beta released this year </li></ul><ul><li>Built on jQuery and jQuery UI </li></ul><ul><li>Touch interfaces that adapt gracefully to a range of device form factors </li></ul><ul><li>Layouts (lists, detail panes, overlays) </li></ul>http://jquerymobile.com/demos/1.0b2/
  23. 24. jQuery Mobile <ul><li>  Project Sponsors </li></ul>
  24. 25. jQuery Mobile <ul><li>  Dreamweaver & CS5.5 </li></ul><ul><ul><li>jQuery code hinting </li></ul></ul><ul><ul><li>Added support to build and package native apps for Android™ and iOS with PhoneGap  </li></ul></ul><ul><li>http:// www.adobe.com/products/dreamweaver.html </li></ul><ul><li>http://tv.adobe.com/watch/cs-55-web-premium-feature-tour-/dreamweaver-cs-55-jquery-mobile-pages/ </li></ul>
  25. 26. jQuery Mobile – the bleeding edge <ul><li>jQuery Mobile Beta 2  </li></ul><ul><li>Beta 3 released in the next month </li></ul>
  26. 27. jQuery mobile graded browser support <ul><li>Key: </li></ul><ul><ul><li>A High Quality.  A browser that’s capable of, at minimum, utilizing media queries (a requirement for jQuery Mobile). These browsers will be actively tested against but may not receive the full capabilities of jQuery Mobile. </li></ul></ul><ul><ul><li>B Medium Quality.  A capable browser that doesn’t have enough market share to warrant day-to-day testing. Bug fixes will still be applied to help these browsers. </li></ul></ul><ul><ul><li>C Low Quality.  A browser that is not capable of utilizing media queries. They won’t be provided any jQuery Mobile scripting or CSS (falling back to plain HTML and simple CSS). </li></ul></ul><ul><ul><li>Upcoming browser.  This browser is not yet released but is in alpha/beta testing. </li></ul></ul>
  27. 28. jQuery mobile graded browser support <ul><li>jQuery browser support matrix http:// jquerymobile.com/gbs/#gbs </li></ul>
  28. 29. Development with Google Chrome & Eclipse <ul><li>Google Chrome: http://code.google.com/chrome/devtools/docs/overview.html </li></ul><ul><li>Eclipse: http://www.eclipse.org/home/newcomers.php </li></ul>
  29. 30. Eclipse: IDE
  30. 32. Chrome: Developer Tools
  31. 33. The Developer Tools Window
  32. 35. Hosting Requirements <ul><li>Server outsite firewall </li></ul><ul><li>Hydllp.dll & webservices components </li></ul><ul><li>Hydstra/WEB license </li></ul><ul><li>Webbuild.webmob.bat to generate navigation files which are then sync'ed to the web server </li></ul><ul><li>Webbuild.webmob.bat scheduled to run daily </li></ul>
  33. 36. Administration Requirements <ul><li>Variables & Index menu options setup with webmobile.ini </li></ul><ul><li>Groups setup in Hydstra for site lists, basins, dams to be included in the navigation menus </li></ul>
  34. 37. The future of Mobile Web? <ul><li>Information </li></ul><ul><ul><li>Images </li></ul></ul><ul><ul><ul><li>HYPLOT type </li></ul></ul></ul><ul><ul><ul><li>HYSECPIC </li></ul></ul></ul><ul><ul><li>Pump/no pump </li></ul></ul><ul><ul><li>Flood advice </li></ul></ul><ul><ul><li>Forecasting/modeling </li></ul></ul><ul><ul><li>Water Quality </li></ul></ul><ul><ul><li>What’s my current consumption vs allocation? </li></ul></ul>
  35. 38. The future of Mobile Web? <ul><li>Features </li></ul><ul><ul><li>Data input onsite </li></ul></ul><ul><ul><ul><li>Database synchronization </li></ul></ul></ul><ul><ul><li>Ability to store favorites eg. http://www.coldfusionjedi.com/demos/artbrowser/v4/ </li></ul></ul><ul><ul><li>Searches & Filtering </li></ul></ul><ul><ul><li>Alerts & Warnings: </li></ul></ul><ul><ul><ul><li>Flood warning, flashing red/orange </li></ul></ul></ul><ul><ul><ul><li>Site visit reminders </li></ul></ul></ul><ul><ul><li>Location based alerts </li></ul></ul>
  36. 39. Hydstra Mobile Example Website <ul><li>Recent web phones </li></ul><ul><ul><li>http:// realtimedata.water.nsw.gov.au /mobile/ </li></ul></ul><ul><li>Older web phones for text-based version </li></ul><ul><ul><li>http://realtimedata.water.nsw.gov.au/mobtext/ </li></ul></ul>