Upload
steel-hunt
View
54
Download
0
Embed Size (px)
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 Presentation
Citation preview
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.