rapport stage

17
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

Upload: bouhamed-mohamed

Post on 03-Jul-2015

468 views

Category:

Education


3 download

DESCRIPTION

rapport de stage d'été création d'un site web en flash

TRANSCRIPT

Page 1: Rapport stage

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

Page 2: Rapport stage

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.

Page 3: Rapport stage

Mohamed Bouhamed - Rapport de stage – 1ére année génie Informatique - Année 2014/2015

3

Page 4: Rapport stage

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

Page 5: Rapport stage

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.

Page 6: Rapport stage

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).

Page 7: Rapport stage

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é.

Page 8: Rapport stage

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

Page 9: Rapport stage

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é

Page 10: Rapport stage

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,

Page 11: Rapport stage

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.

Page 12: Rapport stage

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é.

Page 13: Rapport stage

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

Page 14: Rapport stage

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é

Page 15: Rapport stage

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

Page 16: Rapport stage

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é.

Page 17: Rapport stage

Mohamed Bouhamed - Rapport de stage – 1ére année génie Informatique - Année 2014/2015

17

CHAPITRE 6 : Bibliographie

- http://codes-sources.commentcamarche.net/

- http://www.developpez.com/

- https://www.youtube.com/

- http://www.adobe.com/