Test complet de l'éditeur WebExpert 6.50 de Visicom

| Pierre-Baptiste Naigeon | BWP-Necromance |

Dans le commerce il existe beaucoup d'éditeurs pour les langages Web - que ce soit gratuits ou payants - comme Dreamweaver, WebEditor, WebExpert ou nvu. Mais la plupart ne sont pas vraiment simples à utiliser ou mal adaptés pour l'utilisation des utilisateurs. Parmi cette liste, un éditeur sort du lot. Cet éditeur est WebExpert de la firme Visicom.

Nous allons voir en détail ce que vaut exactement cet éditeur par rapport à divers critères : Ergonomie, norme du codage, test complet des langages intégrés... Puis nous verrons une petite présentation pour réaliser un projet complet d'une petite application HTML/PHP + CSS avec cet éditeur. Comme cela, nous verrons en détail les fonctions intéressantes et utiles toute au long du test.

- Titre : Test complet de l'éditeur WebExpert 6.50 de Visicom

- Auteurs : Pierre-Baptiste Naigeon, BWP-Necromance

- Parution : 4 octobre 2006

- Licence : Copyright ® 2006 Developpez LLC. Tous droits réservés Developpez LLC. Aucune reproduction, même partielle, ne peut être faite de ce site et de l'ensemble de son contenu : textes, documents et images sans l'autorisation expresse de Developpez LLC. Sinon vous encourez selon la loi jusqu'à trois ans de prison et jusqu'à 300 000 € de dommages et intérêts.

Sommaire

- I. Présentation du logiciel

- I-A. Introduction

- I-B. Langage de programmation

- I-C. Description du support

- I-C-1. Version boite commerciale

- I-C-2. Version téléchargement

- I-D. Téléchargement d'une version d'essai

- I-E. Installation et licence d'utilisation

- I-F. L'interface de développement

- I-F-1. Présentation de l'inspecteur de code

- I-F-2. Les barres d'outils

- I-F-3. Les outils intéressants

- II. Réalisation d'un "micro-projet" pour tester l'application

- II-A. Création d'un nouveau projet

- II-B. Création du fichier CSS, et ajout au projet

- II-C. Création du code de l'application (PHP + HTML)

- III. Avis final de l'application

- Avis de BWP-Necromance

- Avis de Pierre-Baptiste Naigeon

I - Présentation du logiciel

I-A - Introduction

Aujourd'hui, le développement de pages Internet se fait assez facilement via différents éditeurs spécialisés dans ce domaine. Mais il en existe une centaine sur le marché qu'ils soient gratuits ou payants. Parmi ces éditeurs, un seul se démarque, et c'est WebExpert de visicom. Cet éditeur est très connu et dispose de nombreuses récompenses, et également très utilisé dans le monde professionnel et universitaire.

Mais en quoi cet éditeur serait-il avantageux par rapport aux autres ? Certes, WebExpert est moins complet que Dreamweaver ou WebEditor, mais il propose d'autres avantages comme un codage beaucoup plus léger et aux normes du w3c, ce qui permet à l'utilisateur de garder un code propre pour la mise à jour future du code. Ceci est bien sûr qu'un exemple, nous en verrons d'autres dans la suite dans cet article.

I-B - Langage de programmation

Comme indiquer plus haut, WebExpert permet de travailler avec plusieurs langages de programmation adaptés à Internet. Parmi ces langages on trouve :

- HTML

- XHTML

- PHP

- ASP

- JavaScript

- CSS

- XML

- WML

- Perl

Vous pourrez choisir de créer les divers formats lors de la création de nouveaux documents comme montre l'image ci-dessous :

La fenêtre du choix du document

Bien sûr, cet article n'étant pas là pour épiloguer sur les langages concernés, nous n'expliquerons pas en détail le but et le fonctionnement proprement dit. Nous nous contenterons principalement du fonctionnement au niveau de l'éditeur.

D'ailleurs comme vous pouvez le remarquer vous pouvez créer vous-même des templates comme l'indique l'image ci-dessous.

Le bouton Nouveau permet de créer un nouveau template

Le fait de pouvoir créer des templates permet à l'application de proposer des documents adaptés au besoin de l'utilisateur et permet également plus de possibilité dans les futures créations de site.

I-C - Description du support

I-C-1 - Version boite commerciale

La boite commerciale de WebExpert 6

La version boite disponible dans le marché ne contient pas grand-chose. Elle contient le minimum pour installer le logiciel dans une version antérieure (la version 6.0.x). En effet, dans la boîte on ne trouve que le CD d'installation et une simple feuille cartonnée pour la licence. Par contre, un manuel (disponible sur le CD sur le format PDF) format papier aurait été le bienvenue.

De plus, vu que l'application est ancienne, cela force l'utilisateur à télécharger la dernière version sur le net pour avoir le logiciel à jour. À noter quand même que le CD fourni des applications limité gratuites, ainsi que les démos des diverses applications de visicom.

I-C-2 - Version téléchargement

La version téléchargement est sans doute la meilleure solution car vous avez directement la dernière version de l'application. Sinon, a part cela, pas de grand changement de la version boite. L'envoi de la licence ce fait par E-Mail.

I-D - Téléchargement d'une version d'essai

Bien sûr la meilleure façon de voir un logiciel est sans aucun doute de le tester par vous-même. Visicom vous propose de le tester pendant une période de 30 jours avec la plupart des fonctions de la version commerciale. Naturellement, la version démo ne remplace pas la version commerciale pour son utilisation.

Cette démo est disponible à l'adresse suivante :

- http://software.visicommedia.com/fr/products/webexpert/

I-E - Installation et licence d'utilisation

L'installation se passe très simplement. En fait quand vous lancez l'installeur vous installez la démo du logiciel de 30 jours. Pendant l'installation le logiciel vous propose une petite application - que vous pouvez refuser - nommée VMN Toolbar. Cet outil est une barre qui se greffe sur le navigateur Internet Explorer et qui prend un peu le rôle de la google bar. Bien sûr, elle n'est pas obligatoire à l'installation.

Adresse de la VMN toolbar pour plus d'info: http://toolbar.vmn.net/fr/index.php

Une fois installé, il ne vous restera qu'à rentrer la licence directement dans le logiciel pour avoir la version finale du logiciel.

I-F - L'interface de développement

I-F-1 - Présentation de l'inspecteur de code

L'interface de travail est la plus importante partie pour bien travailler. L'interface de WebExpert est bien pensée mais voyons un peu de plus près cette interface.

L'interface princiale de WebExpert

Nous allons voir en détail chaque partie de l'interface. Commençons par la zone de saisie :

La zone de saisie

En premier que voit-on ? On voit une zone de saisie avec du code en couleur qui, entre parenthèses est réglable dans les options, mais les couleurs par défaut sont assez bien choisies pour être agréable à l'utilisateur. Ensuite, viennent les options de la zone de texte, celles-ci ajoutent la possibilité pour l'utilisateur d'afficher des aides comme la marge à droite, les numéros de ligne, les conseils en cours de frappe ou tout simplement la complétion du code.

WebExpert vous permet aussi de visualiser votre travail directement dans l'IDE avec l'interpréteur PHP, ce qui offre l'avantage de vérifier directement le boulot sans lancer un navigateur.

Passons maintenant à l'inspecteur de code :

Les trois onglets de l'inspecteur de code

Le premier onglet représente les propriétés de la ligne HTML sélectionnée. Comme le montre l'image ci-dessus sur le schéma complètement a gauche, il affiche un tableau avec les valeurs qui sont possible pour la ligne HTML en cours.

Exemple d'utilisation des propriétés

Voyons maintenant la gestion des événements...

Les événements sont utilisés pour permettre au code HTML l'exécution d'un script JS, VBScript, etc. Utile si par exemple vous faites un formulaire sur votre site. Voyons en détail ces évènements :

Exemple d'utilisation des évenements

Donc comme vous pouvez le remarquer, le principe est le même que pour les propriétés. Sur le screen ci-dessus, on exécute la fonction showWelcomeMessage() dans l'événement onload de la ligne body. Bien sûr, ce n'est qu'un simple exemple.

Voyons maintenant le troisième onglet, l'onglet style :

Exemple d'utilisation des styles

Cet onglet est comme l'onglet propriété, il permet de modifier les options du HTML sauf que, ici il insère directement du CSS dans le code HTML. Cela peut rendre les pages créés de meilleure qualité bien qu'il soit préférable de le mettre dans un fichier .css séparé.

I-F-2 - Les barres d'outils

WebExpert comporte également des barres d'outils qui permettent de faciliter le codage à l'utilisateur, voyons en détail chaque barre.

La barre d'outil

La barre "Communs" regroupe toutes les commandes de base liées au texte comme le format du texte, l'alignement, la couleur, etc. Pour pouvoir utiliser, il vous suffira de cliquer sur l'outil voulu et cela jouera directement sur la source de votre code. Bien sûr, vous pouvez utiliser les autres barres d'outils disponibles.

- La barre "Images" concerne la gestion complète des images sur vos pages internet.

- La barre "Spécialisés" contient les outils pour pour les animations flash, les sript php/asp, les applets java...

- La barre "Tableaux, cadres et listes", comme son nom l'indique prend en compte les tableaux, les cadres et les listes.

- La barre "Formulaires" permet de créer un formulaire sur votre page.

- La barre "CSS" permet de gérer un fichier externe CSS.

- La barre "Scripts" propose des script tout prêt pour l'utilisation.

I-F-3 - Les outils intéressants

WebExpert propose également des outils pour permettre d'avantager le code produit. Parmi ces outils, on retrouve un vérificateur de documents, qui vous indiquera si votre code HTML, JS, PHP... comporte des erreurs, une gestion complète de projet intéressante pour l'utilisateur, un outil de vérificateur de liens qui vérifie les liens morts... Tous ces outils sont fonctionnels et apportent un grand plus à cet éditeur.

II - Réalisation d'un "micro-projet" pour tester l'application

Afin de tester WebExpert, nous allons réaliser un petit projet : nous allons construire une liste des tâches à faire en HTML/PHP/CSS.
Commencençons par définir les différents besoins de notre projet :

- Une page d'affichage des différentes tâches (PHP)

- Un formulaire d'ajout de tâche (HTML)

- Une page de traitement de ce formulaire (PHP)

- Une page de suppression de tâche (PHP)

- Une feuille de style qui s'appliquera à l'ensemble des pages précédentes (CSS)

Il ne nous reste plus qu'à nous lancer dans la réalisation proprement dite.

II-A - Création d'un nouveau projet

Le code ne sera pas détaillé, tel n'est pas le but de cet article.

Rien de plus simple que de créer un nouveau projet : Cliquez sur le menu "Projet", puis sur "Nouveau projet".
Un nouveau projet est alors créé, sans nom, et non sauvegardé pour le moment. Enregistrons-le donc immédiatement !
Cliquez sur le menu "Projet", puis sur "Sauvegarder projet sous". Créez un répertoire TODO dans l'arborescence de votre serveur web, puis nommez le projet todo et sauvegardez.
Il vous sera alors demandé quels sont les fichiers que vous souhaitez ajouter au projet. Comme nous partons de zéro, contentez-vous de cliquer sur OK.
Nous avons maintenant un début de projet, bien que vide, et nous allons nous empresser de le remplir.

II-B - Création du fichier CSS, et ajout au projet

Nous allons commencer par créer notre feuille de style. Cliquez sur le menu "Fichier", puis "Nouveau", et sélectionnez "Document CSS".
Il ne nous reste plus qu'à la remplir :

body {background-color:#FFFFFF;}

a img {
border: 0;
}

a:link, a:visited {
color:#666666;  text-decoration:none;
}

a:hover, a:active {
text-decoration:underline overline;
}

input, select, textarea {
font-family: "Comic Sans MS", Arial, Geneva, Helvetica, sans-serif;
background-color:#DDDDDD;
color:#000000;
font-size: 12px;
margin-bottom:5px;
}

/* Fin de la section de style généré par WebExpert le 04/10/2006 10:48:33 */

Pour le créer, je me suis fait aider par l'assistant CSS (j'ai légèrement retouché la présentation du CSS, par habitude).
Pour l'utiliser, cliquez sur l'onglet "CSS", puis sur la première icone : "Editer le document : style". Il ne reste plus qu'à cliquer sur "Style", puis "nouveau".
Les différentes propriétés pour les différentes balises sont listées, avec la compatibilité dans les différents navigateurs.
Un très bon outil pour commencer ou pour servir d'aide mémoire.

Sauvegardons maintenant notre fichier (style.css au hasard).
Il ne reste plus qu'à l'ajouter au projet : un clic-droit sur l'onglet de notre fichier, puis sélectionnez "Ajouter au projet : style.css". Pensez également à sauvegarder le projet. Désormais, lorsque vous ouvrirez le projet, la feuille de style en fera partie et vous sera proposée.

Petit regret à ce stade : le fichier projet stocke le chemin absolu des fichiers. Difficile donc d'envoyer un zip du projet à un ami, à moins qu'il n'ait exactement la même arborescence que vous (ou qu'il recrée un projet à partir des différents fichiers).
Cependant, il existe une fonctionnalité d'export ("projet" -> "Archiver dans une copie de sauvegarde...") qui crée un zip en incluant l'arborescence complète du projet.

II-C - Création du code de l'application (PHP + HTML)

Un premier constat s'impose immédiatement : il n'y a pas d'interface WYSIWYG (What You See Is What You Get). Il faut donc avoir une connaissance préalable du HTML pour réussir à placer et gérer ses différents éléments, un débutant complet risque fort d'être perdu.
Nous supposerons donc que vous avez déja des notions de HTML et de PHP.

Les tâches à effectuer seront simplement stoquées dans un fichier texte, une ligne = une tâche, chaque tâche ajoutée le sera en début de fichier.
Commençons par créer notre page d'affichage : affichage.php

affichage.php

<?php /* Date de création: 04/10/2006 */ ?>
<html>
<body>
<?php
$fichier = file ('a_faire.txt');
// Si le fichier n'est pas vide
if (count($fichier) != 0) {
echo '<table class="tableau" border="1">';
echo '<tr>';
echo '<th>Note :</th>';
echo '<th>Supprimer :</th>';
echo '</tr>';
$i = 0;
foreach ($fichier as $ligne) {
echo '<tr>';
echo '<td>';
echo $ligne;
echo '</td>';
echo '<td>';
echo '<a href="supprimer.php?ligne='.$i.'">Supprimer</a>';
echo '</td>';
echo '</tr>';
$i++;
}
echo '</table>';
} else {
echo '<p class="alerte">aucune note actuellement</p>';
}
?>
<a href="ajout.html">Ajouter une note</a>
</body>
</html>

Là encore, plusieurs points sont à noter : les suggestions faites par le logiciel sont tout bonnement inutiles et envahissantes, l'autocomplétion n'aligne pas les accolades, et le fait de pouvoir se positionner à n'importe quel endroit d'une ligne vide est très génant (l'identation du code s'en ressent facilement).

Passons maintenant au formulaire d'insertion des données. Cette fois-ci, créons un fichier HTML (ajout.html).

ajout.html

<html>
<!-- Date de création: 04/10/2006 -->
<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Ajout d'une note</title>
<meta name="description" content="">
<meta name="keywords" content="">
<meta name="author" content="Usager non enregistré">
<meta name="generator" content="WebExpert 6"><br/>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="main">
<form action="traitement_ajout.php" method="post">
<label>Saisissez ici votre note :
<input type="text" name="note" size="50">
</label>
<input type="submit" value="Ajouter">
</form>
</div>
</body>
</html>

Première surprise, les entêtes générées pour un fichier PHP et pour un fichier HTML ne sont pas les mêmes... En quoi un fichier PHP ne devrait-il pas avoir de balises META ou TITLE, alors qu'il occupe exactement la même fonction ?
Autre point génant, l'autocomplétion ne gère pas la fermeture des balises à la saisie de '</', suivant le principe du 'dernière balise ouverte, première fermée'.

Voici maintenant les autres pages de l'application :

traitement_ajout.php

<?php
if (isset($_POST['note'])) {
$note = $_POST['note'];
if (trim($note) == '') {
header('Location: ajout.html');
}
$contenu_fichier = file ('a_faire.txt');
// Ajoute la note en premier dans le tableau
array_unshift($contenu_fichier, $note."\r\n");
file_put_contents('a_faire.txt', $contenu_fichier);
header('Location: affichage.php');
} else {

echo '<p class="alerte">Pas de note à ajouter !</p>';
}

?>

supprimer.php

<?php
if (isset($_GET['ligne'])) {
$ligne = intval($_GET['ligne']);
$contenu_fichier = file ('a_faire.txt');
array_splice($contenu_fichier, $ligne, 1);
file_put_contents('a_faire.txt', $contenu_fichier);
header('Location: affichage.php');
} else {
echo '<p class="alerte">impossible de supprimer</p>';
echo '<p><a href="affichage.php">Retour à l accueil</a></p>';
}
?>

Ici, les entêtes HTML ont volontairement été supprimées afin de permettre à la fonction header() de PHP de fonctionner.

Cela dit, tout n'est pas noir dans le monde de WebExpert. Voici les points qui ont retenus mon attention, mais qui ne nous ont pas servis dans ce projet :

- Liste des différentes commandes Javascript possibles

- Liste des balises HTML existantes avec leur compatibilité

- Scripts pré-construits (survol d'image, menus, ...)

III - Avis final de l'application

Avis de BWP-Necromance

Bon alors que dire de cet éditeur... Certes il a pas mal de défauts qui peuvent dérouter un utilisateur qui cherche la perfection. Mais bon, la plupart des défauts sont des défauts mineurs et souvent vite réparés par le moyen des mises à jour. L'application propose plein d'outils et de services pour la rendre agréable à l'utilisation et fournir un travail plus que convenable, même s'il manque une partie wysiwyg - qui n'est pas nécessaire pour l'éditeur.

Donc, au final nous avons un éditeur assez simple d'utilisation avec quelques défauts, mais qui reste tout de même un très bon choix d'éditeur pour le développement Internet.

Avis de Pierre-Baptiste Naigeon

J'ai pris en main cet outil à l'occasion de ce test. Je ne peux pas dire que j'ai été convaincu.
Les petits défauts cités ci-dessus suffisent à gâcher les qualités de ce logiciel, qui propose par ailleurs de très bonnes fonctionnalités (notamment le visionnage direct du PHP qu'il est un des seuls à proposer).

En conclusion donc, un éditeur moyennement satisfaisant en l'état, mais qui ne demande qu'à murir pour devenir un incontournable.