Transcript Document

Web Standards
Best Practice in the Workplace
Foundation Degree
Presentation created by Phil James
Last Updated: 24/01/05
Web Standards - Introduction

Groups and standards bodies have established
technologies for creating and interpreting web-based
content. These technologies, which we call web
standards are carefully designed to deliver the
greatest benefits to the greatest number of web users
while ensuring the long-term viability of any document
published on the Web.
 Designing and building with these standards simplifies
and lowers the cost of production, while delivering
sites that are accessible to more people and more
types of Internet devices. Sites developed along these
lines will continue to function correctly as traditional
desktop browsers evolve, and as new Internet devices
come to market.
Source: www.webstandards.org/about/
Aspects To Be Covered Here
Document Standards
 Browser Compliance
 User Interface Design
 Accessibility

Aspect
Document Standards
Document Standards – W3C



Internet “invented” in 1989 by Tim Berners-Lee.
World Wide Web Consortium (W3C) – created in
1994.
“The World Wide Web Consortium (W3C) develops
interoperable technologies (specifications, guidelines,
software, and tools) to lead the Web to its full
potential. W3C is a forum for information, commerce,
communication, and collective understanding.” –
Source: www.w3.org (W3C homepage)
Document Standards - Examples




Specifications developed by the W3C include:
Structure:
 HTML (Hypertext Mark-up Language)
 XML (Extensible Mark-up Language)
 XHTML (Extensible Hypertext Mark-up Language)
Presentation:
 CSS (Cascading Style Sheets)
Behaviour:
 ECMA Script standard – e.g JScript and JavaScript
 DOM (Document Object Model)
Document Standards - HTML

HTML is the lingua franca for publishing hypertext on
the World Wide Web. It…can be created and
processed by a wide range of tools, from simple plain
text editors…to sophisticated WYSIWYG authoring
tools. HTML uses tags such as <h1> and </h1> to
structure text into headings, paragraphs, lists,
hypertext links etc.
Source: W3C
 Homepage: www.w3.org/MarkUp/
 www.philjameseducation.com/html/htmlmain.htm
Document Standards – XML (1)

Originally designed to meet the challenges of largescale electronic publishing, XML is also playing an
increasingly important role in the exchange of a wide
variety of data on the Web.
Source: W3C
 Homepage: www.w3.org/XML/
Document Standards – XML (2)

Some benefits:
 Saves businesses money by enabling the use of
inexpensive off-the-shelf tools to process data.
 Encourages industries to define platformindependent protocols for the exchange of data,
including electronic commerce.
 Allows people to display information the way they
want it, under style sheet control.
 Enables long-term reuse of data, with no lock-in to
proprietary tools or undocumented formats.
Source: W3C
Document Standards - XHTML

Designed to create standards that provide richer Web
pages on an ever increasing range of browser
platforms including cell phones, televisions, cars,
wallet sized wireless communicators, kiosks,
desktops.
 XHTML 1.0 reformulates HTML as an XML
application. This makes it easier to process and easier
to maintain. XHTML 1.0 borrows elements and
attributes from HTML 4, and can be interpreted by
existing browsers.
 You can port HTML documents into XHTML using an
Open Source HTML Tidy utility or current HTML
editors such as DreamWeaver or FrontPage.
Source: W3C
 Homepage: www.w3.org/MarkUp/
Document Standards - CSS

CSS is a presentation language. It provides a simple
mechanism for adding style (e.g. fonts, colors,
spacing) to Web documents.
Source: W3C
 Homepage:www.w3.org/Style/CSS/

Why use CSS with HTML ?– It standardises the look
and to some extent the behaviour of your website.
Document Standards – ECMA

ECMAScript is the only standard scripting language on
the Web; it is based on the ECMA-262 specification,
which outlines an object-oriented programming
language for performing computations and
manipulating objects within a browser.
 Both JavaScript (Netscape) and JScript (Microsoft IE)
implement the ECMAScript standard and then extend
it.
Source: http://c2.com/cgi/wiki?EcmaScript
 Homepage: www.ecma-international.org/publications/
standards/Ecma-262.htm
Document Standards - DOM
“The Document Object Model is a platform- and
language-neutral interface that will allow programs and
scripts to dynamically access and update the content,
structure and style of documents. The document can
be further processed and the results of that processing
can be incorporated back into the presented page.”
 "Dynamic HTML" is a term used by some vendors to
describe the combination of HTML, style sheets and
scripts that allows documents to be animated via the
object model.
Source: W3C
 Homepage: www.w3.org/DOM/

Aspect
Browser Compliance
Browser Compliance

Standard Compliant browsers that
understand and support:
HTML
 XHTML
 CSS
 ECMA Script
 DOM


On various platforms including PC,
Palm, PDA, phone, etc.
Browser Compliance - Browsers
Internet Explorer (Windows)
 Konqueror (Linux)
 Mozilla Firefox (Multi OS)
 Netscape (Multi OS)
 Opera (Multi OS)
 Safari (Apple OS)

Browser Compliance – Issues


Code forking – the practice of creating multiple
versions of incompatible code to cope with the needs
of browsers that do not support standard ECMA Script
and the DOM.
Backwards compatibility refers to the practice of
using non-standard, deprecated markup and code to
ensure that every visitor has the same experience
regardless of browser version.

Not realistic – and old browsers are not capable of the same
visual experience as the more modern ones.
Source: Designing With Web Standards
Browser Compliance – Prioritising

Dedicating development to support only one browser
at the expense of other popular ones (e.g. Supporting
Internet Explorer but ignoring Safari and Firefox).
 Results in potential isolation of a large customer base
leading to a huge loss of revenue.
Source: Designing With Web Standards
Aspect
User Interface Design
UI Design - Introduction

Most web sites are designed to encourage browsing,
searching, and exploration. Most importantly, they are
designed to attract visitors and keep them interested.
Source: http://digital-web.com/articles/user_interface_
design_for_web_applications/
UI Design - Elements

Some important elements to consider when
designing a web UI:








Colour
Fonts
Help
Language
Layout
Navigation
Response Time
Size
UI Design - Useful Websites





www.asktog.com/basics/firstPrinciples.html - First
principles of UI design.
www.isii.com/ui_design.html#User%20Interface%20D
esign%20Style%20Guides – User Interface Design
links page.
www.uie.com/articles/ – UI engineering website
(articles archive).
www.sylvantech.com/~talin/projects/ui_design.html - A
summary of UI design.
www-3.ibm.com/ibm/easy/eou_ext.nsf/Publish/572 –
IBM’s web design guidelines.
Aspect
Accessibility
Accessibility –
Types of Web Disability
Hearing – deaf, hard of hearing, hearing impaired. For
deaf people our native tongue will be at least their
second language. Audio cannot be heard or is
indistinct.
 Sight – blind, visually impaired, low vision. Browser
cannot be seen, is indistinct or is not seen correctly
(e.g. colour blindness).
 Movement – mobility impaired (chiefly hands or
arms). Affects the use of a computer or device.
 Cognitive – learning disabled. Dyslexia (confusion in
reading). Also issues of awareness, perception,
reasoning and judgement.
Source: Building Accessible Websites

Accessibility – Scenarios
Examples of scenarios and accessibility solutions:




Online shopper with color blindness.
Reporter with repetitive stress injury.
Online student who is deaf.
Accountant with blindness.
 Classroom student with dyslexia.
 Retiree with aging-related conditions, managing
personal finances.
 Supermarket assistant with cognitive disability.
 Teenager with deaf-blindness.
Source: www.w3.org/WAI/EO/Drafts/PWD-Use-Web/
Accessibility – WAI

The Web Accessibility Initiative (WAI) develops
guidelines for accessibility of Web sites, browsers, and
authoring tools, in order to make it easier for people
with disabilities to use the Web. Given the Web's
increasingly important role in society, access to the
Web is vital for people with disabilities. Many of the
accessibility solutions described in WAI materials also
benefit Web users who do not have disabilities.
Source: www.w3.org/WAI/EO/Drafts/PWD-Use-Web/
Accessibility – Guidelines



Web Content Accessibility Guidelines 1.0
Source:www.w3.org/TR/WCAG10/
Authoring Tool Accessibility Guidelines 1.0
Source: www.w3.org/TR/ATAG10/
User Agent Accessibility Guidelines 1.0
Source: www.w3.org/TR/UAAG10/
Accessibility – Legislation



The Disability Discrimination Act 1995 (Part III Access
to Goods and Services).
Source: www.legislation.hmso.gov.uk/acts/
acts1995/1995050.htm
Special Educational Needs and Disability Act 2001.
Source:www.hmso.gov.uk/acts/acts2001/20010
010.htm
The Disability Discrimination Act 1995 (Part IV
Education).
Source:www.legislation.hmso.gov.uk/acts/acts1
995/1995050.htm
Accessibility – Useful Websites



www.abilitynet.co.uk/
www.drc-gb.org/ - Disability Rights Commission.
www.euroaccessibility.org - EuroAccessibility
Consortium.
Accessibility – Business Benefits


Important: In some populations the proportion of
people with disabilities can be up to 20 percent.
Improve usability for non-disabled and disabled
visitors.
 Reduce site maintenance.
 Site search engine improvements.
 Demonstrate social responsibility.
 Reduce legal liability.
Source: www.w3.org/WAI/bcase/benefits.html
Further Reading - Books


Clark, J. (2002), ‘Building Accessible Websites’, New
Riders Publishing.
Zeldman, J. (2003), ‘Designing with Web Standards’,
New Riders Publishing.
Further Reading – Web Sites

http://cap.umn.edu/ait/Web/Comparison.html - Web
accessibility standards comparison.
 www.philjameseducation.com – my website.
 www.useit.com/ - Usability website.
 www.w3.org – reference web site for document
standards.
 www.w3.org/WAI/gettingstarted/ - making a website
accessible.
 www.w3.org/WAI/Policy/#UK – UK policies relating to
web accessibility (introduction and links).
 www.webstandards.org/about/ - Web standards
project group.