Note de Synthèse -...

Note de Synthèse 1ère Année BTS IG Stagiaire : Sou, Tieng, Jean-Pierre Classe : BTS IG 1(A) Professeur : Mme Thomas Nom Ecole : Lycée Maximilien Sorre (94) Société : Vidati Immo Responsable : Franck Parienti Tuteur : Eric Boisseau Période : 17/05 au 2/07/10 (7semaines)

VIDATI.fr Agence immobilière

Groupe FNAIM

Sou, Tieng Jean-Pierre Stage : VIDATI IMMO - Note de synthèse

BTS : Informatique de Gestion 2

I. INTRODUCTION 3

II. VIDATI IMMO 4

A) UNE SOCIETE IMMOBILIERE 4 B) GEO-LOCALISATION & GESTION DES RESSOURCES HUMAINE 4

III. ENVIRONNEMENT DE TRAVAIL 5

IV. GESTION DE PROJET N° 1 : MAINTENANCE WEB « VIDATI.FR » 6

A) THEME DU PROJET & OBJECTIF 6 B) ANALYSE DU PROBLEME & CONCEPTION 7 C) DEMARCHE DE RESOLUTION 11 D) BILAN 17

V. GESTION DE PROJET N°2 : CONCEPTION WEB « IMMOBILIER ET CREDIT » AVEC SYMFONY 18

A) THEME ET OBJECTIF 18 B) LE FRAMEWORK : SYMFONY 19

VI. CONCLUSION GENERALE 20

Table des matières



I. Introduction

Afin de valider ma première année de BTS Informatique de Gestion au Lycée Maximilien Sorre de

Cachan (94), chaque étudiant doit effectuer un stage d’au moins 6 semaines en entreprise. Ce stage est une étape importante non seulement du point de vue de la formation, mais aussi d’un point de vue personnel. La vie en entreprise est en effet nécessaire à la mise en pratique de l’enseignement reçu tout au long de la formation. Cette note de synthèse présente l’ensemble des projets que j’ai effectués au cours de mon stage au sein de Vidati en tant que développeur. Elle s’articule sur deux axes principaux : La maintenance web et conception web via un framework. Tout d’abord, je commencerai par une présentation de la société Vidati et la gestion des deux projets auxquels j’ai participé durant la période de stage. Puis, notamment une conclusion générale portée sur l’ensemble de cette étude.



II. Vidati IMMO

a) Une société immobilière

Vidati, SSII en consulting sécurité des systèmes d’information, a été crée en 2001 par Franck Parienti.

En 2007, elle devient une agence immobilière et obtient la carte professionnelle de Transaction et Gestion immobilière. Elle propose du conseil en immobilier résidentiel et d’entreprise. Elle ouvre une agence à Paris centre, à Cannes et à Miami. Lors d’un déplacement aux USA, elle découvre des sites Web d’estimation immobilière en ligne « Trulia, Zillow » et des sites d’annonce telle que Craiglist générant 5 milliards de pages vues par mois. En 2008, en complément des agences immobilières elle utilise une maison comme Craiglist pour créer le réseau social leader de l’immobilier. Elle comprend un groupe d’agences immobilières du réseau « Arthur l’optimiste » et propose à ses clients des services tels que : La transaction immobilière L’expertise immobilière Le courtage en prêt immobilier La gestion locative

b) Géo-localisation & Gestion des Ressources Humaine

Ses activités s’étendent sur 3 zones géographiques en particulier : Paris et l’Ile de France Cannes Miami

La société se concentre essentiellement sur l’immobilier de standing, l’immobilier d’entreprise et l’investissement locatif. Organigramme :

Equipe Informatique

Equipe de Gestion des Ressources Humaine

Equipe Commerciale

Stagiaire(s) Développeur

Franck Parienti Dirigeant

Eric Boisseau Concepteur Développeur Tuteur Stage

Jérôme Pariente Directeur Marketing

Stagiaire(s)



III. Environnement de Travail

Le lieu du stage s’est déroulé dans l’une des agences de Vidati, qui est situé à Chennevières-sur-Marne

(94). Comme l’indique l’organigramme de l’entreprise (page 2), parmi les différentes équipes, j’occupais le secteur informatique : Développement, administration et système d’information sous la responsabilité de M. Franck Parienti et de la tutelle de M. Eric Boisseau, salarié tenant le poste de chef de projet et chargée de s’occuper de la formation des différents stagiaire. VIDATI dispose d’un chef de projet et de nombreux stagiaires, tous issus de formations différentes : Assistant Manager, Informatique de Gestion, Commerciale, Informatique et Réseaux pour l’Industrie et Services techniques. Afin de pouvoir être dans les conditions de travails convenables ainsi qu’avoir une bonne cohérence de travail avec toute l’équipe. Chaque informaticien doit de se disposer d’un ordinateur portable avec les différents logiciels de programmation et de bureautique mis à jour :

Microsoft Office 2007-2010 / Open Office Traitement de texte, rapport d’activité, compte rendu, note de synthèse

Adobe Photoshop / Dreamweaver Développement code, créations bannières, style, design

NetBeans / Notepad++ Développement code

Wamp Server – Pear & Symfony Plate-forme & Traitement PHP

Filezilla Transfert et partage de fichier (ftp)

Configuration Internet Haut Debit (Wifi) Documentation, recherche et transfert de fichier

Système d’exploitation Windows 7 Configuration des systèmes

De plus il y a de nombreux tutoriaux concernant l’utilisation, l’installation des logiciels et des explications sur les langages de programmation à traiter Ensuite, le chef de projet, M. Boisseau ayant un master en technologie web 2.0, constitue différentes équipe de développeurs (3-4 personnes) afin d’assigner différents projets, selon la formation et les compétences acquises. Afin de pouvoir tirer profit de cette expérience professionnelle, les projets assignés requièrent les compétences des deux années de BTS IG. Mon équipe se compose de quatre stagiaires (tous issues de formations différentes), et changent en fonction du temps et des besoins du tuteur: Développeurs (3) : M. Bibombe, M. Gaul et moi-même (M. Sou) Rédactrice (1) : Melle Nabal Aucune contrainte n’a été donnée lors de l’assignation des projets. Le stagiaire doit présenter une grande autonomie. Par la suite, nous avons déterminé le rôle de chacun dans l’équipe, en désignant également un chef de projet. Chef de projet : M. Bibombe – Celui-ci étant désigné par son expérience et par M. Boisseau Techniques mises en œuvre : Langage xhtml, html, CSS, JavaScripts, PHP



IV. Gestion de PROJET n° 1 : Maintenance Web « Vidati.fr »

a) Thème du projet & Objectif

Vidati présente de nombreux site internet, mis à disposition pour les internautes souhaitant

effectuer des recherches immobilières. Le thème du projet de mon équipe était la maintenance de l’un de ses sites : www.vidati.fr, le site principal à l’entreprise. Cette maintenance vise à maintenir et rétablir le site dans un état spécifié selon M. Boisseau et M. Parienti afin que celui-ci soit en mesure d’assurer les fonctionnalités nécessaires aux besoins de M. Parienti. Une maintenance corrective, adaptative et évolutive ont été nécessaires à ce projet, ce qui a permis de déterminer les objectifs principaux de ce projet :

Correction des défauts de fonctionnements, non-conformité des navigateurs Adapter le site afin qu’il puisse donner un aspect récent auprès des clients Enrichir le contenu du site d’informations et de modules supplémentaires

Cela nous a permis d’établir une liste de tâches sur le fonctionnement du site à maintenir. La

répartition des tâches s’est effectuée en fonction des compétences des personnes. De plus, au cours de l’étude, chacun du groupe s’entraidait afin de pouvoir acquérir de nouvelles notions. Version de Base au 17/05/10 En effectuant une observation de la structure du site, la répartition des tâches s’est déterminée selon le nombre de rubriques et d’onglets du site Cette maintenance devra apporter une rénovation sur l’ensemble du site : Style, structure, imagerie, contenu d’informations, modules et la gestion des dossiers du site. Voici l’ensemble des objectifs à remplir pour cette maintenance ainsi que la répartition des tâches :

Timothée BIBOMBE Chef de projet - Développeur

Maxime GAUL Développeur

Tieng, Jean-Pierre SOU Développeur

Mavreen NABAL Rédactrice - Recherche de contenu /référencement

Intégration des pages – Corrections des liens

Modification du CSS (structure)

Correction des images, design, langues

Rédiger un contenu d’informations mis à jour

Nettoyages des codes (commentaires, disposition des balises…) Référencer le site

Flux RSS (Rubriques : News / Podcast) Redirection des formulaires

Conception d’une structure de module

Correction de l’encodage d’écriture des lignes de code Recherche de documents immobiliers pour les clients

Ajout de JavaScripts

Mise en ligne Création de module : Gérance Center

Correction des pages de la version chinoise, anglaise et russe



b) Analyse du problème & Conception

L’ensemble du problème observé sur le site de vidati.fr concerne le contenu de celui-ci. En effet, la version datant du 17/05/10 (début du stage) présente de nombreuses fautes d’encodages sur les caractères spéciaux, (utf8 et iso). La structure avait un mauvaise placement de marge et donc laissé à l’écran un espace vide inutile, ce qui donne un aspect du site peu complet. De plus le contenu des pages était obsolète, M. Parienti, responsable de la société souhaitait mettre à jour ses informations, en les modifiant et en ajoutant de nouvelles rubriques. Afin de pouvoir proposer une nouvelle évolution du site, une maintenance corrective et évolutive ont eu lieu. La maintenance adaptative s’est effectuée en fonction des besoins futurs de M. Parienti. (En rajoutant un module de documentation). Cette analyse présente les problèmes généraux du site de Vidati. Après avoir répartis les rubriques à corriger par personne du projet, mon étude s’est portée dans un premier temps sur les rubriques déjà existantes.

Mes rubriques étudiées (française et anglaise)

Accueil (index) Immobilier Résidentiel Immobilier Neuf Immobilier d’entreprise Crédit immobilier Saisie de banques à Miami Alerte Email Expertises immobilières / Prix

d’expertises

Chaque rubriques possèdent toutes de nombreuses informations cependant elles sont toutes « entassés » et collés à la structure du site, avec des sauts de ligne irréguliers. En étudiant leurs codes, on constate (sur l’image ci-dessous : crédit immobilier.php) qu’il y a aucune indentation de code, avec peu de commentaires pour la compréhension des codes.



Ceci est un problème assez complexe pour notre groupe car il faut nettoyer et effectuer une modification au script et lignes. Il y a eu de nombreuses balises à supprimer pour rendre les pages plus propres dans les codes sources et mieux informer sur l’utilisation de script pour la compréhension des futures personnes qui s’occuperont du site. De plus, le site possédait un problème majeur : Aucune Base De Données. Tous le contenu était écris en dur, par le HTML sur les pages. En sachant que le site possède un catalogue présentant les immobiliers (catalogue.php), la gestion des informations était assez difficile à manipuler. Cela donnait alors un grand nombre de fichier dans le dossier, au minimum 250. Ce qui aurait pu être fortement réduit grâce à une éventuelle base de données, qui aurait permis de stocker les informations et faciliter l’insertion de nouvelles mises à jour. M. Parienti souhaitait rajouter du contenu et un module permettant aux internautes d’effectuer une recherche de documentation afin de pouvoir gérer leurs biens gratuitement. L’ajout de contenu étant plus conséquent aux rubriques, cela a nécessité de créer des scripts en JavaScripts afin de pouvoir donner une meilleur lecture aux internautes et rendre le site plus clair, esthétique et dynamique. Voici la conception que donneront les scripts créé à la navigation des nouveaux contenus :

Cacher des paragraphes sous forme d’ascenseur et afficher un autre pour le lecteur

Changer de pages ayant le même thème via des onglets par liste déroulante

Cliquez ici pour voir la suite

Déroule la suite en dessous

Cliquez ici pour voir la suite

Déroule la suite en dessous en cachant celle ouverte au dessus

Affichage du contenu des pages

Liste déroulante avec choix des titres de pages



Une nouvelle interface était nécessaire pour créer un module de « Gestion de biens ». Il sera gérer

par moi-même (M. Sou, Tieng), Maxime Gaul et Mavreen Nabal. Au fur et à mesure de l’avancement du projet, M. Parienti souhaitait rajouter une nouvelle rubrique avec un nouveau contenu afin que les clients puissent gérer leurs biens en ayant à leur disposition une documentation pour les locataires et les propriétaires. Concernant le module, il devra être mis en avant, donnant un aspect dynamique et attractif. De plus il doit pouvoir donner de nombreuses informations et permettre d’avoir une documentation téléchargeable. Le choix des couleurs, des images… devra être rigoureux afin d’adapter aux couleurs de Vidati : Orange, noir, bleu.

Le module disposera de deux à trois rubriques : Locataire, Propriétaire et Assurance. Et chaque

partie seront représentés par des images et expliqués clairement aux clients. Il y aura deux possibilités, concernant la création du module, soit :

- Créer une nouvelle interface avec des liens avec le site de vidati.fr - Adapter le module avec le site de Vidati

Voici les deux maquettes de créations possibles : Nouvelle interface & structure du module

Module intégré au site de Vidati

Module « Gestions des biens »

Contenu des rubriques avec une

documentation téléchargeable et une présentation claire

Accueil

Locataire

Propriétaire

Vidati.fr

Bouton des langues française et anglaise

Fond du site représenté en fonction de rubriques visitées

Bouton retournant sur le site : www.vidati.fr

Bannière fixe et propre à ce module

Zone de contenu de la page d’accueil du module, qui présente l’introduction

de la gestion des biens

Insertion d’une nouvelle rubrique « Gérer vos biens » mis en avant d’une couleur bleu Images permettant

d’accéder aux rubriques locataires, propriétaires et assurances



Le choix de la maquette à créer sera choisi en fonction des avantages et inconvénients que cela

peut apporter. Bien qu’ils apportent le même contenu, le choix de la maquette doit être réfléchi sur la suite. En effet, il doit prendre compte de ce qu’il peut apporter de plus aux sites ainsi que les éventuelles perspectives d’évolutions pour la suite.

J’ai effectué une analyse sur les différents avantages et inconvénients que peut donner ses

maquettes : Avantages Inconvénients

1. Nouvelle Interface

Possibilité de rajouter des rubriques sans encombrer le site

Innovation d’un site annexe de Vidati

Présentation plus claire donnant seulement les informations précises aux clients

Trop de pages à créer Fichiers plus lourd

(dossiers, images…etc.) Inutile avec si peu

d’informations (pour le moment)

2. Intégration du module

Naviguer facilement sur les autres rubriques du site

Sera plus facile à refaire en version anglaise

S’adapter au code et structure du site actuel

Rajouter du contenu serait difficile et entasserait les informations et le nombre de sous-dossiers

Aucune Base de Données pour stocker les fichiers et informations

Ce sera finalement, pour le moment, la deuxième maquette qui sera retenue, au vue du contenu

que cela apporte. En effet, le contenu étant minime, il n’est pas utile d’effectuer une nouvelle interface et structure. De plus, cela accorderait beaucoup plus de temps et un besoin d’espace afin de développer toutes les pages. Cependant l’idée d’innovation du site ou de conceptualiser une nouvelle interface pour Vidati ou les prochains modules, restera une éventuelle perspective d’évolution à établir pour les prochaines personnes qui effectueront la maintenance du site.



c) Démarche de résolution

Tout d’abord, avant d’entamer les différentes tâches à modifier et créer, j’ai commencé à étudier les

logiciels : NetBeans et WampServer afin d’effectuer plus aisément mon projet. Ayant seulement les connaissances sur Notepad++ et EasyPHP, j’ai dû m’adapter aux logiciels informatiques de la société. Cela me permet de mettre en concordance mon travail et de faciliter la communication avec l’équipe en nous entraidant sur la compréhension des fonctions que proposent ses logiciels. De toute évidence, NetBeans et WampServer, sont les plus utilisés dans le monde professionnel et mieux adapté à la gestion de projet. NetBeans Beta 6.9 & Notepad++ WampServer 2.0 Pour ma part, j’ai beaucoup plus développé avec Notepad++. NetBeans est un logiciel qui rend la gestion de projet beaucoup plus facile et dispose plus de fonctions que Notepad++ mais, ne voulant pas donner un retard à l’équipe et me sentant plus à l’aise avec Notepad, j’ai créé et modifié les pages web avec ce logiciel afin d’éviter une fausse manipulation avec NetBeans. Ensuite, parmi les tâches qui m’ont été attribuées, je devais m’occuper de la correction des images (ils n’étaient pas adapter aux bonnes rubriques ou bien ils étaient obsolètes) et créer de nouvelle image et bannière pour le site. Pour cela, j’utilise le logiciel : Adobe Photoshop CS4. Adobe Photoshop CS4

Photoshop est un logiciel de retouche, de traitement et de dessin assisté par ordinateur édité par Adobe. Il est principalement utilisé pour le traitement de photographies numériques, mais sert également à la création d’images.

Les images sont constituées d’une grille de points appelés pixels. L’intérêt de ces images est de reproduire des graduations subtiles de couleurs.



N’ayant jamais utilisé (ou presque) Photoshop, l’aide de mon collègue M. Valentin Mascarenhas (il ne fait

pas partie de l’équipe mais s’occupe d’un autre projet de la société) m’a permis de facilement comprendre les différentes fonctions de Photoshop et de retoucher les images souhaitées par l’entreprise. Enfin, après avoir été initié aux logiciels, j’ai commencé à traiter les tâches de développement et proposer des solutions innovantes tout en respectant les besoins de l’entreprise.

Solution à la maintenance : Gestion des fichiers & du contenu : Sans Base de données

Le contenu d’informations que possède le site est assez conséquent. Il possède au moins 250 à 300

fichiers tous entassé dans un seul dossier ce qui rendait la gestion des fichiers complexe à manipuler et compliquait la compréhension du code. De plus, chaque page est écrite en dur, donc pour insérer de nouvelle information ou mettre à jour, il est difficile pour des personnes n’ayant pas ou peu de connaissances en développement web de mettre à jour les informations. Alors la solution la mieux adaptée : La création d’une base de données pour intégrer les informations dedans et créer une « section administrateur » pour modifier, ajouter, supprimer des informations par un formulaire. Cependant, en ayant pris conseil avec le chef d’équipe et M. Boisseau, Il est recommandé de faire une base de données mais dans la situation dans laquelle nous sommes confronté avec le grand nombre d’informations déjà existantes et le temps que nous avons, nous nous contenterons d’effectuer plusieurs dossiers / sous-dossiers en arborescences pour gérer les fichiers, en séparant le contenu dans un dossier propre pour faciliter les mises à jour. Nous utiliserons des balises « include » pour les intégrer dans les pages en PHP.

Voici le schéma de l’arborescence des dossiers pour accéder au contenu : Cata : Tous les fichiers du catalogue immobilier en français Anglais : Toutes les pages en anglaises et un dossier « cata » Chinois : Toutes les pages en chinoises Russe : Toutes les pages en russes Propriétaire : Fichier Word et PDF à télécharger dans le module Locataire : Fichier Word et PDF à télécharger dans le module

VIDATI.fr

Contenu

Propriétaire

Images Js Latex SpryAssets UPLOAD

Fichier principaux en PHP, CSS, sans dossier et toutes

les langues mélangées

Anglais Cata Chinois Russe Téléchargement

Html

Locataire

Tout le contenu des pages en version

française



Les informations (le contenu) seront généralement enregistrées sous format HTML et parfois PHP et n’utilise que les balises de présentations : Balises Signification

<blockquote></blockquote> : Structurer les informations en laissant une marge <br/> : Saut de lignes <h1></h1>…<h2></h2>…Etc. : Titre de paragraphes selon la taille choisie <p> </p> : Insérer un paragraphe <a href= #></a> : Insérer un lien hypertexte <img src=# /> : Insérer une image <li> … <ul></ul><ul></ul> … </li> : Liste d’informations <table> <td></td></table> : Insérer un tableau <i></i> : Mettre en italique <u></u> : Souligner <b></b> : Mettre en gras <font face=# color= #></font> : Police et couleur du texte

Ainsi nous avons inclus les pages HTML (du dossier contenu) dans les fichiers principaux PHP :

Exemple : <? Php include ('contenu/immo_neuf.html') ;?> Encodage : ANSI & UTF-8

Le premier problème que l’on observe sur le site en ligne, de la version au 17/05/10 était l’encodage. Il

n’affichait aucun des caractères spéciaux (é, à, ê…) ni les caractères chinois et russes. Lors des essais en local avec Wamp, nous avons mis toutes les pages en UTF-8 pour afficher correctement toutes les pages. Cependant lors de la mise en ligne, le problème n’est pas corrigé entièrement. Sur Mozilla Firefox, il n’affiche pas les caractères chinois et russes. Contrairement à Google Chrome, tout marche. Ainsi nous avons mis toutes les pages en ANSI et les pages chinoises/russes en UTF-8.

Indentation & Commentaire

La lisibilité du code était assez difficile à comprendre au début. Pour cette tâche, nous avons dû

effectuer sur chaque page effectué une indentation.

L’indentation est l’action qui permet d’ajouter des caractères de tabulations ou d’espaces dans un fichier texte. Très souvent utilisée en programmation, elle rend le code source plus clair et plus lisible. La plupart des éditeurs de texte pour programmeurs prennent également en charge cette opération.

Sans indentation Avec Indentation

Sans essayer de distinguer ce qui est concrètement écrit sur les deux images, on distingue bien la différence de lisibilité des deux pages démontrées. De plus nous avons commenté les pages où la compréhension des scripts et des balises étaient utiles pour faciliter la compréhension des prochaines personnes qui s’occuperont de la maintenance : Exemple : <h3 class="ascenseur">Le Pass-Foncier</h3>  JavaScripts – Navigation des pages

Cacher des paragraphes sous forme d’ascenseur et afficher un autre pour le lecteur

<script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/ascenseur.js"></script>

On place ces syntaxes à l’intérieur des balises <head>…</head> dans les pages PHP où l’on va utiliser le script. On fait appelle aux deux fichiers JavaScripts « jquery » et « ascenseur ». « jquery.js » est une bibliothèque JavaScript déjà existante et permet de faire fonctionner notre fonction que l’on va créer. Si on ne le déclare pas, le script ascenseur ne marche pas.

Contenu du fichier : ascenseur.js avec commentaire

jQuery().ready(function() //Cette ligne de code vérifie si jQuery est bien chargée {

//Cette ligne sélectionne tout les éléments de la classe ascenseurs (donc les titres) ainsi que les éléments suivants (les div) et les cache.

$(".ascenseur").next("div").hide();

//Cette ligne permettra d'affiche le contenu de chaque titre $(".ascenseur").click(function()

{ if ($(this).next("div").is(":hidden"))

{ //si élément déjà visible ne pas faire l'animation

$(".ascenseur").next("div:visible").slideUp();//cache les autres div || attribut visible corrige les problèmes de décalages à la descente et remontée des div $(this).next("div").slideDown(); //Au pointage de l'élément avec "this" affiche le contenu de la div avec un effet d'ascenseur "slidedown"

}}) });

Ensuite nous allons déclarer les class « ascenseur » dans les fichiers où l’on veut permettre la possibilité de cacher du contenu. Exemple dans le fichier : contenu/credit_immo.html

Changer de pages ayant le même thème via des onglets par liste déroulante

On déclare le script que l’on veut faire entre les balises <head>…</head> dans les pages PHP où le script va être utilisé. Dans ce script on demande une condition avec « si ». Si la page de destination est bonne et sélectionné dans liste déroulante, on affiche la page. Sinon on affiche : « Onglet non valide ».

Par la suite on crée la liste déroulante en faisant appel à la fonction « Changeurl ». On peut la placer où l’on veut à l’intérieur du corps de la page : <body>…</body>.

<h3 class="ascenseur">Le Pass-Foncier</h3>  <div> <blockquote> <p> Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</p> </blockquote> </div>

<h3 class="ascenseur">Le prêt à taux à 0%</h3> <div> <blockquote> <p> Bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla bla</p> </blockquote> </div> […]

<script language="JavaScript"> //on ouvre la balise script function ChangeUrl(formulaire) { if (formulaire.ListeUrl.selectedIndex != 0) { location.href = formulaire.ListeUrl.options [formulaire.ListeUrl.selectedIndex].value; } else { alert('Onglet non valide'); } } </script>

 <FORM> <SELECT NAME="ListeUrl" SIZE="1" onChange="ChangeUrl(this.form)"> <OPTION SELECTED VALUE="">-Changer d'onglet - <OPTION VALUE="immobilier entreprise.php">Immobilier d'entreprise <OPTION VALUE="immobilier entreprise(2).php">Bails commerciaux <OPTION VALUE="immobilier entreprise(3).php">Les métiers </SELECT> </FORM>



Corrections des images

Illustrer son site avec des images, des bannières rend le site plus joli, plus attractif et permet de donner

l’envie aux clients de s’intéresser aux articles publiés. Afin d’exécuter cette démarche, nous avons recherché de nombreuses images récentes sur internet pour « décorer » le site ainsi qu’illustrer les rubriques et les nouveaux modules. De plus, avec le logiciel on a pu créer des images avec des effets de couleurs et retoucher quelque unes en modifiant l’écriture. Les pages en anglais, russe et chinoises avaient toute la même image en écriture française. Il a fallu alors corriger ça et l’adapter à leur langue. Exemple : Création d’image pour le bouton « Annonces » en français, anglais, chinois et russe dans l’index

Développement du module « Gérance Center »

On a intégré une nouvelle rubrique sur le menu gauche du site internet. On a choisi la couleur bleu afin

qu’il puisse bien être mis en avant et se différencier des autres rubriques qui sont toute de couleur orange. En accédant à cette rubrique qui s’intitule « Gérez gratuitement vos biens », elle permettra d’accéder à l’introduction du module puis le choix d’afficher soit une page destiné aux propriétaires soit aux locataires de l’immobilier. Ses deux pages auront une partie pour télécharger des documents Word/PDF. Ce module a nécessité la création de 3 pages PHP pour la présentation, 3 pages HTML pour le contenu, un dossier téléchargement avec les différents documents téléchargeables, plusieurs images et une bannière afin d’illustrer le site et orienter les clients vers la rubrique adapté à leur choix. Nous avons réutilisé la fonction d’ascenseur pour cacher les documents téléchargeables que l’on ne souhaite pas afficher. Puis nous avons disposé le site avec des <blockquote> pour donner une lisibilité claire aux lecteurs. Le module sera adapté que pour la version française.

Résultat adapté à la version finale du site au 25/06/10



d) Bilan de projet

Ce bilan est une partie intégrante du projet. Le bilan permet la valorisation des efforts accomplis en vu

de la réalisation du projet. Il a pour fonction de rétrocéder une partie du travail et des acquis du projet aux porteurs.

La maintenance du site web : www.vidati.fr a pu être aboutie au bout de 5 semaines et demi, à

compter de la date d’arrivée sur le lieu de stage, au 17 mai 2010. Chaque tâche a pu être réalisée correctement avec des solutions innovantes sur chaque critère (Design, technique, qualité de l’information). Plusieurs maquettes non présentes sur cette note de synthèse ont été créées, cependant plusieurs d’entres elles n’ont pas été pas retenues. Le choix des maquettes que l’on a faites se sont basées sur les choix du tuteur (M. Boisseau), le chef de projet (M. Bibombe) et plusieurs jeux d’essais en local afin de tester les scripts crées et modifiés. Au cours du projet une documentation a été traitée démontrant nos mises à jour, afin de pouvoir orienter les futures personnes qui s’occuperont de la maintenance et mettre en valeur nos compétences acquises au cours de notre formation.

La version corrigée, mise en ligne actuellement au 24 juin 2010, présente toutes les nouvelles

rubriques et fonctionnalités que propose le site actualisé dont le module « Gérance Center ». Le site garde la même structure que la version initiale car, parmi les besoins du responsable Vidati (M. Parienti), cela n’était pas un besoin primaire. Cependant il reste en perspectives d’évolution pour les futures maintenances. En effet, malgré la maintenance effectué et bien que tous les besoins souhaités ont été réalisés. Il reste une perspective d’évolution assez large qui donne de nombreuses tâches à pouvoir réalisées.

Le résultat de cette maintenance apporte donc au site :

Un site « propre » et compréhensible sans erreurs de caractères spéciaux Attractivité d’images Un contenu d’informations complet et bien structuré De nouveaux modules, rubriques Support de présentation pour les agents immobiliers Plus de « dynamisme » contrairement à la version précédente Gestion des fichiers/dossiers plus facile

Les perspectives d’évolutions :

Une structure du site innovante (CSS) Base de données stockant les informations Applications : Editeur de texte (mise à jour d’informations) Interface Administrateur Compte Client Intégrer du FLASH Mettre à jour les informations sur les versions russes/chinoises

Sur ce thème de projet, j’ai appris que ce qui peut paraitre simple à réaliser pose parfois certains

problèmes inattendus (s’adapter et comprendre les codes déjà existants, passage de la conception au code, passage du code sur un serveur local à un serveur hébergé), je pense donc avoir appris de mes erreurs et avoir mieux compris certains concepts.



V. Gestion de projet n°2 : Conception Web « immobilier et crédit » avec Symfony

a) Thème et objectif

Vidati détient également un autre site annexe à leur société : www.immobilieretcredit.com. C’est un

site qui permet d’effectuer des recherches de documentation et d’informations sur l’immobilier. Il dispose de nombreux formulaires afin de pouvoir effectuer une rechercher selon les critères du client. Mr Boisseau nous a assigné ce projet (basé sur la même équipe) d’effectuer une innovation du site en conceptualisant un nouveau site par l’intermédiaire du framework Symfony. Ceci est donc le thème du second projet : La Conception Web. Les développeurs sont libres sur la conception du site, concernant le choix des couleurs, de la structure, de la disposition des textes... Cependant il ne doit pas avoir le même thème que celui de base et nous devons pouvoir proposer une solution innovante à ce projet. Les objectifs sont : Conceptualiser et Développer un Site internet

Créer des formulaires de recherches

Structurer les informations

Encodage / Indentation

Utilisation de variable de sessions

Création d’une base de donnés avec une documentation du MCD/MRD

Disposer de Flux RSS

Version en langues anglaise et française Proposer une version innovante, dynamique et attractive S’initier et s’adapter à l’utilisation du framework Symfony

Version de base au 17/05/10

Cependant, ce projet n’a pas pu être abouti, dû à la contrainte de temps imposé. En effet, ce projet a été assigné une semaine et demi avant la fin de la date de la convention de stage. De plus, une nouvelle liste de tâches a été donnée pour le projet de vidati.fr (mise à jour). La conception et le développement de ce projet a donc été laissé de côté. Avec le temps restant, l’étude s’est portée sur l’installation et l’utilisation de Symfony.



b) Le Framework : Symfony

Un framework en PHP est une façon de travailler, d’organiser son travail et ses fichiers. Le framework

Symfony repose sur un modèle MVC (Modèle - Vue - Contrôleur) qui découpe donc de façon logique les actions et différent modules que compose le projet. Symfony se révèle être assez proche d’un langage objet tel que le Java ou le C++ (grâce au langage utilisé pour développer Symfony qui est le PHP 5). Il propose également un système de plugins assez simple, ce qui nous fournit une interface de programmation puissante et très pratique. En tant que framework, il facilite et accélère le développement de sites et d'applications Internet et Intranet.

L’installation de Symfony est assez complexe. Elle s’est fait via les commandes de Windows (DOS) en ayant un pré-requis d’installation : Pear. Une extension du PHP, qui possède une bibliothèque PHP. Cela donnera alors les commandes nécessaires à exécuter sur DOS pour l’installation de Symfony. Pour ma part, l’installation de Symfony a été assez difficile et la compréhension de l’utilité du framework est assez vague.

Aucune démarche conceptuelle, de développement ou de bilan n’ont pu être traitée.

Symfony utilise PHP5. Il dispose de nombreuses fonctionnalités :

Une séparation du code en trois couches, selon le modèle MVC, pour une plus grande maintenabilité et évolutivité

Un templating simple, basé sur PHP et des jeux de "helpers", ou fonctions additionnelles pour les gabarits...

Des performances optimisées et un système de cache pour garantir des temps de réponse optimums

Une gestion des url parlantes, qui permet de formater l'url d'une page indépendamment de sa position dans l'arborescence fonctionnelle

Un système de configuration en cascade qui utilise de façon extensive le langage YAML

Un générateur de back-office et un "démarreur de module"

Un support de l'internationalisation - Symfony est nativement multi-langue,

Une couche de mapping objet-relationnel (ORM) et une couche d'abstraction de données

Le support de l'AJAX

Une architecture extensible, permettant la création et l'utilisation de plugins

Pour développer avec Symfony, l'utilisation de la ligne de commande est obligatoire.

Symfony utilise une installation centralisée, permettant une mise à jour de tous les sites sur un même serveur en une seule opération.

Source : Wikipédia



VI. Conclusion Générale

Passionné d’informatique et à l’aise dans les outils informatique, je ne pensais pas me diriger dans la

voie d’informaticien, je souhaitais être dans le domaine de la distribution et du commerce. Je n’étais pas assez confiant dans ce que je voulais faire. Pour ma part, l’informaticien me donne le sentiment d’être isolé et avoir aucune approche avec le client. De nature motivée, dynamique, souriant et ambitieux, durant ce stage, j’ai pu ressentir toutes sortes de sentiments qui m’ont permis de répondre à mes doutes sur le métier d’informaticien.

Ce stage m’a permis d’acquérir une bonne expérience dans le monde professionnel précisément sur le domaine informatique. J’ai pu sortir avec de nombreuses connaissances que je n’avais pas auparavant, notamment sur les langages de programmation WEB ainsi que les différents Frameworks qui permettent de faciliter la création d’un site internet dynamique. Au début, je savais seulement utiliser Notepad++ et EasyPHP, mais au fur et à mesure, je devais m’adapter aux logiciels qui sont constamment utilisés dans les entreprises : NetBeans, WampServer…

Durant ce stage, j’ai pu avoir une vision détaillé de ce que mon métier pourrait être dans l’avenir : Informaticien & Développeur d’applications. En effet, mes différentes tâches ont beaucoup plus requis les compétences d’un développeur que celui d’un administrateur réseau. Sur cette fin de stage, j’ai pu avoir les armes nécessaires afin de continuer ma formation informatique. Les différents projets ont été réalisés par des groupes. Il a fallu gérer nous-mêmes le temps, les outils... Le travail collectif a été un bon point pour m’insérer dans ce milieu. J’ai su apporter ma motivation, mes compétences et mon sourire pour l’entreprise et donc avoir un résultat positif sur le projet en offrant un travail de qualité avec mon groupe. J’ai acquis des méthodes et une organisation de travaille qui me permet de gérer mon temps plus facilement. Concernant la gestion du temps sur les projets, j’estime que nous avons réussi à délivrer notre travail dans les temps sans avoir de problèmes majeurs.

Avec la communication échangée avec mes collègues, j’ai pu m’initier sur de nombreux logiciels dans lesquelles je voulais déjà apprendre à utiliser comme « Adobe Photoshop », « Windows Movie Maker », « NetBeans ». Cela me permettra de les utiliser pour des travaux personnels et professionnels. De plus j’ai pu également à mon tour transmettre mes connaissances en bureautique (office 2007) et en programmation WEB (html, php). De plus en utilisant mes compétences acquises au cours de ma première année de BTS, j’ai su qu’il fallait que je m’implique davantage dans mes travaux personnels afin de réussir dans mes études.

Travailler dans ce type d’entreprise correspond à ma formation actuelle mais je souhaite davantage

avoir de compétences informatique afin d’accéder à des entreprises telles que des SSII en développement d’applications ou des sociétés qui occupent un secteur plus large en informatique et en nouvelles technologies.

Au finale, cette expérience a été enrichissante pour moi, elle m’a permis de confirmer mon choix

d’orientation dans laquelle je me dirige, c'est-à-dire : Développeur. Et cela m’a donné la motivation d’atteindre un niveau bien plus haut en développement afin d’acquérir plus de notions et avoir une utilité polyvalente pour les entreprises.

Note de Synthèse -...

Documents

Transcript of Note de Synthèse -...