editeur HTML source / live preview

editeur HTML source / live preview - HTML/CSS - Programmation

Marsh Posté le 07-02-2013 à 18:04:24    

Bonjour à tous

 

D'ordinaire, j'utilise notepad ++ pour faire mes fichiers HTML/JS/CSS/PHP mais là j'ai besoin que le rendu visuel soit direct.
Cad le rendu se met à jour à chaque fois que je modifie la source, en temps réel, ou soit quand l'on clique dans la fenêtre latérale de prévisualisation

 

J'ai débuté par utiliser firebug à cet essien, mais :
- Existe t-il des programmes bien rôdés pour le faire ? ( supportant le css quitte à faire )
- Existe t-il de plus un programme qui permettrait de faire le rendu dans une sorte de "browsershots" afin de s'assurer une compactibilité au top, on the fly ?

 

Merci pour vos lumières, suggestions

 

edit : dans l'idée : http://htmledit.squarefree.com/ mais ce serait bien d'avoir un backup du dernier code tapé, au cas où s'il l'on plante son navigateur


Message édité par grosbin le 07-02-2013 à 18:09:05

---------------
Photos Panoramiques Montagnes Haute Savoie
Reply

Marsh Posté le 07-02-2013 à 18:04:24   

Reply

Marsh Posté le 08-02-2013 à 13:07:37    

Dreamweaver le fait plutot bien mais seulement avec css et html, pour du php il faudrait faire tout simplement une fonction avec un textarea et en ajax afficher le résultat à chaque changement

Reply

Marsh Posté le 09-02-2013 à 12:51:13    

justement, un petit module firefox ( qui mémorise ce que l'on tappe, contrairement à firebug ), avec visualisation en temps réel pour se faire serait le top


Message édité par grosbin le 09-02-2013 à 12:52:00

---------------
Photos Panoramiques Montagnes Haute Savoie
Reply

Marsh Posté le 10-02-2013 à 12:07:43    

pourquoi ne pas simplement utilise un outil de reload automatique dans ton navigateur, il existe X-refresh pour ça
http://xrefresh.binaryage.com/


---------------
Blablaté par Harko
Reply

Marsh Posté le 10-02-2013 à 13:22:42    

La finalité, pour moi, serait d'avoir un panneaux source & preview en temps réel pour gagner du temps dans le développement.
Firebug est vraiment l'outil qui s'en rapproche le plus, je suis juste étonné qu'il n'existe pas d'autres variantes ( plus légères, mémorisant les modifs de code ( pratique si l'on plante ou ferme l'un de ses 86 onglets par hazard ) )


---------------
Photos Panoramiques Montagnes Haute Savoie
Reply

Marsh Posté le 10-02-2013 à 14:00:29    

Ben arrête le dev web dans ce cas.
Normalement quand tu codes du HTML, tu poses ton html parce que tu sais ce qu'il représente sémantiquement, ensuite tu vas écrire ta CSS parce que tu vas savoir ce que tu écris va faire.
Une fois ça fait, tu peux ensuite aller vérifier avec un navigateur (firefox) et puis si tu as besoin de caller une valeur, ben avec firebug tu vas aller inspecter le dom et la CSS et modifier les valeurs pour voir celles qui vont bien puis les reporter dans ta CSS.


---------------
Blablaté par Harko
Reply

Marsh Posté le 10-02-2013 à 14:10:58    

tu as raison, maitre nageur est une bien plus belle profession :jap:


Message édité par grosbin le 10-02-2013 à 14:11:17

---------------
Photos Panoramiques Montagnes Haute Savoie
Reply

Marsh Posté le 10-02-2013 à 14:28:17    

Je pensais que dev était ton métier principal en voyant ton site, c'est ce que j'ai déduis :o

Citation :

résumer mes activités : photographe, consultant, bases de données, programmation, production, webdesign


---------------
Blablaté par Harko
Reply

Marsh Posté le 10-02-2013 à 17:27:12    

on a le droit d'avoir envie de changer ?


---------------
Photos Panoramiques Montagnes Haute Savoie
Reply

Marsh Posté le 10-02-2013 à 17:35:37    

Ah mais oui, tout à fait, mais je te donne juste le conseil idéal, je t'ai même donné la condition idéale :o, tu peux aussi utiliser 2 écrans c'est mieux pour du dev web.


---------------
Blablaté par Harko
Reply

Marsh Posté le 10-02-2013 à 17:35:37   

Reply

Marsh Posté le 24-10-2013 à 16:45:43    

Désolé de remonter un peu (beaucoup  :D ) le sujet, j'étais intéressé par sa demande...
 
Gatsu dans le fond, mais j'ai appris quelques language avec Code Academy... Et c'est vrai que la demande Grosbin est vraiment intéréssante... Par pour des fonctions de "bases", mais pour des éléments en javascript vraiment poussé.
 
J'utilise actuellement notepad++ et firebug, mais un autre logiciel commence à prendre un peu d'ampleur : Adobe Edge Code.
Avec ce logiciel l''affichage dans le navigateur est mis à jour en direct avec l’option Live File Preview.
 
http://html.adobe.com/edge/code/
 
Il peut être télécharger gratuitement, à condition d'être inscrit au cloud d'adobe.
 
http://html.adobe.com/_/img/edge/code/edge_code_hero.png
 
ps : Je faisais une recherche sur google, lorsque je suis tombé sur une "dispute"... Donc voilà, certains internautes auront maintenant une vraie réponse !


Message édité par squadz le 24-10-2013 à 16:47:09
Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed