Gestaltung von Ilias anpassen              Am Beispiel einer              Lernplattform für              Fernfahrer/innen ...
Warum Umgestalten? ●     Branding ●     Weniger Langeweile ●     Konkrete Bedürfnisse       der Anwender ●     Vorschrifte...
Konkretes Projekt                ●   Zielgruppe:                    Fernfahrer/innen                ●   Arbeitssicherheit ...
Unsere Bedürfnisse ●     Gerät: Netbook                    ●   Nutzung           ●   Bildschirm 1024x600           ●   Ger...
Ilias Inhaltserzeugung ●     Der Ilias-Kern holt Inhalte aus der Datenbank ●     Das Layout der HTML-Seiten wird mit Hilfe...
19.04.13   6
Was ist ein Skin? ●     Bilder, CSS-Stilvorlagen ●     Gegebenenfalls auch Templates ●     Kann auch Funktionalität veränd...
19.04.13   8
Templates verändern      ●    HTML-Fragmente      ●    Variablen in geschweiften           Klammen      ●    If ..end in H...
Login ●     Init/tpl.login           ●   Sehr viele Login-Methoden ●     Init/tpl.logout ●     Init/tpl.       view_usr_ag...
Lernplattform selbst gestalten ●     Auswahl eines       Zieldesign mit bereits       bestehenden       Stylesheets19.04.1...
Header und Menüstruktur ●     tpl.main_menu.html ●     tpl.main_menu_list_entries.html19.04.13                            ...
Fußzeile ●     tpl.footer.html ●     Z.B. Permalink-menü entfernen ●     Eigene Copyrights hinzufügen19.04.13             ...
CSS ●     delos.css:       > 3100 Zeilen ●     Option 1: Verändern ●     Option 2: Alles Neu           ●   Script für Gerü...
Analyse der HTML-Struktur  ●        Starke Schachtelung  ●        Webbrowser helfen           ●   IE: Entwicklertools     ...
19.04.13   16
CSS Preprocessor: less                     @textwhite: #ffffff; ●     Konstanten    @tabcolor: #eeeeee;                   ...
19.04.13   18
Ergebnis ●     Kräftigere Kontraste ●     Bessere Lesbarkeit ●     Vergrößerte Schaltflächen vereinfachen       Bedienung ...
Weitere Informationen              www.handylearn-projects.de/projekt-fernfahrer.html                                     ...
Nächste SlideShare
Wird geladen in …5
×

Gestaltung von Ilias anpassen

2.908 Aufrufe

Veröffentlicht am

Wir haben das Lernmangementsystem Ilias umgestaltet. Kräftigere Farben,
größere Schrift, klarere Navigation. Die Lernplattform kann so besser auf Netbooks, Tablet-PCs oder iPads genutzt werden. Der Vortrag behandelt die Inhalteerzeugung von Ilias, zeigt unser Vorgehen und unsere Ergebnisse.

Wir haben Ilias im Rahmen eines Forschungsprojektes für Mobile Learning eingesetzt, bei dem wir Fernfahrer mit Themen zu Gesundheitsvorsorge und Arbeitsschutz weitergebildet haben. Das Vorhaben wurde mit Mitteln des Bundesministeriums für Bildung und Forschung
und aus dem Europäischen Sozialfonds der Europäischen Union gefördert.

Veröffentlicht in: Bildung
0 Kommentare
1 Gefällt mir
Statistik
Notizen
  • Als Erste(r) kommentieren

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

Keine Notizen für die Folie

Gestaltung von Ilias anpassen

  1. 1. Gestaltung von Ilias anpassen Am Beispiel einer Lernplattform für Fernfahrer/innen Das Vorhaben wurde mit Mitteln des Bundesministeriums für Bildung und Forschung und aus dem Euröpäischen Sozialfonds der Europäischen Union gefördert
  2. 2. Warum Umgestalten? ● Branding ● Weniger Langeweile ● Konkrete Bedürfnisse der Anwender ● Vorschriften19.04.13 2
  3. 3. Konkretes Projekt ● Zielgruppe: Fernfahrer/innen ● Arbeitssicherheit & Gesundheit ● Partner: ● IAG der DGUV ● BG Verkehr ● FernUni in Hagen19.04.13 ● Spedition Bode 3
  4. 4. Unsere Bedürfnisse ● Gerät: Netbook ● Nutzung ● Bildschirm 1024x600 ● Geringe Vorkenntnisse ● Touchpad / Touchscreen ● Seltene Nutzung ● Augen der Anwender ● Didaktik ● Auch für Generation 40+ ● Inhalte mehr in den ● Nach einen Arbeitstag Vordergrund ● Arbeitsvorschriften für Schriftgröße19.04.13 4
  5. 5. Ilias Inhaltserzeugung ● Der Ilias-Kern holt Inhalte aus der Datenbank ● Das Layout der HTML-Seiten wird mit Hilfe von Templates erzeugt ● Bilder und Stylesheets werden so wie sie sind referenziert.19.04.13 5
  6. 6. 19.04.13 6
  7. 7. Was ist ein Skin? ● Bilder, CSS-Stilvorlagen ● Gegebenenfalls auch Templates ● Kann auch Funktionalität verändern ● Kann pro Nutzer eingestellt werden ● Update-freundlich19.04.13 7
  8. 8. 19.04.13 8
  9. 9. Templates verändern ● HTML-Fragmente ● Variablen in geschweiften Klammen ● If ..end in HTML-Kommentaren ● Geschachtelt ● Gesamtanzahl: 130519.04.13 9
  10. 10. Login ● Init/tpl.login ● Sehr viele Login-Methoden ● Init/tpl.logout ● Init/tpl. view_usr_agreement.html19.04.13 10
  11. 11. Lernplattform selbst gestalten ● Auswahl eines Zieldesign mit bereits bestehenden Stylesheets19.04.13 11
  12. 12. Header und Menüstruktur ● tpl.main_menu.html ● tpl.main_menu_list_entries.html19.04.13 12
  13. 13. Fußzeile ● tpl.footer.html ● Z.B. Permalink-menü entfernen ● Eigene Copyrights hinzufügen19.04.13 13
  14. 14. CSS ● delos.css: > 3100 Zeilen ● Option 1: Verändern ● Option 2: Alles Neu ● Script für Gerüst19.04.13 14
  15. 15. Analyse der HTML-Struktur ● Starke Schachtelung ● Webbrowser helfen ● IE: Entwicklertools ● Firefox: Firebug ● Opera: Dragonfly19.04.13 15
  16. 16. 19.04.13 16
  17. 17. CSS Preprocessor: less @textwhite: #ffffff; ● Konstanten @tabcolor: #eeeeee; @highlightyellow: #FFFFD9; ● Funktionen .rounded(@radius: 4px) { border-radius: @radius; ● Kommentare -moz-border-radius: @radius; -webkit-border-radius: @radius; } div.ilMainMenu{ .toprounded(6px); } /* Kleine Blöcke: Überschrift */ td.ilBlockHeader{ background-color: @darkred; color: @textwhite; }19.04.13 17
  18. 18. 19.04.13 18
  19. 19. Ergebnis ● Kräftigere Kontraste ● Bessere Lesbarkeit ● Vergrößerte Schaltflächen vereinfachen Bedienung gerade mit Touchpad ● Dank Reduktion weniger Ablenkung www.handylearn-projects.de/projekt-fernfahrer.html19.04.13 19
  20. 20. Weitere Informationen www.handylearn-projects.de/projekt-fernfahrer.html Danke an: Impressum: Die Mitarbeiter und Mitarbeiterinnen des Handylearn Projects H2H e.K. Lehrgebiets Bildungstheorie und Medienpädagogik Große Brunnenstr. 105 im Institut für Bildungswissenschaft 22763 Hamburg und Medienforschung der Fernuniversität in Hagen. Geschäftsführer: Karsten Meier Die Mitarbeiter und Mitarbeiterinnen des Telefon: 040 / 3990 6610 Institut für Arbeit und Gesundheit (IAG) Handelsregister: der deutschen gesetzlichen Unfallversicherung (DGUV) Amtsgericht Hamburg HRA 102483 Die Mitarbeiter und Mitarbeiterinnen und insbesondere auch die Fahrer der Spedition Bode19.04.13 20

×