Refactoring HTML Elliotte Rusty Harold [email protected]
-
Upload
christian-reed -
Category
Documents
-
view
215 -
download
0
Transcript of Refactoring HTML Elliotte Rusty Harold [email protected]
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.
Further ReadingFurther Reading
Refactoring HTML: Elliotte Rusty Harold
Refactoring: Martin FowlerDesigning with Web
Standards:Jeffrey ZeldmanThe Zen of CSS Design: Dave Shea &
Molly Holzchlag