Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
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

2.047 Aufrufe

Veröffentlicht am

Autor: F. Neumann

  • Als Erste(r) kommentieren

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

×