Refonte du site CD Media

Transcription

UNIVERSITÉ DE NICE SOPHIA ANTIPOLIS
I.U.T. DE NICE CÔTE D’AZUR
DÉPARTEMENT INFORMATIQUE
41, BD NAPOLEON III – 06200 NICE
RAPPORT DE STAGE
SESSION 2011-2012
Refonte du site
CD Media
Crée par :
Cédric FERRETTI
Entreprise :
SARL CDMedia
29 av. Jean Médecin
06000 Nice
Sous la direction de :
M. Frédéric FRATICELLI, tuteur de l’entreprise
Mlle Lise BRENAC, tutrice I.U.T.
Cédric FERRETTI – Rapport de Stage – 2011/2012
2
Résumé
Afin de valider ma formation au sein de l’IUT de Nice Côte d’Azur et obtenir mon diplôme,
j’ai dû, lors de ma seconde année de DUT Informatique, faire un stage en entreprise. J’ai
été recruté par l’entreprise CD Media spécialisée dans la conception de site Web et le
conseil informatique.
Au cours de ce stage j’ai dû développer le futur site Web de l’entreprise ainsi qu’améliorer
le système de back-office de ce même site.
Summary
To validate my training in the UIT of Nice Côte d’Azur and obtain my degree, I have to do
an internship during my second years of University degree of Technology in Computer
Science. I was recruited by the company CD Media, specialist in web development and IT
consulting.
During this internship, I have to develop the future Web site of the company and improve
the Web site’s back-office system.
3
Sommaire
1.
2.
INTRODUCTION ET ANALYSE DE LA SITUATION....................................................5
1.1.
PRESENTATION DE L’ENTREPRISE .....................................................................................................................................5
1.2.
PRESENTATION DU PROJET ..................................................................................................................................................5
1.3.
PLANNING PREVISIONNEL ....................................................................................................................................................6
REALISATION DU PROJET ...................................................................................... 7
2.1.
PRISE EN MAIN ET MISE EN APPLICATION ......................................................................................................................7
2.1.1.
Langages utilisés ................................................................................................................. 7
2.1.2.
Outils de développement utilisés ................................................................................... 8
2.2.
ETUDE DE L’EXISTANT ..........................................................................................................................................................12
2.3.
FORMATION ...............................................................................................................................................................................13
2.4.
DEVELOPPEMENT DU PROJET ...........................................................................................................................................13
2.4.1.
La page d’accueil ................................................................................................................14
2.4.1.1.
Version 1 .......................................................................................................................................................................................... 14
2.4.1.2.
Version 2 ......................................................................................................................................................................................... 15
2.4.2.
Niveau 2 ................................................................................................................................19
2.4.3.
Niveau 3 ............................................................................................................................... 20
2.4.4.
Animation du fond ............................................................................................................21
2.5.
AMELIORATION DU BACK-OFFICE ..................................................................................................................................22
2.5.1.
Le système d’upload de gros fichiers sur le serveur .............................................. 22
2.5.2.
Le système d’ajout de vidéos ......................................................................................... 24
2.5.3.
Le système de découpe d’image ................................................................................... 26
2.5.4.
Autres Développements.................................................................................................. 29
2.6.
PHASE DE TEST ET CORRECTION DE BUGS ...................................................................................................................29
2.8.
PLANNING FINAL .....................................................................................................................................................................31
3.
CONCLUSION ........................................................................................................ 32
4.
GLOSSAIRE ........................................................................................................... 33
5.
BIBLIOGRAPHIE ...................................................................................................34
6.
5.1.
SITES CONSULTES ...................................................................................................................................................................34
5.2.
ŒUVRES CONSULTEES ..........................................................................................................................................................35
ANNEXES .............................................................................................................. 35
4
1. Introduction et analyse de la situation
1.1. Présentation de l’entreprise
L’entreprise CD Media est une agence de communication Web créée en 1998 dont le
siège social se situe à Ajaccio en Corse.
L’activité principale de cette entreprise est la conception de sites Web, le conseil et
l’étude informatique. Cette société intervient surtout auprès d’agences de tourismes
des Alpes-Maritimes et de Corse.
J’ai été accueilli dans cette entreprise par Fred FRATICELLI, chef de projet et
développeur/ intégrateur Web, et Corinne BELLANGER chargée de clientèle.
1.2. Présentation du projet
Le projet de mon stage porte sur la refonte du site Web de CD Media http://www.cd-media.fr/ ainsi qu’une amélioration de son back-office.
Cette refonte a pour objectifs d’améliorer et de moderniser la communication de
l’entreprise auprès de clients potentiels.
L’objectif final est donc d’avoir un site Web fonctionnel, ergonomique et surtout
avec un temps de chargement le plus rapide possible (de l’ordre de quelques
secondes) tout en respectant les contraintes de développement imposées par
l’entreprise.
Le site doit être compatible avec les principaux navigateurs Web:
-
Mozilla Firefox
-
Google Chrome
-
Internet Explorer
5
1.3. Planning prévisionnel
Figure 1. Planning initial du projet
Voici la charge de travail prévisionnelle, après établissement du cahier des charges
les parties les plus importantes sont la phase de développement et celle
d’intégration.
Formation : 2 semaines.
Conception du Cahier des Charges : 1 semaine.
Intégration : 3 semaines.
Développement : 4 semaines.
Phase de test et de débogage : 1 semaine.
6
2. Réalisation du projet
2.1. Prise en main et mise en application
2.1.1. Langages utilisés
Mon stage étant orienté développement Web j’ai donc dû me servir de plusieurs
langages :

HTML :
Un langage de balisage permettant d’écrire de l’hypertexte.
HTML permet également de structurer sémantiquement et de mettre en forme le
contenu des pages, d’inclure des ressources multimédias dont des images ou encore
des formulaires de saisie.

CSS :
Un langage permettant de décrire des feuilles de style servant à la présentation des
documents HTML et XML.

JavaScript :
Un langage de script, utilisé surtout coté client/navigateur, orienté objet à
prototype, c'est-à-dire que les bases du langage et ses principales interfaces sont
fournies par des objets qui ne sont pas des instances de classes, mais qui sont
chacun équipés de constructeurs permettant de définir leurs propriétés. Ce langage
permet la modification dynamique des éléments de la page.

SQL :
Un langage permettant d’effectuer des opérations sur des bases de données.
7

PHP :
Un langage de script, utilisé coté serveur, utilisé pour produire des pages Web
dynamiques via un serveur http ou pour effectuer des traitements de façon local. En
raison de la richesse de sa bibliothèque, on désigne parfois PHP comme une
plateforme plus qu'un simple langage.
2.1.2. Outils de développement utilisés
Durant mon stage j’ai dû me servir de différents outils afin d’améliorer la production et
de faciliter la réalisation du projet :

Zend Studio :
Zend Studio est un IDE fournissant les fonctionnalités nécessaires
au développement d’application aussi bien coté serveur (PHP) que
coté client (JavaScript, HTML). Il intègre des services qui m’ont été
utiles comme la gestion d’un projet, la complétion automatique du
code ou encore la connexion à un serveur FTP.

FileZilla Client :
FileZilla Client est un client FTP, FTPS et SFTP. Il permet le
transfert et la récupération de fichiers sur un serveur FTP.

Adobe Photoshop et Adobe Illustrator :
Logiciels de création et d’édition d’images, numériques pour l’un et
vectoriels pour l’autre, elles m’ont été utiles lors de l’intégration de
la charte graphique du site.
8

EasyPHP :
EasyPHP est une plateforme de développement Web comprenant
deux serveurs (un serveur Web Apache et un serveur de bases de
données MySQL) permettant d’exécuter en local (sans se connecter
à un serveur distant) des scripts PHP.

TopStyle Pro :
TopStyle Pro est un outil destiné aux développeurs et contenant de
puissants outils pour construire et visualiser des feuilles de style
CSS dans le respect des normes standards.

ModeliXe :
ModeliXe est un moteur de template simple, souple et innovant.
Un moteur de template est un programme qui va permettre de
séparer la partie contenu/données de la partie template (modèle)
d’une page Web permettant la modification des données sans
modifier le rendu HTML et améliorant la maintenance du site.
Scripts
PHP
Modèle
HTML
Moteur de
Termplate
Rendu
HTML
Figure 2. Principe de fonctionnement d’un moteur de
template
9
La partie « modèle » est un fichier .mxt qui comporte du HTML
ainsi que des balises XML permettant de définir les emplacements
dans le modèle de blocs, textes, images, ou attributs.
Il existe plusieurs types de balises :

Balises d’éléments : représentent l'ensemble
des éléments HTML susceptibles d'être gérés
par les fonctions de base de ModeliXe.

Balises de blocs : un bloc est une entité HTML
intégrée dans un document, pouvant contenir
tout ou partie d'un template.

« Balises » d’attributs : permet de gérer
dynamiquement
n'importe
quel
attribut
HTML.
La partie « contenu » se compose d’un fichier PHP où on effectue
les traitements de données pour ensuite, grâce à une classe
ModeliXe, les associer aux balises du modèle.

Mootools :
MooTools est un framework JavaScript compact, modulaire et
orienté objet.
MooTools offre un ensemble de classes et de fonctions compatibles
avec la plupart des navigateurs Web ce qui permet un
développement plus simple et logique d’applications Internet.
Il met à notre disposition de nombreuses fonctionnalités telles que
des classes dédiées aux requêtes Ajax, aux effets graphiques, ainsi
que la possibilité de créer ses propres classes.
10
MooTools bénéficie d'une communauté active qui a développé de
nombreux plugins et qui assure le support de cette librairie.

E-TourManager :
Le
CMS
dédié
d’administration
conçu
de
par
site
Web
l’entreprise
permettant
est
la
un
système
modification
dynamique du contenu site.
Il propose entre autres les fonctionnalités suivantes :


Création/Modification/Suppression de blocs.

Création/Modification/Suppression de contenu.

Publication d’articles.

Gestion des pages du site.

Système de newsletter.
Plupload :
Plupload et un outil permettant le téléchargement montant
(upload) de fichiers sur un serveur PHP tous en évitant les
problèmes de taille maximale des fichiers téléchargés sur les
serveurs en découpant le fichier en plusieurs fichiers lors du
téléchargement. Il propose plusieurs moteurs d’exécution (Flash,
HTML4, HTML5, Gears, …).

Lasso.Crop :
Extension Mootools qui ajoute des classes utiles pour le découpage
d’images.
11
2.2. Etude de l’existant
L’entreprise CD Media a mis à ma disposition des sites basés sur le CMS E-TourManager
afin que je puisse comprendre l’organisation des fichiers d’un site développé avec leur
CMS, ainsi que le fonctionnement de ce dernier.
Chaque site de l’entreprise possède une organisation de base similaire :

Un dossier « admin » où se trouvent tous les scripts et pages du CMS.

Un dossier « inc » où se trouvent :

Les scripts communs à tout le site (base de données, …)

Un sous dossier « template » dans lequel on trouve les modèles de template
.mxt.

Un dossier images où les images et vidéos uploadées seront ajoutées.

Un dossier « css » qui comme son nom l’indique possède les feuilles de style du
site.

Un dossier « modules » où les modules utilisés par le CMS sont définis.

Un dossier « scripts » dans lequel on retrouve les scripts JavaScripts.

Et d’autres scripts PHP commun à tous les sites dont les principaux sont:

« page.php3 » qui se charge de structurer les pages telles que définies dans
le CMS.

« content.inc.php3 » qui permet de récupérer et d’ajouter le contenu déjà
prédéfinis dans la page.

« menu.inc.php3 » qui s’occupe de créer les menus et sous menus s’ils
existent et de les ajouter à la page.
12
2.3. Formation
Durant les trois premières semaines de mon stage et en attendant la charte graphique du
nouveau site de CD Media je me suis formé sur les principaux outils et langages utilisés
par l’entreprise.
J’ai d’abord commencé par l’apprentissage de ModeliXe pour ensuite me familiariser
avec les requêtes Ajax et les différents effets graphiques proposés par Mootools.
Au cours de la troisième semaine, je me suis formé sur E-TourManager, le CMS de
l’entreprise, partie importante pour le développement du site web.
Cette formation c’est basée sur une documentation des outils et des langages, ainsi que de
sites Web crées par CD Media.
2.4. Développement du projet
A partir de la 3e semaine j’ai commencé à développer une ébauche du futur site CD
Media. Corinne m’ayant fourni une arborescence du site. J’ai donc pu définir les
blocs et les modules que j’aurai à intégrer dans le site.
METIER
SOLUTIONS
REFERENCES
CONSEIL & AMO
FORMATIONS
niveau 1
(textes/photos/liens)
niveau 1
niveau 1
niveau 1
niveau 1
niveau 2
niveau 2
niveau 2
niveau 2
niveau 2
ACTUALITES
AGENDA
CONTACT
NOUS TROUVER
home page
PARTAGER
liens réseaux sociaux
ESPACE CLIENTS
rubrique
éditoriale
Formulaires
web services
(modules)
Figure 3. Arborescence initiale du site CD Media
13
2.4.1. La page d’accueil
2.4.1.1.
Version 1
La première version de la charte graphique de la page d’accueil est arrivée le 18 mai, j’ai
donc pu commencer l’intégration et le développement du site.
Figure 4. Maquette de la page d’accueil (version 1)
Cette version devait contenir:
-
Un bloc dédié aux actualités de l’entreprise,
-
un bloc pour les évènements,
-
un ou plusieurs blocs pour les articles
-
un menu,
-
des liens vers les réseaux sociaux de l’entreprise.
Tous les blocs devaient être flottants et déplaçables.
Grâce à MooTools et à ses classes destinées au « drag & drop » j’ai pu développer,
rapidement, les blocs flottants du site.
Le résultat final étant trop encombré l’équipe décida de demander au designer une
nouvelle maquette pour la page d’accueil avec un système de blocs d’images fixés.
14
2.4.1.2.
Version 2
La seconde version de la charte graphique de la page d’accueil est arrivée le 23 mai.
Figure 5. Maquette de la page d’accueil (version 2)
On remarque que la page d’accueil se divise en 3 parties :
-l’entête: l’entête de la page où l’on retrouve le logo de CD Media ainsi que les liens
sociaux.
-les articles : bloc central de la page où l’on retrouve les articles, les actualités mis
en avant par l’entreprise.
- le menu : menu fixé en bas de page permettant de naviguer entre les différentes
pages du site.
Le système de blocs :
Le système de blocs est géré en JavaScript, il va permettre le positionnement des blocs
choisis par l’entreprise via le CMS.
15
Les contraintes liées à ce système sont :

Le système de blocs de la page d’accueil doit positionner aléatoirement les
blocs images afin d’ajouter un dynamisme à la page.

Les blocs doivent être alignés.

Il existe trois types de blocs : les blocs images, les blocs textes et le bloc slogan.

Les blocs images peuvent avoir différentes tailles (1x1, 2x2, 2x1, …) et on doit
pouvoir ajouter de nouveaux types de blocs au système facilement.

La taille des blocs images est définie via le CMS.

Les blocs de textes et slogan ne doivent pas être adjacents horizontalement et
verticalement.
J’ai donc développé une classe Mootools nommée MooBlocs.
Cette classe permet de positionner aléatoirement des blocs passés en paramètre dans un
conteneur et de les cacher pour ensuite les afficher avec un effet d’apparition en cascade.
J’ai voulu que l’utilisation de la classe soit la plus simple possible, la classe positionne
donc les blocs au moment de l’instanciation de celle-ci.
J’ai aussi voulue rendre la classe générique au maximum, ainsi l’utilisateur peut,
directement lors de l’instanciation de la classe, définir de nouveaux type de blocs ou
modifier ceux existants, modifier la taille d’un bloc simple et celle du conteneur ou encore
modifier la vitesse d’animation des éléments.
16
Chaque type de blocs est défini dans la classe de la manière suivante :
« nomDuType »: {largeur : valeur, hauteur : valeur, className : ’valeur’},
Où largeur et hauteur sont des entiers correspondant aux dimensions du blocs, et
className une chaine de caractères correspondant au style CSS du bloc est définie dans
le CMS.
Exemple de définition d’un bloc 2x2:
bloc2: {largeur : 2, hauteur : 2, className :
'22'},
L’instanciation de la classe se fait de la manière suivante :
var blocs = new MooBlocs(container, blocs[, options]) ;
-
container représente l’élément HTML dans lequel se trouvent les blocs.
-
blocs est, comme son nom l’indique, un tableau contant les éléments
blocs de la page HTML.
-
options est une variable optionnelle qui permet de modifier les options
de base définies dans la classe et permet d’ajouter de nouveaux type de
blocs.
17
L’affichage des images se fait de la manière suivante:
blocs.display(0) ;
Processus de placement des blocs :
Afin de placer les blocs dans le container la classe suit le processus suivant:
-
Récupération de tous les blocs.
-
Vérification de la surface du conteneur par rapport à celle de tous les blocs
afin de savoir s’il n’y a pas plus de bloc que de place.
-
Tri aléatoire des blocs.
-
Vérification de la position des blocs, afin de savoir si les blocs peuvent être
placés malgré les contraintes imposées.
-
Rendu des blocs invisibles.
Le menu :
Le menu de la page d’accueil est animé, en effet lors d’un roll over sur un des menus
principale, la liste de ses sous menu apparaît avec un effet de fondu.
Ce menu a pu être développé grâce aux classes Mootools, Fx.Morph et Fx.Tween, classes
qui proposent des fonctions d’animation extrêmement puissantes.
18
2.4.2. Niveau 2
J’ai commencé le niveau 2 une fois la charte graphique de celui-ci arrivé c’est-à-dire le 25
mai.
Figure 6. Maquette du niveau 2 du site CD Media
Cette page se compose de plusieurs blocs indépendants:
-
Un bloc d’entête (le même que celui en page d’accueil),
-
un bloc de menu,
-
un bloc de sous rubrique,
-
un bloc d’articles avec :
o un bloc d’article « En savoir plus »
o un bloc d’article « Voir aussi »
o un bloc d’article contenant une vidéo ou une image.
-
un bloc de pied de page avec le copyright.
Chaque article, menu et lien sont créés et ajoutés à la page via le CMS.
19
2.4.3. Niveau 3
Le troisième niveau du site est arrivé, en retard, la dernière semaine de stage.
Figure 7. Maquette du niveau 3 du site CD Media
Cette page se compose de plusieurs blocs indépendants:
-
Un bloc d’entête (le même que celui en page d’accueil),
-
un bloc de menu,
-
un bloc de sous rubrique,
-
un bloc d’articles avec :
o un bloc d’articles de zoom,
o un bloc d’un article détaillé,
-
un bloc de pied de page avec le copyright.
Chaque article, menu et lien sont créés et ajoutés à la page via le CMS.
Les articles de zoom sont affichés aléatoirement.
20
2.4.4. Animation du fond
CD Média voulait animer le fond de leur site, pour apporter un dynamisme aux pages et
pour casser le côté sombre de l’entête des niveaux 2 et 3.
Pour animer le fond j’ai d’abord créé des images PNG comportant le même type
d’éléments que le fond initial.
J’ai ensuite créé une classe Mootools, AnimootedImage, cette classe est instanciée comme
suit :
var animation = new AnimootedImage(element[, options]);
-
element représente l’image à animer,
-
options est une variable optionnelle qui permet de modifier des valeurs
prédéfinies de la classe.
L’image est animée grâce à la méthode start :
animation.start();
Processus de l’animation :
Lors de l’appel de la méthode start, celle-ci appel des méthodes récursives, une méthode
pour la rotation et une méthode pour le déplacement.
La méthode de déplacement déplace l’image vers une position aléatoire avec une vitesse
d’animation définis dans la classe et pouvant être modifiée par l’utilisateur.
La méthode de rotation fait tourner l’image à vitesse constante, vitesse définis dans la
classe et pouvant être modifiée lors de l’instanciation de celle-ci.
21
2.5. Amélioration du Back-Office
Au cours de mon stage j’ai dû développer trois systèmes afin d’améliorer et de faciliter
l’administration du futur site. La partie « media » du CMS dédié a donc été modifiée afin
d’ajouter :
-
Un système d’upload de gros fichiers sur le serveur.
-
Un système d’ajout de vidéos.
-
Un système de découpage d’image.
2.5.1. Le système d’upload de gros fichiers sur le serveur
CD Media souhaitait pouvoir ajouter des fichiers de taille importante (images, vidéos)
directement via le CMS et sans passer par un logiciel FTP comme FileZilla.
J’ai donc mis en place, grâce à l’outil Plupload, un système d’upload de fichiers sur le
CMS ayant pour objectif de passer outre la limitation de taille maximal des fichiers
transitant sur le serveur (3Mo par fichiers) tout en vérifiant que les fichiers transitant
soient dans un format validé (images, vidéos, PDF, …).
Les fichiers uploadés sont stockés lors de l’upload dans un dossier media avant d’être
redirigé dans un répertoire de stockage correspondant au type de fichier défini dans ETourManager.
22
Figure 8. Aperçu de la création d’un type de média
Figure 9. Aperçu du système d’upload
23
2.5.2. Le système d’ajout de vidéos
Le site de CD Media allant contenir des vidéos, on m’a demandé de développer un
système de téléchargement montant de vidéos directement via le CMS.
Ayant d’abord modifié le module d’upload de gros fichiers pour autoriser les fichiers au
format vidéo (MP4, AVI, MOV, MKV, M4V, 3GP, WMV). J’ai ensuite cherché un lecteur
vidéo compatible et personnalisable que l’on pourrait intégrer sur les futurs sites.
Après de nombreuses recherches, il en est ressorti que, les lecteurs vidéos les plus
populaires, rapide et simple d’utilisation n’étaient compatibles, sur tous les navigateurs,
qu’avec des vidéos au format FLV.
Un nouveau besoin se posait:
-
Comment convertir un fichier vidéo en vidéo FLV via un script PHP ?
Une solution trouvée était FFmpeg-PHP une extension proposant une classe PHP basée
sur FFmpeg un logiciel d’édition et de traitement vidéo.
Malheureusement, et après de nombreux essais, j’ai compris que la version la plus
récente de l’extension n’était pas compatible avec les versions de PHP supérieures à la 5.3
et que le serveur de CD Media tourné sur une version 5.3.2.
Voulant alors ajouter les vidéos dans n’importe quels formats vidéos sur le site, j’ai
finalement trouvé UniPlayer un plugin JavaScript regroupant 7 plugins vidéos et donc
compatibles avec la plupart des formats.
Après quelques tests il en est ressorti que le logiciel était lourd, lent et pas assez
développé pour être intégré dans un site Web (changement de proportion en fonction du
lecteur et obligation d’installer des logiciels comme QuickPlayer).
24
Figure 10. Exemple d’affichage du lecteur vidéo UniPlayer
Après avoir demandé à l’administrateur serveur d’installer FFmpeg dans sa version
logicielle directement sur le serveur, j’ai développé un script PHP de conversion vidéo qui
sera appelé une fois l’upload terminé et exécuté en tâche de fond sur le serveur.
Ce script permet, en plus de la conversion vidéo en FLV, la récupération d’un
« thumbnail » afin d’avoir un aperçu de la vidéo dans le CMS.
J’ai finalement choisit « FlowPlayer » comme lecteur Flash pour le futur site Web car il
est entièrement personnalisable, léger et simple d’utilisation.
Figure 11. Résultat d’un article avec vidéo sur le site
25
2.5.3. Le système de découpe d’image
Afin d’ajouter des blocs d’images sur la page d’accueil sans que celle-ci ne soit déformée
lors du redimensionnement j’ai programmée un système de découpe d’images que j’ai
intégré sur E-TourManager, afin que l’administrateur du site puissent découper les
images dans les proportions de la futur taille du bloc sans passer par un logiciel d’édition
d’image comme Photoshop ou Microsoft Paint.
J’ai pour cela utilisé une extension MooTools intitulé Lasso.Crop et proposant un système
de prévisualisation d’un redimensionnement d’images.
Une fois cette extension intégrée au CMS il restait à développer un système de traitement
d’images en PHP.
Ce système se décompose en 3 scripts PHP chacun appelé via un script JavaScript en
AJAX:
-
GoToCrop.php : Le premier script est appelé lors de la demande, par
l’utilisateur, du système de découpe.
Il vérifie que l’image est dans un format compatible et existe bien sur le
serveur, il retourne les données nécessaires à l’affichage de l’image par le
navigateur.
-
ResizeImage.php : Le second script est le script de traitement, il effectue une
sauvegarde de l’image avant de la modifier.
Il utilise pour cela l’extension PHP GD2 destinée au traitement d’image et
utilise les coordonnées du rectangle de sélection de l’extension Lasso.Crop
envoyées par JavaScript.
-
Le dernier script est le script de retour en arrière il retourne l’image
précédemment sauvegardée.
26
Le système de découpage final permet :
-
Une visualisation en temps réel du résultat.
-
La possibilité de revenir en arrière.
-
La possibilité de définir manuellement une taille de recadrage.
-
La possibilité de conserver les proportions du recadrage.
-
La conservation de la transparence pour les images PNG.
-
La modification d’image jusqu’à 6Mo.
Figure 12. Aperçu du système de recadrage – avant modification
27
Figure 13. Aperçu du système de recadrage – après modification
28
2.5.4. Autres Développements
J’ai aussi corrigé quelques « bugs » du CMS :
-
Correction du redimensionnement des photos au format PNG.
-
Déplacement du style CSS appliqué à une photo vers le type de photo.
2.6. Phase de Test et correction de bugs
La phase de test s’est déroulée tout au long du projet.
Elle a permis de corriger les bugs d’affichages des éléments sous les différents
navigateurs Web.
De trouver et corriger des « bugs » sur les différents systèmes du CMS :
-
Problème de compatibilité entre le système d’upload de fichiers lourds et le
système d’image (à cause de la mémoire allouée par le script PHP lors du
découpage).
-
Problème de ratio de redimensionnement.
Et d’améliorer l’interface pour qu’elle corresponde le plus possible aux attentes de
l’entreprise.
29
2.7. Quantification du projet
En fin de stage j’ai produit :
-
Pour le site Web :




-
25 fichiers templates :

Environ 780 lignes de code,

10% de commentaires.
1 fichier JavaScript :


9 fichiers PHP :


1 fichier CSS :


Pour le CMS :

7 fichiers PHP :

Environ 930 lignes de code

J’ai aussi modifié des fichiers déjà existants afin de corriger des « bugs » et pour
ajouter les différents systèmes développé.
30
2.8. Planning final
Figure 14. Planning final
On remarque que la formation à durée plus longtemps, en partie à cause de l’attente de la
charte graphique du site. Le développement s’est divisée entre la partie back-office et le
site en lui-même.
31
3. Conclusion
Ce stage fut très enrichissant, il m’a permis d’acquérir de nouvelles connaissances, tant au
niveau de la programmation, qu’au niveau du fonctionnement d’une entreprise le tout dans
une entreprise très chaleureuse et conviviale.
J’ai ainsi pu me familiariser avec de nouveaux outils, comme Mootools et ModeliXe, sans
lesquels il m’aurait été impossible de développer, aussi bien le site que sa partie back-office
et enrichir les connaissances que je possédais déjà.
J’ai pu suivre, dans sa totalité, le processus de création d’un site web et y participer,
partant de son idée de création à sa réalisation complète, j’ai appris l’importance de la
communication au sein d’une entreprise, communication qui évite que le projet ne parte
dans de mauvaise direction et permet d’assurer sa réalisation dans de bonnes conditions.
Au final, j’ai donc crée un site fonctionnel dont le contenu est modifiable en ligne via un
système d’administration amélioré simplifiant la gestion du site et la publication d’articles.
32
4. Glossaire
CMS : Content Management System, système de gestion du contenu est une interface
d’administration (back-office) permettant de gérer les publications et le contenu d’un site.
Back-Office : site web permettant de gérer, d’administrer et d’organiser un système
informatique.
Template : fichier servant de modèle de présentation de données d’une page Web ou d’un
bloc de pages Web.
Bug : Un bug est un problème qui peut survenir lors de l’exécution d’un programme ou du
système d’exploitation et qui peut avoir pour conséquence, au mieux de quitter
l’application, au pire de redémarrer l’ordinateur. Les bugs sont dus à une mauvaise
programmation au niveau des applications et entraînent souvent de la part des éditeurs la
diffusion de patchs correctifs.
Drag and drop : Le glisser-déposer (de l’anglais « drag and drop », aussi appelé cliquerglisser) est dans un environnement graphique, une méthode consistant à déplacer un
élément graphique présent sur l’écran d’un ordinateur d’un endroit à un autre, en utilisant
un système de pointage.
Plugin : Un « plugin » est un programme qui s’ajoute à une application principale, pour
lui apporter de nouvelles fonctionnalités, ils sont le plus souvent mis au point par des
personnes extérieur au développement de l’application principale.
33
Roll Over : Le « roll over », dans le langage Web, est un terme anglais désignant une
interactivité lors du passage de la souris au-dessus d’un élément.
Thumbnail : Un thumbnail est une image miniature d’un document au format image,
vidéo, permettant d’avoir un aperçu du fichier original.
5. Bibliographie
5.1. Sites consultés
Mootools : sources, documentation et exemples d’utilisation du plugin, consulté tous
au long du stage, disponible sur http://mootools.net/
Manuel PHP : documentation PHP et exemples d’utilisation des méthodes, consulté
lors
du
développement
des
systèmes
du
back-office,
disponible
sur
http://php.net/manual/fr/index.php
FFmpeg : sources et documentation du logiciel FFmpeg, consulté pour la
compression vidéo, disponible surhttp://ffmpeg.org/
Linuxers : tutoriels pour utilisateurs Linux, consulté pour un tutorial bien détaillé
de l’utilisation de FFmpeg, disponible sur http://linuxers.org/book/export/html/593
CommentCaMarche : communauté informatique d’assistance, d’entraide et de
conseil,
consulté
tous
au
long
du
stage,
disponible
sur
http://www.commentcamarche.net/
34
Plupload : sources et documentation du logiciel plupload , consulté pour le système
d’upload du CMS, disponible sur http://www.plupload.com/
FlowPlayer : sources et documentation du plugin Web FlowPlayer, consulté pour la
partie vidéo du site Web,disponible sur http://flowplayer.org/
W3School : documentation bien détaillé du CSS et HTML, consulté tous au long du
stage, disponible sur http://www.w3schools.com/
5.2. Œuvres consultées
MooTools Essentials – Aaron Newton – Documentation et exemples détaillés sur
l’outil Mootools, 276 pages.
6. Annexes
Exemple de template
35
Exemple de définition d’une classe grâce à MooTools
36

Refonte du site CD Media

Transcription

Documents pareils

merci merci merci merci

Blocs mono unison research smart 845

Description technique de l`installation Pondeuse EL12.

En attendant septembre, maman, papa, j`ai besoin

Le billet du coordinateur : INDIANAPOLIS FDIC 2008 USA

Fiche technique Dry Block Heater 3

quark xpress initiation

QuarkXPress

STAGES : ENQUETE INITIALE 1. Moyen de transport utilisé et prix

Bloc coffrant