Multimédia és webdesign (1)

Átírás

1 IKT konzultáció Multimédia és webdesign (1) Az elektronikus publikáció ismérvei, változatai, előnyei. Szeminárium: Képernyő üzenettervezés. Készítette. Elek Elemérné dr. Bundik Ilona főiskolai tanár Oktatás- és kommunikációtechnológiai tanszék

2 Tartalom IKT konzultáció Mi értünk elektronikus publikáció alatt? Közzétételi mód Alkalmazás előnyei Az elektronikus publikáció fajtái a tartalom szempontjából (a teljesség igénye nélkül): Honlapok Szoftverek, adatbázisok, elektronikus könyvek Multimédiás oktatószoftverek, prezentációk A honlapok és multimédiás prezentációk tervezésének módszertani kérdései (kompozíciós és formai szempontok)

3 IKT konzultáció Mi értünk elektronikus publikáció alatt? Számítógéppel, elektronikus úton előállított dokumentum, amelynek közzététele off-line vagy on-line módon történik. Szerzői jogi védelem alatt áll. Közzététel módjai: Off-line: mágneslemez, optikai lemez, pendrive On-line: elektronikus hálózat Előnyei: flexibilitás rugalmas felhasználás; manipulálhatóság - idő- és térbeli korlátok átlépése; olcsó: előállítás és beszerzés kérdése többszörözhető korlátok is vannak nagy tömegek számára is biztosítható információk Hátrányok: bizonytalan eredet, forrás védelme nehéz könnyű hamisítani

4 IKT konzultáció Honlapok Sokféle elnevezés: honlap, weblap, weboldal, webhely Weblap, weboldal: egy vagy több webes forrásból származó információk összessége, amelyet egyidejű feldolgozásra szánnak, és egy egyszeri URI határoz meg (L. Wikipédia) A weblap tartalma lehet: egyetlen fájl beágyazott erőforrás (statikus és dinamikus weblapok), több fájl hivatkozás további oldalakra, képekre Web és a blog A blog egy olyan periodikusan újabb bejegyzésekkel bővülő weboldal, amely ezek sorozatából áll, függetlenül attól, hogy mi az oldal témája, formája és hogy nyilvánosan elérhető-e. A blogok többsége nyilvános weblapként működik, bármely internethasználó által elérhetően.

5 IKT konzultáció Honlapok Honlap: weblapok, weboldalak fájlainak összessége, amelyek célja, szerzője, címe, tartalma, logója,, stílusa ugyanaz. Oktatással kapcsolatos néhány honlap: Miért készülnek? A mögötte álló céget vagy személyt megtalálják az interneten és információt szerezzenek róla.

6 Weblap/honlap készítés szempontjai IKT konzultáció Milyen céljaink vannak? Milyen tartalmat kívánunk publikálni? Áttekinthető, logikus menürendszer kialakítása - navigáció Kiknek szánjuk az információt? A CÉLCSOPORT jellemzői (kor, összetétele, érdeklődése, kívánságai, a tartalommal kapcsolatos meglévő ismeretei, gondolkodása,ízlése, interakcióra való hajlama Milyen médiumokat kívánunk megjeleníteni? Szöveg, állókép, hang, videoklip, flash médiaszerver szükséges Milyen formában - webtipográfia: weblapok, weboldalak készítésének kompozíciós és formai követelményei, melynek legfőbb célja a mondanivaló minél hatásosabb megjelenítése.

7 Egy jellemző honlap IKT konzultáció Név, logó, cím Főmenü Menüpontok Az EKF honlapjának bejelentkező képe

8 Honlapok szedéstükre IKT konzultáció Klasszikus szedéstükör: fejléc, margók, hasábok beállítása, kevés kép

9 IKT konzultáció Honlapok szedéstükre (2) Modulhálós szedéstükör: sok kép esetén célszerű az alkalmazása

10 Néhány kompozíciós szabály A részekre történő felosztásnál gyakori szempont az aranymetszés szabályainak figyelembe vétele. A tökéletes emberi test arányai az irányadóak. (2:3:5:8) A kisebb rész úgy aránylik a nagyobbhoz, mint a nagyobb az egészhez. (kb 1,62) Két egyforma elem mindig jó hatást kelt. A szimmetrikus elrendezés nyugodt, kiegyensúlyozott hatást kelt. Az aszimmetrikus viszont élénkebb, hangsúlyosabb

11 Oldalarányok és arculat IKT konzultáció Az oldal magasságának és szélességének aránya: 3:4. A szedéstükör kialakításánál vegyük figyelembe a képernyő arányait és a felbontást (800x600, 1024x768). A képfelület betöltésénél kerüljük a zsúfoltságot és harmóniára kell törekedni. 4 3 A honlap színvilága a tulajdonos megszokott és a tartalomhoz is illeszkedő színeit tükrözze vissza. Fontos a logók, a tulajdonosra, a cégre jellemző arculati elemek következetes megjelenítése.

12 Mi a színek szerepe? IKT konzultáció Színek szerepe: kiemel, hangsúlyoz, figyelmet irányít, rejtett jelentést közvetít. Színek csoportosítása: színkör Hideg színek Meleg színek Komplementer színek: kék-sárga; piros-zöld; - erős kontraszthatás Színek asszociatív jelentése: vörös tűz, vér, kék - víz, égbolt, zöld: természet Színszimbolika - színhasználat kultúrához kötése: fekete - gyász Színkonvenciók: színek jelentése megegyezés alapján. Pl. térkép színei - nemzetközi megegyezés tilos a változtatása!

13 Mi a színek szerepe (2) IKT konzultáció Háttérszínek funkciója Hangulati keretet teremt és elősegíti a mondanivaló kiemelését. Célszerű a semlegesebb színekből válogatni (jobban párosíthatók hozzá a jelölőszínek Az átmenetes és texturás háttereknél gyakori problémát jelent az olvashatóság A háttérbe helyezett képeket halványítsuk el annyira, hogy ne zavarja az olvashatóságot! Jelölőszínek Elősegítik a megértést, hangsúlyoznak, jelentést közvetítenek, figyelmet irányítanak,. Javasolt számuk: 4-7

14 Folthatás Az egybetartozó vizuális egységeket foltokként érzékeljük. Ha rápillantunk egy képernyőre, először a nagyobb, feltűnőbb foltokat vesszük észre.

15 Ritmus a képben Kopcsik Lajos: Marcipánmúzem - részlet E. Bundik Ilona

16 Összehasonlítás

17 Ellenpont 1. Hova tegyem a kört?

18 Ellenpont 2

19 IKT konzultáció A honlap médiaelemei: szöveg Tagoljuk jól a tartalmat! Kerüljük a többszörösen összetett mondatokat, mert a képernyőről való olvasás nehezebb, mintha könyvből olvasnánk. Használjunk jól olvasható betűtípusokat! Talpas: összefüggő hosszabb szöveg Times New Roman, Garamond, Talp nélküli: címek, feliratok, rövid szöveg Arial, Tahoma, Lucida Kalligrafikus betűk: főként dekorációs cél - Nagy betűket csak a helyesírás szempontjából indokolt helyeken alkalmazzunk tulajdonnevek, mondatkezdés. Betűméret: 11-13pt. Nagyítási funkció beépítése is lehetséges.

20 Betűtípusok Talpas: a talpak vezetik a tekintetet Talpnélküli: rövid feliratok, vetítésre szánt Kalligrafikus (kézírás): nehezen olvasható Dekoratív: díszítő célú

21 IKT konzultáció A honlap médiaelemei: szöveg Szövegkiemelés: bold betűk, italic, méret és szín változtatása, árnyékolás, ritkítás, esetleg animáció Az aláhúzás hiperhivatkozást jelent csak erre használjuk! Címek: rendszerint nagyobb betűkkel írjuk. Tördelése szimmetrikus vagy aszimmetrikus lehet. Formabontó módon, alul is elhelyezhetjük. A vonalakat használjuk a vizuális tagolásra: elválasztanak, tagolnak, irányítják a tekintetet, keretbe foglalnak, díszítenek Címek tördelése szimmetrikus és aszimmetrikusi módon

22 IKT konzultáció A honlap médiaelemei: képek A weben való megjelenésnél nem szabad nagy állományokban gondolkodni tömörítés (min.: 72dpi) Képfájl típusok: jpg, tif, gif, Amennyiben nem nyilvános rendezvényről van szó, a képek webre történő feltételéhez a rajtuk szereplőknek hozzá kell járulni. Képek beillesztésénél vigyázzunk az alapvető kompozíciós szabályokra Szimmetria, aszimmetria, kiegyensúlyozott képelemek, helyzeti és formai egyensúly, szándékos feszültségteremtés, folthatás

23 Képek és keretek A keret kihangsúlyozza a képet és elhatárolja a környezetétől, de a keret nélküli kép modern hatást kelthet. Az arcok ne nézzenek ki a képből kivéve, ha ennek dramaturgiai funkciója van. Ne torzítsuk el az alakokat kivéve, ha valamilyen fiatalos, tréfás célú az alkalmazás.

24 IKT konzultáció Multimédiás prezentációk típusai 24

25 IKT konzultáció Források Roger C. Parker: Webdesign kiadványtervezés képernyőn és nyomtatásban. Kossuth Kiadó. Bp.,1999. Virágvölgyi Péter: A tipográfia mestersége számítógéppel. Osiris kiadó, Bp.,1999. Szabó Zénó: Tipográfia és webdesign Elek Forgó Hauser - Kis-Tóth - T.Parázsó: Oktatástechnológia In: Gyakorlati tanácsok vizuális információhordozók készítéséhez. Líceum Kiadó. Eger, 2003.