20110408 ILIAS DevConf: Skin for mobile devices

3,099 views

Published on

1 Comment
2 Likes
Statistics
Notes
  • 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
No Downloads
Views
Total views
3,099
On SlideShare
0
From Embeds
0
Number of Embeds
20
Actions
Shares
0
Downloads
0
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide

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>

×