Media knowledge | Higher education » Elek-dr. Bundik Ilona - Multimédia és webdesign

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 elekili@ektf.hu Oktatás- és kommunikációtechnológiai tanszék 2009.1117 IKT konzultáció Tartalom • 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) 2009.1117 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 2009.1117 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. 2009.1117 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: • http://www.okmgovhu • http://sdt.sulinethu • http://kozoktatas.laphu • 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. 2009.1117 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. 2009.1117 IKT konzultáció Egy jellemző honlap Név, logó, cím Főmenü Menüpontok 2009.1117 Az EKF honlapjának bejelentkező képe IKT konzultáció Honlapok szedéstükre Klasszikus szedéstükör: fejléc, margók, hasábok beállítása, kevés kép 2009.1117 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 2009.1117 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 IKT konzultáció Oldalarányok és arculat • Az oldal magasságának és szélességének aránya: 3:4. 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. • 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. 2009.1117 IKT konzultáció Mi a színek szerepe? •

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! 2009.1117 IKT konzultáció Mi a színek szerepe (2) 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 2009.1117 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. Ritmus a képben E. Bundik Ilona Kopcsik Lajos: Marcipánmúzem - részlet Összehasonlítás Ellenpont 1. Hova tegyem a kört? Ellenpont 2 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. 2009.1117 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ú 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 2009.1117 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 2009.1117 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. IKT konzultáció Multimédiás prezentációk típusai 2009.1117 24 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 http://edutech.eltehu/multiped • 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 2009.1117