1 / 28

Refactoring HTML

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

troy-hays
Download Presentation

Refactoring HTML

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Refactoring HTML Elliotte Rusty Harold elharo@metalab.unc.edu http://www.cafeconleche.org/

  2. Why Refactor

  3. What to Refactor To • XHTML • CSS • REST

  4. Move Away From • Tag soup • Presentation based markup • Stateful applications

  5. XHTML

  6. CSS

  7. REST • 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.

  8. Tools

  9. The Refactoring Process • Identify the problem. • Fix the problem. • Verify that the problem has been fixed • Check that no new problems have been introduced. • Deploy the solution.

  10. Things Can Go Wrong • Backups • Staging Servers • Source Code Control

  11. Validators • W3C Markup Validation Service • LogValidator • Xmllint • Editors: DreamWeaver, BBEdit, etc.

  12. Testing • HTMLUnit • JsUnit • HTTPUnit • jWebUnit • Fitnesse • Selenium

  13. Regular Expressions • Learn them! • But be cautious • Prefer parser-based solutions

  14. Tidy • C (and PHP) • Custom API • Can handle most bad markup • Usually produces well-formed XHTML • Often produces valid XHTML • $ tidy -asxhtml -m index.html

  15. TagSoup • Java and SAX • Can Handle Anything • Always well-formed • May not be valid • $ java -jar tagsoup.jar --encoding=ISO-8859-1 index.html

  16. Well-formedness Defined • Every element has one parent elemnet; no overlap • Every start-tag has a case-sensitive matching end-tag • Attribute values are quoted • Entity references are defined • +Namespaces

  17. Well-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

  18. Validity 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

  19. Validity 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

  20. Validity Refactorings • Introduce Transitional DOCTYPE • Introduce Strict DOCTYPE

  21. Transitional • Eliminate bogons • Add alt attributes

  22. Srict • Replace center, b, i, font, etc. with CSS • Nest inline elements in block elements

  23. Layout • 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

  24. Accessibility • 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

  25. Web 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

  26. Content • Check spelling • Check links • Restructure sites but keep the URLs • Remove entry pages • Hide e-mail addresses from spambots

  27. Objections 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.

  28. Further Reading • Refactoring HTML: Elliotte Rusty Harold • Refactoring: Martin Fowler • Designing with Web Standards:Jeffrey Zeldman • The Zen of CSS Design: Dave Shea & Molly Holzchlag

More Related