Progressive Enhancement

853
-1

Published on

This is a slides about progressive enhancement. It doesn't answer what is progressive enhancement, instead it talks about how to do progressive enhancement in practice. Then you will know why you need to do progressive enhancement. In my mind PE is not a buzz word, actually it's the Web's way. We should rediscover what's right way to build web. If everything is in correct layer, this best practice called progressive enhancement. Then you got a robust system which can work in different environment and can be access by both human and computer.

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

No Downloads
Views
Total Views
853
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
4
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Progressive Enhancement

  1. 1. Progressive Enhancement Practice ytian@thoughtworks.com
  2. 2. Why PE? Separation of Concerns Data - Structure Presentation - Style Behavior - Event
  3. 3. Why PE? KISS /
  4. 4. PE’s goal / Universal / Usability / Maintain / Communication
  5. 5. Practice Mapping requirement to right layer HTTP Restful, the web way HTML/XHTML Structural data format CSS Visual enhancement Javascript Behavior enhancement
  6. 6. Http layer What’s restful? The web way. Use right request method Use right HTTP response CODE Use the useful HTTP headers Resources centric URL? Form model and Post redirect-back
  7. 7. Http layer Web site should be a restful app Human readable website is also a computer readable API provider (x)HTML is a valid structural ATOM feed format Web page is a composite representation of domain model
  8. 8. (x)Html layer Choose tag semantically HTML Tag HTML5 friendly? HTML5 Name Class
  9. 9. (x)Html layer Microformats open protocal markup conventions semantic way easy to parse easy to validate
  10. 10. CSS Layer reset css css selector css class micro formats class id javascript
  11. 11. CSS Layer css selector ( microformats) .project .stage .job .name .article h2 .comment .time
  12. 12. Javascript Layer Javascript JQuery’s PE support API DSL ($(selector).hehavior)
  13. 13. Javascript Layer graceful degradation microformats convension
  14. 14. Conclusion Never re-invent the web (wheel) Discover the beauty of web standard Do right things in right way
  15. 15. Thanks
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×