AJAX - back to the future

SabinSabin--Corneliu BuragaCorneliu Buragawww.infoiasi.ro/~busacowww.infoiasi.ro/~busaco//

•• ww

ReReîîntoarcerentoarcere îînn viitorviitor: AJAX: AJAX

Sabin-Corneliu BuragaFacultatea de Informatică,

Universitatea “A. I. Cuza” din Iaşihttp://www.infoiasi.ro/~busaco/

•• ww

“Un om nu atinge cunoaşterea

decât cu ajutorul celor care o posedă.”

P.D. Uspensky

•• ww

web cuprinscuprins

• Preliminarii:de la Web 1.0 la Data Web (Web 2.0)

• “Tehnologia” AJAX (Asynchronous JavaScript And XML)

• Utilizări şi exemple demonstrative

• Concluzii: de la Data Web la Semantic Web

•• ww

web preliminariipreliminarii

• De la Web 1.0 la Data Web (Web 2.0)– Web 1.0 (n. 1990 – m. 2002?)

– Spaţiul WWW văzut ca o platformă, în care utilizatorul îşi controlează propriile date

– Servicii (nu pachete software), participare, scalabilitate, transformări ale datelor, software rulat oriunde, inteligenţă colectivă

• Vezi “Design Patterns and Business Models for the Next generation of Software”(Tim O’Reilly) – www.oreilly.com

•• ww

• De la Web 1.0 la Data Web (Web 2.0)–Marcaje (adnotări) definite de utilizator

• Vezi “Folksonomies – Cooperative Classification and Communication through Shared Metadata” (Adam Mathes)

• Adnotarea (tagging) continutuluidel.icio.us, flickr.com

• Folksonomy = folk + taxonomy

•• ww

• De la Web 1.0 la Data Web (Web 2.0)–Participare, nu doar publicare a datelor

• Fenomenul blogging• Tehnologia RSS/Atom pentru mediatizarea

(syndication) conţinutului siturilor Web• Relaţii între blog-uri via permalinks• Blogosfera = social network

în stilul peer-to-peervezi Friendster, LinkedIn, Orkut,...

• Utilizatorii adaugă valoare resurselor Web

•• ww

• De la Web 1.0 la Data Web (Web 2.0)–Descentralizare radicală

• Fenomenul BitTorent• Un serviciu devine automat mai bun

cu cît mai mulţi oameni îl utilizează

–Încredere radicală• Fenomenul wiki – vezi Wikipedia.org• “With enough eyeballs, all bugs are shallow”

(Eric Raymond)

•• ww

• De la Web 1.0 la Data Web (Web 2.0)–Interacţiune bogată cu utilizatorul

• Interactivitate Web similară interactivităţii convenţionale cu utilizatorul

• Avantajele Web-ului (ubicuitate, date distribuite via hipertext, posibilităţi de căutare etc.) + interacţiune sofisticată + utilizabilitate

• Pioneri: Gmail, Google Maps, Writely

•• ww

web AJAXAJAX

• Cine/ce este AJAX?– Erou mitologic implicat în războiul troian

(Encarta Reference Library)– Asynchronous JavaScript And XML

(Jeese James Garrett)

•• ww

web AJAXAJAX

• AJAX nu este o tehnologie, ci reprezintă o suită de tehnologii deschise, incorporând:– Limbaje standardizate de prezentare a datelor

(XHTML, CSS)– Redare & interactiune via standardul DOM

(Document Object Model)– Interschimb & manipulare de date

prin XML si/sau XSLT– Transfer asincron de date via XMLHttpRequest– Procesare prin ECMAScript (JavaScript)

•• ww

web AJAXAJAX

• Componenta de bază este obiectul XMLHttpRequest– Permite realizarea de cereri HTTP (e.g., GET şi

POST) dintr-un program rulând la nivel de client (browser) spre o aplicaţie de pe server, într-un mod asincron

– Nu necesită reîncărcarea paginilor Web– Uzual, datele vehiculate între programele client şi server sunt marcate în XML (ExtensibleMarkup Language)

•• ww

web AJAXAJAX

Client Client ((browserbrowser))

Server Server WebWeb

XMLHttpRequestXMLHttpRequest Server Server aplicatiiaplicatii

open (“GET”)

open (“POST”)send (...)

DOMDOM

Fereastra navigatorului Documentul XML

•• ww

web AJAXAJAX

• Aspecte importante:– Evitarea încărcării întregii pagini

• Pro: cu XMLHttpRequest şi DOM se pot modifica doar fragmente de document

• Contra: bookmarking-ul poate fi compromis

– Distincţia dintre aplicaţie Web şi sit Web• Trebuie să primeze aşteptările (expectations)

utilizatorului – vezi Human Interface Guidelines

– Oferirea de alternative la AJAX, când suportul pentru el nu există implementat

– Eliminarea paginilor de confirmare

•• ww

web AJAXAJAX

• Principii de proiectare:– Minimizarea traficului dintre browser si server– Stabilirea unui mod de interacţiune clar

(interacţiune HTML versus AJAX versus aplicaţie convenţională)

– Evitarea confuziilor, prin adoptarea convenţiilor de interacţiune Web/clasică

– Eliminarea distragerii utilizatorului (e.g., folosirea de animaţii gratuite)

– Adoptarea AJAX pentru creşterea utilizabilităţii, nu doar de dragul tehnologiei

•• ww

web AJAXAJAX

• Câteva şabloane arhitecturale (Michael Mahemoff)– Tratarea evenimentelor la nivel local– Reîmprospătarea periodică a conţinutului– Anticiparea download-urilor

(pre-încărcarea datelor ce vor fi solicitate)– Transmiterea explicită a datelor spre server– Oferirea de posibilităţi de bookmarking

– Detalii la AJAXPatterns.org

•• ww

web AJAXAJAX

• O serie de şabloane de prezentare a datelor:– Folosirea proprietăţilor CSS

– Adoptarea principiilor de utilizabilitate

– Indicarea “vârstei” informaţiei afişate

– Oferirea de indicii privind ce date au fost deja transmise serverului şi ce date se află în aşteptare (pending) pentru a fi transmise

•• ww

web AJAXAJAX

• Şabloane de interacţiune– Similare celor disponibile

in cazul aplicaţiilor clasice:

• Drag & drop

• Popup data input

• Popup information

• Highlighting

• Auto-completion

• ...

•• ww

web concluziiconcluzii

• AJAX este una dintre componentele-cheie a aplicaţiilor Web 2.0– A9.com, EpiphanyRadio, Flickr,

Google Maps, Google Suggest, Orkut,...• Se poate considera că – via AJAX – se pot

implementa servicii Web asincrone, în stilul REST (REpresentational State Transfer)– Vezi “Building Web Services the REST Way”

(Roger Costello) – Vezi “REST and the Real World”

(Paul Prescod)

•• ww

• AJAX poate fi unul dintre elementele de construcţie a Web-ului social (Social Web)– Hiperlegături între persoane şi organizaţii,

nu doar între maşini şi documente– Legături persistente independente la schimbări– Rezolvarea problemelor legate de intimitate

personală (privacy) şi încredere (trust)– Solutia: constituirea identificatorilor XRI

(Extensible Resource Identifiers)– Vezi “The Social Web: Creating an Open Social

Network with XDI” (Drummond Reed et al.)

•• ww

• AJAX & Web-ul de date (Data Web)– Data Web ≡ soluţie simplificatoare pentru

interschimb de date, bazată pe principiile arhitecturale ale Web-ului şi pe conceptele de bază ale serviciilor Web şi Web-ului semantic

– Datele şi ofertanţii de date vor fi identificate via XRI, reprezentarea şi “legarea” datelor se vor face printr-o schemă XDI (XRI Data Interchange), iar interschimbul de date se va realiza graţie serviciilor XDI (extensii ale serviciilor Web actuale)

– Vezi şi “The Dataweb” (Drummond Reed)

•• ww

• Aplicaţii ale Web-ului social şi de date– Porţi (portaluri) de acces la contacte personale– Filtre de încredere (trust filters)– Managementul inteligent al e-mail-ului– Calendare de evenimente & semne de carte

generate automat– Auto-registration, auto-login,

auto-personalization– Protecţia furtului identităţii digitale– Social search– Reţele de reputaţie (reputation networks)

•• ww

• Actualele/viitoarele aplicaţii vor trebui să integreze servicii oferite de dispozitive mobile, calculatoare personale, servere etc.

• Când dispozitivele & programele sunt conectate la Internet, aplicaţiile nu mai constituie artefacte software, ci devin servicii – the perpetual beta

• “Useful software written above the levelof the single device will command highmargins for a long time to come”(Dave Stutz)

•• ww

web rezumatrezumat

• Preliminarii:de la Web 1.0 la Data Web (Web 2.0)

• “Tehnologia” AJAX (Asynchronous JavaScript And XML)

• Utilizări şi exemple demonstrative

• Concluzii: de la Data Web la Semantic Web

•• ww

ReReîîntoarcerentoarcere îînn viitorviitor: AJAX: AJAX

Întrebări?

AJAX - back to the future

Technology

BACK TO SCHOOL, BACK TO THE FUTURE

Ajax php-the-future-of-web-applications

Back To The Future

Back to future (thesis)

The future of Ajax and ZK 5...Where we see the future of Ajax Conclusion CLIENT-CENTRIC AJAX SOLUTIONS Client Centric是什麽？Application Application

FLASH GORDON war rocket ajax - iiNetmembers.iinet.net.au/~canison/Ajax/WarRocketAjaxInstructions.pdf · dispatched War Rocket Ajax to kill and bring back Gordon’s body. - 6 - However,

“Back to the Future”

Mobile Ajax and the Future of the Web

Card Set Number Player Back to the Future Materials 5 ......Back to the Future Materials 4 Amar'e Stoudemire Back to the Future Materials 5 Arron Afflalo Back to the Future Materials

Strip Back The Future

Ajax! Ajax Programming Ajax! Ajax Programming. Ajax! Ajax Programming Take a look at a typical desktop…

The Future of Armoured Fighting Vehicles - General …€¦ · 8 10 12 14 16 18 20 22 24 26 28 30 32 34 ... AJAX – the future of Armoured Fighting Vehicles AJAX represents the future

AJAX - download.microsoft.comdownload.microsoft.com/.../DrMaster_ASP.NET_AJAX_foreword.pdf4 3 AJAX 8 150 ASP.NET AJAX 1 ASP.NET AJAX 1.0 ASP.NET AJAX 1.0 AJAX ASP.NET AJAX 1.0 AJAX

Gardening Back to Future

The Future of JavaScript (Ajax Exp '07)

Welcome Back Future Scientists!.

How real is future? The case of futurates in Polish Blaszczak and Klime… · Two future forms in Polish simple future(=SF): Ajax zagraz FC Porto. Ajax play. prs.perf.3sg with FC

Back to future

back in the future

JSF And Ajax : Past Present And Future - SYS-CON Mediadw.connect.sys-con.com/session/47/JSF-Ajax.pdf · JSF And Ajax : Past Present And Future Andy Schwartz ... JSF 2.0 Ajax : What