UNIVERZA V MARIBORU FAKULTETA ZA ELEKTROTEHNIKO, RAČUNALNIŠTVO IN INFORMATIKO. Silvija Repnik. USTVARJANJE PREDSTAVITEV S POMOČJO HTMLv5

Transcription

1 UNIVERZA V MARIBORU FAKULTETA ZA ELEKTROTEHNIKO, RAČUNALNIŠTVO IN INFORMATIKO Silvija Repnik USTVARJANJE PREDSTAVITEV S POMOČJO HTMLv5 Diplomsko delo Maribor, avgust 2015

2 USTVARJANJE PREDSTAVITEV S POMOČJO HTMLv5 Diplomsko delo Študentka: Študijski program: Smer: Mentor: Lektorica: Silvija Repnik Univerzitetni študijski program Medijske komunikacije Medijska produkcija doc. dr. Marko Hölbl, univ. dipl. inž. rač. in inf. Eva Ravlen, univ. dipl. prof. slov.

3 ZAHVALA Zahvaljujem se mentorju za strokovno pomoč in hitro odzivnost pri pisanju diplomskega dela. Zahvaljujem se tudi staršem in prijateljem, ki so me spremljali in podpirali med študijem. II

4 Ustvarjanje predstavitev s pomočjo HTMLv5 Ključne besede: HTMLv5, predstavitev, PowerPoint, Prezi, Slides, Strut UDK: (043.2) Povzetek V diplomskem delu smo ustvarili predstavitve s pomočjo novih tehnologij HTMLv5, programa PowerPoint in aplikacij Slides, Strut in Prezi. Naredili smo analizo orodij in predstavitve same. Podrobneje smo analizirali tudi samo predstavitev, ki je bila izvožena kot HTML. Cilj, kateri se je glasil, osvojiti zmožnosti izdelave predstavitve s tehnologijo HTMLv5, smo dosegli. Na koncu smo preverili še zastavljene hipoteze. Ugotovili smo, da izdelava predstavitev s pomočjo tehnologij HTMLv5 ni zahtevnejša od izdelave s programoma PowerPoint ali Prezi. Ugotovili smo tudi, da obstaja razlika med orodji, s katerimi smo izdelovali predstavitve in da PowerPoint in Prezi ponujata več možnosti grafičnega oblikovanja kot tehnologija HTMLv5. Program PowerPoint nam ponuja največ orodij in možnosti za oblikovanje predstavitve. Tudi aplikacije tehnologije HTMLv5 niso skope, njihova velika prednost je, da jih lahko odpiramo na katerikoli napravi. III

5 Creation of presentation using HTMLv5 Key words: HTMLv5, presentation, PowerPoint, Prezi, Slides, Strut UDK: (043.2) Abstract While writing the thesis, we ve created presentations in three different programs, and this by means of new technologies of HTMLv5, PowerPoint program and applications Slides, Strut and Prezi. We did analysis of the tools and the presentation itself.in detail we analyzed the presentation itself which was exported as a HTML. We have reached the objective,which readed as, creating a presentations with html5 technology. We have found that making a presentation using technologies HTMLv5 is not much difficult than making a presentation with PowerPoint or Prezi. At the end, we also checked the set hypothesis. We established where a presentation is the easiest to create, which application offers the most tools respectively possibilities, and which is the most reliable one to be opened on any device. PowerPoint gives us multiple tools and options for creating presentations and HTMLv5 can be open on any device. IV

6 KAZALO VSEBINE 1 Uvod Opredelitev problema Cilji in teze diplomskega dela Predpostavke in omejitve Metode raziskovanja Orodja za predstavitve Tehnologija htmlv Program powerpoint Aplikacija prezi Izdelava predstavitve s HTMLv Opis različnih tehnik Načrtovanje Predstavitev uporabljene aplikacije Predstavitev delovanja predstavitve ustvarjene s htmlv Testiranje Težave in rešitve Primerjava z izpostavitvijo slabosti in prednosti HTMLv5 napram PowerPoint in Prezi Analiza predstavitev s HTMLv5, PowerPointom in aplikacijo Prezi Sklep Literatura in viri V

7 KAZALO SLIK Slika 1 : Orodna vrstica aplikacije Strut... 7 Slika 2: Možnosti ozadja v aplikaciji Strut... 9 Slika 3: Izvoz predstavitve v aplikaciji Strut Slika 4: Orodna vrstica PowerPoint Slika 5: Zavihek Diaprojekcija v PowerPointu Slika 6: Orodna vrstica v aplikaciji Slides VI

8 KAZALO PRIMEROV Primer 1: Primer Canvas v HTMLv5 datoteki [5]... 6 Primer 2: Primer Canvas v JavaScript datoteki [5]... 7 Primer 3: Izvorna koda za Google Slides Template... 8 Primer 4: Izvorna koda za avdio Primer 5: Izvorna koda za video Primer 6: Pomembne del kode v JavaScript datoteki Primer 7: Izvorna koda za video zapis v naši predstavitvi VII

9 1 Uvod 1.1 Opredelitev problema S predstavitvijo želimo predstaviti idejo, koncept, izdelek, pogosto se uporabljajo tudi v podjetjih in organizacijah za predstavitev novih izdelkov ali idej. Namenjene so predstavitvi novih idej in pridobivanju novih članov organizacije. Če je PowerPoint predstavitev zanimiva in natančna, potem celoten nastop pusti pozitiven vtis. Za dobro predstavitev pa potrebujemo dober računalniški program. Zelo razširjeno orodje za ustvarjanje predstavitev je Microsoftov PowerPoint. Nove različice PowerPointa ponujajo raznolike barvne teme, pisave, animacije ter prehode. Predstavitve so narejene iz posameznih diapozitivov, ki vsebujejo slike, animacije, hiperpovezave, tekst ipd. Večjih problemov s samo izdelavo predstavitve ni, večje težave nastanejo pri predvajanju, saj je Microsoft PowerPoint možno poganjati le na operacijskih sistemih Microsoft Windows in Mac OS. Predstavitve lahko ustvarimo tudi s pomočjo spletnega orodja Prezi. Za razliko od Powerpointa nudi orodje Prezi precej drugačen način ustvarjanja predstavitev, v zadnjem času pa se vedno bolj uveljavlja HTML5 kot orodje za snovanje predstavitev. Namen diplomskega dela je proučiti zmožnosti ustvarjanja predstavitev s pomočjo tehnologij HTMLv5. V ta namen bomo s pomočjo tehnologije HTMLv5 ustvarili predstavitev. Na koncu bomo podali tudi ugotovitve o primernosti posameznih orodij ali tehnologij za ustvarjanje predstavitev. 1

10 1.2 Cilji in teze diplomskega dela Namen diplomskega dela je proučitev in izdelava predstavitve s pomočjo tehnologije HTMLv5 ter analiza in primerjava s predstavitvijo PowerPoint. Osredotočili se bomo na zmožnosti posameznih tehnologij ali orodij, s katerimi je mogoče narediti čim bolj celovito predstavitev. Prav tako bomo primerjali obe tehnologiji z orodjem Prezi. Glavni cilji, ki jih želimo doseči v diplomskem delu, so: osvojiti/spoznati zmožnosti tehnologije HTMLv5 za izdelavo predstavitev; izdelati predstavitev s pomočjo tehnologije HTMLv5, PowerPointa in Prezija; izvesti primerjavo med predstavitvami, narejenimi s pomočjo HTMLv5, PowerPointa in Prezija. V diplomskem delu želimo zavreči oz. potrditi naslednje hipoteze: H1: Izdelava predstavitev s pomočjo HTMLv5 je zahtevnejša kot izdelava s pomočjo PowerPointa ali Prezija. H2: Med orodji PowerPointa, Prezija in HTMLv5 je razlika. H3: Pri izdelavi grafične podobe s pomočjo HTMLv5 imamo več možnosti kot pri PowerPointu in Preziju. 1.3 Predpostavke in omejitve V diplomskem delu bomo raziskovali in primerjali tehnologijo HTMLv5 in orodje Microsoft PowerPoint, različici 2013, ter orodje Prezi. Pozornost bomo posvetili predvsem prehodom med posameznimi diapozitivi, animacijam in videzu. Tem elementom bomo posvetili pozornost tudi pri izdelanem predmetu. Pri končnem izdelku vsebina ne bo imela bistvenega pomena. 2

11 1.4 Metode raziskovanja Seznam metod, ki jih nameravamo uporabiti: deskriptivna metoda (študija literature), primerjalna analiza (primerjava orodij in pristopov za snovanje predstavitev), načrtovanje in izdelava predstavitev, testiranje videza in delovanja predstavitev. 3

12 2 Orodja za predstavitve 2.1 Tehnologija htmlv5 HTMLv5 je označevalni jezik za spletne strani (WWW). Prvi osnutek je bil podan leta 2008, intenzivno pa se je začel uporabljati tri leta kasneje. HTMLv5 ima kar nekaj novosti, in prav te novosti nam omogočajo izdelavo predstavitev in bogatih spletnih strani. HTML element je osnovni gradnik dokumenta HTML in določa prikaz vsebine. Elementi imajo različne atribute. Dokumenti HTML so grajeni v drevesni strukturi. Za izdelavo same predstavitve imamo na voljo več možnosti. Lahko si izberemo težjo pot ali lažjo pot. Treba je pravilno postaviti dokument, urediti CSS, predvsem pa pravilno in natančno navesti JavaScript. JavaScript nam bo omogočala prehode ter animacije. Na voljo pa imamo tudi lažje poti same izdelave. Na spletu je na voljo veliko že napisanih kod za izdelavo predstavitve. Tako samo odpremo svoj urejevalnik za kodo, dodamo besedilo, katero je namenjeno za predstavitev, morda še kaj popravimo v dokumentu CSS ali JavaScript in naša predstavitev je narejena. Seveda mora biti vse v eni mapi, vključno z slikami in videi, kajti tako se vse povezuje skupaj. Najlažje in najhitreje pa takšno predstavitev izdelamo s pomočjo spletnih aplikacij za izdelavo HTML predstavitev. Dandanes je ogromno takšnih ponudnikov. Pri takšni izdelavi predstavitve imamo občutek, kot da izdelujemo predstavitev v PowerPointu, Photoshopu ali programu za fotografijo/animacijo. In če nam je takšen program tuj, nam je še posebej zanimivo, saj spoznavamo nove stvari, s katerimi se lahko poigramo, vseeno pa lahko ustvarimo kvaliteten izdelek, ki ga na koncu shranimo na računalnik. Predstavitev lahko odpremo na kateremkoli operacijskem sistemu, seveda v novejših brskalnikih (takšna predstavitev se ne bi prikazovala popolno, če bi jo pognali v Windowsu 95 in z brskalnikom Internet Explorer [1] [3] [8]. 4

13 2.2 Program powerpoint PowerPoint je Microsoftova programska oprema za izdelavo predstavitev. Najnovejša verzija paketa je 15., imenuje pa se Office Paket si lahko namestimo na računalnik ali pa ga uporabljamo kar na spletu. Spletna različica PowerPointa nam ponuja manj orodij, kot tista, ki je nameščena na računalniku, vendar nam omogoča izdelavo preproste predstavitve. Predstavitev je narejena iz diapozitivov, ki vsebujejo besedilo, zvok, animacije, fotografije in filme. Diapozitive ločimo z raznoraznimi ponujenimi prehodi, kot so vrtenje, potisk, rez, razdelitev Tako kot za HTMLv5, tudi za PowerPoint obstajajo lažji in težji načini izdelave predstavitve. Težji del poznamo vsi: začeti čisto od začetka. Pisanje na prazen list, ki mu sledijo še prehodi, urejanje barv ter animacij. Treba je tudi izbrati, katere elemente bo vseboval naš diapozitiv (npr. ali bo samo besedilo, ali bo besedilo in slika, na voljo imamo tudi naslov in podnaslov). Dandanes pa nam bogat svetovni splet ponuja tudi predloge (npr. že izdelano predstavitev, ki vključuje primerno razmerje med barvami ter urejene prehode). Naša naloga je le dodati besedilo ter fotografije (po potrebi). PowerPoint bi lahko bil popoln program za izdelavo predstavitev, če bi ga lahko poganjali še kje drugje, kot samo na Microsoft Windowsih in Mac OS-u. 2.3 Aplikacija prezi Prezi je spletna aplikacija za ustvarjanje predstavitev. Kaj je laikom zanimivo pri ustvarjanju s pomočjo aplikacije Prezi? Kar pritegne ljudi so predvsem zanimivi prehodi med diapozitivi. Ti se vrtijo za 180, lahko tudi za 360 stopinj. Predstavitev se dogaja v 3D prostoru. S pomočjo aplikacije Prezi lahko ustvarjamo tako zabavne kot resnejše in elegantnejše predstavitve. Zopet imamo možnost izbire v orodjih. Predstavitev ni tako enolična, ampak je zelo razgibana. Že tako pritegnemo poslušalčevo pozornost. Prezi lahko uporabljamo tako na Windowsih in Mac OS-u, kot tudi na Linuxih in mobilnih sistemih Android. Prezi uporablja Flash vtičnik. Spletna aplikacija je brezplačna. Možno je kupiti Prezi licenco za ustvarjanje privatnih predstavitev. Vse predstavitve, ki jih izdelamo na brezplačni različici, se shranjujejo na spletu. Za brezplačno uporabo se je potrebno le registrirati in prenesti orodje. 5

14 3 Izdelava predstavitve s HTMLv5 3.1 Opis različnih tehnik Med iskanjem najboljše in najenostavnejše tehnike za izdelavo smo naleteli na kar nekaj kompleksnejših tehnik. Na voljo smo imeli naslednje možnosti: Izdelava predstavitve brez podlage Torej potrebno bi bilo celotno kodo napisati. Na spletu imamo kar nekaj podobnih kod in vodičev za izdelavo takšne predstavitve. Direktoriju se najprej izdela struktura. Izdela se: index.html, style.css, scripts.js, img in mapa Slides. Potem bi začeli urejati osnovni dokument, torej html. Potem bi uredili css dokument in JavaScript. Takšen način zahteva veliko znanja in delovanja HTML-ja in programiranja nasploh. Zavzame tudi veliko časa. Tudi mi smo preizkusili to tehniko [7]. Impress.js primer izdelave predstavitve s pomočjo že napisane kode To je orodje, s pomočjo katerega lahko naredimo podobno predstavitev kot s pomočjo aplikacije Prezi. Koda je v celoti napisana, mi si prenesemo datoteko in začnemo kodo spreminjati, kakor pač želimo. Predstavitev poteka v 3D-tehniki. Ponuja veliko načinov prehodov in animacij. Vsebuje tudi veliko vrtenja. Poudarjen je element HTMLv5, in sicer element Canvas. Ta se uporablja za izdelavo grafike s pomočjo JavaScript [2]. <canvas id="mycanvas" width="50" height="10" style="border:1px solid #000000;"> Primer 1: Primer Canvas v HTMLv5 datoteki [5] 6

15 <script> var c = document.getelementbyid("mycanvas"); var ctx = c.getcontext("2d"); ctx.fillstyle = "#FF0000"; ctx.fillrect(0,0,50,05); </script> Primer 2: Primer Canvas v JavaScript datoteki [5] Izdelava predstavitve s pomočjo spletnih aplikacij Splet nam ponuja veliko možnosti za izdelavo predstavitev in nam tako olajša delo. Znano je, da danes ni več veliko stvari, ki bile čisto nove ali popolnoma drugačne od drugih. Vse različice ponujenih medijskih vsebin so nadgrajene, večina si je podobnih. Tako je tudi pri ponujenih aplikacijah za izdelavo predstavitev in pri samih končnih prezentacijah. Nam najbolj priročni aplikaciji za izdelavo predstavitev sta bili strut.io in Slides. Obe aplikaciji vsebujeta predloge za predstavitve. Izdelava predstavitve s pomočjo teh aplikacij je zelo enostavna. Aplikaciji bolj kot na kodi temeljita na grafičnemu oblikovanju. Ne potrebujemo veliko znanja o tehnologiji HTMLv5, potrebujemo le dobro oko za vizualnost. Na voljo pa imamo tudi vpogled na celotno podobo predstavitve in urejanje kode. Slika 1 : Orodna vrstica aplikacije Strut 7

16 Z malo inovativnosti, iznajdljivosti in znanja lahko združimo oba načina izdelave - tehniko s kodo in izdelava predstavitev s pomočjo aplikacij ter na takšen način izdelamo izvrstno, prvorazredno predstavitev. Google Slides Template Tudi Google nam ponuja pomoč pri izdelavi takšne predstavitve. Koda se na prvi pogled ne zdi preveč težka [6]. <article class='smaller'> <h3> Simple slide with header and text (small font) </h3> <p> This is a slide with just text. This is a slide with just text. This is a slide with just text. This is a slide with just text. This is a slide with just text. This is a slide with just text. </p> <p> There is more text just underneath with a <code>code sample: 5px</code>. </p> </article> Primer 3: Izvorna koda za Google Slides Template 3.2 Načrtovanje Želeli smo, da bi bila našo predstavitev izdelali čim bolj enostavno, obenem pa bi vsebovala pestre elemente. Za začetek smo se malo poigrali s kodo. Ker pa bi pisanje kode vzelo kar precej časa, smo pobrskali še po drugih alternativnih možnostih. Vsebina tukaj ni bistvena, zato smo si izbrali preprosto temo. Želeli smo, da predstavitev zajema usklajenost barv, vsaj tri različne prehode med diapozitivi, video posnetek, fotografijo in več različnih animacij besedila. Izbrano rešitev smo kar se da najbolje izkoristili. 8

17 3.3 Predstavitev uporabljene aplikacije Po raziskavi in dobrem premisleku smo se odločili, da bomo našo predstavitev ustvarili s pomočjo aplikacije Strut (dosegljiva na strut.io (beta verzija)). Aplikacija ponuja tako grafično oblikovanje kot tudi oblikovanje s pomočjo kode. Vstavljanje slik, videov, povezav in besedila je preprosto. Loči nas le en klik od vstavljanja gradnikov predstavitve. Tudi barvo ozadja in pisave lahko izberemo iz knjižnice ali pa po meri. Besedilo lahko vedno premikamo in spreminjamo velikost pisave. Slika 2: Možnosti ozadja v aplikaciji Strut Velika prednost izdelave s pomočjo spletnih aplikacij je, da tudi če se nam med izdelavo brskalnik zapre ali pa se nam ugasne računalnik, mi pa smo jo slučajno pozabili izvoziti, predstavitev ostane. Brskalnik si zapomni in ohrani vse, kar smo ustvarili pred zapiranjem. Aplikacija pa ima veliko pomanjkljivost. Predstavitve ne gre izvoziti na takšen način, da bi kasneje le kliknili na ikono in bi se začela predstavitev. Izvaža se v formatu json. To je potrebno kasneje pretvarjati z JavaScript kodo. Kasneje smo se odločili za alternativno rešitev. Izbrali smo aplikacijo, ki je dosegljiva na naslovu slides.com. Tudi ta aplikacija je dokaj preprosta za izdelavo, poleg tega pa nam ponuja 9

18 še veliko več možnosti za oblikovanje kot Strut. Za uporabo te aplikacije se je potrebno registrirati. Mi smo se vpisali kar s Facebook računom. Tudi tukaj se predstavitev shranjuje sproti. Ustvarjamo lahko več predstavitev hkrati. Lahko si pomagamo s izvorno kodo. Tudi mi smo si pomagali z njo med ustvarjanjem predstavitve. Ponuja predvsem enostavno vstavljanje slik. Imamo tudi možnost opomb. Zanimivo in precej priročno je to, da je orodna vrstica postavljena levo navpično. Med diapozitivi nam ponuja prehode v levo in desno. 3.4 Predstavitev delovanja predstavitve ustvarjene s htmlv5 Za začetek smo si izbrali barvo ozadja. Potem smo nadaljevali z oblikovanjem diapozitivov. V predstavitev smo vključili fotografije, video posnetke in spletno stran. Na izbiro smo imeli več različnih prehodov med diapozitivi. Izbrali smo prehode po svojem okusu. Želeli smo, da je čim bolj razgibano. 3.5 Testiranje Predstavitev deluje po pričakovanjih. Premikanje diapozitivov je potrebno izvesti ročno, in sicer s pritiskom na levi gumb miške ali pa z uporabo navigacijskih tipk na tipkovnici. Tudi povezave, ki smo jih vstavili v predstavitev, delujejo po pričakovanjih in se po odprtju vrnejo na trenutni diapozitiv. Po tem, ko smo aplikacijo shranili, smo se želeli še sami prepričati, na katerih napravah in operacijskem sistemu lahko to odpiramo. Odprli smo jo na Windowsih in Linuxu s pomočjo brskalnika Chrome. Odprli smo jo tudi na Androidu, tudi s pomočjo brskalnika Chrome. 10

19 3.6 Težave in rešitve Pričakovali smo malo preveč od aplikacij Struit in Slides. Aplikaciji ne ponujata možnosti animacijskega besedila. Res je, da imata elegantne prehode, vendar to ne zadostuje našim prvotnim željam. Pojavila se je tudi težava pri shranjevanju predstavitve, ki so bile ustvarjenje z aplikacijo Struit. Omenili smo že, da se vse shranjuje sproti, tudi če mi pozabimo, torej se nič ne zbriše. Pri izvozu datoteke se nam je predstavitev shranila kot format json. Po odprtju te datoteke s pomočjo json urejevalnika smo ugotovili, da je to koda in da jo lahko še spreminjamo. Aplikacijo lahko shranimo tudi kot zip datoteko, vendar po prenosu datoteka ne obstaja. Slika 3: Izvoz predstavitve v aplikaciji Strut Na voljo imamo tudi prenos celotne predstavitve v html obliki. Tudi tukaj pride do težav, saj se shrani ne le predstavitev, temveč tudi aplikacija, pa še to tako, da ima aplikacija v offline obliki dve orodni vrstici. Z aplikacijo Slides ni bilo drugih težav. 11

20 4 Primerjava z izpostavitvijo slabosti in prednosti HTMLv5 napram PowerPoint in Prezi POWERPOINT PowerPoint nam že pri samem odpiranju ponuja predloge za oblikovanje predstavitev. Izbrane so že pisava, barva, postavitev... Če pa imamo internetno povezavo, imamo na voljo še več predlog, sicer pa imamo že veliko predlog v samem programu brez internetne povezave. Ozadje ter pisavo lahko naredimo preprosto po želji. Naredi se avtomatsko ob kliku. Za ozadje pa lahko uporabimo tudi poljubno sliko. PowerPoint se po razvrstitvi orodne vrstice ne razlikuje kaj preveč od ostalih Microsoftovih programov. Slika 4: Orodna vrstica PowerPoint Poleg osnovnih stvari za pisanje besedila nam ponuja tudi pomoč pri vstavljanju grafikonov, simbolov, slik ter posnetkov. Kot vsi Microsoftovi programi nam tudi PowerPoint ponuja možnost pripombe. Ponuja nam veliko prehodov med diapozitivi, ki se lahko premikajo samodejno. Čas si lahko nastavimo sami. Predstavitev naredijo pestro tudi animacije. Nastavimo jih lahko ob vhodu in izhodu besedila. Na voljo imamo, da sami določimo, kdaj se bo animacija začela predvajati. le ob določenem času ali tudi ob kliku. PowerPoint nam ponuja tudi orodja za risanje oblik (npr. okrog besedila lahko naredimo barvne okvirje). Tako bo imelo določeno besedilo barvno ozadje z okvirjem. V predstavitve lahko vključujemo tudi hiperpovezave, bodisi na drugi diapozitiv, do določene mape v računalniku ali na spletno stran. Na voljo imamo gumb hiperpovezave, s pomočjo katerega določimo povezavo in pa 12

21 gumb dejanje, ki pomaga urediti nastavitve te povezave. Torej, kdaj in kako se bo pojavila povezava. To imamo na voljo ob kliku ali pa ob preletu z miško. Program pa nam ponuja tudi predvajanje zvoka, medtem ko se izvaja sama hiperpovezava. Na voljo imamo tudi snemanje ozadja med samim delom. To je predvsem koristno pri izdelavi različnih video navodil za pomoč pri programu. Veliko možnosti nam ponuja tudi za predvajanje same diaprojekcije. Ponuja nam dobro pripravo na predstavitev. Vadimo lahko tudi čas predstavitve. Slika 5: Zavihek Diaprojekcija v PowerPointu Microsoft PowerPoint nam olajša delo tudi s videoposnetki. Ponuja nam popravek barve, oblike ter obrobe vstavljenega videa. Na voljo imamo postavitev videa v ozadje ali v ospredje (odvisno od pomembnosti oz. glede na besedilo oz. temo). V tem programu lahko video tudi režemo, dodajamo zatemnitve in otemnitve. Podobno kot pri video posnetkih je tudi pri fotografijah. Spreminjamo lahko barvo slike, obliko, okvirje, nastavimo lahko, kako in kdaj se bo pojavila. Dodamo lahko tudi celoten album (seveda se ta s predstavitvijo poveže s pomočjo hiperpovezav). 13

22 HTMLv5 HTMLv5 nam prinaša kar nekaj novosti, veliko od njih je olajšalo delo pri izdelavi predstavitev. Najprej bomo analizirali nekaj osnovnih novosti, potem pa aplikacije, ki olajšajo delo s HTMLv5. [13] AVDIO <audio controls> <source src="zvok.mp3" controls autoplay loop > </audio> Primer 4: Izvorna koda za avdio Pojasnilo izvorne kode: na strani se bo pojavil majhen predvajalnik. Autoplay poskrbi, da se zvok začne predvajati samodejno, loop pa, da se zvok predvaja zaporedno. VIDEO Video značko vsebuje tudi naša predstavitev. Včasih, ko še HTMLv5 ni obstajal, so morali prekiniti predstavitev, jo zapreti in odpreti brskalnik, da so lahko pokazali video. Danes imamo vse v enem. Spletne strani so tako bolj razgibane in ponujajo več stvari naenkrat. Primer izvorne kode: <video width="550" height="300" autoplay> <source src="posnetek.mp4" type="video/mp4"> </video> Primer 5: Izvorna koda za video Zapis v navedeni kodi omogoča, da se posnetek začne predvajati samodejno. Navedena je tudi velikost okvirja posnetka. [13] 14

23 CANVAS Canvas je kot platno z mejo. S pomočjo JavaScripta se izrisujejo oblike (primer spodaj). Element se uporablja za igre, animacije, grafikone. Na strani je lahko več canvas elementov. Če dodamo vsakemu id atribut, lahko do njega dostopamo kot do katerega koli drugega elementa. Najpomembnejši del kode v JavaScript datoteki izgleda takole: var a_canvas = document.getelementbyid("a"); Primer 6: Pomembne del kode v JavaScript datoteki ORODJA V APLIKACIJAH Najprej smo ustvarili predstavitev v aplikaciji Strut in ker smo imeli probleme pri izvozu predstavitve, smo izdelali predstavitev s pomočjo aplikacije Slides. Naredili bomo analizo orodij obeh aplikacij. Aplikacije ponujajo vstavljanje besedila, slik in posnetkov s pomočjo klika na ikono za vstavljanje multimedijev. Tudi do spreminjanja barv, pisave ali slik ozadja nas loči le ne klik. Slides nam ponuja še možnost spreminjanja platna/podlage (podlaga, na kateremu se premikajo diapozitivi). [11] [10] 15

24 Slika 6: Orodna vrstica v aplikaciji Slides Pri aplikacji Slides ustvarjamo prehode sproti. Na desni strani zaslona in pod trenutnim diapozitivom imamo dva križa. Če želimo, da se naslednji pozitiv prikaže kot listanje, kliknem desno, če želimo, da se diapozitiv prikaže od spodaj, kliknemo spodnji križ. Potek si moramo sproti zapomniti ali pa zabeležiti. Namreč, tudi če imamo izdelan načrt izdelave (da se prikaže diapozitiv iz desne, nato od spodaj navzgor in še enkrat iz desne), ni nujno, da bo predstavitev tako tudi potekala. Mi vodimo predstavitev. Slides pa ima omogočeno, da lahko po prikazu diapozitiva iz desne prikaže diapozitiv še enkrat iz desne namesto od spodaj, in potem nastane zmeda. APLIKACIJA PREZI Kot pri vsaki aplikaciji in programu za izdelavo predstavitev, tudi pri programu Prezi ju najprej izberemo predlogo. Prezi nam ponuja teme, ki so jih ostali uporabniki izbirali nazadnje in tiste, ki so najpopularnejše. Izbiramo lahko tudi več predlog iz knjižice ali uporabimo prazno stran. Predstavitev začnemo ustvarjati tako, da se postavimo na enega izmed diapozitivov ter začnemo vstavljati elemente. Prezi nam ponuja tudi možnost vstavljanja glasbe, fotografij, posnetkov. Imamo tudi možnosti posnetka»voice over«. Kadarkoli si lahko pogledamo predogled in vidimo, kako izgleda prestavitev. Spreminjamo lahko tudi barvo oz. fotografijo ozadja, kjer se diapozitivi premikajo. 16

25 5 Analiza predstavitev s HTMLv5, PowerPointom in aplikacijo Prezi IZDELAVA Naredili smo podrobno analizo izdelave in predstavitve s Htmlv5, PowerPointom in programom Prezi. Dodali smo tudi primerjavo aplikacije Strut. Pri izdelavi predstavitev s pomočjo PowerPointa smo najprej izbrali predlogo in temo. Predloga je bila kar prazna stran. Pri aplikaciji Prezi smo izbrali predlogo, ki nam omogoča premikanje diapozitivov navzgor po narisani gori. V aplikaciji Slides smo, tako kot pri PowerPointu, začeli s prazno stranjo. TEMA IN OZADJE Začeli smo seveda s prazno stranjo. Pri predstavitvi s HTMLv5 in PowerPointom smo najprej izbrali temo in stil pisanja, medtem ko nam Prezi, najprej ponuja način prehodov med diapozitivi in barvo ozadja in predstavitve- Temo in barvo lahko seveda pri vseh treh spreminjamo tudi med predstavitvijo. Način izdelave celotne predstavitve je seveda odvisen od narave predstavitve, torej kaj in komu bomo predavali. Pri vseh treh smo najprej izdelali prvo stran in naslov. Vsem smo dodali sliko ozadja in se malo poigrali z naslovom. To nam ni delalo problemov, kajti vsi imajo podoben način vstavljanja. Pri PowerPointu smo za ozadje nastavili sliko. Pri spletni aplikaciji Slides je na desni strani navpična vrstica z možnostmi oblikovanja, tam najdemo tudi možnosti za spreminjanje ozadja trenutnega ali pa vseh diapozitivov. Ozadja ostalih diapozitivov nismo spreminjali. Aplikacija Strut nam omogoča le spreminjanje pisave in ozadja, ima pa to dobro lastnost, da lahko poleg barve diapozitiva spreminjamo še barvo oz. fotografijo ozadja, po katerem se bodo diapozitivi premikali, torej površino, kar smo tudi storili. Izbrali smo si tudi močne kontrastne barve. 17

26 PISAVA Želeli smo, da je prva stran malo bolj pestra od ostalih, zato smo se poigrali z obliko naslova. V vsakem programu smo naslovu dodali okvir in polnilo okvirja. Aplikacija Slides nam ponuja ti dve izbiri (seveda poleg osnovnih možnosti, kot so spreminjanje barv pisav, velikosti itd.). Prezi ne omogoča okvirjev, ampak nam ponuja označevalnik besedila, katerega izgled je na koncu takšen, kot bi besedilo obarvali z markerjem. Na izbiro imamo osnovne možnosti in že shranjene teme pisave, ustvarjene pod napisi Title, Subtitle, Body. Največ nam tukaj omogoča PowerPoint. Poleg vseh možnosti, ki nam jih ponujata Prezi in Slides, nam ponujata orodje za risanje. Torej, naslov lahko na koncu oblikujemo tako, da bo izgledal kot fotografija, lahko ga postavljamo v ozadje in ospredje, lahko ga celo pretvorimo v grafikon. Strut pa nam ponuja le spreminjanje barve, velikosti in položaj pisave. V aplikaciji Strut in PowerPointu lahko napis zavrtimo za 180 stopinj, v aplikacijah Slides in Prezi tega ne moremo. Seveda smo se tudi tukaj poigrali s postavitvijo naslovov. POTEK DIAPOZITIVOV Kot smo že omenili, pri aplikaciji Prezi si potek diapozitivov izberemo že na začetku. Izbrali smo način premika, pri katerem dobimo občutek, kot bi hodili po strmi poti navzgor. Pri aplikaciji Slides smo izbrali potek desno, gor, desno, gor v enakem vrstnem redu skozi celotno predstavitev, da se ne bi vmes zmedli. PowerPoint nam prehode omogoča skozi celotno izdelavo, vendar večina izdelovalcev, vključno z nami, to stori na koncu. Na voljo nam je okrog 50 prehodov. PowerPoint nam ponuja tudi možnost premika diapozitiva brez naše pomoči, torej brez klika z miško. Nastavimo si čas npr. 20 sekund, odvisno od predpostavljene dolžine govorjenja. Ob premiku se lahko predvaja tudi glasba. Določimo lahko tudi trajanje zvoka. Poleg določitev prehoda imamo na voljo še možnost učinka, da prehod še bolj izpilimo. Za vsak diapozitiv smo izbrali drugačen prehod in sicer premik ob kliku z miško, brez glasbe. 18

27 VSTAVLJANJE MULTIMEDIJE Vsi programi nam ponujajo možnosti, da v predstavitve dodamo fotografije, posnetke in povezave. Vsem smo dodali fotografije in posnetke. Razlika je le v dodajanju in predvajanju posnetkov. Pri aplikaciji Slides se posnetek začne predajati ob kliku. Naredi se preusmeritev na stran, ki je vir posnetka, v našem primeru je to Youtube. Posnetek se ne kaže na samem diapozitivu, povezali smo ga skupaj s sliko. Torej se začne predvajati ob kliku na sliko. Tukaj smo si pomagali z izvorno kodo za vstavljanje videa. <video class="video"> <source src=" </video> Primer 7: Izvorna koda za video zapis v naši predstavitvi Način vstavljanja le s klikom nam je delal probleme, zato smo se odločili, da ne bomo odkrivali tople vode, ampak bomo video vstavili kar s kodo. Odprli smo možnost, kjer nam aplikacija prikaže uporabljeno kodo ter vstavili video na primeren prostor. [10] Strut zajema posnetek na določenem diapozitivu in se ne preusmeri na spletno stran posnetka. Prezi je imel najlažje vstavljanje videoposnetkov. Povezavo smo le prilepili v okence. V predstavitvi se video kaže na diapozitivu in je brez preusmeritve. PowerPoint ima podobno tehniko kot Prezi. Ponovno smo le prilepili povezavo posnetka. Tudi na končni predstavitvi se posnetek kaže na diapozitivu in tudi tukaj brez preusmeritve. ANIMACIJE Kot smo že omenili v predstavitvi orodij, animacijo besedila ponuja le PowerPoint. Za vsak nov odstavek in naslov smo uporabili novo animacijo. 19

28 IZVOZ Pri izvozu pa se je pri nekaterih aplikacijah zalomilo. Spletna aplikacija Strut nam ne omogoča html ali zip izvoza. Predstavitev je ostala le na spletni strani, pa še tam ni shranjena za daljši čas, saj jo lahko sproti spreminjamo. Izvoziti je možno mapo z izvorno kodo, s končnico json. Json je JavaScript zapis predmeta. Da bi nadaljevali s to mapo, bi morali najprej ta zapis spremeniti v JavaScript. Splet nam ponuja veliko takšnih pretvornikov. Kljub temu smo se odločili poiskati alternativno rešitev. Našli smo boljšo. Poslužili smo se aplikacije Slides. V naši brezplačni različici smo predstavitev lahko shranili le v html obliki, ali pa bi jo lahko izvozili v reval.js, torej bi lahko celotno predstavitev dobili v izvorni kodi. Zadostoval nam je že dokument html. Predstavitev narejeno z aplikacijo Prezi smo najprej shranili na spletu v naš Prezi račun. Predstavitev smo ohranili kot zasebno. Kasneje smo ga jo izvozili kot PDF dokument. Najlažje shranjevanje pa je PowerPointovo. Dva klika sta nas ločila od shranjenega celotnega dokumenta na disk in Dropbox. Omogočeno smo imeli sprotno shranjevanje na Dropbox, če bi slučajno prišlo do nenadnega zaprtja dokumenta. KONČNA PREDSTAVITEV Ker predstavitve, narejene s pomočjo aplikacije/programa Struit, nismo mogli izvoziti, jo lahko predvajamo le na osebnem računalniku in v tistem brskalniku, v katerem smo izdelali predstavitev. Slides nam omogoča predvajanje na vseh napravah, ki imajo nameščen brskalnik. Potrebe po internetni povezavi ni. Prezi originalno predstavitev lahko odpiramo kjerkoli, kjer je nameščen brskalnik in omogočena internetna povezava. Predstavitev PowerPoint smo odprli na Windows in na operacijskem sistemu Android. Na Linuxih žal predstavitve nismo mogli izvajati. Predstavitve vseh smo izvedli le s klikom na gumba Začni ali pa Predogled. 20

29 6 Sklep Omenjali smo že, da je bil namen diplomskega dela izdelava predstavitev s pomočjo tehnologije HTMLv5 ter narediti primerjavo z programom PowerPoint. Naj še dodam, da je bil namen tudi raziskati in osvojiti aplikacijo, ki bi bila lahka za učenje, izdelavo, produkt bi bil dostopen na vseh operacijskih sistemih. To smo tudi dosegli. Našli smo primerno aplikacijo, ki jo lahko na osnovni ravni osvoji vsak. Aplikacija Slides nam prihrani pretvorbo dokumentov Microsoft Office v Libra Office. Če pa naš operacijski sistem podpira Microsoftove programe in želimo imeti vrhunsko predstavitev, vsekakor predlagamo, da še vedno uporabimo star, dobri PowerPoint. Seveda je potrebno slediti trendom in si programsko opremo posodabljati. V dispoziciji smo navedli, da želimo v diplomskem delu zavreči oz. potrditi naslednje hipoteze: H1: Izdelava predstavitev s pomočjo HTMLv5 je zahtevnejša kot izdelava s pomočjo PowerPointa ali aplikacije Prezi. H2: Med orodji PowerPointa, Prezija in HTMLv5 je razlika. H3: Pri izdelavi grafične podobe s pomočjo HTMLv5 imamo več možnosti kot pri PowerPointu in Preziju. Prvo hipotezo, ki trdi, da je predstavitev s pomočjo HTMLv5 zahtevnejša kot izdelava s pomočjo PowerPointa ali Prezija, bi ovrgli. Predstavitev smo izdelovali s pomočjo aplikacij Slides in Strut, ki sta bili na osnovnošolski ravni. Obe imata osnovne funkcije. Aplikaciji bi lahko primerjali z programom za risanje Slikar. Če pa bi se podali v izdelavo predstavitve s kodo, pa bi bila izdelava težja. V tem primeru bi bilo potrebno bolj podrobno znanje programiranja v JavaScript jeziku. Tudi pri naših uporabljenih aplikacijah je bilo uporabno, da smo poznali nekaj osnov programskega jezika JavaScript in pa HTMLv5. Ni pa nujno potrebno, da to znamo, tudi če se lotimo izdelave predstavitve s HTMLv5. Pri drugi hipotezi smo predvidevali, da obstaja razlika med orodji PowerPointa, Prezija in HTMLv5. Tokrat bomo hipotezo potrdili. Namreč, razlika je v načinih izdelave, vloženem trudu in ponujenih orodjih. Pri analizi orodij smo ugotovili, da ima PowerPoint mnogo več 21

30 možnosti in orodij kot Prezi in HTMLv5. Res je, da lahko predstavitev, ustvarjeno s HTMLv5, predvajamo kjerkoli, kjer imamo na voljo brskalnik, vendar je težje priti do končne predstavitve, ki bi bila podobna predstavitvi v PowerPointu. Poleg tega, če bi izdelovali predstavitev v HTMLv5 s pomočjo izvorne kode, sploh ne bi našli podobnosti med orodji. Tretja hipoteza se je glasila: Pri izdelavi grafične podobe s pomočjo HTML5 imamo več možnosti kot pri PowerPointu in Preziju. To hipotezo bomo ovrgli. Kot smo lahko videli skozi analizo in že samo izdelavo, nam PowerPoint ponuja nešteto možnosti postavitve pisave, fotografij, tisoče različnih tem, tem po svoji izbiri Izdelava s pomočjo aplikacij za HTMLv5 nas tukaj omejuje. Nimamo širokega nabora stvari. Tudi, če bi predstavitev izdelovali s pomočjo kode, bi vseeno zmagala PowerPoint in Prezi. Naj ne pozabimo omeniti, koliko in kakšne prehode nam ponuja Prezi. Dosegli smo tudi zadane cilje. Spoznali in analizirali smo tehnologijo HTMLv5 za izdelavo predstavitev Kot smo že omenili, našli smo za oblikovanje lahke aplikacije, s katerimi lahko ustvarimo kakovostno predstavitev v kratkem času. Ugotovili smo, da aplikacije na prvi pogled ne izgledajo, da bi bile namenjene ustvarjanju predstavitev s tehnologijo HTMLv5. Med izdelavo smo imeli občutek, kot da ustvarjamo z zelo staro različico PowerPointa ali pa s programom Slikar. Izdelali smo tri oz. štiri predstavitve. Kar dve s pomočjo HTMLv5, eno s pomočjo PowerPointa in eno s pomočjo aplikacije Prezi. Vsaka izdelava nam je vzela približno enako količino časa. Z novimi aplikacijami smo se malo poigrali in jih raziskali pred začetkom resne izdelave predstavitve. Izvedli smo tudi primerjavo med vsemi predstavitvami. Natančneje smo jih analizirali, tako da lahko vsak opazi, kaj je prednost in kaj slabost določene aplikacije oz. programa. Laikom, ki želijo ustvarjati s pomočjo tehnologije HTMLv5, bi priporočali aplikacijo Slides, saj jo osvojimo dokaj hitro, ponuja pa široko paleto možnosti. 22

31 7 Literatura in viri [1]. Pristovnik U. Razvoj igre s HTML5. Fakulteta za elektrotehniko, računalništvo in informatiko [24. junij 2015] [2]. How to create Presentation Slides with HTML and CSS. Dosegljivo na: [24. junij 2015] [3]. HTML5. Wikipedia. Dosegljivo na: [5. julij 2015] [4]. HTML5 tools. HTML5 game development tools. Dosegljivo na: [6. julij 2015] [5]. HTML5 Canvas. W3schools. Dosegljivo na: [5. julij 2015] [6]. Html5slides. Google slide template. Dostopno na: [28. junij 2015] [7]. Impress. Dosegljivo na: _medium=twitter&utm_campaign=buffer [24. junij 2015] [8]. Ocepek G. Uporaba HTML5 in CSS3 v spletnih kvizih. Fakulteta za računalništvo in informatiko, Dosegljivo na: [28. junij 2015] 23

32 [9]. Presentation slides using HTML and CSS transitions. Bahmutov Calepin. Dostopno na: [24.junij 2015] [10]. Slides. Dosegljivo na: [15. julij 2015] [11]. Strut. Dosegljivo na [20. julij 2015] [12]. Šola programiranja. HTML5. Dosegljivo na: [28. junij 2015] [13]. W3schools. Dosegljivo na: [24. junij 205] [14]. Webdirections. Dosegljivo na: [29. julij 2015] 24

33 7. Priloge Izjava o avtorstvu Izjava o ustreznosti zaključnega dela Izjava o istovetnosti tiskane in elektronske verzije zaključnega dela in objavi osebnih podatkov diplomantov 25