GRAFIČAR - 33 INTERAKTIVNE avtor Andrej ISKRA Univerza v Ljubljani INTERAKTIVNE VSEBINE NA INTERNETU - III. DEL (priprava interaktivne predstavitve in vnašanje vsebine) V prejšnjih dveh člankih smo pripravili osnovo, zdaj pa se lahko posveti mo izdelavi interakti vnih predstavitev. Nekatere konkretne informacije se bodo opirale na Macromedia Flash, ki je najbolj razširjen program za izdelavo interakti vnih vsebin. Poleg te pa je pomembno tudi testi ranje pred objavo, zato bom celoten postopek opisal v dveh člankih. Izdelava interakti vnih vsebin V grobem jo lahko razdelimo na nasle- dnje korake: določitev dimenzij interakti vne ↗ predstavitve razdelitev delovne površine po ↗ vsebini vnašanje vsebine (besedilo, gum- ↗ bi, grafi ke, slike, zvok, video) izdelava animacijskih učinkov in ↗ povezovanje v zaključeno celoto testi ranje pred objavo ↗ Prvi trije koraki so opisani v tem članku, zadnja dva, skupaj s ti pičnimi napakami uporabe, pa v naslednjem. Določanje dimenzij interakti vne predstavitve Pri določanju dimenzij interakti vne predstavitve se moramo osrediniti na uporabnika naših vsebin in posledično na njegovo strojno opremo. S tem imam v mislih ločljivost monitorja, na katerem bo gledal interakti vne vsebine. Glede na trenutno stanje tehnologije lahko sklepamo, da ima vsaj 95 odstotkov uporabnikov vsaj 17-inčni samostojni monitor (CRT ali LCD) ali 15-inčnega na prenosnem računalniku. Privzeta nasta- vitev ločljivosti pri teh napravah je 1024 × 768 pik. Taki monitorji so torej sposob- ni prikazovati v vodoravni liniji 1024 in v navpični liniji 768 slikovnih pik. Naprej izhajamo iz dejstva, da bomo najverje- tneje interakti vne vsebine postavili na svetovni splet, torej jih bodo uporabniki gledali s pomočjo spletnih brskalnikov (Internet Explorer, Mozilla Firefox, Ne- scape Navigator itn.). Na sliki 1 je prikaz interakti vne vsebine s spletnim brskalni- kom Internet Explorer. Kot je razvidno iz slike 1, je površina za prikaz vsebine (prikazana z rdečim okvir- jem) manjša od dimenzij prikaza moni- torja zaradi naslovne vrsti ce, vrsti ce z menijskimi ukazi, raznih gumbov na glavi programskega okna, statusne vrsti ce, opravilne vrsti ce itn. Pri primeru s slike 1 je površina za prikaz velika približno 1000 x 600 slikovnih točk. Če si torej pri določanju dimenzij inte- rakti vne predstavitve nastavimo večje vrednosti od omenjenih, bodo uporabniki (17-inčni monitorji ali 15-inčni prenosniki) pri prikazu dobili vodoravne in navpične drsnike. Pri večini spletnih portalov nav- pični drsnik niti ni napaka uporabnosti , saj je načrtovana tako, da je vsebina pri- kazana v navpični strukturi. To pomeni, da je širina fi ksna, višina pa je odvisna od obsega vsebine. Tako se za prikaz vsebine uporablja navpični drsnik. Primere pre- gledovanja vsebine z navpičnim drsnikom si lahko pogledate na najbolj znanih slo- venskih multi medijskih portalih (htt p:// ww.rtvslo.si, htt p://24ur.com ipd.). Slika 1: Prikaz interaktivne vsebine s spletnim brskalnikom. 34 - GRAFIČAR Veliko večja napaka pa je, če moramo za pregledovanje vsebine uporabljati vo- doravni drsnik. Edini sprejemljiv primer uporabe tega je prikaz panoramskih slik, katerih dimenzije širine so veliko večje kot dimenzije višine (faktor 5 ali več). Če bi torej pri njih omejili prikaz po širini, recimo 1000 slikovnih pik, bi bila višina prikazane panoramske slike samo še 200 ali manj slikovnih pik. Opisani primeri so prikazani na spletni strani Grafi čarja. Pri osebnih predstavitvah (portf elj) pa želimo celotno predstavitev brez drsni- kov in da je vsa vsebina prikazana zno- traj omenjenih dimenzij za prikaz (1000 x 600). Prav tako ne sme biti drsnikov pri spletnih igrah, pri katerih je zelo neza- želeno, da bi igralec med igranjem igre moral še premikati drsnike za prikaz vse- bine. Zato po navadi priporočam izdelo- valcem interakti vnih predstavitev nasta- vitev »zanesljivih« dimenzij interakti vne predstavitve 900 x 600. Razdelitev delovne površine po vsebini Že v prejšnjem članku smo na kratko omenili pomembnost razdelitve delovne površine po vsebini. Za jasno ponazori- tev naj še enkrat uporabim sliko razdeli- tve glavne strani, ki sem jo prikazal že v prejšnjem članku. Pri razdelitvi površine se odločimo za postavitev različnih elementov vsebine: naslov strani ↗ glavni navigacijski meni ↗ vsebina ↗ povezava na iskalnik ↗ reklame itn. ↗ Za čim lažjo in bolj logično uporabo je pomembno, da se razdelitve delovne površine čim bolj natančno držimo skozi celotno interakti vno predstavitev. Pri ne- katerih specifi čnih vsebinah (npr. galerije slik) se postavitev posameznih vsebin lah- ko delno spremeni, pomembno je le, da ostane navigacijski meni na istem mestu in v isti obliki v vsej interakti vni predsta- vitvi. Tako se uporabnik intuiti vno lahko hitro nauči uporabe navigacije za pregle- dovanje vsebine. Pri uporabi navigacije je pomembna tudi postavitev in enotnost oblikovanja gumbov »nazaj«, kadar struk- tura vsebine zahteva njihovo uporabo. Pri razdelitvi delovne površine si v pro- gramih za izdelavo interakti vnih vsebin pomagamo z vodili (guides). Vodila lahko uporabljamo tudi za pravilno postavitev posameznih elementov vsebine (gumbi, ikone slik, slike galerije, besedilni bloki itn.). Uporabo vodil za razdelitev delovne površine po vsebini in pravilno postavitev posameznih elementov prikazuje slika 3. INTERAKTIVNOST Izdelava drevesne strukture je osnova navigacije predsta- vitve. Slika 2: Razdelitev delovne površine glavne strani. Naslov strani Glavni meni Reklame Vsebina Povezava na iskalnik Vnašanje vsebine Kot je bilo že na začetku omenjeno, se bo opis vnašanja vsebine nanašal na naj- bolj razširjen program za izdelavo inte- rakti vnih vsebin Macromedia Flash. V interakti vno predstavitev lahko vna- šamo različno vsebino: besedilo ↗ gumbi ↗ grafi ke (vektorska grafi ka) ↗ slike (bitna grafi ka) ↗ zvok ↗ video ↗ Pri besedilu moramo biti pozorni na či- tljivost pisave; pri tem so mišljeni oblika, velikost, kontrast barve pisave in barve ozadja itn. Gumbe lahko izdelamo kar v programu Flash, lahko uporabimo knjižnico že izde- lanih gumbov v Flashu ali pa grafi čne po- dobe gumbov izdelamo v kakem drugem programu (na primer Photoshop) in jih uvozimo v Flash. Pri uvažanju vektorske grafi ke načelo- ma ne bi smelo biti težav, saj delo v Flas- hu temelji na vektorski grafi ki. Izkaže pa se, da jih je kar precej, predvsem zaradi veliko različnih programov za vektorsko grafi ko (Adobe Illustrator, CorelDraw, FreeHand itn.), njihovih različnih verzij in posledično veliko različnih formatov za- pisa vektorske grafi ke (.ai, .cdr ipd.). Pri uvažanju bitnih slik moramo biti po- zorni predvsem na dimenzije slik in njihove formate. Slike je pred uvažanjem smiselno pripraviti v kakem namenskem programu za opti mizacijo slik (ImageReady kot del programa Photoshop). Pri tem je treba do- ločiti dimenzije slik (navezava na določitev dimenzij interakti vne predstavitve) in dolo- čiti format slike (na primer gif za prosojne slike, sicer največkrat formata jpg in png). Dimenzije in formati slik so neposredno povezani z njihovo velikostjo v kB ali MB, kar je seveda bistveno pri uporabi interak- ti vnih izdelkov, ki so postavljeni na svetov- ni splet, saj je od tega odvisen čas prenaša- nja prek internetnih povezav. Neustrezno pripravljene slike lahko zelo otežijo, če ne celo onemogočijo uporabo interakti vnega izdelka, še zlasti če je v predstavitvi veliko GRAFIČAR - 35 slik (galerija slik). Mnogi se ne zavedajo pomena tega postopka, še posebno v po- vezavi s sodobnimi digitalnimi fotoaparati , s katerimi slikajo na maksimalni ločljivosti (10 milijonov slikovnih točk in več), in pri tem so posamezne slike lahko velike tudi pet MB in več. Če sliko toliko opti mizira- mo, da je po kakovosti prikaza še vedno skoraj enaka kot originalna, lahko pridemo do velikosti 100 kB, kar je 50-krat manj! To posledično pomeni 50-krat manj časa za prenos prek internetnih povezav. Če bi recimo za prenos interakti vne galerije prek interneta v tem primeru potrebovali deset sekund, bi bilo to za uporabnike sprejemlji- vo. Za nepripravljene slike pa bi bil čas pre- nosa 500 sekund ali več kot osem minut. V tem primeru noben uporabnik ne bo čakal tako dolgo za prikaz in je taka galerija prak- ti čno neuporabna. Zvočna podlaga (glasba v ozadju) zelo pripomore k zanimivosti in privlačnosti interakti vnih vsebin, pri čemer pa sta po- membni dve stvari: glasba se mora tematsko nanašati ↗ na vsebino izdelka (na primer sple- tni predstavitvi pogrebnega zavo- da ne bodo dali v ozadje kakšne živahne in poskočne glasbe); uporabnik mora imeti možnost ↗ ustavitve in ponovnega predva- janja glasbe. Večina interakti v- nih predstavitev omogoča poleg osnovnih gumbov predvajanja in ustavitve glasbe običajno še drsnik za nastavitev jakosti . Primer gum- bov za predvajanje in ustavitev glasbe, izbiro različne glasbe in na- stavitev jakosti je na spletnem na- slovu htt p://www.fl ashmint.com/ show-template-2170.html. Tako kot zvok tudi video popestri in informativno močno nadgradi interak- tivno predstavitev. Tako lahko določene informacije bolj nazorno kot z opisom ali slikami prikažemo z videoposnet- kom (na primer prikaz pravilnega obra- ta pri jadranju). Seveda pa moramo tudi pri vključeva- nju zvoka in videa vse te elemente prej pripraviti v namenskih programih za ob- delavo zvoka (na primer Adobe Auditi on) in videa (na primer Adobe Premiere in pripadajoči programi). Slika 3: Uporaba vodil. Povzetek V tem članku smo najprej spoznali po- membnost priprave interakti vne pred- stavitve. Sem spadata določitev dimenzij interakti vne predstavitve in razdelitev delovne površine po vsebini. Zelo po- membno je, da ti dve področji dobro izpeljemo, saj je poznejše spreminjanje zelo težavno. V drugem delu članka pa smo spoznali elemente vsebine, ki jo lah- ko vnašamo v interakti vno predstavitev, in posebnosti teh različnih vsebin. Literatura: htt p://www.fl ashmint.com/show-tem- 1. plate-2170.html, julij 2009 htt p://www.rtvslo.si, julij 2009 2. htt p://24ur.com, julij 2009 3. INTERAKTIVNOST Ko profesionalnost postane Pro PitStop Pro 09 je˝odslej hitrejši. Vsak del prijaznega uporabniškega vmesnika je dodelan, kar omogoča še enostavnejše izvajanje pogosteje uporabnih avtomatiziranih ukazov. Prenovljen del globalnih sprememb (Global Change engine) je razširjen z dodatnimi možnostmi. ↗ Defi nirate lahko različne predloge (workspaces), ki omogočajo poljubno vključitev in izključitev ter defi nicijo ↗ različnih ukazov, ki jih hočete. Izpopolnjena oblika menijev posameznih orodij omogoča hitro in učinkovito preverjanje in korekcijo dokumen- ↗ tov (dimenzij strani, tiskarskih oznak ipd.). Oprema je združljiva z novim certifi ciranim standardom PDF 2 (Certifi ed PDF 2 standard), ki omogoča prilaga- ↗ nje analiznih rezultatov v metapodatkovni obliki XMP. Izpopolnjena raven avtomatizacije vaših delovnih sistemov PitStop Server 09 omogoča avtomatsko preverjanje in korekcijo dokumentov PDF s pomočjo tako imenovanih vhodnih map. Zasnovano na industrijsko-standardizirani analizi Enfocus PDF in avtokorekcijski bazi, kar zagotavlja čim hi- ↗ trejšo in zanesljivejšo obdelavo PDF-dokumentov. Vsebuje paleto novih predvidljivih akcijskih predlog. ↗ Prikrito procesiranje v dejanskem realnem času za Mac-platforme. ↗ Enostavnejša integracija v večje sisteme s pomočjo nove ukazne konzole. ↗ www.grafi car.si