Juin 2013
Brackets : l'éditeur de code open-source d'Adobe
par Anthony Nelzin le 26.06.2012 à 11:00
Brackets est un nouvel éditeur de code signé Adobe. Particularité : il est open-source (licence MIT), et utilise les langages du web. Construit avec HTML, CSS et JavaScript, il permet ainsi de développer… en HTML, CSS et JavaScript.
Trois idées guident le développement de Brackets. La première consiste à minimiser au maximum l'interface pour laisser un maximum de place au code, et à éviter les allers-retours entre différents fichiers. Ainsi dans un fichier HTML, vous pouvez effectuer un Cmd + E à hauteur d'un élément pour convoquer le style CSS correspondant et le modifier — sans sortir de votre fichier HTML et naviguer dans vos feuilles de style, une fonction plutôt bien pensée.
La deuxième est la fusion de l'édition de code dans l'éditeur et de l'inspecteur de code dans le navigateur : Brackets peut contrôler le navigateur et le rafraîchir en temps réel au fur et à mesure des modifications, pour le transformer en aperçu en temps réel. Cliquer sur un élément dans le navigateur sélectionne l'élément correspondant dans Brackets, et vice-versa.
La troisième est le fait que Brackets est open-source : Adobe compte sur la participation de développeurs tiers pour faire évoluer son logiciel. Le code source de Brackets est disponible sur GitHub.
Trois idées guident le développement de Brackets. La première consiste à minimiser au maximum l'interface pour laisser un maximum de place au code, et à éviter les allers-retours entre différents fichiers. Ainsi dans un fichier HTML, vous pouvez effectuer un Cmd + E à hauteur d'un élément pour convoquer le style CSS correspondant et le modifier — sans sortir de votre fichier HTML et naviguer dans vos feuilles de style, une fonction plutôt bien pensée.
La deuxième est la fusion de l'édition de code dans l'éditeur et de l'inspecteur de code dans le navigateur : Brackets peut contrôler le navigateur et le rafraîchir en temps réel au fur et à mesure des modifications, pour le transformer en aperçu en temps réel. Cliquer sur un élément dans le navigateur sélectionne l'élément correspondant dans Brackets, et vice-versa.
La troisième est le fait que Brackets est open-source : Adobe compte sur la participation de développeurs tiers pour faire évoluer son logiciel. Le code source de Brackets est disponible sur GitHub.
|
2
1
Vos réactions (20 réactions)
[MGZ] Shralldam
[26/06/2012 11:08]
Adobe qui ouvre sa bracket, on aura tout vu !
Bon, je suis sorti ->[°]
Adobe qui ouvre sa bracket, on aura tout vu !
Bon, je suis sorti ->[°]
hadrien01
[26/06/2012 11:15]
via MacG Mobile
J'aime bien le concept, mais il faut voir à l'usage. Si seulement ça pouvait réveiller les développeurs de Panic et MacRabbit...
J'aime bien le concept, mais il faut voir à l'usage. Si seulement ça pouvait réveiller les développeurs de Panic et MacRabbit...
antoninGR38
[26/06/2012 11:19]
Nice, merci MacG pour l'info et merci Adobe pour cet outil prometteur :D
Nice, merci MacG pour l'info et merci Adobe pour cet outil prometteur :D
hadrien01
[26/06/2012 11:19]
via MacG Mobile
PS : le son "i" en anglais correspond au E. Donc le raccourci, c'est cmd+E
PS : le son "i" en anglais correspond au E. Donc le raccourci, c'est cmd+E
Rigat0n
[26/06/2012 11:21]
via iGeneration pour iPad
Le truc avec le CSS est une super idée, ça serait cool qu'on retrouve ça dans Coda.
Le truc avec le CSS est une super idée, ça serait cool qu'on retrouve ça dans Coda.
oomu
[26/06/2012 11:32]
@hadrien01 [26/06/2012 11:15]
Panic est un "dinosaure" ?
@hadrien01 [26/06/2012 11:15]
Panic est un "dinosaure" ?
Ali Baba
[26/06/2012 11:48]
via MacG Mobile
"Cliquer sur un élément dans le navigateur sélectionne l'élément correspondant dans Brackets, et vice-versa."
Hum, si j'ai bien compris la vidéo, ça ça n'existe pas encore.
"Cliquer sur un élément dans le navigateur sélectionne l'élément correspondant dans Brackets, et vice-versa."
Hum, si j'ai bien compris la vidéo, ça ça n'existe pas encore.
nicolas
[26/06/2012 11:57]
attention question de n00b
est-ce que ça existe, des applications de dev web, avec les principaux moteurs intégrés (WebKit, Gecko) pour avoir un aperçu "temps réel" de tout ça. (autre qu'un WYSIWYG)
sinon, quel WYSIWYG vous me conseilleriez, pour faire un site web simple + une version mobile?
attention question de n00b
est-ce que ça existe, des applications de dev web, avec les principaux moteurs intégrés (WebKit, Gecko) pour avoir un aperçu "temps réel" de tout ça. (autre qu'un WYSIWYG)
sinon, quel WYSIWYG vous me conseilleriez, pour faire un site web simple + une version mobile?
hadrien01
[26/06/2012 11:58]
Je viens de télécharger, la barre de menus est dans la fenêtre, comme sur Windows et certaines distribs Linux. Et l'application est en un seul morceau pour Mac, mais avec plein de DDLs pour Windows...Et le live-dev ne fonctionne que sur Chrome. Non seulement peu pratique, mais encore du webkit-only.
Edit : l'interface s'inspire beaucoup de la vue projet de Espresso, et le live-edit ne fonctionne que pour le CSS.
Je viens de télécharger, la barre de menus est dans la fenêtre, comme sur Windows et certaines distribs Linux. Et l'application est en un seul morceau pour Mac, mais avec plein de DDLs pour Windows...Et le live-dev ne fonctionne que sur Chrome. Non seulement peu pratique, mais encore du webkit-only.
Edit : l'interface s'inspire beaucoup de la vue projet de Espresso, et le live-edit ne fonctionne que pour le CSS.
hadrien01
[26/06/2012 12:07]
@ nicolas : Aucun éditeur n'intègre à la fois Presto/Webkit/Gecko/... en même temps. Pour Gecko, le successeur de NVU fait plutôt bien son travail. Pour Webkit, j'utilise Espresso, mais Coda fait aussi du temps réel (je crois).
Pour du WYSIWYG, il y a BlueGriffon, mais il fait un peu machine à gaz, sans un assez grand support du CSS (pour une police plus petite, il utilise une cinquantaine de balises small). Espresso contient un mode pour modifier le CSS sans en connaître la structure : http://www.macgeneration.com/news/voir/206212/developpement-web-espresso-2-integre-css-edit-maj sur la capture en bas à droite.
Ajout : Pour bien commencer un site, tu peux utiliser Twitter Bootstrap, qui te donne une "structure" toute faite en CSS. Tu écris de l'HTML, donc du texte, et il te crée un site avec une version responsive, c'est-à-dire qu'elle s'adapte à la taille de l'écran. Leur site fait office d'exemple et de documentation (essaye de redimensionner la fenêtre).
Ajout 2 : Tutoreil vidéo sur http://www.grafikart.fr/tutoriels/html-css/bootstrap-twitter-182
@ nicolas : Aucun éditeur n'intègre à la fois Presto/Webkit/Gecko/... en même temps. Pour Gecko, le successeur de NVU fait plutôt bien son travail. Pour Webkit, j'utilise Espresso, mais Coda fait aussi du temps réel (je crois).
Pour du WYSIWYG, il y a BlueGriffon, mais il fait un peu machine à gaz, sans un assez grand support du CSS (pour une police plus petite, il utilise une cinquantaine de balises small). Espresso contient un mode pour modifier le CSS sans en connaître la structure : http://www.macgeneration.com/news/voir/206212/developpement-web-espresso-2-integre-css-edit-maj sur la capture en bas à droite.
Ajout : Pour bien commencer un site, tu peux utiliser Twitter Bootstrap, qui te donne une "structure" toute faite en CSS. Tu écris de l'HTML, donc du texte, et il te crée un site avec une version responsive, c'est-à-dire qu'elle s'adapte à la taille de l'écran. Leur site fait office d'exemple et de documentation (essaye de redimensionner la fenêtre).
Ajout 2 : Tutoreil vidéo sur http://www.grafikart.fr/tutoriels/html-css/bootstrap-twitter-182
antoninGR38
[26/06/2012 12:09]
via MacG Mobile
@nicolas
J'aime beaucoup Espresso de Macrabbit. L'outil CSSEdit a un mode Live qui permet de répercuter à la volée les changement de propriétés CSS dans un navigateur intégré.
@nicolas
J'aime beaucoup Espresso de Macrabbit. L'outil CSSEdit a un mode Live qui permet de répercuter à la volée les changement de propriétés CSS dans un navigateur intégré.
Nicooprat
[26/06/2012 12:21]
Mais qui utilise encore du CSS ? La vraie question qui se pose est l'intégration des préprocesseurs CSS tels que LESS, SASS ou Stylus...! Quelqu'un a testé ?
Mais qui utilise encore du CSS ? La vraie question qui se pose est l'intégration des préprocesseurs CSS tels que LESS, SASS ou Stylus...! Quelqu'un a testé ?
hadrien01
[26/06/2012 12:24]
@ Nicooprat : Rien d'autre que du CSS. Et de toute façon, http://daneden.me/2012/05/preprocessors/
@ Nicooprat : Rien d'autre que du CSS. Et de toute façon, http://daneden.me/2012/05/preprocessors/
v1nce29
[26/06/2012 13:37]
@hadrien01
> Et de toute façon, http://daneden.me/2012/05/preprocessors/
Mouais. Le paragraphe le plus pertinent est celui ou il avoue que ses arguments anti preprocesseurs sont faiblards.
@hadrien01
> Et de toute façon, http://daneden.me/2012/05/preprocessors/
Mouais. Le paragraphe le plus pertinent est celui ou il avoue que ses arguments anti preprocesseurs sont faiblards.
domsou
[26/06/2012 14:00]
via MacG Mobile
@Nicooprat :
J'utilises Espresso + Codekit. Certains sites sont avec LESS d'autres avec SASS afin d'essayer les 2 approches. Codekit rend le tout transparent.
@Nicooprat :
J'utilises Espresso + Codekit. Certains sites sont avec LESS d'autres avec SASS afin d'essayer les 2 approches. Codekit rend le tout transparent.
2
1
Réagir
Il n'est pas possible de réagir à cette dépêche. Si vous souhaitez toutefois réagir, n'hésitez pas à faire un tour dans nos forums.