Projet TIC-Coach – Un assistant-entraîneur numérique                               Comité Internet                        ...
Projet TIC-Coach – Un assistant-entraîneur numérique                            Comité Internet                           ...
Projet TIC-Coach – Un assistant-entraîneur numérique                                                 Comité Internet      ...
Projet TIC-Coach – Un assistant-entraîneur numérique                                   Comité Internet                    ...
Projet TIC-Coach – Un assistant-entraîneur numérique                                Comité Internet                       ...
Projet TIC-Coach – Un assistant-entraîneur numérique                                 Comité Internet                      ...
Prochain SlideShare
Chargement dans…5
×

Descriptif du travail - Fil de fer TIC-Coach

372 vues

Publié le

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.

Publié dans : Sports
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
372
Sur SlideShare
0
Issues des intégrations
0
Intégrations
2
Actions
Partages
0
Téléchargements
2
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Descriptif du travail - Fil de fer TIC-Coach

  1. 1. Projet TIC-Coach – Un assistant-entraîneur numérique Comité Internet Fil de ferMise en contexteAvant de demander à un programmeur de se construire le site, il est important de définir le « Fil defer » du site.Le fil de fer est en quelque sorte le plan de construction du site et doit répondre aux divers besoins etcontraintes 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égrationde l’information) doivent être considérés.Ultimement, le projet vise à permettre l’utilisation du site TIC-Coach dans les gymnases, à partird’une tablette. Le site devra donc être développé pour optimiser l’utilisation à partir d’un formatd’image 1024x768 pixels. La programmation et l’administration du site se fera sur une plateformeWordpress; 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 descriptionsSite InternetUn site Internet, se compose de pages et d’articles, s’imbriquant dans une complexité croissante. Lespages donnent une forme au site tandis que les articles permettent d’afficher l’information pour unthème précis.Les pages permettent de définir l’organisation générale du contenu, à commencer par un menugénéral et un liste de catégories; ces catégories, permettant au navigateur de d’articles permettantde 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.com18 février 2013 Page 1
  2. 2. Projet TIC-Coach – Un assistant-entraîneur numérique Comité Internet Fil de ferDans l’ordre, tout site requiert une page d’accueil. Celle-ci est composée d’un entête présentant lemenu 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çuspé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 1024pixels par 768 pixels, c’est-à-dire qu’il n’y aura pas de marge ni de barre de défilement. Un défiparticulier concerne donc l’agencement des vidéos, des informations textes qui y sont associées etdes é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. 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 pagesPAGE 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ées18 février 2013 Page 3
  4. 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 voletsPAGE 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, cest-à-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 de18 février 2013 Page 4
  5. 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. 6. Projet TIC-Coach – Un assistant-entraîneur numérique Comité Internet Fil de ferPAGE 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

×