télétravail, travail à domicile : les bonnes pratiques

télétravail, travail à domicile : les bonnes pratiques

Nous avons tous des idées sur le travail à domicile, ses avantages, ses inconvénients et ses modalités. L’utilisation récente et massive du travail à distance montre qu’il y a cependant beaucoup à apprendre sur le sujet. Je démarre avec cet article une première liste de ressources qui peuvent être utiles pour se constituer un corpus de bonnes pratiques.

Recommandations générales :

Outils bureautiques et de travail collaboratif

  • AnimaCoop a une liste d’outils libres bien faite
  • Le Mémo pour télétravail (libre) de Framasoft cité ci-dessus contient aussi pleins de références à des outils libres
  • Sur l’utilisation de la suite Google, de Gmail, de google drive, meet, …, on suivra avec intérêt la chaine Youtube de Cyrille Carteret
  • Le ministère du Travail a publié un guide du télétravail (pdf) début mai 2020.
  • Outil Zoom de visioconférence, discord de partage de voix et d’écrans, ….
  • A explorer (je connais une entreprise qui l’utilise pour que ses salariés disposent de moyens de téléphoner à distance : Rainbow
  • Sur ce site, j’ai également écrit quelques articles qui peuvent être intéressants (les liens renvoient à des catégories d’article, il peut y avoir redondance) : sur des applications google, ou sur d’autres outils bureautique.
  • Avec Microsoft Office ou LibreOffice par exemple, il faut apprendre à utiliser tous les moyens existants de ne pas refaire plusieurs fois la même chose : styles, utilisation de modèles (templates), palette de couleurs standards, formulaires, publipostage, éventuellement macros.

Travailler en sécurité

J’ai suivi la formation en ligne à la sécurité numérique proposée par l’ANSSI, Agence nationale de la sécurité des systèmes d’information. C’était intéressant, et très utile.

Je pense qu’il est essentiel de réfléchir à la gestion des mots de passe : personnels et professionnels. Je ne vois pas comment on peut avoir une gestion correcte sans gestionnaire de mot de passe. Mais pour l’instant ce n’est pas simple d’en trouver un bon. Alors voici quelques pistes :

Et vous ?

Partagez avec nous vos témoignages et recueils de bonnes pratiques !

p5.js Brique 3 : “GRAPHICS”, contour et vertex

p5.js Brique 3 : “GRAPHICS”, contour et vertex

Avec les briques 1 et 2 – de cette série – nous avons exploré la création de canevas « responsive » puis l’utilisation de « GRAPHICS » pour dessiner des rectangles sur des graphics, ou canevas virtuels. Cette fois ci nous allons dessiner des polygones avec des vertex à la place des rectangles. Un des polygones sera creux pour voir comment ça se passe. Nous obtiendrons ainsi quelque chose comme ça :

Des polygones, dont un creux, qui s’ajustent automatiquement à la taille de l’écran

J’ai fait ce sketch sur openProcessing.org, en p5.js :

Le script est intéressant pour son utilisation de beginShape et beginContour.

la fonction ajustPolygon(index, ep, w, h) crée les polygones (quadrilatères) 1 à 4 en calculant les coordonnées des extrémités (vertex) des 4 segments qui les constituent. Le polygone d’index 4, celui qui est représenté en bas à gauche, est « percé » d’un polygone à trois segments (un triangle). Ici les vertex sont donnés dans le sens des aiguille d’une montre si l’on veut juste indiquer un contour sans « percer » mais dans le sens inverse si l’on veut évider ou « percer ».

La fonction ajustImage(txt, ratio) a déjà été vue dans la « brique » 1 (un canevas “responsive”) . L’utilisation de Graphics, une sorte de calque, a été abordé dans la « brique » 2 dédiée au graphics. .

L’ensemble des fichiers composant ce sketch est accessible sur mon depôt GitHub, dans le répertoire vertex ajustes – 2020 05 10. On peut aussi exécuter le code directement sur GitHub via cette url.

Et maintenant ?

Et voilà nous avons une troisième brique ! Les autres briques sont et seront publiées dans cette même série, .

Mon prochain objectif est de découper des images grâce à des graphics. Pour celà, il va me falloir maîtriser trois nouvelles briques au moins : charger des images prédéfinie, récupérer des images par une API ou via l’utilisateur, appliquer un masque de découpe à une image.

Dictée vocale avec Google Docs !

Dictée vocale avec Google Docs !

Je viens de découvrir que l’on peut dicter des choses à Googles Docs et le regarder transcrire nos propos en mots écrits. Je suis absolument scotchée par le résultat. Alors je partage !

Pour y accéder, ouvrir un nouveau document Google Docs puis suivre les instructions de cette vidéo :

Si vous voulez voir le document Google docs, c’est ici.

Et maintenant ?

Pour aller plus loin, on pourra regarder le contenu de ce document d’aide de Google. On y apprend des compléments utiles :

  • il est possible de donner des instructions pour la ponctuation ou les sauts à la ligne, même en français ;
  • Et si on a la chance de parler et écrire en anglais, on dispose d’une incroyable quantité de commandes vocales pour mettre en forme le document. J’imagine que ce sera accessible en langue française un jour ou l’autre.

Chapeau à l’intelligence artificielle qui permet celà !

p5.js Brique 2 : utilisation des “GRAPHICS”

p5.js Brique 2 : utilisation des “GRAPHICS”

Lorsqu’on conçoit des éléments visuels animés il peut être intéressant de superposer des éléments graphiques animés individuellement. Les GRAPHICS sont des canavas virtuels, ils peuvent être affichés à l’écran ou pas. Ils peuvent apparaître comme un élément qui est devant un autre, ou faire l’objet d’une transformation (rotation, translation, ….) sans que le reste du canevas soit altéré. Ils fonctionnent un peu comme des calques. des feuilles de papier virtuelles. On peut avoir plusieurs « graphics » ou calques dans le même projet.

Dans cette brique j’explore la création de 6 objets GRAPHIC, tous placés sur un canevas blanc qui fait la taille de l’écran :

  • graf, un GRAPHIC gris (dont les dimensions correspondent à ce qui a été défini dans l’article « p5.js Brique 1 : un canevas « responsive« ) ;
  • polyG[0], un GRAPHIC blanc de la même taille que précédemment à la hauteur près ;
  • polyG[1] à polyG[4] des GRAPHIC qui sont des polygones rectangles, de 4 couleurs différentes.

L’ensemble des fichiers composant ce sketch est accessible sur mon depôt GitHub, dans le répertoire Polygones_ajustes_2020_05_10_08_12_27. On peut aussi exécuter le code directement sur GitHub via cette url.

Le script crée les 6 GRAPHIC, place les différents éléments les uns sur les autres. ce qui donne ceci :

Des GRAPHICS p5js dans des GRAPHICS
Des GRAPHIC les uns sur les autres

Cette brique est visible sur https://editor.p5js.org/Anne-Laure/sketches/I4K–pRHH.

Le script complet, qui réutilise la fonction ajustImage(txt, ratio) définie dans dans l’article « p5.js Brique 1 : un canevas « responsive » n’a pas été modifiée. Elle sert à calculer la taille du premier rectangle gris, le GRAPHIC graf.

/****************************************************************
https://editor.p5js.org/Anne-Laure/sketches/I4K--pRHH
Dessiner des polygones à l'intérieur d'un rectangle qui s'ajustent à la taille du rectangle
Suite de https://editor.p5js.org/Anne-Laure/sketches/isSlIPoVn
****************************************************************/

// les caractéristiques du rectangle de base
var grafSize;
var grafPos;
var ratio = 16 / 9; // ratio du rectangle w = ratio * h 

var graf  ;    // le GRAPHICS qui va porter tout
var offsetY = 50 ;  // l'espace en hauteur dédié à autre chose

var drawLoop = true ; // arrêter la boucle draw

var polyG = [] ; // le rectangle et les 4 polygones

function setup() {

  createCanvas(windowWidth, windowHeight);

  grafSize = createVector(0, 0);
  grafPos = createVector(0, 0);

}

function draw() {

  if( drawLoop) {
    
    
    background( 255) ;

    /*** initialiser les GRAPHICS, calculer les tailles  ***/
    grafSize = ajustImage("sz", ratio);
    
    graf = createGraphics(grafSize.x, grafSize.y + offsetY );
    
    for (let i = 0; i <5; i++) {
      // renderer les formes
      polyG[i] = createGraphics(grafSize.x, grafSize.y );
    }

    grafPos = ajustImage("ps", ratio);

    /*** créer les GRAPHICS  ***/    
    // graf est le renderer principal, celui qui sera sauvegardé
    graf.background( 220 ) ;
    
    /* créer les formes polyG[i]  */
    
    // i = 0 un simple rectangle blanc
    polyG[0].fill( 255 ) ;
    polyG[0].rect(0,0,graf.width, graf.height) ;
    
    // i = 1 à 4 des polygones plus compliqués
    let ep = grafSize.x/20 ; // espace autour des rectangles
    let w = grafSize.x/2 - 3 * ep/2 ;
    let h = grafSize.y/2 - 3 * ep/2;

    polyG[1].fill( 255, 0, 0 ) ;
    polyG[1].rect(ep,ep,w, h) ;   
    polyG[2].fill( 0, 255, 0 ) ;
    polyG[2].rect(w+2*ep,ep,w, h) ;       
    polyG[3].fill( 0, 0, 255 ) ;
    polyG[3].rect(w+2*ep,h+2*ep,w,h) ;   
    polyG[4].fill( 155, 55, 0 ) ;
    polyG[4].rect(ep,h+2*ep,w, h) ;   

    for (let i = 0; i < 5; i++) {
      // afficher les polygones dans graf
      graf.image( polyG[i], 0, 0) ;
    }
    
    // graf.stroke(0) ;
    graf.fill(0) ;
    graf.textSize(offsetY/3) ;
    graf.text("Et voilà !", 10, grafSize.y + 25 ) ;
    graf.ellipse(grafSize.x/8, grafSize.y/4, 20, 20 ) ;
    image( graf, grafPos.x, grafPos.y  ) ;    
    drawLoop = false ;
    
  }

}

function ajustImage(txt, ratio) {

  // RAPPEL ratio = 3/4 ; // ratio du rectangle que je veux dessiner w= 3 --> h = 4
  let coeff = 0.95; // on veut que l'image ne représente que 95% du plus petit côté du canevas
  let OffH = height - offsetY ; // laisser place pour texte)
  let CanR = width / OffH;
  print(txt, " Canevas W/H ", CanR);

  let maxSize = createVector(0, 0);
  let gPos = createVector(0, 0);

  if (CanR >= 1) {
    // la largeur est supérieure à la hauteur. C'est la hauteur qui nous limite
    if ( OffH * coeff * ratio >= width * coeff ) {
        
      // il faut que la hauteur soit réduite malgré tout
      maxSize.y = width * coeff / ratio ;
    } else {
      // il faut que la largeur ne dépasse pas la largeur moins la bordure prévue
      maxSize.y = OffH * coeff ; 
    }   
    maxSize.x = maxSize.y * ratio ;
    
  } else {
    // la hauteur est supérieure à la largeur. C'est la largeur qui nous limite
    /* maxSize.x est le plus petit de 
        - la largeur du canevas * le coefficient d'occupation (pour avoir une bordure)
        - la hauteur du dessin qui doit quand même respecter le ratio initial sans dépasser la hauteur du canevas
    */
    if ( width * coeff / ratio >= OffH * coeff ) {
        
      // il faut que la largeur soit réduite malgré tout
      maxSize.x = OffH * coeff * ratio ;
    } else {
      // il faut que la largeur ne dépasse pas la largeur moins la bordure prévue
      maxSize.x = width * coeff ; 
    }
    
    maxSize.y = maxSize.x / ratio ;
  }

  maxSize.x = int(maxSize.x);
  maxSize.y = int(maxSize.y);
  gPos.x = (width - maxSize.x) / 2;
  gPos.y = (OffH - maxSize.y) / 2;


  if (txt == "sz") {
    print(txt, "l canvas, l size, h canvas, h size ", width, maxSize.x, OffH, maxSize.y);
    return maxSize;
  } else if (txt == "ps") {
    print(txt, "x, y totx toty", gPos.x, gPos.y, maxSize.x + 2 * gPos.x, maxSize.y + 2 * gPos.y);
    return gPos;
  }
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
  // redessiner avec draw()
  drawLoop = true ;
}

Et maintenant ?

Et voilà nous avons une deuxième brique ! Les autres briques sont et seront publiées dans cette même série, . La prochaine étape sera de faire des polygones plus compliqués avec certains GRAPHIC. A suivre !

p5.js Brique 1 : un canevas « responsive »

p5.js Brique 1 : un canevas « responsive »

Pour mieux apprendre à coder des travaux numériques avec la librairie p5.js (processing en javascript), j’ai décidé de construire des briques successives. Aujourd’hui, la première brique, c’est d’être capable d’ajuster la taille du canevas en instantané à la taille de la fenêtre. C’est comme si on avait un canevas « responsive », allusion aux sites internet qui s’ajustent aux écrans utilisés.

Cet article est le premier d’une série .

Pour valider cette brique, j’ai décidé de dessiner un rectangle de rapport 16/9 qui occupe au maximum 95% de la dimensions la plus faible de l’écran. Ce rectangle doit donc respecter les règles suivantes :

  • son ratio largeur sur hauteur est en permanence de 16/9 : lorsque la largeur fait 16 la hauteur fait 9 ;
  • si la fenêtre est plus large que haute alors la hauteur du rectangle fait 95% de la hauteur de la fenêtre (et donc la largeur du rectangle représente 16/9 de cette hauteur) ;
  • si la fenêtre est plus haute que large alors la largeur du rectangle fait 95% de la largeur de la fenêtre (et donc la hauteur du rectangle représente 9/16 de cette largeur) ;

L’ensemble des fichiers composant ce sketch est accessible sur mon depôt GitHub, dans le répertoire Ajustement_canevas_2020_05_09_13_46_20. On peut aussi exécuter le code directement sur GitHub via cette url.

Le gif ci-dessous illustre le résultat obtenu :

Et en voici la version réalisée dans l’éditeur en ligne p5.js (https://editor.p5js.org/Anne-Laure/present/isSlIPoVn) :

La version éditable, où l’on voit le code est visible ici : https://editor.p5js.org/Anne-Laure/sketches/isSlIPoVn. Et voici le sketch en javascript :

/****************************************************************
https://editor.p5js.org/Anne-Laure/sketches/isSlIPoVn
Dessiner un rectangle qui prend 95% de la hauteur ou largeur d'écran et se centre

****************************************************************/

var grafSize;
var grafPos;
var ratio = 16 / 9; // ratio du rectangle que je veux dessiner w = ratio * h 

var drawLoop = true ; // arrêter la boucle draw
function setup() {

  createCanvas(windowWidth, windowHeight);
  colorMode(HSB, 360, 100, 100, 100);

  grafSize = createVector(0, 0);
  grafPos = createVector(0, 0);

}

function draw() {

  if( drawLoop) {
    
    background(95) ;
    let col = random(100) ; // couleur
    grafSize = ajustImage("sz", ratio);
    grafPos = ajustImage("ps", ratio);
    fill( col, 80, 80, 100 ) ;
    rect(grafPos.x, grafPos.y, grafSize.x, grafSize.y);  
    drawLoop = false ;
    
  }

}


function ajustImage(txt, ratio) {

  // RAPPEL ratio = 3/4 ; // ratio du rectangle que je veux dessiner w= 3 --> h = 4
  let coeff = 0.95; // on veut que l'image ne représente que 95% du plus petit côté du canevas
  let CanR = width / height;
  print(txt, " Canevas W/H ", CanR);

  let maxSize = createVector(0, 0);
  let gPos = createVector(0, 0);

  if (CanR >= 1) {
    // la largeur est supérieure à la hauteur. C'est la hauteur qui nous limite
    if ( height * coeff * ratio >= width * coeff ) {
        
      // il faut que la hauteur soit réduite malgré tout
      maxSize.y = width * coeff / ratio ;
    } else {
      // il faut que la largeur ne dépasse pas la largeur moins la bordure prévue
      maxSize.y = height * coeff ; 
    }   
    maxSize.x = maxSize.y * ratio ;
    
  } else {
    // la hauteur est supérieure à la largeur. C'est la largeur qui nous limite
    /* maxSize.x est le plus petit de 
        - la largeur du canevas * le coefficient d'occupation (pour avoir une bordure)
        - la hauteur du dessin qui doit quand même respecter le ratio initial sans dépasser la hauteur du canevas
    */
    if ( width * coeff / ratio >= height * coeff ) {
        
      // il faut que la largeur soit réduite malgré tout
      maxSize.x = height * coeff * ratio ;
    } else {
      // il faut que la largeur ne dépasse pas la largeur moins la bordure prévue
      maxSize.x = width * coeff ; 
    }
    
    maxSize.y = maxSize.x / ratio ;
  }

  maxSize.x = int(maxSize.x);
  maxSize.y = int(maxSize.y);
  gPos.x = (width - maxSize.x) / 2;
  gPos.y = (height - maxSize.y) / 2;


  if (txt == "sz") {
    print(txt, "l canvas, l size, h canvas, h size ", width, maxSize.x, height, maxSize.y);
    return maxSize;
  } else if (txt == "ps") {
    print(txt, "x, y totx toty", gPos.x, gPos.y, maxSize.x + 2 * gPos.x, maxSize.y + 2 * gPos.y);
    return gPos;
  }
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight);
  // redessiner avec draw()
  drawLoop = true ;
}

Dans le sketch ci-dessus, il y a deux fonctions intéressantes :

  • function windowResized() qui est une fonction p5.js qui s’exécute automatiquement dès que l’on modifie la taille de la fenêtre active. A l’intérieur j’indique qu’il faut retailler le canevas à la taille de la fenêtre et que la variable drawLoop est repassée à true. Ca signifie que la fonction draw redessinera le contenu du canevas.
  • function ajustImage(txt, ratio) que j’ai créée pour calculer la taille du rectangle contenant l’image à afficher. C’est cette fonction qui fait que le rectangle affiché a des dimensions qui respectent les règles exposées.

Et voilà nous avons une première brique ! Les briques suivantes seront publiées dans cette même série, .