2011 08-24 mobile web app

Webmobile Hydstra data on web-enabled mobile phones KISTERS Users Group Meeting 2011 August 24-25, Canberra, Australia

System Concept A user interface for web-enabled mobile phones that presents latest values from the Hydstra software database

System Development Requirements Access Hydstra time series database through web services Efficient development process Minimal development and maintenance costs Maximize accessibility from web-enabled smart mobile devices

System Problem How do we make an application for all popular mobile device platforms?

Native App Solution One approach: write many native apps (android, iPhone, Windows, etc) PROS: Access to the device features (camera and address book, etc) Offline capability out of the box CONS: Not cross-platform Build many times Expensive to develop & maintain Build Build Build Build

Web App Solution Another approach: write a web app for all web-enabled devices PROS: Cross-platform, all mobile phones with an internet browser that handles media queries Build once Cheaper to build and maintain CONS: Can’t use device features (camera, etc) Performance & accessibility depend on network speeds and network access Build html css js

Mobile Web Apps & Javascript Frameworks There are many Sencha touch GWT mobile Dojo jQuery http://en.wikipedia.org/wiki/Comparison_of_JavaScript_frameworks

Speed testing of frameworks Slickspeed testing of javascript frameworks for performance comparison http:// mootools.net/slickspeed /

http:// www.google.com/trends?q =jquery%2Cdojo%2Cmootools%2Csencha+touch%2Cprototype&ctab=0&geo= all&date = all&sort =1

jQuery What is jQuery? Wikipedia: a cross-browser JavaScript library released in January 2006 at BarCamp NYC by John Resig. Used by over 46% of the 10,000 most visited websites [ 2 ][ 3 ]

jQuery Mobile Beta released this year Built on jQuery and jQuery UI Touch interfaces that adapt gracefully to a range of device form factors Layouts (lists, detail panes, overlays) http://jquerymobile.com/demos/1.0b2/

jQuery Mobile Project Sponsors

jQuery Mobile Dreamweaver & CS5.5 jQuery code hinting Added support to build and package native apps for Android™ and iOS with PhoneGap http:// www.adobe.com/products/dreamweaver.html http://tv.adobe.com/watch/cs-55-web-premium-feature-tour-/dreamweaver-cs-55-jquery-mobile-pages/

jQuery Mobile – the bleeding edge jQuery Mobile Beta 2 Beta 3 released in the next month

jQuery mobile graded browser support Key: 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. 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. 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). Upcoming browser. This browser is not yet released but is in alpha/beta testing.

jQuery mobile graded browser support jQuery browser support matrix http:// jquerymobile.com/gbs/#gbs

Development with Google Chrome & Eclipse Google Chrome: http://code.google.com/chrome/devtools/docs/overview.html Eclipse: http://www.eclipse.org/home/newcomers.php

Hosting Requirements Server outsite firewall Hydllp.dll & webservices components Hydstra/WEB license Webbuild.webmob.bat to generate navigation files which are then sync'ed to the web server Webbuild.webmob.bat scheduled to run daily

Administration Requirements Variables & Index menu options setup with webmobile.ini Groups setup in Hydstra for site lists, basins, dams to be included in the navigation menus

The future of Mobile Web? Information Images HYPLOT type HYSECPIC Pump/no pump Flood advice Forecasting/modeling Water Quality What’s my current consumption vs allocation?

The future of Mobile Web? Features Data input onsite Database synchronization Ability to store favorites eg. http://www.coldfusionjedi.com/demos/artbrowser/v4/ Searches & Filtering Alerts & Warnings: Flood warning, flashing red/orange Site visit reminders Location based alerts

Hydstra Mobile Example Website Recent web phones http:// realtimedata.water.nsw.gov.au /mobile/ Older web phones for text-based version http://realtimedata.water.nsw.gov.au/mobtext/

2011 08-24 mobile web app

More Related Content

What's hot

What's hot (20)

Similar to 2011 08-24 mobile web app

Similar to 2011 08-24 mobile web app (20)

Recently uploaded

Recently uploaded (20)

2011 08-24 mobile web app