Le web utilise de nombreuses technologies différentes selon les fonctionnalités désirées, les langages de programmation, les frameworks, les plugins, les systèmes d’exploitation du serveur, etc…
On trouve donc de nombreux sites qui utilise des technologies Open Source et d’autres des solutions propriétaires. Il n’y a pas de norme unique en matière de technologie web.
Mais alors comment connaître la technologie embarquée sur un site web ?
Il existe aujourd’hui des extensions de navigateur qui permettent de connaître les technologies embarquées sur un site internet : serveur, langages, CMS, plugins, etc…
Si vous souhaitez copier un concurrents ou tout simplement faire votre propre cahier des charges, cet article vous aidera à découvrir l’ensemble des technologies du web utilisée sur un site internet ou une application web.
Vous pourrez par la suite choisir la meilleure solution technique pour créer votre futur site internet…
HTML VS PHP
En matière de création, le site internet est soit statique, soit dynamique.
Pour un site conçu en HTML, le site est dit « statique » car reste figé sans l’intervention du webmaster on dit que c’est un site vitrine. Le langage HTML est utilisé pour le développement côté client : c’est le navigateur qui interprète le langage.
En revanche, un site internet dynamique dispose d’un grand nombre de pages ou bien s’il suppose une grande interaction avec l’utilisateur, cela signifie qu’il est écrit dans un langage de programmation spécifique PHP écrit par un développeur. C’est un développement interprété côté serveur.
Même un site vitrine peut être dynamique et être écrit en PHP (ou ASP, .NET ou JSP) si c’est pour afficher quelques actualités.
Création de site vitrine statique
Un site HTML internet statique permet de présenter votre activité en quelques pages.
Il est facile et rapide à mettre en œuvre. On ne peut pas le modifier sans l’aide d’un webmaster.
Il est écrit en HTML. La structure d’une page : titres, sous-titres, paragraphes, images et le plus important : les liens. C’est la base d’une page web.
Le langage CSS permet de modifier la présentation des éléments HTML grâce à une feuille de style.
En conclusion, il ne permet pas de mettre à jour son contenu de façon autonome mais, pour assurer une présence sur Internet.
Création de site internet dynamique
La création d’un site web dynamique rend le site internet plus efficace en termes de référencement et d’interactivité.
Un site internet dynamique permet d’ajouter ou de modifier du contenu de façon automatique soit grâce à l’interaction des internautes, soit grâce à un back-office réservé à l’administrateur.
Si l’on souhaite déployer un grand nombre de pages ou si le site suppose une grande interaction avec l’internaute, il est écrit en PHP, ASP, JSP ou .NET. C’est le système le plus usité pour site dynamique depuis 1997. Un portail web, une boutique en ligne et une plateforme d’échange, la plupart des sites font appel à ce système.
PHP est l’un des langages les plus courants sur le web. Par exemple, lorsque l’on remplie un formulaire et que l’on clique sur le bouton envoyer, le serveur reçoit les données, le code PHP traite ces données et écrit le HTML de la nouvelle page web que le serveur web renvoie.
Les interactions avec les visiteurs sont nombreuses. On peut laisser des commentaires, donner son avis, ajouter ses coordonnées dans son espace membre. C’est le cas des catalogues en ligne, des forums, des sites E-commerce, des sites d’annonces et de tous les sites où il faut s’identifier. Facebook et Yahoo ont bâti leur site web sur ce langage.
Tout est stocké dans une base de données SQL. Ainsi, le site web va établir la connexion à la base de données, puis envoyer le code SQL et MySQL va renvoyer les informations qui seront traitées ensuite par le code PHP pour l’affichage d’une nouvelle page web.
Le langage JavaScript et la technologie AJAX a été un acteur majeur qui a fait passer le Web au Web 2.0. Derrière ce nom se cache un ensemble d’appels dynamiques à PHP, l’autocomplétion par exemple, destinées à réaliser de rapides mises à jour de la page web, sans qu’elles nécessitent de rechargement par l’utilisateur de la page Web.
La création d’un site dynamique en PHP est quasiment obligatoire pour les sites professionnels à haute valeur ajouté comme les sites de rencontres, les sites e-commerce, les blogs, les sites communautaires, etc…
Les CMS
Les CMS (système de gestion de contenu) : WordPress, Spip, Drupal (plus sécurisé), Joomla (moins intuitif que wordpress) qui sont toutes écrites en PHP. On peut citer les spécialistes du E-commerce aussi : Magento (écrit en PHP) et Shopify (écrit en Liquid). Intuitif, le CMS permet de déployer un site internet rapidement même avec un grand nombre de pages web.
Créer un site web dynamique avec wordpress est la solution la plus simple. Wordpress propose une page dynamique en PHP qui gère l’ensemble de vos publications. Un CMS convient donc parfaitement pour un site vitrine, mais aussi pour des sites plus complexes qui listent les données de votre catalogue de type :
- Blog
- E-commerce (Magento semble l’emporter pour des très gros sites y compris pour une Marketplace)
- Module d’avis clients
- Site multilingue (on préfèrera Drupal ou Joomla dans ce cas)
- Site d’annonces (immobilières, films, livres, etc…)
- Site communautaire (profils, autorisations, fonctionnalité uniquement pour les membres)
- Agenda d’événements
Il existe quantité de plugins pour réaliser l’ensemble des besoins principaux des sites internet dynamiques. Mais ce système offre parfois quelques limites en matière de personnalisation.
- au niveau du rendu visuel (affichage)
- au niveau des champs spécifiques de votre base de données
De plus, si le webmaster rentre dans le code afin d’effectuer des personnalisations au niveau de l’affichage pour répondre aux besoins ou à l’esthétique du site internet. Il doit s’assoir sur le principal avantage du CMS qui sont les mises à jour automatiques qui assurent une robustesse et une sécurité incomparable.
À ce titre il faut tout de même citer les plugins WordPress Toolset ou Advanced Custom Fields qui permettent de construire n’importe quel type de base de données et de gérer l’affichage comme bon vous semble en ajoutant à vos formulaires tous les types de champs que vous souhaitez afin de personnaliser votre site internet en fonction de vos besoins.
L’intérêt de choisir un CMS réside dans le fait qu’il n’y a pas de bug, que la plateforme est robuste et que vous administrer vous-même le contenu même s’il vous faudra parfois faire appel au webmaster qui réalise un site pour la maintenance. C’est aussi une solution qui propose des mises à jour continuelle et qui évite les problèmes de sécurité.
Enfin, les bugs sont rarissimes et sont corrigés rapidement, car la communauté des développeurs y est très active.
Les CMS sont des sites internet qui permettent un déploiement rapide à un coût raisonnable. WordPress est le plus connu d’entre eux.
Il fait tourner 41% des sites web présents sur la toile. Ils permettent de faire des économies en développement car les plugins sont peu onéreux et sont très utiles lorsque l’on souhaite publier un grand nombre de pages.
Ils disposent d’une interface pour la gestion de contenu.
Quelle technologie est utilisée sur un site web ?
La conception de site Web utilise différentes technologies et différents langages de programmation.
Les extensions de navigateur qui permettent de savoir avec quel outil est fait un site internet ?
WhatRuns permet de détecter quel système est utilisé pour un site web donné. WhatRuns indique le système de publication embarqué, le thème, les plugins, etc… Il est gratuit et est disponible pour Chrome.
Wappalyzer est une extension de navigateur (firefox, chrome) qui montre les technologies d’un site Web : systèmes de gestion de contenu de type wordpress ainsi que la version, plateformes de commerce électronique, serveurs Web, frameworks JavaScript, outils d’analyse (Google analytics, par exemple), Google fonts et bien d’autres.
Builtwith est une extension Chrome et Firefox et même Safari qui montre à quoi fait appel le site web pour fonctionner. Le CMS y est décortiqué et indique aussi si Google Analytics y est installé. Il montre aussi la version du CMS et, dans le cas de WordPress, quelques plugins.
PageXray est une extension firefox qui identifie les technologies dans un site Web. Wiredwith sitexray est un utilitaire qui découvre les systèmes embarqués. Il détecte le système de gestion de contenu, les frameworks javascript, les plates-formes de commerce électronique, les frameworks Web, les fournisseurs de messagerie, les polices, les frameworks publicitaires et bien d’autres …
Les technologies utilisées par les applications mobiles
Le Web mobile marche différemment car les applications fonctionnent hors connexion. La connaissance des langages de chaque système d’exploitation est indispensable. Il y a deux sortes d’applications mobiles.
- Les applications natives qui sont disponibles sur Apple Store et Google Play codée en Java, C# ou Objective-C pour Android et Swift pour iOS. Comparée à une version hybride, une app native s’avère plus rapide et fluide.
- Les applications hybrides. Une application hybride est une application utilisant le navigateur web intégré du support (Smartphone ou tablette) et les technologies Web (HTML, CSS et Javascript) pour fonctionner sur différents OS (iOS, Android, Windows Phone, etc.). Elles concernent toutes les applications mobiles qui sont accessibles par une URL. Les applications web et les progressives web app (PWA) en font partie. L’application web ne permet pas néanmoins d’utiliser les fonctions des smartphones comme l’appareil photos. Ce n’est qu’une version mobile d’un site web classique.
Un webmaster peut développer une appli native compatible sur toutes les plateformes avec les app builders.
Conclusion
La technologie web utilisée dans un site internet varie donc en fonction des fonctionnalités proposées et du support de consultation. Mais le monde de l’Open Source domine le web même si les langages de programmation sont en constante évolution.
Vous disposez néanmoins désormais des outils ou des connaissances vous permettant de (re-)connaître les différentes technologies embarquées.
