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

Cohérence

● Graphique● De l'organisation des pages (position des

éléments)● Du vocabulaire

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 ;

Arborescence

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

CSSZENGARDEN.COM

É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

Éléments classiques

● Page d'accueil● Informations de contact● Aide● Fonction de recherche

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

KISS: Keep It Simple, Stupid

● google:

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!)

SPIP: http://www.mairie-chorges.fr

SPIP

http://www.yahoo.com/

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

Rendre le texte accessible

● Lisibilité● Accès par un système de lecture automatique

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 d'accessibilitéou de l'art de rédiger les

attributs alt

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é