>> [Musik zu spielen]
DAVID J MALAN: All right, willkommen zurück.
Dies ist CS50.
Dies ist das Ende der sieben Wochen.
Und es ist das Ende dieser Schnitzel Jagd aus Problem eingestellt vier
Sie erinnern sich vielleicht an.
Nach der Wiederherstellung alle diese JPEGs von Personal,
Sie wurden aufgefordert, wenn Sie möchten, um sich fotografieren mit so vielen
dieser Leute wie Sie können.
Wir haben eine ganze Reihe von Einsendungen in den letzten Wochen
ja durchaus ein paar kurz vor Mittag Heute sind einige von denen, die hier,
hier gefangen in-- like-- Annenberg sieht Halle an der Bürozeiten hier
in Lowell Haus mit Nick.
Hier ist Ramon ist am Telefon erwischt.
Das war zu einer CS50 Mittagessen.
Dies war Jason Skypen mit ein kreativer Klassenkamerad,
die ihn auf diese Weise angerufen.
Wir wissen nicht, was das war.
>> [Gelächter]
>> DAVID J MALAN: Aber das ist ein Gigabyte wert.
Hier ist Chang, der lief buchstäblich von der Bühne
um zu vermeiden, dass sie fotografiert ein Tag, aber wurde schließlich gefangen.
Hier ist Nick.
Und hier ist Alison hinunter durch die Felder.
Und Zamyla auch gefunden wurde bei Ballsaal Wettbewerb.
So werden wir durch gehen Diese Fotos, herauszufinden,
wer hat die meisten das früheste und Belohnung
einem tollen Preis, wie in der Spezifikation versprochen.
Und wir werden auch Follow-up über der Raum, beteiligt war.
>> Ein paar announcements-- so Mittagessen ist wieder an diesem Freitag um 1:15 Uhr.
Wenn Sie möchten, sich uns anzuschließen, RSVP unter dieser URL hier.
Jason erscheint hier wieder von einem der Abschnitte ein paar Jahren
Rücken, was passiert auf Halloween fällt.
Und in der Tat, wie ein kleidete er Kürbis, dass insbesondere Jahr.
Wenn Sie diesen Abschnitt zu sehen seiner ab 2011 Abschnitt
acht, wenn Sie neugierig sind, bei CS50.tv, ich denke,
das Jahr war, in dem seine Luftpumpe arbeitete.
>> Wenn Sie dann sehen die ähnlichen Schnitt im Jahr 2012,
Du diesen Jason viel entleert sehen da der Anzug nicht mehr funktionierte,
die nur zu sagen an diesem Freitag, wenn Sie möchten
Lust auf einen Kürbis mit Daven schnitzen und Gabe und andere, RSVP auf die Köpfe
bei cs50.harvard.edu Adresse.
Es verspricht, ein großer Spaß sein.
Daven, wird uns gesagt, hat geschnitzt Kürbisse sein ganzes Leben.
Gabriel aus Brasilien hat nie geschnitzten Kürbis für Halloween.
Also da sein mit ihnen, wie er lernt.
>> Seminare, meanwhile-- so dass Sie schnell lernen werde
über das, was unsere Erwartungen sind für Das endgültige Projekt, das im Wesentlichen
wird einkochen Gestaltung und Umsetzung
die meisten jedes Projekt von Interesse Sie, wenn auch mit Zustimmung
und Anleitung von Ihrem Unterricht Kerl.
Gegen Ende der Semester eine Reihe stellen wir
von Seminaren, die optional Klassen sind durch die Lehre Stipendiaten und Harvard geführt
Personal, Freunde des Kurses über Campus, zu den unterschiedlichsten Themen
tangential zu der zugrunde liegende Lehrplan natürlich die
aber dennoch zutreffend, Spaß und verschiedene für potenzielle Abschlussarbeiten.
>> Zum Beispiel, zuerst, wenn Sie möchten um zu dieser URL dort anmelden, Kopf.
Und dies ist das Lineup für diesjährigen Seminaren allein.
Aber erkennen wir haben Dutzende von Seminare aus den vergangenen Jahren, von denen alle
werden in den Seminaren Menü verlinkt Option der Website des Kurses.
Also, wenn Sie über das Denken sind außerhalb Ihrer Komfortzone gehen
oder Abholung einige neue Fähigkeiten, B. Programmierung iPhone
Apps mit Swift, einer neuen Sprache von Apple oder Objective-C
oder Android oder Programmierung [? Stichwort?] Glühlampen, oder eines der Themen
hier und mehr, wegen Check aus der Registrierungsseite.
>> So begannen wir und endete am Montag mit Blick auf HTTP.
So schnell refresher-- HTTP, Hypertext Transfer Protocol.
Aber was heißt das eigentlich?
Was bedeutet das eigentlich?
Ist das eine Hand?
Ich weiß, du bist nur am Kopf kratzen.
Aber Sie wollen vorschlagen, was HTTP ist?
>> PUBLIKUM: Wie Computer kommunizieren [unverständlich].
DAVID J MALAN: Ich verpasste den letzten Teil.
Wie Computern kommunizieren with--
>> PUBLIKUM: Internet-Servern.
DAVID J MALAN: Good-- Internet Server, und zwar Webserver.
Weil Rückruf, es gibt eine Reihe von Dienstleistungen im Internet, von denen einige
Sie wahrscheinlich täglich zwischen Chat zu verwenden, und Nachricht, Chat und Web-und E-Mail,
und dergleichen.
Und HTTP ist nur die Protokoll, dass Web-Browsern
sprechen, wenn die Kommunikation mit Web-Server, und umgekehrt.
Und das analoge in der menschlichen Welt auch sein mag,
Ich erweitere meine Hand, einige schütteln andere menschliche und er oder sie
erkennt durch Verlängerung seine oder ihre Hand auch.
Also das ist nur ein Protokoll, eine Reihe von Konventionen.
>> Und was in der Tat sind die Konventionen?
Nun, es ist nur darauf an, Senden von Nachrichten hin und her,
wie wir dargestellt hier.
Und es gibt ein paar Möglichkeiten, in denen Sie diese Nachrichten zu senden.
Und vielleicht die gemeinsame als get bekannt.
Und wir werden einen Kontrast zu sehen Vor der lang.
>> Aber eine GET-Anfrage von einem Browser Server sieht nur so aus.
Es ist ein Bündel von Text, dass es bringt innerhalb eines virtuellen Umschlag.
Auf der Außenseite der genannten Umhüllung gehen ein paar Stücke von Informationen.
Was muss auf dem Sprung Umschlag, sozusagen
um eine Anfrage gefallen Dieses von mir auf einen Webserver?
Ja.
>> PUBLIKUM: Ihre IP-Adresse.
>> DAVID J MALAN: Meine IP-Adresse im Feld, so zu sprechen,
und natürlich der IP-Adresse des Empfängers.
Aber im Fall eines Bahnpakets, wir brauchen ein wenig mehr Details
Es reicht nicht, nur um senden einen Umschlag mit einem Server,
weil dieser Server sein könnte Hören für verschiedene Arten
der Internet-Verkehr.
Also, was wir sonst noch brauchen Neben IP des Empfängers?
Ja?
>> PUBLIKUM: Ist es TCP?
DAVID J MALAN: Gut.
TCP--
>> PUBLIKUM: Adresse.
>> DAVID J MALAN: Adresse, oder Hafen, wie es heißt.
Schließen, sondern eine TCP-Portnummer.
Und es gibt eine Menge von diesen.
Aber sicherlich die vertraut schließlich sollte
sein 80, der Standardwert ist für Web-Datenverkehr ein verwendet.
Und ein anderer vertraut ein bald 443 sein,
die für sichere Web verwendet wird Verkehr, URLs, die mit https beginnen.
>> Also das ist, was geht innerhalb dieses Umschlags.
Und erhalten / bedeutet nur, geben mir die Standard-Webseite.
Gib mir den Stamm der Fest fahren Sie auf den Web-Server.
Und hoffentlich wird die Bahn Server mit, OK antworten
und die Zahl 200, das nur eine Konvention sagen, ja, alle
ist in der Tat OK.
Hier ist die Seite.
Die Art der Web-Seite wird zu sein Text, sondern genauer gesagt, HTML,
die wir sind dabei, wieder in zu tauchen.
Und der Punkt Punkt Punkt gerade Hilfe, hier ist der HTML.
Und das ist, wo wir holen die Geschichte heute,
tatsächlich das Schreiben von HTML, Hypertext Markup Language, die
ist die Sprache, in der Web-Seiten werden geschrieben.
Es ist nicht eine Programmiersprache.
Es gibt keine Funktionen oder Schleifen oder Bedingungen.
Es ist eine Auszeichnungssprache, auch sehen heute wieder,
dass können Sie angeben, wie zu strukturieren und zu stilisieren
ästhetisch eine Web-Seite.
>> So war der, und nur Seiten wir wirklich
sah, wenn auch nur kurz, am Montag.
Und bemerken ein paar ausgeprägten Eigenschaften.
Es gibt eine Menge von offenen abgewinkelten Halterung und enge Winkelhalter.
Zwischen diesen abgewinkelten Klammern sind Worte.
Und wir werden beginnen ruft diese Worte Tags.
So offene Klammer Kopf und geschlossener Klammer Kopf
sind die offenen und geschlossenen Tags, oder die Start- und End-Tags
jeweils eines HTML-Elements, wie wir es nennen, genannt Kopf.
Und das gleiche gilt Jargon Körper in HTML und so weiter.
>> Und was schön ist HTML-- und in der Tat, wir
verbringen schrecklich wenig Zeit darauf, weil Sie meistens nur herausfinden
welche Funktionen es hat, wenn Sie tatsächlich eine konkrete Problem
um solve-- Sie werden feststellen, dass ein Browser ist ziemlich dumm.
Es nur geht, nicht unähnlich zu do-- a computer--, was Sie sagen, es zu tun.
Und so, wenn Sie geöffnet haben Halterung HTML an der Spitze
gibt, dass im Wesentlichen bedeutet nur, hey, Browser,
hier kommt eine Web-Seite in HTML geschrieben.
>> Wenn es offene Klammer sieht Kopf, das bedeutet nur,
hey, Browser, hier kommt der Kopf, oder der oberste Teil meiner Webseite.
Wenn es eine geschlossene Klammer sieht Kopf, das bedeutet nur, hey,
das ist es für den Kopf.
Standby für etwas anderes.
Und das ist etwas anderes offenbar werde der Körper sein.
Und wenn Sie nicht über einen Tag, wie haben Sie müssen nur hallo, Komma, welt,
dass nur geht, um Rohtext werden, dass schließlich wird auf dem Bildschirm angezeigt.
>> Nun, werden Sie auch feststellen, die Vertiefung hier.
Sie können sich wahrscheinlich folgern wie wir es Stilisierung.
Jedesmal, wenn ich einen Tag zu öffnen, sozusagen einrücken ich.
Und jedesmal, wenn ich in der Nähe ein Tag, ich un-Gedankenstrich
im Geiste gleich geschweiften Klammern.
Und darüber hinaus, ich bin Art der mit meinem Urteil.
Beachten Sie, dass ich nicht die Mühe schlagen Innerhalb dieser Titel-Tag eingeben.
Warum?
Nun, ich beschloss nur, es sah ein wenig sauberer zu mir, der Mensch,
um nur nicht die Mühe zu tun.
Also noch einmal, es gibt einige Urteil nur Anrufe
als gäbe es in C oder einer beliebigen Sprache.
>> Aber beachten Sie auch, dass diese Vertiefung eignet sich für eine mentale Modell,
nicht zu über erschweren es.
Aber ein Baum, oder?
Wenn Sie einer Web denken Seite, offenbar geschrieben
wie diese, als schön eingerückt so,
man kann fast der offenen Klammer denken HTML geschlossenen Bügel-Tag wird die Abgrenzung
die Wurzel eines Knotens, ein Stammbaum Stil Knoten im Stil der Bäume
betrachteten wir am vergangenen Freitag.
>> Und in der Tat, auf der rechten Seite haben wir hier was wir ein DOM, D-O-M, Dokument aufrufen
Objektmodell, eine andere Art zu sagen ein Baum, dass HTML darstellt.
Und feststellen, dass HTML hat, werden wir sagen, wie ein Stammbaum, zwei Kinder.
Auf der linken Seite ist Kopf.
Auf der rechten Seite ist Körper.
>> Und so wie eine geistlose Gedanken Übung Kopf, hat natürlich, wie viele Kinder
gemäß dieser Struktur?
Also nur eine, title-- und das ist, warum wir
der Pfeil geht vom Kopf zum Titel.
So ist es, als ob diese Person in der Familienstammbaum hatte nur einen Nachkommen.
Und dann Titel selbst kann sagte, ein Kind zu haben ist.
>> Daran erinnern, dass die HTML hatte hallo, Komma, Welt unter ihm.
Und ich habe es einfach gezeichnete innerhalb ein oval statt eines Rechtecks ​​nur
semantisch dass, obwohl vermitteln es ist ein Knoten in dem Baum, sozusagen
Es ist eine Art grundlegend anders.
Es ist nicht ein Tag.
Oder richtiger, es ist nicht ein Element.
Es ist nur ein Textknoten, wenn man so will.
Aber diese vollständig sind willkürlichen menschlichen Konventionen.
Dies ist gerade jetzt meine Art darstellt, was ich als ein Aggregat
rufen Sie das Dokument.
>> Und nebenbei, der Sache auf die Super linken oberen Ecke,
Stellwinkel Ausrufezeichen doc Typ HTML, das sieht aus wie ein Tag,
aber es ist die dumme Ecke Fall, das ist einfach nur da, kopiert und eingefügt
die Browser zeigen dies ist HTML-Version 5.
Die Welt ändert sich ständig, was die erste Codezeile auf einer Seite sein sollte.
Dies bedeutet nur, Version 5.
So ist es nicht ganz funktioniert sehen aus wie die anderen.
>> In Ordnung, so mit, dass sagte, du wirst jetzt schätzen
dies ziemlich dieses blöde Tattoo jemand hat.
>> [Gelächter]
>> DAVID J MALAN: All right, und jetzt wollen wir eigentlich Tauchgang
in etwas mit diesem zu tun.
Sie werden feststellen, dass das letzte Mal erinnern, Ich öffnete den CS50 Appliance
und ich tat etwas so einfach wie Erschließung gedit.
Und ich die Datei gespeichert, auch auf meine desktop-- nirgendwo special--
als hello.html.
>> Also lass mich tun, again-- hello.html Enter.
Und jetzt in dieser Datei, ich bin zu gehen gehen Sie vor und replizieren, was wir gerade
saw-- doc Typ html Dann bin ich zu gehen tun offene Klammer html geschlossenen Klammer.
Und dann werde ich präventiv Öffnen und Schließen der Tag.
Warum?
Nur damit ich nicht vergesse später.
Es ist nur gute Praxis, wie Öffnungs und schließende geschweifte Klammern auf einmal.
>> Und was dann kam als nächstes?
Sie können der Tätowierung denken.
>> PUBLIKUM: Der Kopf.
>> DAVID J MALAN: Der Kopf.
Und dann hier, ich hatte den Titel, denke ich.
Und der Titel war willkürlich, hallo, Welt am Titel.
Und dann hier unten, der Körper, der course-- dann schließen wir die Body-Tag.
Und dann einfach etwas redundant, Ich hatte die gleiche Sache hier unten.
>> Also ich behaupte, dass dies eine Web-Seite.
Das ist etwas, konnte nun auf dem Web zu leben,
obwohl natürlich, es ist buchstäblich leben auf meinem Desktop jetzt.
Aber in der Tat, wenn ich zu minimieren gedit, Ich werde auf meinem Desktop das Symbol zu sehen.
Auch wenn dies das Gerät, Sie könnte dies unter Mac OS zu tun
ohne TextEdit oder Fenster mit Notepad selbst.
>> Und wenn ich gehen Sie vor und klicken Sie doppelt dass auch und wählen-- gut, lassen Sie uns
nicht wählen, weil Chrome ist nicht zu öffnen.
Fahren wir fort und öffnen Chrome.
Und dann tun Befehl-O für offene Und auf meinem Desktop zu navigieren
und öffnen Sie die Datei.
Das ist, wie ein Browser interpretiert HTML, von oben nach unten, von links nach rechts.
Hey, hier ist Browser HTML.
Hier ist der Kopf.
Hier ist der Titel.
Hier ist der Körper.
Und in der Tat ist dies, wie es macht, dass die Web-Seite.
>> Aber beachten Sie die URL.
Keiner von euch könnte dieses spezielle ziehen Seite auf Ihrer Laptops gerade jetzt,
sogar innerhalb Ihres Gerät über diese URL,
weil file: // zeigt es ist eigentlich auf meinem Dateisystem, meine Festplatte,
nicht verkaufen.
Das ist also nicht alles, was nützlich.
>> Lassen Sie uns nun in Richtung bewegen Verwendung eines tatsächlichen Webserver.
Und es stellt sich heraus, das CS50 Appliance ist mehr als nur einer Umgebung,
Sie können C-Code zu schreiben und zu kompilieren und führen Sie es wie Sie getan haben.
Es wurde auch von der konfigurierten Personal, um eine typische Web vertreten
Server, der auf dem Internet ist, eine, die Sie bezahlen können
oder eine, die in der sogenannten Wolke.
>> Und es läuft Standard kostenlose Open-Source
Software, zum Beispiel, was genannt Apache, das ist vielleicht
immer noch die beliebteste Web Server-Software in der Welt
dass Tausende von Websites heute verwenden.
Und es auch noch hat Software wie MySQL,
Das ist ein Datenbank-Server dass wir schließlich zu bekommen,
die nur zu sagen Ich kann beginnen Behandlung
mein Gerät als vollwertigen Server dass ich nicht bezahlen anderswo.
Er lebt nur auf meinen eigenen Laptop für Entwicklung und Bequemlichkeit Zwecke.
>> Also lassen Sie uns weitermachen und nutzen diese.
Ich werde weitermachen und Öffnen Sie ein Terminal-Fenster.
Und ich werde weitermachen und move-- tatsächlich zunächst bin ich
werde auf meinem Desktop zu navigieren.
Wenn ich ls gibt es hello.html.
Und ich werde gehen vor und starten Sie mit
ein neues Verzeichnis wir haben nicht vor heute verwendet.
>> hello.html-- Ich werde bewegen um ../vhosts für virtuelle hosts--
mehr dazu in der future-- und dann in ein Verzeichnis namens localhost,
dem die Spitznamen in fast gegeben ist jeder Computer, ob es ein Mac, PC,
oder Linux-Computer, und dann speziell in ein Verzeichnis, dass wir,
das Personal für Sie bereits bei der Erstellung Sie das Gerät genannt heruntergeladen
Öffentlichkeit.
Und wie der Name schon sagt, alles, was Ich habe in diesem Ordner, in der Theorie,
wird sich jetzt Öffentlichkeit zumindest den Leuten
die eine direkte haben Verbindung zu meinem Computer.
>> So, jetzt lassen Sie mich gehen Sie vor und tun cd in dieses Verzeichnis
so kann ich sehen, was los ist und geben Sie ls.
Und in der Tat, das ist das einzige, was da drin.
Ich jetzt, weil ich diese setzen behaupten Datei hello.html innerhalb eines Verzeichnisses
genannte öffentliche innerhalb eines Verzeichnisses genannt local innerhalb eines Verzeichnisses
genannt vhosts, die dank CS50 Personal
wurde vorkonfiguriert sein die Wurzel von Ihrem Web-Server,
Ich kann jetzt hoffentlich tun.
>> Ich werde zu öffnen, eine neue Registerkarte.
Und ich werde gehen nicht auf file: //.
Ich werde tatsächlich zu bedienen http / localhost, die
wieder, ist der Spitzname für meinen eigenen Server.
Und dann werde ich gehen, was Dateinamen, nur klar zu sein?
Wo ist diese Geschichte wohl hin?
hello.html.
>> Also mit anderen Worten, ich möchte jetzt dieses ist meine eigene Computer, mein eigenes Gerät,
als ob es eine tatsächliche Server.
Sein Spitzname ist localhost.
Aber denken Sie an localhost als wie Facebook.com google.com, was auch immer.
Es ist nur meine lokalen Namen.
Und dann das letzte was ich will ist in der Stamm der Festplatte, so zu sprechen,
oder die Wurzel des Webservers, ergo den Schrägstrich und dann
der Dateiname hello.html.
>> Lassen Sie mich zu verkleinern und drücken Sie Enter.
Und in der Tat, gibt es jetzt meine Webseite.
So ist es etwas anders.
Und es ist genauso berauschend.
Dies ist die alte Version.
Lassen Sie mich die Schrift zurückschrecken.
Dies ist die alte.
Dies ist der neue.
Aber was ist im Grunde passiert ist nun, dass HTTP verwendet wird.
>> Lassen Sie uns das ein wenig mehr klar oder, wenn man so will, ein wenig komplizierter.
Lassen Sie mich nach rechts unten gehen Ecke meines Gerätes.
Und feststellen, dass all dies Zeit hat es eine Nummer.
Das ist die eindeutige Adresse Ihrer CS50 Appliance.
Es ist eine private Adresse, wie von der 172.16 stillschweigend,
was bedeutet eben nur Sie körperlich kann Ihr Server zuzugreifen.
Alles wird durch die Firewall und schön vom Rest geschützt
der Welt, weil dieser Adressierung.
>> Und jetzt aber merken, wenn ich gehen, um Die Adresse, nicht in meinem Gerät,
aber in Mac OS-- Ich werde wieder hierher zu gehen.
Das ist mein Mac jetzt.
Und jetzt werde ich eröffnen Diese Version von Chrome hier.
Und ich werde gehen, um http: //172.16.25 / Und ich vergesse die rest-- 133.
>> Also werde ich von meinem Mac besuchen dass die IP-Adresse /hello.html Enter.
Und jetzt sehe ich von meinem Mac dass meine CS50 Appliance, wer ist
IP-Adresse ist, dass Nummer, ist in der Tat verhalten
wie ein Web-Server im Internet.
Es muss nicht eine schöne und einfach zu erinnern Namen wie Facebook.com,
aber es ist mit HTTP anscheinend, obwohl Chrome
ist eine Art, die Welt zu vereinfachen für uns, aber uns nicht zeigt HTTP.
Aber das ist ja genau das.
Chrome ist nur Spar einige Tastatureingaben in diesen Tagen.
Und das ist, was wir jetzt sehen.
>> Also das ist alles schön und gut.
Aber es ist eine ziemlich berauschend Seite.
Lassen Sie mich in zu gehen und etwas zu tun ein wenig anders jetzt.
Also lassen Sie mich zurück zu gedit.
Und anstatt hallo, Welt, lasst uns ein Bild.
Und ich aus before-- lass mich gehen beansprucht in meine localhost Verzeichnis öffentlich.
Und lassen Sie mich gehen Sie vor und kopieren ein ganze Reihe von Dateien von heute
aus meiner Dropbox-Ordner in hier.
>> Nun, wenn ich ls, schauen bei all diesen Dateien
dass ich durch die verteilte Website natürlich im Vorfeld der heute,
eine davon ist noch hello.html.
Es gibt also, dass man.
Und erinnern diese dumme ein von den letzten Zeit-- cat.jpg.
Also lassen Sie mich versuchen, einbetten cat.jpg Innenseite meiner Webseite.
>> Ich werde weitermachen und tun cat.jpg, zu speichern.
Lassen Sie mich zurück zu Chrome.
Und lassen Sie mich im Zoom Schriftart und jetzt neu zu laden.
Hoppla, wo ich das?
Standby-- Ich habe immer noch die alte Version von meinem Desktop geöffnet.
Lassen Sie mich also in mein vhost gehen, mein localhost, mein Publikum und hello.html.
So, jetzt lassen Sie mich gehen Sie vor und sagen Inneren des Körpers cat.jpg
wo ich es haben wollen angezeigt und neu laden.
Natürlich ist dies nicht korrekt.
>> Also brauche ich, um den Browser sagen, ein wenig mehr bewusst, was ich will, es zu tun.
Geben Sie einfach den Namen ist offensichtlich nicht ausreichend.
So erinnern daran, dass es eine andere tag, Image, img kurz.
Das ist einfach, weil Menschen nicht wie die Voll Worten Typ.
Und dann können wir Quelle zu tun = "cat.jpg".
>> Und jetzt werde ich zu tun eine Sache anders.
Obwohl alle unsere Tags bisher haben
hatte diese Vorstellung ein Start-Tag und einem End-Tag,
dass nicht wirklich machen Sinn für ein Bild, nicht wahr?
Ein Bild ist entweder da oder nicht da.
Und so sind die Menschen sind gekommen, mit einer einfacheren Konvention.
Wenn Sie ein Tag haben, die können sowohl beginnen und enden zur gleichen Zeit--
es kann leer sein, so nur speak-- setzen Sie den Schrägstrich innerhalb des Tags
am Ende.
Nun lassen Sie mich zurück zu meinem Browser.
Hit Reload Verdammt, ist etwas falsch.
Sie haben wahrscheinlich gesehen gelegentlich im Web,
auch wenn es nicht deine Schuld.
Es ist die Schuld des Webservers.
Welche Oden diese scheinen zu zeigen?
Es ist kaputt.
Das ist, wo das Bild gehört.
Ja?
>> PUBLIKUM: Aber es funktioniert nicht Zugriff auf das Bild.
>> DAVID J MALAN: Es spielt keine Zugriff auf das Bild.
Daß, oder noch schlimmer, vielleicht ist es gar nicht existieren.
Mal sehen, ob wir nicht zu diagnostizieren, dass.
Erinnern Sie sich an das letzte Mal, dass, wenn in Chrome, in dem Gerät,
oder sogar auf Ihrem Mac oder PC, Sie den Entwickler-Menü gehen
und gehen Sie zu den Developer Tools Option, die Sie wahrscheinlich haben
nicht viel oder überhaupt benutzt.
Und wenn ich auf Netzwerk und laden Sie die Seite,
wir tatsächlich am HTTP aussehen Anfragen, die gemacht werden.
>> Es sieht aus wie hello.html ist ja OK, damit die 200.
Aber cat.jpg ist ein 403.
So ist es nicht 404.
Datei existiert wahrscheinlich.
403 bedeutet, verboten.
Also das ist ein wenig verwirrend.
Ich werde zurückgehen zu meinem Terminal-Fenster.
Lassen Sie mich zu vergrößern hier oben.
Und lassen Sie mich tun ls.
Es gibt die gleichen Dateien.
>> Nun lassen Sie mich eine ls-l zu tun, die Sie wahrscheinlich haben
bevor auf Datei aussehen verwendet Größen vielleicht oder Zeitstempel.
Und wir sehen eine ganze Reihe von überwältigenden Informationen.
Aber beachten Sie ein paar Details.
Hier ist hello.html in diese rudern hier und hier ist cat.jpg.
Und es ist einfach das Gerät als benutzerfreundlich durch Hervorhebung JPEGs
in lila wie dieses.
Aber was ist anders an die Dateigröße und der Dateiname?
>> PUBLIKUM: [unverständlich].
DAVID J MALAN: Ja, es gibt zwei weitere R hier.
Beachten Sie, was hello.html hat sich ging.
So stellt sich heraus, dass der Name dieses Verzeichnis Öffentlichkeit ist wichtig.
Alles, was in diesem Verzeichnis soll öffentlich sein.
Aber es ist nicht ausreichend nur um Dateien dort fallen zu lassen.
Sie müssen auch ändern der Modus der Dateien,
Ändern Sie die Berechtigungen die Datei, um proaktiv nicht
sein die Standardeinstellung, die ist, dass nur ich lesen kann
und schreiben Sie es, ich als Eigentümer.
Ich möchte die ganze Welt alle zu in der Lage, meine Akte zu lesen, so zu sprechen.
Lesen bedeutet nur angezeigt werden kann.
>> Und in der Tat, wie Sie im Problem zu sehen set sieben, das ist, was die diese R Mittelwert.
Diese beiden R Mittelwert jeder zu sonst auf der Welt auch lesen,
vor allem jetzt, es ist in diesem Verzeichnis.
Also der einfachste Weg, dies zu beheben, ist gehen, um meine schnelle und tun chmod für den Wandel
Modus und dann eine + R, insgesamt, jeder, alle, plus R für Lese-,
und dann cat.jpg Enter.
Nichts scheint zu passieren, die bedeutet in der Regel eine gute Sache.
So ls-l again-- jetzt schauen wir uns cat.jpg.
Und diese Erlaubnis scheint sich geändert zu haben.
Nebenbei bemerkt, wenn Sie machen ein Fehler und Sie, zum Beispiel,
gerade gemacht your-- ich nicht wissen-- Essay öffentlich durch Zufall erreichbar,
Sie das Gegenteil tun können, chmod a-r.
Obwohl ehrlich gesagt, sollte es nicht werden in das öffentliche Verzeichnis
sowieso, wenn das der Sorge.
>> So, jetzt ist wieder gehen zu lassen meinem Browser und laden.
Und ich werde klicken der kleine Ghostbusters
Symbol, dass ein Teil des klaren Bildschirm, so können wir neue Anfragen sehen.
Und in der Tat, hier ist Grump Cat aus der Zeit vor.
Aber noch wichtiger ist, Technisch gibt es
die Zahl 200, die heißt, wir haben es OK.
Na gut, das ist also alles schön und gut.
Aber wir sind nicht so die beste von Websites,
noch werden wir zu hart, um zu versuchen machen die schickste von Websites heute.
Aber lassen Sie uns wenigstens etwas zu tun Super vertraut, bevor Rasseln
Aus einigen anderen Tags.
Also nehme ich wollen nicht nur eine Katze hier.
Angenommen, ich eigentlich wollen diese Katze auf etwas zu verknüpfen.
>> Ich könnte zum Beispiel tun so etwas wie dieses.
ein für Anker href für hyper Referenz equals--
und lasst uns einfach etwas zu tun wie www.google.com Nähe
zitieren Klammer zu.
Und jetzt für Katzen zu suchen.
Schließen Anker-Tag.
So hat dies nur eine Sorte grundlegend neuer Detail.
Das Tag ist natürlich unterschiedlich.
Es ist der Name einer für Anker href oder Hyper Referenz.
>> Aber noch wichtiger ist, es gibt diese syntaktische Funktion hier.
Dies ist, was wir lostelefonieren nicht ein Tag, sondern ein Attribut.
Und ein Attribut ist etwas, ändert das Verhalten eines Etiketts.
Und dieses Attribut href, Mittel das Verhalten des Ankers zu verändern
so dass, wenn es angeklickt wird, es geht auf diese URL hier.
Und natürlich ist, dass URL Google.
>> Unterdessen, was ist das Text hier sein wird?
Nun, das wird sein was das menschliche tatsächlich
sieht wie die unterstrichenen Link, so einfach ist das.
Also lassen Sie uns versuchen, diese.
Lassen Sie mich es zu retten.
Ich bin immer noch in hello.html.
Aber in den Versionen online, werden Sie sehen, die tatsächlichen Dateinamen wir bereits vorgefertigt sind.
Lassen Sie mich gehen Sie vor und laden.
Und jetzt ist es ein sehr berauschend Seite noch.
Aber wenn ich den Mauszeiger über sind-- und es ist ein wenig klein,
aber-- Sie in den Grund sehen können linken Ecke des Bildschirms,
es ist in der Tat werde google.com.
Und wenn ich auf, dass, wird es Schneebesen me Weg zum eigentlichen Google.
>> Aber bemerken hier eine Chance für Ausbeutung, nur nebenbei.
Und wir kommen wieder, andere kommen Fragen der Sicherheit vor lang.
Da gibt es diese Zweiteilung zwischen wo Sie gehen und was Sie sagen,
Sie könnten etwas tun this-- http://www.google.com.
OK, und jetzt, wenn ich neu zu laden nach dem Speichern die Seite,
es sieht aus wie werde ich zu Google.
Aber es gibt keinen Grund, warum ich haben, um zu Google gehen, oder?
Ich könnte tatsächlich so etwas wie gehen badguy.com, laden Sie die Seite hier.
Und beachtet, es sieht immer noch wie Google.
Und nur wenn ich scharf genug hier zu schweben
sehe ich es auch werde gehen Sie zu einem anderen Ort.
>> Also, wenn Sie jemals bekommen haben eine E-Mail, insbesondere
ein von Paypal oder scheinbar von Paypal
fragen Sie sich anmelden auf Ihr Konto, dies
Deshalb sollten Sie nie immer auf Links in E-Mails,
ehrlich gesagt, alle Links in E-Mails.
Wenn Sie wissen, Sie haben tatsächlich Geld in Paypal oder Bank
von Amerika oder Fidelity oder jede Website, manuell eingeben es.
Da schauen Sie, wie einfach es ist, jemand in Vorlage zu betrügen, was
sieht aus wie ein Link.
Aber es eigentlich könnte gehen absolut überall.
>> Und es gibt weit größere Bedrohungen als diese.
In der Tat ist dies ein wenig einer Tangente nur, doch
der besten, die ich je gesehen habe die seit geschlossen wurde,
ist jemand haben Leute zu-- so könnte sagen,
Klicken Sie hier, um sich anmelden Ihrem Konto, ein Bankkonto.
Und dies war Bank of the West.
>> So jemand kaufte dieses.
Und es ist ein wenig leichter zu sehen es in einer Mono proportionale Schriftart gezoomt
in auf einem 30-Fuß-Projektor.
Aber wenn es kleine Schrift in eine E-Mail, die Sie erhalten,
das sieht aus wie bankofthewest.com, nicht bankofthevvest.com,
die jemand hatte 10 $ gezahlt, um zu kaufen.
Und dann dieser führte sie zu der Äquivalent einige schlechte Website.
>> Und du wirst sehen too-- tatsächlich wir tun können this-- wenn ich auf die eigentliche Website,
bankofthewest.com wieder Rückruf vom letzten Mal
dass, wenn dies ihre Webseite und du bist neugierig, wie es funktioniert,
man kann sicherlich zu gehen Chrome Developer Tools.
Und Sie können alle sehen HTML schön dort formatiert.
>> Aber mehr auf den Punkt, Sie cam-- wir schließen
this-- Sie zu Ansicht Entwickler Quelltext anzeigen.
Warum ich nicht einfach kopieren Sie all das und dann habe ich
kann in meinem kleinen gedit Fenster gehen hier und mache meine eigene Webseite.
Speichern Sie diese in hello.html.
Und wahrscheinlich das wird zu brechen, denn es ist nicht so einfach in der Regel.
Aber jetzt, wenn ich neu zu laden meine eigene Seite auf Eigene CS50 Appliance und traf reload,
OK, brach ein paar Sachen.
Aber ich bin mir ziemlich nahe daran, meine eigene Banking-Website, oder?
All dies HTML--
>> [Gelächter]
>> DAVID J MALAN: -I nicht actually-- und Sie
wissen, dass es jemanden gibt, tatsächlich auf diese Links auch.
So klar, brach ein paar Sachen.
Aber das wird dazu führen, uns in eine Diskussion,
unnötig gerade jetzt, als zu dem, was CSS, Cascading Style Sheets sind,
und wie Sie tatsächlich laden Sie die anderen HTML-Dateien
und JPEG-Dateien GIF-Dateien, die Website verwenden könnte.
Aber all das ist erfüllbar.
Aber es wirklich darauf an, Diese sehr einfache Heuristiken.
>> So, jetzt ist nur durch eine überfliegen lassen Einige andere Beispiele von HTML
nur, um Ihnen ein Gefühl zu geben von dem, was Sie sonst noch tun können.
Zum Beispiel ist dies list.html.
Angenommen, ich wollte eine Web-Seite mit einer Liste der Häuser in der Quad.
Ich könnte den ul-Tag für ungeordnete verwenden Liste und das Listenelement Kind
und dann durchlaufen over-- oder Liste rather-- die Häuser in Frage.
>> Und wenn ich öffnen Sie diese auf, lasst uns dies tun.
Gehen wir nicht hello.html, sondern list.html.
Verdammt.
Wie kann ich dieses Problem beheben?
Es ist das gleiche Problem wie vorher, oder?
Also lass mich tun chmod-- oops-- chmod a + r list.html.
Und jetzt, wenn ich wieder nach meinem Browser und klicken Sie auf Neu laden, da ist es.
Also, wenn Sie sich jemals gewünscht haben, um eine Liste mit Aufzählungszeichen, können Sie das tun.
Wenn Sie super schickes zu sein und wollen eine geordnete Liste, nicht eine ungeordnete Liste,
ändern diejenigen, die ol, laden Sie die Seite, und Jetzt wird der Browser es für Sie zu nummerieren.
>> Was können wir noch tun?
Nun, ein paar Andere-- wenn Sie lange Absätze der text-- haben
zum Beispiel, einige Lateinischen Text wie this--
und Sie können es in separaten Absätzen möchten, Open P, in der Nähe p für den Absatz-Tag.
Und machen Sie es wieder und wieder.
Und wenn ich jetzt öffnen Sie diese Datei, paragraphs.html, na ja, diese
ist immer ärgerlich.
So, jetzt gehen Sie einfach zurück zu lassen, meine Aufforderung chmod a + r r Sterne .html--
eine nette kleine Joker sozusagen.
Es sollte alle fix diese Probleme für mich.
Lassen Sie uns erneut zu laden.
Es gibt drei Absätze.
>> Und jetzt gehen Sie vor lassen und eröffnen einen anderen.
Wie wäre es mit Tisch?
Du wirst Tabelle sieht bemerken ein wenig komplexer.
Aber es ist das gleiche idea-- Open-Tag, offene Tag,
offen, offen, öffnen, schließen Tag, offene Tag.
Und dies geschieht, um zu stehen Tisch, dessen Grenze ist offenbar
werde ein Dicke 1-- unabhängig dass means-- Tabellenzeile, Tisch
Daten, die eine Zelle bedeutet.
Und wenn ich wieder nach meinem Browser hier und gehen Sie zu table.html,
Sie können etwas sehen wie diese, abscheulich.
Aber wir werden auf den Punkt kommen wo wir können tatsächlich
die Dinge schöner als das.
>> Also lassen Sie mich jetzt festgelegt.
Es gibt Trauben von mehreren Tags.
Und HTML ist wunderbar abholen weil, ehrlich gesagt, alles, was Sie tun müssen,
bei bestehenden Webseiten aussehen , mit denen Sie vertraut sind.
Und du bist wie, oh, das ist, wie sie taten dies ästhetisch.
>> Oder Sie können sich bis alle Online Ressource, wie HTML funktioniert,
und du wirst sehen, dass es eine gesamten Wortschatz der anderen Tags.
Aber mit der einfachen mentalen Modells Allein, dass fast jeder Tag, das Sie öffnen
hat, ist es geschlossen werden wirklich nicht ausreichen, um sich selbst zu lehren
HTML nach verstehen diese Grundideen des Tags
und Attribute und die Wohlgeformt dass wir gesprochen haben,
nichts schließen, dass wir vielleicht zu öffnen so dass wir nicht zu verwechseln einen Browser.
Also lassen Sie uns nun zu nehmen diese ein interessanter Ebene
indem Sie auf der tatsächlichen.
Und lassen Sie uns zu meinem Mac gehen hier zu google.com.
Und jetzt notice-- wir dies tun.
Ich gong um zu gehen Einstellungen Sucheinstellungen.
Ich möchte zum Ausschalten dieses lästige Instant Ergebnisse Sache, wo es sofort
beginnt die Reaktion auf Ihre Eingabe.
Packen wir älteren Schule, so wir tatsächlich sehen, was los ist.
>> Also werde ich rette mein Google-Einstellungen hier.
Und jetzt notice-- ich zu gehen Suche nach so etwas wie Katzen.
Und es ist immer noch Auto tun Komplett hier, aber basierend auf Dinge
Menschen haben in der Vergangenheit eingegeben haben.
Aber bemerken, was passieren wird.
>> In der URL im Moment ist dies nur google.com.
Und technisch ist es Slash.
Google ist nur das Speichern eines Zeichen und uns, dass nicht angezeigt.
Sie zeigen uns https, nur Super beruhigend, dass wir sein
an einem sicheren und verschlüsselten Seite.
>> Also lassen Sie mich gehen Sie vor und suchen für Katzen.
Nun ist diese habe wirklich überwältigend schnell.
Sehen Sie in der Länge dieser URL.
Aber es stellt sich heraus, dass die meisten von diesem Zeug in der URL ist eigentlich ziemlich nutzlos.
Ich werde anfangen zu löschen Dinge, die ich nicht verstehe.
Ich sehe Katzen.
Ich verstehe, Katzen.
Ich weiß nicht, warum Katzen sind wieder da.
Ich weiß wirklich nicht, was dieser Unsinn ist.
Also ich werde einfach zu halten Hervorhebung und Löschen Zeug
dass ich nicht verstehe, Destillieren der URL in genau dies.
>> Nun lassen Sie mich noch einmal einzugeben.
Es sieht aus wie Google funktioniert immer noch.
Also aus irgendeinem Grund, sie Zugabe bist ein Menge Sachen, die standardmäßig auf ihre URL.
Aber es ist nicht unbedingt erforderlich.
Also, was ist schön wäre es damit?
Nun, lassen Sie mich gehen Sie vor und eröffnen Chrome Inspector.
Es gibt eine kleine Maus Abkürzung dafür.
>> Gehen Sie auf die Registerkarte Netzwerk.
Und jetzt lassen Sie mich neu zu laden Diese Seite noch einmal.
Und ich halte die Umschalttaste.
Nebenbei Browsern neigen dazu, zwischenspeichern oder speichern
Informationen nur für Effizienz willen.
Aber in der Regel, die Umschalttaste gedrückt halten und Nachladen wird alles erzwingen
vom Anfang zu starten.
Und das ist, was ich will, hier zu tun.
>> Und all diese bemerken Zeilen, die gerade erschienen.
Es stellt sich heraus, daß in jedem gegebenen Bahn Seite, kann es nur eine Datei sein
involved-- hello.html-- oder es vielleicht 52 sein, wie in diesem Fall.
Wenn ich Besuch google.com, anscheinend, mein Browser
Auftakt 52 separaten HTTP-Anfragen.
Warum ist das so?
>> Nun, zumin was drin aussehen dieser Webseite bis oben.
Es gibt nicht nur Text, aber es gibt tatsächlich Bilder
von Katzen auf die rechte.
Es gibt einen bunten Logo hier oben links.
Es gibt all diese Symbole ein Mikrofon und so weiter.
Es gibt eine Menge von Stücken, Gebäude Blöcke, kratz Stück, wenn man so will,
zu dieser Web-Seite.
Und was der Browser tut auf immer die erste Datei, die
ist diese Zeile hier ist es im wesentlichen Iteration über die HTML-top
nach unten, von links nach rechts, auf der Suche nach Dinge wie Image-Tags oder anderen Tags
erwähnens anderen Dateien werden und wenn es sie sieht, geht und holt sie
via HTTP, lebensfähigen Ganzen Umschlag Metapher,
und dann zeigt sie in der entsprechenden Stelle in der Webseite.
>> Aber beachten Sie hier, wenn ich den Schwerpunkt auf dem ersten Wurf, suchen Katzen,
feststellen, dass in der Tat ist es mit HTTP 1.1.
Und leider, Google Chrome jetzt in Version 39
ist eine Art Verdummung Dinge nach unten und nicht zeigen uns die aktuellen Überschriften.
Aber was war in der Tat schickte eine Anfrage für nicht zerschneiden, sondern / search? q = Katzen.
>> Nun, warum ist das wichtig?
Nun, ich werde zu folgern daraus, dass, wenn Sie Google
unterstützt Abfragen dieser Form, warum nicht ich meine eigene Suche zu implementieren
Motor für CS50, sondern nur die vordere Zweck nur die grafische Benutzeroberfläche.
Und wir werden das hintere Ende auslagern, die tatsächliche Suchergebnisse auf Google.
>> Also, wie kann ich dies tun?
Nun, lassen Sie mich in gedit hierher zu gehen.
Und lassen Sie mich gehen Sie vor und öffnen bis, sagen wir, eine neue Datei.
Und ich werde dies sparen vorübergehend als Such-0.html.
Und dann irgendwann, werden wir schnell uns auf die, die ich bereits vorgefertigt sind.
>> Und ich bin zu gehen schnell schüren doc Typ
html offene Klammer html Klammer zu html.
Dann werde ich den Kopf zu tun enge Kopf-Open-Titel CS50
Suchen Sie stattdessen der Google-Suche.
Hier unten werde ich haben der Körper, hier unten nahe Körper.
Und jetzt brauche ich CS50 suchen.
Und tatsächlich, wir bauen diese schrittweise.
Ich werde weitermachen und schließen diese und tatsächlich legte es in meinen öffentlichen Verzeichnis.
Also gib mir nur einen Moment.
Suche-0.html-- ich zu gehen zeitlich nennen es search.html.
Ich werde es chmod a + r search.html.
Und jetzt bin ich dabei, es zu öffnen.
Alles klar, das war also schnell.
Aber das Ziel war einfach zu uns auf den Punkt kommen
der mit diesem Text Datei namens search.html.
Also nicht viel zu noch aussehen.
Ja, wenn ich zu meinem Browser und gehen Sie zu search.html, das ist alles es ist.
Aber wissen Sie was?
Ich kann ein wenig schicker sein.
Ich in einem Buch gelesen, dass es eine Überschrift Tag namens h1.
Und ich werde weitermachen und verwenden zu öffnende h1 und nahe h1.
Laden Sie die Seite.
Und jetzt ist es größer und kühner, gar nicht so interessant,
aber zumindest strukturell interessanter.
Aber jetzt lassen Sie mich ein anderes Tag einzuführen.
Es stellt sich heraus, es gibt eine Form-Tag.
Und lassen Sie mich diesen Tag zu schließen.
Und es stellt sich heraus, es gibt ein Eingang-Tag,
hat ein Attribut namens Typ, der ist der Datentyp des Feldes,
wenn man so will.
Und wird sich vom Typ Text sein.
Und sein Wert wird um CS50 suchen sein.
Close-Tag.
Und es geht um keine Vorstellung sein Öffnen und Schließen mit Schlagworte zu trennen.
>> Lassen Sie mich gehen zurück über hier und sehen, was los ist, neu zu laden.
Anreise interessant.
Es sieht aus wie es ist ein Textfeld.
Und eigentlich wollte ich nicht um einen Wert noch dort setzen.
Lassen Sie mich wieder hier und tatsächlich bekommen dieser Wert zu befreien, um es einfach zu halten.
Anstelle eines Wertes, was ich wollte um dieses Ding zu geben war ein Name.
Und ich weiß nicht, was es ist, also werde ich zurückkommen.
>> Aber unter dem möchte ich Eingabetyp zu tun = einreichen.
Und dieser Wert wird CS50 suchen sein.
Und wir werden, warum ich sehen bewegt den Wert auf diese.
Als ich neu laden, scheine ich jetzt Die Anfänge meiner eigenen Suche
Motor, super scheußlich, obwohl ehrlich gesagt, ist es
kein Weitwurf von dem, was Googles Standardseite aussieht.
>> Wenn ich jetzt hier, kann ich geben Katzen und hoffentlich auf Suchen.
Aber ich bin noch nicht ganz fertig, weil ich nicht realisiert,
Offensichtlich eine Datenbank.
Ich habe nicht gecrawlt die Web-Suchergebnisse.
Also muss ich, dass bei Google auszulagern.
Also, wie kann ich das tun?
>> Nun, zunächst einmal alles, was ich brauchen, um hinzuzufügen und Action
zuschreiben meine Form-Tag, ist http://www.google.com/search.
Und ich weiß, dass nur vom Haben Dazu suchen eng geschlossen
an ihren URLs.
Und jetzt nehmen Sie eine Vermutung.
Wie sollte diese Textfeld wahrscheinlich bezeichnet werden, basierend auf dem wir kamen
aus der Zeit vor?
>> PUBLIKUM:? Q.
>> DAVID J MALAN:? Q.
Und wir wissen nicht wirklich Frage müssen markieren es stellt sich heraus, aber q ist in der Tat darauf
q für die Suche wahrscheinlich durch Standardmäßig nur weil das ist,
was Larry und Sergey kam mit vor Jahren.
So, jetzt lassen Sie mich diese Seite neu zu laden.
Es sieht nicht so viel anders.
Aber jetzt schau, was passiert.
>> Wenn ich schreibe bei Katzen und Klick CS50 Suchen und loslassen,
merke ich bekommen entführt weg, um tatsächliche Google.
Nun, Google ist, ein wenig ärgerlich, dass sie
Anhängen eines zusätzlichen Parameters, wenn man so will, auf die URL.
Das ist alles Geschehen automatisch auf Google Seite.
>> Der wichtigste Teil ist, dass ich scheine um diese Anforderung generiert haben hier.
Und in der Tat, das ist, was passiert.
Wenn Sie HTML haben, dass sieht so aus, diese
ist eine Art von Web-Entwicklern Notation zu sagen, gehen Sie vor und erstellen Sie ein Formular
dass, wenn es abgegeben, es wird auf diese URL gehen.
Und wenn die URL bereitgestellt Werte für Dinge wie q,
nicht nur auf diese URL gehen.
Eigentlich gehen Sie zu Frage Marke und dann q = Katzen.
Fügen Sie den Parameter, dem HTTP Parameter so.
>> Und nur um super präzise, was gerade hier-- gefolgert
aber ich werde mehr explicit-- ist dass die Methode, die ich verwenden möchte
ist zu bekommen, anstatt etwas wie Post, die wir irgendwann sehen.
Also kurz gesagt, einfach durch Verständnis HTML und mit einige ziemlich einfache Tags,
Wir können nun damit beginnen, erstellen unser eigenes Frontend Benutzer
Schnittstelle mit einem Such Motor dahinter.
>> Aber dies ist natürlich ziemlich scheußlich.
Lassen Sie mich also tatsächlich eröffnen eine etwas bessere Version.
Das ist der, den ich vorbereitet in Voraus, dass hat einige Kommentare.
Aber Sie, denn ich sehe, ziemlich neu ist.
Also das ist schon online verfügbar.
Und ich habe gerade präventiv gehen Sie zu https nur um es einfach zu halten.
>> Und jetzt eröffnen eine Enttäuschung nächste Iteration diese.
Ist die Version 1 statt 0.
Was springt heraus an Ihnen, wie leicht in diesem Beispiel anders?
>> PUBLIKUM: [unverständlich].
>> Ja, es gibt diesen Text align Zentrum.
Das ist ein bisschen komisch hier.
Aber dies ist in der Tat neu.
Und vielleicht erraten, was passieren wird.
Wenn ich jetzt zu meinem Browser und besuchen search-1.html,
es ist fast dasselbe.
Aber es ist ein Schritt näher wobei ein wenig mehr hübsch.
Es ist immer noch hässlich, aber schöner, dass zumindest alles jetzt zentriert.
>> So stellt sich heraus, dass das, was ich bin mit wird eine andere Sprache überhaupt genannt
CSS, Cascading Style Sheets.
Und CSS, ehrlich gesagt, ist eine Art der, in meiner persönlichen Meinung nach,
ein grausam gestaltet Sprache.
Es ist sehr ärgerlich zu erinnern all die verschiedenen Einzelheiten.
Aber es ist was die stilisiert gesamte World Wide Web heute.
Ich beleidigt jemand.
In Ordnung.
Also gehen wir zurück und sehen Sie hier wie wir eigentlich mit diesem.
Und es stellt sich heraus, zumindest ist es eigentlich eine ziemlich einfache Sprache.
Es ist nur Schlüsselwertpaare, Eigenschaften und Werte, Eigenschaften und Werte.
Tatsächlich ist hier ein solche Eigenschaft und Wert.
>> Einfach mit dem Stil Attribut auf meinem Körper-Tag
und es mit einem Wert von a Wort Doppelpunkt und ein anderes Wort,
oder eine Eigenschaft und einen Wert, Ich kann die Ästhetik beeinträchtigen
der Web-Seite, nicht notwendigerweise der Struktur vorhanden,
aber die Ästhetik davon.
Und gerade durch googeln um, merke ich, dass CSS, Cascading Style Sheets,
unterstützt eine Eigenschaft namens text-align, deren Wert
links, rechts oder in der Mitte, zum Beispiel.
>> Also wenn ich jetzt neu zu laden diese Seite, was ich getan habe bekommen
war eine zentrierte Seite aber immer noch ziemlich hässlich.
Fahren wir fort und öffnen bis Version 2 der Suche.
Und jetzt merke ich habe ein wenig mehr getan.
Beachten Sie, dass Sie sich hier im Inneren des Kopfes Tag, kann es mehr als Titel.
In der Tat, es gibt eine Stil-Tags.
Und das ist, wo es wird immer ein wenig chaotisch seeing CSS manchmal.
>> Beachten Sie, dass ich scheine etwas haben dass strukturell ganz anders aussieht.
Aber hier ist der Name der Tag Ich möchte stilisiert.
Hier sind unsere alten Freunde lockigen Hosenträger und geschlossene geschweifte Klammer.
Und dann ist hier, dass Eigenschaft und deren Wert.
>> Wenn ich diese Datei zu laden, search2.html, Das Ergebnis ist identisch.
Aber es ist ein Schritt in Richtung besseres Design.
Durch Ausklammerung dieses CSS, ich habe es nicht mit meinem HTML vermischt.
Und in der Tat, wie wir sehen werden, konnte ich Wiederverwendung diese Eigenschaften und Werte.
Wenn ich wollte Sträuße machen Teile meiner Web-Seite zentriert,
Ich habe nicht den style = text-align geben Zentrum ganz über dem Platz.
Ich kann an einem Ort setzen Vielleicht, wie sich an der Spitze.
>> Aber auch das ist nicht das beste Design.
In der Tat, eines der Dinge, die Sie lernen, Wie Sie mehr und mehr Zeit verbringen
Web-Programmierung ist, dass die mehr können modularisieren Dinge und Faktor Dinge
wie H-Dateien lassen Sie uns Faktor Sachen aus, mag helpers.c uns Faktor Dinge herauszulassen
vor ein paar psets.
Ebenso könnten wir wollen, dies zu erreichen.
>> So bemerken in der Version drei search.html Ich habe
bis der Kopf gereinigt die Seite und setzen Sie einfach
in diesem, ein Link-Tag, das im Gegensatz zu dem Namen,
nicht geben Ihnen einen Hyperlink.
Es verbindet in einer anderen Datei durch ein href, dessen Wert in diesem Fall
ist search-3.css
Also ich merke, wir schnell gehen.
Aber alles, was ich tue, ist eine Art der bewegliche Sachen herum.
Lassen Sie mich offen search-3.css.
Da ist es, nichts wirklich zu ihm.
Ich habe gerade kopiert und eingefügt in eine neue Datei, ähnlich wie wir einkalkuliert Zeug
in andere Dateien vor.
Und die result-- komplett underwhelming--
wird auf genau die gleiche sein.
Aber wir ziehen toward-- nein, ist es nicht.
Oh, ich weiß, warum.
>> So scheint es ein Fehler zu sein.
Und es ist in einem gewissen Sinn.
Aber lassen Sie mich öffne meine Registerkarte Netzwerk.
Lassen Sie mich die Seite neu.
Ach, warum ist die CSS nicht angewendet?
Nun, die CSS-Datei, ähnlich, hat Welt lesbar zu sein, so zu sprechen.
Und es ist auch noch verboten.
Also lassen Sie mir einen chmod a + r der Sternpunkt CSS-- whoops--
wir sind dot CSS ist nur der Dateierweiterung für CSS-Dateien.
Nun lassen Sie mich zurück zu meinem Browser und laden.
OK, ein wenig besser.
>> Nun lassen Sie mich tun eine letzte Sache.
Auf der Suche-4.html.
Ich habe eine Version, die ich dachte nur, war viel cooler, wenn auch weit mehr
kompliziert.
Schauen wir uns das Ergebnis zuerst.
Schlie uns mehr Raum zu geben.
Ändern Sie dies zu den Such-4, ein.
>> Und nun ein paar Dinge sind gebrochen.
Ich werde zurückgehen in meinem Verzeichnis hier.
Und jetzt bin ich nur tun ein chmod a + r auf einem file--
weil ich weiß, es heißt exists-- logo.gif, das ein Bild ist.
Und jetzt neu zu laden.
Und wow-- so jetzt bin ich ziemlich nah, ehrlich gesagt,
um die Version von Google 1999 gefallen, und ehrlich gesagt, die 2014-Version von Google,
richtig?
>> So ist es jetzt gehen, um ihre Website, Letztendlich, wenn ich nach Katzen.
Und in der Tat ist es.
Aber was habe ich anders machen in dieser Version 4?
So werden wir nicht zu sehr auf sie eingehen hier.
Sie finden diese in Problem zu sehen set sieben schließlich.
Aber merke ich habe ein paar Dinge.
>> Ich führte ein div tag, die Abteilung ist,
im Geiste zu einem Absatz-Tag.
Aber ein Unternehmensbereich ist wie, hier ist eine rechteckige unsichtbaren Bereich
des Bildschirms.
Geben wir ihm eine einzigartige Kennung, eine Fußzeile, nur
damit wir reden können es in unserem HTML anderswo.
Hier ist ein weiteres div auf der Seite dessen ID werde zufrieden sein.
Es ist der Inhalt der Seite.
Und hier ist der Kopfzeile der Seite.
>> Mit anderen Worten, ich habe Wesentlichen in HTML bin mental
Betrachten dieses Web-Seite als drei Komponenten, einem Kopf
hier mit diesem unsichtbaren Rechteck, der Inhalt in der Mitte, und dann
die Fußzeile unten, auch obwohl wir nicht sehen, diese Dinge.
Weil ich in meinem Kopf Seite hier, oder in einem CSS-Datei,
Ich kann diese Syntax verwenden.
>> Header ist kein Tag.
Es ist eine Kennung, so stellt sich heraus, dass dadurch #header,
Ich kann jetzt einen oder mehrere anwenden Objekte, die dem Header.
Ich kann den gleichen Inhalt zu tun, das gleiche für Inhalte.
>> So zum Beispiel, in der Fußzeile, Ankündigung alle diese Eigenschaften ich hinzufüge.
Und ich weiß, dass sie nur existieren durch Lesen bis zur Dokumentation für CSS.
Schriftgröße wird smaller-- zu sein so dass einige relative Schriftgröße.
Das Gewicht wird sich kühn zu sein.
Margin-- wie viele Pixel rund es-- ist 20 Pixel.
Und es geht um zentriert werden.
>> Aber gerade jetzt, die Seite sieht wie folgt aus.
Wenn ich mich nicht zufrieden mit mein Exemplar genau dort,
Ich könnte so etwas wie Farbe Rot zu tun.
Und dann kann ich diese speichern, laden, und jetzt habe ich die Fußzeile stilisiert.
So ist dies nur anspielend auf die Macht von dem, was Sie in einer Web-Seite tun können
die Dinge zu ändern um.
>> Und noch viel cooler als diese, wenn Sie wollen herumzustochern mit aktuellen Websites,
Sie können sie nicht dauerhaft ändern.
Aber wenn ich öffnen Chrome Inspector wieder
und ich gehe nicht auf der linken Seite hier, die von Facebook HTML zeigt,
sondern zeigt auf der rechten Seite Seite alle seine CSS,
Entweder und kann Dinge ändern on the fly.
Also lassen Sie mich gehen Sie vor und tun dies.
>> Lassen Sie mich im Voraus und Kontrolle gehen klicken Sie auf diesen Zufallswort hier,
unterschreiben, und klicken Sie auf Inspect Element.
Chrome sehr günstig springt an Die H1-Tag, das Facebook verwendet.
Und merken Sie hier Facebook hat Art von faul
hart codierte Schriftgröße als Feriendomizils.
>> Also die kühle Sache ist aber, dass, wenn ich eigentlich gehen hier
und sagen, oh, Facebook, Ich mag es nicht, dass 64 Pixel können wir nun Facebook ändern.
Natürlich, wir sind nur veränderte sie für mich persönlich im Moment.
Aber das ist nur eine andere Werkzeug in unserem Werkzeugkasten
das wird es uns ermöglichen, zwicken und herauszufinden, und auch diagnostizieren
Probleme in unserem eigenen Web-Seiten.
Und wir ähnlich gehen könnte über hier, was dasselbe ist.
Wenn Sie wirklich wollen hübsch machen, ich meine, jetzt kann man wirklich mutieren die Seite
und verrückte Dinge tun.
>> Also, warum ist das alles sinnvoll?
Nun, letztendlich sind wir gehen zu wollen, zu sein
in der Lage, Web-Seiten zu erstellen, die werden von unseren eigenen Backends angetrieben,
nicht nur Google und Auslagerung der Back-End gibt.
Wir haben tatsächlich wollen, dass die Wert, zum Beispiel,
Handlungs unserer Suchmaschine zuschreiben nicht an jemand anderen zu gehen,
aber so etwas wie search.php, wo search.php ist auf unserem eigenen Server,
nicht auf jemand anderes.
>> Und so, um dorthin zu gelangen, die wir eigentlich brauchen, um eine neue Sprache einzuführen.
Also haben wir bereits an einem neuen sah Sprache hier oder zwei wirklich, HTML
und CSS.
Aber sie sind wirklich nur strukturellen und ästhetischen Sprachen.
Sie sind keine Programmier Sprachen per se.
Und das ist ungefähr so ​​viel formaler Zeit, wie wir für sie ausgeben werde.
Weil wir nun beginnen an PHP übergehen.
>> So PHP ist eine tatsächliche Programmiersprache.
Es ist eine Skriptsprache in dem Sinne, dass es
soll leichtere Gewicht als so etwas wie C
Und es ist eine interpretierte Sprache, was bedeutet, es ist nicht kompiliert.
Also auf den Punkt gebracht, was bedeutete wenn wir eine Sprache wie C verwendet
und wir hatten es zu kompilieren?
Was bedeutet es, kompilieren C-Quellcode?
PUBLIKUM: [unverständlich].
DAVID J MALAN: Sag es noch einmal?
PUBLIKUM: [unverständlich].
DAVID J MALAN: Perfect.
Es stellt sich in binäre.
Es stellt sich in Nullen und Einsen von den tatsächlichen Englisch artigen Quellcode.
Und dann können wir tatsächlich laufen diese Nullen und Einsen
indem sie durch die CPU durch Doppelklick eine Ikone
oder das Ausführen eines Befehls.
>> PHP und Python und Ruby und Perl und JavaScript
und Trauben von anderen Sprachen interpretiert
Sprachen, das heißt Sie nicht kompilieren sie nicht.
Vielmehr sie als Eingabe zu füttern Sie ein Programm namens einen Dolmetscher.
Und dass Dolmetscher, die jemand anderes geschrieben,
liest den Quellcode von oben nach unten, links nach rechts und nur interpretiert
diese Linien und tut, was Sie sagen.
>> Also, wenn Sie stoßen auf eine Zeile print sagt,
es muss nicht unbedingt zu konvertieren Print zu den entsprechenden Nullen und Einsen.
Es hat nur diesen Interpreter wie ein großer, wenn die Bedingung, die besagt,
wenn Anweisung Programmierers ist Print, dann tun Sie das Folgende.
So ist es es gerade interpretiert durch Art der Argumentation
durch das, was Sie sagen, es zu tun.
>> Und PHP ist eine dieser Sprachen.
Und vor PHP Jahren wurde entwickelt Gerade für Web-Programmierung.
Und es war zunächst eine sehr schlampig unordentlich Sprache.
Und in der Tat, es gibt eine riesige Menge schlechte PHP-Code gibt.
Aber die Sprache selbst ist über die Jahre gereift,
so sehr, dass es jetzt eigentlich eine wunderbare nächste Schritt
pädagogisch ab, weil es so verdammt bekannt vor allem
Sie haben gerade in den letzten Wochen gesehen.
>> Die eine anfängliche Differenz werden wir sehen, ist es keine Hauptfunktion mehr.
Wenn Sie das Schreiben von Code beginnen, es ist nur werde, egal was noch ausgeführt werden,
wie wir gleich sehen werden.
Inzwischen ist hier, was ein Variable sieht aus wie in PHP.
Es ist ein wenig anders, aber nur knapp.
>> In PHP gibt es nicht starke Typisierung.
Es gibt Wochen Typisierung, was bedeutet, einfach da
sind Datentypen wie Strings und Zahlen und andere Dinge.
Aber Sie nicht stören Angabe was sie sind, nicht mehr.
PHP-Werte ist es für Sie heraus.
Das Dollarzeichen ist nur eine Entscheidung dass die PHP Menschen gemacht Jahren
vor, so dass jede Variable in PHP gerade beginnt mit einem Dollar-Zeichen.
Es ist eigentlich ganz nützlich, springt heraus an Ihnen ein wenig mehr.
>> Aber danach, diese ist ein Zustand, in PHP.
Was ist anders im Vergleich zu C?
Trick question-- nichts, das ist eigentlich wirklich nett.
Boolesche Ausdrücke in PHP-- gleich.
Boolesche Ausdrücke mit und gegenüber oder, Schalter, Schleifen, Schleifen, loops-- OK,
dieses ist anders.
>> So stellt sich heraus gibt es eine paar andere Funktionen in PHP.
Einer von ihnen ist eigentlich diese, Das ist wunderbar bequem.
Wenn $ Zahlen ist ein Array, das Sie haben, zuvor in einem Programm deklariert,
Sie diese Phantasie für jedes Konstrukt haben daß anstelle der Ausführung aller daß
lästige I gleich 0 ist, I weniger als diese, [? I ++?],
für jede Zahl als Zahl, wobei jede jener Dollarzeichen Werte ist nur
eine Variable, und der letztere Sie wie ich denken kann
Man könnte es, was Sie wollen.
Ich nannte es Nummer.
Das wird durchlaufen das Array angerufenen Nummern.
Und bei jeder Iteration ist es werde automatisch zu aktualisieren
für Sie das Dollarzeichen Nummer variabel, so dass Sie ständig
Zugriff auf die Variable, die Sie wollen, ohne irgendwelche eckige Klammer zu tun
Notation oder Indizierung in ein Array.
>> Darüber hinaus haben wir sogar Dinge wie Arrays, die fast gleich aussehen,
außer es ist sehr häufig, wie wir sehen, sowohl in PHP und JavaScript
vor, initialisieren Sie ein Array mit eckigen Klammern.
C verwendet geschweifte Klammern.
So ist es etwas anders, obwohl wir haben nicht wirklich nutzen diesen Trick viel.
>> Aber noch stärker, PHP hat assoziative Arrays,
Das ist eine andere Art sagen Hash-Tabellen.
In der Tat, wenn Sie einen Hash deklarieren möchten Tabelle in PHP, anders als in C-, wie viele
Codezeilen kam es zu nehmen tatsächlich umzusetzen eine Hash-Tabelle in C?
Oder wie viele Zeilen Code ist es nehmen, um eine Hash-Tabelle in C zu implementieren?
So ist es wahrscheinlich eine Menge, nicht wahr?
Es ist ein paar Dutzend, vielleicht 100 oder 200.
Es ist nicht-triviale.
Oder es geht darum, zu sein, wie Sie werden bald sehen, nicht-triviale
um eine Hash-Tabelle zu implementieren [Unverständlich] und auch ein Versuch.
Aber in PHP-- und ehrlich gesagt, ich Wahrscheinlich sollte man nicht sagen, diese
bis Monday-- in PHP, wenn Sie wollen eine Tabelle, fertig.
Das ist ein Hash table-- so mit einer Codezeile.
Und
>> Viele Sprachen tun.
Viel Spaß mit pset fünf.
So viele Sprachen tun.
Sie geben Ihnen diese Abstraktionen dass andere Menschen, andere Programmierer,
haben für Sie erstellt, so dass Sie können auf ihren Schultern stehen
und starten Sie mit Ideen, die Super sind überzeugend, wie Hash-Tabellen und Bäume
und versucht.
Aber Sie müssen nicht unbedingt implementieren diese Dinge selbst.
>> Und so letztlich, was wir gehen PHP verwenden
wird möglicherweise die Programme schreiben des sogenannten Befehlszeile.
Wir könnten jedes Programm neu wir haben in diesem Semester bisher geschrieben,
außer vielleicht Breakout, die SPL verwendet, die spezifisch für C vor.
Aber jedes andere Problem eingestellt, sicherlich Mario und Caesar
und Vigenere und [? Knacken?] Und weiter, wir
könnte neu implementieren in PHP und wahrscheinlich ein wenig leichter.
>> Aber was wir letztendlich gehen Verwendung von PHP für Web-Programmierung ist.
Und wir werden die Einführung nächste Woche ein mentales Modell, ein Paradigma genannt
MVC, Model View Controller, die, wenn Sie die Programmierung gemacht habe
bevor in Python oder Rubin oder anderswo, Sie
könnte dieses Team mit weiß Rails und Django und dergleichen.
Aber wenn man neu in sind auch dies, werden Sie sehen,
dass dies tatsächlich eine sehr natürliche Verlängerung der Faktorisierung
und die Art der Gestaltung der Code, den wir haben
wurde in C tun Wir werden jetzt gelten einige dieser Lehren zu PHP
so daß schließlich sind wir Umsetzung unserer eigenen Websites.
Und wenn Sie Art sind hypnotisiert oder staunen
dass wir tun werden all das so schnell,
erkennen, dass fast jeder Semester, fast 90%
von Studenten CS50, einschließlich derjenigen die noch nie programmiert haben,
Ende macht Abschlussarbeiten, dass werden auf Web-Programmierung.
Und so werden Sie, dass die Renditen sehen sind hoch in den kommenden Wochen.
So werden wir Sie dann am Montag zu sehen.
>> Sprecher 1: Und jetzt, Tief Thoughts Daven Farnham.
Hash-Tabellen.
>> [Gelächter]