1 00:00:00,000 --> 00:00:02,500 [Powered by Google Translate] [Seminar] [Web-Entwicklung: Von der Idee zur Umsetzung] 2 00:00:02,500 --> 00:00:04,200 [Ben Kuhn] [Billy Janitsch] [Harvard University] 3 00:00:04,200 --> 00:00:07,250 [Dies ist CS50] [CS50.TV] 4 00:00:07,250 --> 00:00:10,840 [Billy] Hallo, ich bin Billy und das ist Ben. >> [Ben] Hallo. 5 00:00:10,840 --> 00:00:12,840 Wir werden über die Web-Entwicklung werden heute sprechen. 6 00:00:12,840 --> 00:00:14,840 [Webdev] [Billy Janitsch und Ben Kuhn] 7 00:00:14,840 --> 00:00:16,840 Ein bisschen über uns zuerst. 8 00:00:16,840 --> 00:00:19,590 Ben ist eine Art Back-End-Typ. Er macht die Dinge funktionieren. 9 00:00:19,590 --> 00:00:21,870 Und dann gehe ich in und machen sie schön. 10 00:00:21,870 --> 00:00:26,610 Ich bin weitgehend engagieren mit Front-End-Layout-Design Art von Sachen, 11 00:00:26,610 --> 00:00:31,260 und Ben, auf der anderen Seite, der weiß, was er tut, so arbeitet er an Back-End-Zeug. 12 00:00:31,260 --> 00:00:34,050 Gemeinsam haben wir ein paar Dinge gemacht. 13 00:00:34,050 --> 00:00:38,710 Zum Beispiel im letzten Jahr haben wir an Gimblium die ein Online-Spieleentwicklungsstudio ist. 14 00:00:38,710 --> 00:00:40,400 Das war unser letztes Projekt für die Klasse, 15 00:00:40,400 --> 00:00:42,780 und seitdem haben wir Harvard-Klasse gemacht haben 16 00:00:42,780 --> 00:00:47,860 Das ist ein Online-Rahmen für das Surfen und Einkaufen Kurse in Harvard. 17 00:00:47,860 --> 00:00:53,180 >> Wir werden mit dieser Idee für unsere Website zu starten. 18 00:00:53,180 --> 00:00:57,480 Wir werden Facebook zu machen, aber für Katzen. 19 00:00:57,480 --> 00:00:59,520 Bevor Sie tatsächlich dieser Website 20 00:00:59,520 --> 00:01:02,520 nicht machen diese Website, weil es nicht gut, aber wir werden es als Rahmen 21 00:01:02,520 --> 00:01:05,349 und durch den Prozess, wie wir diese Idee gehen 22 00:01:05,349 --> 00:01:07,450 und machen es zu einem echten Website, die wir verwenden können. 23 00:01:07,450 --> 00:01:11,940 Wir werden durch das Brechen der Website nach unten zu beginnen. 24 00:01:11,940 --> 00:01:13,190 Wie haben Sie in CS50 getan, 25 00:01:13,190 --> 00:01:17,360 Sie wollen über das, was sind die aktuellen Komponenten, die in dieser Website gehen denken. 26 00:01:17,360 --> 00:01:21,290 Im Grunde dreht es von einer Idee, die einfach irgendwie ein abstrakter Begriff ist 27 00:01:21,290 --> 00:01:23,590 in eine echte, greifbare Sache, die Sie machen können. 28 00:01:23,590 --> 00:01:25,910 Wir beginnen, indem wir einige Fragen. 29 00:01:25,910 --> 00:01:28,070 Was ist diese Website? Warum machen wir es? 30 00:01:28,070 --> 00:01:30,670 Was wird es für verwendet werden? So etwas. 31 00:01:30,670 --> 00:01:33,660 Im Fall von Facebook-Katze, 32 00:01:33,660 --> 00:01:37,730 wir wollen im Grunde eine Website, die Katzen soziale Netzwerk können miteinander. 33 00:01:37,730 --> 00:01:41,260 Die Idee ist, dass sie gegenseitig auf die Wände veröffentlichen können, 34 00:01:41,260 --> 00:01:43,510 sie können Kommentare hinzufügen, so etwas zu machen. 35 00:01:43,510 --> 00:01:46,720 Und das ist, wo wir in die Funktionskomponenten zu kommen. 36 00:01:46,720 --> 00:01:51,270 Wir haben jetzt diese Art von Rahmen - wir müssen Benutzerprofile 37 00:01:51,270 --> 00:01:53,990 wir haben Kommentare, und wir veröffentlichen können. 38 00:01:53,990 --> 00:01:57,390 Vielleicht eines Tages werden wir Vorlieben und so etwas Zustrom. 39 00:01:57,390 --> 00:02:00,410 Und wir Art, um diese Funktionen gehen in. priorisieren wollen 40 00:02:00,410 --> 00:02:03,340 Wir wollen sagen wie, okay, es ist wirklich wichtig, dass jeder ein Profil hat 41 00:02:03,340 --> 00:02:06,440 und dass jeder gegenseitig auf die Wände schreiben. 42 00:02:06,440 --> 00:02:08,509 Sekundär kommt, dass Kommentare wäre schön. 43 00:02:08,509 --> 00:02:10,180 Vielleicht später werden wir Gleichen Zustrom. 44 00:02:10,180 --> 00:02:13,700 Also, um eine Vorstellung von dem, was grundlegend für Ihr Projekt haben wollen 45 00:02:13,700 --> 00:02:17,260 und was ist eine Art allgemeiner Funktion, die später angewandt werden könnten. 46 00:02:17,260 --> 00:02:20,870 Sie wollen eine Art haben eine bestimmte Liste im Hinterkopf, 47 00:02:20,870 --> 00:02:24,090 aber das Projekt, das Sie mit zu beginnen ist nicht zu dem Projekt, die Sie mit zu beenden. 48 00:02:24,090 --> 00:02:27,100 In anderen Worten, die Dinge zu ändern, während Sie mit der Entwicklung der Website sind, 49 00:02:27,100 --> 00:02:30,090 und Sie, um Platz für das verlassen möchten. 50 00:02:30,090 --> 00:02:34,470 Ich werde es umdrehen, um Ben wer wird ein wenig über Struktur sprechen. 51 00:02:34,470 --> 00:02:39,610 >> [Ben] Ich werde mehr über die technische Seite der Web-Entwicklung zu sprechen. 52 00:02:39,610 --> 00:02:42,370 Lassen Sie uns nur über einige Grundlagen gehen zuerst. 53 00:02:42,370 --> 00:02:45,730 Wenn du tust, eine Web-App, 54 00:02:45,730 --> 00:02:50,470 die Hauptabteilung, die Sie gehen zu müssen, haben gerade ist 55 00:02:50,470 --> 00:02:52,700 Sie gehen ein paar Sachen los in der Client-Seite haben - 56 00:02:52,700 --> 00:02:56,700 das heißt, der Code, den Sie dauert Browser sind von der Website 57 00:02:56,700 --> 00:03:01,910 und der JavaScript-, HTML-, CSS-Zeug. 58 00:03:01,910 --> 00:03:04,490 Das ist alles auf der Client-Seite. 59 00:03:04,490 --> 00:03:08,680 Du wirst anderen Code, der auf der Server-Seite läuft haben 60 00:03:08,680 --> 00:03:10,770 die Länge hält alle Daten, die Leute schicken, um Sie, 61 00:03:10,770 --> 00:03:15,060 entscheidet, wer, was, so was zu geben. 62 00:03:15,060 --> 00:03:20,380 Dies ist nur einige Begriffe, so dass Sie Jungs sind alle mit dem, was wir reden vertraut. 63 00:03:20,380 --> 00:03:28,600 Jenseits dieser Abteilung ist es gut zu Ihrer Web-App in Sachen denken 64 00:03:28,600 --> 00:03:32,500 ein paar verschiedene Komponenten. 65 00:03:32,500 --> 00:03:35,270 Wenn du tust, Web-Entwicklung sind 66 00:03:35,270 --> 00:03:41,710 eines der Dinge, die Sie schon immer werden sollte, versuche zu tun ist, um die Komplexität zu reduzieren. 67 00:03:41,710 --> 00:03:45,710 Je komplexer der Code ist, desto mehr Chancen gibt es, um Fehler zu machen, 68 00:03:45,710 --> 00:03:47,710 desto schwieriger ist es zu einem späteren Zeitpunkt ändern. 69 00:03:47,710 --> 00:03:50,140 Also, wenn Sie in ein paar verschiedene Funktionsbereiche brechen Ihre App 70 00:03:50,140 --> 00:03:57,640 das wird - und Sie können die Art der Menge der Quer Bereich Kommunikation zu reduzieren - 71 00:03:57,640 --> 00:04:03,530 das wird helfen, eine Menge auf lange Sicht in Bezug auf die Verringerung Bugs. 72 00:04:03,530 --> 00:04:07,950 >> Um konkret zu sein, in der Regel Menschen Aufteilung einer Web-App in - 73 00:04:07,950 --> 00:04:13,190 diese Art von Schlagworten jetzt, aber sie sind immer noch nützlich. 74 00:04:13,190 --> 00:04:17,940 Vielleicht gehört, die Menschen über Modelle, Ansichten und Controller reden. 75 00:04:17,940 --> 00:04:23,210 Modelle sind die eigentlichen Daten, die Ihre Anwendung wird, zu beschäftigen. 76 00:04:23,210 --> 00:04:28,260 Zum Beispiel in Ihrem Facebook-Cat, Ihre Modelle wäre - 77 00:04:28,260 --> 00:04:35,340 Sie würden ein Modell für ähnliche Beiträge, und ein Modell für Benutzerprofile, solche Sachen. 78 00:04:35,340 --> 00:04:41,090 Ihre Ansichten sind, wie Sie diese Daten an die Benutzer zu präsentieren. 79 00:04:41,090 --> 00:04:46,660 Vielleicht ein Blick für den Blick auf einen einzelnen Beitrag und alle die Kommentare haben 80 00:04:46,660 --> 00:04:51,720 und eine andere Ansicht für Ihre Wand, die eine Liste aller Beiträge hat 81 00:04:51,720 --> 00:04:57,170 die an Sie gerichtet sind, und eine andere Ansicht für Ihre News-Feed - solche Sachen. 82 00:04:57,170 --> 00:05:00,610 Schließlich haben Sie die Controller, die im Grunde sind, wenn die Menschen senden Ihnen Beiträge 83 00:05:00,610 --> 00:05:03,310 und Sie machen Aktuelles zu den Back-End-System, 84 00:05:03,310 --> 00:05:06,400 Sie eine Reihe von Zähler erhöhen, und was auch immer. 85 00:05:06,400 --> 00:05:07,860 Das sind Ihre Steuerungen. 86 00:05:07,860 --> 00:05:11,030 >> Ich werde meist werden über Modelle reden. 87 00:05:11,030 --> 00:05:14,030 Ansichten sind technisch nicht so schwierig, und die Frage ist mehr mit der Gestaltung sie 88 00:05:14,030 --> 00:05:22,040 Controller gehen spezifisch auf was auch immer Sie entwerfen zu sein. 89 00:05:22,040 --> 00:05:25,220 Aber es gibt einige ziemlich allgemeine Techniken, die Sie verwenden können, 90 00:05:25,220 --> 00:05:30,220 , um Ihre Modelle schöner und einfacher, mit, dass ich denke, sind sehr hilfreich, zu arbeiten. 91 00:05:30,220 --> 00:05:35,860 Dies ist vor allem darüber nachdenken, wie mit Ihrem Web-Anwendungen Daten in einer netten Art und Weise umzugehen. 92 00:05:35,860 --> 00:05:40,420 Die Hauptthemen, mit Modellen 93 00:05:40,420 --> 00:05:44,540 sind, dass sie leben auf dem Client und dem Server und Sie haben, um herauszufinden, 94 00:05:44,540 --> 00:05:51,170 a) wie man sie erhält - alle einschlägigen diejenigen - vom Server auf den Client, 95 00:05:51,170 --> 00:05:53,440 und b) wie man sie synchron zu halten. 96 00:05:53,440 --> 00:05:58,700 Ihre Benutzer gehen zu wollen, um einige Updates zu machen. 97 00:05:58,700 --> 00:06:00,470 Sie gehen zu wollen, um neue Beiträge zu machen. 98 00:06:00,470 --> 00:06:04,800 Sie werden zu den Dingen und Sachen mögen, wenn Sie Leuten haben wollen. 99 00:06:04,800 --> 00:06:11,490 Das sind die wichtigsten technischen Herausforderungen im Umgang mit Modellen. 100 00:06:11,490 --> 00:06:15,680 Das erste, was Sie vorhaben, sich zu fragen zu wollen, sind es 101 00:06:15,680 --> 00:06:18,420 welche Art von Daten geht in diesem Modell und welche Art von Anfragen werden wir tun wollen - 102 00:06:18,420 --> 00:06:24,290 das heißt, wie werden wir bei den Modellen aus? 103 00:06:24,290 --> 00:06:26,940 Für Ihre Katze Facebook beispielsweise, 104 00:06:26,940 --> 00:06:31,520 Ihre Post wird einen Autor zugeordnet sein, 105 00:06:31,520 --> 00:06:35,660 einige Pinwand Text und ein Empfänger der Wandpfosten. 106 00:06:35,660 --> 00:06:38,470 Und dann möchten Sie vielleicht, dass in einer Reihe von verschiedenen Möglichkeiten abfragen. 107 00:06:38,470 --> 00:06:42,220 Sie wollen würde, um es durch die die Post schrieb aussehen, 108 00:06:42,220 --> 00:06:46,620 durch die, die vielleicht von der Post Datum veröffentlicht erhalten. 109 00:06:46,620 --> 00:06:50,340 Aber wenn du es nach Datum tun haben, dann um ein weiteres Feld zu Ihrem Beitrag hinzufügen, müssen Sie 110 00:06:50,340 --> 00:06:52,490 der, wenn es tatsächlich gebucht. 111 00:06:52,490 --> 00:07:00,220 Diese 2 Faktoren - welche Daten die Sie verwenden möchten und wie Sie es sehen wollen - 112 00:07:00,220 --> 00:07:04,200 Sie sollten über sie zuerst denken, weil sie voneinander abhängig sind, 113 00:07:04,200 --> 00:07:08,030 und es wird schwieriger zu sein, um sie später hinzufügen. 114 00:07:08,030 --> 00:07:12,750 >> Es gibt einige andere Überlegungen. 115 00:07:12,750 --> 00:07:17,540 Wenn Sie darüber, wie Sie mit den Modellen auf dem Server umgehen denken 116 00:07:17,540 --> 00:07:20,540 was Sie wollen, zu betrachten ist - 117 00:07:20,540 --> 00:07:27,440 Sie wollen im Grunde der Server so einfach wie möglich zu machen. 118 00:07:29,440 --> 00:07:35,500 Dinge tun, auf der Client-Seite ist in der Regel sehr viel schneller, wenn man es rein auf dem Client tun kann 119 00:07:35,500 --> 00:07:38,230 ohne jegliche Art von Netzwerkanfrage. 120 00:07:38,230 --> 00:07:47,860 Die Idee ist, möglichst viele der Fragen, wie Sie können auf dem Client zu tun. 121 00:07:47,860 --> 00:07:51,560 Das einzige Problem, dass 122 00:07:51,560 --> 00:07:54,160 ist, dass, wenn Sie verlangen alle Ihre Daten zu Beginn 123 00:07:54,160 --> 00:07:57,160 dann, das wird eine lange Zeit dauern. 124 00:07:57,160 --> 00:08:02,290 So ist die Idee, einen Mittelweg zwischen genügend Daten auf dem Client zu schlagen 125 00:08:02,290 --> 00:08:07,640 , dass Sie die meisten Ihrer Arbeit dort tun können, aber nicht einfach alles auf einmal holen 126 00:08:07,640 --> 00:08:09,710 so dass Sie wirklich lange Ladezeiten am Anfang. 127 00:08:09,710 --> 00:08:12,610 Zum Beispiel für Ihre Katze Daten 128 00:08:12,610 --> 00:08:20,340 würden Sie wahrscheinlich wollen, um ein paar der letzten Beiträge Wand zu holen. 129 00:08:20,340 --> 00:08:23,790 Sie würde nicht wollen, alle von ihnen zu holen, denn das könnte wieder ein paar Jahre vergehen. 130 00:08:23,790 --> 00:08:25,470 Aber Sie wollen nicht, um sie zu einer Zeit, holen ein 131 00:08:25,470 --> 00:08:28,740 denn das würde eine Menge von Netzwerk-Overhead einzuführen. 132 00:08:28,740 --> 00:08:33,620 >> Es ist oft sehr schwer - wenn man eine Datenbank laufen haben - 133 00:08:33,620 --> 00:08:37,210 es ist oft sehr schwer zu ändern, welche Daten Sie in ihm haben - 134 00:08:37,210 --> 00:08:40,510 das heißt, eine neue Datenbankspalte oder so etwas - 135 00:08:40,510 --> 00:08:43,510 so eine gute Strategie ist eigentlich nur um eine Menge von Daten in einem Text Blob zu halten - 136 00:08:43,510 --> 00:08:53,880 ein JSON blob - JSON als JavaScript Object Notation - 137 00:08:53,880 --> 00:08:58,330 Der Grund ist, die nützlich ist, weil dann kann man neue Eigenschaften hinzufügen 138 00:08:58,330 --> 00:09:01,920 , alle diese JSON Blobs ohne Ihre Datenbank. 139 00:09:01,920 --> 00:09:06,860 Der einzige Nachteil ist, dass, wenn Sie ein paar Felder 140 00:09:06,860 --> 00:09:09,890 dass Sie später hinzugefügt - wie in diesem JSON Blob versteckt - 141 00:09:09,890 --> 00:09:12,850 dann ist es schwieriger, sie in der Datenbank abzufragen. 142 00:09:12,850 --> 00:09:17,690 Zum Beispiel, wenn Sie später - wenn Sie Ihre Post-Modell hatte, die wir bereits besprochen 143 00:09:17,690 --> 00:09:25,380 nur mit dem Autor, den Empfänger und den Text - 144 00:09:25,380 --> 00:09:29,000 Sie könnte auch einen JSON-Blob und dann, wenn Sie später wollte ein Datumsfeld hinzufügen 145 00:09:29,000 --> 00:09:31,000 Sie möchten nicht auf Ihre Datenbank ändern. 146 00:09:31,000 --> 00:09:36,140 Sie könnten nur Daten hinzufügen, um alle Textfelder. 147 00:09:36,140 --> 00:09:39,640 Und dann wäre in der Lage, auf die auf der Client-Seite aus, 148 00:09:39,640 --> 00:09:42,430 aber Sie würden nicht in der Lage, sie auf der Server-Seite abfragen zu können 149 00:09:42,430 --> 00:09:44,430 weil es innerhalb dieser Text versteckt. 150 00:09:44,430 --> 00:09:49,920 >> Die andere Frage, die Sie wollen, zu denken 151 00:09:49,920 --> 00:09:52,400 ist, wie Ihr Client und Server gehen, um zu kommunizieren. 152 00:09:52,400 --> 00:09:56,040 Sie wollen in der Regel dies so einfach wie möglich zu halten. 153 00:09:56,040 --> 00:10:02,230 Sie können einfach nur wie ein get-me-dieser Datenanforderung, 154 00:10:02,230 --> 00:10:09,140 ein create-a-new-object Sache, und ein Update-an-alt-Objekt-Anfrage. 155 00:10:09,140 --> 00:10:12,930 Und das wäre alles andere URLs auf einem Server, die Sie - 156 00:10:12,930 --> 00:10:20,030 dass der Browser würde - Sie können AJAX-Anforderungen für alle diese verwenden 157 00:10:20,030 --> 00:10:24,000 und entweder erhalten oder senden Daten. 158 00:10:24,000 --> 00:10:26,600 Auch für unsere Katze Facebook beispielsweise, 159 00:10:26,600 --> 00:10:32,350 Sie konnte diese URL müssen eine individuelle Beitrag zu bekommen, 160 00:10:32,350 --> 00:10:39,750 und Sie würden eine URL für die Schaffung einer neuen Wandpfosten 161 00:10:39,750 --> 00:10:45,670 und vielleicht eine URL für das Hochladen von deinem Profilbild, solche Sachen. 162 00:10:45,670 --> 00:10:51,730 Aber nochmals, dass vor, holen aus Ihren Daten, so dass Sie nicht zu halten 163 00:10:51,730 --> 00:10:53,360 macht Netzwerkanforderungen. 164 00:10:53,360 --> 00:10:59,030 Aus diesem Grund können Sie nicht wollen, dass die einzelnen get-Anforderung für einen einzigen Beitrag zu haben, 165 00:10:59,030 --> 00:11:03,210 und stattdessen würden Sie wollen einfach nur ein get-Anforderung für die gesamte Wand. 166 00:11:03,210 --> 00:11:06,110 Und dann, wenn Sie versuchen, eine Balance zu schlagen, weil - 167 00:11:06,110 --> 00:11:10,970 dies wird sich auch auf Ihre Anwendung ab. 168 00:11:10,970 --> 00:11:13,430 Weil, wenn Sie erwarten, dass die Menschen nur 10 oder 20 Wandpfosten 169 00:11:13,430 --> 00:11:15,430 das wird in Ordnung sein. 170 00:11:15,430 --> 00:11:17,390 Aber wenn Sie erwarten, sie werden Tausende haben, dann, dass der Antrag würde zu lange dauern, 171 00:11:17,390 --> 00:11:23,580 und so möchten Sie vielleicht, um eine zu bekommen-alle-Beiträge seit-Parameter hinzuzufügen. 172 00:11:23,580 --> 00:11:26,580 >> Für alle diese sind Sie wahrscheinlich, um Ihre Daten im JSON synchronisieren wollen - 173 00:11:26,580 --> 00:11:29,260 JavaScript Object Notation. 174 00:11:29,260 --> 00:11:34,600 So ziemlich jeder Sprache befasst sich mit JSON sehr gut. 175 00:11:34,600 --> 00:11:40,880 JQuery hat dieses schöne getJSON Funktion, die all die harte Arbeit für Sie tun wird. 176 00:11:40,880 --> 00:11:47,390 Und auf PHP gibt es auch sehr schön JSON Kommunikationsfunktionen. 177 00:11:47,390 --> 00:11:52,660 Also, das ist wahrscheinlich das beste Format für das Senden Sie Ihre Modelle hin und her. 178 00:11:52,660 --> 00:11:56,570 >> Als ein Beispiel für das, was wir bisher gesprochen haben, 179 00:11:56,570 --> 00:12:00,520 hier ist ein Beispiel für Ihre Katze Fluss Facebook-Anwendung. 180 00:12:00,520 --> 00:12:07,760 Es beginnt mit dem Browser Anfordern des Basis Website-URL. 181 00:12:07,760 --> 00:12:15,470 Der Server würde wahrscheinlich über statische HTML-und JavaScript-und CSS zu schicken. 182 00:12:15,470 --> 00:12:19,170 Es ist normalerweise am besten, keine Wiedergabe auf dem Server zu tun. 183 00:12:19,170 --> 00:12:23,370 Sie wollen wahrscheinlich nicht zu - 184 00:12:23,370 --> 00:12:28,360 was der Server nicht dort tun wird die Liste der Wand Beiträge 185 00:12:28,360 --> 00:12:31,120 und ein bisschen HTML für jeden und Senden, dass über. 186 00:12:31,120 --> 00:12:34,960 Es ist normalerweise am besten, dass auf der Client-Seite zu tun, weil sonst 187 00:12:34,960 --> 00:12:38,580 jedes Mal, wenn Sie wieder etwas zeichnen wollen, müssen Sie, um eine Server-Anfrage zu machen. 188 00:12:38,580 --> 00:12:42,450 Und das sehr schnell gibt Ihnen eine Menge Overhead. 189 00:12:42,450 --> 00:12:47,430 Es ist normalerweise am besten, nur um Schiff sendet nach unten statischen HTML- 190 00:12:47,430 --> 00:12:50,660 und dann JavaScript und CSS, die das Rendering auf der Client-Seite tun. 191 00:12:50,660 --> 00:12:56,750 Sobald das Zeug kommt, 192 00:12:56,750 --> 00:13:03,500 dann können Sie haben - in JavaScript - Sie Wünsche für die Wand Daten tun können 193 00:13:03,500 --> 00:13:08,740 und solche Sachen, und nach, dass der Server im Grunde nur tun, Datenbankabfragen 194 00:13:08,740 --> 00:13:10,740 und Berechtigungen überprüfen. 195 00:13:10,740 --> 00:13:16,690 Das einzig Wichtige ist, dass es nicht senden kann über einige andere Benutzer Wand Beiträge 196 00:13:16,690 --> 00:13:19,220 dass Sie nicht sehen darf. 197 00:13:19,220 --> 00:13:28,050 Es kann im Grunde eine sehr dünne Schicht Zugang zu Ihrer Datenbank sein, 198 00:13:28,050 --> 00:13:32,820 und dann alle die, die die Daten - alle Ansichten und Sachen - 199 00:13:32,820 --> 00:13:37,280 diese können in Ihrem Browser passieren, und dann, wenn Sie einen Beitrag oder etwas machen wollen 200 00:13:37,280 --> 00:13:40,000 Sie senden eine weitere Anforderung. 201 00:13:40,000 --> 00:13:45,350 >> Es gibt auch einige ausgefallene Sachen, die man oben auf die dies tun können. 202 00:13:45,350 --> 00:13:49,550 In Bezug auf spezifische technische Informationen 203 00:13:49,550 --> 00:13:53,360 Entwicklung im Klar JavaScript kann ein wenig schmerzhaft sein, 204 00:13:53,360 --> 00:13:56,220 so gibt es einige Bibliotheken und Tools, die Ihnen dabei helfen, eine Menge. 205 00:13:56,220 --> 00:14:03,690 Ich denke, Sie alle haben wahrscheinlich über jQuery gehört das tun HTML-Rendering macht 206 00:14:03,690 --> 00:14:08,890 und Manipulation viel einfacher - haben viel Phantasie Funktionen zur Ein-und Ausblenden, 207 00:14:08,890 --> 00:14:12,020 und tut zippy Animationen. 208 00:14:12,020 --> 00:14:13,720 Es gibt auch diese Bibliothek namens Underscore.js. 209 00:14:13,720 --> 00:14:20,760 Es hat eine Menge von nützlichen Hilfsfunktionen, Sachen, die man erwarten würde JavaScript zu haben, 210 00:14:20,760 --> 00:14:24,740 dass es wirklich doesnt - Dinge wie Mischen eines Arrays 211 00:14:24,740 --> 00:14:28,900 Entfernen von Duplikaten aus einer Liste oder Abflachung eine Liste von Listen. 212 00:14:28,900 --> 00:14:30,900 Dies ist nur eine kleine Code-Probe. 213 00:14:30,900 --> 00:14:36,520 Underscore hat eine Tonne dieser nette Funktionen, die Sie wünschen, Sie würden alle die Zeit haben. 214 00:14:36,520 --> 00:14:38,840 >> Und dann gibt es ein weitere Bibliothek, die ich möchte ein wenig von der Zeit ausgeben 215 00:14:38,840 --> 00:14:44,800 genannt, weil Backbone.js Backbone wirklich hilft Ihnen mit den Modellen auf der Client-Seite umgehen 216 00:14:44,800 --> 00:14:47,210 und eine Menge von der Verwirrung, die sie verursachen kann. 217 00:14:47,210 --> 00:14:53,550 Backbone bietet Ihnen dieses Konzept der Modelle und Sammlungen 218 00:14:53,550 --> 00:14:58,300 in JavaScript, die im Grunde genau wie JavaScript-Objekte 219 00:14:58,300 --> 00:15:04,900 in JavaScript-Arrays, aber sie haben Ereignisse, wenn Sie ihre Eigenschaften ändern. 220 00:15:04,900 --> 00:15:09,090 Genau wie in JavaScript können Sie ein Ereignis, wenn eine Schaltfläche geklickt wird oder etwas 221 00:15:09,090 --> 00:15:14,800 diese Backbone-Modelle und Sammlungen Backbone werden Dinge wie ausgestrahlt 222 00:15:14,800 --> 00:15:17,510 dass, wenn sie sich ändern. 223 00:15:17,510 --> 00:15:22,270 Das bedeutet, dass man nur so etwas wie dieses Code-Snippet hier schreiben - 224 00:15:22,270 --> 00:15:27,530 das sagt, wenn Sie etwas zu der Beiträge Array, das Sie die ganze Wand neu zu zeichnen hinzuzufügen. 225 00:15:27,530 --> 00:15:34,270 Und das sagen würde, wenn Anzahl von Leuten ein Beitrag ändert, 226 00:15:34,270 --> 00:15:38,970 Sie den Benutzer, dass jemand ihren Beitrag gefallen informieren. 227 00:15:38,970 --> 00:15:45,210 Oder wenn einer Eigenschaft eines Post ändert Sie die Post neu zu zeichnen. 228 00:15:45,210 --> 00:15:51,050 Sachen wie, dass Sie Tonnen von Komplexität, da sonst sparen 229 00:15:51,050 --> 00:15:55,440 wenn Sie nicht jedes Mal dann im Code, die Sie ändern müssen einige Rahmenbedingungen wie diese 230 00:15:55,440 --> 00:16:04,280 etwas über eine Post, müssten Sie sich erinnern, um alle Funktionen aufrufen machen 231 00:16:04,280 --> 00:16:07,680 und solche Sachen, und wenn Sie etwas Neues, das passiert hinzufügen wollte 232 00:16:07,680 --> 00:16:10,680 jedes Mal, wenn Sie einen Beitrag geändert müssten Sie durch jeden Ort in Ihrem gehen 233 00:16:10,680 --> 00:16:14,610 Code, den Sie einen Beitrag geändert und hinzufügen, dass neue Sache. 234 00:16:14,610 --> 00:16:21,450 Ein Rahmen, wie dies eine Menge, die zwischen Schichtkommunikations entfernen 235 00:16:21,450 --> 00:16:28,280 das macht den Code komplex und schwer zu pflegen. 236 00:16:28,280 --> 00:16:31,170 >> Es ist ein wenig über die Ansichten auch. 237 00:16:31,170 --> 00:16:35,960 Ich werde die meisten dieser Billy verlassen, weil sie technisch nicht sehr schwierig. 238 00:16:35,960 --> 00:16:43,540 Verwenden Sie jQuery für Ihre Ansichten. Es ist praktisch wie eine Notwendigkeit an dieser Stelle. 239 00:16:43,540 --> 00:16:46,290 Es macht einfach alles so viel einfacher. 240 00:16:46,290 --> 00:16:48,290 Es gibt eine Menge von Bibliotheken. 241 00:16:48,290 --> 00:16:49,970 Wenn Sie User-Interface-Elemente kompliziert haben, 242 00:16:49,970 --> 00:16:57,250 wenn Sie eine Auto-Vervollständigen-Sache wollen oder wie eine dieser Phantasie Multi-Selektoren - 243 00:16:57,250 --> 00:17:04,790 wenn Sie so etwas wollen, sollten Sie wahrscheinlich nur um zu suchen 244 00:17:04,790 --> 00:17:08,130 und Sie haben eine gute Bibliothek, die das tun, was Sie wollen, zu finden. 245 00:17:08,130 --> 00:17:11,579 Billy wird über die tatsächlich schwierigsten Teile der Blick mehr erklären. 246 00:17:11,579 --> 00:17:17,530 Auch als eine Randnotiz, hat einige Backbone-Funktionalität für Ansichten kommunizieren 247 00:17:17,530 --> 00:17:22,800 schön mit Modellen - Blick auf die Dokumentation für alle dieser Bibliotheken, eigentlich. 248 00:17:22,800 --> 00:17:28,270 Gerade bei den docs. Sie sind sehr gut geschrieben und leicht zu folgen. 249 00:17:28,270 --> 00:17:33,890 In der Regel können Sie ziemlich genau Google, wenn Sie Probleme haben. 250 00:17:33,890 --> 00:17:36,370 Es gibt viele Menschen mit ihnen. 251 00:17:36,370 --> 00:17:42,020 Ich denke, das ist wie ein letzter Hinweis. 252 00:17:42,020 --> 00:17:48,770 >> Es gibt auch einige fortgeschrittene Dinge, die Sie tun können 253 00:17:48,770 --> 00:17:53,400 wenn Sie schauen, Ihre Webanwendung zusätzliche genial zu machen. 254 00:17:53,400 --> 00:17:59,760 Sie können tun, - die neue HTML5-Spezifikation hat eine Menge Phantasie Dinge, die Sie tun können. 255 00:17:59,760 --> 00:18:05,780 Lokale Speicherung - was ist, können Daten im Browser speichern - 256 00:18:05,780 --> 00:18:09,470 anstatt zurück zu gehen und lesen Sie den Server für alles, 257 00:18:09,470 --> 00:18:12,470 können Sie einige der auf dem Client zu halten und dass selbst lässt die Menschen - 258 00:18:12,470 --> 00:18:20,850 in einigen Fällen kann es sogar lassen Sie die Webseite offline zu verwenden. 259 00:18:20,850 --> 00:18:26,980 Es gibt dieses Ding namens WebSockets, die eine andere Art der Netzwerk-Kommunikation sind 260 00:18:26,980 --> 00:18:30,930 wo Sie statt nur ein Antrag zu stellen, Antwort bekommen und Sie fertig sind, 261 00:18:30,930 --> 00:18:35,240 Sie halten eine Verbindung zu dem Server und so können Sie Dinge wie tun können 262 00:18:35,240 --> 00:18:37,240 Echtzeit-Updates. 263 00:18:37,240 --> 00:18:42,020 Also, wenn Sie versuchen, eine Chat-Anwendung zu machen, verwenden Sie WebSockets 264 00:18:42,020 --> 00:18:43,790 hin und her zu kommunizieren, so dass Sie nicht zu halten Beantragung, 265 00:18:43,790 --> 00:18:48,410 "Oh, Server, hat jemand einen Chat senden Sie mir?" alle 10 Sekunden oder so etwas. 266 00:18:48,410 --> 00:18:55,620 Es gibt auch eine interessante HTML5-Funktion, wo man es so aussehen 267 00:18:55,620 --> 00:18:58,340 die URL der Seite, verändert sich, ohne jemals tatsächlich neu laden. 268 00:18:58,340 --> 00:19:03,230 Sie können wieder verwenden und Vorwärts, ohne dabei eine Reihe von Netzwerkanforderungen. 269 00:19:03,230 --> 00:19:14,660 Sowas ist in Bezug auf die es schnelle wirklich nützlich, sondern auch arbeiten wie ein Web-App sollte. 270 00:19:14,660 --> 00:19:17,680 >> Es gibt auch dieses Ding namens Coffee. 271 00:19:17,680 --> 00:19:24,450 Coffee ist eine andere Sprache, eigentlich, kompiliert, dass bis auf JavaScript. 272 00:19:24,450 --> 00:19:30,080 Sie würden alle Ihre Code in Coffeescript zu schreiben, und dann können Sie diese Compiler laufen, 273 00:19:30,080 --> 00:19:33,300 und es spuckt eine JavaScript-Datei, die Sie in Ihre Webseite enthalten. 274 00:19:33,300 --> 00:19:38,860 Der Grund, dass Coffee ist schön ist, weil es wird eine Menge des RID 275 00:19:38,860 --> 00:19:44,760 seltsame Fälle, die JavaScript hat, wo gleich Gleichen 276 00:19:44,760 --> 00:19:51,130 und gleich equals verschiedene Dinge tun, oder wie - 277 00:19:51,130 --> 00:19:55,740 es hat schönere Syntax für den Umgang mit Arrays und Funktionen. 278 00:19:55,740 --> 00:20:00,460 Dies ist ein kleiner Ausschnitt von Coffee, die eine Liste aller Plätze produziert 279 00:20:00,460 --> 00:20:04,900 von 10 ^ 2-1 ^ 2 in umgekehrter Reihenfolge. 280 00:20:04,900 --> 00:20:08,410 Wie Sie sehen können, Coffee oft können Sie in 1 Zeile zum Ausdruck bringen 281 00:20:08,410 --> 00:20:10,890 was 5 Zeilen JavaScript nehmen würde. 282 00:20:10,890 --> 00:20:13,230 Es kann die Dinge viel einfacher. 283 00:20:13,230 --> 00:20:15,390 Es ist ein wenig neue Syntax, um zunächst zu lernen, 284 00:20:15,390 --> 00:20:18,010 aber es wird definitiv um Sie produktiver auf lange Sicht. 285 00:20:18,010 --> 00:20:22,050 >> Sie können auch andere Sprachen auf dem Server als PHP - 286 00:20:22,050 --> 00:20:27,570 Sprachen wie Ruby, Python, oder es gibt sogar ein Projekt namens node.js 287 00:20:27,570 --> 00:20:31,450 dass wird Ihnen JavaScript auf dem Server verwenden. 288 00:20:31,450 --> 00:20:34,700 Persönlich bin ich wirklich, wirklich hasse PHP. 289 00:20:34,700 --> 00:20:38,310 Ich weiß nur nicht arbeiten gerne mit ihm. 290 00:20:38,310 --> 00:20:43,450 Wenn auch Sie denken, dass es eine schreckliche cluge einer Sprache, 291 00:20:43,450 --> 00:20:46,160 dann können Sie eine von diesen stattdessen verwenden. 292 00:20:46,160 --> 00:20:54,780 Im Allgemeinen, wenn Sie etwas tun wollen, und Sie wissen nicht wirklich, wie Sie es tun würden, 293 00:20:54,780 --> 00:20:56,780 nur die Suche im Internet. 294 00:20:56,780 --> 00:20:59,990 Es gibt Tonnen und Tonnen von Ressourcen vor allem auf - 295 00:20:59,990 --> 00:21:03,260 Stackoverflow ist ein großer. 296 00:21:03,260 --> 00:21:06,400 Es ist diese Website, wo Programmierer gegenseitig Fragen. 297 00:21:06,400 --> 00:21:09,690 Sie könnten in es, wenn Sie Probleme auf CS50 Problem Sets wurden ausgeführt haben. 298 00:21:09,690 --> 00:21:16,820 Und es gibt Tonnen von Bibliotheken für ziemlich viel zu tun, was Sie wollen würde. 299 00:21:16,820 --> 00:21:21,710 Wenn Sie etwas tun wollen, und Sie wissen nicht, wie es zu tun, 300 00:21:21,710 --> 00:21:23,710 nicht davon ausgehen, dass es unmöglich ist. 301 00:21:23,710 --> 00:21:26,160 Schauen Sie sich um und finden Sie vielleicht einige gute Ressourcen zu finden. 302 00:21:26,160 --> 00:21:29,280 >> Als allgemeine einpacken, 303 00:21:29,280 --> 00:21:33,650 Imbissbuden sind die wichtigsten Dinge einfach halten. 304 00:21:33,650 --> 00:21:36,010 Je komplexer der Code am Anfang 305 00:21:36,010 --> 00:21:40,370 und je mehr Sie versuchen und tun, fancy stuff, 306 00:21:40,370 --> 00:21:43,300 desto länger wird es dauern, bis tatsächlich etwas bekommen Funktions 307 00:21:43,300 --> 00:21:46,480 und desto schwieriger wird es sein, später ändern. 308 00:21:46,480 --> 00:21:49,580 Also, Dinge tun, die ersten dumm, ganz einfach. 309 00:21:49,580 --> 00:21:51,720 Zu gehen zusammen mit dem, 310 00:21:51,720 --> 00:21:59,070 keine Angst wegwerfen alten Code oder Reinigungs es eine Menge sein. 311 00:21:59,070 --> 00:22:05,320 Im Allgemeinen, wenn Sie tatsächlich etwas arbeiten, 312 00:22:05,320 --> 00:22:09,640 es ist viel einfacher zu denken, als wenn man in der Anfangsphase sind immer noch 313 00:22:09,640 --> 00:22:12,610 wie stelle ich das alles zusammen. 314 00:22:12,610 --> 00:22:17,500 Es ist am besten, um die dümmste mögliche Design, das funktioniert machen 315 00:22:17,500 --> 00:22:22,270 und dann iterativ zu verbessern, als zu versuchen, alles gleich beim ersten Mal zu bekommen. 316 00:22:22,270 --> 00:22:28,330 In Bezug auf die Client-Server-Division, versuchen Sie und halten Sie Ihren Server sehr einfach - 317 00:22:28,330 --> 00:22:33,030 nur eine Datenbank und einige Authentifizierung und keine harte Arbeit, es zu tun. 318 00:22:33,030 --> 00:22:37,540 Haben Sie alle Ihre komplizierte Sachen auf der Client-Seite im Browser 319 00:22:37,540 --> 00:22:40,650 in JavaScript so viel wie Sie können. 320 00:22:40,650 --> 00:22:43,420 Schauen Sie sich nach Bibliotheken, die Ihr Leben besser zu machen. 321 00:22:43,420 --> 00:22:46,850 Immer besser, Code zu verwenden, dass jemand anderes geschrieben 322 00:22:46,850 --> 00:22:49,850 wenn Sie - und nicht sie selbst schreiben. 323 00:22:49,850 --> 00:22:57,560 Es gibt eine Menge Sachen im Internet. Google ist dein bester Freund. 324 00:22:57,560 --> 00:22:59,560 Google ist der Programmierer besten Freund. 325 00:22:59,560 --> 00:23:07,620 Ja, auf jeden Fall haben Sie keine Angst, sich umzusehen für Sachen sein. 326 00:23:07,620 --> 00:23:11,860 Gut. Und über Billy. 327 00:23:11,860 --> 00:23:14,600 >> [Billy] Eigentlich, bevor ich mit einigen Sachen Design, 328 00:23:14,600 --> 00:23:17,250 hat jemand irgendwelche Fragen für Ben über alles, was er gesprochen? 329 00:23:17,250 --> 00:23:20,290 Okay, gut. 330 00:23:20,290 --> 00:23:22,220 Auch hier lassen Sie uns wissen, wenn etwas nicht klar ist, 331 00:23:22,220 --> 00:23:25,420 oder wenn Sie möchten, dass wir über etwas ein bisschen mehr gehen. 332 00:23:25,420 --> 00:23:30,330 Ich werde ein wenig zurücktreten und sprechen über die grund Teile des Designs. 333 00:23:30,330 --> 00:23:34,840 Ben erwähnt das Modell genannt - sorry, das Modell Controller Sichtsystem 334 00:23:34,840 --> 00:23:38,520 Das ist sozusagen der technische Aspekt, so werde ich an Ansichten speziell aussehen, 335 00:23:38,520 --> 00:23:42,930 und ich werde mit, wie Sie eine Ansicht, die schön aussieht entwerfen würde starten. 336 00:23:42,930 --> 00:23:50,540 Hier ist irgendwie eine wirklich grundlegende Vorlage für unsere Katze Facebook. 337 00:23:50,540 --> 00:23:54,190 Ich denke, es gibt einige Grundlagen in der modernen UI-Design 338 00:23:54,190 --> 00:23:56,190 , die es wert Aufnehmen sind. 339 00:23:56,190 --> 00:23:58,210 Sie können feststellen, gibt es eine viel Weißraum auf der ganzen Seite 340 00:23:58,210 --> 00:24:00,790 viel Platz für die Dinge. 341 00:24:00,790 --> 00:24:02,580 Fühlen Sie sich nicht wie Sie die Dinge in eine Seite drängeln müssen. 342 00:24:02,580 --> 00:24:06,700 Sie verlassen wollen viel Raum offen, und wenn man zu fast jeder modernen Website zu gehen 343 00:24:06,700 --> 00:24:08,380 Sie werden sehen, es ist überall weiß. 344 00:24:08,380 --> 00:24:10,380 Es ist weiß in Orten, die Sie nicht erwarten würde. 345 00:24:10,380 --> 00:24:14,570 Sie haben diese Farbpalette, und es ist ratsam zu Beginn 346 00:24:14,570 --> 00:24:17,880 um eine Farbpalette, dass Sie gehen, mit zu arbeiten und zu entwickeln, sind zu wählen. 347 00:24:17,880 --> 00:24:22,250 Sie auch - es hilft, eine Schrift zu wählen, und dass, wie Sie sind Art von Arbeit mit 348 00:24:22,250 --> 00:24:24,450 diese konkreten Grundlagen der Gestaltung. 349 00:24:24,450 --> 00:24:26,910 Sie haben Ihre Art, haben Sie Ihre Farben, und dann können Sie Art 350 00:24:26,910 --> 00:24:29,380 passen alles andere in nach Bedarf. 351 00:24:29,380 --> 00:24:37,710 Also, wie gesagt, mit Ihrem Farbschema, um die mutigere Farben Ihrer Farbschema verwenden wollen 352 00:24:37,710 --> 00:24:40,320 sparsam. Kopfzeilen sind nett. Die Tasten sind schön, wirklich große, auffällige Farben haben. 353 00:24:40,320 --> 00:24:43,710 Aber im Allgemeinen, wenn Sie eine Website, die Farben überall hat, haben, 354 00:24:43,710 --> 00:24:47,250 alle Sie starrte in das Gesicht, es sieht einfach überladen, und es ist nicht gut. 355 00:24:47,250 --> 00:24:50,430 Sie wollen in der Regel verwenden hellen Farben. 356 00:24:50,430 --> 00:24:52,890 Versuchen Sie erneut, wählen Sie eine ziemlich kohärente Farbschema. 357 00:24:52,890 --> 00:24:56,640 Sie können diese kleinen Spritzer von viel Farbe haben - 358 00:24:56,640 --> 00:25:00,240 das aussehen kann ziemlich schön, aber man muss sie ziemlich sparsam verwenden möchten. 359 00:25:00,240 --> 00:25:04,270 >> Wie gesagt, Sie wollen minimal zu sein. Weniger ist fast immer mehr. 360 00:25:04,270 --> 00:25:07,430 Wenn Sie etwas zeigen oder nicht zeigen etwas, 361 00:25:07,430 --> 00:25:10,230 und Sie sich irgendwie nicht sicher, ob es sollte standardmäßig sein können - 362 00:25:10,230 --> 00:25:13,400 wahrscheinlich sind Sie am besten weg und ließen sie aus. Sie können es immer in später hinzufügen. 363 00:25:13,400 --> 00:25:16,620 Ja, die Dinge einfach halten. 364 00:25:16,620 --> 00:25:19,510 Aber am wichtigsten ist, um mehrere Entwürfe betrachten wollen. 365 00:25:19,510 --> 00:25:23,520 Denke nicht, dass wenn Sie eine Website zu machen, es in Ihrem Kopf, die Sie zu gehen haben Sie 366 00:25:23,520 --> 00:25:26,310 machen den Standort in einer bestimmten Art und Weise, und es wird genau so aussehen. 367 00:25:26,310 --> 00:25:29,830 Es geht um den blauen Kopfzeile am oberen und den blauen Seitenleiste haben 368 00:25:29,830 --> 00:25:32,670 und dann die gelbe Sub-Header Sache. 369 00:25:32,670 --> 00:25:34,670 Sie möchten mehrere Vorlagen machen. 370 00:25:34,670 --> 00:25:37,350 Sie können entweder - wenn Sie gut mit Photo Shop sind, können Sie, dass öffnen und Art 371 00:25:37,350 --> 00:25:39,600 Design einer Website, wie Sie möchten es zu suchen. 372 00:25:39,600 --> 00:25:41,680 Wenn nicht, können Sie einfach Stift und Papier, 373 00:25:41,680 --> 00:25:44,000 aber kratzen bis mehrere Designs. 374 00:25:44,000 --> 00:25:47,000 Sie wollen im Grunde eine Einrichtung, wo man viele verschiedene Designs, 375 00:25:47,000 --> 00:25:50,810 und wenn man landet Arbeits, dann ist das großartig. 376 00:25:50,810 --> 00:25:53,370 Wenn man landet scheitern, dann haben Sie immer noch einen zu drehen. 377 00:25:53,370 --> 00:25:57,960 In der Regel nicht das Gefühl, wie Sie gezwungen werden sollte, 378 00:25:57,960 --> 00:26:00,830 zu, was Design, das Sie zunächst entscheiden. 379 00:26:00,830 --> 00:26:04,420 Motive sind sehr variabel, und ein Teil der Bedeutung des Modells 380 00:26:04,420 --> 00:26:09,480 Controller View-System ist, dass man in und aus verschiedenen Ansichten, die Sie wollen, tauschen kann. 381 00:26:09,480 --> 00:26:13,510 Sie können die Daten wiegen einen Weg, und dann entscheiden, oh, tatsächlich, das ist nicht so gut funktionieren. 382 00:26:13,510 --> 00:26:19,190 Ich denke, es ist eine Art zu kompliziert oder es ist ein Teil hier, die nicht wirklich funktioniert hat, 383 00:26:19,190 --> 00:26:22,150 so bin ich gerade dabei, diese Ansicht und Swap in eine völlig neue völlig aufzugeben. 384 00:26:22,150 --> 00:26:24,790 Wir können immer noch die alten Modelle und die alten Controller. 385 00:26:24,790 --> 00:26:27,490 Wir können alles auf dem Server und Client, wie wir vor tun würde. 386 00:26:27,490 --> 00:26:32,850 Aber die eigentliche Welle der Daten angezeigt wird etwas anders sein. 387 00:26:32,850 --> 00:26:35,840 >> Soweit tatsächlich die Umsetzung der Entwurf, den Sie möchten, 388 00:26:35,840 --> 00:26:39,330 Sobald Sie ein paar Entwürfe skizziert auf Papier oder auf Photo Shop oder was auch immer, 389 00:26:39,330 --> 00:26:42,120 gibt es eine Reihe von Tools, die Ihnen zur Verfügung gestellt werden. 390 00:26:42,120 --> 00:26:45,700 Die erste Sie nicht sehr vertraut sind, mit dem Ihr HTML, PHP, oder was auch immer 391 00:26:45,700 --> 00:26:48,990 Sprache Sie verwenden nur die statischen Seiten auf Ihrer Webseite Codes. 392 00:26:48,990 --> 00:26:51,990 Sie haben viel mit HTML, die Art der gibt Ihnen diese Tags arbeitete 393 00:26:51,990 --> 00:26:57,820 dass Sie Dinge kannst, und im Grunde ist es eine Art der Organisation Ihrer Inhalte. 394 00:26:57,820 --> 00:27:00,990 Zum Beispiel die Kopfzeile haben Sie da oben, so dass Sie gehen, um ein Header-Tag haben sind, 395 00:27:00,990 --> 00:27:05,770 und es geht um einen Text, der in der es wahrscheinlich ist, in einem anderen Tag sein müssen. 396 00:27:05,770 --> 00:27:08,380 Dann eine Sidebar haben Sie vielleicht mit einigen verschiedenen Links, 397 00:27:08,380 --> 00:27:10,160 und die sind in allen Tags sein werde. 398 00:27:10,160 --> 00:27:13,870 Also, im Grunde HTML an seinem Herzen ist eine Möglichkeit, die Aufteilung der Seite, wie 399 00:27:13,870 --> 00:27:16,980 Sie schließlich wollen sie formatieren. 400 00:27:16,980 --> 00:27:18,980 Also noch einmal, haben Sie gesehen, dass. 401 00:27:18,980 --> 00:27:20,540 Sie sind ziemlich zufrieden mit der Arbeit mit ihm jetzt 402 00:27:20,540 --> 00:27:23,120 gegeben, dass Sie den letzten pset hoffentlich getan, 403 00:27:23,120 --> 00:27:26,150 so daß kein Problem sein sollte. 404 00:27:26,150 --> 00:27:31,280 >> Dann haben Sie CSS, die im Grunde übernimmt alle der Design-statischen Aspekte. 405 00:27:31,280 --> 00:27:35,320 Es würde alle Farben, die alle die Positionierung der verschiedenen Elemente zu behandeln, 406 00:27:35,320 --> 00:27:36,840 wo sie gehen in Bezug zueinander, 407 00:27:36,840 --> 00:27:41,530 wie groß sie sind, die verschiedenen Arten von Positionierungen, die Sie haben möchten - 408 00:27:41,530 --> 00:27:46,030 in anderen Worten, Sie können Dinge behoben haben, so dass, wenn Sie nach unten scrollen, sie bleiben, 409 00:27:46,030 --> 00:27:48,700 oder man kann die Dinge im Verhältnis zu anderen Elementen haben. 410 00:27:48,700 --> 00:27:50,730 Alle diese Art von Zeug ist in CSS. 411 00:27:50,730 --> 00:27:54,630 Darüber hinaus können Sie verschiedene Dekorationen tun können, können Sie die Textfarben zu haben, 412 00:27:54,630 --> 00:27:56,630 Text-Effekte, all das Zeug. 413 00:27:56,630 --> 00:28:00,360 Ben hat ein wirklich gutes Seminar zu diesem letzten Wochenende, 414 00:28:00,360 --> 00:28:04,450 und so würde ich auf jeden Fall überprüfen, dass sich, wenn Sie planen, mit CSS tun einige ausgefallene Sachen. 415 00:28:04,450 --> 00:28:09,850 CSS3 ist eigentlich die neueste Version von CSS, und alle Arten von wirklich schöne Dinge tun. 416 00:28:09,850 --> 00:28:14,750 Es kann Steigungen zu tun, man kann schön, abgerundete Ecken haben, Sie alle möglichen Sachen tun können 417 00:28:14,750 --> 00:28:17,940 , um Ihre Website aussehen modern und schick. 418 00:28:17,940 --> 00:28:22,150 >> Das nächste Werkzeug ist JavaScript und jQuery, die Ben sprachen ein wenig über, 419 00:28:22,150 --> 00:28:24,150 aber ich werde ein wenig weiter in zu erhalten. 420 00:28:24,150 --> 00:28:28,100 JavaScript als Sie mit ihm ein wenig in der Vorlesung gearbeitet haben, oder zumindest gesehen, 421 00:28:28,100 --> 00:28:31,870 ist irgendwie eine Möglichkeit, Dinge tun, dynamisch in HTML. 422 00:28:31,870 --> 00:28:35,950 HTML, wie Sie wissen, ist statisch, so, wenn Sie HTML haben, können Sie es nicht ändern. 423 00:28:35,950 --> 00:28:40,050 Aber JavaScript in gewisser Weise ist ein Weg, um HTML zu modifizieren. 424 00:28:40,050 --> 00:28:44,520 So können Sie das tun, und das ist toll, aber JavaScript ist wirklich ein Schmerz zu arbeiten. 425 00:28:44,520 --> 00:28:49,050 Es ist so lang und stumpf und selbst die einfachsten Dinge zu tun 426 00:28:49,050 --> 00:28:51,630 erfordert viel Zeilen JavaScript. 427 00:28:51,630 --> 00:28:55,410 Also, das ist im Grunde ein jQuery-Bibliothek für JavaScript, das all das vereinfacht. 428 00:28:55,410 --> 00:28:59,880 Er sagt, okay, wenn Sie ein quadratisches Feld von links kommen haben wollen 429 00:28:59,880 --> 00:29:03,980 und verblassen in die Seite, so dass es in der Mitte, in JavaScript, die nehmen würde - 430 00:29:03,980 --> 00:29:06,340 Ich weiß nicht, hundert Zeilen zu tun, und es wäre ein Schmerz sein, 431 00:29:06,340 --> 00:29:10,540 und Sie davon zu hassen alles über Web-Programmierung kommen. 432 00:29:10,540 --> 00:29:15,380 JQuery haben Sie grundsätzlich das Element-Punkt-Fade-in oder so ähnlich. 433 00:29:15,380 --> 00:29:18,580 Also, sehr, sehr einfache Funktionen, mit denen Sie alle Arten von coole Animationen tun 434 00:29:18,580 --> 00:29:20,580 und diese Art der Sache. 435 00:29:20,580 --> 00:29:23,300 Die andere Sache, diese zwei sind wirklich gut für ist gerade dabei dynamische Dinge 436 00:29:23,300 --> 00:29:25,300 mit der Website. 437 00:29:25,300 --> 00:29:28,370 So, und nicht nur mit HTML-Seite -, die einige Daten tatsächlich zeigt aber nicht 438 00:29:28,370 --> 00:29:32,130 etwas tun - JavaScript und jQuery lassen Sie Schaltflächen, die Sie anklicken können, haben, 439 00:29:32,130 --> 00:29:37,960 und Sie können Elemente und wieder um sie ziehen und sortieren sie, und haben neue Elemente 440 00:29:37,960 --> 00:29:40,500 hinzugefügt oder entfernt. Sie können Add-Löschen, diese Art der Sache. 441 00:29:40,500 --> 00:29:44,570 Also, macht jQuery Tonnen coole Sachen. 442 00:29:44,570 --> 00:29:48,840 Und Vipul ist eigentlich ein Seminar auf ihm heute, glaube ich, bei 5-Uhr-, 443 00:29:48,840 --> 00:29:51,220 so, wenn Sie bleiben, um für die lange, würde das - 5 oder 4? 444 00:29:51,220 --> 00:29:54,930 Four. Entschuldigung. Es ist eigentlich direkt nach diesem, so würde ich empfehlen, 445 00:29:54,930 --> 00:29:56,680 kleben um für sie, wenn du kannst. 446 00:29:56,680 --> 00:30:00,180 JQuery ist super, super nützlich, und Sie in der Lage, um viele wirklich schöne Dinge mit ihm zu tun 447 00:30:00,180 --> 00:30:03,460 für so ziemlich jedem Web-Entwicklungsprojekt. 448 00:30:03,460 --> 00:30:06,200 >> Jetzt werde ich in eine Art Auszeichnung zu bekommen. 449 00:30:06,200 --> 00:30:08,210 Ich habe im Grunde über Benutzerschnittstelle zu sprechen. 450 00:30:08,210 --> 00:30:11,510 Die Benutzerschnittstelle ist nur das Design der Website. 451 00:30:11,510 --> 00:30:13,780 Aber es gibt noch eine andere Art von Konzept, das User Experience ist. 452 00:30:13,780 --> 00:30:15,900 Die beiden sind sehr unterschiedlich. 453 00:30:15,900 --> 00:30:19,440 Interface ist auf jeden Fall ein Teil der Erfahrung. 454 00:30:19,440 --> 00:30:21,340 In anderen Worten, wenn Sie auf eine Website zu gehen, schauen Sie auf die Schnittstelle. 455 00:30:21,340 --> 00:30:22,960 Das ist ein Teil davon, wie Sie die Website zu erfahren. 456 00:30:22,960 --> 00:30:24,960 Aber User Experience ist mehr. 457 00:30:24,960 --> 00:30:29,910 User Experience ist über das, was den Eindruck, dass der Benutzer von Ihrer Website bekommt, ist. 458 00:30:29,910 --> 00:30:31,910 Also, natürlich, ist die Schnittstelle ein Teil davon. 459 00:30:31,910 --> 00:30:35,340 Und es ist auf jeden Fall ein notwendiger Bestandteil, aber es ist nicht ausreichend. 460 00:30:35,340 --> 00:30:38,790 In anderen Worten, wenn Sie eine schöne Schnittstelle haben, und es ist hübsch und bunt und das alles, 461 00:30:38,790 --> 00:30:43,650 das ist toll, aber wenn der Benutzer auf Ihre Website geht, sieht eine hübsche Layout und es ist von verwirrt 462 00:30:43,650 --> 00:30:47,060 alles, hat keine Ahnung, wie man etwas tun, dann offensichtlich haben Sie eine wirklich gemacht haben 463 00:30:47,060 --> 00:30:48,930 schlechte Website. 464 00:30:48,930 --> 00:30:50,930 Das ist eine Art, wo Benutzererfahrung kommt in. 465 00:30:50,930 --> 00:30:54,570 Ich werde ein bisschen über UX Design sprechen - UX ist die Abkürzung für User Experience - 466 00:30:54,570 --> 00:30:58,050 und eine Art, wie Sie sicherstellen können, dass Sie eine gute Benutzererfahrung. 467 00:30:58,050 --> 00:31:04,330 Der erste Punkt ist, dass Sie ein Website-Design, wo ein Benutzer etwas tun kann, dass 468 00:31:04,330 --> 00:31:06,820 dass Benutzer möglicherweise will. 469 00:31:06,820 --> 00:31:08,940 Aber wenn der Benutzer nicht herausfinden können, wie man diese Dinge zu tun - 470 00:31:08,940 --> 00:31:12,850 in anderen Worten, wenn der Benutzer nicht eine gute Idee, wenn sie auf Ihre Website von zu gehen, 471 00:31:12,850 --> 00:31:17,660 "Oh, wenn ich mein Profil aktualisieren, klicken Sie auf diese Schaltfläche, ich, oder, wenn ich Post auf 472 00:31:17,660 --> 00:31:20,850 jemand die Wand, dann habe ich um ihre Wand gehen und auf einer kleinen Box. " 473 00:31:20,850 --> 00:31:24,410 Wenn der Benutzer nicht wissen, dann haben Sie effektiv nicht wirklich 474 00:31:24,410 --> 00:31:27,080 diese Funktionalität korrekt umgesetzt. 475 00:31:27,080 --> 00:31:30,900 Teil der Implementierung einer Funktionalität ist, dass die Benutzer tatsächlich in der Lage, es zu benutzen. 476 00:31:30,900 --> 00:31:34,810 Und es könnte frustrierend sein - Sie könnten eine Website zu machen, und alle Arten von tun können 477 00:31:34,810 --> 00:31:37,810 wunderbare Dinge, aber dann müssen die Menschen zu testen und zu sagen: "Es kann nicht tun. 478 00:31:37,810 --> 00:31:39,770 Warum kann es nicht tun? "Und Sie werden wieder zu ihnen sagen: 479 00:31:39,770 --> 00:31:44,420 "Na ja, es kann. Man muss nur in die siebte Dropdown-Menü auf dieser obskuren gehen 480 00:31:44,420 --> 00:31:48,470 Seite, die nur durch einen Link in der unteren rechten Ecke "oder so gefunden. 481 00:31:48,470 --> 00:31:50,430 Offensichtlich wollen Sie nicht, dass. 482 00:31:50,430 --> 00:31:53,420 Sie wollen es Ihren Benutzern, was sie tun sollen sein, 483 00:31:53,420 --> 00:31:56,240 und es sollte einfach und intuitiv für sie sein. 484 00:31:56,240 --> 00:32:01,180 >> Eine andere Sache, die Sie versuchen wollen, ist, wenn jemand geht, um Ihre Website zu gehen 485 00:32:01,180 --> 00:32:05,520 und 9 von 10 mal tun Schaltung A, und 1 von 10 mal tun Aktion B, 486 00:32:05,520 --> 00:32:08,950 Sie wahrscheinlich wollen, um ihre Erfahrungen zu Maßnahmen konzentrieren A. 487 00:32:08,950 --> 00:32:12,240 Mit anderen Worten, um es sehr, sehr klar, wie A. möchtest du 488 00:32:12,240 --> 00:32:15,980 A sollte sein Front-und Center - auf die Website gehen, sehen sie, oh, ist es recht. 489 00:32:15,980 --> 00:32:20,850 Während B Sie wollen offensichtlich klar zu sein, aber man kann es ein bisschen mehr verlassen 490 00:32:20,850 --> 00:32:22,850 im Hintergrund. 491 00:32:22,850 --> 00:32:24,640 David gibt ein gutes Beispiel dafür in der Vorlesung, 492 00:32:24,640 --> 00:32:26,640 das ist der Boston-T-System. 493 00:32:26,640 --> 00:32:29,440 Wenn Sie zu den Boston T und Sie ein Ticket kaufen wollen, 494 00:32:29,440 --> 00:32:32,700 Sie müssen in fünf Menüs zu erhalten, bevor Sie tatsächlich ein Ticket kaufen 495 00:32:32,700 --> 00:32:37,130 für eine $ 2, $ 2,50 Wert, der ist, wie viel es braucht, um die U-Bahn fahren 496 00:32:37,130 --> 00:32:39,130 in eine Richtung. 497 00:32:39,130 --> 00:32:41,600 Das ist ein Problem, weil die meisten Menschen, die fahren die U-Bahn sind 498 00:32:41,600 --> 00:32:44,880 wahrscheinlich wollen einfach nur, um an einen Ort zu gehen, kaufen Sie ihr Ticket, erhalten auf sofort. 499 00:32:44,880 --> 00:32:47,550 Es macht keinen Sinn, dass sie durch viele verschiedene Menüs gehen 500 00:32:47,550 --> 00:32:49,550 zu erhalten. 501 00:32:49,550 --> 00:32:51,760 Eine bessere Benutzererfahrung wäre eine Schnelltaste auf der ersten Seite sein 502 00:32:51,760 --> 00:32:54,760 dass, nur sagt:, kaufen ein One-Way-Ticket ", und das wäre legte in alle Standard- 503 00:32:54,760 --> 00:32:58,550 Standardwerte, und dann, wenn jemand eine andere als die Ticket kaufen will, 504 00:32:58,550 --> 00:33:01,690 sie immer noch, natürlich, haben die Option,, aber Sie haben für optimierte 505 00:33:01,690 --> 00:33:04,080 der gemeinsame Einsatz-Fall, der wirklich wichtig ist. 506 00:33:04,080 --> 00:33:06,830 Sie können Beispiele dafür auf Facebook sehen, oder? 507 00:33:06,830 --> 00:33:09,410 Wenn man auf Facebook und Sie einen Status veröffentlichen möchten, 508 00:33:09,410 --> 00:33:11,710 es ist ganz oben auf das ist, was Sie häufig tun will. 509 00:33:11,710 --> 00:33:14,730 Sobald Sie die Seite eingeben, können Sie die häufigsten Dinge tun können, die 510 00:33:14,730 --> 00:33:16,730 Sie tun möchten. 511 00:33:16,730 --> 00:33:17,550 Wenn Sie etwas kompliziertere Dinge wie tun wollen, 512 00:33:17,550 --> 00:33:21,070 sagen, ich möchte mit meinem Freund Wand gehen und ein Bild posten auf sie - 513 00:33:21,070 --> 00:33:24,810 was ich will oft zu tun, aber nicht so oft wie Status-Updates zu veröffentlichen - 514 00:33:24,810 --> 00:33:28,200 so dass in diesem Fall habe ich ihren Namen geben in das Feld an der Spitze, klicken Sie auf ihrem Profil, 515 00:33:28,200 --> 00:33:31,680 und dann, noch, ganz oben ist es dort, sobald ich zu ihrem Profil bekommen. 516 00:33:31,680 --> 00:33:38,240 Auch hier habe ich in der Priorität für die häufigsten Anwendungsfälle-optimiert. 517 00:33:38,240 --> 00:33:41,800 >> Eine weitere wichtige Sache ist, dass oft Leute Art versuchen, dies zu umgehen 518 00:33:41,800 --> 00:33:44,890 sagen, okay, also habe ich die Website gemacht und die Leute finden es verwirrend, 519 00:33:44,890 --> 00:33:46,110 und das ist ein Problem, oder? 520 00:33:46,110 --> 00:33:49,210 Natürlich glaube ich nicht, dass die Leute durch den Inhalt meiner Seite verwechselt werden. 521 00:33:49,210 --> 00:33:53,210 Aber die Art und Weise zu lösen, dass ist nicht zu haben, etwas zu sagen, Pop-up, 522 00:33:53,210 --> 00:33:55,290 hey, ich werde Ihnen zeigen, wie Sie diese Seite zu nutzen. 523 00:33:55,290 --> 00:33:58,130 Schritt 1 - Klicken Sie auf diese Taste. Schritt 2 - finden Sie hier. 524 00:33:58,130 --> 00:34:03,080 Klar, das ist ein Weg, um ihn herum - es ist ein Weg, dass man die Leute sagen, was zu tun, aber es ist 525 00:34:03,080 --> 00:34:05,080 wirklich nicht der optimale Weg. 526 00:34:05,080 --> 00:34:07,420 Wenn ich auf eine Website, und plötzlich bin ich mit diesem Tutorial, das sagt mir bombardiert 527 00:34:07,420 --> 00:34:11,739 was zu tun und wohin sie gehen, und das alles, das ist nicht lustig für mich. 528 00:34:11,739 --> 00:34:13,739 Es ist nicht eine gute Erfahrung für mich. 529 00:34:13,739 --> 00:34:17,130 Es ist eine Art Schmerz. Ich möchte einfach angefangen zu Sachen. 530 00:34:17,130 --> 00:34:19,449 Die Leute werden aus ihren Dialogfeld zu schließen, 531 00:34:19,449 --> 00:34:23,580 oder aus dem Tutorial zu bekommen, nicht wissen, was zu tun, und dann beschweren, weil 532 00:34:23,580 --> 00:34:25,580 Sie sie nicht gesagt haben, was zu tun ist. 533 00:34:25,580 --> 00:34:29,530 Der Weg, dies zu lösen, ist nicht, indem sie jede Art von Tutorial oder Richtungen - 534 00:34:29,530 --> 00:34:31,530 so etwas. 535 00:34:31,530 --> 00:34:33,719 So viel wie Sie es vermeiden können, die Sie wirklich, um den Benutzer zu zeigen, was zu tun 536 00:34:33,719 --> 00:34:36,429 nur durch die Art, wie die Website ist übersichtlich. 537 00:34:36,429 --> 00:34:39,090 In anderen Worten, wenn ich zu Facebook ohne Anmeldung, 538 00:34:39,090 --> 00:34:40,920 das erste, was ich auf der Hauptseite zu sehen - 539 00:34:40,920 --> 00:34:44,480 es ist ein wenig Login-Feld. Also, duh. Ich habe eingeloggt Es ist recht. 540 00:34:44,480 --> 00:34:48,030 Während, wenn ich bei Facebook, und ich musste ein wenig Link unten klicken 541 00:34:48,030 --> 00:34:51,920 dass die "einloggen" und der Rest der Seite war nur eine Art von Bild oder so etwas, 542 00:34:51,920 --> 00:34:54,820 Ich würde nicht wirklich wissen, was zu tun ist, oder? Ich würde verwechselt werden. 543 00:34:54,820 --> 00:34:58,590 So könnte es mir zu sagen, da runter und klicken Sie auf die Schaltfläche, um sich anzumelden, 544 00:34:58,590 --> 00:35:01,080 oder log in-Taste kann direkt an der Spitze, wo ich bin, es zu sehen. 545 00:35:01,080 --> 00:35:04,780 Sie möchten werden, den Benutzer immer was zu tun, die, 546 00:35:04,780 --> 00:35:06,750 und dass die sich aus der Seite selbst sein sollten. 547 00:35:06,750 --> 00:35:09,880 >> Wenn Sie über Entwürfe denken und Spott bis verschiedene Möglichkeiten, 548 00:35:09,880 --> 00:35:13,810 Ihre Website ausdrücken, die Sie wirklich über das, was die Nutzer zu denken, wollen gehen 549 00:35:13,810 --> 00:35:19,380 tun und wie können Sie ihnen zeigen, was zu tun ist. 550 00:35:19,380 --> 00:35:23,530 Eine letzte Sache ist das Testen ist wirklich, wirklich wichtig. 551 00:35:23,530 --> 00:35:27,400 Es ist toll, jemanden zu bekommen - bekommen einen Freund, jemanden Sie nicht einmal wissen - 552 00:35:27,400 --> 00:35:30,420 , der noch nie zuvor gesehen die Website, um die Website zu nutzen. 553 00:35:30,420 --> 00:35:33,650 Weil du auf der Website arbeiten seit Stunden, habe man es gestarrt, 554 00:35:33,650 --> 00:35:36,670 und Sie wissen genau, was zu tun offensichtlich wollen Sie testen das sind 555 00:35:36,670 --> 00:35:39,520 Dinge, die Sie haben und dass Sie Arbeit kennen gearbeitet. 556 00:35:39,520 --> 00:35:42,680 Aber wenn jemand anders kommt und nutzt die Website, die noch nie benutzt hat, bevor es, 557 00:35:42,680 --> 00:35:46,880 das ist ein einmaliges Erlebnis, weil Sie jemand, der keine Vorkenntnisse hat, haben 558 00:35:46,880 --> 00:35:51,530 von der Website, die in sie, so dass sie gehen, um effektiv keine Ahnung, was zu tun 559 00:35:51,530 --> 00:35:54,890 oder welche Art von Anwendungsfällen für sie vorhanden sind. 560 00:35:54,890 --> 00:36:00,930 Das ist toll. Das ist einzigartig, denn sie sind im Wesentlichen eine Person mit einem Rohling für einen Geist. 561 00:36:00,930 --> 00:36:03,750 Sie kann Ihnen sagen, wenn etwas verwirrend oder unklar. 562 00:36:03,750 --> 00:36:07,580 Dort erhalten Sie eine Vorstellung davon, genau das, was die Benutzerfreundlichkeit Ihrer Website ist. 563 00:36:07,580 --> 00:36:10,630 Es kann sehr schwer sein, zu sagen, dass Sie sich so auf jeden Fall möchte ich Sie ermutigen, 564 00:36:10,630 --> 00:36:13,640 wie Sie entwickeln Ihre Projekte - wenn Sie dabei Web-basierte Projekte sind - 565 00:36:13,640 --> 00:36:18,290 zu Menschen, die Seite so früh wie möglich eine Art von funktionsfähige Demo haben zu bekommen. 566 00:36:18,290 --> 00:36:25,330 >> Jetzt werde ich ein wenig über, wie eine Web-Entwicklungsprojekt zu sprechen. 567 00:36:25,330 --> 00:36:28,900 Wir haben über, wie Sie das technische Backend-Seite zu tun gegangen, 568 00:36:28,900 --> 00:36:31,050 wie Sie eine wirklich gute Website-Design, 569 00:36:31,050 --> 00:36:34,150 und das ist toll, wenn man selbst gerade arbeiten, aber - 570 00:36:34,150 --> 00:36:37,300 auch wenn Sie selbst arbeiten und vor allem, wenn Sie in einem Team arbeiten, 571 00:36:37,300 --> 00:36:39,580 Projektmanagement wird ein grosses Thema. 572 00:36:39,580 --> 00:36:42,340 Sie haben über die Art von Projektmanagement in verschiedenen Formen gehört seit 573 00:36:42,340 --> 00:36:45,410 Grundschule, wenn Sie wurden Gruppenarbeit erzählt. 574 00:36:45,410 --> 00:36:46,820 Sie müssen zusammenarbeiten, kommunizieren, das alles. 575 00:36:46,820 --> 00:36:49,620 Das gilt noch hier, aber es gibt einige einzigartigen Umstände mit 576 00:36:49,620 --> 00:36:54,910 Informatik, die Sie wollen, bewusst sein, und Sie sicherstellen, dass Sie gut behandeln soll. 577 00:36:54,910 --> 00:36:58,050 Ich werde zuerst ein wenig über das Team, das Sie in. sprechen 578 00:36:58,050 --> 00:37:03,280 Es ist sehr wichtig, die richtige Größe eines Teams zu werden, zur Arbeit holen, 579 00:37:03,280 --> 00:37:05,890 und in Ihrem letzten Projekt, das ich denke, dass Sie die Möglichkeit haben zu wählen 580 00:37:05,890 --> 00:37:08,610 zwischen 1 und 4 Personen, ob ich richtig bin. 581 00:37:08,610 --> 00:37:12,050 Sie wollen sicherstellen, dass Sie nicht nur die Wahl der Zahl der Menschen 582 00:37:12,050 --> 00:37:14,950 dass Sie mit, weil sie sind deine Freunde arbeiten wollen. 583 00:37:14,950 --> 00:37:18,170 Sie wollen ein Team, das ist eine gute Größe wählen und das wird den Job zu erledigen. 584 00:37:18,170 --> 00:37:22,700 Es ist ein Trade-off in die mehr Menschen gegenüber weniger Leute. 585 00:37:22,700 --> 00:37:25,320 Wenn Sie mehr Menschen haben, kann natürlich mehr Arbeit getan werden 586 00:37:25,320 --> 00:37:28,450 weil Sie viele Leute, viel Code, viele Ideen haben 587 00:37:28,450 --> 00:37:29,870 und das ist alles super. 588 00:37:29,870 --> 00:37:32,590 Aber es erfordert auch viel mehr Management und viel mehr Kommunikation. 589 00:37:32,590 --> 00:37:34,720 In anderen Worten, wenn Sie 4 Personen arbeiten am selben Projekt 590 00:37:34,720 --> 00:37:39,200 und sie sind alle die Bearbeitung der gleichen Code, mehr oder weniger alle Art von Bedürfnis zu wissen, 591 00:37:39,200 --> 00:37:40,920 was los ist, damit es erfordert, dass Sie - 592 00:37:40,920 --> 00:37:44,580 wenn Sie einige neue Funktion hinzufügen, die Sie Art haben den Leuten zu sagen - ich bin das Hinzufügen dieser, 593 00:37:44,580 --> 00:37:48,510 Ich ändere dies in dieser Weise - vor allem, wenn Sie in die wirklich tief Zeug 594 00:37:48,510 --> 00:37:52,730 wie die Modelle und den Controllern, die tatsächlich gehen zu beeinflussen, wie die Website funktioniert. 595 00:37:52,730 --> 00:37:54,500 Das ganze Team muss sich dessen bewusst sein, 596 00:37:54,500 --> 00:37:58,140 so müssen Sie sicherstellen, dass Sie nicht zu groß wählen ein Team, das geht hart zu sein 597 00:37:58,140 --> 00:37:59,970 , dass die Kommunikation zu machen. 598 00:37:59,970 --> 00:38:02,930 Sie wollen ja auch nicht klein genug, um ein Team, das Sie gehen nicht wählen 599 00:38:02,930 --> 00:38:06,250 in der Lage sein, zu kommunizieren, weil es nur Sie. 600 00:38:06,250 --> 00:38:11,270 >> Eine andere Sache zu prüfen, ist die Balance von Fähigkeiten, wo Menschen sind. 601 00:38:11,270 --> 00:38:14,350 Es ist toll, wenn Sie alle wirklich gute Programmierer. 602 00:38:14,350 --> 00:38:17,050 Aber wenn Sie alle Back-End-Leute sind, dann wird Ihre Website wird nicht sehr gut aussehen 603 00:38:17,050 --> 00:38:20,860 weil Sie diese große Datenbank, und es macht super-schnellen Suchanfragen - 604 00:38:20,860 --> 00:38:26,130 das ist toll - aber wenn Sie es gehen, es ist wie eine Website der 1990er Jahre mit roten und blauen 605 00:38:26,130 --> 00:38:30,370 überall, und das ist auch nicht gut. 606 00:38:30,370 --> 00:38:34,210 Beachten Sie, dass Ben und ich arbeiten als Team sind sehr nett, denn ich bin eigentlich mehr 607 00:38:34,210 --> 00:38:38,030 im Front-End, wir beide interagieren in der Mitte-Ende, und Ben ist wirklich gut mit Back-End-Sachen, 608 00:38:38,030 --> 00:38:43,550 so dass funktioniert wirklich gut, denn wir können jede Website die Löcher zu entwerfen und im Grunde 609 00:38:43,550 --> 00:38:47,580 an diesem Standort, die gefüllt werden müssen, kann von beiden einer von uns, oder möglicherweise beide gefüllt werden. 610 00:38:47,580 --> 00:38:50,210 Sie wollen sicherstellen, dass es keine Löcher in Ihrem Team. 611 00:38:50,210 --> 00:38:51,180 Es ist okay, wenn es ein bisschen überlappen. 612 00:38:51,180 --> 00:38:53,670 In anderen Worten, wenn Sie 2 Personen, die beide gut mit Back-End gibt, 613 00:38:53,670 --> 00:38:57,250 so gut sein kann als gut, weil sie mit Problemen gegenseitig helfen können 614 00:38:57,250 --> 00:38:58,820 dass sie mit. 615 00:38:58,820 --> 00:39:02,590 Es kann ein Problem sein, wenn Sie nur 1 Person, die für eine bestimmte Sache verantwortlich ist, 616 00:39:02,590 --> 00:39:06,650 und sie in ein Problem laufen, so dass Sie wollen, um ein wenig von der Überlappung haben 617 00:39:06,650 --> 00:39:10,760 aber Sie wollen vor allem sicherstellen, dass alle möglichen Löcher gefüllt sind. 618 00:39:10,760 --> 00:39:17,550 >> Das letzte, was - und das sollte klar sein, aber es ist oft nicht. 619 00:39:17,550 --> 00:39:19,550 Sie wirklich wollen, um Spaß zu haben. 620 00:39:19,550 --> 00:39:23,360 Der Sinn dieser Abschlussprojekt in CS50 und oft der Punkt, der Web-Entwicklung im Allgemeinen 621 00:39:23,360 --> 00:39:26,360 ist nicht nur auf einen Job zu tun, weil es getan werden muss. 622 00:39:26,360 --> 00:39:29,140 Sie wollen wirklich Spaß zu haben, und Sie möchten etwas zu machen 623 00:39:29,140 --> 00:39:31,180 das ist motivieren Sie, daran zu arbeiten. 624 00:39:31,180 --> 00:39:33,650 Wenn was auch immer du machst ist ein Schmerz, sich zu setzen und daran arbeiten, 625 00:39:33,650 --> 00:39:35,650 dann bist du nicht das richtige Projekt wählen. 626 00:39:35,650 --> 00:39:37,730 Sie wollen etwas, die Sie interessant finden, zu wählen, 627 00:39:37,730 --> 00:39:41,150 Sie wirklich wollen, um das Ergebnis zu sehen, sind Sie aufgeregt, wenn Sie eine neue Idee zu 628 00:39:41,150 --> 00:39:44,700 etwas, das man tun könnte - so gibt es alle Arten von Projekten gibt, die ich bin sicher, 629 00:39:44,700 --> 00:39:47,290 finden Sie - jeder hat etwas, das wirklich faszinieren würde sie 630 00:39:47,290 --> 00:39:49,290 wenn sie tun, eine web-basierte Projekt. 631 00:39:49,290 --> 00:39:52,210 Ich werde es wieder sagen, gerade jetzt. 632 00:39:52,210 --> 00:39:54,520 Wenn Ihr Projekt scheint wie ein Schmerz, und Sie wollen nicht, daran zu arbeiten, 633 00:39:54,520 --> 00:39:57,260 wählen Sie ein anderes Projekt. Wählen Sie etwas, das wirklich inspiriert. 634 00:39:57,260 --> 00:40:00,260 >> Ben erwähnt dieses Konzept der Iteration ein bisschen, und ich möchte ein bisschen über sie gehen. 635 00:40:00,260 --> 00:40:08,250 Es ist wirklich wichtig, in Schüben, wo Sie etwas funktionales erhalten zu arbeiten. 636 00:40:08,250 --> 00:40:13,420 Es kann groß sein, wenn Sie diesen Plan für eine Website, die gehen, um A, B, und C zu tun haben, 637 00:40:13,420 --> 00:40:16,000 und schließlich sie werden es bekommen. 638 00:40:16,000 --> 00:40:18,600 Aber Sie in dieser Phase, wo man daran arbeiten und daran zu arbeiten, stecken, 639 00:40:18,600 --> 00:40:23,330 aber nichts hat sich immer getan. Sie haben noch nichts zu sehen und eine greifbare, funktionale Sache. 640 00:40:23,330 --> 00:40:27,940 Was Sie wirklich so viel zu tun, wie es scheint, eine Art Schmerz manchmal zu wollen 641 00:40:27,940 --> 00:40:32,300 arbeiten an etwas, und dann irgendwie verschließen Sie diese, so dass es zumindest auf einem stabilen, Laufen 642 00:40:32,300 --> 00:40:34,910 Version, auch wenn sie nicht über alle Funktionen, die Sie wollen. 643 00:40:34,910 --> 00:40:37,690 Und vielleicht gibt es einige Funktionen, die Sie wirklich wollen, um hinzuzufügen, aber man kann einfach nicht 644 00:40:37,690 --> 00:40:41,830 weil Sie diese Seite einer Funktionsstelle zu bekommen. 645 00:40:41,830 --> 00:40:44,400 Und so wollen Art haben die ganze Entwicklungsprozess aussehen wie die. 646 00:40:44,400 --> 00:40:47,810 Sie wollen irgendwo Funktions starten - oder im wesentlichen beginnen mit nichts - 647 00:40:47,810 --> 00:40:49,890 aber Sie wollen irgendwo sehr einfach und funktional. 648 00:40:49,890 --> 00:40:54,940 Und dann wieder, stellen eine Art zu springen und sich irgendwo wieder funktionsfähig. 649 00:40:54,940 --> 00:40:59,190 Sie werden langsam aufbauen, und es könnte ein bisschen langsamer als sonst zu gehen, 650 00:40:59,190 --> 00:41:03,000 aber auf lange Sicht, wenn man ständig in diesem mittleren Bodenphase stecken, wo Sie 651 00:41:03,000 --> 00:41:06,380 nicht wirklich etwas Arbeit haben, kann es eine wirklich große Frustration sein 652 00:41:06,380 --> 00:41:09,970 an Ihrem Projekt arbeiten, weil du immer so kurz davor es funktioniert, 653 00:41:09,970 --> 00:41:12,130 und es ist nie wirklich funktioniert. 654 00:41:12,130 --> 00:41:14,810 Sie wollen in dieser Funktionsschübe zu arbeiten, 655 00:41:14,810 --> 00:41:17,950 und Sie wollen auch einige Überlegungen nach jeder tun. 656 00:41:17,950 --> 00:41:21,260 In anderen Worten, wenn Sie an einem Punkt, wo die Website funktioniert jetzt bist - 657 00:41:21,260 --> 00:41:24,790 es nicht alles, was Sie gerne haben, aber es hat einige Dinge - 658 00:41:24,790 --> 00:41:28,870 Sie denken wollen, okay, diese Seite ist Erreichen des Ziel, das ich gesetzt, um zu tun? 659 00:41:28,870 --> 00:41:33,410 In anderen Worten, wenn die Website gehen, um X zu tun, ist, was ich in der Richtung der X arbeiten? 660 00:41:33,410 --> 00:41:36,450 Sind alle Funktionalitäten, die ich dort wollte? 661 00:41:36,450 --> 00:41:39,340 Und darüber hinaus ist es, die dem allgemeinen Zweck, die ich will? 662 00:41:39,340 --> 00:41:43,200 Wenn Sie finden, sind, dass Ihre Website beginnen, in eine andere Richtung einschlagen 663 00:41:43,200 --> 00:41:47,330 oder vielleicht Dinge nur irgendwie funktionieren nicht, kann es Zeit, um die Gänge ein wenig sein. 664 00:41:47,330 --> 00:41:51,700 In anderen Worten, es ist eine Überlegung wert - es lohnt sich werfen Ideen, wenn notwendig 665 00:41:51,700 --> 00:41:57,950 und in Anbetracht ich wirklich arbeiten zu dem, was ich sein möchte. 666 00:41:57,950 --> 00:42:00,760 >> Ich glaube, dass meine nächsten Punkt. Haben Sie keine Angst, um Ideen nicht aufzugeben. 667 00:42:00,760 --> 00:42:03,750 Nur weil Sie verbrachte viele Stunden Arbeit an einem Feature 668 00:42:03,750 --> 00:42:07,890 und schließlich habe es funktioniert, aber es ist wirklich nicht so gut läuft - 669 00:42:07,890 --> 00:42:12,690 wie es ist nicht so sinnvoll oder-Benutzer haben Probleme damit - mit so etwas - 670 00:42:12,690 --> 00:42:15,300 keine Angst, es wegwerfen können. 671 00:42:15,300 --> 00:42:17,650 Er saugt, dass Sie eine Menge Zeit damit verbracht habe, daran zu arbeiten, 672 00:42:17,650 --> 00:42:21,870 aber schließlich wollen Sie nicht eine Website, die Art der durch diese Stücke zusammen ist das 673 00:42:21,870 --> 00:42:25,380 Art der Arbeit, sind aber nicht so gut serviert. 674 00:42:25,380 --> 00:42:27,990 Auch haben Sie keine Angst, um neue Ideen zu umarmen. 675 00:42:27,990 --> 00:42:30,050 Wenn jemand kommt und sagt, hey, sieht, dass vor Ort wirklich cool, aber 676 00:42:30,050 --> 00:42:32,290 wäre es nicht auch schön, wenn es auch tat das? 677 00:42:32,290 --> 00:42:36,220 Nur weil das ist etwas, dass Sie nicht die Absicht und nicht etwas, das in ist Ihr 678 00:42:36,220 --> 00:42:37,900 Spezifikationen, etwas, das Sie tun müssen, nicht festgelegt haben, 679 00:42:37,900 --> 00:42:40,860 keine Angst, es zu nehmen auf und arbeiten dann mit ihm. 680 00:42:40,860 --> 00:42:43,680 Da oft die Ideen, die Sie mit der gesamten Verlauf der Entwicklung laufen 681 00:42:43,680 --> 00:42:47,630 am Ende wird die wirklich coolen Features der Website. 682 00:42:47,630 --> 00:42:49,630 >> Ich habe das schon einmal gesagt. Ich sage es noch einmal. 683 00:42:49,630 --> 00:42:51,630 Tester sind super, super nützlich. 684 00:42:51,630 --> 00:42:56,350 Versuchen Sie, die Menschen, die die Website noch nie gesehen haben, bevor Sie sich anmelden und sehen, was vor sich geht 685 00:42:56,350 --> 00:42:59,080 da sie nicht nur die Nützlichkeit des Standorts und der Benutzerfreundlichkeit zu testen, 686 00:42:59,080 --> 00:43:02,070 aber sie können die Funktionalität in einer Weise, dass man nicht auch testen. 687 00:43:02,070 --> 00:43:06,430 Wenn Sie einige Funktion, die eine bestimmte Sache macht 688 00:43:06,430 --> 00:43:11,620 und Sie wissen, es geht um, die gleiche Sache richtig jedes Mal zu tun, das ist großartig. 689 00:43:11,620 --> 00:43:16,610 Aber kann es oft schwierig sein, für Eck-Fällen, in denen ein Benutzer-Konto 690 00:43:16,610 --> 00:43:19,500 Geben Sie etwas, das Sie nicht erwartet wurden - gerade weil Sie definiert 691 00:43:19,500 --> 00:43:21,500 die Merkmale sich. 692 00:43:21,500 --> 00:43:23,730 Also, um jemandem auf, die keine Ahnung, wie die Nutzung der Seite hat kommen müssen 693 00:43:23,730 --> 00:43:26,840 und nur brechen sie in welcher Weise sie tun können, ist wirklich nützlich, weil Sie 694 00:43:26,840 --> 00:43:30,340 eine Idee aus einer ganz anderen Perspektive, was auf Ihrer Website funktioniert 695 00:43:30,340 --> 00:43:33,300 und was muss repariert werden. 696 00:43:33,300 --> 00:43:37,070 >> Zuletzt werde ich über einige allgemeine gute Praktiken zu sprechen, 697 00:43:37,070 --> 00:43:42,470 und Sie haben eine Menge von diesen in CS50 gesehen habe, aber sie auch wirklich, wirklich in einem Projekt Einstellung anzuwenden. 698 00:43:42,470 --> 00:43:47,600 Einer ist Kommentare. Ihr Code immer Kommentar besonders wenn Sie auf einem großen Team arbeitest. 699 00:43:47,600 --> 00:43:51,230 Es kann so ärgerlich, einfach nur einen riesigen Code-Block, dass jemand geschrieben 700 00:43:51,230 --> 00:43:54,230 und vielleicht klappt es, vielleicht nicht, aber Sie haben keine Ahnung, was es hat, 701 00:43:54,230 --> 00:43:58,010 so haben Sie keine Ahnung, ob es sinnvoll ist oder nicht, oder ob sie es oder nicht, 702 00:43:58,010 --> 00:44:00,200 und wenn Sie auf etwas anderes arbeitest, es ist sogar möglich, dass Sie gerade arbeiten 703 00:44:00,200 --> 00:44:06,590 die gleiche Sache, so dass nur sehr, sehr vorsichtig, rücksichtsvoll von Ihren Kollegen zu sein 704 00:44:06,590 --> 00:44:09,710 und Schreib-Code, ist gut dokumentiert. 705 00:44:09,710 --> 00:44:13,580 Sie müssen nicht so weit gehen, die ganze Sache, wo gerne tun, wenn Sie erhöhen 706 00:44:13,580 --> 00:44:16,620 ein Zähler haben einen Kommentar, der sagt ich bin Hinzufügen von 1 zu diesem Zähler. 707 00:44:16,620 --> 00:44:20,450 Es hat nicht so detailliert sein, aber für jede Funktion, die Sie jemals schreibst 708 00:44:20,450 --> 00:44:23,160 Sie sollten eine Dokumentation dessen, was die Funktion genau macht haben, 709 00:44:23,160 --> 00:44:25,140 was seine Eingänge sind, und was sie zurückgeben sollte. 710 00:44:25,140 --> 00:44:27,800 So können Sie andere Komponenten der Website der Menschen nutzen 711 00:44:27,800 --> 00:44:31,990 und Sie zum Aufbau etwas Großem arbeiten können. 712 00:44:31,990 --> 00:44:34,100 >> Eine weitere wichtige Sache ist, dass Sie regelmäßige Bereinigung tun wollen. 713 00:44:34,100 --> 00:44:40,490 Code wird chaotisch. Fühlen Sie sich nicht schlecht, wenn der Code ist einfach total unlesbar und ein riesiges Durcheinander. 714 00:44:40,490 --> 00:44:42,770 Das geschieht immer in der Web-Entwicklung. 715 00:44:42,770 --> 00:44:46,530 Sie sind das Hinzufügen neuer Features, die Beseitigung alten. Stuff wird da sein, die nicht sein sollten. 716 00:44:46,530 --> 00:44:49,330 Das ist in Ordnung, aber Sie müssen sicherstellen, dass regelmäßig mit umgehen wollen. 717 00:44:49,330 --> 00:44:53,430 Sie wollen nicht, es zu bauen bis zu dem Punkt, wo man einfach nichts finden zu lassen 718 00:44:53,430 --> 00:44:56,430 im Code, und Sie haben keine Ahnung, was alles tut. 719 00:44:56,430 --> 00:44:58,430 Das ist der Fall mit HTML. 720 00:44:58,430 --> 00:44:59,490 Manchmal werden Sie am Ende mit Objekten, die alles enthalten, 721 00:44:59,490 --> 00:45:01,320 und Sie wollen von denen, loszuwerden. 722 00:45:01,320 --> 00:45:04,610 In CSS können Sie sich unter Bezugnahme auf Elemente, die nicht mehr da, 723 00:45:04,610 --> 00:45:06,340 so dass Sie wollen, um diesen Code zu befreien. 724 00:45:06,340 --> 00:45:09,900 In JavaScript, könnten Sie etwas aus dem HTML entfernt haben. 725 00:45:09,900 --> 00:45:13,150 Also, wollen Sie sicherstellen, dass Sie immer die Säuberung, die Dinge ziemlich 726 00:45:13,150 --> 00:45:17,450 so viel, wie Sie können auf einer regelmäßigen Basis. 727 00:45:17,450 --> 00:45:21,060 >> Eine andere wirklich nützliche Sache, die ich nicht glaube, ist sehr viel in CS50 skizziert 728 00:45:21,060 --> 00:45:23,430 aber es lohnt sich, in die Versionskontrolle ist. 729 00:45:23,430 --> 00:45:27,180 Die Idee der Versionskontrolle ist, wenn Sie im Grunde die Verfolgung aller Fortschritte 730 00:45:27,180 --> 00:45:30,820 Sie auf Ihrer Website vorgenommen haben, und wenn Sie zu irgendeinem Zeitpunkt zu realisieren, oh, das war Arbeits 731 00:45:30,820 --> 00:45:35,220 eine Weile her, aber es ist nicht mehr arbeiten, können Sie zu früheren Versionen gehen 732 00:45:35,220 --> 00:45:37,720 und sehen, was sich seit damals und so etwas verändert. 733 00:45:37,720 --> 00:45:41,670 Der primäre Weg dies zu tun ist mit Git und Git ist diese ganze Art von System, das 734 00:45:41,670 --> 00:45:46,390 Ich glaube, Tommy MacWilliam gab ein Seminar über Vorjahr. 735 00:45:46,390 --> 00:45:51,520 Wenn Sie in den CS50-Seminare für das Jahr 2011 gehen, können Sie seine Seminar über das zu sehen. 736 00:45:51,520 --> 00:45:57,070 Die Idee von Git ist im Grunde, dass in regelmäßigen Abständen Sie machen diese Verpflichtungen sind 737 00:45:57,070 --> 00:46:01,430 die Möglichkeiten, zu sagen, die Seite ist in einem ziemlich stabilen Version jetzt so 738 00:46:01,430 --> 00:46:05,910 Ich bin es Verpacken und Versenden es weg an einen Server, und dann können Sie mit diesem Server gehen 739 00:46:05,910 --> 00:46:07,910 und schauen Sie sich alle früheren Versionen des Codes und sehen, wie es voran 740 00:46:07,910 --> 00:46:12,210 und alle diese Art von guten Sachen. 741 00:46:12,210 --> 00:46:14,210 Also, das ist es im Grunde. 742 00:46:14,210 --> 00:46:17,870 Soweit Web-Entwicklung, sind wir glücklich zu bleiben und beantworten jede 743 00:46:17,870 --> 00:46:20,570 Fragen so weit wie unsere Präsentation. 744 00:46:20,570 --> 00:46:22,900 Das ist es. Vielen Dank. >> [Ben] Danke. 745 00:46:22,900 --> 00:46:28,480 [Applaus] 746 00:46:28,480 --> 00:46:30,950 >> [Billy]-Team, hat jemand irgendwelche Fragen über Dinge, die wir behandelt haben haben 747 00:46:30,950 --> 00:46:33,950 oder Dinge, die wir nicht erfasst, dass sie hofften, wir würden zu decken? 748 00:46:33,950 --> 00:46:35,950 Wir würden uns freuen, diejenigen zu beantworten. Anyone? 749 00:46:35,950 --> 00:46:50,360 [Zuschauer] Was sind die Vor-und Nachteile der Verwendung von Ruby oder Python? 750 00:46:50,360 --> 00:46:58,660 [Ben] Die Frage war, was sind die Vor-und Nachteile der Verwendung von Ruby oder Python 751 00:46:58,660 --> 00:46:59,900 statt wie PHP. 752 00:46:59,900 --> 00:47:11,340 Die Profis sind, dass Ruby und Python sind viel besser Sprachen als PHP. 753 00:47:11,340 --> 00:47:14,920 Zumindest meiner Meinung nach, und ich denke, in einer Menge von Meinungen anderer Leute auch. 754 00:47:14,920 --> 00:47:20,990 Sie wurden dafür mehr komplexe Sachen entworfen, 755 00:47:20,990 --> 00:47:25,380 und weniger für wirklich schnell zusammen whacking Web-Seiten mit 756 00:47:25,380 --> 00:47:28,400 ein bisschen von dynamischen Inhalten. 757 00:47:28,400 --> 00:47:35,180 Die Nachteile sind, dass es ein wenig - es ist eher eine Lernkurve 758 00:47:35,180 --> 00:47:37,220 zu bekommen deren Einrichtung. 759 00:47:37,220 --> 00:47:41,010 Das heißt, wie in PHP, müssen Sie nur können eine HTML-Datei, und Sie weniger als zu schreiben, 760 00:47:41,010 --> 00:47:43,060 Fragezeichen, und dann Code schreiben Sie, und dann schreiben Sie Fragezeichen, 761 00:47:43,060 --> 00:47:45,700 größer als, und dann sind Sie fertig. 762 00:47:45,700 --> 00:47:50,300 In anderen Sprachen wie Ruby oder Python, 763 00:47:50,300 --> 00:47:56,810 Sie haben, um durch ein bisschen mehr Arbeit gehen, um die ursprüngliche Website zum Laufen zu bringen. 764 00:47:56,810 --> 00:48:02,730 Es gibt auch - zumindest früher der Fall sein -, dass es mehr Dokumentation 765 00:48:02,730 --> 00:48:05,480 für PHP verfügbar, nur weil es mehr Leute, die es. 766 00:48:05,480 --> 00:48:09,370 Ich denke, das ist nicht mehr so ​​viel von einem Problem. 767 00:48:09,370 --> 00:48:12,520 Es ist sicherlich eine sehr gute Dokumentation für Sachen wie Ruby on Rails 768 00:48:12,520 --> 00:48:16,080 oder Django für Python ist das Äquivalent. 769 00:48:16,080 --> 00:48:25,910 PHP ist die, die jeder hat seit Jahren mit, und Sie wissen, wie es funktioniert. 770 00:48:25,910 --> 00:48:28,460 Ruby und Python sind ein bisschen weniger ausgereift. 771 00:48:28,460 --> 00:48:33,130 >> [Zuschauer] Wenn Sie zwischen einen von ihnen zu lernen oder zu holen waren, 772 00:48:33,130 --> 00:48:36,130 Welche würden Sie bevorzugen? 773 00:48:36,130 --> 00:48:38,870 Ehrlich gesagt, ich denke, das hängt von der Person. 774 00:48:38,870 --> 00:48:45,450 Es tut mir leid. Die Frage war, welche würden Sie wählen für jemanden zu lernen? 775 00:48:45,450 --> 00:48:50,230 Ich finde das schönste Python persönlich. 776 00:48:50,230 --> 00:48:55,360 Es gibt eine Menge Leute, die - ich meine erste Web-Entwickler Projekt in Python und Django. 777 00:48:55,360 --> 00:49:00,300 Es gibt eine Menge Leute, die sich Ruby on Rails auch gerne. 778 00:49:00,300 --> 00:49:02,650 Wahrscheinlich mehr Menschen, die Ruby on Rails kennen. 779 00:49:02,650 --> 00:49:05,270 Ehrlich gesagt, würde ich nur mit dem, was die Menschen um Sie wissen zu gehen 780 00:49:05,270 --> 00:49:09,680 so dass Sie die Menschen, Fragen zu stellen. 781 00:49:19,640 --> 00:49:24,170 >> Die Frage war - auf gemeinsam genutzten Servern ist es ein bisschen schwer, sich auf Python zu arbeiten? 782 00:49:24,170 --> 00:49:26,170 Das hängt von Ihrer Hosting. 783 00:49:26,170 --> 00:49:29,400 Es gibt eine Reihe von Web-Hosts, die Python-Sachen veröffentlichen wird. 784 00:49:29,400 --> 00:49:31,400 WebFaction tut, richtig? 785 00:49:31,400 --> 00:49:34,400 WebFaction ist eine, Billy und ich habe für einige Projekte eingesetzt. 786 00:49:34,400 --> 00:49:37,750 Sie sind wirklich großartig. Sie unterstützen die meisten Sprachen. 787 00:49:37,750 --> 00:49:40,020 Aber es ist wahr, dass PHP ist viel besser unterstützt. 788 00:49:40,020 --> 00:49:45,210 Also, wenn Sie auf einem Web-Host, nur, dass PHP stecken, das ist ein guter Grund, um PHP zu verwenden. 789 00:49:45,210 --> 00:49:56,010 >> [Zuschauer] Ich habe gerade in das Lernen, wie man einige Datenbanken abzufragen, 790 00:49:56,010 --> 00:50:00,680 und ich weiß, dass meine SQL ist ganz über dem Platz, aber ich habe vor kurzem ausgesetzt - 791 00:50:00,680 --> 00:50:04,470 und Sie darauf aufmerksam machte. Sie sehen, JSON und erweiterbare Datenbanken. 792 00:50:04,470 --> 00:50:14,580 My SQL ist immer noch ganz über dem Platz. Wie machen Sie das Geschehen sehen? 793 00:50:14,580 --> 00:50:21,330 Wird es eine wachsende Tendenz für mehr erweiterbar (unhörbar) sein? 794 00:50:21,330 --> 00:50:30,100 Die Frage war - ich glaube, es wird ein Trend zur Nicht-SQL-Datenbanken sein. 795 00:50:30,100 --> 00:50:33,850 Zum Beispiel, wie MongoDB. Ich denke, dass ist auf jeden Fall wahr. 796 00:50:33,850 --> 00:50:38,730 Mein Rat war vor allem hier mySQL bezogenen nur, weil mySQL ist 797 00:50:38,730 --> 00:50:40,950 Industriestandard. 798 00:50:40,950 --> 00:50:45,950 Ich persönlich bevorzuge Datenbanken, die nicht schemos wie MongoDB 799 00:50:45,950 --> 00:50:49,520 wo man nicht das Problem der zu tun haben, oh, ich muss eine weitere Spalte hinzuzufügen. 800 00:50:49,520 --> 00:50:51,600 Weh mir, wie, was kann ich tun? 801 00:50:51,600 --> 00:50:55,840 Es ist sehr schwer, das auf MySQL zu tun, aber wenn Sie so etwas wie Mongo haben 802 00:50:55,840 --> 00:50:57,840 es ist viel schöner. 803 00:50:57,840 --> 00:51:03,780 Die andere nette Sache über Mongo ist, dass Ihre Unterlagen sind eigentlich JavaScript-Objekte. 804 00:51:03,780 --> 00:51:10,110 Es gibt keine Art von Umwandlungsschritt, wo Sie brauchen, um diese Datenbankzeilen nehmen 805 00:51:10,110 --> 00:51:13,140 und sie in ein JavaScript-Objekt und senden Sie sie dann über den Draht. 806 00:51:13,140 --> 00:51:20,290 Ich denke, so was wird sich für die schnelle Web-Entwicklung in der Zukunft sehr, sehr nützlich. 807 00:51:20,290 --> 00:51:23,060 >> [Billy] Etwas, was ich möchte hinzufügen, die nur eine allgemeine Punkt ist, ist, dass 808 00:51:23,060 --> 00:51:26,580 nicht das Gefühl, Sie sollten alle Sprachen, die wir besprochen haben, gelernt haben 809 00:51:26,580 --> 00:51:28,580 von unserem Seminar. 810 00:51:28,580 --> 00:51:30,560 Offensichtlich ist der Punkt ist, um Ihnen eine Vorstellung davon, was da draußen geben, 811 00:51:30,560 --> 00:51:33,450 und wenn Sie durch eines der Dinge, die wir erwähnt haben fasziniert Sie können sie googeln 812 00:51:33,450 --> 00:51:35,830 und informieren Sie sich auf sie. 813 00:51:35,830 --> 00:51:38,750 Und wie ich bereits erwähnt, gibt es ein paar Seminare, die mit genau diesen Dingen umzugehen. 814 00:51:38,750 --> 00:51:41,660 Es gibt noch mehr Seminare, die ich nicht erwähnt habe, die wahrscheinlich in zu erhalten 815 00:51:41,660 --> 00:51:43,660 dieses Zeug auch. 816 00:51:43,660 --> 00:51:46,610 Die Idee ist, dass, wenn Sie an etwas arbeiten wollen, sind hier die Werkzeuge zur Verfügung. 817 00:51:46,610 --> 00:51:51,630 Fühlen Sie sich nicht überfordert, wenn Sie nicht wirklich sicher, was diese Tools machen genau sind, 818 00:51:51,630 --> 00:51:54,830 aber wissen, dass sie da draußen, und dass Sie breiten Gebrauch davon zu machen sind 819 00:51:54,830 --> 00:51:56,830 von Google. 820 00:51:56,830 --> 00:51:59,960 >> [Zuschauer] Welche Dinge müssen Sie tun, um sicherzustellen, dass Ihre Website machen müssen 821 00:51:59,960 --> 00:52:02,530 sieht gut aus auf mobilen Geräten? 822 00:52:02,530 --> 00:52:05,590 [Billy] Mobile Geräte sind ein wenig schwer. 823 00:52:05,590 --> 00:52:07,590 Es gibt zwei Möglichkeiten, wie Sie nähern kann. 824 00:52:07,590 --> 00:52:11,500 Die erste Möglichkeit ist, dass Sie tatsächlich eine mobile Website. 825 00:52:11,500 --> 00:52:14,660 Mit anderen Worten, eine Art von Erfassungs Beginn führen Sie 826 00:52:14,660 --> 00:52:18,830 wenn der Browser, der die Anfrage auf Ihrer Website, die entweder sagt 827 00:52:18,830 --> 00:52:25,240 diese Ansicht zurück - das ist die Ansicht für Desktop-oder Laptop-Browser sein wird - 828 00:52:25,240 --> 00:52:27,710 und das andere Ansicht für mobile Endgeräte. 829 00:52:27,710 --> 00:52:33,090 Das ist ein Ort, wo Ansichten sind wirklich schön, dass man so ziemlich die Swap- 830 00:52:33,090 --> 00:52:37,580 zwei aus und haben eine Schnittstelle, die wirklich schön funktioniert auf mobilen Geräten 831 00:52:37,580 --> 00:52:40,770 und haben eine ganz andere, die gut auf dem Browser-Geräten funktioniert. 832 00:52:40,770 --> 00:52:43,770 Das Problem dabei ist, dauert es eine lange Zeit, weil es bedeutet Codierung 833 00:52:43,770 --> 00:52:47,060 eine ganz andere Schnittstelle. 834 00:52:47,060 --> 00:52:49,720 Die andere Möglichkeit, dass Sie es tun können, ist - 835 00:52:49,720 --> 00:52:55,250 viele moderne Handys werden Webseiten an und versucht, sie als ein Browser machen würde, 836 00:52:55,250 --> 00:52:57,680 und sie tun ihr Bestes. 837 00:52:57,680 --> 00:53:04,340 Sie können Art versuchen, Licht auf die Menge der jQuery JavaScript Sie verwenden bleiben 838 00:53:04,340 --> 00:53:07,360 zu sein, wo die Dinge schief gehen kann ein wenig neigt. 839 00:53:07,360 --> 00:53:13,430 Dies ist eine Art der Art und Weise, die Sie verwenden, wenn Sie nicht so viel Zeit. 840 00:53:13,430 --> 00:53:18,540 Wenn Sie die Zeit, um auf eine mobile Schnittstelle arbeiten zu tun, das ist natürlich die beste Option. 841 00:53:18,540 --> 00:53:23,320 >> Ich denke, in der Regel für CS50-Projekte, Sie gehen zu wollen, um die eine oder andere wählen sind. 842 00:53:23,320 --> 00:53:27,990 In anderen Worten, um eine mobile Anwendung machen wollen oder Sie eine Desktop-Webseite machen möchte. 843 00:53:27,990 --> 00:53:32,200 Und diese Art der bestimmt, wo Sie mit dem gehen. 844 00:53:32,200 --> 00:53:35,360 Aber wenn du später erweitern möchten, wahrscheinlich die beste Wahl ist 845 00:53:35,360 --> 00:53:37,360 um eine weitere Schnittstelle für den anderen zu machen. 846 00:53:51,650 --> 00:53:56,340 Ich habe ein wenig Erfahrung in der Entwicklung von Wordpress-basierten Websites. 847 00:53:56,340 --> 00:53:58,670 Ich veranstaltete eine persönliche Webseite auf Wordpress für eine Weile. 848 00:53:58,670 --> 00:54:02,310 Diese Art von Frameworks kann schön wie sehr grundlegende Dinge. 849 00:54:02,310 --> 00:54:07,050 Oft werden Sie nur in eine Menge von Anpassbarkeit Probleme laufen aber. 850 00:54:07,050 --> 00:54:10,940 Sie wollen etwas suchen oder eine bestimmte Art und Weise sein, in einer bestimmten Weise zu haben, 851 00:54:10,940 --> 00:54:14,510 und man kann es einfach nicht, weil es in das System fest verdrahtet, dass 852 00:54:14,510 --> 00:54:17,480 das ist, wie Sie die Dinge, die ein bisschen ein Problem sein kann, zu tun haben. 853 00:54:17,480 --> 00:54:22,020 Seitdem habe ich Art war eher geneigt, mit Standorten von Grund auf zu arbeiten. 854 00:54:22,020 --> 00:54:26,840 Für Dinge wie Blog-Datenbanken und so was, es ist wirklich nicht so schwer, einen Rahmen zu bauen. 855 00:54:26,840 --> 00:54:29,970 Wenn Sie wirklich zu wenig Zeit haben, können Sie natürlich so etwas wie Wordpress 856 00:54:29,970 --> 00:54:33,120 oder so was für einen Blog. 857 00:54:33,120 --> 00:54:38,790 Die Arten der Dinge, dass Blogs speichern und tun nicht wirklich schwer genug, dass 858 00:54:38,790 --> 00:54:41,500 wenn Sie in einem dieser möglichen Dinge laufen, nur um dich vielleicht am besten 859 00:54:41,500 --> 00:54:43,500 machen eine Inhouse-Version. 860 00:54:43,500 --> 00:54:48,350 >> Ich denke, das ist es, so nochmals vielen Dank für Ihr Kommen. 861 00:54:48,350 --> 00:54:51,960 Wir genossen im Gespräch mit euch und hoffe, dass Sie ein paar Sachen gelernt. 862 00:54:51,960 --> 00:54:55,350 [Ben] Wir sind glücklich, reden - wir müssen gehen, aber wir sind glücklich, reden mehr außerhalb 863 00:54:55,350 --> 00:55:01,650 wenn Sie eine andere Frage. Nochmals vielen Dank. [Applaus] 864 00:55:03,750 --> 00:55:06,000 [CS50.TV]