1
t
2
t
copyright: CNN
conception
de projet - 1
évaluation
évaluation
• TJ: 30% 

TP + Remises Workshops + participation aux cours
• TFA : 70%
• le chemin est plus import...
TOC
table des matières
• Cours «normaux»
• théorie
• processus de création
• gestion commerciale d’un projet
• Apprendre à...
alexandre plennevaux
5
• web designer/developer depuis 1998 (pixeline.be)
• parle anglais, français, espagnol (diplômé en ...
6
9
10
https://pixeline.be
2tid
11
la longue traîne
la crème le ventre mou les autres: la longue traîne
adéquationàlaformationdwm
les étudiants dwm
12
2013-14: réussite
étudiants DWM: 121
réussite 1ère session: 11 9,090909091%
réussite 2ème session: 28 23,140495868%
Tau...
13
un conseil?
14
Travaille. Beaucoup. Tout le temps. L'école doit être
ta priorité absolue toute l'année.
!
Tu es ton meilleur professeu...
15
lis.
!
!
http://dwm.re/lectures-conseillees/
16
Regarde.
!
!
Apprends à voir. Pas comme un
consommateur, mais comme un créateur.
Décortique ce que tu trouves "beau". T...
17
70% de ce qu'il te faut ne se trouve pas à l'école.
18
Input
Organise-toi.
Améliore sans cesse ta méthode de travail.
Deviens une usine.
Output
pas une usine à gaz.
19
20
Input
une usine à créer.
Output
20
Input
une usine à créer.
Output
briefings
Livrables,
acquisition de maitrise
technique et
conceptuelle
Qu'est-ce qu'il te
faut pour
réaliser un
projet?
21
22
thunes connaissances compétences outils tempsorganisation
22
thunes connaissances compétences outils tempsorganisation
l'amour de ce que tu fais.
23
t’as pas un euro?
Tu aurais une
minute pour moi?
putain la dèche,
man.
Si seulement je m’y
connaissais mieux en
…
Suis ...
24
outils
25
Mes outils - UX
- prototypage: Axure RP Pro ou Balsamiq Mockups
- graphisme: sketch http://bohemiancoding.com/sketch/ +...
26
organisation
27
organisation - Gmail à la place du webmail de l’école (voir tutoriel sur le forum)
- Get Things Done. J'utilise google ...
28
impact du designer
source: http://consumeconsume.com/post/31018082728
A ton avis, sur une échelle de 100, quelle est
ta force créative?
!
Note-le sur un papier.
29
A présent, sur une échelle de 100, évalue
ton sens de l'organisation.
!
Note-le sur un papier.
30
Effectue ce calcul:
!
Créativité x sens de l'organisation = ?
31
Le résultat obtenu, c'est ton potentiel d'impact.
32
{ interlude }
!
qui es-tu?
d'où viens-tu?
quel est ton impact ?
Pourquoi DWM?
!
33
{ interlude 2}
!
Envoye un tweet avec le hashtag #iamdwm et 3 choses à
dire sur toi. "3 random facts à propos de moi:"
!
34
35
CRÉER
36
37
au départ, il y a une demande.
37
au départ, il y a une demande.
38
Ensuite, à ton avis?
au départ, il y a une demande.
Schéma de la création digitale, vision globale.
39
conception du projet
développement
produit
Schéma de la création digitale, vision globale.
39
conception du projet
développement
produitmesure
analyse des données
Ap...
mesure
analyse des données
Apprendre
Schéma de la création digitale, vision globale.
40
conception du projet
développement...
Schéma de la création digitale, vision globale.
41
conception du projet
développement
produit
Processus = série d'étapes.
...
processus créatif
42
Demande
METHODE "WATERFALL"
conception du projet
processus créatif
42
Demande Etude de la demande
- qui est-il et que fait-il?
- quelle est sa situation-
problème actuelle...
processus créatif
42
Demande Etude de la demande Conception de la solution
- Analyse concurrentielle
- public-cible (perso...
processus créatif
42
Demande Etude de la demande Conception de la solution
- Analyse concurrentielle
- public-cible (perso...
processus créatif
42
Demande Etude de la demande Conception de la solution
- Analyse concurrentielle
- public-cible (perso...
processus créatif
42
Demande Etude de la demande Conception de la solution
- Analyse concurrentielle
- public-cible (perso...
processus créatif
42
Demande Etude de la demande Conception de la solution
- Analyse concurrentielle
- public-cible (perso...
processus créatif
42
Demande Etude de la demande Conception de la solution
- Analyse concurrentielle
- public-cible (perso...
processus créatif
43
Demande Etude de la demande Conception de la solution
- Analyse concurrentielle
- public-cible (perso...
44
LES METHODES ITERATIVES / "SPIRALE" et "AGILE"
BA/ba de la gestion commerciale
45
!
Les étapes de gestion commerciale d’un projet, et les documents associés.
Comprenez e...
46
COMMENCER CONCEVOIR PRODUIRE FINIR
demande
commande
problème
solution
virtuel
réel
efforts
récompense
gestion commercia...
PRODUIRE
47
Besoin / Désir
Demande
Commanditaire Fournisseur
Offre : étude de la demande,
proposition de la solution + bud...
Planning et Cahier des charges
PRODUIRE
constitution des contenus
création des interfaces
tests ergonomiques
....
le site ...
49
connais ton médium
contenus connectés, interfaces, interactions
50
INTERNET ?
Interconnected
networks
le réseau des réseaux
INTERNET ?
Interconnected
networks
le réseau des réseaux
URL ?
INTERNET ?
Interconnected
networks
le réseau des réseaux
URL ?
UNIFORM
RESOURCE
LOCATOR
http://subdomain.domain.tld:port/folder/file....
Interconnected
networks
le réseau des réseaux
URL ?
UNIFORM
RESOURCE
LOCATOR
http://subdomain.domain.tld:port/folder/file....
Interconnected
networks
le réseau des réseaux
URL ?
UNIFORM
RESOURCE
LOCATOR
http://subdomain.domain.tld:port/folder/file....
Interconnected
networks
le réseau des réseaux
URL ?
UNIFORM
RESOURCE
LOCATOR
http://subdomain.domain.tld:port/folder/file....
Interconnected
networks
le réseau des réseaux
URL ?
UNIFORM
RESOURCE
LOCATOR
http://subdomain.domain.tld:port/folder/file....
"URL" est lié à la "résolution DNS"
!
Quelqu'un sait ce que cela signifie?
52
Structure de l’URL
URL = Uniform Resource Locator
(= «adresse web»)
53
•
Ex: http://blogs.lesoir.be/exclusif/roi-philippe-...
client
www.lesoir.be = ?
195.13.233.456.dhcp-belgacom.be (adresse dynamique fournie par l’ISP lors de la connexion)
Etape 1
client
www.lesoir.be = ?
195.13.233.456.dhcp-belgacom.be (adresse dynamique fournie par l’ISP lors de la connexion)
I.S.P
...
client
www.lesoir.be = ?
195.13.233.456.dhcp-belgacom.be (adresse dynamique fournie par l’ISP lors de la connexion)
I.S.P
...
client
www.lesoir.be = ?
ip de lesoir.be: 81.246.2.9
195.13.233.456.dhcp-belgacom.be (adresse dynamique fournie par l’ISP ...
client
www.lesoir.be = ?
ip de lesoir.be: 81.246.2.9
195.13.233.456.dhcp-belgacom.be (adresse dynamique fournie par l’ISP ...
client
www.lesoir.be = ?
ip de lesoir.be: 81.246.2.9
195.13.233.456.dhcp-belgacom.be (adresse dynamique fournie par l’ISP ...
client
www.lesoir.be = ?
ip de lesoir.be: 81.246.2.9
serveur web
81.246.2.9
195.13.233.456.dhcp-belgacom.be (adresse dynam...
client
www.lesoir.be = ?
ip de lesoir.be: 81.246.2.9
serveur web
81.246.2.9
195.13.233.456.dhcp-belgacom.be (adresse dynam...
client
www.lesoir.be = ?
ip de lesoir.be: 81.246.2.9
serveur web
81.246.2.9
195.13.233.456.dhcp-belgacom.be (adresse dynam...
client
www.lesoir.be = ?
ip de lesoir.be: 81.246.2.9
serveur web
81.246.2.9
195.13.233.456.dhcp-belgacom.be (adresse dynam...
client
www.lesoir.be = ?
ip de lesoir.be: 81.246.2.9
serveur web
81.246.2.9
195.13.233.456.dhcp-belgacom.be (adresse dynam...
client
www.lesoir.be = ?
ip de lesoir.be: 81.246.2.9
serveur web
81.246.2.9
195.13.233.456.dhcp-belgacom.be (adresse dynam...
un site internet
pour mettre du contenu en ligne
• Que faut-il?
★ un nom de domaine chez un enregistreur de domaines
(«nam...
Quelles sont les qualités
d’un «bon site web"?
57
chapitre en cours
58
un «bon» site web
réponses
• chargement rapide, réactif
• pas d’erreur (404)
• "esthétique", simple à utiliser, lisible,
s...
Thousand-armed Kannon
(buddha de la compassion)
!
Japon, 934 apr. J-C
faire un «bon» site, c’est difficile.
conclusion
•
Faire un «bon» site web, c’est compliqué. Cela exige de faire
attention...
briefing
62
TLT
Tisse La toile
PREMIER PROJET: TISSE LA TOILE
site du projet: http://dwm.re/tisse-la-toile/
briefing: http://dwm.re/tisse-la-toile/briefi...
Tisse la toile
65
Vous recevez
!
un mot
clef
déclencheur
différent
Tisse la toile
66
Tu/vous/chacun effectue
!
une recherche exhaustive
!
à propos de son MCD et de sa relation au web
!
wiki...
Tisse la toile
67
De ces informations
!
Tire une histoire que tu
nous raconteras
oralement
!
de manière
captivante,
!
ta p...
Déroulement de TLT
!
• Semaine 1:
• tu reçois un mot-clef déclencheur
• tu déclenches ta recherche personnelle
• Semaine 2...
POUR VENDREDI SOIR
!
envoye un email à
!
alexandre.plennevaux@prof.heaj.be
!
sujet: TLT - quel est mon MCD ?
!
message: Qu...
MAINTENANT et jusque dimanche soir:
!
tu étudies la demande.
!
Le briefing est détaillé ici:
http://dwm.re/tisse-la-toile/...
Prochain SlideShare
Chargement dans…5
×

2 tid conception-projet-cours1

395 vues

Publié le

Conception de projets - cours 1

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
395
Sur SlideShare
0
Issues des intégrations
0
Intégrations
2
Actions
Partages
0
Téléchargements
3
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

2 tid conception-projet-cours1

  1. 1. 1 t
  2. 2. 2 t copyright: CNN conception de projet - 1
  3. 3. évaluation évaluation • TJ: 30% 
 TP + Remises Workshops + participation aux cours • TFA : 70% • le chemin est plus important à mes yeux que l’objectif. De workshop en workshop, je vais tâcher de voir si tu évolues (Mais tu es nombreux, donc rend toi visible). 3
  4. 4. TOC table des matières • Cours «normaux» • théorie • processus de création • gestion commerciale d’un projet • Apprendre à voir • Raconte le web : TP Tisse La Toile • L’approche graphique réductionniste: «content first» • Workshops • storytelling • interaction design • data visualisation • TFA 4
  5. 5. alexandre plennevaux 5 • web designer/developer depuis 1998 (pixeline.be) • parle anglais, français, espagnol (diplômé en traduction) • enseigne depuis 2009 • dort peu mais rêve beaucoup, sait se taire et écouter. Parle trop vite (le ralentir au besoin). • adore les citations: http://pixeline.be/quotes/
  6. 6. 6
  7. 7. 9
  8. 8. 10 https://pixeline.be
  9. 9. 2tid 11 la longue traîne la crème le ventre mou les autres: la longue traîne adéquationàlaformationdwm les étudiants dwm
  10. 10. 12 2013-14: réussite étudiants DWM: 121 réussite 1ère session: 11 9,090909091% réussite 2ème session: 28 23,140495868% Taux de réussite 32,231404959% Conclusion Moins de 1 étudiant sur 3 est arrivé en 3ème l'année dernière. Pourquoi? Parce que la première est nulle et cela ne risque pas de changer. Parce que tu n'as pas de culture visuelle. Parce que tu bosses le moins possible. Parce que tu es mal organisé. Parce que nous sommes exigeants, et qu'il n'y a qu'un an pour acquérir beaucoup de compétences et connaissances. Parce que c'est un métier complexe.
  11. 11. 13 un conseil?
  12. 12. 14 Travaille. Beaucoup. Tout le temps. L'école doit être ta priorité absolue toute l'année. ! Tu es ton meilleur professeur.
  13. 13. 15 lis. ! ! http://dwm.re/lectures-conseillees/
  14. 14. 16 Regarde. ! ! Apprends à voir. Pas comme un consommateur, mais comme un créateur. Décortique ce que tu trouves "beau". Tous les jours.
  15. 15. 17 70% de ce qu'il te faut ne se trouve pas à l'école.
  16. 16. 18 Input Organise-toi. Améliore sans cesse ta méthode de travail. Deviens une usine. Output
  17. 17. pas une usine à gaz. 19
  18. 18. 20 Input une usine à créer. Output
  19. 19. 20 Input une usine à créer. Output briefings Livrables, acquisition de maitrise technique et conceptuelle
  20. 20. Qu'est-ce qu'il te faut pour réaliser un projet? 21
  21. 21. 22 thunes connaissances compétences outils tempsorganisation
  22. 22. 22 thunes connaissances compétences outils tempsorganisation l'amour de ce que tu fais.
  23. 23. 23 t’as pas un euro? Tu aurais une minute pour moi? putain la dèche, man. Si seulement je m’y connaissais mieux en … Suis trop crevé, ferai cela demain. ces ressources sont rares…
  24. 24. 24 outils
  25. 25. 25 Mes outils - UX - prototypage: Axure RP Pro ou Balsamiq Mockups - graphisme: sketch http://bohemiancoding.com/sketch/ + photoshop - développement: coda 2 + Sublime text + Dash (documentation), Mamp pro: serveur web local + github - virtualbox (pour émuler windows) ! - social : tweetdeck, pratique pour suivre plusieurs hashtags ! - prise de note: evernote ou google docs - email: Gmail - agenda: Google Calendar - gestion des fichiers: dropbox.com . Tous mes projets en cours sont dans dropbox. Je ne crains rien. ! - avec mes clients: Bugs ( http://pixeline.github.io/bugs/ ) - facturation: Totals ( http://www.kedisoft.com/totals/ ) ! - une voiture et un scooter - un imac 21", un macbook pro, un iphone 4, un wiko cink peak (android 4.2), un ipad mini
  26. 26. 26 organisation
  27. 27. 27 organisation - Gmail à la place du webmail de l’école (voir tutoriel sur le forum) - Get Things Done. J'utilise google Agenda constamment pour gérer mes deadlines et mon temps. - "under promise, over deliver". Le client attend le respect des échéances. Sois pessimiste dans ton calcul, et tant mieux si tu livres plus tôt. - le temps, c'est de l'argent. Réfléchis avant d'agir sur la meilleure manière d'arriver du point A au point B. - pas de sentiments, des arguments. Analyse coûts/bénéfices ftw.
  28. 28. 28 impact du designer source: http://consumeconsume.com/post/31018082728
  29. 29. A ton avis, sur une échelle de 100, quelle est ta force créative? ! Note-le sur un papier. 29
  30. 30. A présent, sur une échelle de 100, évalue ton sens de l'organisation. ! Note-le sur un papier. 30
  31. 31. Effectue ce calcul: ! Créativité x sens de l'organisation = ? 31
  32. 32. Le résultat obtenu, c'est ton potentiel d'impact. 32
  33. 33. { interlude } ! qui es-tu? d'où viens-tu? quel est ton impact ? Pourquoi DWM? ! 33
  34. 34. { interlude 2} ! Envoye un tweet avec le hashtag #iamdwm et 3 choses à dire sur toi. "3 random facts à propos de moi:" ! 34
  35. 35. 35
  36. 36. CRÉER 36
  37. 37. 37 au départ, il y a une demande.
  38. 38. 37 au départ, il y a une demande.
  39. 39. 38 Ensuite, à ton avis? au départ, il y a une demande.
  40. 40. Schéma de la création digitale, vision globale. 39 conception du projet développement produit
  41. 41. Schéma de la création digitale, vision globale. 39 conception du projet développement produitmesure analyse des données Apprendre
  42. 42. mesure analyse des données Apprendre Schéma de la création digitale, vision globale. 40 conception du projet développement produit Contentons-nous de ceci pour l'instant
  43. 43. Schéma de la création digitale, vision globale. 41 conception du projet développement produit Processus = série d'étapes. ! Selon toi, par quelles étapes passent la création d'un projet web ?
  44. 44. processus créatif 42 Demande METHODE "WATERFALL" conception du projet
  45. 45. processus créatif 42 Demande Etude de la demande - qui est-il et que fait-il? - quelle est sa situation- problème actuelle, à l'origine de sa demande? - quels sont ses objectifs? METHODE "WATERFALL" conception du projet
  46. 46. processus créatif 42 Demande Etude de la demande Conception de la solution - Analyse concurrentielle - public-cible (personas) - Direction artistique / storytelling - constitution des contenus - IA (Architecture de l'Information) - prototypage de l' UX - tests et itérations - conception de l'univers visuel - mockups - qui est-il et que fait-il? - quelle est sa situation- problème actuelle, à l'origine de sa demande? - quels sont ses objectifs? METHODE "WATERFALL" conception du projet
  47. 47. processus créatif 42 Demande Etude de la demande Conception de la solution - Analyse concurrentielle - public-cible (personas) - Direction artistique / storytelling - constitution des contenus - IA (Architecture de l'Information) - prototypage de l' UX - tests et itérations - conception de l'univers visuel - mockups - qui est-il et que fait-il? - quelle est sa situation- problème actuelle, à l'origine de sa demande? - quels sont ses objectifs? Développement web METHODE "WATERFALL" - mockups > templates html/css/js - frontend development - fucking IE is fucking you - Responsive web design - backend development - optimisation des sources ( minification, combinaison, compression gzip) conception du projet
  48. 48. processus créatif 42 Demande Etude de la demande Conception de la solution - Analyse concurrentielle - public-cible (personas) - Direction artistique / storytelling - constitution des contenus - IA (Architecture de l'Information) - prototypage de l' UX - tests et itérations - conception de l'univers visuel - mockups - qui est-il et que fait-il? - quelle est sa situation- problème actuelle, à l'origine de sa demande? - quels sont ses objectifs? Développement web livraison METHODE "WATERFALL" - mockups > templates html/css/js - frontend development - fucking IE is fucking you - Responsive web design - backend development - optimisation des sources ( minification, combinaison, compression gzip) conception du projet
  49. 49. processus créatif 42 Demande Etude de la demande Conception de la solution - Analyse concurrentielle - public-cible (personas) - Direction artistique / storytelling - constitution des contenus - IA (Architecture de l'Information) - prototypage de l' UX - tests et itérations - conception de l'univers visuel - mockups - qui est-il et que fait-il? - quelle est sa situation- problème actuelle, à l'origine de sa demande? - quels sont ses objectifs? Développement web livraison Validation METHODE "WATERFALL" - mockups > templates html/css/js - frontend development - fucking IE is fucking you - Responsive web design - backend development - optimisation des sources ( minification, combinaison, compression gzip) conception du projet
  50. 50. processus créatif 42 Demande Etude de la demande Conception de la solution - Analyse concurrentielle - public-cible (personas) - Direction artistique / storytelling - constitution des contenus - IA (Architecture de l'Information) - prototypage de l' UX - tests et itérations - conception de l'univers visuel - mockups - qui est-il et que fait-il? - quelle est sa situation- problème actuelle, à l'origine de sa demande? - quels sont ses objectifs? Développement web livraison Validation Validation METHODE "WATERFALL" - mockups > templates html/css/js - frontend development - fucking IE is fucking you - Responsive web design - backend development - optimisation des sources ( minification, combinaison, compression gzip) conception du projet
  51. 51. processus créatif 42 Demande Etude de la demande Conception de la solution - Analyse concurrentielle - public-cible (personas) - Direction artistique / storytelling - constitution des contenus - IA (Architecture de l'Information) - prototypage de l' UX - tests et itérations - conception de l'univers visuel - mockups - qui est-il et que fait-il? - quelle est sa situation- problème actuelle, à l'origine de sa demande? - quels sont ses objectifs? Développement web livraison Validation Validation Validation METHODE "WATERFALL" - mockups > templates html/css/js - frontend development - fucking IE is fucking you - Responsive web design - backend development - optimisation des sources ( minification, combinaison, compression gzip) conception du projet
  52. 52. processus créatif 43 Demande Etude de la demande Conception de la solution - Analyse concurrentielle - public-cible (personas) - constitution des contenus - prototypage - conception de l'univers visuel - qui est-il et que fait-il? - quelle est sa situation- problème actuelle, à l'origine de sa demande? - quels sont ses objectifs? Développement web livraison Validation Validation Validation METHODE "WATERFALL" _ EN REALITE conception du projet
  53. 53. 44 LES METHODES ITERATIVES / "SPIRALE" et "AGILE"
  54. 54. BA/ba de la gestion commerciale 45 ! Les étapes de gestion commerciale d’un projet, et les documents associés. Comprenez et mémorisez ce processus, retenez les noms de ces documents.
  55. 55. 46 COMMENCER CONCEVOIR PRODUIRE FINIR demande commande problème solution virtuel réel efforts récompense gestion commerciale
  56. 56. PRODUIRE 47 Besoin / Désir Demande Commanditaire Fournisseur Offre : étude de la demande, proposition de la solution + budget nécessaire Commande Contrat + Facture 1/3 COMMENCER Contrat signé et Facture 1/3 réglée Conception du projet Etudes: Direction artistique / storytelling, UX, graphique, ergonomique, concurrentielle,... Planning et Cahier des charges CONCEVOIR Validation de l’étude, du planning et du cahier des charges
  57. 57. Planning et Cahier des charges PRODUIRE constitution des contenus création des interfaces tests ergonomiques .... le site réalisé (beta) Réception Provisoire + facture 2/3 FINIR Règlement facture 2/3, RP signée, feedback final Réception Définitive + facture 3/3 débuggage Règlement facture 3/3, RD signée Documentation, formation, Contrat de maintenance.... Validation de l’étude, du planning et du cahier des charges
  58. 58. 49
  59. 59. connais ton médium contenus connectés, interfaces, interactions 50
  60. 60. INTERNET ?
  61. 61. Interconnected networks le réseau des réseaux INTERNET ?
  62. 62. Interconnected networks le réseau des réseaux URL ? INTERNET ?
  63. 63. Interconnected networks le réseau des réseaux URL ? UNIFORM RESOURCE LOCATOR http://subdomain.domain.tld:port/folder/file.ext INTERNET ?
  64. 64. Interconnected networks le réseau des réseaux URL ? UNIFORM RESOURCE LOCATOR http://subdomain.domain.tld:port/folder/file.ext TLD ? INTERNET ?
  65. 65. Interconnected networks le réseau des réseaux URL ? UNIFORM RESOURCE LOCATOR http://subdomain.domain.tld:port/folder/file.ext TLD ? TOP LEVEL DOMAIN INTERNET ?
  66. 66. Interconnected networks le réseau des réseaux URL ? UNIFORM RESOURCE LOCATOR http://subdomain.domain.tld:port/folder/file.ext TLD ? TOP LEVEL DOMAIN PORT par défaut d’un serveur web ? INTERNET ?
  67. 67. Interconnected networks le réseau des réseaux URL ? UNIFORM RESOURCE LOCATOR http://subdomain.domain.tld:port/folder/file.ext TLD ? TOP LEVEL DOMAIN PORT par défaut d’un serveur web ? http://subdomain.domain.tld:80/folder/file.ext INTERNET ?
  68. 68. "URL" est lié à la "résolution DNS" ! Quelqu'un sait ce que cela signifie? 52
  69. 69. Structure de l’URL URL = Uniform Resource Locator (= «adresse web») 53 • Ex: http://blogs.lesoir.be/exclusif/roi-philippe-est-une-fille.html http:// = le protocole (idem: ftp:// , file://, mailto: )
 ( http = hypertext transfer protocol, ftp = file transfer protocol) ensuite, de droite à gauche jusqu’au premier «slash» (/) 
 (du général au particulier) .be = Top Level Domain lesoir = domain name (nom de domaine) blogs = sous-domaine Cet URL correspond à dire à la machine: 
 «va chercher le fichier roi-philippe-est-une-fille.html se trouvant dans le dossier « /exclusif/» sur l’ordinateur be.lesoir.blogs via le protocole http»
  70. 70. client www.lesoir.be = ? 195.13.233.456.dhcp-belgacom.be (adresse dynamique fournie par l’ISP lors de la connexion) Etape 1
  71. 71. client www.lesoir.be = ? 195.13.233.456.dhcp-belgacom.be (adresse dynamique fournie par l’ISP lors de la connexion) I.S.P 195.13.15.25 serveur DNS de l’ISP Etape 1
  72. 72. client www.lesoir.be = ? 195.13.233.456.dhcp-belgacom.be (adresse dynamique fournie par l’ISP lors de la connexion) I.S.P 195.13.15.25 serveur DNS de l’ISP Etape 1
  73. 73. client www.lesoir.be = ? ip de lesoir.be: 81.246.2.9 195.13.233.456.dhcp-belgacom.be (adresse dynamique fournie par l’ISP lors de la connexion) I.S.P 195.13.15.25 serveur DNS de l’ISP Etape 1
  74. 74. client www.lesoir.be = ? ip de lesoir.be: 81.246.2.9 195.13.233.456.dhcp-belgacom.be (adresse dynamique fournie par l’ISP lors de la connexion) I.S.P 195.13.15.25 serveur DNS de l’ISP Etape 1
  75. 75. client www.lesoir.be = ? ip de lesoir.be: 81.246.2.9 195.13.233.456.dhcp-belgacom.be (adresse dynamique fournie par l’ISP lors de la connexion) I.S.P 195.13.15.25 serveur DNS de l’ISP Etape 1 Etape 2
  76. 76. client www.lesoir.be = ? ip de lesoir.be: 81.246.2.9 serveur web 81.246.2.9 195.13.233.456.dhcp-belgacom.be (adresse dynamique fournie par l’ISP lors de la connexion) I.S.P 195.13.15.25 serveur DNS de l’ISP Etape 1 Etape 2
  77. 77. client www.lesoir.be = ? ip de lesoir.be: 81.246.2.9 serveur web 81.246.2.9 195.13.233.456.dhcp-belgacom.be (adresse dynamique fournie par l’ISP lors de la connexion) I.S.P 195.13.15.25 serveur DNS de l’ISP Etape 1 Etape 2
  78. 78. client www.lesoir.be = ? ip de lesoir.be: 81.246.2.9 serveur web 81.246.2.9 195.13.233.456.dhcp-belgacom.be (adresse dynamique fournie par l’ISP lors de la connexion) Salut! Sers-moi le fichier prince- philippe-est-une-fille.html se trouvant dans le dossier « /exclusif/» et ses fichiers associés.I.S.P 195.13.15.25 serveur DNS de l’ISP Etape 1 Etape 2
  79. 79. client www.lesoir.be = ? ip de lesoir.be: 81.246.2.9 serveur web 81.246.2.9 195.13.233.456.dhcp-belgacom.be (adresse dynamique fournie par l’ISP lors de la connexion) Salut! Sers-moi le fichier prince- philippe-est-une-fille.html se trouvant dans le dossier « /exclusif/» et ses fichiers associés.I.S.P 195.13.15.25 serveur DNS de l’ISP Les voici! Etape 1 Etape 2
  80. 80. client www.lesoir.be = ? ip de lesoir.be: 81.246.2.9 serveur web 81.246.2.9 195.13.233.456.dhcp-belgacom.be (adresse dynamique fournie par l’ISP lors de la connexion) Salut! Sers-moi le fichier prince- philippe-est-une-fille.html se trouvant dans le dossier « /exclusif/» et ses fichiers associés.I.S.P 195.13.15.25 serveur DNS de l’ISP Les voici! Etape 1 Etape 2
  81. 81. client www.lesoir.be = ? ip de lesoir.be: 81.246.2.9 serveur web 81.246.2.9 195.13.233.456.dhcp-belgacom.be (adresse dynamique fournie par l’ISP lors de la connexion) Salut! Sers-moi le fichier prince- philippe-est-une-fille.html se trouvant dans le dossier « /exclusif/» et ses fichiers associés.I.S.P 195.13.15.25 serveur DNS de l’ISP Les voici! Etape 1 Etape 2 .js.html .css .mp3 .png .jpg .avi
  82. 82. un site internet pour mettre du contenu en ligne • Que faut-il? ★ un nom de domaine chez un enregistreur de domaines («name registrar») ★ un espace sur un serveur pour héberger ses fichiers
 (un «hébergeur») ★ les fichiers constituant le site en lui-même. 56
  83. 83. Quelles sont les qualités d’un «bon site web"? 57
  84. 84. chapitre en cours 58
  85. 85. un «bon» site web réponses • chargement rapide, réactif • pas d’erreur (404) • "esthétique", simple à utiliser, lisible, s’adapte aux différents devices, aux différentes plates-formes, cohérence forme-contenu, bien hiérarchisé, on sait où l’on est et ce que l’on peut faire • contenu de qualité, dans du html sémantique • SEO • futureproof • voir codex 59
  86. 86. Thousand-armed Kannon (buddha de la compassion) ! Japon, 934 apr. J-C
  87. 87. faire un «bon» site, c’est difficile. conclusion • Faire un «bon» site web, c’est compliqué. Cela exige de faire attention à la forme, au fond, tenir compte des contextes d’utilisation, connaître plusieurs langages de présentation et/ou de programmation, comprendre, au moins de manière basique, les bases de la connectique (RJ45 quelqu’un ?), protocole TCP/IP, etc. • Métier comparable à l’architecture. • Cela prend du temps. On commence tous par faire des sites nuls. • Se remettre sans cesse en question, se tenir au courant, expérimenter. • sur le plan de la conception graphique: pertinence du réductionnisme 61
  88. 88. briefing 62 TLT Tisse La toile
  89. 89. PREMIER PROJET: TISSE LA TOILE site du projet: http://dwm.re/tisse-la-toile/ briefing: http://dwm.re/tisse-la-toile/briefing/ objectifs: projet collaboratif – apprendre l'histoire de ton médium – apprendre à raconter en face à face – utiliser Wordpress – pratiquer le réductionnisme 63
  90. 90. Tisse la toile 65 Vous recevez ! un mot clef déclencheur différent
  91. 91. Tisse la toile 66 Tu/vous/chacun effectue ! une recherche exhaustive ! à propos de son MCD et de sa relation au web ! wikipedia, vimeo, twitter, youtube… ! Fais des relations, écarte-toi du sujet, approprie-toi la recherche, digresse, développe ton propre point de vue. ! Ramasse beaucoup d'informations. Du texte bien sûr, du visuel aussi. ! Explore et catalogue l'univers visuel de ton MCD ?
  92. 92. Tisse la toile 67 De ces informations ! Tire une histoire que tu nous raconteras oralement ! de manière captivante, ! ta première UXP ! en 1 à 3 minutes et 20 slides minimum.
  93. 93. Déroulement de TLT ! • Semaine 1: • tu reçois un mot-clef déclencheur • tu déclenches ta recherche personnelle • Semaine 2 (en labos): premier encodage sur le site TLT • Semaine 3+4+5: storyshop • Semaine 5: • préparation de la présentation: des slides réductionnistes. (Un briefing le précisera) • Mise à jour de la publication sur TLT • Semaine 6: présentations devant la classe. Evaluation 1/2 • Semaine 7: publication finale sur TLT. Démarrage de la phase "maintenance corrective" • Semaine 13: évaluation de la publication sur TLT. Evaluation 2/2 • Système graphique réductionniste et cohérent. 68
  94. 94. POUR VENDREDI SOIR ! envoye un email à ! alexandre.plennevaux@prof.heaj.be ! sujet: TLT - quel est mon MCD ? ! message: Quel est mon MCD ? ! Tu recevras en retour d'ici DIMANCHE SOIR ton mot-clef. Tu peux alors débuter ta recherche. (pour certains, ambigus, j'ajoute une indication entre parenthèses) 69
  95. 95. MAINTENANT et jusque dimanche soir: ! tu étudies la demande. ! Le briefing est détaillé ici: http://dwm.re/tisse-la-toile/briefing/ ! Si tu as des questions, publie-les sur http://dwm.re/pond/ 70 TU RÉDIGES UN BRIEFING PERSONNEL, A TA SAUCE. Cela t'aidera à t'approprier le projet.

×