La conception de site web pour les enfants : Bienvenue à Tuts+ Ville !

Bienvenue à Tuts+ Ville, où tout le monde adore concevoir des sites web ! Dans cette suite de tutoriels nous apprendrons tout sur la conception et la construction d'un site web. On va faire un site web ensemble.

Ces cours (ou tutoriels) vous guiderons pas à pas dans la création d'un votre site web. Tout les corrigés d'exercices seront inclus à la fin de chaque cours, afin que vous puissiez évaluer votre travail au fur et à mesure.

Alors venez, mettez-vous à l'aise, et créons quelque chose pour les habitants de Tuts+ Ville !

Comment fonctionne le Web ?

Prenons du recul et réfléchissons au functionnement du web.

Deux ordinateurs peuvent communiquer lorsqu'ils sont connectés à l'Internet (représenté par les lignes jaunes  ci-dessous).

Un serveur (la boite bleue) est un ordinateur spécial qui contient des pages web. A la maison ou à l'école, votre ordinateur n'est pas un serveur car il n'est pas directement connecté à l'Internet. Vous vous connectez à l'Internet grâce à un Fournisseur d'Accès Internet (noté ISP dans le diagramme).

Le contenu d'un site web (tout ce dont il parle) est organisé selon un ensemble de règles que les ordinateurs comprennent; c'est un peu comme un langage secret, sauf qu'on saura bientôt l'interpréter nous aussi !

Dans cette image le navigateur demande à voir www.tutsplus.com au serveur qui possède les fichiers du site. The serveur lui renvoie ces fichiers et le navigateur les traduit pour les afficher sur l'écran. Et tout ceci se passe très rapidement !

Tout repose sur la communication et le partage de l'information.

Par conséquent, un site créé localement (sur votre ordinateur) ne peut être consulté par d'autres personnes sur un autre ordinateur, jusqu'à ce que vous transfériez les fichiers sur un serveur. On s'intéressera sur cette propriété plus tard.

Le travail d'un concepteur de site web

Le travail d'un concepteur de site web est très important. Tout ce qui se passe dans l'image ci-dessus n'a qu'un but : afficher in site web. Le travail du concepteur de site web consiste à décider à quoi le site web va ressembler, et bien d'autres choses encore, comme par exemple de s'assurer que le site peut être utilisé par un utilisateur handicapé (de la même façon que utilisez Tuts+ maintenant).

Notre projet

Dans cette série de tutoriels nous allons créer un site web pour Tuts+ Ville. La ville a besoin d'un endroit où les touristes peuvent se renseigner sur la ville avant de la visiter.

Voici à quoi ressemble le site web :

Ce site web inclura tout ce que nous aurons appri. Ce sera un super premier projet pour vous !

Ebauche et construction

Maintenant, penchons-nous sur ce dont nous avons besoin pour y arriver.

Tout d'abord nous allons dessiner notre site web puis mettre ce que nous voulons avoir sur la page dans un fichier spécial. Nous allons aussi ajouter des liens pour que les visiteurs puissent accéder à d'autres endroits comme les sites des magasin.

Le style

Après avoir conçu et écrit le fichier spécial pour notre site web il va falloir faire en sorte qu'il ait bonne allure. C'est ici que touts nos choix de couleurs et d'architecture (décider ou chaque élément va se placer à l'écran) vont prendre vie.

Comment rendre notre site web facile d'utilisation ? Quelles impressions nos couleurs devraient-elles véhiculer ? Sur un écran de smartphone, comment organiser nos éléments ? Et pour un écran d'ordinateur ? Quelle police est la plus adéquate ? Il y a beaucoup d'aspects auxquels il faut penser mais ne vous inquiétez pas, c'est très amusant, et ces questions vous viendront naturellement à l'esprit plus vous concevrez de sites web.

Carte de la série de tutoriels

Vous pouvez voir ci-dessous la carte de complète de l'aventure que nous allons entreprendre pour construire notre site web. Chaque bloc comporte une introduction sur un sujet et est ensuite séparé en plus petites parties.

Introduction

L'étoile rose vous indique que nous sommes actuellement en train de lire l'Introduction. Nous avons maintenant une idée d'ensemble sur le fonctionnement de l'Internet, sue le rôle d'un concepteur de site Internet, et avons analysé rapidement le projet que nous allons concevoir et construire ensemble.

Construire un site web

Il faut maintenant trouver des idées et commencer à faire une esquisse. L'esquisse du site est un moyen amusant de rassembler vos idées avant de commencer à coder. Cela peut faire gagner beaucoup de temps et aide à rester dans le bon chemin.

Nous parlerons ensuite des fichiers et outils dont nous aurons besoin pour coder notre site.

Le HTML

Le HTML (HyperText Markup Language en Anglais) est ce language secret (pas pour longtemps !) qui est utilisé pour organiser le fichier texte dont nous avons brièvement parlé plus tôt. Il permet à nos navigateurs de comprendre et d'afficher les fhichers des pages web.

Tout sur notre site, et sur n'importe quel site d'ailleurs, existe grâce aux éléments HTML. Les éléments sont des parties de ce langage qui ont un sens et aident à décrire tout ce que nous positionnons dans la page.

Ne vous inquiétez par de la signification de ce code pour l'instant, l'important est de savoir que tout site web provient d'un document écrit.

Le CSS

Le CSS (Cascading Stylesheets en Anglais) nous permet de choisir le style (couleur, polices, aspect général) de notre site web, le rendant aussi agréable et facile à utiliser que possible pour nos visiteurs.

La mise en page grâce au CSS

Le CSS nous permet aussi de positionner tous nos éléments sur la page.

Les images

Dans cette partie nous allons parler rapidement du type d'images qui seront dans notre site web et de la façon d'y appliquer un style. Nous allons ajouter quatre adorables images, qu'en pensez-vous ?

Les bases de la conception

Dans cette partie nous allons nous intéresser aux "blocs élémentaires" de la conception de sites web. Nous voulons nous assurer que ce que nous créons pourra être utilisé, facilement, et que cela ait l'air attirant.

La typographie

La typographie est l'art d'arranger les types, et constitue une suite logique à notre cours de conception étant donné qu'elle peut jouer un rôle majeur dans le succès où l'échec de notre site web.

Le premier exemple de typographie sur ce site peut être trouvée tout en haut :

Les couleurs

Les couleurs sont très importantes et très amusantes. Les couleurs rendent les sites jolie, et leurs donnent un sens, ce dont nous parlerons ici.

Fin de ce cours

Nous finirons cette série de tutoriels en apprenant à mettre les fichiers de notre site web sur un des ces ordinateur spéciaux, un serveur, comme ça vos amis et votre famille pourrons le voir sur Internet. Nous parlerons aussi de la suite d'où vous pourrez continuer vos études une fois devenu un "concepteur de site web pour Tuts+ Ville". 

Mais ne nous inquiétons pas de tout cela pour l'instant, nous venons touts juste d'arriver.

A bientôt !

Dans le prochain cours nous nous lancerons directement dans la construction d'un site web grâce à HTML. Je peux à peine attendre, au revoir!