·按一下以新增文字

行動商機不是夢

掌握 Web Portal 致勝關鍵

IBM軟體事業處 | 協同作業解決方案部門

C.H. Liu (KK) 劉建輝 | 高級技術顧問

3

行動化設備 – 新的參與方式*

3 億 7 千 5 百萬 至 2016年平板數量將達到

至2016年智慧型手機數量將達到

61% 的 CIOs 將移動列為優先

Sources: IBM CIO study, Forrester Research*

53% 的員工在工作時使用他們自己的設備

10 億

在台灣 – 行動裝置(平板或智慧型手機)持有族群約佔 30.4%

預估臺灣智慧型手機普及率 至2015年將達 56.8%

截至2012年行動上網用戶數已破 650 萬戶

1A report from McKinsey & Company: Based on a survey of 250 CIOs on their mobility strategies. 2IBM 2011 Global CMO study 3IBM 2012 CEO study

行動化設備全面性影響

企業的商業模式及 IT環境

CIOs1:

77% 計劃開放 個人行動設備 存取公司資料及應用程式

25+ 多數 CIO 預期計未來兩年會部署 25 個以上的 行動應用

LOB:

客戶洞察力 成為 CEO 最優先的議題 CEO3, mobile changes everything.

CMOs 的 #2 優先議題是部署平板及 Mobile Apps2

行動化為企業帶來創新的機會…

To:

在醫生與其它服務提供者之間無縫交接，提昇醫護品質、也保護病人安全與溝通效率

From:

傳統醫療服務溝通費時

醫療

To:

建築工地主任可以隨時透過行動化設備查詢公司後勤資料與回報現場情況

From:

建築公司與遠端工作者

建築

To:

運輸公司可以透過定位服務了解貨物與貨/卡車狀態，提供更可效的維修支援、路徑規劃與後勤協調

From:

協調載程與設備維修所造成的的生產力流失

運輸

行動應用發展的思考與策略??

• 現有網站內容?

• 雙重維護人力?

• Native App?

• 目的與設計?

行動 應用程式

多元設備 網站

提供 多元設備(桌面電腦瀏灠器, 行動設設備-手機/平板) 一致/整合的Web使用體驗

需求

需求 能力

範例

提供 可完整使用行動設備硬體功能及其生態優勢之使用體驗

聚合多樣的應用及內容 內容的管理 依角色提供個人化存取

專用, 任務導向的應用程式 整合設備硬體功能 (如: GPS, 照相) 應用程式市集功能

行動應用發展策略

響應式設計 (RWD, responsive web design)

手機/平板存取的多元設備網站 • 對應設備的大小/方向,網頁設計自動調整

• 彈性的圖文版面配置及顯示

• 透過 CSS 媒體查詢來啟動不同的呈現效果

• 單一網站/主題/內容 支援多種設備顯示

• 多樣性的網站使用體驗

• 強化使用者的操作性

Login

Navigation

Slide Show

Look and Feel/ Content Layout/ Orientation

網站內容建立自動支援多元設備

以個人化功能調整多元設備顯示 • 利用個

人化技術

• 依使用者區隔/ 需求/ 喜好/ 設備等條件進行判斷

• 提供個人化動態內容

符合行動設備的外觀與體驗

• 簡化的標頭

• 頁面瀏灠模式

– 左上角

– 飛出; 下拉

• 子頁面

– 飛出; 開合

• 功能選項 (Top Nav)

– 點選/下滑; 隱藏/下滑

• 顯示元件大

– 符合個人指頭大小

Demo 1 : 支援多元設備網站

Matco Tools - Portal Mobile Experience

• 商業需求

– 行動業務銷售應用

– 各線銷售人員可在客戶所在地, 即時查找產品庫存, 價格以及利潤等資訊

• 方案

– 使用 WebSphere Portal (WP), Web Experience Factory (WEF) 整合企業與銷售資源規劃系統 (SRP)

• 效益

– 銷售代表可即時回應客戶有關產品的問題, 攺善銷售業績

開發工具支援多元設備的

一致性網站體驗

電腦 行動裝置 設備

混搭式Hybrid (Web & Native)

Websphere Portal

Web Experience Factory

Application/Portlet

開發工具支援響應式網站主題, 主要效益: •應用開發快速 •支援內容建立樣式 •支援多元設備顯示

支援響應式網站主題

Navigation

lists with

grouping

Navigation

lists Tabs

多種頁面瀏灠模式可供選擇

• 可以清單或頁籤方式瀏灠

• 可另外建立 “回上一頁” 按鍵

• 可選擇不同樣式來改變呈現的效果

HTML5 Geolocation 所在地點資訊

• 不用寫程式即可取得設備所在地資訊

• 地點資訊可在前端使用 Javascript 進行處理, 或送至後端程式處理

• 只需要在頁面中新增 – 取得地點資訊的元件

• Geolocation

– 處理地點資訊的事件處理元件

• GeoLocationClient

• GeoLocation event

支援多元設備顯示之

資料清單與明細的元件精靈

透過精靈式設定, 快速建立美觀又能依設備自動調整顯示板型、及樣式的網站應用程式

相同內容, 可依需求或設備不同, 而有不同呈現樣式的選擇.

主要效益: • 單一應用程式及內容, 維護容易 • 依前端設備不同提供最佳化顯

示效果

響應式資料呈現版面樣式

支援多元設備顯示

Native Container

Web Content

WebSphere Portal, WCM 操作界面, 應用程式, 內容,

存取後端系統 入口服務

(角色, 安控, 個人化等)

IBM Worklight 存取設備硬體功能 (照相, 通訊錄, 等...)

應用程式市集 應用程式管理, 推播訊息

Native Container

Web Content

設備硬體功能

設備硬體功能

提供混搭型行動應用

• 快速將入口網站內容及應用轉換成混搭型行動應用(Hybrid App)

• 開發快速，單一維護

• 提供使用者 NativeApp 應用操作體驗

整合手機平板照相功能,

提供網站應用程式操作相機

可以很容易地將手機/平板的”照相”功能加入應用程式中

22 © 2013 IBM Corporation

從行動應用程式中存取網站內容

同時支援存取手機平板功能

Web Mobile Web Mobile Hybrid

Responsive Themes

Mobile Platform Web Experience Framework

Content

Management

Application

Integration Personalization

App Shell

(camera,

offline, app

store)

Notifications App

Management Forms

(Portal, WCM, Forms, Analytics, Social) (IBM Worklight)

Application Server

動態行動應用程式提供最佳使用者操作體驗

Demo 2 : 行動應用開發

25

透過‘響應式網站設計技術提供手機/平板最佳化的行動瀏灠體驗

將網站使用體驗延伸至行動設備, 並享受設備硬體功能的優點, 以及行動應用市集的各項功

能

混搭型行動應用 行動網站

目前可實現之多通道能力... ...進一步延伸!

將內容與應用程式整合至統一的網站

使用界面

網站

延伸卓越網站使用體驗

© Copyright IBM Corporation 2013. All rights reserved. The information contained in these materials is provided for informational purposes only, and is provided AS IS without warranty of any kind, express or implied. IBM shall not be responsible for any damages arising out of the use of, or otherwise related to, these materials. Nothing contained in these materials is intended to, nor shall have the effect of, creating any warranties or representations from IBM or its suppliers or licensors, or altering the terms and conditions of the applicable license agreement governing the use of IBM software. References in these materials to IBM products, programs, or services do not imply that they will be available in all countries in which IBM operates. Product release dates and/or capabilities referenced in these materials may change at any time at IBM’s sole discretion based on market opportunities or other factors, and are not intended to be a commitment to future product or feature availability in any way. IBM, the IBM logo, Rational, the Rational logo, Telelogic, the Telelogic logo, and other IBM products and services are trademarks of the International Business Machines Corporation, in the United States, other countries or both. Other company, product, or service names may be trademarks or service marks of others.