1 / 34

E-commerce Advanced Application

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.

hakan
Download Presentation

E-commerce Advanced Application

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. E-commerce Advanced Application A felhasználói interfész grafikai tervezése EE-AA-Element 3Ver: 1.0

  2. 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

  3. 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

  4. 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

  5. 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

  6. 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

  7. <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

  8. <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

  9. <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

  10. <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

  11. 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

  12. 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

  13. 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

  14. 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

  15. 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

  16. 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

  17. 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

  18. 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

  19. Komponensek és eszközök kapcsolata EE-AA-Element 3Ver: 1.0

  20. 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

  21. <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

  22. <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

  23. <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

  24. 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

  25. 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

  26. 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

  27. 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

  28. 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

  29. 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

  30. 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

  31. 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

  32. 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

  33. 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

  34. 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

More Related