Interazione avanzata su
web: dai plugin ad Ajax
Seminario di Interazione avanzata
Corso di Laurea Magistrale in Informatica
A.A. 2006/2007
Emanuele Panizzi
23 ottobre 2006
Indice
•
•
•
•
•
•
•
•
Pagine statiche
Plugin, Applet
Pagine dinamiche
Applicazioni web (2000)
Differenza con applicazioni per S.O.
Rich Internet Applications
Tecnologie
Interazione
E.Panizzi 23/10/06
Interazione avanzata su web
QUI: ESEMPI
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
E.Panizzi 23/10/06
Interazione avanzata su web
rollover
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
E.Panizzi 23/10/06
Interazione avanzata su web
pdf reader
quicktime
win media playe
flash player
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
E.Panizzi 23/10/06
Interazione avanzata su web
Clock
spreadsheet
Java Web Start
• Applicazioni che non girano nel browser
• Sandbox meno restrittiva
• Lanciate direttamente dal web
E.Panizzi 23/10/06
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
E.Panizzi 23/10/06
Interazione avanzata su web
Differenza applicazione / pag web
• Tempi di risposta
• Interfaccia modificata per parti
• Elaborazione asincrona rispetto
all’intervento dell’utente
E.Panizzi 23/10/06
Interazione avanzata su web
excel
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
E.Panizzi 23/10/06
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
E.Panizzi 23/10/06
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/
E.Panizzi 23/10/06
Interazione avanzata su web
Metodi e tecnologie
•
•
•
•
•
•
•
Javascript
AJAX
Flash
ActiveX
Java applets
Java Web Start
Linguaggi per interfacce utente: XUL,
SMIL, SVG
E.Panizzi 23/10/06
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
E.Panizzi 23/10/06
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
E.Panizzi 23/10/06
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)?
E.Panizzi 23/10/06
Interazione avanzata su web
Kayak slider:
http://www.kayak.com
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
E.Panizzi 23/10/06
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
E.Panizzi 23/10/06
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 ‘#’
E.Panizzi 23/10/06
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
E.Panizzi 23/10/06
Interazione avanzata su web
Web 2.0
Web 2.0 generally refers
to a supposed secondgeneration of Internetbased 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]
E.Panizzi 23/10/06
Interazione avanzata su web
FINE
E.Panizzi 23/10/06
Interazione avanzata su web
RICHIESTA
server
client
WEB Server
Browser
url
info sul richiedente
(tipo di browser, lingua, etc.)
E.Panizzi 23/10/06
Interazione avanzata su web
RISPOSTA
server
client
File .html
WEB Server
E.Panizzi 23/10/06
pagina web statica:
il contenuto è sempre lo stesso
file html
Interazione avanzata su web
Browser
www.useit.com
RISPOSTA
server
File .php
client
condizioni esterne:
ora, informazioni
ricevute con la
richiesta, etc.
pagina web dinamica: il contenuto può
variare di volta in volta
PHP
File .html
WEB Server
E.Panizzi 23/10/06
file html
Interazione avanzata su web
Browser
RISPOSTA
server
File .php
client
condizioni esterne:
ora, informazioni
ricevute con la
richiesta, etc.
pagina web dinamica: il contenuto può
variare di volta in volta e da utente a utente
PHP
DBMS
File .html
WEB Server
E.Panizzi 23/10/06
file html
Interazione avanzata su web
Browser
www.repubblica.it
www.libero.it
RISPOSTA
server
File .php
PHP
condizioni esterne:
ora, informazioni
ricevute con la
richiesta, etc.
DBMS
client
pagina attiva.
il browser può modificare ulteriormente la pagina
in base ad azioni dell’utente (es. mouse over)
File .html
con
Javascript
JAVASCRIPT
WEB Server
E.Panizzi 23/10/06
file html
Interazione avanzata su web
Browser