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 (W 3 C) , 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 Math. ML 1. 01 Math. ML 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 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. Net 2003 • 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 CSS 2 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 – W 3 C – http: //www. w 3 c. org – Web Standards http: //www. webstandards. org/
University of Washington Computing & Communications Resources • Tools – Tidy – http: //tidy. sourceforge. net/ – W 3 C Validators • HTML Validator – http: //validator. w 3. org/ • CSS Validator – http: //jigsaw. w 3. org/css-validator/ – Top. Style – http: //www. bradsoft. com/topstyle/ – Style. Master – 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 • Web. Dev 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 Washington Computing Communications Standards-Based Web
f7aefc4ba13279baa27e483ef793dbf1.ppt