Standards and Increasing Maintainability on Web-based Systems

Standards and Increasing Standards and Increasing Maintainability on Web-Maintainability on Web-

based Systems based Systems

James EatonJames Eaton

SE411SE411

2/16/20062/16/2006

22

OverviewOverview

Advantages of using standardsAdvantages of using standards Costs of using standardsCosts of using standards OrganizationsOrganizations HTMLHTML CSSCSS JavaScriptJavaScript XMLXML AccessibilityAccessibility

Information from www.webstandards.orInformation from www.webstandards.orgg

33

Why Are Standards ImportantWhy Are Standards Important

Lower Cost of ProductionLower Cost of Production Allows more people and devices to access Allows more people and devices to access

web sitesweb sites Allows for backward compatibilityAllows for backward compatibility Search engines can do a better jobSearch engines can do a better job Increase MaintainabilityIncrease Maintainability


44

Costs of No StandardsCosts of No Standards

Some web sites could only be displayed Some web sites could only be displayed correctly on a certain browsercorrectly on a certain browser

Developers would have to write the same Developers would have to write the same code multiple times for each browser and code multiple times for each browser and some people would still be left outsome people would still be left out

Loss of appeal and functionality to be Loss of appeal and functionality to be multiple browser compliantmultiple browser compliant


55

Costs of No StandardsCosts of No Standards

Tricks that would work for getting pages to Tricks that would work for getting pages to display correctly on multiple browsers display correctly on multiple browsers would not work in the next generation of would not work in the next generation of browsersbrowsers

People with disabilities cannot access web People with disabilities cannot access web sitessites

66

OrganizationsOrganizations

W3C – World Wide Web ConsortiumW3C – World Wide Web Consortium ISO – International Organization for ISO – International Organization for

StandardizationStandardization ECMA – European Association for ECMA – European Association for

Standardizing Information and Standardizing Information and Communications SystemsCommunications Systems

Information from www.w3schools.comInformation from www.w3schools.com 77

HTMLHTML

Stands for Hyper Text Markup LanguageStands for Hyper Text Markup Language An HTML file can be created using a text An HTML file can be created using a text

editor like notepad or a program like front editor like notepad or a program like front pagepage

An HTML file is a text file that contains An HTML file is a text file that contains markup tags which tell the Web browser markup tags which tell the Web browser how to display the pagehow to display the page

88

Example HTMLExample HTML

<html><html>

<head><title>Example</title></head><head><title>Example</title></head>

<body><body>

<p><font color=“#00FF00”>simple</font><p><font color=“#00FF00”>simple</font>

<p><img src=“example.bmp” alt=“example”></p><p><img src=“example.bmp” alt=“example”></p>

<p><font color=“#00FF00”>green<p><font color=“#00FF00”>green

</body></body>

</html></html>

Information from www.w3.orgInformation from www.w3.org 99

HTML 4.01HTML 4.01

Original HTML was designed to define the Original HTML was designed to define the content of a document and not intended to content of a document and not intended to contain tags for formattingcontain tags for formatting

All formatting can be removed and put into All formatting can be removed and put into a style sheeta style sheet

Specification http://www.w3.org/TR/html4/Specification http://www.w3.org/TR/html4/

1010

Example of HTML 4.01Example of HTML 4.01

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


XHTMLXHTML

Extensible Hyper Text Markup LanguageExtensible Hyper Text Markup Language XHTML hopes to replace HTMLXHTML hopes to replace HTML XHTML is stricter than HTML 4.01 but is XHTML is stricter than HTML 4.01 but is

almost identicalalmost identical XHTML allows you to write well-formed XHTML allows you to write well-formed

documents that are also backward documents that are also backward compatiblecompatible

1212

XHTMLXHTML

““Ensures that elements are properly nested”Ensures that elements are properly nested” <b><i>This text is bold and italic</i></b><b><i>This text is bold and italic</i></b>

““XHTML documents must be well-formed”XHTML documents must be well-formed” <html><head></head><body></body></html><html><head></head><body></body></html>

““Tag names must be in lowercase”Tag names must be in lowercase” <P>Tags in HTML aren’t case sensitive</p><P>Tags in HTML aren’t case sensitive</p>

““All XHTML elements must be closed”All XHTML elements must be closed” <p>This does not follow XHTML<p>This does not follow XHTML

<p>But will work in HTML<p>But will work in HTML

Information from www.w3schools.com


CSSCSS

Cascading Style SheetCascading Style Sheet Allows for separating structure and presentationAllows for separating structure and presentation Styles define how to display HTML elementsStyles define how to display HTML elements Cascading Order:Cascading Order:

1.1. Browser DefaultBrowser Default

2.2. External Style SheetExternal Style Sheet

3.3. Internal Style SheetInternal Style Sheet

4.4. Internal StyleInternal Style

1414

Example of Bad CodeExample of Bad Code

<html><html>

<head><title>Example</title></head><head><title>Example</title></head>

<body><body>

<p><font color=“#00FF00”>simple</font><p><font color=“#00FF00”>simple</font>

<p><img src=“example.bmp” alt=“example></p><p><img src=“example.bmp” alt=“example></p>

<p><font color=“#00FF00”>green<p><font color=“#00FF00”>green

</body></body>

</html></html>

1515

Same Example CodeSame Example Code

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

1616

ValidateValidate

http://www.w3.org/QA/Tools/#validatorshttp://www.w3.org/QA/Tools/#validators www.uwplatt.eduwww.uwplatt.edu is XHTML 1.0 Strict is XHTML 1.0 Strict W3C is a source of recommendations for W3C is a source of recommendations for

Web designers but is not a standards Web designers but is not a standards groupgroup

ISO is a standards group that can give ISO is a standards group that can give their seal of approvaltheir seal of approval

1717

StandardsStandards

HTML 4 is an SGML application HTML 4 is an SGML application conforming to International Standard ISO conforming to International Standard ISO 8879 -- Standard Generalized Markup 8879 -- Standard Generalized Markup Language [ISO8879] Language [ISO8879]

SGML is a language for describing markup SGML is a language for describing markup languageslanguages

Information from www.w3.org

Infomation from www.w3.orgInfomation from www.w3.org 1818

Validating HTMLValidating HTML

An HTML file is validated against a DTDAn HTML file is validated against a DTD http://validator.w3.org/http://validator.w3.org/ DTD stands for Document Type DefinitionDTD stands for Document Type Definition DTDs define the document structure with a DTDs define the document structure with a

list of legal elementslist of legal elements Three document types available for HTML Three document types available for HTML

are Strict, Transitional, and Framesetare Strict, Transitional, and Frameset The DTD must be the first line in the fileThe DTD must be the first line in the file


StrictStrict <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

"http://www.w3.org/TR/html4/strict.dtd">"http://www.w3.org/TR/html4/strict.dtd">

Strict follows the W3C specification exactly Strict follows the W3C specification exactly and does not allow deprecated elements and does not allow deprecated elements or attributesor attributes

It does not allow framesetsIt does not allow framesets


TransitionalTransitional <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01

Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

This allows everything the strict DTD This allows everything the strict DTD allows and allows deprecated elements allows and allows deprecated elements and attributesand attributes

This also does not allow framesetsThis also does not allow framesets


FramesetFrameset <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01

Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd">Frameset//EN" "http://www.w3.org/TR/html4/frameset.dtd"> This includes everything in the transitional This includes everything in the transitional

DTD and allows framesetsDTD and allows framesets


Validating XHTMLValidating XHTML

Works the same as HTML but would Works the same as HTML but would include these DTDs at the top of your file include these DTDs at the top of your file insteadinstead

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> transitional.dtd">

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">


Validating CSSValidating CSS

Specification 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 extensionsFirefox extensions


JavaScriptJavaScript

JavaScript is a scripting language that JavaScript is a scripting language that allows for additional interactivityallows for additional interactivity Dynamic TextDynamic Text Validate DataValidate Data

JavaScript is nothing like JavaJavaScript is nothing like Java ECMAScript is the official nameECMAScript is the official name ECMA is standardizing JavaScriptECMA is standardizing JavaScript


JavaScriptJavaScript

http://www.ecma-international.org/http://www.ecma-international.org/publications/standards/Ecma-262.htmpublications/standards/Ecma-262.htm


XMLXML

Extensible Markup LanguageExtensible Markup Language XML was designed to describe dataXML was designed to describe data XML tags are not predefinedXML tags are not predefined XML should be self-descriptiveXML should be self-descriptive http://www.w3.org/TR/2004/REC-xml-http://www.w3.org/TR/2004/REC-xml-

20040204/20040204/

2727

Example XMLExample XML

<?xml version="1.0" encoding="ISO-8859-1"?> <?xml version="1.0" encoding="ISO-8859-1"?>

<shelve><shelve><book><book>

<title>XSLT Cookbook</title><title>XSLT Cookbook</title><author>Sal Mangano</author><author>Sal Mangano</author>

</book></book>......

</shelve></shelve>


XML ValidationXML Validation

http://www.w3.org/2001/03/webdata/xsvhttp://www.w3.org/2001/03/webdata/xsv XML definitionXML definition

<?xml version="1.0" encoding="ISO-8859-1"?<?xml version="1.0" encoding="ISO-8859-1"?> >


XSLTXSLT

Extensible Stylesheet Language Extensible Stylesheet Language TransformationsTransformations

http://www.w3.org/TR/xslthttp://www.w3.org/TR/xslt XSLT can transform XML into different XSLT can transform XML into different

formats like HTML or WML to be displayed formats like HTML or WML to be displayed on the correct browseron the correct browser

XSL is like a stylesheet for XMLXSL is like a stylesheet for XML <?xml-stylesheet type="text/xsl" <?xml-stylesheet type="text/xsl"

href=“shelve.xsl"?> href=“shelve.xsl"?>

3030

Example XSLTExample XSLT<?xml version="1.0" encoding="ISO-8859-1"?><?xml version="1.0" encoding="ISO-8859-1"?><xsl:stylesheet version="1.0"> <xsl:stylesheet version="1.0"> <xsl:template match="/"><xsl:template match="/">

<html> <html> <body> <body>

<h1>Shelve</h1> <h1>Shelve</h1> <table> <table> <tr> <tr>

<th>Title</th> <th>Title</th> <th>Author</th> <th>Author</th>

</tr> </tr> <xsl:for-each select="catalog/book"> <xsl:for-each select="catalog/book"> <tr> <tr>

<td><xsl:value-of select="title"/></td> <td><xsl:value-of select="title"/></td> <td><xsl:value-of select=“author"/></td> <td><xsl:value-of select=“author"/></td>

</tr> </tr> </xsl:for-each> </xsl:for-each> </table> </table>

</body> </body> </html> </html>

</xsl:template> </xsl:template> </xsl:stylesheet> </xsl:stylesheet>


Server-Side ScriptingServer-Side Scripting

Dynamically edit, change, or add any Dynamically edit, change, or add any content of a Web pagecontent of a Web page

Respond to queries or data submitted from Respond to queries or data submitted from HTML formsHTML forms


AccessibilityAccessibility

WAI – Web Accessibility InitiativeWAI – Web Accessibility Initiative Created by W3C in 1997Created by W3C in 1997 Set of guidelines on how to make Set of guidelines on how to make

information accessible to people with information accessible to people with disabilities and more browsersdisabilities and more browsers

http://www.w3.org/WAI/http://www.w3.org/WAI/


Reasons to Increase AccessibilityReasons to Increase Accessibility

It will improve your reputation and imageIt will improve your reputation and image It will improve your customer satisfactionIt will improve your customer satisfaction It will increase your number of visitorsIt will increase your number of visitors It will let your visitors stay longer at your It will let your visitors stay longer at your

sitesite It will increase the number of returning It will increase the number of returning

visitorsvisitors It will make your site more usable also for It will make your site more usable also for

people with no disabilitiespeople with no disabilities

Infromation from www.w3schools.comInfromation from www.w3schools.com 3434

Reasons to Increase AccessibilityReasons to Increase Accessibility

It will make your site more usable for users It will make your site more usable for users with images turned offwith images turned off

It will make your site more usable for users It will make your site more usable for users with older equipmentwith older equipment

It will let you reach the fastest growing It will let you reach the fastest growing population: older peoplepopulation: older people


Things to ConsiderThings to Consider

Use the alt attributeUse the alt attribute Use a short but descriptive titleUse a short but descriptive title Use relative size valuesUse relative size values Avoid stylish fontsAvoid stylish fonts Always define a background colorAlways define a background color Watch for color contrastsWatch for color contrasts


AccessibilityAccessibility

Search engines can index information Search engines can index information accuratelyaccurately

Newer web browsers will be able to Newer web browsers will be able to access old pagesaccess old pages

Validators can be used to find errorsValidators can be used to find errors Transition to new devices like PDAsTransition to new devices like PDAs

3737

ConclusionConclusion

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

3838

ReferencesReferences

www.ecma-international.orgwww.ecma-international.org www.w3.orgwww.w3.org www.w3schools.comwww.w3schools.com www.webstandards.orgwww.webstandards.org www.csszengarden.comwww.csszengarden.com

Documents

Standards and Increasing Maintainability on Web-based Systems