新一代门户移动访问实现 - IBM · 2013-03-01 · 技术实现途径...
Transcript of 新一代门户移动访问实现 - IBM · 2013-03-01 · 技术实现途径...
![Page 1: 新一代门户移动访问实现 - IBM · 2013-03-01 · 技术实现途径 应用需要多设备适配,设备 类型种类繁多 客户需求 7,500 + Devices IBM Mobile Portal](https://reader030.fdocuments.in/reader030/viewer/2022033122/5eca4a8db20e5b012e34c002/html5/thumbnails/1.jpg)
![Page 2: 新一代门户移动访问实现 - IBM · 2013-03-01 · 技术实现途径 应用需要多设备适配,设备 类型种类繁多 客户需求 7,500 + Devices IBM Mobile Portal](https://reader030.fdocuments.in/reader030/viewer/2022033122/5eca4a8db20e5b012e34c002/html5/thumbnails/2.jpg)
新一代门户移动访问实现
卓毓鸣
![Page 3: 新一代门户移动访问实现 - IBM · 2013-03-01 · 技术实现途径 应用需要多设备适配,设备 类型种类繁多 客户需求 7,500 + Devices IBM Mobile Portal](https://reader030.fdocuments.in/reader030/viewer/2022033122/5eca4a8db20e5b012e34c002/html5/thumbnails/3.jpg)
目录
IBM Portal在IBM Mobile解决方案中的定位 IBM 门户支持的移动应用场景 技术实现 IBM Portal Moble Theme (移动主题) 技术实现 Web Experience Factory 开发Web Mobile App 技术实现 Worklight 集成Hybrid App
第 页
![Page 4: 新一代门户移动访问实现 - IBM · 2013-03-01 · 技术实现途径 应用需要多设备适配,设备 类型种类繁多 客户需求 7,500 + Devices IBM Mobile Portal](https://reader030.fdocuments.in/reader030/viewer/2022033122/5eca4a8db20e5b012e34c002/html5/thumbnails/4.jpg)
独立的移动 应用程序
多渠道的 Web站点
集成的、个性化站点 多应用的聚集,多内容的聚合 多渠道、多设备的支持 跨渠道的授权与认证
定制的独立应用程序 例如:IBM Connections, Sametime 等
WebSphere Portal & Mobile Portal Accelerator
Application Server
核心特性
平台
样例
Worklight ( 存在 hybrid (混合)需求)
统一的通用技术框架支撑多设备的Web体验
设备能力的应用与设备的管控
![Page 5: 新一代门户移动访问实现 - IBM · 2013-03-01 · 技术实现途径 应用需要多设备适配,设备 类型种类繁多 客户需求 7,500 + Devices IBM Mobile Portal](https://reader030.fdocuments.in/reader030/viewer/2022033122/5eca4a8db20e5b012e34c002/html5/thumbnails/5.jpg)
技术实现途径
应用需要多设备适配,设备类型种类繁多
客户需求
7,500 + Devices
IBM Mobile Portal Accelerator
Portal Mobile Themes +
WebSphere Experience Factory +
第三方工具(例如: PhoneGap)
扩展Web体验到特定的机型
简单的设备本地资源调用
快速开发,部署混合应用或客户端应用程序,并提供设备本地资源的调用
编写一次,多设备适配。 Browsers and Smartphones, Tablets, Kiosks, even Web TV
WorkLight +
WebSphere Experience Factory +
Portal Mobile Themes
解决途径
![Page 6: 新一代门户移动访问实现 - IBM · 2013-03-01 · 技术实现途径 应用需要多设备适配,设备 类型种类繁多 客户需求 7,500 + Devices IBM Mobile Portal](https://reader030.fdocuments.in/reader030/viewer/2022033122/5eca4a8db20e5b012e34c002/html5/thumbnails/6.jpg)
目录
IBM Portal在IBM Mobile解决方案中的定位 IBM 门户支持的移动应用场景 技术实现 IBM Portal Moble Theme (移动主题) 技术实现 Web Experience Factory 开发Web Mobile App 技术实现 Worklight 集成Hybrid App
第 页
![Page 7: 新一代门户移动访问实现 - IBM · 2013-03-01 · 技术实现途径 应用需要多设备适配,设备 类型种类繁多 客户需求 7,500 + Devices IBM Mobile Portal](https://reader030.fdocuments.in/reader030/viewer/2022033122/5eca4a8db20e5b012e34c002/html5/thumbnails/7.jpg)
Mobile 是方向,但繁杂
平台选择:Android, iOS, WinPhone...外加一些小众手机
屏幕适配: 480*320(low end),800*480(milestone2,小米
),1280X720(galaxy),1280X800(Note),960x640(ip4),1136 x
640(ip5),1024x768(mini,ip2),2048×1536(newip)
应用场景: OA?业务应用?对外:供应商?客户?
支持设备策略:特定平台 VS. 所有手持设备
开发团队技术要求: Java, Android sdk, Obj-c, cocoa, html5, css3,
js(dojo,jquery...)
开发成本: 专业手机开发人员,web 开发人员,UI 设计人员
![Page 8: 新一代门户移动访问实现 - IBM · 2013-03-01 · 技术实现途径 应用需要多设备适配,设备 类型种类繁多 客户需求 7,500 + Devices IBM Mobile Portal](https://reader030.fdocuments.in/reader030/viewer/2022033122/5eca4a8db20e5b012e34c002/html5/thumbnails/8.jpg)
IBM门户移动应用场景 Demo
![Page 9: 新一代门户移动访问实现 - IBM · 2013-03-01 · 技术实现途径 应用需要多设备适配,设备 类型种类繁多 客户需求 7,500 + Devices IBM Mobile Portal](https://reader030.fdocuments.in/reader030/viewer/2022033122/5eca4a8db20e5b012e34c002/html5/thumbnails/9.jpg)
© 2012 IBM Corporation
桌面浏览器 手机浏览器 Worklight
Hybrid 本地应用
防火墙 & 反向代理
Worklight Server 通知 应用授权 应用有效期 应用升级 等...
WebSphere Portal Server 个性化,权限管控,定制,其它...
IBM Connections 社交服务
企业应用与服务
HTML/JS/CSS, Ajax REST Services
安全检查、 通知注册等….
Web 内容 Portlets 多渠道、多设备Web应用程序
Demo总结
![Page 10: 新一代门户移动访问实现 - IBM · 2013-03-01 · 技术实现途径 应用需要多设备适配,设备 类型种类繁多 客户需求 7,500 + Devices IBM Mobile Portal](https://reader030.fdocuments.in/reader030/viewer/2022033122/5eca4a8db20e5b012e34c002/html5/thumbnails/10.jpg)
桌面浏览器 手机浏览器 平板浏览器
防火墙 & 反向代理
Portal Server/WEF 个性化 权限管控 定制 Web 内容 其它...
业务集成层 / 公共服务提供
Html/JS/CSS 连同 Ajax 一起,提供REST Services
服务提供建议使用Rest Services 数据格式建议使用RSS/Atom/JSON
Web内容管理 模板化展示 Web内容管理 其它...
HTML/CSS/JS
传统手机浏览器
Mobile Web场景:仅有Web形式的内容
![Page 11: 新一代门户移动访问实现 - IBM · 2013-03-01 · 技术实现途径 应用需要多设备适配,设备 类型种类繁多 客户需求 7,500 + Devices IBM Mobile Portal](https://reader030.fdocuments.in/reader030/viewer/2022033122/5eca4a8db20e5b012e34c002/html5/thumbnails/11.jpg)
Worklight Hybrid 应用
Worklight 服务器 通知 应用授权 应用有效期 等...
安全检查, 通知,等..
Web + Hybrid场景 :仅有Web形式的内容
桌面浏览器 手机浏览器 平板浏览器
防火墙 & 反向代理
Portal Server/WEF 个性化 权限管控 定制 Web 内容 其它...
业务集成层 / 公共服务提供
Html/JS/CSS 连同 Ajax 一起,提供REST Services
服务提供建议使用Rest Services 数据格式建议使用RSS/Atom/JSON
Web内容管理 模板化展示 Web内容管理 其它...
HTML/CSS/JS
![Page 12: 新一代门户移动访问实现 - IBM · 2013-03-01 · 技术实现途径 应用需要多设备适配,设备 类型种类繁多 客户需求 7,500 + Devices IBM Mobile Portal](https://reader030.fdocuments.in/reader030/viewer/2022033122/5eca4a8db20e5b012e34c002/html5/thumbnails/12.jpg)
Worklight 服务器 通知 应用授权 应用有效期 等...
Adapter
Web + Hybrid: 部分的设备资源调用
Worklight Hybrid 应用
安全检查, 通知,等..
桌面浏览器 手机浏览器 平板浏览器
防火墙 & 反向代理
Portal Server/WEF 个性化 权限管控 定制 Web 内容 其它...
业务集成层 / 公共服务提供
Html/JS/CSS 连同 Ajax 一起,提供REST Services
服务提供建议使用Rest Services 数据格式建议使用RSS/Atom/JSON
Web内容管理 模板化展示 Web内容管理 其它...
HTML/CSS/JS
Some HTML/JS/CSS
JDBC/WebService
![Page 13: 新一代门户移动访问实现 - IBM · 2013-03-01 · 技术实现途径 应用需要多设备适配,设备 类型种类繁多 客户需求 7,500 + Devices IBM Mobile Portal](https://reader030.fdocuments.in/reader030/viewer/2022033122/5eca4a8db20e5b012e34c002/html5/thumbnails/13.jpg)
目录
IBM Portal在IBM Mobile解决方案中的定位 IBM 门户支持的移动应用场景 技术实现 IBM Portal Moble Theme (移动主题) 技术实现 Web Experience Factory 开发Web Mobile App 技术实现 Worklight 集成Hybrid App
第 页
![Page 14: 新一代门户移动访问实现 - IBM · 2013-03-01 · 技术实现途径 应用需要多设备适配,设备 类型种类繁多 客户需求 7,500 + Devices IBM Mobile Portal](https://reader030.fdocuments.in/reader030/viewer/2022033122/5eca4a8db20e5b012e34c002/html5/thumbnails/14.jpg)
IBM WebSphere Portal Mobile Theme 体验
站点导航
外观
页面布局
Mobile theme – 轻量级, 丰富的特效, CSS3 视觉效果
Navigation widgets – 多种通用的Mobile页面导航模式
Page layouts – 多种通用的Mobile应用交互模式
可以基于 dojo.mobile, jQuery, etc.. 扩展
![Page 15: 新一代门户移动访问实现 - IBM · 2013-03-01 · 技术实现途径 应用需要多设备适配,设备 类型种类繁多 客户需求 7,500 + Devices IBM Mobile Portal](https://reader030.fdocuments.in/reader030/viewer/2022033122/5eca4a8db20e5b012e34c002/html5/thumbnails/15.jpg)
旋转 滚动 向下钻取
Mobile 导航
![Page 16: 新一代门户移动访问实现 - IBM · 2013-03-01 · 技术实现途径 应用需要多设备适配,设备 类型种类繁多 客户需求 7,500 + Devices IBM Mobile Portal](https://reader030.fdocuments.in/reader030/viewer/2022033122/5eca4a8db20e5b012e34c002/html5/thumbnails/16.jpg)
• 单击此处编辑母版文本样式 – 第二级
• 第三级 – 第四级
» 第五级 • 单击此处编辑母版文本样式 – 第二级
• 第三级 – 第四级
» 第五级
• 单击此处编辑母版文本样式 – 第二级
• 第三级 – 第四级
» 第五级
旋转 选择
交换 折叠 Mobile布局
![Page 17: 新一代门户移动访问实现 - IBM · 2013-03-01 · 技术实现途径 应用需要多设备适配,设备 类型种类繁多 客户需求 7,500 + Devices IBM Mobile Portal](https://reader030.fdocuments.in/reader030/viewer/2022033122/5eca4a8db20e5b012e34c002/html5/thumbnails/17.jpg)
Mobile导航 与 Mobile布局的组合
页面导航: 旋转
内容布局: 旋转
页面导航: 旋转
内容布局: 折叠
页面导航: 旋转
内容布局: 选择
Mobile Theme 下载地址 https://greenhouse.lotus.com/plugins/plugincatalog.nsf/assetDetails.xsp?action=editDocument&documentId=03AF9B252CDED3B28525791100581049
![Page 18: 新一代门户移动访问实现 - IBM · 2013-03-01 · 技术实现途径 应用需要多设备适配,设备 类型种类繁多 客户需求 7,500 + Devices IBM Mobile Portal](https://reader030.fdocuments.in/reader030/viewer/2022033122/5eca4a8db20e5b012e34c002/html5/thumbnails/18.jpg)
多种分辨率的支持
可以基于设备的宽、类型、分辨率动态的适配
![Page 19: 新一代门户移动访问实现 - IBM · 2013-03-01 · 技术实现途径 应用需要多设备适配,设备 类型种类繁多 客户需求 7,500 + Devices IBM Mobile Portal](https://reader030.fdocuments.in/reader030/viewer/2022033122/5eca4a8db20e5b012e34c002/html5/thumbnails/19.jpg)
可以基于需求扩展支持的设备类型
CSS meida query and portal device classes
![Page 20: 新一代门户移动访问实现 - IBM · 2013-03-01 · 技术实现途径 应用需要多设备适配,设备 类型种类繁多 客户需求 7,500 + Devices IBM Mobile Portal](https://reader030.fdocuments.in/reader030/viewer/2022033122/5eca4a8db20e5b012e34c002/html5/thumbnails/20.jpg)
可以基于需求定制页面式样 2.样式文件,可以修改css 文件
3.呈现的内容可以修改jsp文件。
1.相关资源位置 CSS 、JS在WebDAV目录: http://<Hostname>:10039/wps/mycontenthandler/dav/fs-type1/themes/mobile JSP在目录: WebSphere\PortalServer\theme\wp.theme.themes\mobile\installedApps\wp.theme.themes.mobile.ear
![Page 21: 新一代门户移动访问实现 - IBM · 2013-03-01 · 技术实现途径 应用需要多设备适配,设备 类型种类繁多 客户需求 7,500 + Devices IBM Mobile Portal](https://reader030.fdocuments.in/reader030/viewer/2022033122/5eca4a8db20e5b012e34c002/html5/thumbnails/21.jpg)
目录
IBM Portal在IBM Mobile解决方案中的定位 IBM 门户支持的移动应用场景 技术实现 IBM Portal Moble Theme (移动主题) 技术实现 Web Experience Factory 开发Web Mobile App 技术实现 Worklight 集成Hybrid App
![Page 22: 新一代门户移动访问实现 - IBM · 2013-03-01 · 技术实现途径 应用需要多设备适配,设备 类型种类繁多 客户需求 7,500 + Devices IBM Mobile Portal](https://reader030.fdocuments.in/reader030/viewer/2022033122/5eca4a8db20e5b012e34c002/html5/thumbnails/22.jpg)
Web Experience Factory
支持2种移动应用开发模式
利用Mobile Theme的
样式及布局
客户端架构
利用概要文件 与 模板
快速构建移动应用
库和模板
Web Experience Factory
代码生成引擎 Model Builder 1 Builder 2 Etc.
Application code
![Page 23: 新一代门户移动访问实现 - IBM · 2013-03-01 · 技术实现途径 应用需要多设备适配,设备 类型种类繁多 客户需求 7,500 + Devices IBM Mobile Portal](https://reader030.fdocuments.in/reader030/viewer/2022033122/5eca4a8db20e5b012e34c002/html5/thumbnails/23.jpg)
基于dojo mobile (1.7)
![Page 24: 新一代门户移动访问实现 - IBM · 2013-03-01 · 技术实现途径 应用需要多设备适配,设备 类型种类繁多 客户需求 7,500 + Devices IBM Mobile Portal](https://reader030.fdocuments.in/reader030/viewer/2022033122/5eca4a8db20e5b012e34c002/html5/thumbnails/24.jpg)
© 2012 IBM Corporation
Web Mobile App 的开发——如何做? 1/ 创建概要文件......
![Page 25: 新一代门户移动访问实现 - IBM · 2013-03-01 · 技术实现途径 应用需要多设备适配,设备 类型种类繁多 客户需求 7,500 + Devices IBM Mobile Portal](https://reader030.fdocuments.in/reader030/viewer/2022033122/5eca4a8db20e5b012e34c002/html5/thumbnails/25.jpg)
© 2012 IBM Corporation
Web Mobile App 的开发——如何做? 2/ 概要文件条目绑定访问设备......
![Page 26: 新一代门户移动访问实现 - IBM · 2013-03-01 · 技术实现途径 应用需要多设备适配,设备 类型种类繁多 客户需求 7,500 + Devices IBM Mobile Portal](https://reader030.fdocuments.in/reader030/viewer/2022033122/5eca4a8db20e5b012e34c002/html5/thumbnails/26.jpg)
Web Mobile App 的开发——如何做?
3/ 设备逻辑判断............ Main主线程
设备页面定义
![Page 27: 新一代门户移动访问实现 - IBM · 2013-03-01 · 技术实现途径 应用需要多设备适配,设备 类型种类繁多 客户需求 7,500 + Devices IBM Mobile Portal](https://reader030.fdocuments.in/reader030/viewer/2022033122/5eca4a8db20e5b012e34c002/html5/thumbnails/27.jpg)
Web Mobile App 的开发——添加导航页 4/ Web Mobile 页面定制............
![Page 28: 新一代门户移动访问实现 - IBM · 2013-03-01 · 技术实现途径 应用需要多设备适配,设备 类型种类繁多 客户需求 7,500 + Devices IBM Mobile Portal](https://reader030.fdocuments.in/reader030/viewer/2022033122/5eca4a8db20e5b012e34c002/html5/thumbnails/28.jpg)
Mobile Portlet 的开发-效果
![Page 29: 新一代门户移动访问实现 - IBM · 2013-03-01 · 技术实现途径 应用需要多设备适配,设备 类型种类繁多 客户需求 7,500 + Devices IBM Mobile Portal](https://reader030.fdocuments.in/reader030/viewer/2022033122/5eca4a8db20e5b012e34c002/html5/thumbnails/29.jpg)
Web Mobile App 的开发——图像设置 4/ Web Mobile 页面定制............
![Page 30: 新一代门户移动访问实现 - IBM · 2013-03-01 · 技术实现途径 应用需要多设备适配,设备 类型种类繁多 客户需求 7,500 + Devices IBM Mobile Portal](https://reader030.fdocuments.in/reader030/viewer/2022033122/5eca4a8db20e5b012e34c002/html5/thumbnails/30.jpg)
Mobile Portlet 的开发——效果
![Page 31: 新一代门户移动访问实现 - IBM · 2013-03-01 · 技术实现途径 应用需要多设备适配,设备 类型种类繁多 客户需求 7,500 + Devices IBM Mobile Portal](https://reader030.fdocuments.in/reader030/viewer/2022033122/5eca4a8db20e5b012e34c002/html5/thumbnails/31.jpg)
Web Mobile App 的开发——报表展现 4/ Web Mobile 页面定制............
![Page 32: 新一代门户移动访问实现 - IBM · 2013-03-01 · 技术实现途径 应用需要多设备适配,设备 类型种类繁多 客户需求 7,500 + Devices IBM Mobile Portal](https://reader030.fdocuments.in/reader030/viewer/2022033122/5eca4a8db20e5b012e34c002/html5/thumbnails/32.jpg)
Web Mobile App 的开发——效果
![Page 33: 新一代门户移动访问实现 - IBM · 2013-03-01 · 技术实现途径 应用需要多设备适配,设备 类型种类繁多 客户需求 7,500 + Devices IBM Mobile Portal](https://reader030.fdocuments.in/reader030/viewer/2022033122/5eca4a8db20e5b012e34c002/html5/thumbnails/33.jpg)
目录
IBM Portal在IBM Mobile解决方案中的定位 IBM 门户支持的移动应用场景 技术实现 IBM Portal Moble Theme (移动主题) 技术实现 Web Experience Factory 开发Web Mobile App 技术实现 Worklight 集成Hybrid App
![Page 34: 新一代门户移动访问实现 - IBM · 2013-03-01 · 技术实现途径 应用需要多设备适配,设备 类型种类繁多 客户需求 7,500 + Devices IBM Mobile Portal](https://reader030.fdocuments.in/reader030/viewer/2022033122/5eca4a8db20e5b012e34c002/html5/thumbnails/34.jpg)
© 2012 IBM Corporation
本地客户端容器
Web应用内容
WebSphere Portal, WCM 集成的、个性化站点
多应用的聚集,多内容的聚合 多渠道、多设备的支持 跨渠道的授权与认证
IBM Worklight 访问设备特有的本地能力
(相机, 本地联系人,等...) 应用商城 应用管理 通知
本地客户端容器
Web 应用内容
设备本地能力
设备本地能力
Worklight 与 IBM Portal的整合
![Page 35: 新一代门户移动访问实现 - IBM · 2013-03-01 · 技术实现途径 应用需要多设备适配,设备 类型种类繁多 客户需求 7,500 + Devices IBM Mobile Portal](https://reader030.fdocuments.in/reader030/viewer/2022033122/5eca4a8db20e5b012e34c002/html5/thumbnails/35.jpg)
THANK YOU