Refactoring HTML Elliotte Rusty Harold [email protected]
-
Upload
christian-reed -
Category
Documents
-
view
213 -
download
0
Transcript of Refactoring HTML Elliotte Rusty Harold [email protected]
![Page 2: Refactoring HTML Elliotte Rusty Harold elharo@metalab.unc.edu](https://reader036.fdocuments.us/reader036/viewer/2022062718/56649e7d5503460f94b808a2/html5/thumbnails/2.jpg)
Why RefactorWhy Refactor
![Page 3: Refactoring HTML Elliotte Rusty Harold elharo@metalab.unc.edu](https://reader036.fdocuments.us/reader036/viewer/2022062718/56649e7d5503460f94b808a2/html5/thumbnails/3.jpg)
What to Refactor ToWhat to Refactor To
XHTMLCSSREST
![Page 4: Refactoring HTML Elliotte Rusty Harold elharo@metalab.unc.edu](https://reader036.fdocuments.us/reader036/viewer/2022062718/56649e7d5503460f94b808a2/html5/thumbnails/4.jpg)
Move Away FromMove Away From
Tag soupPresentation based markupStateful applications
![Page 5: Refactoring HTML Elliotte Rusty Harold elharo@metalab.unc.edu](https://reader036.fdocuments.us/reader036/viewer/2022062718/56649e7d5503460f94b808a2/html5/thumbnails/5.jpg)
XHTMLXHTML
![Page 6: Refactoring HTML Elliotte Rusty Harold elharo@metalab.unc.edu](https://reader036.fdocuments.us/reader036/viewer/2022062718/56649e7d5503460f94b808a2/html5/thumbnails/6.jpg)
CSSCSS
![Page 7: Refactoring HTML Elliotte Rusty Harold elharo@metalab.unc.edu](https://reader036.fdocuments.us/reader036/viewer/2022062718/56649e7d5503460f94b808a2/html5/thumbnails/7.jpg)
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](https://reader036.fdocuments.us/reader036/viewer/2022062718/56649e7d5503460f94b808a2/html5/thumbnails/8.jpg)
ToolsTools
![Page 9: Refactoring HTML Elliotte Rusty Harold elharo@metalab.unc.edu](https://reader036.fdocuments.us/reader036/viewer/2022062718/56649e7d5503460f94b808a2/html5/thumbnails/9.jpg)
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](https://reader036.fdocuments.us/reader036/viewer/2022062718/56649e7d5503460f94b808a2/html5/thumbnails/10.jpg)
Things Can Go WrongThings Can Go Wrong
BackupsStaging ServersSource Code Control
![Page 11: Refactoring HTML Elliotte Rusty Harold elharo@metalab.unc.edu](https://reader036.fdocuments.us/reader036/viewer/2022062718/56649e7d5503460f94b808a2/html5/thumbnails/11.jpg)
ValidatorsValidators
W3C Markup Validation ServiceLogValidatorXmllintEditors: DreamWeaver, BBEdit, etc.
![Page 12: Refactoring HTML Elliotte Rusty Harold elharo@metalab.unc.edu](https://reader036.fdocuments.us/reader036/viewer/2022062718/56649e7d5503460f94b808a2/html5/thumbnails/12.jpg)
TestingTesting
HTMLUnitJsUnitHTTPUnitjWebUnitFitnesseSelenium
![Page 13: Refactoring HTML Elliotte Rusty Harold elharo@metalab.unc.edu](https://reader036.fdocuments.us/reader036/viewer/2022062718/56649e7d5503460f94b808a2/html5/thumbnails/13.jpg)
Regular ExpressionsRegular Expressions
Learn them! But be cautiousPrefer parser-based
solutions
![Page 14: Refactoring HTML Elliotte Rusty Harold elharo@metalab.unc.edu](https://reader036.fdocuments.us/reader036/viewer/2022062718/56649e7d5503460f94b808a2/html5/thumbnails/14.jpg)
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](https://reader036.fdocuments.us/reader036/viewer/2022062718/56649e7d5503460f94b808a2/html5/thumbnails/15.jpg)
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](https://reader036.fdocuments.us/reader036/viewer/2022062718/56649e7d5503460f94b808a2/html5/thumbnails/16.jpg)
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](https://reader036.fdocuments.us/reader036/viewer/2022062718/56649e7d5503460f94b808a2/html5/thumbnails/17.jpg)
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](https://reader036.fdocuments.us/reader036/viewer/2022062718/56649e7d5503460f94b808a2/html5/thumbnails/18.jpg)
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](https://reader036.fdocuments.us/reader036/viewer/2022062718/56649e7d5503460f94b808a2/html5/thumbnails/19.jpg)
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](https://reader036.fdocuments.us/reader036/viewer/2022062718/56649e7d5503460f94b808a2/html5/thumbnails/20.jpg)
Validity RefactoringsValidity Refactorings
Introduce Transitional DOCTYPEIntroduce Strict DOCTYPE
![Page 21: Refactoring HTML Elliotte Rusty Harold elharo@metalab.unc.edu](https://reader036.fdocuments.us/reader036/viewer/2022062718/56649e7d5503460f94b808a2/html5/thumbnails/21.jpg)
TransitionalTransitional
Eliminate bogonsAdd alt attributes
![Page 22: Refactoring HTML Elliotte Rusty Harold elharo@metalab.unc.edu](https://reader036.fdocuments.us/reader036/viewer/2022062718/56649e7d5503460f94b808a2/html5/thumbnails/22.jpg)
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](https://reader036.fdocuments.us/reader036/viewer/2022062718/56649e7d5503460f94b808a2/html5/thumbnails/23.jpg)
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](https://reader036.fdocuments.us/reader036/viewer/2022062718/56649e7d5503460f94b808a2/html5/thumbnails/24.jpg)
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](https://reader036.fdocuments.us/reader036/viewer/2022062718/56649e7d5503460f94b808a2/html5/thumbnails/25.jpg)
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](https://reader036.fdocuments.us/reader036/viewer/2022062718/56649e7d5503460f94b808a2/html5/thumbnails/26.jpg)
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](https://reader036.fdocuments.us/reader036/viewer/2022062718/56649e7d5503460f94b808a2/html5/thumbnails/27.jpg)
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](https://reader036.fdocuments.us/reader036/viewer/2022062718/56649e7d5503460f94b808a2/html5/thumbnails/28.jpg)
Further ReadingFurther Reading
Refactoring HTML: Elliotte Rusty Harold
Refactoring: Martin FowlerDesigning with Web
Standards:Jeffrey ZeldmanThe Zen of CSS Design: Dave Shea &
Molly Holzchlag