Stefano Ceri, Florian Daniel, Federico Facca, Maristella Matera Modellazione concettuale di applicazioni Web personalizzate e context-aware Estensione WebML - WP7.1 Milano – 18 Novembre ‘04
Stefano Ceri, Florian Daniel, Federico Facca, Maristella Matera
Modellazione concettuale di applicazioni Web personalizzate e context-aware
Estensione WebML - WP7.1
Milano – 18 Novembre ‘04
2Modellazione concettuale
Linguaggio grafico (e testuale) di modellazione per applicazioni Web data-intensive
Supporta personalizzazione lungo due dimensioni
• Contenuti personalizzati rispetto ad utenti
• Interfacce ipertestuali personalizzate rispetto a gruppi WebML adattativo
• Personalizzazione dell’applicazione non solo rispetto all’identità dell’utente, ma anche rispetto al suo contesto.
Dimensioni di adattività (cosa vogliamo ottenere?)
• Adattamento automatico di contenuti
• Esecuzione automatica di azioni di navigazione o servizi
• Adattamento automatico dell’ipertesto (site view) Per ulteriori dettagli: rapporto R.7.1.1
WebML & Adattività
Descrizione generale
3Modellazione concettuale
Pagine “C” presentano comportamento adattativo
• Aggiornamento pagina tramite meccanismo di refresh automatico
Azioni di adattamento: specificano il comportamento adattativo e sono eseguite a ogni refresh automatico
Aree “C” permettono di raggruppare operazioni da eseguire per ogni pagina “C” contenuta
• Contenitori interni ereditano azioni da quelli esterni
WebML adattativo: Overview
Contenitori context-awareAreaArea context-aware
Pagina context-aware C
C
Azioni diadattamento
Azioni diadattamento
Pagina convenzionale
4Modellazione concettuale
WebML adattativo: Computo di pagine dinamiche
1. Decode request parameters
HTTP request
Request parameters
Query results
HTTP response
2. Connect to the database & prepare andexecute database queries
3. Print page contents and links
5Modellazione concettuale
WebML adattativo: Computo di pagine context-aware
1. Decode request parameters
[no]
Request parameters
Query results
HTTP response
a2. Connect to the database & prepareand execute database queries
a3. Print page contents and links
Requestautomaticallygenerated?
b2. Connect to the database & executeadaptation operations with respect to
current page
[yes]
HTTP request
Adaptation results
[no] Page changeneeded?
[yes]
c4. Generate non-automatic page request
b4. Apply requestparameter update
Updated requestparameters
Pagerequest
6Modellazione concettuale
Esempio: Primo prototipo P.7.1.1 (mese 20)
Strumenti per la produzione di siti Web multicanale personalizzati
Scenario di riferimento
• Portale Agenzia Viaggi: due sotto-scenari
Travel Planner (Cefriel/Engineering): ricerca destinazioni e selezione pacchetti viaggio
• Adattamento della presentazione al contesto
• Accesso multi-dispositivo
• Interazione multimodale
Travel Assistant (Polimi): informazioni di supporto sul luogo di destinazione
• Mantenimento modello del contesto
• Adattamento di contenuti e navigazione
7Modellazione concettuale
Esempio: Modello dei dati
Adattamento di contenuti ed azioni di navigazione automatiche
Country
NameGeneralInfomationGeographyClimateEconomicsReligionLanguageFood
City
NameDescriptionLongitudeLatitude
Package
DescriptionNumberAvailablePriceisSpecialOffer
Hotel
NameAddressDescriptionCategoryPhoto
Group
GroupNameNumberOfUsers
SiteView
SiteViewName
Bookings
BookingDate
User
UsernamePasswordEmailNameSurnameBirthdateAddressLanguageReligionInterestHotelCategoryPreferredAirlineFlightClass
Flight
NumberDepartureAirportArrivalAirportDateDepartureTimeArrivalTimeAirlineClass
1:1 0:N
1:N 1:N1:1 1:N
1:1 0:N
1:1
0:N
1:1
0:N
0:N1:N
1:1
0:N
1:N
1:1
Position
LongitudeLatitude
Restaurant
NameAddressStyleDescriptionLongitudeLatitude
Sight
NameDescriptionLongitudeLatitudeImage
0:1
0:N
0:N1:1
1:1
1:1
Map
LatitudeLongitudeUrl
0:11:1
8Modellazione concettuale
Esempio: Ipertesto adattativo (frammento semplificato)
Adattamento di contenuti ed azioni di navigazione automatiche
City Map
Sight Details C
Sight
Sight
Get Position
Position
@
IF
[OID != null]
[result=true] OK
[result=false] OK
Get Sight
City[longitude-x<lon<longitude+x]
[latitude-x<lat<latitude+x]
lon=Longitude,lat=Latitude
Map Service
Map
City Map
OK
9Modellazione concettuale
Esempio: screenshot prototipo
10Modellazione concettuale
Implementazione Prototipo
Runtime Framework WebML
• Implementazione Java/Struts
• Paradigma MVC (Model/View/Controller)
Prototipo: soluzione esterna
• Indipendente dal Runtime Framework di WebML
• Agisce come filtro di richieste HTTP
• Implementato a mano
Sviluppo futuro: soluzione interna
• Integrazione nel Runtime Framework
• Implementazione di primitive e logica di computo
• Generazione automatica del codice
11Modellazione concettuale
Deliverable Mese 24
Valutazione del primo prototipo
• Accesso ai prototipi
• Approcci adottati dalle unità coinvolte
Dimensioni di valutazione (qualitative)
• Stabilità
• Scalabilità
• Sicurezza/Privacy
• Uso di risorse (System Requirements)
• Usabilità
• Performance generale
12Modellazione concettuale
WP 7.1: I lavori delle unità coinvolte…
Polimi
• Modellazione concettuale di applicazioni Web adattative (multi-versione): estensione di WebML
• Personalizzazione di contenuti rispetto al profilo utente
Engineering
• Deployment multi-canale di applicazioni WebML
• Adattamento della presentazione al canale utilizzato
Cefriel
• Deployment multi-modale
• Sincronizzazione di due canali di deployment separati
13Modellazione concettuale
WP 7.1: … ed integrazione degli approcci
WebML+
Rappresentazione visuale
Rappresentazione XML
Generazionedi codice
Engineeringdeployment multicanale supiù canali fisici
CEFRIELdeploymentmultimodale
PolimiModellazione concettualedell’applicazione
M3L+ JSP/Descrittori XML
Voice (X)HTML WML
Canali sincronizzati
RuntimeWebML &
DPM
FrameworkM3L+
Multimodalità e context awareness
Dimostratore MAIS WP 7.1.1: contributo Cefriel
15Modellazione concettuale
Attività Cefriel WP 7.1
Tematiche di interesse
• Delivery multimodale di ipertesti
• Progettazione e realizzazione di una piattaforma
• Che supporti diverse modalità di interazione contemporaneamente anche su dispositivi diversi
• Per ambienti mobili e nomadici
• Per applicazioni nuove
• Delivery context-aware di servizi
• Progettazione e realizzazione di una piattaforma
• Per ambienti mobili e nomadici
• Per l’erogazione di servizi che si adattino al contesto di fruizione
• Per applicazioni nuove
16Modellazione concettuale
Delivery multimodale: definizioni di riferimento
Vision: “extending the WebWeb to allow multiple modes of
interaction” (W3C)
• Multimodalità per gli ipertestiipertesti
“Multimodal interaction will enable the user to speakspeak, writewrite
and typetype, as well as hearhear and seesee using a more natural user
interface than today's single mode browsers” (W3C)
• Supporto per vocevoce, testo scritto testo scritto (input e output) e rappresentazione visualevisuale dei contenuti
Approccio Server-side
• Non sono richieste particolari risorse sui dispositivi
• Non si devono imporre particolari vincoli
Semplificare l’uso dei “piccoli” dispositivi portatili
•Utilizzare più dispositivi contemporaneamente
17Modellazione concettuale
Il multimodal integratormultimodal integrator è l’implementazione di un iinteraction managernteraction manager (W3C) (W3C)
Visual mode
Vocal mode
Modello
WebML
MM33L FrameworkL Framework
Voice Voice gatewaygateway
TTS
ASR
Voice
XM
L B
row
ser
HTML
HTML browser
UserUser
DeveloperDeveloper
M3L documen
ts
Servlets
Multimodal Multimodal integratorintegrator
VoiceXML
La piattaforma M3L: architettura
18Modellazione concettuale
Servizi web context-aware
Siti Web context-aware
• OBIETTIVI: Adattare presentazione, navigazione, contenuti al variare delle proprietà dell’ambiente al fine di migliorare l’utilizzo del servizio da parte dell’utente.
• APPROCCIO:• Compliance con WebML tramite utilizzo di properties
• Gestione di più elementi di contesto riferiti alla particolare situazione
• Context awareness & situation awareness
• Esempi di dimensioni del contesto: Dispositivo, Posizione, Stato di movimento, attività, modalità di interazione …
• SOLUZIONE: • Definire delle proprietà di adattamento nella progettazione
dell’ipertesto
• Definire l’ipertesto anche in funzione delle proprietà definite (es. il testo da mostrare se è vera una condizione su una proprietà)
• Definire delle regole che adattano l’ipertesto (presentazione, navigazione, contenuti, modalità di interazione) in funzione del valore delle variabili di contesto
19Modellazione concettuale
Le proprietà associate al servizio: esempi
Dispositivo
Valori possibili
Stato di movimento
Nome proprietà
Attività
Le dimensioni del contesto abilitano la gestione della situazione
Desktop
Palmare
Cellulare
...
Fermo
In movimento
...
PosizioneSeduto
In piedi
…
Spare time
Working time
...
20Modellazione concettuale
SELEZIONE
LD
MENU_SCELTA
MENU_SCELTASCROLLING_DETTAGLI
Zona NEST
Ristorante
Zona Ristorante
MENU_SCELTA1 MENU_SCELTA2
Zona Ristorante
DETTAGLI_RIST
Ristorante
Palmare
Ristorante
Promozione
DETTAGLI_PROMO
Promozione
A
Desktop
Nome ristIndirizzo
Menu odierno
Posti disponibili
Foto HQFoto LQ
CapienzaCategoria
Numero Civico
TO PRENOTAZIONENome ristIndirizzo
Menu odiernoPosti disponibiliNumero Civico
Menu costo minimo
PalmarePalmare
Desktop Fermo
In movimento
In movimentoDesktop
In movimentoIn movimento
Servizio e-WebMLES
EM
PIO
ES
EM
PIO
SELEZIONA_RIST
Gabriele Giunta
L’attività Engineering nel WP7
Milano – 11 Novembre 2004
22Modellazione concettuale
Dynamic Presentation Manager: una visione d’insieme
Il Dynamic Presentation Manager (DPM) è un modulo per la generazione adattiva al contesto di pagine di presentazione
Le informazioni da presentare sono dati prodotti dalla logica di business, e la presentazione è funzione dei dati contestuali generati dell’infrastruttura di context-sensing.
Sia i dati di business sia i dati contestuali sono espressi in formato XML.
23Modellazione concettuale
Schema architetturale del DPM (1/2)
Business DB
Communication Servlet Page
Formatter
Business Logic
XSL Engine
Rule Engine
StylesheetRepository
User Agent
Generic Rules
Business dependent
RulesGeneric Rules
Business dependent
Rules
DPM
24Modellazione concettuale
Schema architetturale del DPM (2/2)
Il DPM è costituito dai moduli:
• Page Formatter • XSL Engine
• Rule Engine
• XSL Stylesheet Repository L’XSL Engine realizza la trasformazione XSLT
applicando un foglio di stile ai dati di business. Il risultato di questa trasformazione è la pagina di presentazione.
Il Rule Engine seleziona il foglio di stile per l’ XSL Engine dopo l’esecuzione delle regole di presentazione.
L’ XSL Stylesheet Repository contiene i fogli di stile dell’applicazione da realizzare.
25Modellazione concettuale
Schema funzionale del DPM
Page Formatter
Rule Engine
Business data
Context data
XSL Engine
PresentationRules
XSLTRepository
(DATActx)
(rXSLTctx,[ PARAMSctx])
((X)HTML/WML)
PresentationPage
12
3
47
(DATAbss)
56
26Modellazione concettuale
Le regole di generazione della presentazione (1/2)
I contenuti vengono adattati in funzione del profilo utente dalla logica di business
Le regole adattano la presentazione in funzione del:
• Configurazione del device• Dimensione dello schermo
• Protocollo applicativo (HTTP/WAP)
• Stato fisico del device• Livello di carica della batteria
• Movimento
Regole di presentazione implementate:
• Resize del font dei widget;
• Sostituzione dei widget;
• Scelta dei colori.
27Modellazione concettuale
Le regole di generazione della presentazione (2/2)
• (defrule PDADeviceRule
(START_PRESENTATION)
(CONTEXT USER_ID ?user_id)
(CONTEXT CHANNEL http)
(CONTEXT DEVICE pda)
(CONTEXT SCREENSIZE ?screensize)
=>
(assert (PRESENTATION_COMPONENT (id xsltPDA)))
(assert (PRESENTATION_COMPONENT_PARAMETER (id xsltPDA)
(name displayWidth)(value ?screensize))))
Esempio di un’implementazione JESS
28Modellazione concettuale
Deployment multicanale
Lo scenario utilizzato è quello relativo alla Preparazione Viaggio (“Scenario in ambito turistico” ). Sono state modellate con WebML+ le seguenti pagine:
• Planner Home
• Country Details
• Travel Package
Recommendation System per destinazioni turistiche
Planner Home Country Details
Travel Package
Travel Planner
L
C
C
D
C
C
Planner Home Country Details
Travel Package
Travel Planner
L
C
C
D
C
C
29Modellazione concettuale
Modellazione dei dati in WebML+
30Modellazione concettuale
Screenshot dell’applicazione multicanale (1/5)
* Interazione iniziale attraverso PC *
31Modellazione concettuale
Screenshot dell’applicazione multicanale (2/5)
* Primo cambio di canale: da PC a PDA *
32Modellazione concettuale
Screenshot dell’applicazione multicanale (3/5)
* Secondo cambio di canale: da PDA a Mobile Phone *
33Modellazione concettuale
Screenshot dell’applicazione multicanale (4/5)
* Adattamento al contesto (im movimento) mediante il resize del font *
34Modellazione concettuale
Screenshot dell’applicazione multicanale (5/5)
* Adattamento al contesto (batteria scarica) mediante l’invio di una mail *