View
39
Download
0
Category
Preview:
DESCRIPTION
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. - PowerPoint PPT Presentation
Citation preview
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
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
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
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
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
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ó
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
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
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
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>
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
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
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
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>
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
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
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
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ó
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
EE-AA-Element 3Ver: 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
First Second ThirdMainTitle
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
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
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
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
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
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
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
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
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
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
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
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.
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
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
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
EE-AA-Element 3Ver: 1.0
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
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
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
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
<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
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
<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
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
<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
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
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
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
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
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
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
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é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
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
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
EE-AA-Element 3Ver: 1.0
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
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
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
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
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
EE-AA-Element 3Ver: 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
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.
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
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/
Recommended