3.1 Partie publique Frontend

Si vous analysez la page, vous découvrez des régions distinctes qui correspondent à autant de fonctions. Le choix d’implanter des données d’exemples lors de l’installation permet de visualiser l’effet de ces différentes fonctions.

Pour simplifier la découverte, nous avons ajouté des légendes aux différentes sections, dans la fi gure
suivante.

Figure 3.1 Structure de la page d’accueil du site d’exemple.

L’art de la conception Web a comme objectif de permettre au visiteur de repérer le plus vite possible
les éléments essentiels, en ignorant dans un premier temps ce qui l’est moins, en somme d’organiser
le placement des informations de façon logique, agréable et facile à appréhender. Le résultat est
toujours un compromis entre richesse fonctionnelle et esthétique.

L’architecture d’une page Web peut faire penser à un journal ou à un portail comme celui de Yahoo!
ou de Wanadoo. Des colonnes à gauche et à droite proposent des encadrés (modules) aux contenus
prédéterminés. La partie centrale (Main Body) reçoit les informations.

La mise en page est définie par un template (modèle). Vous pouvez changer de modèle sans changer
de contenu ou bien modifier le template courant, souplesse que la presse quotidienne envie au Web.

Découvrons la maquette d’exemple. Elle contient cinq catégories de sections :

• des menus ;
• des contenus ;
• des publicités ;
• des fonctions complémentaires ;
• des éléments décoratifs.

3.1.1 Les menus

Les menus doivent permettre au visiteur de naviguer sur le site le plus aisément possible. Il existe
des menus différents selon les besoins. Joomla! propose dans l’exemple six menus prédéfinis, et
vous pouvez en ajouter d’autres ou en masquer certains. À vrai dire, un des menus n’est pas visible
dans l’exemple. Il s’agit du type usermenu, qui n’est visible que par les utilisateurs enregistrés une
fois qu’ils ont ouvert une session.

Le menu supérieur (topmenu)

Figure 3.2 Le menu supérieur.

Joomla! propose tout en haut de page un menu horizontal dont le nom technique est topmenu (voir
Figure 3.2). Il doit permettre au visiteur d’accéder depuis n’importe quelle page aux contenus essentiels : retour à la page d’accueil, actualités, contact et liens.

Le menu principal (mainmenu)

Le menu principal (nom technique mainmenu) est le moyen de navigation principal de toute page
(voir Figure 3.3). Ce menu doit toujours proposer un lien pour revenir à la page d’accueil (Home) et se trouver au même endroit sur toutes les pages. Il participe au confort de la visite en évitant à
l’utilisateur de se perdre dans le dédale de pages. Vous disposez aussi de la technique des miettes de
pain. (breadcrumbs) Elle consiste en liens déposés sur les pages pour revenir en arrière dans la navigation ou se diriger vers des sections apparentées à la page actuelle.

Figure 3.3 Le menu principal.

Les menus complémentaires (othermenu)

Vous pouvez ajouter un menu complémentaire (nom technique othermenu) en différents points
prédéfinis (des positions de modules). L’ajout de tels menus dépend des particularités des pages. Un
site de e-commerce aura par exemple souvent besoin de menus complémentaires.

Figure 3.4 Un menu complémentaire.

3.1.2 Les contenus

Les voici enfin, ces contenus ! Ce sont les informations à diffuser et à administrer.

Qu’est-ce qu’un contenu ?

Un contenu peut prendre la forme statique d’un communiqué, d’un article rédactionnel ou d’une
page d’explications. Il peut aussi s’agir de données générées à la demande, donc dynamiques, comme
les résultats d’une recherche dans Google, une liste d’articles dans un cybermagasin ou un site de
vente aux enchères.

Les contenus peuvent aussi être modifiables par tout visiteur. C’est le cas de l’encyclopédie libre
Wikipedia (http://www.wikipedia.fr/) dont l’approche communautaire se nomme d’ailleurs Wiki.
Cette liberté de modifier n’importe quel contenu semble jusqu’à présent fonctionner. Personne ne
tente de rédiger ni de modifier du contenu sans avoir les compétences requises (hormis quelques
débats passionnés relatifs à la structure ou aux contenus)

L’exact contraire de l’approche Wiki est le contenu statique. Une fois rédigé, il reste valable tel quel
pendant une période de temps assez longue, comme un livre imprimé. Si le sujet abordé est en évolution perpétuelle (comme c’est le cas de ce livre), certains aspects du contenu statique deviennent
rapidement obsolètes. Il offre néanmoins l’avantage de constituer un point de référence et une
présentation complète et didactique du thème. L’auteur de contenus doit les mettre à jour, ce qui
constitue une forme de gestion de contenus, les outils étant dans ce cas par exemple Joomla! et
OpenOffice.org.

Les prospectus, dépliants, communiqués d’entreprise et modes d’emploi sont par nature statiques.
Ils sont destinés à documenter un objet concret ou un événement et deviennent obsolètes lorsque
l’objet n’est plus en usage ou que l’événement est passé.

Les anciens sites Web ne proposaient que des contenus statiques, mais Internet accélère le temps. Ce
qui est toléré, voire souhaitable, pour un livre, une notice et tout autre document imprimé (ce qui y
est décrit devient un lot de connaissances partagés entre tous les lecteurs, une source en termes de
formation et de recrutement) sera considéré comme inacceptable sur un site Web. Il est très dommageable pour l’image d’une entreprise de proposer un site Web statique dont les contenus n’ont pas évolué depuis des années, avec un joli bouton « Powered by... » menant à un logiciel de création qui n’a plus cours depuis des lustres.

Les possibilités de mise en forme des contenus sont très variées et dépendent d’abord des contraintes
de bande passante (vitesse d’accès), des capacités du terminal (ordinateur, assistant personnel, téléphone), donc des possibilités du visiteur. Vous devez par conséquence vous soucier d’abord de votre cible d’audience. Comment la déterminer ?
Une règle très simple s’impose :

L’essentiel, c’est le contenu !

C’est le contenu qui fait l’audience. Les agences de publicité Web sourient de ce postulat puis retournent à leur conception de sites Web à la chaîne. Après tout, les milliards dépensés en publicité pour des épinards surgelés et des automobiles sont la meilleure preuve qu’il est possible de communiquer effi cacement sans attirer l’attention par la qualité du contenu.

Le principe consistant à considérer le contenu comme déterminant reste valable, l’expérience le
prouve. Si vous n’avez rien à dire ni à proposer, personne n’aura envie de vous lire ni de vous écouter
si vous ne comptez pas consacrer des millions à attirer l’attention par la publicité. C’est peine
perdue que de peaufiner l’aspect visuel de vos pages pour le plus grand nombre de périphériques
possible si ces pages sont quasi vides. Personne ne viendra vous voir.

Première page ou page d’accueil (Frontpage)

C’est sur cette page que sont présentés les articles mis en vedette.

Figure 3.5 La page d’accueil d’un site.

Tout contenu a comme attributs le nom de l’auteur, la date de rédaction, le titre, le chapeau (introduction) et parfois des illustrations. Le chapeau doit être rédigé pour donner envie au visiteur de lire la suite en cliquant sur le lien automatique Lire la suite.... À chaque article peuvent être associées plusieurs autres commandes : imprimer, accéder au fichier PDF, envoyer comme courriel à un ami, etc.

Derniers articles/Articles les plus consultés

Les articles peuvent se présenter sous différentes formes mais, dans tous les cas, les visiteurs s’intéressent d’abord aux plus récentes informations et à celles qui sont les plus lues (voir Figure 3.6).

Figure 3.6 Derniers articles/Articles les plus consultés.

Le modèle d’exemple prévoit une section dans laquelle sont affi chés les titres des cinq articles les
plus récents (LATEST NEWS) et une autre qui Affiche les titres des cinq articles les plus consultés
(POPULAR). Joomla! gère en effet des compteurs de lecture pour tous les articles qui sont incrémentés lors de chaque accès à l’enregistrement d’un contenu dans la base de données.

3.1.3 La publicité

Si votre site génère assez d’affluence par l’intérêt de ses contenus, vous pouvez envisager de louer
un espace publicitaire. La principale forme de publicité Web est la bannière, une image rectangulaire
à l’italienne (plus large que haute) au format .GIF, .JPG, .PNG ou .SWF. L’attrait visuel de la bannière
doit inviter le visiteur à cliquer sur l’image pour se rendre sur le site de l’annonceur, et donc quitter
le vôtre. Si vous acceptez cela, il suffit d’utiliser la section réservée à cet effet dans le modèle de page
en laissant clairement comprendre qu’il s’agit d’une publicité.

Section de bannière

La section de bannière accepte des liens texte (voir Figure 3.7) ou des graphiques (voir Figure 3.8).
Le format de bannière graphique devenu standard est un bandeau de 468 pixels de large sur 60 pixels
de haut.

3.1.4 Les fonctions

Les fonctions d’un site Web sont les éléments interactifs. Dans Joomla!, elles correspondent à des
modules. Un module est un élément qui occupe un certain espace sur les pages et qui remplit une
certaine fonction dynamique.

Figure 3.7 La section de bannière avec des liens texte.

Figure 3.8 La section de bannière avec une bannière graphique.

Section de connexion (Login Form)

Ce module permet de trier les visiteurs du site en deux catégories : ceux qui restent anonymes, et
ceux qui désirent devenir utilisateurs réguliers et qui ont alors accès à la partie privative du site. Ces
utilisateurs doivent pouvoir se faire connaître en créant un compte (en s’enregistrant) puis pouvoir
ouvrir une session lors de leurs prochaines visites. Il faut aussi prévoir le cas des utilisateurs qui
oublient leur mot de passe. Le module Login prend en charge toutes ces situations.

Figure 3.9 Le module d’ouverture de session Login Form.

Module de sondage (Polls)

Puisque vos contenus sont a priori ciblés, il est intéressant de demander régulièrement à vos visiteurs
de donner leur avis sur un sujet qui les concerne. C’est la solution la plus simple pour savoir
notamment ce qu’ils pensent de votre site.

Figure 3.10 Le module de sondage (Polls).

Joomla! intègre un module de sondage qui Affiche un pavé sur la page d’accueil.

Le module de témoin de présence (Who’s online ?)

Cet autre module est clairement orienté communauté. Le visiteur apprécie de savoir combien de
personnes sont actuellement en train de visiter le même site. Les visiteurs anonymes sont distingués
des utilisateurs enregistrés.

Figure 3.11 Le module de témoin de présence (Who’s online ?).

Réfléchissez avant d’activer l’affichage de ce genre de module sur votre site. Si vous prétendez dans le contenu que vous êtes site français d’échanges de sonneries pour portables le plus important, et que les visiteurs voient qu’ils sont seuls sur le site, vous perdez toute crédibilité et donc toute chance de réaliser votre rêve.

En revanche, si vous avez presque en permanence 10 à 20 visiteurs en ligne, le fait de le signaler augmente l’intérêt du site et son dynamisme.

Fils d’actualité (NewsFeeds)

Les fils d’actualité sont de plus en plus courants. Il s’agit de sélections de vos contenus pouvant être
envoyés à ceux qui s’y abonnent. C’est en quelque sorte du contenu sans son habillage. Le module d’abonnement Syndicate sait exploiter plusieurs standards de Feeds. Nous en reparlons au Chapitre 10.

Figure 3.12 Le module d’abonnement Syndicate.

Le champ de recherche

Un autre élément systématique que tout visiteur s’attend à trouver sur votre site est la fonction de
recherche locale. Cette fonction est souvent disponible sur les sites Web, mais il n’est pas rare
qu’elle soit incomplète, c’est-à-dire qu’elle ne scrute pas tous les contenus. Dans Joomla!, absolument
toutes les pages sont prises en compte.

Il suffit de cliquer dans le champ de saisie, d’indiquer le critère et de valider avec la touche ENTRÉE.
Vous obtenez en réponse une liste de liens dans lesquels le critère est mis en exergue.

Figure 3.13 Le module de recherche.

3.1.5 Les éléments décoratifs

Après avoir découvert les contenus, les modules et les fonctions, voyons la partie visuelle, celle qui
donne son identité, sa personnalité au site, qu’il s’agisse d’une entreprise ou d’un particulier.

L’aspect visuel est déterminé par le modèle (template) qui joue le rôle d’une structure invisible dans
laquelle sont versés les contenus et les modules à des positions prédéfinies. afin que les préférences
de chacun soient satisfaites, le modèle en vigueur sur un site peut être changé avec les mêmes contenus. Vous pouvez par exemple adopter un modèle en hiver et un autre en été ou un modèle particulier pendant la coupe du monde de football. Nous abordons la création des modèles au Chapitre 13.

L’essentiel d’un modèle est de définir des zones pour les contenus, une combinaison de couleurs, un
ou plusieurs logos, un choix de polices pour les textes, le tout en sorte d’offrir un résultat cohérent
et attrayant. Le modèle d’exemple comporte deux logos et un pied de page.

Figure 3.14 Exemple de logo.

3.1.6 Le point de vue global

Après ce tour d’horizon concret, vous devinez sans doute que la maintenance et la mise à jour d’un
tel site peuvent représenter un travail non négligeable. Joomla! simplifi e ces tâches autant que faire
se peut. L’essentiel est de conserver un point de vue global sur le site.