Ajánlások képek elhelyezésével kapcsolatban a Canvas-oldalakon

Dr. Tóth-Mózer Szilvia | 2023.01.23.
Ajánlások képek elhelyezésével kapcsolatban a Canvas-oldalakon
Egy kép többet mond ezer szónál. Vizsgáljuk meg digitális tananyagunkat a Canvasban! Hogyan érdemes képet beszúrni?

A méret

A képek méretezése egyetemünk Canvas rendszerében egyedi, az újonnan beszúrt képeket a felbontástól és oldalaránytól függően automatikusan méretezi a szerkesztő. Ha ezek változatosak a kurzusunk képanyagában, akkor a képek mérete a tananyagban is változatos lesz. Próbáljuk meg előre kitalálni, hogy mekkora képeket szeretnénk. A kép funkciójától, tartalmától függően persze több méretezés is elképzelhető, de legyünk benne következetesek. Például részletgazdag grafikonoknál használjuk a “nagy” vagy “extra nagy” méretet, de illusztrációnál csak a közepes méretet, ikonoknál az egészen kicsi is elképzelhető.

A Canvas Instructure ajánlásai a képméretezésre négyzet alakú kép esetén:
200 × 200 pixel - kicsi
320 × 320 pixel - közepes
400 × 400 pixel - nagy
640 × 640 pixel - extra nagy

Tipp: Digitáliskompetencia-fejlesztő self-paced kurzusainkban az illusztrációk mérete a tartalomoldalakon 300 × 300 pixel.

Pixel vagy százalék?

A kép méretét megadhatjuk százalékban is, gondolva arra, hogy a különböző méretű kijelzőkön mást és mást jelent majd a 300 pixel. A nagyobb monitoron talán elvész, kisebb monitoron túlságosan hangsúlyos lesz. A százalékos beállítást ajánljuk, ha a képernyő teljes szélességét szeretnénk igénybe venni egy elválasztó elemhez vagy egy nagyobb méretűnek szánt infografikához. Az elrendezés így hasonlóan jelenik meg a különböző eszközök képernyőjén. A képarány Érdemes választani egy-két képarányt, amit kurzustartalom fejlesztésekor következetesen végigviszünk. Szükség lehet álló és fekvő formátumra, de elképzelhető négyzetes, 1:1 oldalarányú illusztráció is. A Canvasban a képarány változtatására már nincsen lehetőségünk, így azt előzetesen érdemes megszerkeszteni. A Canvas alapértelmezetten gondoskodik arról, hogy a méretezésnél a képarányt megtartsa, ha az egyik oldalt átméretezzük, a másik oldal értéke is automatikusan változik a párbeszédablakban. Ha a HTML kódba nyúlunk, a szélességnél (width) látható értéket veszi alapul, függetlenül a magasság méretezésétől, nem torzíthatunk szerencsére. A képarányt persze nem torzítással, hanem levágással, illetve az ábraanyag elemeinek újrarendezésével javasolt egységesíteni, de erre a felületen nincs mód.

Tipp: A Power Pointban megszerkesztett SmartArt ábrákat Fájl/Mentés másként/JPEG formátumban minden dia exportálásával egyforma oldalarányú ábraanyagot kaphatunk. A Tervezés/Diaméret menüpont alatti egyéni oldalarányt és diamértetet állíthatunk be az alapértelmezett 16:9-es fekvő formátum helyett.

A felépítés

Következetesnek lehet lenni a hasonló funkciójú képek szerkesztésénél az alábbi kérdésekben: hol helyezzük el a kép címét, hol helyezzük el a jelmagyarázatot, milyen színeket használunk bizonyos képelemek kiemelésére, mi a különböző méretű, színű és típusú betűkkel írt szövegrészek funkciója, milyen ikonokat, piktogramokat alkalmazunk. Így a hallgatóknak nem kell mindig elölről kezdeniük egy-egy ábra vagy infografika értelmezését, megkönnyítjük a tanulást, és mentesítjük őket a fölösleges kognitív terheléstől. Jó példa a következetesen alkalmazott infografika-szerkesztésre: https://hu.pinterest.com/coursehero/literature-infographics/

Sablonok használata

Mind az oldalarány, mind a vászonméret, felbontás, a következetes betű- és színhasználat, valamint az állandó grafikai elemek miatt érdemes lehet sablonokat alkalmazni, ahol kis módosításokkal tudunk új, de a meglévő anyagainkkal harmonizáló képeket, ábrákat készíteni. Sablonokat készíthetünk Power Pointban, Inkscape-ben, hogy csak néhány szoftveres megoldást ajánljunk, de lehet választani online szerkesztők designerek által összeállított kínálatából is (pl. Piktochart, Diagrams)

 

1:1 oldalarányú vászon az Inkscape-ben, saját színpalettával

Elrendezés

A jó sablon azért is kincset érő, mert nem kell újra és újra döntést hozni az elrendezést illetően, ugyanis nem mindegy a képen sem az elemek elhelyezése. Hagyjuk az elemeket lélegezni, bátran alkalmazzuk az üres felületeket, a kevesebb több és a képdominancia elvét. Ügyeljünk arra is, hogy mi mihez van közel, mivel alkot egységet, hová tartozik (hogy tűnik, hová tartozik?).

Olvashatóság és akadálymentesítés

A képeken, ábrákon szerepeltetett szövegek olvashatósága sokszor kritikus. Nehéz a különböző képernyőkön megjelenített tananyagban elhelyezett, újraméretezett képeken szereplő szövegek betűméretéről egységesen megmondani, hányas betűméret legyen. Azt ajánljuk, mielőtt az ábrák sorozatgyártásába kezdenénk, győződjünk meg róla, hogy a prototípus jól teljesít-e, mások szerint is olvasható, kivehető róla minden fontos információ. Kérjük meg a kollégákat vagy a hallgatókat, mondjanak véleményt.

Ha a kép nem tesz hozzá a tananyaghoz, csak hangulati értéke van, akkor nem szükséges a felolvasóprogram számára hozzáférhető alternatív szöveget megfogalmaznunk, mert csak elterelő, fölösleges információ lenne a látássérült hallgatóink számára. Ekkor a Dekoratív kép lehetőséget kattintjuk be. Ha információértéke is van az anyagnak, az alternatív szöveg mezőben írjuk le. Alapértelmezetten a fájlnév szerepel csak ott, ami nem mindig elég informatív, sokszor még nyomokban sem utal a tartalmára (pl. m1.1 ábra). A színtévesztő és gyengénlátó hallgatóink szempontjából fontos lehetőség a hozzáférhetőség ellenőrzése, ami oldalanként bekapcsolható a szövegszerkesztőben a Check Accessibility gombbal. Egy külön kis párbeszédablakban hívja fel a Canvas a figyelmünket, ha nem elég kontrasztos a háttér és a betű a színválasztás miatt, de a képeken alkalmazott színek, kontrasztok nem képezik az ellenőrzés tárgyát, arra nekünk kell figyelmet fordítani, és érdemes előre gondolnunk a hozzáférhetőségi kérdésekre.

És amikor nem képre lenne szükség

Ha prezentációt készítettünk az előadásunkhoz, akkor csábító a lehetőség, hogy képernyőképpel mentsük a ppt-ben megszerkesztett táblázatot, majd képként illesszük a tananyagoldalba. Azt javasoljuk, hogy a hozzáférhetőség javítása érdekében a táblázatok készítésére is szánjuk rá az időt a Canvasban.