My slides from the DevCSI "Developing for the Mobile Web" workshop at the ILRT, Bristol on 27th October 2010. Check out my blog at http://martinh.net for more on this work.

1. Mobile Web
at Loughborough
DevCSI
October 2010
Martin Hamilton
http://martinh.net
Picture by Flickr user isado

2. Web page bringing
together disparate
systems and services
Scaffolding to build
student self-service
facilities
Wider simplification
agenda
Picture: Microsoft Office clipart

4. 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

5. 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

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 –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

8. 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

9. 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

10. 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

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>