Introduction aux Systèmes Interactifs

M1 Informatique
Introduction aux Systèmes Interactifs

Lectures web site

Responsable TD:Jean-Philippe Riviere

Cours: à distance Salle D104, batiment 640 (PUIO)

  1. Lundi 20 janvier, 15h45-17h45
  2. Lundi 27 janvier, 15h45-17h45
  3. Lundi 03 février, 15h45-17h45
  4. Lundi 10 février, 13h30-17h45
  5. Lundi 24 février, 15h45-17h45
  6. Lundi 09 mars, 15h45-17h45
  7. Lundi 16 mars, RAPORTÉ, on vous contactera pour le créneau
  8. Lundi 23 mars, 13h30-17h30
  9. Lundi 30 mars, 15h45-17h45 (dans Discort)
  10. Lundi 06 avril, 13h30-17h30 (dans Discort)
  11. Lundi 20 avril, 13h30-17h30 (dans Discort)


TA 1

JavaScript

Slides

Slides

Editors

Il y a beaucoup d'éditeurs dédiés à HTML/CSS/JavaScript:

Vous pouvez également utiliser des services en ligne tels que JSFiddle.

Running & debugging

Pour exécuter votre webapp, utilisez simplement votre navigateur. Nous recommandons les navigateurs suivants:

Tous les trois ont des outils de debugginf intégrés et une console JavaScript dans laquelle vous pouvez taper des instructions pour essayer des choses:

Resources

HTML5 demos


JavaScript libraries

Tout d'abord, télécharger l'archive contenant les bibliothèques/libraries JavaScript, qu'on utilisera pour les exercices de JavaScript exercises. Les libraries sont:


Exercise 1: Temperature converter

  1. Téléchargez les fichiers du convertisseur de température et placez-les dans le dossier contenant le dossier js contienant les libraries qu'on utilisera.
  2. Modifiez le fichier css afin que la mise en page corresponde à la capture d'écran ci-dessus (vous ajouterez le slider plus tard).
  3. Modifiez la section de script du fichier html pour ajouter le comportement attendu: lorsque vous tapez une valeur de température dans l'un des champs de texte, l'autre champ de texte doit se mettre à jour avec la valeur appropriée.
    Note: Voici comment convertir une valeur Celsius en Fahrenheit: (celsius * 1.8) + 32.
    Tip: Utilisez $(inputSelector).val() pour récupérer ou définir la valeur d'un élément d'entrée. Utilisez parseFloat(string) pour convertir une string en float et isNaN(value) pour vérifier si la valeur a été bien convertie.
  4. Modifiez le code afin que les valeurs soient arrondies à une décimale (par exemple, 15.7 doit être affiché au lieu de 15.66666).
    Tip: Utilisez les fonctions Math.round(number) et Math.pow(number, power).
  5. Ajoutez un slider ui modifie la température Celsius, soit avec un input element en mettant l'attribue type au range ou en utilisant jQueryUI sliders. Assurez-vous que tous les éléments d'interface (sont synchronisés).

Solution of Exercise 1


Exercise 2: Simple drawing application

L'objectif de cet exercice est d'ajouter des fonctionnalités manquantes à une application de dessin Web simple.

  1. Téléchargez les fichiers de drawing app et placez-les dans le dossier contenant le dossier js contienant les libraries qu'on utilisera.
  2. Pour l'instante, seules des formes arbitraires peuvent être dessinées. Editez les écouteurs sur le canvas pour gérer la création de rectangles, cercles et lignes (voir la section dédiée à la création / suppression de formes dans la section header du fichier html).
  3. Ajoutez un raccourci clavier pour chaque outil (par exemple, appuyez sur la touche S pour sélectionner l'outilSelector) en modifiant la section dédiée aux raccourcis clavier. Assurez-vous que le raccourci apparaît dans le tooltip en modifiant l'attribut title dans la sectionhtml.
  4. Modifiez le keyup listener pour laisser les touches fléchées (arrows) de déplacer les formes sélectionnées (c'est-à-dire les traduire dans le sens de la flèche d'un pixel). En outre, lorsque vous appuyez sur les touches fléchées tout en maintenant la touche Shift enfoncée, les formes sélectionnées doivent être translatées de 10 pixels (au lieu de 1 pixel).
  5. Ajoutez un bouton à la barre d'outils qui duplique les formes sélectionnées (utilisez l'élément html button). Ajoutez également un raccourci pour cette action (par exemple appuyer sur la touche «D» duplique les formes sélectionnées) et assurez-vous que le tooltip mentionne ce raccourci. Assurez-vous que les boutons de suppression et de duplication sont désactivés (utilisez l'attribut de bouton disabled) lorsqu'aucune forme n'est sélectionnée, et activés à nouveau lorsqu'une nouvelle sélection est faite.
  6. Rendre l'inspecteur de style visible (voir le body du document html)et modifiez son comportement pour qu'il reflète et modifie les objets sélectionnés. Lors de la sélection de plusieurs formes, l'inspecteur de style doit afficher les valeurs communes (par exemple, si toutes les formes sélectionnées ont la même couleur d'arrière-plan, cela doit apparaître dans l'inspecteur). Voir ce demo pour trouver les evenements à écouter sur le canvas et la documentation de jQuery Simple Color plugin.

Solution of Exercise 2



TA 2 — Interview

On commence la processus de conception centrée-utilisateur pour notre devoir.

En première temps on va organiser des interviews (transparents cours 2&3 et plus des détails sur les Interviews).

En binôme, créez 4 questions à poser pendent vos interviews avec d'utilisateurs potentiels. Demandez à vos utilisateurs de considérer que leur appartement / maison pourrait être intelligent (vous pouvez leur montrer la définition dans le devoir). Votre but est de comprendre des besoins ou des problèmes que les utilisateurs ont, qu'on pourrait aider avec un maison intelligent. Et de clarifier ce que les utilisateurs aimeraient monitoreur, contrôler, quand et comment. Vous pouvez également poser des questions démographiques supplémentaires (âge, sexe, utilisateur de téléphone portable, etc.). Pensez des commencer par des questionnes concrètes et spécifiques (ex., leur domicile actuelle), avant de passe à des questions plus ouvertes. N'oubliez pas à lire les détailes sur les Interviews.

Pendent le TD chaque personne du binôme doit interviewer une autre personne, et doit être interviewé aussi. Prenez des notes claires et détaillées de réponses (ou enregistrez l'audio pour prendre des notes plus tard). Á la fin du TD chaque binome doit avoir des notes de 2 interviews.

Regardez le devoir pour la suite (homework / travail personnel).



TA 3 — Analyse

On continue avec la processus de conception centrée-utilisateur, en analysant les interviews et se préparant pour la conception.

  1. Analyse: Groupez les idées/concepts qui apparaissent dans les quatres interviews (TD et travail personel) qui sont similaires, aussi que des idées/problèmes interessantes que vous identifiez (même s'ils ne sont pas uniques). Utilisez des annotations (e.g., couleurs) pour distinguer les idées differentes, coupez les, et groupés les. Ecrivez les "codes" (titres/noms) des idées principales. Plus des détails sur l'Analyse des Categories (transparents du cous cours 2&3).

  2. Résultats: En binôme, utilisez vos interviews et leur analyses pour construire d'abord un profil utilisateur et deux personas, et ensuite un scenario d'utilisation. Vous pouvez trouver ici plus d'info sur le profil utilisateur et les personas (transparents du cours cours 2&3). Quand cela est fait, utilisez vos interviews pour construire un scenario d'utilisation.

N'oubliez pas de montrer à votre chargé de TD vos devoir de la semaine dernière (ils seront notés !!!).

Regardez le devoir pour la suite (homework / travail personnel).



TA 4 — Conception / Brainstorming

On continue avec les prochaines étaps de la conception centrée-utilisateur, en pensant des idées pour le projet.

  1. Résultats: re-regardez vos résultats, en particuliaire le scenario d'utilisation (si vous n'avez pas fini la semaine dernière, faites-le avant le brainstorming)

  2. Conception: En binôme (ou en 4, suivez les instructions de votre chargé de TD). Menez une session de brainstorming et choisissez votre concept de conception (plus des infos sur brainstorming et concept)

  3. Conception: En binôme, definir votre concept (l'idée du système que vous allez concevoir), vue votre scenario d'utilisation et vos idées de brainstorming.

N'oubliez pas de montrer à votre chargé de TD vos devoir de la semaine dernière (ils seront notés).

Regardez le devoir pour la suite (homework / travail personnel).



TA 5 — Storyboarding

On continue avec les prochaines étaps de la conception centrée-utilisateur, liées au prototypage.

  1. En binôme, construisez un scénario de conception qui fournit une histoire sur la façon dont une (ou plusieurs personnes) utilisera le système. Le focus est sur l'interaction. Plus des infos sur scenario de conception.

  2. En binôme, utilisez vos choix de concept pour construire 2-3 coquis (sketches) qui explorent des idées visuelles pour l'interface. Il faut essayer des differents variations, et choisir l'une que vous aimez le plus. Vous pouvez trouver des informations dans les transparents de cours (transparents cours 2&3).

  3. En binôme, créez un storyboard qui illustre le scenario de conception (plus des infos sur storyboard et sur les transparents de cours 2&3).

N'oubliez pas de montrer à votre chargé de TD vos devoir de la semaine dernière (ils seront notés).

Regardez le devoir pour la suite (homework / travail personnel).



TA 6 — Prototypage et retours utilisateurs

On continue avec prototypage.

  1. En binôme, utilisez vos storyboards pour créer un prototype papier de votre système (transparents cours 2&3).

  2. En binôme, utilisez votre scenario d'utilisation pour definit 2 taches que les utilisateurs doivent pouvoir faire avec votre système. Demandez à un des vos colleagues de faire les taches avec le prototype. Votre but est de trouver des problèmes avec votre conception.

N'oubliez pas de montrer à votre chargé de TD vos devoir de la semaine dernière (ils seront notés).

Regardez le devoir pour la suite (homework / travail personnel).

Pendent les vacances et pariels tenez en compte les retours des utilisateurs (votre evaluation du prototype) et commencez le developement de votre projet.