Download presentation
Presentation is loading. Please wait.
1
Standards and Increasing Maintainability on Web- based Systems James Eaton SE4112/16/2006
2
2 Overview Advantages of using standards Costs of using standards Organizations HTML CSS JavaScript XML Accessibility
3
Information from www.webstandards.org 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
4
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
5
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
6
6 Organizations W3C – World Wide Web Consortium ISO – International Organization for Standardization ECMA – European Association for Standardizing Information and Communications Systems
7
Information from www.w3schools.com 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
8
8 Example HTML <html><head><title>Example</title></head><body> simple simple green green</body></html>
9
Information from www.w3.org 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/
10
10 Example of HTML 4.01 <html><head><title>Example</title> p { color: green } </style></head><body><p>simple</p> <p>green</p></body></html>
11
Information from www.w3schools.com 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
12
12 XHTML “Ensures that elements are properly nested” This text is bold and italic This text is bold and italic “XHTML documents must be well-formed” “Tag names must be in lowercase” Tags in HTML aren’t case sensitive Tags in HTML aren’t case sensitive “All XHTML elements must be closed” This does not follow XHTML This does not follow XHTML But will work in HTML But will work in HTML Information from www.w3schools.com
13
13 CSS Cascading Style Sheet Allows for separating structure and presentation Styles define how to display HTML elements Cascading Order: 1. Browser Default 2. External Style Sheet 3. Internal Style Sheet 4. Internal Style
14
14 Example of Bad Code <html><head><title>Example</title></head><body> simple simple green green</body></html>
15
15 Same Example Code <html><head><title>Example</title> p { color: green } </style></head><body><p>simple</p> <p>green</p></body></html>
16
16 Validate http://www.w3.org/QA/Tools/#validators http://www.w3.org/QA/Tools/#validators www.uwplatt.edu is XHTML 1.0 Strict www.uwplatt.edu 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
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
![17 Standards HTML 4 is an SGML application conforming to International Standard ISO Standard Generalized Markup Language [ISO8879] SGML is a language for describing markup languages Information from](http://images.slideplayer.com/12/3415153/slides/slide_17.jpg "17 Standards HTML 4 is an SGML application conforming to International Standard ISO Standard Generalized Markup Language [ISO8879] SGML is a language for describing markup languages Information from")
18
Infomation 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
19
Information from www.w3.org 19 Strict Strict follows the W3C specification exactly and does not allow deprecated elements or attributes It does not allow framesets
20
Information from www.w3.org 20 Transitional This allows everything the strict DTD allows and allows deprecated elements and attributes This also does not allow framesets
21
Information from www.w3.org 21 Frameset This includes everything in the transitional DTD and allows framesets
22
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
23
Information from www.w3.org 23 Validating CSS Specification http://www.w3.org/TR/REC-CSS2/ http://www.w3.org/TR/REC-CSS2/ http://jigsaw.w3.org/css-validator/ http://jigsaw.w3.org/css-validator/ Firefox extensions
24
Information from www.w3schools.com 24 JavaScript JavaScript is a scripting language that allows for additional interactivity Dynamic Text Dynamic Text Validate Data Validate Data JavaScript is nothing like Java ECMAScript is the official name ECMA is standardizing JavaScript
25
Information from www.w3schools.com 25 JavaScript http://www.ecma- international.org/publications/standards/Ec ma-262.htm
26
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/
27
27 Example XML <shelve><book> XSLT Cookbook XSLT Cookbook Sal Mangano Sal Mangano </book>...</shelve>
28
Information from www.w3.org 28 XML Validation http://www.w3.org/2001/03/webdata/xsv http://www.w3.org/2001/03/webdata/xsv XML definition
29
Information from www.w3schools.com 29 XSLT Extensible Stylesheet Language Transformations http://www.w3.org/TR/xslt 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
30
30 Example XSLT <html><body><h1>Shelve</h1><table><tr><th>Title</th><th>Author</th></tr> <tr> </tr></xsl:for-each></table></body></html></xsl:template></xsl:stylesheet>
31
Information from www.w3schools.com 31 Server-Side Scripting Dynamically edit, change, or add any content of a Web page Respond to queries or data submitted from HTML forms
32
Information from www.w3.org 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/
33
Information from www.w3schools.com 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
34
Infromation 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
35
Information 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
36
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
37
37 Conclusion By following standards, development time can be decreased, maintainability can be increased, and debugging becomes easier.
38
38 References www.ecma-international.org www.w3.org www.w3.org www.w3schools.com www.w3schools.com www.webstandards.org www.csszengarden.com
Similar presentations
