Interazione avanzata su web: dai plugin ad Ajax

Presentazione sul tema: "Interazione avanzata su web: dai plugin ad Ajax"— Transcript della presentazione:

1 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

2 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 E.Panizzi 23/10/06 Interazione avanzata su web QUI: ESEMPI

3 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 E.Panizzi 23/10/06 Interazione avanzata su web rollover

4 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 reader quicktime win media player flash player E.Panizzi 23/10/06 Interazione avanzata su web

5 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 Clock spreadsheet E.Panizzi 23/10/06 Interazione avanzata su web

6 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

7 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

8 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

9 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

10 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

11 Interazione avanzata su web
Esempi di RIA Google suggest: Edit grid: Google docs: Google calendar: Gmail: Google Maps: The unofficial web application list: E.Panizzi 23/10/06 Interazione avanzata su web

12 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

13 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

14 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

15 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: E.Panizzi 23/10/06 Interazione avanzata su web

16 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

17 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

18 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

19 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

20 Interazione avanzata su web
Web 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

21 Interazione avanzata su web
FINE E.Panizzi 23/10/06 Interazione avanzata su web

22 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

23 RISPOSTA WEB Server Browser server client pagina web statica:
File .html WEB Server Browser server client pagina web statica: il contenuto è sempre lo stesso file html E.Panizzi 23/10/06 Interazione avanzata su web

24 RISPOSTA server client PHP WEB Server Browser .php
condizioni esterne: ora, informazioni ricevute con la richiesta, etc. client File .php .php pagina web dinamica: il contenuto può variare di volta in volta PHP File .html WEB Server Browser file html E.Panizzi 23/10/06 Interazione avanzata su web

25 RISPOSTA server client PHP DBMS WEB Server Browser .php
condizioni esterne: ora, informazioni ricevute con la richiesta, etc. client File .php .php pagina web dinamica: il contenuto può variare di volta in volta e da utente a utente PHP DBMS File .html WEB Server Browser file html E.Panizzi 23/10/06 Interazione avanzata su web

26 RISPOSTA server client PHP DBMS WEB Server Browser .php pagina attiva.
condizioni esterne: ora, informazioni ricevute con la richiesta, etc. client File .php .php pagina attiva. il browser può modificare ulteriormente la pagina in base ad azioni dell’utente (es. mouse over) PHP DBMS File .html con Javascript WEB Server Browser JAVASCRIPT file html E.Panizzi 23/10/06 Interazione avanzata su web