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 sharing
9 Augmentum Confidential
10. 案例：CCTV网络电视奥运台
• Creative design of 360 degree rotate TV wall
• Decrease the CPU utilization from 60% to 1% through
performance tuning
10 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
ng
11 Augmentum Confidential
12. Customer: CCTV.com OlympicTV - Complete UX design process
IA & Interaction design on paper
Storyboard
Visual Style Guide
Interaction Design
Visual Design
12 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
Design
13 Augmentum Confidential
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
installation
27 Augmentum Confidential
27. RIA – 桌面开发- Web开发？
对于桌面应用开发者 对于互联网应用开发者
Browser Sandbox Business Logic in UI
Back 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
29
29 Augmentum Confidential
29. RIA Major stream (Maybe have other definitions)
RIA
30 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 higher
31 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 higher
32 Augmentum Confidential
32. OpenLaszlo
• Programming languages: LZX, ECMAScript
• Development environments: IDE4Laszlo, Notepad,
etc…
• Plugins recommended: Flash Player 7 or higher
33 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: Flex
37 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 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
52 Augmentum Confidential
52. 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 timeline
53 Augmentum Confidential
53. 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
54 Augmentum Confidential
57. Architecture
Design
•Performance
•Scalability
•Vertical (get bigger)
•Horizontal (get more)
•Caching
•LB
•Query
•Storage
•Security
•Multiple Site issue
•HA
•…
Augmentum Confidential 58
Photo by Keith Marshall http://www.flickr.com/photos/keithmarshall/432924465/
58. 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 59
59 Augmentum Confidential
59. 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. Don't 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/performance
60 Augmentum Confidential
62. Processes to maintain large website(s)
• Strategic Level Processes
– Long Term
• Tactical Level Processes
– Short Term
• Operational Level
Processes
– Day-to-Day
64 Augmentum Confidential
63. 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
65 Augmentum Confidential
