380 likes | 485 Views
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
E N D
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 • 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
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
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
Organizations • W3C – World Wide Web Consortium • ISO – International Organization for Standardization • ECMA – European Association for Standardizing Information and Communications Systems
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
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>
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
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>
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
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
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
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>
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>
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
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
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
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
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
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
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
Validating CSS • Specification http://www.w3.org/TR/REC-CSS2/ • http://jigsaw.w3.org/css-validator/ • Firefox extensions Information from www.w3.org
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
JavaScript • http://www.ecma-international.org/publications/standards/Ecma-262.htm Information from www.w3schools.com
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
Example XML <?xml version="1.0" encoding="ISO-8859-1"?> <shelve> <book> <title>XSLT Cookbook</title> <author>Sal Mangano</author> </book> . . . </shelve>
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
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
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>
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
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
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
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
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
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
Conclusion • By following standards, development time can be decreased, maintainability can be increased, and debugging becomes easier.
References • www.ecma-international.org • www.w3.org • www.w3schools.com • www.webstandards.org • www.csszengarden.com