E-učilnice: Oblikovanje

Spletno mesto: Odprta UP
Predmet: Poučevanje z digitalnimi izobraževalnimi tehnologijami
Knjiga: E-učilnice: Oblikovanje
Natisnil: Gostujoči uporabnik
Datum: torek, 8. september 2026, 11.08

1. Oblike e-učilnic

Učitelji vsebin svojih e-učilnic najpogosteje organiziramo v tedenski ali tematski obliki. Njuna glavna prednost je to, da sosledje vsebin v e-učilnici odraža sosledje dogajanja v razredu, kar daje učitelju in študentom občutek organiziranosti pedagoškega procesa kot tudi občutek povezanosti procesov v predavalnici in v e-učilnici. Žal pa imata ti dve obliki predmetov tudi slabo stran: dolžina vstopne strani predmeta se daljša z vsako vgnezdeno sliko ali video posnetkom in z vsako dodano aktivnostjo. Pomikanje gor in dol po dolgem osrednjem delu e-učilnice je ne samo manj prijetno, stran lahko tudi hitro postane nepregledna. Delno rešitev za ta problem seveda lahko najdemo v nastavitvah, ki nam omogočajo prikaz le enega tedna oziroma ene teme. Če ste s to rešitvijo zadovoljni, potem problema ni.



Če pa imate občutek, da ni vse tako, kot bi si želeli, je smiselno preučiti alternativne oblike predmetov. Te niso le na videz drugačne, ponujajo nam tudi drugačne rešitve pri organiziranju vsebine. Morebiti pa bo katera od njih bolje podpirala izvedbo vašega predmeta.

1.1. Gumbi

Tematsko ali tedensko oblikovano in poimenovano e-učilnico lahko prikažemo tudi v alternativni obliki: vidna je le vsebina ene teme ali enega tedna, med njimi pa prehajamo z gumbi, ki se nahajajo nad vsebinami.

V nastavitvah predmeta je ta oblika zapisana kot “buttons format”. Kot je na spodnji sliki razvidno, je možnosti pri oblikovanju kar nekaj. Gumbi so lahko okrogli ali kvadratni, le oštevilčeni ali opremljeni tudi s tematskimi naslovi.

Dokler je vklopljeno urejanje, gumbkov ne vidimo. Oblikovanje tem ali tednov poteka enako kot poprej. Ko izključimo urejanje, se prikaz spremeni. Primere, ki izhajajo iz zgornjih nastavitev lahko vidimo spodaj.

1.2. Zavihki

Oblika e-učilnice z zavihki (v angl. Onetopic) je verjetno najbolj primerna za e-učilnice predmetov, ki vsebujejo manjše število tem ali pa vsebujejo teme, ki so hierarhično strukturirane. Glavna prednost te oblike e-učilnice je namreč njena preglednost.

Zavihki nosijo ime poglavja, zato mora biti naslov sorazmerno kratek. V povzetku odseka poglavje oz. temo predstavimo in opis po potrebi opremimo tudi s slikovnim gradivom ali video posnetkom. Pod opisom nanizamo učne vire in dejavnosti, ki so del poglavja.

Naslovi podpoglavij v hierarhično strukturiranem predmetu bodo prikazani v vrstici pod glavno vrstico zavihkov.

Če želimo vrstni red zavihkov spremeniti, vključimo urejanje in uporabimo funkcijo ‘Tabs edition utilities’ na dnu strani. Postopek premikanja je sledeč: odpremo zavihek, ki ga želimo premakniti, odpremo funckijo ‘Tabs edition utilities’ na dnu strani in kliknemo na naslov, ki naj bi mu naš zavihek sledil.

1.3. Ploščice

Za razliko od blokov (v angl. ‘board format’), ki so lahko različno široki (od 100% do 25% širine e-učilnice), so ploščice (v angl. ’tiles format’) enotne velikosti. Število prikazanih ploščic je odvisno od širine zaslona.

Ploščice lahko prikazujejo fotografije z naslovom poglavja ali pa prazne ploščice z naslovom poglavja in ikono, ki ponazarja vsebino (kombinacija obeh ni možna). Ikone izbiramo s seznama priloženih ikon. Administrator e-učilnic lahko ta seznam ikon po potrebi tudi razširi.

Nastavitve te oblike e-učilnice nam omogočajo še nekaj dodatnih možnosti. Tako lahko določimo barvo roba ploščic (izbiramo med barvami, ki jih določi administrator naše e-učilnice). Lahko omogočimo označevanje poglavja, ki ga trenutno obravnavamo in ga bodo študenti prepoznali po rdečem robu ploščice (kot na sliki na vrhu). Ta oblika predmeta je unikatna tudi po tem, da omogoča spremljanje dokončanja dejavnosti v vsakem poglavju posebej bodisi v obliki procentov (prikaže se kot krog) bodisi v obliki deleža. Sistem bo avtomatično prikazal tudi procent opravljenih dejavnosti v celoti.

Dejavnosti poglavja so lahko prikazane v obliki ploščic ali pa klasičnega seznama. Paziti pa moramo na to, da slika, ki je dodana predmetu, ni prevelika (glej sliki spodaj), saj so potem dejavnosti potisnjene na dno ekrana, kar ne prispeva k preglednosti prikaza.

Pri urejanju poglavij se ploščice postavijo vertikalno kot pri klasični obliki e-učilnice v obliki poglavij. Ko z urejanjem zaključimo, se ploščice spet postavijo v vrsto.

E-učilnice, ki uporabljajo obliko ploščic, so primerne tako za predmete z velikim številom poglavij kot tudi za predmete z manjšim številom poglavij. So pregledne, malce animirane in čedne, saj zelo hitro dajo vtis profesionalnega oblikovanja.

1.4. Video: gumbi in ploščice

2. Kako dodamo prikazno sliko e-učilnici predmeta?

Moodle avtomatično določi prikazno sliko vsake e-učilnice in ta je vidna tako na seznamu predmetov na vstopni strani e-učilnic kot tudi v aplikaciji Moodle za mobilne naprave. Če želimo, da slika bolje ponazarja vsebino našega predmeta, jo lahko kadarkoli zamenjamo. Kako?

Slika 1: Prikaz predmeta z avtomatično generirani sliko


Vstopimo v svoj predmet in vključimo urejanje nastavitev predmeta. Poiščemo rubriko “Datoteke povzetka predmeta”, naložimo sliko, ki jo želimo uporabiti, in shranimo spremembe.

Slika 2: Naložimo fotografijo v odsek “Datoteke povzetka predmeta”

Slika 3: Spremenjena prikazna slika e-učilnice predmeta

3. Kako lepše oblikujemo svoja besedila?

Oblikovanje s C4L

Besedilom, ki jih oblikujemo z urejevalnikom, lahko dodamo tudi urejene okvirje s pomočjo vtičnika C4L, ki ima obliko enojne lego kocke  in se nahaja na seznamu ikon urejevalnika.

Izbiramo lahko med naslednjimi oblikami oken: 

Definicija koncepta: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tempor odio vel turpis consequat sodales.

Nasvet: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tempor odio vel turpis consequat sodales.

Opomnik: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tempor odio vel turpis consequat sodales.

 

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus a posuere nibh, eu mollis lacus. Praesent dictum in velit sed dapibus.

Marcus Tullius Cicero, De Finibus Bonorum et Malorum

Kaj je dovoljeno? Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus a posuere nibh, eu mollis lacus. Praesent dictum in velit sed dapibus.Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Kaj ni dovoljeno? Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus a posuere nibh, eu mollis lacus. Praesent dictum in velit sed dapibus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Besedilo

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus leo, hendrerit ac sem vitae, posuere egestas nisi. Lorem ipsum dolor sit amet. Phasellus leo, hendrerit ac sem vitae, posuere egestas nisi.

primer 1

Primer številka 1 ...

Dodatno branje
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut porta, neque id feugiat consectetur, enim ipsum tincidunt nunc, id suscipit mauris urna sit amet lectus.
  • Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.
  • Nulla porttitor accumsan tincidunt. Curabitur aliquet quam id dui posuere blandit. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus

Ponovi
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tempor odio vel turpis consequat sodales.

oznaka

Pozor! Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tempor odio vel turpis consequat sodales.

15 min

Učni izidi
  • Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut porta, neque id feugiat consectetur, enim ipsum tincidunt nunc, id suscipit mauris urna sit amet lectus.
  • Curabitur non nulla sit amet nisl tempus convallis quis ac lectus. Praesent sapien massa, convallis a pellentesque nec, egestas non nisi.
  • Nulla porttitor accumsan tincidunt. Curabitur aliquet quam id dui posuere blandit. Curabitur non nulla sit amet nisl tempus convallis quis ac lectus.

Povratni odziv: Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus a posuere nibh, eu mollis lacus. Praesent dictum in velit sed dapibus.

Uporaba UI je dovoljena

Uporaba UI NI dovoljena

Uporaba UI mora biti dokumentirana

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus a posuere nibh, eu mollis lacus. Praesent dictum in velit sed dapibus. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.

Kako oblikujemo te okvirje?

a) Lahko kliknemo na ikono C4L  in izberemo vrsto okna in ga vstavimo v besedilo, potem pa ga previdno oblikujemo. (Pazimo, da pri oblikovanju ne izbrišemo kode izbranega okna. Naknadne popravke najbolj preprosto urejamo v HTML obliki.)

b) Oblikujemo besedilo, ga označimo, izberemo ikono C4L, izberemo okvir in ga vstavimo v besedilo. 

4. Kje najdemo brezplačne fotografije?

Preden fotografije drugih avtorjev vključimo v svoja študijska gradiva ali e-učilnice, moramo preveriti, pod kakšnimi pogoji je dovoljena njihova raba. Nekatere spletne strani namreč objavljajo fotografije z različnimi oblikami zaščite. Informacija o vrsti avtorske zaščite fotografije nam bo omogočila, da fotografije ustrezno vključimo v svoja gradiva. Izogibati pa se moramo uporabi fotografij neznanega izvora, saj obstaja možnost, da se krši avtorske pravice fotografa. Uporaba fotografij iz spletnih virov, ki kršijo avtorske pravice fotografov, bi nas potegnila v kršitev avtorskega prava. Previdnost torej ni odveč.

Pixabay dovoljuje uporabo vseh fotografij za komercialne ali nekomercialne namene brez navajanja avtorstva. Pri tem pa velja prebrati njihovo razlago pomena ‘fotografija v javni lasti (CC0)’.

Gratisography tudi dovoljuje uporabo fotografij brezplačno in brez navajanja avtorstva. Zbirka se zdi manjša, a vsebuje tudi malce bolj nenavadne fotografije, ki znajo pripovedovati zgodbe.

Unsplash dovoljuje uporabo fotografij brez navajanja avtorstva. Fotografije so razvrščene tudi po kategorijah, zato jih lahko pregledujete tudi tematsko.

Pikwizard ponuja brezplačne fotografije, ki jih lahko urejate tudi v spletni aplikaciji DesignWizard. Pazite le na to, da je uporaba aplikacije možna le v omejenem obsegu.

Flickr je dejansko spletni album, ki pa omogoča napredno iskanje fotografij, ki so v javni domeni ali pa je njihova uporaba dovoljena pod pogojem, da navedemo avtorjevo ime. Napredno iskanje fotografij omogoča tudi Google.

PublicDomainPictures.net je iskalnik fotografij v javni domeni. Zanimivo je, da je med temi fotografijami precej fotografij predmetov ali ljudi na belem ozadju.

5. Oblikovanje s kodami

Spodaj opisanim trikom je skupno to, da pomagajo obogatiti besedila s preprostimi kodami. Ni potrebno znati kodirati, da te kode uporabljamo. Samo kliknemo na ikono <>, na želeno mesto vnesemo kode in shrnimo. Tako preprosto dodamo besedilu vodoravno črto, barvne oznake ali barvno polje, gumbe in podobno. Barvne kode ne delujejo v vseh temah enako, zato je potrebno njihovo delovanje preveriti.

Kako oblikujemo vodoravno črto?

Odpremo urejanje HTML (klik na ikono <>) in na mesto, kjer želimo imeti črto, vpišemo <hr>. To lahko naredimo povsod, kjer urejevalnik omogoča rejanje HTML (stran, forum, oznako, navodila ...) Nastane črta kot ta spodaj. Najpogosteje jo uporabimo za ločevanje vsebin na straneh ali v oznakah.


Kako dodamo barvno ozadje opozorilom?

Obarvana polja so primerna npr. za novice ali vsebine, ki jih želimo še posebej izpostaviti. Priporočljivo je, da je njihova uporaba le občasna in da upošteva simbolni pomen barv. Tako naj bi bilo npr. rdeče polje uporabljeno le za resna opozorila.

Zeleno ozadje smo oblikovali s kodo <p><div class="alert alert-success">Besedilo</div></p>

Modro ozadje smo oblikovali s kodo <p><div class="alert alert-info">Besedilo</div></p>

Oranžno ozadje smo oblikovali s kodo <p><div class="alert alert-warning">Besedilo</div></p>

Rdeče ozadje smo oblikovali s kodo <p><div class="alert alert-danger">Besedilo</div></p>

Kako dodamo gumbe?

S preprosto kodo lahko oblikujemo tudi gumbe, ki popeljejo obiskovalce naprej.

Gumb smo obilkovali s kodo <button>Oddaja nalog</button>, seveda mu je potrebno dodati še povezavo. (Označimo gumb in mu po običajni poti dodamo povezavo.)

Poleg spreminjanja besedila na gumbu, lahko spremenimo tudi barvo gumba. To storimo z naslednjimi kodami: 

<p><a class="btn btn-primary" href="#link">Gumb, obarvan s primarno barvo
    e-učilnic</a></p>
<p><a class="btn btn-success" href="#link">Opravljeno</a></p>
<p><a class="btn btn-info" href="#link">Informacije</a></p>
<p><a class="btn btn-warning" href="#link">Opozorilo</a></p>
<p><a class="btn btn-danger" href="#link">Prepoved</a></p>

Gumb, obarvan s primarno barvo e-učilnic

Opravljeno

Informacije

Opozorilo

Prepoved

Gumbom lahko dodamo tudi ikone z brezplačnega nabora  https://fontawesome.com/.

a class="btn btn-success" href="#link"><i class="fa fa-check-circle"></i>
    Opravljeno</a></p>
<p><a class="btn btn-info" href="#link"><i class="fa fa-info-circle"></i>
    Informacije</a></p>
<p><a class="btn btn-warning" href="#link"><i class="fa fa-warning"></i>
    Opozorilo</a></p>
<p><a class="btn btn-danger" href="#link"><i
      class="fa fa-exclamation-circle"></i> Prepoved</a></p>

Opravljeno

Informacije

Opozorilo

Prepoved