Aller au menu - Aller au contenu

Icône Aller plus loin

Par Avatar Mathieu Nebra (M@teo21)
Mise à jour : 01/11/2011
Difficulté : Facile Facile Creative Commons BY-NC-SA
251 359 visites depuis 7 jours, dont 2 268 sur ce chapitre classé 1/779
Alors que ce tutoriel touche à sa fin, la tentation est grande de penser que l'on a tout vu.

Tout vu ? Vous n'avez quand même pas cru ça ? Allons bon, il vous reste des centaines de choses à découvrir, que ce soit sur HTML, CSS, ou les technologies qui y sont liées (PHP, Javascript...).

Ce chapitre a pour but de vous donner quelques directions pour compléter votre apprentissage. Alors ne soyez pas tristes, car vous n'avez pas fini de faire des découvertes ! ;)
Retour en haut
Sommaire du chapitre :
Icône du chapitre
Chapitre précédent Sommaire Chapitre suivant
Retour en haut

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. ;)

A quoi Javascript peut-il bien servir ? On ne peut pas tout faire avec 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 (c'est pas possible à faire avec un :hover car ça concerne 2 balises différentes, c'est bien là une limite du CSS).
  • On peut l'utiliser aussi pour modifier la 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... A l'inverse, HTML et CSS sont plus 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.

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 toute la page systématiquement.

Les navigateurs sont de plus en plus efficaces dans leur traitement de Javascript aujourd'hui, 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 des programmes disponibles sous forme de sites web !
Un exemple célèbre : Google Docs, la suite bureautique de Google disponible sur le Web.

Google Docs
Google Docs (ici le tableur) fait un usage intensif de Javascript


Pour en savoir plus sur Javascript, lisez le tutoriel du Site du Zéro !

Lire le tutoriel Javascript
Retour en 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.

En fait, HTML5 est devenu un mot très utilisé qui fait référence à d'autres technos que HTML. Quand quelqu'un vous parle de "HTML5" aujourd'hui, il fait peut-être aussi référence à d'autres éléments que simplement le 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 ! Vous pouvez par exemple consulter ce tutoriel sur Canvas.
  • SVG : permet de créer des dessins vectoriels au sein des pages web. A 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. Lire le tutoriel sur SVG sur le Site du Zéro.
  • Drag & Drop : permet le 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 email.
  • 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 que les 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 pour les 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. Les scènes 3D sont directement gérées par la carte graphique.


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


Une application web 3D utilisant WebGL
Démo de WebGL dans le navigateur web


Comme vous le voyez, vous avez de nouveaux mondes à découvrir ! Dès que vous connaîtrez suffisamment Javascript, vous pourrez aller encore plus loin dans la gestion de votre site web... que vous pourrez même transformer en véritable application !
Retour en 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 ? Oui, mais avec une différence importante : 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.

Quelle différence ça fait que le programme tourne sur la machine du visiteur ou sur le serveur ?


Les différences sont importantes. Tout d'abord, en terme 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 plus 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. Chaque visiteur peut donc obtenir une page web personnalisée à ses besoins !

Echange 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 le Site du Zéro. J'ai d'ailleurs rédigé un tutoriel sur PHP sur le Site du Zéro ! ;)
  • JEE (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. Il est un peu plus complexe à prendre en main au début que PHP.
  • 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.
  • Ruby on Rails (Ruby) : une extension du langage Ruby, assez similaire à Django, qui permet de réaliser des sites web dynamiques facilement avec une grande souplesse.

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é
  • Système de membres
  • Jeux web (jeux de stratégie, élevage d'animaux virtuels...)
  • etc.


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


Bonne découverte ! :)

Lire le tutoriel PHP
Retour en haut
Moussaillons, vous avez de nouvelles contrées fascinantes à explorer et de nouveaux langages à dompter ! :pirate:
Bon vent !
Chapitre précédent Sommaire Chapitre suivant
Retour en haut

Partager

Retour en haut

Lire aussi

Icône
TP : création d'un site pas à pas
Icône
Apprenez à créer votre site web avec HTML5 et CSS3
Icône
Comment fait-on pour créer des sites web ?
Icône
Des techniques modernes pour l'agencement en colonnes
Retour en haut
6 commentaires pour "Aller plus loin"
Note moyenne : 3.85 / 4 (3048 votes)
Pseudo Commentaire
Hors ligne UNTOUCHABLE # Posté le 25/11/2011 à 18:44:57

Avis : Très bon

Je viens de finir de parcourir ce tutoriel, et sincèrement, c'est le plus complet que j'ai vu sur le net français !

J'achèterais très certainement le livre (HTML5/CSS3), car la lecture sur ordi me fatigue un peu...

Bravo et merci ;)
Vous aimez les sciences ?
Ma bibliothèque :Apprenez à programmer en C, PHP&MySQL, Programmez avec le langage C++
 
Hors ligne shivan70 # Posté le 04/12/2011 à 11:24:19

Avis : Très bon

super tuto, comme tous les autres d'ailleurs.
Hors ligne virus119 # Posté le 03/01/2012 à 18:40:44
Avatar

Avis : Très bon

super tuto,bravo
Le programmeur est :lol: un ordinateur or un compilateur
il savait le problème :lol: sans aucun logiciel or langage universel
c/c++/Delhi/flash/java :D sont des jouer qui ont fait plaisir
 
Hors ligne DonCarlito # Posté le 11/01/2012 à 03:35:47
Avatar

Ville : Mexico
Pays : Mexique

 Je me permet de signaler que le terme d'application web a mal été assimilé: un site web est une application web par définition. Il faudrait peut être redéfinir le titre du chapitre. Bonne continuation!

La vie est une fête, alors fêtons la vie!

 
Hors ligne adlene_tir # Posté le 23/02/2012 à 22:05:49

merci beaucoup Mathieu Nebra pour ce tuto

Voir tous les commentaires