Filière Internet et standards

Ajax

- Les objectifs d'Ajax.
- Ajax et l'accessibilité.
- Force du mix technologique Ajax/REST/Web 2.0.
- Principes de fonctionnement.
- Présentation Ajax (Gmail, GMaps, google Suggest...).
- Choisir entre Ajax et Flash, Applet, Html. Application.

Rappel XML

- La structure XML.
- XML bien formé et validé.
- Utilisation des namespaces.
- Les moyens de validation XML : DTD et XSD.

Travaux pratiques

Création d'une structure XML bien formée et validée.

Rappels JavaScript

- La programmation Objet.
- Le type de variables.
- Les tableaux.
- Le parseur XML.
- Ecmascript et l'émergence du langage ActionScript. Avantage d'E4X.

Travaux pratiques

Validation de fichiers XML. Création et manipulation de classes et d'objets.

JavaScript Object Notation (JSON)

- Avantages et inconvénients dans les échanges.
- Objets, Arrays, syntaxe et parseur JSON.
- JSON, avantages et inconvénients.

Travaux pratiques

Mise en oeuvre.

Programmation du DOM

- Importance du langage XHTML.
- Les composantes du Dynamique HTML.
- Le rôle du DOM dans la programmation XML.
- Gestion dynamique de CSS.
- Accès, modification, ajout des éléments et des attributs (AddChild, getAttributs...).

Travaux pratiques

Modification dynamique du DOM d'une page HTML. Modifier dynamiquement le style d'éléments du DOM.

Traitements XML en JavaScript

- Présentation XSLT.
- Le langage Xpath.
- Le format RSS.

Travaux pratiques

Traitement XSLT pour modifier des structures XML. Utilisation de flux RSS.

XMLHttpRequest

- La classe XMLHttpRequest.
- Créer un objet XMLHttpRequest.
- Utiliser un objet XMLHttpRequest.
- Gestion des réponses (handle).
- Comment dialoguer en mode synchrone et asynchrone avec le serveur et JavaScript.

Travaux pratiques

Création d'un formulaire de login. Remplissage dynamique d'un menu déroulant. Traitement de données RSS à partir de flux Ajax.

CONTENU

Introduction au contexte de XSL et XPath

- Besoins par rapport à l'utilisation de la technologie XML.
- Technologie CSS pour la présentation, limites de CSS.
- Introduction à XSL, XSL-T, XSL-FO et SVG.
- Introduction à Xpath.
- Principes et mécanismes de base.
- Parseur XML et processeur XSL.
- Support par les navigateurs Web.
- Mise en oeuvre des technologies XSL.

Le langage d'interrogation : XPath

- Expressions XPath. Interrogation d'un document XML.
- Axes et vecteurs de recherche.
- Revue de quelques expressions simples.
- Sélection d'éléments/noeuds, de jeux de noeuds et d'attributs dans un arbre XML.
- Opérateur de localisation.
- Equation d'égalité et de relation, opérateurs booléens.
- Opérations numériques.
- Fonctions standard et extensions des processeurs.
Exercices
Ecriture et tests d'expressions XPath.

Le langage de transformation : XSL-T

- Structure d'une feuille de style XSL-T, traitement du processeur XSL-T.
- Namespaces et éléments XSL racine.
- Formats de sortie : vocabulaires XML, HTML, X-HTML ou texte.
- Utilisation d'expressions XPath.
- Noeuds et jeux de noeuds.
- Modèle de traitement : les templates.
- La syntaxe du langage XSL-T, les types de données, les structures de contrôle, etc.
- Notions de variables et de paramètres, contexte et portée.
- Génération d'éléments et d'attributs.
- Invocation déclarative ou impérative des traitements.
- Récupération d'éléments et de contenu.
- Analyse du comportement d'un processeur XSL-T.
- Optimisation des recherches de noeuds.
- Traitement des erreurs.
Exercices
Composition de différents types de feuilles de style XSL-T.

XSL-T, fonctionnalités avancées

- Ecriture de fonctions : appels simples et récursifs.
- Structure modulaire des feuilles de style.
- Les design patterns : Fill-in-the-blank, Navigational, Rule-based, Computational.
- Import et inclusion de feuilles de style avec passage d'arguments.
- Création de librairies réutilisables.
- Modularité et héritage.
- Transformations basées sur des sources multiples.
- Générations de groupes de documents.
- Spécificités de certains processeurs.
- Travail sur des espaces de noms hétérogènes.
Exercices
Création de feuilles de style modulaires et imbriquées, avec de multiples structures en entrée et génération de plusieurs documents en sortie.

La boîte à outils du développeur

- Lancement de transformations en ligne de commande.
- Utilisation de divers processeurs (XT, Saxon, Xerces, MSXml...).
- Ecriture de script de transformation avec Ant.
- Gestion de site Web.
Exercices
Mise en place d'un environnement de gestion de site Web basé sur XML.
XSL-T 2.0, X-PATH 2.0
- Nouveautés : fonctions, expressions, opérations, tris, fallbacks et traitements des erreurs, etc.
- Nouveaux types de données supportés.
- Différences de traitement.
- Création d'arbre résultat, d'une séquence de noeuds ou de valeurs.
- Requêtes XPath avec expressions régulières.
- Les fonctions et opérateurs sur les numériques.
- Les fonctions sur les chaînes de caractères.
- Les fonctions et opérations sur les dates.

SVG pour les interfaces graphiques et la création d'images

- SVG, Scalable Vector Graphics.
- Les enjeux des langages vectoriels.
- Avantages de SVG sur Flash.
- Rôle et importance de SVG.
- Utilisation côté serveur et côté client.
- Environnements d'édition et d'utilisation : navigateurs...
- Les systèmes de coordonnées et le dimensionnement.
- Les formes de base.
- Structure de document.
- Les styles.
- Transformation du système de coordonnées.
- Les courbes et les chemins.
- Motifs et dégradés.
- Texte et internationalisation.
- Masquage et découpe.
- Filtrage.
- Animation, interaction et scripts.
Exercices
Création de feuilles de style permettant de générer des documents SVG.
Génération de pages HTML contenant des graphes.

XSL-FO pour la génération de documents papier

- XSL-FO, Formatting Objects.
- Besoins et objectifs de XSL-FO. Introduction au langage.
- Solutions et implémentations disponibles sur le marché.
- Exemple pratique à partir du projet FOP de Apache.org.
- Eléments du langage XSL-FO : initialisation, définition de modèles de pages, la zone de contenu, dimensions des régions, séquences des pages, génération du résultat.
- Inclusion de graphiques au format SVG.
Exercices
Création de feuilles de style combinant XSL-T et XSL-FO pour générer des sorties en PDF. Génération d'un rapport contenant des images au format SVG.

CONTENU

Industrie XML

- Rappel sur les langages structurés : SGML, HTML, XML et XHTML.
- Problématique du contexte actuel. Pourquoi XML est incontournable.
- XML et le schéma directeur du S.I. La structure XML (élément et modélisation).
- Avantages et inconvénients de XML.
- Rôle prédominant des offres bureautiques.
- Les techniques XML (WML, SVG, VoiceXml) et les technologies XML orientées Métier (FixML, CML...).
- Panorama des éditeurs XML.

Les parseurs XML

- Offre du marché.
- Rôle des parseurs. Leurs performances, avantages et inconvénients.
- Les parseurs API : type push (SAX), type pull (XMLPull ou StAX), Les représentations arborescentes (DOM, JDOM, ...), type «Data Binding» (Castor ou JAXB).
- Les Data Island et l'intégration dans les pages Web.
- Les accélérateurs XAN (XML Aware Network).
- Les parseurs Java (JAXP), .Net, Flash (XML Parser).
- Ajax et la lecture de données dans les pages HTML.

Exercices

Mise en oeuvre de différents parseurs.

Validation de documents

Conception

- Structure et composants d'un document XML : déclarations, instructions processeurs, commentaires, entités, références caractères, éléments, attributs.
- Les méta-données (XMP, ITCP, EXIF).
- Document bien formé et document valide.

Modèles de validation

- Les DTDs, XML-schema (XSD), Relax-NG, Schematron. Syntaxe et mise en oeuvre.
- Les DTD de l'édition (MARC, TEI).

Schéma XML

- Schémas XSD : structure, typage des données, outils de composition. Modélisation.
- Les formats XSD, XDR, SOX, DCD.
- Exemple d'une mise en oeuvre DocBook.

Travaux pratiques

Création de document XML, validation de document. Création de documents DTD et XSD. Association de Namespaces aux DTD et XSD.

Namespaces

- Les Namespaces. Rôle, intégration, partage, création.
- Exemple : appel à partir d'une page XHTML.

Travaux pratiques

Association de Namespaces aux DTD et XSD.

Transformation XSLT

- Enjeux du langage XSLT sur la transformation XML.
- Intégration dans le système d'information.
- Le langage de transformation XSL-T 1.0 et 2.0 : construction d'arbres, restructuration, génération multiformats : XHTML, SVG, PDF.

Publication de documents

- Visualisation brute sous les navigateurs.
- Mise en forme avec les feuilles de style CSS.
- Rôle du XHTML sur l'accessibilité. Conseils techniques.
- XPATH 1.0 et 2.0 pour la navigation dans les données XML.
- Les feuilles de style XSL-T : templates, structures. Mode de programmation déclaratif, impératif, hybride.
- Le langage XSL-FO pour le formatage d'objet. Conversion en format type papier PDF, RTF...

Exercices

Création de feuille de style en XSL-T et XSL-FO.

Message et échanges XML

- Le DOM du W3C et l'interface de programmation normalisée : Data Island, Ajax, JavaScript.
- Les serveurs d'applications : architecture en .NET et J2EE.
- Portail d'entreprise.
- Flash : FLEX, échanges XML et services Web.
- Transfert et sérialisation de messages : Rest, XML-RPC, SOAP, WSDL, UDDI.
- Définition des Services Web.

Exercices

Adaptation d'une application JavaScript exploitant des documents XML.
Interrogation d'un Service Web.

XML et les bases de données

Positionnement du XML par rapport aux bases de données
- Le stockage de documents XML et bases semi-structurées.
- Data Island.
- SGBDR aux bases de données natives XML - Xindice, Tamino.
- Langages d'interrogation XML : XPath, XQuery, XLink, XPointer, extensions du SQL.
- XML et les bases Oracle et SQL Server 2005. Interfaçage de SQL Server avec IIS pour un accès direct par URL.

Exercices

Interrogation d'une base de données avec une requête XML et présentation des résultats transformés en XSL.

Sécurité des échanges XML

- Les différents protocoles de sécurisation : HTTPS, XML Signature (Xml Dsig): signature numérique, XML encryption, XML access control, WS-security.

Exercices

Exemples des différentes technologies présentées.

Interfaces graphiques

Les nouveaux langages de conception graphiques
- Le langage XAML de Microsoft.
- Le langage XUL de l'Open Source.
- SMIL : les animations Web.
- XForms, InfoPath : la technologie de formulaires électroniques.
- Blogs et RSS (Really Simple Syndication), ATOM un format de syndication de contenu Web.
- SVG : standard vectoriel.

Exercices

Mise en oeuvre des technologies XUL, XForms, RSS.

XML au coeur de la bureautique

- RDF, un cadre de définition de méta-données.
- Offre Office de Microsoft. Open XML.
- XML Open Document Format (ODF).
- Open XML vs OpenDocument.
- XML compression.

Exercices

Manipulation XML à partir des deux offres bureautiques.

CONTENU

Positionnement du site Web

- Intranet, Internet, Extranet : spécificités sur la stratégie du site.
- Impacts de la stratégie de l'entreprise sur la conception du site. Analyse de la stratégie selon le type de site (portails, sites B2B, P2P, B2C, annuaires...) et l'objectif (leaders, suiveurs, challengeurs, spécialistes).
- Techniques SWOT : forces et faiblesses de l'environnement dans la conception du site.
- Quel design en fonction des terminaux mobiles : quels utilisateurs, quels usages ?
- Quel positionnement pour optimiser ses chances d'atteindre sa cible ?

Règles de conception et accessibilité

- Comportement des utilisateurs Internet, Intranet
- Définition de l'usability et de son impact sur la cinématique du site.
- Erreurs traditionnelles des sites.
- Modèle d'apprentissage intuitif.
- Techniques de conception pour générer un enthousiasme à partir du design.
- Règles de base de l'ossature du site : liens, graphiques, outils de navigation, page d'accueil, gestion des impressions, contenu...
- Les standards et contraintes des terminaux Web.
- Techniques éditoriales pour le Web.
- Comment créer une navigation fluide : barre de navigation, menu, visuels, nom de page, boutons,...
- Tests de conception (usability).
- Règles pour un site multi-canaux.

Accessibilité

- Un point sur la législation en France et en Europe.
- Les référentiels d'accessibilité. Le W3C, le WCAG, BrailleNet...
- Les matériels et outils logiciels disponibles.
- L'impact d'une charte d'accessibilité sur le développement HTML et CSS.
- L'ADAE et l'accessibilité, impact sur la cinématique du site.

Décliner sa marque au site Web

- Comment lier le design Web à la stratégie ? Comment relier ou mixer la communication de l'entreprise avec celle du site ?
- Comment valoriser une marque à partir du design. Le design intelligent.
- Brief créatif, stratégie créative.
- Concept board.
- Charte graphique : couleurs, images, etc.

Conception et gestion de contenu

- Méthodologie de création de rubriques : la méthode de créativité Mind Mapping.
- Organisation du contenu, publication.
- Outils de gestion de contenu.
- Gérer un contenu multisource.
- Droits d'auteur, référencement.

Techniques d'animation

- Concevoir un site Web 2.0 : animation, ergonomie, etc.
- Jeux-concours, quiz, blogs, couponing, forums, mail, liste de diffusion, newsletter, marketing viral, publicité.
- Comment faire un bon référencement ?
- Affiliation, fidélisation, sponsoring, relations presse.
- Services Web : enjeux sur l'interactivité du site.
- Solutions de Back office.

Analyse de trafic

- Suivi et analyse de trafic.
- Analyse de référencement et positionnement.
- Techniques pour accroître le trafic du site .

Suivi de projet Web

- Audit juridique du site : les risques.
- Pilotage de projets : gestion des acteurs externes et internes à l'entreprise, les phases critiques, les écueils à éviter.
- Planification des tâches.
- Conduite de projet : maquettage, développement, transition, déploiement, campagne de lancement.
- Organisation humaine du projet.

Travaux pratiques

Des cas concrets serviront d'exercices pratiques pendant toute la formation et de nombreux exemples seront commentés.

OBJECTIFS

Ce cours, très pratique, vous présentera l'ensemble des technologies Internet. Il vous expliquera le fonctionnement des services Web et des différents langages associés, HTML, XML..., les technologies du Web 2.0, ainsi que les techniques graphiques, l'interrogation des bases de données et l'administration. Les exercices vous permettront d'appréhender d'une
manière très concrète toutes les phases de la réalisation d'un site Web.

CONTENU

Les technologies du site Web

- Les serveurs Web (Apache, IIS). Les protocoles TCP/IP, PPP, HTTP. FTP. Les URL. Les
services réseaux complémentaires (DNS, DHCP, ...).
- Gestion du nom de domaine. Choix de l'hébergeur. Architecture technique. Organisation.
Les services Web.

Administration et sécurisation du serveur web

- Protocoles HTTPS, SSL.
- Les certificats, le firewall, le proxy.
- Paiement sécurisé.
- Mise en oeuvre de l'ensemble des opérations d'administration effectuées par le webmaster
(nom de domaine, transfert ftp, sécurité, création de messages d'erreur personnalisés,
gestion des fichiers journaux, suivi et analyse des statistiques).

Création de pages Web : HTML, XML, XHTML

- Présentation du langage HTML, XHTML.
- Structure, liens, hypertexte.
- Les images, les cadres, les feuilles de style. Les formats vectoriels.
- Tableaux et calques.
- Techniques pour réussir son référencement sur les moteurs de recherche. Les méta-tags.
- Définition et intégration de composants Flash, Java, ActiveX, Plug-ins.

Travaux pratiques

Réalisation de pages complexes HTML avec Dreamweaver. Création de feuilles de style,
préparation de la page au référencement.

Les formulaires

- Contraintes et avantages. Syntaxe, structure, champs de saisie, boutons, cases à cocher,
listes, zones de texte, sélections de fichier.

Travaux pratiques

Réalisation d'un formulaire avec envoi des données vers la messagerie et une base de
données.

Conception graphique et multimédia

- Mise en oeuvre d'outils graphiques (Fireworks) pour concevoir une interface évoluée.
- Développement d'animations avec Flash.
- Les ressources graphiques GIF, JPEG, PNG, Shockwave.

Travaux pratiques

Conception d'un modèle de page HTML avec Fireworks, composant Flash. Intégration de
plug-ins multimédias pour visualiser des composants Flash, Shockwave.

Accessibilité et RGAA

- Norme. Impact sur le développement. Mettre en conformité le site avec l'accessibilité.
Outils de test. Labels Accessiweb.

Travaux pratiques

Mise en oeuvre d'outils de test et audit.

Ergonomie d'une application Web

- Charte graphique. Règles d'usability. Ecueils graphiques à éviter pour faire un site efficace
(navigation, mise en page, contraintes techniques). Modèles de pages.

Travaux pratiques

Définir le cahier des charges de la charte graphique.

Pages dynamiques : les CGI

- Différence entre serveur web et serveur d'application.
- Mode de fonctionnement, sécurité. Les méthodes GET et POST. Les variables serveur.
- Les serveurs web du marché.
- Les langages de scripts serveur et leurs plateformes de développement : ASP, ASPX, JSP,
PHP.
- Appel de services Web.
- Intégration de requêtes SQL dans la page pour insérer, supprimer, modifier des données
de la base.

Travaux pratiques

Développer des pages dynamiques, interrogation d'une base de données, de services web.

Les technologies Web 2.0

- Présentation des technologies Web 2.0 (blogs, rss, wiki...).
- Les technologies émergentes d'interfaces graphiques : XUL, XAML, Flex.
- Présentation et mise en oeuvre de solutions Rich internet Application (RIA) et Rich Desktop
Application (RDA).
- Présentation des solutions émergentes Adobe AIR, Microsoft SilverLight, framework
Google.

Travaux pratiques

Démonstration et mise en oeuvre de ces multiples technologies.

Le langage JavaScript et DHTML

- Syntaxe du langage. Contrôles de saisie d'un formulaire. Effets de rollover sur les images.
Gestion des cookies. Mise en oeuvre du DHTML. Effets spéciaux en DHTML.
- DOM et Ajax.
- Présentation Ecmascript et émergence du langage Actionscript.
- Présentation des offres du marché à base de Javascript (Google API, Widgets...).
- Récupérer, savoir débuguer vos programmes.

Travaux pratiques

Utilisation du JavaScript pour ajouter des effets DHTML et des contrôles sur formulaire,
gestion d'événements en JavaScript Intégration de scripts existants. Gestion de cookies.

Les principes du Web 2.0

Bilan des architectures Web traditionnelles
Web 2.0 : les objectifs et les technologies
Le principe des RIA (Rich Internet Application)
AJAX et javascript

Le langage javascript

Présentation de javascript
Le modèle de programmation
Les principaux frameworks et outils Javascript (prototype, dojo, script.aculo.us,...)

La programmation Ajax

Les principes et techniques d?AJAX
La mise en oeuvre avec l?objet XMLHttpRequest
La mise en oeuvre avec les frameworks javascript
L?intégration d?AJAX avec JavaEE ; problématique de l?intégration dans le MVC (Struts, JSF,...)

La mise en oeuvre d?un framework AJAX (option DWR ou Ajax4Jsf)

Présentation et prise en main du framework
Mise en oeuvre dans environnement Java EE
Les fonctions avancées du framework

Introduction

- Qu'est-ce que PHP ?
- Interactivité avec les internautes.
- Les différences entre PHP 4 et PHP 5.
- Présentation de l'exemple utilisé durant la formation : le site de vente en ligne.

Premières applications Web en PHP

- Automatisation d'une page Web

- Les principes du client-serveur.
- Premiers éléments du langage.
- Intégration de PHP dans une page HTML.
- Variables et fonctions.
- Librairies.
- Fonctions de base, variables serveur et variable PHP.
- Variables serveur et variable PHP.
- Contrôles de flux et boucles.

- Les formulaires simples

- Passage et transmission de variables.
- Lecture/écriture de fichier.
- Vérification de login/mot de passe.
- Redirection.

- Les variables complexes : tableaux

- Constructeur array.
- Fonctions associées aux tableaux.
- Fonctions d'extraction.
- Fonctions de navigation dans un tableau.

Gestion des sessions utilisateurs

- Variables persistantes : Cookies et Session

- Avantages et inconvénients des cookies et sessions.
- Limitations et précautions.
- Les variables de session.
- Fonctions liées aux variables de session.
- Les Cookies.
- Sérialisation des variables complexes.
- Utilisation.

- Utilisation d'une base de données MySQL

- Présentation de MySQL.
- Concepts fondamentaux : bases, tables, champs, enregistrements.
- Fonctions PHP MySQL.
- Introduction au langage SQL (sélection, modification, suppression).
- Traitement des résultats des requêtes.

Une application Web professionnelle

- Notions d'architecture multicouches

- Introduction aux principes MVC.

- Les formulaires complexes

- Moteur de recherche : formulaire en relation avec une base de données.
- Fonctions avancées de sélection : recherches et tris.

- Le graphisme en PHP

- Présentation de la librairie GD.
- Création d'image, réutilisation.
- Gestion des polices et de l'écriture en mode image.
- Superposition de texte pour protection de droits.
- Intégration au site.
- Réalisation de graphiques statistiques.

- Intégration des modules réalisés

Introduction

- Optimisation des développements par utilisation de briques logicielles.
- Développement et réutilisabilité : stratégies et enjeux.

Programmation Orientée Objet (POO)

- Classes, propriétés, méthodes

- Visibilité et protection.

- Constructeur, destructeur

- Appel implicite vs explicite.

- Héritage et agrégation

- Règles de propagation.
- Polymorphisme.

- PEAR

- Structure, conventions et paramètres.
- Principales librairies.

- PHPLib

- Structure, conventions et paramètres.
- Principales librairies.

Gestion des erreurs

- Création d'un gestionnaire.
- Bufferisation et fichiers log.
_ Atelier : Réalisation d'une classe de gestion avancée d'erreurs. Implémentation d'un affichage bufférisé et d'un fichier log dans la classe.

Authentification LDAP

- Introduction.
- OpenLdap.
- Configuration et démarrage (fichiers conf et ldif).
- Lecture. Connexion anonyme. Interrogation et récupération de données.
- Ecriture. Connexion administrateur. Formatage des données et insertion.
_ Atelier : Implémentation d'une classe d'authentification.

Bases de données : manipulations avancées

- Aspects avancés

- Bases multitables et jointure : avantages et limites de la théorie.
- Intégrité transactionnelle : assurer la cohérence des données dans un environnement internet.
- Procédures stockées : réutilisation de l'existant lors de migrations technologiques.
- Champs multidimensionnels.
- XML.
- Sécurité : formatage des entrées et requêtes paramétrées.
- ODBC : outil passe-partout win32.
- Pear ADO : abstraction des accès.

XML/DOM/XSLT

- XML. Format et validation.
- DOM et xPath. Création, analyse.
- Transformateurs XSL. Utilisation de XSLT.
- Clients riches : SWF et Ajax. Principe et enjeux.
_ Atelier : Création d'états multipaginés en Ajax.

Web Services et SOAP

- Introduction.
- Annuaires de services et accessibilité.
- WSDL et SOAP.
- Créer un Web Service et son fichier de description.
- Utiliser un Web Service.
_ Atelier : Utilisation d'un Web Service.

PDF pour AcrobatReader

- Opérations de base. Texte et mise en page.
- Opérations avancées. Images et tracés vectoriels.
_ Atelier : Implémentation d'une classe PDF pour la génération automatisée d'une facture.

E-mail

- MIME : pièces jointes et format HTML.
- Les formats Mixed, Multipart, Alternative/Related.
- Les encodages particuliers.
- Paramétrage d'un serveur de test.
_ Atelier : Réalisation d'une fonction classe xMail pour l'envoi de mails au format mime. Utilisation de la classe créée pour l'envoi d'une facture PDF en pièce jointe.

Introduction

- Démonstrations XHTML/CSS v. HTML traditionnel
- Etudes de cas dans un navigateur classique
- Etude de cas dans différents médias

Contexte d'accessibilité

- Exemples d'accessibilité et d'inaccessibilité avec
des aides techniques
- Les problèmes de la mise en page par tableaux
- Portabilité
- Accessibilité
- Evolutivité

Bonnes pratiques

- La séparation structure, présentation et comportement
- Réutilisabilité du contenu
- Accessibilité
- Pérennité

Les principaux standards et leur intérêt

- Le W3C, historique, fonctionnement :
- D'où sont issus les standards ?
- HTML, XHTML, CSS, ECMA, DOM

Accessibilité : enjeux et perspectives

- Définition de l'accessibilité d'un site web
- Loi sur l'égalité des droits
- Respecter l'échéance pour les sites du secteur public
- RGAA, WAI du W3C et le label AccessiWeb
- Elargir le champ de la clientèle du secteur privé sur le net
- Séparation du contenu et de sa présentation, enjeux technique et économique
- Vers un meilleur positionnement dans les moteurs de recherche
- Standards du web, support à l'accessibilité et tremplin vers le web du futur

Concevoir des documents Html accessibles

Produire du contenu bien formé avec XHTML :

- Intérêts d'un contenu structuré pour l'accessibilité d'un site
- Rappel des balises et attributs HTML4 recommandées et obsolètes
- HTML, XML et XHTML
- Pourquoi et comment migrer de Html vers Xhtml
- Les versions de Xhtml : XHTML1.0, XHTML modularisé, XHTML1.1, XHTML2,
- Utilisation des balises pour bien structurer la page et le contenu (titre, sous-titre, paragraphe...), pour fournir des explications sur ce contenu (langue, image, liens, tableaux, formulaires...)
- Validation des pages du site (validateur W3C en ligne)

Travaux pratiques : exercices sur l'utilisation des balises. Création de pages XHTML et validation des pages

Ergonomie et utilisabilité au service de l'accessibilité

L'ergonomie d'un site, préalable à l'accessibilité.

- Répondre aux besoins des utilisateurs (cas d'utilisation)
- Facilité d'utilisation du site, s'approprier la navigation sans difficulté
- Structurer le contenu (des titres de présentation de chaque chapitre, clair et précis),
- Présentation homogène pour chaque page du site
- Respecter les conventions habituelles de présentation des pages (Logo en haut à gauche-lien vers la page d'accueil, bannière de titre en haut, ...)
- Aide à la navigation (revenir en haut de la page, accès direct au contenu textuel, raccourcis clavier, liens vers la page d'accueil, le plan du site ...)
- Respecter les règles d'ergonomie du référentiel de l'ADAE

Travaux pratiques : conception de la mise en page du site

Maîtriser les feuilles de style CSS pour rendre un site accessible

Mettre en forme un contenu XHTML avec CSS :

- Intérêts de séparer le contenu de sa mise en forme pour l'accessibilité d'un site
- Les types de sélecteurs
- Les règles de cascade et d'héritage
- Présentation du contenu sans utiliser les tableaux
- Notion de boîte et positionnement (normal, relatif, absolu, fixe, flottant)
- Zones d'une boîte (marge, espacement, contenu, bordure)
- Présentation des listes
- Présentation du texte, des titres (police de caractères, taille, couleur)
- Présentation des tableaux de données et formulaires
- Utilisation des calques
- Les unités de mesures
- Feuille de style par media (écran, impression, ...)
- Mise en forme par défaut des balises HTML4
- Compatibilité des navigateurs (MSIE, Opera, Netscape, Mozilla Firefox)
- Validation des feuilles de style (validateur W3C en ligne)

Travaux pratiques : créer la feuille de style correspondant à la mise en page du site, écrire la feuille de style pour l'impression, valider les pages avec le validateur W3C. Exercices sur les boîtes et leur positionnement.

Appliquer les règles d'accessibilité du WAI et du RGAA

Recommandations en matière de structuration du contenu, de mise en forme, d'utilisabilité et d'ergonomie de site web :

- Recommandations de la WAI (Web Accessibility Initiative) Web 1.0
- Les 14 directives, les points de contrôle et leur niveau de priorité I, II et III
- Le label WAI et les niveaux de conformités A, AA, AAA
- Le référentiel du RGAA sur l'accessibilité des services Internet de l'administration française
- Le label de qualité AccessiWeb, les 92 critères et les 3 niveaux (Bronze, Argent et Or)
- Utiliser la toolbar Accessibilité (taille des caractères, scripts désactivés, taille de fenêtre, contrastes, absence d'image, désactiver les css...)
- Vérifier l'accessibilité d'un site (vérification automatique avec la plateforme d'analyse en ligne de Watchfire, et vérification manuelle)
- Directives pour l'accessibilité aux contenus Web 2.0

Travaux pratiques : modifier le contenu du site pour le rendre accessible niveau A, AA, AAA, valider les pages avec l'outil Watchfire en ligne, tester les pages avec un synthétiseur vocal (démonstration avec JAWS) et avec un navigateur texte (Lynx Viewer en ligne)