blog

Tableaux, JS et GSAP

Dans les trucs et astuces de la programmation, une notion est importante, celle des tableaux.
L’écriture passe par des crochets et des virgules et on accède aux différentes entrées par des crochets et un nombre.

var tableau = [10,15,42]; // un tableau
console.log(tableau[0]); // 10
console.log(tableau[1]); // 15
console.log(tableau[2]); // 42

On peut compter le nombre d’éléments dans un tableau avec la propriété length

console.log(tableau.length); // 3

La maitrise des tableaux passe par l’usage des boucles.

var tableau = [10,15,42]; // un tableau
for(i=0;i<tableau.length;i++){
console.log(i+'--->'+tableau[i]);
}
// 0--->10
// 1--->15
// 2--->42

Application avec GSAP

Je créé un tableau par point d’un trajet :

var fr = [0,0];
var be = [0,-200];
var ch = [-200,-200];
var es = [0,200];
var uk = [-100,-100];

Je créé un tableau pour un trajet en combinant les deux :

var e32 = [be,ch,uk,es,fr]; // oui c'est possible !
console.log(e32[0][1]); // e[32][0] donne be et be[1] donne -200
À cette étape, il faut ouvrir la console de Chrome et faire des tests !
var tl32 = new TimelineMax({repeat:-1});
 
var fr = [0,0];
var be = [0,-200];
var ch = [-200,-200];
var es = [0,200];
var uk = [-100,-100];
 
var e32 = [be,ch,uk,es,fr];
 
for(i=0;i<e32.length;i++){
  tl32.to('#e32',.5,{
    x:e32[i][0],
    y:e32[i][1]
  });
}

See the Pen tableau + gsap + tl by Benoît Wimart (@benoitwimart) on CodePen.0

boing : rebondir

Cette semaine, une base de script pour faire un rebond façon pong avec un algorithme simplifié.
Pour la partie « mathématiques », le rebond consiste à inverser la direction du mouvement (en x comme en y selon le mur).
Si vous avancez de deux pas devant vous, pour simuler un rebond contre un mur, dès que vous serez contre le mur, il faudra avancer de moins deux pas (ou reculer de deux pas), on maintient ainsi la même vitesse.

Pour la partie code, la boucle dessine() est optimisée pour une vitesse d’affichage de 60 images par seconde, avec l’usage de requestAnimationFrame(), il s’agit d’un setInterval plus optimisé pour les animations fluides.

Note : ce code n’est pas parfait, GSAP est là pour une éventuelle amélioration et le déplacement du rectangle serait plus optimisé avec un translation « transform ».
// je sélectionne mon rectangle
var rect = document.querySelector("rect");
// j'assigne à celui-ci un déplacement en x et en y
rect.vx = 2;
rect.vy = 3;
 
// je crée une fonction dessine avec un auto appel rAF (boucle) à la fin de celle-ci
function dessine() {
  // je récupère les attr x et y du rect dans le svg
  var a = Number(rect.getAttribute("x"));
  var b = Number(rect.getAttribute("y"));
  // si ces points sont hors cadre, j'inverse le déplacement, c'est le test de collision et le rebond
  if (a < 0 || a > 350) {
    rect.vx = -rect.vx;
  }
  if (b < 0 || b > 350) {
    rect.vy = -rect.vy;
  }
  // je mets à jour x et y
  TweenMax.set(rect, {
    attr: {
      x: a + rect.vx,
      y: b + rect.vy
    }
  });
  // la boucle rAF = 60fps si possible
  window.requestAnimationFrame(dessine);
}
 
// je lance la fonction
dessine();

See the Pen SVG rect /dessine by Benoît Wimart (@benoitwimart) on CodePen.0

GSAP + SVG

Pour un sujet de cours autour du SVG et du JavaScript voici un article de remise en forme.

Les bases du SVG

Le SVG est un format de dessin vectoriel, vous pouvez en créer et éditer avec Illustrator, Sketch, Inkscape, mais aussi directement à la main.
Le code du fichier est lisible avec un éditeur de type Brackets ou autres et utilise une base xml. On retrouve donc des balises, des attributs et des choses très similaires au HTML.
Quelques noms de balises :

  • svg (la base du document)
  • g pour groupe
  • path pour chemin
  • circle pour cercle
  • rect pour rectangle
  • line pour ligne
  • defs et use pour les symboles

Dans les points importants à connaître, le SVG permet de nommer les éléments via des ID et des Class, ce qui est fortement utile pour GSAP.

Illustrator est une usine à gaz, ses SVG sont parfois problématiques, évitez les fonctions trop complexes (transparence, pathfinder, masque, maillage et effets. Exportez votre travail et observez le code, celui-ci doit être assez lisible. Si cela est nécessaire de faire des effets, faites une recherche sur le MDN de Mozilla pour reproduire les ombres, les dégradés…

Les bases de GSAP

GSAP est une libraire JavaScript. Son usage principal est de réaliser des animations pour le web (et parfois des interfaces). Dans les fonctions proposées, la création d’une timeline virtuelle permet de créer et d’ajuster rapidement des animations complexes. À la manière d’un After Effects, on ajoute des éléments, des transitions, des points et on contrôle l’ensemble avec du code à la place d’une interface.

Avoir des connaissances en JavaScript permet d’aller plus loin, mais créer une simple animation ne demande pas énormément de vocabulaire et grammaire JavaScript.

GSAP avec SVG

Pourquoi du SVG ?

  • GSAP peut animer du HTML, mais celui-ci peut avoir ses limites, animer les éléments dans un SVG est bien souvent plus performant.
  • Le SVG est parfait pour un résultat lisse, fluide avec des formes complexes.
  • Vous connaissez suffisamment Illustrator et le design graphique pour produire de belles formes.

Bouts de code pratique

Savoir utiliser TimelineMax suffit à produire des animations évoluées.
Notamment avec timeline.to(‘sélecteur’,durée en secondes,{propriété à animer : valeur, autre propriété à animer : valeur});

Animer un élément par son ID.

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <svg width="800" height="800">
   <circle id="cercle" r="30" cx="30" cy="60" />
  </svg>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
  <script>
    tl = new TimelineMax(); // je crée une timeline
    tl.to('#cercle', 10, {  // j'ajoute une transition 'to' à ma 'tl' pour '#cercle' pendant 10 s
      x: 500, // va à droite de 500px (on n'oublie pas la virgule)
      y: 200  // va en bas de 200px (pas de virgule pour le dernier)
    });
  </script>
</body>
</html>

Animer certaines balises.

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <svg width="800" height="800">
   <circle r="30" cx="30" cy="60" />
   <circle r="20" cx="170" cy="60" />
  </svg>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
  <script>
    tl = new TimelineMax();
    tl.to('circle', 10, {
      x: 30,
      y: 20
    });
  </script>
</body>
</html>

Animer les éléments d’une même class.

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
<body>
  <svg width="800" height="800">
    <style>.color{fill:#f60}</style>
   <circle r="20" cx="30" cy="30" />
   <circle class="color" r="20" cx="30" cy="90" />
   <circle class="color" r="20" cx="30" cy="150" />
    </svg>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
  <script>
    tl = new TimelineMax();
    tl.to('.color', 5, {
      x: 300,
      fill:'black', // en svg background-color = fill
      opacity:0.3
    });
  </script>
</body>
</html>

D’autres combinaisons sont possibles pour cibler les éléments à animer, on utilise les mêmes sélecteurs qu’en CSS.
Exemples :

  • ‘#voiture-verte .roues’ toutes les .roues de mon élément #voiture-verte
  • ‘.nuages:nth-of-type(3)’ le 3e élément à avoir la class nuages
  • ‘line:nth-child(2n)’ une ligne sur deux

Le chainage.
Les transitions ajoutées à la timeline s’enchainent.

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
</head>
 
<body>
  <svg width="800" height="800">
    <style>.color{fill:#f60}</style>
    <circle r="20" cx="30" cy="30" />
    <circle class="color" r="20" cx="30" cy="90" />
    <circle class="color" r="20" cx="30" cy="150" />
  </svg>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
  <script>
    tl = new TimelineMax();
    tl.to('.color', 1, {
      x: 300,
      fill: 'black',
      opacity: 0.3
    });
    tl.to('circle', 1, {
      x: 30,
      fill: '#f60',
      opacity: 1
    });
  </script>
</body>
</html>

Les plugins

Pour répondre à des usages différents, GSAP propose des extensions gratuites et payantes.
DrawSVG permet d’animer un tracé en dessinant une partie ou l’intégralité de celui-ci ; ce plugin est payant mais testable sur Codepen. Si vous l’avez sur votre machine, il doit être dans le même dossier que votre html.
AttrPlugin permet d’animer les attributs d’un élément SVG.
Il est présent par défaut dans cette version :

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>

ou il faut l’ajouter avec ce script en plus :

<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/plugins/AttrPlugin.min.js"></script>

Les bidouilles de codeurs

Voici une démo avec du code JS avancé pour cloner les nœuds du SVG (nœud = l’élément et ses enfants).

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Tap tap tap</title>
  <style>
    body{
      background: #000;
    }
  </style>
</head>
 
<body>
  <svg id="root" width="800" height="800">
    <defs>
      <g id="Port">
         <text x="0" y="0" font-family="Verdana" fill="#fff" font-size="15">A</text>
      </g>
    </defs>
    <use x="500" y="500" href="#Port" />  
  </svg>
 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
 
  <script>
    var svg = document.querySelector('#root');
    var symbole = document.querySelector('use');
    /* la boucle */    var intervalID = window.setInterval(myCallback, 100);
    var count=0;
 
 
    function myCallback() {
      count++;
      var clone = symbole.cloneNode('true');
      var random_a = Math.random() * 800 - 400; // un chiffre entre -400 et 400
      var random_b = Math.random() * 800 - 400;
      svg.appendChild(clone);
      // V1 pour une animation plus complexe 
      //tl = new TimelineMax();
      //tl.to('use:last-child',2,{x:random_a,y:random_b,opacity:0});
      // V2 juste une transition 
      TweenMax.to('use:last-child',2,{x:random_a,y:random_b,rotation:random_b,opacity:0});
 
      // suppression des clones après 25 boucles
      if(count>25){
        svg.removeChild(document.querySelector('use'));
      }
    }
 
    /* BONUS CLAVIER */ 
    document.addEventListener('keydown',function(e){
      console.log(e.key);
      // on change le texte du symbole
      document.querySelector('#Port text').innerHTML = e.key;
    })
 
  </script>
 
</body>
</html>

Variation sans aléatoire

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <style>
    body{
      background: #000;
      width:800px;
      margin:20px auto;
    }
  </style>
</head>
 
<body>
  <svg id="root" width="799" height="800"><!--les valeurs sont ajustées-->
    <defs>
      <g id="Port">
         <text x="3" y="-5" font-family="Verdana" fill="#fff" font-size="15">A</text>
      </g>
    </defs>
    <use x="400" y="400" href="#Port" />  
  </svg>
 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
 
  <script>
    var svg = document.querySelector('#root');
    var symbole = document.querySelector('use');
 
    // la boucle
 
    var intervalID = window.setInterval(myCallback, 16);
    var count=0;
 
 
    var x = 400; // même centre que le symbole
    var y = 400;
    var mx = 18; // mouvement en x
    var my = 21; // mouvement en y
 
    function myCallback() {
      count++;
      var clone = symbole.cloneNode('true');
      x=x+mx; // déplacement
      y=y+my;
      posx = x - 400; // position par translation 
      posy = y - 400;
 
      // le rebond 
 
      if(posx >= 400 || posx<-400){
       mx = mx* -1; // on inverse la direction
      }
 
      if(posy >= 400 || posy<-400){
       my = my* -1; // on inverse la direction
      }
 
      svg.appendChild(clone);
      // note : l’usage de GSAP n’est pas forcement justifié dans cette exemple
      TweenMax.to('use:last-child',0,{x:posx,y:posy}); // en mettant 3 à la place de 0 c’est amusant
 
      // suppression des clones après x boucles
      if(count>1000){
        svg.removeChild(document.querySelector('use'));
      }
    }
 
    /* BONUS */ 
    document.addEventListener('keydown',function(e){
      console.log(e.key);
      // on change le texte du symbole 
      document.querySelector('#Port text').innerHTML=e.key;
 
      // l'effet ci-dessous n'est pas extra, 
      // mais je le laisse en commentaire pour faire des tests 
      //var tl = new TimelineMax();
      //tl.staggerFromTo('use',.3,{rotation:0},{rotation:360},-.05);
    })
 
  </script>
 
</body>
</html>

Centrage.

<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="UTF-8">
  <title>Tap tap tap</title>
  <style>
    body{
      background: #222;
      height:99vh;
      margin:0;
    }
  </style>
</head>
 
<body>
  <svg id="changement" width="100%" height="100%">
    <defs>
      <g id="Port">
         <text x="0" y="0" font-family="Verdana" fill="#fff" font-size="15">A</text>
      </g>
    </defs>
    <rect x="0" y="20" width="800" height="800"/>
 
    <g id="root">
      <use x="400" y="400" href="#Port" />
    </g>
  </svg>
 
  <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.20.3/TweenMax.min.js"></script>
 
  <script>
    var svg = document.querySelector('#root');
    var symbole = document.querySelector('use');
    /* la boucle */    var intervalID = window.setInterval(myCallback, 100);
    var count=0;
    var w = window.innerWidth/2;
 
    // je centre le rect et mon groupe #root
    TweenMax.set('rect,#root',{x:w-400});
    function myCallback() {
      count++;
      var clone = symbole.cloneNode('true');
      var random_a = Math.random() * 2000 - 1000; // un chiffre entre -400 et 400
      var random_b = Math.random() * 1000 - 500;
      svg.appendChild(clone);
      // V1 pour une animation plus complexe 
      //tl = new TimelineMax();
      //tl.to('use:last-child',2,{x:random_a,y:random_b,opacity:0});
      // V2 juste une transition 
      TweenMax.to('use:last-child',2,{x:random_a,y:random_b,rotation:random_b,opacity:0});
 
      // suppression des clones après 25 boucles
      if(count>25){
        svg.removeChild(document.querySelector('use'));
      }
    }
 
    /* BONUS CLAVIER */ 
    document.addEventListener('keydown',function(e){
      console.log(e.key);
      // on change le texte du symbole
      document.querySelector('#Port text').innerHTML = e.key;
    })
 
  </script>
 
</body>
</html>

Les bidouilles de graphistes

  • Pour masquer un élément on peut mettre l’opacité à 0 (avec GSAP ou Illustrator),
  • Si vous ne savez pas cloner en code, clonez dans Illustrator ou Brackets (attention à ne pas cloner les ID)

Les erreurs

  • Confusions entre ID, Class et balise,
  • Balises non-fermées sur script ou svg…
  • Si on ouvre une parenthèse ou un crochet ou un accolade, il faut la fermer,
  • Les virgules, les points et les points-virgules sont sources de problèmes.

En cas d’erreur, toujours regarder dans la console, voir la ligne soulignée ou celle avant, relire la doc et repartir d’un exemple !

421, algorithme et JavaScript

Voici un algorithme basé sur le jeu du 421, on lance trois dés et on veut savoir si on a un 4, un 2 et un 1.
La première étape consiste à traduire les dés en code.
Je crée trois variables a, b, c et j’y associe un chiffre entier au hasard entre 1 et 6 inclus.

  /*
  les 3 dés 
  */
 
  /* un chiffre entier aléatoire entre 1 et 6 */
  // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random
  function getRandomIntInclusive(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min + 1)) + min; 
    //The maximum is inclusive and the minimum is inclusive 
  }
 
  /* 1er chiffre */
  var a = getRandomIntInclusive(1,6);
  /* 2e */
  var b = getRandomIntInclusive(1,6);
  /* 3e */
  var c = getRandomIntInclusive(1,6);

Avec les nouvelles fonctions du JavaScript es6, on peut savoir si un tableau contient une valeur précise (il s’agit d’une boucle adaptée).

  var tableau = [a,b,c];
  tableau.some(function(e){return e === 4;}) // true

Il reste à mettre ceci dans une condition (if) avec l’opérateur logique « et (&&) » et notre algorithme est opérationnel.

   if(
    tableau.some(function(e){return e === 4;}) && 
    tableau.some(function(e){return e === 2;}) && 
    tableau.some(function(e){return e === 1;})
  ){
   console.log('win'); 
  }else{
   console.log('loose');
  }

Ton astuce est plus grande que la mienne

Vous trouverez sur le net d’autres algorithmes plus ou moins lisibles, mais il existe pour le 421, une astuce magique.
1re remarque
Si vous faites 4 × 2 × 1 ou 2 × 4 × 1, qu’importe l’ordre, on obtient 8. A-t-on une autre combinaison qui fait 8… hélas oui, 2 × 2 × 2 = 8.
2e remarque
Si vous faites 4 + 2 + 1 qu’importe l’ordre, on obtient 7. A-t-on une autre combinaison qui fait 7, hélas oui 3+3+1 ou 5+1+1.
3e remarque
À priori, ni la première remarque, ni la seconde s’avère utile pour faire un algorithme et pourtant il suffit de combiner les deux et vous avez un test parfait, rapide et efficace.
Si dé1 × dé2 × dé3 = 8 ET dé1 + dé2 + dé3 = 7, on a bien un 421.

Code final

  /*
  les 3 dés 
  */
 
  /* un chiffre entier aléatoire entre 1 et 6 */
  // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random
  function getRandomIntInclusive(min, max) {
    min = Math.ceil(min);
    max = Math.floor(max);
    return Math.floor(Math.random() * (max - min + 1)) + min; 
    //The maximum is inclusive and the minimum is inclusive 
  }
 
  /* 1er chiffre */
  var a = getRandomIntInclusive(1,6);
  /* 2e */
  var b = getRandomIntInclusive(1,6);
  /* 3e */
  var c = getRandomIntInclusive(1,6);
 
 
  /* algo I moderne en es6 */
  var tableau = [a,b,c];
 
  console.log(tableau);
 
  /* a-t-on un 4 ET */
  /* a-t-on un 2 ET */
  /* a-t-on un 1 ? */
 
  // https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/some
 
  if(
    tableau.some(function(e){return e === 4;}) && 
    tableau.some(function(e){return e === 2;}) && 
    tableau.some(function(e){return e === 1;})
  ){
   console.log('win'); 
  }else{
   console.log('loose');
  }
 
  /* algo II classique */
  /* malin */
  if(a*b*c === 8 && a+b+c === 7){
   console.log('smart win'); 
  }else{
   console.log('smart loose'); 
  }

See the Pen 421 by Benoît Wimart (@benoitwimart) on CodePen.0

JavaScript, GSAP, responsive

Petites compilations de ressources pour mi-décembre.

2016 & GSAP

Après avoir vu cet exemple utilisant GSAP et drawSVG : https://jenseign.com/2016/ ;
j’ai isolé la partie du code dans un CodePen. Le résultat est moins intéressant que la carte de vœux car c’est le tracé du SVG qui joue le rôle essentiel (il faut cliquer pour lancer la lecteur), mais la base du JavaScript est presque la même.

See the Pen drawSVG – 2016 by Benoît Wimart (@benoitwimart) on CodePen.0

Bonus : Fiche GSAP dans Ressources

Apprendre le JavaScript

Pour vous rafraichir les idées et revoir les bases du JavaScript, Codecademy propose un outil pratique (attention les derniers chapitres ne sont plus pour les débutants).
En alternative française, vous trouverez quelques sites dans les ressources (à compléter).

Site du jour

Dix idées de mise en page et pas envie de trancher, faites dix points de rupture (site à tester en responsive) !
https://lynnandtonic.com/

Le H1 logo

Vous verrez souvent une technique CSS ancestrale du text-indent:-9999px pour cacher un texte d’un h1 et mettre une image de fond afin d’avoir l’entête du site avec un logo. Finalement, cette technique n’apport rien et Google suggère cette écriture plus simple.

<h1>
  <a href="http://jenseign.com">
    <img src="logo-jenseign.png" alt="hypertext markup language" />
  </a>
</h1>

Il vous reste à régler le CSS pour avoir un résultat parfait. N’oubliez pas la balise alt obligatoire et vous pouvez aussi mettre un SVG en image si cela optimise le poids.

source

Mettre en ligne son site, erreurs fréquentes

Suite à la mise en ligne de nombreux projets d’étudiants, voici une liste d’erreurs et leurs solutions.

Le FTP

Plusieurs logiciels permettent de téléverser vos fichiers sur votre serveur, les plus connus sur Mac étant CyberDuck et FileZilla (en version client pas serveur).

Si la connexion ne marche pas sur votre ordinateur, l’erreur vient de votre hébergeur (c’est rare, mais testez sur une autre machine), de votre logiciel (changez de logiciel ou réinstallez), de vos réglages (FTP, pas Webdav ou autres), ou de vos identifiants (on copie/colle !).

Pour une connexion « normal », il vous faut trois informations :

  1. L’adresse du serveur (p05.evxonline.net, ftp.cluster014.ovh.net, ftp.votrenomdedomaine.com)
  2. Votre identifiant (souvent en rapport avec le nom de domaine)
  3. Votre mot de passe (en général une chaîne complexe imposée par votre hébergeur)

La connexion n’est pas anonyme et le port est souvent celui par défaut (21).

Avant envoyer vos fichiers, il faut comprendre que votre hébergeur a configuré le serveur web ET le serveur FTP pour que les deux soient liés. En envoyant vos fichiers sur le serveur FTP, ils seront accessibles sur votre site à condition de respecter une première règle, la plupart des hébergeurs sont configurés pour avoir un dossier de référence tel que httpdocs, www ou public_html qui rendra public votre fichier sur votre site.

SFTP

La connexion en sFTP est recommandé, cette version est plus sécurisée, mais pas toujours disponible sur les serveurs mutualisés. Si vous pouvez, utilisez-là.

Sans FTP

Dans les cas extrêmes, votre hébergeur propose parfois une page web pour envoyer vos fichiers, c’est assez lourd à utiliser. Si vous n’avez pas le choix, vous pouvez envoyer un seul fichier compressé (.zip), généralement leur outil permet de décompresser celui-ci.

Les noms et l’arborescence

Les chemins

Un fichier test.html dans httpdocs aura pour adresse httpdocs/test.html et sera accessible à l’adresse www.domaine.com/test.html.
Un fichier test-dossier.html dans httpdocs/dossier aura pour adresse httpdocs/dossier/test-dossier.html et sera accessible à l’adresse www.domaine.com/dossier/test-dossier.html.

Index

Un fichier index.html dans httpdocs aura pour adresse httpdocs/index.html et sera accessible à l’adresse www.domaine.com/index.html ET/OU www.domaine.com, ce qui est plutôt la norme.

Parfois l’hébergeur est mal configuré et en l’absence d’un fichier « index » dans chaque dossier du site, on peut voir les fichiers présents, c’est à la fois pratique, mais complètement déconseillé pour des raisons de sécurité.

Les noms

Pour les noms de fichiers et de dossiers, on peut utiliser :

  • des chiffres
  • des lettres de a à z (selon le cas avec des capitales)
  • des tirets – ou _
  • le reste est à bannir (espace, accents, signes de ponctuations…)

Après

Une fois votre site en ligne, à chaque correction sur votre machine (on parle de version local), il faudra renvoyer les fichiers modifiés sur le FTP (version en ligne).
Certains éditeurs de code intègre un client FTP (Coda sur Mac), ils permettent de travailler sur un projet et de mettre en ligne de manière plus automatisée.
Cette fonction est disponible sur d’autres éditeurs sous forme d’extension.