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.

Az előadások a következő témára: "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."— Előadás másolata:

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 1 EE-AA-Element 3 Ver: 1.0 E-commerce Advanced Application A felhasználói interfész grafikai tervezése

2 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 2 EE-AA-Element 3 Ver: 1.0 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 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 3 EE-AA-Element 3 Ver: 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

4 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 4 EE-AA-Element 3 Ver: 1.0 Védjegyezési stratégia Definíció Védjegy fajtái –Termék logo grafika stb. –Szolgáltatás –Koncepció

5 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 5 EE-AA-Element 3 Ver: 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

6 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 6 EE-AA-Element 3 Ver: 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 –

7 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 7 EE-AA-Element 3 Ver: 1.0 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 … –Ne használjunk elemet a frame-eket definiáló oldalon –A cols vagy rows paraméterek valamelyikét meg kell adni

8 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 8 EE-AA-Element 3 Ver: 1.0 elem Leírás –A elemen belül elhelyezett elemekkel definiálhatjuk a tényleges kerettartalmat. Használat –A és elemek között kell elhelyezni –Nincs záró eleme -

9 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 9 EE-AA-Element 3 Ver: 1.0 elem Leírás –Azon böngészők számára, amelyek nem képesek a frame-eket megjeleníteni létezik egy elem Használat –Nyitó és záró elem … –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 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 10 EE-AA-Element 3 Ver: 1.0 tag Leírás –Belső ablak definiálása Használat –Nyitó és záró elem … –Internet Explorer 5.5 vagy magasabb verziók támogatják –Netscape 4.7–nél még nem alkalmazható

11 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 11 EE-AA-Element 3 Ver: 1.0 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 FirstSecondThird Main Title Other M1 M2 M3 Frame1.htm, Frame2.htm or Frame3.htm List.htm

12 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 12 EE-AA-Element 3 Ver: 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

13 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 13 EE-AA-Element 3 Ver: 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

14 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 14 EE-AA-Element 3 Ver: 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

15 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 15 EE-AA-Element 3 Ver: 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

16 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 16 EE-AA-Element 3 Ver: 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

17 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 17 EE-AA-Element 3 Ver: 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.

18 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 18 EE-AA-Element 3 Ver: 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

19 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 19 EE-AA-Element 3 Ver: 1.0 Komponensek és eszközök kapcsolata PozicionálásStílus módosítás Esemény kezelés LAYER  CSS  JavaScript  PHP  XML 

20 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 20 EE-AA-Element 3 Ver: 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 és későbbi verziók támogatják –Három tag:

21 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 21 EE-AA-Element 3 Ver: 1.0 - 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 … –A rétegek átfedhetik egymást –Lehet átlátszó vagy átlátszatlan –Lehet látható vagy láthatatlan –Egymásba ágyazhatók

22 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 22 EE-AA-Element 3 Ver: 1.0 - 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 … –A rétegek átfedhetik egymást –Lehet átlátszó vagy átlátszatlan –Lehet látható vagy láthatatlan –Egymásba ágyazhatók

23 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 23 EE-AA-Element 3 Ver: 1.0 - 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 … –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 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 24 EE-AA-Element 3 Ver: 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 elemen belül –Külső stíluslap: egy külső CSS fájlban Összetett stíluslap

25 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 25 EE-AA-Element 3 Ver: 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

26 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 26 EE-AA-Element 3 Ver: 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

27 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 27 EE-AA-Element 3 Ver: 1.0 HTML-be beágyazott JavaScript A SCRIPT elem használata – … A JavaScript kód specifikálása külön fájlban –... JavaScript kifejezések használata HTML attribútumok értékeként – Script használat esemény kezelésnél –onChange and onClick

28 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 28 EE-AA-Element 3 Ver: 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.

29 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 29 EE-AA-Element 3 Ver: 1.0 XML és HTML célok XMLHTML Fejlesztés céljaadat leírásraadat megjelenítésre Összpontosítaz adatokraaz adatok megjelenítésére Információleírásmegjelenítés Az XML-t és a HTML-t különböző célok elérésére fejlesztették ki:

30 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 30 EE-AA-Element 3 Ver: 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

31 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 31 EE-AA-Element 3 Ver: 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

32 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 32 EE-AA-Element 3 Ver: 1.0 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 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 33 EE-AA-Element 3 Ver: 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.

34 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 34 EE-AA-Element 3 Ver: 1.0 Referenciák http://whatis.techtarget.com http://www.w3schools.com/ http://mitglied.lycos.de/thomaswebmuhely/mai n/ http://www.w3.org http://wp.netscape.com/eng/mozilla/3.0/handbo ok/javascript/