Upgrade to Pro — share decks privately, control downloads, hide ads and more …

WKID03: Interfaces, Interactions

pixeline
January 24, 2014

WKID03: Interfaces, Interactions

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

pixeline

January 24, 2014
Tweet

More Decks by pixeline

Other Decks in Design

Transcript

  1. 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
  2. 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
  3. 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
  4. 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
  5. 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
  6. 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
  7. 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
  8. 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
  9. 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
  10. 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
  11. 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
  12. 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
  13. 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
  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
  15. 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
  16. x y canevas illimité : le "document" viewport 46 220

    ESPACE À 2 DIMENSIONS dimension 2 jeudi 9 janvier 14
  17. x y canevas illimité : le "document" viewport zones 46

    220 ESPACE À 2 DIMENSIONS dimension 2 jeudi 9 janvier 14
  18. x y canevas illimité : le "document" viewport zones 46

    220 ESPACE À 2 DIMENSIONS dimension 2 jeudi 9 janvier 14
  19. 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
  20. 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
  21. 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
  22. Des effets. 65 Le 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
  23. 67 interaction design: coller son chewing gum sur le logo

    du pire fournisseur. jeudi 9 janvier 14
  24. 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
  25. QUELLES SONT LES INPUTS À NOTRE DISPOSITION? 72 inter.actions: le

    dialogue homme-machine http://devdocs.io/ jeudi 9 janvier 14
  26. QUELLES SONT LES INPUTS À NOTRE DISPOSITION? • souris 72

    inter.actions: le dialogue homme-machine http://devdocs.io/ jeudi 9 janvier 14
  27. 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
  28. 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
  29. 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
  30. 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
  31. 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
  32. 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
  33. 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
  34. 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
  35. 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
  36. 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
  37. 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
  38. 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
  39. 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
  40. 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
  41. 73 ces événements sont votre nouveau vocabulaire. Apprenez à vous

    exprimer à travers eux. jeudi 9 janvier 14
  42. 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
  43. LE BRIEFING BRIEFING 77 wkid03: une histoire sur un médium

    interactif connecté à l’internet jeudi 9 janvier 14
  44. 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
  45. 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
  46. 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
  47. 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
  48. 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
  49. 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
  50. 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
  51. 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
  52. 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
  53. 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
  54. 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
  55. 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
  56. 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
  57. 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
  58. 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
  59. 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
  60. 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
  61. 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
  62. 87 LE SENS COMMENT 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
  63. 87 LE SENS COMMENT 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 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
  64. 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
  65. 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
  66. 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
  67. 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
  68. github simplifié PLUS SIMPLE: SANS BRANCHE, CHACUN DANS UN DOSSIER

    SÉPARÉ, AINSI PAS DE RISQUE DE "CONFLITS". 94 jeudi 9 janvier 14
  69. 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
  70. 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
  71. 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
  72. 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
  73. 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