Your SlideShare is downloading. ×
0
Progressive Enhancement
Progressive Enhancement
Progressive Enhancement
Progressive Enhancement
Progressive Enhancement
Progressive Enhancement
Progressive Enhancement
Progressive Enhancement
Progressive Enhancement
Progressive Enhancement
Progressive Enhancement
Progressive Enhancement
Progressive Enhancement
Progressive Enhancement
Progressive Enhancement
Progressive Enhancement
Progressive Enhancement
Progressive Enhancement
Progressive Enhancement
Progressive Enhancement
Progressive Enhancement
Progressive Enhancement
Progressive Enhancement
Progressive Enhancement
Progressive Enhancement
Progressive Enhancement
Progressive Enhancement
Progressive Enhancement
Progressive Enhancement
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Progressive Enhancement

1,781

Published on

渐进增强思想及其在工作中的应用

渐进增强思想及其在工作中的应用

Published in: Technology
0 Comments
9 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
1,781
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
68
Comments
0
Likes
9
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. 渐进增强一种优秀的Web开发思想 淘宝UED:玉伯
  • 2. Topics 一.渐进增强是什么 二.在工作中如何运用 三.渐进增强的魅力
  • 3. 一、渐进增强是什么?
  • 4. 英文:Progressive Enhancement翻译:渐进增强简写:PE
  • 5. 背景古典美女是怎么画成的? 细节• 分步骤,逐渐细化,每一步 都有明确的目的• 始终以人物为中心渐进增强不会有明确的名词定义,它 人物是一种思想,一种 上色理念。 素描 轮廓
  • 6. 二、在工作中如何运用?
  • 7. 渐进增强的两个关键点 • 以内容为中心 人物 • 在工作流程中的体现 绘画 步骤
  • 8. 以内容为中心的两种理解 对于App(包括Client App和Web App)来说,是基本功能,是用户 最需要最常用的部分以内容为中心 对于Web Page来说,是网页内容, 是一个页面要传达的信息
  • 9. App中的以内容为中心 基本功能 高级功能 扩展功能 优秀的软件:Total Commander, Firefox, WordPress, foobar2000, Eclipse…
  • 10. Web Page中的以内容为中心 JS行为 CSS表现 XHTML内容 结构 + 数据
  • 11. 实例:淘宝礼物频道
  • 12. App 的 PE 工作流程基本功能 高级功能 扩展功能核心点:以功能为中心,分步骤、分层次开发
  • 13. Web Page 的 PE 工作流程 基本体验 高级体验 升值体验核心点:以内容为中心,分步骤、分层次开发
  • 14. 古典美女的无奈优雅降级(GracefulDegradation), 简称 GD
  • 15. 工作流程中的优雅降级 高级体验 基本体验例子:先在 Chrome, Firefox 等现代浏览器上开发,然后再针对 IE6 等浏览器降级
  • 16. 实例:Andy Clarke
  • 17. 淘宝实例:阴影 IE7,Firefox … IE6
  • 18. Why ? 高级体验 基本体验好处:对用户来说,好的浏览器更获取更好的体验;对开发人员来说,缩短了开发周期,同时能始终站在前端开发的前沿。
  • 19. PE 和 GD 的关系 高级体验 基本体验渐进增强 优雅降级
  • 20. 三、渐进增强的魅力
  • 21. HTML5 时代的渐进增强 面对现实的 优雅降级 HTML5带来 的高级体验 由 HTML/CSS/ JS构建的基 本体验
  • 22. 思想PE • 以内容为中心 • 分离内容、表现和行为 途径 • 工作流程 • Unobtrusive脚本 •…• Accessibility(可访问性)• Usability(可用性)• Maintainability(可维护性)•… 目的
  • 23. 小结• 以内容为核心,不抛弃,不放弃• 可以考虑现代浏览器支持的高级体验• 不同浏览器的效果不同,这是合理的• 渐进增强也需要渐进增强• 推动Web发展,是我们的职责• 把握前沿知识,引领业界潮流
  • 24. Q&A
  • 25. 资源• Understanding Progressive Enhancement• Progressive Enhancement with CSS• Progressive Enhancement with JavaScript• Unobtrusive JavaScript
  • 26. Thanks!lifesinger@gmail.com http://lifesinger.org/

×