VEB I MOBILNI DIZAJN

ISHOD 1

ASIM MAHMUTOVIĆ

KRITERIJUMI PO KOJIMA DIJELIMO WEB SAJTOVE

Podjela web sajtova prema sadržaju - namjeni: personalni (lični) web sajtovi, komercijalni web sajtovi, informativni web sajtovi, blogovi, forumi, socijalne mreže, web sajtovi za dijeljenje sadržaja, web direktorijumi, web alati...

Podjela web sajtova prema interaktivnosti sa posjetiocima: Statički i dinamički web sajtovi

Podjela web sajtova prema tehnologiji izrade: HTML, XHTML, web sajtovi sa CMS-om (CMS je skraćenica od engleskih riječi Content Management System, što bi u prevodu značilo sistem za upravljenje sadržajem – u ovom slučaju internet prezentacije), i Flash web sajtovi

KRITERIJUMI PO KOJIMA DIJELIMO WEB SAJTOVE

Kako god podijelili web sajtove, jedno im je

zajedničko: svi nastoje da imaju što veću

posećenost! Za koji web sajt ćete se Vi odlučiti

najviše zavisi od Vaših potreba. Ako je u pitanju

Vaš biznis, preporičujemo Vam da se ne

ustručavate da uložite u kvalitetan web sajt, jer

će Vam se ta investicija vrlo brzo isplatiti.

PODJELA WEB SAJTOVA PREMA NAMJENI

Komercijalni sajtovi

Komercijalni web sajtovi imaju za cilj da predstave proizvode i usluge koje nudi vlasnik sajta i privuče potencijalne klijente. Osim jednostavnog predstavljanja roba i usluga komercijalni web sajtovi sve češće omogućavaju online naručivanje i plaćanje preko interneta. Danas se prisustvo na internetu podrazumijeva za svaku ozbiljnu firmu. Ovi web sajtovi treba da budu jedinstveni, privlačni posjetiocima i jednostavni za korišćenje, u protivnom, umjesto da privuku, mogu da odbiju potencijalne kupce, odnosno korisnike usluga koje web sajt nudi.

PODJELA WEB SAJTOVA PREMA NAMJENI

Personalni (lični) web sajtovi

Potreba ljudi ili organizacija da drugima kroz slike i riječi predstave sebe, svoju organizaciju, porodicu, aktivnosti, interesovanja, razmišljanja... doprinijela je popularnosti ovog tipa web sajtova. Na internetu je moguće pronaći besplatan prostor za ubacivanje takvih sadržaja, ali to treba izbjegavati jer imaju mnoga ograničenja i u potpunosti zavise od matičnog web sajta.

PODJELA WEB SAJTOVA PREMA NAMJENI

Informacioni sajtovi

Sama riječ kaže da su to web sajtovi koji pružaju

informacije o razlicitim temama. Najpoznatiji je

svakako www.wikipedia.org koji predstavlja najveću

online enciklopediju. Ovaj web sajt je interaktivan jer

omogućava posjetiocima da pišu svoja objašnjenja.

PODJELA WEB SAJTOVA PREMA NAMJENI

Forumi

Forumi su vrlo slični blogovima, ali za razliku od bloga imaju unaprijed zadate oblasti o kojima se diskutuje unutar kojih se

otvaraju pojedine teme, postavljaju pitanja i očekuje pomoć u vidu odgovora. Postoje opšti forumi na kojima se diskutuje o svim temama bez ograničenja kao što je na primer www.burek.co.rs ili www.mycity.rs ili forumi specijalizovani na odreĎene oblasti. Vrlo često su forumi dio nekog web sajta gdje se diskutuje na temu o kojoj je sam web sajt

domaćin. Za realizaciju foruma najčešće se koriste gotovi moduli foruma sa CMS-om.

PODJELA WEB SAJTOVA PREMA NAMJENI

Socijalne mreže

Socijalne mreže su web sajtovi za masovno meĎusobno povezivanje ljudi, razmjene

informacija, fotografija i drugih ličnih podataka. Postoje i socijalne mreže koje povezuju ljude u poslovnom ili strukovnom smislu. Najpoznatije socijalne mreže, svakako su Facebook i Twitter. Ovi web sajtovi masovno se koriste za reklamu i promocije firmi, proizvoda i usluga.

PODJELA WEB SAJTOVA PREMA NAMJENI

Web sajtovi za deljenje sadržaja

Ovi web sajtovi omogućavaju ljudima da postavljaju odgovarajuće sadržaje na internet (slike, muziku, video klipove...) i te sadržaje dijele

sa drugima. Najpoznatiji meĎi takvim web sajtovima je Youtube.

PODJELA WEB SAJTOVA PREMA NAMJENI

Web direktorijumi i poslovni adresari

Web direktorijumi su sajtovi koji sadrže uglavnom linkove prema drugim sajtovima. Sajtove razvrstavaju po kategorijama i osim kratkog opisa web sajta, eventualno jedne slicice (logo) i linka ne sadrže ništa drugo. Neki web direktorijumi zahtijevaju

povratni link. Najpoznatiji i najznačajniji web direktorijum na svjetskom nivou je svakako www.dmoz.org, a od domaćih spomenimo www.direktorijum.org, www.linkovanje.net, www.kataloglinkova.net, www.linkovi.biz, www.dodajsajt.net i tako dalje.

PODJELA WEB SAJTOVA PREMA NAMJENI

Web alati

Web alati su sajtovi koji nude razne alate za Vaš web sajt, kao što je na primjer voĎenje statistike, mjerenje brzine interneta, mjerenje pinga, provjere geografskog položaja

neke IP adrese i slično. U web alate možemo svrstati i pretraživače bez kojih je korišćenje interneta postalo nezamislivo (Google, Yahoo, Bibg, AOL, Ask...).

Spomenimo još web sajtove za zabavu - online igrice, edukativni web sajtovi (sajtovi sa raznim uputstvima - tutorijali), sajtovi za download muzike, filmova ili gorovih rješenja u svim oblastima i tako dalje...

PODJELA WEB SAJTOVA PREMA INTERAKTIVNOSTI

Statički web sajt

Statički web sajtovi su najjednostavniji, najbrže se rade, te su obično i najjeftiniji. Najčešće se rade u HTML-u, odnosno u XHTML-u u kombinaciji sa CSS-om. Mogu imati animacije i java skripte, ali nemaju interaktivnost sa posjetiocima.

Sva aktivnost posjetioca ovakvog web sajta svodi se na

pregledavanje sadržaja i eventualno korišćenje kontakt forme. Ne zahtijevaju bazu podataka. Cjelokupan HTML kôd izvršava se u browser-u posjetioca. Obično se brže

učitavaju i lakše ih je optimizovati za pretraživače. Pogodni su za manje zahtjevne web sajtove, sa manje podataka i gdje interakcija sa posjetiocima nije neophodna.

PODJELA WEB SAJTOVA PREMA INTERAKTIVNOSTI

Dinamički web sajt

Dinamički web sajt omogućava manju ili veću interakciju sa posjetiocima, prikuplja podatke o posjetiocima i

njihovim interesovanjima, omogućava ili onemogućava pristup djelovima sajta odreĎenim kategorijama posjetioca, automatski šalje obavještenja ili vijesti posjetiocima koji to žele, te može da omogućava pronalaženje i sortiranje

podataka... Obično se rade u nekom programskom jeziku (php, asp...) i kôd im se izvršava na serveru, pa tek potom šalje browser-u.

PODELA WEB SAJTOVA PREMA INTERAKTIVNOSTI

Dinamički web sajt

Podaci se smeštaju u bazu podataka, odakle se po potrebi "pozivaju". Najčešće se rade zajedno sa CMS-om kojim se vlasniku web sajta omogućava da vrlo jednostavno i brzo ažurira web sajt, bez ikakvog posebnog znanja o web dizajnu. Komplikovaniji su za izradu i optimizaciju i naravno, znatno skuplji.

Tu trebate znati da dva web sajta mogu izgledati identično, ali da ipak bude velika razlika u njihovoj cijeni jer CMS, baza podataka, admin panel... nisu vidljivi posjetiocu web sajta, već samo Vama, odnosno administratoru sajta.

PODJELA WEB SAJTOVA PREMA TEHNOLOGIJI

IZRADE

WEB sajt rađen sa HTML/XHTML

HTML/XHTML je najprostija tehnika, gdje se koriste

HTML, odnosno XHTML kôdovi koji direktno čitaju web browser-i i koriste se za izradu jednostavnih statičkih web sajtova. Treba naglasiti da je HTML statična

stranica zastarjela tehnologija i danas se rijetko koristi.

PODJELA WEB SAJTOVA PREMA NAMJENI

Blogovi

Blogovi su web sajtovi namijenjeni da podijelite svoje misljenje

sa drugima na internetu bez obzira na temu ili sadržaj, da

ucestvujete u diskusijama sa drugim blogerima, postavljate slike

ili komentare... Do bloga na internetu moguće je doći i potpuno

besplatno preko sajtova koji nude besplatno postavljanje bloga,

kao što je na primer www.blog.rs, ali trebate znati da u tim

slučajevima nemate vlastitu web adresu, već se na internetu

pojavljujete kao poddomen pomenutog sajta. Ovakva rješenja

imaju mnogobrojna ogranišenja, tako da ako želite nezavistan

blog, sa sopstvenom web adresom, naša preporuka je da

registrujete svoj domen i zakupite svoj host, a sam blog možete

uraditi pomoću vjerovatno najpoznatijeg Open Sourse CMS-a

www.wordpress.org

PODJELA WEB SAJTOVA PREMA TEHNOLOGIJI

IZRADE

WEB sajt sa CMS-om

Web sajt sa CMS-om je obično dinamičan web sajt, interaktivan je sa posjetiocima i zahtijeva duže vrijeme

izrade, web programiranje... Ovi web sajtovi mogu biti vrlo kompleksni sa kompletnim online prodavnicama - online shop, a mogu biti povezani sa sistemima za internet plaćanja roba i usluga. CMS omogućava korisniku da bez imalo znanja iz web dizajna sam ažurira sadržaj svog web sajta. Sistemi CMS mogu se namjenski raditi za pojedinačni web sajt, ali postoje

gotovi, pa i besplatni sistemi.

PODELA WEB SAJTOVA PREMA TEHNOLOGIJI

IZRADE

Flash web sajt

Web sajtovi uraĎeni u flash-u mogu biti veoma atraktivni, sa animacijama, zvucima - muzikom, mogu biti interaktivni sa korisnicima, sa ili bez CMS-a... Flash sajtovi predstavljaju prave male filmske predstave na web-u!

Ali nedostatak flash sajtova je u tome sto se sporo učitavaju, optimizacija za pretraživače je nemoguća misija, a CMS je vrlo teško napraviti.

RAZVOJ MOBILNIH APLIKACIJA

Mobilna aplikacija je program koji je dizajniran da radi na mobilnom ureĎaju kao što je mobilni telefon, tablet ili wearable (pametni sat…). Te aplikacije imaju pristup senzorima i specifičnim funkcionalnostima uredjaja (kamera, žiroskop, vibracija i dr.). Razvijanje aplikacija za mobilne ureĎaje zahtijeva

razmatranje karakteristika ovih ureĎaja i njihovih ograničenja (rade na bateriji i imaju slabije procesore i manje RAM memorije nego desktop računari). Programeri takoĎe moraju imati u vidu širok spektar: dimenzija ekrana, hardverske specifikacije i konfiguracije različitih uredjaja. Na većini mobilnih uredjaja se nalazi jedan od sledeća dva operativna sistema: Android i IOS.

RAZLIČITI PRISTUPI IZRADI MOBILNIH

APLIKACIJA

Mobilne aplikacije se ponekad kategorizuju u zavisnosti od toga koji je pristup korišćen pri izradi aplikacije, pa stoga možemo razvoj mobilnih aplikacija podijeliti na sledeće grupe:

Izvorne (native) mobilne aplikacije

Kvazi-izvorne mobilne aplikacije

Hybridne mobilne aplikacije

Responsivne web aplikacije

RAZLIČITI PRISTUPI IZRADI MOBILNIH

APLIKACIJA

Izvorne (native) mobilne aplikacije:

1. iOS app development

2. Android app development

Kvazi-izvorne mobilne aplikacije:

React Native

NativeScript

Xamarin

RAZLIČITI PRISTUPI IZRADI MOBILNIH

APLIKACIJA

Hybridne mobilne aplikacije

Ionic + Android.js

Quasar + Vue.js

Framework7 + React.js

Responsivne web aplikacije

RAZLIČITI PRISTUPI IZRADI MOBILNIH

APLIKACIJA

IZVORNE (NATIVE) MOBILNE APLIKACIJE

Izvorna aplikacija je softverski program koji je razvijen

za upotrebu na određenoj platformi ili uređaju. Buduci

da je izvorna aplikacija izgrađena samo za upotrebu

na određenom uređaju i njegovom operativnom

sistemu, ona ima mogucnost da maksimalno iskoristi

hardver i softver specifičan za uređaje tako da mogu

pružiti najbolje performanse.

Native aplikacije moraju biti napisane u

odgovarajucem programskom jeziku za svaki

operativni sistem, stoga se za iOS aplikacije

koristi Objective-C ili Swift, dok se nativne Android

aplikacije pišu u Javi ili Kotlin-u.

IZVORNE (NATIVE) MOBILNE APLIKACIJE

IZVORNE (NATIVE) MOBILNE APLIKACIJE

Da bi ste razvili “nativne mobilne aplikacije” na više

različitih platformi, potrebno je da u timu imate

softverske inženjere za svaki operativni sistem. Pored

velike (čitaj “skupe”) zavisnosti od specifičnog kadra,

treba naglasiti da je otežavajuca okolnost što ne

možemo da iskoristimo i podijelimo programski kod

između različitih verzija iste aplikacije. Zaključak je da

nativne aplikacije imaju superiorne perfomanse ali i

veliku cijenu.

KVAZI IZVORNE MOBILNE APLIKACIJE

Za izradu kvazi izvornih mobilnih aplikacija se koriste

frejmvorci (ReactNative i NativeScript) koji se baziraju

na web konceptima pri razvoju mobilnih aplikacija.

ReactNative i NativeScript koriste JavaScript, dok

Xamarin koristi C# pri razvoju ovih aplikacija. Tako

pisan kod se naknadno kompajlira u izvorni

programski jezik (u zavisnosti od platforme), a rezultat

je nešto što funkcioniše kao prava izvorna aplikacija.

KVAZI IZVORNE MOBILNE APLIKACIJE

Ovaj način izrade mobilnih aplikacija nam omogucava

da istovremeno (sa istim kodom) kreiramo aplikacije

za iOS i Android. Koristeci ovaj pristup pravimo veliku

uštedom u vremenu i troškovima proizvodnje

uz minimalan gubitak perfomansi.

Trenutno ReactNative, NativeScript i Xamarin, kažu

da kroz svoje API-je imaju 100% podršku izvorne

funkcionalnosti. Xamarin je u mogucnosti da pravi

iOS, Android, Windows, MacOS i Linux, dok

ReactNative i NativeScript su ograničeni samo na iOS

i Android.

KVAZI IZVORNE MOBILNE APLIKACIJE

Poznato je da aplikacije pravljenje za istu namjenu

ipak na iOS i Android platformama izgledaju malo

drugačije, jer svaka platforma prati sopstvene

smjernice. Ova činjenica je najveci problem kvazi

izvornih aplikacija pošto se kod piše jednom a koristi

za obje platforme. Postoji slučaj kada se elementi

grafički podudaraju sa smjernicama specifične

platforme, ali se njihov položaj na ekranu ne podudara

tj. položaj na ekranu je različit na različitim

platformama.

HIBRIDNE APLIKACIJE

Radi se o web aplikacijama koje koriste klasične web

tehnologije (HTML, JavaScript, i CSS)

i “Cordova” kao wrapper koji im daje mogucnost za

komunikaciju sa sistemskim komponentama i

kompajlira ih u aplikacije dostupne kroz tzv. webView

(ogoljeni browser).

HIBRIDNE APLIKACIJE

Slično kao i kod kvazi izvornih aplikacija i ovdje

programski kod pišemo samo jednom, a ostale verzije

(za svaku od željenih platformi) se generišu iz tog

koda. Ovakve aplikacije se zovu “hibridne”, jer ipak

nisu čisto nativne mobilne aplikacije, (sve prikazivanje

vrši preko tzv. “WebView” umjesto platforme

korisničkog interfejsa), ali takodje nisu ni čisto Web-

based (jer imaju pristup izvornim API-ima uređaja i

pripremljene su za distribuciju na odgovarajucoj

platformi).

HIBRIDNE APLIKACIJE

Problem hibridnih aplikacija je što nemaju pristup svim

sistemskim funkcijama a imaju slabije performanse

od nativnih aplikacija. Ne treba zanemariti da

gradeci hibridne aplikacije mi automatski nasledjujemo

sve probleme koje dolaze sa programiranjem na web-

u (različita podržanost funkcionalnosti za različite

browsere…)

HIBRIDNE APLIKACIJE

RESPONSIVE WEB APLIKACIJE

Web aplikacije se takodje mogu tretirti kao mobilne jer

se izvršavaju na mobilnom uredjaju ali imaju najlošije

perfomase i nemaju mnoge funkcionalnosti koje imaju

aplikacije kreirane na jednom od prethodno pomenutih

načina. Web aplikacije pružaju tzv. “application-like”

iskustvo pri čemu se ne instaliraju lokalno vec su

dostupne izvršavajući aplikaciju u okviru browser-

a na mobilnom uredjaju.

RESPONSIVE WEB APLIKACIJE

PROGRESSIVE WEB APP

“Progressive Web App” se mogu smatrati

naprednijom verzijom web aplikacija, jer

koriste service workers koji rade u pozadini aplikacije

i djeluju kao posrednici između internet mreže i

aplikacije, pa su u mogucnosti da presretnu mrežne

zahtijeve u pozadini. Progresivne web aplikacije

(PWA) se mogu izvršavati kada je uredjaj van mreže

(koristeci service workers), i imaju izvjesni hardverski

pristup uređaju (npr. obavještenja na uradjaju) koji su

tradicionalno dostupni samo izvornim mobilnim

aplikacijama.

FAZE PROCESA RAZVOJA

Generički pristup u razvoju programskih proizvoda

kroz prikaz osnovnih faza u procesu razvoja. Prema

Elliotu (2004) najstariji formalizirani pristup razvoju je

SDLC pristup (eng. Systems Development Life

Cycle). Spomenuti pristup je bio fazno orijentisan i

sadržavao je sljedede osnovne faze

FAZE PROCESA RAZVOJA

Kako bi smo lakše razumjeli sljededa poglavlja

priručnika, u ovom poglavlju prikazat demo generički

pristup u razvoju programskih proizvoda kroz prikaz

osnovnih faza u procesu razvoja. Prema Elliotu (2004)

najstariji formalizirani pristup razvoju je SDLC pristup

(eng. Systems Development Life Cycle). Spomenuti

pristup je bio fazno orijentiran i sadržavao je sljedede

osnovne faze

ULOGE U TIMU ZA RAZVOJ VEB I MOBILNIH

APLIKACIJA

projektni menadžer

UX dizajner

UI dizajner

front end developer

back end developer

tester softvera

PROJEKTNI MENADŢMENT

Uspješan projekt je rezultat dobrog upravljanja. Kako bi se postigli ciljevi potrebno je uložiti veliki napor i trud u ostvarivanju istih. Menadžeri su osobe zadužene za taj dio procesa te kao takve trebaju, osim dobro planiranog vremena, voditi i motivisati cijeli tim

ljudi. Čest problem u softverskom inženjerstvu je ograničenost budžeta i vremena.

PROJEKTNI MENADŢMENT

U softverskom inženjerstvu upravljanje softverskim projektom povjerava se softverskom menadžeru. Njegov posao je da projekt zadovolji i nadilazi ograničenja isto kao i isporuku visoko kvalitetnog proizvoda. Dobro voĎenje projekta ne može garantovati njegov

uspjeh ali s druge strane može izbjeći rezultate lošeg upravljanja odnosno kasnu isporuku, veće troškove i slično.

PROJEKTNI MENADŢMENT

Iako svi kriterijumi uspješnosti nisu isti za svaki

projekt, ciljevi koje menadžer želi postići su sljedeći:

Isporuka softvera na vrijeme

Zadržavanje ukupnih troškova unutar budžeta Isporučiti softver koji zadovoljava očekivanja

kupca

Održavati dobro funkcionalan razvojni tim čiji su članovi zadovoljni obavljenim poslom

PROJEKTNI MENADŢMENT

Unikatnost projekta: svaki novi softver drugačiji je na neki način od onog prethodnog te je stoga teško menadžerima predvidjeti moguće probleme. TakoĎe, svakodnevni tehnološki

razvoj može zahtijevati dodatne napore i učenja.

ŠTA JE UX DIZAJN?

Korisnički doživljaj ili korisničko iskustvo (User Experience – UX) je oblast koja opisuje načine kako se kreiraju proizvodi i usluge koje omogućuju njihovu jednostavnu upotrebu od strane korisnika, sa ciljem da oni brzo urade to zbog čega koriste proizvod ili uslugu.

ŠTA JE UX DIZAJN?

Da bismo lakše objasnili ove pojmove,

pokušajte da zamislite umotan poklon. Dobro

korisničko iskustvo, UX, jeste očekivanje koje

ima korisnik, i ono ga dovodi do odmotavanja

poklona. To je osecaj koji ljudi imaju dok

odvezuju vrpce, odmotavaju paket i otvaraju

kutiju s poklonom. Tu je važan i element

iznenađenja i izgrađeno uzbuđenje koje

osecate kada primate misteriozni predmet koji

je neko pripremio za vas.

ŠTA JE UX DIZAJN?

ŠTA JE UI DIZAJN?

Korisnički interfejs, UI, jeste materijal za

pakovanje (svečani papir ili obična plastična

kesica), način na koji je upakovan poklon (da li

je uredno presavijen ili naboran i zgužvan), kao

i naznaka kako se poklon otvara. Umotani

poklon, kao i interakcija između davaoca i

primaoca, čine cjelokupan doživljaj. Interfejs je

vrlo važan faktor u tom iskustvu.

ULOGE U TIMU ZA RAZVOJ VEB I MOBILNIH

APLIKACIJA

projektni menadžer

UX dizajner

UI dizajner

front end developer

back end developer

tester softvera

FRONT-END PROGRAMER

Front-end programer ima za cilj da potpuno

kreira, prilagodi i isprogramira vizuelni identitet

sajta, pripremi slike i tekstove, složi ih na

odgovarajuci način, prilagodi potrebama

korisnika i tržišta, i kreira sajt koji ostavlja

potpun efekat kod krajnjeg korisnik

Ranije se pojam „front-end developer” odnosio

na web inženjera koji razvija pretežno UI (User

Interface) za web sajtove i aplikacije, dakle

vizuelne i interaktivne aspekte istih. Mrežnu

komunikaciju sa serverom i poslovnu logiku su

uglavnom razvijali back-end developeri.

BACK-END DEVELOPER

Back-end developer realizuje "srce" cijele

aplikacije ili sajta, i sva logika, provjere, obrade

podataka i rad sa podacima pripada ovom

zanimanju. Ovaj tip poslova je obično za ljude

koji ne vole rad sa dizajnom, grafikom i

stilizovanjem, i više su orijentisani ka kodu,

optimizaciji istog i razvoju novih funkcionalnosti

sajta.

BACK-END DEVELOPER

TESTER SOFTVERA

Konkretno, u izradi softvera testiranje predstavlja pokušaj da se pronaĎu greške u softveru koji je napravljen. Softver je implementiran prema korisničkim zahtjevima kojima se rješava neki realni problem ili se

kreira neka korisna funkcionalnost koja predstavlja nešto što je potrebno krajnjim korisnicima. Kada se implementira, softver može u većoj ili manjoj mjeri da odgovara originalnim zahtjevima prema kojima je i napravljen.

TESTER SOFTVERA

Svako ponašanje softvera koje se ne slaže sa originalnim zahtjevima predstavlja grešku koju

je potrebno identifikovati i otkloniti. U užem smislu, testiranje predstavlja upravo provjeru

da li je odreĎeni softver u potpunosti implementiran prema originalnim korisničkim zahtjevima. U širem smislu testiranje

predstavlja sistem kontrole kvaliteta (QA – Quality Assurance) kojim se ne provjerava samo

softver već i sve njegove prateće komponente I karakteristike.