20110408 ILIAS DevConf: Skin for mobile devices
- 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.