UNIVERZA V MARIBORU FAKULTETA ZA ELEKTROTEHNIKO, RAČUNALNIŠTVO IN INFORMATIKO VISOKOŠOLSKI STROKOVNI ŠTUDIJ Računalništvo in informacijske tehnologije POROČILO PRAKTIČNEGA IZOBRAŽEVANJA v Tom88 d.o.o. Poljčane Čas opravljanja od 22.4.2014 do 30.6.2014 Mentor Tomaž Kokot, univ. dipl. ekon. Študent Mihael Polanec Vpisna številka E1056187 E pošta mihael.polanec@gmail.com Telefon 040 819 664
i
ii
KAZALO UVOD...1 1 OPIS GOSPODARSKE DRUŽBE IN PRODUKTOV...2 1.1 LifeSal...2 1.2 ŠOU Ljubljana...2 1.3 Maribor Live...3 1.4 Borut Pahor...3 1.5 Pinatio...3 2 OPIS PRAKTIČNEGA IZOBRAŽEVANJA...4 3 STROKOVNO PODROČJE ALI PROJEKT...5 3.1 Seznanitev z orodji in tehnologijami...5 3.1.1 XAMPP...5 3.1.2 FileZilla Client...5 3.1.3 CodeIgniter...5 3.1.4 Bootstrap...6 3.2 Projekt - spletna stran modro za študente...6 3.2.1 Načrtovanje spletne strani...6 3.2.2 Pregled novic...8 3.2.3 Prikaz ostalih strani...11 3.2.4 Prijava v nadzorno ploščo...13 3.2.5 Bannerji...14 3.2.6 Kategorije...16 3.2.7 Nastavitve...18 3.2.8 Novice...19 3.2.9 Socialna omrežja...19 3.3 Projekt - spletna stran FlawlessCode...20 3.3.1 Načrtovanje...20 3.3.2 Implementacija strani...21 3.3.3 Sprememba jezika...22 3.3.4 Vsebina, ki se prilagaja širini okna...23 4 SKLEP...25 iii
KAZALO SLIK Slika 3.1: delovanje aplikacije z uporabo ogrodja CodeIgniter...6 Slika 3.2: podatkovna baza spletne strani...7 Slika 3.3: Postavitev vsebine na spletni strani...7 Slika 3.4: hierarhična zgradba administracijske strani...8 Slika 3.5: hierarhična zgradba strani za uporabnika...8 Slika 3.6: Metoda index...9 Slika 3.7: metoda stran...10 Slika 3.8: prikaz datuma novice...11 Slika 3.9: zgeneriran glavni meni...12 Slika 3.10: metoda prikazi...13 Slika 3.11: Prijavni obrazec...14 Slika 3.12: seznam bannerjev...15 Slika 3.13: obrazec za urejanje bannerjev...15 Slika 3.14: izvorna koda za dodajanje, brisanje in urejanje bannerjev...16 Slika 3.15: urejevalnik CKEditor...17 Slika 3.16: inicializacija CKEditorja...17 Slika 3.17: AJAX zahteva za preverjanje pravilnosti url - ja...18 Slika 3.18: PHP skripta za preverjanje unikatnosti url - ja...18 Slika 3.19: seznam nastavitev...19 Slika 3.20: preverjanje unikatnosti url naslova novic...19 Slika 3.21: koda za vdelavo za Facebook...20 Slika 3.22: začetna stran spletne strani flawless-code.com...20 Slika 3.23: shema podatkovne baze...21 Slika 3.24: inicializacija knjižnice fullpage.js...22 Slika 3.25: kontrolnik glavne strani...23 Slika 3.26: preprost media query...24 Slika 3.27: prikaz spletne strani na pametnem telefonu...24 iv
UVOD V tretjem letniku je kot del 6. semestra visokošolskega študijskega programa Računalništvo in informacijske tehnologije potrebno opraviti obvezno praktično usposabljanje. Svoje praktično usposabljanje sem opravljal v podjetju TOM88 d.o.o., ki ima sedež v Spodnji Brežnici v občini Poljčane. Usposabljanje je potekalo od 15.4.2014 pa do 30.6.2014. V podjetju so mi zaupali načrtovanje in razvoj dveh spletnih strani. Za samo implementacijo sem uporabljal jezike HTML, javascript, PHP ter ogrodje CodeIgniter, ki je napisano v tem jeziku in nam olajša razvoj spletnih strani z vzpostavitvijo arhitekture model-view-controller (MVC), semantičnimi oziroma iskalnikom prijaznimi URL ji ter številnimi pripravljenimi knjižnicami in funkcijami. 1
1 OPIS GOSPODARSKE DRUŽBE IN PRODUKTOV TOM88, d.o.o. je mlado podjetje, ki se ukvarja z razvojem informacijsih rešitev. Ustanovljeno je bilo leta 2012. Podjetje se natančneje ukvarja z razvojem mobilnih, spletnih in namiznih aplikacij ter z grafičnim oblikovanjem. V podjetju smo se zbrali študentje iz Maribora, kateri študiramo na treh različnih fakultetah. Tomaž Kokot, študent druge stopnje Ekonomsko - poslovne fakultete v Mariboru in direktor ter lastnik podjetja skrbi za vodenje. 1.1 LifeSal Brezplačen farmacevtsko-zdravstveni pripomoček, namenjen uporabnikom pametnih telefonov s platformami ios, Android in Windows Phone 8. Aplikacija uporabniku omogoča: prihranek ob nakupu izdelkov, ki jih ponujajo lekarne, pregled vpliva vremena na počutje, nastavitev opomnikov za zdravila ter kontracepcijo, prikaz najbližjih lekarn v uporabnikovi okolici s podrobnimi podatki, menstrualni koledar, beleženje dnevnega vnosa kalorij s pomočjo števca kalorij, izračun indeksa telesne mase (ITM). 1.2 ŠOU Ljubljana Aplikacija omogoča študentom interaktivno povezavo z organizacijo ŠOU v Ljubljani. Uporabniki lahko spremljajo: dogodke, novice, razpise, poslušajo študentski radio, pregledajo lahko zemljevid s fakultetami, študentskimi domovi ter knjižnjicami. Na voljo pa so jim tudi podatki o organizaciji in njihovih zaposlenih. 2
1.3 Maribor Live Maribor Live je aplikacija izdelana za mestno občino Maribor. Uporabniku omogoča spremljanje dogajanja skozi spletne kamere, postavljene na različnih mestih v Mariboru. Aplikacija je na voljo za uporabnike operacijskih sistemov ios in Android. 1.4 Borut Pahor Aplikacija je bila izdelana za predvolilno kampanjo predsednika Republike Slovenije. Naročnik je bil Borut Pahor saj je želel vzpostaviti stik z mlajšo populacijo preko sodobnih tehnologij. Izdelana je bila mobilna aplikacija preko katere je obveščal uporabnike o najnovejših novicah in dogodkih na katerih je sodeloval. 1.5 Pinatio Pinatio je informacijski sistem, namenjen organizacijam za interaktivno komunikacijo z gledalci oz. uporabniki. Za komunikacijo obsega mobilni,spletni odjemalec ter strežnik. Komunikacija in obdelava podatkov poteka realno časovno. 3
2 OPIS PRAKTIČNEGA IZOBRAŽEVANJA Obvezna študijska praksa v podjetju TOM88, d.o.o. je bila razdeljena v tri dele. V prvem delu je bila moja naloga vzpostavitev delovnega okolja za razvoj spletnih strani ter seznanitev z ogrodjem CodeIgniter. Kot uporabniku Microsoftovega operacijskega sistema Windows 7 sem lahko izbiral med večimi programskimi paketi (npr. WAMP, XAMPP), na koncu pa sem za razvoj uporabljal XAMPP, ki nam ponuja Apache HTTP strežnik, MySQL podatkovno bazo ter prevajalnike za interpretiranje PHP in Perl skript. Prav tako sem si moral namestiti FTP odjemalca FileZilla, da sem lahko končano spletno stran naložil na pravi strežnik. V drugem delu je sledil razvoj spletne strani modro za študente (modrozastudente.si), v tretjem pa razvoj predstavitvene strani ekipe FlawlessCode (flawless-code.com). 4
3 STROKOVNO PODROČJE ALI PROJEKT 3.1 Seznanitev z orodji in tehnologijami V tem poglavju bodo na kratko predstavljena vsa orodja in uporabljene tehnologije uporabljene pri praktičnem izobraževanju, programska jezika PHP in javascript, označevalni jezik HTML in kaskadne stilske predloge CSS niso opisane. 3.1.1 XAMPP XAMPP je brezplačen programski paket za razvoj spletnih rešitev sestavljen v glavnem iz Apache HTTP strežnika, podatkovne baze MySQL ter programov za interpretiranje jezikov PHP in Perl. Namen paketa je v osnovi ta da lahko razvijalci lokalno razvijajo in testirajo spletne rešitve brez dostopa do svetovnega spleta, čeprav je mogoče paket uporabiti tako, da dejansko služi kot spletni strežnik. 3.1.2 FileZilla Client FileZilla Client je brezplačen FTP odjemalec, ki nam omogoča da se povežemo s spletnim strežnikom preko File Transfer Protokola (FTP) in še nekaterih. Služi nam da ko končamo z razvojem spletne strani lokalno spletno stran prenesemo na pravi strežnik. 3.1.3 CodeIgniter Ker sem osnovno znanje o programskem jeziku PHP že imel iz fakultete je bila moja prva naloga seznanitev z php ogrodjem CodeIgniter. CodeIgniter je odprto kodno ogrodje, ki služi razvoju dinamičnih spletnih vsebin s programskim jezikom PHP. CodeIgniter delno temelji na priljubljeni arhitekturi Model-View-Controller. Programer mora obvezno implementirati razrede za kontrolerje (Controller) in poglede (View) medtem ko so modeli (Model) opcijski. Prikaz delovanja spletne aplikacije z ogrodjem CodeIgniter prikazuje slika 3.1 na kateri lahko vidimo kako uporabnik dobi zahtevano spletno stran. Uporabnik najprej s pomočjo ustreznega odjemalca (brskalnika) pošlje zahtevo na naš strežnik, kjer se v datoteki index.php pogkliče usmerjevalnik routes.php ki pregleda če smo definirali razne preusmeritve za zahtevano spletno stran, ter nato izbere želen kontroler. Kontroler komunicira z ustreznimi modeli, s pomočjo katerih pridobi želene podatke recimo iz podatkovne baze, ko kontroler pridobi vse podatke naloži ustrezen pogled in pogledu poda pridobljene podatke. Pogled nato zgradi ustrezno HTML kodo, ki jo potem brskalnik interpretira ter prikaže končnemu uporabniku. Privzeta zgradba url naslova pri aplikacijah ki temeljijo na ogrodju CodeIgniter je sledeča: protokol://domena/index.php/kontroler/funkcija/[dodatni parametri]. Protokol je ponavadi HTTP ali HTTPS, domena je domena naše strani recimo primer.si, index.php je privzeta skripta, ki jo lahko skrijemo tako, da ustrezno spremenimo.httaccess datoteko, kontroler (Controller) je razred v aplikaciji, funkcija je funkcija znotraj kontrolerja, dodatni parametri pa so opcijski. 5
Slika 3.1: delovanje aplikacije z uporabo ogrodja CodeIgniter 3.1.4 Bootstrap Bootstrap je brezplačna zbirka orodij in gradnikov za izdelavo spletnih strani. Vsebuje HTML in CSS predloge za pisave, obrazce, navigacijo po strani, ter nam opcijsko ponudi možnost javascript razširitve, kjer lahko naredimo spletno stran ki se bo prilagajala velikosti okna odjemalca. 3.2 Projekt - spletna stran modro za študente Izdelati sem moram spletno stran modro za študente, s pomočjo katere izvemo zadnje novice združenja študentov, ter podatke o združenju (kdo sodeluje, cilji, načrti) in njihov kontakt. 3.2.1 Načrtovanje spletne strani Pred implementacijo je bilo potrebno pregledati želje ter zahteve naročnika, ki so bile da spletna stran omogoča: prikaz novic prikaz strani o združenju kontakt prikaz aktivnosti na socialnem omrežju Facebook prikaz aktivnosti na socialnem omrežju Twitter dodajanje / urejanje novic dodajanje / urejanje strani (kontaktov) dodajanje / urejanje socialnih omrežij Sliki 3.2 in 3.3 nam prikazujeta zgradbi podatkovne baze za spletno stran, ter kako bodo postavljeni vizualni elementi spletne strani, ki bo vidna končnemu uporabniku oz. obiskovalcu. 6
Slika 3.2: podatkovna baza spletne strani Slika 3.3: Postavitev vsebine na spletni strani Na slikah 3.4 in 3.5 je mogoče videti hierarhično podobo administrativne strani, ter strani namenjene končnemu uporabniku. 7
Slika 3.4: hierarhična zgradba administracijske strani Slika 3.5: hierarhična zgradba strani za uporabnika 3.2.2 Pregled novic Gledanje, ter branje novic je namenjeno vsem uporabnikom spletne strani. Uporabniki lahko novice zgolj pregledujejo v seznamu, kjer je viden naslov novice, slika in kratek opis novice. Ker je ponavadi na spletni strani več novic, se novice razdelijo na več pod strani, saj je tako stran bolj pregledna ter se prav tako hitreje prikaže (zgenerira). Novice se sortirajo po datumu in sicer najnovejše najprej. Novice se prikazujejo s pomočjo krmilnika Novice, ta krmilnik ima naslednje metode: index, je privzeta metoda, in se pokliče takrat ko ne navedemo metode v url naslovu, v našem primeru pa pokliče metodo stran, kjer naloži prvo stran z novicami, kar lahko vidimo na sliki 3.6. stran, je metoda, ki preveri katera je zahtevana stran iz seznama novic (ta podatek pridobi 8
iz url naslova), nato pa od ustreznega modela zahteva, da prebere v bazi seznam novic, nato pa zgradi končni pogled za uporabnika, prikaz metode se vidi na sliki 3.7. prikazi, je metoda, ki se pokliče vedno ko uporabnik želi prebrati celotno novico, takrat s pomočjo ustreznega modela, pridobi podrobnosti o novici, in pošlje te podatke ustreznemu pogledu, ki zgradi ustrezen pogled za končnega uporabnika. Slika 3.6: Metoda index 9
Slika 3.7: metoda stran Z prikaz strani je strani je bil uporabljen HTML5 in CSS3, kar je razvidno iz slik, kjer lahko vidimo na sliki 3.8, kjer je zgoraj levo pripadajoča HTML koda, sledi ji CSS koda za stil rezultat pa je viden desno spodaj. 10
Slika 3.8: prikaz datuma novice 3.2.3 Prikaz ostalih strani Ostale strani so v podatkovni bazi poimenovane kategorije. Pod ostale strani štejemo vse strani, do katerih dostopamo preko glavnega menija (desno zgoraj). Ta meni se generira na podlagi kategorij, katere imamo v podatkovni bazi. Kategorije lahko imajo podkategorije, podkategorije, pa ne morejo imeti podkategorij, torej gre so lahko razdeljene zgolj v dva nivoja. Prikaz zgeneriranega menija (spodaj) ter pripadajočo HTML (zgoraj levo) in CSS (zgoraj desno) kodo lahko vidimo na sliki 3.9. Za prikaz posameznih strani skrbi krmilnik Stran, ki ima sledeče metode: index privzeta metoda, pokliče se ko ne navedemo želene metode, metoda nas 11
preusmeri na osnovno stran z novicami. prikazi metoda ki preko parametra ki ga dobimo iz url naslova poišče ustrezno kategorijo v podatkovni bazi s pomočjo ustreznega modela kategorije_model pridobi vse podatke in naloži ustrezen pogled, če pa kategorija (stran) ne obstaja v podatkovni bazi pa sledi preusmeritev na domačo stran z novicami, metoda je vidna na sliki 3.10. posljimail($mojemail), metoda ki preko ustrezne knjižnice pošlje email lastniku strani. Slika 3.9: zgeneriran glavni meni 12
Slika 3.10: metoda prikazi 3.2.4 Prijava v nadzorno ploščo Za urejanje vsebin na spletni strani se je potrebno prijaviti v sistem, to lahko administrator stori preko obrazca prikazanega na sliki 3.11, kjer vpiše svoje uporabniško ime ter geslo, ter kline gumb prijava. Ko administrator klikne gumb prijava se pošljejo podatki ustreznemu kontrolniku, ki preveri prijavne podatke, ter v primeru če so podatki pravilni dodeli sejo uporabniku in ga preusmeri na začetno stran nadzorne plošče, kjer lahko administrator ureja bannerje, kategorije, novice, nastavitve, socialna omrežja ter ureja svoj račun oz. lahko doda novega administratorja ali pa ga izbriše, če pa so prijavni podatki napačni pa mu izpiše sporočilo o napaki. 13
Slika 3.11: Prijavni obrazec 3.2.5 Bannerji Bannerji se ponavadi na spletnih mestih uporabljajo za namene spletnega oglaševanja ter promocije. Administrator lahko na spletni strani uporabi poljubno število bannerjev, za njihovo dinamično premikanje na uporabniški strani pa skrbi gradnik Carousel, katerega dobimo z knjižnico Bootstrap. Administrator mora za urejanje bannerja klikniti na moder gumb v ustrezni vrstici v seznamu bannerjev (slika 3.12), za dodajanje novega bannerja pa mora klikniti zelen gumb dodaj banner, ki se nahaja pod obrazcem. Ko klikne na enega od gumbov se odpre obrazec prikazan na sliki 3.13. V primeru ko klikne na gumb uredi, so polja že izpolnjena s starimi podatki, prav tako je prikazana tudi trenutna slika. Če pa administrator klikne na gumb briši, pa se banner izbriše, implementacija metod za urejanje ter brisanje je vidna na sliki 3.14. 14
Slika 3.12: seznam bannerjev Slika 3.13: obrazec za urejanje bannerjev 15
Slika 3.14: izvorna koda za dodajanje, brisanje in urejanje bannerjev 3.2.6 Kategorije Kot že omenjeno so kategorije ostale strani, ki so na voljo končnemu uporabniku preko glavnega menija. Zaradi uporabe zgolj ene tabele v podatkovni bazi, je v tej tabeli uporabljen stolpec id_kategorije, kateri nam pove katera kategorija je starš trenutni kategoriji, če pa je ta kategorija glavna, pa ima polje vrednost -1. Če še enkrat pogledamo zgradbo kategorije ima naslednje lastnosti: id zaporedna številka kategorije, ime prikazno ime kategorije, tip dve možni vrednosti, dinamičen ali statičen prikazi_podkategorije če ima kategorija podkategorije ali jih prikažemo na dnu vsebine. vsebina HTML koda oz. urejeno besedilo, ki se bo prikazovalo na spletni strani, url zadnji del url ja npr: http://modrozastudente.si/stran/prikazi/o-nas zaporedna_stevilka katera po vrsti se bo prikazala kategorija. Zaradi velike podobnosti v grafični podobi seznama, ter implementacije brisanja, urejanja, ter dodajanja kategorij, bo tukaj predstavljena zgolj novosti pri vsebini, ki jo urejamo z urejevalnikom ckeditor, primer grafičnega urejevalnika je viden na sliki 3.15. Za urejanje je sicer uporabljen element <textarea>, ki ga z ustrezno Javascript kodo spremenimo da postane bogat urejevalnik vsebine, primer inicializacije CKEditorja prikazuje slika 3.16. 16
Slika 3.15: urejevalnik CKEditor Slika 3.16: inicializacija CKEditorja Kot že omenjeno mora biti url vedno različen oz. unikaten, zato da lahko kontrolnik poišče ustrezno kategorijo (novico) v podatkovni bazi, pri izbiri želenega url naslova moramo biti pozorni na naslednja pravila: naslov vsebuje samo znake angleške abecede, ter števke (0 9), zaželena je uporaba malih črk, naslovi se v podatkovni bazi ne smejo podvajati. Da bi preprečili podvajanje naslovov se le ti sprotno preverjajo ko uporabnik tipka želeni url naslov s pomočjo Javascript funkcije prikazane na sliki, kjer preko AJAX - a pokliče PHP skript(slika 3.18), ki preveri ali je naslov veljaven in ga uporabnik lahko uporabi. 17
Slika 3.17: AJAX zahteva za preverjanje pravilnosti url - ja Slika 3.18: PHP skripta za preverjanje unikatnosti url - ja 3.2.7 Nastavitve Administrator ima možnost urejanje nekaterih nastavitev, kot so denimo ključne besede, copyright besedilo, opis spletne strani, vklop napisa pri bannerjih, prikaz pik na bannerjih (takrat ko jih je več) ter email na katerega jim lahko uporabniki pišejo. Seznam nastavitev je viden na sliki 3.19. Administrator želeno vrednost spremeni tako da spremeni vrednost v polju za urejanje (sredinski stolpec) ter klikne na moder gumb uredi, ki ustreznemu kontrolniku pove katero nastavitev mora posodobiti. 18
Slika 3.19: seznam nastavitev 3.2.8 Novice Način upravljanja novic je podoben načinu upravljanja kategorij, ključna razlika je ta, da novic ne moramo gnezditi (jih kategorizirati, določiti starša ). Za upravljanje url naslovov skrbi ista Javascript funkcija kot je vidna na sliki 3.17, skripta ki preveri unikatnost url naslova novic pa je prikazana na sliki 3.20. Slika 3.20: preverjanje unikatnosti url naslova novic. 3.2.9 Socialna omrežja Pri socialnih omrežjih mora administrator vnesti ime socialnega omrežja (Facebook, Twitter) in ustrezno embed kodo, ki jo pridobi od izbranega ponudnika storitev. Ta embed koda se potem na spletni strani prikaže desno pod bannerji kjer se nahajajo vsa socialna omrežja, primer embed kode za Facebook stran za združenje modro za študente je viden na sliki 3.21. 19
Slika 3.21: koda za vdelavo za Facebook 3.3 Projekt - spletna stran FlawlessCode Predstavitvena spletna stran skupine FlawlessCode služi predstavitvi skupine, ki deluje znotraj podjetja TOM88 d.o.o. Končni izgled strani je viden na sliki 3.22 oz. na naslovu http://flawlesscode.com/site. Slika 3.22: začetna stran spletne strani flawless-code.com 3.3.1 Načrtovanje Skupaj z ekipo smo najprej določili zahteve spletne strani, ki so sledeče: vsa vsebina je vidna na enem naslovu, vsebina se prikazuje po straneh/sekcijah, pri čemer je lahko vidna samo ena sekcija na enkrat, vsaka sekcija zavzame celotno stran oz. vidno polje brskalnika, pomikanje po spletni strani s smernimi tipkami na tipkovnici, pomikanje po spletni strani z miškinim koleščkom, pomikanje po strani z uporabo glavnega menija, vsebina strani (sekcije): 20
domov, kaj delamo, kako delamo, projekti: projekt 1,, projekt n, kontakt podpora večim jezikom (slovenščina, angleščina, nemščina, ) vsebina, ki se prilagaja širini okna (web responsive design). Ko smo določili vsebino in osnovni izgled je grafični oblikovalec pripravil izgled posameznih strani, sledilo je načrtovanje podatkovne baze, shema le te je vidna na sliki 3.23. Slika 3.23: shema podatkovne baze 3.3.2 Implementacija strani Sedaj je sledila implementacija, da ni bilo potrebno vsega pisat na novo sem uporabil jquery knjižnico fullpage.js kjer z uporabo ustreznih css razredov v HTML kodi ter ustrezno inicializacijo knjižnice sama pripravi celotno stran primer inicializacije je viden na sliki 3.24. Knjižnico fullpage.js je razvil Alvaro Trigo. Za implementacijo je bil prav tako ponovno uporabljen programski jezik PHP ter ogrodje CodeIgniter. 21
Slika 3.24: inicializacija knjižnice fullpage.js 3.3.3 Sprememba jezika V glavnem meniju je uporabniku na voljo meni z jeziki, ki jih spletna stran ponuja. Ko uporabnik klikne na želen jezik se v ustreznem kontrolerju pokliče metoda, ki nastavi želen jezik, v primeru da uporabnik prvič pride na stran pa isti kontrolnik najprej preveri, kakšen jezik uporablja njegov spletni brskalnik in če njegovega jezika ni na voljo se nastavi privzeti jezik, ki je uporabljen v podatkovni bazi. Odločitev o uporabi želenega jezika se shrani v poseben piškotek, tako spletna stran naslednjič ve, v katerem jeziku bi uporabnik želel pregledati spletno stran. Postopek shranjevanja v piškotek ter postopek izbire jezika je viden na sliki 3.25. 22
Slika 3.25: kontrolnik glavne strani 3.3.4 Vsebina, ki se prilagaja širini okna Da se je vsebina spletne strani prilagajala širini okna klienta so bili uporabljeni tako imenovani media query ji s pomočjo katerih se velikost elementov spreminja glede na interval, ki je določen v posameznem media query ju. Prav tako kot širino elementov moramo tudi spremeniti velikost pisave, da ohranimo lepši izgled spletne strani, preprost primer media query ja je viden na sliki 3.26, če je širina okna manjša ali enaka 1290px potem elementu z id jem glava spremeni notranji odmik levo in desno na 6% in zgoraj na 18px. S spreminjanjem velikostim elementom in načinom prikaza le teh lahko popolnoma spremenimo izgled spletne strani na mobilnih telefonih, tablicah ter osebnih računalnikih. Na sliki 3.22 je viden primer kako izgleda spletna stran na osebnih računalnik, medtem ko slika 3.27 prikazuje izgled aplikacije na pametnem telefonu, kjer je ekran ozek. Desno zgoraj se pojavi poseben gumb, s pomočjo katerega dostopamo do glavnega menija, ki se zapelje iz desne strani, kot v nekaterih mobilnih aplikacijah. 23
Slika 3.26: preprost media query Slika 3.27: prikaz spletne strani na pametnem telefonu 24
4 SKLEP Praktično izobraževanje v podjetju TOM88 d.o.o. je bilo dinamično in zanimivo, vključen sem bil v načrtovanje in razvoj dveh spletnih strani, tako sem nadgradil osnovno znanje o jezikih PHP, Javascript, HTML, CSS ter na novo spoznal ogrodja za PHP, podrobneje CodeIgniter, katerega predhodno nisem poznal. Spoznal sem da lahko pride do odstopanj pri končani spletni strani, ki jo naložimo na strežnik, zaradi recimo različnih verzij PHP ki jih podpira Apache strežnik tako da pride do napak v delovanju spletne strani. Prav tako sem pridobil izkušnje v komunikaciji pri delu v ekipi in sodelovanju med člani le te, za kar se moram zahvaliti celotni ekipi TOM88 d.o.o. 25