Svetainių kūrimas. Pradžia

INTERNETINIŲ SVETAINIŲ DIZANO KŪRIMO EVOLIUCIJA

 

 

 

Ar galite patikėti, kad pirmajam tinklapiui jau per 20 metų! Jį sukūrė Tim Berners-Lee 1991 m. Tai buvo savotiška skaitmeninės evoliucijos pradžia. Ar jūs prisimenate, kaip viskas atrodė, kai jūs pradėjote naršyti internete? Ar pamenate spalvas, statinį vaizdą ir netinkamo dydžio nuotraukas? Svetainės dizaino kūrimas prasidėjo kaip dėlionė paskleista ant stalo, kai dar nebuvo žinoma, ką su tomis detalėmis daryti, kur padėti, kokią formą, spalvą pritaikyti. Svetainių kūrimas be dizaino pirmiesiems dizaineriams buvo, deja, savaime  suprantamas dalykas. Kaip bebūtų, situacija pagerėjo. Dabar internetiniams puslapiams kurti mes naudojame įvairiausias technologijas, kurios leidžia atvaizduoti tekstą, grafiką, garsus, animaciją ir video informaciją. Šiandien prie interneto galime prisijungti savo telefonais, kompiuteriais ir ieškoti naudingos informacijos, atlikti daugelį paprastų ir sudėtingų užduočių, žiūrėti filmus, parduoti ir pirkti daiktus, apmokėti sąskaitas ir valdyti savo finansus, užsiimti pokalbiais su draugais ir šeima.

 

Tamsūs svetainių kūrimo amžiai (1989)

 

Pati internetinių svetainių kūrimo pradžia buvo tikrai tamsi, kaip ir ekranai – tamsūs su keliais nespalvotais vaizdo elementais, o dizainas sukurtas iš simbolių, naudojant Tab key principą. Grafika tuo metu buvo vienintelė sąsaja tarp kompiuterio ir vartotojo.

 

Lentelės – pradžia (1995)

 

 

Naršyklių, kuriose buvo galima atvaizduoti nuotraukas, atsiradimas buvo pirmas žingsnis svetainės dizaino kūrimo, kurį matome šiandien, link. Priimtiniausias ir lengviausias būdas struktūrizuoti informaciją – buvo lentelių principas, jau egzistuojantis HTML. Taigi dėliojant leneteles į lenteles, apsvarstant priimtiniasius būdus, kaip sujungti statinius elementus su kintamais, buvo sukurtos pirmosios internetinės svetainės, turinčios dizaino elementų. Žinoma, toks kūrybinis darbas iš mūsų reikalavo kantrybės ir laiko, nes buvo sudėtinga palaikyti šias dažnai lūžtančias platformas. Todėl prireikė laiko, kol jos ėmė populiarėti. Nors mes ir sukurdavome nuostabių pavyzdžių, tačiau programuotojams vis dar būdavo sudėtinga įgyvendinti idėjas. Kita vertus, lentelės turėjo keletą privalumų: galimybę sulygiuoti elementus vertikaliai, reguliuoti pagal vaizdo taškus arba procentus.

 

Svetainių kūrėjams į pagalba ateina JavaScript (1995)

 

JavaScript buvo sprendimas HTML apribojimams įveikti, išplečiant statinius HTML puslapius, išnaudojant dinaminį skripto funkcionalumą. Bėda buvo ta, kad JavaScript veikia prototipų principu, kas priverčia tinklą dirbti ir užkrauti informaciją atskirai. Šiomis dienomis mes linkę vengti JavaScript, jeigu tą pačią komandą galime atlikti su CSS. Bet pats JavaScript išlieka stiprus pirminio (jQuery) ir galutinio (Node.js) duomenų apdorojimo įrankis.

 

Auksinė svetainių kūrėjų laisvės era – Flash technologija (1996)

 

 

Norint išeiti iš padėties ir tam tikrų tinklapio dizaino apribojimų, gimė technologija, suteikusi laisvę, kurios niekas niekada neturėjo. Ji leido mums sukurti bet kokias figūras, šablonus, animacijas, sąveikas, naudoti bet kokį šriftą vienoje aplinkoje. Šis svetainių dizaino kūrimo stebuklas – Flash technologija. Su ja interneto svetainės tapo panašios į animacinius filmukus, kai įmanoma įgyvendinti įvairias dizaino fantazijas. Viskas buvo talpinama viename faile ir siunčiama į naršyklę atvaizdavimui. Kol vartotojas turėdavo naujausią Flash versiją ir šiek tiek laiko laukimui, viskas atrodė tarsi paveikta magijos. Tai buvo Flash, įvadinių animacijų, interaktyvių elementų aukso amžius. Gaila, tačiau jis ilgainiui tapo nebe toks patogus, suvartojantis daug energijos ir laiko. Kai Apple nusprendė atsisakyti Flash savo pirmajame iPhone (2007), šios technologijos populiarumas ėmė ženkliai mažėti. Galiausiai ir svetainių kūrimas apsiribojo dizainu be flash.

 

CSS (1998)

 

 

Panašiu metu kaip ir Flash gimė dar geresnis ir mums tinkamesnis techninis metodas svetainių dizaino kūrimui – CSS – pakopinių stilių schemos (angl. Cascading Style Sheets). CSS nėra kodavimo kalba, tai labiau deklaratyvi (aiškinamoji) kalba. Ji leidžia tiksliai aprašyti HTML dokumentų išvaizdą bei išdėstymą. Pirmoji CSS versija toli gražu nebuvo lanksti. Didžiausia problema tapo naršyklių priėmimo rodiklis. Užtruko kelerius metus, kol naršyklės ėmė pilnai palaikyti CSS, iki tol šios schemos dažnai sukeldavo sunkumų, dėl to, kad kai viena naršyklė turėjo naujausias ypatybes, kitai jų pristigdavo. Tai buvo didžiausias mūsų – svetainių kūrėjų – košmaras.

 

Telefonų sukilimas – svetainių tinkleliai ir rėmai (2007)

 

Naršymas internete per mobiliuosius įrenginius buvo tikras iššūkis. Nepaisant skirtingų lygių sistemos, mes susidūrėme su dar didesne problema – turinio atitikimo bėdomis. Ar dizaino elementai tilps į mažą ekraną, ar jų neteksime (nematysime)? Kaip tokiame mažame ekranėlyje patalpinti patrauklias ir akį traukiančias reklamas? Kitas probleminis klausimas – greitis. Tokių puslapių užkrovimas reikalavo daugiau interneto sąnaudų, tuo pačiu ir pinigų. Pirmas žingsnis šios idėjos tobulinimo link buvo stulpelių principo tinklas. Po kelių bandymų laimėjo 960 tinklelių sistema su 12 stulpelių (angl. 12 column grid). Kitas žingsnis – buvo standartizuoti dažniausiai naudojamus elementus, tokius kaip formos, navigacija, mygtukai. Bendrai – vaizdinių elementų ir jų kodų talpyklos sudarymas. Laimėtojai šioje srityje – Bootstrap and Foundation, kurios susijusios su tuo, kad skirtumas tarp tinklapio ir aplikacijos ėmė mažėti. Blogoji pusė buvo ta, kad dizainas vis dar dažnai atrodė toks pats ir mes vis dar negalėjome pasiekti jų, nežinodami kaip kodas veikia. 

 

Prisitaikantis svetainių dizaino kūrimas (2010)

 

 

Puikus vyrukas vardu Ethan Marcotte nusprendė mesti iššūkį egzistuojančiam požiūriui, pasiūlydamas naudoti tą patį turinį, bet skirtingus šablonus dizainui kurti. Jis sukūrė terminą prisitaikantis tinklapių dizainas (angl. Responsive web design). Techniškai vis dar naudojamos HTML ir CSS aprašymo kalbos, todėl tai yra konceptuali pažanga. Dar buvo daug klaidų. Mums reaguojantis reiškia vaizduojantis įvairius šablonus. Taip pat tai yra būdas, kaip pateikti nuotraukas, parsisiuntimo greitį, semantikas ir pan. Klientui, tai reiškia – veikia telefone. Pagrindinis privalumas – turinio analogija – tas pats tinklapis veikiantis vienodai įvairiuose įrenginiuose.

 

Internetinių svetainių standarto laikai (2010)

 

Didesnio kiekio svetainių šablonų sukūrimas reikalauja daugiau laiko. Laimei, nuspręndėme supaprastinti procesą išmesdami žavius šešėlių elementus ir grįždami prie dizaino šaknų – būtiniausio turinio. Pagaliau fotografija, apipavidalinimas, ryškios iliustracijos, turtingi šablonai yra tai, ką mes kuriame šiandien. Paprasti vaizdiniai elementai arba standartinis dizainas (angl. Flat design) yra viso proceso pagrindinė dalis. Esminis privalumas čia yra tai, kad daug daugiau idėjų yra sudedama į kopiją, bendrą žinutės ar turinio hierarchiją. Blizgūs mygtukai yra pakeičiami piktogramomis, kurios leidžia mums naudoti vektorines nuotraukas ir ženklų šriftus. Galimybė pasirinkti tinklapio šriftus, suteikia pridėtinės vertės vaizduojant tekstus kartu su grafiniais elementais. Įdomiausia, jog svetainių kūrimas buvo arti viso šito nuo pat pradžių, tačiau norėta daug ką išbandyti.

 

Šviesi web svetainių ateitis (2014)

 

Pagrindinis svetainių dizaino kūrimo tikslas – padaryti taip, kad tinklapis būtų matomas, lengvai suprantamas ir intuityviai naršomas. Įsivaizduokite, kad mes paprastai išdėstome objektus ekrane ir pasirodo paprastas, naujas kodas. Neturime galvoje objektų tvarkos pakeitimo, bet visiško lankstumo ir kontrolės galimybes. Mes nebeturime nerimauti apie naršyklės suderinamumą, galime sutelkti dėmesį į aktualių problemų sprendimus.

 

Techniškai yra keletas naujų sąvokų, kurios padeda judėti reikiama linkme. New units esantys CSS, tokie kaip vh, vw kaip (peržiūros srities aukštis ir plotis) suteikia daug daugiau lankstumo sudedant elementus. Tai taip pat išspręndžia problemą, kuri glumina daugumą dizainerių – kodėl vertikalus centravimas yra toks sudėtingas naudojant CSS techniką.  Flexbox yra kita sąvoka, kuri taip pat yra CSS dalis. Ji leidžia sukurti šablonus ir keisti juos pagal skirtingas savybes, nenaudojant daug kodų. Ir pagaliau web components (tinklapio komponentai) –  elementų rinkinys, kartu sujungiantis galeriją, prisijungimų formas ir pan. Tai sumažina darbo krūvį, kur elementai tampa sandaros blokais, gali būti pakartotinai naudojami ir atskirai atnaujinami.

 

Kažkurios kalbos mokėjimas – tai tik svetainių kūrimo pradžia, o šių kalbų panaudojimo išmanymas – jau technologiniai dalykai. Interneto svetainių kūrimas yra labai plati ir nuolat tobulėjanti sritis. jQuery, JavaScript, CSS, AJAX, Flash, Silverlight ir kitų technologijų naudojimas šiandien jau laikomas reikalavimu dinaminiams, įspūdingiems, konkurencingiems bei pilnaverčiams puslapiams kurti.

 

Mes rūpinamės adresų užsakymu, svetainės patalpinimu serveryje, el. pašto dėžutės sukūrimu, ryšio su socialiniais tinklais integravimu (Facebook, Twitter, Google+ ir t. t.).

 

Straipsnis parengtas pagal: blog.froont.com/brief-history-of-web-design-for-designers

 

Darbų pavyzdžiai