- Bienvenue dans cette version préliminaire de Brackets, le nouvel éditeur open source adapté au Web de - demain. Nous attachons une grande importance aux normes et cherchons à créer des outils plus adaptés aux - langages JavaScript, HTML et CSS ainsi qu’aux autres technologies du Web ouvert. Il s’agit là de notre + Bienvenue dans cette version préliminaire de Brackets, le nouvel éditeur open source adapté au Web de + demain. Nous attachons une grande importance aux normes et cherchons à créer des outils plus adaptés aux + langages JavaScript, HTML et CSS ainsi qu’aux autres technologies du Web ouvert. Il s’agit là de notre modeste première contribution.
@@ -28,11 +28,11 @@ WHAT IS BRACKETS? -->- Brackets se distingue des éditeurs traditionnels, notamment par son écriture en JavaScript, HTML - et CSS. Autrement dit, la plupart des utilisateurs de Brackets disposent des capacités nécessaires pour - modifier et étendre l’éditeur. En fait, nous utilisons Brackets tous les jours pour son propre - développement. Brackets propose aussi des fonctionnalités uniques, comme l’Edition rapide ou l’Aperçu - en direct, que vous ne trouverez pas forcément dans d’autres éditeurs. Pour en savoir plus sur + Brackets se distingue des éditeurs traditionnels, notamment par son écriture en JavaScript, HTML + et CSS. Autrement dit, la plupart des utilisateurs de Brackets ont les compétences nécessaires pour + modifier et étendre l’éditeur. En fait, nous utilisons Brackets tous les jours pour son propre + développement. Brackets propose aussi des fonctionnalités uniques, comme l’Edition rapide ou l’Aperçu + en direct, que vous ne trouverez pas forcément dans d’autres éditeurs. Pour en savoir plus sur l’utilisation de ces fonctionnalités, poursuivez votre lecture.
@@ -44,29 +44,29 @@ -->- Vous ne risquez donc plus de perdre de vue le contexte en passant d’un document à un autre. Lorsque vous - modifiez un fichier HTML, utilisez le raccourci Cmd/Ctrl + E pour ouvrir un éditeur rapide - intégré qui affiche l’ensemble du code CSS associé. Peaufinez votre CSS, puis appuyez sur Echap - pour revenir au format HTML, ou laissez simplement les règles CSS ouvertes afin qu’elles deviennent partie - intégrante de l’éditeur HTML. En appuyant sur Echap en dehors d’un éditeur intégré rapide, tous + Vous ne risquez plus de perdre de vue le contexte en passant d’un document à un autre. Lorsque vous + modifiez un fichier HTML, utilisez le raccourci Cmd/Ctrl + E pour ouvrir un éditeur rapide + intégré qui affiche l’ensemble du code CSS associé. Peaufinez votre CSS, puis appuyez sur Echap + pour revenir au format HTML, ou laissez simplement les règles CSS ouvertes afin qu’elles deviennent partie + intégrante de l’éditeur HTML. En appuyant sur Echap en dehors d’un éditeur intégré rapide, tous les éditeurs sont réduits.
- Une petite démonstration ? Placez le curseur de la souris sur la balise ci-dessus et - tapez Cmd/Ctrl + E. L’éditeur rapide de CSS doit s’afficher en haut. Sur la droite, vous pouvez - voir la liste des règles CSS applicables à la balise. Il vous suffit de faire défiler ces règles avec + Une petite démonstration ? Placez le curseur de la souris sur la balise au-dessus et + tapez Cmd/Ctrl + E. L’éditeur rapide de CSS doit s’afficher en haut. Sur la droite, vous pouvez + voir la liste des règles CSS applicables à la balise. Il vous suffit de faire défiler ces règles avec Alt + Haut/Bas pour trouver celle que vous souhaitez modifier. - +
- Vous pouvez utiliser le même raccourci pour le code JavaScript afin d’afficher le corps d’une fonction. - Pour ce faire, placez le curseur sur le nom de la fonction que vous appelez. Les éditeurs intégrés ne - peuvent pas encore être imbriqués. Vous ne pouvez donc utiliser l’édition rapide que lorsque le curseur + Vous pouvez utiliser le même raccourci pour le code JavaScript afin d’afficher le corps d’une fonction. + Pour ce faire, placez le curseur sur le nom de la fonction que vous appelez. Les éditeurs intégrés ne + peuvent pas encore être imbriqués. Vous ne pouvez donc utiliser l’édition rapide que lorsque le curseur se trouve dans un éditeur « plein écran ».
@@ -75,86 +75,97 @@ -->- Depuis des années, nous pratiquons tous la fameuse technique « Enregistrer/Actualiser » : apporter des - modifications à l’éditeur, enregistrer, basculer vers le navigateur, puis actualiser la page pour voir + Depuis des années, nous pratiquons tous la fameuse technique « Enregistrer/Actualiser » : apporter des + modifications à l’éditeur, enregistrer, basculer vers le navigateur, puis actualiser la page pour voir le résultat. Avec Brackets, cette longue procédure appartient au passé.
- Brackets se connecte en direct à votre navigateur local et transmet vos mises à jour au fur et - à mesure que vous les appliquez au code HTML et CSS. Des outils accessibles depuis le navigateur permettent - certes d’obtenir un résultat similaire, mais avec Brackets, vous n’avez pas besoin de copier et coller - à nouveau le code final dans l’éditeur. Le navigateur lit votre code, mais c’est l’éditeur qui le + Brackets se connecte en direct à votre navigateur local et transmet les mises à jour du code + HTML et CSS au fur et à mesure que vous le modifiez. Des outils accessibles depuis le navigateur permettent + certes d’obtenir un résultat similaire, mais avec Brackets, vous n’avez pas besoin de copier et coller + à nouveau le code final dans l’éditeur. Le navigateur lit votre code, mais c’est l’éditeur qui le fait vivre !
- Avec Brackets, vous pouvez facilement visualiser les effets des modifications du code HTML et CSS sur - la page. Lorsque vous placez le curseur sur une règle CSS, Brackets surligne les éléments concernés - dans le navigateur. De même, lorsque vous modifiez un fichier HTML, Brackets surligne les éléments + Avec Brackets, vous pouvez facilement visualiser les effets des modifications du code HTML et CSS sur + la page. Lorsque vous placez le curseur sur une règle CSS, Brackets surligne les éléments concernés + dans le navigateur. De même, lorsque vous modifiez un fichier HTML, Brackets surligne les éléments HTML correspondants dans le navigateur.
- Si vous avez installé Google Chrome, vous pouvez dès maintenant tester cette fonctionnalité. - Cliquez sur l’icône représentant un éclair en haut à droite de la fenêtre Brackets ou utilisez la - combinaison Cmd/Ctrl + Alt + P. Lorsque le module Aperçu en direct est activé sur un document - HTML, tous les documents CSS associés peuvent être modifiés en temps réel. L’icône passe du gris au doré + Si vous avez installé Google Chrome, vous pouvez dès maintenant tester cette fonctionnalité. + Cliquez sur l’icône représentant un éclair en haut à droite de la fenêtre Brackets ou utilisez la + combinaison Cmd/Ctrl + Alt + P. Lorsque le module Aperçu en direct est activé sur un document + HTML, tous les documents CSS associés peuvent être modifiés en temps réel. L’icône passe du gris au doré une fois que Brackets a établi la connexion à votre navigateur. - - Placez maintenant le curseur de la souris sur la balise ci-dessus. Vous constatez qu’un - surlignement bleu apparaît autour de l’image dans Chrome. Utilisez ensuite la combinaison - Cmd/Ctrl + E pour ouvrir les règles CSS définies. Essayez de faire passer l’épaisseur de - la bordure de 1 px à 10 px, ou de changer la couleur d’arrière-plan de « dimgray » à « hotpink ». - Si Brackets et votre navigateur s’exécutent côte à côte, ce dernier affichera immédiatement les + + Placez maintenant le curseur de la souris sur la balise au-dessus. Vous constatez qu’un + surlignement bleu apparaît autour de l’image dans Chrome. Utilisez ensuite la combinaison + Cmd/Ctrl + E pour ouvrir les règles CSS définies. Essayez de faire passer l’épaisseur de + la bordure de 1 px à 10 px, ou de changer la couleur d’arrière-plan de « dimgray » à « hotpink ». + Si Brackets et votre navigateur s’exécutent côte à côte, ce dernier affiche immédiatement les modifications. Plutôt sympathique, non ?- A l’heure actuelle, le module Aperçu en direct de Brackets ne fonctionne que pour le code HTML et CSS. - Cependant, dans cette version, les modifications apportées aux fichiers JavaScript sont - automatiquement rechargées lorsque vous enregistrez. Nous travaillons activement à la prise en charge - du module Aperçu en direct pour le langage JavaScript. La fonctionnalité Aperçu en direct - n’est disponible qu’avec Google Chrome, mais nous souhaitons à l’avenir déployer cette fonctionnalité + A l’heure actuelle, le module Aperçu en direct de Brackets ne fonctionne que pour le code HTML et CSS. + Cependant, dans cette version, les modifications apportées aux fichiers JavaScript sont + automatiquement rechargées lorsque vous enregistrez. Nous travaillons activement à la prise en charge + du module Aperçu en direct pour le langage JavaScript. La fonctionnalité Aperçu en direct + n’est disponible qu’avec Google Chrome, mais nous souhaitons à l’avenir déployer cette fonctionnalité sur l’ensemble des navigateurs.
- Pour ceux d’entre nous qui n’ont pas encore mémorisé les équivalents en couleur des valeurs HEX ou RVB, - Brackets permet d’afficher rapidement et facilement la couleur utilisée. Dans votre code CSS ou HTML, - placez simplement le curseur sur n’importe quelle valeur colorimétrique ou dégradé, et Brackets - affichera automatiquement un aperçu de la couleur ou du dégradé. Procédez de même pour les - images : placez simplement le curseur sur le lien de l’image dans l’éditeur Brackets pour afficher une + Pour ceux d’entre nous qui n’ont pas encore mémorisé les équivalents en couleur des valeurs HEX ou RVB, + Brackets permet d’afficher rapidement et facilement la couleur utilisée. Dans votre code CSS ou HTML, + placez simplement le curseur sur n’importe quelle valeur colorimétrique ou dégradé, et Brackets + affiche automatiquement un aperçu de la couleur ou du dégradé. Procédez de même pour les + images : placez simplement le curseur sur le lien de l’image dans l’éditeur Brackets pour afficher une miniature de cette image.
- - Testez l’aperçu au survol par vous-même : placez le curseur sur la balise en haut du - document et appuyez sur Cmd/Ctrl + E pour ouvrir un éditeur rapide CSS. A présent, placez - le curseur sur l’une des valeurs de couleur du code CSS. Vous pouvez également tester cette - fonctionnalité sur un dégradé : ouvrez un éditeur rapide CSS sur la balise HTML située en haut de la - page, puis placez le curseur sur l’une des valeurs de l’image d’arrière-plan. Pour essayer l’aperçu + + Testez l’affichage rapide par vous-même : placez le curseur sur la balise en haut du + document et appuyez sur Cmd/Ctrl + E pour ouvrir un éditeur rapide CSS. A présent, placez + le curseur sur l’une des valeurs de couleur du code CSS. Vous pouvez également tester cette + fonctionnalité sur un dégradé : ouvrez un éditeur rapide CSS sur la balise , + puis placez le curseur sur l’une des valeurs de l’image d’arrière-plan. Pour essayer l’aperçu avec une image, placez le curseur sur la capture d’écran insérée plus haut dans le document. ++ En plus de tous les atouts déjà intégrés à Brackets, notre communauté de développeurs, qui ne cesse de + s’agrandir, a mis au point plus d’une centaine d’extensions qui offrent des fonctionnalités très + pratiques. Si vous avez besoin d’une fonction qui ne se trouve pas dans Brackets, il est fort probable + qu’un utilisateur ait créé l’extension qu’il vous faut. Pour parcourir la liste des extensions + disponibles ou en rechercher une en particulier, cliquez sur Fichier > Extension + Manager, puis ouvrez l’onglet « Disponible ». Lorsque vous trouvez l’extension qui vous + convient, il vous suffit de cliquer sur le bouton Installer correspondant. +
+- Brackets est un projet open-source. Des développeurs web du monde entier participent à l’amélioration - de l’éditeur de code. Nombreux sont ceux qui créent des extensions afin de développer les possibilités + Brackets est un projet open source. Des développeurs web du monde entier participent à l’amélioration + de l’éditeur de code. Nombreux sont ceux qui créent des extensions afin de développer les possibilités de Brackets. Donnez-nous votre avis, partagez vos idées ou participez directement au projet.