Web Engineering Class 6

1
Web EngineeringClass 6

• 2005/11/15
• Jacek Kopecký
• jacek.kopecky_at_deri.org

2
Overview of Class 6

• Accessibility, W3C acc. guidelines
• Internationalization (I18N)
• Media types, data formats
• Open or proprietary
• Content negotiation

3
Accessibility

• Access to the Web by everyone
• Regardless of disability, other conditions
• Some websites are required to be accessible
• Advantages not only for the disabled
• http//w3.org/WAI/

4
Accessibility Problems

• Blindness, deafness
• Reading, comprehending text
• Using mouse or keyboard
• Text-only or small screen, slow connection
• Language barriers
• Eyes, ears or hands busy or interfered with
• Driving, noisy environment

5
Accessibility Areas

• Content
• Different representations
• User agents
• Usability, disabled browsing
• Assistive technologies (e.g. screen readers)
• Authoring tools
• Usability, producing accessible content
• XML languages
• Designing accessible languages

6
Accessible ContentThemes

• Graceful transformation
• Separate structure from presentation
• Provide equivalent content in different media
• Dont rely on mouse, color
• Understandable and navigable content
• Provide alternative to graphical navigation
• Provide context or orientation information
• Make documents clear and simple

7
Accessible ContentGuidelines

• 1. Provide text equivalent
• Description of an image, chart
• Transcript of speech
• Captions (subtitles) for video
• Redundant text links for image maps
• 2. Dont rely on color alone
• Contrast for reading
• Shape for navigation
• For monochrome displays, color-blind people

8
Accessible ContentGuidelines

• 3. Properly use markup and style sheets
• MathML, SVG instead of images
• CSS for presentation
• Relative units rather than absolute (em vs. pt)
• HTML headers, lists, quotation, tables
• 4. Clarify natural language usage
• Identify main language, language changes
• HTML abbr, acronym explanations

9
Accessible ContentGuidelines

• 5. Dont overuse tables
• Dont mix data and layout tables
• Optimally, dont use layout tables
• 6. Careful with new technologies
• Make pages readable without style sheets
• Pages should work with scripts turned off
• May provide limited functionality
• Alternatives should be provided

10
Accessible ContentGuidelines

• 7. User control of time-sensitive changes
• Stopping moving, blinking, scrolling, or
  auto-updating objects
• For slow and sensitive users
• Moving content a big distraction
• 9. Design for device-independence
• Pointing devices, keyboards, microphones etc.
• Provide keyboard shortcuts

11
Accessible ContentGuidelines

• 10. Use interim solutions
• Limit unannounced pop-up windows
• Properly position form control labels
• 12. Provide context and orientation information
• Title all frames
• Divide large blocks of information

12
Accessible ContentGuidelines

• 13. Provide clear navigation mechanisms
• Make meaningful link text
• Provide metadata (e.g. prev, next links)
• Provide site map or table of contents
• Use consistent navigation
• Provide a means to skip over multi-line ASCII art

13
User AgentsAccessibility Scenarios

• Keyboard accessibility
• Repetitive Strain Injury no mouse
• Special keyboards available
• Voice input simulates keyboard
• Access to all content
• Optional content (like text equivalents,
  captions) should be displayed (on request)
• Communication with assistive technologies
• E.g. content availability to screen reader

14
User AgentsAccessibility Guidelines

• 1. Support input output device-independence
• Full keyboard access
• Activate event handlers
• Provide text messages (prompts, alerts)
• 2. Ensure user access to all content
• Render content according to specification
• Provide text source view
• Render conditional content
• Allow time-independent interaction

15
User AgentsAccessibility Guidelines

• 3. Allow configuration not to render some content
  that may reduce accessibility
• Toggle background images, audio, video, animated
  images, scripts
• Toggle animated or blinking text
• Toggle automatic content retrieval
• 4. Ensure user control of rendering
• Configure text scale, font, colors
• Slow, pause multimedia
• Global volume control
• Choose style sheets

16
User AgentsAccessibility Guidelines

• 5. Ensure user control of UI behavior
• No automatic content focus change
• Keep viewport on top
• Manual viewport open only
• Confirm form submission
• 6. Implement interoperable APIs
• DOM access to HTML/XML/CSS content
• Access to information about rendered content
• Programmatic operation of user agent UI

17
User AgentsAccessibility Guidelines

• 7. Observe operating environment conventions
• Respect operating environment conventions
• 9. Provide navigation mechanisms
• Move content focus (forward and backward)
• No events on focus change
• Show event handlers
• Provide text search

18
User AgentsAccessibility Guidelines

• 10. Orient the user
• Highlight selection, focus, visited links
• Provide outline view
• Provide link information
• 12. Provide accessible user agent documentation
  and help
• Provide accessible documentation
• Document accessibility features
• Document default bindings
• Document changes between versions

19
XML Accessibility Guidelines

• When designing a new XML language
• Specify and document semantics
• Link to schemas
• ltdocument xmlnshttp//example.org/doc
  xsischemaLocationhttp//example.org/doc
  
  http//example.org/doc.xsd /gt
• Allow alternative media
• ltimage src"URI" alt"text" /gt

20
XML Accessibility Guidelines

• Do not overload element meaning
• ltinvoicegt
• ltamountgt290lt/amountgt lt!-- dollars --gt
• ltitem namewater heater price29gt
• ltamountgt10lt/amountgt lt!-- units --gt
• lt/itemgt
• lt/invoicegt
• Reuse existing languages
• ltproductDescriptiongt
• ltxhtmlpgt lt/xhtmlpgt
• lt/productDescriptiongt

21
Accessibility Conclusions

• Think of users with disabilities, limitations
• Provide alternative media
• Make content transformable
• Separate structure from presentation
• Allow keyboard-only input

22
Internationalization

• Commonly known as I18N
• International vs. national web sites
• Target audience
• Monolingual vs. multilingual web sites
• Used languages
• Changing content?
• Customizing for target markets

23
International Sites

• Same content, one language
• Technical info, standards w3.org
• Single (international) community slashdot.org
• Different content, one language
• Buying habits, prices, legal requirements
• Same content, translations
• Understandability, W3C informative translations
• Different content, multiple languages
• Closest to the audience but very costly

24
I18N Technologies

• Language indication, negotiation
• Character sets
• Non-English tags
• Locales
• Script direction
• Ruby annotation

25
Language Indication

• Whole document content-language
• Portions of document langcode attribute
• ltspan langengtThis is English.lt/spangt
• ltspan langdegtUnd das ist Deutsch.lt/spangt
• Accessibility e.g. speech synthesizer
• Translation, dictionary tools
• Font selection
• Search

26
Character Sets

• ASCII 7 bit, 128 characters
• Not to mention EBCDIC
• Extension code page 128 chars
• Different systems, different code pages
• ISO Latin 1 Western languages
• CP1252 different
• ISO Latin 2 East Europe
• CP1250, many others ? recoding, user choice
• Príli lutoucký kun úpel dábelské ódy.
• UNICODE, UTF-8

27
Non-English Tags

• Not in HTML but possible in XML languages
• Good for demonstration, teaching
• ltAdressegt
• ltStraßegtTechnikerstraße 21alt/Straßegt
• lt/Adressegt
• Also in Japanese, for example
• Not good for international exchange
• English is now the main international language
• Keyboards usually can do ASCII easily
• Exceptions even in English e.g. naïve

28
Locales

• Locale local conventions for I/O
• Many settings charset, collation, formats etc.
• Problem across network interface
• Accept-language
• Optimal solution
• Most users dont care to set it up

29
Locales Dates

• Date formats what is 03/04/05?
• 2005-04-03 standard
• 03/04/05 most of Europe
• 04/03/05 esp. United States
• 05/04/03 Japan
• 3 April 2005 month and year obvious
• Readability, filename sorting
• Context of the page

30
Locales Sorting

• Different collation
• English a b c d e f g h i
• Czech a á b c c d d e é e f g h ch i ...
• Sort after translation
• Cat, Dog ? Hund, Katze
• Dont translate select values
• ltselect name"pet"gt
• ltoption value'dog'gt Hund lt/optiongt
• ltoption value'cat'gt Katze lt/optiongt
• lt/selectgt

31
Script Direction

• Script a collection of symbols for writing text
• One language ? one or multiple scripts
• Left-to-right Latin, Cyrillic, Japanese
• Right-to-left Arabic, Hebrew, Japanese
• Top-to-bottom (right-to-left) Japanese
• ???????? ???? ?????

32
Script Direction Technology

• Unicode control characters
• XHTML dirrtl dirltr
• Direction override (for already reversed text)
• Word vs. text direction
• The title says "?????? ???????, W3C" in Hebrew.
• The title says "W3C?????? ???????, " in Hebrew.

33
Ruby Annotation

• Text annotation in flow
• Ruby font size in print
• Explanation, rewriting of unknown symbol
• XHTML Ruby module
• With little support so far

34
Internationalization Conclusions

• Many different issues
• Translation, content targeting
• Combining languages
• Technology already there
• Support growing
• Due to the growing use of Web in Asia
• Not just our German vs. English

35
Media Types

• text/plain
• text/html
• image/gif
• image/jpeg
• audio/basic
• video/mpeg
• application/octet-stream
• application/soapxml

36
Media Types

• RFC 2046
• Content types of MIME attachments
• Dispatching to suitable processor/viewer
• General top-level media types
• text, image, audio, video, application
• Specific subtypes
• Composition media types
• multipart, message
• Media type specifies fragID interpretation
• http//example.org/resourcefragmentID

37
Media Type Parameters

• Content-type text/plain charsetUTF8
• Charset
• On text media types
• Allows for transcoding
• Composition parameters
• Boundary, start
• Other parameters subtype-specific

38
Media Type Issues

• Media types not URIs
• URIs for media types are discussed
• XML Schema simple types not media types
• Granularity difference
• Binary data in XML may use media types
• Assigning media types to binary data in XML
• Both in XML instances and schemas
• ltPicture xmimecontentType"image/png"gt
• /aWKKapGGyQ
• lt/Picturegt

39
XML Media Types

• Originally text/xml application/xml
• text/xml not really suitable
• Not generally human-readable
• Problem with transcoding and XML declaration
• RFC 3023 application/x-examplexml
• application/soapxml
• Common fragment semantics
• XPointer should be common

40
File Types in File Systems

• DOS, Windows 3-letter suffix
• .doc, .txt, .jpg, .exe
• Windows Vista file metadata
• MacOS 4-letter type, 4-letter application
• Not in name
• UNIX long, multiple suffixes (or none)
• Type in first few bytes of file

41
MIME vs. FS

• No file system uses media types
• When saving a document, media type is lost
• Especially if URI doesnt have suffix
• Browser can offer a suitable suffix
• When served to the web, server must guess
• Suffix is fastest way of guessing

42
Content Negotiation

• Client indicates abilities, preferences
• Accept header in request
• Accept text/html q1, text/plain q0.5, /
  q0.1
• Works for languages as well
• Accept-Language de q1, en q0.5

43
Content NegotiationServer Behavior

• Selecting a match from multiple representations
  of one resource
• On file system multiple files
• Usually same name, different suffixes
• Suffix not present in URI
• http//example.com/picture (.jpg, .gif, .png)
• Concrete URIs still available
• Also dropping suffix from URI for single file
• Good if format changes
• .gif à .png, .html à .xhtml, .asp à .php

44
Content Negotiation Issues

• Multiple representations of one URI
• Users may be confused
• Consider redirects, links to this version
• Fragment IDs
• Should be consistent across representations
• Can they be translated then?
• HTML anchor
• XML, RDF id
• Configuration only done by experts
• But browsers may have user-friendly setups

45
Media Types on the Web

• Putting documents on the web
• Open, standard formats
• HTML, JPEG, PNG, SVG, PDF, PostScript
• Proprietary formats
• DOC, Quicktime, WMV, TeX
• Suitability considerations
• gif vs. png vs. jpg
• vs. svg vs. tga vs. bmp
• Support considerations

46
Conclusions

• Accessibility related to internationalization
• Accessibility not only about disabilities
• I18N not only about translations
• Content negotiation may be helpful
• But also confusing
• Many media types, data formats
• Using standard formats accepted by the Web
• Open vs. proprietary

47
Next Class

• Markup languages
• From SGML to HTML and XML
• Dynamic hypertext
• From HTML to DHTML
• JavaScript basics

48
Homework

• Whats your favorite underappreciated data
  format?
• A format that isnt commonly supported
• But it should be accepted soon
• Why would it be useful?
• What are the current formats in the space?
• If none, what are the current alternatives?
• Why are these not sufficient?