univerza v mariboru fakulteta za elektrotehniko, · 2017. 11. 28. · ustvarjanje predstavitev s...

UNIVERZA V MARIBORU

FAKULTETA ZA ELEKTROTEHNIKO,

RAČUNALNIŠTVO IN INFORMATIKO

Silvija Repnik

USTVARJANJE PREDSTAVITEV S POMOČJO

HTMLv5

Diplomsko delo

Maribor, avgust 2015

USTVARJANJE PREDSTAVITEV S POMOČJO

HTMLv5

Diplomsko delo

Študentka: Silvija Repnik

Študijski program: Univerzitetni študijski program

Medijske komunikacije

Smer: Medijska produkcija

Mentor: doc. dr. Marko Hölbl, univ. dipl. inž. rač. in inf.

Lektorica: Eva Ravlen, univ. dipl. prof. slov.

USTVARJANJE PREDSTAVITEV S POMOČJO HTMLv5

II

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.


III

Ustvarjanje predstavitev s pomočjo HTMLv5

Ključne besede: HTMLv5, predstavitev, PowerPoint, Prezi, Slides, Strut

UDK: 004.915(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.


IV

Creation of presentation using HTMLv5

Key words: HTMLv5, presentation, PowerPoint, Prezi, Slides, Strut

UDK: 004.915(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.


V

KAZALO VSEBINE

1 Uvod .............................................................................................................................................. 1

1.1 Opredelitev problema ................................................................................................................. 1

1.2 Cilji in teze diplomskega dela ...................................................................................................... 2

1.3 Predpostavke in omejitve ............................................................................................................ 2

1.4 Metode raziskovanja ................................................................................................................... 3

2 Orodja za predstavitve .................................................................................................................. 4

2.1 Tehnologija htmlv5 ...................................................................................................................... 4

2.2 Program powerpoint ................................................................................................................... 5

2.3 Aplikacija prezi ............................................................................................................................ 5

3 Izdelava predstavitve s HTMLv5 ........................................................................................................ 6

3.1 Opis različnih tehnik .................................................................................................................... 6

3.2 Načrtovanje ................................................................................................................................. 8

3.3 Predstavitev uporabljene aplikacije ............................................................................................ 9

3.4 Predstavitev delovanja predstavitve ustvarjene s htmlv5 ........................................................ 10

3.5 Testiranje ................................................................................................................................... 10

3.6 Težave in rešitve ........................................................................................................................ 11

4 Primerjava z izpostavitvijo slabosti in prednosti HTMLv5 napram PowerPoint in Prezi ............. 12

5 Analiza predstavitev s HTMLv5, PowerPointom in aplikacijo Prezi ............................................ 17

6 Sklep ............................................................................................................................................ 21

7 Literatura in viri ........................................................................................................................... 23


VI

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....................................................................................... 11

Slika 4: Orodna vrstica PowerPoint .................................................................................................... 12

Slika 5: Zavihek Diaprojekcija v PowerPointu ................................................................................... 13

Slika 6: Orodna vrstica v aplikaciji Slides .......................................................................................... 16


VII

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 ......................................................................................................... 14

Primer 5: Izvorna koda za video ......................................................................................................... 14

Primer 6: Pomembne del kode v JavaScript datoteki .......................................................................... 15

Primer 7: Izvorna koda za video zapis v naši predstavitvi .................................................................. 19


1

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.


2

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.


3

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.


4

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] .


5

2.2 Program powerpoint

PowerPoint je Microsoftova programska oprema za izdelavo predstavitev. Najnovejša verzija

paketa je 15., imenuje pa se Office 2013. 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.


6

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]


7

<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


8

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.


9

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


10

š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.


11

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.


12

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


13

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).


14

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]


15

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]


16

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.


17

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.


18

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.


19

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="https://www.youtube.com/watch?v=kmgogCfGm8E">https://www.youtube.com/watch

?v=kmgogCfGm8E

</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.

https://www.youtube.com/watch?v=kmgogCfGm8E

https://www.youtube.com/watch?v=kmgogCfGm8E


20

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.


21

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č


22

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.


23

7 Literatura in viri

[1]. Pristovnik U. Razvoj igre s HTML5. Fakulteta za elektrotehniko, računalništvo in

informatiko. 2015. [24. junij 2015]

[2]. How to create Presentation Slides with HTML and CSS. Dosegljivo na:

http://code.tutsplus.com/tutorials/how-to-create-presentation-slides-with-html-and-css--net-

19870 [24. junij 2015]

[3]. HTML5. Wikipedia. Dosegljivo na:

https://en.wikipedia.org/wiki/HTML5. [5. julij 2015]

[4]. HTML5 tools. HTML5 game development tools. Dosegljivo na:

http://www.html5gamedevelopment.com/html5-tools [6. julij 2015]

[5]. HTML5 Canvas. W3schools. Dosegljivo na:

http://www.w3schools.com/html/html5_canvas.asp [5. julij 2015]

[6]. Html5slides. Google slide template. Dostopno na:

https://code.google.com/p/html5slides/source/browse/trunk/template/index.html

[28. junij 2015]

[7]. Impress. Dosegljivo na:

https://github.com/impress/impress.js?utm_content=buffer4bb8d&utm_source=buffer&utm

_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, 2011. Dosegljivo na:

http://eprints.fri.uni-lj.si/1291/1/Goran_Ocepek_-_diplomsko_delo.pdf

[28. junij 2015]

http://code.tutsplus.com/tutorials/how-to-create-presentation-slides-with-html-and-css--net-19870

http://code.tutsplus.com/tutorials/how-to-create-presentation-slides-with-html-and-css--net-19870

https://en.wikipedia.org/wiki/HTML5

http://www.html5gamedevelopment.com/html5-tools

http://www.w3schools.com/html/html5_canvas.asp

https://code.google.com/p/html5slides/source/browse/trunk/template/index.html

https://github.com/impress/impress.js?utm_content=buffer4bb8d&utm_source=buffer&utm_medium=twitter&utm_campaign=Buffer

https://github.com/impress/impress.js?utm_content=buffer4bb8d&utm_source=buffer&utm_medium=twitter&utm_campaign=Buffer

http://eprints.fri.uni-lj.si/1291/1/Goran_Ocepek_-_diplomsko_delo.pdf


24

[9]. Presentation slides using HTML and CSS transitions. Bahmutov Calepin. Dostopno na:

http://bahmutov.calepin.co/presentation-slides-using-html-and-css-transitions.html

[24.junij 2015]

[10]. Slides. Dosegljivo na:

http://slides.com/ [15. julij 2015]

[11]. Strut. Dosegljivo na

http://strut.io/editor/ [20. julij 2015]

[12]. Šola programiranja. HTML5. Dosegljivo na:

http://sola-programiranja.osik.si/html5/predstavitev [28. junij 2015]

[13]. W3schools. Dosegljivo na:

http://www.w3schools.com/ [24. junij 205]

[14]. Webdirections. Dosegljivo na: http://www.webdirections.org/tools/

[29. julij 2015]

http://bahmutov.calepin.co/presentation-slides-using-html-and-css-transitions.html

http://slides.com/

http://strut.io/editor/

http://www.w3schools.com/

http://www.webdirections.org/tools/


25

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

univerza v mariboru fakulteta za elektrotehniko, · 2017. 11. 28. · ustvarjanje predstavitev s...

Documents