Voici un long article particulièrement destiné à celles qui ont suivi le cours de mardi dernier avec un iPad ou un ChromeBook. En mettant ensemble tous les éléments qui me paraissaient intéressants pour envisager le problème posé par ces appareils, j’ai fini par écrire un article entier. Toutefois, vous pouvez aller directement à la partie Il y a une app pour ça si vous voulez configurer votre iPad ou votre ChromeBook pour pouvoir suivre les cours plus à l’aise la semaine prochaine. Dans ce cas, cliquez directement sur cette partie dans la table des matières ci-dessous :

• Si on n’a ni Mac ni PC
  • Communication et outils informatique : Mac et PC de rigueur
  • Développement web et outils libres ou open source
  • J’ai un iPad, un ChromeBook, comment faire ?
    • Un clavier, sinon rien
    • Il y a une app pour ça
      • HTML et CSS sur iOS et ChromeOS
      • FTP sur iOS et ChromeOS
    • Les webapps à la rescousse
      • HTML et CSS dans le nuage
        • Glitch
        • JSBin
        • CodePen
      • JSitor
      • FTP en ligne
• Et voilà !

Communication et outils informatique : Mac et PC de rigueur

A la suite de notre premier cours, plusieurs d’entre vous se sont trouvé·es en difficulté pour suivre les procédures qui étaient proposées… parce qu’ils·elles n’avaient pas de Mac ni de PC sous Windows (ou même à la rigueur Linux) pour travailler.

Bon, c’est assez ennuyeux, quand même. Déjà, il faut vous dire que travailler en communication en n’ayant ni Mac ni PC Windows, c’est un peu comme aller à un cours de dessin sans gomme ni crayon… C’est manquer des outils essentiels pour les tâches à produire, sachant qu’aujourd’hui produire en com = utiliser un ordinateur, dans 99% des cas. De plus, beaucoup de travaux font appel à des logiciels spécialisés : graphisme, montage, développement web.

On a prévu, depuis le début du département, une salle informatique pour nos travaux en communication. Ce qu’on n’a pas eu le temps de prévoir, c’est le reconfinement. On n’a même pas le temps d’accéder aux quelques ordinateurs portables du département avant la fermeture de l’université…

Développement web et outils libres ou open source

Pour ce cours, j’ai minutieusement choisi des outils libres ou open source, ce qui est assez facile dans le développement web, il y a beaucoup de choix. L’avantage des outils libres c’est… qu’ils sont libres 😉 C’est-à-dire qu’ils n’encapsulent pas nos données dans un format propriétaire qu’eux seuls peuvent ouvrir. Et ça veut dire aussi que des développeurs peuvent vérifier à tout moment ce que font ces logiciels avec nos données. Aujourd’hui, c’est un enjeu important de l’avenir du web, alors que notre vie privée et la liberté de circulation et d’accès à nos données est de plus en plus menacée par l’hégémonie des grandes plateformes du web.

Dans le développement web, il y a un choix pléthorique d’outils libres. Normal, ce sont des développeurs qui les utilisent, et nombreux d’entre eux ont essayé de se fabriquer l’outil qui leur convenait le mieux… et l’ont partagé avec la communauté.

Toutefois, ce choix se restreint dès lors qu’on utilise des plateformes non pensées au départ pour le développement. Sur Windows et macOS, il y a beaucoup de choix de logiciels payants, et moins de choix de logiciels libres (free, en anglais, qui veut dire à la fois libre et gratuit, ce qui entraine quelques confusions, même si la plupart des logiciels sont les deux à la fois). Sur Linux, il y a majoritairement des logiciels libres (Linux étant déjà, lui-même, un système d’exploitation libre).

Ça se complique sur ChromeOS, sur Android et sur iOS : ces trois plateformes ont été conçues avec l’idée de la consultation de document en tête, plutôt que la production de document. Leurs interfaces même sont pensées pour la consultation digitale (en français, ça veut dire avec les doigts). Les ordinateurs, tablettes et téléphones qui utilisent ces systèmes d’exploitation sont en général compatibles avec de la bureautique légère et en ligne (de préférence avec les outils logiciels de la marque, iOS avec sa suite bureautique, Android et surtout Chrome OS avec la suite logicielle de Google). les développeurs ayant beaucoup moins de besoin pour ces plateformes, ils ont créé beaucoup moins d’outils.

J’ai un iPad, un ChromeBook, comment faire ?

Tout n’est pas perdu, mais ce sera plus difficile. D’abord, il faut avoir à l’esprit une chose : dès lors qu’on sort des sentiers battus, en informatique comme ailleurs, il faut être plus autonome que la plupart des gens.

Si vous utilisez Linux, il faut vous attendre à ce que la plupart des gens ne puissent pas vous aider si vous avez un problème (beaucoup ne savent pas ce que c’est…).

Si vous utilisez un iPad, pensé pour la lecture, la consultation de magazines, le visionnage de vidéos, il y a de fortes chances que très peu de gens parmi les utilisateurs d’iPad que vous connaissez puisse vous aider à… développer des sites web sur iPad !

Un clavier, sinon rien

Bon, faut pas se mentir… pour écrire du code, il faut un clavier ; la majeure partie des améliorations dans l’écriture sont des raccourcis-clavier, et il faut sans cesse taper des caractères inhabituels ([ et ], { et }, < et >, / et \). Inutile de dire que c’est un peu compliqué quand ils se trouvent dans le troisième clavier de la tablette…

Pourtant, les éditeurs de texte et de code sur tablette essaient de palier ce manque en proposant une ligne supplémentaire sur leur clavier, dans laquelle on retrouve la majeure partie de ces caractères.
Mais même pour un développeur chevronné, ça ne peut être qu’un outil d’appoint.

En revanche, les tablettes ont aujourd’hui la capacité de se connecter en bluetooth à n’importe quel clavier (moyennant, parfois, certains arrangements); et plusieurs marques de claviers ont compris l’intérêt de permettre la connexion facile avec plusieurs appareils. Aussi, si vous avez chez vous un clavier bluetooth qui traîne, il y a des chances qu’il soit compatible avec votre tablette, et il vaut mieux que vous l’utilisiez en cours.

Il y a une app pour ça

Il y a quelques années (enfin quelques… je vous parle d’une époque où vous alliez au primaire, là), Apple avait sorti une publicité pour vanter la toute nouvelle boutique d’applications de l’iPhone (3G, une autre époque je vous dis !), dont le slogan était: il y a une app pour ça. Et c’est vrai, que ce soit sur iOS ou sur Android, qu’il y a très souvent une app qui fait le job alors qu’on pensait être coincé avec son appareil.
koder

HTML et CSS sur iOS et ChromeOS

Pour le développement Web, sur iOS, il y a du choix, et contrairement à ce qu’on aurait pu croire, il y a même du choix en gratuit :

Koder est un éditeur pour iPhone et iPad. L’application vous permettra de faire pratiquement tout ce qu’on fait en cours (lire et éditer un fichier en local ou en ligne – notamment sur Dropbox et en FTP), moyennant un peu d’adaptation.

Kodex, lui aussi gratuit (mais vous pouvez récompenser son auteur avec un achat in-app de 5,49€), en anglais et sans gestion du FTP ;
– Code Master est lui aussi gratuit, sans FTP et en anglais), mais il semble un peu costaud et touffu pour notre usage.

Sur ChromeOS, il faut se tourner vers deux gros éditeurs, un peu plus touffus à prendre en main que Brackets, et multiplateformes :
– Visual Code Studio, l’éditeur open source de Microsoft,
– Atom, l’éditeur open source de l’équipe de GitHub, la plateforme de partage de code la plus connue du Web.

Mais ce sont des éditeurs un peu lourds à gérer pour notre niveau. Il existe en revanche un éditeur léger et semble-il idéal pour qui voudrait suivre ce cours sur un ChromeBook: Text.app. Si j’en crois cette description, c’est le candidat idéal pour vos besoins.

FTP sur iOS et ChromeOS

Sur iOS, vous avez plusieurs solutions pour envoyer vos fichiers en FTP.
La première est d’utiliser un éditeur qui aura son propre logiciel de FTP intégré: c’est le cas de Koder, vu plus haut.

La seconde est d’installer une app de FTP, comme
FTPManager, qui est fonctionnelle dans sa version gratuite et qui dispose d’une version pro payante… mais facultative pour notre usage.

Les webapps à la rescousse

Ce qui est génial avec le web, c’est qu’il y a presque toujours une solution… web a un problème de développement web. Puisque les systèmes d’exploitation ont leurs restrictions propres, pourquoi ne pas utiliser un système plus universel ? Le Web ! Jusqu’à présent, et on l’espère encore pour longtemps, le web est le même pour toutes les machines, quel que soit leur système d’exploitation. Et nous sommes à l’ère du Cloud Computing¹, ce qui va bien nous arranger, puisque que dans notre cas, il va être possible d’avoir des applications en ligne qui permettent d’écrire du code HTML et CSS, voire de faire du FTP, de manière à remplacer celles que nous ne pouvons pas installer sur nos ordinateurs pour une raison ou pour une autre.

Avec toutefois un inconvénient important: la plupart de ces applications fonctionnant dans le nuage, il faut… une bonne connexion internet pour qu’elles fonctionnent.²

Le principe de ces applications en ligne est simple : vous pouvez les utiliser pour créer vos pages web, et elles sont gratuites tant que votre code reste public: tout ce que vous faites est accessible à la communauté des utilisateurs. Les fonctionnalités de privatisation sont payantes. Pour ce qui nous concerne, aucun problème : je ne pense pas qu’on invente un code révolutionnaire d’ici à la fin du semestre ! 😉

HTML et CSS dans le nuage

Glitch

La seule, parmi toutes celles que j’ai testées, qui permette dans sa version gratuite de gérer plusieurs pages avec une même feuille de style, c’est Glitch.

Inconvénient: pour utiliser Glitch, il faut créer un compte. Mais le compte ouvre deux possibilités intéressantes et importantes pour nous:

1. vous pouvez sauvegarder vos différentes pages HTML sur Glitch, et ainsi avoir une copie en ligne de votre projet
2. Glitch créée une page web coordonnée à votre projet, et permet de l’afficher
   • soit en troisième colonne de la fenêtre qui affiche déjà le code HTML et le code CSS ; pratique, vous voyez les modifications de votre code au fur et à mesure ;
   • soit sur un autre onglet de votre navigateur : pratique aussi, vous voyez la page telle qu’elle s’affichera dans votre projet final.
     Pour voir le résultat des modifications qu’on a fait sur son code, il faut cliquer sur le bouton Show (avec l’icône de lunettes de soleil); c’est là que vous pouvez choisir le mode d’affichage.

![]()cliquez sur le bouton Show pour prévisualiser votre page

Le fait que Glitch permette de travailler sur plusieurs pages HTML le rend favori pour celles et ceux qui, avançant dans le cours, n’ont ni Mac, ni PC.

JSBin

Bien que JS Bin n’ait pas fonctionné comme outil pour partager du code, il reste l’éditeur de code en ligne le plus simple à prendre en main.

Allez donc sur le site http://jsbin.com, qui est par défaut ouvert sur un pad HTML et un pad Output qui affiche le rendu de votre fichier HTML, c’est-à-dire le résultat qu’il donnera sur un navigateur quand il sera en ligne.

Cliquez sur le bouton CSS pour avoir activer le pad CSS. Quand vous écrirez vos premières règles CSS, le résultat s’affichera directement dans le pad Output.

N’oubliez pas
– de sauvegarder régulièrement votre travail (soit dans Files à gauche de la barre de menu grise, soit en utilisant le raccourci clavier cmd + S ou ctrl + S (cmd = ⌘) si vous utilisez un clavier mac ;
– de copier ce travail dans un fichier au format .html ou .css sur votre disque dur (sans quoi vous aurez du mal à le mettre en ligne sur votre espace FTP.

Sinon, ouvrir un compte sur JSBin vous permet de conserver votre code en ligne et de le retrouver à chaque reconnexion.

CodePen

Mais à ouvrir un compte, autant aller sur la Rolls des éditeurs en ligne, CodePen, qui vous offre un éditeur équivalent à Brackets en ligne. De plus, CodePen a une application pour iOS et pour Android (mais je ne suis pas sûr qu’elle puisse être utilisée pour Chrome OS). Toujours est-il que CodePen est avant tout un service en ligne, qui remplit toutes les conditions pour notre apprentissage.
On y reviendra pour trouver des morceaux de code pour des éléments un peu compliqué, il fonctionnera fréquemment comme une bibliothèque de snippets (des bouts de code réutilisables).

Vous pouvez masquer le pad Javascript, qui ne nous servira pas. Et vous pouvez reconfigurer et redimensionner les différents pads.

JSitor

Au fil de mes recherches, j’ai aussi trouvé cette application qui m’a l’air très intéressante et sans complication : JSitor. Elle cumule l’avantage d’être une webapp et d’avoir une application dédiée pour iOS, Android, et ChromeOS (malheureusement, je n’ai pas pu tester l’existence de cette dernière).

Son interface est très simplifiée, ce qui peut être un avantage quand on démarre.

FTP en ligne

Une fois que vous avez écrit vos pages web et votre feuille de style, n’oubliez pas de les enregistrer sur votre ordinateur (mieux: dans un dossier dédié dans votre dossier Dropbox).

Une fois enregistrés sur votre disque dur, vous pouvez double cliquer sur votre fichier index.html et… Ô miracle : il s’ouvre dans votre navigateur, et vous voyez votre site.

C’est que votre site est maintenant créé localement, et votre navigateur n’a besoin de rien de plus pour le lire normalement.
Le problème, c’est que votre site n’est pas en ligne, sur le web. Seul votre ordinateur peut le lire.
C’est la raison pour laquelle on utilise un logiciel de FTP: pour mettre son site sur un serveur qui le rendra disponible en ligne.

J’ai repéré un logiciel de FTP gratuit en ligne, qui remplacera donc Cyberduck pour celles et ceux qui n’ont ni PC Windows (ou Linux), ni Mac : allez sur le site https://webftp.selfbuild.fr/ et utilisez vos identifiants pour accéder à votre espace FTP, avec les correspondances suivantes par rapport au fichier Accès FTP qu’il y a sur la dropbox :

Sur WebFTP	sur le fichier Accès FTP 2020
Hôte	serveur
utilisateur	nom d’utilisateur
Mot de passse	mot de passe

Cliquez sur connexion une fois que vous avez rempli tous les champs. Et voilà, vous êtes connectée à votre espace FTP.

L’inconvénient, c’est qu’il faudra recommencer cette manœuvre à chaque fois que vous voulez mettre des fichiers en ligne par FTP, mais l’avantage, c’est que vous n’avez absolument pas besoin d’ouvrir un compte ni de vous abonner à n’importe quoi.

Une fois connecté vous pouvez mettre des fichiers en ligne par glisser-déposer.
N’oubliez pas, une fois que vous avez mis vos fichiers, de vous déconnecter de WebFTP en cliquant dans la barre bleue à droite sur Fichier, puis en descendant pour cliquer jusqu’à déconnexion.

Et voilà !

Au terme de ce long périple, vous voilà capable de vous débrouiller pour suivre le cours et avancer votre code, même si vous ne disposez que d’un navigateur sur iPad ou sur ChromeOS.
À vous de jouer !