Aide - Rubrique Webmestres

Choix techniques

Principes :

Les choix techniques du site Internet CODES 78 - CYES sont destinés à permettre à celui-ci d'être à la fois moderne et utilisable par le plus grand nombre.

Pour cela, nous prenons en compte les préconisations d'OpenWeb, du W3C et de Tristan Nitot en matière d'accessibilité (utilisation du site par des personnes handicapées) et de navigateurs (prise en compte des différents navigateurs modernes), avec un code des pages conforme aux recommandations du W3C (voir la page Spécifications et normes Web).

Etat actuel :

Validation du code :

• Le site utilise des feuilles de style [5 pour l'affichage à l'écran (selon le choix de la présentation), une pour l'impression^[1]] et est conforme à la norme "CSS 2", testé à l'aide du validateur CSS du W3C
• Le code des pages est à peu près conforme à la norme W3C "XHTML 1.0 Transitional" validé pour un certain nombre de pages, et en cours de correction pour les autres pages.

Accessibilité :

• Un mini-menu de navigation^[2] permet aux personnes ayant un accès séquentiel à la page (mal-voyants ou handicapés moteurs) la possibilité de sauter directement à la page d'Accessibilité, d'aller au formulaire de recherche, ou d'accéder au contenu sans avoir à subir tous les liens de navigation.
• Le site offre le choix entre plusieurs feuilles de styles alternatives^[3] permettant de le consulter dans différentes présentations :
  • la présentation par défaut, avec un texte sombre sur un arrière-plan blanc ;
  • la présentation Gros caractères (la taille des caractères est augmentée) ;
  • la présentation Fond noir avec des caractères clairs ;
  • la présentation Fond noir Gros caractères ;
  • la présentation Minimale qui spécifie peu de choses, pour laisser la place aux réglages par défaut de chaque utilisateur.
  • Ces présentations sont accessibles depuis le menu Affichage des navigateurs supportant les styles alternatifs : menu "View/Use Style" dans Netscape 7, Mozilla ou Opera 7… et depuis le formulaire "Présentation" en haut de chaque page (le style choisi est alors mémorisé par un cookie).
• Le site utilise des Raccourcis clavier^[4] permettant de naviguer sans souris.
• La partie Aide propose des pages de conseils pour utiliser au mieux le site, notamment Accessibilité, Raccourcis clavier et Agrandir le texte pour les personnes ayant une mauvaise vue.
• Le code de toutes les pages a été modifier pour mieux s'adapter aux logiciels de lecture et améliorer l'accès des personnes handicapées. Ainsi, presque tous les liens Javascript ouvrant des fenêtres pop-up ont été transformés^[5], les images du site disposent d'une description par texte^[6],
  • sous forme d'info-bulles ou étiquettes (utilisant les balises "alt" ou "title"),
  • ou avec une page de description ("longdesc") pour les images plus complexes,
  • ou dans certains cas sous forme d'un document "pdf".

Navigateurs :

• Le site est optimisé pour un navigateur moderne, mais utilise aussi des Hacks CSS notamment pour s'adapter à MSIE qui ne respecte pas les normes Web.
• Le contenu de chaque partie est présenté en haut de chaque page par menu déroulant soit à la fois portable et accessible aux personnes handicapées^[7].
• Un script permettant de masquer la colonne gauche des pages^[8] (utile pour ceux qui ont un petit écran). La commande de ce script n'est pas visible pour les navigateurs non compatibles ou si JavaScript n'est pas activé. Pour certaines pages un peu larges et pour les petits écrans (< 1000 pixels), ce menu est masqué après le chargement de la page.

Principaux scripts adaptés ou créés pour le site :

• Choix du type de présentation des pages (feuilles de styles alternatives^[3]),
• Formulaire en PHP pour la page Contact^[9],
• Script PHP^[10] pour les Quizz,
• JavaScript pour "Imprimer la page", "Ajouter aux favoris" et "Le site du CYES en page de démarrage"^[11],
• La classe fil_LE est utilisée pour présenter des fichiers de syndication^[12],
• Modifications d'images au survol de la souris^[13] (texte agrandi du logo du CYES, ),
• Le livre d'or du site est une adaptation d'@lex Guestbook 3.3,
• Gestion des pages expliquée dans l'article Gestion d’une rubrique... en attendant SPIP,
• Menu dépliant pour l'affichage des rubriques dans la marge gauche des pages^[14],
• Affichage adapté pour ceux qui ont désactivé JavaScript^[15],
• Réalisation d'un Editeur de fichiers de syndication^[16],
• Script pour l'affichage d'un calque à positionnement fixe utilisé pour MSIE pour Mac^[17],
• Ouverture d'un lien dans une nouvelle page^[18].

Perspectives :

Les prochaines étapes sont :

• la validation W3C XHTML 1.0 Transitional des pages pour se préparer aux évolutions du Web,
• poursuite de l'adaptation du site pour permettre un accès aux handicapés et à tout type de navigateur,
• le remplacement du Javascript par un script exécutable sur le serveur ou l'utilisation des feuilles de style chaque fois que ce sera possible (remplacement par un script PHP^[13] pour les Quizz),
• remplacement de la mise en page par tableaux par une mise en page par les feuilles de style, ce qui permet une séparation complète du contenu et de la présentation,
• accessible AA,
• gestion du site sous Spip ; pour préparer ce passage plusieurs études sont en cours, certaines ont permis la réalisation d'articles^[19].

Notes et références :

1. Voir la page Impression des pages
2. Inspiré du site de Tristan Nitot
3. Inspiré du site OpenWeb et de la page Switcher en Php, Explication de cette technique
4. Malheureusement cela ne fonctionne pas avec tous les navigateurs, voir Accesskey, l'essai non transformé de l'accessibilité
5. Inspiré de Créer des pop-up intelligentes
6. Voir la page Des images accessibles
7. Inspiré de Faire un menu dynamique ouvert et accessible
8. Inspiré de Webcrealisation, le même script est utilisé pour simplifier la présentation de pages longues (Page d'accueil, Plan simplifié, Plan détaillé, Erreur 404, Erreur 500, Fichier absent)
9. Adapté d'un article de Jean-Paul Mesters dans .net n° 79, Explication de ce script
10. Inspiré de PHP-Quizz de Bruno Berteau, Explication de ce script, Variantes 1 et 2 (les quizz en JavaScript sont cependant disponibles à partir de Pages hors connexion)
11. Voir l'article : Javascript : n'oubliez pas Mac OS !
12. Ces pages sont présentées dans la rubrique Actualité thématique, voir également la page Syndication de contenu et l'Article d'explication
13. Reprise d'une technique présentée dans Zoom d'images avec les CSS et Sprites CSS
14. Voir l'article : Menu dépliant pour les rubriques
15. Voir les articles : Quand JavaScript est désactivé...1/2 et 2/2
16. Voir la page Syndication de contenu et les articles Editer plusieurs fichiers de syndication 1/2 et 2/2
17. Voir l'article : Positionnement fixe... même avec Internet Explorer !
18. Inspiré de : Ouvrir des liens externes dans une nouvelle fenêtre
19. Voir les articles : Exécuter un Javascript dans une page Spip et Astuce pour les images fréquemment utilisées