1
IKD
workshop interaction design
#dwmwkid
jeudi 9 janvier 14
2
BATARD
jeudi 9 janvier 14
3
web design
jeudi 9 janvier 14
internet
3
web designweb design
jeudi 9 janvier 14
interaction design internet
3
web designweb design
jeudi 9 janvier 14
4
interaction design
jeudi 9 janvier 14
5
qu’utilise-t-on pour accrocher une feuille de papier sur un mur?
jeudi 9 janvier 14
6
une punaise.
jeudi 9 janvier 14
7
ouch!
jeudi 9 janvier 14
8
beaucoup mieux
jeudi 9 janvier 14
9
punaise = interaction design
jeudi 9 janvier 14
10
punaise interaction design + storytelling = ?
jeudi 9 janvier 14
11http://dshott.co.uk/nessie-pins
interaction design + storytelling
jeudi 9 janvier 14
12http://dshott.co.uk/nessie-pins
interaction design + storytelling
jeudi 9 janvier 14
13http://dshott.co.uk/nessie-pins
interaction design + storytelling
jeudi 9 janvier 14
14http://dshott.co.uk/realboy
interaction design + storytelling
jeudi 9 janvier 14
15http://dshott.co.uk/realboy
interaction design + storytelling
jeudi 9 janvier 14
16http://dshott.co.uk/realboy
interaction design + storytelling
jeudi 9 janvier 14
17
interaction design + storytelling
jeudi 9 janvier 14
18
interaction design
jeudi 9 janvier 14
interaction design
19
LA CONDITION DE L'UTILISATEUR
Interaction design détermine la condition humaine. Demande-t-on à notr...
CECI ?
20MS Word
jeudi 9 janvier 14
chapitre en cours
21iaWriter
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...
chapitre en cours
23Wordpress - nouvel article UI
jeudi 9 janvier 14
chapitre en cours
24Medium.com - nouvel article UI
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 WO...
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 WO...
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 WO...
26
Habilleras-tu ton utilisateur d'un "bleu de travail"
jeudi 9 janvier 14
27
... ou lui donnera-tu un costume l'immergeant dans le rôle ?
jeudi 9 janvier 14
28
... ou lui donnera-tu un costume l'immergeant dans le rôle ?
jeudi 9 janvier 14
29
... ou lui donnera-tu un costume l'immergeant dans le rôle ?
jeudi 9 janvier 14
interaction design
30
jeudi 9 janvier 14
interaction design internet
30
jeudi 9 janvier 14
interaction design internet
30
web design
jeudi 9 janvier 14
31
web design
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 janvie...
33
un «site interactif» est un pléonasme.
N’utilise pas cette expression ou tu auras l’air #wtf.
Nous ne faisons pas des s...
34
un «site interactif» est un pléonasme.
N’utilise pas cette expression ou tu auras l’air #wtf.
Nous ne faisons pas des s...
35
Nous racontons des histoires
Nous ne faisons pas des sites internet.
un «site interactif» est un pléonasme.
N’utilise p...
36
Nous racontons des histoires
et construisons des expériences
Nous ne faisons pas des sites internet.
un «site interacti...
37
Nous racontons des histoires
et construisons des exxxpériences
Nous ne faisons pas des sites internet.
un «site interac...
38
et construisons des expériences
sur un médium interactif
Nous racontons des histoires
Nous ne faisons pas des sites int...
39
connecté à internet.
sur un médium interactif
et construisons des expériences
Nous racontons des histoires
Nous ne fais...
web design
MEANING FIRST
40
le sens d’abord.
jeudi 9 janvier 14
web design
41
jeudi 9 janvier 14
LA SCÈNE...
42
jeudi 9 janvier 14
43
WINDOWS OF PERCEPTION
jeudi 9 janvier 14
responsive
44
jeudi 9 janvier 14
45
L’ESPACE (INFINI) DE L’ÉCRAN (FINI)
jeudi 9 janvier 14
QU’EST-CE QUE L’ESPACE?
jeudi 9 janvier 14
QU’EST-CE QUE L’ESPACE?
jeudi 9 janvier 14
QU’EST-CE QUE
L’ESPACE?
jeudi 9 janvier 14
SPAjeudi 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’utilisateu...
51
un canevas infini
perçu via un viewport (hublot) délimitant
un espace fini.
jeudi 9 janvier 14
51
http://www.dino-zara.com/
un canevas infini
perçu via un viewport (hublot) délimitant
un espace fini.
jeudi 9 janvier 14
51
http://www.dino-zara.com/
un canevas infini
perç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»)...
dimension 0
ESPACE À 0 DIMENSION: LE POINT
53
jeudi 9 janvier 14
dimension 0
ESPACE À 0 DIMENSION: LE POINT
53
jeudi 9 janvier 14
ESPACE À 1 DIMENSION: LA LIGNE
54
x
dimension 1
jeudi 9 janvier 14
ESPACE À 2 DIMENSIONS
dimension 2
jeudi 9 janvier 14
y
ESPACE À 2 DIMENSIONS
dimension 2
jeudi 9 janvier 14
x
y
ESPACE À 2 DIMENSIONS
dimension 2
jeudi 9 janvier 14
x
y
46
220
ESPACE À 2 DIMENSIONS
dimension 2
jeudi 9 janvier 14
x
y
viewport
46
220
ESPACE À 2 DIMENSIONS
dimension 2
jeudi 9 janvier 14
x
y
canevas illimité : le "document"
viewport
46
220
ESPACE À 2 DIMENSIONS
dimension 2
jeudi 9 janvier 14
x
y
canevas illimité : le "document"
viewport
zones
46
220
ESPACE À 2 DIMENSIONS
dimension 2
jeudi 9 janvier 14
x
y
canevas illimité : le "document"
viewport
zones
46
220
ESPACE À 2 DIMENSIONS
dimension 2
jeudi 9 janvier 14
ESPACE À 3 DIMENSIONS: SUPERPOSITIONS DE COUCHES
56
dimension 3: la profondeur
jeudi 9 janvier 14
dimension 4 : le temps
ESPACE À 4 DIMENSIONS: LE TEMPS
57
jeudi 9 janvier 14
TEMPS: GRAPHIQUE DU PLAISIR DÉÇU
58
qualité perçue
temps
arrivée sur le site
ce site a l’air bien
« je m’en vais »
tiens, ...
TEMPS: GRAPHIQUE DU PLAISIR ATTEINT
59
qualité perçue
temps
arrivée sur le site
ce site a l’air bien
« je m’en vais »
ah a...
gestion de l'espace de l'écran
EXEMPLES DE GESTION CRÉATIVE DE L’ESPACE
• Scrolling _ http://wicky.nillia.ms/headroom.js/
...
chapitre en cours
61
jeudi 9 janvier 14
chapitre en cours
jeudi 9 janvier 14
63
http://www.frankchimero.com/writing/2012/everything-was-made/
jeudi 9 janvier 14
chapitre en cours
64
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.
Ju...
INTER.ACTIONS
66
jeudi 9 janvier 14
67
interaction design: coller son
chewing gum sur le logo du
pire fournisseur.
jeudi 9 janvier 14
68
INTERACTIVITE≅COMPORTEMENT
jeudi 9 janvier 14
69
un utilisateur
sur
une scène
jeudi 9 janvier 14
69
un utilisateur
sur
une scène
jeudi 9 janvier 14
69
un utilisateur
sur
une scène
jeudi 9 janvier 14
70
L'utilisateur,
sur la scène,
déclenche des événements.
jeudi 9 janvier 14
onkeypress
keydown
keyup
click
hover
mousedown
mouseup
mousemove
71
événements à votre disposition
js: setTimeOut()
css: a...
QUELLES SONT LES INPUTS À NOTRE DISPOSITION?
72
inter.actions: le dialogue homme-machine
http://devdocs.io/
jeudi 9 janvie...
QUELLES SONT LES INPUTS À NOTRE DISPOSITION?
• souris
72
inter.actions: le dialogue homme-machine
http://devdocs.io/
jeudi...
QUELLES SONT LES INPUTS À NOTRE DISPOSITION?
• souris
• click, mouseover, mouseenter, mousemove, mouseleave...
72
inter.ac...
QUELLES SONT LES INPUTS À NOTRE DISPOSITION?
• souris
• click, mouseover, mouseenter, mousemove, mouseleave...
• clavier
7...
QUELLES SONT LES INPUTS À NOTRE DISPOSITION?
• souris
• click, mouseover, mouseenter, mousemove, mouseleave...
• clavier
•...
QUELLES SONT LES INPUTS À NOTRE DISPOSITION?
• souris
• click, mouseover, mouseenter, mousemove, mouseleave...
• clavier
•...
QUELLES SONT LES INPUTS À NOTRE DISPOSITION?
• souris
• click, mouseover, mouseenter, mousemove, mouseleave...
• clavier
•...
QUELLES SONT LES INPUTS À NOTRE DISPOSITION?
• souris
• click, mouseover, mouseenter, mousemove, mouseleave...
• clavier
•...
QUELLES SONT LES INPUTS À NOTRE DISPOSITION?
• souris
• click, mouseover, mouseenter, mousemove, mouseleave...
• clavier
•...
QUELLES SONT LES INPUTS À NOTRE DISPOSITION?
• souris
• click, mouseover, mouseenter, mousemove, mouseleave...
• clavier
•...
QUELLES SONT LES INPUTS À NOTRE DISPOSITION?
• souris
• click, mouseover, mouseenter, mousemove, mouseleave...
• clavier
•...
QUELLES SONT LES INPUTS À NOTRE DISPOSITION?
• souris
• click, mouseover, mouseenter, mousemove, mouseleave...
• clavier
•...
QUELLES SONT LES INPUTS À NOTRE DISPOSITION?
• souris
• click, mouseover, mouseenter, mousemove, mouseleave...
• clavier
•...
QUELLES SONT LES INPUTS À NOTRE DISPOSITION?
• souris
• click, mouseover, mouseenter, mousemove, mouseleave...
• clavier
•...
QUELLES SONT LES INPUTS À NOTRE DISPOSITION?
• souris
• click, mouseover, mouseenter, mousemove, mouseleave...
• clavier
•...
QUELLES SONT LES INPUTS À NOTRE DISPOSITION?
• souris
• click, mouseover, mouseenter, mousemove, mouseleave...
• clavier
•...
73
ces événements sont votre nouveau
vocabulaire. Apprenez à vous exprimer
à travers eux.
jeudi 9 janvier 14
COMMENT ON VA FAIRE?
74
jeudi 9 janvier 14
processus de travail de l’interaction designer
PROCESSUS DE TRAVAIL DE L’INTERACTION DESIGNER
1. WHO _ public-cible
2. WHA...
76
fin
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
78
jeudi 9 janvier 14
travailler en groupe
CONSEILS SUR LE TRAVAIL EN GROUPE
• Désigner un coordinateur/trice du groupe. Typiquement, une person...
travailler en groupe
CONSEILS SUR LE TRAVAIL EN GROUPE
• Désigner un coordinateur/trice du groupe. Typiquement, une person...
travailler en groupe
CONSEILS SUR LE TRAVAIL EN GROUPE
• Désigner un coordinateur/trice du groupe. Typiquement, une person...
travailler en groupe
CONSEILS SUR LE TRAVAIL EN GROUPE
• Désigner un coordinateur/trice du groupe. Typiquement, une person...
travailler en groupe
CONSEILS SUR LE TRAVAIL EN GROUPE
• Désigner un coordinateur/trice du groupe. Typiquement, une person...
travailler en groupe
CONSEILS SUR LE TRAVAIL EN GROUPE
• Désigner un coordinateur/trice du groupe. Typiquement, une person...
travailler en groupe
CONSEILS SUR LE TRAVAIL EN GROUPE
• Désigner un coordinateur/trice du groupe. Typiquement, une person...
79
https://trello.com
jeudi 9 janvier 14
la punition
BRIEFING
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’intern...
la punition
BRIEFING
• l’histoire d'un autre groupe de storyshop03, traduite pour un médium
interactif connecté à l’intern...
la punition
BRIEFING
• l’histoire d'un autre groupe de storyshop03, traduite pour un médium
interactif connecté à l’intern...
la punition
BRIEFING
• l’histoire d'un autre groupe de storyshop03, traduite pour un médium
interactif connecté à l’intern...
la punition
BRIEFING
• l’histoire d'un autre groupe de storyshop03, traduite pour un médium
interactif connecté à l’intern...
la punition
BRIEFING
• l’histoire d'un autre groupe de storyshop03, traduite pour un médium
interactif connecté à l’intern...
la punition
BRIEFING
• l’histoire d'un autre groupe de storyshop03, traduite pour un médium
interactif connecté à l’intern...
briefing : évaluation
CRITÈRES D'ÉVALUATION
• réfléchir au système interactif.
Exemple:
- comment indiquer à l'utilisateur...
DÉLIVRABLES
82
jeudi 9 janvier 14
délivrables
DÉLIVRABLES
• L'histoire de 5x X(*) écrans (html, css+ javascript)
• Making-of: votre méthodologie, en 5 momen...
tortue ou lièvre ?
ÉCHÉANCIER
• J01_ lundi: répartition des groupes. Méthodologie de travail. Reconstruire un nouvel icebe...
SENS.FLUX
85
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 regist...
87
LE SENSCOMMENT
D1
LES LIENS
B2 A1 C2
une horloge
qui fonctionne
à l'envers
Nicole sort de la voiture.
Sonnée. Elle emmè...
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 ...
SENS.FLUX
88
CROISEMENT DE 2 LIGNES
AMBIGU
> < ou X ?
SOLUTION 1
placer une ligne «en dessous» de l’autre
SOLUTION 2, de l...
viewport, canevas, interaction design, web design, événements, comportements,
responsive design, bleu de travail, l'espace...
github
90
DÉVELOPPER
COMME UN BÂTARD
AVEC OU SUR
GITHUB
jeudi 9 janvier 14
github
POURQUOI C'EST COOL ?
• grace à Git vous pouvez travailler sur plusieurs parties du projet de façon complètement is...
github
SCÉNARIO 1 : VOUS TRAVAILLEZ SUR LES MÊMES FICHIERS
92
jeudi 9 janvier 14
fonctionnement de github
FONCTIONNEMENT
93
master
branch
fonctionnalité
A
bug 2432
fonctionnalité
B
branches
copies locale...
github simplifié
PLUS SIMPLE: SANS BRANCHE, CHACUN DANS UN DOSSIER
SÉPARÉ, AINSI PAS DE RISQUE DE "CONFLITS".
94
jeudi 9 j...
95
fonctionnement de github
MASTER
version
"live"
Dossier du
personnage B
Dossier du
personnage C
Dossier du
personnage D
...
95
fonctionnement de github
MASTER
version
"live"
Dossier du
personnage B
Dossier du
personnage C
Dossier du
personnage D
...
96
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)
• ch...
github
TA JOURNÉE DE TRAVAIL SUR GITHUB
• récupérer la dernière version
• tu codes, codes, codes...
• quand c'est bon, tu ...
fin du début de ta vie de n3rd.
ALLER PLUS LOIN AVEC GITHUB
• ARTICLE TRES BIEN FICHU
http://www.teehanlax.com/blog/github...
chapitre en cours
100
jeudi 9 janvier 14
Prochain SlideShare
Chargement dans…5
×

Wkid03 interfaces interactions

218 vues

Publié le

Présentation de lancement de l'atelier "Interaction Design" en DWM, janvier 2014.

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

  • Soyez le premier à aimer ceci

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

Aucune remarque pour cette diapositive

Wkid03 interfaces interactions

  1. 1. 1 IKD workshop interaction design #dwmwkid jeudi 9 janvier 14
  2. 2. 2 BATARD jeudi 9 janvier 14
  3. 3. 3 web design jeudi 9 janvier 14
  4. 4. internet 3 web designweb design jeudi 9 janvier 14
  5. 5. interaction design internet 3 web designweb design jeudi 9 janvier 14
  6. 6. 4 interaction design jeudi 9 janvier 14
  7. 7. 5 qu’utilise-t-on pour accrocher une feuille de papier sur un mur? jeudi 9 janvier 14
  8. 8. 6 une punaise. jeudi 9 janvier 14
  9. 9. 7 ouch! jeudi 9 janvier 14
  10. 10. 8 beaucoup mieux jeudi 9 janvier 14
  11. 11. 9 punaise = interaction design jeudi 9 janvier 14
  12. 12. 10 punaise interaction design + storytelling = ? jeudi 9 janvier 14
  13. 13. 11http://dshott.co.uk/nessie-pins interaction design + storytelling jeudi 9 janvier 14
  14. 14. 12http://dshott.co.uk/nessie-pins interaction design + storytelling jeudi 9 janvier 14
  15. 15. 13http://dshott.co.uk/nessie-pins interaction design + storytelling jeudi 9 janvier 14
  16. 16. 14http://dshott.co.uk/realboy interaction design + storytelling jeudi 9 janvier 14
  17. 17. 15http://dshott.co.uk/realboy interaction design + storytelling jeudi 9 janvier 14
  18. 18. 16http://dshott.co.uk/realboy interaction design + storytelling jeudi 9 janvier 14
  19. 19. 17 interaction design + storytelling jeudi 9 janvier 14
  20. 20. 18 interaction design jeudi 9 janvier 14
  21. 21. interaction design 19 LA CONDITION DE L'UTILISATEUR Interaction 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
  22. 22. CECI ? 20MS Word jeudi 9 janvier 14
  23. 23. chapitre en cours 21iaWriter jeudi 9 janvier 14
  24. 24. 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
  25. 25. chapitre en cours 23Wordpress - nouvel article UI jeudi 9 janvier 14
  26. 26. chapitre en cours 24Medium.com - nouvel article UI jeudi 9 janvier 14
  27. 27. 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
  28. 28. 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
  29. 29. 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
  30. 30. 26 Habilleras-tu ton utilisateur d'un "bleu de travail" jeudi 9 janvier 14
  31. 31. 27 ... ou lui donnera-tu un costume l'immergeant dans le rôle ? jeudi 9 janvier 14
  32. 32. 28 ... ou lui donnera-tu un costume l'immergeant dans le rôle ? jeudi 9 janvier 14
  33. 33. 29 ... ou lui donnera-tu un costume l'immergeant dans le rôle ? jeudi 9 janvier 14
  34. 34. interaction design 30 jeudi 9 janvier 14
  35. 35. interaction design internet 30 jeudi 9 janvier 14
  36. 36. interaction design internet 30 web design jeudi 9 janvier 14
  37. 37. 31 web design jeudi 9 janvier 14
  38. 38. 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
  39. 39. 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
  40. 40. 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
  41. 41. 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
  42. 42. 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
  43. 43. 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
  44. 44. 38 et construisons des expériences sur un médium interactif 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
  45. 45. 39 connecté à internet. sur un médium interactif et construisons des expériences 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
  46. 46. web design MEANING FIRST 40 le sens d’abord. jeudi 9 janvier 14
  47. 47. web design 41 jeudi 9 janvier 14
  48. 48. LA SCÈNE... 42 jeudi 9 janvier 14
  49. 49. 43 WINDOWS OF PERCEPTION jeudi 9 janvier 14
  50. 50. responsive 44 jeudi 9 janvier 14
  51. 51. 45 L’ESPACE (INFINI) DE L’ÉCRAN (FINI) jeudi 9 janvier 14
  52. 52. QU’EST-CE QUE L’ESPACE? jeudi 9 janvier 14
  53. 53. QU’EST-CE QUE L’ESPACE? jeudi 9 janvier 14
  54. 54. QU’EST-CE QUE L’ESPACE? jeudi 9 janvier 14
  55. 55. SPAjeudi 9 janvier 14
  56. 56. 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
  57. 57. 51 un canevas infini perçu via un viewport (hublot) délimitant un espace fini. jeudi 9 janvier 14
  58. 58. 51 http://www.dino-zara.com/ un canevas infini perçu via un viewport (hublot) délimitant un espace fini. jeudi 9 janvier 14
  59. 59. 51 http://www.dino-zara.com/ un canevas infini perçu via un viewport (hublot) délimitant un espace fini. jeudi 9 janvier 14
  60. 60. 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
  61. 61. dimension 0 ESPACE À 0 DIMENSION: LE POINT 53 jeudi 9 janvier 14
  62. 62. dimension 0 ESPACE À 0 DIMENSION: LE POINT 53 jeudi 9 janvier 14
  63. 63. ESPACE À 1 DIMENSION: LA LIGNE 54 x dimension 1 jeudi 9 janvier 14
  64. 64. ESPACE À 2 DIMENSIONS dimension 2 jeudi 9 janvier 14
  65. 65. y ESPACE À 2 DIMENSIONS dimension 2 jeudi 9 janvier 14
  66. 66. x y ESPACE À 2 DIMENSIONS dimension 2 jeudi 9 janvier 14
  67. 67. x y 46 220 ESPACE À 2 DIMENSIONS dimension 2 jeudi 9 janvier 14
  68. 68. x y viewport 46 220 ESPACE À 2 DIMENSIONS dimension 2 jeudi 9 janvier 14
  69. 69. x y canevas illimité : le "document" viewport 46 220 ESPACE À 2 DIMENSIONS dimension 2 jeudi 9 janvier 14
  70. 70. x y canevas illimité : le "document" viewport zones 46 220 ESPACE À 2 DIMENSIONS dimension 2 jeudi 9 janvier 14
  71. 71. x y canevas illimité : le "document" viewport zones 46 220 ESPACE À 2 DIMENSIONS dimension 2 jeudi 9 janvier 14
  72. 72. ESPACE À 3 DIMENSIONS: SUPERPOSITIONS DE COUCHES 56 dimension 3: la profondeur jeudi 9 janvier 14
  73. 73. dimension 4 : le temps ESPACE À 4 DIMENSIONS: LE TEMPS 57 jeudi 9 janvier 14
  74. 74. TEMPS: GRAPHIQUE DU PLAISIR DÉÇU 58 qualité perçue temps arrivée sur le site ce site a l’air bien « je m’en vais » tiens, ce bouton ne marche pas que de fautes d’orthographe! pas terrible, je jette « 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
  75. 75. TEMPS: GRAPHIQUE DU PLAISIR ATTEINT 59 qualité perçue temps arrivée sur le site ce site a l’air bien « je m’en vais » ah ah! chouette idée! quelle créativité! il me semble intéressant, contactons-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
  76. 76. 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
  77. 77. chapitre en cours 61 jeudi 9 janvier 14
  78. 78. chapitre en cours jeudi 9 janvier 14
  79. 79. 63 http://www.frankchimero.com/writing/2012/everything-was-made/ jeudi 9 janvier 14
  80. 80. chapitre en cours 64 jeudi 9 janvier 14
  81. 81. 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
  82. 82. INTER.ACTIONS 66 jeudi 9 janvier 14
  83. 83. 67 interaction design: coller son chewing gum sur le logo du pire fournisseur. jeudi 9 janvier 14
  84. 84. 68 INTERACTIVITE≅COMPORTEMENT jeudi 9 janvier 14
  85. 85. 69 un utilisateur sur une scène jeudi 9 janvier 14
  86. 86. 69 un utilisateur sur une scène jeudi 9 janvier 14
  87. 87. 69 un utilisateur sur une scène jeudi 9 janvier 14
  88. 88. 70 L'utilisateur, sur la scène, déclenche des événements. jeudi 9 janvier 14
  89. 89. onkeypress keydown keyup click hover mousedown mouseup mousemove 71 événements à votre disposition js: setTimeOut() css: animation keyframe window scroll Domready loading waypoints.js ... jeudi 9 janvier 14
  90. 90. QUELLES SONT LES INPUTS À NOTRE DISPOSITION? 72 inter.actions: le dialogue homme-machine http://devdocs.io/ jeudi 9 janvier 14
  91. 91. QUELLES SONT LES INPUTS À NOTRE DISPOSITION? • souris 72 inter.actions: le dialogue homme-machine http://devdocs.io/ jeudi 9 janvier 14
  92. 92. 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
  93. 93. 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
  94. 94. 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
  95. 95. 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
  96. 96. 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
  97. 97. 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
  98. 98. 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
  99. 99. 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
  100. 100. 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
  101. 101. 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
  102. 102. 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
  103. 103. 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
  104. 104. 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
  105. 105. 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
  106. 106. 73 ces événements sont votre nouveau vocabulaire. Apprenez à vous exprimer à travers eux. jeudi 9 janvier 14
  107. 107. COMMENT ON VA FAIRE? 74 jeudi 9 janvier 14
  108. 108. 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 repeat 75 jeudi 9 janvier 14
  109. 109. 76 fin jeudi 9 janvier 14
  110. 110. LE BRIEFING BRIEFING 77 wkid03: une histoire sur un médium interactif connecté à l’internet jeudi 9 janvier 14
  111. 111. travailler en groupe CONSEILS SUR LE TRAVAIL EN GROUPE 78 jeudi 9 janvier 14
  112. 112. 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
  113. 113. 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
  114. 114. 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
  115. 115. 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
  116. 116. 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
  117. 117. 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
  118. 118. 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
  119. 119. 79 https://trello.com jeudi 9 janvier 14
  120. 120. la punition BRIEFING 80 fin accueil/amorce fin fin jeudi 9 janvier 14
  121. 121. 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
  122. 122. 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
  123. 123. 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
  124. 124. 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
  125. 125. 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
  126. 126. 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
  127. 127. 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
  128. 128. 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
  129. 129. DÉLIVRABLES 82 jeudi 9 janvier 14
  130. 130. 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
  131. 131. 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
  132. 132. SENS.FLUX 85 jeudi 9 janvier 14
  133. 133. 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
  134. 134. 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
  135. 135. 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 quidégouline surl'écran peur: son de 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
  136. 136. 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
  137. 137. 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
  138. 138. github 90 DÉVELOPPER COMME UN BÂTARD AVEC OU SUR GITHUB jeudi 9 janvier 14
  139. 139. 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
  140. 140. github SCÉNARIO 1 : VOUS TRAVAILLEZ SUR LES MÊMES FICHIERS 92 jeudi 9 janvier 14
  141. 141. fonctionnement de github FONCTIONNEMENT 93 master branch fonctionnalité A bug 2432 fonctionnalité B branches copies locale du master. ("clone") Lorsque terminée > fusion dans master ( = "merge") version "live" ton serveur ton repository sur github ton ordinateur Master copies locale du master. ("clone") (version la + avancée et débuggée) jeudi 9 janvier 14
  142. 142. github simplifié PLUS SIMPLE: SANS BRANCHE, CHACUN DANS UN DOSSIER SÉPARÉ, AINSI PAS DE RISQUE DE "CONFLITS". 94 jeudi 9 janvier 14
  143. 143. 95 fonctionnement de github MASTER version "live" Dossier du personnage B Dossier du personnage C Dossier du personnage D Dossier du personnage A jeudi 9 janvier 14
  144. 144. 95 fonctionnement de github MASTER version "live" Dossier du personnage B Dossier du personnage C Dossier du personnage D Dossier du personnage A jeudi 9 janvier 14
  145. 145. 96 jeudi 9 janvier 14
  146. 146. 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
  147. 147. 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
  148. 148. fin du début de ta vie de n3rd. ALLER PLUS LOIN AVEC GITHUB • ARTICLE TRES BIEN FICHU http://www.teehanlax.com/blog/github-fundamentals/ 99 jeudi 9 janvier 14
  149. 149. chapitre en cours 100 jeudi 9 janvier 14

×