Tehnologije bogatih spletnih aplikacij

1. 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.

2. 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.

3. Spletne aplikacije Spletne aplikacije Dogodkovno vodene Dinamične vsebine Uporaba podat. baz Dostopnost interneta Bogatost namizja Radikalna povezljivost Funkcionalnost odjemalca Pasivna Interaktivna Navaden HTML Namizne aplikacije Široka dosegljivost Uporaba brkljalnika Vsebina, dokumenti Bogata vsebina Visoka interaktivnost Gibanje, zvok, video Funkcionalnost Strežnika

4. Stalnost in odziv Interakcija pri tradicionalni spletni aplikaciji Akcija uporabnika Nalaganje zaslona Osvežitev podatkov Interakcija pri bogati spletni aplikaciji (RIA) 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 Akcija uporabnika Osvežitev podatkov

5. Primeri strani v stilu RIA • Google Maps (Spletni zemljevidi) • GAP (Spletno nakupovanje) • Odeo (Spletni audio/video kanali) • Flickr(Organiziranje in souporaba (sharing) fotografij)

6. Primer RIA: Google maps

7. Primer RIA: GAP – spletno nakupovanje

8. Primer RIA: ODEO -spletni audio/videokanali

9. Primer RIA: flickr (organiziranje fotografij)

10. 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

11. 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.

12. 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).

13. 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

14. RIA bogati načine komunikacije

15. Spekter aplikacij RIA

16. 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.

17. 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!

18. 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.

19. 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

20. Tradicionalne spletne aplikacije Pick An Item ‘Add To Cart’ Action ValidationPersistenceForwarding Review Cart Enter Data Submit Action ValidationPersistenceForwarding EnterShipping Enter Data Submit Strani in akcije Error Page ‘Can’t Order 500’ Action ValidationPersistenceForwarding Enter Billing Enter Data Submit Delovna enota je stran Koda na strani odjemalca potrdi veljavnost (validation) S “Submit” sprožimo akcije Akcije opravijo delo in posredujejo naslednjo stran Osveževanje strani po vsakem “Submit”

21. AJAX spremeni izgradnjo spletnih aplikacij Komponente in dogodki Item ListComponent Order Entry ErrorViewer(DIV) Events/Actions Validation Persistence Event Handlers GUI Creation Item List (DIV) Shopping CartComponent Shopping Cart (DIV) AJAX ShippingComponent Shipping Form (DIV) Billing Form (DIV) BillingComponent Delovna enota je komponenta Tronivojski model strežnik odjemalec Odjemalec skrbi za validacijo, tok, izgled in izmenjavo podatkov Nimamo gumbov “submit” Osvežijo se le deli strani

22. 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

23. Flex implementacijakomponente “dock”ki jo poznamo pri MacOSX. http://dev.getoutsmart.com/labs/dock/

24. Flex demo: Zemlja in luna http://dev.getoutsmart.com/os3d/demos/earth/

25. Flex demo: video soba http://dev.getoutsmart.com/os3d/demos/videoroom/

26. Flex demo: Virtualna klepetalnica http://labs.getoutsmart.com/

27. 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.

28. Silverlight • Microsoft Silverlight podobno kot Flex teče na vtiču (plugin) brkljalnika. Tako s kompatibilnostjo ni problemov, ni pa še tako razširjen.

29. Primerjava

30. 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

31. Podobe (shapes) • Flash pomni podobe v binarni obliki. Definicije oblik terjajo dodatna orodja in več učenja. • Silverlightuporablja XAML, kar lahko pomnimo kot tekst oziroma objekt XML. To naj bi načeloma pospeševalo naše delo. 

32. 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.

33. Orodja • Vsebino Silverlightlahko 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

34. 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

35. 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

36. Nekaj namigov za RIA • Koliko “bogastva” naj dodamo • Zaznana ponudba (perceived affordance) • Smiselna uporaba kontrol • Kaj še poleg “zaznane ponudbe” • Osveževanje dela strani

37. 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.

38. 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.

39. Smiselna uporaba kontrol Smiseln način uporabe kontrol, ki oponašajo stvari, ljudem znane iz realnega sveta. Primer: Izračunavanje hipoteke in prikaz dobe z drsnikom

40. 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

41. 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.

42. Osveževanje dela strani Pri delnem osveževanju strani je pomembno, da ljudje to opazijo. Pozornost vzbudimo s premikanjem in visokim barvnim kontrastom Ko 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

43. 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.

44. Primer slabe prakse Google Readeruporablja 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.