Készítette: Nagy Tamás Szak: Médiatechnológus asszisztens Eszterházy Károly Főiskola Eger 2005.

Az előadások a következő témára: "Készítette: Nagy Tamás Szak: Médiatechnológus asszisztens Eszterházy Károly Főiskola Eger 2005."— Előadás másolata:

1 Készítette: Nagy Tamás Szak: Médiatechnológus asszisztens Eszterházy Károly Főiskola Eger 2005

2 Volvo for Life Belépés

3 Főmenü 1. Az üzenet pontossága, érthetősége 2. A rendszerben való gondolkodás 3. A struktúráltságról 4. A navigációról 5. Kommunikáció, interakció 6. A pszichológiai, ergonómiai szempontok 7. Multimédia komponensek vizuális és auditív elemei 8. A multimédia Technikai kivitelezése 9. Járulékos elemek 10. Szubjektív értékelés

4 1. Az üzenet pontossága, érthetősége A weblap azoknak szól, akik szeretnének átfogó ismeretséget szerezni a Volvóról, szeretnék megismerni múltját, történetét és, hogy milyen fejlesztéseken ment át napjainkig, mik a céljai, tervei a jövőre nézve. Az ismeretek bővítését a szöveg mellett gazdag képvilág és helyenként videók szolgálják.

5 A bemutató alapját egy keretes frame szerkezet alkotja. A főoldal két frameből: egy Top frameből és egy Main frameből áll. A Top frameben találhatóak a főbb menüpontok, amelyek a hivatkozásokat mindig a Main framebe linkelik. Némely hivatkozásokon belül szintén találhatunk keretes szerkezeteket, de ez a tájékozódást nem zavarja, hiszen a főoldal kerete mindig látható marad számunkra. Ez a rendszerben való könnyű tájékozódást segíti elő, aki legalább minimális internetes ismeretekkel rendelkezik, könnyen kiismerheti magát a linkek között. top frame main frame 2. A rendszerben való gondolkodás

6 3. A struktúráltságról A produkció egy nyitóoldallal kezdődik, ami a fekete háttérrel és a középen található animált Volvo emblémával diszkrét eleganciát sugároz. A nyitóoldal célja, hogy megteremtse az oldalhoz illő hangulatot. A háttérben pedig ütemes zene szól, mely belépésre inspirálja a felhasználót. A fekete szín lényeges szerepet kapott, hiszen a legtöbb oldal háttérszínének ezt választottam. Ennek legfőbb oka az egységes megjelenítés, másrést a stílusosság és a színharmónia kihangsúlyozása. Belépés után megjelenik a főoldal, ahonnan könnyen elérhetőek a főbb menüpontok és azoknak alpontjai. Ábra megtekintése

7

8 4. A navigációról A bemutató minimális navigációs elemet tartalmaz, annyit csak, amennyi szükséges. A főmenüből az egyes főcímek feliratával ellátott navigációs gombokkal linkelhetünk a céloldalakra. A főoldal egészére bármikor visszatérhetünk, egy része pedig szinte mindig látható. Ahol lehetett kihasználtam az általános internetes menüsor által rendelkezésre álló előre és vissza gombokat. A weblapon történő navigáció alapja a hivatkozásokra való linkelés, ezt megpróbáltam minél egyértelműben, felhasználóbarát módon megjeleníteni. Az oldalon való navigáció problémamentes használatához persze szükségesek minimális internetes ismeretek. Az aláhúzott, esetenként színes szöveges részek például egyértelműen hivatkozásra utalnak.

9 5. Kommunikáció, interakció Az oldal és a felhasználó között létrejövő kapcsolat szabadon kezdeményezhető és bármikor megszakítható. Nem kell attól tartanunk, hogy hivatkozások megnyitásánál meglepetésünkre olyan plusz linkek (például reklámoldalak) nyílnak meg a céloldalt lefedve, amik csak zavarják munkánkat. Az ilyen oldalak bezárogatása néha elég körülményes, jelenlétük mindeképpen feszélyező, hiszen akaratunk ellenére nyílnak meg. Az interaktivitás élményének nyújtása érdekében két linket hoztam létre. Mindkettő egy kész oldalra hivatkozik. Az első oldal különlegessége, hogy a felhasználó maga állíthatja össze kedvenc autóját, ami saját példámból kiindulva kellemes és egyben hasznos időtöltésnek bizonyult, hiszen az autó konfigurátor segítségével rengeteg ismeretet és tapasztalatot szerezhetünk és tájékozódhatunk az árakról is. A másik link egy Flash- oldalt nyit meg ahol rövid bemutató után a felhasználó irányíthatja az animációt a számára hasznos opció kiválasztásával. A weblapon továbbá aktív felületek, animációk segítik elő a kommunikációt, gazdagítják a szembarát megjelenést.

10 6. A pszichológiai, ergonómiai szempontok A felhasználói felület jellemzése: A bemutatóban szinte az összes oldal háttérszíne fekete. Egyszerű, stílusos, határozott és kifejező. A fekete a kedvenc színeim közé tartozik, ám egy weblap elkészítése során nem mindig helyes, ha a saját normáinknak teszünk eleget. Fontos hogy adott témához megfelelő színeket használjunk. Ha például a felhasználó megnyit egy Volvo oldalt, valószínűleg nem rózsaszín háttérre számít. A fekete színt tehát azért választottam, mert tökéletesen igazodik a volvo stílusához. A színek kiválasztásakor fontos szempont volt, hogy a megjelenés ne legyen bántó a szemnek. Az élénk színek például kifejezetten zavaróak lehetnek egy weblap esetében. A szöveges részek olvasása közben hamar elfáradhat a szemünk, ezt befolyásolják a fényviszonyok, a különböző monitorok (sík képcsöves, folyadékkristályos képernyő) és azoknak megjelenítési tulajdonságaik (hány Hz- en futnak az egyes felbontások). Sok tényezőtől járul tehát hozzá szemünk károsodásához, ezért érdemes szemkímélő módon összeválogatni a színeket, odafigyelni a kontraszt és fényviszonyokra. A képek összegyűjtésekor elsősorban a minőségre és stílusosságra figyeltem, annak érdekében, hogy maximálisan kielégítsem a célközönség igényeit. A jó minőségű, nagy felbontású képek mindenképpen pozitív hatásuak. tovább

11 6. A pszichológiai, ergonómiai szempontok A weboldal mint multimédia audiovizuális elemekből épül fel, hiszen egyszerre több érzékszervünkre hat. Oktatóprogramok estében fontos, hogy ezek az audiovizuális elemek egyensúlyban legyenek egymással, ám egy weblap esetében ez nem fő kritérium. Ez persze nem jelenti azt, hogy alkalmazása nem célravezető. A munkámat ezért megpróbáltam úgy összeállítani, hogy a tartalmi és szerkezeti elemek harmóniában legyenek egymással. A szövegek mellé aktuális képeket szerkesztettem, hangot pedig csak indokolt esetben használtam, a figyelemmegoszlás elkerülésének érdekében. Az érdeklődés felkeltését legjobban a vizuális elemek szolgálják, ezért animációkkal, videókkal és letölthető képernyő-pihentetőkkel gazdagítottam az egyes oldalakat. Vissza

12 7. Multimédia komponensek vizuális és auditív elemei A weboldal mint multimédia audiovizuális elemekből épül fel, hiszen egyszerre több érzékszervünkre hat. Oktatóprogramok estében fontos, hogy ezek az audiovizuális elemek egyensúlyban legyenek egymással, ám egy weblap esetében ez nem fő kritérium. Ez persze nem jelenti azt, hogy alkalmazása nem célravezető. A munkámat ezért megpróbáltam úgy összeállítani, hogy a tartalmi és szerkezeti elemek harmóniában legyenek egymással. A szövegek mellé aktuális képeket szerkesztettem, hangot pedig csak indokolt esetben használtam, a figyelemmegoszlás elkerülésének érdekében. Az érdeklődés felkeltését legjobban a vizuális elemek szolgálják, ezért animációkkal, videókkal és letölthető képernyő- pihentetőkkel gazdagítottam az egyes oldalakat. tovább

13 7. Multimédia komponensek vizuális és auditív elemei Egy multimédiában nagyon fontos a szöveges részek megjelenítésének módja. A szembarát megjelenítés érdekében leginkább csak egy betűstílust használtam (Times New Roman), és figyeltem az egységes betűméretre. Ez azért fontos, mert az interneten összegyűjtött szöveges dokumentumok különböző stílusokban készültek, ami összeömlesztve nem túl esztétikus. A szöveg formázásánál sok problémát okozott az ékezetes (Ő, Ű), betűk kijavítása. Fontos, hogy a betű színe harmonizáljon az oldal színével, ezért nem használtam élénk, rikító színeket. A készítés során figyelembe kell venni olyan külső tényezőket is, mint például az eltérő monitorok eltérő színvilága, megjelenítése. Ami jól mutat egy átlagos monitoron, az lehet, hogy egy TFT monitoron nézve már bántó a szemnek, ezért leginkább csak fekete, vagy fehér betűszínt alkalmaztam. Kivétel ez alól persze néhány képmagyarázat, megjegyzés (hiszen az esztétika határain belül a változatosság gyönyörködtet), és a hivatkozások megjelenítése. A hivatkozásoknak fel kell kelteniük a figyelmet ezért az aktív linkeknél világos kék, az utoljára nézett linkeknél enyhén fakított lila színt használtam. A szöveges részek nem túl hosszúak, mégis lényegretörőek fenntartva ezzel az érdeklődést és a figyelmet. tovább 7. 1. A szöveges részek Vissza

14 7. Multimédia komponensek vizuális és auditív elemei A képek nagyon fontosak a weblapom szempontjából, hiszen amiről beszélek azt illusztrálnom is kell. Így a felhasználónak nem kell a fantáziájára hagyatkoznia, és sokkal könnyebben megérti a tartalmat. A képekkel persze nem lehet mindent kifejezni, de ha megfelelő mennyiségben alkalmazzuk őket, az sokat segít az olvasásban. Mint tudjuk sokkal jobb olyan oldalt olvasni, amiben legalább minimális képanyag található, egy olyannal szemben, ami csak tömör szöveges részekből áll. Egy multimédiában pedig elengedhetetlenek az illusztrációk, képi elemek. Az Weblap rengeteg letölthető háttérképet tartalmaz, így a felhasználók kedvükre válogathatnak. A képek összeválogatásánál külön figyelmet fordítottam a minőségre. tovább 7. 2. Állóképek Vissza

15 7. Multimédia komponensek vizuális és auditív elemei A nyitóképen rögtön szembe találjuk magunkat a Volvo emblémájával (animált formában). A szerkesztés során az volt a cél, hogy a kép egyszerűsége és a diszkrét megjelenés ellenére mégis eleganciát és stílusosságot sugározzon. Az oldalakat viszont nem zsúfoltam teli a Volvo szimbólumaival, próbáltam diszkrét, szolid hangulatot teremteni, elkerülni a túlzás hatását, ám mégis kiemelni a lényeget. A Volvoról legelőször a biztonság jut eszünkbe. Ezt a Volvo legújabb mottója is alátámasztja: „Cars for Life”, vagyis Életre szóló autók. A legújabb fejlesztésekben is ugyan olyan fontos a biztonság, minőség, megbízhatóság és egyre nagyobb figyelmet kap a környezetvédelem is, aminek egyre fontosabb szerepe van a jövőre nézve. tovább 7. 3. Ikonok, szimbólumok, logók Vissza

16 7. Multimédia komponensek vizuális és auditív elemei A látvány és a figyelemfelkeltés fokozásához Flash animációkat használtam, amelyeket magam készítettem, frame by frame eljárással melynek lényege, hogy minden képkockát egyesével megszerkesztek, a beimprtálás után pedig folyamatos mozgássá generáltatom a programmal. (Macromedia Flash MX) Az animációk a hanghatások után a második legerősebb figyelemfelkeltő elemek, ezért arra is ügyelni kellett, hogy ne vonják el a figyelmet az egyéb tartalmakról. tovább 7. 4. Animációk alkalmazása Vissza

17 7. Multimédia komponensek vizuális és auditív elemei Az aktív felületek lényeges, főként figyelemfelkeltő szerepet töltenek be egy multimédiában, és a felhasználó számára biztosítják az interakció élményét. Az interaktív felületeket leginkább a navigáció terén tudjuk alkalmazni (például a kurzor mozgatására megváltozik a kép). A navigációs gombok elkészítésénél rollovereket használtam. (Interaktive Images). Ez egy interaktív felület, amelyet leginkább menüpontok megjelenítésére használunk, és ami egy weblapon igen látványos összképet eredményezhet. Elkészítéséhez két képre van szükség. Kell egy eredeti és kell egy rollover kép. Az elemeket Adobe Photoshop, képszerkesztő program segítségével szerkesztettem meg: Az eredeti kép hátterének egy másik kép egy részét vágtam ki majd a szűrőből kiválasztottam a rajzolás- króm effektet. tovább 7. 5. Aktív felületek, interaktív felületek Ábra megtekintése Végül a minta szélét minden kép esetében más arányban lefestettem az ecset eszközzel (természetesen feketével). Az oldal külsejéhez igazodva és szinkronban azzal a két kép közti eltérés nem nagy mértékű ám a gyakorlatban használva mégis látványos.Némely képek fölé helyezve az egér kurzort kis idő elteltével előugrik egy kis ablak, amelynek eligazító szerepe van. Ezt a funkciót bármilyen elem Properties ablakában érhetjük el. Vissza

18

19 7. Multimédia komponensek vizuális és auditív elemei Két olyan oldal található a weblapon, amely alatt háttérzene szól. Az egyik a főoldal, ahol nincs sok adat, illetve információ, ezért ide ritmusos, figyelemfelkeltő zenét választottam. A másik ilyen zenés oldal 50 háttérképet tartalmaz, amelyek szabadon letölthetőek. Ide lassabb, elgondolkodtató zenét választottam, így a felhasználó nyugodtan szabadon engedheti a fantáziáját. A képek és a zene együttesen tehát élményfokozó hatást vált ki. tovább 7. 6. Az auditív információk Vissza

20 7. Multimédia komponensek vizuális és auditív elemei Mozgóképet leginkább a kifejezés megerősítése érdekében használtam, ahol tudtam hivatkozásokat készítettem, hogy a szöveg és a képek mellett még jobban illusztráljam a tartalmat. A Trucks menüben például a videó bemutatók által belülről is megszemlélhetjük kamionokat, a Volvo Jelen- Jövő fejezetben pedig autós műsorokból kivágott bemutatókat tekinthatünk meg. 7. 7. Mozgóképi, formanyelvi sajátosságok Vissza Videó megtekintéséhez kattintson ide

21 8. A multimédia Technikai kivitelezése A weblap készítésekor megpróbáltam az egységességre törekedni, a tartalom összeállításánál pedig az volt a célom, hogy a felhasználó a lehetséges elvárásoknak megfelelő információkat adatokat érhessen el.

22 9. Járulékos elemek A Volvo Jelen- Jövő menüpontjából hat képernyő-pihentetőt tölthet le a felhasználó, amelyeket a telepítés előtt egy kis ablakban meg lehet tekinteni, így nem kell attól tartani, hogy olyan elemet töltünk le, amire nincs szükségünk, esetleg nem felel meg ízlésünknek.

23 10. Szubjektív értékelés Ahhoz, hogy használható weblapot készíthessünk érdemes mások munkáit, kész, már meglévő oldalakat megnézni, tapasztalatokat szerezni. Ám figyelmesnek kell lenni, hogy csak a hasznos dolgokat vegyük át. Az alapokat megfelelő idő ráfordításával egyszerűen el lehet sajátítani, ám ettől még nem válunk szakemberekké. Fontos, hogy munkánk során el tudjunk vonatkoztatni saját ízlésünktől, és olyan munkákat készítünk, amelyek megfelelnek a közízlésnek. Mindenkinek lehetnek persze sajátos stílusjegyei, sőt, ezekre szükség is van. Fontos a kreatív gondolkodás, új, egyedi stílusjegyek alkalmazása. A weben hatalmas információmennyiség található, amelyet számos honlap, link és weboldal foglal össze. Ezen oldalak közt persze vannak kifejezetten jó, ám ugyanakkor kifejezetten rossz munkák is. A tapasztalatok alapján, ha a felhasználónak igazán szüksége van valamire, meg kell elégedni azzal, amit talál. Ilyen módon tehát teljesen mindegy, hogy hogyan néz ki az oldalunk, csak tartalmazza a szükséges információkat? Egyértelműen nem! tovább

24 10. Szubjektív értékelés Napjainkra kialakult egy úgynevezett információs társadalom, amelynek központjában a számítógép és az internet áll. Munkánk és szabadidőnk során rengeteg időt töltünk a számítógépek és az internet világában. Amit pedig a képernyőn keresztül kapunk sokban meghatározhatja közérzésünket. Nem mindegy tehát, hogy az információkat milyen formában közvetítjük a felhasználói társadalomnak. Ismernünk kell a közízlést, az aktuális elvárásokat, követelményeket, tudnunk kell, hogy milyen eljárásokat, műveleteket kell alkalmaznunk a kívánt hatások elérése érdekében, jártasnak kell lennünk az adott témákban. A multimédia világát tehát nem elég csak ismerni, meg is kell érteni. Vissza

25 Információ Készítette: Nagy Tamás Szak: Médiatechnológus asszisztens Eszterházy Károly Főiskola E-mail: forrrest@freemail.huforrrest@freemail.hu Tel.: 06 70 2541815

26 Súgó A bemutató tartalma a főoldalon látható. A kívánt opció megtekintéséhez kattintson a szöveg végén található gombra. A menükből bármikor visszatérhet a főmenühöz, ha megnyomja a jobb felső sarokban található bezárás gombot.