Culture web générale
Notions transverses, hors HTML / CSS / SQL / PHP.
Sommaire
1. Un peu d'histoire du Web
| Date | Événement |
|---|---|
| 1970 | ARPANET — échange de données entre universités américaines |
| 1980 | MilNet (vocation militaire) & NSFnet |
| — | Tim Berners-Lee (Sir Timothy John Berners-Lee) — principal inventeur du World Wide Web |
| 1996 | Apparition du CSS |
| 1997 | HTML 3.2 puis 4.0 ; le HtmlWG est remplacé par le XHtmlWG |
| 1998 | CSS 2 |
| 2000 | Le XHTML est recommandé par le W3C |
| 2001 | XHTML 1.1 recommandé par le W3C |
2. Site web : statique ou dynamique ?
Un site web est un ensemble de pages organisées en structure hiérarchique, disponible sur un serveur.
| Pages statiques | Pages dynamiques | |
|---|---|---|
| Contenu | Écrit directement en HTML | Généré via un langage de script (ex. PHP) |
| Mise en forme | Avec des feuilles CSS | Idem, + logique métier côté serveur |
3. Notion de Framework (rappel général)
Un framework (cadre applicatif / cadriciel) est un agrégat organisé et cohérent de composants logiciels, dont l'objectif est de structurer le développement. Un composant logiciel est un élément réutilisable entrant dans la composition d'un logiciel.
Quelques dates clés des frameworks web :
- 2003 — Django (Python)
- 2004 — Ruby on Rails (Ruby)
- 2005 — Symfony (PHP)
Laravel, autre framework PHP, est traité en détail dans la fiche PHP.
4. Environnement client / serveur
L'environnement client/serveur est un mode de communication inter-logiciel à travers un réseau : le logiciel client envoie des requêtes, le logiciel serveur y répond.
Les grandes architectures
| Architecture | Principe |
|---|---|
| 2 niveaux (2-tier) | Le client demande une ressource directement au serveur |
| Pair à pair (P2P) | Chaque programme peut jouer tour à tour le rôle de client et de serveur |
| 3 niveaux (3-tier) | Un niveau intermédiaire s'ajoute entre client et serveur (ex. serveur d'application entre le navigateur et la BdD) |
| N niveaux (N-tier) | Ajoute encore des niveaux supplémentaires à l'architecture 3-tier, pour plus de flexibilité |
Exercice classique du cours : donner un exemple concret d'application pour chacune de ces 4 architectures.
5. Environnement de développement
Ce qu'il faut sur son poste
- Un serveur Web (ex. Apache).
- Un serveur de base de données (MySQL / MariaDB).
- Souvent regroupés dans une stack tout-en-un type Laragon, WAMP, XAMPP…
Les outils
- Éditeur de texte avec coloration syntaxique : outil principal du développeur, son choix et sa personnalisation comptent pour bien travailler.
- Navigateurs : toujours tester ses réalisations sur plusieurs navigateurs (interprétation des normes parfois différente). Utiliser des sites de vérification de compatibilité.
- Autres outils : maquettage (Visio, Balsamiq…), traitement d'image (GIMP, Illustrator…).
Organisation des fichiers et du code
- Un dossier par type de fichier :
html/,css/,php/,images/… - Règles de nommage simples et cohérentes pour fichiers et dossiers.
- Indentation : aligner les marqueurs de début/fin de traitement (balises, accolades) pour la lisibilité.
- Commentaires précis et adaptés + cartouche complet en début de fichier.
<!-- Commentaire HTML -->/* Commentaire CSS *//* Commentaire PHP */
// ou commentaire PHP sur une ligne6. Bon à savoir — structure d'une URL
https://example.com:80/blog?search=test&sort_by=created_at#header
└─┬──┘ └────┬─────┘└┬┘└─┬─┘└──────────┬───────────────┘└──┬───┘
protocole domaine port path query parameters fragment/ancre