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
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
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
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
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
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
‘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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
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
pixeline
xxxkinu
ajstarks
torije
root_recruit
hirataaa0220
ryoya_frst
narizuka
kenijam
degudegu2510
weddingpark
putchomsmartbank
daitorii
lauravandoore
addyosmani
chrislema
palkan
paulrobertlloyd
frogandcode
jonyablonski
eileencodes
lara
phodgson
smashingmag
