1 00:00:00,000 --> 00:00:02,500 [Powered by Google Translate] [Séminaire] [Développement Web: de l'idée à la mise en œuvre] 2 00:00:02,500 --> 00:00:04,200 [Ben Kuhn] [Billy Janitsch] [Université de Harvard] 3 00:00:04,200 --> 00:00:07,250 [C'est CS50] [CS50.TV] 4 00:00:07,250 --> 00:00:10,840 [Billy] Salut, je suis Billy et c'est Ben. >> [Ben] Salut. 5 00:00:10,840 --> 00:00:12,840 Nous allons parler de développement web aujourd'hui. 6 00:00:12,840 --> 00:00:14,840 [WebDev] [Billy Janitsch et Ben Kuhn] 7 00:00:14,840 --> 00:00:16,840 Un peu sur nous d'abord. 8 00:00:16,840 --> 00:00:19,590 Ben est en quelque sorte le type d'arrière-plan. Il fait les choses fonctionnent. 9 00:00:19,590 --> 00:00:21,870 Et puis je vais en faire et jolies. 10 00:00:21,870 --> 00:00:26,610 Je suis largement impliqué plus avant la fin de la conception de la mise en page genre de choses, 11 00:00:26,610 --> 00:00:31,260 et Ben, d'autre part, sait ce qu'il fait pour qu'il fonctionne sur des trucs d'arrière-plan. 12 00:00:31,260 --> 00:00:34,050 Ensemble, nous avons fait un certain nombre de choses. 13 00:00:34,050 --> 00:00:38,710 Par exemple, l'année dernière, nous avons travaillé sur Gimblium qui est un studio de développement de jeux en ligne. 14 00:00:38,710 --> 00:00:40,400 C'était notre projet final pour la classe, 15 00:00:40,400 --> 00:00:42,780 et depuis lors, nous avons fait Harvard classe 16 00:00:42,780 --> 00:00:47,860 qui est un cadre en ligne pour la navigation et des cours d'achat à Harvard. 17 00:00:47,860 --> 00:00:53,180 >> Nous allons commencer avec cette idée de notre site Web. 18 00:00:53,180 --> 00:00:57,480 Nous allons faire Facebook, mais pour les chats. 19 00:00:57,480 --> 00:00:59,520 Avant de vous rendre ce site, 20 00:00:59,520 --> 00:01:02,520 ne pas faire de ce site, car il n'est pas bon, mais nous allons l'utiliser comme un cadre 21 00:01:02,520 --> 00:01:05,349 et passer par le processus de la façon dont nous prenons cette idée 22 00:01:05,349 --> 00:01:07,450 et le transformer en un véritable site web, nous pouvons utiliser. 23 00:01:07,450 --> 00:01:11,940 Nous allons commencer par rompre le site vers le bas. 24 00:01:11,940 --> 00:01:13,190 Comme vous l'avez fait dans CS50, 25 00:01:13,190 --> 00:01:17,360 vous voulez réfléchir à ce que sont les éléments réels qui entrent dans ce site. 26 00:01:17,360 --> 00:01:21,290 Fondamentalement, il en tournant d'une idée qui est en quelque sorte d'un concept abstrait 27 00:01:21,290 --> 00:01:23,590 dans un vrai, chose tangible que vous pourriez faire. 28 00:01:23,590 --> 00:01:25,910 Nous commençons par poser quelques questions. 29 00:01:25,910 --> 00:01:28,070 Quel est ce site? Pourquoi faisons-nous cela? 30 00:01:28,070 --> 00:01:30,670 Qu'est-ce que cela va être utilisé? Ce genre de chose. 31 00:01:30,670 --> 00:01:33,660 Dans le cas de Facebook Chat, 32 00:01:33,660 --> 00:01:37,730 nous voulons essentiellement un site Web qui permet de chats réseau social à l'autre. 33 00:01:37,730 --> 00:01:41,260 L'idée étant qu'ils peuvent afficher sur les murs de l'autre, 34 00:01:41,260 --> 00:01:43,510 ils peuvent faire des commentaires, ce genre de chose. 35 00:01:43,510 --> 00:01:46,720 Et c'est là que nous entrons dans les composants fonctionnels. 36 00:01:46,720 --> 00:01:51,270 Nous avons maintenant ce genre de cadre de - nous avons des profils d'utilisateurs, 37 00:01:51,270 --> 00:01:53,990 nous avons des commentaires, et nous pouvons poster. 38 00:01:53,990 --> 00:01:57,390 Peut-être qu'un jour nous allons influent goûts et ce genre de chose. 39 00:01:57,390 --> 00:02:00,410 Et nous voulons sorte de donner la priorité à ces caractéristiques vont po 40 00:02:00,410 --> 00:02:03,340 Nous voulons dire que, d'accord, il est vraiment important que tout le monde a un profil 41 00:02:03,340 --> 00:02:06,440 et que tout le monde peut poster sur les murs de l'autre. 42 00:02:06,440 --> 00:02:08,509 Secondaire à cela, les commentaires seraient bien. 43 00:02:08,509 --> 00:02:10,180 Peut-être plus tard, nous influents aime. 44 00:02:10,180 --> 00:02:13,700 Donc, vous voulez avoir une idée de ce qui est fondamental pour votre projet 45 00:02:13,700 --> 00:02:17,260 et ce qui est une sorte de fonction plus générale qui pourrait être appliquée plus tard. 46 00:02:17,260 --> 00:02:20,870 Vous voulez avoir une sorte de liste spécifique à l'esprit, 47 00:02:20,870 --> 00:02:24,090 mais le projet que vous commencez avec ne va pas être le projet que vous avez terminé avec. 48 00:02:24,090 --> 00:02:27,100 En d'autres termes, les choses vont changer lorsque vous développez le site, 49 00:02:27,100 --> 00:02:30,090 et vous voulez laisser de la place pour cela. 50 00:02:30,090 --> 00:02:34,470 Je vais céder la parole à Ben qui va parler un peu de structure. 51 00:02:34,470 --> 00:02:39,610 >> [Ben] Je vais parler de la partie la plus technique du développement web. 52 00:02:39,610 --> 00:02:42,370 Rentrons sur certaines bases en premier. 53 00:02:42,370 --> 00:02:45,730 Lorsque vous faites une application web, 54 00:02:45,730 --> 00:02:50,470 la division principale que vous allez avoir est 55 00:02:50,470 --> 00:02:52,700 vous allez avoir des choses qui se passent dans le côté client - 56 00:02:52,700 --> 00:02:56,700 dire le code qui vous êtes navigateur prend de la place 57 00:02:56,700 --> 00:03:01,910 et le JavaScript, HTML, CSS choses. 58 00:03:01,910 --> 00:03:04,490 C'est tout ce que sur le côté client. 59 00:03:04,490 --> 00:03:08,680 Vous allez avoir un autre code qui s'exécute sur le côté serveur 60 00:03:08,680 --> 00:03:10,770 qui conserve la trace de toutes les données que les gens envoient à vous, 61 00:03:10,770 --> 00:03:15,060 décide à qui donner ce que, des trucs comme ça. 62 00:03:15,060 --> 00:03:20,380 C'est juste un peu de terminologie afin que vous les gars sont tous familiers avec ce que nous parlons. 63 00:03:20,380 --> 00:03:28,600 Au-delà de cette division, il est bon de penser à votre application web en termes de 64 00:03:28,600 --> 00:03:32,500 un couple de composants distincts. 65 00:03:32,500 --> 00:03:35,270 Lorsque vous faites le développement web 66 00:03:35,270 --> 00:03:41,710 l'une des choses que vous devriez toujours essayer de faire est de réduire la complexité. 67 00:03:41,710 --> 00:03:45,710 Le plus complexe de votre code est le plus il ya de chances de faire des bugs, 68 00:03:45,710 --> 00:03:47,710 plus il est difficile de changer plus tard. 69 00:03:47,710 --> 00:03:50,140 Donc, si vous pouvez diviser votre application en certains domaines fonctionnels distincts 70 00:03:50,140 --> 00:03:57,640 que voulez - et vous pouvez réduire la quantité de tri de la communication inter-zone - 71 00:03:57,640 --> 00:04:03,530 qui vous aideront beaucoup dans le long terme en matière de réduction des bugs. 72 00:04:03,530 --> 00:04:07,950 >> Pour être concret, généralement les gens se partagent une application web en - 73 00:04:07,950 --> 00:04:13,190 ceux-ci sont des sortes de mots à la mode maintenant, mais ils sont encore utiles. 74 00:04:13,190 --> 00:04:17,940 Vous pourriez avoir entendu des gens parler de modèles, vues et contrôleurs. 75 00:04:17,940 --> 00:04:23,210 Les modèles sont les données réelles que votre application va à traiter. 76 00:04:23,210 --> 00:04:28,260 Par exemple, dans votre chat Facebook, vos modèles seraient - 77 00:04:28,260 --> 00:04:35,340 vous auriez un modèle pour des postes similaires, et un modèle pour les profils utilisateur, des trucs comme ça. 78 00:04:35,340 --> 00:04:41,090 Vos points de vue sont la façon dont vous présentez ces données pour vos utilisateurs. 79 00:04:41,090 --> 00:04:46,660 Vous pourriez avoir une vue de la recherche à un seul poste et tous les commentaires 80 00:04:46,660 --> 00:04:51,720 et une vue différente pour votre mur qui a une liste de tous les postes 81 00:04:51,720 --> 00:04:57,170 qui sont dirigés vers vous, et une vue différente pour votre fil de nouvelles - des trucs comme ça. 82 00:04:57,170 --> 00:05:00,610 Enfin, vous avez les contrôleurs qui sont essentiellement quand les gens vous envoient les messages 83 00:05:00,610 --> 00:05:03,310 et vous faites des mises à jour de votre système back-end, 84 00:05:03,310 --> 00:05:06,400 incrémenter un tas de compteurs, et que ce soit. 85 00:05:06,400 --> 00:05:07,860 Ce sont vos contrôleurs. 86 00:05:07,860 --> 00:05:11,030 >> Je vais parler surtout de modèles. 87 00:05:11,030 --> 00:05:14,030 Vues sont techniquement pas difficile et la question est plus avec eux la conception 88 00:05:14,030 --> 00:05:22,040 Contrôleurs vont être spécifiques à ce que vous concevez. 89 00:05:22,040 --> 00:05:25,220 Mais il existe des techniques assez générales, vous pouvez utiliser 90 00:05:25,220 --> 00:05:30,220 pour rendre vos modèles plus agréable et plus facile à travailler que je pense sont très utiles. 91 00:05:30,220 --> 00:05:35,860 Cela est principalement va être sur la façon de traiter vos données des applications Web d'une manière agréable. 92 00:05:35,860 --> 00:05:40,420 Les principaux problèmes avec les modèles 93 00:05:40,420 --> 00:05:44,540 sont qu'ils vivent sur le client et le serveur et vous devez comprendre 94 00:05:44,540 --> 00:05:51,170 a) la façon de les obtenir - tous ceux qui sont pertinents - à partir du serveur vers le client, 95 00:05:51,170 --> 00:05:53,440 et b) la façon de les maintenir dans la synchro. 96 00:05:53,440 --> 00:05:58,700 Vos utilisateurs vont vouloir faire quelques mises à jour. 97 00:05:58,700 --> 00:06:00,470 Ils vont vouloir faire de nouveaux messages. 98 00:06:00,470 --> 00:06:04,800 Ils vont vouloir que les choses et d'autres choses si vous avez aimez. 99 00:06:04,800 --> 00:06:11,490 Ce sont les principaux défis techniques de traitement des modèles. 100 00:06:11,490 --> 00:06:15,680 La première chose que vous allez vouloir vous poser est 101 00:06:15,680 --> 00:06:18,420 ce type de données va dans ce modèle et ce type de requêtes que nous allons avoir à faire - 102 00:06:18,420 --> 00:06:24,290 c'est, comment allons-nous regarder les modèles? 103 00:06:24,290 --> 00:06:26,940 Pour votre chat par exemple Facebook, 104 00:06:26,940 --> 00:06:31,520 votre message va avoir un auteur qui lui est associé, 105 00:06:31,520 --> 00:06:35,660 un texte de message sur le mur, et un receveur de la poste de la paroi. 106 00:06:35,660 --> 00:06:38,470 Et puis, vous voudrez peut-être interroger que dans un tas de façons différentes. 107 00:06:38,470 --> 00:06:42,220 Vous voulez regarder par qui a écrit quel poste, 108 00:06:42,220 --> 00:06:46,620 par qui a reçu poster qui, peut-être par la date à laquelle ils ont été publiés. 109 00:06:46,620 --> 00:06:50,340 Mais si vous allez le faire par date, alors vous devez ajouter un autre champ de votre poste 110 00:06:50,340 --> 00:06:52,490 quand il a été effectivement publié. 111 00:06:52,490 --> 00:07:00,220 Ces deux facteurs - les données que vous souhaitez utiliser et comment vous voulez le voir - 112 00:07:00,220 --> 00:07:04,200 vous devriez penser à eux d'abord parce qu'ils dépendent les uns des autres, 113 00:07:04,200 --> 00:07:08,030 et ça va être plus difficile pour les ajouter plus tard. 114 00:07:08,030 --> 00:07:12,750 >> Il ya d'autres considérations. 115 00:07:12,750 --> 00:07:17,540 Quand vous pensez à la façon dont vous traitez avec des modèles sur le serveur 116 00:07:17,540 --> 00:07:20,540 ce que vous voulez regarder, c'est - 117 00:07:20,540 --> 00:07:27,440 vous voulez essentiellement à rendre le serveur aussi simple que possible. 118 00:07:29,440 --> 00:07:35,500 Faire des trucs sur le côté client est généralement beaucoup plus rapide si vous pouvez le faire uniquement sur le client 119 00:07:35,500 --> 00:07:38,230 sans faire toute sorte de demande de réseau. 120 00:07:38,230 --> 00:07:47,860 L'idée est de faire autant de requêtes que vous pouvez sur le client. 121 00:07:47,860 --> 00:07:51,560 Le seul problème avec cette 122 00:07:51,560 --> 00:07:54,160 est que si vous demandez toutes vos données au début 123 00:07:54,160 --> 00:07:57,160 alors que cela va prendre un certain temps à charger. 124 00:07:57,160 --> 00:08:02,290 Donc, l'idée est de trouver un juste milieu entre avoir suffisamment de données sur le client 125 00:08:02,290 --> 00:08:07,640 que vous pouvez faire plus de votre travail là, mais pas seulement chercher tout à la fois 126 00:08:07,640 --> 00:08:09,710 de sorte que vous obtenez des temps de chargement très lent au début. 127 00:08:09,710 --> 00:08:12,610 Par exemple, pour les données de votre chat 128 00:08:12,610 --> 00:08:20,340 vous souhaiterez probablement à chercher un tas de messages sur le mur récents. 129 00:08:20,340 --> 00:08:23,790 Vous ne voudriez pas aller chercher tous parce que cela pourrait revenir quelques années. 130 00:08:23,790 --> 00:08:25,470 Mais vous ne voulez pas aller les chercher un par un 131 00:08:25,470 --> 00:08:28,740 parce que ce serait introduire un lot de surcharge du réseau. 132 00:08:28,740 --> 00:08:33,620 >> Il est souvent très difficile - une fois que vous avez une base de données en cours - 133 00:08:33,620 --> 00:08:37,210 il est souvent très difficile de changer les données que vous avez en elle - 134 00:08:37,210 --> 00:08:40,510 c'est, ajouter une colonne de base de données nouvelle ou quelque chose - 135 00:08:40,510 --> 00:08:43,510 si un bonne stratégie est en fait juste à garder beaucoup de vos données dans un blob de texte - 136 00:08:43,510 --> 00:08:53,880 une goutte JSON - JSON étant JavaScript Object Notation - 137 00:08:53,880 --> 00:08:58,330 La raison qui est utile parce que vous pouvez ajouter de nouvelles propriétés 138 00:08:58,330 --> 00:09:01,920 à tous ces blobs JSON sans modifier votre base de données. 139 00:09:01,920 --> 00:09:06,860 Le seul inconvénient à cela est que si vous avez un tas de domaines 140 00:09:06,860 --> 00:09:09,890 que vous avez ajouté plus tard - comme caché dans ce JSON blob - 141 00:09:09,890 --> 00:09:12,850 alors il est plus difficile de les interroger à l'intérieur de la base de données. 142 00:09:12,850 --> 00:09:17,690 Par exemple, si vous plus tard - si vous aviez votre modèle de poste que nous avons discuté plus tôt 143 00:09:17,690 --> 00:09:25,380 avec juste l'auteur, le destinataire et le texte - 144 00:09:25,380 --> 00:09:29,000 vous pourriez aussi avoir une goutte de JSON et puis si vous voulez plus tard d'ajouter un champ de date 145 00:09:29,000 --> 00:09:31,000 vous n'auriez pas à changer votre base de données. 146 00:09:31,000 --> 00:09:36,140 Vous pouvez simplement ajouter des dates à tous les champs de texte. 147 00:09:36,140 --> 00:09:39,640 Et puis, vous seriez en mesure de regarder ceux sur le côté client, 148 00:09:39,640 --> 00:09:42,430 mais vous ne seriez pas en mesure de les interroger sur le côté serveur 149 00:09:42,430 --> 00:09:44,430 parce qu'il est caché à l'intérieur de ce texte. 150 00:09:44,430 --> 00:09:49,920 >> L'autre question que vous voulez penser 151 00:09:49,920 --> 00:09:52,400 la façon dont votre client et votre serveur vont communiquer. 152 00:09:52,400 --> 00:09:56,040 Vous souhaitez généralement de garder ce aussi simple que possible. 153 00:09:56,040 --> 00:10:02,230 Vous pouvez juste avoir comme une me-ce get demande de données, 154 00:10:02,230 --> 00:10:09,140 create-a-new-object chose, et une demande mise à jour-une-vieille-objet. 155 00:10:09,140 --> 00:10:12,930 Et ceux-ci seraient toutes différentes URL sur un serveur que vous - 156 00:10:12,930 --> 00:10:20,030 que le navigateur serait - vous pouvez utiliser les requêtes AJAX pour l'ensemble de ces 157 00:10:20,030 --> 00:10:24,000 et recevoir ou données de poste. 158 00:10:24,000 --> 00:10:26,600 Encore une fois, pour notre chat exemple Facebook, 159 00:10:26,600 --> 00:10:32,350 vous pourriez avoir cette URL pour obtenir un poste individuel, 160 00:10:32,350 --> 00:10:39,750 et vous auriez une URL pour créer un nouveau message sur le Mur 161 00:10:39,750 --> 00:10:45,670 et peut-être une URL pour le téléchargement de votre photo de profil, des trucs comme ça. 162 00:10:45,670 --> 00:10:51,730 Mais encore une fois, c'est une pré-chercher la plupart de vos données afin que vous n'avez pas à garder 163 00:10:51,730 --> 00:10:53,360 effectuer des requêtes réseau. 164 00:10:53,360 --> 00:10:59,030 Pour cette raison, vous voudrez peut-être de ne pas avoir cette demande get individuel pour un seul poste, 165 00:10:59,030 --> 00:11:03,210 et à la place vous voulez juste une demande d'obtention de la totalité du mur. 166 00:11:03,210 --> 00:11:06,110 Et puis, si vous essayez de trouver un équilibre parce que - 167 00:11:06,110 --> 00:11:10,970 ce va également dépendre de votre application. 168 00:11:10,970 --> 00:11:13,430 Parce que si vous vous attendez à ce que les gens ont seulement 10 ou 20 messages sur le mur 169 00:11:13,430 --> 00:11:15,430 ce sera très bien. 170 00:11:15,430 --> 00:11:17,390 Mais si vous vous attendez ils ont des milliers alors que la demande serait trop long, 171 00:11:17,390 --> 00:11:23,580 et vous pouvez ajouter un paramètre get-tous-les messages-car. 172 00:11:23,580 --> 00:11:26,580 >> Pour l'ensemble de ceux-ci vous allez probablement vouloir synchroniser vos données en JSON - 173 00:11:26,580 --> 00:11:29,260 JavaScript Object Notation. 174 00:11:29,260 --> 00:11:34,600 Quasiment toutes les langues traite JSON très bien. 175 00:11:34,600 --> 00:11:40,880 JQuery a cette fonction de getJSON agréable qui fera tout le travail pour vous. 176 00:11:40,880 --> 00:11:47,390 Et sur PHP, il ya aussi des fonctions très agréable de communication de JSON. 177 00:11:47,390 --> 00:11:52,660 Donc, c'est probablement le meilleur format pour l'envoi de vos modèles d'avant en arrière. 178 00:11:52,660 --> 00:11:56,570 >> Comme exemple de ce que nous avons parlé jusqu'à présent, 179 00:11:56,570 --> 00:12:00,520 voici un flux d'exemple pour votre chat application Facebook. 180 00:12:00,520 --> 00:12:07,760 Il commence avec votre navigateur demandant le site de l'URL de base. 181 00:12:07,760 --> 00:12:15,470 Le serveur enverrait probablement sur HTML statique et un peu de JavaScript et CSS. 182 00:12:15,470 --> 00:12:19,170 Il est généralement préférable de ne pas faire tout rendu sur le serveur. 183 00:12:19,170 --> 00:12:23,370 Vous ne voulez probablement pas - 184 00:12:23,370 --> 00:12:28,360 ce que le serveur ne fait pas, il va vers le bas la liste de messages sur le mur 185 00:12:28,360 --> 00:12:31,120 et générer du code HTML pour chacun d'eux et d'envoyer que plus. 186 00:12:31,120 --> 00:12:34,960 Il est généralement préférable de le faire sur le côté client, car sinon 187 00:12:34,960 --> 00:12:38,580 chaque fois que vous voulez redessiner quelque chose, vous devez faire une demande de serveur. 188 00:12:38,580 --> 00:12:42,450 Et qui vous donne très rapidement beaucoup de frais généraux. 189 00:12:42,450 --> 00:12:47,430 Il est généralement préférable juste pour expédier fait descendre statique HTML 190 00:12:47,430 --> 00:12:50,660 puis JavaScript et CSS qui vont faire le rendu sur le côté client. 191 00:12:50,660 --> 00:12:56,750 Dès que ça arrive, 192 00:12:56,750 --> 00:13:03,500 alors vous pouvez avoir - en JavaScript - vous pouvez faire des demandes pour les données de la paroi 193 00:13:03,500 --> 00:13:08,740 et des trucs comme ça, et après que le serveur est fondamentalement juste faire des requêtes de base de données 194 00:13:08,740 --> 00:13:10,740 et la vérification des autorisations. 195 00:13:10,740 --> 00:13:16,690 La seule chose importante est qu'il ne peut pas envoyer plus de certains utilisateurs d'autres messages sur le mur 196 00:13:16,690 --> 00:13:19,220 que vous n'êtes pas autorisé à voir. 197 00:13:19,220 --> 00:13:28,050 Il peut en principe être une couche d'accès très mince à la base de données, 198 00:13:28,050 --> 00:13:32,820 et puis tout d'un montre les données - tous les points de vue et des choses - 199 00:13:32,820 --> 00:13:37,280 celles-ci peuvent se produire dans votre navigateur, et puis quand vous voulez faire un post ou quelque chose 200 00:13:37,280 --> 00:13:40,000 vous suffit d'envoyer une autre demande. 201 00:13:40,000 --> 00:13:45,350 >> Il ya aussi des trucs de fantaisie que vous pouvez faire sur le dessus de cela. 202 00:13:45,350 --> 00:13:49,550 En matière d'information technique plus spécifique, 203 00:13:49,550 --> 00:13:53,360 développement dans la plaine JavaScript peut être un peu douloureux, 204 00:13:53,360 --> 00:13:56,220 il ya donc des bibliothèques et des outils qui vous aideront beaucoup avec cela. 205 00:13:56,220 --> 00:14:03,690 Je pense que vous avez tous probablement entendu parler de jQuery qui permet de faire le rendu HTML 206 00:14:03,690 --> 00:14:08,890 et la manipulation beaucoup plus facile - avoir beaucoup de fonctions de fantaisie pour en fondu, 207 00:14:08,890 --> 00:14:12,020 et de faire des animations énergique. 208 00:14:12,020 --> 00:14:13,720 Il ya aussi cette bibliothèque appelée Underscore.js. 209 00:14:13,720 --> 00:14:20,760 Il a beaucoup de fonctions utilitaires utiles, des choses que vous attendez d'avoir JavaScript 210 00:14:20,760 --> 00:14:24,740 qu'il ne marche pas vraiment - des choses comme traînant un tableau, 211 00:14:24,740 --> 00:14:28,900 suppression des doublons dans une liste, ou planer une liste de listes. 212 00:14:28,900 --> 00:14:30,900 Ceci est juste un petit échantillon de code. 213 00:14:30,900 --> 00:14:36,520 Soulignement a une tonne de ces belles fonctions que vous souhaitez, vous auriez tout le temps. 214 00:14:36,520 --> 00:14:38,840 >> Et puis il ya une plus bibliothèque que je voudrais passer un peu de temps sur 215 00:14:38,840 --> 00:14:44,800 appelé Backbone.js parce Backbone aide vraiment vous traitez avec des modèles sur le côté client 216 00:14:44,800 --> 00:14:47,210 et beaucoup de la confusion que cela peut causer. 217 00:14:47,210 --> 00:14:53,550 Backbone vous donne ce concept de modèles et des collections 218 00:14:53,550 --> 00:14:58,300 en JavaScript qui sont essentiellement exactement comme objets JavaScript 219 00:14:58,300 --> 00:15:04,900 dans les tableaux JavaScript, mais ils ont des événements lorsque vous modifiez leurs propriétés. 220 00:15:04,900 --> 00:15:09,090 Tout comme en JavaScript, vous pouvez avoir un événement quand un bouton est cliqué ou quelque chose 221 00:15:09,090 --> 00:15:14,800 ces modèles de Backbone et collections Backbone diffuseront des choses comme 222 00:15:14,800 --> 00:15:17,510 que quand ils changent. 223 00:15:17,510 --> 00:15:22,270 Cela signifie que vous ne pouvez écrire quelque chose comme ce bout de code ici - 224 00:15:22,270 --> 00:15:27,530 cela dit, chaque fois que vous ajoutez quelque chose à l'ensemble des postes vous redessinez le mur entier. 225 00:15:27,530 --> 00:15:34,270 Et ce serait dire lorsque le numéro d'un poste de goûts change, 226 00:15:34,270 --> 00:15:38,970 vous informez l'utilisateur que quelqu'un aimait leur poste. 227 00:15:38,970 --> 00:15:45,210 Ou chaque fois que les biens d'un poste change vous redessinez la poste. 228 00:15:45,210 --> 00:15:51,050 Des trucs comme ça vous fera économiser des tonnes de complexité, car sinon 229 00:15:51,050 --> 00:15:55,440 si vous n'avez pas un cadre comme celui-ci, puis à chaque fois dans votre code que vous changez 230 00:15:55,440 --> 00:16:04,280 parler d'un poste, vous auriez à vous rappeler d'appeler toutes les fonctions de rendu 231 00:16:04,280 --> 00:16:07,680 et des trucs comme ça, et si vous vouliez ajouter quelque chose de nouveau ce qui s'est passé 232 00:16:07,680 --> 00:16:10,680 chaque fois que vous avez modifié un poste que vous auriez à passer par tous les place dans votre 233 00:16:10,680 --> 00:16:14,610 Code que vous avez modifié un poste et d'ajouter que chose de nouveau. 234 00:16:14,610 --> 00:16:21,450 Un cadre comme cela va enlever beaucoup de communication entre-couche 235 00:16:21,450 --> 00:16:28,280 qui fait la complexité de votre code et difficile à maintenir. 236 00:16:28,280 --> 00:16:31,170 >> Il ya un peu de vue aussi. 237 00:16:31,170 --> 00:16:35,960 Je vais laisser la plupart de ce à Billy parce qu'ils sont techniquement pas très difficile. 238 00:16:35,960 --> 00:16:43,540 Utiliser jQuery pour votre point de vue. C'est pratiquement comme une nécessité à ce stade. 239 00:16:43,540 --> 00:16:46,290 Elle permet simplement de tout tellement plus facile. 240 00:16:46,290 --> 00:16:48,290 Il ya beaucoup de bibliothèques. 241 00:16:48,290 --> 00:16:49,970 Si vous avez compliqué éléments d'interface utilisateur, 242 00:16:49,970 --> 00:16:57,250 si vous voulez une chose de saisie semi-automatique ou comme un de ces multi-sélecteurs de fantaisie - 243 00:16:57,250 --> 00:17:04,790 si vous voulez quelque chose comme ça, vous devriez probablement chercher autour 244 00:17:04,790 --> 00:17:08,130 et vous pouvez trouver une bonne bibliothèque qui va faire ce que vous voulez. 245 00:17:08,130 --> 00:17:11,579 Billy expliquera plus sur les pièces effectivement difficiles de vues. 246 00:17:11,579 --> 00:17:17,530 En outre, comme une note côté, Backbone a quelques fonctionnalités pour faire communiquer vues 247 00:17:17,530 --> 00:17:22,800 bien avec les modèles - consulter la documentation pour l'ensemble de ces bibliothèques, en fait. 248 00:17:22,800 --> 00:17:28,270 Il suffit de regarder les docs. Ils sont très bien écrites et faciles à suivre. 249 00:17:28,270 --> 00:17:33,890 En général, vous pouvez très bien juste Google si vous avez des problèmes. 250 00:17:33,890 --> 00:17:36,370 Il ya beaucoup de personnes qui les utilisent. 251 00:17:36,370 --> 00:17:42,020 Je pense que c'est comme une note finale. 252 00:17:42,020 --> 00:17:48,770 >> Il ya aussi des choses plus avancées que vous pouvez faire 253 00:17:48,770 --> 00:17:53,400 si vous cherchez à faire de votre application web supplémentaire génial. 254 00:17:53,400 --> 00:17:59,760 Vous pouvez le faire - la nouvelle spécification HTML5 a beaucoup de choses de fantaisie que vous pouvez faire. 255 00:17:59,760 --> 00:18:05,780 Le stockage local - qui est que vous pouvez stocker des données dans le navigateur - 256 00:18:05,780 --> 00:18:09,470 plutôt que d'avoir à revenir en arrière et lire attentivement le serveur pour tout, 257 00:18:09,470 --> 00:18:12,470 vous pouvez garder un peu de sur le client et qui permet même des gens - 258 00:18:12,470 --> 00:18:20,850 dans certains cas, il peut même vous permettre d'utiliser le mode hors connexion web. 259 00:18:20,850 --> 00:18:26,980 Il ya cette chose appelée websockets qui sont un autre type de communication réseau 260 00:18:26,980 --> 00:18:30,930 où au lieu de simplement vous faites une demande, vous obtenez la réponse et vous avez terminé, 261 00:18:30,930 --> 00:18:35,240 vous gardez ouvrir une connexion au serveur et si vous pouvez faire des choses comme 262 00:18:35,240 --> 00:18:37,240 mises à jour en temps réel. 263 00:18:37,240 --> 00:18:42,020 Donc, si vous essayez de faire une application de chat, vous pouvez utiliser websockets 264 00:18:42,020 --> 00:18:43,790 de communiquer dans les deux sens de sorte que vous n'auriez pas à maintenir la demande, 265 00:18:43,790 --> 00:18:48,410 "Oh, serveur, quelqu'un at-il m'envoyer une conversation?" toutes les 10 secondes ou quelque chose. 266 00:18:48,410 --> 00:18:55,620 Il ya aussi une fonction de HTML5 intéressant où vous pouvez faire ressembler 267 00:18:55,620 --> 00:18:58,340 l'URL de la page est en train de changer, sans jamais avoir à réellement recharger. 268 00:18:58,340 --> 00:19:03,230 Vous pouvez utiliser les boutons avant et en arrière sans faire un tas de requêtes réseau. 269 00:19:03,230 --> 00:19:14,660 Des trucs comme ça est vraiment utile en termes de ce qui rend rapide mais aussi fonctionner comme une application web doit. 270 00:19:14,660 --> 00:19:17,680 >> Il ya aussi ce qu'on appelle CoffeeScript. 271 00:19:17,680 --> 00:19:24,450 CoffeeScript est une langue différente, en fait, qui compile jusqu'à JavaScript. 272 00:19:24,450 --> 00:19:30,080 Vous souhaitez écrire tout le code en CoffeeScript, puis d'exécuter ce compilateur, 273 00:19:30,080 --> 00:19:33,300 et il crache un fichier JavaScript que vous pouvez inclure dans votre page Web. 274 00:19:33,300 --> 00:19:38,860 La raison pour laquelle CoffeeScript est agréable parce qu'il se débarrasse de beaucoup de 275 00:19:38,860 --> 00:19:44,760 cas étranges que Javascript est égal où égaux, 276 00:19:44,760 --> 00:19:51,130 et est égal à égal font des choses différentes, ou aiment - 277 00:19:51,130 --> 00:19:55,740 il a une syntaxe plus agréable de traiter avec des tableaux et des fonctions. 278 00:19:55,740 --> 00:20:00,460 Il s'agit d'un petit extrait de CoffeeScript qui produit une liste de toutes les places 279 00:20:00,460 --> 00:20:04,900 à partir de 10 ^ 2-1 ^ 2 dans l'ordre inverse. 280 00:20:04,900 --> 00:20:08,410 Comme vous pouvez le voir, CoffeeScript permet souvent que vous exprimez dans une ligne 281 00:20:08,410 --> 00:20:10,890 ce qui prendra 5 lignes de JavaScript. 282 00:20:10,890 --> 00:20:13,230 Il peut rendre les choses beaucoup plus facile. 283 00:20:13,230 --> 00:20:15,390 C'est un peu de la nouvelle syntaxe à apprendre au début, 284 00:20:15,390 --> 00:20:18,010 mais il va certainement vous rendre plus productif sur le long terme. 285 00:20:18,010 --> 00:20:22,050 >> Vous pouvez également utiliser d'autres langues sur le serveur de PHP - 286 00:20:22,050 --> 00:20:27,570 langues comme Ruby, Python, ou il ya même un projet appelé node.js 287 00:20:27,570 --> 00:20:31,450 qui vous permettra d'utiliser JavaScript sur le serveur. 288 00:20:31,450 --> 00:20:34,700 Personnellement, j'ai vraiment, vraiment déteste PHP. 289 00:20:34,700 --> 00:20:38,310 Je ne jouis pas de travailler avec elle. 290 00:20:38,310 --> 00:20:43,450 Si vous aussi, vous pensez qu'il s'agit d'une Cluge terrible d'une langue, 291 00:20:43,450 --> 00:20:46,160 alors vous pouvez utiliser l'une de ces place. 292 00:20:46,160 --> 00:20:54,780 En général, si vous voulez faire quelque chose et vous ne savez pas vraiment comment vous feriez, 293 00:20:54,780 --> 00:20:56,780 il suffit de chercher sur Internet. 294 00:20:56,780 --> 00:20:59,990 Il ya des tonnes et des tonnes de ressources, en particulier sur - 295 00:20:59,990 --> 00:21:03,260 StackOverflow est un grand. 296 00:21:03,260 --> 00:21:06,400 C'est ce site où les programmeurs se poser des questions. 297 00:21:06,400 --> 00:21:09,690 Vous avez peut-être exécuter en si vous rencontrez des problèmes sur des ensembles de problèmes de CS50. 298 00:21:09,690 --> 00:21:16,820 Et il ya des tonnes de bibliothèques pour faire à peu près tout ce que vous voulez. 299 00:21:16,820 --> 00:21:21,710 Si vous voulez faire quelque chose et vous ne savez pas comment faire, 300 00:21:21,710 --> 00:21:23,710 Ne présumez pas que c'est impossible. 301 00:21:23,710 --> 00:21:26,160 Il suffit de regarder autour et vous trouverez peut-être quelques bonnes ressources. 302 00:21:26,160 --> 00:21:29,280 >> En général conclure, 303 00:21:29,280 --> 00:21:33,650 les principaux plats à emporter sont à garder les choses simples. 304 00:21:33,650 --> 00:21:36,010 Le plus complexe de votre code est au début 305 00:21:36,010 --> 00:21:40,370 et plus vous essayez de faire des choses extravagantes, 306 00:21:40,370 --> 00:21:43,300 plus il faudra pour obtenir quelque chose de réellement fonctionnelle 307 00:21:43,300 --> 00:21:46,480 et le plus il sera difficile à changer plus tard. 308 00:21:46,480 --> 00:21:49,580 Donc, faire des choses que les muets, moyen facile d'abord. 309 00:21:49,580 --> 00:21:51,720 Pour aller de pair avec cela, 310 00:21:51,720 --> 00:21:59,070 n'ayez pas peur de jeter l'ancien code ou de le nettoyer un lot. 311 00:21:59,070 --> 00:22:05,320 En général, une fois que vous avez fait quelque chose de travail, 312 00:22:05,320 --> 00:22:09,640 il est beaucoup plus facile de penser que lorsque vous êtes encore dans les premiers stades 313 00:22:09,640 --> 00:22:12,610 comment puis-je mettre tout cela ensemble. 314 00:22:12,610 --> 00:22:17,500 Il est préférable de faire la conception la plus stupide possible qui fonctionne 315 00:22:17,500 --> 00:22:22,270 puis l'améliorer itérativement que d'essayer de faire les choses la première fois. 316 00:22:22,270 --> 00:22:28,330 En termes de répartition client-serveur, essayer de garder votre serveur très simple - 317 00:22:28,330 --> 00:22:33,030 juste une base de données et certains authentification et ne font pas de travail là-bas. 318 00:22:33,030 --> 00:22:37,540 Faire tous vos trucs compliqués sur le côté client dans le navigateur 319 00:22:37,540 --> 00:22:40,650 en JavaScript autant que vous le pouvez. 320 00:22:40,650 --> 00:22:43,420 Regardez autour de vous pour les bibliothèques qui font que votre vie meilleure. 321 00:22:43,420 --> 00:22:46,850 Toujours mieux d'utiliser le code que quelqu'un d'autre a écrit 322 00:22:46,850 --> 00:22:49,850 si vous - et pas d'écrire vous-même. 323 00:22:49,850 --> 00:22:57,560 Il ya beaucoup de choses sur Internet. Google est votre meilleur ami. 324 00:22:57,560 --> 00:22:59,560 Google est le meilleur ami du programmeur. 325 00:22:59,560 --> 00:23:07,620 Oui, certainement ne pas avoir peur de regarder autour de trucs. 326 00:23:07,620 --> 00:23:11,860 Très bien. Et plus de Billy. 327 00:23:11,860 --> 00:23:14,600 >> [Billy] En fait, avant de commencer avec des trucs de conception, 328 00:23:14,600 --> 00:23:17,250 Quelqu'un at-il des questions pour Ben sur tout ce dont il a parlé? 329 00:23:17,250 --> 00:23:20,290 Très bien. 330 00:23:20,290 --> 00:23:22,220 Encore une fois, nous savons si quelque chose n'est pas clair 331 00:23:22,220 --> 00:23:25,420 ou si vous souhaitez nous d'aller sur quelque chose d'un peu plus. 332 00:23:25,420 --> 00:23:30,330 Je vais un peu de recul et de parler des parties les plus fondamentaux de la conception. 333 00:23:30,330 --> 00:23:34,840 Ben mentionné le modèle appelé - désolé, le modèle le système de vue du contrôleur 334 00:23:34,840 --> 00:23:38,520 qui est une sorte de l'aspect technique, donc je vais chercher à vue spécifiquement, 335 00:23:38,520 --> 00:23:42,930 et je vais commencer par la façon dont vous souhaitez concevoir une vue qui semble intéressante. 336 00:23:42,930 --> 00:23:50,540 Voici une sorte de modèle très basique pour notre chat Facebook. 337 00:23:50,540 --> 00:23:54,190 Je pense qu'il ya certains principes de base dans la conception de l'interface utilisateur moderne 338 00:23:54,190 --> 00:23:56,190 que sont la peine de ramasser. 339 00:23:56,190 --> 00:23:58,210 Vous pouvez remarquer qu'il ya beaucoup d'espace blanc sur toute la page, 340 00:23:58,210 --> 00:24:00,790 beaucoup de place pour les choses. 341 00:24:00,790 --> 00:24:02,580 Ne vous sentez pas comme vous devez écraser les choses dans une page. 342 00:24:02,580 --> 00:24:06,700 Vous voulez laisser beaucoup d'espace ouvert, et si vous allez à presque n'importe quel site web moderne 343 00:24:06,700 --> 00:24:08,380 vous verrez qu'il ya blanc partout. 344 00:24:08,380 --> 00:24:10,380 Il ya blanc dans des endroits qu'on ne s'attendrait pas. 345 00:24:10,380 --> 00:24:14,570 Vous avez cette palette de couleurs, et il est sage au début 346 00:24:14,570 --> 00:24:17,880 de choisir une palette de couleurs que vous allez travailler et se développer. 347 00:24:17,880 --> 00:24:22,250 Vous avez également - il permet de choisir une police de caractères, et de cette façon vous êtes sorte de travailler avec 348 00:24:22,250 --> 00:24:24,450 ces principes fondamentaux concrets de conception. 349 00:24:24,450 --> 00:24:26,910 Vous avez votre type, vous avez vos couleurs, et puis vous pouvez sorte de 350 00:24:26,910 --> 00:24:29,380 s'adapter à tout le reste comme nécessaire. 351 00:24:29,380 --> 00:24:37,710 Donc, comme je l'ai dit, avec votre schéma de couleurs que vous souhaitez utiliser les couleurs audacieuses de votre palette de couleurs 352 00:24:37,710 --> 00:24:40,320 avec parcimonie. Têtes sont gentils. Les boutons sont bien d'avoir de très gros, des couleurs flashy. 353 00:24:40,320 --> 00:24:43,710 Mais en général, si vous avez un site web qui a des couleurs partout, 354 00:24:43,710 --> 00:24:47,250 tout ce que vous regarder en face, il semble juste encombré, et ce n'est pas bon. 355 00:24:47,250 --> 00:24:50,430 Vous souhaitez utiliser généralement des couleurs claires. 356 00:24:50,430 --> 00:24:52,890 Essayez, encore une fois, choisir un jeu de couleurs assez cohérente. 357 00:24:52,890 --> 00:24:56,640 Vous pouvez avoir ces petites éclaboussures de beaucoup de couleurs - 358 00:24:56,640 --> 00:25:00,240 qui peut regarder assez agréable, mais vous voulez les utiliser assez peu. 359 00:25:00,240 --> 00:25:04,270 >> Comme je l'ai dit, vous voulez être minime. Moins est presque toujours plus. 360 00:25:04,270 --> 00:25:07,430 Si vous pouvez afficher quelque chose ou pas afficher quelque chose, 361 00:25:07,430 --> 00:25:10,230 et vous êtes un peu incertain s'il doit y avoir par défaut - 362 00:25:10,230 --> 00:25:13,400 probablement vous êtes mieux de le laisser sortir. Vous pouvez toujours ajouter plus tard. 363 00:25:13,400 --> 00:25:16,620 Ouais, garder les choses simples. 364 00:25:16,620 --> 00:25:19,510 Mais le plus important, vous voulez examiner plusieurs modèles. 365 00:25:19,510 --> 00:25:23,520 Ne pensez pas que lorsque vous faites un site, vous avez dans votre tête que vous allez 366 00:25:23,520 --> 00:25:26,310 rendre le site d'une certaine manière, et ça va ressembler à ceci. 367 00:25:26,310 --> 00:25:29,830 Il va avoir la tête bleue en haut et la barre latérale bleue 368 00:25:29,830 --> 00:25:32,670 puis le jaune sous-entête chose. 369 00:25:32,670 --> 00:25:34,670 Vous voulez faire plusieurs modèles. 370 00:25:34,670 --> 00:25:37,350 Vous pouvez - si vous êtes bon avec Photo Shop, vous pouvez ouvrir que vous et sorte de 371 00:25:37,350 --> 00:25:39,600 concevoir un site Web que vous voulez qu'il regarde. 372 00:25:39,600 --> 00:25:41,680 Sinon, vous pouvez simplement utiliser le stylo et le papier, 373 00:25:41,680 --> 00:25:44,000 mais gratter plusieurs modèles. 374 00:25:44,000 --> 00:25:47,000 Vous voulez avoir essentiellement une mise en place où vous avez beaucoup de modèles différents, 375 00:25:47,000 --> 00:25:50,810 et si l'on se retrouve à travailler, alors c'est très bien. 376 00:25:50,810 --> 00:25:53,370 Si on finit par échouer, alors vous avez toujours un autre à qui s'adresser. 377 00:25:53,370 --> 00:25:57,960 En général, ne se sentent pas comme vous devriez être contraint 378 00:25:57,960 --> 00:26:00,830 à ce que la conception vous décidez d'abord sur. 379 00:26:00,830 --> 00:26:04,420 Les dessins sont très variables, et une partie de l'importance du modèle 380 00:26:04,420 --> 00:26:09,480 vue du contrôleur système est que vous pouvez échanger dans et hors différents points de vue que vous souhaitez. 381 00:26:09,480 --> 00:26:13,510 Vous pouvez influencer les données d'une manière, et de décider ensuite, oh, en fait, qui ne fonctionne pas très bien. 382 00:26:13,510 --> 00:26:19,190 Je pense que c'est une sorte de trop compliqué ou il ya une partie ici qui n'est pas vraiment travailler, 383 00:26:19,190 --> 00:26:22,150 donc je vais juste abandonner totalement ce point de vue et d'échange dans un environnement totalement nouveau. 384 00:26:22,150 --> 00:26:24,790 Nous pouvons toujours utiliser les anciens modèles et les anciens contrôleurs. 385 00:26:24,790 --> 00:26:27,490 Nous pouvons tout faire sur le serveur et le client comme nous le ferions avant. 386 00:26:27,490 --> 00:26:32,850 Mais la vague actuelle des données que affichée va être légèrement différente. 387 00:26:32,850 --> 00:26:35,840 >> En ce qui concerne la mise en œuvre effectivement la conception que vous voulez, 388 00:26:35,840 --> 00:26:39,330 une fois que vous avez quelques dessins esquissés sur le papier ou sur le magasin de photo ou autre chose, 389 00:26:39,330 --> 00:26:42,120 il ya un certain nombre d'outils qui sont mis à votre disposition. 390 00:26:42,120 --> 00:26:45,700 La première vous êtes très familier avec ce qui est votre HTML, PHP, ou quel que soit 391 00:26:45,700 --> 00:26:48,990 langue que vous utilisez juste pour coder les pages statiques de votre site. 392 00:26:48,990 --> 00:26:51,990 Vous avez beaucoup travaillé avec HTML qui vous donne genre de ces mots-clés 393 00:26:51,990 --> 00:26:57,820 que vous pouvez mettre les choses en et, fondamentalement, c'est une façon d'organiser votre contenu. 394 00:26:57,820 --> 00:27:00,990 Par exemple, vous avez la tête là-bas, de sorte que vous allez avoir une balise d'en-tête, 395 00:27:00,990 --> 00:27:05,770 et il va avoir un texte à l'intérieur de celui-ci qui va probablement être dans un autre tag. 396 00:27:05,770 --> 00:27:08,380 Ensuite, vous avez une barre latérale peut-être avec quelques différents liens, 397 00:27:08,380 --> 00:27:10,160 et ceux qui vont tous être en séparer les tags. 398 00:27:10,160 --> 00:27:13,870 Ainsi, fondamentalement HTML à son coeur est une manière de diviser la page comment 399 00:27:13,870 --> 00:27:16,980 vous voulez finalement à formater. 400 00:27:16,980 --> 00:27:18,980 Encore une fois, vous avez vu ça avant. 401 00:27:18,980 --> 00:27:20,540 Vous êtes très à l'aise de travailler avec elle maintenant 402 00:27:20,540 --> 00:27:23,120 étant donné que vous avez fait la dernière pset espérons-le, 403 00:27:23,120 --> 00:27:26,150 ce qui devrait poser aucun problème. 404 00:27:26,150 --> 00:27:31,280 >> Ensuite, vous avez CSS qui gère essentiellement tous les aspects statiques de conception. 405 00:27:31,280 --> 00:27:35,320 Il gère l'ensemble des couleurs, l'ensemble de la position de différents éléments, 406 00:27:35,320 --> 00:27:36,840 où ils vont par rapport à l'autre, 407 00:27:36,840 --> 00:27:41,530 comment ils sont gros, les différents types de positionnements que vous auriez - 408 00:27:41,530 --> 00:27:46,030 en d'autres termes, vous pouvez avoir des choses fixes de sorte que lorsque vous faites défiler ils restent, 409 00:27:46,030 --> 00:27:48,700 ou vous pouvez avoir des choses par rapport aux autres éléments. 410 00:27:48,700 --> 00:27:50,730 Tout ce genre de choses est en CSS. 411 00:27:50,730 --> 00:27:54,630 En outre, vous pouvez faire des décorations différentes, vous pouvez avoir des couleurs de texte, 412 00:27:54,630 --> 00:27:56,630 des effets de texte, tout ce genre de trucs. 413 00:27:56,630 --> 00:28:00,360 Ben a donné un très bon séminaire sur ce dernier week-end, 414 00:28:00,360 --> 00:28:04,450 et je voudrais donc absolument vérifier que si vous prévoyez faire des choses de fantaisie avec CSS. 415 00:28:04,450 --> 00:28:09,850 CSS3 est en fait la nouvelle version de CSS, et il peut faire toutes sortes de choses vraiment sympa. 416 00:28:09,850 --> 00:28:14,750 Il peut faire des dégradés, vous pouvez avoir de belles, des coins arrondis, vous pouvez faire toutes sortes de choses 417 00:28:14,750 --> 00:28:17,940 pour rendre votre site plus moderne et fantaisie. 418 00:28:17,940 --> 00:28:22,150 >> L'outil suivant que JavaScript et jQuery qui Ben a parlé un peu, 419 00:28:22,150 --> 00:28:24,150 mais je vais un peu plus loin dans. 420 00:28:24,150 --> 00:28:28,100 JavaScript que vous avez travaillé avec elle un peu, ou au moins vu dans la conférence, 421 00:28:28,100 --> 00:28:31,870 est une sorte de façon de faire des choses de façon dynamique en HTML. 422 00:28:31,870 --> 00:28:35,950 HTML, comme vous le savez, est statique, donc une fois que vous avez HTML vous ne pouvez pas le modifier. 423 00:28:35,950 --> 00:28:40,050 Mais JavaScript, à certains égards, est une façon d'être en mesure de modifier HTML. 424 00:28:40,050 --> 00:28:44,520 Donc, vous pouvez le faire, et c'est très bien, mais JavaScript est vraiment une douleur à travailler avec. 425 00:28:44,520 --> 00:28:49,050 Il ya si longtemps et obtus et à faire même les choses les plus simples 426 00:28:49,050 --> 00:28:51,630 exige beaucoup de lignes de JavaScript. 427 00:28:51,630 --> 00:28:55,410 Donc, jQuery est essentiellement une bibliothèque JavaScript qui simplifie tout cela. 428 00:28:55,410 --> 00:28:59,880 Il dit, d'accord, si vous voulez avoir une boîte carrée venir de la gauche 429 00:28:59,880 --> 00:29:03,980 et se fondre dans la page de sorte qu'il est dans le milieu, en JavaScript qui prendrait - 430 00:29:03,980 --> 00:29:06,340 Je ne sais pas, une centaine de lignes à faire, et ce serait une douleur, 431 00:29:06,340 --> 00:29:10,540 et vous en sortez haïr tout ce qui concerne la programmation web. 432 00:29:10,540 --> 00:29:15,380 JQuery vous avez essentiellement l'élément-point-fade-in, ou quelque chose comme ça. 433 00:29:15,380 --> 00:29:18,580 Fonctions Donc, très, très simples qui vous permettront de faire toutes sortes d'animations sympas 434 00:29:18,580 --> 00:29:20,580 et ce genre de chose. 435 00:29:20,580 --> 00:29:23,300 L'autre chose que ces deux sont vraiment bons pour est juste de faire les choses dynamiques 436 00:29:23,300 --> 00:29:25,300 avec ce site. 437 00:29:25,300 --> 00:29:28,370 Donc, plutôt que de simplement avoir votre page HTML - qui affiche des données mais ne pas réellement 438 00:29:28,370 --> 00:29:32,130 faire quelque chose - JavaScript et jQuery vous permettra d'avoir des boutons que vous pouvez cliquer sur, 439 00:29:32,130 --> 00:29:37,960 et vous pouvez faire glisser des éléments et de réapprovisionnement eux et les trier, et avoir de nouveaux éléments 440 00:29:37,960 --> 00:29:40,500 ajouté ou supprimé. Vous pouvez ajouter-delete, ce genre de chose. 441 00:29:40,500 --> 00:29:44,570 Donc, jQuery fait des tonnes de choses cool. 442 00:29:44,570 --> 00:29:48,840 Et Vipul est effectivement donner un séminaire sur elle aujourd'hui, je crois, à 5 heures, 443 00:29:48,840 --> 00:29:51,220 donc si vous pouvez rester pour longtemps, qui - 5 ou 4? 444 00:29:51,220 --> 00:29:54,930 Quatre. Désolé. C'est en fait juste après cela, donc je recommande 445 00:29:54,930 --> 00:29:56,680 rester dans les parages pour lui si vous le pouvez. 446 00:29:56,680 --> 00:30:00,180 JQuery est super, super utile, et vous serez en mesure de faire beaucoup de choses vraiment sympa avec elle 447 00:30:00,180 --> 00:30:03,460 pour à peu près n'importe quel projet de développement web. 448 00:30:03,460 --> 00:30:06,200 >> Maintenant, je vais entrer dans une sorte de distinction. 449 00:30:06,200 --> 00:30:08,210 J'ai parlé essentiellement sur l'interface utilisateur. 450 00:30:08,210 --> 00:30:11,510 L'interface utilisateur est juste la conception du site. 451 00:30:11,510 --> 00:30:13,780 Mais il ya un autre concept de genre qui est l'expérience de l'utilisateur. 452 00:30:13,780 --> 00:30:15,900 Les deux sont très différents. 453 00:30:15,900 --> 00:30:19,440 L'interface est vraiment partie de l'expérience. 454 00:30:19,440 --> 00:30:21,340 En d'autres termes, quand vous allez à un site, vous regardez l'interface. 455 00:30:21,340 --> 00:30:22,960 Cela fait partie de la façon dont vous ressentez le site. 456 00:30:22,960 --> 00:30:24,960 Mais l'expérience utilisateur est plus que cela. 457 00:30:24,960 --> 00:30:29,910 L'expérience utilisateur est sur ce que l'impression que l'utilisateur obtient à partir de votre site est. 458 00:30:29,910 --> 00:30:31,910 Donc, bien évidemment, de l'interface est une partie de cela. 459 00:30:31,910 --> 00:30:35,340 Et c'est certainement un élément nécessaire, mais ce n'est pas suffisant. 460 00:30:35,340 --> 00:30:38,790 En d'autres termes, si vous avez une interface agréable, et c'est joli et coloré et tout cela, 461 00:30:38,790 --> 00:30:43,650 c'est très bien, mais si l'utilisateur accède à votre site, voit une jolie mise en page et il est confus par 462 00:30:43,650 --> 00:30:47,060 tout, n'a aucune idée de la façon de faire quelque chose, alors il est évident que vous avez fait un très 463 00:30:47,060 --> 00:30:48,930 pauvre site. 464 00:30:48,930 --> 00:30:50,930 C'est en quelque sorte où l'expérience de l'utilisateur entre en jeu. 465 00:30:50,930 --> 00:30:54,570 Je vais parler un peu de conception UX - UX est l'abréviation de l'expérience de l'utilisateur - 466 00:30:54,570 --> 00:30:58,050 et la nature de la façon dont vous pouvez vous assurer que vous avez une bonne expérience utilisateur. 467 00:30:58,050 --> 00:31:04,330 Le premier point est que vous pouvez concevoir un site Web où un utilisateur peut faire tout ce qui 468 00:31:04,330 --> 00:31:06,820 que l'utilisateur souhaite éventuellement. 469 00:31:06,820 --> 00:31:08,940 Mais si l'utilisateur ne peut pas comprendre comment faire ces choses - 470 00:31:08,940 --> 00:31:12,850 en d'autres termes, si l'utilisateur ne possède pas une bonne idée quand ils vont à votre site d', 471 00:31:12,850 --> 00:31:17,660 "Oh, si je veux mettre à jour mon profil, puis je clique sur ce bouton, ou si je veux poster sur 472 00:31:17,660 --> 00:31:20,850 le mur de quelqu'un, alors je vais à leur mur et cliquez sur une petite boîte. " 473 00:31:20,850 --> 00:31:24,410 Si l'utilisateur ne sait pas cela, alors vous avez effectivement pas fait 474 00:31:24,410 --> 00:31:27,080 mis en œuvre correctement cette fonctionnalité. 475 00:31:27,080 --> 00:31:30,900 Une partie de la mise en œuvre d'une fonctionnalité que les utilisateurs sont effectivement en mesure de l'utiliser. 476 00:31:30,900 --> 00:31:34,810 Et il peut être frustrant - vous pourriez faire un site, et il peut faire toutes sortes de 477 00:31:34,810 --> 00:31:37,810 des choses merveilleuses, mais alors vous aurez des gens le testent et disent: «Il ne peut pas le faire. 478 00:31:37,810 --> 00:31:39,770 Pourquoi ne peut-il pas le faire? "Et vous dire de nouveau à eux, 479 00:31:39,770 --> 00:31:44,420 "Eh bien, il peut. Vous avez juste à aller dans le menu 7 déroulante sur cette obscure 480 00:31:44,420 --> 00:31:48,470 page qui ne se trouve par un lien dans le coin en bas à droite à la main "ou quelque chose. 481 00:31:48,470 --> 00:31:50,430 De toute évidence, vous ne voulez pas que. 482 00:31:50,430 --> 00:31:53,420 Vous voulez qu'il soit clair à vos utilisateurs ce qu'ils sont censés faire, 483 00:31:53,420 --> 00:31:56,240 et il devrait être simple et intuitive pour eux. 484 00:31:56,240 --> 00:32:01,180 >> Une autre chose que vous voulez essayer de faire est, si quelqu'un va aller à votre site 485 00:32:01,180 --> 00:32:05,520 et 9 fois sur 10 font l'action A, et 1 fois sur 10 font l'action B, 486 00:32:05,520 --> 00:32:08,950 vous voulez probablement concentrer leur expérience sur l'action A. 487 00:32:08,950 --> 00:32:12,240 En d'autres termes, vous voulez faire comment très, très clair à faire A. 488 00:32:12,240 --> 00:32:15,980 A devrait être l'avant-centre - aller sur le site, le voir, oh, c'est juste là. 489 00:32:15,980 --> 00:32:20,850 Tandis que B est évident que vous voulez être clair, mais vous pouvez laisser un peu plus 490 00:32:20,850 --> 00:32:22,850 dans le fond. 491 00:32:22,850 --> 00:32:24,640 David donne un bon exemple de ce en conférence, 492 00:32:24,640 --> 00:32:26,640 qui est le système Boston T. 493 00:32:26,640 --> 00:32:29,440 Quand vous allez à Boston T et vous voulez acheter un billet, 494 00:32:29,440 --> 00:32:32,700 vous devez obtenir en 5 menus avant que vous pouvez réellement acheter un billet 495 00:32:32,700 --> 00:32:37,130 pour une valeur de 2 $ 2,50 $ qui est de savoir combien il faut prendre le métro 496 00:32:37,130 --> 00:32:39,130 dans une direction. 497 00:32:39,130 --> 00:32:41,600 C'est un problème parce que la plupart des gens qui sont dans le métro 498 00:32:41,600 --> 00:32:44,880 probablement juste envie d'aller à un endroit, acheter leur billet, obtenir tout de suite. 499 00:32:44,880 --> 00:32:47,550 Il n'a pas de sens qu'ils doivent passer par beaucoup de différents menus 500 00:32:47,550 --> 00:32:49,550 pour y arriver. 501 00:32:49,550 --> 00:32:51,760 Une meilleure expérience utilisateur serait un bouton rapide sur la première page 502 00:32:51,760 --> 00:32:54,760 qui dit simplement, «acheter un billet aller-simple», et qui mettrait en tout de la norme 503 00:32:54,760 --> 00:32:58,550 valeurs par défaut, et puis si quelqu'un veut acheter un billet différent de celui, 504 00:32:58,550 --> 00:33:01,690 ils encore, bien sûr, ont la possibilité, mais vous avez optimisé pour 505 00:33:01,690 --> 00:33:04,080 le cas d'utilisation commune qui est vraiment important. 506 00:33:04,080 --> 00:33:06,830 Vous pouvez voir des exemples de ce sur Facebook, non? 507 00:33:06,830 --> 00:33:09,410 Si vous allez à Facebook et vous souhaitez publier un statut, 508 00:33:09,410 --> 00:33:11,710 c'est tout en haut qui est ce que vous voulez souvent faire. 509 00:33:11,710 --> 00:33:14,730 Dès que vous entrez dans la page, vous pouvez faire des choses les plus communes que 510 00:33:14,730 --> 00:33:16,730 vous voulez faire. 511 00:33:16,730 --> 00:33:17,550 Si vous voulez faire les choses un peu plus complexes comme, 512 00:33:17,550 --> 00:33:21,070 dis que je veux aller sur le mur de mon ami et poster une image sur elle - 513 00:33:21,070 --> 00:33:24,810 que je vais veux faire souvent, mais pas aussi souvent que l'affichage de mises à jour d'état - 514 00:33:24,810 --> 00:33:28,200 donc dans ce cas, je tape son nom dans la case du haut, cliquez sur leur profil, 515 00:33:28,200 --> 00:33:31,680 et puis, toujours, il est tout en haut il une fois que j'ai appris à leur profil. 516 00:33:31,680 --> 00:33:38,240 Encore une fois, j'ai optimisé en priorité pour les cas les à usage commun le plus. 517 00:33:38,240 --> 00:33:41,800 >> Une autre chose importante est que, souvent, les gens vont sorte de tenter de contourner ce 518 00:33:41,800 --> 00:33:44,890 en disant, d'accord, alors je l'ai fait sur le site et les gens trouvent déroutant, 519 00:33:44,890 --> 00:33:46,110 et c'est un problème, non? 520 00:33:46,110 --> 00:33:49,210 Évidemment, je ne veux pas que les gens soient déconcertés par le contenu de mon site. 521 00:33:49,210 --> 00:33:53,210 Mais la façon de résoudre ce n'est pas d'avoir quelque chose de pop up disant: 522 00:33:53,210 --> 00:33:55,290 bon, je vais vous apprendre à utiliser ce site. 523 00:33:55,290 --> 00:33:58,130 Étape 1 - cliquez sur ce bouton. Étape 2 - aller ici. 524 00:33:58,130 --> 00:34:03,080 Bien sûr, c'est un moyen de contourner cela - c'est une façon que vous pouvez dire aux gens quoi faire, mais il est 525 00:34:03,080 --> 00:34:05,080 vraiment pas la meilleure façon. 526 00:34:05,080 --> 00:34:07,420 Si je vais à un site web et tout à coup je suis bombardé avec ce tutoriel qui est de me dire 527 00:34:07,420 --> 00:34:11,739 ce qu'il faut faire et où aller et tout ça, ce n'est pas amusant pour moi. 528 00:34:11,739 --> 00:34:13,739 Ce n'est pas une bonne expérience pour moi. 529 00:34:13,739 --> 00:34:17,130 C'est une sorte de douleur. Je veux juste commencer à faire des trucs. 530 00:34:17,130 --> 00:34:19,449 Les gens vont fermer leur boîte de dialogue, 531 00:34:19,449 --> 00:34:23,580 ou sortir du tutoriel, ne pas savoir quoi faire, et ensuite se plaindre parce 532 00:34:23,580 --> 00:34:25,580 vous leur avez pas dit ce qu'il faut faire. 533 00:34:25,580 --> 00:34:29,530 La façon de résoudre ce n'est pas en donnant toute sorte de tutoriel ou directions - 534 00:34:29,530 --> 00:34:31,530 quelque chose comme ça. 535 00:34:31,530 --> 00:34:33,719 Autant que vous pouvez l'éviter, vous voulez vraiment montrer à l'utilisateur ce qu'il faut faire 536 00:34:33,719 --> 00:34:36,429 seulement par la nature de la façon dont le site est aménagé. 537 00:34:36,429 --> 00:34:39,090 En d'autres termes, si je vais à Facebook sans se connecter, 538 00:34:39,090 --> 00:34:40,920 la première chose que je vois sur la page principale - 539 00:34:40,920 --> 00:34:44,480 c'est une petite boîte de connexion. Donc, duh. Je dois vous connecter C'est juste là. 540 00:34:44,480 --> 00:34:48,030 Considérant que, si je suis allé à Facebook et j'ai eu à cliquer sur un petit lien en bas 541 00:34:48,030 --> 00:34:51,920 qui a dit: «Connectez-vous» et le reste de la page était juste une sorte d'image ou de quelque chose, 542 00:34:51,920 --> 00:34:54,820 Je ne sais pas vraiment quoi faire, non? Je serais confus. 543 00:34:54,820 --> 00:34:58,590 Ainsi, il pourrait me dire d'aller là-bas et cliquez sur le bouton pour vous connecter, 544 00:34:58,590 --> 00:35:01,080 ou le bouton de connexion pourrait être tout en haut où je vais le voir. 545 00:35:01,080 --> 00:35:04,780 Vous voulez toujours être montrant à l'utilisateur ce qu'il faut faire, 546 00:35:04,780 --> 00:35:06,750 et qui devrait être inhérente à la page elle-même. 547 00:35:06,750 --> 00:35:09,880 >> Quand vous pensez à des conceptions et moqueur des différentes façons de 548 00:35:09,880 --> 00:35:13,810 exprimant votre site, vous voulez vraiment penser à ce que les utilisateurs vont 549 00:35:13,810 --> 00:35:19,380 être faites et comment vous pouvez leur montrer ce qu'il faut faire. 550 00:35:19,380 --> 00:35:23,530 Une dernière chose est le test est vraiment, vraiment important. 551 00:35:23,530 --> 00:35:27,400 Il est bon de trouver quelqu'un - demander à un ami, demandez à quelqu'un que vous ne connaissez même pas - 552 00:35:27,400 --> 00:35:30,420 qui n'a jamais vu le site avant d'utiliser le site. 553 00:35:30,420 --> 00:35:33,650 Parce que vous avez travaillé sur le site pendant des heures, vous avez été à regarder lui, 554 00:35:33,650 --> 00:35:36,670 et vous savez exactement ce qu'il faut faire si évidemment vous allez être tester l' 555 00:35:36,670 --> 00:35:39,520 choses que vous avez travaillé et que vous savez le travail. 556 00:35:39,520 --> 00:35:42,680 Mais si quelqu'un arrive et utilise le site qui n'a jamais utilisé auparavant, 557 00:35:42,680 --> 00:35:46,880 c'est une expérience unique parce que vous avez quelqu'un qui n'a aucune connaissance préalable 558 00:35:46,880 --> 00:35:51,530 du site, il en va, donc ils vont avoir effectivement aucune idée de ce qu'il faut faire 559 00:35:51,530 --> 00:35:54,890 ou ce genre de cas d'utilisation sont présents pour eux. 560 00:35:54,890 --> 00:36:00,930 C'est très bien. C'est unique car ils sont essentiellement une personne avec un blanc pour un esprit. 561 00:36:00,930 --> 00:36:03,750 Ils peuvent vous dire si quelque chose est ambiguë ou obscure. 562 00:36:03,750 --> 00:36:07,580 Ils peuvent vous donner une idée de ce que précisément l'expérience utilisateur de votre site est. 563 00:36:07,580 --> 00:36:10,630 Il peut être très difficile de dire que vous-même, il faut absolument que je vous encourage 564 00:36:10,630 --> 00:36:13,640 que vous développez vos projets - si vous faites des projets sur le Web - 565 00:36:13,640 --> 00:36:18,290 d'amener les gens à utiliser le site dès que vous avez une sorte de démonstration fonctionnelle. 566 00:36:18,290 --> 00:36:25,330 >> Maintenant, je vais parler un peu plus sur la façon de gérer un projet de développement web. 567 00:36:25,330 --> 00:36:28,900 Nous sommes allés sur la façon dont vous pouvez faire le côté arrière-technique, 568 00:36:28,900 --> 00:36:31,050 comment vous pouvez concevoir un site vraiment bien, 569 00:36:31,050 --> 00:36:34,150 et c'est très bien si vous travaillez par vous-même, mais - 570 00:36:34,150 --> 00:36:37,300 même si vous travaillez par vous-même et surtout si vous travaillez dans une équipe, 571 00:36:37,300 --> 00:36:39,580 gestion de projet devient un gros problème. 572 00:36:39,580 --> 00:36:42,340 Vous avez entendu parler de genre de gestion de projet sous différentes formes depuis 573 00:36:42,340 --> 00:36:45,410 l'école primaire quand on vous a dit le travail de groupe. 574 00:36:45,410 --> 00:36:46,820 Vous devez coopérer, communiquer, tout cela. 575 00:36:46,820 --> 00:36:49,620 Cela est d'autant toujours là, mais il ya des circonstances uniques avec 576 00:36:49,620 --> 00:36:54,910 l'informatique que vous voulez être au courant de, et vous voulez vous assurer que vous gérez bien. 577 00:36:54,910 --> 00:36:58,050 Je parlerai d'abord un peu de l'équipe que vous serez po 578 00:36:58,050 --> 00:37:03,280 Il est très important de choisir la bonne taille d'une équipe pour travailler sur, 579 00:37:03,280 --> 00:37:05,890 et dans votre projet final je pense que vous avez la possibilité de choisir 580 00:37:05,890 --> 00:37:08,610 entre 1 et 4 personnes si je suis correct. 581 00:37:08,610 --> 00:37:12,050 Vous voulez vous assurer que vous n'êtes pas seulement le choix du nombre de personnes 582 00:37:12,050 --> 00:37:14,950 que vous souhaitez travailler avec, car ils sont vos amis. 583 00:37:14,950 --> 00:37:18,170 Vous voulez choisir une équipe qui est une bonne taille et qui faire le travail. 584 00:37:18,170 --> 00:37:22,700 Il ya un arrêt de commerce à avoir plus de gens par rapport à moins de personnes. 585 00:37:22,700 --> 00:37:25,320 Si vous avez plus de gens, évidemment plus de travail peut être fait 586 00:37:25,320 --> 00:37:28,450 parce que vous avez beaucoup de gens, beaucoup de code, beaucoup d'idées, 587 00:37:28,450 --> 00:37:29,870 et c'est génial. 588 00:37:29,870 --> 00:37:32,590 Mais il faut aussi beaucoup plus de gestion et de beaucoup plus de communication. 589 00:37:32,590 --> 00:37:34,720 En d'autres termes, si vous avez 4 personnes travaillant sur le même projet 590 00:37:34,720 --> 00:37:39,200 et ils sont tous la modification du même code, plus ou moins tous type de besoin de savoir 591 00:37:39,200 --> 00:37:40,920 ce qui se passe si il vous oblige - 592 00:37:40,920 --> 00:37:44,580 si vous ajoutez une nouvelle fonction que vous avez sorte de dire aux gens - je suis en ajoutant ce, 593 00:37:44,580 --> 00:37:48,510 Je change ce de cette manière - en particulier si vous entrez dans les choses vraiment profonde 594 00:37:48,510 --> 00:37:52,730 comme les modèles et les contrôleurs qui vont effectivement influencer le fonctionnement du site. 595 00:37:52,730 --> 00:37:54,500 Toute l'équipe doit être conscient de cela, 596 00:37:54,500 --> 00:37:58,140 vous devez donc vous assurer que vous n'êtes pas le choix d'un trop grand équipe qui va être difficile 597 00:37:58,140 --> 00:37:59,970 de faire cette communication. 598 00:37:59,970 --> 00:38:02,930 Vous ne voulez pas choisir une petite équipe assez que vous n'allez pas 599 00:38:02,930 --> 00:38:06,250 être capable de communiquer parce que c'est vous. 600 00:38:06,250 --> 00:38:11,270 >> Une autre chose à considérer est le bilan de l'endroit où les compétences des personnes sont. 601 00:38:11,270 --> 00:38:14,350 C'est super si vous êtes tous très bons programmeurs. 602 00:38:14,350 --> 00:38:17,050 Mais si vous êtes tous les back-end, alors votre site ne va pas chercher très bonne 603 00:38:17,050 --> 00:38:20,860 parce que vous avez cette grande base de données, et il fait des requêtes de recherche ultra-rapide - 604 00:38:20,860 --> 00:38:26,130 ce qui est bien - mais quand vous allez à elle, c'est comme un site de 1990 rouge et bleu 605 00:38:26,130 --> 00:38:30,370 partout, et ce n'est pas bon non plus. 606 00:38:30,370 --> 00:38:34,210 Notez que Ben et moi à travailler en équipe sont très bien parce que je suis une sorte de plus 607 00:38:34,210 --> 00:38:38,030 dans l'extrémité avant, nous avons tous deux d'interagir dans le milieu de gamme, et Ben est vraiment bon avec des trucs d'arrière-plan, 608 00:38:38,030 --> 00:38:43,550 si cela fonctionne vraiment bien parce que nous pouvons concevoir n'importe quel site et essentiellement les trous 609 00:38:43,550 --> 00:38:47,580 dans ce site qui doivent être rempli peut être rempli par l'un de nous, ou peut-être les deux. 610 00:38:47,580 --> 00:38:50,210 Vous voulez vous assurer qu'il n'y a pas de trous dans votre équipe. 611 00:38:50,210 --> 00:38:51,180 C'est correct si il ya un peu de chevauchement. 612 00:38:51,180 --> 00:38:53,670 En d'autres termes, si vous avez deux personnes qui sont à la fois bon et back-end, 613 00:38:53,670 --> 00:38:57,250 qui peut être bien aussi parce qu'ils peuvent s'entraider avec des problèmes 614 00:38:57,250 --> 00:38:58,820 qu'ils ont. 615 00:38:58,820 --> 00:39:02,590 Il peut être un problème si vous avez seulement une personne qui est responsable d'une certaine chose 616 00:39:02,590 --> 00:39:06,650 et ils courent un problème, de sorte que vous ne voulez avoir un peu de chevauchement 617 00:39:06,650 --> 00:39:10,760 mais vous voulez surtout faire en sorte que tous les trous possibles sont remplis. 618 00:39:10,760 --> 00:39:17,550 >> La dernière chose - et cela devrait être évident, mais il est souvent pas. 619 00:39:17,550 --> 00:39:19,550 Vous voulez vraiment être en s'amusant. 620 00:39:19,550 --> 00:39:23,360 Le point de ce projet final CS50 et souvent le point de développement web en général 621 00:39:23,360 --> 00:39:26,360 est pas juste faire un travail parce qu'il a besoin de faire. 622 00:39:26,360 --> 00:39:29,140 Vous voulez vraiment être amusant, et vous voulez être faire quelque chose 623 00:39:29,140 --> 00:39:31,180 C'est vous motiver à travailler. 624 00:39:31,180 --> 00:39:33,650 Si ce que vous faites est une douleur de s'asseoir et de travailler, 625 00:39:33,650 --> 00:39:35,650 alors vous n'êtes pas choisir le bon projet. 626 00:39:35,650 --> 00:39:37,730 Vous voulez choisir quelque chose que vous trouvez intéressants, 627 00:39:37,730 --> 00:39:41,150 vous voulez vraiment voir le résultat, vous êtes excité lorsque vous obtenez une nouvelle idée sur 628 00:39:41,150 --> 00:39:44,700 quelque chose que vous pourriez faire - alors il ya toutes sortes de projets là que je suis sûr 629 00:39:44,700 --> 00:39:47,290 vous pouvez trouver - tout le monde a quelque chose qui serait vraiment intriguer les 630 00:39:47,290 --> 00:39:49,290 si ils font un projet basé sur le Web. 631 00:39:49,290 --> 00:39:52,210 Je vais le dire encore maintenant. 632 00:39:52,210 --> 00:39:54,520 Si votre projet semble comme une douleur et vous ne voulez pas travailler, 633 00:39:54,520 --> 00:39:57,260 choisir un autre projet. Choisissez quelque chose qui vous inspire vraiment. 634 00:39:57,260 --> 00:40:00,260 >> Ben mentionné ce concept de l'itération un peu, et je veux aller sur un peu. 635 00:40:00,260 --> 00:40:08,250 Il est vraiment important de travailler par à-coups lorsque vous obtenez quelque chose de fonctionnel. 636 00:40:08,250 --> 00:40:13,420 Il peut être très bien si vous avez ce plan d'un site qui va faire A, B, et C, 637 00:40:13,420 --> 00:40:16,000 et finalement il va y arriver. 638 00:40:16,000 --> 00:40:18,600 Mais vous êtes coincé dans cette phase où vous travaillez sur elle et de travailler sur elle, 639 00:40:18,600 --> 00:40:23,330 mais rien ne se fait. Vous n'avez rien à voir et, une chose fonctionnelle tangible. 640 00:40:23,330 --> 00:40:27,940 Ce que vous voulez vraiment faire autant qu'il semble une sorte de douleur parfois 641 00:40:27,940 --> 00:40:32,300 travailler sur quelque chose et puis sorte de couronner le tout afin qu'il soit au moins à un niveau stable, en cours d'exécution 642 00:40:32,300 --> 00:40:34,910 la version, même si elle ne possède pas toutes les fonctionnalités que vous souhaitez. 643 00:40:34,910 --> 00:40:37,690 Et peut-être il ya quelques fonctionnalités que vous voulez vraiment ajouter, mais vous ne pouvez pas 644 00:40:37,690 --> 00:40:41,830 parce que vous voulez pour obtenir ce site à un plan fonctionnel. 645 00:40:41,830 --> 00:40:44,400 Et si vous voulez avoir le genre de tout le processus de développement ressemble à ça. 646 00:40:44,400 --> 00:40:47,810 Vous voulez commencer quelque part fonctionnelle - ou essentiellement commencer avec rien - 647 00:40:47,810 --> 00:40:49,890 mais vous voulez arriver à quelque chose très simple et fonctionnelle. 648 00:40:49,890 --> 00:40:54,940 Et puis, faire une sorte de saut et obtenir de nouveau quelque part fonctionnelle. 649 00:40:54,940 --> 00:40:59,190 Vous construisez lentement, et il pourrait aller un peu plus lent que ne le feraient autrement, 650 00:40:59,190 --> 00:41:03,000 mais dans le long terme si vous êtes constamment coincé dans cette phase de terrain d'où vous 651 00:41:03,000 --> 00:41:06,380 n'avez pas réellement quoi que ce soit de travail, il peut être une très grosse frustration 652 00:41:06,380 --> 00:41:09,970 pour travailler sur votre projet, car vous êtes toujours si près de le faire marcher, 653 00:41:09,970 --> 00:41:12,130 et il n'a jamais réellement travailler. 654 00:41:12,130 --> 00:41:14,810 Vous voulez travailler dans ces poussées fonctionnelles, 655 00:41:14,810 --> 00:41:17,950 et vous aussi vous voulez faire un peu de réflexion après chacun d'eux. 656 00:41:17,950 --> 00:41:21,260 En d'autres termes, une fois que vous êtes à un point où le site est travaille maintenant - 657 00:41:21,260 --> 00:41:24,790 il n'a pas encore tout ce que vous voulez, mais il fait des choses - 658 00:41:24,790 --> 00:41:28,870 vous voulez penser, d'accord, c'est ce site réalisation de l'objectif que je me suis mis à faire? 659 00:41:28,870 --> 00:41:33,410 En d'autres termes, si le site va faire X, est ce que j'ai de travailler dans le sens de X? 660 00:41:33,410 --> 00:41:36,450 Sont toutes les fonctionnalités que je voulais il? 661 00:41:36,450 --> 00:41:39,340 Et d'ailleurs, il est au service de l'objectif général que je veux? 662 00:41:39,340 --> 00:41:43,200 Si vous trouvez que votre site est en train de virer dans une direction différente 663 00:41:43,200 --> 00:41:47,330 ou peut-être les choses juste un peu ne fonctionnent pas, il peut être temps de changer de vitesse un peu. 664 00:41:47,330 --> 00:41:51,700 En d'autres termes, il est utile d'examiner - il vaut la peine de jeter des idées si nécessaire 665 00:41:51,700 --> 00:41:57,950 et compte tenu de ce que je travaille vraiment à ce que je veux être. 666 00:41:57,950 --> 00:42:00,760 >> Je crois que c'est mon deuxième point. N'ayez pas peur d'abandonner les idées. 667 00:42:00,760 --> 00:42:03,750 Juste parce que vous avez passé beaucoup d'heures de travail sur une fonction 668 00:42:03,750 --> 00:42:07,890 et a finalement obtenu ce travail, mais il est vraiment pas aller si bien - 669 00:42:07,890 --> 00:42:12,690 comme ce n'est pas utile ou les utilisateurs ont du mal à utiliser - ce genre de chose - 670 00:42:12,690 --> 00:42:15,300 ne pas avoir peur de le jeter. 671 00:42:15,300 --> 00:42:17,650 Il suce que vous avez passé beaucoup de temps à travailler dessus, 672 00:42:17,650 --> 00:42:21,870 mais finalement vous ne voulez pas un site qui est de nature mis en place par ces pièces qui 673 00:42:21,870 --> 00:42:25,380 genre de travail, mais ne sont pas que bien servi. 674 00:42:25,380 --> 00:42:27,990 En outre, ne pas avoir peur d'embrasser de nouvelles idées. 675 00:42:27,990 --> 00:42:30,050 Si quelqu'un arrive et dit, hey, ce site a l'air vraiment cool, mais 676 00:42:30,050 --> 00:42:32,290 ne serait-il même être grande si elle aussi a fait cela? 677 00:42:32,290 --> 00:42:36,220 Juste parce que c'est quelque chose que vous n'aviez pas l'intention et quelque chose qui n'est pas dans votre 678 00:42:36,220 --> 00:42:37,900 spécifications, quelque chose que vous n'avez pas prévu de faire, 679 00:42:37,900 --> 00:42:40,860 ne pas avoir peur de prendre sur elle et puis de travailler avec elle. 680 00:42:40,860 --> 00:42:43,680 Parce que souvent les idées que vous exécutez à travers les cours de développement 681 00:42:43,680 --> 00:42:47,630 finissent par être les caractéristiques vraiment cool de ce site. 682 00:42:47,630 --> 00:42:49,630 >> Je l'ai dit avant. Je vais le dire à nouveau. 683 00:42:49,630 --> 00:42:51,630 Testeurs sont super, super utile. 684 00:42:51,630 --> 00:42:56,350 Essayez d'amener les gens qui n'ont jamais vu le site avant de vous connecter et de voir ce qui se passe 685 00:42:56,350 --> 00:42:59,080 parce qu'ils ne peuvent pas tester l'utilité du site et l'expérience utilisateur, 686 00:42:59,080 --> 00:43:02,070 mais ils peuvent aussi tester la fonctionnalité d'une manière que vous ne pouvez pas. 687 00:43:02,070 --> 00:43:06,430 Si vous faites une caractéristique qui fait une certaine chose 688 00:43:06,430 --> 00:43:11,620 et vous savez que ça va le faire même chose correctement à chaque fois, c'est très bien. 689 00:43:11,620 --> 00:43:16,610 Mais il peut souvent être difficile de tenir compte des cas où un coin de might utilisateur 690 00:43:16,610 --> 00:43:19,500 tapez quelque chose que vous ne vous attendiez pas - précisément parce que vous avez défini 691 00:43:19,500 --> 00:43:21,500 les caractéristiques vous-même. 692 00:43:21,500 --> 00:43:23,730 Donc, pour faire venir quelqu'un sur qui n'a aucune idée de la façon d'utiliser le site 693 00:43:23,730 --> 00:43:26,840 et à juste briser par tous les moyens qu'ils peuvent faire est vraiment utile parce que vous 694 00:43:26,840 --> 00:43:30,340 se faire une idée à partir d'un point de vue totalement différent de ce que sur votre site travaille 695 00:43:30,340 --> 00:43:33,300 et ce qui doit réparation. 696 00:43:33,300 --> 00:43:37,070 >> Enfin, je vais parler de quelques bonnes pratiques générales, 697 00:43:37,070 --> 00:43:42,470 et vous avez vu beaucoup de ceux-ci dans CS50, mais ils ont aussi vraiment, vraiment appliquer dans un cadre de projet. 698 00:43:42,470 --> 00:43:47,600 L'un est un commentaire. Toujours commenter votre code, surtout si vous travaillez sur une grande équipe. 699 00:43:47,600 --> 00:43:51,230 Il peut être si ennuyeux d'avoir juste un bloc géant de code qui quelqu'un a écrit 700 00:43:51,230 --> 00:43:54,230 et peut-être il fonctionne, peut-être ce n'est pas, mais vous n'avez aucune idée de ce qu'il fait, 701 00:43:54,230 --> 00:43:58,010 si vous n'avez aucune idée si c'est utile ou non, ou si elle doit être là ou pas, 702 00:43:58,010 --> 00:44:00,200 et si vous travaillez sur quelque chose d'autre, il est même possible que vous travaillez sur 703 00:44:00,200 --> 00:44:06,590 la même chose, si juste être très, très attention à être attentif à vos pairs 704 00:44:06,590 --> 00:44:09,710 et le code d'écriture qui est bien documenté. 705 00:44:09,710 --> 00:44:13,580 Vous n'avez pas à aller aussi loin que de faire toute chose où comme si vous incrémenter 706 00:44:13,580 --> 00:44:16,620 un compteur a un commentaire qui dit, je suis en ajoutant 1 à ce compteur. 707 00:44:16,620 --> 00:44:20,450 Il n'a pas à être de cette détaillé, mais pour toute fonction que vous êtes jamais écrit 708 00:44:20,450 --> 00:44:23,160 vous devriez avoir une documentation de ce que la fonction fait exactement, 709 00:44:23,160 --> 00:44:25,140 ce sont ses entrées, et ce qu'il devrait revenir. 710 00:44:25,140 --> 00:44:27,800 De cette façon, vous pouvez utiliser d'autres composants des gens du site 711 00:44:27,800 --> 00:44:31,990 et vous pouvez travailler à la construction de quelque chose de grand. 712 00:44:31,990 --> 00:44:34,100 >> Une autre chose importante est que vous voulez faire des nettoyages réguliers. 713 00:44:34,100 --> 00:44:40,490 Le code devient malpropre. Ne vous sentez pas mal si votre code est juste totalement illisible et un désordre géant. 714 00:44:40,490 --> 00:44:42,770 Cela arrive dans le développement web toujours. 715 00:44:42,770 --> 00:44:46,530 Vous ajout de nouvelles fonctionnalités, en supprimant les anciens. Stuff va être là qui ne devrait pas être. 716 00:44:46,530 --> 00:44:49,330 C'est très bien, mais vous voulez vous assurer que pour faire face à ce régulièrement. 717 00:44:49,330 --> 00:44:53,430 Vous ne voulez pas laisser s'accumuler au point où vous ne pouvez pas trouver quelque chose 718 00:44:53,430 --> 00:44:56,430 dans votre code, et vous n'avez aucune idée de ce que quoi que ce soit fait. 719 00:44:56,430 --> 00:44:58,430 C'est le cas avec le HTML. 720 00:44:58,430 --> 00:44:59,490 Parfois, vous vous retrouverez avec des objets qui ne contiennent pas du tout, 721 00:44:59,490 --> 00:45:01,320 et vous voulez vous débarrasser de ceux-ci. 722 00:45:01,320 --> 00:45:04,610 En CSS, vous pouvez faire allusion à des éléments qui ne sont pas plus là, 723 00:45:04,610 --> 00:45:06,340 si vous voulez vous débarrasser de ce code. 724 00:45:06,340 --> 00:45:09,900 En JavaScript, vous pourriez avoir retiré quelque chose de l'HTML. 725 00:45:09,900 --> 00:45:13,150 Donc, vous voulez vous assurer que vous êtes toujours nettoyer, faire des choses assez 726 00:45:13,150 --> 00:45:17,450 autant que vous le pouvez sur une base régulière. 727 00:45:17,450 --> 00:45:21,060 >> Une autre chose très utile que je ne pense pas est décrite très en CS50 728 00:45:21,060 --> 00:45:23,430 mais il vaut la peine d'entrer dans le contrôle de version est. 729 00:45:23,430 --> 00:45:27,180 L'idée de contrôle de version, c'est quand vous êtes essentiellement garder la trace de tous les progrès 730 00:45:27,180 --> 00:45:30,820 vous avez fait vers votre site et si à tout moment vous vous rendez compte, oh, ce travaillais 731 00:45:30,820 --> 00:45:35,220 il ya un moment, mais ça ne marche pas plus, vous pouvez revenir aux versions précédentes 732 00:45:35,220 --> 00:45:37,720 et voir ce qui a changé depuis lors, et ce genre de chose. 733 00:45:37,720 --> 00:45:41,670 Le principal moyen de le faire est avec Git, Git est et tout ce genre de système qui 734 00:45:41,670 --> 00:45:46,390 Je crois que Tommy MacWilliam a donné un séminaire sur l'année dernière. 735 00:45:46,390 --> 00:45:51,520 Si vous allez dans les séminaires de CS50 pour 2011, vous pouvez voir son séminaire à ce sujet. 736 00:45:51,520 --> 00:45:57,070 L'idée de Git est fondamentalement que, à intervalles réguliers que vous faites de ces engagements 737 00:45:57,070 --> 00:46:01,430 qui sont manières de dire le site est dans une version assez stable en ce moment donc 738 00:46:01,430 --> 00:46:05,910 Je l'emballer et l'envoyer loin à un serveur, et alors vous pouvez aller à ce serveur 739 00:46:05,910 --> 00:46:07,910 et de regarder toutes les versions précédentes de votre code et de voir comment il a progressé 740 00:46:07,910 --> 00:46:12,210 et toute cette sorte de choses intéressantes. 741 00:46:12,210 --> 00:46:14,210 Donc, c'est essentiellement cela. 742 00:46:14,210 --> 00:46:17,870 En ce qui concerne le développement web, nous sommes heureux de rester et de répondre à toute 743 00:46:17,870 --> 00:46:20,570 des questions en ce qui concerne notre présentation. 744 00:46:20,570 --> 00:46:22,900 C'est tout. Merci. >> [Ben] Merci. 745 00:46:22,900 --> 00:46:28,480 [Applaudissements] 746 00:46:28,480 --> 00:46:30,950 >> [Billy] personnel, quelqu'un at-il des questions sur des choses que nous avons couvert 747 00:46:30,950 --> 00:46:33,950 ou des choses que nous n'avons pas couvert qu'ils espéraient nous aimerions couvrir? 748 00:46:33,950 --> 00:46:35,950 Nous serons heureux de répondre à celles-ci. N'importe qui? 749 00:46:35,950 --> 00:46:50,360 [Membre de l'auditoire] Quels sont les avantages et les inconvénients de l'utilisation de Ruby ou Python en utilisant? 750 00:46:50,360 --> 00:46:58,660 [Ben] La question était, quels sont les avantages et les inconvénients de l'utilisation de Ruby ou Python 751 00:46:58,660 --> 00:46:59,900 au lieu de comme PHP. 752 00:46:59,900 --> 00:47:11,340 Les avantages sont que Ruby et Python sont de bien meilleurs langues que PHP. 753 00:47:11,340 --> 00:47:14,920 Au moins, à mon avis, et je pense que dans un grand nombre des avis d'autres personnes aussi. 754 00:47:14,920 --> 00:47:20,990 Ils ont été conçus pour faire des trucs plus complexe, 755 00:47:20,990 --> 00:47:25,380 et moins pour la raclée ensemble les pages web très rapidement avec 756 00:47:25,380 --> 00:47:28,400 un peu de contenu dynamique. 757 00:47:28,400 --> 00:47:35,180 Les inconvénients sont qu'il ya un peu de - il ya plus d'une courbe d'apprentissage 758 00:47:35,180 --> 00:47:37,220 de les faire mettre en place. 759 00:47:37,220 --> 00:47:41,010 C'est, comme en PHP, vous pouvez juste avoir un fichier HTML et vous écrire moins que, 760 00:47:41,010 --> 00:47:43,060 point d'interrogation, puis vous écrivez du code, puis vous écrivez interrogation, 761 00:47:43,060 --> 00:47:45,700 supérieur à, puis vous avez terminé. 762 00:47:45,700 --> 00:47:50,300 Dans d'autres langues comme Ruby ou Python, 763 00:47:50,300 --> 00:47:56,810 vous devez passer par un peu plus de travail pour obtenir le site initial fonctionnement. 764 00:47:56,810 --> 00:48:02,730 Il ya aussi - du moins il l'habitude d'être le cas - qu'il ya plus de documentation 765 00:48:02,730 --> 00:48:05,480 disponible pour PHP juste parce qu'il ya plus de gens qui l'utilisent. 766 00:48:05,480 --> 00:48:09,370 Je pense que ce n'est pas tant d'une question plus. 767 00:48:09,370 --> 00:48:12,520 Il ya certainement une très bonne documentation pour des trucs comme Ruby on Rails 768 00:48:12,520 --> 00:48:16,080 ou Django pour Python est l'équivalent. 769 00:48:16,080 --> 00:48:25,910 PHP est l'un que tout le monde utilise depuis des années, et vous savez comment cela fonctionne. 770 00:48:25,910 --> 00:48:28,460 Ruby et Python sont un peu moins mature. 771 00:48:28,460 --> 00:48:33,130 >> [Membre de l'auditoire] Si vous deviez choisir entre l'un d'eux d'apprendre ou de ramasser, 772 00:48:33,130 --> 00:48:36,130 qui préférez-vous? 773 00:48:36,130 --> 00:48:38,870 Honnêtement, je pense que cela dépend de la personne. 774 00:48:38,870 --> 00:48:45,450 Je suis désolé. La question était de savoir lequel choisiriez-vous pour quelqu'un d'apprendre? 775 00:48:45,450 --> 00:48:50,230 Je trouve personnellement Python la plus belle. 776 00:48:50,230 --> 00:48:55,360 Il ya beaucoup de gens qui - j'ai fait mon premier projet de dev web en Python et Django. 777 00:48:55,360 --> 00:49:00,300 Il ya beaucoup de gens qui aiment Ruby on Rails également. 778 00:49:00,300 --> 00:49:02,650 Probablement plus de gens qui connaissent Ruby on Rails. 779 00:49:02,650 --> 00:49:05,270 Honnêtement, je voudrais juste aller avec ce que les gens autour de vous savent 780 00:49:05,270 --> 00:49:09,680 de sorte que vous avez des gens à poser des questions. 781 00:49:19,640 --> 00:49:24,170 >> La question était - sur des serveurs partagés est-il un peu difficile de travailler sur Python? 782 00:49:24,170 --> 00:49:26,170 Cela dépend de votre hébergement. 783 00:49:26,170 --> 00:49:29,400 Il ya un certain nombre de hébergeurs de sites qui afficheront Python choses. 784 00:49:29,400 --> 00:49:31,400 WebFaction fait ça, non? 785 00:49:31,400 --> 00:49:34,400 WebFaction est un que Billy et moi avons utilisé pour certains projets. 786 00:49:34,400 --> 00:49:37,750 Ils sont vraiment super. Ils soutiennent la plupart des langues. 787 00:49:37,750 --> 00:49:40,020 Mais c'est vrai que PHP est beaucoup plus large soutien. 788 00:49:40,020 --> 00:49:45,210 Donc, si vous êtes coincé sur un hébergeur qui ne fait PHP, c'est une bonne raison d'utiliser PHP. 789 00:49:45,210 --> 00:49:56,010 >> [Membre de l'auditoire] Je viens à apprendre à interroger certaines bases de données, 790 00:49:56,010 --> 00:50:00,680 et je sais que mon SQL est partout, mais je me suis récemment exposé à - 791 00:50:00,680 --> 00:50:04,470 et vous l'avez fait sortir. Vous voyez JSON et bases de données extensibles. 792 00:50:04,470 --> 00:50:14,580 My SQL est encore partout. Comment voyez-vous que cela se produise? 793 00:50:14,580 --> 00:50:21,330 Est ce qu'il y aura une tendance croissante pour plus extensible (inaudible)? 794 00:50:21,330 --> 00:50:30,100 La question était - que je pense qu'il va y avoir une tendance vers des bases de données non-SQL. 795 00:50:30,100 --> 00:50:33,850 Par exemple, comme MongoDB. Je pense que c'est certainement vrai. 796 00:50:33,850 --> 00:50:38,730 Mon conseil a été principalement liée à MySQL ici seulement parce que MySQL est 797 00:50:38,730 --> 00:50:40,950 standard de l'industrie. 798 00:50:40,950 --> 00:50:45,950 Personnellement, je préfère de beaucoup les bases de données qui n'ont pas schemos comme MongoDB 799 00:50:45,950 --> 00:50:49,520 où vous n'avez pas la question de, oh, j'ai besoin d'ajouter une autre colonne. 800 00:50:49,520 --> 00:50:51,600 Malheur à moi, comme tout ce que je fais? 801 00:50:51,600 --> 00:50:55,840 Il est très difficile de le faire sur mySQL, mais quand vous avez quelque chose comme Mongo 802 00:50:55,840 --> 00:50:57,840 c'est beaucoup plus agréable. 803 00:50:57,840 --> 00:51:03,780 L'autre bonne chose à propos de Mongo est que vos dossiers sont en fait des objets JavaScript. 804 00:51:03,780 --> 00:51:10,110 Il n'y a pas de tri de l'étape de conversion où vous devez prendre ces lignes de base de données 805 00:51:10,110 --> 00:51:13,140 et les transformer en un objet JavaScript et puis les envoyer sur le fil. 806 00:51:13,140 --> 00:51:20,290 Je pense que des choses comme ça va être très, très utile pour le développement rapide d'applications web à l'avenir. 807 00:51:20,290 --> 00:51:23,060 >> [Billy] Quelque chose J'ajoute qui est juste un point de vue général est que 808 00:51:23,060 --> 00:51:26,580 ne vous sentez pas comme vous devriez avoir appris toutes les langues dont nous avons parlé 809 00:51:26,580 --> 00:51:28,580 de notre séminaire. 810 00:51:28,580 --> 00:51:30,560 Évidemment, le but est de vous donner une idée de ce qui existe, 811 00:51:30,560 --> 00:51:33,450 et si vous êtes intrigué par l'une des choses que nous avons mentionnées, vous pouvez les Google 812 00:51:33,450 --> 00:51:35,830 et lire sur eux. 813 00:51:35,830 --> 00:51:38,750 Et comme je l'ai mentionné, il ya quelques séminaires qui traitent précisément de ces choses. 814 00:51:38,750 --> 00:51:41,660 Il ya encore plus de séminaires que je n'ai pas mentionnés qui obtiennent probablement en 815 00:51:41,660 --> 00:51:43,660 ce genre de choses ainsi. 816 00:51:43,660 --> 00:51:46,610 L'idée est que si vous voulez travailler sur quelque chose, voici les outils à votre disposition. 817 00:51:46,610 --> 00:51:51,630 Ne vous sentez pas dépassé si vous n'êtes pas vraiment sûr de ce que ces outils font exactement, 818 00:51:51,630 --> 00:51:54,830 mais ils savent qu'ils sont là et que vous pouvez faire usage large d'entre eux 819 00:51:54,830 --> 00:51:56,830 par Google. 820 00:51:56,830 --> 00:51:59,960 >> [Membre de l'auditoire] Quel genre de choses que vous devez faire pour vous assurer que votre site web 821 00:51:59,960 --> 00:52:02,530 semble bon sur les appareils mobiles? 822 00:52:02,530 --> 00:52:05,590 [Billy] Les appareils mobiles sont un peu durs. 823 00:52:05,590 --> 00:52:07,590 Il ya deux façons que vous pouvez l'approcher. 824 00:52:07,590 --> 00:52:11,500 La première est que vous avez réellement un site web mobile. 825 00:52:11,500 --> 00:52:14,660 En d'autres termes, vous effectuez une sorte de détection au début 826 00:52:14,660 --> 00:52:18,830 lorsque le navigateur fait la demande à votre site Web qui soit dit 827 00:52:18,830 --> 00:52:25,240 retourner ce point de vue - qui sera le point de vue pour les navigateurs de bureau ou portable - 828 00:52:25,240 --> 00:52:27,710 et cette autre vue pour les appareils mobiles. 829 00:52:27,710 --> 00:52:33,090 C'est un endroit où les vues sont vraiment bien en ce que vous pouvez très bien l'échange 830 00:52:33,090 --> 00:52:37,580 deux sortir et avoir une interface qui fonctionne vraiment bien sur les appareils mobiles 831 00:52:37,580 --> 00:52:40,770 et un autre totalement différent qui fonctionne bien sur les appareils de navigation. 832 00:52:40,770 --> 00:52:43,770 Le problème, c'est que cela prend beaucoup de temps parce que cela signifie codage 833 00:52:43,770 --> 00:52:47,060 une interface totalement différente. 834 00:52:47,060 --> 00:52:49,720 L'autre façon que vous pouvez faire c'est - 835 00:52:49,720 --> 00:52:55,250 un grand nombre de téléphones modernes affichera sites et essayer de les rendre comme un navigateur serait, 836 00:52:55,250 --> 00:52:57,680 et ils font de leur mieux. 837 00:52:57,680 --> 00:53:04,340 Vous pouvez sorte de tenter de rester la lumière sur le montant de JavaScript jQuery vous utilisez 838 00:53:04,340 --> 00:53:07,360 qui tend à être là où les choses peuvent mal se passer un peu. 839 00:53:07,360 --> 00:53:13,430 C'est en quelque sorte le chemin que vous devez utiliser si vous n'avez pas beaucoup de temps. 840 00:53:13,430 --> 00:53:18,540 Si vous avez le temps de travailler sur une interface mobile, c'est évidemment la meilleure option. 841 00:53:18,540 --> 00:53:23,320 >> Je pense qu'en général, pour les projets de CS50, vous allez avoir à choisir l'un ou l'autre. 842 00:53:23,320 --> 00:53:27,990 En d'autres termes, vous voulez faire une application mobile ou si vous voulez faire un site Web de bureau. 843 00:53:27,990 --> 00:53:32,200 Et qui détermine en quelque sorte où vous allez avec ça. 844 00:53:32,200 --> 00:53:35,360 Mais si vous voulez l'étendre plus tard, probablement votre meilleur pari est 845 00:53:35,360 --> 00:53:37,360 effectuer une autre interface pour l'autre. 846 00:53:51,650 --> 00:53:56,340 J'ai un peu d'expérience dans le développement de sites basés sur WordPress. 847 00:53:56,340 --> 00:53:58,670 J'ai animé un site perso sur WordPress pour un certain temps. 848 00:53:58,670 --> 00:54:02,310 Ces types de cadres peuvent être de belles choses comme très de base. 849 00:54:02,310 --> 00:54:07,050 Souvent vous suffit de lancer dans un grand nombre de questions de personnalisation bien. 850 00:54:07,050 --> 00:54:10,940 Vous aurez envie d'avoir quelque chose de regarder d'une certaine façon ou être d'une certaine façon 851 00:54:10,940 --> 00:54:14,510 et vous pouvez tout simplement pas parce qu'il est codée en dur dans le système 852 00:54:14,510 --> 00:54:17,480 c'est de cette façon que vous avez à faire des choses qui peuvent être un peu un problème. 853 00:54:17,480 --> 00:54:22,020 Depuis, j'ai été genre de plus enclins à travailler avec des sites à partir de zéro. 854 00:54:22,020 --> 00:54:26,840 Pour des choses comme les bases de données de blog et ce genre de chose, c'est vraiment pas difficile de construire un cadre. 855 00:54:26,840 --> 00:54:29,970 Si vous êtes vraiment tendu par le temps, vous pouvez bien sûr utiliser quelque chose comme WordPress 856 00:54:29,970 --> 00:54:33,120 ou ce genre de chose pour un blog. 857 00:54:33,120 --> 00:54:38,790 Le genre de choses que les blogs magasin et faire ne sont pas vraiment assez dur que 858 00:54:38,790 --> 00:54:41,500 si vous utilisez dans aucune de ces sortes de choses, vous êtes probablement le meilleur juste de 859 00:54:41,500 --> 00:54:43,500 faire une version en interne. 860 00:54:43,500 --> 00:54:48,350 >> Je pense que c'est à ce sujet, donc merci encore d'être venus. 861 00:54:48,350 --> 00:54:51,960 Nous avons vraiment apprécié de parler à vous les gars et nous espérons que vous avez appris quelques trucs. 862 00:54:51,960 --> 00:54:55,350 [Ben] Nous sommes heureux de parler - nous avons à faire, mais nous sommes heureux de parler plus à l'extérieur 863 00:54:55,350 --> 00:55:01,650 si vous avez une autre question. Merci encore. [Applaudissements] 864 00:55:03,750 --> 00:55:06,000 [CS50.TV]