Echosgraphik. Ce document sert uniquement à vous donner une vision sur ma manière de travailler et d appréhender un projet

Transcription

1 Echosgraphik Ce document sert uniquement à vous donner une vision sur ma manière de travailler et d appréhender un projet

2 Présentation I. Echosgraphik Protocoles de travail I. Développement du site II. Mise en ligne du site III. Formation pour la mise à jour du site IV. Maintenance Outils de travail I. Graphisme II. Développement III. Optimisation pour smartphone et tablettes : Le responsive Design IV. Force de proposition Réalisation du site I. Le front office et Backoffice II. Conception et développement III. Langage et frameworks IV. Tests, livraison et déploiement V. Versionning VI. Référencement Formation et maintenance I. Formation / Documentation II. Maintenance Table des matières

3 Table des matières Exemple de livrables I. Recommandations II. Scenariis avec arborescence et navigation III. Design du site Références I. Sur le site II. Autres références

4 Présentation I. Echosgraphik Basée près de Bordeaux, Je travaille à la fois comme consultant pour des sociétés de développement et comme prestataire sur des projets liés au développement web et mobile. Me positionnant à la fois comme un freelance et une agence en fonction des besoins de mes clients, je peux répondre aux différents besoins des entreprises ou des collectivités qui font appel à mes services. Depuis Janvier 2012, Echosgraphik travaille de plus en plus sur des projets d envergure internationale pour des clients tels que l OCDE, Camineo, Gseispur, Pulsar et bien d autres ( voir page 21 ). Vous trouverez mes réalisations sur mon site internet ( et sur les sites des agences pour lesquelles je travaille. Je travaille aussi en direct pour des grands groupes comme Ekparis, Luchon 3404, Carpy, Caminéo, AXA, etc... Pour tous mes projets, je propose la rédaction de recommandations stratégiques, marketing et ergonomique mais aussi la conduite de projet Web et l élaboration de préconisations suite à l étude des besoins réalisée avec le client. J ai notamment réalisé des sites pour la Caisse d épargne, ou des sites intranets pour le Conseil général de la gironde ou la société Auvence. Et je me suis occupé de la communication de grands groupes comme Pôle emploi, Kéolis, Ekparis, Camineo...

5 Présentation Echosgraphik travaille de plus en plus sur des applications métiers. Pour cela je m entoure, en fonction du projet, d experts dans leurs domaines tels que le développement d applications web spécifiques, le développement d applications Iphone, la conduite de projets pour les grands groupes,...

6 Protocole de travail Le travail se fera en accord avec les points vus avec vous lors de l entretien qui définira les axes de travail pour mener à bien le projet. Un point sera fait chaque semaine sur l avancée du projet. I. Développement du site Après signature du devis, il sera créé pour vous un ESPACE CLIENT qui vous permettra d accéder aux données de votre site et aux contenus téléchargeables. Sur cet espace, vous pourrez suivre l avancement du développement de votre site comme si celui-ci était en ligne. II. Mise en ligne du site Une fois le site développé et en accord avec vous le site sera mis en ligne par nos soins sur l hébergeur. Vous pourrez à partir de ce moment là mettre à jour son site via l interface d administration (voir plus bas). III. Formation pour la mise à jour du site La formation pour la gestion du site est effectuée par mes soins. Il vous sera fourni un document reprenant point par point les protocoles de gestion du site.

7 Protocole de travail IV. Maintenance Le site est garanti 6 mois et la maintenance est offerte durant ce laps de temps. Passé cette durée, le client peut choisir de souscrire à une prestation de maintenance du site mensuelle ou non.

8 Outils de travail I. Graphisme Seront utilisés pour le graphisme les logiciels Photoshop et Illustrator. II. Développement Le site sera développé grâce aux langages HTML5 / CSS3 (SASS) / Bootsrap / Javascript (Jquery) / PHP5 MySql Le HTML5 et CSS3 sont les nouveaux langages permettant la création de pages web dynamiques et lisibles sur tous les navigateurs. Ce langage permet aussi l optimisation de la lisibilité des personnes handicapées. Enfin, le HTML5 permet de pouvoir naviguer via les smartphones et les tablettes sur le site. Le javascript remplace le flash pour rendre le site vivant et ludique. Bootstrap est un framework CSS & Javascript conçu pour optimiser le développement. III. Optimisation pour smartphone et tablettes : Le responsive Design Le site est optimisé pour les navigateurs IE 8 / 9 / 10, ainsi que Chrome, Safari et Firefox. Bien que le site soit visible sur smartphone et tablette ( le site sera visible mais il faudra scroller ou zoomer), il faut une optimisation spécifique si l on souhaite un confort optimal de navigation avec certains devices ou résolution d écrans. Cette optimisation s appelle le responsive design qui consiste en l élaboration d une interface ergonomique sous la contrainte d un faible

9 Outils de travail espace d affichage et force à épurer le maximum les éléments visibles par l utilisateur final. Bootstrap est d ailleurs orienté mobile first. IV. Force de proposition Ayant travaillé et travaillant encore aujourd hui pour des agences de communication dans toute la France en tant que chargé de projet web, Echosgraphik a l avantage de maîtriser toutes la chaîne de création web et de la communication internet. Pour cela, nous nous permettront de faire des recommandations graphique, ergonomique, de développement et de référencement tout au long de notre collaboration pour que le projet soit en parfait accord avec vos attentes et réponde aux contraintes liées à l internet.

10 Réalisation de site I. Le front office et Back-office Un site se compose généralement comme suit : 1- Une partie Front-office visible par tous les utilisateurs ainsi que par les internautes 2- Une partie Back-office permettant la gestion de l application Pour la réalisation du site et de la partie utilisateur, le site test réalisé au format HTML/CSS3. I.a - L HTML5/CSS3 L HTML5 est une évolution de l HTML4.01 (et de l XHTML1.0). Il permet de structurer sémantiquement et de mettre en forme le contenu des pages, d inclure des ressources multimédias dont des images, des formulaires de saisie et des éléments programmables tels que des applets. Nous utilisons SASS pour rendre notre CSS maintenable. Le CSS3 lui permet d uniformiser l application et le développement pour tous les navigateur ( sur PC, Smartphones,...). Il sera utilisé pour le développement front-end le framework Foundation pour le HTML5/CSS3 et responsive design. Foundation est un framework destiné aux applications web. Foundation est également une boîte à outils HTML, CSS et JavaScript permettant de créer

11 Réalisation du site rapidement et efficacement des applications web. I.b - Le javascript Pour améliorer l expérience utilisateur, le langage Jquery ( language javascript ) sera utilisé. Jquery est une bibliothèque JavaScript libre qui porte sur l interaction entre JavaScript (comprenant Ajax) et HTML et a pour but de simplifier des commandes communes de JavaScript. I.c - Normes W3C Il sera apporté un soin particulier au respect des normes W3C. Le W3C est un organisme de standardisation chargé de promouvoir la compatibilité des technologies du World Wide Web telles que HTML, XHTML, XML, RDF, CSS, PNG, SVG et SOAP. Le site / application devra être compatible avec tous les navigateurs en activité. II. Conception et développement La conception de l application s effectuera dans l environnement de développement suivant : SGBD : Mysql, Sybase, Postgresql, Oracle Environnement de développement (HTML, PHP, XML, etc.) Serveur : Tomcat, Websphere, IIS, Apache, Linux

12 Réalisation du site II.a - Langage PHP La partie application, en plus du langage HTML5/CSS3 et du javascript, sera développée grâce au PHP avec l utilisation d un framework type Symphony. Le langage PHP est utilisé principalement en tant que langage de script côté serveur, ce qui veut dire que c est le serveur (la machine qui héberge la page Web en question) qui va interpréter le code PHP et générer du code (constitué généralement d XHTML ou d HTML, de CSS, et parfois de JavaScript) qui pourra être interprété par un navigateur. Il a été conçu pour permettre la création d applications dynamiques, le plus souvent développées pour le Web. Le framework PHP lui, est écrit en php5. Son rôle est d accélérer le développement de site internet, extranet, intranet ou d une application. Toute demande qui comporte l appel à une base de données, des formulaires, sessions, cookies ou l appel à un service à distance (comme Twitter ou Facebook) gagnera en performance en partant d un framework existant et utilisé par de nombreux autres systèmes. Cela permettra de développer un système sûr, sécurisé, facilement modifiable. Toutes les actions dites dynamiques du site comme la génération d un bon de commande, d un mail, etc.. seront gérées par le PHP. II.b - Le serveur et l hébergement Il est conseillé de prendre un hébergement correspondant aux contraintes d une application web. Il devra prendre en compte les éléments suivants :

13 Réalisation du site Un système de sauvegarde régulière des données à plusieurs niveaux, Une restauration des données possibles en cas de dysfonctionnement, L assurance d un système de sécurité et de protection des données ainsi que des transferts, Le cryptage pour la protection des données personnelles enregistrées, La connexion simultanée de plusieurs utilisateurs, Installation et configuration de bases de données, La mise à disposition de plusieurs comptes , Antispam, antivirus Nom de domaine III. Langage et frameworks Pour le site seront donc utilisés : HML5 / CSS3 Le framework Foundation PHP5 / MySQL5 Javascript (Jquery) Modernizr

14 Réalisation du site IV. Tests, livraison et déploiement Une fois le développement terminé, vous pourrez procéder à la validation du bon fonctionnement de l application. Cette phase est importante et demande une forte implication de votre part. Elle permet de vérifier que les modules livrés fonctionnent correctement et qu ils répondent aux fonctionnalités définies dans le dossier d analyse détaillée. On liste l ensemble des fonctionnalités et l on teste chaque fonctionnalité une par une. Un listing de bug et d incohérence verra le jour. On entre dans la phase de debug. Pour chaque fonctionnalité, un état est défini à OK ou KO. Si l état est à OK, la fonctionnalité est opérationnelle. Si l état est à KO, la fonctionnalité a planté, ou bien ne s est pas réalisée entièrement. Ces lignes de tableau représentent donc la phase de recette, ou recettage. Les opérations de tests sont généralement consignées dans un cahier de recettes rédigées par vos soins. Une fois la phase de recette validée, le procès-verbal de recette signé par vos soins, nous procéderons à la mise en production du site et la période de garantie débutera.

15 Réalisation du site V. Versioning Il sera utilisé pour le versioning : Github (via des «Repositories» privés) pour une gestion des versions décentralisées. La première release officielle sera donc identifiée par le numéro de version 1.0 (version 1 révision zéro). En cas de correctifs, ce même lot d évolutions sortira sous le numéro de version 1.1 (version 1 révision 1). Cela indique que les fonctionnalités sont identiques (ni ajout ni suppression de fonctionnalités) mais que des corrections ou améliorations y ont été apportées. En cas d évolution sur les fonctionnalités, le lot d évolutions sortira sous le numéro de version 2.0 (version 2 révision 0). Cela indique que les fonctionnalités ont changées mais que des corrections ou améliorations n ont pas été apportées. VI. Référencement Le site et son code seront optimisés pour le référencement naturel. Les balises du site et son codage permettront aux moteurs de recherche de référencer le site. Il sera mis en place un sitemap, et des outils pour suivre et optimiser le référencement, tels que les tags Google, les outils webmasters google,... Un soin particulier sera apporté à la réécriture URL, source principale de référencement naturel. Nous pourrons aussi mettre en place avec vous une offre pour un référencement avancé.

16 Formation et maintenance I. Formation / Documentation Comme mentionné plus haut la formation sera assurée par nos soins. Elle vous permettra d être parfaitement autonome sur la gestion de votre site. La formation n a pas de durée maximale et pourra s étaler sur plusieurs séances. II. Maintenance La maintenance de votre site ou application comprend toutes les opérations de correction, de maintien en l état de fonctionnement conforme avec l activité de l entreprise et la législation. Ces prestations de maintenance sont par essence difficilement prévisibles. Les facteurs de changement sont divers : Les évolutions entraînées par les changements de législation Les modifications dues à des prestataires externes (paiement électronique...) Les modifications liées à vos changements de priorités, à l évolution de vos besoins. Il y a 3 type de maintenance qui vous sont proposées :

17 Formation et maintenance MAINTENANCE CORRECTIVE Pour garantir la continuité des services proposés aux clients par l intermédiaire de votre site Web MAINTENANCE ÉVOLUTIVE Pour faire évoluer votre site Web et mieux répondre aux attentes des clients SUPPORT ET VEILLE TECHNOLOGIQUE Pour bénéficier en permanence de l expertise d une société spécialisée Le paiement de la prestation est mensualisé. Le contrat de maintenance est signé pour un minimum de 6 mois. Un document contenant le détail sur les offres de maintenance peut vous être envoyé si vous le désirez.

18 Exemples de livrables I. Recommandations Format PDF Ce document reprendra toutes les fonctionnalités du site pour que le travail se fasse en parfaite entente avec le client. II. Scenariis avec arborescence et navigation Format PDF Ce document montre l arborescence du site au client tel qu il sera lors de la finalisation du site. La réalisation de l arborescence necessite un travail de fond sur l ergonomie, la structure, et sur les recommandations. C est pourquoi il est préférable de réaliser ce document après avoir valider le document de recommandation. Exemple d une arborescence récente réalisée pour un client ( Arwine - application de gestion web ) : III. Design du site Wireframes Format PDF C est une maquette qui précède toutes les autres et qui se veut être minimaliste d où le nom maquette fil de fer. On va se pencher à

19 Exemples de livrables cette étape du projet web qu il soit e-commerce ou non sur l objectif à atteindre. C est très important puisque les éléments vont être disposés sur la maquette fil de fer de façon à obtenir le meilleur taux de conversion. L idée du wireframe est donc de poser la base de la structure du site en apportant des explications techniques / pratiques pour la suite, pour ne pas se lancer directement dans du web design pur et dur. Exemple d un wireframe récent réalisé pour un client ( Gesause - Autriche ) :

20 Références I. Sur le site Echosgraphik vous propose des solutions adaptées à votre projet en terme de recherche ergonomique et graphique. Du wireframing à la réalisation finale, tout est mis en œuvre pour apporter à l utilisateur une expérience de navigation simple et ludique. En perpétuelle veille sur les nouvelles technologies, Echosgraphik tend à proposer à ses clients le meilleur en terme de développement. Chaque projet est unique. La réponse donnée à celui-ci se doit donc de l être également. C est pourquoi Echosgraphik adapte sa méthodologie en fonction du besoin et apporte systématiquement une réponse pertinente. La pluralité des contenus liée à chaque demande permet une efficacité accrue. II. Autres références Travaillant sur une nouvelle version de mon site, certaines références ne sont pas encore présentées sur la version actuelle. En voici la liste : Site en ligne

21 Références Site en cours de réalisation - APF et MRDE - Réalisation d un site pour l OCDE ( G8 ) Gesause - Réalisation d un site pour le site national Gesause ( Autriche ) Gesause - Réalisation d une application de gestion pour le site national Gesause ( Autriche ) Pulsar - Réalisation d une application de gestion pour le site Pulsar

22 Références - Arwine - Réalisation d une application de gestion des parcelles de vins à travers le monde