Veebiarenduse põhialused – põhjalik juhend

Veebidisainiga tegelemine on õppimise, harjutamise ja jälgede ja vigade katsetamine, mis nõuab aega ja pühendumist.

Paljud edasipüüdlikud arendajad ei pea läbima mitte ainult uue veebisaidi lehe loomise põhitõdesid, vaid õppima ka tulevasi veebipõhiseid tehnoloogiaid. Seda seetõttu, et kiire tempoga turg toob alati välja praeguse põlvkonna tehnoloogia üha rohkem iteratsioone ja nende järgimine on ülioluline.

Selles lühikeses sissejuhatuses ei püüa me tulevikku ennustada, vaid käsitleme põhitõdesid selle kohta, millist tehnoloogiat ja tööriistu kasutatakse uue veebilehe loomisel. Kui olete veebidisainis täiesti uus, oleks see suurepärane koht alustamiseks. Kõik põhiveebisaidid nõuavad kuut olulist asja, mis moodustavad lihtsa lehe, ja siin käsitleme üksikasjalikult, mis need on, kuidas need veebisaidi toimimisel töötavad ja miks on nende tundmaõppimine ülioluline.

HTML5

HTML tähistab hüperteksti märgistuskeelt ja see on keel, milles kõik veebisaidid on kirjutatud. Kui laadite veebilehe, laadib teie brauser esimese asjana alla veebisaidi HTML-i, mis koosneb spetsiaalsest süntaksist. Seejärel loeb see seda keelt läbi, et veebilehe sisu mõista. Kõik alates linkidest, nuppudest, videotest, animatsioonidest, piltidest ja graafikast on manustatud HTML-i ja annab brauserile teada, mida veebileht sisaldab.

Veebi kasutanud HTML võeti kasutusele rohkem kui kaks aastakümmet tagasi. Kuid selle kasutamine kasvas plahvatuslikult, kui HTML-i neljas versioon (tuntud kui HTML4) võeti kasutusele uue aastatuhande künnisel. HTML4 muutis kõike ja veebisirvimine muutus üha populaarsemaks, kui veebiarendus muutus lihtsamaks.

HTML4-ga oli siiski probleeme. Kuigi see oli jõuline keel, ei olnud sellel siiski võimalik toetada keerulisi funktsioone, nagu animatsioon ja video voogesitus. Nende asjade toetamiseks tuli installida pistikprogrammid, mis muutsid kasutaja arvutid ja mobiilseadmed ainult aeglasemaks ja ebaefektiivsemaks. Nii sai kiiresti selgeks, et vaja on uuemat HTML-i versiooni.

See tõi kaasa HTML5 hiljutise väljalaske. HTML5 suurim omadus oli selle võime tõhusamalt voogesitada videoid, säästes nii ribalaiust kui ka aku kasutusaega. Sellest sai enamiku veebisaitide uus standard, mida järgida, ja paljud veebisaidid loobusid oma saidi nõuetekohaseks käitamiseks pistikprogrammidest täielikult. Kuigi mõned funktsioonid on endiselt saavutatavad ainult pistikprogrammide abil, on HTML5-l peaaegu kõik vajalikud võimalused, mida kasutaja võiks loota, ja see on kindlasti ainus keel, mida veebiarenduseks kasutatakse praegu ja tulevikus.

CSS3

Kui brauser laadib veebilehe, laadib see lõpliku veebisaidi renderdamiseks tavaliselt alla kaks asja; HTML ja CSS. Oleme juba arutanud HTML-i, see on keel, mis sisaldab kogu veebilehe olulist sisu. HTML ei sisalda aga seda, kuidas suurem osa sellest teabest tuleks kuvada. Näiteks kui HTML ütleb brauserile, et leht koosneb tekstireast, ei tea brauser ikkagi täpselt, kuhu tekst tuleb paigutada ja kuidas see välja nägema. Seda tüüpi teave, mis on seotud veebilehe visuaalse väljanägemisega, salvestatakse eraldi faili, mida nimetatakse CSS-failiks.

CSS on olnud enamjaolt sama juba aastaid, olenemata sellest, kes HTML-i hiljutiste arengutega on, on video voogesituse ja keerukate animatsioonide toetamiseks välja antud uuem versioon, mida nimetatakse CSS3-ks. CSS tähistab Cascade Style Sheets’i ja sellel on ainult üks eesmärk, öelda brauser, kuidas esitada HTML-i ja mis tahes olulist visuaalset stiili. See teeb seda, sisaldades kogu vajaliku teabe oma koodis, millel on ka kordumatu süntaks. CSS töötab koos HTML-iga ja joondab kõik sildid ja päised veebisaidi jaoks vajaliku stiili järgi. Võib-olla olete näinud, mida CSS-i puudumine veebisaidiga teha võib. Mõnikord näete lehte laadides ainult teksti ja hüperlinke, kuid need on halvasti reastatud ja lehel pole värve. See juhtub siis, kui brauser suudab edukalt laadida lehe HTML-i, kuid mitte CSS-i.

jQuery

Veebisaidi interaktiivsus peab tänapäeval peaaegu alati olema veebisaitide funktsioon. Kui teie veebisaidil puudub igasugune interaktiivsus, pole see midagi muud kui teadetetahvel ja sellest on väga vähe kasu. Kujutage ette YouTube’i või Facebooki ilma ühegi nuputa, et nende sisus hõlpsalt navigeerida. Interaktiivsus pakub kasutajasõbralikku kogemust, mis vastutasuks annab veebisaidile rohkem tõmbejõudu ja kasutajate hoidmist.

Interaktiivsuse pakkumiseks on enamik veebiarendajaid kasutanud Java ja JavaScripti. Need on keeled, mida kasutatakse koos HTML-iga, et muuta veebisait elavamaks. Need keeled, eriti JavaScript, on aga vanad ja tülikad. Paljud arendajad mõistsid seda ja nõudsid parema keele loomist, et muuta nende elu lihtsamaks. Seetõttu tutvustasime hiljuti jQueryt.

Lihtsamalt öeldes annab jQuery arendajatele kõik vajalikud tööriistad, et luua tõhus rikkalik interaktiivsusega veebisait, kuid see on vähem töömahukas. Aimu andmiseks saab jQuerys rakendada ühte JavaScriptis käivitatud funktsiooni, mis võtab 10 rida koodi, kuid ainult 2 rida või vähem. JQuery ilmselge eelis on olnud arendajate seas nii populaarne, et enne selle kasutuselevõttu kasutab enam kui 60% veebilehtedest jQueryt.

jQuery võimaldab isegi võrguinseneridel tegeleda paljude taustatöödega, näiteks teabe hankimisega ja andmebaasidesse salvestamisega. See on muutnud paljud teised andmebaasihaldussüsteemid kasutuks, kuna jQuery saab hakkama suurema osa töökoormusest. Lühidalt öeldes on jQuery iga veebiarendaja jaoks kohustuslik, kuna see muudab nende töö lihtsamaks ja tõhusamaks.

Illustraator

Enne veebisaidi kallal töötamist on üldiselt hea mõte see kõigepealt koostada, et saada aimu, kuidas see välja näeb. Seda saab teha mitmel viisil; saate visandada veebisaidi paberile, koostada veebisaidi funktsioonid arvutustabelile või teha kogu veebisaidi liidese lihtsa illustratsioonitööriista abil. Üks neist, mis on nii juurdepääsetav kui ka võimas, on Adobe’i toodetud Illustrator.

Illustrator on graafilise disaini tööriist, mida tavaliselt kasutatakse digitaalkunsti jaoks. Kuid selle mitmekülgsus võimaldab seda kasutada ka muudel eesmärkidel, näiteks veebilehe koostamisel. Soovitame tungivalt kõigil pürgivatel veebiarendajatel Illustratori võimsust ära kasutada. See mitte ainult ei anna teile ja teie klientidele paremat arusaamist veebisaidi väljanägemisest, vaid võimaldab teil Dreamweaveri abil hõlpsasti veebilehte kokku panna, millest räägime hiljem.

Illustratori kasutamine on väga sarnane kunstitahvli kasutamisega. Teie käsutuses on mitu tööriista, mille abil saate kiiresti kokku panna, kuidas teie veebisait välja näeb. Võite alustada standardmalliga ja seejärel liikuda edasi. Lõpliku kompositsiooni saamiseks võite teha kihi kihtide järel ja seejärel kokku õmmelda. Kui olete lõpetanud, saate oma lõpliku pildi renderdada kõrge eraldusvõimega eelvaateks, et näha ise, kuidas veebisait välja näeb, ja seda teistele näidata.

Photoshop

Kui olete huvitatud veebisaidi koostamise ideest, pole Illustrator ainus tööriist. Kõige populaarsem pilditöötlustarkvara, mida saate kasutada, ei ole keegi muu kui Photoshop.

Minu eksiarvamus Photoshopist on see, et seda kasutatakse tavaliselt ainult fotode ja graafika logode redigeerimiseks. Photoshopi kasutamisel muudel eesmärkidel pole aga piiranguid. Photoshop toetab paljusid pistikprogramme ja pildivorminguid. Samuti kasutab see illustraatori kasutatavat kihisüsteemi, mis tähendab, et saate programmis veebisaidi luua.

Photoshopi kasutamine sarnaneb jäljepaberite kasutamisega ja nende kokku kuhjamisega lõpliku kompositsiooni saamiseks. Alustuseks peaksite looma oma veebisaidi taustapildi. Lihtne värviskeem ja toonide kaubaalus peaks olema piisav, et luua teie veebisaidile alus. Järgmisena saate seda lisada, tehes tekstikastid ja mõned muud lingid ja rippmenüüd, mis peaksid lehel olema. Lisaks võimaldab Photoshop teil hõlpsasti kokku panna kohandatud fonte, mis on veebisaidi arendamiseks väga kasulikud, kuna tavaliselt soovite tavapäraste fontide kasutamist vältida. Neid kohandatud fonte tehes saate oma veebisaidile anda nii originaalsuse kui ka vajaliku identiteedi, mis on hädavajalik maailmas, kus peaaegu iga veebisait näeb mingil moel välja ühesugune. Soovitame tungivalt kasutada Photoshopi ka siis, kui te ei kavatse kliendile eelvaadet näidata.

Dreamweaver

Paljud graafikadisainerid töötavad nüüd veebiarendusettevõtetes ja kunstiteadmised on suurepärase välimusega veebisaidi loomiseks hädavajalikud. Kuid pärast kogu koostamist ja eelvaate tegemist on aeg kanda oma suurepärased pildid tegelikule veebiarendusplatvormile. Kõigi nende piltide ja veebisaitide illustratsioonide tegemine on mõttetu, kui teil pole võimalust neid lõpuks realiseerida. Just seepärast on seal hõlpsasti kasutatavaid veebidisaini komplekte, nimelt Adobe Dreamweaver.

Dreamweaver on lihtne platvorm, mida saate kasutada suurepärase välimusega veebisaidi kokkupanemiseks, pakkudes samal ajal võrgus töötamiseks vajalikku programmeerimist. See võimaldab teil hõlpsasti luua CSS-i ja HTML-i koodilõigu iga kord, kui kleepite programmi kujutise. Tarkvarast võib mõelda kui visuaalsest tõlkijast; ütlete Dreamweaverile, kuidas teie veebisait peaks välja nägema, ja vastutasuks ütleb Dreamweaver teile selle käitamiseks vajalikud koodid.

Siiski pole see kõik nii lihtne. Mõnikord ei ole automaatne koodi genereerimine ideaalne viis veebisaidi loomiseks. Parem on pildi mustand kleepida ja seejärel ise kood kirjutada. See väldib tarbetuid käitusaegseid vigu ning hõlbustab koodi ümberkirjutamist ja aja jooksul ülevaatamist.

Järeldus

Kokkuvõtteks võib öelda, et veebilehe kujundamine peaks olema imelihtne kõigile, kellel on selle vastu kirg, kuid see nõuab tähelepanu ja nälga rohkem õppida. Internet on teinud kättesaadavaks mitmeid tööriistu, mis annavad teile võimsuse luua hämmastava välimusega veebisait, teil on vaja lihtsalt aega ja energiat, et minna välja ja absorbeerida nii palju kui võimalik.

Meie hinnangul ei peaks kellelgi põhilise funktsionaalse veebilehe koostamiseks kuluma rohkem kui kuu. Sealt edasi peate end pingutama, et teha suurepärase välimusega veebilehti, mis silma paistaksid.