Les bases à savoir pour construire le fil de fer d'un site Internet destiné au projet TIC-Coach. Le site Internet doit être accessible à partir d'une tablette en gymnase et offrir un large éventail de vidéos permettant d'améliorer la performance sportive des athlètes.

1. Projet TIC-Coach – Un assistant-entraîneur numérique Comité Internet
Fil de fer
Mise en contexte
Avant de demander à un programmeur de se construire le site, il est important de définir le « Fil de
fer » du site.
Le fil de fer est en quelque sorte le plan de construction du site et doit répondre aux divers besoins et
contraintes qui influenceront l’utilisation du site par les usagers. Les aspects ergonomique (facilité
de navigation), graphique (couleurs, police de caractère) et informationnel (disposition et intégration
de l’information) doivent être considérés.
Ultimement, le projet vise à permettre l’utilisation du site TIC-Coach dans les gymnases, à partir
d’une tablette. Le site devra donc être développé pour optimiser l’utilisation à partir d’un format
d’image 1024x768 pixels. La programmation et l’administration du site se fera sur une plateforme
Wordpress; celle-ci, de par sa structure, imposera des limites et des façons de faire au programmeur,
mais également pour ceux qui devront garnir le site avec les vidéos et les descriptions
Site Internet
Un site Internet, se compose de pages et d’articles, s’imbriquant dans une complexité croissante. Les
pages donnent une forme au site tandis que les articles permettent d’afficher l’information pour un
thème précis.
Les pages permettent de définir l’organisation générale du contenu, à commencer par un menu
général et un liste de catégories; ces catégories, permettant au navigateur de d’articles permettant
de classer l’information, que ce soit des vidéos, des photos ou du texte.
Fig. 1 : Détail des composantes d’un site Internet – www.sadcao.com
18 février 2013 Page 1

2. Projet TIC-Coach – Un assistant-entraîneur numérique Comité Internet
Fil de fer
Dans l’ordre, tout site requiert une page d’accueil. Celle-ci est composée d’un entête présentant le
menu général; il sera repris pour toutes les pages du site.
À noter que contrairement à un site Internet comme présenté à la figure 1, un site conçu
spécifiquement pour une tablette présente 2 particularités.
1. Les sites Internet ont une marge de part et d’autre de la section d’affichage. Cette marge
est requise pour s’adapter aux configurations d’affichage des navigateurs (Exploreur,
Chrome, Firefox, Safara, Opera…).
2. Une barre de défilement permet d’accéder à plus d’information en déplaçant la zone
d’affichage vers le bas.
Afin de faciliter l’utilisation du site, toute l’information devra apparaître dans un même plan de 1024
pixels par 768 pixels, c’est-à-dire qu’il n’y aura pas de marge ni de barre de défilement. Un défi
particulier concerne donc l’agencement des vidéos, des informations textes qui y sont associées et
des éléments de navigation comme le menu principal et les catégories.
ENTÊTE
L’entête doit permettre de bien identifier le site et offrir un indice quant à la visualisation de
l’information. Celle-ci doit permettre de se référer au mode d’organisation des données, qui,
dans le plan de développement de l’athlète, est basé sur la poussée de croissance de
l’athlète.
Le menu général présentera donc les catégories par classe d’âge, qui varie pour tous les
athlètes mais également entre gars/filles.
Fig. 2 – Exemple d’entête Phénix
Une fois définie, l’entête sera répété pour toutes les pages suivantes. Sa présentation
visuelle doit donc être attirante et facile à maîtriser. Pour quelqu’un navigant sur le site,
cliquer sur le logo devrait permettre de revenir automatiquement à la page d’accueil pour
repartir une nouvelle recherche.
La page d’accueil permettra d’utiliser le reste de la page afin de présenter le site, pouvant
combiner un jeu de photo, vidéo et de texte.
18 février 2013 Page 2

3. Projet TIC-Coach – Un assistant-entraîneur numérique Comité Internet
Fil de fer
Fig. 3 – Exemple d’utilisation d’un entête sur 3 cadres de pages et des boutons de catégories sur 2
cadres.
(Gauche : Page d’accueil; Centre : Page de la vidéothèque; Droite : Page de visionnement)
ÉLÉMENTS À DÉTERMINER POUR L’ENTÊTE
• La phrase permettant l’ « appel à l’action ».
Plutôt que « Choisissez votre groupe d’âge », d’autres versions pourraient être plus
significatives tel que « Débutez votre entraînement »
• Couleur ou motif de l’arrière-plan (ici, en bleu)
• Identifiant – Logo dans un cadre ou logo en arrière-plan?
• Type de bouton pour le Menu général des groupes d’âge
• Caractère utilisé pour les boutons et l’information du groupe
• Largeur de la section Logo VS Menu général; structurera les autres pages
• La catégorie d’âge sélectionné demeure saisie lors de la navigation dans les autres pages
PAGE D’ACCUEIL
La page d’accueil doit offrir l’information à l’internaute pour qu’il se repère et saisisse la
façon de naviguer sur le site.
Il convient de trouver une façon de disposer l’information graphique et textuelle de sorte à
ce que l’œil se repère rapidement et à la bonne place.
À chaque fois que l’internaute arrivera sur notre site, c’est cette page qui l’accueillera. Il est
vrai, on n’y fera souvent qu’y passer; toutefois, il faut qu’elle soit agréable et valorise l’image
des Phénix.
Pour le texte, l’œil se fatigue parfois plus rapidement lorsque l’arrière-plan et les lettres ont
des couleurs assez similaires… De plus, l’utilisation de cadres structure le champ visuel.
Trois volets semblent importants à présenter :
1. L’organisation des Phénix
2. Le plan de développement de l’athlète - Basketball
3. La description du projet, sa réalisation et ses retombées
18 février 2013 Page 3

4. Projet TIC-Coach – Un assistant-entraîneur numérique Comité Internet
Fil de fer
ÉLÉMENTS À DÉTERMINER
• Disposition des informations visuelles et graphiques sous l’entête
• Couleur ou motif de l’arrière-plan (ici, en bleu)
• L’utilisation d’une image pour cadrer l’information des 3 volets présentés
• L’utilisation d’un cadre regroupant l’image et le texte pour le découper de l’arrière-plan
• Caractère utilisé pour les titres et l’information de chacun des volets
PAGE DE LA VIDÉOTHÈQUE
Après avoir sélectionné un groupe d’âge, 4 boutons de catégories remplaceront l’information
de la page d’accueil sous l’entête. Ces boutons demeureront visibles pour la navigation
future, que l’on passe d’une catégorie à une autre dans la page, ou encore lorsqu’un vidéo
est sélectionné puis affiché.
En activant une catégorie, une vidéothèque s’affichera dans la zone d’affichage principale,
c'est-à-dire toute la partie sous le menu principal. Les vidéos pourront être présentés sous
forme d’image miniature avec le début du titre, pour les diverses catégories, et un code de
couleurs permettra d’identifier le niveau de difficulté de l’exercice.
Selon les recommandations du programmeur, une barre de défilement verticale pourrait être
utilisée si plusieurs types de vidéos sont requis. Une autre solution serait d’ajouter des sous-
catégories, affichables lorsque l’on clique sur le bouton. Il deviendrait alors possible de
18 février 2013 Page 4

5. Projet TIC-Coach – Un assistant-entraîneur numérique Comité Internet
Fil de fer
cliquer la sous-catégorie « Dribble » et, d’en l’affichage, ne voir que les exercices directement
associés.
Idéalement, il faudrait définir le code de couleur pour les utilisateurs du site qui ne sont pas
familier.
ÉLÉMENTS À DÉTERMINER
• Disposition et forme des boutons
• Polices de caractère utilisées (Bouton, Titres, identifiants…)
• Code des couleurs associées aux miniatures des vidéos
• Légende explicative pour le code de couleurs
• Nombre de miniatures par ligne
• Utilisation d’un titre sous les miniatures
• Distinction entre les sous-catégories (expl : Dribble > Dribble 2 balles/Dribble
cônes/dribble dirigé…)
• L’utilisation d’un cadre regroupant l’image et le texte pour le découper de l’arrière-plan
• Caractère utilisé pour les titres et l’information de chacun des volets
• Utilisation ou non de barres de défilement
• Le bouton de la catégorie sélectionnée demeure enfoncé; les autres sont gris…
18 février 2013 Page 5

6. Projet TIC-Coach – Un assistant-entraîneur numérique Comité Internet
Fil de fer
PAGE DE VISIONNEMENT
Cette 3e page est l’endroit où les vidéos seront regardées et où l’information est la plus
concentrée de tout le site. Toutefois, l’entête demeure la même, comme toujours, et les
catégories seront-elles aussi devenues fixes.
L’élément principal est, bien entendu, la vidéo. Toutefois, cet élément doit être associé à un
bloc de texte permettant de comprendre l’objectif de la vidéo, ses particularités et d’autres
informations pertinentes.
Considérant le format offert par You Tube, une section demeurera disponible dans la colonne
de l’entête; celle-ci se prêterait bien pour afficher des miniatures d’exercices semblables et
complémentaires à celui en cours de visionnement. De plus, cela offrirait une 2e façon de
chercher « de quoi de neuf » sans passer par la recherche formelle par catégorie. Puisque
celle-ci demeure dans la même zone d’affichage que les miniatures de la vidéothèque, l’œil
pourrait facilement comprendre son utilisation.
ÉLÉMENTS À DÉTERMINER
• Disposition du contenu descriptif du vidéo
• Polices de caractère utilisées (Titres, sous-titres, corps de texte…)
• Disposition des miniatures des vidéos référencées
• Légende explicative pour le code de couleurs
• Nombre de miniatures par ligne
• Utilisation ou non d’un titre sous les miniatures (voir Page vidéothèque)
• Utilisation ou non de barres de défilement (Descriptif et/ou référence vidéo)
18 février 2013 Page 6