Responsable TD:Jean-Philippe Riviere
Il y a beaucoup d'éditeurs dédiés à HTML/CSS/JavaScript:
Vous pouvez également utiliser des services en ligne tels que JSFiddle.
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:
Show Develop menu in menu bar
. Dans le menu Develop
qui vient d'apparaître, sélectionnezShow Error Console
.Inspect Element
. Ensuite, cliquez sur l'onglet Console
.Tools
, selectionez litem Web Developer > Web Console
.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:
js
contienant les libraries qu'on utilisera.(celsius * 1.8) + 32
.$(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.15.7
doit être affiché au lieu de 15.66666
). Math.round(number)
et Math.pow(number, power)
.type
au range
ou en utilisant jQueryUI sliders. Assurez-vous que tous les éléments d'interface (sont synchronisés).L'objectif de cet exercice est d'ajouter des fonctionnalités manquantes à une application de dessin Web simple.
js
contienant les libraries qu'on utilisera.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
.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.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.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).
On continue avec la processus de conception centrée-utilisateur, en analysant les interviews et se préparant pour la conception.
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).
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).
On continue avec les prochaines étaps de la conception centrée-utilisateur, en pensant des idées pour le projet.
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)
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)
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).
On continue avec les prochaines étaps de la conception centrée-utilisateur, liées au prototypage.
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.
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).
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).
On continue avec prototypage.
En binôme, utilisez vos storyboards pour créer un prototype papier de votre système (transparents cours 2&3).
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.