Naloga načrtovanja spletišča je zagotoviti, da obiskovalci brez pretiranega truda in razmišljanja najdejo na spletnem mestu želene informacije. Slednje je zelo pomembno, saj to uporabniku zagotavlja pozitivno izkušnjo in se na spletno stran vrne, ali jo priporoči drugim.
Pri načrtovanju spletišča moramo:
Ciljna skupina in namen spletišča
Na začetku moramo najprej odgovoriti na naslednji vprašanji:
- kakšen je namen (cilj) spletišča
- kdo so ciljni obiskovalci oz. uporabniki in kakšni so njihovi cilji in potrebe
- pripomoček za izdelavo statičnega spletišča
- vzorčno statično spletišče
- spletišče prikazuje, kako v spletne strani vgradimo značilne elemente, ki jih vsebujejo moderne spletne strani
- spletišče je zgrajeno po standardu HTML5 in oblikovano s kaskadnimi slogi CSS
- spletišče je prilagodljivo vsem napravam
- vsebina spletišča je drugotnega pomena, zato je uporabljeno generično besedilo
Zemljevid spletišča
Zemljevid spletnega mesta opisuje strukturo spletišča in določa, katere strani in področja spletnega mesta bo treba izdelati, da bo spletišče dobilo hierarhično strukturo.
Pri gradnji spletišč se uporabljajo različne strukture informacij.
Zaporedna struktura
Najpreprostejši način organiziranja informacij je, da jih postavimo v zaporedja. Zaporedni vrstni red je lahko časovni ali logični (abecedno kot v kazalu, v enciklopedijah ali v slovarjih). Preprosta zaporedja so najprimernejša organizacija za strani z učnimi lekcijami.
Zaporedna struktura organiziranja informacij
Zapletenejša spletišča so lahko organizirana v logičnem zaporedju, pri čemer ima vsaka stran v glavnem zaporedju lahko povezave z eno ali več stranmi v istem ali v drugih spletiščih.
Zaporedna struktura z vejitvami
Hierarhična zgradba
Hierarhične zgradbe informacije so najboljši način organiziranosti obsežnih informacij. Ker so spletne strani navadno organizirane okoli domače strani, so hierarhične sheme primerne za organizacijo spletišča.
Hierarhična organiziranja informacij
Prepletena struktura
Ta organizacijski vzorec ima številne povezave tako z informacijami v spletišču, kot tudi na drugih zunanjih spletiščih. Prepletene organizacijske sheme so pogosto zelo nepraktične strukture na spletiščih, saj so uporabnikom težko razumljive in nepredvidljive.
Spletne strani funkcionirajo najbolje v majhnih spletiščih.
Prepletena organizacija strukture
Za naš primer je zemlejvid spletišča sledeč:
- Domov (
index.html)- Bootstrap
- Dokumentacija
- Kako začeti
- Postavitev
- Vsebina
- Komponente
- Vodiči
- Kontakt
- Blog
Grafični prikaz zemljevida spletišča - blok diagram:
Blok diagram - grafični prikaz hierarhične strukture spletišča
Osnutek postavitve spletnih strani
Naslednji korak načrtovanja spletišča zahteva izdelavo osnutka posameznih spletnih strani, ki ga lahko izdelamo ročno na papir ali pa v grafičnem programu.
Ročno skiciran osnutek spletnih strani
Na voljo je kar nekaj spletnih aplikacij, ki omogočajo izdelavo osnutka spletnih strani:
- Wireframe.cc
- Moqups.com
- Lumzy.com
- Gliffy.com
- Google Drive Drawings
V osnutku pripravimo menijsko strukturo spletne strani, ki je še posebej pomembna pri izdelavi spletnih strani z veliko vsebine. Potrebno je ustvariti ustrezno hierarhijo spletne vsebine. Vsebino lahko razdelimo tudi na več menijev:
- Hitri meni, ki se nahaja na vrhu strani. Sem po navadi uvrstimo vsebine, kot so: domov, novice, reference, fotogalerija, o podjetju, pogosta vprašanja...
- Glavni meni, ki je namenjen predstavitvi izdelkov ali storitev. Po navadi ga umestimo v levi ali desni stolpec spletne strani.
- Meni v nogi se nahaja na dnu strani in ni nujno, da ga spletna stran vsebuje. Ta meni vsebuje pogoje poslovanja, pravno obvestilo, zemljevid strani, ipd.
Ko je menijska struktura pripravljena, naredimo še vsebinski načrt:
- katere elemente (naslove, besedilo, slike, aktivne gumbe, animacije, audio, video...) bo vsebovala posamezna spletna stran
- določimo položaj elementov na posameznih spletnih straneh
Osnutek postavitve izhodiščne spletne strani index.html:
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 in z razlčnimi orodji. Pri tem pišemo kodo (HTML , CSS, JavaScript, PHP, ...) ali pa sestavljamo spletišče z grafičnim vmesnikom. Urejevalniki besedil in orodja nam pri izdelavi pomagajo na različne načine:
- barvajo kodo za boljši pregled
- nudijo ukaze, ki so v tistem trenutku na voljo
- samodejno zaključujejo oznake
- omogočajo tehniko vleci in spusti vnaprej pripravljenih elementov
- nudijo že vnaprej pripravljene bloke kode
- sproti prikazujejo izdelano spletišče
- sproti preverjajo pravilnost kode
- gradimo spletišče v vizualnem načinu, orodje pa samodejno piše kodo
- ...
Urejevalniki besedil
Priljubljeni urejevalniki besedil za pisanje HTML in CSS kode so:
WYSIWIG urejevalniki
WYSIWIG (angl. What You See Is What You Get) urejevalniki so alternativa ročnemu pisanju kode. Z njimi spletno stran gradimo podobno, kot sestavljamo dokument v urejevalniku besedil MS Word:
Modularna gradnja s spletnimi aplikacijami in namiznimi orodji
Na voljo je množica spletnih in namiznih orodij, ki omogočajo modularno gradnjo spletnih strani. S tehniko vleci-spusti v spletno stran vstavimo pripravljene module, ki jim v grafičnem vmesniku določamo lastnosti. Nekatera od teh orodij omogočajo tudi urejanje kode.
CMS Sistemi
Spletišče lahko izdelamo tudi s sistemom za upravljanje vsebin. CMS sistem je potrebno namestiti, v grafičnem vmesniku pa dodajamo vsebine in nastavljamo lastnosti spletišča. Priljubljeni CMS sistemi so:
- Wordpress
- Joomla
- Drupal
- ...
Spletišče bomo izdelali s pisanjem HTML in CSS kode v urejevalniku besedil in sicer v Code Inspectorju programa Adobe Dreamweaver CC. Ta program je možno 1 mesec preizkušati brezplačno, zatem pa je potrebno kupiti lincenco.
Alternativno lahko uporabite tudi Notepad++, Atom ali pa Sublime text.
Uporabniški vmesnik Adobe Dreamweaver CC - Code Inspector
Prostor in datotečna struktura na lokalnem disku
Pred začetkom gradnje spletišča moramo izbrati prostor, kjer bodo datoteke spletišča. Navadno spletišče naprej zgradimo na lokalnem disku, da ga lahko pred javno objavo temeljito pregledamo, odpravimo morebitne slovnične in druge napake ter testiramo delovanje povezav.
Za lažji nadzor in večjo preglednost datoteke spletišča razporedimo v mape, pri obširnejšem spletišču, pa uporabimo tudi podmape. Tudi zunanje datoteke, ki jih vključimo v spletišče razporedimo v mape (npr. slike v mapo slike, CSS datoteke v mapo css itd.).
V našem primeru spletišče shranimo v mapo eNSA_primer_splet, ki leži v korenskem imeniku lokalnega strežnika XAMPP. Celotna pot lokacije je:
C:\xampp\htdocs\eNSA_primer_splet\
Kreiramo mape css, slike in dokument. Kot povejo že imena, bomo v mapo css shranili datoteko s kaskadnimi slogi, v mapo dokument spletne strani, ki so v navigaciji dokumentacija, v mapo slike, ki vsebuje še podmape blog, bootstrap, dokumentacija in vodici, pa vse slike.
Kreiramo tudi prazne tekstovne datoteke in jih shranimo, kot je prikazano na spodnji sliki:
- css
- slog.css
- dokumentacija
- zacetek.html
- postavitev.html
- vsebina.html
- komponente.html
- slike
- blog
- bootstrap
- dokumentacija
- vodici
- index.html
- bootstrap.html
- vodici.html
- kontakt.html
- blog.html
Datotečna struktura na lokalnem disku