Félix Albertos Marco, José A. Gallud, Víctor M.R. Penichet...

55
Distributing Web Interaction Capabilities: The Web Interaction Hub Félix Albertos Marco, José A. Gallud, Víctor M.R. Penichet Computer Systems Department University of Caslla-La Mancha Albacete, Spain [felix.albertos,jose.gallud,victor.penichet]@uclm.es

Transcript of Félix Albertos Marco, José A. Gallud, Víctor M.R. Penichet...

Page 1: Félix Albertos Marco, José A. Gallud, Víctor M.R. Penichet ...blog.uclm.es/felixalbertos/files/2016/09/slides_int16-compressed.pdf · Drawer: An Innovative Teaching Method for

Distributing Web Interaction Capabilities: The Web Interaction Hub

Félix Albertos Marco, José A. Gallud, Víctor M.R. PenichetComputer Systems DepartmentUniversity of Castilla-La Mancha

Albacete, Spain[felix.albertos,jose.gallud,victor.penichet]@uclm.es

Page 2: Félix Albertos Marco, José A. Gallud, Víctor M.R. Penichet ...blog.uclm.es/felixalbertos/files/2016/09/slides_int16-compressed.pdf · Drawer: An Innovative Teaching Method for

Distributing Web Interaction Capabilities: The Web Interaction Hub

¿ WEB INTERACTION HUB ?

Case Study Background Responsive Cross Device Applications Web Interaction Hub

Page 3: Félix Albertos Marco, José A. Gallud, Víctor M.R. Penichet ...blog.uclm.es/felixalbertos/files/2016/09/slides_int16-compressed.pdf · Drawer: An Innovative Teaching Method for

Distributing Web Interaction Capabilities: The Web Interaction Hub

CASE STUDY

Questionnaires in the classroom using Moodle

Page 4: Félix Albertos Marco, José A. Gallud, Víctor M.R. Penichet ...blog.uclm.es/felixalbertos/files/2016/09/slides_int16-compressed.pdf · Drawer: An Innovative Teaching Method for

Distributing Web Interaction Capabilities: The Web Interaction Hub

CASE STUDY

Questionnaires in the classroom using Moodle

Page 5: Félix Albertos Marco, José A. Gallud, Víctor M.R. Penichet ...blog.uclm.es/felixalbertos/files/2016/09/slides_int16-compressed.pdf · Drawer: An Innovative Teaching Method for

Distributing Web Interaction Capabilities: The Web Interaction Hub

CASE STUDY

Questionnaires in the classroom using Moodle

Page 6: Félix Albertos Marco, José A. Gallud, Víctor M.R. Penichet ...blog.uclm.es/felixalbertos/files/2016/09/slides_int16-compressed.pdf · Drawer: An Innovative Teaching Method for

Distributing Web Interaction Capabilities: The Web Interaction Hub

CASE STUDY

Questionnaires in the classroom using Moodle

Page 7: Félix Albertos Marco, José A. Gallud, Víctor M.R. Penichet ...blog.uclm.es/felixalbertos/files/2016/09/slides_int16-compressed.pdf · Drawer: An Innovative Teaching Method for

Distributing Web Interaction Capabilities: The Web Interaction Hub

CASE STUDY

Questionnaires in the classroom using Moodle

Page 8: Félix Albertos Marco, José A. Gallud, Víctor M.R. Penichet ...blog.uclm.es/felixalbertos/files/2016/09/slides_int16-compressed.pdf · Drawer: An Innovative Teaching Method for

Distributing Web Interaction Capabilities: The Web Interaction Hub

Page 9: Félix Albertos Marco, José A. Gallud, Víctor M.R. Penichet ...blog.uclm.es/felixalbertos/files/2016/09/slides_int16-compressed.pdf · Drawer: An Innovative Teaching Method for

Distributing Web Interaction Capabilities: The Web Interaction Hub

CASE STUDY

Questionnaires in the classroom using Moodle

Page 10: Félix Albertos Marco, José A. Gallud, Víctor M.R. Penichet ...blog.uclm.es/felixalbertos/files/2016/09/slides_int16-compressed.pdf · Drawer: An Innovative Teaching Method for

Distributing Web Interaction Capabilities: The Web Interaction Hub

Albertos et. al. 2012

Drag & Share: A Shared Workspace for Synchronous Collaboration

Page 11: Félix Albertos Marco, José A. Gallud, Víctor M.R. Penichet ...blog.uclm.es/felixalbertos/files/2016/09/slides_int16-compressed.pdf · Drawer: An Innovative Teaching Method for

Distributing Web Interaction Capabilities: The Web Interaction Hub

Albertos et. al. 2013

Drawer: An Innovative Teaching Method for Blended Learning

Page 12: Félix Albertos Marco, José A. Gallud, Víctor M.R. Penichet ...blog.uclm.es/felixalbertos/files/2016/09/slides_int16-compressed.pdf · Drawer: An Innovative Teaching Method for

Distributing Web Interaction Capabilities: The Web Interaction Hub

Albertos et. al. 2013Making Distributed User Interfaces Interruption-Resistant:

A Model-Based Approach

Page 13: Félix Albertos Marco, José A. Gallud, Víctor M.R. Penichet ...blog.uclm.es/felixalbertos/files/2016/09/slides_int16-compressed.pdf · Drawer: An Innovative Teaching Method for

Distributing Web Interaction Capabilities: The Web Interaction Hub

Albertos et. al. 2013

Offline Web Applications: A New Model for Blended Learning

Page 14: Félix Albertos Marco, José A. Gallud, Víctor M.R. Penichet ...blog.uclm.es/felixalbertos/files/2016/09/slides_int16-compressed.pdf · Drawer: An Innovative Teaching Method for

Distributing Web Interaction Capabilities: The Web Interaction Hub

Albertos et. al. 2015

What Happens when Students Go Offline in Mobile Devices?

Before Offline

Offline After Offline

S1 B+N+SRD

N+SRD B+N

S2 B B’+N B+N

S3 B B’+N B+N

S4 B+N+SRD

N+SRD B+N

S5 B+N+P+SRD

N+P B+N

S6 B+N N B+N

S7 B+N N B+N

Page 15: Félix Albertos Marco, José A. Gallud, Víctor M.R. Penichet ...blog.uclm.es/felixalbertos/files/2016/09/slides_int16-compressed.pdf · Drawer: An Innovative Teaching Method for

Distributing Web Interaction Capabilities: The Web Interaction Hub

Albertos et. al. 2015

User Interaction with Offline Web Applications: a Case Study

Page 16: Félix Albertos Marco, José A. Gallud, Víctor M.R. Penichet ...blog.uclm.es/felixalbertos/files/2016/09/slides_int16-compressed.pdf · Drawer: An Innovative Teaching Method for

Distributing Web Interaction Capabilities: The Web Interaction Hub

CASE STUDY

Questionnaires in the classroom using Moodle

Page 17: Félix Albertos Marco, José A. Gallud, Víctor M.R. Penichet ...blog.uclm.es/felixalbertos/files/2016/09/slides_int16-compressed.pdf · Drawer: An Innovative Teaching Method for

Distributing Web Interaction Capabilities: The Web Interaction Hub

Adaptations responsability

Runtime adaptations

User patterns

Users and devices characterization

Albertos et. al. 2016

Distributing Interaction in Responsive Cross Device Applications

Page 18: Félix Albertos Marco, José A. Gallud, Víctor M.R. Penichet ...blog.uclm.es/felixalbertos/files/2016/09/slides_int16-compressed.pdf · Drawer: An Innovative Teaching Method for

Distributing Web Interaction Capabilities: The Web Interaction Hub

Responsive Cross Device Web Applications

Page 19: Félix Albertos Marco, José A. Gallud, Víctor M.R. Penichet ...blog.uclm.es/felixalbertos/files/2016/09/slides_int16-compressed.pdf · Drawer: An Innovative Teaching Method for

Distributing Web Interaction Capabilities: The Web Interaction Hub

Responsive Cross Device Web Applications

Page 20: Félix Albertos Marco, José A. Gallud, Víctor M.R. Penichet ...blog.uclm.es/felixalbertos/files/2016/09/slides_int16-compressed.pdf · Drawer: An Innovative Teaching Method for

Distributing Web Interaction Capabilities: The Web Interaction Hub

Adaptations responsability

Runtime adaptations

User patterns

Users and devices characterization

Responsive Web Cross Device Applications

Page 21: Félix Albertos Marco, José A. Gallud, Víctor M.R. Penichet ...blog.uclm.es/felixalbertos/files/2016/09/slides_int16-compressed.pdf · Drawer: An Innovative Teaching Method for

Distributing Web Interaction Capabilities: The Web Interaction Hub

Interaction Model (Abowd 1991)

Page 22: Félix Albertos Marco, José A. Gallud, Víctor M.R. Penichet ...blog.uclm.es/felixalbertos/files/2016/09/slides_int16-compressed.pdf · Drawer: An Innovative Teaching Method for

Distributing Web Interaction Capabilities: The Web Interaction Hub

Page 23: Félix Albertos Marco, José A. Gallud, Víctor M.R. Penichet ...blog.uclm.es/felixalbertos/files/2016/09/slides_int16-compressed.pdf · Drawer: An Innovative Teaching Method for

Distributing Web Interaction Capabilities: The Web Interaction Hub

Page 24: Félix Albertos Marco, José A. Gallud, Víctor M.R. Penichet ...blog.uclm.es/felixalbertos/files/2016/09/slides_int16-compressed.pdf · Drawer: An Innovative Teaching Method for

Distributing Web Interaction Capabilities: The Web Interaction Hub

Page 25: Félix Albertos Marco, José A. Gallud, Víctor M.R. Penichet ...blog.uclm.es/felixalbertos/files/2016/09/slides_int16-compressed.pdf · Drawer: An Innovative Teaching Method for

Distributing Web Interaction Capabilities: The Web Interaction Hub

Page 26: Félix Albertos Marco, José A. Gallud, Víctor M.R. Penichet ...blog.uclm.es/felixalbertos/files/2016/09/slides_int16-compressed.pdf · Drawer: An Innovative Teaching Method for

Distributing Web Interaction Capabilities: The Web Interaction Hub

Page 27: Félix Albertos Marco, José A. Gallud, Víctor M.R. Penichet ...blog.uclm.es/felixalbertos/files/2016/09/slides_int16-compressed.pdf · Drawer: An Innovative Teaching Method for

Distributing Web Interaction Capabilities: The Web Interaction Hub

Page 28: Félix Albertos Marco, José A. Gallud, Víctor M.R. Penichet ...blog.uclm.es/felixalbertos/files/2016/09/slides_int16-compressed.pdf · Drawer: An Innovative Teaching Method for

Distributing Web Interaction Capabilities: The Web Interaction Hub

Page 29: Félix Albertos Marco, José A. Gallud, Víctor M.R. Penichet ...blog.uclm.es/felixalbertos/files/2016/09/slides_int16-compressed.pdf · Drawer: An Innovative Teaching Method for

Distributing Web Interaction Capabilities: The Web Interaction Hub

Page 30: Félix Albertos Marco, José A. Gallud, Víctor M.R. Penichet ...blog.uclm.es/felixalbertos/files/2016/09/slides_int16-compressed.pdf · Drawer: An Innovative Teaching Method for

Distributing Web Interaction Capabilities: The Web Interaction Hub

Page 31: Félix Albertos Marco, José A. Gallud, Víctor M.R. Penichet ...blog.uclm.es/felixalbertos/files/2016/09/slides_int16-compressed.pdf · Drawer: An Innovative Teaching Method for

Distributing Web Interaction Capabilities: The Web Interaction Hub

Page 32: Félix Albertos Marco, José A. Gallud, Víctor M.R. Penichet ...blog.uclm.es/felixalbertos/files/2016/09/slides_int16-compressed.pdf · Drawer: An Innovative Teaching Method for

Distributing Web Interaction Capabilities: The Web Interaction Hub

Page 33: Félix Albertos Marco, José A. Gallud, Víctor M.R. Penichet ...blog.uclm.es/felixalbertos/files/2016/09/slides_int16-compressed.pdf · Drawer: An Innovative Teaching Method for

Distributing Web Interaction Capabilities: The Web Interaction Hub

Page 34: Félix Albertos Marco, José A. Gallud, Víctor M.R. Penichet ...blog.uclm.es/felixalbertos/files/2016/09/slides_int16-compressed.pdf · Drawer: An Innovative Teaching Method for

Distributing Web Interaction Capabilities: The Web Interaction Hub

Page 35: Félix Albertos Marco, José A. Gallud, Víctor M.R. Penichet ...blog.uclm.es/felixalbertos/files/2016/09/slides_int16-compressed.pdf · Drawer: An Innovative Teaching Method for

Distributing Web Interaction Capabilities: The Web Interaction Hub

Page 36: Félix Albertos Marco, José A. Gallud, Víctor M.R. Penichet ...blog.uclm.es/felixalbertos/files/2016/09/slides_int16-compressed.pdf · Drawer: An Innovative Teaching Method for

Distributing Web Interaction Capabilities: The Web Interaction Hub

Page 37: Félix Albertos Marco, José A. Gallud, Víctor M.R. Penichet ...blog.uclm.es/felixalbertos/files/2016/09/slides_int16-compressed.pdf · Drawer: An Innovative Teaching Method for

Distributing Web Interaction Capabilities: The Web Interaction Hub

http://www.webdigi.co.uk/fun/space/

Ad Hoc

Page 38: Félix Albertos Marco, José A. Gallud, Víctor M.R. Penichet ...blog.uclm.es/felixalbertos/files/2016/09/slides_int16-compressed.pdf · Drawer: An Innovative Teaching Method for

Distributing Web Interaction Capabilities: The Web Interaction Hub

Multi-Screen Experience

Ad Hoc

Web Browsing

Scrolling

http://www.diplomatic-cover.com/multi/

Page 39: Félix Albertos Marco, José A. Gallud, Víctor M.R. Penichet ...blog.uclm.es/felixalbertos/files/2016/09/slides_int16-compressed.pdf · Drawer: An Innovative Teaching Method for

Distributing Web Interaction Capabilities: The Web Interaction Hub

Panelrama (Yang 2014)

Ad Hoc

Page 40: Félix Albertos Marco, José A. Gallud, Víctor M.R. Penichet ...blog.uclm.es/felixalbertos/files/2016/09/slides_int16-compressed.pdf · Drawer: An Innovative Teaching Method for

Distributing Web Interaction Capabilities: The Web Interaction Hub

Page 41: Félix Albertos Marco, José A. Gallud, Víctor M.R. Penichet ...blog.uclm.es/felixalbertos/files/2016/09/slides_int16-compressed.pdf · Drawer: An Innovative Teaching Method for

Distributing Web Interaction Capabilities: The Web Interaction Hub

Page 42: Félix Albertos Marco, José A. Gallud, Víctor M.R. Penichet ...blog.uclm.es/felixalbertos/files/2016/09/slides_int16-compressed.pdf · Drawer: An Innovative Teaching Method for

Distributing Web Interaction Capabilities: The Web Interaction Hub

Page 43: Félix Albertos Marco, José A. Gallud, Víctor M.R. Penichet ...blog.uclm.es/felixalbertos/files/2016/09/slides_int16-compressed.pdf · Drawer: An Innovative Teaching Method for

Distributing Web Interaction Capabilities: The Web Interaction Hub

Web Interaction Hub PluginWeb Interaction Hub

Page 44: Félix Albertos Marco, José A. Gallud, Víctor M.R. Penichet ...blog.uclm.es/felixalbertos/files/2016/09/slides_int16-compressed.pdf · Drawer: An Innovative Teaching Method for

Distributing Web Interaction Capabilities: The Web Interaction Hub

Web Interaction Hub PluginWeb Interaction Hub

Page 45: Félix Albertos Marco, José A. Gallud, Víctor M.R. Penichet ...blog.uclm.es/felixalbertos/files/2016/09/slides_int16-compressed.pdf · Drawer: An Innovative Teaching Method for

Distributing Web Interaction Capabilities: The Web Interaction Hub

Adding “Select” support

Page 46: Félix Albertos Marco, José A. Gallud, Víctor M.R. Penichet ...blog.uclm.es/felixalbertos/files/2016/09/slides_int16-compressed.pdf · Drawer: An Innovative Teaching Method for

Distributing Web Interaction Capabilities: The Web Interaction Hub

Page 47: Félix Albertos Marco, José A. Gallud, Víctor M.R. Penichet ...blog.uclm.es/felixalbertos/files/2016/09/slides_int16-compressed.pdf · Drawer: An Innovative Teaching Method for

Distributing Web Interaction Capabilities: The Web Interaction Hub

Page 48: Félix Albertos Marco, José A. Gallud, Víctor M.R. Penichet ...blog.uclm.es/felixalbertos/files/2016/09/slides_int16-compressed.pdf · Drawer: An Innovative Teaching Method for

Distributing Web Interaction Capabilities: The Web Interaction Hub

Page 49: Félix Albertos Marco, José A. Gallud, Víctor M.R. Penichet ...blog.uclm.es/felixalbertos/files/2016/09/slides_int16-compressed.pdf · Drawer: An Innovative Teaching Method for

Distributing Web Interaction Capabilities: The Web Interaction Hub

Page 50: Félix Albertos Marco, José A. Gallud, Víctor M.R. Penichet ...blog.uclm.es/felixalbertos/files/2016/09/slides_int16-compressed.pdf · Drawer: An Innovative Teaching Method for

Distributing Web Interaction Capabilities: The Web Interaction Hub

Adding “Select” support

Page 51: Félix Albertos Marco, José A. Gallud, Víctor M.R. Penichet ...blog.uclm.es/felixalbertos/files/2016/09/slides_int16-compressed.pdf · Drawer: An Innovative Teaching Method for

Distributing Web Interaction Capabilities: The Web Interaction Hub

Adding “Speech-to-Text” support

Page 52: Félix Albertos Marco, José A. Gallud, Víctor M.R. Penichet ...blog.uclm.es/felixalbertos/files/2016/09/slides_int16-compressed.pdf · Drawer: An Innovative Teaching Method for

Distributing Web Interaction Capabilities: The Web Interaction Hub

Page 53: Félix Albertos Marco, José A. Gallud, Víctor M.R. Penichet ...blog.uclm.es/felixalbertos/files/2016/09/slides_int16-compressed.pdf · Drawer: An Innovative Teaching Method for

Distributing Web Interaction Capabilities: The Web Interaction Hub

Page 54: Félix Albertos Marco, José A. Gallud, Víctor M.R. Penichet ...blog.uclm.es/felixalbertos/files/2016/09/slides_int16-compressed.pdf · Drawer: An Innovative Teaching Method for

Distributing Web Interaction Capabilities: The Web Interaction Hub

- Conceptual Model* Description of interactive capabilities * Interaction mapping

- Support tool* New interaction techniques* User test

Future Work

Page 55: Félix Albertos Marco, José A. Gallud, Víctor M.R. Penichet ...blog.uclm.es/felixalbertos/files/2016/09/slides_int16-compressed.pdf · Drawer: An Innovative Teaching Method for

Distributing Web Interaction Capabilities: The Web Interaction Hub

Félix Albertos Marco, José A. Gallud, Víctor M.R. PenichetComputer Systems DepartmentUniversity of Castilla-La Mancha

Albacete, Spain[felix.albertos,jose.gallud,victor.penichet]@uclm.es