A Moodle megjelenésében a 2.7-es verzió óta kizérólagossá vált a reszponzív design támogatása. A hagyományos (statikus) desing-t továbbra is lehet használni (ha valaki ilyet készítene), de a reszponzív stílusok valósítják meg igazán az eszközfüggetlen működést. Akkor válasszunk/készítsünk reszponzív stílust saját Moodle szerverünkhöz! A bemutató a kezdeti lépések előkészítéséhez ad segítséget.

1. Már megint hogy nézel ki?
Betekintés
a
reszponzív
design
világába

2. Miről lesz szó?
• Egy kis Moodle történelem a stílusok tükrében
• Stíluskezelés a Moodle-ban
• Így volt régen
• Így van most
• Magad uram... – nem akarok kódolni
• Hogyan készítsünk saját stílust?
• No, akkor lássuk azt a CSS-t!
• Stílusok és utak
MoodleMoot 2016 – Óbudai Egyetem

3. Egy kis történelem

4. Egy kis történelem
• Moodle 1.x – hagyományos stílusok
• Moodle 2.0 – hagyományos (statikus) stílusok
• Megjelennek a reszponzív stílusok, de...
• Moodle 2.7 – nincs „vele adott” hagyományos
stílus
• A verzióváltásokat tessék komolyan venni.
MoodleMoot 2016 – Óbudai Egyetem

5. A MOODLE stíluskezelése
• Megjelenés
– Stílusok
• Stílusbeállítások
• Stílusválasztó
• Clean
• More
• ...
MoodleMoot 2016 – Óbudai Egyetem

6. Így volt régen

7. Így volt régen
Ami kellett:
• Layout
• Fonts
• Color
• Moz
• No és a pix könyvtárak
MoodleMoot 2016 – Óbudai Egyetem

9. Az öröklés rendje

10. Az öröklés rendje
• Alap stílusok
– base
– bootsrapbase
• Saját (választott) stílus/stílusok
• A modul stílusa
MoodleMoot 2016 – Óbudai Egyetem

11. Így van most

12. Így van most
• Alap stílusok – nem választható
– base
– bootstrapbase
– ezek nem választhatók
– moodle fissítéskor felülíródik
• Saját (választott) stílus/stílusok
– választhatók
– csak az adott stílus frissítésével íródik felül
• Modul stílusa
– moodle frissítéskor felülíródik

13. Nem akarok kódolni!

14. Használj sablont!
Amiket javasoljuk:
• Essential
• Aardvark
• Academy
• Adaptable
• Klass
• Elegance
MoodleMoot 2016 – Óbudai Egyetem

15. Használj sablont!
• Essential
• Aardvark
• Academy
• Adaptable
• Klass
• Elegance
• …
MoodleMoot 2016 – Óbudai Egyetem

16. Készítsünk saját stílust
MoodleMoot 2016 – Óbudai Egyetem

17. Web Developer Toolkit

18. Egyedi CSS
MoodleMoot 2016 – Óbudai Egyetem

19. Új elemek!
• Slider
• Marketing információk
• Social media
• Egyedi élőfej
• Egyedi élőláb
• Egyedi menü
MoodleMoot 2016 – Óbudai Egyetem

20. Mire kell gondolni?
• Layout
– general
– frontpage
– report
– embedded
– popup, default, login, …

21. Mi hol van szabályozva?
• Style
– admin
– block
– calendar
– core
– course
– dock
– editor
– filemanager
– grade
– message
– pagelayout
– question
• Style
– search
– tabs
– templates
– user
– Button
– form
– debug
– …

23. Hogyan fogjunk hozzá?
• Válassz kiinduló stílust!
• Nevezd át! Hajaj, de mennyi helyen…
– nyelvi állomány neve
– nyelvi állomány tartalma
– config.php
– version.php
– szkriptekben, ha kell
• Pix könyvtár testre szabása
MoodleMoot 2016 – Óbudai Egyetem

24. Köszönöm a figyelmet
Papp Gyula
papp.gyula@consedu.hu
MoodleMoot 2016