Spécifications de votre exercice
(votre site Web)

Cahier des charges

La création d'un site ne se fait pas "à la volée", en commençant à aligner du code sans savoir où on va.

La réalisation préalable d'un cahier des charges est indispensable. Voici un canevas de présentation qui vous guidera dans sa rédaction (les détails dans le chapitre Description du site ci-dessous):

Une page de couverture comportant:
- en haut:
  - la mention Collège Sainte-Gertrude
  - l'année scolaire
- au centre:
  - le nom de la société créée fictivement
  - la mention "Création du site Web"
  - la mention "Cahier des charges"
- en bas:
  - Les noms des participant(e)s et leurs classes
  - la mention "Travail réalisé dans le cadre de l'option Education Technique et Technologique"
une page décrivant la société
- le domaine d'activité
- les articles vendus, leurs prix htva et le taux de tva
- les frais divers de commande (emballage, port,...)
une page expliquant l'architecture du site
- les choix
  - pour quelles raisons avoir choisi une telle architecture
- les répertoires et les fichiers:
  - les nom des différents répertoires utilisés
  - leurs fonctions
  - par répertoire:
    - les noms des différentes pages utilisées
    - leurs fonctions
par page du site:
- s'il s'agit d'une page HTML:
  - le titre de la page
  - un résumé du texte figurant sur cette page
  - un cadre signalant l'emplacement de chaque image et son nom
  - la position des différents boutons, et pour chacun:
    - son nom
    - la mention de la référence à laquelle il renvoit
- s'il s'agit d'une page PHP
  - le titre de la page
  - le pseudo-code de son programme
  - les commentaires adéquats pour comprendre le pseudo-code
  - la position des différents boutons, et pour chacun:
    - son nom
    - la mention de la référence à laquelle il renvoit

Ce travail interviendra pour une grande part dans la cote du trimestre.

Description du site

Votre site devra être un site de commande en ligne (secteur d'activité au choix) et prévu pour être multilingue. De façon schématique, il devra se présenter comme suit:

Une page d'accueil qui devra:
- au premier coup d'oeil
  - montrer clairement le nom de votre société
  - faire comprendre ce que vous vendez (sous forme imagée puisque la langue n'a pas encore été choisie)
  - permettre le choix entre les différentes langues
Après le choix d'une langue (vous ne développerez provisoirement que le français, mais une seconde langue sera la bienvenue si vous en avez le temps)
- le visiteur accédera à une page de description (succincte) de vos produits dans la langue choisie
- le visiteur accédera ensuite à une page de commande
  - montrant la liste des différents articles proposés à la vente avec leurs prix (htva et tvac)
  - contenant un formulaire de commande à remplir
    - prénom et nom du client
    - adresse éléctronique du client (indispensable, sinon commande impossible)
    - les articles commandés et leurs quantités
  - un bouton de visualisation de la commande
Cette visualisation montrera
En cas de confirmation
- un mail sera automatiquement envoyé au client pour confirmer sa commande. Il contiendra un maximum de renseignements + un numéro unique à mentionner en communication lors de son paiement bancaire.
- un mail vous parviendra avec les éléments suffisants pour honorer votre commande envers ce client + le numéro unique qui lui a été attribué afin de pouvoir facilement contrôler son paiement.

Comment développer un site?

Si vous ne voulez pas faire le travail deux fois, il faut d'abord réfléchir.

Réfléchir à l'architecture du site en termes de répertoires sachant que:
- le site sera multilingue, chaque langue étant représentée par un répertoire à elle seule, le développement d'une autre langue se faisant par copie du répertoire et ensuite traduction des textes
- les photos, images, animations,... devront être communes à toutes les pages identiques de langues différentes
  - ces photos, images,... seront donc stockées en un seul exemplaire, quel que soit le nombre de langues afin d'alléger le site et de faciliter sa maintenance
  - tous les liens faisant appel à ces photos, images, ... devront être identiques, il faudra donc placer ce répertoire correctement dans l'arborescence
Faire sur feuilles volantes un dessin succinct de chaque page
- mentionnant grosso-modo les différents textes
- mentionnant la disposition des images
- mentionnant les différents liens qui figureront sur la page et les pages auxquelles ils renverront.
Accumuler le matériel
- rechercher les informations nécessaires aux différents textes
- rechercher les images et photos utiles à la constitution des pages (attention aux droits d'auteurs, éventuellement réaliser soi-même l'iconographie nécessaire)
Commencer la réalisation des pages
- Après avoir pris connaissance des moyens de mise en forme du texte, encoder les textes
- idem pour les images
- idem pour les liens
Vérifier le fonctionnement général du site sur votre ordinateur
S'attaquer à la réalisation des formulaires
- vérifier leur mise en page
- tester leur fonctionnement
Introduire le code PHP
- à ce moment la partie laborieuse commence, les tests ne pouvant être faits que sur le serveur réel
Vérifier le fonctionnement global du site
- Essayer des commandes soi-même
- mettre le site en libre accès aux autres élèves de la classe et vérifier son fonctionnement "in situ"
Etre satisfait du fameux travail réalisé

A faire et ne pas faire

Les goûts et les couleurs, ça ne se discute pas...

... mais quand même, il y a des limites !!!

Prenez le temps de parcourir le Web, d'examiner des pages personnelles, vert pistache avec du texte fraise, des machins qui bougent dans tous les coins,... et puis allez voir des pages de sites professionnels et goûtez la différence. Posez-vous la question de savoir ce qui les distingue les uns des autres:

jeu des couleurs
fonds d'écrans sobres et discrets
tailles et jeux des caractères
taille et disposition des photos
...

Vous apprendrez ainsi ce qui est à faire et ne pas faire.

Sous peu, je vous fournirai ici des adresses de sites qui donnent soit des conseils, soit des exemples de présentations.

Si vous êtes très pressés, faites appel à votre moteur de recherche favori et cherchez sur les mots clés "arrières-plans", "fonds d'écran", "couleurs complémentaires", "jeux de couleurs", "idées de sites",...

Sauvegarde

Vous devrez veiller à organiser votre site Web selon une architecture en répertoires qui sera stockée dans votre espace réservé sur le réseau du Collège (un répertoire personnel qui sera défini sur le lecteur "Projets" → "Sites6ett" → "votre login de la plate-forme" (et non le forum qui est effacé automatiquement chaque nuit).

De façon à permettre des manipulations faciles pour l'uploading sur le serveur (opération réalisée par le Professeur), il faut que chaque groupe considère ce répertoire comme étant la racine du site et développe l'architecture du site dans ce répertoire (la page d'accueil (index ou default) se trouve directement dans ce répertoire + tous les sous-répertoires).

Bon travail.