Site internet : qu’est ce que c’est ?

Mon but n’est bien-évidemment pas de vous prendre pour des buses en vous posant une question aussi évidente de prime-abord, j’aurais tout-aussi bien pu choisir comme thème « qu’est ce qu’un livre ? » ou « qu’est ce qu’un oiseau ? ». Si je vous propose de vous intéresser à ce qu’est un site internet, c’est pour essayer de dégager des traits communs à tous les sites internet et de voir  en particulier si votre but est de construire le votre ou d’avoir des notions pour faire construire le votre (et pourquoi pas par Informatique-Oise ? :p ), essayer de comprendre les points communs à chaque site internet, en dégager l’essentiel et de voir le côté indispensable à tout site d’une part, et ce que vous pouvez apporter en originalité pour faire de votre site une œuvre unique.

Une autre raison pour laquelle je vous propose cet article est que nous allons avec le club informatique d’Ercuis commence la réalisation de son site internet .

Dissection fonctionnelle d’un site internet

Prenons l’exemple de l’un des sites minimalistes (à priori) qui soit, Google.

Et tant qu’à faire, remontons dans le temps et prenons Google tel qu’il était au départ, en décembre 98:

http://web.archive.org/web/19981202230410/http://www.google.com/

(N’hésitez pas à utiliser archive.org au passage pour une séquence nostalgie de sites web au fil du temps. Un bonus pour les participants à la Restless qui me lisent : http://web.archive.org/web/20010401180946/http://www.restless-lan.org/ … Ca nous rajeunit pas ma bonne dame )

Si on n’y regarde pas de trop près, Google à l’époque et Google maintenant se ressemblent plutôt pas mal, et l’essentiel y était déjà : un champ texte qui prend la quasi-totalité de la page destiné à accueillir vos requêtes de recherche, et qui en est son intérêt essentiel. En cela, Google avait repris le principe de moteurs de recherche existants concernant l’ergonomie (Altavista notamment). En bas , des liens vers des types de recherche spécialisés (Standford seach et Linux search), des liens vers l’aide, les infos sur la société, etc. qui permettent de se balader dans d’autres sections du site Internet.

En cherchant à catégoriser chacune de ces sections, on se retrouve avec :

  • Un en-tête permettant d’identifier le site (le logo Google)
  • Une zone de navigation permettant d’accéder rapidement aux autres pages du site (les liens en bas de page)
  • La partie principale du site, le contenu « actif », en l’occurence la zone de saisie.

En fait, ces trois parties existent depuis l’aube de l’Internet grand public et en sont les gènes de base. Tout site reprend instinctivement ces trois éléments, et c’est tout naturel. Quand on fait un site Internet, c’est généralement pour communiquer avec les autres, montrer qu’on existe, et le faire savoir. On a besoin de se créer une identité en ligne, et c’est précisément la fonction de l’en-tête. La partie principale du site quand à elle, permet de détailler le service que l’on offre ou le produit que l’on veut mettre en valeur… Là encore, rien de plus logique : si on fait un site Internet, c’est bien qu’on a quelque chose à dire, à proposer ou à montrer. Ces deux éléments n’ont pas attendu Internet pour exister, et en publicité ce sont les deux éléments de base que l’on retrouve n’importe où, la marque et le produit. Le troisième élément, la zone de navigation, est en revanche propre à Internet. Un site Internet est découpé en pages. Cela nous semble évident aujourd’hui, mais remontons seulement 20 ans en arrière, et combien d’entre nous avaient entendu parler d’un site web à l’époque ?

Zoom-in

En regardant d’un peu plus près, l’en-tête, la zone de navigation et la partie principale des sites sont composées des mêmes éléments : des images, des formulaires (boutons, champs de saisie, cases à cocher), des zones de texte (qu’on va décomposer en articles, titres, paragraphes, etc), des liens internes (permettant d’accéder à d’autres parties du site) et externes (permettant d’accéder à d’autres sites), des tables, plus récemment des vidéos et des animations, et … et c’est à peu-près tout en fait. Pas besoin d’aller chercher beaucoup plus loin, un site web ça se résume à ça… Tout le talent mis dans la conception de sites Internet revient à inventer une nouvelle recette de cuisine encore meilleure que les précédentes avec les 10 mêmes ingrédients à chaque fois.

Découpage technique

Comment-donc s’assurer d’avoir un site internet qui se différencie des autres, si on ne dispose que de peu d’ingrédients ?

Le secret réside dans deux savoir-faire spécifiques : la mise en page, et la programmation d’interface utilisateur. On s’adresse aux autres, si on veut que ceux-ci soient convaincus, il faut donc leur donner envie de revenir chez nous plus souvent que chez les autres.

Un site Internet se fabrique avec 3 types de fichiers principalement :

  • Des fichiers de contenu (HTML)
  • Des fichiers de mise en page (CSS)
  • Des fichiers de programmation (Javascript)

(Oui, on peut aussi avoir un fichier de contenu qui va pointer sur un seul gros programme ou une animation dans d’autres langages, Flash, Silverlight ou Java par exemple mais ceux-ci sont spécifiques et présentent de gros inconvénients en termes de référencement notamment. De plus, il s’agit d’extensions qui ne sont pas forcément lisibles avec tous les navigateurs, c’est pourquoi je les exclue volontairement. Ils ont eu leur moment de gloire à une époque où le HTML natif était limité et très compliqué à mettre en œuvre pour avoir un rendu identique sur les principaux navigateurs, mais ça c’était avant…)

HTML : le contenu du site internet

Les premiers, les fichiers HTML, sont le point d’entrée de tout site internet. Les serveurs web sont configurés par défaut pour vous proposer un fichier lorsque vous atterrissez sur leur site appellé « index.html ». Ce fichier « index.html » sera le point de départ de votre navigation sur un site. HTML veut dire « HyperText Markup Language » autrement dit, « langage à balises hypertexte ». Ce langage se compose donc de balises (on parle aussi de tags) qui ressemblent à :

<p>Ceci est un paragraphe</p>

CSS : La forme du site internet

Les fichier CSS décrivent la mise en page d’un site internet. CSS veut dire « Cascading Style Sheet », autrement dit « Feuilles de styles en cascade ». Je proposerai à l’occasion une série de tutoriaux sur le CSS, et on aura largement le temps de revenir sur le « Cascading ». Ecrire en CSS l’incantation magique suivante :

p {color: red}

revient à dire « je veux que mes paragraphes soient écrits en rouge ».

J’ai toujours été convaincu que la forme était aussi important que le fond si on veut être lu. (et bien entendu, je ne suis pas cette règle en vous proposant avec ce blog un contenu beaucoup plus étoffé que la présentation :D). En l’occurrence c’est le CSS qui va vous permettre de vous démarquer en vous permettant de définir la position de vos différents éléments HTML, de régler les différences d’affichage de votre site sur un smartphone, une tablette ou un ordinateur.

Javascript : la glue du site internet

Les fichiers Javascript eux, sont les plus compliqués à appréhender. A la différence du HTML et du CSS qui sont des langages dits « descriptifs » – c’est à dire que ce sont en fait des formats de données, Javascript lui est un vrai langage avec une structure se rapprochant de langages procéduraux (tels que C, Pascal, Basic) et objets (comme C++, C#, Java, PHP, Perl). Javascript possède en outre une philosophie proche des langages fonctionnels, adaptés à la gestion d’évènements. Un résumé du charabia de ma dernière phrase : avec Javascript c’est facile de dire « quand on clique sur le bouton Rechercher, on exécute le bout de code associé ». Pour le plaisir, un petit bout de javascript à mettre dans un ficher HTML qui affichera « Hello world ! » à l’ouverture d’une page web :

<script>
    window.onload=function(){
        alert('Hello World')
    };
</script>

Concrètement, à quoi sert le Javascript ?

A tout ce qui n’est pas contenu ou mise en forme : faire le lien avec une base de données serveur (Ajax), à combler les lacunes de tel navigateur qui ne serait pas capable de faire une animation avec du CSS, à vérifier que les données d’un formulaire sont bien conformes à ce qu’on attend, à gérer les clics sur une image, à faire du drag’n’drop dans la fenêtre, à gérer des animations complexes, à piloter les boutons « stop », « pause » et « lecture » d’une vidéo, éventuellement à construire tout votre site internet à partir de rien… Le langage Javascript étant de plus en plus puissant et de plus en plus rapide, on lui confie désormais des taches qui étaient l’apanage des serveurs web par le passé (je reviendrai une autre fois sur le rôle des langages côté serveur tels que PHP, Perl, Ruby on Rails, JSP, etc), ce qui soulage ces derniers ainsi que la connexion internet et permet d’avoir des sites de plus en plus impressionnants.

A suivre …

Je vous proposerai par la suite différents articles d’initiation à la création de site internet en balayant différents aspects : la structure HTML, la mise en page, la théorie des couleurs, une initiation au javascript, se faire trouver par les moteurs de recherche (le référencement), etc.

Comme toujours, n’hésitez-pas à me rejoindre sur Twitter ( http://www.twitter.com/Info_Oise ) et Facebook ( http://www.facebook.com/InformatiqueOise ) si vous voulez vous tenir au courant de mon actualité et des nouveaux articles du blog, et n’hésitez pas à partager mes articles sur les réseaux sociaux ci-dessus.

Laisser un commentaire

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


*

Vous pouvez utiliser ces balises et attributs HTML : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>