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.

20110408 ILIAS DevConf: Skin for mobile devices

3,688 views

Published on

  • Nice work !
    Where I can find more info or tweeter acount about this project.
    Thanks !
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here

20110408 ILIAS DevConf: Skin for mobile devices

  1. 1. Skin for mobile devices Fred Neumann (Uni Erlangen) Martin Studer (studer + raimann ag)
  2. 2. Erlangen: Project Outline <ul><li>www.2ndtechcycle.de </li></ul><ul><ul><li>Collaborative project of six chairs at the university of erlangen </li></ul></ul><ul><ul><li>Nearly finished </li></ul></ul><ul><ul><li>Remaining development budged (~ 20 days) </li></ul></ul><ul><ul><li>Idea to create an ILIAS skin for smartphones („ILIAStouch“) </li></ul></ul><ul><ul><li>Detailed Spec, evaluable prototype needed </li></ul></ul><ul><li>StudOn team was asked for implementation </li></ul><ul><ul><li>Development in April / Mai by Fred </li></ul></ul><ul><ul><li>First demonstration / evaluation end of April </li></ul></ul><ul><ul><li>If successful, probably adoption for the university: www.studon.uni-erlangen.de </li></ul></ul>
  3. 3. Erlangen: Requirements <ul><li>General Features </li></ul><ul><ul><li>Support only for small touch screens (no pads, no pencil) </li></ul></ul><ul><ul><li>Support for different mobile Browsers / OS </li></ul></ul><ul><ul><li>Automated recognition of mobile browsers </li></ul></ul><ul><ul><li>Manual switching of skin </li></ul></ul><ul><ul><li>Instant adaptation to screen size and orientation </li></ul></ul><ul><li>ILIAS elements </li></ul><ul><ul><li>Personal Desktop (selected items / memberships) </li></ul></ul><ul><ul><li>Repository navigation (containers, info pages, history) </li></ul></ul><ul><ul><li>Forums (nearly full participant functionality) </li></ul></ul><ul><ul><li>Tests and Surveys (only single/multiple choice needed) </li></ul></ul><ul><ul><li>Files, Weblinks </li></ul></ul><ul><ul><li>Learning contents (as far as possible...) </li></ul></ul><ul><li>Mainly reading needed (except: forums, test run) </li></ul>
  4. 4. Erlangen: considerations <ul><li>ILIAS version to build on </li></ul><ul><ul><li>StudOn (ILIAS 4.1 with proprietary adaptations) </li></ul></ul><ul><ul><li>ILIAS 4.1 (stable, but not newest) </li></ul></ul><ul><ul><li>ILIAS 4.2 (new CSS, stable enough for prototype?) </li></ul></ul><ul><li>Technical solution </li></ul><ul><ul><li>No framework </li></ul></ul><ul><ul><ul><li>New Skin: Template, CSS, small GUI adaptations </li></ul></ul></ul><ul><ul><li>WebApp </li></ul></ul><ul><ul><ul><li>Sencha Touch (ExtJS): sencha.com/products/touch </li></ul></ul></ul><ul><ul><ul><li>JQTouch (JQuery): jqtouch.com </li></ul></ul></ul><ul><ul><ul><li>JQuery mobile (JQuery): jquerymobile.com </li></ul></ul></ul><ul><ul><li>Native App </li></ul></ul><ul><ul><ul><li>PhoneGap (phonegap.com) </li></ul></ul></ul>
  5. 5. Current ILIAS scheme ilias.php ilObjForumGUI ilTemplateGUI ilObjForum HTML page tpl.forums _threads_view .html tpl.main .html delos .css ILIAS GUI Delos skin ILIAS base
  6. 6. Simple Skin: implementation ilias.php ilObjForumGUI ilTemplateGUI ilObjForum HTML page tpl.forums _threads_view .html tpl.main .html ILIAS GUI Mobile skin ILIAS base mobile .css
  7. 7. Simple Skin: examples (Erlangen, Specs)
  8. 8. Simple Skin: discussion <ul><li>Pros </li></ul><ul><ul><li>No additional technology needed </li></ul></ul><ul><ul><li>Minimal invasive approach </li></ul></ul><ul><li>Cons </li></ul><ul><ul><li>Limited optimization possibilities </li></ul></ul><ul><ul><li>Nesting of templates might not be appropriate </li></ul></ul><ul><ul><li>Expertise of CSS and mobile browsers needed </li></ul></ul><ul><ul><li>Intensive testing with different browsers </li></ul></ul>
  9. 9. JQuery Skin: implementation ilias.php ilObjForumGUI ilTemplateGUI ilObjForum HTML page tpl.forums _threads_view .html tpl.main .html ILIAS GUI Mobile skin ILIAS base jquery.js jquery.css mobile .css
  10. 10. JQuery Skin: examples (Bern, demo) <ul><li>http://test.learnonline.ch/mobile/goto.php?target=tst_49&client_id=test_demomaster </li></ul><ul><li>User: test.user (Or create your own user account) </li></ul><ul><li>Password: testuser </li></ul>
  11. 11. JQuery Skin: discussion <ul><li>Pros </li></ul><ul><ul><li>Browser independent framework ( support matrix ) </li></ul></ul><ul><ul><li>Seems to be good maintained </li></ul></ul><ul><ul><li>Modern, rather „native App“ look & feel </li></ul></ul><ul><li>Cons </li></ul><ul><ul><li>Adaptation of GUI classes neded </li></ul></ul><ul><ul><ul><li>e.g. for different nesting, input/ajax processing </li></ul></ul></ul><ul><ul><li>Increased complexity and additional guidelined for developers </li></ul></ul>
  12. 12. Mobile GUI: implementation mobile.php ilObjForum Mobile GUI ilTemplate Mobile GUI ilObjForum Mobile page tpl.forum _ mobile _view .html tpl.main _ mobile .html Mobile GUI Mobile skin ILIAS base jquery.js jquery.css mobile .css
  13. 13. Mobile GUI: example (Luzern, demo) <ul><li>based on WebDAV server </li></ul><ul><li>test.learnonline.ch/mobile/mobile.php </li></ul><ul><li>User: test.user (Or create your own user account) </li></ul><ul><li>Password: testuser </li></ul>
  14. 14. Mobile GUI: discussion <ul><li>Pros </li></ul><ul><ul><li>Optimized workflow and page sequences </li></ul></ul><ul><ul><li>Parallel development, reduced dependencies </li></ul></ul><ul><li>Cons </li></ul><ul><ul><li>Duplication of code </li></ul></ul><ul><ul><li>Separate maintenance </li></ul></ul><ul><ul><li>Refactoring needed </li></ul></ul><ul><ul><ul><li>moving core functions from GUI to base classes </li></ul></ul></ul>
  15. 15. XML wrapping: implementation ilias.php ilObjForumGUI ilTemplateGUI ilObjForum Mobile page tpl.forums _threads_view .xml tpl.main .xml ILIAS GUI Mobile skin ILIAS base ilTemplatePluginGUI ilRequestPlugin mobile .xsl mobile _forum .xsl jquery.js jquery.css mobile .css
  16. 16. XML wrapping: discussion <ul><li>Pros </li></ul><ul><ul><li>Existing GUI classes can be kept </li></ul></ul><ul><ul><ul><li>Mixture of standard and xml templates possible </li></ul></ul></ul><ul><ul><ul><li>Processing can be realized with a plugin </li></ul></ul></ul><ul><ul><li>Optimization for JQuery mobile possible </li></ul></ul><ul><ul><ul><li>Re-arrangement of page contents </li></ul></ul></ul><ul><ul><ul><li>Filtering out the needed elements </li></ul></ul></ul><ul><ul><li>Starting point of a „semantic skin“ </li></ul></ul><ul><ul><ul><li>for other output formats </li></ul></ul></ul><ul><ul><ul><li>for embedding ILIAS in other applications </li></ul></ul></ul><ul><li>Cons </li></ul><ul><ul><li>Additional complexity </li></ul></ul><ul><ul><li>Needs standard templates producing well-formed xhtml </li></ul></ul><ul><ul><li>Overhead for xsl processing </li></ul></ul>
  17. 17. Native App with phonegap.com <ul><li>SCORM export of Learning modules with test questions (with skin for smartphones); compile the export with phonegap.com </li></ul><ul><li>Native App for downloading and running of these modules </li></ul>
  18. 18. Native App: discussion <ul><li>Pros </li></ul><ul><ul><li>offline usable (self assessment) </li></ul></ul><ul><li>Cons </li></ul><ul><ul><li>Dedicated for quizzes and not for other modules like survey, forum, … </li></ul></ul><ul><ul><li>For using with iPhones we have to publish the app on the App Store. There are restrictions for publishing. </li></ul></ul>

×