Comment réaliser un Site Internet - Les Etapes
Le site Internet a bien changé. À chaque besoin, son site Internet. Cette segmentation provoque une complexité de plus en plus importante, rendant parfois un site Internet aussi peu contrôlable qu'un projet informatique classique. Et choisir tel ou tel langage, tel ou tel logiciel se résume en un parcours du combattant, donnant une bonne migraine en fin de journée.
Depuis le début du Web, les langages, les outils et les technologies se sont transformés. L'offre est devenue tellement pléthorique qu'il est parfois difficile de choisir. Les nouvelles tendances concernent les langages s'appuyant largement sur XML et l'effacement du HTML. Le Rich Media, revient en force depuis quelque temps, ainsi que le client lourd / riche.
L'autre grande tendance concerne les techniques de développement, avec la séparation des couches présentation (l'interface) et du code fonctionnel, afin d'être plus souple dans les évolutions du site Internet et de fournir un programme web, la plus indépendante possible pour le navigateur.
L'émergence du langage de description répond à cette demande. Un seul code, plusieurs interfaces adaptées à chaque situation, chaque terminal. L'emploi massif de CSS couplé ou non au xHTML répond aussi à ce besoin de rationaliser l'interface, le développement et surtout le code qui devient moins permissif qu'avant. Dans ce dossier, nous avons décidé d'étudier les différentes étapes de la réalisation d'un site Internet, jusqu'à l'hébergement. Nous avons réuni un panel de spécialistes qui, chacun dans leur domaine, vous livrent des pistes, des réflexions, et des idées concrètes pour votre futur site Internet.
Construire un site Internet n'est plus aujourd'hui un exercice réservé aux seuls pros du web. Même sans aucune connaissance en langage HTML, XML, c'est possible en quelques clics. Pour ceux qui veulent faire les choses bien, la situation se complique rapidement Comment choisir la bonne technologie ? Comment définir son site Internet ?
Le site Internet est au centre d'un écosystème très vaste : la conception, l'hébergement, le contenu et sa gestion, la maintenance, l'évolution technique et technologique, la sécurité, etc. Pour un nouveau site Internet, il s'agira tout d'abord de définir très précisément la ou les cibles d'internautes, l'environnement fonctionnel, le plan du site Internet. C'est à partir du fonctionnel (qui doit être le plus précis possible) que vous pourrez définir les techniques, les langages et les outils à utiliser.
Ce choix se fera, souvent, avec différentes contraintes : le coût (licence, développement), l'environnement serveur web déjà installé ou envisagé, la formation des développeurs (langages, outils).
Pour chaque fonction de votre site Internet, vous devez lister les technologies disponibles et les outils. C'est à partir de cette liste, et en la confrontant à vos contraintes de départ, que vous pourrez définir les langages, les technologies et les outils pour réaliser votre site Internet. Ainsi, prenons l'exemple des pages dynamiques :
- je dois réaliser des pages dynamiques sur le site Internet
- j'ai à ma disposition : ASP.NET, JSP, PHP, ColdFusion...
- les outils sont les IDE Web, les outils Open source pour JSP / PHP
- mes contraintes : mon serveur web est en Linux De facto, vous pouvez éliminer les outils Microsoft et ASP.NET. Vous aurez principalement le choix entre JSP et PHP.
Si vous passez par un hébergeur, supporte-t-il les deux technologies ? Connaissez-vous java ? Si vous ne souhaitez pas payer les outils, quels langages possèdent le plus d'outils open source (ayant les fonctions voulues pour le développement) ? Dans ce choix, qui doit être pragmatique avant tout et lié à chaque fonction de votre site Internet, partez du plus général, au plus fin.
N'oubliez pas de choisir la catégorie de programmes web que vous allez faire : un site Internet, un client riche, un client léger, un portail, un intra ou extranet, un rich média, etc. selon la catégorie de l’application les contraintes technologiques et d'outils se modifient !
Les grandes étapes â respecter
1 • Je définis les besoins et les fonctions du site Internet, les objectifs, les cibles et le contenu.
2 • je dessine le plan du site Internet avec l'ensemble des fonctions, des interactions. Je suis le plus précis possible. Je n'oublie pas de préciser l'architecture.
3 • Je choisis les technologies, langages et outils à partir de la définition du site Internet
4 • Je conçois les pages et le code
5 • Je teste le site Internet
6 • Je publie le site Internet.
Que faire d'un site Internet existant ?
Vous souhaitez migrer votre site Internet vers de nouvelles technologies ? L'opération est plus ardue que de créer de zéro. Il faudra tout d'abord recenser les pages du site Internet, les technologies, les outils et les langages utilisés, tout en définissant les nouveaux objectifs du site Internet, avec en correspondance le besoin ou non de changer de technologie. Si vous êtes en ASP.NET, mais que vous souhaitez passer en PHP (ou l'inverse), comment faire ? Faut-il tout réécrire ? Je suis en HTML, mais je veux passer en xHTML comment faire ? Je veux refaire l'interface ? Est-elle dynamique ou statique ? Est-elle couplée au code fonctionnel ? Si je veux utiliser CSS, ai-je les compétences, les outils nécessaires ? Quel impact sur mon code actuel ? Quand on passe, par exemple, d'ASP à ASP.NET, il faut souvent tout réécrire, quand je passe d'ASP à PHP, il existe des convertisseurs, mais la réécriture demeure. Je change de base de données, quels impacts sur mon code, les performances. Je change d'outils web, la migration des pages et du code posent-ils problème ? (Il peut y avoir des différences d'implémentations de standards).
Les outils commerciaux pour développer un site Internet
Macromedia Dreamweaver : considéré comme la référence. Puissant IDE Web pour concevoir des sites Internet statiques, dynamiques, clients légers ou riches. Supporte l'ensemble des langages et des standards actuels. Panoplie fonctionnelle impressionnante. Dédié aussi bien aux créateurs de sites Internet qu'aux développeurs. Bonne intégration avec les autres outils de l'éditeur.
Adobe GoLive : pérennité incertaine suite au rachat de Macromedia. Moins riche que Dreamweaver, GoLive permet de développer des sites Internet complexes, supporte l'ensemble des standards. Bonne intégration avec les autres outils de l'éditeur.
CodeCharge Studio : un IDE RAD Web, idéal pour développer des site Internet dynamiques. Supporte PHP, ASP.NET, JSP et se connecte aux principales bases de données du marché. Permet de créer des pages HTML. Dispose d'un module d'intégration à FrontPage.
Macromedia Contribute : version (très) light de Dreamweaver. Permet de gérer un site Internet, d'ajouter des pages ou du contenu.
WebDev : un atelier logiciel totalement intégré pour créer des sites Internet (statiques ou dynamiques) et des programmes web en J2EE ou .NET. Intègre l'ensemble des fonctions (tests, déploiement, paiement sécurisé...). Edité par le français PC Soft.
Microsoft Visual Studio Web Développer : Successeur de Web Matrix, IDE Web peu cher. Dédié à ASP.NET 2.
RapidWeaver : voici un IDE tout simple, peu coûteux (- 25 $ US). Il permet en quelques clics de créer son premier site Internet, sans code, en cliquant sur des boutons et onglets. Il utilise le mode skin pour l'interface. Rapide et ergonomique, il plaira à tous ceux qui ne connaissent pas HTML et qui veulent un logiciel le plus simple possible. Petit détail : disponible uniquement sous MacOS X.
NaMo Web Editor : IDE Web accessible. Inclut un nettoyeur de code HTML. Possède un module RAD et des assistants pour créer des sites Internet ASP, PHP, JSP. Module de déploiement et de vérification de compatibles avec les navigateurs.
Front Page : l'IDE Web le plus connu sous Windows, édité par Microsoft. Simple, il permet de créer rapidement un site Internet en technologies Microsoft.
Rational Web Developer : IDE dédié aux programmes J2EE, SOA. Inclut un RAD et des assistants de création. Existe aussi l'IDE Rational Programme Developer. Totalement intégré à la nouvelle plate-forme de développement Atlantic. Dédié aux programmes J2EE, java, Web Services, SOA.
Les outils libres pour développer un site Internet IDE PHP
IDE PHP
Pour programmer en PHP sous Windows, il existe un très bon logiciel développé en Delphi, du nom de Dev-PHP. Ce logiciel en est à sa version 2.0.12 et est distribué sous licence GPL. Il s'agit d'un IDE, c'est à dire d'un environnement de développement intégré, qui permet de créer des programmes en PHP. Vous pouvez exécuter ou vérifier la syntaxe de vos codes sources PHP à partir de l'interface. Ce logiciel est très populaire et cela se comprend : il est en effet rapide, léger et stable. Le visuel de l'interface est agréable et, cerise sur le gâteau, il sera en français pour peu que vous ayez choisi cette option. DEV-PHP : http://devphp.sourceforge.net à la FrontPage
Editeur à la Frontpage
Le 14 avril 2005 était annoncée la version 1.0 (preview) de NVU (sous licence Mozilla). Il s'agit d'un éditeur de page web dérivé du module "composer" de Mozilla. Vous connaissez tous le succès de FireFox et de Thunderbird (tous deux également issus de Mozilla), et certains placent déjà NVU comme concurrent sérieux à FrontPage de Microsoft. NVU tourne sous Windows, Linux et Mac OS X. NVU est un logiciel WYSIWYG (What You See 1s What You Get) fort complet et propose même un support de XHTML, de PHP, des commentaires d'édition, la numérotation des lignes dans l'aperçu du code source, etc. NVU: http://frenchmozilla.sourceforge.net/nvu/ Éditeur CSS
Editeur CSS
Comment développer facilement un site Internet compatible CSS (feuilles de style en cascade) ?
En fait, vous n'avez pas besoin d'un éditeur spécial mais tout comme le HTML, il est plus facile de créer un site Internet CSS avec un éditeur spécialisé. CSSED est multi plate forme (Windows, Linux, Mac OS X), et sous licence GPL. Vous avez à votre disposition l'auto complétion, des assistants et un aide mémoire des propriétés et attributs CSS associés (qui sont fort nombreux !). Vous pouvez aussi valider votre code CSS, et commenter votre code.
Éditeur HTML
Comment ne pas parler de Bluefish 1.0 dans le cadre d'outils libres pour le développement de site Internet ? Il s'agit de l'éditeur HTML WYSIWYG sous Linux le plus populaire (GPL). Son interface intuitive et puissante est en français. Vous pouvez créer un projet couvrant l'ensemble d'un site Internet, votre code sera mis en couleur et enfin, l'application est parfaitement intégré à GNOME ou KDE, Malheureusement, BlueFish ne tourne que sous Linux... Bluefish : http://bluefish.openoffice.nl
Éditeur XML
Bitflux Editor est non pas un éditeur WYSIWYG HTML, mais bien XML (GPL). Il s'emploie, via votre navigateur Firefox et sera par conséquent multi plate forme (Windows, Linux, Mac OS X). Il a été écrit en JavaScript et utilise les technologies XML, XSLT, et CSS pour le rendu visuel. Vous pouvez l'employer avec n'importe quel type de document XML, mais il est préférable de posséder de solides notions en la matière pour s'en servir. Bitflux Editor: http://bitfluxeditor.org/
TABLEAU DES TECHNOLOGIES |
ActiveX
Microsoft http://www.microsoft.com/com/activex.htm |
Client riche |
API d'extension de l'architecture Microsoft Windows COM avec de grosses lacunes sécuritaires. Windows uniquement |
AjAX |
Client riche |
DHTML avec XMLHttpRequest |
DHTML |
Client fin |
HTMLJavascriptetCSS |
HTML |
Client fin |
Site Internet statique sans feuille de style ni javascript |
Flash
Macromedia http://www.macromedia.com/fr/software/flash/ |
Client riche /Serveur web |
Permet la création d'application Web comprenant des animations vectorielles interactives |
JSP
Sun http://java.sun.eom/products/jsp/tags/l 1 /tags 1 l.html |
Client /Serveur web 3 tier |
JSP est une technologie basée Java de création dynamique de code HTML/XML |
JWS
Sun http://java.sun.com/products/javawebstart/ |
Client riche |
Java Web Start (nécessite Internet l'installation manuelle sur chaque poste client) |
Laszlo
Laszlo http://www.laszlosystems.com |
Client riche |
Partie cliente et serveur web Open Source en vue de créer une programme RIA multimédia |
Nexaweb
Nexaweb http://www.nexaweb.com |
Client /Serveur web 3 tier |
Plate-forme de développement J2EE avec un IDEWYSIWYG |
PDF&XDP
Adobe http://www.adobe.com |
Client riche |
Sur ensemble de PDF en combinaison avec du Javascript |
ROR
http://www.rubyonrails.org/ |
Client /Serveur web 3 tier |
Framework client /serveur web Ruby On Rails pour des développements ultra rapide |
SMIL |
Client riche |
Synchronized Multimedia Intégration Language. HTML de haut niveau pour réaliser des présentations audiovisuelles |
ULC
Canoo http://www.canoo.com/ulc |
Client riche /Serveur web |
Canoo Ultra Light Client. Déploiement via JWS. ULC a pour but de développer des RIA pour les programmes J2EE |
wsc
Microsoft http://msdn.microsoftcom/smartclient/ |
Client riche |
Windows Smart Client (programme développée sous Visual Studio). Limité à la plate-forme .NET |
XAML
Microsoft http://www.xaml.net/ |
Client riche |
Langage de description d'interface pour la future version de Windows |
Xforms
W3C
http://www.w3 .org |
Client riche |
Découpe un formulaire XHTML en trois parties, le modèle XForms, les données d'instance et l'interface d'utilisateur |
XUI
http://xui.sourceforge.net/ |
Client riche |
Framework de développement Java et XML |
XUL
Mozilla http://xul-fr.org/ |
Thin Client si base Firefox |
XML User Interface (zool), fonctionnant avec un navigateur Mozilla ou Firefox ou avec XuIRunner |
Exemples de configurations matérielles pour des serveurs web |
|
GNU Linux |
Windows Server |
MacOS X Server |
Serveur web |
Apache Serveur web dédié 1 Go ram (mini) 1 DD de sauvegarde |
IIS ou Apache Serveur web dédié 1 Go ram (mini) 1 DD de sauvegarde |
Apache Serveur web dédié 1 Go ram (mini) 1 DD de sauvegarde |
Serveur web audio / video (streaming) |
Serveur web dédié 2 Go ram (mini) 1 DD de sauvegarde |
Serveur web dédié 2 Go ram (mini) 1 DD de sauvegarde |
Xserve G5 2 Go ram (mini) 1 DD de sauvegarde |
Serveur web de données |
MySQL, Oracle, DB2... |
MySQL, Oracle, DB2, Sybase, 4D, FileMaker, SQLServer... |
MySQL, Oracle, 4D, FileMaker... |

|

|
|