Mobile Web
at Loughborough
DevCSI
October 2010
Martin Hamilton
http://martinh.net
Picture by Flickr user isado
Web page bringing
together disparate
systems and services
Scaffolding to build
student self-service
facilities
Wider simplification
agenda
Picture: Microsoft Office clipart
Opening up Data Feeds
Ex Libris – RESTful API (via X-Server)
VMC Metro Symphony – SOAP API
Google Apps – ATOM APIs for
Mail/Calendar
+ direct MySQL and SQL Server access
+ the usual RSS feeds etc
+ some scraping via jQuery load()
Picture by Flickr user isado
Phase 1
Google Mail and Calendar
Moodle VLE
Budget
Library Services
Static student content
General news/events
Targeted alerts
Search
Single Sign-On
Picture by Flickr user isado
Current Status
Feeds + widgets mostly in place
Working prototype (my.lboro)
Mechanism for creating “widgets”
Progress with Single Sign-On
(SPNEGO) Picture: Microsoft Office clipart
Phase 1 –To Do (for Xmas)
Static student oriented content
Performance tuning
Notifications framework
Widget selector
Save widget preferences
Further use of Single Sign-On
Usability / Accessibility
Picture by Flickr user isado
Phase 2 (Q1/Q2 2011)
Student self-service
Model for scaling interface
Mobile Web interface
Wish list
Web Single Sign-On
“Third party” widgets
Picture by Flickr user isado
Anatomy of a Widget
PHP shim to set up personalisation
- move to mod_authnz_ldap?
jQuery asynch. content via AJAX
ColorBox for lightbox type effects
PHP, Perl and Python demo’d
+ Just a <DIV>, may not be in a box
+ Not necessarily read only
Picture by Flickr user isadoPicture by Flickr user isado
Mobile Web OSP
http://mobilewebosp.pbworks.com
MIT Mobile Web fork by WVU
PHP foundation – trivial code reuse
Attractive: jQTouch, touchMapLite* etc
Graceful degradation via CSS
[Time for a demo… !]
Picture by Flickr user isado
<? $page_title = "IT Status"; ?>
<? $help_on = true; ?>
<div id=”status" class="clear-map-detail">
<? include("../templates/webkit/toolbar.html"); ?>
<div class="focal">IT service status – what’s up and down</div>
<div class="content" id="trafficlights">
<p><img src="../images/aloader.gif" /></p>
</div>
<script>
$("#trafficlights").load("../../../availability.html #itstatus");
</script>
<? include("../templates/webkit/info.html"); ?>
</div>

Mobile Web at Loughborough

  • 1.
    Mobile Web at Loughborough DevCSI October2010 Martin Hamilton http://martinh.net Picture by Flickr user isado
  • 2.
    Web page bringing togetherdisparate systems and services Scaffolding to build student self-service facilities Wider simplification agenda Picture: Microsoft Office clipart
  • 4.
    Opening up DataFeeds Ex Libris – RESTful API (via X-Server) VMC Metro Symphony – SOAP API Google Apps – ATOM APIs for Mail/Calendar + direct MySQL and SQL Server access + the usual RSS feeds etc + some scraping via jQuery load() Picture by Flickr user isado
  • 5.
    Phase 1 Google Mailand Calendar Moodle VLE Budget Library Services Static student content General news/events Targeted alerts Search Single Sign-On Picture by Flickr user isado
  • 6.
    Current Status Feeds +widgets mostly in place Working prototype (my.lboro) Mechanism for creating “widgets” Progress with Single Sign-On (SPNEGO) Picture: Microsoft Office clipart
  • 7.
    Phase 1 –ToDo (for Xmas) Static student oriented content Performance tuning Notifications framework Widget selector Save widget preferences Further use of Single Sign-On Usability / Accessibility Picture by Flickr user isado
  • 8.
    Phase 2 (Q1/Q22011) Student self-service Model for scaling interface Mobile Web interface Wish list Web Single Sign-On “Third party” widgets Picture by Flickr user isado
  • 9.
    Anatomy of aWidget PHP shim to set up personalisation - move to mod_authnz_ldap? jQuery asynch. content via AJAX ColorBox for lightbox type effects PHP, Perl and Python demo’d + Just a <DIV>, may not be in a box + Not necessarily read only Picture by Flickr user isadoPicture by Flickr user isado
  • 10.
    Mobile Web OSP http://mobilewebosp.pbworks.com MITMobile Web fork by WVU PHP foundation – trivial code reuse Attractive: jQTouch, touchMapLite* etc Graceful degradation via CSS [Time for a demo… !] Picture by Flickr user isado
  • 11.
    <? $page_title ="IT Status"; ?> <? $help_on = true; ?> <div id=”status" class="clear-map-detail"> <? include("../templates/webkit/toolbar.html"); ?> <div class="focal">IT service status – what’s up and down</div> <div class="content" id="trafficlights"> <p><img src="../images/aloader.gif" /></p> </div> <script> $("#trafficlights").load("../../../availability.html #itstatus"); </script> <? include("../templates/webkit/info.html"); ?> </div>