a p p l i c at i on(s) we b a rc h i t e c t u re (s) et · 2020-03-02 · compr é he nsib le , r...
TRANSCRIPT
![Page 1: a p p l i c at i on(s) We b A rc h i t e c t u re (s) et · 2020-03-02 · Compr é he nsib le , R ob uste R è gle s, c r itè r e s d e suc c è s Te c hniq ue s sufsa nte s e t](https://reader031.vdocuments.mx/reader031/viewer/2022011907/5f4afba953ee040dc63cc14f/html5/thumbnails/1.jpg)
Architecture(s) et
application(s) Web
CSC4101 - Expérience utilisateur WebCSC4101 - Expérience utilisateur WebCSC4101 - Expérience utilisateur Web
08/10/2019
1
![Page 2: a p p l i c at i on(s) We b A rc h i t e c t u re (s) et · 2020-03-02 · Compr é he nsib le , R ob uste R è gle s, c r itè r e s d e suc c è s Te c hniq ue s sufsa nte s e t](https://reader031.vdocuments.mx/reader031/viewer/2022011907/5f4afba953ee040dc63cc14f/html5/thumbnails/2.jpg)
Plan du coursPlan du coursPlan du cours
4 : Expérience utilisateur Web 4 : Expérience utilisateur Web4 : Expérience utilisateur Web
2
![Page 3: a p p l i c at i on(s) We b A rc h i t e c t u re (s) et · 2020-03-02 · Compr é he nsib le , R ob uste R è gle s, c r itè r e s d e suc c è s Te c hniq ue s sufsa nte s e t](https://reader031.vdocuments.mx/reader031/viewer/2022011907/5f4afba953ee040dc63cc14f/html5/thumbnails/3.jpg)
1. Interface utilisateurInterface utilisateurInterface utilisateur
3
![Page 4: a p p l i c at i on(s) We b A rc h i t e c t u re (s) et · 2020-03-02 · Compr é he nsib le , R ob uste R è gle s, c r itè r e s d e suc c è s Te c hniq ue s sufsa nte s e t](https://reader031.vdocuments.mx/reader031/viewer/2022011907/5f4afba953ee040dc63cc14f/html5/thumbnails/4.jpg)
Interface homme-machine (IHM)
4
![Page 5: a p p l i c at i on(s) We b A rc h i t e c t u re (s) et · 2020-03-02 · Compr é he nsib le , R ob uste R è gle s, c r itè r e s d e suc c è s Te c hniq ue s sufsa nte s e t](https://reader031.vdocuments.mx/reader031/viewer/2022011907/5f4afba953ee040dc63cc14f/html5/thumbnails/5.jpg)
Interface utilisateur
5
![Page 6: a p p l i c at i on(s) We b A rc h i t e c t u re (s) et · 2020-03-02 · Compr é he nsib le , R ob uste R è gle s, c r itè r e s d e suc c è s Te c hniq ue s sufsa nte s e t](https://reader031.vdocuments.mx/reader031/viewer/2022011907/5f4afba953ee040dc63cc14f/html5/thumbnails/6.jpg)
Propriétés de la ligne de commande
Command-Line Interface (CLI) :
Codi�éeStricteStatique
6
![Page 7: a p p l i c at i on(s) We b A rc h i t e c t u re (s) et · 2020-03-02 · Compr é he nsib le , R ob uste R è gle s, c r itè r e s d e suc c è s Te c hniq ue s sufsa nte s e t](https://reader031.vdocuments.mx/reader031/viewer/2022011907/5f4afba953ee040dc63cc14f/html5/thumbnails/7.jpg)
Interface utilisateur
7
![Page 8: a p p l i c at i on(s) We b A rc h i t e c t u re (s) et · 2020-03-02 · Compr é he nsib le , R ob uste R è gle s, c r itè r e s d e suc c è s Te c hniq ue s sufsa nte s e t](https://reader031.vdocuments.mx/reader031/viewer/2022011907/5f4afba953ee040dc63cc14f/html5/thumbnails/8.jpg)
Propriétés des interfaces graphiques
Graphical User Interface (GUI) :
Métaphore (bureau)Exploratoire
8
![Page 9: a p p l i c at i on(s) We b A rc h i t e c t u re (s) et · 2020-03-02 · Compr é he nsib le , R ob uste R è gle s, c r itè r e s d e suc c è s Te c hniq ue s sufsa nte s e t](https://reader031.vdocuments.mx/reader031/viewer/2022011907/5f4afba953ee040dc63cc14f/html5/thumbnails/9.jpg)
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
![Page 10: a p p l i c at i on(s) We b A rc h i t e c t u re (s) et · 2020-03-02 · Compr é he nsib le , R ob uste R è gle s, c r itè r e s d e suc c è s Te c hniq ue s sufsa nte s e t](https://reader031.vdocuments.mx/reader031/viewer/2022011907/5f4afba953ee040dc63cc14f/html5/thumbnails/10.jpg)
Propriétés des interfaces « naturelles »
Natural User Interface (NUI) :
Directe (passage de novice à expert facilement)Naturelle / Intuitive
10
![Page 11: a p p l i c at i on(s) We b A rc h i t e c t u re (s) et · 2020-03-02 · Compr é he nsib le , R ob uste R è gle s, c r itè r e s d e suc c è s Te c hniq ue s sufsa nte s e t](https://reader031.vdocuments.mx/reader031/viewer/2022011907/5f4afba953ee040dc63cc14f/html5/thumbnails/11.jpg)
Importance des ordiphones (mobiles)
Plate-forme préférentielle (majorité des utilisateurs)
Utiliser technos Web pour applis mobiles :-)
11
![Page 12: a p p l i c at i on(s) We b A rc h i t e c t u re (s) et · 2020-03-02 · Compr é he nsib le , R ob uste R è gle s, c r itè r e s d e suc c è s Te c hniq ue s sufsa nte s e t](https://reader031.vdocuments.mx/reader031/viewer/2022011907/5f4afba953ee040dc63cc14f/html5/thumbnails/12.jpg)
</interface_utilisateur>
12
![Page 13: a p p l i c at i on(s) We b A rc h i t e c t u re (s) et · 2020-03-02 · Compr é he nsib le , R ob uste R è gle s, c r itè r e s d e suc c è s Te c hniq ue s sufsa nte s e t](https://reader031.vdocuments.mx/reader031/viewer/2022011907/5f4afba953ee040dc63cc14f/html5/thumbnails/13.jpg)
2. Interfaces WebInterfaces WebInterfaces Web
13
![Page 14: a p p l i c at i on(s) We b A rc h i t e c t u re (s) et · 2020-03-02 · Compr é he nsib le , R ob uste R è gle s, c r itè r e s d e suc c è s Te c hniq ue s sufsa nte s e t](https://reader031.vdocuments.mx/reader031/viewer/2022011907/5f4afba953ee040dc63cc14f/html5/thumbnails/14.jpg)
Qualité des interfaces Web
14
![Page 16: a p p l i c at i on(s) We b A rc h i t e c t u re (s) et · 2020-03-02 · Compr é he nsib le , R ob uste R è gle s, c r itè r e s d e suc c è s Te c hniq ue s sufsa nte s e t](https://reader031.vdocuments.mx/reader031/viewer/2022011907/5f4afba953ee040dc63cc14f/html5/thumbnails/16.jpg)
Ergonomie
Expérience utilisateur (User eXperience : UX)Utilisabilité :
apprenabilité (novices)« Fléau » de l’abandon de panierUtilisateurs « PIP » : Pressés, Ignorants et Paresseux
16
![Page 17: a p p l i c at i on(s) We b A rc h i t e c t u re (s) et · 2020-03-02 · Compr é he nsib le , R ob uste R è gle s, c r itè r e s d e suc c è s Te c hniq ue s sufsa nte s e t](https://reader031.vdocuments.mx/reader031/viewer/2022011907/5f4afba953ee040dc63cc14f/html5/thumbnails/17.jpg)
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
![Page 18: a p p l i c at i on(s) We b A rc h i t e c t u re (s) et · 2020-03-02 · Compr é he nsib le , R ob uste R è gle s, c r itè r e s d e suc c è s Te c hniq ue s sufsa nte s e t](https://reader031.vdocuments.mx/reader031/viewer/2022011907/5f4afba953ee040dc63cc14f/html5/thumbnails/18.jpg)
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
![Page 19: a p p l i c at i on(s) We b A rc h i t e c t u re (s) et · 2020-03-02 · Compr é he nsib le , R ob uste R è gle s, c r itè r e s d e suc c è s Te c hniq ue s sufsa nte s e t](https://reader031.vdocuments.mx/reader031/viewer/2022011907/5f4afba953ee040dc63cc14f/html5/thumbnails/19.jpg)
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
![Page 20: a p p l i c at i on(s) We b A rc h i t e c t u re (s) et · 2020-03-02 · Compr é he nsib le , R ob uste R è gle s, c r itè r e s d e suc c è s Te c hniq ue s sufsa nte s e t](https://reader031.vdocuments.mx/reader031/viewer/2022011907/5f4afba953ee040dc63cc14f/html5/thumbnails/20.jpg)
Principes WCAG 2.0
20
![Page 21: a p p l i c at i on(s) We b A rc h i t e c t u re (s) et · 2020-03-02 · Compr é he nsib le , R ob uste R è gle s, c r itè r e s d e suc c è s Te c hniq ue s sufsa nte s e t](https://reader031.vdocuments.mx/reader031/viewer/2022011907/5f4afba953ee040dc63cc14f/html5/thumbnails/21.jpg)
Principe 1 : perceptible
21
![Page 22: a p p l i c at i on(s) We b A rc h i t e c t u re (s) et · 2020-03-02 · Compr é he nsib le , R ob uste R è gle s, c r itè r e s d e suc c è s Te c hniq ue s sufsa nte s e t](https://reader031.vdocuments.mx/reader031/viewer/2022011907/5f4afba953ee040dc63cc14f/html5/thumbnails/22.jpg)
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
![Page 23: a p p l i c at i on(s) We b A rc h i t e c t u re (s) et · 2020-03-02 · Compr é he nsib le , R ob uste R è gle s, c r itè r e s d e suc c è s Te c hniq ue s sufsa nte s e t](https://reader031.vdocuments.mx/reader031/viewer/2022011907/5f4afba953ee040dc63cc14f/html5/thumbnails/23.jpg)
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
![Page 24: a p p l i c at i on(s) We b A rc h i t e c t u re (s) et · 2020-03-02 · Compr é he nsib le , R ob uste R è gle s, c r itè r e s d e suc c è s Te c hniq ue s sufsa nte s e t](https://reader031.vdocuments.mx/reader031/viewer/2022011907/5f4afba953ee040dc63cc14f/html5/thumbnails/24.jpg)
Principe 4 : robuste
4.1 Optimiser la compatibilité avec les agentsutilisateurs actuels et futurs, y compris avec lestechnologies d’assistance.
etc.
24
![Page 25: a p p l i c at i on(s) We b A rc h i t e c t u re (s) et · 2020-03-02 · Compr é he nsib le , R ob uste R è gle s, c r itè r e s d e suc c è s Te c hniq ue s sufsa nte s e t](https://reader031.vdocuments.mx/reader031/viewer/2022011907/5f4afba953ee040dc63cc14f/html5/thumbnails/25.jpg)
Évaluation qualité
Critères Opquast (Open Quality Standards) :https://checklists.opquast.com/fr/qualiteweb/
25
![Page 26: a p p l i c at i on(s) We b A rc h i t e c t u re (s) et · 2020-03-02 · Compr é he nsib le , R ob uste R è gle s, c r itè r e s d e suc c è s Te c hniq ue s sufsa nte s e t](https://reader031.vdocuments.mx/reader031/viewer/2022011907/5f4afba953ee040dc63cc14f/html5/thumbnails/26.jpg)
</qualite_interface>
26
![Page 27: a p p l i c at i on(s) We b A rc h i t e c t u re (s) et · 2020-03-02 · Compr é he nsib le , R ob uste R è gle s, c r itè r e s d e suc c è s Te c hniq ue s sufsa nte s e t](https://reader031.vdocuments.mx/reader031/viewer/2022011907/5f4afba953ee040dc63cc14f/html5/thumbnails/27.jpg)
</interfaces_web>
27
![Page 28: a p p l i c at i on(s) We b A rc h i t e c t u re (s) et · 2020-03-02 · Compr é he nsib le , R ob uste R è gle s, c r itè r e s d e suc c è s Te c hniq ue s sufsa nte s e t](https://reader031.vdocuments.mx/reader031/viewer/2022011907/5f4afba953ee040dc63cc14f/html5/thumbnails/28.jpg)
3. Habillage des pages WebHabillage des pages WebHabillage des pages Web
28
![Page 29: a p p l i c at i on(s) We b A rc h i t e c t u re (s) et · 2020-03-02 · Compr é he nsib le , R ob uste R è gle s, c r itè r e s d e suc c è s Te c hniq ue s sufsa nte s e t](https://reader031.vdocuments.mx/reader031/viewer/2022011907/5f4afba953ee040dc63cc14f/html5/thumbnails/29.jpg)
Découplage structure / présentation
(suite)
29
![Page 30: a p p l i c at i on(s) We b A rc h i t e c t u re (s) et · 2020-03-02 · Compr é he nsib le , R ob uste R è gle s, c r itè r e s d e suc c è s Te c hniq ue s sufsa nte s e t](https://reader031.vdocuments.mx/reader031/viewer/2022011907/5f4afba953ee040dc63cc14f/html5/thumbnails/30.jpg)
Page Web et document HTML
Conversion de documents en une présentation dans lenavigateur.
30
![Page 31: a p p l i c at i on(s) We b A rc h i t e c t u re (s) et · 2020-03-02 · Compr é he nsib le , R ob uste R è gle s, c r itè r e s d e suc c è s Te c hniq ue s sufsa nte s e t](https://reader031.vdocuments.mx/reader031/viewer/2022011907/5f4afba953ee040dc63cc14f/html5/thumbnails/31.jpg)
HTML + CSS
31
![Page 32: a p p l i c at i on(s) We b A rc h i t e c t u re (s) et · 2020-03-02 · Compr é he nsib le , R ob uste R è gle s, c r itè r e s d e suc c è s Te c hniq ue s sufsa nte s e t](https://reader031.vdocuments.mx/reader031/viewer/2022011907/5f4afba953ee040dc63cc14f/html5/thumbnails/32.jpg)
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
![Page 33: a p p l i c at i on(s) We b A rc h i t e c t u re (s) et · 2020-03-02 · Compr é he nsib le , R ob uste R è gle s, c r itè r e s d e suc c è s Te c hniq ue s sufsa nte s e t](https://reader031.vdocuments.mx/reader031/viewer/2022011907/5f4afba953ee040dc63cc14f/html5/thumbnails/33.jpg)
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
![Page 34: a p p l i c at i on(s) We b A rc h i t e c t u re (s) et · 2020-03-02 · Compr é he nsib le , R ob uste R è gle s, c r itè r e s d e suc c è s Te c hniq ue s sufsa nte s e t](https://reader031.vdocuments.mx/reader031/viewer/2022011907/5f4afba953ee040dc63cc14f/html5/thumbnails/34.jpg)
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
![Page 35: a p p l i c at i on(s) We b A rc h i t e c t u re (s) et · 2020-03-02 · Compr é he nsib le , R ob uste R è gle s, c r itè r e s d e suc c è s Te c hniq ue s sufsa nte s e t](https://reader031.vdocuments.mx/reader031/viewer/2022011907/5f4afba953ee040dc63cc14f/html5/thumbnails/35.jpg)
Exemple de page avec un tableau
Logo du site
Titre page
Accueil
LienLienLienLienLien
35
![Page 36: a p p l i c at i on(s) We b A rc h i t e c t u re (s) et · 2020-03-02 · Compr é he nsib le , R ob uste R è gle s, c r itè r e s d e suc c è s Te c hniq ue s sufsa nte s e t](https://reader031.vdocuments.mx/reader031/viewer/2022011907/5f4afba953ee040dc63cc14f/html5/thumbnails/36.jpg)
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
![Page 37: a p p l i c at i on(s) We b A rc h i t e c t u re (s) et · 2020-03-02 · Compr é he nsib le , R ob uste R è gle s, c r itè r e s d e suc c è s Te c hniq ue s sufsa nte s e t](https://reader031.vdocuments.mx/reader031/viewer/2022011907/5f4afba953ee040dc63cc14f/html5/thumbnails/37.jpg)
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
![Page 38: a p p l i c at i on(s) We b A rc h i t e c t u re (s) et · 2020-03-02 · Compr é he nsib le , R ob uste R è gle s, c r itè r e s d e suc c è s Te c hniq ue s sufsa nte s e t](https://reader031.vdocuments.mx/reader031/viewer/2022011907/5f4afba953ee040dc63cc14f/html5/thumbnails/38.jpg)
Programmer en HTML et CSS
38
![Page 39: a p p l i c at i on(s) We b A rc h i t e c t u re (s) et · 2020-03-02 · Compr é he nsib le , R ob uste R è gle s, c r itè r e s d e suc c è s Te c hniq ue s sufsa nte s e t](https://reader031.vdocuments.mx/reader031/viewer/2022011907/5f4afba953ee040dc63cc14f/html5/thumbnails/39.jpg)
Structure archétypale d’une page
Source : http://webstyleguide.com/wsg3/6-page-structure/3-site-design.html
39
![Page 40: a p p l i c at i on(s) We b A rc h i t e c t u re (s) et · 2020-03-02 · Compr é he nsib le , R ob uste R è gle s, c r itè r e s d e suc c è s Te c hniq ue s sufsa nte s e t](https://reader031.vdocuments.mx/reader031/viewer/2022011907/5f4afba953ee040dc63cc14f/html5/thumbnails/40.jpg)
Ou bien, ces temps-ci…
40
![Page 41: a p p l i c at i on(s) We b A rc h i t e c t u re (s) et · 2020-03-02 · Compr é he nsib le , R ob uste R è gle s, c r itè r e s d e suc c è s Te c hniq ue s sufsa nte s e t](https://reader031.vdocuments.mx/reader031/viewer/2022011907/5f4afba953ee040dc63cc14f/html5/thumbnails/41.jpg)
Exemples : CSS Zen Garden
http://www.csszengarden.com/tr/francais/
41
![Page 42: a p p l i c at i on(s) We b A rc h i t e c t u re (s) et · 2020-03-02 · Compr é he nsib le , R ob uste R è gle s, c r itè r e s d e suc c è s Te c hniq ue s sufsa nte s e t](https://reader031.vdocuments.mx/reader031/viewer/2022011907/5f4afba953ee040dc63cc14f/html5/thumbnails/42.jpg)
Design
Outils de Mockup :
Papier + crayon + gommeOutilsHTML + CSS (+ templates)
42
![Page 43: a p p l i c at i on(s) We b A rc h i t e c t u re (s) et · 2020-03-02 · Compr é he nsib le , R ob uste R è gle s, c r itè r e s d e suc c è s Te c hniq ue s sufsa nte s e t](https://reader031.vdocuments.mx/reader031/viewer/2022011907/5f4afba953ee040dc63cc14f/html5/thumbnails/43.jpg)
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
![Page 44: a p p l i c at i on(s) We b A rc h i t e c t u re (s) et · 2020-03-02 · Compr é he nsib le , R ob uste R è gle s, c r itè r e s d e suc c è s Te c hniq ue s sufsa nte s e t](https://reader031.vdocuments.mx/reader031/viewer/2022011907/5f4afba953ee040dc63cc14f/html5/thumbnails/44.jpg)
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
![Page 45: a p p l i c at i on(s) We b A rc h i t e c t u re (s) et · 2020-03-02 · Compr é he nsib le , R ob uste R è gle s, c r itè r e s d e suc c è s Te c hniq ue s sufsa nte s e t](https://reader031.vdocuments.mx/reader031/viewer/2022011907/5f4afba953ee040dc63cc14f/html5/thumbnails/45.jpg)
Caractéristiques de HTML
45
![Page 46: a p p l i c at i on(s) We b A rc h i t e c t u re (s) et · 2020-03-02 · Compr é he nsib le , R ob uste R è gle s, c r itè r e s d e suc c è s Te c hniq ue s sufsa nte s e t](https://reader031.vdocuments.mx/reader031/viewer/2022011907/5f4afba953ee040dc63cc14f/html5/thumbnails/46.jpg)
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
![Page 47: a p p l i c at i on(s) We b A rc h i t e c t u re (s) et · 2020-03-02 · Compr é he nsib le , R ob uste R è gle s, c r itè r e s d e suc c è s Te c hniq ue s sufsa nte s e t](https://reader031.vdocuments.mx/reader031/viewer/2022011907/5f4afba953ee040dc63cc14f/html5/thumbnails/47.jpg)
Les bons artistes copient, les grands
artistes volent
Avantage d’HTML : le code source HTML dispo.
Vive le copier-coller :-)
47
![Page 48: a p p l i c at i on(s) We b A rc h i t e c t u re (s) et · 2020-03-02 · Compr é he nsib le , R ob uste R è gle s, c r itè r e s d e suc c è s Te c hniq ue s sufsa nte s e t](https://reader031.vdocuments.mx/reader031/viewer/2022011907/5f4afba953ee040dc63cc14f/html5/thumbnails/48.jpg)
Contenu adaptatif
Responsive design : prend en compte la taille del’écran automatiquementp. ex.: avec (voir plus loin)Bootstrap
48
![Page 49: a p p l i c at i on(s) We b A rc h i t e c t u re (s) et · 2020-03-02 · Compr é he nsib le , R ob uste R è gle s, c r itè r e s d e suc c è s Te c hniq ue s sufsa nte s e t](https://reader031.vdocuments.mx/reader031/viewer/2022011907/5f4afba953ee040dc63cc14f/html5/thumbnails/49.jpg)
Interactions dynamiques
JavascriptInteractions asynchrones
49
![Page 50: a p p l i c at i on(s) We b A rc h i t e c t u re (s) et · 2020-03-02 · Compr é he nsib le , R ob uste R è gle s, c r itè r e s d e suc c è s Te c hniq ue s sufsa nte s e t](https://reader031.vdocuments.mx/reader031/viewer/2022011907/5f4afba953ee040dc63cc14f/html5/thumbnails/50.jpg)
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
![Page 51: a p p l i c at i on(s) We b A rc h i t e c t u re (s) et · 2020-03-02 · Compr é he nsib le , R ob uste R è gle s, c r itè r e s d e suc c è s Te c hniq ue s sufsa nte s e t](https://reader031.vdocuments.mx/reader031/viewer/2022011907/5f4afba953ee040dc63cc14f/html5/thumbnails/51.jpg)
Principes de CSS
Cascading Style Sheets
Concevoir l’habillage des pages du site / application
51
![Page 52: a p p l i c at i on(s) We b A rc h i t e c t u re (s) et · 2020-03-02 · Compr é he nsib le , R ob uste R è gle s, c r itè r e s d e suc c è s Te c hniq ue s sufsa nte s e t](https://reader031.vdocuments.mx/reader031/viewer/2022011907/5f4afba953ee040dc63cc14f/html5/thumbnails/52.jpg)
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
![Page 53: a p p l i c at i on(s) We b A rc h i t e c t u re (s) et · 2020-03-02 · Compr é he nsib le , R ob uste R è gle s, c r itè r e s d e suc c è s Te c hniq ue s sufsa nte s e t](https://reader031.vdocuments.mx/reader031/viewer/2022011907/5f4afba953ee040dc63cc14f/html5/thumbnails/53.jpg)
Langage à base de règles
Si motif trouvé (sélecteur)alors valeur donnée à attribut/propriété de miseen forme
53
![Page 54: a p p l i c at i on(s) We b A rc h i t e c t u re (s) et · 2020-03-02 · Compr é he nsib le , R ob uste R è gle s, c r itè r e s d e suc c è s Te c hniq ue s sufsa nte s e t](https://reader031.vdocuments.mx/reader031/viewer/2022011907/5f4afba953ee040dc63cc14f/html5/thumbnails/54.jpg)
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
![Page 55: a p p l i c at i on(s) We b A rc h i t e c t u re (s) et · 2020-03-02 · Compr é he nsib le , R ob uste R è gle s, c r itè r e s d e suc c è s Te c hniq ue s sufsa nte s e t](https://reader031.vdocuments.mx/reader031/viewer/2022011907/5f4afba953ee040dc63cc14f/html5/thumbnails/55.jpg)
Di�érents niveaux de proximité
55
![Page 56: a p p l i c at i on(s) We b A rc h i t e c t u re (s) et · 2020-03-02 · Compr é he nsib le , R ob uste R è gle s, c r itè r e s d e suc c è s Te c hniq ue s sufsa nte s e t](https://reader031.vdocuments.mx/reader031/viewer/2022011907/5f4afba953ee040dc63cc14f/html5/thumbnails/56.jpg)
Spéci�cité selon la proximité
Quelles règles s’appliquent, si plusieurs sont dé�nies ?
56
![Page 57: a p p l i c at i on(s) We b A rc h i t e c t u re (s) et · 2020-03-02 · Compr é he nsib le , R ob uste R è gle s, c r itè r e s d e suc c è s Te c hniq ue s sufsa nte s e t](https://reader031.vdocuments.mx/reader031/viewer/2022011907/5f4afba953ee040dc63cc14f/html5/thumbnails/57.jpg)
Spéci�cité du sélecteur
57
![Page 58: a p p l i c at i on(s) We b A rc h i t e c t u re (s) et · 2020-03-02 · Compr é he nsib le , R ob uste R è gle s, c r itè r e s d e suc c è s Te c hniq ue s sufsa nte s e t](https://reader031.vdocuments.mx/reader031/viewer/2022011907/5f4afba953ee040dc63cc14f/html5/thumbnails/58.jpg)
Outils du développeur
sur MDNExaminer et modi�er le CSS
58
![Page 59: a p p l i c at i on(s) We b A rc h i t e c t u re (s) et · 2020-03-02 · Compr é he nsib le , R ob uste R è gle s, c r itè r e s d e suc c è s Te c hniq ue s sufsa nte s e t](https://reader031.vdocuments.mx/reader031/viewer/2022011907/5f4afba953ee040dc63cc14f/html5/thumbnails/59.jpg)
Conception de CSS
Pas toujours simpleAbstractionFrameworks CSS (et Javascript)
ex. :
Couplage templates et CSS
Bootstrap
59
![Page 60: a p p l i c at i on(s) We b A rc h i t e c t u re (s) et · 2020-03-02 · Compr é he nsib le , R ob uste R è gle s, c r itè r e s d e suc c è s Te c hniq ue s sufsa nte s e t](https://reader031.vdocuments.mx/reader031/viewer/2022011907/5f4afba953ee040dc63cc14f/html5/thumbnails/60.jpg)
</habillage_css>
60
![Page 61: a p p l i c at i on(s) We b A rc h i t e c t u re (s) et · 2020-03-02 · Compr é he nsib le , R ob uste R è gle s, c r itè r e s d e suc c è s Te c hniq ue s sufsa nte s e t](https://reader031.vdocuments.mx/reader031/viewer/2022011907/5f4afba953ee040dc63cc14f/html5/thumbnails/61.jpg)
4. Programmation des interfacesProgrammation des interfacesProgrammation des interfaces
61
![Page 62: a p p l i c at i on(s) We b A rc h i t e c t u re (s) et · 2020-03-02 · Compr é he nsib le , R ob uste R è gle s, c r itè r e s d e suc c è s Te c hniq ue s sufsa nte s e t](https://reader031.vdocuments.mx/reader031/viewer/2022011907/5f4afba953ee040dc63cc14f/html5/thumbnails/62.jpg)
Rappel architecture et MVC
62
![Page 63: a p p l i c at i on(s) We b A rc h i t e c t u re (s) et · 2020-03-02 · Compr é he nsib le , R ob uste R è gle s, c r itè r e s d e suc c è s Te c hniq ue s sufsa nte s e t](https://reader031.vdocuments.mx/reader031/viewer/2022011907/5f4afba953ee040dc63cc14f/html5/thumbnails/63.jpg)
Rappel : Architecture multi-tiers
63
![Page 64: a p p l i c at i on(s) We b A rc h i t e c t u re (s) et · 2020-03-02 · Compr é he nsib le , R ob uste R è gle s, c r itè r e s d e suc c è s Te c hniq ue s sufsa nte s e t](https://reader031.vdocuments.mx/reader031/viewer/2022011907/5f4afba953ee040dc63cc14f/html5/thumbnails/64.jpg)
Rappel : Patron MVC
64
![Page 65: a p p l i c at i on(s) We b A rc h i t e c t u re (s) et · 2020-03-02 · Compr é he nsib le , R ob uste R è gle s, c r itè r e s d e suc c è s Te c hniq ue s sufsa nte s e t](https://reader031.vdocuments.mx/reader031/viewer/2022011907/5f4afba953ee040dc63cc14f/html5/thumbnails/65.jpg)
Modèle et Vue
65
![Page 66: a p p l i c at i on(s) We b A rc h i t e c t u re (s) et · 2020-03-02 · Compr é he nsib le , R ob uste R è gle s, c r itè r e s d e suc c è s Te c hniq ue s sufsa nte s e t](https://reader031.vdocuments.mx/reader031/viewer/2022011907/5f4afba953ee040dc63cc14f/html5/thumbnails/66.jpg)
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
![Page 67: a p p l i c at i on(s) We b A rc h i t e c t u re (s) et · 2020-03-02 · Compr é he nsib le , R ob uste R è gle s, c r itè r e s d e suc c è s Te c hniq ue s sufsa nte s e t](https://reader031.vdocuments.mx/reader031/viewer/2022011907/5f4afba953ee040dc63cc14f/html5/thumbnails/67.jpg)
Modéle états - transitions
67
![Page 68: a p p l i c at i on(s) We b A rc h i t e c t u re (s) et · 2020-03-02 · Compr é he nsib le , R ob uste R è gle s, c r itè r e s d e suc c è s Te c hniq ue s sufsa nte s e t](https://reader031.vdocuments.mx/reader031/viewer/2022011907/5f4afba953ee040dc63cc14f/html5/thumbnails/68.jpg)
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
![Page 69: a p p l i c at i on(s) We b A rc h i t e c t u re (s) et · 2020-03-02 · Compr é he nsib le , R ob uste R è gle s, c r itè r e s d e suc c è s Te c hniq ue s sufsa nte s e t](https://reader031.vdocuments.mx/reader031/viewer/2022011907/5f4afba953ee040dc63cc14f/html5/thumbnails/69.jpg)
Un état de l’application
Une page / vue, représente l’état courant
69
![Page 70: a p p l i c at i on(s) We b A rc h i t e c t u re (s) et · 2020-03-02 · Compr é he nsib le , R ob uste R è gle s, c r itè r e s d e suc c è s Te c hniq ue s sufsa nte s e t](https://reader031.vdocuments.mx/reader031/viewer/2022011907/5f4afba953ee040dc63cc14f/html5/thumbnails/70.jpg)
Hypermedia As The Engine Of
Application State (HATEOAS)Une application = diagramme d’états �niTransitions = hyperliens sur lesquels on clique (et autres widgets)
70
![Page 71: a p p l i c at i on(s) We b A rc h i t e c t u re (s) et · 2020-03-02 · Compr é he nsib le , R ob uste R è gle s, c r itè r e s d e suc c è s Te c hniq ue s sufsa nte s e t](https://reader031.vdocuments.mx/reader031/viewer/2022011907/5f4afba953ee040dc63cc14f/html5/thumbnails/71.jpg)
Exemple Application Web
Point départ :
( )https://twitter.com/jack/status/20
71
![Page 72: a p p l i c at i on(s) We b A rc h i t e c t u re (s) et · 2020-03-02 · Compr é he nsib le , R ob uste R è gle s, c r itè r e s d e suc c è s Te c hniq ue s sufsa nte s e t](https://reader031.vdocuments.mx/reader031/viewer/2022011907/5f4afba953ee040dc63cc14f/html5/thumbnails/72.jpg)
Diagramme états Web app Twitter
1 transition en entrée / 32 transitions en sortie
72
![Page 73: a p p l i c at i on(s) We b A rc h i t e c t u re (s) et · 2020-03-02 · Compr é he nsib le , R ob uste R è gle s, c r itè r e s d e suc c è s Te c hniq ue s sufsa nte s e t](https://reader031.vdocuments.mx/reader031/viewer/2022011907/5f4afba953ee040dc63cc14f/html5/thumbnails/73.jpg)
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
![Page 74: a p p l i c at i on(s) We b A rc h i t e c t u re (s) et · 2020-03-02 · Compr é he nsib le , R ob uste R è gle s, c r itè r e s d e suc c è s Te c hniq ue s sufsa nte s e t](https://reader031.vdocuments.mx/reader031/viewer/2022011907/5f4afba953ee040dc63cc14f/html5/thumbnails/74.jpg)
Framework Web MVC
ModèleVueContrôleur
Le contrôleur gère les transitions HATEOAS
74
![Page 75: a p p l i c at i on(s) We b A rc h i t e c t u re (s) et · 2020-03-02 · Compr é he nsib le , R ob uste R è gle s, c r itè r e s d e suc c è s Te c hniq ue s sufsa nte s e t](https://reader031.vdocuments.mx/reader031/viewer/2022011907/5f4afba953ee040dc63cc14f/html5/thumbnails/75.jpg)
</hateoas>
75
![Page 76: a p p l i c at i on(s) We b A rc h i t e c t u re (s) et · 2020-03-02 · Compr é he nsib le , R ob uste R è gle s, c r itè r e s d e suc c è s Te c hniq ue s sufsa nte s e t](https://reader031.vdocuments.mx/reader031/viewer/2022011907/5f4afba953ee040dc63cc14f/html5/thumbnails/76.jpg)
Dans Symfony
76
![Page 77: a p p l i c at i on(s) We b A rc h i t e c t u re (s) et · 2020-03-02 · Compr é he nsib le , R ob uste R è gle s, c r itè r e s d e suc c è s Te c hniq ue s sufsa nte s e t](https://reader031.vdocuments.mx/reader031/viewer/2022011907/5f4afba953ee040dc63cc14f/html5/thumbnails/77.jpg)
Modèle
Classes PHPDoctrine : typage des attributsBase de données…
77
![Page 78: a p p l i c at i on(s) We b A rc h i t e c t u re (s) et · 2020-03-02 · Compr é he nsib le , R ob uste R è gle s, c r itè r e s d e suc c è s Te c hniq ue s sufsa nte s e t](https://reader031.vdocuments.mx/reader031/viewer/2022011907/5f4afba953ee040dc63cc14f/html5/thumbnails/78.jpg)
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
![Page 79: a p p l i c at i on(s) We b A rc h i t e c t u re (s) et · 2020-03-02 · Compr é he nsib le , R ob uste R è gle s, c r itè r e s d e suc c è s Te c hniq ue s sufsa nte s e t](https://reader031.vdocuments.mx/reader031/viewer/2022011907/5f4afba953ee040dc63cc14f/html5/thumbnails/79.jpg)
Routage vers les méthodes du
contrôleur/** * @Route("/todo/show/{id}", name = "todo_show") * @Method("GET") */ public function todoShow($id) { ... }
79
![Page 80: a p p l i c at i on(s) We b A rc h i t e c t u re (s) et · 2020-03-02 · Compr é he nsib le , R ob uste R è gle s, c r itè r e s d e suc c è s Te c hniq ue s sufsa nte s e t](https://reader031.vdocuments.mx/reader031/viewer/2022011907/5f4afba953ee040dc63cc14f/html5/thumbnails/80.jpg)
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
![Page 81: a p p l i c at i on(s) We b A rc h i t e c t u re (s) et · 2020-03-02 · Compr é he nsib le , R ob uste R è gle s, c r itè r e s d e suc c è s Te c hniq ue s sufsa nte s e t](https://reader031.vdocuments.mx/reader031/viewer/2022011907/5f4afba953ee040dc63cc14f/html5/thumbnails/81.jpg)
</programmation>
81
![Page 82: a p p l i c at i on(s) We b A rc h i t e c t u re (s) et · 2020-03-02 · Compr é he nsib le , R ob uste R è gle s, c r itè r e s d e suc c è s Te c hniq ue s sufsa nte s e t](https://reader031.vdocuments.mx/reader031/viewer/2022011907/5f4afba953ee040dc63cc14f/html5/thumbnails/82.jpg)
5. Technologies pour le projetTechnologies pour le projetTechnologies pour le projet
82
![Page 83: a p p l i c at i on(s) We b A rc h i t e c t u re (s) et · 2020-03-02 · Compr é he nsib le , R ob uste R è gle s, c r itè r e s d e suc c è s Te c hniq ue s sufsa nte s e t](https://reader031.vdocuments.mx/reader031/viewer/2022011907/5f4afba953ee040dc63cc14f/html5/thumbnails/83.jpg)
Conception des gabarits et CSS
83
![Page 84: a p p l i c at i on(s) We b A rc h i t e c t u re (s) et · 2020-03-02 · Compr é he nsib le , R ob uste R è gle s, c r itè r e s d e suc c è s Te c hniq ue s sufsa nte s e t](https://reader031.vdocuments.mx/reader031/viewer/2022011907/5f4afba953ee040dc63cc14f/html5/thumbnails/84.jpg)
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
![Page 85: a p p l i c at i on(s) We b A rc h i t e c t u re (s) et · 2020-03-02 · Compr é he nsib le , R ob uste R è gle s, c r itè r e s d e suc c è s Te c hniq ue s sufsa nte s e t](https://reader031.vdocuments.mx/reader031/viewer/2022011907/5f4afba953ee040dc63cc14f/html5/thumbnails/85.jpg)
Modèle de page souhaité<html> <head> </head> <body> NAVIGATION MENU (COLONNE DE GAUCHE) CONTENU PRINCIPAL BAS DE PAGE </body> </html>
85
![Page 86: a p p l i c at i on(s) We b A rc h i t e c t u re (s) et · 2020-03-02 · Compr é he nsib le , R ob uste R è gle s, c r itè r e s d e suc c è s Te c hniq ue s sufsa nte s e t](https://reader031.vdocuments.mx/reader031/viewer/2022011907/5f4afba953ee040dc63cc14f/html5/thumbnails/86.jpg)
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
![Page 87: a p p l i c at i on(s) We b A rc h i t e c t u re (s) et · 2020-03-02 · Compr é he nsib le , R ob uste R è gle s, c r itè r e s d e suc c è s Te c hniq ue s sufsa nte s e t](https://reader031.vdocuments.mx/reader031/viewer/2022011907/5f4afba953ee040dc63cc14f/html5/thumbnails/87.jpg)
Feuille de style CSS#navigation { ... } #menu { float: left; ... } #main { ... } #footer { ... }
87
![Page 88: a p p l i c at i on(s) We b A rc h i t e c t u re (s) et · 2020-03-02 · Compr é he nsib le , R ob uste R è gle s, c r itè r e s d e suc c è s Te c hniq ue s sufsa nte s e t](https://reader031.vdocuments.mx/reader031/viewer/2022011907/5f4afba953ee040dc63cc14f/html5/thumbnails/88.jpg)
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
![Page 89: a p p l i c at i on(s) We b A rc h i t e c t u re (s) et · 2020-03-02 · Compr é he nsib le , R ob uste R è gle s, c r itè r e s d e suc c è s Te c hniq ue s sufsa nte s e t](https://reader031.vdocuments.mx/reader031/viewer/2022011907/5f4afba953ee040dc63cc14f/html5/thumbnails/89.jpg)
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
![Page 90: a p p l i c at i on(s) We b A rc h i t e c t u re (s) et · 2020-03-02 · Compr é he nsib le , R ob uste R è gle s, c r itè r e s d e suc c è s Te c hniq ue s sufsa nte s e t](https://reader031.vdocuments.mx/reader031/viewer/2022011907/5f4afba953ee040dc63cc14f/html5/thumbnails/90.jpg)
</conception>
90
![Page 91: a p p l i c at i on(s) We b A rc h i t e c t u re (s) et · 2020-03-02 · Compr é he nsib le , R ob uste R è gle s, c r itè r e s d e suc c è s Te c hniq ue s sufsa nte s e t](https://reader031.vdocuments.mx/reader031/viewer/2022011907/5f4afba953ee040dc63cc14f/html5/thumbnails/91.jpg)
CSS avec Bootstrap
91
![Page 92: a p p l i c at i on(s) We b A rc h i t e c t u re (s) et · 2020-03-02 · Compr é he nsib le , R ob uste R è gle s, c r itè r e s d e suc c è s Te c hniq ue s sufsa nte s e t](https://reader031.vdocuments.mx/reader031/viewer/2022011907/5f4afba953ee040dc63cc14f/html5/thumbnails/92.jpg)
Utilisation d’un framework de
présentation CSS
Standardisation du lookAdaptatifGrille pour le positionnement graphiqueIntégration avec Twig / Symfony
92
![Page 94: a p p l i c at i on(s) We b A rc h i t e c t u re (s) et · 2020-03-02 · Compr é he nsib le , R ob uste R è gle s, c r itè r e s d e suc c è s Te c hniq ue s sufsa nte s e t](https://reader031.vdocuments.mx/reader031/viewer/2022011907/5f4afba953ee040dc63cc14f/html5/thumbnails/94.jpg)
Système de grille
Mise en page basée sur une grille de 12 colonnes
94
![Page 95: a p p l i c at i on(s) We b A rc h i t e c t u re (s) et · 2020-03-02 · Compr é he nsib le , R ob uste R è gle s, c r itè r e s d e suc c è s Te c hniq ue s sufsa nte s e t](https://reader031.vdocuments.mx/reader031/viewer/2022011907/5f4afba953ee040dc63cc14f/html5/thumbnails/95.jpg)
Exemples
exemples, dans la documentation Bootstrapexemples sur Start Bootstrap
95
![Page 96: a p p l i c at i on(s) We b A rc h i t e c t u re (s) et · 2020-03-02 · Compr é he nsib le , R ob uste R è gle s, c r itè r e s d e suc c è s Te c hniq ue s sufsa nte s e t](https://reader031.vdocuments.mx/reader031/viewer/2022011907/5f4afba953ee040dc63cc14f/html5/thumbnails/96.jpg)
Thèmes
Feuille de syle additionnelleThèmes sur Start Bootstrap
96
![Page 97: a p p l i c at i on(s) We b A rc h i t e c t u re (s) et · 2020-03-02 · Compr é he nsib le , R ob uste R è gle s, c r itè r e s d e suc c è s Te c hniq ue s sufsa nte s e t](https://reader031.vdocuments.mx/reader031/viewer/2022011907/5f4afba953ee040dc63cc14f/html5/thumbnails/97.jpg)
</bootstrap>
97
![Page 98: a p p l i c at i on(s) We b A rc h i t e c t u re (s) et · 2020-03-02 · Compr é he nsib le , R ob uste R è gle s, c r itè r e s d e suc c è s Te c hniq ue s sufsa nte s e t](https://reader031.vdocuments.mx/reader031/viewer/2022011907/5f4afba953ee040dc63cc14f/html5/thumbnails/98.jpg)
</technos_projet>
98
![Page 99: a p p l i c at i on(s) We b A rc h i t e c t u re (s) et · 2020-03-02 · Compr é he nsib le , R ob uste R è gle s, c r itè r e s d e suc c è s Te c hniq ue s sufsa nte s e t](https://reader031.vdocuments.mx/reader031/viewer/2022011907/5f4afba953ee040dc63cc14f/html5/thumbnails/99.jpg)
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
![Page 100: a p p l i c at i on(s) We b A rc h i t e c t u re (s) et · 2020-03-02 · Compr é he nsib le , R ob uste R è gle s, c r itè r e s d e suc c è s Te c hniq ue s sufsa nte s e t](https://reader031.vdocuments.mx/reader031/viewer/2022011907/5f4afba953ee040dc63cc14f/html5/thumbnails/100.jpg)
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
![Page 101: a p p l i c at i on(s) We b A rc h i t e c t u re (s) et · 2020-03-02 · Compr é he nsib le , R ob uste R è gle s, c r itè r e s d e suc c è s Te c hniq ue s sufsa nte s e t](https://reader031.vdocuments.mx/reader031/viewer/2022011907/5f4afba953ee040dc63cc14f/html5/thumbnails/101.jpg)
Ensuite…Ensuite…Ensuite…
101
![Page 102: a p p l i c at i on(s) We b A rc h i t e c t u re (s) et · 2020-03-02 · Compr é he nsib le , R ob uste R è gle s, c r itè r e s d e suc c è s Te c hniq ue s sufsa nte s e t](https://reader031.vdocuments.mx/reader031/viewer/2022011907/5f4afba953ee040dc63cc14f/html5/thumbnails/102.jpg)
Tout de suite, séance TP n°4
102
![Page 103: a p p l i c at i on(s) We b A rc h i t e c t u re (s) et · 2020-03-02 · Compr é he nsib le , R ob uste R è gle s, c r itè r e s d e suc c è s Te c hniq ue s sufsa nte s e t](https://reader031.vdocuments.mx/reader031/viewer/2022011907/5f4afba953ee040dc63cc14f/html5/thumbnails/103.jpg)
Hors-présentiel d’ici au prochain cours
3 h à caser dans la semaine
103
![Page 104: a p p l i c at i on(s) We b A rc h i t e c t u re (s) et · 2020-03-02 · Compr é he nsib le , R ob uste R è gle s, c r itè r e s d e suc c è s Te c hniq ue s sufsa nte s e t](https://reader031.vdocuments.mx/reader031/viewer/2022011907/5f4afba953ee040dc63cc14f/html5/thumbnails/104.jpg)
PostfacePostfacePostface
104
![Page 105: a p p l i c at i on(s) We b A rc h i t e c t u re (s) et · 2020-03-02 · Compr é he nsib le , R ob uste R è gle s, c r itè r e s d e suc c è s Te c hniq ue s sufsa nte s e t](https://reader031.vdocuments.mx/reader031/viewer/2022011907/5f4afba953ee040dc63cc14f/html5/thumbnails/105.jpg)
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
![Page 106: a p p l i c at i on(s) We b A rc h i t e c t u re (s) et · 2020-03-02 · Compr é he nsib le , R ob uste R è gle s, c r itè r e s d e suc c è s Te c hniq ue s sufsa nte s e t](https://reader031.vdocuments.mx/reader031/viewer/2022011907/5f4afba953ee040dc63cc14f/html5/thumbnails/106.jpg)
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