Katere spretnosti potrebuje spletni programer v letu 2020

Želite postati spletni programer? Pri CodeBrainer-ju vam lahko pokažemo pot in spretnosti, ki jih potrebujete za doseči svoj cilj. Poglejte si osnove, s katerimi lahko postanete samostojni.

Kot pri vsakem novem znanju, morate tudi pri spletnem programiranju najprej zgraditi trdne temelje. Spoznajte katera osnovna znanja so nujno potrebna. Če pa nekaj znanja že imate, vam pokažemo, kako ga nadgraditi, da boste lahko postali odličen spletni programer.

Spletni programer za začetnike - interaktivna delavnica z osebnim pristopom

Prijavi se

Ko govorimo o spletnem programiranju, govorimo o “ta pravi zadevi” - KODI in ne o programski opremi za izdelavo spletnih strani ali orodjih za upravljanje vsebine, kot so Wordpress, Wix, Jimdo … Poznavanje orodij za izdelavo spletnih strani je zelo uporabno znanje,programiranje spletnih strani pa je nadgradnja tega znanja. Znanje spletnega programiranja vam bo pomagalo razumeti kako spletne strani delujejo, kako so elementi med seboj povezani in in kako vam takšna orodja pomagajo do izdelave lastne spletne strani..

Začeli bomo z osnovami spletnega programiranja in osnovnim znanjem, skupaj bomo prišli do točke, ko se boste lahko rekli, da ste spletni programer.

Katere spretnosti potrebuje spletni programer - CodeBrainer

Kako postati spletni programer? - seznam veščin spletnega programerja

Vsako potovanje se začne s prvim korakom, zato je nujno, da začnemo v pravi smeri in zgradimo trdne temelje že na samem začetku. Spletni programerji se morajo naučiti razvoja sprednjega dela (frotnend) in razvoja zalednega sistema (backend), zato ju bomo razdelili na dva različna seznama spretnosti spletnih programerjev.

Spletni programer mora znati:

HTML
CSS
JavaScript
Delati z orodji
Odpravljanje napak (debugiranje)
GIT (verzioniranje kode)
Osnovno grafično oblikovanje
Zaledni sistemi in podatkovne baze
Delo z gostovanjem (objava spletne strani)
Knjižnice (library) in ogrodje (framework)

Osnove spletnega programiranja

HTML

Ne glede na orodje, ogrodje ali knjižnico, ki jo uporabljate za pripravo spletne strani, sta HTML in CSS nedvomno nujna. HTML5 in CSS3 sta najnovejša standarda, ki delujeta v večini spletnih brskalnikov.

HTML (HyperText Markup Language) (preberite si: Kaj je HTML)je standardni jezik označevanja za ustvarjanje spletnih strani. HTML dokumente pa tvorijo elementi, ki jih predstavljajo značke oz. tag-i. Verjetno še sam ne bi znal našteti, koliko HTML tag-ov obstaja, za začetek pa si oglejte najbolj uporabljanih 10 HTML tag-ov.

Številni HTML tag-i imajo lahko dodatne informacije v obliki atributov. Poznavanje HTML-ja je tudi ključnega pomena, da lahko postanete odličen spletni razvijalec.

Osnove HTML, ki jih morate vedeti:

Najbolj uporabnih 10 tag-ov HTML
Razumevanje osnovne strukture dokumenta HTML (<! DOCTYPE html>, <html>, <head>, <body>, ...)
Metapodatki (<head>)
Povezava datotek (povežite datoteko CSS, datoteko JS in slike z datoteko HTML)
Kako uporabljati knjižnice, zbirke in ostale vire
Razumevanje odnosov med tag-i
Osnovno odpravljanje napak (primer: prepoznavanje manjkajoče zaključne značke oz. closing tag)
Osnove SEO (Search Engine Optimization)

CSS

CSS (Cascading Style Sheet) (preberite: Kaj je CSS) je nepogrešljiv pri spletnem programiranju. Uporabljamo ga za dodajanje stila na našo spletno stran, vključno s postavitvijo in oblikovanjem.

Uporabljamo ga tudi za pravilno prikazovanje svoje spletne strani na različnih napravah in velikostih zaslona (npr. da se širina in velikost pisave prilagodita mobilnim napravam).

Tako govorimo o elementih v HTML-ju in o tem, kako naj bodo ti elementi oblikovani s CSS-om. Osrednji del CSS so njegove lastnosti. Lastnosti je ogromno, seznam se nenehno posodablja.

Osnovna potrebna znanja CSS:

Kako in kdaj uporabljati lastnosti CSS (obrobe, oblikovanje besedila, barva pisave)
CSS izbiralnik (kako povemo, za katere elemente je določen stil)
Izbiralnki za CSS razrede
Uporaba več izbiralnikov hkrati
Vstavitev CSS-a v HTML (zunanji in notranji)

JavaScript

JS (JavaScript) (preberite: Kaj je JavaScript) je visokonivojski programski jezik. Obstajajo tudi drugi visokonivojski jeziki, ki jih lahko uporabljamo v spletnem programiranju (na primer PHP ali Python). Kadar pa govorimo o spletnih aplikacijah, zagotovo naletimo na JavaScript.

JavaScript nam omogoča izdelavo interaktivnih spletnih strani, saj JS lahko bere/piše podatke, manipulira z elementi na zaslonu, spreminja stil in še veliko več.

Ko osvojite osnove JS, ste na dobri poti, da postanete spletni programer. Poleg znanja JS, namreč začnete razmišljati kot programer. Algoritmično razmišljanje je osnova za reševanje večine težav, s katerimi se boste soočali kot programer.

Potrebno osnovno znanje o JavaScript:

Osnovni podatkovni tipi (številke, nizi, objekti)
Spremenljivke
Podatkovne strukture (Array, JSON)
Funkcije
Pogojni stavki
Zanke - loops
Interakcija z uporabnikom
Dogodki
Manipuliranje DOM-a (Document Object Model)
Osnovna uporaba konzole JavaScript
Objektno usmerjeno programiranje

Orodja za spletne programerje

Visual Studio Code
Visual Studio
Notepad++
Sublime Text
JetBrains - WebStorm
Vim
Eclipse
Atom

Katere spretnosti potrebuje spletni programer (Orodja) - CodeBrainer

Na vrhu seznama popularnih orodij lahko najdete Visual Studio Code in to upravičeno. V zadnjih nekaj letih je to orodje najbolj napredovalo in se najpogosteje posodablja. Število razširitev raste, prav tako tudi njegova skupnost.

Odgovora na to, katero orodje je pravo, ni. Svetujem vam, da izberete tistega, ki vam je najbolj všeč, preizkusite jih par in se odločite.

Strežnik za spletno stran

Preproste spletne strani lahko poženete kar z brskalnikom. Ko pa začnete z naprednim spletnim programiranjem in postavite svojo prvo stran, boste potrebovali nekaj, da jo preizkusite. Za ogled strani, ki uporablja JavaScript, potrebujete spletni strežnik. Za namene testiranja pa lahko uporabite orodja, ki računalnik spremenijo v spletni strežnik.

Eno izmed mojih najljubših orodij je brez dvoma strežniški modul HTTP, ki ga lahko uporabljam z Node.JS. Na našem blogu lahko preberete o tem, kako zagnati spletni strežnik v operacijskem sistemu Windows ali kako zagnati spletni strežnik v sistemu Mac.

Odpravljanje napak (debugging)

Katere spretnosti potrebuje spletni programer (Debugging) - CodeBrainer

Odpravljanje napak je postopek, pri katerem v kodi najdete napake ali kakršne koli nepravilnosti, nato pa jih popravite ali spremenite kodo. V povprečju razvijalci programske opreme porabijo več kot 33% svojega časa za odpravljanje napak.

To je zelo zapleten in dolgotrajen postopek, žal pa je nujno zlo. Sčasoma odpravljanje napak postane zabavno, saj je z reševanjem ugank in majhnimi popravki vse izvedljivo, poleg tega se hkrati še marsičesa novega naučite.

Na srečo imajo vsi sodobni spletni brskalniki orodja za odpravljanje napak. Orodja za odpravljanje napak vam omogočajo, da si ogledate notranje delovanje spletne strani narejene z JavaScript-om.

Potrebno osnovno znanje za odpravljanje napak:

Dobro razumevanje uporabe metode console.log()
Nastavitev prekinitvenih točk (breakpoints)
Orodja za odpravljanje napak v brskalniku (moja najljubša pripomoček Chrome Developer Tools (DevTools))

GIT (Code Versioning)

Code versioning oz. nadzor nad različicami kode vam omogoča sledenje in nadzor, hkrati pa tudi pregledno spremljanje sprememb programske kode.

Predstavljajte si, da naredite nekaj manjših sprememb kode in potem celotna spletna stran preneha delovati. Več kot očitno je, da je pri spremembah, ki ste jih naredili, prišlo do napake. Napako boste najhitreje našli, če boste primerjali trenutno kodo s kodo verzije, ko je stran še delovala. Poleg tega se boste lahko korak za korakom vračali do tiste različice kode, ki je delovala.

Najbolj popularno orodje, skoraj standard, je GIT. Takšna orodja vam do določene mere omogočajo napake brez posledic :D.

Prav tako je odlično orodje, ko na isti kodi sodelujete z drugimi spletnimi programerji, saj boste pregledno videli, kdo je kaj naredil, prav tako pa to zelo poenostavi združevanje kode.

Ko zažnete uporabljati GIT na dnevni bazi, programirate že kot pravi profesionalec.

Vemo, da si boste prizadevali narediti popolno spletno stran, zato boste kodo pogosto spreminjali. Vseskozi morate slediti vsem spremembam in jih ustrezno shraniti v sistem za nadzor različic. Le na ta način boste ob pojavu napake lahko pogledali kodo pred spremembo, ki je to napako ustvarila.

Potrebno znanje pri osnovah nadzor nad različicami kode:

Pošiljanje sprememb kode
Skupna raba kode z drugimi programerji
Ponovna vzpostavitev kode na prejšnjo različico
Kaj je veja (branch), kaj oznaka (tag)
Kako združiti kodo (merge)
Vedeti, kaj je pregled kode (code review)
Kaj je predlog za spremembo (pull request)

Osnove grafičnega oblikovanja

Poznavanje osnov grafičnega oblikovanja vam je lahko v veliko pomoč. Če grafičnega oblikovanja ne poznate, se seznanite z nekaterimi orodji, ki jih uporabljajo grafični oblikovalci.

To je pomembno, saj boste nekje na vaši poti do spletnega programerja dobili dizajn, ki ga boste morali postaviti na spletu. Da vam bo lažje, je spodaj naštet seznam grafičnih orodij. Če se naučite osnov vsaj treh izmed teh orodij, bi moralo zadostovati.

Osnovna orodja za grafično oblikovanje:

Photoshop (napredno oblikovanje)
Figma (orodje za komunikacij z designerji)
Zeplin (orodje za komunikacij z designerji)
Sketch (zelo popularno novo orodje za oblikovanje)
Invision (prototipi in oblikovanje izkušnje)
Paint, Paint.NET (Windows); Preview (Mac) - dobra orodja za spreminjanje velikosti, obrezovanje
Canva - spletno orodje

Zaledni sistemi in podatkovne baze

Poznavanje zalednih sistemov in podatkovnih baz je znanje, ki ga potrebujete, ko osvojite znanje za postavitev spletne strani oz. njenega dela, ki ga uporabnik vidi. Sistem, ki deluje v zakulisju in ga uporabniki ne vidijo, imenujemo zaledni del (back-end). V tem delu se shranjujejo podatki, računajo cene izdelkov, pošiljajo sporočila prijateljem, ...

Podatki se shranjujejo in pridobivajo iz baz podatkov. Dandanes, za shranjevanje teh baz podatkov, pogosto uporabljamo rešitve v oblaku, kot sta MS Azure ali AWS.

Naučiti se morate, kako upravljati s podatki v podatkovnih bazah z uporabo jezika SQL (strukturiran poizvedbeni jezik) ali programskih vmesnikov za dostop do NoSQL baz (uporabljajo MongoDB, Firebase in drugi).

V zadnjem času je popularen tudi GraphQL, ki je namenjen poizvedbam direktno na API-ju (programskem vmesniku za strežnike). GraphQL briše mejo med zalednim sistemom in uporabniškim vmesnikom, saj lahko front-end programer naredi svojo poizvedbo, brez implementacije na strežniku.

Kot programer zalednih sistemov se morate naučiti tudi, kako graditi JavaScript aplikacije zunaj brskalnika, s pomočjo priljubljenih platform kot je Node.JS. Tako boste ustvarili bolj dinamično spletno stran. Prednost je, da boste lahko uporabili znanje JS za delo na zalednem sistemu.

Ker boste programirali z JS, je pomembno tudi, da se naučite, kako ustvariti zapis JSON (JavaScript Object Notation), ki se uporablja za komunikacijo med brskalnikom in strežnikom.

Mobilna aplikacija potrebuje iste podatke kot spletna stran, zato se boste morali naučiti ustvariti API (vmesnik uporabniškega programa). Z njim boste omogočili dostop do strežnika in vzpostavili nadzor nad dostopi, pripravili znane poizvedbe, dodajali zapise,... za spletno stran in druge aplikacije.

Potrebno osnovno znanje za zaledne sisteme:

NoSQL

Node.JS

JSON (preberite: Kaj je JSON v JavaScript)
API
Gostovanje v oblaku AWS ali MS Azure

Delo z gostovanjem (objava spletnega mesta)

Ste ustvarili stilsko interaktivno spletno stran z uporabo HTML, CSS in JavaScript? Kaj pa zdaj? Če še nimate strežnika in želite, da je vaša spletna stran stabilna in dostopna, morate vzpostaviti gostovanje strani. Gostovanje bo omogočilo delovanje strani, shranjevanje slik in drugih datotek ter gostovanje baze podatkov.

Spletno gostovanje vam omogoča, da svoje vire (datoteke HTML, datoteko CSS, datoteke JS, slike, bazo podatkov) shranjujete na strežniku, ki ima odlično internetno povezljivost in je dostopen prek svetovnega spleta.

Obstaja veliko ponudnikov gostovanja, žal ni hitrega odgovora, kateri je boljši. Ponudba je različna, glede na vaše zahteve pa se bo razlikovala tudi cena.

Ko izberete enega, morate le še poimenovati svojo spletno stran. Ko izberete ime in želite, da je to ime vašega spletnega mesta, ga morate registrirati pri ponudniku domene (codebrainer.com je na žalost že zaseden :D).

Potrebno osnovno znanje o spletnem gostovanju:

Kaj je URL, ime domene, poddomena
Kaj je IP
Usmerjanje (routing, preusmerjanje uporabnikov po strani)
Osnovno znanje FTP ali druga orodja za nalaganje kode na strežnik
Kako nadgraditi spletno stran z novo različico
Migracija in nadgradnje baze podatkov
Osnove optimizacije
Zmanjševanje resursov
Osnove analitike za zdravja strežnikov
Kako zagotoviti gostovanje brez prekinitev (oz. čimmanj le teh)

Knjižnice in ogrodje (Libraries and frameworks)

Katere spretnosti potrebuje spletni programer (Knjižnice in ogrodja) - CodeBrainer

Pri programiranju se boste naučili, da se lahko določeni deli kode uporabljajo večkrat, na istem projektu oz. na sorodnih projektih. Na primer, v JavaScriptu imate številne pogosto uporabljene funkcije, vedno pa je dobro poskrbeti, da je koda napisana samo enkrat in da do nje dostopamo preko "knjižnice".

Zakaj bi torej vso kodo vsakič pisali od začetka? Delo si poenostavimo tako, da uporabljamo knjižnice. V JavaScript knjižnicah so vsebovane funkcije, ki jih aplikacija lahko uporablja za izvajanje različnih nalog in tako olajša programiranje.

Tudi za CSS lahko uporabimo knjižnice, ki že imajo pogosto uporabljene razrede (class) za stile. Dober primer je Bootstrap in njihova zasnova za postavitev strani v vrstice in stolpce, ki se dinamično prilagajajo širini ekrana.

Z ogrodji je v osnovi enako, vendar pa ogrodja vsebujejo večje število knjižnic, nove pristope v programiranju in pa zasnove, ki projekte olajšajo in dvignejo na višji nivo. Zakaj nekaj zgraditi iz nič, če lahko nekaj uporabite in prilagodite svojemu projektu? Ogrodja ne samo poenostavljajo vaše delo ampak omogočajo tudi bolj standardiziran pristop k programiranju.

Knjižnice in ogrodja niso bližnjica do tega ali čarobna palica, da postanete spletni razvijalec, saj potrebujete osnove, da razumete, kako vam pomagajo. Z razumevanje osnov boste tudi bolj cenili znanje, ki je skrito v knjižnicah.

Priljubljene knjižnice in ogrodje:

Knjižnice (morate znati vsaj eno)
- Bootstrap
- jQuery
- Googlove charts
- D3.js
- Parsley
- React
Ogrodja (morate znati vsaj enega)
- Angular
- Node.JS
- Ember
- Vue

Začnite s spletnim programiranjem pri Codebrainer-ju

Pridobivanje osnovnega znanja o spletnem programiranju še nikoli ni bila lažje kot danes. Svetovni splet raste iz trenutka v trenutek, na voljo je vedno več tečajev, dokumentacij, razlag, kaj programiranje je.

Pri CodeBrainer-ju smo ponosni, da smo odlična spletna stran za začetnike na področju programiranja. Naše spletne delavnice poskrbijo, da bo še vsak začetnik osvojil osnove spletnega programiranja. Pri nas bosta na voljo vedno 2 inštruktorja, en kot predavatelj, drug kot pomočnik vam, da vam bo sproti pokazal, kje imate napake, kako jih odpravite…. S tem boste izgubili manj časa za osvajanje osnov, saj vam bomo mi pomagali.