Interazione avanzata su web: dai plugin ad Ajax Seminario di Interazione Locale e Remota Corso di Laurea Magistrale in Informatica A.A. 2009/2010 Emanuele Panizzi 18 marzo 2010

Emanuele Panizzi 18/3/10 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 18/3/10 Interazione avanzata su web RICHIESTA WEB Server serverclient Browser url info sul richiedente (tipo di browser, lingua, etc.)

Emanuele Panizzi 18/3/10 Interazione avanzata su web RISPOSTA File.html WEB ServerBrowser serverclient pagina web statica: il contenuto è sempre lo stesso file html

Emanuele Panizzi 18/3/10 Interazione avanzata su web File.php WEB ServerBrowser RISPOSTA serverclient.php PHP File.html pagina web dinamica: il contenuto può variare di volta in volta condizioni esterne: ora, informazioni ricevute con la richiesta, etc. file html

Emanuele Panizzi 18/3/10 Interazione avanzata su web File.php WEB ServerBrowser RISPOSTA serverclient.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, informazioni ricevute con la richiesta, etc.

Emanuele Panizzi 18/3/10 Interazione avanzata su web File.php WEB ServerBrowser RISPOSTA serverclient.php PHP File.html con Javascript DBMS file html pagina attiva. il browser può modificare ulteriormente la pagina in base ad azioni dellutente (es. mouse over) condizioni esterne: ora, informazioni ricevute con la richiesta, etc. JAVASCRIPT

Emanuele Panizzi 18/3/10 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 18/3/10 Interazione avanzata su web Pagine dinamiche / web apps Input: –Dal browser (lingua, IP, tipo di browser…) –Dallutente Metodo GET: …index.php?q=musica&ln=it Mediante form Metodo POST Output: una pagina html Stato: –Modifiche DB –Stato dellutente (sessione) –cookies

Emanuele Panizzi 18/3/10 Interazione avanzata su web Differenza applicazione / pag web Tempi di risposta Interfaccia modificata per parti Elaborazione asincrona rispetto allintervento dellutente excel

Emanuele Panizzi 18/3/10 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 18/3/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 dellesecuzione di programmi nel browser –Tempi di trasferimento del codice sul client

Emanuele Panizzi 18/3/10 Interazione avanzata su web Esempi di RIA Google suggest: Edit grid: Google docs: Google calendar: Gmail: Google Maps: The unofficial web application list:

Emanuele Panizzi 18/3/10 Interazione avanzata su web Metodi e tecnologie Javascript AJAX Flash ActiveX Java applets Java Web Start Linguaggi per interfacce utente: XUL, SMIL, SVG REST Json

Emanuele Panizzi 18/3/10 Interazione avanzata su web AJAX Asinchronous Javascript And XML Consiste nelluso congiunto di un gruppo di tecnologie, quali: –XHTML (o HTML) e CSS –DOM –XMLHTTPRequest –XML/Json –Javascript

Emanuele Panizzi 18/3/10 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 18/3/10 Interazione avanzata su web JSON (Javascript Object Notation) Semplice formato per scambio dati Alternativo a XML, usato in AJAX con Javascript Eval(); Il server restituisce codice Javascript che può essere eseguito e aggiorna lo stato dellapplicazione client

Emanuele Panizzi 18/3/10 Interazione avanzata su web Mashup Sito o applicazione web che include dinamicamente informazioni provenienti da più fonti flickrvision

Emanuele Panizzi 18/3/10 Interazione avanzata su web Interazione con le RIA Caratteristiche generali: –Lutente 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 derrore mostrati nella stessa pagina

Emanuele Panizzi 18/3/10 Interazione avanzata su web Interazione: Problemi aperti 1. Quanta ricchezza nellinterfaccia? –Abitudine al modello a pagina, poca interazione –Larga base di utenti non esperti 2. Come far conoscere lesistenza e luso di strumenti interattivi nella pagina (perceived affordance)? Kayak slider:

Emanuele Panizzi 18/3/10 Interazione avanzata su web Interazione: Problemi aperti 3. Lutente si accorge della parte di pagina modificata? –Fuoco/luogo dellattenzione –Attrazione dellattenzione (colori, movimento) –Un solo cambiamento alla volta

Emanuele Panizzi 18/3/10 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 18/3/10 Interazione avanzata su web Interazione: Problemi aperti 5. URL della pagina –LURL si deve riferire alla pagina iniziale o allo stato attuale del programma? –È possibile mettere un bookmark? –Uso del #

Emanuele Panizzi 18/3/10 Interazione avanzata su web Interazione: Problemi aperti 6. Ritardi nelle risposte –Siamo in una desktop application o in una pagina web? Lutente ha 2 aspettative diverse –Visual feedback 7. Risposte troppo veloci –Pausa forzata

Emanuele Panizzi 18/3/10 Interazione avanzata su web FINE

Emanuele Panizzi 18/3/10 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

Emanuele Panizzi 18/3/10 Interazione avanzata su web Applet Applicazioni lato client, compilate Lambiente in cui sono eseguite è in genere un plugin Hanno una propria interfaccia, anche incorporata nella pagina Comunicano con un host Clock spreadsheet

Emanuele Panizzi 18/3/10 Interazione avanzata su web Java Web Start Applicazioni che non girano nel browser Sandbox meno restrittiva Lanciate direttamente dal web

Emanuele Panizzi 18/3/10 Interazione avanzata su web Web 2.0 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]

Emanuele Panizzi 18/3/10 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') (one for each user) (one for each location) GET POST