University of WashingtonComputing & Communications Standards-Based Web Publishing XHTML and CSS Rick...

University of Washington Computing & Communications

Standards-Based Web PublishingXHTML and CSS

Rick EllsSenior Computer Specialist

Computing & CommunicationsUniversity of Washington

Seattle, Washington


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


Which technologies?

• 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

Web Standards Project Scope


A Little History


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


Projects – UW Home

UW Home Page and UWIN Page



Standard page templates

Header

Footer



• 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/


Projects – Public Health


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


Projects – C&C .Net


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


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



• 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



• 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


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


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


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


Benefits

• Reduced load on server

• Site portability– Moving to a new OS is much less of a

problem


Challenges

A Few PeopleManagingMany Pages

Many PeopleManaging aFew Pages


Challenges

• Skill inertia– Not ready to relearn HTML

• Web management balkanization– Top down standards setting not possible in

many organizations


Challenges

• Non-standards compliant tools– MS Word– Old editors

• New tools with old methods– .Net Web Solution


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


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?


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


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


Resources

• Standards– W3C – http://www.w3c.org– Web Standards - http://

www.webstandards.org/


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/


Resources

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


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

University of WashingtonComputing & Communications Standards-Based Web Publishing XHTML and CSS Rick...

Documents

Transcript of University of WashingtonComputing & Communications Standards-Based Web Publishing XHTML and CSS Rick...