forked from zufrieden/slides-veille-tech-heig-2022
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
3276 lines (3123 loc) · 123 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>Veille technologique - T153 HEIG-VD - COMEM - Marc Friederich</title>
<meta name="description" content="Contenu du module Laboratoire Veille Technologique - donné par Marc Friederich dans le cadre de la formation COMEM à la HEIG-VD">
<link rel="stylesheet" href="dist/reset.css">
<link rel="stylesheet" href="dist/reveal.css">
<link rel="stylesheet" href="dist/theme/zufrieden.css" id="theme">
<!-- Theme used for syntax highlighting of code -->
<link rel="stylesheet" href="css/monokai.css">
</head>
<body>
<svg xmlns="//www.w3.org/2000/svg" version="1.1" class="svg-filters" style="display:none;">
<defs>
<filter id="marker-shape">
<feTurbulence type="fractalNoise" baseFrequency="0 0.15" numOctaves="1" result="warp" />
<feDisplacementMap xChannelSelector="R" yChannelSelector="G" scale="30" in="SourceGraphic" in2="warp" />
</filter>
</defs>
</svg>
<div class="reveal">
<div class="slides">
<!-- # Cover -->
<section>
<h1>Laboratoire<span style="font-size:0.6em;">🧪</span></h1> </marquee>
<marquee scrollamount="20"><h3>Veille technologique — Veille technologique — Veille technologique</h3></marquee>
<p>M49 – HEIG-VD - COMEM</p>
<p>⛄️ Marc Friederich</p>
</section>
<!-- ## Disclaimer -->
<section data-background-color="#b300f9">
<h1>Disclaimer</h1>
<aside class="notes">
<ul>
<li>Participation active required</li>
<li>Ce sera technique mais aussi un peu philosophique</li>
<li>mais j'ai surtout envie de vous questionner sur votre chemin de carrière</li>
<li>Profitez de mon "inexpérience" d'enseignant, et de mon "expérience" de professionnel.</li>
<li>C'est un cours que j'aurai aimé avoir durant ma formation Comem</li>
</ul>
</aside>
</section>
<!-- ## Introduction (définition et contexte) -->
<section>
<section>
<h1>Bonjour 👋</h1>
</section>
<section>
<h2>Marc Friederich ☃️</h2>
<h3 class="fragment">🥰 web</h3>
<aside class="notes">
<h3 class="fragment">simple, accessible, resilient, fast, distributed, diverse, empowering, open, evolving and playful.</h3>
Je m'appelle Marc...<br/>
J'ai publié mon premier site en 1997<br/>
Ça fait 25 ans .... lol<br/>
Je continue à être amoureux du web
<p style="color:red;">@push Pourquoi j'aime autant le web - https://zufrieden.io/writing/a-love-letter-to-the-web/</p>
</aside>
</section>
<section>
<h2>La veille technologique ?</h2>
<aside class="notes">
Organiser sa formation continue, se tenir au courant des prochaines tendances et anticiper les grands changements dans votre domaine de prédilection.
</aside>
</section>
<section data-background-image="src/weforum_top_10_skills_2025.jpeg"
data-background-size="contain" data-background-color="#fff">
<img src="src/weforum_top_10_skills_2020_2015.png" alt="" class="fragment fade-up" style="box-shadow: 0px 0px 300px 0px rgba(0,0,0,1); border:10px solid white;">
<img src="src/manager_vs_leader.jpg" alt="" class="fragment fade-up" style="box-shadow: 0px 0px 300px 0px rgba(0,0,0,1); border:10px solid white;position: absolute;left:0;right:0;">
<aside class="notes">
<p>
dans les 10 compétences importantes pour 2025 selon le World Economic Forum - Vous avez <strong>Innovation</strong>, <strong>active learning</strong> et <strong>learning strategies</strong>
</p>
<p>A noter que ça a bien changé !</p>
<p>Ce n'était pas une compétence dans les top 10 en 2015 et 2020</p>
<p>Et on a remplacé People Management par leadership !?!</p>
<p>Vous connaissez la différence entre un leader et un manager ?</p>
<p>Le leader demande quoi, et pourquoi. Le manager comment et quand</p>
<p>Vous n'allez pas vous en rappeler. Alors que si je vous montre cette image ça va vous aider à vous souvenir de la différence</p>
<p>
<small>
<a href="https://www.weforum.org/agenda/2016/01/the-10-skills-you-need-to-thrive-in-the-fourth-industrial-revolution/">
https://www.weforum.org/agenda/2016/01/the-10-skills-you-need-to-thrive-in-the-fourth-industrial-revolution/
</a>
</small>
</p>
<p>
<small>
<a href="https://www.weforum.org/agenda/2020/10/top-10-work-skills-of-tomorrow-how-long-it-takes-to-learn-them/">
https://www.weforum.org/agenda/2020/10/top-10-work-skills-of-tomorrow-how-long-it-takes-to-learn-them/
</a>
</small>
</p>
<p>
<small>
<a href="https://www.proschoolonline.com/blog/managers-vs-leaders">https://www.proschoolonline.com/blog/managers-vs-leaders</a>
</small>
</p>
</aside>
</section>
<section>
<h2>Pourquoi un laboratoire ?</h2>
<aside class="notes">
<ul>
<li>Vous avez déjà eu un cours sur le suivi des évolutions technologique</li>
<li>Vous avez eu ou aurez un cours sur la gestion des connaissances Knowledge management</li>
<li>À priori, la théorie - vous l'avez déjà acquise : L'objectif est une mise en pratique</li>
<li>Mettre en place votre système, qu'il vous suive un bon moment</li>
<li>À noter que, pour que ça fonctionne, il faut que vous sachiez un peu clairement ce que vous voulez faire ! </li>
</ul>
</aside>
</section>
<section>
<h2>Motivation personnelle</h2>
<aside class="notes">
<p>Pourquoi j'ai eu envie de vous proposer ce talk ?</p>
<ol>
<li>La veille est un élément essentiel de nos métiers, du web mais pas seulement. C'est d'ailleurs pour moi une de ses plus grande richesse !</li>
<li>Je le vois dans les personnes que l'on recrute chez Antistatique, dans le marché romand en général</li>
<li>Je crois avoir passablement appris et expérimenté sur le sujet, pour me sentir un peu légitime de vous en parler </li>
<li>Entre conférences, meetups etc ... (participation, présentation, organisation)</li>
</ol>
<p>
<em>Comme à chaque intervention dans les formations des métiers des médias (surtout les généralistes multimedia/mediamaticiens/ingénieur des medias).</em> J'en profite pour vous sensibiliser sur la nécessiter de trouver votre voie<br/>
-> qqun se souvient de Ikigai ? qui l'a mis à jour ?
</p>
</aside>
</section>
<section>
<h2>Comprendre ma relation à mon métier</h2>
<aside class="notes">
<p>Cette formation est une chance, en même temps une malédiction. Vous serez confronté au dilemme du Spécialiste/Généraliste. Dans tous les cas, vous devrez à un moment aiguiser une compétence. Vous allez découvrir que la largeur de vos compétences s'avère un atout.</p>
<p>Mon chemin est un des chemin possible en passant par votre formation. Il y en a plein d'autres.</p>
<p>Un peu de mon background.</p>
</aside>
</section>
<section>
<h2>
💾 1998 > 2001 > 2003
</h2>
<aside class="notes">
<ul>
<li>
1998 > premier site internet
Début de la passion pour ce média
</li>
<li>
2001 > webmaster du site de l'entreprise de Taxi, boulangerie, quincaillerie, paroisse du village
Début de l'apprentissage
</li>
<li>
2003 > En parallèle du CFC, création de Antistatique (société simple) avec 2 copains de classe
</li>
</ul>
</aside>
</section>
<section data-background-image="src/veille_photo_comem_2005.jpeg"
data-background-size="cover" data-background-color="#000" data-background-opacity="0.5">
<h2>Comem+ 34</h2>
<p>2005</p>
</section>
<section data-background-image="src/veille_photo_evtek_2006.jpeg"
data-background-size="cover" data-background-color="#000">
<h2>Evtek Finland</h2>
<p>2006</p>
</section>
<section data-background-image="src/veille_photo_antistatique_2008.jpeg"
data-background-size="cover" data-background-color="#000" data-background-opacity="0.5">
<h2>Antistatique</h2>
<p>2008</p>
<aside class="notes">
2008-2020 – Fondation de Antistatique
started with :
3 fondateurs (Alberto, Gilles et Marc)
50 projets dans le portfolio, 40 clients
Now :
12 ans
21 collaborateurs
4 associés
3000 projets
</aside>
</section>
<section data-background-image="https://zufrieden.io/images/2018_performanceweb.jpg"
data-background-size="cover" data-background-color="#000" data-background-opacity="0.5">
<h2>Participation aux conférences</h2>
<aside class="notes">
Meetup, conférences. D'abord comme participant puis ensuite comme speaker
</aside>
</section>
<section data-background-image="src/veille_photo_interaction18.jpg"
data-background-size="cover" data-background-color="#000" data-background-opacity="0.5">
<h2>Organisation de conférences</h2>
<aside class="notes">
En 2018, dans la core-team organisateur de Interaction18 à Lyon. Conférence internationale qui réunit les designers d'interaction.
</aside>
</section>
</section>
<!-- ## Objectifs et fonctionnement du laboratoire -->
<section>
<section>
<h2>🧪 L'objectif du lab</h2>
<ul>
<li class="fragment fade-up">Importance de la veille</li>
<li class="fragment fade-up">Prendre du recule sur votre profession</li>
<li class="fragment fade-up">Mécanismes de la gestion des connaissances</li>
<li class="fragment fade-up">Trouver <strong>votre système</strong></li>
</ul>
<aside class="notes">
<ul>
<li>Vous faire prendre conscience de l'importance de la veille pour votre parcours professionnel</li>
<li>Recule sur la profession des médias, la transformation digitale et les technologies de l'information. Vous faire prendre conscience des effets du temps qui passe</li>
<li>Comprendre les mécanismes de la veille et de la gestion des connaissances personnelles</li>
<li>Vous aider à trouver votre système</li>
</ul>
</aside>
</section>
<section>
<h2>Comment</h2>
<ol class="steps">
<li class="fragment fade-up">
<span class="step-icon">🎲</span>
<strong class="step-name">6 étapes</strong>
</li>
<li class="fragment fade-up">
<span class="step-icon">🚧</span>
<strong class="step-name">Travaux pratiques</strong>
</li>
<li class="fragment fade-up">
<span class="step-icon">📦</span>
<strong class="step-name">Livrable web</strong>
</li>
<li class="fragment fade-up">
<span class="step-icon">💔</span>
<strong class="step-name">Travail solo</strong>
</li>
<li class="fragment fade-up">
<span class="step-icon">🎙</span>
<strong class="step-name">Présentation</strong>
</li>
</ol>
<aside class="notes">
<p>Le laboratoire se calque sur les 6 étapes de la veille technologique. A chaque étape, vous réaliserez un bout du travail pratique correspondant à l'étape.</p>
<p>L'idée est d'alterner théorie/pratique</p>
<p>Livrable sous forme d'un BLOG que vous aller réaliser à l'aide de HUGO et héberger le tout sur Github</p>
<p>C'est un travail perso car je vous pousse à réfléchir sur ce qui vous motive dans votre métier</p>
<p>La présentation vous donne un peu de pression, de bien faire l'exercice. C'est un élément si essentiel dans votre formation et dans vos métiers plus tard.</p>
</aside>
</section>
<section>
<table style="font-size:0.4em;margin-top:1em;">
<tr>
<td width="30%">
<h4>
Livrable attendu
</h4>
</td>
<td>
<h3>Blog traitant de votre domaine de veille</h3>
<p>4 articles (résumé des informations dénichées), 1 article (Explication du système d'écoute mis en place) et 1 article (expérimentation réalisée)</p>
<p>Une page "À propos" qui explique votre domaine, ce qui vous lie à ce domaine (Ikigai) et les taxonomies</p>
</td>
</tr>
<tr>
<td>
<h4>
90% – contenu
</h4>
</td>
<td>
<p>
✅ Le domaine est en relation avec votre Ikigai, ainsi que les taxonomies sont expliqués sur une page <strong>À propos</strong>.
</p>
<p>
✅ Les 6 articles sont en relation avec le domaine (dont 1 sur une expérimentation et 1 avec le système et la liste des sources d'écoute).
</p>
<p>
✅ Le contenu des articles cite la/les sources et explique en quoi ils sont intéressants pour vous et votre domaine et à quel moment cela vous sera utile.
</p>
</td>
</tr>
<tr>
<td>
<h4>
10% – technique, la forme
</h4>
</td>
<td>
<p>
✅ Le site est généré avec Hugo
</p>
<p>
✅ Le thème est bien choisi (il correspond au domaine)
</p>
<p>
✅ Le site est hébergé sur github et se génére via Github Actions
</p>
</td>
</tr>
</table>
<aside class="notes">
On aura l'occasion d'en reparler (je vous recommuniquerais ce tableau)<br/>
L'évaluation du cours me permet de voir si l'objectif est atteint. J'insiste sur : <br/>
- Je veux être bien sûr que c'est le domaine qui vous intéresse<br/>
- Je serai disponible pour en discuter si vous avez de la peine à en trouver un ou le définir<br/>
- Je m'intéresse au contenu mais surtout comment vous l'aurez trouvé et ce que vous en avez apprit <br/>
- Je veux aussi savoir pourquoi vous avez choisi celui-ci<br/>
- Peu de points sur la technique (Vous ne serez pas tous des développeurs, mais vous devez comprendre ce qui est en jeu).
</aside>
</section>
<section data-background-color="#b300f9">
<h2>Questions à cette étape ?</h2>
<aside class="notes">
<p>Vous êtes quel type de classe ?</p>
</aside>
</section>
</section>
<section>
<section>
<h2>La veille technologique</h2>
<p>Organiser sa formation continue, se tenir au courant des prochaines tendances et anticiper les grands changements dans votre domaine de prédilection.</p>
</section>
<section>
<h2 class="fragment fade-out">Les étapes de la veille</h2>
<ol class="steps">
<li class="fragment fade-up">
<span class="step-icon">🎯</span>
<strong class="step-name">Le domaine</strong>
</li>
<li class="fragment fade-up">
<span class="step-icon">📡</span>
<strong class="step-name">Système d'écoute</strong>
</li>
<li class="fragment fade-up">
<span class="step-icon">🎚</span>
<strong class="step-name">Workflow de tri</strong>
</li>
<li class="fragment fade-up">
<span class="step-icon">🗃</span>
<strong class="step-name">Classement</strong>
</li>
<li class="fragment fade-up">
<span class="step-icon">⏳</span>
<strong class="step-name">L'épreuve du temps</strong>
</li>
<li class="fragment fade-up">
<span class="step-icon">💡</span>
<strong class="step-name">Exploitation</strong>
</li>
</ol>
<aside class="notes">
<p>Pour chaque étape, nous allons étudier des techniques, discuter des options qui s'offrent à vous et mettre en pratique.</p>
<ol>
<li><strong>🎯Le domaine</strong> – ce qui vous intéresse et qui est votre expertise principale, il est important de l'identifier</li>
<li><strong>📡Système d'écoute</strong> – Où s'informer, comment obtenir les bonnes informations, éviter les bulles</li>
<li><strong>🎚Workflow de tri</strong> – Un système qui permet de trier, revenir sur les éléments clés</li>
<li><strong>🗃Classement</strong> – taxonomie et classification</li>
<li><strong>⏳L'épreuve du temps</strong> – un système qui fonctionne dans le temps</li>
<li><strong>💡Exploitation</strong> – utiliser cette connaissance</li>
</ol>
</aside>
</section>
</section>
<!-- ## 🎯Le domaine -->
<!--
Choix du domaine
Granularité du domaine
Spécialisation, pourquoi? et après?
Perception de vos métiers au sein de la formation
Orientation dans un "plan de carrière"
-> Trouver votre domaine favoris
-> Répondre aux questions existentiel
-> Pourquoi ça m'intéresse?
-> Qu'est-ce que cela va m'apporter professionnellement?
-> Fiche de domaine : Dénomination, mot clés, sur-domaine, sous-domaines
-->
<section>
<section>
<h2>
<span class="step-icon">🎯</span><br/>
Le domaine
</h2>
<aside class="notes">
Le plus important, c'est le QUOI<br/>
On ne peut pas s'informer sur tout, il faut choisir un sujet d'écoute. Essayez d'y réfléchir ...
</aside>
</section>
<section>
<h2>Choix du domaine</h2>
<p>Spécialistes <strong>vs</strong> Généralistes</p>
<aside class="notes">
<p>Pour le laboratoire, pour votre "carrière"</p>
<p>Se poser la question fondamentale : Ce que j'ai vraiment envie de faire</p>
<p>Se positionner pour le travail de bachelor</p>
<p>Retour à notre grand thème Spécialistes vs généralistes</p>
</aside>
</section>
<section>
<h3>Le cercle <del>de l'ennui</del> du fun</h3>
<aside class="notes">
C'est important de bien choisir ! Ça va vous suivre !<br/>
Source : https://www.youtube.com/watch?v=5PW4oQgBQXw
<p style="color:red;">@push - super talk de Michael Flarup - sur sa carrière de designer, de maker : https://www.youtube.com/watch?v=5PW4oQgBQXw</p>
</aside>
</section>
<section data-background-image="src/circle_02.png" data-background-size="contain">
<aside class="notes">
Le cercle de l'ennui<br/>
Parler de Plomb<br/>
Source : https://www.youtube.com/watch?v=5PW4oQgBQXw
</aside>
</section>
<section data-background-image="src/circle_01.png" data-background-size="contain">
<aside class="notes">
Le cercle du fun
Source : https://www.youtube.com/watch?v=5PW4oQgBQXw
</aside>
</section>
<section>
<svg viewBox="0 0 186 186" id="ikigai">
<g class="lvl-1">
<path class="love" d="M92.75,47.34A57.49,57.49,0,0,1,147,38.48a57.51,57.51,0,0,0-108.54,0,57.49,57.49,0,0,1,54.27,8.86Z" />
<text x="50%" y="11%" class="small">What you</text>
<text x="50%" y="14%">Love</text>
<path class="needs" d="M185.5,92.75A57.53,57.53,0,0,0,147,38.48a57.49,57.49,0,0,1-8.86,54.27A57.49,57.49,0,0,1,147,147,57.53,57.53,0,0,0,185.5,92.75Z" />
<text x="88%" y="48.5%" class="small">What the world</text>
<text x="88%" y="51.5%">Needs</text>
<path class="money" d="M92.75,138.16A57.49,57.49,0,0,1,38.48,147,57.51,57.51,0,0,0,147,147a57.49,57.49,0,0,1-54.27-8.86Z" />
<text x="50%" y="86%" class="small">What you can be</text>
<text x="50%" y="89%">paid for</text>
<path class="skills" d="M47.34,92.75a57.49,57.49,0,0,1-8.86-54.27,57.51,57.51,0,0,0,0,108.54,57.49,57.49,0,0,1,8.86-54.27Z" />
<text x="12%" y="48.5%" class="small">What you're</text>
<text x="12%" y="51.5%">good at</text>
</g>
<g class="lvl-2">
<path class="mission" d="M92.75,47.34a57.61,57.61,0,0,1,19,26.39,57.61,57.61,0,0,1,26.39,19A57.49,57.49,0,0,0,147,38.48a57.49,57.49,0,0,0-54.27,8.86Z" />
<text x="69%" y="31%">Mission</text>
<path class="vocation" d="M138.16,92.75a57.61,57.61,0,0,1-26.39,19,57.61,57.61,0,0,1-19,26.39A57.49,57.49,0,0,0,147,147a57.49,57.49,0,0,0-8.86-54.27Z" />
<text x="69%" y="69%">Vocation</text>
<path class="profession" d="M92.75,138.16a57.61,57.61,0,0,1-19-26.39,57.61,57.61,0,0,1-26.39-19A57.49,57.49,0,0,0,38.48,147a57.49,57.49,0,0,0,54.27-8.86Z" />
<text x="31%" y="69%">Profession</text>
<path class="passion" d="M47.34,92.75a57.61,57.61,0,0,1,26.39-19,57.61,57.61,0,0,1,19-26.39,57.49,57.49,0,0,0-54.27-8.86,57.49,57.49,0,0,0,8.86,54.27Z" />
<text x="31%" y="31%">Passion</text>
</g>
<g class="lvl-4">
<path class="ikigai" d="M111.77,73.73a57.62,57.62,0,0,0-38,0,57.62,57.62,0,0,0,0,38,57.62,57.62,0,0,0,38,0,57.62,57.62,0,0,0,0-38Z" />
<text x="50%" y="50%">Ikigai</text>
</g>
<g class="lvl-3">
<path class="delight" d="M111.77,73.73a57.61,57.61,0,0,0-19-26.39,57.61,57.61,0,0,0-19,26.39,57.62,57.62,0,0,1,38,0Z">
</path>
<text x="50%" y="33%">Delight & fullness</text>
<text x="50%" y="35%">but no wealth</text>
<path class="excitement" d="M111.77,73.73a57.62,57.62,0,0,1,0,38,57.61,57.61,0,0,0,26.39-19A57.61,57.61,0,0,0,111.77,73.73Z">
</path>
<text x="67%" y="50%">Excitement & complacency</text>
<text x="67%" y="52%">but sense of uncertainty</text>
<path class="comfort" d="M73.73,111.77a57.61,57.61,0,0,0,19,26.39,57.61,57.61,0,0,0,19-26.39,57.62,57.62,0,0,1-38,0Z">
</path>
<text x="50%" y="67%">Comfortable but feeling</text>
<text x="50%" y="69%">of emptiness</text>
<path class="satisfaction" d="M73.73,73.73a57.61,57.61,0,0,0-26.39,19,57.61,57.61,0,0,0,26.39,19,57.62,57.62,0,0,1,0-38Z">
</path>
<text x="33%" y="50%">Satisfaction, but feeling</text>
<text x="33%" y="52%">of uselessness</text>
</g>
</svg>
<!-- Source : https://codepen.io/mkmueller/pen/JBEBjL -->
<aside class="notes">
<p>Prenez un peu de temps pour réfléchir à votre Ikigai</p>
<p>Principe d'équilibre au quotidien entre ce que l'on aime faire, ce pourquoi on est bon, que le monde a besoin et pour lequel on peut même demander de l'argent</p>
<p>On cherche ici à trouver le bonheur au travail</p>
<p>https://blogs.mediapart.fr/flebas/blog/240316/l-arnaque-de-l-etymologie-du-mot-travail</p>
</aside>
</section>
<section>
<h2>🚧</h2>
<h2>Exercice pratique nº1</h2>
<p>Tracer votre Ikigai. <br/>Ce pourqui vous vous levez le matin <mark>(en semaine)</mark></p>
<p class="fragment fade-up">30 min, solo</p>
<p class="fragment fade-up">C'est un exercice personnel</p>
<aside class="notes">
30min, solo <br/>
</aside>
</section>
<section>
<h2>Quel élément de la formation COMEM vous passionne le plus ?</h2>
<aside class="notes">
Je fais une petite pause sur cette slide. pour que vous y réfléchissiez encore un peu :-)<br/>
à placer dans votre ikigai
</aside>
</section>
<section data-background-color="#D466FF">
<table class="map2x2">
<tr>
<td style="vertical-align: bottom;">
technique
</td>
<td style="vertical-align: top;">
expertise
</td>
</tr>
<tr>
<td style="vertical-align: bottom; text-align: right;">
management
</td>
<td style="vertical-align: top; text-align: right;">
communication
</td>
</tr>
</table>
<aside class="notes">
<p>Une manière de représenter les axes de la formation en ingénierie des médias.</p>
<p>
axe des x : tourné vers l'outil, tourné vers l'humain (je mets marketing et communication dans le même panier)
</p>
<p>
axe des y : généraliste à spécialiste. Ou gérer vs faire. (a savoir qu'on ne peut pas commencer sa carrière par gérer. Il faut commencer par faire :-P)
</p>
<p>Essayez de vous positionner sur cette grille</p>
</aside>
</section>
<section>
<h2>🗺 Fiche de domaine</h2>
<table>
<tr>
<td width="30%"><strong>Domaine</strong></td>
<td>Dénomination, ensemble de technologies, industrie, ...</td>
</tr>
<tr>
<td><strong>Mots-clés</strong></td>
<td>Lexique du domaine</td>
</tr>
<tr>
<td><strong>Sous-domaines</strong></td>
<td>Division en sous-thèmes et domaines directement apparentés</td>
</tr>
<tr>
<td><strong>Pourquoi ?</strong></td>
<td>Raison de mon intérêt, lien avec mon (futur) métier, adéquation avec mon ikigai</td>
</tr>
</table>
<aside class="notes">
<p>
Définir plus précisément un domaine de prédilection. Si on imagine par exemple, dans mon cas, un élément précis du web qui me passionne : Le CSS
</p>
</aside>
</section>
<section>
<h3>Exemple : Design d'interaction web</h3>
<table style="font-size:0.8em;">
<tr>
<td width="30%"><strong>Domaine</strong></td>
<td>Mise en page et design d'interaction web : principalement autour des technologies HTML/<mark>CSS</mark> et JS</td>
</tr>
<tr>
<td><strong>Mots-clés</strong></td>
<td>Layouting, animation, interactivité, UX, accessibilité, responsive, print layout, performances, progressive enhancement, graceful degradation</td>
</tr>
<tr>
<td><strong>Sous-domaines</strong></td>
<td>Mise en page, interactivité, design systems(styleguide), maintenance, collaboration design/dev</td>
</tr>
<tr>
<td><strong>Pourquoi ?</strong></td>
<td>Intersection entre design et technologie</td>
</tr>
</table>
<aside class="notes">
<p>
Le design d'interaction me passionne depuis 1998, la différence même avec le design print.
</p>
</aside>
</section>
<section>
<h1>🚧</h1>
<h2>Exercice pratique nº2</h2>
<p>Définir votre domaine de veille, Thème favoris, <mark>votre passion</mark></p>
<p class="fragment fade-up">30 min, solo puis présentation à la classe</p>
<p class="fragment fade-up">Rédaction de la fiche de domaine (Dénomination, mots-clés, sous-domaines)</p>
<aside class="notes">
45min, solo <br/>
ex : Un langage, une stack de technologie (penser aux usages plus qu'à l'outil) (mais pas un framework). Quelque chose qui dure dans le temps
</aside>
</section>
<section>
<style>
.map2x2{
width:100%;
height:60vh;
border: 1px solid currentcolor;
}
.map2x2 td{
width: 50%;
height: 50%;
border: 1px solid currentcolor;
}
</style>
<table class="map2x2">
<tr>
<td style="vertical-align: bottom;">
technique
</td>
<td style="vertical-align: top;">
expertise
</td>
</tr>
<tr>
<td style="vertical-align: bottom; text-align: right;">
management
</td>
<td style="vertical-align: top; text-align: right;">
communication
</td>
</tr>
</table>
<aside class="notes">
<h3>Classer le domaine dans la grille</h3>
<p>
Retour à notre tableau
</p>
<p>Chacun votre tour, présenter votre domaine, le pourquoi et placez le sur la grille</p>
<p>
Dans mon exemple : le CSS <br/>
Pourquoi : Intersection entre design et technologie<br/>
Mon point est en haut au centre, car je le défini comme un domaine plus d'expertise que de gestion.
</p>
</aside>
</section>
</section>
<!-- ## 📡Système d'écoute -->
<!--
Où trouver l'information
Outils :)
Lieux? Événements?
Événements officiels, standardisation du domaine?
-> Via les réseaux professionnels, et personnel
-> Définir une liste d'écoute
-> fiche d'écoute : Magazines, comptes twitter, newsletter, linkedIn, Reddit, Instagram, etc...
-> Réfléchir au concept d'URL :-P
-->
<section>
<section>
<ol class="steps">
<li class="fragment shrink">
<span class="step-icon">🎯</span>
<strong class="step-name">Le domaine</strong>
</li>
<li class="fragment grow">
<span class="step-icon">📡</span>
<strong class="step-name">Système d'écoute</strong>
</li>
<li class="">
<span class="step-icon">🎚</span>
<strong class="step-name">Workflow de tri</strong>
</li>
<li class="">
<span class="step-icon">🗃</span>
<strong class="step-name">Classement</strong>
</li>
<li class="">
<span class="step-icon">⏳</span>
<strong class="step-name">L'épreuve du temps</strong>
</li>
<li class="">
<span class="step-icon">💡</span>
<strong class="step-name">Exploitation</strong>
</li>
</ol>
<aside class="notes">
Le domaine est défini, passons maintenant au système d'écoute. La veille finalement c'est écouter, rester attentif.
</aside>
</section>
<section>
<h2>
<span class="step-icon">📡</span><br/>
Système d'écoute
</h2>
<aside class="notes">
Comment, où et vers qui obtenir l'information. La précieuse information sur les nouveautés, les prochaines tendances, la direction du domaine...
</aside>
</section>
<section>
<h2>Online/Offline<span class="fragment fade-up">😷</span></h2>
<aside class="notes">
<p>2 canaux distincts même si .. aujourd'hui même les conférences sont finalement en ligne :-)</p>
</aside>
</section>
<section>
<h2>Canaux 🔮</h2>
<ul>
<li class="fragment">
Réseaux sociaux
</li>
<li class="fragment">
Blogs / magazines
</li>
<li class="fragment">
Podcasts
</li>
<li class="fragment">
Newsletters
</li>
<li class="fragment">
Événements (meetup, conférence)
</li>
<li class="fragment">
Agrégateurs (alertes)
</li>
</ul>
<aside class="notes">
<p>Les canaux sont distinct selon le type de domaine que l'on écoute</p>
<p>Pour chaque industrie, on distingue des canaux plus ou moins fournis</p>
</aside>
</section>
<section>
<h2>Émetteurs 📣</h2>
<ul>
<li class="fragment">
Personnalité du domaine
</li>
<li class="fragment">
Influenceurs
</li>
<li class="fragment">
Organisations professionnelles
</li>
<li class="fragment">
Organismes de standardisation
</li>
<li class="fragment">
Entreprises leader dans le domaine
</li>
</ul>
<aside class="notes">
Personnes ou organisations
</aside>
</section>
<section>
<h2>Astuces 🎮</h2>
<aside class="notes">
Il n'y a pas vraiment de méthode, je pense plus à des trucs et astuces pour trouver les bons canaux et les bons émetteurs.
</aside>
</section>
<section data-background-image="src/Elon-Musk-Buy-Twitter-Friday.jpg" data-background-size="cover">
<aside class="notes">
Qui utilise twitter ? <br/>
Il est devenu pour moi un lieu très prolifique de veille !<br/>
Pourquoi ?
</aside>
</section>
<section data-background-image="src/veille_speakers_twitter_quite.png" data-background-size="contain">
<aside class="notes">
<p>Ces derniers jours tout le monde quitte le navire et attend de voir où la veille va arriver</p>
</aside>
</section>
<section data-background-image="src/pcctash.jpg" data-background-size="cover">
<aside class="notes">
<p>Internet c'est ça ....</p>
</aside>
</section>
<section data-background-image="src/internet_museum.jpg" data-background-size="cover">
<aside class="notes">
<h2>Internet a la mémoire courte</h2>
<p>On va le voir c'est important de dissocier les émetteurs des moyens de diffusion</p>
<p>Vous voulez suivre des personnes/entités même quand ils/elles auront quitté twitter </p>
</aside>
</section>
<section>
<h4>Conférences → speakers</h4>
<div class="r-stack">
<img src="src/veille_speakers0.png" class="fragment fade-up">
<img src="src/veille_speakers1.png" class="fragment fade-up">
<img src="src/veille_speakers2.png" class="fragment fade-up">
<img src="src/veille_speakers_twitter_rabit_hole0.png" class="fragment fade-up">
<img src="src/veille_speakers_twitter_rabit_hole1.png" class="fragment fade-up">
<img src="src/veille_speakers_twitter_rabit_hole2.png" class="fragment fade-up">
<img src="src/veille_speakers_twitter_rabit_hole3.png" class="fragment fade-up">
<img src="src/veille_speakers_twitter_rabit_hole4.png" class="fragment fade-up">
</div>
<aside class="notes">
<p>Qui utilise Twitter ?</p>
<p>Dans mon domaine de prédilection, c'est un canal très utilisé</p>
<p>Besoin d'une introduction à twitter ? Followers, mécanisme, les listes etc ... ?</p>
</aside>
</section>
<section>
<div class="r-stack">
<img src="src/veille_speakers_twitter_rabit_hole6.png" class="fragment fade-up">
<img src="src/veille_speakers_twitter_rabit_hole7.png" class="fragment fade-up">
<img src="src/veille_speakers_twitter_rabit_hole8.png" class="fragment fade-up">
</div>
<aside class="notes">
<p>Dénicher les listes d'émetteurs</p>
</aside>
</section>
<section>
<div class="r-stack">
<img src="src/veille_speakers1.png">
<img src="src/veille_notist_6.png" class="fragment fade-up">
<img src="src/veille_notist_5.png" class="fragment fade-up">
<img src="src/veille_notist_4.png" class="fragment fade-up">
<img src="src/veille_notist_3.png" class="fragment fade-up">
<img src="src/veille_notist_2.png" class="fragment fade-up">
<img src="src/veille_notist_1.png" class="fragment fade-up">
<img src="src/veille_notist_0.png" class="fragment fade-up">
</div>
<aside class="notes">
<p>Rachel Andrew</p>
<p>lire la bio, membre du CSS Working Group (ceux qui décide/discuter ce qui sera implémenter dans les prochaines version de CSS)</p>
<p>A créer ce site Noti.st qui permet aux speakers de tenir à jour leur profil de speaker (avec slides, videos etc.)</p>
<p style="color:red;">@push Répertoire de slides partagé par leurs speakers, classés par thème, conférences, etc. https://noti.st/</p>
</aside>
</section>
<section>
<img src="src/devto_ressources.png" alt="">
<aside class="notes">
Des plate-forme d'échange et d'informations comme dev.to permettent en plus de la communauté de trouver des informations sur le domaine
</aside>
</section>
<section>
<h2>🚧</h2>
<h2>Exercice pratique nº3</h2>
<p class="fragment fade-up">90 min, solo</p>
<p>Identifier pour votre domaine : les réseaux, les acteurs, les événements qui informent</p>
<p><mark>Perdez-vous un peu</mark> dans la toile 🕵️♀️</p>
<p style="font-size:0.6em;">Notez les URLs, les façons de s'abonner (newsletter, RSS, follow on twitter, youtube, instagram...)<br/>Rendu : Commencez le 1er article qui liste les émetteurs·trices et sources de votre veille (en expliquant pourquoi vous les avez choisis)</p>
</section>
</section>
<!-- @@@@@@@@@ -->
<!-- Cours 2/5 -->
<!-- @@@@@@@@@ -->
<section>
<section>
<h1>Welcome back</h1>
</section>
<section>
<h2>
Vous vous souvenez pourquoi on est là ?
</h2>
<aside class="notes">
Anyone?
</aside>
</section>
<section>
<h2>🧪 L'objectif du lab</h2>
<ul>
<li class="fragment fade-up">Importance de la veille</li>
<li class="fragment fade-up">Prendre du recule sur votre profession</li>
<li class="fragment fade-up">Mécanismes de la gestion des connaissances</li>
<li class="fragment fade-up">Trouver <strong>votre système</strong></li>
</ul>
<aside class="notes">
<ul>
<li>Vous faire prendre conscience de l'importance de la veille pour votre parcours professionnel</li>
<li>Recule sur la profession des médias, la transformation digitale et les technologies de l'information. Vous faire prendre conscience des effets du temps qui passe</li>
<li>Comprendre les mécanismes de la veille et de la gestion des connaissances personnelles</li>
<li>Vous aider à trouver votre système</li>
</ul>
</aside>
</section>
<section>
<h2>Comment</h2>
<ol class="steps">
<li class="fragment fade-up">
<span class="step-icon">🎲</span>
<strong class="step-name">6 étapes</strong>
</li>
<li class="fragment fade-up">
<span class="step-icon">🚧</span>
<strong class="step-name">Travaux pratiques</strong>
</li>
<li class="fragment fade-up">
<span class="step-icon">📦</span>
<strong class="step-name">Livrable web</strong>
</li>
<li class="fragment fade-up">
<span class="step-icon">💔</span>
<strong class="step-name">Travail solo</strong>
</li>
<li class="fragment fade-up">
<span class="step-icon">🎙</span>
<strong class="step-name">Présentation</strong>
</li>
</ol>
<aside class="notes">
<p>Le laboratoire se calque sur les 6 étapes de la veille technologique. A chaque étape, vous réaliserez un bout du travail pratique correspondant à l'étape.</p>
<p>L'idée est d'alterner théorie/pratique</p>
<p>Livrable sous forme d'un BLOG que vous aller réaliser à l'aide de HUGO et héberger le tout sur Github</p>
<p>C'est un travail perso car je vous pousse à réfléchir sur ce qui vous motive dans votre métier</p>
<p>La présentation vous donne un peu de pression, de bien faire l'exercice. C'est un élément si essentiel dans votre formation et dans vos métiers plus tard.</p>
</aside>
</section>
<section>
<ol class="steps">
<li class="fragment shrink">
<span class="step-icon">🎯</span>
<strong class="step-name">Le domaine</strong>
</li>
<li class="fragment grow">
<span class="step-icon">📡</span>
<strong class="step-name">Système d'écoute</strong>
</li>
<li class="">
<span class="step-icon">🎚</span>
<strong class="step-name">Workflow de tri</strong>
</li>
<li class="">
<span class="step-icon">🗃</span>
<strong class="step-name">Classement</strong>
</li>
<li class="">
<span class="step-icon">⏳</span>
<strong class="step-name">L'épreuve du temps</strong>
</li>
<li class="">
<span class="step-icon">💡</span>
<strong class="step-name">Exploitation</strong>
</li>
</ol>
<aside class="notes">
Le domaine est défini, passons maintenant au système d'écoute. La veille finalement c'est écouter, rester attentif.
</aside>
</section>
<section>
<h2>🚧</h2>
<h2>Exercice pratique nº3</h2>
<p>Identifier pour votre domaine : les réseaux, les acteurs, les événements qui informent</p>
<p><mark>Perdez-vous un peu</mark> dans la toile 🕵️♀️</p>
<p style="font-size:0.6em;">Notez les URLs, les façons de s'abonner (newsletter, RSS, follow on twitter, youtube, instagram...)<br/>Rendu : Commencez le 1er article qui liste les émetteurs·trices et sources de votre veille (en expliquant pourquoi vous les avez choisis)</p>
</section>
<section>
<table style="font-size:0.4em;margin-top:1em;">
<tr>
<td width="30%">
<h4>
Livrable attendu
</h4>
</td>
<td>
<h3>Blog traitant de votre domaine de veille</h3>
<p>4 articles (résumé des informations dénichées), 1 article (Explication du système d'écoute mis en place) et 1 article (expérimentation réalisée)</p>
<p>Une page "À propos" qui explique votre domaine, ce qui vous lie à ce domaine (Ikigai) et les taxonomies</p>
</td>
</tr>
<tr>
<td>
<h4>
90% – contenu
</h4>
</td>
<td>
<p>
✅ Le domaine est en relation avec votre Ikigai, ainsi que les taxonomies sont expliqués sur une page <strong>À propos</strong>.
</p>
<p>
✅ Les 6 articles sont en relation avec le domaine (dont 1 sur une expérimentation et 1 avec le système et la liste des sources d'écoute).
</p>
<p>
✅ Le contenu des articles cite la/les sources et explique en quoi ils sont intéressants pour vous et votre domaine et à quel moment cela vous sera utile.
</p>
</td>
</tr>
<tr>
<td>
<h4>
10% – technique, la forme
</h4>
</td>
<td>
<p>
✅ Le site est généré avec Hugo
</p>
<p>
✅ Le thème est bien choisi (il correspond au domaine)
</p>
<p>
✅ Le site est hébergé sur github et se génére via Github Actions
</p>
</td>
</tr>