Refactoring HTML. Improving the Design of Existing Web Applications. Elliotte Rusty Harold. TT rvaddison-wesley

Transcription

1 Refactoring HTML Improving the Design of Existing Web Applications Elliotte Rusty Harold TT rvaddison-wesley Upper Saddle River, NJ Boston Indianapolis San Francisco New York Toronto Montreal London Munich Paris Madrid Capetown Sydney Tokyo Singapore Mexico City

2 Contents Foreword by Martin Fowler Foreword by Bob DuCharme About the Author xvii xix xxi Chapter 1 Refactoring 1 Why Refactor 3 Smell: Illegible Code 3 Smell: The CEO Can't Fill Out His Travel Expense Vouchers 6 Smell: Slow Page-Rendering Times 6 Smell: Pages Appear Different in Different Browsers 6 Smell: Pages Require Dangerous or Nonstandard Technologies 7 Smell: Your Company's Home Page Suddenly Says, "Pwned by Elite Doodz" 9 Smell: Your First Appearance on Google Is on Page 17 9 Smell: Readers Send Saying Your Site Is Broken 10 When to Refactor 11 What to Refactor To 13 Why XHTML 14 Why CSS 18 Why REST 20 Objections to Refactoring 23 Chapter 2 Tools 25 Backups, Staging Servers, and Source Code Control 25 Validators 27 The W3C Markup Validation Service 28 The Log Validator 29 xmllint 32 Editors 33 Testing 34 JUnit 36 HtmlUnit 39 HttpUnit 40 JWebUnit 41 VII

3 viii Contents FitNesse 42 Selenium 43 Getting Started with Tests 47 Regulär Expressions 48 Searching 49 Search Patterns 52 Tidy 54 -asxhtml 54 -clean 57 Encodings 58 Pretty Printing 59 Generated Code 59 Use As a Library 59 TagSoup 60 TagSoup versus Tidy 62 XSLT 62 Chapter 3 Well-Formedness 65 What Is Well-Formedness? 66 Change Name to Lowercase 69 Motivation 70 Potential Trade-offs 71 Mechanics 71 Quote Attribute Value 73 Motivation 74 Potential Trade-offs 75 Mechanics 75 Fill In Omitted Attribute Value 76 Motivation 77 Potential Trade-offs 77 Mechanics 77 Replace Empty Tag with Empty-Element Tag 78 Motivation 79 Potential Trade-offs 79 Mechanics 79 AddEnd-tag 81 Motivation 82 Potential Trade-offs 82 Mechanics 83 Remove Overlap 85 Motivation 86 Potential Trade-offs 86 Mechanics 87

4 Contents IX Convert Text to UTF-8 89 Motivation 89 Potential Trade-offs 89 Mechanics 89 Escape Less-Than Sign 91 Motivation 91 Potential Trade-offs 91 Mechanics 91 Escape Ampersand 93 Motivation 94 Potential Trade-offs 94 Mechanics 94 Escape Quotation Marks in Attribute Values 96 Motivation 96 Potential Trade-offs 96 Mechanics 96 Introduce an XHTML DOCTYPE Declaration 98 Motivation 98 Potential Trade-offs 98 Mechanics 99 Terminate Each Entity Reference 101 Motivation 101 Potential Trade-offs 101 Mechanics 101 Replace Imaginary Entity References 102 Motivation 102 Potential Trade-offs 102 Mechanics 102 Introduce a Root Element 103 Motivation 103 Potential Trade-offs 104 Mechanics 104 Introduce the XHTML Namespace 104 Motivation 105 Potential Trade-offs 105 Mechanics 105 Chapter4 Validity 107 Introduce a Transitional DOCTYPE Declaration 109 Motivation 109 Potential Trade-offs 109 Mechanics 110

5 X Contents Remove All Nonexistent Tags 111 Motivation 111 Potential Trade-offs 112 Mechanics 112 Add an alt Attribute 114 Motivation 114 Potential Trade-offs 115 Replace embed with obj ect 117 Motivation 118 Potential Trade-offs 119 Mechanics 120 Introduce a Strict DOCTYPE Declaration 123 Motivation 123 Potential Trade-offs 123 Mechanics 124 Replace center with CSS 124 Motivation 125 Potential Trade-offs 125 Mechanics 125 Replace fönt with CSS 127 Motivation 128 Potential Trade-offs 128 Mechanics 128 Replace i with em or CSS 131 Motivation 132 Potential Trade-offs 132 Mechanics 132 Replace b with strong or CSS 134 Motivation 134 Potential Trade-offs 135 Mechanics 135 Replace the color Attribute with CSS 136 Motivation 137 Potential Trade-offs 13 7 Mechanics 137 Convert img Attributes to CSS 140 Motivation 140 Potential Trade-offs 140 Mechanics 141 Replace applet with object 142 Motivation 143 Potential Trade-offs 143 Mechanics 144

6 Contents XI Replace Presentational Elements with CSS 146 Motivation 147 Potential Trade-offs 147 Mechanics 147 Nest Inline Elements inside Block Elements 149 Motivation 149 Potential Trade-offs 150 Mechanics 150 Chapter5 Layout 155 Replace Table Layouts 156 Motivation 157 Potential Trade-offs 158 Mechanics 158 Replace Frames with CSS Positions 170 Motivation 170 Potential Trade-offs 171 Mechanics 171 Move Content to the Front 180 Motivation 181 Potential Trade-offs 181 Mechanics 181 Mark Up Lists as Lists 184 Motivation 185 Potential Trade-offs 185 Mechanics 185 Replace blockquote/ul Indentation with CSS 187 Motivation 187 Potential Trade-offs 188 Mechanics 188 Replace Spacer GIFs 189 Motivation 189 Potential Trade-offs 190 Mechanics 190 Add an ID Attribute 191 Motivation 192 Potential Trade-offs 192 Mechanics 192 Add Width and Height to an Image 195 Motivation 195 Potential Trade-offs 195 Mechanics 195

7 xii Contents Chapter 6 Accessibility 199 Convert Images to Text 202 Motivation 202 Potential Trade-offs 203 Mechanics 203 Add Labels to Form Input 206 Motivation 207 Potential Trade-offs 207 Mechanics 207 Introduce Standard Field Names 210 Motivation 212 Potential Trade-offs 212 Mechanics 212 Turn on Autocomplete 216 Motivation 217 Potential Trade-offs 217 Mechanics 218 Add Tab Indexes to Forms 218 Motivation 219 Potential Trade-offs 219 Mechanics 220 Introduce Skip Navigation 222 Motivation 223 Potential Trade-offs 223 Mechanics 223 Add Internal Headings 225 Motivation 225 Potential Trade-offs 225 Mechanics 225 Move Unique Content to the Front of Links and Headlines 226 Motivation 227 Potential Trade-offs 227 Mechanics 227 Make the Input Field Bigger 228 Motivation 229 Potential Trade-offs 229 Mechanics 229 Introduce Table Descriptions 230 Motivation 232 Potential Trade-offs 232 Mechanics 233

8 Contents XIII Introduce Acronym Elements 235 Motivation 235 Potential Trade-offs 235 Mechanics 236 Introduce lang Attributes 236 Motivation 237 Potential Trade-offs 237 Mechanics 238 Chapter 7 Web Applications 241 Replace Unsafe GET with POST 241 Motivation 242 Potential Trade-offs 242 Mechanics 242 Replace Safe POST with GET 246 Motivation 247 Potential Trade-offs 248 Mechanics 248 Redirect POST to GET 251 Motivation 251 Potential Trade-offs 252 Mechanics 252 Enable Caching 254 Motivation 254 Potential Trade-offs 255 Mechanics 255 Prevent Caching 258 Motivation 258 Potential Trade-offs 259 Mechanics 259 Introduce ETag 261 Motivation 262 Potential Trade-offs 262 Mechanics 262 Replace Flash with HTML 265 Motivation 266 Potential Trade-offs 267 Mechanics 267 Add Web Forms 2.0 Types 270 Motivation 270 Potential Trade-offs 271 Mechanics 272

9 xiv Contents Replace Contact Forms with mailto Links 277 Motivation 277 Potential Trade-offs 278 Mechanics 278 Block Robots 280 Motivation 281 Potential Trade-offs 281 Mechanics 281 Escape User Input 284 Motivation 284 Potential Trade-offs 284 Mechanics 284 Chapter 8 Content 287 Correct Spelling 287 Motivation 288 Potential Trade-offs 288 Mechanics 288 Repair Broken Links 292 Motivation 292 Potential Trade-offs 292 Mechanics 292 Motivation 298 Potential Trade-offs 299 Mechanics 299 Remove the Entry Page 302 Motivation 303 Potential Trade-offs 303 Mechanics 303 Hide Addresses 304 Motivation 305 Potential Trade-offs 305 Mechanics 305 Appendix A Regulär Expressions 309 Characters That Match Themselves 309 Metacharacters 311 Wildcards 312 Quantifiers 313 ZeroorOne:? 313 Zero or More: * 314 OneorMore:+ 314 A Specific Number of Times: {} 314

10 Contents xv Class Shorthands 315 Character Classes 316 Groups and Back References 318 Whitespace 321 Alternation: 322 Greedy and Nongreedy Matches 323 Position 324 Index 327