Entête

[ beaufils ]

Accueil

Contenu

Ces pages sont des modèles de page pour la rénovation du site du LIFL. Elles présentent la structure sémantique (HTML) à respecter par toutes les pages du site ainsi que l'esprit de la charte graphique (CSS) en cours d'étude.

Du point de vue de la sémantique on a essayer d'y regrouper tous les cas d'informations rencontrés sur l'intégralité des pages du site web du labo. Différentes natures de pages sont disponibles dans des modèles remplis avec des contenus d'exemple :

Du point de vue de l'aspect graphique et de l'ergonomie pour l'instant une seule proposition est disponible. Elle positionne le menu de navigation de manière verticale sur la gauche de la page. Elle est définie dans la feuille lifl-screen-treeview.css. Une autre proposition avec le menu de navigation présentée de manière verticale est en cours de développement. Elle sera définie dans la feuille lifl-screen-dropdown.css.

Le modèle des pages est lisible avec des navigateurs textes et respecte à peu près les recommandations WCAG (à part sans doute pour les contrastes de couleurs). Le rendu se dégrade normalement plutôt bien sur les navigateurs peu respectueux des standards et sur les navigateurs autres que visuels.

Le tout est récupérable dans l'archive modele-lifl.zip.

Il est important de respecter la structure HTML présentée ici et de n'y ajouter aucun élément (ormis dans la division identifiée contenu et à condition qu'il y ait une sémantique précise et non liée à l'affichage).

Structure

HTML

La structure du code HTML (XHTML 1.0 Strict) de la page est fixe et utilisable pour toutes les pages du site. Elle ne comprend que des éléments de structuration sémantique. Toute la mise en forme est gérée par les feuilles de style en CSS. La structure de la page se compose des éléments suivants :

une liste non-ordonnée, avec l'id jump, qui aide les navigateurs non graphiques
une division, avec l'id page, représentant la page elle-même. On y retrouve les éléments suivants :
1. une division, avec l'id entete, qui contient :
  1. un lien vers la page d'accueil du labo (avec l'id logo-lifl). Ce lien contient le logo du labo.
  2. une liste non-ordonnée (avec l'id langues) des traductions de la page courante
  3. un paragraphe (avec l'id username) pour le nom de connexion si l'utilisateur est connecté
  4. une liste ordonnée (avec l'id ariane) qui correspond au fil d'ariane de localisation jusqu'à la page courante
  5. un formulaire (avec l'id chercher) qui correspond au moteur de recherche dans le site du labo
2. une division avec l'id navigation qui correspond au menu unique de navigation. Elle contient
  1. une liste non-ordonnée avec l'id pratiques qui contient les liens vers les pages pratiques (annuaire, contact et plans d'accès et plan du site).
  2. une liste non-ordonnée avec l'id menu qui doit contenir la totalité de la hiérarchie des pages du site web du labo accessible à l'utilisateur (ici on considère que l'utilisateur est authentifié et a donc accès à tout).
3. une section, avec l'id contenu, qui doit contient les informations fournies par la page.
4. une section, avec l'id ours, qui doit contenir l'OURS (informations de publications) de la page web. Cette section contient :
  1. une liste non-ordonnée (avec l'id partenaires) qui permet de lister les partenaires institutionnels du labo.
  2. des paragraphes pour le copyright et les liens légaux

Pour respecter les recommandations WCAG de nommage et de navigation entre sections, chacun de ces éléments est précédé par un titre de section (élément h1) qui contient un lien vers la section suivante. Dans les affichages visuels ces élements ne sont pas affichés (la feuille de style les désactive).

CSS

Les feuilles de styles (lifl-screen.css, lifl-print.css et lifl-perso.css) définissent le rendu CSS (CSS 2.1) des éléments HTML (la sémantique d'affichage différente de la sémantique d'information) mais aussi des classes à appliquer sur les éléments. Elle est commentée relativement correctement. Il y a quelques classes importantes du fait de la sémantique de leur affichage :

logged-in rend l'élément username visible (qui ne l'est pas par défaut). Elle n'a de sens qu'appliquée sur l'élément body.
noeud spécifie qu'un item du menu de navigation n'est pas une feuille de l'arbre du menu mais uniquement un noeud intermédiaire.
visible spécifie qu'un item du menu de navigation est actuellement visible (par défaut seul le premier niveau du menu de navigation n'est visible).
courante spécifie qu'un item du menu de navigation correspond à la page courante. Ça permet de repérer la position de cette page dans la hiérarchie.

Il est important de ne pas utiliser les styles CSS de manière inaccessible (au sens WAI/WCAG). Par exemple il faut éviter de mettre du contenu informationnel dans une image qui ne serait fixée que par la CSS (via l'attribut background par exemple). On utilise donc certaines images dans le code HTML puisqu'on y associe toujours un attribut alt.

Les feuilles fournies à titre d'exemple ne sont pas complètement valides syntaxiquement (elles respectent le futur standard (CSS 3) mais pas la recommandation courante (CSS 2.1) à cause d'attributs peu importants concernant le rendu du coin des bordures de boites (border-radius) et de l'ombre portée des boites (box-shadow). Cependant la page se dégrade bien sur les rares navigateurs qui ne prennent pas en compte ces attributs.

Javascript

En plus de tout ça il y a un peu de Javascript (lifl-base.js) qui permet notamment de manipuler dynamiquement, sur les navigateurs équipés correctement, le menu en mode vertical (comme le proposait Pierre). Cette manipulation se fait simplement en ajoutant, retirant ou inversant, des classes sur des éléments via des fonctions définies dans ce fichier. Modifié le rendu d'affichage ne demande donc pas de modifications du code Javascript mais uniquement des styles CSS.

Le fichier lifl-tests.js définit les fonctions de tests utilisés sur cette page modèle.

Pour simplifier le travail des rédacteurs d'applications et autres services dynamiques du labo devant s'intégrer dans le nouveau site, la librairie jQuery est chargée par chaque page.

Quelques tests

Quelques modifications dynamiques (via le fichier lifl-tests.js) de la page courante sont possibles pour voir et tester différentes situations ou configurations d'affichage :

Avec une page de largeur
- standard (1000px)
- maximale
- spécifique :
  px
En considérant
- un visiteur anonyme
- un visiteur connecté

Trucs restant à faire

Quelques trucs n'ont pas été encore traités :

Produire des exemples de contenu typiques (actualités sur la page d'accueil, etc.) pour s'assurer que le maximum de cas de nature de page sont représentées
Vérifier le rendu sur Firefox (<4.x), Safari, Opera, Internet Explorer (<= 8)
Créer un style spécifique pour les liste de page d'accueil (actualités, etc.)
Finir la documentation du travail réalisé
Récupérer des versions vectorielles (SVG) de tous les logos
Préparer un cahier des charges précis pour le travail de création graphique (CSS ou uniquement images à voir) en cohérence avec la charte du labo.

Vérifications du rendu visuel

Navigateur	Version	OS	Résultat
Navigateur	Version	OS	treeview	dropdown
Mozilla Firefox	5.0	Linux	OK	à vérifier
	5.0	MacOS X	OK	à vérifier
	5.0	Windows	OK	à vérifier
	4.0.1	Linux	OK	à vérifier
	4.0.1	MacOS X	OK	à vérifier
	4.0.1	Windows	OK	à vérifier
	3.6.15	Linux	OK	à vérifier
	3.6.15	MacOS X	à vérifier	à vérifier
	3.6.15	Windows	à vérifier	à vérifier
	3.0.6	Linux	OK	à vérifier
Google Chromium/Chrome	13.0.752.0	Linux	OK	à vérifier
		MacOS X	à vérifier	à vérifier
		Windows	à vérifier	à vérifier
Google Android Browser		Android 2.2	on ne peut pas déplier en cliquant sur les signes du menu, mais le dépliage complet (via l'icone Plan du site) fonctionne	à vérifier
		Android 2.3	on ne peut pas déplier en cliquant sur les signes du menu, mais le dépliage complet (via l'icone Plan du site) fonctionne	à vérifier
		Android 3.0	à vérifier	à vérifier
Apple Safari	5.0.4	Mac OS X	OK	à vérifier
		Windows	à vérifier	à vérifier
		iOS 3	on ne peut pas déplier une item du menu	à vérifier
		iOS 4	on ne peut pas déplier une item du menu	à vérifier
Microsoft Internet Explorer	9	Windows	OK	à vérifier
	8	Windows	à vérifier	à vérifier
	7	Windows	le placement du menu et du contenu côte à côte ne fonctionne pas (`CSS` : `display:table-cell` pas pris en charge) les bordure arrondies et les ombres portées ne sont pas rendues (`CSS` : `border-radius` et `box-shadow` pas pris en charge) on ne peut pas déplier en cliquant sur les signes du menu, mais le dépliage complet (via l'icone Plan du site) fonctionne	à vérifier
	6	Windows	IE 6 ne sait pas reconnaitre les pages XHTML (donc XML) corrects. Il faudrait enlever la première ligne (déclaration XML) ce qui est hors de question.	à vérifier
Opera	11.11	Linux	on ne peut pas déplier en cliquant sur les signes du menu, mais on peut déplier en cliquant à droite du texte d'un noeud et le dépliage complet (via l'icone Plan du site) fonctionne les signes du premier niveau sont mal rendus (décalés à droite en collant la bordure de la boîte ou simplement absente)	à vérifier
	11	MacOS X	à vérifier	à vérifier
	11	Windows	à vérifier	à vérifier
	10.63	Linux	OK	à vérifier
	10	MacOS X	à vérifier	à vérifier
	10	Windows	à vérifier	à vérifier

Version du document :

83a32e873d96018d8dab5b94c2e00f3dc2b175fe refs/heads/master
 M sources/details.html
 M sources/equipes.html
 M sources/modele.html
 D sources/styles/lifl-screen-treeview.css
?? sources/equipes.html~
?? sources/styles/lifl-screen-treeview.css.bak
?? sources/styles/lifl-screen-treeview.less

Ours

Page respectant XHTML et CSS. Pour tout commentaire : webmaster