Post on 17-Aug-2015
interaction design
19
LA CONDITION DE L'UTILISATEURInteraction design détermine la condition humaine. Demande-t-on à notre utilisateur de mettre son bleu de travail, ou son masque de batman? Veut-on qu'il s'immerge dans l'histoire, ou qu'il soit un exécutant de tâches emmerdantes ?
jeudi 9 janvier 14
interaction design: quel rôle donne-t-on à l 'utilisateur dans le spectacle?
22
OU SUR LE WEB: INTERFACES D'ÉCRITURE
jeudi 9 janvier 14
le rôle écrit pour l'utilisateur
LE RÔLE DE L'UTILISATEUR
25
IAWRITER / MEDIUM.COM
"l'écriture, c'est toute ta vie."
MS WORD / WORDPRESS
"l'écriture, c'est difficile."
jeudi 9 janvier 14
le rôle écrit pour l'utilisateur
LE RÔLE DE L'UTILISATEUR
25
IAWRITER / MEDIUM.COM
"l'écriture, c'est toute ta vie."
MS WORD / WORDPRESS
"l'écriture, c'est difficile."
Ecrivain
jeudi 9 janvier 14
le rôle écrit pour l'utilisateur
LE RÔLE DE L'UTILISATEUR
25
IAWRITER / MEDIUM.COM
"l'écriture, c'est toute ta vie."
MS WORD / WORDPRESS
"l'écriture, c'est difficile."
Ecrivain Secrétaire ?
jeudi 9 janvier 14
32
un «site interactif» est un pléonasme. N’utilise pas cette expression ou tu auras l’air #wtf.
web design
jeudi 9 janvier 14
33
un «site interactif» est un pléonasme. N’utilise pas cette expression ou tu auras l’air #wtf.
Nous ne faisons pas des sites interactifs.
web design
jeudi 9 janvier 14
34
un «site interactif» est un pléonasme. N’utilise pas cette expression ou tu auras l’air #wtf.
Nous ne faisons pas des sites interactifs.
Nous ne faisons pas des sites internet.
web design
jeudi 9 janvier 14
35
Nous racontons des histoires
Nous ne faisons pas des sites internet.
un «site interactif» est un pléonasme. N’utilise pas cette expression ou tu auras l’air #wtf.
Nous ne faisons pas des sites interactifs.
web design
jeudi 9 janvier 14
36
Nous racontons des histoires
et construisons des expériences
Nous ne faisons pas des sites internet.
un «site interactif» est un pléonasme. N’utilise pas cette expression ou tu auras l’air #wtf.
Nous ne faisons pas des sites interactifs.
web design
jeudi 9 janvier 14
37
Nous racontons des histoires
et construisons des exxxpériences
Nous ne faisons pas des sites internet.
un «site interactif» est un pléonasme. N’utilise pas cette expression ou tu auras l’air #wtf.
Nous ne faisons pas des sites interactifs.
web design
jeudi 9 janvier 14
38
et construisons des expériences
sur un médium interactif
Nous racontons des histoiresNous ne faisons pas des sites internet.
un «site interactif» est un pléonasme. N’utilise pas cette expression ou tu auras l’air #wtf.
Nous ne faisons pas des sites interactifs.
web design
jeudi 9 janvier 14
39
connecté à internet.
sur un médium interactifet construisons des expériences
Nous racontons des histoiresNous ne faisons pas des sites internet.
un «site interactif» est un pléonasme. N’utilise pas cette expression ou tu auras l’air #wtf.
Nous ne faisons pas des sites interactifs.
web design
jeudi 9 janvier 14
La scène: de l'espace de l'écran
INTER.FACES / INTER.ACTIONS
50
L’écran = la scène
Le curseur = notre invité, l’utilisateur
jeudi 9 janvier 14
51
http://www.dino-zara.com/
un canevas infiniperçu via un viewport (hublot) délimitant
un espace fini.
jeudi 9 janvier 14
51
http://www.dino-zara.com/
un canevas infiniperçu via un viewport (hublot) délimitant
un espace fini.
jeudi 9 janvier 14
l'espace de la scène
CONSTRUIRE L’EXPÉRIENCE
• réfléchir à l ‘espace de l’écran dans sa globalité:
• «viewport» («hublot») vs. «canvas» (ex: http://www.dino-zara.com/ )
• en 2D (X, Y) : zones (ex: http://madethought.com/ )
• en 3D ( X, Y, Z: profondeur): couches (ex: www.balhar.com )
• en 4D (X, Y, Z, time) :réfléchir à la séquence des écrans et des interactions (clic, mouseover, etc.). Construire l’expérience. (ex: http://wearehunted.com/ )
52
jeudi 9 janvier 14
x
ycanevas illimité : le "document"
viewport46
220
ESPACE À 2 DIMENSIONS
dimension 2
jeudi 9 janvier 14
x
ycanevas illimité : le "document"
viewport
zones
46
220
ESPACE À 2 DIMENSIONS
dimension 2
jeudi 9 janvier 14
x
ycanevas illimité : le "document"
viewport
zones
46
220
ESPACE À 2 DIMENSIONS
dimension 2
jeudi 9 janvier 14
TEMPS: GRAPHIQUE DU PLAISIR DÉÇU
58
qualité perçue
temps
arrivée sur le
site
ce site a l’a
ir bien
« je m’en vais »
tiens, ce bouton ne marche pas
que de fautes d’orth
ographe!
pas terrib
le, je je
tte
« je l’engage »
00:01 00:08 00:17 00:23 00:29
seuil de conversion
seuil d’abandon
inter.face: l’espace de l’écran: 4D
jeudi 9 janvier 14
TEMPS: GRAPHIQUE DU PLAISIR ATTEINT
59
qualité perçue
temps
arrivée sur le
site
ce site a l’a
ir bien
« je m’en vais »
ah ah! chouette
idée!
quelle créativité!
il me semble intéressant, c
ontactons-le
« je l’engage »
00:01 00:08 00:17 00:23 00:29
seuil d’abandon
seuil de conversion
inter.face: l’espace de l’écran: 4D
jeudi 9 janvier 14
gestion de l'espace de l'écran
EXEMPLES DE GESTION CRÉATIVE DE L’ESPACE• Scrolling _ http://wicky.nillia.ms/headroom.js/
• Simon Collison (UI réactif)http://www.colly.com/
• LAb[au] (grille: alt + G )http://lab-au.com
• Impress.js (css animations, gestion de l’écran)http://bartaz.github.com/impress.js/
• Toujours pas compris? http://www.thismanslife.co.uk/projects/lab/responsiveillustration/
60
jeudi 9 janvier 14
63
http://www.frankchimero.com/writing/2012/everything-was-made/
jeudi 9 janvier 14
Des effets.
65Le secret des effets: ne les utiliser que si ils augmentent l'expérience du sens. Pas de poudre aux yeux.
Just because you can doesn't mean you should.
– English proverb.
jeudi 9 janvier 14
onkeypresskeydownkeyup
clickhovermousedownmouseupmousemove
71
événements à votre disposition
js: setTimeOut()css: animation keyframe
window scrollDomreadyloading
waypoints.js...
jeudi 9 janvier 14
QUELLES SONT LES INPUTS À NOTRE DISPOSITION?
72
inter.actions: le dialogue homme-machine
http://devdocs.io/
jeudi 9 janvier 14
QUELLES SONT LES INPUTS À NOTRE DISPOSITION?• souris
72
inter.actions: le dialogue homme-machine
http://devdocs.io/
jeudi 9 janvier 14
QUELLES SONT LES INPUTS À NOTRE DISPOSITION?• souris
• click, mouseover, mouseenter, mousemove, mouseleave...
72
inter.actions: le dialogue homme-machine
http://devdocs.io/
jeudi 9 janvier 14
QUELLES SONT LES INPUTS À NOTRE DISPOSITION?• souris
• click, mouseover, mouseenter, mousemove, mouseleave...
• clavier
72
inter.actions: le dialogue homme-machine
http://devdocs.io/
jeudi 9 janvier 14
QUELLES SONT LES INPUTS À NOTRE DISPOSITION?• souris
• click, mouseover, mouseenter, mousemove, mouseleave...
• clavier
• keyup, keydown, keystroke
72
inter.actions: le dialogue homme-machine
http://devdocs.io/
jeudi 9 janvier 14
QUELLES SONT LES INPUTS À NOTRE DISPOSITION?• souris
• click, mouseover, mouseenter, mousemove, mouseleave...
• clavier
• keyup, keydown, keystroke
• tactile
72
inter.actions: le dialogue homme-machine
http://devdocs.io/
jeudi 9 janvier 14
QUELLES SONT LES INPUTS À NOTRE DISPOSITION?• souris
• click, mouseover, mouseenter, mousemove, mouseleave...
• clavier
• keyup, keydown, keystroke
• tactile
• toucher, swipe, «tap»
72
inter.actions: le dialogue homme-machine
http://devdocs.io/
jeudi 9 janvier 14
QUELLES SONT LES INPUTS À NOTRE DISPOSITION?• souris
• click, mouseover, mouseenter, mousemove, mouseleave...
• clavier
• keyup, keydown, keystroke
• tactile
• toucher, swipe, «tap»
• autre?
72
inter.actions: le dialogue homme-machine
http://devdocs.io/
jeudi 9 janvier 14
QUELLES SONT LES INPUTS À NOTRE DISPOSITION?• souris
• click, mouseover, mouseenter, mousemove, mouseleave...
• clavier
• keyup, keydown, keystroke
• tactile
• toucher, swipe, «tap»
• autre?
• manipulation du DOM _ voir jquery : live(), ready(), window.resize(), etc.
72
inter.actions: le dialogue homme-machine
http://devdocs.io/
jeudi 9 janvier 14
QUELLES SONT LES INPUTS À NOTRE DISPOSITION?• souris
• click, mouseover, mouseenter, mousemove, mouseleave...
• clavier
• keyup, keydown, keystroke
• tactile
• toucher, swipe, «tap»
• autre?
• manipulation du DOM _ voir jquery : live(), ready(), window.resize(), etc.
• Taille de la fenêtre: (media queries)
72
inter.actions: le dialogue homme-machine
http://devdocs.io/
jeudi 9 janvier 14
QUELLES SONT LES INPUTS À NOTRE DISPOSITION?• souris
• click, mouseover, mouseenter, mousemove, mouseleave...
• clavier
• keyup, keydown, keystroke
• tactile
• toucher, swipe, «tap»
• autre?
• manipulation du DOM _ voir jquery : live(), ready(), window.resize(), etc.
• Taille de la fenêtre: (media queries)
• écoulement du temps (setTimeout, enterFrame,...)
72
inter.actions: le dialogue homme-machine
http://devdocs.io/
jeudi 9 janvier 14
QUELLES SONT LES INPUTS À NOTRE DISPOSITION?• souris
• click, mouseover, mouseenter, mousemove, mouseleave...
• clavier
• keyup, keydown, keystroke
• tactile
• toucher, swipe, «tap»
• autre?
• manipulation du DOM _ voir jquery : live(), ready(), window.resize(), etc.
• Taille de la fenêtre: (media queries)
• écoulement du temps (setTimeout, enterFrame,...)
• webcam (réalité augmentée)
72
inter.actions: le dialogue homme-machine
http://devdocs.io/
jeudi 9 janvier 14
QUELLES SONT LES INPUTS À NOTRE DISPOSITION?• souris
• click, mouseover, mouseenter, mousemove, mouseleave...
• clavier
• keyup, keydown, keystroke
• tactile
• toucher, swipe, «tap»
• autre?
• manipulation du DOM _ voir jquery : live(), ready(), window.resize(), etc.
• Taille de la fenêtre: (media queries)
• écoulement du temps (setTimeout, enterFrame,...)
• webcam (réalité augmentée)
• wii, joystick, kinect, microphone, accéléromètre...
72
inter.actions: le dialogue homme-machine
http://devdocs.io/
jeudi 9 janvier 14
QUELLES SONT LES INPUTS À NOTRE DISPOSITION?• souris
• click, mouseover, mouseenter, mousemove, mouseleave...
• clavier
• keyup, keydown, keystroke
• tactile
• toucher, swipe, «tap»
• autre?
• manipulation du DOM _ voir jquery : live(), ready(), window.resize(), etc.
• Taille de la fenêtre: (media queries)
• écoulement du temps (setTimeout, enterFrame,...)
• webcam (réalité augmentée)
• wii, joystick, kinect, microphone, accéléromètre...
• ....
72
inter.actions: le dialogue homme-machine
http://devdocs.io/
jeudi 9 janvier 14
QUELLES SONT LES INPUTS À NOTRE DISPOSITION?• souris
• click, mouseover, mouseenter, mousemove, mouseleave...
• clavier
• keyup, keydown, keystroke
• tactile
• toucher, swipe, «tap»
• autre?
• manipulation du DOM _ voir jquery : live(), ready(), window.resize(), etc.
• Taille de la fenêtre: (media queries)
• écoulement du temps (setTimeout, enterFrame,...)
• webcam (réalité augmentée)
• wii, joystick, kinect, microphone, accéléromètre...
• ....
72
voir doc jquery pour liste exhaustive
inter.actions: le dialogue homme-machine
http://devdocs.io/
jeudi 9 janvier 14
QUELLES SONT LES INPUTS À NOTRE DISPOSITION?• souris
• click, mouseover, mouseenter, mousemove, mouseleave...
• clavier
• keyup, keydown, keystroke
• tactile
• toucher, swipe, «tap»
• autre?
• manipulation du DOM _ voir jquery : live(), ready(), window.resize(), etc.
• Taille de la fenêtre: (media queries)
• écoulement du temps (setTimeout, enterFrame,...)
• webcam (réalité augmentée)
• wii, joystick, kinect, microphone, accéléromètre...
• ....
72
voir doc jquery pour liste exhaustive
inter.actions: le dialogue homme-machine
http://devdocs.io/Toutes les docs dont vous rêvez, en local
jeudi 9 janvier 14
73
ces événements sont votre nouveauvocabulaire. Apprenez à vous exprimer
à travers eux.
jeudi 9 janvier 14
processus de travail de l’interaction designer
PROCESSUS DE TRAVAIL DE L’INTERACTION DESIGNER
1. WHO _ public-cible
2. WHAT _ objectifs & contenus préexistants. Quelle sera l'histoire?
3. HOW
1. Recherche
1. sketches: papier, crayons
2. storyboard / sens.flux: avoir la vision globale
3. style guides / tiles
2. Exécution
1. prototypes papier > test > ajustement > rince and repeat
2. prototypes html/css > test > ajustement > rince and repeat
3. grid
4. layout & mockups
5. intégration finale > test > ajustement > rince and repeat75
jeudi 9 janvier 14
LE BRIEFING
BRIEFING
77
wkid03: une histoire sur un médium interactif connecté à l’internet
jeudi 9 janvier 14
travailler en groupe
CONSEILS SUR LE TRAVAIL EN GROUPE
• Désigner un coordinateur/trice du groupe. Typiquement, une personne qui n'aime pas être en retard. De préférence une personne diplomate et assertive à la fois. Elle surveille les échéances et vérifie qu'une tâche ne prend pas trop de temps.
78
jeudi 9 janvier 14
travailler en groupe
CONSEILS SUR LE TRAVAIL EN GROUPE
• Désigner un coordinateur/trice du groupe. Typiquement, une personne qui n'aime pas être en retard. De préférence une personne diplomate et assertive à la fois. Elle surveille les échéances et vérifie qu'une tâche ne prend pas trop de temps.
• TOUJOURS Déterminer un temps limite pour chaque tâche.
78
jeudi 9 janvier 14
travailler en groupe
CONSEILS SUR LE TRAVAIL EN GROUPE
• Désigner un coordinateur/trice du groupe. Typiquement, une personne qui n'aime pas être en retard. De préférence une personne diplomate et assertive à la fois. Elle surveille les échéances et vérifie qu'une tâche ne prend pas trop de temps.
• TOUJOURS Déterminer un temps limite pour chaque tâche.
• sois doux avec les gens, mais dur avec les faits.
78
jeudi 9 janvier 14
travailler en groupe
CONSEILS SUR LE TRAVAIL EN GROUPE
• Désigner un coordinateur/trice du groupe. Typiquement, une personne qui n'aime pas être en retard. De préférence une personne diplomate et assertive à la fois. Elle surveille les échéances et vérifie qu'une tâche ne prend pas trop de temps.
• TOUJOURS Déterminer un temps limite pour chaque tâche.
• sois doux avec les gens, mais dur avec les faits.
• communiquer sur vos horaires, vos obligations extra-scolaires ces 14 prochains jours
78
jeudi 9 janvier 14
travailler en groupe
CONSEILS SUR LE TRAVAIL EN GROUPE
• Désigner un coordinateur/trice du groupe. Typiquement, une personne qui n'aime pas être en retard. De préférence une personne diplomate et assertive à la fois. Elle surveille les échéances et vérifie qu'une tâche ne prend pas trop de temps.
• TOUJOURS Déterminer un temps limite pour chaque tâche.
• sois doux avec les gens, mais dur avec les faits.
• communiquer sur vos horaires, vos obligations extra-scolaires ces 14 prochains jours
• Définissez une procédure pour prévenir de vos éventuels retards.
78
jeudi 9 janvier 14
travailler en groupe
CONSEILS SUR LE TRAVAIL EN GROUPE
• Désigner un coordinateur/trice du groupe. Typiquement, une personne qui n'aime pas être en retard. De préférence une personne diplomate et assertive à la fois. Elle surveille les échéances et vérifie qu'une tâche ne prend pas trop de temps.
• TOUJOURS Déterminer un temps limite pour chaque tâche.
• sois doux avec les gens, mais dur avec les faits.
• communiquer sur vos horaires, vos obligations extra-scolaires ces 14 prochains jours
• Définissez une procédure pour prévenir de vos éventuels retards.
• rappel: vous êtes tou(te)s sensés être présent durant toute la durée du workshop. Toute absence est à vos risques et périls.
78
jeudi 9 janvier 14
travailler en groupe
CONSEILS SUR LE TRAVAIL EN GROUPE
• Désigner un coordinateur/trice du groupe. Typiquement, une personne qui n'aime pas être en retard. De préférence une personne diplomate et assertive à la fois. Elle surveille les échéances et vérifie qu'une tâche ne prend pas trop de temps.
• TOUJOURS Déterminer un temps limite pour chaque tâche.
• sois doux avec les gens, mais dur avec les faits.
• communiquer sur vos horaires, vos obligations extra-scolaires ces 14 prochains jours
• Définissez une procédure pour prévenir de vos éventuels retards.
• rappel: vous êtes tou(te)s sensés être présent durant toute la durée du workshop. Toute absence est à vos risques et périls.
• Utilisez un outil tel que Trello pour gérer les tâches.
78
jeudi 9 janvier 14
79https://trello.comjeudi 9 janvier 14
la punition
BRIEFING
• l’histoire d'un autre groupe de storyshop03, traduite pour un médium interactif connecté à l’internet
80
fin
accueil/amorce
fin
fin
jeudi 9 janvier 14
la punition
BRIEFING
• l’histoire d'un autre groupe de storyshop03, traduite pour un médium interactif connecté à l’internet
• racontée en 5 moments
80
fin
accueil/amorce
fin
fin
jeudi 9 janvier 14
la punition
BRIEFING
• l’histoire d'un autre groupe de storyshop03, traduite pour un médium interactif connecté à l’internet
• racontée en 5 moments
• depuis X points de vue. X = nombre d'étudiants du groupe
80
fin
accueil/amorce
fin
fin
jeudi 9 janvier 14
la punition
BRIEFING
• l’histoire d'un autre groupe de storyshop03, traduite pour un médium interactif connecté à l’internet
• racontée en 5 moments
• depuis X points de vue. X = nombre d'étudiants du groupe
• Chaque moment d'un point de vue permet de passer à chaque autre point de vue. Pas forcément au même moment.
80
fin
accueil/amorce
fin
fin
jeudi 9 janvier 14
la punition
BRIEFING
• l’histoire d'un autre groupe de storyshop03, traduite pour un médium interactif connecté à l’internet
• racontée en 5 moments
• depuis X points de vue. X = nombre d'étudiants du groupe
• Chaque moment d'un point de vue permet de passer à chaque autre point de vue. Pas forcément au même moment.
• Chaque moment exploite une interaction comportementale (click, touch, scroll, ...) articulant la narration.
80
fin
accueil/amorce
fin
fin
jeudi 9 janvier 14
la punition
BRIEFING
• l’histoire d'un autre groupe de storyshop03, traduite pour un médium interactif connecté à l’internet
• racontée en 5 moments
• depuis X points de vue. X = nombre d'étudiants du groupe
• Chaque moment d'un point de vue permet de passer à chaque autre point de vue. Pas forcément au même moment.
• Chaque moment exploite une interaction comportementale (click, touch, scroll, ...) articulant la narration.
• Chaque point de vue aura son système graphique cohérent. La réalisation des 5 moments de ce personnage sera réalisé par un seul étudiant. L'échange de savoir est autorisé, l'échange de services interdit.
80
fin
accueil/amorce
fin
fin
jeudi 9 janvier 14
la punition
BRIEFING
• l’histoire d'un autre groupe de storyshop03, traduite pour un médium interactif connecté à l’internet
• racontée en 5 moments
• depuis X points de vue. X = nombre d'étudiants du groupe
• Chaque moment d'un point de vue permet de passer à chaque autre point de vue. Pas forcément au même moment.
• Chaque moment exploite une interaction comportementale (click, touch, scroll, ...) articulant la narration.
• Chaque point de vue aura son système graphique cohérent. La réalisation des 5 moments de ce personnage sera réalisé par un seul étudiant. L'échange de savoir est autorisé, l'échange de services interdit.
• Pas de menu de navigation. Seule la page d'accueil donne accès au making-of et crédits. Toutes les pages ont un footer avec le logo DWM + le titre de l'histoire comme lien vers la page d'accueil. stou. Logo (dimension: 40px de haut): https://dl.dropboxusercontent.com/u/150457/logo-dwm-white.ai )
80
fin
accueil/amorce
fin
fin
jeudi 9 janvier 14
briefing : évaluation
CRITÈRES D'ÉVALUATION
• réfléchir au système interactif.
Exemple:
- comment indiquer à l'utilisateur ce qui est interactif? > cohérence du système tout au long de l'expérience.
• Cohérence du système graphique & interactif pour chaque point de vue
• respect des deadlines pour chaque délivrable
81
jeudi 9 janvier 14
délivrables
DÉLIVRABLES
• L'histoire de 5x X(*) écrans (html, css+ javascript)
• Making-of: votre méthodologie, en 5 moments & X (*) points de vue. Format: une page web.
• Une page d'accueil, servant d'amorce à l'histoire et menant vers les X (*) points de vue, au Making-of, et à la page A Propos (titre libre).
• La page A Propos explique ce dont il s'agit.
• Une affiche A3 portrait comme accroche, pour l’expo.
• Ecran cible: 1024x768. (paysage). PAS RESPONSIVE.
83* (X = nombre d'étudiants du groupe).
jeudi 9 janvier 14
tortue ou lièvre ?
ÉCHÉANCIER
• J01_ lundi: répartition des groupes. Méthodologie de travail. Reconstruire un nouvel iceberg. > Se poser pleins de questions. Quels sont les faits, quels sont les points de vue déjà développés? Quels points de vue n’ont pas été développés? Comment? Pourquoi ? Qui? Quoi?
• J02_ mardi soir: Création et mise en place du sens.flux, vide.
• J03_ mercredi : Réflexion sur les moments du sens.flux: content choreography. Fin de journée, sens.flux version 1. Sketching d’écrans
• J04_ jeudi : sens.flux & wireframing terminés.
• J05_ vendredi: début du dev
• J08_ mercredi, fin de journée: chaque étudiant a terminé ses 5 écrans.
• J09_ jeudi: mise en commun. Réalisation de la Page d'accueil, making-of et affiche.
• J10_ vendredi, 11h00: affiche affichée, stand de présentation prêt à la cafétéria.
84
jeudi 9 janvier 14
86
Perso A Perso B Perso C Perso D
A1
A2
A3
A4
A5
B1
B2
B3
B4
B5
C1
C2
C3
C4
C5
D1
D2
D3
D4
D5
registre graphique A registre graphique B registre graphique C registre graphique D
jeudi 9 janvier 14
87
LE SENSCOMMENT D1
LES LIENS
B2 A1 C2
une horloge qui fonctionne
à l'envers
Nicole sort de la voiture. Sonnée. Elle emmène son bébé à la plaine de jeu en espérant calmer ses pleurs.
Notes complémentaires
jeudi 9 janvier 14
87
LE SENSCOMMENT D1
LES LIENS
B2 A1 C2
une horloge qui fonctionne
à l'envers
anim d'un
enfant sur
une balançoire
du sang qui dégouline sur l'écran
peur: son d
e
porte qui
claque ?
Nicole sort de la voiture. Sonnée. Elle emmène son bébé à la plaine de jeu en espérant calmer ses pleurs.
Notes complémentaires
jeudi 9 janvier 14
SENS.FLUX
88
CROISEMENT DE 2 LIGNES
AMBIGU
> < ou X ?
SOLUTION 1
placer une ligne «en dessous» de l’autre
SOLUTION 2, de l’électricien
placer une ligne «en dessous» de l’autre, celle du dessus «saute» au dessus de la ligne du dessous.
jeudi 9 janvier 14
viewport, canevas, interaction design, web design, événements, comportements, responsive design, bleu de travail, l'espace de l'écran, la 4ème dimension, parallax, souris, click, mouseover, mouseenter, bâtard, mousemove, mouseleave, clavier, keyup,
keydown, keystroke, tactile, toucher, swipe, «tap», manipulation du DOM _ voir jquery : live(), ready(), window.resize(), media queries, écoulement du temps, setTimeout,
enterFrame, webcam (réalité augmentée), wii, joystick, kinect, microphone, accéléromètre.......
89
BON WORKSHOP !
jeudi 9 janvier 14
github
POURQUOI C'EST COOL ?
• grace à Git vous pouvez travailler sur plusieurs parties du projet de façon complètement isolée les unes des autres et sans risque de "casser" ce qu'ont fait les autres.
• backup automatique, permettant de revenir à toutes les versions précédentes du projet ("versioning").
• fonctionne pour tout, pas que pour le code: fichiers toshop, slides, contrats, documents word...
• C'est aussi un réseau social autour du partage de code open source, un bon endroit pour apprendre, comme stackoverflow.com
91
jeudi 9 janvier 14
fonctionnement de github
FONCTIONNEMENT
93
masterbranch
fonctionnalité A
bug 2432
fonctionnalité B
branchescopies locale du master. ("clone")Lorsque terminée > fusion dans master ( = "merge")
version "live"
ton serveur ton repository sur github ton ordinateur
Mastercopies locale du master. ("clone")(version la + avancée et débuggée)
jeudi 9 janvier 14
github simplifié
PLUS SIMPLE: SANS BRANCHE, CHACUN DANS UN DOSSIER SÉPARÉ, AINSI PAS DE RISQUE DE "CONFLITS".
94
jeudi 9 janvier 14
95
fonctionnement de github
MASTERversion "live"
Dossier du personnage B
Dossier du personnage C
Dossier du personnage D
Dossier du personnage A
jeudi 9 janvier 14
95
fonctionnement de github
MASTERversion "live"
Dossier du personnage B
Dossier du personnage C
Dossier du personnage D
Dossier du personnage A
jeudi 9 janvier 14
github
MISE EN PLACE
• se créer un compte sur github.com (gratuit si tu es ok que ton code soit visible publiquement)
• chaque étudiant télécharge et installe l'application https://help.github.com/articles/set-up-git#platform-mac
• décidez qui est le "capitaine". Les autres sont les soldats. Le capitaine gèrera la branche "master".
• Le capitaine crée le "repository" (= espace sur github qui contiendra le projet) et, sur github, désigne les autres membres (qui se seront auparavant créé un compte) comme "collaborateurs".
• Les autres dev font des copies locales (des "clone")
• ils font leur dev d'une fonctionnalité du projet en local et travaillent tous sur des fichiers différents à l'intérieur du "master".
• A chaque fois que qque chose est terminé > sync to master
• Régulièrement, synchronise ta copie locale avec le master, ainsi tu peux voir le taf des autres sur ta machine.
97
jeudi 9 janvier 14
github
TA JOURNÉE DE TRAVAIL SUR GITHUB
• récupérer la dernière version
• tu codes, codes, codes...
• quand c'est bon, tu "commit" les changements sur github.
98
jeudi 9 janvier 14
fin du début de ta vie de n3rd.
ALLER PLUS LOIN AVEC GITHUB
• ARTICLE TRES BIEN FICHUhttp://www.teehanlax.com/blog/github-fundamentals/
99
jeudi 9 janvier 14