un peu de sécurité -...
Post on 16-Sep-2018
214 Views
Preview:
TRANSCRIPT
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é
top related