1. Copenhagen, 6 December 2004 Technological advances since 2000 Miruna Bădescu Finsiel Romania

2. XHTML eXtensible HyperText Markup Language

3. 3 What is it? HTML4 is regarded as the standard publishing language on the Web SGML application conform with the ISO 8879 standard Defines a set of structural and semantic tags for authoring Web documents XML is also a SGML implementation Conceived to standardize the data transfer Handles semantics, not structure XHTML is a family of document types that reproduce and extend HTML4 and are XML-based Design to work with XML-based user agents

4. 4 Why use it? XHTML documents are XML conforming => can be validated using XML tools Can utilize applications (e.g. scripts and applets) that rely on either the: HTML Document Object Model XML Document Object Model Can be used toghether with other namespaces (e.g. MathML) Easier to interoperate Alternate ways of accessing the Internet are constantly being introduced New XHTML-compliant user agents are built to benefit from new and existing features

5. 5 Making XHTML compatible documents (1) Must have a DOCTYPE declaration prior to the Root element XHTML 1.0 XHTML 1.1

6. 6 Making XHTML compatible documents (2) Can have an XML declaration when the character encoding is other that the default UTF-8 or UTF-16 The root element must be html XHTML 1.0: XHTML 1.1:

7. 7 Making XHTML compatible documents (3) When a user agent processes an XHTML document, it will recognize only attributes of type ID (i.e. id instead of name) as fragment identifier If an element is not recognized, the elements content must be processed If an attribute is not recognized, it is ignored If an attributes value is not recognized, the default value is used

8. 8 Differences with HTML4 (1) The document must be well-formed: no nested tags Correct: here is a paragraph. Incorrect: here is a paragraph. Elements and attributes must be in lowercase (XML is case sensitive) Correct: Incorrect:

9. 9 Differences with HTML4 (2) End tags are required for non-empty elements Correct: here is a paragraph here is another Incorrect: here is a paragraph here is another Attribute values must always be quoted Correct: Incorrect:

10. 10 Differences with HTML4 (3) XML does not support attribute minimization Correct: Incorrect: Empty elements must have an end tag Correct: Incorrect:

11. 11 Differences with HTML4 (4) Script and style elements must have a #PCDATA content Correct: <![CDATA[ … unescaped script content … ]]> References to characters made using hexadecimal values Correct: &#xnn; &x20AC; (Euro sign) Incorrect: &#Xnn; &X20AC;

12. 12 Element prohibitions SGML allows DTDs to exclude specific elements from being contained within an element Examples: a must not contain another a element pre must not contain elements like img, object, big, small, sub, sup form must not contain another form element Such prohibitions are not possible in XML

13. 13 Character encoding The encoding of a HTML document is specified by the Web server via: The charset parameter of the HTTP Content-Type header or The meta element in the document itself In XML documents, the character encoding is specified in the XML declaration For XHTML, the server should provide correct headers. If not, the document must include both XML declaration and meta http-equiv statement

14. 14 Validate your documents The free W3C validator is located at: http://validator.w3.org Validates on-line pages offline documents

15. 15 XHTML2 design aims If a facility exists in XML, use it rather then duplicating it Less presentation, more structure More usability More accessibility Better internationalization More device independence Less scripting

16. 16 Upcoming features in XHTML 2 Moves towards semantically correct markup: new tags (non-backwards compatibility !!!) e.g. line, n1 (navigation links) some existing tags will become deprecated Makes another step towards accessibility Modularization: modules that together describe the elements and attributes of the language and their content model. E.g.: XForms XQuery XEvents

17. XForms, XQuery

18. 18 What is XForms? the next generation of HTML forms richer, more flexible will be the forms standard in XHTML 2.0 platform and device independent module separates data and logic from presentation uses XML to define form data, stores and transports data in XML documents contains features like calculations and validations of forms reduces the need for scripting

19. 19 XForms Model A single device-independent XML form definition has the capability to work with a variety of standard or proprietary user interfaces

20. 20 How does it work With XForms, input data is described in two parts: XForms model defines: what the form is what data it contains what it should do the structure of the instance data (workflow, auto-fill, pre-fill) XForms user interface defines the input fields and how they should be displayed XForms Processor (built into the browser) submits the XForms data to a target

21. 21 Example

22. 22 XQuery Language for querying XML data Built on XPath expressions XQuery for XML is the SQL for databases Not (yet) a Web Standard, XQuery 1.0 is still a W3C Working Draft

23. Scalable Vector Graphics (SVG)

24. 24 What is SVG? Used to define two-dimensional vector-based graphics for the Web in XML format SVG graphics do NOT loose any quality if they are zoomed or resized Every element and every attribute in SVG files can be animated SVG is a World Wide Web Consortium (W3C) recommendation since 2003 SVG integrates with other W3C standards such as the DOM, CSS and XSL

25. 25 Advantages SVG is scalable: zoom-able without degradation viewed and printed with high-quality on any resolution Selectable and searchable (good for maps) Small and comprehensible with respect to non-vectorial formats (e.g. GIF, JPG) Its an open standard, based on XML

26. 26 Comparison Small PNG imageSmall SVG Image Enlarged PNG image:Enlarged SVG image:

27. 27 Why? Vector-based viewers are able to recalculate how the graphic should look based on the textual description of the shape found inside of the SVG graphic Vector graphics are defined programmatically: provide a more efficient means for rendering print and animation adding interaction (including panning and zooming) analytical capability

28. 28 Using SVG in Web pages 1.Stand-alone (type image/svg+xml) not picked up by search engines 2.Embedded by reference inside an img, object or applet tag 3.Embedded in-line directly in the XHTML page Referenced from CSS or XLS e.g. as value of the background-image property

29. 29 Embedded SVG example File saved as circle.svg and embedded in an XHTML document:

30. 30 Basic types of shapes - rectangle - circle - ellipse - line - list of lines - closed list of lines - curved line Note: SVG can be used in combination with other namespaces (MathML, SMIL, etc.) to create rich graphical objects

31. 31 Internationalization of SVG Based on XML1.0 thus supports Unicode SVG supports: Horizontal, left-to-right text found in Roman scripts Vertical and vertical-ideographic text Bidirectional text (for languages such as Arabic and Hebrew) Multi-language SVG documents Localization: text in different language may appear based on the clients language setting

32. 32 SVG accessibility (1) Possibility to define metadata for a SVG graphic (e.g. title, description) Accessible animation non-visual user agents interpret the animations description and render it in an appropriate mannor A SVG image is encoded in plain text Possibility to include navigational links in image components and properly describe them

33. 33 SVG accessibility (2) Who benefits: users with low vision color-blind or blind users users of assistive technologies holders of non-traditional Web access devices: PDAs mobile phones etc.

34. Examples Shapes, texts and animation Shapes, texts and animation on the EIONET website http://64.84.21.10:8080/AD14001/TheaterSVG

35. CSS2

36. 36 Whats new in CSS2 (1) Aural style sheets – if a customer comes to your Web page with a screen reader that is CSS2 enabled, you can define how your page will sound Paging - possible to define how pages should be displayed or printed Media Types - aural, braille, screen, print, tv, etc. International Accessibility Features – e.g. support for bidirectional text, language-sensitive quotation marks

37. 37 Whats new in CSS2 (2) Font selection – intelligent font matching Tables – CSS2 allows you to define any element as a table element Positioning – allows you to create frame-like documents or place a signature on every page of a document Cursors – you can define how the cursor should look over any element