Upload
trandien
View
216
Download
1
Embed Size (px)
Citation preview
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