Construire son site Web
Building his web site



Logiciels - softwares Boutons micropaiement  
Réalisation d'un formulaire de contact - making a contact's form Images - pictures

Logiciels de base - basics sofwares

Pour commencer : Nvu (pour monter le site), FileZilla pour exporter chez l'ébergeur (les 2 sont des gratuiciels).
To start : Nvu (do make your web site), FileZilla to export (both of them are freewares)

Le but de lignes qui suivent est de vous aider dans vos premiers pas pour construire un site web (J'ai cherché à minimiser les coûts d'investissement en cherchant le maximum de gratuiciels). Cela s'adresse à des gens qui se lancent; le but est de faire simple et que cela marche. The aim of the following lines are to help you during your first step in building your web site (I did look for minimizing the costs by looking for a maximum of freewares.
N'hésitez pas (via le formulaire sur la page d'accueil) à me laisser des commentaires pour améliorer le site, que vous soyez débutant et que vous rencontriez des problèmes ou, que vous soyez aguerri et que vous ayez une critique constructive à faire. Do not hesitate (by the form on the welcome page) to let me comments in order to improve my site if you are beginner and you face problems or experienced  and that you have to formulate a constructive criticism.

La présentation se limite à ce que j'ai fait et utilisé. The presentation is limited on what I have done and used.

Je suis sous windows je ne pourrait donc pas vous dire si la démarche que j'ai suivie marche avec du Linux. I use windows and is not able to tell you if what I have done works with linux.

1ère étape : prendre un classeur (à préférer à un cahier car pour rajouter des pages ce n'est pas évident)
L'utilité du classeur est de noter les mots de passes, les login, les sites qui sont utiles pour avoir de l'aide ....
Bref capitaliser pour ne pas refaire les mêmes erreurs plusieures fois.
Classez avec ordre pour que vous retrouviez rapidement les informations dont vous pouvez avoir besoin.                                             1st step : take a file (prefer it to a notebook because with a notebook it is not obvious to add a new page between to writen pages) The use of the file is to note the pass words, the logins, the usefull sites to have help, what you have done ...                                          in short, to capitlize in order not to do the same mistakes many times.                                                                                                  Store with order in order to find quickly the informations you could need.        

Faite vous aussi un répertoire spécifique sur votre ordinateur du type avec les sous répertoires. Par exemple :
c:\
    site
        monsite
                fichier 1
                fichier 2
        logiciels pour site
        documentation pour site   

- dans mon site, vous mettez tout ce que vous voulez mettre en ligne avec les arboressances (fichier 1, fichier 2 ...)
- dans logiciels, vous mettez les logiciels que vous allez télécharger et qui vous servent pour faire fonctionner votre site.
- dans documentation pour site, vous mettez tous vos résultats de recherches sur internet pour vous aider dans la construction d'un site.

Nota : une précaution complémentaire peut être prise pour éviter de charger votre site chez votre hébergeur et de contôler plus facilement la taille des fichiers de votre site (votre hébergeur ne vous donne pas une place illimitée donc autant contrôler de temps en temps où vous en êtes par rapport à cette limite). Je vous conseille donc d'ouvrir un fichier miroir (ou fichier de travail) à l'identique de celui que vous mettez en ligne.

L'intérêt de cette approche est que, quand vous aurez fait vos premiers pas avec Nvu, et que vous serez à l'aise, la fièvre du web master vous gagnant, vous voudrez aller plus loin.

Pour ce faire, vous aller télécharger Filezilla (recherche sur google : "télécharger Filezilla") qui est un gratuiciel et qui vous permet de copier les fichier de votre ordinateur vers votre site juste en faisant un clic sur le fichier que vous voulez mettre sur votre site et en le 'lâchant" dans la fenettre de votre site.

Un bon moyen de visualiser, sur votre ordinateur, ce que donne votre site est de télécharger (c'est aussi un gratuiciel) EasyPHP. Une fois que vous avez le programme sur votre ordinateur, lancer le programme, vous verrez (du moins c'est comme cela que ça se passe sur mon ordinateur) en bas à droite un e noir avec un point rouge qui clignotte. Faire un clic droit sur ce "e" et cliquer "gauche sur "administration" lisez le doc pour savoir comment faire fonctionner ce logiciel. En rapide : sous "alias" vous trouver une touche "ajouter" : cliquer dessus et suivez les instructions. 

2ème étape : configuration requise
Marche sous Win 98. Ce qui peut suffir à faire ses premiers pas mais, vite on se retrouve bloquer (j'ai voulu créer un formulaire). Je suis donc passé sous Win XP.

3ème étape :
Investissement vital :
- Win 98 (si vous avez une version antérieure)
- Acheter un nom de domaine (15€ au 01/01/07 sur http://www.neodomaine.com)
 - Avoir un site hébergeur (j'ai pris l'hébergement gratuit sur http://www.hebergement-gratuit.com) => cela ne permet pas de faire de l'argent avec son site mais, cela permet de se lancer (ils ont aussi eu un problème au niveau des mails ce qui ne m'a pas permis de mettre en ligne mon formulaire => j'ai du prendre une formue payante.
bien noter les données que l'on va vous fournir car, il va falloir faire le lien entre ce site hébergeur et néodomaine et aussi pour pouvoir intervenir sur votre site
* les ns 1, 2 et 3 servirons pour la partie administration de neodomaine
* le login et mot de passe vous  servira pour publier les pages web de votre ordinateur vers votre site
-
Une fois que vous avez eu les données, allez sur neodomaine, puis cliquez sur neo gestion
- télécharger Nvu : sous google = mettre "télécharger Nvu" et lancer la recherche vous aller trouver un site vous permettant de le télécharger (c'est un gratuiciel)
Vous pouvez commencer à faire votre site.
=> pour publier une page vous cliquez sur la touche publier et vous complétez les cases avec les données que vous a fourni le site sur lequel vous avez pris l'hébergement (j'ai reçu les données par mail peut de temps après l'enregistrement - cela peut prendre quelques heures)
=> pour faire les liens entre les pages : surligner le ou les mots (pointer la fléche du curseur en début de mot, clic gauche sur la sourie et en maintenant le clic gauche appuyé, déplacer vers la droite la flèche pour surligner le mot ou les mots à surligner) puis, cliquer sur l'icone lien dans la barre d'outil en haut de l'écran. Le logiciel va vous demander avec quel fichier vous voulez faire le lien (= quand une personne va cliquer sur le texte que vous venez ce surligner vers quel autre page cela va l'envoyer).


Le formulaire

Le formulaire permet aux gens qui vistent votre site de vous envoyer des données, des commentaires. Cela sans que vous n'ayez à mettre votre adresse internet en ligne.

Que cela m'a posé de problèmes à moi débutant !...

Personnellement, j'ai ouvert une boite mail spécifique pour mon site. Je ne voulais pas de message venant de mon site vers ma boîte personnelle. Je dois aussi avouer que j'ai toujours une petite crainte sur du piratage d'adresse mail possible => si je dois fermer ma boite mail du à un piratage de mon site, je ne veux pas à avoir à prévenir tous mes proches ou contacts personnels de ce changement. Donc, j'ai pris une boite mail spécifique pour mon site.

Vous pouvez avoir des boites mail gratuites par exemple sur :
- www.caramail.lycos.fr
-
www.laposte.net

En final, ce à quoi je suis arrivé et comment j'y suis arrivé :

J'ai téléchargé conTEXT (sur google, lancer une recherche avec "télécharger conTEXT")
cela pour avoir des fichiers avec l'extention ".php" (un fichier text fait avec du word a une extension en ".doc"). Sinon, je n'y arrivait pas !

créez avec le logiciel conTEXT, en ouvrant une nouvelle feuille (icône en haut à gauche qui représente une feuille). Une fois cette nouvelle page ouverte,
y mettre le texte ci-dessous (attention à ne rien changer)
------------------------------------------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>

  <div align="center">
  <form method="post" action="formmail.php">
    <input name="subject" value="formmail" type="hidden">
    <table>

      <tbody>
        <tr>
          <td>Votre Nom:</td>

          <td><input name="realname" size="30" type="text"></td>
        </tr>

        <tr>
          <td>Votre Email:</td>

          <td><input name="email" size="30" type="text"></td>
        </tr>

        <tr>
          <td>Sujet:</td>

          <td><input name="title" size="30" type="text"></td>
        </tr>

        <tr>
          <td colspan="2">Commentaires:<br>

          <textarea cols="50" rows="6" name="comments"></textarea>
          </td>
        </tr>

      </tbody>
    </table>

    <br>
 <input value="Envoyer" type="submit"> -
    <input value="Annuler" type="reset">
  </form>

  </div>

  <title>formulaire 3</title>
</head>
<body>
</body>
</html>
---------------------------------------------------------------------------------
une fois que la saisie est finie enregistrer sous le nom : formulaire
(sur votre page index, il faudra par exemple que vous mettiez en bas de page le mot "contact" et sur ce mot, vous allez créer un lien avec ce nouveau fichier que vous venez de créer)

Maintenant, vous avez un formulaire, mais, il n'est pas traité => il faut un autre fichier pour le traiter et vous envoyez les données dans la boite mail que vous avez choisie.
Vous ouvrez donc une nouvelle page avec le logiciel conTEXT et, vous y mettez le texte suivant :
--------------------------------------------------------------------------------------

<?php
$TO = "votre adresse@mail";

$h  = "From: " . "votre adress@mail";

$message = "";

while (list($key, $val) = each($HTTP_POST_VARS)) {
  $message .= "$key : $val\n";
}

mail("votre adresse@mail", $subject, $message, $h);

Header("Location: http://www.nom de domaine/index.html");

?>

----------------------------------------------------------------------
Dans le texte ci dessus, il faut mettre des données qui sont propres à votre site internet ou à l'adresse e-mail vers laquelle vous voulez que l'on vous envoie les messages (boite qui doit être active)
votre adress@mail : y mettre l'adresse de la boite mail vers laquelle vous voulez que les message soient envoyés

nom de domaine : y mettre le nom de votre site, ne pas oublier l'extension : ".com" ou, ".fr" ou, ".eu" ...

index : y mettre le nom de la page d'accueil, pour ma part le nom du fichier de ma page d'accueil est : index avec l'extension ".html".

Images / photos

Pour rendre attractif visuellement votre site, mettez des images, des photos, dessins, vidéo.
Par contre, faites attention car cela prend de l'espace en terme de volume de fichier (= longueur pour le mettre en ligne et prend de la place sur votre espace site) donc, optimisez la taille des fichiers que vous mettez en ligne.
Pour tout ce qui est photo ou image, vous pouvez utiliser le gratuiciel Pixia

Bouton
Pour faire des boutons à mettre sur votre site vous pouvez utiliser le gratuiciel Pixia. Pour plus de détails, cliquez sur le bouton.
To put button on your web site, vous can use the freeware Pixia. For more details, clic on the button.




Site pour renseignement :
www.salemioche.net