JPC Jeunesse Pour Christ

Transcription

1

2 Sommaire Présentation Projet : Conception Graphisme & Musique Dossier Technique : Charte Graphique : Devis et Annexe : Conception Juin 2009

3 Présentation Projet Refonte du Site Web Officiel. Association chrétienne «pour» Le 03 Juillet 2009 TIM 2009 Cahier des Charges pour la refonte du site Contexte : est une association de loi 1901 sans but lucratif, ses ressources proviennent essentiellement de dons et de la participation des adhèrents aux diverses activités. A ce titre, ils peuvent délivrer des attestations de dons pour une déduction fiscale des impôts en fin d année. France fait partie d une association international : «Youth For International» qui est présente dans plus de 120 pays. Interlocuteurs : Samuel WEILER Directeur FRANCE 11 rue du Tremble Apach-Le-Haut France Page d accueil ancien site Constat : Le site actuellement en ligne - réalisé en 2002, est construit en mode statique. Il ne possède pas à ce jour de Back-Office et donc ne permet pas d effectuer de mises à jour des contenus de façon dynamique. Texte rubrique carte d identité Rubrique

4 Présentation Projet souhaite donc refondre entièrement son site internet dans le but de : Pouvoir faire des mises à jour facilement et régulièrement. Voir naître de nouvelles conversions. Afficher une nouvelle identité visuelle. Offrir plus de services. Mieux informer. Se faire connaître davantage. Etre le site référence, un site portail pour un lien facile vers les autres, un site présentant les activités de. Constituer une base de données utilisateurs (récupération des s) Améliorer la communication avec une information riche et bien structurée. Offrir davantage de services et d outils de navigation. Donner une dimension ludique. Définir une cohérence graphique en adéquation avec sa nouvelle identité visuelle. Gérer le contenu du site via un Back-Office. Une nouvelle identité visuelle : Avec ce nouveau site, il s agit de mettre en place une nouvelle charte graphique, afin de dynamiser les jeunes internautes vers un Design jeune et futuriste. Regrouper la recherche des internautes : Ce nouveau site aura un portail permettant de répondre plus rapidement et précisément aux différentes attentes des jeunes. En effet, étant le centre et la référence, il les redirigera de manière à répondre à leurs attentes. Offrir plus de services : Mettre à la disposition de l internaute d avantage de médias, mettre en ligne des actualités de façon régulière et faire participer de manière simple et explicite les jeunes vers des activités et autre événement. Mise en Place, de façon occasionnelle d une Newsletter d information. Développer la vente en ligne de manière plus intuitive et sécurisée. Le Nouveau site La Communication Visuelle avance avec son temps. Etant un site dédié aux jeunes il est important que le graphisme ainsi que l identité visuelle soient en bonne adéquation. finir, des nouveautés modernes vont être insérées dans le but de faciliter la navigation de l internaute (video, animation Flash etc...) Attirer l attention des jeunes : Création d une ambiance jeune, pour les jeunes., par l intermédiaire de son nouveau site, cherche à informer, fidéliser et rediriger un public d internautes de 15 à 25 ans.attirer l attention d un public occasionnel avec un site «vivant» ergonomique et bien renseigné. L organisation du contenu doit permettre à l internaute qui vient pour la première fois sur le site de trouver rapidement l information qu il recherche. Lui faire (re)découvrir l univers ( sa nouvelle identité visuelle, ses nouveautés ) et lui donner envie de revenir sur le site. Accrocher visuellement et fidéliser un public déja habitué en lui proposant plus d informations ( mise à jour régulières, une Newsletter, des médias de bonnes qualités ( vidéo, photos etc... )

5 Dossier Technique Arborescence générale du front-office Structure des pages et leurs relations. Chaque pages posséde en plus un onglet Acceuil, Actualité et Contact. Toute les pages ont un lien avec le serveur web. Actu Accueil Contact Serveur OVH Catalogue CD DVD Carte de France Carte identité Vitrine Près de chez vous Terrain International Accueil Historique Nous soutenir Dons Flash Contact Prière Com Asso Orien tation Adresse Président Evan gélisation Secréteriat Directeur Formation Web Master Ajout PDF Modif PDF Upload PDF Ajout Produit Accueil Envoi Newsletter Boutique Modif Produit Modifs Pages Terrain Carte identité Nous soutenir Dons Prière Inter Flash Historique Arborescence générale du back-office Structure des pages et leurs relations. Chaque page posséde en plus un onglet Accueil, Actualité et Contact. Toutes les pages ont un lien avec le serveur web. Serveur OVH

6 Structure d une page «Type» Structure des pages et leurs relations. Chaque page posséde en plus un onglet Accueil, Actualité et Contact. Le développement est optimisé pour une résolution d'écran fixe en 800 x 600 pixels afin que le plus grand nombre d'utilisateurs puisse visualiser la totalité des pages dans leur largeur et longeur. Les utilisateurs qui possèdent des résolutions plus élevées verront les pages s'afficher au centre de l'écran dans sa largeur. Onglet qui redirige vers un formulaire de contact en Java Script. Changement d état au passage de la sourie. Plus Effet de mouvement en Java Script Dossier Technique Navigation Principale Navigation Tertiaire Contenu Navigation Secondaire Logo Navigation Tertiaire dimensions exprimées en pixels 600 Onglet qui redirige vers la page d accueil. Page entièrement en Flash. Rubrique principale sous forme de Clés USB. Animation ( HTML ) d ouverture des clés usb en Rollover. Contenu textuel et visuel dynamique géré via le Back Office Mention légal du groupe. Logo ( Flash ). Onglet qui redirige vers un programme, une actualité ou une simple publicité au travers de l animation d une fenêtre Popup en Java Script. Utilisation d un Scrollbar ( Ascenseur ) dans le cas d affluence du contenu. Signature et liens vers le Designer Graphique.

7 Structure de l introduction du site Les 6 étapes de l animation Flash. Livre fermé au clic de la souris Ouverture du livre Livre ouvert Une lumière brille et avance La lumière envahit l écran de l internaute Structure de la page d accueil Réalisation de la page d accueil en Flash. Graphisme réalisé sur Illustrator puis importer en objet véctoriel dans Flash Importation d une video dans Flash. Dossier Technique Le site se construit par des éléments graphiques Un écran apparaît ainsi que le logo animé Les onglets de navigation, le bandeau d images et la video se placent. Fin de l introduction, La navigation est possible. Animation Clip Logo. Lien rubrique principale permettant une navigation sur les pages type. Bande d images servant de lien externe. La position de la souris détermine la vitesse et la direction du déplacement du bandeau. Choix d un player externe ( Play, Pause Mute et barre de progression de la vidéo ).

8 Interface Back Office LES CODES UTILISÉS : Bandeau Reprenant la ligne graphique HTML : Utilisation du language HTML pour les structures de pages Positionnement des éléments avec les CSS. PHP/ MYSQL : Dossier Technique Menu déroulant relatif à la suppression et la modification du contenu des pages Sauvegarde du texte temporairement ou non Aperçu de la mise en page du texte Publication du texte en ligne Barre de Menu Permettant un choix graphique et de mise en page. ( Word simplifié ) Modification du contenu textuel et visuel Utilisation du PHP pour faire la liaison entre le site et la base de données. Afficher, mettre à jour, lister etc... Include permet d injecter du code d un fichier externe dans une page. Création requette : $query2 Exécution du serveur : mysql_query Récuperation des données : mysql_fetch_array Affichage des données : echo Le PHP est utilisé dans le site pour : Sauvegarder le texte côté Back Office et l afficher côté Front Office Enregistrer les produits de la boutique sur la Base de données. Enregistrer les personnes qui ont rempli le formulaire de contact. ( Récupération des coordonnées )

9 Dossier Technique JAVASCRIPT : Utilisation du Java Script pour dynamiser le site à savoir : actualité, contact, menus haut de page, cléf USB etc... Utilisation de FRAMEWORKS mootoolls ( script déjà existant ) : «Shake» script qui permet de faire trembler les boutons ( menu de haut de page ) «SqueezeBox» pour Popup actualité et contact. «ScrollBar» Ascenseur pour le texte. «SlideMenuBuild» Accordéons partie contact. AJAX : Utilisation Occasionnelle de l Ajax pour récupérer les produits de la base de données en rafraîchissant juste une zone de page. ( utilisé pour la partie vitrine ) ACTIONSCRIPT Utilisation de l Action Script dans Flash pour exécuter des actions à des parties spécifiques dans un scénario. ( Intro site, page d accueil, carte et logo...) Navigateurs Les pages sont conçues et testées pour les navigateurs IE 7 et plus,, Firefox 2 et plus, sur Mac et PC et pour le navigateur Safari 3 et plus sur Mac. Les utilisateurs qui utilisent d autres navigateurs n ont pas la garantie d un affichage de pages et d une intéraction optimale. Serveur Web : Le site est hébergé chez Ovh ( ) Interface Base de données : Nom du serveur ( Mysql ) Identifiant propre à «jpc carte d identité» Nom de la base de données Emplacement du texte dans la base de données. ( publication ) Catégorie dans laquelle sont assignées les données Emplacement du texte dans la base de données ( Sauvegarde temporaire )

10 La Couleur Chaque grande famille d onglets de possède une couleur qui lui est propre. Cela permet visuellement à l internaute d identifier rapidement dans quelle catégorie il se trouve. Influence Graphique : Dossier Graphique R : 188 R : 223 R : 238 R : 225 R : 244 R : 239 R : 0 R : 116 R : 181 V : 12 V : 48 V : 148 V : 35 V : 77 V : 121 V : 160 V : 188 V : 221 B : 76 B : 103 B : 160 B : 35 B : 9 B : 11 B : 18 B : 0 B : 98 Vitrine Près de chez vous R : 155 R : 159 R : 190 R : 59 R : 0 R : 98 R : 51 R : 77 R : 230 V : 83 V : 116 V : 162 V : 124 V : 158 V : 201 V : 51 V : 77 V : 230 B : 182 B : 170 B : 202 B : 178 B : 206 B : 242 B : 51 B : 77 B : 230 Contact Nous soutenir Couleurs Commune Le logotype a un rôle important puisqu il représente l identité graphique de. Voici quelques exemples de site Internet qui ont influencé la nouvelle identité graphique de. L identité graphique du site est un élément essentiel du repérage de l utilisateur entre les différents sites constituant la toile Internet.

11 La couleur est en relation avec la rubrique. Zone filaire donnant un dynamisme supplémentaire. La nouvelle identité graphique : Création d une ambiance jeunes pour les jeunes. Couleurs dynamiques, visuel et illustration simples et menus atypiques. «Témoin Visuel : La clé USB reste ouverte. Onglet neutre simple et compréhensif. Fichiers : Les Illustrations on été réalisés sur Illustrator (.ai ) Les Images retouchées, recadrées sur Photoshop (.psd ) La maquette de cette charte sur Indesign (.indd ) Dossier Graphique «Témoin Visuel : La clés USB reste ouverte. Illustration exprimant la jeunesse au travers de la fête foraine. La Terre ( partie animée du logo ) change de couleur suivant la rubrique Onglet neutre jeune simple et dynamique. Vitrine Près de chez vous Nous soutenir Contact ACCUEIL CONTACT Exemple de bouton : Témoin couleur de la rubrique. Les fichiers source utilisables seront livrés à.

12 1 Grandes étapes de réalisation Elaboration du cahier de production dans ses dimensions fonctionnelles, ergonomiques, graphiques, techniques et des médias. Le cahier de production devra comporter les documents suivants : 3 Production et développement Site Web en adéquation avec le contenu du cahier de production. La phase de production sera découpée comme suit : Devis et Annexe Conception Graphisme & Musique 2 Les spécifications fonctionnelles et techniques La charte graphique La charte des médias Le cahier des spécifications techniques et structure de la base de données Tests Effectuer un certain nombre de tests tout au long de la réalisation : Tests de plateforme Test de configuration Tests ergonomiques Tests de performance Tests de chargement de vidéos, sons Déboguage Propositions graphiques Réalisation d une maquette statique du site en HTML avec liens actifs (échantillon des principaux types de pages) Réalisation des gabarits des différents types de pages Mise en place de l outil de gestion des contenus et de son back-office Mise en place de la structure de la base de données Développement et intégration

13 Planification Dates principales marquant les grandes étapes de la conception, du développement et du lancement du projet. Mise en ligne du site : 22 Juin 2009 Cahier de production Production & développement Intitulé des livrables Livraison intermédiaire Validation Par le commanditaire Livraison finale Intitulé des livrables Livraison intermédiaire Validation Par le commanditaire Livraison finale Devis et Annexe Spécifications fonctionnelles et techniques Charte graphique Charte des médias Cahier des spécifications techniques et de la structure de la base de données 01/12/2008 Semaine du 08/12/ /01/ /01/ /02/2009 Semaine du 12/01/2009 Semaine du 12/01/2009 Semaine du 09/02/ /12/ /01/ /01/ /02/2009 Maquette statique et gabarits 02/03/2009 Semaine du 09/03/2009 Maquette dynamique phase 1 de développement Maquette dynamique phase 2 de développement 30/03/ /04/2009 Site Web finalisé 02/06/2009 Semaine du 06/04/2009 Semaine du 04/05/2009 Semaine du 08/06/ /03/ /04/ /05/ /06/2009

14 Devis et Annexe Budget de création L estimation budgétaire ne comprend ni l hébergement, ni le dépôt du nom de domaine. Le budget total alloué à ce projet est estimé à environ euros TTC. Délai d exécution Le prestataire devra proposer un descriptif détaillé du projet incluant le programme précis de tous les travaux à exécuter et leur planning. Ce planning devra être compatible avec le délai de réalisation de 7 mois souhaité par le commanditaire. Délai de paiement L offre du prestataire restera valable un mois à compter de sa date d envoi et les prix seront établis Toutes Taxes Comprises. La facturation sera effectuée à la réception de chaque lot, le délai de règlement est de 45 jours à compter de la réception de la facture. Conception & design Développement & tests ( Front et Back Office ) Animation Flash ( Prestation Global ) Total HT : TVA : 19,6 % ,60 TOTAL TTC : Options de référencement : Référencement manuel, suivi et Analyse : Forfaitaire à 6 mois : HT ,60

15 Remerciements : Cna Cefag : leur Formation tant attendu. Mickael Sourisseau : sa patience, son enthousiasme, son profesionnalisme et son aide. Laurent Cunière : son amitié son soutien et ses encouragements. Samuel Weiller : m avoir accorder le privilège de mener ce projet. Alain Roy : sa confiance, son apprentissage et sa solidarité. Stephane xaygnavong : son apprentissage ses conseils, sa disponibilité ( un modèle pour moi ). Mes parents : le soutien, l écoute et la compréhension. Loic Lannoy : Ami d enfance toujours à mes côtés, à mon écoute......un frère. Conception Juin 2009

16