making the mobile real jose luís díaz, ti+d mymobileweb
Post on 31-Mar-2015
216 Views
Preview:
TRANSCRIPT
Making the mobile real
Jose Luís Díaz, TI+DMyMobileWeb
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 1st 2007• Finish Date: December 31st 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 Mobile 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 Mobile Web Development is not easy if you wish to support the majority of devices wish to support the majority of devices without compromising functionality or the without compromising functionality or the user experienceuser 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 !3 Mb – 57 seg !
31 Kb – 2 seg31 Kb – 2 seg
28 Kb – 2 seg28 Kb – 2 seg
12,5 Kb – 1’7 seg12,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>
<!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
IDEAL2 & SCXML
BusinessServices
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
Backen
d
Client Fwk
Adaptation and Rendering Engine
SCXML EngineClient
Controller
Server Platform
Delivery Context Manager
Mobile Device
Web Server
DDR Service
OMA-STI Transcoder
Connectors
ServerXForms Engine
Delivery Context Manager
ConnectorsConnectors
Controller
AJAX UI Components
HT
TP 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 ContextDelivery Context
DCCI
FormsForms
XFormsEngine
Form Autocompletion
CoreCore
AJAX
Commons (DOM
Manipulation)
UIControls
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/0
7/07
31/0
1/08
31/0
7/08
31/0
1/09
31/0
7/09
31/1
2/09
0
100
200
300
400
500
600
700
190
364
329
175 171
317 321311
143 150132
366
134
267
391
162
241
169 162
232
138
262 260
295
470483
361
188
235245
320
345
425
640
366
328 333
dow nloads
M o n t h
Dow
nloa
ds
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 )
Average: 16 questions per month / Average: 46.2 posts per month(Last 39 months )
31/0
7/07
31/0
1/08
31/0
7/08
31/0
1/09
31/0
7/09
31/1
2/09
0
50
100
150
200
250
11 13 1017
34
12
37
13
2328
10
2417
51
26
8
19
106
3226
35
20
69
23 2226
105
123
85
101
45
132
233
132
77
55
5 37 9
14
6
147 9 9
510
5
19 18
1
106 4
2014
20
8
33
8 10 10
22
34
23
35
19
37
55
pos ts
ques tions
M o n t h
Mes
sage
Cou
nt
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
VideoDemo 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
top related