Interazione avanzata su web: dai plugin ad Ajax Sistemi per linterazione locale e remota Corso di...

Interazione avanzata su web: dai plugin ad

Ajax

Sistemi per l’interazione locale e remotaCorso di Laurea in Informatica Specialistica

A.A. 2008/2009

Emanuele Panizzi25 marzo 2009

Emanuele Panizzi 25/3/09

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



RICHIESTA

WEB Server

server client

Browserurlinfo sul richiedente(tipo di browser, lingua, etc.)



RISPOSTA

File .html

WEB Server Browser

server client

pagina web statica: il contenuto è sempre lo stesso

file html

www.useit.com

http://www.useit.com/



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



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


www.repubblica.itwww.libero.it

http://www.repubblica.it/

http://www.libero.it/



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)


JAVASCRIPT



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



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



Differenza applicazione / pag web

• Tempi di risposta• Interfaccia modificata per parti• Elaborazione asincrona rispetto

all’intervento dell’utente

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



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



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/



Metodi e tecnologie

• Javascript• AJAX• Flash• ActiveX• Java applets• Java Web Start• Linguaggi per interfacce utente: XUL,

SMIL, SVG• REST



AJAX

• Asinchronous Javascript And XML• Consiste nell’uso congiunto di un

gruppo di tecnologie, quali:– XHTML (o HTML) e CSS– DOM– XMLHTTPRequest– XML– Javascript



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



JSON (Javascript Object Notation)

• Semplice formato per scambio dati• Alternativo a XML, usato in AJAX con

Javascript• Eval(); <head>• Il server restituisce codice Javascript

che può essere eseguito e aggiorna lo stato dell’applicazione client



Mashup

• Sito o applicazione web che include dinamicamente informazioni provenienti da più fonti

flickrvision



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



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




3. L’utente si accorge della parte di pagina modificata?– Fuoco/luogo dell’attenzione– Attrazione dell’attenzione (colori,

movimento)– Un solo cambiamento alla volta




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




5. URL della ‘pagina’– L’URL si deve riferire alla pagina iniziale

o allo stato attuale del programma?– È possibile mettere un bookmark?– Uso del ‘#’




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



FINE



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



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



Java Web Start

• Applicazioni che non girano nel browser

• Sandbox meno restrittiva• Lanciate direttamente dal 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]



RPC / REST• getUser()• addUser()• removeUser()• updateUser()• getLocation()• addLocation()• removeLocation()• updateLocation()• listUsers()• listLocations()• findLocation()• findUser()

exampleAppObject = new ExampleApp('example.com:1234')

exampleAppObject.removeUser('001')

• http://example.com/users/• http://example.com/users/{user} (one for

each user)• http://example.com/findUserForm• http://example.com/locations/• http://example.com/locations/{location}

(one for each location)• http://example.com/findLocationForm

GET

POST

Interazione avanzata su web: dai plugin ad Ajax Sistemi per linterazione locale e remota Corso di...

Documents

Transcript of Interazione avanzata su web: dai plugin ad Ajax Sistemi per linterazione locale e remota Corso di...