Niekads, pakartosiu - niekados, negalvokite, kad web sukurti yra dviejų-trijų dienų darbas.
Viską aiškinsiu kaip kas darosi visiškai nuo pat pradžių, vien todėl, kad žadu daryti savo naują portfolio (pagrindinė kalba - anglų).
I. THINKING
Gal tai skamba kiek kvailokai, bet to reikia. Kitaip sakant - ką jūs kursite: corporate style, portal, portfolio ar tiesiog pasižaisite. Apgalvokite, ar jūs jį naudosite, kiek jam galite ir/ar sugaišite laiko.
[Aš - darysiu naują portfolio. Žadu sugaišt apie 5-7 savaites.]
II. CAST-MARKETING
Nesvarbu ką jūs darysite. Jei darysite portalą - apsižiūrėkite nišas: kur yra rinka perpildyta, kur trūksta to akcentuko, kuris galbūt jūs būsite. Besižvalgant (nesvarbu Lietuvos ar užsienio rinkoje) jūs taip pat matote kaip tie portalai/folio/corporte'ai ir t.t. išsidėstę - koks jų framework'as (karkasai), ant kokių sistemų "kabo", kokie lankytojų srautai. Tuo pačiu, jūs vėl mąstote, kur galite nusižengti nusistovėjusiems standartams, ką pridėti, kad trauktų lankytoją ir dar daug visokių menkų niuansų.
Šitą žingsį galite kartoti kone kasdieną.
[Aš - pradėjau porfolio "kūrimą" (šį žingsnį) prieš geras 2 savaites]
III. FRAMEWORK IN TEXT
Nesuprantate kas tai? Jūs į paprasčiausią tekstinį failą susirašote kaip atrodys ar kas bus naudojama, ar šiaip kokias pastabėles, dėl savo būsimo darbo.
[Aš:
Portfolio:
----- Light;
----- 2 columns;
----- [?] Left aligned // [or centered];
----- [?] Introductory block on top;
----- Navigation horizontal right aligned;
----- Search [JS @ top];
----- No flash;
----- Contacts:
----------- if left: top right;
----------- if centered: left;
----------- + footer;
----- [?] Newsletter;
----- Pages:
----------- works:
------------------- [?] clients;
------------------- detailed info;
----------- about:
------------------- CV.pdf
------------------- [?] HTML CV
----------- [?] serivices;
----------- contacts:
------------------- web form;
------------------- vCard;
Kol kas aš šitame žingsnyje.]
IV. CONCEPT
Šitą dalykėlį buvau "priverstas" atrasti visai neseniai - kai pradėjau darbuotis su vienu žmogumi. Jis man atsiunčia koceptą - aš darau dizainą. Aišku visokius menkniekius paaiškina, kai susėdam kartu (or IM). Konceptop pavyzdys. Dažniausiai jis kuriamas su Axure programine įranga.
[Aš - konceptas yra ČIA]
Pakartosiu - jis skirtas tam, kad turėtum būsimo dizaino "planą/maketą".
V. INSPIRATION v2
Taigi, next step, vėlgi inspiration. Įkvėpimo paieška, detalių ar idėjų generavimas ir t.t. Ir tik vėliau PS įjungimas ir tikrojo dizaino pradžia.
[Aš - pykit-nepykit, bet savo šaltinių, kur ieškau idėjų tikrai neduosiu]
VI. COMING SOON page
Buvau visiškai pamiršęs apie šitą. Tai yra "laukimo puslapis". Šiandien bandysiu padaryt saviškį (2009-11-13). Kaip juos daryti, ką ten dėti, galit paskaityti smashingmagazine.com
[Aš - žiūrėti čia - atliktas kodavimas (HTML+CSS+PHP (mailing system)]
VII. FINAL-beta DESIGN
Taigi pradėjom daryt dizainą - naudojamas tik Adobe Photoshop'as (ir šiek tiek Illustrator'iaus). Bandome neatsilikt nuo dabartinių tendencijų (dominuoja web 2.0), nepersistengt su spalvom (turiu savo 5 spalvų paletę kurią naudojau ir kurdamas logotipą), išlaikant dėmesį ten - kur svarbiausia, žaidžiant su šriftais (fonts), naudoti non-default'inius tik ten, kur bus paveiksliukas, pasiliekant prie savo koncepto, bei nerippinant kitų autorių darbų.
[Aš - žiūrėti čia.]
VII (v2). RE-BRAND
Kadangi sulaukiau daug pašalinių komentarų, dėl nick'o ir puslapio adreso (horde.lt) darau rebrand'ingą - t.y. savo personal įvaizdžio keitimo. Nusipirkau adresą juodikis.lt, kas atitinka mano pavardę. Nuėję jau pamatysite logotipą, kuris yra galutinis (formos atžvilgiu, spalvos derinamos priklausomai kur dedamas logotipas). Taip pat - pradedamas kurti naujas dizainas. Kai bus sukurtas naujas dizainas - tęsiu pamokos rašymą (karpymas, pritaikymas ir t.t.)
VII (v3). RE-BRAND done
Taigi, buvo atliktas rebrand'ingas. Sugalvojau daryt du (vėliau gal jų ir daugės) atskirus puslapius: "apie" ir portfolio.
Tas "apie" puslapiukas bus vCard tipo puslapis (pastebėjau tai ir įkvėpė mane ši nuoroda.
Dizainas atrodo kol kas taip (galbūt bus menki pakeitimai).
Pradinis - http://www.codedpreview.com/folders/f/83126c9d/
Tinklai - http://www.codedpreview.com/previews/f92c5c05/
Kontaktai - http://www.codedpreview.com/previews/6477227b/
Darbai - http://www.codedpreview.com/previews/1c336d3b/
Taigi pradedam kodavimą.
Aš naudosiuos savo senuoju būdu, karpyti ir kodą rašyti rankomis (nors jūs galite naudoti Site Grinder 2 Pro kurį neperseniausiai įdėjau tarp siuntinių).
Trumpai apie karpymą - elementus, kurie negali kartotis iškerpame pilnai (nebent tai dalis, kuri priklauso kartojamui). Dalis, kurios gali kartotis - padarome 1px pločio/aukščio (priklauso kaip kartosis) arba jei tai foninis vaizdas padarome maždaug ~200x200 (maximalios reikšmės)
IIX. Codding in HTML
Taigi, kerpam dalį iš PSD, aprašom dalį CSS'e, parašom HTMLą - skamba paprastai. O taip tikrai nėra.
Kaip karpyt and stuff galit pasimokyt iš šio linko, arba šio, dar iš šio arba daugybės kitų likusių.
[Aš - žiūrėti čia mano HTML'ą]
IX. Rest coding
Tep, tipo viską sukodinom. Patikrinom HTML validumą, CSS validumą, patikrininom, kaip puslapį atvaizduoja skirtingo naršyklės/rezoliucijos/OS. Aišku prakeikiame IE, nes ant jo pusė ko nors neveikia.
Surašom visus likusius scriptus kurie (greičiausiai) jau nebesugadins saito - PHP, JS, prijungiam prie duombazės, jei to reikia.
[Aš - žiūrėti čia pabaigtą saitą]
X. Other
Mums liko labai nebedaug. Pasižiūrim kiek laiko krauna mūsų saitą, optimizuojam jį, padarom neblogą SEO.
Patvirtinam saitą per Google, sukuriam sitemap, įkeliam į Webmaster tools.
Sulaukiam, kol mus suindexuos paieškos gigantai (Google, Yahoo, BING ir kiti)
Laukiam pirmųjų lankytojų, komentarų, klaidų ir kita.
Jei kas neaišku - klauskite.