.png "OFPPT cours+exercice+examen+corrige")
TSDI - examen de passage
Technicien Spécialisé en Développement informatique.
examen de passage TSDI.
Information
Le bandeau latéral
b) L’en-tête
Il y a plusieurs ébauches concernant l’en-tête. Tout d’abord, il y a eu un en-tête ne
comprenant que le logo du SCFP.
Pour avertir les visiteurs qu’ils se trouvent sur un site du SCFP mais plus particulièrement sur
le site de la section locale 4475, nous avons ajouté le nom de la section locale sous forme
stylisée que j’ai réalisé par moi-même. Ce style qui est apparu sur la carte d’affaire
notamment que je vous ai présentée plus tôt dans ce rapport.
c) Le menu de navigation
Le menu de navigation est un élément primordial dans la présentation d’un site web. En effet, il doit
permettre de rejoindre aisément les autres pages du site web.
Le menu qui a été réalisé pour le site web de la section locale fut dans un premier temps réalisé avec
JavaScript.
Cependant, des problèmes sont apparus lors des survols de la souris sur les rubriques du menu, le
changement d’affichage ne s’effectuait pas correctement.
Par conséquent, je suis revenu à un menu traditionnel sous forme de liste où le rendu se modifie par
l’intermédiaire du CSS.
La structure de chacune des pages est désormais établie, je vais vous présenter
les différents éléments que comporte chacune des pages à commencer par le
bandeau latéral qui entoure à gauche et à droite l’en-tête, le menu de navigation
et le contenu.
Les pages du site web comportant une structure simple et classique centrée au
milieu de l’écran, ainsi que d’un l’arrière-plan complètement blanc, rendait la
page assez vide. Pour combler tout cet espace vide, j’ai réalisé ces bandeaux afin
de remplir ces espaces.
L’en-tête
Il y a plusieurs ébauches concernant l’en-tête. Tout d’abord, il y a eu un en-tête ne
comprenant que le logo du SCFP.
Pour avertir les visiteurs qu’ils se trouvent sur un site du SCFP mais plus particulièrement sur
le site de la section locale 4475, nous avons ajouté le nom de la section locale sous forme
stylisée que j’ai réalisé par moi-même. Ce style qui est apparu sur la carte d’affaire
notamment que je vous ai présentée plus tôt dans ce rapport.
c) Le menu de navigation
Le menu de navigation est un élément primordial dans la présentation d’un site web. En effet, il doit
permettre de rejoindre aisément les autres pages du site web.
Le menu qui a été réalisé pour le site web de la section locale fut dans un premier temps réalisé avec
JavaScript.
Cependant, des problèmes sont apparus lors des survols de la souris sur les rubriques du menu, le
changement d’affichage ne s’effectuait pas correctement.
Par conséquent, je suis revenu à un menu traditionnel sous forme de liste où le rendu se modifie par
l’intermédiaire du CSS
Il y a plusieurs ébauches concernant l’en-tête. Tout d’abord, il y a eu un en-tête ne
comprenant que le logo du SCFP.
Pour avertir les visiteurs qu’ils se trouvent sur un site du SCFP mais plus particulièrement sur
le site de la section locale 4475, nous avons ajouté le nom de la section locale sous forme
stylisée que j’ai réalisé par moi-même. Ce style qui est apparu sur la carte d’affaire
notamment que je vous ai présentée plus tôt dans ce rapport.
c) Le menu de navigation
Le menu de navigation est un élément primordial dans la présentation d’un site web. En effet, il doit
permettre de rejoindre aisément les autres pages du site web.
Le menu qui a été réalisé pour le site web de la section locale fut dans un premier temps réalisé avec
JavaScript.
Cependant, des problèmes sont apparus lors des survols de la souris sur les rubriques du menu, le
changement d’affichage ne s’effectuait pas correctement.
Par conséquent, je suis revenu à un menu traditionnel sous forme de liste où le rendu se modifie par
l’intermédiaire du CSS
Le contenu
Le contenu de chacune des pages est la partie la plus importante du site web. En effet, ce
sera là où apparaîtront toutes les informations et documentations disponibles et mises en
ligne par le syndicat.
Le contenu sera entièrement dynamique et modifiable par l’intermédiaire d’un espace
d’administration accessible aux membres de l’exécutif du SCFP 4475. L’ensemble du contenu
sera entièrement stocké dans la base de données relationnelle MySQL et sera modifié par
des scripts PHP exécutés lors d’envoi de formulaires venant de l’espace d’administration.
Ce type de rubrique est extensible en hauteur à l’infinie ce qui permettra de s’adapter à
n’importe quelle taille de contenu saisi par le syndicat.
Le contenu de chacune des pages est la partie la plus importante du site web. En effet, ce
sera là où apparaîtront toutes les informations et documentations disponibles et mises en
ligne par le syndicat.
Le contenu sera entièrement dynamique et modifiable par l’intermédiaire d’un espace
d’administration accessible aux membres de l’exécutif du SCFP 4475. L’ensemble du contenu
sera entièrement stocké dans la base de données relationnelle MySQL et sera modifié par
des scripts PHP exécutés lors d’envoi de formulaires venant de l’espace d’administration.
Ce type de rubrique est extensible en hauteur à l’infinie ce qui permettra de s’adapter à
n’importe quelle taille de contenu saisi par le syndicat.
Le pied de page
Le pied de page se trouvera dans la totalité des pages. Cette partie regroupera l’ensemble
des liens utiles tels que les affiliations ou encore des documents mis en ligne par le syndicat.
Vous pouvez retrouver l’ensemble des codes et aperçu des pages en annexes.
Présentation de l’environnement de travail
N’ayant jamais réalisé d’animation de ce type ni utilisé cet outil, j’ai dû apprendre quelques
notions de bases avant de commencer à me lancer dans la réalisation de cette animation.
Avant de commencer à réaliser l’animation, il faut paramétrer l’animation en indiquant que
version de Flash Player et type de scripts allait vous utiliser pour cette animation.
N’ayant jamais réalisé d’animation de ce type ni utilisé cet outil, j’ai dû apprendre quelques
notions de bases avant de commencer à me lancer dans la réalisation de cette animation.
Avant de commencer à réaliser l’animation, il faut paramétrer l’animation en indiquant que
version de Flash Player et type de scripts allait vous utiliser pour cette animation.
Voici la scène de travail de l’animation, la dimension de la scène est réglable en
hauteur et en largueur. Il faut savoir tous les éléments se trouvant dans l’espace blanc seront visibles contrairement aux parties qui se trouveront dans l’espace gris, ils seront en dehors de la scène et par conséquent ne
seront donc pas visibles.
hauteur et en largueur. Il faut savoir tous les éléments se trouvant dans l’espace blanc seront visibles contrairement aux parties qui se trouveront dans l’espace gris, ils seront en dehors de la scène et par conséquent ne
seront donc pas visibles.
Si l’on désire insérer un élément au sein de la scène, il faut d’abord préalablement importer
ces éléments au sein de la bibliothèque de travail. Pour ensuite, les importer à l’intérieur ou
l’extérieur de la scène.
Ci-dessous est l’une des parties les plus importantes dans la conception d’une animation en
Flash. Ce que vous apercevez se nomme « le scénario », il permet de gérer les différents
calques qui seront appliqués à la scène et de les manipuler en fonction du timeline que l’on
peut régler. Pour cette animation, j’ai réglé l’animation à 24 images par seconde.
ces éléments au sein de la bibliothèque de travail. Pour ensuite, les importer à l’intérieur ou
l’extérieur de la scène.
Ci-dessous est l’une des parties les plus importantes dans la conception d’une animation en
Flash. Ce que vous apercevez se nomme « le scénario », il permet de gérer les différents
calques qui seront appliqués à la scène et de les manipuler en fonction du timeline que l’on
peut régler. Pour cette animation, j’ai réglé l’animation à 24 images par seconde.
Procédé de la réalisation de l’animation
Pour réaliser l’animation, j’ai d’abord établi un scénario.
En effet, j’ai souhaité que mon animation se déroule selon la manière suivante : le premier
aperçu sera l’apparition du logo du SCFP et de la section locale 4475, ensuite les différents
sites où sont installés les bureaux du SCFP 4475 vont défiler à tour de rôle, pour finir sur le
logo du SCFP et son slogan « Un Syndicat en Santé ! ».
Pour effectuer la transition entre les différentes images, j’ai dû réaliser une interpolation de
mouvement sur la totalité de la présence de l’image sur la scène.
Cette interpolation de mouvement m’a permis de réaliser une apparition et une disparition
en dégradé de chacune des images.
Pour cela, j’ai modifié la quantité alpha au cours du temps. Vous pouvez observer ci-dessous
une courbe représentative du % d’alpha de l’image qui varie au cours du temps.
Au départ, chaque image est transparente puisqu’elle possède 0% de quantité d’alpha. Au
fur et à mesure du temps, la quantité de % d’alpha augmente jusqu’à atteindre 100%, cela
correspond à l’apparition en fondu de l’image. Ensuite, elle reste un certain temps à 100%,
l’image est actuellement visible par les utilisateurs. Pour finir, la quantité de % d’alpha
diminue sur une pente régulière jusqu’à atteindre 0 de % d’alpha, ce qui correspond à la
disparition en fondu de l’image.
Pour réaliser l’animation, j’ai d’abord établi un scénario.
En effet, j’ai souhaité que mon animation se déroule selon la manière suivante : le premier
aperçu sera l’apparition du logo du SCFP et de la section locale 4475, ensuite les différents
sites où sont installés les bureaux du SCFP 4475 vont défiler à tour de rôle, pour finir sur le
logo du SCFP et son slogan « Un Syndicat en Santé ! ».
Pour effectuer la transition entre les différentes images, j’ai dû réaliser une interpolation de
mouvement sur la totalité de la présence de l’image sur la scène.
Cette interpolation de mouvement m’a permis de réaliser une apparition et une disparition
en dégradé de chacune des images.
Pour cela, j’ai modifié la quantité alpha au cours du temps. Vous pouvez observer ci-dessous
une courbe représentative du % d’alpha de l’image qui varie au cours du temps.
Au départ, chaque image est transparente puisqu’elle possède 0% de quantité d’alpha. Au
fur et à mesure du temps, la quantité de % d’alpha augmente jusqu’à atteindre 100%, cela
correspond à l’apparition en fondu de l’image. Ensuite, elle reste un certain temps à 100%,
l’image est actuellement visible par les utilisateurs. Pour finir, la quantité de % d’alpha
diminue sur une pente régulière jusqu’à atteindre 0 de % d’alpha, ce qui correspond à la
disparition en fondu de l’image.
Réalisation de l’ensemble des pages
a) Création de la structure d’une page
Le site se doit être simple d’utilisation et de navigation, que ce soit dans ses fonctionnalités
ou que ce soit dans son contenu.
En effet, la plupart des membres du SCFP 4475 ne possède pas de connaissances en
informatique. Pour attirer l’ensemble voir la totalité des membres du SCFP 4475, le principal
but est de faciliter la navigation le plus que possible.
Pour faciliter la navigation, il est obligatoire que l’ensemble des pages du site web
possèdent la même structure et organisation.
Cela permet d’avoir une logique dans la structure des pages, mais aussi de ne pas gêner la
navigation de l’utilisateur, à cause des différentes structures de page à chaque changement
de page.
Pour cela, j’ai réalisé un modèle pour la structure des pages que vous pouvez observer cidessous. La totalité des pages visibles par l’utilisateur posséderont cette même structure :
- Deux bandeaux latéraux.
- Un en-tête de page avec le logo du SCFP et le nom de la section locale.
- Un menu de navigation complet.
- Le contenu qui se modifiera selon les pages.
- Un pied de page avec l’ensemble des liens et infos pratiques.
a) Création de la structure d’une page
Le site se doit être simple d’utilisation et de navigation, que ce soit dans ses fonctionnalités
ou que ce soit dans son contenu.
En effet, la plupart des membres du SCFP 4475 ne possède pas de connaissances en
informatique. Pour attirer l’ensemble voir la totalité des membres du SCFP 4475, le principal
but est de faciliter la navigation le plus que possible.
Pour faciliter la navigation, il est obligatoire que l’ensemble des pages du site web
possèdent la même structure et organisation.
Cela permet d’avoir une logique dans la structure des pages, mais aussi de ne pas gêner la
navigation de l’utilisateur, à cause des différentes structures de page à chaque changement
de page.
Pour cela, j’ai réalisé un modèle pour la structure des pages que vous pouvez observer cidessous. La totalité des pages visibles par l’utilisateur posséderont cette même structure :
- Deux bandeaux latéraux.
- Un en-tête de page avec le logo du SCFP et le nom de la section locale.
- Un menu de navigation complet.
- Le contenu qui se modifiera selon les pages.
- Un pied de page avec l’ensemble des liens et infos pratiques.
L’intérêt de procéder ainsi est que seul le contenu du site varie d’une page à l’autre, c’est
pourquoi de page en page on inclue toujours le même en-tête, le même menu de navigation
et le même pied de page. Cela évite de devoir implémenter à nouveau chaque partie du site,
ce qui entraine un gain de temps considérable.
pourquoi de page en page on inclue toujours le même en-tête, le même menu de navigation
et le même pied de page. Cela évite de devoir implémenter à nouveau chaque partie du site,
ce qui entraine un gain de temps considérable.