STAGE 1ERE ANNEE
Le travail qui m’a été attribué durant ce stage, consistait en la création d’un nouveau design de blog, en la migration sur WordPress et à la création des pages web pour Planzone, un logiciel de gestion de projet en ligne développé par Augeo Software. Pour réaliser ce projet j'ai utilisé différents logiciels et outils informatiques (Notepad++, Photoshop, XAMPP, WordPress...) et j'ai réalisé plusieurs activités que je vais vous présenter ci dessous.
Les activités mises en œuvre:
A1.1.1 Analyse du cahier des charges d'un service à produire
A1.1.3 Étude des exigences liées à la qualité attendue d'un service
A1.2.5 Définition des niveaux d'habilitation associés à un service
A1.3.3 Accompagnement de la mise en place d'un nouveau service
A1.4.1 Participation à un projet
A1.4.2 Évaluation des indicateurs de suivi d'un projet et justification des écarts
A2.1.1 Accompagnement des utilisateurs dans la prise en main d'un service
A4.1.1 Proposition d'une solution applicative
A4.1.2 Conception ou adaptation de l'interface utilisateur d'une solution applicative
A4.1.3 Conception ou adaptation d'une base de données
A1.1.1 Analyse du cahier des charges d'un service à produire
Mes tâches et certains cahiers des charges ont été fournis sur l'application Planzone, par mail et a l'oral. Voici quelques screenshots (cliquer sur l'image pour zoomer) :
BLOG - PLANZONE
La première partie de la création du blog était en locale puis en ligne. Tout d’abord j’ai dû télécharger et installer un logiciel appelé XAMPP sur la machine locale. Apres l'installation, j'ai lancé XAMPP et lancé 2 modules MySQL et Apache pour pouvoir installer WordPress et faire les changements nécessaires.
Pour installer WordPress, tout d'abord j'ai téléchargé le fichier zip depuis le site officiel. Puis j'ai décompressé le fichier ZIP et ai déplacer le dossier wordpress dans le dossier htdocs (C:\xampp\htdocs) du logiciel XAMPP précédemment installé. Pour lancer l'installation de WordPress en local, il fallait créer une base de données sur MySQL avec le phpMyAdmin puis ouvrir un navigateur et taper dans la barre de recherche: localhost/wordpres/instal.php et remplir toutes les cases nécessaires pour installer correctement WordPress.
A1.1.3 Étude des exigences liées à la qualité attendue d'un service
Après avoir installé WordPress, il fallait respecter la charte graphique de la société. Donc j'ai fait des recherches sur différents sites internet comme :
- https://wordpress.org/themes/
- https://colorlib.com/wp/free-wordpress-themes/
- http://premium.wpmudev.org/blog/30-free-responsive-and-stunning-wordpress-themes/
Pour trouver des thèmes WordPress qui correspondaient à leur charte graphique.
Voici des screenshots, qui permettent de voir la charte graphique de la société ainsi que le thème de base et celui que j'ai appliqué.
Ensuite je devais rajouter une police personnalisée de l’entreprise ''Folks-Light'' qui m'a été donnée. Pour pouvoir intégrer et utiliser la police sur le blog, il fallait la convertir. J'ai utilisé le générateur http://www.fontsquirrel.com/tools/webfont-generator pour convertir la police. Une fois convertie je devais l'intégrer sur le blog. Donc j'ai rajouté un dossier appelé fonts dans C:\wamp\www\wordpress\wp-content\themes\planzone avec les fichiers obtenus du générateur et retouché le fichier style.css du thème pour changer le code ‘font-family’ et rajouter le code css suivant pour pouvir utiliser la nouvelle police ajoutéé :
@font-face {
font-family: 'folks-lightregular';
src: url('fonts/Folks-Light-webfont.eot');
src: url('fonts/Folks-Light-webfont.eot?#iefix') format('embedded-opentype'),
url('fonts/Folks-Light-webfont.woff') format('woff'),
url('fonts/Folks-Light-webfont.ttf') format('truetype'),
url('fonts/Folks-Light-webfont.svg#folks-lightregular') format('svg');
font-weight: normal;
font-style: normal;
}
Puis j'ai dû reproduire l'en-tête du site web sur le blog et remplacer l'image du site par une nouvelle créée avec Potoshop. Pour créer le menu, je me suis servi de leurs codes HTML et CSS du site web qui m'ont été fournis. Suite à l'intégration de codes sur le blog, le rendu n'était pas le même, donc j'ai dû modifier les codes HTML que j'ai intégré dans le PHP et modifier quelques styles de classes dans le CSS. Voici les codes utilisés, et les résultats :
Code HTML:
Code CSS :
Suite a la demande de mon tuteur, je devais créer plusieurs widgets pour le sidebar pour toutes les pages du blog. Les widgets que j'ai créés sont:
-
un widget "Essayez Planzone !" - qui permet aux utilisateurs d'essayer Planzone gratuitement pandant 14 jours.
Pour créer ce widgets, j'ai créé le code HTML suivant :
-
un widget "Suivez-nous !" - qui permet aux utilisateurs de suivre Planzone sur Twiter, Google+, Facebook et LinkedIn
Pour réaliser ce widget, j'ai créé les codes HTML et CSS suivants :
Code HTML :
Code CSS :
-
un widgets "Recevez notre newsletter" - qui permet de s'inscrire a la newletter de Planzone.
Pour créer ce widget, j'ai installé une extension WordPress "East Sign Up" et l'ai paramétrée, puis j'ai créé en HTML un message pour la confirmation, que les client reçoivent pour l'inscription à la newsletter, à la demande de mon tuteur. Voici le code HTML de la newsletter :
-
un widgets "Mots-clés" - qui permet de trier les articles par mots-clés (widgets existe deja sur wordpress).
Voici quelques creenshots :
A1.2.5 Définition des niveaux d'habilitation associés à un service
A1.3.3 Accompagnement de la mise en place d'un nouveau service
A2.1.1 Accompagnement des utilisateurs dans la prise en main d'un service
Pour réaliser les ces 2 activités une fois le blog en ligne, j'ai dû créer 2 comptes administrateurs et expliquer aux 2 utilisateurs comment utiliser le nouveau panneau d'administration et ce qu'il contrôle (ajouter des articles, des image, ou gérer les modules (widgets) ...)
A1.4.2 Évaluation des indicateurs de suivi d'un projet et justification des écarts
Pour suivre l'exécution du projet et analyser les écarts entre le temps prévu et le temps consommé du projet, j'ai utilisé leur logiciel Planzone. Voici le screenshot :
A1.4.3 Gestion des ressources
A4.1.1 Proposition d'une solution applicative
A1.3.4 Déploiement d'un service
Pour pouvoir gérer le blog en trois langues, j'ai dû faire des recherches de modules gratuits ou payant pour wordpress, et proposer quelques solutions à mon tuteur de stage, comme :
-
qTranslator (gratuit)
-
Multilingual Press Free (gratuit)
-
WPML (payant)
Suite à une discution avec mon tuteur de stage, nous avons comparé les extensions et nous avons décidé d'acheter l'extension WPML, car c'est celle qui correspond le mieux aux besoins de l'entreprise et donne une possibilité de gérer le blog sur trois noms de domaines différents, .FR, .COM et .DE. Puis nous avons comparé les abonnements que WPML propose. Nous avons decideé de prendre l'abonnment Multilingaul CMS car c'est celui qui donne accès à la gestion des trois noms de domaines. Nous avons testé le module pour vérifier s'il marche.
A4.1.2 Conception ou adaptation de l'interface utilisateur d'une solution applicative
Pour réaliser cette activité, j'ai dû adapter l'extension WPML, la paramétrer pour qu'elle gère les trois noms de domaines, choisir la langue par défaut et traduire le contenu du blog pour les utilisateurs en trois langues.
A4.1.3 Conception ou adaptation d'une base de données
La première partie du blog étant en local, j'ai dû importer la base de données du blog locale vers le blog en ligne. J'ai donc ouvert phpMyAdmin et exporté la base de données, puis modifié le fichier SQL pour remplacer les liens des images, articles et du reste du contenu du blog commançant par /localhost/... par les noms de domaines du blog en ligne www.planzone.fr, www.palnzone.com et www.planzone.de.
CREATION DES PAGES WEB - PLANZONE
A la demande de mon tuteur, la seconde partie de mon stage consistait en la création des pages web et en la retouche de la page d'accueil pour leur site web Planzone. Le site Planzone est créé sur Drupal, un système de gestion de contenu (CMS) libre et open-source, et écrit en PHP. La première partie de la création des pages web était en local. J'ai ensuite intégré mes codes HTML et CSS sur Drupal, puis j'ai adapté la mise en forme et rechangé les codes HTML et CSS car l'affichage en local et sur Druapl n'était pas le même.
Les activités mises en œuvre:
A1.1.1 Analyse du cahier des charges d'un service à produire
A1.1.3 Étude des exigences liées à la qualité attendue d'un service
A1.3.1 Test d'intégration et d'acceptation d'un service
A1.3.4 Déploiement d'un service
A1.4.1 Participation à un projet
A2.3.2 Proposition d'amélioration d'un service
Les pages web que j'ai dû créer et modifier sont la page de bénéfices, la page démonstration et la page d'accueil. Voici les codes utilisés et les résultats:
-
Page de bénéfices : le contenu m'a été fourni sous fichier Word. J'ai dû créer des icônes sur Photoshop pour chaque bénéfice. La mise en page m'a été fournie à l'oral.
Code HTML :
Code CSS :
-
Page démonstration : mon tuteur m'a demandé d'ajouter un en-tête. J'ai donc créé une nouvelle image en Photoshop puis l'ai ajoutée à la page et ai modifié la mise en page.
Code HTML :
-
Page d'accueil : j'ai dû ajouter des blocks bénéfice et service, puis ajouter un slider (carousel) qui permet d'afficher les clients de Planzone.
Code HTML (block bénéfice):
Code CSS :
Code HTML (block service):
Code HTML (carosel):
Code CSS :
Code HTML (slider):
A2.3.2 Proposition d'amélioration d'un service
J'ai proposé à mon tuteur d'ajouter un button back-to-top sur leur site Internet. Après avoir obtenu son accord, j'ai donc utilisé les codes suivants :
Code HTML :
Code CSS :
Code JavaScript :