mirror of
https://github.com/adobe/brackets.git
synced 2024-11-20 09:53:00 +01:00
Merge pull request #5692 from adobe/fr_GettingStarted
Updated French translation for "Getting Started"
This commit is contained in:
Narciso Jaramillo
commit
966f810c7f
@ -4,13 +4,13 @@
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
||||
<title>PREMIERS PAS DANS BRACKETS</title>
|
||||
<title>PREMIERS PAS AVEC BRACKETS</title>
|
||||
<meta name="description" content="An interactive getting started guide for Brackets.">
|
||||
<link rel="stylesheet" href="main.css">
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<h1>PREMIERS PAS DANS BRACKETS</h1>
|
||||
<h1>PREMIERS PAS AVEC BRACKETS</h1>
|
||||
<h2>Suivez le guide !</h2>
|
||||
|
||||
<!--
|
||||
@ -18,9 +18,9 @@
|
||||
-->
|
||||
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
|
||||
@ -28,11 +28,11 @@
|
||||
WHAT IS BRACKETS?
|
||||
-->
|
||||
<p>
|
||||
<em>Brackets se distingue des éditeurs traditionnels,</em> 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
|
||||
<em>Brackets se distingue des éditeurs traditionnels,</em> 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.
|
||||
</p>
|
||||
|
||||
@ -44,29 +44,29 @@
|
||||
-->
|
||||
<h3>Edition rapide des codes CSS et JavaScript</h3>
|
||||
<p>
|
||||
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 <kbd>Cmd/Ctrl + E</kbd> pour ouvrir un éditeur rapide
|
||||
intégré qui affiche l’ensemble du code CSS associé. Peaufinez votre CSS, puis appuyez sur <kbd>Echap</kbd>
|
||||
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 <kbd>Echap</kbd> 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 <kbd>Cmd/Ctrl + E</kbd> pour ouvrir un éditeur rapide
|
||||
intégré qui affiche l’ensemble du code CSS associé. Peaufinez votre CSS, puis appuyez sur <kbd>Echap</kbd>
|
||||
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 <kbd>Echap</kbd> en dehors d’un éditeur intégré rapide, tous
|
||||
les éditeurs sont réduits.
|
||||
</p>
|
||||
|
||||
<samp>
|
||||
Une petite démonstration ? Placez le curseur de la souris sur la balise <!-- <samp> --> ci-dessus et
|
||||
tapez <kbd>Cmd/Ctrl + E</kbd>. 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 <!-- <samp> --> au-dessus et
|
||||
tapez <kbd>Cmd/Ctrl + E</kbd>. 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
|
||||
<kbd>Alt + Haut/Bas</kbd> pour trouver celle que vous souhaitez modifier.
|
||||
</samp>
|
||||
|
||||
|
||||
<a href="screenshots/quick-edit.png">
|
||||
<img alt="Capture d’écran de la fonction Edition rapide CSS" src="screenshots/quick-edit.png" />
|
||||
</a>
|
||||
|
||||
<p>
|
||||
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 ».
|
||||
</p>
|
||||
|
||||
@ -75,86 +75,97 @@
|
||||
-->
|
||||
<h3>Affichage des modifications HTML et CSS en direct dans le navigateur</h3>
|
||||
<p>
|
||||
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é.
|
||||
</p>
|
||||
<p>
|
||||
Brackets se connecte <em>en direct</em> à 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 <em>en direct</em> à 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 !
|
||||
</p>
|
||||
|
||||
<h3>Surlignement en direct des éléments HTML et règles CSS</h3>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
|
||||
<samp>
|
||||
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 <kbd>Cmd/Ctrl + Alt + P</kbd>. 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 <kbd>Cmd/Ctrl + Alt + P</kbd>. 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 <!-- <img> --> ci-dessus. Vous constatez qu’un
|
||||
surlignement bleu apparaît autour de l’image dans Chrome. Utilisez ensuite la combinaison
|
||||
<kbd>Cmd/Ctrl + E</kbd> 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 <!-- <img> --> au-dessus. Vous constatez qu’un
|
||||
surlignement bleu apparaît autour de l’image dans Chrome. Utilisez ensuite la combinaison
|
||||
<kbd>Cmd/Ctrl + E</kbd> 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 ?
|
||||
</samp>
|
||||
|
||||
<p class="note">
|
||||
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.
|
||||
</p>
|
||||
|
||||
<h3>Affichage rapide</h3>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
|
||||
<samp>
|
||||
Testez l’aperçu au survol par vous-même : placez le curseur sur la balise <!-- <body> --> en haut du
|
||||
document et appuyez sur <kbd>Cmd/Ctrl + E</kbd> 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
|
||||
<samp>
|
||||
Testez l’affichage rapide par vous-même : placez le curseur sur la balise <!-- <body> --> en haut du
|
||||
document et appuyez sur <kbd>Cmd/Ctrl + E</kbd> 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> -->,
|
||||
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.
|
||||
</samp>
|
||||
|
||||
<h3>Vous en voulez plus ? Jetez un œil du côté des extensions !</h3>
|
||||
<p>
|
||||
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 <strong>Fichier > Extension
|
||||
Manager</strong>, puis ouvrez l’onglet « Disponible ». Lorsque vous trouvez l’extension qui vous
|
||||
convient, il vous suffit de cliquer sur le bouton Installer correspondant.
|
||||
</p>
|
||||
|
||||
<!--
|
||||
LET US KNOW WHAT YOU THINK
|
||||
-->
|
||||
<h2>Participer</h2>
|
||||
<p>
|
||||
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.
|
||||
</p>
|
||||
<ul>
|
||||
<li><a href="http://brackets.io">Brackets.io</a></li>
|
||||
<li><a href="http://blog.brackets.io">Blog de l’équipe Brackets</a></li>
|
||||
<li><a href="http://github.com/adobe/brackets">Brackets sur GitHub</a></li>
|
||||
<li><a href="https://github.com/adobe/brackets/wiki/Brackets-Extensions">Extensions Brackets</a></li>
|
||||
<li><a href="https://brackets-registry.aboutweb.com">Registre des extensions Brackets</a></li>
|
||||
<li><a href="http://github.com/adobe/brackets/wiki">Wiki Brackets</a></li>
|
||||
<li><a href="http://groups.google.com/group/brackets-dev">Liste de diffusion des développeurs Brackets</a></li>
|
||||
<li><a href="https://twitter.com/#!/brackets">@Brackets sur Twitter</a></li>
|
||||
<li><a href="https://twitter.com/#!/brackets">@brackets sur Twitter</a></li>
|
||||
<li>Discutez avec les développeurs de Brackets via IRC sur le canal #brackets du réseau Freenode.</li>
|
||||
</ul>
|
||||
|
||||
@ -181,4 +192,4 @@
|
||||
[:::::::::::::: ::::::::::::::]
|
||||
[[[[[[[[[[[[[[[ ]]]]]]]]]]]]]]]
|
||||
|
||||
-->
|
||||
-->
|
||||
|
||||
Loading…
Reference in New Issue
Block a user