Entwicklung von ILIAS touchund Erfahrungen

Dipl.-Inf. Fred Neumann

Institut für Lern-InnovationFriedrich-Alexander-Universität Erlangen-Nürnberg

fred.neumann@fim.uni-erlangen.dewww.fim.uni-erlangen.de

8. Fernausbildungskongress der Bundeswehr, Hamburg, 7. September 2011

Agenda

Rahmenbedingungen und Ziele

Technische Lösungsmöglichkeiten

Gewählte Lösung und Umsetzung

Erfahrungen aus der Entwicklung

Alternative Ansätze / Projekte

Institut für Lern-Innovation

Einrichtung der Universität Erlangen-Nürnberg Lebenslanges Lernen, Technologie-gestütztes Lernen Ca. 20 MitarbeiterInnen, interdisziplinär Nationale und europäische Forschungs-Projekte Universitäts-interne und externe Dienstleistungen

StudOn: LMS der Universität (ILIAS) Betrieb, Support, Beratung, Weiterentwicklung Breit gestreute Nutzung

• Veranstaltungs-Organisation

• Lerninhalte

• Kommunikation und Kooperation

• Selbst-Tests und E-Klausuren

Ziele bei der Entwicklung von ILIAS touch

Evaluierbarer Prototyp Schreibtisch, Foren, Tests, Umfragen, Lerninhalte Grundlegende Navigations-Konzepte

Unterstützung verschiedener mobiler Geräte Plattformen: iOS, Android Touch-Bedienung kleines Display, flexibles Format Geringes Datenvolumen

Nachhaltigkeit Einsatz an der eigenen Universität (Plattform StudOn) Verfügbarkeit für andere ILIAS-Betreiber Grundlage für weitere Entwicklungen

Technische Überlegungen

Oberflächen-Reduktion Optimierung von HTML+CSS CSS-Gestaltung und -Test aufwändig

Native App-Entwicklung zu aufwändig gerätespezifisch (iOS, Android)

Nutzung eines Web App Frameworks Plattform-neutrale Entwicklung Verwendung von Standard-Elementen Konzentration aufs Wesentliche

Frameworks: Beispiele

jQuery mobile Open source Vielzahl unterstützter Plattformen Noch beta, aber verwendbar

PhoneGap Open source „Wrapper“ für Web Apps Erzeugt native App ermöglicht lokale Features benötigt vorhandene Web App

JQuery Mobile

Einfache Einbindung Minimierte CSS und JS-Dateien

Seitengestaltung per HTML Keine Programmierung Attribute bestimmen Elemente und Funktionen

Standard-Elemente Kopf- und Fußzeilen Buttons, Toolbars, Listen, Formulare Unter-Seiten, Dialoge

Flexible Plattform-Unterstützung Fallbacks für fehlende Features

JQuery mobile Browser Support

jquerymobile.com/gbs (6.9.2011)

JQuery mobile: Beispiel

Einbindung des Frameworks

.js

Template

{...}Template

{...}Template

{...}

.csscss js

html css js

www...

Normaler Request-Zyklus

?

Einbindung des Frameworks

.js

Template

{...}Template

{...}Template

{...}

.csscss js

html css js

www...

Skin-Anpassung: beschränkte Möglichkeiten

Einbindung des Frameworks

.js

Template

{...}Template

{...}Template

{...}

.csscss js

html css js

www...

Mobiles GUI: Programmieraufwand

GUI+

Einbindung des Frameworks

Transformation: flexibel, mittlerer Aufwand

.js.csscss js

+

.cssXSL

html css js

www...

Template

{...}Template

{...}Template

{...}

XSL-Transformation

Beliebige Umgestaltung einer HTML-Seite Inhalte entfernen Inhalte umgruppieren, umsortieren Neue Vorlagen einbinden

Beschränkt auf Ausgabe-Änderung Nur bereits ausgegebene Inhalte verfügbar Request-Zyklus bleibt unangetastet Abhängig vom erzeugten HTML-Code

Realisierung für ILIAS touch Neutraler SkinTransformer als Plugin Mobiler Skin mit XSL-Definitionen

XSL-Transformation: Beispiel

Titel und Metadaten werden kopiert Skripte und Styles werden ausgelassen Stattdessen wird jQuery mobile eingebunden

Beispiel: Schreibtisch konventionell

Beispiel: Schreibtisch mobil

Beispiel: Menüs als Unterseiten

Erfahrungen

2 Personenmonate Aufwand ca. 1 Monat für Transformer-Plugin ca. 1 Monat für mobilen Skin

Herausforderungen Kombination verschiedener Techniken

• ILIAS-Plugins, jQuery mobile, XSL Abbildung der komplexen Grund-Navigation

• Menü, Baum, Reiter, Unterpunkte, Blöcke Gestaltungsvarianten mit jQuery mobile

• müssten jeweils separat evaluiert werden

Vorteile Nach Einstieg schnelle Umsetzungen möglich

• Varianten können leicht erprobt werden Transformation bleibt an der Oberfläche

• kein tiefer Einstieg in die Programmierung nötig• Entwicklung / Fehlersuche auf HTML-Ausgabe beschränkt

Mobiler Skin der Hochschule Luzern

Separates GUI mit JQuery mobile Auf Performance / Datenreduktion optimiert Zusatzfunktionen (Karte) Kontakt: simon.moor@hslu.ch

Vergleich der Datenmengen (in KB)

Simon Mohr, Hochschule Luzern (www.ilias.de/docu/goto_docu_cat_2354.html)

Wrapping mit PhoneGap

SCORM-Export von Lernmodulen mit Testfragen (mit mobilem Skin)

Kompilierung des Exports mit PhoneGap

Native App zum Download und zur Offline-Bearbeitung

www.phonegap.com

Wrapping: Beispiel

Nutzung spezieller Smartphone-Features möglich

Online-Kommunikation per SOAP oder JSON

Kontakt: fs@studer-raimann.ch

Alle Ansätze sind prinzipiell kombinierbar!

Vielen Dank für Ihre Aufmerksamkeit!

fred.neumann@fim.uni-erlangen.dewww.fim.uni-erlangen.de