Technologies du Web - Inria...Format d’échange JSON Plus léger qu’XML Basé sur du javascript...

Technologies du WebPHP

(classe et objets -ergonomie)

Par Elena CABRIO

Basé sur les cours de Jean-Pierre Lozi, Philippe Renevier et Andrea Tettamanzi

1/04/2020 Technologies du Web – ELENA CABRIO

Classe : inversion du problème Association données-fonctions dans des classes

Les fonctions deviennent des méthodes (vocabulaire)

Les données deviennent des attributs de classe (vocabulaire)

Ces méthodes et ces attributs de classe sont indissociables

Les méthodes ne fonctionnent qu’avec leurs paramètres et les valeurs ces

attributs de classe-là

Ces attributs de classe ne sont directement accessible qu’à partir de ces

méthodes-là

Classe = un modèle

de structuration de données (les attributs de classes)

d’utilisation de ces attributs de classes (les méthodes)

de publication : qu’est-ce qui est utilisable de l’extérieur, qu’est-ce qui ne l’est

pas (ce qui est donc caché) ?


CLASSE pour lier données et fonctions

Données FonctionsParamétrage,

Valeur de retour

Attributs MéthodesaccèsObjet

d’une

Classe

Les paramètres sont uniquement les valeurs externes à

l’objet.

Moins de problème pour les valeurs de retour multiples

1/04/2020Technologies du Web – ELENA CABRIO

Classe pour masquer

Objet

Ce qui est utilisable : public

Ce qui est interne

/ non atteignable

: private

Défini comment l’objet est utilisé

Ce qui peut être changé sans

modification de code pour

l’utilisation de l’objet1/04/2020 Technologies du Web – ELENA CABRIO

Objets « sérialisés »:

structuration d’échange

Objets = instances d’une classe

Sérialisé = version textuelle qui contient les information

Echange sur le réseau : du texte

Plus léger

Pas d’espace mémoire

Pas lié à une technologie

Besoin d’outil pour retransformer le texte en objet

Ex: Session de php

Ex: données JSON ou XML


Format d’échange JSON

Plus léger qu’XML

Basé sur du javascript

Par défaut depuis Php 5.2

sur-ensemble de JSON

encoder et décoder les données de type scalaire (boolean, integer, float,

string) et NULL.

standard JSON ne les supporte que dans un tableau ou un objet.

http://php.net/manual/en/language.types.intro.php

Existence de libraires…


http://php.net/manual/en/language.types.intro.php

Le format JSON

Une collection de couples nom/valeur.

Réification en objet ou en table de hachage ou en tableau associatif ou en

structure, etc.

En php : en objet ou en tableau

Une liste de valeurs ordonnées.

Réification en tableau, en liste, etc.

En php : tableau (séquentiel) ou objet (associatif)

Les deux comportent des valeurs


Grammaire JSONobject

{ }

{ members }

members

pair

pair , members

pair

string : value

array

[ ]

[ elements ]

elements

value

value , elements

value

string " " " des caracteres unicodes sans controles "

number

object

array

true

false

null


Exemple(s) de JSON: http://json.org/example.html{

"glossary": {

"title": "example glossary",

"GlossDiv": {

"title": "S",

"GlossList": {

"GlossEntry": {

"ID": "SGML",

"SortAs": "SGML",

"GlossTerm": "Standard Generalized Markup Language",

"Acronym": "SGML",

"Abbrev": "ISO 8879:1986",

"GlossDef": {

"para": "A meta-markup language, used to create ml, e.g., DocBook.",

"GlossSeeAlso": ["GML", "XML"]

},

"GlossSee": "markup"

}

}

}

}

}


http://json.org/example.html

Même exemple decodé en php

stdClass::__set_state(array(

'glossary' => stdClass::__set_state(array(

'title' => 'example glossary',

'GlossDiv' => stdClass::__set_state(array(

'title' => 'S',

'GlossList' => stdClass::__set_state(array(

'GlossEntry' => stdClass::__set_state(array(

'ID' => 'SGML',

'SortAs' => 'SGML',

'GlossTerm' => 'Standard Generalized Markup

Language',

'Acronym' => 'SGML',

'Abbrev' => 'ISO 8879:1986',

'GlossDef' => stdClass::__set_state(array(

'para' => 'A meta-markup language, used to

create ml, e.g., DocBook.',

'GlossSeeAlso' => array (

0 => 'GML',

1 => 'XML',

),

)),

'GlossSee' => 'markup',

)),

)),

)),

)),


Encodage / decodage

mixed json_decode ( string $json [, bool $assoc = false)

// exemple de php.net

$json = '{"foo-bar": 12345}';

$obj = json_decode($json);

print $obj->{'foo-bar'}; // 12345

string json_encode ( mixed $value)

Fonctions pour connaitre la derrière erreur liée à json : json_last_erro_msg et

json_last_error


( On peut prévoir la transformation de nos objets )

JsonSerializable {

/* Méthodes */

abstract public mixed jsonSerialize ( void )

}

La valeur retourner sera celle utilisée dans json_encode().

Doit retourner donc du json…


http://www.php.net/manual/fr/jsonserializable.jsonserialize.php

http://www.php.net/manual/fr/function.json-encode.php

Exemple d’utilisation

Une requête url qui retourne du JSON :

http://nominatim.openstreetmap.org/search?format=json&polygon=1&addres

sdetails=1&q=avenue%20joseph%20vallot%2006100%20Nice

Nominatim = convertir une adresse en coordonnées GPS

OpenStreetMap, Creative Commons Attribution-ShareAlike (CC-BY-SA)


http://nominatim.openstreetmap.org/search?format=json&polygon=1&addressdetails=1&q=avenue%20joseph%20vallot%2006100%20Nice

Réponse de Nominatim

[{"place_id":"46688328","licence":"Data © OpenStreetMap contributors,

ODbL 1.0.

http:\/\/www.openstreetmap.org\/copyright","osm_type":"way","osm_id":"427

6702","boundingbox":["43.7157771","43.7158409","7.2631654","7.265695"],"l

at":"43.7158086","lon":"7.2643108","display_name":"Avenue Joseph Vallot,

Borriglione, Nice, Maritime Alps, Provence-Alpes-Côte d'Azur,

Metropolitan France, 06000;06100;06200;06300,

France","class":"highway","type":"residential","importance":0.51,"address

":{"road":"Avenue Joseph

Vallot","suburb":"Borriglione","city":"Nice","county":"Maritime

Alps","state":"Provence-Alpes-Côte

d'Azur","country":"France","postcode":"06000;06100;06200;06300","country_

code":"fr"}}]

=> Outils (plugin navigateur, editeur de code, etc.) pour mieux voir…


Réponse formatée


Interprétation

On reçoit un tableau

Ici il ne contient qu’un objet

Un objet définit par (entre autre

place_id

lat (latitude)

lon (longitude)

address (pour échange ou vérification)


Le traitement en php

Comment l’avoir ? file_get_contents

Pour construire la requête (url) : urlencode

Comment l’interpréter ?json_decode

Comment le manipuler ?accès aux objets et/ou au tableau


Le code php de réception du json

// obtention du json, réponse à la requete : quelle coordonnée pour

l'adresse "avenue joseph vallot"

$jsonBrut =

file_get_contents("http://nominatim.openstreetmap.org/search?format=

json&polygon=1&addressdetails=1&q=avenue%20joseph%20vallot%2006100%2

0Nice");

// décodage de la réponse

$jsonDecode = json_decode($jsonBrut);

$lat = $jsonDecode[0]->lat; // 43.715808

// $jsonDecode est un tableau, $jsonDecode[0] est un objet

// dont lat est un attribut

$state = $jsonDecode[0]->address->state;

// Provence-Alpes-Côte d'Azur

// $jsonDecode[0]->address est un objet, dont state est un attribut

Adresse encodée

« façon url » (%20 =

caractère espace)


Survol de XML, de l’API XML en php

Utilisation des objets : cas du XML

Eemple XML : RSS


Exemple : HTML

Hyper Text Markup Language

Langage intermédiaire

Interprété par le navigateur

Ce qu’on voit à l’écran n’est pas le fichier

HTML = structure sémantique

Le navigateur sait sur quoi il peut « tomber », il sait comment

l’interpréter


HTML = struture sémantique du doc

Le dormeur du val. C'est un trou de verdure où chante une rivière Accrochant follement aux herbes des haillons D'argent ; où le soleil, de la montagne fière, Luit : c'est un petit val qui mousse de rayons. Un soldat jeune, bouche ouverte, tête nue, Et la nuque baignant dans le frais cresson bleu, Dort ; il est étendu dans l'herbe, sous la nue, Pâle dans son lit vert où la lumière pleut. Les pieds dans les glaïeuls, il dort. Souriant comme Sourirait un enfant malade, il fait un somme : Nature, berce-le chaudement : il a froid. Les parfums ne font pas frissonner sa narine ; Il dort dans le soleil, la main sur sa poitrine, Tranquille. Il a deux trous rouges au côté droit.

<h1>Le dormeur du val</h1>

<p>C'est un trou de verdure où chante une

rivière<br />

Accrochant follement aux herbes des haillons<br

/>

D'argent ; où le soleil, de la montagne fière, <br

/>

Luit : c'est un petit val qui mousse de

rayons.</p>

<p>Un soldat jeune, bouche ouverte, tête nue,

<br />

Et la nuque baignant dans le frais cresson bleu,

<br />

Dort ; il est étendu dans l'herbe, sous la nue, <br

/>

Pâle dans son lit vert où la lumière pleut.</p>

<p>Les pieds dans les glaïeuls, il dort. Souriant

comme<br />

Sourirait un enfant malade, il fait un somme :<br

/>

Arthur RIMBAUD (1854-1891)

Le dormeur du val

C'est un trou de verdure où chante une rivière

Accrochant follement aux herbes des haillons

D'argent ; où le soleil, de la montagne fière,

Luit : c'est un petit val qui mousse de rayons.

Un soldat jeune, bouche ouverte, tête nue,

Et la nuque baignant dans le frais cresson bleu,

Dort ; il est étendu dans l'herbe, sous la nue,

Pâle dans son lit vert où la lumière pleut.

Les pieds dans les glaïeuls, il dort. Souriant comme

Sourirait un enfant malade, il fait un somme :

Nature, berce-le chaudement : il a froid.

Les parfums ne font pas frissonner sa narine ;

Il dort dans le soleil, la main sur sa poitrine,

Tranquille. Il a deux trous rouges au côté droit.


Pourquoi un langage à balise ?

Si je vous dis :

Nice 15 22

Si je vous dis :<meteo>

<ville>Nice</ville>

<matin>15</matin>

<midi>22</midi>

</meteo>

XML : méta-modèle (modèle pour langage à balise)


Le XML ?

Déterminer un langage (DTD)

Instancier ce langage

Document web = autant d’instance d’une DTD web

(pas forcément XML, mais néanmoins très proche)

Voir les documents comme des arbres d’objet DOCUMENT OBJECT MODEL

une API pour le manipuler (Application programming interface)

Api « commune » à tous les langages (javascript…)


Même exemple que JSON en xml (DTD inconnu)<glossary>

<title>example glossary</title>

<GlossDiv><title>S</title>

<GlossList>

<GlossEntry ID="SGML" SortAs="SGML">

<GlossTerm>Standard Generalized Markup Language</GlossTerm>

<Acronym>SGML</Acronym>

<Abbrev>ISO 8879:1986</Abbrev>

<GlossDef>

<para>A meta-markup language, used to create ml, e.g., DocBook.</para>

<GlossSeeAlso>GML</GlossSeeAlso>

<GlossSeeAlso>XML</GlossSeeAlso>

</GlossDef>

<GlossSee>markup</GlossSee>

</GlossEntry>

</GlossList>

</GlossDiv>

</glossary>


structure sémantique html en ARBRE


Arbre avec les

nœuds "text" utiles


Lecture D’un XML par php API DOMDocument

Un Document :

DOMDocument

C’est aussi un nœud (DOMNode) => parcours selon un nœud possible

De nombreuses propriétés et de nombreuses méthodes

création

// Create a new DOM Document to hold our document structure

$xml = new DOMDocument();

$xml->load ("fichier.xml");

mixed load ( string $filename_OU_Url [, int $options = 0 ] )

bool loadHTML ( string $source )

bool loadHTMLFile ( string $filename )

mixed loadXML ( string $source [, int $options = 0 ] )


http://fr2.php.net/manual/fr/domdocument.load.php

http://fr2.php.net/manual/fr/domdocument.loadhtml.php

http://fr2.php.net/manual/fr/domdocument.loadhtmlfile.php

http://fr2.php.net/manual/fr/domdocument.loadxml.php

Sélection de Balises du DomDocument

DOMElement getElementById ( string $elementId )

DOMNodeList getElementsByTagName ( string $name )


http://fr2.php.net/manual/fr/domdocument.getelementbyid.php

http://fr2.php.net/manual/fr/domdocument.getelementsbytagname.php

Exemple de getElementsByTagName


http://fr2.php.net/manual/fr/domdocument.getelementsbytagname.php

Utilisation d’un DOMElement (1/3)

C’est aussi un DOMNode

Parcours selon un nœud

Création : plutôt par un objet DOMDocument, sinon avec un nom de tag

Méthodes liées aux attributs

string getAttribute ( string $name )

bool hasAttribute ( string $name )

sélection

DOMNodeList getElementsByTagName ( string $name )


http://fr.php.net/manual/fr/domelement.getattribute.php

http://fr.php.net/manual/fr/domelement.hasattribute.php

http://fr.php.net/manual/fr/domelement.getelementsbytagname.php


Élément de base de l’arbre, avec parent, fratrie, enfants, etc.

// nom du tag

public readonly string $nodeName ;

// valeur (attention, pas toujours pertinent, dépend du type de nœud)

public string $nodeValue ;

// type : un entier prédéfini : http://php.net/manual/fr/dom.constants.php

// ex: 3 == XML_TEXT_NODE == du texte…

public readonly int $nodeType ;

// Cet attribut retourne le contenu texte de ce nœud et de ces descendants.

public string $textContent ;


http://fr.php.net/manual/fr/class.domnode.php


http://php.net/manual/fr/dom.constants.php




Attributs de structure, pour la navigation

// nœud parent

public readonly DOMNode $parentNode ;

// listes des nœuds enfants

public readonly DOMNodeList $childNodes ;

// premier nœud inclus

public readonly DOMNode $firstChild ;

// dernier nœud inclus

public readonly DOMNode $lastChild ;

// nœud « frère » (ayant le même parent) précédent

public readonly DOMNode $previousSibling ;

// nœud « frère » (ayant le même parent) suivant

public readonly DOMNode $nextSibling ;




http://fr.php.net/manual/fr/class.domnodelist.php










Structuration DOM: DOMNodeList

Juste une liste de nœuds

DOMNodeList {

/* Propriétés */

readonly public int $length ;

/* Méthodes */

DOMNode DOMNodelist::item ( int $index )

}

exemples

for($i = 0; $i < $list->length; $i++) { … }

if ($list->item(0)->nodeName == "item") { … }


http://fr.php.net/manual/fr/class.domnodelist.php

http://fr.php.net/manual/fr/domnodelist.item.php

Flux rss : définition et exemple


Le flux rss, des exemples

Des exemples :

http://www.lemonde.fr/rss/

http://www.leparisien.fr/services/rss/

http://www.liberation.fr/rss/

https://news.google.fr/news/feeds?pz=1&cf=all&ned=fr&hl=fr&output=rss

http://filuns.unice.fr/accueil/@@rss_view

Un format d’échange d’information


http://www.lemonde.fr/rss/

http://www.leparisien.fr/services/rss/

http://www.liberation.fr/rss/

https://news.google.fr/news/feeds?pz=1&cf=all&ned=fr&hl=fr&output=rss

http://filuns.unice.fr/accueil/@@rss_view

Definition d’un flux rss (1/2)

Un flux <rss> est composé d’au moins un <channel> (généralement 1)

Un <channel> est composé

<title> : Définit le titre du flux ;

<description> : Décrit succinctement le flux ;

<link> : Définit l'URL du site correspondant au flux.

Etc. (pour les informations)

Et d’un ou plusieurs <item>

http://fr.wikipedia.org/wiki/RSS1/04/2020 Technologies du Web – ELENA CABRIO

http://fr.wikipedia.org/wiki/URL

Definition d’un flux rss (2/2)

Un <item> est composé

<title> : Définit le titre de l'actualité ;

<link> : Définit l'URL du flux correspondant à l'actualité ;

<pubDate> : Définit la date de l'actualité ;

<description> : Définit une description succincte de l'actualité ;

<guid> : Définit de manière unique l'actualité.

Voire aussi, pour <item>

<author> : Définit l'adresse électronique (mail) de l'auteur ;

<category> : Associe l'item à une catégorie ;

Etc.

http://fr.wikipedia.org/wiki/RSS1/04/2020 Technologies du Web – ELENA CABRIO

http://fr.wikipedia.org/wiki/URL

Exploiter un flux : besoin d’une API

Convertir le flux rss (du xml = du texte) en objet

API « DOM » en php

Abstract programming interface

Une définition « publique » de comment utiliser des éléments de

programmation (comme nous )

http://www.php.net/manual/fr/book.dom.php


http://www.php.net/manual/fr/book.dom.php

Lire un flux… (à distance)

// utilisation d’un objet de type DOMDocument

$this->xml = new DOMDocument();

// le @ est un suppress warning

// le paramètre de load est un nom de fichier (chemin) ou une url

@$this->xml->load($this->url);

// exemple : obtenir tous les articles (= <item>) du flux

$items = $this->xml->getElementsByTagName("item");

// $items est la liste de tous les <item> dans le flux ouvert


Transformer du XML en HTML (1/3)

Principe :

extraire les informations

navigation (getElementsByTagName, … )

obtenir la valeur (textContent, …)

les utiliser pour remplir un modèle

remplir autant de modèle que nécessaire

Réalisation :

savoir l’HTML à produire

itérer sur les informations.


Transformer du XML en HTML (2/3)

Html ciblé

<article>

<header><h2>titre</h2><p>auteur</p></header>

description...

</article>

Côté php

$rssHtml = "<article><header><h2>$titre</h2><p>$auteur</p></header>";

$rssHtml .= "$description<br/><strong class='date'>".date("Y-m-d [h:i]", strtotime($dt->textContent))."</strong>\n</div>";

// ici description + date...


Transformer du XML en HTML (3/3)@$items = $this->xml->getElementsByTagName("item");

if ($items && ($items->length > 0)) {

// foreach($items as $item)

for($i = 0; $i < $nb; $i++) {

$item = $items->item($i);

$dt = $item->getElementsByTagName("pubDate")->item(0);

$titre = $item->getElementsByTagName("title")->item(0)->textContent;

if ( $item->getElementsByTagName("author")->length > 0 ) {

$auteur = $item->getElementsByTagName("author")->item(0);

}

else $auteur = $auteur_par_defaut;

$description = $item->getElementsByTagName("description")->item(0);

$description = $description->textContent;

$rssHtml .= "<article><header><h2>$titre</h2><p>$auteur</p></header>";

$rssHtml .= "$description<br /><strong class='date'>".date("Y-m-d [h:i]",

strtotime($dt->textContent))."</strong>\n</article>";


}

}


Obtenir un seul article en htmlpublic function getArticle($i) {

$rssHtml = "";

@$items = $this->xml->getElementsByTagName("item");

if ($items && ($items->length > 0) && ($items->length > $i) && ($i >= 0) ) {

$item = $items->item($i);

$dt = $item->getElementsByTagName("pubDate")->item(0);

$titre = $item->getElementsByTagName("title")->item(0)->textContent;

if ( $item->getElementsByTagName("author")->length > 0 ) {

$auteur = $item->getElementsByTagName("author")->item(0);

}

else $auteur = $auteur_par_defaut;

$description = $item->getElementsByTagName("description")->item(0);

$description = $description->textContent;

$rssHtml.="<article><header><h2>$titre</h2><p>$auteur</p></header>";

$rssHtml.="$description<br /><strong class='date'>".date("Y-m-d [h:i]", strtotime($dt->textContent))."</strong>\n</article>";


}

return $rssHtml ;

}


« Refactoring »

Spécification initiale (= choix initiaux)

Évolution au fur et à mesure…

… ou après coup

Réorganisation du code

classe FluxRss

Un constructeur avec une url

Une méthode getArticle($i)

Une méthode getTousLesArticles( )

Le tout dans un fichier (FluxRss.inc)


Quelques guides pour appliquer les notions vues

Ergonomie des pages web


Perception de l’écran Découverte en "Z"

Regroupement en zone

1. Très visible, peu accessible

2. Très visible

3. Peu accessible

4. Très accessible

5. La plus visible et accessible

6. Très accessible

7. Peu accessible

8. Peu visible, peu accessible

9. Peu accessible

1 2 3

654

7 8 9


Organisation de la fenêtre

Classement par ordre d’importance par ordre de lecture

Commandes

Message à lecture optionnelle

Outils ZONE DE TRAVAIL


Utilisation des couleurs Perception centrée sur le jaune-vert

bleu (périphérique) pour encadrer

bleu saturé à éviter pour du texte et petits objets

Couleurs saturées (claires) pour les fonds

Codage d’un état

Utilisation de 7 (+/- 2) couleurs maximum

Utilisation avec une autre mise en valeur

Respecter l’interprétation culturelle


Icônes Utilisation pour des commandes fréquentes

Utilisation conjointe à un libellé

Limitation du nombre (12 au mieux, 20 max)

Construction à différents niveaux d’abstraction

Ressemblance (bouton stop des premiers navigateurs)

Descriptif (bouton de justification des éditeurs)

Exemple (bouton souligner S)

Caricatural (bouton d’impression)

Analogie (couper = ciseaux, sauver = disquette)

Symbolique (image abstraite : logo de sport)

Arbitraire (bouton "actualiser" des navigateur)

[J.F. Nogier]

Difficulté

d’interprét

ation


Mise en évidence Efficacité implique exception

Durée déterminée par le besoin de mise en évidence

Perception visuelle (ICS)

Pour les regroupements : proximité > couleur > forme

Ce qui est différent ressort

Inversion vidéo

Police de caractère, structure du texte

Taille

Respect de la perception de l’état de l’objet (ne pas induire de fausse idée)

Clignotement, animation, son

À utiliser avec parcimonie

Offrir la possibilité de l’arrêter

[J.F. Nogier]1/04/2020 Technologies du Web – ELENA CABRIO

Message – retour d’information

Affirmatif

Forme Active

Constructif (non critique)

Sans impasse

Respecter l’ordre des actions

Cliquez sur continuer après avoir insérer le cd

Sans ambiguïté

Cohérent avec le reste du site web


Organisation Visuelle

Cf Perception de l’écran

Dans l'idéal, une page = un écran (deux max).

Stat résolution : w3schools – stat display

Arrêt à la première information intéressante

Découpage de la page

[J.F. Nogier]1/04/2020Technologies du Web – ELENA CABRIO

http://www.w3schools.com/browsers/browsers_resolution_higher.asp

Organisation Textuelle (1/3) Plus un élément est important, plus il doit se voir.

liaison entre la forme et le fond demande un minimum d'effort pour

l'utilisateur.

les titres doivent être explicites,

le web demande un style d'écriture commançant par la conclusion

il faut soigner la mise en forme du texte.

[J.F. Nogier]

Classes et Objets Exemple : BarreNavigation Ergonomie des pages web


Organisation Textuelle (2/3) Les titres

Le titre doit décrire clairement (sans ambiguïté)

des titres sans liens, afin de ne pas complexifier la navigation.

l'écriture web

concise, rédigée simplement, factuelle

Accès directe à l’information

de commencer par la conclusion.

Détail ensuite

Lecture rapide car l'utilisateur du web est généralement pressé.

Vocabulaire simple (compatibilité)


Organisation Textuelle (3/3) la mise en forme

faire ressortir les éléments clefs

justifier dans le sens de la lecture

ne pas souligner les textes (souligné => lien)

lisibilité (guidage) mais valeur par défaut de l'utilisateur prioritaire !

Les tailles des caractères varient d'une plate-forme à une autre.

gérer les tailles en relatifs (% ou em) plutôt qu’en (px ou cm).

Mais complexe et variable => choix de conception.

imprimer (feuille css particulière avec l'attribut media).


Graphismes et Images (1/2) charte graphique cohérente (homogénéité)

Limiter les perturbations (animations… pub…)

Images

Minimiser le poids (5ko)

Privilégier la qualité

Attribut alt (accessibilité)

Jpg : photo ; png : images (créations)


Graphismes et Images (2/2) Couleurs

Éventuellement palette web safe (216 couleurs, 00 33 66 99 CC ou FF pour

les valeurs RGB en hexa)

Images cliquables

sélection plus simples

Rendre visible les zones actives (c.f. – ou pas – dvd)

Animation

Mise en évidence

Processus dynamique

Contrôle


Page d’accueil

Explicative

Pas de tunnels (splash screen)

Allégée

Intègre toute la Navigation

Elle n’est pas un passage obligé…

Sauf si… (redirection)


Navigation ergonomique (1/2) Indiquer où se trouve l'utilisateur

Indiquer par où est passé l'utilisateur

Fournir une vue globale du contenu du site

Organiser les rubriques dans l'ordre où elles sont utilisées

Permettre une navigation directe (raccourcit) pour les utilisateurs expérimentés.

Eviter les impassesPour le "grand public", ne pas demander à l'utilisateur de savoir se servir de son navigateur.


Navigation ergonomique (2/2)

règle des 3 clics ?

généralement une bonne métrique pour mesurer la

naviguation

complexité d'un clic (comprendre où le clic amène,

lever les ambiguïté avec les autres liens)

Frames ? (c.f. api java)

nécessitent une grande rigueur de programmation

L'impression fonctionne mal

Le bouton "back" des navigateur fonctionne mal

Il est difficile de "marquer" une page en particulier


Elena Cabrio - Objets - Architecture - Ergonomie - Prog Web Serveur 54 / 56

Liens hypertextes (conseils) Ne pas changer la couleur ni le comportement pas défaut des liens. (compatibilité)

Eviter les liens trop courts (loi de Fitts)

Placer le lien à la fin d'une phrase ou d'un paragraphe

ne pas interropre le fil de la lecture (et donc de la pensée de l'utilisateur)

respecter l'ordre des actions (c.f. le contenu d'un message dans les IHM)

Le texte du lien doit permettre de deviner le contenu de la page

Pas efficace : Pour accéder aux pages sur les guides ergonomiques, cliquez ici .

Efficace : Accédez à une page présentant les guides ergonomiques

Ne pas répéter des liens similaires sur une même page

Utilisés pour vérifier qu'ils mènent au même endroit.

Ceci est à modérer et à vérifier dans le cadre de pages longues.

Les liens doivent être cohérents sur tout le site (homogénéité)

Prévenir l'utilisateur lorsqu'un lien conduit vers un document volumineux (guidage)

Eviter d'afficher les liens externes (hors site) dans une nouvelle fenêtre

nouvelles fenêtres envahisantes (comme les pop-up)

coupent l'historique de la navigation (donc le cheminement de l'utilisateur).

Liens internes (accès direct et/ou pages longues)


Barre de navigation

sur toutes les pages (homogénéité)

en haut à gauche de la page

Répéter en bas si page longue

prévoir une zone de navigation contextuelle

ne faut pas multiplier les zones de navigation

éviter les barres de navigation à géométrie variable [J.F. Nogier]

Navigation secondaire horizontale OU verticale

• En php, plusieurs possibilités :

– Une seule page php qui inclut les autres

• Chacune des zones (si utilisées) correspondent à un fichier inclus

– Un squelette commun à toutes les pages


Technologies de navigation

les menus déroulants

Reproduire interface classique, gain de place

Requiert précision…

Pas de sous-menu, plan B

les onglets

Métaphore d’interaction connue

Limite la profondeur de navigation

Doit être bien dessiner, toujours un de sélectionner

les boutons / Icônes

Éviter les boutons suivant / précédent sans autre précision (peu parlant, c.f. lien)

le rollover

Mise en valeur [Css :hover]

Pas de texte caché qu’il faut découvrir

le chemin de progression

permettre à l'utilisateur de disposer d'un outil qui l'aide à mémoriser son cheminement.

en haut de la page, notamment au dessus du logo

Par convention, ">" pour séparer les niveaux.

inclure le titre de la page dans ce chemin. [J.F. Nogier]


Technologies du Web - Inria...Format d’échange JSON Plus léger qu’XML Basé sur du javascript...

Documents

Transcript of Technologies du Web - Inria...Format d’échange JSON Plus léger qu’XML Basé sur du javascript...