Plaquette de stage - plone.unige.ch

Microsoft Word - 2014-05-23-Plaquette.docxM. Jean-Pierre LEHMANN Ecole ESIG
École Supérieure d’informatique de Gestion Année scolaire 2013-2014 Conseiller pédagogique M. Luc-André FONTAINE
C. BUCHER: Plaquette de stage 2 / 15
Remerciements
Je remercie toutes les personnes qui m’ont accompagnée et encouragée, tout au long de ma formation, ainsi que mes maîtres de stage Messieurs Jean-Pierre LEHMANN, Pierre-Yves BURGI, Olivier LUSTENBERG ainsi que mon conseiller pédagogique Monsieur Luc-André FONTAINE. A toutes les personnes que j'ai eu le plaisir de rencontrer tout au long de mon stage. A l’École Supérieure d'Informatique de Gestion et à l’ensemble des enseignants, pour m’avoir transmis leur savoir.
Table des matières
2. Environnement de travail ...................................................................................................... 5 2.1. Choix des outils .................................................................................................. 5
2.1.1. CMS à L’UNIGE ............................................................................................ 5 2.2. Outils utilisés ....................................................................................................... 6
3. Le Stage .................................................................................................................................. 7 3.1. Compétences .................................................................................................... 7
3.1.1. Reverse engineering ................................................................................... 7 3.1.2. Web Design .................................................................................................. 7 3.1.3. Développement avec CMS ....................................................................... 7
3.2. Objectifs .............................................................................................................. 7 3.2.1. Créer un thème à partir d’un site existant ............................................... 7 3.2.2. Déploiement du thème .............................................................................. 8
3.3. Travail effectué ................................................................................................... 8 3.3.1. Thème Neurosciences ................................................................................ 8 3.3.2. Site Test du Centre des Neurosciences .................................................... 9 3.3.3. Missions indépendantes ............................................................................. 9
Conclusion ..................................................................................................................................... 9
Bibliographie ................................................................................................................................ 10
Thème Neurosciences ........................................................................................... 11 Site des neurosciences .......................................................................................... 12
Page Brain Week ........................................................................................................ 13 Thème Neurosciences ........................................................................................... 13 Site des neurosciences .......................................................................................... 14
Footer .......................................................................................................................... 15 Thème Neurosciences ........................................................................................... 15 Site des neurosciences .......................................................................................... 15
Introduction
Étudiante en deuxième année à L’ESIG, j'effectue mon stage de 2ème année à L’Université de Genève (UNIGE) dans le groupe NTICE. Ce stage m'a permis de découvrir le travail d’un(e) informaticien(ne) de gestion au sein d’une équipe. L'enjeu de ce stage est de découvrir un nouvel univers professionnel et d'élargir mes compétences.
1. UNIGE
1.1. STIC
Système et Technologies de l’Information et de la Communication La division STIC est responsable de la coordination du dispositif de gestion du SI au sein de L’UNIGE. Site web :http://www.unige.ch/stic/acteurs/organigramme.html
1.2. NTICE
Nouvelles technologies de l’information, de la communication et de l’enseignement Le service NTICE développe des projets spécifiques dans le domaine académique afin de répondre aux demandes de la communauté universitaire et de proposer des nouvelles technologies. NTICE est un service appartenant à la division STIC. Site web : http://www.unige.ch/stic/acteurs/organigramme/ntice.html
2. Environnement de travail
2.1. Choix des outils
Le choix des outils a été fait en fonction du CMS1 qui m’a été demandé d’utiliser et l’environnement de travail que j’ai choisi. Par conséquent, j’ai choisi un serveur web ainsi que des éditeurs de texte compatibles avec Mac OSX. La plupart des outils utilisés sont gratuits et open source.
2.1.1. CMS à L’UNIGE
Les sites de L’UNIGE sont construits, pour la plupart, à l’aide de CMS ce qui permet une édition et publication des sites plus agile. En octobre 2013, un projet tenant comme objectif de remplacer le système institutionnel de gestion de contenu (Lenya) des sites Web par Concrete5 a été validé. Ce projet à été mené au sein du groupe NTICE par : Monsieur Olivier LUSTENBERG, ingénieur système et Monsieur Pierre-Yves BURGI, Directeur SI adjoint, en charge de NTICE. Lenya à L’UNIGE Lenya est un gestionnaire de contenu écrit en Java/XML basé sur le Framework Cocoon2. Le système institutionnel de gestion de contenu des sites Web « Lenya » a été introduit en 2005. Son objectif était d'uniformiser les sites et de simplifier le processus d'édition et de publication pour les rédacteurs des pages et gestionnaires des sites. Pourquoi Lenya a été remplacé ?
1. Son ancienneté 2. Sa communauté d'utilisateurs / contributeurs 3. L'éditeur de contenu WYSIWYG
Pourquoi Concrete5 ? L’interface utilisateur sur Concrete5 est plus simple et intuitive que sur Lenya. Concrete5 permet de programmer en PHP, HTML, Java Script et CSS des technologies déjà maitrisées et très largement utilisées au sein de l’Université de Genève.
• Une facilite de développement. • Projet open source disposant d'une communauté large et active. • Un grand nombre de modules pré -existants (payant ou gratuits) pour étendre les
fonctionnalités du système. • L’outil permet de fournir des affichages optimisés en fonction des différents
devices. • Pas de coûts de licences.
1 En anglais Content Management System ou en français Système de Gestion de Contenu (SGC). Famille de logiciels destinés à la conception de sites Web. 2 Apache Cocoon est un Framework de développement web. Il s'agit d'un projet libre de la Fondation Apache. Cocoon met en œuvre un système de pipeline de composants pour le développement d'applications Web.
2.2. Outils utilisés
• 5.6.2.1 (21.8.2013) • 5.6.3 (13.03.2014)
Concrete5 est un système de gestion de contenu. Disponible en open source depuis juin 2008.
• MAMP 2.2 MAMP3, permet de lancer un serveur web local, de créer et éditer un site web, il permet aussi de gérer les bases de données.
• PhpMyAdmin 4.0.6 Interface de gestion de base de données MySQL sur un serveur PHP4.
• NetBeans 7.3.1 Environnement de développement.
• TextWrangler 4.5.6 Editeur de texte.
• CSS3 Langage permettant la gestion de la présentation d’un site web.
• PHP 5.5.3 Langage de programmation utilisé pour créer des pages web dynamiques. Actuellement, PHP est le langage le plus courant en ce qui concerne la création de sites web dynamiques.
• HTML5 HTML5permet de structurer sémantiquement et de mettre en forme le contenu des pages web, d’inclure des ressources multimédias comme des images, des formulaires de saisie, entre autres. Ce langage est utilisé conjointement avec JavaScript, CSS 6et PHP.
• JavaScript Langage de programmation et de script.
• Apache 2.2.25 Serveur web.
3 Macintosh, Apache, MySQL et Perl. PHP ou Python. 4 HyperText Preprocessor. 5 Hypertext Markup Language. 6 Cascading Style Sheets ou en français feuilles de style en cascade.
3. Le Stage
Maîtres de stage • M. Jean-Pierre LEHMANN, Ingénieur Système. • M. Pierre Yves BURGI, Directeur SI adjoint, en charge de NTICE.
Conseiller pédagogique • M. Luc-André FONTAINE, Professeur d’informatique à L’ESIG.
3.1. Compétences
Tout au long de mon stage j’ai acquis de nouvelles compétences. Ces aptitudes m’ont permis de mieux comprendre et d’accomplir les tâches qui m’ont été confiées.
3.1.1. Reverse engineering
Est une technique qui consiste à étudier la composition et le fonctionnement d’un objet afin de l’analyser pour le reproduire. Dans le cadre de mon projet, l’objet à étudier était le site du centre des Neurosciences de Genève. A partir de ce site, j’ai créé un thème 7sur Concrete5 et j’ai reproduit des fonctionnalités semblables aux fonctionnalités proposées sur le site.
3.1.2. Web Design
Consiste à concevoir, des interfaces web. Un Web Designer doit tenir compte des différentes technologies du support Internet, notamment en ce qui concerne l’ergonomie et l’accessibilité. Il se peut qu’une interface web ne soit pas compatible sur tous les navigateurs, c’est pour cela qu’il faut veiller à avoir une interface universelle. Suite à l’analyse du site du centre des Neurosciences, j’ai conçu un thème respectant la ligne graphique du site, j’ai ainsi pu appliquer et développer des compétences de Web Designer.
3.1.3. Développement avec CMS
Le développement avec un CMS comprends des techniques particulières telles que l’utilisation de Framework8, car les gestionnaires de contenu possèdent des modules et des fonctionnalités spécifiques qui peuvent être réutilisées. Pour pourvoir concevoir un quelconque objet dans un CMS il faut, tout d’abord, en connaître la structure.
3.2. Objectifs
3.2.1. Créer un thème à partir d’un site existant
Neurosciences Geneva Center: http://neurosciences.hyperweek.com
7 Est un patron de mise en page il facilite la création d’un site car il permet de créer des objets possédant une même ligne graphique. Un thème donne à un site son identité visuelle par le choix des formes, de couleurs et de la typographie. 8 En programmation informatique, un framework est un ensemble cohérent de composants logiciels structurels, qui sert à créer les fondations ainsi que les grandes lignes de tout ou d’une partie d'un logiciel (architecture).
Le site du centre des Neurosciences de Genève, est appelé à disparaître dans un futur proche. C’est pour cette raison qu'un de mes objectifs durant le stage est de reproduire un thème qui correspond à la ligne graphique du site cité plus haut. Le thème permet d’être déployé dans plusieurs instances de concrete5, même si actuellement le thème est demandé par le département des neurosciences, il pourrait être utilisé pour plusieurs autres centres de recherche appartenant à l’université de Genève.
3.2.2. Déploiement du thème
Après avoir créé un thème correspondant à l’apparence de l’ancien site, j’ai réalisé une instance de Concrete5 afin de la mettre sur le serveur UNIGE. Concrete5, permet très facilement d’ajouter du contenu sur le site.
Fonctionnalités
Analyse et ajustement des fonctionnalités déjà proposées par Concrete5
• Package UNIGE Un package développé à l’UNIGE m’a été donné. Ce package comportes différentes fonctionnalités. Je dois effectuer certains ajustements, afin d'appliquer le package UNIGE au site.
• Recherche de Plug-in9 pour Concrète5 Concrete5 propose beaucoup de fonctionnalités, cependant pour le site que j’ai créé les fonctionnalités nécessaires étaient plus précises et ne figuraient pas dans celles par défaut de Concrete5. C’est pour cette raison que j’ai, avant tout, fait des recherches et des tests sur les fonctionnalités afin de les installer sur le site.
3.3. Travail effectué
3.3.1. Thème Neurosciences
Des captures d’écran figurent dans les Annexes à la fin du document. Création d’un thème pour Concrete5.
3.3.1.1. Étapes :
Analyse du site existant Extraction des données du site existant Création des éléments globaux :
• Header. • Footer. • Templates10. • Menu dynamique.
3.3.1.2. Difficultés rencontrées
Compatibilité entre les différents navigateurs.
9 Un plug-in, aussi nommé module externe ou add-on, est un paquet qui complète un logiciel pour lui apporter de nouvelles fonctionnalités. 10 Est un patron de mise en page où l'on place images, textes, vidéos... Il permet de créer des documents avec la même structure.
Application d’un logo dans le Header.
3.3.1.3. Travail à effectuer
• Formater les « single pages ». • Header, ajouter le Logo. • Uniformiser la mise en forme pour les navigateurs les plus courants.
3.3.2. Site Test du Centre des Neurosciences
• Création d’un site. • Implantation du thème Neurosciences. • Analyse et test du thème neurosciences.
3.3.2.1. Travail à effectuer
• Gestion des articles et des news. • Ajouter le package UNIGE. • Après la mise à jour de Concrete5, vérification du bon fonctionnement de tous les
éléments.
3.3.3. Missions indépendantes
Au cours de mon stage, j’ai eu le plaisir de partager les connaissances que j’ai acquis avec M. Radu Ionut Suciu, collaborateur scientifique du service de communication de la faculté de lettres. En effet j’ai effectué plusieurs petites missions de recherche et développement afin de lui présenter le fonctionnement de Concrete5.
3.3.3.1. Missions effectuées
• Recherches de plug-in, analyse des fonctionnalités disponibles sur le Market Place11 de Concrete5
• Plug-in pour le téléchargement de fichier.
3.3.3.2. Missions en cours
Conclusion
Durant mon stage à l’Université de Genève j'ai découvert plusieurs facettes du métier d’informaticien(ne) de Gestion. En effet, il doit continuellement faire des recherches, apprendre des nouveaux concepts, des nouvelles technologies afin de se maintenir a jour car l’informatique est un domaine qui ne cesse d’évoluer. Mon stage m'a beaucoup intéressée, j'ai pu découvrir le monde professionnel et avoir un aperçu global de ce qui m’attend dés l’obtention de mon diplôme ESIG. Ce stage m'a permis d’enrichir mes connaissances et d'avoir une approche réelle du monde du travail. J'ai pu faire le rapprochement entre ce que j'avais appris en cours et ce qui se passe vraiment dans la vie professionnelle, ce qui n'a pas toujours été facile car il faut savoir adapter les connaissances acquises aux besoins de l’entreprise.
11 Marché en ligne où l’on peut acheter et télécharger des thèmes ou add-ons.
Bibliographie
• « Proposition de mandat, Dossier No. 144: Évolution de la solution CMS des sites Web institutionnels » Rédigé par : Olivier Lustenberger
• http://www.concrete5.org/documentation/ • http://www.01net.com • http://fr.wikipedia.org/
Bucher Carolina
RESUME
Ce guide permet de comprendre les principales fonctionnalités de concrete5 ainsi que la structure et les éléments du thème des neurosciences.
2/8
Table des matières
Concrete5 ............................................................................................................................................ 3 Interface graphique ......................................................................................................................... 3 Edition ................................................................................................................................................. 3 Administration .................................................................................................................................... 3 La mise à jour ..................................................................................................................................... 4 La personnalisation ........................................................................................................................... 5
Thème des neurosciences ................................................................................................................. 6 Structure du thème ........................................................................................................................... 6 Add-Ons ............................................................................................................................................. 7
Installer un Add-On ....................................................................................................................... 7 Sélection pour le site des neurosciences .................................................................................... 8
3/8
Concrete5
Interface graphique
Concrete5 se base sur un système de thèmes permettant une personnalisation accrue du site. On dispose en standard de quatre façons de disposer les éléments d’une page, l’un est le blog, les 3 autres comportent un entête, une zone de contenu et pour deux d’entre eux une zone de navigation. Le tout, bien sûr, est configurable graphiquement.
Edition
La construction, ainsi que l’édition, d’un site motorisé par concrete5 se fait principalement en façade. Une fois connecté en administrateur, ou utilisateur ayant les droits de modification en rapport, vous pouvez directement ajouter des pages et modifier directement leur contenu, et leur structure.
Administration
L’administration a simplement une fonction administrative. Plus de besoin de passer par cette interface pour les tâches quotidiennes. La gestion des fichiers externes utilisables dans le site, la gestion des groupes d’utilisateurs et de leurs droits, l’étude des statistiques et des réponses aux formulaires relèvent de ses droits. Il peut aussi ajouter des fonctions ou des blocs, qui sont des définitions globales d’un type de contenu, un simple texte, une présentation d’images (un slideshow), un blog, un formulaire…s
4/8
La mise à jour
La structure de Concrete5 a été pensée pour que l’utilisateur puisse effectuer les mises à jour sans engendrer des bugs ou des pertes de fichiers. Car les fichiers du CMS sont séparés des fichiers édités et utilisés.
1. Lorsque un utilisateur, ayant le droit d’administrateur, est connecté. 2. Aller dans le Dashboard 3. Cliquer sur le lien du bas de la page « System & Settings », dans le block d’options
« BACKUP & RESTORE » cliquer sur le lien « Update concrete5 ». Une nouvelle fenêtre apparaîtra avec les informations de la mise à jour et un bouton
D a
sh b
o a
La personnalisation
Le moteur est réalisé de telle façon que l’utilisateur puisse ajouter des zones de contenu très facilement, suivant une structure simple et nominative.
1. Cliquer sur la zone où l’on souhaite aouter le nouveau block 2. Cliquer sur l’option Add a block 3. Choisir dans la fenêtre pop-up l’option souhaitée
6/8
Thème des neurosciences
Structure du thème
Afin que concrete5 reconnaisse un thème, la structure et le bon nommage des fichiers sont essentiels.
Nom du fichier Description
blog_entry.php Permettent d’avoir un patron de page. Uniquement le fichier default.php est obligatoire afin que le thème puisse être installé sur concrete5.
default.php
full.php
home.php
right_sidebar.php
view.php
Left_sidebar.php
elements Ce sous-répertoire contient le fichier header.php ainsi que le fichier footer.php qui sont les deux intégrés dans les pages types à la racine du thème.
main.css Ces fichiers définissent le style du thème tels que la police, la couleur de fond… typography.css
thumbnail.png Ce fichier vous permettra de mettre une petite image afin d’illustrer le thème.
description.txt Dans ce fichier texte figurent le nom du thème ansi qu’
Figure 1 Structure du thème
7/8
Add-Ons
Un add-on, ou plug-in, est un paquet qui complète un logiciel pour lui apporter de nouvelles fonctionnalités. Où trouver des add-ons pour concrete5 ? Sur marketplace de concrete5 ou sur internet. Il existe aussi la possibilité de développer soi même les add-ons pour concrete5.
Installer un Add-On
1. Se rendre sur le site : http://www.concrete5.org/marketplace/ 2. Acheter et ensuite télécharger le add-on. 3. Une fois le dossier téléchargé, copier le dossier complet dans le répertoire
« packages » à la racine du site. 4. Se connecter au site. 5. Aller dans le Dashboard et cliquer sur le lien « Extend concrete5 – Install, update
or download more themes and add-ons ».
6. Cliquer sur le bouton « install », à coté du add-on collé dans le répertoire
« packages ». Le add-on est prêt à être utilisé et disponible sur votre site.
8/8
Sélection pour le site des neurosciences
Suite à une analyse du site des neurosciences j’ai effectué une recherche des fonctionnalités existantes pour concrete5 qui permettent de reproduire les fonctionnalités du site analysé. Tous les Add-on que j’ai sélectionné sont gratuits. Site du centre des neurosciences: http://neurosciences.hyperweek.com
Whale nivo slider
by Shahroq Cette fonctionnalité permet d’intégrer un diaporama dans un block.
Easy News
by Hanicker Cette fonctionnalité permet de gérer facilement des news mais aussi de les partager.
Multilingual
by mlocati Permet de définir un attribut en plusieurs langues différentes afin que ces langues soient disponibles à la consultation du site.
Annexes
Site des neurosciences
Page Brain Week
Site des neurosciences
Footer

Documents

Plaquette de stage - plone.unige.ch