() translation by (you can also view the original English article)
Bienvenue à ce deuxième tutoriel dans notre série sur la conception de sites web pour les enfants !
Dans ce tutoriel nous allons apprendre certaines choses que nous devons faire ainsi que les outils dont nous aurons besoin avant de commencer à écrire le code pour notre site web de Tuts+ Ville; on y arrivera bientôt, c'est promis ! Si vous avez une question, n'hésitez pas à laisser un commentaire en bas de page.
Tout d'abord, intéressons nous plus en détail à ce que nous allons réaliser ensemble.
L'ébauche
Il est très utile de répertorier et d'imager tout idée que nous pourrions avoir en tête avant de la construire. Cette routine peut nous permettre de gagner beaucoup de temps une fois que nous écrirons le code.
Peut-être que ce que nous imaginions dans notre tête n'a plus l'air si intéressant une fois mis par écrit ? Peut être que de nouveaux problèmes ou questions apparaîtront lors de notre ébauche ? Peut être notre conception est-elle trop complexe ? De nombreux tels problèmes apparaîtront d'eux même lors de notre ébauche.
C'est normal de ne pas trouver nos ébauches géniales au départ, c'est exactement le but recherché ! Il convient de les raffiner par écrit avant toute chose.
Ébauche du site de Tuts+ Ville
Notre site web doit permettre aux touristes de visiter et de s'informer sur les boutiques ou commerces de notre ville. Nous allons regrouper ces derniers de façon logique, par exemple les "hôtels" dans un groupe et les "restaurants" dans un autre. Nous voulons aussi que les visiteurs puissent avoir plus d'information sur les commercent en cliquant sur un lien menant à leur site web.
Nous allons aussi utiliser quelques images pour donner un air accueillant à la ville.
Voicià quoi ressemble l'ébauche qui a conduit à la version finale du site :
C'est très exactement le site web que nous allons créer intégralement ! Pas mal, n'est-ce pas?
Les éditeurs
Pour écrire du code HTML (vous vous rappelez de toute cette histoire de langage secret dont nous avons parlé dans le premier tutoriel ?) nous avons besoin d'un éditeur de texte où écrire.
Il est bien plus pratique de ne pas utiliser quelque chose comme Microsoft Word pour ceci, un véritable éditeur de code nous facilitera beaucoup la tâche. Un éditeur de code comprendra ce que nous écrirons et colorera le code en conséquence, alors que Microsoft Word est destiné à écrire des rédactions par exemple.
Il existe plusieurs éditeurs de code gratuits et complets que vous pouvez télécharger sur le web. Si vous n'êtes pas sûr de savoir comment télécharger quelque chose, où bien même si vous devriez le télécharger, il est toujours préférable de demander à un adulte.
Bluefish est adapté aux ordinateurs tournant sous Windows, alors qu'Atom est plus adapté aux Mac.
Nous regarderons ce que ce texte veux dire dans le prochain tutoriel, cela vous donne un aperçu de ce que nous écrirons.
Des fichers, des fichers, des fichiers
Comme nous l'avons déjà évoqué, un site web n'est en fait qu'un tas de fichiers. Ces fichiers doivent toutes être dans le même dossier pour que votre navigateur puisse y accéder.
Le site web de Tuts+ Ville aura un fichier HTML (avec une extension .html à la fin), un fichier CSS (avec une extension .css à la fin), et quatre images qui seront sauvegardées dans un dossier appelé "images". Le dossier content les images sera contenu dans le même dossier que les fichiers HTML et CSS.
L'extension d'un fichier est le groupe de lettres qui vient après le point dans le nom du fichier, et nous informe sur le type de ce fichier.
Comme nous l'avons dit, nos images seront sauvegardées dans un dossier appelé "images" dans notre dossier principal, comme ceci :
Dans l'image ci-dessus nous avons une image appelée town.svg (l'extension .svg représente une image) que nous avons mis dans un dossier appelé "images" Ceci permet une meilleur organisation :
Ces deux façons d'organiser les fichiers sont correctes, mais nous allons utiliser des dossiers en plus, comme dans l'image de droite.
Les navigateurs
Nous regarderons notre site web dans un navigateur, comme celui que vous êtes en train d'utiliser pour regarder cette page sur Tuts+ !
Il existe plusieurs navigateurs disponibles gratuitement si vous n'en avez pas déjà un, par exemple Google Chrome et Firefox. Si vous utilisez un Mac, vous aurez déjà Safari installé, c'est pratique.
Pas sur le web, pour l'instant.
Nous allons construire notre site web directement sur notre ordinateur et pas sur le web. Si vous vous rappelez du premier tutoriel, nous avions expliqué que nous ne pouvons voir un site web sur Internet si ce dernier n'est pas sur un serveur.
L'image ci-dessous montre à quoi un site web regardé localement (pas sur le web) dans un navigateur ressemblerait. Au lieu de voir une adresse comme www.tutsplus.com, nous voyons l'adresse locale du site, qui est légèrement différente.
Bien joué !
Dans ce tutoriel nous avons regardé quelque choses importantes qui nous aiderons à écrire le code de notre site web. Nous avons vu comment préparer les fichiers et quelques outils comme un éditeur de texte et un navigateur.
Dans le tutoriel suivant nous nous lancerons directement dans l'écriture du code de notre site web! Nous organiserons (je sais, tant de choses à organiser!) et ajouterons du code à notre fichier HTML. Ca va devenir amusant !
A bientôt !
