Refactoring HTML

28
Refactoring HTML Elliotte Rusty Harold [email protected] http:// www.cafeconleche.org/

description

Refactoring HTML. Elliotte Rusty Harold [email protected] http://www.cafeconleche.org/. Why Refactor. What to Refactor To. XHTML CSS REST. Move Away From. Tag soup Presentation based markup Stateful applications. XHTML. CSS. REST. All resources are identified by URLs. - PowerPoint PPT Presentation

Transcript of Refactoring HTML

Page 1: Refactoring HTML

Refactoring HTML

Elliotte Rusty Harold

[email protected]

http://www.cafeconleche.org/

Page 2: Refactoring HTML

Why RefactorWhy Refactor

Page 3: Refactoring HTML

What to Refactor ToWhat to Refactor To

XHTMLCSSREST

Page 4: Refactoring HTML

Move Away FromMove Away From

Tag soupPresentation based markupStateful applications

Page 5: Refactoring HTML

XHTMLXHTML

Page 6: Refactoring HTML

CSSCSS

Page 7: Refactoring HTML

RESTREST

All resources are identified by URLs. Safe, side-effect free operations such as

querying or browsing operate via GET. Non-safe operations operate via POST. Each request is independent of all others.

Page 8: Refactoring HTML

ToolsTools

Page 9: Refactoring HTML

The Refactoring ProcessThe Refactoring Process

1. Identify the problem.

2. Fix the problem.

3. Verify that the problem has been fixed

4. Check that no new problems have been introduced.

5. Deploy the solution.

Page 10: Refactoring HTML

Things Can Go WrongThings Can Go Wrong

BackupsStaging ServersSource Code Control

Page 11: Refactoring HTML

ValidatorsValidators

W3C Markup Validation ServiceLogValidatorXmllintEditors: DreamWeaver, BBEdit, etc.

Page 12: Refactoring HTML

TestingTesting

HTMLUnitJsUnitHTTPUnitjWebUnitFitnesseSelenium

Page 13: Refactoring HTML

Regular ExpressionsRegular Expressions

Learn them! But be cautiousPrefer parser-based

solutions

Page 14: Refactoring HTML

TidyTidy

C (and PHP)Custom APICan handle most bad markupUsually produces well-formed

XHTMLOften produces valid XHTML$ tidy -asxhtml -m index.html

Page 15: Refactoring HTML

TagSoupTagSoup

Java and SAXCan Handle AnythingAlways well-formedMay not be valid$ java -jar tagsoup.jar --encoding=ISO-8859-1 index.html

Page 16: Refactoring HTML

Well-formedness DefinedWell-formedness Defined

Every element has one parent elemnet; no overlap

Every start-tag has a case-sensitive matching end-tag

Attribute values are quotedEntity references are defined+Namespaces

Page 17: Refactoring HTML

Well-formedness RefactoringsWell-formedness Refactorings

Make name lower case Quote attribute value Replace empty tag with empty-element tag Add end-tag Eliminate overlap Convert text to UTF-8 Escape < and & Introduce an XHTML DOCTYPE Introduce the XHTML namespace

Page 18: Refactoring HTML

Validity DefinedValidity Defined

The document has a DOCTYPE<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""/dtds/xhtml1-transitional.dtd"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

The document adheres to constraints expressed in the DTD Nothing that’s not in the DTD Not as important as well-formedness

Page 19: Refactoring HTML

Validity DefinedValidity Defined

The document has a DOCTYPE<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN""/dtds/xhtml1-transitional.dtd"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">

Document adheres to constraints expressed in the DTD

Page 20: Refactoring HTML

Validity RefactoringsValidity Refactorings

Introduce Transitional DOCTYPEIntroduce Strict DOCTYPE

Page 21: Refactoring HTML

TransitionalTransitional

Eliminate bogonsAdd alt attributes

Page 22: Refactoring HTML

SrictSrict

Replace center, b, i, font, etc. with CSS

Nest inline elements in block elements

Page 23: Refactoring HTML

LayoutLayout

Wrap related information in divs Add ID attributes Replace table layouts with CSS Replace frames with CSS positions Put the content first Markup lists as lists Replace blockquote/ul indentation with

CSS Replace spacer GIFs

Page 24: Refactoring HTML

AccessibilityAccessibility

Convert images to text Add labels to forms Standard names for input fields Add tab indexes to forms Add skip navigation Add internal headings Provide captions, summaries, and headers

for tables Identify acronyms

Page 25: Refactoring HTML

Web ApplicationsWeb Applications

Replace GET with POST Replace POST with GET Replace Flash with HTML Make web apps cache savvy Provide Etags Add Web Forms 2.0 Types Block robots Avoid SQL injection

Page 26: Refactoring HTML

ContentContent

Check spellingCheck linksRestructure sites but keep the URLsRemove entry pagesHide e-mail addresses from

spambots

Page 27: Refactoring HTML

Objections To RefactoringObjections To Refactoring

We don’t have the time to waste on cleaning up the code. We have to get this feature implemented now!

Refactoring saves time in the long run.

You have more time than you think you do.

Page 28: Refactoring HTML

Further ReadingFurther Reading

Refactoring HTML: Elliotte Rusty Harold

Refactoring: Martin FowlerDesigning with Web

Standards:Jeffrey ZeldmanThe Zen of CSS Design: Dave Shea &

Molly Holzchlag