1 / 32

Web Standards

Web Standards. Best Practice in the Workplace Foundation Degree Presentation created by Phil James Last Updated: 24/01/05. Web Standards - Introduction.

erol
Download Presentation

Web Standards

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Web Standards Best Practice in the Workplace Foundation Degree Presentation created by Phil James Last Updated: 24/01/05

  2. 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/

  3. Aspects To Be Covered Here • Document Standards • Browser Compliance • User Interface Design • Accessibility

  4. Aspect Document Standards

  5. 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)

  6. 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)

  7. 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

  8. 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/

  9. 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

  10. 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/

  11. 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.

  12. 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

  13. 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/

  14. Aspect Browser Compliance

  15. Browser Compliance • Standard Compliant browsers that understand and support: • HTML • XHTML • CSS • ECMA Script • DOM • On various platforms including PC, Palm, PDA, phone, etc.

  16. Browser Compliance - Browsers • Internet Explorer (Windows) • Konqueror (Linux) • Mozilla Firefox (Multi OS) • Netscape (Multi OS) • Opera (Multi OS) • Safari (Apple OS)

  17. 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

  18. 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

  19. Aspect User Interface Design

  20. 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/

  21. UI Design - Elements • Some important elements to consider when designing a web UI: • Colour • Fonts • Help • Language • Layout • Navigation • Response Time • Size

  22. 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.

  23. Aspect Accessibility

  24. 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

  25. 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/

  26. 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/

  27. 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/

  28. 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

  29. Accessibility – Useful Websites • www.abilitynet.co.uk/ • www.drc-gb.org/ - Disability Rights Commission. • www.euroaccessibility.org - EuroAccessibility Consortium.

  30. 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

  31. Further Reading - Books • Clark, J. (2002), ‘Building Accessible Websites’, New Riders Publishing. • Zeldman, J. (2003), ‘Designing with Web Standards’, New Riders Publishing.

  32. 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.

More Related