Du site web à l'application web (JavaScript, AJAX…)

JavaScript est un langage qui existe depuis de nombreuses années maintenant et que l'on utilise fréquemment sur le Web en plus de HTML et CSS. C'est probablement l'un des premiers langages que vous voudrez apprendre maintenant que vous avez des connaissances en HTML et CSS.

On peut faire déjà beaucoup de choses en HTML et CSS mais, lorsqu'on veut rendre sa page plus interactive, un langage comme JavaScript devient indispensable.

Voici quelques exemples de ce à quoi peut servir JavaScript:

  • On l'utilisera le plus souvent pour modifier des propriétés CSS sans avoir à recharger la page.
    Par exemple, vous pointez sur une image et le fond de votre site change de couleur (ce n'est pas possible à faire avec un :hover car cela concerne deux balises différentes, c'est bien là une limite du CSS).

  • On peut l'utiliser aussi pour modifier le code source HTML sans avoir à recharger la page, pendant que le visiteur consulte la page.

  • Il permet aussi d'afficher des boîtes de dialogue à l'écran du visiteur…

  • … ou encore de modifier la taille de la fenêtre.

JavaScript est un langage qui se rapproche des langages de programmation tels que le C, C++, Python, Ruby…
À l'inverse, HTML et CSS sont davantage des langages de description : ils décrivent comment la page doit apparaître mais ils ne donnent pas d'ordres directs à l'ordinateur (« fais ceci, fais cela… »), contrairement à JavaScript.

Attention!! JavaScript n'a aucun rapport avec le langage Java. Seuls les noms se ressemblent.

JavaScript est régulièrement utilisé aujourd'hui pour faire de l'AJAX (Asynchronous JavaScript And XML).
Cette technique permet de modifier une partie de la page web que le visiteur consulte en échangeant des données avec le serveur. Cela donne l'impression que les pages sont plus dynamiques et plus réactives. Le visiteur n'a plus besoin de recharger systématiquement toute la page.

Les navigateurs sont de plus en plus efficaces dans leur traitement de JavaScript, ce qui fait que les pages qui utilisent JavaScript sont de plus en plus réactives.
On peut ainsi arriver aujourd'hui à créer des sites qui deviennent littéralement des applications web, l'équivalent de logiciels mais disponibles sous forme de sites web !
Un exemple célèbre : Google Docs, la suite bureautique de Google, disponible sur le Web:

tableur Google Docs
Le tableur Google Docs

Voici les 2 cours (dans l'ordre de suivi optimal) qu'on peut suivre après celui-ci:

  1. Apprenez à coder avec JavaScript

  2. Dynamisez vos sites web avec JavaScript !

Haut

Technologies liées à HTML5 (Canvas, SVG, Web Sockets…)

Le W3C ne travaille pas que sur les langages HTML et CSS. Ce sont certes les plus connus, mais le W3C cherche aussi à définir d'autres technologies qui viennent compléter HTML et CSS. Elles sont nombreuses et on les confond d'ailleurs souvent avec HTML5.

À savoir!! En fait, HTML5 est devenu un mot très utilisé qui fait référence à d'autres technologies que HTML. Quand quelqu'un vous parle de « HTML5 » aujourd'hui, il fait peut-être aussi référence à d'autres éléments qui sortent du cadre strict du HTML.

Voici une petite liste de ces nouvelles technologies introduites en parallèle de HTML5 (notez que certaines ne sont pas vraiment « nouvelles » mais elles reviennent sur le devant de la scène):

  • Canvas: permet de dessiner au sein de la page web, à l'intérieur de la balise HTML <canvas>.
    On peut dessiner des formes (triangles, cercles…) mais aussi ajouter des images, les manipuler, appliquer des filtres graphiques… Au final, cela nous permet de réaliser aujourd'hui de véritables jeux et des applications graphiques directement dans des pages web !
    En savoir plus sur Canvas.

  • SVG: permet de créer des dessins vectoriels au sein des pages web. À la différence de Canvas, ces dessins peuvent être agrandis à l'infini (c'est le principe du vectoriel). Le logiciel Inkscape est connu pour permettre de dessiner des SVG.
    En savoir plus sur SVG.

  • Drag & Drop: permet de faire « glisser-déposer » des objets dans la page web, de la même façon qu'on peut faire glisser-déposer des fichiers sur son bureau.
    Gmail l'utilise pour permettre d'ajouter facilement des pièces jointes à un e-mail.

  • File API: permet d'accéder aux fichiers stockés sur la machine du visiteur (avec son autorisation). On l'utilisera notamment en combinaison avec le Drag & Drop.

  • Géolocalisation: pour localiser le visiteur et lui proposer des services liés au lieu où il se trouve (ex. : les horaires des salles de cinéma proches).
    La localisation n'est pas toujours très précise, mais cela peut permettre de repérer un visiteur à quelques kilomètres près (avec son accord).

  • Web Storage: permet de stocker un grand nombre d'informations sur la machine du visiteur. C'est une alternative plus puissante aux traditionnels cookies.
    Les informations sont hiérarchisées, comme dans une base de données.

  • Appcache: permet de demander au navigateur de mettre en cache certains fichiers, qu'il ne cherchera alors plus à télécharger systématiquement. Très utile pour créer des applications web qui peuvent fonctionner même en mode « hors ligne » (déconnecté).

  • Web Sockets: permet des échanges plus rapides, en temps réel, entre le navigateur du visiteur et le serveur qui gère le site web (c'est une sorte d'AJAX amélioré). C'est un peu l'avenir des applications web, qui pourront devenir aussi réactives que les vrais programmes.

  • WebGL: permet d'introduire de la 3D dans les pages web, en utilisant le standard de la 3D OpenGL (figure suivante). Les scènes 3D sont directement gérées par la carte graphique.

appli web 3D
Une application web 3D utilisant WebGL

À savoir!! La plupart de ces technologies s'utilisent avec JavaScript. Il s'agit donc de nouvelles fonctionnalités que l'on peut utiliser en JavaScript.

Haut

Les sites web dynamiques (PHP, JEE, ASP .NET…)

Les langages dont nous allons parler ici sont eux aussi des langages de programmation. Comme JavaScript sauf que: JavaScript s'exécute sur la machine de vos visiteurs, tandis que les langages que nous allons voir s'exécutent sur le « serveur » qui contient votre site web.

Les différences entre le fait que le programme tourne sur la machine du visiteur ou sur le serveur sont importantes.
Tout d'abord, en termes de puissance, un serveur sera bien souvent plus rapide que la machine de vos visiteurs, ce qui permet d'effectuer des calculs plus complexes.
Vous avez aussi davantage de contrôle côté serveur qu'en JavaScript… Mais le JavaScript reste irremplaçable car il y a certaines actions que vous ne pouvez faire que du côté « visiteur ».

Les langages serveur permettent de générer la page web lorsque le visiteur arrive sur votre site (figure suivante). Chaque visiteur peut donc obtenir une page web personnalisée suivant ses besoins.

échange données serveur
Échange de données avec un serveur

Les langages ne servent donc pas aux mêmes choses, mais ils se complètent.
Si vous combinez HTML + CSS + JavaScript + PHP, par exemple, vous pouvez faire de l'AJAX (échanges de données entre la page et le serveur), vous pouvez effectuer des calculs, stocker des informations dans des bases de données… bref, faire de vrais sites web dynamiques !

Les langages « côté serveur » sont nombreux.
Citons-en quelques-uns:

  • PHP: l'un des plus connus. Facile à utiliser et puissant, il est utilisé notamment par Facebook… et OpenClassrooms. On peut d'ailleurs suivre un cours sur PHP.

  • Java EE (Java): très utilisé dans le monde professionnel, il s'agit d'une extension du langage Java qui permet de réaliser des sites web dynamiques, puissants et robustes. Au début, il est un peu plus complexe à prendre en main que PHP. On peut suivre un cours vidéo sur Java EE et il existe un cours texte sur Java EE aussi.

  • ASP .NET (C#): assez semblable à JEE, c'est le langage de Microsoft. On l'utilise en combinaison avec d'autres technologies Microsoft (Windows Server…).
    Il utilise le puissant framework .NET, véritable couteau suisse des développeurs, qui offre de nombreuses fonctionnalités.

  • Django (Python): une extension du langage Python qui permet de réaliser rapidement et facilement des sites web dynamiques. Il est connu pour générer des interfaces d'administration prêtes à l'emploi. Apprenez d'abord Python, puis rendez-vous sur le cours Django sur OpenClassrooms!

  • Ruby on Rails (Ruby) : une extension du langage Ruby, assez similaire à Django, qui permet de réaliser des sites web dynamiques facilement et avec une grande souplesse. Apprenez d'abord Ruby, puis vous découvrirez Ruby on Rails.

À savoir!! Connaître l'un de ces langages est indispensable si vous voulez traiter le résultat des formulaires HTML !
Souvenez-vous de la balise <form>: je vous avais expliqué comment créer des formulaires, mais pas comment récupérer les informations saisies par vos visiteurs. Il vous faut obligatoirement un langage serveur, comme PHP, pour récupérer et traiter ces données !

Au final, ces langages vous permettent de réaliser vos rêves les plus fous sur votre site web:

  • forums;
  • newsletter;
  • compteur de visiteurs;
  • système de news automatisé;
  • gestion de membres;
  • jeux web (jeux de stratégie, élevage d'animaux virtuels…);
  • etc...

Attention!! Il est indispensable de connaître les langages HTML et CSS avant d'apprendre un langage serveur comme PHP !

Bonne découverte !

Haut