Plan de la séquence

Interface homme-machine (IHM)

Interface utilisateur

Propriétés de la ligne de commande

Command-Line Interface (CLI) :

• Codifiée
• Stricte
• Statique

Interface utilisateur

Propriétés des interfaces graphiques

Graphical User Interface (GUI) :

• Métaphore (bureau)
• Exploratoire

Interfaces de 0 à 77 ans

Propriétés des interfaces « naturelles »

Natural User Interface (NUI) :

• Directe (passage de novice à expert facilement)
• Naturelle / Intuitive

Importance des ordiphones (mobiles)

Plate-forme préférentielle (majorité des utilisateurs)

Utiliser technos Web pour applis mobiles :-)

Plan de la séquence

Ce qu’il ne faut pas faire

CW NSFW : https://userinyerface.com/

Ergonomie

• Expérience utilisateur (User eXperience : UX)
• Utilisabilité :
  • apprenabilité (novices)
• « Fléau » de l’abandon de panier
• Utilisateurs « PIP » : Pressés, Ignorants et Paresseux

Portabilité

Le Web est la plate-forme universelle.

• Standardisation = portabilité (merci HTML5)
• Applications mobiles :
  • Développé en HTML
  • « Compilé » en toolkit natif (ex. Apache Cordova)
• Attention : prédominence de Chrome de Google… Best viewed in Chrome

Accessibilité

Voir aussi Usage plage braille et synthèse vocale par personne non voyante de https://design.numerique.gouv.fr/.

Obligations

• Règles pour l’accessibilité des contenus Web (WCAG) 2.1
  • Différents niveaux de priorité / niveaux de conformité à la norme
  • Principes : Perceptible, Utilisable, Compréhensible, Robuste
  • Règles, critères de succès
  • Techniques suffisantes et techniques recommandées
• Référentiel Général d’Amélioration de l’Accessibilité (RGAA) version 4.1.2 (avril 2023)

Principe 1 : perceptible

• 1.1 Proposer des équivalents textuels à tout contenu non textuel qui pourra alors être présenté sous d’autres formes selon les besoins de l’utilisateur : grands caractères, braille, synthèse vocale, symboles ou langage simplifié.
• 1.2 Proposer des versions de remplacement aux média temporels.
• 1.3 Créer un contenu qui puisse être présenté de différentes manières sans perte d’information ni de structure (par exemple avec une mise en page simplifiée).
• 1.4 Faciliter la perception visuelle et auditive du contenu par l’utilisateur, notamment en séparant le premier plan de l’arrière-plan.

Principe 2 : utilisable

• 2.1 Rendre toutes les fonctionnalités accessibles au clavier.
• 2.2 Laisser à l’utilisateur suffisamment de temps pour lire et utiliser le contenu.
• 2.3 Ne pas concevoir de contenu susceptible de provoquer des crises.
• 2.4 Fournir à l’utilisateur des éléments d’orientation pour naviguer, trouver le contenu et se situer dans le site.

Principe 3 : compréhensible

• 3.1 Rendre le contenu textuel lisible et compréhensible.
• 3.2 Faire en sorte que les pages apparaissent et fonctionnent de manière prévisible.
• 3.3 Aider l’utilisateur à éviter et à corriger les erreurs de saisie.

Principe 4 : robuste

• 4.1 Optimiser la compatibilité avec les agents utilisateurs actuels et futurs, y compris avec les technologies d’assistance.

etc.

La suite sur DesignGouv

Concevons des services publics numériques accessibles, inclusifs et humains.

https://design.numerique.gouv.fr/

Évaluation qualité

• Critères Opquast (Open Quality Standards) : https://checklists.opquast.com/fr/qualiteweb/

Plan de la séquence

Page Web et document HTML

Conversion de documents en une présentation dans le navigateur.

HTML + CSS

Structure des sources des pages

Structure d’une page affichée

Une page affichée en 2D (ou imprimée) :

• des boîtes qui contiennent d’autres boîtes
• boîtes qui contiennent texte ou images, etc.
• texte qui contient des caractères
• caractère qui contiennent des pixels
• …

Arbre DOM et rendu des pages

• Le navigateur (moteur de rendu) convertit :

  • Arbre DOM : Document Object Model

  en :

  • Arbre d’éléments à afficher
• Règles de conversion
  • Prédéfinies (navigateur)
  • Programmables (CSS)

Exemple de page avec un tableau

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>
  <tr>  <!--  SECTION PIED-DE-PAGE == -->
    <td colspan="3">Copyright ©</td>
  </tr>
</table>

Faire mieux !

• Structurer la page en 6 sections, par exemple, avec des balises <div>
• Positionner le contenu de chaque section avec des règles CSS.
• Permet de faire évoluer la mise en page, par exemple sous forme linéaire et non plus tabulaire, etc.

Structure archétypale d’une page

.

Exemples : CSS Zen Garden

http://www.csszengarden.com/tr/francais/

RIP Molly Holzschlag

25/01/1963 - 05/09/2023

https://fr.wikipedia.org/wiki/Molly_Holzschlag

Design

Outils de Mockup :

• Papier + crayon + gomme
• Outils (penpot)
• HTML + CSS (+ templates)

Guides de style

• Chercher « web interface style guide » sur votre moteur de recherche préféré
• Faire comme sur les applis mobiles :
  • Android : Material design : https://developer.android.com/design/index.html
  • Apple : Designing for iOS : https://developer.apple.com/design/human-interface-guidelines/designing-for-ios

Inspiration / prêt à l’emploi

• https://www.awwwards.com/ : récompenses pour le Web design
• http://www.webdesign-inspiration.com/ : sélection de designs

Marché :

• par ex.: https://themeforest.net/ : thèmes prêts à l’emploi
• plein d’autres

HTML 5

• Tout (ou presque) est possible en terme d’interface d’applications.
• Y compris l’accès à des zones de graphisme libre et l’intégration des périphériques du téléphone/ordinateur

Les bons artistes copient, les grands artistes volent

Avantage d’HTML : le code source HTML dispo.

Vive le copier-coller :-)

Contenu adaptatif

• Responsive design : prend en compte la taille de l’écran automatiquement
• p. ex.: avec Bootstrap (voir plus loin)

Interactions dynamiques

• Javascript
• Interactions asynchrones

Interactions avec ordiphone mobile

• Application allant plus loin que l’affichage et la saisie de texte : accès à toutes les fonctions du terminal mobile depuis le navigateur Web

Roadmap of Web Applications on Mobile du W3C (September 2020)

Cascade

Modèle « objet » particulier

• Langage déclaratif
• Combinaison de plusieurs feuilles avec priorités
• « Héritage » de propriétés des parents

• Factorisation de motifs :

  DRY – don’t repeat yourself

Langage à base de règles

• Si motif trouvé (sélecteur)
• alors valeur donnée à attribut/propriété de mise en forme

Exemple

h1 {
  font-size: 60px;
  text-align: center;
}

p,
li {
  font-size: 16px;
  line-height: 2;
  letter-spacing: 1px;
}

Niveaux croissants de proximité

Emplacement du code CSS :

1. pas de style : affichage navigateur par défaut

2. fichier CSS externe :

   <link rel="stylesheet" href="external.css"/>
   

3. bloc style interne :

   <style type="text/css">
   .underline { text-decoration: underline; }
   </style>
   

4. dans élément :

   <div class="column" style="float:left; width: 50%">
   

Spécificité selon la proximité

Quelles règles s’appliquent, si plusieurs définies ?

Spécificité du sélecteur

Ordre croissant de spécificité du sélecteur :

1. par balise : div {style:valeur}
2. par classe : .myclass {style:valeur}
3. par identifiant : #myid {style:valeur}

Outils du développeur

Source : Examiner et modifier le CSS sur MDN

Conception de CSS

• Pas toujours simple
• Abstraction
• Frameworks CSS (et Javascript)
  • ex. : Bootstrap

Couplage blocs templates Twig et CSS

Plan de la séquence

Concevoir les gabarits des pages

Conception parallèle :

• des blocs des gabarits HTML
• des sections <div> qu’ils contiennent (identifiants ou classes)
• des mises en forme

Même convention de nommage

Modèle de page souhaité

<html>
  <head>
  </head>
  <body>
    NAVIGATION

    MENU (COLONNE DE GAUCHE)

    CONTENU PRINCIPAL

    BAS DE PAGE
  </body>
</html>

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>

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 #}

Standardisation / Spécialisation

Spécialisation dans une sous-section ou une page de certains éléments de structure ou de présentation

• héritage des gabarits : redéfinition du contenu de blocs

  {% block main %}
  ...
  {% endblock %}
  

• cascade des feuilles de style CSS : redéfinition de la mise en forme

  #main { background-color: lightblue; }
  

Utilisation d’un framework de présentation CSS

• Standardisation du look
• Adaptatif
• Grille pour le positionnement graphique
• Intégration avec Twig / Symfony

Bootstrap

Framework CSS (+ JS)

http://getbootstrap.com/

Système de grille

Mise en page basée sur une grille de 12 colonnes

Exemples

• exemples, dans la documentation Bootstrap
• exemples sur Start Bootstrap

Thèmes

• Thèmes sur Start Bootstrap
• Feuille de syle additionnelle

Take away

• Structure != présentation
• Rôle de CSS
• Principe de surcharge des feuilles (cascade)
• Accessibilité
• Bootstrap

Ré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 en lecture seule ;-)

Générateur Contrôleur CRUD Symfony

Pour vos projets, mieux que make controller :

symfony console make:crud Todo

Génère code + gabarits :

created: src/Controller/TodoController.php
created: src/Form/TodoType.php
created: templates/todo/_delete_form.html.twig
created: templates/todo/_form.html.twig
created: templates/todo/index.html.twig
created: templates/todo/show.html.twig
created: templates/todo/new.html.twig
created: templates/todo/edit.html.twig

spoiler : formulaires, mais du temps gagné

Postface

Crédits illustrations et vidéos

Copyright

• Document propriété de ses auteurs et de Télécom SudParis (sauf exceptions explicitement mentionnées).
• Réservé à l’utilisation pour la formation initiale à Télécom SudParis.