Common framework for both web and mobile applications, allowing both to be integrated easy to navigate mobile experience User Management for enrollment, preferences, and access control across devices (web, mobile phone, smart phone, iPad, etc) Role based navigation of applications providing a focused and personalized experience for users Integration of WCM (Web Content Management) to develop and manage content driven applications and provide compelling marketing content Customization of content based on user-profile allowing personalization of content targeted to individual users Analytics capabilities to measure web and mobile applications effectiveness to improve the results
New mobile theme for smartphones – lightweight, visually rich, and exploiting Webkit CSS3 visual effects Mobile navigation widgets – set of showcase samples of common mobile application navigation patterns Mobile page layouts – set of showcase samples of content interaction patterns (this covers different ways of presenting multiple portlets on the page and switching between them) Mobile WCM content templates – samples establishing best practice patterns for authoring and presenting mobile web content
1. IBM Smarter Collaboration Mobile Portal Experience Vincent Perrin, Certified Lotus Client Technical Professional for SW IOT
2. Agenda <ul><li>Business Problem
3. Technical Issues
6. Mobile Portal Accelerator
7. Perspectives for the future </li></ul>
8. <ul><li>Over 85% of new handsets will have mobile Web access by 2011
9. There will be 5.3 billion mobile subscriptions by the end of 2010 </li></ul>(that's almost 80% of the world population) <ul><li>Almost one in five global mobile subscribers have access to fast mobile Internet ( 3G or better ) services
10. The number of people accessing the mobile Internet is growing fast and is expected to overtake the PC as the most popular way to get on the Web within five years. </li></ul>Mobile Growth Exploding Source : Garnter, International Telecommunication Union, eMarketer; Internet Statistics
11. 4.6 Billion Mobile Phone Subscribers Cars PCs Telephone TVs Mobile 4.6 Billion in perspective .8B 1B 1.3B 1.7B 4.6B
12. Improve Customer Service Drive New Revenue Increase Customer Loyalty Drive Differentiation Build Brand loyalty Increase services and touch points Just in time marketing and offerings Instant communication Self Service Support Faster time to resolution Increase frequency of customer interactions Broader range of services Personalize services Competitive advantage Pervasive presence Capture customer mind share Employee Productivity Drive business productivity Process Improvements Immediate access to data Why Exceptional Mobile Experiences?
13. The Mobile Business Problem To make this….. appear on all of these…. … in a rich, useful way that engages the user and permits the productive use of portlets and applications. Different: <ul><li>Screen Sizes
15. Mark-up Languages
21. Operating Systems
22. Networks </li></ul>
23. Mobile Confusion - When to Use What? Native Mobile Applications? Smart Phones? Hybrid Mobile Applications? Web Mobile Applications? Mobile Web Sites? Multi Channel? Mobile Portal? MPA?
24. Techniques for Creating Exceptional Mobile Experiences Browser Based, Web Applications <ul><li>Accessible over the internet without need to download software
25. Uses device browser to display content </li></ul>Hybrid – Both Web and Native Components <ul><li>Native looking applications which utilize the browser interface to deliver content
26. Provide the ability to use native device features without writing code for each device </li></ul>Native <ul><li>Able to make use of phone's native features such as camera, GPS, accelerometer, calendar, etc..
27. Supports the richest of user experiences (e.g., gaming applications) </li></ul>
29. Simplify distribution and retain control over application updates , rather than waiting for customers to update or acquire their applications from the app store
30. Save costs by leveraging a common infrastructure for both web and mobile applications
31. Build engaging, native-looking apps using existing web technologies & emerging standards like html5, and CSS3
32. Save time and lower maintenance costs by developing applications for smartphones that support Webkit based mobile browsers (Android, Safari, WebOS, S60) </li></ul>Exceptional Web and Hybrid Mobile Experiences # of devices # of apps (cost) Native Hybrid + Web Economics of Web & Hybrid Approaches
33. Mobile capable sites Standard web site iPhone version of site Provide an Exceptional Web Experience on each device Don ’ t make the device conform to your site, your site should conform to the device
34. Transcoding <ul><li>Experience shows that there are too many variables between mobile devices to format useful interfaces by rules (transcoding).
35. A more customized (and customizable) solution is required. </li></ul>
36. Verizon Device agnostic presentation Common business logic Device specific requirements Limited real estate Response time Broad band limitations Time to Market Challenges and Opportunities – Verizon Wireless* Mobile Portal Accelerator Advantages * IBM Mobile Portal Accelerator (formerly WebSphere Mobile Portal Everyplace (WEMP) Minimum changes for Business logic tier Device Independent Markup Extensions Image Conversion Services Support for smart phones Time to market * F rom Customer case study session delivered at Impact 2009: Session Number 1630 Verizon Wireless' Portal Applications for Handheld Devices http://www-01.ibm.com/software/websphere/events/impact2009/
38. Bharti (Airtel.in) Challenge Servicing the exploding telecom market in India Evolving Business process Need to transform IT systems with an architecture that will scale Support thousands of different handheld devices IBM Solution WebSphere Portal and Mobile Portal IBM Service Provider Delivery Environment Architecture Results First telecom supplier to offer integrated services across India Subscriber base grew from @6 million in ’04 to over 35 million in ’06, 95 million 2009... Statistics 11,000 concurrent users 1.2 million unique users/day 200 portal page views/sec Over 100M subscribers
39. Bharti Airtel Screen Examples
40. Demo http://lotus2010.com
41. transparent white capsule Why Leverage a Portal Framework for Mobile Solution Delivery? GEL Oval MS-red GEL Oval MS-red GEL Oval MS-red GEL Oval MS-red GEL Oval MS-red GEL Oval MS-red Integrate with your back-end systems, including web content management Are personalized to a user's role, preferences, and behavior window_earth mda mobilephone2 feed-icon32x32 blue shadow arrow small Portal_6_theme_1 Are secure One common framework for mobile & web applications To create mobile applications that: Support end-user customization Can be measured and optimized using analytics Can adapt their presentation and functionality according to the device 1 2 3 4 5 6 Web Browser Mobile RSS / Atom
42. Mobile Solution Considerations ...develop, manage and deploy mobile web applications for a wide variety of devices and device types, including monochrome phones? Needs Solutions Mobile Portal Accelerator ...develop, manage and deploy web and hybrid mobile applications for smart phone and smart devices? 7,000 + Devices iPhone, iPad, Android, Blackberry WebSphere Portal Themes + WebSphere Portlet Factory Does your organization need to... OR
43. Websphere Portal Themes for Smartphones <ul><li>Extend Portal web experience to mobile devices though the use of Portal themes for smartphones </li><ul><li>Optimizes look & feel for smaller screens (site branding, navigation, page layout)
45. Two mobile theme options provided: </li></ul><ul><ul><li>Dedicated mobile themes can serve dedicated mobile pages and content
46. Single theme can detect the device and serve mobile presentation or full site and content. </li></ul></ul><ul><li>Sample themes can be downloaded on Portal Solutions catalog https://greenhouse.lotus.com/plugins/plugincatalog.nsf/assetDetails.xsp?action=editDocument&documentId=3148931F1C482700852576AC0050BD8C&Login </li></ul>
47. WebSphere Portlet Factory for Smart Phones <ul><li>Automate the creation of smartphone-optimized applications, eliminating coding and speeding time to market
48. Support your multi-channel strategy. Create once and run on multiple devices and in multiple formats: </li><ul><li>Mobile-optimized applications (iPhone, Blackberry, Android, iPad)
49. Portlets or widgets (WebSphere Portal)
50. Web application (WebSphere Application Server) </li></ul><li>Quickly integrate your back-end systems into your mobile applications with a robust set of connectors (SAP, Domino, relational DB, web/REST services, PeopleSoft, Siebel, and more)
52. Leverage the smartphone application samples to speed development and learn best practice techniques, including how to best support geolocation and phones' orientation features </li></ul>
53. Multi-channel Application Capabilities Use one common set of tools, techniques, application code ... ...and generate applications for multiple client devices WebSphere Portlet Factory ...deploy to multiple platforms... Smartphones WebSphere Portal WebSphere Application Server Tablets Desktop Browsers
54. Mobile Portal Accelerator 7 PCs & full browsers Mobile Devices Dynamically Adapted & Rendered Introducing ThinkPad® T60 and T60p notebooks ... Perfect balance of performance and portability. Intel® Centrino® Duo Mobile Technology delivers new levels of mobile performance, reliability and manageability (select models). View demo. iphone_home 081215 Lenovo desktop BB WebSphere Portal Services Mashups IBM WebSphere Portal IBM Mobile Portal Accelerator htc-tytn-ll-smartphone BlackBerry-8830-Smartphone red MOTORAZR™ V3m for U.S. Cellular htc-tytn-ll-smartphone iphone_home
55. Mobile Portal Accelerator <ul><li>WebSphere Portal extension that delivers online content and applications to virtually all mobile devices.
56. Adapt your content to over 7,200 mobile devices. MPA provides intelligent Multi-Channel Server capabilities that dynamically renders content to specific device characteristics and capabilities.
57. Speed your development with Mobile Portal Toolkit which enables both the development and testing of XDIME (XHTML with Device Independent Markup Extensions) portlets in IBM Rational Application Developer.
58. Keep pace with the latest mobile devices with IBM Mobile Portal Accelerator Device Update. Provides regular updates to mobile device definitions as they become available from device manufacturers. </li></ul>BB
59. Mobile Portal Accelerator - Mobile Multi-Channel Capabilities PCs and Full Browsers Mobile Devices Dynamically Adapted & Rendered to 7,200 Devices BB Role Based Personalization Contextual Web Experience Multi Channel Server WebSphere Portal Mobile Portal Accelerator
60. Mobile Portal Accelerator Architecture Overview
61. Runtime Interaction
62. XDIME Mobile Portal allows you to create a view in XDIME markup which MCS uses to create the required markup for the device
63. Conditional Rendering - Layouts The designer can input layout options, all using the same underlying code.
64. Layout Results These pages are rendered from the same code. MPA has optimized for each device.
65. Conditional Rendering - Devices Mobile Portal Accelerator software can dynamically use different images or text depending on the device.
66. Image Options One image policy can be used to reference multiple images. MCS can determine which image suits the device making the request .
67. Image Conversion Service <ul><li>The Image Conversion Service can: </li><ul><li>Convert images to a different format and pixel depth
68. Reduce the color depth for a smaller color palette
69. Scale images
70. Limit the output file to a size that can be handled by the device </li></ul><li>For performance: </li><ul><li>May use the Caching Proxy of WebSphere Application Server Edge Components as both a forward and reverse proxy
71. May be installed on separate application servers than WebSphere Portal and may be clustered </li></ul></ul>
72. Portlet Development <ul><li>Create one markup (XDIME) to support all mobile devices </li><ul><li>A single portlet may support both wireless (XDIME) and wired (HTML) content. </li></ul><li>XDIME elements reference Components, Theme and Layout policies
73. Application developers do not have to be concerned with updating
74. their applications for new devices
75. Mobile Portal Toolkit is used to create portlets and their policies </li><ul><li>Portlets can be tested within the toolkit
76. Eclipse-based plugins….run on Rational Application Developer </li></ul></ul>
77. Mobile Portal Toolkit Mobile Portal Toolkit Eclipse plug-in to RAD or RSA
78. Device Repository <ul><li>Rich Mobile Device Repository </li><ul><li>Over 6,500 devices and growinag…
79. 600+ attributes per device
80. Aligned with W3C CC/PP and WAP Forum UAPROF </li></ul><li>Robust Device Identification </li><ul><li>compressed XML file in RAD
81. DB based on Server (DB2, Oracle, SQL Server) </li></ul><li>Inheritance/fallback </li><ul><li>Device Attributes
82. Design Policies
83. Device update service </li></ul></ul>
84. Toolkit – Device Repository Editor <ul><li>Add custom attributes to repository using UI interface.
85. Add "pre-release" devices to repository to test in pre-production environment.
86. Interrogate device attributes to determine device capabilities. (MCS API or manually)
87. Search capability to find specific entries in repository. </li></ul>
88. Toolkit – Mobile Device Update Service <ul><li>Repository updated regularly.
89. Merge/Replace repository using this tool.
90. Mobile Device Update subscription required
91. A process is established for requesting device addition to the repository </li></ul>
92. Testing <ul><li>Rational ClearQuest with DeviceAnywhere </li><ul><li>Run Testing scripts
93. Get reports on the testing
94. Test on real devices
95. Wireless connections
96. World Wide carriers
97. Over 1200 devices
98. View over web
99. Enterprise level testing </li></ul></ul>
100. More Testing <ul><li>Real devices – get service plans from carriers </li><ul><li>Use one device from each device category </li></ul><li>Device emulators are available from device manufacturers </li><ul><li>BlackBerry
103. Not all devices may have an emulator </li></ul><li>Firefox browser with user agent switcher plugin </li><ul><li>Works for many devices but not all
104. Need UA strings – useragent.org
105. Adjust browser size to approximate device size
106. Quick and dirty - not Enterprise quality testing </li></ul></ul>
107. Administration Manage Mobile Portal from the same interface as Portal Administration
108. Navigation Filtering <ul><li>Navigation nodes (Pages, Portlets and URLs) can be configured such that they appear only on devices with particular capabilities (example: color, audio, camera)
109. Navigation Nodes can be configured such that they only appear on a certain type of device (example: PDA) or model (example: Sanyo SCP-8100).
110. Device Type Filtering is configured though Manage Mobile Pages. </li></ul>Filtering based on Device Type / Capabilities
111. JSR 168 Portlet Support JSR 168 <ul><ul><li>The Java Specification Request 168 Portlet Specification (JSR 168) standardizes how components for portal servers are to be developed
112. Portlets using this API and adhering to the specification may be deployed to any portal product that conforms to this specification
113. A JSR 168 portlet identifies each MIME type that it supports. The MIME type for XDIME is x-application/vnd.xdime+xml </li></ul></ul>
114. Struts Portlet Support Struts XDIME tag library <ul><ul><li>Is a port of the WebSphere Portal version of the Struts HTML tag library
115. Allows web developers to create dynamic XDIME based user interfaces that exist in a Struts environment
116. Sample Struts portlets are available including:
117. A “blank” Struts portlet that can be used as the base to create new Struts portlets that use the IBM portlet API.
118. A JSR 168 compliant “blank” Struts portlet that can be used as the base to create a new Struts JSR 168 portlet.
119. A sample JSR 168 Struts portlet that can be used by developers as an example of how to code a Struts JSR 168 portlet. </li></ul></ul>
120. Virtual Portal Support <ul><li>Exploits WP 6 Virtual Portal Support </li><ul><li>Use a single installation of portal to deploy multiple portals with different URLs, anonymous pages, user groups, and themes and skins.
121. Reuse existing hardware and simplified administration of multiple portals. </li></ul><li>In order to achieve different look and feels across virtual portals, MCS policies may be grouped into policy sets </li><ul><li>Each Virtual Portal can then be assigned a policy set, or use the default
122. A JSP tag selects a MCS policy from the appropriate policy set, depending on the Virtual Portal the user is browsing </li></ul><li>Provides XML Access Scripts for creating or removing MPA content from a Virtual Portal. The create script is automatically configured in the WP Virtual Portal Manager Administration Portlet </li></ul>
123. Mobile Market - Explosion of Smartphone Devices <ul><li>2010 estimated smartphone shipments worldwide will reach 270 million units, up 55% from 2009
124. Smartphones expected to reach 20% of all mobile phones shipped in 2010
125. Estimated worldwide smartphone shipments will reach 526 million units in 2014
126. Smartphones will constitute 32% of all mobile phones shipped by 2014 </li></ul>IDC - Worldwide Smartphone 2010–2014 Forecast Update: September 2010 Gartner NewsRoom - http://www.gartner.com/it/page.jsp?id=1466313 Worldwide smartphone sales to end users by operating system in 3Q10
128. <ul><li>New mobile theme for smartphones – lightweight, visually rich, and exploiting Webkit CSS3 visual effects
129. Mobile navigation widgets – set of showcase samples of common mobile application navigation patterns
130. Mobile page layouts – set of showcase samples of content interaction patterns
131. Mobile WCM content templates – samples establishing best practice patterns for authoring & presenting mobile web content
132. New mobile capabilities will be posted to the Portal solutions catalog for download </li></ul>The information on the new product is intended to outline our general product direction and it should not be relied on in making a purchasing decision. The information on the new product is for informational purposes only and may not be incorporated into any contract. The information on the new product is not a commitment, promise, or legal obligation to deliver any material, code or functionality. The development, release, and timing of any features or functionality described for our products remains at our sole discretion WebSphere Portal Mobile Themes Roadmap (mid-2011) Devices with Webkit supported browsers: Webkit is a layout engine designed to allow mobile browsers to render web pages
133. <ul><li>Provide a new set of smartphone automation components that help developers rapidly construct great-looking mobile applications that have a native smartphone look & feel : </li><ul><li>Scrolling lists with configurable display options such as thumbnail images, slide animations, icons, and multi-line text with multiple styles
134. Native-looking navigation tabs and lists
135. Access to smartphone features such as HTML 5, geo-location, and orientation
137. Input UI patterns suitable for smartphones such as selectable lists and checkbox lists
138. Buttons and other controls with a smartphone-optimized look and feel </li></ul><li>Sample application using Phonegap </li></ul>BlackBerry iPad Portlet Factory Mobile Roadmap (mid-2011) iPhone Android The information on the new product is intended to outline our general product direction and it should not be relied on in making a purchasing decision. The information on the new product is for informational purposes only and may not be incorporated into any contract. The information on the new product is not a commitment, promise, or legal obligation to deliver any material, code or functionality. The development, release, and timing of any features or functionality described for our products remains at our sole discretion
139. <ul><li>Improve out of the box integration with Websphere Portal themes
140. New smartphone focused samples and themes
141. Accelerate time to value with easy to use mobile development samples and how-to papers & articles, including integration with social features such as connections profiles
142. Improved installation
143. Tighter tooling integration with Rational Application Developer or Rational Software Architect
144. Multi-Channel Server enhancements </li></ul>Mobile Portal Accelerator Roadmap (End-2011) The information on the new product is intended to outline our general product direction and it should not be relied on in making a purchasing decision. The information on the new product is for informational purposes only and may not be incorporated into any contract. The information on the new product is not a commitment, promise, or legal obligation to deliver any material, code or functionality. The development, release, and timing of any features or functionality described for our products remains at our sole discretion