INFOTEH-JAHORINA Vol. 13, March 2014.

Web programiranje i responsive Web dizajn u ASP .NET MVC 4 Zoran Veličković

Milojko Jevtović

Visoka tehnička škola strukovnih studija Niš, Srbija [email protected]

Inženjerska akademija Srbije Beograd, Srbija [email protected]

Sadržaj—U ovom radu je razmatran problem responsive Web dizajna na platformi ASP .NET-a koju nudi Microsoft u verziju MVC 4. Analizirani su problemi u realizaciji adaptacije Web sadržaja na različite klijentske platforme. Korišćenjem MVC 4 šablona Internet aplikacije i izradom nekoliko različitih klasa view-a shodno klijentskim platformama, prikazana je efikasnost ove platforme. Predloženo rešenje responsivnog sajta je testirano na mobilnim, desktop i tablet platformama i pokazalo je odlične performanse. Ključne riječi - ASP .NET MVC 4, Web programiranje, Responsive Web dizajn.

I.

UVOD

Ekstremno buran razvoj Interneta je imao za posledicu da se mnogi pojmovi vezani za Web više puta dopunjavaju ili redefinišu. Pod pojmom Web stranice (engl. Web page) se najčešće podrazumeva Web dokument napisana u HTML-u [1] koji svim klijentima isporučuje isti sadržaj (statička Web stranica). Vrlo brzo se uvidelo da ovaj koncept ne zadovoljava sve potrebe korisnika, tako da su osmišljene dinamičke Web stranice koje isporučuju različiti sadržaj različitim klijentima. Ova ideja je dovela do toga da interaktivnost sa korisnikom postane veoma važna komponenta savremenih RIA (engl. Rich Internet Applications) aplikacija [2]. Takođe, važna karakteristika RIA aplikacija je da integrišu multimedijalne sadržaje koji okupiraju značajne mrežne resurse. Posebno su zahtevne bežične multimedijalne aplikacije kod kojih se primenjuju specijalizovane optimizacione tehnike za povećanje propusnog opsega komunikacionog kanala [3]. Evidentno je da su za kreiranje savremenih RIA aplikacija neophodna multidiscplinarna znanja vezana za savremene digitalne mreže [4], [5] i programiranje na klijentskoj i serverskoj strani Web aplikacije. Za ove potrebe razvijeni su specijalizovani skriptni programski jezici koji unapređuju interaktivnost i dinamiku Web aplikacije. Tako se na savremenim Web stranicama pored HTML koda koji predstavlja osnovne objekte Web stranice, mogu naći i programski kodovi koji podržavaju interaktivnost sa korisnikom i dinamički izgled Web stranice. Tako se došlo do pojma Web programiranja (engl. Web programming) [6] koji obuhvata pisanje programskog koda na obe strane aplikacije u klijent – server arhitekturi. Mada pod pojmom Web programiranja različiti autori podrazumevaju najrazličitije stvari, zajednička odrednica im je skriptovanje na strani klijenta, odnosno, servera. Kada se tome pridoda pojam

Web aplikacije, konfuzija postaje još veća. Iako se radi o sličnim stvarima, razlike između pojma Web aplikacije i pojma Web stranice postaju sve značajnije [7]. Savremene RIA aplikacije treba da podrže napredne korisničke interakcije koje su ranije bile dostupne samo kod desktop aplikacija. Uspešni primeri Web aplikacija su: Webmail, Google Maps i Google Docs. U poređenju sa klasičnim Web stranicama, Web aplikacije obezbeđuju bogato korisničko iskustvo i pristup naprednim mogućnostima Web čitača. Osnovna razlika leži u činjenici da korisnici od Web aplikacije očekuju da obave neki zadatak, dok Web stranica obično pruža samo informativne sadržaje. Web aplikacije (neki autori ih poistovećuju sa RIA aplikacijama) se smatraju akciono – orijentisanim, dok se klasične Web stranice smatraju informaciono - orijentisanim. Korišćenje naprednih mogućnosti terminalnih uređaja (kao što je geolokacija ili korišćenje drugih integrisanih senzora) je specifično za Web aplikacije koje su realizovane na mobilnim terminalnim uređajima. Ako se dostigne nivo interaktivnosti na Web stranici sličan onom na desktop računaru, onda se ta Web stranica može smatrati Web (RIA) aplikacijom! Trend pregledavanja Web sadržaja na mobilnim platformama je u stalnom porastu. Ovo je posledica pojave savremenih mobilnih terminalnih uređaja (mobilnih telefona i tablet uređaja) koji poseduju izuzetnu mrežnu infrastrukturu. Preko 90% mobilnih telefona u upotrebi imaju mogućnost pretraživanja Web-a [8]. Smatra se da će ove 2014. godine broj mobilnih korisnika Weba prerasti broj desktop korisnika. Gotovo polovina lokalnih Web pretraživanja se obavlja mobilnim uređajima. Ove činjenice ukazuju na sve veći značaj adaptacije Web sadržaja za korisnike koji Web-u pristupaju mobilnim uređajima [9], [10]. Dizajn Web sadržaja koji se istovremeno mogu efikasno pregledavati i na mobilnom i na desktop Web čitačima postao je imperativ. Dizajniranje Web sadržaja koji izgledaju podjednako dobro na svim platformama (engl. responsive Web design), a da pri tome poseduju odličnu funkcionalnost, nije jednostavan zadatak [11]. Zahtevi za dobar „responsiv“ dizajn Web sadržaja su postavili novi izazov programerima. Poteškoće oko realizacije „responsiv“ dizajna leže u značajnim razlikama između pristupnih uređaja. Generalno, mobilne platforme raspolažu skromnijim procesorskim resursima i redukovanim računarskim mogućnostima što donekle uslovljava dizajn mobilne Web aplikacije.

- 939 -

Najnovije rešenje koje je ponudila kompanija Microsoft za rešavanje ovog problema je ASP.NET MVC 4 [12]. Uveden je novi skup funkcija za kreiranje „responsive“ Web aplikacija koje besprekorno rade i na desktop i mobilnim platformama. ASP.NET MVC 4 formira HTML 5 kod uz korišćenje CSS 2/3 specifikacije. U ovom radu su razmatrane nove mogućnosti koje pruža ASP .NET MVC 4 okruženje za razvoj Web aplikacija koje se podjednako dobro mogu koristiti na mobilnim i desktop platformama [13]. U drugom poglavlju je dat pregled programerskih tehnika koje se koriste u Web programiranju i razmatrane su njihove karakteristike u odnosu na potrebu za adaptacijom Web sadržaja [14]. U trećem poglavlju su razmatrane razlike u Web dizajnu koje proističu iz specifičnosti pristupnih uređaja. U četvrtom poglavlju je prikazana arhitektura ASP .NET MVC aplikacije i primenjen je MVC šablona u „responsive“ Web dizajnu [15]. Prepoznavanje pristupne platforme, kao i tipa Web čitača, koje je omogućeno u ASP .NET MVC 4 okruženju, je obezbedilo dobar izgled i punu funkcionalnost Web aplikacije na razmatranim platformama. U petom, zaključnom poglavlju, su date perspektive responsive Web dizajna i njegov uticaj na savremeni Web. II.

WEB PROGRAMIRANJE I ASP .NET

ASP .NET je Microsoftova vizija naprednog koncepta Web programiranja koja se pojavljuje 2002 godine. U HTML-u je jedina komunikacija sa serverom omogućena putem obrazaca u oznaci . Podaci uneti u HTML obrasce se prenose putem HTTP-a do servera gde ih obrađuju serverski skriptovi. Treba napomenuti da vrednosti unetih podataka nisu poznati u narednoj klijent – server interakciji. Dakle, osnovna razlika između desktop i Web aplikacije je u potrebi pamćenja stanja tokom čitavog životnog veka Web aplikacije. Ovo je posledica klijent-server tehnologije, odnosno, HTTP protokola koji ne pamti stanja (engl. stateless) između uzastopnih interakcija sa serverom. Za skladištenje podataka tokom životnog veka Web aplikacije razvijeno je nekoliko tehnologija koje koriste memorijske prostore servera : „view state“ i „session state“, odnosno klijenta - „cookies“. Stanja aplikacije se mogu pamtiti skrivenim serverskim kontrolama koje se postavljaju u HTML obrascima. A. HTML serverske kontrole Ovaj koncept Web programiranja je zasnovan na serverskim kontrolama (u žargonu ASP.NET-a) koje se slično koriste kao Windows kontrole u desktop programiranju. HTML serverske kontrole predstavljaju objekte na Web serveru koje kao izlaz generišu HTML kod koji se isporučuje klijentu. Iako se Web programer oslobađa detaljnog poznavanja HTM oznaka, on je u obavezi da reaguje na događaje koje ove kontrole generišu na serveru. U tom smislu su HTML kontrole veoma slične Windows kontrolama u desktop programiranju. HTML serverske kontrole omogućavaju jednostavno prevođenje klasičnih HTML stranica u ASP .NET stranice. Za ove potrebe su razvijene serverske klase za svaku HTML oznaku (HtmlForm, HtmlButton, HtmlTable, HtmlSelect, HtmlInputText, HtmlButton, …). Iako su u vreme pojavljivanja predstavljale prekretnicu u

shvatanju Web programiranja, njihov ipak skroman potencijal nije omogućio zadovoljenje zahteva profesionalnih pogramera. B. Web kontrole Web kontrole predstavljaju sledeću generaciju serverskih kontrola i nude izuzetno bogat korisnički interfejs. Za razliku od HTML serverskih kontrola koje preslikavaju skup osnovnih oznaka iz HTML standarda, Web kontrole poseduju čitav niz novih, složenih kontrola, koje nisu definisane HTML standardom. Za ovaj rad je značajno primetiti da pored brojnih prednosti koje Web kontrole poseduju u odnosu na HTML kontrole, omogućeno je izvesno prilagođavanje izlaza Web kontrola primenjenom Web čitaču. Na ovaj način se pruža mogućnost iskorišćavanja specifičnih mogućnosti korišćenog Web čitača. Takođe, definisan je novi skup događaja koji nisu bili podržani u prethodnim verzijama. Izrađene su klase novih elemenata kojih nema u HTML standardu. Najčešće se novi objekti sastoje od više HTML oznaka koje se tretiraju kao jedinstven objekt na serverskoj strani. Oznake Web kontrola se lako prepoznaju po prefiksu asp: iza koga sledi naziv klase (asp:Label, asp:Button, asp:TextBox, asp:Table, ...). Atributi ovih kontrola su vezani za svojstva HTML kontrola, a specifični atribut runat=“server“ identifikuje mesto obrade kontrole. Klase Web kontrola se ASP .NET-u nalaze u imenskom prostoru System.Web.UI.WebControls sa bazičnom klasom WebControl. Izuzetno veliki skup svojstava ove klase obezbeđuju dizajnersku slobodu i formiranje bogatih Web stranica. C. ASP .NET MVC koncept Web aplikacije Trenutno Microsoft podržava dva koncepta razvoja Web aplikacija: klasičan pristup u ASP .NET i Web kontrolama i savremeni pristup pod nazivom ASP .NET MVC (engl. ModelView-Controller). Klasičan pristup razvoju Web aplikacija je zasnovan na ASP .NET Web kontrolama i još uvek je aktuelan. Mada su zasnovane na istoj platformi .NET-a, programiranje u ASP .NET MVC se znatno razlikuje od programiranja ASP .NET Web kontrolama. ASP .NET MVC je koncipiran da reši nedostatke koji su uočeni i primeni Web kontrola. Pored osnovnih funkcionalnosti MVC koncept podrazumeva napredno testiranje komponenata još u fazi njihovog razvoja. Detaljan prikaz ASP .NET koncepta biće prikazan u IV poglavlju. U narednom poglavlju se konstatuju značajne razlike u dizajnu Web aplikacija namenjenih desktop, odnosno, mobilnom korisniku i značaju responsive Web dizajna za današnji Web. III.

DESKTOP NASPRAM MOBILNIH WEB APLIKACIJA

Generalno se korisnici Interneta mogu svrstati u dve velike klase. Jedna klasa korisnika koristi desktop računare, a druga mobilne terminalne uređaje za pristup Internetu. Prema najnovijim statističkim podacima, broj članova ovih klasa je gotovo izjednačen [8]. Pravljenje posebnih Web stranica koje su namenjene samo određenoj klasi korisnika bilo je jedno od prvih rešenja primenjenih u praksi. Iako su ova rešenja prisutna i danas, ona se ne smatraju dobrim. Sa porastom broja mobilnih korisnika problem adaptacije Web sadržaja dobija na značaju [6]. Obzirom na činjenicu da mobilni uređaji imaju ograničenja u pogledu veličine displeja, tastature, raspoloživog

- 940 -

memorijskog kapaciteta, napajanja i redukovanog instrukcijskog seta procesora, to ih čini manje pogodnim za procesiranje multimedijalnih Web sadržaja. Ovo je jedan od razloga da Web čitači realizovani za mobilne uređaje imaju nešto skromnije mogućnosti od čitača realizovanih za desktop platforme. Pored zahteva da se Web sadržaji adaptiraju za mobilne uređaje, sve su veće potrebe da se adaptacija obavi i prema tipu Web čitača koji klijenti poseduju na svojim uređajima. Otuda je problem kompatibilnosti prikaza sadržaja veoma značajna karakteristika pojedinih Web čitača. Već je napomenuto, savremene Web aplikacije zahtevaju potpunu funkcionalnost i dobar izgled bez obzira na pristupnu platformu. Jasno je da u heterogenoj multiservisnoj mreži kakav je Internet, nije jednostavno dizajnirati Web sadržaje koji se adaptiraju zahtevima korisnika. Rešavanje problema adaptacije Web sadržaja je prošlo kroz više faza. Moglo bi se reći da je osnovni koncept koji je doprineo razrešavanju ovog problema nalazi u razdvajanju sadržaja Web stranice od obrade i njenog izgleda. Ovaj koncept je najpre primenjen u XML-u (engl. eXtended Markup Language) – generičkoj verziji proširivog jezika za opis dokumenata. U saglasju sa CSS-om (engl. Cascade Style Sheet) XML je pružio mogućnost adaptacije Web sadržaja na karakteristike korisničkog uređaja. Kako dizajnirati Web stranice kojima treba omogućiti pristup velikom broju (mobilnih) korisnika sa širokom paletom uređaja? Razdvajanje sadržaja Web dokumenta od njegovog izgleda je omogućilo prikazivanje istovetnog sadržaja Web stranice na različite načine, koji su određeni specifičnostima korisničkih terminala. Dobra karakteristika ovog koncepta je da se ne dupliraju istovetni sadržaji na serveru za različite korisnike. Dakle, u srcu ove ideje je da se sadržaj Web stranice čuva na jednom mestu, odvojeno od konkretne realizacije, a da se pri svakoj konkretnoj realizaciji može koristiti po potrebi. Jedino što treba čuvati za konkretnu realizaciju su odvojeni fajlovi stilova za različite klase korisnika. U prethodnim radovima je razmatrano nekoliko načina da se to uradi [10]. Za razvoj mobilnih Web aplikacija se uglavnom koriste dva osnovna koncepta: „native“ i „cross platform“. Mada oba koncepta koriste različite programerske tehnike, cilj im je isti – realizovati funkcionalnu Web aplikaciju. Native koncept razvoja mobilne aplikacije podrazumeva specifično dizajniran softver za određenu hardversku platformu sa specifičnim procesorom i njegovim skupom naredbi. Glavna prednost ovog kocepta je u predvidivim performansama aplikacije i korišćenjem već potvrđenih programskih modula. Ovaj koncept se realizuje specijalizovanim softverskim paketom SDK (engl. Software Development Kit) sa određenim programskim jezikom. Različite hardverske platforme zahtevaju različite SDK-ove. Native aplikacije se nalaze u formi binarnih izvršnih fajlova koji se instaliraju u mobilni uređaj bez potrebe za dodatnim apstraktnim softverskim slojevima u cilju komunikacije sa operativnim sistemom. Ove aplikacije su u stanju da pozovu ugrađene funkcionalnosti i uobičajeno pružaju najbolji kvalitet usluge QoS (engl. Quality of Services). Drugu generaciju rešenja, koja pružaju sasvim prihvatljive rezultate, je zasnovana na adaptaciji Web sadržaja na serverskom zastupniku (mobilnih) korisnika. Adaptacija Web sadržaja se obično obavlja korišćenjem nekog od

Slika 1. Implementacija MVC koncepta u .NET-u, direktna (puna linija) komunikacija i indirektna (isprekidana linija) komunikacija između delova MVC aplikacije.

serverskih skript jezika. Dakle, na serveru se izrađuje potpuno nova Web stranica u trenutku izvršenja (upita) tako da se njen sadržaj može prilagoditi korisničkom Web čitaču. Najbolja rešenja kod „cross platform“ koncepta se dobijaju kada se dizajnira posebna stilizacija Web sadržaja. Preporučuje se korišćenje standardnih tehnika: HTML 5, CSS 3, JavaScript, JQuery, Ajax i slično. U ASP .NET MVC 4 se upravo ovaj koncept favorizuje. IV.

RESPONSIVE ASP .NET MVC 4 WEB APLIKACIJA

ASP.NET MVC je besplatno Microsoft-ovo rešenje za Web aplikacije koje koriste Model-View-Controller šablon (engl. pattern). Obzirom da se ovaj koncept zasniva na ASP.NET platformi, mogu se koristiti već dostupni aplikacioni programski interfejsi API (engl. Application Programming Interface). Glavni cilj dizajna sa šablonima je da se izoluje poslovna logika od korisničkog interfejsa kako bi se glavna pažnja posvetila strukturi Web aplikacije. Dobro definisana struktura Web aplikacije obezbeđuje njeno lakše održavanje i testiranje. Svaka ASP.NET MVC aplikacija ima tri osnovna dela: model (engl. Models), pogled - izgled (engl. Views) i kontroler (engl. Controller). Na Sl. 1 je prikazan komunikacija između osnovnih delova MVC aplikacije. Punom linijom su predstavljene direktne komunikacije, dok su isprekidanim linijama predstavljene indirektne komunikacije između delova AP .NET MVC aplikacije. Značenje pojedinih oznaka su sledeće: 1. 2. 3. 4. 5.

Procesiranje zahteva – direktna komunikacija; Vraćanje odgovora klijentu - direktna komunikacija; Slanje kao dela zahteva - direktna komunikacija; Slanje za prezentaciju klijentu – indirektna komunikacija; Slanje klijentskog zahteva – indirektna komunikacija.

Model ASP .NET MVC aplikacije se realizuje od klasa koje obrađuju podatke i na taj način formiraju poslovnu logiku. Obradu podataka pokreću klase iz kontrolera koje su zadužene za obradu klijentskih zahteva.

- 941 -

Po završenoj obradi podataka, pozivaju se klase koje oblikuju odgovor na klijentski zahtev u vidu HTML koda koji se prikazuje na klijentskom računaru.

hyphen). Segmenti se razdvajaju kosom crtom „/“ (engl. slash). Čuvari mesta se definišu svojim imenom koje se nalazi između vitičastih zagrada.

Prva verzija ASP .NET MVC radnog okruženja se pojavila 2009. godine, dok je ASP .NET MVC 2 realizovan 2010. ASP .NET MVC 3 je bio dostupan 2011. godine, a verzija MVC 4 se pojavljuje kao sastavni deo Visual Studia 2012. Trenutno je aktuelna verzija ASP .NET MVC 5 koje se pojavljuje krajem 2013. godine. U ASP .NET MVC 4 je realizovan novi skup funkcija koje imaju za cilj da pomognu programerima pri kreiranju Web aplikacija koje rade besprekorno i na desktop i na mobilnim Web čitačima. ASP.NET MVC 4 formira HTL kod koji je kompatibilan sa HTML 5 standardom uz obilato korišćenje CSS 3 specifikacije. Obzirom na to da HTML5 koristi semantičko označavanje, podržane su nove oznake kao što su , , , , i pojednostavljena direktiva.

Svaka ASP.NET MVC aplikacija poseduje skup routing objekta koji predstavljaju dozvoljene rute koje se nazivaju routing tabele. Ruting tabele se formiraju prilikom prvog startovanja aplikacije. Metod RegisterRoutes() statičke klase RouteConfig formira Routing tabelu. ASP .NET omogućava generisanje URL-ova na bazi imena kontrolera i akcionih metoda.

A. MVC Kontroleri MVC kontroler obrađuje klijentske zahteve za Web stranicama koji su pristigli putem HTTP protokola. Koncept MVC-a podrazumeva da se svaki klijentski zahtev obrađuje zasebnim kontrolerom koji zapravo prestavlja jednu .NET klasu. Metode članice ovih klasa za obradu klijentskih zahteva se nazivaju akcionim metodama i obično vraćaju objekte tipa ActionResult. Dakle, za implementaciju rezultata rada akcionih klasa koristi se ActionResult klasa. Za specifične primene izveden je čitav niz klasa koje je nasleđuju. Najčešće korišćene klase izvedenih iz klase iz ActionResult koje se koriste za vraćanje rezultata rada akcionih metoda su : • • • • • • •

ViewResult, ContentResult, EmptyResult, HttpUnauthorizedResult, JavaScriptResult, RedirectResult, RedirectToRouteResult.

B. MVC Rutiranje Proces kojim se započinje obrada klijentskog zahteva se MVC kontekstu naziva routing engine. Zapravo on je odgovoran da se klijentski zahtev preslika u poziv na izvršenje odgovarajućoj metodi jednog od MVC kontrolera. Rezultat rada akcione metode je objekt koji treba vratiti korisniku na njemu pogodan način. Adaptacija rezultata akcionog metoda se obavlja u odeljku Views gde se mogu uvažiti specifičnosti klijentskog Web čitača i hardverske platforme. ASP.NET routing omogućava kreiranje logičkog skupa URL-a koji su nezavisni od strukture datoteka Web aplikacije na serveru. URL-ovi dobijeni na ovaj način su deskriptivniji i korisnički razumljiviji. Sa druge strane ovi URL-ovi su prepoznatljiviji pretraživačima čime se ostvaruje veća vidljivost Web aplikacije. „URL pattern“ je definicija segmenata koji sačinjavaju URL zahtev. Svaki segment se sastoji od jednog ili više “čuvara mesta” (engl. placeholders) razdvojenih literalima - najčešće se koristi crtica (engl.

C. MVC Views Kod kojim se opisuje sadržaj dinamičkih Web stranica se nalazi na serverskoj strani aplikacije. Izvršavanje serverskog (skript) koda će proizvesti konačan HTML kod Web stranice i time odrediti njen izgled. Prilikom kreiranja izgleda, treba specificirati „view engine“ koja će se koristiti za procesiranje serverskog koda. U ASP.NET MVC-u stoje na raspolaganju dve tehnike: ASPX i RAZOR. Obe tehnike poseduju specifičnu sintaksu za rad sa serverskim elementima i proizvode specifičan izgled koji će se ostvariti u klijentskom čitaču. Važan dodatak u ASP.NET MVC 4 je „Display Modes“ koji omogućava aplikacijama da izaberu prikaz koji je adekvatan klijentskom pretraživaču. Na Sl. 2 je prikazan izvorni kod napisan u C# (Global.asax.cs) kojim se definiše „Dispaly mod“ za Web čitač „Opera“. Prikazani kod omogućava prepoznavanje Web čitača „Opera“ koji je instaliran u nekom od mobilnih telefona. Važno je napomenuti da se pri prepoznavanju određene karakteristike specificirane u kodu, poziva odgovarajući „view“. Za prikazani slučaj prepoznaje se reč „Opera“ i poziva „view“ definisan u fajlu Index.Opera.cshtnl. Ako se ne prepozna karakteristična reč koju šalje sam Web čitač, onda se poziva opšti „view“ za mobilne uređaje Index.Mobile.cshtml. ... public class MvcApplication: System.Web.HttpApplication { protected void Application_Start() { DisplayModeProvider.Instance.Modes.Insert(0, new DefaultDisplayMode("Opera") { ContextCondition = (context => context.GetOverriddenUserAgent().IndexOf("Oper a", StringComparison.OrdinalIgnoreCase)>= 0) }); AreaRegistration.RegisterAllAreas(); WebApiConfig.Register(GlobalConfiguration. Configuration); FilterConfig.RegisterGlobalFilters(GlobalFilte rs. Filters); RouteConfig.RegisterRoutes(RouteTable.Routes); BundleConfig.RegisterBundles (BundleTable.Bundles); AuthConfig.RegisterAuth(); } } } Slika 2. C# kod kojim se kreira DefaultDisplay Mode sa imenom Opera.

- 942 -

novi

„Display

mode“

objekt

D. Modeli Modeli u ASP. NET MVC predstavljaju skup objekata kojima se implementira funkcionalnost. U ASP .NET MVC konceptu postoji nekoliko tipova modela: model podataka (engl. data model), poslovni model (business model) i view model. Zajedničkim imenom skup ovih modela se naziva domain model. Posebno je značajan model podataka koji obezbeđuje interakciju sa bazom podataka. Poslovni model se koristi za opis poslovne logike i tesno sarađuje sa modelom podataka prilikom dobijanja podataka ili njihovog smeštanja u bazu podataka. View model služi za prosleđivanje informacija od kontrolera do view-a. Za adaptaciju prikaza istog Web sadržaja na različite korisničke mogućnosti, u ovom radu nisu korišćeni Modeli, tako da o njima neće biti dalje reči. Nešto više o implementaciji modela može se naći u [15]. V.

a)

PRIKAZ I ANALIZA REZULTATA

U cilju testiranja ASP .NET MVC 4 okruženja i njegove sposobnosti adaptacije Web sadržaja za različite platforme korišćena je ugrađena Internet aplikacija u VS 2012. Standardna MVC 4 Internet aplikacija je modifikovana dodavanje zasebnih „view-a“ za različite klase korisnika. Testirani su izgledi renderovanih ekrana u nekoliko tipova desktop Web čitača. Takođe, posebna pažnja je posvećena izgledu i funkcionalnosti Web aplikacije na mobilnim platformama. Testirani su izgledi za opštu klasu tablet uređaja, kao i za dve vrste mobilnih telefona. Testiran je izgled i funkcionalnost Web aplikacija za mobilni telefon iPhone i Samsung Galaxy II sa ugrađenim Web čitačem „Opera“. Na Sl. 3 su prikazani dobijeni rezultati na desktop uređajima za dve vrste Web čitača. Na Sl. 3a je prikazan izgled prijavne strane MVC 4 Internet aplikacije u Internet Exploreru. Izgled i funkcionalnost Web aplikacije je odlična. Na Sl. 3b je prikazan izgled prozora Web čitača Mozilla FireFox. Web sadržaji su korektno predstavljeni, dok je funkcionalnost potpuna. Na Sl. 3 se može primetiti da je klijentskim računarima dostavljena desktop verzija MVC Internet aplikacije. Ovo se može identifikovati porukom koja je ispisana odmah ispod hedera. Naravno, u realnoj aplikaciji treba izmeniti sadržaj pojedinih HTML objekata. Sve veći broj korisnika pristupa tablet uređajima Web sadržajima, tako da je izuzetno značajno kao Web aplikacija izgleda na ovim uređajima. Takođe, izuzetno je važno proveriti funkcionalnost Web aplikacije na tablet uređajima. Na Sl. 4 je prikazan izgled osnovne stranice podrazumevane Internet aplikacije. Primetite da je tablet uređaju zapravo poslata mobilna verzija Web aplikacije, što se može identifikovati prikazanim tekstom. U testiranom slučaju nije bila postavljena slika u levom gornjem uglu predviđenom za logo. Širina ekrana ovog tableta je veća od 850 piksela tako da se ne primenjuje kontrast između teksta i pozadine kao na mobilnim telefonima. Na slikama 5 i 6 su prikazani ekrani dobijeni na „Iphone“ i „Samsug Galaxy II“ telefonima. Na slikama 5a i 6a su prikazani izgledi ekrana kada nisu specificirani posebni

b) Slika 3. Izgled Web stranice MVC šablona Internet aplikacije na desktop računaru sa Web čitačima a) Internet Explorer i b) Mozilla FireFox.

Slika 4. tabletu.

Izgled Web stranice MVC šablona Internet aplikacije na Iphone

„Dispaly modovi“, dok su slikama 5b i 6b prikazani izgledi ekrana na mobilnim uređajima kada su specificirani zasebni Dispaly modovi. Na ovim slikama se može uočiti da su ovim mobilnim korisnicima dostavljeni adekvatni HTM kodovi.

- 943 -

VI.

ZAKLJUČAK

U ovom radu su analizirane mogućnosti responsivnog Web dizajna koje pruža ASP .NET MVC 4 platforma. ASP .NET MVC je Open Source rešenje jer ga je Microsoft ustupio najširoj programerskoj zajednici na slobodno na korišćenje. Potreba formiranja jednog sajta koji će opslužiti sve vrste korisnika na njima prihvatljiv način je sa pojavom mobilnih uređaja dobila na značaju. ASP .NET NVC 4 koristi standradne Web tehnike (HTML 5, CSS 3, JScript, JQuery, Ajax) za adaptaciju Web sadržaja što omogućava dobar dizajn i podršku širokog spektra uređaja. Pored ostalog, podržano je prepoznavanje tipa uređaja i Web čitača što pruža dodatne mogućnosti adaptacije. Na ilustrovanim primerima zasnovanim na MVC šablonu Internet aplikacije je pokazana efikasnost ASP .NET MVC 4 platforme u dizajnu responsivnih Web aplikacija. LITERATURA [1] [2]

a)

b)

[3]

Slika 5. Izgled ekrana na mobilnom telefonu „IPhone“ a) kada nije definisan specijalizovani DisplayMode i b) kada je definisan DisplayMode za „IPhone“.

[4] [5] [6] [7] [8] [9]

[10]

[11]

[12] [13] [14] [15]

a)

b)

http://www.techterms.com/definition/webpage P. Deitel, H. Deitel, AJAX, Rich Internet Applications and Web Development for Programmers, Deitel, 2008. Z. Veličković, M. Jevtović, V. Pavlović, “Throughput Cross-layer Optimization in Slow Wireless Fading Channel”, International Journal Elektronika Ir Electrotechnika, Vol. 19, No 6, pp. 131-137, 2013. M. Jevtović, Z. Veličković, Komunikacioni protokoli prepletenih slojeva, Akademska misao, 2013. Z. Veličković, M. Jevtović, V. Pavlović, “Quality of services in IP/MPLS networks“, UNITECH 2013, pp. II-107-112, Gabrovo 2013. http://www.techopedia.com/definition/23898/web-programming http://plexusweb.com/2013/04/web-site-vs-web-application-whats-thedifference/ http://www.electricplum.com/simulator.aspx Z. Veličković, A. Ilić, “Primena XML tehnologija na mobilnim platformama zasnovanim na BADI“, YUINFO 2012, ISBN: 978-8685525-09-4, pp. 624-628, Kopaonik 2012. Z. Veličković, M. Jevtović, „Adaptacija izgleda web stranice uslovljena klijenskim specifičnostima u ASP .NET MVC 4 okruženju“, Infoteh 2014, Informacione tehnologije, Žabljak, 2014. J. Lyle, S. Monteleoney, S. Faily, D. Pattiy, Fabio Ricciatoz, “Crossplatform access control for mobile web applications“, Policies for Distributed Systems and Networks, pp. 37-44, 2012. Microsoft Corporation, Developing Modern Mobile Web Apps, patterns & practices, 2012. J. Rolando, G. Paz, Beginning ASP.NET MVC 4, Apress Media, 2013. J. Palermo, J. Bogard, E. Hexter, M. Hinze, J. Skinner, ASP.NET MVC 4 in Action, Manning Publications, 2012. J. Galloway, P. Haack, B. Wilson, K. S. Allen, Professional ASP.NET MVC 4, John Wiley & Sons, Inc., 2012. ABSTRACT

Slika 6. Izgled ekrana na mobilnom telefonu „Samsung Galaxy II“ a) kada nije definisan specijalizovani DisplayMode i b) kada je definisan DisplayMode za čitač „Opera“.

Primetite da je primenjeni kontrast različit od onog prisutnog na desktop verziji. Na Sl. 6b je prikazana mogućnost prepoznavanja tipa Web čitača. U prikazanom testu korišćen je Web čitač Opera, tako da isporučen odgovarajuća stranica.

In this paper, the problem of responsive Web design based on ASP. NET platform offered by Microsoft in the MVC version 4 is considered. The proposed solution responsive site is tested on mobile, desktop and tablet platforms and showed excellent performance.

- 944 -

WEB PROGRAMMING AND RESPONSIVE WEB DESIGN IN ASP. NET MVC 4 Zoran Veličković, Milojko Jevtović