Entwicklung von ILIAS touch und Erfahrungen Dipl.-Inf. Fred Neumann Institut für Lern-Innovation Friedrich-Alexander-Unive...
Agenda <ul><li>Rahmenbedingungen und Ziele </li></ul><ul><li>Technische Lösungsmöglichkeiten </li></ul><ul><li>Gewählte Lö...
Institut für Lern-Innovation <ul><li>Einrichtung der Universität Erlangen-Nürnberg </li></ul><ul><ul><li>Lebenslanges Lern...
Ziele bei der Entwicklung von ILIAS touch <ul><li>Evaluierbarer Prototyp </li></ul><ul><ul><li>Schreibtisch, Foren, Tests,...
Technische Überlegungen <ul><li>Oberflächen-Reduktion </li></ul><ul><ul><li>Optimierung von HTML+CSS </li></ul></ul><ul><u...
Frameworks: Beispiele <ul><li>jQuery mobile </li></ul><ul><ul><li>Open source </li></ul></ul><ul><ul><li>Vielzahl unterstü...
JQuery Mobile <ul><li>Einfache Einbindung </li></ul><ul><ul><li>Minimierte CSS und JS-Dateien </li></ul></ul><ul><li>Seite...
JQuery mobile Browser Support jquerymobile.com/gbs (6.9.2011)
JQuery mobile: Beispiel
Einbindung des Frameworks Normaler Request-Zyklus .js Template {...} Template {...} Template {...} .css css js html css js...
Einbindung des Frameworks .js Template {...} Template {...} Template {...} .css css js html css js www... Skin-Anpassung: ...
Einbindung des Frameworks .js Template {...} Template {...} Template {...} .css css js html css js www... Mobiles GUI: Pro...
Einbindung des Frameworks Transformation: flexibel, mittlerer Aufwand .js .css css js + .css XSL html css js www... Templa...
XSL-Transformation <ul><li>Beliebige Umgestaltung einer HTML-Seite </li></ul><ul><ul><li>Inhalte entfernen </li></ul></ul>...
XSL-Transformation: Beispiel <ul><ul><li>Titel und Metadaten werden kopiert </li></ul></ul><ul><ul><li>Skripte und Styles ...
Beispiel: Schreibtisch konventionell
Beispiel: Schreibtisch mobil
Beispiel: Menüs als Unterseiten
Erfahrungen <ul><li>2 Personenmonate Aufwand </li></ul><ul><ul><li>ca. 1 Monat für Transformer-Plugin </li></ul></ul><ul><...
Mobiler Skin der Hochschule Luzern <ul><ul><li>Separates GUI mit JQuery mobile </li></ul></ul><ul><ul><li>Auf Performance ...
Vergleich der Datenmengen (in KB) Simon Mohr, Hochschule Luzern (www.ilias.de/docu/goto_docu_cat_2354.html)
Wrapping mit PhoneGap <ul><li>SCORM-Export von Lernmodulen mit Testfragen  (mit mobilem Skin) </li></ul><ul><li>Kompilieru...
Wrapping: Beispiel <ul><li>Nutzung spezieller Smartphone-Features möglich </li></ul><ul><li>Online-Kommunikation per SOAP ...
Vielen Dank für Ihre Aufmerksamkeit! [email_address] www.fim.uni-erlangen.de
Nächste SlideShare
Wird geladen in …5
×

Entwicklung von ILIAS touch und Erfahrungen

1.951 Aufrufe

Veröffentlicht am

Autor: F. Neumann

0 Kommentare
2 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

Keine Downloads
Aufrufe
Aufrufe insgesamt
1.951
Auf SlideShare
0
Aus Einbettungen
0
Anzahl an Einbettungen
1
Aktionen
Geteilt
0
Downloads
8
Kommentare
0
Gefällt mir
2
Einbettungen 0
Keine Einbettungen

Keine Notizen für die Folie

Entwicklung von ILIAS touch und Erfahrungen

  1. 1. Entwicklung von ILIAS touch und Erfahrungen Dipl.-Inf. Fred Neumann Institut für Lern-Innovation Friedrich-Alexander-Universität Erlangen-Nürnberg [email_address] www.fim.uni-erlangen.de 8. Fernausbildungskongress der Bundeswehr, Hamburg, 7. September 2011
  2. 2. Agenda <ul><li>Rahmenbedingungen und Ziele </li></ul><ul><li>Technische Lösungsmöglichkeiten </li></ul><ul><li>Gewählte Lösung und Umsetzung </li></ul><ul><li>Erfahrungen aus der Entwicklung </li></ul><ul><li>Alternative Ansätze / Projekte </li></ul>
  3. 3. Institut für Lern-Innovation <ul><li>Einrichtung der Universität Erlangen-Nürnberg </li></ul><ul><ul><li>Lebenslanges Lernen, Technologie-gestütztes Lernen </li></ul></ul><ul><ul><li>Ca. 20 MitarbeiterInnen, interdisziplinär </li></ul></ul><ul><ul><li>Nationale und europäische Forschungs-Projekte </li></ul></ul><ul><ul><li>Universitäts-interne und externe Dienstleistungen </li></ul></ul><ul><li>StudOn: LMS der Universität (ILIAS) </li></ul><ul><ul><li>Betrieb, Support, Beratung, Weiterentwicklung </li></ul></ul><ul><ul><li>Breit gestreute Nutzung </li></ul></ul><ul><ul><ul><li>Veranstaltungs-Organisation </li></ul></ul></ul><ul><ul><ul><li>Lerninhalte </li></ul></ul></ul><ul><ul><ul><li>Kommunikation und Kooperation </li></ul></ul></ul><ul><ul><ul><li>Selbst-Tests und E-Klausuren </li></ul></ul></ul>
  4. 4. Ziele bei der Entwicklung von ILIAS touch <ul><li>Evaluierbarer Prototyp </li></ul><ul><ul><li>Schreibtisch, Foren, Tests, Umfragen, Lerninhalte </li></ul></ul><ul><ul><li>Grundlegende Navigations-Konzepte </li></ul></ul><ul><li>Unterstützung verschiedener mobiler Geräte </li></ul><ul><ul><li>Plattformen: iOS, Android </li></ul></ul><ul><ul><li>Touch-Bedienung </li></ul></ul><ul><ul><li>kleines Display, flexibles Format </li></ul></ul><ul><ul><li>Geringes Datenvolumen </li></ul></ul><ul><li>Nachhaltigkeit </li></ul><ul><ul><li>Einsatz an der eigenen Universität (Plattform StudOn) </li></ul></ul><ul><ul><li>Verfügbarkeit für andere ILIAS-Betreiber </li></ul></ul><ul><ul><li>Grundlage für weitere Entwicklungen </li></ul></ul>
  5. 5. Technische Überlegungen <ul><li>Oberflächen-Reduktion </li></ul><ul><ul><li>Optimierung von HTML+CSS </li></ul></ul><ul><ul><li>CSS-Gestaltung und -Test aufwändig </li></ul></ul><ul><li>Native App-Entwicklung </li></ul><ul><ul><li>zu aufwändig </li></ul></ul><ul><ul><li>gerätespezifisch (iOS, Android) </li></ul></ul><ul><li>Nutzung eines Web App Frameworks </li></ul><ul><ul><li>Plattform-neutrale Entwicklung </li></ul></ul><ul><ul><li>Verwendung von Standard-Elementen </li></ul></ul><ul><ul><li>Konzentration aufs Wesentliche </li></ul></ul>
  6. 6. Frameworks: Beispiele <ul><li>jQuery mobile </li></ul><ul><ul><li>Open source </li></ul></ul><ul><ul><li>Vielzahl unterstützter Plattformen </li></ul></ul><ul><ul><li>Noch beta, aber verwendbar </li></ul></ul><ul><li>PhoneGap </li></ul><ul><ul><li>Open source </li></ul></ul><ul><ul><li>„ Wrapper“ für Web Apps </li></ul></ul><ul><ul><li>Erzeugt native App </li></ul></ul><ul><ul><li>ermöglicht lokale Features </li></ul></ul><ul><ul><li>benötigt vorhandene Web App </li></ul></ul>
  7. 7. JQuery Mobile <ul><li>Einfache Einbindung </li></ul><ul><ul><li>Minimierte CSS und JS-Dateien </li></ul></ul><ul><li>Seitengestaltung per HTML </li></ul><ul><ul><li>Keine Programmierung </li></ul></ul><ul><ul><li>Attribute bestimmen Elemente und Funktionen </li></ul></ul><ul><li>Standard-Elemente </li></ul><ul><ul><li>Kopf- und Fußzeilen </li></ul></ul><ul><ul><li>Buttons, Toolbars, Listen, Formulare </li></ul></ul><ul><ul><li>Unter-Seiten, Dialoge </li></ul></ul><ul><li>Flexible Plattform-Unterstützung </li></ul><ul><ul><li>Fallbacks für fehlende Features </li></ul></ul>
  8. 8. JQuery mobile Browser Support jquerymobile.com/gbs (6.9.2011)
  9. 9. JQuery mobile: Beispiel
  10. 10. Einbindung des Frameworks Normaler Request-Zyklus .js Template {...} Template {...} Template {...} .css css js html css js www... ?
  11. 11. Einbindung des Frameworks .js Template {...} Template {...} Template {...} .css css js html css js www... Skin-Anpassung: beschränkte Möglichkeiten
  12. 12. Einbindung des Frameworks .js Template {...} Template {...} Template {...} .css css js html css js www... Mobiles GUI: Programmieraufwand GUI +
  13. 13. Einbindung des Frameworks Transformation: flexibel, mittlerer Aufwand .js .css css js + .css XSL html css js www... Template {...} Template {...} Template {...}
  14. 14. XSL-Transformation <ul><li>Beliebige Umgestaltung einer HTML-Seite </li></ul><ul><ul><li>Inhalte entfernen </li></ul></ul><ul><ul><li>Inhalte umgruppieren, umsortieren </li></ul></ul><ul><ul><li>Neue Vorlagen einbinden </li></ul></ul><ul><li>Beschränkt auf Ausgabe-Änderung </li></ul><ul><ul><li>Nur bereits ausgegebene Inhalte verfügbar </li></ul></ul><ul><ul><li>Request-Zyklus bleibt unangetastet </li></ul></ul><ul><ul><li>Abhängig vom erzeugten HTML-Code </li></ul></ul><ul><li>Realisierung für ILIAS touch </li></ul><ul><ul><li>Neutraler SkinTransformer als Plugin </li></ul></ul><ul><ul><li>Mobiler Skin mit XSL-Definitionen </li></ul></ul>
  15. 15. XSL-Transformation: Beispiel <ul><ul><li>Titel und Metadaten werden kopiert </li></ul></ul><ul><ul><li>Skripte und Styles werden ausgelassen </li></ul></ul><ul><ul><li>Stattdessen wird jQuery mobile eingebunden </li></ul></ul>
  16. 16. Beispiel: Schreibtisch konventionell
  17. 17. Beispiel: Schreibtisch mobil
  18. 18. Beispiel: Menüs als Unterseiten
  19. 19. Erfahrungen <ul><li>2 Personenmonate Aufwand </li></ul><ul><ul><li>ca. 1 Monat für Transformer-Plugin </li></ul></ul><ul><ul><li>ca. 1 Monat für mobilen Skin </li></ul></ul><ul><li>Herausforderungen </li></ul><ul><ul><li>Kombination verschiedener Techniken </li></ul></ul><ul><ul><ul><li>ILIAS-Plugins, jQuery mobile, XSL </li></ul></ul></ul><ul><ul><li>Abbildung der komplexen Grund-Navigation </li></ul></ul><ul><ul><ul><li>Menü, Baum, Reiter, Unterpunkte, Blöcke </li></ul></ul></ul><ul><ul><li>Gestaltungsvarianten mit jQuery mobile </li></ul></ul><ul><ul><ul><li>müssten jeweils separat evaluiert werden </li></ul></ul></ul><ul><li>Vorteile </li></ul><ul><ul><li>Nach Einstieg schnelle Umsetzungen möglich </li></ul></ul><ul><ul><ul><li>Varianten können leicht erprobt werden </li></ul></ul></ul><ul><ul><li>Transformation bleibt an der Oberfläche </li></ul></ul><ul><ul><ul><li>kein tiefer Einstieg in die Programmierung nötig </li></ul></ul></ul><ul><ul><ul><li>Entwicklung / Fehlersuche auf HTML-Ausgabe beschränkt </li></ul></ul></ul>
  20. 20. Mobiler Skin der Hochschule Luzern <ul><ul><li>Separates GUI mit JQuery mobile </li></ul></ul><ul><ul><li>Auf Performance / Datenreduktion optimiert </li></ul></ul><ul><ul><li>Zusatzfunktionen (Karte) </li></ul></ul><ul><ul><li>Kontakt: simon.moor@hslu.ch </li></ul></ul>
  21. 21. Vergleich der Datenmengen (in KB) Simon Mohr, Hochschule Luzern (www.ilias.de/docu/goto_docu_cat_2354.html)
  22. 22. Wrapping mit PhoneGap <ul><li>SCORM-Export von Lernmodulen mit Testfragen (mit mobilem Skin) </li></ul><ul><li>Kompilierung des Exports mit PhoneGap </li></ul><ul><li>Native App zum Download und zur Offline-Bearbeitung </li></ul>www.phonegap.com
  23. 23. Wrapping: Beispiel <ul><li>Nutzung spezieller Smartphone-Features möglich </li></ul><ul><li>Online-Kommunikation per SOAP oder JSON </li></ul><ul><li>Kontakt: fs@studer-raimann.ch </li></ul>Alle Ansätze sind prinzipiell kombinierbar!
  24. 24. Vielen Dank für Ihre Aufmerksamkeit! [email_address] www.fim.uni-erlangen.de

×