Auteur
Grafikart

57 Commentaires

F56a1d5027c5f85ae1c7a176bbbb5777?s=200&r=pg&d=mm
ghassen, 29-09-2013 02:44:45 - Répondre

Excellent tutoriel ... merci grafikart

F3901f33eec6be00d27b93a176f8c27c?s=200&r=pg&d=mm
Chris, 01-05-2013 19:35:26 - Répondre

A noter que Zen Coding a changé de nom et s'appelle désormais Emmet si vous souhaitez l'utiliser.

0b21ab46e5dd0da1dad99c5d4b534bfa?s=200&r=pg&d=mm
iCherry, 20-05-2014 14:05:33 - Répondre

Merci mon pote :)

540a2282effcd9ab91a9e43a3168f0ff?s=200&r=pg&d=mm
TheDarkNight17, 12-07-2012 01:14:17 - Répondre

Merci graf pour ce superbe plugin je n'arrivais pas me servir des macro mais la c super encore merci

3ad0355a6663244180f403e2896bedc5?s=200&r=pg&d=mm
Lemile, 14-06-2012 20:08:28 - Répondre

Enfin trouver!! Si certains sont intéresser pour savoir : Tools > Options > Keymap. Chercher "abbreviation" et avec le petit icone à côté du raccourci, vous pouvez mettre celui que vous voulez ;)

3ad0355a6663244180f403e2896bedc5?s=200&r=pg&d=mm
Lemile, 14-06-2012 13:52:18 - Répondre

Sur Netbeans, le raccourci pour div.test --> <div class="test">lskjdflsj</div> c'est ctrl + alt + N. Savez vous si il est possible de le changer, et si oui, comment? :D

721044c667209849e8ae00357a7cbd5b?s=200&r=pg&d=mm
ludo31, 04-01-2012 09:50:53 - Répondre

trop fort ^_^

8544966ec004d3c5442227d20004d589?s=200&r=pg&d=mm
Mimisuitou, 13-09-2011 15:37:29 - Répondre

Bonjour ! super le tuto :)

J'ai notepas++ avec zencoding quand je tape le code au lieux de me faire des lignes il me met tout a la suite est ce normal ??

En tout cas ce site m'a appris énormément de choses :)

Je vous remerci d'avance

375f7fde12003e4639bd74c875a880c3?s=200&r=pg&d=mm
sofun, 27-05-2011 14:19:36 - Répondre

Bonjour,

Mon éditeur est Coda, et j'aimerais savoir comment changer le raccourcie clavier Expand Abbreviation.

Pouvez vous m'aider ?

Fdd05edcd2b5c9eb95d560e35f20a363?s=200&r=pg&d=mm
Flohw, 22-04-2011 10:48:10 - Répondre

bon je repasse sur un tuto relativement ancien mais je savais pas qu'il existait un plugin pour coda, j'ai donc cherché et trouvé :)
j'ai decouvert un truc assez enorme (je sais pas si ca le fait pour tous les logiciels et toutes les versions du plugin) : div.col$*2>p*3 donnera
[code]<div class="col1"><p></p><p></p><p></p></div>
<div class="col2"><p></p><p></p><p></p></div>[/code]
voila pour ceux qui n'avaiet pas trouver ;) (plutot que de faire (div.col1>p*3)+(div.col2>p*3))

9e4737bf43098ac8edadac6c3c415f54?s=200&r=pg&d=mm
optygame, 16-02-2011 17:21:22 - Répondre

c'est génial !
je viens de l'installer sur notepad++, ça va me changer la vie et me donner encore plus envie de coder à la main mes elements.
je suis un grand fan du " copier/coller, lol...
merci encore pour cette superbe info !

Bed7c8d7ddc638429721c6b3f182307b?s=200&r=pg&d=mm
chesnel, 05-02-2011 23:18:31 - Répondre

Pour ma part je me heurte à un soucis. Les raccourcis dans la liste fonctionne bien... mais quand je tente de faire div.class ou encore div#test>ul*5 ou toute autre tentative avec une suite cela ne fonctionne pas :S Je suis sous mac avec Netbeans. Une idée ?

02dec481b5ec7f12039e49e8a06f1e0e?s=200&r=pg&d=mm
yohandu23, 01-02-2011 06:44:44 - Répondre

Excellent pour gagner en productivité !

D41d8cd98f00b204e9800998ecf8427e?s=200&r=pg&d=mm
Davy, 03-01-2011 14:50:09 - Répondre

Tout simplement bluffant ! Vraiment excellent, merci pour l'info !!!

1c68841f259bcb456d614b218b07d300?s=200&r=pg&d=mm
zoroxox, 20-12-2010 11:06:51 - Répondre

Euh svp c'est quoi le raccourci sur Komodo edit

E847f3b2318b811e1c3b6f221810c0f0?s=200&r=pg&d=mm
JonathanDaSilva, 01-01-2011 17:05:44 - Répondre

je t'invite à lire les commentaire je l'es déjà expliquer, oublie pas de lire les com avant de poser une question ;).

D41d8cd98f00b204e9800998ecf8427e?s=200&r=pg&d=mm
SolidSnake, 10-12-2010 18:03:44 - Répondre

Très très bon ce petit plugin.

@ Rafayil : pour l'instant, je l'ai téléchargé pour Notepad++ et ça marche nickel !
Enfin après avoir modifié le fichier start.js : j'ai mis les 2 liens, qui étaient en relatif, en dur (au début et à la fin du fichier). La complétion se fait avec Ctrl+E (à modifier pour ceux qui veulent)
Merci encore Grafikart !

1c68841f259bcb456d614b218b07d300?s=200&r=pg&d=mm
zoroxox, 06-12-2010 14:06:31 - Répondre

S'il vous plait veuillez ne pas prendre en compte ma remarque . Et désolé pour le double post ^^ .

1c68841f259bcb456d614b218b07d300?s=200&r=pg&d=mm
zoroxox, 06-12-2010 14:01:53 - Répondre

Comment l'installer avec netbeans vu que c'est un .zip ? DE l'aide sa serait pas de refus . Merci d'avance

A1966791d290154a5915fe84422b5752?s=200&r=pg&d=mm
Jerry Wham, 01-12-2010 02:12:32 - Répondre

Nickel ! Je ne connaissais pas cette astuce bien qu'elle ait plus d'un an. Pour ceux qui se posent la question, sur TextMate, il faut faire pommeE (?E) pour développer l'abréviation. Le bundle à télécharger est le "Zen Coding"

8be19d5f260005e8745f6d94028ed71d?s=200&r=pg&d=mm
__fabrice, 28-11-2010 11:30:40 - Répondre

Hello,

Sur Linux (Ubuntu 1.10), cela marche pas tres bien.

Par exemple, un truc tout simple : "div#toto", en appuyant sur "Tab", rien ne se passe.

J'avais déjà lu ce genre de problème sur des forums.
Quelqu'un sait comment résoudre çà ?

F.

D41d8cd98f00b204e9800998ecf8427e?s=200&r=pg&d=mm
Rafayil, 15-11-2010 00:00:31 - Répondre

Salut, Merci pour cet astuce , j'ai télécharger le fichier zip pour Notepad++ et j'ai l'inclus dans la racine de dossier de notepad++ MAIS ça marche il n'y a pas l'icône "Z" comme le tuto , meme chose avec Dreamweaver Aidez moi SVP! merci d'avance.

9376a788a72721db0ff9bbeb14fdb533?s=200&r=pg&d=mm
x-Val, 13-11-2010 20:24:17 - Répondre

Super sympa merci Graf' ;)
encore une fois, ca va me servir !

1254
Samovar, 13-11-2010 04:56:33 - Répondre

La classe ;D

9aff5c30ddfd07449ec32892da3a5823?s=200&r=pg&d=mm
Arbiter0x, 12-11-2010 21:27:11 - Répondre

Je vois pas comment l'installer :s je telecharge le .zip mais bon, après je vois rien à executer ou quoi que ce soit

Si quelqu'un pouvais m'aider ça serait chouette :) Merci d'avance

(je suis sur mac et j'utilise net beans)

4f08bc1b66725c508f4e46e2ceed54a3?s=200&r=pg&d=mm
Cruwp, 11-11-2010 23:09:51 - Répondre

Je cherche aussi le raccourci pour komodo, sinon super tuto Merci !

E847f3b2318b811e1c3b6f221810c0f0?s=200&r=pg&d=mm
JonathanDaSilva, 12-11-2010 15:24:02 - Répondre

alors pour Komodo il faut aller "edit->preference" puis dans l'onglet "editor->key bindings" c'est la que tu peu modifier tout tes préférence au niveau des raccourci clavier. Pour le ZenCoding tu tape "zen" dans la zone de recherche et tu modifie "expend abbreviation", "next edit point"(t’emmene automatiquement au prochain endroit à compléter) et "wrap with abbreviation" (ça te permettra d'entouré du texte par du code ce que ne peu pas faire NetBeans :p)

PS: exemple de "wrap with abbreviation" http://vimeo.com/7405114 à 2:23

4f08bc1b66725c508f4e46e2ceed54a3?s=200&r=pg&d=mm
Cruwp, 12-11-2010 16:30:31 - Répondre

Merci j'essaye tout de suite !

70aa483e76becc8a0f85023429311fe5?s=200&r=pg&d=mm
palmer08, 11-11-2010 17:57:16 - Répondre

C'est quoi le raccourci sous Komodo Edit ?

080ba5b3f9d5fa89d043df851a206968?s=200&r=pg&d=mm
djtec, 10-11-2010 20:32:11 - Répondre

Et quand on fait html>head+body on doit appuyer sur quelle touche pour qu'il génère le code sous coda car y a aucun renseignement nul par sur internet.

Merci

4e672ea1015102ad8bb3651be4edde0f?s=200&r=pg&d=mm
rom07, 11-11-2010 13:45:24 - Répondre

Bonjour,
C'est la touche F1 (ou fn+F1) qui est utilisé pour générer le code il me semble.

080ba5b3f9d5fa89d043df851a206968?s=200&r=pg&d=mm
djtec, 12-11-2010 09:52:25 - Répondre

Merci Romo07 c'est bien fn+f1 pour coda

E847f3b2318b811e1c3b6f221810c0f0?s=200&r=pg&d=mm
JonathanDaSilva, 10-11-2010 17:07:02 - Répondre

super tuto malgré que je savais déjà m'en servir.

Juste un petit point tu fait:
html>head+body

ce que je te conseil c'est de faire:
html:4s(pour du html 4 strict)
html:xs(pour du xhtml strict)

l'avantage c'est que ça tape même le doctype etc :p

D41d8cd98f00b204e9800998ecf8427e?s=200&r=pg&d=mm
Kitsune, 09-11-2010 15:40:36 - Répondre

Tout simplement énorme. Je viens de voir qu'il existe un plugin pour notepad++, je m'en fait le tester de ce pas.

D41d8cd98f00b204e9800998ecf8427e?s=200&r=pg&d=mm
Durban, 09-11-2010 13:31:25 - Répondre

Voila, vous pouvez trouver le plugin au format .nbm ici!
https://github.com/lorenzos/ZenCodingNetBeansPlugin

676467d9f3cfb0b41f53e79433b086bd?s=200&r=pg&d=mm
Kijer, 09-11-2010 19:05:26 - Répondre

Super ! Ca marche nickel, merci !!

5b0243255811e678892c6568e2c31cf4?s=200&r=pg&d=mm
cerise, 09-11-2010 21:12:16 - Répondre

Merci

8657
zvetlania, 21-04-2011 03:16:20 - Répondre

merci pour le lien !

A601c55abf200f99225e425e1e3d2027?s=200&r=pg&d=mm
Lefrein, 09-11-2010 12:52:30 - Répondre

@Kijer et à ceux qui auraient des problèmes d'installation du plugin avec Netbeans : il ne faut pas installer le zip directement depuis la fenêtre de gestion des plug-ins de Netbeans.
En fait je suis sur mac et en double-cliquant sur le zip on obtient un dossier dans lequel il n'y a pas de fichier .nbm ; il faut en fait avoir un gestionnaire d'archives tiers – comme Keka, et de faire un clic-droit sur le zip : "ouvrir avec…" > votre gestionnaire d'archive. Et là il crée un fichier .nbm utilisable par Netbeans.

603468a8e3fdbbd7b06088b9b0b4c4e5?s=200&r=pg&d=mm
Pivot85150, 12-11-2010 19:14:51 - Répondre

Cela ne marche pas chez moi (j'utilise keka)

Fa7f9848e02f649f6bf5d146e2467a50?s=200&r=pg&d=mm
domix24, 09-11-2010 04:05:20 - Répondre

J'adore!
Une raison de plus pour adopter NetBeans!

080ba5b3f9d5fa89d043df851a206968?s=200&r=pg&d=mm
djtec, 08-11-2010 23:57:58 - Répondre

C'est un bon plugin ça mais comment on fait sur coda pour qu'il crée le code car je trouve pas

3076
samas92i, 08-11-2010 19:58:36 - Répondre

Encore google, on le voie partout !

1cd9128e99dba8370fc2698583038f94?s=200&r=pg&d=mm
jb, 11-12-2010 18:51:02 - Répondre

Mouais, enfin par grand chose à voir avec Google mis à part le fait que c'est hebergé sur Google Code...

B1482aca3bd30baa1fa20a35d9edf19d?s=200&r=pg&d=mm
Tef, 08-11-2010 19:40:02 - Répondre

Merci à toi mais dommage qu'il n'y ai pas Komodo Edit :'(
Bonne découverte merci :)

B1482aca3bd30baa1fa20a35d9edf19d?s=200&r=pg&d=mm
Tef, 08-11-2010 20:26:01 - Répondre

Yeeeees !! Pour les amoureux de Komodo : http://community.activestate.com/xpi/zen-coding

Ca peut servir ^^

676467d9f3cfb0b41f53e79433b086bd?s=200&r=pg&d=mm
Kijer, 08-11-2010 19:30:49 - Répondre

Merci pour cette découverte, cependant pour le cas de Netbeans, comment on l'installe ? :)

Merci

D41d8cd98f00b204e9800998ecf8427e?s=200&r=pg&d=mm
durban, 08-11-2010 22:32:00 - Répondre

Pour l'installer, tu va dans options, ensuite tout en as de la fenêtre, tu as un bouton import, il ne te reste plus qu'a indiquer le zip précédemment télécharger ;)

676467d9f3cfb0b41f53e79433b086bd?s=200&r=pg&d=mm
Kijer, 08-11-2010 22:52:24 - Répondre

Merci, cependant, pas de trace d'installation par la suite...
Comment on obtient le "Z" ?

D41d8cd98f00b204e9800998ecf8427e?s=200&r=pg&d=mm
iFabe, 08-11-2010 23:46:00 - Répondre

... L'install suit la meme route chez moi

F762b5094554f774db2b0f5ea6f4ce95?s=200&r=pg&d=mm
stef, 27-12-2010 19:31:10 - Répondre

Vous avez trouver pour le Z?

D29875a6ed81197ea1cd75d1e1a17101?s=200&r=pg&d=mm
GTA 5, 08-11-2010 17:30:24 - Répondre

Super tuto sur le ZenCoding, je l'utilise depuis peu et c'est tout simplement génial !

394
Badbart, 08-11-2010 13:52:34 - Répondre

La liste des plugins pour les divers éditeur de texte (notepad++, dreamwaver, coda, netbean, etc) :

http://code.google.com/p/zen-coding/downloads/list

06de0431bf44e6688465950447ca5ef1?s=200&r=pg&d=mm
Identitools, 08-11-2010 13:13:25 - Répondre

J'utilise déjà depuis quelques mois, c'est IN-DIS-PEN-SABLE ce truc ! :D

06de0431bf44e6688465950447ca5ef1?s=200&r=pg&d=mm
Identitools, 08-11-2010 13:39:03 - Répondre

PS : dans le cas ou zen coding ne fonctionnerai pas sur un éditeur particulier il reste "Texter" :
Le système est à peu près le même et fonctionne partout ou l'on peux taper du texte donc les navigateurs inclus :)
http://lifehacker.com/238306/lifehacker-code-texter-windows

Seul bémol, il faut bidouiller soi même ses "raccourcis".

D41d8cd98f00b204e9800998ecf8427e?s=200&r=pg&d=mm
Shadok, 08-11-2010 13:00:57 - Répondre

Malin !

9b2db445d85458a392bc943e53a85852?s=200&r=pg&d=mm
mtrima, 08-11-2010 10:50:45 - Répondre

juste ce qu'il me fallait :D