Sommaire. Introduction

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

Download "Sommaire. Introduction"

Transcription

1

2 2 Sommaire Introduction Concept Problématique...5 Aspect...7 Modélisation 3D...9 Scénario d utilisation...10 Partie technique...12 Evolution de la balle...13 Site internet Introduction...14 Structure du site...15 Technologie et langages utilisés...16 Logiciels utilisés...17 Optimisations...19 Partie administrateur...19 Partie visiteur...19 Résultats d analyse Web...20 Référencement...21 Compatibilité navigateur...22 Version mobile du site internet Pourquoi une version mobile?...23 L adaptation...23 Outils utilisés...24 Comptabilité...24

3 3 Sommaire Application mobile Concept et fonctionnalités...25 Outils utilisés...26 Communication Cible...27 Analyse SWOT...28 Campagne de communication...29 Charte graphique Identité visuelle...33 Charte graphique web...35 Maquettes site internet...37 Version mobile du site internet...41 Maquette Application...42 Gestion de projet Outils de travail...43 Plannings...45 Veille...49 Problèmes rencontrées...49 Annexes Détails des campagnes de communication...43 Cahier des charges fonctionnelle...43

4 4 Introduction Concept Site web Site web mobile Application Communication Graphisme Gestion Annexes Introduction... Ce document a pour but d apporter des solutions techniques à la démarche initiée dans le cahier des charges fonctionnel. Il a également pour but d affiner le projet en confrontant la démarche de conception réflexive à la réalité de la conception technique. Il doit cerner tous les aspects de la réalisation de la balle, qu ils soient matériels, logiciels ou communicationnels.

5 5 Introduction Concept Site web Site web mobile Application Communication Graphisme Gestion Annexes Concept... Notre démarche est de créer un objet de design génératif qui s intègre dans l environnement des concerts de musiques actuelles. L objet s inspire des technologies déjà utilisées dans cet environnement tout en essayant de proposer une approche différente et plus axée sur l interactivité qu il peut y avoir dans ces lieux. Notre but est de créer une plate-forme qui puisse permettre cela. Nous ne pouvons pas en définir l ensemble des fonctionnalités car les manières d exploiter ces données en les mettant en forme sont vastes. Le but est de créer un système suffisamment inter-opérable avec d autres pour permettre une évolution et un enrichissement des fonctionnalités au fil du temps. Problématique Notre questionnement est le suivant : comment intégrer le public à un processus créatif dans cet environnement? Nous voulons ajouter une dimension supplémentaire et complémentaire. Une dimension qui allie visuels et touché. Nous sommes convaincus que voir associer l intervention de chacun sur un objet à un visuel le sublimant sous une forme inédite, a quelque chose de magique, poétique. Le moment d attente précédent l arrivée des artistes sur scène nous parait être, dans un premier temps, un moment intéressant pour une première entrée en piste de notre balle. 1) Pourquoi une balle? : La contrainte que nous nous sommes fixés est que le public ait un contact physique avec l objet. Le concert en tant qu environnement est typiquement un lieu qui permet cette interaction, et surtout qui l accepte. Un concert, c est du son, des odeurs, des lumières pourquoi pas un contact, un touché? Pourquoi une balle? Car c est indéniablement plus agréable qu un parpaing. Plaisanterie à part, il est compréhensible que bien que son utilisation soit ciblée sur des concerts et plus particulièrement ceux de musiques électroniques ; un objet imposant comme le notre peut inquiéter. La forme sphérique facilite la circulation au dessus d une foule, et ne pose pas de problèmes en cas de choc, il est difficile de l aggripper et d enfreindre sa circulation. De plus son poids peu aisément se répartir sur plusieurs personnes. Pour rappel une personne de 80kg peut aisément être receptionnée et portée par un public de concerts, tout en se jetant de scène. Ce qui est déjà le cas avec la pratique très courante dite, de stage-diving ou slam. Pour arriver à ce résultat nous avons déterminés deux leviers qui fonctionnent au sein d un même ensemble 2) Que fait-elle? Design-génératifs à partir des données captées par la balle, vidéo-projetés sur écran Qu est ce que le design génératif? C est la capacité à créer des formes graphiques à partir d algorithmes. Le but est que la balle génère un panel de données qui sera exploitable de manière visuelle. Le symbole de cette approche est le logiciel Open-Source nommé Processing destiné aux artistes numériques. C est le logiciel que nous avons privilégié pour interpréter les données issues des mouvements de la balle. Il est un logiciel libre, donc gratuit, doté de nombreux plug-in et bibliothèques, et possède une commu-

6 6 Introduction Concept Site web Site web mobile Application Communication Graphisme Gestion Annexes nauté très importante. Enfin, il est réputé facilement assimilable et manipulable. La contrainte du design-génératif appliqué à notre balle : Les mouvements de la balle sont donc traduits de manière visuelle sur un écran. Cela impose une contrainte à laquelle il faut être particlulièrement attentif. Il faut que le lien entre l action sur la balle et l effet visuel qui en découle soit clairement compris par le public. Il est impératif de préserver ce lien de continuité entre mouvement/interaction avec la balle et design-génératif. C est à dire que les visuels vidéo-projetés soient clairement identifiés comme découlant d un rapport de causalité avec le déplacement physique de la balle. Une surface recouverte de LED animée grâce au design génératif Pourquoi une surface de LED? Le choix de tapisser la surface de la balle de nombreuses LED, répond à l impérativité énoncée ci-dessus, à savoir préserver la compréhension des enjeux de l interaction avec la balle. Loin d être une fonctionnalité gadget, c est un premier indice visuel qui met l utilisateur sur la piste de la nature de l interaction dont les visuels seront visibles à l écran. De plus il nous parait important que la balle soit le plus visible possible, pour que le public ne soit pas pris par surprise lors de son déplacement. Zoom sur la technologie LED Grâce aux avancées récentes de la technologie LED, celle-ci est utilisée de plus en plus, et dans des domaines sans cesse plus variés. A l issue de notre veille, il s est avéré que cette technologie bénéficie d importants apports ces dernières années et que la marge d innovation relative à celle-ci est encore très intéressante. Ces atouts ne sont pas passés inaperçus aux artistes et bricoleurs de tous horizons qui ont multipliés les essais et initiatives ces dernières années. Nous avons trouvé les résultats intéressants, plus ou moins concluant selon les initiatives. Mais le point commun de toutes, est qu elles ouvraient des pistes sur des territoires peu explorés, aux possibilités très étendues. Evidemment la technologie LED n est pas récente, la diode rouge date du début des années 60. Cependant la manière de l utiliser notamment grâce aux technologies du numérique et des espaces de programmation libres et participatifs, a elle beaucoup avancée. En effet il est devenu envisageable d utiliser un nombre élevé de LED tout en les animant de manière complexe. Ce qui achève de nous convaincre de garder cette fonctionnalité est que le système qui permet de générer du design-génératif sur les LED s. Il s agit d un circuit-imprimé/microprocesseur du nom d Arduino. Les plans de celuici sont librement disponibles sur internet et des versions pré-assemblées sont commercialisées. Sa particularité est que son interface de programmation est en fait constitué d un plug-in de Processing nommé Wiring. Les appareils photos Pourquoi des appareils photos? Nous nous sommes intérrogés sur l utilité de garder les appareils photos. En effet leur présence complexifie la réalisation de la balle, mais ne la rend pas irréalisable. Nous tenons à les implémenter tout de même. Nous pensons que ces photos sont utiles car permettent d introduire une chronologie au design-génératif qui est vidéo-projeté. De plus les angles de vues que ces photos proposent sont tout à fait originaux et indédits dans un contexte comme celui-ci. C est un autre point de vue. Comment exploiter ces photos? De manière brute : en les intégrant au design génératif vidéoprojeté. Le déclenchement des photos est possible soit par le bais d un contact avec la balle,

7 7 Introduction Concept Site web Site web mobile Application Communication Graphisme Gestion Annexes soit déclenchable via l application mobile. Ces photos sont intégrées aux visuels vidéo-projetés. A quel moment dans le concert? Tout cela dépend de la volonté de celui qui l utilise. Un artiste n aura pas les mêmes attentes qu un organisateur (professionnel) d une gigantesque soirée mousse en boîte de nuit. Un artiste voudra pleinement l intégrer à son show en choisissant un jeu d effets spécifique et donc interviendra dans le choix du moment. Nous voulons pouvoir répondre pleinement à l attente des deux. La balle peut être lancée aussi bien, avant le début du concert c est à dire lorsque le public attend les artistes. Mais également durant le concert même. Ou encore pendant les changements de plateaux. Partie technique sur la balle Description visuelle de l objet Afin de modéliser la balle en 3 dimensions, nous avons rédigé le pitch ci-dessous. Il décrit le rendu visuel de l objet et aide ainsi à la conception de la maquette 3D. Pitch de l objet Il s agit d une grosse balle à la surface souple qui est prévue pour être lancée dans le public et manipulée par celui-ci. Le déplacement de la balle et les contacts avec celle-ci sont analysés par différents capteurs internes à la balle. Les capteurs de mouvement analysent le comportement de la balle (changement de vitesse, orientation, contact). Ces données numériques sont exploitées pour être mises en forme graphiquement et vidéo-projetées en temps réel dans la salle de concert. Des tableaux numériques sont ainsi créés collectivement et consultables sur un site internet. Des objectifs photographiques (grand-angle) répartis à la surface de la balle, prennent des clichés qui sont ensuite exploités en direct (pour être intégrés dans la vidéo projection). Les clichés seront enfin consultables sous forme de galeries chronologiques, dans le site internet. Aspect La balle fait environ 1,20m de diamètre. Sa surface extérieure est tapissée d un maillage de LED qui forme une sorte d écran sphérique. La densité du maillage est comparable à cela : Figure 1

8 8 Introduction Concept Site web Site web mobile Application Communication Graphisme Gestion Annexes Figure 2 Extérieur - Un fin film extérieur (5mm) transparent de silicone recouvrera le maillage de LED (pour protéger le matériel lors des frappes du public sur la balle). Le maillage est vraiment inspiré de la fig2. - Les LED : Le maillage de LED sera constitué de LED polychromatiques, grâce à elles il est envisageable de diffuser un flux vidéo (le maillage de la fig1 est destiné à la vidéo.) - La batterie est reliée à une prise USB 3 femelle qui est accessible depuis l extérieur, sur le maillage de LED. Prise qui permet bien entendu de la recharger. Afin de repérer la prise, celleci est intégrée au milieu du logo du projet (voir image ci-dessous): - Les objectifs photos sont disposés de manière régulière à la surface de la balle. On privilégiera des objectifs grand-angle. - Un accès devra obligatoirement être réservé pour l accès au noyau de la balle pour d éventuelles opérations de maintenance. Intérieur - La balle possède un cœur en son centre. Ce noyau regroupe les composantes de la balle (batteries, le processeur Arduino, carte wi-fi, mémoire). De ce cœur partent des «bras» (6 ou 7) qui sont reliés à l extérieur et qui maintiennent le cœur technique au centre de la sphère. Ces bras sont des sortes de tubes évasés de 4 à 5 cm de diamètre. C est par eux que passent les fils du maillage de LED. Voici dans l idée à quoi ressemblent ces bras : vimeo.com/ (voir vers 0:23 scd)

9 9 Introduction Concept Site web Site web mobile Application Communication Graphisme Gestion Annexes Modélisation 3D Nous avons effectué une modélisations 3D afin d avoir une idée précise de ce à quoi ressemblait la balle :

10 10 Introduction Concept Site web Site web mobile Application Communication Graphisme Gestion Annexes Exemple de scénario utilisateur Le but est de créer un jeu visuel utilisant les données issues d interactions avec la balle, pour ensuite les mettre en forme visuellement et esthétiquement, les possibilités sont très vastes, elles dépendront des algorithmes implémentés : Nous proposons ici un scénario d utilisation type avec des exemples de jeux d effets : Contexte : Attente avant un concert. Les lumières viennent de s éteindre. Un homme arrive sur scène avec une grosse balle dans les mains... 1) La balle est lancée dans le public par un membre du staff. Les LED sont allumées en bleu, de manière uniforme : 2) Elle arrive sur Nina, surprise, Nina la frappe mollement, ses mains sont en l air. Lorsque la balle entre en contact avec ses mains, une onde lumineuse verte se propage sur la surface de la balle. 3) La balle entame relativement lentement une trajectoire parabolique. 3 )Une prise photo se déclenche et apparait quasi instantanément sur l écran vidéo-projetée. 4) L écran derrière la scène s illumine, une trainée de peinture se dessine timidement dessus. La balle se dirige vers Max. 5) Qui avec la finesse d un rugbyman tape la balle très fort et l envoit à plusieurs mètres de lui. Cette frappe forte déclenche une onde lumineuse. rouge se propageant sur la surface de LED. 5 ) Une photo est déclenchée peu après la frappe. 6) Suite à cette frappe et pendant que la balle est en l air, sur l écran on observe une ample trainée de peinture rouge qui va quasiment d un bout à l autre de l écran. 7) La balle continue de circuler au sein de la salle pendant quelques mintutes. Les artistes ne vont pas tarder. Un membre du staff de l organisation du concert utilise l application mobile dans son interface administrateur pour éteindre la balle. La balle continue de circuler puis est récupérée par un technicien la réclamant sur scène. La circulation de la balle durant ces 5 minutes a généré un tableau où chaque trainée de peinture représente un mouvement de la balle dans la salle, et chaque tâche de peinture figure une donnée comme la puissance de la faire, le temps pendant laquelle la balle est restée en l air la puissance d une frappe. Pour conclure sur cette partie concernant notre concept, nous nous intéressons ci-dessous aux futures enrichissement implémentables sur notre objet. En effet, de par sa conception, la balle Iby est pensée pour pouvoir évoluer et accueillir à la fois de nouveaux matériels, et surtout de nouveaux algorithmes de design génératif. La liste ci-dessous est en petite partie constituée de fonctionnalités que nous avons décidé d écarter, pour éviter d alourdir le projet et d en faciliter sa compréhension

11 Introduction Concept Site web Site web mobile Application Communication Graphisme Gestion Annexes 11

12 12 Introduction Concept Site web Site web mobile Application Communication Graphisme Gestion Annexes Partie technique Partie externe de la balle Il faudrait un boule transparente en PVC qui s ouvre facilement pour la gestion des composants. Son prix avoisine les 100 euros. - Capteur de mouvement Comme capteur de mouvement nous prenons la technologie accéléromètre. Ce capteur est capable de mesurer : L inclinaison L accélération Les vibrations Ce composant est très utile pour mesurer les chocs que subit la balle, les variations de vitesse, la pesanteur... Un capteur de ce type se trouve au prix 50 environ. - Leds Ulitilisation de led du type RVB (dites LED polychromatiques). L avantage est que les led muticolors pourront ainsi réaliser plusieurs formes, cou leurs, dessins différents sur la paroi de la balle. Pour qu elles soient moins encombrante sur la surface, il est préférable d utiliser des LEDs plates. Vu le nombre élevé des LED, nous pouvons compter 300 euros pour ce composant. - capteur photo/vidéos Il existe principalement deux types de capteur photo, soit des capteurs ccd et cmos. Deux technologies adaptées pour notre balle. Le cout est de 100 à 250 suivant la qualitée des prises de photos. - processeur Arduino est un circuit imprimé dont les plans sont publiés en licence libre. il comprend un microcontrôleur qui peut être programmé pour analyser et produire des signaux électriques, de manière à effectuer des tâches diverses. C est une plateforme basée sur une interface entrée/sortie simple et sur un environnement de développement utilisant la technique du Processing. Ce processeur est ce qu il y a de plus adapté au concept Iby. le prix de ce composant est d environ batterie En ce qui concerne l alimentation de la balle, on a opté pour une batterie de 5v rechargeable par port USB pour faciliter son utilisation. Cette batterie sera capable d alimenter le processeur et tous les composants durant la duré de la manifestation. Son prix environne les 10 euros. - composant de communication wifi : La norme g permet d obtenir un débit théorique de 54 Mbps pour des portées équivalentes à 75 m. Il est possible de diminuer le débit pour obtenir une distance plus importante. Pour garder un débit suffisant pour tranférer une photo, on descend le débit à 18Mbit/s (en suposant qu une image peise environ 2Mo) pour avoir une portée de 180m. Il faut compter dans les 20 à 30 pour avoir un composant qui gère le wifi. Au final, en terme de matériel, la ball s élèverait donc à environ 1000 euros. A cela, nous ajouterons la main d oeuvre.

13 13 Introduction Concept Site web Site web mobile Application Communication Graphisme Gestion Annexes Evolution de la balle Futures évolutions de la balle déployable à court terme - Entre chaque photo, les transitions sur l écran géant, sont réalisées grâce aux messages textes que les personnes envoient avec leur smartphone. - Les dessins envoyés par l application mobile seront disponibles sur le site dans une galerie adaptée. Il y aura la possibilité de voter et classer des meilleurs dessins envoyés. - Aux moment de prendre la photo, avec la balle, celle ci sera associé a une photo panoramique. Cette évolution ne nécéssite aucun ajout de capteur, car nous pouvons utiliser les quatres appareils photo les plus à l horizontal. - La balle peut aussi très facilement, suivant la puissance de la frappe, appliquer un filtre différent à chaque photo. C est une évolution qui nécéssite un simple traitement de données. - Par le biais de l application smartphone il y aurait la possibilité de se prendre en photo. cette photo sera envoyée à la balle et diffusé sur sa paroi. c est juste une fonctionnalité en plus sur l application. - La balle pourra diffuser des logos publicitaires. - Il y aura possibilité de mettre deux balles dans la foule. Ce qui donnera la possibilité de créer de nouvelle intéraction avec l écartement des deux balles donc de nouveau effet visuel. Futur évolution de la balle déployable à long terme - La balle pourra intéragir avec les sons ambient. Cette évolution demande de rajouter un nouveau capteur sur la carte électronique interne à la balle. - Elle pourra prendre des vidéos en fonction de la hauteur à laquelle elle est lancée. Des vidéos de courte durée pour pouvoir être transmise rapidement. Pour cette nouvelle fonction, repenser le système de transfère de donné pour envoyer des données. - Un champ magnétique pourra etre créer autour du ballon, ce qui permettra une interaction entre les mouvements de foules et celui-ci. Cela demande d ajouter un nouveau composant dans la balle.

14 14 Introduction Concept Site web Site web mobile Application Communication Graphisme Gestion Annexes Site internet... Introduction Aujourd hui, Internet connaît une expansion de plus en plus marquée En effet, c est une plate-forme populaire accessible au plus grand nombre d internautes. Par conséquent, la balle IBY se devait d être visible sur la toile. Le projet de la balle interactive sera donc appuyée sur deux supports multimédia, un site internet et une application mobile. Ces supports permettront d avoir un descriptif du concept IBY. Ils permettront aussi de consulter les données des concerts/soirées, de connaître les dates et lieux des prochains évènements. Le site mettra à disponibilité les différentes photos prisent durant un évènement.

15 15 Introduction Concept Site web Site web mobile Application Communication Graphisme Gestion Annexes Structure du site - Architecture du site internet - Architecture de la version mobile du site internet

16 16 Introduction Concept Site web Site web mobile Application Communication Graphisme Gestion Annexes - Architecture de l application Technologie et langages utilisés Langages utilisés La programmation web peut prendre différentes formes: d une simple page statique à une page dynamique avec connexion à une base de données. Dans notre cas, c est une page statique : une page représentatif du projet. Le site sera donc réalisé à la manière d un site vitrine. Lorque la balle sera commercialisée, le site internet sera connecté à une base de données afin d afficher les différentes données (photos...) des concerts. En attendant, le site utilisera les mêmes langages que pour tout site web : - Toute page web comprend une base de langage HTML - Toute page web s accompagne du CSS (Cascading Style Sheets - Feuilles de style en cascade), un langage qui se charge de la mise en forme de la page. Aussi, le site internet utilisera du Javascript pour les différentes animation. En effet, il est reconnu par tous les navigateurs actuel. Pour le menu ou les boutons qui se situeront à gauche de l écran, le Javascript est nécessaire pour avoir un effet de mouvement au passage de la souris. Le langage PHP (PHP : Hypertext Preprocessor) est un langage de script interprété avec le serveur web. Il ne sera utilisé que pour une seule fonctionnalité, l envoi de mail. Généralement, le rechargement de la page est nécessaire à l envoi d un mail. Ici, le site utilisera une méthode

17 17 Introduction Concept Site web Site web mobile Application Communication Graphisme Gestion Annexes complémentaire au PHP pour ne pas avoir à recharger la page. On utilisera la technologie Ajax (Asynchronous JavaScript And XML) permettant de rafraichir qu une partie de la page. On utilisera aussi les fichiers.htaccess. Ce sont des fichiers de configuration des serveurs web Apache. Ici il sera configuré pour gérer les erreurs de page 404. Logiciels et outils utilisés Filezilla C est un client FTP développé sous la licence publique générale GNU. Il permet de transférer les fichiers sur les serveurs et d ouvrir directement les fichiers sur le serveur pour les éditer avec un éditeur de textes. Komodo edit Il s agit d un environnement de développement multi-plateformes relativement complet basé sur la plateforme Mozilla. Il propose une coloration du code très agréable, des suggestions automatique pour faciliter la programmation. EasyPHP Il s agit d une plateforme de développement web, permettant de faire fonctionner localement des scripts PHP sans se connecter à un serveur externe. C est un des logiciels indispensable pour un développeur afin de faire des tests en local sans modifier le vrai site qui est en ligne. Photoshop Logiciel de traitement d image. Il a été beaucoup utilisé pour des créations mais aussi pour faire des modifications d images. Internet La plus grande ressource d information au monde. C est presque l outil le plus important. Il permet d apprendre par le biais des tutoriels mais aussi de corriger nos erreurs en allant sur des forums. Navigateur web Un développeur de sites web se doit de posséder sur son ordinateur différents navigateurs web pour pouvoir s adapter suivant les différents comportement de certains navigateurs. Google Web Fonts Afin de personnaliser au maximum le site, on utilisera une police de caractère différente de celle proposée pour faire un site. C est pourquoi, on utilise google web fonts qui propose des polices web rapide et facile à utiliser pour tout le monde, y compris les concepteurs et développeurs professionnels. Il suffit simplement de mettre une ligne de code : <link href=»http://fonts.googleapis.com/ css?family=dosis:400,700» rel=»stylesheet» type=»text/css»> W3C Le Service Markup Validation est un validateur par le World Wide Web Consortium (W3C) qui permet aux internautes de contrôler les documents HTML et XHTML pour bien former le balisage. La validation du balisage constitue une étape importante en vue d assurer la qualité technique des pages web Jquery

18 18 Introduction Concept Site web Site web mobile Application Communication Graphisme Gestion Annexes Pour tout ce qui est code Javascipt on utilise Jquery, une bibliothèque JavaScript libre. Elle porte sur l interaction entre JavaScript (comprenant Ajax) et HTML, et à pour but de simplifier des commandes communes de JavaScript. Parallax Il s agit d un terme générique correspondant au déplacement de plusieurs éléments sur des couches et à des vitesses différentes. Au scroll (défilement grâce à la roulette de la souris) ou en fonction des coordonnées de la souris, les positions des différents fonds (ou éléments à animer) vont changer, ce qui va générer un effet de profondeur. Avec une même distance de scroll, l élément a aura parcouru une distance plus faible que l élément b. C est cette différence de vitesse qui crée l effet parallaxe. effet paralaxe

19 19 Introduction Concept Site web Site web mobile Application Communication Graphisme Gestion Annexes Optimisations Si l on veut bien respecter les normes de langage, l optimisation d un site doit d abord passer par le validateur du W3C. L optimisation n est pas seulement l interprétation du code par les navigateurs mais aussi la possibilité de faire un code lisible par un autre développeur. D où l importance de commenter le code. Il faut aussi une bonne organisation dans les dossiers et fichiers. Il est important de penser aux erreurs de navigations des internautes. Lorsqu un visiteur arrivera sur le site avec une URL inconnue, il sera automatiquement redirigé vers une page 404. C est grâce au fichier.htacess que tout se fera. Ainsi que de la gestion d autres erreurs. Pour l amélioration du chargement de la page, nous aurons régulièrement fait des tests sur le site gtmetrix.com pour savoir si oui ou non le chargement de notre page était trop long. Afin que le site soit chargé le rapidement possible, nous avons faites en sorte que les images soit optimisées au maximum. Partie administrateur Le site actuel du projet ne comportera pas de partie administrateur. C est pour le moment un site vitrine. Il permet de présenter le projet. Si la balle Iby venait à être mise en production, il serait obligatoire d avoir un backoffice. Cette partie servirait à faire des mises à jour rapide et simple des différents contenus : mettre à jour les dates par exemple ou pour gérer simplement la galerie photo. Afin d avoir une meilleure gestion des différents éléments du site, il serait sûrement préférable de choisir une solution du type CMS (Système de gestion de contenu). On partirait sur la plateforme joomla, pour pouvoir bénéficier d une plus grande plage de mouvement en terme de développement. Même si le site présente seulement la balle IBY, on remarquera la présence d un blog. Cette partie du site sera réalisé avec un CMS. Nous choisirons Wordpress qui est le plus approprié pour un blog. De plus, le back office est très intuitif. Un compte administrateur sera créé pour les deux développeurs, ainsi qu un compte pour la partie communication pour l édition d articles. Partie visiteur Accueil - Page Mode le Quand on arrive sur le site, une lightbox s ouvre pour afficher la vidéo de présentation de la balle. Au moment de quitter la page on remarque un très fort effet de parallax. c est dû à la superposition de plusieurs images. Page concept Un slider est présent sur la totalité de la page, il explique les différentes fonctionnalités de la balle.

20 20 Introduction Concept Site web Site web mobile Application Communication Graphisme Gestion Annexes Page Galerie La galerie utilise une grande image, plus grande que la hauteur de la plus part des écrans. C est pourquoi, pour éviter que toutes les bulles partent dans toutes les directions (à cause de l effet parallax quand on descend pour voir la suite de limage), on bloque l effet parallax le temps que l internaute regarde la totalité de l image. A chaque date il y a un lien qui ouvre une lightbox vers la galerie photo. Page Prochains concerts Il y a également un défilement horizontal en fonction du mouvement de la souris, ce mouvement est géré en Javascript. Au passage du pointeur de la souris sur les noms d artistes, une info bulle apparait pour laisser place à un descriptif de l évènement à cette date. Page contact La présence d un Qrcode permet d accéder directement au site par le biais d un mobile. Pour contrer les sniffers de site qui aspire les adresses mail écritent en dur dans le code, on utilise un formulaire de contact. Ceci permet à l adresse mail de rester sur le serveur du site et n est pas visible pour la partie client. Pour être vraiment sûr qu il s agisse bien d un humain qui remplit ce formulaire on rajoute un captcha (c est un test de défi-réponse). L utilisation de la technologie Ajax permet de ne pas avoir à recharger la page pour l envoi du mail, qui lui se fait en PHP. Le blog Le blog sera fait sous Wordpress. C est un CMS particulièrement optimisé pour les blogs. L interface du blog sera modifiée, elle sera simplifiée pour arriver directement à l information. Le pôle communication du groupe Iby se chargera de mettre à jour le blog. Les menu Deux menus seront présents. Le menu du haut permet une navigation classique sur le site ainsi que le choix de la langue du site (Anglais ou Français). Quand au second menu, il se situera au milieu à gauche de l écran, il sera constitué d une icône reflétant les principaux réseaux sociaux (Facebook, Twitter et Google +) et deux vidéos présentant le projet. Transition Les transitions seront mises en place pour les personnes n utilisant pas les boutons de navigation, seulement pour ceux qui utilisent la roulette de la souris. Ces transitions servent à différencier une page à l autre. Elles seront représentées par des barres obliques et un rond au milieux. Dans ce rond il y a une phrase permettant de prévenir l internaute de la prochaine page. Résultats d analyse Web Aujourd hui Internet prend une grande place dans nos démarches quotidiennes. Il y a de nombreux internautes surfant sur le net faisant circuler de plus en plus de données. Afin de pouvoir voir les impacts de notre site web sur la toile, nous avons créé un compte Google Analytics. Ce compte nous permet d analyser le

WordPress : Guide à l édition

WordPress : Guide à l édition WordPress : Guide à l édition WordPress : Guide à l édition... 1 Présentation... 2 1. Accès au site... 2 2. Le tableau de bord... 2 3. Editez les contenus... 4 Quelle est la différence entre les pages

Plus en détail

Les outils du Web* : comment ça marche et à quoi ça sert?

Les outils du Web* : comment ça marche et à quoi ça sert? Sites Web Les outils du Web* : comment ça marche et à quoi ça sert? Sites marchands, e-commerce Forums Blogs Réseaux sociaux grand public : Facebook, Twitter Réseaux sociaux professionnels : Linkedin,

Plus en détail

Cahier des Charges. Nom de l entreprise : Neriah Jewels Personnes à contacter dans l entreprise : Sébastien et Vincent SOMMAIRE

Cahier des Charges. Nom de l entreprise : Neriah Jewels Personnes à contacter dans l entreprise : Sébastien et Vincent SOMMAIRE Cahier des Charges Nom de l entreprise : Neriah Jewels Personnes à contacter dans l entreprise : Sébastien et Vincent SOMMAIRE 1 PRESENTATION DE L ENTREPRISE... 2 PRESENTATION DU PROJET... 2.1 ROLES...

Plus en détail

Mise en place d une gestion d un fond d images pour le service d un community manager

Mise en place d une gestion d un fond d images pour le service d un community manager Projet Informatique Mise en place d une gestion d un fond d images pour le service d un community manager Projet réalisé avec Filemaker Pro 12 Projet informatique présenté en vue d obtenir la LICENCE PROFESSIONNELLE

Plus en détail

Mode d emploi d artishoc mobile

Mode d emploi d artishoc mobile Mode d emploi d artishoc mobile Version gratuite Version 4 Mise à jour le 05/01/2011 Ce mode d emploi est à l usage exclusif des utilisateurs de l offre mobile gratuite d artishoc mobile. Il n a pas de

Plus en détail

Website Express Créer un site professionnel avec Orange

Website Express Créer un site professionnel avec Orange Website Express Créer un site professionnel avec Orange mars 2015 Safiétou Ndao Ndiaye Sommaire Présentation... 3 Description du service... 3 Configuration requise... 4 Consignes... 4 Pour bien démarrer...

Plus en détail

Créer un site à l aide de Google Site

Créer un site à l aide de Google Site Créer un site à l aide de Google Site N Vanassche www.nathalievanassche.be Ifosupwavre Mise en contexte www.nathalievanassche.be Blog ou Google Site? La réalisation d un blog à l aide de Blogger (non traité

Plus en détail

Cahier des charges Site internet

Cahier des charges Site internet 1 Cahier des charges Site Internet Cahier des charges Site internet INNOCORP MADA www.innocorp-mada.com Tel: 01.80.82.88.80 contact@innocorp-mada.com 2 Cahier des charges Site Internet CONTEXTE Introduction

Plus en détail

Mettre en place sa plateforme de veille avec Netvibes

Mettre en place sa plateforme de veille avec Netvibes Mettre en place sa plateforme de veille avec Netvibes Karine Pasquier 6 mai 2011 HEG, Genève 1 Sommaire 1. Introduction... 3 1.1 Qu est-ce que c est... 3 1.2 A quoi ça sert pour la veille?... 3 1.3 Netvibes

Plus en détail

Module Article. Plate-forme de gestion de contenu. PubliShare utilise la librairie javascript (AJAX - Web 2.0)

Module Article. Plate-forme de gestion de contenu. PubliShare utilise la librairie javascript (AJAX - Web 2.0) G U I D E D U T I L I S AT I O N Publishare Plate-forme de gestion de contenu Module Article PubliShare utilise la librairie javascript (AJAX - Web.0) Sommaire Généralités Schéma de navigation Identification

Plus en détail

COMMENT FAIRE CONNAÎTRE SON SITE KEOSITE SUR INTERNET? COMMENT RÉFÉRENCER SON SITE SUR LES MOTEURS DE RECHERCHE? SOMMAIRE

COMMENT FAIRE CONNAÎTRE SON SITE KEOSITE SUR INTERNET? COMMENT RÉFÉRENCER SON SITE SUR LES MOTEURS DE RECHERCHE? SOMMAIRE COMMENT FAIRE CONNAÎTRE SON SITE KEOSITE SUR INTERNET? COMMENT RÉFÉRENCER SON SITE SUR LES MOTEURS DE RECHERCHE? SOMMAIRE - Le référencement : Qu est ce que c est? - Le nom de votre site - Le contenu de

Plus en détail

de survie du chef de projet

de survie du chef de projet KIT de survie du chef de projet 01 1 2 3 4 5 6 04 03 07 07 03 03 LE SERVEUR LE CLIENT TECHNOLOGIE WEB CLIENT LE SERVEUR WEB TECHNIQUES & CADRE DE TRAVAIL APPLICATIONS 101 LE SERVEUR Un serveur informatique

Plus en détail

Aide à l utilisation du logiciel IziSpot.Mobi

Aide à l utilisation du logiciel IziSpot.Mobi 1 Sommaire 1. Description logiciel (explication des menus)... 3 1.1. Description de la barre de menu... 3 2. Onglet configuration... 4 2.1. Gestion du logo... 4 2.1.1. Affichage du zoom... 4 2.1.2. Disposition

Plus en détail

Gérer un site internet simple

Gérer un site internet simple TUTORIEL Gérer un site internet simple Pourquoi avoir un site internet? Table of Contents Table of Contents... 2 Étape 1 : créer un compte Google (Gmail)... 3 Etape 2 : créer un site internet Google...

Plus en détail

SmartCaisse, depuis 2005. Prise de Commande IPhone, IPad (2, 3 et mini), IPod et tablette Android SmartCaisse

SmartCaisse, depuis 2005. Prise de Commande IPhone, IPad (2, 3 et mini), IPod et tablette Android SmartCaisse SmartCaisse, depuis 2005 Prise de Commande IPhone, IPad (2, 3 et mini), IPod et tablette Android SmartCaisse Présentation : Les logiciels de prise de commande téléchargeables sur Android Market sous le

Plus en détail

Publier des données sur le Web

Publier des données sur le Web Publier des données sur le Web Introduction Microsoft Excel fournit les outils dont vous avez besoin pour créer et enregistrer votre classeur sous forme d une page web et le publier sur le Web. La commande

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

Créez votre premier site web De la conception à la réalisation

Créez votre premier site web De la conception à la réalisation Chapitre 1 : Introduction A. Introduction 17 Chapitre 2 : Les langages A. L objectif 21 B. L HTML 21 1. L état des lieux 21 2. Les éléments HTML 21 3. Les attributs 22 4. Les caractères 23 5. Les espaces

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

À la découverte de jquery Mobile

À la découverte de jquery Mobile 1 À la découverte de jquery Mobile jquery Mobile est un ensemble de plug-ins et de widgets de jquery visant à déployer une API multiplates-formes capable de développer des applications Web mobiles. Au

Plus en détail

E-Learning / Ergonomie :

E-Learning / Ergonomie : BARRAU Mathieu Licence Pro Communication Electronique GRUFFAZ Loic Université Lyon 2 E-Learning / Ergonomie : Cahier des charges, contenu et organisation du support de cours pour le programme de formation

Plus en détail

Activation et personnalisation de votre site mobile

Activation et personnalisation de votre site mobile Activation et personnalisation de votre site mobile Page 1 / 1 Table des matières 1. Activation de la version mobile 3 2. Personnalisation de la version mobile : premiers pas 2.1. Apparence générale et

Plus en détail

Créer et animer un site avec Wordpress (environnement PC et MAC)

Créer et animer un site avec Wordpress (environnement PC et MAC) Créer et animer un site avec Wordpress (environnement PC et MAC) OBJECTIFS Acquérir une autonomie pour créer, administrer et mettre en ligne un site avec Wordpress. Une bonne connaissance de l environnement

Plus en détail

WordPress : principes et fonctionnement

WordPress : principes et fonctionnement CHAPITRE 1 WordPress : principes et fonctionnement WordPress est à l origine un outil conçu pour tenir un blog, c est-à-dire un journal ou carnet de bord en ligne. Mais il a évolué pour devenir un système

Plus en détail

Création d un site web pour la Communauté des communes du pays vernois et du terroir de la truffe

Création d un site web pour la Communauté des communes du pays vernois et du terroir de la truffe Simon Benjamin BTS SIO Rapport de stage : Création d un site web pour la Communauté des communes du pays vernois et du terroir de la truffe Entreprises : 2014/2015-1 - - 2 - Remerciements Je tiens tout

Plus en détail

Présentation du Framework BootstrapTwitter

Présentation du Framework BootstrapTwitter COUARD Kévin HELVIG-LARBRET Blandine Présentation du Framework BootstrapTwitter IUT Nice-Sophia LP-SIL IDSE Octobre 2012 Sommaire I. INTRODUCTION... 3 Définition d'un framework... 3 A propos de BootstrapTwitter...

Plus en détail

Le langage PHP permet donc de construire des sites web dynamiques, contrairement au langage HTML, qui donnera toujours la même page web.

Le langage PHP permet donc de construire des sites web dynamiques, contrairement au langage HTML, qui donnera toujours la même page web. Document 1 : client et serveur Les ordinateurs sur lesquels sont stockés les sites web sont appelés des serveurs. Ce sont des machines qui sont dédiées à cet effet : elles sont souvent sans écran et sans

Plus en détail

Toute personne souhaitant maîtriser les techniques liées à la conception de produits multimédia et à la création de sites Web.

Toute personne souhaitant maîtriser les techniques liées à la conception de produits multimédia et à la création de sites Web. Web Designer Durée 90 jours (630 h) Public Toute personne souhaitant maîtriser les techniques liées à la conception de produits multimédia et à la création de sites Web. Objectifs La formation Web designer

Plus en détail

Guide Reseller Onbile

Guide Reseller Onbile Guide Reseller Onbile Cher Revendeur, Avez-vous un doute en ce qui concerne le fonctionnement du Panneau d Administration du Plan Reseller de Onbile? Le guide Reseller Onbile est ce dont vous avez besoin!

Plus en détail

D origine destiné à la conception de blog, WordPress est devenu l outil incontournable dans la liste des systèmes de gestion de contenus..

D origine destiné à la conception de blog, WordPress est devenu l outil incontournable dans la liste des systèmes de gestion de contenus.. WordPress - CMS open-source Permet de créer simplement des sites internet ou de blogs. D origine destiné à la conception de blog, WordPress est devenu l outil incontournable dans la liste des systèmes

Plus en détail

Un portail-cdi avec Google.

Un portail-cdi avec Google. Un portail-cdi avec Google. Le moteur de recherche Google, tout le monde connaît. Mais Google c est aussi un ensemble de services souvent gratuits tels qu une messagerie (Gmail), un agenda en ligne, la

Plus en détail

Comment installer wordpress. www.bxart.be wp niveau 1

Comment installer wordpress. www.bxart.be wp niveau 1 www.bxart.be wp niveau 1 Installation Introduction Wordpress est un CMS ce qui signifie : système de gestion de contenu (Content Management System). Il y a d autres CMS mais c est de loin le plus populaire.

Plus en détail

4. Personnalisation du site web de la conférence

4. Personnalisation du site web de la conférence RTUTORIEL Prise en main de la plateforme 1. Création de l espace conférence Connectez- vous sur le portail http://test- www.sciencesconf.org avec le compte : - Identifiant : «admin1» - Mot de passe «1234»

Plus en détail

Introduction à la programmation web

Introduction à la programmation web Introduction à la programmation web Nouvelles Technologies Dr. Thé Van LUONG The-Van.Luong@heig-vd.ch HEIG-VD Switzerland 8 octobre 2015 1/34 8 octobre 2015 1 / 34 Plan 1 État de l art des langages orientés

Plus en détail

Animation numérique. de territoire. Créer son site Internet avec un outil gratuit. Mardi 4 novembre 2014. Cédric ARNAULT OT Lourdes

Animation numérique. de territoire. Créer son site Internet avec un outil gratuit. Mardi 4 novembre 2014. Cédric ARNAULT OT Lourdes Créer son site Internet avec un outil gratuit Mardi 4 novembre 2014 Cédric ARNAULT OT Lourdes Présentation de la journée - Créer un site Internet : Pourquoi? Pour qui? Comment? - - Aller plus loin avec

Plus en détail

Formation Découverte du Web

Formation Découverte du Web Catégorie : internet Formation Découverte du Web Niveau requis : savoir utiliser un ordinateur (clavier, souris, traitement de texte) Public : personnel administratif et responsables de communication souhaitant

Plus en détail

REFONTE DU SITE DE LA FEDERATION ALGERIENNE DE FOOTBALL

REFONTE DU SITE DE LA FEDERATION ALGERIENNE DE FOOTBALL REFONTE DU SITE DE LA FEDERATION ALGERIENNE DE FOOTBALL CAHIER DES CHARGES TECHNIQUE Client Fédération Algérienne de Football (FAF) Chef de projet WEBQAM Marine CHARLES Solution retenue WordPress multilingue

Plus en détail

Sommaire. Qu est ce qu un blog? Blog / site : quelle différence? Les plateformes de blog

Sommaire. Qu est ce qu un blog? Blog / site : quelle différence? Les plateformes de blog Sommaire Qu est ce qu un blog? Blog / site : quelle différence? Les plateformes de blog Premiers pas sur Wordpress Créer un compte utilisateur Créer un blog Tableau de bord et administration Interface

Plus en détail

Utilisation du site Graines d explorateurs

Utilisation du site Graines d explorateurs Utilisation du site Graines d explorateurs Connexion au site Munissez vous de votre identifiant et de votre mot de passe puis cliquez sur le lien «se connecter» situé en bas à droite du site Graines d

Plus en détail

INTRODUCTION CHAPITRE 1

INTRODUCTION CHAPITRE 1 CHAPITRE 1 INTRODUCTION Query, qu est-ce que c est?... 11 HTML, CSS, JavaScript, PHP : qui fait quoi?... 16 Un environnement de développement simple et gratuit... 19 Ce que vous allez apprendre... 20 9

Plus en détail

WordPress, qu est ce que c est?

WordPress, qu est ce que c est? WordPress, qu est ce que c est? Qu est ce que WordPress à de plus que les autres? Plus besoin d être programmeur pour créer un site web ou un blog, faites installer votre modèle WordPress par un Professionnel

Plus en détail

Présentation générale

Présentation générale Présentation générale Izi-média est une solution facile, immédiate et à portée de tous Vous avez besoin de réaliser des sites web simples ou des sites évènementiels? Izi-media est la solution faite pour

Plus en détail

Les Ateliers Numériques 2013. 26 avril 2013 - Alboussière

Les Ateliers Numériques 2013. 26 avril 2013 - Alboussière Les Ateliers Numériques 2013 26 avril 2013 - Alboussière Atelier : Les outils Google pour améliorer mon référencement Atelier : Les outils Google pour améliorer mon référencement Tour de table Et vous,

Plus en détail

SITE WEB. Définition. Ensemble de fichiers reliés entre eux et déposés sur un serveur internet. Ordinateur connecté au réseau

SITE WEB. Définition. Ensemble de fichiers reliés entre eux et déposés sur un serveur internet. Ordinateur connecté au réseau SITE WEB Définition Ensemble de fichiers reliés entre eux et déposés sur un serveur internet. Ordinateur connecté au réseau Comment mon site est sur internet Je crée mon site sur mon ordinateur, en local.

Plus en détail

votre site web et autre stratégie digitale

votre site web et autre stratégie digitale votre site web et autre stratégie digitale 2014 SERVICES sur mesure Audit Stratégie éditoriale Production de contenu Webrédaction Blogs, réseaux sociaux Veille Community Management Accompagnement de projet

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

Guide Ultra-book / 2012

Guide Ultra-book / 2012 Guide Ultra-book / 2012 Avant de commencer Le logiciel Ultra-book est optimisé pour les derniers navigateurs web standards : Firefox 10 ou 11 Chrome 18 Safari 5 Vous trouverez ces navigateurs en téléchargement

Plus en détail

Travaux pratiques. avec. WordPress. Karine Warbesson

Travaux pratiques. avec. WordPress. Karine Warbesson Travaux pratiques avec WordPress Karine Warbesson Toutes les marques citées dans cet ouvrage sont des marques déposées par leurs propriétaires respectifs. Mise en pages réalisée par ARCLEMAX Illustration

Plus en détail

SITE I NTERNET. Conception d un site Web

SITE I NTERNET. Conception d un site Web SITE I NTERNET Conception d un site Web Conception de votre site Web Préambule Ce document a pour but de donner une méthode de travail afin de réaliser dans les meilleures conditions un site internet.

Plus en détail

Recueil des Fiches Concepteurs : Mise en œuvre d un site SharePoint 2013 Juin 2015

Recueil des Fiches Concepteurs : Mise en œuvre d un site SharePoint 2013 Juin 2015 Recueil des s s : Mise en œuvre d un site SharePoint 2013 Juin 2015 Ce document décrit le paramétrage pour la mise en œuvre des fonctionnalités standard de Microsoft SharePoint 2013. NADAP et SharePoint

Plus en détail

Personne à contacter : Françoise LE GUERN

Personne à contacter : Françoise LE GUERN Mairie de Guingamp 1 place du Champ-au-Roy BP 50543 22205 GUINGAMP cédex Tél : 02 96 40 64 40 Fax : 02 96 44 40 67 Email : mairie@ville-guingamp.com Personne à contacter : Françoise LE GUERN SOMMAIRE 1

Plus en détail

Rapport individuel Génie logiciel

Rapport individuel Génie logiciel 2012 Rapport individuel Génie logiciel Dans ce rapport sera présenté l ensemble des activités effectuées au cours du projet de création de site de covoiturage «Etucovoiturage» (http://etucovoiturage.free.fr)

Plus en détail

Gestion du parc informatique matériel et logiciel de l Ensicaen. Rapport de projet. Spécialité Informatique 2 e année. SAKHI Taoufik SIFAOUI Mohammed

Gestion du parc informatique matériel et logiciel de l Ensicaen. Rapport de projet. Spécialité Informatique 2 e année. SAKHI Taoufik SIFAOUI Mohammed 6, bd maréchal Juin F-14050 Caen cedex 4 Spécialité Informatique 2 e année Rapport de projet Gestion du parc informatique matériel et logiciel de l Ensicaen SAKHI Taoufik SIFAOUI Mohammed Suivi ENSICAEN

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

Web-Interactive Mai 2010. Interactive 2.0. Manuel d utilisation

Web-Interactive Mai 2010. Interactive 2.0. Manuel d utilisation Interactive 2.0 Manuel d utilisation 1 Contenu Chapitre 1 : L Arborescence... 3 Créer un menu.... 3 Ordonner les menus... 6 Destruction d un menu.... 6 Chapitre 2 : Les pages... 7 Titre de votre page....

Plus en détail

Création de site en autonomie Mardi 24 novembre de 9h30 à 12h30 : Mauléon Jeudi 26 novembre de 9h30 à 12h30 : Hasparren

Création de site en autonomie Mardi 24 novembre de 9h30 à 12h30 : Mauléon Jeudi 26 novembre de 9h30 à 12h30 : Hasparren Création de site en autonomie Mardi 24 novembre de 9h30 à 12h30 : Mauléon Jeudi 26 novembre de 9h30 à 12h30 : Hasparren Offices de Tourisme de la Montagne Basque St-Palais et Hasparren-La Bastide Clairence

Plus en détail

Joomla : un système de gestion de contenu

Joomla : un système de gestion de contenu CHAPITRE 2 Joomla : un système de gestion de contenu Si SGC est l abréviation française pour système de gestion de contenu, l abréviation CMS de l anglais Content Management System est le terme le plus

Plus en détail

Comment accéder à d Internet Explorer

Comment accéder à d Internet Explorer Comment accéder à d Pour ouvrir l application, vous n avez qu à doublecliquer sur l icône de celle-ci : ou vous pouvez encore allez le chercher par le raccourci dans la barre des tâches : Lorsque l application

Plus en détail

INTEGRATEUR DEVELOPPEUR

INTEGRATEUR DEVELOPPEUR www.emweb.fr INTEGRATEUR DEVELOPPEUR FORMATION ELIGIBLE AU DIF/CIF DURÉE : 700 h de formation PRE REQUIS Avoir un esprit logique Etre motivé(e)! OBJECTIF A l issue de cette formation, vous serez capable

Plus en détail

Guide de démarrage Débuter avec e-monsite Les termes spécifiques à e-monsite

Guide de démarrage Débuter avec e-monsite Les termes spécifiques à e-monsite Guide de démarrage Débuter avec e-monsite... page 2 Les termes spécifiques à e-monsite... page 2 Le manager... page 2 Les modules... page 3 Les widgets... page 3 Les plugins... page 4 Ajouter du contenu...

Plus en détail

Scolasite.net, le créateur de site web au service des enseignants. Guide d'administration du site Internet. Page 1

Scolasite.net, le créateur de site web au service des enseignants. Guide d'administration du site Internet. Page 1 Guide d'administration du site Internet Page 1 Scolasite permet de créer rapidement un site Internet, sans connaissances techniques particulières. Spécialement destiné aux établissements scolaires, son

Plus en détail

COMMENT RÉDIGER UN CAHIER DES CHARGES POUR UN SITE INTERNET?

COMMENT RÉDIGER UN CAHIER DES CHARGES POUR UN SITE INTERNET? COMMENT RÉDIGER UN CAHIER DES CHARGES POUR UN SITE INTERNET? 1. Présentation 1.1 Les coordonnées Mentionnez ici les coordonnées exactes de l entreprise ou de la collectivité (adresse postale, numéro de

Plus en détail

Cahier des charges du site internet de l AIM

Cahier des charges du site internet de l AIM Julie Toussaint Marie Olivier TEMA 3 Cahier des charges du site internet de l AIM 1 Sommaire Présentation du projet... 3 Rôles... 3 Objectifs du site... 4 Liste des prestations attendues... 4 Contenu du

Plus en détail

Refonte du site internet de la Ville d Etrépagny www.etrepagny.fr

Refonte du site internet de la Ville d Etrépagny www.etrepagny.fr Rue Maréchal Foch B.P. 11 27150 ETREPAGNY Refonte du site internet de la Ville d Etrépagny www.etrepagny.fr CAHIER DES CHARGES Marché passé sans formalité préalable selon procédure adaptée. Pouvoir adjudicateur

Plus en détail

Guide des structures du SPRO en région Centre-Val de Loire sur le site Etoile

Guide des structures du SPRO en région Centre-Val de Loire sur le site Etoile Guide des structures du SPRO en région Centre-Val de Loire sur le site Etoile *** Annexe 1 *** SOMMAIRE 1. OUTIL DE RECHERCHE SPECIFIQUE SPRO... 3 1.1. Recherche SPRO... 3 1.2. Liste de réponses SPRO...

Plus en détail

Manuel d utilisation

Manuel d utilisation Fédération Nationale du Sport en Milieu Rural 1, rue sainte Lucie - 75015 PARIS Tel. : 09.72.29.09.72 E-mail : contact@fnsmr.org Site Internet : www.fnsmr.org Manuel d utilisation www.gestaffil.org Table

Plus en détail

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

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

CONDUITE DE PROJET WEB

CONDUITE DE PROJET WEB 1) La conception fonctionnelle A. Déterminer la structure du site et des pages Web Livrables pour cette phase : Plan du site Trames de pages Spécifications fonctionnelles Tâche réalisée par le Web designer.

Plus en détail

Rendre accessible à tous la réalité augmentée

Rendre accessible à tous la réalité augmentée Rendre accessible à tous la réalité augmentée D où vient l idée de Mini Mobile Story? La réalité augmentée est souvent perçue comme un système très complexe, animé et capable de mettre en scène informations

Plus en détail

Documentation Utilisateur SEO EXPERT

Documentation Utilisateur SEO EXPERT Documentation Utilisateur SEO EXPERT SEO EXPERT est un module très complet qui vous aide à optimiser rapidement le référencement naturel de votre boutique sur les principaux moteurs de recherche mais aussi

Plus en détail

Préambule. Sommaire. Ouverture de votre Service Client. Configuration de La Solution Crypto. Activation. Paramètres PagesIMMO

Préambule. Sommaire. Ouverture de votre Service Client. Configuration de La Solution Crypto. Activation. Paramètres PagesIMMO Préambule La Solution Crypto offre en standard la possibilité de publier vos annonces et de les diffuser sur Internet, sur votre site Web ou sur différents serveurs d annonces, comme le décrit en détail

Plus en détail

Projet Covoiturage TP 1

Projet Covoiturage TP 1 Projet Covoiturage TP 1 Description du thème Ce TP est le premier d une série mettant en œuvre le développement mobile en utilisant la bibliothèque jquery Mobile. Propriétés Description Intitulé long Formation

Plus en détail

VOLUME 1 CRÉATION D UN SITE WEB

VOLUME 1 CRÉATION D UN SITE WEB VOLUME 1 CRÉATION D UN SITE WEB Comprendre les principales étapes TABLE DES MATIÈRES PARTIE 1 - RENCONTRE DE DÉMARRAGE 03 PARTIE 2 - ANALYSE FONCTIONNELLE 03 PARTIE 3 - ARBORESCENCE 04 PARTIE 4 - MAQUETTES

Plus en détail

Wordpress, les bases

Wordpress, les bases Wordpress, les bases Sommaire Se connecter... 2 Créer une page... 3 Ajouter une image... 5 Créer le menu principal... 9 Placer un sous-menu... 12 Créer un article... 13 Installer une extension (formulaire)...

Plus en détail

Facebook. Pour une organisation ou une entreprise!

Facebook. Pour une organisation ou une entreprise! Facebook Pour une organisation ou une entreprise! Réalisé en mars 2010 Révisé en décembre 2010 Par : Sultana Ahamed, Isabelle Leblanc et Joline LeBlanc Qu est-ce que Facebook? Facebook est un réseau social

Plus en détail

Chapitre 1 De la conception à la publication 15. Chapitre 2 Créer son blog en ligne 27

Chapitre 1 De la conception à la publication 15. Chapitre 2 Créer son blog en ligne 27 Chapitre 1 De la conception à la publication 15 1.1. Réussir l ergonomie générale d un site... 16 Les qualités d un bon site web... 16 Une navigation simple et efficace... 17 1.2. Créer la charte graphique...

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

NOTICE INTERFACE WIFI

NOTICE INTERFACE WIFI NOTICE INTERFACE WIFI Notre interface d administration WIFI vous permet de : Personnaliser votre portail WIFI Gérer & paramétrer votre installation WIFI Tél : 02 40 71 71 21 Email : contact@va-solutions.fr

Plus en détail

Présentation du site web IDELIS www.reseau-idelis.com

Présentation du site web IDELIS www.reseau-idelis.com Présentation du site web IDELIS www.reseau-idelis.com Conférence de presse du 17 juin 2010 Contacts : IDELIS Frédéric Clec h f.clech@reseau-idelis.com Véronique DUFOURCQ v.dufourcq@reseau-idelis.com tél.

Plus en détail

Référencement et visibilité sur Internet Comment améliorer la visibilité de son site internet sur les principaux moteurs de recherche?

Référencement et visibilité sur Internet Comment améliorer la visibilité de son site internet sur les principaux moteurs de recherche? 9 Référencement et visibilité sur Internet Comment améliorer la visibilité de son site internet sur les principaux moteurs de recherche? Le trafic d un site internet Le référencement naturel Les freins

Plus en détail

Projet de Fin d Etudes. Smart Picking

Projet de Fin d Etudes. Smart Picking Projet de Fin d Etudes Smart Picking Mathieu BOSSENNEC IMA5 Florian CARON 2014-2015 Sommaire Sommaire 2 Remerciements 3 Introduction 4 I - Présentation du Contexte 5 II - Travaux Réalisés 6 1) Système

Plus en détail

Utiliser le site Voyages-sncf.com

Utiliser le site Voyages-sncf.com voyages-sncf.com 17 mars 2014 p 1 Utiliser le site Voyages-sncf.com Avec ce tutoriel, vous apprendrez à utiliser le site de la SNCF dédié aux trajets grandes lignes et plus particulièrement à : rechercher

Plus en détail

Portail Client Sigma Informatique

Portail Client Sigma Informatique Portail Client Sigma Informatique Edité le 19 févr. 2013 Sommaire Présentation du portail client 3 La page d accueil 8 Vie d une demande (Création et suivi) 11 La consultation d une demande. 18 La gestion

Plus en détail

LES TABLETTES : GÉNÉRALITÉS

LES TABLETTES : GÉNÉRALITÉS LES TABLETTES : GÉNÉRALITÉS Fonctionnement Qu est-ce qu une tablette tactile? Une tablette tactile est un appareil doté d'un écran qui permet d'interagir simplement en touchant l'écran ou à l'aide d'un

Plus en détail

THEME RESPONSIVE DESIGN

THEME RESPONSIVE DESIGN THEME RESPONSIVE DESIGN Tablettes, smartphones, netbooks, ordinateurs les résolutions d écrans sont nombreuses. Adaptez vous aux nouvelles habitudes des utilisateurs en étant visible de façon optimale.

Plus en détail

Introduction @ 1. La gamme Microsoft Expression

Introduction @ 1. La gamme Microsoft Expression La gamme Microsoft Expression Microsoft propose déjà dans son catalogue des outils orientés graphisme ou destinés à la création de sites web. Avec l arrivée de Vista et plus précisément d une couche nommée

Plus en détail

FRANÇAIS PHONE-VS. Guide d installation et utilisation

FRANÇAIS PHONE-VS. Guide d installation et utilisation FRANÇAIS PHONE-VS Guide d installation et utilisation INDEX 1 INTRODUCTION... 1 2 INSTALLATION ET MISE EN SERVICE... 1 3 REGISTRER L APPLICATION... 4 4 CONFIGURATION DES CONNEXIONS... 6 5 CONNEXION...

Plus en détail

Atelier du 25 juin 2012. «Les bonnes pratiques dans l e-mailing» Club

Atelier du 25 juin 2012. «Les bonnes pratiques dans l e-mailing» Club Atelier du 25 juin 2012 «Les bonnes pratiques dans l e-mailing» Agenda de l atelier Introduction et rappel des bonnes pratiques Exemple et retour d expérience Maison Tasset Partage d expérience entre les

Plus en détail

Sommaire. [page 4] Lancement Identification Multi Comptes. [page 5] Créer un nouveau projet. [page6] Editer un projet

Sommaire. [page 4] Lancement Identification Multi Comptes. [page 5] Créer un nouveau projet. [page6] Editer un projet Sommaire [page 4] Lancement Identification Multi Comptes [page 5] Créer un nouveau projet [page6] Editer un projet [page 7] Supprimer un projet Prévisualiser un projet Mettre un projet par défaut [page

Plus en détail

Personnaliser et adapter SPIP Développeur SPIP

Personnaliser et adapter SPIP Développeur SPIP Personnaliser et adapter SPIP Développeur SPIP En Théorie Le fonctionnement de SPIP Qu est ce que SPIP? SPIP (Système de Publication pour l Internet Partagé) est un logiciel libre destiné à la production

Plus en détail

Club photo / Maxime Storn

Club photo / Maxime Storn Club photo / Maxime Storn Introduction Logiciel Logiciel de gestion de références bibliographiques Libre et open-source Traduit en 30 langues Extension destinée à Mozilla Firefox Compatible avec Microsoft

Plus en détail

Mettre ses photos en ligne avec Picasa (Google)

Mettre ses photos en ligne avec Picasa (Google) Mettre ses photos en ligne avec Picasa (Google) Survol Organiser les photos efficacement dans Picasa Albums Diaporamas Montage photos Film Retouche photo Compression Partage Web 2 Qu est-ce que Picasa?

Plus en détail

Comment télécharger et

Comment télécharger et Dispositifs de lecture numérique Comment télécharger et lire un livre numérique sur tablette et liseuse? Par souci de synthèse nous retiendrons ici les modèles de tablettes et liseuses les plus utilisés

Plus en détail

Zotero, un outil de gestion de bibliographies. Yvonne BERTRAND Documentaliste EHESP-MSSH 236 bis rue de Tolbiac 75013 Paris

Zotero, un outil de gestion de bibliographies. Yvonne BERTRAND Documentaliste EHESP-MSSH 236 bis rue de Tolbiac 75013 Paris Zotero, un outil de gestion de bibliographies Yvonne BERTRAND Documentaliste EHESP-MSSH 236 bis rue de Tolbiac 75013 Paris 1 Sommaire Introduction Collecte Organisation Citation Synchronisation Sauvegarde

Plus en détail

CAHIER DES CHARGES DE REALISATION DE SITE INTERNET

CAHIER DES CHARGES DE REALISATION DE SITE INTERNET CAHIER DES CHARGES DE REALISATION DE SITE INTERNET Nom de l entreprise : Adresse : Tel : Fax : Email : Personne à contacter dans l entreprise : 1 SOMMAIRE 1 PRESENTATION DE L ENTREPRISE...3 2 PRESENTATION

Plus en détail

Fiche pratique www.ecardsparis1.fr

Fiche pratique www.ecardsparis1.fr Fiche pratique www.ecardsparis1.fr Pour des raisons de sécurité des informations personnelles pouvant y figurer, nous vous rappelons que pour accéder à l application ecards de Paris 1, vous devez vous

Plus en détail

Mes documents Sauvegardés

Mes documents Sauvegardés Mes documents Sauvegardés Guide d installation et Manuel d utilisation du logiciel Edition 13.12 Photos et illustrations : Copyright 2013 NordNet S.A. Tous droits réservés. Toutes les marques commerciales

Plus en détail

SOMMAIRE. 1.Qu est ce qu une tablette 2.Caractéristiques techniques 3.Manipulations de base 4.Les principales applications

SOMMAIRE. 1.Qu est ce qu une tablette 2.Caractéristiques techniques 3.Manipulations de base 4.Les principales applications 1 SOMMAIRE 1.Qu est ce qu une tablette 2.Caractéristiques techniques 3.Manipulations de base 4.Les principales applications 2 QU EST CE QU UNE TABLETTE? Une tablette : un ordinateur portable ultraplat

Plus en détail

Extended communication server: Bureau Virtuel Mobile pour iphone (guide utilisateur)

Extended communication server: Bureau Virtuel Mobile pour iphone (guide utilisateur) Extended communication server: Bureau Virtuel Mobile pour iphone (guide utilisateur) Juin, 2009 Alcatel-Lucent Office Offer - All Rights Reserved Alcatel-Lucent 2009 8AL90405FRAA 01 TABLE DES MATIERES

Plus en détail