Скачать презентацию University of Washington Computing Communications Standards-Based Web Скачать презентацию University of Washington Computing Communications Standards-Based Web

f7aefc4ba13279baa27e483ef793dbf1.ppt

  • Количество слайдов: 32

University of Washington Computing & Communications Standards-Based Web Publishing XHTML and CSS Rick Ells 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 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 • • 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 A Little History

University of Washington Computing & Communications UW Projects • UW Home site – Home 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 Page and UWIN Page

University of Washington Computing & Communications Projects – UW Home Standard page templates Header University of Washington Computing & Communications Projects – UW Home Standard page templates Header Footer

University of Washington Computing & Communications Projects – UW Home • HTML becomes almost 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

University of Washington Computing & Communications Projects – Public Health • Server load is 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

University of Washington Computing & Communications Projects – C&C. Net • Working with MS 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 • • • 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 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 University of Washington Computing & Communications Converting to XHTML and CSS

University of Washington Computing & Communications Converting to XHTML and CSS • Separate presentation 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 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 – 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 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 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 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 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 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 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 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 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 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 – 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. 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 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 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