Načrtovanje spletišča je eden najpomembnejših korakov pri izdelavi spletnega mesta. Z njim določimo namen, ciljne uporabnike, strukturo, vsebino, način navigacije, oblikovno zasnovo, uporabljena orodja in datotečno organizacijo.
Dobro načrtovano spletišče je pregledno, logično zgrajeno, odzivno, dostopno in prijazno do uporabnika. Slabo načrtovano spletišče pa lahko postane nepregledno, težje za vzdrževanje in manj uporabno.
Pomni: Načrtovanje spletišča ni izguba časa, ampak priprava, ki zmanjša število kasnejših popravkov. Pred izdelavo strani moramo vedeti, komu je spletišče namenjeno, kaj bo vsebovalo in kako bo urejeno.
Osnovna pravila načrtovanja spletišča
Preden začnemo pisati kodo ali izbirati obliko, moramo razmisliti o ključnih vprašanjih:
- kakšen je namen spletišča,
- kdo so ciljni uporabniki,
- katere vsebine bo spletišče vsebovalo,
- kako bodo strani med seboj povezane,
- kakšna bo navigacija,
- kako bo stran prikazana na različnih napravah,
- katera orodja in tehnologije bomo uporabili,
- kako bodo organizirane mape in datoteke.
Pozor: Če struktura spletišča ni načrtovana vnaprej, se lahko kasneje pojavijo nepregledni meniji, podvojene vsebine, nedelujoče povezave in težave pri vzdrževanju.
Ciljna skupina in namen spletišča
Na začetku si moramo odgovoriti na dve osnovni vprašanji:
- kakšen je namen oziroma cilj spletišča,
- kdo so ciljni obiskovalci oziroma uporabniki in kakšne so njihove potrebe.
Če namen in ciljno skupino jasno določimo že na začetku, lažje pripravimo ustrezno vsebino, navigacijo, obliko in funkcije spletišča.
Namen spletišča je lahko na primer predstavitev podjetja, objava učnih gradiv, prodaja izdelkov, obveščanje uporabnikov, zbiranje prijav ali omogočanje uporabe spletne aplikacije.
Pomni: Vsebina, oblika in funkcije spletišča morajo izhajati iz potreb uporabnikov. Enako spletišče ni enako primerno za otroke, dijake, strokovnjake, kupce ali poslovne uporabnike.
- vzorčno statično spletišče za predstavitev ogrodja Bootstrap,
- spletišče prikazuje uporabo sodobne Bootstrap postavitve, navigacije, dokumentacijskih strani, kartic, obrazcev in drugih značilnih elementov,
- spletišče je zgrajeno z HTML, CSS in ogrodjem Bootstrap 5,
- postavitev je odzivna in prilagojena različnim napravam,
- vsebina vsebuje opise Bootstrapa, mrežnega sistema, komponent in začetka uporabe,
- spletišče je primerno kot učni primer za načrtovanje in izdelavo sodobnega statičnega spletišča.
Ciljni obiskovalci so predvsem dijaki in drugi začetniki, ki se učijo načrtovanja in izdelave spletišč, pa tudi vsi, ki želijo spoznati sodobno zasnovo preprostega Bootstrap spletišča.
Zemljevid spletišča
Zemljevid spletišča opisuje strukturo spletnega mesta in določa, katere strani ter vsebinski sklopi ga sestavljajo. Uporaben je pri načrtovanju menijev, povezav in razporeditve vsebine.
Zemljevid spletišča je lahko zapisan kot seznam, tabela ali grafični prikaz. Pri večjih spletiščih je posebej uporaben grafični blok diagram, ker hitro pokaže razmerja med stranmi.
Pomni: Zemljevid spletišča ne pomeni samo tehničnega seznama strani. Je načrt, ki pomaga razumeti, kako bo uporabnik potoval po spletišču.
Strukture informacij v spletišču
Pri gradnji spletišč se uporabljajo različne strukture informacij. Izbira strukture vpliva na navigacijo, preglednost in uporabniško izkušnjo.
Zaporedna struktura
Najpreprostejši način organiziranja informacij je zaporedje. Takšna struktura je primerna za učne vsebine, vodiče, korake postopka ali predstavitve, kjer uporabnik sledi eni strani za drugo.
Zaporedna struktura organiziranja informacij
Zapletenejša spletišča lahko združujejo glavno zaporedje strani in dodatne vejitve z drugimi podstranmi ali zunanjimi povezavami.
Zaporedna struktura z vejitvami
Hierarhična zgradba
Hierarhična zgradba je najpogostejša pri večjih spletiščih. Strani so razporejene od splošnih vsebin proti bolj podrobnim vsebinam. Takšna zgradba omogoča jasnejšo navigacijo in je primerna za večino predstavitvenih, učnih in dokumentacijskih spletišč.
Hierarhična organizacija informacij
Prepletena struktura
Prepletena struktura vsebuje veliko notranjih in zunanjih povezav. Lahko je uporabna pri manjših vsebinskih zbirkah, vendar pri večjih spletiščih hitro postane nepregledna, zato jo uporabljamo previdno.
Najbolje deluje v manjših ali posebej zasnovanih spletiščih, kjer so povezave med vsebinami jasno premišljene.
Prepletena organizacija strukture
Pozor: Preveč povezav brez jasne strukture lahko uporabnika zmede. Povezave naj pomagajo pri razumevanju vsebine, ne pa ustvarjajo občutka nepreglednosti.
Za naš primer je zemljevid spletišča naslednji:
- Domov (
index.html)- Bootstrap (
bootstrap.html) - Dokumentacija
- Kako začeti (
dokument/zacetek.html) - Postavitev (
dokument/postavitev.html) - Vsebina (
dokument/vsebina.html) - Komponente (
dokument/komponente.html)
- Kako začeti (
- Vodiči (
vodici.html) - Kontakt (
kontakt.html) - Blog (
blog.html)
- Bootstrap (
Grafični prikaz zemljevida spletišča je lahko pripravljen kot blok diagram oziroma grafični prikaz hierarhične strukture.
Blok diagram - grafični prikaz hierarhične strukture spletišča
Osnutek postavitve spletnih strani
Naslednji korak je izdelava osnutka posameznih spletnih strani. Osnutek lahko izdelamo ročno na papir ali v grafičnem programu. Z njim določimo razporeditev glavnih elementov, vsebinskih sklopov, menijev in poudarjenih delov strani.
Osnutek postavitve pogosto imenujemo tudi wireframe. Ne ukvarja se nujno z barvami in končnimi slikami, ampak predvsem z razporeditvijo elementov.
Ročno skiciran osnutek spletnih strani
Za izdelavo osnutkov lahko uporabimo različna orodja, na primer:
- Wireframe.cc
- Moqups
- Gliffy
- Google Drawings
- druga orodja za skiciranje in prototipiranje
V osnutku pripravimo tudi menijsko strukturo spletne strani. Pri večjih spletiščih je jasna navigacija zelo pomembna, saj uporabniku pomaga pri orientaciji in hitrem dostopu do vsebin.
- Glavna navigacija se navadno nahaja na vrhu strani in vsebuje najpomembnejše povezave.
- Podrejena navigacija lahko razdeli vsebino znotraj posameznega sklopa, na primer dokumentacije.
- Noga strani pogosto vsebuje dodatne povezave, kontaktne podatke in pravne informacije.
Ko je menijska struktura pripravljena, naredimo še vsebinski načrt:
- katere elemente bo vsebovala posamezna stran, na primer naslove, odstavke, slike, gumbe, obrazce in kartice,
- kje bodo ti elementi postavljeni in kako se bodo prilagajali manjšim zaslonom.
Pomni: Osnutek postavitve najprej rešuje vprašanje razporeditve vsebine. Barve, slike in podrobno grafično oblikovanje lahko pridejo šele kasneje.
Osnutek postavitve izhodiščne spletne strani index.html predvideva naslednje glavne sklope:
- odzivna zgornja navigacija z logotipom, povezavami in spustnim menijem Dokumentacija,
- uvodni odsek z naslovom, kratkim opisom in gumboma za prehod na vsebino,
- vrtiljak slik z uvodnimi poudarki,
- kartice za predstavitev tehnologij HTML5, CSS3, JavaScript in Bootstrap,
- vsebinski odsek z razlago Sass in Less,
- odsek z mnenji uporabnikov,
- noga strani s povezavami na družbena omrežja.
Osnutek postavitve dokumentacijskih strani pa vključuje še stranski meni in glavni vsebinski stolpec.
Osnutek postavitve izhodiščne spletne strani
Osnutek postavitve izhodiščne spletne strani index.html za mobilne telefone:
Osnutek postavitve izhodiščne spletne strani za mobilne telefone
Izbira spletnih orodij
Spletišče lahko izdelamo na več načinov. Kodo lahko pišemo ročno ali pa uporabimo orodja, ki nam delo olajšajo. Pri tem lahko uporabljamo tehnologije, kot so HTML, CSS, JavaScript in po potrebi tudi strežniške jezike ter podatkovne baze.
Urejevalniki kode nam pri delu pomagajo na različne načine:
- obarvajo kodo za boljši pregled,
- samodejno zaključujejo oznake in narekovaje,
- predlagajo ukaze, oznake in razrede,
- omogočajo hitro iskanje in zamenjavo,
- lahko sproti prikazujejo predogled strani,
- pomagajo pri preverjanju pravilnosti kode.
Urejevalniki kode
Priljubljeni urejevalniki za pisanje spletne kode so:
- Visual Studio Code,
- Notepad++,
- Sublime Text.
Vizualna orodja in gradniki
Na voljo so tudi orodja, ki omogočajo sestavljanje spletnih strani v bolj vizualnem načinu. Takšna orodja so uporabna pri hitri izdelavi prototipov ali enostavnejših spletišč.
- Wix,
- Weebly,
- Mobirise,
- druga spletna in namizna orodja za gradnjo strani.
CMS sistemi
Spletišče lahko izdelamo tudi s sistemom za upravljanje vsebin. Pri CMS sistemih vsebine navadno dodajamo prek skrbniškega vmesnika, brez neposrednega pisanja celotne kode strani.
- WordPress,
- Joomla,
- Drupal.
Pozor: Izbira orodja naj bo odvisna od cilja spletišča. Za učenje kode je smiselno uporabljati urejevalnik kode, za hitro postavitev enostavne strani pa je lahko uporabno tudi vizualno orodje ali CMS.
V našem primeru spletišče izdelamo s pisanjem HTML in CSS kode v urejevalniku kode. Za takšno delo je zelo primeren program Visual Studio Code, lahko pa uporabimo tudi drug sodoben urejevalnik.
Spletišče uporablja še ogrodje Bootstrap 5, zunanje pisave Google Fonts, ikone Font Awesome in datoteko bootstrap.bundle.min.js za delovanje odzivne navigacije ter drugih interaktivnih komponent.
Primer uporabe urejevalnika kode pri izdelavi spletišča
Prostor in datotečna struktura na lokalnem disku
Pred začetkom izdelave spletišča moramo določiti, kje bodo datoteke shranjene. Spletišče navadno najprej zgradimo na lokalnem disku, da ga lahko pred objavo natančno pregledamo, odpravimo napake in preizkusimo delovanje povezav.
Za boljšo preglednost datoteke razporedimo v mape in podmape. Tako lažje upravljamo slike, slogovne datoteke, dokumentacijske strani in druge vsebine.
Datoteke in mape naj imajo smiselna, kratka in dosledna imena. Priporočljivo je uporabljati male črke, brez presledkov in brez posebnih znakov.
Pomni: Pregledna datotečna struktura je pomembna tudi pri objavi spletišča. Če so povezave med datotekami urejene že lokalno, bo manj napak pri prenosu na strežnik.
V našem primeru spletišče shranimo v mapo splet-primer v korenskem imeniku lokalnega strežnika XAMPP. Celotna pot je lahko na primer:
C:\xampp\htdocs\splet-primer\
Kreiramo mapo css, mapo dokument in mapo slike. V mapi slike so še podmape blog, bootstrap, dokumentacija, index in vodici.
Datotečna struktura je lahko naslednja:
- css
slog.css
- dokument
zacetek.htmlpostavitev.htmlvsebina.htmlkomponente.html
- slike
- blog
- bootstrap
- dokumentacija
- index
- vodici
favicon.icologo.png
index.htmlbootstrap.htmlvodici.htmlkontakt.htmlblog.html
Datotečna struktura na lokalnem disku
Primerjava delov načrta spletišča
| Del načrta | Namen | Primer |
|---|---|---|
| namen spletišča | določi, zakaj spletišče obstaja | predstavitev ogrodja Bootstrap |
| ciljna skupina | določi, komu je spletišče namenjeno | dijaki in začetniki |
| zemljevid spletišča | prikaže strani in njihovo medsebojno povezanost | Domov, Dokumentacija, Vodiči, Kontakt |
| osnutek postavitve | določi razporeditev glavnih elementov strani | glava, navigacija, vsebina, kartice, noga |
| izbira orodij | določi, s čim bomo spletišče izdelali | Visual Studio Code in Bootstrap |
| datotečna struktura | uredi datoteke v pregledne mape | css, slike, dokument |
Priporočila
- Pred izdelavo jasno določi namen spletišča.
- Ciljno skupino opiši čim bolj konkretno.
- Zemljevid spletišča pripravi pred izdelavo menijev.
- Za večja spletišča uporabi hierarhično strukturo.
- Osnutek postavitve pripravi tudi za mobilni prikaz.
- Datoteke razporedi v smiselne mape.
- Imena datotek naj bodo kratka, razumljiva in dosledna.
- Izbrana orodja naj ustrezajo zahtevnosti projekta.
Pogoste napake
- Namen spletišča ni jasno določen.
- Ciljna skupina je opisana preveč splošno.
- Zemljevid spletišča ni pripravljen, zato je navigacija nepregledna.
- Osnutek postavitve je pripravljen samo za velik zaslon.
- Datoteke so shranjene brez urejene strukture map.
- Imena datotek vsebujejo presledke, šumnike ali nedosledne zapise.
- Orodje je izbrano brez premisleka o ciljih in zahtevnosti spletišča.