Upload
alfonso-mauro
View
220
Download
2
Embed Size (px)
Citation preview
Interazione avanzata su web: dai plugin ad
Ajax
Seminario di Interazione avanzataCorso di Laurea Magistrale in Informatica
A.A. 2006/2007
Emanuele Panizzi23 ottobre 2006
E.Panizzi 23/10/06 Interazione avanzata su web
Indice
• Pagine statiche• Plugin, Applet• Pagine dinamiche• Applicazioni web (2000)• Differenza con applicazioni per S.O.• Rich Internet Applications• Tecnologie• Interazione
QUI: ESEMPI
E.Panizzi 23/10/06 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
E.Panizzi 23/10/06 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
E.Panizzi 23/10/06 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
E.Panizzi 23/10/06 Interazione avanzata su web
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
excel
E.Panizzi 23/10/06 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
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)?
Kayak slider:http://www.kayak.com
E.Panizzi 23/10/06 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
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.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]
E.Panizzi 23/10/06 Interazione avanzata su web
FINE
E.Panizzi 23/10/06 Interazione avanzata su web
RICHIESTA
WEB Server
server client
Browserurlinfo sul richiedente(tipo di browser, lingua, etc.)
E.Panizzi 23/10/06 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
E.Panizzi 23/10/06 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
E.Panizzi 23/10/06 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
E.Panizzi 23/10/06 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