MyMobileWeb Version 4

MyMobileWeb
Framework for adaptive mobile web applications and portals

TELEFÓNICA I+D
Fecha: 26/11/2009

© 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal

The Mobile Web
An up-and-coming technology and market

TELEFÓNICA I+D


The Mobile Web
Overview
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…

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

TELEFÓNICA I+D
3

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

TELEFÓNICA I+D


The Mobile Web
Innovation Opportunities

Source: Gartner Hype Cycle for Web and User Interaction Technologies, 2009

TELEFÓNICA I+D


The Mobile Web
Potential Market

Source: AdMob Mobile Metrics Report (June 2009)

TELEFÓNICA I+D
6

The Mobile Web
Realizing its potential
Making the Mobile Web a reality it is not only a
question of using highly capable devices and browsers
Users are expecting more 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
…
Application and portal developers are demanding
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

TELEFÓNICA I+D
7

MyMobileWeb
An up-and-coming open source product

TELEFÓNICA I+D


MyMobileWeb: ¿Why?

28 Kb – 2 seg

¡ 3 Mb – 57 seg !

31 Kb – 2 seg
12,5 Kb – 1’7 seg
TELEFÓNICA I+D
9

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

TELEFÓNICA I+D
10

MyMobileWeb
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)

TELEFÓNICA I+D
11

12
TELEFÓNICA I+D
User Experience in different Delivery Contexts
>laedi/< >iu/< >ydob/< >noitces/<
>/ edu cn <>v d/<
>/ "2p/tcudorp/cireneg/liateDSP"=tnetnoc edullcnii<>viid/<
>e bat/<
>e bat/<
>ellllbat/<
>e bat/<
>rt/<
>dt/< >/
>dt/< >/
>dt/< >/ tuptuo< >dt<
tuptuo< >dt<
tuptuo< >dt<
>dt/< >/ "etad"=fer tuptuo< >dt<
>dt/< >/ "eman"=fer tuptuo< >dt<
>dt/< >/ tuptuo< >dt<
>dt/< >/ "edoc"=fer tuptuo< >dt<
>
>
>"}edoc.tnerruc.tluseRSPhcraes{$"=eulav
>
“ tluseRSPhcraes"=tesedon-taeper rt<
>ht/<
>ht/<
>ht/<
>ht/< Authoring
>dt/<ahceF>")'eciveDadP'(oTsgnoleb:ncd"=rpxe dt<
>dt/<
>dt/<
>dt/< >dt<
>dt<
>dt/<erbmoN>dt<
>dt<
>dt/<
>dt/< >dt<
>dt<
>dt/<.d C>dt<
>dt/< ó >dt<
>"redaeh"=ssalc ht<
>
>
> e bat<
e bat<
>"SPtsil"=di "etanigap spt"=ssalc "SPdetceles"=fer ellllbat<
e bat<
>"2p"=di "lacitrev retnec"=ssalc vid<
>v d/<
>v d/<
>viiiid/<
>v d/<
> eba /<
> eba /< >
> eba <
eba <
>llleballl/<}esirpretne{$>"kramer"=ssalc llleballl<
Deployment >lebal/<:aserpmE>lebal<
>
>
> v d<
v d<
>"1p"=di "retnec"=ssalc viiiid<
v d<
>"noitceSniam"=di noitces<
>ydob<
>ydob<
>ydob<
>ydob<
> u<
> u<
>iiiu<
>"S/P .snoC .seR"=eltit "tsilsp"=di laedi<
>2laedi EPYTCOD!<
MyMobileWeb in 4 steps

MyMobileWeb
Functional view and key technologies

TELEFÓNICA I+D


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.
TELEFÓNICA I+D


MyMobileWeb Architectural View

MyMobileWeb
Core Functionalities

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

TELEFÓNICA I+D


Adaptation
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
— mobileOK content.

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).

TELEFÓNICA I+D


MyMobileWeb
Core Functionalities
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.
TELEFÓNICA I+D


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 extensions that make it a more powerful and higher level
language than XHTML, as the latter is only intended for browser consumption.
— describes user interfaces (UIs) in an abstract manner, i.e. without commitment on how such a UI
will be finally rendered.
– The decision on how an abstract user interface element will be finally rendered will depend on the device
and web browser identified at runtime. The rendering engine can make this decision automatically on behalf
of the developer. Nonetheless, developers can force an specific rendering by means of adaptation policies.

IDEAL2 is only intended to provide the description of a user interface from a structural and
behavioral 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.
— MyMobileWeb’s rendering engine will take care of such details, performing graceful
degradations for those less capable devices.

TELEFÓNICA I+D


TELEFÓNICA I+D
More info at http://files.morfeo-project.org/mymobileweb/public/specs/ideal2
> aed /<
> aed /<
>llllaediiii/<
> aed /<
> u/<
>iiiiu/<
> u/<
> u/<
>ydob/<
>ydob/<
>ydob/<
>ydob/<
>retoof/<
>retoof/<
>retoof/<
>retoof/<
>/
>/
>/ edu cn <
edu cn <
>/ "derewop/nommoc/cireneg/nommoC"=tnetnoc edullllcniiii<
edu cn <
>/
>/
>/ rotarapes<
rotarapes<
>/ "enil"=ssalc rotarapes<
rotarapes<
>/
>/
>/ edu cn <
edu cn <
>/ "retoof/nommoc/cireneg/nommoC"=tnetnoc edullllcniiii<
edu cn <
> retoof<
retoof<
>"retoof"=di retoof<
>
> retoof<
>no tces/<
>no tces/<
>noiiiitces/<
>no tces/<
>v d/<
>v d/<
>viiiid/<
>v d/<
>unem/<
>unem/<
>unem/<
>unem/<
>a/<
>a/<
>a/< }eman.tnerruc.tsiLbulc{$
>a/<
>
>"}ferh.tnerruc.tsiLbulc{$"=ferh "}egami.tnerruc.tsiLbulc{$"=crs "tsiLbulc"=tesedon-taeper "redaeh"=di a<
>
> a<
a<
a<
>
>
> unem<
unem<
>"retnec sbulc"=ssalc "bulc"=fer "uneMym"=di unem<
unem<
>
>
>"bulC yM"=eltit "nommoc.eltit nommoc"=ssalc "1p"=di viiiid<
> v d<
v d<
v d<
> no tces<
no tces<
>"niam"=di noiiiitces<
>
> no tces<
>redaeh/<
>redaeh/<
>redaeh/<
>redaeh/<
>/
>/
>/ edu cn <
edu cn <
>/ "redaeh/nommoc/cireneg/nommoC"=tnetnoc edullllcniiii<
edu cn <
> redaeh<
redaeh<
>"redaeh"=di redaeh<
>
> redaeh<
>ydob<
>ydob<
>ydob<
>ydob<
> u<
>iiiiu<
> u<
> u<
>secruoser/<
>secruoser/<
>secruoser/<
>secruoser/<
>/
>/
>/ kn <
kn <
>/ "ssc.reccos"=ferh "elytSreccos"=di "teehselyts"=ler kniiiillll<
kn <
>/
>/ "}nocIvaFym{$"=ferh ")'enohPi'(oTsgnoleb:wmym"=rpxe "noci-hcuot-elppa"=ler "enohPInoci"=di kniiiillll<
>/
>/ kn <
kn <
kn <
>/
>/ "}nocIvaFym{$"=ferh "noci-x/egami"=epyt ")'enohPi'(oTsgnoleb:wmym!"=rpxe "noci tuctrohs"=ler "noci"=di kniiiillll<
>/
>/ kn <
kn <
kn <
>secruoser<
>secruoser<
>secruoser<
>secruoser<
>
>
> aed <
aed <
>"bulC yM"=eltit "xedni"=di llllaediiii<
aed <
>2laedi EPYTCOD!<
>? mx?<
mx?<
>? "8-FTU"=gnidocne "0.1"=noisrev llllmx?<
>?
>? mx?<
IDEAL2 Example (I)

IDEAL2 : UI Components (I)

<input> enables free-form data entry
or a user interface component
appropriate to the datatype of the
bound node.

<select1> | <select> allows the user
to make a single | multiple selection
from multiple choices.

<textarea> multi-line text input element
<submit> launches an update of the model (initiates a submission)
<trigger> requests something from the UI without updating the
model
TELEFÓNICA I+D


IDEAL2 : UI Components (II)

<upload> enables the common
feature found on Web sites to upload
a file from the local file system

<inputDate> accepts a date as input. It
can be rendered as: calendar, set of input
fields, wizard, …
<inputTime> accepts a time as input
(hours, minutes and seconds)

<range> allows selection
from a sequential range of
values

TELEFÓNICA I+D


IDEAL2 : UI Components (III)
<smsSend> allows to
send a SMS

<phoneBookAdder> adds telephone
numbers to the agenda

<image> | <figure> to display images
(subject to content selection or
transcoding)

<telephoneCaller> allows to
trigger a phone call

TELEFÓNICA I+D


IDEAL2 : UI Components (IV)

<menu> represents a navigation
list. It can be rendered as:
(combo sensitive to changes,
clickable images, list of links, …)

<chainedMenu> It is a set
of mutually dependant
menus

TELEFÓNICA I+D


IDEAL2 : UI Components (V)

<table> represents data in
tabular mode

<placard> a container that supports
advanced layouts combining text and
images

TELEFÓNICA I+D


IDEAL2 : UI Components (VI)

<carousel> displays sequentially a dynamic catalogue of
objects

TELEFÓNICA I+D


IDEAL2 : UI Components (VII)

IDEAL2 Extensions (maps, statistical graphics, …)

TELEFÓNICA I+D


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

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

ServiceImpl
MyMobileWeb is able to connect to any Vocabularies
DDR supporting the W3C’s DDR Simple description and
sources mapping
API Recommendation.
— Connectors with the most popular DDRs
such as WURFL, Device Atlas or UAProf WURFLService UAProfService DeviceAtlasService

are provided off-the-shelf.
Vocabularies mapping
— Multiple vocabularies of properties,
including the W3C’s DDR Core Vocabulary
[11B] and the WURFL’s vocabulary are
supported wurfl uaprof deviceatlas

MyMobileWeb implements an AJAX-based Identification

mechanism devoted to notify the server
when a (dynamic) property changes at
client (device) side during a session.
— For example the screen orientation

TELEFÓNICA I+D


Mobile AJAX Framework Forms Delivery
Context
Enables rich interactions in different
Javascript-enabled browsers. XForms
Engine

Provides (cross-browser)
convenience methods for:
— asynchronous HTTP requests Form
DCCI
— insertion of server-side generated Autocompletion
markup fragments
— DOM manipulation (adding elements,
hiding, showing, enabling, disabling
…) Core
— advanced UI components (calendar,
slider, tabs, …) UI
Commons
Controls
— XForms client-side bindings

JS is always sent compressed and
minimized in order to save bandwidth AJAX Debug

TELEFÓNICA I+D


SCXML
State Chart XML (SCXML) is a W3C
standard
— General purpose language for
describing state machines
— Based on Harel States Tables c
c
c

c

— Used to specify MyMobileWeb’s Machine State – User 1
c

application flows Control + Event
Model
HTTP
Application Flows describe the
behavior to be performed in reaction HTTP c
c
c

to the interaction of the user with the c
c

system. Machine State – User N

Controller View
— The set of actions to be performed by
Application Server
an application flow does not only
depend on the events raised by the
user interface but also on the
application state.
– For example, the next page to be loaded
when a link is activated could depend
not only on the activated link per se, but
also on the user profile.

TELEFÓNICA I+D


SCXML Example

Statistics Rounds
Statistics.barchar Rounds.round
entry / executeOA (‘StandingsOA’’)
entry / executeOA (‘GamesOA’’)

init.activate
init.activate [option == ‘rounds’]
[option == ‘statistics’]
Club
Club.clubSelection
InitialMenu entry / executeOA (‘ClubsOA’)
init.activate
[option == ‘club’]
InitialMenu.index
clubSelection.activate

Club.clubDetail
entry / executeOA (‘ClubNameOA’’)
init.activate
[option == ‘news’]

club.activate
News [option == ‘news’] club.activate / propageVar()
[option == ‘gallery’]
News.newsList
entry / executeOA (‘NewsListOA’’)
Gallery
Gallery.gallery
read.activate entry / executeOA (‘GalleryOA’’)

News.newsDetail
myCarousel.activate
entry / executeOA (‘NewsDetailOA’)

Gallery.photo

TELEFÓNICA I+D


A growing community

TELEFÓNICA I+D


MyMobileWeb’s popularity

TELEFÓNICA I+D


MyMobileWeb’s Popularity in relative terms

TELEFÓNICA I+D


MyMobileWeb downloads per month
(last 30 months)
600

500 483
470

391
400
364 366 361

329
317 321 311
Downloads

295
300
267 262 260
241
232 235 downloads

200 190 175 171
188
162 169 162
143 150 138
132 134

100

0
/07

/08

/08

/09

/09
/07

/01

/07

/01

/07
31

31

31

31

31
Month

November 25th: 9812 Average: 255 per month
Total: 8711, 17th August 2009

TELEFÓNICA I+D


MyMobileWeb mailing list traffic per Month
(last 30 months)
140

123

120

105

100
Message Count

80
69

60 posts
51
questions

40 37
34 35
32
28
26 26 26
23 24 23 22
19 20
20 17 17
13 12 13
11 10 10 10
8
6

0
/0 7

/0 8

/0 8

/0 9

/0 9
/0 7

/0 1

/0 7

/0 1

/0 7
31

31

31

31

31
Month

Average: 12 questions per month Average: 30 posts per month
TELEFÓNICA I+D


MyMobileWeb’s web site

TELEFÓNICA I+D


MyMobileWeb Training

A free Certification Course is run twice a year
— More than 40 developers already certified in Spain
— We are starting to define a certification program for certification
authorities
– Interest from Indian companies in becoming certification authorities in
Asia
Books
— Mobile Web Development (2008)
– Author: Nirhav Mihta. Publisher: Packt Publishing
– A section entirely dedicated to MyMobileWeb
— Mobile Web 2.0: Developing and Delivering Services to Mobile
Phones (To appear on 2010)
– Authors: Syed A. Ahson; Mohammad Ilyas (Microsoft)
– It will include an specific chapter on MyMobileWeb
— MyMobileWeb in Action (to appear in 2010)
– A proposal has been made to Manning Publications and Packt
Publishing

TELEFÓNICA I+D


Remarkable External References
http://www.meicom.hku.hk/CPD/CPD_SummerSem_2008-09.doc Summer Course at the University of Hong
Kong
http://www.javahispano.org/contenidos/archivo/393231/DesarrolloW Tutorial de Desarrollo Web para
ebDispositivosMoviles.pdf Dispositivos Móviles (JavaHispano)
http://comunicacio.barcelonamedia.org/Recull/2009_01_22/Ciberpai Diario El Pais, 22 Enero 2009
s.pdf
http://www.publico.es/ciencias/229464/internet/carta/abierto?orden= Dario Público, 2 Junio 2009
VALORACION&asc=&aleatorio=0.5
http://research.nokia.com/files/Haumont-dotMobi.pdf DotMobi a key enabler for the mobile
internet
http://vettrend.polito.it/sito/common-folder/wp2/o2-2.3/a2-2-3.2/r2-2- State of the Art mobile web development
3.2/P1%20-%20P10%20%20R2.2.3.2%20.doc (University of Torino)

http://www.infolancer.net/freelance/Isaac_Lopez_Pena/12afzub42kc CV of a freelance consultor
e66yap8x

http://pc.dev.mobi/?q=node/208 dev.mobi mobile web developers reference
http://dev.mobi/node/83 site
W3C MobileOK standard http://www.w3.org/2008/06/mobileok- W3C standards-compliant frameworks
implementation-report
DDR Simple API
http://www.w3.org/2005/MWI/DDWG/drafts/api/test-report.html
Mobile Developer’s Guide to the Galaxy Mobile Developer’s Guide published at
http://www1.j2mepolish.org/downloads/MobileDevelopersGuideToTh OSIM Conference
eGalaxy.pdf
http://www.developershome.com/books/mwd/other-tools.asp Developers Home for Mobile Technologies

TELEFÓNICA I+D


Remarkable Success Stories

TELEFÓNICA I+D


Success Stories
GAOM

GAOM - Gestión de Actividad de
Operación y Mantenimiento de
Telefónica de España

Developer: TI+D

Functionalities:
— Field Workers (GMOs) can query the
tasks they have to complete

— Task workflow

TELEFÓNICA I+D
41

Success Stories
Caixa Galicia

Caixa Galicia’s mobile web portal

Developer: Caixa Galicia in house

Functionalities:
— Information about the services
offered:
– Premises, ATMs

– Products

– Alerts

– Promotions

– …
TELEFÓNICA I+D
42

Success Stories
andalucia.mobi

andalucia.mobi is the mobile-optimized
version of andalucia.org (web portal
about tourism in Andalucia)

Developer: Yaco Sistemas (SME)

Functionalities:
— Information about beaches

— Golf

— Accommodation (hotels,…)

A new version is on development

TELEFÓNICA I+D
43

Success Stories
Lérida’s Council

paeria.mobi is the mobile web channel
for the 010 service (information for
citizens)

Developer: iWS (SME)

Functionalities:
— Local information

— Telephones

— Agenda

TELEFÓNICA I+D
44

Success Stories
EducaMadrid

educamadrid.mobi: mobile portal owned
by Consejería de Educación de la
Comunidad de Madrid

Developer: Germinus

Functionalities:
— News

— Events

TELEFÓNICA I+D
45

Other Sites and Applications
Client / Project & URL Use

IWS own mobile portal A fully working and usable proof of concept using MMW, showing our clients
http://m.iws.es our products, services and news.
Sabadell City Council This mobile site shows thousands of differents informations from the city council
http://m.sabadell.cat to his citizens.
Feria de Teatro en la calle Spain’s largest theater market shows to people attending the event many kinds
http://mobi.Firatarrega.com of news, information and timetables .
LleidaLanParty (not in use at this time)
http://mobi.lleidalanparty.com Mobile portal information for Spain’s fourth in size Lan Party, mainly news.
Lleida Cine Movie showtimes and information for all the theaters in Lleida’s province.
http://mobi.lleida.com Updated weekly.
WebXpress Mobile Simple web portal for SMB’s, containing info, news, location and contact form.
Many
Sevi.mobi Provides different informations about Seville’s local council services, such as
http://sevi.mobi bycicle renting.
PortalMobil (not finished)Site with two goals, give a useful listing of .mobi url’s to visit,
http://Portalmobil.mobi continuosly updated by our editors, and as promotion for our mobile
products and services.
Hospital de Fuenlabrada This project is a quality service and assistance process set-up at the Hospital
for the remote control of babies born with low weight and recovering at
home, following the established medical protocol.
murciaturistica.mobi In development. Mobile tourism portal for Murcia’s region

TELEFÓNICA I+D


Roadmap

TELEFÓNICA I+D


MyMobileWeb Roadmap
Next Milestone:
— Version 4.0 (to be released on 21st December 2009)
New components planned for 2010
— Evolve the AJAX framework and the UI components
– HTTP server-sent events for push applications
– Animations / Transitions to improve the user experience on adaptation
– New UI components
– Maps
– Improved iPhone rendering possibly based on SVG
— IDEAL2
– Better support of multimedia content
– New statistical graphics
– SVG-Based rendering engine
— Remove WURFL dependencies from the DDR Service
— 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

TELEFÓNICA I+D


MyMobileWeb for Developers

TELEFÓNICA I+D


Getting Started

TELEFÓNICA I+D


How to install the development environment (I)
http://forge.morfeo-project.org/wiki_en/index.php/MyMobileWeb_Getting_Started_4.0

Install the DDR REST Service which provides information
about the static characteristics of a delivery context
— Download the software Device Information Simple API and
uncompress the tar.gz
— Deploy the service in your Server

copy

— Run the Service (on Apache Tomcat)
– JVM parameters ‘-Xms512m -Xmx512m ’

TELEFÓNICA I+D


How to install the development environment (II)

Install MyMobileWeb SDK 4
— Download the software and uncompress the tar.gz

Install MyMobileWeb Eclipse Plugin
— Download the plugin, uncompress and install

copy

TELEFÓNICA I+D


MyMobileWeb Eclipse Plugin Configuration

Setting the MyMobileWeb SDK path…
— Go to Window > Preferences > MyMobileWeb

TELEFÓNICA I+D


Creating a new MyMobileWeb Project (I)

New Project Examples developed
with MyMobileWeb

TELEFÓNICA I+D


Creating a new MyMobileWeb Project (II)

Project
name
Define a new installed
server runtime
environment for the
application

TELEFÓNICA I+D


Creating a new MyMobileWeb Project (III)

Choose the flow
Control (by default
SCXML)
It’s available only if
the flow is defined
using Java classes

Create the initial
case use

Generate the empty project…
TELEFÓNICA I+D


MyMobileWeb Project Structure

Source code (Java classes, e.g. OAs)

W-CSS

Device Clustering
Configuration & DC Cache
ActiveX and RDF

Multi-Language Flow definition by means of SCXML
(literals & messages)

Use cases (OP) and presentations

Platform images
(pagination, range, etc) AJAX Framework & Validation JS

MyMobileWeb Configuration

TELEFÓNICA I+D


Example

TELEFÓNICA I+D


Soccer Portal “La Liga”

TELEFÓNICA I+D


TELEFÓNICA I+D
>etats/<
>etats/<
>/ "scit sitatS"=te grat "}'scitsitats' == n oitp o{$"= d n oc " eta vitca.tini"=tneve noitisnart<
>/ " sd n uo R"=te gr at "}'sd n u or' == n oitp o{$"= d n oc " eta vitca.tini"=tneve noitisnart<
>/ "n oitcel eS b ulc.b ulC"=te grat "}'b ulc' == n oitp o{$"= d n oc " eta vitca.tini"=tneve noitisnart<
>/ "sw e N"=te grat "}'sw e n' == n oitp o{$"= d n oc " eta vitca.tini"=tneve noitisnart<
> "w ei V"= yro g eta c:wm ym "xe d ni.u n e Mlaiti nI"=di
etats<
> "xe d ni.un e Ml aiti nI"=l aiti ni "e sa CesU"= yro g eta c:wm ym "u n e Ml aitinI"= di
etats<
SCXML excerpts
>etats/<
>etats/<
>etats/<
>etats/<
>etats/<
>etats/<
>etats/<
>etats/<
>/
>/
>/
>/ "yrella g.yrell aG"=te grat "etavitca.kca bl"=tneve no t snart<
noiiiitiiiisnart<
no t snart<
no t snart<
>
>
>
> "w eiV"=yro g etac:w mym " oto h p.yrell aG"=di etats<
etats<
etats<
etats<
>etats/<
>etats/<
>etats/<
>etats/<
>/
>/
>/
>/ "b ul C"=te grat "etavitca.kca bl"=tneve no t snart<
noiiiitiiiisnart<
no t snart<
no t snart<
>/
>/
>/
>/ " oto h p.yrell a G"=te grat " eta vitca.l esu ora Cym"=tneve no t snart<
noiiiitiiiisnart<
no t snart<
no t snart<
>yrtneno/<
>yrtneno/<
>yrtneno/<
>yrtneno/<
>/
>/
>/
>/ "AOyrell aG"=AO di AOetucexe:wmym<
AOetucexe:wmym<
AOetucexe:wmym<
AOetucexe:wmym<
>yrtneno<
>yrtneno<
>yrtneno<
>yrtneno<
>
>
>
> "w eiV"=yr og eta c:wmym "yrell a g.yrell aG"=di etats<
etats<
etats<
etats<
yrell ag.yrellaG"=l aiti ni "esa C esU"=yr og eta c:wm ym "yrell aG"= di etats<
etats<
etats<
etats<
Application Flow as a finite state machine

MyMobileWeb Version 4

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (7)

Similaire à MyMobileWeb Version 4

Similaire à MyMobileWeb Version 4 (20)

Dernier

Dernier (20)

MyMobileWeb Version 4