Survey
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
* Your assessment is very important for improving the workof artificial intelligence, which forms the content of this project
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