Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Gregynog 2011

869 views

Published on

Sw

Published in: Education
  • Be the first to comment

  • Be the first to like this

Gregynog 2011

  1. 2. The Mobile Web Alexander Roberts [email_address]
  2. 3. A new website needs...
  3. 4. A shiny new team to build it!
  4. 5. ISS Web Team <ul><li>University Web Content Management System </li></ul><ul><li>Academic Application Development (Assignment Toolkit, etc) </li></ul><ul><li>XML Publishing ( http://www.dafyddapgwilym.net ) </li></ul><ul><li>Anything else... </li></ul><ul><li>Using Open Source technologies such as PHP, Zend, Symfony, JQuery, YUI, Python, Django, SVN, Trac, Oracle Berkeley DBXML </li></ul><ul><li>Also MS .Net, MS SQL Server </li></ul>
  5. 6. ...and JavaScript <ul><li>‘ my attitude toward JavaScript has changed completely in the past few years. JavaScript has &quot;grown up.“’ </li></ul><ul><li>Mike Loukides (07/06/2011) </li></ul><ul><li>http://radar.oreilly.com/2011/06/time-to-learn-javascript.html </li></ul>
  6. 7. Writing code makes you look cool...? <ul><li>With the advent of JavaScript libraries such as YahooUI, JQuery it’s now easier to create great looking user interfaces (UIs) </li></ul><ul><li>Or it just makes all our UIs look the same... </li></ul>
  7. 8. One ring to unite them all!
  8. 9. The bad old days... <ul><li>Up to now all development has been focused on the desktop, however... </li></ul>
  9. 10. Google Analytics for May/June Total visits: 530,182
  10. 11. Mobile Analysis <ul><li>iPhone currently at 1% of all visits to Swansea web site... </li></ul>
  11. 12. So what if... <ul><li>...One day the internet changed from being accessed mainly on the desktop to being accessed mainly on mobile devices, and no one noticed? </li></ul>
  12. 13. Mobile vs. Desktop Internet <ul><li> … within the next five years “more users will connect to the Internet over mobile devices than desktop PCs.” </li></ul><ul><li>Mary Meeker 2010 (Morgan Stanley) </li></ul>
  13. 14. The Science...
  14. 15. Emerging Mobile Technologies <ul><li>Platforms: HTML5, iOS, Android, ChromeOS, Windows Mobile 7 </li></ul><ul><li>Presentation: CSS3 – SCSS </li></ul><ul><li>Frameworks: JQuery Mobile, Sencha Touch, PhoneGap, OpenMobile </li></ul>
  15. 16. Web Apps vs. Native Apps? <ul><li>Web Apps </li></ul><ul><li>Molly – Mobile Oxford, University of Oxford http://mollyproject.org – Python, Django – bespoke </li></ul><ul><li>Native Apps </li></ul><ul><li>CampusM™ - http://www.ombiel.com/campusm.html </li></ul>
  16. 17. Web Apps <ul><li>Pros: </li></ul><ul><li>Can leverage existing skills within development teams </li></ul><ul><li>Much cheaper and quicker to produce than using a 3 rd party </li></ul><ul><li>Generally work on all mobile platforms </li></ul><ul><li>Cons: </li></ul><ul><li>Not able to leverage specific platform functions such as gyroscope, camera, internal storage </li></ul><ul><li>Device detection in HTML5 still problematic </li></ul><ul><li>Less personalised experience, e.g. lacking integration with iTunes app store </li></ul>
  17. 18. Native Apps <ul><li>Pros: </li></ul><ul><li>Tight integration with hosting platform </li></ul><ul><li>More control of UI </li></ul><ul><li>Continuity of end user experience </li></ul><ul><li>Cons: </li></ul><ul><li>Requires many different builds per device type </li></ul><ul><li>Can be expensive compared to developing Web apps </li></ul><ul><li>Constantly moving target </li></ul>
  18. 19. Mobile First! <ul><li>‘ Progressive enhancement’ strategy </li></ul><ul><li>Steven Champeon of  hesketh.com </li></ul><ul><li>Semantic Foundation – basic content accessible to all browsers and users </li></ul><ul><li>Build up the user experience one technology layer at a time </li></ul>
  19. 20. Progressive Enhancement http://www.alistapart.com/articles/understandingprogressiveenhancement
  20. 21. Going mobile at Swansea <ul><li>eStream campus ‘YouTube’ style video to mobile H.264/FLV </li></ul><ul><li>MS SharePoint built in mobile view </li></ul><ul><li>Blackboard </li></ul><ul><li>Quick Web Apps and Info for mobile users: PC availability, Library Opening Times, Course Search... </li></ul>
  21. 22. SUMO!
  22. 23. A happy place  <ul><li>Progressive enhancement for all Swansea University web pages...? </li></ul><ul><li>Buy-in from all content creators (100+) </li></ul><ul><li>Establishment of strict protocols </li></ul><ul><li>Hard thinking </li></ul><ul><li>Pain </li></ul>
  23. 24. Credits <ul><li>Alexander Roberts </li></ul><ul><li>a.l.roberts at swansea.ac.uk </li></ul><ul><li>Geraint Hywel </li></ul><ul><li>g.s.j.hywel at swansea.ac.uk </li></ul>

×