kursuste kujundamine Moodle’is Triin Marandi ja Ly Sõõrd

2017 oktoober

Üldised põhimõtted

2

❖ Lihtsus üle kõige❖ Igal asjal peab olema mõte❖ Harmoonia kaose asemel❖ Kontrastid haaravad tähelepanu❖ Värvidel on tähendus❖ Illustratsioonid mõjuvad ka emotsionaalselt❖ Hierarhia on oluline (vasakult paremale, ülevalt alla, pealkirjad)❖ Kasutatavus erinevates e-vahendites

visual design best practices e-learning

Banner

3

Millist teha?

4

Kui suurt teha?

5

.jpg või .png-formaadis

laius u 700 pikselit

kõrgus 100 - 120 pikselit

Kust leida?

6

1. Flickr Creative Commons http://www.flickr.com/creativecommons

2. Wikimedia Commons http://commons.wikimedia.org/wiki/Main_Page

3. Xpert http://www.nottingham.ac.uk/xpert/attribution

4. Openphoto http://openphoto.net

5. Stockvault http://www.stockvault.net

6. Freemediagoo http://www.freemediagoo.com

7. Getfreeimage http://www.getfreeimage.com

8. Morguefile http://www.morguefile.com

9. Pixabay https://pixabay.com

10. ClipartKid http://clipartkid.com

pildista ise telefoniga!

http://www.flickr.com/creativecommonshttp://commons.wikimedia.org/wiki/Main_Pagehttp://www.nottingham.ac.uk/xpert/attribution/http://openphoto.net/http://www.stockvault.net/http://www.freemediagoo.com/http://www.getfreeimage.com/http://www.morguefile.com/https://pixabay.com/http://clipartkid.com

Millega muuta?

7

1. Pixlr http://pixlr.com/editor2. Fotoflexer http://fotoflexer.com3. iPiccy http://ipiccy.com4. Raamid ja filtrid https://www.tuxpi.com 5. Sõnapilved http://www.wordle.net või https://tagul.com6. Graafikud https://www.onlinecharttool.com 7. Kollaaž https://www.befunky.com 8. PowerPointis või Wordis teha ja Snipping Tooliga või

Print Scrn ja Paintiga salvestada.

http://pixlr.com/editor/http://fotoflexer.com/http://ipiccy.com/https://www.tuxpi.comhttp://www.wordle.net/https://tagul.com/https://www.onlinecharttool.com/https://www.befunky.com

Kuidas lisada?

8

1. Minge muutmisrežiimi2. Klõpsake avalehel kõige ülemisel hammasrattal paremas nurgas

3. Pildi lisamise nupp

4. Valige arvutist pilt, lisage

5. Muutke pildi suurus kohalduvaks

Kuidas muuta pilti kohalduvaks?

9

1. Lülituge html-vaatesse

2. Lisage kood ja asendage seal pildi aadress jm parameetrid:

3. Kustutage üleliigne pilt

Kursuse formaat

10

Kollabeerunud teemad

11

Värvilise taustaga tabel

12

❖ Kursuse avalehel plokk Seadistused ❖ Link Muuda sätteid❖ Kursuse seadete lehel Kursuse formaat ❖ Rippmenüüst vali Kollabeerunud teemad

Sektsioonid

13

Värvilise taustaga ala

14

Värvilise taustaga ala

15

Värvilise taustaga tabel

16

1. Minge muutmisrežiimi2. Klõpsake hammasrattal sektsiooni paremas ülanurgas

3. Klõpsake tabeli nupul

4. Määrake tabeli parameetrid

5. Lisage tabelisse sisu

Värvilise taustaga tabel

17

DIV

18

Stupid and silly people ( Cambridge Dictionary)

1. Minge muutmisrežiimi2. Klõpsake hammasrattal sektsiooni paremas ülanurgas

3. Klõpsake HTML-nupul

4. Lisage sobivate parameetritega

5. Lülituge tavavaatesse (nupp ) ja lisage sisu

DIV

19

Siia läheb teie tekst ja lõigu lõppu

Kõiki parameetreid saate ise koodina muuta:❖ taustavärv - background-color: #eeeeee ❖ piirjoone laius - border: 1px (proovige numbritega 1-10)❖ piirjoone muster - solid (proovige dotted, double, dashed)❖ piirjoone värv - #cccccc❖ piirjoone nurkade ümarus - border-radius: 5px (proovige numbritega 0-10)

Testimiseks: https://www.w3schools.com Värvid: color picker

Stupid and silly people ( Cambridge Dictionary)

https://www.w3schools.com

Eelvormindatud tekst

20

HTML - plokk

21

HTML-ploki sisu

22

HTML-ploki lisamine

23

❖ Pealkirja ei pea lisama❖ Pilt peaks olema kohanduva suurusega

(slaid 9)❖ Sobiv asukoht (paremas või vasakus

servas, sobivas positsioonis)

Õppematerjalid

24

Raamat ja leht

25

Pildi paiknemine

26

Pildi seaded

27

❖ Joondus teksti kõrval❖ Lisatav pilt õige suurusega❖ Vertikaal- ja horisontaalvahe -

teksti kaugus pildist❖ Ääris - pildi piirjoon

Pildi allikale viitamine

28

Viide pildi juures või teksti sees või lehe lõpus.

Allika otsimine: https://tineye.com/

https://tineye.com/

Õppematerjalid SISU@UT-s (https://sisu.ut.ee)

29

https://sisu.ut.ee

Ja ongi kõik ...

30