Straipsniai

Tinklalapių kūrimas: pirmieji žingsniai

Parašė Edmundas, 2009-08-04 01:50:00


Žmonės, kurie domisi interneto naujovėmis, lankomais tinklalapiais, portalais, anksčiau ar vėliau iškelia sau klausimą — kaip sukurti tinklalapį? Klausimas iš pirmo živlgsnio atrodo visiškai „nekaltas“ ir gana paprastas: be išvedžijimų, nesuprantamų žodžių ar mokslinių terminų. Tačiau asmenims, kuriems šis klausimas užduodamas (čia, manau, nereikia nė minėti, kad žmogus, kurio klausiama, išmano tinklalapių kūrimo subtilybes), visiškai nesuprantama, kaip galima užduoti tokį naivų klausimą?

Stebitės, kodėl tai naivus klausimas? Jeigu taip, tada pamąstykite, iš ko susideda tinklalapio kūrimo procesas. Deja, nemanykite, kad solidų, gerą tinklalapį galima sukurti per kelias valandas ar dienas. Reikia turėti aiškią internetinės svetainės plėtros viziją, patirties, įgūdžių, daug laiko, kolegų (partnerių) ar draugų, kurie padėtų kurti tinklalapį, motyvacijos ir, be abejo, reikia turėti tikslą.

Išvardijau nemažai reikalavimų (raktažodžių), pagal kuriuos turėtumėte orientuotis kurdami tinklalapį, tačiau vien mano tuščiažodžiavimas nepadės jums sužinoti apie interneto svetainių kūrimo aspektus, todėl šiame straipsnyje aptarsiu kiekvieną sritį atskirai, pasidalinsiu savo patirtimi ir nukreipsiu jus teisinga linkme.

Apsisprendimas, pasiruošimas ir bendrosios tiesos

Prieš pradėdami gilintis į tinklalapių kūrimą, turėtumėte nuspręsti, kokie jūsų tikslai, ko jūs siekiate, ką norite įgyvendinti. Ne, tai nėra gyvenimo ar mirties apsisprendimas, tačiau jeigu nežinote, ką norėsite parodyti, nuveikti su būsimuoju tinklalapiu, galiausiai jūsų norai tik ir liks norais.

Tikslas ir motyvacija

Internetinių svetainių kūrimu pradėjau domėtis gana neseniai — 2004 metais, tačiau, kita vertus, pakankamai anksti, atsižvelgiant į tai, kad internetas mano namuose buvo pajungtas prieš metus iki to laiko, kai susidomėjau tinklalapių kūrimu. Prisimenant dar ankstesnius laikus, pirmosios užuomazgos prasidėjo „WAP“ mobiliojo interneto laikotarpiu ir jau tada bandžiau sukurti savo „WAP“ svetainę. Žinoma, iš to nieko rimto neišėjo, kadangi svetainė (turiu pasakyti, kad sunkiai apsiverčia liežuvis sakant „svetainė“, tiksliau būtų „puslapis“) neturėjo vientisos temos.

Kai gavau interneto prieigą namuose, pradžioje nerūpėjo tinklalapių kūrimas, tačiau po kiek laiko internete pastebėjau įvairių fanų klubų puslapių, informacinių tinklalapių (apie televizijos serialus, filmus, muzikos artistus), kuriuos kūrė eiliniai žmonės, visai kaip aš. Tada pagalvojau: „galbūt ir aš sugebėčiau sukurti savo internetinę svetainę?“. Deja, apie tinklalapių kūrimą nieko neišmaniau ir nežinojau nuo ko pradėti. Internetinė paieška „Google“ tuo laiku dar neturėjo tokios įtakos kaip dabar, tad benaršydamas po įvairius tinklalapius atradau keletą diskusijų forumų, kuriuose turėjau galimybę perskaityti kitų žmonių patarimus, klausti ir ieškoti pradžios taško. Po kiek laiko sužinojau, kad reikia rasti hostingą (serverį), gauti tam tikras programas, su kuriomis galėčiau kurti tinklalapį. Vėliau atradau puslapių šablonus, sužinojau apie HTML,... Žodžiu, po truputį, regis, judėjau pirmyn. Galiausiai sulipdžiau pirmąjį puslapį ir džiaugiausi savo pasiekimais, tačiau teko greitai tuo nusivilti.

Nors kurti savo puslapį buvo įdomu ir turėjau motyvacijos, nepagalvojau apie tikslą. Nežinojau nei ką noriu lankytojams pateikti, nei kokia tinklalapio paskirtis, ir todėl supratau, kad vien noro ir užsispyrimo neužtenka. Reikia turėti tikslą: kam aš kuriu tinklalapį, kas jame lankysis, kokią informaciją lankytojai sužinos?

Darbo srities pasirinkimas

Tarkime, kad jūs esate motyvuotas kurti tinklalapį (na, kitaip ir būti negali — priešingu atveju neskaitytumėte šio straipsnio) ir turite aiškiai apibrėžtą internetinės svetainės idėją, temą bei žinote savo tikslą. Akivaizdu, kad kitas etapas — tinklalapio funkcionalumas, išvaizda. Kitaip sakant, techniniai dalykai.

Dizaino maketavimas

Pradėję gilintis į techninę tinklalapių kūrimo dalį pamatysite, kad egzistuoja kelios sritys. Pirmiausia turite sumaketuoti tinklalapio išvazdą arba bendrą vaizdą, kad galėtumėte vizualiai matyti, kas ir kaip atrodys. Nesvarbu, ar piešiate interneto svetainės dizainą ant popieriaus, ar maketuojate dizainą su kompiuteriu, naudojant grafikos programą. Bet kuriuo atveju, galutinį dizaino maketą reikia paruošti kompiuteriu. Šiuo darbu užsiimantis žmogus vadinamas web dizaineriu (angl. „web designer“).

Dizaino kodavimas

Kai dizaino maketas yra tinkamas, paruoštas, jį reikia sukoduoti. Dizaino kodavimas — procesas, kai maketas paverčiamas į struktūrizuotą (x)HTML ir CSS kodą. Kam to reikia? Na, kaip žinote, paveiksliuke (nesvarbu, ar tai *.jpg, *.png, *.gif, *.bmp) neįmanoma pažymėti ir nukopijuoti teksto, priversti funkcionuoti taip, kad paspaudus pelės žymeklį ant tam tikros paveikslėlio vietos įvyktų koks nors veiksmas (pavyzdžiui, pasikeistų tekstas, atsirastų koks papildomas dizaino elementas ir pan.). Kitaip sakant, sukarpome dizaino maketą, rašome HTML ir CSS kodą pagal sutartinę sintaksę taip, kad naršyklė „suprastų“, tinkamai interpretuotų kodą ir pagal jį atvaizduotų tinklalapį. Norėdami išsiaiškinti, kaip koduojamas dizainas, galite peržiūrėti mūsų tinklalapyje patalpintą video pamoką „Tinklalapio (web) dizaino kūrimas“.

Niekur tiksliai nėra apibrėžta, kas turi atlikti šį darbą. Vieni web dizaineriai tik maketuoja dizainus, tačiau jų nekoduoja (nekarpo) ir tą darbą atlieka kitas žmogus (dažniausiai asmuo, kuris kuria tinklalapio funkcionalumą). Kiti dizaineriai ne tik maketuoja dizainus, bet juos ir sukoduoja. Antrasis variantas pasitaiko dažniau, be to, esu ne kartą matęs, kad darbo pasiūlyme web dizaineriui privalomos HTML, CSS žinios.

Tinklalapio funkcionalumo kūrimas

Kiekvienas didesnis tinklalapis neapsiriboja vien keletu puslapių teksto ir tuzinu paveikslėlių. Dažniausiai turite galimybę užsiregistruoti, prisijungti su tam tikrais duomenimis (prisijungimo vardu ir slaptažodžiu ar pan.), komentuoti tinklalapyje pateiktą turinį, publikuoti savo turinį (straipsnius, naujienas), įkelti ir dalintis failais su kitais lankytojais, užsiprenumeruoti naujienas el. paštu ir t. t. Visas šias ir panašias funkcijas įgyvendina web programuotojas, kuris anglų kalboje dažniausiai vadinamas „web developer“.

Funkcionalumo kūrimas

Teoriškai, tinklalapiui sukurti gali užtekti HTML ir CSS kalbos. HTML — tinklalapio struktūrai, išdėstymui ir baziniam funkcionalumui (perėjimui iš vieno puslapio į kitą, teksto, nuorodų, paveiksliukų atvaizdavimui), Cascading Style Sheets — HTML objektų išvaizdai keisti (nuorodoms priskirti kitokią teksto spalvą, pridėti rėmelį, pakeisti fono spalvą ir pan.). Tačiau su HTML kalba neįmanoma, tarkime, sukurti skripto, kuris, lankytojui paspaudus mygtuką, įkeltų informaciją į duomenų bazę ar failą. Todėl nei CSS, nei HTML nėra programavimo kalba, nors kai kurie žmonės, pradėję domėtis tinklalapių kūrimu, to nežino arba pamiršta.

Norėdami sukurti rimtą, interaktyvią internetinę svetainę, turite į jos kūrimo procesą įtraukti web programavimą (skriptinimą). Viena iš populiariausių kalbų šiam darbui — PHP. Kita, gal kiek egzotinė, Ruby programavimo kalba, o tiksliau — „Ruby on Rails“ („RoR“). „Ruby on Rails“ yra karkasas internetinėms aplikacijoms (svetainėms), pagrįstas Ruby programavimo kalba. Tiesa, nors PHP programavimo kalba yra skirta būntent tinklalapiams, jai irgi rasite karkasų (angl. „framework“): Zend Framework, Kohana, Code Igniter, Cake PHP...

Web programuotojo darbas yra bene sunkiausias tinklalapio kūrimo procese, kadangi suprogramuoti visam funkcionalumui reikia daug laiko. Tačiau tuo viskas nesibaigia — ne visada parašytas kodas suveikia pirmuoju bandymu. Dažnai pasitaiko akies klaidų, pavyzdžiui, raidės ar simbolio netyčinis praleidimas kintamojo pavadinime, amžinieji ciklai ir t. t. Tenka ieškoti klaidų ir jas taisyti, o klaidų išvengti, deja, praktiškai neįmanoma. Todėl kartais prie rimtesnių internetinių projektų dirba ne vienas, o keli web programuotojai.


Kaip matote, vienam žmogui sukurti rimtą tinklalapį nuo nulio per trumpą laiką yra neįmanoma. Reikia apsispręsti, kuria kryptimi norite eiti: dizainerio ar programuotojo. Kartais žmonės pasirenka viską daryti patys ir stengiasi įvaldyti abi sritis. Vienas iš tokių žmonių esu aš pats: pradžioje orientavausi į dizainą ir apskritai į kompiuterinę grafiką, tačiau vėliau pasukau programuotojo pusėn. Kaip sakoma, kas tinka viskam — netinka niekam, nors manau, kad yra išimčių ir tai priklauso nuo žmogaus užsispyrimo, noro išmokti. Vienintelis „stabdis“ tokioje situacijoje — laikas. Todėl kai laiko abiejoms sritims mokytis nėra, reikia ieškoti bendražygių arba ieškoti kitokių resursų. Pavyzdžiui, jeigu manote, kad neturite perspektyvos dizaino srityje ir mokotės tinklalapių programavimo, galite naudoti nemokamus (arba mokamus, jei jus tai tenkina) dizaino šablonus, kurie jau būna paruošti su (x)HTML/CSS. Jeigu pasirinkote dizainerio poziciją, savo sukurtus tinklalapio dizainus galėsite integruoti į turinio valdymo sistemas (TVS, angl. „Content Management System“ — CMS), kurios suteiks ypač daug funkcionalumo tinklalapiui (priklausomai nuo to, kokią TVS pasirinksite).

Tinklalapių dizainų kūrimas

Pradėdami kurti tinklalapio dizainą turėtumėte mąstyti ne tik apie tai, kaip naudotis grafikos programos įrankiais ir ar pavyks sukurti gražų dizainą. Turėtumėte pamąstyti, kokią paskirtį jūsų tinklalapyje atliks dizainas, pagal ką rinksitės spalvas (spalvų derinius, paletes) ir ar visi dizaino elementai, kuriuos jūs sukursite, bus reikalingi tinklalapyje.

Dizaino paskirtis tinklalapyje

Dizaino paskirtis tinklalapyje Nepamirškite, kad viena tinklalapio dizaino struktūra ir spalvų derinys netinka visais atvejais. Pavyzdžiui, atkreipkite dėmesį į naujienų portalo ir žaidimo tinklalapio dizainą (pav.: alfa.lt ir starcraft2.com): šių dviejų internetinių svetainių dizainas skiriasi kaip diena nuo nakties, nes jų paskirtis visiškai priešinga. Naujienų portale dominuoja raudona spalva, palikta daug vietos reklamai, dizaine nėra didelių, „sunkių“ grafinių detalių (reklaminės antraštės nepriskaitomos). Žaidimo „Starcraft II“ tinklalapyje matome priešingą vaizdą: daug grafinių detalių, didelis „headeris“, nėra reklaminių antraščių, animaciniai intarpai pagrįsti „Flash“ technologija. Pagal abiejų tinklalapių dizainą galima daryti išvadą: naujienų portale svarbiausia pateikti naujienas, straipsnius, be to, reikia, kad lankytojai galėtų sklandžiai perskaityti ilgus tekstus, todėl informacija pateikiama „juodu ant balto“; žaidimo tinklalapyje informacija yra prezentacinio (pristatomojo) pobūdžio, o tai reiškia, kad lankytojas, atėjęs į svetainę, gali iš kart pajusti žaidimo atmosferą, susipažinti su žaidimo veikėjais ir pan. Kitaip sakant, šio tinklalapio dizainas atspindi žaidimo nuotaiką, stilių.

Taigi, stenkitės kurti dizainą pagal tinklalapio temą, pagalvokite, ar savo sukurtu dizainu tinkamai perteiksite norimą informaciją, nuotaiką ir stilių. Taip pat pamąstykite, ar visos grafinės detalės dera tarpusavyje, ar yra tarp jų koks nors loginis ryšys, nes jeigu į tai neatsižvelgsite, jūsų dizainas gali atrodyti chaotiškas, netvarkingas ar neužbaigtas.

Spalvos dizaine

Apie spalvų svarbą dizaine rašiau straipsnyje „Spalvos dizaine“, todėl tikrai rekomenduoju jį perskaityti. Jame pateikiau nemažai informacijos apie spalvų derinimo klaidas, apžvelgiau bendrąją spalvos teoriją ir pateikiau pavyzdžių. Jeigu iki šiol dar neperskaitėte straipsnio „Spalvos dizaine“, turėtumėte tai padaryti, nes perskaityta informacija ypač naudinga pradedantiesiems tinklalapių dizainų kūrėjams (web dizaineriams).

Grafinės programos

Turiu pripažinti, jog šioje srityje (tinklalapių dizainerio sferoje) grafikos rengyklių (programų) nėra itin daug. Galbūt tai įtakoja karaliaujanti programa „Adobe Photoshop“, kuri, galima sakyti, yra tinklalapių dizaino kūrimo standartas. Tačiau atidžiai paieškoję galime rasti ir daugiau grafikos rengyklių, pasižyminčių panašiu funkcionalumu.

Adobe Photoshop Real Life GUI

Adobe Photoshop. Beveik visi kompiuterinės grafikos, tinklalapių dizaino specialistai turi įdiegę šią programą savo kompiuteriuose. Pagrindinė priežastis — Photoshop yra grafikos rengimo standartas. Tačiau neapsirikite — „Adobe Photoshop“ renkamasi ne todėl, kad visi renkasi šią programą, o todėl, jog „Adobe Photoshop“ turi be galo daug funkcijų, ja patogu naudotis. Kadangi ši grafikos rengyklė populiari, nesunku jai surasti papildomų įskiepių, teptukų (angl. „brushes“) ir t. t. Turint „Adobe Photoshop“, pakankamai patirties, įgūdžių ir talento, galima sukurti stebuklus. Deja, tenka atsidusti pamačius produkto kainą — neabejoju, jog mus, lietuvius, tūkstantinės sumos už programinę įrangą priverčia nusipurtyti, tačiau sakoma, kad gabiam ir darbščiam žmogui ši suma greitai atsipirks.

Gimp. Kai kurie žmonės (ypatingai „Linux“ entuziastai) tikina, kad nemokama grafikos rengyklė „Gimp“ gali pakeisti didelę sumą kainuojančią „Adobe Photoshop“ programą. Vengdamas šališkumo, paminėsiu tik tai, kad grafikos programa „Gimp“ veikia su „Windows“, „Mac OSX“ ir „Linux“ operacinėmis sistemomis. Nuomonę galėsite susidaryti tik išbandę programą, todėl rekomenduoju ją parsisiųsti iš oficialaus tinklalapio.

Adobe Fireworks. Ši grafikos rengyklė skirta būtent tinklalapių bei programinių interfeisų (grafinių aplinkų) prototipų kūrimui. Neapsirikite, nors „Adobe Fireworks“ skirta prototipams kurti (idėjas paversti vizualine prezentacija), galėsite konvertuoti tinklalapio dizaino maketą į HTML/CSS formatą. „Adobe Photoshop“ rengyklė yra kur kas pranašesnė, tačiau turėkite omenyje, kad su „Adobe Fireworks“ galite atlikti rimtus darbus.

Pixelmator

Pixelmator. Neabejoju, kad daugumai skaitančiųjų ši grafikos rengyklė yra negirdėta ir neregėta. Pagrindinė to priežastis — „Pixelmator“ sukurta „Mac OSX“ operacinei sistemai. Turiu pripažinti, jog dauguma atžvilgių „Pixelmator“ labai panaši į „Adobe Photoshop“, kas yra tikrai stebėtina, žinant, kad pirmoji „Pixelmator“ programos versija pasirodė 2007 metų rugsėjo 25 dieną. Kaip sako patys kūrėjai, „jei Photoshop skirta profesionalams, tai Pixelmator skirta visiems likusiems“. Tačiau turbūt labiausiai jus nustebinsiąs faktas — „Pixelmator“ kūrė 2 mūsų krašto žmonės! Programos kūrėjai: Saulius ir Aidas Dailidės. Plačiau apie programą ir jos kūrėjus skaitykite Vikipedijoje ir oficialiame programos tinklalapyje.

Corel Paint Shop Pro. Ši grafikos rengyklė turi daug funkcijų, kurias pamatysite ir „Adobe Photoshop“ programoje. Tai reiškia, kad tinklalapių dizainams kurti taip pat galima naudoti „Corel Paint Shop Pro“. Žinoma, galbūt nerasite visų reikalingų komandų ir funkcijų, tačiau „Corel Paint Shop Pro“ puikiai tiks paprastiems darbams atlikti. Beje, lyginant su „Adobe Photoshop“, „Corel Paint Shop Pro“ kaina yra tiesiog juokinga — 66,99 JAV doleriai („Adobe Photoshop“ kaina sieka 699,00 JAV dolerius!).

Adobe Illustrator. Tai dar vienas „Adobe“ produktas, kuris tobulinamas daug metų. Pagrindinė šios grafikos rengyklės savybė — galimybė kurti vektorinius grafinius elementus. Skirtingai nei „Photoshop“ ir kitos rastrinės (taškinės) programos, „Illustrator“ veikia kitokiu principu. Vektorinėje grafikoje atvaizdai yra matematiškai apskaičiuojami ir vaizduojami pagal tam tikras taisykles, todėl vektorinius failus galima didinti neprarandant vaizdo kokybės, kas būdinga rastrinei (taškinei) grafikai. Dėl šios priežasties „Illustrator“ plačiai naudojama spaudos darbams, nors, be abejonės, šią grafikos rengyklę galima taikyti ir tinklalapių dizainų maketams (dizaino elementams, detalėms) kurti.

Paieškoję galėtume rasti dar daugiau grafikos rengyklių, tačiau abejoju, ar rastume ką nors, kas tikrai tenkintų mūsų poreikius. Jeigu nežinote, kokią programą pasirinkti, skirkite šiek tiek laiko parsisiųsti bandomąsias programų versijas, jas įdiegti ir išbandyti.

Patarimai pradedantiesiems

Pasirinkite tinkamą paveikslėlių formatą. Nepamirškite, jog kiekvienas lankytojas, atėjęs į jūsų tinklalapį, parsiunčia tam tikrą kiekį duomenų į kompiuterį. Kuo daugiau duomenų, tuo ilgiau reikia laukti, kol visi failai bus parsiųsti. Taigi jūsų uždavinys yra sukurti tokį dizainą, kad jis būtų patrauklus lankytojams, tačiau tuo pačiu metu būtų „lengvas“ (lankytojams reiktų siųstis kuo mažiau duomenų iš serverio). Norėdami tinkamai optimizuoti tinklalapio dizainą, turite pasirinkti tinkamą paveikslėlių formatą. Dažniausiai žmonės renkasi *.jpeg, *.gif ar *.png formatą, tačiau kartais tenka pamatyti paveikslėlį *.bmp formatu. Atminkite, kad *.bmp formatas internete yra nenaudojamas. Pagrindinė to priežastis — paveikslėliai išsaugoti šiuo formatu daug „sveria“, o tai lemia ilgą tinklalapio krovimosi laiką. Išsaugodami *.jpeg formatu dar galėsite pasirinkti paveikslėlio kokybę („Photoshop“ programoje galite rinktis skalėje tarp 1 ir 12; rekomenduojama kokybė — tarp 8 ir 10). *.gif formatas ypatingas tuo, kad galima išsaugoti judančius (animuotus) paveikslėlius. Vienas iš populiariausių paveikslėlių formatų tinklalapiuose — *.png, kadangi šis formatas siūlo aukštą paveikslėlių kokybę ir nedidelį „svorį“.

Dizaino patarimai pradedantiesiems

Venkite šriftų mišrainės. Išsirinkti tinkamą šriftą tinklalapio dizainui gali būti sudėtinga užduotis, mat reikia nuspręsti, koks šriftas derės prie dizaino stiliaus, temos. Kai ši užduotis tampa per sudėtinga, žmonės nusprendžia naudoti keletą šriftų. Tačiau iš pirmo žvilgsnio pasirodžiusi tinkama išeitis virsta dar didesne problema. Kuo daugiau šriftų dizaine, tuo sunkiau juos tarpusavyje suderinti, sukurti harmoningą vaizdą. Be to, rizikuojate visiškai sudarkyti dizainą ir suklaidinti lankytoją. Todėl stenkitės apsiriboti vienu ar dvejais šriftais ir ypatingai venkite skirtingų kategorijų šriftų! Nenaudokite „sans-serif“ ir „serif“ šriftų tame pačiame dizaine (būna išimčių, pavyzdžiui, norėdami atskirti citatą iš viso teksto, galite citatos tekstui priskirti kitokį šriftą). Taip pat būtų nelogiška bandyti suderinti gotikinio stiliaus ir moderniai atrodantį šriftus. Todėl apgalvokite, koks šriftas tinka dizaino stiliui, ir jį naudokite, vengdami papildomų šriftų.

Išsiaiškinkite, kur kišate galvą — išmokite HTML ir CSS pagrindus. Ar žinote, ko trūksta pradedantiesiems dizaineriams? Realybės suvokimo! Tarkime, kad jūs mokate derinti dizaino spalvas, mokate išrinkti tinkamą šriftą, tačiau sukuriate tokį dizainą, kurio realiai neįmanoma optimaliai panaudoti. Dizaino elementai taip išdėlioti, jog juos sunku tinkamai išskaidyti į atskirus paveikslėlius ir sukoduoti dizainą. Tada pasipila klausimai, kaip sukoduoti vieną ar kitą dizaino dalį, puolate į neviltį bandydami atkurti tokį pat vaizdą, kokį sukūrėte grafikos programoje.

Dizaino patarimai pradedantiesiems

Taigi kaip to išvengti? Kokių priemonių imtis, kad galėtumėte viską sukurti be didesnio vargo? Atsakymas — prieš pradėdami mokytis tinklalapių dizainų kūrimo grafikos programa, paskaitykite informacijos apie HTML ir CSS. Užtikrinu, kad šios žinios palengvins jūsų darbą. Kai suvoksite, kaip kuriama tinklalapio struktūra, pradėsite daugiau dėmesio skirti optimalaus varianto ieškojimui. Kurdami dizaino maketą, tarkime, Photoshop programoje visada svarstysite, ar jūsų kuriamą dizaino struktūrą, grafinius elementus bus įmanoma optimaliai paversti HTML/CSS formatu. Nesvarbu, jeigu jūs neketinate užsiimti dizaino kodavimu — dėl įgytų žinių apie CSS ir HTML tapsite atidūs, aiškiau suvoksite, koks dizainas tinkamas, ir koks netinkamas.


Gražų ir tvarkingą dizainą sudaro harmoningos, temą atitinkančios spalvos, aiški struktūra, turinti nuoseklų išdėstymą, dizaino stiliui tinkantis šriftas(-ai). Turėdami bent minimalias žinias apie HTML ir CSS sugebėsite sukurti praktišką, optimalų dizainą. Savo idėjas galėsite vaizduoti su pasirinkta grafikos programa, pavyzdžiui, Photoshop ar Fireworks, ir t. t. Kaip matote, tinklalapio dizaino kūrimas nėra lengva užduotis, reikia atsižvelgti į daug faktorių, lemiančių gražų ir paskirtį turintį dizainą.

Tinklalapių programavimas („web developinimas“)

Kadangi pernelyg detalus tinklalapių programavimo aiškinimas būtų netaktiškas E-grafika.lt tinklalapiui, paminėsiu tik būtiniausius dalykus ir nurodysiu, kur galėsite ieškoti apie tai informacijos.

Noriu pradėti mokytis tinklalapių programavimo, nuo ko pradėti?

Užtikrinu, kad internete galite rasti apie 90% jums reikiamos informacijos apie tinklalapių programavimą, skriptų kūrimą, tačiau turite mokėti tą informaciją surasti. Beveik visa medžiaga internete yra nemokama, todėl mokymasi jums nieko nekainuos (neminint laiko ir pastangų)! Kita vertus, turite atsirinkti, kokia informacija yra tiksli, autentiška ir naudinga, nes pamąstykite — internete visi turi galimybę publikuoti savo turinį, o tai reiškia, kad ne visada pamokas rašo gerai tą sritį išmanantys žmonės. Kitais atvejais vadinamosios pamokos nėra naudingos, nors informacija ir tiksli, kadangi autorius nemokėjo tinkamai išreikšti minčių, išdėstyti turinio taip, kad skaitytojai suprastų, ką skaito. Todėl atminkite, kad internetas yra neišsenkantis informacijos šaltinis, tačiau reikia žinoti, kur ieškoti, bei mokėti atskirti, kuri informacija yra tiksli.

Kitas, tačiau nė kiek prastesnis mokymosi šaltinis, yra knygos! Taip taip, knygos! Knygose rasite daug įvairios informacijos, kuri jau yra „sukramtyta“. Tai reiškia, kad turinys suskirstytas į skyrius ir poskyrius, viskas organizuota ir tvarkinga. Jeigu nusipirkote knygą, tarkime, apie PHP pradmenis, nebūtinai turite perskaityti ją nuo pradžios iki pabaigos. Juk nusipirkę knygą iš karto nepulsite kurti sudėtingą tinklalapį. Pirmiausia nagrinėsite atskiras programavimo dalis. Pavyzdžiui, pradžioje, žinoma, norėsite susipažinti su programavimo kalbos sintakse (tarkime, PHP), todėl ieškosite informacijos apie bendrą kodo rašymo procesą, kintamųjų kūrimą, veiksmus su kintamaisiais, operandus, ciklus. Kiek vėliau, sakykime, norėsite sužinoti, kaip išsaugoti sugeneruotus failus į tekstinius dokumentus ar kaip nuskaityti duomenis iš failo ir t. t. Taigi rasite informaciją vienoje vietoje (knygoje): paaiškinimus, pavyzdžius, pastabas ir pan.

Lietuviški tinklalapiai, kuriuose rasite informacijos apie tinklalapių „developinimą“:

  • * www.pixel.lt Coding: Priceless — rasite daug įvairių, naudingų straipsnių apie tinklalapių kūrimą, programavimą;
  • * www.php.lt PHP bendruomenė — PHP pradmenys, skriptai. Deja, kai kuri informacija yra nuvertėjusi (pasenusi);
  • * paslaptis, tačiau greitai apie tai sužinosite smile

Užsienio tinklalapiai:

Būtina paminėti, kad tinklalapių apie web programavimą, „developinimą“ yra labai daug, o išskirti geriausius gana sudėtinga, todėl pateikti ilgo sąrašo su tinklalapiais neverta. Nepamirškite, jog paieškos sistemos (pav. „Google“) turėtų būti neatsiejamas įrankis naršant internete ir ieškant informacijos. smile


Knygos


PHP 5 vaizdžiai
PHP 5 vaizdžiai

PHP – tai skriptų kalba, skirta kurti taikomąsias interneto programas. Pagrindinis naujausios PHP versijos – PHP 5 – privalumas yra objektinis programavimas, leidžiantis plėsti naudojimosi internetu galimybes. Knygoje aptariamai medžiagai pateikti naudojamas vaizdinis metodas, nuosekliai parodantis, kaip atlikti daugiau nei 150 pagrindinių PHP 5 operacijų, pavyzdžiui, kaip rašyti objektinio programavimo kodą, kaip į PHP 5 perkelti skriptus, šalinti PHP skriptų triktis, kaip nustatyti failų ir aplankų prieigos teises ir daug kitų svarbių veiksmų. Kiekvienos temos pabaigoje pateikiami skyreliai „Pritaikymas“ ir „Papildoma informacija“, kuriuose aprašomi vartotojui naudingi patarimai. PHP 5 knyga padės kurti atvirojo kodo serveryje veikiančias programas.

PHP, MySQL ir Apache
PHP, MySQL ir Apache

Knygoje „PHP MySQL ir Apache“ pristatomos seniai lauktos PHP 5 ir MySQL 5 progaminės įrangos versijos, aptariamos naujos jų ypatybės. Perskaitę knygą sužinosite, kaip nustatyti ir valdyti Apache interneto serverį, susipažinsite su PHP programavimo pagrindais ir MySQL sąryšių duomenų bazių valdymo sistemų naudojimo ir valdymo metodais. Pagrindinis knygos tikslas – suteikti žinių, kaip šios technologijos integruojasi tarpusavyje ir kaip jas integruoti. Knyga skirta asmenims, išmanantiems darbą internetinėje kūrimo aplinkoje, Linux/UNIX ar Windows sistemoje. Pamokoms, kuriose rašoma apie programavimą, nereikia ankstesnių vienos ar kitos programavimo kalbos žinių, nors tai gerokai palengvintų mokymąsi. Jums tereikia suprasti, kaip naudojant HTML kuriami statiniai interneto puslapiai. Šia knyga gali naudotis net ir pradedantys interneto programų kūrėjai, tik jiems reikėtų pasimokyti HTML.

PHP, MySQL ir Apache
PHP pradmenys

Knyga skirta norintiems išmokti kurti dinaminius puslapius su PHP 5. Autorius supažindina skaitytoją su šios kalbos pagrindais, kurie leis lengvai ir savarankiškai programuoti. Knyga pravers studentams, besidomintiems dinaminių puslapių kūrimu, IT darbuotojams, kuriantiems komercines interneto ir intraneto sistemas, ketinantiems dirbti informacinių sistemų kūrimo srityje ar tiesiog norintiems kurti laisvalaikiu. Skaitydami ir atlikdami užduotis išmoksite įdiegti norimą PHP versiją, susipažinsite su PHP 5 sintakse, sužinosite, kaip dirbti su įvairiais duomenimis, kurti interaktyvius PHP skriptus, tvarkyti duomenų bazių duomenis. Paskutiniajame skyriuje aptariama, kaip programavimą padaryti ne tik kūrybiniu procesu, bet ir tvarkingai kurti skriptus.

Patarimai

Skirkite „server-side“ nuo „client-side. Jeigu nežinote, ką šie terminai reiškia, dabar turite puikią progą išsiaiškinti.

„Server-side“ skriptai vykdomi iš serverio. Pavyzdžiui, naršyklės adreso juostoje įrašote internetinės svetainės adresą, užsikrauna tinklalapis, tada užpildote, sakykime, susisiekimo formą ir paspaudžiate mygtuką „Siųsti“. Kas įvyksta? Siunčiama užklausa į web serverį ir, priklausomai nuo siunčiamų duomenų, grąžinamas rezultatas atgal į naršyklę. Taigi duomenų apdorojimas ir grąžinimas vyksta serveryje, o ne jūsų kompiuteryje (naršyklėje). Kuo ši technologija ypatinga? Galite būti užtikrintas, kad duomenys bus apdorojami nepriklausomai nuo naršančiojo naršyklės, kompiuterio parametrų. Žymiausias „server-side“ pavyzdys — PHP kalba.

„Client-side“ skriptai, kaip jau supratote, vykdomi vartotojo naršyklėje, o ne serveryje. Šiuo atveju iš tinklalapio parsiunčiami duomenys (skriptai) į kompiuterį ir vykdomi naršyklėje. „Client-side“ technologija nereikalauja atskirų parametrų serveryje, tačiau skriptų veikimas priklauso nuo vartotojo naršyklės parametrų ir nustatymų. Pavyzdžiui, jūs savo tinklalapyje įterpėte JavaScript skriptą, kuris suteikia papildomų vaizdinių efektų. Kadangi JavaScript veikia kaip „client-side“, naršantieji turi būti įjungę JavaScript palaikymą savo naršyklėje, kadangi priešingu atveju JS skriptas nebus vykdomas.

Nemaišykite Java su Javascript. Nors pavadinimai panašūs, tai yra 2 skirtingi dalykai. Jeigu nežinote skirtumo, paskaitykite apie tai Vikipedijoje.

Skirkite daug dėmesio tinklalapio saugumui. Programuodami tinklalapio funkcionalumą (prisijungimą prie sistemos, registraciją ir pan.) visados mąstykite, ar tai saugu. Stenkitės įžvelgti galimas saugumo spragas, kuriomis galėtų pasinaudoti blogi žmonės. Ypač būkite dėmesingi saugodami lankytojų privačius duomenis, pavyzdžiui, prisijungimo slaptažodžius, el. pašto adresus ir t. t. Slaptažodžiai turėtų būti koduojami tam tikrais algoritmais, kad net nutekėjus duomenų bazės duomenims nebūtų įmanoma išaiškinti tikrųjų prisijungimo slaptažodžių. Paskaitykite informacijos apie SQL injekcijas bei apskritai apie tinklalapių saugumą.

Apibendrinimas

Pasirodo, kad tinklalapį sukurti nėra taip lengva, nes turime atsižvelgti į daug dalykų. Tinklalapių kūrimo sritis yra labai plati, todėl dabar turėtumėte aiškiau suprasti, kodėl tinklalapių kūrimo kainos ir atlikimo laikas kartais stebina. Jeigu turite planų kurti rimtą internetinį projektą, vienas viso darbo neatliksite. Reikia turėti partnerių, kolegų, su kuriais galėtumėte pasiskirstyti darbais, arba turite naudodami papildomus resursus: tinklalapio funkcionalumui — turinio valdymo sistemą, papildomus skriptus, išvaizdai — jau nupieštus, o galbūt ir apdorotus (sukoduotus) dizainus. Tačiau renkantis tiek valdymo sistemą, tiek dizainą, turite žinoti, ką norėsite įgyvendinti, realizuoti tinklalapyje. Turite apgalvoti spalvas, struktūrą, išdėstymą, turinio pateikimą ir t. t. Todėl turėkite tikslą, pasirinkite sritį, kurią norite pažinti, ir, sukaupę visą kantrybę ir valią, mokykitės ir kurkite internetinius projektus, kuriuos būtų galima vadinti ne šlamštu, o šedevrais. hey


Apie autorių


Edmundas

Edmundas yra E-grafika.lt tinklalapio administratorius. Šiuo metu studijuoja Vilniaus universitete, dirba bei rūpinasi šiuo tinklalapiu: rašo straipsnius, naujienas, kuria naujus epizodus E-grafika.lt TV laidoms. Jis atsakingas už tinklalapio užtikrintą veikimą bei tobulinimą.


Pasidalinti straipsniu su draugais per Facebook   „Patweetink“ kitiems apie šį straipsnį   Publikuok straipsnį rockit
Komentarai
Sev
Aš pats PHP pradžiai naudojau Tizag.com. Nors ir informacija nėra labai išsami, bet viskas aiškinama nuosekliai.
Mokausi ir aš dabar viso šito. Sėkmės visiems žengusiems ir dar tik planuojantiems žengti pirmus žingsnius!
Sev @ 2009-11-05 00:08:45
 
dvneo
Geras straipsniukas smile
dvneo @ 2009-11-15 18:07:58
 
Subiniukas
Turiu pasakyti , kad straipsnis labai ikvepiantis. Sukele vel visa entuziazma ieskoti, skaityti, meginti.. Dekui
Subiniukas @ 2009-11-19 07:55:13
 
Imaginative
Puikus straipsnis, šiek tiek papildžiau jau savo turimas žinias winkEdmundas kaip visada stebini mane savo straipsnio didumu ir tokia išsamia informacija, atsižvelgta į kiekviena smulkmena ir padaryta tobulai. smile Puikus pavizdys visiems. Laukiu kitų straipsnių. smile
Imaginative @ 2009-12-13 01:10:56
 
roki60
Tikrai geras straipsnis, kaip ir visi kiti e-grafika.lt straipsniai.
roki60 @ 2010-02-03 23:01:47
 
eimis
Tai vis gi, kaip manot? ar verta pradėt dirbt su grafika linux aplinkoje, su tuo žaisliuku "gimp"? ar vis gi geriau rinktis "photoshop" jei dar neesi labai tame patyręs?
eimis @ 2010-04-16 12:12:17
 
andrius1470
Patiko, labai įkvepentis kaip <b>Subiniukas</b> pasakė smile Pats neseniai nusprendžiau mokintis, pamačiau kad ne taip paprasta net gi ir xHTML/CSS sukoduoti dizainą. sad
andrius1470 @ 2010-07-10 16:56:58
 
Christine
šeip aš dirbu su paprastomis programomis kaip notepad++ ir keletu kitų. norėčiau sužinot gal yra kitokių programuų su kuriom taip pat nesunku dirbti, bet turi daugiau galimybių ir nemokamai galima parsisiųsti? ar tai tik svajuko dramblionė?
Christine @ 2010-08-12 12:39:16
 
webugne
isiskai teisingai... deja,kad ir web dizainu uzsiimu, bet programuotojo verkiant reiketu, nors siek tiek php, html, css gaudausi, bet dar tiek daug noretusi ismokti,o nebuvau radusi pakankamai kokybiskos informacijos pvz komentaru sukurimui ir ju validacijai... dekui uz straipsni, labai naudinga ir net issamiau ir daugiau gavau perskaiciusi si straipsni, nei per 3 studiju metus is destytoju ir pavieniu internete rastu straipsneliu.
webugne @ 2011-04-26 13:44:49
 
SkyDream
Straipsnis puikus !!!!
SkyDream @ 2012-08-30 12:51:43
 
Išsakyk savo nuomonę
Komentuoti gali tik registruoti nariai.