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

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

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

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

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

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

Créer et animer une boutique en ligne avec Wordpress (environnement PC et MAC)

Créer et animer une boutique en ligne avec Wordpress (environnement PC et MAC) Créer et animer une boutique en ligne avec Wordpress (environnement PC et MAC) OBJECTIFS - Créer une boutique sous wordpress et la référencer. - Mise en place du contenu, des articles Une bonne connaissance

Plus en détail

Créez et administrez vos sites Web

Créez et administrez vos sites Web Joomla! 3.3 Créez et administrez vos sites Web Didier MAZIER Table des matières.. 1 Chapitre 1 : Découvrir Joomla! A. Les raisons de créer un site sous Joomla!.. 9 B. Se documenter sur Joomla! 9 C. La

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

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

Petite histoire d Internet

Petite histoire d Internet À la base, Internet est défini par des ordinateurs qui sont reliés entre eux grâce à des câbles, du WiFi ou encore des satellites, créant ainsi un réseau à échelle mondiale. Les ordinateurs communiquent

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

ADOBE DREAMWEAVER. contact@mandyben.com www.mandyben-formation.com

ADOBE DREAMWEAVER. contact@mandyben.com www.mandyben-formation.com ADOBE DREAMWEAVER Public : Webmasters, créateur de sites Internet, maquettistes, infographistes, responsables communication, chefs de projet. Pré-requis : Bonne connaissance de l environnement Mac ou Windows).

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

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

WysiUpStudio. CMS professionnel. pour la création et la maintenance évolutive de sites et applications Internet V. 6.x

WysiUpStudio. CMS professionnel. pour la création et la maintenance évolutive de sites et applications Internet V. 6.x WysiUpStudio CMS professionnel pour la création et la maintenance évolutive de sites et applications Internet V. 6.x UNE SOLUTION DE GESTION DE CONTENUS D UNE SOUPLESSE INÉGALÉE POUR CRÉER, MAINTENIR ET

Plus en détail

Les 10 étapes incontournables pour réaliser un site internet performant et accessible

Les 10 étapes incontournables pour réaliser un site internet performant et accessible COMITÉ DE COMMUNICATION DE L AOMF FICHE-CONSEIL N 2 Les 10 étapes incontournables pour réaliser un site internet performant et accessible Les 10 étapes que vous retrouvez ci-dessous peuvent faire partie

Plus en détail

CAHIER DES CHARGES. Sommaire. 1 Présentation 1.1 Vos interlocuteurs 1.2 Date de remise des offres

CAHIER DES CHARGES. Sommaire. 1 Présentation 1.1 Vos interlocuteurs 1.2 Date de remise des offres CAHIER DES CHARGES Utilisation du cahier des charges : - conservez ou modifier les textes en noir. Nous avons volontairement ajouté de nombreux points ou caractéristiques dans le cahier des charges. Vous

Plus en détail

Sommaire. - Page 1 sur 19 -

Sommaire. - Page 1 sur 19 - Sommaire I Ergonomie du site 2xmoinscher... 2 1 Infos globales... 2 2 Homogénéité/cohérence... 3 3 Adaptabilité... 3 4 Guidage... 4 5 Représentativité... 5 6 Charge de travail... 6 7 Gestion des erreurs...

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

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

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

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

Support de cours et mode d emploi pour le CMS WordPress

Support de cours et mode d emploi pour le CMS WordPress pour le CMS WordPress Retrouvez notre le plan de formation sur http:///formation- cms- wordpress- creer- et- administrer- un- site- web.html Agence de communication la couleur du Zèbre - Mise à jour Août

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

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

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

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

EVOLUT1ON. Pour créer des sites Web, des boutiques enligne et des Blogs en 5 étapes. PRIX : TVA comprise 69,99

EVOLUT1ON. Pour créer des sites Web, des boutiques enligne et des Blogs en 5 étapes. PRIX : TVA comprise 69,99 Fonctions avancées : Plus de 1.500 modèles graphiques personnalisables Boutiques en ligne avec payement par carte de crédit Blog, Livre d Or et Flux RSS Formulaires email avec fonctions anti-spam Gestion

Plus en détail

Formations Web. Catalogue 2014 Internet Référencement Newsletter Réseaux sociaux Smartphone

Formations Web. Catalogue 2014 Internet Référencement Newsletter Réseaux sociaux Smartphone Formations Web Catalogue 2014 Internet Référencement Newsletter Réseaux sociaux Smartphone Formations Web CCI Formation vous propose 8 formations WEB 1 formation Smartphone Nos formations se déroulent

Plus en détail

... Cahier des charges Site Internet Office de Tourisme Lesneven - Côte des Légendes MAITRE D OUVRAGE

... Cahier des charges Site Internet Office de Tourisme Lesneven - Côte des Légendes MAITRE D OUVRAGE @... Cahier des charges Site Internet Office de Tourisme Lesneven - Côte des Légendes MAITRE D OUVRAGE Office de Tourisme Lesneven - Côte des Légendes 12 boulevard des Frères Lumière - BP 48 29260 LESNEVEN

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

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

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

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

Collège Pie10. www.danielpie10.be/site.php

Collège Pie10. www.danielpie10.be/site.php Collège Pie10 www.danielpie10.be/site.php Daniel Massart Février 2007 Sommaire 1 OBJECTIFS 1 2 TYPES DE SITES 1 2.1 Les blogs 1 2.2 Les sites «bibliothèques» 2 2.3 Les sites statiques classiques 2 2.4

Plus en détail

Charte commune des portails internet institutionnels

Charte commune des portails internet institutionnels des portails internet institutionnels Fiche signalétique : Date du document 10/08/2012 Projet Version du document 1.0 Cadre Général d Interopérabilité Règles relatives à la charte commune des portails

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

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

Présentation de la solution IZI-MEDIA mise en œuvre par SiteWebPro

Présentation de la solution IZI-MEDIA mise en œuvre par SiteWebPro Présentation de la solution IZI-MEDIA mise en œuvre par SiteWebPro 1. GENERALITÉS : LA GESTION DE CONTENU - CONTENT MANAGEMENT SYSTEM 1.1. LA GESTION DE CONTENU, C'EST QUOI? Un système de gestion de contenu

Plus en détail

MODE D EMPLOI (v1.1) DE PARUMOBILE, ÉDITEUR EN LIGNE DE SITE MOBILE

MODE D EMPLOI (v1.1) DE PARUMOBILE, ÉDITEUR EN LIGNE DE SITE MOBILE MODE D EMPLOI (v1.1) DE PARUMOBILE, ÉDITEUR EN LIGNE DE SITE MOBILE TABLE DES MATIÈRES 1. Inscription (p.3) 2. Connexion / Votre compte (p.4) 3. Édition (p.5) 3.1. Manager 3.1.1. La barre horizontale des

Plus en détail

Programme de Formation

Programme de Formation Windows / PC - initiation Etre à l aise avec Windows, savoir se situer, organiser son environnement et classer ses documents Tout utilisateur désireux d être rapidement autonome dans l utilisation de l

Plus en détail

CAHIER DES CHARGES SITE WEB : Steve Mind Magicien Close-up & Mentaliste - 1 -

CAHIER DES CHARGES SITE WEB : Steve Mind Magicien Close-up & Mentaliste - 1 - CAHIER DES CHARGES SITE WEB : Steve Mind Magicien Close-up & Mentaliste - 1 - SOMMAIRE - 2 - Sommaire Présentation du projet Contexte Description du projet web Les Enjeux du projet web Analyse Concurrentiel

Plus en détail

Devis Garmin Triathlon de Paris 2012/2013

Devis Garmin Triathlon de Paris 2012/2013 Devis Garmin Triathlon de Paris 2012/2013 Création Nouvelle édition Garmin Triathlon de Paris Redéfinir la mise en page globale des éléments à consulter à partir des nouvelles spécificités techniques demandés.

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

Magento. Magento. Réussir son site e-commerce. Réussir son site e-commerce BLANCHARD. Préface de Sébastien L e p e r s

Magento. Magento. Réussir son site e-commerce. Réussir son site e-commerce BLANCHARD. Préface de Sébastien L e p e r s Mickaël Mickaël BLANCHARD BLANCHARD Préface de Sébastien L e p e r s Magento Préface de Sébastien L e p e r s Magento Réussir son site e-commerce Réussir son site e-commerce Groupe Eyrolles, 2010, ISBN

Plus en détail

SITE WEB Service Client. Charte graphique et technique

SITE WEB Service Client. Charte graphique et technique Service Client Charte graphique et technique 1 Sommaire a / MISE EN FORME Introduction... 3 Les logos Veolia... 4 Police & taille - généralité... 6 Police & taille gabarits principaux... 7 Palette de couleur...

Plus en détail

Bienvenue chez Spluw

Bienvenue chez Spluw 1 Bienvenue chez Spluw Ce guide présente les principales fonctions de mise en page et d édition de votre site Web. Vous y trouverez les étapes essentielles de construction de page et de mise en forme pour

Plus en détail

CATALOGUE DES FORMATIONS

CATALOGUE DES FORMATIONS INSTALLATION Une équipe d experts informatiques dédiée à votre bien-être numérique. FORMATION MAINTENANCE CATALOGUE DES FORMATIONS Retrouvez tous les avis clients sur bdom.fr B dom est une entreprise de

Plus en détail

Chapitre 1 Créer votre site web avec Dreamweaver 8 11

Chapitre 1 Créer votre site web avec Dreamweaver 8 11 Chapitre 1 Créer votre site web avec Dreamweaver 8 11 1.1. Installer Dreamweaver sur votre ordinateur... 12 1.2. Découvrir l interface de Dreamweaver... 15 La manipulation de l interface... 16 La gestion

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

10 techniques pour améliorer votre référencement naturel

10 techniques pour améliorer votre référencement naturel 10 techniques pour améliorer votre référencement naturel Sur quasiment 66 millions de personnes en France, 83% sont des internautes, et ils passent en moyenne 4h sur leur ordinateur à naviguer sur le web.

Plus en détail

WordPress : simple et élégant

WordPress : simple et élégant WORDPRESS WordPress : simple et élégant Libre Respectueux des standards Ergonomique Rapide à installer WordPress est un système de gestion de contenu (CMS) qui permet de créer et gérer facilement l ensemble

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 : 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

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

Rapport de Stage Christopher Chedeau 2 au 26 Juin 2009

Rapport de Stage Christopher Chedeau 2 au 26 Juin 2009 Rapport de Stage Christopher Chedeau 2 au 26 Juin 2009 «Web. De l intégration de pages statiques HTML à un CMS, à la dynamisation d un site grâce au Javascript et l utilisation de nouvelles technologies

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

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

COMMENT CONDUIRE UN PROJET DE SITE WEB?

COMMENT CONDUIRE UN PROJET DE SITE WEB? COMMENT CONDUIRE UN PROJET DE SITE WEB? Typologie des sites web Les sites «vitrines» Les sites de «marque» Les sites «catalogues» Les sites marchands Site web et stratégie commerciale Etapes clés de la

Plus en détail

SOMMAIRE 1. NOTRE AGENCE... 3 2. NOS PRESTATIONS... 6 3. NOTRE MÉTHODOLOGIE PROJET... 11 4. NOS OFFRES...12 5. LES ATOUTS DE NOS OFFRES...

SOMMAIRE 1. NOTRE AGENCE... 3 2. NOS PRESTATIONS... 6 3. NOTRE MÉTHODOLOGIE PROJET... 11 4. NOS OFFRES...12 5. LES ATOUTS DE NOS OFFRES... CONCEPTION WEB SOMMAIRE 1. NOTRE AGENCE... 3 1.1 Nos valeurs... 4 1.2 Notre expertise... 5 1.3 Notre équipe... 5 2. NOS PRESTATIONS... 6 2.1 Site institutionnel / vitrine... 7 2.2 Site e-commerce... 8

Plus en détail

CAHIER DES CHARGES. Refonte d un site internet marchand. Micro-Modèle. (www.micro-modele.fr)

CAHIER DES CHARGES. Refonte d un site internet marchand. Micro-Modèle. (www.micro-modele.fr) CAHIER DES CHARGES Refonte d un site internet marchand Micro-Modèle (www.micro-modele.fr) DEVELOPPEMENT DU SITE WEB : BÉZIAN Anthony GLUSHCHENKO Petr DIRECTEUR DE PROJET : SCHMITT Clément 1 Sommaire I.

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

C branché Petit lexique du vocabulaire informatique

C branché Petit lexique du vocabulaire informatique Vous informer clairement et simplement C branché Petit lexique du vocabulaire informatique L univers de l informatique et d Internet est riche en termes plus ou moins techniques. Pour vous aider à vous

Plus en détail

Projet Web. Tim Burton. Refonte complète du site de Tim Burton en utilisant les dernières technologies du web : HTML 5 / CSS 3 / JavaScript...

Projet Web. Tim Burton. Refonte complète du site de Tim Burton en utilisant les dernières technologies du web : HTML 5 / CSS 3 / JavaScript... Projet Web Tim Burton Refonte complète du site de Tim Burton en utilisant les dernières technologies du web : HTML 5 / CSS 3 / JavaScript... Par Omar EDDASSER L3 ISC parcours MIAGE Sous l enseignement

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

COMMENT CONDUIRE SON PROJET DE SITE WEB?

COMMENT CONDUIRE SON PROJET DE SITE WEB? COMMENT CONDUIRE SON PROJET DE SITE WEB? Lorraine Pour être efficace, un site web doit être réfléchi et en adéquation avec la stratégie de l entreprise. Cette notice présente les différentes possibilités

Plus en détail

PROFIL. Intégrateur Web. Missions

PROFIL. Intégrateur Web. Missions L intégrateur HTML est chargé de développer la partie front office des sites internet ou encore de coder les newsletters en HTML. À partir des éléments graphiques fournis au format Photoshop, il réalise

Plus en détail

Cahier des charges. Racing. Flag

Cahier des charges. Racing. Flag Cahier des charges Racing Flag Jérôme LESTARQUIT CQP Octobre 2012 SOMMAIRE 1 Présentation de l entreprise... p.03 2 Présentation du projet... p. 03 2.1 Rôle... p. 03 2.2 Objectifs du site... p. 03 2.3

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

Offres & services. WEBSITING 7, rue rougemont - 75009 Paris / contact@websiting.fr www.websiting.fr / 01 75 51 48 85

Offres & services. WEBSITING 7, rue rougemont - 75009 Paris / contact@websiting.fr www.websiting.fr / 01 75 51 48 85 Offres & services l agence Fondée en 2009, Websiting a élu domicile au cœur de Paris. Agence Digitale, spécialisée dans la création de sites Internet sur-mesure. NOTRE RéuSSITE PASSE PAR la vôtre websiting

Plus en détail

Manuel du rédacteur. Dernière mise à jour : le 14/04/2010

Manuel du rédacteur. Dernière mise à jour : le 14/04/2010 Manuel du rédacteur Dernière mise à jour : le 14/04/2010 Table des matières 1 PRÉSENTATION GÉNÉRALE... 3 2 L INTERFACE DE GESTION... 3 2.1 ACCÈS À L INTERFACE DE GESTION... 3 2.2 PRÉSENTATION GÉNÉRALE...

Plus en détail

Sorin Lucas Ricou Sander. Rapport de projet SI28

Sorin Lucas Ricou Sander. Rapport de projet SI28 Sorin Lucas Ricou Sander A14 Rapport de projet SI28 1 I. Concept Application web permettant la création d une vidéo virale type «NyanCat». L utilisateur aura à sa disposition des musiques, des fonds, des

Plus en détail

OCLOUD BACKUP GUIDE DE REFERENCE POUR WINDOWS

OCLOUD BACKUP GUIDE DE REFERENCE POUR WINDOWS OCLOUD BACKUP GUIDE DE REFERENCE POUR WINDOWS http://ocloud.pripla.com/ Copyright 2014 Private Planet Ltd. Certaines applications ne sont pas disponibles dans tous les pays. La disponibilité des applications

Plus en détail

ADMINISTRATION DU PORTAIL AFI OPAC 2.0 V3 AFI OPAC 2.0

ADMINISTRATION DU PORTAIL AFI OPAC 2.0 V3 AFI OPAC 2.0 ADMINISTRATION DU PORTAIL AFI OPAC 2.0 V3 AFI OPAC 2.0 V3 Sommaire Sommaire... 2 Note :... 2 Quelques Notions... 3 Profil :... 3 Pages :... 5 Créer du contenu... 6 Identification de l administrateur :...

Plus en détail

Ma première visibilité sur le Web. en 60 min avec des outils gratuits

Ma première visibilité sur le Web. en 60 min avec des outils gratuits Ateliers Commerce Internet Ma première visibilité sur le Web en 60 min avec des outils gratuits 23/04/2015 1 Ma première visibilité sur Internet Même sans site internet! Pourquoi être présent sur Internet?

Plus en détail

Bureautique Initiation Excel-Powerpoint

Bureautique Initiation Excel-Powerpoint Module de Formation Personnalisée : Bureautique Initiation Excel-Powerpoint Durée : jours ouvrables Prix : Formation personnalisée en vue d obtenir les notions de base indispensables pour : Excel Office

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

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

Guide de l utilisateur pour Firefox 4 Mobile. Contact us: press@mozilla.com

Guide de l utilisateur pour Firefox 4 Mobile. Contact us: press@mozilla.com Guide de l utilisateur pour Firefox 4 Contact us: press@mozilla.com Sommaire À propos de Mozilla 1 Lancez-vous! 2 Tapez Moins, Surfez Plus! 3 Emportez votre Firefox partout avec vous 5 Personnalisez votre

Plus en détail

Liste des modules CMS SIGI

Liste des modules CMS SIGI Liste des modules CMS SIGI Document descriptif des modules CMS 6, rue de l Etang, L-5326 Contern Tél. : +352 35 00 99-1 contact@sigi.lu BP 63, L-5201 Sandweiler TVA : LU 13753429 www.sigi.lu Historique

Plus en détail

Liste des modules CMS SIGI

Liste des modules CMS SIGI Liste des modules CMS SIGI Document descriptif des modules CMS 6, rue de l Etang, L-5326 Contern Tél. : +352 35 00 99-1 contact@sigi.lu BP 63, L-5201 Sandweiler TVA : LU 13753429 www.sigi.lu Historique

Plus en détail

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

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

Plus en détail

Écriture de pages Web

Écriture de pages Web Écriture de pages Web Le langage HTML / XHTML Laurent Tichit Janvier 2011 Laurent Tichit 2005-2010 1 Comment fonctionne le Web? C'est un mécanisme client-serveur. Logiciel serveur : programme qui a pour

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

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

Renouvellement du site Internet

Renouvellement du site Internet COMMUNAUTE DE COMMUNES DE LA BRIE NANGISSIENNE Renouvellement du site Internet Cahier des charges 17/06/2013 Contact : Pierre-Alaric Espana communication@brienangissienne.fr 01 64 01 40 13 Communauté de

Plus en détail

Création outil multimédia de restitution du projet «l intergénérationnel : un levier pour un levier pour créer du lien social en milieu rural

Création outil multimédia de restitution du projet «l intergénérationnel : un levier pour un levier pour créer du lien social en milieu rural CAHIER DES CHARGES Création outil multimédia de restitution du projet «l intergénérationnel : un levier pour un levier pour créer du lien social en milieu rural Juillet 2013 Sarah Pecas I - PRESENTATION

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

Inspiration 8.0. Sans plus tarder, partez à la découverte d Inspiration. Vous verrez comme ce logiciel est amusant à explorer.

Inspiration 8.0. Sans plus tarder, partez à la découverte d Inspiration. Vous verrez comme ce logiciel est amusant à explorer. Inspiration 8.0 Inspiration est un logiciel pour l organisation des idées. Avec Inspiration, vous représentez vos idées sous la forme de schémas, de cartes mentales ou de plans. Inspiration s avère un

Plus en détail

À qui s adresse ce livre? Suppléments web. Remerciements

À qui s adresse ce livre? Suppléments web. Remerciements Avant propos Le marché de la géolocalisation est en pleine effervescence, comme le prouve l annonce de lancement par Facebook, en août 2010, de son service Places, qui permet de partager sa position géographique

Plus en détail

Cahier des charges et des spécifications pour la refonte du site Internet du Centre de Recherche sur les Liens Sociaux (CERLIS)

Cahier des charges et des spécifications pour la refonte du site Internet du Centre de Recherche sur les Liens Sociaux (CERLIS) Cahier des charges et des spécifications pour la refonte du site Internet du Centre de Recherche sur les Liens Sociaux (CERLIS) http://recherche.parisdescartes.fr/cerlis Version finale (28 mai 2015) A

Plus en détail

Création du site internet [insérez le nom de votre site]

Création du site internet [insérez le nom de votre site] Création du site internet [insérez le nom de votre site] Cahier des charges 1. [Insérez le nom de votre société]... 3 2. Le projet... 4 3. Les prestations attendues... 5 4. Les fonctionnalités du futur

Plus en détail

Introduction JOOMLA. Fonctionnalités. Avantages. Hainaut P. 2013 - www.coursonline.be 1. Joomla est un système de gestion de contenu CMS open source

Introduction JOOMLA. Fonctionnalités. Avantages. Hainaut P. 2013 - www.coursonline.be 1. Joomla est un système de gestion de contenu CMS open source JOOMLA Introduction Joomla est un système de gestion de contenu CMS open source Il permet la conception rapide de sites Web avec une présentation soignée et une navigation très simple C est l outil idéal

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

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

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

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

Guide du contributeur Jahia 6.6

Guide du contributeur Jahia 6.6 DOCUMENTATION Guide du contributeur Jahia 6.6 Jahia, le CMS open source de nouvelle génération apportant à vos projets la convergence applicative (web, document, social, recherche et portail) unifiée par

Plus en détail

Projet site internet agrivalor.eu PROPOSITION D EVOLUTION DU SITE WEB & SERVICES ASSOCIÉS

Projet site internet agrivalor.eu PROPOSITION D EVOLUTION DU SITE WEB & SERVICES ASSOCIÉS Projet site internet agrivalor.eu PROPOSITION D EVOLUTION DU SITE WEB & SERVICES ASSOCIÉS 1 POURQUOI? RAPPEL DU CADRE DE LA DEMANDE Cette proposition fait suite à notre rencontre du 4 avril 2013 avec Melissa

Plus en détail