12

9 8

2

610

1

7 85

10

3Wise Timetable Web dizajn

uporabniški priročnik

WISE TIMETABLE4

Wise Timetable Web dizajnwww.wisetimetable.com

Wise Technologies d.o.o.Cesta 24. junija 23SI-1231 Ljubljana-Črnuče, Slovenijawww.wise-t.com

support@wise-t.comDatum objave: 13.06.2011

2

Wise Timetable Wise Timetable Web dizajn

Copyright © Wise Technologies d.o.o.

Kazalo:

Opis datotek.................................................................. 3Načini spreminjanja............................................................. 3Primer spreminjanja dizajna..................................................... 3

3

Wise Timetable Wise Timetable Web dizajn

Copyright © Wise Technologies d.o.o.

Opis datotekDizajn Wise Timetable Web aplikacije je ločen od programske logike. To omogoča lažjo oblikovno prilagoditev web aplikacije že obstoječemu portalu.

Datoteke s privzetim dizajnom se nahajajo v podmapi »design«. Vsebina teh datotek določa izgled celotne web aplikacije. Programskih skript ni potrebno spreminjati.

Vse dizajn datoteke za določeno skripto imajo ime, ki se začne z imenom skripte. Datoteke, ki se začnejo z »general«, so tiste, ki jih skripta naloži, kadar ne najde lastnega dizajna (več o tem kasneje). Dizajn datoteke so tipa .htm in tudi njihova vsebina je navadna HTML koda, ki bo domača vsakemu oblikovalcu. Edina razlika so gesla, ki se nahajajo v dvojnih zavitih oklepajih:{{ ... }}. Ta gesla skripta poišče in na tisto mesto vstavi vsebino, ki je lahko rezultat programa ali pa vsebina druge dizajnerske datoteke. To pa zato, ker se določen dizajn na nekaterih mestih ponavlja (na primer vrstica v tabeli).

Načini spreminjanjaSpreminjanja dizajna se lahko lotite na dva načina. Lahko le spreminjate nastavitve v .css datotekah in v datoteki design.ini. V teh dveh datotekah je definiranih ogromno parametrov, s katerimi lahko že precej spremenite izgled (barve, postavitve, pisave, ...) strani.

Naslednja stopnja pa je spreminjanje samih dizajnerskih datotek in njihove HTML kode. Na tak način lahko izgled strani korenito spremenite, pri tem pa niste omejeni bolj, kot bi bili, če za dizajn sploh ne bi bilo skript, ki z njimi operirajo. Vse je pod vašim nadzorom. V skrajnem primeru lahko vse skupaj oblikujete od začetka do konca sami, če se le držite nekaj osnovnih pravil.

Primer spreminjanja dizajnaČe želite naprimer spremeniti izgled skripte classrooms, odprite datoteko classrooms.htm. Kot lahko vidite, je celotna oblika strani opisana tukaj. V zgornjem delu datoteke je opisana tabela s kontrolami, preko katerih bo uporabnik vstavljal podatke, spodaj pa je orisana tabela, v kateri bo pregledoval rezultate. To je privzeti dizajn, zdaj lahko določite svojega. Če vnosnih polj ne želite imeti v tabeli, preprosto izbrišite vrstice, kjer je tabela določena.

Edino, na kar morate paziti, je, da v dizajnu pustite mesta, kjer bo skripta odložila svoje podatke. Na mestu kjer se nahaja geslo {{str_setclassroom}} bo skripta zapisala tekst »Predavalnica:« ali »Classroom:«, odvisno od tega, kateri jezik je bil nastavljen v config skripti. Geslo je v datoteki ravno zato, da je lahko isti dizajn uporaben za vse podprte jezike. Kasneje lahko preko konfiguracijske skripte preprosto določite drug jezik, pa vam ne bo potrebno delati popravkov na dizajnu. Vsa gesla, ki bodo zamenjana s tekstom v tem ali onem jeziku, se začnejo s »str«.

Naslednji tip gesel, s katerim se boste srečali pri spreminjanju classroom skripte je {{present_roomsoptions}}. Med zagonom, ko bi skripta prišla do tega mesta, bi avtomatično poskušala

4

Wise Timetable Wise Timetable Web dizajn

Copyright © Wise Technologies d.o.o.

najdi dizajnersko datoteko classrooms_option.htm. Ker v privzetem dizajnu, ki ste ga dobili v paketu, ta datoteka ne obstaja, bo skripta poskušala z naslednjo možnosto. V privzetem načinu je to datoteka »general_option.htm«. Splošna dizajnerska datoteka »option« je namenjena poenotenju dizajna, poleg tega pa tudi omogoča manjšo možnost za napake (ko je ena možnost pravilno izrisana, bodo vse). »general_option.htm« se uporabi vedno, ko je potrebno izrisati iterativni del kontrole, preko katere si bo uporabnik izbral eno izmed možnosti. Privzete splošne dizajnerske datoteke so določene v datoteki design.ini in jih lahko spremenite, če želite.

Vsa gesla ne kažejo nujno na neko drugo dizajnersko datoteko. Vsebine polja {{present_fillcellsscripts}} na primer ne morete spreminjati, ker tisto polje skripta rabi zase.

Če naredite varnostno kopijo dizajna, ki ste ga dobili v paketu, se lahko svobodno igrate z dizajnom. Nič ne morete pokvariti tako, da problema ne bi rešilo kopiranje varnostne kopije dizajna nazaj na svoje mesto. Prepričani smo, da boste kmalu dobili občutek za funkcionalnost dizajna in svobodo, ki jo sistem ponuja.