Le blog à la violette

Au menu aujourd’hui, un peu de vocabulaire d’intégration HTML/webdesign avant de passer aux choses sérieuses :-)

Arborescence L’arborescence d’un site peut être représenté comme le squelette d’un site. Il contient tous les répertoires, sous-répertoires et fichiers d’un site. La page d’acceuil et la feuille de style (CSS) sont généralement situées à la racine du site.
La page d’acceuil s’appelle souvent index.html : ceci est du à la configuration du serveur sur lequel est hébergé le site.

Exemple d’arborescence de type simple

BackOffice (ou interface d’administration)
Interface facilitant les mises à jour d’un site. On y trouve des outils pour ajouter du contenu ou des images (tel que je le fais sur le blog par exemple) de façon dynamique. On peut avoir également accès au statistique du site, des outils pour rédiger et envoyer une newsletter, modérations de forum ou de commentaires… Le BackOffice est souvent développé pour répondre à des besoins spécifiques (on appelle cela un développement personnalisé) des utilisateurs. Elle peut être une application tierce ou être développé en interne ou par une société prestataire.

CSS
Cascading Style Sheet autrement dit une feuille de style.
En HTML, quand on tape un texte et lui donner un certain style (ex : Arial, petite taille, bleu) on code comme ca :

Ca donne ca

Pour chaque élément textuel, on doit donc intégrer une balise font et ses élements associés (la taille, la couleur…). Ce qui alourdi le code de la page, et pour les modification de forme, peut prendre un certain temps.
Lorsque vous avez plusieurs styles à gérer, tel qu’un titre, la mise en forme de paragraphe, la couleur des liens, ect, le mieux est à ce moment la d’utiliser les feuilles de styles :

• Allège le code HTML : une feuille de style peut être externe et appelée sur chaque page HTML
• Facilite les modifications : en modifiant le fichier des CSS, on modifie les styles pour tout le site.

Prenons un exemple qui arrive plus qu’on ne le pense. Vous avez intégré les maquettes du site qu’un client avait commandé. Les maquettes ont été validées et tout et tout. Mais au dernier moment, il veut que la police utilisée ne sont pas une Verdana mais une Times New Roman. Et puis les titres des rubriques il ne les veut plus en Times New Roman, taille 4, noir, mais en Arial, 16 points et en bleu foncé.
Vous souriez, vous souriez, mais le site que vous avez livré fait… mettons 20 pages. On rigole moins la d’un coup car il faut refaire dans le code 20 pages à la main. Soit vous maugréez en modissant le client car il va vous faire passer une nuit blanche, soit vous en avez pour 5 mn en modifiant uniquement la feuille de style :-)

Découpage d’image
Lors de l’intégration d’un site, on découpe les maquettes en plusieurs éléments : logo, boutons, image de fond, ect… Ces éléments sont ensuite optimisés pour l’affichage web. On intégre ensuite les éléments graphiques dans le code HTML.

Intégration
Mise en page des maquettes graphiques à l’aide d’un éditeur HTML.

Layout
En français, présentation ou thème. Je l’appelle aussi pré-maquette : le layout est une sorte d’esquisse de maquette dans laquelle on place les différents éléments du site (bloc de textes, menu, logo et image). Elle aide surtout à déterminer la pertinence de l’ergonomie du site que l’on doit créer.

Maquette
Elle est la synthèse graphique du brief (les doléances du clients). Une fois les maquettes graphiques validées, on peut commencer à les intégrer (via la découpe des images) à l’aide d’un éditeur HTML.

Site dynamique
C’est un site développé avec un langage dynamique (php, asp, .net …) et qui emploie une ou plusieurs bases de données. Un site en Flash ou avec des gifs animés, même si ca bouge de partout n’est donc pas forcément un site dynamique, c’est le language avec lequel un site a été développé qui fait que le site est dymanique ou pas ;-)

Site portail
Site qui sert de point d’entrée sur Internet pour un nombre significatif d’utilisateurs.
Ex : le site de Yahoo!

Site statique
C’est un site développé sans language dynamique (en gros développé uniquement en html). Le site peut contenir des anims Flash ou des vidéos et être totalement statique. Encore une fois, un site qui bouge de partout ou qui clignote peut être structurellement statique.

Site vitrine
Non ce n’est pas le site de la Redoute :-)))
Un site vitrine est un site de type plaquette. On dit encore institutionnel. Il présente un produit ou une société. Le site plaquette est essentiellement graphique. Classiquement, le site plaquette se compose d’une page d’introduction, de quelques pages présentant la société (produits et/ou services) et d’un formulaire de contact. Un site plaquette ne contient pas ou peu de fonctionnalités dynamiques.

Template
En français, modèle ou gabarit. Il sert de forme de référence à partir de laquelle sont créés des objets qui présentent des caractéristiques communes (placement des menus, forme des paragraphes, type de police utilisées).

Walkmap (ou chemin de fer)
La Walkmap sert de point de répérage à l’internaute lorsqu’il se balade sur le site.

Exemple de Walkmap