- Interfaces Webcours.polymtl.ca/MDesmarais/log2420/Seances/Web/web-h.pdf · InterfacesWeb MichelC.Desmarais Génieinformatiqueetlogiciel ÉcolePolytechniquedeMontréal 26thAug,2019

3.36pt

LOG2420 — Analyse et conception d’interfaces utilisateur — Interfaces Web 1/45

Interfaces Web

Michel C. Desmarais

Génie informatique et logicielÉcole Polytechnique de Montréal

26th Aug, 2019


3.36pt

Introduction


Web ou WIMP

I WIMP: “windows, icon, menu, popups”I Nombre d’entreprises se posent la question si elles doivent

aller en Web ou en WIMP/IOS/AndroidI La tendance est au Web car :

I Facilité d’installation, de maintenance, de mise à jour, decontrôle

I Portable sur toutes les plateformes, même mobilesI Grande facilité à faire des applications de saisie et d’affichage

de données simplesI Le développement des “progressive-web-apps” accentue et

étend cette tendance vers des applications indépendantes.I Inconvénients :

I Doit se conformer à un standard commun aux fureteursI Inconvénients du mode client-serveur : délai pour l’accès au

serveur (contournable)


Principes généraux

HTML : structure de l’interface (approche déclarative)JavaScript : fonctions

CSS : rendu de l’interface et adaptation auxcontextes

Fureteur : environnement qui encapsule ces technologies

I Un engin de rendu s’assure que l’affichage de l’interface soittoujours à jour avec le code HTML et CSS.

I L’interactivité consiste à associer le code JavaScript avec desévénements, souvent sur des objects d’interface (ex. clic desouris).

I Ces principes se transposent aussi à des applications en solo(par ex. Cordova, React, Progressive-web-app).


https://cordova.apache.org/

https://reactjs.org

https://developers.google.com/web/progressive-web-apps/

Client-serveurI Une panoplie de techonologies et de choix d’architecture

spécifique dans le cadre global du client serveur

Fureteur Serveur HTTPHTTP

CGIASP,JSP,PHPXSLNodeJS, TypescriptPython, C#, etc.

Fureteur

HTMLCSSJavaScript

Applet/PluginsXSL


Une requête HTTPLa requête :GET /index.html HTTP/1.1Host: www.polymtl.ca

La réponse :HTTP/1.1 200 OKDate: Fri, 03 Nov 2006 14:13:09 GMTServer: Apache/2.0.55 (Unix) mod_ssl/2.0.55 OpenSSL/...X-Powered-By: PHP/4.4.2Connection: closeContent-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’HTTP/1I Protocole client-serveur qui ne conserve pas d’état (session),

mais il existe plusieurs mécanismes pour le faireI À travers l’URL

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

I Par une variable cachée (même mécanisme que celui desformulaires)

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

I Par un “cookie”I Stockage Web (HTML5)


https://precisionconference.com/~ihm/cgi-bin/FormWizard?/templates/users.tmpl

https://precisionconference.com/~ihm/cgi-bin/FormWizard?/templates/users.tmpl

3.36pt

HTML, XML et SGML


SGML, HTML, XML, etc.

I XML : ExtensibleMarkup Language

I Dérivé de SGML, toutcomme HTML, maispermet de définir deslangages tout commeSGML et non pas desstructures fixescomme HTML


XML

I Possède une DTD (Document Type Description) tout commeSGMLI Spécifie la structure d’un langage XML

(voir http://en.wikipedia.org/wiki/DTD)I Généralement stocké dans un document externe au fichier XMLI Permet la vérification de conformité

I Universellement supporté; deux types d’analyseur syntaxiquesont disponibles :I SAX : lecture d’un document XML en mode “train” (stream)

avec programmation par événements; efficace pour de grosdocuments

I DOM : lecture complète du document dans une structured’arbre (plus flexible que le modèle SAX mais doit chargé toutle document en mémoire au préalable)


http://en.wikipedia.org/wiki/DTD

HTML

I Note historique :http://www.w3.org/History/1989/proposal.html

I Un dérivé de SGMLI Standard Generalized Markup Language (années 60!)I Langage pour la spécification de langagesI Principe syntaxique de base : <token> ... </token>

I HTMLI HyperText Markup LanguageI Dérivé de SGML mais ne suit pas une syntaxe rigoureuse,

ex: <P> Texte... <P> Second paragraphe...(c’est d’ailleurs une des sources d’incompatibilités entrefureteurs)

I Langage pour la spécification de la structure d’un documentavec un accent à la fois sur l’affichage et l’organisation

I <H 1>: structureI <b> ou <H1 ALIGN=LEFT>: affichage


http://www.w3.org/History/1989/proposal.html

Engin de rendu HTML

Il existe une panoplie d’engins de rendu HTML, par exemple :

Gecko : Mozilla, Firefox (Mozilla,LGPL), le seul qui soit surtoutes les plates-formes

Trident : Internet Explorer surWindows (propriétaire)

Tasman : Internet Explorer surMacintosh (propriétaire)

Lynx : rendu textuel du fureteurdu même nom

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

Source : http://en.wikipedia.org/wiki/Comparison_of_layout_engines


http://en.wikipedia.org/wiki/Comparison_of_layout_engines

http://en.wikipedia.org/wiki/Comparison_of_layout_engines

CSS

I “Cascading Style Sheet”I HTML doit être utilisé pour spécifier la structure d’un

document et laisser le style d’affichage à CSSI Permet la spécification du style d’affichage, beaucoup mieux

qu’avec HTML et en suivant un modèle d’héritageI Un document HTML peut référer à un document CSS et ainsi

dynamiquement changer le style de présentationI On peut associer des propriétés de CSS à chaque élément

HTML de différentes manières :I selon le type de balise (ex. h1, p, etc.)I selon l’attribut class (ex. <h1 class="uneClasse">)I par l’attribut style (ex. style="color:red;")

(n.b. cette pratique est à utiliser dans des cas d’exceptions)


CSS (suite)

I Modèle d’héritage flexible, par exempleI td {margin-left: 1in; text-weight: bold; }

Les <td> auront les propriétés CSS spécifiéesI td p { margin-left: 1in; text-weight: bold; }

Les <p> (paragraphe) qui sont sous l’élément <td> auront lespropriétés CSS spécifiées

I .indented-bold {margin-left: 1in; text-weight:bold; } Les éléments comportants la propriété HTMLclass=indented-bold auront les propriétés CSS spécifiées

I td .indented-bold {margin-left:1in;text-weight:bold;} Les éléments ayant la propriété HTMLclass=indented-bold et qui sont sous l’élément <td>auront les propriétés CSS spécifiées


3.36pt

JavaScript


JavaScript

Le traitement du côté client

I Langage de programmation interprété, orienté objet du typeprototype et mue par événements

I Il permet d’effectuer un traitement du côté clientI Standard ISO-16262 supporté par les fureteurs communs

(malheureusement avec quelques incompatibilités); voirnotamment standard ECMAScript et JScript de MS

I Basé sur le modèle DOM (Document Object Model) quipermet l’accès aux éléments du document HTML


Événements JavaScript

I Quelques exemples :I onclick : <a>, <input

type=button>I onload : <img>, <body>I onmouseover : <a>,

<area>I onsubmit : <form>

Exemple de code :


Le modèle DOM, (Document Object Model)

<TABLE><TBODY><TR><TD>Shady Grove</TD><TD>Aeolian</TD></TR>

<TR><TD>Over the River,Charlie</TD><TD>Dorian</TD></TR></TBODY></TABLE>


Le modèle DOM (suite)

document.monTableau.element[1]

I monTableau :adressage parnom

I Element[1] :adressage parposition


Accès au DOM

I DOM comporte en fait trois niveaux1. 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 noeuds3. Plusieurs ajouts, notamment XPath


http://www.w3.org/TR/REC-DOM-Level-1/

Exemple de menu I


3.36pt

Extensions JavaScript, jQuery et Ajax


jQuery

I Librarie JavaScript : jquery.comI Introduite en 2006 et utilisée par une majorité des sites très

fréquentésI Très efficace pour :

I la sélection des objets DOMI la gestion des événementsI les appels Ajax

I Un excellent tutoriel est disponible :http://w3schools.com/jquery/default.asp


jquery.com

http://w3schools.com/jquery/default.asp

Syntaxe jQuery

I Le signe $ est une abbréviation de jQuery. Ainsi, $(arg) estl’équivalent de jQuery(arg)

I L’expression $("P") effectue une recherche dans le DOM pourles balises P et permet de leur appliquer une méthode. Parexemple, les appels suivants camouflent différents éléments :I $(this).hide() : élément courantI $("p").hide() : éléments PI $(".test").hide() : éléments classe="test"I $(test").hide() : élément id="test".


Exemple de fonction de rappel d’événements avec jQuery


jQuery et classes CSS

Ajout d’une fonction de rappel :

$ ( "#deux " ) . c l i c k ( funct ion ( ) {$ ( t h i s ) . addC la s s ( " b l eu " ) ; } )

} ) ;


Ajax

“Asynchronous JavaScript and XML”

I Un ensemble de technologies comme DHTML mais dont lenoyau est l’API XMLHttpRequest (XHR) de JavaScript,JScript ou VBScript

I Principes :I Augmenter l’interactivité; réduire la latenceI Échanges légers et rapides entre le serveur et le client par une

connexion indépendante, ce qui évite la recharge complèted’une page

I Asynchrone, donc ne bloque pas l’affichageI Utilisé par plusieurs applications comme la complétion dans

Google bar, MSN Virtual Earth, et les encadrés publicitaires.


Exemplehttp://www.w3schools.com/Ajax/tryit.asp?filename=tryajax_first :<script type="text/javascript">function loadXMLDoc() {var xmlhttp;

...xmlhttp=new XMLHttpRequest();...

xmlhttp.onreadystatechange=function(){if (xmlhttp.readyState==4 && xmlhttp.status==200)document.getElementById("myDiv").innerHTML=xmlhttp.responseText;

}xmlhttp.open("GET","ajax_info.txt",true);xmlhttp.send();

}</script></head><body><h2>AJAX</h2><button type="button" onclick="loadXMLDoc()">Request data</button><div id="myDiv"></div></body></html>


http://www.w3schools.com/Ajax/tryit.asp?filename=tryajax_first

http://www.w3schools.com/Ajax/tryit.asp?filename=tryajax_first

Ajax (suite)

Plusieurs utilités :

I Validation dynamique des entrées de formulairesI Autocomplétion (exemple, champ de recherche)I Téléchargement à la demande pour éviter un délai initial

(exemple, GoogleMaps)I Rafraichissement de données d’une page (“server pull”;

exemple, cotes boursières)I Encadrés publicitaires déterminés en fonction du contexte

(contenu de la page, historique de navitation et autresinformations pouvant être accumulés quant à l’utilisateur).


Javax et jQuery

http://w3schools.com/jquery/tryit.asp?filename=tryjquery_ajax_load

<!DOCTYPE html><html><head><s c r i p t s r c=" j q u e r y . j s "></ s c r i p t ><s c r i p t >$ ( document ) . r eady ( f unct ion ( ){

$ ( " button " ) . c l i c k ( f unct ion ( ){$ ( "#d i v1 " ) . load ( "demo_ t e s t . t x t " ) ;

} ) ;} ) ;</ s c r i p t ></head><body><d i v i d=" d i v1 "><h2>Let jQuery AJAX Change This Text</h2></d iv><button>Get Externa l Content</button></body></html>




Auto complétion avec jQuery Ihttp://imankulov.github.com/asuggest/

var s u g g e s t s = [ " h e l l o " , " wor ld " ] ;$ ( "#area1 " ) . a sugge s t ( s u g g e s t s ) ;


http://imankulov.github.com/asuggest/

Auto complétion avec jQuery IIou http://jqueryui.com/autocomplete/

$ ( funct ion ( ) {var a v a i l a b l eT a g s = [

" App l e S c r i p t " , "Asp " , " Sca l a " , "Scheme"] ;$ ( "#tag s " ) . autocomp le te ({

source : a v a i l a b l eT a g s} ) ;

} ) ;. . .

<d i v c l a s s=" ui−widget "><l a b e l f o r=" tag s ">Tags : </ l a b e l ><inpu t i d=" tag s " /></d iv>


http://jqueryui.com/autocomplete/

Server Sent Events (2006)

I Server Sent Events est une version plus récente deXMLHttpRequest

I N’exige pas du client une requête pour vérifier l’état de larequête

I Nécessite de basculer entre le protocole HTTP et un protocoleadapté à ce type de requêtes


3.36pt

Adaptation à la plateforme et à la taille


Exemple d’adaptation : Moodle

Moodle sur Android (628×1027)


Exemple d’adaptation : iPad

Moodle sur iPad (1536×2048)


Exemple d’adaptation : iPad (paysage)

Moodle sur iPad (2048×1536) en mode paysage


Exemple d’adaptation : poste de travail

Moodle sur poste de travail (fenêtre de 933×1056)


Exemple : barre de menu horizontale et verticaleVoir l’exemple sur le site : menu-css.html

<LI> : défaut (v)<LU> : défaut (v)

<LI> : gauche<LU> : défaut (v)

<LI> : droite<LU> : défaut (v)

<LI> : droite<LU> :gauche

<LI> : vertical<LU> : gauche

<LI> : vertical<LU> : droite

<LI> : gauche<LU> : droite


3.36pt

Ergonomie du Web


Dimensions à considérer

I Fréquence d’utilisationI Pour plusieurs sites, la majorité des utilisateurs n’en sont qu’à

leurs premières visitesI Ex: SAQ, Poste Canada, Hydro-Québec, BellI Ont généralement une raison très spécifique de visiter

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

I Ex: soutien à la clientèle, applications bancairesI Segments d’utilisateurs

I L’usage peut varier considérablement d’un utilisateur à l’autreI Ex: profils d’utilisateurs des sites universitaires

I La connaissance préalable est très variable pour les sites grandpublic


Dimensions à considérer (suite)

I Niveau d’interactivité requisI Détermine dans quelle mesure il faut que le traitement soit fait

du côté clientI Accès aux ressources locales

I Le fureteur créé des contraintes de sécurités limitant l’accèsaux ressources locales

I Serveur local comme solution, mais architecture plus complexeI La diversité des plateformes

I Fureteurs non compatiblesI Géométrie variableI Appareils variés (IOS, Android, Windows)

I L’interface du type Web est-elle adaptée?I Il faut parfois s’en remettre à WIMP

I mais de moins en moins vrai


Dimensions à considérer (suite)

I La navigation et la structuration de l’informationI Souvent le problème principal des sitesI Suivre les principes habituels :

I Repères visuels et “navigationnels” stables et cohérentsI Diminution de la charge cognitive (favoriser la reconnaissance

plutôt que le rappel)I Bien choisir les termes et expressions (tests d’utilisabilité)


Données de navigation

I L’analyse des données (logs) de navigation est un outilprécieux pour raffiner l’ergonomie d’un site

I Données importantes :

I Trafic et temps de réponse parpériode donnée

I Pages et répertoires les plusconsultés

I Durée moyenne d’une session

I ProvenanceI Estimé (par login, cookie ou

adresse IP) du taux de retourdes utilisateurs

I (ex. combien de nouveauxvisiteurs par mois ou semaine)

I Pages de sortie et d’entréeI Possibilité de faire des analyses très détaillées de la navigation

des utilisateursI Définition d’un arbre de navigation


Exemple de Google Analytics

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


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

Quelques conclusions

I Les interfaces Web sont maintenant incontournables et ellessont appelées à devenir encore plus répandues

I Les mêmes principes ergonomiques s’appliquent aux interfacesWeb qu’aux interfaces WIMP mais les contextes d’utilisationsont fort différents et variés

I L’évolution des technologies Web est très rapide et amèneconstamment des contextes nouveaux avec pour conséquencequ’il est beaucoup plus facile de faire des erreurs deconception!


Documents

- Interfaces Webcours.polymtl.ca/MDesmarais/log2420/Seances/Web/web-h.pdf · InterfacesWeb MichelC.Desmarais Génieinformatiqueetlogiciel ÉcolePolytechniquedeMontréal 26thAug,2019