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
[email protected]
Oktatás- és kommunikációtechnológiai tanszék
2009.11.17.
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.11.17.
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.11.17.
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.11.17.
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.okm.gov.hu • http://sdt.sulinet.hu • http://kozoktatas.lap.hu • 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.11.17.
IKT konzultáció
Weblap/honlap készítés szempontjai • 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.11.17.
IKT konzultáció
Egy jellemző honlap Név, logó, cím
Főmenü
Menüpontok
2009.11.17.
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.11.17.
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.11.17.
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.11.17.
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.11.17.
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.11.17.
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.11.17.
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.11.17.
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.11.17.
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.11.17.
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.elte.hu/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.11.17.
