TEČAJ
ŠOLSKO LETO 2013/14
ORODJA
Dokumentacija in načrtovanje
Splošno
 Namen
Dobro razumevanje podjetja, storitev, vrednot in vizije
 Ciljna skupina
Komu je prvenstveno namenjena spletna stran
 Obiskovalci
Katere informacije so potrebne za ostale obiskovalce
Kakšno zgodbo povedati obiskovalcem?
Za ciljno skupino in obiskovalce definiramo aktivnosti,
da jih spodbudimo k sodelovanju, da si nas zapomnijo.
Dokumentacija in načrtovanje
 Identiteta spletne strani:
Logotip
Pisava
Barve
Ime domene
Slogan spletne strani
Jeziki
Dokumentacija in načrtovanje
 Grafični dizajn
 Navigacija
 Primeri predlog
Do tega trenutka še nismo začeli s programiranjem.
Svoje ideje narišemo na papir – sestavimo ogrodje
spletne strani. Angleški izraz za ogrodje je Wireframe.
Ogrodje nam pomaga pri komunikaciji z naročnikom
strani. Na ogrodju ni barv, tekstur, velikosti
posameznih delov, skratka ni podrobnosti.
Wireframe
Wireframe
Wireframe
Ko imamo ogrodje postavljeno, začnemo s
podrobnostmi.
Za izdelavo ogrodja imamo na voljo tudi nekaj orodij:
Mockingbird https://gomockingbird.com/ (plačljiv)
Cacoo
https://cacoo.com/ (tudi zastonj verzija)
Lumzy
http://www.lumzy.com/ (0.25$ za 12h)
MockFlow http://www.mockflow.com/ (tudi zastonj)
Denim http://dub.washington.edu:2007/denim/ free
Website Wireframe
http://wireframe.talltree.us/default.asp (zastonj)
Dokumentacija in načrtovanje
Šele takrat, ko je ogrodje "odobreno", nadaljujemo z
delom.
Struktura in funkcionalnost
 Struktura spletne strani
 Uvodna stran
Standardi (HTML5, CSS3)
Resolucija ekrana
Kompatibilnost z brskalniki
Velikost datotek
Noga spletne strani
Dokumentacija in načrtovanje
Ko je ogrodje zaključeno in določen slog spletne strani,
lahko začnemo z naslednjim korakom – kreiranjem
Moodboard – poskusno postavitvijo spletne strani na
papirju.
Moodboard
Moodboard
Eksperimentiramo z:
 Barvnimi paletami
 Različnimi pisavami (največ 3 na eni plošči)
 Različnimi fotografijami/ilustracijami
 Ikonografijo (če je potrebno)
 Načini navigacije
 Uporabo presledkov med odseki (white space)
 Celotnim kontrastom
Moodboard
Razpoloženjska plošča (moodboard) NE vsebuje:
 Specifičnih predlog (uvodna stran, o nas, …)
 Končne vsebine (naslovi, vsebina, izbor fotografij)
 Končne hierarhije spletne strani
Postopek
Dokumentacija in načrtovanje
HTML struktura
 Glava
 Navigacija (domov, o nas, storitve, kontakt)

Domov (vsebina podmenijev)

O nas

Storitve

Kontakt
 Vsebina
 Noga
Dokumentacija in načrtovanje
CSS datoteke
 Ime.css vsebina
Pisave
 Seznam uporabljenih pisav
Fotografije
 Seznam uporabljenih fotografij
Dokumentacija in načrtovanje
Za grafični dizajn dodamo barve Pantone iz kataloga
barv!
Nekaj dodatnih orodij
Urejevalnik za začetnike
https://www.xeo-css.com/editor/
Čiščenje HTML kode
http://www.cleanuphtml.com/cleanup.html
Pregled HTML5 zapisa in brisanje odvečnih značk,
praznih značk, nepotrebnih praznih prostorov.
Različna razvojna orodja
http://westciv.com/tools/index.html
XRAY – za ogled pozicije, meje, oblazinjenja, dimenzij
in drugih podrobnosti kateregakoli elementa.
MRI – za vsak element predlaga najboljše izbire.
Lahko ga uporabimo tudi za testiranje selektorjev.
Različna orodja za CSS3
http://westciv.com/tools/transforms/index.html
CSS3 predogled
http://www.css3.info/preview/
CSS3 Maker
http://www.css3maker.com/
CSS3 Gen
Generator kode http://css3gen.com/
Senčenje
http://www.themeshock.com/css-drop-shadow/
Podpora HTML5 in CSS3
http://fmbip.com/litmus/
CSS3 menu
http://css3menu.com/
CSS3 Click chart
http://css3clickchart.com/#box-sizing
CSS3 imena barv
http://www.colors.commutercreative.com/grid/
Css3 imena barv
http://www.cssportal.com/css3-color-names/
barva
ime
Hex
RGB
Zaobljeni robovi
http://csscorners.com/
Zaobljeni robovi
http://http://border-radius.com/border-radius.com/
Gumbi
http://dryicons.com/demos/css3-linear-gradientbuttons-enerator/?iframe=true&width=960&height
=600
Sprite box
http://www.spritebox.net/
Sprites
Sprite je ime za datoteko, v katero shranimo vse ikone,
ki so potrebne za spletno stran.
Na voljo je kar nekaj generatorjev, ki iz ustrezno
majhnih slik (velikosti do 5k), sestavijo sprite
datoteko skupaj s slogom, ki ga vključimo v svojo css
datoteko.
Gradient
http://www.colorzilla.com/gradient-editor/
Meniji
http://css3menu.com/
Obrobe iz slik
http://border-image.com/
Ozadja
http://mudcu.be/bg/
CSS3 trikotniki
http://apps.eky.hk/css-triangle-generator/
Igrišče Mike-ova plošča
http://css3.mikeplate.com/
Modernizr
http://modernizr.com/
Uporabno orodje, ki pregleda spletno stran in jo
optimizira z JavaScriptom. Napredna uporaba!
3D besedilo
http://www.3dcsstext.com/
http://www.3dcsstext.com/
HTML5 Boilertemplate
http://html5boilerplate.com/
Pripomoček, ki pomaga zgraditi prilagodljive in hitre
spletne strani in vsebuje celotno dokumentacijo.
Moč HTML5 in CSS3
http://perishablepress.com/power-of-html5-css3/
Članek z nekaj primeri napredne uporabe HTML5.
HTML5 primeri
Demonstracije in primeri http://html5demos.com/