Processus de développement d'un outil Web
description
Transcript of Processus de développement d'un outil Web
![Page 1: Processus de développement d'un outil Web](https://reader034.fdocuments.fr/reader034/viewer/2022051400/54bc68f04a7959aa788b46d2/html5/thumbnails/1.jpg)
PROCESSUS DEDÉVELOPPEMENT D’UN OUTIL WEBPar Chalifour – Agence Web
![Page 2: Processus de développement d'un outil Web](https://reader034.fdocuments.fr/reader034/viewer/2022051400/54bc68f04a7959aa788b46d2/html5/thumbnails/2.jpg)
Défi nirla stratégie
1
![Page 3: Processus de développement d'un outil Web](https://reader034.fdocuments.fr/reader034/viewer/2022051400/54bc68f04a7959aa788b46d2/html5/thumbnails/3.jpg)
a_ Identifi er les besoins du clientb_ Identifi er l’utilisateur ciblec_ Identifi er les besoins de l’utilisateurd_ Considérer les contraintes
client et utilisateure_ Explorer les stratégies adaptées au contexte
(mobilité, application, site Web, responsive, etc.)
Défi nir lastratégie1
![Page 4: Processus de développement d'un outil Web](https://reader034.fdocuments.fr/reader034/viewer/2022051400/54bc68f04a7959aa788b46d2/html5/thumbnails/4.jpg)
Analyse &structure
2
![Page 5: Processus de développement d'un outil Web](https://reader034.fdocuments.fr/reader034/viewer/2022051400/54bc68f04a7959aa788b46d2/html5/thumbnails/5.jpg)
a_ Rédaction des contenusb_ Lecture et révision des contenusc_ Arborescenced_ Analyse fonctionnelle
Analyse& structure2
![Page 6: Processus de développement d'un outil Web](https://reader034.fdocuments.fr/reader034/viewer/2022051400/54bc68f04a7959aa788b46d2/html5/thumbnails/6.jpg)
Analyse & structurec_ Exemple d’une arborescence22
![Page 7: Processus de développement d'un outil Web](https://reader034.fdocuments.fr/reader034/viewer/2022051400/54bc68f04a7959aa788b46d2/html5/thumbnails/7.jpg)
Design &ergonomie
3
![Page 8: Processus de développement d'un outil Web](https://reader034.fdocuments.fr/reader034/viewer/2022051400/54bc68f04a7959aa788b46d2/html5/thumbnails/8.jpg)
a_ Maquettes schématiques (Wireframes)b_ Conception graphiquec_ Validation des choix ergonomiques
accessibilité et utilisabilité
Design &ergonomie3
![Page 9: Processus de développement d'un outil Web](https://reader034.fdocuments.fr/reader034/viewer/2022051400/54bc68f04a7959aa788b46d2/html5/thumbnails/9.jpg)
Design & ergonomiea_ Exemple d’une maquette schématique (Wireframes)3
En vedette Menu Menu >
>
logo
Site complet | Nous joindre
Slider
Du 5 au 15 juillet 2012
LMFAO featuring Redfooand the Party Rock CrewScène Bell - Vendredi 6 juillet 2012
Scène Metro
19h30
Nom de l’artisteNom de l’artistePays très long... | Style de musique très lon...Pays très long... | Style de musique très lon...19h30
Nom de l’artisteNom de l’artistePays très long... | Style de musique très lon...Pays très long... | Style de musique très lon...19h30
19h30
En vedette
Programmation
Artistes
Billetterie
Info pratique
Nouvelles
Branché sur le Festival
Nous joindre
Menu >
logo Du 5 au 15 juillet 2012
>
>
>
>
>
>
>
>
Artistes
Médias Liens
Style : Électro Hip-HopPays : États-Unis
Le party rock s’empare des Plaines! Le populaire duo américain LMFAO formé en 2006 débarque avec sa troupe. Plus d’une douzaine de personnes seront sur scène pour faire la fête au son de cette électro-pop irrévérencieuse qu’ils créent et font retentir partout sur la planète. Leurs chansons, qui parlent d’alcool, de sexe et de folie, trônent tout en haut des palmarès des radios.
Sortez vos vêtements fluos, vos perruques afro et vos lunette géantes, le party s’annonce survolté!
logo
Info
Menu Menu >
Du 5 au 15 juillet 2012
LMFAO featuring Redfooand the Party Rock Crew
Dimanche, 8 juillet 2012 à 21h30Scène BellPlaines d’Abraham
Logo
![Page 10: Processus de développement d'un outil Web](https://reader034.fdocuments.fr/reader034/viewer/2022051400/54bc68f04a7959aa788b46d2/html5/thumbnails/10.jpg)
Design & ergonomieb_ Exemple d’une maquette graphique3
![Page 11: Processus de développement d'un outil Web](https://reader034.fdocuments.fr/reader034/viewer/2022051400/54bc68f04a7959aa788b46d2/html5/thumbnails/11.jpg)
Intégration &programmation
4
![Page 12: Processus de développement d'un outil Web](https://reader034.fdocuments.fr/reader034/viewer/2022051400/54bc68f04a7959aa788b46d2/html5/thumbnails/12.jpg)
a_ Analyse des maquettes graphiquesb_ Choix de la structure
(HTML5 Boilerplate, WordPress, CakePHP, etc.)c_ Programmation des fonctionnalités d_ Découpage des visuelse_ Intégration de la maquette en format Web
Intégration &programmation4
![Page 13: Processus de développement d'un outil Web](https://reader034.fdocuments.fr/reader034/viewer/2022051400/54bc68f04a7959aa788b46d2/html5/thumbnails/13.jpg)
Intégration & programmationd_ Exemple d’un découpage de maquette4
![Page 14: Processus de développement d'un outil Web](https://reader034.fdocuments.fr/reader034/viewer/2022051400/54bc68f04a7959aa788b46d2/html5/thumbnails/14.jpg)
Assurancequalité
5
![Page 15: Processus de développement d'un outil Web](https://reader034.fdocuments.fr/reader034/viewer/2022051400/54bc68f04a7959aa788b46d2/html5/thumbnails/15.jpg)
a_ Tests interopérabilité (différents navigateurs)b_ Vérifi er le travail des coéquipiersc_ Liste de points importants (Google Analytics,
balisage SEO, vérifi cation engins de validation, etc.)
Assurancequalité5
![Page 16: Processus de développement d'un outil Web](https://reader034.fdocuments.fr/reader034/viewer/2022051400/54bc68f04a7959aa788b46d2/html5/thumbnails/16.jpg)
Mise en ligne
6
![Page 17: Processus de développement d'un outil Web](https://reader034.fdocuments.fr/reader034/viewer/2022051400/54bc68f04a7959aa788b46d2/html5/thumbnails/17.jpg)
a_ Deuxième vague d’assurance qualité(s’assurer que l’outil réagit de la même manièrequ’en version d’approbation)
b_ Évaluation de la satisfaction client
Miseen ligne6
![Page 18: Processus de développement d'un outil Web](https://reader034.fdocuments.fr/reader034/viewer/2022051400/54bc68f04a7959aa788b46d2/html5/thumbnails/18.jpg)
Promotion7
![Page 19: Processus de développement d'un outil Web](https://reader034.fdocuments.fr/reader034/viewer/2022051400/54bc68f04a7959aa788b46d2/html5/thumbnails/19.jpg)
a_ SEM [Search Engine Marketing]SEO : Référencement naturel (long terme)SEA : AdWords (court terme)
b_ Médias sociauxInteraction directe avec les internautes
c_ BlogueApporte du contenu frais pour nourrir lesmoteurs de recherche et les médias sociaux
Promotion7
![Page 20: Processus de développement d'un outil Web](https://reader034.fdocuments.fr/reader034/viewer/2022051400/54bc68f04a7959aa788b46d2/html5/thumbnails/20.jpg)
Évolution
8
![Page 21: Processus de développement d'un outil Web](https://reader034.fdocuments.fr/reader034/viewer/2022051400/54bc68f04a7959aa788b46d2/html5/thumbnails/21.jpg)
“ There’s an old Wayne Gretzky quotethat I love: I skate to where the puckis going to be, not where it has been [...]. ˮ – Steve Jobs
Évolution8
![Page 22: Processus de développement d'un outil Web](https://reader034.fdocuments.fr/reader034/viewer/2022051400/54bc68f04a7959aa788b46d2/html5/thumbnails/22.jpg)
Merci :)