E-commerce Advanced Application

1

E-COMMERCE JOBS This project (Project number: HU/01/B/F/PP-136012) is carried out with the financial support of the Commssion of the European Communities under the Leonardo da Vinci Programme

EE-AA-Element 3Ver: 1.0

E-commerce Advanced Application

A felhasználói interfész grafikai tervezése

2



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

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

4



Védjegyezési stratégia

• Definíció• Védjegy fajtái– Termék

• logo• grafika• stb.

– Szolgáltatás– Koncepció

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

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>

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

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>

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

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ó

11



Példák

• Függőleges keretfelosztás (cols)• Vízszintes keretfelosztás (rows)• Kevert keretfelosztás (beágyazott keretek)• Navigáló keret (target)• Belső keret

Header

Main

Footer

First Second ThirdMainTitle

Other

M1 M2 M3

Frame1.htm, Frame2.htm or

Frame3.htm

List.htm

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

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

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

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

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

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.

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

19



Komponensek és eszközök kapcsolata

Pozicionálás Stílus módosítás

Esemény kezelés

LAYER CSS JavaScript PHP XML

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 és későbbi verziók

támogatják– Három tag:

• <LAYER>• <ILAYER>• <NOLAYER>

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

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

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

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

• Összetett stíluslap

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

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

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ések használata HTML attribútumok értékeként– <HR WIDTH="&{barWidth};%" ALIGN="LEFT">

• Script használat esemény kezelésnél– onChange and onClick

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.

29



XML és HTML célok

XML HTML

Fejlesztés célja adat leírásra adat megjelenítésre

Összpontosít az adatokra az adatok megjelenítésére

Információ leírás megjelenítés

Az XML-t és a HTML-t különböző célok elérésére fejlesztették ki:

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

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

32



A Flash eszközei

• 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

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.

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/

Documents

E-commerce Advanced Application