Qcon ria的技术趋势和应用趋势
Upcoming SlideShare
Loading in...5
×

Like this? Share it with your network

Share

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

  • 1,063 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads

Views

Total Views
1,063
On Slideshare
1,063
From Embeds
0
Number of Embeds
0

Actions

Shares
Downloads
8
Comments
0
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. RIA的技术趋势和应用趋势由CCTV网络电视奥运台谈起 2009年4月7日 邵荣 资深技术总监 群硕软件
  • 2. 关于此人 一个摄影爱好者 一 个 一个户外运动爱好者 摄 影 爱 好 者2 Augmentum Confidential
  • 3. 关于此人 一 一个摄影爱好者 个 户 一个户外运动爱好者 外 运 动 爱 好 者3 Augmentum Confidential
  • 4. 关于此人 一 一个摄影爱好者 个 互 联 一个户外运动爱好者 网 思 索 及 实 践 者4 Augmentum Confidential
  • 5. 案例研究及演示5 Augmentum Confidential
  • 6. CCTV网络电视奥运台 CCTV Olympic Game Online TV Station6 Augmentum Confidential
  • 7. 演示7 Augmentum Confidential
  • 8. 案例: 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”8 Augmentum Confidential
  • 9. 案例: 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 sharing9 Augmentum Confidential
  • 10. 案例:CCTV网络电视奥运台 • Creative design of 360 degree rotate TV wall • Decrease the CPU utilization from 60% to 1% through performance tuning10 Augmentum Confidential
  • 11. 案例:研发过程 Agile Lifecycle – Quick iterations Support & Maintenance – 7 * 24 supporting – Content maintenance Aug: Jun: Beta Olympic Testing TV station May: alpha (Euro Cup) formally Testing online Mar: Implemen tation Feb: Starts Require ment Gatheri ng11 Augmentum Confidential
  • 12. Customer: CCTV.com OlympicTV - Complete UX design process IA & Interaction design on paper Storyboard Visual Style Guide Interaction Design Visual Design12 Augmentum Confidential
  • 13. 开发过程 Frontend UX Design Architect Function Design Requirement Use Case Function Spec Unit Test Test Case Function Test Server Architect Design Performance Network Performance Requirement Architect Test Design Backend Architect Design13 Augmentum Confidential
  • 14. 14 Augmentum Confidential
  • 15. 15 Augmentum Confidential
  • 16. 16 Augmentum Confidential
  • 17. 17 Augmentum Confidential
  • 18. 18 Augmentum Confidential
  • 19. 19 Augmentum Confidential
  • 20. 20 Augmentum Confidential
  • 21. 21 Augmentum Confidential
  • 22. 设计思索 - 传统电视与网络电视的区别 设计基调思索点 传统电视 网络电视 收看习惯 连续的(虽然在变化) 碎片文化、快餐文化 节目容量 有限、固定、不可回溯性 海量、分散、聚合 控制节目手段 遥控器 导航链接、EPG(影响力远弱于遥 控器) 收看方式 固定模式的 用户随心所欲的 用户群(从多到少) 老年、中年、青年、少年 少年、青年、中年、老年 内容接受方式 推送的 拉取的、自选的、跳跃的 提醒方式 电视字幕 Gargets、动态效果 广告形式 竞标、无序、昂贵 植入式、关联性、廉价、长尾 互动模式(参与) 单向、线下互动 实时互动、快速注意力转移 考核指标 主流文化、收视率 人气、访问量、参与度、不出事 内容专业化程度 严肃、高成本的 相对非正式、成本低 多终端访问 电视,IP电视、手机电视 浏览器,PC客户端,手机等访问23 Augmentum Confidential
  • 23. 传统及网络电视差异化- 涉众不同 • 传统电视用户(从多到少) – 老年、中年、青少年 – 女性、男性 • 网络电视用户(从多到少) – 青少年、中年、老年 – 男性、女性 • 网络电视的设计变化方向 – 信息模型细分设计。 例如:面向“中年”“男性”的“财经类”节 目 – 风格设计。例如: • 针对青少年的富元素富内容设计、快速转跳 • 针对老年用户的“傻瓜”设计、连续性观看24 Augmentum Inc. 群硕Augmentum Confidential
  • 24. 传统及网络电视差异化- 观看节目方式变化 • 传统电视用户 – 遥控器 – 收看节目连续性较强 – 遇广告转跳 • 网络电视用户 – 碎片文化 – 缺失耐心、不断转跳 – EPG作用不断降低 – 99.9%看、0.1%参与 – 个性化需求不如想象中高 (Google VS iGoogle) • 网络电视的设计变化方向 – EPG不再是网络电视核心 – 快速转跳、碎片聚合 – 最热门、推荐最多、观看人最多等快速导航作为更主要入口 – 降低参与难度(匿名、投票模式、“顶”、记录用户身份等) – 先专注主流体验而不是个性化针对个人用户25 Augmentum Inc. 群硕Augmentum Confidential
  • 25. About
  • 26. 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 installation27 Augmentum Confidential
  • 27. RIA – 桌面开发- Web开发? 对于桌面应用开发者 对于互联网应用开发者 Browser Sandbox Business Logic in UIBack Button and Refresh 炒作 Non-text based layout 视觉词汇 State management Service Orientation 动画 Limited Runtime Component Level Logic
  • 28. RIA Technology Map Rich Internet Applications Browser-based JavaScript Plug-in Custom AJAX Microsoft Adobe Sun AJAX Silverlight Flex JavaFX WPF AIR Java Web Start AJAX Frameworks Runtime-based 2929 Augmentum Confidential
  • 29. RIA Major stream (Maybe have other definitions) RIA30 Augmentum Confidential
  • 30. Flex • Programming languages: MXML & ActionScript 3.0 • Development environments: Flex Builder (Eclipse based), SEPY, Notepad, etc… • Plugins required: Flash Player 9.0.16 or higher31 Augmentum Confidential
  • 31. Silverlight • Programming languages: XAML, C#, JS, Ruby • Development environments: Microsoft Expression Blend 2, Microsoft Visual Studio, etc… • Plugins required: Silverlight Runtime 1.0 or higher32 Augmentum Confidential
  • 32. OpenLaszlo • Programming languages: LZX, ECMAScript • Development environments: IDE4Laszlo, Notepad, etc… • Plugins recommended: Flash Player 7 or higher33 Augmentum Confidential
  • 33. AJAX • Programming languages: JavaScript, XML, HTML • Development environments: Notepad, MyEclipse, GWT Designer, etc… • Plugins required: none34 Augmentum Confidential
  • 34. JavaFX • Programming languages: JavaFX Script, Java • Development environments: JavaFXPad, NetBeans 6.0, JFXBuilder, Notepad, etc… • Plugins required: Java Runtime Environment (JRE) 1.5 or higher35 Augmentum Confidential
  • 35. RIA Development Environment • Flex: Adobe Flex Builder • Silverlight: Microsoft Expression Blend • OpenLaszlo: IDE4Laszlo (Eclipse plugin) • AJAX: Notepad, MyEclipse (Eclipse plugin) • JavaFX: JFXBuilder36 Augmentum Confidential
  • 36. 什么时候该用什么? 举例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: Flex37 Augmentum Confidential
  • 37. RIA的应用趋势及思考38 Augmentum Confidential
  • 38. 使 用 锤 子 的 故 事39 Augmentum Confidential
  • 39. Business Hat VS Technical Hat40 Augmentum Confidential
  • 40. by billaday
  • 41.  Keyword strategy Context Site structure On page factor Link Building
  • 42. Browser behavior
  • 43. Traffic? PV?
  • 44. RIA在不同的设备平台上
  • 45. Unprotected Code (Flex)
  • 46. 安全和可用性的冲突?
  • 47. 好看不等于好用 • 高级用户痛恨“下一步” • 频繁的操作不要用49 Augmentum Confidential
  • 48. WEB开发和桌面开发的不同50 Augmentum Confidential
  • 49. Web Engineering Process51 Augmentum Confidential 51
  • 50. 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 cycle52 Augmentum Confidential
  • 51. 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 Incremental plus UX is a delivery Self-explanatory operation User guide/help file Change is the nature Requirements relatively stable Frequent changes spaced Evolve continuously, always BetaPlanned, chronologically releases Unpredictable load Relative Unpredictable or pre-difined Updates to public within days or hours Weeks or months as release cycle Short timeline53 Augmentum Confidential
  • 52. 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 Navigation54 Augmentum Confidential
  • 53. 关于信息架构:例子,网站地图设计 三次点击原则55 Augmentum Confidential
  • 54. 大型项目不太会去思考的地方56 Augmentum Confidential
  • 55. 项目的技术整体架构(分层) • 架构设计常见的角度: – 界面架构(及框架) – 应用架构 (及框架) – 系统架构 – 网络架构 (路由器、防火墙、CDN、网络层安全等等)57 Augmentum Confidential
  • 56. Architecture Design •Performance •Scalability •Vertical (get bigger) •Horizontal (get more) •Caching •LB •Query •Storage •Security •Multiple Site issue •HA •… Augmentum Confidential 58Photo by Keith Marshall http://www.flickr.com/photos/keithmarshall/432924465/
  • 57. YSlow! High performance 14条军规(更新) • Make fewer HTTP • Make JS and CSS requests external • Use a CDN • Reduce DNS lookups • Add an Expires • Minify JS header • Avoid redirects • Gzip components • Remove duplicate • Put CSS at the top scripts • Move JS to the • Turn off ETags bottom • Make AJAX • Avoid CSS cacheable and small expressions Augmentum Confidential 5959 Augmentum Confidential
  • 58. After YSlow “A”? - 20条新军规 1. Flush the buffer early server 2. Use GET for AJAX requests server 3. Post-load components content 4. Preload components content 5. Reduce the number of DOM elements content 6. Split components across domains content 7. Minimize the number of iframes content 8. No 404s content 9. Reduce cookie size cookie 10. Use cookie-free domains for components cookie 11. Minimize DOM access javascript 12. Develop smart event handlers javascript 13. Choose <link> over @import css 14. Avoid filters css 15. Optimize images images 16. Optimize CSS sprites images 17. Dont scale images in HTML images 18. Make favicon.ico small and cacheable images 19. Keep components under 25K mobile 20. Pack components into a multipart document mobile http://developer.yahoo.com/performance60 Augmentum Confidential
  • 59. Core Management Components • Progress Management • Quality Management • Defect Management • Risk Management • Communication Management • Configuration Management • Release Management • Scope/Change management • Human Resources Management • Training62 Augmentum Confidential
  • 60. 大型网站的运营 Augmentum Confidential 6363 Augmentum Confidential
  • 61. Processes to maintain large website(s) • Strategic Level Processes – Long Term • Tactical Level Processes – Short Term • Operational Level Processes – Day-to-Day64 Augmentum Confidential
  • 62. 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/rejection65 Augmentum Confidential
  • 63. 关于RIA里面的“R”66 Augmentum Confidential
  • 64. 体验工程 User Needs + Interaction Design + Information Design + Visual Design Experiences that create value!67 Augmentum Confidential
  • 65. 行 为 工 程68 Augmentum Confidential
  • 66. UX Methods and Deliverables Understand Conceive Design Develop • Ethnographic • Wire frames & story • Use case and task • Usage log analysis research boards analysis • Data mining • Market or brand • Lo-Fi prototyping • Hi-fi prototyping • A/B tests researchMethods • Participatory design • Visual designs • Customer feedback • Focus groups • Mood board • Lab tests and RITE analysis • Competitive analysis • Concept testing studies • User satisfaction • Card sorting • Usability inspection survey • Desirability study • Loyalty study • Benchmark testing • Personas • Concept briefs • Design spec • UX report cardDeliverables • Use cases • Wire frames • UI prototype • Research report • Research report • Concept prototype • Style guide • User acceptance • Conceptual models • Usability report report • Site map • UX reviews • Survey report 69 Augmentum Confidential
  • 67. UX Model and Processes • Abstract -> concrete – 目标 – 用户需求 – 功能需求 – 内容需求 – 交互设计 – 信息架构 – 信息设计 – 界面设计 – 导航设计 – 视觉设计70 Augmentum Confidential
  • 68. 71 Augmentum Confidential
  • 69. Thank You72 Augmentum Confidential