Standards and Increasing Maintainability on Web
Download
Report
Transcript Standards and Increasing Maintainability on Web
Standards and Increasing
Maintainability on Webbased Systems
James Eaton
SE411
2/16/2006
Overview
Advantages
of using standards
Costs of using standards
Organizations
HTML
CSS
JavaScript
XML
Accessibility
2
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
3
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
4
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
5
Organizations
– World Wide Web Consortium
ISO – International Organization for
Standardization
ECMA – European Association for
Standardizing Information and
Communications Systems
W3C
6
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
7
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>
8
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
9
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>
10
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
11
XHTML
“Ensures that elements are properly nested”
“XHTML documents must be well-formed”
<html><head></head><body></body></html>
“Tag names must be in lowercase”
<b><i>This text is bold and italic</i></b>
<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
12
CSS
Cascading Style Sheet
Allows for separating structure and presentation
Styles define how to display HTML elements
Cascading Order:
1.
2.
3.
4.
Browser Default
External Style Sheet
Internal Style Sheet
Internal Style
Information from www.w3schools.com
13
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>
14
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>
15
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
16
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
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
18
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
19
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
20
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
21
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/xhtml1transitional.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
22
Validating CSS
Specification http://www.w3.org/TR/REC-CSS2/
http://jigsaw.w3.org/css-validator/
Firefox
extensions
Information from www.w3.org
23
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
24
JavaScript
http://www.ecma-
international.org/publications/standards/Ec
ma-262.htm
Information from www.w3schools.com
25
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-xml20040204/
Information from www.w3schools.com
26
Example XML
<?xml version="1.0" encoding="ISO-8859-1"?>
<shelve>
<book>
<title>XSLT Cookbook</title>
<author>Sal Mangano</author>
</book>
.
.
.
</shelve>
27
XML Validation
http://www.w3.org/2001/03/webdata/xsv
XML definition
<?xml version="1.0" encoding="ISO-88591"?>
Information from www.w3.org
28
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
29
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>
30
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
31
Accessibility
– 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/
WAI
Information from www.w3.org
32
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
33
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
34
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
35
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
36
Conclusion
By
following standards, development time
can be decreased, maintainability can be
increased, and debugging becomes
easier.
37
References
www.ecma-international.org
www.w3.org
www.w3schools.com
www.webstandards.org
www.csszengarden.com
38