+ All Categories
Home > Documents > Refactoring HTML Elliotte Rusty Harold [email protected]

Refactoring HTML Elliotte Rusty Harold [email protected]

Date post: 29-Dec-2015
Category:
Upload: christian-reed
View: 213 times
Download: 0 times
Share this document with a friend
28
Refactoring HTML Elliotte Rusty Harold [email protected] http:// www.cafeconleche.org/
Transcript
Page 1: Refactoring HTML Elliotte Rusty Harold elharo@metalab.unc.edu

Refactoring HTML

Elliotte Rusty Harold

[email protected]

http://www.cafeconleche.org/

Page 2: Refactoring HTML Elliotte Rusty Harold elharo@metalab.unc.edu

Why RefactorWhy Refactor

Page 3: Refactoring HTML Elliotte Rusty Harold elharo@metalab.unc.edu

What to Refactor ToWhat to Refactor To

XHTMLCSSREST

Page 4: Refactoring HTML Elliotte Rusty Harold elharo@metalab.unc.edu

Move Away FromMove Away From

Tag soupPresentation based markupStateful applications

Page 5: Refactoring HTML Elliotte Rusty Harold elharo@metalab.unc.edu

XHTMLXHTML

Page 6: Refactoring HTML Elliotte Rusty Harold elharo@metalab.unc.edu

CSSCSS

Page 7: Refactoring HTML Elliotte Rusty Harold elharo@metalab.unc.edu

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 Elliotte Rusty Harold elharo@metalab.unc.edu

ToolsTools

Page 9: Refactoring HTML Elliotte Rusty Harold elharo@metalab.unc.edu

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 Elliotte Rusty Harold elharo@metalab.unc.edu

Things Can Go WrongThings Can Go Wrong

BackupsStaging ServersSource Code Control

Page 11: Refactoring HTML Elliotte Rusty Harold elharo@metalab.unc.edu

ValidatorsValidators

W3C Markup Validation ServiceLogValidatorXmllintEditors: DreamWeaver, BBEdit, etc.

Page 12: Refactoring HTML Elliotte Rusty Harold elharo@metalab.unc.edu

TestingTesting

HTMLUnitJsUnitHTTPUnitjWebUnitFitnesseSelenium

Page 13: Refactoring HTML Elliotte Rusty Harold elharo@metalab.unc.edu

Regular ExpressionsRegular Expressions

Learn them! But be cautiousPrefer parser-based

solutions

Page 14: Refactoring HTML Elliotte Rusty Harold elharo@metalab.unc.edu

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 Elliotte Rusty Harold elharo@metalab.unc.edu

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 Elliotte Rusty Harold elharo@metalab.unc.edu

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 Elliotte Rusty Harold elharo@metalab.unc.edu

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 Elliotte Rusty Harold elharo@metalab.unc.edu

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 Elliotte Rusty Harold elharo@metalab.unc.edu

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 Elliotte Rusty Harold elharo@metalab.unc.edu

Validity RefactoringsValidity Refactorings

Introduce Transitional DOCTYPEIntroduce Strict DOCTYPE

Page 21: Refactoring HTML Elliotte Rusty Harold elharo@metalab.unc.edu

TransitionalTransitional

Eliminate bogonsAdd alt attributes

Page 22: Refactoring HTML Elliotte Rusty Harold elharo@metalab.unc.edu

SrictSrict

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

Nest inline elements in block elements

Page 23: Refactoring HTML Elliotte Rusty Harold elharo@metalab.unc.edu

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 Elliotte Rusty Harold elharo@metalab.unc.edu

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 Elliotte Rusty Harold elharo@metalab.unc.edu

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 Elliotte Rusty Harold elharo@metalab.unc.edu

ContentContent

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

spambots

Page 27: Refactoring HTML Elliotte Rusty Harold elharo@metalab.unc.edu

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 Elliotte Rusty Harold elharo@metalab.unc.edu

Further ReadingFurther Reading

Refactoring HTML: Elliotte Rusty Harold

Refactoring: Martin FowlerDesigning with Web

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

Molly Holzchlag


Recommended