izrada nastavnih materijala korištenjem modernih …...moodle danas (teme) •moodle 2.0 –potpuno...
TRANSCRIPT
![Page 1: Izrada nastavnih materijala korištenjem modernih …...Moodle danas (teme) •Moodle 2.0 –potpuno redizajnirane sustav za teme •Moodle 2.5 –Clean tema (bazirana na Bootstrap-u)](https://reader033.vdocuments.net/reader033/viewer/2022050117/5f4e18dcd7882657072c849e/html5/thumbnails/1.jpg)
Izrada nastavnih materijala korištenjem modernih alata za uređivanje i prikaz web
sadržaja
Darko [email protected]
MoodleMoot, Srce, Zagreb, 16.06.2015
![Page 2: Izrada nastavnih materijala korištenjem modernih …...Moodle danas (teme) •Moodle 2.0 –potpuno redizajnirane sustav za teme •Moodle 2.5 –Clean tema (bazirana na Bootstrap-u)](https://reader033.vdocuments.net/reader033/viewer/2022050117/5f4e18dcd7882657072c849e/html5/thumbnails/2.jpg)
Moodle 2008
![Page 3: Izrada nastavnih materijala korištenjem modernih …...Moodle danas (teme) •Moodle 2.0 –potpuno redizajnirane sustav za teme •Moodle 2.5 –Clean tema (bazirana na Bootstrap-u)](https://reader033.vdocuments.net/reader033/viewer/2022050117/5f4e18dcd7882657072c849e/html5/thumbnails/3.jpg)
Moodle 2008
![Page 4: Izrada nastavnih materijala korištenjem modernih …...Moodle danas (teme) •Moodle 2.0 –potpuno redizajnirane sustav za teme •Moodle 2.5 –Clean tema (bazirana na Bootstrap-u)](https://reader033.vdocuments.net/reader033/viewer/2022050117/5f4e18dcd7882657072c849e/html5/thumbnails/4.jpg)
Moodle 2015
![Page 5: Izrada nastavnih materijala korištenjem modernih …...Moodle danas (teme) •Moodle 2.0 –potpuno redizajnirane sustav za teme •Moodle 2.5 –Clean tema (bazirana na Bootstrap-u)](https://reader033.vdocuments.net/reader033/viewer/2022050117/5f4e18dcd7882657072c849e/html5/thumbnails/5.jpg)
Tipični e-kolegij
• Uvod
Forum
Osnovne informacije o predmetu
Ishodi učenja, model praćenja
• Nastavna cjelina 1…X
Forum
Nastavni materijali: pdf, ppt, video - preko „Page”, ”Folder” resursa ili direktno na cjelini („File”)
Samoprocjena
Zadaća
Rječnik
![Page 6: Izrada nastavnih materijala korištenjem modernih …...Moodle danas (teme) •Moodle 2.0 –potpuno redizajnirane sustav za teme •Moodle 2.5 –Clean tema (bazirana na Bootstrap-u)](https://reader033.vdocuments.net/reader033/viewer/2022050117/5f4e18dcd7882657072c849e/html5/thumbnails/6.jpg)
Moodle danas (teme)
• Moodle 2.0 – potpuno redizajnirane sustav za teme
• Moodle 2.5 – Clean tema (bazirana na Bootstrap-u)
• Moodle 2.7 – Clean i More jedine 2 teme
• Značajno poboljšanje u izgledu Moodle kolegija i Moodle-a općenito
• Nedovoljan naglasak na novim mogućnostima izrade nastavnih materijala
Bootstrap
jQuery
Lako dodavanje ostalih JavaScript plugin-ova
![Page 7: Izrada nastavnih materijala korištenjem modernih …...Moodle danas (teme) •Moodle 2.0 –potpuno redizajnirane sustav za teme •Moodle 2.5 –Clean tema (bazirana na Bootstrap-u)](https://reader033.vdocuments.net/reader033/viewer/2022050117/5f4e18dcd7882657072c849e/html5/thumbnails/7.jpg)
Bootstrap
• HTML, CSS, i JS razvojni okvir
• Namijenjen razvoju modernih, responzivnih web stranica
• Mobile First
• Open Source
• Kombinacija CSS-a i JavaScript-a
http://getbootstrap.com/
![Page 10: Izrada nastavnih materijala korištenjem modernih …...Moodle danas (teme) •Moodle 2.0 –potpuno redizajnirane sustav za teme •Moodle 2.5 –Clean tema (bazirana na Bootstrap-u)](https://reader033.vdocuments.net/reader033/viewer/2022050117/5f4e18dcd7882657072c849e/html5/thumbnails/10.jpg)
Statistika korištenja aktivnosti i resursa
• FOI, 15.6.2015
File 9902Page 2339Assignment 1737Label 1363Forum 983URL 825Quiz 652Choice 544Folder 375Glossary 121
![Page 11: Izrada nastavnih materijala korištenjem modernih …...Moodle danas (teme) •Moodle 2.0 –potpuno redizajnirane sustav za teme •Moodle 2.5 –Clean tema (bazirana na Bootstrap-u)](https://reader033.vdocuments.net/reader033/viewer/2022050117/5f4e18dcd7882657072c849e/html5/thumbnails/11.jpg)
Moodle Page
![Page 12: Izrada nastavnih materijala korištenjem modernih …...Moodle danas (teme) •Moodle 2.0 –potpuno redizajnirane sustav za teme •Moodle 2.5 –Clean tema (bazirana na Bootstrap-u)](https://reader033.vdocuments.net/reader033/viewer/2022050117/5f4e18dcd7882657072c849e/html5/thumbnails/12.jpg)
Moodle Page
• Mogućnost upisivanja bilo kakvog HTML + JavaScript web sadržaja
• Izrada naprednih i interaktivnih web stranica (nastavnih materijala)
• Ne vrijedi samo za Page
Labela, opis kolegija/nastavne cijeline,
![Page 13: Izrada nastavnih materijala korištenjem modernih …...Moodle danas (teme) •Moodle 2.0 –potpuno redizajnirane sustav za teme •Moodle 2.5 –Clean tema (bazirana na Bootstrap-u)](https://reader033.vdocuments.net/reader033/viewer/2022050117/5f4e18dcd7882657072c849e/html5/thumbnails/13.jpg)
Moodle početna stranica
elearning.siscatalyst.eu
• 4 Bootstrap kolone
• Bootstrap tablica
![Page 14: Izrada nastavnih materijala korištenjem modernih …...Moodle danas (teme) •Moodle 2.0 –potpuno redizajnirane sustav za teme •Moodle 2.5 –Clean tema (bazirana na Bootstrap-u)](https://reader033.vdocuments.net/reader033/viewer/2022050117/5f4e18dcd7882657072c849e/html5/thumbnails/14.jpg)
Naslovnica Moodle kolegija
• Grid format kolegija
![Page 15: Izrada nastavnih materijala korištenjem modernih …...Moodle danas (teme) •Moodle 2.0 –potpuno redizajnirane sustav za teme •Moodle 2.5 –Clean tema (bazirana na Bootstrap-u)](https://reader033.vdocuments.net/reader033/viewer/2022050117/5f4e18dcd7882657072c849e/html5/thumbnails/15.jpg)
Naslovnica Moodle kolegija
• Grid format kolegija
• Bootstrap Tabs
![Page 16: Izrada nastavnih materijala korištenjem modernih …...Moodle danas (teme) •Moodle 2.0 –potpuno redizajnirane sustav za teme •Moodle 2.5 –Clean tema (bazirana na Bootstrap-u)](https://reader033.vdocuments.net/reader033/viewer/2022050117/5f4e18dcd7882657072c849e/html5/thumbnails/16.jpg)
Naslovnica Moodle kolegija
• Bootstrap Tabs
![Page 17: Izrada nastavnih materijala korištenjem modernih …...Moodle danas (teme) •Moodle 2.0 –potpuno redizajnirane sustav za teme •Moodle 2.5 –Clean tema (bazirana na Bootstrap-u)](https://reader033.vdocuments.net/reader033/viewer/2022050117/5f4e18dcd7882657072c849e/html5/thumbnails/17.jpg)
Moodle „Stranica”
• Bootstrap Modal
• Google fontovi
• CSS
![Page 18: Izrada nastavnih materijala korištenjem modernih …...Moodle danas (teme) •Moodle 2.0 –potpuno redizajnirane sustav za teme •Moodle 2.5 –Clean tema (bazirana na Bootstrap-u)](https://reader033.vdocuments.net/reader033/viewer/2022050117/5f4e18dcd7882657072c849e/html5/thumbnails/18.jpg)
Moodle „Stranica”
• Bootstrap Modal
• Google fontovi
• CSS
![Page 19: Izrada nastavnih materijala korištenjem modernih …...Moodle danas (teme) •Moodle 2.0 –potpuno redizajnirane sustav za teme •Moodle 2.5 –Clean tema (bazirana na Bootstrap-u)](https://reader033.vdocuments.net/reader033/viewer/2022050117/5f4e18dcd7882657072c849e/html5/thumbnails/19.jpg)
Moodle „Stranica”
• Bootstrap Modal
• HTML Map
![Page 20: Izrada nastavnih materijala korištenjem modernih …...Moodle danas (teme) •Moodle 2.0 –potpuno redizajnirane sustav za teme •Moodle 2.5 –Clean tema (bazirana na Bootstrap-u)](https://reader033.vdocuments.net/reader033/viewer/2022050117/5f4e18dcd7882657072c849e/html5/thumbnails/20.jpg)
Moodle „Stranica”
• Bootstrap Accordion
![Page 21: Izrada nastavnih materijala korištenjem modernih …...Moodle danas (teme) •Moodle 2.0 –potpuno redizajnirane sustav za teme •Moodle 2.5 –Clean tema (bazirana na Bootstrap-u)](https://reader033.vdocuments.net/reader033/viewer/2022050117/5f4e18dcd7882657072c849e/html5/thumbnails/21.jpg)
Moodle „Stranica”
• Bootstrap Accordion
![Page 22: Izrada nastavnih materijala korištenjem modernih …...Moodle danas (teme) •Moodle 2.0 –potpuno redizajnirane sustav za teme •Moodle 2.5 –Clean tema (bazirana na Bootstrap-u)](https://reader033.vdocuments.net/reader033/viewer/2022050117/5f4e18dcd7882657072c849e/html5/thumbnails/22.jpg)
Moodle „Stranica”
• Bootstrap Accordion
• Bootstrap Modal
• HTML Map
![Page 23: Izrada nastavnih materijala korištenjem modernih …...Moodle danas (teme) •Moodle 2.0 –potpuno redizajnirane sustav za teme •Moodle 2.5 –Clean tema (bazirana na Bootstrap-u)](https://reader033.vdocuments.net/reader033/viewer/2022050117/5f4e18dcd7882657072c849e/html5/thumbnails/23.jpg)
Moodle „Stranica”
• Bootstrap Popover
![Page 24: Izrada nastavnih materijala korištenjem modernih …...Moodle danas (teme) •Moodle 2.0 –potpuno redizajnirane sustav za teme •Moodle 2.5 –Clean tema (bazirana na Bootstrap-u)](https://reader033.vdocuments.net/reader033/viewer/2022050117/5f4e18dcd7882657072c849e/html5/thumbnails/24.jpg)
Moodle „Stranica” – Interaktivna aktivnost
• Vlastiti JavaScript + CSS + HTML Map
![Page 25: Izrada nastavnih materijala korištenjem modernih …...Moodle danas (teme) •Moodle 2.0 –potpuno redizajnirane sustav za teme •Moodle 2.5 –Clean tema (bazirana na Bootstrap-u)](https://reader033.vdocuments.net/reader033/viewer/2022050117/5f4e18dcd7882657072c849e/html5/thumbnails/25.jpg)
Moodle „Stranica” - Provjera znanja
• Vlastiti JavaScript + CSS + HTML Map
![Page 26: Izrada nastavnih materijala korištenjem modernih …...Moodle danas (teme) •Moodle 2.0 –potpuno redizajnirane sustav za teme •Moodle 2.5 –Clean tema (bazirana na Bootstrap-u)](https://reader033.vdocuments.net/reader033/viewer/2022050117/5f4e18dcd7882657072c849e/html5/thumbnails/26.jpg)
Moodle „Stranica” – Vježba/provjera znanja
• Vlastiti JavaScript + CSS
![Page 27: Izrada nastavnih materijala korištenjem modernih …...Moodle danas (teme) •Moodle 2.0 –potpuno redizajnirane sustav za teme •Moodle 2.5 –Clean tema (bazirana na Bootstrap-u)](https://reader033.vdocuments.net/reader033/viewer/2022050117/5f4e18dcd7882657072c849e/html5/thumbnails/27.jpg)
Moodle „Stranica” – Vježba/provjera znanja
• Vlastiti JavaScript + CSS
![Page 28: Izrada nastavnih materijala korištenjem modernih …...Moodle danas (teme) •Moodle 2.0 –potpuno redizajnirane sustav za teme •Moodle 2.5 –Clean tema (bazirana na Bootstrap-u)](https://reader033.vdocuments.net/reader033/viewer/2022050117/5f4e18dcd7882657072c849e/html5/thumbnails/28.jpg)
Moodle „Stranica” – Anketa na stranici
• Google forma
![Page 29: Izrada nastavnih materijala korištenjem modernih …...Moodle danas (teme) •Moodle 2.0 –potpuno redizajnirane sustav za teme •Moodle 2.5 –Clean tema (bazirana na Bootstrap-u)](https://reader033.vdocuments.net/reader033/viewer/2022050117/5f4e18dcd7882657072c849e/html5/thumbnails/29.jpg)
Problemi
![Page 30: Izrada nastavnih materijala korištenjem modernih …...Moodle danas (teme) •Moodle 2.0 –potpuno redizajnirane sustav za teme •Moodle 2.5 –Clean tema (bazirana na Bootstrap-u)](https://reader033.vdocuments.net/reader033/viewer/2022050117/5f4e18dcd7882657072c849e/html5/thumbnails/30.jpg)
Trenutne opcije
• Uređivanje HTML-a unutar WYSIWYG editora
• Vanjski alati za izradu web sadržaja
18 Essential Bootstrap UI Editors
• Korištenje specijaliziranih alata za izradu sadržaja za e-učenje: The Ultimate List of HTML5 eLearning Authoring Tools
• Moodle moduli: npr. Activities: Bootstrap Elements