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

19.04.13 2

Warum Umgestalten?

● Branding● Weniger Langeweile ● Konkrete Bedürfnisse

der Anwender● Vorschriften

19.04.13 3

Konkretes Projekt● Zielgruppe:

Fernfahrer/innen● Arbeitssicherheit &

Gesundheit● Partner:

● IAG der DGUV● BG Verkehr● FernUni in Hagen● Spedition Bode

19.04.13 4

Unsere Bedürfnisse

● Gerät: Netbook● Bildschirm 1024x600● Touchpad / Touchscreen

● Augen der Anwender● Auch für Generation 40+● Nach einen Arbeitstag● Arbeitsvorschriften für

Schriftgröße

● Nutzung● Geringe Vorkenntnisse● Seltene Nutzung

● Didaktik● Inhalte mehr in den

Vordergrund

19.04.13 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 6

19.04.13 7

Was ist ein Skin?

● Bilder, CSS-Stilvorlagen● Gegebenenfalls auch Templates● Kann auch Funktionalität verändern● Kann pro Nutzer eingestellt werden● Update-freundlich

19.04.13 8

19.04.13 9

Templates verändern

● HTML-Fragmente● Variablen in geschweiften

Klammen● If ..end in HTML-Kommentaren● Geschachtelt● Gesamtanzahl: 1305

19.04.13 10

Login

● Init/tpl.login● Sehr viele Login-Methoden

● Init/tpl.logout● Init/tpl.

view_usr_agreement.html

19.04.13 11

Lernplattform selbst gestalten

● Auswahl eines Zieldesign mit bereits bestehenden Stylesheets

19.04.13 12

Header und Menüstruktur

● tpl.main_menu.html● tpl.main_menu_list_entries.html

19.04.13 13

Fußzeile

● tpl.footer.html● Z.B. Permalink-menü entfernen● Eigene Copyrights hinzufügen

19.04.13 14

CSS

● delos.css: > 3100 Zeilen

● Option 1: Verändern● Option 2: Alles Neu

● Script für Gerüst

19.04.13 15

Analyse der HTML-Struktur

● Starke Schachtelung● Webbrowser helfen

● IE: Entwicklertools● Firefox: Firebug● Opera: Dragonfly

19.04.13 16

19.04.13 17

CSS Preprocessor: less

● Konstanten● Funktionen● Kommentare

@textwhite: #ffffff;@tabcolor: #eeeeee;@highlightyellow: #FFFFD9;

.rounded(@radius: 4px) { border-radius: @radius; -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 18

19.04.13 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.html

19.04.13 20

Weitere Informationenwww.handylearn-projects.de/projekt-fernfahrer.html

Impressum:

Handylearn Projects H2H e.K.Große Brunnenstr. 105 22763 Hamburg

Geschäftsführer: Karsten MeierTelefon: 040 / 3990 6610Handelsregister: Amtsgericht Hamburg HRA 102483

Danke an:

Die Mitarbeiter und Mitarbeiterinnen des Lehrgebiets Bildungstheorie und Medienpädagogik im Institut für Bildungswissenschaft und Medienforschung der Fernuniversität in Hagen.

Die Mitarbeiter und Mitarbeiterinnen desInstitut für Arbeit und Gesundheit (IAG) der deutschen gesetzlichen Unfallversicherung (DGUV)

Die Mitarbeiter und Mitarbeiterinnen undinsbesondere auch die Fahrer der Spedition Bode