View
0
Download
0
Category
Preview:
Citation preview
Architecture(s) et
application(s) Web
CSC4101 - Expérience utilisateur WebCSC4101 - Expérience utilisateur WebCSC4101 - Expérience utilisateur Web
08/10/2019
1
Plan du coursPlan du coursPlan du cours
4 : Expérience utilisateur Web 4 : Expérience utilisateur Web4 : Expérience utilisateur Web
2
1. Interface utilisateurInterface utilisateurInterface utilisateur
3
Interface homme-machine (IHM)
4
Interface utilisateur
5
Propriétés de la ligne de commande
Command-Line Interface (CLI) :
Codi�éeStricteStatique
6
Interface utilisateur
7
Propriétés des interfaces graphiques
Graphical User Interface (GUI) :
Métaphore (bureau)Exploratoire
8
Interface utilisateur
Un magazine c'est un iPad qui ne marche pas.m4vUn magazine c'est un iPad qui ne marche pas.m4vUn magazine c'est un iPad qui ne marche pas.m4vÀ regarder plus tardÀ regarder plus tardÀ regarder plus tard PartagerPartagerPartager
Vidéo par UserExperiencesWorkshttps://www.youtube.com/watch?v=gc9NpYrbZgQ
9
Propriétés des interfaces « naturelles »
Natural User Interface (NUI) :
Directe (passage de novice à expert facilement)Naturelle / Intuitive
10
Importance des ordiphones (mobiles)
Plate-forme préférentielle (majorité des utilisateurs)
Utiliser technos Web pour applis mobiles :-)
11
</interface_utilisateur>
12
2. Interfaces WebInterfaces WebInterfaces Web
13
Qualité des interfaces Web
14
Ergonomie
Expérience utilisateur (User eXperience : UX)Utilisabilité :
apprenabilité (novices)« Fléau » de l’abandon de panierUtilisateurs « PIP » : Pressés, Ignorants et Paresseux
16
Portabilité
Le Web est la plate-forme universelle.
Standardisation = portabilité (merci HTML5)Applications mobiles :
Développé en HTML« Compilé » en toolkit natif (ex.
)Attention : prédominence de Chrome de Google…Best viewed in Chrome
ApacheCordova
17
Accessibilité
Vidéo :
Comment les aveugles utilisent internetComment les aveugles utilisent internetComment les aveugles utilisent internetÀ regarder plus tardÀ regarder plus tardÀ regarder plus tard PartagerPartagerPartager
Source : article de l’Obs
.
Comment les aveugles utilisent-ils internet ?
18
Obligations
Différents niveaux de priorité / niveaux deconformité à la normePrincipes : Perceptible, Utilisable,Compréhensible, RobusteRègles, critères de succèsTechniques suf�santes et techniquesrecommandées
Règles pour l’accessibilité des contenus Web(WCAG) 2.0
Référentiel Général d’Accessibilité desAdministrations (RGAA) Version 3 2017
19
Principes WCAG 2.0
20
Principe 1 : perceptible
21
Principe 2 : utilisable
2.1 Rendre toutes les fonctionnalités accessiblesau clavier.2.2 Laisser à l’utilisateur suf�samment de tempspour lire et utiliser le contenu.2.3 Ne pas concevoir de contenu susceptible deprovoquer des crises.2.4 Fournir à l’utilisateur des élémentsd’orientation pour naviguer, trouver le contenu etse situer dans le site.
22
Principe 3 : compréhensible
3.1 Rendre le contenu textuel lisible etcompréhensible.3.2 Faire en sorte que les pages apparaissent etfonctionnent de manière prévisible.3.3 Aider l’utilisateur à éviter et à corriger leserreurs de saisie.
23
Principe 4 : robuste
4.1 Optimiser la compatibilité avec les agentsutilisateurs actuels et futurs, y compris avec lestechnologies d’assistance.
etc.
24
Évaluation qualité
Critères Opquast (Open Quality Standards) :https://checklists.opquast.com/fr/qualiteweb/
25
</qualite_interface>
26
</interfaces_web>
27
3. Habillage des pages WebHabillage des pages WebHabillage des pages Web
28
Découplage structure / présentation
(suite)
29
Page Web et document HTML
Conversion de documents en une présentation dans lenavigateur.
30
HTML + CSS
31
Une « page Web » :
un document HTML(maître)plus des images,boutons, menus, etc.(éventuellementexternes)
Un document (HTML) :
un arbre de rubriques,sous-rubriques,etc.
Structure des sources des pages
Arbre de balises HTML(DOM : Document Object
Model)
32
Structure d’une page a�chée
Une page af�chée en 2D (ou imprimée) :
des boîtes qui contiennent d’autres boîtesboîtes qui contiennent texte ou images, etc.texte qui contient des caractèrescaractère qui contiennent des pixels…
33
Arbre DOM et rendu des pages
Le navigateur (moteur de rendu) convertit :
Arbre DOM : Document Object Model
en :
Arbre d’éléments à af�cherRègles de conversion
Prédé�nies (navigateur)Programmables (CSS)
34
Exemple de page avec un tableau
Logo du site
Titre page
Accueil
LienLienLienLienLien
35
Structure HTML correspondante ?<table> <tr> <!-- SECTION EN-TETE --> <td colspan="3"> <h3>Logo du site</h3> </td> </tr> <tr> <!-- SECTION BARRE NAVIGATION == --> <td colspan="3"> <a href="#">Accueil</a> </td> </tr> <tr> <td width="20%"> <!-- COLONNE GAUCHE (MENU) == --> <a href="#">Lien</a><br> <a href="#">Lien</a><br> </td> <td width="55%"> <!-- COLONNE MILIEU (CONTENU) == --> <h4>Titre page</h4> Une mise-en-page avec en-tête, barre de navigation et section de ... </td> <td width="25%"</td> </tr>
36
Faire mieux !
Structurer la page en 6 sections, par exemple, avecdes balises <div>
Positionner le contenu de chaque section avec desrègles CSS.Permet de faire évoluer la mise en page, parexemple sous forme linéaire et non plus tabulaire,etc.
37
Programmer en HTML et CSS
38
Structure archétypale d’une page
Source : http://webstyleguide.com/wsg3/6-page-structure/3-site-design.html
39
Ou bien, ces temps-ci…
40
Exemples : CSS Zen Garden
http://www.csszengarden.com/tr/francais/
41
Design
Outils de Mockup :
Papier + crayon + gommeOutilsHTML + CSS (+ templates)
42
Guides de style
Chercher « web interface style guide » sur votre moteude recherche préféréFaire comme sur les applis mobiles :
Android : Material design :
iOS Human Interface Guidelines :https://developer.android.com/design/index.htm
https://developer.apple.com/ios/human-interface-guidelines/
43
Inspiration / prêt à l’emploi
: récompenses pourle Web design
: sélectionde designs
Marché :
: thèmes prêts à l’emploi
https://www.awwwards.com/
http://www.webdesign-inspiration.com/
https://themeforest.net/
44
Caractéristiques de HTML
45
HTML5
Tout (ou presque) est possible en terme d’interfaced’applications.Y compris l’accès à des zones de graphisme libre etl’intégration des périphériques dutéléphone/ordinateur
46
Les bons artistes copient, les grands
artistes volent
Avantage d’HTML : le code source HTML dispo.
Vive le copier-coller :-)
47
Contenu adaptatif
Responsive design : prend en compte la taille del’écran automatiquementp. ex.: avec (voir plus loin)Bootstrap
48
Interactions dynamiques
JavascriptInteractions asynchrones
49
Interactions avec ordiphone mobile
Application allant plus loin que l’af�chage et lasaisie de texte : accès à toutes les fonctions duterminal mobile depuis le navigateur Web
https://www.w3.org/Mobile/mobile-web-app-state/
50
Principes de CSS
Cascading Style Sheets
Concevoir l’habillage des pages du site / application
51
Cascade
Modèle « objet » particulier
Langage déclaratifCombinaison de plusieurs feuilles avec priorités« Héritage » de propriétés des parents
Factorisation de motifs :
DRY – don’t repeat yourself
52
Langage à base de règles
Si motif trouvé (sélecteur)alors valeur donnée à attribut/propriété de miseen forme
53
Exemplebody { padding-left: 11em; font-family: Georgia, "Times New Roman", Times, serif; color: purple; background-color: #d8da3d } ul.navbar { list-style-type: none; padding: 0; margin: 0; position: absolute; top: 2em; left: 1em; width: 9em }
54
Di�érents niveaux de proximité
55
Spéci�cité selon la proximité
Quelles règles s’appliquent, si plusieurs sont dé�nies ?
56
Spéci�cité du sélecteur
57
Outils du développeur
sur MDNExaminer et modi�er le CSS
58
Conception de CSS
Pas toujours simpleAbstractionFrameworks CSS (et Javascript)
ex. :
Couplage templates et CSS
Bootstrap
59
</habillage_css>
60
4. Programmation des interfacesProgrammation des interfacesProgrammation des interfaces
61
Rappel architecture et MVC
62
Rappel : Architecture multi-tiers
63
Rappel : Patron MVC
64
Modèle et Vue
65
Pilote des interactions : le Contrôleur
Contrôleur : coordonne les transitions entre vues,et les entrées de l’utilisateur, en fonction de l’étatdu modèleVues (pages)Modèle
Objectif : programmer les vues mais aussi le contrôleur,au-dessus des mécanismes de HTML et HTTP, pour
offrir une bonne expérience utilisateur.
66
Modéle états - transitions
67
Ensemble de vues / écrans / pages
Naviguer dans une arborescence de pages / vues /écrans / dialoguesTrouver de l’information au sein d’une pageWidgets pour interaction : composants d’interfacegraphique (boutons, listes, etc.)
68
Un état de l’application
Une page / vue, représente l’état courant
69
Hypermedia As The Engine Of
Application State (HATEOAS)Une application = diagramme d’états �niTransitions = hyperliens sur lesquels on clique (et autres widgets)
70
Exemple Application Web
Point départ :
( )https://twitter.com/jack/status/20
71
Diagramme états Web app Twitter
1 transition en entrée / 32 transitions en sortie
72
Interactions avec utilisateur
Af�chage de pages (lecture sur des ressources)Invocation de méthodes sur des ressourcesdédiées (y compris écriture)Invocation d’APIs pour interactions �nes (lecture /écriture)
73
Framework Web MVC
ModèleVueContrôleur
Le contrôleur gère les transitions HATEOAS
74
</hateoas>
75
Dans Symfony
76
Modèle
Classes PHPDoctrine : typage des attributsBase de données…
77
Vues
Une représentation de la ressource demandée dans larequête du client.
arguments de render() :
injectés dans le gabarit Twig
$this->render ( 'todo.html.twig', [ 'id' => $id, 'todo' => $todo ] );
78
Routage vers les méthodes du
contrôleur/** * @Route("/todo/show/{id}", name = "todo_show") * @Method("GET") */ public function todoShow($id) { ... }
79
Cohérence des routes
Utilisation des routes pour les transitions dansl’application (nommées), au lieu des chemins « en dur ».<a href=" {{ path('todo_show', { 'id' : todo.id }) }}"> détails </a>
80
</programmation>
81
5. Technologies pour le projetTechnologies pour le projetTechnologies pour le projet
82
Conception des gabarits et CSS
83
Concevoir les gabarits des pages
Conception parallèle :
des blocs des gabarits HTMLdes sections <div> qu’ils contiennent (identi�ants
ou classes)des mises en forme
Même convention de nommage
84
Modèle de page souhaité<html> <head> </head> <body> NAVIGATION MENU (COLONNE DE GAUCHE) CONTENU PRINCIPAL BAS DE PAGE </body> </html>
85
Structure sémantique<body> <div id="navigation"> (NAVIGATION) </div> <div id="menu"> (MENU RUBRIQUES) </div> <div id="main"> (CONTENU PRINCIPAL) </div> <div id="footer"> (BAS DE PAGE) </div> </body>
86
Feuille de style CSS#navigation { ... } #menu { float: left; ... } #main { ... } #footer { ... }
87
Gabarit Twig{% block body %} <body> <div id="navigation"> {% block navigation %} {% endblock %} {# navigation #} </div> <div id="menu"> {% block menu %} {% endblock %} {# menu #} </div> <div id="main"> {% block main %} <h1>{{ Message }}</h1> {% endblock %} {# main #} </div> <div id="footer"> {% block footer %} {% endblock %} {# footer #} </div> </body> {% endblock %} {# body #}
88
Standardisation / Spécialisation
Spécialisation dans une sous-section ou une page decertains éléments de structure ou de présentation
héritage des gabarits : redé�nition du contenu deblocs
cascade des feuilles de style CSS : redé�nition dela mise en forme
{% block main %} ... {% endblock %}
#main { background-color: lightblue; }
89
</conception>
90
CSS avec Bootstrap
91
Utilisation d’un framework de
présentation CSS
Standardisation du lookAdaptatifGrille pour le positionnement graphiqueIntégration avec Twig / Symfony
92
Système de grille
Mise en page basée sur une grille de 12 colonnes
94
Exemples
exemples, dans la documentation Bootstrapexemples sur Start Bootstrap
95
Thèmes
Feuille de syle additionnelleThèmes sur Start Bootstrap
96
</bootstrap>
97
</technos_projet>
98
Take awayTake awayTake awayStructure != présentationRôle de CSSPrincipe de surcharge des feuillesContrôleurs MVC pour gérer le comportementHypertexte de l’interface Web (HATEOS)Accessibilité
99
RécapRécapRécap[X] HTTP (GET)
[X] PHP
[X] Doctrine
[X] Routeur Symfony
[X] HTML
[X] Twig
[X] CSS
Tout ce qu’il faut pour un joli site Web dynamique enlecture seule ;-)
100
Ensuite…Ensuite…Ensuite…
101
Tout de suite, séance TP n°4
102
Hors-présentiel d’ici au prochain cours
3 h à caser dans la semaine
103
PostfacePostfacePostface
104
Crédits illustrations et vidéosVidéo parUserExperiencesWorksvidéo : (Le nouvel obs)Image « HTML + CSS » empruntée au « CSS Tutorial » de Avinash Malhotra :
Diagrammes « Speci�city ranking by proximity », « Proximal speci�city in action… » et« Speci�city ranking by selector type » empruntés à par Ernie Simpson, aka The Big Erns :
Diagramme de grille de mise en page de Bootstrap empruntée à par Maurice Chavelli
Illustration « », supposémment de Bruce Sterling
https://www.youtube.com/watch?v=gc9NpYrbZgQ
Comment les aveugles utilisent-ils internet ?
http://tutorial.techaltum.com/css.html
http://cssway.thebigerns.com/special/master-item-styles/Bootstrap de Twitter
: un kit CSS et plus !Enjoy Websur�ng
105
CopyrightCopyrightCopyrightDocument propriété de ses auteurs et de TélécomSudParis (sauf exceptions explicitementmentionnées).Réservé à l’utilisation pour la formation initiale àTélécom SudParis.
106
Recommended