• 15 heures
  • Moyenne

Ce cours est visible gratuitement en ligne.

course.header.alt.is_video

course.header.alt.is_certifying

J'ai tout compris !

Mis à jour le 12/12/2019

Qu'est-ce qu'une application web ?

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

Qu’est-ce qu’un site web ?

Un site web est un logiciel hébergé sur un serveur et accessible depuis un navigateur web.

Les navigateurs web sont très nombreux et parmi les plus utilisés, on peut nommer :

Démonstration de l'accès au site OpenClassrooms à l'aide du logiciel Mozilla Firefox, qui est un navigateur gratuit et open source
Accès à OpenClassrooms avec le logiciel Mozilla Firefox

Leur principale spécificité est d’être capables d’interpréter la réponse d’un serveur, de sorte qu’elle soit compréhensible par nos visiteurs.

Ne vous y trompez pas ! Ce que nous voyons ici est un mélange de HTML, de CSS et de JavaScript que le navigateur transforme en un affichage agréable à l’œil de l’utilisateur, et en interface interactive à l’aide de la souris et du clavier.

D’ailleurs, en effectuant un clic droit sur une page web, le navigateur vous proposera l’option "Inspecter/Accéder à la source". Comme nous pouvons le voir dans la capture d’écran, le serveur a envoyé une réponse sous forme de texte, automatiquement interprétée par le navigateur :

Il est possible d'accéder au code source d'une page web facilement sur chaque navigateur web. Très souvent, cette option est disponible au clic droit.
Le code source réel du site précédent : du code, du vrai !

Qu'est-ce qu'un serveur web ?

Le serveur est le logiciel qui a la responsabilité de retourner ce code source au navigateur en fonction de la requête de celui-ci :

  • si vous mettez dans l’invite de recherche de votre navigateur "https://www.google.com", vous accéderez au moteur de recherche Google ;

  • si vous mettez dans l’invite de recherche de votre navigateur "https://openclassrooms.com/fr", vous accéderez au site d’OpenClassrooms dans sa version française.

Les serveurs web sont moins nombreux que les navigateurs web, voici les plus connus :

Pendant très longtemps, le logiciel Apache était le logiciel le plus utilisé, mais depuis peu, il a été rattrapé par Nginx.

Cela dit, la plupart des logiciels d’installation permettent d'avoir en 1 clic un environnement web "PHP" embarquant Apache comme WAMP, XAMP ou encore MAMP ! 

Quand un navigateur effectue une requête auprès d’un serveur web, on dit qu’il est client de ce service (ou client du serveur).

Quand on accède à un site web, notre navigateur est-il client du serveur web correspondant ?

Tout à fait ! Car un serveur est tout à fait capable de "gérer" plusieurs sites web. D’ailleurs, on appelle aussi "serveur" la machine physique responsable de cela.

Un site, mais de multiples plateformes !

Il existe de nombreux navigateurs comme Google Chrome, Mozilla Firefox, Microsoft Edge... Nous vivons une époque idéale où la plupart de ces navigateurs "desktop" se comportent à peu près de la même façon.

La difficulté du développement de sites web aujourd’hui, c’est la multiplication des plateformes capables d’afficher un site web !

Nous consultons internet sur :

  • nos téléphones portables ;

  • nos tablettes ;

  • nos assistants vocaux ;

  • des bornes connectées ;

  • et même dans nos voitures ou réfrigérateurs !

Si la réalisation des différents types d’interfaces n’est pas le sujet de ce cours, le serveur aura souvent la responsabilité de retourner une réponse en fonction de la plateforme qui fait la demande.

Comment faire cela ?

Nous allons nous baser sur les informations envoyées par la requête du client qui contient la carte d’identité de chaque plateforme : c’est ce que nous appelons l’agent utilisateur.

L’agent utilisateur contient des informations sur la plateforme et le navigateur utilisé :

  • le système d’exploitation (Windows, Mac OS X, GNU/Linux) ;

  • le nom du navigateur et sa version ;

  • le moteur de rendu du navigateur.

Voici par exemple mon agent utilisateur :

Mozilla/5.0 (Windows NT 10.0 ; Win64 ; x64)
AppleWebKit/537.36 (KHTML, like Gecko)
Chrome/75.0.3770.100 Safari/537.36

Je suis sur Windows 10, et j’utilise Chrome en version 75 qui utilise le moteur de rendu WebKit !

Évidemment, on ne voudra pas forcément envoyer le même type d’information pour une requête faite à l’aide d’un assistant vocal que sur un navigateur sur ordinateur.

La détection de l’agent utilisateur vous permet de développer une application adaptée à l’utilisation sur plusieurs plateformes.

Les applications web

Parmi les nouvelles plateformes qui sont apparues, une se distingue de toutes les autres : les applications web.

Ces sites web se comportent comme de véritables applications pour ordinateur ou téléphone.

Par exemple, vous seriez surpris d’apprendre que le client Slack pour ordinateur est en fait un site web !

L'application pour ordinateur Slack est un site web
Le client pour ordinateur "Slack"

Il existe de nombreuses technologies capables de "transformer" un site web en application pour ordinateur.

La plus connue pour le développement d’applications pour ordinateur est probablement electronjs de GitHub.

Développez des applications desktop multi-plateformes avec JavaScript, HTML et CSS avec Electron
Electron, pour développer des applications pour ordinateur

C’est un framework développé en JavaScript qui embarque un mini navigateur qui sera utilisé pour faire tourner le code HTML, CSS et JavaScript en charge de l’affichage des pages.

Pour le développement d’applications mobiles pour iPhone et Android, plusieurs solutions sont viables aujourd’hui :

  • Titanium, le leader historique ;

  • Ionic, pour les développeurs AngularJS ;

  • et enfin, React Native pour les développeurs ReactJS ;

En qualité de développeur ou développeuse PHP, votre travail consistera alors à développer des API REST qui seront consommées par le client Electron JavaScript, qui sera en charge de l’affichage de l’interface.

En résumé

Faire des sites web, c’est concevoir des logiciels capables de comprendre la requête d’un navigateur et de retourner une réponse valide.

Bien que cela concerne plutôt les intégrateurs et développeurs d’interfaces riches, un site web ne réagira pas de la même façon selon l’appareil utilisé. Il existe de très nombreuses résolutions d’écran et de très nombreux navigateurs web : parfois, il faudra apporter une réponse au niveau du serveur en fonction d’un navigateur particulier à l’aide de l’agent utilisateur.

Enfin, de nombreux outils permettent maintenant de développer des applications mobiles ou "desktop" composées d’un backend développé avec un langage de programmation serveur comme PHP, et une interface riche, cliente de cette application souvent développée avec le langage de programmation JavaScript.

Dans le prochain chapitre, nous allons voir comment récupérer la requête d’un navigateur et comment construire une réponse "texte" valide. :magicien:

Exemple de certificat de réussite
Exemple de certificat de réussite