Comprendre le web (1/2) : qu’est ce qu’un site Internet?

Pour un non technicien, il est souvent très difficile de s’y retrouver dans les méandres des technologies du web, surtout qu’elles évoluent très rapidement. Voici les bases qu’il vous faut connaître pour comprendre votre développeur. Il existe deux grandes familles de langages dans le web :

  • les technologies dites « front-end » qui interagissent avec le navigateur internet de l’internaute et affichent les pages web, ce qui permet de créer un site vitrine basique
  • les technologies dites « back-end » qui dialoguent avec le serveur et la base de donnée, ce qui permet de stocker et d’interagir avec les données dans un site plus complexe comme un site marchand (cf. la suite à l’article Comprendre le web (2/2) : les langages de programmation)

HTML

Le premier langage, le plus simple et le plus indispensable, est le HTML. Le HTML, vous permet en gros de structurer les données d’une page web (images, texte, vidéos, formulaires, titres) et de créer des liens entre les pages. Le HTML seul vous permettra de créer un site statique du type des années 2000. Aujourd’hui, la dernière version en cours de développement est le HTML 5 (HTML 4 date de 1997), qui améliore la structure du document, introduit des fonctionnalités en plus notamment sur les formulaires et surtout gère le mode hors ligne, ce qui est très utile sur les mobiles et tablettes.

Le HTML seul permet difficilement de faire un beau site. Le code devient vite très « sale » si l’on doit gérer la disposition des différents blocs, les polices, les tailles de caractères, les couleurs de fond et de police, les événements au passage de la souris etc, surtout que ces éléments se répètent d’une page à l’autre. C’est dans ce but que la présentation des pages web est gérée dans un autre langage, le CSS. Le CSS permet de centraliser dans un fichier tous les aspects liés au graphisme du site tout entier, ce qui a plusieurs avantages :

  • le premier est d’éviter de répéter dans toutes les pages et dans toutes les balises HTML le même code, le code HTML devient alors plus propre et plus lisible et le site se charge beaucoup plus rapidement
  • cette centralisation simplifie considérablement le débogage et la modification du design, puisque tout est centralisé et qu’il suffit de faire ses modifications à un seul endroit.
  • possibilité de changer le design selon que le récepteur soit un navigateur ou un autre (car tous n’affichent pas la même chose, comme les vieux Internet Explorer), un téléphone portable, une tablette, etc.

CSS

Les feuilles de style CSS, comme on les appelle, peuvent vite faire plusieurs milliers de ligne (car il faut définir un par un les éléments de graphisme d’une site tout entier) et certains méta-langages comme SASS ou LESS permettent de simplifier l’écriture du CSS. Attention à l’interopérabilité de votre code CSS avec les différents navigateurs, notamment les anciens (Internet Explorer, Safari, Chrome, Firefox, Opera). C’est de là que vient la complexité de l’intégration d’un design. Personnellement j’utilise LESS ainsi que les éléments graphiques de twitter bootstrap pour gagner un temps considérable car l’interopérabilité est bonne. De plus, Twitter Bootstrap gère ce que l’on appelle les grid (grilles qui permettent de gérer au mieux les alignements) et le responsive design qui permet d’avoir un site compatible pour tablettes et téléphones mobiles.

Flash

Un petit mot sur Adobe Flash. Adobe Flash est un logiciel populaire pour créer des animations. Il est possible de l’utiliser sur le web (notamment avec le Framework Adobe Flex) comme le font certains restaurateurs ou marques de beauté. Le rendu peut-être très beau et fluide mais il y a plusieurs inconvénients qui ont fortement freiné son développement :

  • Il faut télécharger le lecteur flash, présent aujourd’hui sur 99% des ordinateurs mais pas sur iPhone. De ce fait, il est impossible de lire un site en flash sur votre iPhone.
  • Un site en flash n’est pas optimisé pour le référencement par Google, même si Google a fait des efforts à ce niveau.

Javascript

Avec HTML et CSS, il vous est possible de faire un beau site statique. Vous aurez un menu, un beau design, et du contenu sur vos pages, mais il ne sera pas possible de beaucoup interagir avec l’internaute. Si vous voulez créer un carrousel, un calendrier, des effets de transitions, une mise à jour que de certaine partie de page, une validation de formulaire à la volée, et bien d’autres choses, vous aurez besoin de JAVASCRIPT. Le Javascript vous permet d’écrire des petits scripts pour améliorer l’expérience de navigation et l’ergonomie de votre site. Javascript vous permet notamment de ne pas recharger la page à chaque fois que l’internaute fait une action grâce à la communion du Javascript et du XML (qui permet de représenter des données) rendu de manière asynchrone, ce que l’on appelle l’AJAX. L’un des premiers sites connus à avoir beaucoup utilisé la technique Ajax est Facebook.

Afin de simplifier l’écriture du Javascript (qui n’est pas compatible de la même manière sur tous les navigateurs), je vous conseille d’utiliser des librairies toutes faîtes, comme jQuery qui est aujourd’hui devenu une demi-norme (même s’il existe quelques alternatives comme Prototype, Google Web Toolkit, YUI, ExtJS, etc.). Comme pour le CSS, vous pouvez utiliser une sytaxe plus aérée grâce au méta-langage COFFEESCRIPT. Si vous avez beaucoup de Javascript à écrire (comme dans un système de chat par exemple), vous pouvez utiliser un Framework (en gros, un kit de composants pour simplifier et structurer l’écriture de Javascript) de type Backbone.js. Le Javascript prenant une place de plus en plus importante dans le web (au détriment d’Adobe Flash), les frameworks de type backbone.js sont en très fort développement, notamment à la Silicon Valley. L’innovation qui permettra à des applications web d’être aussi faciles à utiliser que les logiciels viendra sans doute des innovations de Javascript et ses frameworks, comme le montre le site codeschool.com qui offre une interface de cours en ligne digne d’un logiciel installé sur votre ordinateur.


Vous êtes maintenant armé pour faire un beau site. Le seul souci est que votre site ne peut pas stocker de données ou réaliser des choses complexes. En plus, il faut le mettre en ligne. Vous avez donc besoin de serveurs et d’un langage dit « back-end » pour interagir avec le(s) serveur(s).

Comprendre le web (2/2) : les langages de programmation?

Comprendre le web (1/2) : qu’est ce qu’un site Internet?

3 réflexions au sujet de « Comprendre le web (1/2) : qu’est ce qu’un site Internet? »

  1. Petit disclaimer avant d’entrer dans le vif du sujet : je vais dorénavant rédiger quelques articles en français plutôt qu’en anglais. Simplement parce que je ne suis pas très à l’aise en anglais et que je perds beaucoup de temps et de flexibilité dans la rédaction, et puis aussi car il existe très peu de ressources javascript en français .

  2. Salut sympas le post. Il y a aussi un logiciel gratuit de boutique en ligne du nom de PrestaShop qui a fait ses preuves puisque 222 000 commerçants l’utilise dans le monde. De plus avec le Cloud c est a dire une offre 100% hébergé vous avez votre boutique en 5mn chrono sans rien payé ! Je suis freelance PrestaShop donc si jamais quelqu un souhaiterai du conseil, du référencement je suis a votre disposition. Salut

Laisser un commentaire

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *