Pour la plupart d’entre nous, un site internet est un ensemble de textes et de visuels, animés ou non, parfois de sons, accessible depuis un ordinateur, un téléphone, une tablette, et même paraît-il une montre.
Pourtant, un site internet est bien plus que cela. Pardonnez ma référence à Saint-Exupéry, mais je préfère sa métaphore à celle du capot de la voiture… L’essentiel d’un site internet, ce qui le structure, qui nous permet de le voir, mais aussi et surtout ce qui lui donne son sens, est invisible pour les yeux.. Ou presque !
“L’essentiel est invisible pour les yeux”
Je vous invite à un petit tour d’horizon du monde du développement. N’ayez crainte, je tenterai de vous tenir la main tout au long de ce parcours jonché de mots étranges et d’algorithmes effrayants !
Nous partirons de la surface pour aller vers les profondeurs. Mais je suis certain que mes amis psychologues en ont l’habitude…
Le navigateur : fenêtre sur le Web
Voilà un drôle de nom pour surfer sur le net. Pourtant, nous le verrons, Internet est plein de métaphores assez amusantes - bien que cet océan ne soit pas toujours de tout repos.
Les différents navigateurs
Le navigateur, c’est le logiciel que vous utilisez pour vous rendre sur Internet. Internet Explorer (on retrouve la métaphore de l’exploration !), Mozilla Firefox, Google Chrome, sont les principaux armateurs de cette flotte.
Ce fier capitaine vous entraîne sur la toile, c’est lui qui vous permet de voir les pages que vous consultez. Sans lui, tout cela ne serait qu’une succession de lignes de code difficilement compréhensibles (sauf pour les robots d’indexation, comme nous le verrons plus loin).
Notons au passage que les différents navigateurs n’affichent pas nécessairement le contenu des pages de la même façon, surtout pour les plus anciens d’entre eux. Il est donc important d’avoir un navigateur à jour pour bénéficier des dernières fonctionnalités d’Internet.
Un interprète pour le Web
Ce que fait le navigateur, c’est qu’il traduit littéralement le code pour l’afficher sous forme lisible et immédiatement compréhensible à l’œil humain.
“Le code est un langage interprété par le navigateur”
Vous avez dû remarquer un mot étrange.. Le code.. Qu’est-ce que cette chose ? Si j’étais Tintin, j’appellerais le Capitaine Haddock pour nous éclairer ! Le code est le langage interprété par le navigateur.
Mais c’est quoi ce code ? Où se trouve-t-il ? C’est très simple, ou presque. Comme je l’ai déjà écrit dans l’article hébergement et nom de domaine, le code est un langage sous forme de fichiers informatiques qui forme un ensemble de données lisibles par les ordinateurs. Ces derniers étant régis par le système binaire, ils ont besoin - les pauvres - de directives extrêmement structurées pour faire leur travail. Le code - les fichiers contenant le code - est stocké sur un serveur, un ordinateur distant qui permet à chaque internaute de lancer son navigateur pour l’explorer intelligiblement.
Ainsi, HTML, CSS, PHP, JavaScript (entre autres), sont les langages que comprend votre ordinateur et que votre navigateur interprète.
Du code à la page : les langages du Web
Le navigateur, votre interprète, a besoin d’un langage qu’il comprend afin de vous restituer visuellement les pages que vous souhaitez voir. Nous allons avancer pas à pas. Le premier langage permet au navigateur de vous restituer du contenu textuel, ce que vous lisez en ce moment-même ! Ce langage est le HTML (Hypertext Markup Language ou Langage de marquage de données en français).
HTML : des balises pour structurer le Web
Le langage HTML est relativement simple à comprendre et à apprendre. Il structure les données selon un code bien précis de balises. Dans la courte vidéo ci-dessous, vous pourrez voir un aperçu du fonctionnement du langage HTML.
Comme vous avez pu vous en apercevoir si vous avez visionné la vidéo, le résultat est purement textuel, et ne comporte aucune mise en forme de positionnement des éléments ni de couleurs. Les éléments sont simplement empilés les uns au-dessus des autres.
Si vous avez connu les débuts d’Internet, cela doit vous rappeler des souvenirs ! Pour ajouter une mise en forme au contenu HTML brut, nous avons besoin d’un autre langage : le CSS.
CSS : mettre en forme le HTML
CSS (Cascading Style Sheet, ou feuille de styles en cascade) est un langage qui permet la mise en forme du contenu généré par le HTML. Si nous reprenons notre exemple de la courte vidéo ci-dessus, nous pouvons ajouter quelques changements visuels.
JavaScript : donner vie au contenu
JavaScript est le langage qui permet d’ajouter de l’interactivité à vos pages web. C’est grâce à lui que vous pouvez avoir des animations, des formulaires dynamiques, et toutes sortes d’interactions utilisateur.
Du contenu, du contenu, encore du contenu !
Structurer les données
Un site internet ne se résume pas à du code. Le contenu est roi ! Il faut structurer vos données de manière logique et accessible.
L’UX, une donnée à ne pas négliger
L’expérience utilisateur (UX) est cruciale pour le succès de votre site. Une interface intuitive et agréable à utiliser fera toute la différence.
L’accessibilité, une nécessité, un challenge
L’accessibilité web est essentielle pour permettre à tous les utilisateurs, y compris ceux en situation de handicap, d’accéder à votre contenu.
Conclusion
Créer un site internet est un processus complexe qui nécessite de maîtriser plusieurs langages et de penser à l’expérience utilisateur. Mais avec les bons outils et une approche méthodique, c’est tout à fait accessible !
N’hésitez pas à me contacter si vous souhaitez en savoir plus sur la création de sites internet.