Technologies Web : Un voyage du HTML au Web 3.0

Cet article est spécialement destiné aux lecteurs qui cherchent à acquérir des connaissances ou qui souhaitent travailler en tant que développeurs Web ou sur tout autre aspect du Web.

Dans cet article, nous nous concentrerons sur le contenu de certaines technologies Web bien connues – ainsi que de certaines technologies moins connues. Après une introduction rapide et simple à la technologie web, nous passerons en revue les bases de différents types de technologie web.

Au cours de notre discussion, nous aborderons également un bref historique de la technologie Web ainsi que certaines caractéristiques et fonctionnalités de chaque type de technologie dont nous parlons.

Que Sont Les Technologies Web ?

Les technologies Web sont les divers outils et techniques utilisés dans le processus de communication entre différents types d’appareils sur Internet.

Pour mieux comprendre ce terme, décomposons-le en deux parties: « web » et « technologie ».

Le web, dans ce cas, fait référence au World Wide Web, plus communément appelé WWW. Il a vu le jour en 1989 lorsque le célèbre scientifique et ingénieur Tim Berners-Lee a mis au point un mécanisme efficace pour partager les ressources entre scientifiques du monde entier.

Le concept du web peut facilement être expliqué à l’aide d’un exemple.

Supposons que vous cherchiez une photo d’un lama mignon. Vous tapez ‘www.google.com  » dans votre navigateur Web. Vous entrez « lama mignon » dans la barre de recherche et cliquez sur l’onglet « Images ». Google vous donne une pléthore d’images de lama collectées à partir de millions de sources différentes.

Après avoir fait défiler un peu, vous vous dites: « Oh, j’aime cette image! »Mais vous devez voir l’image en taille réelle avant de la télécharger. Donc, vous ouvrez l’image originale et arrivez à cette page:

Remarquez la boîte rouge?

C’est l’URL (un type d’identifiant) de cette image particulière. De la même manière, chaque image de lama que vous avez vue aurait une URL différente qui aiderait à localiser cette image sur Internet.

Toutes ces pages Web, documents et autres ressources sont identifiés et localisés à l’aide de leurs URL. Ceux-ci forment collectivement ce que nous appelons le World Wide Web.

Les connaissances que vous accumulez sur le Web et son fonctionnement doivent être appliquées afin de mieux les comprendre. Pour cela, vous devez connaître les bases de certaines technologies Web courantes. Afin de mieux comprendre le web, jetons un coup d’œil à quelques types de base et exemples de technologie Web couramment utilisés dans ce domaine.

Quels sont les Différents Types de Technologies Web ?

Comme nous disposons d’un espace limité pour examiner le large éventail de technologies Web disponibles, nous en avons sélectionné quelques-unes qui sont le plus souvent utilisées par les débutants et les experts de l’industrie. Nous les avons divisés en sections suivantes:

1. Les bases, qui couvriront les navigateurs Web et certains principes fondamentaux du développement d’applications Web
2. Langages et frameworks de programmation utilisés dans le développement de sites Web
3. Bases de données utilisées en backend pour stocker les données requises ou collectées par les sites Web
4. Certains protocoles, c’est-à-dire des règles de communication sur le web
5. Graphiques, audiovisuels et autres éléments multimédias
6. Certains formats de données qui sont habituellement utilisés pour transmettre des données sur Internet
7. Autres technologies Web diverses

Alors que nous nous commencerons par les bases, notre discussion peut devenir un peu plus technique à mesure que nous progressons dans l’article.

Maintenant, entrons dans les détails de chaque composant que nous avons répertorié.

Les bases

Dans cette section, nous parlerons des navigateurs Web et d’autres fondamentaux du web.

Navigateurs Web

Les navigateurs Web, souvent simplement appelés navigateurs, nous permettent de visualiser toutes les ressources qui font partie du World Wide Web. Ils sont basés sur une architecture client-serveur. Le client est le navigateur dans ce scénario. Vous pouvez considérer le serveur comme une combinaison de logiciels et de matériel qui reçoit les demandes du client, puis envoie la ressource demandée au client.

Chaque fois que vous entrez une URL dans la barre d’adresse d’un navigateur, il relaie votre demande au serveur, puis récupère et affiche tout ce que l’utilisateur a demandé.

Certains navigateurs Web populaires sont Opera, Mozilla Firefox, Google Chrome et Safari.

Technologies de développement Frontend vs Backend

Qu’est-ce que le développement web ?

Le développement Web fait référence au processus de création de sites Web. Ce processus est basé sur un certain nombre d’étapes, que nous aborderons plus en détail lorsque nous explorerons les outils impliqués dans chaque processus.

Les deux parties d’un site Web typique

Au fur et à mesure que nous irons plus loin, nous discuterons des technologies de développement Web individuelles et des outils utilisés pour créer des sites Web. Mais avant cela, nous devons être clairs sur les deux parties distinctes d’un site Web: le frontend et le backend.

Frontend fait référence à toutes les parties d’un site Web qu’un utilisateur peut voir sur son écran et avec lesquelles il peut interagir.

Le backend fait référence à l’exact opposé de cela. Cela implique les mécanismes cachés qui font fonctionner une page Web. Un utilisateur typique ignore généralement ce qui se passe dans le backend.

Différentes technologies Web sont utilisées dans le processus de conception et de développement Web.

Voici un bref aperçu des différences entre les deux catégories de développement web.

Frontend	Backend
Côté client	Côté serveur
Conception du site web	Bases de données
Serveurs UI/UX
Certaines technologies d’interface utilisateur :	Certaines technologies d’arrière-plan:
HTML	PHP
CSS	Java
JavaScript	Python
AJAX	Ruby
	.NET

HTML

Le langage de balisage hypertexte, plus communément appelé HTML, est l’endroit où le WWW a commencé. C’est un élément essentiel de toutes les leçons d’introduction qui couvrent les bases du Web. C’est un langage côté client qui est utilisé pour coder le frontend d’un site Web. Il aide les développeurs à définir comment la page Web sera structurée, et ce à l’aide d’éléments identifiés par des balises.

Voici un exemple très basique d’un morceau de code écrit en HTML:

<!DOCTYPE html><html><body><h1 style="background-color:SteelBlue; color:LightSteelBlue; font-family:Cambria; font-size:200%">Hello, We Are GoodCore Software.</h1><p style="background-color:LightSteelBlue; color:SteelBlue; font-family:Calibri; font-size:150%">Good to the Core! &#128513;</p></body></html>

Chaque élément entre parenthèses < > est un élément. DOCTYPE, cependant, n’est qu’une déclaration qui communique au navigateur que ce qu’il est sur le point de charger est un document HTML. L’élément < body > définit tout le contenu qui forme le corps du document. < h1 > et <p > indiquent respectivement le début d’un titre et d’un paragraphe. </body >, </h > et </p > sont des balises de fermeture. Ils indiquent où se terminent le corps, le titre et le paragraphe.

Dans cet exemple, l’attribut style est utilisé pour attribuer une couleur d’arrière-plan, une couleur de police, une famille et une taille particulières au texte. Il peut être étendu pour inclure le style de police (gras, italique, ital), l’alignement (centre, gauche, left), etc. D’autres attributs en dehors du style peuvent également être utilisés pour modifier des éléments de manière similaire.

(La chaîne de caractères aléatoires & #128513; à la fin du paragraphe se trouve un élément surprise que vous pouvez voir dans l’écran de sortie ci-dessous!)

CSS

CSS est l’une des technologies de conception de sites Web les plus fondamentales. Pour embellir davantage vos pages Web, vous pouvez intégrer du CSS (Feuilles de style en cascade) dans votre code HTML.

Le processus d’application de certains styles à certains éléments de votre code HTML peut se transformer en une tâche répétitive. Pour gagner du temps et de l’énergie, CSS peut être utilisé pour rationaliser le processus de style de vos pages sur l’ensemble du site. Une fois que vous avez préparé une feuille de style avec tous les styles de police par défaut, les couleurs et d’autres caractéristiques liées à la mise en page globale d’une page Web, vous pouvez l’appliquer à l’ensemble du site. CSS est également combiné avec Bootstrap pour concevoir des applications Web d’abord mobiles.

Langages et Frameworks de programmation

Les langages de programmation sont la composante la plus fondamentale de la création de sites Web. Pour coder un site web, vous devez vous familiariser avec quelques concepts de programmation, certains langages et leur syntaxe, ainsi qu’avec un bonE de développement. Certains de ces langages peuvent être à usage général, mais d’autres sont spécifiquement créés à des fins de développement Web.

Voici quelques exemples de langages de développement Web couramment utilisés.

1. Java

Java a été créé en 1991 en tant que langage de programmation à usage général, mais a lentement évolué pour jouer un rôle majeur dans le développement Web au milieu des années 90.

Java est bien connu en raison de certaines de ses caractéristiques étonnantes, y compris sa nature

• Orientée objet
• Portabilité et indépendance de la plate-forme
• Syntaxe simple
• Apprenabilité
• Robustesse

En matière de développement web, Java est généralement utilisé côté serveur.

2. JavaScript

JavaScript a été créé pour la première fois en 1995. Aujourd’hui, c’est un favori des développeurs du monde entier. C’est maintenant un élément essentiel du développement Web qui aide à créer des éléments dynamiques de pages Web.

L’introduction de JavaScript a provoqué la vague révolutionnaire des pages Web interactives. Aujourd’hui, l’intégration d’éléments graphiques, l’intégration de bases de données et la dynamique globale d’un site Web sont toutes possibles grâce à l’avènement de JavaScript.

Alors que JavaScript a été initialement introduit en tant que langage de développement frontend, il devient maintenant un choix populaire pour le développement backend.

3. Python

Python existe depuis des années mais ne gagne en popularité que récemment en raison de sa syntaxe extrêmement facile à apprendre et lisible ainsi que de sa productivité élevée. Une tâche qui pourrait utiliser 10 lignes de code lorsqu’elle est écrite dans un autre langage de programmation pourrait facilement être réalisée en 2-3 lignes de code Python.

Pour le développement web côté serveur, Python est souvent utilisé en conjonction avec les frameworks Django ou Flask, ce qui simplifie davantage le processus de développement.

Cette année, StackOverflow a rapporté que Python a battu les goûts de Java et C en termes de popularité, et s’est classé 2e sur la liste des langages de programmation les plus appréciés.

4. PHP

PHP, un acronyme récursif, signifie PHP: Préprocesseur hypertexte. C’est le langage de script le plus populaire et le plus utilisé par les débutants et les professionnels chevronnés de l’industrie du développement Web. Il est très facile à apprendre et est absolument gratuit.

Lorsqu’il est utilisé avec Apache (ou tout autre serveur HTTP en backend), PHP vous permet de fournir des projets de développement Web efficaces, rapides et performants. De plus, puisque PHP existe depuis des années et n’a fait que grandir et s’améliorer, il existe un support étendu de la communauté des développeurs facilement disponible.

5. Ruby

Introduit au milieu des années 90, Ruby est un puissant langage de programmation à usage général qui, au fil des ans, est devenu populaire parmi les développeurs backend. Il est souvent utilisé en conjonction avec son cadre populaire Ruby on Rails. Ruby est particulièrement recommandé pour les sites Web à forte intensité de trafic et ceux qui nécessitent beaucoup de travail à la fin de la base de données. Il est également utile pour écrire des applications évolutives.

Des sites populaires tels que Twitter et Shopify ont été construits avec Ruby en arrière-plan.

6. Objective-C & Swift

Objective-C et Swift sont tous deux des langages de programmation à usage général qui sont utilisés spécifiquement pour créer des applications pour les appareils Apple exécutant macOS et iOS.

Objective-C s’appuie sur C tandis que Swift est fortement basé sur la syntaxe de C++. Alors que Objective-C existe depuis de nombreuses années que Swift, le premier perd lentement des adeptes car il devient de plus en plus obsolète. Swift devrait progressivement remplacer Objective-C par ses fonctionnalités plus avancées, sa facilité d’utilisation et sa sécurité. Depuis que Swift est open-source, les développeurs l’utilisent également pour le développement Web.

Frameworks

En termes simples, un framework peut être défini comme un code squelette. Considérez-le comme un contour approximatif sans détails fins. Un framework définit les fonctions ou tâches de base que le code est censé effectuer. Cependant, afin de dire à ce programme particulier comment exécuter ces fonctions, vous devrez écrire des instructions plus détaillées et spécifiques.

Jetons un coup d’œil à quelques frameworks couramment utilisés par les codeurs pour le développement Web backend, ainsi qu’aux langages avec lesquels ils fonctionnent le mieux. Cette liste comprend certaines des dernières technologies de site Web.

Frameworks	Langues
Vue.js	JavaScript
Noeud Express	.js (JavaScript)
Réagissez.js	JavaScript
AngularJS	JavaScript
Django	Python
Flacon	Python
Laravel	PHP
Rubis sur rails	Rubis
Catalyseur	Perl
Cacao & Touche cacao	Swift

Choisir parmi ces options dépend de vos besoins de développement. Vous devez déterminer quelle combinaison de framework et de langage répondra le mieux à vos exigences d’évolutivité, de sécurité et de productivité sans investir beaucoup dans l’apprentissage de la technologie elle-même.

Bases de données

Toutes les données échangées sur le Web doivent être stockées quelque part. À cette fin, la plupart des sites Web ont leurs propres bases de données qui leur sont associées.

Voici une liste de certaines bases de données – certaines relationnelles et d’autres, non relationnelles – couramment utilisées pour les applications Web.

• MySQL
• SQL Server
• Postgres
• Oracle
• MongoDB
• Redis

Formats de données

Chaque fois qu’il y a un besoin pour échanger des données entre deux appareils sur le Web, une procédure appropriée est suivie. Les données sont emballées correctement pour être transmises de la source à la destination. Des API spéciales (Interfaces de programmation d’applications) sont conçues et intégrées aux sites Web pour faciliter l’échange de données. Ils organisent les données de manière à ce que le récepteur puisse facilement les décoder et les comprendre.

Voici deux formats de données courants utilisés dans le développement Web.

1. XML

XML signifie Langage de balisage extensible. Nous avons discuté de la syntaxe pour HTML au début de cet article. XML fonctionne de la même manière en ce qu’il décompose les données en éléments identifiés par différents types de balises. Cependant, avec XML, vous pouvez inventer vos propres balises pour mieux décrire vos données. Ces données, lorsqu’elles atteignent une application Web ou un serveur, peuvent être facilement comprises et analysées.

Regardons un exemple de dossier d’une étudiante, ses données biologiques et ses cours inscrits à l’université. Voici à quoi cela ressemblerait stocké en XML:

<student><studentname>Regina George</studentname><year>2</year><courses><course>Compiler Design</course><course>Film Studies</course><course>Accounting</course></courses></student>

Ici, le nœud principal ou racine est student. le nom de l’étudiant, l’année et les cours sont des nœuds enfants. On pourrait dire que ce sont des attributs du nœud racine. Comme c’est le cas avec HTML, les données XML sont également écrites entre les balises d’ouverture et de fermeture des nœuds enfants.

2. JSON

Après des années d’expérience de l’encombrement et de la forte consommation de bande passante de XML, les experts ont proposé JSON (notation d’objet JavaScript). Contrairement à XML, JSON se concentre davantage sur l’échange de données rapide et facile que sur la définition et la modélisation détaillées des données. Il élimine également toute la charge supplémentaire que porte XML sous la forme de balises répétitives.

JSON est basé sur le mécanisme de paire clé-valeur familier. Sa syntaxe ressemble à celle de JavaScript, ce qui le rend assez facile à lire et à comprendre.

Voyons comment notre exemple précédent d’enregistrement étudiant apparaîtrait lorsqu’il est stocké est JSON:

{"studentname": "Regina George","year": "2","courses": }

Ici, l’étudiant est l’objet. le nom de l’étudiant est un exemple de clé, qui est un attribut de l’objet student. Sa valeur associée est Regina George. De même, les cours sont également une clé. Cependant, il se présente sous la forme d’un tableau (indiqué par les crochets) car plusieurs valeurs lui sont associées, c’est-à-dire la Conception du compilateur, les Études de films et la comptabilité.

Protocoles

Les protocoles Web sont des règles prédéfinies qui doivent être suivies par tous ceux qui communiquent sur le Web.

HTTP

Le protocole de transfert hypertexte, mieux connu sous le nom de HTTP, est un protocole Web qui définit deux concepts:

1. Comment les demandes des clients sont relayées aux serveurs
2. Comment les serveurs répondent aux demandes des clients

La demande doit spécifier les quatre éléments suivants:

1. L’URL de la ressource que le client souhaite
2. Une méthode, telle que GET (qui est utilisée pour récupérer des données du serveur) ou POST (qui est utilisée pour envoyer des données qui doivent être mises à jour sur le serveur)
3. Une liste d’en-têtes (Les en-têtes de requête peuvent contenir des informations diverses sur le client ou la ressource qu’ils ont demandée, telles que le nom du navigateur client, le système d’exploitation, la taille du message, l’heure et la date de la demande, informations de contrôle d’accès / informations d’identification, etc.)
4. Le corps qui contient les informations que le client souhaite envoyer au serveur

Le serveur envoie une réponse de l’autre extrémité une fois qu’une requête a été traitée. Cette réponse spécifie trois éléments:

1. Un code d’état qui se présente sous la forme d’un numéro à 3 chiffres (Un code d’état que vous avez pu voir lors de vos sessions de navigation Web quotidiennes est 404, ce qui indique que la ressource demandée n’a pas pu être trouvée.)
2. Une liste d’en-têtes (les en-têtes de réponse ressemblent à des en-têtes de requête dans la structure, et peuvent contenir des informations telles que la taille du message, le type de contenu, etc.)
3. Le corps qui contient les informations que le client a demandées au serveur

Autres protocoles

Voici une liste d’autres protocoles Web courants et de leurs utilisations.

Protocole	Signifie	Utilisation
TCP	Protocole de contrôle de transmission	Pour établir une connexion entre deux périphériques sur le web et gérer la livraison de paquets de données
IP	Protocole Internet	Pour le transfert de paquets de données entre deux périphériques sur le web
Connexion Internet		Ces deux technologies Web fonctionnent souvent ensemble.
UDP	Protocole de datagramme utilisateur	Pour établir une connexion entre deux périphériques sur le web
FTP	Protocole de transfert de fichiers	Pour le transfert de fichiers entre le client et le serveur
SMTP	Protocole de transfert de courrier simple	Pour l’envoi de messages électroniques au serveur
POP	Protocole de bureau de poste	Pour récupérer des messages électroniques depuis le serveur
SOAP	Protocole d’accès Simple aux objets	Pour l’envoi Messages XML via HTTP

Graphiques

Les éléments graphiques sont une caractéristique clé de toute page Web. Ils contribuent non seulement à l’embellissement d’une page, mais peuvent également être utilisés pour transmettre des points importants d’une meilleure manière que le texte.

1. Canvas

Canvas est un élément qui fait partie du HTML. Lorsqu’il est utilisé avec JavaScript (ou tout autre langage de script), vous pouvez dessiner des graphiques sur une page Web peu à peu. L’aspect JS offre une interactivité dans les graphiques de canevas, y compris l’animation.

Canvas fonctionne mieux dans les situations où un grand nombre d’objets graphiques doivent être chargés sur une page Web. Il est rapide et léger dans cet aspect. Cependant, ce n’est pas très exceptionnel en ce qui concerne le redimensionnement des graphiques et leur mise à l’échelle car il est basé sur des trames.

2. SVG

SVG signifie Graphiques vectoriels évolutifs. Il est basé sur XML et fonctionne très bien avec HTML. il peut également être facilement manipulé à l’aide de CSS.

Le secret de sa popularité réside dans son nom : l’évolutivité. Ce qui distingue le SVG des autres styles graphiques tels que JPEG et PNG, c’est qu’il n’est pas basé sur des pixels. Il repose sur des dimensions numériques (vecteurs) qui peuvent être facilement mises à l’échelle vers le haut ou vers le bas sans perte de qualité.

Lorsqu’il s’agit d’utiliser des éléments graphiques sur un site Web, la qualité des graphiques est un facteur critique. SVG permet non seulement d’obtenir des performances élevées pour des graphiques de plus grande taille, mais garantit également l’interactivité. Pour ces raisons, le SVG est actuellement l’une des technologies Web graphiques les plus préférées.

3. WebGL

La bibliothèque graphique Web, mieux connue sous le nom de WebGL, est une ressource technologique Web qui permet aux navigateurs de rendre des images 2D et 3D à l’écran. Il élimine le besoin de plug-ins externes et est compatible avec les navigateurs de bureau et mobiles.

Autres

Voici quelques autres technologies web dont vous n’avez peut-être pas entendu parler auparavant. Nous pensons qu’ils méritent une mention honorifique dans notre article.

1. Perl & CGI

Perl est un langage de programmation multiplateforme à usage général qui gagne progressivement en popularité dans le paysage du développement Web. Il s’appuie sur des langages tels que C et BASIC et fonctionne parfaitement avec HTML, le langage de balisage le plus couramment utilisé. Perl fonctionne également bien avec les bases de données grand public telles que MySQL et Oracle.

Perl est utilisé pour écrire des applications qui implémentent CGI (Common Gateway Interface). CGI est un protocole Web qui définit la façon dont une application communique avec le serveur Web lorsqu’elle effectue des requêtes HTTP. Ces scripts CGI rendent le processus de récupération des ressources plus efficace.

2. MathML

Comme HTML, MathML (Mathematical Markup Language) est un langage de balisage. Cependant, il est spécifiquement utilisé pour la représentation précise et correcte des équations mathématiques et scientifiques sur le Web.

MathML s’assure non seulement que les équations sont affichées correctement, mais attribue également un sens au contenu mathématique. Tout cela est réalisé en utilisant des éléments XML pour la représentation du contenu mathématique et des symboles. Par exemple, l’élément msqrt se traduit par un symbole de racine carrée, la fonction sinus trigonométrique est représentée par l’élément sin, etc.

3. XSL, XSLT & EXSLT

XSL (Extensible Stylesheet Language) est un langage utilisé pour définir la manière dont les données XML doivent être formatées lors de leur affichage au client. Alors que XML traite les données elles-mêmes, XSL gère sa transformation, sa mise en page et sa présentation. On peut dire que XSL sert le même but pour XML que CSS pour HTML.

Le site Web W3 indique les deux constituants de XSL: a) XSLT (Transformations) pour gérer les transformations et b) XSL-FO (Objets de formatage) pour gérer le formatage, la pagination, etc. Cependant, en 2013, XSL-FO a été abandonné et remplacé par CSS3.

XSLT (Extensible Stylesheet Language Transformations) est un langage qui définit la façon dont les documents XML doivent être convertis en d’autres formats plus lisibles par l’homme tels que HTML. Il applique des feuilles de style XSL aux documents XML, à l’aide d’un processeur XSL, afin d’embellir les données XML.

EXSLT est un moyen d’étendre les fonctionnalités de XSLT. Ce n’est pas une partie officielle de XSLT mais un projet piloté par la communauté. Il vise à rendre les feuilles de style XSL plus portables et à améliorer leurs fonctionnalités et leur support en leur ajoutant plus de fonctions.

L’avenir des technologies Web

Un rapport de Cisco prévoit que près de 52% de la population mondiale aura accès à Internet d’ici 2020. Le World Wide Web se développera à un rythme étonnant pour inclure un plus grand nombre de personnes, d’appareils et de ressources disponibles en ligne. Par conséquent, les technologies Web devraient se développer. Par conséquent, les professionnels de la technologie s’efforceront de fournir un contenu Web accessible aux utilisateurs partout dans le monde. Des mesures de sécurité plus strictes devront être prises pour protéger le contenu Web privé contre les cyberattaques malveillantes.

Le WWW a commencé en tant que Web 1.0 avec des pages Web statiques écrites en HTML ancien. Il est ensuite passé au Web 2.0 avec l’avènement de JavaScript et d’autres technologies qui ont permis aux utilisateurs d’interagir avec le contenu Web et de produire le leur.

Bientôt, le Web ira plus loin et entrera dans sa troisième phase, le Web 3.0, qui sera beaucoup plus décentralisé qu’il ne l’est aujourd’hui. Les technologies modernes telles que l’IA et l’IoT domineront bientôt le Web. Tout sera beaucoup plus automatisé en termes de développement et de consommation de nouveaux contenus.

Nous espérons que cet article vous a permis d’obtenir des informations précieuses sur l’évolution et l’avenir des technologies Web. Continuez à suivre notre blog pour rester à jour sur d’autres développements intéressants dans le paysage WWW!