Refactoring HTML Elliotte Rusty Harold elharo@metalab.unc.edu

transcript

Refactoring HTML

Elliotte Rusty Harold

elharo@metalab.unc.edu

http://www.cafeconleche.org/

Why RefactorWhy Refactor

What to Refactor ToWhat to Refactor To

XHTMLCSSREST

Move Away FromMove Away From

Tag soupPresentation based markupStateful applications

XHTMLXHTML

CSSCSS

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.

ToolsTools

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.

Things Can Go WrongThings Can Go Wrong

BackupsStaging ServersSource Code Control

ValidatorsValidators

W3C Markup Validation ServiceLogValidatorXmllintEditors: DreamWeaver, BBEdit, etc.

TestingTesting

HTMLUnitJsUnitHTTPUnitjWebUnitFitnesseSelenium

Regular ExpressionsRegular Expressions

Learn them! But be cautiousPrefer parser-based

solutions

TidyTidy

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

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

TagSoupTagSoup

Java and SAXCan Handle AnythingAlways well-formedMay not be valid$ java -jar tagsoup.jar --encoding=ISO-8859-1 index.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

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

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

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

Validity RefactoringsValidity Refactorings

Introduce Transitional DOCTYPEIntroduce Strict DOCTYPE

TransitionalTransitional

Eliminate bogonsAdd alt attributes

SrictSrict

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

Nest inline elements in block elements

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

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

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

ContentContent

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

spambots

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.

Refactoring HTML Elliotte Rusty Harold elharo@metalab.unc.edu

Documents