SlideShare uma empresa Scribd logo
1 de 20
Baixar para ler offline
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
Warum Umgestalten?
 ●     Branding
 ●     Weniger Langeweile
 ●     Konkrete Bedürfnisse
       der Anwender
 ●     Vorschriften



19.04.13                               2
Konkretes Projekt
                ●   Zielgruppe:
                    Fernfahrer/innen
                ●   Arbeitssicherheit &
                    Gesundheit
                ●   Partner:
                    ●   IAG der DGUV
                    ●   BG Verkehr
                    ●   FernUni in Hagen
19.04.13
                    ●   Spedition Bode     3
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öße
19.04.13                                                                 4
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
19.04.13   6
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                                    7
19.04.13   8
Templates verändern
      ●    HTML-Fragmente
      ●    Variablen in geschweiften
           Klammen
      ●    If ..end in HTML-Kommentaren
      ●    Geschachtelt
      ●    Gesamtanzahl: 1305


19.04.13                                  9
Login
 ●     Init/tpl.login
           ●   Sehr viele Login-Methoden
 ●     Init/tpl.logout
 ●     Init/tpl.
       view_usr_agreement.html



19.04.13                                    10
Lernplattform selbst gestalten
 ●     Auswahl eines
       Zieldesign mit bereits
       bestehenden
       Stylesheets




19.04.13                                    11
Header und Menüstruktur
 ●     tpl.main_menu.html
 ●     tpl.main_menu_list_entries.html




19.04.13                                 12
Fußzeile
 ●     tpl.footer.html
 ●     Z.B. Permalink-menü entfernen
 ●     Eigene Copyrights hinzufügen




19.04.13                               13
CSS
 ●     delos.css:
       > 3100 Zeilen
 ●     Option 1: Verändern
 ●     Option 2: Alles Neu
           ●   Script für Gerüst




19.04.13                                 14
Analyse der HTML-Struktur
  ●        Starke Schachtelung
  ●        Webbrowser helfen
           ●   IE: Entwicklertools
           ●   Firefox: Firebug
           ●   Opera: Dragonfly




19.04.13                                       15
19.04.13   16
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
19.04.13   18
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                                                        19
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 Bode
19.04.13                                                                                                20

Mais conteúdo relacionado

Destaque

eLearning: Content
eLearning: ContenteLearning: Content
eLearning: ContentFrank Weber
 
#Educamp 2014: TED für Lehrer
#Educamp 2014: TED für Lehrer#Educamp 2014: TED für Lehrer
#Educamp 2014: TED für LehrerWolfgang Weicht
 
Lean Education – Iterationen zur Zukunft der Bildung
Lean Education – Iterationen zur Zukunft der BildungLean Education – Iterationen zur Zukunft der Bildung
Lean Education – Iterationen zur Zukunft der BildungWolfgang Weicht
 
eLearning-Geschichte-Begriffe-Auspraegungen
eLearning-Geschichte-Begriffe-AuspraegungeneLearning-Geschichte-Begriffe-Auspraegungen
eLearning-Geschichte-Begriffe-AuspraegungenFrank Weber
 
Barrierefreies E-Learning
Barrierefreies E-LearningBarrierefreies E-Learning
Barrierefreies E-Learninge-teaching.org
 
Manifest für Schule 2.0 (V1.4)
Manifest für Schule 2.0 (V1.4)Manifest für Schule 2.0 (V1.4)
Manifest für Schule 2.0 (V1.4)Wolfgang Weicht
 
Barrierefreiheit von synchronem kollaborativem Lernen
Barrierefreiheit von synchronem kollaborativem LernenBarrierefreiheit von synchronem kollaborativem Lernen
Barrierefreiheit von synchronem kollaborativem Lernene-teaching.org
 

Destaque (7)

eLearning: Content
eLearning: ContenteLearning: Content
eLearning: Content
 
#Educamp 2014: TED für Lehrer
#Educamp 2014: TED für Lehrer#Educamp 2014: TED für Lehrer
#Educamp 2014: TED für Lehrer
 
Lean Education – Iterationen zur Zukunft der Bildung
Lean Education – Iterationen zur Zukunft der BildungLean Education – Iterationen zur Zukunft der Bildung
Lean Education – Iterationen zur Zukunft der Bildung
 
eLearning-Geschichte-Begriffe-Auspraegungen
eLearning-Geschichte-Begriffe-AuspraegungeneLearning-Geschichte-Begriffe-Auspraegungen
eLearning-Geschichte-Begriffe-Auspraegungen
 
Barrierefreies E-Learning
Barrierefreies E-LearningBarrierefreies E-Learning
Barrierefreies E-Learning
 
Manifest für Schule 2.0 (V1.4)
Manifest für Schule 2.0 (V1.4)Manifest für Schule 2.0 (V1.4)
Manifest für Schule 2.0 (V1.4)
 
Barrierefreiheit von synchronem kollaborativem Lernen
Barrierefreiheit von synchronem kollaborativem LernenBarrierefreiheit von synchronem kollaborativem Lernen
Barrierefreiheit von synchronem kollaborativem Lernen
 

Semelhante a Gestaltung von Ilias anpassen

3D - Spiel mit der Technik, Tekom 2016
3D - Spiel mit der Technik, Tekom 20163D - Spiel mit der Technik, Tekom 2016
3D - Spiel mit der Technik, Tekom 2016Robert Siegel
 
Outsourcing bei komplexen Web-Projekten
Outsourcing bei komplexen Web-ProjektenOutsourcing bei komplexen Web-Projekten
Outsourcing bei komplexen Web-ProjektenBirger Friedrichs
 
Open Data oder Commercial Data im DMA – ein Widerspruch?
Open Data oder Commercial Data im DMA – ein Widerspruch?Open Data oder Commercial Data im DMA – ein Widerspruch?
Open Data oder Commercial Data im DMA – ein Widerspruch?Data Market Austria
 
Dnug sit-dlr-mobile-portal-juni-2012
Dnug sit-dlr-mobile-portal-juni-2012Dnug sit-dlr-mobile-portal-juni-2012
Dnug sit-dlr-mobile-portal-juni-2012Heiko Voigt
 
1. intranda Goobi Tag: Schulungen bei intranda
1. intranda Goobi Tag: Schulungen bei intranda1. intranda Goobi Tag: Schulungen bei intranda
1. intranda Goobi Tag: Schulungen bei intrandaintranda GmbH
 
Fine tuning Lotus Script (german)
Fine tuning Lotus Script (german)Fine tuning Lotus Script (german)
Fine tuning Lotus Script (german)dominion
 
Interaction & Information Design: User first: Mit klarem Fokus eine ambitiöse...
Interaction & Information Design: User first: Mit klarem Fokus eine ambitiöse...Interaction & Information Design: User first: Mit klarem Fokus eine ambitiöse...
Interaction & Information Design: User first: Mit klarem Fokus eine ambitiöse...ONE Schweiz
 
Groupware Ce Bit2007 Heise Forum Cb Web
Groupware Ce Bit2007 Heise Forum Cb WebGroupware Ce Bit2007 Heise Forum Cb Web
Groupware Ce Bit2007 Heise Forum Cb Webbofh42
 
Aspekte Moderner Frontendentwicklung
Aspekte Moderner FrontendentwicklungAspekte Moderner Frontendentwicklung
Aspekte Moderner FrontendentwicklungJens Grochtdreis
 
Best Practices: Intranet Nationale Suisse
Best Practices: Intranet Nationale SuisseBest Practices: Intranet Nationale Suisse
Best Practices: Intranet Nationale SuisseKongress Media
 
E-Learning mit Moodle
E-Learning mit MoodleE-Learning mit Moodle
E-Learning mit MoodleGFU Cyrus AG
 
Die Internationale Suchmaschinenoptimierung
Die Internationale SuchmaschinenoptimierungDie Internationale Suchmaschinenoptimierung
Die Internationale Suchmaschinenoptimierungavenit AG
 
Rasterpunkt GmbH: Schulungskalender Output Management Solutions
Rasterpunkt GmbH: Schulungskalender Output Management Solutions Rasterpunkt GmbH: Schulungskalender Output Management Solutions
Rasterpunkt GmbH: Schulungskalender Output Management Solutions RasterpunktGmbH
 
2022-12_RPA-ChapterEvent_WhatsNew
2022-12_RPA-ChapterEvent_WhatsNew2022-12_RPA-ChapterEvent_WhatsNew
2022-12_RPA-ChapterEvent_WhatsNewFotiosKaramitsos
 
Geomapping am Bahnhof
Geomapping am BahnhofGeomapping am Bahnhof
Geomapping am Bahnhofbrandmanager
 
Welche Website für welches Unternehmen? Und welches CMS für welche Anforderun...
Welche Website für welches Unternehmen? Und welches CMS für welche Anforderun...Welche Website für welches Unternehmen? Und welches CMS für welche Anforderun...
Welche Website für welches Unternehmen? Und welches CMS für welche Anforderun...Digicomp Academy AG
 

Semelhante a Gestaltung von Ilias anpassen (20)

3D - Spiel mit der Technik, Tekom 2016
3D - Spiel mit der Technik, Tekom 20163D - Spiel mit der Technik, Tekom 2016
3D - Spiel mit der Technik, Tekom 2016
 
Outsourcing bei komplexen Web-Projekten
Outsourcing bei komplexen Web-ProjektenOutsourcing bei komplexen Web-Projekten
Outsourcing bei komplexen Web-Projekten
 
2017 06-13 odp meet up dma
2017 06-13 odp meet up dma2017 06-13 odp meet up dma
2017 06-13 odp meet up dma
 
Open Data oder Commercial Data im DMA – ein Widerspruch?
Open Data oder Commercial Data im DMA – ein Widerspruch?Open Data oder Commercial Data im DMA – ein Widerspruch?
Open Data oder Commercial Data im DMA – ein Widerspruch?
 
Dnug sit-dlr-mobile-portal-juni-2012
Dnug sit-dlr-mobile-portal-juni-2012Dnug sit-dlr-mobile-portal-juni-2012
Dnug sit-dlr-mobile-portal-juni-2012
 
1. intranda Goobi Tag: Schulungen bei intranda
1. intranda Goobi Tag: Schulungen bei intranda1. intranda Goobi Tag: Schulungen bei intranda
1. intranda Goobi Tag: Schulungen bei intranda
 
Fine tuning Lotus Script (german)
Fine tuning Lotus Script (german)Fine tuning Lotus Script (german)
Fine tuning Lotus Script (german)
 
Interaction & Information Design: User first: Mit klarem Fokus eine ambitiöse...
Interaction & Information Design: User first: Mit klarem Fokus eine ambitiöse...Interaction & Information Design: User first: Mit klarem Fokus eine ambitiöse...
Interaction & Information Design: User first: Mit klarem Fokus eine ambitiöse...
 
ENP_ONB_infday_GMuehlberger
ENP_ONB_infday_GMuehlbergerENP_ONB_infday_GMuehlberger
ENP_ONB_infday_GMuehlberger
 
Groupware Ce Bit2007 Heise Forum Cb Web
Groupware Ce Bit2007 Heise Forum Cb WebGroupware Ce Bit2007 Heise Forum Cb Web
Groupware Ce Bit2007 Heise Forum Cb Web
 
Aspekte Moderner Frontendentwicklung
Aspekte Moderner FrontendentwicklungAspekte Moderner Frontendentwicklung
Aspekte Moderner Frontendentwicklung
 
Best Practices: Intranet Nationale Suisse
Best Practices: Intranet Nationale SuisseBest Practices: Intranet Nationale Suisse
Best Practices: Intranet Nationale Suisse
 
E-Learning mit Moodle
E-Learning mit MoodleE-Learning mit Moodle
E-Learning mit Moodle
 
Die Internationale Suchmaschinenoptimierung
Die Internationale SuchmaschinenoptimierungDie Internationale Suchmaschinenoptimierung
Die Internationale Suchmaschinenoptimierung
 
Rasterpunkt GmbH: Schulungskalender Output Management Solutions
Rasterpunkt GmbH: Schulungskalender Output Management Solutions Rasterpunkt GmbH: Schulungskalender Output Management Solutions
Rasterpunkt GmbH: Schulungskalender Output Management Solutions
 
2022-12_RPA-ChapterEvent_WhatsNew
2022-12_RPA-ChapterEvent_WhatsNew2022-12_RPA-ChapterEvent_WhatsNew
2022-12_RPA-ChapterEvent_WhatsNew
 
Was ist Open Data?
Was ist Open Data?Was ist Open Data?
Was ist Open Data?
 
Herausforderungen internationaler Intranets
Herausforderungen internationaler Intranets Herausforderungen internationaler Intranets
Herausforderungen internationaler Intranets
 
Geomapping am Bahnhof
Geomapping am BahnhofGeomapping am Bahnhof
Geomapping am Bahnhof
 
Welche Website für welches Unternehmen? Und welches CMS für welche Anforderun...
Welche Website für welches Unternehmen? Und welches CMS für welche Anforderun...Welche Website für welches Unternehmen? Und welches CMS für welche Anforderun...
Welche Website für welches Unternehmen? Und welches CMS für welche Anforderun...
 

Gestaltung von Ilias anpassen

  • 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. Warum Umgestalten? ● Branding ● Weniger Langeweile ● Konkrete Bedürfnisse der Anwender ● Vorschriften 19.04.13 2
  • 3. Konkretes Projekt ● Zielgruppe: Fernfahrer/innen ● Arbeitssicherheit & Gesundheit ● Partner: ● IAG der DGUV ● BG Verkehr ● FernUni in Hagen 19.04.13 ● Spedition Bode 3
  • 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öße 19.04.13 4
  • 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
  • 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 7
  • 9. Templates verändern ● HTML-Fragmente ● Variablen in geschweiften Klammen ● If ..end in HTML-Kommentaren ● Geschachtelt ● Gesamtanzahl: 1305 19.04.13 9
  • 10. Login ● Init/tpl.login ● Sehr viele Login-Methoden ● Init/tpl.logout ● Init/tpl. view_usr_agreement.html 19.04.13 10
  • 11. Lernplattform selbst gestalten ● Auswahl eines Zieldesign mit bereits bestehenden Stylesheets 19.04.13 11
  • 12. Header und Menüstruktur ● tpl.main_menu.html ● tpl.main_menu_list_entries.html 19.04.13 12
  • 13. Fußzeile ● tpl.footer.html ● Z.B. Permalink-menü entfernen ● Eigene Copyrights hinzufügen 19.04.13 13
  • 14. CSS ● delos.css: > 3100 Zeilen ● Option 1: Verändern ● Option 2: Alles Neu ● Script für Gerüst 19.04.13 14
  • 15. Analyse der HTML-Struktur ● Starke Schachtelung ● Webbrowser helfen ● IE: Entwicklertools ● Firefox: Firebug ● Opera: Dragonfly 19.04.13 15
  • 16. 19.04.13 16
  • 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. 19.04.13 18
  • 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 19
  • 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 Bode 19.04.13 20