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

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

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

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

Primeri strani v stilu RIA

• Google Maps (Spletni zemljevidi)• GAP (Spletno nakupovanje)• Odeo (Spletni audio/video kanali)• Flickr (Organiziranje in souporaba (sharing) fotografij)

Primer RIA: Google maps

Primer RIA: GAP – spletno nakupovanje

Primer RIA: ODEO -spletni audio/videokanali

Primer RIA: flickr (organiziranje fotografij)

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

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.

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

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

RIA bogati načine komunikacije

Spekter aplikacij RIA

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.

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!

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.

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

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

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

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

Flex implementacija komponente “dock” ki jo poznamo pri MacOSX.

http://dev.getoutsmart.com/labs/dock/

Flex demo: Zemlja in luna

http://dev.getoutsmart.com/os3d/demos/earth/

Flex demo: video soba

http://dev.getoutsmart.com/os3d/demos/videoroom/

Flex demo: Virtualna klepetalnica

http://labs.getoutsmart.com/

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.

Silverlight

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

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

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

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.

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.

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

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

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

Nekaj namigov za RIA

• Koliko “bogastva” naj dodamo• Zaznana ponudba (perceived affordance)

• Smiselna uporaba kontrol • Kaj še poleg “zaznane ponudbe”• Osveževanje dela strani

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.

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.

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

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

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.

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

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.

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.