Sanda Rudež PRIMERJAVA IN ANALIZA JAVASCRIPT SPLETNIH GALERIJ Diplomsko delo Maribor, september 2012
PRIMERJAVA IN ANALIZA JAVASCRIPT SPLETNIH GALERIJ Diplomsko delo Študentka: Študijski program: Smer: Mentor: Sanda Rudež UN ŠP Medijske komunikacije Vizualna komunikacija doc. dr. Marko Hölbl, univ. dipl. inž. rač. in inf. i
ii
ZAHVALA Iskreno se zahvaljujem mentorju doc. dr. Marku Hölblu za vodenje in strokovno pomoč. Hvala staršem in bližnjim prijateljem za spodbudo. iii
Primerjava in analiza JavaScript spletnih galerij Ključne besede: Spletna galerija, JavaScript, internet, splet 2.0, dinamične spletne strani, primerjava. UDK: 004.5:004.738.5(043.2) Povzetek Namen diplomske naloge je raziskati in primerjati brezplačne JavaScript spletne galerije. Slednje morajo biti manj izkušenemu razvijalcu prijazne in preproste za uporabo pri vključevanju v spletno stran ter morajo omogočati širok nabor funkcionalnosti. Uporabljene so bile metode študije virov in literature, načrtovanje in snovanje primerov uporabe, iskanje in ovrednotenje JavaScript galerij, primerjalna analiza in vrednotenje ugotovitev. Poglaviten rezultat diplomskega dela je ugotovitev, da so si bolj razširjene galerije kakovostno in po načinu uporabe zelo podobne ter se večinoma razlikujejo le v načinu prikaza. Zaradi velikega števila galerij je potrebno raziskati že obstoječe ter najbolj ustrezno prilagoditi svojim potrebam. iv
Analysis of JavaScript Web Galleries Key words: Web Galleries, JavaScript, Internet, Web 2.0, Dynamic Website, comparison. UDK: 004.5:004.738.5(043.2) Abstract The aim of this diploma work is to explore and compare web galleries. The latter should be simple and easy enough for a less skilled website administrator. It should also feature a wide range of functionality. The methods used in this diploma work are literature review, the design and use of practical examples, searching and evaluating galleries, comparative analysis and evaluating the findings. These methods lead to one conclusion - the most popular galleries are almost equal in quality and usage, yet they differ mostly in their display methods. Due to the large number of galleries one has to research the existing and modify the most suitable to his own needs. v
KAZALO 1 UVOD... 1 2 TEHNOLOGIJE... 2 2.1 Skriptni jezik JavaScript... 3 2.2 JavaScript knjižnice... 6 2.3 jquery... 7 2.4 MooTools... 8 2.5 Primerjava knjižnic jquery in MooTools... 8 3 SPLETNE GALERIJE... 10 3.1 Predstavitev galerij... 11 3.1.1 Minishowcase... 11 3.1.2 Lightbox 2... 13 3.1.3 Galleria... 16 3.1.4 Galleriffic... 20 3.1.5 SmoothGallery... 24 3.2 Primerjalna tabela spletnih galerij... 27 4 SKLEP... 30 VIRI... 31 PRILOGA A... 33 vi
KAZALO SLIK SLIKA 2.1: DELOVANJE MVC APLIKACIJE.... 5 SLIKA 2.2: DOKUMENTNO OBJEKTNI MODEL.... 6 SLIKA 3.1: SPLETNA GALERIJA PRIKAZUJE IZDELKE.... 10 SLIKA 3.2: PODOBA GALERIJE MINISHOWCASE.... 12 SLIKA 3.3: POSEBNOST PRIKAZOVANJA FOTOGRAFIJ Z GALERIJO LIGHTBOX 2... 14 SLIKA 3.4: VPISOVANJE POSAMEZNIH FOTOGRAFIJ.... 15 SLIKA 3.5: PRIMER GALERIJE NA MOBILNEM SAFARIJU.... 17 SLIKA 3.6: PRIMER MANJŠIH SPREMEMB TEME CLASSIC.... 20 SLIKA 3.7: PRIMER SPREMENJENEGA OSNOVNEGA IZGLEDA GALERIJE GALLERIFFIC.... 23 SLIKA 3.8: PRIMER APLICIRANE GALERIJE ŽE OBLIKOVANI STRANI.... 26 KAZALO TABEL TABELA 2.1: KDAJ JE BOLJE UPORABITI FLASH IN KDAJ JAVASCRIPT.... 3 TABELA 2.2: PRIMERJAVA KNJIŽNIC JQUERY IN MOOTOOLS.... 9 TABELA 3.1: PRIMERJAVA SPLETNIH GALERIJ.... 27 vii
Seznam uporabljenih kratic in simbolov RIA Rich Internet Applications obogatene spletne aplikacije MVC - Model View Controller model pogled krmilnik HTML - HyperText Markup Language hipertekstovni označevalni jezik PHP - Hypertext Preprocessor programski jezik za razvoj dinamičnih spletnih strani XML - Extensible Markup Language razširljiv označevalni jezik CSS - Cascading Style Sheet stilne predloge za izgled spletne strani DOM Document Object Model dokumentno objektni model W3C World Wide Web Consortium konzorcij svetovnega spleta AJAX - Asynchronous JavaScript and XML asinhroni JavaScript in XML CMS Content Managment System sistem za upravljanje vsebin IE Internet Explorer raziskovalec viii
1 UVOD Na spletu smo soočeni z ogromno količino podatkov in velik del le-teh so slike. Slednje predstavimo z uporabo spletnih galerij, ki nam večjo količino slik pretvorijo v logično zložena in lepo predstavljena zaporedja ali skupke. Trenutno na spletu obstaja mnogo spletnih galerij tako plačljivih kot brezplačnih. Razlikujejo se po kakovosti, funkcionalnostih, predvsem pa enostavnosti uporabe. Spletne galerije razvijajo učeni spletni razvijalci, ki jih namenijo manj izkušenim skrbnikom spletnih strani (to so tudi spletni oblikovalci ali amaterski navdušenci). Slednji imajo vpogled v administrativno okolje spletne galerije, kjer jo lahko preoblikujejo in prilagodijo svoji strani, brez da bi poznali podrobno notranje delovanje galerije. Le del takšne galerije je na koncu viden končnim uporabnikom obiskovalcem spletnih strani. V diplomski nalogi bomo obravnavali in ovrednotili brezplačne JavaScript galerije z vidika manj izkušenega skrbnika ter na splošno predstavili orodja za izdelavo tovrstnih galerij. Na spletu je namreč objavljenih mnogo nepreverjenih galerij, ki niso dobro programirane, redno posodabljane ali enostavne za namestitev. Največja ovira diplomskega dela je veliko število spletnih galerij. Vseh ne bomo mogli preizkusiti in oceniti, zato se bomo osredotočili na pet galerij, ki smo jih izbrali po predhodni študiji. Ta je zajemala preučevanje spletnih mest z že predstavljenimi galerijami ter ponavljanje istih galerij na lestvicah spletnih mest za ocenjevanje priljubljenosti le-teh. Ključen kriterij izbire so bile visoke ocene na lestvicah večjih spletnih mest za ocenjevanje galerij (Smashing magazine, Queness, Net.tuts). V drugem poglavju bomo predstavili tehnologije, ki omogočajo razvoj spletnih galerij. Ker bomo analizirali le JavaScript galerije, se bomo poglobili v ta skriptni jezik ter v njegove knjižnice jquery in MooTools. Poleg splošnega opisa bomo navedli razlog uporabe skriptnega jezika JavaScript, orodjarn MooTools in jquery ter katere so njihove prednosti glede na druga orodja. V tretjem poglavju bomo predstavili zakaj so spletne galerije trenutno popularne in pogosto v uporabi. Osredotočili se bomo na pet spletnih galerij, jih podrobno opisali, analizirali,ovrednotili in med seboj primerjali. Zadnje poglavje predstavlja sklep diplomske naloge, kjer bomo izpostavili poglaviten rezultat naloge ter težave in opažanja. 1
2 TEHNOLOGIJE V tem poglavju bomo obravnavali tehnologije, ki jih spletne galerije koristijo za delovanje. Pri tem sta najbolj konkurenčna jezika Flash in JavaScript, zato ju bomo na kratko predstavili. Nadaljevali bomo s podrobnejšim opisom jezika JavaScript ter njegovih knjižnic jquery in MooTools. Opisi omenjenih tehnologij so potrebni za kasnejše boljše razumevanje vsebine diplomskega dela Za dodajanje interaktivnih vsebin, kot so galerije in animacije, lahko uporabimo Adobe Flash, Javascript in HTML5. Slednji je najmlajši in trenutno še ni popolnoma podprt v nobenem brskalniku. Ko bo ta standard stopil v veljavo, ne bo potreboval jezika JavaScript ali Flash, saj bo že sam podpiral njune prednosti [10]. Flash podpira tako vektorsko kot rastrsko grafiko in omogoča številne animacije besedila, risb ter slik. Pogosto se uporablja za ustvarjanje spletnih strani, galerij, videopredvajalnikov in RIA (obogatenih spletnih aplikacij). Flash je tehnologija, ki se razvija z uporabo plačljive programske opreme Adobe. Uporabniki morajo imeti nameščeno novejšo različico Flash tehnologije, ki brez pravilnega vtičnika ni podprta v brskalnikih. Prav tako ga ne podpirajo Applove mobilne naprave kot sta Ipad in Iphone [6]. Alternativa tehnologiji Flash je jezik JavaScript in njegove knjižnice. Zanj je na voljo veliko brezplačne programske opreme. Omogoča dodajanje interaktivnosti spletnim stranem in (X)HTML oznakam. Podpira ga večina sodobnih brskalnikov kot so Safari, Google Chrome, Mozilla Firefox in Internet Explorer. Animacijske tehnike jezika so omejene in če so kompleksne, se izvajajo počasneje. Izvorna koda JavaScripta je zaradi vidnosti v brskalniku slabše zaščitena kot pri tehnologiji Flash [6]. Obe omenjeni tehnologiji sta zmogljivi, vendar se v določenih ozirih razlikujeta. Spletni razvijalci in oblikovalci se med njima odločajo glede na to kaj želijo doseči. V tabeli 2.1 bomo pogledali kdaj je katera tehnologija bolj uporabna. 2
Tabela 2.1: Kdaj je bolje uporabiti Flash in kdaj JavaScript [6]. Tehnologija Flash JavaScript Spletna galerija Validacija»Drop-down«meni Zavihki Pojavna okna Video/avdio predvajalnik Napredne animacije 3D Multimedija 2.1 Skriptni jezik JavaScript Razvil ga je Brendan Eich v podjetju Netscape. Prvotno je bil poznan kot Mocha in LiveScript. Leta 1995 je bil prvič integriran v brskalniku Netscape Navigator [20]. JavaScript ne smemo zamenjevati s programskim jezikom Java, ki ga je razvilo podjetje Sun Microsystems, saj je bil razvit neodvisno od jezika Java. Jezika JavaScript in Java imata skupno samo ime, vse ostalo se razlikuje. Prvi jezik je namenjen uporabi v spletnih brskalnikih in je manj obsežen kot drugi jezik, ki je teoretično lahko v poljubnem okolju [14]. Imenska podobnost JavaScripta in Jave je zaradi tržnega dogovora med podjetjema Netscape in Sun Microsystems, saj je javnost zaradi Javine priljubljenosti lažje sprejela nov in še nepoznan jezik JavaScript. Leta 1996 je izšla Microsoftova različica, ki se je imenovala JScript in je bila prilagojena Internet Explorerju 3. Žal se oba jezika razlikujeta v precej ključnih ozirih in tako nista popolnoma kompatibilna. Trenutno je licenčno ime»javascript«v lasti Oracle Corporation, ki ima lastništvo tudi nad jezikom Java. Zaradi 3
široke uporabljanosti jezika JavaScript je novo brezplačno ime zanj ECMAScript. Ime je dobil po neprofitni hiši, ki je jezik standardizirala. Za razliko od drugih programskih jezikov, kot so PHP, Perl in Ruby, se JavaScript izvaja na strani odjemalca in ne na spletnem strežniku. Zaradi procesiranja na odjemalcu predstavlja JavaScript odlično orodje za ustvarjanje dinamičnih spletnih strani, saj lahko spreminja posamezne HTML elemente [20]. Dinamične spletne strani so strani ustvarjene v realnem času. Poganjajo jih programski jeziki, kot sta PHP in ASP. Ko dostopamo do takšne spletne strani, pošljemo zahtevo spletnemu strežniku in ta odgovori v obliki HTML dokumenta, ki ga pošlje spletnemu brskalniku. Ta dokument lahko vsebuje dodatne dinamične dele, ki so napisani v jeziku JavaScript. Večina večjih spletnih strani je dinamična, saj so lažje za vzdrževanje kot statične. Statična stran vsebuje edinstveno vsebino, kar pomeni ročno urejevanje in objavljanje kakršnihkoli sprememb. Dinamične spletne strani črpajo vsebino iz podatkovne baze in se skozi spletno stran posodablja večinoma samo zapis v podatkovni bazi (primer takšne spletne osnove je CMS sistem Joomla ali Wordpress). To je še posebej koristno pri velikih spletnih mestih, ki vsebujejo več sto strani. Zaradi tega so primerne za slikovne galerije, spletne koledarje in trgovine [4]. JavaScript sodi v skupino povezovalnih (skriptnih) jezikov. Ti služijo kot vmesni člen programskim jezikom, kot sta Java in C++. Programski jeziki so namenjeni pisanju popolnoma samostojnih aplikacij in jih je potrebno predhodno v celoti prevesti v binarno obliko. Skriptne jezike se prevaja sproti, vrstico za vrstico in je zaradi tega izvajanje počasnejše. Slednje se prevaja ob vsakem zagonu kode, zato so postali priljubljeni pri ustvarjanju dinamičnih spletnih strani [24]. JavaScript je bil zasnovan za dodajanje interaktivnosti HTML stranem in se najpogosteje uporablja za interakcijo z uporabniki, za preverjanje pravilnosti vnosov in posredovanje leteh na strežnik. Primer tega je kontaktni obrazec, kjer je potrebno preveriti, če je pravilno vpisan e-poštni naslov in šele nato se poizvedba pošlje na strežnik. Lahko ga uporabljamo tudi za različne trike kot so preklapljanje slik, animacije ali drugače gibljive spletne strani [27]. V povezavi z drugimi naprednimi tehnologijami ga lahko uporabljamo kot del CMS sistemov v obliki MVC aplikacij (slika 2.1), kjer imamo del, ki pridobi informacije (Model), 4
del, ki poda obliko (View) in del, ki potek nadzoruje (Controller). Tako uporabniški vmesnik ločuje vsebinski del od uporabniške interakcije z njim [12]. Zunaj spleta se uporablja v različnih orodjih: Adobe Acrobat in Adobe Reader ga podpirata v datotekah PDF. Podpirajo ga tudi najbolj razširjeni operacijski sistemi Microsoft Windows, Mac OS X in Linux. Slika 2.1: Delovanje MVC aplikacije [17]. Kljub navedenim prednostim in funkcijam je glavni razlog za izbiro jezika JavaScript njegova pogosta uporaba in razpoložljivost. Nahaja se namreč v vseh sodobnih brskalnikih in vsak razvijalec lahko domneva, da imajo uporabniki nameščeno eno izmed različic JavaScripta. Pri tem je potrebno paziti, da je možno delovanje JavaScripta tudi onemogočiti. Vsak, ki se odloči za programiranje z jezikom JavaScript, potrebuje le sodobnejši brskalnik in tekstovni urejevalnik [27]. Najpomembnejša lastnost JavaScripta je njegova sposobnost za dostopanje do HTMLjevega dokumentno objektnega modela - DOM (Document Object Model), v katerem se lahko vsak element na spletni strani obravnava samostojno in kot tak tudi spreminja ali premika [20]. Zato JavaScript potrebuje pravico do dostopa, oblikovanja in spreminjanja vsakega dela dokumenta. V ta namen je W3C ustvaril DOM, ki mu omogoča dostop do dokumentov XML in (X)HTML. Model omogoča spreminjanje strukture, CSS stilov in oblike [28]. Kadar uporabnik prenese HTML dokument s spleta, mora brskalnik pretvoriti niz znakov iz dokumenta v vidno spletno stran. To naredi tako, da prebere znake in iz njih ugotovi, kje so odstavki, naslovi, besedilo in podobno. Za hiter dostop do določenih delov dokumenta brskalnik shranjuje svojo razlago HTML kode kot strukturo JavaScript objektov - DOM. V 5
okviru tega modela vsak element (naslov, odstavek, tekst, slika) v dokumentu HTML postane objekt. JavaScript lahko dostopa do vsakega objekta neodvisno in ga spreminja s pomočjo vgrajene funkcije ter hitro najde kar želimo spremeniti. (X)HTML je napisan hierarhično z začetnimi in končnimi oznakami elementov. DOM vsakemu elementu, ki ga spremeni v objekt, doda dvosmerno korelacijo le-tega z ostalimi objekti v zapisu. En element je lahko drugemu nadrejen in nič ali večkrat podrejen. Iz te logike nastane nova hierarhična struktura, tokrat v obliki drevesa (slika 2.2). Slika 2.2: Dokumentno objektni model [9]. 2.2 JavaScript knjižnice Kot smo že prej navedli, se JavaScript izvaja na odjemalcu in v različnih spletnih brskalnikih. Ti bi morali upoštevati standarde prikaza in tega se v večji ali manjši meri tudi držijo. Zaradi manjših odstopanj prikazovanja strani med njimi, je potrebno le-te pri pisanju kode upoštevati. Iz tega razloga se razvijalci pogosto zatečejo k uporabi knjižnic, ki razlike v prikazovanju usklajujejo. To počno z ustvarjanjem novih poenotenih programskih vmesnikov za opravljanje splošnih nalog, kot sta manipulacija DOM in tehnologija Ajax [27]. JavaScript knjižnice omogočajo spletnim razvijalcem in oblikovalcem razširitev interaktivnosti in uporabnosti spletne strani s pomočjo okvirja pogosto uporabljenih JavaScript funkcij, ki so zgrajene iz temeljnih gradnikov. Spletne knjižnice lahko 6
primerjamo z okvirji ali načrti z vrsto pravil in smernic, ki pripomorejo k zgradbi spletne strani. Delujejo tako, da spletni razvijalec razširi dokumentno objektni model z dodajanjem spletne knjižnice (library.js) spletni strani ter nato uporabi posebne funkcije, ki jih določena knjižnica omogoča. Največja prednost uporabe JavaScript knjižnic je zmožnost izbire različnih funkcionalnosti z namenom razširitve statične vsebine spletne strani. Uporaba JavaScript knjižnic spletnim oblikovalcem omogoča uporabo efektov, animacij, tehnologije Ajax in interaktivnih gradnikov, ki omogočijo hitrejši in učinkovitejši razvoj spletne strani. Spletni oblikovalci in razvijalci niso omejeni z že obstoječimi knjižnicami, saj lahko napišejo svoje. Z uporabo knjižnic je spreminjanje dokumentno objektnega modela precej lažje kot spreminjanje z omejenimi programskimi vmesniki [22]. Na voljo je veliko JavaScript spletnih knjižnic. Izmed teh je najbolj popularnih pet brezplačnih knjižnic, ki so se povzdignile nad ostale zaradi enostavnosti uporabe in velikega števila uporabnikov. Med njih sodijo: Dojo, Prototype, MooTools, YUI in jquery. V nadaljevanju se bomo osredotočili na knjižnici jquery in MooTools. 2.3 jquery Definicija knjižnice na domači strani jquery [13] se glasi:»jquery je hitra in kompaktna JavaScript knjižnica, ki poenostavi pregledovanje HTML dokumentov, upravljanje dogodkov, animacije in Ajax interakcije za hitro spletno razvijanje. jquery je oblikovan, da spremeni način kako pišete JavaScript.«Bistvo knjižnice je, da z manj kode naredimo več, kar je zapisano tudi v sloganu "Write Less, Do More". Leta 2006 je uveljavljen programer John Resig razvil knjižnico jquery, ki poenostavi pisanje jezika JavaScript. S pomočjo knjižnice jquery se še vedno lahko izvajajo zapletene funkcije na spletni strani, ki jih drugače omogoča JavaScript. Za uporabo jquery knjižnice ni potrebno profesionalno znanje programiranja, le osnove JavaScripta, jezika HTML in CSS [22]. 7
2.4 MooTools Kot navajajo na domači spletni strani, je MooTools kompaktno, modularno in objektno orientirano JavaScript ogrodje, zasnovano za začetnike in napredne razvijalce. Omogoča pisanje striktne, fleksibilne in brskalnikom prilagojene programske kode [18]. MooTools poskuša izvajati kodo na način, kot jo izvaja JavaScript in ga tako na edinstven način dopolnjuje. Od razvijalcev, ki se lotijo programiranja z MooTools se pričakuje, da poznajo vsaj osnovne lastnosti programiranja JavaScripta, saj brez njih te knjižnice ni možno uporabljati. Za razliko od drugih knjižnic, MooTools ne preoblikuje JavaScript z novimi pravili in sintakso. Drži se njegovih standardnih konvencij, sintakse in opredeljenih pravil ter jih samo obogati z novimi značilnostmi [21]. 2.5 Primerjava knjižnic jquery in MooTools Če primerjamo knjižnici MooTools in jquery je cilj prve vzpostavitev programskega vmesnika, ki omogoča vse funkcionalnosti jezika JavaScript vključno z DOM. jquery je enostavnejša knjižnica, ki je osredotočena na poenostavljanje DOMa. Prav tako se knjižnico jquery lažje in hitreje naučimo, saj se nam ni potrebno poglobiti v sam jezik JavaScript. Temu prispeva tudi dejstvo, da je knjižnica jquery bolj razširjena, na voljo je več knjižne literature, spletnega gradiva in podpira jo večje število uporabnikov [19]. Podatki o navedenih knjižnicah se nahajajo v tabeli 2.2. 8
Tabela 2.2: Primerjava knjižnic jquery in MooTools [19]. jquery MooTools Najnovejša različica [13] [18] 1.8.0 1.4.5 Velikost knjižnice [13] [18] 32 KB 94 KB Značilnosti Licenca MIT 1 & GPL 2 MIT DOM podpora Da Da Animacija Da Da Upravljanje z dogodki Da Da Podpora CSS3 Da Da Podpora tehnologiji Ajax Da Da Vtičniki Stotine neuradnih vtičnikov Približno 50 uradnih vtičnikov 1 MIT licenca dovoljuje uporabo programske opreme, a se mora ohraniti licenčni zapis 2 GPL licenca dovoljuje uporabo, dodajanje in spreminjanje programske opreme 9
3 SPLETNE GALERIJE Splet je močan vir informacij. Ljudje brskajo po spletu, da bi pridobili informacije o izdelkih, krajih, storitvah, novicah, zato je najpomembnejši del spletne strani njena vsebina [26]. Vendar smo ljudje bolj kot za tekst dovzetnejši za slike. Spletna stran brez slik je dolgočasna in suhoparna. Takšne strani obiskovalcem niso zanimive, zato se na njih ne zadržujejo dolgo [15]. Z uporabo slik pridobimo pozornost obiskovalcev in dopolnimo vsebino strani. Če so slike kakovostne in zanimive, obiskovalci ostanejo in preberejo še besedilo. Slike dopolnijo novice, prikažejo ljudi in kraje, pojasnijo postopke, gradijo prepoznavnost blagovne znamke, spodbujajo prodajo izdelkov ter vzpostavijo atmosfero. Iz navedenih razlogov se veliko spletnih oblikovalcev odloči za predstavitev slik s spletnimi galerijami. Na voljo je ogromno spletnih galerij, zgrajenih s prej predstavljenimi tehnologijami. Slednji jih izbirajo glede na ceno, kakovost, videz in enostavnost uporabe. Spletna galerija je zbirka slik ali fotografij, ki se naloži na spletno stran z namenom, da si jo ogledajo obiskovalci spletne strani. Uporabljajo se za lepši videz spletnega mesta, predstavitev podjetij, izdelkov (slika 3.1), storitev in oglasnih sporočil. Slika 3.1: Spletna galerija prikazuje izdelke [11]. 10
V nadaljevanju se bomo osredotočili na spletne galerije zgrajene z jezikom JavaScript in njegovima knjižnicama jquery in MooTools. Te vrste galerij potrebujejo za delovanje HTML dokument, PHP za generiranje HTML dokumentov, JavaScript datoteko, v kateri se nahaja koda za spletno galerijo in spletni strežnik, na katerega lahko naložimo oba dokumenta in slike. Navodila za namestitev se pri večini galerij nahajajo na njihovi domači spletni strani. Večinoma so dovolj natančna in preprosta, da jim lahko sledi tudi manj izkušen razvijalec ali spletni oblikovalec. Galerije bomo preizkušali s pomočjo brezplačnega, a zelo razširjenega CMS sistema Wordpress. Kot smo že omenili, spletnih galerij zgrajenih z jezikom JavaScript je veliko. Zaradi omejene dolžine diplomske naloge smo se omejili na pet galerij. Te smo izbrali, ker so se pojavljale na večjih spletnih mestih za ocenjevanje (Smashing magazine, Queness, Net.tuts). Na teh mestih so bile visoko uvrščene in pozitivno komentirane. Primerjali in analizirali bomo: Minishowcase, Lightbox2, Galleria, Galleriffic in SmoothGallery. V prvem delu bomo galerije predstavili, izpostavili njihove ključne značilnosti, opisali postopke namestitve in preoblikovanja. Galerije smo oblikovno prilagodili testni spletni strani. V drugem delu jih bomo primerjali in ocenili po kriterijih, ki jih je določil spletni razvijalec Will Fastie [5]. 3.1 Predstavitev galerij 3.1.1 Minishowcase Minishowcase je majhna in preprosta spletna fotogalerija. Zasnovana je s pomočjo JavaScripta in Ajax tehnologije. Galerija omogoča preprosto objavljanje fotografij na spletu, brez kompleksnih podatkovnih baz in kodiranja ter hitro namestitev [16]. Zahteve: Strežnik mora imeti nameščeno novejšo verzijo PHP jezika (od verzije 4.2.0 dalje) GD/GD2 3 razširitev FTP račun in odjemalec Uporabniški brskalnik mora imeti omogočen JavaScript 3 GD/GD2 sta dva dodatka za PHP, ki sta vanj že vgrajena in ju je treba samo omogočit. Uporabna sta za manipulacijo slik in hitro ustvarjanje predoglednih sličic. 11
Značilnosti: Galerijo lahko hitro in enostavno namestimo po navodilih, ki se nahajajo na domači strani. Oblikovalcu se ni potrebno ukvarjati z jezikoma PHP in JavaScript. Galerija ima že določeno obliko in zato ne privzame oblikovnih značilnosti strani na katero se jo namesti (slika 3.2). Če se jo želi namestiti na spletno mesto narejeno na osnovi CMS sistema, kot je v tem primeru Wordpress, potem jo le-ta smatra kot zunanjo spletno stran, ki se je ne more spreminjati skozi CMS sistem. Za popolno vključenost v spletno mesto, jo je potrebno dodatno prilagoditi. CSS datoteko galerije je potrebno oklestiti samo na ključne elemente. Datoteko index.html galerije je tudi potrebno oklestiti in po delih vstaviti v CMS sistem (kot se to naredi pri ostalih primerjanih galerijah). Slika 3.2: Podoba galerije Minishowcase. Podpira navigacijo z navigacijskimi gumbi in pred-oglednimi sličicami. Slednje zaradi napisane kode samodejno generira. Podobno počne tudi s fotografijami, ki jih naložimo v mapo /galleries/ ter jih zatem samodejno prikazuje. Na spletni strani lahko za prikaz izberemo tudi možnost samodejnega predvajanja. Minishowcase ponuja poljubno jezikovno podporo. Znotraj mape /languages/ lahko izberemo enega izmed širokega nabora jezikov, lahko pa galerijo prevedemo v svoj jezik. Galerija je kompatibilna z večino sodobnih brskalnikov: Chrome, Mozzila Firefox, Safari, Opera ter novejše različice Internet Explorerja. Ni kompatibilna z Internet Explorerjem 5.x Mac. 12
Namestitev: Po preverjanju vseh potrebnih zahtev lahko začnemo z namestitvijo Minishowcase galerije. Paket, ki smo ga prenesli z domače spletne strani, naložimo na strežnik s pomočjo FTP povezave. Znotraj mape minishowcase poiščemo datoteko settings.php (/config/settings.php), v tekstovnem urejevalniku (npr. Notepad,TextEdit, Dreamweaver) pod atribut $settings vpišemo povezavo do naše spletne strani (primer 3.1). $settings['minishowcase_url'] = "http://127.0.0.1/wordpress/minishowcase"; Primer 3.1: Povezava do naše spletne strani. Vse fotografije shranimo v mapo, ki jo poljubno poimenujemo in premestimo v datoteko /galleries/, ki se prav tako nahaja v mapi Minishowcase. Pri poimenovanju se izogibamo uporabi posebnih znakov in presledkov. Celotno mapo Minishowcase naložimo na spletni strežnik. Spreminjanje oblike: Minishowcase galerija je omejena s svojo privzeto temo in lastnostmi. Večina privzetih lastnosti in funkcij se lahko spremeni znotraj datoteke /config/settings.php, saj se tam nahajajo vse pomembnejše funkcije galerije. Teme so prednastavljene vizualne oblike in vključujejo že določene barvne sheme ter pozicijo slik. Nahajajo se znotraj datoteke /themes/. Za ustvarjanje nove teme, je priporočljivo kopirati eno od že obstoječih ter pri njej spremeniti barve in slike v datoteki /themes/data.php. Spremembe shranimo in mapo poljubno poimenujemo. Novo temo izberemo znotraj datoteke /config/settings.php. Obsežnejše oblikovne spremembe se dosežejo znotraj CSS stilov in HTML dokumenta. Pravice uporabe: Minishowcase je pod licenco Creative Commons [2]. Licenca omogoča popolnoma brezplačno uporabo na poljubnem spletnem mestu. 3.1.2 Lightbox 2 Lightbox 2 temelji na jeziku JavaScript in knjižnici jquery. Galerija je naslednica prve generacije Lightbox JS. Obe je razvil spletni oblikovalec in razvijalec Lokesh Dhakar [3]. Najpomembnejša značilnost Lightbox galerije je, da fotografije naloži»izven«same strani in s tem ne vpliva na obliko in postavitev strani (slika 3.3). Zaradi tega je opisana kot 13
enostavna in nevsiljiva galerija, ki omogoča prikazovanje fotografij. Hitro se jo namesti in deluje na vseh sodobnih brskalnikih. Slika 3.3: Posebnost prikazovanja fotografij z galerijo Lightbox 2. Zahteve: Strežnik mora imeti nameščeno novejšo verzijo PHP jezika FTP račun in odjemalec Uporabniški brskalnik mora imeti omogočen JavaScript Knjižnica jquery 1.7.2 Značilnosti: Za razliko od prej omenjene galerije Minishowcase, je Lightbox skromneje opremljena. Ne podpira predoglednih sličic in nima večjezikovne podpore. Slednje tudi ne potrebuje, saj za svoje delovanje ne potrebuje prikazovanja navodil. Navigacija je preprosta, z gumbi za naprej in nazaj. Lightbox zahteva premestitev v pravilno povezano mapo in nato še vpisovanje vsake fotografije posebej (slika 3.4). Slabost tega je, da če želimo imeti veliko število fotografij v galeriji ali če jih moramo pogosto spreminjati, je to delo zelo zamudno. Pri galeriji Minishowcase je koda napisano tako, da sama najde in prikazuje fotografije, potem ko jih premestimo v pravilno mapo. Največja prednost Lightbox galerije je nevsiljiv način prikazovanja slik. Minishowcase vsili temo in popolnoma spremeni spletno stran, medtem ko Lightbox lahko vključimo v katerokoli spletno stran in to ne vpliva na njen videz. 14
Slika 3.4: Vpisovanje posameznih fotografij. Namestitev: Po prenosu galerije z domače strani Lightbox 2,.zip datoteko razširimo in jo naložimo na spletni strežnik. V glavo (header) HTML dokumenta spletne strani vključimo datoteki jquery in lightbox.js (primer 3.2). <script src="js/jquery-1.7.2.min.js"></script> <script src="js/lightbox.js"></script> Primer 3.2: Vključitev datotek jquery in lightbox.js v glavo HTML dokumenta. V datoteki css/lightbox.css moramo preveriti ali je pravilna povezava do slik za naprej (next.png) in nazaj (prev.png) (primer 3.3). Slike se lahko zamenjajo in preimenujejo. Prav tako v dokumentu lightbox.js (primer 3.4) preverimo ali je pravilna povezava do slik za nalaganje (loading.gif) in za zapiranje (close.png). Ta korak je pomemben, kajti v nasprotnem se slike, ki predstavljajo navigacijske gumbe, ne prikažejo..lb-prev:hover { background: url(../images/prev.png) left 48% no-repeat;}.lb-next:hover { background: url(../images/next.png) right 48% no-repeat;} Primer 3.3: Primer povezave do sličic za naprej in nazaj. function LightboxOptions() { this.fileloadingimage = 'lightbox/images/loading.gif'; this.filecloseimage = 'lightbox/images/close.png';} Primer 3.4: Primer povezave do sličic za nalaganje in zapiranje. 15
Fotografije, ki smo jih izbrali za predstavitev, premestimo v mapo lightbox/images/poljubno_ime_mape. V podmapi images se že nahajajo slike, ki so potrebne za videz in obliko galerije, zato je potrebno ustvariti še eno podmapo s poljubnim imenom. Za aktivacijo galerije, v HTML datoteko dodamo povezavo rel="lightbox" ter poljubne atribute. Za dodajanje naslova ali opisa se doda atribut title (primer 3.5). <a href="images/slika_1.jpg" rel="lightbox" title="rože">slika 1</a> Primer 3.5: Primer aktivacije galerije Lightbox 2. Spreminjanje oblike: Za razliko od galerije Minishowcase, Lightbox nima prednastavljenih tem, zato so potrebne spremembe znotraj CSS datotek. Galerija ima dve zunanji CSS datoteki, in sicer lightbox.css in screen.css. V screen.css so shranjene vse informacije, ki so pomembne za prikaz predogleda galerije ob prvi namestitvi. Slednji nam koristi kot primer, kako mora galerija biti sestavljena za pravilno rabo. Znotraj lightbox.css se nahajajo vse informacije glede same galerije. Tukaj lahko popolnoma spremenimo videz galerije in to ne bo vplivalo na našo spletno stran in njen CSS. Vse kar je potrebno za spreminjanje Lightbox galerije je osnovno znanje stilov CSS. Pravice uporabe: Lightbox galerija je popolnoma brezplačna za uporabo, sprejemajo se edino prostovoljni prispevki avtorju v primeru komercialne uporabe. 3.1.3 Galleria Galleria je JavaScript spletna galerija obogatena s knjižnico jquery. Galleria skuša poenostaviti proces ustvarjanja galerij za splet in mobilne naprave. Koda je sestavljena iz visokokakovostnega jedra, ki predstavlja širok nabor orodij za preprosto preoblikovanje galerije za vsak način uporabe [1]. V paket, ki je na voljo na domači spletni strani, je vključeno naslednje: programska koda, ena brezplačna tema, demo datoteka ter vtičniki za Flickr, Picasa in History. Zahteve: Strežnik mora imeti nameščeno novejšo verzijo PHP jezika jquery 1.8.0 GD/GD2 razširitev 16
FTP račun in odjemalec Uporabniški brskalnik mora imeti omogočen JavaScript Značilnosti: Za namestitev galerije je potrebno kopirati le nekaj vrstic kode in dodati fotografije. Enako kot galerija Minishowcase, tudi Galleria omogoča samodejno generiranje predoglednih sličic. Navigacija je omogočena s predoglednimi sličicami in gumbi za krmiljenje. Galleria vse slike prednaloži, ko se spletna stran vzpostavi, zato ni nikoli čakanja med preklapljanjem slik. Prilagojena je za mobilne sisteme z na dotik občutljivimi ekrani (slika 3.5). Podpira vtičnike Flickr, Picasa, Youtube, Vimeo in History. Slika 3.5: Primer galerije na mobilnem Safariju. Galleria uporablja JavaScript kot programski vmesnik ter jquery za enako prikazovanje v vseh brskalnikih. Kljub širokemu izboru tem z različnimi zgradbami je Galleria podprta v vseh sodobnih brskalnikih: IE7+, Opera 11, Firefox 3+, Chrome 9+, Safari 4+ in mobilni Safari (ipad, iphone, Android). Namestitev: Galleria je podprta s knjižnico jquery, zato je prvi korak vključitev jquery kode v glavo HTML dokumenta (primer 3.6). 17
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"> </script> Primer 3.6: Vključitev jquery kode v glavo HTML dokumenta. Za preverjanje pravilnega delovanja knjižnice jquery vnesemo v telo dokumenta funkcijo za preverjanje (primer 3.7). <script>$("body").text("jquery deluje");</script> Primer 3.7: Funkcija za preverjanje knjižnice jquery. V primeru pravilnega delovanja se izpiše: jquery deluje. Funkcijo se nato lahko izbriše iz dokumenta, saj smo jo uporabili samo za preverjanje. Datoteko galleria.zip, ki smo jo prenesli s spletnega naslova, razširimo in shranimo na spletni strežnik. V HTML datoteko, pod jquery kodo, dodamo še JavaScript (primer 3.8). <script src="galleria/galleria-1.2.7.min.js"></script> Primer 3.8: Vključitev dokumenta JavaScript v glavo dokumenta HTML. Za preverjanje pravilnega delovanja galerije tokrat vnesemo v telo dokumenta drugo funkcijo za preverjanje (primer 3.9). <script>if (Galleria) { $("body").text('galleria deluje') }</script> Primer 3.9: Preverjanje delovanja spletne galerije. V primeru pravilnega delovanja se izpiše: Galleria deluje. Zatem lahko tudi to funkcijo izbrišemo iz dokumenta. Pomemben podatek, ki ga je potrebno vpisati, je višina galerije. Za pravilno delovanje galerije je potrebno znotraj glave dokumenta dodati definirano višino galerije (primer 3.10). <style>#galleria{height:400px}</style> Primer 3.10: Definiranje višine galerije znotraj glave dokumenta HTML. Višino se lahko poljubno izbere, glede na želeno končno velikost galerije, vendar predstavlja nujni podatek za prikaz galerije. Brez podatka o višini se galerija ne prikaže. 18
Naslednji korak namestitve galerije je dodajanje fotografij. Te se dodajajo ročno znotraj oznak telesa dokumenta HTML (primer 3.11). <div id="galleria"> <img src="slika1.jpg"> <img src="slika2.jpg"> <img src="slika3.jpg"> </div> Primer 3.11: Dodajanje fotografij. Da bi Galleria začela prikazovati fotografije potrebuje temo. V prenesenem paketu Galleria se nahaja tema classic. Tema je vključena z JavaScript funkcijo Galleria.loadTheme in se vpiše pod kodo za dodajanje slik v telo dokumenta HTML (primer 3.12). <script> Galleria.loadTheme('galleria/themes/classic/galleria.classic.min.js'); </script> Primer 3.12: Vključitev teme v telo dokumenta HTML. Spreminjanje oblike: Za spremembo oblike galerije in možnosti prikaza, lahko za manjše spremembe spremenimo kar osnovno temo Classic (slika 3.6). Lahko pa kupimo eno izmed ponujenih tem: Miniml, Twelve, Folio in Fullscreen ter jih namestimo. Brezplačna tema Classic ne podpira dodatkov kot sta celozaslonski način in prikaz slike izven strani. Lahko pa oblikujemo svojo lastno temo po navodilih na domači strani Gallerie. 19
Slika 3.6: Primer manjših sprememb teme Classic. Pravice uporabe: Programska koda Gallerie in tema classic sta izdani pod licenco MIT [25] ter sta popolnoma brezplačni za uporabo. Vse ostale Premium teme in dodatki so plačljivi ter na voljo za nakup na spletni strani. 3.1.4 Galleriffic Spletna galerija Galleriffic nudi bogato izkušnjo ogledovanja slik, saj lahko prikaže veliko število slik [7]. V primerjavi z ostalimi obravnavanimi galerijami ima Galleriffic najbolj pomanjkljivo dokumentacijo. Temelji na skriptnem jeziku JavaScript in knjižnici jquery. Zahteve: Strežnik mora imeti nameščeno novejšo različico PHP jezika GD/GD2 razširitev FTP račun in odjemalec Uporabniški brskalnik mora imeti omogočen JavaScript Potrebno je ustvariti predogledne sličice približne velikosti 100x75px Uporaba knjižnice jquery od različice 1.3.2 Značilnosti: Ko obiščemo spletno stran z nameščeno Galleriffic galerijo, ta slike takoj naloži ne glede na njihovo število in tega prehoda sploh ne opazimo. Omogoča samodejno predvajanje slik z različnimi efekti. Te lahko ustvarimo tudi sami in jih dodamo galeriji. Navigacija je 20
omogočena z gumbi za krmiljenje, smernimi tipkami na tipkovnici in predoglednimi sličicami - te so še obogatene s številčenjem strani. Galerija ima celo programski vmesnik za navigacijo s poljubnimi kontrolami. Ponuja podporo za opise in naslove slik. V primeru, da JavaScript ni omogočen, še vedno prikazuje predogledne sličice. Galerija podpira istočasno uporabo različnih spletnih galerij na istem spletnem mestu. Galerija razočara pri vpisovanju slik. Te je potrebno vpisovati ročno v telo HTML dokumenta. Enak postopek je s predoglednimi sličicami, vendar te še zahtevajo vnaprejšnjo pomanjšanje. Omogoča integracijo z vtičnikom History. Namestitev: Domača stran galerije [7] vsebuje navodila za namestitev ter pet primerov že nameščene galerije. Primeri se razlikujejo glede na enostavnost namestitve, integracijo z vtičnikom in različna zlivanja. Uporabnik si lahko pomaga s primeri odvisno od tega kaj želi uporabiti. Z domače strani prenesemo.zip datoteko, v kateri se nahajajo JavaScript in jquery datoteke, CSS stili in pet primerov uporabe. V glavo HTML dokumenta vnesemo povezavi do knjižnice jquery in JavaScript (primer 3.13). <script type="text/javascript" src="galleriffic/js/jquery-1.3.2.js"></script> <script type="text/javascript" src="galleriffic/js/jquery.galleriffic.js"></script> Primer 3.13: Vključitev datotek jquery in JavaScript v glavo HML dokumenta. Za omogočitev vtičnika History in zlivajoče prehode je potrebno vključiti še dve datoteki (primer 3.14). <script type="text/javascript" src="galleriffic/js/jquery.opacityrollover.js"></script> <script type="text/javascript" src="galleriffic/js/galleriffic_config.js"></script> Primer 3.14: Vključitev dodatnih datotek JavaScript. Za pravilno razporeditev gumbkov za krmiljenje, predogledne sličice in opise slik je potrebno vključiti še CSS stile. Potrebno je vključiti dva stila izmed devetih, ki so na voljo. Nujno je potrebna datoteka z osnovno obliko basic.css, drugo datoteko pa lahko poljubno 21
izberemo glede na to kaj želimo prikazati na spletni strani. Izbrali smo galleriffic-2.css, ki ponuja veliko možnosti, a je hkrati oblikovno najbolj nevtralna (primer 3.15). <link rel="stylesheet" href="galleriffic/css/basic.css" type="text/css"/> <link rel="stylesheet" href="galleriffic/css/galleriffic-2.css" type="text/css" /> Primer 3.15: Vključitev CSS stilov. Po osnovnem vpisovanju podatkov se začne kompleksnejši del. V telo dokumenta lahko dodamo določene oznake glede na to kaj želimo z galerijo prikazati. Za slikovno podporo navigacije ter opisov je potrebno vključiti oznako <controls>. Samodejno predvajanje je možno nadzorovati le ob vključitvi oznake <slideshow> in podobno za ostale oznake (primer 3.16). <div id="controls"></div> <div id="loading"></div> <div id="slideshow"></div> <div id="caption"></div> <div id="thumbs"> Primer 3.16: Vključitev posebnih oznak. Vendar, ko vključimo oznake, delo še ni zaključeno. Že za vključitev predoglednih sličic je potrebno napisati malo več kode, kot je to bilo potrebno pri prejšnjih galerijah (primer 3.17). <div id="thumbs"> <ul class="thumbs noscript"> <li> <a class="thumb" name="poljubnoime" href="pot/do/slike" title="ime slike"> <img src="pot/do/predogledne/slicice" /> </a> <div class="caption"> <div class="image-title">roža 1</div> </div> </li> 22
... (enak postopek za vsako novo sliko) </ul> </div> Primer 3.17: Vključitev predoglednih sličic. Spreminjanje oblike: Spletna galerija Galleriffic (slika 3.7) ima na voljo obilico CSS stilov, ki omogočajo različen videz galerije. Stili definirajo podobo strani in so nam lahko uporabni samo v primeru, če želimo zgraditi enostavno spletno stran, ki še nima obstoječega CSS stila. Kadar pa že imamo spletno stran, ki je obogatena s CSS stili, nam Galleriffic oteži delo. Zaradi navigacijskih sličic, samodejnega predvajanja ter ostalih grafičnih elementov, moramo nujno uporabiti stile, ki jih predpisuje Galleriffic. Da dosežemo videz, ki ga želimo, so potrebne spremembe znotraj CSS stilov. Slika 3.7: Primer spremenjenega osnovnega izgleda galerije Galleriffic. Pravice uporabe: Galleriffic je brezplačna spletna galerija, sprejemajo se le prostovoljni prispevki. Avtor želi vedeti na katerih spletnih straneh se uporablja. 23
3.1.5 SmoothGallery Enostavna in zmogljiva spletna galerija nudi veliko možnosti, s katerimi popestri spletno stran. Temelji na skriptnem jeziku JavaScript, ki je obogaten s knjižnico MooTools [23]. Lastnik knjižnice redno posodablja vsebino. Tako so na voljo tri različice: SmoothGalery v1.0.1, SmoothGallery 2.0 ter SmoothGallery 2.1. Zadnja različica je trenutno še v beta fazi, zato smo v primerjavi uporabili drugo. Zahteve: Strežnik mora imeti nameščeno novejšo verzijo PHP jezika GD/GD2 razširitev FTP račun in odjemalec Uporabniški brskalnik mora imeti omogočen JavaScript Različico MooTools v1.11 Potrebno je ustvariti predogledne sličice velikosti približno 100x75px Značilnosti: Paket, ki ga prenesemo z domače strani vsebuje več datotek in demo primerov, ki nam kažejo kako zelo prilagodljiva je galerija SmoothGallery. Osnovna namestitev, ki jo bomo razložili v nadaljevanju, omogoča navigacijo z gumbi za krmiljenje in predoglednimi sličicami. Pomembna splošna značilnost je, da vse slike naloži že ob obisku spletne strani. S tem skrajša čas, ki bi bil potreben s kasnejšim vnovičnim nalaganjem posamezne slike. Zato gumba za nalaganje in prehodov med slikami skoraj nikoli ne opazimo. Osnovna namestitev prav tako omogoča opise in naslove slik. Z nekaj vrsticami več pa lahko že dosežemo dodatne značilnosti kot so samodejno predvajanje, zlivanje slik, avtomatsko generiranje predoglednih sličic in večje število galerij hkrati. Podpira uporabo vtičnika History, ki vsaki sliki doda edinstven ID znotraj url naslova. Pri pregledovanj galerije lahko pošljemo prijatelju povezavo in on bo videl enako sliko. Podpirajo jo brskalniki: Safari, Opera, Firefox, Chrome ter Internet Explorer (od različice IE 6 dalje ). Namestitev: Predstavili bomo potek osnovne namestitve galerije. Datoteko SmoothGallery-2.0 prenesemo na spletni strežnik. V glavo dokumenta HTML vpišemo povezavi do datotek MooTools, JavaScript in CSS stila (primer 3.18). <script src="scripts/mootools.v1.11.js" type="text/javascript"></script> 24
<script src="scripts/jd.gallery.js" type="text/javascript"></script> <link rel="stylesheet" href="css/jd.gallery.css" type="text/css" media="screen" /> Primer 3.18: Dodajanje povezav do datotek MooTools in JavaScript. Nato vpišemo v telo dokumenta HTML kodo, ki definira elemente galerije (primer 3.19). <div id="mygallery"> <div class="imageelement"> <h3>naslov</h3> <p>opis</p> <a href="mojastran.html" title="open image" class="open"></a> <img src="images/1.jpg" class="full" /> <img src="images/1-mini.jpg" class="thumbnail" /> </div> </div> Primer 3.19: Primer kode, ki smo jo vnesli v telo HTML, z namenom definiranja elementov. Naslednji korak je vstavljanje JavaScript funkcije za klicanje galerije (primer 3.20). <script type="text/javascript"> function startgallery() { var mygallery = new gallery($('mygallery'), { timed: false }); } window.addevent('domready', startgallery); </script> Primer 3.20: Klic funkcije. Nazadnje še nastavimo poljubno višino galerije, ki se nahaja v smoothgallery/css/jd.gallery.css (primer 3.21). Priporočljivo je, da se jo nastavi glede na velikosti slik. #mygallery { width: 400px; 25
height: 200px; } Primer 3.21: Poljubna nastavitev višine galerije. Spreminjanje oblike: Galerija ima definirano obliko s pomočjo dveh stilov jd.gallery.css in layout.css. Oba stila sta omejena samo na galerijo, ki jo omejimo z definiranjem višine in širine. Oblikovno je galerija zelo prilagodljiva kakršnikoli spletni strani z že definirano obliko, prevzame tudi že nastavljene fonte (slika 3.8). Spremenimo lahko izgled gumbov za krmiljenje in drsne pasice znotraj omenjenih stilov. Slika 3.8: Primer aplicirane galerije že oblikovani strani. Pravice uporabe: SmoothGallery je omejena s pravili GPL licence [8], ki dovoljuje brezplačno uporabo, dodajanje in spreminjanje programske opreme. 26
3.2 Primerjalna tabela spletnih galerij Objektivno primerjanje spletnih galerij je zaenkrat še relativno neraziskano področje. Najti kriterije za takšno primerjavo ni moč najti v knjižni literaturi, saj je to področje, ki se neprestano spreminja, dopolnjuje in razvija. Kriterije za primerjavo smo zato prevzeli po priznanem spletnem razvijalcu in svetovalcu Willu Fastiju [5]. Ti kriteriji so: samodejno predvajanje vsebine, hitrost prehodov med fotografijami, gumbi za krmiljenje, možnost spreminjanja oblike, tehnologija s katero so zgrajene, zadnje različice ter licence. Dodali smo tudi nekaj lastnih kriterijev primerjave (npr. predogledne sličice, podatkovni tipi). To je bilo potrebno, ker Fastie primerja galerije z vidika naprednega razvijalca, medtem ko smo se mi osredotočili na vidik manj izkušenega razvijalca oziroma spletnega oblikovalca. Za analizo in primerjavo galerij smo teh pet galerij namestili ter preizkusili na CMS sistemu Wordpress. Na njem smo naredili lastno obliko, kateri smo galerije poskušali prilagoditi. S tem smo posnemali pogoje, ki jih ima večina spletnih skrbnikov ali oblikovalcev. Prišli smo do praktičnih ugotovitev, da imajo primerjane galerije dobre in slabe lastnosti, ki jih kažejo pri določenih značilnostih. V tabeli 3.1 je strnjena primerjava spletnih galerij glede na značilnosti, ki jih omogočajo osnovne različice. Torej le tiste, ki so že nameščene znotraj samih galerij ali se dodajo z dodatnimi vrsticami kode po navodilih z domače strani. Za takšno uporabo skrbnik spletne strani ne potrebuje znanja jezika JavaScript in PHP. Tabela 3.1: Primerjava spletnih galerij. Kriteriji Minishowcase Lightbox2 Galleria Galleriffic SmoothGallery Samodejno predvajanje Prehodi med slikami Predogledne sličice Da Ne Ne Da Da Ne Da Da Da Da Da Ne Da Da Da 27
Samodejne predogledne sličice* Krmiljenje z gumbi Krmiljenje s sličicami Krmiljenje s smernimi tipkami Podprti podatkovni tipi** Zadnja različica Da / Da Ne Ne Da Da Da Da Da Da Ne Da Da Da Da Da Ne Da Ne.jpg,.png,.gif.jpg,.png,.jpg,.png,.jpg,.png,.gif.gif.gif.jpg,.png,.gif 0.9 beta 142 2.51 1.2.8 2.0 2.1 Licenca Creative Commons Popolnoma brezplačna MIT Brezplačna za osebno uporabo GPL Aktivna podpora in razvoj*** Dobra podpora, redke posodobitve Dobra podpora, redne posodobitve Dobra podpora, redne posodobitve Pomanjkljiva podpora, redke posodobitve Osnovna podpora, redke posodobitve * Samodejne predogledne sličice predogledne sličice se generirajo samodejno in jih ni potrebno ročno ustvariti. ** Podatkovni tipi preverili smo le standardne podatkovne tipe spletnih galerij: jpg, png in gif. *** Aktivna podpora in razvoj kako pogosto avtorji posodabljajo galerije, njihovo vsebino in kakšno podporo ponujajo (navodila za uporabo osnovnih možnosti in namestitev). 28
Minishowcase, Galleriffic in SmoothGallery imajo možnost samodejnega predvajanja. Lightbox 2 in Galleria tega ne omogočata. Ta možnost je dodatna funkcionalnost, ki ni nujno potrebna za pravilno prikazovanje slik. Pomembnejša lastnost je način prehajanja slik. Galerije z različnimi efekti in gladkimi prehodi slik (npr. prelivanje) so končnemu uporabniku veliko bolj zanimive in privlačne, kot preprosti preskoki med slikami. Teh prehodov ne omogoča edino galerija Minishowcase. Predogledne sličice spletni galeriji omogočajo vpogled v galerijo in navigacijo. Podpirajo jih vse galerije razen Lightbox 2. Pri galerijah Minishowcase in Galleria je koda napisana tako, da se te samodejno generirajo in prikazujejo. Galerije se razlikujejo predvsem v različnih načinih navigacije. Vse imajo navigacijo z gumbi za krmiljenje. Podobno je z navigacijo s predoglednimi sličicami, ki jo prav tako omogočajo vse razen galerije Lightbox 2, ki že v izhodišču ne podpira predoglednih sličic. Slednja omogoča navigacijo s smernimi tipkami, ki jo omogočata le še Minishowcase in Galleriffic. Vse galerije podpirajo standardne slikovne podatkovne tipe (jpg, png, gif). Čeprav so vse galerije v osnovi brezplačne, je vsaka omejena z drugačno licenco. Tako so nekatere popolnoma brezplačne za kakršnokoli uporabo (npr. Lightbox 2), medtem ko so nekatere brezplačne le v primeru osebne uporabe (npr. Galleriffic). Večinoma vse galerije nudijo dovolj natančno dokumentacijo za namestitev, čeprav bi vse lahko imele boljšo. Dokumentacija posameznih galerij vsebuje kratek opis, navodila za namestitev, licenčne pravice ter dodatne možnosti (npr. spreminjanje oblike). Ponekod smo naleteli na pomanjkljiva navodila, zaradi katerih se je namestitev časovno zavlekla. Pri tem lahko pohvalimo natančna in preprosta navodila galerije Minishowcase, ki smo jo namestili v približno petih minutah. Podobno enostavna je tudi galerija Lightbox, čeprav zahteva nekoliko več prilagoditev. Preostale galerije so imele pomanjkljivejša navodila, kjer so izpustili kakšen podatek. Tako so pri Galleriji»pozabili«napisati, da je nujno potrebno določiti višino galerije v dokumentu HTML, saj se brez tega podatka galerija ne prikaže. Spletna galerija Galleriffic je imela najbolj pomanjkljivo dokumentacijo in je njena namestitev terjala največ časa. SmoothGallery nudi osnovno dokumentacijo, kar pomeni, da je namestitev potekala gladko vendar ne ponuja navodil glede dodatnih možnosti preoblikovanja. 29
4 SKLEP Diplomska naloga je bila zastavljena z vidika manj izkušenega razvijalca oziroma spletnega oblikovalca, ki pozna vsaj jezike (X)HTML, PHP ter CSS. Takšna oseba v spletu 2.0 ne potrebuje poglobljenega strokovnega znanja JavaScripta, saj ima na izbiro veliko število galerij, ki za pravilno delovanje potrebujejo le nekaj osnovnih ukazov. Največjo oviro je predstavljalo veliko število galerij, zato smo predstavili le pet JavaScript spletnih galerij, izbranih na osnovi priljubljenosti med uporabniki na večjih ocenjevalnih spletnih straneh ter ponazorili zakaj so galerije zgrajene s to tehnologijo. Te smo nato podrobneje analizirali in ovrednotili. Vsako izmed galerij smo tudi praktično preizkusili na dinamičnem spletnem mestu, ki smo ga zgradili s pomočjo CMS sistema Wordpress. Vse galerije imajo na svoji domači strani navodila za namestitev ena boljša, druga slabša. Prednost te dokumentacije je, da poglobljeno predznanje jezika JavaScript ni potrebno. Nekatere galerije smo tako namestili brez težav (Minishowcase je bila nameščena v približno petih minutah). Določene so imele pomanjkljiva navodila in smo potrebovali več časa za namestitev (galerija Galleriffic je zahtevala največ dela). Izmed vseh analiziranih galerij ni smiselno izbrati le eno, saj so vse galerije dobro zasnovane in uporabne. Kriteriji izbire so samo želje skrbnika. Če potrebuje zelo hitro rešitev in se ne želi poglobiti v lastno podobo strani, lahko uporabi galerijo Minishowcase. Slednja se doda le kot povezava na spletno stran in ima podobo že definirano. Če skrbnik želi ohraniti obstoječo podobo spletne strani, potem potrebuje preprostejšo galerijo kot je Lightbox. Galleria in Galleriffic sta primerni za komercialne namene, kot so spletne trgovine. Če pa želi bolj umetniško galerijo z veliko dodatnih efektov kot so prehodi med slikami, več interaktivnosti, razdelitev na več sklopov, potem lahko izbere SmoothGallery. Skrbnik spletnega mesta mora pri izbiri spletne galerije biti pozoren na stabilnost spletne galerije, za kakšna spletna mesta je primerna ter ali galerija omogoča vse kar potrebuje. Stabilnost lahko preveri pri komentarjih uporabnikov in priljubljenosti (ponavljanje iste galerije na uveljavljenih spletnih mestih). Primernost za uporabo lahko ugotovi iz dokumentacije, kjer lahko pogleda oblikovne značilnosti galerije. Vse ostalo pa je odvisno od njegovega strokovnega predznanja, iznajdljivosti in domišljije. 30