Download Standards Based Web Publishing - UW Staff Web Server

University of Washington
Computing & Communications
Standards-Based Web Publishing
XHTML and CSS
Rick Ells
Senior Computer Specialist
Computing & Communications
University of Washington
Seattle, Washington
University of Washington
Computing & Communications
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
University of Washington
Computing & Communications
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
University of Washington
Computing & Communications
A Little History
University of Washington
Computing & Communications
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/
• C&C .Net
– In development
University of Washington
Computing & Communications
Projects – UW Home
UW Home Page and UWIN Page
University of Washington
Computing & Communications
Projects – UW Home
Standard page templates
Header
Footer
University of Washington
Computing & Communications
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.edu/fmf/xhtml+css/
University of Washington
Computing & Communications
Projects – Public Health
University of Washington
Computing & Communications
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
University of Washington
Computing & Communications
Projects – C&C .Net
University of Washington
Computing & Communications
Projects – C&C .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
University of Washington
Computing & Communications
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 < and & characters
University of Washington
Computing & Communications
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
University of Washington
Computing & Communications
Converting to XHTML and CSS
University of Washington
Computing & Communications
Converting to XHTML and CSS
University of Washington
Computing & Communications
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
University of Washington
Computing & Communications
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
University of Washington
Computing & Communications
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
University of Washington
Computing & Communications
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
University of Washington
Computing & Communications
Benefits
• Reduced load on server
• Site portability
– Moving to a new OS is much less of a
problem
University of Washington
Computing & Communications
Challenges
A Few People
Managing
Many Pages
Many People
Managing a
Few Pages
University of Washington
Computing & Communications
Challenges
• Skill inertia
– Not ready to relearn HTML
• Web management balkanization
– Top down standards setting not possible in
many organizations
University of Washington
Computing & Communications
Challenges
• Non-standards compliant tools
– MS Word
– Old editors
• New tools with old methods
– .Net Web Solution
University of Washington
Computing & Communications
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 wellformed
University of Washington
Computing & Communications
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?
University of Washington
Computing & Communications
Challenges
• Inconsistencies among browsers
– Width supposed to define width of
element’s 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
University of Washington
Computing & Communications
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
University of Washington
Computing & Communications
Resources
• Standards
– W3C – http://www.w3c.org
– Web Standards http://www.webstandards.org/
University of Washington
Computing & Communications
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/
University of Washington
Computing & Communications
Resources
• Standards-based sites
– New York Public Libraries Style Guide
– MSN
– Wired
– School of Public Health
University of Washington
Computing & Communications
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