0
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 simpl...
Opening up Data Feeds
Ex Libris – RESTful API (via X-Server)
VMC Metro Symphony – SOAP API
Google Apps – ATOM APIs for
Mai...
Phase 1
Google Mail and Calendar
Moodle VLE
Budget
Library Services
Static student content
General news/events
Targeted al...
Current Status
Feeds + widgets mostly in place
Working prototype (my.lboro)
Mechanism for creating “widgets”
Progress with...
Phase 1 –To Do (for Xmas)
Static student oriented content
Performance tuning
Notifications framework
Widget selector
Save ...
Phase 2 (Q1/Q2 2011)
Student self-service
Model for scaling interface
Mobile Web interface
Wish list
Web Single Sign-On
“T...
Anatomy of a Widget
PHP shim to set up personalisation
- move to mod_authnz_ldap?
jQuery asynch. content via AJAX
ColorBox...
Mobile Web OSP
http://mobilewebosp.pbworks.com
MIT Mobile Web fork by WVU
PHP foundation – trivial code reuse
Attractive: ...
<? $page_title = "IT Status"; ?>
<? $help_on = true; ?>
<div id=”status" class="clear-map-detail">
<? include("../template...
Mobile Web at Loughborough
Upcoming SlideShare
Loading in...5
×

Mobile Web at Loughborough

1,076

Published on

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.

Published in: Technology, Sports
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
1,076
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Transcript of "Mobile Web at Loughborough"

  1. 1. Mobile Web at Loughborough DevCSI October 2010 Martin Hamilton http://martinh.net Picture by Flickr user isado
  2. 2. Web page bringing together disparate systems and services Scaffolding to build student self-service facilities Wider simplification agenda Picture: Microsoft Office clipart
  3. 3. 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
  4. 4. 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
  5. 5. 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
  6. 6. 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
  7. 7. 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
  8. 8. 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
  9. 9. 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
  10. 10. <? $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>
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×