Remerciements a Philippe Renevier pour le matériel …...2017-2018 Elena Cabrio - Objets -...

Pro

g Web

Server -2

01

7-2

01

8

Remerciements a Philippe Renevier pour le matériel du cours

Pro

g Web

Server -2

01

7-2

01

8

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

• 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é) ?

Classes et Objets Exemple : BarreNavigation Ergonomie des pages web

Pro

g Web

Server -2

01

7-2

01

8


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


Pro

g Web

Server -2

01

7-2

01

8


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’objet


Pro

g Web

Server -2

01

7-2

01

8


• Classe = modèle– Déclaration class Nom_De_Classe { }

• Un objet = une concrétisation du modèle– Une instance (vocabulaire)

– Respecte le modèle • Les champs de classe, mais avec des valeurs qui lui sont propres

• Les méthodes restent inchangées

– Dans le code de la classe, pour faire référence à l’objet : $this

– Pour utiliser une méthode ou un champ de classe : $this->nom_du_champ ou $this->nom_de_la_methode()


Pro

g Web

Server -2

01

7-2

01

8


class Panier {// Eléments de notre panierprivate $items = array( );

// possesseur du panier : le client !private $client ;

// Ajout de $num articles de type $artnr au panier ; $artnr est une référence dans un cataloguepublic function add_item ($artnr, $num) {

if ($num > 0) {if (isset($this->items[$artnr])) $this->items[$artnr] += $num;

else $this->items[$artnr] = $num;

}}

/* … d’autres méthodes comme la suppression, obtenir une liste, etc. … */

// savoir combien de type de produit sont dans le panierpublic function get_number_product( ) { return (count($this->items)) ; }

// savoir combien de produit sont dans le panierpublic function get_number_item( ) {

$nb = 0;

foreach ($this->items as $achat) { $nb += $achat ; }

return $nb ;

}}


Pro

g Web

Server -2

01

7-2

01

8


• Création– $cart = new Panier();

• Accès aux méthodes d’une classe

– $cart->add_item("diplome", 1); $cart->add_item("semestre", 1);


Pro

g Web

Server -2

01

7-2

01

8


• Initialisation : dans le chargement de la classe et dans le constructeur– Chargement = valeur par défaut lors de la déclaration des champs de classe

• Le constructeur est la méthode qui est appelée automatiquement par la classe lorsque vous créez une nouvelle instance d'une classe a l'aide de l'opérateur new.

• La méthode constructeur a le même nom que la classe. Une méthode devient le constructeur si elle porte le même nom que la classe. Un constructeur peut avoir des paramètres avec ou sans des valeurs par défaut– Un seul constructeur (nombre de paramètre non discriminant)

class Panier {

/* … en complément … */

public function Panier($client)

{

$this->client = $client ;

}}


Pro

g Web

Server -2

01

7-2

01

8


• Un objet peut utiliser un autre objet• Une classe peut « typer » un paramètre d’une fonction/méthode ou d’un

champ de classe

include "client.inc"; // contient la définition de la classe Client

class Panier {/* … en complément et correction … */private Client $client ;

public function Panier(Client $client){$this->client = $client ;}

}


Pro

g Web

Server -2

01

7-2

01

8


• private– Ce qui ne sert qu’en interne

– Ce qui ne doit pas être modifié de l’extérieur (cohérence des valeurs)

– Ce qui ne doit pas être vu de l’extérieur (limite les dépendances)

• public– Ce qui est utilisé à l’extérieur

• Permettent de déterminer la partie visible (public) de l’encapsulation !


Pro

g Web

Server -2

01

7-2

01

8


• Objet dans une string– Utilisation de {$...}– echo "il y a {$cart->get_number_item()} produits dans

votre panier";

• Opérateur instanceof ou fonction is_a– $objet instanceof NomClasse

• Retourne vrai si l’objet est bien un objet de la classe NomClasse

• if ($cart instanceof Panier) {…}– is_a($objet, $nomClasse)

• Retourne vrai si l’objet est bien un objet de la classe dont le nom est $nomClasse

• if (is_a($cart, "Panier")) {…}


Pro

g Web

Server -2

01

7-2

01

8


Nécessaire en cas de désérialisation (session)

function __autoload($class_name) { include $class_name . '.inc'; // ou php

// ou autre chemin, ou plus de cas…}

Exemple « complexe » : http://deptinfo.unice.fr/~renevier/exemplesPhp/IH

M-2012/includes/autoload.inc.txt


http://deptinfo.unice.fr/~renevier/exemplesPhp/IHM-2012/includes/autoload.inc.txt

Pro

g Web

Server -2

01

7-2

01

8


• Sous forme d’un code php : var_export($var, true)

• Permet d’écrire le code php permettant d’initialiser $var.

• on peut « écrire » du php : $code = "\$var = ". var_export($var, true);

• Pour les classes, il faut implémenter public static function __set_state($an_array)– $an_array sera un tableau associatif, où les clefs sont

les nom des champs de la classe et les valeurs sont les valeurs des ses champs.


Pro

g Web

Server -2

01

7-2

01

8


• Recherche par mots clefs• Indexation dans un tableau associatif• Modification de ce tableau => sauvegarder la nouvelle version (c’est du

code)

• Ex – http://deptinfo.unice.fr/~renevier/exemplesPhp/articles/ (“mot de passe”)– Quand on voit un article, on peut ajouter des mots-clefs– Utilise alors

http://deptinfo.unice.fr/~renevier/exemplesPhp/articles/inclusion/motcle.inc.txt

– Qui écrit dans http://deptinfo.unice.fr/~renevier/exemplesPhp/articles/inclusion/motscles/indexation.inc.txt

– Exploité avec http://deptinfo.unice.fr/~renevier/exemplesPhp/articles/inclusion/motscles/affichageRecherche.inc.txt


http://deptinfo.unice.fr/~renevier/exemplesPhp/articles/

http://deptinfo.unice.fr/~renevier/exemplesPhp/articles/inclusion/motcle.inc.txt

http://deptinfo.unice.fr/~renevier/exemplesPhp/articles/inclusion/motscles/indexation.inc.txt

http://deptinfo.unice.fr/~renevier/exemplesPhp/articles/inclusion/motscles/affichageRecherche.inc.txt

Pro

g Web

Server -2

01

7-2

01

8


<?php

class Nouvelle {

private $categorie = "";

private $fichier = "";

private $nouveau = false;

/**

* construction a partir d'un chemin complet

* @param string $cheminComplet de type "news/monde/01.news"

*/

public function Nouvelle($cheminComplet = "") {

// […]

}

/**

* methode pour recreer un objet a partir des valeurs des champs de class

* appellee automatiquement par php, c'est une methode "magique"

* @param array $champsDeClasse de type array( "categorie" => "monde", "fichier" => "01.news")

*/

public static function __set_state($champsDeClasse) {

$objet = new Nouvelle();

$objet->categorie = $champsDeClasse['categorie'];

$objet->fichier = $champsDeClasse['fichier'];

// on pourrait faire autrement, on gerant le changement de status a l'exterieur de la classe

$objet->nouveau = false;

return $objet;

}

// […]

} ?>


Pro

g Web

Server -2

01

7-2

01

8


• Juste pour encapsulation

– généralement un seul objetc.f. exemple à venir « BarreNavigation »

• Juste pour structuration

– Plusieurs objets

– Simplification des méthodes/fonctions (moins d’indice, moins de if, etc.)

• Avec héritage, polymorphisme, dynamique, etc.


Pro

g Web

Server -2

01

7-2

01

8



Pro

g Web

Server -2

01

7-2

01

8


• Cadre du tp 2 (nouvelles)

• Avoir une barre de navigation

– Cohérence entre les pages

– Facile à utiliser

– Facile à mettre à jour

• Création d’un squelette de page


Pro

g Web

Server -2

01

7-2

01

8


<?phprequire_once "inclusion/navigation.inc"; // toutes les pages commencent par cet include

// code php propre à cette page, ici la génération de la liste des articles// avec la gestion de la session...

// on finit par générer la page web : les entêtes et la barre de navigation

echo genererEntetes("Accueil - Listes des catégories et des nouvelles");echo genererBarreNavigation();?>

<?php// affichage de la liste d’article?>

<div> <a href="detruire.php">Remise à zéro.</a> </div>

</body> </html>

Pro

g Web

Server -2

01

7-2

01

8


inclusion/navigation.inc<?phpsession_start(); // démarrage de session, avec session_name si nécessaireinclude "inclusion/nom.inc";

function genererBarreNavigation( ) {// valeur de retour : une chaine de caractère$barreHtml = "";

// génération de la barre de navigation

// fin de la fonctionreturn $barreHtml;}

function genererEntetes($titre="page sans titre...") {$entetes = // génération de l’entête HTML, avec le titre en paramètrereturn $entetes;}

function genererLien($url, $nom) {// valeur de retour $resultat = "";

// génération d’un lien ou d’un simple morceau de texte

return $resultat;}

?>


Pro

g Web

Server -2

01

7-2

01

8


inclusion/navigation.inc

• Composé de fonction

– Deux destinées à être utilisées par les pages :

• genererBarreNavigation et genererEntetes

• Retourne des chaines de caractère

– Une à usage interne aux deux fonctions ci-dessous

• genererLien

• Contrôle de l’appel

• Il faudra afficher (echo) leurs résultats…


Pro

g Web

Server -2

01

7-2

01

8


genererBarreNavigation

// valeur de retour : une chaine de caractère$barreHtml = "";

/*************** definition du menu *********************/// tableau pour definir le menu$adressesLiens = array();// tableau pour definir les noms dans les menus$nomsLiens = array();// $nomsLiens et $adressesLiens doivent avoir la meme longueur

[...]

/*************** generation du html *********************/

$barreHtml = "<div class='barrenavigation'>\n";

foreach($adressesLiens as $indice => $adresse) {$menu = "<div class='menu'>";// parcours des tableaux pour générer la barre d’adresse// [...]$barreHtml .= $menu;}

$barreHtml .= "</div>\n"; // fermeture de la barre de menu

/*************** fin de la fonction *********************/return $barreHtml;


Pro

g Web

Server -2

01

7-2

01

8


genererBarreNavigation : modélisation du menu (1/2)

Génération d’une structure html :

div (avec class)

ou nav / ul / li

Association avec css

Menu = titres et éléments associés

Représentabledans un tableau


Pro

g Web

Server -2

01

7-2

01

8


genererBarreNavigation : modélisation du menu (2/2)

/*************** definition du menu *********************/// tableau pour definir le menu$adressesLiens = array();// tableau pour definir les noms dans les menus$nomsLiens = array();// $nomsLiens et $adressesLiens doivent avoir la meme longueur

// 1) l'accueil : index.php, anciennement listearticle.php$adressesLiens[] = "index.php";$nomsLiens[] = "Accueil";

// 2) menu des categories : un tableau de tableau$categories = array(""); // 1er élément : titre du menu // pas de valeur : pas de lien$nomDossiers = array("Catégories"); // 1er élément : nom du li$listeDossiers = glob("news/*", GLOB_ONLYDIR);foreach($listeDossiers as $dossier) {

$nom = nom($dossier);$categories[] = "tp02.php?dossier=$nom";$nomDossiers[] = $nom;}

$adressesLiens[] = $categories;$nomsLiens[] = $nomDossiers;

// 3) gérer les nouvelles$adressesLiens[] = array("gerer.php", "ajouter.php", "supprimer.php"); // les liens$nomsLiens[] = array("Administrer les nouvelles", "Ajouter une nouvelle ", "Supprimer une nouvelle"); // leurs noms


Pro

g Web

Server -2

01

7-2

01

8


genererBarreNavigation : génération du menu (1/2)

/*************** generation du html *********************/

$barreHtml = "<div class='barrenavigation'>\n"; // container html pour tout le menu (div / header)

foreach($adressesLiens as $indice => $adresse) { // parcours par colonne “menu 1”, “menu 2”, etc.

$menu = "<div class='menu'>"; // container html pour un menu (div / nav)

if (is_array($adresse)) {

$nbUrl = count($adresse);

if ($nbUrl > 0) { // pour etre sur que ce n’est pas un tableau vide

$menu .= genererLien($adresse[0], $nomsLiens[$indice][0]); // « titre » du menu

if ($nbUrl > 1) { // si le menu a une partie déroulante

$menu .= "\t<div class='sousmenu'>\n";

for($i = 1; $i < $nbUrl; $i++) {

$menu .= "\t".genererLien($adresse[$i], $nomsLiens[$indice][$i]);

} // fin du for

$menu .= "\t</div>\n";

}

}

}

else { $menu .= genererLien($adresse, $nomsLiens[$indice]); } // cas d’un menu = 1 lien

$menu .= "</div>\n"; // fermeture d'un menu

$barreHtml .= $menu;

}

$barreHtml .= "</div>\n"; // fermeture de la barre de menu

a

b

c


Pro

g Web

Server -2

01

7-2

01

8


genererBarreNavigation : génération du menu (2/2)

• Forme du foreach : foreach($adressesLiens as $indice=> $adresse)pour reporter l’indice du tableau $adressesLiens dans $nomsLiens .

• Faiblesse de la modélisation... (classe)


Pro

g Web

Server -2

01

7-2

01

8


a


Pro

g Web

Server -2

01

7-2

01

8


b


Pro

g Web

Server -2

01

7-2

01

8


c


Pro

g Web

Server -2

01

7-2

01

8



Pro

g Web

Server -2

01

7-2

01

8


• Exemple : mise en valeur de la page courante, cas où ce n’est pas un lien (comme catégorie)

if (is_array($adresse)) {

// [...]

}

else {

$lienCourant = genererLien($adresse, $nomsLiens[$indice]);

$nouveauChemin = obtenirChemin($adresse, $lienCourant);

if ($nouveauChemin)

{

$chemin = $chemin.$nouveauChemin ;

$ici=" ici"; // pour la div du menu

$lienCourant = "<span class='ici'>$lienCourant</span>";

}

$menu .= $lienCourant;

}

// un peu plus loin

$menu = "<div class='menu$ici'>".$menu."</div>\n"; // fermeture d'un menu

$barreHtml .= $menu;


Pro

g Web

Server -2

01

7-2

01

8


function obtenirChemin($adresse, $lien, $categorie = "") {

$chemin = "";

$page = nom($_SERVER["PHP_SELF"]); // nom du script

$rechercheParam = explode("?",$adresse);

$adresseBrute = $rechercheParam[0]; $paramOk = true; $parametreUrl = $_SERVER["QUERY_STRING"];

if (count($rechercheParam) > 1) {

if ($parametreUrl) {

// il y a des parametres dans l'url et dans l'adresse testé

$params = $rechercheParam[1];

$params = explode("&", $params);

$paramsUrl = explode("&",$parametreUrl);

// on dit que l'adresse peut avoir moins de paramètre que l'url on ne test que dans le sens $params € $paramsUrl

foreach($params as $param) {

$paramOk = $paramOk && in_array($param, $paramsUrl);

}

} else {

$paramOk = false; // il n'y a pas de paramètre dans l'url

}

} else {

$paramOk = true ; // l'url peut avoir plus de param que l'adresse enregistée

}

if (($adresseBrute == $page) && $paramOk ) { // génération du chemin de navigation depuis la page d’accueil

$chemin = "<div id='chemin'><a href='index.php'>Accueil</a>";

if ($adresse != "index.php") {

if ($categorie) $chemin .= " > $categorie ";

$chemin .= " > $lien";

}

$chemin .= "</div>\n";

}

return $chemin;

}


Pro

g Web

Server -2

01

7-2

01

8


• Modification interne à la génération de la barre d’adresse.

• Pas d’implication sur l’utilisation de cette génération

• Illustration de la séparation• Illustration d’itérations possibles pour obtenir le

résultat final– Des étapes « livrables »– Des étapes « quasi » fonctionnelles

• Tout n’est pas fait, mais ce qui est fait est « cohérent »


Pro

g Web

Server -2

01

7-2

01

8


• On retombe dans le problème de calculDelai

• Des données liées mais indépendantes

• Besoin d’encapsulation


Pro

g Web

Server -2

01

7-2

01

8


class BarreNavigation {

public function genererBarreNavigation( ) { }public function genererEntetes($titre="page sans titre...") { }

private function genererLien($url, $nom) { }private function obtenirChemin($adresse, $lien, $categorie = "") { }}

// exemple d’utilisation de la classe BarreNavigation$barrenav = new BarreNavigation();echo $barrenav->genererEntetes("A propo de ce site");echo $barrenav->genererBarreNavigation();


Pro

g Web

Server -2

01

7-2

01

8


class BarreNavigation {/*************** definition du titre de la page *****/private $titre = "";/*************** definition du menu *****************/// tableau pour definir le menuprivate $adressesLiens = array();// tableau pour definir les noms dans les menusprivate $nomsLiens = array();// $nomsLiens et $adressesLiens doivent avoir la meme longueur/*************** definition de la taille des sous-menus *********************/private $tailleSousMenus = array();

public function BarreNavigation() { } // le constructeur qui initialise les donnéespublic function genererEntetes() { }public function genererBarreNavigation( ) { }

private function genererLien($url, $nom) { }private function genererCSS() { } // pour obtenir le css propre à chaque sous-menuprivate function surLaPage($adresse) { } // pour savoir si page courante = $adresseprivate function obtenirChemin($adresse, $lien, $categorie = "") { }// genererCSS utilisée dans genererEntetes// surLaPagen utilisée dans le constructeur et genererBarreNavigation// genererLien et obtenirChemin utilisées dans genererBarreNavigation

}

// exemple d’utilisation de la classe BarreNavigation => les modifications n’ont// quasiment rien changé dans le reste du code$barrenav = new BarreNavigation();echo $barrenav->genererEntetes();echo $barrenav->genererBarreNavigation();


Pro

g Web

Server -2

01

7-2

01

8


• A ajouter dans la structuration de données de BarreNavigation– Dans le constructeur

• Squelette de la page : <?php

require_once "inclusion/navigation.inc";

$barrenav = new BarreNavigation();

echo $barrenav->genererEntetes();

echo $barrenav->genererBarreNavigation();

?>



</body>

</html>

Pro

g Web

Server -2

01

7-2

01

8


Quelques guides pour appliquer les notions vues


Pro

g Web

Server -2

01

7-2

01

8


• Découverte en "Z"

• Regroupement en zone1. 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


Pro

g Web

Server -2

01

7-2

01

8


• Classement par ordre d’importance par ordre de lecture

Commandes

Message à lecture optionnelle

Outils ZONE DE TRAVAIL


Pro

g Web

Server -2

01

7-2

01

8


• 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


Pro

g Web

Server -2

01

7-2

01

8


• 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


Pro

g Web

Server -2

01

7-2

01

8


• 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]


Pro

g Web

Server -2

01

7-2

01

8


• 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


Pro

g Web

Server -2

01

7-2

01

8


• 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]


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

Pro

g Web

Server -2

01

7-2

01

8


• 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çantpar la conclusion

• il faut soigner la mise en forme du texte.

[J.F. Nogier]


Pro

g Web

Server -2

01

7-2

01

8


• 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]


Pro

g Web

Server -2

01

7-2

01

8


• 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]


Pro

g Web

Server -2

01

7-2

01

8


• 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]


Pro

g Web

Server -2

01

7-2

01

8


• 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]


Pro

g Web

Server -2

01

7-2

01

8


• 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]


Pro

g Web

Server -2

01

7-2

01

8


• 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]


Pro

g Web

Server -2

01

7-2

01

8


• 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]


Pro

g Web

Server -2

01

7-2

01

8


• 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]


Pro

g Web

Server -2

01

7-2

01

8


• 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


Pro

g Web

Server -2

01

7-2

01

8


• 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

• les listes de sélection (balise html select)– À éviter, sinon à accompagner d’un bouton « go » (contrôle)

• 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]


Remerciements a Philippe Renevier pour le matériel …...2017-2018 Elena Cabrio - Objets -...

Documents

Transcript of Remerciements a Philippe Renevier pour le matériel …...2017-2018 Elena Cabrio - Objets -...