Standards and Increasing Maintainability on Webbased Systems

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

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
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
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

8
Example HTML

• Example
• simple
• green

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
Example of HTML 4.01

• Example
• p color green
• simple
• green

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
XHTML

• Ensures that elements are properly nested
• This text is bold and italic
• XHTML documents must be well-formed
• Tag names must be in lowercase
• Tags in HTML arent case sensitive
• All XHTML elements must be closed
• This does not follow XHTML
• 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

14
Example of Bad Code

• Example
• simple
• green

15
Same Example Code

• Example
• p color green
• simple
• green

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

19
Strict

• "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

20
Transitional

• Transitional//EN" "http//www.w3.org/TR/html4/loos
  e.dtd"
• This allows everything the strict DTD allows and
  allows deprecated elements and attributes
• This also does not allow framesets

21
Frameset

• Frameset//EN" "http//www.w3.org/TR/html4/frameset
  .dtd"
• This includes everything in the transitional DTD
  and allows framesets

22
Validating XHTML

• Works the same as HTML but would include these
  DTDs at the top of your file instead
• Strict//EN" "http//www.w3.org/TR/xhtml1/DTD/xhtml
  1-strict.dtd"
• Transitional//EN" "http//www.w3.org/TR/xhtml1/DTD
  /xhtml1-transitional.dtd"
• Frameset//EN" "http//www.w3.org/TR/xhtml1/DTD/xht
  ml1-frameset.dtd"

23
Validating CSS

• Specification http//www.w3.org/TR/REC-CSS2/
• http//jigsaw.w3.org/css-validator/
• Firefox extensions

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

25
JavaScript

• http//www.ecma-international.org/publications/sta
  ndards/Ecma-262.htm

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
Example XML

• XSLT Cookbook
• Sal Mangano
• .
• .
• .

28
XML Validation

• http//www.w3.org/2001/03/webdata/xsv
• XML definition

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
• hrefshelve.xsl"?

30
Example XSLT

• Shelve
• Title
• Author

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
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
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
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
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
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
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