log2420 analyse et concep on d'interfaces utilisateur interfaces...

Notions ErgonomieClient Serveur

LOG2420 ― Analyse et concep on d'interfaces

utilisateurutilisateur

Interfaces Web

Michel C. Desmarais, François Lemieux

é fGénie informatiqueÉcole Polytechnique de Montréal

Automne 2010Automne, 2010

LOG2420 ‐ Analyse et conception d'interfaces utilisateur ‐ Interfaces Web 1/85

Interfaces Web


1. Notions

2. Client

3. Serveur

4. Ergonomie

2/85LOG2420 ‐ Analyse et conception d'interfaces utilisateur ‐ Interfaces Web

Web ou WIMPNotions ErgonomieClient Serveur

WIMP : Windows, Icon, Menu, PointerLes entreprises se posent la question si elles doivent aller enLes entreprises se posent la question si elles doivent aller en Web ou en WIMP

La tendance est au Web car :facile à

À déployer, à maintenir, à mettre à jour, à contrôler

Portable sur toutes les plateformes, même mobilesFacilité à développer des applications de saisie et d'affichage de données simples

Inconvénients :Inconvénients du mode client‐serveur :

Traitement limité côté client (à moins d'utiliser un applet ou autre moyen)Gamme de composants réduits (à moins d'utiliser Javascript ou autres extensions)Délai d'accès au serveurDélai d accès au serveur


Repères historiquesNotions ErgonomieClient Serveur

Inventé par un Britannique: Tim Berners‐Lee avec le belge Robert CailliauRobert Cailliau

1989‐1990: Conseil européen pour la recherche nucléaire (CERN) à GenèveWord Wide Web: relier l’hypertexte au TCP‐IP

Adresses web, H t t T f P t l (HTTP)Hypertext Transfer Protocol (HTTP) Hypertext Markup Language (HTML).

Il développe: Premier navigateur web et éditeur web nommé WorldWideWeb et développé sur NeXTSTEPPremier serveur HTTP, le CERN httpd.Premier serveur HTTP, le CERN httpd.


Client‐serveurNotions ErgonomieClient Serveur

Panoplie de technologies et de choix d'architecture spécifique dans le cadre global du client serveurspécifique dans le cadre global du client serveur

HTML, CSSJavascript

CGIServlet

Applet, plugiciel (plugin)Flash, SilverlightXSL

PHP, JSP, ASPXSL

LOG2420 ‐ Analyse et conception d'interfaces utilisateur ‐ Interfaces Web

XSL…

…

5/85

Serveur HTTPNotions ErgonomieClient Serveur

Serveur WebApache HTTP Server de la Apache Software Foundation, successeur du NCSA httpd (60%) , Internet Information Services (IIS) de Microsoft, Sun Java System Web Server de ( ) , ySun Microsystems, etc.

Serveur de système de gestion de base de données MySQL, Oracle, SQL Server, MS ACCESS, etc.

Langages de scriptCGI, PHP, JSP,ASP, etc.


Requête HTTPNotions ErgonomieClient Serveur

La requête :GET /index html HTTP/1 1GET /index.html HTTP/1.1Host : www.polymtl.ca

La réponse :/HTTP/1.1 200 OK

Date : Fri, 03 Nov 2006 14 :13 :09 GMTServer : Apache/2.0.55 (Unix) mod ssl/2.0.55 OpenSSL/...Server : Apache/2.0.55 (Unix) mod ssl/2.0.55 OpenSSL/...X‐Powered‐By : PHP/4.4.2Connection : closeC t t T t t/ht l h t i 8859 1Content‐Type : text/html ; charset=iso‐8859‐1<xml version="1.0" encoding="iso‐8859‐1" ?>< !DOCTYPE html PUBLIC "‐//W3C//DTD XHTML ...<html xmlns="http ://www.w3.org/1999/xhtml">


Caractéristiques d'HTTPNotions ErgonomieClient Serveur

Protocole client‐serveur qui ne conserve pas d‘état (session permanente)(session permanente)

Mécanismes pour simuler session À travers l'URL

https://precisionconference.com/~ihm/cgi‐bin/FormWizard?/templates/users.tmpl&userRef=SFG7FBATTP4OFMCH6Y3CKPDFNWJM7AChttps://precisionconference.com/ ihm/cgi bin/FormWizard?/templates/users.tmpl&userRef SFG7FBATTP4OFMCH6Y3CKPDFNWJM7AC

Par une variable cachée (même mécanisme que celui des formulaires)

<form action="controller.do" method="POST" ><input type="HIDDEN" name="var1" value="value 1" ><input type="SUBMIT" value="Push Me"> </form>

Par un témoin (cookie)C ût él é d‘é h li tCoût élevé d‘échanges client‐serveur

La majorité des plates‐formes du côté serveur sont relativement lourdesLecture d'une page HTML exige parfois beaucoup de traitement par le client et par le serveur (ex. servlet)


SGML, HTML, XML, etc.Notions ErgonomieClient Serveur

XML : Extensible Markup Languagedérivé de SGML, tout comme HTML, mais permet de définir des langages tout comme SGML et non pas des structures fixestout comme SGML et non pas des structures fixes comme HTML


XMLNotions ErgonomieClient Serveur

Possède une DTD (Document Type Description) pour préciser sa structurepréciser sa structure

Spécifie e la structure d'un langage XMLGénéralement stocké dans un document externe au fichier XMLPermet la vérification de conformité

Universellement supporté ; deux types d'analyseur syntaxique sont disponiblessyntaxique sont disponibles :

SAX : lecture d'un document XML en mode « train » (stream)avec programmation par événements ; efficace pour de gros documents

DOM : lecture complète du document dans une structure d'arbre (plus flexible que le modèle SAX mais doit charger tout le(plus flexible que le modèle SAX mais doit charger tout le document en mémoire au préalable)


Interfaces Web


1. Notions

2. Client

3. Serveur

4. Ergonomie


HTMLNotions ErgonomieClient Serveur

Note historique :h // / / / l h lhttp://www.w3.org/History/1989/proposal.htmlUn derivé de SGML

Standard Generalized Markup Language (années 60 !)p g g ( )Langage pour la spécification de langagesPrincipe syntaxique de base : <token> ... </token>

HTMLHTMLHyperText Markup LanguageNe suit pas une syntaxe rigoureuse,exemple : <P> Texte <P> Second paragrapheexemple : <P> Texte... <P> Second paragraphe…(c'est d'ailleurs une des sources d'incompatibilités entre fureteurs)Langage pour la spécification de la structure d'un document avec un accent à la fois sur l'affichage et l'organisation<H1> : structure<b> ou <H1 ALIGN=LEFT> : affichage


Engins de rendu HTMLNotions ErgonomieClient Serveur

Gecko : Mozilla Firefox (Mozilla LGPL) le seulGecko : Mozilla, Firefox (Mozilla, LGPL), le seul qui soit sur toutes les plates‐formes

Trident : Internet Explorer sur Windows (propriétaire)

Tasman : Internet Explorer sur Macintosh ( é ) b lè(propriétaire) ‐ obsolète

Lynx : Rendu textuel du fureteur du même nom (mode console LINUX)nom (mode console LINUX)

Presto : Opera (propriétaire)WebCore (KHTML ) : Safari (Apple LGPL Nokia KDE)WebCore (KHTML ) : Safari (Apple, LGPL, Nokia, KDE)


HTMLNotions ErgonomieClient Serveur

Modèle vue contrôleurScript serveur – HTML‐CSS – HTML‐JavascriptMais le script serveur peut contenir du HTML‐CSS – HTML‐

iJavascript

Extension de fichierht ht l fi hi W bhtm ou html : fichier Webphp, jsp, asp : fichiers Web qui font appel à des scripts serveur


HTML : structure Notions ErgonomieClient Serveur

<!DOCTYPE html PUBLIC "‐//W3C//DTD XHTML 1.0 l// "Transitional//EN"

"http://www.w3.org/tr/xhtml1/DTD/xhtml1‐transitional.dtd">Version HTML et appel de la feuille de style markuplanguage (html, xml, etc.)

Peut être transitoire stricte ou avec encadrementPeut être transitoire, stricte ou avec encadrementLe fichier dtd comprend les entités de caractères

<html>: Balise ouvrante : optionnelle, balise fermante : optionnelle<head></head><body></b d ></body>

</html>LOG2420 ‐ Analyse et conception d'interfaces utilisateur ‐ Interfaces Web 15/85

HTML : HeadNotions ErgonomieClient Serveur

<head>: Balise ouvrante : optionnelle, balise fermante : optionnelle

<title>Le titre de la page ‐ Le titre de l’application</title>Balise ouvrante : obligatoire, balise fermante : obligatoire

À ne pas confondre avec l’attribut « title » <meta name= "Author " content = "François Lemieux">

<meta http‐equiv="Content‐Type" content="text/html; charset=iso‐8859‐1" />Balise ouvrante : obligatoire, balise fermante : interdite

Sert à décrire le contenu du documentExemples d’attributs :Exemples d attributs :

• name : nom de la métadonnée utilisé surtout pour les moteurs de recherche

• http‐equiv : instruction envoyée au serveur dans l’en‐tête qui Peut‐être utilisé pour :utilisé pour :

• Encodage de la page• Recharge automatique de la page• Effacement du cache• Un langage de script ou de style par défaut• Etc.


HTML : bodyNotions ErgonomieClient Serveur

<body> Balise ouvrante : optionnelle, balise fermante : optionnelle

Corps du document qui correspond au contenuCorps du document qui correspond au contenuExemples d’attributs :

• Attributs de style mais l’utilisation de la feuille de style est recommandée• Déclencheurs d’événements intrinsèques

( )• onload, onunload (lors du chargement): applicable à <body> et<frameset>

• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

• Identifiants internes de document ::• id: identifiant unique associé à une balise déterminée

• sélecteur dans une feuille de style ;• ancre cible de liens hypertextes ;ancre cible de liens hypertextes ;• moyen d'appeler un élément particulier à partir d'un script ;• nom d'un élément OBJECT déclaré ;• pour un traitement universel par les agents utilisateurs

l id tifi t t é l i b li• class: identifiant partagé par plusieurs balises• sélecteur dans une feuille de style ;• pour un traitement universel par les agents utilisateurs•LOG2420 ‐ Analyse et conception d'interfaces utilisateur ‐ Interfaces Web 20/85

HTML : regroupements d’élémentsNotions ErgonomieClient Serveur

<div> Balise ouvrante : obligatoire, balise fermante : obligatoire

Permet de structurer un document en regroupant des éléments dans un blocPermet de structurer un document en regroupant des éléments dans un blocExemples d’attributs :

• Attributs de style mais l’utilisation de la feuille de style est recommandée• Déclencheurs d’événements intrinsèques

• onclick, ondblclick, onmousedown, onmouseup, onmouseover, onmousemove, onmouseout, onkeypress, onkeydown, onkeyup

<span> Balise ouvrante : obligatoire, balise fermante : obligatoire pPermet de structurer des éléments en ligne

Exemples:<div id="client‐boyer" class="client">

<p><span class="client‐titre">Informations sur le client :</span><p><span class client titre >Informations sur le client :</span><table>class="client‐data">

<tr><th>Nom : <TD>Boyer</tr><tr><th>Prénom : <TD>Stéphane</tr><tr><th>Téléphone : <TD>(212) 555‐1212</tr>

h C i l TD b@ l l /<tr><th>Courriel: <TD>[email protected]</tr></table>

</div>


HTML : tableauNotions ErgonomieClient Serveur

<table> Balise ouvrante : obligatoire, balise fermante : obligatoire

Permet de structurer un document en regroupant des éléments enPermet de structurer un document en regroupant des éléments en colonnes et en rangéesPermet d’afficher des tableaux

balises: • <caption> Bo:ob,Bf:ob. Légende du tableau insérée après <table> . Peut être au‐

dessus ou en dessous• Regroupement de rangés

• <tbody> B Bf Dans le corps de la table• <tbody> Bo:op,Bf:op. Dans le corps de la table• <thead> Bo:op,Bf:op. Dans le l’en‐tête de la table• <tfoot> Bo:op,Bf:op. Dans le pied de la table

• Regroupement de colonnes (span et width dans Firefox)• <colgroup> Bo:ob,Bf:op. applique des attributs pour plusieurs colonnes• <col> Bo:ob,Bf:interdite. applique des attributs pour une colonne

• <tr> Bo:ob,Bf:op Définit une rangée • <th> Définit une cellule d’en tête dont le contenu sera en gras et• <th> Bo:ob,Bf:op Définit une cellule d’en‐tête dont le contenu sera en gras et

centré• <td> Bo:ob,Bf:op Définit une cellule


HTML : exemple de tableau Notions ErgonomieClient Serveur


HTML : lienNotions ErgonomieClient Serveur

<a> Balise ouvrante : obligatoire, balise fermante : obligatoire

Permet la navigation vers une autre page htmlPermet la navigation vers une autre page htmlPermet la navigation vers une position à l’intérieur de la page courante

Exemples d’attributs: • name: pour indiquer l’emplacement d’une ancrep q p• href: pour indiquer la destination• target: cadre cible

Exemples:Exemples:

<a name="haut">Position de l'ancre</a><a href="../index.php">Page maîtresse </a><a href="http://www la grange net/w3c/html4 01/struct/links html"<a href= http://www.la-grange.net/w3c/html4.01/struct/links.html

target="_blank">Les liens dans un document HTML </a><a href="#haut">En haut de la page</a>


HTML : structure de texteNotions ErgonomieClient Serveur

<h1> <h2> <h3> <h4> <h5> <h6> Balise ouvrante : obligatoire, balise fermante : obligatoire

Permet de définir 6 niveaux de titre

<p> Balise ouvrante : obligatoire, balise fermante : optionnelle

Délimite un paragrapheDélimite un paragraphe

</br> Balise ouvrante : obligatoire, balise fermante : interdite

Force un saut de ligneg

<pre> Balise ouvrante : obligatoire, balise fermante : obligatoire

Reproduit le texte avec ses espaces et ses sauts de ligne tels qu’ils sont dans le code sourcedans le code source

<blockquote> Balise ouvrante : obligatoire, balise fermante : obligatoire

Place un bloc de texte en retrait


HTML : listeNotions ErgonomieClient Serveur

<ul> Balise ouvrante : obligatoire, balise fermante : obligatoire

Délimite un liste non ordonnéeDélimite un liste non ordonnée

<ol> Balise ouvrante : obligatoire, balise fermante : obligatoire

Délimite un liste ordonnée

<li> Balise ouvrante : obligatoire, balise fermante : optionnelle

Élément d’une liste qui est inséré entre les balises précédentesExemple:Exemple:


HTML : format de texteNotions ErgonomieClient Serveur

<em>Balise ouvrante : obligatoire, balise fermante : obligatoire

Reproduit le texte en italiqueReproduit le texte en italique

<strong> Balise ouvrante : obligatoire, balise fermante : obligatoire

Reproduit le texte en caractères gras

<sup> Balise ouvrante : obligatoire, balise fermante : obligatoire

Place le texte en exposant

< b><sub> Balise ouvrante : obligatoire, balise fermante : obligatoire

Place le texte en indice

<code> Balise ouvrante : obligatoire balise fermante : obligatoire<code> Balise ouvrante : obligatoire, balise fermante : obligatoire

Reproduit un bloc de texte en police à chasse fixe


HTML : composants d’interfaceNotions ErgonomieClient Serveur

<form>Balise ouvrante : obligatoire, balise fermante : obligatoire

Conteneur pour des commandesConteneur pour des commandes

<input> Balise ouvrante : obligatoire, balise fermante : interdite

Composant d’interfaceAttribut type:

• text: champ de saisie de texte sur une seule ligne.• password: champ de saisie de texte sur une seule ligne où les caractères sont affichés

par des astérisques h kb à h• checkbox: case à cocher.

• radio: bouton « radio » ou case à option• submit: bouton pour soumettre.• image: bouton pour soumettre graphique.

t b t d éi iti li ti• reset : bouton de réinitialisation.• button: bouton poussoir. Les agents utilisateurs devraient utiliser la valeur de l'attribut

value comme intitulé du bouton.• hidden: commande cachée, utilisée souvent pour créer une variable• file: bouton pour réaliser une sélection de fichier• file: bouton pour réaliser une sélection de fichier



<form> et <input>ExempleExemple



<button>Balise ouvrante : obligatoire, balise fermante : obligatoire

Bouton de commandeBouton de commande

<textarea> Balise ouvrante : obligatoire, balise fermante : obligatoire

Champ de saisie multiligne

<select> Balise ouvrante : obligatoire, balise fermante : obligatoire

Affiche une liste déroulante

< ti ><option> Balise ouvrante : obligatoire, balise fermante : obligatoire

Définit l’élément d’une une liste déroulante



<select> et <option>ExempleExemple


CSSNotions ErgonomieClient Serveur

Feuilles de style (Cascading Style Sheet)HTML : spécifie la structure d'un document CSS : spécifie le style d'affichagePropose un modèle de classePropriétés de style spécifiée dans:Propriétés de style spécifiée dans:

Balise <style> insérée dans balise <head>Attribut style= inséré dans une balise htmlFichier monStyle.css appelé par<link rel="stylesheet"

href="css/monStyle.css" type="text/css"href css/monStyle.css type text/css media="screen"> inséré dans balise <head>


CSS : SélecteurNotions ErgonomieClient Serveur

Le style s’applique à un sélecteur:Une baliseUne balisebody {margin-left:1em; text-weight:bold;

}}

Un identifiant#unIdentifiant {margin-left:1em; text-weight:bold;}<body id="unIdentifiant"><body id unIdentifiant >

Une classe.uneClasse {margin-left:1em; text-weight:bold;}<body classe="unIdentifiant">

À une combinaison de sélecteurh1, h2, h3, h4, h5, h6 {margin-left:1em; text weight:bold;text-weight:bold;}


CSS : héritageNotions ErgonomieClient Serveur

Héritage flexible par exemple:td {margin left:1in; text weight:bold;}td {margin-left:1in; text-weight:bold;}Les <td> auront les propriéstés CSS spécifiéestd p{margin-left:1in; text-weight:bold;}Les <p> (paragraphe) qui sont sous l‘élément <td> auront les propriétésLes <p> (paragraphe) qui sont sous l élément <td> auront les propriétés CSS spécifiées.indented-bold margin-left:1in; text-weight:bold; Les éléments comportants la propriété HTML class=indented bold aurontéléments comportants la propriété HTML class=indented-bold auront les propriétés CSS spécifiées td .indented-bold margin-left:1in; text-weight:bold; Les éléments ayant la propriété HTML class=indented bold et quiLes éléments ayant la propriété HTML class=indented-bold et qui sont sous l‘élément <td> auront les propriétés CSS spécifiées


CSS : héritageNotions ErgonomieClient Serveur


JavaScriptNotions ErgonomieClient Serveur

L d ti i t été ti ll tLangage de programmation interprété, partiellement orienté objet et piloté par événementsIl permet d'effect er n traitement d côté clientIl permet d'effectuer un traitement du côté clientStandard ISO‐16262 supporté par les fureteurs communs (malheureusement avec quelquescommuns (malheureusement avec quelques incompatibilités); voir notamment standard ECMAScript et JScript de MSCMAScript et JScript de MSBasé sur le modèle DOM (Document Object Model) qui permet l'accès aux éléments du document HTMLq p


JavaScript: HistoireNotions ErgonomieClient Serveur

C éé déb t d é 1990 N t lCréé au début des années 1990 par Netscape sous le nom de Livescript pour augmenter les capacités HTMLHTMLRepris par Sun qui le nomme Javascript en décembre 19951995Iexplorer 3, en 1996, interprète le JavascriptNetscape le faisait déjàNetscape le faisait déjàLa norme Ecmascript est adoptée en juin 1996


JavaScript: principes de baseNotions ErgonomieClient Serveur

Langage interprété Ne comporte pas de classesNe gère pas l’héritageSupporte un modèle objet en partie déjà instancié

Objets statiques: objets généralement en lecture seuleExemple: objet math

Objets dynamiques: objets qui peuvent être instanciésExemple: objet dateExemple: objet date

Typage relâché


JavaScript: typageNotions ErgonomieClient Serveur

Javascript reconnait les types suivants:NumériquesBooléenChaînenull mot réservé sensible à la casse qui signifie une valeur nulle et affecte la valeur par défaut selon le typevaleur par défaut selon le type

" " lorsque le variable est une chaîne0 lorsque le type de la variable est numériquefalse lorsque le type est booléen

d fi d é é i i ifi l défi iundefined mot réservé qui signifie une valeur non‐définie

Déclaration et initialisation de variablevar reponse = 42;var reponse = 42;

Affectation de variablereponse = "Encore merci pour le poisson ";reponse = Encore merci pour le poisson... ;


JavaScript: variablesNotions ErgonomieClient Serveur

Nom de variablePar convention: commence par une lettre, un ou $Par convention: commence par une lettre, un _ ou $les caractères accentués sont gérés depuis javascript 1.5 (Netscape 6.0, Firefox 1)

DéclarationDéclarationvar reponse;reponse = 42;var reponse = 42;var reponse = 42;

Affectation de variablereponse = "Encore merci pour le poisson...";

éPortéeUne variable est toujours globale sauf:

Lorsqu’elle est déclarée pour une première fois avec le mot réservé var à l’intérie r dans ne fonctionl’intérieur dans une fonction.


JavaScript: constantesNotions ErgonomieClient Serveur

Déclarationconst reponse;

Portéel l dé l é d fLocale lorsque déclarée dans une fonction

Globale lorsque déclarée à l’extérieur d’une fonctionFonction inutilisable lors de l’utilisation d’une constanteFonction inutilisable lors de l utilisation d une constante déclarée localement ailleurs.


JavaScript: constantes littéralesNotions ErgonomieClient Serveur

Tableaucafés = ["Arabica", "Expresso", "Cappuccino"]; [ , p , pp ];

Booléentrue et false

Entiers exprimés enEntiers exprimés endécimaux: 1 ou 425octaux: 001 (0 devant indique l’octal)hexadécimaux: 0x00111 (0x devant indique l’hexadécimal)hexadécimaux: 0x00111 (0x devant indique l hexadécimal)

Nombre à virgule flottanteSéparateur: « . »Peut comprendre dans une de ses partiesPeut comprendre dans une de ses parties

un entierun « e » ou « E » qui correspond à « multiplier par 10 exposant » le nombre entier suivant

• exemple: 3 51e2 // =351exemple: 3.51e2 // =351



ObjetListe de paires entre des accoladesExemple:p

affiche:

Ma voiture : SaturnLe modèle qui n'est pas vendu : HondaLe modèle en spécial : ToyotaLe modèle en spécial : Toyota



ChaînesSuite de caractères encadrés par des guillemets ' ' ou " "Suite de caractères encadrés par des guillemets ou .et incluant les caractères spéciaux suivants:

Caractère Signification\b Retour arrière\f Saut de page\n Nouvelle ligne\r Retour chariot\t Tabulation\v Tabulation verticale\' Apostrophe ou guillemet simple\" Guillemet double\\ Caractère de barre transversalle (\)\XXX Le caractère du codage Latin‐1 correspondant aux trois chiffres octaux XXX (entre 0 et 377). À titre

d'exemple, \251 constitue la séquence octale correspondant au symbole « copyright ».\xXX Le caractère du codage Latin‐1 correspondant aux deux chiffres hexadécimaux XX (entre 00 et FF). À titre

d'exemple, \xA9 constitue la séquence hexadécimale correspondant au symbole « copyright ».À


\uXXXX Le caractère Unicode correspondant aux quatre chiffres hexadécimaux XXXX. À titre d'exemple, \u00A9 constitue la séquence Unicode correspondant au symbole « copyright ».

https://developer.mozilla.org/fr/Guide_JavaScript_1.5/Constantes_litt%C3%A9rales#Cha.C3.AEnes

JavaScript: opérateursNotions ErgonomieClient Serveur

D’affectation Forme raccourcie Signification Descriptionx += y x = x + y additionx -= y x = x - y soustractionx *= y x = x * y multiplicationx /= y x = x / y divisionx %= y x = x % y modulox <<= y x = x << y décale à gauche de y bitsx >>= y x = x >> y décale à droite de y bits avec conservation du signex >>= y x = x >> y décale à droite de y bits avec conservation du signex >>>= y x = x >>> y décale à droite de y bits avec remplissage de 0x &= y x = x & y ET bit à bitx ^= y x = x ^ y OU bit à bitx |= y x = x | y OU exclusif bit à bit

De comparaison Opérateur Description Exemples renvoyant true== Égal 3=='3'!= Différent=== Strictement égal (même type) 3==3g ( yp )!== Strictement différent 3!=='3'> Plus grand< Plus petit>= Plus grand ou égal<= Plus petit ou égal


JavaScript: opérateursNotions ErgonomieClient Serveur

Arithmétiques Opérateur Description Exemple% Binaire : modulo++ Unaire : incrémentation

Logiques

++ Unaire : incrémentation‐‐ Unaire : décrémentation‐ Unaire : opposé Si x vaut 3, alors -x renvoie -3.

Opérateur DescriptionLogiques Opérateur Description&& Binaire : ET logique|| Binaire : OU Logique! Unaire : NON logique

Sur les bits Opérateur Description Méthode Exemple& Binaire : ET Renvoie la valeur obtenue en plaçant des 1 partout où les deux correspondent 1000 & 1001 == 1000& Binaire : ET Renvoie la valeur obtenue en plaçant des 1 partout où les deux correspondent 1000 & 1001 == 1000| Binaire : OU Renvoie la valeur obtenue en plaçant des 1 partout où un des deux correspondent 1000 | 1001 == 1001

^ Binaire : OU exclusif Renvoie la valeur obtenue en plaçant des 1 partout où un seul des deux correspondent 1000 ^ 1001 == 0001

~ Unaire : Opposé Inverse les bits ~1000 == 1111110111


JavaScript: autres opérateursNotions ErgonomieClient Serveur

De chaîne : « + » ou « += » font la concaténationConditionnel : « ? ». Exemple:Conditionnel : ? . Exemple: situation = (age >= 18) ? "adulte" : "mineur" ;

Virgule: « , »: séparateur d’éléments. Surtout employé dans une boucle. Exemple:dans une boucle. Exemple:for (var i = 0, j = 9; i <= 9; i++, j--) { document.writeln("a[" + i + "][" + j + "]= " + a[i][j]); }

delete : supprime un objet un élément d’un tableau unedelete : supprime un objet, un élément d un tableau, une variable, etc. in : confirme l’existence d’une propriété dans un objet. Un indice ou un mot réservé comme lenght sont des propriétés. Exemple :mavoiture = {marque:"Honda", modèle:"Accord", année:1998};"marque" in mavoiture // renvoie true;


JavaScript: autres opérateursNotions ErgonomieClient Serveur

instanceof: confirme si instance d’un objetjour = new Date(1995, 12, 17); if (jour instanceof Date) { // i t ti à é t// instructions à exécuter }

new : crée une instance d’un objetthis : appelle l’objet courant, habituellement l’objetthis : appelle l objet courant, habituellement l objet appelant de la méthode

typeof: retourne le type d’un objetvoid: expression à évaluer sans retourner de valeur


JavaScript: précédence des opérateursNotions ErgonomieClient Serveur

Type d'opérateur Opérateurs de ce typemembre . []

l/ é ti d'i t ()appel/création d'instance () newnégation/incrémentation ! ~ - + ++ -- typeof void deletemultiplication/division * / %addition/soustraction + -décalage bit à bit << >> >>>décalage bit‐à‐bit << >> >>>comparaison < <= > >= in instanceofégalité == != === !==et bit‐à‐bit &ou exclusif bit à bit ^ou exclusif bit‐à‐bit ^ou bit‐à‐bit |et logique &&ou logique ||condition ?:condition ?:affectation = += -= *= /= %= <<= >>= >>>= &= ^= |=virgule ,


JavaScript: instructionsNotions ErgonomieClient Serveur

Conditionnellesif else :

switch : var date = new Date();jour = date getDay();if...else :

if (nombre > 0){alert("Le nombre est un entier positif.");

}else if (nombre < 0){alert("Le nombre est un entier négatif.");

jour date.getDay();switch (jour){case 6:

document.write("Samedi");break;

case 0:}else{alert("Le nombre est 0.");

}

case 0:document.write("Dimanche");break;

default:document.write("C’est un jour de semaine!");

}}



Bouclesfor :for :



Boucleswhile et do while:

for … in: parcourt les noms des propriétés d’un objetwhile et do...while: des propriétés d un objet

for each… in: parcourt les valeurs des propriétés d’un

break et continue peuvent être utilisés avec ou sans étiquette

p pobjet

étiquette


JavaScript: fonctionsNotions ErgonomieClient Serveur

function :function (nombre){

return (nombre * nombre);}

Les paramètres sont passés par valeurp p pUne méthode est une fonction associée à un objet


JavaScript: fonctions prédéfiniesNotions ErgonomieClient Serveur

eval:var nombre=2;document.write (eval ("nombre * nombre")); //affichera 4

isFinite: détermine si c’est un nombre finiisFinite(Math.PI);// true

isNaN: détermine si ce n’est pas un nombrepisNaN("Math.PI"); //true

parseInt: retourne le nombre dans une chaîne tant qu’il rencontre des chiffres ou si le premier est un signe

//parseInt("-40.35"); //-40

parseFloat: retourne le nombre dans une chaîne tant qu’il rencontre des chiffres ou si le premier est un signe ou qu’un des

tè tcaractères est un « . »parseFloat("-40.35"); //-40.35

Number et String: convertissent un objet en nombre et en chaîneD = new Date (430054663215);D = new Date (430054663215);x = String(D); // "Thu Aug 18 1983 13:37:43 GMT+0200"y = Number(D); // 430054663215


JavaScript: objetsNotions ErgonomieClient Serveur

Peuvent être créés par:Par initialisationmaVoiture {marque: "Honda" modèle: "Civic" année: 2010}maVoiture = {marque: "Honda", modèle: "Civic", année: 2010}document.write(maVoiture.année); // affiche 2010

Par une fonction constructeurfunction voiture(marque, modèle, année) {

this.marque = marque; thi dèl dèlthis.modèle = modèle; this.année = année;

} laVoiture = new voiture("Ford","Escort",2009);document.write(laVoiture.année); // affiche 2009

O èd ié é l i dOn accède aux propriétés par leur nom ou par index selon leur mode de définitionprototype permet d’ajouter une propriété à un objetprototype permet d ajouter une propriété à un objet déjà définivoiture.prototype.couleur=null;laVoiture.couleur="rouge";

d l t t d i iété d’ bj tdelete permet de supprimer une propriété d’objet delete voiture.couleur;


JavaScript: objetsNotions ErgonomieClient Serveur

Méthodes créées en:Définissant une fonctionDéfinissant une fonctionL’ajoutant à l’objet

//affiche : Une belle Ford Escort de 2009


JavaScript: objets prédéfinis du noyauNotions ErgonomieClient Serveur

Objets spécialisés pourvus de propriétés définiesArray : permet de manipuler des tableaux à une ou plusieursArray : permet de manipuler des tableaux à une ou plusieurs dimensionsBoolean : objet qui ajoute certaines manipulations. À ne pas confondre avec les primitivesconfondre avec les primitivesDate : permet de manipuler des dates et des heuresFunction : permet de faire d’une fonction un objet et de l’assigner à une variableMath : permet de faire une foule d’opérations mathématiquesNumber : offre des possibilités de manipulation sur un nombreNumber : offre des possibilités de manipulation sur un nombre et l’accès à des constantes numériquesString : permet des manipulations de chaînes de caractères.

l f d é é l é lIl fournit des propriétés au littéral string.Les comportements de certaines propriétés sont différentes.


Événements JavaScriptNotions ErgonomieClient Serveur

Quelques exemples :onclick: <a>, <input type=button>onload: <img>, <body>onmouseover: <a>, <area>,onsubmit: <form>


JavaScript: objets du navigateur ou DOMNotions ErgonomieClient Serveur

Structure hiérarchisé d’objets présents dans le navigateurs dont la page Web, pourvus de méthodes, de g p g , p ,propriétés définies dont celles du CSS et d’événements.

navigator : donne accès aux propriétés du navigateurd l’ l f dwindow : permet notamment l’ouverture et la fermeture de

fenêtre (navigateur, onglet) et comprend tous les autres objets de la page webdocument : regroupe tous les objets de la page Webelement : les objets du documentform : les formulaires du documentform : les formulaires du documentevent : méthodes et propriétés d’un événement manipulées lorsqu’il est déclenché. history : liste des liens visités précédemment


DOMNotions ErgonomieClient Serveur

<table><tbody><tbody><tr>

<td>Une cellule</td>d ll l d l d iè l / d<td>Une cellule de la deuxième colonne</td>

</tr><tr>

<td>Une cellule de la rangée suivante</td><td>Une cellule de la deuxième colonne de la

deuxième rangée</td>g</tr>

</tbody></table>

LOG2420 ‐ Analyse et conception d'interfaces utilisateur ‐ Interfaces Web

</table>

60/85

DOM: le modèleNotions ErgonomieClient Serveur

Le modèle DOM (Document Object Model)


Le modèle DOMNotions ErgonomieClient Serveur

document.monTableau.element[1]

monTableau: adressage par NomElement[1]: adressage par position


DOM: quelques APINotions ErgonomieClient Serveur

Exemples de méthodes et propriétés du DOM exploitées en Javascriptdocument.getElementById(id)

element.getElementsByTagName(name)



document.createElement(name)

parentNode.appendChild(node)

element.innerHTML



element.style element.addEventListener

l t tAtt ib telement.setAttribute


Niveaux DOM et SAXNotions ErgonomieClient Serveur

DOM a eu trois stades de développement1. La base, : http://www.w3.org/tr/REC‐DOM‐Level‐1/1. La base, : http://www.w3.org/tr/REC DOM Level 1/2. Ajout des namespace, filtres de vues et association

d‘événements (ex. JavaScript) à des nœuds (getElementById())(getElementById()).

3. Plusieurs ajouts, notamment Xpath (validation, mappage dom‐xml, etc.)

DOM charge tout l'arbre XML du document, ce qui peut poser problème si la mémoire allouée est insuffisanteinsuffisante

Une alternative consiste à utiliser le parseur SAX qui fournit un accès sériel à un document XML et qui fonctionne par le modèle d‘événements et d'appel (callback)d événements et d appel (callback)


DHTMLNotions ErgonomieClient Serveur

Ensemble, JavaScript (ou un autre langage de script du côté client), le modèle DOM et les CSS permettent de créer desclient), le modèle DOM et les CSS permettent de créer des pages dynamiques (DHTML)Ces pages offrent un degré d'interactivité que l'on retrouve dans des interfaces WIMP, mais à un coût important :

Complexe et difficile à déverminer sur certaines plateformesIncompatibilités entre engins HTMLVariabilité des plates‐formes et de grandeurs de fenêtres qui

d l é lt t fi l diffi il à ti irend le résultat final difficile à anticiperContenu qui n'est pas directement « indexable » par des engins de rechercheengins de recherche


AjaxNotions ErgonomieClient Serveur

Asynchronous JavaScript and XMLUn ensemble de technologies comme DHTML mais dont le noyauUn ensemble de technologies comme DHTML mais dont le noyau est l'API XMLHttpRequest (XHR) de JavaScript, JScript ou VBScript

Principes :pAugmenter l'interactivité ; réduire la latence

Échanges légers et rapides entre le serveur et le client par une connexion indépendante, ce qui évite la recharge complète d'une page

Asynchrone, donc ne bloque pas l'affichage

Utilisé par plusieurs applications comme la complétion dans Google bar, MSN Virtual Earth


Ajax (suite)Notions ErgonomieClient Serveur

Validation dynamique des entrées de formulairesA to omplétion (e emple hamp de re her he)Auto complétion (exemple, champ de recherche)Téléchargement à la demande pour éviter un délai initialinitial exemple: GoogleMapsRafraichissement de données d'une page (server pull)Rafraichissement de données d une page (server pull) exemple: cotes boursières)


Interfaces Web


1. Notions

2. Client

3. Serveur

4. Ergonomie


Langage XSLNotions ErgonomieClient Serveur

Extensible stylesheet languagePermet la transformation la mise en page d'un document XMLPermet la transformation, la mise en page, d un document XML pour faciliter la consultation des données Permet d’afficher des données structurées dans un format HTMLBasé sur la reconnaissance de patron (pattern matching)

Regroupe 3 langagesXSLT : transformation du XSLXSLT : transformation du XSLXSL‐FO : format d'objets basé sur CSS utilisé surtout en pdf.XPAth : langage pour la définition de patrons qui traite le contenu

comprend les structures de contrôle de base (conditions, boucles, récursion)offre des fonctions comme le tri et l‘énumération


XML‐XSLNotions ErgonomieClient Serveur

arbres.xml


XSL‐XMLNotions ErgonomieClient Serveur

arbre xslarbres.cssarbre.xsl


XML‐XSL‐HTMLNotions ErgonomieClient Serveur

temp htmltemp.html


XPAthNotions ErgonomieClient Serveur

Un langage pour la définition de patrons dans des structures XMLSimilaire à la définition d'expressions régulières en UNIX :

UNIX : /*/lib/*.txtRetourne tous les fichiers avec l'extention '.txt' de tous les répertoires libRetourne tous les fichiers avec l extention .txt de tous les répertoires libdu second niveau à partir de la racine '/'XPath : /*/lib/*[@ext="txt" ]Comme le précédent, mais à partir d'une racine de document XMLComme le précédent, mais à partir d une racine de document XML

Exécute des requêtes complexesPar exemple :

//channel/descendant : :title/text()//channel/descendant : :title/text()Le titre des descendants 'Channel' du contexte courant//channel[@source="BBC"]/type[text()="Children"]/sibbling : :title/text()type[text()= Children ]/sibbling : :title/text()Le titre des émissions pour enfants de la chaîne BBC


XSLTNotions ErgonomieClient Serveur

Document XMLD tDocument HTML, XML, texte, etc.

XSLT

Le traitement peut être fait

Document XSL

en différé ou en temps réel du côté serveur ou du côté client, ce qui décharge le serveur

Les fureteurs récents supportent XSL pour leLes fureteurs récents supportent XSL pour le traitement du côté client

Offre donc un mécanisme élégant pour l'adaptation à la plateformeSeul l’arbre XML a alors à être transmis


XSL‐FO Notions ErgonomieClient Serveur

Les Objets de formatageformatage permettent de définir une miseen page (layout)complexe avec des principesdes principes semblables à LaTeX ou mêmeà des mise en forme de boîtes à outils comme SwingCe langage est notamment utile pour la génération de texte imprimé à partir de documents XMLtexte imprimé à partir de documents XML


Interfaces Web


1. Notions

2. Client

3. Serveur

4. Ergonomie


Contextes d'utilisationNotions ErgonomieClient Serveur

Portails d'entrepriseFonction d'information

IntranetsApplications internes ; automatisation de processus d'affairesDocumentation corporative pour l'interneDocumentation corporative pour l interneOutils de formation

ExtranetsAccessibles de l'Internet mais avec sections protégées avecAccessibles de l Internet, mais avec sections protégées avec identification de l'utilisateur

Sites transactionnels interentreprises (B2B)Si d bliSites grand public

InformationSites transactionnelsS tes t a sact o e sJeux, etc.


Dimensions à considérerNotions ErgonomieClient Serveur

Fréquence d'utilisationé à èLa majorité des utilisateurs en sont à leurs premières

visitesExemple : SAQ Poste Canada Hydro‐Québec BellExemple : SAQ, Poste Canada, Hydro Québec, BellOnt généralement une raison très spécifique de visiter

Par contre, pour des applications intranet, la grande majorité l ê l è f édes utilisateurs peuvent être des utilisateurs très fréquents

Exemple : soutien à la clientèle, applications bancaires

Segments d'utilisateursSegments d utilisateursL'usage peut varier considérablement d'un utilisateur à l'autre

Exemple : profils d'utilisateurs des sites universitairesLa connaissance préalable est très variable pour les sites grand public


Dimensions à considérer (Suite)Notions ErgonomieClient Serveur

Ni d'i t ti ité iNiveau d'interactivité requisDéterminer dans quelle mesure il faut que le traitement soit fait du côté client

L'interface du type Web est‐elle adaptée ?Il faut parfois s'en remettre à WIMP ou à une applet

La diversité des plateformespCompatibilité des fureteurs

Appareils variés (ex PDA WebTV)Appareils variés (ex. PDA, WebTV)


Dimensions à considérer (Suite)Notions ErgonomieClient Serveur

L i ti t l t t ti d l'i f tiLa navigation et la structuration de l'information

Souvent le problème principal des sites

Suivre les principes habituels :R è i l t à l i ti t bl tRepères visuels et propres à la navigation stables et cohérents

Diminution de la charge cognitive: favoriser laDiminution de la charge cognitive: favoriser la reconnaissance plutôt que le rappel

Bien choisir les termes et expressions : tests d'utilisabilitéBien choisir les termes et expressions : tests d utilisabilité


Données de navigationNotions ErgonomieClient Serveur

L'analyse des données (fichiers journaux) de navigation est un outil précieux pour raffiner l'ergonomie d'un sitepour raffiner l ergonomie d un siteDonnées importantes :

Trafic et temps de réponse par période donnéeP t é t i l l ltéPages et répertoires les plus consultésDurée moyenne d'une sessionProvenanceE i é ( i ki d IP) d d d iliEstimé (par connexion, cookie ou adresse IP) du taux de retour des utilisateursExemple: combien de nouveaux visiteurs par mois ou semainePages de sortie et d'entrée

P ibilité d f i d l t è dét illé d l i ti dPossibilité de faire des analyses très détaillées de la navigation des utilisateursDéfinition d'un arbre de navigation et analyse des fréquences dans les feuilles


Outil d’analyse de navigationNotions ErgonomieClient Serveur

Exemple de Google Analytics

https://www.google.com/analytics/


Quelques conclusionsNotions ErgonomieClient Serveur

Les interfaces Web sont incontournables et elles sont appelées à devenirLes interfaces Web sont incontournables et elles sont appelées à devenir encore plus répanduesLes mêmes principes ergonomiques s'appliquent aux interfaces Web qu'aux interfaces WIMP mais certains contextes d'utilisation sont différents et variésinterfaces WIMP mais certains contextes d utilisation sont différents et variésL'évolution des technologies Web est très rapide et amène constamment des contextes nouveaux avec pour conséquence qu'il est beaucoup plus facile de faire des erreurs de conception !


log2420 analyse et concep on d'interfaces utilisateur interfaces...

Documents