Temos Archyvai: Svetainių kūrimas

Dirbame prie UAB „Kaivana“ naujos interneto svetainės

Šiuo metu dirbame prie UAB „Kaivana“ naujos interneto svetainės. Įmonė užsiima trimis skirtingomis veiklomis: didmenine gyvūnų maisto ir priežiūros reikmenų prekyba, turi dvi veterinarijos klinikas bei pristato gyvūnų gydymui skirtus vaistus. Daugiausia klausimų, sprendžiant svetainės architektūrą ir kaip įgyvendinti jai keliamus tikslus, kėlė būtent šių skirtingų veiklos krypčių apjungimas į vieną internetinį tinklapį. Šiame dienoraščio įraše pateikiame keletą būsimos svetainės screenshot‘ų, iš kurių galite įvertinti, Cometos atlikto darbo rezultatą. Šiuo metu vyksta programavimo darbai, kurie neužilgo privalo būti baigti, o svetainė keliaus į serverį ir bus pasiekiama lankytojams. Tarp kitų „Kaivanos“ elektroninių puslapių tikslų buvo poreikis aiškiai pabrėžti verslo diversifikaciją ir patraukliai pristatyti siūlomas paslaugas, atsleidžiant stipriąsias jų puses bei kuriamą vertę klientams.

Keletas būsimos interneto svetainės grafinių pavyzdžių:

Originalūs video naudojimo pavyzdžiai interneto svetainėse

Galbūt visiškai atsitiktinai pro jūsų akis bus praslydęs faktas, kad web‘inis video nebėra jokia egzotika? Tiems, kas yra aktyvūs naršytojai internete ir šį fenomeną jau esate pastebėję, siūlome iš kart pereiti prie žemiau pateiktų originalių video naudojimo interneto svetainėse pavyzdžių. O tiems, kas manė, jog video vis dar yra per daug „nepatogus“ ir reikalaujantis „per daug didelių“ interneto spartos resursų, norint perteikti kokybiškai nufilmuotus vaizdus, galime pasakyti, kad situacija gerokai pasikeitė. Video naudojimo interneto tinklapiuose gana stipriai išsiplėtė, pradėjus naudoti HTML5 technologiją. Video tampa ne tik papildomu informacijos šaltiniu „įklijuojant“ (angl. embed) jį tam tikruose meniu punktuose, naujienose, slaider‘yje ar kt. Video tampa pilnateisiu ir lygiaverčiu vizualiu, estetiniu, dizaino elementu, kuris gali atsidurti bet kurioje interneto svetainės vietoje ir turėti kompozicinius santykius su kitomis svarbiomis ar mažiau reikšmingomis detalėmis.

Tikriausiai galime teigti, kad video naudojimas svetainėse jau yra nebe eksperimentinėje stadijoje. Priešingai, tai – sparčiai plintanti mada. Įvairiuose interneto svetainių vertinimo konkursuose jeigu ne kas antras tai kas trečias tinklapis kaip taisyklė būna papildytas ekstra-originalia ir patraukiančia lankytojų dėmesį video medžiaga. Žinoma, neretai prie jos dirba atskiros filmo medijos kūrimo agentūros. Tačiau kai šių žmonių pajėgos susijungia su programuotojų žiniomis – bendras rezultatas būna nepakartojamas. Žemiau esančiuose pavyzdžiuose tuo nesunkiai įsitikinsite.

Video naudojimas labai tinkamas atskirų prekinių ženklų pristatymams, turizmo svetainėms, tinklapiams pristatantiems muzikos grupes, kitus meninius judėjimus, paslaugas teikiančioms įmonėms.

Kreipkitės, jeigu ir jūs norite kažko neįprasto, judančio ir kinematografiško!

Kokius klausimus užduoti klientui prieš kuriant naują interneto svetainę?

Taip, dauguma interneto svetainių yra kuriamos siekiant gero, kokybiško dizaino arba norint turėti „normalią“ turinio valdymo sistemą. Teisingai, šie dalykai iš esmės yra būtini ir privalomi. Bet jie yra default aspektai kiekvienai svetainei. Ir svarbiausia – tai tėra pagrindas be kurio neįmanomas normalus darbas su svetaine ir normalus prisistatymas klientams. Visgi svarbiausias interneto svetainės tikslas – tai ne galimybė patogiai ją valdyti (tai niekaip nesusiję su jūsų klientais) ir ne išskirtinis ir tobulas dizainas – jame gali likti nepastebėti Jūsų svarbiausi produktai, paslaugos ar nuveikti darbai socialinės atsakomybės srityje. Taigi, kiekviena svetaines kurianti įmonė turėtų turėti savo specifinį klausimyną, kuris turi būti pateiktas klientui, ketinant detaliai išsiaiškinti jo verslo specifiką ir kokią naudą jis norėtų gauti iš interneto svetainės. Tinklapis privalo duoti konkrečią ir išmatuojamą naudą. Jeigu svetainės tikslas – gražiai atrodyti, reikėtų gerai pagalvoti, ar iš vis apsimoka pradėti darbus. Taip pat reikėtų gerai pamąstyti apie svetainių kūrėją, kuris Jums neužduoda jokių klausimų, išskyrus vieną: „Parodykite, prašau, kokios Jums svetainės patinka ir kokios ne?“

Štai 5 būtiniausi klausimai, kuriuos reikėtų užduoti, ketinant kurti naują internetinį projektą. Klausimyną gali sudaryti nuo vieno puslapio iki kelių dešimčių puslapių dokumentas. Kuo didesnis dėmesys būsimam projektui ir bendras supratimas, kad internetinė erdvė ir investicijos į ją turi atsipirkti, tuo daugiau detalių turite aptarti.

1. Informacija apie įmonę: istorija ir biografijos faktai, vizija, produktai/paslaugos, rinkos, veiklos geografija, konkurentai, prekinių ženklų istorija, vizuali identifikacija.

2. Informacija apie klientus: tikslinės rinkos analizė – amžius, įpročiai, gyvenimo būdas, ryšys su internetu, motyvacija ieškoti informacijos apie įmonę internete.

3. Dabartinės įmonės svetainės analizė: adresas, naudojami raktažodžiai ir frazės, turinio strategija, atnaujinimų dažnumas, administratoriaus gebėjimai.

4. Būsimos svetainės vizija: kokius jausmus norite sukurti lankytojams užėjusiems į svetainę; žodžiai, kuriais įmanoma nusakyti vartotojų įspūdį išgirdus apie Jūsų kompaniją; svetainės kurios turi panašų emocinį krūvį, kurio pageidautumėte ir Jūs; ką Jūs ketinate pranešti savo svetainės dėka; kokias galimybes turėtų turėti lankytojai apsilankę svetainėje; kokie svetainės tikslai ir kokie sėkmės matavimo vienetai – lankytojų, pardavimų, kontaktų ir t.t. skaičius per pusmetį/metus ir pan.?

5. Projekto kūrybinė grupė: įmonės paskirti žmonės, kurie geriausiai, greičiausiai ir tiksliausiai galės perteikti informaciją, reikalingą kuriant ir derinant atskirus svetainės elementus; jų atsakomybės apibrėžimas ir įtraukimas į būsimą projekto vystymą.

Paralakso efekto naudojimas tinklapio kūrime

Sukūrėme pirmąjį tinklapį, kuriame naudojamas šiu metu web projektuose populiarus paralakso slinkimo (angl. parallax scrolling) efektas.  Tai Singapūro free ir modernaus džiazo radijo stoties svetainė: www.freejzradio.com. Paralaksinio judėjimo efektas kompiuterinėje grafikoje naudojamas plačiaja prasme. Šiuo terminu nusakomas lėtesnis foninių (angl. background) paveikslų  judėjimas kameros/žiūrovo atžvilgiu palyginus su priešakyje (angl. foreground) esančiais objektais. Toks vaizdinių detalių judėjimas sukuria „gylio“ ir erdvės pojūtį dvimačiame piešinyje ir tarsi įtraukia stebėtoją. Ši technologija atsirado pradėjus naudoti multimplanę kamerą tradicinėje animacijoje nuo maždaug 1940 metų ir buvo išpopuliarinta 1982 m. arcade stiliaus žaidime Moon Patrol.

Paralakso efektas šiuolaikiniame web’e naudojamas įvairiomis formomis:

– paralakso tipo slaider‘iuose: http://www.parallaxslider.com/classic.php

– paralaksiniame scroll’inime: http://themes.goodlayers.com/?theme=slideone

– subtiliuose ir specifinius tikslus turinčiuose web sprendimuose. Mums labai patiko kaip parallax išmaniai panaudotas šiame tinklapyje: http://readwrite.com/. T.y. reklaminė sidebar’o medžiaga juda kurkas lėčiau už pagrindinę svetainės medžiagą, t.y. nuolat būna skaitytojui prieš akis ir savo žinutę perduoda kurkas įtaigiau ir stipriau.

Internete galite rasti tikrai nemažai nemokamų šablonų tiek slaideriams tiek atvirojo kodo turinio valdymo sistemoms paruoštų templates (įskaitant Parallax), kurių pagrindas yra paralaksinis medžiagos pateikimas. Tačiau reikėtų turėti omenyje, kad pagrindinė šablonų problema – jų suderinamumas su įvairiomis naršylėmis. Ne visi paralaksiniu judėjimu pagrįsti tinklapiai kokybiškai bus atvaizduoti tiek staliniuose įvairių dydžių ekranuose tiek mobiliuose įrenginiuose. Ypač daug problemų su fiksuotu meniu, kuris naršant tampa nebeaktyvus. Jeigu neturite programavimo įgūdžių ir turėsite naudotis šablonu, reikės praleisti nemažai laiko ieškant tobulo template. Mums tokio surasti nepavyko. Mūsų www.freejzradio.com mobiliuose įrenginiuose veikia netobulai. Tačiau tai daugelio parallax scrolling svetainių bėda.

Ilgai browse‘inant pavyko surasti tik vieną tokią super svetainę, kurią pasigamino Nike kompanija. Mėgaukitės: http://www.nike.com/jumpman23/aj2012/  Nieko nėra neįmanoma, tiesiog reikia profesionalaus ir originalaus programinio kodo.

Interneto svetainės dizaino karpymas arba hiperaktyvavimas

Kuriant interneto svetainę vienas pirmųjų programuotojo darbų, suderinus su klientu svetainės dizainą, yra jo hiperaktyvavimas. Šis sudėtingai skambantis terminas reiškia gana paprastą užduotį – paversti kompiuterinį dizaino paveikslą programuojamu kodu, į kurį galėtume įrašyti tekstą, įkelti paveiksliuką ar vaizdo filmą. Kaip yra atliekamas hiperaktyvavimas?

Hiperaktyvavimas susideda iš keleto žingsni:

Pirmas etapas – dizaino karpymo planavimas. Programuotojas jo metu suplanuoja svetainės struktūrą pagal kliento pageidavimus ir dizainerio pateiktą kompiuterinį piešinį. Išskiriamos pagrindinės svetainės dalys, kurios kartojasi visuose svetainės puslapiuose. Išanalizuojama, kurie struktūros elementai keisis, o kurie liks statiniai. Pvz., dažniausiai numatoma antraštės (angl. header) dalis, turinio dalis (angl. body), šoninių juostų dalis (angl. sidebars) ir poraštė (angl. footer). Jei dizainas buvo atliktas profesionaliai, piešinio darbiniame faile programuotojas ras pažymėtas visas ekrano dalis, kurios turėtų būti iškirptos. Tai nepalyginamai pagreitina hiperaktyvavimo procesą.

Antras etapas – dizaino elementų iškirpimas. Paveikslų dalis galima iškirpti automatiniu karpymo įrankiu, pvz., tokį turi Adobe Photoshop grafikos paketas. Kiti objektai kerpami preciziškai sužymint svetainės struktūros blokus ir išsaugant juos į atskirus failus.

Trečias etapas – visą dizainą surašyti į HTML hiperteksto kalbos elementus (tekstinius ar grafinius elementus). Tam tikri struktūros elementai įkeliami arba kaip paveikslai, arba kaip struktūrinio bloko fonas, kuriame užrašoma  reikalinga informacija arba nuoroda. Rekomenduojama, jog šiame etape rašomas kodas būtų validuotas pagal W3C standartą arba atitiktų taip vadinamą xHTML standartą.

Tokiu principu, blokas po bloko, sulipdomas visas svetainės karkasas: hiperaktyvuojamas titulinis puslapis, vėliau pagal titulinį puslapį parengiamas vidinio puslapio dizainas, kol pagaliau projektas perkeliamas į turinio valdymo sistemą ir ten atliekamas jo galutinis derinimas ir informacijos įkėlimas.