The document discusses developing a mobile skin for the ILIAS learning management system. It considers various technical approaches, including creating a simple skin with CSS, using the jQuery framework, developing a separate mobile GUI, wrapping XML, or creating a native app. The top options are a simple skin for minimal changes, or using jQuery for a modern look and browser independence but more complexity. Testing would need to be done with different mobile browsers.

1. Skin for mobile devices Fred Neumann (Uni Erlangen) Martin Studer (studer + raimann ag)

2. Erlangen: Project Outline www.2ndtechcycle.de Collaborative project of six chairs at the university of erlangen Nearly finished Remaining development budged (~ 20 days) Idea to create an ILIAS skin for smartphones („ILIAStouch“) Detailed Spec, evaluable prototype needed StudOn team was asked for implementation Development in April / Mai by Fred First demonstration / evaluation end of April If successful, probably adoption for the university: www.studon.uni-erlangen.de

3. Erlangen: Requirements General Features Support only for small touch screens (no pads, no pencil) Support for different mobile Browsers / OS Automated recognition of mobile browsers Manual switching of skin Instant adaptation to screen size and orientation ILIAS elements Personal Desktop (selected items / memberships) Repository navigation (containers, info pages, history) Forums (nearly full participant functionality) Tests and Surveys (only single/multiple choice needed) Files, Weblinks Learning contents (as far as possible...) Mainly reading needed (except: forums, test run)

4. Erlangen: considerations ILIAS version to build on StudOn (ILIAS 4.1 with proprietary adaptations) ILIAS 4.1 (stable, but not newest) ILIAS 4.2 (new CSS, stable enough for prototype?) Technical solution No framework New Skin: Template, CSS, small GUI adaptations WebApp Sencha Touch (ExtJS): sencha.com/products/touch JQTouch (JQuery): jqtouch.com JQuery mobile (JQuery): jquerymobile.com Native App PhoneGap (phonegap.com)

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. 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. Simple Skin: examples (Erlangen, Specs)

8. Simple Skin: discussion Pros No additional technology needed Minimal invasive approach Cons Limited optimization possibilities Nesting of templates might not be appropriate Expertise of CSS and mobile browsers needed Intensive testing with different browsers

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. JQuery Skin: examples (Bern, demo) http://test.learnonline.ch/mobile/goto.php?target=tst_49&client_id=test_demomaster User: test.user (Or create your own user account) Password: testuser

11. JQuery Skin: discussion Pros Browser independent framework ( support matrix ) Seems to be good maintained Modern, rather „native App“ look & feel Cons Adaptation of GUI classes neded e.g. for different nesting, input/ajax processing Increased complexity and additional guidelined for developers

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. Mobile GUI: example (Luzern, demo) based on WebDAV server test.learnonline.ch/mobile/mobile.php User: test.user (Or create your own user account) Password: testuser

14. Mobile GUI: discussion Pros Optimized workflow and page sequences Parallel development, reduced dependencies Cons Duplication of code Separate maintenance Refactoring needed moving core functions from GUI to base classes

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. XML wrapping: discussion Pros Existing GUI classes can be kept Mixture of standard and xml templates possible Processing can be realized with a plugin Optimization for JQuery mobile possible Re-arrangement of page contents Filtering out the needed elements Starting point of a „semantic skin“ for other output formats for embedding ILIAS in other applications Cons Additional complexity Needs standard templates producing well-formed xhtml Overhead for xsl processing

17. Native App with phonegap.com SCORM export of Learning modules with test questions (with skin for smartphones); compile the export with phonegap.com Native App for downloading and running of these modules

18. Native App: discussion Pros offline usable (self assessment) Cons Dedicated for quizzes and not for other modules like survey, forum, … For using with iPhones we have to publish the app on the App Store. There are restrictions for publishing.