18 years developing educational technology at Loughborough University and beyond
Mobile Web at Loughborough
-
Upload
martin-hamilton -
Category
Technology
-
view
1.073 -
download
2
description
Transcript of Mobile Web at Loughborough
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>