interazione avanzata su web: dai plugin ad ajax sistemi per linterazione locale e remota corso di...
TRANSCRIPT
Interazione avanzata su web: dai plugin ad
Ajax
Sistemi per l’interazione locale e remotaCorso di Laurea in Informatica Specialistica
A.A. 2008/2009
Emanuele Panizzi25 marzo 2009
Emanuele Panizzi 25/3/09
Interazione avanzata su web
Indice
• Web1.0: Pagine statiche, dinamiche, Applicazioni web (2000)
• Rich Internet Applications• Web2.0: Tecnologie• Web2.0: mashup• Interazione
QUI: ESEMPI
Emanuele Panizzi 25/3/09
Interazione avanzata su web
RICHIESTA
WEB Server
server client
Browserurlinfo sul richiedente(tipo di browser, lingua, etc.)
Emanuele Panizzi 25/3/09
Interazione avanzata su web
RISPOSTA
File .html
WEB Server Browser
server client
pagina web statica: il contenuto è sempre lo stesso
file html
www.useit.com
Emanuele Panizzi 25/3/09
Interazione avanzata su web
File .php
WEB Server Browser
RISPOSTA
server client.php
PHP
File .html
pagina web dinamica: il contenuto puòvariare di volta in volta
condizioni esterne:ora, informazioniricevute con larichiesta, etc.
file html
Emanuele Panizzi 25/3/09
Interazione avanzata su web
File .php
WEB Server Browser
RISPOSTA
server client.php
PHP
File .html
DBMS
file html
pagina web dinamica: il contenuto puòvariare di volta in volta e da utente a utente
condizioni esterne:ora, informazioniricevute con larichiesta, etc.
www.repubblica.itwww.libero.it
Emanuele Panizzi 25/3/09
Interazione avanzata su web
File .php
WEB Server Browser
RISPOSTA
server client.php
PHP
File .htmlcon Javascript
DBMS
file html
pagina attiva.il browser può modificare ulteriormente la pagina
in base ad azioni dell’utente (es. mouse over)
condizioni esterne:ora, informazioniricevute con larichiesta, etc.
JAVASCRIPT
Emanuele Panizzi 25/3/09
Interazione avanzata su web
Pagine statiche
• Lato server:– File statico– Stateless
• Lato client (browser):– Visualizzazione– Interazione:
• link ipertestuali, • widget dei form, • semplici animazioni (es. roll-over), • controllo dati form
rollover
Emanuele Panizzi 25/3/09
Interazione avanzata su web
Pagine dinamiche / web apps
• Input:– Dal browser (lingua, IP, tipo di browser…)– Dall’utente
• Metodo GET: …index.php?q=musica&ln=it• Mediante form• Metodo POST
• Output: una pagina html• Stato:
– Modifiche DB– Stato dell’utente (sessione)– cookies
Emanuele Panizzi 25/3/09
Interazione avanzata su web
Differenza applicazione / pag web
• Tempi di risposta• Interfaccia modificata per parti• Elaborazione asincrona rispetto
all’intervento dell’utente
excel
Emanuele Panizzi 25/3/09
Interazione avanzata su web
Rich Internet Application (RIA)
• Applicazioni web con stesse feature e funzionalità di applicazioni desktop [wikipedia]
• Girano nel browser • Client: UI • Server: elaborazione• Uso di più server per diversi dati
Emanuele Panizzi 25/3/09
Interazione avanzata su web
Pro e Contro delle RIA• Pro:
– indipendenti da OS; – no installazione– carico bilanciato tra client e server– minor traffico di rete, maggiore efficienza nella
comunicazione client-server
• Contro:– Sandbox (restrizione sulle risorse)– Il browser deve supportare determinati linguaggi e
standard (Javascript, CSS, DOM scripting, XMLHTTPRequest (API per comunicazione client/server))
– Efficienza dell’esecuzione di programmi nel browser– Tempi di trasferimento del codice sul client
Emanuele Panizzi 25/3/09
Interazione avanzata su web
Esempi di RIA
Google suggest: http://www.google.com/webhp?complete=1&hl=en
Edit grid: http://www.editgrid.com/home
Google docs: http://docs.google.com
Google calendar: http://www.google.com/calendar
Gmail: http://www.gmail.com
Google Maps: http://maps.google.com/
The unofficial web application list: http://www.webapplist.com/
Emanuele Panizzi 25/3/09
Interazione avanzata su web
Metodi e tecnologie
• Javascript• AJAX• Flash• ActiveX• Java applets• Java Web Start• Linguaggi per interfacce utente: XUL,
SMIL, SVG• REST
Emanuele Panizzi 25/3/09
Interazione avanzata su web
AJAX
• Asinchronous Javascript And XML• Consiste nell’uso congiunto di un
gruppo di tecnologie, quali:– XHTML (o HTML) e CSS– DOM– XMLHTTPRequest– XML– Javascript
Emanuele Panizzi 25/3/09
Interazione avanzata su web
REST
• Representational State Transfer• Trasmettere dati su HTTP senza uso
di layer addizionali• Resources <--> URI• Interfaccia: operazioni / content-
types• Protocollo: Client/Server; stateless;
cacheable; layered
Emanuele Panizzi 25/3/09
Interazione avanzata su web
JSON (Javascript Object Notation)
• Semplice formato per scambio dati• Alternativo a XML, usato in AJAX con
Javascript• Eval(); <head>• Il server restituisce codice Javascript
che può essere eseguito e aggiorna lo stato dell’applicazione client
Emanuele Panizzi 25/3/09
Interazione avanzata su web
Mashup
• Sito o applicazione web che include dinamicamente informazioni provenienti da più fonti
flickrvision
Emanuele Panizzi 25/3/09
Interazione avanzata su web
Interazione con le RIA
• Caratteristiche generali:– L’utente interagisce direttamente con
elementi della pagina (inline editing, drag&drop, pan di una mappa)
– Update di parte della pagina senza reload
– Dettagli mostrati nella stessa pagina– Feedback, conferme e messaggi
d’errore mostrati nella stessa pagina
Emanuele Panizzi 25/3/09
Interazione avanzata su web
Interazione: Problemi aperti
1. Quanta “ricchezza” nell’interfaccia?– Abitudine al modello a “pagina”, poca
interazione– Larga base di utenti non esperti
2. Come far conoscere l’esistenza e l’uso di strumenti interattivi nella pagina (perceived affordance)?
Kayak slider:http://www.kayak.com
Emanuele Panizzi 25/3/09
Interazione avanzata su web
Interazione: Problemi aperti
3. L’utente si accorge della parte di pagina modificata?– Fuoco/luogo dell’attenzione– Attrazione dell’attenzione (colori,
movimento)– Un solo cambiamento alla volta
Emanuele Panizzi 25/3/09
Interazione avanzata su web
Interazione: Problemi aperti
4. Uso dei tasti del browser: BACK, FORWARD, RELOAD, STOP– Dove andare?– BACK/FORWARD => UNDO/REDO ?– Tasto STOP non sempre attivo– Reload = RESET ?– Stato del sistema
Emanuele Panizzi 25/3/09
Interazione avanzata su web
Interazione: Problemi aperti
5. URL della ‘pagina’– L’URL si deve riferire alla pagina iniziale
o allo stato attuale del programma?– È possibile mettere un bookmark?– Uso del ‘#’
Emanuele Panizzi 25/3/09
Interazione avanzata su web
Interazione: Problemi aperti
6. Ritardi nelle risposte– Siamo in una desktop application o in
una pagina web? L’utente ha 2 aspettative diverse
– Visual feedback
7. Risposte troppo veloci
– Pausa forzata
Emanuele Panizzi 25/3/09
Interazione avanzata su web
FINE
Emanuele Panizzi 25/3/09
Interazione avanzata su web
Plugin
• Programma che interagisce con il browser– Scambia dati con il browser– Segue un protocollo stabilito dal browser– Usa risorse del browser
• Tipici plugin– Lettura o editing di particolari tipi di file
pdf readerquicktimewin media playerflash player
Emanuele Panizzi 25/3/09
Interazione avanzata su web
Applet
• Applicazioni lato client, compilate• L’ambiente in cui sono eseguite è in
genere un plugin• Hanno una propria interfaccia, anche
incorporata nella pagina• Comunicano con un host
Clockspreadsheet
Emanuele Panizzi 25/3/09
Interazione avanzata su web
Java Web Start
• Applicazioni che non girano nel browser
• Sandbox meno restrittiva• Lanciate direttamente dal web
Emanuele Panizzi 25/3/09
Interazione avanzata su web
Web 2.0Web 2.0 generally refers to a supposed second-generation of Internet-based services — such as social networking sites, wikis, communication tools, and folksonomies — that let people collaborate and share information online in previously unavailable ways. In contrast to the first generation, Web 2.0 gives users an experience closer to desktop applications than the traditional static Web pages. [wikipedia]
Emanuele Panizzi 25/3/09
Interazione avanzata su web
RPC / REST• getUser()• addUser()• removeUser()• updateUser()• getLocation()• addLocation()• removeLocation()• updateLocation()• listUsers()• listLocations()• findLocation()• findUser()
exampleAppObject = new ExampleApp('example.com:1234')
exampleAppObject.removeUser('001')
• http://example.com/users/• http://example.com/users/{user} (one for
each user)• http://example.com/findUserForm• http://example.com/locations/• http://example.com/locations/{location}
(one for each location)• http://example.com/findLocationForm
GET
POST