由CCTV网络电视奥运台谈起
RIA的技术趋势和应用趋势
2009年4月7日
邵荣 资深技术总监 群硕软件
Augmentum Confidential2
关于此人
一个摄影爱好者
一个户外运动爱好者
一个摄影爱好者
Augmentum Confidential3
关于此人
一个摄影爱好者
一个户外运动爱好者
一个户外运动爱好者
Augmentum Confidential4
关于此人
一个摄影爱好者
一个户外运动爱好者
一个互联网思索及实践者
Augmentum Confidential5
案例研究及演示
Augmentum Confidential6
6
CCTV网络电视奥运台
CCTV Olympic Game Online TV Station
Augmentum Confidential7
演示
Augmentum Confidential8
案例: CCTV.com火炬接力网站
CCTV.com: Beijing 2008 Olympic Torch official website
– Prime contractor for the whole project
– In charge of planning, design, implementation, test, production entire life cycle
– Flash based technology
– Web 2.0 concept attract users participate in interacting at any time any place
• Real time news
• Sharing pictures / videos
• Support torch carrier
• “Torch pass by my home”
• “Torch reach Everest”
Augmentum Confidential9
案例: CCTV网络电视奥运台
CCTV.com: Olympic Online TV
– Prime contractor for the whole project
– Work closely work with Adobe US and China team
– In production in 6 months
– User friendly RIA interface
– Scalable Architecture
– Live video streaming
– Video on Demand
– Electronic Program Guide
– Geolocation integration
– Web 2.0 integration Live chat room
Mashup
Friend list and content sharing
Augmentum Confidential10
案例:CCTV网络电视奥运台
• Creative design of 360 degree rotate TV wall
• Decrease the CPU utilization from 60% to 1% through
performance tuning
Augmentum Confidential11
案例:研发过程
Feb: Requirement Gathering
Mar: Implementation Starts
May: alpha Testing
Jun: Beta Testing (Euro Cup)
Aug: Olympic TV station formally online
Agile Lifecycle
– Quick iterations
Support & Maintenance
– 7 * 24 supporting
– Content maintenance
Augmentum Confidential12
Customer: CCTV.com OlympicTV - Complete UX design process
Interaction Design
IA & Interaction design on paper
Storyboard
Visual Style Guide
Visual Design
Augmentum Confidential13
开发过程
UX Design
Performance
Requirement
Frontend
Architect
Design
Server
Architect
Design
Network
Architect
Design
Backend
Architect
Design
Function
RequirementUse Case Function Spec
Test Case
Unit Test
Function
Test
Performance
Test
Augmentum Confidential14
Augmentum Confidential15
Augmentum Confidential16
Augmentum Confidential17
Augmentum Confidential18
Augmentum Confidential19
Augmentum Confidential20
Augmentum Confidential21
Augmentum Confidential23
设计思索 - 传统电视与网络电视的区别
设计基调思索点 传统电视 网络电视
收看习惯 连续的(虽然在变化) 碎片文化、快餐文化
节目容量 有限、固定、不可回溯性 海量、分散、聚合
控制节目手段 遥控器 导航链接、EPG(影响力远弱于遥控器)
收看方式 固定模式的 用户随心所欲的
用户群(从多到少) 老年、中年、青年、少年 少年、青年、中年、老年
内容接受方式 推送的 拉取的、自选的、跳跃的
提醒方式 电视字幕 Gargets、动态效果
广告形式 竞标、无序、昂贵 植入式、关联性、廉价、长尾
互动模式(参与) 单向、线下互动 实时互动、快速注意力转移
考核指标 主流文化、收视率 人气、访问量、参与度、不出事
内容专业化程度 严肃、高成本的 相对非正式、成本低
多终端访问 电视,IP电视、手机电视 浏览器,PC客户端,手机等访问
Augmentum Confidential24
传统及网络电视差异化- 涉众不同
• 传统电视用户(从多到少)– 老年、中年、青少年– 女性、男性
• 网络电视用户(从多到少)– 青少年、中年、老年– 男性、女性
• 网络电视的设计变化方向– 信息模型细分设计。 例如:面向“中年”“男性”的“财经类”节
目– 风格设计。例如:
• 针对青少年的富元素富内容设计、快速转跳• 针对老年用户的“傻瓜”设计、连续性观看
Augmentum Inc. 群硕
Augmentum Confidential25
传统及网络电视差异化- 观看节目方式变化
• 传统电视用户– 遥控器– 收看节目连续性较强– 遇广告转跳
• 网络电视用户– 碎片文化– 缺失耐心、不断转跳– EPG作用不断降低– 99.9%看、0.1%参与– 个性化需求不如想象中高 (Google VS iGoogle)
• 网络电视的设计变化方向– EPG不再是网络电视核心– 快速转跳、碎片聚合– 最热门、推荐最多、观看人最多等快速导航作为更主要入口– 降低参与难度(匿名、投票模式、“顶”、记录用户身份等)– 先专注主流体验而不是个性化针对个人用户
Augmentum Inc. 群硕
About
Augmentum Confidential27
RIA in WikiPedia
• Rich Internet applications (RIAs) are web
applications that have some of the
characteristics of desktop applications, typically
delivered by way of an Ajax framework,
proprietary web browser plug-ins, advanced
javascript compiler technology, or independently
via sandboxes or virtual machines
• RIAs typically:
– run in a web browser, or do not require software
installation
Back Button and Refresh
视觉词汇State management
Browser Sandbox Business Logic in UI
Component Level Logic
动画
对于桌面应用开发者 对于互联网应用开发者
RIA – 桌面开发- Web开发?
Limited Runtime
Service Orientation
Non-text based layout炒作
Augmentum Confidential29
RIA Technology Map
29
Rich Internet Applications
Runtime-based
Browser-based
Plug-in
WPF AIR Java Web Start
AJAXSilverlight Flex JavaFX
JavaScript
AJAX
Frameworks
Custom AJAX Microsoft Adobe Sun
WPF
Silverlight
Microsoft
Augmentum Confidential30
RIA Major stream (Maybe have other definitions)
RIA
Augmentum Confidential31
Flex
• Programming languages: MXML & ActionScript 3.0
• Development environments: Flex Builder (Eclipse
based), SEPY, Notepad, etc…
• Plugins required: Flash Player 9.0.16 or higher
Augmentum Confidential32
Silverlight
• Programming languages: XAML, C#, JS, Ruby
• Development environments: Microsoft Expression
Blend 2, Microsoft Visual Studio, etc…
• Plugins required: Silverlight Runtime 1.0 or higher
Augmentum Confidential33
OpenLaszlo
• Programming languages: LZX, ECMAScript
• Development environments: IDE4Laszlo, Notepad,
etc…
• Plugins recommended: Flash Player 7 or higher
Augmentum Confidential34
AJAX
• Programming languages: JavaScript, XML, HTML
• Development environments: Notepad, MyEclipse,
GWT Designer, etc…
• Plugins required: none
Augmentum Confidential35
JavaFX
• Programming languages: JavaFX Script, Java
• Development environments: JavaFXPad, NetBeans
6.0, JFXBuilder, Notepad, etc…
• Plugins required: Java Runtime Environment (JRE) 1.5
or higher
Augmentum Confidential36
RIA Development Environment
• Flex: Adobe Flex Builder
• Silverlight: Microsoft Expression Blend
• OpenLaszlo: IDE4Laszlo (Eclipse plugin)
• AJAX: Notepad, MyEclipse (Eclipse plugin)
• JavaFX: JFXBuilder
Augmentum Confidential37
什么时候该用什么? 举例Flex VS JavaScript
• Use the Best Tool for the Job
– Open Web: Ajax
– Video and Rich Media: Flex
– HTML Rendering: Ajax
– Vector Graphics and Bitmap Manipulation: Flex
– Accessibility: Flex
Augmentum Confidential38
RIA的应用趋势及思考
Augmentum Confidential39
使用锤子的故事
Augmentum Confidential40
Business Hat
VS
Technical Hat
by billaday
Keyword strategy Context Site structure On page factor Link Building
Bro
wser b
eh
avio
r
Traffic? PV?
RIA在不同的设备平台上
Unprotected Code (Flex)
安全和可用性的冲突?
Augmentum Confidential49
好看不等于好用
• 高级用户痛恨“下一步”
• 频繁的操作不要用
Augmentum Confidential50
WEB开发和桌面开发的不同
Augmentum Confidential51 51
Web Engineering Process
Augmentum Confidential52
Web Engineering versus Software Engineering
Web Engineering Software Engineering
Heavily content-driven Function-driven
Hypertext to access information Structured processes to finish actions
UX is the king UX is a plus
Self-explanatory operation User guide/help file
Change is the nature Requirements relatively stable
Evolve continuously, always Beta Planned, chronologically spaced
releases
Unpredictable load Relative Unpredictable or pre-difined
Updates to public within days or hours Weeks or months as release cycle
Augmentum Confidential53
Web Engineering versus Software Engineering
Web Engineering Software Engineering
Heavily content-driven Function-driven
Hypertext to access information Structured processes to finish actions
UX is the king UX is a plus
Self-explanatory operation User guide/help file
Change is the nature Requirements relatively stable
Evolve continuously, always Beta Planned, chronologically spaced
releases
Unpredictable load Relative Unpredictable or pre-difined
Updates to public within days or hours Weeks or months as release cycle
Incremental delivery
Frequent changes
Short timeline
Augmentum Confidential54
Web Engineering – 信息架构
• Information Architecture (IA) is a
process of identifying the
objectives for building a Web site
and then constructing a
comprehensive plan, or blueprint
before development begins.
» Define Goals for the Web Site
» Define the Audience
» Define the Site Content
» Define the Site Structure
» Define the Site Structure
Hierarchy and Navigation
Augmentum Confidential55
关于信息架构:例子,网站地图设计
三次点击原则
Augmentum Confidential56
大型项目不太会去思考的地方
Augmentum Confidential57
项目的技术整体架构(分层)
• 架构设计常见的角度:
– 界面架构(及框架)
– 应用架构 (及框架)
– 系统架构
– 网络架构 (路由器、防火墙、CDN、网络层安全等等)
Architecture Design
Photo by Keith Marshall http://www.flickr.com/photos/keithmarshall/432924465/
•Performance•Scalability
•Vertical (get bigger)•Horizontal (get more)
•Caching•LB•Query•Storage•Security•Multiple Site issue•HA•…
Augmentum Confidential 58
Augmentum Confidential59
YSlow! High performance 14条军规(更新)
• Make fewer HTTP requests
• Use a CDN• Add an Expires
header• Gzip components• Put CSS at the top• Move JS to the
bottom• Avoid CSS
expressions
• Make JS and CSS
external
• Reduce DNS lookups
• Minify JS
• Avoid redirects
• Remove duplicate
scripts
• Turn off ETags
• Make AJAX
cacheable and small
Augmentum Confidential 59
Augmentum Confidential60
After YSlow “A”? - 20条新军规
1. Flush the buffer early2. Use GET for AJAX requests3. Post-load components
4. Preload components5. Reduce the number of DOM elements6. Split components across domains7. Minimize the number of iframes8. No 404s
9. Reduce cookie size10. Use cookie-free domains for components11. Minimize DOM access12. Develop smart event handlers 13. Choose <link> over @import
14. Avoid filters15. Optimize images16. Optimize CSS sprites17. Don't scale images in HTML18. Make favicon.ico small and cacheable
19. Keep components under 25K20. Pack components into a multipart document
content
javascript
javascript
content
content
content
content
server
server
css
css
images
images
images
images
mobile
mobile
cookie
cookie
content
http://developer.yahoo.com/performance
Augmentum Confidential62
Core Management Components
• Progress Management
• Quality Management
• Defect Management
• Risk Management
• Communication Management
• Configuration Management
• Release Management
• Scope/Change management
• Human Resources Management
• Training
Augmentum Confidential63
大型网站的运营
Augmentum Confidential 63
Augmentum Confidential64
Processes to maintain large website(s)
• Strategic Level Processes
– Long Term
• Tactical Level Processes
– Short Term
• Operational Level
Processes
– Day-to-Day
Augmentum Confidential65
Maintenance type and key activities
• Categories of maintenance– Corrective maintenance
– Adaptive maintenance
– Perfective maintenance
– Preventive maintenance
• Key maintenance activates– Transition
– Service Level Agreements (SLAs)
– Modification Request and Problem Report Help
– Service Request Prioritization
– Modification Request acceptance/rejection
Augmentum Confidential66
关于RIA里面的“R”
Augmentum Confidential67
User Needs
Interaction Design
Information Design
Visual Design
Experiences that create value!
+
+
+
体验工程
Augmentum Confidential68
行为工程
Augmentum Confidential69
UX Methods and Deliverables
• Ethnographic research
• Market or brand research
• Focus groups
• Competitive analysis
• Wire frames & story boards
• Lo-Fi prototyping
• Participatory design
• Mood board
• Concept testing
• Card sorting
• Use case and task analysis
• Hi-fi prototyping
• Visual designs
• Lab tests and RITE studies
• Usability inspection
• Usage log analysis
• Data mining
• A/B tests
• Customer feedback analysis
• User satisfaction survey
• Desirability study
• Loyalty study
• Benchmark testing
• Personas
• Use cases
• Research report
• Concept briefs
• Wire frames
• Concept prototype
• Conceptual models
• Site map
• Design spec
• UI prototype
• Style guide
• Usability report
• UX reviews
• UX report card
• Research report
• User acceptance report
• Survey report
Understand Conceive Design
Methods
Deliverables
Develop
Augmentum Confidential70
UX Model and Processes
• Abstract -> concrete
– 目标
– 用户需求
– 功能需求
– 内容需求
– 交互设计
– 信息架构
– 信息设计
– 界面设计
– 导航设计
– 视觉设计
Augmentum Confidential71
71
Augmentum Confidential72
Thank You