29
4.letnik Srednja šola za oblikovanje Maribor Program: Medijski tehnik Šolsko leto: 2014/2015 Natalija Čulk, univ.dipl.med.kom

Srednja šola za oblikovanje Maribor Program: Medijski ... · 4.letnik Srednja šola za oblikovanje Maribor Program: Medijski tehnik Šolsko leto: 2014/2015 Natalija Čulk, univ.dipl.med.kom

  • Upload
    others

  • View
    3

  • Download
    0

Embed Size (px)

Citation preview

Page 1: Srednja šola za oblikovanje Maribor Program: Medijski ... · 4.letnik Srednja šola za oblikovanje Maribor Program: Medijski tehnik Šolsko leto: 2014/2015 Natalija Čulk, univ.dipl.med.kom

4.letnik

Srednja šola za oblikovanje Maribor

Program: Medijski tehnik

Šolsko leto: 2014/2015

Natalija Čulk, univ.dipl.med.kom

Page 2: Srednja šola za oblikovanje Maribor Program: Medijski ... · 4.letnik Srednja šola za oblikovanje Maribor Program: Medijski tehnik Šolsko leto: 2014/2015 Natalija Čulk, univ.dipl.med.kom

Zgradba načrta• Ime datoteke načrta:

Nacrt_spletnega_mesta_Ime_Priimek.docx

• Naslovna stran mora obvezno vsebovati naslednje podatke:

• Srednja šola za oblikovanje Maribor,

• Načrt spletnega mesta,

• ime spletnega mesta,

• Ime in priimek dijaka,

• Razred/letnik,

• Program: medijski tehnik

• Predmet: medijsko oblikovanje

• Šolsko leto

! Pri oblikovanju dokumenta uredimo glavo, nogo, oštevilčimo strani,…

Page 3: Srednja šola za oblikovanje Maribor Program: Medijski ... · 4.letnik Srednja šola za oblikovanje Maribor Program: Medijski tehnik Šolsko leto: 2014/2015 Natalija Čulk, univ.dipl.med.kom

Vsebina

• Kazalo

• Uvod- osnovna ideja

• Cilji in namen- razlika!

• Funkcionalnosti

• Tehnične zahteve

• Profil uporabnika

• Struktura vsebine

• Oblika

• Analiza konkurence

• Ostalo

Page 4: Srednja šola za oblikovanje Maribor Program: Medijski ... · 4.letnik Srednja šola za oblikovanje Maribor Program: Medijski tehnik Šolsko leto: 2014/2015 Natalija Čulk, univ.dipl.med.kom

Ključni problem oblikovanja spletnih strani:

Oblika vs. funkcija

Spletne strani morajo zraven privlačnega dizajna imeti tudi uporabno

vrednost, dodatke, vsebino in druge elemente, ki nudijo uporabniku

tisto, kar išče.

Page 5: Srednja šola za oblikovanje Maribor Program: Medijski ... · 4.letnik Srednja šola za oblikovanje Maribor Program: Medijski tehnik Šolsko leto: 2014/2015 Natalija Čulk, univ.dipl.med.kom

Določitev cilja spletnega mesta

• Merljivi cilji: • povečanje prodaje oz. dobička,

• pridobivanje e-poštnih naslovov

• Pridobiti nove stranke

• Ponuditi podporo preko spleta in s tem znižati stroške poslovanja,...

Cilji naj bodo razumljivi, motivacijski in zavezujoči!

Page 6: Srednja šola za oblikovanje Maribor Program: Medijski ... · 4.letnik Srednja šola za oblikovanje Maribor Program: Medijski tehnik Šolsko leto: 2014/2015 Natalija Čulk, univ.dipl.med.kom

Določanje namena spletnega mesta

• Pri namenu upoštevamo profil uporabnika

• Primer namenov spletnega mesta: • nudenje podpore srednji šoli pri obveščanju dijakov

• Ozaveščanje uporabnikov

• Komunikacija s strankami

Page 7: Srednja šola za oblikovanje Maribor Program: Medijski ... · 4.letnik Srednja šola za oblikovanje Maribor Program: Medijski tehnik Šolsko leto: 2014/2015 Natalija Čulk, univ.dipl.med.kom

Profil uporabnika

• Demografski podatki - Kdo so naši uporabniki – starost, spol, izobrazba, interesi

• Kateri so razlogi da bi obiskovalec uporabljal vašo spletno mesto (vrednost izdelka, stroški storitev, kvalitetne informacije,..)?

• Kaj želimo da obiskovalec ob obisku naredi: postane član, poišče informacijo, opravi nakup,...

• Namen in funkcionalnosti priredimo skupini ljudi oz. profilu uporabnika (npr. velikosti pisave, dodatki, vsebina,…)!

Page 8: Srednja šola za oblikovanje Maribor Program: Medijski ... · 4.letnik Srednja šola za oblikovanje Maribor Program: Medijski tehnik Šolsko leto: 2014/2015 Natalija Čulk, univ.dipl.med.kom

Funkcionalnosti

• Določimo jih na podlagi profila uporabnika, namena in zahtev

• Dobro narejene strani izkoriščajo možnost, ki jo internet kot medij omogoča: dvosmerno komunikacijo med spletno stranjo in njenim obiskovalcem (socialna omrežja, forumi, klepetalnice, nagradne igre, vpisovanje informacij, izpolnjevanje obrazcev itd.).

• Funkcionalnosti so lahko: iskalnik po spletnem mestu, izpisovanje dokumentov, personalizirane vsebine, objava datotek, forum, ankete, e-novice, galerije slik, predvajalniki...

Page 9: Srednja šola za oblikovanje Maribor Program: Medijski ... · 4.letnik Srednja šola za oblikovanje Maribor Program: Medijski tehnik Šolsko leto: 2014/2015 Natalija Čulk, univ.dipl.med.kom

Tehnične zahteveKer se mora spletna stran hitro naložiti, morajo biti vsi elementi optimizirani in objavljeni v ustreznem formatu, spletna stran pa mora biti nameščena na hitrih, zanesljivih in varnih strežnikih. Spletno stran moramo pred njeno objavo testirati v različnih ločljivostih, pri različnih hitrostih modemskih povezav, z različnimi brskalniki ter na različnih operacijskih sistemih in napravah. Združljiva mora biti z najpogosteje uporabljenimi brskalniki (Internet Explorer, Mozilla, Safari, Opera, Chrome … ) ter funkcionalna v različnih ločljivostih ekrana. Preveriti moramo tudi pravilnosti kode ter vse povezave, ki so vključene na spletni strani.

• Določimo jih na podlagi namena, cilja, profila uporabnika in funkcionalnosti

• Odvisne so od zahtevanih funkcionalnosti

• Tehnične zahteve naj bodo v neposredni povezavi s tehničnimi in uporabniškimi znanji našega uporabnika

• Izbran ponudnik (strežnik), verzija oz. CMS sistem, zahtevani dodatki

• Katere brskalnike naj spletno mesto podpira- najmanj 2!

• Ponujena multimedijska vsebina

Page 10: Srednja šola za oblikovanje Maribor Program: Medijski ... · 4.letnik Srednja šola za oblikovanje Maribor Program: Medijski tehnik Šolsko leto: 2014/2015 Natalija Čulk, univ.dipl.med.kom

Reakcija uporabnika in čas odziva

• Odzivni čas, ki ga je uporabnik pripravljen sprejeti, se pri uporabnikih razlikuje in je odvisen od njegovih osebnih lastnosti.

Odzivni čas Verjetna reakcija uporabnika

0,1 s Uporabnik si v tem odzivnem času predstavlja reakcijo kot hipno

1 s Uporabnik je “okupiran” z dogajanjem na ekranu in ni dovzeten za

dodatne aktivnosti

10 s Skrajni čas, ki predstavlja zgornjo mejo pozornosti uporabnika. V

tem času bo uporabnik poskušal zapolniti čas z dodatnimi

aktivnostmi.

> 10 s Uporabnik obišče druga spletna mesta in izvaja druge aktivnosti.

Page 11: Srednja šola za oblikovanje Maribor Program: Medijski ... · 4.letnik Srednja šola za oblikovanje Maribor Program: Medijski tehnik Šolsko leto: 2014/2015 Natalija Čulk, univ.dipl.med.kom

• Odzivni čas spletnega mesta pomembno vpliva na pozornost uporabnika, zato moramo zagotoviti hitre reakcijske čase in se izogniti uporabi elementov, ki te čase po nepotrebnem podaljšujejo.

Page 12: Srednja šola za oblikovanje Maribor Program: Medijski ... · 4.letnik Srednja šola za oblikovanje Maribor Program: Medijski tehnik Šolsko leto: 2014/2015 Natalija Čulk, univ.dipl.med.kom

Struktura vsebine

• Pri strukturi vsebine izdelamo oz. vključimo:

• shemo zgradbe strani

SŠOM

obvestila kontakt O šoli

Zgodovina šole

Lokacija šole

Šolski prostori

Page 13: Srednja šola za oblikovanje Maribor Program: Medijski ... · 4.letnik Srednja šola za oblikovanje Maribor Program: Medijski tehnik Šolsko leto: 2014/2015 Natalija Čulk, univ.dipl.med.kom

• Blokovne sheme strukture strani (za vsako stran, če njihova zgradba na vseh straneh ni enaka)

Page 14: Srednja šola za oblikovanje Maribor Program: Medijski ... · 4.letnik Srednja šola za oblikovanje Maribor Program: Medijski tehnik Šolsko leto: 2014/2015 Natalija Čulk, univ.dipl.med.kom

• Podroben opis vseh strani - elementov in vsebine na posameznih straneh (pozicija, postavitev elementov na strani. Izgled, barve, lastnosti, funkcija elementov, vključena oz. ponujena vsebina,…)

Page 15: Srednja šola za oblikovanje Maribor Program: Medijski ... · 4.letnik Srednja šola za oblikovanje Maribor Program: Medijski tehnik Šolsko leto: 2014/2015 Natalija Čulk, univ.dipl.med.kom

Analiza konkurence

Glede na osnovno idejo spletnega mesta, cilje in namen pregledamo že obstoječa spletna mesta, ki so podobna glede na temo in namen.

Pri analizi poskušamo ugotoviti prednosti in slabosti vsaj treh (3) konkurenčnih spletnih mest ter navedemo, po čem in kako se naše spletno mesto razlikuje od konkurenčnih.

Page 16: Srednja šola za oblikovanje Maribor Program: Medijski ... · 4.letnik Srednja šola za oblikovanje Maribor Program: Medijski tehnik Šolsko leto: 2014/2015 Natalija Čulk, univ.dipl.med.kom

•Načrt spletnega mesta mora biti enak izdelani spletni strani!

Page 17: Srednja šola za oblikovanje Maribor Program: Medijski ... · 4.letnik Srednja šola za oblikovanje Maribor Program: Medijski tehnik Šolsko leto: 2014/2015 Natalija Čulk, univ.dipl.med.kom

Pri načrtovanju in oblikovanju spletnega mesta upoštevamo napotke in priporočila za izdelavo spletnih vsebin:

Page 18: Srednja šola za oblikovanje Maribor Program: Medijski ... · 4.letnik Srednja šola za oblikovanje Maribor Program: Medijski tehnik Šolsko leto: 2014/2015 Natalija Čulk, univ.dipl.med.kom

Osnovna pravila spletnega oblikovanja

• Logotip v zgornjem levem kotu označuje povezavo na vstopno stran

Uporabniki pričakujejo, da jih klik na logotip organizacije pripelje na vstopno stran. Večina spletnih mest ima logotip postavljen v zgornjem levem kotu, saj je precej časa veljalo, da pregledovanje strani na računalniškem monitorju poteka enako kot na papirju; od levega zgornjega kota diagonalno proti spodnjemu desnemu kotu. Prav tako je potrebno povezavo “DOMOV” jasno označiti.

Page 19: Srednja šola za oblikovanje Maribor Program: Medijski ... · 4.letnik Srednja šola za oblikovanje Maribor Program: Medijski tehnik Šolsko leto: 2014/2015 Natalija Čulk, univ.dipl.med.kom

• Besedilne povezave menija se prikazujejo na dnu strani• Večina spletnih mest uporablja sistem navigacije tudi na dnu strani

v obliki besedilnih povezav.

Page 20: Srednja šola za oblikovanje Maribor Program: Medijski ... · 4.letnik Srednja šola za oblikovanje Maribor Program: Medijski tehnik Šolsko leto: 2014/2015 Natalija Čulk, univ.dipl.med.kom

• Uporaba interne povezave “NA VRH” na dolgih straneh• Kljub temu, da spletne strani ne smejo biti predolge, se v določenih

primerih temu ne moremo izogniti. Uporabniku moramo omogočiti hitro in enostavno vrnitev na vrh strani.

Page 21: Srednja šola za oblikovanje Maribor Program: Medijski ... · 4.letnik Srednja šola za oblikovanje Maribor Program: Medijski tehnik Šolsko leto: 2014/2015 Natalija Čulk, univ.dipl.med.kom

• Možnost izbire tiskanja vsebine v različnih oblikah• Vsebina naj bo pripravljena ne samo za pregledovanje v spletnem

brskalniku ampak tudi za tiskanje.

Page 22: Srednja šola za oblikovanje Maribor Program: Medijski ... · 4.letnik Srednja šola za oblikovanje Maribor Program: Medijski tehnik Šolsko leto: 2014/2015 Natalija Čulk, univ.dipl.med.kom

• Besedilne povezave se oblikovno razlikujejo od ostalega besedila

• Osnovne besedilne povezave (za neobiskana spletna mesta) so modre barve in podčrtane.

Page 23: Srednja šola za oblikovanje Maribor Program: Medijski ... · 4.letnik Srednja šola za oblikovanje Maribor Program: Medijski tehnik Šolsko leto: 2014/2015 Natalija Čulk, univ.dipl.med.kom

• Sekundarni elementi navigacije npr. Iskalnik in načrt spletnega mesta nista del osnovne navigacije (nahajata se ali na dnu strani ali na posebni strani).

Page 24: Srednja šola za oblikovanje Maribor Program: Medijski ... · 4.letnik Srednja šola za oblikovanje Maribor Program: Medijski tehnik Šolsko leto: 2014/2015 Natalija Čulk, univ.dipl.med.kom

• Sledenje stranem (krušne drobtinice)• Krušne drobtinice (ang. Breadcrumbs) predstavljajo sistem sledenja

lokaciji spletnega mesta in se uporabljajo v uporabniških vmesnikih za označevanje trenutnega položaja. Postavitev: običajno horizontalno pod navigacijsko vrstico ali desno ob navigaciji, če je navigacija v levem stolpcu.

Page 25: Srednja šola za oblikovanje Maribor Program: Medijski ... · 4.letnik Srednja šola za oblikovanje Maribor Program: Medijski tehnik Šolsko leto: 2014/2015 Natalija Čulk, univ.dipl.med.kom

Ostala priporočila:

• Navigacija:

Namenjena mora biti hitremu, preglednemu in enostavnemu dostopu do informacij. Spletna stran mora vsebovati enostavno, razvidno in konsistentno navigacijo, ki bo omogočala udobno in hitro sprehajanje po vsebini spletnih strani. Le-ta mora biti pravilno podana in logično razvrščena, kajti le tako bomo lahko našli informacije, ki jih iščemo. Spletne strani morajo biti načrtovane in opremljene tako, da uporabnik v vsakem trenutku ve, na kateri strani in kje znotraj strukture spletne strani se nahaja (v kateri kategoriji, podkategoriji). Strani z obsežno vsebino morajo na vidnem mestu vključevati iskalnik, s pomočjo katerega bomo laže in veliko hitreje našli tisto, kar iščemo.

Page 26: Srednja šola za oblikovanje Maribor Program: Medijski ... · 4.letnik Srednja šola za oblikovanje Maribor Program: Medijski tehnik Šolsko leto: 2014/2015 Natalija Čulk, univ.dipl.med.kom

• Vsebina

Spletna vsebina mora biti ažurna, slovnično pravilna, razumljiva, jedrnata, pregledna, verodostojna in uporabna. Zelo velik poudarek je potrebno nameniti tudi temu, kako je vsebina napisana in kje na spletni strani je podana

Page 27: Srednja šola za oblikovanje Maribor Program: Medijski ... · 4.letnik Srednja šola za oblikovanje Maribor Program: Medijski tehnik Šolsko leto: 2014/2015 Natalija Čulk, univ.dipl.med.kom

• Oblikovna podoba

Najboljša oblikovna podoba je tista, ki je preprosta in ne vsebuje nepotrebnih odvečnih elementov. Ob obisku spletne strani zaznamo najprej obliko in šele nato vsebino, zato je zelo pomembna izbira in kombinacija barv, pisave in postavitev grafičnih elementov

Page 28: Srednja šola za oblikovanje Maribor Program: Medijski ... · 4.letnik Srednja šola za oblikovanje Maribor Program: Medijski tehnik Šolsko leto: 2014/2015 Natalija Čulk, univ.dipl.med.kom

• Uporabnost

Je lastnost spletnih strani, ki omogoča, da z zadovoljstvom uporabljamo spletno stran in da na njej najdemo informacije. Stopnja uporabnosti strani je odvisna predvsem od kvalitetne vsebine, logične in enostavne navigacije, od časa, ki ga potrebujemo, da najdemo iskane informacije, od hitrosti nalaganja strani, načina prikazovanja vsebine, učinkovite uporabe, zagotavljanja podpore itd.

Page 29: Srednja šola za oblikovanje Maribor Program: Medijski ... · 4.letnik Srednja šola za oblikovanje Maribor Program: Medijski tehnik Šolsko leto: 2014/2015 Natalija Čulk, univ.dipl.med.kom

• Marketinški vidik

Pri prepoznavnosti spletne strani si pomagamo tudi z meta oznakami, ki jih vstavimo v glavo HTML dokumenta in definirajo opis strani, ključne besede in delo robotov. Z ustreznimi posegi v HTML dokument lahko namreč vplivamo na to, ali naj iskalnik pri svojem obisku strani le-to sploh shrani v svojo podatkovno bazo, kako dolgo naj jo hrani, kakšen opis naj ima stran v primeru izpisa med rezultati iskanja ipd.

Število obiskovalcev, minute, ki jih uporabniki prebijejo na spletni strani, in njihova aktivnost na straneh so lahko realni pokazatelji tega, kako priljubljena in obiskana je določena spletna stran.