Test complet de l'éditeur WebExpert 6.50 de Visicom

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.

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 :

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 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-1. Version boite commerciale▲

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▲

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/

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-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.

Nous allons voir en détail chaque partie de l'interface. Commençons par 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 :

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.

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 :

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 :

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 "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▲

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.

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.

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

<?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).

<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 :

<?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>';
	 }

?>

<?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, ...)

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.

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.