Upload
crdlc
View
1.310
Download
14
Embed Size (px)
DESCRIPTION
Framework for adaptive mobile web applications and portals
Citation preview
MyMobileWebFramework 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
TELEFÓNICA I+D
© 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
The Mobile WebAn up-and-coming technology and market
TELEFÓNICA I+D
© 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
3
The Mobile WebOverview
� 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 maMobile Web Development is not easy if you wish to support the majority jority
of devices without compromising functionality or the user experiof devices without compromising functionality or the user experienceence
TELEFÓNICA I+D
© 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
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 ownerswon'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'tdesigned 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
© 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
The Mobile WebInnovation Opportunities
Source: Gartner Hype Cycle for Web and User Interaction Technologies, 2009
TELEFÓNICA I+D
© 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
6
The Mobile Web Potential Market
Source: AdMob Mobile Metrics Report (June 2009)
TELEFÓNICA I+D
© 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
7
� 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
The Mobile WebRealizing its potential
TELEFÓNICA I+D
© 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
MyMobileWebAn up-and-coming open source product
TELEFÓNICA I+D
© 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
9
MyMobileWeb: ¿Why?
¡ 3 Mb – 57 seg !
31 Kb – 2 seg
28 Kb – 2 seg
12,5 Kb – 1’7 seg
TELEFÓNICA I+D
© 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
10
MyMobileWebIntroduction
� 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
© 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
11
MyMobileWebHistory
� 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
© 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
12
MyMobileWeb in 4 steps
User Experience in different Delivery Contexts
<!DOCTYPE ideal2><ideal<ideal<ideal<ideal id="pslist" title="Res. Cons. P/S">>>><<<<uiuiuiui>>>><body><body><body><body><section<section<section<section id="mainSection">>>><div<div<div<div class="center" id="p1">>>><label><label><label><label>Empresa:</label></label></label></label><label <label <label <label class="remark">>>>${enterprise}</label></label></label></label></div></div></div></div><div<div<div<div class="center vertical" id="p2">>>><table<table<table<table ref="selectedPS" class="tps paginate" id="listPS">>>><<<<thththth class="header">>>><td><td><td><td>Cód.</td></td></td></td><td><td><td><td>Nombre</td></td></td></td><td<td<td<td expr="dcn:belongsTo('PdaDevice')">>>>Fecha</td></td></td></td></</</</thththth>>>><<<<trtrtrtr repeat-nodeset="searchPSResult“value="${searchPSResult.current.code}">>>><td><td><td><td> <output<output<output<output ref="code" />/>/>/> </td></td></td></td><td><td><td><td> <output<output<output<output ref="name" />/>/>/> </td></td></td></td><td><td><td><td> <output<output<output<output ref="date" />/>/>/> </td></td></td></td></</</</trtrtrtr>>>></table></table></table></table></div><include</div><include</div><include</div><include content="PSDetail/generic/product/p2" />/>/>/></section></section></section></section> </body></body></body></body> </</</</uiuiuiui>>>> </ideal></ideal></ideal></ideal>
Deployment
Authoring
TELEFÓNICA I+D
© 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
MyMobileWeb Functional view and key technologies
TELEFÓNICA I+D
© 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
MyMobileWebKey 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.
MyM
ob
ileW
eb A
rch
itec
tura
l Vie
w
TELEFÓNICA I+D
© 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
MyMobileWebCore 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 sufficientlyharmonized with such a delivery context. Adaptation encompasses a number of sub-functionalities
TELEFÓNICA I+D
© 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
AdaptationSub-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
© 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
MyMobileWebCore 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
© 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
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
© 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
IDEAL2 Example (I)<?xml<?xml<?xml<?xml version="1.0" encoding="UTF-8" ?>?>?>?><!DOCTYPE ideal2><ideal<ideal<ideal<ideal id="index" title="My Club">>>><resources><resources><resources><resources><link<link<link<link id="icon" rel="shortcut icon" expr="!mymw:belongsTo('iPhone')" type="image/x-icon" href="${myFavIcon}" />/>/>/><link<link<link<link id="iconIPhone" rel="apple-touch-icon" expr="mymw:belongsTo('iPhone')" href="${myFavIcon}" />/>/>/><link<link<link<link rel="stylesheet" id="soccerStyle" href="soccer.css" />/>/>/></resources></resources></resources></resources><<<<uiuiuiui>>>><body><body><body><body><header<header<header<header id="header">>>><include<include<include<include content="Common/generic/common/header" />/>/>/></header></header></header></header><section<section<section<section id="main">>>><div<div<div<div id="p1" class="common title.common" title="My Club">>>><menu<menu<menu<menu id="myMenu" ref="club" class="clubs center">>>><a<a<a<a id="header" repeat-nodeset="clubList" src="${clubList.current.image}" href="${clubList.current.href}">>>>${clubList.current.name} </a></a></a></a></menu></menu></menu></menu></div></div></div></div></section></section></section></section><footer<footer<footer<footer id="footer">>>><include<include<include<include content="Common/generic/common/footer" />/>/>/><separator<separator<separator<separator class="line" />/>/>/><include<include<include<include content="Common/generic/common/powered" />/>/>/></footer></footer></footer></footer></body></body></body></body></</</</uiuiuiui>>>></ideal></ideal></ideal></ideal>More info at http://files.morfeo-project.org/mymobileweb/public/specs/ideal2
TELEFÓNICA I+D
© 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
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
© 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
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
© 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
IDEAL2 : UI Components (III)
� <smsSend> allows to
send a SMS
� <phoneBookAdder> adds telephone
numbers to the agenda
� <telephoneCaller> allows to
trigger a phone call
� <image> | <figure> to display images
(subject to content selection or
transcoding)
TELEFÓNICA I+D
© 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
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
© 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
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
© 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
IDEAL2 : UI Components (VI)
� <carousel> displays sequentially a dynamic catalogue of
objects
TELEFÓNICA I+D
© 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
IDEAL2 : UI Components (VII)
� IDEAL2 Extensions (maps, statistical graphics, …)
TELEFÓNICA I+D
© 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
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 [11B] 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
wurfl
ServiceImpl
uaprof
WURFLService UAProfService DeviceAtlasService
deviceatlas
Service
Vocabularies
description and
sources mapping
Vocabularies mapping
Identification
Application
TELEFÓNICA I+D
© 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
Mobile AJAX Framework
� Enables rich interactions in different Javascript-enabled browsers.
� Provides (cross-browser) convenience methods for:
— asynchronous HTTP requests
— insertion of server-side generated markup fragments
— DOM manipulation (adding elements, hiding, showing, enabling, disabling …)
— advanced UI components (calendar, slider, tabs, …)
— XForms client-side bindings
� JS is always sent compressed and minimized in order to save bandwidth
CoreCore
AJAX
CommonsUI
Controls
Delivery ContextDelivery Context
DCCI
FormsForms
XFormsEngine
FormAutocompletion
Debug
TELEFÓNICA I+D
© 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
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.
– 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.
HTTP
Controller
Model
View
cc
c
cc
Machine State – User 1
cc
c
cc
Machine State – User N
HTTP
Control + Event
Application Server
TELEFÓNICA I+D
© 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
SCXML Example
InitialMenu
News
read.activate
Rounds
Rounds.round
entry / executeOA (‘StandingsOA’’)
entry / executeOA (‘GamesOA’’)
Statistics
Statistics.barchar
Club
Gallery
Gallery.photo
myCarousel.activate
InitialMenu.index
init.activate[option == ‘news’]
init.activate
[option == ‘statistics’]
Club.clubSelection
entry / executeOA (‘ClubsOA’)
Club.clubDetail
entry / executeOA (‘ClubNameOA’’)
club.activate[option == ‘gallery’]
/ propageVar()
init.activate
[option == ‘rounds’]
init.activate[option == ‘club’]
Gallery.gallery
entry / executeOA (‘GalleryOA’’)
News.newsDetail
entry / executeOA (‘NewsDetailOA’)
News.newsList
entry / executeOA (‘NewsListOA’’)
club.activate
[option == ‘news’]
clubSelection.activate
TELEFÓNICA I+D
© 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
A growing community
TELEFÓNICA I+D
© 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
MyMobileWeb’s popularity
TELEFÓNICA I+D
© 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
MyMobileWeb’s Popularity in relative terms
TELEFÓNICA I+D
© 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
MyMobileWeb downloads per month (last 30 months)
Average: 255 per monthTotal: 8711, 17th August 2009
31/0
7/0
7
31/0
1/0
8
31/0
7/0
8
31/0
1/0
9
31/0
7/0
9
0
100
200
300
400
500
600
190
364
329
175 171
317 321311
143 150
132
366
134
267
391
162
241
169 162
232
138
262 260
295
470483
361
188
235 downloads
Month
Do
wn
loa
ds
November 25th: 9812
TELEFÓNICA I+D
© 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
MyMobileWeb mailing list traffic per Month (last 30 months)
Average: 12 questions per month Average: 30 posts per month
31/0
7/0
7
31/0
1/0
8
31/0
7/0
8
31/0
1/0
9
31/0
7/0
9
0
20
40
60
80
100
120
140
1113
10
17
34
12
37
13
23
28
10
24
17
51
26
8
19
10
6
32
26
35
20
69
23 2226
105
123
posts
questions
Month
Me
ss
ag
e C
ou
nt
TELEFÓNICA I+D
© 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
MyMobileWeb’s web site
TELEFÓNICA I+D
© 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
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 PacktPublishing
TELEFÓNICA I+D
© 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
Remarkable External References
Mobile Developer’s Guide published at OSIM Conference
Mobile Developer’s Guide to the Galaxy
http://www1.j2mepolish.org/downloads/MobileDevelopersGuideToTheGalaxy.pdf
Developers Home for Mobile Technologieshttp://www.developershome.com/books/mwd/other-tools.asp
W3C standards-compliant frameworksW3C MobileOK standard http://www.w3.org/2008/06/mobileok-implementation-report
DDR Simple API http://www.w3.org/2005/MWI/DDWG/drafts/api/test-report.html
dev.mobi mobile web developers reference site
http://pc.dev.mobi/?q=node/208
http://dev.mobi/node/83
CV of a freelance consultorhttp://www.infolancer.net/freelance/Isaac_Lopez_Pena/12afzub42kce66yap8x
State of the Art mobile web development (University of Torino)
http://vettrend.polito.it/sito/common-folder/wp2/o2-2.3/a2-2-3.2/r2-2-3.2/P1%20-%20P10%20%20R2.2.3.2%20.doc
DotMobi a key enabler for the mobile
internet
http://research.nokia.com/files/Haumont-dotMobi.pdf
Dario Público, 2 Junio 2009http://www.publico.es/ciencias/229464/internet/carta/abierto?orden=VALORACION&asc=&aleatorio=0.5
Diario El Pais, 22 Enero 2009http://comunicacio.barcelonamedia.org/Recull/2009_01_22/Ciberpai
s.pdf
Tutorial de Desarrollo Web paraDispositivos Móviles (JavaHispano)
http://www.javahispano.org/contenidos/archivo/393231/DesarrolloWebDispositivosMoviles.pdf
Summer Course at the University of Hong Kong
http://www.meicom.hku.hk/CPD/CPD_SummerSem_2008-09.doc
TELEFÓNICA I+D
© 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
Remarkable Success Stories
TELEFÓNICA I+D
© 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
41
� 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
Success StoriesGAOM
TELEFÓNICA I+D
© 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
42
� Caixa Galicia’s mobile web portal
� Developer: Caixa Galicia in house
� Functionalities:
— Information about the services
offered:
– Premises, ATMs
– Products
– Alerts
– Promotions
– …
Success StoriesCaixa Galicia
TELEFÓNICA I+D
© 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
43
� 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
Success Storiesandalucia.mobi
TELEFÓNICA I+D
© 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
44
� paeria.mobi is the mobile web channel
for the 010 service (information for
citizens)
� Developer: iWS (SME)
� Functionalities:
— Local information
— Telephones
— Agenda
Success StoriesLérida’s Council
TELEFÓNICA I+D
© 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
45
� educamadrid.mobi: mobile portal owned
by Consejería de Educación de la
Comunidad de Madrid
� Developer: Germinus
� Functionalities:
— News
— Events
Success StoriesEducaMadrid
TELEFÓNICA I+D
© 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
Other Sites and Applications
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.
Hospital de Fuenlabrada
(not finished)Site with two goals, give a useful listing of .mobi url’s to visit, continuosly updated by our editors, and as promotion for our mobile products and services.
PortalMobilhttp://Portalmobil.mobi
In development. Mobile tourism portal for Murcia’s regionmurciaturistica.mobi
Provides different informations about Seville’s local council services, such as bycicle renting.
Sevi.mobihttp://sevi.mobi
Simple web portal for SMB’s, containing info, news, location and contact form.WebXpress MobileMany
Movie showtimes and information for all the theaters in Lleida’s province. Updated weekly.
Lleida Cinehttp://mobi.lleida.com
(not in use at this time)Mobile portal information for Spain’s fourth in size Lan Party, mainly news.
LleidaLanPartyhttp://mobi.lleidalanparty.com
Spain’s largest theater market shows to people attending the event many kinds of news, information and timetables .
Feria de Teatro en la callehttp://mobi.Firatarrega.com
This mobile site shows thousands of differents informations from the city council to his citizens.
Sabadell City Councilhttp://m.sabadell.cat
A fully working and usable proof of concept using MMW, showing our clients our products, services and news.
IWS own mobile portalhttp://m.iws.es
UseClient / Project & URL
TELEFÓNICA I+D
© 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
Roadmap
TELEFÓNICA I+D
© 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
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
© 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
MyMobileWeb for Developers
TELEFÓNICA I+D
© 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
Getting Started
TELEFÓNICA I+D
© 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
How to install the development environment (I)
� 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
— Run the Service (on Apache Tomcat)
– JVM parameters ‘-Xms512m -Xmx512m ’
http://forge.morfeo-project.org/wiki_en/index.php/MyMobileWeb_Getting_Started_4.0
copy
TELEFÓNICA I+D
© 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
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
© 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
MyMobileWeb Eclipse Plugin Configuration
� Setting the MyMobileWeb SDK path…
— Go to Window > Preferences > MyMobileWeb
TELEFÓNICA I+D
© 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
Creating a new MyMobileWeb Project (I)
New Project Examples developed with MyMobileWeb
TELEFÓNICA I+D
© 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
Creating a new MyMobileWeb Project (II)
Project name
Define a new installed server runtime environment for the application
TELEFÓNICA I+D
© 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
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
© 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
MyMobileWeb Project Structure
W-CSS
Source code (Java classes, e.g. OAs)
Device Clustering Configuration & DC Cache
Flow definition by means of SCXML
ActiveX and RDF
Multi-Language (literals & messages)
Use cases (OP) and presentations
Platform images (pagination, range, etc) AJAX Framework & Validation JS
MyMobileWeb Configuration
TELEFÓNICA I+D
© 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
Example
TELEFÓNICA I+D
© 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
Soccer Portal “La Liga”
TELEFÓNICA I+D
© 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
<<<<statestatestatestate id="InitialMenu" mymw:category="UseCase" initial="InitialMenu.index">>>><<<<statestatestatestate id="InitialMenu.index" mymw:category="View">>>><<<<transitiontransitiontransitiontransition event="init.activate" cond="${option == 'news'}" target="News" />/>/>/><<<<transitiontransitiontransitiontransition event="init.activate" cond="${option == 'club'}" target="Club.clubSelection" />/>/>/><<<<transitiontransitiontransitiontransition event="init.activate" cond="${option == 'rounds'}" target="Rounds" />/>/>/><<<<transitiontransitiontransitiontransition event="init.activate" cond="${option == 'statistics'}" target="Statistics" />/>/>/></</</</statestatestatestate>>>></</</</statestatestatestate>>>>
Application Flow as a finite state machine
SCXML excerpts
<<<<statestatestatestate id="Gallery" mymw:category="UseCase" initial="Gallery.gallery<<<<statestatestatestate id="Gallery.gallery" mymw:category="View">>>><<<<onentryonentryonentryonentry>>>><<<<mymw:executeOAmymw:executeOAmymw:executeOAmymw:executeOA idOA="GalleryOA" />/>/>/></</</</onentryonentryonentryonentry>>>><<<<transitiontransitiontransitiontransition event="myCarousel.activate" target="Gallery.photo" />/>/>/><<<<transitiontransitiontransitiontransition event="lback.activate" target="Club" />/>/>/></</</</statestatestatestate>>>><<<<statestatestatestate id="Gallery.photo" mymw:category="View">>>><<<<transitiontransitiontransitiontransition event="lback.activate" target="Gallery.gallery" />/>/>/></</</</statestatestatestate>>>></</</</statestatestatestate>>>>
TELEFÓNICA I+D
© 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
IDEAL2 .- Initial Menu<?<?<?<?xmlxmlxmlxml version="1.0" encoding="UTF-8" ?>?>?>?><!DOCTYPE ideal2><ideal<ideal<ideal<ideal id="index" title="La liga">>>><<<<resourcesresourcesresourcesresources>>>><link<link<link<link id="icon" rel="shortcut icon" expr="!mymw:belongsTo('iPhone')" type="image/x-icon"href="${myFavIcon}" />/>/>/><link<link<link<link id="iconIPhone" rel="apple-touch-icon" expr="mymw:belongsTo('iPhone')" href="${myFavIcon}" />/>/>/><link<link<link<link rel="stylesheet" id="soccerStyle" href="soccer.css" />/>/>/></</</</resourcesresourcesresourcesresources>>>><<<<uiuiuiui>>>><<<<bodybodybodybody>>>><<<<headerheaderheaderheader id="header">>>><<<<includeincludeincludeinclude content="Common/generic/common/header" />/>/>/></</</</headerheaderheaderheader>>>><<<<sectionsectionsectionsection id="main">>>><<<<divdivdivdiv>>>><<<<menumenumenumenu id="init" ref="option" class="soccer">>>><a<a<a<a id="news" class="decorate" longtitle="Soccer News" resourceid="news">>>>News</a></a></a></a><a<a<a<a id="club" class="decorate" longtitle="My clubSelection club" resourceid="team">>>>My club</a></a></a></a><a<a<a<a id="rounds" class="decorate" longtitle="Standings and games" resourceid="table">>>>Rounds</a></a></a></a><a<a<a<a id="statistics" class="decorate" longtitle="Winners statistics" resourceid="statistics">>>>Statistics</a></a></a></a></</</</menumenumenumenu>>>></</</</divdivdivdiv>>>></</</</sectionsectionsectionsection>>>><<<<footerfooterfooterfooter id="footer">>>><<<<separatorseparatorseparatorseparator class="line" />/>/>/><<<<includeincludeincludeinclude content="Common/generic/common/powered" />/>/>/></</</</footerfooterfooterfooter>>>></</</</bodybodybodybody>>>></</</</uiuiuiui>>>></ideal></ideal></ideal></ideal>
TELEFÓNICA I+D
© 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
Dynamic Menu<<<<divdivdivdiv id="p1" class="common title.common" title="My Club">>>><<<<menumenumenumenu id="myMenu" ref="club" class="clubs center">>>><a<a<a<a id="header" repeat-nodeset="clubList" src="${clubList.current.image}" href="${clubList.current.href}">>>> ${clubList.current.name} </a></a></a></a></</</</menumenumenumenu>>>></</</</divdivdivdiv>>>>
menu.clubs {img-displaydisplaydisplaydisplay: only;layout: grid;cols: 4;borderborderborderborder----widthwidthwidthwidth: 0;background-color1: #ffd8ad;background-color2: #f7f6ef;}publicpublicpublicpublic classclassclassclass ClubsOA extendsextendsextendsextends BasicApplicationOperation {publicpublicpublicpublic void execute(ContextContextContextContext the_context) throwsthrowsthrowsthrows OAException {List<Club> clubs = DataHolder.getInstance().getClubsInfo();List<Map<String, String>> data = newnewnewnew ArrayList<Map<String, String>>();for (Club club : clubs) {Map<String, String> aux = newnewnewnew HashMap<String , String> ();aux.put("name", club.getName());aux.put("href", club.getHref());aux.put("image", club.getImage());data.add(aux);}the_context.setElement("clubList", data);}}
TELEFÓNICA I+D
© 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
Tables and ‘tab’ layout<<<<sectionsectionsectionsection id="main">>>><<<<sectionsectionsectionsection id="games" title="Games">>>><<<<divdivdivdiv>>>><<<<tabletabletabletable id="gamesTable" class="soccer paginate">>>><<<<thththth class="header">>>><<<<tdtdtdtd>>>>Date</</</</tdtdtdtd>>>><<<<tdtdtdtd>>>>Games</</</</tdtdtdtd>>>></</</</thththth>>>><<<<trtrtrtr repeat-nodeset="games">>>><<<<tdtdtdtd><output><output><output><output ref="date" /><//><//><//></tdtdtdtd>>>><<<<tdtdtdtd><output><output><output><output ref="game" /><//><//><//></tdtdtdtd>>>></</</</trtrtrtr>>>></</</</tabletabletabletable>>>></</</</divdivdivdiv>>>></</</</sectionsectionsectionsection>>>><<<<sectionsectionsectionsection id="standings" title="Standings">>>><<<<divdivdivdiv>>>><<<<tabletabletabletable id="standingsTable" class="soccer paginate">>>><<<<thththth class="header">>>><<<<tdtdtdtd>>>>Pos</</</</tdtdtdtd>>>><<<<tdtdtdtd>>>>Name</</</</tdtdtdtd>>>><<<<tdtdtdtd>>>>W</</</</tdtdtdtd>>>><<<<tdtdtdtd expr="mymw:belongsTo('iPhone') or mymw:belongsTo('PdaDevice') or mymw:belongsTo('PcDevice')">>>>L</</</</tdtdtdtd>>>><<<<tdtdtdtd expr="mymw:belongsTo('iPhone') or mymw:belongsTo('PdaDevice') or mymw:belongsTo('PcDevice')">>>>T</</</</tdtdtdtd>>>><<<<tdtdtdtd>>>>Pts</</</</tdtdtdtd>>>></</</</thththth>>>><<<<trtrtrtr repeat-nodeset="standings">>>><<<<tdtdtdtd><output><output><output><output ref="pos" /><//><//><//></tdtdtdtd>>>><<<<tdtdtdtd class="bold"><output><output><output><output ref="name" /><//><//><//></tdtdtdtd>>>><<<<tdtdtdtd><output><output><output><output ref="won" /><//><//><//></tdtdtdtd>>>><<<<tdtdtdtd><output><output><output><output ref="lost" /><//><//><//></tdtdtdtd>>>><<<<tdtdtdtd><output><output><output><output ref="tied" /><//><//><//></tdtdtdtd>>>><<<<tdtdtdtd class="bold"><output><output><output><output ref="pts" /><//><//><//></tdtdtdtd>>>></</</</trtrtrtr>>>></</</</tabletabletabletable>>>></</</</divdivdivdiv>>>></</</</sectionsectionsectionsection>>>></</</</sectionsectionsectionsection>>>>
publicpublicpublicpublic classclassclassclass StandingsOA extendsextendsextendsextends BasicApplicationOperation {publicpublicpublicpublic void execute(ContextContextContextContext the_context) throwsthrowsthrowsthrows OAException {List<Map<String, Object>> table = newnewnewnewArrayList<Map<String, Object>>();DataHolder dataHolder = DataHolder.getInstance();Collection<Club> list = dataHolder.getClubsInfo().values();int pos = 1;for (Iterator<Club> iterator = list.iterator(); iterator.hasNext();){Club club = iterator.next(); Map<String, Object> auxi =newnewnewnew HashMap<String, Object>();auxi.put("pos", pos++);auxi.put("name", club.getName());auxi.put("won", club.getWon());auxi.put("lost", club.getLost());auxi.put("tied", club.getTied());auxi.put("pts", club.getPoints());auxi.put("id", club.getId());table.add(auxi);}the_context.setElement("standings", table);}
TELEFÓNICA I+D
© 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
Placard: Combining text and images<<<<divdivdivdiv class="news common title.common" title="${newsTitle}" id="para1" expr="totalItems gt 0">>>><placard<placard<placard<placard id="placard" class="${newsCard}" repeat-nodeset="news">>>><p<p<p<p role="mymw:subtext" class="news bold">>>><<<<spanspanspanspan>>>>${subject}</</</</spanspanspanspan>>>> <a<a<a<a id="read" value="${value}">>>> read more...</a></a></a></a></p></p></p></p><p<p<p<p expr="dcn:deviceHeight() gt 300" role="mymw:subtext" class="news">>>><<<<spanspanspanspan class="sub">>>>Date: </</</</spanspanspanspan>>>><<<<spanspanspanspan class="sub italic">>>>${date}</</</</spanspanspanspan>>>><<<<spanspanspanspan expr="!empty(author)" class="sub">>>> and author: </</</</spanspanspanspan>>>><<<<spanspanspanspan expr="!empty(author)" class="sub italic">>>>${author}</</</</spanspanspanspan>>>></p></p></p></p><p<p<p<p expr="dcn:deviceHeight() gt 300" role="mymw:subtext" class="news">>>><<<<rangerangerangerange id="rating" expr="dcn:deviceHeight() gt 300" class="rating" start="1" end="5" step="1" ref="rating" />/>/>/></p></p></p></p><<<<imageimageimageimage expr="dcn:deviceWidth() gt 300" role="mymw:icon-left" class="news" alt="img" id="img" src="${image}" />/>/>/></placard></placard></placard></placard></</</</divdivdivdiv>>>>
placard.newsCard {layout: card;widthwidthwidthwidth: 100%;border-radius: 6px;marginmarginmarginmargin: 1;}placard.newsOddCard {backgroundbackgroundbackgroundbackground----colorcolorcolorcolor:#ffd8ad;}placard.newsEvenCard {backgroundbackgroundbackgroundbackground----colorcolorcolorcolor:#ec894b;}div.news {backgroundbackgroundbackgroundbackground----colorcolorcolorcolor: white;}image.news {transcode:true;weight-width:25;aspect-ratio:true;verticalverticalverticalvertical----alignalignalignalign: toptoptoptop;}
TELEFÓNICA I+D
© 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
Carousel : Displaying a dynamic catalogue of objects<<<<divdivdivdiv class="center common title.common" id="container" title="by Flickr">>>><<<<carouselcarouselcarouselcarousel id="myCarousel" ref="myImage">>>><<<<imageimageimageimage id="header" repeat-nodeset="gallery" src="${gallery.current.src}" class="thumbnail" alt="${gallery.current.title}"value="${gallery.current.value}" />/>/>/></</</</carouselcarouselcarouselcarousel>>>></</</</divdivdivdiv>>>>publicpublicpublicpublic classclassclassclass GalleryOA extendsextendsextendsextends BasicApplicationOperation {publicpublicpublicpublic void execute(ContextContextContextContext the_context) throwsthrowsthrowsthrows OAException {StringStringStringString club = (StringStringStringString) the_context.getElement("club");Club club = DataHolder.getInstance().getClubInfo(club);Flickr f = newnewnewnew Flickr("f9cafaaa85466f34d41bfbbbf5c671d9");SearchParameters keyword_search = newnewnewnew SearchParameters();StringStringStringString[] search_parameters = { club.getName(), "futbol" };keyword_search.setTags(search_parameters);keyword_search.setTagMode("all");List<Map<String, String>> aux = newnewnewnew ArrayList<Map<String, String>>();trytrytrytry { PhotoList photolist = f.getPhotosInterface().search(keyword_search,30, 1);int cont = 0;for (Iterator<Photo> iterator = photolist.iterator(); iterator.hasNext();) {Photo photo = iterator.next();Map<String, String> map = newnewnewnew HashMap<String, String>();map.put("src", photo.getThumbnailUrl());map.put("title", photo.getTitle());map.put("value", photo.getMediumUrl());aux.add(map); }} catchcatchcatchcatch (ExceptionExceptionExceptionException e) {log.error(e);} the_context.setElement("gallery", aux); }}
TELEFÓNICA I+D
© 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
Forms and Autocompletion<div<div<div<div id="p1" class="register common title.common" title="Buy Tickets">>>><input<input<input<input id="name" about-class="foaf:Person" ref="name" about-prop="foaf:name" class="req register">>>><label<label<label<label class="bold">>>>Full name:</label></label></label></label></input></input></input></input><input<input<input<input id="email" about-class="foaf:Person" ref="email" about-prop="foaf:mbox" class="req register">>>><label<label<label<label class="bold">>>>Email:</label></label></label></label></input></input></input></input><input<input<input<input id="telephone" about-class="foaf:Person" ref="telephone" about-prop="foaf:telephone" validationtype="Integer" class="telephone register">>>><label><label><label><label>Telephone:</label></label></label></label> </input></input></input></input><range<range<range<range id="count" start="1" end="5" step="1" ref="count" class="req">>>><label<label<label<label class="bold">>>>Tickets:</label></label></label></label></range></range></range></range><input<input<input<input id="team" ref="team" class="req register" recommendations="true" recommendationsURI="/Soccer/LOC">>>><label<label<label<label class="bold">>>>Against:</label></label></label></label></input></input></input></input></div></div></div></div> div.register {layout: grid; cols: 2;whitewhitewhitewhite----spacespacespacespace: nowrap;border-radius: 0px;}input.telephone {input-format: "\\\\****N";}input.register {sizesizesizesize: 12;}
TELEFÓNICA I+D
© 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
Statistical Graphics<<<<divdivdivdiv id="container" class="center nowrap">>>><<<<barchartbarchartbarchartbarchart id="barchart" alt="Leagues" src="resource/charts/teams/barchart.xml" ref="selectedBar" class="myChart">>>><<<<labellabellabellabel>>>>List of winners</</</</labellabellabellabel>>>><<<<captioncaptioncaptioncaption axis="x">>>>Club</</</</captioncaptioncaptioncaption>>>><<<<captioncaptioncaptioncaption axis="y">>>>Number</</</</captioncaptioncaptioncaption>>>></</</</barchartbarchartbarchartbarchart>>>></</</</divdivdivdiv>>>><<<<chartchartchartchart id="data" type="BarChart">>>><data><data><data><data><serie<serie<serie<serie name="Leagues">>>><<<<itemitemitemitem y="31"/>/>/>/><<<<itemitemitemitem y="19"/>/>/>/><<<<itemitemitemitem y="9"/>/>/>/><<<<itemitemitemitem y="6"/>/>/>/><<<<itemitemitemitem y="2"/>/>/>/><<<<itemitemitemitem y="1"/>/>/>/></serie></serie></serie></serie><serie<serie<serie<serie name="Champions">>>><<<<itemitemitemitem y="9"/>/>/>/> <<<<itemitemitemitem y="3"/>/>/>/><<<<itemitemitemitem y="0"/>/>/>/> <<<<itemitemitemitem y="0"/>/>/>/><<<<itemitemitemitem y="0"/>/>/>/> <<<<itemitemitemitem y="0"/>/>/>/></serie></serie></serie></serie></data></data></data></data><<<<axesaxesaxesaxes>>>><<<<axisxaxisxaxisxaxisx name="Club">>>><<<<valuevaluevaluevalue>>>>Real Madrid</</</</valuevaluevaluevalue>>>><<<<valuevaluevaluevalue>>>>Barcelona</</</</valuevaluevaluevalue>>>><<<<valuevaluevaluevalue>>>>Atletico</</</</valuevaluevaluevalue>>>><<<<valuevaluevaluevalue>>>>Valencia</</</</valuevaluevaluevalue>>>><<<<valuevaluevaluevalue>>>>Deportivo</</</</valuevaluevaluevalue>>>><<<<valuevaluevaluevalue>>>>Sevilla</</</</valuevaluevaluevalue>>>></</</</axisxaxisxaxisxaxisx>>>></</</</axesaxesaxesaxes>>>></</</</chartchartchartchart>>>>
TELEFÓNICA I+D
© 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal
Thank you
� Visit our main demo at
— http://195.235.93.83:8080/Soccer
� Watch our video-demo at
— http://files.morfeo-project.org/mymobileweb/public/videos/mymw/index.htm
� Visit our website
— http://mymobileweb.morfeo-project.org
� Download the software from our forge
— http://forge.morfeo-project.org/projects/mymobileweb/
� Have a look at the documentation
— http://forge.morfeo-project.org/wiki_en/index.php/MyMobileWeb_Platform
� You can get support at
© 2009 Telefónica Investigación y Desarrollo, S.A. Unipersonal