Embed Size (px)
DESCRIPTION
Autor: F. Neumann
Citation preview
Entwicklung von ILIAS touchund Erfahrungen
Dipl.-Inf. Fred Neumann
Institut für Lern-InnovationFriedrich-Alexander-Universität Erlangen-Nürnberg
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: [email protected]
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: [email protected]
Alle Ansätze sind prinzipiell kombinierbar!
