Qcon ria的技术趋势和应用趋势

由CCTV网络电视奥运台谈起

RIA的技术趋势和应用趋势

2009年4月7日

邵荣资深技术总监群硕软件

Augmentum Confidential2

关于此人

一个摄影爱好者

一个户外运动爱好者



关于此人





关于此人



一个互联网思索及实践者


案例研究及演示


6

CCTV网络电视奥运台

CCTV Olympic Game Online TV Station


演示


案例: 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”

Demos\CCTVOlympicsTorch.wmv


案例: 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


案例：CCTV网络电视奥运台

• Creative design of 360 degree rotate TV wall

• Decrease the CPU utilization from 60% to 1% through

performance tuning

Demos\CCTVOlympicsTV.wmv


案例：研发过程

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


Customer: CCTV.com OlympicTV - Complete UX design process

Interaction Design

IA & Interaction design on paper

Storyboard

Visual Style Guide

Visual Design


开发过程

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










设计思索 - 传统电视与网络电视的区别

设计基调思索点传统电视网络电视

收看习惯连续的（虽然在变化）碎片文化、快餐文化

节目容量有限、固定、不可回溯性海量、分散、聚合

控制节目手段遥控器导航链接、EPG（影响力远弱于遥控器）

收看方式固定模式的用户随心所欲的

用户群（从多到少）老年、中年、青年、少年少年、青年、中年、老年

内容接受方式推送的拉取的、自选的、跳跃的

提醒方式电视字幕 Gargets、动态效果

广告形式竞标、无序、昂贵植入式、关联性、廉价、长尾

互动模式（参与）单向、线下互动实时互动、快速注意力转移

考核指标主流文化、收视率人气、访问量、参与度、不出事

内容专业化程度严肃、高成本的相对非正式、成本低

多终端访问电视，IP电视、手机电视浏览器，PC客户端，手机等访问


传统及网络电视差异化- 涉众不同

• 传统电视用户（从多到少）– 老年、中年、青少年– 女性、男性

• 网络电视用户（从多到少）– 青少年、中年、老年– 男性、女性

• 网络电视的设计变化方向– 信息模型细分设计。例如：面向“中年”“男性”的“财经类”节

目– 风格设计。例如：

• 针对青少年的富元素富内容设计、快速转跳• 针对老年用户的“傻瓜”设计、连续性观看

Augmentum Inc. 群硕


传统及网络电视差异化- 观看节目方式变化

• 传统电视用户– 遥控器– 收看节目连续性较强– 遇广告转跳

• 网络电视用户– 碎片文化– 缺失耐心、不断转跳– EPG作用不断降低– 99.9%看、0.1%参与– 个性化需求不如想象中高（Google VS iGoogle)

• 网络电视的设计变化方向– EPG不再是网络电视核心– 快速转跳、碎片聚合– 最热门、推荐最多、观看人最多等快速导航作为更主要入口– 降低参与难度（匿名、投票模式、“顶”、记录用户身份等）– 先专注主流体验而不是个性化针对个人用户

Augmentum Inc. 群硕

About


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炒作


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


RIA Major stream (Maybe have other definitions)

RIA


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


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


OpenLaszlo

• Programming languages: LZX, ECMAScript

• Development environments: IDE4Laszlo, Notepad,

etc…

• Plugins recommended: Flash Player 7 or higher


AJAX

• Programming languages: JavaScript, XML, HTML

• Development environments: Notepad, MyEclipse,

GWT Designer, etc…

• Plugins required: none


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


RIA Development Environment

• Flex: Adobe Flex Builder

• Silverlight: Microsoft Expression Blend

• OpenLaszlo: IDE4Laszlo (Eclipse plugin)

• AJAX: Notepad, MyEclipse (Eclipse plugin)

• JavaFX: JFXBuilder


什么时候该用什么？举例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


RIA的应用趋势及思考


使用锤子的故事


Business Hat

VS

Technical Hat

by billaday

http://www.flickr.com/photos/billselak/

Keyword strategy Context Site structure On page factor Link Building

Bro

wser b

eh

avio

r

Traffic? PV?

RIA在不同的设备平台上

Unprotected Code (Flex)

安全和可用性的冲突？


好看不等于好用

• 高级用户痛恨“下一步”

• 频繁的操作不要用


WEB开发和桌面开发的不同

Augmentum Confidential51 51

Web Engineering Process


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


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


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


关于信息架构：例子，网站地图设计

三次点击原则


大型项目不太会去思考的地方


项目的技术整体架构（分层）

• 架构设计常见的角度：

– 界面架构（及框架）

– 应用架构（及框架）

– 系统架构

– 网络架构（路由器、防火墙、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


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



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


Core Management Components

• Progress Management

• Quality Management

• Defect Management

• Risk Management

• Communication Management

• Configuration Management

• Release Management

• Scope/Change management

• Human Resources Management

• Training


大型网站的运营



Processes to maintain large website(s)

• Strategic Level Processes

– Long Term

• Tactical Level Processes

– Short Term

• Operational Level

Processes

– Day-to-Day


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


关于RIA里面的“R”


User Needs

Interaction Design

Information Design

Visual Design

Experiences that create value!

+

+

+

体验工程


行为工程


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


UX Model and Processes

• Abstract -> concrete

– 目标

– 用户需求

– 功能需求

– 内容需求

– 交互设计

– 信息架构

– 信息设计

– 界面设计

– 导航设计

– 视觉设计


71


Thank You

Qcon ria的技术趋势和应用趋势

Documents