1
00:00:00,120 --> 00:00:00,390
D'accord.

2
00:00:00,390 --> 00:00:01,190
Nous saluons le retour.

3
00:00:01,350 --> 00:00:18,260
Dans les prochaines vidéos, nous allons nous concentrer sur la construction d'une application substantielle quelque chose qui a beaucoup de pièces en mouvement plus html plus CSSA beaucoup de style et le plus important beaucoup de population dominante et l'événement handly ce que nous allons construire Est un RG Être coloré deviner le jeu.

4
00:00:18,510 --> 00:00:24,980
Donc, ce n'est pas seulement une grande démonstration de la façon dont tous ces morceaux ensemble, mais c'est aussi un outil vraiment agréable pour vous d'avoir.

5
00:00:24,990 --> 00:00:30,790
Et pour vous de pratiquer R.G. Être couleurs parce que le système de couleur RGV est un peu peu intuitif au premier abord.

6
00:00:30,810 --> 00:00:35,300
C'est très différent de la plupart des systèmes de couleur que les gens sont habitués à travailler avec.

7
00:00:35,310 --> 00:00:36,860
Alors laissez-moi vous montrer comment cela fonctionne.

8
00:00:36,870 --> 00:00:40,330
Nous chargeons la page et nous obtenons six couleurs aléatoires ici.

9
00:00:40,530 --> 00:00:41,750
Ce sont toujours différents.

10
00:00:41,850 --> 00:00:47,150
Et l'une de ces couleurs est énumérée ici le nom de la couleur dans notre GP.

11
00:00:47,250 --> 00:00:50,330
Et notre travail est de choisir lequel.

12
00:00:50,340 --> 00:01:01,020
N'oubliez pas qu'il ya trois canaux rouge vert et bleu et chacun varie de 0 à 255 et tout ce dont nous avons besoin sont ces trois couleurs pour faire chaque couleur unique que nous pourrions jamais vouloir.

13
00:01:01,170 --> 00:01:07,940
Noir blanc jaune orange pourpre tous ceux qui sont réellement fait en combinant le vert rouge et bleu.

14
00:01:08,340 --> 00:01:09,410
Donc, si on regarde.

15
00:01:09,570 --> 00:01:13,850
J'ai Wikipedia ouverte nous pouvons voir comment le mélange additif de couleur fonctionne dans ce diagramme.

16
00:01:13,920 --> 00:01:24,650
Donc, nous avons rouge vert et bleu et pour faire du jaune, nous combinons réellement rouge et vert qui est peut-être un peu différent de ce que vous êtes censé faire magenta.

17
00:01:25,170 --> 00:01:26,730
Il est bleu et rouge.

18
00:01:26,940 --> 00:01:31,340
Et pour rendre Cyan est de couleur bleu clair, il est vert et bleu.

19
00:01:31,470 --> 00:01:34,810
Et puis enfin pour faire du blanc, nous combinons tous les trois.

20
00:01:34,810 --> 00:01:38,170
Donc voici un autre diagramme fait ici qui le rend un peu plus facile.

21
00:01:38,190 --> 00:01:44,850
Nous avons rouge vert et bleu et puis magenta jaune cyan et blanc et puis aucune couleur est noire.

22
00:01:45,000 --> 00:01:49,640
Donc, si nous revenons, nous pouvons utiliser cela pour essayer de comprendre quelle couleur c'est.

23
00:01:49,920 --> 00:01:54,860
Donc, si on regarde, on a un tas de rouge presque tout rouge.

24
00:01:55,140 --> 00:02:00,660
Jusqu'à 255 donc presque Il ya beaucoup de vert et très peu de bleu.

25
00:02:00,840 --> 00:02:06,960
Donc beaucoup de rouge dans beaucoup de vert si vous vous souvenez de ce tableau rouge et vert fait jaune.

26
00:02:07,260 --> 00:02:11,670
Donc, si nous avions 255 rouges 255 vert, ça ressemblerait à ça.

27
00:02:11,970 --> 00:02:16,290
Mais nous avons moins de 255, donc ça ne va pas être aussi brillant.

28
00:02:16,320 --> 00:02:17,440
Revenons donc.

29
00:02:17,700 --> 00:02:25,790
Espérons que vous pouvez dire lequel est la réponse correcte basée sur le diagramme que nous avons juste regardé, mais je vais deviner quelque chose de mal premier à vous montrer ce qui se passe.

30
00:02:25,800 --> 00:02:27,450
Donc, celui-ci est définitivement faux.

31
00:02:27,450 --> 00:02:29,970
Tout cela est rouge et très peu vert.

32
00:02:30,360 --> 00:02:33,900
Je clique et ça s'en va et il me dit d'essayer à nouveau.

33
00:02:33,900 --> 00:02:36,750
Donc, nous allons continuer à deviner certains mauvais comme celui-là.

34
00:02:36,750 --> 00:02:37,690
Celui-ci est faux.

35
00:02:37,860 --> 00:02:38,770
Celui-ci est faux.

36
00:02:38,990 --> 00:02:39,270
D'ACCORD.

37
00:02:39,270 --> 00:02:41,000
La connaissance est la bonne.

38
00:02:41,130 --> 00:02:43,140
Rouge et vert, il va être très jaune.

39
00:02:43,320 --> 00:02:44,370
Donc, c'est exact.

40
00:02:44,520 --> 00:02:48,120
Je vais cliquer et noter que les six carrés reviennent.

41
00:02:48,150 --> 00:02:53,520
Ils changent tous à la couleur correcte et notre arrière-plan apparaissent changent pour être la couleur correcte aussi bien.

42
00:02:53,760 --> 00:03:00,000
Et pour obtenir un message qui dit correct et si je veux je peux cliquer sur le jeu de nouveau et qui va générer de nouvelles couleurs.

43
00:03:00,210 --> 00:03:05,680
Mon écran revient au bleu ici et je reçois six nouveaux carrés et une nouvelle couleur aléatoire ici.

44
00:03:06,270 --> 00:03:08,870
Et puis ce que je peux aussi faire, c'est changer la difficulté.

45
00:03:08,910 --> 00:03:12,690
Donc, si je veux plus facile, je n'ai que trois couleurs à choisir.

46
00:03:12,810 --> 00:03:20,510
Cela peut être un peu difficile quand nous avons tous rafraîchir quelques fois comme ici nous avons deux nuances de bleu qui sont très similaires.

47
00:03:20,520 --> 00:03:27,980
Maintenant, après que vous jouez à ce jeu pendant un certain temps, vous devriez être en mesure de déterminer lequel est correct basé hors de ces trois nuances roses ou ces deux nuances bleues.

48
00:03:28,020 --> 00:03:29,220
Et c'est vraiment le point ici.

49
00:03:29,340 --> 00:03:32,520
Mais pour commencer, vous voudrez peut-être deux couleurs à choisir.

50
00:03:32,520 --> 00:03:33,420
Alors voici un autre.

51
00:03:33,510 --> 00:03:35,290
Faisons-le un peu rouge.

52
00:03:35,310 --> 00:03:36,470
Presque pas de rouge.

53
00:03:36,690 --> 00:03:37,800
Un peu de vert.

54
00:03:37,830 --> 00:03:38,560
Pas beaucoup.

55
00:03:38,670 --> 00:03:42,890
Et beaucoup de bleu, bien sûr, il va nous donner du bleu très pur.

56
00:03:43,380 --> 00:03:44,690
Revenons au mode difficile.

57
00:03:44,700 --> 00:03:52,830
Un autre point que je vais montrer ici, c'est que c'est un site réactif, donc je peux redimensionner et mes carrés se déplacer vers le milieu.

58
00:03:52,830 --> 00:03:54,870
Regarde ce petit bar ici.

59
00:03:54,870 --> 00:03:59,060
L'espace entre eux sur les côtés augmentera et diminuera.

60
00:03:59,130 --> 00:04:03,290
Et si j'ai un message alors nous allons cliquer sur un de ces Ce qui ne va pas.

61
00:04:03,780 --> 00:04:04,880
Je vais essayer de nouveau.

62
00:04:05,100 --> 00:04:08,140
Remarquez comment ceux-ci se rapprochent.

63
00:04:08,820 --> 00:04:11,950
Et puis je peux les écarter et nous obtenons un peu plus d'espace là-dedans.

64
00:04:12,270 --> 00:04:16,970
Donc, pour terminer avant de commencer à créer, je veux juste résumer quelques choses.

65
00:04:17,220 --> 00:04:25,130
Il va être une application assez grande pour être beaucoup de javascript sur une centaine de lignes ish un peu de succès ainsi et certains âgés lui aussi.

66
00:04:25,200 --> 00:04:33,030
Nous allons commencer une sorte de nus très peu de style et nous allons simplement obtenir la fonctionnalité va et puis nous allons aller et ajouter un peu de style sur le dessus.

67
00:04:33,030 --> 00:04:34,160
L'autre chose.

68
00:04:34,530 --> 00:04:45,820
Et puis une fois que nous terminer, nous l'espérons, vous pouvez l'utiliser assez souvent pour brouiller sur votre R.G. Les compétences même simplement faire ce pour le cours m'a aidé un peu à réfléchir sur certaines de mes compétences RGV.

69
00:04:45,870 --> 00:04:49,280
J'ai remarqué que j'ai tendance à compter trop sur RGV coloré pickers.

70
00:04:49,410 --> 00:04:54,680
Donc, c'est très bien pour moi aussi d'avoir une certaine pratique et de me rappeler comment RGV fonctionne.
