Comment fonctionne KompoZer -ex NVU (FAQ)

Le premier forum francophone sur l'éditeur de pages Web multiplateforme (Linux, Mac OS X, Windows) qui monte… KompoZer, héritier de Nvu, permet de créer vos pages Web graphiquement (wysiwyg) sans aucune connaissance du langage HTML.

Modérateurs : chinon37, Kazé, Ymai, bobo

Répondre
Avatar de l’utilisateur
Flore
Administratrice
Messages : 3555
Inscription : 19 nov. 2003, 23:04
Localisation : Lyon

Comment fonctionne KompoZer -ex NVU (FAQ)

Message par Flore » 13 juin 2005, 10:33

Article n°1 : Nvu n'est pas un éditeur de code HTML
Article n°2 : Nvu fait son propre code HTML ou XHTML à partir du DOM (Document Object Model) de votre document.
Corollaire n°1 à l'article n°2 : Nvu ne fait pas de php
Corollaire n°2 à l'article n°2 : ni d'asp
Corollaire n°3 à l'article n°2 : Nvu ajoutera toujours les en-têtes HTML
Corollaire n°4 à l'article n°2 : Nvu ne respecte aucune indentation de code, même artistique. Et il n'y a pas de case à cocher. Et ce n'est pas possible même dans une prochaine version.
Article n°3 : Nvu est un produit Gecko modulable qui accepte des extensions.
Corollaire n°1 à l'article n°3 : Il existe une extension qui permet de refaire une indentation du code, d'éditer les pages avec différents éditeurs externes : HandCoder faite par Kazé
______________________

Comment fonctionne Nvu, plus en détail :
L'utilisateur dispose son texte, ses images, ses tableaux et derrière Nvu écrit le code. C'est son mode de fonctionnement normal. Quand on ouvre un fichier existant avec Nvu : Nvu l'interprète pour l'afficher en wysiwyg et met tout votre code à la poubelle. Quand vous regardez à nouveau l'onglet source, vous voyez le code que Nvu vient de réécrire à la volée d'après le DOM de votre document.
D'où forcément :
  • Une interprétation parfois mauvaise des éléments non HTML (php inclus, javascript et de code exotique)
  • Une perte totale, définitive et irréversible de la magnifique indentation de votre code que vous aviez passé 4 heures à faire.
  • Une impossibilité définitive de conserver la "mise en forme" de votre code, puisque tout a été jeté par la fenêtre, même en cochant une case.
  • Une impossibilité de changer le doctype à la main.
Nvu travaille non pas sur le code, mais sur le DOM (Document Object Model), il ne fait pas le chemin code :arrow: aperçu mais très exactement l'inverse : aperçu :arrow: code.

La question n'est pas "Fais voir ce qu'affichera mon code (ça c'est un navigateur qui doit le faire)" mais "Fais voir le code que tu as fait pour rendre mon projet". Ce qui n'est pas du tout la même chose...

Nvu est fait pour que l'utilisateur "dessine" sa page web et ne rentre pas dans le code. Par exemple, pour mettre un morceau de code php dans Nvu, vous ne devriez pas triturer le source, mais faire insérer :arrow: code php ; comme ça Nvu le met comme il faut, où il faut et il n'y aura jamais de problèmes plus tard.

Et si, moi, j'aime mon code comme ça ? Et que je ne veux pas que Nvu y touche :
Alors il faut utiliser un éditeur de code HTML avec coloration syntaxique. Et pas Nvu.

Et si je veux éditer des pages php :
Il faut utiliser un éditeur php.

Y'a-t-il moyen de mettre du php dans ma page avec Nvu :
Oui, avec la fonction "insertion :arrow: code php"

Toute contribution à ce post-it est bienvenue. Kaze, si tu veux bien réécrire un petit paragraphe plus généraliste sur NSMContext, j'ai un peu de mal ;)

Message envoyé avec : Mozilla/5.0 (X11; U; Linux i686; en-US; rv:1.8.1.12) Gecko/20080207 Ubuntu/7.10 (gutsy) Firefox/2.0.0.12
Dernière édition par Flore le 21 juin 2005, 12:54, édité 1 fois.
Flore
iMac - Mac OSX + Nightly / Laptop Linux Mint + Nightly / Z3C FirefoxOS

Avatar de l’utilisateur
chinon37
Animal mythique
Messages : 5307
Inscription : 21 mars 2005, 10:17
Localisation : Touraine, entre Loire et Vienne
Contact :

Message par chinon37 » 13 juin 2005, 14:12

Kaze est en vacances, le veinard!
Préferez Kompozer 0.8 à Nvu
Défendons nos valeurs, adhérons à l'APRIL
La Démocratie, c'est quand on frappe à votre porte à 6h00 du matin, et que c'est le laitier.

hibou57

Message par hibou57 » 13 juin 2005, 16:28

Flore, c'est une trés bonne introduction au fonctionnement de Nvu que tu nous offre là! Mais d'où tiens tu ces informations ? Tu as participé au developpement ?

Avatar de l’utilisateur
Flore
Administratrice
Messages : 3555
Inscription : 19 nov. 2003, 23:04
Localisation : Lyon

Message par Flore » 13 juin 2005, 16:58

Non, je ne participe pas au développement (pour information : je suis biologiste). Mais je suis le développement de Nvu depuis le début, et je tiens ces renseignements de plusieurs conférences de Daniel Glazman (une au FOSDEM 2004 et une à Lyon en 2004), et des compléments d'explications fournis par Bobo (chef du projet localisation de Nvu et accessoirement mon copain). Et j'essaie de les mettre en forme pour expliquer simplement comment fonctionne Nvu.
Flore
iMac - Mac OSX + Nightly / Laptop Linux Mint + Nightly / Z3C FirefoxOS

Mercurius
Salamandre
Messages : 45
Inscription : 28 mars 2005, 00:10
Localisation : Nord de France

Message par Mercurius » 13 juin 2005, 21:42

Un article très clair.
Après beaucoup de recherche sur ce forum je retrouve ici un concentré. "Flore nous fait une fleur"

En attendant le retours de Kaze. il propose Nvu 1.0 pré-installer avec son extension (a testé absolument) voir la rubrique "message d'erreur".

.Voici une copie de la version de Kaze développement. Sont inclus :
* Nvu 1.0PR(fr) "Portable" + dictionnaire Français
* SciTE 1.61(fr) + quelques APIs
* NsmConText 0.2.1-dev(fr)
* htmlTidy

Téléchargement :
http://fabiwan.kenobi.free.fr/Nvu/zip/P ... 0PR-fr.zip
Ubuntu

Avatar de l’utilisateur
Kazé
Varan
Messages : 1743
Inscription : 10 févr. 2005, 10:26
Localisation : Grenoble
Contact :

Message par Kazé » 21 juin 2005, 11:54

Ca c'est du post-it 8-)

NsmConText est une extension basée sur Launchy, destinée à lancer des éditeurs externes depuis Nvu. Je l'utilisais pour lancer Tidy et un éditeur texte sur mes fichiers HTML et PHP, mais elle n'est pas pratique sur une page en cours d'édition.

Depuis, j'ai développé HandCoder : en un clic (ou F6) on ouvre la page courante, avec un code HTML proprement indenté, dans l'éditeur texte de son choix ; et si la page est modifiée dans l'éditeur externe, HandCoder la recharge automatiquement dans Nvu. La version 0.3.2 apporte un meilleur support pour le PHP.

Téléchargement : http://fabiwan.kenobi.free.fr/xpi/?id=H ... r=0.3.2-fr

Concernant le reformattage du code HTML :
  • On ne peut pas empêcher Nvu de reformatter le code, mais il est possible d'utiliser des éditeurs externes et des filtres comme Tidy, pour modifier et reformatter proprement le code produit par Nvu.

    Il est nécessaire de télécharger un exécutable de Tidy (disponible pour Windaube, MacOS X, Linux et la plupart des systèmes). Il y a toute une foultitude d'options pour paramétrer la remise en forme du code HTML ; en tout état de cause, Tidy reformatte bien mieux le code que ce qu'on pourrait faire "à la main".

    Nota :
    • le code HTML reformatté par Tidy est "propre" dans un éditeur texte (indentation, retours à la ligne, etc.), mais l'indentation n'apparaît pas lorsqu'on passe en affichage "source" ;
    • pour l'instant, HandCoder est incapable de lancer Tidy sur un Mac.
Concernant les fichiers ASP/JSP/PHP :
  • Avec HandCoder, il est possible d'éditer sans les corrompre la plupart des fichiers PHP avec Nvu, y compris des fragments HTML (= documents sans DOCTYPE ni balises <html>, <head>, <body>) ou des documents incluant un prologue PHP :

    Code : Tout sélectionner

    <?php [... code PHP ...] ?>
    <!DOCTYPE ... >
    <html> [... page HTML ...] </html>
    Le support ASP/JSP a été désactivé dans HandCoder 0.3.2, faute de beta-testeurs.
    Nota :
    • quelque soit l'éditeur, si le code PHP devient complexe, il est fortement déconseillé de mélanger du code HTML et PHP dans une même page, car c'est vite très difficile à maintenir : l'utilisation de moteurs de templates tels que Smarty (le top du top) ou FastTemplates (très simple), pour séparer le code PHP de la présentation HTML, est très largement préférable.
    • attention ! Par défaut, Nvu reformatte systématiquement le contenu des attributs HTML ; depuis la version 1.0 de Nvu, il y a une préférence avancée pour ne plus reformatter les attributs.
Autres ressources sur HandCoder :
  • la page GeckoZone, qui contient la dernière version "stable" (0.3.2) et une présentation succinte (en français) des fonctionnalités ;
  • la page MozDev, qui est l'équivalent anglo-saxon ;
  • mon site web, plus complet, mais qui est rarement à jour (français + anglais).
Les suggestions, critiques et rapports de bugs sont bienvenus dans ce sujet : http://geckozone.org/forum/viewtopic.php?t=30551

[mis à jour le 13/07/2005, pour NsmConText 0.2.1]
[mis à jour le 16/09/2005, pour NsmConText 0.2.5]
[mis à jour le 01/12/2005, pour HandCoder 0.3.0]
[mis à jour le 27/03/2006, pour HandCoder 0.3.2]
Dernière édition par Kazé le 27 mars 2006, 16:41, édité 39 fois.
KompoZer lead dev
Ubuntu 10.04 Lucid Lynx — « L'erreur est humaine, mais vraiment foutre la merde nécessite le mot de passe root. »

Do-IT

start session en php

Message par Do-IT » 02 juil. 2005, 23:39

on peut plus faire un start session en php au debut du fichier ?
ou du controle d'authentification ?

2/ Le code PHP doit être inclus dans le code HTML

Il ne faut donc pas ouvrir avec Nvu une page du type :
Code:
<?php [... code PHP ...] ?>
<html> [... page HTML ...] </html>

Nvu ne peut pas éditer une telle page sans la "pourrir"

Avatar de l’utilisateur
Kazé
Varan
Messages : 1743
Inscription : 10 févr. 2005, 10:26
Localisation : Grenoble
Contact :

Re: start session en php

Message par Kazé » 04 juil. 2005, 10:20

Do-IT a écrit :on peut plus faire un start session en php au debut du fichier ?
ou du controle d'authentification ?
Pas avec Nvu :( mais j'y travaille en ce moment...
Mise à Jour : avec la version 0.2.5 de NsmConText, c'est désormais possible :wink:
Aboumael a écrit :j'essaie de passer de Dreamweaver à Nvu. J'ai pas mal de scripts PHP. Lorsque j'affiche un script tous les retours à la ligne dans le code sont supprimés entre les balises <?php et ? >, ce qui le rend peu lisible. Pourtant j'ai activé l'option de conservation du format source d'origine.
Effectivement :(
Personnellement j'utilise des fichiers externes partout où c'est possible, genre :

Code : Tout sélectionner

<?php include("script.php") ?>
ce qui limite considérablement le problème. Il n'est jamais pratique de mélanger le code PHP et HTML...
Ceci dit, je pense qu'en intégrant aStyle dans NsmConText on devrait pouvoir résoudre le problème... probablement dans la prochaine version (0.3.0).

Pour toutes les suggestions concernant le support PHP dans Nvu, merci de poster dans le sujet consacré : http://geckozone.org/forum/viewtopic.ph ... 684#169684
Dernière édition par Kazé le 29 août 2005, 23:24, édité 4 fois.
KompoZer lead dev
Ubuntu 10.04 Lucid Lynx — « L'erreur est humaine, mais vraiment foutre la merde nécessite le mot de passe root. »

jean-marc/fun sun

comment fonctionne nvu

Message par jean-marc/fun sun » 09 juil. 2005, 11:41

Bonjour flore,

Merci pour ces infos sur le fonctionnement du programme. A retenir. Cependant
Quand on ouvre un fichier existant avec Nvu : Nvu l'interprète pour l'afficher en wysiwyg et met tout votre code à la poubelle. Quand vous regardez à nouveau l'onglet source, vous voyez le code que Nvu vient de réécrire à la volée d'après le DOM de votre document.
Une impossibilité définitive de conserver la "mise en forme" de votre code, puisque tout a été jeté par la fenêtre, même en cochant une case.
J'ai l'habitude de naviguer entre éditeur texte et nvu il n'a jamais "réécrit" le code même avec la case cochée des préférences (ne pas modifier le doc original). Cela doit être vrai pour une page qui ne respecte pas la struture DOM sinon il n'y a pas de problèmes de ce côté-là. A moins que Nvu et moi-même ayons le même style d'écriture 8).

Toutefois le plus simple c'est de partir à l'envers. Non pas de l'éditeur de texte vers Nvu mais de Nvu vers l'éditeur de texte. Avec Nvu, création du squelette puis envoi vers éditeur de texte pour le retouches scripts ou autres tout en sachant que le code propre produit ne le sera peut-être plus...

Néanmoins ces explications sont à creuser et à approfondir.

Avatar de l’utilisateur
Kazé
Varan
Messages : 1743
Inscription : 10 févr. 2005, 10:26
Localisation : Grenoble
Contact :

Re: comment fonctionne nvu

Message par Kazé » 11 juil. 2005, 10:15

jean-marc/fun sun a écrit :J'ai l'habitude de naviguer entre éditeur texte et nvu il n'a jamais "réécrit" le code même avec la case cochée des préférences (ne pas modifier le doc original). Cela doit être vrai pour une page qui ne respecte pas la struture DOM sinon il n'y a pas de problèmes de ce côté-là. A moins que Nvu et moi-même ayons le même style d'écriture 8).
Nvu modifie les retours à la ligne, ce qui fait qu'il est impossible de garder un code proprement indenté avec Nvu.
Mais c'est vrai que tant que le code est correct, il ne fait aucune modification significative (i.e. qui dénature le document HTML dans un navigateur web).
jean-marc/fun sun a écrit :Toutefois le plus simple c'est de partir à l'envers. Non pas de l'éditeur de texte vers Nvu mais de Nvu vers l'éditeur de texte. Avec Nvu, création du squelette puis envoi vers éditeur de texte pour le retouches scripts ou autres tout en sachant que le code propre produit ne le sera peut-être plus...
100% d'accord. Mais j'ajouterais que dans tous les cas, les scripts de plus d'une ligne (JavaScript, PHP ou autres) gagnent à être dans des fichiers externes plutôt que dans le document HTML lui-même : ça simplifie le travail, et c'est plus rapide à charger si les scripts sont utilisés par plusieurs pages.

[Mise à Jour]
De plus, les scripts de plus d'une ligne sont rendus quasiment illisibles par Nvu... à cause du reformattage du code source, qui déplace les retours à la ligne et supprime l'indentation.
KompoZer lead dev
Ubuntu 10.04 Lucid Lynx — « L'erreur est humaine, mais vraiment foutre la merde nécessite le mot de passe root. »

Invité

Re: Comment fonctionne Nvu (FAQ)

Message par Invité » 20 juil. 2005, 10:12

Flore a écrit : Quand on ouvre un fichier existant avec Nvu : Nvu l'interprète pour l'afficher en wysiwyg et met tout votre code à la poubelle. Quand vous regardez à nouveau l'onglet source, vous voyez le code que Nvu vient de réécrire à la volée d'après le DOM de votre document.
J'avoue être un peu déroutée, car je ne connais pas la notion de DOM.
Je suis webmestre de plusieurs sites depuis un bon moment, et je ne me suis jamais servie de cela.
Je n'ai jamais rien mis de tel dans mes pages html, il s'agit donc peut-être d'une manière de sparcer le code html ? spécifique à Gecko ?

Merci de m'éclairer sur ce point,
Crapette

Avatar de l’utilisateur
bobo
Iguane
Messages : 764
Inscription : 18 août 2003, 11:04
Localisation : Lyon, France
Contact :

Re: Comment fonctionne Nvu (FAQ)

Message par bobo » 20 juil. 2005, 10:29

Anonymous a écrit :J'avoue être un peu déroutée, car je ne connais pas la notion de DOM.
Je suis webmestre de plusieurs sites depuis un bon moment, et je ne me suis jamais servie de cela.
Je n'ai jamais rien mis de tel dans mes pages html, il s'agit donc peut-être d'une manière de sparcer le code html ? spécifique à Gecko ?
Le DOM, ou modèle objet de document, est une représentation informatique d'un document. Comme tu le vois, cette représentation est standardisée par le W3C, et est accessible par programmation via JavaScript par exemple.
Quand Nvu, Firefox, ou n'importe quel navigateur lit un document HTML, il en fait une représentation informatique pour l'afficher ou le modifier.
Les standards c'est bon, mangez en !
Flore & Sébastien
Unité dans la diversité.

Avatar de l’utilisateur
Flore
Administratrice
Messages : 3555
Inscription : 19 nov. 2003, 23:04
Localisation : Lyon

Message par Flore » 20 juil. 2005, 10:32

A l'instar de M Jourdain, tu es un webmestre qui faisait du DOM sans le savoir :lol: :lol: :lol:
Quand tu centres une image, quand tu fais un paragraphe, quand tu dessines un tableau, tu touches au DOM.
Le DOM (Document Object Model) c'est la structure du document.
En gros il y a 2 choses dans un document (HTML ou autre) : le fond et la forme. Et la forme c'est le DOM.
Contrairement à de nombreux éditeurs HTML, Nvu se base sur le DOM pour écrire son propre code.
Flore
iMac - Mac OSX + Nightly / Laptop Linux Mint + Nightly / Z3C FirefoxOS

crapette

Message par crapette » 20 juil. 2005, 19:01

Flore a écrit :A l'instar de M Jourdain, tu es un webmestre qui faisait du DOM sans le savoir
Tout à fait ; mais maintenant que j'ai lu le W3c sur la question c'est fini. Je suis cette sorte de webmestre doublé d'un développeur qui sait ce qu'est un parser et comment fonctionne une api. Contrairement à Monsieur Jourdain, j'ai appris tous ces trucs dans une école.
Flore a écrit : Le DOM (Document Object Model) c'est la structure du document.
ça me gène, ça. L'idée que je me fais du DOM, c'est que c'est une manière de décrire la structure ET les données, vu que les données sont quelque part dans la structure et pas ailleurs.
Flore a écrit :En gros il y a 2 choses dans un document (HTML ou autre) : le fond et la forme. Et la forme c'est le DOM.
Contrairement à de nombreux éditeurs HTML, Nvu se base sur le DOM pour écrire son propre code.
Zerbi.

Bonne journée,
crapette

Avatar de l’utilisateur
chinon37
Animal mythique
Messages : 5307
Inscription : 21 mars 2005, 10:17
Localisation : Touraine, entre Loire et Vienne
Contact :

Message par chinon37 » 29 nov. 2005, 10:21

Comment paramétrer un site en local ?
Pour une facilité d’utilisation de Nvu et pour utiliser certaines fonctionnalités de l’extension NsmContext , il est intéressant d’utiliser le gestionnaire de sites en local (i.e. pour un site encore sur le disque dur). Afin d’éviter ma mésaventure qui faisait planter la nouvelle extension de Kazé, « Urlcleaner » (transformation des adresses absolues en adresses relatives), je précise ici comment paramétrer Nvu :
  • F9 lance le gestionnaire de sites
  • Clic sur « édition des sites »
  • Donner un nom au site : ex. : site local
  • Adresse http de votre page d’accueil : file:///C:/ « répertoire »/dossier/ (c'est l'adresse sur votre disque dur)
  • Adresse de publication : file:///C:/ « répertoire »/dossier/ (idem)
  • Rien dans identifiant et mot de passe
  • Puis valider par Ok
Attention à ne mettre que des / comme séparateurs dans l’adresse et non des \ comme dans l'adresse de l'explorateur windows!
Dans le gestionnaire de site, apparaît le nom « site local » et un clic sur le petit + fait apparaitre les dossiers et fichiers du site.
Les fichiers html peuvent être ouverts dans Nvu par un double clic.
Si l’extension NsmContext est installée, un clic droit sur un fichier permet d’ouvrir celui-ci avec un programme externe (ex : une image pourra être ouverte directement dans « the Gimp » ou « photoshop »). Un double clic sur ce fichier l'ouvrira dans le programme défini par défaut.
Préferez Kompozer 0.8 à Nvu
Défendons nos valeurs, adhérons à l'APRIL
La Démocratie, c'est quand on frappe à votre porte à 6h00 du matin, et que c'est le laitier.

Répondre

Qui est en ligne ?

Utilisateurs parcourant ce forum : Aucun utilisateur inscrit et 3 invités