Webshop Specifikáció Real Nature Kft. részére Dátum: 2011.02.06. Oldalak: 28 Kapják: Takács Zsuzsanna Dokumentum: Joya-Webshop_specifikacio
Fáy Balázs
+36 30 382 7033 (M)
[email protected] (E)
Tartalomjegyzék Tartalomjegyzék ........................................................................................................................... 1 Dokumentum célja........................................................................................................................ 2 Keret............................................................................................................................................. 2 Fejléc ........................................................................................................................................ 3 Lábléc ....................................................................................................................................... 3 Layoutok....................................................................................................................................... 5 Nyitó oldal ................................................................................................................................. 6 Belső oldal ................................................................................................................................ 8 Hírlistázó oldal ........................................................................................................................ 10 Termékek oldal ....................................................................................................................... 12 Kapcsolat oldal ....................................................................................................................... 14 Regisztrációs oldal.................................................................................................................. 16 Kosár oldal.............................................................................................................................. 17 Megrendelések oldal............................................................................................................... 18 Személyes adatok .................................................................................................................. 19 Boltkereső oldal ...................................................................................................................... 20 Hasznos információk oldal ...................................................................................................... 21 Adminisztrációs felület................................................................................................................ 22 1. számú melléklet – Menüszerkezet – ...................................................................................... 23 2. számú melléklet – Design terv ............................................................................................... 27
SUN Solutions Kft. 1015 Budapest, Batthyány utca 36. Telefon: +36 30 382 7033
Dokumentum célja A dokumentum célja a joya-szoja.hu weboldal specifikációja. Egy alapdokumentum elkészítése, mely tartalmazza a weboldal funkcionalitásának, működésének részletes leírását. Célja a site kialakításának előkészítése. A dokumentum az 1. számú mellékletben csatolt menüszerkezet alapján, az ügyféligények figyelembevételével, valamint az ügyféllel történt közös konzultáció után került kialakításra.
Keret A keret tömöríti azon elemeket, melyek az oldalszerkezetek váltakozása mellett is azonosak maradnak. Minden layout kialakításánál tehát, a keret változatlan marad. Ezen keret részei a következők:
2. oldal
Fejléc A fejléc a weboldalnak a felső logikai egysége, mely a következő elemeket tartalmazza: − Logó A weboldalhoz tartozó logó, valamint kis animáció, melyre kattintva saját ablakban megjelenik az aktuális nyelvi mutáció nyitó oldala. − Üzletág választó − Nyelvválasztó − Websop A webshop elem a következő adatokat tartalmazza: − Felhasználónév − Jelszó − Elfelejtett jelszó − Regisztráció − 1 – Fejléc kép Image kép az adott üzletágnak megfelelően − 3 - Főmenü A főmenü tartalmazza az első szintű menü pontokat. Az adott menüpont fölé helyezkedve lenyílik az adott menüponthoz tartozó almenü, erre rákattintva átvezet az
adott
menüpontra,
illetve
ugróoldalként
megjelenik
annak
elsőszámú
almenüpontja. − 4 - Nyelvválasztó A felhasználó ezen funkció segítségével navigálhat az alábbi nyelvek között, mely saját ablakban jelenik meg (magyar, angol, román, szlovák) Lábléc A lábléc ( 4 ) a weboldalnak az alsó logikai egysége, mely a következő elemeket tartalmazza: -
Kövessen minket Youtube, valamint Facebook hivatkozás
-
Kapcsolat Rákattintva, saját ablakban megjelenik a kapcsolat oldal.
-
Jogi nyilatkozat Rákattintva, saját ablakban megjelenik a jogi nyilatkozat oldal.
3. oldal
-
Impresszum Rákattintva, saját ablakban megjelenik az impresszum oldal.
-
Fejlesztői logotípia Az oldal készítőinek logotípiái
4. oldal
Layoutok A weboldalon megjelenítendő oldalak különböző struktúrával kerülnek kialakításra, ezzel elősegítve az információk tömörítését, megkönnyítve a navigálást a felhasználó számára. Jelen fejezetben kerülnek bemutatásra a különböző oldaltípusok. A Joya-soja.hu esetében a következő oldaltípusokat különítjük el egymástól: − Nyitó − Belső oldal − Hírlistázó oldal − Termékoldal − Kapcsolat oldal − Regisztrációs oldal − Kosár oldal − Megrendelések oldal − Személyes adatok oldal − Boltkereső oldal − Hasznos információk oldal
5. oldal
Nyitó oldal Egy dobozos kialakítású, elosztó típusú oldal kerül kialakításra. A dobozos szerkezet elősegíti a felhasználó számára a weboldalon tárolt információk áttekintését és a gyors navigálást.
A nyitó oldal a következő tartalmi elemekből áll: − Keret Lsd. feljebb, „Keret” című fejezet − Kereső doboz A kereső doboz három füllel rendelkezik, mely fülek mindegyike egy szűrő listát tartalmaz − 4 – Promóciós doboz − Hírlevél doboz Lehetőséget biztosít hírlevélre való feliratkozásra. Ehhez a következő elemeket tartalmazza:
6. oldal
− Név − E-mail cím − Hírek doboz Egymás alatt jeleníti meg listaszerűen a legfrissebb híreket. Egy lista elem a következőket tartalmazza: − Cím − Dátum − Lead − Akciós termékek doboz A doboz akciós termékeket tartalmaz és a következő elemekkel rendelkezik: − Kép − Név − Listaszerű tulajdonságok − Ár − „Kosárba rak” gomb − „Részletek” gomb − Tematikus oldal Ez a doboz ad lehetőséget a tematikus oldallal való összekapcsolásra. A doboz a következő elemeket tartalmazza: − Doboz címe − Lista elemek (Címek melyek linkként funkcionálnak)
7. oldal
Belső oldal Tartalmi oldal, az a típusú belső oldalszerkezet, mely részletesen tartalmazza az adott menüpont leírását. Ezen oldalak a második illetve a harmadik menüszinten elhelyezkedő oldalak.
Ez oldaltípus a következő tartalmi elemekből áll: − Keret Lsd. feljebb, „Keret” című fejezet − Morzsa menü A morzsa menü segít a felhasználónak a navigációban. Megmutatja, hogy jelenleg az oldal a menüszerkezetben navigálva milyen útvonalon érhető el. − Jump to top Az itt lehelyezett hivatkozás lehetőséget biztosít a látogató számára, hogy az oldal tetejére ugorjon, scrollozás nélkül.
8. oldal
− Content area - Tartalmi elemek A Tartalmi oldal a következő elemeket foglalja magába: o H1-H4 o Szöveg Vastag Aláhúzott Dőlt o Kép o Lista o Számlista o Táblázat o Hivatkozás − Menüdoboz A doboz tartalmazza a fő menüpontok 2. illetve 3. szinten elhelyezkedő almenüpontjait. Az adott menüpontra kattintva a felhasználó saját böngésző ablakban elnavigál a kívánt oldalra. − Banner doboz A doboz olyan képi hivatkozást (bannert) tartalmaz, melyre kattintva átvezet a kívánt oldalra. A belső oldalakat saját böngésző ablakban jeleníti meg, a külső hivatkozásokat új böngésző ablakban jeleníti meg.
9. oldal
Hírlistázó oldal Ez az oldaltípus jeleníti meg a híreket, kialakítása segít navigálni a felhasználónak a hírek között. A hírlistázó oldalon előre meghatározott (10 db) számú cikk kerül felsorolásra, a további elemek lapozással érhetők el. A lapozásra kattintva megjelenik a kívánt lap.
Ez az elosztó típusú oldal a következő tartalmi elemekből áll: − Keret Lsd. feljebb, „Keret” című fejezet − Morzsa menü A morzsa menü segít a felhasználónak a navigációban. Megmutatja, hogy jelenleg az oldal a menüszerkezetben navigálva milyen útvonalon érhető el. − Hír címe - Title Itt jelenik meg a hírhez tartozó cím
10. oldal
− Hír létrehozásának dátuma - Date Itt jelenik meg a hír létrehozásának dátuma, mely automatikusan generálódik a létrehozáskor és a következő formátumban kerül kialakításra: éééé.hh. − Hír bevezető szövege - Lead Itt jelenik meg a hír bevezető szövege − Tovább gomb - More A tovább gomb megnyomásával saját ablakban megjelenik az adott hír részletesen − Lapozás A hírlistázó oldalon előre meghatározott (10 db) számú cikk kerül felsorolásra. a további elemek lapozással érhetők el. A lapozásra kattintva megjelenik a kívánt lap. − Jump to top Az itt lehelyezett hivatkozás lehetőséget biztosít a látogató számára, hogy az oldal tetejére ugorjon, scrollozás nélkül. − Menüdoboz A doboz tartalmazza a híreket éves, azon belül pedig havi bontásban. − Banner doboz A doboz olyan képi hivatkozást (bannert) tartalmaz, melyre kattintva átvezet a kívánt oldalra. A belső oldalakat saját böngésző ablakban, a külső hivatkozásokat új böngésző ablakban jeleníti meg.
11. oldal
Termékek oldal A termékek oldal a webshop szerves rész, mely megjeleníti a termék palettát, lehetőséget biztosít megrendelésre, valamint ahhoz, hogy a látogató a leg gyorsabban találja meg az általa keresett terméket rendelkezik szűrő funkcióval.
A termék oldal a következő tartalmi elemekből áll: − Keret Lsd. feljebb, „Keret” című fejezet − 4- Szűrő A kereső doboz három füllel rendelkezik, mely fülek mindegyike egy szűrő listát tartalmaz − Rendezés A találati listát engedi rendezni a következő paramétereknek megfelelően, növekvő illetve csökkenő sorrendbe:
12. oldal
− Típus − Ár − Kiszerelés − Termékek doboz Minden termék doboz az adott termék legfontosabb tulajdonságait tartalmazza, melyek a következők: − Név − Kategória megnevezése − Kép − Rövid leírás (lista szerű megjelenítés) − „Részletek” gomb, mely a termék leíráshoz vezet − Kiszerelés választó − Mennyiség választó − „Kosárba rak” gomb
13. oldal
Kapcsolat oldal A kapcsolat oldal tartalmazza a kapcsolat felvétel szempontjából szükséges adatokat, form formájában.
Ezen oldal a következő tartalmi elemeket tartalmazza: − Content area - Tartalmi elemek A Tartalmi oldal a következő elemeket foglalja magába: o H1-H4 o Szöveg Vastag Aláhúzott Dőlt o Kép o Lista o Számlista
14. oldal
o Táblázat o Hivatkozás − Név Ez a beviteli mező tartalmazza a felhasználó nevét − E-mail cím Ez a beviteli mező tartalmazza a feladó e-mail címét − Üzenet szövege Ez a beviteli mező tartalmazza a feladni kívánt üzenet szövegét. − Elküld gomb A gomb megnyomásával tudja a felhasználó elküldeni az üzenetét. Ezt követően tájékoztató szöveg jelenik meg a számára az üzenet sikeres elküldéséről. − Banner doboz Ezen doboz olyan képi hivatkozást (bannert) tartalmaz, melyre kattintva átvezet a kívánt oldalra. A belső oldalakat saját böngésző ablakban, a külső hivatkozásokat új böngésző ablakban jeleníti meg.
15. oldal
Regisztrációs oldal Mind a három szegmens számára ez az oldal teszi lehetővé az online boltban történő vásárlást.
− Kereső doboz A kereső doboz három füllel rendelkezik, mely fülek mindegyike egy szűrő listát tartalmaz − Form A form a következő típusú mezőket tartalmazza: − Input boksz − Check boksz − Captha − Select list (Legördülő) − Select list (radio button) − Regisztrációs gomb
16. oldal
Kosár oldal Itt tekintheti meg a felhasználó a kiválasztott, megrendelni kívánt termékeit.
Ezen oldal a következő tartalmi elemeket tartalmazza: − Termék neve − Egységár − Darabszám Input mező, a darabszám változtatható − Összeg Automatikusan számolja az értékét a darabszám illetve az egységár szorzatából − Végösszeg Az egyes tételek összesítését jelöli − Megrendelés gomb A gombra kattintva üzenet kerül kiküldésre a megrendelés beérkezéséről. − Újraszámol gomb A gombra kattintva újraszámítható az egyes tételekhez tartozó teljes ár, valamint a végösszeg
17. oldal
Megrendelések oldal Ez az oldal jeleníti meg a regisztráltak számára a megrendeléseket.
Ezen oldal a következő tartalmi elemeket tartalmazza: − Megrendelés dátuma − Megrendelés aktuális státusza − Termék neve − Egységár − Darabszám Input mező, a darabszám változtatható − Összeg Automatikusan számolja az értékét a darabszám illetve az egységár szorzatából − Végösszeg Az egyes tételek összesítését jelöli
18. oldal
Személyes adatok Ezen a layouton állíthatja a regisztrált látogató saját adatait.
Ezen oldal a következő három nagy területhez tartalmaz beviteli mezőket: − Személyes adatok − Szállítási adatok − Számlázási adatok
19. oldal
Boltkereső oldal A boltkereső oldal segít a látogatók számára megtalálni a hozzájuk legközelebb eső boltokat.
Ezen oldal a következő tartalmi elemeket tartalmazza: − Szűrő A szűrő segít a nagy elemszámú lista tartalmának hatékony csökkentésében. A szűrő a következő szűrési lehetőségekből áll: − Település − Utca − Házszám − Bolt − Térkép Rákattintva felugró ablakban előugrik a Google maps térkép az aktuális cím jelölése mellett
20. oldal
Hasznos információk oldal A layout a partnerek számára tartalmazza az összes fontos információt: felhasználható formátumokban a termékekre illetve az aktuális megjelenésekre valamint a cég arculatra vonatkozóan.
Ezen oldal a következő tartalmi elemekből áll: − Név Az aktuális adat neve − Leírás Az aktuális adat leírása − Dátum Az adat frissítésének dátuma − Letöltés Rákattintva az adott tartalom letölthető
21. oldal
Adminisztrációs felület A fejezet tartalmazza a weboldalhoz tartozó, adminisztrációs felületre kivezetett funkciókat. Menüpon Szerkes Szerkesz Szerkeszthető Szerkesz t Alatta zthető thető2 3 thető4 Oldalak Beumtatkoz Meta ás Cím Lead Tartalom adatok Meta Leírás Cím Lead Tartalom adatok Fizetési információk Szállítási információk Joginyilatko zat Impresszum Hírlevél Felhasználó k Hírlevelek Termék Terkmékek kategóriák Neve Aktivitás besorolása alá
Termékek Megrende lések
Név
Rövid leírás
Tulajdonságok Leírás
Név
Leírás
Fájl
Szerkeszth Szerkesz ető5 thető6 Szerkeszthető7
aktivitas aktivitas
Ár (szegmens enkén)
Képek
Akciós (melyik szegmensnek)
Aktív Archív Ügyfelek Személyes adatok Szállítási adatok Fizetési adatok Hasznos információk Besorolás
22. oldal
1. számú melléklet – Menüszerkezet – Fő menüpont Al menüpont Nyitó oldal
Al menüpont 2
Al menüpont 3
Magán személyek Cégünk Rólunk Cégtörténet Filozófiánk A szója Egészséges hatásai Hatóanyagok A szója természete Hírek Hírek oldal Termékek Joya szójagurt (szója-joghurt) Joya natúr szójagurt Joya epres szójagurt Joya barackos szójagurt Joya szójagurt (szója-joghurt) shake
Joya szójaitalok Joya kálciummal dúsított szójaital Joya vanília ízű szójaital Joya csokoládé ízű szójaital Joya almás-limettás szójaital Joya exotic ACE szójaital
Akciók Receptek Boltkereső Kiskereskedők Cégünk Rólunk Cégtörténet Filozófiánk
Magánszemély nyitó oldal Belső oldal Belső oldal Belső oldal Belső oldal Belső oldal Belső oldal Belső oldal Belső oldal Hírgyűjtő oldal Hírek oldal Termék oldal Termék oldal Termék leírás oldal Termék leírás oldal Termék leírás oldal Termék oldal
Joya epres szójagurt shake Joya sárgabarackpassiógyümölcs szójagurt shake
Joya szójaktív ital Joya Finesse főzőkrém
Layout
Termék leírás oldal
Termék leírás oldal Termék oldal Termék leírás oldal Termék leírás oldal Termék leírás oldal Termék leírás oldal Termék leírás oldal Termék leírás oldal Termék leírás oldal Akciók oldal Ugró oldal Boltkereső oldal Kisker nyitó oldal Belső oldal Belső oldal Belső oldal Belső oldal
23. oldal
A szója Egészséges hatásai Hatóanyagok A szója természete Hírek Hírek oldal Termékek Joya szójagurt (szója-joghurt) Joya natúr szójagurt Joya epres szójagurt Joya barackos szójagurt Joya szójagurt (szója-joghurt) shake
Termék oldal Joya epres szójagurt shake Joya sárgabarackpassiógyümölcs szójagurt shake
Joya szójaitalok Joya kálciummal dúsított szójaital Joya vanília ízű szójaital Joya csokoládé ízű szójaital Joya almás-limettás szójaital Joya exotic ACE szójaital Joya szójaktív ital Joya Finesse főzőkrém Akciók Hasznos információk Aktuális megjelenések Offline anyagok Termék anyagok Képek Leírások Joya szója arculati elemek Boltkereső Parnereknek Parnerré válás Regisztráció Nagykereskedők Cégünk
Belső oldal Belső oldal Belső oldal Belső oldal Hírgyűjtő oldal Hírek oldal Termék oldal Termék oldal Termék leírás oldal Termék leírás oldal Termék leírás oldal
Termék leírás oldal
Termék leírás oldal Termék oldal Termék leírás oldal Termék leírás oldal Termék leírás oldal Termék leírás oldal Termék leírás oldal Termék leírás oldal Termék leírás oldal Akciók oldal Belső oldal Hasznos információk oldal Hasznos információk oldal Hasznos információk oldal Hasznos információk oldal Hasznos információk oldal Hasznos információk oldal Boltkereső oldal Belső oldal Regisztrációs oldal Nagyker nyitó oldal Belső oldal
24. oldal
Rólunk Cégtörténet Filozófiánk A szója Egészséges hatásai Hatóanyagok A szója természete Hírek Hírek oldal Termékek Joya szójagurt (szója-joghurt) Joya natúr szójagurt Joya epres szójagurt Joya barackos szójagurt Joya szójagurt (szója-joghurt) shake
Termék oldal Joya epres szójagurt shake Joya sárgabarackpassiógyümölcs szójagurt shake
Joya szójaitalok Joya kálciummal dúsított szójaital Joya vanília ízű szójaital Joya csokoládé ízű szójaital Joya almás-limettás szójaital Joya exotic ACE szójaital Joya szójaktív ital Joya Finesse főzőkrém Akciók Hasznos információk Aktuális megjelenések Offline anyagok Termék anyagok Képek Leírások Joya szója arculati elemek Boltkereső Parnereknek Parnerré válás
Belső oldal Belső oldal Belső oldal Belső oldal Belső oldal Belső oldal Belső oldal Hírgyűjtő oldal Hírek oldal Termék oldal Termék oldal Termék leírás oldal Termék leírás oldal Termék leírás oldal
Termék leírás oldal
Termék leírás oldal Termék oldal Termék leírás oldal Termék leírás oldal Termék leírás oldal Termék leírás oldal Termék leírás oldal Termék leírás oldal Termék leírás oldal Akciók oldal Belső oldal Hasznos információk oldal Hasznos információk oldal Hasznos információk oldal Hasznos információk oldal Hasznos információk oldal Hasznos információk oldal Boltkereső oldal Belső oldal
25. oldal
Regisztráció
Regisztrációs oldal
Lábléc
Oszlop2 Oszlop3 Facebook Youtube Joginyilatkozat Impresszum Kapcsolat
Oszlop4
Oszlop5 Ugró oldal Ugró oldal Belső oldal Belső oldal Kapcsolat oldal
Webshop
Oszlop2 Regisztrációs oldal Kosár oldal
Oszlop4
Oszlop5
Oszlop3
Aktuális megrendelések Archív megrenelések Fizetés oldal
Regisztrációs oldal Kosár oldal Megrendelések oldal Megrendelések oldal Vásárlás oldal
26. oldal
2. számú melléklet – Design terv
27. oldal
28. oldal
