Intégrer une maquette sur la grille avec Flex

Intégrer une maquette sur la grille avec Flex

Vous allez apprendre à utiliser la technologie Flex pour intégrer une maquette dessiner sur une grille.

En effet pour faciliter l’intégration côté développement, le graphiste conçoit l’interface graphique en disposant les blocs de contenu sur cette grille de disposition contenant 12 colonnes et des gouttières (espaces entre les colonnes).

Le site 960 grid systeme illustre bien cette approche :

Template sur la grille de 12 colonnes
Template sur la grille de 12 colonnes

Il existe bien-sur des Frameworks, comme Bootstrap, qui vous permettent de réaliser, plus simplement, une mise en page sur la grille mais vous allez apprendre à le gérer entièrement avec le code CSS.

Travailler avec des classes CSS

Lorsqu’une caractéristique graphique (bloc de 3 colonnes, par exemple) est vouée à être utiliser plusieurs fois sur des éléments HTML différents, il faut employer les classes CSS.

L’exemple ci-dessous fait référence à un bloc occupant 50% (6 colonnes / 12) la largeur de la grille.

Code HTML

<div class="col-6">
  <!-- contenu html -->
</div>

Code CSS

.col-6{ /* pour un bloc de 50%*/
  /* instructions CSS */
}

Exemple concret:

Bloc sur 6 colonnes
Bloc sur 6 colonnes

Vous êtes libre de nommer vos classes : dans ce tutoriel, pour faire référence à la colonne nous utiliserons l’écriture col  suivi d’un nombre pour spécifier le quantité de colonnes  col-6.

Utiliser Flex pour l’alignement des colonnes

Nous voila dans le vif du sujet : comme aligner les blocs de contenu parfaitement sur la grille en tenant compte des gouttières?

Nous allons reproduire avec le CSS3 la disposition des blocs suivant :

La structure HTML est la suivante

<div class="container">
  <header></header>
  <section class="row">
    <div class="col-4"><h2>Produit 1</h2></div>
    <div class="col-4"><h2>Produit 2</h2></div>
    <div class="col-4"><h2>Produit 3</h2></div>
  </section>
</div>

Nous présentons rapidement les différents blocs :

.container{
  width: 80%;
  margin: 0 auto;
}
header{
  background-color: orange;
  height: 90px;
  margin: 16px 0;
}
h2{
  background-color: silver;
  border: 1px solid grey;
}

Résultat en image :

Nous allons maintenant aligner les blocs en utilisant le mode d’affichage display:flex sur l’élément parent. Cela signifie que les blocs enfants pourront être disposés de manière flexible.

.row{
  display: flex;
}

Ne pas oublier d’appliquer le reset d’Eric Meyer afin de nettoyer le CSS du navigateur.

Le résultat en image donne ceci :

Nous allons maintenant spécifier la taille de chaque bloc col-4. Comme 4 colonnes représente 1/3 de 12, nous définissons une taille de 33.33% pour chaque colonne avec la syntaxe flex-basis.

.col-4{
  flex-basis: 33.33%;
  box-sizing: border-box;
}

Résultat en image :

Nous avons ajouter le code box-sizing: border-box; pour ne pas ajouter la taille de la bordure au bloc. En effet, sans ce code, la taille du bloc serait augmentée de 2px : 1px pour la bordure de gauche et 1px pour celle de droite.

Le résultat ne correspond pas encore au rendu final. Nous allons maintenant gérer les gouttières.

Intégrer les gouttières de la grille

La gouttière est l’espace qui sépare les colonnes. Pour créer cette séparation, on applique la propriété padding de 15px à gauche et à droite de chaque bloc col-4.

.col-4{
  flex-basis: 33.33%;
  box-sizing: border-box;
  /* gouttière */
  padding-left: 15px;
  padding-right: 15px;
}

Les contenus sont donc ramenés vers l’intérieur du bloc et sont séparés de 15 + 15 = 30 pixels (équivaut à la gouttière de la maquette).

Aperçu :

Il faut cependant ramener vers la gauche le premier bloc et vers la droite le dernier.

Pour cela nous allons tirer de -15px (valeur négative) vers la gauche et vers la droite le bloc parent c’est à dire le bloc .row.avec la propriété margin.

Code CSS :

.row{
  display: flex;
  /* gouttière rectifiée */
  margin-left: -15px;
  margin-right: -15px;
}

Voici le résultat :

Pour aérer le contenu texte dans chaque titre, on va ajouter une marge interne de 8px.

h2{
  background-color: silver;
  border: 1px solid grey;
  /* contenu aéré */
  padding: 8px;
}

Et voici le résultat définitif qui correspond à la maquette dessinée :

Le code CSS complet :

.container{
  width: 80%;
  margin: 0 auto;
}
header{
  background-color: orange;
  height: 90px;
  margin: 16px 0;
}
h2{
  background-color: silver;
  border: 1px solid grey;
  padding: 8px;
}
.row{
  display: flex;
  margin-left: -15px;
  margin-right: -15px;
}
.col-4{
  flex-basis: 33.33%;
  box-sizing: border-box;
  padding-left: 15px;
  padding-right: 15px;
}

Testez sur Codepen.

Diversifier les classes

Vous pouvez bien-sur prévoir d’autres classes pour les autres largeurs de bloc , comme par exemple:

  •  .col-6  pour une colonne de 50%
  •  .col-12  pour une colonne de 100%
  •  .col-3  pour une colonne de 25%
  •  .col-8  pour une colonne de 66.66%

Dans ce cas pensez à organiser votre code autrement. Rassembler avec un sélecteur multiple les propriétés communes aux différentes classes puis spécifier la taille de chaque colonne, comme dans l’exemple ci-dessous :

.row{
  display: flex;
  margin-left: -15px;
  margin-right: -15px;
}
.col-3, .col-4, .col-6, .col-8, .col-12{
  box-sizing: border-box;
  padding-left: 15px;
  padding-right: 15px;
}
.col-3{
  flex-basis: 25%;
}
.col-4{
  flex-basis: 33.33%;
}
.col-6{
  flex-basis: 50%;
}
.col-8{
  flex-basis: 66.66%;
}
.col-12{
  flex-basis: 100%;
}

Il vous suffit ensuite, avec le même fichier CSS, de changer le nom des classes aux blocs HTML pour une mise en page différente sur la même grille de 12 colonnes, comme avec le code ci-dessous :

<div class="container">
  <header></header>
  <section class="row">
    <div class="col-3"><h2>Produit 1</h2></div>
    <div class="col-3"><h2>Produit 2</h2></div>
    <div class="col-6"><h2>Produit 3</h2></div>
  </section>
</div>

Résultat en image :

Testez sur Codepen.

Disposition des colonnes sur plusieurs lignes

Nous allons voir comment disposer les colonnes sur plusieurs lignes pour intégrer la maquette ci-dessous :

Il suffit d’abord en HTML de rajouter trois autres blocs :

<div class="container">
  <header></header>
  <section class="row">
    <div class="col-3"><h2>Produit 1</h2></div>
    <div class="col-3"><h2>Produit 2</h2></div>
    <div class="col-6"><h2>Produit 3</h2></div>
    <div class="col-3"><h2>Produit 4</h2></div>
    <div class="col-3"><h2>Produit 5</h2></div>
    <div class="col-6"><h2>Produit 6</h2></div>
  </section>
</div>

Vous remarquez cependant que les six blocs se répartissent la largeur du conteneur. Chaque bloc a donc rétréci :

En effet la propriété flex-basis signifie ‘taille de base’ et non pas ‘taille obligatoire’. Avec la technologie flexible, les blocs peut s’agrandir mais aussi … se rétrécir, si besoin, comme c’est le cas ici!

Il faut donc interdire le rétrécissement avec la propriété flex-shrink sur chaque colonne.

.container{
  width: 80%;
  margin: 0 auto;
}
header{
  background-color: orange;
  height: 90px;
  margin: 16px 0;
}
h2{
  background-color: silver;
  border: 1px solid grey;
  padding: 8px;
}
.row{
  display: flex;
  margin-left: -15px;
  margin-right: -15px;
}
.col-3, .col-4, .col-6, .col-8, .col-12{
  flex-basis: 33.33%;
  box-sizing: border-box;
  padding-left: 15px;
  padding-right: 15px;
  /* pas de rétrécissement */
  flex-shrink: 0;  
}
.col-3{
  flex-basis: 25%;
}
.col-4{
  flex-basis: 33.33%;
}
.col-6{
  flex-basis: 50%;
}
.col-8{
  flex-basis: 66.66%;
}
.col-12{
  flex-basis: 100%;
}

Cette fois-ci les tailles sont conservées mais nous remarquons que toutes les colonnes restent sur la même ligne :

Nous allons fournir l’instruction flex-wrap pour autoriser les blocs à retourner à la ligne. Il faut appliquer la propriété flex-wrap: wrap; sur le bloc parent .row.

.container{
  width: 80%;
  margin: 0 auto;
}
header{
  background-color: orange;
  height: 90px;
  margin: 16px 0;
}
h2{
  background-color: silver;
  border: 1px solid grey;
  padding: 8px;
}
.row{
  display: flex;
  margin-left: -15px;
  margin-right: -15px;
  /* autoriser le retour à la ligne */
  flex-wrap: wrap;
}
.col-3, .col-4, .col-6, .col-8, .col-12{
  flex-basis: 33.33%;
  box-sizing: border-box;
  padding-left: 15px;
  padding-right: 15px;
  flex-shrink: 0;  
}
.col-3{
  flex-basis: 25%;
}
.col-4{
  flex-basis: 33.33%;
}
.col-6{
  flex-basis: 50%;
}
.col-8{
  flex-basis: 66.66%;
}
.col-12{
  flex-basis: 100%;
}

Voici le résultat :

Il suffit de rajouter un margin-bottom de 30px sur chaque colonne pour créer la gouttière horizontale :

.col-3, .col-4, .col-6, .col-8, .col-12{
  flex-basis: 33.33%;
  box-sizing: border-box;
  padding-left: 15px;
  padding-right: 15px;
  flex-shrink: 0;
  /* gouttière horizontale */
  margin-bottom: 30px;
}

Voici l’aperçu final :

Le code CSS complet :

.container{
  width: 80%;
  margin: 0 auto;
}
header{
  background-color: orange;
  height: 90px;
  margin: 16px 0;
}
h2{
  background-color: silver;
  border: 1px solid grey;
  padding: 8px;
}
.row{
  display: flex;
  margin-left: -15px;
  margin-right: -15px;
  flex-wrap: wrap;
}
.col-3, .col-4, .col-6, .col-8, .col-12{
  flex-basis: 33.33%;
  box-sizing: border-box;
  padding-left: 15px;
  padding-right: 15px;
  flex-shrink: 0;
  margin-bottom: 30px;
}
.col-3{
  flex-basis: 25%;
}
.col-4{
  flex-basis: 33.33%;
}
.col-6{
  flex-basis: 50%;
}
.col-8{
  flex-basis: 66.66%;
}
.col-12{
  flex-basis: 100%;
}

Testez sur Codepen.

 

Savoir faire du Responsive Web Design

Savoir faire du Responsive Web Design


Le Responsive Web Design (RWD) consiste à utiliser le HTML et le CSS pour redimensionner, masquer, réduire ou agrandir automatiquement un site Web, afin de lui donner une belle apparence sur tous les appareils (ordinateurs de bureau, tablettes et téléphones).

Important : une page Web doit être accessible sur n’importe quel appareil !

Remarquez, ci-dessous, les différences d’affichage du site OpenClassrooms sur différents appareils en fonction de la taille de la fenêtre.

 

On remarque que le graphisme s’adapte à la largeur de l’écran. Des différences d’affichage apparaissent au niveau :

  • de la disposition des colonnes (3 sur un grand écran, 2 sur un format tablette et sur les appareils mobile),
  • du format du menu principal (menu sous forme d’icône à droite sur un mobile, liens classiques sur un ordinateur de bureau).

Approche Mobile First

Il s’agit de commencer la conception du produit d’abord pour une version mobile qui inclut les fonctions les plus élémentaires puis nous passons ensuite à la version avancée pour tablette ou PC.

Mobile First
Mobile First

Cette approche Mobile First permet d’éviter des pertes de contenu quand on passe d’un écran plus grand vers un écran plus petit.

En effet, si nous prenons la conception du produit final mobile comme point de départ, sous des restrictions telles que la bande passante, la taille de l’écran, etc., les concepteurs s’empareront naturellement des points clés d’un produit pour se tourner vers un produit sobre et soigné doté de fonctionnalités prioritaires.

En outre depuis 2016, nous savons que l’utilisation de l’Internet mobile a dépassé celle des ordinateurs de bureau en 2016.

Evolution de l'internet mobile
Evolution de l’internet mobile

C’est une raison supplémentaire pour adopter l’approche Mobile First.

Utiliser les média-queries

C’est la technologie CSS reposant sur les media-queries qui permet cette adaptation.

Le principe est simple : à partir d’une certaine taille d’écran, on applique un CSS spécifique pour faire basculer la présentation : c’est ce qu’on appelle un point de rupture. Avec le code ci-dessous, du code CSS sera exécuté dès que la taille de l’écran est supérieure ou égale à 576px :

@media screen and (min-width: 576px) {
  /* css à éxécuter */
}

Par exemple on va changer la couleur de fond de la page (orange) dès que la taille d’écran est supérieur à 576px :

@media screen and (min-width:576px{
  body{
    background-color: orange;
  }
})

Le résultat en image :

Média-queries
Média-queries

Media-queries et Mobile First

Dans une approche Mobile First, on doit d’abord réaliser le CSS pour les formats mobiles puis ensuite utiliser les média-queries pour les écran plus grand (desktop). D’ou l’utilisation de l’instruction  min-width qui signifie supérieur ou égale.

Pour reprendre l’exemple ci dessus, nous allons changer le contenu de la page par rapport à la taille. Nous utiliserons display : none pour cacher le contenu inapproprié.

Code HTML :

<!-- contenu pour mobile -->
<p id="mobile">Contenu pour mobile</p>

<!-- contenu pour ordinateur de bureau -->
<p id="bureau">Contenu pour ordinateur de bureau</p>

Code CSS :

/* CSS pour le format mobile */
#bureau{
  display: none;
}
#mobile{
  display: block;
}

/* CSS pour les grands écrans */
@media screen and (min-width:576px){
  #mobile{
    display: none;
  }
  #bureau{
    display: block;
  }
})

Vous remarquez que le CSS pour mobile est fait en premier.

Important : le code média-queries est toujours placé après le CSS général.

Le résultat en image :

Média-queries et Mobile first
Média-queries et Mobile first

Ajouter la balise meta viewport

Si vous voulez donner au navigateur des instructions sur la manière de contrôler les dimensions et la mise à l’échelle de la page, vous devez ajouter en HTML dans la partie <head> la balise méta suivante :

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Adapter la taille des images

On parle d’ image réactive lorsqu’elle s’adapte à la taille des écrans. Pour permettre à une image de conserver sa taille d’origine sur un grand écran mais de la réduire automatiquement sur petit écran, on utilise l’attribut  max-width : 100%

Code HTML

<img width="500" src="https://images.unsplash.com/photo-1518950957614-73ac0a001408?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=6c859637d2eb66855ca891674fb6bd45" alt="">

Code CSS

/* CSS pour mobile */
img{
  max-width: 100%;
}

Le résultat en image :

Image réactive
Image réactive

Afficher différentes images en fonction de la taille de l’écran

La balise HTML <picture>  vous permet de définir différentes images pour différentes tailles d’écran. Dans l’exemple ci dessous le contenu de l’image change lorsqu’on est sur un grand écran.

<picture >
<!-- image sur grand écran -->
  <source width="500" srcset="https://images.unsplash.com/photo-1515481985834-b7ecb46b8e2b?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=e9fc5f4733da9d7137ad138bb6354ccc" media="(min-width: 576px)">

<!-- image sur mobile -->
  <img width="500" src="https://images.unsplash.com/photo-1526854497059-89ac894e3168?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=fe27db8eecddf5603525c50e463f68c3" alt="">
</picture>

Remarquez la syntaxe media="(min-width: 576px) qui définit le point de rupture à 576px.

On ajoute en plus, comme vu précédemment,  le CSS pour adapter l’image selon la taille de l’écran :

/* CSS pour mobile */
img{
  max-width: 100%;
}

Le résultat en image :

Picture image
Picture image

 

Promise en Javascript : comprendre les promesses

Promise en Javascript : comprendre les promesses

Techniquement parlant une promesse n’est rien d’autre que l’objet Promise : 

let unePromesse = new Promise();

Mais à quoi va servir cet objet? Et bien à synchroniser deux actions (ou plus) qui se déroulent dans le temps mais pas à la même vitesse.

Pour faire un parallèle avec la vie courante, imaginez que vous êtes autour d’une table avec des amis et que vous voulez trinquer (fonction jeTrinque()), vous êtes conscient qu’il faut d’abord attendre que le serveur vous apporte un verre de champagne (function commandeVerre()). Même si vous ne savez pas exactement dans combien de temps il viendra, vous êtes persuadé que votre verre finira par arriver, et qu’au pire vous serez prévenu en cas de rupture de stock. C’est comme si, quelque part, il vous en avait fait la promesse.

On va maintenant illustrer cet exemple avec le code Javascript. La fonction commandeVerre() sera encapsuler dans la promesse :

let unePromesse = new Promise(
 function(resolve, reject) { // fonction commandeVerre
  // au bout de 3 secondes le serveur apporte du champagne 
  setTimeout(function() { 
    resolve('champagne');
  }, 3000);
 }
);

Vous remarquez qu’au bout de trois seconde la fonction exécute resolve() qui est la fonction passée en argument et qui correspondra à votre fonction jeTrinque(). A ce stage, il ne se passe rien : on effectue seulement une mise en mémoire des actions à enchaîner par la promesse. Vous remarquez aussi la présence d’un autre argument reject et qui correspondra à la fonction à exécuter en cas d’échec.

Pour exécuter une promesse il suffit d’appliquer la méthode then() sur l’objet Promise :

function jeTrinque(boisson){
  alert("Je trinque avec du " + boisson);
}
unePromesse.then(jeTrinque); // affichera 'Je trinque avec du champagne'

Vous passez, en argument de la méthode, votre fonction jeTrinque() qui se retrouvera dans la fonction resolve de la promesse. Vous remarquez que votre fonction jeTrinque() récupère l’argument ‘champagne’ à travers le paramètre boisson.

Objet Promise
Objet Promise

Testez en ligne le résultat.

Créer une fonction asynchrone

Dans notre exemple ci-dessus, le serveur du bar nous retourne du champagne. Mais si je souhaite choisir ma boisson, comment la transmettre dans la promesse. Vous ne pouvez pas directement la fournir dans l’objet Promise. La technique consiste donc à passer par un fonction dîtes asynchrone.

Le principe consiste à transmettre la boisson à travers l’argument de la fonction asynchrone qui la retransmet (par closure)  à la promesse :

function commandeVerre(maBoisson){ // fonction asynchrone
  return new Promise( // la fonction retourne la promesse
    function(resolve, reject) { 
      // au bout de 3 secondes le serveur apporte du champagne 
      setTimeout(function() { 
        resolve(maBoisson);
      }, 3000);
    }
  );
}

function jeTrinque(boisson){
  alert("Je trinque avec du " + boisson);
}
let unePromesse = commandeVerre("vin rouge");
unePromesse.then(jeTrinque);

Grâce à cette technique nous pouvons choisir notre boisson!

Fonction asynchrone
Fonction asynchrone

La fonction asynchrone retourne la promesse, récupérer par la variable unePromesse et nous l’exécutons comme tout à l’heure avec la méthode then().

Retour d'une promesse
Retour d’une promesse

Testez en ligne le résultat.

Enchaîner les promesses

Il est possible d’enchaîner plusieurs actions. Chaque action peut même transmettre à la suivante une valeur.

Restons avec notre exemple ci-dessus et ajoutons après l’action jeTrinque(), l’action jeBois().

function commandeVerre(maBoisson){ // fonction asynchrone
  return new Promise( // la fonction retourne la promesse
    function(resolve, reject) { 
      // au bout de 3 secondes le serveur apporte du champagne 
      setTimeout(function() { 
        resolve(maBoisson);
      }, 3000);
    }
  );
}

function jeTrinque(boisson){
  alert("Je trinque avec du " + boisson);
  return boisson;
}
function jeBois(boisson){
  alert("je bois le " + boisson);
}
let unePromesse = commandeVerre("vin rouge");
unePromesse.then(jeTrinque).then(jeBois);

Il suffit de rajouter à nouveau la méthode then() sur la même promesse pour enchaîner les deux actions.

Vous remarquez que la fonction jeTrinque() transmet la valeur boisson à la fonction jeBois().

Testez en ligne le résultat.

Framework, pour ou contre?

Framework, pour ou contre?

Beaucoup de développeur utilisent les Frameworks pendant la phase de réalisation de leur projet dans le but de faciliter et d’accélérer la production. En effet, un framework (Bootstrap, NodeJS, Angular….) est un cadre de travail, avec un support à disposition, qui vous fournit les briques (composants, librairies..) et la méthodologie essentielle pour fabriquer votre projet.

Framworks
Framworks

Les risques

Avant de vous lancer tête-baissée dans le choix d’un Framework, il est important de prendre conscience de certains inconvénients :

  • le temps d’apprentissage est souvent long. Il faut même parfois  suivre une formation (coûteuse) pour atteindre un bon niveau de pratique professionnelle. Certains développeurs, comme avec le Framework Symphony,  en font même un métier à part entière.
  • il faut considérer le problème des versions. En effet les frameworks évoluent régulièrement, ce qui entraînent donc d’utiliser autrement les composants. Il arrivent souvent qu’une, d’une version à l’autre, les différences génèrent un temps d’adaptation long et déroutant (comme si on avait à faire à un autre framework)…
  • Il y a une dépendance créée sur le projet qui rend le ‘refacto’ lourd, avec le risque de réécrire intégralement le projet, si la nouvelle version du framework ne convient plus. Une bonne pratique consiste à ne pas rendre la logique métier dépendante du framework.
  • ils risque d’enduire une perte de connaissances fondamentales. Le développeur finit par utiliser aveuglement les modules, sans vraiment comprendre son fonctionnement dans le langage natif (Java, C#, PHP, SQl..). Il gagne peut-être en autonomie, mais il perd cette liberté de créer un module inexistant et spécifique au besoin du client.

Réflexion après conception

C’est après la phase de conception d’un projet (spécification des besoins, diagramme de classes, modélisation…) que vous allez réfléchir à l’environnement technique à utiliser pour la réalisation. Vous devez donc vous assurez que le ou les frameworks pourront répondre aux exigences de développement. Il ne faut pas confondre le choix de l’architecture (MVC..) et le lien avec le framework.

Il faut ainsi connaitre à l’avance les possibilités de chaque framework par rapport à votre projet. Il ne serait pas judicieux de travailler dans un environnement qui ne répond pas aux besoins fonctionnels. En outre, il n’est pas nécessaire de travailler avec un framework contenant  des centaines de librairies si vous n’avez besoin que de deux ou trois fonctionnalités.. Vous allez alourdir votre environnement et perdre du temps à faire le tri parmi tous ces composants.

 

Utiliser Adobe XD pour concevoir une application mobile

Utiliser Adobe XD pour concevoir une application mobile

Vous allez apprendre à utiliser le logiciel Adobe XD pour réaliser, en toute simplicité, des interfaces graphiques sur mobile. En effet Adobe XD propose un certains de fonctionnalités puissantes qui va vous permettre de booster votre production et de la partager avec votre équipe de travail.

Espace de travail

Pour créer un nouveau document :  fichier > nouveau. Choisissez le modèle Android Mobile.

Nouveau document Android Mobile
Nouveau document Android Mobile

Les grilles de mise en page.

Afin de permettre un placement cohérent des éléments de vos interfaces vous devez travailler avec deux grilles : la grille de disposition et la grille de référence.

La grille de disposition

Elle va diviser la largeur de l’écran en plusieurs parties égales pour bien proportionner la taille des blocs. L’usage de la grille évite le calcul systématique des dimensions et permet plus facilement l’intégration CSS de l’interface.

La grille de disposition est composée de trois éléments:

  1. les colonnes
  2. les gouttières
  3. les marges
Colonnes, gouttières, marges
Colonnes, gouttières, marges

Avec adobe XD, activez la grille de mise en page dans le panneau propriété, réglez le nombre de colonnes à 4, les marges à 16px et les gouttières à 16px.

Activation de la grille de disposition sur XD
Activation de la grille de disposition sur XD

La grille de référence

Lorsqu’un élément n’est pas aligné sur la grille de disposition, elle doit forcément l’être sur la grille de référence carré de 8px.

Grille de référence 8dp
Grille de référence 8dp

Pour l’activer sur XD, il faut cocher l’option carré dans la rubrique Grille. et vérifier que le carré de référence mesure 8px.

Activation de la grille de référence sur XD
Activation de la grille de référence sur XD

Visualiser votre travail

Pour voir le rendu final, cliquez sur l’icone aperçu située en haut à droite.

Aperçu
Aperçu

Si le contenu dépasse la taille de l’écran, ce dernier sera caché à l’affichage.

Le contenu texte qui dépasse est caché
Le contenu texte qui dépasse est caché

Pour simuler le défilement de la fenêtre (scrolling) au niveau de l’aperçu.. il faut l’activer dans le panneau propriété et augmenter la taille du plan de travail jusqu’à recouvrir la totalité du contenu.

Activer le défilement vertical
Activer le défilement vertical

Travailler avec les symboles

Si vous faîte de la conception Atomic Design, toute modification d’un objet graphique (le logo par exemple) sur un plan de travail doit se répercuter sur tous les autres plans qui l’utilisent.

Dans l’exemple ci-dessous le fait de modifier la couleur de la pastille de gauche ne modifie pas la couleur de celle de droite. Ceci peut être très gênant pour les mises à jour des interfaces.

Objets identique mais ce ne sont pas les mêmes
Objets identiques mais ce ne sont pas les mêmes

La solution consiste donc à transformer l’objet en symbole avant de le réutiliser. Par la suite toute modification d’un objet se répercutera sur l’ensemble des objets identiques, comme dans l’exemple ci-dessus.

Même symbole
Même symbole

Gérer les symboles

Pour afficher tous les symboles de votre document, cliquez sur l’icone des actifs situé en bas à gauche. Un symbole peut être supprimer en faisant un clic-droit dessus. Pour créer une instance (un autre objet à partir de ce symbole) il suffit de le glisser sur le plan de travail.

Gérer les symboles
Gérer les symboles

Travailler en mode non destructif

Le travail non destructrice  permet, par exemple, de modifier une image sans remplacer les données d’origine, lesquelles restent disponibles si vous souhaitez la rétablir.

Dans l’exemple ci-dessus, on souhaite placer l’image d’une assiette mais sans afficher le fond blanc.

Fond blanc à cacher
Fond blanc à cacher

Plutôt que de retirer le fond en modifiant l’image d’origine nous allons lui appliquer un masque. Les opérations à effectuer sur adobe XD sont :

  1. créer une forme circulaire transparente avec contour (taille 173x173px)
  2. placer la forme sur l’image pour qu’elle encadre l’assiette
  3. sectionner la  forme et l’image
  4. faire un clic droit sur la sélection et choisir l’option masquer avec une forme
Travailler en mode non destructrice
Travailler en mode non destructrice

Pour retirer le masque, faite un clic-droit directement sur la forme et choisissez l’option dissocier le masque.

Dissocier le masque
Dissocier le masque

Contraste texte sur photo

Vous allez apprendre à utiliser XD pour améliorer la lisibilité d’un texte situé sur une image. Dans l’exemple ci-dessous nous souhaitons mettre du texte claire sur une image sombre. Vous remarquez que le contraste n’est pas très marqué.

En effet, le texte est situé sur une image riche en éléments visuels. Pour focaliser l’attention sur ce texte nous allons l’encadrer avec une forme rectangulaire placer entre l’image et le texte.

On applique ensuite une  bordure claire et un flou en arrière plan sur le rectangle.

Appliquer un flou arrière plan
Appliquer un flou en arrière plan

Effectuez les réglages nécessaires jusqu’à obtenir un résultat satisfaisant.

La grille de répétition

Nous allons utiliser Adobe XD pour afficher, très simplement, une liste de profil, comme ci-dessous,  en exploitant la grille de répétition, un outil puissant et facile à utiliser.

Liste de profils
Liste de profils

On commence par créer un bloc profil en dessinant un cercle de bordure jaune et en insérant le texte.

Laissons la grille de répétition faire le reste. Sélectionner votre bloc profil, et activer la grille de répétition. ll suffit de tirer le curseur de répétition vertical vers le bas pour dupliquer le bloc profil.

Survoler l’espace vertical entre les blocs (en rose) pour modifier la distance qui les sépare.

Grille de répétition
Grille de répétition

Pour terminer, nous allons ajouter les photos à partir d’un dossier situé sur votre ordinateur. Sélectionnez l’ensemble des images (prévoyez autant d’images que de cercles) et déplacez-les sur le premier cercle.

Répétition des images
Répétition des images

Si le nombre d’images est inférieur au nombre de cercle, les images seront répétées.

Vous pouvez aussi répéter le textes à partir d’un fichier texte (.txt). Il faut revenir à la ligne pour chaque contenu différent (Prenom Nom), comme dans l’exemple ci-dessous.

Exemple de fichier texte
Exemple de fichier texte

Pour publier tous les contenus sur votre interface, il faut sélectionner et  glisser le fichier (profil.txt) sur le premier titre.

Répétition du texte
Répétition du texte

Comme pour les images, si le nombre de texte est inférieur au nombre de cercle, les textes seront répétés.

 

 

Méthode Atomic Design

Comprendre la méthode Atomic Design

Dans le monde naturel, les éléments atomiques se combinent pour former des molécules. Ces molécules peuvent se combiner davantage pour former des organismes relativement complexes. Pour exposer un peu plus loin:

  • Les atomes sont les éléments de base de toute matière. Chaque élément chimique a des propriétés distinctes, et ils ne peuvent pas être décomposés plus avant sans perdre leur signification. (Oui, c’est vrai les atomes sont composés de bits encore plus petits comme les protons, les électrons et les neutrons, mais les atomes sont la plus petite unité fonctionnelle .)
  • Les molécules sont des groupes de deux atomes ou plus maintenus ensemble par des liaisons chimiques. Ces combinaisons d’atomes acquièrent leurs propres propriétés et deviennent plus tangibles et opérationnelles que les atomes.
  • Les organismes sont des assemblages de molécules fonctionnant ensemble en tant qu’unité. Ces structures relativement complexes peuvent aller des organismes unicellulaires jusqu’aux organismes incroyablement sophistiqués comme les êtres humains.

Tous nos interfaces peuvent être décomposées en un ensemble fini d’éléments similaires. Le tableau périodique des éléments HTML de Josh Duck explique comment tous nos sites Web, applications, intranets, sont tous composés des mêmes éléments HTML.

Tableau périodique HTML
Tableau périodique HTML

Conception Atomic

La conception atomique est une méthodologie composée de cinq étapes distinctes qui travaillent ensemble pour créer des systèmes de conception d’interface de manière plus délibérée et hiérarchique. Les cinq étapes de la conception atomique sont:

  1. Atomes : les atomes de nos interfaces servent de blocs de construction fondamentaux qui comprennent toutes nos interfaces utilisateur . Ces atomes comprennent des éléments HTML de base comme des étiquettes de formulaires, des entrées, des boutons qui ne peuvent plus être décomposés sans cesser d’être fonctionnels.
  2. Molécules : dans les interfaces, les molécules sont des groupes relativement simples d’éléments d’interface utilisateur fonctionnant ensemble en tant qu’unité . Par exemple, une étiquette de formulaire, une entrée de recherche et un bouton peuvent se rejoindre pour créer une molécule de formulaire de recherche.
  3. Organismes : Les organismes sont des composants de l’interface utilisateur relativement complexes composés de groupes de molécules et / ou d’atomes et / ou d’autres organismes . Ces organismes forment des sections distinctes d’une interface.
  4. Modèles : ils affichent tous les composants de page nécessaires fonctionnant ensemble, ce qui fournit un contexte pour ces molécules et organismes relativement abstraits . Ils se concentrent sur la structure de contenu sous-jacente de la page plutôt que sur le contenu final de la page. Les systèmes de conception doivent tenir compte de la nature dynamique du contenu, il est donc très utile d’articuler les propriétés importantes de composants comme les tailles d’image et les longueurs de caractères.
  5. Pages : ce sont des instances spécifiques de modèles qui montrent à quoi ressemble une interface utilisateur avec un contenu représentatif réel en place .
Conception Atomic Design
Conception Atomic Design

Les atomes

Si les atomes, en chimie, sont les éléments de base qui constitue la matière, dans la méthode design atomic, les atomes vont servir de blocs fondamentaux constitutifs de toutes les interfaces utilisateur. On peut les comparer aux briques de Lego qui servent de base à toute construction.

Legos
Legos

C’est seulement à partir de ces éléments que vous allez créer tous vos interfaces graphiques. Ces atomes incluent des éléments HTML de base tels que les étiquettes et les entrées de formulaire, les boutons et d’autres éléments qui ne peuvent plus être décomposés.

Atome label + atome input + atome button
Atome label + atome input + atome button

Les molécules

Techniquement parlant, une molécule est un ensemble de balises HTML : par exemple un moteur de recherche va réunir un label, un champ de saisie, et un bouton pour lancer la recherche.

Sémantiquement parlant, une molécule joue un rôle précis dans l’interface : fournir une information, ou permettre une fonctionnalité comme un menu de navigation ou un panneau à onglets.

Pour un web-designer, la conception d’une molécule doit répondre à deux exigences : une cohérence dans la structuration des éléments de base (les atomes doivent exister), et une cohérence dans la manière de présenter la molécule (doit respecter la charte graphique).

Quelques exemples de molécules :

Molécule Sociale
Molécule Sociale
Molécule Tag
Molécule Tag
Molécule Informations
Molécule Informations

Voici une liste d’autres molécules qu’on retrouve souvent sur les interfaces :

  • filtre tags
  • filtre gamme (min-max)
  • bouton filtre (avec icone)
  • liste d’options
  • groupe bouton radio
  • groupe de choix miltiples
  • choix de confirmation (cgu..)
  • module d’affichage (titre, image, date, description)
  • menu vertical
  • menu horizontale
  • moteur de recherche
  • audio card
  • item info (picto + titre + description)
  • item commentaire (avatar+profil+date+social action)
  • ajout d’un commentaire
  • ajout d’une réponse

Les organismes

Les organismes sont des composants UI relativement complexes composés de groupes de molécules et/ou d’atomes et/ou d’autres organismes . Ces organismes forment des sections distinctes d’une interface.

Par exemple, l’organisme entête de page rassemble un atome logo, une molécule menu et une molécule moteur de recherche :

Organisme Header
Organisme Header

Alors que certains organismes peuvent être composés de différents types de molécules, d’autres organismes peuvent être constitués de la même molécule, qui se répète. Ci-dessous un organisme qui liste tous les services d’une métropole :

Organisme Services
Organisme Services

Vous remarquez que l’organisme résulte de la répétition des blocs icônes + description.

Les modèles

Les modèles vont articuler l’ensemble des composants d’une page sans les contraintes graphiques (typographie, couleur, dimension exact). Il s’apparente à une maquette fil de fer (wireframe), en noir et blanc (ou monochrome) mais qui donne un aperçu de l’organisation de l’ensemble des éléments.

A ce stade les organismes sont bien ordonnés et proportionnés.

Modèle de page
Modèle de page

Les pages

Les pages sont des instances spécifiques de modèles qui montrent à quoi va ressembler une interface utilisateur avec un contenu représentatif.

C’est l’aspect graphique final de la page, avec une haute fidélité au résultat attendu. Nous pouvons reprendre le modèle de page ci-dessus et ajouter du texte et des images pour afficher le contenu réel de l’interface.

Page
Page

Intégration avec la méthode BEM

L’approche BEM (Bloc Element Modifier) garantit que tous ceux qui participent au développement d’un site Web travaillent avec un seul code et parlent le même langage. L’utilisation de noms appropriés vous préparera aux changements de conception du site Web.

Bloc

Il encapsule une entité autonome significative. Bien que les blocs puissent être imbriqués et interagir entre eux, sémantiquement, ils restent égaux :  pas de priorité ou de hiérarchie entre eux. Un bloc est une abstraction de haut niveau d’un nouveau composant, par exemple un bouton. Un bloc doit être considéré comme un parent.

Appellation

Les noms de blocs peuvent être composés de lettres latines, de chiffres et de tirets. Exemple :

.block

HTML

Tout nœud DOM peut être un bloc s’il accepte un nom de classe.

<div class = "block"> ... </ div>

CSS

Utiliser uniquement le sélecteur de nom de classe

.block {color: #558042; }

Element

Ce sont les parties enfants d’un bloc. Tout élément est sémantiquement lié à son bloc.

Appellation

Les noms d’éléments peuvent être composés de lettres latines, de chiffres, de tirets et de traits de soulignement. La classe CSS est formée à partir du nom du bloc parent suivie de deux traits de soulignement puis du nom de l’élément. Exemple :

.block__element

HTML

Tout nœud DOM peut être un bloc s’il accepte un nom de classe.

<div class = "block"> 
 <span class="block__element"> </span>
</div>

CSS

Utiliser uniquement le sélecteur de nom de classe

.block {color: #558042; }

Modifier

Le modificateur permet de personnaliser l’aspect d’un bloc sans toucher à sa structure HTML. Ils sont utilisés pour modifier l’apparence, le comportement ou l’état d’un élément.

Appellation

Les noms de modificateurs peuvent comprendre des lettres latines, des chiffres, des tirets et des traits de soulignement. La classe CSS est formée à partir du nom de bloc (ou d’un élément) suivie de deux tirets et du nom du modificateur. Exemple :

.block--orange
.block__elemnt--small

HTML

Tout nœud DOM peut être un bloc s’il accepte un nom de classe.

<div class = "block block--orange">
 <span class="block__element"> </span>
</ div>

CSS

Utiliser uniquement le sélecteur de nom de classe

.block {color: #558042; }
.block--orange { color: orange; }

Et la créativité dans tout cela?

La créativité n’a pas à craindre ce genre de système de conception, bien au contraire… Biologiquement, on est tous fait du même squelette de base et de la même matière et pourtant les combinaisons sont infinies et les gens sont tous uniques. Il doit en être de même en Webdesign.

Le travail du designer d’interface est de définir la bonne typographie, les bonnes couleurs, les bons rapports de hiérarchies, les bons composants graphiques et de faire marcher ces éléments ensemble, de leur donner du sens.

Travail d'un graphiste
Travail d’un graphiste

Le designer pourra également prendre plus de temps pour réfléchir aux comportements animés de ces atomes/molécules… Et bien sûr, suivre les développements (puisqu’ils seront fait au fur et à mesure) afin que le résultat final corresponde à la vision partagée par l’équipe.

J’utiliserai la métaphore de la musique pour vous en convaincre. A partir de 7 notes on créé des accords. Ces accords permettront de créer des phrases musicales. Et avec ces phrases musicales on va composer des morceaux entiers.

Morceau de musique
Morceau de musique

Comme pour le musicien, le talent du graphiste va être évalué sur :

  • l’harmonie : c’est le bon agencement à la fois graphique et ergonomique des composants. C’est ce qui va faire que le rendu final va être harmonieux et bien équilibré.
  • la mélodie : c’est l’histoire qu’on va raconter, la vision du parcours entier qui correspond au scénario d’utilisation du site ou de l’application
  • le rythme : c’est tout ce qui va nous permettre de susciter de l’émotion chez l’utilisateur : des animations, de l’illustration, un ton rédactionnel décalé..

Ressources

Palette couleur en Webdesign

Bien constituer sa palette couleur pour vos maquettes graphiques

Une des grandes préoccupations du graphiste est le choix des couleurs à utiliser pour habiller la maquette du site. Il doit constituer une palette couleur.  Il ne suffit pas seulement de choisir une couleur dominante, il faut aussi trouver les autres teintes qui pourront y être associées.

En tenant compte des règles de colorimétrie, le web designer doit trouver les couleurs qui vont bien ensemble, les couleurs qui se marient bien, en rapport avec la thématique de son site web. Si pour certains ce travail se fait instinctivement, pour d’autres cela relève de cauchemar.

Palette couleur application
Exemple d’utilisation d’une palette couleur pour une application

Comprendre la signification des couleurs

Avant de vouloir combiner les couleurs, il est intéressant de comprendre leurs significations. Le marketing le sait bien : chaque teinte influence différemment notre comportement. Les couleurs mènent la danse.

Le rouge fait vendre

Si vous voulez vendre un produit, emballez-le de rouge! C’est la teinte alarme, celle qui va aguicher votre pupille.. et nous inciter à faire chauffer la carte bancaire.

Dans le monde professionnel, le rouge connote également un tempérament dominant. Donald Trump s’affiche souvent avec une cravate rouge pour suggérer l’idée qu’il est le plus fort.

Donald Trump
Donald Trump

Les psychologues du sport de l’université de Münster, en Allemagne, ont prouvé que les lutteurs vêtus d’un maillot rouge remportait davantage les combats que ceux vêtus de bleu.

Luteurs
Luteurs

Le rouge est la couleur la plus chaude du spectre, il représente le dynamisme, l’action, le feu, le courage, le sang, la vie.

Spectre de la lumière visible
Spectre de la lumière visible

Pas étonnant que les marques comme Coca-Cola, Nintendo, Canon.. ont choisit la couleur rouge pour leur logo.

Logos rouges
Logos rouges

Le vert donne confiance

Savez vous que la couleur la plus adapter à votre bien-être cérébral, donc à votre confiance en soi, est le vert. Selon Jean-Gabriel Causse :

C’est la teinte parfaitement équilibrée, située au milieu de l’arc-en-ciel, entre le jaune et le bleu.

Ce qui explique pourquoi l’on se sent si bien dans une forêt ou dans un magasin qui a adopté sciemment ce code couleur.

Tapis de je
Tapis de jeu

Ce n’est pas un hasard si les tapis de jeu sont de couleur verte. On a réalisé que les joueurs étaient plus enclins à vouloir « se refaire » sur un tapis vert.

Voici comment le vert est utilisé dans les logos internationaux :

Logos verts
Logos verts

Le rose rend heureux

On a constaté que le rose activait les mêmes zones du cerveau qu’une image du bonheur. Voir la vie en rose n’est pas un vain mot!

En grande Bretagne, après avoir peint en rose certaines salles, on a remarqué que les enfants y était plus heureux, moins agités.

Réalisation d'un décor peint sur le thème de « la rose »
Réalisation d’un décor peint sur le thème de « la rose »

Idem pour les fourrières : 75% du public entre en souriant dans une fourrière rose.

Le bleu relaxe

Pour vendre un fer à repasser, une baignoire ou des somnifères, on sait depuis longtemps qu’il faut aller vers le bleu. Pourquoi? Parce que les explorations cérébrales par IRM ont montré que, quand on regarde du bleu, on active les zones de la relaxation et de l’intuition, répond Jean-Gabriel Causse.

Bien-être

Et c’est pour cette raison que l’on réserve, ainsi que le vert, à la sphère du Bien-être et de l’hygiène.

Voici des logos de marques célèbres utilisant le bleu :

bleus
Logos bleus

Le jaune communique la joie

Le jaune est la couleur de la chaleur, de l’amusement et de la pensée créative. Cette couleur est une source puissante d’émotions positives, parfois fastidieuses. De plus, le jaune pousse à l’action. Cependant, contrairement au rouge, le jaune génère des vibrations festives et est orienté vers l’action sans connotation agressive ou passionnée.

Si vous voulez communiquer la joie, veillez à utiliser cette couleur ensoleillée dans votre logo.

Voici quelques exemples de logo jaune :

Logos jaunes
Logos jaunes

Le violet inspire le respect

Le violet est la couleur de l’aristocratie et de la royauté, de la spiritualité et de la magie. La violette est associée au pouvoir et à la grandeur – tout comme le rouge. Cependant, en même temps, il a des connotations nobles et apaisantes.

En dépit d’être une couleur « froide » comme le bleu, le violet n’excite pas le système nerveux ou ne stimule pas l’action. Néanmoins, c’est la couleur du succès, de la sagesse et de la confiance. Cela peut certainement inspirer le respect envers votre marque.

Exemples de logos violets réussis :

Logos violets
Logos violets

La théorie des couleurs

https://www.f5buddy.com/color-theory/

Comme chaque couleur a sa propre importance, il peut s’avérer difficile de choisir les couleurs de son futur site. En effet, les couleurs doivent ajouter une force et une qualité supplémentaires à votre site Web et doivent contribuer à son image de marque.

Si vous avez du mal à assembler les couleurs, parce que la tache ne vous semble pas innée, la théorie des couleurs va certainement vous aider dans vos travaux. Découvrez, ci-dessous, quelques termes à connaître.

La roue chromatique

Une roue de couleurs de base possède les 12 couleurs standard qui suit l’ordre de l’arc-en-ciel. La roue commence sur la couleur rouge. Nous percevons le rouge, le bleu et le jaune comme les couleurs de base et toutes les autres couleurs comme la combinaison de ces trois couleur.

Les concepteurs créent des schémas de couleurs en combinant différentes couleurs de la roue chromatique.

Couleurs chaudes et couleurs froides

Les couleurs sont classées comme couleurs chaudes et froides.

Les couleurs chaudes ont des quantités plus élevées de rouge et de jaune. Ils sont perçus comme énergiques et peuvent susciter un sentiment de passion dans un design. Les couleurs chaudes rappellent généralement le soleil ou le feu

.

Alors que les couleurs froides contiennent plus de vert et de bleu, elles donnent une impression de calme et créent des impressions apaisantes. Les couleurs froides sont en réalité moins agressives et beaucoup plus apaisantes.

Combiner harmonieusement les couleurs

Les concepteurs créent des schémas de couleurs en combinant différentes couleurs de la roue chromatique. Cela fonctionne mieux lorsque vous utilisez l’un des modèles de couleurs suivants.

Monochrome

Cette combinaison utilise plusieurs nuance d’une même couleur. Ils sont très cohérents, mais peuvent vite devenir monotone.

Couleur monochrome
Couleur monochrome

Complémentaire

Les schémas complémentaires sont composés de deux couleurs opposées sur la roue chromatique. Ce schéma étant intrinsèquement très contrasté, il a un impact notable sur les personnes.

Astuce : l’utilisation d’un schéma complémentaire pour vos appels à l’action est très bénéfique. Par exemple, si l’arrière-plan de votre page Web est gris, vous pouvez utiliser la couleur la plus foncée, orange ou verte, pour un bouton.

Couleurs complémentaires
Couleurs complémentaires

Analogue

Des schémas analogues utilisent trois couleurs côte à côte sur la roue chromatique. Grâce à leurs similitudes tonales, ils créent des designs très cohésifs, calmes et confortables.

Couleurs analogues
Couleurs analogues

Triadique

Le schéma triadique utilise des couleurs équidistantes autour de la roue chromatique. Il crée un aspect dynamique, visuellement contrasté et équilibré pour le design. Pour créer un schéma triadique, dessinez un triangle équilatéral sur la roue chromatique et sélectionnez les trois couleurs aux points du triangle.

Couleurs triades
Couleurs triades

Les outils pour combiner des couleurs

Vous manquez d’inspiration… Voici une liste de sites à connaitre qui vous permet de récupérer les codes couleurs (pour certains à partir d’une image) :

Vous pouvez aussi trouvez l’inspiration auprès des designers qui présentent leurs créations à travers les plateformes comme Dribbble ou Behance

Respecter les règles d’accessibilité du WCAG 2.0

On estime que 285 millions de personnes dans le monde souffrent de déficience visuelle. Ce nombre inclut toute personne qui est aveugle au sens de la loi ou qui a une vision inférieure à 20/20. Ce petit guide vous aidera à atteindre les normes d’accessibilité décrites dans les WCAG 2.0 , en particulier la couleur de premier plan et d’arrière-plan en matière de texte.

La couleur joue un rôle important dans la lisibilité du texte. Vous devez choisir des couleurs avec un contraste suffisant entre les éléments, afin que tous les utilisateurs puissent voir et utiliser votre application.

Rapport de contraste

Le rapport de contraste entre une couleur et son arrière-plan varie de 1 à 21 en fonction de sa luminance (intensité de la lumière émise) selon le World Wide Web Consortium (W3C).

Les rapports de contraste représentent la différence entre une couleur et une autre couleur, généralement écrite en 1: 1 ou 21: 1. Plus la différence entre les deux nombres est élevée, plus la différence de luminance relative entre les couleurs est grande.

Le W3C recommande les rapports de contraste suivants pour le texte du corps et le texte de l’image :

  • Le petit texte doit avoir un rapport de contraste d’au moins 4,5: 1 par rapport à son arrière-plan.
  • Le gros texte (14pt ou 18,5px en gras / 18pt ou 24px et plus) doit avoir un rapport de contraste d’au moins 3: 1 par rapport à son arrière-plan.

Score

Il existe une équation fournie par les WCAG (Web Content Accessibility Guidelines) qui déterminent ces deux valeurs.

  • Le score
  • Le rapport

L’équation produit un nombre compris entre 0 et 21, 21 correspondant à la plus grande quantité de texte noir de contraste et à un arrière-plan blanc, et 0 à l’absence de blanc de contraste sur le blanc.

La sortie de contraste entre deux couleurs quelconques se situera quelque part sur le spectre entre 0 et 21. C’est à partir de là que les scores sont dérivés.

Il y a techniquement 5 scores.

  • AAA
  • AAA Large
  • AA
  • AA Large
  • Échec

AAA

AAA signifie que votre texte a un taux de contraste d’au moins 7,0. Par exemple, du #595959 texte sur un  ffffffarrière-plan et vice versa.

AAA Large

AAA Large signifie que votre grand texte a un taux de contraste supérieur ou égal à 4,5 , soit le même score que AA.

AA

AA signifie que votre texte a un rapport de contraste d’au moins 4,5 ou plus. Par exemple, du #757777 texte sur un  ffffffarrière-plan et vice versa.

AA Large (AA+)

AA Large signifie que votre texte a un rapport de contraste d’au moins 3,0. Par exemple, du #949595 texte sur un  ffffffarrière-plan et vice versa.

Echec

Echec signifie que votre texte a un taux de contraste de 2,9 ou moins. Ceci ne s’applique pas aux logos, au texte dans les logos et aux autres éléments décoratifs. Par exemple, du #b8b8b8 texte sur un  ffffffarrière-plan et vice versa.

Vous pouvez utiliser l’outil Hexnaw pour vérifier le score de lisibilité de vos textes ou encore Checkmycolours pour contrôler les contrastes de couleurs de votre site web.

Bien utiliser ses couleurs pour un site web

L’utilisation des couleurs n’est pas une science exacte, mais tout un art. Si cela vous semble difficile, je vous conseille la règle des 60-30-10 qui est efficace et qui vous évitera des dérives.

 

 

Le format des couleurs en CSS

Vous pouvez appliquer une couleur à un texte mais aussi à un arrière-plan.

En CSS, pour définir une couleur sur un texte, on utilise la propriété color :

p{
 color : red;
}

Pour définir une couleur de fond, on emploiera la propriété background-color :

div{
 background-color : pink;
}

Il existe plusieurs solutions pour définir une couleur : couleur en hexadécimal, couleur nommée, couleur en rgb ou encore couleur en hsl.

Couleur nommée

Les navigateurs peuvent prendre en charge des noms de couleur (140) en anglais (exemple : red)

Syntaxe :

color: grey

Format rgb (red, green, blue)

Permet de représenter le codage d’une couleur en définissant le taux de saturation en rouge, en vert, en bleu sur une échelle de 0 à 255 inclus pour chaque teinte

Syntaxe :

color : rgb(210,255,128)

Format hexadécimal

Composer votre couleur en utilisant des nombres (0 à 9) et les lettres de l’alphabet (de A à F). Les deux premières valeurs sont consacrés à la teinte primaire rouge, les deux suivantes sont consacrés à la teinte primaire verte, les deux dernières sont consacrés à la teinte primaire bleu ;

Syntaxe :

color : #ff0022

Format hsl (hugh, saturation, luminance)

Vous composez votre couleur en jouant sur les paramètres Teinte (H), Saturation (S) et Lumière (L):

  • Teinte : valeur de couleur sur un cercle chromatique de 0° (Rouge) à 360° (Rouge). A 60°: Jaune, à 120°: Vert, à 180°: Cyan, à 240°: Bleu, à 300°: Magenta.
  • Saturation : de 0 à 100%
  • Lumière ou Luminance : de 0 (entièrement noir) à 100% (entièrement blanc). 50% correspond à la teinte de base.

Syntaxe pour le rouge vif :

color : hsl(0, 100%, 50%)

Javascript pour la création d’application mobile

Javascript pour la création d’application mobile

Voici un ensemble de savoir-faire essentiel pour le développement d’application mobile… Dans ce cours nous n’utiliserons pas de bibliothèque pour coder les fonctionnalités.

La notion de vue

La vue en architecture MVC (Model View Controller) permet d’afficher tout le contenu de l’écran. Elle contient :

  • des éléments DOM statiques (balise HTML et texte)
  • des données chargées dynamiquement ( via json)

Pour panacher des valeurs dynamiques (variable) et le contenu statique, vous pouvez exploiter les modèles de libellés qui peuvent intégrer les expressions :

`modele de libellés`

Il suffit d’entourer la chaîne avec des apostrophes graves ` `.

Afficher une variable

Utiliser la syntaxe  ${ } pour l’affichage d’une variable :

let nb = 2;
alert(`la variable nb vaut : ${nb}`);

Afficher une expression

Vous pouvez intégrer une expression dans les modèles de libellés

let nb = 2;
alert(`la variable nb additionnée de 3 vaut : ${nb + 3}`); // affichera 5

Vous pouvez même faire appel à une fonction :

let nb = 2;
function calcul() {
  return 6;
}
alert(`la variable nb vaut : ${nb + calcul()}`); // affichera 8

Création d’une vue

En mixant le HTML avec des valeurs dynamiques vous pouvez coder une vue :

 $("section").innerHTML =` 
<h2>${data.name.first}</h2>
<img src="${data.picture.large}" />
<p>Email : ${data.email}</p>
<p>Ville : ${data.location.city}</p>
<p>Sexe : ${data.gender}</p>
<p>Phone : ${data.phone}</p>
`

Simplifier les fonctions avec les fonctions fléchées

Une fonction fléchée est caractérisée par une syntaxe plus courte et par l’absence du this.

Elle est construite sur la syntaxe globale suivante : argument => instruction

Un exemple de fonction fléchée avec un seul argument :

let calcul = x => x+1;
alert( calcul(2) ); // affiche 3

équivalent à :

let calcul = function(x){ return x+1; }
alert( calcul(2) ); // affiche 3

Un autre exemple avec deux arguments. Il faut utiliser des parenthèses ( ) pour déclarer les arguments :

let calcul = (x,y) => x*y+1;
alert( calcul(2,10) ); // affiche 21

Si le corps de la fonction contient plusieurs instructions il faut faire usage des accolades { }.

let calcul = (x,y) => {
  let resultat = x*y+1;
  return resultat + 10 ;
}
alert( calcul(2,10) ); // affiche 31

Exécuter dynamiquement une fonction

Il est parfois intéressant d’exécuter une fonction sur un ensemble d’objet (tableau DOM, par exemple). Javascript propose la méthode forEach().

let tab = ["chat","chien","chiot"];
let chaine = "";
tab.forEach(element => {
  chaine += element + "s\n" }
);
alert(chaine);
/* affichera 
"chats",
"chiens"
"chiots"
*/

Remarquez l’utilisation de la fonction fléchée vue plus haut.

Si vous voulez recréér un nouveau tableau à partir d’un tableau existant, pensez à utiliser la méthode map().

let tab = ["chat","chien","chiot"];
let pluriels = tab.map(element =>  element + "s" );
alert(pluriels);

Cette méthode est très utile pour reformater un tableau de donnée (json) en tableau DOM pour ensuite créer la vue :

// tableau d'éléments HTML vide
let tab = [];
// préparation de la vue à partir de chaque objet ($obj) du tableau list[]
tab = list.map(obj => { `<li data-ref="${obj.ref}"> ${obj.prenom}</li>` };
// affichage de la vue 
let chaine = tab.join("");

Mettre en place un système de routage

L’idée est de pouvoir changer L’URL et le contenu d’une page sans la recharger.. c’est le principe d’une SPA (simple page application).

Deux solutions s’offrent à nous,

1- générer des URLs de type hash avec # :

http://cc-ng-z.azurewebsites.net/#/session/new

Voir l’exemple en ligne.

2- modifier l’historique de navigation avec l’API History grâce à sa méthode pushState()

let url = contact.html
history.pushState(null, null, url);

En écrivant ceci nous changeons L’URL de la page qui devient /contact.html. 

Il est préférable de ne pas dépendre de l’historique de navigation pour améliorer l’expérience utilisateur. En effet en appuyant sur le bouton actualiser de votre navigateur sur une URL modifiée avec l’API History, ce dernier vous répond que la page n’existe pas. Ceci peut être gênant si vous voulez partager la page sur le net.

Fonctionnement du routage

Nous allons charger les information de Dany et modifier l’URL (#/dany) en cliquant sur un lien  HTML :

<a href="" id="daniel" data-ref="dany"> Dany </a>

Nous annulons la redirection dans le gestionnaire d’événement :

let dany = document.getElementById('daniel');
dany.addEventListener('click', function(e){
   e.preventDefault();
})

Nous récupérons la référence :

let dany = document.getElementById('daniel');
dany.addEventListener('click', function(e){
   e.preventDefault();
   // référence
   var data = e.target.getAttribute('data-ref');
})

Nous appelons le modèle :

let modele = {
  userDetail : function(user){
    var xhr = new XMLHttpRequest();
    xhr.open("GET", "https://domaine.ext/user/", false);
    xhr.onload = function(){
      recup = JSON.parse(xhr.response);
      view.userDetail(recup.results[user]);
    };
    xhr.send();
  },
  /* autres modèles... */

On effectue une requête Ajax  qui retourne un objet JSON. On appelle ensuite la vue qui affiche les informations d’un utilisateur (ici Dany) :

let view = { 
  userDetail: function(data){
    $("info").innerHTML = ` <h2>${data.name.first}</h2><img src="${data.picture.large}" /><p>Email : ${data.email}</p><p>Ville : ${data.location.city}</p><p>Sexe : ${data.gender}</p><p>Phone : ${data.phone}</p>`;
  },
  /* autres vues... */

 

Nous modifions l’URL :

window.location.href = window.location.href.replace(/#(.*)$/, '') + '#' + data;

 

 

 

 

A voir:

  • http://krasimirtsonev.com/blog/article/A-modern-JavaScript-router-in-100-lines-history-api-pushState-hash-url
  • https://css-tricks.com/using-the-html5-history-api/

Veille technologique webdesign

Webdesign : bien organiser sa veille technologique sur le web


Les technologies dans le monde du web évoluent en permanence et très rapidement. Si vous voulez rester à la page, il est important de suivre les actualités et d’utiliser les derniers outils optimisés pour la production d’un site web. Restez aussi informé des bonnes pratiques et des connaissances fondamentales à assimilées en surveillant en permanence les activités dans ce domaine.

En résumé, une bonne veille doit avoir pour objectifs :

  • Bien connaitre l’environnement web mais aussi son évolution
  • Choisir les meilleures sources d’informations utiles
  • Suivre les changements en temps réel
  • Maintenir sa créativité, sa technicité et s’approprier les tendances graphiques

Comment faire une bonne veille?

Faire une bonne veille demande du temps. Voici quelques conseils :

  • Allez sur les sites tutoriels : les pratiques évoluent en permanence dans le domaine du web. Il est important de rester opérationnel dans le processus de fabrication d’un site ou d’une application mobile. Nous avons sélectionner (voir ci-dessous) une liste de site, non-exhaustive, à connaitre dans ce milieu.
  • Suivez les personnes qui sont passionnées. Il vont rassembler des informations utiles et  partager des actualités. Voici des hashtags tweeter qui peuvent vous plaire.
  • Profitez de l’expertise des professionnels. Beaucoup d’agences de communication ou de studios-créa  possèdent des rubriques Blog à travers lequel ils partagent leurs savoir-faire. Voici quelques exemples..
  • Apprendre en observant les autres. Trouvez l’inspiration à travers les créations des web-designers compétents. Je vous invite à suivre les artistes du web à travers les réseaux sociaux spécialisés dans le Webdesign (voir liste ci-dessous)

Sites Web Tutoriels

Nous vous proposons une liste de site web à connaitre pour apprendre correctement à utiliser les langages web.

Smashingmagazine

Ce site propose des conseils ou des techniques de réalisations pour des projets web. L’idée est de s’améliorer, ensemble, en apprenant les uns des autres – c’est l’esprit qui a été le mantra de l’équipe Smashingmagazine pendant toutes ces années.

OpenClassrooms

Openclassrooms est la plateforme la plus connue et reconnue pour apprendre le web.  Elle propose aussi des cours diplômant. Elle veut rendre l’éducation accessible en donnant la priorité à une expérience d’apprentissage communautaire et engageante.

Alsacréation.com

Un site d’actualité sur l’intégration  d’un site internet qui propose des tutoriels classés par catégories : HTML, CSS et javascript, web, responsive, développement…

Alsacréation

Grafikart.fr

Ce site est spécialise dans l’intégration web et propose des tutoriels sous formes de cours vidéos (payant).

grafikart

Codeacademy.com

Vous êtes autodidacte. Vous allez adorer ce site qui vous permet d’apprendre à coder pour le web de manière interactive.

codeacademy

W3school.com

Ce site (en anglais) référence tous les langages web (HTML, CSS, Javascript, PHP, MYSQL) avec de nombreux exemples d’utilisation qui sont simples..

Sites web Inspiration

Voici quelques références utiles pour s’inspirer des bonnes pratiques et découvrir les tendances graphiques du web.

Codrops

Codrops est un blog de conception et développement web qui publie des articles et des tutoriels sur les dernières tendances, techniques et nouvelles possibilités. L’équipe de Codrops est dédiée à fournir un contenu utile, inspirant et innovant.

Vous pouvez voir la démonstration de chaque tutoriel et télécharger gratuitement les sources.

 

The Best Designs

Visitez The Best Designs pour découvrir les concepteurs et les dernières tendances en matière de design.

Behance

Un réseau social de graphistes qui présentent leurs travaux et leurs projets. Une bonne source d’inspiration car vous trouverez beaucoup de ressources et de conseils. Tout le monde peut s’inscrire. Vous pouvez plébisciter et suivre les créateurs.

Dribbble

Dribble fonctionne un peu comme Behance mais vous ne  pouvez rejoindre Dribble que sur invitation seulement.  Il y a donc un certain niveau de conception attendu des membres Dribbble. Vous trouverez souvent un travail de meilleure qualité sur cette plateforme.

Awwwards

Un site qui décerne des prix aux meilleurs sites du monde entier. Une plateforme idéale pour s’inspirer des pratiques des agences web… Vous pouvez évaluer le talent et les efforts des meilleurs concepteurs et développeurs Web.

Siteinspire

Ce site est utile si vous rechercher des exemples de sites en fonction d’une thématique précise (cinéma, restaurant, portfolio..) ou d’une fonctionnalité (animation, single page..).

SiteInspire est une vitrine du meilleur web et design interactif. Vous pouvez soumettre gratuitement votre site.

Muzli

Muzli est une extension de google chrome qui exploite des sources Web de premier plan telles que Dribbble, Behance et Smashingmagazine. L’extension  sélectionne, édite et partage les contenus les plus pertinents dans le domaine du Webdesign.  C’est une source infinie d’idées pour les concepteurs et les professionnels créatifs. Vous serez constamment inspiré!

media queries css

@ MEDIA-QUERIES

Rôle

Les media-queries vont vous permettre d’adapter vos feuilles de style en fonction du type de média (affichage écran, impression..). Une des fonctionnalités des médias-queries est l’utilisation des requêtes qui permettent d’écrire des expressions qui vérifient des conditions particulières des médias, comme la largeurla hauteur ou la couleur, l’orientation (portrait, landscape), la résolution et plus encore..

L’utilisation des requêtes permet de faire du responsive design c’est à dire adapter le design d’un template en fonction des dimensions de l’écran. Une requête des médias se compose d’un type de support et de zéro ou plusieurs expressions qui vérifient les conditions particulières de fonctions multimédia.

Exemple de syntaxe : 

@media screen and (max-width: 300px) {
    h2{
        color:pink;
    }
}

Dans cet exemple, les titres de niveau 2 (sous-titre) seront colorés en rose sur les écrans d’appareil dont la largeur est compris entre 0 et maximum 300px

Type de média

Vous pouvez contrôler plusieurs types de support :

screen
Utilisé pour les écrans d’ordinateur, les tablettes, les smartphones, etc.

@media screen {
    
}
speech
Utilisé pour les lecteurs d’écran qui « lit » la page à haute voix

@media speech {

}
all
Utilisé pour tous les types de support

@media all {

}
print
Utilisé pour les imprimantes

@media print {

}

Syntaxe

Les médias-quéries définissent des expressions logiques dont la réponse est soit « vrai » soit « fausse ». Les feuilles de style seront appliquées si la condition est vérifiée. Vous pouvez donc utiliser des opérateurs :

and
Equivalent du ‘ET’. Le plus souvent utilisé : dans ce cas toutes les conditions doivent être vérifiées

@media screen and (min-width:640px) {

}
only
Signifie ‘UNIQUEMENT’

@media only screen {

}
not
Equivalent du ‘NON’

@media not screen {

}

Il est possible de reproduire le comportement du ‘OU’ en appelant différents media-queries à la suite, séparées par des virgules

@media screen, print {

}

Les caractéristiques

Les caractéristiques des médias ressemblent aux propriétés CSS: ils ont des noms et acceptent certaines valeurs. Il y a, cependant, plusieurs différences importantes entre les propriétés et les caractéristiques des médias

  • Les propriétés sont utilisés dans les expressions pour décrire les critères
  • On évite les caractères « < » et « > » qui peuvent entrer en conflit avec HTML et XML. On fait usage des préfixes min- et max- pour définir des valeurs minimales ou maximales à respecter
  • Les propriétés exigent toujours une valeur pour former une déclaration. Ex: max-width: 300px. Par contre les fonctionnalitées de média (comme ‘color’) peuvent former des expressions sans valeur

Vous pouvez adapter vos feuilles de styles selon plusieurs critères liés aux médias.

aspect-ratio
Valeur : ratio
S’applique à : visuel, tactile
Préfixes min/max : ouiIndique le rapport entre la largeur et la hauteur de la zone d’affichage
device-aspect-ratio
Valeur : ratio
S’applique à : visuel, tactile
Préfixes min/max : ouiIndique le rapport entre la largeur et la hauteur du dispositif

@media all and (device-aspect-ratio: 16/9) {
    
}
color
Valeur : entier
S’applique à : visuel
Préfixes min/max : ouiIndique le nombre de bits par composante de couleur pour le périphérique de sortie

@media all and (min-color: 2) {
    
}
color-index
Valeur : entier
S’applique à : visuel
Préfixes min/max : ouiIndique le nombre de couleurs que le périphérique peut afficher

@media all and (min-color-index: 256) {
    
}

 

device-height
Valeur : longueur
S’applique à : visuel, tactile
Préfixes min/max : ouiIndique la hauteur de l’appareil, comme un écran d’ordinateur. Cette valeur ne peut pas être négative

@media all and (device-height: 600px) {
    
}
device-width
Valeur : longueur
S’applique à : visuel, tactile
Préfixes min/max : ouiIndique la largeur de l’appareil, comme un écran d’ordinateur. Cette valeur ne peut pas être négative

@media all and (device-width: 800px) {
    
}
grid
Valeur : entier
S’applique à : tous
Préfixes min/max : nonIndique si le dispositif est un dispositif de grille (terminal ou petit téléphone avec une seule police) ou bitmap.

@media handheld and (grid) and (max-width: 12em) {
    
}

Pour les petits appareils, le em correspond à la largeur ou hauteur d’une cellule de la grille

height
Valeur : longueur
S’applique à : visuel, tactile
Préfixes min/max : ouiSpécifie la hauteur de la zone d’affichage, comme une fenêtre de navigateur. Cette valeur ne peut pas être négative
width
Valeur : longueur
S’applique à : visuel, tactile
Préfixes min/max : ouiSpécifie la largeur de la zone d’affichage, comme une fenêtre de navigateur. Cette valeur ne peut pas être négative
monochrome
Valeur : entier
S’applique à : visuel
Préfixes min/max : ouiIndique le nombre de bits par «couleur» sur un monochrome (échelle de gris)

@media screen and (min-monochrome: 2) {
    
}

Le CSS s’aplique aux dispositifs monochromes avec au moins 2 bits par pixels

orientation
Valeur : entier
S’applique à : landscape | portrait
Préfixes min/max : nonIndique si l’affichage est en mode paysage ou en mode portrait

@media screen and (orientation:portrait) {
    
}
resolution
Valeur : résolution
S’applique à : bitmap
Préfixes min/max : ouiIndique la résolution de l’appareil, en dpi ou dpcm

@media screen and (min-resolution: 300dpi) {
    
}
scan
Valeur : progressive | interlace
S’applique à : tv
Préfixes min/max : non
Indique le type de balayage d’un téléviseur

@media screen and (scan: progressive) {
    
}

Exemple de gabarit responsive

Utilisez Codepen.

– Le code CSS

– Le code HTML

Résultat

Tester le résultat sur une nouvelle page. Réduisez la taille de la fenêtre pour tester le responsive design

Compatibilité

navigateur-chromenavigateur-firefoxnavigateur-ienavigateur-safarinavigateur-opera
La commande @media est pris en charge par tous les principaux navigateurs
A partir d’Internet Explorer 9