distanciel

Même si ça ne remplace pas un cours en classe…

Comment travailler un projet Web à distance

Checklist du matériel

Internet

Les problèmes en télétravail proviennent souvent de la qualité de la connexion à Internet.
Le site speedtest.net permet de connaitre votre débit.
Celui-ci propose aussi une version en ligne de commande pour les plus aventuriers. Voici mes résultats, si vous passez par le site, vous aurez les mêmes informations en image.

// serveur qui sera testé :
Server: CCleaner – Paris (id = 16676)
// Mon FAI
ISP: Free SAS
// le ping
Latency: 5.54 ms (0.97 ms jitter)
// on charge un gros fichier
// attention si vous êtes en 4G, c’est compté dans vos datas
Download: 304.23 Mbps (data used: 413.1 MB)
// on envoie un gros fichier
Upload: 143.43 Mbps (data used: 254.0 MB)

J’ai l’habitude de lire en Mbps, ici ~ 300Mbps, la fibre et le WiFi n’ont aucun problème.
Si vous avez moins de 8 Mbps, les visioconférences, partages d’écran seront difficiles, il faudra couper la caméra.

Pour améliorer votre connexion :

  • un câble ethernet (et un adaptateur si vous avez un MacBook)
  • ou être le plus près possible du WiFi ;
  • éteindre la box TV ;
  • fermer les onglets Facebook et autres.

Le système d’exploitation (OS)

Vérifiez vos versions de logiciels en commençant par MacOS (ou Windows). Sur mac, menu pomme > à propos de ce mac : MacOS Catalina 10.15.6.
Selon votre OS vous ne pourrez pas installer certains logiciels (et extensions) et si vos versions diffèrent avec celles de votre interlocuteur, les échanges seront parfois impossibles.

Les logiciels

Bureautique

Pour les échanges, les mails (attentions aux pièces jointes), Discord (chat ou salon), Skype (voir les alternatives comme Google Meet ou Jitsi), pour un usage occasionnel teamViewer est gratuit et permet de prendre la main à distance sur une machine.

N’oubliez pas de faire des copies de sauvegardes de vos projets. Votre poste de travail est fragile, les conditions d’usages parfois extrêmes.

Graphisme & code

app figma
Figma

Pour le graphisme web, le logiciel le plus adapté est Figma. Il s’installe sans problème sur la plupart des machines, dans le navigateur ou en application (recommandée), celui-ci nécessite une connexion à Internet, mais pas de besoin de gros débits. Figma offre des outils simples avec des fonctions puissantes pour faire des maquettes « écrans ». Partager vos projets avec un accès complet en lecture et écriture (pour que je puisse corriger), le logiciel propose un système de commentaires permettant d’annoter les images (à l’usage, les notifications ne sont pas toujours précisent et j’en ai déjà « oubliée »).
Attention aux polices utilisées libres ou gratuites, éventuellement vectoriser certains éléments avec parcimonie (exemple : logo).

vscode
don’t panic

Pour le code, codepen est parfait pour les prototypes. Si votre machine vous le permet (OS récent), VS Code en mode projet (ouverture du dossier) avec LiveShare et LiveServer configurés/activés/lancés permet de travailler, visualiser et corriger en même temps un projet web (façon Google Docs).

Comment poser une question technique ?

dans la ou les catégorie(s) : code

En informatique, en code ou autres

  1. Décrire le problème (j’ai ça, je veux ça), préciser son niveau, sa plateforme (ex:mac os catalina, firefox) et les langages ;
  2. Illustrer vos propos (exemple vu ailleurs, prototype Figma, vidéo, croquis), bout de code ou zip (pour le prof) ;
  3. Montrer vos efforts, isoler le problème, éteindre et redémarrer sa machine.

Exemple :

Je débute en JavaScript et j’aimerai faire un diaporama dans une page web. J’ai trouvé la librairie Flickity, mais mon code ne marche pas (être précis) sur Safari, les images ne s’affichent pas. Mon dernier test est en ligne à cette adresse (site + codepen ou jsbin pour l’archivage).

Bonus : Comment résoudre un problème ?

  1. Les moteurs de recherche ;
  2. in english ?
  3. Les plateformes vidéos (youtube) ;
  4. Google images parfois;
  5. Les amis ;
  6. Les forums spécialisés ;
  7. Les Discord spécialisés ;
  8. Github, codepen, stackoverflow ;
  9. Les moteurs de recherche en mode avancé (site:jenseign.com grid).

typotap

Introduction

En 26 jours de confinement, je viens de finir un alphabet animé de 26 lettres, visible sur https://typotap.jenseign.com, le projet se situe entre patatap, le cédérom Alphabet et d’autres inspirations.
Décortication.

Trois ingrédients

Pour faire votre propre typotap, il vous faut :

  • Environ 26 SVG ;
  • 26 MP3 ;
  • 200 gr de JavaScript.

Les SVG

Pour les SVG, il est nécessaire de comprendre, le dessin en SVG via un logiciel de votre choix (Illustrator, Figma, InkScape, Affinity Designer), la balise <g> et les options de la balise <svg> pour certains cas (preserveAspectRatio).

Les MP3

Par défaut, les animations vont être créées avec une base temporelle en seconde, pour certains sons rythmiques, j’ai réglé les BPM à 120 ou 60 (astuce offerte).

Le JavaScript

On décompose les connaissances :

  • Détecter les événements du clavier — les touches pressées (niveau débutant) ;
  • Charger un SVG en JavaScript (pas débutant, mais facile à écrire avec un exemple) ;
  • Animer le SVG, on utilisera la librairie GSAP (niveau moyen) ;
  • Lire le MP3, on utilisera ToneJS (niveau débutant avec un exemple) ;
  • Retirer le SVG (une ligne :))

Récipient

L’ensemble des ingrédients sera mélangé dans votre navigateur, de préférence à jour et on monte le tout dans une page HTML, avec un peu de CSS.

En pratique

On commence par le clavier et le JavaScript.

See the Pen clavier by Benoît Wimart (@benoitwimart) on CodePen.dark

Puis pour le SVG, on va chercher le fichier (fetch) et si on le trouve (internet ok, le site ok, le fichier existe…), dès qu’il est totalement chargé, on l’insère dans l’élément « #play ».

Fetch permet de charger un fichier venant d’un autre site, mais pour des raisons de sécurité, les Blocage de requêtes multiorigines (Cross-Origin Request) sont courants (ici jenseign.com est bloqué sur codepen, mais pas « s3-us-west‑2.amazonaws.com/s.cdpn.io ».

See the Pen fetch svg by Benoît Wimart (@benoitwimart) on CodePen.dark

Les deux ensemble (en supposant que le svg est dans le même dossier) :

const play = document.querySlector('#play');
 
function load(letter){
  fetch(letter+'.svg') // concatenation, je charge a.svg ou b.svg … z.svg 
    .then(function(response){
      if(response.ok){
        response.text().then(function(svg){
          play.insertAdjacentHTML("beforeend", svg);
        });
      }
  });
}
 
document.addEventListener('keyup',function(e){
  load(e.key); // une fonction qui charge 
});
Attention, pas mal fonctionnalités JavaScript nécessitent un serveur pour marcher. Trois solutions, mettre en ligne, installer un serveur local ou utiliser l’extension live server de VS Code. Si votre adresse dans le navigateur commence par « file:/// », vous devez résoudre d’abord ce problème.

J’anime

Voici l’avant dernière étape, l’animation, il faut connaitre les fonctions, GSAP et l’overlap (la superposition) en CSS avec Grid.
L’ensemble est ici sur Repl.it.

C’est ici qu’il faut jongler entre la créatvité, le SVG, GSAP et le logiciel de musique (Audacity pour voir le timing).
const play = document.querySelector('#play');
 
function load(letter){
  fetch(letter+'.svg') // concatenation, je charge a.svg ou b.svg … z.svg 
    .then(function(response){
      if(response.ok){
        response.text().then(function(svg){
          // insertion professionnelle
          play.insertAdjacentHTML("beforeend", svg);
          // on ajoute un id avec la lettre et la date en ms
          // depuis 1970 pour le rendre unique
          // ex : r1586771234272 
          // https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Date/now
          play.lastElementChild.id = letter + Date.now(); 
          // la fonction qui animera
          // je lui donne la lettre, l'élément et l'id
          anim(letter,play.lastElementChild,play.lastElementChild.id);
 
        });
      }
  });
}
 
document.addEventListener('keyup',function(e){
  load(e.key); // une fonction qui charge 
});
 
function anim(letter,el,id){
    // je récupère la letter, l'élément et l'id pour gsap et le switch 
    // voir la doc mdn sur le switch/case 
    switch(letter) {
      case 'r':
          // j'attache une timeline à l'élément
          el.tl_= gsap.timeline();
          // gsap to
          el.tl_.to('body',{backgroundColor:'#F90'});
          // '#'+id+' .r' sera '#r1586771234272 .r'
          el.tl_.to('#'+id+' .r',{duration:.2,rotation:-15,transformOrigin:'left bottom',repeat:1,yoyo:true,ease:'power1.out'},0);
          el.tl_.to('#'+id,{scale:1.1,transformOrigin:'.5 .5',opacity:0,duration:2,ease:'power1'},0);
          // on enchaine et efface l'élément quand l'animation est finie :) 
          el.tl_.call(function(){el.remove()});
      break;
 
      // avec les autres lettres
      /*
      case 's':
          el.tl_= gsap.timeline();
          el.tl_.to('body',{backgroundColor:'#000'});
          el.tl_.to('#'+id+' .s',{duration:.2,rotation:-15,transformOrigin:'left bottom',repeat:1,yoyo:true,ease:'power1.out'},0);
          el.tl_.to('#'+id,{scale:1.1,transformOrigin:'.5 .5',opacity:0,duration:2,ease:'power1'},0);
          el.tl_.call(function(){el.remove()});
      break;
      */
    }
}

Let’s the musique play

J’ajoute la librairie dans la page d’HTML.
Je connnais peu ToneJS, mais le sampler permet de charger nos sons et avoir une polyphonie.
Pour TypoTap, après chargement, j’ajoute l’écouteur d’événement du clavier.

Voici la demo sur repl.it

Le code JavaScript :

const play = document.querySelector('#play');
 
/* TONE JS */
const alphabet = new Tone.Sampler({
  "F3":"r.mp3", // , <- virgule
  "G3":"s.mp3" // on liste les sons ici
  }, // <- virgule
  function(){ 
    // quand les mp3 sont chargés, on ajoute l'écouteur de clavier
    // ce bout de code était plus bas
    document.addEventListener('keyup',function(e){
      load(e.key); // une fonction qui charge 
    });
  }
).toMaster(); // <- un truc de toneJS pour envoyer le son
 
function load(letter){
  fetch(letter+'.svg') // concatenation, je charge a.svg ou b.svg … z.svg 
    .then(function(response){
      if(response.ok){
        response.text().then(function(svg){
          // insertion professionnelle
          play.insertAdjacentHTML("beforeend", svg);
          // on ajoute un id avec la lettre et la date en ms
          // depuis 1970 pour le rendre unique
          // ex : r1586771234272 
          // https://developer.mozilla.org/fr/docs/Web/JavaScript/Reference/Objets_globaux/Date/now
          play.lastElementChild.id = letter + Date.now(); 
          // la fonction qui animera
          // je lui donne la lettre, l'élément et l'id
          anim(letter,play.lastElementChild,play.lastElementChild.id);
 
        });
      }
  });
}
 
 
 
function anim(letter,el,id){
    // je récupère la letter, l'élément et l'id pour gsap et le switch 
    // voir la doc mdn sur le switch/case 
    switch(letter) {
      case 'r':
          /* Tone JS en action */
          alphabet.triggerAttack("F3");
 
          // j'attache une timeline à l'élément
          el.tl_= gsap.timeline();
          // gsap to
          el.tl_.to('body',{backgroundColor:'#F90'});
          // '#'+id+' .r' sera '#r1586771234272 .r'
          el.tl_.to('#'+id+' .r',{duration:.2,rotation:-15,transformOrigin:'left bottom',repeat:1,yoyo:true,ease:'power1.out'},0);
          el.tl_.to('#'+id,{scale:1.1,transformOrigin:'.5 .5',opacity:0,duration:2,ease:'power1'},0);
          // on enchaine et efface l'élément quand l'animation est finie :) 
          el.tl_.call(function(){el.remove()});
      break;
 
      // avec les autres lettres
      /*
      case 's':
          el.tl_= gsap.timeline();
          el.tl_.to('body',{backgroundColor:'#000'});
          el.tl_.to('#'+id+' .s',{duration:.2,rotation:-15,transformOrigin:'left bottom',repeat:1,yoyo:true,ease:'power1.out'},0);
          el.tl_.to('#'+id,{scale:1.1,transformOrigin:'.5 .5',opacity:0,duration:2,ease:'power1'},0);
          el.tl_.call(function(){el.remove()});
      break;
      */
    }
}

benoit wimart, graphiste webdesigner

Mon portfolio

Je viens de finir le portfolio de mon agence, activité en freelance ; un exercice que je donne à mes étudiants chaque année.
Le site est codé à la main sans CMS avec les outils et langages étudiés en cours à l’exception du php et .htaccess pour optimiser quelques éléments.
L’interface utilise du JavaScript avec la librairie GSAP pour les interactions animées et SWUP pour les chargements.
La page d’accueil propose une variation sans cercle et une version petit smartphone en responsive.

jaiunsite.com, © benoit wimart, création site web, graphisme, interface

Les pages de présentations sont très simples et se chargent rapidement.

site web modulo font © benoit wimart

Remplir avec du texte

Petite exercice pour remplir « sans dépasser » de lettres au hasard un bloc html.

L’idée est de remplir chaque ligne de lettre en chasse fixe (monospace) et d’ajouter un retour à la ligne pour avoir un bloc plein.
Attention : ce code est pour le fun et n’est pas parfait (certains caractères ne passent pas et la preview du codepen ne marche pas).

Le code est aussi commenté dans CodePen.

/* Ajouter GSAP*/
 
var fill  = document.querySelector('.fill'); // je cible la première div.fill
var wl; // largeur d'une lettre 
var hl; // hauteur
var w; // largeur de la fenêtre
var h; // hauteur
 
/* fonction de lettre random via gsap */
// https://greensock.com/docs/v3/GSAP/UtilityMethods/random
var randomLetter = gsap.utils.random('-abcdeABCDEF+*,#_!:\.?/='.split(''),true);
 
/*
étape 1 : prendre les dimensions
*/
function ini(){
  w = window.innerWidth; // largeur de la fenetre 
  h = window.innerHeight; // hauteur
  fill.style.display = 'inline-block'; // par défaut display block prend toute la largeur; 
  // inline-block prend juste la largeur du texte 
  fill.innerHTML = '0123456789'; // j'ajoute 10 glyphs 
  wl = fill.clientWidth/10; // je divise par 10 pour avoir la taille d'un glyph
  fill.innerHTML = '0<br>1<br>2<br>3<br>4<br>5<br>6<br>7<br>8<br>9'; // idem en hauteur
  hl = fill.clientHeight/10; // ok
  fill.style.display = 'block'; // je remets 
  console.log(w,h,wl,hl)
  fill.innerHTML = ''; // je vide
}
 
ini(); // je lance la fonction ini
 
/*
étape 2 : on remplit
un peu de math
Si j'ai 13 px et des lettres de 4 px, je peux en mettre 3.
13/4 = 3,25, on supprime le reste après la virgule -> 3.
Math.floor(3.25) = 3 
*/
 
function fillit(){
  let maxX = Math.floor(w/wl); // nombre max en x
  let maxY = Math.floor(h/hl); // nombre max en y
  let innerhtml = ''; // variable temporaire qui contient le texte
 
  /* boucle dans une boucle */
  for(let y=0;y<maxY;y++){ 
    for(let x=0;x<maxX;x++){
      innerhtml+=randomLetter(); // truc de gsap
    }
    innerhtml+='<br>'; // on passe à ligne
  }
  fill.innerHTML = innerhtml; // on remplit l'élement html avec innerhtml
}
 
fillit(); // je lance …
 
/* bonus */
window.addEventListener('resize',function(){
  ini();
  fillit();
})

See the Pen remplir avec du texte by Benoît Wimart (@benoitwimart) on CodePen.dark

Grid, sticky, snap et smooth

dans la ou les catégorie(s) : code et avec pour étiquette(s) :

En attendant une page dédiée aux « nouveautés » CSS, voici un article et un petit CodePen qui exploite trois propriétés récentes :

  • position:sticky , le fixed moderne.
  • scroll-snap-align: start; & scroll-snap-type: y mandatory; pour avoir un accrochage sur les items.
  • scroll-behavior: smooth; pour une transition sur les liens ancrés.

En bonus : une croix filaire en quelques lignes de SVG.

À tester ici

See the Pen grid + sticky + snap + smooth by Benoît Wimart (@benoitwimart) on CodePen.default

Tranches, clip-path, découpe & typographie

Comment couper une lettre ou un élément en plusieurs morceaux ?

Clip-path

Clip-path permet de faire un masque sur un élément HTML.
Différentes valeurs sont possibles :

clip-path: inset(100px 50px);
clip-path: circle(50px at 0 100px);
clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%);
clip-path: path('…');

La valeur inset(0) permet de cacher comme un overflow:hidden, mais avec la possibilité de faire un position:absolute.

See the Pen a by Benoît Wimart (@benoitwimart) on CodePen.default

La grille (grid)

Le display grid divise en tranches horizontales (un enfant = une tranche).

See the Pen AAA by Benoît Wimart (@benoitwimart) on CodePen.default

Combinaison

Il manque un truc ;¬)

See the Pen AAAAA by Benoît Wimart (@benoitwimart) on CodePen.default

On jongle avec absolute/relative…

See the Pen A&a by Benoît Wimart (@benoitwimart) on CodePen.default

Variation

See the Pen Aa by Benoît Wimart (@benoitwimart) on CodePen.default

rendu portfolio

dans la ou les catégorie(s) : portfolio et avec pour étiquette(s) :

Voici les portfolios réalisés dans le cours de 2e année à l’ésad d’Amiens.
Dix cours d’une demi-journée, mise en page, codage à la main, achat d’un nom de domaine, mise en ligne en partant d’aucune connaissance en HTML/CSS.

https://www.remylemaire.fr/
http://elisalubineau.fr/
https://manauquellec.fr/
http://sachadeweerdt.be/
https://laurynvasseur.fr/
https://elsavilling.fr/
http://anissapasquesfaraday.fr/
https://camillewisniewski.fr/
https://zoelangris.fr/
https://www.ymanolsillyvergara.fr
https://colinemartin.fr/
https://lisa-liagre.fr/
https://solennemadi.fr/
http://frankwuko.fr/
https://www.camille-ostwalt.fr/
http://www.leagovignon.fr/
http://juliettedaveau.fr/
https://pela.xyz/
http://juleslabatut.fr/
https://manon-burtin.fr/
https://decoeneheloise.fr/
http://knaskomanon.fr/
https://enamor.fr/
https://maelhym.fr/
http://cecilefaure.fr/
https://pauline-aignel.fr/
https://sara-hermont.fr/
https://auzannetlinxia.fr/
https://valentinblairy.fr/
https://margauxdurandet.fr/
https://charlottehocquaux.fr/
http://kallistegret.fr/
https://maevajo.fr/

Cette année, petite nouveauté, les étudiants devaient créer un objet de promotion (carte, flyer, sticker…) 🙂

sara

mael

frank

lauryn

cécile

léa & pauline

pélagie

effet sur le texte et logique HTML

Pour s’entrainer, voici un exercice pratique.
Comment mettre un fond rectangulaire incliné derrière un titre (droit) ?

Avec les éléments h1 et span

Pour être dans le respect de la sémantique, je dois mettre le texte avec une balise de titrage (ici h1, mais h2 peut convenir si vous êtes dans une sous-partie de la page).
Pour mettre un fond seulement derrière le texte, il faudra ajouter une span, une balise neutre utilisée pour des réglages « visuels ». Enfin pour incliner le fond, il faudra pivoter celui-ci dans un sens et le texte dans l’autre, ce qui ajoute une seconde span.

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

Avec les pseudo-élements

Cette variante est assez complexe, elle aborde des notions des prochains cours et des astuces CSS.

See the Pen pastille et pseudo élement by Benoît Wimart (@benoitwimart) on CodePen.0