Un peu de sécurité
● le XSS ou cross site scripting
– un pirate peut déposer du javascript sur le site:
– <script>alert('bonjour')</script>– ce script peut
● envoyer l'utilisateur sur un autre site● attaquer la machine du client: diffuser les
données accessibles à javascript, planter la machine
● effectuer des actions sur le site avec l'identité de la victime
● le reste, c'est surtout côté serveur :-)
Ergonomie et Accessibilité des pages Web
● Ergonomie: adaptation de l'application web aux utilisateurs
● Accessibilité: ergonomie de l'application dans des conditions spécifiques (handicap, navigateurs spéciaux)
Bibliographie
● Amélie Boucher, Ergonomie Web● Jenifer Tidwell, Designing interfaces● http://w3c.org/docs/accessibilite.html● http://www.crim.ca/files/documents/services/rd/
GuideErgonomique.PDF● http://pompage.net
Ergonomie
● choix de couleurs, de présentation, de graphisme, de mode de navigation...
mais aussi● organisation du site, logique de la présentation
des informations
Questions de départ
● à quoi sert le site ?● qui l'utilisera ?● pour faire quoi ?● dans quel contexte ?
Règles (d'après A. Boucher)
● Site bien organisé● Pages bien organisées● Site cohérent● Respect des
conventions● Information
pertinente
– feedback, position● Vocabulaire adapté (y
compris icônes)
● Aide et guidage● bonne gestion des
erreurs● rapidité● L'internaute est le
chef● Accessibilité● Satisfaction de
l'internaute
Connaître son public
● Savoir à qui et pourquoi est destiné votre site!● se fabriquer des « personas », utilisateurs
virtuels, qui ont des objectifs par rapport au site● Avoir des utilisateurs sous la main● Faute de vrais utilisateurs, se contenter de
cobayes... c'est nettement mieux que rien● observer les utilisateurs en test
Respecter les conventions
● Ne pas casser ce qui existe● Conserver les bases de la navigation web:
boutons avant, arrière, bookmarks● codes de couleur et présentation des liens● limiter les soulignés aux liens hypertextes... ● mais ne pas les supprimer sur les dits liens
Conception d'un site
● Définir le contenu et l'utilité du site ;● Regarder les sites similaires ;
– idée d'organisation ;– conventions ;
● Architecturer l'information ;● Maquette, découpage en zones ;
Tri de cartes
Méthode pour définir l'organisation d'un site
But: choisir l'organisation qui semble la plus logique aux utilisateurs
Pour chaque cobaye● cartes avec contenus, services, etc...● les participants peuvent corriger les titres● ensuite chacun regroupe les cartes● et donne un titre à chaque groupe
Les résultats sont analysés pour proposer une organisation.
Navigation
● L'organisation de la navigation doit correspondre au schéma des utilisateurs, pas forcément à celui de la base de données ou de la compagnie
● Les éléments importants doivent être accessibles rapidement
● L'utilisateur ne doit pas être perdu
Navigation
● largeur● profondeur (chemin d'accès)● où suis-je, d'où viens-je, où vais-je● éviter de laisser actif un lien vers la page
courante (hors formulaire)● navigation orientée action● navigation orientée information
Règle des trois clics
● Pseudo-règle qui dit que:
toute information doit être accessible en trois clics
● Le nombre de clics n'est pas franchement le principal:
– Il faut que l'utilisateur sache où il va et ne soit pas perdu
– il faut éviter les manipulations inutiles pour l'utilisateur
Organisation de la page
● mettre en évidence ce qui est important
● grouper les éléments de navigation par famille
● zonage● La page de garde peut être
un peu à part
Données sur les éléments de navigation important
● les éléments de navigation (icônes, menus, liens) doivent être gros
● ils doivent être proches (pas trop, pour éviter les erreurs)
Taille des pages
On peut parfaitement avoir des pages très longues !
● Une page « de contenu » peut être longue (attention aux temps de chargement)
● Une page de navigation doit comporter les éléments importants dans sa partie supérieure!
Contrainte des petits écrans (PDA, mobiles)
● multi-colonne peu raisonnable
– prévoir une CSS pour les « handheld »● navigation différente (en particulier portables)● contenu dépendant du lecteur:
– Il suffit de créer une classe ad-hoc:● <div class='portable'>....</div>● dans la CSS pour media=screen :
.portable {display: none;} (caché)● pour media=handheld
.portable {display: block;} (visible)
Charte graphique
● Décrit les éléments graphiques fondamentaux des pages: logos, choix des couleurs, fontes...
● Doit être respectée dans tout le site● Avec parfois des variations contrôlées quand le
site est très grand ● Les CSS aident beaucoup
Éléments graphiques
● Animations : à éviter quand elles ne sont pas nécessaires!
● clignotement : à proscrire absolument● Icônes (et autres): faciles à reconnaître, simples
Typographie
– se documenter sur la typographie en général● Ne pas utiliser trop de familles (2,3 ou 4 au
maximum)● limiter l'utilisation de MAJUSCULES et d'italiques à
la mise en valeur
– pas de contrôle total et réel sur le rendu
Rédaction
● éviter le langage technique (du type « cliquez sur le contrôle select ».
● Soyez concis. Coupez tout texte inutile
Rédaction des liens
● éviter « cliquer ici ».● ne pas écrire
– Vous pouvez télécharger mon logiciel en cliquant ici.
mais
– Vous pouvez télécharger mon logiciel
Page d'accueil
– peut présenter les nouveautés– menu– fonction du site– aiguillage vers des sous-sites– éviter si possible les pages
« couvertures » (splashscreen), qui n'apportent rien et énervent le visiteur
– quadrature du cercle: page attractive et rapide à charger
Fournir une fonction de recherche
● On peut assez facilement utiliser google pour chercher les parties publique d'un site
● La plupart des Content Management System intègrent de telles fonctions
Utiliser un CMS
● Content Management System
– proposent des fonctionnalités de base– permettent l'ajout d'information par les
utilisateurs– sont extensibles
● SPIP● Drupal● Typo3● ... (il y en a plein!)
Accessibilité
● Techniques permettant l'utilisation d'un site (ou d'un logiciel en général) à des personnes handicapées
– handicaps de perception– handicap moteurs– handicap cognitifs
● http://www.w3.org/TR/WCAG10-HTML-TECHS/
Bénéfices secondaires
● Utile pour la lecture dans des contextes différents (PDA)
● Moteurs de recherche
– les informations ajoutées pour aider à la lecture des pages aident aussi les systèmes d'indexation.
Règles minimales
● HTML correct et bien utilisé● Le contenu a un sens quand il est lu● Le contenu visuel est bien remplacé● Titres et des liens ont un sens hors du contexte
(facilite la navigation)
Éviter
● Un contraste peu élevé dans les graphismes et dans la CSS.
● Des combinaisons de couleur qui ne sont pas facilement distinguables pour les daltoniens.
● Une police trop petite ou qui ne peut pas être redimensionnée.
● Le chevauchement d'éléments qui deviennent illisibles avec une police plus grande.
Couleurs
● perception très variable● passer la page en noir et blanc (par exemple
avec GIMP ou un logiciel de dessin). Elle doit rester lisible
● autre test: impression en noir et blanc● changer la taille des fontes dans le navigateur.
Le site doit rester utilisable
Lecture automatique
● Pour rendre un texte correctement, un système de lecture doit connaître la langue dans laquelle il est écrit
● importance de l'attribut lang :
<p> Je conseille la lecture de <em lang="en">Designing Interfaces</em><p>
Images et alt
● alt: modes « non graphiques » de rendu des pages: texte seul, audio. Aide pour l'indexation
● Mettre à "" pour les images « décoratives »
– garantie que l'image en question sera simplement ignorée
● alt explique le « pourquoi » de l'image
– bouton : label du bouton...
L'attribut longdesc
● longdesc : renvoie vers une page web complète. Le lien n'est visible que si l'image n'est pas affichée. Ne fonctionne pas partout
● Le plus léger: décrire l'image dans le texte « normal »
● Autre solution: mettre un lien vers une description de l'image.
Règle pour « alt »
● Texte assez court ● Penser que le texte sera lu
– il ne doit pas dupliquer l'information du texte principal
– il ne doit pas apporter des informations qui ne sont ni dans l'image, ni dans le texte principal
● le contenu de alt est contextuel !● alt="" est parfaitement légitime
Exercices
● Quelle est le meilleur « alt » ?
1) le dieu Horus de Bouhen
2) ""
3)Représentation en couleur d'un dieu à tête de faucon. Il porte une couronne rouge et or, son corps est ocre, et
4)Représentation vivement colorée d'un dieu à tête de faucon.
Les couleurs du temple de Beit-el-Wali sont très bien conservée
Exercice1)Le dieu Horus de Bouhen2)""3) Horus de Bouhen est représenté comme un homme à tête de faucon portant la double-couronne
Horus de Bouhen est une des formes d'Horus spécifiques à la Nubie.
Exercice
1)Le dieu Horus de Bouhen2)""3)Le dieu Horus de Bouhen, représenté comme un homme à tête de faucon portant la double-couronne
Horus de BouhenCette forme nubienne d'Horus est représentée au temple de Beit-el-Wali comme un homme à tête de faucon, portant la double couronne.
Documenter les tables
● But: expliquer ce que sont les tables, et quels titres sont reliés à quelles cases
● Attribut « summary »: permet de décrire la table pour en donner une vision d'ensemble
<table summary="cette table décrit les horaires des cours des étudiants de DUT, en fonction de la demi-journée et du jour de la semaine">
<caption>Horaires</caption>
....
Documenter les tables
● Expliquer la fonction des colonnes● Plusieurs solutions:
– attribut « scope »– attribut headers– combinaison de headers et de l'attribut axis
Attribut scope
● valeurs possibles: row, col
● exemple:
<table summary="...."><tr>
<th scope="col">Horaire</th>
<th scope="col">Lundi</th>....
</tr><tr>
<td scope="row">9h-12h</td>
<td scope="row">14h-17h</td></tr><tr> <td>Programmation</td>
<td>Économie</td></tr></table>
14h-17h
9h-12h
Lundi MardiHoraire
Attribut headers
● Spécifie quels sont les en-têtes relatifs à une case
● référence l'id des headers concernés
id='h4'
id='h3'
headers='h3 h4''
Attributs headers<table summary="...."><tr>
<th id="ho">Horaire</th><th id="lundi">Lundi</th>....
</tr><tr>
<td id='matin' headers='ho'>9h-12h</td><td id='apresmidi' headers='ho'>14h-17h</td>
</tr><tr>
<td headers='lundi matin'>Programmation</td><td headers='lundi apresmidi'>Économie</td>
</tr></table>
ACCESSKEY
● raccourci lié à un élément de page: lien, label de formulaire
● accès divers selon les navigateurs
– CTRL (Safari), ALT (firefox linux), etc.● éventuellement en concurrence avec les
raccourcis du navigateur● on conseille de se restreindre aux chiffres
ACCESSKEY
● Liste du gouvernement anglais:● S: contenu● 0: liste des touches● 1: page d'accueil● 2: actualités● 3: carte du site● 4: début d'un formulaire● 5: annexes (index, etc.)● 6: aide à la navigation● 7: contact (email)● 8: informations légales● 9: contact par formulaire (livre d'or, etc.)
trucs et astuces
● lien « passer au contenu »● utilisation de display: none● media=handheld,print,reader● préférer les dimensions en em et pas en pixels
Exercice
● On veut concevoir le site web (intra et extranet) d'un lycée
– proposer une architecture pour le site– proposer une maquette des pages
● données et actions intéressantes:
– liste des élèves, notes, liste des professeurs, coordonnées, récit du voyage linguistique, circulaires du proviseur, appréciations, horaire des cours, contacter un enseignant, travaux des élèves, nouvelles de l'établissement, matériel emprunté