Site web pour les Trompes du Débuché de Céry

Dimension: px
Commencer à balayer dès la page:

Download "Site web pour les Trompes du Débuché de Céry"

Transcription

1 Richardot Émilian Laissue Mathieu Année 2014/2015 Site web pour les Trompes du Débuché de Céry Licence informatique 3 ème année Responsable de projet : Jean-Christophe Lapayre

2

3 Sommaire Introduction...4 1) Présentation du sujet /- Existant /- Fonctionnalités à implémenter...6 2) Outils de développement /- Langages /- Logiciels Utilisés...7 3) Réalisation /- Base de données.9-3.2/- Charte graphique/css /- Partie public /- L intranet /- Partie administration ) Gestion de projet /- Organisation - planning /- Problèmes rencontrés.. 24 Conclusion...25

4 Introduction Internet, largement démocratisé au cours des dix dernières années, est devenu un des moyens de communication privilégié de ce début du 21ème siècle. Entreprise, association, club, groupe, tous se font connaitre par le biais d internet via les réseaux sociaux, la création de blog ou de site web. De ce fait, la programmation web est devenue l un des aspects les plus courants du domaine informatique. Ainsi, dans le cadre de nos études en troisième année de licence informatique, il nous était demandé de réaliser en binôme un projet tutoré. C est dans ce cadre qui nous avons dû réaliser l amélioration d un site web déjà existant pour les Trompes du Débuché de Céry. Les Trompes du Débuché de Céry sont un groupe de sonneurs de trompes de chasse dont le but est de promouvoir et de faire connaitre la trompe de chasse en Franche-Comté. C est donc tout naturellement que le groupe a besoin d un site web leur permettant de promouvoir leur travail. Le groupe de trompes de chasse est affilié à la meute de chiens du Château de Céry nommé le Rallye Loue-Lison. L équipe du Rallye Loue-Lison a été créé pour la chasse à courre à pied du lièvre. Et les Trompes du Débuché de Céry animent entre autres ces chasses, mais aussi des dîners spectacles, des mariages Le but était donc de modifier ce site pour rendre la mise à jour du contenu plus facile et plus rapide, ainsi que de le rendre visuellement plus attrayant que ce soit pour les visiteurs ou les membres du groupe. Ce projet a donc nécessité la création d une nouvelle charte graphique ainsi que l élaboration d une base de données simple afin de mettre de l ordre dans le contenu du site, jusque-là stocké en «brute» sur le site. Dans ce présent document, nous parlerons des différentes phases du projet. Nous commencerons donc par entrer plus en détails dans le sujet et les tâches qui nous étaient demandées. Ensuite, nous aborderons les différents moyens techniques que nous avons utilisés puis nous détaillerons les différents points sur lesquels nous avons travaillé. Enfin, nous passerons en revue l organisation de projet avant de finir sur une conclusion. 4

5 1) Description du sujet Pour ce projet il nous a été demandé d'améliorer le site web des Trompes du débuché de Céry depuis l'existant situé sur l'hébergeur free (debuchedecery.free.fr) et d intégrer de nouvelles fonctionnalités. Nous devions développer de telle façon que cela s intègre parfaitement dans l'hébergeur free, celui-ci ayant quelques contraintes pour lesquelles nous reviendrons dessus plus tard. 1.1/- Présentation de l'existant Pour présenter l'existant nous allons partir de l'image ci-dessous. Figure 1: Existant du site L'image ne correspond pas exactement au site d origine mais s'en rapproche très fortement. De prime abord, on peut voir que le site n'était pas très attrayant et qu'il proposait peu de contenus aux visiteurs (un lien vers une photo, un lien vers le compte Facebook du groupe et un autre vers rallyelouelison.fr). Le message d accueil était modifiable uniquement en modifiant le code source de la page. L'intranet était accessible à l'aide d'un mot de passe et permettait de voir les chants du groupe, les fanfares à travailler, les fanfares pour le cours débutant et enfin une page qui regroupe tout ce qui concerne la prochaine sortie du groupe (fanfares en chants, fanfares en seconde ou basse et le programme du concert). 5

6 Le problème de l'intranet tel qu il était construit était que, pour ajouter une musique, il fallait passer par FileZilla et ajouter la musique dans le dossier correspondant. Il pouvait donc y avoir plusieurs fois la même musique mais à différents endroits car chaque page prend le contenu d'un dossier correspondant. Cela prenait du temps, était fastidieux mais surtout les musiques prenaient du coup beaucoup de place sur le serveur ce qui aurait pu poser un problème à long terme. Il nous a été demandé de garder quelques éléments de ce site en les modifiant. C'est-à-dire un message d accueil, le titre Les Trompes du Débuché de Céry, un lien vers le compte Facebook du groupe, un lien vers rallyelouelison.fr, l'intranet ainsi qu'un lien vers les photos. 1.2/- Fonctions à implémentées Pour le projet, améliorer uniquement les éléments du site existant n'aurait pas été suffisant pour créer un site avec un contenu suffisant. C'est pourquoi de nouvelles fonctionnalités nous ont été demandées. Pour la partie publique, il fallait : accéder aux différentes dates de concerts accéder à la liste des membres du groupe ranger les photos dans des albums regarder les vidéos du groupe envoyer un mail directement depuis le site sur la boîte mail debuchedecery@hotmail.fr Pour l'intranet, il fallait modifier celui-ci pour ne plus avoir plusieurs fois la même musique sur le serveur du site dans différents endroits. Mais le contenu des pages web de l'intranet devait rester le même que dans l'existant. Une partie administration nous a été demandée, elle devait permettre : de changer le message d'accueil de gérer les dates de concerts de gérer les membres du groupe de gérer les albums et photos de gérer les vidéos de gérer les musiques de l'intranet de gérer les programmes et paroles ainsi que les uploader d'uploader des musiques depuis le site d'uploader des images depuis le site sans avoir à les redimensionner 6

7 2) Outil de développement 2.1/- Langages HTML/CSS Le HTML («HyperText Mark-Up Language») est le langage qui permet de structurer un page web. Le CSS («Cascading Style Sheets» : feuilles de style en cascade) est un langage informatique complétant le HTML. Alors que le HTML structure la page Web, le CSS va la mettre en forme. PHP/MySQL Le PHP est un langage de script exécuté du côté serveur et non du côté client. Ses principaux atouts en font un des langages web le plus utilisé : - la gratuité et la disponibilité du code source ; - la simplicité d'écriture de scripts ; - la possibilité d'inclure le script PHP au sein d'une page HTML C est également un langage simple à utiliser avec des bases de données. Son utilisation est compatible avec une base de MySQL. Lors de la création d'un site sur l'hébergeur free celui-ci fournit une base de données MySQL liée au site. Nous n'avons pas utilisé de Framework tel que Joomla ou Django car nous n'en n avons aucune expérience et maîtriser un Framework aurait pris trop de temps. En plus il aurait fallu se renseigner, se documenter pour savoir si ceux-ci étaient pleinement compatibles avec l'hébergeur free. JavaScript Le JavaScript est un langage de script incorporé dans un document HTML. Ce langage est un langage de programmation qui permet d'apporter des améliorations au langage HTML en permettant d'exécuter des commandes du côté client, c'est-à-dire au niveau du navigateur et non du serveur web. Nous avons utilisé du JavaScript pour les fonctions que l'on ne pouvait développer en PHP ou si les fonctions PHP était bloquées par l hébergeur (ex : redimensionnement d'image) 7

8 2.2/- Logiciels utilisés WampServer WampServer est une plate-forme de développement Web sous Windows pour exécuter des applications Web dynamiques en local FileZilla FileZilla est un client FTP qui permet de transférer des fichiers sur un serveur distant. Pour le projet nous avions accès à un autre site sur l'hébergeur free pour pouvoir tester nos différentes pages sur cet hébergeur. 8

9 3) Réalisation 3.1/- Base de données La base de données que nous avons créée pour le site est extrêmement simple, son but étant principalement d alléger l arborescence des fichiers du FTP et de rendre l enregistrement des données et du contenu du site moins chaotique. Voici la base de données utilisées pour mettre un peu d ordre sur le site. Figure 2: Modèle BDD Sur ce modèle, nous pouvons donc discerner sept tables, utilisées pour un besoin spécifique du site : vidéo, concert, file, membre, album, photo et programme. Nous allons donc voir tout de suite à quoi peuvent bien nous servir des tables aussi simples. La table vidéo possède un id ainsi qu un champ du type varchar permettant d enregistrer les liens des vidéos. Cette table sera donc utilisée uniquement pour enregistrer et afficher les différentes vidéos du groupe sur le site. La table concert possède un id ainsi que trois autres champs permettant respectivement d enregistrer la date, l adresse et l heure des différents concerts. Elle est donc utilisée uniquement pour la gestion des concerts. La table file est, pour notre site, utilisée exclusivement pour enregistrer les musiques mais pourrait cependant être utilisée pour enregistrer tous types de fichiers. Le champ name de type varchar fait office d id pour cette table. Les champs type (varchar) et updated_date servent respectivement à stocker le type de fichier ainsi que la date à laquelle celui-ci a été enregistré. 9

10 Le champ data est du type longblob, c est ici que le fichier en lui-même est stocké (en binaire). Les cinq derniers champs sont des booléens qui permettent de savoir à quelles fanfares appartiennent les musiques. La table photo et album sont reliées entre elles afin de pouvoir savoir à quel album appartient telle photo. Les photos en elles-mêmes ne sont cependant pas stockées directement dans la base de données contrairement aux musiques, mais sont stockées sur le FTP dans un dossier prévu à cet effet. C est un script PHP qui permet de mettre en relation les photos contenues dans le dossier et les données enregistrées dans la BDD. La table Membre est constituée d un id et de trois champs varchar qui permettent d enregistrer le nom des membres ainsi leurs fonctions dans le groupe. Le champ photomembre permet d associer la photo enregistrée sur le serveur aux membres contenu dans la BDD. La table programme est constituée d un id et du nom du fichier. Cette table a été créée afin de mettre en relation les documents contenus dans le dossier programme du serveur et les données enregistrées dans la BDD. De plus le message d accueil est enregistré dans la base de données mais n est pas visibles sur l image ci-dessus. Mais pourquoi enregistrer les musiques dans la BDD et pas les photos? La réponse à cette question est simple. Les traitements liés aux musiques ne sont pas souvent sollicités et se limitent, de manière simple, à enregistrer, supprimer ou lire une musique. En revanche, les photos, quant à elles sont en permanences sollicitées, que ce soit pour leur affichage en miniature lors de leurs administrations, leurs visionnages ou encore leurs affichages dans le bandeau déroulant en bas de pages. Tous ces traitements, et notamment le dernier, sont plus faciles lorsqu elles sont stockées directement sur le site et non dans la base de données. 10

11 3.2/- Charte graphique/css Chaque page du site web est construite de la même manière. Pour rentrer un peu plus dans les détails, nous allons partir de la page d'accueil du site. Figure 3: Page d'accueil Toutes les pages sont divisées en cinq parties : tout en haut au centre une bande contenant le nom du groupe Les Trompes du Débuché de Céry à gauche une bande constituée des différents liens pour naviguer dans le site, ses liens peuvent changer suivant où l'on se trouve dans le site (ex : lorsque l'on rentre dans l'intranet). au centre un bloc qui peut s'agrandir en hauteur si besoin. C'est à l'intérieur de ce bloc que s'affichent les informations de la page (ex : en allant sur la page vidéo, les vidéos seront affichées dans ce bloc). à droite une bande constituée d'une image redirigeant vers le compte Facebook du groupe, en dessous le logo du groupe ainsi qu'un lien vers en bas de page un bandeau d'image défilante effectué en JavaScript qui contient toutes les photos présentes sur le site. 11

12 L'image de fond ne change pas, c'est la même pour tout le site. Cette image est une photo du Château de Céry. Les différents boutons de couleur présent sur le site ne sont pas de vrais boutons mais de simples balises <a> auxquelles nous avons ajouté du CSS. Figure 4: Boutons CSS 3.3/- Partie public Nous allons voir ici les différentes pages auxquelles un visiteur quelconque à accès lorsqu il visite le site. Les différentes parties du site sont disponibles depuis la page d accueil (voir figure 3) : Un visiteur lambda a alors accès à cinq onglets différents situés dans la bande gauche de la page : Date de concerts, Membres du groupe, Photos, Vidéos ainsi que Contact. Un lien pour le Facebook des Trompes du Débuché de Céry et pour le site rallyelouelison.fr et également disponible à droite de la page. Notons que par la suite, les informations des différentes images se situent dans le bloc central du site. L onglet date des concerts redirige vers une page où est affiché la liste des concerts et les informations les concernant récupérées depuis la base de données via un script PHP/MySQL. L onglet Membres du groupe permet de manière similaire à l onglet date des concerts, d afficher la liste des membres comme suit : Figure 5: Tableau liste membre 12

13 L onglet Photos, permet d obtenir la liste des albums existants. Un script PHP/MySQL permet d afficher la première photo pour chaque album, et s est avec JavaScript que l on affiche le nom de l album correspondant lorsque l on survole une image avec le curseur de souris. Figure 6: Liste albums Lorsque l on clique sur le nom de l album ou sur la bande noire, on accède alors à une nouvelle page où des miniatures des photos sont affichées avec du code PHP. Figure 7: Liste photos Enfin, lorsque l on clique sur une miniature, un script JavaScript se lance et permet de visualiser la photo en taille réelle, et de toutes les regarder sans avoir besoin de quitter le mode «taille réelle», en cliquant simplement à droite ou à gauche des photos. Figure 8: Visionnage photo 13

14 L onglet vidéo permet de visionner directement sur le site les vidéos YouTube dont les liens sont enregistrés dans la base de données. Une fois ceux-ci récupérés de la BDD avec PHP/MySQL, ils sont directement incorporés comme éléments html. Figure 9: Liste vidéos Enfin, l onglet contact permet aux visiteurs d envoyer directement un mail depuis le site à une adresse mail stockée dans une variable PHP. L envoi d est entièrement géré par du PHP à l aide de certaines fonctions spécifiques, notamment la fonction PHP mail(). Figure 10: Formulaire contact 14

15 3.4/- L intranet Avant de pouvoir accéder au menu de l'intranet il faut rentrer un mot de passe. Figure 11: Accès intranet Une fois le mot de passe rentré et correct le menu change pour celui de l'intranet. Le menu de l'intranet contient des liens vers les différentes fanfares ainsi qu un lien vers les programmes et paroles. Pour ces pages on va chercher les données qu il nous faut en passant par la base de données MySQL et non pas en allant chercher les musiques dans les différents dossiers sur le serveur comme dans l ancien site. Mais une différence est tout de même présente pour les musiques, on lit les données de celles-ci dans la base à l aide d une fonction JavaScript tandis que pour les noms des documents présents dans la base on va lire le fichier correspondant dans le dossier programme du serveur. Figure 12: Menu intranet Le bloc central de chaque page est construit de la même façon avec la liste des musiques correspondante ou la liste des documents pour Programmes && Paroles. Les différents liens ouvrent un fichier dans un nouvel onglet en cliquant dessus. Figure 13: Affichage musique 15

16 3.4/- Partie administration Pour accéder au menu d'administration, il suffit de cliquer sur l'image «Zone ADMIN» Figure 14: Bouton Admin Celle-ci est présente sur toutes les pages en dessous du menu. Si lorsque l'on clique dessus et que l'on ne s est pas encore connecté, on est redirigé vers un formulaire de connexion. Figure 15: Connexion Admin Une fois la connexion effectuée, on peut accéder au menu d'administration en cliquant sur l'image Zone ADMIN mais aussi se rendre dans l'intranet sans rentrer le mot de passe. La connexion est valide jusqu à ce que l'on quitte le site. Après avoir cliqué sur l'image Zone ADMIN, la page où l'on se trouve et mise au deuxième plan avec le menu administrateur en premier plan à gauche de la page. Si l'on veut quitter le menu administrateur, il suffit de cliquer sur la page pour qu'elle revienne en premier plan et que le menu administrateur disparaisse. Cette fonction a été développée en JavaScript Figure 16: Zone Admin Avec cette méthode le mode administrateur devient plus accessible car on peut accéder à son menu depuis n'importe quelle page du site et ainsi éviter à l'administrateur d'aller sur la page qu'il souhaite modifier. 16

17 - a) Gestion message d accueil En arrivant sur la page pour modifier le message d accueil, on voit une zone de texte avec le message d'accueil à l intérieur ainsi qu une barre d'outils au-dessus qui permet de modifier le style du texte (choix de police, mettre en gras, changer la taille, changer de couleur ). Une fois validé, le texte est parsé par un script JavaScript qui va formater le texte avec les balises HTML ainsi que le CSS à rajouter à l'intérieur des balises avant de le sauvegarder dans la base de données. L'édition de la zone de texte est aussi effectuée en JavaScript. Figure 17: Gestion message accueil - b) Gestion des dates de concerts En arrivant sur la page on voit la liste des concerts déjà présents dans le site que l'on peut modifier ou supprimer avec le bouton correspondant. On peut aussi ajouter un concert. Figure 18: Liste concerts En cliquant sur ajouter ou modifier on est redirigé vers un formulaire qui est vide si c'est un nouveau concert, ou rempli si l'on modifie un concert. Figure 19: Formulaire concert 17

18 - c) Gestion des membres Sur la page on voit la liste des membres déjà présents sur le site et comme dans la gestion des dates de concerts on peut les modifier ou les supprimer. Figure 20: Gestion des membres En cliquant sur ajouter ou modifier il se passe la même chose que pour la gestion de date de concert, seul les formulaires sont différents. Figure 21: Modification membre - d) Gestion des musiques/photos Si nous traiterons ici de la gestion des musiques et des photos/albums, alors que leurs gestions sont séparées sur le site, c est parce que celles-ci possèdent plusieurs points communs. En effet, la manière dont sont construites les différentes pages reste similaire dans les deux cas, et utilisent un fichier CSS commun ainsi que des fonctions JavaScript commune. Le plus gros point commun est donc le système de «drag & drop» qui va permettre l upload d images ou de musiques qui est dans les deux cas, similaire en de nombreux points. 18

19 Figure 22: Drag & Drop Tous les éléments de ce «drag & drop» se trouvent dans un formulaire html. C est ce formulaire qui varie selon que l on upload des photos ou des musiques (par exemple des champs «checkbox» supplémentaires pour les musiques). La zone de drop est une balise html div, qui est «surveillée» par une fonction JavaScript. Lorsque l on fait glisser un ou plusieurs fichiers dans cette zone, un évènement est détecté et une série de fonctions JavaScript sont exécutées. C est la valeur d un champ caché propre qui va permettre de savoir comment nous allons traiter exactement les données du formulaire. En revanche, que ce soit pour les photos ou les musiques, le principe reste le même, la barre de progression est construite et affichée par des fonctions JavaScript, et le traitement de la grande majorité des données ainsi de l affichage du résultat sont réalisés à l aide de scripts PHP appelés dynamiquement avec Ajax. Précisons également que les fichiers sont envoyés à l aide de la création d objet FormData. Nous allons maintenant voir séparément comment les musiques et les photos sont enregistrées. 1) Les musiques : Lorsque l on ajoute des musiques, une fonction Ajax permet donc d appeler une page PHP qui va traiter les données récupérées du formulaire par les fonctions JavaScript. Pour traiter efficacement ces données, une classe nommée «file» contenant plusieurs méthodes a été implémentée dans un fichier séparé. Parmi celles-ci se trouve une méthode «upload» permettant, à l aide de requêtes SQL préparées, d enregistrer en binaire les données d un fichier, son nom ainsi que son type dans la table file de la BDD. On trouve également une méthode «download», qui permet de récupérer ces données et de les lire/afficher correctement. 19

20 La page PHP appelée par la fonction Ajax va donc créer une nouvelle instance de la classe file puis appeler la fonction «upload». Les données restantes (relatives à l appartenance à une ou plusieurs fanfares) sont ensuite traitées à l aide de PHP/MySQL, et un message de résultat est créé et affiché. Figure 23: Gestion musiques En ce qui concerne la liste des musiques, un script PHP/MySQL va récupérer les données contenues dans la BDD et va construire au fur et à mesure le tableau dans une variable PHP qui est ensuite affichée. 2) Les photos Bien que les photos ne soient pas enregistrées directement dans la base de données, l ajout de celles-ci nécessite une étape supplémentaire JavaScript avant l appelle d une page PHP avec Ajax, le redimensionnement. Chaque image est donc redimensionnée avant d être envoyée avec Ajax. Pour ce faire, on charge tout d abord l image dans un objet «Image» JavaScript. Pour ce qui est du redimensionnement en lui-même, on détermine tout d abord la largeur et la hauteur de l image d origine, puis on calcule la nouvelle hauteur et largeur (qui ne doivent pas dépasser 1024 pixels dans notre cas) tout en conservant le ratio hauteur/largeur. On dessine ensuite l image redimensionnée dans un canvas, qui est une balise HTML5 que l'on peut utiliser comme un outil de traitement d'images. Une fois notre image redimensionnée dans un canvas sous la forme d une DataURL, on convertit cette DataURL en binaire dans un objet «Blob» (objet de données binaire). Une fois cela réalisé, on peut enfin envoyer les données, ainsi que les données binaires de notre nouvelle image à notre page PHP via Ajax. Dans cette page PHP, on créé un nouveau fichier (variable de type «file»), ayant pour nom le nom de l image d origine avec les données binaires de l image redimensionnée. 20

21 On déplace ensuite ce fichier dans le dossier correspondant aux photos et on enregistre avec du code PHP/MySQL le nom de la nouvelle photo dans la BDD ainsi que l id de l album auquel elle appartient. Figure 24: Gestion albums/photos Le tableau des albums est construit de la même manière que celui des musiques, et permet d accéder à la liste des photos pour chaque album, construite également suivant le même procéder. - e) Gestion des vidéos Pour la page gestion des vidéos, on a toutes les vidéos présentes sur le site qui s'affichent avec un bouton supprimer au-dessus de celle-ci et une barre en dessous pour les différencier. Figure 25: Gestion vidéos On peut aussi ajouter de nouvelles vidéos à l'aide d'un formulaire dans lequel il faut copier le texte d intégration fourni par YouTube dans le champ correspondant. 21

22 - f) Gestion des programmes et paroles Pour la gestion des programmes de prestations et paroles des chants il est possible d en ajouter à l aide d un système d upload, dont le fonctionnement est le même que pour les images sans redimensionnement mais dont le dossier de destination, lui, est différent. On peut aussi voir le fichier depuis cette page et le supprimer. On peut y uploader tous types de fichiers tant que ceux-ci on leurs taille inférieure à 2 Mo. Figure 26: Gestion sortie 22

23 4) Gestion de projet 4.1) Planning Afin de mener à bien notre projet dans les meilleures conditions, nous avons planifié les différentes tâches à réaliser. Voici donc comment s est déroulé la réalisation de nos travaux dans le temps : Figure 27: Planning Bien évidemment, ce diagramme de Gant n est pas à 100% fidèle à ce que nous avons réalisé. Nous n avons pas travaillé pendant certaines périodes (semaine de partiels) De plus, le fait que certaines tâches paraissent longues s explique par les problèmes qui surviennent suite à une mise en ligne, pas toutes représentées sur ce diagramme, cellesci étant réalisées fréquemment (après chaque implémentation de fonctionnalités). 23

24 4.2) Problèmes rencontrés Au début de ce projet, nous ne pensions rencontrer que peu de problèmes. L élaboration du site devait en effet être réalisée essentiellement avec des pages html/php reliées avec une petite base de données. Malheureusement, c est après la toute première mise en ligne de notre travail sur le site test jcalbums que la majorité des problèmes apparurent. L hébergeur qui nous était imposé, free.fr, allait en effet être source de nombreux problèmes. C est d ailleurs suite à cette première mise en ligne que nous avons décidé de mettre à jour le site test jcablums plus régulièrement. Tout d abord, il faut savoir que nous avions à l origine développé la gestion de la base de données sur nos pages avec l extension PHP PDO (PHP Data Objects). Celleci n étant pas disponible sur notre hébergeur, nous avons donc dû reprendre tous les scripts l utilisant, et notamment les traitements de la classe «file» (qui gère l enregistrement des musiques dans la BDD) et de les retranscrire avec l extension MySQL, moins pratique dans de nombreux cas. Un autre problème survenu est la version PHP de l hébergeur. Cette version, la 4.4.3, ne nous permettait pas d utiliser toutes les fonctions que nous utilisions pour nos traitements. Nous sommes donc passés manuellement à la version à l aide d un fichier HTACCESS, version maximale possible cher free.fr. Il fallait également changer l encodage de tous les fichiers en «UTF8 sans BOM» à la place de l UTF8 standard, qui créaient des warnings chez notre hébergeur. Enfin, la limitation de 2 Mo pour la taille des POST en PHP a été source de problème. En effet, free.fr est l un des seuls hébergeurs qui n autorise pas la modification des variables associées (tel que «upload_max_filesize») via un fichier HTACCESS. En ce qui concerne les photos, nous avons donc dû réaliser le redimensionnement des photos côté client via JavaScript, ce qui se trouve être sensiblement plus compliqué qu en PHP. Dans le cas des musiques, il nous a été impossible de contourner cette limite, le développement d un code permettant de réduire la taille ou de «couper» correctement une musique étant trop complexe et gourmand en temps. 24

25 Conclusion Les problèmes rencontrés, bien qu ils n aient pas tous été infranchissables, ont cependant été sources de ralentissement et de perte de temps dans le développement de notre projet. Le site est tout de même opérationnel, la majorité des fonctions demandées ont été implémentées. Il reste peut-être quelques erreurs minimes mais le plus gros problème viendra lorsque l hébergeur free mettra à jour sa version de PHP. À partir de la version 5.3 les fonctions mysql sont considérées comme obsolètes et il faudra donc modifier celles-ci en fonctions mysqli ou PDO. Le site fonctionnera encore mais il risque d'y avoir des warnings qui s'affichent à chaque utilisation de mysql, c'est-à-dire dans toutes les pages du site. Grâce à ce projet nous avons amélioré nos compétences ainsi que nos connaissances, surtout dans la programmation JavaScript et l'implémentation du CSS. Pour le site nous avons préféré utiliser davantage les langages orientés client (géré par le navigateur) plutôt que de tout faire en PHP car nous étions limités au niveau des fonctionnalités. Si nous devions recommencer le projet, nous regarderions en premier lieu la version de PHP disponible sur l'hébergeur, ainsi que les fonctions liées à cette version, mais aussi les différentes variables de PHP présent dans le php.ini, qui, pour ce projet, sont non modifiables, car free interdit leurs modifications. Pour conclure nous espérons que vous avez pris autant de plaisir à lire ce rapport que nous en avons pris durant tout le déroulement de ce projet. 25

26 Table des Matières Introduction...4 1) Présentation du sujet /- Existant /- Fonctionnalités à implémenter...6 2) Outils de développement /- Langages /- Logiciels Utilisés..7 3) Réalisation /- Base de données.9-3.2/- Charte graphique/css /- Partie public /- L intranet /- Partie administration...16 a) Gestion message d accueil.17 b) Gestion des dates de concerts.17 c) Gestion des membres..18 d) Gestion des musiques/photos..18 1) Les musiques ) Les photos...20 e) Gestion des vidéos...21 f) Gestion des programmes et paroles ) Gestion de projet /- Organisation - planning /- Problèmes rencontrés Conclusion.25 26

27 Table des figures Figure 1: Existant du site... 5 Figure 2: Modèle BDD... 9 Figure 3: Page d'accueil Figure 4: Boutons CSS Figure 5: Tableau liste membre Figure 6: Liste albums Figure 7: Liste photos Figure 8: Visionnage photo Figure 9: Liste vidéos Figure 10: Formulaire contact Figure 11: Accès intranet Figure 12: Menu intranet Figure 13: Affichage musique Figure 14: Bouton Admin Figure 15: Connexion Admin Figure 16: Zone Admin Figure 17: Gestion message accueil Figure 18: Liste concerts Figure 19: Formulaire concert Figure 20: Gestion des membres Figure 21: Modification membre Figure 22: Drag & Drop Figure 23: Gestion musiques Figure 24: Gestion albums/photos Figure 25: Gestion vidéos Figure 26: Gestion sortie Figure 27: Planning

Diffuser un contenu sur Internet : notions de base... 13

Diffuser un contenu sur Internet : notions de base... 13 Diffuser un contenu sur Internet : notions de base... 13 1.1 Coup d œil sur l organisation de cet ouvrage.............. 15 Préambule : qu est-ce qu une page web?................ 16 À propos du HTML...........................

Plus en détail

Comment se connecter au dossier partagé?

Comment se connecter au dossier partagé? Comment se connecter au dossier partagé? Physique Strasbourg Ingénierie 4 avril 2013 Table des matières 1 But du tutoriel 1 2 Client FTP : Filezilla 2 2.1 Téléchargement et installation du client de partage......................

Plus en détail

MODULES 3D TAG CLOUD. Par GENIUS AOM

MODULES 3D TAG CLOUD. Par GENIUS AOM MODULES 3D TAG CLOUD Par GENIUS AOM 1 Sommaire I. INTRODUCTIONS :... 3 II. INSTALLATION MANUELLE D UN MODULE PRESTASHOP... 3 III. CONFIGURATION DU MODULE... 7 3.1. Préférences... 7 3.2. Options... 8 3.3.

Plus en détail

Les sites Internet dynamiques. contact : Patrick VINCENT pvincent@erasme.org

Les sites Internet dynamiques. contact : Patrick VINCENT pvincent@erasme.org Les sites Internet dynamiques contact : Patrick VINCENT pvincent@erasme.org Qu est-ce qu un site Web? ensemble de pages multimédia (texte, images, son, vidéo, ) organisées autour d une page d accueil et

Plus en détail

Groupe Eyrolles, 2003, ISBN : 2-212-11317-X

Groupe Eyrolles, 2003, ISBN : 2-212-11317-X Groupe Eyrolles, 2003, ISBN : 2-212-11317-X 3 Création de pages dynamiques courantes Dans le chapitre précédent, nous avons installé et configuré tous les éléments indispensables à la mise en œuvre d une

Plus en détail

Sommaire : Pourquoi créer un site web? Qu est-ce qu un site Web? Les différents types de sites. Quelles solutions peuvent être employées?

Sommaire : Pourquoi créer un site web? Qu est-ce qu un site Web? Les différents types de sites. Quelles solutions peuvent être employées? Sommaire : Pourquoi créer un site web? Qu est-ce qu un site Web? Les différents types de sites Quelles solutions peuvent être employées? Présentation d une des solutions Conclusion Aujourd hui le web est

Plus en détail

KompoZer. Composition du site : _ une page d'accueil : index.html. _ une page pour la théorie : theorie.html. _ une page pour les photos : photos.

KompoZer. Composition du site : _ une page d'accueil : index.html. _ une page pour la théorie : theorie.html. _ une page pour les photos : photos. KompoZer Créer un site «simple» Composition du site : _ une page d'accueil : index.html _ une page pour la théorie : theorie.html _ une page pour les photos : photos.html _ une page avec la galerie : galerie.html

Plus en détail

Espace de travail collaboratif

Espace de travail collaboratif Espace de travail collaboratif 1/10 Table des matières Présentation...3 Les modules...4 LiveCounter, Messenger et Moteur de recherche...5 Utilisateur, Administrateur et Invité...5 Droits d'accès au contenu...6

Plus en détail

Manuel du composant CKForms Version 1.3.2

Manuel du composant CKForms Version 1.3.2 Manuel du composant CKForms Version 1.3.2 Ce manuel vous présente les principales fonctionnalités du composant CKForms y compris le module et le plug-in CKForms 1.3 est la nouvelle version du composant

Plus en détail

145A, avenue de Port Royal, Bonaventure (Québec) G0C 1E0 Sans frais : 1 888 765 4636 www.solutioninfomedia.com

145A, avenue de Port Royal, Bonaventure (Québec) G0C 1E0 Sans frais : 1 888 765 4636 www.solutioninfomedia.com Guide de l utilisateur CMS 1 Navigation dans le CMS... 2 1.1 Menu principal... 2 1.2 Modules tableau... 3 1.3 Modules formulaire... 5 1.4 Navigation dans le site Web en mode édition... 6 2 Utilisation

Plus en détail

Administration du site (Back Office)

Administration du site (Back Office) Administration du site (Back Office) A quoi sert une interface d'administration? Une interface d'administration est une composante essentielle de l'infrastructure d'un site internet. Il s'agit d'une interface

Plus en détail

Le logiciel de création de site internet IZISPOT est un outil très puissant et qui est assez simple après quelques temps d utilisation.

Le logiciel de création de site internet IZISPOT est un outil très puissant et qui est assez simple après quelques temps d utilisation. 1 Le logiciel de création de site internet IZISPOT est un outil très puissant et qui est assez simple après quelques temps d utilisation. Voici un mode opératoire qui vous guidera dans l utilisation de

Plus en détail

ContactForm et ContactFormLight - Gestionnaires de formulaire pour Prestashop Edité par ARETMIC S.A.

ContactForm et ContactFormLight - Gestionnaires de formulaire pour Prestashop Edité par ARETMIC S.A. ContactForm et ContactFormLight - Gestionnaires de formulaire pour Prestashop Edité par ARETMIC S.A. - 1 - PREAMBULE Les conditions générales d utilisation détaillant l ensemble des dispositions applicables

Plus en détail

Le service de création de site Internet : Mode d emploi. La Création de Site Internet

Le service de création de site Internet : Mode d emploi. La Création de Site Internet Le service de création de site Internet : Mode d emploi Sommaire 1) Comment se connecter à votre interface client? 2) Comment démarrer la création de votre site Internet? 3) Comment gérer les pages de

Plus en détail

Optimiser pour les appareils mobiles

Optimiser pour les appareils mobiles chapitre 6 Optimiser pour les appareils mobiles 6.1 Créer un site adapté aux terminaux mobiles avec jquery Mobile... 217 6.2 Transformer son site mobile en application native grâce à PhoneGap:Build...

Plus en détail

Espace numérique de travail collaboratif

Espace numérique de travail collaboratif Espace numérique de travail collaboratif 1/10 Présentation Agora Project est un espace de travail collaboratif complet et intuitif. Cette application est accessible partout et à tout moment, via un simple

Plus en détail

MANUEL WORDPRESS. Objectif: Refonte d un site web sous Wordpress I PRE-REQUIS: 1 / Créer un backup (sauvegarde) du site:

MANUEL WORDPRESS. Objectif: Refonte d un site web sous Wordpress I PRE-REQUIS: 1 / Créer un backup (sauvegarde) du site: MANUEL WORDPRESS Objectif: Refonte d un site web sous Wordpress I PRE-REQUIS: 1 / Créer un backup (sauvegarde) du site: A/ Traitement de la base de données: Pour cette étape, vous aurez besoin au préalable

Plus en détail

Formation Webmaster : Création de site Web Initiation + Approfondissement

Formation Webmaster : Création de site Web Initiation + Approfondissement Contactez notre équipe commerciale au 09.72.37.73.73 Aix en Provence - Bordeaux - Bruxelles - Geneve - Lille - Luxembourg - Lyon - Montpellier - Nantes - Nice - Paris - Rennes - Strasbourg - Toulouse Formation

Plus en détail

CMS Made Simple Version 1.4 Jamaica. Tutoriel utilisateur Récapitulatif Administration

CMS Made Simple Version 1.4 Jamaica. Tutoriel utilisateur Récapitulatif Administration CMS Made Simple Version 1.4 Jamaica Système de gestion de contenu CMS Made Simple est entièrement gratuit sous licence GPL. Tutoriel utilisateur Récapitulatif Administration Le système de gestion de contenu

Plus en détail

Association UNIFORES 23, Rue du Cercler 87000 LIMOGES

Association UNIFORES 23, Rue du Cercler 87000 LIMOGES RAPPORT DE STAGE Association UNIFORES 23, Rue du Cercler 87000 LIMOGES LOHUES Théo BTS SIO 1 ère année Lycée suzanne valadon 2013-2014 Table des matières I. Présentation de l'entreprise...3 II. Description

Plus en détail

RÉALISATION D UN SITE DE RENCONTRE

RÉALISATION D UN SITE DE RENCONTRE RÉALISATION D UN SITE DE RENCONTRE Par Mathieu COUPE, Charlène DOUDOU et Stéphanie RANDRIANARIMANA Sous la coordination des professeurs d ISN du lycée Aristide Briand : Jérôme CANTALOUBE, Laurent BERNARD

Plus en détail

Notes pour l utilisation d Expression Web

Notes pour l utilisation d Expression Web EICW Formation Webmaster Notes pour l utilisation d Expression Web G. Barmarin 2008-2009 1 /21 Table des matières 1 Introduction... 3 2 Installer Expression Web... 4 3 Explorer et personnaliser l interface

Plus en détail

Aide Webmail. L environnement de RoundCube est très intuitif et fonctionne comme la plupart des logiciels de messagerie traditionnels.

Aide Webmail. L environnement de RoundCube est très intuitif et fonctionne comme la plupart des logiciels de messagerie traditionnels. Aide Webmail 1. Découverte de l environnement : L environnement de RoundCube est très intuitif et fonctionne comme la plupart des logiciels de messagerie traditionnels. 1. La barre d application (1) Les

Plus en détail

CRÉER, ROUTER ET GÉRER UNE NEWSLETTER, UN E-MAILING

CRÉER, ROUTER ET GÉRER UNE NEWSLETTER, UN E-MAILING CRÉER, ROUTER ET GÉRER UNE NEWSLETTER, UN E-MAILING Durée : 3J / 21H Formateur : Consultant expert en PAO et Web-marketing. Groupe de : 4 max Formation au web marketing Objectifs : Mettre en oeuvre des

Plus en détail

ÉDITION JUILLET 2014

ÉDITION JUILLET 2014 ÉDITION JUILLET 2014 Manuel d utilisation WebAcappella 4 Juillet 2014 SIMPLIFIEZ-VOUS LE WEB AVEC LE MANUEL D UTILISATION WEBACAPPELLA 4 Copyright Intuisphere - Tous droits réservés 0 Copyright Intuisphere

Plus en détail

7.0 Guide de la solution Portable sans fil

7.0 Guide de la solution Portable sans fil 7.0 Guide de la solution Portable sans fil Copyright 2010 Sage Technologies Limited, éditeur de ce produit. Tous droits réservés. Il est interdit de copier, photocopier, reproduire, traduire, copier sur

Plus en détail

EXTENSION WORDPRESS. Contact Form 7. Proposé par :

EXTENSION WORDPRESS. Contact Form 7. Proposé par : Contact Form 7 Proposé par : Sommaire Sommaire... 2 Présentation... 3 I. Le Tutoriel... 3 1) Espace de travail... 3 2) Téléchargez les extensions nécessaires... 3 3) Configuration du Formulaire... 7 1)

Plus en détail

Exposer ses photos sur Internet

Exposer ses photos sur Internet Exposer ses photos sur Internet Vous souhaitez montrer vos photos à votre famille ou vos amis? Pour cela, il existe de nombreuses solutions : vous pouvez effectuer un envoi groupé par email, créer un site

Plus en détail

RAPPORT DE PROJET CREATION SITE WEB POUR L ASSOCIATION PETITS PRINCES DE L OUED

RAPPORT DE PROJET CREATION SITE WEB POUR L ASSOCIATION PETITS PRINCES DE L OUED RAPPORT DE PROJET CREATION SITE WEB POUR L ASSOCIATION PETITS PRINCES DE L OUED Tuteurs du projet : Julien LORRAIN Thomas SERMIER Licence Pro SIL CDOOAM 2012/2013 1 SOMMAIRE REMERCIEMENTS... 3 I. INTRODUCTION...

Plus en détail

Installation d'une galerie photos Piwigo sous Microsoft Windows.

Installation d'une galerie photos Piwigo sous Microsoft Windows. Installation d'une galerie photos Piwigo sous Microsoft Windows. By ARNOULD Julien Introduction : Piwigo est un logiciel de galerie photo pour le web, bâti autour d'une communauté active d'utilisateurs

Plus en détail

Construction d un Site Internet Dynamique avec Joomla René-Yves Hervé, Ph.D.

Construction d un Site Internet Dynamique avec Joomla René-Yves Hervé, Ph.D. Construction d un Site Internet Dynamique avec Joomla René-Yves Hervé, Ph.D. TABLE DES MATIÈRES I. Présentation de Joomla II. III. IV. Documents disponibles Installation de Joomla 3.1) Installation sur

Plus en détail

Comment utiliser RoundCube?

Comment utiliser RoundCube? Comment utiliser RoundCube? La messagerie RoundCube est très intuitive et fonctionne comme la plupart des logiciels de messagerie traditionnels. A. Découverte de l'environnement 1/ La barre d application

Plus en détail

Étape 1 / CHOISIR UN HÉBERGEMENT

Étape 1 / CHOISIR UN HÉBERGEMENT expérience HÉberger son blog Wordpress Pour des projets modestes ou si on veut juste s essayer à la publication en ligne, on peut créer un blog chez un hébergeur clés en mains et gratuit (ex: Blogger,

Plus en détail

Créer un site Web : mode d emploi Sous SPIP, avec le squelette «établissement» de l académie de Versailles

Créer un site Web : mode d emploi Sous SPIP, avec le squelette «établissement» de l académie de Versailles Mission TICE - académie de Versailles 7 nov. 2008 Créer un site Web : mode d emploi Sous SPIP, avec le squelette «établissement» de l académie de Versailles Anne-Cécile Franc Mission TICE académie de Versailles

Plus en détail

Support Web Administration et gestion des portails web des facultés - Université A.Mira Béjaia -

Support Web Administration et gestion des portails web des facultés - Université A.Mira Béjaia - UVERSITE A. MIRA - BEJAIA Support Web Administration et gestion des portails web des facultés - Université A.Mira Béjaia - Prise en main de CMS Joomla Exploitation des ressources Recommandations et Règles

Plus en détail

Saisissez le login et le mot de passe (attention aux minuscules et majuscules) qui vous ont

Saisissez le login et le mot de passe (attention aux minuscules et majuscules) qui vous ont I Open Boutique Sommaire : I Open Boutique... 1 Onglet «Saisie des Produits»... 3 Création d'une nouvelle fiche boutique :... 3 Création d'une nouvelle fiche lieux de retraits :... 10 Création d'une nouvelle

Plus en détail

Projet 2. Gestion des services enseignants CENTRE D ENSEIGNEMENT ET DE RECHERCHE EN INFORMATIQUE. G r o u p e :

Projet 2. Gestion des services enseignants CENTRE D ENSEIGNEMENT ET DE RECHERCHE EN INFORMATIQUE. G r o u p e : CENTRE D ENSEIGNEMENT ET DE RECHERCHE EN INFORMATIQUE Projet 2 Gestion des services enseignants G r o u p e : B E L G H I T Y a s m i n e S A N C H E Z - D U B R O N T Y u r i f e r M O N T A Z E R S i

Plus en détail

Dans cette Unité, nous allons examiner

Dans cette Unité, nous allons examiner 13.0 Introduction Dans cette Unité, nous allons examiner les fonctionnements internes d une des plateformes de publication web les plus largement utilisées de nos jours sur l Internet, WordPress. C est

Plus en détail

Publier dans la Base Documentaire

Publier dans la Base Documentaire Site Web de l association des ingénieurs INSA de Lyon Publier dans la Base Documentaire Remarque : la suppression des contributions n est pas possible depuis le Front-Office. lbuisset Page 1 18/09/2008

Plus en détail

GUIDE DE DEMARRAGE RAPIDE:

GUIDE DE DEMARRAGE RAPIDE: GUIDE DE DEMARRAGE RAPIDE: COMMENT CREER VOTRE BOUTIQUE EN LIGNE Vous voulez créer votre propre boutique en ligne? C est désormais plus simple que jamais. Suivez simplement les instructions de ce guide

Plus en détail

Guide de démarrage rapide

Guide de démarrage rapide Comment démarrer rapidement votre Box e-commerce. Guide de démarrage rapide Autres supports : Vidéos démos disponibles sur le portail. Contactez notre service client : 0 969 366 636 Guide de démarrage

Plus en détail

Chapitre 2 Créer son site et ses pages avec Google Site

Chapitre 2 Créer son site et ses pages avec Google Site Réaliser un site internet à l aide de Google Site 10 Chapitre 2 Créer son site et ses pages avec Google Site 1. Créer un Google site 1. Rendez-vous sur www.google.be et connectez-vous à votre compte Gmail

Plus en détail

Les outils de création de sites web

Les outils de création de sites web Tuto 1ère séance - p1 Les outils de création de sites web Sources : Réalisez votre site web avec HTML5 et CSS3 de Mathieu Nebra (Edition Le Livre du Zéro) site fr.openclassrooms.com (anciennement «site

Plus en détail

Description des pratiques à adopter pour la mise à jour du layout en utilisant le gestionnaire de conception de Sharepoint 2013

Description des pratiques à adopter pour la mise à jour du layout en utilisant le gestionnaire de conception de Sharepoint 2013 Exemple d utilisation du gestionnaire de conception Description des pratiques à adopter pour la mise à jour du layout en utilisant le gestionnaire de conception de Sharepoint 2013 6, rue de l Etang, L-5326

Plus en détail

Utiliser un CMS: Wordpress

Utiliser un CMS: Wordpress Utiliser un CMS: Wordpress Annie Danzart Annie.Danzart@telecom-paristech.fr Wordpress Concevoir un site web statique Concevoir un site web dynamique Choisir un hébergement Choix du CMS Wordpress: installation

Plus en détail

SOMMAIRE 1 INTRODUCTION 4 2 GUIDE D UTILISATION ET TUTORIAUX VIDEOS EN LIGNE 4 3 CONTACTER VOTRE SUPPORT 4 4 RACCOURCIS CLAVIER 5

SOMMAIRE 1 INTRODUCTION 4 2 GUIDE D UTILISATION ET TUTORIAUX VIDEOS EN LIGNE 4 3 CONTACTER VOTRE SUPPORT 4 4 RACCOURCIS CLAVIER 5 SOMMAIRE 1 INTRODUCTION 4 2 GUIDE D UTILISATION ET TUTORIAUX VIDEOS EN LIGNE 4 3 CONTACTER VOTRE SUPPORT 4 4 RACCOURCIS CLAVIER 5 5 ADMINISTRER SON SITE WEBGAZELLE CMS 2.0 5 5.1 Configuration minimale

Plus en détail

Manuel d'utilisation de l'administration du site Japo.ch - 1

Manuel d'utilisation de l'administration du site Japo.ch - 1 Manuel d'utilisation de l'administration du site Japo.ch 1. Identification L'administration est protégée par une identification. Veuillez saisir ici votre nom d'utilisateur et votre mot de passe. Manuel

Plus en détail

Rapport de stage. Création d un site web. Stage du 20/01/2013 au 21/02/2013

Rapport de stage. Création d un site web. Stage du 20/01/2013 au 21/02/2013 Rapport de stage Création d un site web Stage du 20/01/2013 au 21/02/2013 Auteur : Antoine Luczak Tuteur professionnel : M. Tison Tuteur scolaire : Mme Girondon Année scolaire : 2013/2014 1 Table des matières

Plus en détail

1. Introduction... 2. 2. Création d'une macro autonome... 2. 3. Exécuter la macro pas à pas... 5. 4. Modifier une macro... 5

1. Introduction... 2. 2. Création d'une macro autonome... 2. 3. Exécuter la macro pas à pas... 5. 4. Modifier une macro... 5 1. Introduction... 2 2. Création d'une macro autonome... 2 3. Exécuter la macro pas à pas... 5 4. Modifier une macro... 5 5. Création d'une macro associée à un formulaire... 6 6. Exécuter des actions en

Plus en détail

Soyez accessible. Manuel d utilisation du CMS

Soyez accessible. Manuel d utilisation du CMS Soyez accessible. Manuel d utilisation du CMS Nameo : mode d emploi Nameo est une agence web basée en Alsace, à Strasbourg. Son champ d action : création ou refonte de sites internet, stratégie et mise

Plus en détail

REALISER UN SITE INTERNET AVEC IZISPOT SOMMAIRE

REALISER UN SITE INTERNET AVEC IZISPOT SOMMAIRE REALISER UN SITE INTERNET AVEC IZISPOT Voici un tutoriel pour vous aider à réaliser un petit site internet (4 pages) à l'aide du logiciel gratuit IZISPOT. Dans l'exemple qui suit, il s'agit de mettre en

Plus en détail

Création WEB avec DreamweaverMX

Création WEB avec DreamweaverMX Creation Web avec DreamweaverMX MX Initiation Sommaire.preparation.mise en forme.liens hypertextes.images.liens sur images.images avec zones sensibles.images survolees.liens de type courriel.apercu dans

Plus en détail

Guide d utilisation 2012

Guide d utilisation 2012 Guide d utilisation 2012 Tout ce dont vous avez besoin pour bien démarrer REACOM La performance marketing SOMMAIRE Démarrez avec reagiciel Accédez à votre console d administration 4 Gestion internet Aperçu

Plus en détail

www.evogue.fr SUPPORT DE COURS / PHP PARTIE 3

www.evogue.fr SUPPORT DE COURS / PHP PARTIE 3 L i a m T A R D I E U www.evogue.fr SUPPORT DE COURS / PHP PARTIE 3 Sommaire Sommaire... 2 Eléments initiaux... 3 Base de données... 3 Tables... 4 membres... 4 commandes... 4 articles... 4 details_commandes...

Plus en détail

Publication dans le Back Office

Publication dans le Back Office Site Web de l association des ingénieurs INSA de Lyon Publication dans le Back Office Note : dans ce guide, l'appellation GI signifie Groupe d'intérêt, et GR Groupe Régional laure Buisset Page 1 17/09/2008

Plus en détail

SARL DDLX Multimédia Place du général de Gaule 34160 Boisseron Tèl :09 7219 85 01 Email : support@ddlx.org. Agence Web. Design Prestashop personnalisé

SARL DDLX Multimédia Place du général de Gaule 34160 Boisseron Tèl :09 7219 85 01 Email : support@ddlx.org. Agence Web. Design Prestashop personnalisé SARL DDLX Multimédia Place du général de Gaule 34160 Boisseron Tèl :09 7219 85 01 Email : support@ddlx.org Agence Web Design Prestashop personnalisé création de boutique en ligne site de présentation site

Plus en détail

Nouveautés joomla 3 1/14

Nouveautés joomla 3 1/14 Nouveautés joomla 3 1/14 Table des matières 1 Responsive... 1 2 Bootstrap... 1 3 LESS CSS intégré... 1 4. JUI (pour les développeurs d'extensions)... 1 5. Le Mambo days vs le Génial UX... 2 6. 7 étapes

Plus en détail

ESPACE MULTIMEDIA DU CANTON DE ROCHESERVIERE

ESPACE MULTIMEDIA DU CANTON DE ROCHESERVIERE ESPACE MULTIMEDIA DU CANTON DE ROCHESERVIERE Session découverte La Gestion des photos avec Windows Vista / Windows 7 et le traitements d images numériques 1 Généralités sur le jargon de l image numérique

Plus en détail

Content Management System. bluecube. Blue Cube CMS V4.3 par Digitalcube

Content Management System. bluecube. Blue Cube CMS V4.3 par Digitalcube Content Management System bluecube V4.3 1 SOMMAIRE Avant-propos Découvrir le CMS Blue Cube Les modules Les clients BLUE CUBE CMS V4.3 par Digitalcube 2 CMS sans bugs 3 Avant-propos Facile à prendre en

Plus en détail

Partie publique / Partie privée. Site statique site dynamique. Base de données.

Partie publique / Partie privée. Site statique site dynamique. Base de données. Partie publique / Partie privée. Partie publique - Front office / Partie privée - Back office. Utiliser l analogie avec une émission de télévision. Un journal télévisé = 1 journaliste + des reportages.

Plus en détail

Numérisation. Copieur-imprimante WorkCentre C2424

Numérisation. Copieur-imprimante WorkCentre C2424 Numérisation Ce chapitre contient : «Numérisation de base», page 4-2 «Installation du pilote du scanner», page 4-4 «Réglage des options de numérisation», page 4-5 «Récupération des images», page 4-11 «Gestion

Plus en détail

Utilisation de l éditeur.

Utilisation de l éditeur. Utilisation de l éditeur. Préambule...2 Configuration du navigateur...3 Débloquez les pop-up...5 Mise en évidence du texte...6 Mise en évidence du texte...6 Mise en page du texte...7 Utilisation de tableaux....7

Plus en détail

INTERNET est un RESEAU D ORDINATEURS RELIES ENTRE EUX A L ECHELLE PLANETAIRE. Internet : interconnexion de réseaux (anglais : net = réseau)

INTERNET est un RESEAU D ORDINATEURS RELIES ENTRE EUX A L ECHELLE PLANETAIRE. Internet : interconnexion de réseaux (anglais : net = réseau) CS WEB Ch 1 Introduction I. INTRODUCTION... 1 A. INTERNET INTERCONNEXION DE RESEAUX... 1 B. LE «WEB» LA TOILE, INTERCONNEXION DE SITES WEB... 2 C. L URL : LOCALISER DES RESSOURCES SUR L INTERNET... 2 D.

Plus en détail

Présentation de Firefox

Présentation de Firefox Présentation de Firefox A l ouverture la fenêtre ressemble a ceci. (A noter qu ici j ai ouvert la page d accueil GOOGLE) Firefox présente toutes les fonctionnalités de base d un navigateur comme Internet

Plus en détail

Administration du site

Administration du site Administration du site 1 TABLE DES MATIÈRES Administration du site... 1 Accéder à la console d administration... 3 Console d administration... 4 Apparence... 4 Paramètres... 5 Allez sur le site... 5 Edition

Plus en détail

Tutoriaux : Faites vos premiers pas avec Microsoft Visio 2010

Tutoriaux : Faites vos premiers pas avec Microsoft Visio 2010 Tutoriaux : Faites vos premiers pas avec Microsoft Visio 2010 Les tutoriaux suivants vous guident dans l utilisation de Visio 2010. Certaines vidéos sont disponibles sur le site. Tutoriaux : Faites vos

Plus en détail

CREER UN PETIT SITE WEB EN COMPOSANT DES PAGES HTML

CREER UN PETIT SITE WEB EN COMPOSANT DES PAGES HTML CREER UN PETIT SITE WEB EN COMPOSANT DES PAGES HTML A L'AIDE DU LOGICIEL LIBRE OFFICE Libre Office 3.3.3 et Open Office.org 3.3.0 sont deux suites bureautiques complètes, équivalentes (seule la charte

Plus en détail

WEB & DÉVELOPPEMENT LES BASES DU WEB LE LANGAGE HTML FEUILLES DE STYLES CSS HISTORIQUE D INTERNET ET DU WEB LES DIFFÉRENTS LANGAGES

WEB & DÉVELOPPEMENT LES BASES DU WEB LE LANGAGE HTML FEUILLES DE STYLES CSS HISTORIQUE D INTERNET ET DU WEB LES DIFFÉRENTS LANGAGES WEB & DÉVELOPPEMENT LES BASES DU WEB HISTORIQUE D INTERNET ET DU WEB LES DIFFÉRENTS LANGAGES LE LANGAGE HTML STRUCTURE D UNE PAGE En-tête et corps Syntaxe INSÉRER DES CONTENUS Texte : formatage (titre,

Plus en détail

Joomla! Création et administration d'un site web - Version numérique

Joomla! Création et administration d'un site web - Version numérique Avant-propos 1. Objectifs du livre 15 1.1 Orientation 15 1.2 À qui s adresse ce livre? 16 2. Contenu de l ouvrage 17 3. Conclusion 18 Introduction 1. Un peu d histoire pour commencer... 19 1.1 Du web statique

Plus en détail

SOMMAIRE. Présentation assistée sur ordinateur. Collège F.Rabelais 1/10

SOMMAIRE. Présentation assistée sur ordinateur. Collège F.Rabelais 1/10 /0 SOMMAIRE. Lancer le logiciel. Mettre un titre dans une diapositive et du texte. Ajouter une diapositive 4. Créer une diapositive avec une image 5. Créer une diapositive avec un graphique 6. Créer une

Plus en détail

Créer son site internet avec Jimdo. Web business

Créer son site internet avec Jimdo. Web business Créer son site internet avec Jimdo Web business Créer vous-même votre site internet avec Jimdo. En quelques clics, vous pourrez créer gratuitement un site dédié à votre activité et donnez de la visibilité

Plus en détail

GROUPE CAHORS EXTRANET

GROUPE CAHORS EXTRANET GROUPE CAHORS EXTRANET GUIDE UTILISATEUR Tous les utilisateurs de l Extranet s'engagent à ne pas divulguer, à l'extérieur de Groupe Cahors, les informations consultées ou collectées dans l'extranet. Cela

Plus en détail

Qlik Sense Cloud. Qlik Sense 2.0.2 Copyright 1993-2015 QlikTech International AB. Tous droits réservés.

Qlik Sense Cloud. Qlik Sense 2.0.2 Copyright 1993-2015 QlikTech International AB. Tous droits réservés. Qlik Sense Cloud Qlik Sense 2.0.2 Copyright 1993-2015 QlikTech International AB. Tous droits réservés. Copyright 1993-2015 QlikTech International AB. Tous droits réservés. Qlik, QlikTech, Qlik Sense, QlikView,

Plus en détail

Créer un site Internet dynamique

Créer un site Internet dynamique Créer un site Internet dynamique avec SPIP (version 3) Document de référence Denise St-Pierre animatrice au service local du Récit 1. Qu est-ce que SPIP?... 3 2. Caractéristiques de SPIP... 3 3. Quelques

Plus en détail

Afin d accéder à votre messagerie personnelle, vous devez vous identifier par votre adresse mail et votre mot de passe :

Afin d accéder à votre messagerie personnelle, vous devez vous identifier par votre adresse mail et votre mot de passe : 1 CONNEXION A LA MESSAGERIE ZIMBRA PAR LE WEBMAIL Ecran de connexion à la messagerie Rendez vous dans un premier temps sur la page correspondant à votre espace webmail : http://webmailn.%votrenomdedomaine%

Plus en détail

Formation. Module WEB 4.1. Support de cours

Formation. Module WEB 4.1. Support de cours Formation Module WEB 4.1 Support de cours Rédacteur Date de rédaction F.CHEA 08/02/2012 Les informations contenues dans ce document pourront faire l'objet de modifications sans préavis Sauf mention contraire,

Plus en détail

De EnvOLE 1.5 à EnvOLE 2. Document pour l administrateur

De EnvOLE 1.5 à EnvOLE 2. Document pour l administrateur De EnvOLE 1.5 à EnvOLE 2 Document pour l administrateur 1 INDEX 1/ Introduction :... 3 2/ Contenu du CEL 2.0 à l issue de la migration... 4 Votre CEL est-il migré?... 4 Accès aux deux versions du CEL...

Plus en détail

Placez vous au préalable à l endroit voulu dans l arborescence avant de cliquer sur l icône Nouveau Répertoire

Placez vous au préalable à l endroit voulu dans l arborescence avant de cliquer sur l icône Nouveau Répertoire L espace de stockage garantit aux utilisateurs une sauvegarde de leurs fichiers dans une arborescence à construire par eux-mêmes. L avantage de cet espace de stockage est son accessibilité de l intérieur

Plus en détail

SPECIFICATIONS TECHNIQUES : Gestion des Médicaments et des commandes de médicaments

SPECIFICATIONS TECHNIQUES : Gestion des Médicaments et des commandes de médicaments SPECIFICATIONS TECHNIQUES : Gestion des Médicaments et des commandes de médicaments Développement d une application en web/ client lourd en C# permettant la gestion des médicaments et des commandes de

Plus en détail

On trouvera sur le site du CCDMD un exemple d album construit avec Cantare. (http://www.ccdmd.qc.ca/ri/cantare)

On trouvera sur le site du CCDMD un exemple d album construit avec Cantare. (http://www.ccdmd.qc.ca/ri/cantare) Cantare 2 Introduction L outil logiciel Cantare s adresse à toute personne qui veut construire des leçons visant l apprentissage d une langue par l écoute de chansons ou de fichiers sonores dont les paroles

Plus en détail

Comment utiliser WordPress»

Comment utiliser WordPress» Comment utiliser WordPress» Comment utiliser WordPress» Table des matières» Table des matières Guide de démarrage rapide»... 2 Tableau de bord de WordPress»... 3 Rédiger un article»... 3 Modifier l article»...

Plus en détail

Projet en nouvelles technologies de l information et de la communication

Projet en nouvelles technologies de l information et de la communication Projet en nouvelles technologies de l information et de la communication Site Web universitaire du Prof. Jacques Moeschler. Nono Steeve Semestre de printemps 2013 Sous la direction du Prof Luka Nerima

Plus en détail

Guide pour la réalisation d'un document avec Open Office Writer 2.2

Guide pour la réalisation d'un document avec Open Office Writer 2.2 Guide pour la réalisation d'un document avec Open Office Writer 2.2 1- Lancement de l'application : Le Traitement de textes de la Suite OpenOffice peut être lancé : soit depuis le menu «Démarrer / Programmes/OpenOffice2.2/Writer

Plus en détail

Access 2007 FF Access FR FR Base

Access 2007 FF Access FR FR Base ACCESS Basic Albertlaan 88 Avenue Albert Brussel B-1190 Bruxelles T +32 2 340 05 70 F +32 2 340 05 75 E-mail info@keyjob-training.com Website www.keyjob-training.com BTW TVA BE 0425 439 228 Access 2007

Plus en détail

pcon.planner 6 Préparer et présenter une implantation en toute simplicité

pcon.planner 6 Préparer et présenter une implantation en toute simplicité pcon.planner 6 Préparer et présenter une implantation en toute simplicité Sommaire 1. Installation :... 3 2. Démarrer le logiciel :... 3 3. Interface :... 3 4. Naviguer :... 4 5. Réaliser une implantation

Plus en détail

Création d un site Internet

Création d un site Internet Création d un site Internet Weebly.com Johanne Raymond Collège Lionel Groulx, mai 2010 Service du soutien à l enseignement et Plan de réussite Ouvrir un compte sur Weebly... 1 Modifier le modèle... 2 Ajouter

Plus en détail

Prise en main rapide

Prise en main rapide Prise en main rapide 4 Dans cette leçon, vous découvrirez les fonctionnalités de création de page web de Dreamweaver et apprendrez à les utiliser dans l espace de travail. Vous apprendrez à : définir un

Plus en détail

Comment faire pour créer ses propres pages html?

Comment faire pour créer ses propres pages html? . Comment faire pour créer ses propres pages html? Insérer une vidéo Pour ajouter une vidéo de votre choix, il vous faut insérer, dans un premier temps, un tableau dans lequel vous placerez un mot, par

Plus en détail

INSERER DES OBJETS - LE RUBAN INSERTION... 3 TABLEAUX

INSERER DES OBJETS - LE RUBAN INSERTION... 3 TABLEAUX TABLE DES MATIERES Livret Utilisateur Excel 2007 Niveau 2 INSERER DES OBJETS - LE RUBAN INSERTION... 3 TABLEAUX... 4 Les tableaux croisés dynamiques... 4 Création d un tableau croisé... 5 Comparer des

Plus en détail

Guide d usage pour Word 2007

Guide d usage pour Word 2007 Formation TIC Septembre 2012 florian.jacques@etsup.com Guide d usage pour Word 2007 ETSUP 8 villa du Parc Montsouris 75014 PARIS SOMMAIRE Interface... 2 Organiser son espace de travail... 3 La barre d

Plus en détail

Contenu. Thème «responsive» pour WordPress Installer le thème responsive (disponible aussi sur le site wordpress.org) Activer ce thème

Contenu. Thème «responsive» pour WordPress Installer le thème responsive (disponible aussi sur le site wordpress.org) Activer ce thème 1 Contenu Thème «responsive» pour WordPress... 1 Options du thème... 2 Logo et page d accueil :... 2 Réseaux sociaux... 2 Widget... 3 Widget accueil... 3 Widget supérieur... 4 Widget colophon... 4 Formulaire

Plus en détail

Installation de Joomla avec Filezilla

Installation de Joomla avec Filezilla Installation de Joomla avec Filezilla Le but de cette manipulation est d apprendre à installer le CMS Joomla sur un hébergement classique, dans ce cas de type mutualisé. Quand vous souscrivez à un hébergement,

Plus en détail

Graphisme et Design. L'interface client respectera votre charte graphique et sera adaptée selon vos recommandations.

Graphisme et Design. L'interface client respectera votre charte graphique et sera adaptée selon vos recommandations. Site Internet IMUSTBE est une société de service dans le domaine de l informatique et particulièrement dans le domaine de la réalisation de projets Internet et la mise en place, la maintenance ainsi que

Plus en détail

Manuel d utilisation de l outil collaboratif

Manuel d utilisation de l outil collaboratif Manuel d utilisation de l outil collaboratif Réf OCPD-V2 Page 1 / 24 a mis en œuvre un outil collaboratif qui permet de partager des informations entre collaborateurs. Il permet à des utilisateurs travaillant

Plus en détail

Organiser le disque dur Dossiers Fichiers

Organiser le disque dur Dossiers Fichiers Ce document contient des éléments empruntés aux pages d aide de Microsoft Organiser le disque dur Dossiers Fichiers Généralités La connaissance de la logique d organisation des données sur le disque dur

Plus en détail

Premiers Pas avec OneNote 2013

Premiers Pas avec OneNote 2013 Premiers Pas avec OneNote 2 Présentation de OneNote 3 Ouverture du logiciel OneNote 4 Sous Windows 8 4 Sous Windows 7 4 Création de l espace de travail OneNote 5 Introduction 5 Présentation des différentes

Plus en détail

Tutoriel BLOGGER. Pour vous donner une idée, voici un exemple de blog : http://formationlaragne.blogspot.fr/

Tutoriel BLOGGER. Pour vous donner une idée, voici un exemple de blog : http://formationlaragne.blogspot.fr/ Tutoriel BLOGGER Blogger est un outil Google gratuit de publication de blogs qui permet de partager du texte, des photos et des vidéos. C est un outil simple, bénéficiant du référencement de Google, ce

Plus en détail

GUIDE D UTILISATION CRÉER SON SITE WEB - PROJET RESCOL

GUIDE D UTILISATION CRÉER SON SITE WEB - PROJET RESCOL GUIDE D UTILISATION CRÉER SON SITE WEB - PROJET RESCOL 1. Avant de commencer Il existe plusieurs éditeurs de pages Web qui vous permettent de construire un site Web. Nous vous conseillons toutefois de

Plus en détail