Médiatechnológus Asszisztens államvizsga tételek

Az előadások a következő témára: "Médiatechnológus Asszisztens államvizsga tételek"— Előadás másolata:

1 Médiatechnológus Asszisztens államvizsga tételek
Multimédia ismeretek 11. Tétel - vázlat

2 11. tétel A WEB oldalak értékei és hiányosságai!
Ismertesse a WEB – oldalak tervezésénel szem előtt tartott szempontokat! Mutassa be egy Ön által tanult szerver oldali programozási nyelv főbb jellemzőit! Mutassa be egy interaktív, dinamikus honlap készítésének lépéseit.

3 A WEB oldalak értékei és hiányosságai!
Design: Fontos az egyéni arculat + A designnak segítenie kell a navigációt is Előfordulhat, hogy a design miatt megnő a letöltési idő – A hosszú letöltési idő miatt, előfordulhat, hogy sokan nem várják meg a letöltést és otthagyják az oldalt – Fölösleges képek akadályozhatják a valódi tartalom elérését! Sok weblap designban gyakori az öncélúság –

4 A WEB oldalak értékei és hiányosságai!
Célszerűség Webhelyünk céljának meghatározásának érthetőnek kell lennie „A cél szentesíti az eszközt!” El kell érni a meghatározott célt Információ A célcsoport számára meggyőző információk szükségesek Hitelesség Az érdeklődés fenntartása céljából olykor meghökkentő információk közlése

5 A WEB oldalak értékei és hiányosságai!
Funkcionalitás, interaktivitás: Aktív tartalom Az aktív tartalom használhatósága Fontos az interaktivitás, az aktív tartalomnak felhasználásra kell ösztönöznie a látogatókat Böngésző kompatibilitás A mai WYSIWYG weblapkészítő szoftverek segítségével már könnyű az ismertebb böngészőkre optimalizálni a honlapot Ha honlapunk szorosan kötődik egy bizonyos böngésző technikájához, az nem előnyös!

6 A WEB oldalak értékei és hiányosságai!
Stabilitás: Fontos, hogy a webhelyen lehelyezett linkek éljenek, a törött linkek igénytelenségről / figyelmetlenségről árulkodnak, továbbá rossz hírnevet keltik oldalunknak Aktualitás! Túl sok hibaüzenet! – Színvilág Egységes szín, egységes arculat Túlzott kontraszt, komplementer szín párok alkalmazása használhatatlanná teszi az oldalt Jó, ha a színeknek és az egységes arculatnak, tipográfiának funkciói is vannak

7 A WEB oldalak értékei és hiányosságai!
Navigálás Áttekinthető honlap struktúra Kiegészítő programok segítik a webhelyen való navigálást Ha sokat kell keresni, míg egy információt meg szeretnénk találni, lerontja a honlap felhasználhatóságát és elidegeníti a látogatókat Jelenlét a világhálón Az oldalnak szerepelnie kell a keresőkben, linkgyűjteményekben META tagek pontos beállítása elengedhetetlen. Linkek Az adott témához fontos a linkgyűjtemény elkészítése

8 A WEB oldalak értékei és hiányosságai!
Hitelesség A megfelelően elkészített honlapnak tükröznie kell a valóságot. Az információknak meggyőzőnek kell lenniük A webhely témájának könnyen megfogalmazhatónak kell lennie Elsőre láthatóvá kell tenni, hogy milyen mélységben foglakozik a honlap az adott témával Ugyanígy érzékelhető legyen hogy a honlap személyes vagy hivatalos Kapcsolat címek közlése, fontos a személyes kapcsolat felvételének a lehetősége is

9 A WEB oldalak értékei és hiányosságai!
Gyakori hibák a weblapok tervezésekor Keresőgépekre való optimalizálás elhanyagolása „Ha egy látogató megtalálja oldalunkat, de nem tudja azonosítani, hogy mit kínálunk neki, akkor továbblép, és lehet, hogy pont a konkurenciánknál fogja megtalálni ugyanazt.” Nem csak a META elemek pontos elkészítése is fontos, de a menüpontok elnevezése, a kereszthivatkozások is meghatározóak Intro oldalak tervezésekor Egy intro oldal nem tartalmaz szövegtesteket, ezáltal a keresőmotorok nem találnak érdemi kulcsszavakat Túl nagy az intro fájl, emiatt lassú a letöltődés

10 A WEB oldalak értékei és hiányosságai!
Gyakori hibák a weblapok tervezésekor A középpontba állított tartalom hiánya HTML és grafikus elemek aránya Csupasz szöveges honlap – „aluldizájnoltság” Túl sok grafika „a bőség zavara” – „túldizájnoltság” Látogatók, ügyfelek igényeinek kielégítése Közérthetőség szem előtt tartása fontos Sokszor a tervező Ego – ja az elsődleges, ez HIBA

11 WEB oldalak tervezésének szempontjai
Kezdőlap kialakítása Ha a kezdőlap jscript, dhtml, flash alapú, biztosítani kell a megfelelő kerülési lehetőséget azoknak a felhasználóknak, akiknek alapesetben a böngészőben le vannak tiltva ezen elemek megjelenítései. (tovább gomb=HTML link formájában) Képek használata Törekedjük minél kevesebb kép használatára. Ne használjunk üres, átlátszó képeket design megoldásokhoz, pozícionáláshoz. Image map használatakor lássuk el a linkeket megfelelő leírással A beillesztett képeknél alkalmazzunk helyettesítő szöveget, gondolva a karakteres böngészőket használókra. (<alt> tulajdonság) A képek internetes felhasználásához 72 DPI felbontást használjunk Tartsuk szem előtt a ma elterjedt szabványos képernyőfelbontásokat (800*600 v. 1024*768)

12 WEB oldalak tervezésének szempontjai
Felület kihasználtság Minél nagyobb felületet foglaljon le a tényleges információ ne hagyjunk üres fehér területeket oldalunkon, kivéve, ha az a jobb átláthatóságot hivatott szolgálni Az oldal igazodjon a méretekhez. Egyaránt jól látható legyen kisebb és nagyobb felbontásoknál is Menürendszer – Navigáció A menü jól látható helyen legyen, de ne foglalja el az egész oldalt Áttekinthető honlapstruktúra alkalmazása Jscript, flash menük esetén biztosítani kell alternatív html alapú menürendszert is, hiszen vannak felhasználók akik az említett megoldásokkal nem rendelkeznek Betűtípusok ne használjunk ismeretlen, vagy ritkán használt betűtípusokat Javasolt betűtípusok: Arial, Verdana, Tahoma (szár, talp nélküli)

13 WEB oldalak tervezésének szempontjai
Hang Háttérzene használata nem javasolt. Ha mégis használjuk, biztosítsuk a kezelését a felhasználó számára. Ki tudja kapcsolni, hiszen gyakran zavaró lehet. Mellőzzük a hangalapú visszajelzéseket Háttérzene és hangok alkalmazásakor vegyük figyelembe az oldal leendő célközönségét Ha a hangulatkeltés a cél, valóban célszerű hangok (például háttérzene) használata Linkek Használjuk a megszokott hivatkozási színeket (kivéve, ha a sablon mást kíván) Világosan közöljük a látogatóval, hogy az adott link hova is viszi Ügyeljünk arra, hogy nem legyenek törött linkek oldalunkon

14 WEB oldalak tervezésének szempontjai
Letöltések Letöltéseknél érdemes több információt is megosztani a látogatóval, mint azt, hogy mi a fájl elérése Tüntessük fel a fájl kiterjesztését, méretét és nevét Sebesség Amennyire lehetséges csökkentsük oldalunk letöltési sebességét A képek megfelelő optimalizálásával Rendezett kódok használatával Regisztráció Ne használjunk kötelező regisztrációt az információk eléréséhez

15 Szerver oldali programozási nyelv A PHP bemutatása
Általánosságban A PHP széles körben elterjedt, nyílt forráskódú szerver oldali programozási nyelv. Hypertext Preprocessor kifejezésből ered. Eredetileg a Personal Home Page angol kifejezés rövidítése volt. (Személyes Honlap) A szerver oldali parancsnyelv jellemzője, hogy a parancsokat nem küldi el az ügyfélnek, hanem azokat a kiszolgáló oldalán a PHP – értelmezőmotor dolgozza fel. A kódok végezhetnek adatbázis lekérdezést létrehozhatnak képeket fájlokat írhatnak – olvashatnak stb.

16 Szerver oldali programozási nyelv A PHP bemutatása
Főbb alkalmazási területek Szerver oldali programozás: Ez a hagyományos, és fő használati formája a PHP-nek. Parancssori programozás: PHP programok szerver és böngésző nélkül is futtathatóak. Gyakran valamilyen ütemező program segítségével (cron *nix és Linux alatt, Task Scheduler Windows alatt) futtatott programokat írnak, vagy egyszerű szövegfeldolgozó szkripteket készítenek. Ablakozós alkalmazások írása: operációs rendszer - független programok írására. Eredetileg honlapok karbantartására hozták létre, és ma is ez a legelterjedtebb alkalmazási területe.

17 Szerver oldali programozási nyelv A PHP bemutatása
A Zend Engine: A programokat futtató mag elnevezése. Nyílt forráskód Nem csak ingyenesen használható, de fejlesztése is ingyenes. Azaz bárki, aki rendelkezik a megfelelő programozási ismeretekkel, fejlesztheti magát a programnyelvet. Hordozhatóság A PHP alkalmas számos operációs rendszeren való használatra. Gyakorlatilag op. Rendszer független.

18 Interaktív (dinamikus) honlap elkészítése.
A DHTML nyelv A DHTML nyelv segítségével interaktivitással ruházhatjuk fel honlapunkat. A DHTML nyelv összetevői a rétegek és stíluslapok valamint a javascript. Valójában a HTML nyelv kibővítése mely új szerkesztési lehetőségeket nyújt a tervezőknek. A HTML nyelv és CSS stíluslapok egybeágyazása javascript segítségével. Interaktív (dinamikus) honlapunkat Macromedia Dreamweaver – el készíthetjük el. A Dreamweaver rétegek használatával oda tehetjük objektumainkat ahová csak szeretnénk, nem kell a táblázatok elkészítésével foglalkoznunk. Abban az esetben, ha adott böngészők nem támogatják a DHTML – t, a Dreamweaver képes a rétegekből azonos hatású táblázatokat készíteni.

19 Interaktív (dinamikus) honlap elkészítése.
Rétegek beillesztése: Beszúró sáv – Common lap – Layer drawing tool / Insert menü – Layer parancs A Preferences párbeszédablak Layers kategóriájában konfigurálhatjuk a beszúrt réteget. (szélesség, magasság, láthatóság, háttér, név stb.) Lehetőségünk van nemcsak az oldalak síkján lehelyezni a rétegeket, hanem meghatározhatjuk egymáshoz viszonyított helyzetüket is. A rétegek rendelkeznek Visibility (láthatósági) tulajdonsággal is. Ezeket a tulajdonságokat a tulajdonságvizsgáló Vis legördülő menüvel állíthatjuk be. A láthatóság beállításával rétegeinkat akkor jeleníthetjük meg oldalunkon, amikor akarjuk. Ettől válik dinamikussá statikusból a weblap.

20 Interaktív (dinamikus) honlap elkészítése.
Rétegek egymásba ágyazása A rétegek belsejében is készíthetünk újabb rétegeket. A Draw Layer eszköz segítségével megrajzolhatjuk az új rétegünket a már létrehozott réteg területén belül. Mindezzel készülő honlapunk már rendelkezik mozgó, dinamikus elemekkel, de az interakciót még nem sikerült megvalósítanunk. Ebben lesznek segítségünkre a Dreamweaver viselkedései, melyek valójában javascript elemek.

21 Interaktív (dinamikus) honlap elkészítése.
A Dreamweaver viselkedései: A viselkedés valójában egy művelet, mely eseményt vált ki. Művelet + esemény = viselkedés A műveleteket a javascript kódok valósítják meg. A szükséges kódot a Dreamweaver helyezi el a weblapon. Rengeteg ilyen viselkedést tartalmaz a Dreamweaver, Csak egy példa, az egérművelet: onMouseOver – a látogató a kurzort egy objektum felé helyezi onMouseDown – lenyomja a gombot (az objektum felett) onMouseUp – felengedi onMouseClick – lenyomja és felengedi a gombot, vagyis kattint Ezen felsorolt viselkedések segítségével látványos, interaktív menüt készíthetünk. Mindezt a Design tábla Behavior fülének segítségével készíthetjük el. Kijelöljük a kívánt réteget és hozzárendeljük a viselkedéseket.

22 médiatechnológus asszisztens II. évfolyam, levelező tagozat 2007.
Somosvári András médiatechnológus asszisztens II. évfolyam, levelező tagozat 2007. Felhasznált irodalom: Matt Zandstra: Tanuljuk meg a PHP használatát 24 óra alatt. Betsy Bruse: Tanuljuk meg a Macromedia Dreamweaver használatát 24 óra alatt