Association UNIFORES 23, Rue du Cercler LIMOGES

Transcription

1 RAPPORT DE STAGE Association UNIFORES 23, Rue du Cercler LIMOGES LOHUES Théo BTS SIO 1 ère année Lycée suzanne valadon

2 Table des matières I. Présentation de l'entreprise...3 II. Description des besoins.4 III. Travaux réalisés.5 IV. Logiciels et matériels utilisés...6 V. Documentations...7

3 I. Présentation de l'entreprise La résidence Unifores a été créée en 1974, il s agit d un Établissement Hébergeant des Personnes Agées (EHPA) non médicalisé de type logement-foyer. Elle accueille des personnes valides de 60 ans et plus, seules ou en couple. A proximité du centre-ville, aisément accessible grâce aux transports en commun, la résidence se situe dans un quartier calme et verdoyant offrant un cadre de vie paisible et sécurisant à ses résidents. L organisme gestionnaire de la résidence, Unifores est une association loi 1901 à but non lucratif. Celle-ci est administrée par un conseil d Administration dont le président est M. Dominique Dutreix. De plus l association est dirigée par Mme Aragones, la directrice. La mission de la résidence est d accueillir des personnes valides âgées de 60 ans et plus souhaitant bénéficier à la fois des avantages d un logement individuel et de certains services collectifs afin de répondre à leurs besoins de sécurité, de socialisation, de confort et de prévention de la dépendance. Le personnel de la résidence participe à la coordination des actions en faveur d un maintien à domicile de qualité. La résidence est habilitée à recevoir des bénéficiaires de l allocation logement et des bénéficiaires de l allocation personnalisée d autonomie à domicile. Dans ses locaux, on décompte 79 appartements de 31m² pour ses résidents séniors et 2 chambres d hôtes disponibles pour les familles par exemple. Organigramme de l association UNIFORES

4 II. Description des besoins Nous avons pu établir un cahier des charges avec la directrice Mme Aragones, d'abord oralement, puis à l'écrit, nous avons retenu ensemble : - Besoin d'un site vitrine (publicité, diffusion de l'image de la résidence). - Permettre aux visiteurs de se procurer le livret d accueil de la résidence et de pouvoir le consulter en ligne sous forme.pdf. - Besoin de présentation, informations au sujet de l'association Unifores aux futurs visiteurs mais pas trop pour l inciter à prendre contact. - Possibilité de contacter la directrice par mail pour les visiteurs via le site. - Description des prestations et services que la résidence propose aux futurs résidents. - Nécessité de prévoir l'actualisation/modification des informations du site par elle-même (la directrice) si besoin (disponible en session Admin). Une base de données doit être mise en place, contenant l ensemble des données du site (textes, images). - De plus, il faut anticiper la construction d'une deuxième et nouvelle résidence. De ce fait, il faut également prévoir des "emplacements" dans le site pour cette dernière. D une part, gérer la base de données et d une autre, agencer l'affichage selon le contenu souhaité (affichage ou non du contenu de la résidence 2 aux côtés de la résidence 1 affichée).

5 III. Travaux réalisés Au cours de ce stage passé dans les locaux de la résidence Unifores, du 26 mai au 27 juin, notre travail a abouti à la mise en ligne d un site vitrine de la résidence. Le travail aura été réalisé en plusieurs étapes. En effet, nous avons débuté par la rédaction d un cahier des charges, selon les besoins du client, ici Mme Aragones. Cette dernière souhaitait une diffusion et un élargissement de son association dans le but de rendre plus attractive et de faire connaître la résidence Unifores au grand public. Par la suite, nous avons créé, développé et complété le site avec sa base de données associée avec des bilans réguliers, voire quotidiens soutenus par notre maître de stage, Mme Aragones. Ci-dessous, on peut constater mes prises de notes quotidiennes relevant les avancées de mon travail ainsi que de notre travail global d équipe avec Quentin Olivier. Lundi 26/05/14 : Arrivée en stage, briefing par le maître de stage (besoins, définition du projet), mise en place dans les locaux. Début d analyse, structuration du futur site (index, accueil ), avancée du porte-folio, proposition hébergeur. Mardi 27/05/14 : Prise de photos de la résidence, avancée des pages Contact (formulaire d envoi de mail), informations (création d une galerie), extension d onglets du menu. Mercredi 28/05/14 : Toujours en attente d un hébergeur Une fois nos premières pages finies (Contact, Infos, Localisation), nous nous sommes partagés l optimisation/décoration. Création d un défilement de photos en JS et manipulation des transitions CSS3. Prise de photos supplémentaires pour garder la meilleure apparence (grâce au soleil, parc) possible de cette vieille résidence à faire valoir. Jeudi 29/05/14 : Ascension Vendredi 30/05/14 : Pont de l Ascension Lundi 02/06/14 : Création d une Base de données (en local), création de session via une connexion sur le site, mise en relation des pages du site avec la BD permettant la modification du contenu des pages par l administrateur. Ajout d une galerie photos de l extérieur de la résidence. Mardi 03/06/14 : Amélioration de la galerie photo et du menu. Création d emplacements pour plus d informations sur la page Localisation (liaison avec la BD, vérification JS). Travaux sur des animations en CSS3. Mercredi 04/06/14 : Intégration du nouveau menu, toujours en attente d un hébergeur, création/avancée des pages Restauration, Autres, Hébergement avec leurs données dans la BD (locale). Jeudi 05/06/14 : Finition de Hébergement, Restauration (mais une erreur de requête demeure on recherche) et refonte de la BD pour ces pages et Autres, Localisation. Commencement de la page Hébergement hôte/appartement.

6 Vendredi 06/06/14 : Aboutissement complet de la «remise à jour» de la BD à propos des pages web déjà faites. Finalisation des pages : Service, Hébergement_Hôte puis entame d Hébergement_Appartement. Ajout d une animation sur mon Porte Folio. S il n y a pas de nouveau besoin, il nous reste que la page Hébergement_Appartement qu il reste à aboutir, ensuite suivra le design, organisation/placement de décorations. Lundi 09/06/14 : Lundi de Pentecôte (férié) Mardi 10/06/14 : Contenu du site entièrement relié à la BD (correction des dernières erreurs PHP), l administrateur peut le modifier à sa guise. Commencement de la mise en place des renseignements (textes, descriptions) sur le site (donc la BD aussi). Mise en place de la décoration CSS en cours Initiation au JQuery. Visite de la chambre d hôte et appartement (prise de photos, mesures). Mercredi 11/06/14 : Travail d une nouvelle galerie photo avec JQuery, décoration de la page d accueil, création de nouveaux boutons et d un menu, mise en place de la compatibilité du site Jeudi 12/06/14 : Suite de la compatibilité du site Mise en place du nouveau menu, finalisation de la page d accueil (en attente de l approbation de notre maître de stage) Upload du site «local» sur le serveur d OVH suite à la réponse positive pour cet hébergeur de la part du conseil d administration d Unifores (le site n est pas visible aux visiteurs). Vendredi 13/06/14 : Suite de l évolution du design du site, galerie photo finale ajoutée, organisation des éléments du site, ajout d un nouveau «formulaire» de connexion Admin (avec effet d extension avec Jquery). Il nous manque encore l affichage sur demande des informations de la résidence actuelle (n 1) et/ou de la résidence future (n 2). De plus nous allons pouvoir plancher sur le contenu la semaine prochaine avec notre maître de stage. Lundi 16/06/14 : Nouvelle demande du maître de stage à propos de la possibilité de visualiser un bout de contenu d un livret de présentation et de pouvoir le télécharger depuis le site en pdf. Amélioration de l organisation des pages en session Admin. Finalisation du formulaire login (manque seulement un dernier effet de transition CSS à corriger). Retouche des couleurs du site selon les goûts du maître de stage. Mardi 17/06/14 : Commencement d une approche pour un logo avec le maître de stage, amélioration/simplification du code de la page Localisation, bandeau de connexion toujours en travaux, travail sur la mise en page générale et finition des couleurs. Mercredi 18/06/14 : Création de logo pour mon porte folio et ébauche de logo pour Unifores. Avancée de mon porte folio, page d accueil à 70% d avancée. (1h15 d entretien d embauche pour un job d été de 14h30 à 16h) Jeudi 19/06/14 : Réalisation d un logo et présenté à notre maître de stage en attendant la réponse du conseil d administration. Avancée de mon porte folio avec l accueil entièrement fini et la page contact aussi. De plus le design du site est responsive et s adapte jusqu aux écrans d une largeur de 300px. On temporise le temps que notre maître de stage intègre son contenu au site sur la BD.

7 Vendredi 20/06/14 : Suite de la mise en page «responsive» que les éléments du site gardent les bons emplacements selon la résolution de l écran qui l affiche. Du coup, j ai dû refaire le menu car il ne respectait pas cette nécessité. Correction de petits détails sur le site (accent, margin, padding). Création du logo avec le maître de stage et bilan des derniers points, mises à jour à faire. Finition de l entête de connexion. Lundi 23/06/14 : Finition de nombreux petits détails encore (marges, menu revisité mais toujours pas «responsive»). Remplacement de la page Activités par Actualités. Suppression des balises de ponctuations ou police (h1, u) pour laisser l Admin faire à sa guise sur le contenu. Retouche sur la page Contact car j ai recréé la table Contact dans la BD car on l avait «perdue» entre deux mises à jour entre la mienne et celle du maître de stage. Finition du logo et envoi de celui-ci au conseil d administration pour validation. Mardi 24/06/14 : Finition de mise en page avec l ajout du logo, recherche d un slogan ou d une image supplémentaire pour le bandeau d entête du site. Et ajout d un éditeur de texte intégrer au HTML pour la page Contact. Avancée du PorteFolio de la page «à propos». Mercredi 25/06/14 : Le site est dans sa dernière ligne droite, Mme Aragones rentre les dernières données qu elle souhaite comme les informations, descriptions Retouche en cours sur la page d accueil pour pouvoir mettre les marges intérieures. Il manque toujours que le menu soit responsive. Progression sur mon Portefolio et création de mon rapport (la présentation est faite, ajout de contenu). Jeudi 26/06/14 : Le menu est désormais centré selon les résolutions. Retouche du site (arrangement entre les floats). Finition du mode d emploi Connexion/Déconnexion/Modification du site, de Quentin. Upload du site sur OVH avec sa base de données. Vendredi 27/06/14 : Mise en place sur le site, visite des professeurs référents, ajout d un fond sur le bandeau d entête du site et retour au lycée pour une correction d affichage du site avec Mr Bogusz sur OVH. Et mise en place de l envoi du mail sur la page contact.php.

8 IV. Logiciels et matériels utilisés Au cours de ce projet : «Création et développement d un site web vitrine» nous avons dû recourir à l utilisation de différents logiciels, en effet nous avons travaillé uniquement sur nos ordinateurs portables respectifs. Du coup, ce projet de stage a nécessité l utilisation de logiciels IDE : Environnement de Développement Intégré (en français) tel que Eclipse Hélios ou sinon tout simplement Notepad++ grâce à son mode de connexion FTP. Eclipse Hélios permet de créer, coder nos pages web en langage CSS, HTML, PHP, Javascript (et Jquery). Ensuite il y a le logiciel EasyPHP permettant d'émuler un serveur Apache sous Windows, qui nous a permis de tester notre site web en cours de construction, sur du web local tout au long du développement de celui-ci. Après, il nous a fallu proposer des images pour enjoliver et illustrer le contenu du site, pour permettre une navigation plus intuitive. Alors on peut citer les logiciels tels que Paint, Gimp. L un permettant la manipulation d'images matricielles et l autre, l édition et de retouche (traitement) d'image. En plus on a eu recours à AAA Logo pour la création du nouveau logo d UNIFORES.

9 Puis au moment d upload l ensemble du contenu du site sur le serveur hébergeur d OVH, il nous a fallu utiliser des logiciels FTP (File Transfer Protocol) comme FileZilla ou WinSCP.

10 V. Documentations Afin d illustrer mes propos de ce rapport, voici ci-dessous différents annexes permettant de témoigner des procédures et méthodes appliquées au cours des étapes de ce projet de stage : Pour ce qui est du code de nos pages web : Figure 1: index.php

11 Ensuite, la mise en page (CSS et rendu visuel) : Exemple de la page d accueil :

12 Exemple de contact par mail :

13 Enfin la base de données associée en localweb : Avec l exemple de la table CONTACT :