1. Mohamed Bouhamed - Rapport de stage – 1ére année génie Informatique - Année
2014/2015
1
Auteur Mohamed Bouhamed
Tuteur professionnel Slim Abida
Tuteur Universitaire Radhouane Guermazi
Année Universitaire 2014/2015
Création d’un site web en flash
Mise en place d’un système de suivi des chantiers
Stage du 01 Juliet au 15 Sep 2014
2. Mohamed Bouhamed - Rapport de stage – 1ére année génie Informatique - Année
2014/2015
2
Remerciements
Je tiens à remercier les membres de la société pour m’avoir accueillie
au sein de leur entreprise et pour m’avoir accordée leur confiance.
J’adresse particulièrement mes remerciements à Monsieur Slim Abida
et Mme Dorsaf Abida pour m’avoir aidée et suivie lors du développement
du site et mise en place du système informatique pour chaque chantier.
Je souhaite également remercier Monsieur Radhouane Guormazi qui
est mon tuteur universitaire et qui me conseille tout au long du stage et lors
de la rédaction de ce rapport.
3. Mohamed Bouhamed - Rapport de stage – 1ére année génie Informatique - Année
2014/2015
3
4. Mohamed Bouhamed - Rapport de stage – 1ére année génie Informatique - Année
2014/2015
4
Table des matières
CHAPITRE 1 : Introduction....................................................................................................................... 5
CHAPITRE 2 : L’entreprise........................................................................................................................ 6
2.1 Présentation de l’entreprise et de ces membres......................................................................... 6
2.2 Activités de l’entreprise............................................................................................................. 6
CHAPITRE 3 : Objectifs et cahier des charges.......................................................................................... 7
3.1 Etude de existant ........................................................................................................................... 7
3.1.1 Présentation l’existant ............................................................................................................ 7
3.1.2 Critiques de l’existant............................................................................................................. 8
3.2 Objectifs du site (analyse des besoins).......................................................................................... 8
3.3 Proposition..................................................................................................................................... 8
3.3.1 Cahier des charges.................................................................................................................. 8
3.4 Organigramme............................................................................................................................... 9
CHAPITRE 4 : Réalisation ....................................................................................................................... 10
4.1. L’environnement de développement .......................................................................................... 10
4.1.1. L’environnement matériel :................................................................................................. 10
4.1.2. Environnement Logiciel :........................................................................................................ 10
4.2. Logiciels utilisés :....................................................................................................................... 10
4.2.1. Adobe Dreamweaver :......................................................................................................... 10
4.2.2. Adobe flash : ........................................................................................................................... 11
4.2.3. Excel:....................................................................................................................................... 12
4.3. Les principales interfaces graphiques :....................................................................................... 13
4.3.1. Interface internaute :............................................................................................................ 13
CHAPITRE 5 : Bilan et conclusion........................................................................................................... 16
5.1 Bilan professionnel...................................................................................................................... 16
5.2 Bilan personnel............................................................................................................................ 16
5.3 Conclusion................................................................................................................................... 16
CHAPITRE 6 : Bibliographie.................................................................................................................... 17
Table des Figures
Figure 1. Index ancien site web..................................................................................................................7
Figure 2.Organigramme du site .................................................................................................................9
Figure 3. Présentation ................................................................................................................................13
Figure 4. Détaille société............................................................................................................................14
Figure 5.Resource humain de la société..............................................................................................14
Figure 6.Page contact..................................................................................................................................15
5. Mohamed Bouhamed - Rapport de stage – 1ére année génie Informatique - Année
2014/2015
5
CHAPITRE 1 : Introduction
Ce rapport est le témoin de dix semaines de stage au sein de la société Aicha
de Bâtiment sous la tutelle de Monsieur David Salem, président de la
société, dans le cadre d’une première année d’Ingénieur en génie
Informatique. L’objectif de ce stage était de développer un site web en flash
qui représente L’image de la société d’une façon moderne et la mise en
place d’un système informatique pour gérer chaque chantier. En effet, Sabat
étant en construction, les responsables de la société avaient besoin d’un
nouveau site qui serait mis en place peu avant la nouvelle année. Un site
provisoire est déjà en ligne pour informer les visiteurs de la construction
d’un nouveau site. La mission consistait à analyser les besoins de la société,
ensuite de concevoir et développer un site internet répondant à ces critères
et enfin, de former un système provisoire pour gérer les projets de la société
d’une façon un informatique. Ce rapport est composé de cinq parties. La
première porte sur une présentation de la société sabat. La seconde présente
les objectifs et le cahier des charges du nouveau site web. La troisième
expose le choix de l’outil utilisé pour concevoir développé notre site. La
cinquième présente le nouveau site web. Enfin, la sixième partie est
composée du bilan de ce stage, aussi bien personnel que professionnel, et de
la conclusion de ce rapport.
6. Mohamed Bouhamed - Rapport de stage – 1ére année génie Informatique - Année
2014/2015
6
CHAPITRE 2 : L’entreprise
2.1 Présentation de l’entreprise et de ces membres
<<Sabat >> Société Aicha de Bâtiment est une entreprise tunisienne
d’effectuer dans plusieurs domaines d’activité concernés par secteur du
bâtiment et travaux public (BTP), comme le génie civil, la construction et la
réhabilitation des bâtiments, la construction des divers réseaux, la
construction des œuvres d’arts et altération urbain.
2.2 Activités de l’entreprise
L’activité principale de Sabat est le BPC, la mise en place des réseaux et
fibre optique surtout pour les grandes entreprises comme TT, l’installation
des stations d’antenne de Tv et entreprise de télécommunication (orange).
7. Mohamed Bouhamed - Rapport de stage – 1ére année génie Informatique - Année
2014/2015
7
CHAPITRE 3 : Objectifs et cahier des charges
3.1 Etude de existant
3.1.1 Présentation l’existant
Voici tout d’abord, une capture du site que l’on peut auparavant visiter à l’adresse :
www.sabat.tn
Figure 1. Index ancien site web
Ce site a été réalisé par un membre de la société sur la base du volontariat avec le logiciel
Front page. Son but est d’informer les internautes sur les projets de la société et leur contact,
il est donc provisoire. Son contenu est essentiellement axé sur l’avancée des travaux et sur la
présentation des nouveaux Projets. Au niveau programmation, il s’agit d’un site statique
composé de 5 pages, d’un menu. Aucune séparation entre la forme et le contenu n’a été faite.
Deux liens permettent aux internautes d’envoyer un courrier électronique aux responsables de
la société.
8. Mohamed Bouhamed - Rapport de stage – 1ére année génie Informatique - Année
2014/2015
8
3.1.2 Critiques de l’existant
Le site existant Sabat présente plusieurs lacunes. Tout d’abord, le site ne s’affiche pas
correctement sur tous les navigateurs. En effet, si les internautes utilisent un autre navigateur
qu’Internet Explorer, celui qui a été utilisé pour créer le site, ils ne peuvent pas accéder
correctement aux informations, par exemple, le site étant constitué essentiellement d’images,
il n’est pas exploité correctement par les moteurs de recherche. Le design du site ne répond
Plus aux attentes des membres de la société. En effet, les couleurs ne sont pas en adéquation
avec les couleurs choisies. Etant donné qu’aucune déférence n’a été faite entre le contenu et le
style du site, le style n’est pas uniformisé et n’est pas correct. Par exemple, le site n’est pas
centré et le fait que le fond soit une image fixe de petite longueur suggéré un contenu
minimaliste. Aucune recherche interne n’est possible sur le contenu du site.
3.2 Objectifs du site (analyse des besoins)
Les responsables de la société ont exprimé leurs besoins et leurs souhaits concernant le
nouveau site lors d’une réunion. Cette dernière ´était axée autour de trois questions : Quelles
informations doivent figurer sur le site? Quelles fonctionnalités désirez-vous voir apparaître
sur le site? A quelles caractéristiques de style doit répondre le site? Des réponses formulées
lors de cette réunion est n´e un cahier des charges.
3.3 Proposition
3.3.1 Cahier des charges
Plusieurs objectifs pour le nouveau site internet sabat ont ´été mis en avant : Le site devra
s’afficher de la même façon sur tous les navigateurs, pas de restrictions selon les navigateurs
pouvant ˆêtre utilisés. Le contenu du site devra ˆêtre centre dans la fenêtre de navigation.
Les couleurs du site devront être en harmonie avec le logo de sabat qui est le bleu ciel, noir et
le blanc. Une photo du parcours devra contenir des zones cliquables pour chaque trou. Chaque
lien ainsi crée devra avoir pour cible une seconde page avec l’explication du trou. Un lien
hypertexte permettra aux visiteurs de se rendre sur le page f-b de sabat. Le site devra figurer
dans les premiers liens dans un moteur de recherche lorsque l’on tape : sabat, promoteur
immobilier, Bâtiment, Ste aicha de bâtiment, bâtiment public, Tunisie. Des galeries photos
9. Mohamed Bouhamed - Rapport de stage – 1ére année génie Informatique - Année
2014/2015
9
facilement manipulé seront intégrées au site pour chaque projet. Les visiteurs devront
pouvoir envoyer facilement un mail aux responsables du sabat à partir du site. Ils pourront
´également faire une recherche sur le contenu du site. Le site doive être animé et régie d’une
façon dynamique. Pour que les internautes puissent disposer de toutes les informations
concernant sabat, liste de tous les projets et toutes les activités sabat devra être mis en place
sur le site.
Au cours du stage, la société m’a demandé quelques nouvelles fonctionnalités qui vont t’être
réalisé à long terme.
3.4 Organigramme
Les responsables de la société ont accepté le cahier des charges, présente précédemment.
Voici l’organigramme réalisé par la suite avec leur aide.
Figure 2.Organigramme du site
Accueil Présentation Bâtiment Solutions et R.H
rrR.HR.H
Contact
Adresse, Tel
local et Email
Equipe et
R.H
Tous projets
+ galerie
Toute info
Sur sabat
Plus +Info
sur société
10. Mohamed Bouhamed - Rapport de stage – 1ére année génie Informatique - Année
2014/2015
10
CHAPITRE 4 : Réalisation
4.1. L’environnement de développement
4.1.1. L’environnement matériel :
Pour développer cette application j’ai utilisé une machines, configurées comme suit :
Dell inspirons N5110
Go.
640 Go.
i7 2.4 GHz.
pro 8.1
4.1.2. Environnement Logiciel :
Lors du développement de cette application, j’ai utilisé, les outils logiciels suivants:
.
Je vais présenter ces différents logiciels dans la section suivante :
4.2. Logiciels utilisés :
4.2.1. Adobe Dreamweaver :
Adobe Dreamweaver (anciennement Macromedia Dreamweaver) est un éditeur du site web
de type WYSIWYG. Il fut l'un des premiers éditeurs HTML de type « tel affichage, tel
résultat », mais également l'un des premiers à intégrer un gestionnaire du site (Cyber Studio
Go Live étant le premier). Ces innovations l'imposèrent rapidement comme l'un des
principaux éditeurs du site web, aussi bien utilisable par le néophyte que par le professionnel.
Dreamweaver offre deux modes de conception par son menu affichage. L'utilisateur peut
choisir entre un mode création permettant d'effectuer la mise en page directement à l'aide
d'outils simples, comparables à un logiciel de traitement de texte (insertion de tableau,
d'image, etc.). Il est également possible d'afficher et de modifier directement le code (HTML
Ou autre) qui compose la page. On peut passer très facilement d'un mode d'affichage à l'autre,
11. Mohamed Bouhamed - Rapport de stage – 1ére année génie Informatique - Année
2014/2015
11
ou opter pour un affichage mixte. Cette dernière option est particulièrement intéressante pour
les débutants qui, à terme, souhaitent se familiariser avec le langage HTML. Il a évolué avec
les technologies de l'internet. Il offre, aujourd'hui, la possibilité de concevoir des feuilles de
style. Les liaisons avec des bases de données ont également été améliorées ainsi que le
chargement des fichiers sur les serveurs d'hébergement. Il propose, en outre, l'utilisation de
modèles imbriqués de pages web, selon un format propriétaire.
Depuis la version MX, il peut être utilisé avec des langages web dynamiques (ASP, PHP) à
l'aide d'outils relativement simples d'utilisation. Il permet ainsi de développer des applications
dynamiques sans connaissance préalable des langages de programmation. Dreamweaver est
édité par la société Adobe Systems et fait partie de la suite de développement Studio 8 de
l'éditeur, qui comprend Macromedia Flash, Macromedia Fireworks (édition graphique) et
Macromedia Coldfusion (serveur). Macromedia, qui éditait Dreamweaver auparavant, a été
racheté par Adobe en décembre 2005.
4.2.2. Adobe flash :
Adobe flash ou simplement flash, se référé à adobe flash Player est un logiciel multimédia
utilisé pour créer le contenu de Adobe Engagement Platform (tel qu’une application Internet,
jeux ou vidéos). Flash Player, développé et distribué par Macromedia (racheté en 2005 par
Adobe Systems), est une application client fonctionnant sur la plupart des navigateurs Web.
Ce logiciel permet la création de graphiques vectoriels et de bitmap des navigateurs Web. Ce
logiciel permet la création de graphiques vectoriels et de bitmap directionnels audio et vidéo.
Pour être bref, Adobe Flash est un environnement de développement intégré (IDE), une
machine virtuelle utilisée par un Player Flash ou serveur flash pour lire les fichiers Flash.
Mais, le terme « Flash » peut se référer à un lecteur, à un environnement ou à un fichier
d’applications.
Depuis son lancement en 1996, la technologie Flash est devenue une des méthodes les plus
populaires pour ajouter des animations et des objets interactifs à une page web; de nombreux
logiciels de création et Opération Système sont capables de créer ou d’afficher du Flash. Qui
est généralement utilisé pour créer des animations, des publicités ou des jeux vidéo. Il permet
aussi d'intégrer de la vidéo en streaming dans une page jusqu'au développement d'applications
Rich Media.
12. Mohamed Bouhamed - Rapport de stage – 1ére année génie Informatique - Année
2014/2015
12
Les fichiers Flash, généralement appelés « animation Flash » portent l'extension swf. Ils
peuvent être inclus dans une page web et lus par le plugin Flash du navigateur, ou bien
interprétés indépendamment dans le lecteur Flash Player.
4.2.3. Excel:
Excel est un programme informatique développé et distribué par Microsoft Corp. Il s’agit
d’un logiciel qui permet de réaliser des tâches comptables et financières grâce à ses
applications pour créer et travailler avec des feuilles de calcul.
La première incursion de Microsoft aves les feuilles de calcul (permettant de manipuler des
données numériques en tableaux formés par l’union de lignes et colonnes) a eu lieu en 1982,
avec la présentation de Multi plan. C’est trois ans plus tard que la première version d’Excel
est arrivée sur le marché.
13. Mohamed Bouhamed - Rapport de stage – 1ére année génie Informatique - Année
2014/2015
13
4.3. Les principales interfaces graphiques :
Cette partie permet de me mettre dans les conditions réelles d’utilisation de l’application.
4.3.1. Interface internaute :
Dans les paragraphes qui suivent, je vais exposer différentes situations que peut rencontrer le
visiteur du site.
- Accueil : Dans cette page l’internaute peut prendre une idée générale sur la société.
Figure 3. Présentation
14. Mohamed Bouhamed - Rapport de stage – 1ére année génie Informatique - Année
2014/2015
14
- Présentation : Dans cette page l’internaute peut prendre une idée détaillé sur la société.
Figure 4. Détaille société
- R.H : Dans cette page l’internaute peut prendre une idée détaillé sur les ressources
humaines de la société.
Figure 5.Resource humain de la société
15. Mohamed Bouhamed - Rapport de stage – 1ére année génie Informatique - Année
2014/2015
15
- Contact : Dans cette page l’internaute peut prendre une idée détaillé sur local de la société
et toute information de contact.
Figure 6.Page contact
16. Mohamed Bouhamed - Rapport de stage – 1ére année génie Informatique - Année
2014/2015
16
CHAPITRE 5 : Bilan et conclusion
5.1 Bilan professionnel
Ce stage m’apporte une nouvelle expérience professionnelle enrichissante. Grace à ces six
semaines passées au sein de la société sabat, j’ai acquis de nouvelles connaissances autant sur
le milieu de l’entreprise que sur les langages informatiques. Le stage dans un milieu
professionnel est constructif. En effet, j’ai pu développer mes compétences professionnelles
grâce à l’environnement dans lequel j’ai effectué mon stage. J’ai eu la charge de la conception
d’un site, du cahier des charges à la réalisation tout en respectant les éléments et les souhaits
formulés par les responsables de la société. Tous les objectifs du cahier des charges ont été
respectés. J’ai pu développer mes connaissances des langages PHP, et script flash.
5.2 Bilan personnel
Tout comme au niveau professionnel, ce stage m’a aidé à développer mes connaissances
personnelles et m’a fait découvrir de nouveaux outils. Ces dix semaines m’ont permis de
réaliser un site web et de maitriser flash. Il s’agit d’un outil que je ne connaissais que de nom
et que j’ai appris à utiliser lors de ce stage.
J’ai aussi pu découvrir la vie au sein d’une entreprise. Le fait de se référer a` un tuteur
constitue une aide dont je n’aurais pu me passer et s’adresser à un supérieur hiérarchique en
construisant une explication et une argumentation a été instructif.
5.3 Conclusion
En conclusion, sabat dispose maintenant d’un site fonctionnel répondant a` toutes leurs
attentes. Actuellement, ce site est en ligne. En effet, il souhaite mettre en place d’autre
fonctionnalités le plutôt possible. Ce stage ma apporté de nouvelles connaissances et à
augmenter mes capacités de compréhensions. En effet, la principale difficulté de ce stage a
été de réunir les besoins des quatre responsables de la société et de les unifier sans qu’aucun
ne soit éliminé.
