Architecture(s)etapplication(s)Web

CSC4101-ExpérienceutilisateurWeb09/10/2018

1

Planducours

CM4:ExpérienceutilisateurWeb

2

1. Interfaceutilisateur

3

Interfacehomme-machine(IHM)

4

Interfaceutilisateur

5

PropriétésdelalignedecommandeCommand-LineInterface(CLI):

CodifiéeStricteStatique

6

Interfaceutilisateur

7

PropriétésdesinterfacesgraphiquesGraphicalUserInterface(GUI):

Métaphore(bureau)Exploratoire

8

Interfaceutilisateur

Yourbrowserdoesnotcurrentlyrecognizeanyofthevideoformatsavailable.ClickheretovisitourfrequentlyaskedquestionsaboutHTML5video.

Vidéo parUserExperiencesWorkshttps://www.youtube.com/watch?v=gc9NpYrbZgQ

9

Propriétésdesinterfaces«naturelles»NaturalUserInterface(NUI):

Directe(passagedenoviceàexpertfacilement)Naturelle/Intuitive

10

Importancedesordiphones(mobiles)Plate-formepréférentielle(majoritédesutilisateurs)

UtilisertechnosWebpourapplismobiles:-)

11

2. InterfacesWeb

12

Interfaced’uneapplicationWeb

13

Ensembledevues/écrans/pagesNaviguerdansunearborescencedepages/vues/écrans/dialoguesTrouverdel’informationauseind’unepageWidgetspourinteraction:composantsd’interfacegraphique(boutons,listes,etc.)

14

UnétatUnepageWebestunétatdel’application

15

HypermediaAsTheEngineOfApplicationState(HATEOAS)Uneapplication=diagrammed’étatsfiniTransitions=hyperlienssurlesquelsonclique(etautreswidgets)

16

ExempleApplicationWebPointdépart:

( )https://twitter.com/jack/status/20

17

DiagrammeétatsWebappTwitter1transitionenentrée/32transitionsensortie

18

InteractionsavecutilisateurAffichagedepages(lecturesurdesressources)Invocationdeméthodessurdesressourcesdédiées(ycomprisécriture)Invocationd’APIspourinteractionsfines(lecture/écriture)

19

QualitédesinterfacesWeb

20

ErgonomieExpérienceutilisateur(UsereXperience:UX)Utilisabilité:apprenabilité(novices)

«Fléau»del’abandondepanierUtilisateurs«PIP»:Pressés,IgnorantsetParesseux

21

PortabilitéLeWebestlaplate-formeuniverselle.

Standardisation=portabilité(merciHTML5)Applicationsmobiles:DéveloppéenHTML«Compilé»entoolkitnatif(ex. )

Attention:prédominencedeChromedeGoogle…BestviewedinChrome

ApacheCordova

22

AccessibilitéVidéo:

Yourbrowserdoesnotcurrentlyrecognizeanyofthevideoformatsavailable.ClickheretovisitourfrequentlyaskedquestionsaboutHTML5video.

Source:article del’Obs

.

Commentlesaveuglesutilisent-ilsinternet?

23

Obligations

Différentsniveauxdepriorité/niveauxdeconformitéàlanormePrincipes:Perceptible,Utilisable,Compréhensible,RobusteRègles,critèresdesuccèsTechniquessuffisantesettechniquesrecommandées

Règlespourl’accessibilitédescontenusWeb(WCAG)2.0

RéférentielGénérald’AccessibilitédesAdministrations(RGAA)Version32017

24

PrincipesWCAG2.0

25

Principe1:perceptible1.1Proposerdeséquivalentstextuelsàtoutcontenunontextuelquipourraalorsêtreprésentésousd’autresformesselonlesbesoinsdel’utilisateur:grandscaractères,braille,synthèsevocale,symbolesoulangagesimplifié.1.2Proposerdesversionsderemplacementauxmédiatemporels.1.3Créeruncontenuquipuisseêtreprésentédedifférentesmanièressansperted’informationnidestructure(parexempleavecunemiseenpagesimplifiée).1.4Faciliterlaperceptionvisuelleetauditivedu 26

Principe2:utilisable2.1Rendretouteslesfonctionnalitésaccessiblesauclavier.2.2Laisseràl’utilisateursuffisammentdetempspourlireetutiliserlecontenu.2.3Nepasconcevoirdecontenususceptibledeprovoquerdescrises.2.4Fourniràl’utilisateurdesélémentsd’orientationpournaviguer,trouverlecontenuetsesituerdanslesite.

27

Principe3:compréhensible3.1Rendrelecontenutextuellisibleetcompréhensible.3.2Faireensortequelespagesapparaissentetfonctionnentdemanièreprévisible.3.3Aiderl’utilisateuràéviteretàcorrigerleserreursdesaisie.

28

Principe4:robuste4.1Optimiserlacompatibilitéaveclesagentsutilisateursactuelsetfuturs,ycomprisaveclestechnologiesd’assistance.

etc.

29

ÉvaluationqualitéCritèresOpquast(OpenQualityStandards):https://checklists.opquast.com/oqs-v3/

30

3. HabillagedespagesWeb

31

Découplagestructure/présentation

32

PageWebetdocumentHTMLConversiondedocumentsenuneprésentationdansle

navigateur.

33

HTML+CSS

34

Une«pageWeb»:

undocumentHTML(maître)plusdesimages,boutons,menus,etc.(éventuellementexternes)

Undocument(HTML):

unarbrederubriques,sous-rubriques,etc.

Structuredessourcesdespages

ArbredebalisesHTML(DOM:DocumentObject

Model)

35

Structured’unepageaffichéeUnepageaffichéeen2D(ouimprimée):

desboîtesquicontiennentd’autresboîtesboîtesquicontiennenttexteouimages,etc.textequicontientdescaractèrescaractèrequicontiennentdespixels…

36

ArbreDOMetrendudespagesLenavigateur(moteurderendu)convertit:

ArbreDOM:DocumentObjectModel

en:

Arbred’élémentsàafficherRèglesdeconversionPrédéfinies(navigateur)Programmables(CSS)

37

Exempledepageavecuntableau

Logodusite

TitrepageUnemise-en-pageavecen-tête,barredenavigationetsectiondebas-de-page.Leslignes1,2et4dutableaucréentrespectivementl'en-tête,labarredenavigationetlebas-de-page,etcontiennentuneseulecelluledetableauchacune.

Laligne3dutableaucontient3cellulesquicréentlacolonnedemenu(gauche),lacolonnedecontenu(milieu)etlacollonne

Accueil

LienLienLienLienLien

38

StructureHTMLcorrespondante?<table><tr><!--SECTIONEN-TETE--><tdcolspan="3"><h3>Logodusite</h3></td></tr><tr><!--SECTIONBARRENAVIGATION==--><tdcolspan="3"><ahref="#">Accueil</a></td></tr><tr><tdwidth="20%"><!--COLONNEGAUCHE(MENU)==--><ahref="#">Lien</a><br><ahref="#">Lien</a><br></td><tdwidth="55%"><!--COLONNEMILIEU(CONTENU)==--><h4>Titrepage</h4>Unemise-en-pageavecen-tête,barredenavigationetsectionde...</td><tdwidth="25%"</td></tr><tr><!--SECTIONPIED-DE-PAGE==-->

39

Fairemieux!Structurerlapageen6sections,parexemple,avecdesbalises<div>PositionnerlecontenudechaquesectionavecdesrèglesCSS.Permetdefaireévoluerlamiseenpage,parexemplesousformelinéaireetnonplustabulaire,etc.

40

ProgrammerenHTMLetCSS

41

Structurearchétypaled’unepage

Source:http://webstyleguide.com/wsg3/6-page-structure/3-site-design.html

42

Oubien,cestemps-ci…

43

Exemples:CSSZenGardenhttp://www.csszengarden.com/tr/francais/

44

DesignOutilsdeMockup:

Papier+crayon+gommeOutilsHTML+CSS(+templates)

45

GuidesdestyleChercher«webinterfacestyleguide»survotremoteurderecherchepréféréFairecommesurlesapplismobiles:Android:Materialdesign:

iOSHumanInterfaceGuidelines:https://developer.android.com/design/index.html

https://developer.apple.com/ios/human-interface-guidelines/

46

Inspiration/prêtàl’emploi:récompensespourle

Webdesign:sélection

dedesigns

Marché:

:thèmesprêtsàl’emploi

https://www.awwwards.com/

http://www.webdesign-inspiration.com/

https://themeforest.net/

47

CaractéristiquesdeHTML

48

HTML5Tout(oupresque)estpossibleentermed’interfaced’applications.Ycomprisl’accèsàdeszonesdegraphismelibreetl’intégrationdespériphériquesdutéléphone/ordinateur

49

Lesbonsartistescopient,lesgrandsartistesvolent

Avantaged’HTML:lecodesourceHTMLdispo.

Vivelecopier-coller:-)

50

ContenuadaptatifResponsivedesign:prendencomptelatailledel’écranautomatiquementp.ex.:avec (voirplusloin)Bootstrap

51

InteractionsdynamiquesJavascriptInteractionsasynchrones

52

InteractionsavecordiphonemobileApplicationallantplusloinquel’affichageetlasaisiedetexte:accèsàtouteslesfonctionsduterminalmobiledepuislenavigateurWeb

https://www.w3.org/Mobile/mobile-web-app-state/

53

PrincipesdeCSSCascadingStyleSheets

Concevoirl’habillagedespagesdusite/application

54

CascadeModèle«objet»particulier

LangagedéclaratifCombinaisondeplusieursfeuillesavecpriorités«Héritage»depropriétésdesparents

Factorisationdemotifs:

DRY–don’trepeatyourself

55

LangageàbasederèglesSimotiftrouvé(sélecteur)alorsvaleurdonnéeà

attribut/propriétédemiseenforme

56

Exemplebody{padding-left:11em;font-family:Georgia,"TimesNewRoman",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}

57

Différentsniveauxdeproximité

58

SpécificitéselonlaproximitéQuellesrègless’appliquent,siplusieurssontdéfinies?

59

Spécificitédusélecteur

60

OutilsdudéveloppeursurMDNExamineretmodifierleCSS

61

ConceptiondeCSSPastoujourssimpleAbstractionFrameworksCSS(etJavascript)ex.:

CouplagetemplatesetCSS

Bootstrap

62

4. Programmationdesinterfaces

63

PatronMVC

64

Rappel:Architecturemulti-tiers

65

Rappel:PatronMVC

66

ModèleetVue

67

FrameworkWebMVCModèleVueContrôleur

LecontrôleurgèrelestransitionsHATEOAS

68

Pilotedesinteractions:leContrôleurContrôleur:coordonnelestransitionsentrevues,etlesentréesdel’utilisateur,enfonctiondel’étatdumodèleVues(pages)Modèle

Objectif:programmerlesvuesmaisaussilecontrôleur,au-dessusdesmécanismesdeHTMLetHTTP,pour

offrirunebonneexpérienceutilisateur.

69

DansSymfony

70

ModèleClassesPHPDoctrine:typagedesattributsBasededonnées…

71

VuesUnereprésentationdelaressourcedemandéedansla

requêteduclient.

argumentsderender():

injectésdanslegabaritTwig

$this->render('frontoffice/programmationshow.html.twig',['id'=>$id,'programmation'=>$programmation]);

72

Routageverslesméthodesducontrôleur

/***@Route("/front/programmation/{id}",name="front_programmationshow")*@Method("GET")*/publicfunctionprogrammationShow($id){...}

73

CohérencedesroutesUtilisationdesroutespourlestransitionsdans

l’application(nommées),aulieudeschemins«endur».<ahref="{{path('front_programmationshow',{'id':programmation.id})}}">détails</a>

74

5. Technologiespourleprojet

75

Gabarits,sectionsetCSS

76

ConcevoirlesgabaritsdespagesConceptionparallèle:

desblocsdesgabaritsHTMLdessections<div>qu’ilscontiennent(identifiantsouclasses)desmisesenforme

Mêmeconventiondenommage

77

Modèledepagesouhaité<html><head></head><body>NAVIGATION

MENU(COLONNEDEGAUCHE)

CONTENUPRINCIPAL

BASDEPAGE</body></html>

78

Structuresémantique<body><divid="navigation">(NAVIGATION)</div><divid="menu">(MENURUBRIQUES)</div><divid="main">(CONTENUPRINCIPAL)</div><divid="footer">(BASDEPAGE)</div></body>

79

FeuilledestyleCSS#navigation{...}

#menu{float:left;...}

#main{...}

#footer{...}

80

GabaritTwig{%blockbody%}<body><divid="navigation">{%blocknavigation%}{%endblock%}{#navigation#}</div><divid="menu">{%blockmenu%}{%endblock%}{#menu#}</div><divid="main">{%blockmain%}<h1>{{Message}}</h1>{%endblock%}{#main#}</div><divid="footer">{%blockfooter%}{%endblock%}{#footer#}</div></body>{%endblock%}{#body#}

81

Standardisation/SpécialisationSpécialisationdansunesous-sectionouunepagedecertainsélémentsdestructureoudeprésentation

héritagedesgabarits:redéfinitionducontenudeblocs

cascadedesfeuillesdestyleCSS:redéfinitiondelamiseenforme

{%blockmain%}...{%endblock%}

#main{background-color:lightblue;}

82

Bootstrap

83

Utilisationd’unframeworkdeprésentationCSS

StandardisationdulookAdaptatifGrillepourlepositionnementgraphiqueIntégrationavecTwig/Symfony

84

BootstrapFrameworkCSS(+JS)

http://getbootstrap.com/

85

Exemplesexemples

86

SystèmedegrilleMiseenpagebaséesurunegrillede12colonnes

87

TakeawayStructure!=présentationRôledeCSSPrincipedesurchargedesfeuillesContrôleursMVCpourgérerlecomportementHypertextedel’interfaceWeb(HATEOS)Accessibilité

88

Récap[X]HTTP(GET)[X]PHP[X]Doctrine[X]RouteurSymfony[X]HTML[X]Twig[X]CSS

Toutcequ’ilfautpourunjolisiteWebdynamiqueenlectureseule;-)

89

Ensuite…

90

Toutdesuite,séanceTPn°4

91

Hors-présentield’iciauprochaincours3hàcaserdanslasemaine

92

Postface

93

CréditsillustrationsetvidéosVidéo parUserExperiencesWorksvidéo: (Lenouvelobs)Image«HTML+CSS»empruntéeau«CSSTutorial»deAvinashMalhotra:

Diagrammes«Specificityrankingbyproximity»,«Proximalspecificityinaction…»et«Specificityrankingbyselectortype»empruntésàparErnieSimpson,akaTheBigErns:

DiagrammedegrilledemiseenpagedeBootstrapempruntéeàparMauriceChavelli

Illustration« »,supposémmentdeBruceSterling

https://www.youtube.com/watch?v=gc9NpYrbZgQCommentlesaveuglesutilisent-ilsinternet?

http://tutorial.techaltum.com/css.html

http://cssway.thebigerns.com/special/master-item-styles/BootstrapdeTwitter:un

kitCSSetplus!EnjoyWebsurfing

94

CopyrightDocumentpropriétédesesauteursetdeTélécomSudParis(saufexceptionsexplicitementmentionnées).Réservéàl’utilisationpourlaformationinitialeàTélécomSudParis.

95