Spletne strani lahko razvrstimo glede na način priprave vsebine in glede na to, kje se izvaja programska koda. Nekatere strani so vnaprej pripravljene, druge se spreminjajo v brskalniku, tretje pa se sestavijo na strežniku šele ob zahtevi uporabnika.
V praksi se te vrste pogosto prepletajo. Sodobna spletna stran je lahko hkrati statična po osnovni zgradbi, aktivna zaradi JavaScripta v brskalniku in dinamična zaradi podatkov, ki jih pripravi strežnik.
Pomni: Delitev na statične, aktivne in dinamične spletne strani je učna razdelitev. V resničnih spletnih projektih se ti pristopi pogosto uporabljajo skupaj.
Osnovna pravila
- Statična spletna stran je vnaprej pripravljena datoteka, ki jo strežnik pošlje brskalniku.
- Aktivna spletna stran vsebuje kodo, ki se izvaja v brskalniku in omogoča interaktivnost.
- Dinamična spletna stran se ustvari na strežniku glede na zahtevo, podatke ali uporabnika.
- HTML opisuje zgradbo strani, CSS njen videz, JavaScript pa omogoča delovanje v brskalniku.
- Pri dinamičnih straneh pogosto sodelujejo še strežniški jeziki, ogrodja in podatkovne baze.
Pozor: Beseda dinamična ne pomeni samo, da se na strani nekaj premika. Dinamična stran pomeni predvsem to, da se vsebina ustvari ali prilagodi na strežniku.
Statične spletne strani
Statične spletne strani so strani, pri katerih spletni strežnik ob vsaki zahtevi uporabniku pošlje vnaprej pripravljeno datoteko. Vsebina se ne spremeni sama od sebe, ampak šele takrat, ko nekdo spremeni izvorno datoteko.
Za osnovno statično spletno stran potrebujemo predvsem HTML in CSS. HTML določa strukturo vsebine, CSS pa njen videz. Po potrebi lahko dodamo tudi slike, pisave, videoposnetke in druge datoteke.
Pomni: Statična stran ni nujno preprosta ali oblikovno zastarela. Lahko je sodobno oblikovana, odzivna in pregledna, vendar se njena vsebina ne ustvarja sproti na strežniku.
Zgradba statične strani
Vsaka HTML datoteka ima običajno glavo <head> in telo <body>. V glavi so podatki o dokumentu, na primer naslov strani, nabor znakov, povezave do slogovnih datotek in drugi metapodatki. V telesu pa je dejanska vsebina spletne strani.
Koda statične spletne strani
XML kot jezik za zapis podatkov
XML je jezik za zapis in izmenjavo podatkov. V nasprotju s HTML ni namenjen predvsem prikazu vsebine v brskalniku, ampak strukturiranemu zapisu podatkov. Pri XML lahko razvijalec določi lastna imena oznak, zato je primeren za izmenjavo podatkov med različnimi sistemi.
<vozilo>
<tip>osebno vozilo</tip>
</vozilo>XML se danes uporablja predvsem tam, kjer želimo podatke jasno strukturirati, prenašati ali obdelovati v različnih programih in storitvah.
Primer XML datoteke
Strežba statičnih spletnih strani
Postopek strežbe statične spletne strani je običajno naslednji:
- odjemalec pošlje zahtevo za spletni naslov,
- zahteva prispe do spletnega strežnika,
- strežnik poišče ustrezno datoteko na disku,
- strežnik pošlje odjemalcu pripravljeno HTML datoteko in povezane vire.
Strežba statičnih spletnih strani
Prednosti in omejitve statičnih strani
| Prednosti | Omejitve |
|---|---|
| hitro nalaganje | vsebino je treba praviloma urejati ročno |
| preprosta objava na strežniku | manj primerne za vsebine, ki se pogosto spreminjajo |
| manjša obremenitev strežnika | brez dodatnih rešitev ne omogočajo prijav, iskanja po bazi ali administracije |
Aktivne spletne strani
Aktivne spletne strani omogočajo izvajanje programske kode v uporabnikovem brskalniku. Danes to najpogosteje pomeni uporabo JavaScripta, ki omogoča interaktivnost in spreminjanje strani brez ponovnega nalaganja celotnega dokumenta.
JavaScript lahko dostopa do zgradbe dokumenta, se odziva na dogodke in spreminja prikaz strani. Zato lahko uporabnik dobi hitrejšo in bolj odzivno izkušnjo.
Z aktivnimi spletnimi stranmi lahko:
- spreminjamo vsebino HTML dokumenta,
- spreminjamo atribute HTML elementov,
- spreminjamo sloge CSS,
- preverjamo podatke v obrazcih še pred pošiljanjem na strežnik,
- obdelujemo dogodke, kot so klik, premik miške ali pritisk tipke,
- prikazujemo interaktivne animacije in odzivne uporabniške vmesnike,
- uporabljamo podatke v brskalniku, na primer piškotke ali lokalno shrambo.
Pozor: Preverjanje obrazca v brskalniku izboljša uporabniško izkušnjo, vendar ne nadomesti preverjanja na strežniku. Podatke, ki jih pošlje uporabnik, mora strežnik vedno preveriti tudi sam.
V starejših učnih primerih so se omenjali tudi Java apleti, vendar se ti v sodobnem spletu ne uporabljajo več. Danes je glavna tehnologija za aktivnost na strani JavaScript skupaj z brskalniškimi vmesniki in DOM-om.
Primer aktivne spletne strani, ki ima vključeno skriptno kodo JavaScript
Strežba aktivnih spletnih strani
Postopek strežbe aktivnih spletnih strani je običajno naslednji:
- odjemalec pošlje zahtevo za spletno stran,
- spletni strežnik poišče ustrezne datoteke,
- strežnik pošlje HTML, CSS in JavaScript,
- brskalnik sestavi stran in izvede JavaScript kodo,
- stran postane interaktivna brez nujnega ponovnega nalaganja celotnega dokumenta.
Strežba aktivnih spletnih strani
Delovanje aktivnih spletnih strani v brskalniku
Dinamične spletne strani
Dinamične spletne strani so strani, katerih vsebina nastane na strežniku šele ob zahtevi uporabnika. Strežnik lahko pri tem uporabi podatke iz podatkovne baze, prijavo uporabnika, parametre v zahtevi ali druge podatke iz sistema.
Dinamična spletna stran se torej ne vrne nujno kot vnaprej pripravljena datoteka. Strežnik najprej izvede program, ta pripravi vsebino, nato pa se uporabniku pošlje sestavljen odgovor, najpogosteje v obliki HTML dokumenta.
Glavne prednosti dinamičnih strani so:
- prilagojena vsebina za posameznega uporabnika,
- ponovna uporaba skupnih delov strani, kot so glava, meni in noga,
- delo z večjimi količinami podatkov,
- iskanje, prijava, administracija in druge funkcije spletnih aplikacij,
- povezava s podatkovnimi bazami in zunanjimi storitvami.
Pomni: Pri dinamični spletni strani brskalnik na koncu pogosto še vedno prejme HTML, CSS in JavaScript. Razlika je v tem, da je HTML lahko ustvarjen sproti na strežniku.
Tehnologije dinamičnih spletnih strani
Za izdelavo dinamičnih spletnih strani lahko strežnik uporablja različne tehnologije, na primer:
- PHP,
- ASP.NET,
- JSP oziroma Java strežniške tehnologije,
- Node.js na strežniški strani,
- različna spletna ogrodja in predloge,
- podatkovne baze, na primer MySQL, MariaDB, PostgreSQL ali druge sisteme.
Starejša tehnologija CGI je zgodovinsko pomembna, vendar se danes uporablja bistveno redkeje kot sodobna strežniška ogrodja.
Strežba dinamičnih spletnih strani
Z vidika uporabnika je končni rezultat pogosto enak: brskalnik prejme HTML, CSS in JavaScript. Razlika je v tem, da pri dinamični strani vsebina ni pripravljena vnaprej, ampak jo strežnik sestavi sproti glede na zahtevo in podatke.
Strežba dinamičnih spletnih strani običajno poteka v naslednjih korakih:
- odjemalec pošlje zahtevo za dinamično stran,
- brskalnik pošlje HTTP zahtevo spletnemu strežniku,
- strežnik zažene ustrezen program ali ogrodje,
- program obdela podatke in po potrebi dostopa do podatkovne baze,
- program sestavi HTML odgovor,
- strežnik pošlje ustvarjeno stran nazaj brskalniku.
Strežba dinamičnih spletnih strani
Primerjava vrst spletnih strani
| Vrsta strani | Kje nastane glavna vsebina? | Tipične tehnologije | Primer uporabe |
|---|---|---|---|
| statična | vnaprej je zapisana v datotekah | HTML, CSS | predstavitvena stran, navodila, dokumentacija |
| aktivna | osnova pride s strežnika, spremembe izvaja brskalnik | HTML, CSS, JavaScript | interaktivni obrazci, galerije, meniji, uporabniški vmesniki |
| dinamična | ustvari se na strežniku ob zahtevi | PHP, Node.js, ASP.NET, podatkovne baze | spletna trgovina, prijava, iskalnik, spletna učilnica |
Priporočila
- Za preproste predstavitvene strani je pogosto dovolj statična spletna stran.
- Za interaktivnost v brskalniku uporabi JavaScript, vendar pomembne podatke vedno preveri tudi na strežniku.
- Za strani, ki prikazujejo podatke iz baze, uporabniške račune ali administracijo, uporabi dinamičen pristop.
- Pri večjih projektih jasno loči zgradbo, oblikovanje, delovanje v brskalniku in delovanje na strežniku.
- Za ponavljajoče se dele strani, kot so glava, meni in noga, je smiselna uporaba strežniških vključitev ali predlog.
V sodobnem spletu se statične, aktivne in dinamične tehnike pogosto združujejo. Stran je lahko na primer delno statična, v brskalniku interaktivna z JavaScriptom, hkrati pa se ključni podatki ustvarjajo dinamično na strežniku.