• Save
2011 08-24  mobile web app
Upcoming SlideShare
Loading in...5

2011 08-24 mobile web app



jQueryMobile hydrological mobile web app

jQueryMobile hydrological mobile web app



Total Views
Views on SlideShare
Embed Views



1 Embed 1

https://twitter.com 1



Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

2011 08-24  mobile web app 2011 08-24 mobile web app Presentation Transcript

  • Webmobile Hydstra data on web-enabled mobile phones KISTERS Users Group Meeting 2011 August 24-25, Canberra, Australia
  • First Look
  • First Look
  • First Look
  • First Look
  • First Look
  • First Look
  • First Look
  • First Look
  • 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
  • Models Nokia
  • 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
  • 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)
  • 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
  • Eclipse: IDE
  • Chrome: Developer Tools
  • The Developer Tools Window
  • 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/