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

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

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

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

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

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 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

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

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

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

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 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

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

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

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 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 www.useit.com

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

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 www.repubblica.it www.libero.it E.Panizzi 23/10/06 Interazione avanzata su web

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