DAVID J. MALAN: Alles in Ordnung. Wir sind zurück. So ist das Ziel dieser letzten Sitzung ist ein paar weitere Konzepte einzuführen sondern auch geben jedem eine Chance zu Art dehnen von den Fingern und tatsächlich etwas tun, ein wenig hands-on. Das Ziel ist nicht zu drehen uns alle in Web-Entwickler mit irgendwelchen Mitteln, aber wirklich nur um Ihnen einen Eindruck von einigen der Grundkonstrukte was geht in Web-Programmierung und Web-heute Entwicklung, so das statische Seite von things-- keine Logik, keine Programmierung Sprache, nur statische Inhalte. Und es wird uns Gelegenheit geben, um tatsächlich sehen, was ein Web-Server ist, sehen, was eine HTML-Datei ist, was es ist HTTP tatsächlich nach oben dient. Aber bevor wir tauchen in, jede Retrospektive Fragen zu Cloud Computing oder Sicherheit oder irgendetwas dazwischen? Nein? Na gut, na ja, lassen Sie uns tun dies nur für den Fall der Prozess der Anmeldung für etwas dauert ein paar Minuten. Wir werden es im Hintergrund tun lassen. Gehen Sie weiter, wenn Sie könnten, auf diese URL hier-- c9.io. Dies ist ein Drittanbieter service-- Plattform als Service, wenn Sie will-- das wird Sie einladen um sich für ein Konto, und es wird jeder von euch zu geben, ein Konto in der sogenannten Wolke auf die Infrastruktur einer anderen Person, eine Firma namens Cloud9. Aber was ist schön, über ist, dass sie Ihnen eine Annäherung an ein tatsächlichen realen Entwicklung Umwelt, wenn auch in der Wolke und in einem Web-Browser, und wir werden dies nutzen, um tatsächlich experimentieren heute ein wenig. Und dann gehen Sie vor und einfach navigieren Ihr Weg zum Anmeldeprozess wenn Sie könnten. So passieren wir dies in der Klasse zu verwenden, Ich lehre für alle unsere Studenten, sowohl auf dem Campus und ab jetzt, und es ersetzt, was historisch ansonsten war herunterladbare Software. Also, was Sie Zugang gewinnen zu ist eine dieser virtuellen Maschinen, im Wesentlichen, dass ich bereits beschrieben. Also das Unternehmen Cloud9 wahrscheinlich Mieten von einem dritten Party-- in der Tat in diesem Fall Google-- eine ganze Bündel von virtuellen Maschinen dass sie irgendwie zerhacken in die Illusion von einzelnen Servern dass jeder von uns hat die volle Kontrolle über. Es ist nicht ganz richtig zu sagen, dass sie virtuelle Maschinen, obwohl, weil das, was Cloud9 tatsächlich nutzt ist eine etwas neuere Technologie genannt Containerisierung. Und lassen Sie mich dieses Bild packen hier, um dieses Bild zu malen. Ein Container ist, wenn Sie erinnern an das Bild von früher, ein wenig leichter Gewicht als einer virtuellen Maschine. In der Tat, während letzte Zeit sprachen wir über dort wobei ein Betriebs System und ein Hypervisor und dann Gast-Betriebssystem, Gast Betriebssystem, Gastbetriebs System, auf Ihre physische Hardware, Der Unterschied dieser neueren Technologie, Containerisierung, ist, dass sie alle irgendwie teilen das gleiche Betriebssystem. Aber sie immer noch schaffen die Illusion von jeder mit seinem eigenen exklusiven Administratorrechte und Dateien auf dem Server. Aber es gibt weniger Software in zwischen Ihnen und der Hardware. Das Ergebnis davon ist, in Theorie, eine höhere Leistung, weil Sie verwenden oder weniger Ressourcen zu verschwenden auf, dass so genannte Virtualisierungsschicht. So wird dies als Containerisierung von der Natur durch eine Technologie namens Dockarbeiter, die sehr viel kommt in seine eigene. Und das ist etwas, Ingenieure in Ihrem Unternehmen könnte Art von Art zu sprechen beginnen über bald, wenn sie nicht bereits, obwohl es sicherlich nicht Grund auf irgendwelchen Festwagen zu springen. So mit dem sagte, was Sie wahrscheinlich jetzt sehen, ist ein Bildschirm, ein bisschen wie folgt aussieht. OK. Und rufen Sie mich einfach über, wenn nicht. Und wenn SO- ich kommen werde, wenn nicht. Gehen Sie weiter und klicken Sie auf, dass große sowie einen Arbeitsbereich zu erstellen, und Sie werden einen Bildschirm wie folgt zu sehen. Sie können den Arbeitsbereich aufrufen nennen, was Sie jetzt wollen. Und tatsächlich für Einfachheit, gehen und- gut, einige von euch haben bereits Workspaces. Nennen Sie es, was Sie want-- Geschäft, Harvard, Donnerstag, was auch immer Sie möchten. Sie brauchen keine Beschreibung. Sie können es privat verlassen, es sei denn Sie haben bereits eine Reihe von Workspaces. Wenn Sie gezwungen sind, es öffentlich zu machen, das ist für die heutigen Zwecke gut. Auch hier ist eine der upsells. Sie erhalten einen privaten Arbeitsbereich von Standard. Aber wenn Sie wollen mehr, Sie haben für mehr zu zahlen. Ansonsten werden sie zwingen, um Ihre Arbeit zu veröffentlichen. Aber das ist in Ordnung, weil sie auch Ziel dieses auf Open-Source-Communities zu Menschen zu ermutigen, tatsächlich zusammenarbeiten. Und das letzte, was wichtig ist, obwohl, ist, nachdem Sie einen Namen wählen und nachdem Sie privat oder öffentlich wählen, klicken Sie auf HTML5, das große orangefarbene Symbol zweite von links, und klicken Sie dann auf Arbeitsbereich erstellen. Und es wird wahrscheinlich eine Minute dauern oder so, aber Sie werden dann ein Umwelt, wenn Sie das tun, das erinnert sieht aus was ich jetzt habe hier auf dem Bildschirm. Aber noch einmal, könnte es eine Minute dauern oder mehr zu diesem Bildschirm zu bekommen wenn Sie erstellen Arbeitsbereich geklickt haben. Aber Flagge mich nur über, wenn Sie mich möchten einen Blick auf irgendetwas oder beraten zu nehmen. Gut. Also werde ich jetzt in den Hintergrund dieses. Rufen Sie mich an, wenn Sie über scheinen haben technische Probleme. Aber noch einmal, vielleicht nehmen Sie es ein wenig dafür zu öffnen. Und lassen Sie uns voran gehen und reden über das, was es bedeutet tatsächlich eine Web-Seite zu machen, was HTML ist, und wie all dies Jetzt verbindet wie wir beginnen, um tatsächlich etwas von der Technologie. So stellt sich heraus, dass ich kann, gehen auf meinem kleinen Mac hier, Öffnen Sie ein einfaches Programm mit dem Namen TextEdit, oder auf Windows ich konnte offen etwas namens Notepad.exe. Und ich konnte nur einfach etwas tun wie this-- "Hallo, Welt." Und dann konnte ich spare dies als hello.txt Also keine Magie gibt. Das hat nichts mit Web zu tun Programmierung, nichts mit HTML zu tun. Nur die Schaffung einer einfachen Textdatei. Aber es stellt sich heraus, dass ein Web Seite ist buchstäblich nur das. Es ist eine einfache Textdatei mit Text dass Sie auf Ihrer Tastatur könnte, aber es typischerweise, aber nicht immer endet in .txt aber .html oder .htm nicht. Und Sie tun nicht nur Geben Sie Wörter in der Datei. Sie haben tatsächlich die Dinge zu verwenden, genannt Tags oder, allgemeiner ausgedrückt, etwas Markup-Sprache genannt. Also werde ich sehr schnell eingeben und dann die folgende Erklärung. Ich werde zuerst Geben Sie diese, die sagt, hey, Browser, hier kommt ein Web-Seite in HTML geschrieben. Und diese beiden Dinge zusammen sagen, hey, Browser, die folgende ist in der Tat HTML. Hey, Browser, hier kommt die Kopf oder die ganz oben auf meiner Seite. Hey, Browser, innerhalb des oberen Teils meine Seite, setzen Sie einen Titel, das heißt, "hallo, Welt." Hey, Browser, nachdem der Kopf meines Seite, hier kommt der Körper meiner Seite. Und, hey, Browser, der Körper meines Seite sollte auch sagen, "Hallo Welt." Also, was sind die herausragenden Details hier? Dies ist, was ist in der Regel eine doc-Typdeklaration genannt, und, ehrlich gesagt, ist es ein wenig schwer zu merken dies auf den ersten. Sie nur eine Art von copy-paste es. Dies ist der formale Weg zu sagen, hey, Browser, Ich verwende HTML-Version 5, die kam in jüngster Zeit etwas aus. Es ist ein magischer Beschwörung, dass einige Menschen mit einem schlechten Gefühl für Design habe daran gedacht, die zu setzen Ganz oben auf der Datei. Auch wenn es ein wenig obskur, das ist alles, es means-- hey, Browser, hier kommt mit der Version 5 von HTML. Der Rest dieses hat bei uns seit einiger Zeit, historisch, aber es ist schon weiterentwickelt, und es ist wahrscheinlich wurde immer ein wenig einfacher. Beachten Sie einige Merkmale von dem, was ich hervorgehoben habe. Es gibt diese Dinge mit abgewinkeltem brackets-- die linke Halterung und die rechte Halterung. Und bemerken hier die Symmetrie. Und durch die Symmetrie, meine ich, so wie ich haben diese Start-Tag hier oder einen offenen Tag wenn man so will, hier unten habe ich eine close-Tag oder ein End-Tag, das ist unterscheiden sich nur insofern, als es dies hat Slash am Anfang des Wortes HTML. Und Sie können denken dies, wie ich war beiläufig schlägt vor, hey, Browser, hier kommt etwas HTML. Und umgekehrt, hey, Browser, das ist es für den HTML-- beginnen und enden. Inzwischen hey, Browser, hier kommt der Kopf meiner Seite. Hey, Browser, das ist es für den Kopf. Hey, Browser, hier ist der Körper meiner Seite. Hey, Browser, das ist es für den Körper. Und im Inneren davon ist, einige beliebiger Text für den Moment. Und im Inneren des Kopfes, inzwischen ist etwas willkürlich, sondern markiert, so zu sprechen, Text, der sagt, den Titel meiner Seite soll "Hallo, Welt" sein. Nun, jetzt können Sie davon ausgehen, dass Browser haben only-- oder, besser gesagt, Web-Seiten nur zwei parts-- den Kopf und den Körper. Und der Kopf ist in der Regel nur wie in der Menüleiste das Zeug wirklich nur an der Spitze. Und der Körper ist die Eingeweide von der Seite, alles in diesem großen Rechteck dass füllt den Bildschirm. Also werde ich voran gehen und das tun. Ich werde weitermachen und klicken Sie auf Speichern, Datei speichern. Und ich werde zu retten dies als hello.html, und ich werde einfach legte es auf meinem Desktop. Und ich werde gehen vor und klicken Sie auf Speichern. Und notice-- meinem Mac an dest bei mir schreit. Sind Sie sicher, dass Sie dies tun? Und ich werde zu sagen, ja, HTML verwenden. Ich weiß, dass in diesem Fall besser. Und jetzt werde ich auf meinem Desktop zu gehen wo ich diese Datei auf einmal. Und ich werde es doppelklicken. Und Sie werden feststellen, dass durch standardmäßig geöffnet Chrome auf. Das ist, weil das ist Standardbrowser. Und er sagt nur: "Hallo, Welt." Aber es sagt "Hallo, Welt "an zwei Stellen. Beachten Sie links oben. Ziemlich schwer, das zu verpassen. Es ist groß und fett. Und wo sonst scheint es, zu sagen: "Hallo, Welt"? PUBLIKUM: Die Registerkarte. DAVID J. MALAN: Ja, das Register selbst. Also, wenn ich sagte den Kopf der Seite ist alles bis top-- und in der Tat ist dies der Titel. Es ist nur in der Registerkarte hier. Und ich kann dieses Register ziehen aus, um nicht zu verwirren. Dies ist nur ein einziges Register jetzt, und in der Tat sehen wir "Hallo, Welt" hier oben und "Hallo, Welt" hier unten. So ziemlich einfach. Aber es ist auch ziemlich einfach. Und tatsächlich, ich gezoomt. Ich kann die Schriftgröße ändern, nur für die Zugänglichkeit zu vergrößern. Aber lassen Sie uns jetzt etwas tun ein wenig interessanter. Ich werde hoppla zu go--, lassen mich kennen meine Textdatei zurück. Ich gehe zurück zu meinem Textdatei, und ich werde dies zu ändern und sagen "Hallo, Disney World." Sparen. Und gehen Sie zurück zu meinem Browser und klicken Sie auf Neu laden. Und nun es natürlich sagt: "Disney World". Und ich werde künstlich zu vergrößern in nur so ist es einfacher, zu sehen. So, jetzt leider ich irgendwie wollen zu-- tatsächlich, das ist ein Feature Mac. Ich möchte auf Disney World zu klicken und gehen irgendwo wie disney.com, aber das funktioniert nicht. So ein Grundprinzip der Bahn Hyperlinks, Links, die an anderer Stelle gehen. Wie mache ich das? Nun, ich könnte einfach sagen, "Hallo, http://www.disney.com." Speicher das. Neu laden. Aber auch dies nicht anklickbar. Und was ist schön hier, auch wenn dies ist noch nicht funktionsfähig, ist, dass es scheint, dass die Browser buchstäblich nur tut was ich es zu tun erzählen. Also, wenn ich geben Sie einfach die URL wie diese, es geht mir nur um die URL zu zeigen. Ich brauche Tags oder Markup verwenden Sprache sagen, tatsächlich der Browser noch mehr zu tun. Also werde ich voran gehen und löschen dies für einen Moment. Und ich werde sagen, hey, Browser, starten Sie einen Anker hier, ein Link sozusagen. Und die hyper-Referenz, das Ziel dieser Anker, sollte diese URL sein. Und meine Zitate bemerken. Ich konnte in einfache Anführungszeichen zu verwenden, aber Sie müssen konsequent sein, und ich würde in der Regel nur verwenden doppelte Anführungszeichen es einfach zu halten. Beachten Sie, ich werde den Tag zu schließen. Und dann hier werde ich zu sagen: "Disney World". Und jetzt brauche ich einige symmetry-- Klammer auf, / a, geschlossene Klammer. So was habe ich eingeführt? Wir haben schon ein paar Tags hatte. HTML, Kopf, Titel, Körper, sind alle Tags, so zu sprechen, mit offenen und geschlossenen Pendants. Beachten Sie aber, dies ist eine Art grundsätzlich anders. Dies ist, was wir nennen in HTML ein Attribut. Und ein Attribut nur ein Schlüssel-Wert-Paar. Dies ist eine gemeinsame Sache in Computer science-- Schlüssel-Wert-Paar. Es ist eine Art Werkzeug des Handels. Ein Schlüssel und ein Wert. Ein Wort und dann einige andere Wort oder Wörter. Und in diesem Fall ist der Schlüssel href, und der Wert ist, dass die vollständige URL. Und was ein Attribut tut, ist es beeinflusst das Verhalten eines Etiketts. Und in diesem Fall müssen wir beeinflussen das Verhalten des Anker-Tag, denn wir brauchen zu verankern um diesen Link zu irgendwo. Und wie Sie das tun, ist mittels des Attributs. Also werde ich voran gehen und speichern Sie die Datei jetzt. Gehen Sie zurück zu meinem Browser und reload. Und voila, haben wir nun die Anfänge einer legitimen Webseite. Super einfach, aber wenn ich den Mauszeiger über this-- Bekanntmachung in der linken unteren Ecke, es ist super-klein. Aber Sie sehen www.disney.com. Und wenn ich es klicken, in der Tat diese Handrührer mich disney.com entfernt. Nun wird das Merkwürdige hier ist, dass es nicht die Besten-- die meisten marktgängigen URL, aber das ist in Ordnung, da diese Datei nicht gibt es auf dem World Wide Web. Es existiert als lokale Datei in scheinbar meine Benutzer directory-- / jharvard-- für John Harvard-- / Desktop. Aber es hat eine URL. Es passiert einfach vor Ort zu sein. Leider kann keiner von euch besuchen dies, weil, wenn Sie diese Adresse ein, Sie würden Ihrem Browser erzählen, suchen Sie nach einer Datei namens hello.html auf Ihrer Festplatte. Und natürlich, es sei denn, Sie haben Folgende entlang wurden manuell, es wird dort nicht existieren. Also das ist in Ordnung. Wir müssen noch einen Weg, schließlich, diese Datei in das Web zu bekommen, aber lassen Sie uns necken neben ein paar Auswirkungen auf die Sicherheit von dem, was wir gerade sah und es zurück auf die frühere binden Diskussion von heute Morgen. Es stellt sich heraus, dass, wenn ein Browser buchstäblich nur tut was ich sagen, es zu tun, und es scheint, der Fall zu sein, dass ein Anker-Tag ist durch den Wert beeinflusst von Dieses Attribut namens href aber es zeigt diese Text, dies scheint zu implizieren, dass ich die URL setzen könnte in beiden Orten und dann neu zu laden und jetzt die URL sehen und auf die URL gehen. Beachten Sie, wenn ich schweben über der unteren linken, Ich bin immer noch in der Tat zu disney.com. Also, wenn Sie jemals gewesen phished-- P-H-I-S-H-E-D-- mit einer dieser gefälschten E-Mails aus wie PayPal Ihrer Bank, Sie haben wahrscheinlich Links innen bekommen der E-Mail, die Sie lesen, dass Tells Sie hier klicken, bestätigen zu gehen Ihr Passwort oder Ihr Geburtsdatum bestätigen oder soziale oder etwas sozial Engineering Sie offen zu legen Information. Nun, ich könnte Art nehmen Vorteil dieser, könnte ich nicht? Ich konnte etwas sagen wie www.paypal.com. Und statt disney.com, ich gehen könnte, wie, badguy.com. Neu laden. Und wie einfach ist es, hinters Licht zu führen, insbesondere ein nicht-technische Leser oder ein kursorisch lesen Leser als zu klicken ein Link wie diesen, die, wenn ich es-- klicken Ich will eigentlich nicht badguy.com zu gehen. Ich weiß nicht, was tatsächlich da ist. So paypal.com, bemerken, ist was er sagt, es wird, aber natürlich, wenn ich nach unten schauen super-low, es ist ein wenig verschwommen, aber es sagt badguy.com. Das ist das einzige im Moment sagen dass ich an der falschen Stelle werde. Und wenn ich vorhin gesagt, dass Banken sollte wirklich nicht zu fördern oder zu trainieren Nutzer zum Klicken auf Links, diese ist nur eine Manifestation davon. Und es ist so einfach. Sie sind jetzt ein Gegner, wenn Sie tun so etwas wie dieses und versuchen, einen Benutzer zu betrügen in Ihre Website besuchen. Aber jetzt, wir halten Dinge schön und sauber. Wir gehen voran gehen und Zurückspulen diese Änderungen. Aktualisieren Sie die Seite. Und ich gehe zurück zu disney.com. Mal sehen, ob wir nicht ärgern können diese auseinander, ein wenig mehr. So "hallo, Disney World." Ich werde hier unten zu sagen. Ich werde etwas Raum Vielleicht machen. "Wir hoffen, dass Sie Ihren Aufenthalt genießen!" Sparen. Neu laden. Es ist rea-- nicht, das ist nicht was soll ich, nicht wahr? Ich meine, wenn ich meinen Text bin Behandlung Datei wie ein Textverarbeitungsprogramm, was hast hoffen, dass Sie hier passieren würde? Ja, ich fühle mich dort wie sollte hier ein Zeilenumbruch, so fühlt es sich Buggy in gewisser Weise. Aber das ist eigentlich absichtlich, denn nach wie vor, der Browser wird nur tun, was Sie es zu tun erzählen. Ich habe gesagt, dass es nicht Linien zu brechen. Ich habe gesagt, dass es nicht nach unten zu bewegen, auch obwohl, intuitiv, ich fühle mich wie ich es tat. So stellt sich heraus, dass wir brauchen ein wenig mehr Markup, und ich werde dies zu beheben, wie folgt. Ich werde das Vorwort zuerst hallo mit dem, was ein Absatz-Tag genannt wird. Und dann gehe ich voran gehen und wickeln diese andere Satz in einem anderen Absatz-Tag, obwohl sie sind super-kurzen Absätzen. Jetzt werde ich zu speichern. Neu laden. Und jetzt haben wir, dass Raum, und wir Art haben die Semantik zwei getrennte Absätze. Das ist alles schön und gut, aber es wäre nett sein, um ein Bild zu dieser Seite hinzugefügt werden, also werde ich für zu gehen, schauen Mickey Mouse auf Google Images. Und nur zum Spaß, ich bin geht um das Bild zu greifen. Ich gehe jetzt nach vorne gehen und greifen die URL dieses Bildes, obwohl es anders Möglichkeiten, dies zu tun. Denn jetzt werde ich einfach die URL zu kopieren. Ich werde in meinem Text zurück zu gehen Datei, und ich werde hier zu sagen, img src = Zitat unquote dass URL, super-lange. Und dann die Idee eines Bild ist ein wenig anders. Es gibt wirklich keine Ahnung von Start ein Bild und das Ende eines Bildes, wie ein Anfang, ein Ende-Tag markieren. So fühlt es sich ein bisschen komisch an mir tun dies semantisch, ein close-Bild-Tag zu haben. Es ist nicht falsch. Es ist vollkommen richtig, und es ermutigt, aber es gibt Kurzschreibweise. Ich kann Art von gleichzeitig öffnen und schließen Sie die gleichen Tag, und das wird der Browser glücklich zu machen. So ist es nur ein wenig prägnanter für Dinge dass konzeptionell tun wirklich nicht sinnvoll zu beginnen und enden. Sie sind einfach da, oder sie sind es nicht. Also werde ich diese zu speichern und gehen Sie zurück zu meiner "Hallo Welt" -Seite und reload. Und es ist ein wenig außer Kontrolle geraten, denn das Bild ist eigentlich ein wenig groß, aber das ist in Ordnung. Ich konnte es in einem Programm ändern. Oder wissen Sie, was. Nur um zu zeigen, ich bin tatsächlich zu sagen dass die Breite dieser Sache sollte nur 200 Pixel, 200 Punkte sein. Lassen Sie mich gehen Sie vor und sparen und neu zu laden, und jetzt die Seite sieht ein wenig mehr zumutbar ist. Aber das Muster bemerken. Nun, ich habe Art gelehrt Sie alle von HTML in gewissem Sinne, zumindest konzeptionell, weil alle HTML ist diese tags-- öffnen Tags, Tags geschlossen, und Attribute, ändern ihr Verhalten. Und anscheinend jede Tag kann Null oder Eins haben oder zwei oder mehrere Attribute, die jeweils was tut etwas ein wenig anders. Nun, wie Sie wissen, was existiert? Sie hören nur auf jemanden wie ich Ihnen sagen, was vorhanden ist, oder Sie gerade Google um für ein Tutorial auf HTML, und es ist wirklich so einfach. Wahrlich, wenn ich war ein under Vor Jahren lernte HTML, einer meiner Mathematikunterricht Assistenten nur ausgegeben ein bisschen Zeit, um mir Nachhilfe für wie eine halbe Stunde, eine Stunde, und dann war ich auf dem Weg. Ich war auf dem Weg zu machen die scheußlichsten Websites überhaupt, die, anscheinend habe ich nicht wirklich jenseits fortgeschritten. Aber der Punkt ist, dass, sobald Sie verstehen diese einfachen ideas-- wenn obskure Text-- aber diese einfache Ideen von einem Gedanken beginnen und Schließen eines Gedanken, halten alles schön ausgewogen, etwas nach oben, das Modifizieren Verhalten von diesem Tag, das ist wirklich alles es ist zu ihm. Und in der Tat, wenn wir gehen jetzt zu so etwas wie google.com-- tatsächlich, lassen Sie uns einen Ort zu gehen, ein wenig mehr reasonable-- stanford.edu. Und ich werde zum Ansehen zu gehen, Entwickler, View Source. Es ist hässlich, aber notice-- und ich werde in Bekanntmachung vergrößern einige Sachen, die vertraut schon ist. Es ist das hier oben, die ein Browser. Hier kommt HTML5. Es gibt HTML. Offenbar gibt es eine tat Attribut, das ich nicht verwenden, der angibt, die Sprache der Seite, und dies kann mit automatischer helfen Übersetzung und solche Sachen. Hier ist der Kopf der Seite. Hier ist der Titel der Stanford-Seite. Es gibt einen Tag habe ich nicht reden über yet-- Meta-Tag. Es ist nur eine Art Hintergrundinformation. Es hilft mit SEO, oder Suchmaschinenoptimierung, oder Google-Suchergebnissen oder dergleichen. Aber wenn wir suchen halten, halten suchen, ist hier der Body-Tag. Und es gibt Bündel anderer Tags haben wir noch nicht gesprochen. Aber Div ist eine für ein Aufteilung der Seite. Es ist wie ein unsichtbares Rechteck wenn Sie möchten Art von geistig teilen Sie Ihre Seite in verschiedene Einheiten online. Und dann viel divs I zu sehen, die so genannte Klasse, aber wir werden darauf zurückkommen. Dies ist interesting-- Forms. Formulare sind alle über das Internet. Alle Suchfeld du bist je benutzt ist eine Form. Und so wollen wir tatsächlich sehen. Bilden. Aktion. Die Wirkung dieser Form, für was auch immer historischen Gründen ist die URL. Methode ist "post". Es stellte sich heraus, dass die HTTP-Anfragen verwenden können das Verb "kommen", wie wir zuvor gesehen haben, oder "post". Und wird einen Unterschied sehen dies in einem Augenblick. Lassen Sie uns tatsächlich sehen, was das ist. Lassen Sie mich an der Stanford-Seite zurück. Welche Form sprechen sie über, denken Sie? Was springt heraus an Ihnen? PUBLIKUM: Suchfeld ein. DAVID J. MALAN: Ja. So oben in der rechten oberen hier ist das Suchfeld ein. Und das ist, wie sie umgesetzt es-- ein Tag, das buchstäblich offene Klammer Form ist. Und dann lassen Sie uns für etwas suchen. Lassen Sie uns für einen Kumpel zu suchen von mine-- "Nick Parlante." Eingeben. Und natürlich ging es um eine etwas andere URL. Lassen Sie mich hier zurück. Lassen Sie uns nach "Kurse". Verdammt. Wir gingen zu einer anderen URL. Also, das Hinzufügen von Stanford etwas Magie dass sie nehmen mich nicht an die URL dass wir sahen in der action-Attribut gibt. Aber diese Form wird hier umgesetzt rein durch diese Markup hier, diese Tags. In der Tat, hier ist der Eingang für die Art der Suche, die Sie wollen. Hier ist der Eingang für eine andere Art der Suche. Hier ist der Eingang für die Zeichenfolge selbst. Und so ist das Ziel nicht zu wickeln unsere Gedanken um all diese Tags aber nur um zu sehen. Es ist nur das Öffnen und Schließen Tags und suchen Dinge. Ja? Victoria? PUBLIKUM: [unverständlich] DAVID J. MALAN: Das ist eine gute Frage. Das ist ein wenig schwieriger zu sehen. Lassen Sie mich darauf zurückkommen Frage in nur wenigen Minuten wenn wir etwas betrachten genannt CSS oder Cascading Style Sheets, und wir können versuchen, zu schließen, wie viel von der Seite. Also, wenn wir nun einen Blick auf google.com, Lassen Sie uns sehen, was ihre Seite aussieht. Sie würden they're-- das ist nett heute. OK. Alles erledigt. In Ordnung, so Quelle anzeigen. Sie würden denken, Google hat wirklich schön Quellcode. Also, es scheint, was hier vor sich geht? Und in der Tat ist dies nicht einmal HTML. Dies ist etwas, genannt JavaScript. Und lassen Sie uns weitermachen und gehen. Ich weiß nicht einmal, wo die Seite beginnt. Ich werde Befehl zu verwenden, F, Klammer auf HTML. Also gut, da ist es. Ich fand den Anfang der Seite, und es gibt so viel Zeug hier drin. Was ist eigentlich los auf? Nun, Sie wissen, was, Das können wir bereinigen. Wenn ich gehe stattdessen das Inspizieren Symbolleiste, diese spezielle Diagnose-Tool, und gehen nicht zum Netzwerk, wo wir heute kommen immer wieder, aber wenn ich gehe zu Elements, was ist wirklich schön ist, dass ein Browser hat eine Menge viel besser die Augen, als ich. Und kann der Browser lesen dass Durcheinander von einer Web-Seite, dass HTML-Mails, die wir gerade sah, und es kann analysieren sie oder lesen und zu analysieren und eine Neuformatierung in einem schönen menschenfreundliche Art und Weise. Also, was ich sehe jetzt in diesem Bildschirm hier unter Elemente, die exakt gleichen Inhalt, aber sie haben eingerückt alles, sie haben es koloriert, aber es ist genau das gleiche Text dass ich vom Server heruntergeladen. Und was schön ist, ist jetzt kann ich sehen im Körper, für instance-- Ankündigung, die Seite ist noch zusammengesetzt nur einen Kopf und einen Körper, und ich kann hierarchisch hier tauchen. Beachten Sie, dass Google zu haben scheint dieses und dieses zu divs--. Das kann ich erweitern. Es gibt eine ganze Reihe von anderen divs. So ist es ein wenig komplexer. Aber warte. Das scheint so viel mehr lesbar, relativ, als dies. Warum ist Google peinlich selbst nur durch das Senden Diese sehr große Verwirrung von Code von einigen Art nur etwas zu implementieren das sieht auf den ersten Blick so einfach? Wie, warum sie nicht hinzufügen mehr Räume? Warum haben sie nicht getroffen Geben Sie wie ich es tat? Schauen Sie, wie gut ich war auf einer Web-Seite zu schreiben. Ich traf so fleißig ein. Ich eingerückt so alles so hübsch und lesbar ist. Warum üben Google nicht das gleiche? PUBLIKUM: [unverständlich] DAVID J. MALAN: Gut. Sehr gerecht. Sie haben nicht einige Person bei Google manuell die Homepage der Aktualisierung nicht mehr. Es ist nicht 1999 mehr. So haben sie Software. Sie haben andere Werkzeuge, die dynamisch generieren sie sind HTML. Natürlich, das Code selbst wurde von Menschen geschrieben, aber die Realität ist, es ist ziemlich fair zu sagen, der Browser tut sicher nicht egal, wie chaotisch der Code ist. Aber es gibt noch mehr zwingenden technischen Grund dass Google vertreibt ihre HTML Code in einer solchen schlampig, scheinbar überwältigende Art und Weise alles zusammen gepackt mit sehr wenig sehr wenig way-- in der Art und Weise der Formatierung wie ich es tat. PUBLIKUM: [unverständlich] DAVID J. MALAN: Schneller? Warum? Und was hast du gesagt, Lydia? Schneller? Warum schneller? PUBLIKUM: [unverständlich] DAVID J. MALAN: Es gibt kein Platz mehr zu lesen. Ja. Also denken Sie über das, was ein Raum ist. So ist jedes Zeichen auf der Tastatur nimmt eine gewisse Menge an Platz darstellen, entweder physisch, wie es nimmt so viel Platz, oder irgendwie unter die Motorhaube, das erfordert Speicher. Und als ein aside-- und wir werden reden mehr über diese tomorrow-- jedes Zeichen auf der Tastatur erfordert typischerweise 8 Bits oder ein Byte. So ein Muster von 8 Nullen oder Einsen oder nur 1 Byte, wie wir Menschen würden sagen, typisch. Also das ist klein, aber es ist immer noch nicht Null. Es ist immer noch eine gewisse Menge an Platz. Also, wenn ein Ingenieur oder Google Hits die Leertaste nur einmal, und nehmen wir an Google-- es ist super-popular-- annehmen, dass eine Milliarde Menschen besuchen Sie die Homepage am Tag, oder eine Anzahl von Leuten Besuchen Sie die Homepage ein Milliarden mal am Tag, wie viele zusätzliche Bytes hat, dass Software-Ingenieur kosten nur Google von einmal seine Leertaste schlagen? PUBLIKUM: [unverständlich] DAVID J. MALAN: Nicht ganz so schlimm. Nur ein Byte mal eine Milliarde. so a-- PUBLIKUM: 8 Milliarden Gigabyte. DAVID J. MALAN: Nicht 8 Milliarden Euro. 8 Milliarden Bytes. Aber 1 Gigabyte. 1 Gigabyte würde die Maßeinheit sein. Wenn er oder sie tut zwei Räume, 2 Gigabyte. Drei Gigabyte. Recht? Er skaliert teuer. Und so in Fällen wie Google, die, gewährt, sind Extremfälle, es gibt noch andere Probleme, die nur entstehen durch eine sehr vernünftige Entscheidungen zu treffen oder sehr einfache menschliche Maßnahmen ergreifen, weil es diese vergrößerte Wirkung. So ist einer der Gründe Das sieht so komprimiert genau wie Victoria said-- es war einfach mal so durch Computer erzeugt. Also keine große Sache. Lassen Sie den Browser es herausfinden. Aber auch bewusst nicht viel Platz haben, weil der Raum ist nicht erforderlich. Und der Raum tatsächlich kostet Geld. Entweder kostet Zeit, weil gerade zu schieben dass viel mehr Daten aus google.com Hauptquartier nur hat bekam eine gewisse Menge an zu nehmen Zeit, auch wenn es Millisekunden ist oder Mikrosekunden, aber das summiert sich über so viele Benutzer, oder wahrscheinlicher, es kostet wahrscheinlich Geld. Google verbindet wahrscheinlich jemand anderes in der Welt, eine von denen Peering Punkte, und wenn sie eine Art finanzielle Beziehung wodurch ihre Daten kostet Geld, sie könnte genauso gut minimieren, wie viele Daten sie spuckt auf ihre Internet-Verbindung. So ist die lustige Sache, aber letztlich, oder vielleicht die beruhigende Sache, obwohl dies, dass selbst sieht schrecklich am Ende des Tages überwältigend, es ist immer noch genau die gleichen Grundsätze wie Diese sehr einfache Seite hier eines HTML Seite. Also einfach zusammenfassen und so, dass Sie haben eine kanonische Version, wenn Sie nicht waren hier folgende entlang nach Wahl, hier könnte die einfachste von Webseiten, so etwas mit vielleicht später spielen. Nun, lassen Sie uns eine Einführung jetzt paar andere Ideen. Wir freuen uns über die Einführung einen so genannten Stil-Tag. Wir können diese Seite stilisieren in interessanter Weise. Während also HTML E-Mail dreht sich alles um die Auszeichnung von die Daten, die Angabe Art zu einem Browser, wie die Daten zu strukturieren, wo man es ausdrückte, CSS, oder Cascading Style Sheets, ist eine zweite Sprache, die allgemein wird mit HTML vermischte wie wir see-- aber wir können reinigen dass in einem moment-- up, das dauert es die letzte Meile, und es stilisiert es. Es erhält die Farben genau richtig, die Schriftgrößen genau richtig, die Positionierung genau richtig. Es geht nur um die Ästhetik oder Formatierung, nicht über die Fundamentaldaten selbst. Und der einfachste Weg, um zu zeigen, dies ist vielleicht Beispiel vorangehen. Also werde ich gehen über auf meine einfache Textdatei. Und in nur einem Augenblick, ich werde gehen uns durch den Prozess dies zu tun, uns selbst. Ich werde meine Datei zu gehen zurück hier und laden Sie die Seite nur um zu bestätigen, wie es aussieht. Das ist, wo wir jetzt sind. Ich fühle mich wie Kinder würden genießen mit etwas Farbe auf dieser Web-Seite. Also werde ich hier zu gehen in den Kopf der Seite. Und ich werde Stil / Stil zu tun. Und dann innerhalb dieser, ich werde den Körper meines page-- zu sagen, und diese Formatierung ist, bei den ersten Blick vielleicht ein wenig seltsam, aber konventionell. Ich werde, dass der Hintergrund zu sagen Farbe dieser Seite sollte grün sein. Und das ist leider Art nicht das beste Design. Beachten Sie, dass die zuvor in der Welt der HTML, Ich sagte, dass Attribute sind diese Paare Schlüssel-Wert. Etwas gleich Zitat unquote "etwas." In der Welt der CSS, das war entworfen von einigen unterschiedlichen Leuten, sie entschieden, dass in ihrem Welt, Schlüssel-Wert-Paare würde Wort Kolon etwas sein. So ist es die gleiche Idee, aber. Es assoziieren Wert mit einigen Schlüssel, irgendwie beeinflusst das Verhalten dieser Seite. Und Sie können sich wahrscheinlich vorstellen. Was ist das wohl gehen Wenn Sie noch zu tun, noch nie gesehen vor HTML oder CSS? PUBLIKUM: Ändern Sie die Hintergrundfarbe. DAVID J. MALAN: Ja, Ändern Sie die Hintergrundfarbe. Und insbesondere das Hintergrundfarbe des Körpers. Aber soweit die Körper für jetzt ist das Web page-- es ist das einzige, was unter der Titelleiste really-- es wird wahrscheinlich beeinflussen die gleiche Sache. Also mal sehen. Lassen Sie uns das sparen. Gehen Sie hier und neu laden. Es ist ziemlich scheußlich. Und was geht ab hier ist ein Nebeneffekt. Ich wählte gerade dieses Bild zufällig. Warum ist die grüne nicht dringt hinter Mickey? PUBLIKUM: [unverständlich] DAVID J. MALAN: Genau. Es stellt sich heraus, dass die Bilder, hübsch viel alle Bilder, die wir verwenden könnten, sind alle rectangles-- von Rechtecken. Auch wenn Mickey hat einige Kurven zu sich selbst und hat einen Hintergrund, dass Hintergrund hat etwas zu sein. Es muss weiß sein. Es hat sonst schwarz oder etwas zu sein. Es kann transparent sein. Und in der Tat, konnte ich öffnen Mickey Mouse hier in einem Programm namens Photoshop oder etwas ähnliches und ändern Sie all das weiß Hintergrund transparent, so würde die grüne durchscheinen. Aber das ist etwas, was ich brauchen würde, von mir selbst oder Grafiker zu fragen oder ein Designer an meinem Unternehmen, zum Beispiel, zu tun, vor allem, da ich gerade diese eine aus dem Internet ausgeliehen. Aber das ist, warum dies geschieht. Also, was sonst könnten wir tun wollen? Nun, wir könnten wir sagen, wirklich hoffen, dass Sie Ihren Aufenthalt genießen. Und zur Betonung, ich will dies stark zu machen, und so werde ich sagen offen starke und schließen stark und dann neu zu laden. Und es ist ein wenig schwer am Projektor, um zu sehen aber vielleicht jetzt wirklich springt bei Ihnen ein bisschen mehr aus. So können Sie Kursivschrift in diesem Add So fett Verkleidung auf diese Weise. Wir konnten die Farben ändern. In der Tat, nur zum Spaß, ich bin gehen voran gehen und tun dies. Ich mag es nicht wirklich, wie mein Absätze sind so nahe zusammen, so könnte ich so etwas tun. Ich werde den Browser zu sagen, ändern sich jedes Absatz-Tag zu haben, Lassen Sie uns sagen-- tatsächlich, wissen Sie was, Lassen Sie uns ausrichten text-align, Zentrum. Und wieder, ich weiß, das nur weil jemand lehrte es mir oder ich sah es in ein Online-Referenz. Also lassen Sie mich dies zu speichern. Und, ach, jetzt habe ich zentriert dort das Bild. Und tatsächlich, weißt du was, wenn Ich bewege mein Bild in einem Absatz tag-- so ein dritter Absatz, obwohl es nicht Text. Lassen Sie uns das Speichern und neu laden. Nun ist die Seite beginnt Art zu suchen von-- ich meine, es ist immer noch ziemlich hässlich, aber zumindest sieht es aus wie ich verbrachte 2 Minuten anstelle von 1 Minute Ich mach das. Und so, inkrementell, können wir machen diese ästhetischen jetzt auf die Seite? Ich habe nicht wirklich die Daten in das geändert anderen Seite als das Wort wirklich hinzufügen. Ich habe Metadaten hinzugefügt, wenn man so will. Hey, Browser, machen die Wort "wirklich" fett. Aber die Daten sind nicht stark. Das ist Metadaten. Die Daten sind "wirklich". So haben wir noch einige die gleichen Konzepte wie zuvor. Nun, natürlich ist dies nicht auf dem Netz ist, also werde ich hier einen letzten Schritt zu tun. Ich werde gehen zu hello.html und nur markieren und diese kopieren. Und jetzt werde ich gehen in Cloud9, die Ich werde Sie zu Fuß in nur einem Augenblick durch. Und Chancen sind Sie werden bald sein, wenn nicht schon, wie dieses an einem Bildschirm. Und lassen Sie mich nur eine schnelle geben Tour von dem, was Cloud9 tatsächlich ist. So Wolke wieder 9 Diese Cloud-basierten Dienst das gibt Ihnen und mir die Illusion der mit unserer eigenen virtuellen Maschine in der Wolke, technisch ein Container in der Wolke, dass wir voll Administratorrechte. Also in der Theorie, niemand in der Welt sonst hat Zugriff auf den Bildschirm Ich bin Blick in die gerade jetzt, außer vielleicht die Menschen die die Website laufen, weil sie technisch haben physischen Zugriff und so fort. Also, was sehen wir in diesem Umfeld? Ich gehe zu verkleinern, denn es ist ein wenig klein. Und lassen Sie mich darauf hinweisen über hier nur für einen Moment. Auf der linken Seite meiner und Ihrer Bildschirm, gibt es eine auf der linken Dateibrowser. Also im Geiste Mac OS und Windows. Dies sind alle der Dateien auf meinem Konto. Und standardmäßig, wenn Ihr Konto ist wie meine, Sie werden sehen, oder bald sehen helloworld.html und readme.md. Über hier auf der rechten Seite, das ist wo meine Textdateien gehen zu gehen. Wenn Sie jemals verwendet Microsoft Word oder Notepad oder TextEdit, dies Wort meine Bearbeitung von Dateien gehen zu gehen. Und dann mit den exotischsten Merkmal dieser Umgebung dass wir müssen nicht wirklich verwenden ist hier unten ein Terminal-Fenster genannt. Wenn Sie DOS benutzt habe aus gestern, das ist das Linux oder die Linux-Äquivalent von DOS. Es ist ein textbasiertes interface-- keine Mausklicks, kein Schleppen. Alles, was Sie tun können, ist der Typ Befehle, aber diese Befehle erstellen können Dateien, Dateien verschieben, öffnen Verzeichnisse, in der Nähe Verzeichnisse, Sie eine beliebige Anzahl von Dingen. Aber jetzt werden wir nur verbringen unsere Zeit hier oben. Und so wollen wir dies tun. Wenn Sie in diese sind Umwelt, von denen Sie sein, wenn Sie einen Arbeitsbereich erstellt gehen bereits voran und gerade nach oben In Datei, einen Moment Neu für. Und das wird Ihnen ein neues Tab hier in der Mitte. Und ich just-- und lasst uns gehen Sie vor und tun dies. Fahren wir fort und jetzt Datei, Speichern und gehen Sie vor und nennen es hello.html, nicht zu verwechseln helloworld.html, die kam mit dem neuen kostenlosen Account, Das ist nur eine Beispieldatei. Sie werden sehen, es plötzlich erscheinen, wahrscheinlich auf der linken Seite, und die Registerkarte wird immer noch geöffnet sein. Und lassen Sie mich Ihnen nun ermutigen, neu zu erstellen Diese Datei oder einige Varianten davon. Und wenn Sie ganz sehen es nicht auf die Bildschirm, ist dies mit den Schlitten identisch dass Sie wahrscheinlich in einem anderen Tab haben. Also kurz gesagt, machen Sie Ihre erste Web-Seite, speichern und dann in nur einem Augenblick, Ich werde Ihnen zeigen, wie Sie Dies kann tatsächlich sehen. Aber ändern zumindest eine Sache. Ändern Sie Hello World an etwas von Ihrer eigenen Wahl, so dass Sie davon überzeugt sind, dass es Ihr Datei und nicht die, die ich gerade erstellt haben. Gut. Und wenn Sie ready-- kein rush-- wenn Sie bereit sind, gehen Sie vor und speichern Sie die Datei Sobald Sie diese Änderungen vorgenommen haben. Und wenn Sie auf die Schaltfläche Run-Taste nach oben top, diese sollte eine neue Registerkarte öffnen, die sagen wird Sie, was URL Sie Ihre Datei zu besuchen, aber es könnte einen Moment dauern, bis Zitat des Zitats "starten Apache", die ist der Name des Web-Servers. Seien Sie also vorsichtig sein, genau zu tun was letztlich in der Datei. So jetzt, werde ich weiter vergrößern. Wenn ich der Eingabe beginnen Open-Klammer HTML, Ankündigung es veranlasst mich, meine Gedanken zu beenden. Und wenn ich meine Gedanken beendet, es automatisch gibt mir die schließenden Tag. Aber die Erwartung ist, dann werde ich getroffen Eingeben und dann nach innen dort zu bewegen und sie den Kopf nach innen und dann mache ich Körper von innen. Und es ist ein wenig auf den ersten seltsam, weil es Arbeit für Sie tun, aber erkennen, dass letztlich es spart Ihnen Tastatureingaben. Und in der Tat ein sehr allgemeines Merkmal Programmierumgebungen in diesen Tagen sowohl für die Web-Entwicklung wie dies und eigentliche Programmierung, was wir morgen reden, ist diese automatische Vervollständigung Funktionen, Dinge, die nur erlauben Programmierer oder Designer weniger Tastenanschläge eingeben zu das Gleiche erreichen. Manchmal ist es gut, wenn. Manchmal ist es einfach ärgerlich. Und wieder einmal transkribiert Sie haben der Schieber oder eine Variante davon, Sie können auf die Schaltfläche Ausführen bis oben klicken. Und dann in den Boden Fenster, werden Sie informiert zu welchem ​​URL können Sie Ihre Webseite besuchen. Mine, zum Beispiel, ist bei business-daharvard.c9users.io und so weiter. Also gut, ja, lassen Sie mich- Fragen? Alle anderen Fragen über nur immer dies funktioniert, bevor wir Funktionen hinzufügen? Und lassen Sie mich schlagen, nur zu bekommen Leute comfortable-- denn es ist eine Sache, nur um Copy-Paste blind, was ich getan habe. Aber nur so, dass die Leute ringen mit mindestens einer To-do, Ich werde etwas Musik zu machen. Ich werde eine Liste vorzuschlagen Dinge, die Sie möglicherweise hinzufügen können. Und Sie können sicher Google verwenden. Und warum tun wir nicht einfach schlagen vor, dass Sie versuchen, zu lösen mindestens ein bestimmtes Problem. Also in Bezug auf die Tags, Lassen Sie mich dies hier wiederverwenden. Eigentlich möchte ich setzen es in einer Textform. Lassen Sie uns sagen, dass unter den Tags könnten wir Verwenden Sie hier sind einige Tags hier. Wir haben den Absatz-Tag gesehen. Jetzt geht es für die automatische Vervollständigung. Absatz-Tag, das Anker-Tag. Angenommen, Sie möchten machen etwas größer, so dass Sie vielleicht like-- das span-Tag kann helfen. Nun, Sie könnten etwas Hilfe benötigen denn das in nur einem Augenblick. Wir haben div gesehen. Sie werden sehen, es gibt Tabelle. Es ist etwas genannt tr, td. Th, td. in einem Moment darauf zurückkommen. Was sonst noch nützlich sein? Es ist stark. Es gibt Betonung oder vielmehr em. There's-- was sonst könnten Sie hier Lust? Nun, wir werden nehmen ein schau dir das an zusammen. Form, die wir gesehen haben. Es gibt Form. Es gibt Eingang und ein paar andere. In Ordnung, also lasst uns dies tun. So beantworten Sie einen Victoria Frage, lassen Sie mich zunächst nur sicherstellen, dass jeder der Lage, ihre hallo zum Laufen zu bringen. Dann lassen Sie mich ein paar andere Ideen. Dann lassen wir die Leute lösen ein Problem auf eigene Faust. Dann werden wir tatsächlich zurückkommen dieser Begriff einer Form, und wir werden tatsächlich neu implementieren zusammen die Front-End-Schnittstelle, sozusagen für Google selbst. Wir werden Google als Backend verwenden und lassen sie tun, die harte Arbeit, die Suche, aber wir werden das vordere Ende neu von Google und das Suchformular dass sie auf ihre eigene Homepage. Und so kommen wir zurück zu diese Tags in nur einem Augenblick. So war das, was ich nur einen Augenblick vor vorgeschlagen. Wir können die Stilisierung zu einem hinzufügen Seite innerhalb dieses Stils Tag, und wir können den Hintergrund stilisieren Farbe, die Textausrichtung, ob es Mitte oder links oder rechts. Aber sehr schnell würden Sie finden oder ein Web-Designer würden feststellen, dass diese wird ein wenig sperrig, weil du tust, was genannt Mischgehalt mit Präsentation derselben. Sie mischen Ihre Daten und die Ästhetik davon. Und in der Tat, wenn man bedenkt, was los ist über Zeit-- passieren Dies ist eine sehr kleine Web-Seite, natürlich. Aber wenn ich fügen Sie Inhalt dieser Seite und ich füge hinzu Stil auf dieser Seite, die Seite sehr schnell bekommt länger und länger. Und angenommen, dass ich will eine zweite Web-Seite, teilt einige dieser Attribute. Angenommen, meine zweite Web-Seite für meine site-- auch, ich will alles Zentrum, und ich möchte auch alles mit einem grünen Hintergrund. Ich werde ziemlich viel zu müssen Kopieren und einige dieser Zeilen einfügen in diese zweite Datei, die sich sehr wohlfühlt. Es wird das Problem lösen. Aber was, wenn ich will eine dritte Seite oder ein 30-Seite oder eine 40-Seite? Jetzt werde ich zu kopieren und Einfügen viel doppelten Code in mehreren Dateien. Und so nehme an, dass Ich entscheide, oder ich gesagt, Hey, wir sind nicht mit ein grünem Hintergrund mehr. Wir gehen mit Orange zu starten. Was müssen Sie ändern? Nun, müssen Sie diesen Stil ändern von grün auf orange, in wie vielen Orten? Wie 30 oder 40 Plätzen. Es ist mühsam. Es ist anfällig für Fehler. Es gibt eine Reihe von Gründen, wo man möchte nicht induzieren diese Art von Schmerz für sich. Und so wäre es nicht schön, wenn wir könnten das, was ich gerade zwischen diesen beiden gelben setzen Tags, diese Stil-Tags, Faktor es aus und legte alle meine Stilisierung in einer zentralen Datei dass alle 30 oder 40 meiner anderen Dateien leihen aus oder irgendwie zu verweisen, nicht anders als die Vernetzung Diagramme taten wir vor? Also, wenn ich hier gehen, ich bin werde tatsächlich vorschlagen dass wir ersetzen die Stil-Tag mit etwas der Link-Tag, genannt die schrecklich ist, schrecklich genannt, weil Sie verwenden die nicht Link-Tag zu schaffen, was wir Menschen wissen, als Link in einer Webseite. Dafür verwenden Sie, welche Tag? Wie Sie einen Link auf einer Webseite erstellen? PUBLIKUM: Die a. DAVID J. MALAN: Der eine oder Anker Tag, die vor zu Disney ging. Der Link-Tag hier zu sagen hat this-- Link zu einer Datei mit dem Namen styles.css, die Beziehung zu dem sein wird, dass es mein Sheet ist. So ist dies eine der S ist in CSS-- Cascading Style Sheets. Stil sheet-- zwei der S ist in CSS. Cascading Stylesheet. Dies bedeutet nur, hey, Browser, gehen finden styles.css auf dem lokalen Server und verwenden Sie es als Sheet das heißt, innerhalb der Datei wird alle die sein, Stilisierungen, die wir gerade gemacht haben. Und so, was diese Datei könnte dies wie sein sollte, gehen. Und ich werde einfach tun dies ist eine schnelle Beispiel weil wir nicht brauchen hier zu viel in das Unkraut zu bekommen. Aber wenn ich das zu kopieren, was ich vorschlagen ist, dass ein Programmierer eine neue Datei erstellen, Fügen Sie in diesen lines-- whoops-- in diesen Zeilen einfügen, speichern Sie es als styles.css, und dann, in die andere Datei, löschen Sie alle, dass und ersetzen Sie es stattdessen mit diesem Link-Tag. Also, wenn ich link href = "styles.css", die Beziehung ist "stylesheet" sein close-Tag. Speichern Sie es. Gehen Sie zurück zu meinem Hello World. Neu laden. Wörtlich ist nichts passiert ist. Das ist eine gute Sache, weil es bedeutet es eigentlich alle Arbeits ist. Um so viel beweisen, nehme ich eine machen Tippfehler, und ich nenne das "Styles.css" mit einem Kapital S, das ist falsch, und dann neu zu laden. Jetzt können Sie es sehen einfach nicht funktioniert. Jetzt, warum? Nun, lassen Sie uns ein verwenden Technik von früher. Lassen Sie mich gehen Sie vor und, in mein Browser, in Chrome, ich bin gehen zu eröffnen, dass besondere Registerkarte Netzwerk nach wie vor, und lassen Sie mich die Seite neu. Was sind Sie nicht überrascht, jetzt zu sehen? Oder vielleicht sind Sie überrascht, sie zu sehen. So oder so, was sehen Sie jetzt? PUBLIKUM: [unverständlich] DAVID J. MALAN: Es ist nicht gefunden. Warum ist es nicht gefunden? Nun, Styles.css-- Kapital S-- nicht vorhanden. Ich misnamed es. Einfache Tippfehler. Aber ich bin immer verständlicherweise jetzt ein 404, da der Server zu sagen, hey, es ist nicht gefunden. Wörtlich Ich weiß nicht, wo sich diese Datei befindet. So als Ergebnis der Browser zeigt Ihnen, was es kann, der rohen Inhalt der Seite, das war ein 200, die HTML, aber die Stilisierung kann nicht werden danach hinzugefügt. Und das ist, was durch Kaskadierung gemeint ist. Sie können es irgendwie hinzufügen nach, und es ist eine Art von verfeinert die Ästhetik der Web-Seite. Und Sie können auch diejenigen außer Kraft setzen Stile mit noch anderen Stylesheet-Dateien wenn du willst. Es ist nicht, aber in diesem Fall gefunden, weil natürlich misnamed ich es. So würde ich das erste zu beheben. Also lassen Sie uns fortfahren und schlagen vor, die folgenden. Fahren wir fort und tun dies. Beginnend mit vielleicht Ihre Hello World-Datei, lassen Sie mich einladen, nur ein paar von Feature-Vorschläge. Also, Victoria, wollte Sie machen einige Text größer, nicht wahr? In Ordnung, so können wir Sie machen Text größer. Und wir werden jede abzupfen nur ein Problem zu lösen. Text vergrössern. Ich werde nicht die Mühe, Schreiben Sie dies, wenn wir haben Kugel-Technologie direkt hier. So einige Probleme. Also werden wir versuchen, um Text zu vergrößern. Gut. Was sonst würde jemand vorschlagen? Was sonst könnten wir wollen in einer Web-Seite zu tun? Lassen Sie uns kommen mit ein kurze Liste der Dinge und dann übertragen auf die Gruppe um dies herauszufinden. PUBLIKUM: [unverständlich] DAVID J. MALAN: OK, Positionstext auf verschiedenen Seiten der Seite? Gut. Etwas anderes. PUBLIKUM: [unverständlich] DAVID J. MALAN: Es ist. So ist ein gif nur ein anderes Dateiformat. Wir haben gerade verwendet, was ein png oder jpg wahrscheinlich? Wir haben ein jpg. Wenn Sie neugierig sind, eine übermäßige Antwort auf Ihre Frage ein jpg ist in der Regel verwendet für Fotografien, weil es unterstützt Millionen von Farben oder 24-Bit-Farbe. Ein gif wird im Allgemeinen verwendet für, wie, Internet Memes diese days-- Animationen, wie animierte Gifs. Aber es kommt eine kleinere Farbe zu verwenden, Palette, nur 256 möglichen Farben, aber es unterstützt Transparenz und Animation. Und dann gibt es png, die unterstützt Transparenz und mehr Farben aber nicht Animation. So ist es ein Trade-off. So ein gif Zugabe, obwohl, wäre funktionell Äquivalent eines png oder jpg zu addieren. Ja. Bildquelle entspricht. So etwas anderes. Lassen Sie uns etwas einfallen lassen, dass wir nach Victoria geschickt zu tun. PUBLIKUM: Fügen Sie Schaltflächen für ein Formular. DAVID J. MALAN: OK. So fügen Sie Schaltflächen für ein Formular. Und wir werden zusammen, die man tun. Also das wird ein perfekter Übergang Recht nach dieser Herausforderung. Noch etwas? Was könnten Sie tun? Die Bahn fühlt sich sehr berauschend wenn das alles ist was wir tun können. PUBLIKUM: Ändern Sie die Farbe des Textes. DAVID J. MALAN: Ändern Sie das, was? PUBLIKUM: Farbe des Textes. DAVID J. MALAN: Ändern Sie Farbe des Textes. Gut. Also, lasst uns dies tun. Nur noch einmal, so dass Sie nicht nur auswendig, genau das tun, was ich tue, Ich werde auf Musik zu machen denn hier vielleicht fünf Minuten. Sie sind willkommen, Google zu benutzen. Sie sind willkommen, mich zu fragen, und Ich werde einen Hinweis in Ihrem Ohr flüstern. Sie sind willkommen, schauen über auf die Schultern. Aber lösen nur eines dieser Probleme. Aber wir werden das letzte tun, die man bildet, wenn wir konnten, zusammen. So fünf Minuten lösen eines dieser Probleme Verwendung von Google, Intuition, oder jede andere Mittel zur Verfügung. [MUSIK SPIELEN] Gut. Keine Sorge, wenn Sie wollen zu halten bastelt, aber ich werde ein paar verderben dieser Antworten. So ist der erste Vorschlag von Victoria war, um Text zu vergrößern. Also gibt es ein paar Möglichkeiten, dies zu tun. Ich habe zur Zeit restauriert mein Bildschirm dieser Größe, obwohl ich gezoomt künstlich nur die Dinge zu sehen. Und lassen Sie uns dies tun. Lassen Sie mich gehen Sie vor und greifen einige allgemeine lateinische Text nur so haben wir etwas, mit zu arbeiten. Also gib mir nur einen Moment. Ich werde drei Absätze machen. OK. Dies wird ein besseres Beispiel sein. Also für die Neugierigen, in mein hello.html, ich habe gerade klebte drei unsinnig Latein Absätzen nur so haben wir einen Text mit zu arbeiten. Und Victoria Ziel war es, machen einen Teil des Textes größer. So konnte ich nach wie vor gehen hier in. Und lassen Sie mich es richtig tun. Ich werde einen Link zu haben Tag, der auf eine Datei zeigt genannt "styles.css," die Beziehung von denen wieder "Sheet." Und dann werde ich zu retten, und öffnen Sie dieses "styles.css." up So wie früher, habe ich die Fähigkeit, in dieser CSS-Datei außer Kraft zu setzen eigentlich die Standard Ästhetik einer Web-Seite, und die Standard-Ästhetik, Natürlich sind ziemlich langweilig. Es ist eine Art normaler Schriftgröße, schwarz Text, weißer Hintergrund, und so weiter. Also nehme ich machen möchte all dieses Textes größer. Ich konnte ein paar Dinge tun. In meiner styles.css Datei, ich könnte sagen, Sie wissen, was, gelten die folgenden der Körper meiner Seite. Gehen Sie voran und machen die Schriftgröße 24 Punkte, Das ist eine Zahl, die ich könnte Verwenden Sie in Microsoft Word. Lassen Sie mich auf meiner Web zurück Seite hier und neu zu laden, und Sie können sehen, dass es ist schon viel größer. Und wir können ein wenig verrückt, wie wir können auf einem desktop-- machen es 96 Punkte. Neu laden. Und es wird immer ein wenig an dieser Stelle unhandlich. Aber ich konnte ein wenig genauer. Statt dessen Anwendung Sheet auf den Körper meiner Seite, was sonst könnte ich es auf, statt, was andere Tag, das könnte noch Funktion in der gleichen Art und Weise? PUBLIKUM: Die p-Tag? DAVID J. MALAN: P-Tag. So würde der Kopf nicht sein richtig, weil der Kopf, Sie können nicht wirklich steuern die Ästhetik. Es gibt entweder Text gibt oder nicht. Aber die p tag-- Ich kann in einem kleinen tauchen tiefer, sozusagen auf den Absatz Tags. Und obwohl es drei, das ist völlig in Ordnung, denn in CSS, wenn ich sage nur "p", das Mittel anwenden, die folgende Für jeden Tag, das diese Spiele Selektor, der Wähler nur wobei der Name des Tags. Egal, wo Sie sehen "P", gelten die Schriftgröße, und lassen Sie uns machen es angemessenen again-- 24 Punkt. Und weisst du was, nur für eine gute Maßnahme, Lassen Sie uns die Farbe machen Rot nur für den Augenblick. Und jetzt, wenn ich neu zu laden, wir jetzt siehe drei hässliche Absätze. Aber jetzt nehme an, dass ich sort von-- Ich möchte den ersten Absatz zu springen an den Benutzer aus. Ich will nicht nur erhöhen die Schriftgröße von allem. Und so möchte ich eigentlich zu identifizieren oder unterscheiden zwischen diesen Absätzen. Lassen Sie uns also von den roten loszuwerden, denn das ist nur irgendwie klebrig ist, und wir gehen voran und machen die Schriftgröße 12 Punkt standardmäßig so dass wir auf etwas zurück ein wenig mehr zumutbar ist. Und jetzt will ich nur die zu erhöhen Schriftgröße des ersten Absatzes. Ich kann dies tun in ein paar Wege, sondern ein Weg, das ist vielleicht am Lehr bei der Moment ist folgendes tun. Lassen Sie mich voran gehen und sagen, das ist Absatz hat eine eindeutige ID von "zuerst." Ich könnte diese etwas nenne ich will. Ich konnte dieses "foo" nennen oder irgendein anderes Wort, aber ich werde es einige zu geben, semantisch sinnvollen Namen wie "zuerst." Dies ist die eindeutige Kennung, die ID, für meine ersten Absatz. Was kann ich jetzt in meinem Sheet tun ist etwas genauer. Anstatt zu sagen, gelten Folgendes an die p-Tag, Ich kann die following-- sagen gelten die folgenden, oder wählen Sie, das HTML-Element das hat eine eindeutige Kennung von "zuerst." Was will ich auf sie anzuwenden? Eine Schriftgröße von 24 Punkt. So habe ich zwei Selektoren jetzt. Man macht alle die Die Absätze 12 Punkt. Aber dieses, vor allem, da es darum geht, second-- es kommt zuletzt im file-- dies hat einen Kaskadeneffekt. Ich habe gerade alle meine Absatz-Tags 12-Punkt, aber jetzt Kaskaden und überschreibt, dass für alle Elemente auf der Seite, jeder Tag in der Seite, deren eindeutige ID Zitat unquote "zuerst." Und der Hashtag in diesem Zusammenhang bedeutet nur, "eindeutige Kennung." Ich stelle sie nicht in der HTML-Datei. I, hier, nur sagen, Zitat unquote "zuerst." Also lassen Sie mich neu zu laden. Und jetzt sehe ich, ah, OK. Ich meine, es ist nicht, dass hübsch, aber es ist eine Art der wie das Vorwort zu einem Buch oder so etwas, wo der erste Absatz ist größer. Könnte noch präziser mit nur die ersten Buchstaben, aber zumindest Ich habe mehr Kontrolle ausgeübt. Jetzt maybe-- vielleicht möchte ich dies zu tun gelegentlich aus irgendeinem Grund, und so will ich nicht, dies zu gelten für nur ein HTML-Tag. Vielmehr wollen wir sagen-- lasst uns auch Folgendes tun. Class = "Import". Während eine ID wird verwendet, eindeutig identifizieren eine Sache, ein Tag, in Ihrer Web-Seite wird eine Klasse sein soll auf einer beliebigen Anzahl von Elementen oder Tags verwendet auf Ihrer Webseite ein. So ist es wiederverwendbar. Eine ID ist nicht wiederverwendbar. Eine Klasse ist wiederverwendbar. Und wissen Sie was, für was auch immer philosophischen reasons-- Ich habe nicht beende meine thought-- Ich werde sagen, dass der erste Absatz und der Absatz sind wichtig. Also werde ich die Klasse anwenden genannt "Wichtig", dass, wenn ich speichern meine Datei und neu zu laden, hat keine funktionelle Wirkung noch. Aber ich habe einige hinzugefügt Metadaten der Datei, Art separaten etwas von den Kerndaten der Datei, so dass jetzt in meinem Stylesheet, wenn ich stattdessen sagen: ".Wichtig" - Sie wissen, alles, was wichtig ist, ich bin gehen zu font-Farbe machen, red-- oder eher nicht font-Farbe, gerade Farbe. Es gibt Widersprüche leider in CSS. Und neu zu laden. Beachten Sie jetzt die erste zwei Absätze sind rot aber nicht die dritte, weil ich nur angewendet, um die Klasse von "wichtig" an den ersten zwei dieser Dinge. Also in IDs, haben Sie die Möglichkeit, sehr genau zu spezifizieren. Mit Klassen haben Sie Wiederverwertbarkeit. Aber in beiden Fällen bemerken die Art der guten Design-Prinzip wo einkalkuliert ich alle die aus Ästhetik meiner styles.css Datei. So gibt es hier keine Unordnung. Es gibt keine Erwähnung von rot oder fett Leiste oder Schriftgröße in dieser Datei. Vielmehr habe ich semantisch, sinnvoll charakterisiert meine Daten als, Hier finden Sie einige wichtige Daten. Hier einige weitere wichtige Daten. Außerdem ist hier die "Erste" meiner wichtigen Daten. So HTML ist alles über Art von Tagging, buchstäblich, Worte und Absätze und Konstrukte in Ihrem Seite mit diesen kleinen Hinweise, wenn Sie will, dass Sie irgendwie nutzen mit andere Techniken wie CSS auf diese Weise. So in der Antwort auf Victorias Frage, wir können Text größer auf diese Weise zu machen. Es gibt so viele andere Möglichkeiten, aber die Schrift tag-- offene Klammer "font" - tatsächlich mehrere Jahre alt ist. Und das ist das Problem, nur zu, mit Berufung auf Online-resources-- sie neigen dazu, überholt sein. Und in der Tat, als veraltet, dass ist schon, weil die Welt realisiert, Was bedeutet "font-size = 7" bedeuten? Er tut es nicht. Und so seit vielen Jahren und zu Diese day-- einer der Seiten hier stellt fest, ist, dass es tatsächlich unglaublich schmerzhaft manchmal noch zu entwickeln Websites für die Netz, weil Microsoft und Google und Mozilla und andere oft nicht darüber einig, wie eine Spezifikation wie HTML zu interpretieren. Es gibt ein Regelbuch für HTML-Code, im Allgemeinen sagt, was jeder Tag bedeutet. Aber manchmal ist es nach links Umsetzung nach Ermessen Microsoft nach eigenem Ermessen und Google. Und so werden Sie sehr oft sehen auf einer Website etwas sieht anders aus auf einem PC als es auf einem Mac funktioniert, und das ist wirklich da, am Ende des Tages, sie haben es bisher nicht testen auch auf beiden Plattformen. Aber es ist auch da vernünftig, intelligenten Leute nicht einverstanden und Unternehmen nicht einverstanden sind, und so eine der Herausforderungen der Programmierung für das Web oder Gestaltung Dinge für das Web Ihre Website in einer Art und Weise schreibt das funktioniert auf jedem Web-Browser. Aber auch das ist nicht vertretbar ist, nicht wahr? Es gibt so viele Versionen von so vielen Browser aus, dass es an einem gewissen Punkt, Sie müssen auch ein Urteil Anruf und Sie haben als Unternehmen zu entscheiden, insbesondere für E-Commerce-Stil Orte, an denen du bist versuchen, die neuesten und besten zu verwenden, Technologien, um eine wirklich gute User geben Erfahrung. Aber ein gewisser Prozentsatz der Benutzer könnte sein noch den Internet Explorer 6 oder 7 verwenden oder 8, insbesondere in Abhängigkeit von der Land, dass sie kommen. Und so sehr häufig konsultierten ist etwas, wie "Web-Browser-Statistiken." Und wenn wir gehen zu-- mal sehen, Wikipedia sehen und wie up-to-date dieses Diagramm ist wenn es einen gibt. Also hier können Sie sehen, wo Browser tatsächlich sind nach Dezember 2015 nach der US-Regierung. Chrome ist mit 42% Marktanteil, gefolgt von IE weitgehend in Corporate-Einstellungen oder PC-Einstellungen, natürlich, gefolgt von Firefox, dann Safari, dann Opera tat es nicht machen die Karte hier aus irgendeinem Grund, und dann andere. Vielleicht ist es unter anderen. Aber noch problematischer als die ist-- auch mal sehen, ob Wikipedia hat Versionen von Browsern version-- Gehen wir zu Browser-Statistiken. IE. Das ist noch nicht genug. Browser-Statistiken. Meine Version. Das wird sein nicht richtig. Lassen Sie uns Versionen zu sehen. Browser-Marktanteil. Mal sehen, ob dies kommt. OK. Nun das ist immer ein wenig nützlicher. Also hier feststellen, dass wir alle verschiedene Versionen von Browsern. Und, mein Gott, wenn Sie look-- Chrome 48, Chrome 47, Chrome 31, Chrome 45. Ich meine, Browser immer mehr aktualisiert, und manchmal einige dieser Änderungen Bedeutung sind in Bezug auf Funktionalität. Und so irgendwann die Produktmanager oder die Ingenieure müssen, um eine decision-- machen Sie wissen, was nur 1% der Welt wird immer noch mit IE 7. Zur Hölle mit ihnen. Wir gehen einfach nicht unterstützen diesen Browser. Und was bedeutet es nicht, zu unterstützen? Es könnte bedeuten, dass die Tasten nicht auf Ihrer Webseite arbeiten, oder es könnte bedeuten, die Formatierung ist komplett aus. Oder haben Sie vielleicht zu machen das gleiche Urteil nennen in mobilen diesen Tagen, wo wir sind geht zu unterstützen IOS nicht 5 mehr. So können die Leute müssen einfach aktualisieren. Oder wir gehen nicht Kuchen zu unterstützen auf Android OS für Android-Geräte, denn als world-- wie die Tech-Welt will sich vorwärts zu bewegen, es will Art der zu ziehen Welt mit ihm, so dass sie es nicht tun müssen auch weiterhin sein abwärtskompatibel, so dass sie bieten neue und gute Funktionen können. Dies ist in der Tat einer der Gründe warum so viele Unternehmen Ausrollen automatische Updates und Art zwingen die neuesten Versionen der Software, die auf uns. Und auch Unternehmen wie Apple Art Sie zwingen, fast oder zwingen Sie in Bezug auf die Marktkräfte ein neues Handy zu kaufen, weil sie nur nicht Ihr altes Handy nicht mehr aktualisieren. So Sie verpassen die neuesten und besten Features, da ist es, sie als ein kostspieliger Unternehmen zu halten ältere, wohl inferior Versionen der Software. Aber der Nettoeffekt ist, dass wir leiden auch dies auch. Werfen wir also einen Blick auf nur ein paar letzte Dinge hier. Lassen Sie uns abschlagen wirklich schnell einige die anderen Kugeln, wenn neugierig. Also, wenn Sie versuchen, zu, beispielsweise Positions Der Text auf verschiedenen Seiten der Seite, ich werde einen schnellen Weg zu tun, aber es ist etwas anderes Wege, dies zu tun. Lassen Sie mich gehen Sie vor und eliminate-- vereinfachen dies wie folgt. Lassen Sie mich meine zurück, nur um einfach, einfach Absätze. Lassen Sie mich auf meine styles.css zurück. Und ich werde nur die simple-- zu verwenden die Sie auf Google haben könnte gesehen oder erinnern von earlier-- text-align rechts. Und diese Seite neu laden. Jetzt scheint alles zu rechtsbündig, wie Sie auf dem Overhead hier sehen könnte. Wir können es ein wenig mehr aussehen Buch-like, und wir können sagen, "rechtfertigen" und neu zu laden. Jetzt ist es schön und Platz auf beide Seiten, die ganz nett ist. Ein weiteres Ziel, das wir hatten hier war die Veränderung Farbe des Textes. So sahen wir, dass mit meinem roten Text. Und nun Schaltflächen für ein Formular hinzufügen. Also, warum versuchen wir nicht genau dies zu tun? Aber lassen Sie mich zunächst auf eine Website, die die meisten von uns jeden day-- Google verwenden. Und lassen Sie uns einen Blick auf, wie Google tatsächlich funktioniert. Aber ich werde dies zu tun. Zuerst lass es mich tun in-- yep, lassen Sie mich zunächst zu Google gehen. Ich werde gehen müssen in Google Einstellungen, weil ich möchte, zu deaktivieren etwas Instant-Ergebnisse genannt. So haben Sie vielleicht bemerkt, in Google diese days-- mich gehen lassen zurück und schalten Sie diese auf. Also, wenn ich starten Sie die Suche für "Katzen" wie diese, feststellen, dass nicht nur Ich erhalte die automatische Vervollständigung up oben, eine plötzliche alle, die Seite selbst scheint auch ziemlich schnell ändern, und das ist Google mit einer Sprache, genannt hilfreich sein, JavaScript zu versuchen. Aber leider, es ist eine Art von vermasselt unsere Diskussion von dem, was gerade passiert, hier unter der Haube. Also ich bin gerade ein bisschen schnell deaktivieren sofortige Ergebnisse. Und ich werde Speichern klicken. Und jetzt werde ich öffnen dass diagnostische Symbolleiste, die ich halten Öffnung unter der Registerkarte Netzwerk. Also lassen Sie uns dies tun. Lassen Sie mich- whoops-- scrollen dies ein wenig nach unten. Und lassen Sie mich nach "Katzen." Und jetzt notice-- tatsächlich, dies ist eine gute Gelegenheit, für einen Moment zu diskutieren. Beachten Sie den Moment, als ich type-- es zu stoppen. Hör auf. OK. Beachten Sie den Moment tippe ich den Brief C, beobachten Sie die unten auf dem Bildschirm. A- T- S. Was bedeutet der Unterseite dieses Bildschirms, meine Registerkarte Netzwerk geschieht vorschlagen wird jeder Mal, wenn ich einen Brief schreiben? Leider ist der Frosch sehr ablenkend heute oder das Kleeblatt oder was auch immer er ist. Was geschah jedes Mal, wenn ich getippt? Und lassen Sie mich klar die Puffer und erneut eingeben. SO- hoppla. Jedes Mal, wenn ich einen Buchstaben eingeben, C- A- T-- so wird eine neue Zeile hält offensichtlich erscheinen. Was bedeutet jeder dieser Zeilen darstellen, auf das, was wir gesehen und besprochen haben so weit? PUBLIKUM: Eine Suche? DAVID J. MALAN: Eine Suche, oder allgemeiner, eine HTTP-Anforderung von meinem Browser zum Server. Nun, warum ist mein Browser macht einen HTTP jedes Mal fordere ich einen Brief schreiben? PUBLIKUM: [unverständlich] DAVID J. MALAN: Ja, es gibt mir diese auto-complete Ergebnisse. Wie, wo diese tun Suchergebnisse stammen aus? Nun, jedes Mal wenn ich geben Sie eine Brief, sendet Google mehr und mehr und mehr von das Wort, das ich bin eingeben. Warum? Weil sie wollen, dass ich ein zu geben besser und besser, besseren Vorschlag, eine Liste von Vorschlägen, zu welchem ​​Wort Ich versuche eigentlich abgeschlossen. Das ist also buchstäblich jeder sagen Charakter geben Sie in Google gesendet, schließlich wird in Masse, aber auch manchmal ein zu einem Zeitpunkt, zu implementieren, um diese automatische Vervollständigung Funktionen, wenn die Daten sind, natürlich auf dem Netz. Nun lassen Sie uns einen Blick darauf werfen, was tatsächlich passiert, wenn ich die Google-Suche klicken. Und dann werden wir diese selbst nutzen. Also, wenn ich scrollen jetzt bis auf den erste Anforderung, die gerade passiert ist. Beachten Sie die folgenden. Es wurde auf eine ziemlich lange gesendet URL-- https://www.google.com/search? und dann eine ganze Reihe von Sachen. Lassen Sie uns dies tatsächlich sehen jetzt im Browser-Tab selbst. Lassen Sie uns hier loswerden der Symbolleiste erhalten. Hier ist die Seite der Suchergebnisse. Und beachten Sie hier die URL. Nun, Sie können sich wahrscheinlich vorstellen, was los ist hier teilweise. Also zunächst einmal eine Definition. Dies ist offensichtlich das Ziel wo die Form vorgelegt wird. Also, wenn ich getippt in der Worte "Katzen" und drücken Sie die Eingabetaste, anscheinend Google gesendet mein Texteingabe zu dieser URL dass ich hervorgehoben dort, Slash suchen. Es stellte sich heraus, in einer URL, alles, was passiert, nachdem ein Fragezeichen, wie wir sagen, halten, wird ein Schlüssel-Wert-Paar das wurde in das Formular eingegeben oder irgendwie aus den übertragenen Browser an den Server. Also jedes Mal, wenn Typ-Eingang in eine Form auf der Internet und es wird gesendet, wie wir haben diskutiert, über eine get, eine dieser virtuellen Kuverts, der Inhalt davon envelope-- ja, halten Erhalten gestopft körperlich in den Umschlag in der Klasse heute, aber technologisch es ist eigentlich in der URL setzen. Also in der Tat, lassen Sie mich durch diese sieben. Wo sehen Sie Benutzereingaben? Wo sehen Sie etwas dass ich mich hier getippt? Ja, so "Katzen." Recht? Also lassen Sie mich diese destillieren in etwas einfacher. Ich werde alles löschen zu Diese URL, die ich nicht verstehe, und ich werde einfach verlassen es als this-- / search? q = Katzen. Wir werden sehen, wo q kommt aus in einem Moment, aber das fühlt sich an wie das Minimum Informationsmenge, die I zur Verfügung gestellt. Und jetzt werde ich drücken Sie die Eingabetaste. Und bemerken es funktioniert immer noch. Wir bekommen immer noch eine ganze Reihe von Katzen zurück. So Google ist schicker als dies in diesen Tagen. Es ist 2016, nicht 1999. Also gibt es andere Dinge, die meine Browser an den Server sendet. Aber das ist minimal alles, was notwendig. So was ist los? Nun, lassen Sie mich zunächst voran gehen und gehen mich zurück zu Cloud9 und lassen Sie gehen Sie voran und schließen früher meine Registerkarten. Und ich werde dies tun, auf meinem besitzen nur für einen Moment. Ich gehe voran gehen und schaffen neue Datei. Und ich werde es als google.html zu speichern. Und ich werde sehr quickly-- Ich werde zu stehlen, tatsächlich, einige dieser Text nur um Zeit zu sparen. Ich werde dies hier einzufügen. Ich werde nicht die Mühe mit jede Stilisierung dieses Mal. Wir werden diese zu nennen "Mein Google." Und ich werde loswerden von allem, was im Körper. Und ich werde folgendes tun. Lassen Sie mich zoomen. Formular Action-- und als ich kurz erwähnt earlier-- whoops-- als ich kurz bereits erwähnt, die Wirkung eines Form ist, wo Sie die Daten senden. So google.com/search. Und die Methode, die ich verwenden soll kann eines von zwei Dingen sein. Es kann entweder "bekommen", wie wir halten diskutieren, oder es kann sein "Post". Denn jetzt, die grundlegende Unterschied ist, wenn Sie "bekommen" alle Informationen, dass die Benutzer zur Verfügung stellt wird in der URL gesendet. Das ist großartig für Dinge wie Suche Motoren und einige andere Anwendungen, aber unter welchen Umständen würde Sie wollen nicht ein Formular ausfüllen und haben die Informationen am Ende der URL, wie in der Adresszeile Ihres Browsers? Welche Formen tun Sie-- PUBLIKUM: [unverständlich] DAVID J. MALAN: Ja, wie, was? PUBLIKUM: Passwörter. DAVID J. MALAN: Ja, so Sie sich einloggen auf Facebook oder eine Website. Das ist eine Benutzereingabe von eine Form, ein Textfeld, aber Sie es wahrscheinlich nicht wollen, zeigt, die in der Browser-URL oben. Warum? Ich meine, vielleicht gibt es einige Auswirkungen auf die Sicherheit auf dem Netzwerk, aber more-- mögen, mehr einfach, was ist, wenn Ihre Mitbewohner, Ihrem Partner, Ihre Kinder, Ihr Ehepartner sieht über Ihren Browser Geschichte? Es ist Ihr Passwort richtig es in der Geschichte Ihres Browsers. Das fühlt sich nicht wie ein gutes Design. Oder noch technisch, Angenommen, Sie versuchen, ein Foto auf Flickr hochladen oder Facebook oder wherever-- das ist eine Benutzereingabe, obwohl es ist ein wenig mehr interesting-- wie füge ich ein Bild in der URL-Leiste stopfen? Sie Art von Art kann nicht. Sie Art können. Aber wirklich, ich bin hart gedrückt vorstellen, das zu tun. Also brauche ich eine andere Methode für Fotos auf eine Website hochladen, und dass andere Methode wird als "Post" genannt. Aber jetzt werden wir reden nur über "Get", das ist die einfachere der beiden. Es setzt nur die ganze Benutzereingaben in der URL. Also hier ist die Form Ich schaffe. Ich möchte einen Eingang. Und weisst du was? Ich werde hier eine Vermutung zu nehmen. Ich werde wieder zu meiner Eingang "q" für "Abfrage". Und ich denke, das ist eine der ist Original-Designs, vielleicht aus dem Jahr 1999. Und dann wird der Typ dieses Eingangs sein würde, nur "Text." Und dann werde ich einen anderen Eingang zu haben dass braucht keinen Namen, wie wir bald zu sehen, der Typ, von denen "Eintragen". Und das wird geben Sie mir eine spezielle Taste. Und das ist es. Also lassen Sie mich gehen Sie vor und speichern Sie diese Datei. Ich werde zurück zu gehen meine Browser und gehen Sie zu google.html. Eingeben. Und es ist eine Art von spärlich gelinde gesagt. Aber lassen Sie mich gehen Sie voran und die Suche nach "Katzen." Und merke ich bin derzeit an diesem Cloud9 URL. Aber der Moment, als ich auf diese Schaltfläche klicken, wo hoffen, dass Sie werde ich am Ende? PUBLIKUM: Google. DAVID J. MALAN: Google. Also lassen Sie uns auf Senden klicken. Und in der Tat habe ich neu implementiert Google. Recht? Es ist einfacher. Es ist leichter. Ich meine, mein Code ist deutlich besser als ihre, aus dem Chaos sahen wir früher. Und weisst du was? Ich werde dies ein wenig zu würzen. Ich habe nicht diese früher erwähnt. Es gibt Tags wie H1, für die Rubrik 1, die wichtigste Position auf einer Seite. "Mein Google:" Ich werde dies nennen. Lassen Sie mich neu zu laden. Es sieht ein wenig besser schon. Und tatsächlich, weißt du was? Ich habe bereits-- log ich. Ich sagte, dass ich das nicht gehen, um Stil, aber ich werde dies nach wie vor zu gestalten. Und mein Körper sein wird, lassen Sie uns sagen, text-align Zentrum. Es sieht eher wie Google bereits. Ich brauche einen Zeilenumbruch, obwohl, Senden für die Schaltfläche. Und es stellt sich heraus, Sie verwenden können, Absätze, oder Sie können mehr buchstäblich nur sagen, geben Sie mir einen Zeilenumbruch die br-Tag hier--. Und wenn ich diese neu zu laden, jetzt geht es dort. Es ist ein wenig hässlich, so dass ich Sie könnten mehrere Zeilenumbrüche aber lassen Sie uns nicht hier zu gierig. So, jetzt wollen wir mal sehen, ob es für funktioniert "Hunde." Es scheint für "Hunde" zu arbeiten, wie gut. Also, was ist das überzeugende Gerichte zum Mitnehmen hier? One-- war kein großer Sprung Einführung ein paar Tags, wie die Form-Tag in der Eingangs-Tag. Aber mehr grundlegend ist, alles, was wir tun nutzt unser Verständnis von HTTP und der Tatsache dass Formen letztlich ändern was in der URL des Browsers ist, und so, deshalb können wir mechanisch Eingang an einen Server bereitzustellen, durch ein HTML-Formular zu machen und zu wissen, dass der Server versteht HTTP, Genau wie unser Körper versteht, wie, meine Hand, dass gleiche Protokoll Schütteln, und so erhalten wir die Antwort zurück dass wir letztlich erwarten. Also lassen Sie uns versuchen, einen zu tun Letzte, was jetzt mit Handy, und ich werde make-- werde ich hinzufügen dieser Code auf den Folien. Also, wenn Sie möchten, Sie zu basteln sicherlich nehmen es von dort. Aber ich werde gehen voraus und eine Sache zu tun. Ich gehe voran gehen und öffne meine Index page-- up meine hallo Seite nach wie vor die hat eine Menge von dieser faux-lateinischen Text, oder bedeutungslos lateinischen Text und has-- es sieht aus wie dies in dieser Schriftgröße. Aber lassen Sie mich gehen Sie vor und tun dies. Ich werde in Cloud9 zu gehen. Und Sie müssen diesen Schritt nicht tun. Ich werde es einfach selbst tun. Ich werde Teilen zu klicken. Und das ist ein Merkmal nur von Cloud9, wobei Ich kann meine Umgebung öffentlich machen. Und gerade im Interesse der Demonstration, lassen Sie mich dies tun. Ich werde meine Bewerbung öffentlich machen. Beachten Sie es warnt mich, bin Ich sicher, dass ich will, dies zu tun, denn das wird jeder zu machen in der Welt sind hier, ob sie jetzt oder gerade das Video später auf die Internet Lage zu sehen, was ich sehe. Aber das ist in Ordnung. Ich werde sagen: "Fertig." Und lassen Sie mich Sie ermutigen, wenn ich es täte diese correctly-- mich lassen zuerst testen. Gehen Sie weiter, wenn Sie nicht mind-- in einem Browser auf Ihrem Computer, gehen Sie zu dieser URL und hoffentlich Sie unterstützen meinen lateinischen Text zu sehen. Und klar zu sein, es ist läuft nicht auf meinem Laptop. Es ist in der Cloud. Es ist auf Cloud9 wahrsten Sinne des Wortes, aber Ich habe meinen Arbeitsplatz öffentlich gemacht so dass jeder im Internet kann meine Latein-Homepage zugreifen. Gehen Sie auf die gleiche URL Ihr Telefon, wenn Sie. Wenn es Sie kostet, Sie aber, Blick über kann nur eine Schulter. PUBLIKUM: [unverständlich] DAVID J. MALAN: Tut mir leid? PUBLIKUM: [unverständlich] DAVID J. MALAN: Nur lateinischen Wörtern. Das ist alles. Aber das ist, was Sie sehen sollten. PUBLIKUM: Ja. DAVID J. MALAN: Ja. Ja. OK. So kann ich halten Ihre Telefon nur für einen Moment? Also, hoffentlich, wenn Sie den Zugriff auf es sollte es fast nicht lesbar aussehen. Es ist still-- ich meine, es ist wegen der lateinischen unlesbar. Aber es ist auch nicht lesbar für das, was aus anderen Gründen? Wie, was mißfällt Sie darüber? PUBLIKUM: Es ist klein. DAVID J. MALAN: Es ist super, super klein. Wie könnten wir dieses Problem beheben? Es ist super, super klein auf Victorias Telefon und, wenn Sie schon gezogen es sich, wahrscheinlich als auch kleine auf Ihrem Telefon, es sei denn, Sie haben Zugänglichkeit Einstellungen aktiviert. Was ist das? Sie könnten nur kneifen und Zoom, der praktikabel ist, aber dann sieht man nur ein paar Worte auf einmal. So warten Sie eine Minute. Ich weiß, wie diese zu beheben. Recht? Ich konnte CSS verwenden, und ich konnte das ändern Schriftgröße von 12 Punkt bis 24-Punkt. Aber die Nebenwirkung, daß, Natürlich geht jetzt zu sein, auf einem Schreibtisch oder einem Laptop, jetzt der Text ist doppelt so groß. Und so wäre es ganz nett sein zur Unterscheidung zwischen Geräten, und es stellt sich heraus dort gibt Möglichkeiten, das zu tun. Es gibt einige verschiedene Wege, in der Tat, wobei mit Hilfe von CSS und ausgefallener Funktionen dass wir in nicht im Detail zu gehen, Sie können im Wesentlichen abfragen der Browser und sagen: Wenn der Bildschirm kleiner ist als diese viele Pixel, verwenden Sie diese Schriftgröße. Wenn Ihr Bildschirm ist größer als diese viele Pixel, verwenden Sie diese andere Schriftgröße. Sie können nach wie vor noch schicker sein. Wenn Sie schon einmal besucht haben, ein Web-Seite, die auf einem Desktop, vielleicht hat ein großes Menü aus, um die Seite, und dann der gesamte Inhalt ist an der Seite des daß Verbindung zum Menü das ist irgendwie ein gemeinsames Paradigma. Menü auf der linken Seite, Inhalt auf der rechten Seite, oder umgekehrt. Funktioniert nicht wirklich auf Handy, wenn Ihr Bildschirm ist nur so viele Pixel breit. So häufiger auf Mobil ist, Ihr Menü wird plötzlich bekommen zusammengebrochen, und Sie müssen Klicken Sie auf eine Schaltfläche, um zu sehen, oder auf der Website wird das Menü setzen darüber und über den Inhalt darunter setzen. Und Sie können diese implementieren Dinge in vielfältiger Weise auch. Sie können Ihre Programmierer fragen, hey, Team, zu jeder Zeit sehen Sie eine HTTP-Anfrage von einem Android Gerät, ein Microsoft-Gerät, ein Google Gerät, ein Apple-Gerät, verwenden Sie diese Schriftgröße und verwenden Sie dieses Menü-Layout, oder aber diese Standard größer Layout. Nun, mit was grundlegende Technik heute die Ingenieure nutzen könnten zu wissen, ob es sich um ein iPhone, ein Android-Handy, ein Laptop, ein Desktop des Unternehmens-Server zu besuchen? Worin bekommen sie diese Informationen? PUBLIKUM: Kopf? DAVID J. MALAN: Ja, der HTTP-Header. So kommt jeder HTTP-Anforderung von ihre Kunden auf ihre Server umfassen, innerhalb dieser virtuellen Umschlag, eine ganze Reihe von HTTP-Header, einer davon ist der Browser und das Betriebssystem auch wenn Sie, egal zu dass der Detaillierungsgrad. Nun, es ist eine kryptische aussehende Zeichenfolge, aber dort gibt es Software, die einfach vereinfachen, dass, und Sie können einfach fragen in der Programmierung code-- PHP, Java, C ++, whatever-- was Telefon ist this-- Welches Gerät ist dieser Benutzer verwenden? Und dann kann man sagen, zeigen sie diese Version der Website, wenn es ein Telefon. Zeigen Sie ihnen, diese Version von der Website, wenn es ein Laptop oder Desktop. Aber Sie brauchen noch nicht einmal serverseitige Komplexität. Sie können selbst die einfachsten Dinge zu tun. Ich werde dies zu tun. Ich gehe voran gehen in meine Cloud9 Umgebung, und ich werde einen Tag hinzuzufügen dass Sie vor in Google sah. Es ist das Meta-Tag genannt. Und ich erinnere mich dieses man nie, so Ich werde es hier zu transkribieren. Meta name = "Ansichtsfenster" und dann content = "width = Gerätebreite, intital Skala = 1 "und das ist es. So könnte es auch sein, wie eine Zauberformel. Es ist nicht so klar, aber dies hat etwas mit dem Ansichtsfenster zu tun, und das Ansichtsfenster ist nur der Körper eines Web-Seite, die rechteckige Bereich, die meisten der Seite definiert. Und dies ist nur zu sagen der Browser, wissen Sie was? Sprechen Sie die Breite dieser Seite effektiv gleich der Gerätebreite. Mit anderen Worten, nicht davon ausgehen, dass Sie haben eine Art unbegrenzten Raum. Angenommen, Sie haben nur so viel haben Raum wie das Gerät selbst ist groß. Und jetzt, wenn ich neu laden in meinem Browser, sehe ich keine Änderung. Aber wenn ich diese correctly-- tat und Lassen Sie mich meine fingers-- überqueren, wenn Sie alle laden Sie Ihre Telefone, tun Sie sehen eine zwingende Änderung? Ja, ist dass-- PUBLIKUM: [unverständlich] DAVID J. MALAN: Ja. OK. So wohl besser lesbar jetzt? Noch klein, um fair zu sein, aber nicht so winzig wie zu unhandlich sein. Und ich könnte sicherlich außer Kraft setzen diese weiter mit CSS oder auf der Server-Seite, aber immer mehr, was Sie wollen Sehen ist mehr und mehr Funktionen wird hinzugefügt, um clientseitige environments-- JavaScript, wie wir diskutieren morgen, CSS und HTML-- so dass alle diese Abfragen können auf dem Client durchgeführt werden so stören die Server viel weniger und nicht zu haben, mit zu halten, für So die ständige Ansturm von neuen Betriebssystem Versionen, neue Browser-Versionen. Sie können nur den Browser lassen das Gerät fragen, wie groß bist du, und dann machen etwas logisch Entscheidungen auf der Grundlage, dass. Aber wir werden mehr Möglichkeiten sehen für logische Entscheidungen morgen im Rahmen einer Programmiersprache. Also, irgendwelche Fragen, dann, auf Web-Entwicklung? Heute ist nicht Web-Programmierung, pro se, da die meisten alles, was wir getan haben sehr ästhetisch war, wenn man so will. Es gibt keine Entscheidungsfindung in der Code, den wir geschrieben haben, und so ist das, warum HTML ein Markup Sprache, keine Programmiersprache. Aber morgen werden wir nehmen ein kurzer Blick, schließlich, bei JavaScript, das ist eine eigentliche Programmierung Sprache, die uns tun ein bisschen mehr können. Irgendwelche Fragen? Nun, lassen Sie mich schlagen zwei Möglichkeiten optional für die Hausaufgaben. Ein ist-- diese Cloud9 Konten werden nicht auslaufen. Sie sind willkommen zu verwenden sie zu basteln. Es ist die kostenlose Service-Niveau. Erkenne, dass, wenn bei der Erstellung Ihr Arbeitsbereich, Sie haben es öffentlich, bedeutet das, dass jemand auf dem Internet sehen kann, was Sie eingeben. Also vielleicht nur betrachten in Verlegenheit zu bringen, sich nicht wenn Sie setzen Ihre erste Web Seite gibt öffentlich aus Versehen, aber niemand wird zu wissen, dass es auf jeden Fall zu suchen. Und two-- lassen Sie mich werfen up dieser URL als auch, vor allem, wenn Sie heute eine kam in etwas weniger komfortabel als andere, unsicher, was all dieses Zeug bedeutet. Erkenne, dass viel mehr von diesem Video, Das ist sowohl ein guter Weg, um einzuschlafen und auch während lachen Dabei hat auch viele gesellschaftlich interessant und sicherheitsrelevante Diskussionen darin von John Oliver, wenn auch ein Komiker. Aber wenn es keine weiteren Fragen, das bringt uns zu der Rezeption. Warum also drehe ich nicht auf die Musik. Es sollte Getränke sein und Snacks außerhalb. Ich bin glücklich, für so zu mischen solange die Leute möchten, Beantwortung von Fragen mehr one-on-one. Aber sonst, du bist willkommen nehmen an einer beliebigen Stelle aus, und wir werden uns wiedersehen morgen früh für ein bisschen mehr. OK, danke.