izrada nastavnih materijala korištenjem modernih …...moodle danas (teme) •moodle 2.0 –potpuno...
TRANSCRIPT
Izrada nastavnih materijala korištenjem modernih alata za uređivanje i prikaz web
sadržaja
Darko [email protected]
MoodleMoot, Srce, Zagreb, 16.06.2015
Moodle 2008
Moodle 2008
Moodle 2015
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
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
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/
Statistika korištenja aktivnosti i resursa
• FOI, 15.6.2015
File 9902Page 2339Assignment 1737Label 1363Forum 983URL 825Quiz 652Choice 544Folder 375Glossary 121
Moodle Page
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,
Moodle početna stranica
elearning.siscatalyst.eu
• 4 Bootstrap kolone
• Bootstrap tablica
Naslovnica Moodle kolegija
• Grid format kolegija
Naslovnica Moodle kolegija
• Grid format kolegija
• Bootstrap Tabs
Naslovnica Moodle kolegija
• Bootstrap Tabs
Moodle „Stranica”
• Bootstrap Modal
• Google fontovi
• CSS
Moodle „Stranica”
• Bootstrap Modal
• Google fontovi
• CSS
Moodle „Stranica”
• Bootstrap Modal
• HTML Map
Moodle „Stranica”
• Bootstrap Accordion
Moodle „Stranica”
• Bootstrap Accordion
Moodle „Stranica”
• Bootstrap Accordion
• Bootstrap Modal
• HTML Map
Moodle „Stranica”
• Bootstrap Popover
Moodle „Stranica” – Interaktivna aktivnost
• Vlastiti JavaScript + CSS + HTML Map
Moodle „Stranica” - Provjera znanja
• Vlastiti JavaScript + CSS + HTML Map
Moodle „Stranica” – Vježba/provjera znanja
• Vlastiti JavaScript + CSS
Moodle „Stranica” – Vježba/provjera znanja
• Vlastiti JavaScript + CSS
Moodle „Stranica” – Anketa na stranici
• Google forma
Problemi
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