Načrtovanje in razvoj spletnih aplikacij

Načrtovanje spletišča

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:

  1. kakšen je namen (cilj) spletišča
  2. kdo so ciljni obiskovalci oz. uporabniki in kakšni so njihovi cilji in potrebe
Primer izdelave spletišča načrtovanje namen spletišča
  • 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
Primer izdelave spletišča načrtovanje ciljni obiskovalci
Ciljni obiskovalci so prdvsem dijaki, ki se izobražujejo za poklic Računalniški tehnik. Seveda pa je spletišče namenjena tudi vsem preostalim obiskovalcem, ki želijo spoznati postopek izdelave statičnega spletišča.

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

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

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 struktura

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 struktura

Prepletena organizacija strukture

Primer izdelave spletišča načrtovanje zemljevid spletišča

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

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

Ročno skiciran osnutek spletnih strani

Na voljo je kar nekaj spletnih aplikacij, ki omogočajo izdelavo osnutka spletnih strani:

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:

  1. Hitri meni, ki se nahaja na vrhu strani. Sem po navadi uvrstimo vsebine, kot so: domov, novice, reference, fotogalerija, o podjetju, pogosta vprašanja...
  2. Glavni meni, ki je namenjen predstavitvi izdelkov ali storitev. Po navadi ga umestimo v levi ali desni stolpec spletne strani.
  3. 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
Primer izdelave spletišča načrtovanje osnutek postavitve spletne strani

Osnutek postavitve izhodiščne spletne strani index.html:

Osnutek postavitve spletne strani

Osnutek postavitve izhodiščne spletne strani


Osnutek postavitve izhodiščne spletne strani index.html za mobilne telefone:

Osnutek postavitve spletne strani 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
  • ...
Primer izdelave spletišča načrtovanje spletno ordje

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

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.).

Primer izdelave spletišča načrtovanje datotečna struktura

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

Datotečna struktura na lokalnem disku