[Powered by Google Translate] [Seminar] [Web-Entwicklung: Von der Idee zur Umsetzung] [Ben Kuhn] [Billy Janitsch] [Harvard University] [Dies ist CS50] [CS50.TV] [Billy] Hallo, ich bin Billy und das ist Ben. >> [Ben] Hallo. Wir werden über die Web-Entwicklung werden heute sprechen. [Webdev] [Billy Janitsch und Ben Kuhn] Ein bisschen über uns zuerst. Ben ist eine Art Back-End-Typ. Er macht die Dinge funktionieren. Und dann gehe ich in und machen sie schön. Ich bin weitgehend engagieren mit Front-End-Layout-Design Art von Sachen, und Ben, auf der anderen Seite, der weiß, was er tut, so arbeitet er an Back-End-Zeug. Gemeinsam haben wir ein paar Dinge gemacht. Zum Beispiel im letzten Jahr haben wir an Gimblium die ein Online-Spieleentwicklungsstudio ist. Das war unser letztes Projekt für die Klasse, und seitdem haben wir Harvard-Klasse gemacht haben Das ist ein Online-Rahmen für das Surfen und Einkaufen Kurse in Harvard. 

Wir werden mit dieser Idee für unsere Website zu starten. Wir werden Facebook zu machen, aber für Katzen. Bevor Sie tatsächlich dieser Website nicht machen diese Website, weil es nicht gut, aber wir werden es als Rahmen und durch den Prozess, wie wir diese Idee gehen und machen es zu einem echten Website, die wir verwenden können. Wir werden durch das Brechen der Website nach unten zu beginnen. Wie haben Sie in CS50 getan, Sie wollen über das, was sind die aktuellen Komponenten, die in dieser Website gehen denken. Im Grunde dreht es von einer Idee, die einfach irgendwie ein abstrakter Begriff ist in eine echte, greifbare Sache, die Sie machen können. Wir beginnen, indem wir einige Fragen. Was ist diese Website? Warum machen wir es? Was wird es für verwendet werden? So etwas. Im Fall von Facebook-Katze, wir wollen im Grunde eine Website, die Katzen soziale Netzwerk können miteinander. Die Idee ist, dass sie gegenseitig auf die Wände veröffentlichen können, sie können Kommentare hinzufügen, so etwas zu machen. Und das ist, wo wir in die Funktionskomponenten zu kommen. Wir haben jetzt diese Art von Rahmen - wir müssen Benutzerprofile wir haben Kommentare, und wir veröffentlichen können. Vielleicht eines Tages werden wir Vorlieben und so etwas Zustrom. Und wir Art, um diese Funktionen gehen in. priorisieren wollen Wir wollen sagen wie, okay, es ist wirklich wichtig, dass jeder ein Profil hat und dass jeder gegenseitig auf die Wände schreiben. Sekundär kommt, dass Kommentare wäre schön. Vielleicht später werden wir Gleichen Zustrom. Also, um eine Vorstellung von dem, was grundlegend für Ihr Projekt haben wollen und was ist eine Art allgemeiner Funktion, die später angewandt werden könnten. Sie wollen eine Art haben eine bestimmte Liste im Hinterkopf, aber das Projekt, das Sie mit zu beginnen ist nicht zu dem Projekt, die Sie mit zu beenden. In anderen Worten, die Dinge zu ändern, während Sie mit der Entwicklung der Website sind, und Sie, um Platz für das verlassen möchten. Ich werde es umdrehen, um Ben wer wird ein wenig über Struktur sprechen. 

[Ben] Ich werde mehr über die technische Seite der Web-Entwicklung zu sprechen. Lassen Sie uns nur über einige Grundlagen gehen zuerst. Wenn du tust, eine Web-App, die Hauptabteilung, die Sie gehen zu müssen, haben gerade ist Sie gehen ein paar Sachen los in der Client-Seite haben - das heißt, der Code, den Sie dauert Browser sind von der Website und der JavaScript-, HTML-, CSS-Zeug. Das ist alles auf der Client-Seite. Du wirst anderen Code, der auf der Server-Seite läuft haben die Länge hält alle Daten, die Leute schicken, um Sie, entscheidet, wer, was, so was zu geben. Dies ist nur einige Begriffe, so dass Sie Jungs sind alle mit dem, was wir reden vertraut. Jenseits dieser Abteilung ist es gut zu Ihrer Web-App in Sachen denken ein paar verschiedene Komponenten. Wenn du tust, Web-Entwicklung sind eines der Dinge, die Sie schon immer werden sollte, versuche zu tun ist, um die Komplexität zu reduzieren. Je komplexer der Code ist, desto mehr Chancen gibt es, um Fehler zu machen, desto schwieriger ist es zu einem späteren Zeitpunkt ändern. Also, wenn Sie in ein paar verschiedene Funktionsbereiche brechen Ihre App das wird - und Sie können die Art der Menge der Quer Bereich Kommunikation zu reduzieren - das wird helfen, eine Menge auf lange Sicht in Bezug auf die Verringerung Bugs. 

Um konkret zu sein, in der Regel Menschen Aufteilung einer Web-App in - diese Art von Schlagworten jetzt, aber sie sind immer noch nützlich. Vielleicht gehört, die Menschen über Modelle, Ansichten und Controller reden. Modelle sind die eigentlichen Daten, die Ihre Anwendung wird, zu beschäftigen. Zum Beispiel in Ihrem Facebook-Cat, Ihre Modelle wäre - Sie würden ein Modell für ähnliche Beiträge, und ein Modell für Benutzerprofile, solche Sachen. Ihre Ansichten sind, wie Sie diese Daten an die Benutzer zu präsentieren. Vielleicht ein Blick für den Blick auf einen einzelnen Beitrag und alle die Kommentare haben und eine andere Ansicht für Ihre Wand, die eine Liste aller Beiträge hat die an Sie gerichtet sind, und eine andere Ansicht für Ihre News-Feed - solche Sachen. Schließlich haben Sie die Controller, die im Grunde sind, wenn die Menschen senden Ihnen Beiträge und Sie machen Aktuelles zu den Back-End-System, Sie eine Reihe von Zähler erhöhen, und was auch immer. Das sind Ihre Steuerungen. 

Ich werde meist werden über Modelle reden. Ansichten sind technisch nicht so schwierig, und die Frage ist mehr mit der Gestaltung sie Controller gehen spezifisch auf was auch immer Sie entwerfen zu sein. Aber es gibt einige ziemlich allgemeine Techniken, die Sie verwenden können, , um Ihre Modelle schöner und einfacher, mit, dass ich denke, sind sehr hilfreich, zu arbeiten. Dies ist vor allem darüber nachdenken, wie mit Ihrem Web-Anwendungen Daten in einer netten Art und Weise umzugehen. Die Hauptthemen, mit Modellen sind, dass sie leben auf dem Client und dem Server und Sie haben, um herauszufinden, a) wie man sie erhält - alle einschlägigen diejenigen - vom Server auf den Client, und b) wie man sie synchron zu halten. Ihre Benutzer gehen zu wollen, um einige Updates zu machen. Sie gehen zu wollen, um neue Beiträge zu machen. Sie werden zu den Dingen und Sachen mögen, wenn Sie Leuten haben wollen. Das sind die wichtigsten technischen Herausforderungen im Umgang mit Modellen. Das erste, was Sie vorhaben, sich zu fragen zu wollen, sind es welche Art von Daten geht in diesem Modell und welche Art von Anfragen werden wir tun wollen - das heißt, wie werden wir bei den Modellen aus? Für Ihre Katze Facebook beispielsweise, Ihre Post wird einen Autor zugeordnet sein, einige Pinwand Text und ein Empfänger der Wandpfosten. Und dann möchten Sie vielleicht, dass in einer Reihe von verschiedenen Möglichkeiten abfragen. Sie wollen würde, um es durch die die Post schrieb aussehen, durch die, die vielleicht von der Post Datum veröffentlicht erhalten. Aber wenn du es nach Datum tun haben, dann um ein weiteres Feld zu Ihrem Beitrag hinzufügen, müssen Sie der, wenn es tatsächlich gebucht. Diese 2 Faktoren - welche Daten die Sie verwenden möchten und wie Sie es sehen wollen - Sie sollten über sie zuerst denken, weil sie voneinander abhängig sind, und es wird schwieriger zu sein, um sie später hinzufügen. 

Es gibt einige andere Überlegungen. Wenn Sie darüber, wie Sie mit den Modellen auf dem Server umgehen denken was Sie wollen, zu betrachten ist - Sie wollen im Grunde der Server so einfach wie möglich zu machen. Dinge tun, auf der Client-Seite ist in der Regel sehr viel schneller, wenn man es rein auf dem Client tun kann ohne jegliche Art von Netzwerkanfrage. Die Idee ist, möglichst viele der Fragen, wie Sie können auf dem Client zu tun. Das einzige Problem, dass ist, dass, wenn Sie verlangen alle Ihre Daten zu Beginn dann, das wird eine lange Zeit dauern. So ist die Idee, einen Mittelweg zwischen genügend Daten auf dem Client zu schlagen , dass Sie die meisten Ihrer Arbeit dort tun können, aber nicht einfach alles auf einmal holen so dass Sie wirklich lange Ladezeiten am Anfang. Zum Beispiel für Ihre Katze Daten würden Sie wahrscheinlich wollen, um ein paar der letzten Beiträge Wand zu holen. Sie würde nicht wollen, alle von ihnen zu holen, denn das könnte wieder ein paar Jahre vergehen. Aber Sie wollen nicht, um sie zu einer Zeit, holen ein denn das würde eine Menge von Netzwerk-Overhead einzuführen. 

Es ist oft sehr schwer - wenn man eine Datenbank laufen haben - es ist oft sehr schwer zu ändern, welche Daten Sie in ihm haben - das heißt, eine neue Datenbankspalte oder so etwas - so eine gute Strategie ist eigentlich nur um eine Menge von Daten in einem Text Blob zu halten - ein JSON blob - JSON als JavaScript Object Notation - Der Grund ist, die nützlich ist, weil dann kann man neue Eigenschaften hinzufügen , alle diese JSON Blobs ohne Ihre Datenbank. Der einzige Nachteil ist, dass, wenn Sie ein paar Felder dass Sie später hinzugefügt - wie in diesem JSON Blob versteckt - dann ist es schwieriger, sie in der Datenbank abzufragen. Zum Beispiel, wenn Sie später - wenn Sie Ihre Post-Modell hatte, die wir bereits besprochen nur mit dem Autor, den Empfänger und den Text - Sie könnte auch einen JSON-Blob und dann, wenn Sie später wollte ein Datumsfeld hinzufügen Sie möchten nicht auf Ihre Datenbank ändern. Sie könnten nur Daten hinzufügen, um alle Textfelder. Und dann wäre in der Lage, auf die auf der Client-Seite aus, aber Sie würden nicht in der Lage, sie auf der Server-Seite abfragen zu können weil es innerhalb dieser Text versteckt. 

Die andere Frage, die Sie wollen, zu denken ist, wie Ihr Client und Server gehen, um zu kommunizieren. Sie wollen in der Regel dies so einfach wie möglich zu halten. Sie können einfach nur wie ein get-me-dieser Datenanforderung, ein create-a-new-object Sache, und ein Update-an-alt-Objekt-Anfrage. Und das wäre alles andere URLs auf einem Server, die Sie - dass der Browser würde - Sie können AJAX-Anforderungen für alle diese verwenden und entweder erhalten oder senden Daten. Auch für unsere Katze Facebook beispielsweise, Sie konnte diese URL müssen eine individuelle Beitrag zu bekommen, und Sie würden eine URL für die Schaffung einer neuen Wandpfosten und vielleicht eine URL für das Hochladen von deinem Profilbild, solche Sachen. Aber nochmals, dass vor, holen aus Ihren Daten, so dass Sie nicht zu halten macht Netzwerkanforderungen. Aus diesem Grund können Sie nicht wollen, dass die einzelnen get-Anforderung für einen einzigen Beitrag zu haben, und stattdessen würden Sie wollen einfach nur ein get-Anforderung für die gesamte Wand. Und dann, wenn Sie versuchen, eine Balance zu schlagen, weil - dies wird sich auch auf Ihre Anwendung ab. Weil, wenn Sie erwarten, dass die Menschen nur 10 oder 20 Wandpfosten das wird in Ordnung sein. Aber wenn Sie erwarten, sie werden Tausende haben, dann, dass der Antrag würde zu lange dauern, und so möchten Sie vielleicht, um eine zu bekommen-alle-Beiträge seit-Parameter hinzuzufügen. 

Für alle diese sind Sie wahrscheinlich, um Ihre Daten im JSON synchronisieren wollen - JavaScript Object Notation. So ziemlich jeder Sprache befasst sich mit JSON sehr gut. JQuery hat dieses schöne getJSON Funktion, die all die harte Arbeit für Sie tun wird. Und auf PHP gibt es auch sehr schön JSON Kommunikationsfunktionen. Also, das ist wahrscheinlich das beste Format für das Senden Sie Ihre Modelle hin und her. 

Als ein Beispiel für das, was wir bisher gesprochen haben, hier ist ein Beispiel für Ihre Katze Fluss Facebook-Anwendung. Es beginnt mit dem Browser Anfordern des Basis Website-URL. Der Server würde wahrscheinlich über statische HTML-und JavaScript-und CSS zu schicken. Es ist normalerweise am besten, keine Wiedergabe auf dem Server zu tun. Sie wollen wahrscheinlich nicht zu - was der Server nicht dort tun wird die Liste der Wand Beiträge und ein bisschen HTML für jeden und Senden, dass über. Es ist normalerweise am besten, dass auf der Client-Seite zu tun, weil sonst jedes Mal, wenn Sie wieder etwas zeichnen wollen, müssen Sie, um eine Server-Anfrage zu machen. Und das sehr schnell gibt Ihnen eine Menge Overhead. Es ist normalerweise am besten, nur um Schiff sendet nach unten statischen HTML- und dann JavaScript und CSS, die das Rendering auf der Client-Seite tun. Sobald das Zeug kommt, dann können Sie haben - in JavaScript - Sie Wünsche für die Wand Daten tun können und solche Sachen, und nach, dass der Server im Grunde nur tun, Datenbankabfragen und Berechtigungen überprüfen. Das einzig Wichtige ist, dass es nicht senden kann über einige andere Benutzer Wand Beiträge dass Sie nicht sehen darf. Es kann im Grunde eine sehr dünne Schicht Zugang zu Ihrer Datenbank sein, und dann alle die, die die Daten - alle Ansichten und Sachen - diese können in Ihrem Browser passieren, und dann, wenn Sie einen Beitrag oder etwas machen wollen Sie senden eine weitere Anforderung. 

Es gibt auch einige ausgefallene Sachen, die man oben auf die dies tun können. In Bezug auf spezifische technische Informationen Entwicklung im Klar JavaScript kann ein wenig schmerzhaft sein, so gibt es einige Bibliotheken und Tools, die Ihnen dabei helfen, eine Menge. Ich denke, Sie alle haben wahrscheinlich über jQuery gehört das tun HTML-Rendering macht und Manipulation viel einfacher - haben viel Phantasie Funktionen zur Ein-und Ausblenden, und tut zippy Animationen. Es gibt auch diese Bibliothek namens Underscore.js. Es hat eine Menge von nützlichen Hilfsfunktionen, Sachen, die man erwarten würde JavaScript zu haben, dass es wirklich doesnt - Dinge wie Mischen eines Arrays Entfernen von Duplikaten aus einer Liste oder Abflachung eine Liste von Listen. Dies ist nur eine kleine Code-Probe. Underscore hat eine Tonne dieser nette Funktionen, die Sie wünschen, Sie würden alle die Zeit haben. 

Und dann gibt es ein weitere Bibliothek, die ich möchte ein wenig von der Zeit ausgeben genannt, weil Backbone.js Backbone wirklich hilft Ihnen mit den Modellen auf der Client-Seite umgehen und eine Menge von der Verwirrung, die sie verursachen kann. Backbone bietet Ihnen dieses Konzept der Modelle und Sammlungen in JavaScript, die im Grunde genau wie JavaScript-Objekte in JavaScript-Arrays, aber sie haben Ereignisse, wenn Sie ihre Eigenschaften ändern. Genau wie in JavaScript können Sie ein Ereignis, wenn eine Schaltfläche geklickt wird oder etwas diese Backbone-Modelle und Sammlungen Backbone werden Dinge wie ausgestrahlt dass, wenn sie sich ändern. Das bedeutet, dass man nur so etwas wie dieses Code-Snippet hier schreiben - das sagt, wenn Sie etwas zu der Beiträge Array, das Sie die ganze Wand neu zu zeichnen hinzuzufügen. Und das sagen würde, wenn Anzahl von Leuten ein Beitrag ändert, Sie den Benutzer, dass jemand ihren Beitrag gefallen informieren. Oder wenn einer Eigenschaft eines Post ändert Sie die Post neu zu zeichnen. Sachen wie, dass Sie Tonnen von Komplexität, da sonst sparen wenn Sie nicht jedes Mal dann im Code, die Sie ändern müssen einige Rahmenbedingungen wie diese etwas über eine Post, müssten Sie sich erinnern, um alle Funktionen aufrufen machen und solche Sachen, und wenn Sie etwas Neues, das passiert hinzufügen wollte jedes Mal, wenn Sie einen Beitrag geändert müssten Sie durch jeden Ort in Ihrem gehen Code, den Sie einen Beitrag geändert und hinzufügen, dass neue Sache. Ein Rahmen, wie dies eine Menge, die zwischen Schichtkommunikations entfernen das macht den Code komplex und schwer zu pflegen. 

Es ist ein wenig über die Ansichten auch. Ich werde die meisten dieser Billy verlassen, weil sie technisch nicht sehr schwierig. Verwenden Sie jQuery für Ihre Ansichten. Es ist praktisch wie eine Notwendigkeit an dieser Stelle. Es macht einfach alles so viel einfacher. Es gibt eine Menge von Bibliotheken. Wenn Sie User-Interface-Elemente kompliziert haben, wenn Sie eine Auto-Vervollständigen-Sache wollen oder wie eine dieser Phantasie Multi-Selektoren - wenn Sie so etwas wollen, sollten Sie wahrscheinlich nur um zu suchen und Sie haben eine gute Bibliothek, die das tun, was Sie wollen, zu finden. Billy wird über die tatsächlich schwierigsten Teile der Blick mehr erklären. Auch als eine Randnotiz, hat einige Backbone-Funktionalität für Ansichten kommunizieren schön mit Modellen - Blick auf die Dokumentation für alle dieser Bibliotheken, eigentlich. Gerade bei den docs. Sie sind sehr gut geschrieben und leicht zu folgen. In der Regel können Sie ziemlich genau Google, wenn Sie Probleme haben. Es gibt viele Menschen mit ihnen. Ich denke, das ist wie ein letzter Hinweis. 

Es gibt auch einige fortgeschrittene Dinge, die Sie tun können wenn Sie schauen, Ihre Webanwendung zusätzliche genial zu machen. Sie können tun, - die neue HTML5-Spezifikation hat eine Menge Phantasie Dinge, die Sie tun können. Lokale Speicherung - was ist, können Daten im Browser speichern - anstatt zurück zu gehen und lesen Sie den Server für alles, können Sie einige der auf dem Client zu halten und dass selbst lässt die Menschen - in einigen Fällen kann es sogar lassen Sie die Webseite offline zu verwenden. Es gibt dieses Ding namens WebSockets, die eine andere Art der Netzwerk-Kommunikation sind wo Sie statt nur ein Antrag zu stellen, Antwort bekommen und Sie fertig sind, Sie halten eine Verbindung zu dem Server und so können Sie Dinge wie tun können Echtzeit-Updates. Also, wenn Sie versuchen, eine Chat-Anwendung zu machen, verwenden Sie WebSockets hin und her zu kommunizieren, so dass Sie nicht zu halten Beantragung, "Oh, Server, hat jemand einen Chat senden Sie mir?" alle 10 Sekunden oder so etwas. Es gibt auch eine interessante HTML5-Funktion, wo man es so aussehen die URL der Seite, verändert sich, ohne jemals tatsächlich neu laden. Sie können wieder verwenden und Vorwärts, ohne dabei eine Reihe von Netzwerkanforderungen. Sowas ist in Bezug auf die es schnelle wirklich nützlich, sondern auch arbeiten wie ein Web-App sollte. 

Es gibt auch dieses Ding namens Coffee. Coffee ist eine andere Sprache, eigentlich, kompiliert, dass bis auf JavaScript. Sie würden alle Ihre Code in Coffeescript zu schreiben, und dann können Sie diese Compiler laufen, und es spuckt eine JavaScript-Datei, die Sie in Ihre Webseite enthalten. Der Grund, dass Coffee ist schön ist, weil es wird eine Menge des RID seltsame Fälle, die JavaScript hat, wo gleich Gleichen und gleich equals verschiedene Dinge tun, oder wie - es hat schönere Syntax für den Umgang mit Arrays und Funktionen. Dies ist ein kleiner Ausschnitt von Coffee, die eine Liste aller Plätze produziert von 10 ^ 2-1 ^ 2 in umgekehrter Reihenfolge. Wie Sie sehen können, Coffee oft können Sie in 1 Zeile zum Ausdruck bringen was 5 Zeilen JavaScript nehmen würde. Es kann die Dinge viel einfacher. Es ist ein wenig neue Syntax, um zunächst zu lernen, aber es wird definitiv um Sie produktiver auf lange Sicht. 

Sie können auch andere Sprachen auf dem Server als PHP - Sprachen wie Ruby, Python, oder es gibt sogar ein Projekt namens node.js dass wird Ihnen JavaScript auf dem Server verwenden. Persönlich bin ich wirklich, wirklich hasse PHP. Ich weiß nur nicht arbeiten gerne mit ihm. Wenn auch Sie denken, dass es eine schreckliche cluge einer Sprache, dann können Sie eine von diesen stattdessen verwenden. Im Allgemeinen, wenn Sie etwas tun wollen, und Sie wissen nicht wirklich, wie Sie es tun würden, nur die Suche im Internet. Es gibt Tonnen und Tonnen von Ressourcen vor allem auf - Stackoverflow ist ein großer. Es ist diese Website, wo Programmierer gegenseitig Fragen. Sie könnten in es, wenn Sie Probleme auf CS50 Problem Sets wurden ausgeführt haben. Und es gibt Tonnen von Bibliotheken für ziemlich viel zu tun, was Sie wollen würde. Wenn Sie etwas tun wollen, und Sie wissen nicht, wie es zu tun, nicht davon ausgehen, dass es unmöglich ist. Schauen Sie sich um und finden Sie vielleicht einige gute Ressourcen zu finden. 

Als allgemeine einpacken, Imbissbuden sind die wichtigsten Dinge einfach halten. Je komplexer der Code am Anfang und je mehr Sie versuchen und tun, fancy stuff, desto länger wird es dauern, bis tatsächlich etwas bekommen Funktions und desto schwieriger wird es sein, später ändern. Also, Dinge tun, die ersten dumm, ganz einfach. Zu gehen zusammen mit dem, keine Angst wegwerfen alten Code oder Reinigungs es eine Menge sein. Im Allgemeinen, wenn Sie tatsächlich etwas arbeiten, es ist viel einfacher zu denken, als wenn man in der Anfangsphase sind immer noch wie stelle ich das alles zusammen. Es ist am besten, um die dümmste mögliche Design, das funktioniert machen und dann iterativ zu verbessern, als zu versuchen, alles gleich beim ersten Mal zu bekommen. In Bezug auf die Client-Server-Division, versuchen Sie und halten Sie Ihren Server sehr einfach - nur eine Datenbank und einige Authentifizierung und keine harte Arbeit, es zu tun. Haben Sie alle Ihre komplizierte Sachen auf der Client-Seite im Browser in JavaScript so viel wie Sie können. Schauen Sie sich nach Bibliotheken, die Ihr Leben besser zu machen. Immer besser, Code zu verwenden, dass jemand anderes geschrieben wenn Sie - und nicht sie selbst schreiben. Es gibt eine Menge Sachen im Internet. Google ist dein bester Freund. Google ist der Programmierer besten Freund. Ja, auf jeden Fall haben Sie keine Angst, sich umzusehen für Sachen sein. Gut. Und über Billy. 

[Billy] Eigentlich, bevor ich mit einigen Sachen Design, hat jemand irgendwelche Fragen für Ben über alles, was er gesprochen? Okay, gut. Auch hier lassen Sie uns wissen, wenn etwas nicht klar ist, oder wenn Sie möchten, dass wir über etwas ein bisschen mehr gehen. Ich werde ein wenig zurücktreten und sprechen über die grund Teile des Designs. Ben erwähnt das Modell genannt - sorry, das Modell Controller Sichtsystem Das ist sozusagen der technische Aspekt, so werde ich an Ansichten speziell aussehen, und ich werde mit, wie Sie eine Ansicht, die schön aussieht entwerfen würde starten. Hier ist irgendwie eine wirklich grundlegende Vorlage für unsere Katze Facebook. Ich denke, es gibt einige Grundlagen in der modernen UI-Design , die es wert Aufnehmen sind. Sie können feststellen, gibt es eine viel Weißraum auf der ganzen Seite viel Platz für die Dinge. Fühlen Sie sich nicht wie Sie die Dinge in eine Seite drängeln müssen. Sie verlassen wollen viel Raum offen, und wenn man zu fast jeder modernen Website zu gehen Sie werden sehen, es ist überall weiß. Es ist weiß in Orten, die Sie nicht erwarten würde. Sie haben diese Farbpalette, und es ist ratsam zu Beginn um eine Farbpalette, dass Sie gehen, mit zu arbeiten und zu entwickeln, sind zu wählen. Sie auch - es hilft, eine Schrift zu wählen, und dass, wie Sie sind Art von Arbeit mit diese konkreten Grundlagen der Gestaltung. Sie haben Ihre Art, haben Sie Ihre Farben, und dann können Sie Art passen alles andere in nach Bedarf. Also, wie gesagt, mit Ihrem Farbschema, um die mutigere Farben Ihrer Farbschema verwenden wollen sparsam. Kopfzeilen sind nett. Die Tasten sind schön, wirklich große, auffällige Farben haben. Aber im Allgemeinen, wenn Sie eine Website, die Farben überall hat, haben, alle Sie starrte in das Gesicht, es sieht einfach überladen, und es ist nicht gut. Sie wollen in der Regel verwenden hellen Farben. Versuchen Sie erneut, wählen Sie eine ziemlich kohärente Farbschema. Sie können diese kleinen Spritzer von viel Farbe haben - das aussehen kann ziemlich schön, aber man muss sie ziemlich sparsam verwenden möchten. 

Wie gesagt, Sie wollen minimal zu sein. Weniger ist fast immer mehr. Wenn Sie etwas zeigen oder nicht zeigen etwas, und Sie sich irgendwie nicht sicher, ob es sollte standardmäßig sein können - wahrscheinlich sind Sie am besten weg und ließen sie aus. Sie können es immer in später hinzufügen. Ja, die Dinge einfach halten. Aber am wichtigsten ist, um mehrere Entwürfe betrachten wollen. Denke nicht, dass wenn Sie eine Website zu machen, es in Ihrem Kopf, die Sie zu gehen haben Sie machen den Standort in einer bestimmten Art und Weise, und es wird genau so aussehen. Es geht um den blauen Kopfzeile am oberen und den blauen Seitenleiste haben und dann die gelbe Sub-Header Sache. Sie möchten mehrere Vorlagen machen. Sie können entweder - wenn Sie gut mit Photo Shop sind, können Sie, dass öffnen und Art Design einer Website, wie Sie möchten es zu suchen. Wenn nicht, können Sie einfach Stift und Papier, aber kratzen bis mehrere Designs. Sie wollen im Grunde eine Einrichtung, wo man viele verschiedene Designs, und wenn man landet Arbeits, dann ist das großartig. Wenn man landet scheitern, dann haben Sie immer noch einen zu drehen. In der Regel nicht das Gefühl, wie Sie gezwungen werden sollte, zu, was Design, das Sie zunächst entscheiden. Motive sind sehr variabel, und ein Teil der Bedeutung des Modells Controller View-System ist, dass man in und aus verschiedenen Ansichten, die Sie wollen, tauschen kann. Sie können die Daten wiegen einen Weg, und dann entscheiden, oh, tatsächlich, das ist nicht so gut funktionieren. Ich denke, es ist eine Art zu kompliziert oder es ist ein Teil hier, die nicht wirklich funktioniert hat, so bin ich gerade dabei, diese Ansicht und Swap in eine völlig neue völlig aufzugeben. Wir können immer noch die alten Modelle und die alten Controller. Wir können alles auf dem Server und Client, wie wir vor tun würde. Aber die eigentliche Welle der Daten angezeigt wird etwas anders sein. 

Soweit tatsächlich die Umsetzung der Entwurf, den Sie möchten, Sobald Sie ein paar Entwürfe skizziert auf Papier oder auf Photo Shop oder was auch immer, gibt es eine Reihe von Tools, die Ihnen zur Verfügung gestellt werden. Die erste Sie nicht sehr vertraut sind, mit dem Ihr HTML, PHP, oder was auch immer Sprache Sie verwenden nur die statischen Seiten auf Ihrer Webseite Codes. Sie haben viel mit HTML, die Art der gibt Ihnen diese Tags arbeitete dass Sie Dinge kannst, und im Grunde ist es eine Art der Organisation Ihrer Inhalte. Zum Beispiel die Kopfzeile haben Sie da oben, so dass Sie gehen, um ein Header-Tag haben sind, und es geht um einen Text, der in der es wahrscheinlich ist, in einem anderen Tag sein müssen. Dann eine Sidebar haben Sie vielleicht mit einigen verschiedenen Links, und die sind in allen Tags sein werde. Also, im Grunde HTML an seinem Herzen ist eine Möglichkeit, die Aufteilung der Seite, wie Sie schließlich wollen sie formatieren. Also noch einmal, haben Sie gesehen, dass. Sie sind ziemlich zufrieden mit der Arbeit mit ihm jetzt gegeben, dass Sie den letzten pset hoffentlich getan, so daß kein Problem sein sollte. 

Dann haben Sie CSS, die im Grunde übernimmt alle der Design-statischen Aspekte. Es würde alle Farben, die alle die Positionierung der verschiedenen Elemente zu behandeln, wo sie gehen in Bezug zueinander, wie groß sie sind, die verschiedenen Arten von Positionierungen, die Sie haben möchten - in anderen Worten, Sie können Dinge behoben haben, so dass, wenn Sie nach unten scrollen, sie bleiben, oder man kann die Dinge im Verhältnis zu anderen Elementen haben. Alle diese Art von Zeug ist in CSS. Darüber hinaus können Sie verschiedene Dekorationen tun können, können Sie die Textfarben zu haben, Text-Effekte, all das Zeug. Ben hat ein wirklich gutes Seminar zu diesem letzten Wochenende, und so würde ich auf jeden Fall überprüfen, dass sich, wenn Sie planen, mit CSS tun einige ausgefallene Sachen. CSS3 ist eigentlich die neueste Version von CSS, und alle Arten von wirklich schöne Dinge tun. Es kann Steigungen zu tun, man kann schön, abgerundete Ecken haben, Sie alle möglichen Sachen tun können , um Ihre Website aussehen modern und schick. 

Das nächste Werkzeug ist JavaScript und jQuery, die Ben sprachen ein wenig über, aber ich werde ein wenig weiter in zu erhalten. JavaScript als Sie mit ihm ein wenig in der Vorlesung gearbeitet haben, oder zumindest gesehen, ist irgendwie eine Möglichkeit, Dinge tun, dynamisch in HTML. HTML, wie Sie wissen, ist statisch, so, wenn Sie HTML haben, können Sie es nicht ändern. Aber JavaScript in gewisser Weise ist ein Weg, um HTML zu modifizieren. So können Sie das tun, und das ist toll, aber JavaScript ist wirklich ein Schmerz zu arbeiten. Es ist so lang und stumpf und selbst die einfachsten Dinge zu tun erfordert viel Zeilen JavaScript. Also, das ist im Grunde ein jQuery-Bibliothek für JavaScript, das all das vereinfacht. Er sagt, okay, wenn Sie ein quadratisches Feld von links kommen haben wollen und verblassen in die Seite, so dass es in der Mitte, in JavaScript, die nehmen würde - Ich weiß nicht, hundert Zeilen zu tun, und es wäre ein Schmerz sein, und Sie davon zu hassen alles über Web-Programmierung kommen. JQuery haben Sie grundsätzlich das Element-Punkt-Fade-in oder so ähnlich. Also, sehr, sehr einfache Funktionen, mit denen Sie alle Arten von coole Animationen tun und diese Art der Sache. Die andere Sache, diese zwei sind wirklich gut für ist gerade dabei dynamische Dinge mit der Website. So, und nicht nur mit HTML-Seite -, die einige Daten tatsächlich zeigt aber nicht etwas tun - JavaScript und jQuery lassen Sie Schaltflächen, die Sie anklicken können, haben, und Sie können Elemente und wieder um sie ziehen und sortieren sie, und haben neue Elemente hinzugefügt oder entfernt. Sie können Add-Löschen, diese Art der Sache. Also, macht jQuery Tonnen coole Sachen. Und Vipul ist eigentlich ein Seminar auf ihm heute, glaube ich, bei 5-Uhr-, so, wenn Sie bleiben, um für die lange, würde das - 5 oder 4? Four. Entschuldigung. Es ist eigentlich direkt nach diesem, so würde ich empfehlen, kleben um für sie, wenn du kannst. JQuery ist super, super nützlich, und Sie in der Lage, um viele wirklich schöne Dinge mit ihm zu tun für so ziemlich jedem Web-Entwicklungsprojekt. 

Jetzt werde ich in eine Art Auszeichnung zu bekommen. Ich habe im Grunde über Benutzerschnittstelle zu sprechen. Die Benutzerschnittstelle ist nur das Design der Website. Aber es gibt noch eine andere Art von Konzept, das User Experience ist. Die beiden sind sehr unterschiedlich. Interface ist auf jeden Fall ein Teil der Erfahrung. In anderen Worten, wenn Sie auf eine Website zu gehen, schauen Sie auf die Schnittstelle. Das ist ein Teil davon, wie Sie die Website zu erfahren. Aber User Experience ist mehr. User Experience ist über das, was den Eindruck, dass der Benutzer von Ihrer Website bekommt, ist. Also, natürlich, ist die Schnittstelle ein Teil davon. Und es ist auf jeden Fall ein notwendiger Bestandteil, aber es ist nicht ausreichend. In anderen Worten, wenn Sie eine schöne Schnittstelle haben, und es ist hübsch und bunt und das alles, das ist toll, aber wenn der Benutzer auf Ihre Website geht, sieht eine hübsche Layout und es ist von verwirrt alles, hat keine Ahnung, wie man etwas tun, dann offensichtlich haben Sie eine wirklich gemacht haben schlechte Website. Das ist eine Art, wo Benutzererfahrung kommt in. Ich werde ein bisschen über UX Design sprechen - UX ist die Abkürzung für User Experience - und eine Art, wie Sie sicherstellen können, dass Sie eine gute Benutzererfahrung. Der erste Punkt ist, dass Sie ein Website-Design, wo ein Benutzer etwas tun kann, dass dass Benutzer möglicherweise will. Aber wenn der Benutzer nicht herausfinden können, wie man diese Dinge zu tun - in anderen Worten, wenn der Benutzer nicht eine gute Idee, wenn sie auf Ihre Website von zu gehen, "Oh, wenn ich mein Profil aktualisieren, klicken Sie auf diese Schaltfläche, ich, oder, wenn ich Post auf jemand die Wand, dann habe ich um ihre Wand gehen und auf einer kleinen Box. " Wenn der Benutzer nicht wissen, dann haben Sie effektiv nicht wirklich diese Funktionalität korrekt umgesetzt. Teil der Implementierung einer Funktionalität ist, dass die Benutzer tatsächlich in der Lage, es zu benutzen. Und es könnte frustrierend sein - Sie könnten eine Website zu machen, und alle Arten von tun können wunderbare Dinge, aber dann müssen die Menschen zu testen und zu sagen: "Es kann nicht tun. Warum kann es nicht tun? "Und Sie werden wieder zu ihnen sagen: "Na ja, es kann. Man muss nur in die siebte Dropdown-Menü auf dieser obskuren gehen Seite, die nur durch einen Link in der unteren rechten Ecke "oder so gefunden. Offensichtlich wollen Sie nicht, dass. Sie wollen es Ihren Benutzern, was sie tun sollen sein, und es sollte einfach und intuitiv für sie sein. 

Eine andere Sache, die Sie versuchen wollen, ist, wenn jemand geht, um Ihre Website zu gehen und 9 von 10 mal tun Schaltung A, und 1 von 10 mal tun Aktion B, Sie wahrscheinlich wollen, um ihre Erfahrungen zu Maßnahmen konzentrieren A. Mit anderen Worten, um es sehr, sehr klar, wie A. möchtest du A sollte sein Front-und Center - auf die Website gehen, sehen sie, oh, ist es recht. Während B Sie wollen offensichtlich klar zu sein, aber man kann es ein bisschen mehr verlassen im Hintergrund. David gibt ein gutes Beispiel dafür in der Vorlesung, das ist der Boston-T-System. Wenn Sie zu den Boston T und Sie ein Ticket kaufen wollen, Sie müssen in fünf Menüs zu erhalten, bevor Sie tatsächlich ein Ticket kaufen für eine $ 2, $ 2,50 Wert, der ist, wie viel es braucht, um die U-Bahn fahren in eine Richtung. Das ist ein Problem, weil die meisten Menschen, die fahren die U-Bahn sind wahrscheinlich wollen einfach nur, um an einen Ort zu gehen, kaufen Sie ihr Ticket, erhalten auf sofort. Es macht keinen Sinn, dass sie durch viele verschiedene Menüs gehen zu erhalten. Eine bessere Benutzererfahrung wäre eine Schnelltaste auf der ersten Seite sein dass, nur sagt:, kaufen ein One-Way-Ticket ", und das wäre legte in alle Standard- Standardwerte, und dann, wenn jemand eine andere als die Ticket kaufen will, sie immer noch, natürlich, haben die Option,, aber Sie haben für optimierte der gemeinsame Einsatz-Fall, der wirklich wichtig ist. Sie können Beispiele dafür auf Facebook sehen, oder? Wenn man auf Facebook und Sie einen Status veröffentlichen möchten, es ist ganz oben auf das ist, was Sie häufig tun will. Sobald Sie die Seite eingeben, können Sie die häufigsten Dinge tun können, die Sie tun möchten. Wenn Sie etwas kompliziertere Dinge wie tun wollen, sagen, ich möchte mit meinem Freund Wand gehen und ein Bild posten auf sie - was ich will oft zu tun, aber nicht so oft wie Status-Updates zu veröffentlichen - so dass in diesem Fall habe ich ihren Namen geben in das Feld an der Spitze, klicken Sie auf ihrem Profil, und dann, noch, ganz oben ist es dort, sobald ich zu ihrem Profil bekommen. Auch hier habe ich in der Priorität für die häufigsten Anwendungsfälle-optimiert. 

Eine weitere wichtige Sache ist, dass oft Leute Art versuchen, dies zu umgehen sagen, okay, also habe ich die Website gemacht und die Leute finden es verwirrend, und das ist ein Problem, oder? Natürlich glaube ich nicht, dass die Leute durch den Inhalt meiner Seite verwechselt werden. Aber die Art und Weise zu lösen, dass ist nicht zu haben, etwas zu sagen, Pop-up, hey, ich werde Ihnen zeigen, wie Sie diese Seite zu nutzen. Schritt 1 - Klicken Sie auf diese Taste. Schritt 2 - finden Sie hier. Klar, das ist ein Weg, um ihn herum - es ist ein Weg, dass man die Leute sagen, was zu tun, aber es ist wirklich nicht der optimale Weg. Wenn ich auf eine Website, und plötzlich bin ich mit diesem Tutorial, das sagt mir bombardiert was zu tun und wohin sie gehen, und das alles, das ist nicht lustig für mich. Es ist nicht eine gute Erfahrung für mich. Es ist eine Art Schmerz. Ich möchte einfach angefangen zu Sachen. Die Leute werden aus ihren Dialogfeld zu schließen, oder aus dem Tutorial zu bekommen, nicht wissen, was zu tun, und dann beschweren, weil Sie sie nicht gesagt haben, was zu tun ist. Der Weg, dies zu lösen, ist nicht, indem sie jede Art von Tutorial oder Richtungen - so etwas. So viel wie Sie es vermeiden können, die Sie wirklich, um den Benutzer zu zeigen, was zu tun nur durch die Art, wie die Website ist übersichtlich. In anderen Worten, wenn ich zu Facebook ohne Anmeldung, das erste, was ich auf der Hauptseite zu sehen - es ist ein wenig Login-Feld. Also, duh. Ich habe eingeloggt Es ist recht. Während, wenn ich bei Facebook, und ich musste ein wenig Link unten klicken dass die "einloggen" und der Rest der Seite war nur eine Art von Bild oder so etwas, Ich würde nicht wirklich wissen, was zu tun ist, oder? Ich würde verwechselt werden. So könnte es mir zu sagen, da runter und klicken Sie auf die Schaltfläche, um sich anzumelden, oder log in-Taste kann direkt an der Spitze, wo ich bin, es zu sehen. Sie möchten werden, den Benutzer immer was zu tun, die, und dass die sich aus der Seite selbst sein sollten. 

Wenn Sie über Entwürfe denken und Spott bis verschiedene Möglichkeiten, Ihre Website ausdrücken, die Sie wirklich über das, was die Nutzer zu denken, wollen gehen tun und wie können Sie ihnen zeigen, was zu tun ist. Eine letzte Sache ist das Testen ist wirklich, wirklich wichtig. Es ist toll, jemanden zu bekommen - bekommen einen Freund, jemanden Sie nicht einmal wissen - , der noch nie zuvor gesehen die Website, um die Website zu nutzen. Weil du auf der Website arbeiten seit Stunden, habe man es gestarrt, und Sie wissen genau, was zu tun offensichtlich wollen Sie testen das sind Dinge, die Sie haben und dass Sie Arbeit kennen gearbeitet. Aber wenn jemand anders kommt und nutzt die Website, die noch nie benutzt hat, bevor es, das ist ein einmaliges Erlebnis, weil Sie jemand, der keine Vorkenntnisse hat, haben von der Website, die in sie, so dass sie gehen, um effektiv keine Ahnung, was zu tun oder welche Art von Anwendungsfällen für sie vorhanden sind. Das ist toll. Das ist einzigartig, denn sie sind im Wesentlichen eine Person mit einem Rohling für einen Geist. Sie kann Ihnen sagen, wenn etwas verwirrend oder unklar. Dort erhalten Sie eine Vorstellung davon, genau das, was die Benutzerfreundlichkeit Ihrer Website ist. Es kann sehr schwer sein, zu sagen, dass Sie sich so auf jeden Fall möchte ich Sie ermutigen, wie Sie entwickeln Ihre Projekte - wenn Sie dabei Web-basierte Projekte sind - zu Menschen, die Seite so früh wie möglich eine Art von funktionsfähige Demo haben zu bekommen. 

Jetzt werde ich ein wenig über, wie eine Web-Entwicklungsprojekt zu sprechen. Wir haben über, wie Sie das technische Backend-Seite zu tun gegangen, wie Sie eine wirklich gute Website-Design, und das ist toll, wenn man selbst gerade arbeiten, aber - auch wenn Sie selbst arbeiten und vor allem, wenn Sie in einem Team arbeiten, Projektmanagement wird ein grosses Thema. Sie haben über die Art von Projektmanagement in verschiedenen Formen gehört seit Grundschule, wenn Sie wurden Gruppenarbeit erzählt. Sie müssen zusammenarbeiten, kommunizieren, das alles. Das gilt noch hier, aber es gibt einige einzigartigen Umstände mit Informatik, die Sie wollen, bewusst sein, und Sie sicherstellen, dass Sie gut behandeln soll. Ich werde zuerst ein wenig über das Team, das Sie in. sprechen Es ist sehr wichtig, die richtige Größe eines Teams zu werden, zur Arbeit holen, und in Ihrem letzten Projekt, das ich denke, dass Sie die Möglichkeit haben zu wählen zwischen 1 und 4 Personen, ob ich richtig bin. Sie wollen sicherstellen, dass Sie nicht nur die Wahl der Zahl der Menschen dass Sie mit, weil sie sind deine Freunde arbeiten wollen. Sie wollen ein Team, das ist eine gute Größe wählen und das wird den Job zu erledigen. Es ist ein Trade-off in die mehr Menschen gegenüber weniger Leute. Wenn Sie mehr Menschen haben, kann natürlich mehr Arbeit getan werden weil Sie viele Leute, viel Code, viele Ideen haben und das ist alles super. Aber es erfordert auch viel mehr Management und viel mehr Kommunikation. In anderen Worten, wenn Sie 4 Personen arbeiten am selben Projekt und sie sind alle die Bearbeitung der gleichen Code, mehr oder weniger alle Art von Bedürfnis zu wissen, was los ist, damit es erfordert, dass Sie - wenn Sie einige neue Funktion hinzufügen, die Sie Art haben den Leuten zu sagen - ich bin das Hinzufügen dieser, Ich ändere dies in dieser Weise - vor allem, wenn Sie in die wirklich tief Zeug wie die Modelle und den Controllern, die tatsächlich gehen zu beeinflussen, wie die Website funktioniert. Das ganze Team muss sich dessen bewusst sein, so müssen Sie sicherstellen, dass Sie nicht zu groß wählen ein Team, das geht hart zu sein , dass die Kommunikation zu machen. Sie wollen ja auch nicht klein genug, um ein Team, das Sie gehen nicht wählen in der Lage sein, zu kommunizieren, weil es nur Sie. 

Eine andere Sache zu prüfen, ist die Balance von Fähigkeiten, wo Menschen sind. Es ist toll, wenn Sie alle wirklich gute Programmierer. Aber wenn Sie alle Back-End-Leute sind, dann wird Ihre Website wird nicht sehr gut aussehen weil Sie diese große Datenbank, und es macht super-schnellen Suchanfragen - das ist toll - aber wenn Sie es gehen, es ist wie eine Website der 1990er Jahre mit roten und blauen überall, und das ist auch nicht gut. Beachten Sie, dass Ben und ich arbeiten als Team sind sehr nett, denn ich bin eigentlich mehr im Front-End, wir beide interagieren in der Mitte-Ende, und Ben ist wirklich gut mit Back-End-Sachen, so dass funktioniert wirklich gut, denn wir können jede Website die Löcher zu entwerfen und im Grunde an diesem Standort, die gefüllt werden müssen, kann von beiden einer von uns, oder möglicherweise beide gefüllt werden. Sie wollen sicherstellen, dass es keine Löcher in Ihrem Team. Es ist okay, wenn es ein bisschen überlappen. In anderen Worten, wenn Sie 2 Personen, die beide gut mit Back-End gibt, so gut sein kann als gut, weil sie mit Problemen gegenseitig helfen können dass sie mit. Es kann ein Problem sein, wenn Sie nur 1 Person, die für eine bestimmte Sache verantwortlich ist, und sie in ein Problem laufen, so dass Sie wollen, um ein wenig von der Überlappung haben aber Sie wollen vor allem sicherstellen, dass alle möglichen Löcher gefüllt sind. 

Das letzte, was - und das sollte klar sein, aber es ist oft nicht. Sie wirklich wollen, um Spaß zu haben. Der Sinn dieser Abschlussprojekt in CS50 und oft der Punkt, der Web-Entwicklung im Allgemeinen ist nicht nur auf einen Job zu tun, weil es getan werden muss. Sie wollen wirklich Spaß zu haben, und Sie möchten etwas zu machen das ist motivieren Sie, daran zu arbeiten. Wenn was auch immer du machst ist ein Schmerz, sich zu setzen und daran arbeiten, dann bist du nicht das richtige Projekt wählen. Sie wollen etwas, die Sie interessant finden, zu wählen, Sie wirklich wollen, um das Ergebnis zu sehen, sind Sie aufgeregt, wenn Sie eine neue Idee zu etwas, das man tun könnte - so gibt es alle Arten von Projekten gibt, die ich bin sicher, finden Sie - jeder hat etwas, das wirklich faszinieren würde sie wenn sie tun, eine web-basierte Projekt. Ich werde es wieder sagen, gerade jetzt. Wenn Ihr Projekt scheint wie ein Schmerz, und Sie wollen nicht, daran zu arbeiten, wählen Sie ein anderes Projekt. Wählen Sie etwas, das wirklich inspiriert. 

Ben erwähnt dieses Konzept der Iteration ein bisschen, und ich möchte ein bisschen über sie gehen. Es ist wirklich wichtig, in Schüben, wo Sie etwas funktionales erhalten zu arbeiten. Es kann groß sein, wenn Sie diesen Plan für eine Website, die gehen, um A, B, und C zu tun haben, und schließlich sie werden es bekommen. Aber Sie in dieser Phase, wo man daran arbeiten und daran zu arbeiten, stecken, aber nichts hat sich immer getan. Sie haben noch nichts zu sehen und eine greifbare, funktionale Sache. Was Sie wirklich so viel zu tun, wie es scheint, eine Art Schmerz manchmal zu wollen arbeiten an etwas, und dann irgendwie verschließen Sie diese, so dass es zumindest auf einem stabilen, Laufen Version, auch wenn sie nicht über alle Funktionen, die Sie wollen. Und vielleicht gibt es einige Funktionen, die Sie wirklich wollen, um hinzuzufügen, aber man kann einfach nicht weil Sie diese Seite einer Funktionsstelle zu bekommen. Und so wollen Art haben die ganze Entwicklungsprozess aussehen wie die. Sie wollen irgendwo Funktions starten - oder im wesentlichen beginnen mit nichts - aber Sie wollen irgendwo sehr einfach und funktional. Und dann wieder, stellen eine Art zu springen und sich irgendwo wieder funktionsfähig. Sie werden langsam aufbauen, und es könnte ein bisschen langsamer als sonst zu gehen, aber auf lange Sicht, wenn man ständig in diesem mittleren Bodenphase stecken, wo Sie nicht wirklich etwas Arbeit haben, kann es eine wirklich große Frustration sein an Ihrem Projekt arbeiten, weil du immer so kurz davor es funktioniert, und es ist nie wirklich funktioniert. Sie wollen in dieser Funktionsschübe zu arbeiten, und Sie wollen auch einige Überlegungen nach jeder tun. In anderen Worten, wenn Sie an einem Punkt, wo die Website funktioniert jetzt bist - es nicht alles, was Sie gerne haben, aber es hat einige Dinge - Sie denken wollen, okay, diese Seite ist Erreichen des Ziel, das ich gesetzt, um zu tun? In anderen Worten, wenn die Website gehen, um X zu tun, ist, was ich in der Richtung der X arbeiten? Sind alle Funktionalitäten, die ich dort wollte? Und darüber hinaus ist es, die dem allgemeinen Zweck, die ich will? Wenn Sie finden, sind, dass Ihre Website beginnen, in eine andere Richtung einschlagen oder vielleicht Dinge nur irgendwie funktionieren nicht, kann es Zeit, um die Gänge ein wenig sein. In anderen Worten, es ist eine Überlegung wert - es lohnt sich werfen Ideen, wenn notwendig und in Anbetracht ich wirklich arbeiten zu dem, was ich sein möchte. 

Ich glaube, dass meine nächsten Punkt. Haben Sie keine Angst, um Ideen nicht aufzugeben. Nur weil Sie verbrachte viele Stunden Arbeit an einem Feature und schließlich habe es funktioniert, aber es ist wirklich nicht so gut läuft - wie es ist nicht so sinnvoll oder-Benutzer haben Probleme damit - mit so etwas - keine Angst, es wegwerfen können. Er saugt, dass Sie eine Menge Zeit damit verbracht habe, daran zu arbeiten, aber schließlich wollen Sie nicht eine Website, die Art der durch diese Stücke zusammen ist das Art der Arbeit, sind aber nicht so gut serviert. Auch haben Sie keine Angst, um neue Ideen zu umarmen. Wenn jemand kommt und sagt, hey, sieht, dass vor Ort wirklich cool, aber wäre es nicht auch schön, wenn es auch tat das? Nur weil das ist etwas, dass Sie nicht die Absicht und nicht etwas, das in ist Ihr Spezifikationen, etwas, das Sie tun müssen, nicht festgelegt haben, keine Angst, es zu nehmen auf und arbeiten dann mit ihm. Da oft die Ideen, die Sie mit der gesamten Verlauf der Entwicklung laufen am Ende wird die wirklich coolen Features der Website. 

Ich habe das schon einmal gesagt. Ich sage es noch einmal. Tester sind super, super nützlich. Versuchen Sie, die Menschen, die die Website noch nie gesehen haben, bevor Sie sich anmelden und sehen, was vor sich geht da sie nicht nur die Nützlichkeit des Standorts und der Benutzerfreundlichkeit zu testen, aber sie können die Funktionalität in einer Weise, dass man nicht auch testen. Wenn Sie einige Funktion, die eine bestimmte Sache macht und Sie wissen, es geht um, die gleiche Sache richtig jedes Mal zu tun, das ist großartig. Aber kann es oft schwierig sein, für Eck-Fällen, in denen ein Benutzer-Konto Geben Sie etwas, das Sie nicht erwartet wurden - gerade weil Sie definiert die Merkmale sich. Also, um jemandem auf, die keine Ahnung, wie die Nutzung der Seite hat kommen müssen und nur brechen sie in welcher Weise sie tun können, ist wirklich nützlich, weil Sie eine Idee aus einer ganz anderen Perspektive, was auf Ihrer Website funktioniert und was muss repariert werden. 

Zuletzt werde ich über einige allgemeine gute Praktiken zu sprechen, und Sie haben eine Menge von diesen in CS50 gesehen habe, aber sie auch wirklich, wirklich in einem Projekt Einstellung anzuwenden. Einer ist Kommentare. Ihr Code immer Kommentar besonders wenn Sie auf einem großen Team arbeitest. Es kann so ärgerlich, einfach nur einen riesigen Code-Block, dass jemand geschrieben und vielleicht klappt es, vielleicht nicht, aber Sie haben keine Ahnung, was es hat, so haben Sie keine Ahnung, ob es sinnvoll ist oder nicht, oder ob sie es oder nicht, und wenn Sie auf etwas anderes arbeitest, es ist sogar möglich, dass Sie gerade arbeiten die gleiche Sache, so dass nur sehr, sehr vorsichtig, rücksichtsvoll von Ihren Kollegen zu sein und Schreib-Code, ist gut dokumentiert. Sie müssen nicht so weit gehen, die ganze Sache, wo gerne tun, wenn Sie erhöhen ein Zähler haben einen Kommentar, der sagt ich bin Hinzufügen von 1 zu diesem Zähler. Es hat nicht so detailliert sein, aber für jede Funktion, die Sie jemals schreibst Sie sollten eine Dokumentation dessen, was die Funktion genau macht haben, was seine Eingänge sind, und was sie zurückgeben sollte. So können Sie andere Komponenten der Website der Menschen nutzen und Sie zum Aufbau etwas Großem arbeiten können. 

Eine weitere wichtige Sache ist, dass Sie regelmäßige Bereinigung tun wollen. Code wird chaotisch. Fühlen Sie sich nicht schlecht, wenn der Code ist einfach total unlesbar und ein riesiges Durcheinander. Das geschieht immer in der Web-Entwicklung. Sie sind das Hinzufügen neuer Features, die Beseitigung alten. Stuff wird da sein, die nicht sein sollten. Das ist in Ordnung, aber Sie müssen sicherstellen, dass regelmäßig mit umgehen wollen. Sie wollen nicht, es zu bauen bis zu dem Punkt, wo man einfach nichts finden zu lassen im Code, und Sie haben keine Ahnung, was alles tut. Das ist der Fall mit HTML. Manchmal werden Sie am Ende mit Objekten, die alles enthalten, und Sie wollen von denen, loszuwerden. In CSS können Sie sich unter Bezugnahme auf Elemente, die nicht mehr da, so dass Sie wollen, um diesen Code zu befreien. In JavaScript, könnten Sie etwas aus dem HTML entfernt haben. Also, wollen Sie sicherstellen, dass Sie immer die Säuberung, die Dinge ziemlich so viel, wie Sie können auf einer regelmäßigen Basis. 

Eine andere wirklich nützliche Sache, die ich nicht glaube, ist sehr viel in CS50 skizziert aber es lohnt sich, in die Versionskontrolle ist. Die Idee der Versionskontrolle ist, wenn Sie im Grunde die Verfolgung aller Fortschritte Sie auf Ihrer Website vorgenommen haben, und wenn Sie zu irgendeinem Zeitpunkt zu realisieren, oh, das war Arbeits eine Weile her, aber es ist nicht mehr arbeiten, können Sie zu früheren Versionen gehen und sehen, was sich seit damals und so etwas verändert. Der primäre Weg dies zu tun ist mit Git und Git ist diese ganze Art von System, das Ich glaube, Tommy MacWilliam gab ein Seminar über Vorjahr. Wenn Sie in den CS50-Seminare für das Jahr 2011 gehen, können Sie seine Seminar über das zu sehen. Die Idee von Git ist im Grunde, dass in regelmäßigen Abständen Sie machen diese Verpflichtungen sind die Möglichkeiten, zu sagen, die Seite ist in einem ziemlich stabilen Version jetzt so Ich bin es Verpacken und Versenden es weg an einen Server, und dann können Sie mit diesem Server gehen und schauen Sie sich alle früheren Versionen des Codes und sehen, wie es voran und alle diese Art von guten Sachen. Also, das ist es im Grunde. Soweit Web-Entwicklung, sind wir glücklich zu bleiben und beantworten jede Fragen so weit wie unsere Präsentation. Das ist es. Vielen Dank. >> [Ben] Danke. [Applaus] 

[Billy]-Team, hat jemand irgendwelche Fragen über Dinge, die wir behandelt haben haben oder Dinge, die wir nicht erfasst, dass sie hofften, wir würden zu decken? Wir würden uns freuen, diejenigen zu beantworten. Anyone? [Zuschauer] Was sind die Vor-und Nachteile der Verwendung von Ruby oder Python? [Ben] Die Frage war, was sind die Vor-und Nachteile der Verwendung von Ruby oder Python statt wie PHP. Die Profis sind, dass Ruby und Python sind viel besser Sprachen als PHP. Zumindest meiner Meinung nach, und ich denke, in einer Menge von Meinungen anderer Leute auch. Sie wurden dafür mehr komplexe Sachen entworfen, und weniger für wirklich schnell zusammen whacking Web-Seiten mit ein bisschen von dynamischen Inhalten. Die Nachteile sind, dass es ein wenig - es ist eher eine Lernkurve zu bekommen deren Einrichtung. Das heißt, wie in PHP, müssen Sie nur können eine HTML-Datei, und Sie weniger als zu schreiben, Fragezeichen, und dann Code schreiben Sie, und dann schreiben Sie Fragezeichen, größer als, und dann sind Sie fertig. In anderen Sprachen wie Ruby oder Python, Sie haben, um durch ein bisschen mehr Arbeit gehen, um die ursprüngliche Website zum Laufen zu bringen. Es gibt auch - zumindest früher der Fall sein -, dass es mehr Dokumentation für PHP verfügbar, nur weil es mehr Leute, die es. Ich denke, das ist nicht mehr so ​​viel von einem Problem. Es ist sicherlich eine sehr gute Dokumentation für Sachen wie Ruby on Rails oder Django für Python ist das Äquivalent. PHP ist die, die jeder hat seit Jahren mit, und Sie wissen, wie es funktioniert. Ruby und Python sind ein bisschen weniger ausgereift. 

[Zuschauer] Wenn Sie zwischen einen von ihnen zu lernen oder zu holen waren, Welche würden Sie bevorzugen? Ehrlich gesagt, ich denke, das hängt von der Person. Es tut mir leid. Die Frage war, welche würden Sie wählen für jemanden zu lernen? Ich finde das schönste Python persönlich. Es gibt eine Menge Leute, die - ich meine erste Web-Entwickler Projekt in Python und Django. Es gibt eine Menge Leute, die sich Ruby on Rails auch gerne. Wahrscheinlich mehr Menschen, die Ruby on Rails kennen. Ehrlich gesagt, würde ich nur mit dem, was die Menschen um Sie wissen zu gehen so dass Sie die Menschen, Fragen zu stellen. 

Die Frage war - auf gemeinsam genutzten Servern ist es ein bisschen schwer, sich auf Python zu arbeiten? Das hängt von Ihrer Hosting. Es gibt eine Reihe von Web-Hosts, die Python-Sachen veröffentlichen wird. WebFaction tut, richtig? WebFaction ist eine, Billy und ich habe für einige Projekte eingesetzt. Sie sind wirklich großartig. Sie unterstützen die meisten Sprachen. Aber es ist wahr, dass PHP ist viel besser unterstützt. Also, wenn Sie auf einem Web-Host, nur, dass PHP stecken, das ist ein guter Grund, um PHP zu verwenden. 

[Zuschauer] Ich habe gerade in das Lernen, wie man einige Datenbanken abzufragen, und ich weiß, dass meine SQL ist ganz über dem Platz, aber ich habe vor kurzem ausgesetzt - und Sie darauf aufmerksam machte. Sie sehen, JSON und erweiterbare Datenbanken. My SQL ist immer noch ganz über dem Platz. Wie machen Sie das Geschehen sehen? Wird es eine wachsende Tendenz für mehr erweiterbar (unhörbar) sein? Die Frage war - ich glaube, es wird ein Trend zur Nicht-SQL-Datenbanken sein. Zum Beispiel, wie MongoDB. Ich denke, dass ist auf jeden Fall wahr. Mein Rat war vor allem hier mySQL bezogenen nur, weil mySQL ist Industriestandard. Ich persönlich bevorzuge Datenbanken, die nicht schemos wie MongoDB wo man nicht das Problem der zu tun haben, oh, ich muss eine weitere Spalte hinzuzufügen. Weh mir, wie, was kann ich tun? Es ist sehr schwer, das auf MySQL zu tun, aber wenn Sie so etwas wie Mongo haben es ist viel schöner. Die andere nette Sache über Mongo ist, dass Ihre Unterlagen sind eigentlich JavaScript-Objekte. Es gibt keine Art von Umwandlungsschritt, wo Sie brauchen, um diese Datenbankzeilen nehmen und sie in ein JavaScript-Objekt und senden Sie sie dann über den Draht. Ich denke, so was wird sich für die schnelle Web-Entwicklung in der Zukunft sehr, sehr nützlich. 

[Billy] Etwas, was ich möchte hinzufügen, die nur eine allgemeine Punkt ist, ist, dass nicht das Gefühl, Sie sollten alle Sprachen, die wir besprochen haben, gelernt haben von unserem Seminar. Offensichtlich ist der Punkt ist, um Ihnen eine Vorstellung davon, was da draußen geben, und wenn Sie durch eines der Dinge, die wir erwähnt haben fasziniert Sie können sie googeln und informieren Sie sich auf sie. Und wie ich bereits erwähnt, gibt es ein paar Seminare, die mit genau diesen Dingen umzugehen. Es gibt noch mehr Seminare, die ich nicht erwähnt habe, die wahrscheinlich in zu erhalten dieses Zeug auch. Die Idee ist, dass, wenn Sie an etwas arbeiten wollen, sind hier die Werkzeuge zur Verfügung. Fühlen Sie sich nicht überfordert, wenn Sie nicht wirklich sicher, was diese Tools machen genau sind, aber wissen, dass sie da draußen, und dass Sie breiten Gebrauch davon zu machen sind von Google. 

[Zuschauer] Welche Dinge müssen Sie tun, um sicherzustellen, dass Ihre Website machen müssen sieht gut aus auf mobilen Geräten? [Billy] Mobile Geräte sind ein wenig schwer. Es gibt zwei Möglichkeiten, wie Sie nähern kann. Die erste Möglichkeit ist, dass Sie tatsächlich eine mobile Website. Mit anderen Worten, eine Art von Erfassungs Beginn führen Sie wenn der Browser, der die Anfrage auf Ihrer Website, die entweder sagt diese Ansicht zurück - das ist die Ansicht für Desktop-oder Laptop-Browser sein wird - und das andere Ansicht für mobile Endgeräte. Das ist ein Ort, wo Ansichten sind wirklich schön, dass man so ziemlich die Swap- zwei aus und haben eine Schnittstelle, die wirklich schön funktioniert auf mobilen Geräten und haben eine ganz andere, die gut auf dem Browser-Geräten funktioniert. Das Problem dabei ist, dauert es eine lange Zeit, weil es bedeutet Codierung eine ganz andere Schnittstelle. Die andere Möglichkeit, dass Sie es tun können, ist - viele moderne Handys werden Webseiten an und versucht, sie als ein Browser machen würde, und sie tun ihr Bestes. Sie können Art versuchen, Licht auf die Menge der jQuery JavaScript Sie verwenden bleiben zu sein, wo die Dinge schief gehen kann ein wenig neigt. Dies ist eine Art der Art und Weise, die Sie verwenden, wenn Sie nicht so viel Zeit. Wenn Sie die Zeit, um auf eine mobile Schnittstelle arbeiten zu tun, das ist natürlich die beste Option. 

Ich denke, in der Regel für CS50-Projekte, Sie gehen zu wollen, um die eine oder andere wählen sind. In anderen Worten, um eine mobile Anwendung machen wollen oder Sie eine Desktop-Webseite machen möchte. Und diese Art der bestimmt, wo Sie mit dem gehen. Aber wenn du später erweitern möchten, wahrscheinlich die beste Wahl ist um eine weitere Schnittstelle für den anderen zu machen. Ich habe ein wenig Erfahrung in der Entwicklung von Wordpress-basierten Websites. Ich veranstaltete eine persönliche Webseite auf Wordpress für eine Weile. Diese Art von Frameworks kann schön wie sehr grundlegende Dinge. Oft werden Sie nur in eine Menge von Anpassbarkeit Probleme laufen aber. Sie wollen etwas suchen oder eine bestimmte Art und Weise sein, in einer bestimmten Weise zu haben, und man kann es einfach nicht, weil es in das System fest verdrahtet, dass das ist, wie Sie die Dinge, die ein bisschen ein Problem sein kann, zu tun haben. Seitdem habe ich Art war eher geneigt, mit Standorten von Grund auf zu arbeiten. Für Dinge wie Blog-Datenbanken und so was, es ist wirklich nicht so schwer, einen Rahmen zu bauen. Wenn Sie wirklich zu wenig Zeit haben, können Sie natürlich so etwas wie Wordpress oder so was für einen Blog. Die Arten der Dinge, dass Blogs speichern und tun nicht wirklich schwer genug, dass wenn Sie in einem dieser möglichen Dinge laufen, nur um dich vielleicht am besten machen eine Inhouse-Version. 

Ich denke, das ist es, so nochmals vielen Dank für Ihr Kommen. Wir genossen im Gespräch mit euch und hoffe, dass Sie ein paar Sachen gelernt. [Ben] Wir sind glücklich, reden - wir müssen gehen, aber wir sind glücklich, reden mehr außerhalb wenn Sie eine andere Frage. Nochmals vielen Dank. [Applaus] [CS50.TV]