tehnologije bogatih spletnih aplikacij
DESCRIPTION
Tehnologije bogatih spletnih aplikacij. Rich Internet Application Technology. Izvedbo projekta je omogočilo sofinanciranje Evropskega socialnega sklada Evropske unije in Ministrstva za visoko šolstvo, znanost in tehnologijo. Kaj so bogate spletne aplikacije. - PowerPoint PPT PresentationTRANSCRIPT
![Page 1: Tehnologije bogatih spletnih aplikacij](https://reader036.vdocuments.net/reader036/viewer/2022081420/568137e3550346895d9f8d0b/html5/thumbnails/1.jpg)
Tehnologije bogatih spletnih aplikacij
Rich Internet Application Technology
Izvedbo projekta je omogočilo sofinanciranje Evropskega socialnega sklada Evropske unije in Ministrstva za visoko šolstvo, znanost in tehnologijo.
![Page 2: Tehnologije bogatih spletnih aplikacij](https://reader036.vdocuments.net/reader036/viewer/2022081420/568137e3550346895d9f8d0b/html5/thumbnails/2.jpg)
Kaj so bogate spletne aplikacije
• Bogate spletne aplikacije (RIA, Rich internet applications) združujejo najboljše lastnosti tradicionalnih namiznih aplikacij z dostopnostjo preko spleta.
• Nudijo bogate ("rich“), in intuitivne grafične vmesnike, tako da so računalniške aplikacije bolj dostopne in vabljive.
• Uporabniki naj bi programe dosegali ("reach“) masivno, preko interneta.
• RIA naj bi nudile sinhrono in asinhrono povezljivost med ljudmi in podatki.
![Page 3: Tehnologije bogatih spletnih aplikacij](https://reader036.vdocuments.net/reader036/viewer/2022081420/568137e3550346895d9f8d0b/html5/thumbnails/3.jpg)
Funkcionalnost odjemalca
Pasivna InteraktivnaF
un
kcio
nal
no
st S
trež
nik
a
Spletne aplikacije
Dogodkovno vodene
Dinamične vsebine
Uporaba podat. baz
Navaden HTML
Široka dosegljivost
Uporaba brkljalnika
Vsebina, dokumenti
Namizne aplikacije
Bogata vsebina
Visoka interaktivnost
Gibanje, zvok, video
Spletne aplikacije
Dostopnost interneta
Bogatost namizja
Radikalna povezljivost
![Page 4: Tehnologije bogatih spletnih aplikacij](https://reader036.vdocuments.net/reader036/viewer/2022081420/568137e3550346895d9f8d0b/html5/thumbnails/4.jpg)
Stalnost in odziv
Ena od bistvenih razlik med RIA in tradicionalnimi spletnimi stranmi je, da se ob kliku na gumb ne naloži ponovno cela stran. Prenesejo se le podatki, vezani na našo akcijo
Interakcija pri tradicionalni spletni aplikaciji
Interakcija pri bogati spletni aplikaciji (RIA)
Akcijauporabnika
Akcijauporabnika
Osvežitev podatkov
Osvežitev podatkov
Nalaganje zaslona
![Page 5: Tehnologije bogatih spletnih aplikacij](https://reader036.vdocuments.net/reader036/viewer/2022081420/568137e3550346895d9f8d0b/html5/thumbnails/5.jpg)
Primeri strani v stilu RIA
• Google Maps (Spletni zemljevidi)• GAP (Spletno nakupovanje)• Odeo (Spletni audio/video kanali)• Flickr (Organiziranje in souporaba (sharing) fotografij)
![Page 6: Tehnologije bogatih spletnih aplikacij](https://reader036.vdocuments.net/reader036/viewer/2022081420/568137e3550346895d9f8d0b/html5/thumbnails/6.jpg)
Primer RIA: Google maps
![Page 7: Tehnologije bogatih spletnih aplikacij](https://reader036.vdocuments.net/reader036/viewer/2022081420/568137e3550346895d9f8d0b/html5/thumbnails/7.jpg)
Primer RIA: GAP – spletno nakupovanje
![Page 8: Tehnologije bogatih spletnih aplikacij](https://reader036.vdocuments.net/reader036/viewer/2022081420/568137e3550346895d9f8d0b/html5/thumbnails/8.jpg)
Primer RIA: ODEO -spletni audio/videokanali
![Page 9: Tehnologije bogatih spletnih aplikacij](https://reader036.vdocuments.net/reader036/viewer/2022081420/568137e3550346895d9f8d0b/html5/thumbnails/9.jpg)
Primer RIA: flickr (organiziranje fotografij)
![Page 10: Tehnologije bogatih spletnih aplikacij](https://reader036.vdocuments.net/reader036/viewer/2022081420/568137e3550346895d9f8d0b/html5/thumbnails/10.jpg)
Kaj je “Rich Internet Application”?
Seštevek prednosti bogatih spletnih aplikacij kaže na to, da so idealen prijatelj ali partner: •Stalen in odziven •Bogat in zmogljiv•Lahek in cenen za vzdrževanje •Odličen komunikator
![Page 11: Tehnologije bogatih spletnih aplikacij](https://reader036.vdocuments.net/reader036/viewer/2022081420/568137e3550346895d9f8d0b/html5/thumbnails/11.jpg)
O odzivnosti
• Uporabnik uporablja zaslonski prikaz bolj učinkovito, če se osnovni strukturni elementi prikaza ne spreminjajo prepogosto.
• Uporabnik ima tako množico referenčnih točk, ki preprečujejo zmedo med navigacijo po aplikaciji.
• Poleg tega RIA nudijo performanse in hitrost namiznih aplikacij.
• Medtem ko tradicionalne HTML strani vsebujejo tako podatke kot predstavitveno informacijo, RIA tipično izmenjujejo s strežnikom le pakete podatkov. Skupaj s procesno močjo odjemalca je tako splošen odziv hitrejši.
![Page 12: Tehnologije bogatih spletnih aplikacij](https://reader036.vdocuments.net/reader036/viewer/2022081420/568137e3550346895d9f8d0b/html5/thumbnails/12.jpg)
Bogastvo in zmogljivost• Dobro načrtovano orodje naj bi bilo podaljšek naših lastnih
zmožnosti, kot je to kladivo v rokah delavca.• Pri razvoju takih programov nas omejujeta struktura in
obnašanje osnovnih gradnikov, ki jih ima razvijalec na voljo• RIA naj bi ponujale bogat nabor interakcij za bolj učinkovito
rokovanje s podatki• Pri tem pomagajo grafični elementi, zvok in video ter dobro
zasnovani vmesniki (jasni in natančni).
![Page 13: Tehnologije bogatih spletnih aplikacij](https://reader036.vdocuments.net/reader036/viewer/2022081420/568137e3550346895d9f8d0b/html5/thumbnails/13.jpg)
Kaj pomeni odličen komunikator?• Večina spletnega prometa je doslej temeljila na modelu
zahtevek-odgovor. Podatki so shranjeni pasivno, dokler jih ne zahtevamo.
• Bogate spletne aplikacije dodajo temu še možnost sinhronizirane izmenjave podatkov v realnem času. Taka komunikacija je primerna za: – Tekstovne klepetalnice– Audio in video konference – Video na zahtevo– Souporabo (sharing) aplikacij in namizja – Server “push” – na pr. posredovanje opozoril na na zaslon– Nadzor kritičnih podatkov v realnem času
![Page 14: Tehnologije bogatih spletnih aplikacij](https://reader036.vdocuments.net/reader036/viewer/2022081420/568137e3550346895d9f8d0b/html5/thumbnails/14.jpg)
RIA bogati načine komunikacije
![Page 15: Tehnologije bogatih spletnih aplikacij](https://reader036.vdocuments.net/reader036/viewer/2022081420/568137e3550346895d9f8d0b/html5/thumbnails/15.jpg)
Spekter aplikacij RIA
![Page 16: Tehnologije bogatih spletnih aplikacij](https://reader036.vdocuments.net/reader036/viewer/2022081420/568137e3550346895d9f8d0b/html5/thumbnails/16.jpg)
Bogati spletni odjemalci
• RIA tehnologiji pravimo tudi “Bogati spletni odjemalci” (RIC, Rich Internet Clients ).
• Veliko spletnih strani uporablja DHTML in AJAX. Popularna tehnologija je tudi Flash. In uveljavlja se Silverlight.
![Page 17: Tehnologije bogatih spletnih aplikacij](https://reader036.vdocuments.net/reader036/viewer/2022081420/568137e3550346895d9f8d0b/html5/thumbnails/17.jpg)
Tehnologije za razvoj RIA
• Tehnologije za razvoj RIA so:Flex, Ajax, Microsoft Silverlight.
• Pri vseh naj bi bil razvojni napor podoben.
• Prednost Flex je v tem, da je predvajalnik Adobe Flash, ki ga Flex aplikacije potrebujejo, nameščen na mnogih računalnikih!
![Page 18: Tehnologije bogatih spletnih aplikacij](https://reader036.vdocuments.net/reader036/viewer/2022081420/568137e3550346895d9f8d0b/html5/thumbnails/18.jpg)
Ajax• Ajax uporablja tehnologije, ki so prav tako
nameščene na skoraj vsakem računalniku : JavaScript, XHTML, CSS.
• Problem pa je s kompatibilnostjo na različnih brkljalnikih. Kar dela na primer na Firefox, morda ne teče na Internet Explorer in obratno.
![Page 19: Tehnologije bogatih spletnih aplikacij](https://reader036.vdocuments.net/reader036/viewer/2022081420/568137e3550346895d9f8d0b/html5/thumbnails/19.jpg)
Nekaj besed o AJAX
• Asynchronous Javascript in XML• AJAX ni nova tehnologija• Je skupek tehnik
– XML izmenjava podatkov
– Posredovanje metod Javascript odjemalcu
– DHTML widgets
– XML in XSLT
• Ključne tehnike so osredotočene okoli asinhrone komunikacije s strežnikom brez osveževanja strani
Mr. Ajax
![Page 20: Tehnologije bogatih spletnih aplikacij](https://reader036.vdocuments.net/reader036/viewer/2022081420/568137e3550346895d9f8d0b/html5/thumbnails/20.jpg)
Tradicionalne spletne aplikacije
Pick An Item‘Add To Cart’
Review CartEnter Data
Submit
ActionValidation
PersistenceForwarding
Error Page‘Can’t Order 500’
EnterShipping
Enter DataSubmit
ActionValidation
PersistenceForwarding
ActionValidation
PersistenceForwarding
Enter BillingEnter Data
Submit
Delovna enota je stranKoda na strani odjemalca potrdi veljavnost (validation) S “Submit” sprožimo akcijeAkcije opravijo delo in posredujejo naslednjo stranOsveževanje strani po vsakem “Submit”
Strani in akcije
![Page 21: Tehnologije bogatih spletnih aplikacij](https://reader036.vdocuments.net/reader036/viewer/2022081420/568137e3550346895d9f8d0b/html5/thumbnails/21.jpg)
AJAX spremeni izgradnjo spletnih aplikacij
Order EntryEvents/Actions
Validation
Persistence
Event Handlers
GUI Creation
Item ListComponent
Delovna enota je komponentaTronivojski model strežnik odjemalecOdjemalec skrbi za validacijo, tok, izgled in izmenjavo podatkovNimamo gumbov “submit”Osvežijo se le deli strani
Item List (DIV)
Shopping Cart (DIV)
Shipping Form (DIV)
Billing Form (DIV)
ErrorViewer(DIV)
Shopping CartComponent
ShippingComponent
BillingComponent
Komponente in dogodki
AJA
X
![Page 22: Tehnologije bogatih spletnih aplikacij](https://reader036.vdocuments.net/reader036/viewer/2022081420/568137e3550346895d9f8d0b/html5/thumbnails/22.jpg)
Flex demo
• http://www.munkiihouse.com/?p=4• http://dev.getoutsmart.com/labs/dock/• http://dev.getoutsmart.com/os3d/demos/earth/• http://dev.getoutsmart.com/os3d/demos/videoroom/• http://labs.getoutsmart.com/
Flex temelji na tehnologiji Flash
![Page 23: Tehnologije bogatih spletnih aplikacij](https://reader036.vdocuments.net/reader036/viewer/2022081420/568137e3550346895d9f8d0b/html5/thumbnails/23.jpg)
Flex implementacija komponente “dock” ki jo poznamo pri MacOSX.
http://dev.getoutsmart.com/labs/dock/
![Page 24: Tehnologije bogatih spletnih aplikacij](https://reader036.vdocuments.net/reader036/viewer/2022081420/568137e3550346895d9f8d0b/html5/thumbnails/24.jpg)
Flex demo: Zemlja in luna
http://dev.getoutsmart.com/os3d/demos/earth/
![Page 25: Tehnologije bogatih spletnih aplikacij](https://reader036.vdocuments.net/reader036/viewer/2022081420/568137e3550346895d9f8d0b/html5/thumbnails/25.jpg)
Flex demo: video soba
http://dev.getoutsmart.com/os3d/demos/videoroom/
![Page 26: Tehnologije bogatih spletnih aplikacij](https://reader036.vdocuments.net/reader036/viewer/2022081420/568137e3550346895d9f8d0b/html5/thumbnails/26.jpg)
Flex demo: Virtualna klepetalnica
http://labs.getoutsmart.com/
![Page 27: Tehnologije bogatih spletnih aplikacij](https://reader036.vdocuments.net/reader036/viewer/2022081420/568137e3550346895d9f8d0b/html5/thumbnails/27.jpg)
Silverlight• Silverlight je tehnologija, neodvisna od vrste
brkljalnika. Skladnost s tehnologijo .NET omogoča lahek razvoj in uporabo.
• S Silverlight lahko nadziramo več elementov in lastnosti spletnih strani.
![Page 28: Tehnologije bogatih spletnih aplikacij](https://reader036.vdocuments.net/reader036/viewer/2022081420/568137e3550346895d9f8d0b/html5/thumbnails/28.jpg)
Silverlight
• Microsoft Silverlight podobno kot Flex teče na vtiču (plugin) brkljalnika. Tako s kompatibilnostjo ni problemov, ni pa še tako razširjen.
![Page 29: Tehnologije bogatih spletnih aplikacij](https://reader036.vdocuments.net/reader036/viewer/2022081420/568137e3550346895d9f8d0b/html5/thumbnails/29.jpg)
Primerjava
Item DHTML & AJAX FLASH SilverlightUser Experience Normal Very Good Very Good
Browser CompatibilityHard to support and
maintainIE, Firefox, Safari, etc.
Popular BrowsersIE, Firefox, Safari, etc.
Popular Browsers
Popularity N/A High Normal(New)
Version N/A Normal, version 9.0 New Tech, version 1.1
Study Efforts Normal Normal Normal
Ease of UseEasy (If do not consider
compatibility)Normal Normal
Integration with .NET Easy Hard Easy
Network Performance High Normal High
Client PerformanceSome Code - HighMost Code - Low
High High
Designer Tools Use CSSFlash CS3
PhotoShop CS3Blend,
Expression Designer
![Page 30: Tehnologije bogatih spletnih aplikacij](https://reader036.vdocuments.net/reader036/viewer/2022081420/568137e3550346895d9f8d0b/html5/thumbnails/30.jpg)
Animacije pri Flash in Silverlight
Format Flash pozna pri animacijah le transformacijske matrike. Transformacijo uporabimo na sličicah (frames). Če želimo animacijo 3 sekund, izračunamo, koliko sličic potrebujemo. Vendar pri predvajanju te 3 sekunde trajajo le 2 ali celo 5 ali 6 sekund, odvisno od kvalitete našega računalnika
Silverlight podpira model animacije WPF, ki temelji na času in ne na sličicah, dopušča pa tudi definiranje začetnih in končnih pogojev animacije. Ne potrebuje računanj pozicij za posamezne sličice. Enostavno deluje!
WPF... Windows Presentation Foundation
![Page 31: Tehnologije bogatih spletnih aplikacij](https://reader036.vdocuments.net/reader036/viewer/2022081420/568137e3550346895d9f8d0b/html5/thumbnails/31.jpg)
Podobe (shapes)
• Flash pomni podobe v binarni obliki. Definicije oblik terjajo dodatna orodja in več učenja.
• Silverlight uporablja XAML, kar lahko pomnimo kot tekst oziroma objekt XML. To naj bi načeloma pospeševalo naše delo.
![Page 32: Tehnologije bogatih spletnih aplikacij](https://reader036.vdocuments.net/reader036/viewer/2022081420/568137e3550346895d9f8d0b/html5/thumbnails/32.jpg)
Tekst
• Flash pomni podobe fontov na enak način kot druge podobe. Tipografija je kar kompleksna
• WPF/E: fonti so vključeni v projekt, S tem se ne ukvarjamo.
![Page 33: Tehnologije bogatih spletnih aplikacij](https://reader036.vdocuments.net/reader036/viewer/2022081420/568137e3550346895d9f8d0b/html5/thumbnails/33.jpg)
Orodja• Vsebino Silverlight lahko tvorimo z našimi vsakdanjimi orodji.
Popularno in močno razvojno okolje je Visual Studio.NET. Zanimivo razvojno orodje je še Microsoft Expression.
• V istem projektu imamo lahko kodo za komponente strežnika in predvajalnikov. Za grafiko ne potrebujemo dodatnih veščin in pomoči “Flash gurujev”. Vsak razvijalec lahko dela na kateremkoli delu svoje aplikacije.
Orodje za Flex: Flex Builder
![Page 34: Tehnologije bogatih spletnih aplikacij](https://reader036.vdocuments.net/reader036/viewer/2022081420/568137e3550346895d9f8d0b/html5/thumbnails/34.jpg)
Funkcionalnost
• Silverlight je usmerjen v razvijalce aplikacij.
• Flash ima izhodišča v podpori animacij. Razvoj aplikacije, ki temelji na zaporedju video klipov oziroma sličic pa je včasih problematično.
• Flex/flash je omejen tudi s samim Flash datotečnim formatom
![Page 35: Tehnologije bogatih spletnih aplikacij](https://reader036.vdocuments.net/reader036/viewer/2022081420/568137e3550346895d9f8d0b/html5/thumbnails/35.jpg)
Zaključki o Flex in Silverlight• Flash je trenutno bolj popularen. • Odprtokodni Flex je verjetno korak v pravo smer,
vendar naj bi imel slabše izhodišče (temelji na Flash)
• Silverlight rešuje veliko problemov, do katerih prihaja pri implementaciji Flash/Flex
![Page 36: Tehnologije bogatih spletnih aplikacij](https://reader036.vdocuments.net/reader036/viewer/2022081420/568137e3550346895d9f8d0b/html5/thumbnails/36.jpg)
Nekaj namigov za RIA
• Koliko “bogastva” naj dodamo• Zaznana ponudba (perceived affordance)
• Smiselna uporaba kontrol • Kaj še poleg “zaznane ponudbe”• Osveževanje dela strani
![Page 37: Tehnologije bogatih spletnih aplikacij](https://reader036.vdocuments.net/reader036/viewer/2022081420/568137e3550346895d9f8d0b/html5/thumbnails/37.jpg)
Koliko “bogastva” naj dodamo
• Ne zapadimo skušnjavam, da želimo dodati preveč “bogastva”.
• Večini ljudi obstoječi model, temelječ na straneh in z omejeno interaktivnostjo , zadošča
• Prilagajanje novim pristopom terja čas
• Tudi dogovori se počasi pojavljajo in uveljavljajo.
• “Bogastvo” dodajajmo počasi, le tam, kjer bistveno izboljša uporabnost.
• Raziskave uporabnikov in redno preverjanje uporabnosti nam pomaga pri določanju, koliko bogastva je primernega v danem času.
![Page 38: Tehnologije bogatih spletnih aplikacij](https://reader036.vdocuments.net/reader036/viewer/2022081420/568137e3550346895d9f8d0b/html5/thumbnails/38.jpg)
Zaznana ponudba (perceived affordance)
Bogastvo lahko dodajamo tako, da uporabniki direktno interaktirajo z elementi na strani (urejanje teksta, vlečenje in spuščanje grafičnih elementov, premikanje zemljevida.
Kako povedati uporabniku, kaj lahko dela z elementi na strani in kako uporabljati nove kontrole?
Ljudje morajo biti sposobni odkrivanja kontrol in jihovega načina uporabe.
Pojem “zaznane ponudbe” (perceived affordance) (zaznane lastnosti stvari, ki določajo, kako lahko stvari uporabimo).
Primer: Pri 3D gumb je zaznana ponudba visoka. S senčenjem zaznamo, da gumb lahko pritisnemo s klikom.
![Page 39: Tehnologije bogatih spletnih aplikacij](https://reader036.vdocuments.net/reader036/viewer/2022081420/568137e3550346895d9f8d0b/html5/thumbnails/39.jpg)
Smiselna uporaba kontrolSmiseln način uporabe kontrol, ki oponašajo stvari, ljudem znane iz realnega sveta.
Primer: Izračunavanje hipoteke in prikaz dobe z drsnikom
![Page 40: Tehnologije bogatih spletnih aplikacij](https://reader036.vdocuments.net/reader036/viewer/2022081420/568137e3550346895d9f8d0b/html5/thumbnails/40.jpg)
Smiselna uporaba kontrol
Ali pa sprememba izgleda elementa, ko ga pokrijemo z miško, ne da bi prihajalo do zmede v vmesniku.
Primer: indikacija elementov, ki jih lahko uredimo ali brišemo
![Page 41: Tehnologije bogatih spletnih aplikacij](https://reader036.vdocuments.net/reader036/viewer/2022081420/568137e3550346895d9f8d0b/html5/thumbnails/41.jpg)
Kaj poleg “zaznane ponudbe”Poleg zagotavljanja visoke zaznane ponudbe kontrol moramo še:
•Izkoristiti pomen demonstracije. Na prvih stopnjah novega vmesnika vklučimo na stran krajši video s prikazom interakcije. •Zagotovimo konsistentno uporabo kontrol in modela interakcije vzdolž celotnega vmesnika in tudi z drugimi stranmi, ki jih uporabnik obiskuje.
•To ljudem omogoča lažje učenje in grajenje na svojih predhodnih izkušnjah.
![Page 42: Tehnologije bogatih spletnih aplikacij](https://reader036.vdocuments.net/reader036/viewer/2022081420/568137e3550346895d9f8d0b/html5/thumbnails/42.jpg)
Osveževanje dela strani
Pri delnem osveževanju strani je pomembno, da ljudje to opazijo.Pozornost vzbudimo s premikanjem in visokim barvnim kontrastomKo kliknemo na gumb, ostane naša pozornost na njem. Sprememba mora biti v bližini klika
Pozorni smo lahko na eno stvar naenkrat. Torej spreminjajmo eno stvar naenkrat in ne premikajmo stvari ter uporabljajmo visokega kontrasta drugje.
Primer učinkovite povratne informacije z barvo, premikanjem in pravilnim lociranjem najdemo na straneh
![Page 43: Tehnologije bogatih spletnih aplikacij](https://reader036.vdocuments.net/reader036/viewer/2022081420/568137e3550346895d9f8d0b/html5/thumbnails/43.jpg)
Razbitje modela strani
Ko interaktiramo s svetom, razvijemo miselni model, kako delujejo stvari.Večina ljudi je razvila svoj, o spletu zasnovan na straneh. Vsak klik nas pripelje na novo stran. Klik na gumb “back” nas vrne na prejšnjo.
RIA uporablja drugačen model.Pomisliti moramo, kdaj uporabimo posamezne in kdaj obogatene strani.Ne poskušajmo vsega vtakniti na eno stran samo zato, ker se to da.
Nekateri radi uporabljajo gumb “back”. Ne onemogočimo ga.
Problem: kako nakazati razliko spremembe strani in spremembe na strani.Sčasoma bo treba razviti nove vizualne modele navigacije.
![Page 44: Tehnologije bogatih spletnih aplikacij](https://reader036.vdocuments.net/reader036/viewer/2022081420/568137e3550346895d9f8d0b/html5/thumbnails/44.jpg)
Primer slabe prakseGoogle Reader uporablja klasičen način navigacije ( (Home, Your Subscriptions, itd.), kar pomeni navigacijo na posamezne strani, dejansko pa spremeni vsebino v telesu strani. Ko skušamo uporabiti gumb “back”, se ne vrnemo na domačo stran, pač pa na zadnjo obiskano stran pred vstopom v Google Reader. To nekaterim deluje frustrirajoče.