Vous aimeriez bien créer un site, sans dépenser un rond, mais vous ne savez pas comment faire ? Alors lisez bien ce dossier ! Il vous guidera à travers les différentes étapes nécessaires.
Evidemment, il faut bien commencer par héberger tous vos fichiers ! Il est fort difficile de s'héberger soi-même, donc il est conseillé de trouver un serveur gratuit. Selon toute vraisemblance, votre FAI vous propose des pages persos. Mais si l'espace est insuffisant, ou pour d'autres raisons, vous pouvez êtres amenés à vouloir vous trouver un autre hébergeur. Il faut si possible un hébergeur sans pub...
Kidiwi est un hébergeur gratuit, qui offre 10 Mo, avec PHP. Votre site se modifie par une interface de gestion et non par FTP... Votre site aura pour adresse "http://www.kidiwi.com/votrenom/". Un peu long, quand même !
Free fait une offre alléchante : abonnement gratuit avec connexion RTC sans forfait (donc si vous surfez 0 minute, vous ne payez rien), des adresses email à l'infini, et surtout, 100 Mo avec PHP/MySQL (indispensable, par exemple, pour installer un forum). Avec Frei, votre site s'appelera http://votrenom.free.fr/. Notez qu'il faut donner ses coordonnées afin que Free vous envoie un courrier postal indiquant vos identifiants.
Il y en a encore quelques autres (notamment en anglais), comme Freezee. Un site français a essayé de les lister en comparant leurs caractéristiques : Look for free host. À l'aide de la recherche du site, vous pouvez certainement trouver l'hébergeur remplissant toutes les conditions que vous souhaitez.
Hélas, peu d'hébergeurs gratuits et
véritablement fiables sont sans pub. Donc en voilà
quelques uns qui affichent des banniéres publicitaires.
iFrance ou Lycos Multimania
en sont deux exemples. Lycos est quand mè à éviter car la pub y est franchement envahissante.
Si vous êtes prêts à débourser un petit
peu, beaucoup plus de choix s'offrent à vous. Vous en avez
même l'embarras ! Notez que les serveurs payants sont bien
souvents plus fiables que les autres.
Je conseille
Celeonet, EuropeanServers
ou un hébergeur utilsant des Mac,
Aquaray ! Mention spéciale pour
Agora-System, notamment pour l'hébergement avec nom de domaine (site
en .com, .org, .net ...) à 0,97€/mois !
Si vous trouvez le nom de votre site trop long, vous pouvez vous créer un nom comme votresite.com, ou .fr.st, ou...
Si vous voulez toujours pas dépenser de sous, il y a des
solutions : si vous êtes sûrs d'avoir un traffic de plus de
2000 visiteurs/mois et que vous
supportez qu'une fenêtre de pub s'ouvre au chargement de la page,
Domaine-gratuit est parfait !
Il vous donne un nom en .com, .net ou .org !
Sinon, ce sera soit des .new.fr (avec New.fr), soit des .fr.st, .fr.vu, .mac-fan.com ou d'autres choix avec
Ulimit, soit .be.ma, .au.ma ... avec Perso.cc. Autre solution, assez intéressante : dot.tk, proposant un site en .tk.
Ou alors, vous payez un abonnement pas trop cher chez Amen par exemple.
Une fois que vous avez votre site hébergé, il faut bien le remplir !
Parmi les gratuits, on a quand même pas mal de choix ! Allez, on y va ! Tout d'abord, je vais parler de ceux qui nécessite une connaissance avancée des langages de programmation du web, HTML/xHTML/CSS. Pour découvrir ces codes secrets, AllHTML ou L'altruiste sont deux sites francophones qui vous aideront beaucoup. Ajoutez à vos signets le célèbre Site du zéro, équivalent des Nuls sur le net.
Oui oui, le TextEdit d'Apple ! Pour vous en servir comme éditeur d'HTML, il faut être en mode texte puis simplement taper du code normal. Vous ne pouvez pas enregistrer direct en HTML, il faut donc une fois la page finie ajouter depuis le Finder le .html. Mais malgré tout, je ne vois pas pourquoi on utiliserait TextEdit, vue la qualité d'autres logiciels.
Avec TextEdit, on peut rajouter tous les éditeurs de texte (TextWrangler, jEdit, BBEdit... mais que je n'aime pas trop car tous en anglais) plutôt basiques..
Smultron est un logiciel open-source pour la Panthère. Éditeur en tout genre, il propose quelques fonctions novatrices et intéressantes
Premièrement, la recherche est très efficace, poussée, et occupant un menu à elle seule ! Bien sûr, on trouve aussi Rechercher et Remplacer.Les aide-mémoire sont une excellente idée ! Regardez la capture ci-dessus. On peut en créer plusieurs, et en les cliquant, afficher leur contenu.
La coloration syntaxique est fort avancée (choisir la coloration selon le code la page, du C++ au ColdFusion, dans le menu affichage !) et très personnalisable. Remarquez aussi le comptage des lignes (désactivable), la possibilité d'afficher des caractères invisibles (exemple, les retours à la ligne), la synchronisation .Mac remarquable, la possibilité d'enregistrer une copie... Notez le raccourci pomme-T qui ferme la dernière balise ouverte.
Petit gadget : ouvrir caché du menu fichier. Il vous permettra d'éditer un fichier système caché,
notamment les préférences. Oui, mais pas de boulette !
L'interface
est agréable (métal brossé ou blanc). Les
différents documents ouverts ne fichent pas la pagaille : ils se
regroupent dans la barre d'onglets ! En plus, Smultron est en
français !
Bref, Smultron fait partie des tous meilleurs éditeurs pour spécialistes des langages Web. Mais il est tout à fait impossible à utiliser pour ceux qui n'en ont pas les bases.
Cet éditeur de texte exceptionnel devrait vous surprendre ! En plus d'une belle interface traduite en français, SubEthaEdit est doté de fonctions classiques mais très efficaces et d'une innovation étonnante : la collaboration par delà le net ! En effet, tout ce qui fait la spécificité de ce logiciel, c'est que plusieurs personnes peuvent participer à la création d'un texte, d'une page HTML, d'un code en Objective-C, que sais-je ! Pour cela, SubEthaEdit utilise Rendezvous (pour réseau local), IPv6 (pour Internet) ou BEEP. A vous de décider qui a le droit de lire, ou d'écrire, évidemment. Il ne faut pas inviter quelqu'un qui pourrait tout saccager ! L'ancien sogan de SubEthaEdit, 42 brains smarter than one, ou 42 cerveaux plus intelligents qu'un seul, résume bien l'intérêt.
D'ailleurs, il existe encore bien d'autres avantages à SubEthaEdit, mais vous les découvrirez vous-même... Il y en a trop pour les citer ici ! Ce logiciel est incroyablement vaste, on n'a certainement jamais fini de le découvrir. Le plus épatant, c'est que SEE est gratuit pour les particuliers. Attention à ne pas se perdre.
Parlons simplement de quelques unes qui valent le détour. Parmi elles, le blockedit. Comme son nom l'indique, vous pouvez modifier d'un bloc plusieurs lignes de commande. Voici une démo de cette fonction exceptionnelle ! Il y a aussi la prévisualition instantanée avec le moteur de rendu de Safari.
Et puis 3 fonctions qui sont liées : afficher les modifications, qui surligne les changements apportés depuis le dernier enregistrement ; modification suivante/précédente permet de voir une à une les modifications non sauvegardées ; et revenir à la version enregistrée pour annuler les changements s'ils vous déplaisent. Ainsi, y a pas de raison que vous fassiez des gaffes.
Maintenant, je vais vous montrer des éditeurs bien plus faciles à utilise pour un non-connaisseur.
Cet éditeur ne paie de mine, il n'est pas très beau et en anglais, mais compte quelques fonctions bien pensées qui vous plairont.
La fonction reine est probablement la prévisualisation en temps réel (LivePreview). Cliquer sur l'icône idoine de la barre d'outils pour le lancer. Vous avez alors une fenêtre en deux parties : en haut, le code modifiable depuis cette fenêtre. En dessous, le rendu depuis un navigateur, qui s'actualise en permanence ou presque. C'est superbe !
Autre fonction très utile : les clips. Dans le menu
éponyme, choisissez New Clip. Donnez un nom à votre clip,
puis tapez un code. Et alors, là, dans le menu clips, vous verrz
le nom du clip tout juste créé. Cliquez : le code
indiqué par vous est inséré. Encore mieux : chaque
clip a un raccourci allant de pomme-0 à pomme-9 ! Ou comment
taper deux lignes en deux touches 
...
Variante : sélectionnez une partie de votre fichier pour en
faire un clip. Attention, fonction révolutionnaire !
Dans le menu syntax, on peut accéder à une vérification de la syntaxe HTML. Toutes les fautes sont indiquées, et vous n'avez plus alors qu'à corriger. Fort pratique !
Grâce
au menu Insert, les débutants pourront insérer sans rien
taper des liens, des images
ou des tableaux en se laissant guider, pépères... Les
Quick Insert (pour les caractères spéciaux) et les Format
Tags (afin de changer police, taille, style et alignement) seront aussi
très utiles. Enfin, il est possible de rechercher du texte sur
plusieurs documents en même temps.
Malgré tout, Taco HTML Edit nécessite un minimum de maîtrise du HTML.
Ce logiciel est la mocheté même !! Mais bon, si on surmonte l'esthétique très peu Mac OS Xienne, on découvre un logiciel intéressant. Grâce au bandeau et à la barre d'outils, vous avez à disposition toutes les balises possibles en HTML, CSS, XHTML, JavaScript et même PHP. Un double clic sur une balise depuis le bandeau insèrera une balise d'ouverture éventuellement à compléter (exemple : les liens) et la balise de fermeture correspondante. Pour que peu que vous connaissiez la signification de chacune des balises, le bandeau peut être un outil puissant. Sinon, les boutons de la barre d'outils vous permettront d'être bien guidé dans les actions de base. Il inclut même un transfert FTP efficace.
Astuce : pendant que vous écrivez, laissez la case "Accents" cochée, puis quand c'est fini, décochez-là, et là, miracle, tous les caractères accentués son transformés en code HTML.
BorakHTML a été fait par un p'tit français en RealBASIC.
Parmi les éditeurs de site, je dois dire que c'est mon préféré ! À la fois assez avancé et simple à utiliser, CreaText est donc utilisable par les débutants qui progresseront grâce à ce logiciel. Il est compétent en HTML, xHTML, et un peu JavaScript et CSS.
Tout d'abord, ses préférences sont très fournies pour plaire à tous les goûts. Allez y dès le premier lancement (mais vous risquez de ne pas tout comprendre au début...).
Le menu "insert" permettra au débutant de s'y retrouver. Il pourra ajouter à ses pages, sans trop souffrir, des tableaux, des listes, des liens, des liens pour e-mail, changer police et couleur (avec la roue de choix de couleur d'Apple), voire même, pour les plus futés, insérer du JavaScript et du CSS. Ça peut aussi servir aux flemmards qui ne veulent rien taper eux-mêmes !
On dirait d'ailleurs que ce logiciel a été fait pour les paresseux ! En effet, si vous tapez un caractère spécial (comme un caractère accentué), CreaText va écrire le code HTML correspondant. Dans le même esprit, on peut lui demander de créer automatiquement la balise de fermeture correspondant à celle que vous venez d'ouvrir. Si vous n'aimez, désactivez ceci dans les préférences.
CreaText fait aussi dans le FTP (voire plus bas). En effet, depuis le menu "file", "open from FTP", vous accèderez à une fenêtre de transfert de fichiers. Vous pouvez transférer le fichier sur lequel vous travaillez en ce moment (upload current), ou un autre fichier (upload), ou télécharger du serveur.
Insérer un fichier HTML dans un autre est ici très aisé. Au lieu de copier-coller tout le document, faites "file>insert..." puis choisissez le fichier dont le code sera alors entièrement inséré là où est le curseur.
Vous aimez le glisser déposer ? Ça tombe bien, CreaText aussi. Faites glisser une image sur la fenêtre d'édition, à l'endroit précis où vous voulez qu'elle atterrisse. CT fait le boulot : il vous dispensera de taper la balise d'insertion de l'image, le chemin, et les dimensions de l'image.
Finalement, CreaText souffre simplement de l'absence de traductions. L'Allemand devrait toutefois arriver.
Nvu est une super star ! Lancé en 2004, ce projet open-source basé sur le "composer" de Mozilla a acquis une immense popularité. On peut le comprendre !
Nvu possède 4 modes d'édition. Le mode normal vous sera probablement le plus utile. En effet, c'est une édition WYSIWYG (What You See Is What You Get), ce qui permet de créer des pages web aussi facilement qu'un document Word. Nvu génère lui même le code HTML. Regardez la barre d'outils : on dirait du traitement de texte ! L'insertion de tableaux, images, liens est très poussée, ce qui fait que les plus spécialistes d'entre vous seront satisfaits. Quand l'élément HTML est créé, double-cliquez pour l'éditer. Exemple : ajouter ou éditer un lien. Très complet, n'est-ce pas ?
Le mode balises HTML est moins intéressant. Il affiche une icône pour chaque balise HTML, et le texte bien sûr. Ce qui permet de voir la structure de la page (paragraphes, titres, liens, images).
Le mode source sert à éditer le site directement en HTML, à la manière des éditeurs cités plus haut. Néanmoins, à ce jeu, Nvu est bien plus faible que les autres. Le mode source n'a donc aucune raison d'être utilisé en mode principal. Il sert plutôt à voir le code HTML généré par Nvu avec le mode normal ou à rajouter du code HTML inaccessible depuis le mode normal. Y a pas que du HTML avec ce logiciel, vous pouvez ajouter du PHP depuis le menu insertion.
Le mode aperçu est tout à fait inutile. C'est le mode normal mais sans les bordures de tableau et les ancres, je crois.
Nvu possède un gestionnaire de sites. Donnez-lui votre hébergeur, identifiant et mot de passe, et vous pourrez alors éditer en ligne en naviguant dans votre espace web. Ensuite, les modifications effectuées, vous pouvez publier. Vous pouvez aussi ouvrir n'importe quel page web en donnant son URL (menu fichier).
Très utile aussi l'éditeur CSS ! Accesible dans le menu outils, il vous permettra de créer aisément une feuille de style pour enjoliver et harmoniser votre site. Cette capture vous fera certainement mieux comprendre.
Vous diposez aussi d'un nettoyage du code, qui supprime certains passages inutiles. Depuis le menu outils, vous pouvez vérifier la validité de votre code sur le site du W3C (l'organisme qui fixe la syntaxe et les règles des langages de programmation Web). Ajouter à cela la console JavaScript et vous êtes sûr d'avoir un code impeccable. Dernier outil de correction et pas le moindre : la correction orthographique. Téléchargez le dictionnaire français (ou n'importe quelle langue d'ailleurs) sur cette page et dans le menu outils, choisissez extensions, cliquer sur le plus et choisissez le fichier spell-fr-FR.xpi téléchargé.
Malheureusement, Nvu contient pas mal de bogues. La version 1.0 Pre-release est vraiment instable. Ma préférée en fait, c'est peut-être la 0.8... Elle marche au moins !
Votre site est prêt sur votre disque dur ? Il faut maintenant le rendre accessible sur votre hébergeur.
Voici comment transférer ses fichiers.
La plupart des hébergeurs proposent des transferts FTP. Et vous avez besoin d'un logiciel
pour les transférer. Sinon, c'est une interface Web
où vos envoyez vos fichiers 5 par 5 (exemple : Kidiwi gratuit).
Application gratuite, Cyberduck est le plus populaire. En effet, il est traduit en français, il est assez joli et tout à fait complet. Le système des signets est une bonne idée : un double-clic sur le signet Front Transfer Protocol de votre choix et c'est connecté ! De plus, avec le cyber-canard, on peut éditer ces fichiers directement sur le serveur avec SubEthaEdit ou d'autres éditeurs (Smultron, BBEdit..). il fait tout ce qu'on peut attendre d'un bon client FTP (transfert dans les deux sens, renommage, changement de propriétés, création de nouveaux fichiers, et connection à plusieurs serveurs simultanément. Testez aussi ses fonctions de synchronisation entre disque dur et serveur, ainsi que le glisser-deacute;poser de fichiers ou dossiers avec le Finder.
RBrowserLiteest une version allégée et gratuite du partagiciel RBrowser. Néanmoins, il a quelques arguments à faire valoir.
Ce qu'il y a de pratique, c'est qu'en plus de la fenêtre fichiers distants, on peut ouvrir une fenêtre de fichiers locaux et par simple glisser-déposer, transférer des fichiers d'un endroit à l'autre. RBrowserLite aussi peut transférer les dossiers avec conservation de l'arborescence. Autre point fort : vous pouvez vous connecter à plusieurs serveurs et transférer des documents de l'un à l'autre, sans passer par le local. Sinon, comme dans le Finder, vous pouvez trier selon différents critères, et avec plusieurs modes d'affichage (par colonne, liste, ou par icônes). RBrowser a deux lacunes assez importantes : pas possible de renommer un fichier, et pas d'édition en ligne (il faut télécharger les fichiers). Ces problèmes s'ajoutent à la mocheté de l'interface globalement et à l'absence de traduction.
FireFTP est en fait une extension de Firefox. Par ici la traduction (après le téléchargement, faites ouvrir le fichier).
Son fonctionnement est assez simple : entrez l'hébergeur, l'identifiant et le mot de passe (demandez éventuellement à retenir ces informations) puis connectez-vous. À droite, le disque dur ; à gauche le serveur ; les flèches servent à transférer dans un sens ou dans l'autres les fichiers sélectionnés. Il intègre les fonctions de renommage et de suppresion de fichier ainsi que de création de dossier. Si vous transférer un dossier, il respecte l'arborescence. Y a quelques bogues (peut-être encore plus dans la version française), mais enfin, ça marche pas trop mal. Par contre, pour ceux qui n'aiment Firefox, c'est inutile !
Il s'agit d'un excellent un site allemand permettant le transfert et l'édition de fichiers sur une inetrface web. Vous verrez, ça vout tous les clients FTP du monde !
Un peu d'aide pour ceux qui ne comprennent pas l'Allemand : j'ai tout expliqué à l'aide d'ImageWell et voilà le travail ! Comme vous pouvez le voir, c'est un très bon moyen d'éditer son site. Un double clic sur un fichier HTML, CSS, PHP ou autres permet de voir son contenu de modifier avant d'enregistrer (Speichern). Malheureusement, pas de transfert de dossiers, et les fichiers 5 par 5... Au moins, on peut éditer son site depuis n'importe quel endroit de la Terre, y compris sur PC, dans un cybercafé, au bureau...
Il y a encore plus simple pour créer un site, si on est empoté ou flemmard 
! Vous découvrirez Chrono-site et Populus, deux systèmes
dont le but est d'aider les gens à se faire un petite place sur
le Web sans galérer.
Chrono-site est un CMS ou Content Managent System, c'est à dire Système de gestion du contenu. Contrairement à beaucoup de CMS, il offre pas mal de possibilités, il semble plus évolutif et ouvert que les autres. Il a été programmé par un prof pour que ses élèves apprennent comment à se faire un site Web.
Comment se présente-t-il ? C'est une archive .zip, qu'on dézippe et qui donne un dossier. Première chose à faire : ouvrir le fichier variables.php, modifier ce qui est demandé à gauche des commentaires vers le milieu, à savoir les codes PHP avec les $, là... Vous tapez les renseignements demandés (titre et sous titre, base SQL de l'hébergeur, identifiant et mot de passe d'édition à définir...), vous enregistrez puis vous transférez massivement le dossier entier sur votre hébergeur avec un client FTP.
Une fois le dossier entier transféré, rendez-vous sur le Chrono-site et vous n'avez plus qu'à le remplir ! Plus d'instructions sur le site officiel (d'ailleurs fait avec cet étonnant CMS !) au sujet de l'utilisation de votre site. téléchargez notamment ce PDF afin de l'installer et de le remplir aisément. La partie documentation est très bien faite, n'hésitez pas à la consulter ! Et puis, si vous n'arrivez toujours pas à créer de chrono-site, cliquez sur Clés en main où vous verrez que le webmestre se propose d'installer et de faire les premiers réglages de votre Chrono-site. Vous n'aurez plus qu'à remplir votre site de textes, d'images. Et c'est très facile.
Vous avez peut-être remarqué que chrono-site est déjà fourni avec un forum, un livre, d'or, une FAQ, un module de stats plus un annuaire. Mais ce n'est pas tout ! Vous pouvez rajouter des modules programmés par les utilisateurs de Chrono-site, comme un album photo ou un calendrier.
En conclusion, Chrono-site est une solution fabuleuse pour tous ceux qui n'ont pas le temps ni l'envie de se prendre la tête avec un site à créer. Même si les possibilités sont plus restreintes que pour un site classique, on n'en est pas loin...
Avec Populus, vous créez votre site en 3 minutes maximum et c'est déjà prêt à l'usage ! Franchement impressionnant !
Cliquez sur Je veux créer mon site et c'est parti. Pour commencer, il faut choisir l'URL de votre site. Elle se termine par Populus.ch, autrement dit, Populus.ch héberge lui-même votre projet ! Pas d'hébergeur à chercher, pas de client FTP ni d'éditeurs d'HTML, rien de rien ! Ensuite, on vous demandera d'autres renseignements, et ça y est, sans aucune difficulté, vous êtes désormais présents sur la toile.
Une fois cela fait, il s'agit de modifier votre site. Toujours aussi facile d'ailleurs ! Observez cette capture : créez des rubriques que vous pourrez plus tard modifier en cliquant sur éditer, occupez-vous des images à transférer, et réglez quelques paramètres comme le thème graphique du site (plusieurs au choix). C'est d'une simplicité ahurissante.
Voyons maintenant le revers de la médaille. Tout d'abord, Populus et très très très très limité. Vous irez vite mais pas très loin, ça c'est certain. Pas moyen de faire un site évolué. Ensuite, Populus vous inflige un petit bandeau de publicités Google. Pour vous faire une idée, jetez un oeil à mon site Populus crée vite fait pour un essai...
En fait, je ne vous conseille pas trop Populus. Enfin, essayez, mais vous risquez d'approcher assez vite ses limites. Par contre, pour un site tout à fait basique, ça devrait suffire.
