Sommaire. 1_Présentation 2_Le front-office 3_Le back-office 4_Technique. 1_Présentation

Transcription

1 Date. 27 octobre 2010 Objet. Cahier des Charges Site web Imprimerie Valette Destinataire. Matthieu Desjardins Informatique Adresse. 6 rue Philomène Magnin Lyon Sommaire 1_Présentation 2_Le front-office 3_Le back-office 4_Technique 1_Présentation L'imprimerie Valette est une société familiale fondée en 1908 qui souhaite mettre en place une nouvelle communication web. L'imprimerie Valette détient aujourd'hui un site web : Ce site web a été réalisé à partir d'un cms, Joomla et ne bénéficie pas d'un référencement optimal. Le site web est référencé avec le référencement du cms Jomla : "le portail dynamique et système de gestion de contenu". L'imprimerie Valette détient, depuis peu une nouvelle communication papier basée sur le code couleur : blanc, gris et rose. Le site web actuel ne prend pas en compte ce code couleur, le fond de site est bleu clair, noir pour le footer, et blanc pour le reste. La typographie est simple et en noir. L'arborescence est composée de 11 boutons. L'analyse est simple : le site web n'a pas de référencement, le graphisme ne correspond pas à l'image actuelle de l'imprimerie valette. De plus, l'arborescence est trop importante, et comporte des redondances. Nous proposons la création d'un site web HTML : - Avec un système présentation par frise originale, alternance fond gris et fond rose, graphisme typographique entre les deux. - Un système de présentation d'images via diaporamas flash, diaporamas fullscreen. - Une interface de gestion des textes et visuels de contenus via un Back-office. 2_Le front Office Une fois l'adresse chargée, l'internaute arrive sur une page de chargement avec le logo Valette en gros l'internaute est invité à visiter le site de l'imprimerie. Une fois cette page chargée, l'internaute arrive sur la première page du site avec le logo et le menu principal, figé, de navigation sur le haut gauche de la page. L'internaute découvre deux originalités du site web de l'imprimerie Valette : - Une frise compose l'ensemble des pages du site web. Chaque page correspond à un bouton du menu de navigation principal. Quand l'internaute sélectionne une page, la frise avance ou recule. Cet effet illustre le fonctionnement des machines d'imprimerie. Chaque page est liées par une représentation typographique de l'intitulé de la page : un aggloméra de lettres. Cette représentation typographique a deux objectifs : annoncer la page suivante, et représenter une nouvelle fois l'essence d'une imprimerie : les caractères typographiques.

2 - Originalité colorimétrique : la frise qui compose l'ensemble des pages du site web est une alternance de fonds gris clair et rose vif. D'une façon générale, le site web ne contient pas d'ascenseur sur le coté droit. Les contenus textuels peuvent contenir des ascenseurs internes, donc intégrés au graphisme des pages. En plus du menu principal de navigation, des menus secondaires sont présents sous le menu principal sur chacune des pages. Ces menu secondaires, nommés sous menus, ne sont pas figés (à l'inverse du menu principal). L'imprimerie Valette aura la possibilité de changer, ajouter ou supprimer un sous-menu, via le Back-office. L'internaute qui accède au sous menus ne voit pas la frise avancer ou reculer. Ce ne sont que le contenus textuels et visuels de la page qui changent. Arborescence du site imprimerie-valette.com : présentation / news / contact / partenaires / faire-part / travaux de ville / espace pro / outils et tarifs A cette arborescence nous proposons les sous-menus suivants : présentation présentation historique compétences news environnement Galeries Lafayette salons du mariage contact google map lien Facebook partenaires professionnels nos bonnes adresses sponsoring liens utiles mentions légales faire-part faire part mariage classique fantaisie création Valette dorure et pliage timbrage faire-part naissance classique fantaisie création Valette dorure et pliage nouveautés travaux de ville visite décès invitation et rallye espace pro

3 Cartes de visites Cartes de commerce Têtes de lettres Print outils et tarifs polices couleurs symboles enveloppes tarif pdf mariage tarif pdf naissance Maquettes des pages du site web : Page accueil Logo

4 C'est la première page du site web, l'internaute est invité à cliquer sur la mention "entrez dans le site". Au passage de la souris, la mention "entrez dans le site" devient un rectangle rose et un bouton cliquable, pour entrer dans le site.

5 Page Présentation La page présentation présente trois sous menus : l'imprimerie, historique, et compétences. Ces trois sous parties sont composées de texte et diaporama de visuels. Textes et visuels modifiables dans le Back-office.

6 Page news La page news permet de mettre en avant deux activités importantes : environnement et le partenariat avec les Galerie Lafayette. Ces sous menus sont modifiables via le Back-office. Textes et diaporamas de visuels, également modifiable via le Back-office.

7 page contact La page contact permet de localiser, grâce à la google map l'imprimerie Valette. Au passage de la souris sur le logo facebook celui-ci prend la couleur original bleu du logo et au clique le lien sur la page facebook de l'imprimerie Valette s'ouvre dans une nouvelle fenêtre de navigation.

8 Page partenaires La page partenaires permet d'accéder à des sous menus composés de textes, diaporamas de visuels et liens site web (si chargés via le Back-office). Textes, visuels et liens site web sont modifiables via le Back-office.

9 Page faire-part / travaux de ville / espace pro

10

11 Les trois pages faire-part, travaux de ville et espace pro fonctionnent d'une façon identique. L'internaute accède à ces pages par des sous-menus, modifiables via le Back-office. Chaque sous-menu est composé d'un texte et d'un diaporama, également modifiables via le back-office. L'internaute peut alors "lire le diaporama", au clique un film grisé se superpose en fullscreen sur l'ensemble du site web. En haut, une bande laisse apparaitre la référence du visuel. Dessous un tableau de bord de navigation permet de stopper le diaporama, d'en sortir ou d'avancer plus rapidement, ou enfin de revenir en arrière. Puis le visuel apparait toujours centré.

12 page travaux de ville

13 Fonctionnement de cette page est expliqué ci-dessus, partie page faire-part, travaux de ville et espace pro.

14 Page espace pro Fonctionnement de la page est expliqué ci-dessus, partie page faire-part, travaux de ville et espace pro.

15 Page outils et tarifs Cette page présente deux sous menus : outils et tarifs. Les visuels et pdf sont modifiables via le Back-office. Si il n' y a pas de pdf, le terme 'télécharger pdf" n'apparait pas.

16 Exemple de lien typographique : Içi nous présentons le line typographique entre les pages news et page contact. Toutes les pages de liens seront construites de la même manière : entrelacement de lettres correspondantes au mot de la page suivante, içi les lettre du mot "contact".

17 3_Le Back Office En plus du Front-office, nous créons un Back-office facile d'utilisation et limité à l'usage unique des propriétaires de l'imprimerie Valette. Ce back-office sécurisé par un mot de passe et login permettra à eux seuls de changer : Textes et visuels Visuels des diaporamas Modification, ajout ou suppression des sous menus pdf Liens site web 4_Technique Les techniques utilisées pour la création et le développement du Front office et du Back office du site web sont : - Java script : technique utilisée pour les diaporamas - Html : technique utilisée principalement pour le développement du Front office - Flash : technique utilisée pour la création et l'animation les diaporamas - PHP : technique utilisée pour le front et le back office - Mysql : création de la base de donnée pour l'ensemble du site web

18 Technique Diaporama : Afin de dynamisé les pages et de rendre le site plus attractif, nous développerons des diaporamas pour les sous menus des pages : faire-part, travaux de ville et espace pro. La technique utilisée sera le javascript qui permet de créer des fondus noirs, des effets de transitions fluides et animées. Le Java script sera également employé pour la fluidité et le chargement des images. Codes Couleurs Blanc Rose : ff018a Gris clair : b5afaf Gris foncé : Typo - pour les titres et menu: din light 14 soit verdana 12 - pour les textes : din 13 soit verdana 11 Nous restons disponibles pour toutes informations complémentaires. Recevez nos sincères salutations. Tanguy Bugand Votre contact : Tanguy Bugand Responsable projet +33 (0) Veuillez retourner ce document signé Condition de règlement : 20% à l'acceptation du cahier des charges Cachet, date et signature précédée de «bon pour accord»