« Thimble » : différence entre les versions

De EduTech Wiki
Aller à la navigation Aller à la recherche
Ligne 15 : Ligne 15 :


== Interface ==
== Interface ==
L'interface de Thimble est divisée en trois sections. La première section permet de visualiser vos fichiers et dossiers. La seconde section permet de voir le code de la page sélectionnée dans la première section. La Troisième section est une prévisualisation live du code que vous êtes en train d'éditer. L'interface est customisable et a de nombreuses options comme par exemple avoir une vue sur le rendu téléphone portable.
L'interface de Thimble est divisée en trois sections. La première section permet de visualiser vos fichiers et dossiers. La seconde section permet de voir le code de la page sélectionnée dans la première section. La Troisième section est une prévisualisation live du code que vous êtes en train d'éditer. L'interface est customisable, il est par exemple possible de changer la taille des différentes options ou de rajouter une console pour le JavaScript et il existe de nombreuses options comme par exemple avoir une vue sur le rendu téléphone portable.
[[Fichier:ThimbleInterface.png|vignette|néant|Inteface de Thimble]]
[[Fichier:ThimbleInterface.png|vignette|néant|Inteface de Thimble]]



Version du 12 juin 2017 à 07:49

Introduction

Thimble est un éditeur de code en ligne, gratuit et open source proposé par Mozilla. Ce dernier permet de créer et de publier des pages web tout en suivant une série de tutoriels sur le langage HTML, CSS et le JavaScript.

Description de Thimble

Thimble permet de créer de nouveau projet, d'importer et d'éditer vos pages de code avec un preview live. Il est tout à fait possible de travailler dans Thimble sans créer de compte, mais un compte reste nécessaire pour enregistrer et publier son travail.

Créer un projet

Pour créer un projet, il suffit simplement de se rendre sur la page de Thimble et de cliquer sur le bouton créer un nouveau projet.

Créer un projet dans Thimble


Interface

L'interface de Thimble est divisée en trois sections. La première section permet de visualiser vos fichiers et dossiers. La seconde section permet de voir le code de la page sélectionnée dans la première section. La Troisième section est une prévisualisation live du code que vous êtes en train d'éditer. L'interface est customisable, il est par exemple possible de changer la taille des différentes options ou de rajouter une console pour le JavaScript et il existe de nombreuses options comme par exemple avoir une vue sur le rendu téléphone portable.

Inteface de Thimble

Importer et exporter des fichiers

  • Pour importer des fichiers dans Thimble, il suffit de glisser les fichiers depuis votre bureau (ou autre dossier) sur la page web de Thimble. Votre fichier apparaîtra alors dans la première section de l'interface la page Thimble.
Importer un fichier dans Thimble
  • Pour exporter un fichier ou un dossier, il suffit de faire un clic droit sur le fichier ou le dossier en question (dans la première section de l'interface) et choisir l'option "télécharger".
Exporter un fichier de Thimble

Publier et remixer

Thimble permet de travailler à plusieurs de façon asynchrone et à distance ou simplement de publier son code pour le partager (il est nécessaire de créer un compte pour cela).

  • Pour publier un code, il suffit d'utiliser le bouton Publier en haut à droite de votre interface Thimble. Cela vous permettra de partager votre projet à tout ceux avec qui vous partagerez le lien.
  • Depuis un lien publié, vous pouvez cliquer sur le bouton Remixer en haut à droite de la page web publier, pour importer le projet dans votre éditeur. Vous pouvez dès alors faire des modifications avant de republier le code.

Accéder à vos projets

Pour accèder à vos différents projets, il suffit de cliquer sur l'onglet en haut à droite Bonjour, nomDeCompte et de choisir l'option Mes projets (il est nécessaire de créer un compte pour cela).