Izrada nastavnih materijala korištenjem modernih alata za uređivanje i prikaz web

sadržaja

Darko Grabardarko.grabar@foi.hr

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/

Bootstrap

http://getbootstrap.com/

Bootstrap

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