HTML5 et JQuery pour les nuls : Introduction

« Le principe de l'évolution est beaucoup plus rapide en informatique que chez le bipède. » de Friedrich Nietzsche.

Cette citation  veille de cent ans n’a pas pris une ride en ce qui concerne le Web. C’est pour cela que je vous propose de vous mettre à la page, en vous enseignant les deux technologies les plus en vogue, HTML5 et JQuery.

HTML5  en guise de squelette

Au début le HTML a été inventé pour pouvoir écrire des documents hypertextuels. C’est-à-dire, des documents ayant la faculté de lier différentes ressources en passant automatiquement de l’une à autre, grâce à un lien. Ces ressources ne sont pas uniquement textuelles, mais peuvent être aussi audiovisuels.

Comme tout langage se doit d’être compris de tous, il a fallu donc inventer un code pour dire :

  • « Ceci est un titre, cela un paragraphe, à cet emplacement se trouve une image et par là on accède à une autre ressource ».

 

Ce principe s’appelle le balisage. Vous l’aurez donc compris, c’est la raison d'être nos fameuses balises HTML.

Une balise se constitue d’un élément de texte (un nom évocateur), encadré  par le caractère inférieur (<) et le caractère supérieur (>) que l’on appelle « chevron ».

Exemple :

<titre> Le corbeau et le Renard </titre> //Pour dire : « ceci est un titre »…
<p> Petit paragraphe </p> // Pour dire : « ceci est un paragraphe »…
<img/> //Pour dire : « ici se trouve une image »…
<a> Autre ressource </a> //Pour dire : « Par là on accède à une autre ressource »…

Ne vous inquiétez pas, nous aurons l’occasion de revenir sur les balises plus tard. Ici, il faut juste comprendre le principe de base des balises, qui est de livrer une information concernant un élément particulier ou de lui donner du sens. On parle aussi de « sémantique ».

Car si à la base, c'était leurs fonctions d'origine, les balises ont longtemps été détournées de leur but premier, lorsqu’on les utilisait pour spécifier des éléments de style comme :

  • « Ceci est rouge, cela est écrit en italique, ou encore, ce mot clignote… »

 

HTML5 revient remettre de l’ordre dans tout ça en replaçant la sémantique au centre du débat.

En effet, les versions précédentes avaient  déjà laissées les effets de style à un autre langage plus adapté, comme le CSS.

Mais HTML5 va un peu plus loin que ces prédécesseurs, en introduisant dans un premier temps, la « Sémantique Structural » dans ces nouvelles balises. Car désormais HTML5 permet de dire :

  • « Ce bloc-ci est l’entête du document, celui-là est un bloc accueillant la navigation ou ce bloc sert de complément d’information à la page. »

 

Bien entendu, l’introduction de ces nouvelles balises représente la partie la plus visible, car il apporte aussi des possibilités dynamiques tels que :

  • le stockage de données côté client
  • l’élément canvas (dessin 2D et 3D)
  • les microformats
  • la lecture de médias (audio, vidéo)
  • le glisser-déposer (drag & drop)
  • la communication bidirectionnelle
  • la géolocalisation
  • la gestion des applications web hors-ligne
  • la lecture et l’écriture de fichiers locaux
  • la gestion de l’historique du navigateur
  • et bien d’autres à venir...

 

Enfin, si son apprentissage demeure facile, ses limites sont très vite atteintes.  Car une page HTML confère très peu d’interaction avec les visiteurs, on parle de page statique.

C’est à ce moment qu’intervient « JQUERY ».

JQUERY  en guise de muscles

A l’origine, la société NetScape, qui  est une entreprise d'informatique américaine pionnière du Web, (notamment pour le développement du navigateur « Netscape Navigator »), a aussi développé un langage qui se voulait simple et accessible au débutant. Le JavaScript a donc vu le jour. Il est utilisé pour dynamiser nos pages Web en modifiant en temps réel sa structure.

Pour ne pas « réinventer la roue » à chaque développement, les informaticiens créent des bouts de codes prêt à l’emploie, pour effectuer certaines  tâches. Ces bouts de codes sont stockés sous forme de bibliothèques.

Vous vous posez surement la question : «Et JQuery dans tout ça ? » …

Et bien justement,  JQuery est l’une de ces bibliothèques. La seule différence,  est qu’elle  est  distribuée gratuitement et  améliorée tous les jours  par une communauté. D’où le système de versionning  «  JQuery 1.9 » ou encore «JQuery 2.0 ». D’ailleurs la première version date de janvier 2006.

La bibliothèque JQuery contient, entre autre, les fonctionnalités suivantes :

  • Parcours et modification de la page Web
  • Événements
  • Effets visuels et animations
  • Manipulations du style
  • Ou encore, l'auto-complétion...

 

JQuery  est donc fait pour nous faciliter la vie,  a en croire son slogan :  « write less, do more ».

Un petit exemple:

Document.getElementById('id'); //Sélectionne un id nommé "id" (JavaScript)

$('#id');//Sélectionne également un id nommé "id" (JQuery)

Pour Conclure

Nous allons donc apprendre HTML5 et  JQuery tout au long de ce tutoriel en construisant une mini-application hors-ligne. Comme vous l’avez surement remarqué, un site web concentre plusieurs langages dont le CSS. Celui-ci  sert à la mise en page entre autres. Nous ne reviendrons pas sur ce langage, car il fait l’objet de plusieurs autres tutoriels. Par conséquent, je vous invite à lire cette publication: (Les bases du CSS).

Enfin, le web est né à travers une guerre pour la suprématie des technologies, d’où la pluralité des langages. Néanmoins, de nos jours ces technologies tendent vers une normalisation. Pensez-vous que cette pluralité constitue un frein ou un moteur majeur pour son évolution ?  Une unification de toutes ces technologies au sein d'un même langage, ne serait-il pas la prochaine étape dans l'évolution du Web… Qu’en pensez-vous ?

Laisser un commentaire