1. University of WashingtonComputing & Communications Standards-Based Web Publishing XHTML and CSS Rick Ells Senior Computer Specialist Computing & Communications University of Washington Seattle, Washington

2. University of WashingtonComputing & 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 ProjectW3CThe Web Standards Project

3. University of WashingtonComputing & Communications 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

4. University of WashingtonComputing & Communications A Little History

5. University of WashingtonComputing & Communications UW Projects UW Home site –Home Page: http://www.washington.edu/http://www.washington.edu/ –UWIN: http://www.washington.edu/uwin/http://www.washington.edu/uwin/ School of Public Health –http://sphcm.washington.edu/http://sphcm.washington.edu/ C&C.Net –In development

6. University of WashingtonComputing & Communications Projects – UW Home UW Home Page and UWIN Page

7. University of WashingtonComputing & Communications Projects – UW Home Standard page templates Header Footer

8. University of WashingtonComputing & 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/ http://staff.washington.edu/fmf/xhtml+css/

9. University of WashingtonComputing & Communications Projects – Public Health

10. University of WashingtonComputing & 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

11. University of WashingtonComputing & Communications Projects – C&C.Net

12. University of WashingtonComputing & 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

13. University of WashingtonComputing & 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

14. University of WashingtonComputing & 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

15. University of WashingtonComputing & Communications Converting to XHTML and CSS

16. University of WashingtonComputing & Communications Converting to XHTML and CSS

17. University of WashingtonComputing & 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

18. University of WashingtonComputing & 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

19. University of WashingtonComputing & 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

20. University of WashingtonComputing & 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

21. University of WashingtonComputing & Communications Benefits Reduced load on server Site portability –Moving to a new OS is much less of a problem

22. University of WashingtonComputing & Communications Challenges A Few People Managing Many Pages Many People Managing a Few Pages

23. University of WashingtonComputing & Communications Challenges Skill inertia –Not ready to relearn HTML Web management balkanization –Top down standards setting not possible in many organizations

24. University of WashingtonComputing & Communications Challenges Non-standards compliant tools –MS Word –Old editors New tools with old methods –.Net Web Solution

25. University of WashingtonComputing & 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 well- formed

26. University of WashingtonComputing & 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?

27. University of WashingtonComputing & 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/ http://haughey.com/csshorrors/ –CSS Bugs and Workarounds – http://css.nu/pointers/bugs.html http://css.nu/pointers/bugs.html

28. University of WashingtonComputing & 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

29. University of WashingtonComputing & Communications Resources Standards –W3C – http://www.w3c.orghttp://www.w3c.org –Web Standards - http://www.webstandards.org/ http://www.webstandards.org/

30. University of WashingtonComputing & Communications Resources Tools –Tidy – http://tidy.sourceforge.net/ –W3C Validators HTML Validator – http://validator.w3.org/http://validator.w3.org/ CSS Validator – http://jigsaw.w3.org/css-validator/http://jigsaw.w3.org/css-validator/ –TopStyle – http://www.bradsoft.com/topstyle/http://www.bradsoft.com/topstyle/ –StyleMaster – http://www.westciv.com/style_master/ http://www.westciv.com/style_master/ –HTML-Kit – http://www.chami.com/html-kit/http://www.chami.com/html-kit/

31. University of WashingtonComputing & Communications Resources Standards-based sites –New York Public Libraries Style GuideNew York Public Libraries Style Guide –MSNMSN –WiredWired –School of Public HealthSchool of Public Health

32. University of WashingtonComputing & Communications Resources WebDev Share PresentationsWebDev Share –Implementing Standards-Based Web Design Support Richard B. Ells, University of WashingtonImplementing Standards-Based Web Design Support –CSS How to for Beginners: Creating and using effective style sheets Michael Adams, University of Northern ColoradoCSS How to for Beginners: Creating and using effective style sheets –Cascading Style Sheets Paul Alford, Indiana UniversityCascading Style Sheets –CSS Benefits of Web Standards Daniel Frommelt & Sean Sieg, University of Wisconsin - PlattevilleCSS Benefits of Web Standards