Entwicklung von ILIAS touchund Erfahrungen
-
Upload
wirtschaftspaedagogik-personalentwicklung-fau -
Category
Documents
-
view
1.712 -
download
3
description
Transcript of Entwicklung von ILIAS touchund Erfahrungen
![Page 1: Entwicklung von ILIAS touchund Erfahrungen](https://reader035.fdokument.com/reader035/viewer/2022062313/557c063ad8b42ad1658b46bf/html5/thumbnails/1.jpg)
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
![Page 2: Entwicklung von ILIAS touchund Erfahrungen](https://reader035.fdokument.com/reader035/viewer/2022062313/557c063ad8b42ad1658b46bf/html5/thumbnails/2.jpg)
Agenda
Rahmenbedingungen und Ziele
Technische Lösungsmöglichkeiten
Gewählte Lösung und Umsetzung
Erfahrungen aus der Entwicklung
Alternative Ansätze / Projekte
![Page 3: Entwicklung von ILIAS touchund Erfahrungen](https://reader035.fdokument.com/reader035/viewer/2022062313/557c063ad8b42ad1658b46bf/html5/thumbnails/3.jpg)
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
![Page 4: Entwicklung von ILIAS touchund Erfahrungen](https://reader035.fdokument.com/reader035/viewer/2022062313/557c063ad8b42ad1658b46bf/html5/thumbnails/4.jpg)
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
![Page 5: Entwicklung von ILIAS touchund Erfahrungen](https://reader035.fdokument.com/reader035/viewer/2022062313/557c063ad8b42ad1658b46bf/html5/thumbnails/5.jpg)
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
![Page 6: Entwicklung von ILIAS touchund Erfahrungen](https://reader035.fdokument.com/reader035/viewer/2022062313/557c063ad8b42ad1658b46bf/html5/thumbnails/6.jpg)
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
![Page 7: Entwicklung von ILIAS touchund Erfahrungen](https://reader035.fdokument.com/reader035/viewer/2022062313/557c063ad8b42ad1658b46bf/html5/thumbnails/7.jpg)
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
![Page 8: Entwicklung von ILIAS touchund Erfahrungen](https://reader035.fdokument.com/reader035/viewer/2022062313/557c063ad8b42ad1658b46bf/html5/thumbnails/8.jpg)
JQuery mobile Browser Support
jquerymobile.com/gbs (6.9.2011)
![Page 9: Entwicklung von ILIAS touchund Erfahrungen](https://reader035.fdokument.com/reader035/viewer/2022062313/557c063ad8b42ad1658b46bf/html5/thumbnails/9.jpg)
JQuery mobile: Beispiel
![Page 10: Entwicklung von ILIAS touchund Erfahrungen](https://reader035.fdokument.com/reader035/viewer/2022062313/557c063ad8b42ad1658b46bf/html5/thumbnails/10.jpg)
Einbindung des Frameworks
.js
Template
{...}Template
{...}Template
{...}
.csscss js
html css js
www...
Normaler Request-Zyklus
?
![Page 11: Entwicklung von ILIAS touchund Erfahrungen](https://reader035.fdokument.com/reader035/viewer/2022062313/557c063ad8b42ad1658b46bf/html5/thumbnails/11.jpg)
Einbindung des Frameworks
.js
Template
{...}Template
{...}Template
{...}
.csscss js
html css js
www...
Skin-Anpassung: beschränkte Möglichkeiten
![Page 12: Entwicklung von ILIAS touchund Erfahrungen](https://reader035.fdokument.com/reader035/viewer/2022062313/557c063ad8b42ad1658b46bf/html5/thumbnails/12.jpg)
Einbindung des Frameworks
.js
Template
{...}Template
{...}Template
{...}
.csscss js
html css js
www...
Mobiles GUI: Programmieraufwand
GUI+
![Page 13: Entwicklung von ILIAS touchund Erfahrungen](https://reader035.fdokument.com/reader035/viewer/2022062313/557c063ad8b42ad1658b46bf/html5/thumbnails/13.jpg)
Einbindung des Frameworks
Transformation: flexibel, mittlerer Aufwand
.js.csscss js
+
.cssXSL
html css js
www...
Template
{...}Template
{...}Template
{...}
![Page 14: Entwicklung von ILIAS touchund Erfahrungen](https://reader035.fdokument.com/reader035/viewer/2022062313/557c063ad8b42ad1658b46bf/html5/thumbnails/14.jpg)
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
![Page 15: Entwicklung von ILIAS touchund Erfahrungen](https://reader035.fdokument.com/reader035/viewer/2022062313/557c063ad8b42ad1658b46bf/html5/thumbnails/15.jpg)
XSL-Transformation: Beispiel
Titel und Metadaten werden kopiert Skripte und Styles werden ausgelassen Stattdessen wird jQuery mobile eingebunden
![Page 16: Entwicklung von ILIAS touchund Erfahrungen](https://reader035.fdokument.com/reader035/viewer/2022062313/557c063ad8b42ad1658b46bf/html5/thumbnails/16.jpg)
Beispiel: Schreibtisch konventionell
![Page 17: Entwicklung von ILIAS touchund Erfahrungen](https://reader035.fdokument.com/reader035/viewer/2022062313/557c063ad8b42ad1658b46bf/html5/thumbnails/17.jpg)
Beispiel: Schreibtisch mobil
![Page 18: Entwicklung von ILIAS touchund Erfahrungen](https://reader035.fdokument.com/reader035/viewer/2022062313/557c063ad8b42ad1658b46bf/html5/thumbnails/18.jpg)
Beispiel: Menüs als Unterseiten
![Page 19: Entwicklung von ILIAS touchund Erfahrungen](https://reader035.fdokument.com/reader035/viewer/2022062313/557c063ad8b42ad1658b46bf/html5/thumbnails/19.jpg)
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
![Page 20: Entwicklung von ILIAS touchund Erfahrungen](https://reader035.fdokument.com/reader035/viewer/2022062313/557c063ad8b42ad1658b46bf/html5/thumbnails/20.jpg)
Mobiler Skin der Hochschule Luzern
Separates GUI mit JQuery mobile Auf Performance / Datenreduktion optimiert Zusatzfunktionen (Karte) Kontakt: [email protected]
![Page 21: Entwicklung von ILIAS touchund Erfahrungen](https://reader035.fdokument.com/reader035/viewer/2022062313/557c063ad8b42ad1658b46bf/html5/thumbnails/21.jpg)
Vergleich der Datenmengen (in KB)
Simon Mohr, Hochschule Luzern (www.ilias.de/docu/goto_docu_cat_2354.html)
![Page 22: Entwicklung von ILIAS touchund Erfahrungen](https://reader035.fdokument.com/reader035/viewer/2022062313/557c063ad8b42ad1658b46bf/html5/thumbnails/22.jpg)
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
![Page 23: Entwicklung von ILIAS touchund Erfahrungen](https://reader035.fdokument.com/reader035/viewer/2022062313/557c063ad8b42ad1658b46bf/html5/thumbnails/23.jpg)
Wrapping: Beispiel
Nutzung spezieller Smartphone-Features möglich
Online-Kommunikation per SOAP oder JSON
Kontakt: [email protected]
Alle Ansätze sind prinzipiell kombinierbar!