Editions ENI Livres | Vidéos | e-Formations
Code et Web
Introduction
Nous ne nous attarderons pas trop sur ce sujet, déjà largement présent dans le quotidien de nos lecteurs. Nous allons introduire les markup languages et la notion de web sémantique, pour ne pas nous focaliser immédiatement sur le sempiternel « comment fabriquer ses pages web ».
Pour ce qui est de la suite, nous avons choisi de vous proposer quelques points de repère dans l’esprit TL;DR !
Connaissance, ontologie, markup language, web sémantique
La petite introduction qui suit n’a pas comme objectif de vous retracer l’histoire du Web, mais prétend poursuivre un objectif didactique autour de la compréhension de la structuration de l’information de celui-ci.
Un des piliers du World Wide Web, initié en 1989, s’avère être l’utilisation d’un ancien concept, l’hypertexte, caractérisé par le fait que l’on introduit des liens que l’on peut suivre dans un document vers une autre partie du document (une ancre) ou vers un autre document situé localement ou ailleurs.
Dix ans plus tôt, on avait constaté l’intérêt de structurer les documents sous forme d’arbres qui représentaient la structure d’un document (titre, sous-titre, etc.) jusqu’aux informations elles-mêmes sous forme de texte.
À ce stade, l’idée était de séparer le « fond de la forme » pour pouvoir créer des documents différents en termes d’aspect, mais en s’appuyant sur le même contenu. Elle débouche inévitablement sur la création de feuilles de style qui définissent l’aspect de ces structures suivant la présentation que l’on veut en faire.
Très vite, un deuxième constat s’impose : certaines structures et certains éléments d’information se répètent et représentent en fait des arborescences taxonomiques similaires qu’il serait intéressant d’identifier, puis d’imposer dans les documents qui manipulent souvent les mêmes types d’information. Par exemple, on pourrait définir une notion d’adresse qui devrait avoir systématiquement cette structure et sur laquelle on imposera des règles, par exemple « un pays fait partie de telle liste de pays existants », « un code postal est formé de tels lettres et chiffres… ».
adresse
personne ou entité
emplacement dans localité
localité
code postal
pays On constate que ces informations sont structurées, mais moins que les informations contenues dans...
HTML5 et CSS3
1. En bref
HTML (HyperText Markup Language) est un langage de markup utilisé pour présenter du contenu sur le web, c’est-à-dire que HTML propose un jeu de balises (ouvrantes et fermantes) qui permettent de stipuler la nature de ce qui est désigné, ici encadré, par ses balises.
Voici quelques balises couramment utilisées :
-
titres de différents niveaux (<h1>, <h2>, <h3>) ;
-
paragraphe (<p>) ;
-
liens (<a>) ;
-
images (<img>) ;
-
listes (<ul>, liste ordonnée <ol>, ligne <li>) ;
-
tableaux (la table <table>, ligne <tr>, cellule <td>) ;
-
formulaires de saisie (le formulaire <form>, saisie <input>, menu <select>) ;
-
zones « div » (<div>).
Les zones div permettent de séparer des parties de la page en fonction de leur rôle, leur comportement ou leur apparence. Leur usage n’est pas obligatoire. Les zones div peuvent contenir d’autres éléments HTML, tels que des paragraphes, des images, des listes, des formulaires, etc. Elles peuvent également avoir des styles applicables dédiés via CSS pour personnaliser leur apparence. On peut les imbriquer de telle façon que le flux de travail dans la page résiste aux changements de taille de celle-ci quand on réduit la fenêtre du navigateur ou quand on visualise la page sur un smartphone. Les frameworks de création de sites web vous libèrent de la gestion un peu délicate de ces zones et en plus facilitent la gestion des interactions entre le serveur et l’utilisateur (input, formulaires, get/post, etc.). Ces frameworks gèrent vos prototypes de page (templates) et les renseignent au moment de l’échange HTTP.
HTML5 est une version récente de HTML. HTML5 ajoute de nouvelles fonctionnalités à l’ancienne version HTML_4, telles que les éléments de syntaxe HTML pour les données audiovisuelles, les formulaires interactifs, les graphiques vectoriels et les annotations.
Voici quelques-unes des nouveautés d’HTML5 :
-
Les balises HTML ont été étendues pour inclure de nouvelles fonctionnalités, comme <video> et <audio> pour les médias audio et vidéo, <canvas>...
Le DOM
Le Document Object Model (DOM) est une représentation hiérarchique de l’ensemble des éléments d’une page web. Il permet de manipuler les éléments des pages web et est utilisé par les navigateurs pour restituer correctement ces pages.
Le DOM est divisé en plusieurs artefacts.
-
Document : il s’agit du niveau supérieur du DOM, qui contient tous les autres éléments. Il est représenté par un objet nommé Document qui reflète notre page.
-
Éléments HTML : ils représentent les éléments structuraux d’une page web, tels que les balises HTML. Les éléments HTML sont représentés par des objets hérités de la classe Element.
-
Attributs HTML : ce sont les attributs associés aux éléments HTML, par exemple l’attribut href pour les liens. Les attributs sont représentés par des paires clé-valeur.
-
Textes et commentaires : ce sont les textes et commentaires présents dans le code HTML, qui ne sont pas caractéristiques d’HTML. Les textes sont représentés par des objets de type Text, tandis que les commentaires sont représentés par des objets de type Comment.
-
Nœuds : le DOM est également composé de nœuds (Nodes), qui sont des points...
JavaScript
JavaScript, qu’il ne faut en aucun cas confondre avec Java, a longtemps été le langage de prédilection des développements web natifs. Nous allons le comparer rapidement avec Python sur différents aspects.
-
Syntaxe : un peu comme avec C++, la syntaxe JavaScript comporte des accolades pour définir des blocs de code et des points-virgules pour terminer les lignes, alors que Python utilise des indentations (décalages) pour structurer son code.
-
Nature dynamique : comme Python, JavaScript est un langage de programmation dynamiquement typé, ce qui signifie que vous n’avez pas besoin de déclarer les variables avant de les utiliser.
-
Orientation objet : comme Python, JavaScript est un langage orienté objet, ce qui signifie que tout dans le langage est considéré comme un objet, y compris des artefacts non déclarés comme tels. Pour ce qui est de la programmation objet, les deux langages possèdent certains concepts similaires, tels que les classes, les objets, les attributs et les méthodes.
-
Fonctions de premier ordre : comme Python, JavaScript permet de définir des fonctions de premier ordre, qui peuvent être affectées à des variables et passées comme arguments à d’autres fonctions et même retournées par des fonctions. Les deux langages permettent également la définition de fonctions récursives.
-
Asynchrone : JavaScript est nativement un langage asynchrone, Python ayant quant à lui partiellement évolué en ce sens. Cela permet de réaliser des opérations de réseau, d’animer des graphiques et de mettre à jour l’interface utilisateur sans bloquer le thread principal de l’exécution.
-
Exécution sur le serveur dans les contextes web : nativement, JavaScript s’exécutait sur le poste client, mais depuis longtemps les environnements professionnels comme Node.js s’avèrent très utilisés comme environnement d’exécution sur la partie serveur et permettent d’y exécuter du JavaScript. Dans le même esprit, dans les contextes web où l’on a décidé d’utiliser Python, vous trouverez de nombreuses configurations, par exemple fondées sur des frameworks comme...