L'Education numérique avec Tice-Education

  • word    
  • writer
  •   excel  
  • calc
  • powerpoint
  • impress
  • chrome 
  • firefox
  • safari
  • ie-10-logo
  • ipad 
  • el capitan logo
  • macosx
  • Windows 10
  • linux
  • nexus4
  • android
  • tbi
  • pdf
  • archive black zip 128
  • scratch
  • langage
  • 01010101
  • scratch algo
  • sublimetext ecran
  • cardboard box blue 128
  • robots 
  • Imprimante 3D 
  • car 
  • videoprojecteur 

Codage à l'école, algorithmique

Thimble : Un éditeur de code en ligne pour le HTML, le CSS et le Javascript

le .

college lycee

thimble logoThimble (Mozilla) est un éditeur de code en ligne qui facilite la création et la publication de vos propres pages web tout en apprenant le langage HTML, CSS et le JavaScript. Thimble rend facile la création et le partage de vos sites web. Écrivez et éditez du HTML, du CSS, et du JavaScript directement depuis votre navigateur sur un côté de votre page, avec un aperçu en temps réel sur l'autre côté. Partagez, remixez, répétez !

 

Thimble est un outil fantastique pour enseigner les compétences de codage. Il ne permet pas seulement aux apprenants de faire varier le niveau de leurs compétences pour gagner une compréhension plus complète de la manière dont fonctionne le codage, il permet aussi aux enseignants de construire des expériences spécifiques uniques pour leurs étudiants.

Comment faire ?

Un moyen facile pour commencer est de remixer l'un des projets de démarrage trouvés sur l'accueil Thimble. Ce sont des projets proposés par la communauté.

Appuyez sur le bouton Remix sur un projet de démarrage. Vous verrez alors les volets suivants:

  • Le panneau de gauche montre les fichiers inclus dans le projet. Par exemple, vous pourriez voir un fichier pour HTML, un pour CSS et un autre pour Javascript. Si vous cliquez sur différents fichiers, le contenu des deux autres panneaux change.
  • Le panneau du milieu montre le code du fichier sélectionné.
  • Le panneau de droite montre un aperçu de ce à quoi la page va ressembler sur un navigateur web ou un appareil mobile.
  • Pour chacune des créations faite par le débutant, le volet de droite peut être activé pour voir un tutoriel pour le projet. Cliquez sur le mot "Tutorial" dans la barre grise au-dessus du panneau de prévisualisation pour voir les instructions étape par étape sur la façon de remixer le projet.

Exemple : 

Thimble

 

N'oubliez pas que vous pouvez remixer tout ce qui a été créé sur Thimble. Donc si vous voyez une création qui vous plaît, cliquez sur le bouton Remix pour voir comment elle a été faite ! 

Publier et partager ses projets :

Vous pouvez publier votre projet Thimble à n'importe quel moment en appuyant le bouton « Publish » dans le coin droit supérieur de la page. Quand vous publiez votre projet, vous recevez une adresse web unique que vous pouvez partager avec vos amis, votre famille, vos professeurs... tous ceux avec qui vous voulez partager votre travail !

Vous pouvez éditer votre projet à n'importe quel moment et sauvegarder les changements sans changer l'adresse web (url).

Thimble s'inscrit dans un longue liste d'outils pour apprendre le codage HTML. Un superbe outil libre et gratuit, à tester ! L'éditeur de code en ligne Thimble s vous permettra de proposer des contenus de qualité en terme de codage et de syntaxe mais aussi d'améliorer votre référencement naturel (SEO).

Plus d'informations sur : https://thimble.mozilla.org/fr/

Tags: éditeur HTML javascript css codage

Pour écrire un commentaire, se connecter :
- Les messages injurieux, agressifs, grossiers, les critiques gratuites et non argumentées et les attaques personnelles seront supprimées sans préavis et leurs auteurs bloqués.
- Le langage SMS est banni, les messages publicitaires sont interdits.
Merci de faire un effort de rédaction...
Cordialement
L'équipe Tice-Education