brackets/samples/fr/Premiers pas/index.html at b4bfeb23918d7a0aa135a09242adb35ce03eaca0 · adobe/brackets · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
<!DOCTYPE html>
<html>

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <title>PREMIERS PAS DANS 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>
        <h2>Suivez le guide !</h2>

        <!--
            MADE WITH <3 AND JAVASCRIPT
        -->

        <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
            modeste première contribution.
        </p>

        <!--
            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
            l’utilisation de ces fonctionnalités, poursuivez votre lecture.
        </p>


        <h2>Nous testons actuellement quelques nouveautés.</h2>

        <!--
            THE RELATIONSHIP BETWEEN HTML, CSS AND JAVASCRIPT
        -->
        <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
            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
            <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
            se trouve dans un éditeur « plein écran ».
        </p>

        <!--
            LIVE PREVIEW
        -->
        <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
            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
            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
            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é
            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
            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é
            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
            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
            avec une image, placez le curseur sur la capture d’écran insérée plus haut dans le document.
        </samp>

        <!--
            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
            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="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>Discutez avec les développeurs de Brackets via IRC sur le canal #brackets du réseau Freenode.</li>
        </ul>

    </body>
</html>
<!--

    [[[[[[[[[[[[[[[     ]]]]]]]]]]]]]]]
    [::::::::::::::     ::::::::::::::]
    [::::::::::::::     ::::::::::::::]
    [::::::[[[[[[[:     :]]]]]]]::::::]
    [:::::[                     ]:::::]
    [:::::[                     ]:::::]
    [:::::[                     ]:::::]
    [:::::[                     ]:::::]
    [:::::[    CODE THE WEB     ]:::::]
    [:::::[  http://brackets.io ]:::::]
    [:::::[                     ]:::::]
    [:::::[                     ]:::::]
    [:::::[                     ]:::::]
    [:::::[                     ]:::::]
    [::::::[[[[[[[:     :]]]]]]]::::::]
    [::::::::::::::     ::::::::::::::]
    [::::::::::::::     ::::::::::::::]
    [[[[[[[[[[[[[[[     ]]]]]]]]]]]]]]]

-->