Download Standards and Increasing Maintainability on Web

Standards and Increasing Maintainability on Web-based
Systems
James Eaton
Department of Software Engineering
University of Wisconsin – Platteville
Platteville, Wisconsin 53818
[email protected]
Abstract
This paper will cover Standards and Increasing Maintainability on Web-based Systems
and will show how standards can improve Web-based code. When coding, it is always a
good practice to follow certain guidelines and standards so that it is easy to go back and
see exactly what the code does and how it can be changed. This paper will cover where
you can find standards and guidelines and how you can test to see if you are following
these standards appropriately. It will go into what standards there are for HTML,
XHTML, CSS, and touch on other commonly used Web-based code. This paper will
show the reasons why it is important to follow standards and increase maintainability.
Introduction
The World Wide Web is viewed as a place where people can work together and share
information. This includes everything from business, to social, to educational sites. The
problem is that originally there were few standards. As more sites were being developed,
people wanted to make their sites stand out so that people would want to visit their site.
Companies making browsers would come out with new features to try and get as many
people using their product as possible. This became a headache for Web developers
because they could make a page that would look great if their clients used one browser;
but if their clients used a different browser, it would look terrible [2].
To combat this, Web developers would insert little tricks into their pages that would
make their pages look acceptable on all the popular browsers. This was a temporary fix
and caused many problems down the road. As browsers developed, the little tricks that
used to work on old browsers did not work on the newer versions. This caused many
pages to look broken again and maintainability costs kept rising with each new browser
and version they chose to support [2].
Standards had to be introduced to keep costs down. Originally, some people would argue
that standards were limiting and should not have been used. But developers were tired of
having to develop pages specifically for certain browsers and having to go back and fix
their pages each time a new browser version came out, so standards were developed.
Web pages could now be developed for the standard. As browsers developed, they would
follow the standard so that previously developed pages would not have to be fixed after
each new version. Standards removed the tedious part of Web development allowing
more time to develop higher quality pages [1].
Another reason for introducing standards was to increase accessibility. This would allow
for people with special needs, like the blind or deaf, to use the Web along with people
using hand-held devices to browse the Web.
Organizations
For standards to take place, organizations had to be formed. The organizations had to
come up with very complete and official standards so that venders and developers would
follow the specified standards.
World Wide Web Consortium (W3C)
“The World Wide Web Consortium (W3C) is an international consortium where Member
organizations, a full-time staff, and the public work together to develop Web standards.
W3C’s Mission is: To lead the World Wide Web to its full potential by developing
protocols and guidelines that ensure long-term growth for the Web” [3]. This group is
known for it recommendations with HTML, XHTML, CSS, XML, and many other web
based projects.
International Organization for Standardization (ISO)
“ISO is a network of the national standards institutes of 156 countries, on the basis of one
member per country, with a Central Secretariat in Geneva, Switzerland, that coordinates
the system” [4].
European Association for Standardizing Information and Communications Systems
(Ecma)
“Ecma International is an industry association founded in 1961 and dedicated to the
standardization of Information and Communication Technology (ICT) and Consumer
Electronics (CE)” [5]. This group is well known for standardizing JavaScript.
HTML
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 with the
file extension htm or html that contains markup tags which tell the Web browser how to
display the page. HTML was never intended to contain tags for but was intended to
define the content of the document. This caused problems for developers when
formatting information had to be added all over the place. This became very expensive to
maintain [2].
Current HTML Standard
The HTML specification is currently at HTML 4.01 which is a sub-version of HTML 4.
By following this standard, all formatting information is removed and stored in a separate
style sheet. The standard also improves the internationalization of documents. W3C was
the organization responsible for putting together this standard. “HTML 4 is an SGML
application conforming to International Standard ISO 8879 – Standard Generalized
Markup Language” [3].
Validation
HTML files are validated against a document type definition (DTD). DTDs define the
document structure with a list of legal elements. The DTD must be the first line in the
file. There are three document types that are available for HTML which are strict,
transitional, and frameset [3].
Strict follows the W3C specification exactly and does not allow deprecated elements or
attributes. The DTD to insert is <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML
4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> [3].
Transitional allows everything the strict DTD allows and allows deprecated elements and
other attributes. The DTD to insert is <!DOCTYPE HTML PUBLIC "-//W3C//DTD
HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> [3].
Frameset allows everything the traditional allows and also allows framesets. The DTD to
insert is <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Frameset//EN"
"http://www.w3.org/TR/html4/frameset.dtd"> [3].
Once you are ready to check to see if your page is valid, go to http://validator.w3.org/ and
enter the page you want validated. It will give you the list of warnings or errors in the
page.
XHTML
XHTML stands for Extensible Hyper Text Markup Language. It 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. The big changes
from HTML 4.01 to XHTML is that it ensures that elements are properly nested,
XHTML documents must be well-formed, tag names must be in lowercase, and all
XHTML elements must be closed [2].
Current XHTML Standard
Because XHTML is relatively new, there is only one recommendation out for XHTML
making it XHTML 1.0. It is the eventual replacement for HTML so it builds off of
HTML 4. Most of this specification is spelling out the differences between XHTML and
HTML 4, but it also goes into defining what XHTML is and how it can be used [3].
Validation
XHTML files are validated in much the same way that HTML files are validated. These
have the same three document types available. Different DTDs have to be specified for
each one though to use the XHTML instead of the HTML 4.01 [3].
Strict: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> [3].
Traditional: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> [3].
Frameset: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd"> [3].
CSS
CSS stands for cascading style sheets. This is important because it allows for separating
structure and presentation. Styles define how to display HTML elements. HTML 4.01
specifies that CSS should be used to define the style. If multiple conflicting styles are
assigned to a particular piece of data, the order it uses to determine the style is the
internal style first, then the internal style sheet, then the external style sheet, and finally
the browser default [3]. The internal style is the HTML tag that is hard coded into the
page. The internal style sheet is an embedded CSS sheet specified in the head of the
HTML document. The external style sheet is when the CSS file is in a separate file but
included into the HTML document.
Current CSS Standard
CSS is at version 2.1. Version 1 contained all of the basic properties that almost all
profiles of CSS needed. Version 2 added positioning of elements, numbering, page
breaks, right to left text, and many other features that help pull as much of the formatting
out of the content as possible. Version 3 is currently in the works and will include things
like new selectors, fancier borders and backgrounds, vertical text, user interaction, speech
and more [3].
Validation
To validate a CSS go to http://jigsaw.w3.org/css-validator/ and enter the page you want
to have validated. It will give you any warnings or errors in your CSS page [3].
JavaScript
HTML is static. This makes it hard to seamlessly add dynamic components to your
pages. JavaScript is a scripting language that allows for additional interactivity.
Common uses for JavaScript is validating data and dynamically adding text. A common
misconception about JavaScript is that people think it is based off of Java. It has nothing
to do with Java, they are completely different languages [2].
JavaScript Standard
The official name for JavaScript is ECMAScript. It gets its name from the standardizing
company Ecma. The latest specification of ECMAScript is ECMA-262. JavaScript is a
combination of Netscape’s JavaScript and Microsoft’s JScript. JavaScript allows the
developer to manipulate Web page objects which are specified by the W3C Document
Object Model [2].
XML
XML stands for Extensible Markup Language. XML tags are designed to describe data.
Unlike HTML, XML tags are not predefined. XML should be self-descriptive [2].
Standard
The current W3C recommendation is XML 1.0 (third edition). This specification
conforms to the generalized markup language International Standard ISO-8879 [3].
Validation
To validate an XML, go to http://www.w3.org/2001/03/webdata/xsv and load the XML
that is to be validated. This will give any warnings or errors received when validating the
page [3].
XSLT
XSLT stands for Extensible Stylesheet Language Transformations. XSLT can transform
XML into different formats like HTML or WML to be displayed on the correct browser.
It can be looked at a lot like a stylesheet for XML. All the formatting occurs in the XSLT
and all the content is kept in the XML [2].
Standard
XSLT Version 2.0 is a candidate recommendation from W3C [3]. This means that it is
not yet a standard but they are reviewing it and improving it so that it can become a
standard.
Client-Side Scripting
Client-side scripting is very popular on the internet. It includes languages like JavaScript
that allow dynamic actions to occur on the static HTML. Other popular client-side
scripts are DHTML which is a combination of JavaScript, HTML, and CSS. VBScript is
a scripting language from Microsoft. WMLScript is a scripting language for use in WAP
browsers which are used in wireless devices like mobile phones [2].
Server-Side Scripting
Server-side scripting is used to dynamically edit, change, or add any content to a Web
page before it is sent from the server to the client. This allows responses to queries or
data that has been submitted from HTML forms [2]. Some examples of server-side
scripting are PHP, Ruby, Perl, JSP, ASP, and SQL.
Accessibility
One of the main reasons for using standards is to increase accessibility. This is why the
Web Accessibility Initiative was created. Increasing accessibility means to help people
with disabilities use the internet, to help search engines index information accurately, to
help newer Web browsers access old pages, and to help transition new devices like PDAs
[2].
There are many reasons why Web developers would want to increase accessibility to
their site [2]:
 It will improve the Web site’s reputation and image.
 Customers will be more satisfied with the site.
 More people will visit the site.
 People will stay longer at the site.
 The number of returning visitors will be increased.
 It will make the site more usable overall for everyone.
 It will help the site reach the fastest growing population: elderly people
There are a couple of key things to consider when making a Web page that will greatly
increase accessibility to the page. Always use the “alt” attribute; this will allow people
with pictures turned off and people with devices that read the page to them to know what
is going on. Always use a short but descriptive title. This will allow the user to quickly
figure out what the Web site is about and if it might contain the information for which
they are looking. Use relative size values; this will allow users to resize any text that they
might have a hard time seeing. Avoid stylish fonts because many people have a hard
time figuring out what the text is saying and will get frustrated trying to read it. It is also
important to define a background color. Different browsers can sometimes come up with
a weird background color if it is not otherwise defined. This can make the content hard
to impossible for some users to read. It is also important to watch for color contrasts.
There are a couple of good color combinations that the site should stick with to avoid
hurting the user’s eyes. It is also important not to choose a background image that makes
the content hard to read [2].
Web Accessibility Initiative (WAI)
The WAI was created by W3C in 1997. It is their job to create a set of guidelines on how
to make information accessible to people with disabilities and to more browser
applications [2].
Conclusion
It is easy to see how having few standards in the beginning created many problems for
everyone and how even today it is important to get everyone to follow the standards. By
following the standards, Web developers can spend less time fidgeting with their code to
get it to work on multiple browsers and more time on making their code more appealing
to the general public. This allows them to, overall, save money and accomplish what
they originally set out to do [1].
Web pages are also becoming more compatible with new versions of Web browsers
which greatly increase maintainability thus reducing costs even more. People are also
more satisfied with sites that follow the standards because they are more comfortable
with them. The increased accessibility helps more people get to the sites which was the
original goal of the site in the first place [1].
It is clear that standards keep costs down while improving the number of visitors to the
site. People who have coded with out the standards and with the standards would not
argue that standards were limiting; but that the standards helped them do their job more
effectively. Web pages should now be developed for the standard which is becoming
very popular in industry and in personal use. Venders are also finding that more people
use their product if they follow the standards. For instance, many people say they use
Firefox over IE because it is closer to following the standard correctly. Standards remove
the tedious part of Web development allowing more time to develop higher quality pages
[1].
References
[1]
[2]
[3]
[4]
[5]
The Web Standards Project. 1 Apr. 2006. WaSP. 3 Apr. 2006
<http://www.webstandards.org>.
W3Schools Online Web Tutorials. W3Schools. 3 Apr. 2006
<http://www.w3schools.com>.
World Wide Web Consortium. 31 Mar. 2006. W3C. 3 Apr. 2006
<http://www.w3.org>.
ISO - International Organization for Standardization. 20 Mar. 2006. 3 Apr. 2006
<http://www.iso.org>.
Welcome to Ecma International. Ecma. 3 Apr. 2006
<http://www.ecma-international.org/>.