Cours 1 : un aperçu

Le contexte

Jusqu’à présent, le cours traitait les langages suivants, dans l’ordre indiqué :

• html
• css
• php
• mysql

Dans une version antérieure encore, il abordait également

• javascript

Je décrirai plus loin très sommairement à quoi servent chacun de ces langages.

Deux problèmes :

1. ça fait beaucoup, pour des étudiants qui n’ont qu’un semestre de programmation derrière eux.
2. un semestre, ça ne peut être qu’une initiation, ce qui est un peu frustrant pour quelqu’un qui veut se lancer dans la réalisation de sites web à la fois jolis et robustes.

Un nouveau parti-pris

La web est aujourd’hui à une période où de nombreux sites web sont créés par le biais d’outils génériques qui ne nécessitent qu’une connaissance superficielle du html, quelques notions de css (et encore), et souvent même pas de php ni mysql.  Il est dommage de faire l’impasse sur ces outils.

Nous verrons donc dans le semestre quelques uns d’entre eux, par exemple

• wordpress pour les blogs
• phpBB pour les forums
• wikimedia pour les wikis
• joomla ou spip pour la publication à plusieurs (très utilisé par les associations, où chaque membre peut poster un article)
• etc.

WordPress sera le fil directeur.  Outil de publication de blog sous licence libre, il bénéficie de plusieurs avantages :

• c’est une référence en la matière, il est très utilisé, les blogs du journal Le Monde par exemple, tournent sous wordpress
• une communauté d’utilisateurs très active (pour les conseils, dépannage etc.)
• comme tous les logiciels libres, il est extensible
• une communauté de développeurs (programmeurs) très active également, qui fournit donc de nombreuses extensions, et constitue également un source d’entraide technique.

Au fil du semestre, à mesure qu’on avancera dans l’apprentissage des langages déjà évoqués, on tentera de faire le parallèle avec la personnalisation d’un blog WordPress, pour comparer deux façons de faire qui peuvent aussi se compléter : avec une interface dédiée ou par le biais de l’écriture de code.  Nous utiliserons abondamment l’opération qui consiste à étudier avec soin le code source des pages générées.  Cet exercice, un peu rébarbatif au début, vous sera de plus en plus aisé à mesure que vous avancerez dans la manipulation des langages.

Votre part du jeu

Vous ne pourrez pas expérimenter en détail ces différents outils en TP.  Une partie de votre travail personnel pour ce cours consistera à installer pour votre compte au moins l’un d’entre eux, et de préférence plusieurs.  Ceci suppose que vous trouviez un hébergement de site web (par le biais de votre fournisseur d’accès internet, ou d’un hébergeur gratuit ou payant).  Je vous donnerai dans le prochain cours quelques pistes pour cette première opération.

Notez bien que si vous n’avez pas d’ordinateur chez vous, rien ne vous empêche d’utiliser les machines en libre service pour accéder via internet au service d’hébergement que vous aurez choisi.

Dans une version minimale, vous devrez au moins vous créer un blog wordpress gratuit sur une des nombreuses plateformes existantes (je vous prépare une liste comme pour les hébergeurs), par exemple wordpress.com.

Un aperçu des cinq langages cités

En prenant comme exemple le site web de l’université, voyons quel est le rôle de chacun de ces langages complémentaires.

• Le contenu (texte, images), c’est du html.  On peut d’ailleurs le voir en affichant le code source de la page (même s’il est difficile à lire).
• Le « style », c’est à dire les couleurs et formes des caractères, les bordures, le positionnement des blocs (3), des menus (1, 2), c’est du css.  L’un des « S » de CSS, c’est « Style »
• ce qui « bouge », comme les menus qui changent de couleur (4) ou qui se déplient (5) quand on passe la souris dessus, c’est javascript.  En l’occurrence, le menu 5, c’est en fait un bloc comme les autres (comme 1 par exemple) mais qui est rendu invisible par une simple propriété de style.  Le seul effet de javascript, enclenché au passage de la souris, est de changer cette propriété pour rendre le bloc visible.

Reste php, dont l’action est un peu plus délicate à décrire.  (Quant à mysql, on n’en parlera pas pour le moment).

html / PHP et le modèle client / serveur

Le principe du modèle client / serveur, très courant dans la programmation d’applications en réseau, est le suivant.

Un client, assis à la table d’un café, demande une bière au serveur.  Le serveur utilise un dispositif qui lui permet de prendre un peu de bière dans un fût pour la mettre dans un verre, qu’il va donner au client.  Le client ne peut pas se servir tout seul, il n’a pas accès au fût, il n’en a d’ailleurs pas besoin puisqu’il a un moyen (le serveur) d’obtenir ce qu’il veut (le verre de bière).

Le client, c’est votre navigateur, le serveur c’est le site web que vous voulez consulter, le verre de bière, c’est le fichier html que reçoit votre navigateur.

Pour le fût, il y a deux possibilités : ou bien c’est un fichier html qu’on vous sert tel quel (il y a des verres de bière déjà tout prêts derrière le bar), ou bien le fichier html est produit au moyen d’un programme en php.

Pourquoi vouloir faire produire du html par un programme (surtout quand on voit la syntaxe du langage php) ?

Parce que certaines opérations de formatage html peuvent être automatisées.  Sur notre exemple du site de l’université, la sélection de certains menus aura pour effet de changer la partie centrale de la page tout en gardant les menus à leur place.  Ceci est faisable très facilement avec php : le code html de la partie qui est susceptible de changer sera produit par php lorsqu’on choisira un menu.  Mais dans ce cas, contrairement à ce qui se passe avec javascript, la page sera rechargée, même si ça ne se voit pas toujours.