340 likes | 452 Views
E-commerce Advanced Application. A felhasználói interfész grafikai tervezése. Főbb témák. Arculattervezés és védjegyezési stratégia Frame -ek A böngészők által támogatott képformátumok Dinamikus HTML tulajdonságok Macromedia Flash szakaszok Következtetések Feladatok. Arculattervezés.
E N D
E-commerce Advanced Application A felhasználói interfész grafikai tervezése EE-AA-Element 3Ver: 1.0
Főbb témák • Arculattervezés ésvédjegyezési stratégia • Frame-ek • A böngészők által támogatott képformátumok • Dinamikus HTML tulajdonságok • Macromedia Flash szakaszok • Következtetések • Feladatok EE-AA-Element 3Ver: 1.0
Arculattervezés • Definíció • Három fő szekciót különböztethetünk meg: • 1. szekció • Az eddig kialakult cégarculat elemzése, az Interneten elérni kívánt arculat megfogalmazása • A honlap tartalmának, struktúrájának kialakítása • 2. szekció • Grafikai elemek kialakítása, vázlatok elkészítése • A honlap megszerkesztése és feltöltése az Internetre egy nem publikus URL alá. • 3. szekció • A honlap végleges adatokkal, szövegekkel való feltöltése • Végleges URL, kompatibilitás kialakítása, regisztrálás keresőkben EE-AA-Element 3Ver: 1.0
Védjegyezési stratégia • Definíció • Védjegy fajtái • Termék • logo • grafika • stb. • Szolgáltatás • Koncepció EE-AA-Element 3Ver: 1.0
Forgatókönyv modell • A forgatókönyv modell készítése általában a számítástechnikai szoftver rendszerek objektum orientált elemzésének első lépése • A forgatókönyv leírja azon tevékenységek vázlatát, amelyek megfelelnek a rendszer működésének. • A forgatókönyv modellek az alábbi részekből állnak: • Szöveges leírás • Diagrammos leírás - segít a szoftver fejlesztőknek a szoftver rendszer komponensei között levő kölcsönhatások megértésében EE-AA-Element 3Ver: 1.0
Frame-ek • Definíció • a böngészőprogramok által láttatott felületet több, egymástól független részre -- keretre - bontja • Előnyök és hátrányok • A Frame elemei • <frameset> • <frame> • <noframe> • <iframe> EE-AA-Element 3Ver: 1.0
<frameset> elem • Leírás • Frame-ek felépítésének definiálása • Meghatározza, hogy hány frame-re legyen felosztva a képernyő és ezek hol helyezkedjenek el • Felhasználás • Nyitó és záró elemek <frameset>…</frameset> • Ne használjunk <body> elemet a frame-eket definiáló oldalon • A cols vagy rows paraméterek valamelyikét meg kell adni EE-AA-Element 3Ver: 1.0
<frame> elem • Leírás • A <FRAMESET> elemen belül elhelyezett <FRAME> elemekkel definiálhatjuk a tényleges kerettartalmat. • Használat • A <frameset> és </frameset> elemek között kell elhelyezni • Nincs záró eleme - </frame> EE-AA-Element 3Ver: 1.0
<noframes> elem • Leírás • Azon böngészők számára, amelyek nem képesek a frame-eket megjeleníteni létezik egy <NOFRAMES> elem • Használat • Nyitó és záró elem <noframes>…</noframes> • Az ebben leírt szöveget azon böngészők jelenítik meg, amelyek nem ismerik a Frame definíciót. • Alkalmazása javasolt EE-AA-Element 3Ver: 1.0
<iframe> tag • Leírás • Belső ablak definiálása • Használat • Nyitó és záró elem <iframe>…</iframe> • Internet Explorer 5.5 vagy magasabb verziók támogatják • Netscape 4.7–nél még nem alkalmazható EE-AA-Element 3Ver: 1.0
Title First Second Third M1M2M3 Header Main List.htm Other Frame1.htm, Frame2.htm or Frame3.htm Main Footer Példák • Függőlegeskeretfelosztás (cols) • Vízszinteskeretfelosztás (rows) • Kevertkeretfelosztás (beágyazott keretek) • Navigálókeret (target) • Belső keret EE-AA-Element 3Ver: 1.0
A böngészők által támogatott kép formátumok • Definíciók • Image • Pixel • Bitmap • dpi • Grafikus adatok tömörítése • Böngészők által támogatott képformátumok • GIF • JPEG • PNG EE-AA-Element 3Ver: 1.0
GIF • GIF: Graphical Interchange Format • Elektronikus képek tárolására alkalmas fájl formátum • Nagyobb tömörítést alkalmaz • Minden böngészőnél alkalmazható • Maximum 256 színárnyalatot különböztet meg • Alkalmas átlátszó hátterű grafikák készítésére • Ajánlott felhasználás EE-AA-Element 3Ver: 1.0
JPEG • JPEG: Joint Photographic Experts Group • Tömörített képformátum • Veszteséges eljárás, a kép minősége a tömörítés arányában romlik • Kódoláskor megválasztható a tömörítés mértéke • Nem alkalmas fekete-fehér képek tömörítésére vagy mozgó grafikák létrehozására • Ajánlott felhasználás EE-AA-Element 3Ver: 1.0
PNG • PNG: Portable Network Graphics • Újabb tömörített képfájl-formátum • A régebbi böngészők nem támogatják • Alkalmas átlátszó hátterű grafikák készítésére • Egyelőre nem támogatja az animációkat • 10-30 %-kal nagyobb tömörítést használ, mint a GIF • PNG előnyei és hátrányai EE-AA-Element 3Ver: 1.0
Animált GIF – GIF89a • Megfelelő animátor programmal az állóképek sorozatát "rövidfilmmé" fűzhetjük össze, és egyetlen GIF állományban tárolhatjuk el – animált GIF • A WEB-böngészők a ".gif" fájlban tárolt képeket annyiszor "játsszák le", ahányszor (általában "végtelen sokszor") ez a .gif fájlban elő van írva • A GIF animáció egyetlen korlátja a méret • Szabadalom védi • GIF89a tulajdonságai • GIF89a fájl felépítése EE-AA-Element 3Ver: 1.0
Képszerkesztők • Lehetőséget adnak képek és animációk létrehozására és módosítására • Példák • Abode Photoshop • Paint Shop Pro, Animation Shop • Picture Publisher • WebImage • PhotoStudio • Painter 2.0 • … stb. EE-AA-Element 3Ver: 1.0
Dinamikus HTML tulajdonságok • Definíció • A HTML, stíluslap és scriptek olyan kombinációja, amely lehetővé teszi a web oldalunk frissítés nélküli dinamikus változtatását. • Három fő komponenst különböztethetünk meg • Pozicionálás • Stílus módosítás • Esemény kezelés • Eszközök • LAYER, CSS, Javascript, PHP, XML EE-AA-Element 3Ver: 1.0
Komponensek és eszközök kapcsolata EE-AA-Element 3Ver: 1.0
Layer-ek • Definíció • Lehetővé teszi, hogy a HTML oldalunkon levő elemeket az oldal tetszőleges pozíciójába helyezzük el. • Felhasználás • Netscape Navigator 4.0 éskésőbbi verzióktámogatják • Három tag: • <LAYER> • <ILAYER> • <NOLAYER> EE-AA-Element 3Ver: 1.0
<LAYER> • <LAYER> - pozicionált HTML tartalom • Ez az elem teszi lehetővé tartalomblokkok pozicionálását. Ezeket a pozícionált tartalom-blokkokat layernek, azaz rétegnek nevezzük • Használat • Nyitó és záró elem <LAYER>…</LAYER> • A rétegek átfedhetik egymást • Lehet átlátszó vagy átlátszatlan • Lehet látható vagy láthatatlan • Egymásba ágyazhatók EE-AA-Element 3Ver: 1.0
<ILAYER> • <ILAYER> - inline layer - soron belüli réteg • Ez az elem lehetővé teszi a tartalom eredeti pozíciótól való eltolását az oldalon, attól a helytől, ahol a tartalom normál kiosztás esetén elhelyezkedne • Használat • Nyitó és záró elem<ILAYER>…</ILAYER> • A rétegek átfedhetik egymást • Lehet átlátszó vagy átlátszatlan • Lehet látható vagy láthatatlan • Egymásba ágyazhatók EE-AA-Element 3Ver: 1.0
<NOLAYER> • <NOLAYER> - alternatív szöveg rétegekhez • A megadott szöveget azok a böngészők jelenítik meg, amelyek nem támogatják a LAYER és ILAYER elemeket • Használat • Nyitó és záró elem <NOLAYER>…</NOLAYER> • Figyelmen kívül hagyják a layereket támogató böngészők • A nyitó és záró elem között levő üzenetet jelenítik meg a layereket nem támogató böngészők EE-AA-Element 3Ver: 1.0
Cascading Style Sheet • CSS definíció • Meghatározza a megjelenítendő HTML stílusát. • Stílus lapokon vagy CSS fájlban (külső) tárolhatók el • háromféleképpen lehet specifikálni • Soron belüli stíluslap: egy egyedi HTML elemen belül • Belső stíluslap: a <head> elemen belül • Külső stíluslap: egy külső CSS fájlban • Összetettstíluslap EE-AA-Element 3Ver: 1.0
CSS alap tulajdonságok • Background: definiálja a háttér szint vagy háttérképet • Border: megadja az elemek keretstílusát • Classification: kurzor, kijelzés, láthatóság • Font: font mérete, stílusa • List: felsorolás jelének alakja és helye • Margin: elemek margója • Padding: az elemek tartalma és kerete közötti távolság • Positioning • Table: táblázat kerete, címsor mérete • Text: szöveg megjelenése EE-AA-Element 3Ver: 1.0
A leíró nyelv • A Script-ek végrehajtása a dokumentum betöltésekor történik és lehetőséget adnak a tartalom dinamikus változtatására. • JavaScript • Felhasználás: dinamikus web oldalak készítésére • Tulajdonságok • HTML kódba beágyazott EE-AA-Element 3Ver: 1.0
HTML-be beágyazott JavaScript • A SCRIPT elem használata • <SCRIPT> … <\SCRIPT> • A JavaScript kód specifikálása külön fájlban • <SCRIPT SRC="common.js"> ...</SCRIPT> • JavaScript kifejezésekhasználata HTML attribútumok értékeként • <HR WIDTH="&{barWidth};%" ALIGN="LEFT"> • Script használatesemény kezelésnél • onChange and onClick EE-AA-Element 3Ver: 1.0
Mi az XML? • EXtensible Markup Language • Köztes nyelv • Más nyelvek leírását tartalmazza • Nincs előre definiált elemlista • Document Type Definition (DTD) – eljárás, amely lehetővé teszi, hogy az egy dokumentumosztályban megengedett elemek meghatározhatók legyenek • Köztes adatok generálása egyszerű • Nem helyettesíthető HTML-lel. EE-AA-Element 3Ver: 1.0
XML és HTML célok Az XML-tés a HTML-t különböző célok elérésére fejlesztették ki: EE-AA-Element 3Ver: 1.0
XML felépítése • Logikai felépítés • Elemek • A jelölőelem nyitó része és a jelölőelem záró része a benne lévő adattal együtt jelent egy elemi egységet • Metaadat: az elem a nevén kívül a tartalmáról is többletinformációt hordoz • Metaadatot a jellemzőkben tároljuk • Fizikai felépítés • Egyedek • Egységek egyedi tárolása • egyed deklaráció segítségével definiálhatunk, ezután az egyedet az egyedhivatkozás azonosítja • Az egyetlen egyed, amelyhez nem rendelünk nevet a dokumentum egyed EE-AA-Element 3Ver: 1.0
Macromedia Flash sessions • Interaktív és multimédiás honlapok készítése • Használat • Vektor grafikán alapuló szerkesztő • Animáció automatikus létrehozása • Multimédia fejlesztő • Automatikusan létrehozza a flash animáció beillesztését a HTML kódba • Lejátszásához Flash Player szükséges EE-AA-Element 3Ver: 1.0
Edit Selecting tools Texts Layers Importing pictures Symbols Animations Sounds Actions Flash movie creating Exporting Számos vektor grafikán alapuló képek Pixel grafikák AVI, GIF, MOV animációk A Flash eszközei EE-AA-Element 3Ver: 1.0
Feladatok • Bontsa fel a képernyőt három keretre, mely tartalmaz egy címsor keretet, egy menü keretet és egy főkeretet. Használjon grafikákat, animációkat és legalább egy flash képet a weboldal kialakításakor. EE-AA-Element 3Ver: 1.0
Referenciák • http://whatis.techtarget.com • http://www.w3schools.com/ • http://mitglied.lycos.de/thomaswebmuhely/main/ • http://www.w3.org • http://wp.netscape.com/eng/mozilla/3.0/handbook/javascript/ EE-AA-Element 3Ver: 1.0