Making the mobile real

martencrushInternet και Εφαρμογές Web

8 Δεκ 2013 (πριν από 3 χρόνια και 10 μήνες)

78 εμφανίσεις

Making the mobile real



Jose Luís Díaz
, TI+D

MyMobileWeb



Table of Contents


Introduction & Project Targets


MyMobileWeb


Motivation


Functional View


Key Technologies


Architectural View


Core Functionalities


Impact and Achievements


Demonstration (demo video)


Roadmap

Valencia, 12 and 13 April 2010

NESSI Projects Summit

Introduction

Valencia, 12 and 13 April 2010

NESSI Projects Summit

Introduction


Making the Mobile Web a reality it is not
only a question of using enhanced
devices and browsers


Users are expecting more from the
Mobile Web



It is an Eureka
-
CELTIC (Call 4) project


Start Date: March 1
st

2007


Finish Date: December 31
st

2009

Valencia, 12 and 13 April 2010

NESSI Projects Summit

Project Targets


Making the Mobile Web a reality

by accelerating the creation of
compelling applications

and contents
that

automatically adapt
to the Context of use

(browser, device, network, location …),
thus offering a harmonized user experience.


How:


A
language

(IDEAL) for the
declarative description of device independent

UIs


An
open source, standards
-
based

content & application adaptation
platform


Ontologies

for modeling and reasoning about the Delivery Context


A
Semantic

Browsing Bar for
content and service correlation

plus
smart
navigation


Contributing to the future standards for the Mobile Web



Standards
-
Based Context
-
Aware Rich Mobile Web Applications

Valencia, 12 and 13 April 2010

NESSI Projects Summit

The Mobile Web


Overview (I)


Accessing web applications and contents from mobile handsets


From the old days of WAP
to the Mobi
le Web (HTTP + (X)HTML + CSS +
Javascript)


Particularities of the mobile environment



Delivery Context


A myriad of devices and web browsers (multiple combinations)


Different markup language varieties, image formats, CSS support


Different form factors subject to orientation changes


Different interaction resources (multi
-
touch, stylus, track ball,
numeric keypad, …)


Network latencies, disconnections…


Valencia, 12 and 13 April 2010

NESSI Projects Summit

The Mobile Web


Overview (II)


Users use their mobiles to do different tasks


Different Context of Use


Mobile Applications and Portals
optimized


Mobile Web Development is not easy if you
wish to support the majority of
devices without compromising
functionality or the user
experience

Valencia, 12 and 13 April 2010

NESSI Projects Summit

The Mobile Web


Why?

Valencia, 12 and 13 April 2010

NESSI Projects Summit

3 Mb


57 seg !

31 Kb


2 seg

28 Kb


2 seg

12,5 Kb


1’7 seg

Voice from the experts

“Unless websites are redesigned for the special circumstances of
mobile use, the mobile Web will remain a mirage. Users won't
realize the benefits promised by mobile vendors, and site
owners won't reap the profits that would follow from gathering
hordes of loyal mobile customers.



In user testing, website use on mobile devices got very low scores,
especially when users accessed "full" sites that weren't designed
for mobile.”


So, if mobile use is important to your Internet strategy, it's smart
to build a dedicated mobile site
.”


Jakob Nielsen : Worldwide
-
recognized Usability Expert

"the king of usability" (Internet Magazine)

"
the guru of Web page usability
" (The New York Times)


http://www.useit.com/alertbox/mobile
-
usability.html


Valencia, 12 and 13 April 2010

NESSI Projects Summit

MyMobileWeb

Valencia, 12 and 13 April 2010

NESSI Projects Summit

MyMobileWeb
-

Introduction


MyMobileWeb is an open source, standards
-
based software
framework that simplifies the rapid development of mobile web
applications and portals.



MyMobileWeb encompasses a set of technologies which enable the
automatic adaptation of applications to the target Delivery Context
(browser, device, network, location,…), thus offering a harmonized
user experience.



How:


Using an XML
-
Based language (IDEAL2), that makes it possible the description of
device independent user interfaces and their adaptation policies


Using a set of client and server
-
side runtime libraries that realize the automatic
content & application adaptation



MyMobileWeb enables the creation of Mobile Web Applications that
can adapt seamlessly to multiple devices with minimal effort from the
developer

Valencia, 12 and 13 April 2010

NESSI Projects Summit

The Mobile Web


Realizing is potential


Making the Mobile Web a reality it is not only a
question of using highly capable devices and browsers


MyMobileWeb makes it possible what users are
expecting from the Mobile Web


Any application / service / portal adapted and optimized
for every device used at a given moment


Rich user interfaces enabling higher functionalities while
optimizing traffic costs: AJAX, Graphics, Maps


Context
-
Awareness : providing what I need, now, here …


MyMobileWeb provides application and portal
developers powerful technologies that enable the
creation of advanced,
high
-
quality mobile web
applications in time to market without investing a lot
of money


Using open and standard technologies


Without the need of highly specialized (and hard to find)
developers


Valencia, 12 and 13 April 2010

NESSI Projects Summit

MyMobileWeb
-

More than 5 years on the edge


History


Born on November 2004 as an internal innovation project at TI+D


Released as open source (Morfeo) in November 2005


From 2006 has been funded by the Spanish Ministry of Industry


In 2007 the project was labeled as Eureka
-
CELTIC


Now it is a “Proyecto Singular y de Carácter Estratégico” (Avanza I+D)


During the last 5 years MyMobileWeb has made outstanding
contributions to the state of the art in the area of the mobile
web


MyMobileWeb is a product in continuous development which has
been adapting to the permanent changes in the mobile market

Valencia, 12 and 13 April 2010

NESSI Projects Summit

<!DOCTYPE ideal2>


<ideal

id
=
"pslist"

title
=

SalesForce"
>



<ui>



<body>



<section

id
=
"mainSection"
>



<div

class
=
"center"

id
=
"p1"
>


<span>
Company:
</span>

<output
ref
=

company


/
>


</div>


<div

class
=
"center vertical"

id
=
"p2"
>


<
table

id
=
“tbl"

ref
=

op"

class
=
"tps paginate"
>



<th

class
=
"header"
>



<td>
Cod.
</td>


<td>
Name
</td>



<td

expr
=
"dcn:deviceWidth() gt 240"
>
Date
</td>



</th>


<tr

repeat
-
nodeset
=

res


value
=
"${res.current.code}"
>


<td>

<output

ref
=
"code"

/>

</td>



<td>

<output

ref
=
"name"

/>

</td>


<td>

<output

ref
=
"date"

/>

</td>


</tr>



</table>


</div><include

content
=
"PSDetail/generic/product/p2"

/>




</section>

</body>

</ui>

</ideal>


MyMobileWeb in 4 steps

Valencia, 12 and 13 April 2010

NESSI Projects Summit


Authoring

Deployment

User Experience in different Delivery Contexts

MyMobileWeb Functional View

Valencia, 12 and 13 April 2010

NESSI Projects Summit

MyMobileWeb


Key Technologies


IDEAL2

(Interface Description Authoring Language, version 2) , for the
declarative description of device
-
independent user interfaces and
adaptation policies.



SCXML
,

language for describing application flows modeled as state
machines.




Device Description Framework
” concerned with obtaining
information about the characteristics of devices and web browsers by
interfacing with different Device Description Repositories (DDRs).




Adaptation and Rendering Engine”
, in charge of selecting and
generating the final markup, script, style sheets and other resources
(images, audio, video) to be delivered to the mobile device.



“Client
-
side Framework”

(a.k.a. “Mobile AJAX Framework”) which
enables rich interactions in different Javascript
-
enabled browsers.

Valencia, 12 and 13 April 2010

NESSI Projects Summit

Valencia, 12 and 13 April 2010

NESSI Projects Summit

Content
Management
System
Designer
IDEAL
2
&
SCXML
Business
Services
Semantics
AJAX Fwk
Client
XForms
Engine
HTTP
Mobile Web Browser
Deployment
Mobile UI Design
Content Edition
and Annotation
Contents
Eclipse
Java Servlet Container
Development Environment
Backend
Client Fwk
Adaptation and Rendering
Engine
SCXML Engine
Client
Controller
Server Platform
Delivery Context Manager
Mobile Device
Web Server
DDR Service
OMA
-
STI Transcoder
Connectors
Server
XForms
Engine
Delivery Context Manager
Connectors
Connectors
Controller
AJAX UI
Components
HTTP
SOAP
Appl
.
Logic
Appl
.
Logic
Appl
.
Logic
HTTP
MyMobileWeb Architectural View

MyMobileWeb


Core Functionalities (I)


Main Feature: “
content and application
adaptation
”.



Adaptation

is a process of selection and
generation of the application’s user interface
or contents in order to:



(a) accommodate to the restrictions imposed by the target
delivery context


(b) to ensure that the resulting user experience is sufficiently
harmonized with such a delivery context. Adaptation
encompasses a number of sub
-
functionalities


Valencia, 12 and 13 April 2010

NESSI Projects Summit

MyMobileWeb


Sub
-
Functionalities


Automatic generation

of the most suitable markup, style sheets and Javascript to realize
the different user interface elements (specified using IDEAL2).


from legacy (WML [16]) to the most modern (WebKit
-
based) enhanced browsers



selection of CSS style
-
sheets

to customize the look
-
and
-
feel or layout for different devices.



selection of user interface parts

(including Javascript code), using W3C’s DISelect 1.



pagination of long content

such as tables with many rows, menus with many options or
forms with many fields.



selection or transcoding of different multimedia content

(images, audio, video). While
selection consists of choosing the best from a set of variants, transcoding implies a
transformation process from a source to a target resource.


MyMobileWeb incorporates a simple image transcoding component and can
interoperate with any OMA
-
STI compliant transcoding service, such as the open
source Alembik system.



internationalization and literal management

which consists of selecting literals depending
on the delivery context (for example to accommodate a short space by choosing an
acronym) or the user preferences (preferred language).


Valencia, 12 and 13 April 2010

NESSI Projects Summit

MyMobileWeb


Core Functionalities (II)


Runtime support for a wide variety of user interface
components

and statistical graphics


input (including automatic completion), date, time, selection, menus,
chained menu, table, list, range, placard (for combining text and
images), carrousel (for showing sequentially a list of items) . . .



Data and content binding
. (declarative) association of user
interface components with the data or contents (and possibly
their constraints) they are going to display or manipulate.



MyMobileWeb can interoperate with any JSR
-
170
-
compliant content
repository, such as Alfresco.



Awareness of the delivery context
, compliant with the DDR
Simple API W3C Recommendation.




IDEAL2 incorporates an extension which allows to add
semantic
annotations

to user interface descriptions. One possible
application of this feature is the automatic completion of forms.

Valencia, 12 and 13 April 2010

NESSI Projects Summit

IDEAL 2


IDEAL2 is the result of four years of research and experience in
authoring languages for the description of device
-
independent user
interfaces.



Features


Based on W3C standards (namely XForms 1.1, DISelect 1)


Modular and extensible.


To help web authors, the syntax of IDEAL2 is similar to XHTML’s but as an
authoring language, it incorporates abstractions and extensionsdescribes
user interfaces (UIs) in an abstract manner, i.e. without commitment on
how such a UI will be finally rendered.



IDEAL2 is only intended to provide the description of a user interface
from a structural and behavioural point of view. All the aspects that
have to do with look
-
and
-
feel and layout are specified by means of
CSS2 and extensions.



By using IDEAL2 developers
can concentrate on the application
functionality without worrying about markup languages or scripting
capabilities
.

Valencia, 12 and 13 April 2010

NESSI Projects Summit

Device Description Framework


MyMobileWeb’s DDR Service provides information about the “a
priori known”, i.e. static, characteristics of a delivery context.


For instance, the display width of a device when it is in its default
orientation.



MyMobileWeb is able to connect to any DDR supporting the
W3C’s DDR Simple API Recommendation.


Connectors with the most popular DDRs such as WURFL, Device
Atlas or UAProf are provided off
-
the
-
shelf.


Multiple vocabularies of properties, including the W3C’s DDR Core
Vocabulary and the WURFL’s vocabulary are supported



MyMobileWeb implements an AJAX
-
based mechanism devoted
to notify the server when a (dynamic) property changes at
client (device) side during a session.


For example the screen orientation

Valencia, 12 and 13 April 2010

NESSI Projects Summit

Mobile AJAX Framework

Valencia, 12 and 13 April 2010

NESSI Projects Summit

Delivery

Context

DCCI

Forms

XForms

Engine

Form

Autocompletion

Core

AJAX

Commons
(DOM
Manipulation)

UI

Controls

Debug

SCXML


State Chart XML (SCXML) is a W3C standard


General purpose language for describing state
machines (based on Harel States Tables)


Used to specify MyMobileWeb’s application flows


Application Flows describe the behavior to be
performed in reaction to the interaction of
the user with the system.


The set of actions to be performed by an
application flow does not only depend on the
events raised by the user interface but also on the
application state.

Valencia, 12 and 13 April 2010

NESSI Projects Summit

Impact & Achievements

Valencia, 12 and 13 April 2010

NESSI Projects Summit

Impact Summary


at least
20

applications (in production or at development stage)
using the MyMobileWeb platform


Applications we know about them. There might be others.


90

developers have approached to the product on the mailing list


(from all around the world)


More than
40

developers already certified in Spain


More than
10.700

downloads at the time of writing with an
average of 276 a month


an average of
42,5

posts a month and
15

questions on the
support mailing list


around
1000

visitors (average) per month on the web site


more than
10

additional research and innovation project
proposals incubated


outstanding contributions to different W3C standards for the
Mobile Web



Valencia, 12 and 13 April 2010

NESSI Projects Summit

MyMobileWeb on the net

Valencia, 12 and 13 April 2010

NESSI Projects Summit

MyMobileWeb’s Popularity in relative terms

Valencia, 12 and 13 April 2010

NESSI Projects Summit

MyMobileWeb downloads per month

Valencia, 12 and 13 April 2010

NESSI Projects Summit

31/07/07
31/01/08
31/07/08
31/01/09
31/07/09
31/12/09
0
100
200
300
400
500
600
700
190
364
329
175
171
317
321
311
143
150
132
366
134
267
391
162
241
169
162
232
138
262
260
295
470
483
361
188
235
245
320
345
425
640
366
328
333
downloads
Month
Downloads
Average: 281.6 per month / Total: 11814, 29th March 2010
(Last 39 months)

MyMobileWeb mailing list traffic per month

Valencia, 12 and 13 April 2010

NESSI Projects Summit

Average: 16 questions per month / Average: 46.2 posts per month

(Last 39 months )

31/07/07
31/01/08
31/07/08
31/01/09
31/07/09
31/12/09
0
50
100
150
200
250
11
13
10
17
34
12
37
13
23
28
10
24
17
51
26
8
19
10
6
32
26
35
20
69
23
22
26
105
123
85
101
45
132
233
132
77
55
5
3
7
9
14
6
14
7
9
9
5
10
5
19
18
1
10
6
4
20
14
20
8
33
8
10
10
22
34
23
35
19
37
55
posts
questions
Month
Message Count
MyMobileWeb’s contribution to standards (I)


Mobile Web Best Practices
. This W3C Recommendation specifies
Best Practices for delivering Web content to mobile devices. The
principal objective is to improve the user experience of the Web
when accessed from such devices.
http://www.w3.org/TR/2008/REC
-
mobile
-
bp
-
20080729/


MyMobileWeb contributed to this Recommendation with several best
practices.


MyMobileWeb is a mobileOK compliant framework
http://www.w3.org/2008/06/mobileok
-
implementation
-
report



Mobile Web Applications Best Practices
. This is work in progress.
It specifies Best Practices for the development and delivery of
Web applications on mobile devices. The recommendations
expand upon statements made in the Mobile Web Best Practices
(BP1), especially those that relate to the exploitation of device
capabilities and awareness of the delivery context.
http://www.w3.org/TR/mwabp/


The MyMobileWeb team has made important contributions to this
specification, particularly those related with the optimization of Javascript
and DOM operations in order to save bandwidth or battery life.



Valencia, 12 and 13 April 2010

NESSI Projects Summit

MyMobileWeb’s contribution to standards (II)


DDR Simple API
. A W3C Recommendation that describes a minimal API for
retrieving device properties needed for content & application adaptation.
http://www.w3.org/TR/2008/REC
-
DDR
-
Simple
-
API
-
20081205
/
.


The MyMobileWeb team leaded the edition of the standard. MyMobileWeb developed
and integrated the first open source implementation of the specification. See
http://www.w3.org/2005/MWI/DDWG/drafts/api/test
-
report.html



DDR Core Vocabulary
. A W3C Note describing an essential vocabulary of
properties for adaptation in the Mobile Web environment.
http://www.w3.org/TR/2008/NOTE
-
ddr
-
core
-
vocabulary
-
20080414/


MyMobileWeb contributed to such a vocabulary with different properties that resulted
from our experience on the field.



Delivery Context Ontology
. The Delivery Context Ontology provides a formal
model of the characteristics of the environment in which devices interact with the
Web or other services. The Delivery Context includes the characteristics of the
Device, the software used to access the service and the Network providing the
connection among others.
http://www.w3.org/TR/dcontology/



The MyMobileWeb team participated and contributed in a decisive manner to such an
API. Mr José M. Cantera, leader of MyMobileWeb, is the main editor of the document.




Valencia, 12 and 13 April 2010

NESSI Projects Summit

Demonstration

Valencia, 12 and 13 April 2010

NESSI Projects Summit

Video

Demo video (8:11)…

Short video (1:15)…


Valencia, 12 and 13 April 2010

NESSI Projects Summit

Roadmap

Valencia, 12 and 13 April 2010

NESSI Projects Summit

Next Steps (1/2)


Evolve the AJAX framework and the UI
components (media and maps controls, …)


Framework for offline applications compliant
with the HTML5 offline capabilities


Declarative development of context
-
aware
mobile apps while respecting privacy and
security policies


Compliant with W3C DAP / OMTP
-
Specifications


Enabling the development of Adaptive Mobile
Widgets




Valencia, 12 and 13 April 2010

NESSI Projects Summit

Next Steps (2/2)


To promote MyMobileWeb technologies as open
standards


W3C MBUI XG on “Model
-
Based User Interface”


Workshop on Future Standards for Model
-
Based User
Interfaces
12
-
13 May. Rome


http://www.w3.org/2010/02/mbui/cfp.html


To identify further research challenges and research
projects


Serenoa
FP7 ICT Call5 SERENOA Proposal


Multi
-
Dimensional Context
-
Aware Adaptation of Service Front
-
Ends


UsiXML
ITEA2 Call 5 Project


User interface eXtensible Markup Language

Valencia, 12 and 13 April 2010

NESSI Projects Summit

Partners

Valencia, 12 and 13 April 2010

NESSI Projects Summit

We thank our Sponsors