Copenhagen, 6 December 2004

Technological advances since 2000

Miruna Bădescu

Finsiel Romania

XHTMLeXtensible HyperText Markup Language

3

What is it?

HTML4 is regarded as the standard publishing language on the Web

SGML application conform with the ISO 8879 standardDefines a set of structural and semantic tags for authoring Web

documents

XML is also a SGML implementationConceived to standardize the data transferHandles 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

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 interoperateAlternate ways of accessing the Internet are constantly being

introduced

New XHTML-compliant user agents are built to benefit from new and existing features

5

Making XHTML compatible documents (1)

Must have a DOCTYPE declaration prior to the Root element

XHTML 1.0

XHTML 1.1

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

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 element’s content must be processed

If an attribute is not recognized, it is ignored

If an attribute’s value is not recognized, the default value is used

8

Differences with HTML4 (1)

The document must be well-formed: no nested tagsCorrect:<p>here is a <em>paragraph</em>.</p>Incorrect:<p>here is a <em>paragraph</p></em>.

Elements and attributes must be in lowercase (XML is case sensitive)Correct:<ul>Incorrect:<UL>

9

Differences with HTML4 (2)

End tags are required for non-empty elementsCorrect:

<p>here is a paragraph</p><p>here is another</p>Incorrect:

<p>here is a paragraph<p>here is another

Attribute values must always be quotedCorrect:

<td colspan=“3”>Incorrect:

<td colspan=3>

10

Differences with HTML4 (3)

XML does not support attribute minimizationCorrect:

<p wrap=“wrap”>Incorrect:

<p wrap>

Empty elements must have an end tagCorrect:

<br />Incorrect:

<br>

11

Differences with HTML4 (4)

Script and style elements must have a #PCDATA content Correct:<script type=“text/javascript”>

<![CDATA[… unescaped script content …]]>

</script>

References to characters made using hexadecimal values Correct:&#xnn; &x20AC; (Euro sign) Incorrect:&#Xnn; &X20AC;

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

Character encoding

The encoding of a HTML document is specified by the Web server via:

The charset parameter of the HTTP Content-Type header orThe 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

Validate your documents

The free W3C validator is located at:

http://validator.w3.org

Validates on-line pages offline documents

15

XHTML2 design aims

If a facility exists in XML, use it rather then duplicating it

Less presentation, more structureMore usabilityMore accessibilityBetter internationalizationMore device independenceLess scripting

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 accessibilityModularization: modules that together describe the

elements and attributes of the language and their content model. E.g.:XFormsXQueryXEvents

XForms, XQuery

18

What is XForms?

the next generation of HTML formsricher, more flexible

will be the forms standard in XHTML 2.0platform and device independent moduleseparates data and logic from presentationuses XML to define form data, stores and

transports data in XML documentscontains features like calculations and validations

of forms reduces the need for scripting

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

How does it work With XForms, input data is described in two parts:

XForms model defines:what the form iswhat data it containswhat it should dothe 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

Example

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

Scalable Vector Graphics (SVG)

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

Advantages

SVG is scalable:zoom-able without degradationviewed 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)It’s an open standard, based on XML

26

Comparison

Small PNG image Small SVG Image

Enlarged PNG image: Enlarged SVG image:

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

animationadding interaction (including panning and zooming)analytical capability

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

Embedded SVG example

File saved as circle.svg and embedded in an XHTML document:

30

Basic types of shapes

<rect> - rectangle <circle> - circle <ellipse> - ellipse <line> - line <polyline> - list of lines <polygon> - closed list of lines<path> - curved line

Note: SVG can be used in combination with other namespaces (MathML, SMIL, etc.) to create rich graphical objects

31

Internationalization of SVG

Based on XML1.0 thus supports Unicode SVG supports:

Horizontal, left-to-right text found in Roman scriptsVertical 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 client’s language setting

32

SVG accessibility (1)

Possibility to define metadata for a SVG graphic (e.g. title, description)

Accessible animationnon-visual user agents interpret the animation’s

description and render it in an appropriate mannor

A SVG image is encoded in plain textPossibility to include navigational links in

image components and properly describe them

33

SVG accessibility (2)

Who benefits:users with low visioncolor-blind or blind usersusers of assistive technologiesholders of non-traditional Web access devices:

PDAsmobile phonesetc.

Examples

Shapes, texts and animation on the EIONET websitehttp://64.84.21.10:8080/AD14001/TheaterSVG

CSS2

36

What’s 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

What’s 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