Your SlideShare is downloading. ×
0
Progressive
Enhancement Practice
    ytian@thoughtworks.com
Why PE?

Separation of Concerns

  Data - Structure

  Presentation - Style

  Behavior - Event
Why PE?
KISS




        /
PE’s goal

/ Universal

/ Usability

   / Maintain

                / Communication
Practice
Mapping requirement to right layer

     HTTP      Restful, the web way


  HTML/XHTML   Structural data format

...
Http layer
What’s restful? The web way.

Use right request method

Use right HTTP response CODE

Use the useful HTTP heade...
Http layer
Web site should be a restful app

Human readable website is also a
computer readable API provider

(x)HTML is a...
(x)Html             layer
Choose tag semantically




              HTML Tag

  HTML5 friendly?

            HTML5     Nam...
(x)Html        layer
Microformats

  open protocal

  markup conventions

  semantic way

  easy to parse

  easy to valid...
CSS Layer
     reset css

                 css selector

     css class

micro formats             class

id        javasc...
CSS Layer

    css selector (   microformats)

.project .stage .job .name

.article h2

.comment .time
Javascript Layer

Javascript

JQuery’s PE support

  API   DSL

              ($(selector).hehavior)
Javascript Layer

graceful degradation




      microformats     convension
Conclusion


Never re-invent the web (wheel)

Discover the beauty of web standard

Do right things in right way
Thanks
Upcoming SlideShare
Loading in...5
×

Progressive Enhancement

789

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
789
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
4
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "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.

×