DESIGN dokumentáció
UnasShop DESIGN Dokumentáció
UNAS Online Kft.
2012.12.11
1
DESIGN dokumentáció Tartalomjegyzék Előszó ............................................................................................................................................................................ 3 1. Általános tudnivalók ................................................................................................................................................. 4 2. Kinézet típusok ......................................................................................................................................................... 5 3. Milyen fájlokból épül fel a kinézet? .......................................................................................................................... 7 3.1 Stíluslap fájlok ..................................................................................................................................................... 8 3.2 Képi elemek ...................................................................................................................................................... 10 3.3 HTML fájlok ....................................................................................................................................................... 10 4. A kinézet struktúrájának megváltoztatása ............................................................................................................. 11 4.1 Cserélhető elemek ............................................................................................................................................ 11 4.2 Menük ............................................................................................................................................................... 16 4.3 Általános boxok ................................................................................................................................................ 19 4.4 Termékajánló box ............................................................................................................................................. 22 4.5 Kategória box .................................................................................................................................................... 24 4.6 Kosár box .......................................................................................................................................................... 25
UNAS Online Kft.
2012.12.11
2
DESIGN dokumentáció Előszó Az UnasShop rendszer egy olyan professzionális webáruház rendszer, mellyel rejtett költségek nélkül, gyorsan és kényelmesen készíthető saját webbolt. Rendszerünk bérelhető formában működik, ennek nagy előnye, hogy minden áruház ugyan azt a technikai hátteret használja, ami fejlesztések esetén is egységesen frissül. Minden részletre kiterjedő adminisztráció segítségével magas színvonalú elektronikus üzletet lehet kialakítani, mintha a rendszer kizárólag az ügyfél személyes elképzeléseinek megfelelően lett volna kifejlesztve. A rendszer bérleti díja tartalmazza az üzemeltetési költségeket is, így ezen kívül nincs szüksége másra. A webáruház rendszer szerves része a kinézet is, amelyet a potenciális vásárlók nap mint nap böngészhetnek. Mivel a kinézet egyfajta képet mutat az eladóról, így a vásárlóban kelthet bizalmat vagy bizalmatlanságot egyaránt, ezért célszerű erre nagy hangsúlyt fektetni. A dokumentáció tárgya a webáruház kinézetének felépítése és technikai részleteinek bemutatása. Kérem, a dokumentációt bizalmasan kezelje, azt harmadik fél részére ne adja át! A változtatás jogát fenntartjuk!
UNAS Online Kft.
2012.12.11
3
DESIGN dokumentáció
1. Általános tudnivalók Az egyedi kinézet tervezése talán az egyik legnehezebb feladat, hiszen a kinézet megjelenését úgy kell kialakítani és felépíteni, hogy mind saját magunk elvárásának, mind a látogatóknak maximálisan megfeleljünk. Egy jól kialakított, és megfelelő struktúrában felépített kinézet kialakít egyfajta bizalmi kapcsolatot is az eladó és vevő között, így szinte eladja az áruház termékeit. Az egyedi kinézet tervezésének 3 követelménye: legyen meggyőző, sugalljon profizmust, és nyomatékosítson bizalmat a vásárlóban. Bérelhető webáruház rendszerünkben számos beépített kinézet kifejlesztésével törekedtünk arra, hogy mind a piaci trendeknek, mind a nagyfokú emberi igényeknek minél inkább megfeleljünk. Így kinézeteink többféle struktúrában és típusban, valamint különböző színösszeállításban is rendelkezésre állnak. A beépített széleskörű kinézet típusok ellenére is előfordulhat olyan eset, hogy finomítani szeretne egy adott gyári kinézeten, esetleg módosítani szeretne a megjelenésen, az oldal szerkezetének megváltoztatásával, színek egyedivé tételével. Ebben az esetben beszélhetünk egyedi kinézetről. A gyári kinézetek finomítása és módosítása mellett természetesen lehetőséget biztosítunk tetszőleges egyedi elképzelés megvalósítására is. Ha már rendelkezik cége bemutatására szolgáló weboldallal és szeretne abból ötletet meríteni, pl. néhány box megváltoztatásával, átrendezésével, a többi oldaltól eltérő start oldal használatával stb. Ha ilyen irányú elképzelései vannak, akkor az egyedi kinézet készítésének első lépése, hogy a jelenleg az áruház felületén használt kinézetet letöltse. Az egyedi kinézet letöltése, majd a módosítás utáni feltöltése csak akkor használható, ha az áruház üzemeltető az első kiegészítő modult is megrendeli. A kinézet letöltése az áruház adminisztrációs felületére belépve tehető meg. A Beállítások / Kinézet / Kinézet módosítása menüpontban először az aktuális gyári kinézetet át kell másolnia az egyedi kinézethez, ezt követően letölthetővé válik a teljes kinézet csomag. Az ezt követő részekben részletes tájékoztatást olvashat az UnasShop bérelhető webáruház rendszerben található kinézet típusokról, a kinézethez kapcsolódó fájltípusokról, illetve a kinézet módosításához kapcsolódó minden fontosabb információról.
UNAS Online Kft.
2012.12.11
4
DESIGN dokumentáció 2. Kinézet típusok Az UnasShop bérelhető webáruház rendszerében kialakított kinézeteket alapvetően két típusra lehet osztani: a.) 2 oszlopos
Ennél a kinézet típusnál a megjelenített tartalom alapvetően két részre bontható. Az egyik ilyen szerkezeti egység az oldalsó boxok, amelyek elhelyezésüket tekintve megjeleníthetők a bal vagy a jobb oldalon egyaránt. Az oldalsó boxban jelennek meg pl. a kategóriák, plusz menük, óra, naptár funkciók stb. Boxok felsorolása egy oszlopba:
[UnasDesign - Box1-Title] [UnasDesign - Box1-Content]
/*** A box címe ***/ /*** A box tartalma ***/
A másik, nagyobb szerkezeti egység a weboldal tartalmi elemeinek megjelenítésére szolgál. Itt jelennek meg pl. az egyes kategóriákban található termékek, a beépített menüpontok és plusz menük tartalmai, a részletes keresés stb.
UNAS Online Kft.
2012.12.11
5
DESIGN dokumentáció Az oldal tartalmi részének elemei: [UnasDesign - Title]
/*** Az oldal címe ***/
[UnasDesign - Content]
/*** Az oldal tartalma ***/
b.) 3 oszlopos
Ennél a kinézet típusnál a megjelenített tartalom alapvetően három részre bontható. Különbség a két oszlopos típushoz képest, hogy itt nem 1, hanem 2 oldalsó box is szerepel, az egyik a bal, míg a másik a jobb oldalon. Bal oldali box meghatározása: [UnasDesign – Box2a-Title] [UnasDesign – Box2a-Content]
/*** A bal oldali box címe ***/ /*** A bal oldali box tartalma ***/
Jobb oldali box meghatározása: [UnasDesign – Box2b-Title] [UnasDesign – Box2b-Content]
UNAS Online Kft.
/*** A jobb oldali box címe ***/ /*** A jobb oldali box tartalma ***/
2012.12.11
6
DESIGN dokumentáció A másik, nagyobb szerkezeti egység, hasonlóan a 2 oszlopos kinézet típushoz a weboldal tartalmi elemeinek megjelenítésére szolgál. Az oldal tartalmi részének elemei: [UnasDesign - Title]
/*** Az oldal címe ***/
[UnasDesign - Content]
/*** Az oldal tartalma ***/
3. Milyen fájlokból épül fel a kinézet? Általánosságban elmondható, hogy egy weboldal szerkezetét tekintve nem csupán egyetlen HTML dokumentumból áll. A HTML nyelvű dokumentum csupán a tartalmát és a szerkezetét írja le a weboldalnak. Emellett még szükség van a megjelenés formai szabályait is megadni, amit szaknyelven tipográfiának neveznek. Erre a célra szolgál a stíluslap, amelyet többféleképpen is hozzá lehet fűzni a weboldalhoz. A stíluslap fájlok mellett másik nagy egységet jelentenek a különböző képi elemek, melyek az oldal kinézetét és megjelenítését döntően befolyásolják. Ha és az 1. pontban leírtak alapján sikeresen letöltötte a teljes kinézet struktúrát tartalmazó kinézet csomagot, akkor a betömörített .zip fájlban 2 mappát és az alábbi fájlokat találja. CSS custom.css layout.css design_custom.css editor_body.css editor_box.css IMAGE unas_default.html unas_design.html unas_design_start.html
UNAS Online Kft.
2012.12.11
7
DESIGN dokumentáció 3.1 Stíluslap fájlok Napjainkban a CSS fájlok mérete jelentősen megnövekedett, köszönhetően annak, hogy nem csak szövegek formázására és linkek színezésére használják. Épp ezért ma már egyáltalán nem biztos, hogy érdemes minden stílusformázást 1 db fájlba beleírni. Ezen döntést figyelembe véve rendszerünkben is több CSS fájlt használunk a weboldal stílusának kezelésére. A letöltött kinézet csomagban található egy úgynevezett "css" mappa, amely a kinézet stílusának formázására szolgáló fájlokat tartalmazza. Ebben a mappában több fájl is található, amelyekről most részletesebben is olvashat. a.) custom.css
b.) layout.css
Az UnasShop bérelhető webáruház rendszerben lehetőséget biztosítunk, hogy több stíluslap fájl használatával átláthatóbb kódot lehessen létrehozni a kinézetek szerkesztése során. - layout.css az alapvető szerkezeti egységek definiálására szolgáló stíluslap fájl - custom.css pedig a részletesebb és speciálisabb formázásokra használatos. Természetesen ettől eltérő formázás is lehetséges. Ez esetben fontos a fájlok betöltési sorrendje, melyről részletesebben lejjebb olvashat. c.) design_custom.css A webáruház színeinek kezelésére és a stílus elemek módosítására szolgáló stíluslap fájl. Az itt található kódok tetszés szerint módosíthatóak, új sorok felvitele ebben a fájlban nem célszerű, erre a custom.css fájl alkalmasabb. Azonban nemcsak a webáruház külső megjelenése, hanem az áruház által küldött értesítő levelek kinézete is ezen színek alapján kerül összeállításra. A színek kialakítása során figyelembe kell venni, hogy az egyes szövegek jól olvashatóak legyenek, tehát pl. egy világosabb színű kinézet tervezésénél ne világos betűszínt adjon meg! Példa az alapértelmezett szöveg osztályok stílusának módosítására: .text_small { color:#5e5e5e; font-size:11px; }
.text_small { color:#6c6c6c; font-size:12px; }
.text_normal { color:#5b5b5b; font-size:12px; }
.text_normal { color:#cccccc; font-size:13px; }
UNAS Online Kft.
2012.12.11
8
DESIGN dokumentáció
Egyszerűbb kinézet módosítás (Boxok színezése, betűszín állítás, betűméret növelés stb.) esetén alapvetően csak ebben a fájlban kell módosításokat végrehajtani. d.) editor_body.css Az áruház admin felületén a tartalom megjelenítésére szolgáló nagyobb szerkezeti rész esetén, a szerkesztő háttere (Pl.: szerkeszthető tartalmak kezelése), esetünkben fekete színre formázva.
e.) editor_box.css Az áruház admin felületén az oldalsó box elemek esetén, a szerkesztő háttere (Pl.: banner boxok szerkesztése). Olyankor célszerű sötét háttérszínt beállítani, ha a kinézetben sötét színek dominálnak, amire fehér betűvel kell írni. Ilyenkor az admin felületen a szerkesztőben fehér háttéren nem látszódna rendesen a fehér betű, amivel bonyolulttá válna az elem szerkesztése.
UNAS Online Kft.
2012.12.11
9
DESIGN dokumentáció
A stílus fájlok betöltési sorrendje: 1. layout.css 2. design_custom.css 3. custom.css Így pl. ha ugyanaz a formázás szerepel a custom.css és a layout.css fájlban is, akkor a tényleges érték a betöltési sorrend alapján felülíródik.
3.2 Képi elemek A letöltött kinézet csomagban található egy úgynevezett "image" mappa, amely a kinézethez szükséges valamennyi képi elem tárolására szolgál. Itt találja a jelenlegi kinézethez kapcsolódó képi elemeket, valamint az új képi elemeket is ebbe a mappába kell elhelyezni.
3.3 HTML fájlok Rendszerünk lehetőséget biztosít arra, hogy eltérő szerkezetű és felépítésű legyen a start (kezdő) oldal a többi oldalhoz képest. A letöltött kinézetet tartalmazó tömörített mappában 3 darab .html kiterjesztésű fájl található. a.) unas_design_start.html – start oldal formázására szolgál b.) unas_design.html – a start oldaltól eltérő oldalak formázásra szolgál c.) unas_default.html – ennek értéke 000001 vagy 000002 lehet 000001 – tipikusan akkor kell ezt az értéket adni, ha 3 oszlopos (bal és jobb oldali boxok + középső tartalmi rész) kinézet kialakítása a cél. 000002 - ezt a típust akkor célszerű választani, ha az oldal kialakítása 2 oszlopos (bal vagy jobb oldali + középső tartalmi rész) megjelenésű lesz. Mivel a 2 oszlopos kialakítás során a tartalmi rész szélesebb lesz, mint 3 oszlopos esetén, ezért ezt ezzel az értékadással lehet lekezelni. Abban az esetben, ha a start oldal nem lesz eltérő a többi oldalhoz képest, akkor elegendő csak az unas_design.html fájl használata.
UNAS Online Kft.
2012.12.11
10
DESIGN dokumentáció 4. A kinézet struktúrájának megváltoztatása 4.1 Cserélhető elemek A kinézet kialakítása során tetszőleges számú és paraméterű cserélhető elem létrehozható, mennyiségi korlátozás nélkül. A cserélhető elemek létrehozása a következő formában lehetséges, pl.: [UnasDesign - Element{width:270;height:130;name:element_1}] A cserélhető elemek létrehozásánál egy-egy elemhez több paraméter is beállítható, ebben az esetben az egyes paramétereket egymás után kell beírni pontosvesszővel elválasztva. Lehetséges Paraméterek: - width
A cserélhető elem szélessége pixelben.
- height
A cserélhető elem magassága pixelben.
- name:elem_neve
A cserélhető elem neve, ami az áruház adminisztrációs felületén is látszik a módosítható elemek között. Speciális esetek: 1. A fejlécben szereplő logó neve mindig: head (Ebben az esetben a módosítható elem neve nem head, hanem Fejléc lesz, több nyelv esetén módosítható az adminon.)
2. Start oldali nagy banner neve mindig: banner_start_big (Ebben az esetben a módosítható elem neve nem banner_start_big, hanem Start oldali nagy banner lesz.)
3. Felugró banner neve mindig: banner_popup (Ebben az esetben a módosítható elem neve nem banner_popup, hanem Felugró banner lesz.)
Más esetben a cserélhető elem neve opcionális. Pl.: name:slideshow paraméter esetén a létrejövő div #slideshow_content
UNAS Online Kft.
2012.12.11
11
DESIGN dokumentáció - only_menu:-1
Akkor jelenik meg ez az elem, ha egyetlen CMS (plusz) menü sincs. Ilyenkor egy nagyobb elemet lehet berakni akkor, ha egyetlen CMS menü sem lett még létrehozva. Pl.: ha nincsen egyetlen CMS menü sem létrehozva, akkor egy nagyobb "header_login" kerül beszúrásra, ellenkező esetben viszont egy kisebb méretű "header_login_cms" elem.
}]