Projet présenté par Nicolas Borde et Grégory Gontier

 

 

Compte rendu du Projet : Consultation d'un curriculum vitae

 

 

Sommaire :

  1. Présentation générale
    1. Schéma explicatif
    2. Caractéristiques

  2. Fonctionnalités

    1. Feuille de style
    2. Javascript
    3. Dynamique HTML
    4. Formulaire

 



  1. PRESENTATION GENERALE
    1. Schéma explicatif

    2. Caractéristiques
      1. Les cadres
      2. Nous avons utilisé un nombre important de cadres pour la réalisation de ce projet.
        En effet, nous en utilisons 12 dont une grande partie d'entre eux dans un but graphique.


        Ils représentent :
        - le 1 l'état civil
        - le 2 un dégradé pour l'esthétique
        - le 3 le menu avec les divers choix possibles
        - le 4 l'emplacement des pages composants le cv
        - les 6, 7, 8, 9, 10 et 11sont les cadres servant à réaliser
        l'effet graphique

        Tous les cadres ne sont chargés qu'une seule fois, c'est à dire qu'ils
        sont fixes, sauf 1.
        Le 4 qui est en fait composé de 2 cadres (séparé par des pointillés) :
        - celui du haut représentant le titre de la partie inférieure
        - celui du bas étant la page demandée

      3. Les pages
      4. Le nombre de page est lui aussi élevé, en concéquence du nombre de cadre.
        Les pages sont composées uniquement des informations concernant les différentes parties du cv.
        Elles doivent donc garder une certaine harmonie pour que la présentation soit homogène.
        Nous avons alors utilisé une feuille de style.

    Retour menu

  2. FONCTIONNALITES
    1. Feuille de style
    2. Le fichier correspondant à notre feuille de style est : greg.css.
      Nous avons utilisé une feuille de style, nous permettant de garder une certaine cohérence dans notre présentation.
      Nous avons alors redéfini toutes les balises de H1 à H6 que nous avons appliqué à nos titres et à notre texte.
      Le problème que nous avons rencontré est le fait que le navigateur Netscape ne gère pas très bien les feuilles de styles.
      Avec celle-ci, nous aurions pu réaliser pratiquement toute notre graphisme. Mais pour un soucis de compatibilité, nous avons privilé
      quelque chose de simple orienté graphisme (images).

    3. Javascript
      • Menu (dans menu.htm et menu1.htm)
        Nous avons utilisé des fonctions écrites en javascript pour effectuer un effet original sur le menu.
        En effet, lors du survol du menu, une flèche apparait à droite de celui-ci, permettant ainsi à l'utilisateur de se situer rapidement, et
        en plus de cette flèche, lors du survol, le bouton survolé change.
        Pour cela, nous avons ecrit 3 fonctions :
        - la première nommée un() est chargée de changer l'image lors du survol et d'afficher la flèche
        - la deuxième nommée deux() est chargée de remettre l'image initiale lorsque l'on ne survol pas de bouton
        - la troisième nommée trois() est chargée, lors du click, de laisser afficher le nouveau bouton et la flèche
      • Ouverture de fenêtres (dans exemples_images.htm)
        Cette fonction permet d'ouvrir une nouvelle fenêtre seule, sans menu, sans assenceurs et rien d'autre.
        Elle a été écrite pour pouvoir afficher les exemples dans une fenêtre à part.
      • Agrandissement de la fenêtre du navigateur (dans index.htm)
        Cette fonction permet, lorsque la page index.htm est chargée, d'agrandir automatiquement cette fenêtre et de la redimentionner
        à la taille de l'écran.
      • Redirectionnement (dans diverses pages : par exemple, menu.htm)
        Cette fonction a été écrite dans le but de charger une autre page que la page courante : ceci à cause des problèmes de compatibilités
        avec Netscape.
        Par exemple, les fonctions javascriptes écritent pour le menu ne fonctionnaient pas sur Netscape car elles étaient utilisées dans des
        divisions (DIV) que l'explorateur ne gère pas bien. Nous avons donc dû nous arranger autrement en créant une autre page que l'on
        charge si le navigateur est Netscape.
      • Avertissement (dans haut.htm)
        Dans le même style que la fonction du dessus, celle-ci permet d'avertir l'utilisateur que ce CV est optimisé pour le navigateur Internet
        Explorer.


    4. Dynamique HTM
    5. Nous n'avons écrit qu'une seule fonction en "Dynamique HTML" (deplace() dans toutes les pages titres).
      Celle-ci est appliqué à chaque titre de page, c'est à dire qu'à chaque fois qu'une nouvelle page est chargée, son titre apparait en se déplaçant de la gauche vers la droite. Cet effet apporte une certaine originalité à la présentation et "anime la navigation".

    6. Formulaire
    7. Nous avons voulu créer notre formulaire de mail (cf. texte_mail.htm), avec nos propres champs, ceux nous paraissant les plus importants.
      Pour cela, nous avons les champs suivant :
      - Nom, Prénom : nous savons d'entrée qui s'adresse à nous
      - Entreprise : nous saurons aussi s'il sagit d'une entreprise ou non
      - Le numéro de téléphone : important pour le contact
      - L'adresse mail : pour répondre à l'intéressé
      - Le sujet : permet de savoir rapidement de quoi il s'agit
      - Le contenu : explique le sujet
      De cette façon, toutes les informations sont séparées et cela permet une meilleure lisibilité.
      Ce formulaire est géré par un simple script écrit en PHP3 (cf. envoyermail.php3)

Retour menu