Menu déroulant pour écran tactile

Menu déroulant pour écran tactile

Ne perdez pas vos internautes en mode tactile. Nous vous proposons donc un menu ergonomique qui permet d’accéder au liens qui déroulent même sur les tablettes ou les téléphones mobiles.

Commençons par mettre en place la structure HTML :

<nav>
  <ul>
    <li><a href="#">Accueil</a></li>
    <li class="deroule"><a href="#">About <span class="fleche"></span></a>
      <ul>
        <li><a href="#" onclick="alert(2)">about 1</a></li>
        <li><a href="#">about 2</a></li>
        <li><a href="#">about 3</a></li>
      </ul>
    </li>
    <li class="deroule"><a href="#">Services <span class="fleche"></span></a>
      <ul>
        <li><a href="#">services 1</a></li>
        <li><a href="#">services 2</a></li>
        <li><a href="#">services 3</a></li>
        <li><a href="#">services 4</a></li>
        <li><a href="#">services 5</a></li>
      </ul>
    </li>
    <li><a href="#">Blog</a></li>
    <li><a href="#">Contact</a></li>
  </ul>
</nav>

Un menu n’est rien d’autre qu’une liste de liens. Et pour créer un sous-menu, il suffit seulement d’imbriquer une liste dans une autre liste. Par ailleurs, la balise <span class="fleche"></span> sera utilisée pour éditer la flèche du bas pour les liens contenant des sous-liens.

Présentons maintenant tout ceci avec le CSS :

/* reset */
*{
  box-sizing: border-box;
}
ul{
  list-style-type: none;
  margin: 0;
  padding: 0;
}

/* custom menu */
nav:after{
  content: "";
  clear: both;
  display: block;
}
nav a{
  display: block;
  text-decoration: none;
  white-space: nowrap;
}
nav ul ul{
  background-color: #fff;
  display: none;
  position: absolute;
  min-width: 100%;
}
nav>ul{
  display: flex;
}
nav>ul>li{
  position: relative;
  margin: 1px;
  flex-grow: 1;
}
nav ul ul li+li{
  border-top: 1px solid white;
}
nav ul li a{
  background-color: silver;
  padding: 10px 20px;
  color: black;
  text-align: center;
}
nav>ul>li>a{
  background-color: rgb(63,70,76);
  color: white;
} 
nav ul ul a{
  background-color:  rgb(282,97,1);
  color: white;
}
.fleche {
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 4px;
  vertical-align: middle;
  border-top: 6px solid;
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
}

La mise en page du menu repose sur la technologie Flex et les positions. Nous cachons les sous-menu avec display : none.

Le rôle de Javascript est de faire apparaître ou disparaître les sous-menus selon le comportement de l’internaute :

  • s’il clique sur un lien contenant un sous-menu caché : ce dernier doit s’afficher
  • s’il clique à nouveau sur un lien contenant un sous-menu ouvert: ce dernier doit se cacher
  • s’il clique sur un autre lien : le sous-menu précédemment ouvert doit se cacher
  • s’il clique n’importe ou sur la page en dehors du sous-menu : ce dernier doit se fermer
  • s’il ‘scrolle’ la page : le sous-menu précédemment ouvert doit se cacher

La programmation de cette algorithmie donne le code suivant :

(function() {
  var tabMenu = document.querySelectorAll('.deroule');
  var tabD = document.querySelectorAll('ul ul');
  function deroule(e){
    e.stopPropagation(); 
    obj = this.querySelector('ul');
    if(!this.open){
      tabMenu.forEach(ferme);
      obj.style.display = "block";
      this.open = true;
    }else{
      obj.style.display = "none";
      this.open = false;
    }
  }
  var ferme = function(obj,i){
    tabD[i].style.display = "none";
    obj.open = false;
  }
  var init = function(obj){
    obj.addEventListener("click",deroule);
    obj.open = false;
  }
  tabMenu.forEach(init);
  window.addEventListener("click",function(){
    tabMenu.forEach(ferme);
  });
  window.addEventListener("scroll",function(){
    tabMenu.forEach(ferme);
  });
})();

Testez par vous-même ce code sur Codepen.

Ajouter un effet parallax sur vos pages

Ajouter un effet parallax sur vos pages

Voici un effet à la mode qui impressionne et que je vous invite à tester. Le principe consiste à fixer les images par rapport à l’écran même si l’internaute fais défiler la page. Les images peuvent aussi changer en fonction de la position du curseur du scroll.

Du coté HTML nous prévoyant autant de blocs de contenu (<div class="img1'><div> ..<div class="img1'><div>) que d’images :

<section>
  <h2>titre 1</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo veniam, aperiam harum iusto id aut atque inventore nihil dolores amet suscipit dolorem minima modi est hic distinctio sapiente similique recusandae!</p>
</section>
<div class="img1"></div>
<section>
  <h2>Titre 3</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo veniam, aperiam harum iusto id aut atque inventore nihil dolores amet suscipit dolorem minima modi est hic distinctio sapiente similique recusandae!</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo veniam, aperiam harum iusto id aut atque inventore nihil dolores amet suscipit dolorem minima modi est hic distinctio sapiente similique recusandae!</p>
</section>
<div class="img2"></div>
<section>
  <h2>Titre 3</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo veniam, aperiam harum iusto id aut atque inventore nihil dolores amet suscipit dolorem minima modi est hic distinctio sapiente similique recusandae!</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo veniam, aperiam harum iusto id aut atque inventore nihil dolores amet suscipit dolorem minima modi est hic distinctio sapiente similique recusandae!</p>
</section>

Vous remarquez que chaque bloc est vide. En effet les images seront affichées via le CSS avec la propriété background-image.

h2{
  font-size: 2.5em;
  color: grey;
}
p{
  font-size: 2em;
  color: grey;
}
.img1,.img2{
  height: 200px;
  background-attachment: fixed;
  background-size: cover;
  background-position: 0 center;
}
.img1{
  background-image: url(https://images.unsplash.com/photo-1488327361662-604ecddb43ae?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=b3e645060c979f22f932b76e9df49401);
}
.img2{
  background-image: url(https://images.unsplash.com/photo-1504858800996-480c96c853b5?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=78a6410fcc434b9aea46ce88ba07a049);
}

L’effet parallax s’obtient tout simplement en fixant l’arrière plan avec background-attachment: fixed, en le centrant avec background-position: 0 center et en dimensionnant l’image de fond pour qu’elle recouvre la taille de l’écran avec background-size: cover.



Et c’est tout! Bluffant non! Visualisez sur Codepen le résultat.

 

 

Afficher du contenu au scroll

Afficher du contenu au scroll

Voici un effet impressionnant et pourtant très facile à mettre en place sur vos pages. Le principe consiste à faire apparaître des éléments (images..) lorsque l’internaute découvre votre contenu en scollant vers le bas, comme montré ci-dessous.

Je vous invite à expérimenter cette effet. Commençons par le code HTML :

<main>
  <h1>Effet Scroll</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati nulla harum hic tenetur nam architecto ullam ducimus ab, cum autem tempora id quam quis, ut tempore atque repudiandae totam dolore.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati nulla harum hic tenetur nam architecto ullam ducimus ab, cum autem tempora id quam quis, ut tempore atque repudiandae totam dolore.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati nulla harum hic tenetur nam architecto ullam ducimus ab, cum autem tempora id quam quis, ut tempore atque repudiandae totam dolore.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati nulla harum hic tenetur nam architecto ullam ducimus ab, cum autem tempora id quam quis, ut tempore atque repudiandae totam dolore.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati nulla harum hic tenetur nam architecto ullam ducimus ab, cum autem tempora id quam quis, ut tempore atque repudiandae totam dolore.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati nulla harum hic tenetur nam architecto ullam ducimus ab, cum autem tempora id quam quis, ut tempore atque repudiandae totam dolore.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati nulla harum hic tenetur nam architecto ullam ducimus ab, cum autem tempora id quam quis, ut tempore atque repudiandae totam dolore.</p>
  <figure>
    <img src="https://images.unsplash.com/photo-1485546246426-74dc88dec4d9?ixlib=rb-0.3.5&q=80&fm=jpg&crop=entropy&cs=tinysrgb&w=1080&fit=max&ixid=eyJhcHBfaWQiOjE0NTg5fQ&s=7f0bc29050a6d9a793469d897455f7da" alt="" width="50%" />  
  </figure>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati nulla harum hic tenetur nam architecto ullam ducimus ab, cum autem tempora id quam quis, ut tempore atque repudiandae totam dolore.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati nulla harum hic tenetur nam architecto ullam ducimus ab, cum autem tempora id quam quis, ut tempore atque repudiandae totam dolore.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati nulla harum hic tenetur nam architecto ullam ducimus ab, cum autem tempora id quam quis, ut tempore atque repudiandae totam dolore.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati nulla harum hic tenetur nam architecto ullam ducimus ab, cum autem tempora id quam quis, ut tempore atque repudiandae totam dolore.</p>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati nulla harum hic tenetur nam architecto ullam ducimus ab, cum autem tempora id quam quis, ut tempore atque repudiandae totam dolore.</p>
</main>

Vous remarquez déjà la présence de la balise <figure> qui contient l’image . La technique consiste à faire défiler vers la gauche cette balise lorsque le curseur du scroll s’en approche.  En effet coté CSS, cette balise, par défaut, est cachée par la propriété opacity et positionnée (propriété position) vers la droite avec la propriété left.

figure{
  position: relative;
  left: 60%;
  margin: 0;
  padding: 0;
  opacity: 0;
  transition : all 1.5s ease;
}
body{
  overflow-x: hidden;
}

Voici enfin le code Javascript qui va orchestrer l’effet attendu. Pour éviter les conflits de nommage de variable avec les autres scripts existant, le code est placé dans une fonction anonyme.

(function() {
  
})();

Nous allons surveiller la position du scroll avec l’événement scroll puis changer le style de la balise <figure> (fig), lorsque le curseur du scroll (posCurseur) se trouve à moins de 300px de cette dernière (posImg).

(function() {
  var fig = document.querySelectorAll("figure")[0];
  var posImg = fig.offsetTop;
  function effet(){
    var posCurseur = this.pageYOffset;
    if(posImg-posCurseur<300){
      fig.style.left = 0;
      fig.style.opacity = 1;
    }else{
      fig.style.left = "160%";
      fig.style.opacity = 0;
    }
  }
  window.addEventListener("scroll", effet);
})();

Et voilà, c’est terminer! Simple non! Vous pouvez bien-sur personnaliser ce code pour l’adapter à votre graphisme..

Visualisez sur Codepen le résultat.

 

Héberger son site web facilement

Héberger son site web facilement

Un hébergement web permet de publier votre site sur internet et de le rendre accessible au monde entier.  La mise en ligne du site se fait en quelques étapes :

  • choix d’un hébergeur de qualité proposant des services à moindre coût
  • choix de votre nom de domaine offert avec l’hébergement
  • téléchargement de vos fichiers en ligne

Bien choisir son nom de domaine

Le nom de domaine est l’adresse de votre site. Cette information est à fournir dans la barre d’adresse du navigateur pour accéder à la page d’accueil de votre site. Le nom de domaine est unique. Si vous acheter un pack d’hébergement web, un nom de domaine (au moins, selon l’offre) vous sera offert. Il est important de bien réfléchir à ce nom, il doit bien représenter votre site.

Les différentes extensions

Le nom de domaine comprend le nom qui est important mais aussi l’extension (.com, .fr..).  Si votre entreprise à une portée nationale, choisissez le .fr, si sa portée est internationale, prenez un .com. Pour une association ou une organisation, optez pour le .org. Si le .com et le fr n’est pas disponible, vous pouvez vous orienter vers un .net même si ce n’est pas, contrairement au .com, le suffixe de marque sur internet.

Réfléchissez bien à ces deux aspects (nom de domaine et extension), sinon vous risquez de souffrir d’un manque de crédibilité aux yeux des internautes.

Les pièges à éviter

Quand on doit choisir un nom de domaine il ne faut pas prendre celui que vous préférez mais celui que l’internaute aurait préféré retenir :

* ne pas utiliser un nom composé avec trop de mot : limitez-vous à 3 -4 maximum
* évitez un nom imprononçable : mettez vous à la place de celui qui souhaite recommander votre site
* faire attention aux mots difficilement orthographiable : verre, vers, vert..
* soyez prudent avec les traits d’union (mon-chien.com). A l’heure actuelle Google est tout à fait capable de distinguer les différents mots présents dans le nom de domaine. C’est un programme intelligent. Le véritable souci se situe surtout du cotés de l’internaute qui doit taper le nom de domaine dans le moteur de recherche du navigateur. Dans le doute de savoir s’il faut mettre ou pas des tirets, il est plus pratique pour l’internaute de taper sans tiret.

Mettre son site en ligne  en moins de dix minutes

Un site web n’est rien d’autre qu’un ensemble de fichiers reliés entre eux et utilisant des langages web (html, css…). Ces fichiers peuvent être déposés dans votre espace web via un logiciel utilisant un protocole de transfert (FTP), comme Filezilla. Mais vous pouvez aussi utiliser, comme expliqué ci-dessous, le service de transfert rapide de votre hébergeur.

Effectivement, si votre site est prêt, nous allons vous montrer comme procéder à la mise en ligne de tous vos fichiers!

Exemple de site
Exemple de site

Commander un hébergement chez 1&1 ionos

Le fournisseur 1&1 est l’un des leaders mondiaux d’hébergement Web. Un fournisseur qui offre, selon nous,  toutes les ressources disponibles pour créer et maintenir facilement et à moindre coût une présence optimale sur le Web. Notre site est d’ailleurs hébergé chez eux!

Commencez par visitez leur pageVoici une capture d’écran de la démarche à suivre!

Héberger son site
Héberger son site

Lorsque votre hébergement est créé, il vous suffit de vous connecter à votre espace et de cliquer sur Hébergement puis sur utiliser l’espace web. Vous accédez ainsi à votre espace web distant.

La nomenclature (organisation des dossiers et des fichiers) de votre site en ligne doit être identique à celle qui se trouve sur votre ordinateur.

Exemple de nomenclature
Exemple de nomenclature

Il faut donc créer cette nomenclature sur votre espace distant, puis déposer tous vos fichiers (n’oubliez pas vos images et vos fichiers javascript):

Et c’est terminer … votre site est en ligne. Il suffit, depuis votre navigateur, de vous connecter à votre site :  domainedemonsite.com.

 

Créer un menu latéral animé

Créer un menu latéral animé

Idéal pour les formats mobiles, voici un menu latéral animé facile à faire dont l’ouverture est déclenchée par Javascript.

Menu latéral animé
Menu latéral animé

Commençons par la structure HTML :

<!-- Navigation -->
<nav id="slide-menu">
  <ul>
    <li class="timeline"><i class="fa fa-home" aria-hidden="true"></i> Accueil</li>
    <li class="events"><i class="fa fa-info-circle" aria-hidden="true"></i> A propos</li>
    <li class="calendar"><i class="fa fa-calendar-o" aria-hidden="true"></i> Calendar</li>
    <li class="sep settings"><i class="fa fa-picture-o" aria-hidden="true"></i> Photos</li>
    <li class="logout"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Contact</li>
  </ul>
</nav>
<!-- Contenu de la page -->
<div id="content">
  <div class="menu-trigger"><i class="fa fa-bars" aria-hidden="true"></i></div>
  <h1>Menu bar pour mobile</h1>
  <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit consectetur modi omnis aut illo, officiis numquam rerum. Doloribus dignissimos quo quis, vero cumque provident quae officia error, unde ducimus reiciendis!</p>
  	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit consectetur modi omnis aut illo, officiis numquam rerum. Doloribus dignissimos quo quis, vero cumque provident quae officia error, unde ducimus reiciendis!</p>
  	<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Fugit consectetur modi omnis aut illo, officiis numquam rerum. Doloribus dignissimos quo quis, vero cumque provident quae officia error, unde ducimus reiciendis!</p>
</div>

Le menu hamburger (ou menu bar) est édité par le code  HTML

<div class="menu-trigger"><i class="fa fa-bars" aria-hidden="true"></i></div>

Les icônes sont importées par une police de caractère nommée font-awesome. Cette appel se fait via le fichier CSS :

@import url(https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.6.3/css/font-awesome.min.css);

body {
  margin: 0;
  background: #556270;
  color: #353d46;
  font: 18px/27px 'Oxygen', sans-serif;
  overflow-x: hidden;
}
h1, h2, h3 {
  color: #FF6B6B;
  margin: 0 0 27px;
  line-height: 1em;
}
/*
Menu
*/
nav#slide-menu {
  position: fixed;
  overflow-y: auto;
  top: 0;
  left: -100px;
  bottom: 0;
  display: block;
  float: left;
  width: 100%;
  max-width: 284px;
  height: 100%;
  -moz-transition: all 300ms;
  -webkit-transition: all 300ms;
  transition: all 300ms;
}
nav#slide-menu > ul {
  display: block;
  margin: 40px;
  padding: 0;
  list-style: none;
  opacity: 0.5;
  -moz-transition: all 100ms;
  -webkit-transition: all 100ms;
  transition: all 100ms;
}
nav#slide-menu > ul li {
  color: #dfe5eb;
  padding: 6px 0;
  cursor: pointer;
}
nav#slide-menu > ul li:hover {
  color: #59e9df;
}
nav#slide-menu > ul li.sep {
  margin-top: 7px;
  padding-top: 14px;
  border-top: 1px solid #6b7b8d;
}
body.menu-active nav#slide-menu {
  left: 0px;
}
body.menu-active nav#slide-menu ul {
  left: 0px;
  opacity: 1;
}

/*
Contenu
*/
div#content {
  position: fixed;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  padding: 60px;
  overflow-y: scroll;
  overflow-x: hidden;
  background: #fcfeff;
  border-radius: 0;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  -moz-box-shadow: -3px 0 6px #4a5562;
  -webkit-box-shadow: -3px 0 6px #4a5562;
  box-shadow: -3px 0 6px #4a5562;
  -moz-transition: all 300ms;
  -webkit-transition: all 300ms;
  transition: all 300ms;
}
div#content div.menu-trigger {
  position: absolute;
  top: 10px;
  left: 10px;
  padding: 1px 7px;
  background: #dfe5eb;
  cursor: pointer;
  border-radius: 5px;
  -moz-transition: all 300ms;
  -webkit-transition: all 300ms;
  transition: all 300ms;
  text-align: center;
}
div#content div.menu-trigger:hover {
  background: #556270;
}
div#content div.menu-trigger:hover:before {
  color: #fcfeff;
}
body.menu-active div#content {
  left: 284px;
}

L’animation du menu qui slide quand on clique sur l’icône bar se fait avec le CSS3. Le bloc menu #slide-menu et le bloc contenu #content sont en position fixed. On applique sur ces sélecteurs la propriété transition qui permet de modifier les valeurs de tous les attributs de manière progressive.

transition: all 300ms;

Pour déplacer le menu et le contenu principal vers la droite ou la gauche, on modifie leur valeur left :

– pour le menu

body.menu-active nav#slide-menu ul {
  left: 0px;
  opacity: 1;
}

– pour le contenu

body.menu-active div#content {
  left: 284px;
}

Vous remarquez que ces changements sont appliqués si le body possède la classe .menu-active. Et c’est Javascript qui va ajouter ou supprimer cette classe.

/*
  Slidemenu
*/
(function() {
  var $body = document.body
  , $menu_trigger = $body.getElementsByClassName('menu-trigger')[0];

  if ( typeof $menu_trigger !== 'undefined' ) {
    $menu_trigger.addEventListener('click', function() {
      $body.className = ( $body.className == 'menu-active' )? '' : 'menu-active';
    });
  }

})();

Pour éviter les conflits de nommage de variable avec les autres scripts existant, le code est placé dans une fonction anonyme.

Vous pouvez bien-sur personnaliser ce code pour l’adapter à votre graphisme..

Visualisez sur Codepen le résultat.

Créer un menu sticky en javascript

Créer un menu sticky en javascript

Voici un effet bluffant et pourtant assez simple à mettre en place en javascript. Le principe est de fixer le menu en haut de l’écran lorsque l’on ‘scrolle’ vers le bas.

menu sticky
menu sticky

Commençons avec la structure HTML :

<header>Entete</header>
<nav>Menu</nav>
<div> lorem</div>
<div> contenu 3</div>
<div> contenu 4</div>
<div> contenu 5</div>
<div> contenu 7</div>
<div> contenu 8</div>
<div> contenu 9</div>
<div> contenu 10</div>
<div> contenu 11</div>
<div> contenu 12</div>
<div> contenu 13</div>
<div> contenu 14</div>
<div> contenu 15</div>

Le code HTML est simple et contient la balise <nav>. Et voici, à présent,  le code CSS qui ‘customise’ les éléments :

body{
  position: relative;
  font-family: verdana;
  background-color: rgb(236,240,241);
}
p{
  margin: 1em 0;
}
header{
  height: 100px;
  line-height: 100px;
  width: 100%;
  color: white;
  background-color: rgb(63,70,76);
  text-transform: uppercase;
  text-align: center;
}
nav{
  height: 50px;
  line-height: 50px;
  width: 100%;
  background-color: rgb(282,97,1);
  text-transform: uppercase;
  text-align: center;
  position: relative;
  color: white;
}
nav img{
  position: absolute;
  height: 50px;
  left: 30px;
  top: 0 ;
  border-radius: 20px;
  transition : all 1s ease;
}
div{
  height: 200px;
  width: 80%;
  margin: 0 auto;
  background-color: rgb(152,131,96);
  color: white;
  padding: 10px;
}

Aucune difficulté particulière concernant ce code! Maintenant intéressons nous au code Javascript.

Commençons par créer une fonction anonyme qui s’exécute au chargement de la page. Obtenez plus d’information sur les fonctions anonymes.

(function() {
 //script
})()

Puis ciblons l’objet HTML <nav> :

(function() { 
  // on cible l'objet nav
  let objNav = document.querySelectorAll("nav");
})()

Rajoutons le gestionnaire d’événement qui se déclenche quand on ‘scrolle’ et qui appelle la fonction  sticky:

(function() { 
  // on cible l'objet nav
  let objNav = document.querySelectorAll("nav");
  // evenement
  window.addEventListener("scroll", sticky);
})()

Mémorisons la position de l’objet nav, au chargement de la page, avec la propriété offsetTop :

(function() { 
  // on cible l'objet nav
  let objNav = document.querySelector("nav");
  // on mémorise la position de nav
  let memoPositionNav = objNav.offsetTop;
  // evenement
  window.addEventListener("scroll", sticky);
})()

Créons la fonction sticky :

function() { 
  // on cible l'objet nav
  let objNav = document.querySelector("nav");
  // on mémorise la position de nav
  let memoPositionNav = objNav.offsetTop;
  function sticky(){
    
  }
  // evenement
  window.addEventListener("scroll", sticky);
})()

Modifions le style CSS de nav en fonction de la différence de distance entre la position du scroll et le menu <nav>. En effet lorsque cette distance est inférieur à 1px, l’objet HTML <nav> passe en position fixed.

La position du curseur quand on ‘scrolle’ est donnée par la propriété pageYOffset de l’objet window :

// position du curseur au scroll
var posCurseur = this.pageYOffset;
// je teste la différence de distance entre le scroll et nav
if(memoPositionNav-posCurseur<1){
  objNav.style.position = "fixed";
  objNav.style.top = 0;
  objNav.style.zIndex = 999;
}
if(posCurseur<101){
  objNav.style.position = "relative";
}

Le code complet est le suivant :

(function() { 
  // on cible l'objet nav
  let objNav = document.querySelector("nav");
  // on mémorise la position de nav
  let memoPositionNav = objNav.offsetTop;
  function sticky(){
    // position du curseur au scroll
    var posCurseur = this.pageYOffset;
    // je teste la différence de distance entre le scroll et nav
    if(memoPositionNav-posCurseur<1){
      objNav.style.position = "fixed";
      objNav.style.top = 0;
      objNav.style.zIndex = 999;
    }
    if(posCurseur<101){
      objNav.style.position = "relative";
    }
  }
  // evenement
  window.addEventListener("scroll", sticky);
})()

Et voila un effet sympa que l’on retrouve sur beaucoup de site et qui n’est par forcément difficile à mettre en place. Nous n’avons pas besoin de recourir à un framework!

Testez sur Codepen ce code!

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.