StandardsBased Web Publishing XHTML and CSS

1
Standards-Based Web PublishingXHTML and CSS

• Rick EllsSenior Computer SpecialistComputing
  CommunicationsUniversity of WashingtonSeattle,
  Washington

2
Defining standards-based web design

• The World Wide Web Consortium (W3C) , along with
  other groups and standards bodies, has
  established technologies for creating and
  interpreting web-based content. These
  technologies, which we call web standards, are
  carefully designed to deliver the greatest
  benefits to the greatest number of web users
  while ensuring the long-term viability of any
  document published on the Web. The Web
  Standards Project

3
Which technologies?
Web Standards Project Scope

• XHTML 1.0
• XHTML 1.1
• XML 1.0
• CSS 1
• CSS 2
• CSS 3

• DOM 1
• DOM 2
• ECMAScript 262
• MathML 1.01
• MathML 2.0
• SVG 1.0

4
A Little History
5
UW Projects

• UW Home site
• Home Page http//www.washington.edu/
• UWIN http//www.washington.edu/uwin/
• School of Public Health
• http//sphcm.washington.edu/
• CC .Net
• In development

6
Projects UW Home
UW Home Page and UWIN Page
7
Projects UW Home
Standard page templates
Header
Footer
8
Projects UW Home

• HTML becomes almost trivial and much easier to
  get maintain
• CSS gets harder
• Easier to reuse
• Flow is much better
• Source can be in different order than on page
• More likely to be usable across wider range of
  browsers
• Frank Fujimoto Notes at http//staff.washington.ed
  u/fmf/xhtmlcss/

9
Projects Public Health
10
Projects Public Health

• Server load is sharply reduced
• CSS is cached
• HTML is much simpler
• DIVs compartmentalize content
• DIVs can be in whatever order is needed
• XHTML/CSS avoids complicated tables hacks
• HTML much easier to work with
• Works decently with PDAs
• Dylan Wilbanks, webmaster

11
Projects CC .Net
12
Projects CC .Net

• Working with MS Visual Studio .Net 2003
• Authors already working in VS.Net2003
• HTML 4.01 (IE 5.0 target schema)
• Author contributions are simple HTML, just drop
  in template
• Design still in flux, easy to change
• Authors tend to use external tools to work with
  HTML
• Rick Ells, webmaster

13
Converting to XHTML and CSS

• Proper DOCTYPE and namespace
• Declare your content type
• Write all tags in lowercase
• Quote all attribute values
• All attributes require values
• Close all tags
• Close empty tags with a space and a dash
• No double dashes within a comment
• Encode all lt and characters

14
Converting to XHTML and CSS

• Use the HTML logical model
• The elements are based on a conceptual model of
  parts of a document
• Work with the model elements, using as their
  conceptual role implies
• Build quality content and content structure

15
Converting to XHTML and CSS
16
Converting to XHTML and CSS
17
Converting to XHTML and CSS

• Separate presentation from content and content
  structure
• Use tables for tabling
• Minimize use of tables for layout
• Control presentation as much as possible with CSS

18
Benefits

• Separation of roles
• Content developer
• Presentation designer
• Compatibility and portability of content,
  presentation
• Content can be moved to new location, takes on
  appropriate look and feel
• Consistency in methods
• Troubleshooting
• Handing off projects to others
• Lending a hand on others projects

19
Benefits

• Clear standards to test against
• Powerful tools available to quickly get things up
  to standard
• More plastic
• Can quickly rearrange presentation
• Can show portions of content, or not, depending
  on need

20
Benefits

• Device independence
• Accessibility
• User agents like well-formed validated code
• Easier to do appropriate alternative and
  labelling attributes
• Foundation for future directions
• PDAs
• Cell phones
• Content Management Systems

21
Benefits

• Reduced load on server
• Site portability
• Moving to a new OS is much less of a problem

22
Challenges
A Few People Managing Many Pages
Many People Managing a Few Pages
23
Challenges

• Skill inertia
• Not ready to relearn HTML
• Web management balkanization
• Top down standards setting not possible in many
  organizations

24
Challenges

• Non-standards compliant tools
• MS Word
• Old editors
• New tools with old methods
• .Net Web Solution

25
Challenges

• Code mass
• Tidy is awesome for fast cleanup
• Tidy has a nice "convert to styles" feature
• XHTML belongs to XML family
• Lots of powerful tools available, if it is
  well-formed

26
Challenges

• Conceptual confusion
• CSS Box Model
• Cascading interactions
• Block and inline
• Floating
• Hierarchical structure of HTML
• Changes in going from HTML to standards HTML/CSS
• Converting presentation attributes to CSS styles
• Changes in going from HTML to XHTML
• Transitional or Strict?

27
Challenges

• Inconsistencies among browsers
• Width supposed to define width of elements
  content area
• Incomplete CSS2 support
• The Little Shop of CSS Horrors
  http//haughey.com/csshorrors/
• CSS Bugs and Workarounds http//css.nu/pointers/
  bugs.html

28
Getting Started

• Use logical markup
• Use styles instead of presentation attributes
• Experiment with style sheets, both in the page
  head and in separate files
• Use HTML-Kit or other editor that has a standards
  mode and that validates

29
Resources

• Standards
• W3C http//www.w3c.org
• Web Standards - http//www.webstandards.org/

30
Resources

• Tools
• Tidy http//tidy.sourceforge.net/
• W3C Validators
• HTML Validator http//validator.w3.org/
• CSS Validator http//jigsaw.w3.org/css-validator
  /
• TopStyle http//www.bradsoft.com/topstyle/
• StyleMaster http//www.westciv.com/style_master/
  
• HTML-Kit http//www.chami.com/html-kit/

31
Resources

• Standards-based sites
• New York Public Libraries Style Guide
• MSN
• Wired
• School of Public Health

32
Resources

• WebDev Share Presentations
• Implementing Standards-Based Web Design Support
  Richard B. Ells, University of Washington
• CSS How to for Beginners Creating and using
  effective style sheets Michael Adams, University
  of Northern Colorado
• Cascading Style Sheets Paul Alford, Indiana
  University
• CSS Benefits of Web Standards Daniel Frommelt
  Sean Sieg, University of Wisconsin - Platteville