Navigation path

Standards

Table of content


1. Standards

This chapter provides a list of all the standards which are in force for and you have to respect on EUROPA web sites.

There are  rules for:

Top

1.1. Web Accessibility

Mandatory requirementAs from January 2010, all new EUROPA websites have to be created in compliancy with the Web Content Accessibility Guidelines 2.0, level AA.

Advice on how to meet the standard is detailed in these pages.

 

View all IPG Rules

Web accessibility aims at enabling all users to have equal access to information and functionalities on the web. More specifically, Web accessibility means that people with all abilities and disabilities can perceive, understand, navigate, and interact with the Web.

According to the UN Convention on the Rights of Persons with Disabilities that has been signed by the European Union, persons with disabilities include those who have long-term physical, mental, intellectual or sensory impairments which in interaction with various barriers may hinder their full and effective participation in society on an equal basis with others.

Internet users can experience problems when using the web because of different kinds of disabilities, functional limitations, environmental factors or technology matters:

  • persons with disabilities: visual, auditory, physical, cognitive
  • older persons, low literacy, others
  • technology-related limitations or incompatibility: browsers, platforms, devices, mobile web
  • environmental factors: place, illumination, noise, slow connection

Persons with disability in Europe are a significant group:

  • 10% to 15% of the total population
  • 50 to 75 million people in EU27
  • There is a strong correlation between disability and ageing => numbers increase with demographic change.

Source: Labour Force Survey (European Commission-Eurostat, 2002)

Why Web Accessibility is important

The Web is an increasingly important resource in many aspects of life: education, employment, government, commerce, health care, recreation, access to information and more. It is essential that the Web is accessible in order to provide equal access and equal opportunity to persons with disabilities. An accessible Web can also help people with disabilities more actively participate in society.

The Commission is committed to make Websites as accessible as possible to the largest possible number of users including those with visual, auditory, cognitive or physical disabilities, and those not having the latest technologies. The Commission must take a lead in providing an example of good practice in Web accessibility and accomplish its legal obligations.

As a public service, EUROPA is addressed to all citizens of the European Union. It is important to ensure that it is accessible to all audiences and complies with the standards for accessible web design.

In addition to making information easier to access and thereby increasing the site’s potential customer/client base, benefits of Accessible Web design include:

  • Improved usability for all visitors. Consistent navigation makes it easier to find desired content quickly.
  • Clear navigation and clear content supports people with and "without" disabilities: older, low literacy levels, low bandwidth, etc.
  • Providing text equivalents (e.g., ALT attributes and captioning), table summaries, structured mark-ups and metadata improves search engine optimisation (SEO).

Use on EUROPA websites

  • In case of justified technical or practical reasons for not complying with WCAG 2.0, level AA guidelines, the exceptions should be explained in an accessibility page.
  • Existing sites could gradually be improved to conform with the new guidelines if resources are available.
  • EUROPA pages should be designed to work with a wide variety of browsers, devices, operating systems and monitor colour-depths and resolutions.
  • Websites should be developed according to the standards set down by the World Wide Web Consortium and be compliant with HTML 4.01 Transitional and Cascading Style Sheets CSS2.1.
  • When creating a new website:
    • During the content definition phase of the site and the creation of the prototype phase, the WCAG 2.0 AA must be taken into account.
    • During the life of the website, on each update, ensure that web accessibility rules are followed.
  • When updating existing content, ensure that as far as possible it conforms to the guidelines. If this is not possible, explain why in an accessibility page.
  • Websites that comply with 2.0, level AA guidelines, can insert the compliance logo

The Commission has adopted the Web Content Accessibility Guidelines (WCAG) 2.0, compliance level AA, as objective to attain for websites published on EUROPA from January 2010 on.

Until 2009, the standard followed for web accessibility of EUROPA websites has been the Web Content Accessibility Guidelines 1.0 (WCAG), level A (priority 1). Most websites that conform to WCAG 1.0 will not require significant changes in order to conform to WCAG 2.0, and some may not need any changes.

Some top level EUROPA sites already meet the terms of WCAG 2.0 AA level of compliance, and the European Commission continues to move forward achieving conformity for a great deal of its existing sites.

However, in spite of continuous efforts to monitor accessibility, full "level AA" compliance cannot be guaranteed at all times. In case of justified technical or practical reasons for not complying with these guidelines, the Commission will explain the exceptions in an accessibility page.

Top

1.1.1. EU Policy

A new momentum for web accessibility is provided by the ratification of the United Nations Convention on the Rights of Persons with Disabilities (UNCRPD) by the EU in December 2010, the adoption of Web Content Accessibility Guidelines 2.0, the finalisation of the work on standardization mandate 376 to incorporate accessibility in public ICT procurements, and the European Commission's proposal of 3 December 2012 for a Directive on the accessibility of the public sector bodies' websites.

The European Commission will continue to monitor and support web accessibility implementation efforts and publish progress.

In November 2009 the Council authorised the conclusion of the United Nations Convention on the Rights of Persons with Disabilities on behalf of the Union (UNCRPD). The UNCRPD has also been signed by all the Member States and it is binding upon the institution of the EU. The Convention identifies accessibility as one of its general principles and states that States Parties shall take appropriate measures to promote access for persons with disabilities to new information and communications technologies and systems, including the Internet.

In December 2008 the Commission adopted the Communication "Towards an Accessible Information Society" proceeded by a public consultation. This Communication reinforces the European Commission's commitment to web accessibility and calls upon all stakeholders to step up their efforts in this area.

In the 2006 Riga Ministerial Declaration on "ICT for an inclusive society", European Ministerial representatives agreed that all public web sites should be accessible by 2010. Progress towards this target remains slow as demonstrated by recent monitoring on the status of web accessibility in Europe conducted for the European Commission.

In April 2003 in the Ministerial declaration on e-Inclusion, Ministers agreed on taking all necessary actions towards and open, inclusive knowledge-base society accessible to all citizens and that National and EU institutional level measures should be taken to ensure WAI guidelines adoption and implementation is increased, specially in public web sites.

Documents

  • On 3 December 2012 the European Commission adopted a Proposal for a directive on the accessibility of the public sector bodies' websites.
  • On November 2009 the Council adopted a decision concerning the Conclusion of the UN Convention on the Rights of Persons with Disabilities by the Union.
  • On 31 March 2009 the European Council adopted conclusionspdf  supporting the Commission's communication "Towards an accessible information society" (COM (2008) 804) and calls upon the Commission to issue a recommendation in order to avoid a fragmented European market.
  • During 2008, the Commission raised awareness with a campaign named "e-Inclusion, be part of it!" This has culminated with a Ministerial Conference in the end of the year, to demonstrate real progress and strengthen commitments on all levels. Areas of e-Inclusion policy, as defined in 2010, are: ageing, eAccessibility, the broadband gap (digital divide), inclusive eGovernment, digital literacy and culture.
  • On 8 November 2007, the Commission adopted the Communication entitled " European i2010 initiative on e-Inclusion - to be part of the information societymsw8". The Commission's i2010 initiative prioritised e-Inclusion.
  • In June 2006, 34 European countries committed to reducing the digital divide by 2010 in the Riga Ministerial Declarationpdf [173 KB].
  • On 13 September 2005 a new EC Communication on eAccessibilitypdf [193 KB] is adopted following a public consultation at the beginning of the same year. Following on from the Communication, a study spanning 2005 to 2006 identifies and evaluate measures that have a significantly positive impact on eAccessibility and support the Community eAccessibility strategy. The results of the study will be available in early 2007. An overall evaluation of all previous policy initiatives will follow in order to establish, if necessary, additional measures and legislation. It will also contribute to the upcoming “2008 European Initiative on e-Inclusion”.
    As part of the follow-up to the European Commission’s Communication on eAccessibility of 2005, the "Measuring progress of eAccessibility in Europe" (MeAC) study provides, two years later, the results of an extensive benchmarking exercise and analysis on the status and progress of eAccessibility in Europe.
  • In 2003, the European Commission and Disability Movement organises the European Year of People with Disabilities to improve the lives of those of us with disability and to highlight disability barriers and discrimination. The year was followed by the adoption of a European Disability Action plan with successive Communications in 2003, 2005 and 2007. Web accessibility was present in each stage of the plan.
  • On 13 June 2002, the European Parliament adopts the resolution EP (2002)0325 supporting the importance of Web accessibility in European institutions and Member States. In particular, the resolution states that Web Content Accessibility Guidelines 1.0 (priority levels 1 and 2) and future versions, should be implemented on public web sites, and that EU institutions and Member States should also comply with the Authoring Tools Accessibility Guidelines by 2003.
  • In its "Council Resolution of 26 March 2002 msw8" [132 KB] (p. 9-11), the Council encourages efforts in this domain and requests a new status in 2004 after the European Year of the People with Disabilities.
  • On 25 September 2001, the Commission adopts the Communication "eEurope 2002: Accessibility of Public Web Sites and their Contentpdf" [102 KB] on improving the accessibility of public web sites and their content. The aim is to make web sites more accessible to people with disabilities and older people.
  • In December 1999, the "eEurope - an Information Society for All" initiative is launched by the European Commission to bring the benefits of the Information Society to all Europeans. In June 2000, the subsequent "eEurope 2002 Action Plan", adopted at the European Council of Feira, sets out a roadmap to achieve eEurope's targets. The point "e-Accessibility" includes the specific target of ensuring that people with disabilities benefit fully from new technologies and the Internet.

Useful links

Top

1.1.2. WAI - WCAG 2.0

The Web Content Accessible Guidelines (WCAG) is a W3C recommendation within the scope of the Web Accessibility Initiative (WAI).
These guidelines explain how to make Web content accessible to people with disabilities. The guidelines are intended for all Web content developers (page authors and site designers). The primary goal of these guidelines is to promote accessibility. However, following them will also make Web content more available to all users, whatever user agent they are using (e.g., desktop browser, voice browser, mobile phone, automobile-based personal computer, etc.) or constraints they may be operating under (e.g., noisy surroundings, under- or over-illuminated rooms, in a hands-free environment, etc.). Following these guidelines will also help people find information on the Web more quickly. These guidelines do not discourage content developers from using images, video, etc., but rather explain how to make multimedia content more accessible to a wide audience.

WCAG 2.0

The Web Content Accessibility Guidelines (WCAG) 2.0 is the result of a long development process that ended on 11th December 2008 with its release as a W3C Recommendation. The new guidelines represent a very important step towards new ways of developing accessible web content, including the use of recent technologies not allowed in previous versions, and being ready for future technologies yet to be invented.

WCAG 2.0 was published on 11 December 2008. WCAG 2.0 applies broadly to more advanced technologies; is easier to use and understand; and is more precisely testable with automated testing and human evaluation.

W3C WAI recommends using WCAG 2.0, instead of WCAG 1.0.

Most Web sites that conform to WCAG 1.0 will not require significant changes in order to conform to WCAG 2.0, and some may not need any changes.

WCAG 2.0 has 12 guidelines that are organized under 4 principles: perceivable, operable, understandable, and robust. For each guideline, there are testable success criteria, which are at three levels: A, AA, and AAA.

Basic principles and guidelines of WCAG 2.0

Information and user interface components must be presentable to users in ways they can perceive

This principle includes four guidelines:

  • Guideline 1.1. Text alternatives: provide text alternatives for any non-text content so that it can be changed into other forms people need, such as large print, Braille, speech, symbols or simpler language.
  • Guideline 1.2. Time-based media: provide alternative for time-based media.
  • Guideline 1.3. Adaptable: create content that can be presented in different ways (for example simpler layout) without losing information or structure.
  • Guideline 1.4. Distinguishable: make it easier for users to see and hear content including separation foreground from background.

User interface components and navigation must be operable.

This principle includes 4 guidelines:

  • Guideline 2.1. Keyboard accessible: make all functionality available from a keyboard.
  • Guideline 2.2. Enough time: provide users enough time to read and use content.
  • Guideline 2.3. Seizures: do not design content in a way that is known to cause seizures.
  • Guideline 2.4. Navigable: provide ways to help users navigate, find content, and determine where they are.

Information and the operation of user interface must be understandable.

This principle includes 3 guidelines:

  • Guideline 3.1. Readable: make text content readable and understandable.
  • Guideline 3.2. Predictable: make web pages appear and operate in predictable ways.
  • Guideline 3.3. Input assistance: help users avoid and correct mistakes.

This principle only includes one guideline:

  • Guideline 4.1. Compatible: maximize compatibility with current and future user agents, including assistive technologies.

WCAG 2.0 Conformance

In order to comply with WCAG 2.0, there are some important requirements that must be met before proceeding to evaluate compliance with the success criteria. These requirements set out a basic framework: conformance levels, scope, technologies and accessible uses.

Conformance requirements

The five conformance requirements are:

  • Conformance Level: defines the meaning of levels (A, AA, AAA) and how to achieve conformance.
  • Full pages: defines what is considered a ‘web page’ and where to place alternatives for non-accessible content; note that, while non-conforming content in WCAG 1.0 requires a separate alternative page, in version 2.0 the alternative can be part of the same pag
  • Complete processes: defines the concept of ‘process’ (task) and how it affects to conformance of single web pages within the process
  • Only accessibility-supported ways of using technologies: refers to the uses of technologies that are relied upon and the need of alternatives when these uses are not accessible.
  • Non-interference: how non-accessible content can interfere with or prevent access to other content that would otherwise be accessible.

Differences between WCAG 1.0 and WCAG 2.0

The new WCAG 2.0 guidelines have a similar structure to those in WCAG 1.0, but there are notable differences:

  • In the first place, the guidelines are organised around four basic principles (Perceivable, Operable, Understandable and Robust), which together constitute the basic philosophy of the guideline
  • The guidelines themselves are under the principles; the guidelines also have a general character, though they refer to specific aspects of each basic principle.
  • Finally, each guideline includes a series of success criteria which, like the WCAG 1.0 checkpoints, define rules for the accessibility of Web content, but which, unlike WCAG 1.0, are testable. The success criteria are assigned conformance levels (A, AA, AAA), in a similar way as WCAG 1.0 checkpoints (although the concept of “priorities” has been eliminated); also, the same success criterion can appear several times but with slight differences for different conformance levels. The guidelines are written to be independent of the technology used to create the content, and the success criteria are aimed to be testable without ambiguity, using an automated evaluation tool or by a person. Each success criterion includes a link to the corresponding section in the rest of the supporting documents.Also, each success criterion may link to various techniques, which can be of two types:
    • Sufficient techniques: If the technique is followed, the success criterion is met by any element that uses it.
    • Additional techniques: help to improve accessibility, but they do not ensure complete fulfilment of the success criterion. The techniques are not normative or mandatory; they only compile some known recommendations and solutions adapted to various existing technologies, but they are not the only possible solutions. They also give references to common failures (techniques to avoid) and bad practices that are known to provoke non-conformities that lead to accessibility barriers.

Guidelines and references

The WCAG 2.0 supporting technical materials include:

  • How to Meet WCAG 2.0: A customizable quick reference to Web Content Accessibility Guidelines 2.0 requirements (success criteria) and techniques
  • Understanding WCAG 2.0 : has additional guidance on learning and implementing WCAG 2.0 for people who want to understand the guidelines and success criteria more thoroughly.
  • Techniques for WCAG 2.0 : gives you specific details on how to develop accessible Web content, such as HTML code examples.

Training

Please consult  Syslog, the training information system, which gives you access to the training catalogue, the training map and allows you to introduce your application for a training course.

Top

1.1.3. 10 golden rules in accessible Web design

Check and apply 10 golden rules that solve 80% of the accessibility barriers when correctly applied.

The guide "Accessible Web Design Best Practicesmsw8" provides a set of best practices on site design and the accessibility features of specific content technologies. It will help you to ensure the accessibility of your web site.

 

Provide text alternatives

  • Non-text content (images, audio and video…)
  • Equivalent purpose
  • Multiple ways of providing alternatives
  • CAPTCHA needs accessible alternatives
  • Decorative content
  • Images of text

Structure contents

  • Headings
  • Lists
  • Data tables
  • Markup vs. style sheets
  • Resize text
  • Bypass blocks

Avoid dependence on a single sense

  • Captions and audio descriptions
  • Use of colour
  • Sensory characteristics
  • Contrast
  • Background audio

Make all functionalities keyboard accessible

  • Keyboard access
  • No keyboard trap
  • Focus order and visibility
  • Unexpected behaviour
  • Drop down menus, accordions, carousels…

Give users enough time

  • Timing adjustable
  • Automatic redirections
  • Long processes
  • Banners

Avoid interferences

  • Seizures and flashes
  • Audio control
  • Blinking, moving, auto-updating
  • Opening new windows
  • Unexpected behaviour

Identify hyperlinks and contents

  • Link purpose
  • Page titles
  • Language of page and parts
  • Form labels
  • Section headings
  • Opening new windows

Make navigation interfaces consistent

  • Consistent navigation
  • Consistent identification
  • Multiple ways
  • Information architecture

Help users avoid mistakes

  • Labels and instructions
  • Error identification
  • Error suggestion
  • Error prevention
  • Good information architecture

Ensure compatibility

  • Web standards and code validation
  • Accessible use of technologies
  • User tests
  • JavaScript, PDF and Flash
  • WAI-ARIA: Accessible Rich Internet Applications
Top

1.1.4.

Top

1.1.5. Evaluation and tools

WCAG 2.0 has 12 guidelines that are organized under 4 principles:

  • perceivable,
  • operable,
  • understandable and
  • robust.

For each guideline, there are testable success criteria, which are at three levels: A, AA, and AAA.
Each guideline is associated with one or more checkpoints describing how to apply that guideline to particular features of Web pages.

WCAG 2.0 Evaluation

Level A and AA success criteria that must be met in order to comply with the Double-A level of the Web Content Accessibility Guidelines 2.0.

 

WCAG 2.0

DESCRIPTION

LEVEL

1.1.1

Non-text Content

A

1.2.1

Audio-only and Video-only (Pre-recorded)

A

1.2.2

Captions (Pre-recorded)

A

1.2.3

Audio Description or Media Alternative (Pre-recorded)

A

1.2.4

Captions (Live)

AA

1.2.5

Audio Description (Pre-recorded)

AA

1.3.1

Info and Relationships

A

1.3.2

Meaningful Sequence

A

1.3.3

Sensory Characteristics

A

1.4.1

Use of Colour

A

1.4.2

Audio Control

A

1.4.3

Contrast (Minimum)

AA

1.4.4

Resize text

AA

1.4.5

Images of Text

AA

2.1.1

Keyboard

A

2.1.2

No Keyboard Trap

A

2.2.1

Timing Adjustable

A

2.2.2

Pause, Stop, Hide

A

2.3.1

Three Flashes or Below Threshold

A

2.4.1

Bypass Blocks

A

2.4.2

Page Titled

A

2.4.3

Focus Order

A

2.4.4

Link Purpose (In Context)

A

2.4.5

Multiple Ways

AA

2.4.6

Headings and Labels

AA

2.4.7

Focus Visible

AA

3.1.1

Language of Page

A

3.1.2

Language of Parts

AA

3.2.1

On Focus

A

3.2.2

On Input

A

3.2.3

Consistent Navigation

AA

3.2.4

Consistent Identification

AA

3.3.1

Error Identification

A

3.3.2

Labels or Instructions

A

3.3.3

Error Suggestion

AA

3.3.4

Error Prevention (Legal, Financial, Data)

AA

4.1.1

Parsing

A

4.1.2

Name, Role, Value

A

Evaluation tools

  • Builtā€in accessibility
  • Screen readers: JAWS, NVDA, VoiceOver, Orca...
  • Magnification: ZoomText, MAGic, Zoom...
  • Voice recognition: Dragon Naturally Speaking, Mac dictate, Voice Command Recognition
  • Mobile
    • Screen readers: Talks, Mobile speak, VoiceOver, Orator...
    • Magnification: Zooms, Mobile magnifier
Top

1.1.6. Screen readers

A screen reader (reader of screen for defective visual) is a software which tries to identify and to interpret what is posted on a screen, then the text is retranscribed, either in a text braille, or in a sound text (by voice synthesis). It is an element of TTS (Text To Speech) software category.

People who can not see the screen, or have difficulty reading, but can hear, are able to use computers with this kind of assistive technology that produces speech (or Braille, which is read with the fingertips). Screen readers typically have numerous options, so that the user experience of a given web page will be different for each person.

Some of the most widely used screen readers available at the date are:

  • Windows: JAWS, Window Eyes, NVDA
  • Mac: VoiceOver
  • Linux: GNome-Orca
  • Mobile: Talks (Symbian); Mobile Speak Pocket (Windows mobile); Voiceover (iPhone 3GS); Orator (Blackberry RIM)
Top

1.1.7. WAI conformance logo

On EUROPA, we apply WCAG 2.0 - level AA, so level A and AA success criteria must be met for new web sites.

The WAI conformance logo indicates that these pages, as well as (some of) their subpages, were designed with accessibility in mind. It also links to the central EUROPA page describing its "Web Accessibility Policy".

When the logo can be included

In principle, the WAI conformance logo will only be placed on "top-level" pages of the EUROPA server. However, this does not mean that lower-level pages are not accessible, they will simply not carry the logo.

"Top-level pages" can be defined as all "horizontal" or "key" pages of a website. These usually include the (monolingual) homepage of the site and the following pages (when they exist): "Search", "Sitemap", "Contact", "What's new?" (or "News") and "About this site".

The logo can also be placed on the entry page(s) of:

  • any other main sections of the site, and/or
  • any newly launched site(s),

if they are compliant.

The website's multilingual entry page (often referred to as a "splash screen" and usually only containing a list of links to the different language versions of the site) is also considered a "top-level" page and should therefore be accessible as well.

Before the logo can be included a thorough validation should be executed to ensure that the pages it appears on respect the IPG's Web Accessibility Rules.

Integrating the WAI conformance logo

The following source code should be used for the integration of the WCAG 2.0, level AA WAI conformance logo for EUROPA pages (example for English pages):

<a href="/geninfo/accessibility_policy_en.htm" title="Link towards the EUROPA web site's accessibility policy."><img height="32" width="88" src="/images/wai-logo/wcag2aa.gif" alt="Conformance Icon Level 'A', W3C-WAI - Web Content Accessibility Guidelines 2.0, AA" border="0"></a>

Detailed explanations regarding the source code:

  • <a href="/geninfo/accessibility_policy_en.htm" title="Link towards the EUROPA web site's accessibility policy.">
  • The logo links to the central EUROPA page on the Commission's "Web Accessibility Policy".
  • This link should use a "relative path" and point to "accessibility_policy_xx.htm" located in the /geninfo/ folder (please choose appropriate language version).
  • A "title"-attribute has been added to the anchor providing more detailed information on the target page (translations in all official EU languages of the value of the "title" attribute are available in the IPG Library).
  • <img height="32" width="88" src="/images/wcag2aa.gif" alt="Conformance Icon Level, W3C-WAI - Web Content Accessibility Guidelines 2.0, AA" border="0">
  • The WAI logo - use a "relative path" to the central image (" WCAG2AA.gif") located in the " /images/" folder.
  • Height of the image: 32 pixels.
  • Width of the image: 88 pixels.
  • Set image border to 0 pixels.
  • You can find the logo in the IPG library.
  • In addition to the above-mentioned instructions, please make sure there is some space around the image (to avoid that it sticks to the screen borders) and that the image is displayed at the bottom-left side of the screen (at approx. the same level of the lowest sentence on the page).

Related links

Top

1.2. Document formats

Mandatory requirement Content on EUROPA websites must always be provided in html or pdf format. 

 

View all IPG Rules

Only certain document formats may be used on EUROPA, because many formats are platform-specific and so may not be accessible to all users.

Content must always be provided in one of the following formats:

Other formats may only be used in exceptional circumstances:

  • Pure text files (.txt) files, where information is not available in a richer format
  • In case revisable files are put available for download, other formats can also be used, (always ensure files are virus free) but in all cases the standard format (pdf or html) must also be provided. In that case, we recommend to offer both the most popular format (MS Office) and the Open Document Format (ODF).  The type of format offered must be indicated by means of the corresponding icon (see Documents icons). Please be aware of the dangers inherent in using proprietary formats - they require proprietary software, may pose compatibility problems or may contain hidden information.

 

Top

1.2.1. HyperText Markup Language - HTML

Mandatory requirement

The current version of HTML officially approved for use on EUROPA is HTML 4.01 Transitional.

 

View all IPG Rules

HyperText Markup Language (HTML)  is the universally understood language for publishing hypertext documents on the World Wide Web. It is a non-proprietary format based upon Standard Generalized Markup Language (SGML) that defines the structure and layout of a Web document by using a variety of tags and attributes.

Description

HTML documents are plain-text files (which have a .htm or .html suffix) containing markup tags that tell the Web browser or other devices how to display the file. An HTML file can be created and processed by a wide range of tools, from simple plain text to sophisticated WYSIWYG authoring tools. With HTML is possible to incorporate graphics and multi-media contents by referencing them in the text, and integrate complementary languages such as Style sheets CSS or JavaScript.

Use on EUROPA websites

  • The current version of HTML officially approved for use on EUROPA is HTML 4.01  Transitional.
  •  

  • !DOCTYPE tag

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

    Although the !DOCTYPE tag is not strictly required for any HTML page, it must be present on all pages as it has many advantages:
    • it specifies to a browser that the code is HTML, the DTD (Document Type Definition) is an official W3C public DTD, and the HTML version,
  • this identification is also essential to any quality control and/or verification procedures.

    Usually the !DOCTYPE is inserted automatically by HTML editors and authors give little or no thought to its accuracy or usefulness. Care must be taken that the !DOCTYPE tag accurately reflects the status of the following HTML.

    Recommendation for the !DOCTYPE tag:

    • !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
      This is the HTML 4.01 Transitional DTD, which includes presentation attributes and elements that W3C expects to phase out as support for style sheets matures. The Strict DTD should be used when possible, but it is very strict, and use of the Transitional DTD gives more flexibility in the transition from previous HTML versions to 4.01.

 

  • HTML documents must always be validated. There are some automatic tools available on the Web that can verify if HTML files are in compliance with the W3C recommendations.

 

  • Try to keep HTML pages not longer than 70kb.

  

  • Browser compatibility
    A web browser is a computer program that allows users to access information across the World Wide Web. The capabilities of different browsers vary and different browsers will render a Web page differently according to their support of recommended mark-up standards.

    The recommendation is that EUROPA websites should work with the widest range of browsers and release versions. Websites should be tested on a range of browsers to be accessible to the widest possible audience.

 

  • Frames
    If they are well authorised by the EUROPA team, the frames have a NOFRAMES alternative.

Validation tools

Guidelines and references

Training

Please consult Syslog, the training information system, which gives you access to the training catalogue, the training map and allows you to introduce your application for a training course.

Top

1.2.2. PDF (Portable File Format)

PDF (Portable Document Format) is a technology developed by Adobe for sharing electronic documents.

The Portable Document Format (PDF) is the standard format for the secure and reliable distribution of electronic documents. PDF files preserve the fonts, colours, formatting and graphics of the original source documents. It is also the format of files available for download on the EUROPA web site.  

Description

PDF files are platform independent and are viewed and printed via the freely available Adobe Reader, which can be downloaded for free.

PDF files are generally produced from source files existing in other formats, such as MS Word, MS Excel, HTML-Web pages, Power Point, etc. Any application capable of printing can be used to produce PDF-formatted versions of print outputs. There are also several free and proprietary tools for converting files to PDF.

PDF was officially released as an open standard on July 1, 2008, and published by the International Organization for Standardization as ISO/IEC 32000-1:2008.

Use on EUROPA (checkpoints)

  • Version of PDF currently in use for publishing on EUROPA is 1.5.
  • Optimise your PDF files before publishing on EUROPA. By optimising the PDF files the size of the files is smaller and the document can be delivered page by page.
  • You should insert the following mandatory metadata into PDF files before publishing: Title, Author, Keywords, Subject.
  • Always indicate the PDF format in order for the user to know beforehand that it is pointing to the PDF file; The PDF format can be indicated by the PDF appropriate standard icon PDF doc 
  • Always specify the size of the PDF file in the following format [<size of the file>KB].
  • Provide a link to the EUROPA FAQ section on PDF including a link to the Acrobat Reader download site.
  • Try to keep the size of the PDF files under 2 MB.
  • There are a number of possible technical options: optimisation, security features (including forbidden operations such as printing, selecting text, extracting graphic elements, etc.), forms, encrypted, partial or complete embedding of fonts (when uncommon or non-standard fonts and/or characters are required). 

Validation tools/ Services

PDF CoDe is a service for converting the files via email. You can send a file to be converted into PDF format to the generic PDF CoDe mailboxes where the file is converted and send back to your inbox.  To know more about how to create a PDF, consult our "Creating PDF with PDF CoDe" page.

 

Guidelines and references

Training

Please consult Syslog, the training information system, which gives you access to the training catalogue, the training map and allows you to introduce your application for a training course.

Top

1.3. Markup languages

Markup languages are languages that provide added structural information to text documents, and more recently to vector graphics documents, content syndication and user interfaces. They are a fundamental part of the Web. For example, markup can indicate which part of the document is a heading, which parts are paragraphs, what belongs in a table, and so on. The markup in a web page document instructs the web browser how to display your document appropriately.

Top

1.3.1. HyperText Markup Language - HTML

Mandatory requirement

The current version of HTML officially approved for use on EUROPA is HTML 4.01 Transitional.

 

View all IPG Rules

HyperText Markup Language (HTML)  is the universally understood language for publishing hypertext documents on the World Wide Web. It is a non-proprietary format based upon Standard Generalized Markup Language (SGML) that defines the structure and layout of a Web document by using a variety of tags and attributes.

Description

HTML documents are plain-text files (which have a .htm or .html suffix) containing markup tags that tell the Web browser or other devices how to display the file. An HTML file can be created and processed by a wide range of tools, from simple plain text to sophisticated WYSIWYG authoring tools. With HTML is possible to incorporate graphics and multi-media contents by referencing them in the text, and integrate complementary languages such as Style sheets CSS or JavaScript.

Use on EUROPA websites

  • The current version of HTML officially approved for use on EUROPA is HTML 4.01  Transitional.
  •  

  • !DOCTYPE tag

    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">

    Although the !DOCTYPE tag is not strictly required for any HTML page, it must be present on all pages as it has many advantages:
    • it specifies to a browser that the code is HTML, the DTD (Document Type Definition) is an official W3C public DTD, and the HTML version,
  • this identification is also essential to any quality control and/or verification procedures.

    Usually the !DOCTYPE is inserted automatically by HTML editors and authors give little or no thought to its accuracy or usefulness. Care must be taken that the !DOCTYPE tag accurately reflects the status of the following HTML.

    Recommendation for the !DOCTYPE tag:

    • !DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
      This is the HTML 4.01 Transitional DTD, which includes presentation attributes and elements that W3C expects to phase out as support for style sheets matures. The Strict DTD should be used when possible, but it is very strict, and use of the Transitional DTD gives more flexibility in the transition from previous HTML versions to 4.01.

 

  • HTML documents must always be validated. There are some automatic tools available on the Web that can verify if HTML files are in compliance with the W3C recommendations.

 

  • Try to keep HTML pages not longer than 70kb.

  

  • Browser compatibility
    A web browser is a computer program that allows users to access information across the World Wide Web. The capabilities of different browsers vary and different browsers will render a Web page differently according to their support of recommended mark-up standards.

    The recommendation is that EUROPA websites should work with the widest range of browsers and release versions. Websites should be tested on a range of browsers to be accessible to the widest possible audience.

 

  • Frames
    If they are well authorised by the EUROPA team, the frames have a NOFRAMES alternative.

Validation tools

Guidelines and references

Training

Please consult Syslog, the training information system, which gives you access to the training catalogue, the training map and allows you to introduce your application for a training course.

Top

1.3.2. Web Content Syndication

Web Content Syndication is a form of syndication in which a section of a website is made available for other sites to use.

Description

More commonly these days web content syndication refers to making Web feeds available from a site so other people can display an updating list of content from it (for example one's latest news or forum postings, etc.).

Although the format could be HTML or JavaScript, it is more commonly XML.

Considerable discussion about the right format has led to RSS, which has several parallel versions, and more recent attempts produced the new Atom web syndication format and protocol. Really Simple Syndication (RSS 2.0) is the XML format for Web Content Syndication mainly used on EUROPA.

Use on EUROPA

  • RSS 2.0

Guidelines and references

In general terms, Web Content Syndication (WCS) could be defined as automatically re-publishing content from one web site on another website.

In many ways, WCS is also similar to the subscription newsletters that many sites offer to keep viewers up-to-date. The big difference is that they do not have to supply an e-mail address, removing the obstacle of privacy concerns, while still providing a direct channel to its viewers. They also get to see the content in the most convenient manner, thus ensuring a larger audience.

In order to make this new form of communication possible, a series of XML-derived file format have been defined. There is not a standard format for Web Content Syndication. Nevertheless, more and more sites are adapting their content in order to serve it via “feeds” and so it seems sure to play a major role in the future of the WWW; changing the way we receive information online.

To use this technology, site owners create or obtain specialized software (such as a content management system) which, in the machine-readable XML format, presents new articles in a list, giving a line or two of each article and a link to the full article or post. Unlike subscriptions to many printed newspapers and magazines, most feed subscriptions are free.

The feed formats provide web content or summaries of web content together with links to the full versions of the content, and other meta-data. This information is delivered as an XML file called an feed, webfeed, stream or channel. A feed is an XML-based document which contains content items, often summaries of stories or weblog posts with web links to longer versions. Weblogs and news websites are common sources for web feeds, but feeds are also used to deliver structured information ranging from weather data to "top ten" lists of hit tunes.

The technology allows Internet users to subscribe to websites that have provided feeds; these are typically sites that change or add content regularly.

The terms "publishing a feed" and syndication are used to describe making available a feed for an information source. Like syndicated print newspaper features or broadcast programs, web feed contents may be shared and republished by other web sites.

Web Content Syndication

In addition to facilitating syndication, Web Content Syndication feeds allows a website's frequent readers to track updates on the site using an feed reader (or aggregator).

Users can have feeds delivered in several ways:

  • Using a standalone desktop client. Readers are downloaded to computer and run independently of other software.
  • Via an E-mail client. Plug-ins for Outlook or other POP3 e-mail client that allow it to receive feeds in the e-mail window.
  • Via a Web browser. There are two types:
    • Web browser plug-ins, and
    • Aggregator web sites. They are subscription online services that allow viewing feeds using any Web browser. If users use one of the web-based readers, they can access feeds from anywhere, just by signing into the website that manages the feeds. Also of interest to those unable to download and install software; they provide free news aggregation services that can be accessed through normal web browsers. On the other hand, having the feeds collected on a single web page means users still have to visit that web page.
  • Via a mobile device.

Web feeds are designed to be machine readable, so there is no requirement that they be destined only for human readers. For example, business partners could use web feeds to exchange sales data or other information without any human intervention.

Web feeds are most commonly found in various RSS formats or in Atom format.

The following symbols on a web page indicate whether it has feeds

Web Content Syndication

With the proliferation of feeds definitions arose the need for a format to exchange subscription lists. There were several attempts, among them the most widely used is Outline Processor Markup Language (OPML) is a file format that can be used to exchange subscription lists between programs such as feed readers and aggregators. Originally developed by Radio UserLand as a native file format for an outliner application it has since been adopted for other uses, to exchange lists of feeds between aggregators, and also has become popular as a format for exchanging data between other outliners and server programs, that use outlines to specify directories and slide presentations. The OPML specification defines an outline as a hierarchical, ordered list of arbitrary elements. The specification is fairly open which makes it suitable for many types of list data. As a side-effect, subscription lists can be edited and organized using any OPML-compatible outliner. The latest version is version 1.0 (September 2000).

References & Background information:

http://msdn.microsoft.com/windowsvista/building/rss/. RSS in Windows Vista
http://www.userland.com/. UserLand Software
http://www.opml.org. Outline Processor Markup Language (OPML)
http://www.completerss.com/. CompleteRSSs Feed Search Engine
http://www.feed-directory.com/. Feed-Directory Feed Search Engine
http://www.plazoo.com/. Plazoo Feed Search Engine
http://www.rssfeeds.com/. RSSfeed Feed Search Engine
http://www.syndic8.com/. Syndic8 Feed Search Engine
http://www.technorati.com/. Technorati Feed Search Engine
http://www.ldodds.com/rss_validator/1.0/validator.html. Experimental Validator
http://www.feedvalidator.org/. Feed Validator
http://rss.scripting.com/. RSS Validator
http://www.w3.org/RDF/Validator/. W3C RDF Validator
http://www.w3.org/RDF/. Resource Description Framework (RDF)
http://oml.sourceforge.net. Outline Markup Language (OML)
http://www.kbcafe.com/rss/usm.html. Universal Subscription Mechanism (USM)
http://dublincore.org/. Dublin Core Metadata Initiative
http://creativecommons.org/licenses/ - Creative Commons Licenses

Training

Please consult Syslog, the training information system, which gives you access to the training catalogue, the training map and allows you to introduce your application for a training course.

Top

1.3.3. XML

Automatic translation of this page

Le XML (eXtensible Markup Language) est, comme HTML, un langage de "marquage" de document. Au contraire de HTML, constitué d'un nombre limité de balises, XML permet de structurer de l'information textuelle par l'utilisation de balises non prédéfinies: HTML s'occupe essentiellement de présentation, XML décrit le contenu.

  • Un jeu de caractères pour représenter les symboles de base,
  • Des éléments qui servent à structurer le contenu de manière hiérarchique, 
  • La possibilité de définir des grammaires (DTD/Schéma) pour restreindre l'utilisation de ces éléments.

XML - Intro

Le XML est un sous-ensemble de SGML (Standard Generalized Markup Language). La version 1.0 de XML a fait l'objet d'une recommandation W3C en février 1998, revue en octobre 2001. Les objectifs de conception du XML sont les suivants :

  • XML doit pouvoir être utilisé sans difficulté sur internet;
  • XML doit soutenir une grande variété d'applications;
  • XML doit être compatible avec SGML;
  • Il doit être facile d'écrire des programmes traitant les documents XML;
  • Le nombre d'options dans XML doit être réduit au minimum, idéalement à aucune;
  • Les documents XML doivent être lisibles par l'homme et raisonnablement clairs;
  • La conception de XML est formelle et concise;
  • Il doit être facile de créer des documents XML;
  • La concision dans le balisage de XML est de peu d'importance.
<items>
     <item>
          <title>
Europa</title>
          <abstract>L'Union européenne 
               en ligne
          </abstract>
          <link>
              
http://europa.eu/index_fr.htm
          </link>
     </item>
     <item>
          <title>
MyIntracomm</title>
          <abstract> L'intranet de la 
               Commission européenne 
          </abstract>
          <link>             
http://www.cc.cec/home/menu_fr.html 
          </link>
     </item>
</items>

 

Le XML offre ainsi un moyen simple pour transmettre de l'information en assurant de sa lisibilité indépendamment de toute plateforme et en facilitant son traitement par l'utilisation d'une structure simple et d'une grammaire comprise et acceptée par tous les intervenants.

Ainsi dans le monde Internet, l'arrivée du XML a permis de mettre en place des systèmes qui permettent aux auteurs de ne se préoccuper que du contenu indépendamment de sa forme, de réutiliser un même contenu sur différentes pages, de formater le contenu en fonction du destinataire-cible, ...        

XML et Europa

Le XML peut être traité au niveau du client, mais ce traitement ne s'effectue malheureusement pas de la même manière sur tous les clients.

Il n'est donc pas possible aujourd'hui de s'assurer d'un traitement équivalent quel que soit le browser utilisé. La seule possibilité d'utiliser le XML de manière sûre est d'en effectuer la transformation vers HTML sur nos serveurs et de continuer à "livrer" du code HTML aux visiteurs d'Europa.

XML : brève description technique

SGML, HTML et XML

Le XML (eXtensible Markup Language) est, comme le HTML, un langage de "marquage" de document. Au contraire du HTML constitué d'un nombre limité de balises, le XML permet de structurer de l'information textuelle par l'utilisation de balises non prédéfinies: le HTML s'occupe essentiellement de présentation, le XML décrit le contenu.

Le XML est un métalangage qui permet d'identifier les informations élémentaires d'un document et de les rassembler dans une structure arborescente.

Structure
<items>
<item>
<title>
Europa</title>
<abstract>L'Union européenne
en ligne
</abstract>
<link>
http://europa.eu.int/index_fr.htm
</link>
</item>
<item>
<title>MyIntracomm</title>
<abstract>L'intranet de la
Commission européenne
</abstract>
<link>
http://www.cc.cec/home/menu_fr.html
</link>
</item>
</items>

La partie principale d'un document XML est composée d'éléments présentés dans une structure arborescente. Il ne peut y avoir qu'un et un seul élément (racine) qui contient tous les autres.

Chaque élément peut donc en contenir d'autres et être qualifié par des attributs.

Pour autant que les balises soient bien choisies, aucune connaissance particulière n'est nécessaire pour comprendre le contenu du document. Un document XML est indépendant de toute technologie propriétaire.

Les règles d'écriture sont simples: les balises doivent être obligatoirement fermées, le chevauchement entre balises n'est pas permis, les attributs sont spécifiés dans la balise d'ouverture, etc.

Prologue

Avant le contenu proprement dit, on trouve le prologue contenant:

  • la déclaration XML qui identifie le document comme un XML (version) et précise le jeu de caractère utilisé (encoding),
  • la référence (facultative) à la grammaire utilisée (DTD) et l'identification de l'élément racine,
  • les instructions (facultatives) de traitement à destination des applications (par exemple la référence à la feuille de style à utiliser pour l'affichage dans un browser).

Il faut noter qu'en l'absence d'identification de l'encodage, une application XML considérera le document comme étant Unicode.

<?xml version="1.0" encoding="...."?>
<!DOCTYPE items SYSTEM "test.dtd">
<?xml-stylesheet type="text/xsl" href="tsd.xslt"?>
<items>
<item>...

DTD/Schémas

Le vocabulaire et la structure du document peuvent être définis à l'aide d'une DTD (Document Type Definition - origine SGML) ou d'un schéma (recommandation W3C - mai 2001). L'utilisation de cette option permet à différents systèmes de communiquer entre eux sur une base communément acceptée. Il faut noter que la définition à l'aide de schémas est plus complète (typage des données).

Espace de nommage
Un document XML peut contenir des vocabulaires définis par différentes sources. Pour éviter les problèmes de collision (même balise définie dans deux vocabulaires différents et donc avec des significations différentes), il est possible de spécifier un "espace de nommage", afin de pouvoir lever l'ambiguïté relative aux balises communes à différents vocabulaires. <europa:items xmlns:europa='http://europa.eu' >
<europa:item type="internet" sequence="1">

Utilisation : XSL (eXtensible Stylesheet Language) et CSS

La XSL suivante appliquée à l'exemple précédent
<?xml version="1.0" encoding="...."?>
<xsl:stylesheet version="1.0" xmlns:xsl="http://www.w3.org/1999/XSL/Transform">
<xsl:output encoding="...." method="html" />
<xsl:template match="/">
<html>
<head/>
<body>
<table border="1"> <thead><tr><td>Some links</td></tr> </thead>
<xsl:for-each select="items">
<xsl:for-each select="item">
<tr><td>
<xsl:for-each select="title">
<a>
<xsl:attribute name="href">
<xsl:value-of
select="../link" />
</xsl:attribute>
</a>
</xsl:for-each>
</td></tr>
</xsl:for-each>
</xsl:for-each>
</table>
</body>
</html>
</xsl:template>
</xsl:stylesheet>
produit
<html>
<head>
<META http-equiv="Content-Type" content="text/html; charset=....">
</head>
<body>
<table border="1">
<thead> <tr><td>Some links</td></tr> </thead>
<tr><td><a href="http://europa.eu/index_fr.htm"> Europa </a></td></tr>
<tr><td><a href="http://www.cc.cec/home/menu_fr.html"> MyIntracomm </a></td></tr>
</table>
</body>
</html>
Le XML permet de stocker les informations sous une forme structurée. C'est un langage permettant de décrire les transformations (XML vers XML, XML vers HTML, ...) à appliquer à ces données.

Ainsi le même document XML peut être à la source d'un grand nombre de publications (single source).

L'utilisation la plus courante de XSL consiste en la transformation d'un document XML en une ou plusieurs pages HTML.

La séparation entre le contenu (XML) et sa représentation (transformation XSL) permet, à partir d'une même source, de créer des documents utilisant différentes représentations en fonction du public cible et/ou de la technologie cible (HTML, WML, WAP, RTF, ...).

Le XSL est principalement composé de XSLT (eXtensible Stylesheet Transformation - V1.0 W3C Recommandation 16 novembre 1999 - V2 Draft) permettant de transformer la structure des éléments XML.

Le processeur XSLT crée un arbre source à partir du document XML et lui applique les règles contenues dans le document XSL pour obtenir un arbre résultat. Celui-ci peut être formatté (XSL/FO) pour obtenir une page HTML par exemple. L'adressage d'un élément de l'arbre se fait via Xpath (V1.0 - W3C Recommandation 16 novembre 1999).

 

XML : valide et bien formé

Un document XML est donc composé d'éléments présentés dans une arborescence.

Les éléments peuvent comporter des attributs.

Un document XML commence obligatoirement par une première déclaration spécifiant la norme XML utilisée pour créer le document et le jeu de caractères utilisé dans le document.

Après cette déclaration, le document pourra contenir un certain nombre d'instructions de traitement (processing instructions) à destination d'applications particulières (par exemple pour l'affichage dans un browser).

<?xml version="1.0" encoding="...."?>
<!DOCTYPE items SYSTEM "test.dtd">
<?xml-stylesheet type="text/xsl" href="tsd.xslt"?>
<items>
     <item type="internet" sequence="1">
          <title>Europa</title>
          <abstract>
               L'union européenne en ligne
          </abstract>
          <link>
               http://europa.eu.int/index_fr.htm
          </link>
     </item>
     <item type="intranet" sequence="9">
          <title>IntraComm</title>
          <abstract>
               L'Intranet de la Commission européenne
          </abstract>
          <link>
               http://www.cc.cec/home/menu_fr.html
          </link>
     </item>
</items>

Un document XML est considéré comme bien formé s'il répond aux conditions suivantes:

  • le document commence par la déclaration XML;
  • il y a un élément racine unique qui contient tous les autres éléments;
  • toutes les balises sont fermées et ne se chevauchent pas (si un élément est vide, il doit être indiqué, soit par une balise ouvrante suivie immédiatement d'une balise fermante, soit par une balise d'élément vide - ex. <balise/>);
  • les valeurs des attributs doivent être entre " ";
  • le nom des attributs sont écrits en minuscules;
  • le nom des balises peut contenir des lettres, des chiffres, des tirets ( - ), des traits de soulignement ( _ ) et doit contenir au moins une lettre.
<?xml version="1.0" encoding="...."?>
<?xml-stylesheet type="text/xsl" href="tsd.xslt"?>
<!DOCTYPE items SYSTEM "test.dtd">
<items>
     <item type="internet"...

Il sera considéré comme valide si une instruction spécifiant une DTD (Document Type Definition) ou un schéma est présente et que le document est conforme à cette DTD (ou ce schéma).

La DTD/schéma définit le vocabulaire et la structure d'un document XML.

Une DTD comporte un ensemble de règles qui identifient les éléments et leurs attributs, leur position dans l'arborescence et leur fréquence d'apparition dans le document XML.

Pour l'exemple ci-dessus, on pourrait avoir le DTD suivant:

<!ELEMENT abstract (#PCDATA)>
<!ELEMENT item (title, abstract, link)>
<!ATTLIST item
type (internet | intranet) #REQUIRED
sequence CDATA #IMPLIED>
<!ELEMENT items (item+)>
<!ELEMENT link (#PCDATA)>
<!ELEMENT title (#PCDATA)>

ou le schéma suivant:

<?xml version="1.0" encoding="...."?>
<xs:schema xmlns:xs="http://www.w3.org/2001/XMLSchema" elementFormDefault="qualified">
<xs:element name="abstract" type="xs:string"/>
<xs:element name="item">
<xs:complexType>
<xs:sequence>
<xs:element ref="title"/>
<xs:element ref="abstract"/>
<xs:element ref="link"/>
</xs:sequence>
<xs:attribute name="type" use="required">
<xs:simpleType>
<xs:restriction base="xs:NMTOKEN">
<xs:enumeration value="internet"/>
<xs:enumeration value="intranet"/>
</xs:restriction>
</xs:simpleType>
</xs:attribute>
<xs:attribute name="sequence" use="required">
<xs:simpleType>
<xs:restriction base="xs:NMTOKEN">
<xs:minInclusive value="0"/>
<xs:maxInclusive value="5"/>
</xs:restriction>
</xs:simpleType>
</xs:attribute>
</xs:complexType>
</xs:element>
<xs:element name="items" type="xs:string"/>
<xs:element name="link" type="xs:string"/>
<xs:element name="title" type="xs:string"/>
</xs:schema>
La définition à l'aide d'un schéma est beaucoup plus précise (données typées, fourchette de valeurs, ...) qu'avec une DTD. Il faut également noter qu'un schéma est également un document XML, contrairement à la DTD.

La présence d'une DTD/schéma n'est pas obligatoire.

La DTD peut être définie à l'intérieur ou à l'extérieur (comme dans l'exemple) du document XML.

Les outils "validants" (par ex. IE) signaleront une erreur si le fichier qu'il traite n'est pas bien formé ou ne respecte pas la DTD/schéma spécifiée.

 

Pour en savoir plus...

Top

1.4. Image formats

Mandatory requirement Images on EUROPA websites must be in GIF, JPG or PNG format. 

 

View all IPG Rules

Image file formats provide a standardized method for the transfer and storage of image data. Image files are made up of picture elements, called pixels. The pixels that comprise an image are in the form of a grid of rows and columns. Each of the pixels is an image file that stores a digital number representing the brightness and colour of the image at that location.

Description

Image file sizes, expressed in bytes, increase with the number of pixels in the image, and the colour depth of the pixels. The more rows and columns, the greater the image resolution and the greater the file size. Also, each pixel making up the image increases in size as colour depth is increased. An 8-bit pixel (1 byte) can store 256 colours, a 24-bit pixel (3 bytes) can store 16 million colours, and a 32-bit pixel (4 bytes) can store 32 million colours.

Because of the bandwidth issues surrounding networked delivery of information and because image files contain so much information, Web graphics are by necessity compressed. Image compression is used to decrease file sizes.

There are two categories of image file compression: lossy and lossless. The lossy compression algorithm takes advantage of the limitations of the human visual senses and discards information that would not be sensed by the eye. The loss of information is tolerable, and in many cases goes unnoticed. Files size is reduced as file compression is increased. At some point image deterioration becomes noticeable. Lossless algorithms compress the image data with no loss in image quality, but these results in larger files than the lossy algorithms.

Use on EUROPA websites

Formats for the EUROPA websites:

  • GIF (Graphic Interchange Format)

    Advantages: Use GIF for images with large areas of uniform colour, logos, line-art, animations, one-color transparency or background patterns. All web browsers support GIF.  It supports transparency, multi-frame images (animation) and interlacing.

    Disadvantages: The GIF is limited to an 8-bit palette (256 colours) and therefore is not suitable for photographs.
  • JPG or JPEG (Joint Photographic -Experts- Group)  

    Advantages: Use JPEG for photographs or where there is a strong colour gradient to make your image files smaller and to store 24-bit-per-pixel color data. The JPEG format supports full colour and produces relatively small file sizes. Fortunately, the compression in most cases does not distract noticeably from the quality of the image.

    Disadvantages: Do not use JPEGs for simple block images, they will appear fuzzy. The JPEG image files are a lossy format. JPG looses quality every time it is opened and saved again – even at max quality. JPG does not support “Alpha Channels” or transparency. 
  • PNG (Portable Network Graphics)

    Advantages: Use PNG for large areas of uniform colour, for “illustration-style” images, transparent alpha background images or for the lossless, portable, well-compressed storage of raster images. PNG is a lossless format that supports true colour (16 million colours), alpha channels (transparency) and gamma correction. 
     
    Disadvantages:
    Many older browsers do not support the PNG file format. PNG file size could be larger than GIF or JPG formats. PNG cannot optimize photographs as well as JPEG can. 

No format is best in all scenarios. Therefore, it is best to play with the different formats and compression levels to achieve the best results. PNG should be used only when it is really needed (special transparency).

Below other formats which are not for the web but could be used for downloading or printing:

  • The TIFF (Tagged Image File Format) image files are a lossless format, using the filename extensions .tiff or .tif. Some digital cameras have the option to save images in the TIFF format. These files use the LZW compression algorithm which results in lossless files. Because no image data is lost, this format is used when the ultimate in image quality is desired. Another advantage of TIFF files is that they suffer no generation degradation during file manipulation. The TIFF files support 32-bit colour depth (true colour). The TIFF file sizes are larger than the JPEG file sizes, because JPEG takes advantage of its lossy compression. The TIFF image format is not widely supported by web browsers, and should not be used on the Internet. 
  • The EPS (Encapsulated PostScript) is a standard file format for importing and exporting PostScript files. There are two distinct types of .EPS files, one of which is a vector based graphics file and can be opened and easily edited for type, color, etc. in Adobe Illustrator or PC vector based programs. The other is an .EPS photo file, flattened, set resolution "picture" type file. It can be opened in PhotoShop or other image editing programs.

General rules for images

Standards for images (ALT text, inline vs background, size, etc.) are provided in the chapter Design - general rules for images.

Top

1.4.1. Graphics Interchange Format (GIF)

GIF ( Graphics Interchange Format ) is a bitmap image format that is widely used on the World Wide Web, both for still images (palletised colour raster images) and for animations.

Internet service provider CompuServe introduced GIF (Graphics Interchange Format) in 1987 as a format to transmit images with up to 256 different colours, replacing their earlier RLE format which was black and white only. In 1989 a revised specification was published that added some features to the format.

The original version of GIF was 87a  (or GIF87a ). In 1989, CompuServe devised an enhanced version, called 89a  (or GIF89a ), that added support for multiple images in a stream and storage of application-specific metadata. The two versions can be distinguished by looking at the first six bytes of the file, which, when interpreted as ASCII, read "GIF87a" and "GIF89a", respectively.

GIF is palette based: although any colour can be one of millions of shades, the maximum number of colours available is 256, which are stored in a ' palette ', a table which associates each colour number with an actual colour value. The limitation to 256 colours seemed reasonable at the time of GIF's creation because few people had the hardware to display more. Typical line drawings, cartoons, grayscale photographs, and similar graphics need only 256 colours. There exist ways to dither colour photographs by alternating pixels of similar colours to approximate an in-between colour, but this transformation inevitably loses some detail, and the algorithms to select colours and to perform the dithering vary widely in output quality, giving dithering a possibly unwarranted bad reputation. Additionally, dithering significantly reduces the image's compressability and thus works contrary to GIF's main purpose. A variation using the multiple images feature to draw each scanline in a separate palette can store any RGB colour out of 16 million, but this takes even more space than an uncompressed Windows bitmap and is useful only where lossless true colour is required. This variation works only for some viewers. Such images will seem defective on viewers with differing interpretations of the GIF specification regarding transparency and local palettes. 

Interlacing. The interlacing feature in a GIF file creates the illusion of faster loading graphics. What happens is that an image is presented in a browser in several steps. At first it will be fuzzy and blurry, but as more information is downloaded from the server, the image becomes more and more defined until the entire image has been downloaded. Very similar to the interlaced GIF is the Progressive JPEG. Interlacing is best for larger GIF images such as illustrations and photographs. Interlacing is a poor choice for small GIF graphics such as navigation bars, buttons, and icons. This was quite useful in the past since many users (especially home users) were on dial-up access where the bandwidth is very limiting. Users with faster connections are not likely to notice the difference.

Transparency. GIF (89a) allows transparent pixels. The transparency feature allows a graphic designer to designate the background of the image transparent. One colour entry in a single GIF or PNG image's palette can be defined as "transparent" rather than an actual colour. This means that when the decoder encounters a pixel with this value, it is rendered in the background colour of the part of the screen where the image is placed, also if this varies pixel-by-pixel as in the case of a background image.

Animation: GIF (89a) is the only widely used image format to support animation, unless you want to use FLASH or other vector-based animation formats. GIF provides an effective way of distributing small animations. A GIF file can contain more than one image. With certain software packages (most web browsers and image viewers), multiple-image GIFs can be played back as animations. It can even be used to distribute film clips of very low resolution and short length (there is no way to include sound).

Why use GIF?

The GIF format is particularly suited to rendering images that contain large blocks of the same colour, or large blocks of repeating patterns. Additionally, it does not suffer from the lossyness that leaves JPEG unable to display flat, clean, colour without losing all compression. Therefore, whenever a logo is seen on the internet, chances are that it is a GIF. For the same reason as GIF is generally used for logos so it is used for web page elements. Bevels, background patterns, borders, and other decoration are often in the .gif format.

If it is necessary to use transparency. Adding transparency to a GIF graphic can produce disappointing results when the image contains antialiasing . If you use an image-editing program to create a shape set against a background colour, this program will smooth the shape by inserting pixels of intermediate colours along the shape's boundary edges. This smoothing, or antialiasing , improves the look of screen images by softening jagged edges. Trouble starts when you set the background colour to transparent and then use the image on a Web page against a different background colour. The antialiased pixels in the image will still correspond to the original background colour.

The most web browsers can display GIFanimation without the need for any extra plug-ins, also, the GIF files containing the animations are compressed, and will download quickly. GIF animation is good for small image animations on a web page, and for short animation sequences.

To conserve bandwidth, do whatever you can to make your image compact and small. The most common method of reducing the size of GIF files is to reduce the number of colours on the palette. The strategy is to reduce the number of colours in your GIF image to the minimum number necessary and to remove stray colours that are not required to represent the image. A GIF graphic cannot have more than 256 colours but it can have fewer colours, down to the minimum of two (black and white). Images with fewer colours will compress more efficiently under GIF compression. Not all software will let you set the bits per pixel for GIF or the colours of the palette. Also, you should use a global palette whenever possible for all images in a GIF animation, instead of local palette with each image inside it.

Where Gifs are not used:

  • Photographs.
    Owing to the general restriction on the number of available colours in a single GIF image to 256 (although these 256 colours can be any of 16 million possibilities) the GIF format is unsuited to large colour photographs. It may however be acceptable for smaller (less than 500 pixels) photographs with less colours. Digital photographs commonly use the JPEG format.

File Extension and others notes:

  • .GIF:....... GIF image.

The MIME media type for GIF is image/gif (defined in RFC 1341).

Web Browsers Support: All latest versions of browsers support GIF format.

GIF Patent Software Information.

GIF became popular because it used LZW data compression (Lempel-Ziv-Welch, 1984), which was more efficient than the run-length encoding that formats such as PCX and MacPaint used, and fairly large images could therefore be downloaded in a reasonable amount of time, even with very slow modems. The LZW compression scheme is best at compressing images with large fields of homogeneous colour. It is less efficient at compressing complicated pictures with many colours and complex textures.

It was only later that people found out that LZW, the compression algorithm used to store the image data within GIF, was patented by Unisys (IBM also).

When GIF finally became popular, Unisys started charging license fees for creating software that writes GIF files, even website owners who used GIF images on their site. This eventually triggered the development of PNG, the Portable Network Graphics image file format, in 1995, meant as a replacement for GIF. However, mediocre support of PNG in browsers kept GIF from becoming extinct.

The LZW Unisys patent expired on 20 June 2003 in the USA, in Europe it expired on 18 June 2004, in Japan patent expired on 20 June 2004 and in Canada it expired on 7 July 2004. The U.S. IBM patent will expire 11 August 2006.

Decoding GIF is a different issue. The Unisys and IBM patents are both written in such a way that they do not apply to a program which can only uncompress LZW format and cannot compress. Therefore it can include support for displaying GIF files in GNU software (GNU is a recursive acronym for “ GNU's Not UNIX ”).

References & Background information:

GIF87a. The   GIF87a  Specifications.

GIF89a. The   GIF89a  Specifications.

Adobe PHOTOSHOP. The official site of the last version of PHOTOSHOP.

CorelDRAW. The official site of the last version of CorelDRAW.

MS VISIO 2002 Standard Edition. The official site of VISIO 2002 SE.

Related tools and services

  • Recommended Authoring Graphics Tools:
    • Adobe Photoshop 7. (For discussion: Attention nowadays is Status EV)
    • CorelDraw 10. (For discussion: Attention nowadays is Class C)
  • Recommended Authoring Graphics Tools (for non-professional use):
    • Microsoft Visio 2002.
    • Graphical tools provided by the operating system or Office (Paint 5.1, Photoed 3.0).

Training

Please consult Syslog, the training information system, which gives you access to the training catalogue, the training map and allows you to introduce your application for a training course.

Activities

  • How to decide the correct format for an Image.

Roles (concerned)

Top

1.4.2. Joint Photographic Experts Group (JPEG)

JPEG ('Joint Photographic Experts Group') is a lossy compression method standardised by ISO. The formal name of the standard that most people refer to as ' JPEG ' is ISO/IEC IS 10918-1 | ITU-T Recommendation T.81 pdf [1.01MB], as the document was published by both ISO through its national standards bodies, and CCITT, now called ITU-T.

JPEG stands for Joint Photographic Experts Group , the original name of the committee that wrote the standard.

Also, JPEG JFIF , which is what people generally mean when they refer to 'JPEG', the file format created by the Independent JPEG Group (IJG) for the transport of single JPEG-compressed images.

The JPEG committee has created many standards since it was created in 1986.  ISO had actually started to work on this 3 years earlier, in April 1983, in an attempt to find methods to add photo quality graphics to the text terminals of the time, but the 'Joint' that the 'J' in JPEG stands for refers to the merger of several groupings in an attempt to share and develop their experience.

The formal name of the standard that most people refer to as ' JPEG ' is ISO/IEC IS 10918-1 | ITU-T Recommendation T.81pdf [1.01MB], as the document was published by both ISO through its national standards bodies, and CCITT, now called ITU-T.  IS 10918 has actually 4 parts:

  • Part 1 - The basic JPEG standard, which defines many options and alternatives for the coding of still images of photographic quality.
  • Part 2 - Which sets rules and checks for making sure software conforms to Part 1.
  • Part 3 - Set up to add a set of extensions to improve the standard, including the SPIFF file format.
  • Part 4 - Defines methods for registering some of the parameters used to extend JPEG.

As well as the standard was created, nearly all of its real world applications require a file format, and example reference software to help implementors.  These functions were added by others - the file format was created originally by Eric Hamilton, the then convenor of JPEG as part of his work at C-Cube Microsystems, and was placed by them into the public domain under the name JFIF (version 1.02pdf [23KB]).  In the mean time, the JFIF format has been superseded by a new file format called SPIFF (the Still Picture Interchange File Format pdf 105KB) which was completed in 1996. SPIFF is backwards compatible with JFIF.

Probably the largest and most important contribution however was the work of the Independent JPEG Group (IJG).  Their Open Source software implementation, as well as being one of the major Open Source packages was key to the success of the JPEG standard and was incorporated by many companies into a variety of products such as image editors and Internet browsers. 

 

JPEG is designed for compressing either full-color or gray-scale images of natural, real-world scenes. It works well on photographs, naturalistic artwork, and similar material; not so well on lettering, simple cartoons, or line drawings. JPEG handles only still images, but there is a related standard called MPEG for motion pictures.

JPEG is "lossy" meaning that the decompressed image isn't quite the same as the one you started with. There are lossless image compression algorithms, but JPEG achieves much greater compression than is possible with lossless methods.

JPEG is designed to exploit known limitations of the human eye, notably the fact that small color changes are perceived less accurately than small changes in brightness. Thus, JPEG is intended for compressing images that will be looked at by humans.

A useful property of JPEG is that the degree of lossiness can be varied by adjusting compression parameters. This means that the image maker can trade off file size against output image quality.  You can make ‘extremely’ small files if you don't mind poor quality; this is useful for applications such as indexing image archives.  Conversely, if you aren't happy with the output quality at the default compression setting, you can jack up the quality until you are satisfied, and accept lesser compression.

After creating the JPEG standard, the committee started to look at some of the criticisms of the existing standard.  High amongst these was the poor quality (and lack of integration) of lossless coding in the standard.  With this in mind, the committee developed the JPEG-LS standard - ISO/IEC IS 14495-1 | ITU-T Recommendation T.87pdf [353KB].

Why use JPEG?

There are two good reasons: to make your image files smaller, and to store 24-bit-per-pixel color  data  instead of 8-bit-per-pixel data.

Making image files smaller is a win for transmitting files across networks and for archiving libraries of images. JPEG can easily provide 20:1 compression of full-color data.  If you are comparing GIF and JPEG, the size ratio is usually more like 4.

JPEG is essentially a time/space tradeoff: you give up some time (to code/decode) in order to store or transmit an image more quickly or cheaply. The time savings from transferring a shorter file can be greater than the time needed to decompress the file.

The second fundamental advantage of JPEG is that it stores full color information: 24 bits/pixel (16 million colors).  GIF, the other image format widely used on the net, can only store 8 bits/pixel (256 or fewer colors).

Hence JPEG is considerably more appropriate than GIF for use as a World Wide Web standard photo format. The real disadvantage of lossy compression is that if you repeatedly compress and decompress an image, you lose a little more quality each time.

File Extension and others notes:

  • .JPG:...... JPEG image.
  • .JPE:....... JPEG image.
  • .JPEG:.... JPEG image.
  • .JP2:....... JPEG-2000 JP2 file format image format.
  • .JPC:....... JPEG-2000 code stream image format.

The MIME media type for JFIF is image/jpeg (defined in RFC 1341).

A Progressive JPEG is the JPEG equivalent of the interlaced GIF Graphics Interchange Format. It is an image created using the JPEG suite of compression algorithms that will "fade in" in successive waves of lines until the entire image has completely arrived. A progressive JPEG is a more appealing way to deliver an image at modem connection speeds. The user should see a gradual improvement of the quality of the image. This was quite useful in the past since many users (especially home users) were on dial-up access where the bandwidth is very limiting. Users with faster connections are not likely to notice the difference.

Web Browsers Support: All latest versions of browsers support JPEG format.

References & Background information:

Joint Photographic Experts Group (JPEG). The official site of the Joint Photographic Experts Group (JPEG), and Joint Bi-level Image Experts Group (JBIG).

ISO. International Organization for Standardization.

ITU-T. The ITU Telecommunication Standardization Sector is one of the three Sectors of the International Telecommunication Union (ITU).

Independent JPEG Group (IJG). IJG is an informal group that writes and distributes a widely used free library for JPEG image compression.

ISO/IEC IS 10918-1 | ITU-T Recommendation T.81pdf [1.01MB]. Information Technology - Digital compression and coding of continuous-tone still images: Requirements and  Guidelines. 

JPEG File Interchange Format Version 1.02pdf [17KB]. JPEG File Interchange Format is a minimal file format which enables JPEG bitstreams to be exchanged between a wide variety of platforms and applications. 

SPIFF (Still Picture Interchange File Format) pdf [105KB]. SPIFF specification. 

ISO/IEC IS 14495-1 | ITU-T Recommendation T.87pdf [353KB]. Lossless and near-lossless coding of continuous tone still images (JPEG-LS). 

ISO/IEC IS 15444 | ITU-T Recommendation T.800pdf [2.21KB]. Information Technology – JPEG 2000 Image Coding System. Last working draft before standardisation.

Adobe PHOTOSHOP. The official site of the last version of PHOTOSHOP.

CorelDRAW. The official site of the last version of CorelDRAW.

MS VISIO 2002 Standard Edition. The official site of VISIO 2002 SE.

Related tools and services

  • Recommended Authoring Graphics Tools:
    • Adobe Photoshop 7. (For discussion: Attention nowadays is Status EV)
    • CorelDraw 10. (For discussion: Attention nowadays is Class C)
  • Recommended Authoring Graphics Tools (for non-professional use):
    • Microsoft Visio 2002.
    • Graphical tools provided by the operating system or Office (Paint 5.1, Photoed 3.0).

Evolution of standard

JPEG 2000. Is a new image coding system that uses state-of-the-art compression techniques based on ‘wavelet technology’ (ISO/IEC IS 15444 | ITU-T T.800pdf [2.21MB]), and as well as being better at compressing images (up to 20 per cent plus), it can allow an image to be retained without any distortion or loss.

Wavelet technology  differs from the original JPEG strategy in the way it summarizes groups of pixels. One of the original JPEG compression algorithms, discrete cosine transformation, saved groups of eight pixels as individual blocks. Wavelet technology substitutes wavelets for blocks.

Training

Please consult Syslog, the training information system, which gives you access to the training catalogue, the training map and allows you to introduce your application for a training course.

Activities

  • How to decide the correct format for an Image.

Roles (concerned)

Top

1.4.3. Portable Network Graphics (PNG)

Portable Network Graphics ( PNG ) is an extensible file format for the lossless, portable, well-compressed storage of raster images. PNG provides a patent-free replacement for GIF and can also replace many common uses of TIFF. Indexed-color, grayscale, and truecolor images are supported, plus an optional alpha channel for transparency. Sample depths range from 1 to 16 bits per component (up to 48bit images for RGB, or 64bit for RGBA).    

Portable Network Graphics ( PNG ) is an extensible file format for the lossless, portable, well-compressed storage of raster images. Indexed-color, grayscale, and truecolor images are supported, plus an optional alpha channel for transparency. Sample depths range from 1 to 16 bits per component (up to 48bit images for RGB, or 64bit for RGBA). Is an ISO standard, ISO/IEC 15948:2003 (E) .

The motivation for creating the PNG format came in early 1995, after Unisys announced that it would be enforcing software patents on the LZW data compression algorithm used for GIF. There were also other problems with the GIF format which made a replacement desirable, notably its limitation to 256 colours at a time when computers capable of displaying far more than 256 colours were becoming common. Although GIF allows for animation, it was decided that PNG should be a single-image format. A companion format called Multiple-image Network Graphics (MNG) has been defined for animation.

PNG uses a non-patented lossless data compression method known as deflation. This method is combined with prediction, where for each image line, a filter method is chosen that predicts the colour of each pixel based on the colours of previous pixels and subtracts the predicted colour of the pixel from the actual color. An image line filtered in this way is often more compressible than the raw image line would be. On most images, PNG can achieve greater compression than GIF, but some implementations make poor choices of filter methods and therefore produce unnecessarily large PNG files.

The GIF file format has allowed portions of images to be transparent, allowing them to appear to have a shape that is not rectangular. However, the GIF method was considered to be rather poor because it only allowed individual pixels to be fully transparent or fully opaque. The PNG format improves upon this by also supporting an 8-bit alpha channel, so pixels in an image can have partial transparency. However, it took a long time for web browsers to fully support transparency, and some, notably Internet Explorer (for Windows), still do not.

Other image attributes that can be stored in PNG files include gamma values, background color, and textual information.

A PNG file consists of an 8-byte signature (89 50 4E 47 0D 0A 1A 0A in hexadecimal) followed by a number of chunks, each of which conveys certain information about the image. Chunks declare themselves as critical or ancillary, and a program encountering an ancillary chunk that it does not understand can safely ignore it. This chunk-based structure is designed to allow the PNG format to be extended while maintaining compatibility with older versions.

Evolution:

  • Version 1.0 of the PNG specification was released on 1 July 1996, and later appeared as RFC 2083. It became a W3C Recommendation on 1 October 1996.
  • Version 1.1, with some small changes and the addition of three new chunks, was released on 31 December 1998.
  • Version 1.2, adding one extra chunk, was released on 11 August 1999.

PNG is now an   ISO standard, ISO/IEC 15948:2003 (E) , also released as a W3C Recommendation on 10 November 2003. This version of PNG differs only slightly from version 1.2 and adds no new chunks.

In late 2004, an animation extension: Animated Portable Network Graphics(APNG) was proposed which, while retaining the ability to render the first frame as a normal PNG in decoders that do not understand the APNG format, also contains additional chunks which allow it to act as an animated image similar to a GIF file in a decoder which does understand the extension.

Why use PNG?

The PNG format is a suitable format for the web applications next generation. PNG provides a useful format for the storage of intermediate stages of editing. Since PNG's compression is fully lossless--and since it supports up to 48-bit truecolor or 16-bit grayscale--saving, restoring and re-saving an image will not degrade its quality. The advantages are:

  • Not a "flat" image.  Individual objects can be edited later.
  • Reasonable file sizes. Supports high-level lossless compression.
  • Allows for much additional information to be stored within the image.
  • Supports alpha channel transparency. The advantage over GIF's transparency support is that you can do gradiants and color mixing. Like if you have a web icon that you want to have a drop shadow, you can setup PNG to have the shadow work irregardless of the background your using. With GIF you'd have to create a new icon with different tinted shadow for each background your using.
  • Supports gamma correction (cross-platform control of image brightness).
  • Supports two-dimensional interlacing (a method of progressive display).
  • Can use many different palettes.
  • So PNG is superior to GIF in the way that it can do real transparencies, and it supports a much higher amount of colors.
  • PNG is lossless (unlike JPEG). Were as each time you open up a PNG file and edit it, then save it, it still is a sharp and nice as when you first made it. That is each time you open JPEG in a editor, then you save it again as a JPEG (even at its highest quality settings) you loose information and the picture looses quality.
  • Patent free. Non-patented lossless data compression method (Open Source).
  • This will be the next "standard" web format.

On the other hand, does not recommend PNG because:

  • Older browsers and programs may not support PNG files.
  • PNG provides less compression than the lossy compression of JPEG.
  • PNG offers no support for multi-image files or animated files (like alternative MNG format). The GIF format supports multi-image files and animated files.
  • For transmission of finished truecolor images -especially photographic ones-JPEG is almost always a better choice. Although JPEG's lossy compression can introduce visible artifacts, these can be minimized, and the savings in file size even at high quality levels is much better than is generally possible with a lossless format like PNG.
  • For transmission for black-and-white images, particularly of text or drawings, TIFF's Group 4 fax compression is often far better than 1-bit grayscale PNG.

File Extension and others notes:

  • .PNG :..... PNG image.

The MIME media type for PNG is image/png (defined by IANA).
MNG does not yet have a registered MIME media type, but video/x-mng can be used.

Web Browsers Support: All latest versions of browsers support PNG format.

  • Internet Explorer. Microsoft's Internet Explorer (MSIE) supports inline PNG images in versions 4.0b1 and later. MSIE supports PNG images but is unable to correctly display images with alpha transparency; partially transparent pixels will be displayed as fully opaque
  • Netscape Navigator has supported inline PNG images since version 4.04.

MNG is currently not as widely supported as PNG. Nonetheless, Netscape and Konqueror have native MNG support, and MNG plugins are available for Opera and Internet Explorer. Mozilla originally supported MNG, but native support for MNG was removed in version 1.5a and Mozilla has not supported the format since. Safari does not support MNG.

References & Background information:

ISO standard, ISO/IEC 15948:2003 (E) . Portable Network Graphics (PNG) Specification (Second Edition) Information technology — Computer graphics and image processing — Portable Network Graphics (PNG): Functional specification. ISO/IEC 15948:2003 (E).

The W3C's PNG Page.

The PNG Home Site.

PNG: The Definitive Guide.

Adobe PHOTOSHOP. The official site of the last version of PHOTOSHOP.

CorelDRAW. The official site of the last version of CorelDRAW.

MS VISIO 2002 Standard Edition. The official site of VISIO 2002 SE.

Related tools and services

  • Recommended Authoring Graphics Tools:
    • Adobe Photoshop 7. (For discussion: Attention nowadays is Status EV)
    • CorelDraw 10. (For discussion: Attention nowadays is Class C)
  • Recommended Authoring Graphics Tools (for non-professional use):
    • Microsoft Visio 2002.
    • Graphical tools provided by the operating system or Office (Paint 5.1, Photoed 3.0).

Evolution of standard

  • The PNG specification was first issued as a W3C Recommendation on 1st October, 1996 (press release) and updated to a second edition incorporating all errata on 10 November 2003. This edition is also an ISO standard, ISO/IEC 15948:2003 (E) .
    This means it is a mature document that is considered to contribute towards realising the full potential of the Web.

Training

Please consult Syslog, the training information system, which gives you access to the training catalogue, the training map and allows you to introduce your application for a training course.

Activities

  • How to decide the correct format for an Image.

Roles (concerned)

Top

1.5. Presentation

The appearance of a web page is defined by its stylesheet. Different stylesheet languages work with different markup languages:

  • CSS (cascading style sheets) works with HTML and XML
  • XSLT (extensible stylesheet language transformations) works with XML.

Stylesheets allow web designers to define and change the style of sets of web pages in a centralised way without having to change each page individually.

Top

1.5.1. Style Sheets - CSS

Mandatory requirement Control presentation and layout of web pages with Cascading Style Sheets (CSS).  

 

View all IPG Rules

Cascading Style Sheets (CSS) are a recommendation of the World Wide Web Consortium (W3C) introduced in late 1996, which offer extensive stylistic control over the presentation of Web pages. The W3C has published two major CSS recommendations, CSS1 and CSS2 (1998), which has gone through a first revision becoming CSS2.1. At present, the W3C is working on CSS3 .

Description

A style sheet is simply a text file (which has a .css suffix) written according to the grammar defined in the CSS recommendations that suggests a web browser how to draw a page.

CSS helps to simplify the task of maintaining web sites, separates formatting information from the structure of a document and provides sophisticated layout and design features for web pages.

Advantages of using Style Sheets

  • Separation of formatting information – positioning, sizing, margins, type faces, etc. - from the structure and content of a document, as represented by HTML elements – headings, lists, paragraphs, links, etc.
  • Easier site maintenance:central control over formatting which can be easily modified: one file (or set of files) can be used to control the overall design of a site.
  • Wider array of attributes to control the design of pages than that available with HTML.
  • Reduced size of the documents:eliminates redundant in-line styling (font, bold, color, etc.) which reduces the size of HTML files.
  • Increased accessibility: users can much more easily override author style information.
  • Possibility to apply of alternative Style Sheets for different output media devices: printers, voice browsers, PDA, etc.

Disadvantages of CSS

  • Browsers are not fully standards-compliant with both CSS recommendations. The support for different properties and the way they are rendered can substantially vary form one browser to other.
  • Platforms are another source of problems as they may have different default screen resolutions and font settings.

Use on EUROPA websites

  • CSS 2.1 is the standard officially approved for use on EUROPA.
  • Control presentation and layout with Style Sheets rather than with HTML presentation elements and attributes. Do not mix format instructions in both HTML code and via the Style Sheets simultaneously. This can lead to display conflicts with the browser’s or user’s default settings if the document is rendered without associated style sheets. HTML documents using Style Sheets must also be usable when CSS are disable.
  • Create a site that renders well with any browser by marking up HTML documents with the proper structural elements (e.g. for headings use <Hx>, for ordered lists use <ol>, etc.). Misusing mark-up for a presentation effect makes it difficult for users with alternative browsers to understand the organisation of the page or to navigate through it.
  • Link each page to the standard CSS files
    The Commission and inter-institutional templates provide links to central CSS files, which define the mandatory upper and bottom part elements of the page. It also provides a definition by default for all HTML elements. Do not make local copies of these central CSS-files nor copy parts of it in your local CSS file(s) and change their values.
  • Centralise formatting instructions using an external CSS file.
    In addition to the standard CSS files, you can use your own (local) Style Sheets to format the body part elements of your documents. Link it to your HTML pages using the LINK tag (i.e. <link rel="stylesheet" href="your local css file name" type="text/css">). With multiple linked Style Sheets (standards plus local) it is possible that conflicting style specifications may occur, but in general the order of specification is important, the latest taking precedence.
  • Inside your local Style Sheets define first the HTML mark-up elements such as body, h1, p, td, ul, etc. This will give a coherent presentation to the whole site and will save many formatting instructions. If finer control or a more sophisticated layout is required, then create classes, id or use descendant (contextual) selectors.
  • Follow CSS syntax rules as described by the W3C specifications and validate your own Style Sheets.
  • Try to limit your styles to a subset of well known CSS properties  that are sufficiently supported by the largest set of different browsers.
  • Classes should be named in English, without accents and space.
  • The property font-family will be a list of well known font family names always finishing by the value sans-serif. Each item in the list is separated by a comma. Font names should be capitalized except the value sans-serif. Example: font-family: Verdana, Arial, Helvetica, sans-serif;
  • Do not fix fonts in absolute values (i.e. px) except in special cases but in relative ones (i.e. % or em) or use nothing at all in order to leave the font resizable via the browser. Proper use of relative sizing can be difficult when documents elements are nested since they refer to the font size of the parent element. Be aware of this inheritance and never give values under 75 % or 9 px, it may render your text unreadable on some platforms (i.e. Mac or Linux). 

Validation tools

Guidelines and references

Training

Please consult Syslog, the training information system, which gives you access to the training catalogue, the training map and allows you to introduce your application for a training course.

Top

1.6. Multimedia formats

Mandatory requirementStandard format for audio is MP3, for video is MPEG 4, Flash format may be used under special circumstances.
Read more about requirements on multimedia formats below.

View all IPG Rules

Multimedia refers to the combination of the different types of media (texts, fixed or animated images, drawings and graphs, sounds, video) in a common numerical format, assembled together by a data-processing program, and made available to a reader allowing their exploitation.

Multimedia files need different plug-ins to be displayed. Depending on the user's PC configuration, the browser can prompt users to save the file to their hard drive or use a plug-in to display or execute the file within the browser window/environment.

Sound

Sound can be used on EUROPA with certain restrictions.

Sound adds to the richness of EUROPA pages but use of inappropriate files can overload the server and/or the user's connection, and result in an unacceptably long download time. Sound clips should be reasonably short to keep the attention of the user.

Sound files are treated differently by different browsers and different versions of the browsers. Some users may have a particular plug-in installed, while others have a different one, use the default system sound player, or have no sound capability at all. The objective of the following restrictions is to remain completely independent of these factors.

Use on EUROPA websites

  • Preference must be given to downloadable sound files of fixed length, not streaming sound. Streaming sound should only be used in case of live events
  • The standard format to be used for downloadable files is MP3. Other formats can be added for user convenience, but the standard format must always be offered
  • The standard format to be used for streaming is RealAudio, the format supported by the streaming server of the Data Centre
  • Specify the file size and format and the duration of the clip
  • Be aware of copyright restrictions on sound files

Video

Video can be used on EUROPA, yet some guidelines have to be taken into consideration.

Video files are treated differently by different browsers and different versions of the browsers. Users may have different plug-ins installed, might use the default system video player provided by their operating system, or their devices might have no video capabilities at all. The objective of the following guidelines is to remain completely independent of these factors.

Use on EUROPA websites

  • The length of video should keep the attention of the user. Therefore preference should be given to videos not longer than 5 minutes.
  • The size of the video file should be small to prevent excessive overload of the server and unacceptably long download time.
  • When streaming video is used, an alternative to download the video should be provided.
  • The standard format to be used for downloadable files is MPEG 4 . Other formats ( Windows Media, Quicktime ) can be added for user convenience, but the standard format must always be offered.
  • Make sure your file is encoded by means of a codec that is recognised by all standard players. The codec H.264/AVC - 720×576 @ 25.0 with AAC is recommended. Please check compatibility with the  the audio/video tablepdf(34 kB) Choose translations of the previous link .
  • DG COMM in cooperation with DG DIGIT created the EUROPA video player  that supports playback of any format the Adobe Flash Player can handle (FLV, MP4, MP3, AAC, JPG, PNG and GIF). It also supports RTMP, HTTP and live streaming, various playlists formats. DG COMM recommends using this player on EUROPA sites.
  • Currently DG COMM (Europa and Audiovisual Services) is working on a “Video Player Corporate Project”. This project aims to have one single video player for the whole EC’s website, with a set of functionalities corresponding to the global user needs. The AV portal is equipped with the first version of this corporate player, compatible with non-flash player devices, smartphones and tablets, thanks  to the HTML5 video tag. For those cases where neither Flash nor HTML5 is available, a link to the video will be provided.
  • Use either 4:3 or 16:9 image size.
  • Specify the file size and format and the duration of the clip.
  • Do not start a video player automatically, give the user the possibility to by-pass.
  • Be aware of copyright restrictions on video files, in particular for the downloadable files.

Flash

The Flash format may be used under special circumstances providing that an alternative and/or a by-pass is provided for users not having the Flash Player or using assistive technology.

The Flash technology has some disadvantages which result in its use not being recommended:

  • Flash content remains inaccessible to most search engines,
  • Flash allows animation to keep playing on web page adverts even when the user has turned off the animation display in the browser,
  • Flash ignores browser settings for font size, etc, so text may too small for the visually impaired or those people with high resolution screens,
  • Due to Flash's graphical nature, it does not degrade gracefully for disabled users,
  • Flash requires significant CPU power to display.
Top

1.7. Plug-ins/Players

Mandatory requirement Pages and documents on EUROPA must not require the use of a "non-standard" plug-in.

 

View all IPG Rules

The Internet is not made of HTML and graphics alone. However, Web browsers by themselves don’t always know what to do with the different file formats. It is for this reason that plug-ins are necessary.

Description

Plug-ins are programs that add a specific feature or service to a larger system. For example, there are a number of plug-ins for browsers, each of which is designed to display a particular kind of file type. These plug-ins increase the number of file formats that may be processed by the browser. The browser can prompt users to save the file to their hard drive or use a plug-in to display or execute the file within the browser window/environment.

Plug-ins extends the capabilities of most browsers by adding functionality. They therefore enrich web pages, but the number of plug-ins available for different browsers in different versions is enormous. Amongst these, there are a few which can be considered "standard", i.e. the target user browser configuration is likely to have them installed, and they may be used, but any function which requires a plug-in which is not in this list must not be implemented on EUROPA.

Standard plug-in supported functions:

  • access and display of PDF format files
  • playing MIDI, MP3 or RealAudio format sound files
  • playing WMV, MPEG4, QuickTime, FLV or RealVideo files
  • playing Flash animation files.

Use on EUROPA websites

  • Pages and documents on EUROPA must not require the use of a "non-standard" plug-in.
  • Files published on EUROPA needing a plug-in should be fully functional with the market version of the specific plug-in and -1 version, i.e. Flash player current market version 11, compatible file format with version 9, 10 and 11.
  • An alternative solution to access content must be provided for those internet users not having the plug-in installed or having accessibility problems: provide a link to download the plugin, a HTML version of a flash file, the transcription of a video.

The EUROPA video player plug-in can be used on EUROPA.

Top

1.7.1. EUROPA video player

EUROPA video player is a flash player based on the JW Player from LongTail Video.

Description

EUROPA video player provides an easy and flexible way to integrate audio and video files on webpages. It supports playback of any format the Adobe Flash Player can handle (FLV, MP4, MP3, AAC, JPG, PNG and GIF). It also supports RTMP, HTTP and live streaming, various playlists formats, a wide range of settings and an extensive javascript API. Videos in format MPG, AVI, WMV, RM are not supported.

Adobe Flash Player is required to play audio and video files (minimum 9.0.115.0 version).

This is a central tool; you do not have to install the files on your website to use it. The required files to run this tool are hosted on both domains http://ec.europa.eu and http://europa.eu/ under the same directory structure.

Currently DG COMM (Europa and Audiovisual Services) is working on a “Video Player Corporate Project”. This project aims to have one single video player for the whole EC’s website, with a set of functionalities corresponding to the global user needs. The AV portal is equipped with the first version of this corporate player, compatible with non-flash player devices, smartphones and tablets, thanks to the HTML5 video tag. For those cases where neither Flash nor HTML5 is available, a link to the video will be provided.

Main features

Set a preview picture

 

 

Add a channel logo

 

 

Load videos from a playlist

 

 

Make video accessible (audio and text description)

 

 

Custom skin: Europa skin

 

 

Provide embed code

 

Example

EU cookie law

This service requires cookies.

Cookies generated by this service are:

  • (video player) “com.jeroenwijering.sol” – a flash cookie that remembers the user's preferences concerning the player such as volume, quality, etc.

As the services generates flash cookies, webmasters are advised to implement Cookie Consent Kit to use the service in their pages.

Guidelines and references

Training

No training available. Please check the documentation/example above for more information.

Top

1.8. Quick Response Code - QR

QR is short for Quick Response, a 2D barcode specially designed to be scanned quickly by mobile devices.

Description

A QR Code is a black and white square which, using rectangles and dots, contains specific information. They look like this: IPG QR Code

If scanned with a mobile device, this QR Code opens the URL address of the IPG http://ec.europa.eu/ipg/.

The QR Code is used to encode any text-based information like telephone numbers, emails, calendar events, contacts (v-cards), URLs, etc.

The storage capacity of the QR Code depends on the density of the dots in the graph – the more data encoded in the code, the smaller the dots. Encoding more information will result in smaller sized dots which can make them harder to scan. In such cases, it is recommended to adapt the size of the image of the QR Code accordingly.

 

Usage in mobile

In order to read and decode the QR Code, the mobile device needs a QR Code reader – special device-specific software, depending on the platform – either pre-installed on the device or installed for free by the device owner.

The QR Code itself is not device-specific but the QR Code reader software is.

QR Code generation

Currently, the EUROPA Team and DIGIT are working in the setting up of a corporate tool to create QR Codes. In the meantime, you can find numerous QR Code generation web sites in this comprehensive list of QR Code generators.

Use on EUROPA

  • The QR Code is best used on print media, outdoor advertising, leaflets campaigns, posters, etc. to allow the user read more information online.
  • QR Codes can be used on websites but they are less useful because the user is already online. You can use QR codes on websites in the following circumstances:
    • On homepages: to link to the mobile version of a site;
    • On contact pages: to provide contact information easily;
    • In the print version of a website: to provide a link on paper.
  • QR Codes should link to mobile-friendly webpages.
  • When using the QR Code on paper or screen, you should put some text close to it explaining what information to expect after scanning the code, e.g. "Scan to go to our mobile site" and, if possible, the hyperlink in plain text.
  • Adapt the size of the QR Code image according to the quantity of encoded information. Always use a size that can be easily recognized and scanned.
  • For easier detection, add minimum four-modules white space (i.e. white quiet zone) around the QR code and always use a black code on a white background.
  • Do not use images within the QR Code for additional branding. This can be difficult to recognise and reduces the storage capacity.
  • Always test the QR Code with different mobile devices before publishing.
Top

1.9. Browsers support

Mandatory requirementEUROPA  web sites must work on as many platforms and devices as possible, but at least on the browsers listed in the table below.

 

View all IPG Rules

Web pages can be accessed by a wide variety of web browsers on different platforms. Every browser interprets the source code used to produce web pages slightly differently. This means that a web page will not be uniformly rendered by all web browsers as it would have been expected. 

To ensure that web sites work on as many platforms and devices as possible you should:

  • use standards: If you develop standards-compliant code (e.g. HTML, CSS, JavaScript, DOM, Mobile Web) you can be confident that your website will work on a wide variety of platforms and devices.
  • test with browsers: If you then test with a few popular browsers you can be confident that the website works for as many users as possible.

Which browsers should be tested

Public sector web sites have a responsibility to be inclusive and not to exclude groups of users, therefore does EUROPA aim to provide the best possible experience to the largest number of users. This means that browser testing should be as inclusive as possible. However, this needs to be balanced against increased testing times and costs because the list of browsers, versions and platforms could be endless.

As a public service, it should not give a competitive advantage to any particular enterprise or service. The fact that some Internet users may do not have the choice of using the latest most popular browsers or that some people use accessibility tools to browse the web should also be taken into consideration.

The IPG team started to collect browser statistics from EUROPA websites going back as far as March 2013. Only browsers with a market share higher than 2% are considered in order to allow for a more simplified and more focussed analysis.

As a general rule, all EUROPA pages should be tested - and any issues resolved - with the browsers and platforms used by 2% or more of EUROPA users. The 2% is a useful threshold to keep the balance between usability and efficiency. 

Browsers and operating systems used by less than 2% of EUROPA users are not required to be tested. This does not imply that those browsers or systems should not be supported. Less popular browsers that support standards are assumed to work. However, assistive technology (screen readers or any other alternative web browsing systems) and open source operating systems (e.g. Linux, FreeBSD) should be tested even if they account for less than 2%. 

There are several websites that provide global statistics for browser usage, however these figures may not be representative for the users of EUROPA. Information on the most popular browsers accessing the EUROPA website is available from the web analytics server. In a nutshell it can be concluded that the market share of all browsers with more than 2% of users accessing EUROPA is around 70% to 75%. This means that a quarter of all users do not use a main stream browser.

According to our statistics the main browsers in use have the following share:

Browser

Market Share

Google Chrome (latest version)

20% - 25%

Mozilla Firefox (latest version)

9% - 14%

Internet Explorer (versions 7, 8, 9, 10)

15% - 28%

   - IE 10

2% - 5%

   - IE 9

4% - 9%

   - IE 8

5% - 11%

   - IE 7

2% - 3%

- Safari (latest version)

2% - 5%

- Mobile Safari (latest version)

2% - 5%

This table allows for the following conclusions:

  1. Because Google Chrome and Mozilla Firefox are updated once a month and due to the automatic update feature of those 2 browsers, is it very likely that users do use the latest versions. This makes it too resourceful to update the browser compatibility list every month. Yet, in order to give some guidance, we do recommend that browsers that don't have a market share of more than 2% for 3 consecutive months don't have to be tested specifically.
  2. Internet Explorer is represented in various versions in this table as it is updated less frequently than Google Chrome or Mozilla Firefox. Each of these versions has a different level of HTML 5 support, which makes testing difficult.
  3. Mobile Safari is the only mobile browser with a market share of more than 2%. The fragmentation of browsers running on Android doesn't allow for one particular browser to stand out.

Browsers compatibility list

The browser compatibility list accommodates the use of HTML4 and HTML5. Although HTML4 is still the recommended version by the IPG team, we are aware that more and more sites are using HTML5. Please be aware that HTML5 is not a final version yet.

Whereas all browsers – including Internet Explorer 7 and 8 – fully support HTML4 since a number of years, support for HTML5 varies very much among browsers. In Internet Explorer 7 and 8, support for HTML5 is very poor, whereas the latest version of Google Chrome, Mozilla Firefox and Apple Safari cover coherently most of the features offered by HTML5.

Testing only for HTML doesn't mean that your page qualifies for browser compatibility. It should be taken into consideration that – as outlined in How and what should be tested – other criteria such as compliance with CSS or with potentially used JavaScript libraries or frameworks are equally important for the successful rendering of your website.

Here the browser compatibility list (last updated: 17/06/2014):

Browser

Firefox

IE

Chrome

Safari

Version

Firefox 24+

IE7+

Chrome 30+

Safari 5.1+

These browsers have to be supported in such a way that all content must be readable and all functionalities must work. Presentation of content must not vary substantially.

As these browsers only count for 75% of all traffic accessing the EUROPA websites, it has to be ensured that that core content and core features have to be available for all users, regardless of the browser they use. This approach, known as progressive enhancement, means features that rely on the latest browser technologies will fall away for browsers that don’t support them without adversely affecting the user experience.

To test how your website works on different browsers and devices, you may use our dedicated Browsers test environment .

People with disabilities, whether temporary or permanent (such as hearing, visual, physical or cognitive impairment) use a wide range of alternative approaches, different from traditional mouse-and-screen-based browsers. To understand and test less known approaches used for browsing read the section on accessibility evaluation tools and assistive technology.

The mobile web is rapidly growing and therefore web sites might also be tested with mobile devices. However, there are such a large number of varying devices that may render this impractical. Code to standards and develop a dedicated web site for those sections that could be of interest for web mobile users, could be a valuable alternative. W3C has published a recommendation for Mobile Web Best Practices which helps designers ensure that all web content is compatible with mobile devices without adaptation.   

To get an idea of how your website works on different mobile devices, you may wish to use mobile devices emulators.

How and what should be tested

You should check that the content, functionalities and display work as foreseen. However, there may be minor differences in the way that the web site is displayed. The aim is that users do not notice anything appears wrong.  

When testing web site functionality, you may test the navigation, forms behaviour, JavaScripts, browser back button, cookies, embed content, keyboard browsing, etc.

Some content can be unavailable to users who navigate the site with some browser options being disabled. Therefore, you should also test your website to make sure that it works with scripting, plug-ins, images and CSS turned off.

Keyboard browsing must be tested and be fully operational. Display with the accessibility features offered in different platforms such as high contrast or text/links colour changes should also be tested.

Cross-browser compatibility tools

Use our Browsers test environment to check compatibility with different browsers and platforms. 

Top

1.10. Scripting languages

Scripting languages are programming languages that are interpreted as opposed to programming languages that are compiled (converted into binary executable before being able to run). Scripts are interpreted instruction by instruction each time they are run. They offer authors a means to extend HTML documents in highly active and interactive ways.

A client-side script executes on the client's machine when the document loads and when various well defined user actions take place, such as link activation when a button is pressed.

Server-side scripting is as the name implies a server-based technology, which can be used to dynamically generate HTML pages.

 

Top

1.10.1. JavaScript

Mandatory requirementUse of JavaScript (JS) is permitted but not encouraged. Read more about its use.

 

View all IPG Rules

JavaScript is a programming language used to write scripts to add certain features to websites - pull-down menus, animated buttons, pop-up windows etc.

Description

While other languages also exist, JavaScript is the most compatible with standard ECMAScript and is supported by most browsers.

JavaScript is easy to learn. Scripts are mostly interpreted through the client's browser, with no need for server-side operations.

JavaScript code can be  called up via a link to an external file with the extension .js  or included in the HTML page. 

JavaScript tags:
Beginning of script : <script type="text/javascript">
End of script : </script>.

JavaScript can also be used on servers.

Limitations of JavaScript:

  • interpretation depends on browser type and version
  • the source code is visible, so there is zero confidentiality
  • the language is simple and so are its applications

Examples where JavaScript adds real value:

  • improving navigation options
  • validating forms
  • monitoring and routing according to the user's configuration

  

Use on EUROPA websites

Use of JavaScript (JS) is permitted but not encouraged. Current version 5+ browsers can read JS but it can be interpreted differently depending on the browser. Most browsers offer the option of switching off JS, so if you use it without offering alternatives, some users will be unable to use some features on your site. This is particularly important for navigation functions.

  • Use JS only if it adds real value to your site, not just for eye-catching effects.
  • The standard template uses files containing JavaScript. The language selection tool is available in both JavaScript and non-JavaScript. If you use JavaScript, please use the templates containing the presentation codes for all the official languages. The templates must be adapted according to the languages available for the page concerned.
  • The content and main functionality of a website must not depend on scripting. If any functionality is implemented using script, provide an alternative.
  • Always check that JavaScripts are device independent and compatible with assistive technology.
  • Put scripts code in a separate file and reference it from the <head> section of each page.
  • Avoid interfering with normal browser behaviour. Scripting should not be used to mimic browser behaviour or to or override normal browser functionality (like "Back").
  • When using event handlers, use only those that are device independent (e.g., do not require the use of the mouse only).
  • Web pages that utilize scripting must be fully navigable using a keyboard.
  • Do not generate content on the fly. Normally, it is not detected by screen readers and other assistive technology, and can confuse users by interrupting linear navigation.
  • Do not open new windows or jump to a new page without warning the user first.
  • Use always unobtrusive scripting: Markup should be completely free of any script code. Avoid including script in <script> sections within the document.
  • Code always using the DOM (Document Object Model). The DOM is a way of representing structured documents (HTML or XML, for example) independently of any programming language, avoiding browser compatibility problems. Some of the advantages of scripting the DOM are:
    • Separation: functionality added in script is separate from the structure/content layer and the presentation layer.
    • Compatibility: using the DOM easily avoids incompatibility problems.
    • Accessibility: if scripting is turned off, the scripted functionality does not work, but the user can still access the underlying information.

JavaScript libraries and tests

JavaScript Library:

Many standard scripts are available on specialised websites. These usually need additional configuration and customisation and you should always check browser compatibility. Pay attention to copyright restrictions.

JavaScript Test:

You may encounter browser incompatibility when implementing JavaScript. What works on one browser won't automatically work on another. When running tests, you should make sure your browser is configured to display all error messages.

Interactivity with Java and JavaScript

For interactivity, Java is mostly used to create little interactive elements in web pages – like navigation tools involving actions triggered by the user, mouse-over image changes, sound effects and the possibility to add interactive features. Applets can be used for all kinds of things: calculators, calendars, clocks, text effects, scrolling banners, games, etc.

Java-compatible browsers are a must to make the most of the possibilities offered by interactivity. Accordingly, on EUROPA you must offer alternative means of providing the same functionalities for browsers that don't work with Java.

Validation tools

Guidelines and references

Training

Please consult Syslog, the training information system, which gives you access to the training catalogue, the training map and allows you to introduce your application for a training course.

Top

1.10.2. AJAX

Mandatory requirementWhen choosing an Ajax toolkit, ensure that it supports WAI-ARIA.

View all IPG Rules

Asynchronous JavaScript Technology and XML (Ajax) is a group of interrelated web development techniques used on the client-side to create interactive web applications.

Description

Ajax isn’t a technology. It’s really several technologies, each flourishing in its own right, coming together in powerful new ways. Ajax incorporates:

  • standards-based presentation using XHTML and CSS;
  • dynamic display and interaction using the Document Object Model;
  • data interchange and manipulation using XML and XSLT;
  • asynchronous data retrieval using XMLHttpRequest;
  • and JavaScript binding everything together.

Ajax provides the ability to retrieve content from the server without changing to a new page, and the use of script to dynamically modify the HTML on the fly. With Ajax, web applications can retrieve data from the server asynchronously in the background without interfering with the display and behavior of the existing page. The use of Ajax techniques has led to an increase in interactive or dynamic interfaces on web pages.

Use on EUROPA websites

While this technology makes web pages much more dynamic and interactive, it can cause major problems for users with assistive technology and should be used with care. More importantly, reflect on whether the use of Ajax is really necessary for a given effect.

W3C has produced a language for describing interface elements and their behaviour, WAI-ARIA. When choosing an Ajax toolkit, ensure that it supports WAI-ARIA.

  • Keep the user's expectations in mind: It means not changing how things operate without letting the user know. In most Web pages, buttons are used to submit forms, so having some other action, such as the clicking of a hyperlink, to submit a form can be confusing to users. One area in which you'll have a hard time meeting expectations is with bookmarking and the Back/Forward button operations; in many cases, these will no longer work, and you'll need new ways to support bookmarking within your application.
  • Provide feedback to actions: Provide feedback that an AJAX action has taken place. With this feedback, users know that some action has happenedeven if it doesn't work as expected.
  • Maintain the user's focus when adding content: As you add feedback to your AJAX application, avoid disturbing the user's focus. This usability guideline is especially important when using popup messages; they should never be used except in areas where immediate action is required.
  • Keep the ability to undo actions: Many AJAX applications try to outthink their users by automatically saving data as needed or submitting a form without clicking a button. When this is done well, it can be effective, but you must keep the user's expectations in mind when applying these techniques.
  • Only use AJAX where it has the greatest effect: AJAX is a powerful tool, but it should be only a part of your Web development arsenal. Always make sure not to overuse AJAX. It should be used in areas where its extra capabilities provide enough benefits to overcome its drawbacks
  • Have a plan for those users without XML Http Request: have a plan for users whose browsers can't perform AJAX operations. Users who use browsers that don't support AJAX should always at least get messages that some actions won't work for them. As you add AJAX, make sure to understand your audience.

 

Guidelines and references

Top

1.11. Character encoding - UNICODE

Mandatory requirement

The correct encoding character on EUROPA websites is UTF-8.

 

View all IPG Rules

Unicode is a standardised encoding system that provides a unique number for every character, no matter what the platform, no matter what the program, no matter what the language, without any risk of corruption. Before Unicode, no single encoding could contain enough character to cover all languages used by European Union. It is no more case: Unicode is a superset of all other character set standards. 

Description

The Unicode Standard has been adopted by such industry leaders as Apple, HP, IBM, JustSystem, Microsoft, Oracle, SAP, Sun, Sybase, Unisys and many other products.

Unicode is the official way to implement ISO/IEC 10646 (Universal Multiple-octet Code character Set or UCS)

The Unicode Consortium (non-profit organization founded to develop, extend and promote use of the Unicode Standard) cooperates with the W3C and ISO.

Members of the Consortium include major computer corporations, software producers, database vendors, research institutions, international agencies, various user groups, and interested individuals

Unicode encoding forms

The Unicode encoding forms specify how each character is to be expressed as a sequence of one or more code units (the three code units are 8-bit, 16-bit and 32-bit). The Unicode standard provides three distinct encoding forms named :

UTF8: it is a variable-width encoding form, using 1 to 4 8-bit code units. It is typically the preferred encoding form for HTML and particularly for the Internet. UTF-8 is reasonably compact in term of the number of bytes used (except for Asian implementations where all characters required at least a sequence of three 8-bit code units). All the US7ASCII characters are represented in UTF-8 by a single 8-bit code unit.

UTF-16: the almost characters are represented by a single 16-bit code unit, except supplementary characters (not used in the European Union environment) which are represented as pairs of 16-bit code units (known as “surrogate pairs”). It is the encoding form used by Java.

UTF-16 may be a preferred encoding form for applications that need to balance efficient access to characters with economic use of storage. It is the historical descendant of earliest form of Unicode.

UTF-16 is the Unicode form used by Microsoft programs (as MS Word, Visual Basic, MS Access, …) and operating systems.

UTF-32: each character is represented by a single 32-bit code unit. It is a fixed-width character encoding form.

UTF-16 is a preferred encoding form for processing characters on most Unix platforms.

Byte Order Mark (BOM)

The BOM is a signature, placed at the beginning of a data stream (a file is considered as a data stream) defining the used encoding form.

The values of the BOM on PC are :

X’FF FE 00 00’     UTF-32

X’FF FE’               UTF-16

X’EF BB BF ‘       UTF-8

The BOM is sometimes used by  ColdFusion application server (see below).

Unicode and the Oracle Data Bases

From 9i Oracle, it is possible to define two Unicode encoding forms in the same database :

- Through the Database Character Set (defined at Database creation time). The possible values are UTF8 or AL32UTF8 (corresponding respectively to Unicode encoding forms UTF-8 version 3.0 or Unicode encoding forms UTF-8 version 3.1).

- Through the National Character Set (defined at the Database creation time). The possible values are UTF8 or AL16UTF16 (corresponding respectively to Unicode encoding forms UTF-8 version 3.0 or Unicode encoding forms UTF-16 version 3.1). The national character set is used only for SQL data NCHAR, NVARCHAR2 and NCLOB data types.

How to define a HTML page as Unicode ?

The following META tag has to be added in the HEAD section of the HTML page :

<meta http-equiv="content-type" content="text/html;charset=utf-8" />

The browser uses this tag to define the encoding of the page.

This tag indicates to the Web Editor Tools (as DreamWeaver or FrontPage) in which encoding the page will be saved.

How to define a ColdFusion page as Unicode ?

When a request for a ColdFusion page occurs, ColdFusion opens the page, processes the content, and returns the results back to the browser of the requestor. In order to process the ColdFusion page, ColdFusion has to interpret the page content. One piece of information used by ColdFusion is the Byte Order Mark (BOM) in a ColdFusion page (see above).

If your page does not contain a BOM, you can use the cfprocessingdirective tag to set the character encoding of the page. If you insert the “cfprocessing directive” tag on a page that has a BOM, the information specified by the “cfprocessing directive” tag must be the same as for the BOM; otherwise, ColdFusion issues an error.

If the page contains no BOM neither “cfprocessing directive” tag, ColdFusion consideres the page as iso-8859-1 (even is the META tag is utf-8 or
iso-8859-7).

Before ColdFusion can return a response to the client, it must determine the encoding to use for the data in the response. ColdFusion pages (.cfm pages) default to using the Unicode UTF-8 format for the response, even if you include the HTML meta tag in the page:

<meta … content="text/html; charset="iso-8859-1">

However, within a ColdFusion page you can use the cfcontent tag to override the default character encoding of the response. Use the type attribute of the cfcontent tag to specify the MIME type of the page output, including the character set, as follows:

<cfcontent type="text/html, charset=utf-8">

The encoding form of the response is sent to the browser through the HTTP header. In this case, the browser does not take in account the META tag.

Recommendations for using Unicode in ColdFusion pages:

1.      Include the BOM when saving page in DreawWeaver

2.      Use the “cfcontent” tag:
<cfcontent type="text/html; charset=utf-8">

3.      Use the “cfprocessing” tag:
<cfprocessingdirective  pageencoding = "utf-8">

4.      Use the META tag
<cfcontent type="text/html, charset=utf-8">
even if it is not used

Example: the next figure shows how UTF-8 data are transferred (and converted)  from an Oracle Database to the Browser through a ColdFusion Server

  

the next figure shows how UTF-8 data are transferred (and converted)  from an Oracle Database to the Browser through a ColdFusion Server

Use on EUROPA websites

All multilingual pages are concerned.

Guidelines and references

Unicode, Inc (official site of the Unicode Consortium)

Top