1 / 38

Standards and Increasing Maintainability on Web-based Systems

Standards and Increasing Maintainability on Web-based Systems. James Eaton SE411 2/16/2006. Overview. Advantages of using standards Costs of using standards Organizations HTML CSS JavaScript XML Accessibility. Why Are Standards Important. Lower Cost of Production

meadow
Télécharger la présentation

Standards and Increasing Maintainability on Web-based Systems

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Standards and Increasing Maintainability on Web-based Systems James Eaton SE411 2/16/2006

  2. Overview • Advantages of using standards • Costs of using standards • Organizations • HTML • CSS • JavaScript • XML • Accessibility

  3. Why Are Standards Important • Lower Cost of Production • Allows more people and devices to access web sites • Allows for backward compatibility • Search engines can do a better job • Increase Maintainability Information from www.webstandards.org

  4. Costs of No Standards • Some web sites could only be displayed correctly on a certain browser • Developers would have to write the same code multiple times for each browser and some people would still be left out • Loss of appeal and functionality to be multiple browser compliant Information from www.webstandards.org

  5. Costs of No Standards • Tricks that would work for getting pages to display correctly on multiple browsers would not work in the next generation of browsers • People with disabilities cannot access web sites Information from www.webstandards.org

  6. Organizations • W3C – World Wide Web Consortium • ISO – International Organization for Standardization • ECMA – European Association for Standardizing Information and Communications Systems

  7. HTML • Stands for Hyper Text Markup Language • An HTML file can be created using a text editor like notepad or a program like front page • An HTML file is a text file that contains markup tags which tell the Web browser how to display the page Information from www.w3schools.com

  8. Example HTML <html> <head><title>Example</title></head> <body> <p><font color=“#00FF00”>simple</font> <p><img src=“example.bmp” alt=“example”></p> <p><font color=“#00FF00”>green </body> </html>

  9. HTML 4.01 • Original HTML was designed to define the content of a document and not intended to contain tags for formatting • All formatting can be removed and put into a style sheet • Specification http://www.w3.org/TR/html4/ Information from www.w3.org

  10. Example of HTML 4.01 <html> <head> <title>Example</title> <style type=“text/css”> p { color: green } </style> </head> <body> <p>simple</p> <p><img src=“example.bmp” alt=“example”></p> <p>green</p> </body> </html>

  11. XHTML • Extensible Hyper Text Markup Language • XHTML hopes to replace HTML • XHTML is stricter than HTML 4.01 but is almost identical • XHTML allows you to write well-formed documents that are also backward compatible Information from www.w3schools.com

  12. XHTML • “Ensures that elements are properly nested” • <b><i>This text is bold and italic</i></b> • “XHTML documents must be well-formed” • <html><head></head><body></body></html> • “Tag names must be in lowercase” • <P>Tags in HTML aren’t case sensitive</p> • “All XHTML elements must be closed” • <p>This does not follow XHTML <p>But will work in HTML Information from www.w3schools.com

  13. CSS • Cascading Style Sheet • Allows for separating structure and presentation • Styles define how to display HTML elements • Cascading Order: • Browser Default • External Style Sheet • Internal Style Sheet • Internal Style Information from www.w3schools.com

  14. Example of Bad Code <html> <head><title>Example</title></head> <body> <p><font color=“#00FF00”>simple</font> <p><img src=“example.bmp” alt=“example></p> <p><font color=“#00FF00”>green </body> </html>

  15. Same Example Code <html> <head> <title>Example</title> <style type=“text/css”> p { color: green } </style> </head> <body> <p>simple</p> <p><img src=“example.bmp” alt=“example /></p> <p>green</p> </body> </html>

  16. Validate • http://www.w3.org/QA/Tools/#validators • www.uwplatt.edu is XHTML 1.0 Strict • W3C is a source of recommendations for Web designers but is not a standards group • ISO is a standards group that can give their seal of approval

  17. Standards • HTML 4 is an SGML application conforming to International Standard ISO 8879 -- Standard Generalized Markup Language [ISO8879] • SGML is a language for describing markup languages Information from www.w3.org

  18. Validating HTML • An HTML file is validated against a DTD • http://validator.w3.org/ • DTD stands for Document Type Definition • DTDs define the document structure with a list of legal elements • Three document types available for HTML are Strict, Transitional, and Frameset • The DTD must be the first line in the file Infomation from www.w3.org

  19. Strict • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> • Strict follows the W3C specification exactly and does not allow deprecated elements or attributes • It does not allow framesets Information from www.w3.org

  20. Transitional • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> • This allows everything the strict DTD allows and allows deprecated elements and attributes • This also does not allow framesets Information from www.w3.org

  21. Frameset • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> • This includes everything in the transitional DTD and allows framesets Information from www.w3.org

  22. Validating XHTML • Works the same as HTML but would include these DTDs at the top of your file instead • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> Information from www.w3.org

  23. Validating CSS • Specification http://www.w3.org/TR/REC-CSS2/ • http://jigsaw.w3.org/css-validator/ • Firefox extensions Information from www.w3.org

  24. JavaScript • JavaScript is a scripting language that allows for additional interactivity • Dynamic Text • Validate Data • JavaScript is nothing like Java • ECMAScript is the official name • ECMA is standardizing JavaScript Information from www.w3schools.com

  25. JavaScript • http://www.ecma-international.org/publications/standards/Ecma-262.htm Information from www.w3schools.com

  26. XML • Extensible Markup Language • XML was designed to describe data • XML tags are not predefined • XML should be self-descriptive • http://www.w3.org/TR/2004/REC-xml-20040204/ Information from www.w3schools.com

  27. Example XML <?xml version="1.0" encoding="ISO-8859-1"?> <shelve> <book> <title>XSLT Cookbook</title> <author>Sal Mangano</author> </book> . . . </shelve>

  28. XML Validation • http://www.w3.org/2001/03/webdata/xsv • XML definition • <?xml version="1.0" encoding="ISO-8859-1"?> Information from www.w3.org

  29. XSLT • Extensible Stylesheet Language Transformations • http://www.w3.org/TR/xslt • XSLT can transform XML into different formats like HTML or WML to be displayed on the correct browser • XSL is like a stylesheet for XML • <?xml-stylesheet type="text/xsl" href=“shelve.xsl"?> Information from www.w3schools.com

  30. Example XSLT <?xml version="1.0" encoding="ISO-8859-1"?> <xsl:stylesheet version="1.0"> <xsl:template match="/"> <html> <body> <h1>Shelve</h1> <table> <tr> <th>Title</th> <th>Author</th> </tr> <xsl:for-each select="catalog/book"> <tr> <td><xsl:value-of select="title"/></td> <td><xsl:value-of select=“author"/></td> </tr> </xsl:for-each> </table> </body> </html> </xsl:template> </xsl:stylesheet>

  31. Server-Side Scripting • Dynamically edit, change, or add any content of a Web page • Respond to queries or data submitted from HTML forms Information from www.w3schools.com

  32. Accessibility • WAI – Web Accessibility Initiative • Created by W3C in 1997 • Set of guidelines on how to make information accessible to people with disabilities and more browsers • http://www.w3.org/WAI/ Information from www.w3.org

  33. Reasons to Increase Accessibility • It will improve your reputation and image • It will improve your customer satisfaction • It will increase your number of visitors • It will let your visitors stay longer at your site • It will increase the number of returning visitors • It will make your site more usable also for people with no disabilities Information from www.w3schools.com

  34. Reasons to Increase Accessibility • It will make your site more usable for users with images turned off • It will make your site more usable for users with older equipment • It will let you reach the fastest growing population: older people Infromation from www.w3schools.com

  35. Things to Consider • Use the alt attribute • Use a short but descriptive title • Use relative size values • Avoid stylish fonts • Always define a background color • Watch for color contrasts Information from www.w3schools.com

  36. Accessibility • Search engines can index information accurately • Newer web browsers will be able to access old pages • Validators can be used to find errors • Transition to new devices like PDAs Information from www.w3schools.com

  37. Conclusion • By following standards, development time can be decreased, maintainability can be increased, and debugging becomes easier.

  38. References • www.ecma-international.org • www.w3.org • www.w3schools.com • www.webstandards.org • www.csszengarden.com

More Related