spájame
slovenskú
IT komunitu
pridaj sa
Registrácia · Login

Atlas 21.1.2015
Hodnoť článok:
1 0

Webrebel - cesta za splneným snom? Part III

Priemer. Asi tam by som sa zaradil. Taký ten klasický obraz človeka, čo si kráča v dave, chodí do roboty, na obed, domov, servisuje auto, nadáva na internety a večer tlačí do hlavy ďalšiu časť Brejkin Bed. Ale prečo to nezmeniť?

Let's do some coding, shall we...?

Prvé dve časti tejto (zatiaľ) trilógie sú za nami, tretiu zoberieme z ostra a ideme rovno kódiť. Šak čo sa budeme okolo horúcej kaše, no ne?

Dva týždne s yablkom mám teda za sebou. Prvá kapitola (HTML/CSS kurz) má 38 častí + nejaké BONUSY. Vzhliadnutých mám 30 videí, z toho prvá 15-ka je úplný základ. Rozhodol som sa však najprv prejsť celú kapitolu a až potom sa pustiť do nejakého kódenia. Pri náznaku zádrhelu sa vrátiť ku konkrétnemu videu vysvetľujúcemu, prečo mi to kua nejde (a že som sa vracal O_o).

Čo som nakódil?

Najprv som premýšľal, že od základu postavím nejaké blogovisko alebo čosi podobné. No potom som dostal krásny telefonát, ktorý ma nabádal KONEČNE dokončiť e-shop, ktorý som začal "dizajnovať" (úvodzovky nie sú omylom) ešte niekedy v máji 2014.

A tak som si povedal, že svoje putovanie vo vodách webdizajnu budem dokumentovať na tomto e-shope: Sem klikni na ešop yeah
Čaká nás kompletný redizajn všetkého, čo tam máte možnosť dnes vidieť. Wheeee
Note: Neodporúčam klikať na web z mobilného zariadenia. Default Prestashop téma sa síce tvári byť responzívna, no je vysoko nepoužiteľná. A tak do doby, kedy budem písať PART XXX - meníme mobilnú verziu webu si budete musiet vystačit s PC verziou. Koniec oznamu

Prestashop

Pozornému oku neuniklo, že celý šop je postavený na Preste. Skúsenosť za toho polroka mám takú, že pokiaľ sa človek zbytočne nevŕta v admine, tak to ide ;) Presta ako taká je však jedna hnusná šablóna, ktorú si človek buď to musí sám nadizajnovať, alebo si nejakú presta tému kúpiť. Taká téma však stojí rádovo 100+ éčiek a aj tak nemusí plne vyhovovať špecifickým požiadavkám zákazníka. Takže dostať do vienka DIY návod nie je na škodu.
Jeden obrovský problém, ktorý som zo začiatku s prestashopom mal je jeho komplikovanosť, čo sa css súborov týka. Existuje tu síce jeden "global.css" v ktorom sa nachádza hlavné gro kódu, avšak každý nainštalovaný modul má ešte svoje vlastné css. Je teda celkom jednoduché sa v tom celom stratiť (pre pochopenie prikladám pikčrs). Thank god for developer tools.
(hmmm toto môžem rovno premenovať "dizajnujeme vlastnú presta tému")

Globálne css...

...a zvlášť pre každý modul

Pome na to

Začnem teda pekne od vrchu a pustil som sa do štýlovania headeru/nav baru. Takto sme vyzerali skôr, ako som sa do toho pustil

Kliknutím na obrázok full size

Šeredné, no ne?

Tak som začal tým, že som dal najprv do hada celý searchbox a nadizajnoval samotný nav bar. Ponechal som mu pôvodnú šedú, celý som ho však trocha stransparentnil, cca 70%. Prípadne ak to chcete exaktne: rgba(40, 40, 40, 0.7). Ako fallback hodnotu som nechal pôvodnú plnú šedú.

Prešiel som na buttony Kontaktov a User fíčŕs. Zaobalil som ich do dvoch elementov. Sú síce naoko rovnaké, no "Prihlasovaniu" som dal different box-shadow a mám náladu aj na zmenu písma. Obom elementom som dal transition nech to má kus štýl s časom 0.2s. Try for yourself.

Celé som to kus odsadil zhora top:10px a... a som bol v podstate hotový. Nacpal som naspäť searchbox a dal som mu fixný width:380px a border radius rovnako ako predchádzajúcim dvom elementom 6px.

Bojoval som ešte s umiestnením nákupného košíka do navbaru a vyzdieľať mu rovnaké css paramatre ako majú "Kontakty" a "Prihlásenie" avšak šlo to ťažšie ako som dúfal a do uzávierky tejto časti sa mi to nepodarilo spojazdniť. Snáď někdy příšte.

Každopádne výsledok môjho snaženia:
Click for full size imidž

Záverom

...nateraz som s tým ako tak spokojný, ako som napísal, "Prihlásenie" ešte asi kus preladím, aby logicky vyčnievalo nad protiľahlým elementom. A pokúsim sa takisto shopping cart dosadiť, že by dobre bolo. Mám svrbenie na ukazováku, ešte to nemá ten šmrnc aký som tomu plánoval dať. Doladíme.

V ďalšej časti by som chcel:
- dokončiť zvyšok headeru
- pridanie ikon pre "Píšte/Volajte"
- doriešiť bckg obrázok a logo
- dokódiť Home button
- nastylovať "HomeBar"

Until next time

PS: Yeah, that's my real name bičís.

Spät na Part II <<<

Atlas Atlas

Not much to say, YET!


Hodnoť článok:
1 0

0 komentárov k článku:

Komentovať môžu iba prihlásení

Zaregistruj sa cez bezplatnú registráciu alebo použi login cez Facebook (FB Connect)

Prihlás sa tu, ak už máš profil na Zajtra.sk:


Zabudol som heslo

Zajtra.sk > Programovanie > CSS/HTML > Webrebel - cesta za splneným snom? Part III


Kritika

Vieš ako robiť veci lepšie? Pomôž našim odvážnejším členom a skritizuj im projekty!

Reklama

Seriály zo Zajtra.sk

Reklama