Descriptif du travail - Fil de fer TIC-Coach

Projet TIC-Coach – Un assistant-entraîneur numérique Comité Internet Fil de fer

18 février 2013 Page 1

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



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.



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



É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



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.


• 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…



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.


• 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)

Sports

Descriptif du travail - Fil de fer TIC-Coach