由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