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).