web standards best practice in the workplace foundation degree presentation created by phil james...
TRANSCRIPT
Web Standards
Best Practice in the WorkplaceFoundation DegreePresentation created by Phil JamesLast 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 StandardsBrowser ComplianceUser Interface DesignAccessibility
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 large-
scale 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 platform-
independent 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:HTMLXHTMLCSSECMA ScriptDOM
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%20Design%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/20010010.htm
The Disability Discrimination Act 1995 (Part IV Education).
Source:www.legislation.hmso.gov.uk/acts/acts1995/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.