SVEUČILIŠE U ZAGREBU

FAKULTET ORGANIZACIJE I INFORMATIKE

VARAŽDIN

Slavko Bilješko

IZRADA GAMING PORTALA U NOVIM WEB

TEHNOLOGIJAMA

ZAVRŠNI RAD

Varaždin, 2014.

SVEUČILIŠE U ZAGREBU

FAKULTET ORGANIZACIJE I INFORMATIKE

VARAŽDIN

Slavko Bilješko

Redoviti Student

Matični broj:39351/10-R

Studij: Primjena informacijske tehnologije u poslovanju

IZRADA GAMING PORTALA U NOVIM WEB TEHNOLOGIJAMA

ZAVRŠNI RAD

Mentor: Dr.sc. Tihomir Orehovački

Varaždin, rujan 2014.

I

Sadržaj 1. Uvod ................................................................................................................................................ 1

2. HTML 5 ............................................................................................................................................ 3

2.1. Novosti u odnosu na HTML 4 .................................................................................................. 4

2.1.1. Sintaksa ............................................................................................................................ 4

2.1.2. Novi elementi .................................................................................................................. 5

2.1.3. Crtaća površina <canvas> ................................................................................................ 7

2.1.4. Umetanje video zapisa na stranicu ................................................................................. 7

2.1.5. Geolokacija ...................................................................................................................... 9

2.1.6. HTML5 Storage ................................................................................................................ 9

3. CSS3 (Cascading Style Sheets 3) .................................................................................................... 10

3.1. Selektori ................................................................................................................................. 11

3.2. Dodavanje sjene tekstu ......................................................................................................... 12

3.3. Prozirnost elemenata ............................................................................................................ 12

3.4. Dodavanje sjena objektima ................................................................................................... 13

3.5. Zaobljeni rubovi ..................................................................................................................... 14

3.6. Transformacije ....................................................................................................................... 15

3.7. Tekst u više stupaca ............................................................................................................... 15

4. Hack ............................................................................................................................................... 17

4.2. Značajke Hack-a .......................................................................................................................... 17

4.2.1. Type annotations ................................................................................................................. 18

4.2.1.2. Tipovi podataka koje možemo pred-bilježiti .................................................................... 18

4.3. Generics ...................................................................................................................................... 19

4.3.1. Pisanje klasa pomoću generics ............................................................................................ 20

4.2.3. Nullable................................................................................................................................ 20

4.2.4. Lambda epressions .............................................................................................................. 22

4.3. HACK i PHP .................................................................................................................................. 23

5. Polymer ......................................................................................................................................... 24

5.1. „Filozofija“ Polymer-a ............................................................................................................ 24

5.2. Gdje se nalazi polymer .......................................................................................................... 24

5.3. Načini rada s polymerom....................................................................................................... 25

II

5.3.1 Korištenje pred definiranih elemenata ................................................................................ 26

5.3.2 Kreiranje elemenata ............................................................................................................. 26

6. Bootstrap 3.0 ................................................................................................................................. 28

6.1 Noviteti ........................................................................................................................................ 28

6.1.1. Grid ................................................................................................................................ 28

6.1.2. Mobile first .................................................................................................................... 28

6.1.3. Glyphicon font ............................................................................................................... 29

6.2. Prednosti i nedostaci ............................................................................................................. 29

7. Praktični rad: Izrada gaming portala ............................................................................................. 30

7.1. Odabir tehnologije izrade praktičnog rada ............................................................................ 30

7.2. Odabir tematike praktičnog rada .......................................................................................... 30

7.2.1. Izrada predloška ............................................................................................................ 30

7.2.2. Izrada indeksne stranice ................................................................................................ 31

8. Zaključak ........................................................................................................................................ 35

9. Literatura ....................................................................................................................................... 37

1

1. Uvod

Internet u današnjici igra veliku ulogu u životu kako prosječnog stanovnika tako i svake

organizacije, neovisno da li se radi o poslovnoj, vladinoj ili nekoj trećoj. On predstavlja važan

segment života bilo kojeg od navedenih korisnika. Ovu činjenicu najlakše je provjeriti na sebi

samima odstranivši se od interneta na neko vrijeme. Tim činom uvidjet ćemo da je život bez

njega u moderniziranom društvu nezamisliv. Kada se to sve pretoči u broj korisnika koji su na

neki način vezani za internet, postavlja se pitanje mogućnosti opskrbe kvalitetnim rješenjima

koja će zadovoljiti većinu korisničkih zahtjeva. Ovdje će se naglasak biti na izradu web

stranica što je u suštini tematika ovog rada. Svaka djelatnost koja se želi obavljati putem

interneta zahtjeva postojanje nekog web mjesta, neovisno radi li se o poslovanju, educiranju

ili zabavi. Kako bi se korisnički zahtjevi mogli kvalitetno ispuniti potrebno je naći adekvatno

rješenje kojim će to biti omogućeno. Stalna potreba za inovativnošću web tehnologije tjera na

konstantan napredak istih. O njihovim mogućnostima uvelike ovisi ispunjavanje svih

korisničkih zahtjeva. Prilikom njihovog razvoja veoma je bitno obratiti pažnju na tipove

korisnika koji će se s tom tehnologijom susretati, jer između dva tipa korisnika može postojati

ogromna razlika u zahtjevima. Stoga je od izrazite važnosti uvijek imati na umu kome je ta

tehnologija namijenjena.

Na primjerima HTML-a i CSS-a ne radi se, u potpunosti, o novim tehnologijama nego

samo o novim inačicama. No iako one ne zaokreću svijet web dizajna i programiranja za 180

stupnjeva ne treba ih uzimati „zdravo za gotovo“ nego prvo preispitati moć njihovog

napretka. Značaj koji će HTML 5 unijeti u taj svijet već se nazire njegovim potiskivanjem

FLASH-a kao rješenja za animacije na web stranicama. Od novih mogućnosti CSS-a očekuje

se da će ugasiti potrebu za određenih alatima koji su se koristili za dobivanje određenih

efekata kod teksta ili nekog elementa. Još jedna veoma zanimljiva tehnologija kojom ćemo se

baviti u ovome radu je programski jezik Hack za kojeg se nagađa da bi zapravo trebao biti

„PHP++“. Tim nazivom se implicira na to kako će Hack predstavljati nadopunjenu i

efikasniju verziju PHP-a na čijoj se sintaksi zapravo on i bazira. Polymer predstavlja

tehnologiju o kojoj se relativno malo zna, a izrazito mnogo očekuje. Radi se o biblioteci koja

bi kreiranje bilo kojeg elementa web stranice trebala učiniti lakšim i bržim. Bootstrap 3

2

predstavlja front end razvojni okvir koji bi u novoj inačici trebao nadoknaditi sve nedostatke s

kojima su se korisnici susretali u inačici Bootstrap 2

Praktični dio rada uključuje izrada web stranice, gaming portala, u nekoj od navedenih

tehnologija; HTML5, CSS3, Hack, Polymer i Bootstrap3. Tehnologija izrade odabrana će biti

na temelju analiziranja svih prednosti i nedostataka navedenih tehnologija. Najvažniji kriteriji

prilikom odabira su mogućnosti same tehnologije i financijski resursi potrebni za njezino

potpuno funkcioniranje.

3

2. HTML 5

Nakon faze stagnacije inovacija na webu došlo je razdoblje koje obilježavaju nevjerojatne

inovacije u razvoju web tehnologija. Fazu stagnacije prouzročila je dominacija Microsofta

koji je zavladao webom pa se tako procjenjuje da je 2003. godine Microsoftov Internet

Explorer koristilo otprilike 95% računala. Zbog tako velike dominacije i nepostojanja pravih

konkurenata Microsoft je odlučio prekinuti sve nepotrebne aktivnosti vezane uz razvoj

Internet Explorera. Situacija se danas bitno razlikuje pa se tako na tržištu ističu četiri

proizvođača preglednika i njihovi preglednici: Chrome, Firefox, Opera te Internet Explorer.

Uz to načini pristupa internetu su se promijenili, korisnici više nisu ograničeni samo na stolna

i prijenosna računala već se internetu pristupa preko pametnih telefona, tableta, igraćih

konzola, pametnih televizora te čitača e-knjiga. Iz toga možemo zaključiti da korisnici

pristupaju internetu preko različitih platformi i preglednika. Stoga je vrlo važno koristiti web

tehnologije koje omogućuju korisnicima da imaju jednako korisničko iskustvo bez obzira da li

web stranici pristupaju s pametnog telefona ili osobnog računala. Jedna od tehnologija koja

omogućava kreiranje web stranica namijenjenih za prikaz na različitim uređajima je HTML 5

o kojem će više biti pisano u nastavku ovog rada. On predstavlja prvu novu reviziju standarda

od HTML 4.01 koji je izdan 1999. Nastao u suradnji World Wide Web Consortium (W3C) i

Web Hypertext Application Technology Working Group (WHATWG). Do 2006. godine su

ove dvije grupe radile odvojeno, WHATWG je radio sa web formama i aplikacijama, a W3C

sa XHTML 2.0. Odlučili su se udružiti te je tako početkom 2008. godine objavljena Working

Draft (radna) HTML5 specifikacija. Cilj HTML5 standarda je smanjiti ovisnost internetske

stranice o skriptiranju na strani klijenta tj. o Javascriptu te ujedno smanjiti potrebu za alatima

poput Adobe Flash Playera.

4

2.1. Novosti u odnosu na HTML 4

2.1.1. Sintaksa

Prva novost koju možemo zapaziti kod HTML 5 dokumenta je element doctype koji određuje

način na koji će preglednik pregledavati dokument. Kod HTML-a 4 i kod prethodnih verzija

potrebno je bilo napisati element na sljedeći način :

<!DOCTYPE HTML PUBLIC "- "http://www.w3.org/TR/html4/loose.dtd">

Sada više nije potrebno toliko pisati za taj element, već je dovoljno kratko napisati:

<!DOCTYPE html>

Još jedna novost u zaglavlju HTML5 dokumenta je način definiranja skupa znakova

(charset). U starijim verzijama HTML-a skup znakova definirao se na način da se pisalo u

zaglavlju:

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

Kad se koristi HTML5 standardni zapis izgleda ovako:

<meta charset="utf-8">

Možemo primijetiti da se navodi samo naziv skupa znakova te način kodiranja stranice. U

ovom primjeru koristi se UTF-8 koji sadrži znakove: č,ć,ž,đ,š.

5

2.1.2. Novi elementi

„HTML5 specifikacija sadrži deset strukturnih elementa. Od tih deset tri postoje od prije. To

su body, h1-h6 te address. Sedam ih je novih, od kojih se četiri odnose na podjelu sadržaja na

odjeljke, a preostala tri strukturna elementa definiraju područja unutar već podijeljenog

sadržaja“ [9]

Elementi za podjelu sadržaja na odjeljke su :

<article> služi za definiranje prostora za članke, komentare ili postove, koji je

neovisan o sadržaju stranice

<aside > predstavlja dio stranice koji je povezan sadržajem koji ga okružuje,

ali se mora smatrati posebnom cjelinom. Takvi dijelovi su često prisutni u

tiskanim publikacijama. Koristi se za postizanje efekta iz tiskanih medija kao

što su izdvojeni odlomci, citati, oglasi i sl.

<nav > ovaj element predstavlja navigacijsko područje dokumenta, tj. to je dio

stranice koji je povezan s drugim stranicama ili dijelovima iste stranice ili

ukratko to je sekcija sa navigacijskim vezama.

<section> predstavlja dio dokumenta ili aplikacije. U ovom slučaju to je

tematski grupiran sadržaj, primjerice poglavlje knjige, različite kartice u

dijaloškom okviru s karticama, uvod na početnoj strani Web lokacije ili

numerirani dijelovi završnog rada i slično.

Preostala tri elementa koji se koriste za definiranje područja unutar već podijeljenog sadržaja

su:

<footer> predstavlja podnožje dokumenta ili dijela dokumenta. Podnožje ne

mora obavezno stajati na dnu sekcije iako je to najčešće tako. U podnožju se

najčešće nalaze informacije o autoru stranice, veze do relevantnih dokumenata,

podaci o autorskim pravima.

<header> Može biti zaglavlje dokumenta ili dijela dokumenta. Najčešće sadrži

elemente za naslove , ali ovaj element može se upotrijebiti i kao omotač za

popis sadržaja sekcije, obrazac za pretraživanje ili logotip.

<hgroup> element predstavlja naslov sekcije te se koristi za grupiranje

elemenata za naslove, na primjer naslova, podnaslova ili ključne riječi.

6

Na slici 2.1. prikazani su elementi za podjelu sadržaja u HTML5:

Slika 2.1 - Prikaz novih strukturnih elemenata u HTML5

Ostali elementi koji su se prvi puta pojavili u HTML-u 5 su:

<mark> njime se definira posvijetljen ili označen tekst

<menuitem> - ovim elementom definiramo stavku koja se od strane korisnika može

pozvati iz pop up izbornika

<header>

<nav>

<section> <aside>

<article>

<footer>

7

<nav> definira veze navigacije u dokumentu

<section> ovime definiramo sekcije u dokumentu

<time> služi za definiranje vremena

<meter> koristi se kako bi se određivale skalarne mjere nekog poznatog područja

<summary> definira vidljiva zaglavlja za elemente <details>

2.1.3. Crtaća površina <canvas>

Element <canvas> predstavlja rastersku površinu za crtanje ovisno o rezoluciji koja se može

koristiti za iscrtavanje grafova, grafike igara i drugih slika tokom izvršenja. Crtaću površinu

može se zamisliti kao pravokutnik koji nema vlastiti sadržaj ni rub. Kako bi se po toj površini

moglo crtati potrebno je u JavaScriptu napisati kratku skriptu kojom ćemo dohvatiti canvas

objekt i 2D context. Context ovdje predstavlja neku vrstu alata za crtanje koji nam omogućuje

sve naše radnje na crtaćoj površini. Jedna stranica može sadržavati više crtaćih površina, a

ako im se dodjele identifikatori, moći će im se pristupati kao i svim drugim elementima. Na

slici 2.2 prikazano je kako crtaća površina izgleda u pregledniku:

Slika 2.2. – Prikaz crtaće površine

2.1.4. Umetanje video zapisa na stranicu

U prijašnjim verzijama umetanje video zapisa je bilo nemoguće bez određenih dodatak kao

što su: QuickTime ili Adobe Flash. HTML5 omogućuje umetanje video zapisa na web uz

pomoć elementa <video>. Ukoliko dođe do situacije da preglednik ne podržava video

element, odnosno HTML5, on će ga u tom slučaju ignorirati. Kako se ovakve situacije ne bi

dešavale osmišljen je način zvan „video za sve“ na koji će preglednik, u slučaju ne

podržavanja elementa video, „vratiti“ se starom načinu umetanja istoga. Prema zadanim

8

postavkama preglednik za vrijeme reproduciranja video zapisa ne prikazuje nikakve gumbe za

upravljanje reproduciranjem stoga ih moramo uključiti atributom controls. Od izuzetne je

važnosti odrediti visinu i širinu prozora za reprodukciju, jer će se u protivnom za vrijeme

učitavanja video zapisa moći primijetiti mali trzaji do kojih će dolaziti zbog računanja

dimenzija prikazivanja od strane preglednika. Neki od atributa koje možemo odrediti u

elementu video su:

autoplay – govori pregledniku da krene s reprodukcijom video zapisa

odmah čim je video učitan

controls - ovime dodajemo gumbe za upravljanje reprodukcijom video

zapisa

preload – ovime autor daje pregledniku naputak da krene s

preuzimanjem video zapisa čim krene sa učitavanjem stranice

none – ovim atributom dajemo naputak pregledniku da ne kreče s

učitavanjem video zapisa sve dok korisnik klikom na isti to ne inicira

Na slici 2.3 prikazan je umetnuti video zapis kojemu smo odredili i kontrole za upravljanje

reprodukcijom:

Slika 2.3. - Prikaz umetnutog videa [izvor : http://www.w3schools.com/html/tryit.asp?filename=tryhtml5_video]

9

2.1.5. Geolokacija

Geolokacijsko aplikacijsko programsko sučelje (Application Programming Interface)

omogućava da se informacija o trenutnoj lokaciji korisnika podijeli s web stranicom. Od

izuzetne važnosti je napomenuti da je u dokumentaciji za geolokacijski API navedeno :„

Korisnički agenti ne smiju slati informacije o lokaciji Web stranicama bez izričitog

dopuštenja korisnika.“ [Peter Gasston, 2013, str 174 ] To znači da korisnik web stranice mora

sam odlučiti da li želi podijeliti svoju lokaciju. Usprkos jednostavnosti geolokacijskog API-ja,

on omogućava programeru veoma važnu informaciju – lokaciju korisnika. Znajući gdje je

korisnik može se koristiti na brojne načine, npr. kao preporuka za podrazumijevani jezik,

valutu i druga regionalna podešenja. Lokacije su vjerojatno popularnije i prilagođenije za

mobilne aplikacije, jer ljudi imaju običaj da se kreću sa mobilnim uređajima što daje

mogućnost za aktivnije korištenje lokacije, u odnosu na slučaj korištenja lokacije za

stacionarnog korisnika ispred stolnog računala. Ova značajka podržana je od strane mnogih

modernih preglednika kako klasičnih tako i onih mobilnih inačica. Problem ne podržavanja

rješava se mnogim, relativno jednostavnim, JavaScrip bibliotekama.

2.1.6. HTML5 Storage

HTML5 storage predstavlja način na koji Web stranice mogu čuvati parove ključ/vrijednost

unutar klijentskog web preglednika. Kao i kod kolačića i ovdje podaci ostaju spremljeni

nakon što se napusti stranica, ali razlika je u tome da se ti spremljeni podaci nikad ne šalju

poslužitelju. Ova HTML5 značajka je jedna od najbolje podržanih od strane preglednika, jer

podržavaju je gotovo svi moderniji preglednici. Temelj ove značajke su parovi imenovanih

ključeva/vrijednosti. Imenovani ključ je niz znakova, a podaci mogu biti bilo kojeg tipa koji

JavaScript podržava uključujući nizove, logičke vrijednosti, cjelobrojne vrijednosti ili

vrijednosti s pomičnim zarezom. Kao primjer gdje se može upotrijebiti HTML5 Storage je

kod igranja igara . U slučaju kad se ne koristi HTML Storage , uslijed zatvaranja prozora

preglednika gubi se trenutno stanje u igri, npr. u šahu položaj figura, a ako se koristi

preglednik koji koristi i podržava HTML5 Storage stranica bi trebala zapamtit položaj figura.

10

3. CSS3 (Cascading Style Sheets 3)

Kaskadni stilovi predstavljaju način za dodavanje stilova: fontova, boja razmaka između

paragrafa, uređivanje tablica. Svojom pojavom CSS je izazvao pravu revoluciju na internetu i

to zahvaljujući nizu prednosti koje ima pred tabličnim izgledom stranica (korištenje tablica za

formiranje stranice). Korištenjem CSS-a može se odvojiti prezentacija podataka i dizajn od

same strukture podataka. Jednostavnom primjenom parametara omogućeno je promijeniti

izgled stranice na jednostavan način, a time i sam HTML kod postaje pregledniji. CSS sadrži

čitav niz načina za uređivanje prikaza podataka koji do tada nisu postojali u samom HTML-u.

Korištenjem CSS možemo podešavati sljedeće segmente na Internet stranici:

Podešavanje pozadine - boja pozadine, slike na pozadini

Opcije okvira -kontrolira okvire povezane sa stranicom, liste, tablice, slike, blok

elemente

Opcije klasifikacija (kontroliraju na koji se način elementi poput slika ponašaju na

stranici u odnosu na ostale elemente.

Uređivanje listi

Uređivanje margina

Kontrola padding-a (kontrola količine praznog prostora oko bilo kojeg blok elementa

na stranici).

Kontrola pozicioniranja elemenata

Kontrola veličine elemenata

Uređivanje tablica – uređivanje ćelija, razmak između ćelija

Uređivanje teksta – određivanje fonta, boje

CSS3 je najnovija verzija CSS-a koja donosi mnoge nove mogućnosti u pogledu dizajna, čija

je jedna od poznatijih značajki eliminiranje gomile kôda da bi se postigao jednostavan efekt

poput zaobljenih rubova. „Budući da su danas mobilni web preglednici jedan od najšire

rasprostranjenih pristupa web-u, CSS3 je s modulom media-query omogućio prilagođavanje

elementa (ili cijele stranice) širini tj. rezoluciji ekrana“ [7]. Sve novije stranice koriste takav

pristup, dok starije prolaze kroz nadogradnje i prilagodbe. Takva vrsta izrade stranica se zove

responzivni web dizajn, a za njenog začetnika se smatra upravo CSS3. Još jedna od stvari

koje vrijedi napomenuti je ta da je CSS3 izbacio Flash tehnologiju kod izrade animacija.

Sama flash tehnologija je bila spora, podržana od samo par preglednika i loša za optimizaciju

stranica. Dok je CSS3 „zakrpao“ sve te loše strane te je još dodatno olakšao izradu animacija.

Što se tiče sintakse CSS3 nije uveo nikakve promjene, niti promjene načina korištenja. CSS3

uvodi nove module i svojstva o kojima ću opširnije pisati u nastavku ovog rada.

11

3.1. Selektori

Selektor govori web pregledniku koji HTML element na web stranici treba oblikovati (npr,

naslov, odlomak, link, slika, tablica, forma i sl...). Svaki selektor može imati više atributa, a

svaki atribut unutar selektora može imati nezavisne vrijednosti. Atribut i njegova vrijednost su

odvojeni dvotočkom (:) i nalaze se unutar vitičaste zagrade. Iza vrijednosti dolazi točka-zarez

(;). Ako postoji više atributa u deklaraciji isti su odvojeni znakom točka-zarez (;). Ako se

vrijednost sastoji od više riječi sve se treba staviti pod navodne znakove. Napredak CSS3

može se vidjeti i prema broju selektora koji je sa 22 u CSS2 porastao na 40. Lista osnovnih

selektora prikazana je u tablici 3.1. (dolje):

Tablica 3.1. Prikaz liste selektora u CSS3 [ izvor: [7] ]

Selektor Naziv Značenje

* Univerzalni selektor Označava bilo koji element

E Selektor tipa Označava HTML element tipa E

.className Selektor klasa Označava elemente s atributom klasa

#idName Selektor ID-a Označava elemente s atributom ID

E:link Veza pseudo klasa Označava elemente E ako je ne posječena veza

E:visited posjećena pseudo klasa Označava elemente E ako je posjećena veza

E:hover Prekrivena pseudo

klasa

Označava elemente E kada ih prekrijemo

pokazivačem

E:active Aktivna pseudo klasa Označava elemente E kada je on odabran

E:first-letter Pseudo klasa prvog

slova

Označava prvo slovo elementa E

E:first-line Pseudo klasa prvog

reda

Označava prvi red elementa E

E[atrr] Selektor atributa Označava elemente s atributom attr

E[attr=“x“] Selektor atributa Označava elemente čija je vrijednost atributa attr

jednaka „x“

E[attr$=“x“] Selektor atributa Označava elemente čija vrijednost atributa attr

završava s „x“

.

12

3.2. Dodavanje sjene tekstu

Dodavanje sjene tekstu ne predstavlja potpuno novu mogućnost u CSS3 zato što se je ona prvi

puta javila u inačici CSS2.1, ali zbog svoji problema s implementacijom ponovno je

postavljena. Ova mogućnost najčešće se koristi za isticanje nekog teksta, ali se može postići i

naglašeniji efekt. Pomoću svojstva text-shadow tekstu se mogu dodavati sjene – od diskretne

do naglašene, ovisno o vrijednostima koje su unesene za parametre: horizontalna udaljenost

od teksta, vertikalna udaljenost od teksta i zamagljivanje ili širenje sjene. Kako to izgleda u

pregledniku prikazano je na slici 3.1 :

Slika 3. 1. - Prikaz funkcioniranja "Text Shadow" (dodavanja sjena tekstu)

;

3.3. Prozirnost elemenata

Još jedna novost koju donosi CSS3 je korištenje elementa prozirnosti na stranicama uz pomoć

kojih se mogu napraviti iznimno zanimljivi efekti. Prije nego je postojala ta mogućnost koju

nalazimo kod CSS3 u pravilu je bilo potrebno korištenje PNG slika s alfa kanalom (enl. alpha

chanel) – skupom podataka koji predstavljaju informacije o transparentnosti zasnovane na

pojedinačnim pikselima. Mogu se koristiti dva načina za postizanje efekt prozirnosti. Prvi

način je korištenjem svojstva prozirnosti (eng. opacity) koje ima vrijednost od 0 do 1 pri čemu

vrijednost 0 prikazuje element potpuno prozirnim, a vrijednost 1 daje potpuno neproziran

element. Drugi način je uporabom RGBA svojstva gdje se dodaje četvrta vrijednost u listu

vrijednosti pri čemu se prozirnost određuje kod vrijednosti A (Alpha).

13

Osnovna razlika između ove dvije metode je ta što se pri korištenju prozirnosti na prvom

primjeru ona definira za cijeli okvir i njegov sadržaj, dok se u drugom primjeru, kada se

koristi RGBA, utječe samo na boju koja se definira pa tekst unutar tog okvira neće biti

proziran. Svojstvo prozirnosti i RGBA podržavaju svi suvremeni web preglednici, a

zanemaruju ga stariji web preglednici koji nemaju odgovarajuću podršku. Na slici 3.2

prikazan je primjer prozirnosti:

Slika 3.2. - Prikaz prozirnosti na slici

3.4. Dodavanje sjena objektima

CSS3 pruža mogućnost korištenja svojstva box-shadow pomoću kojeg se mogu dodavati sjene

gotovo svakom elementu bez da se za to mora koristiti neki od programa za obradu slika. Za

pravilno određivanje sjena objekata potrebno je unijeti 4 vrijednosti.

Horizontalna udaljenost od objekta

Vertikalna udaljenost od objekta

Zamagljivanje

Duljina širenja

Boju sjene se može određivati kao i to da li će se ista nalaziti izvan ili unutar samog objekta.

Također je potrebno znati da objektu možemo definirati više od jedne sjene, ali i to da ova

14

opcija često može dovesti do gubljenja „prirodnog efekta sjene“. Slika 3.3 prikazuje rezultat

dodavanja sjena elementu:

Slika 3.3. - Prikaz dodavanja sjena elementima

3.5. Zaobljeni rubovi

Zaobljeni rubovi predstavljaju još jednu efekt koji se prije uvođenja u CSS3 postizao uz

pomoć alata za obradu slika. Ovime će se postići revitaliziranje, pomalo monotonih, oštrih

rubova. Kako bi se ovaj efekt postigao definiranju određenog kuta mora se dodati svojstvo

radius. Važno je napomenuti kako sve ovakve mogućnosti, koje su u prošlim inačicama

iziskivale potrebu za dodatnim alatom, smanjuju vrijeme učitavanja web stranice. Na slici 3.4

je prikazan primjer zaobljenih rubova

Slika 3.4. - Prikaz zaobljenih rubova kod elemenata

15

3.6. Transformacije

Još jedna od novih mogućnosti je mogućnost transformacije elemenata korištenjem svojstva

transform pri čemu je moguće rotiranje, smanjenje, povećanje, pomicanje horizontalno i

vertikalno te ukošavanje elementa. Slika 3.5. prikazuje element nad kojim je primjenjena

transformacija:

Slika 3.5 - Prikaz transformacije elementa

3.7. Tekst u više stupaca

CSS3 donosi mogućnost postavljanja teksta u više stupaca da bi se postigao efekt sličan

onome iz mnogih novina i časopisa. Da bi se to postiglo koristi se svojstvo multicolumn. S

time se može riješiti problem dugačkih redova i smještanja što veće količine teksta u

ograničenom prostoru, a uz to se olakšava čitanje teksta. Najjednostavniji način za dijeljenje

sadržaja na jednake stupce jest upotreba svojstva column-count. Na slici 3.6 može se vidjeti

kako to izgleda u pregledniku:

16

Slika 3.6. - Prikaz lomljenja teksta u više stupaca

17

4. Hack

Hack je programski jezik namijenjen za HHMV (Hip-Hop Virtual Machines), a svoje

korijene većinom vuče iz programskog jezika PHP. Osmišljen je od strane firme „Facebook“

kako bi se programerima uskratile muke oko nedostataka na koje su do tada nailazili sa PHP-

om. Kao glavna svrha ovog programskog jezika navodi se omogućavanje pisanja čišćeg i

sigurnijeg koda, no uz preduvjet da se osigura kompatibilnost sa već postojećim PHP bazama

kodova. Facebook sa projektom „Hack“ započinje 2012. godine vođeni idejom, preuzetom iz

statičkih jezika, označavanja tipova podataka koji bi se koristili. Baziranost Hack-a na PHP-u

nije nikakva slučajnost, naime radi se o tome da je firma „Facebook“ izdavala mnoga sredstva

kako bi se poboljšala funkcionalnost programskog jezika PHP, jer se njihov rad bazira na

istome. Ovime su im uskraćene muke sa edukacijom korisnika, ali što je od veće važnosti je

to da su njihove PHP skripte u velikoj većini slučajeva jasne Hack-u. 2014. godine Hack je

„izbačen“ kao open source kako bi se uklonile eventualne greške i pronašla neka nova

rješenja koja bi rad u njemu učinila još lakšim i efikasnijim.

4.2. Značajke Hack-a

Kao svaki drugi programski jezik i Hack ima svoje značajke koje ga čine više pogodnim za

određenu problematiku kod pisanja i izvršavanja programskog koda. Istaknutije značajke

programskog jezika Hack su:

Type annotations

Generics

Nullable types

Lambda expressions

18

4.2.1. Type annotations

„Ovo svojstvo omogućava da programski kod napisan u PHP-u eksplicitno bude umetnut na

varijable unutar klasa, parametre funkcije i povratne vrijednosti“[2]. Uvođenje ovog svojstva

proizašlo je iz „nedostatka“ logike dinamičkih programskih jezika koja omogućuje mijenjanje

kako vrijednosti tako i tip varijable što u globalu donosi mnogo fleksibilnosti i kod čini

jezgrovitijim odnosno sažetijim. No takvi, dinamički, jezici imaju i svoje loše strane kao što

su: prepoznavanje grešaka tek u vrijeme izvođenja programa i nema kompajlerske analize za

optimizaciju koda koja je uobičajena za statične jezike. Takvim nedostacima se ovakvim

pred-bilješkama želi stati na kraj kako bi povećala funkcionalnost koda i greške istoga svele

na minimum. Kako bi to trebalo funkcionirati može se vidjeti na slici 4.1:

Slika 4.1. Prikaz Hack koda za "Annotations"

[izvor:http://docs.hhvm.com/manual/en/hack.annotations.introexample.php]

4.2.1.2. Tipovi podataka koje možemo pred-bilježiti

Što se tiče predbilježbi tipova podataka iz programskog jezika PHP koje je moguće

predbilježiti tu je Hack dobro „potkovan“ pa stoga ovo svojstvo podržava gotove sve tipove

podatak. Na slici 4.2 su prikazani podržani tipovi:

19

Slika 4.2. - Prikaz vrsta podataka kod kojih se može koristit "annotation" izvor

[http://docs.hhvm.com/manual/en/hack.annotations.types.php]

„Važno je napomenuti kako se tip array ne može koristiti u modu //strict jer će se javljati

greška kao da se koristi collection class (vector ili map). Iz toga razloga ga se koristi u

zadanom ili deklariranom modu“[2].

4.3. Generics

„Generics omogućava klasama i metodama da budu parametrizirane na isti način kao statički

tipovi jezika poput C# i Java-e. Također omogućava prgramerima da pišu klasu ili metodu s

mogućnošću da budu parametrizirane u bilo koji tip, sve dok se održava sigurnost tipa

„[5].Kada ne bi postojalo generička paradigma za napraviti određeni model zahtijevalo bi se

tretiranje svega kao objekta visoke razine, mnoge instance () provjere, i odrediti sve kao

prigodne tipove.

20

4.3.1. Pisanje klasa pomoću generics

„Kod definiranja generičke klase moramo slijediti nekoliko naputaka:

Velikim slovom T mora početi generički parametar

Podudaranje generičke klase sa imenom bilo koje ne generičke klase nije dopušteno

Slovo T može se upućivati na argumente unutar klase i povratni tip

Podržava se nullable T

Trenutno ne postoji podržavanje kreiranje nove instance T ili raspoređivanje na T“ [2]

Kako pravilno definirati generičku klasu vidi se na slici 4.3.:

Slika 4.3. - Prikaz koda kako pravilno definirati generičku klasu, izvor

[http://docs.hhvm.com/manual/en/hack.generics.introexample.php]

4.2.3. Nullable

Razlog uvođenja ovog svojstva u programski jezik Hack je omogućavanje sigurnijeg načina

za manevriranje s null vrijednosti. Ovime je omogućeno da se svakom tipu podataka može

dodijeliti null vrijednost te ju ujedno i prekontrolirati. Poznato je da null vrijednost, u

21

globalu, nije dopuštena u primitivnim tipovima podataka kao što su: integer i boolean, stoga

će tu biti veoma korisna. No svoju će svrhu naći i u klasama definiranim od strane korisnika.

Kako bi se definiralo nullable potrebno je ispred tipa staviti znak „?“.

4.2.3.1. Kada koristiti nullable

Navedeno je da u statičkim programskim jezicima vrijednost null ne mogu biti poprimljene od

strane primitivnih tipova kao npr. boolean. Ovdje se može uvidjeti da bi se definiranje null

vrijednosti moglo koristit kada je nepoznato stanje određene varijable tj. kada se ne zna dali

je njezina vrijednost true ili false. Ovo je također primjenjivo u radu s bazama podatka gdje će

se u slučaju postojanja stupca čije se vrijednosti definiraju kao integer, ako u tom stupcu ne

postavimo vrijednost nullable, omogućiti da se programski kod nosi s tim.

4.2.3.2. Kada ne koristiti nullable

Ova značajka se čini savršenim rješenjem za primitivne tipove podataka jer ih „spašava“ od

ne definiranja. No često se s razlogom očekuje da vrijednost varijable, neovisno o tipu, bude

definirana odnosno da varijabla bude inicijalizirana. U suprotnome može doći do određenih

problema. Takav primjer može se vidjeti na slici 4.4.:

Slika 4.4. - Prikaz ne potrebnog korištenja "Nullable", izvor

[http://docs.hhvm.com/manual/en/hack.nullable.whynotalwaysuse.php]

22

„Prvi pogled na gore prikazani kod ne odaje postojanje niti jedne pogreške, no kada se

pomnije promotri varijablu vec->count ne postoji mogućnost da njezina vrijednost bude ne

definirana. Jedino pogrešno implementiran vektor ili pogreška tijekom izvođenja mogu

isprovocirati postojanje takvog slučaja“[3].

4.2.4. Lambda epressions

Definiranje malih anonimnih funkcija koje se koriste kao programske vrijednosti koje se

mogu pohraniti u varijablu i kasnije koristiti odnosno pozivati korisna su značajka mnogih

programskih jezika. Ovime se programeru omogućava spremanje lokalnih varijabli iz nekih

zagrađenih funkcija koje u određenim situacijama mogu biti prikladne. U PHP-u se u verziji

5.3 predstavljaju takve pregrade koje omogućavaju pisanje anonimnih funkcija. No u tome

području uočeni su nedostaci kao što u dohvaćanje varijabli iz zatvorenih funkcija koje traži

od programera da na izričit način odredi koje će se varijable dohvaćati. Zbog ovakvih

nedostataka od strane HHMV-a je predstavljena značajka „lambda expressions“. Njihov način

funkcioniranja logiku dijeli sa PHP pregradama, a razlikuju se u načinu dohvaćanja varijabli

iz tijela zatvorenih funkcija. Dohvaćanje se ovdje obavlja implicitno te je u globalu manje

opširno. Primjer „lambda expression-a“ prikazan je na slici 4.5.:

Slika 4.5. - Prikaz korištenja "lambda expression-a" izvor [http://docs.hhvm.com/manual/en/hack.lambda.php]

23

4.3. HACK i PHP

Navedeno je kako se programski jezik HACK temelji na programskom jeziku PHP te je na taj

način s njime usko vezan. To i potvrđuje činjenica ta da je programski kod napisan u PHP-u u

većini slučajeva izvodiv i kao HACK kod. Kao razlog njegovog stvaranja navodi se želja za

evolucijom PHP-a s kojom se je htjela postići sigurnost, povećati efikasnost pisanja

programskog koda te omogućiti bolje performanse tijekom samog izvođenja programa. Mnogi

danas Hack od milja nazivaju PHP++ čime jasno daju do znanja kako misle da će u budeće

vrijeme Hack smijeniti PHP na području web programiranja. Tvorac Hack-a, firma

„Facebook“, imala je mnoga ulaganja u razvoj programskog jezika PHP stoga i činjenica da

se na njemu temelji njihov programski jezik nimalo ne čudi. Glavni razlog tomu je to da sva

ta ulaganja u PHP ne padnu u vodu nego da se i dalje mogu izvući koristi iz njih. Bitno je

napomenuti da su i mnoge druge velike kompanije svoje financijske resurse ulagale u razvoj

PHP-a te se stoga čeka njihov odgovor na prihvaćanje Hack-a kao efikasnijeg rješenja, ili će

njegov daljnji razvoj nastojati ugušiti te ostati privrženi radu s PHP-om.

24

5. Polymer

„Polymer je novi tip biblioteke namijenjena webu, sagrađena na temelju web komponenata, i

dizajnirana kako bi poduprla web platforme u razvoju„ [2].. Prema njezinom tvorcu, firmi

„Google“, ona predstavlja budućnost u razvoju web aplikacija. Ova biblioteka donosi novu

ideju izgradnje, te stoga ništa slično trenutno ne postoji, a jedina biblioteka s kojom se može

pronaći sličnost je „X-tags“. Platforma na temelju koje polymer funkcionira naziva se DOM

(Document Object Model).

5.1. „Filozofija“ Polymer-a

Filozofija polymera je sagraditi sve od komponenata čija će nezavisnost biti ključ izrade

skalabilnih aplikacija. Veće komponente su građene od manjih komponenata koje se mogu

više puta iskoristiti, dok bi se od tih većih komponenata gradile aplikacije koje bi koristili na

željenim mjestima. Riječi vodilje kojih se dobro držati u radu s polymerom su: „Sve je

element“ [2]. Ovime pažnju žele staviti na personalizirane elemente koji zapravo sačinjavaju

komponente polymer-a. Pisanje sažetijeg koda također spada u filozofiju rada polymera, a

jedan način za ostvarivanje ove zamisli je takozvano povezivanje podataka što će uvelike

reducirati programski kod . Ovime se potiče programera da piše kod koji je jedinstven za

njegov određeni element ili cijelu aplikaciju.

5.2. Gdje se nalazi polymer

Slušajući i gledajući priču o ovoj biblioteci prosječnom korisniku je nejasno gdje se u tom

cijelom razvoju polymer nalazi tj. koji i kakav sloj on predstavlja. Na slici 5.1 prikazano je

njegovo „stanište“:

25

Slika 5.1.- Prikaz „staništa“ Polymer sloja, izvor [http://www.youtube.com/watch?v=8-Zq2KUN6jM]

„Slojevi polymerovog radnog okruženja redom (od dolje prema gore) su:

Native – ovaj sloj predstavlja preglednike današnjice

Platform – ovdje spadaju niz polyfill-a koji su rađeni prema određenim standardima i

nadograđuju se na preglednika, a cilj je ukloniti ih u potpunosti

Polymer – predstavlja nama željeni/opcionalni način rada sa web komponentama.

Element – ovdje se nastanjuju personalizirani elementi“ [2]

5.3. Načini rada s polymerom

Ova biblioteka korisniku na raspolaganje nudi dva glavna načina rada s elementima, a to su :

Korištenje pred definiranih elemenata

Kreiranje elemenata

26

5.3.1 Korištenje pred definiranih elemenata

Kod ovog načina korisnik da bi koristio elemente mora napraviti nekoliko relativni

jednostavnih koraka koji od njega ne zahtijevaju poznavanje programiranja:

„

1. dohvaćanje koda- najlakše se radi pomoću Bower alata za dohvaćanje

2. uključivanje platforme – najčešće se radi od Javascript platformi

3. ubacivanje/import elemenata – vršimo pomoću povezivanja HTML datoteke „ [2]

Danas polymer broji više od 100 elemenata primjere nekih može se vidjeti na slici 5.2.:

Slika 5.2. - Prikaz nekih od elemenata Polymera, izvor [http://www.youtube.com/watch?v=8-Zq2KUN6jM]

5.3.2 Kreiranje elemenata

Za ovakvo korištenje polymera potrebno je poznavanje HTML-a i CSS-a kako bi se mogli

kreirati željeni elementi. Način na koji se element kreira je sljedeći:

“

1. otvara se element <polymer-element> unutar kojeg se kao vrijednost atributa

name stavlja željeno ime elementa

27

2. otvara se element <template> unutar kojeg se definira <style> (izgled vrijednosti

unesene u element koji se želi kreirati (u našem slučaju to predstavlja <h2> Hello

from my element </h2>)

3. zatvaraju se svi otvoreni elementi

4. otvara se kreirani element „ [2.]

Na slici 5.3. je prikazano kako bi taj primjer izgledao u praksi:

Slika 5.3. - Prikaz načina kreiranja Polymer elemenata, izvor [http://www.youtube.com/watch?v=8-Zq2KUN6jM]

28

6. Bootstrap 3.0

„Bootstrap je front-end razvojni okvir otvorenog koda koji služi za izradu responzivnih web

stranica. Predstavlja kombinaciju CSS predložaka, fontova odnosno glyphicona te JavaScript

dodataka koji omogućuju izradu web stranica bez pisanja mnogo koda“[6]. Prednost ovog

radnog okvira je ta što je u potpunosti besplatan.

6.1 Noviteti

U odnosu na prethodne inačice Bootstrap ima mnogo noviteta koji rad u njemu čine lakšim i

efikasnijim. Flat dizajn kojemu su se njegovi tvorci naklonili najavljuje prelazak u „metro“

svijet što se u konačnici pokazalo kao odličan potez , jer su time povećali brzinu renderiranja.

Napredak u odnosu na prethodnika obuhvaća mnogo više noviteta koji će izmijeniti način i

mogućnosti razvijanja web stranica.

6.1.1. Grid

Grid, sustav na kome se rad u Bootstrap-u bazira, dobio je značajne izmjene u načinu rada te

je sada postao fleksibilniji odnosno responzivniji. Bootstrap 3 u potpunosti zanemaruje fiksni

format dok je u Bootstrap-u 2 postavljen kao zadan. Definiranje broja i veličine ćelija mnogo

je jednostavnije u odnosu na prethodnika. Broj podržanih popeo se na četiri, a to su : mobiteli,

tableti, desktopi i veliki desktopi.

6.1.2. Mobile first

U Bootstrap 2 princip je bio da smo imali web stranicu koja je prvobitno namijenjena desktop

uređajima. Kada bi se iz tih stranica željelo dobiti verzija namijenjena mobilnim uređajima

moralo bi se iz glavne CSS datoteke oduzimati sadržaj kako bi on u konačnici bio prilagođen

željenoj platformi. „Mobile first princip u prvi plan stavlja mobilne uređaje te se iz web

stranica namijenjenim njima prilagođavanje vrši progresivnim uljepšavanjem za desktop

verziju“[6]. Ovo dovodi do čišćenja CSS koda te sada mobilna verzija sadrži najmanju

količinu istoga.

29

6.1.3. Glyphicon font

U starijoj inačici glyphicon-i su se koristili samo kao ikonice dok se sada počinju koristiti kao

font. Uključujući 40 novih glyphov-a sada sačinjavaju lepezu od njih 180 u font formatu, te

je važno napomenuti kako su svi oni besplatni.

6.2. Prednosti i nedostaci

Prednosti koje bi Boostrap 3 trebali učiniti prvim izborom korisnika su:

izrazito laka optimizacija

responzivnost web stranica

koristi nove tehnologije kao što su HTML5 i CSS3

Nedostaci s kojima se Bootstrap 3 susreće su:

postojanje samo jedne grid strukture

teško se uklapa u već gotove stranice

pomalo monoton izgled stranica

30

7. Praktični rad: Izrada gaming portala

7.1. Odabir tehnologije izrade praktičnog rada

Odabir tehnologije za izradu praktičnog rada bazirao se na kritičkom ocjenjivanju obrađenih

web tehnologija: HTML5, CSS3, Polymer, Hack i Bootrat3. Analizom prednosti i nedostataka

svake od navedene tehnologije donesena je odluka kako će izrada biti izvršena kombinacijom

HTML5 i CSS3. Presudne stavke prilikom odabira su predstavljale: sloboda i minimalna doza

ograničenosti ovih web tehnologija te dokumentacija kojom je rad u njima poduprt i ne

potreba za financijskim ulaganjima.

7.2. Odabir tematike praktičnog rada

Odabir tematike za izradu web stranice proizlazi iz činjenice da je gaming kultura od svog

začetka u konstantom porastu što implicira na povećanje njezinih sljedbenika. Sve to dovodi

do potrebe za kvalitetnim informacijama kojima će se isti opskrbljivati. Kako bi te

informacije bile svima dostupne postojanje gaming portala je od krucijalnog značaja iz više

razloga:

Dostupnost informacija

Multimedijalni sadržaj

Komunikacija s članovima zajednice

Navedene su prednosti u odnosu na dosadašnji primarni kanal opskrbe, gaming časopise.

7.2.1. Izrada predloška

Kako ne bi dolazilo do čestih izmjena u kodu prilikom dizajniranja web stranice potrebno je

napraviti predložak na temelju kojeg će se bazirati raspored elemenata i izgled istih. Za

odrađivanje ovog dijela projekta nije korišten nikakvo softversko rješenje nego se je

odrađivao uporabom olovke i papira. Razlog odabira ovog načina izrade predloška je

31

fleksibilnost i kraće vrijeme izrade s obzirom na vršenje izmjena. Na slici 7.1 je prikazan

predložak na temelju kojeg je web stranica izrađena:

Slika 7.1 - Prikaz kontrolne ploče Wordpress-a

Prema predlošku se može vidjeti kako se u zaglavlju web stranice nalazi slider koji je u

današnjici neizostavna stavka svakog gaming portala zbog efekta i dinamičnosti koje donosi.

Ispod njega se nalazi glavni izbornik nakon kojeg se, u tijelu stranice, smještaju elementi s

tekstom vezanim za novitete u gaming industriji te recenzije nekih igara.

7.2.2. Izrada indeksne stranice

32

Kako je gore već navedeno tehnologije izrade gaming portala su : HTML5 i CSS3, dok je

kod pisan u text editoru „Sublime 2“. Prvi korak u izgradi je bilo određivanje pozadine web

stranice. To je učinjeno na način kako je prikazano na slici 7.2 :

Slika 7.2 određivanje pozadine web stranice

Kao pozadina je odabrana slika bg1.png i u daljnjem kodu možemo vidjeti kako je ta slika

postavljena fiksno u centru i da se ne ponavlja. Nakon toga slijedi kreiranje izbornika u

zaglavlju stranice. Prikaz izrade izbornika prikazan je na slici dolje:

Slika 7.2 Prikaz izrade izbornika pomoću nesortirane liste

Izbornik je izrađen pomoću elementa nesortirane liste unutar koje su smješteni elementi veze.

Nakon toga, pomoću id i class elemenata izrađeno je tijelo stranice unutar kojeg se nalazi

sadržajno najbitniji dio portala. U njemu su smještene kategorije :

Coming soon

New release

Best games in 2014

Kako i sami nazivi kategorija govore u njima su vijesti o igrama koje su izašle ili će izaći na

tržište. Kako to izgleda definirano u kodu prikazano je na slici 7.4:

33

Slika 7.4 - Prikaz sadržaja tijela stranice u text editoru

U podnožju stranice nalazi se lista proizvođača komponenti i časopisa iz gaming kulture. Za

njihovu izradu također je korištena ne određena lista unutar čijih su elemenata postavljene

poveznice na spomenute web stranice. Izgled indeksne stranice možemo vidjeti na slici 7.5:

34

Slika 7.5 - Izgled indeksne stranice gaming portala

35

8. Zaključak

Nove web tehnologije daju relativno kvalitetna rješenja za izradu web stranica bilo

kakve namijene. Zbog izrazito velikog broja postojanja istih te brzine kojom se one razvijaju

na tržištu će dio kolača dobiti samo one koje nude najkvalitetnija rješenja. Ovakav mahnitali

rast mnogo će utjecati na korisnike koji će se ne rijetko nalaziti u nedoumici što koristiti.

Funkcioniranje tehnologija poput HTML-a 5 i CSS-a 3 ne treba puno naglašavati jer

njihov način rada je već dobro poznat iz prijašnjih verzija. HTML u svojoj novoj inačici

donosi mnoge nove mogućnosti koje će raspored elemenata i njihovu prezentaciju učiniti

manje mukotrpnom. Svojim novitetima vezanih u animaciju HTML je istisnuo Flash kao

jedno od rješenja. CSS donosi mnoge mogućnosti koje će razne grafičke alate staviti po strani

kada se radi o određenim dizajnerskim rješenjima kao što su: zaobljenost rubova, sjene kod

elemenata i teksta, te transformacije elemenata. Jedina boljka s kojom se ove tehnologije

susreću je nerazumijevanje od strane preglednika, stoga se često dešava kriva interpretacija

što stranici daje iskrivljeni izgled. Jedini lijek za ovo je davanje posebnih naputaka

pregledniku za razumijevanje, a to se radi tako što ćemo ispred CSS upute umetnuti određeni

prefiks kojim ćemo naznačiti preglednik kojemu je ta linija koda namijenjena. Jedna od

najzanimljivijih novih tehnologija je programski jezik „Hack“ kojeg veliki broj developera

vidi kao zamjenu za PHP, no dali će se to zaista dogoditi pokazat će vrijeme i ljudska želja za

izmjenama. Svima je poznato da PHP uživa posebno mjesto kod developera u razvoju web

aplikacija. Samim time uvođenje ove tehnologije bi nakon izvjesnog vremena iziskivalo

prilagodbu istih. Iako je sintaksa PHP-a, skoru u potpunosti, prepoznatljiva od strane Hack-a

tko zna kakvi bi potezi bili povučeni u svrhu njegovog „zaborava“. Polymer biblioteka,

govore njezini tvorci, će unijeti mnoge promjene u razvoju web stranica. Ona bi trebala na

neki način izbaciti sloj platforme. Trenutno prolazi svoju fazu alpha testiranja, te stoga ne

preostaje ništa drugo nego čekati njezinu finalnu verziju kako bi se uvjerili u njezine stvarne

mogućnosti. Front end razvojni okvir Bootstrap 3 donio je mnoge izmjene u odnosu na

prethodnu inačicu. Stranice su postale fleksibilnije i responzivne što ih čini prilagođenima za

razne platforme poput mobilnih uređaja i tableta. Jedna od najvećih preinak u odnosu na na

Bootstrap 3 je „mobile first“ koji je iz korijena izmijenio izradu web stranica u ovoj platformi

te je ista sada znatno lakša. Usmjeravanjem prema „flat dizajnu“ i prelaskom u „metro“ vode

znatno su smanjili vrijeme renderiranja.

36

Izrada projektnog dijela rada odrađena je u kombinaciji tehnologija HTML5 i CSS3

koje se prikazuju kao najadekvatnija rješenje za izradu stranice prema čijem ćete dizajnu biti

prepoznatljivi. Njihova neograničenost u dizajnu, uz činjenicu da su u potpunosti besplatni,

predstavlja čvrst temelj odabira ove tehnologije od strane velikog broja korisnika.

37

9. Literatura

[1.] Christopher Schmidtt, Kyle Simpson (2011), HTML5 Coockbook, O'Reilly Media

[2.] Eric Bidelman, Rob Dodson, Matthew McNulty, Zeno Rocha, Daniel Buchner, Eugene

Oksman,(2014), All about Polymer at SFHTML,

[http://www.youtube.com/watch?v=mN7IAaRdi_k] preuzeto 7.9. 2014.

[3.] HHVM and Hack Manual,

[http://docs.hhvm.com/manual/en/index.php], preuzeto10.9.2014

[4.] Jake Spurlock(2013), Bootsrap, O'Reilly Media

[5.] Julien Verlaguet(2014Introducing Hack- Hack Dev Day,

[http://www.youtube.com/watch?v=BnJQJNGkUdM&list=PLb0IAmt7-

GS2fdbb1vVdP8Z8zx1l2L8YS] preuzeto 20.9. 2014

[6.] Matija Grčić (2014), Seminar za IT profesionalce: Bootstrap 3

[http://www.youtube.com/watch?v=3oYpk8gB9UI] preuzeto 20.9. 2014.

[7.] Petter Gaston (2011), The book of CSS3, No starch press

[8.] Petter Gaston (2013), The modern web, No starch press

[9.] Rob Crowther (2013), Hello! HTML5 and CSS3, Manning

38