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é) ?
1/04/2020 Technologies du Web – ELENA CABRIO
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
1/04/2020 Technologies du Web – ELENA CABRIO
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…
1/04/2020 Technologies du Web – ELENA CABRIO
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
1/04/2020 Technologies du Web – ELENA CABRIO
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
1/04/2020Technologies du Web – ELENA CABRIO
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"
}
}
}
}
}
1/04/2020 Technologies du Web – ELENA CABRIO
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',
)),
)),
)),
)),
1/04/2020 Technologies du Web – ELENA CABRIO
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
1/04/2020 Technologies du Web – ELENA CABRIO
( 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…
1/04/2020 Technologies du Web – ELENA CABRIO
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)
1/04/2020 Technologies du Web – ELENA CABRIO
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…
1/04/2020 Technologies du Web – ELENA CABRIO
Réponse formatée
1/04/2020 Technologies du Web – ELENA CABRIO
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)
1/04/2020 Technologies du Web – ELENA CABRIO
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
1/04/2020 Technologies du Web – ELENA CABRIO
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)
1/04/2020 Technologies du Web – ELENA CABRIO
Survol de XML, de l’API XML en php
Utilisation des objets : cas du XML
Eemple XML : RSS
1/04/2020Technologies du Web – ELENA CABRIO
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
1/04/2020 Technologies du Web – ELENA CABRIO
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.
1/04/2020Technologies du Web – ELENA CABRIO
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)
1/04/2020 Technologies du Web – ELENA CABRIO
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…)
1/04/2020 Technologies du Web – ELENA CABRIO
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>
1/04/2020 Technologies du Web – ELENA CABRIO
structure sémantique html en ARBRE
1/04/2020Technologies du Web – ELENA CABRIO
Arbre avec les
nœuds "text" utiles
1/04/2020Technologies du Web – ELENA CABRIO
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 ] )
1/04/2020 Technologies du Web – ELENA CABRIO
Sélection de Balises du DomDocument
DOMElement getElementById ( string $elementId )
DOMNodeList getElementsByTagName ( string $name )
1/04/2020 Technologies du Web – ELENA CABRIO
Exemple de getElementsByTagName
1/04/2020 Technologies du Web – ELENA CABRIO
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 )
1/04/2020 Technologies du Web – ELENA CABRIO
Utilisation d’un DOMElement (2/3)
É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 ;
1/04/2020 Technologies du Web – ELENA CABRIO
Utilisation d’un DOMElement (3/3)
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 ;
1/04/2020 Technologies du Web – ELENA CABRIO
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") { … }
1/04/2020 Technologies du Web – ELENA CABRIO
Flux rss : définition et exemple
1/04/2020Technologies du Web – ELENA CABRIO
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
1/04/2020 Technologies du Web – ELENA CABRIO
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
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
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
1/04/2020 Technologies du Web – ELENA CABRIO
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
1/04/2020 Technologies du Web – ELENA CABRIO
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.
1/04/2020 Technologies du Web – ELENA CABRIO
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...
1/04/2020Technologies du Web – ELENA CABRIO
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>";
// ici description + date...
}
}
1/04/2020 Technologies du Web – ELENA CABRIO
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>";
// ici description + date...
}
return $rssHtml ;
}
1/04/2020 Technologies du Web – ELENA CABRIO
« 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)
1/04/2020 Technologies du Web – ELENA CABRIO
Quelques guides pour appliquer les notions vues
Ergonomie des pages web
1/04/2020Technologies du Web – ELENA CABRIO
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
1/04/2020 Technologies du Web – ELENA CABRIO
Organisation de la fenêtre
Classement par ordre d’importance par ordre de lecture
Commandes
Message à lecture optionnelle
Outils ZONE DE TRAVAIL
1/04/2020 Technologies du Web – ELENA CABRIO
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
1/04/2020 Technologies du Web – ELENA CABRIO
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
1/04/2020 Technologies du Web – ELENA CABRIO
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
1/04/2020 Technologies du Web – ELENA CABRIO
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
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
1/04/2020 Technologies du Web – ELENA CABRIO
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é)
[J.F. Nogier]1/04/2020 Technologies du Web – ELENA CABRIO
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).
[J.F. Nogier]1/04/2020 Technologies du Web – ELENA CABRIO
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)
[J.F. Nogier]1/04/2020 Technologies du Web – ELENA CABRIO
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
[J.F. Nogier]1/04/2020 Technologies du Web – ELENA CABRIO
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)
[J.F. Nogier]1/04/2020 Technologies du Web – ELENA CABRIO
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.
[J.F. Nogier]1/04/2020 Technologies du Web – ELENA CABRIO
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
[J.F. Nogier]1/04/2020 Technologies du Web – ELENA CABRIO
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)
[J.F. Nogier]1/04/2020 Technologies du Web – ELENA CABRIO
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
1/04/2020 Technologies du Web – ELENA CABRIO
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]
1/04/2020 Technologies du Web – ELENA CABRIO