Mobile Webat Loughborough

DevCSIOctober 2010

Martin Hamiltonhttp://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 APIGoogle 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 CalendarMoodle VLEBudgetLibrary ServicesStatic student contentGeneral news/eventsTargeted alertsSearchSingle Sign-On

Picture by Flickr user isado

Current Status

Feeds + widgets mostly in placeWorking 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 contentPerformance tuningNotifications frameworkWidget selectorSave widget preferencesFurther use of Single Sign-OnUsability / Accessibility

Picture by Flickr user isado

Phase 2 (Q1/Q2 2011)

Student self-serviceModel for scaling interfaceMobile Web interfaceWish listWeb 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 AJAXColorBox for lightbox type effectsPHP, 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.comMIT Mobile Web fork by WVUPHP foundation – trivial code reuseAttractive: jQTouch, touchMapLite* etcGraceful 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>