Comment est-ce que vous procédez pour vos intégrations HTML/CSS ?

Bonjour,

Je travaille avec différents CMS (wordpress etc...). Ces outils génèrent du code avec des class et ID qui leur sont propres. C'est pour ça que j'ai pris l'habitude de développer directement sur le CMS. Je ne passe pas par un ficher HTML puis déclinaison dans le CMS. De toute façon, faire un premier fichier HTML ne servirait que dans une nouvelle intégration, pas dans la modification sur un site en prod (ce que je fais assez souvent...).

J'ai donc pris l'habitude d'ouvrir firebug, de passer dans l'onglet CSS, d'activer l'édition libre (bouton "Editer"), de taper mon code puis de faire un CTRL+A, CTRL+C, d'aller dans mon éditeur de texte (Notepad++ où se trouve mon fichier ouvert depuis le serveur avec filezilla), je fais un CTRL+A puis CTRL+V et j'enregistre puis j'envoie sur le serveur.

C'est efficace, (je vois en direct ce que je fais) mais je trouve ça un peu barbare et ce n'est pas très aisé à l'utilisation. D'où ma question : comment est-ce que vous procédez pour vos intégrations HTML/CSS ? J'aimerai garder le bénéfice de pouvoir voir directement les changements que je fais (c'est vraiment utile pour caler des blocs) mais avec une technique plus simple et moins barbare.

J'ai testé l'extension firefile pour firebug, ça n'a pas encore l'air très abouti : on ne peut pas enregistrer les modifications sur le serveur quand on est en édition libre ou que l'on détache la fenêtre de firebug de celle de firefox (personnellement, je fais toujours ça quand j'intègre, on est plus à l'aise).

Merci d'avance pour vos lumières

Hello,

Je procède plutôt manuellement. J'essaie quelques propriétés et valeurs dans Firebug, et quand j'ai ce que je veux je copie-colle les quelques lignes en question dans mon éditeur de code. Et je rafraichis la page (parfois dans un nouvel onglet au cas où) pour vérifier que j'obtiens ce que je veux.

Je ne fais pas spécialement confiance à l'édition CSS de Firebug en dehors des essais et du prototypage. Elle est limitée à ce que le moteur de Firefox comprend, donc des propriétés -webkit-, -o- ou -ms- seront ignorées.

Certains éditeurs ont un mode de prévisualisation, qui se met à jour en permanence, ou à chaque sauvegarde du fichier source. Dans Komodo Edit, tu peux ouvrir un fichier via une connexion FTP (donc directement le fichier sur le serveur, de préférence en ayant fait une sauvegarde d'abord), et ouvrir une vue web (moteur de rendu Gecko) en indiquant un fichier ou une URL. C'est pas la panacée mais ça peut être pratique.
D'autres éditeurs comme Dreamweaver ou Coda peuvent avoir des modes de prévisualisation plus aboutis, mais je les connais mal.
Modifié par fvsch (17 Mar 2011 - 13:17)

Moi, de mon côté, ça dépend du contexte.

S'il s'agit d'une intégration pour un CMS existant (forum, blog), je n'ai pas besoin de passer par l'étape de la page HTML statique car le code HTML et CSS sont déjà écrits et les scripts sont déjà faits, donc je n'ai qu'à faire des modifs. C'est le cas de mon blog, dont je suis partie d'un des thèmes fournis pour faire mon thème personnalisé.

Par contre, s'il s'agit de pages "from scratch", qu'elles utilisent ou non les sessions d'un CMS (ce qui est le cas de mon site), là dans ce cas je préfère passer par des pages HTML statiques afin de monter le design avant de m'occuper du PHP, car justement, tout est à faire et j'ai besoin de visualiser le rendu avant d'attaquer le PHP.

Et s'il s'agit d'une commande de webdesign par quelqu'un qui s'occupe lui-même de la partie PHP ou ASP.NET, je n'ai dans ce cas besoin que de faire une ou des pages HTML statiques pour que la personne puisse partir de ces bases pour travailler.

Dans tous ces cas, je me sers du duo Gedit+Firefox, car j'ai bien souvent besoin des onglets de mon éditeur de texte pour les corrections, et aussi parce que je peux utiliser un fond gris foncé avec textes clairs (je code surtout le soir) et la taille de police que je veux (à cause de ma vision).

fvsch a écrit :
Hello,

Je procède plutôt manuellement. J'essaie quelques propriétés et valeurs dans Firebug, et quand j'ai ce que je veux je copie-colle les quelques lignes en question dans mon éditeur de code. Et je rafraichis la page (parfois dans un nouvel onglet au cas où) pour vérifier que j'obtiens ce que je veux.

En gros je fais pareil !

fvsch a écrit :

Je ne fais pas spécialement confiance à l'édition CSS de Firebug en dehors des essais et du prototypage. Elle est limitée à ce que le moteur de Firefox comprend, donc des propriétés -webkit-, -o- ou -ms- seront ignorées.

C'est pas trop un problème ça !

fvsch a écrit :

Certains éditeurs ont un mode de prévisualisation, qui se met à jour en permanence, ou à chaque sauvegarde du fichier source. Dans Komodo Edit, tu peux ouvrir un fichier via une connexion FTP (donc directement le fichier sur le serveur, de préférence en ayant fait une sauvegarde d'abord), et ouvrir une vue web (moteur de rendu Gecko) en indiquant un fichier ou une URL. C'est pas la panacée mais ça peut être pratique.
D'autres éditeurs comme Dreamweaver ou Coda peuvent avoir des modes de prévisualisation plus aboutis, mais je les connais mal.

Komodo Edit n'affiche les modifications que lorsque tu enregistres le fichier. J'aimerai bien voir les modifications en direct comme c'est le cas avec firebug et pouvoir enregistrer mon CSS comme avec Komodo Edit. Reste plus qu'a trouver le programme mixant les deux ! Merci pour ta réponse en tout cas !

Personne d'autre ne veut partager sa méthode de travail ?

Up ! personne ne veut partager ses petits secrets ? Bon le fait que mon sujet ai été déplacé dans le bar ne m'aide pas beaucoup. Pour moi le fait de demander comment il faut procéder pour travailler correctement c'est une question de newbie et donc à discuter dans la partie débutant et non un sujet de déconne.

Je passe très peu de temps à faire de l'intégration donc pas de recette mystère pour moi. Je code tout dans dreamweaver j'ouvre mon navigateur et actualiser pour voir le résultat.

Pour les cms, je fais l'intégration après le développement donc tout à la fin.