e-commerce advanced application

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

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

Védjegyezési stratégia

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

• logo• grafika• stb.

– Szolgáltatás– Koncepció

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

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>

<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

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

<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

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

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

Footer

First Second ThirdMainTitle

M1 M2 M3

Frame1.htm, Frame2.htm or

Frame3.htm

List.htm

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

• 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

• 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

• 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

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

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.

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

Komponensek és eszközök kapcsolata

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

Esemény kezelés

LAYER CSS JavaScript PHP XML

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>

<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

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

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

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

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

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

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

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.

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:

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

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

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

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.

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/

e-commerce advanced application

Documents

advanced e-commerce service

augmented reality in mobile commerce application

developed an e-commerce application using broadleaf...

advanced cost accounting - 2011 april - commerce...

advanced application express

suite commerce advanced

magnesium advanced application

chapter 9 advanced e-commerce (dr.maha)

mobile commerce application development

advanced seo for e commerce site

chapter 5 advanced e-commerce (dr.maha)

gao-17-320, advanced manufacturing: commerce could ... ·...

e-commerce mobile web application

e-commerce application development...e-commerce application...

oracle commerce atg: advanced profile management

magento e-commerce store web application …

e commerce application using asp.net mvc4

e commerce application

advanced application architecture

e-commerce application security