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

Brackets : un éditeur moderne open source pour le codage

le .

toutpublic

logo bracketsBrackets est un éditeur open-source orienté "web design et développement" pour la conception de pages Web HTML,  CSS et  JavaScript. Brackets est multi-plateformes et est particulièrement adapté au profil d'intégrateur ou de webdesigner ; il a été développé par Adobe et est publié sous une licence MIT. Pour rappel, Les éditeurs de codes comme Sublime Text, NotePad ++ ou Atom permettent d’éditer des textes avec une coloration syntaxique selon le langage choisi.
Brackets dispose d'une interface utilisateur épurée mais trés complète en mode "édition de code". Brackets propose une édition rapide des fichiers ou encore l'affichage d'un nuancier pour faciliter la modification des codes de couleur dans les feuilles de styles éditées.

 

Principaux atouts :

• Mise à jour du code HTML et CSS, dans le navigateur web, en temps réel sans rechargement ;
• Surbrillance des éléments : le ou les éléments sélectionnés sur Brackets sont affichés en surbrillance dans le navigateur web ;

 

Quick Edit :

Quick Edit est une fonctionnalité qui permet de modifier, directement en ligne, du code CSS ou JavaScript.

Edition HTML

Applique une édition rapide sur des éléments HTML pour permettre d'afficher toutes les propriétés CSS correspondantes sous l'élément sélectionné. Les utilisateurs ont la possibilité de créer de nouvelles règles CSS directement dans l'éditeur et d'éditer une propriété CSS de l'élément sans quitter le fichier HTML. L'édition HTML vous permettra d'offrir des contenus de qualité au niveau du codage et ainsi d'améliorer votre référencement naturel.

Fichier JavaScript

Sur des fonctions JavaScript, la fonctionnalité permet la même interaction que la modification d'un élément HTML, mais affiche le code contenu dans la fonction. Toutes les mises à jour du code contenu dans la fonction seront mises à jour automatiquement dans le fichier.

 

Live Preview :

En utilisant la fonctionnalité « Live Preview », le navigateur web interprète immédiatement le code source modifié sous Brackets sans pour autant recharger la page. En clair un affichage du contenu de la page en temps réel. Par exemple, la partie que vous sélectionnez dans l'éditeur se retrouve en surbrillance dans le navigateur.

 

Ecran :

 Brackets ecran

 


Extensions :

L'éditeur supporte l'ajout d'extensions qui peuvent ajouter des fonctionnalités. Celles-ci peuvent être développées dans Brackets lui-même avec HTML CSS et JavaScript, étant donné qu'il est écrit avec ces trois langages. Il est également possible de développer des thèmes. Brackets propose une grande bibliothèque d'extensions que l’on peut installer.

 

Démonstration :

 

 

Une interface Window, OSX, Linux :

  • Mac OSX 10.6.8 or +
  • Windows Vista, 7, or 8/8.1 (x32 and x64)
  • Linux Ubuntu 12.04 or + (x32 and x64)
  • Debian Linux 8 or +
  • Au mmoins 2 GB of RAM pour le développement "Live"

 

Plus d'informations sur : http://brackets.io/

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