DÉVELOPPEMENT WEB (PROGRAMMATION Introduction au Développement
ET INTERFACE UTILISATEUR) Web
ANNÉE ACADÉMIQUE 2024/2025 1
PLAN
•Qu'est-ce que le développement web ?
• Historique et évolution du web
• Les différents types d'applications web (statiques, dynamiques, web apps, etc.)
• Les acteurs du développement web
•Le rôle du développeur web dans la communication digitale
• Intégration dans une équipe
• Les différentes phases d'un projet web
•Les outils de développement
• Éditeurs de code, navigateurs, consoles de développement
• Gestion de versions (Git)
ANNÉE ACADÉMIQUE 2024/2025 2
QU'EST-CE QUE LE DÉVELOPPEMENT WEB ?
DÉFINITIONS
C’est la discipline qui consiste à créer et à maintenir des sites web et des
applications web.
Il s'agit de concevoir, de coder et de déployer des interfaces utilisateur accessibles
via un navigateur internet.
En d'autres termes, c'est l'art de donner vie à des idées sur le web.
ANNÉE ACADÉMIQUE 2024/2025 3
QU'EST-CE QUE LE DÉVELOPPEMENT WEB ?
SITES WEB VS APPLICATIONS WEB
Sites web
Objectif principal: Fournir de l'information et des services de manière relativement simple.
Fonctionnalités: Souvent limitées à la présentation de contenu, à la navigation entre les pages et à
l'utilisation de formulaires.
Expérience utilisateur: Généralement moins personnalisée et interactive que celle d'une application web.
Exemples: Un blog, un site de e-commerce, un portfolio.
Applications web
Objectif principal: Offrir une expérience utilisateur riche et interactive, comparable à celle d'une
application native (iOS, Android).
Fonctionnalités: Plus complexes et variées, incluant souvent des fonctionnalités avancées comme le stockage
de données local, la synchronisation entre différents appareils, les notifications push, etc.
Expérience utilisateur: Très personnalisée et immersive, avec des interactions en temps réel.
Exemples: Gmail, Facebook, Trello, les plateformes de streaming vidéo.
ANNÉE ACADÉMIQUE 2024/2025 4
QU'EST-CE QUE LE DÉVELOPPEMENT WEB ?
LES DIFFÉRENTS TYPES D'APPLICATIONS WEB
•Les sites web statiques Ce sont les sites web les plus simples, composés de pages HTML, CSS
et éventuellement JavaScript. Le contenu est fixe et ne change pas en fonction des actions de
l'utilisateur.
•Les sites web dynamiques Ces sites utilisent des langages de programmation côté serveur
(PHP, Python, Ruby, etc.) pour générer le contenu de chaque page en fonction de requêtes. Ils
sont plus interactifs et peuvent stocker des données en base de données.
•Les applications web (web apps) Les web apps sont des applications qui fonctionnent
directement dans le navigateur, offrant une expérience utilisateur similaire à celle d'une
application native. Elles utilisent des technologies comme HTML5, CSS3 et JavaScript pour
créer des interfaces riches et interactives.
•Les API (Interfaces de Programmation d'Applications) Les API permettent à différentes
applications de communiquer entre elles. Elles sont utilisées pour récupérer des données d'un
serveur et les afficher dans une application web.
ANNÉE ACADÉMIQUE 2024/2025 5
QU'EST-CE QUE LE DÉVELOPPEMENT WEB ?
HISTORIQUE ET ÉVOLUTION DU WEB
Le web a connu une évolution rapide depuis sa création dans les années 1990.
Les débuts : le web statique, Les premiers sites web étaient principalement statiques, composés de pages
HTML simples. Le contenu était fixe et ne changeait qu'en modifiant manuellement le code.
L'arrivée du web dynamique, Avec l'introduction de langages comme PHP, les sites web sont devenus
dynamiques. Les pages pouvaient être générées à la volée en fonction des actions de l'utilisateur, rendant les
sites plus interactifs.
Le web 2.0 : l'ère des utilisateurs, Le web 2.0 a marqué un tournant avec l'émergence des réseaux sociaux,
des blogs et des services web collaboratifs. Les utilisateurs sont devenus des producteurs de contenu, et les
interfaces sont devenues plus conviviales.
Le web mobile : l'accès à tout moment, partout L'essor des smartphones a rendu le web accessible à tout
moment et partout. Les sites web ont dû s'adapter aux petits écrans et aux différentes résolutions.
Le web sémantique : un web plus intelligent, Le web sémantique vise à rendre le contenu du web plus
compréhensible par les machines, facilitant ainsi la recherche d'information et l'automatisation de certaines
tâches.
ANNÉE ACADÉMIQUE 2024/2025 6
QU'EST-CE QUE LE DÉVELOPPEMENT WEB ?
LES ACTEURS DU DÉVELOPPEMENT WEB
•Le développeur front-end: Il est responsable de la partie visible du site web, c'est-à-dire tout
ce que l'utilisateur voit et avec quoi il interagit. Il utilise des langages comme HTML, CSS et
JavaScript.
•Le développeur back-end: Il s'occupe de la partie invisible du site web, c'est-à-dire tout ce
qui se passe côté serveur. Il utilise des langages comme PHP, Python, Ruby, [Link], et des
bases de données pour stocker les données.
•Le full-stack developer: Il maîtrise à la fois le front-end et le back-end, ce qui lui permet de
travailler sur tous les aspects d'un projet web.
•Le UX/UI designer: Il est chargé de concevoir l'expérience utilisateur (UX) et l'interface
utilisateur (UI) d'un site web. Il s'assure que le site est facile à utiliser et visuellement attrayant.
•Le chef de projet: Il coordonne l'ensemble du projet web, de la conception à la mise en ligne.
Le testeur: Assure la qualité du projet.
ANNÉE ACADÉMIQUE 2024/2025 7
LE RÔLE DU DÉVELOPPEUR WEB DANS LA
COMMUNICATION DIGITALE
•Traduire la vision créative en réalité numérique: En transformant les maquettes et
les wireframes en code fonctionnel.
•Assurer la performance et l'optimisation: En s'assurant que le site web se charge
rapidement et fonctionne de manière fluide sur tous les appareils.
•Garantir l'accessibilité: En rendant le site web utilisable par le plus grand nombre, y
compris les personnes handicapées.
•Mettre en œuvre les stratégies de référencement: En optimisant le code pour
améliorer le positionnement du site dans les moteurs de recherche.
•Maintenir et faire évoluer le site web: En apportant les mises à jour nécessaires et
en corrigeant les éventuels bugs.
ANNÉE ACADÉMIQUE 2024/2025 8
LES DIFFÉRENTES PHASES D'UN PROJET WEB
1. Phase d'initiation
•Définition des objectifs: Quels sont les buts du projet ? Qui sont les utilisateurs cibles
?
•Étude de faisabilité: Évaluation technique, économique et temporelle du projet.
•Cahier des charges fonctionnel: Rédaction d'un document précisant les
fonctionnalités attendues.
ANNÉE ACADÉMIQUE 2024/2025 9
LES DIFFÉRENTES PHASES D'UN PROJET WEB
2. Phase de conception
•Conception UX (User Experience): Définition de l'expérience utilisateur, création de
wireframes et de maquettes.
•Conception UI (User Interface): Création de l'interface graphique, choix des
couleurs, des typographies, etc.
•Architecture technique: Définition de l'architecture du site (choix des technologies, de
la base de données, etc.).
ANNÉE ACADÉMIQUE 2024/2025 10
LES DIFFÉRENTES PHASES D'UN PROJET WEB
3. Phase de développement
•Développement front-end: Création de l'interface utilisateur avec HTML, CSS et
JavaScript.
•Développement back-end: Développement de la logique métier et des
fonctionnalités du site.
•Intégration: Assemblage des différentes parties du site.
ANNÉE ACADÉMIQUE 2024/2025 11
LES DIFFÉRENTES PHASES D'UN PROJET WEB
4. Phase de tests
Tests unitaires: Vérification du fonctionnement de chaque élément
du site.
Tests d'intégration: Vérification de l'interaction entre les
différentes parties du site.
Tests fonctionnels: Vérification que le site répond bien aux
exigences du cahier des charges.
Tests d'acceptation: Validation du site par le client.
ANNÉE ACADÉMIQUE 2024/2025 12
LES DIFFÉRENTES PHASES D'UN PROJET WEB
5. Phase de déploiement
Mise en production: Déploiement du site sur un serveur.
Configuration: Configuration des serveurs, des bases de données,
etc.
6. Phase de maintenance
Corrections de bugs: Identification et correction des anomalies.
Mises à jour: Mise à jour du contenu, des technologies, etc.
Évolution: Ajout de nouvelles fonctionnalités.
ANNÉE ACADÉMIQUE 2024/2025 13
LES DIFFÉRENTES PHASES D'UN PROJET WEB
5. Phase de déploiement
Mise en production: Déploiement du site sur un serveur.
Configuration: Configuration des serveurs, des bases de données,
etc.
6. Phase de maintenance
Corrections de bugs: Identification et correction des anomalies.
Mises à jour: Mise à jour du contenu, des technologies, etc.
Évolution: Ajout de nouvelles fonctionnalités.
ANNÉE ACADÉMIQUE 2024/2025 14
MÉTHODOLOGIES DE DÉVELOPPEMENT
Il existe différentes méthodologies pour gérer un projet web, les plus courantes étant :
Méthode en cascade: Les phases se succèdent de manière linéaire.
•Méthodes agiles: Le projet est découpé en itérations courtes, permettant une plus
grande flexibilité et une adaptation aux changements.
ANNÉE ACADÉMIQUE 2024/2025 15
LES OUTILS DE DÉVELOPPEMENT
Pour mener à bien leurs missions, les développeurs web utilisent un ensemble d'outils
indispensables :
•Les éditeurs de code: Ce sont des logiciels qui permettent d'écrire et de modifier du
code de manière efficace. Parmi les plus populaires, on retrouve Visual Studio Code,
Sublime Text, Atom et Brackets. Ces outils offrent des fonctionnalités avancées comme
la coloration syntaxique, la complétion automatique du code et la gestion des
versions.
•Les navigateurs web: Bien qu'ils soient principalement utilisés pour naviguer sur
internet, les navigateurs web (Chrome, Firefox, Edge, Safari) intègrent des outils de
développement très puissants. Ces outils permettent d'inspecter le code source des
pages web, de déboguer le JavaScript et d'analyser les performances.
ANNÉE ACADÉMIQUE 2024/2025 16
CONCLUSION
le développement web est un domaine en constante évolution qui nécessite une
variété de compétences techniques et créatives.
En comprenant les fondamentaux du web et en maîtrisant les différents langages et
outils, vous pourrez créer des sites web et des applications web performants et
innovants
ANNÉE ACADÉMIQUE 2024/2025 17
