Projektas „Baldūra“ elektroninė parduotuvė Aspilankyti svetainėje Github kodo dalis Apie projektą „Baldūra“ – internetinė baldų parduotuvė, kurios pagrindinis tikslas sukurti modernią, patogią ir vartotojui draugišką internetinę svetainę, pritaikytą skirtingų dydžių ekranams. Ji atitinka šiuolaikinio interneto dizaino principus, o didžiausias dėmesys skiriamas dizainui ir vartotojo sąsajai. Projektas įgyvendintas naudojant HTML, CSS ir JavaScript. Kuriant šią elektroninę parduotuvę buvo laikomasi keturių pagrindinių žingsnių: Aiškiai pabrėžti, kas tai per projektas ir kam jis skirtas. Paruošti ir surinkti visą reikiamą turinį – tekstus, paveikslėlius, vaizdo medžiagą ir pan. Svetainės išdėstymo maketo kūrimas ir išdėstymo komponentų kūrimas. Svetainės kūrimas ir įgyvendinimas. 1. Pagrindinis projekto tisklas Šio projekto tikslas – sukurti internetinę baldų parduotuvę, kuri sudarytų sąlygas verslui efektyviai parduoti baldus, o klientams – įsigyti estetiškas, patvarias ir funkcionalias prekes už prieinamą kainą nei įprasta rinkoje. Todėl tikslinė auditorija – žmonės, siekiantys atnaujinti savo namų interjerą ir pagerinti gyvenimo komfortą, tačiau ieškantys ekonomiškų sprendimų. 2. Turinio planavimas ir ruošimas Kadangi svetainė yra nedidelė, visa pagrindinė informacija pateikiama viename puslapyje, todėl atskiro svetainės žemėlapio ir sudėtingos navigacijos kurti nereikia. Kuriant šios svetainės dizainą buvo pasirinktas ramus ir jaukus stilius. Ramios / Taikios asmenybės stiliaus taisyklės, aprašymas Tai reiškia, kad jau buvo priimti pagrindiniai dizaino sprendimai: pasirinktas aiškiai skaitomas serifinis arba sans-serifinis šriftas, naudojami paveikslėliai su užapvalintais kampais, o spalvų paletę sudaro pastelinės spalvos. Svetainė orientuota į vartotojo gerovę, todėl joje pristatomi kokybiški baldai, pritaikyti skirtingiems kliento poreikiams. Turinys apima informaciją apie parduotuvės privalumus, baldų katalogą, trumpą pristatymą apie pačią parduotuvę bei kontaktinę informaciją. 3. Svetainės maketavimas ir komponentų idėjos Kuriant šią elektroninę parduotuvę nuspręsta visą turinį – reklamas, teikiamas paslaugas, baldų katalogą, kontaktinę informaciją ir trumpą pristatymą apie svetainę pateikti viename puslapyje. Turinį suskirstyti į atskiras sekcijas ir pasinaudojus įkvėpimu iš kitų internetinių puslapių, kiekvienai sekcijai parengti atskirus maketus. Kiekvienoje sekcijoje apgalvoti konkretūs elementai arba jų grupės, kurie geriausiai atspindi parduotuvės profesionalų įvaizdį, žemiau pateikiamos nuorodos į tuos puslapius iš kurių pritaikytos šios idėjos: Rascals Baby Mason Garments Eastern Standart Provisions Gifts Hire Gautas Rezultatas: Logotipas kartu su navigacija Pagrindinė reklaminė sekcija Logotipo kartu su navigacija ir Pagrindinės reklaminės skilties maketas Logotipo su navigacijos idėjos iš kitų svetainių Privalumai ir informacija apie parduodamus produktus Privalumai ir informacija apie parduodamus produktus sekcija Privalumų ir informacijos idėjos iš kitų svetainių Produktų katalogas Produktų katalogo maketas Produkto kortelės maketas kartu su produktų filtru Idėjos kuriant produktų katalogą Kaip nusipirkti prekes Kaip nusipirkti sekcijos maketas Kaip nusipirkti sekcijos idėja Trumpas svetainės aprašymas ir kontaktinė informacija Apie mus ir kontaktai sekcijos maketas Apie mus maketo inspiracija kontaktams Poraštė Poraštės maketas 4. Svetainės kūrimas ir įgyvendinimas Kuriant šį internetinį tinklalapį nuo pat pradžių buvo taikomas prie skirtingų ekranų dydžių prisitaikantis dizainas. Dėmesys buvo skiriamas vartotojo patogumui, kad svetaine būtu patogu naudotis tiek telefone, tiek planšetinėje ar kompiuteryje. Siekta, kad tekstas būtų įskaitomas, spalvų kontrastas – pakankamas, išdėstymas ir vaizdiniai elementai lankstūs. Medijos užklausos leidžia koreguoti tam tikrus elementus priklausomai nuo ekrano dydžio. Apibendrinant, projekte taikomi devyni dizaino principai: Tipografija Spalvos Vaizdai ir iliustracijos Piktogramos Šešėliai Kampų užapvalinimas Tuščia erdvė Vizualinė hierarchija Vartotojo patirtis 4.1 Tipografija Tipografija — tai raidžių, teksto išdėstymo menas ir technika, kurių tikslas yra padaryti rašytinę kalbą lengvai skaitomą ir vizualiai patrauklią, kai ji pateikiama ekrane. Visi dydžiai nurodyti ne pikseliais, o rem vienetais. Rem vienetai yra CSS matavimo vienetai, priklausantys nuo šakninio elemento <html> šrifto dydžio. Todėl, jei vartotojas naršyklės nustatymuose padidins arba sumažins šrifto dydį, pikseliais apibrėžti elementai išliktų nepakitę (pikselis yra absoliutus vienetas), o naudojant rem — visi svetainės dydžiai proporcingai padidės arba sumažės, kas gerina prieinamumą ir lankstumą. Jeigu numatytas šrifto dydis yra 16 pikselių, tai 1rem bus lygus tiems 16 pikselių. Kuriant šį tinklapį nuspręsta, kad 1 rem atitiktų 10 pikselių — taip patogiau skaičiuoti, todėl reikėjo paversti šrifto dydį iš 16 į 10 pikselių. Pavyzdžiui, norint, kad šrifto dydis būtų 22 pikseliai, reikia naudoti 2.2 rem. 1 rem pavertimas į 10 pikselių Atsižvelgiant į pasirinktą ramų ir jaukų dizaino stilių, tinklalapyje naudojamas švarus švarus sans-serif šriftas „Work Sans“ iš Google Fonts puslapio. Sans-serif šriftas „Work Sans“ Buvo sukurta šrifto dydžių sistema apribojanti galimus teksto dydžių pasirinkimus. Tai supaprastina sprendimų priėmimą ir leidžia išvengti eksperimentavimo su kiekvienu atskiru dydžiu – tekstui naudojami tik iš anksto apibrėžti dydžiai, užtikrinantys nuoseklumą ir spartesnį darbą. Taip pat buvo nustatyti teksto svoriai, ryškumas ir eilučių aukštis, kurie taikomi antraštėms ir pabrėžimams. Tekstas lygiuojamas dešinėje pusėje, o vienoje eilutėje ribojamas simbolių kiekis, tam, kad turinys būtų lengviau skaitomas. Naudojami šrifto dydžiai, ryškumas, tarpai tarp eilučių ir raidžių Sukurta tipografijos dydžių sistema, ryškumas, tarpai tarp eilučių ir raidžių 4.2 Spalvos Kadangi elektroninė parduotuvė siūlo įvairius baldus, pagrindine spalva pasirinkta ruda — ji asocijuojasi su gamta, ilgaamžiškumu ir komfortu. Pagrindinė svetainės spalva Ši spalva naudojama visame tinklalapyje, o iš jos naudojant įrankį Tint&Shade Generator sugeneruojama visa teminė spalvų paletė, kurią sudaro šios spalvos atspalviai ir šešėliai. Sugeneruota spalvų paletė Atspalvių ir šešėlių panaudojimas tinklalapyje Teksto spalva nėra visiškai juoda — pagrindiniam tekstui naudojama šiek tiek šviesesnė tamsi pilka, antraštėms parinkta tamsesnė pilka, o akcentams kai kur taikomas tamsiausias teminės spalvos atspalvis. Konkrečios spalvos pasirenkamos atsižvelgiant į foną, siekiant užtikrinti pakankamą kontrastą, kuris yra itin svarbus teksto įskaitomumui ir prieinamumui. Projektuojant svetainę sąmoningai buvo laikomasi teksto kontrasto reikalavimų: pagrindinis tekstas atitinka 4.5:1 kontrasto santykį, o antraštėms taikomas apie 3:1 kontrastas, atsižvelgiant į jų dydį, ryškumą ir foną. Kiekvieną teksto kontrastą tikrinau su šiuo įrankiu Coolors – Contrast Checker. Kontrasto tikrinimas su įrankiu coolors.co/contrast-checker Patikrinus spalvų kontrastus ir sugeneravus pagrindinę spalvų paletę, sudaromas dokumentas, kuriame surašyti visi dizaino sprendimai. Tai padėjo išlaikyti spalvų nuoseklumą visame projekte. Spalvos naudojamos šiame projekte 4.3 Vaizdai ir iliustracijos Atsižvelgiant į svetainės asmenybę yra pasirenkamos fotografijos arba iliustracijos, kurios laikytųsi vieningo vizualinio stiliaus. Vaizdai parinkti taip, kad aiškiai perteiktų elektroninės baldų parduotuvės pobūdį ir derėtų kartu su pateiktu turiniu. Vaizdai naudojami kaip foninis elementas, o ne pagrindinis dėmesio taškas, todėl jiems taikomas švelnus spalvinis perdengimas, sumažinantis vaizdų kontrastą ir leidžiantis tekstui bei svarbiausiam turiniui likti pirmame plane. Nuotrauka su perdengimu Nuotrauka be perdengimo Visi svetainės vaizdai yra prisitaikantys prie skirtingų ekranų — jų dydžiai nurodyti procentais, todėl vaizdai

Projektas Mano tinklaraštijos užrašai Aspilankyk Github kodo dalis Apie projektą Šios svetainės tikslas suteikti galimybę vartotojui rašyti savo užrašus, juos išsaugoti, perskaityti bei redaguoti. Ši svetainė realizuota iš serverio pusės „Node.js“ pagalba, o iš kliento pusės pasitelkiant „EJS“ (Embedded JavasScript). Užrašų išsaugojimas atliekamas dviems būdais: lokaliai išsaugojamas užrašų rinkinys arba prisijungus/užsiregistravus svetainėje  naudojama „PostgreSQL“ duomenų bazė. Plačiau bus aprašyta kekvieno punkto realizacija. Naudojami NPM moduliai. Užrašų išsaugojimas lokalioje atmintyje. Duomenų bazė ir jos naudojimas kliento paskyros sukūrimui, užrašų išsaugojimui. Slaptažodžių bei turinio šifravimas, svetainės duomenų paslėpimas. 1. Naudojami NPM moduliai Sąrašas modulių šioje web aplikacijoje „Node.js“ yra serverio JavaScript vykdymo aplinka. Leidžianti kurti internetines web aplikacijas. Kartu su šia platforma yra naudojami ir jos NPM (Node Package Manager) moduliai, siekiant palengvinti kodavimą. „Express“ modulis, supaprastina Node.js aplinkos funkcionalumą keliomis kodo eilutėmis, kas yra daug greičiau ir efektyviau. „Method-override“ modulis leidžia naudoti ne tik pagrindinius HTTP metodus „GET“ ir „POST“, bet taip pat ir „PUT“, bei „DELETE“, kur  kitu atveju šių nepalaikytu ir nebūtų galima jų naudoti. „PUT“ metodas kodo skiltyje „Pg“ modulis leidžia prijungti svetainę prie „PostgreSQL“ duomenų bazės ir atlikti jos užklausas. „Bcrypt“ modulis skirtas užšifruoti kliento slaptažodžius, prieš išsaugojant juos duomenų bazėje tam, kad kiti asmenys negalėtų pasinaudoti šiais duomenimis. Kliento duomenys „PostgreSQL“ duomenų bazėje „Express-session“ modulis leidžia sukurti serveyje slapukus, leidžiančius klientui neprisijungti prie savo paskyros, jei šis išjungtų naršyklę. „Mano tinklaraštijos užrašai“ sesija trunka 30 minučių, po kurių vartotoją automatiškai atjungs nuo savo paskyros. Aprašytos sesijos funckijos naudojant „Express-session“ Ką mato klientas, prisijunges prie savo paskyros. „Passport“ modulis skirtas perduoti kliento prisijungimo duomenis į sesiją tam, kad nereikėtu iš naujo vesti prisijungimo vardo ir slaptažodžio tol kol sesija truks. „Caesar-encrypt“ modulio dėka kliento užrašai yra šifruojami privatumo tikslu. „dotenv“ modulis paslepia visus serverio svarbius slaptažodžius, tokius kaip sesijos saugos kodas, duomenų bazės prisijungimo duomenis, tam, kad kiti negalėtų pasinaudoti šiais duomenimis ir pasisavinusią informaciją blogiems tikslams. „dotenv“ realizacija svarbių slaptažodžių privatumui „EJS“ modulis arba „Embedded Java Script“ yra šablonų variklis leidžiantis sukurti html puslapius su minimaliu kodu, bei gali įterpti duomenis į šį html puslapį kliento pusėje, kitaip tariant dinamiškai atvaizduoja duomenis bei leidžia juos įterpti su JavaScript. Kaip atrodo kliento duomenys duomenų bazėje, užšifruoti „caesar-encrypt“ dėka 2. Užrašų išsaugojimas lokalioje atmintyje Ši funkcija realizuota taip, kad tikrinama ar vartotojas nėra prisijunges į sesiją, jeigu ne tada naudojamas šis metodas. Sukūriamas kintamasis ir vartotojui suvedus atitinkamus duomenis į laukelius, šie apdrojami ir įdedami į užrašų rinkinį. Užrašo kūrimas interneto svetainėje Vėliau šis rinkinys yra atvaizduojamas, jį galima peržiūrėti, redaguoti ir ištrinti. Kadangi šis rinkinys yra saugomas lokalioje atmintyje, tam kad neapkrauti atminties, šie užrašai yra pašalinami kas 20 valandų. Kodo dalis, jeigu vartotojas išsaugo užrašus neprisijungęs prie paskyros 3. Duomenų bazė ir jos naudojimas kliento paskyros sukūrimui, užrašų išsaugojimui „PostgreSQL“ duomenų bazė naudojama išsaugoti kliento prisijungimo vardą bei slaptažodį, tam, kad kitą kartą prisijungus šioje svetainėje jis rastu savo užrašus. Šie užrašai priskiriami vartotojo ID ir pagal tai vartotojas gali kurti, peržiūrėti ir trinti savo paties užrašus. Sėkmingai prisijungus ar prisiregistravus susikuria sesija, kuri leidžia automatiškai prisijungti prie šios web aplikacijos jei netyčia išjungtų naršyklę ar skirtuką. Registracijos laukas svetainėje Registracijos dalis iš serverio pusės Taip pat svarbu paminėti, kad „Passport“ modulis naudojamas serializuoti ir deserializuoti vartotoją. Serializacija skirta tam, kad būtų saugomi vartotojo duomenys seanso metu, taip pat sprendžia kokie duomenys turi būti saugomi. Deserializuoti tam, kad serveris turėtu prieigą prie vartotojo duomenų. Serializacijos ir deserializacijos kodo dalis 4. Slaptažodžių, bei turinio šifravimas, svetainės duomenų paslėpimas Sėkmingai užsiregistravus  slaptažodis yra užšifruojamas „Bcrypt“ moduliu „Hash“ pagalba, tai yra vietoje slaptažodžio „123456“ gaunamas simbolių rinkinys, didesniam saugumui šis rinkinys yra vėl užšifruojamas bcrypt pagalba ir gaunamas kitas simbolių rinkinys, šis vėl šifruojamas ir taip atliekama 12 kartų, kuo didesnis kartų kiekis tuo ilgiau užtruktų šį slaptažodį iššifruoti. Šifruojamas slaptažodis „Bcrypt“ Hash pagalba. Informacija kiek užtruktų nulaužti neužšifruotą slaptažodį Kaip matome slaptažodį „123456“ galima iššifruoti neužtrukus nė sekundei, bet jeigu tai butų užšifruota bcrypt pagalba, matome, jog užtruktų labai daug metų. Informacija kiek užtruktų nulaužti užšifruotą slaptažodį Galiausiai patys užrašai yra šifruojami cesario šifru, tai yra kekviena abecelės raidė perstumiama per tam tikrą skaičių. Pavyzdžiui jei tas skaičius būtų 5, tai raidė „A“ butū perstumta per 5 abecelės pozicijas ir gautusi raidė „E“, tai yra labai paprasta ir lengva užšifruoti ir dešifruoti. Šie abu moduliai „bcrypt“ ir „caesar-encrypt“ užtikriną stiprų vartotojo duomenų saugumą. Turinio šifravimas su „Caeser-encrypt“ Taigi ši svetainė užtikrina kliento duomenų saugumą, leidžianti kurti, žiūrėti ir ištrinti savo užrašus.

Projektas Lietuvos krepšinio komandos Aspilankyk Github kodo dalis Apie projektą Šią web aplikaciją kūriau naudodamas Node.js (Javascript vykdimų aplinka leidžianti kurti serverius, žiniatinklio programas). Kartu su šia aplinka naudojau ir „Express“, bei „EJS“ NPM (Node package manager) modulius. „Express“ modulis supaprastina Node.js aplinkos funkcionalumą keliomis kodo eilutėmis, kas yra daug greičiau ir efektyviau. „EJS“ modulis arba „Embedded Java Script“ yra šablonų variklis leidžiantis sukurti html puslapius su minimaliu kodu, bei gali įterpti duomenis į šį html puslapį kliento pusėje, kitaip tariant dinamiškai atvaizduoja duomenis bei leidžia juos įterpti su JavaScript. Tikslas šios webaplikacijos yra pateikti vartotojui sąrašą komandų, kurias jis pasirinkęs galėtų gauti apie jas informacijos, taip pat surasti tuos žmonės, kurie priklauso toms krepšinio komandoms. Duomenis apie komandas naudojau iš savo paties sukurtos Aplikacijų programavimo sąsajos (toliau – API). Tam, kad tuos duomenis gauti buvo pasitelktas NPM modulis „Axios“. Šis modulis atsiunčia duomenis iš API ir konvertuoja juos iš string failo į JavaScript object failą, kurį galima manipuliuoti iš serverio pusės (toliau backend) ir atvaizduoti kliento pusėje (toliau frontend). Sąrašas naudojamų modulių šiame projekte Visa informacija yra atvaizduojama tame pačiame puslapyje, gaunami nauji duomenys užsirašo ant senų arba tiesiog šie duomenys yra pašalinami taip jie dingsta ir vartotojas jų nemato. Visa internetinė aplikacija sukurta viename puslapyje Konkretus pavyzdys dinamiško atvaizdavimo. Vartotojas pasirenka, apie kurią komandą norėtų sužinoti daugiau, šiuo atveju apie Kėdainių „Nevėžis – Optibet“. Internetinio puslapio komandos pasirinkimas Paspaudus ant norimos komandos, Backend dalyje gaunama internetinio adreso nuoroda su komandos identifikaciniu numeriu, pagal jį ir bus gaunami tie duomenys, kurie priklauso tos komandos identifikaciniam numeriui. Kėdainių „Nevėžis – Optibet“ duomenų atvaizdavimas html puslapyje „EJS“ varikliu. Duomenų gavimas “Axios” modulio pagalba, turint komandos identifikacijos numerį Jei norima surasti konkretų žmogų pagal pozicija, web aplikacijoje yra sukurti laukeliai leidžiantys ieškoti pagal poziciją, vardą arba pavardę. Ieškojimas pagal poziciją iš svetainės pusės Duomenų gavimas apie konkretų žmogų, duomenų manipuliacija serverio pusėje Atvaizduojamas paieškos rezultatas Taigi ši web aplikacija leidžia susipažinti su Lietuvos krepšinio klubais, jų žaidėjais, sudėtimi naudojant duomenis ir imant juos iš savo pačios sukurtos API.

Projektas Aplikacijų programavimo sąsaja API pavadinimu – Lietuvos krepšinio komandos Aspilankyk Github kodo dalis Apie projektą API (Aplication programming interface) – tai sąsaja tarp programinių įrangų, kurios gali siųsti viena kitai, duomenis, komandas. Kurdamas šią aplikaciją naudojau Node.js kuris suteikia galimybe kurti svetainės iš serverio pusės (toliau backend), kartu taip pat naudojau „Express“ ir „EJS“ npm (Node package manager) modulius. Naudojami NPM (Node Package Manager) moduliai „Express“ modulis, kuris supaprastina serverio Node.js funkcionalumą, tai yra greičiau ir efektyviau, naudojant mažiau kodo eilučių gaunamas tas pats rezultatas. Node.js prieš ir po naudojantis „Express“ moduliu „EJS“ modulis leidžia dinamiškai atvaizduoti html puslapius interneto naršyklėje. Leidžia įterpti Javascript ir atvaizduoti tai kliento pusėje (toliau frontend). Būtent šio modulio pagalba buvo parašytas lokalizacijos failas dviem kalbomis lietuviškai ir angliškai. Vartotojui pasirinkus norimą kalbą, ši yra atvaizduojama html puslapio pavidalu. „EJS“ atvaizduoja lokalizacijos faile esančius duomenis Šis API turi duomenis apie Lietuvos krepšinio komandas, žaidėjus, trenerius, poziciją ir sudėtį. Šie duomenys yra saugomi json faile, kurį reikia importuoti į šią aplikaciją norint juos pasiekti ir jais manipuliuoti. Lietuvos krepšinio komandos duomenys json faile Lokalizacijos duomenis lietuvių ir anglų kalba json faile Importuoti json failai norint juos pasiekti Node.js platformoje Apdorojami duomenys ir išsiunčiami į svetainę Backend pagalba buvo padaryta taip, kad ši API aplikacija išsiūstų tik tuos duomenis, kurie yra apie komandą, kuri yra pasirinkta pagal jos identifikacijos numerį. (Visi komandų identifikacijos numeriai yra aprašyti dokumentacijoje). Gaunami duomenys pagal komandos identifikacijos numerį, pavyzdys Konkretaus žaidėjo/trenerio ieškojimas šiuose duomenyse buvo realizuotas taip, kad visi žaidėjai/treneriai iš visų komandų buvo įdėti į vieną  grupę, ir vartotojui įvedus vardą, pavardę, arba pozicija, būtų gaunami tik tie žaidėjai/treneriai kurių šie trys kriterijai sutaptu su vartotojo įvestais. Apdorojami duomenys taip, kad visi žaidėjai ir treneriai iš skirtingų komandų atsidurtų vienoje grupėje Gaunami duomenys pagal vartotojo įvestus kriterijus Pavyzdys gaunamų duomenų pagal įvestus kriterijus Galiausiai realizuota taip, kad būtų išsiunčiami visi duomenys apie visas esančias komandas. Išsiunčiami duomenys apie visas komandas