1 00:00:00,000 --> 00:00:02,620 [Powered by Google Translate] [Vecka 7, Fortsättning] 2 00:00:02,620 --> 00:00:05,090 [David J. Malan, Harvard University] 3 00:00:05,090 --> 00:00:07,780 [Detta är CS50.] [CS50.TV] 4 00:00:07,780 --> 00:00:09,810 Okej. Välkommen tillbaka. Detta är CS50, 5 00:00:09,810 --> 00:00:12,100 och detta är slutet på vecka 7. 6 00:00:12,100 --> 00:00:15,460 Så en av dessa dumma små saker som går runt på Internet 7 00:00:15,460 --> 00:00:24,080 och vi sörplade upp, och det bör nu göra lite nördiga meningsfullt för dig. 8 00:00:24,080 --> 00:00:28,330 Tja, det var roligare att den här killen än det var till er. 9 00:00:28,330 --> 00:00:32,619 På tal om, ja, killar, 10 00:00:32,619 --> 00:00:42,550 idag är Nates födelsedag. 11 00:00:42,550 --> 00:00:46,630 För att ge dig en känsla av hur bra Nate och jag är 12 00:00:46,630 --> 00:00:50,140 på webbutveckling baserad på måndagens klass och bygger nu på detta, 13 00:00:50,140 --> 00:00:53,170 Jag trodde att jag skulle dra upp Nate hemsida, om du inte har sett den ännu. 14 00:00:53,170 --> 00:00:57,020 Detta här IA Nates HTML. 15 00:00:57,020 --> 00:00:59,380 Så se hans källkod om du vill se hur man gör detta, och Nate, 16 00:00:59,380 --> 00:01:02,250 om vi kunde embarass du bara kort, fick personalen en liten sak 17 00:01:02,250 --> 00:01:06,080 Om du vill dela vissa dessert med några av barnen i klassen här. 18 00:01:06,080 --> 00:01:10,150 Om du vill komma ner. 19 00:01:10,150 --> 00:01:14,350 Ni applåderar alla och är mycket trevligt, men ingen sitter någonstans nära Nate, 20 00:01:14,350 --> 00:01:17,560 av någon anledning, i denna bakre zon. 21 00:01:17,560 --> 00:01:24,020 Så kanske du kan hitta några människor att njuta av dessa med. 22 00:01:24,020 --> 00:01:33,380 Grattis på födelsedagen, Nate. 23 00:01:33,380 --> 00:01:37,660 >> Ytterligare hellos: Vi visade ett par klipp från våra CS50x studenter. 24 00:01:37,660 --> 00:01:39,710 Om du vill se vilka andra är det i världen 25 00:01:39,710 --> 00:01:41,850 som är följer med, kan du bege dig till den här webbadressen, 26 00:01:41,850 --> 00:01:45,780 där Josef, en av våra TF, har satt ihop ett montage slags 27 00:01:45,780 --> 00:01:50,290 av alla som har att lämna dessa videor, bland dem Rick Astley. 28 00:01:50,290 --> 00:01:53,010 Och om du bläddrar igenom dessa, det är egentligen ganska inspirerande 29 00:01:53,010 --> 00:01:56,890 se mångfalden av länder och städer som människor tillkalla. 30 00:01:56,890 --> 00:02:00,830 Så om du vill ta en titt på det, kommer det att vara upp till slutet av terminen. 31 00:02:00,830 --> 00:02:05,370 Idag fortsätter vi vår blick på webben, webbprogrammering, HTML och liknande, 32 00:02:05,370 --> 00:02:08,280 och vi har också lunch kommer upp på fredag 33 00:02:08,280 --> 00:02:11,360 om du vill, och i synnerhet, inte har gjort det tidigare. 34 00:02:11,360 --> 00:02:13,630 Denna fredag ​​tema kommer att vara Nates födelsedag, 35 00:02:13,630 --> 00:02:15,700 så om du vill ha födelsedag lunch med Nate 36 00:02:15,700 --> 00:02:17,500 och andra, några av våra vänner från industrin, 37 00:02:17,500 --> 00:02:19,300 vänligen gå till denna URL där. 38 00:02:19,300 --> 00:02:22,510 Utrymme, som alltid, är begränsad. Även om du har glömt, 39 00:02:22,510 --> 00:02:26,460 inser att nästa vecka är sista datum för problemet som 4: s tipspromenad, 40 00:02:26,460 --> 00:02:30,070 varigenom efter att återhämta sig alla dessa JPEG-bilder från card.raw, 41 00:02:30,070 --> 00:02:32,880 du och dina kompisar avsnittet om du vill, kan försöka fotografera 42 00:02:32,880 --> 00:02:36,100 eftersom många av de datavetare från den minneskort som möjligt, 43 00:02:36,100 --> 00:02:39,070 och du och din avdelning kommer då att vinna en fantastisk pris. 44 00:02:39,070 --> 00:02:44,470 Pendling till pset 4 specifikation om vad att lämna och när. 45 00:02:44,470 --> 00:02:47,650 Dessutom, om du vill ha din hantverk förevigad 46 00:02:47,650 --> 00:02:51,400 på kursens hemsida och dess historia av kläder, 47 00:02:51,400 --> 00:02:54,010 vet att du är välkommen nu för att börja skicka mönster 48 00:02:54,010 --> 00:02:57,180 för årets T-shirts och sweatshirts och liknande. 49 00:02:57,180 --> 00:02:59,200 Vi ska göra vårt bästa för att ta så många som vi kan, 50 00:02:59,200 --> 00:03:01,440 men vi har några medlemmar av personalen granska alla de mönster 51 00:03:01,440 --> 00:03:04,180 att se till att de är förenliga med specifikationerna, 52 00:03:04,180 --> 00:03:07,500 och vi väljer då i allmänhet en handfull av dem att ställas ut. 53 00:03:07,500 --> 00:03:10,620 Så om du är konstruktionstypen, vet bara att kraven 54 00:03:10,620 --> 00:03:14,030 för grafik är PNG, minst 200 dpi, 55 00:03:14,030 --> 00:03:16,520 de bör inte vara mer än 4000 x 4000 pixlar, 56 00:03:16,520 --> 00:03:19,010 och inte mer än 10 MB, men du är välkommen att använda saker som 57 00:03:19,010 --> 00:03:22,430 Photoshop eller GIMP eller olika grafiska s program, 58 00:03:22,430 --> 00:03:24,590 vad du har till ditt förfogande. 59 00:03:24,590 --> 00:03:28,280 >> Också på horisonten är det slutliga projektet. Den slutliga projektet är verkligen höjdpunkten i 50, 60 00:03:28,280 --> 00:03:30,560 varigenom samtliga uppdrag i kursen, 61 00:03:30,560 --> 00:03:33,170 Det är din chans att verkligen göra din egen grej. 62 00:03:33,170 --> 00:03:35,280 Och det kan vara att helt enkelt göra något för skojs skull, 63 00:03:35,280 --> 00:03:38,160 det kan vara att lösa några akuta problem din student grupp har, 64 00:03:38,160 --> 00:03:40,980 för några nya hemsida, några nya kollektion mekanism för data. 65 00:03:40,980 --> 00:03:43,420 Det kan vara en mobil applikation för Android, för iOS. 66 00:03:43,420 --> 00:03:46,030 Verkligen, himlen är gränsen och under de närmaste veckorna, 67 00:03:46,030 --> 00:03:50,900 som vi övergången från C till dessa högre nivå språk som PHP och Javascript, 68 00:03:50,900 --> 00:03:55,150 hittar du dig själv mer förtrogen med några verkliga tekniker, 69 00:03:55,150 --> 00:03:57,800 Vissa verkliga verktyg, och komplettera det, 70 00:03:57,800 --> 00:04:00,170 vet att kursen har en historia av seminarier, 71 00:04:00,170 --> 00:04:02,880 varigenom under de kommande veckorna, några av lärarna 72 00:04:02,880 --> 00:04:06,160 och vänner vårt från på campus kommer att erbjuda valfria seminarier 73 00:04:06,160 --> 00:04:08,540 som går utöver vad som normalt görs i avsnitt 74 00:04:08,540 --> 00:04:11,090 att introducera dig till saker som Android-programmering, 75 00:04:11,090 --> 00:04:13,450 att introducera dig till saker som iOS programmering 76 00:04:13,450 --> 00:04:15,950 eller mer avancerade webb-utveckling tekniker. 77 00:04:15,950 --> 00:04:17,970 Det finns en hel historia av dessa redan på nätet. 78 00:04:17,970 --> 00:04:25,000 Om du går till cs50.net/seminars har vi gjort detta under ganska några år, 79 00:04:25,000 --> 00:04:28,740 och du kommer se att arkiveras här med PDF-filer och videoklipp och liknande 80 00:04:28,740 --> 00:04:33,090 finns flera dussin videor av seminarier. 81 00:04:33,090 --> 00:04:37,380 Förra året till exempel, hade vi ett seminarium om acing dina tekniska intervjuer, 82 00:04:37,380 --> 00:04:40,980 om du faktiskt vill gå ut och göra praktik eller heltid spelning. 83 00:04:40,980 --> 00:04:43,450 Windows Mobile utveckling, Android utveckling, Google Maps, 84 00:04:43,450 --> 00:04:47,700 API, CSS, utveckling för BlackBerry, Emacs. 85 00:04:47,700 --> 00:04:52,610 Verkligen, är du välkommen att ta en titt på någon av dessa seminarier på din bekvämlighet. 86 00:04:52,610 --> 00:04:57,080 Och vi kommer att hålla några nya denna termin, liksom. 87 00:04:57,080 --> 00:04:59,020 >> Så vad är vidare med den slutliga projektet? 88 00:04:59,020 --> 00:05:01,090 Jo, först, även om detta datum är något överhängande, 89 00:05:01,090 --> 00:05:06,460 Detta är egentligen bara en möjlighet att börja tänka på det slutgiltiga projektet helt realistiskt. 90 00:05:06,460 --> 00:05:10,550 Vi vet bara början på en del av vad vi kommer fortfarande att täcka i kursen, 91 00:05:10,550 --> 00:05:13,470 HTML, PHP och liknande, men du är alla bekanta med webben, 92 00:05:13,470 --> 00:05:16,270 och jag fördomar denna konversation mot webben bara för 93 00:05:16,270 --> 00:05:18,380 de flesta människor sluta göra webbaserade slutliga projekt, 94 00:05:18,380 --> 00:05:20,260 men det är ingalunda erforderlig. 95 00:05:20,260 --> 00:05:22,260 Använda C är bra, mål C, Java, 96 00:05:22,260 --> 00:05:25,350 något annat språk du kanske vet eller vill veta är ganska bra. 97 00:05:25,350 --> 00:05:29,370 Men för att få safter flödar initialt kommer vi förvänta inlämnandet av en preproposal 98 00:05:29,370 --> 00:05:33,520 som per PDF på hemsidan, som nu på cs50.net, 99 00:05:33,520 --> 00:05:36,080 och längst upp till vänster ser du lärdomsprov 100 00:05:36,080 --> 00:05:38,920 är specifikationen för den slutliga projektet, 101 00:05:38,920 --> 00:05:41,470 och det finns uppgifter om preproposal och liknande. 102 00:05:41,470 --> 00:05:44,760 Det ganska mycket handlar om att e-post till din undervisning karl 103 00:05:44,760 --> 00:05:48,450 bara för att slå upp en konversation med honom eller henne om vad du tänker. 104 00:05:48,450 --> 00:05:52,510 På projects.cs50.net är ett förråd av idéer från folk på campus 105 00:05:52,510 --> 00:05:54,480 Om du kämpar för att komma med en idé, 106 00:05:54,480 --> 00:06:01,140 och manual.cs50.net/APIs är ett förråd av länkar till API: er. 107 00:06:01,140 --> 00:06:06,710 >> Men vad är ett API? 108 00:06:06,710 --> 00:06:09,790 Vad är ett API? Jag har sagt det åtminstone två gånger, 109 00:06:09,790 --> 00:06:12,640 enligt transkript av de senaste veckorna. 110 00:06:12,640 --> 00:06:17,050 Vad är det? [Student, obegripligt] 111 00:06:17,050 --> 00:06:19,340 >> Okej, bra. Så något programmeringsgränssnitt. 112 00:06:19,340 --> 00:06:22,710 Application programming interface, vilket kan ta flera former, 113 00:06:22,710 --> 00:06:25,850 men vad detta egentligen handlar om är kod 114 00:06:25,850 --> 00:06:29,660 att någon annan hs skriftliga eller data som någon annan har samlats 115 00:06:29,660 --> 00:06:33,670 som görs tillgänglig för dig på något programmatiskt sätt. 116 00:06:33,670 --> 00:06:36,630 Du kan skriva kod i C, PHP, Python, Ruby, 117 00:06:36,630 --> 00:06:38,760 oavsett ditt språk val är typiskt, 118 00:06:38,760 --> 00:06:42,240 och du kan på något sätt bygga på någon annans funktionalitet 119 00:06:42,240 --> 00:06:44,440 eller någon annans datamängd. 120 00:06:44,440 --> 00:06:47,210 Till exempel, om jag går till den här länken här, 121 00:06:47,210 --> 00:06:50,750 och du kommer att se ett par länkar på den efterföljande sidan 122 00:06:50,750 --> 00:06:56,093 där vi har CS50 egen API, som är mycket Harvard-centrerad, och sedan tredje part API: er. 123 00:06:56,930 --> 00:06:59,300 Bland de tredje part API är verkligen användbara saker 124 00:06:59,300 --> 00:07:01,780 som att kunna skicka SMS till människor, 125 00:07:01,780 --> 00:07:04,690 kunna ta emot SMS från människor. 126 00:07:04,690 --> 00:07:08,160 Och saker som du kanske inte har någon aning om hur man ska genomföra själv, 127 00:07:08,160 --> 00:07:10,440 men tack vare tjänster, några gratis och några kommersiella, 128 00:07:10,440 --> 00:07:14,000 du kan bygga ovanpå dem och göra något av intresse för dig. 129 00:07:14,000 --> 00:07:16,990 Bland CS50: s API är dessa campus-centrerad saker som 130 00:07:16,990 --> 00:07:21,480 Harvard kurser, energi, evenemang, mat, kartor, nyheter, tweets och Shuttleboy egen, 131 00:07:21,480 --> 00:07:23,940 och dessa är API: er som ser lite ut så här. 132 00:07:23,940 --> 00:07:26,990 >> Låt mig dra upp HarvardFood API. 133 00:07:26,990 --> 00:07:30,620 Om du någonsin har varit i HUD webbplats har du varit förmodligen där 134 00:07:30,620 --> 00:07:35,410 att bara se vad som finns för middag eller för att se vad de timmar är för några d-hallen. 135 00:07:35,410 --> 00:07:38,000 Tja, det är inte särskilt lätt att navigera, 136 00:07:38,000 --> 00:07:41,100 och så vad vi gjorde för en tid sedan var vi skrev programvara, 137 00:07:41,100 --> 00:07:47,270 det råkar vara i PHP, som faktiskt skärmen skrapar hela HUD webbplats. 138 00:07:47,270 --> 00:07:51,400 Att sålla skrapa något innebär att skriva ett program i ett språk som PHP 139 00:07:51,400 --> 00:07:55,270 som låtsas vara en webbläsare, även om du kan köra det i en kommandotolk, 140 00:07:55,270 --> 00:07:58,180 som låtsas vara en webbläsare, ansluter till en webbplats, 141 00:07:58,180 --> 00:08:01,480 hämtar sin HTML, det språk på vilket den är skriven, 142 00:08:01,480 --> 00:08:04,300 och sedan läser det, eller mer specifikt, tolkar det 143 00:08:04,300 --> 00:08:06,140 uppifrån och ned, vänster till höger. 144 00:08:06,140 --> 00:08:08,870 Och vad vi gjorde var att vi skrev vår kod så att 145 00:08:08,870 --> 00:08:12,910 helst vi såg något i den HTML som såg ut som något på menyn, 146 00:08:12,910 --> 00:08:16,470 som hamburgare, skulle vi importerar så att i vår egen databas. 147 00:08:16,470 --> 00:08:20,410 Och varje gång vi såg näringsinnehåll, skulle vi importera i vår egen databas. 148 00:08:20,410 --> 00:08:23,090 Och vad vi gjorde var utnyttja det faktum att HUD: s hemsida, 149 00:08:23,090 --> 00:08:27,280 även om det kan vara lite av en utmaning för oss människor att navigera 150 00:08:27,280 --> 00:08:32,559 under huven, är alla HTML som genereras av egna datorprogram. 151 00:08:32,559 --> 00:08:35,159 Så alla deras HTML, även om det kan se rörigt, 152 00:08:35,159 --> 00:08:38,026 Liksom de flesta webbplatser under huven följer ett mönster. 153 00:08:38,260 --> 00:08:40,799 Så vi tillbringade bara ett par timmar att räkna ut detta mönster 154 00:08:40,799 --> 00:08:44,240 så att i slutändan kastar vi bort alla rörigt HTML, 155 00:08:44,240 --> 00:08:47,340 alla estetik fet inför och kursiv och liknande, 156 00:08:47,340 --> 00:08:52,350 och vad vi kan då göra är exponera samma data. 157 00:08:52,350 --> 00:08:54,870 Till exempel, på detta sätt. 158 00:08:54,870 --> 00:08:56,840 Så vi, enligt dokumentationen här, 159 00:08:56,840 --> 00:08:59,190 har meddelat världen att om du begär en URL 160 00:08:59,190 --> 00:09:03,310 som ser ut så här, food.cs50.net / något, 161 00:09:03,310 --> 00:09:07,220 och du ger vissa parametrar, som vi pratar om i dag, 162 00:09:07,220 --> 00:09:11,780 Liksom slutdatum tid, startdatum tid, måltid och så vidare, 163 00:09:11,780 --> 00:09:14,090 vad våra servrar kommer att återvända till dig, till exempel, 164 00:09:14,090 --> 00:09:18,740 är en CSV-fil, komma separted värden som en Excel-fil, 165 00:09:18,740 --> 00:09:23,140 innehåller allt för frukost på detta datum i mars förra året 166 00:09:23,140 --> 00:09:25,450 när jag råkade skriva upp denna dokumentation. 167 00:09:25,450 --> 00:09:27,870 >> För dem som är bekanta, är CSV inte den enda filformat. 168 00:09:27,870 --> 00:09:30,610 Det finns ett annat format som är allt mer mångsidig 169 00:09:30,610 --> 00:09:32,670 heter JSON, JavaScript Object Notation. 170 00:09:32,670 --> 00:09:34,770 Uppgifterna kan komma tillbaka i det formatet. 171 00:09:34,770 --> 00:09:38,110 Så takeaway här är att om du dyker in detta API 172 00:09:38,110 --> 00:09:41,170 eller någon annan av CS50: s eller något där ute på Internet, 173 00:09:41,170 --> 00:09:45,560 eller inte alls, inse att världen alltmer börjat standardisera 174 00:09:45,560 --> 00:09:47,670 hur maskiner KOMMUNICERA. 175 00:09:47,670 --> 00:09:50,660 Vi använder standardiserade dataformat som CSV eller JSON. 176 00:09:50,660 --> 00:09:54,320 Och vad detta betyder för dig är att du kan skriva intressanta delen av ett program 177 00:09:54,320 --> 00:09:56,580 som låter ditt användarnamn söka en matsal meny, 178 00:09:56,580 --> 00:10:00,010 som låter dem skapa listor över favoriter som låter dem få textvarningar 179 00:10:00,010 --> 00:10:02,480 när deras favorit måltid är på väg att serveras i vissa d-hallen 180 00:10:02,480 --> 00:10:07,090 genom att använda någon annans dataset och bygga på toppen av sin API: er. 181 00:10:07,090 --> 00:10:13,600 Så mer om detta i form av seminarier och dokumentation som du har här på nätet. 182 00:10:13,600 --> 00:10:16,450 Så de är alltså API: er. 183 00:10:16,450 --> 00:10:18,900 >> Det för oss tillbaka till HTML. Snabb återblick. 184 00:10:18,900 --> 00:10:22,920 Vad är HTML? 185 00:10:22,920 --> 00:10:25,000 [Student, obegripligt] >> Bra. HyperText Markup Language. 186 00:10:25,000 --> 00:10:31,300 Någon annan, vad är Hypertext Markup Language? 187 00:10:31,300 --> 00:10:37,340 HyperText Markup Language. 188 00:10:37,340 --> 00:10:40,330 Okej. Så HTML, HyperText. 189 00:10:40,330 --> 00:10:43,100 HyperText hänvisar bara till webben, för det mesta. 190 00:10:43,100 --> 00:10:45,730 Uppmärkning innebär att det är faktiskt inte ett programmeringsspråk, HTML. 191 00:10:45,730 --> 00:10:48,120 Det är inte ett språk som du kan uttrycka logik i. 192 00:10:48,120 --> 00:10:50,710 Det har inte slingor. Det har inte villkor. 193 00:10:50,710 --> 00:10:52,820 Det har inte funktioner, per se. 194 00:10:52,820 --> 00:10:56,680 Snarare har det dessa saker som kallas taggar eller mer korrekt, element. 195 00:10:56,680 --> 00:10:59,970 Och dessa delar har start-taggar och taggar slut, 196 00:10:59,970 --> 00:11:04,300 eller öppna taggar och stängda taggar och vad dessa taggar innebär generellt för en webbläsare är, 197 00:11:04,300 --> 00:11:09,270 börja göra något och sedan sluta göra något, men det finns undantag från denna. 198 00:11:09,270 --> 00:11:12,480 Ibland är det bara "sätta en radbrytning här" till exempel. 199 00:11:12,480 --> 00:11:15,150 Och vi såg exempel på att den andra dagen, mellan fet inför, 200 00:11:15,150 --> 00:11:17,430 radbrytningar och sedan ett par andra taggar. 201 00:11:17,430 --> 00:11:19,880 Så HTML är det språk som webbsidor skrivs. 202 00:11:19,880 --> 00:11:23,760 Så om jag går till något som Google.com 203 00:11:23,760 --> 00:11:26,180 och dra upp bara deras hemsida, 204 00:11:26,180 --> 00:11:29,690 ihåg att om du högerklicka eller kontrollera klicka 205 00:11:29,690 --> 00:11:32,140 och titta på Visa sida källan, vanligtvis 206 00:11:32,140 --> 00:11:34,420 Det är en fullständig röra dessa dagar under huven, men det beror på 207 00:11:34,420 --> 00:11:38,170 datorer bryr sig inte om blanktecken, så detta behöver inte se söt. 208 00:11:38,170 --> 00:11:40,240 Men om vi zooma in på delar av den, 209 00:11:40,240 --> 00:11:43,460 märker att Chrome, bara för att vara snäll, har färgkodade saker. 210 00:11:43,460 --> 00:11:48,460 I själva verket är detta den allra första tagg som vi såg på en webbsida. 211 00:11:48,460 --> 00:11:51,750 Och återigen, HTML 5, den senaste versionen av detta språk, 212 00:11:51,750 --> 00:11:53,830 har det här i början, 213 00:11:53,830 --> 00:11:57,820 00:12:03,580 men det är bara en slags standard som säger hej världen, här kommer en HTML-fil i version 5. 215 00:12:03,580 --> 00:12:08,920 >> Den intressanta delen börjar här. Så 00:12:11,640 av HTML-element förra gången. 217 00:12:11,640 --> 00:12:14,630 Vilka var de två viktigaste barn? 218 00:12:14,630 --> 00:12:17,170 Huvud och kropp, precis som killen med tatuering för en stund sedan. 219 00:12:17,170 --> 00:12:19,640 Det finns två delar av webbsidan, huvud och kropp, 220 00:12:19,640 --> 00:12:23,750 och återkallande då att kanske det enklaste webbsida vi kunde göra ser ut så här. 221 00:12:23,750 --> 00:12:27,460 Och jag har indragna det bara att vara typ av snyggt och prydligt med min kod, 222 00:12:27,460 --> 00:12:30,710 men vad som verkligen är viktigt här är att det finns en viss hierarki till detta. 223 00:12:30,710 --> 00:12:35,420 Och varje tagg som jag har öppnat jag har stängt och att det är därför denna symmetri 224 00:12:35,420 --> 00:12:38,300 till alla markeringar som jag har skapat. 225 00:12:38,300 --> 00:12:41,620 Så förra gången vi började skriva webbsidor på min egen laptop. 226 00:12:41,620 --> 00:12:45,470 Jag öppnade textredigering, räddade jag filen som hello.html, 227 00:12:45,470 --> 00:12:50,190 Jag släpade sedan filen på min webbläsare, och voila, jag hade en sida på Internet. 228 00:12:50,190 --> 00:12:53,110 Nu är det inte riktigt är fallet, jag hade en sida på min hårddisk, 229 00:12:53,110 --> 00:12:58,260 och jag var bokstavligen den enda personen i världen som skulle se till att webbsidan i en webbläsare. 230 00:12:58,260 --> 00:13:00,670 >> Så idag presenterar vi en verklig webbserver 231 00:13:00,670 --> 00:13:02,750 och begreppet tjäna faktiskt innehåll på Internet 232 00:13:02,750 --> 00:13:04,970 och hur allt detta börjar passa ihop. 233 00:13:04,970 --> 00:13:08,350 Så det visar sig att hela den här tiden på CS50 apparaten 234 00:13:08,350 --> 00:13:11,590 du har haft en webbserver på din dator. 235 00:13:11,590 --> 00:13:16,560 Vi har, i rättvisans namn, bara använt det för gedit för klang, för GDB och liknande, 236 00:13:16,560 --> 00:13:21,000 men också installeras av oss till dig i apparaten är en webbserver, 237 00:13:21,000 --> 00:13:23,940 och att webbservern råkar vara fri, öppen källkod, 238 00:13:23,940 --> 00:13:26,580 en av de mest populära i världen, som kallas Apache. 239 00:13:26,580 --> 00:13:31,340 Dess mer tekniska namn är httpd, d vara för demonen här, 240 00:13:31,340 --> 00:13:34,110 som är en teknisk ord för en server. 241 00:13:34,110 --> 00:13:38,690 Så installeras i CS50 maskinen är en webbserver, och vad betyder det? 242 00:13:38,690 --> 00:13:43,740 Tja, är en webbserver, begreppsmässigt, vissa server på Internet som serverar webbinnehåll. 243 00:13:43,740 --> 00:13:48,630 När bad om en fil, spottar ut HTML som komponerar filen, och voila. 244 00:13:48,630 --> 00:13:51,370 Du ser lite webbplatsens startsida. 245 00:13:51,370 --> 00:13:54,970 Men en server är, närmare bestämt, en programvara. 246 00:13:54,970 --> 00:13:59,190 Det behöver inte vara på en fysisk maskin, har det bara vara en bit av programvara som körs. 247 00:13:59,190 --> 00:14:01,980 Så CS50 apparaten är naturligtvis en mjukvara 248 00:14:01,980 --> 00:14:04,270 även om det är typ av att låtsas vara en maskin. 249 00:14:04,270 --> 00:14:06,960 Det låtsas vara en dator inuti en dator, 250 00:14:06,960 --> 00:14:11,140 men det betyder bara att apparaten verkligen kan köra saker som webbservrar. 251 00:14:11,140 --> 00:14:13,260 Det kan faktiskt köra e-postservrar. 252 00:14:13,260 --> 00:14:16,440 Vi kunde köra en chattserver i apparaten om vi ville, 253 00:14:16,440 --> 00:14:20,780 och faktiskt, vi kör en annan typ av server, kallad databas Server, MySQL. 254 00:14:20,780 --> 00:14:22,620 Men mer om det nästa vecka. 255 00:14:22,620 --> 00:14:26,400 Det innebär att jag faktiskt kan besöka webbsidor 256 00:14:26,400 --> 00:14:30,480 insidan av min apparat med hjälp av en webbläsare inuti apparaten 257 00:14:30,480 --> 00:14:33,600 eller ens på min egen laptop, min Mac eller min dator. 258 00:14:33,600 --> 00:14:37,780 Så vad betyder det? Det visar sig att varje gång du kör en Linux-dator, 259 00:14:37,780 --> 00:14:40,910 dess smeknamn är "lokal värd." 260 00:14:40,910 --> 00:14:43,370 Det har inte ett domännamn eftersom vi inte har köpt ett domännamn 261 00:14:43,370 --> 00:14:46,590 för ungefär apparaten, så att dess Standardnamnet är lokal värd. 262 00:14:46,590 --> 00:14:50,470 >> Men för att få apparaten att börja tjäna upp webbsidor, 263 00:14:50,470 --> 00:14:52,270 Vi måste skapa dem först. 264 00:14:52,270 --> 00:14:55,200 Så låt oss göra det. Låt mig gå in ett terminalfönster här 265 00:14:55,200 --> 00:14:58,190 och märker att jag är på min typiska John Harvard prompten. 266 00:14:58,190 --> 00:15:01,670 Låt mig gå vidare och skriva ls, och vi kommer att se några bekanta saker från den här terminen, 267 00:15:01,670 --> 00:15:04,580 skrivbord, nedladdningar, Dropbox och så vidare, 268 00:15:04,580 --> 00:15:07,540 men nu börjar vi vänder vår uppmärksamhet mot ett par. 269 00:15:07,540 --> 00:15:11,530 På många Linux webbservrar finns denna mapp som heter offentliga html, 270 00:15:11,530 --> 00:15:15,630 men vi kommer att hoppa över att en för nu och fokusera på detta, vhosts. 271 00:15:15,630 --> 00:15:18,850 Någon som vet vad en vhost är? 272 00:15:18,850 --> 00:15:21,110 Bara dumma jargong för virtuell värd, 273 00:15:21,110 --> 00:15:23,850 och vad detta betyder är att på en typisk server 274 00:15:23,850 --> 00:15:26,810 Du kan faktiskt vara värd för flera webbplatser. 275 00:15:26,810 --> 00:15:31,500 Du kan köpa ett domännamn som foo.com, och du kan lägga upp den på en server. 276 00:15:31,500 --> 00:15:36,100 Men du kan också köpa bar.com och lägga upp den på samma server. 277 00:15:36,100 --> 00:15:40,250 Orsaken är, webbläsare är smart nog att informera servern 278 00:15:40,250 --> 00:15:45,880 när en användare begär någon webbsida, vilken domännamn användaren vill hemsidan för. 279 00:15:45,880 --> 00:15:48,760 Så vad är trevligt om detta är att du inte behöver en fysisk server 280 00:15:48,760 --> 00:15:52,040 eller en CS50 apparat för varje webbplats du kanske vill skapa. 281 00:15:52,040 --> 00:15:55,520 Du kan använda samma server och utveckla en hundra olika webbplatser. 282 00:15:55,520 --> 00:15:58,770 Och faktiskt, om du är en person som försöker starta en hemsida, 283 00:15:58,770 --> 00:16:02,100 oavsett för skojs skull eller för företag, oftast kommer du gå ut på Internet, 284 00:16:02,100 --> 00:16:04,650 och du betalar någon tio dollar i månaden, en hundra dollar i månaden 285 00:16:04,650 --> 00:16:06,670 att vara värd din webbplats för dig. 286 00:16:06,670 --> 00:16:11,060 Och det sätt som fungerar är de avgifter andra människor 287 00:16:11,060 --> 00:16:13,160 tio dollar per månad eller hundra spänn i månaden 288 00:16:13,160 --> 00:16:17,200 värd andras webbplatser på deras samma server. 289 00:16:17,200 --> 00:16:20,740 Anledningen till att de kan göra det är på grund av denna funktion som kallas bhosts, 290 00:16:20,740 --> 00:16:23,790 men mer om det när det blir dags för slutlig projekt. 291 00:16:23,790 --> 00:16:28,360 >> För nu, låt oss bara dyka där. Så cd vhosts, och om jag skriver ls nu, 292 00:16:28,360 --> 00:16:31,370 märker att det finns en mapp där som heter lokal värd. 293 00:16:31,370 --> 00:16:33,440 Det beror som standard apparatens siffror 294 00:16:33,440 --> 00:16:36,160 du någonsin kommer att köra en webbplats på en apparat. 295 00:16:36,160 --> 00:16:38,970 Detta är egentligen inte den verkliga världen, det är inte en verklig webbserver. 296 00:16:38,970 --> 00:16:41,690 Så låt mig gå in lokal värd, och nu får vi se där 297 00:16:41,690 --> 00:16:44,290 en sista katalog som heter HTML. 298 00:16:44,290 --> 00:16:47,080 Så det är lite djup, hierarkin, men om och när 299 00:16:47,080 --> 00:16:51,230 du väljer att börja utveckla flera webbplatser under de kommande n månader eller år, 300 00:16:51,230 --> 00:16:54,370 denna typ av mappstruktur tenderar att vara till hjälp. 301 00:16:54,370 --> 00:16:56,560 Nu ska vi gå in HTML som jag just gjorde, 302 00:16:56,560 --> 00:16:59,010 typ LS, och ingenting är där. 303 00:16:59,010 --> 00:17:01,390 Så låt oss nu gå vidare och göra det. Låt mig öppna Chrome 304 00:17:01,390 --> 00:17:07,300 inuti apparaten och låt mig gå http://localhost. 305 00:17:07,300 --> 00:17:14,440 Så bokstavligen namnet på min apparat, skriv, och jag får index /. 306 00:17:14,440 --> 00:17:18,290 Detta är egentligen inte visa mig något av intresse, 307 00:17:18,290 --> 00:17:23,400 men det visar sig att det vi ser är att mappen HTML. 308 00:17:23,400 --> 00:17:25,770 Det finns inget inuti den mappen just nu, 309 00:17:25,770 --> 00:17:28,750 så istället, vad jag kommer att behöva göra är först skapa en fil. 310 00:17:28,750 --> 00:17:33,530 Skapa en HTML-fil som vi gjorde i måndags, men den här gången uttryckte det inuti apparaten. 311 00:17:33,530 --> 00:17:36,830 För er som försöker följa med bärbara datorer nu, 312 00:17:36,830 --> 00:17:42,040 Låt mig göra en åt sidan som kommer att täckas i den webbaserade pset, 313 00:17:42,040 --> 00:17:44,280 men för att få detta att fungera för allra första gången, 314 00:17:44,280 --> 00:17:49,830 du kommer att behöva köra detta kommando: sudo tjänst httpd start. 315 00:17:49,830 --> 00:17:52,670 Och detta, återigen, kommer upprepas i sista pset, 316 00:17:52,670 --> 00:17:55,460 men om du spelar tillsammans hemma nu, webbservern 317 00:17:55,460 --> 00:17:58,660 är avstängd i apparaten, och det är så att det inte SAP upp RAM 318 00:17:58,660 --> 00:18:01,960 och minne för 7 veckor av terminen när vi inte behöver det. 319 00:18:01,960 --> 00:18:05,190 Så du måste köra det här kommandot en gång, och du får en utgång på det sättet. 320 00:18:05,190 --> 00:18:07,920 Då ska du kunna spela med här. 321 00:18:07,920 --> 00:18:10,330 Nu låt oss gå tillbaka till den här mappen. 322 00:18:10,330 --> 00:18:12,770 Denna mapp är tom, så låt mig börja skapa en fil, 323 00:18:12,770 --> 00:18:16,360 gedit hello.html. 324 00:18:16,360 --> 00:18:20,930 >> Okej. Gedit är öppen, som vanligt. Låt mig göra DOCTYPE, html, 325 00:18:20,930 --> 00:18:25,270 html, låt mig få inför mig själv och börja stänga mina taggar i förväg. 326 00:18:25,270 --> 00:18:28,380 Nu har jag huvudet. Låt mig gå vidare och stänga huvudet, 327 00:18:28,380 --> 00:18:32,450 Låt mig nu göra titeln på sidan, hallå världen som förra gången, 328 00:18:32,450 --> 00:18:34,790 nära titel, låt mig göra en kropp. 329 00:18:34,790 --> 00:18:38,130 Här inne ska jag säga hej, världen med några exclams 330 00:18:38,130 --> 00:18:40,550 att klargöra att det är en annan sträng. 331 00:18:40,550 --> 00:18:45,800 Stäng kropp, och nu vill jag gå vidare och lämna spara. 332 00:18:45,800 --> 00:18:48,470 Låt mig gå tillbaka till min terminalfönster, och om jag skriver ls, 333 00:18:48,470 --> 00:18:51,830 Jag borde förmodligen se hello.html. Och jag gör det. 334 00:18:51,830 --> 00:18:55,070 Så låt oss nu gå tillbaka till min webbläsare, klicka ladda om, 335 00:18:55,070 --> 00:18:58,930 och du kan se att vi verkligen insidan av denna HTML-mapp. 336 00:18:58,930 --> 00:19:02,310 Jag ser en webbsida ännu, det är Apache, webbserver, 337 00:19:02,310 --> 00:19:04,670 bara visar mig på listan innehållet i den här katalogen. 338 00:19:04,670 --> 00:19:08,260 Precis som Mac OS eller Windows normalt skulle göra på din egen lokala hårddisk. 339 00:19:08,260 --> 00:19:12,730 Så om jag vill se den här webbsidan kan jag klicka på den här lilla länken här, hello.html, 340 00:19:12,730 --> 00:19:15,160 och faktiskt, det är vad jag hade förväntat mig att se. 341 00:19:15,160 --> 00:19:18,080 Nu, igen, detta är inte en URL som någon av er kan besöka just nu, 342 00:19:18,080 --> 00:19:20,760 eftersom det för dig, lokal värd, om du har en bärbar dator här, 343 00:19:20,760 --> 00:19:23,050 Det syftar på din egen instans av apparaten. 344 00:19:23,050 --> 00:19:25,900 Detta är på min egen personliga apparat, 345 00:19:25,900 --> 00:19:29,080 men detta är typ av dumt för mig att ha, ha 346 00:19:29,080 --> 00:19:34,480 en användare som jag själv klickar på hello.html att faktiskt se innehållet på denna sida. 347 00:19:34,480 --> 00:19:42,590 Det visar sig att webbservrar som Apache låta dig få en standard fil för varje webbserver. 348 00:19:42,590 --> 00:19:44,640 Observera Här har vi hello.html. 349 00:19:44,640 --> 00:19:48,410 Vad är kommandot i Linux för att byta namn på en fil? 350 00:19:48,410 --> 00:19:50,870 >> MV, för drag. Så låt mig göra det, 351 00:19:50,870 --> 00:19:55,870 och låt mig döpa hello.html till index.html. 352 00:19:55,870 --> 00:19:58,610 Låt mig skriva ls för att bekräfta det nu har blivit namn. 353 00:19:58,610 --> 00:20:03,250 Nu kommer att - om jag går tillbaka till lokala värden, 354 00:20:03,250 --> 00:20:06,710 märker nu att jag automatiskt är ser att webbsidan. 355 00:20:06,710 --> 00:20:11,740 Detta är identiskt med min faktiskt gör / index.html, 356 00:20:11,740 --> 00:20:14,740 men det fina är nu att webbservern är att räkna, 357 00:20:14,740 --> 00:20:18,830 åh, om du har en fil som, av mänskliga konventioner, kallas index.html, 358 00:20:18,830 --> 00:20:21,200 låt mig visa användaren att filen som standard 359 00:20:21,200 --> 00:20:25,290 snarare än några dumma kataloglistning som inte alls användarvänligt. 360 00:20:25,290 --> 00:20:28,900 I själva verket har de flesta webbplatser du besöker på Internet inte en lista över filer att klicka på, 361 00:20:28,900 --> 00:20:34,040 de visar bara du innehållet. Så det är hur vi kan göra det, index.html. 362 00:20:34,040 --> 00:20:37,000 Så detta är alla roliga och bra, men det är en ganska enkel webbsida. 363 00:20:37,000 --> 00:20:41,640 Låt mig gå vidare och öppna upp index.html i mina vhosts, 364 00:20:41,640 --> 00:20:47,620 lokala värdar, html katalog, och låt oss lägga till något av större intresse. 365 00:20:47,620 --> 00:20:56,120 Så det finns hej världen, låt oss i stället säga "Det här är CS50, Harvard College. . . " 366 00:20:56,120 --> 00:21:00,000 Så i början av kurskatalogen beskrivning av något slag där. 367 00:21:00,000 --> 00:21:03,780 Nu om jag laddar, skulle jag se detta i min hemsida. 368 00:21:03,780 --> 00:21:09,560 Okej, jag ser det, men antar att jag vill nu lista några mer innehåll i denna fil. 369 00:21:09,560 --> 00:21:15,160 Jag skulle kunna gå ner här och säga, förutsättningar ingen, 370 00:21:15,160 --> 00:21:18,740 även om vissa av er förmodligen vill, "Ha ha ha, inga förutsättningar." 371 00:21:18,740 --> 00:21:24,320 Men - officiellt. Så ladda, och nu har vi samma hyss som vi såg förra gången. 372 00:21:24,320 --> 00:21:26,240 Men varför är det? Det var en enkel fix. 373 00:21:26,240 --> 00:21:31,440 Varför är denna sida bruten? 374 00:21:31,440 --> 00:21:34,170 [Student, obegripligt] >> Ja, vi har löst detta innan 375 00:21:34,170 --> 00:21:37,440 genom att uttryckligen berätta webbläsaren sätta en radbrytning här. 376 00:21:37,440 --> 00:21:39,440 Och det beror återigen är en webbläsare kommer bara att göra 377 00:21:39,440 --> 00:21:42,610 uttryckligen vad märkspråk säger den att göra, 378 00:21:42,610 --> 00:21:45,730 så även om du kanske har tryck enter en eller två gånger eller till och med tio gånger, 379 00:21:45,730 --> 00:21:49,870 det kommer att kombinera att allt i en enda plats, bara genom konventionen. 380 00:21:49,870 --> 00:21:52,770 Så om du verkligen vill ha en radbrytning, måste du använda br-taggen, 381 00:21:52,770 --> 00:21:56,840 och nu varsel som måndag, lade jag / inuti denna tagg, 382 00:21:56,840 --> 00:22:00,090 bara för att det bara inte känns rätt 383 00:22:00,090 --> 00:22:02,990 att starta en radbrytning sedan stoppa den med ingenting mellan. 384 00:22:02,990 --> 00:22:07,740 >> Så konventionen i HTML är att öppna och stänga en tagg samtidigt. 385 00:22:07,740 --> 00:22:11,050 Som en sidoreplik ser du en hel del webbplatser i böcker inte göra det. 386 00:22:11,050 --> 00:22:14,240 Det är korrekt att göra eller att inte göra det, men vi menar 387 00:22:14,240 --> 00:22:17,430 att design-wise och stilistiskt är det bara bättre 388 00:22:17,430 --> 00:22:20,540 för då varje tagg är både öppnas och stängs på något sätt. 389 00:22:20,540 --> 00:22:23,370 Så nu ska vi spara och ladda om. Gå tillbaka till webbläsaren, okej. 390 00:22:23,370 --> 00:22:26,680 Nu gör vi vissa framsteg, men det är inte riktigt tillräckligt. 391 00:22:26,680 --> 00:22:33,210 Låt oss gå vidare och börja skriva i några längre textmassa. 392 00:22:33,210 --> 00:22:40,610 Så låt oss säga, "En snabb brun räv hoppar över en lat hund." 393 00:22:40,610 --> 00:22:42,700 Och nu vill jag bara kopiera och klistra in detta några gånger 394 00:22:42,700 --> 00:22:45,040 så att vi har ett textstycke. 395 00:22:45,040 --> 00:22:47,780 Låt mig gå tillbaka hit. Så det är inte ser mycket bra ut. 396 00:22:47,780 --> 00:22:50,000 Jag har en radbrytning, så det är okej, 397 00:22:50,000 --> 00:22:52,140 men nu, när vi komma till den punkt att ha en webbsida 398 00:22:52,140 --> 00:22:55,640 som har massor av innehåll och inte bara enstaka linjer att visa HTML, 399 00:22:55,640 --> 00:22:58,570 Vi kan börja tänka på dessa saker som faktiska stycken. 400 00:22:58,570 --> 00:23:01,590 Och vi kan börja strukturera vår hemsida lite mer rent. 401 00:23:01,590 --> 00:23:05,120 Och faktiskt, vad jag kan göra är att gå upp här inne i min kropp tag, 402 00:23:05,120 --> 00:23:09,400 och du vet vad, om "Det här är CS50. . . " verkligen demarks början av ett stycke, 403 00:23:09,400 --> 00:23:11,310 Nåväl, låt oss märka den som sådan. 404 00:23:11,310 --> 00:23:13,570 Låt mig strecksatsen texten, bara genom konvention, låt mig säga 405 00:23:13,570 --> 00:23:15,710 att denna punkt slutar här, 406 00:23:15,710 --> 00:23:18,320 och sedan i stället gör detta radbrytning, låt mig bara säga 407 00:23:18,320 --> 00:23:23,300 att detta hör hemma där och som en ny punkt, 408 00:23:23,300 --> 00:23:27,610 och jag ska bara snabbt strecksatsen genom att bara dunkardags allt det här. 409 00:23:27,610 --> 00:23:30,660 >> Så nu har vi ett indraget stycke där, 410 00:23:30,660 --> 00:23:33,510 och nu vår kod börjar få lite mer 411 00:23:33,510 --> 00:23:37,070 semantiskt linje med vad vi försöker göra. 412 00:23:37,070 --> 00:23:40,130 Vi har ett stycke, så låt oss kalla det ett stycke med p-taggen. 413 00:23:40,130 --> 00:23:43,370 Vi har en andra stycket, så låt oss kalla det ett stycke med p-taggen. 414 00:23:43,370 --> 00:23:45,850 Och nu, vad webbläsaren typiskt att göra 415 00:23:45,850 --> 00:23:48,490 är precis som i en engelsk bok eller uppsats, 416 00:23:48,490 --> 00:23:51,280 där du ser vanligtvis några radbrytningar mellan stycken. 417 00:23:51,280 --> 00:23:53,720 Webbläsare kommer att göra det åt dig automatiskt. 418 00:23:53,720 --> 00:23:56,680 Så nu har vi två stycken och vi kan fortsätta. 419 00:23:56,680 --> 00:23:58,770 Men, naturligtvis, på webben, när du har kroppar av text 420 00:23:58,770 --> 00:24:01,370 Det är inte normalt bara stora BLOB text. 421 00:24:01,370 --> 00:24:04,040 Det finns ofta hyperlänkar i det. 422 00:24:04,040 --> 00:24:07,250 Så om vi vill, till exempel omfatta några länkar där, 423 00:24:07,250 --> 00:24:10,760 anta vad som kan vara av intresse i vad webbsida jag skapar här är - 424 00:24:10,760 --> 00:24:12,780 Låt mig gå till Google.com, 425 00:24:12,780 --> 00:24:16,540 och låt mig söka efter en snabb brun räv. 426 00:24:16,540 --> 00:24:22,150 Gå till Google bilder och, vad sägs om - det är gulligt. 427 00:24:22,150 --> 00:24:27,420 Vi ska gå med detta. Så här har vi en snabb brun räv hoppar över en lat hund. 428 00:24:27,420 --> 00:24:30,560 Så vad jag ska göra här, bara för sakens skull demonstration, 429 00:24:30,560 --> 00:24:32,950 är anta att denna bild var på min server, 430 00:24:32,950 --> 00:24:35,240 och jag hade skapat dessa bilder. 431 00:24:35,240 --> 00:24:38,720 Vad jag gjorde var högerklicka eller kontrollera klicka på bilden, 432 00:24:38,720 --> 00:24:42,370 och vad du ser i de flesta webbläsare är lite meny - 433 00:24:42,370 --> 00:24:48,800 sluta med det - en liten meny som låter dig välja Kopiera länkadress eller Kopiera URL. 434 00:24:48,800 --> 00:24:52,750 Så låt mig gå tillbaka nu till min HTML och antar att jag vill ha 435 00:24:52,750 --> 00:24:56,420 till hyperlänk detta till en annan webbsida. 436 00:24:56,420 --> 00:24:58,640 >> Vad var märket heter för det? 437 00:24:58,640 --> 00:25:01,650 [Student, obegripligt] >> Ja. Så en href för Hyper referens. 438 00:25:01,650 --> 00:25:04,660 Låt mig gå vidare och klistra det i. 439 00:25:04,660 --> 00:25:07,290 Det är en ganska lång webbadress, så låt mig zooma ut. 440 00:25:07,290 --> 00:25:09,950 Stäng fästen, så nu märker jag vägen hit 441 00:25:09,950 --> 00:25:11,960 eftersom denna URL råkade vara ganska lång. 442 00:25:11,960 --> 00:25:15,180 Låt mig rulla hit till slutet av snabba bruna räven, 443 00:25:15,180 --> 00:25:18,830 och sedan låta mig avsluta denna tagg med 00:25:21,280 där jag bara stängt namnet på etiketten. 445 00:25:21,280 --> 00:25:24,470 Låt mig gå vidare och spara filen, ladda om webbsidan, 446 00:25:24,470 --> 00:25:27,880 och nu, som standard, det är kommer att understrukna med blått för mig, 447 00:25:27,880 --> 00:25:31,980 men i själva verket kan jag klicka nu på detta och voila. Det finns den bilden. 448 00:25:31,980 --> 00:25:33,990 Och det behövde inte vara en bild, det kunde ha kopplat 449 00:25:33,990 --> 00:25:36,270 till någon annan slumpmässig hemsida på Internet. 450 00:25:36,270 --> 00:25:39,610 Jag kunde göra detta, till exempel med CS50, så en sista exempel här. 451 00:25:39,610 --> 00:25:42,730 "Detta är CS50" kan vara meningsfullt att gå en, href = 452 00:25:42,730 --> 00:25:50,340 http://www.cs50.net, nära citat, nära ankare. 453 00:25:50,340 --> 00:25:53,990 Så nu det är en ännu kortare URL och denna gång vi kommer inte att länka till en bild. 454 00:25:53,990 --> 00:25:57,880 Vi istället kommer att länka till en annan sida. 455 00:25:57,880 --> 00:25:59,840 Nu har vi en bild här. 456 00:25:59,840 --> 00:26:02,970 Det känns som att vi kan göra lite bättre än att bara länka till en bild. 457 00:26:02,970 --> 00:26:05,760 Tänk om vi vill faktiskt förkroppsligar det i vår egen webbsida? 458 00:26:05,760 --> 00:26:09,290 >> Tja, vad jag kan göra här är, snarare än länkar till den här bilden, 459 00:26:09,290 --> 00:26:14,690 Låt mig i stället klippa URL, och vi ska bli av med den hyperlänk och städa upp det här. 460 00:26:14,690 --> 00:26:17,190 Och vi kommer att gå ner här och bli av med denna. 461 00:26:17,190 --> 00:26:20,910 Vi behöver verkligen alla dessa meningar nu, så låt mig förkorta sidan lite. 462 00:26:20,910 --> 00:26:24,530 Och sedan ner hit låt mig gå vidare i ett nytt stycke, 463 00:26:24,530 --> 00:26:30,100 säga att jag inte vill att texten nu, jag vill ha en bild vars källa kommer att vara den webbadressen. 464 00:26:30,100 --> 00:26:33,100 En bild, som en radbrytning, är antingen det eller är det inte. 465 00:26:33,100 --> 00:26:35,900 Så låt mig omedelbart stänga den taggen. 466 00:26:35,900 --> 00:26:39,440 Låt mig gå vidare nu och stäng det stycke som jag är inne, 467 00:26:39,440 --> 00:26:43,010 och om allt går bra med hej, värld, om jag ladda nu, 468 00:26:43,010 --> 00:26:45,520 Jag faktiskt se rakt i min egen hemsida en bild. 469 00:26:45,520 --> 00:26:48,570 Så nu har vi en bild tagg, ett ankare tag och liknande, 470 00:26:48,570 --> 00:26:51,320 och för bra åtgärd, låt mig göra en annan sak som ofta försummas 471 00:26:51,320 --> 00:26:55,900 på webbplatser dessa dagar: Låt oss ge några beskrivande text för denna bild 472 00:26:55,900 --> 00:26:58,090 för människor som är på en mobil enhet 473 00:26:58,090 --> 00:27:00,640 och därför inte skulle kunna ladda ner denna bild mycket snabbt, 474 00:27:00,640 --> 00:27:03,310 för människor som är blinda och kanske inte kan se bilden 475 00:27:03,310 --> 00:27:06,480 men de kan ha en skärmläsare som kan berätta för dem vad den här bilden är. 476 00:27:06,480 --> 00:27:09,100 Och att göra det, det finns en annan egenskap för bild-taggar 477 00:27:09,100 --> 00:27:11,290 kallas alt, för alternativ text. 478 00:27:11,290 --> 00:27:14,650 Och vad jag kan göra här är att säga, "Detta är en sammanfattning av brun räv." 479 00:27:14,650 --> 00:27:17,650 Så att även om det mänskliga inte kan se bilden på skärmen, 480 00:27:17,650 --> 00:27:20,560 han eller hon kan åtminstone höra, som med viss mjukvara, 481 00:27:20,560 --> 00:27:23,080 vad som faktiskt finns på skärmen. 482 00:27:23,080 --> 00:27:25,040 >> Det kommer inte att förändra estetik sidan, 483 00:27:25,040 --> 00:27:27,640 men det är verkligen god praxis för användarna. 484 00:27:27,640 --> 00:27:31,760 Okej, låt oss lämna denna webbsida i dess nuvarande form, 485 00:27:31,760 --> 00:27:33,890 men låt oss se om vi inte kan nu presentera 486 00:27:33,890 --> 00:27:36,210 några bättre metoder för att skriva dessa webbsidor, 487 00:27:36,210 --> 00:27:39,980 några lektioner som kommer att tjäna oss och våra sidor blir mer och mer komplexa. 488 00:27:39,980 --> 00:27:42,220 Vad vi inte tänker göra under de närmaste veckorna 489 00:27:42,220 --> 00:27:46,810 är att gå igenom alla de dussintals HTML-taggar som finns. 490 00:27:46,810 --> 00:27:49,800 Ungefär som i början tillbaka vecka 0, det förmodligen räcker 491 00:27:49,800 --> 00:27:52,120 att ge en hög nivå översikt över några av de begrepp, 492 00:27:52,120 --> 00:27:54,530 en snabb rundtur i några av blocken du var antagligen, 493 00:27:54,530 --> 00:27:58,240 ganska bekvämt att navigera på egen hand, de olika pusselbitar. 494 00:27:58,240 --> 00:28:00,460 Och det kommer att hända igen i HTML, troligen, 495 00:28:00,460 --> 00:28:04,320 varigenom det finns gott om resurser på webben som vi peka dig i, 496 00:28:04,320 --> 00:28:06,920 olika läroböcker, om du föredrar att läsa en lärobok, 497 00:28:06,920 --> 00:28:10,560 som kommer att gå igenom alla de olika saker du kan göra med HTML, 498 00:28:10,560 --> 00:28:16,100 men egentligen har vi sett hittills i HTML flesta av de grundläggande begreppen. 499 00:28:16,100 --> 00:28:19,900 Vi har begreppet taggar öppnas, varvid taggarna stängda. 500 00:28:19,900 --> 00:28:22,100 Vissa taggar som både öppnas och stängs 501 00:28:22,100 --> 00:28:24,620 i den meningen att de är tomma, det bör finnas något inne i dem 502 00:28:24,620 --> 00:28:27,490 som en bild-tagg eller en radbrytning, som är bara där. 503 00:28:27,490 --> 00:28:32,330 Vi har också tittat redan vid begreppet ett attribut, som alt eller källa. 504 00:28:32,330 --> 00:28:36,410 Observera att dessa ord har en tendens av konvention vara kort och koncis. 505 00:28:36,410 --> 00:28:39,140 >> Vi har inte bestämmanderätt över vad dessa saker kallas, 506 00:28:39,140 --> 00:28:42,060 någon annan som uppfann HTML kom upp med dessa namn. 507 00:28:42,060 --> 00:28:44,710 Så du måste bara börja känna eller se upp, när du behöver dem, 508 00:28:44,710 --> 00:28:47,160 vilka namnen är för dessa taggar och attribut. 509 00:28:47,160 --> 00:28:49,510 I fallet med dessa attribut, attribut allmänhet 510 00:28:49,510 --> 00:28:52,900 ändra beteendet för vissa taggen. 511 00:28:52,900 --> 00:28:55,710 I det här fallet, säger källan attributet bildtaggen 512 00:28:55,710 --> 00:28:57,940 vad källan bilden ska vara. 513 00:28:57,940 --> 00:29:04,460 Attributet href berättar ankarkod vad det egentligen borde länka till. 514 00:29:04,460 --> 00:29:06,800 Men när det gäller strukturen hos en webbsida, trots Facebook 515 00:29:06,800 --> 00:29:09,680 och Google och liknande ser ut som en enda röra 516 00:29:09,680 --> 00:29:12,560 under huven vid en första anblick, om du börjar läsa igenom det 517 00:29:12,560 --> 00:29:16,950 mer metodiskt, följ de alla denna grundläggande, grundläggande struktur. 518 00:29:16,950 --> 00:29:19,660 Men vi kan förbättra stilisering av dessa saker. 519 00:29:19,660 --> 00:29:24,180 Så låt mig gå till några exempel som jag beredd i förväg. 520 00:29:24,180 --> 00:29:27,280 Låt mig gå vidare och kopiera dem från en annan mapp här 521 00:29:27,280 --> 00:29:29,380 och sätta dem i den här katalogen. 522 00:29:29,380 --> 00:29:32,210 I förväg, vad jag gjorde var förbereda några filer: 523 00:29:32,210 --> 00:29:35,670 search0, SEARCH1, search2 och search3 och 4. 524 00:29:35,670 --> 00:29:38,740 Låt mig gå vidare och öppna upp den första av dessa filer, 525 00:29:38,740 --> 00:29:42,570 och låt oss se om vi inte kan börja skapa vår egen sökmotor. 526 00:29:42,570 --> 00:29:46,530 På toppen av denna fil, som vanligtvis är fallet i klassen, bara en massa kommentarer. 527 00:29:46,530 --> 00:29:49,760 I HTML, men de medel som du startar en kommentar 528 00:29:49,760 --> 00:29:55,640 är <-! och då är du inne i en kommentar, en multi-line kommentar. 529 00:29:55,640 --> 00:29:59,800 När du är redo att stoppa den kommentaren, kan du göra ->. 530 00:29:59,800 --> 00:30:02,380 Så allt upptill i blått är bara en kommentar. 531 00:30:02,380 --> 00:30:04,620 >> Detta är min doctype deklaration, som återigen 532 00:30:04,620 --> 00:30:07,080 du kan bara kopiera och klistra in på tro, för nu. 533 00:30:07,080 --> 00:30:10,410 Detta talar bara webbläsaren, "Här kommer lite HTML 5." 534 00:30:10,410 --> 00:30:13,600 Därunder, på ledningen 14, är den första av mina faktiska taggar, 535 00:30:13,600 --> 00:30:16,900 och detta säger precis som tidigare, här kommer lite HTML, 536 00:30:16,900 --> 00:30:19,460 här kommer chefen för min sida, här kommer titeln, 537 00:30:19,460 --> 00:30:23,900 och sedan omvänt, det är det för titeln, det är det för huvudet. 538 00:30:23,900 --> 00:30:26,460 Här kommer nu huvudtexten på min webbsida. 539 00:30:26,460 --> 00:30:31,040 Så ett par nya taggar nu: H1 står för rubrik 1. 540 00:30:31,040 --> 00:30:33,850 Det finns en tradition i HTML för många år tillbaka 541 00:30:33,850 --> 00:30:37,990 att ha olika storlekar av text. 542 00:30:37,990 --> 00:30:41,980 Och tillbaka i dag, menade var och en, generellt, bara stor och fet. 543 00:30:41,980 --> 00:30:45,860 Men det finns också h2, som är stor men inte riktigt lika stor och fet. 544 00:30:45,860 --> 00:30:49,320 Det finns H3, som är typ av stora men inte alls lika stor och fet, 545 00:30:49,320 --> 00:30:52,380 och så vidare, hela vägen ner till h6. 546 00:30:52,380 --> 00:30:55,550 Dessa dagar, dock är H1, H2 och H3 verkligen betydde 547 00:30:55,550 --> 00:30:57,980 att ha mer semantisk innebörd för dem, 548 00:30:57,980 --> 00:31:01,100 varigenom h1 är verkligen en rubrik: rubriken på en webbsida, 549 00:31:01,100 --> 00:31:04,210 rubriken till en kolumn eller något liknande text. 550 00:31:04,210 --> 00:31:09,030 Så jag har medvetet sagt h1 CS50 Sök> h1 551 00:31:09,030 --> 00:31:12,640 att specifiy att detta verkligen rubriken, titeln på min sida. 552 00:31:12,640 --> 00:31:14,850 Inte titeln i namnlisten mening, 553 00:31:14,850 --> 00:31:18,960 men det namn som du faktiskt ser på webbsidan själv, i kroppen. 554 00:31:18,960 --> 00:31:20,990 Nu kan du nog gissa vad det är, 555 00:31:20,990 --> 00:31:23,110 även om vi har några nya bitar av syntaxen. 556 00:31:23,110 --> 00:31:25,930 Detta är en form. Så webben blir riktigt intressant 557 00:31:25,930 --> 00:31:28,770 när webbplatser tar indata från användarna. 558 00:31:28,770 --> 00:31:31,700 I denna klass, i problemet ligger på webbprogrammering, 559 00:31:31,700 --> 00:31:33,880 Vi kommer inte att göra en hemsida, per se, 560 00:31:33,880 --> 00:31:37,570 med statiskt innehåll som visar fotografier som du har tagit, 561 00:31:37,570 --> 00:31:40,010 eller det är min CV och saker om mig, 562 00:31:40,010 --> 00:31:42,450 eftersom dessa saker är relativt lätt att sätta ihop. 563 00:31:42,450 --> 00:31:44,400 Det är svårt att göra saker vackra på webben, 564 00:31:44,400 --> 00:31:46,390 men åtminstone sätta upp innehåll är ganska trivialt. 565 00:31:46,390 --> 00:31:49,380 Men saker och ting bli riktigt intressant när någon kan besöka din webbplats 566 00:31:49,380 --> 00:31:52,260 och ge input och kan fylla i formulär, 567 00:31:52,260 --> 00:31:55,800 kan bocka av kryssrutorna och kan interagera med din webbplats. 568 00:31:55,800 --> 00:31:57,780 Och faktiskt, förmodligen varje webbplats du bryr dig om 569 00:31:57,780 --> 00:32:00,710 dessa dagar, i detalj, är något interaktivt. 570 00:32:00,710 --> 00:32:03,110 Facebook, Google och liknande, som tar indata 571 00:32:03,110 --> 00:32:05,100 och producera anpassad utsignal. 572 00:32:05,100 --> 00:32:07,780 >> Så låt oss börja göra det nu. Låt oss övergång nu 573 00:32:07,780 --> 00:32:11,150 från bara använda HTML för uppmärkning av statiskt innehåll 574 00:32:11,150 --> 00:32:14,790 som i stället en leverans mekanism för dynamiskt innehåll. 575 00:32:14,790 --> 00:32:17,350 Och mot detta syfte, låt oss genomföra vår egen sökmotor. 576 00:32:17,350 --> 00:32:20,820 Låt oss göra det på följande sätt. Här är formuläret taggen. 577 00:32:20,820 --> 00:32:24,090 Åtgärdsprogrammet attribut anger att när användaren fyller i det här formuläret 578 00:32:24,090 --> 00:32:28,400 med sin tangentbordet kommer det att lämnas till denna URL här. 579 00:32:28,400 --> 00:32:31,230 Så jag är typ av fusk. Det kommer att ta oss lite längre 580 00:32:31,230 --> 00:32:33,780 än en klass att genomföra hela sökmotorn, 581 00:32:33,780 --> 00:32:35,880 så vi ska bara göra fronten, så att säga. 582 00:32:35,880 --> 00:32:38,650 Vi gör den del som låter användaren söka, och vi kommer sorts Punt till Google 583 00:32:38,650 --> 00:32:40,950 det svåra att hitta sökresultaten, 584 00:32:40,950 --> 00:32:43,520 men, särskilt, jag ska prata med Googles webbserver 585 00:32:43,520 --> 00:32:46,710 använda en av två mycket populära metoder. 586 00:32:46,710 --> 00:32:50,000 En är att få en annan, att vi så småningom får se, som post, 587 00:32:50,000 --> 00:32:52,660 även om det finns andra som är mindre ofta används. 588 00:32:52,660 --> 00:32:56,440 Så får bara frammanar tanken på, jag vill få lite innehåll, få lite sökresultat. 589 00:32:56,440 --> 00:32:58,440 Detta kan du gissa kanske vad det gör. 590 00:32:58,440 --> 00:33:01,900 Detta är ett slags ingång, är det i själva verket, kommer att se ut ett textfält, 591 00:33:01,900 --> 00:33:05,200 och namnet på den ingången, namnet på den variabeln, så att säga, 592 00:33:05,200 --> 00:33:08,610 kommer att Q för frågan enligt konvention. 593 00:33:08,610 --> 00:33:11,700 Och återigen är den typ av denna ingång kommer inte att vara en kryssruta; 594 00:33:11,700 --> 00:33:13,890 det kommer inte att bli en meny, det kommer att bli ett textfält 595 00:33:13,890 --> 00:33:18,060 som betecknas med detta attribut här, och den här textrutan, 596 00:33:18,060 --> 00:33:20,680 som en radbrytning, antingen där eller inte. 597 00:33:20,680 --> 00:33:24,480 Så vi har ett tomt element med snedstreck inuti den taggen. 598 00:33:24,480 --> 00:33:28,050 Sen ska jag sätta en radbrytning och du kan kanske gissa vad detta kommer att göra. 599 00:33:28,050 --> 00:33:30,210 Detta är en annan typ av formulär ingång. 600 00:33:30,210 --> 00:33:32,350 >> Den här kommer att användas för att skicka formuläret. 601 00:33:32,350 --> 00:33:36,140 Så detta kommer att bli den stora knappen som användaren kan klicka på för att skicka formuläret, 602 00:33:36,140 --> 00:33:40,800 och etiketten på den knappen kommer att vara "CS50 Sök." 603 00:33:40,800 --> 00:33:44,170 Stäng formuläret, nära kroppen, nära HTML. 604 00:33:44,170 --> 00:33:46,280 Låt oss se vad vi har i form av den här webbsidan. 605 00:33:46,280 --> 00:33:48,260 Så låt mig gå i min webbläsare, 606 00:33:48,260 --> 00:33:50,360 Låt mig gå, fortfarande, till lokal värd. 607 00:33:50,360 --> 00:33:54,650 Detta är fortfarande index.html, så om jag vill se den här filen heter search0, 608 00:33:54,650 --> 00:33:59,710 Jag kan helt enkelt göra / search0.html anger - 609 00:33:59,710 --> 00:34:01,880 och den första av mina misstag. 610 00:34:01,880 --> 00:34:04,400 Vad händer? Jag tydligt har inte behörighet 611 00:34:04,400 --> 00:34:06,430 att få tillgång till den här filen av någon anledning. 612 00:34:06,430 --> 00:34:10,170 Men det beror på, till skillnad från det arbete vi har gjort hittills i C, 613 00:34:10,170 --> 00:34:14,340 där de program du skriver antas vara runable av dig, 614 00:34:14,340 --> 00:34:17,590 körbara av dig, det är inte riktigt fallet på webben, 615 00:34:17,590 --> 00:34:21,010 där ibland du kanske vill skapa filer på en server, 616 00:34:21,010 --> 00:34:23,310 men du vill inte att hela världen ska kunna se dem. 617 00:34:23,310 --> 00:34:25,469 Snarare vill du världen att se några filer 618 00:34:25,469 --> 00:34:27,730 men inte andra, bara för privatlivet skull. 619 00:34:27,730 --> 00:34:30,730 Så det är mer av en opt-in basis när du gör saker på webben. 620 00:34:30,730 --> 00:34:32,810 Och så låt mig faktiskt skriver ls här, 621 00:34:32,810 --> 00:34:37,440 och du ser de filer jag har, men minns att om jag gör ls-l för länge, 622 00:34:37,440 --> 00:34:41,520 Jag får en längre lista som ger mig lite mer information om dessa filer 623 00:34:41,520 --> 00:34:45,139 som nu, verkligen, för första gången är relevant för oss. 624 00:34:45,139 --> 00:34:47,840 Observera att längst till höger är namnen på mina filer, 625 00:34:47,840 --> 00:34:50,690 och sedan den tidpunkt då de senast ändrades eller kopieras. 626 00:34:50,690 --> 00:34:54,370 Detta nummer här är vad? Minns du? 627 00:34:54,370 --> 00:34:56,400 Storleken i byte, hur stor filen är. 628 00:34:56,400 --> 00:34:59,520 >> Så jag verkar ha någon form av logo i här som är större än alla de andra filerna. 629 00:34:59,520 --> 00:35:03,610 Det är vem jag är, det är vad jag är och vilken grupp jag är i. 630 00:35:03,610 --> 00:35:07,430 Men sedan, här borta till vänster är lite kryptiskt sekvens, 631 00:35:07,430 --> 00:35:10,040 och vi pratade, tror jag, kort om detta tidigare, 632 00:35:10,040 --> 00:35:12,050 men detta har att göra med behörigheter. 633 00:35:12,050 --> 00:35:14,020 Och även om det är lite disigt, 634 00:35:14,020 --> 00:35:17,270 RW betyder förmodligen läsa och skriva. 635 00:35:17,270 --> 00:35:22,560 Så det visar sig att dessa streck betecknar olika uppsättningar behörigheter för olika människor. 636 00:35:22,560 --> 00:35:24,730 Och mönstret är i huvudsak enligt följande. 637 00:35:24,730 --> 00:35:27,650 När du ser en sekvens av streck här, de ser som följer. 638 00:35:27,650 --> 00:35:30,450 Det finns ett streck, så finns det ytterligare tre streck, 639 00:35:30,450 --> 00:35:33,390 så finns det ytterligare tre, så det finns en annan tre. 640 00:35:33,390 --> 00:35:36,800 Den första är antingen ett bindestreck eller dess annons för katalogen. 641 00:35:36,800 --> 00:35:40,220 Så att en är ganska enkelt. Om det är en mapp, säger d, annars är det ett bindestreck. 642 00:35:40,220 --> 00:35:44,080 Det finns ett par andra fall, men nu ska vi bara bryr oss om filer och kataloger. 643 00:35:44,080 --> 00:35:48,090 Dessa tre streck - och jag har artificiellt insatt utrymmen. 644 00:35:48,090 --> 00:35:50,490 De var naturligtvis inte det när vi såg dem för en stund sedan. 645 00:35:50,490 --> 00:35:52,900 Dessa är filen ägarens tillstånd, 646 00:35:52,900 --> 00:35:55,840 och hämta från en andra sedan att det var läsa & skriva. 647 00:35:55,840 --> 00:35:58,560 Det var för att jag, som den person som skapade den här filen en stund sedan, 648 00:35:58,560 --> 00:36:01,250 Jag bara som standard på en Linux-dator, 649 00:36:01,250 --> 00:36:03,910 har förmågan att fortsätta läsa och skriva filen. 650 00:36:03,910 --> 00:36:07,170 >> Så operativsystemet ger mig bara RW automatiskt. 651 00:36:07,170 --> 00:36:10,840 De mellersta dem avser min grupp, nämligen studenter, 652 00:36:10,840 --> 00:36:14,590 som är typ av meningslös på apparaten eftersom jag är den enda person som använder apparaten. 653 00:36:14,590 --> 00:36:16,620 Så låt mig bara vifta mina händer på det för nu. 654 00:36:16,620 --> 00:36:19,190 Men de sista är viktigast för webben. 655 00:36:19,190 --> 00:36:21,580 Detta är alla andra i världen, och det faktum 656 00:36:21,580 --> 00:36:24,600 att det är --- betyder att ingen annan i världen 657 00:36:24,600 --> 00:36:26,680 har några rättigheter till den här filen. 658 00:36:26,680 --> 00:36:29,180 Uppenbarligen ett problem, så jag måste fixa det här 659 00:36:29,180 --> 00:36:33,830 genom något som ger världen vad? Läs & skriv? 660 00:36:33,830 --> 00:36:35,850 Det är förmodligen dum, eller hur? Jag vill inte att någon på webben 661 00:36:35,850 --> 00:36:38,530 att gå att besöka min sida och på något sätt förändra den filen, 662 00:36:38,530 --> 00:36:40,800 även om de kunde verkligen inte med en HTML-fil, 663 00:36:40,800 --> 00:36:44,110 men bara i princip, förmodligen bara vill att de ska kunna läsa den. 664 00:36:44,110 --> 00:36:47,910 Vad innebär det att läsa den? Det betyder inte att de kommer att bry sig om den faktiska HTML, 665 00:36:47,910 --> 00:36:51,820 men webbläsaren måste kunna tolka det märkningsspråk, 666 00:36:51,820 --> 00:36:53,720 uppifrån och ned, vänster till höger. 667 00:36:53,720 --> 00:36:57,990 Så någon på webben måste kunna läsa den, så jag minimalt måste ge det r. 668 00:36:57,990 --> 00:37:00,240 Jag kan göra detta i ett par olika sätt, men kanske 669 00:37:00,240 --> 00:37:03,080 det enklaste är att köra det här kommandot här. 670 00:37:03,080 --> 00:37:10,860 Chmod, ändra läge, då en + r så alla, alla i världen + läsa, 671 00:37:10,860 --> 00:37:13,830 och sedan namnet på filen, search0.html. 672 00:37:13,830 --> 00:37:18,310 >> Nu om jag gör ls-l igen märker att filen har ändrats, 673 00:37:18,310 --> 00:37:21,440 och faktiskt har jag aktiverat r för alla. 674 00:37:21,440 --> 00:37:23,350 Jag har också aktiverat för min grupp, men det är bra, 675 00:37:23,350 --> 00:37:27,150 för om jag vände på för alla, är min grupp en delmängd av det. 676 00:37:27,150 --> 00:37:31,480 Så det är också bra. Det betyder bara att datorn nu har gjort det läsbart. 677 00:37:31,480 --> 00:37:34,430 Låt mig gå tillbaka till min webbläsare, klicka ladda om. 678 00:37:34,430 --> 00:37:36,330 Ah-ha. Vi har nu CS50 Sök. 679 00:37:36,330 --> 00:37:39,830 Jag har zoomat in lite artificiellt - ganska ohyggliga sökmotor. 680 00:37:39,830 --> 00:37:41,930 Men låt oss se om det verkligen fungerar. 681 00:37:41,930 --> 00:37:45,880 Låt mig först göra en snabb sanity check, låt mig kontrollera klicka och visa sidan källan. 682 00:37:45,880 --> 00:37:50,780 Observera att i Chrome vi nu ser samma HTML som jag själv har skapat. 683 00:37:50,780 --> 00:37:55,420 Bli inte förvirrad här, men. Jag kan inte börja ändra koden här, 684 00:37:55,420 --> 00:37:59,420 eftersom webbläsaren har en skrivskyddad vy av denna kod. 685 00:37:59,420 --> 00:38:06,060 Webbläsaren har just bett lokal värd för en fil som heter search0.html. 686 00:38:06,060 --> 00:38:09,490 Det är nu ren slump att apparaten 687 00:38:09,490 --> 00:38:13,480 råkar vara på samma dator som min webbläsare. 688 00:38:13,480 --> 00:38:20,470 Jag kunde bara motsvarande, har skrivit in www.facebook.com/search0.html, 689 00:38:20,470 --> 00:38:23,830 och om Facebook hade en fil som heter det, skulle jag då få se deras HTML. 690 00:38:23,830 --> 00:38:27,360 Och naturligtvis kan jag inte ändra filen som kommer tillbaka från Facebook heller. 691 00:38:27,360 --> 00:38:29,360 Så nu är vi typ av suddar ut gränserna. 692 00:38:29,360 --> 00:38:32,130 Apparaten är både en server, serverar webbsidor, 693 00:38:32,130 --> 00:38:34,870 men det är också en klient i den bemärkelsen att jag använder en webbläsare 694 00:38:34,870 --> 00:38:37,630 att faktiskt prata med den servern. 695 00:38:37,630 --> 00:38:39,610 Så låt oss se om min Googles sökmotor fungerar. 696 00:38:39,610 --> 00:38:44,930 Låt mig gå vidare och leta efter snabba bruna räven skriver. 697 00:38:44,930 --> 00:38:47,540 Och voila, har jag nu min egen sökmotor. 698 00:38:47,540 --> 00:38:51,460 >> Men hur fungerar det? 699 00:38:51,460 --> 00:38:55,380 Lite av en sträcka, men - och nu kan du inte se just den del som är av intresse. 700 00:38:55,380 --> 00:38:57,370 Lägg märke till vad som händer. 701 00:38:57,370 --> 00:39:00,430 Lägg märke till URL: en. Det visar sig att denna metod, 702 00:39:00,430 --> 00:39:02,780 heter får, är super-enkelt. 703 00:39:02,780 --> 00:39:10,270 När du anger i ett formulär som du vill "komma" resultat från några servern, 704 00:39:10,270 --> 00:39:13,200 vad det kommer att göra är att ta vad du skrev i formuläret 705 00:39:13,200 --> 00:39:15,290 och placera den i webbadressen. 706 00:39:15,290 --> 00:39:18,580 Det kommer att standardisera hur det blir sätts i URL som följer. 707 00:39:18,580 --> 00:39:22,290 Observera att detta är den webbadress som var värdet av min handling attribut. 708 00:39:22,290 --> 00:39:24,730 Det var där jag ville formuläret för att hamna. 709 00:39:24,730 --> 00:39:26,950 Men sedan märker detta frågetecken. 710 00:39:26,950 --> 00:39:30,230 Detta är en konvention på webben där för att ge indata 711 00:39:30,230 --> 00:39:35,320 till en webbplats, lägg dig URL ett frågetecken, 712 00:39:35,320 --> 00:39:38,330 och då har du en massa nyckelvärdepar. 713 00:39:38,330 --> 00:39:42,380 Namnet på en nyckel, annars känd som en parameter i webben, 714 00:39:42,380 --> 00:39:46,380 så har du ett likhetstecken, så har du värdet på den parametern. 715 00:39:46,380 --> 00:39:49,810 Så det är i huvudsak ett variabelnamn och ett variabelt värde, 716 00:39:49,810 --> 00:39:54,250 men de rörliga s namn och värden kom från HTML-formulär. 717 00:39:54,250 --> 00:39:56,250 Varför är plussidan finns, tror du? 718 00:39:56,250 --> 00:39:59,340 Eftersom jag inte skriver + i mellan mina ord. 719 00:39:59,340 --> 00:40:01,430 [Student, obegripligt] 720 00:40:01,430 --> 00:40:05,080 >> Ja, det är bara för avstånd. Oddsen är, när du har sett en URL, 721 00:40:05,080 --> 00:40:07,320 det finns aldrig några blanksteg i det, om så bara för 722 00:40:07,320 --> 00:40:09,440 om det fanns, du kunde inte riktigt kopiera och klistra 723 00:40:09,440 --> 00:40:12,700 till ett snabbmeddelande eller i ett e-postmeddelande eftersom det skulle gå sönder. 724 00:40:12,700 --> 00:40:15,420 Du vill att hela sak att vara en sammanhängande sträng av tecken. 725 00:40:15,450 --> 00:40:18,450 >> Så webbläsaren är smart nog att inse, uh-uh. 726 00:40:18,450 --> 00:40:22,610 Inte bara sätta ett mellanslag där. Låt mig koda utrymmet på något standardiserat sätt. 727 00:40:22,610 --> 00:40:25,170 En av konventioner för detta är att ha webbläsaren 728 00:40:25,170 --> 00:40:29,350 automatiskt sätta ett + där man annars skulle ha ett mellanslag. 729 00:40:29,350 --> 00:40:32,140 Så nu har varsel Google varit ganska användarvänligt. 730 00:40:32,140 --> 00:40:34,380 Jag verkligen inte skapa denna webbsida, 731 00:40:34,380 --> 00:40:37,200 men de har prepopulated egen textfält 732 00:40:37,200 --> 00:40:39,490 med vad, exakt, jag skrev in 733 00:40:39,490 --> 00:40:43,090 Anta att jag vill söka efter något annat, som en lat hund. 734 00:40:43,090 --> 00:40:45,340 Jag kan bara skriva det här, forskning. 735 00:40:45,340 --> 00:40:47,730 Observera att webbadressen växlar upp här, 736 00:40:47,730 --> 00:40:51,390 men märker då att jag faktiskt kan söka efter vad jag vill 737 00:40:51,390 --> 00:40:53,610 bara genom att förstå hur webbadresser arbete. 738 00:40:53,610 --> 00:40:56,840 Jag kunde göra lat katt, ange, 739 00:40:56,840 --> 00:41:01,370 och märker nu jag får en mycket lata - ska vi? Jag tycker vi borde. 740 00:41:01,370 --> 00:41:09,900 Jag får en väldigt lat katt. 741 00:41:09,900 --> 00:41:11,930 Okej. Detta är en av de dummaste sakerna vi gjort. 742 00:41:11,930 --> 00:41:17,160 Men det är en lat katt. 743 00:41:17,160 --> 00:41:19,730 Hur som helst, vad är nyckeln takeaway här? 744 00:41:19,730 --> 00:41:22,830 Nu är vi typ av att spela i en värld av HTTP. 745 00:41:22,830 --> 00:41:26,050 HTML är just detta märkspråk, öppna tagg, nära tag, 746 00:41:26,050 --> 00:41:29,490 som berättar en webbläsare hur att göra innehåll på en webbsida. 747 00:41:29,490 --> 00:41:32,850 Men när du börjar sända data över Internet 748 00:41:32,850 --> 00:41:36,290 mellan webbläsare och servern, det är där detta protokoll 749 00:41:36,290 --> 00:41:39,370 kallas HyperText Transfer Protocol tar över. 750 00:41:39,370 --> 00:41:42,630 Detta är den typ av människor konvention, när Sam och jag skakade hand på måndag, 751 00:41:42,630 --> 00:41:48,300 starta en anslutning och sedan stänga en anslutning samma idé här. 752 00:41:48,300 --> 00:41:53,100 Hur Googles resultat kommer tillbaka till mig? 753 00:41:53,100 --> 00:41:55,290 Hur är min formulär går till Google? 754 00:41:55,290 --> 00:41:58,160 Tja, hämta från häromdagen att vad som verkligen händer 755 00:41:58,160 --> 00:42:02,150 under huven när du begär en webbsida är, 756 00:42:02,150 --> 00:42:04,860 webbläsaren skickar en något-kryptiskt meddelande som 757 00:42:04,860 --> 00:42:09,510 GET / HTTP/1.1 för standardstartsidan. 758 00:42:09,510 --> 00:42:13,000 >> Eller, i det här fallet, eftersom jag begärde uttryckligen tidigare 759 00:42:13,000 --> 00:42:17,340 search0.html, detta sedan skulle vara något, kryptiskt meddelande 760 00:42:17,340 --> 00:42:20,040 att min webbläsare skickar till apparaten. 761 00:42:20,040 --> 00:42:23,090 Eller, i detta fall av Google, är vad som faktiskt skickas 762 00:42:23,090 --> 00:42:33,740 är en begäran till / sökning och sedan? q = lat katt, med ett plus där. 763 00:42:33,740 --> 00:42:36,790 Så detta budskap, att jag, människan, aldrig mig att skriva, 764 00:42:36,790 --> 00:42:40,620 men sänds av min webbläsare, detta är hur HTTP händer. 765 00:42:40,620 --> 00:42:43,240 Detta motsvarar att vi har skakat hand. 766 00:42:43,240 --> 00:42:46,320 Detta är begäran och servern är på väg att skicka ett svar. 767 00:42:46,320 --> 00:42:48,560 Så låt oss ta en titt på denna under huven. 768 00:42:48,560 --> 00:42:55,320 Liksom tidigare kan vi öppna upp denna speciella fält i en webbläsare. 769 00:42:55,320 --> 00:42:58,720 Visa sidan inspektera element. 770 00:42:58,720 --> 00:43:01,550 Så under inspektera element märker att det som hänt i Chrome, 771 00:43:01,550 --> 00:43:04,160 och IE och Firefox har liknande mekanismer, 772 00:43:04,160 --> 00:43:07,370 Vi har dessa utvecklingsverktyg tillgängliga för oss. 773 00:43:07,370 --> 00:43:09,630 Normala människor inte använder de här flikarna. 774 00:43:09,630 --> 00:43:11,940 Men vi, nu är intresserad av vad som händer 775 00:43:11,940 --> 00:43:13,890 under huven på nätnivå. 776 00:43:13,890 --> 00:43:16,130 Så om jag drar upp nätverksnivå här, 777 00:43:16,130 --> 00:43:18,510 Låt mig gå vidare och expandera detta fönster, 778 00:43:18,510 --> 00:43:21,840 öppna den här posten här och titta på rubrikerna. 779 00:43:21,840 --> 00:43:26,010 Så vad händer när jag begär en fil från en webbserver 780 00:43:26,010 --> 00:43:29,410 är min webbläsare skickar en massa saker. 781 00:43:29,410 --> 00:43:32,390 Och låt mig visa källa. Så under begäran rubriker, 782 00:43:32,390 --> 00:43:35,250 Och detta är bara Chrome visar mig några diagnostiska utgång, 783 00:43:35,250 --> 00:43:37,340 ungefär som en debugger av något slag, 784 00:43:37,340 --> 00:43:40,500 märker att det jag har markerat här är precis vad 785 00:43:40,500 --> 00:43:47,060 Chrome skickar till servern för att begära en fil som heter search0.html. 786 00:43:47,060 --> 00:43:50,160 Det är talande servern vad den tror att dess namn är, 787 00:43:50,160 --> 00:43:52,210 tack vare denna värd kolon fältet, så finns det en del 788 00:43:52,210 --> 00:43:56,950 ganska esoterisk grejer här, som något att göra med datum och tider, 789 00:43:56,950 --> 00:43:59,720 något att göra med de språk som webbläsaren förstår, 790 00:43:59,720 --> 00:44:02,850 men de verkligt viktiga linjerna dessa första två här. 791 00:44:02,850 --> 00:44:05,490 >> Vad svarar servern med? Tja, om vi rulla ner här 792 00:44:05,490 --> 00:44:08,510 och visa källan till denna sak, märker att servern 793 00:44:08,510 --> 00:44:13,700 har svarat med en något kryptiskt meddelande också, 304 modifierat inte. 794 00:44:13,700 --> 00:44:16,030 Det är lite konstigt, låt mig faktiskt försöka fixa det här. 795 00:44:16,030 --> 00:44:18,670 Låt mig hålla ned SKIFT och klicka ladda upp här 796 00:44:18,670 --> 00:44:22,460 att tvinga webbläsaren att faktiskt göra denna begäran för första gången. 797 00:44:22,460 --> 00:44:25,700 Låt mig zooma in, och vi ser nu att serverns svar, 798 00:44:25,700 --> 00:44:28,950 eftersom jag höll skift, är 200 OK. 799 00:44:28,950 --> 00:44:31,170 Så du har förmodligen aldrig sett numret 200 800 00:44:31,170 --> 00:44:33,300 I samband med webben, men vad siffrorna 801 00:44:33,300 --> 00:44:36,760 har du sett ibland oväntat från en server? 802 00:44:36,760 --> 00:44:42,010 404, fil hittades inte, 403, förbjudet, 500, serverfel. 803 00:44:42,010 --> 00:44:44,890 Så det är dessa numeriska koder som världen använder på webben 804 00:44:44,890 --> 00:44:47,870 att beteckna fel, precis som C-funktioner 805 00:44:47,870 --> 00:44:51,030 kan returnera fel och viktigaste kan återvända exit-koder. 806 00:44:51,030 --> 00:44:54,160 200, men ser du sällan eftersom det innebär allt är bra. 807 00:44:54,160 --> 00:44:59,000 Och 304 du förmodligen aldrig se eftersom det är det betecknar? 808 00:44:59,000 --> 00:45:03,330 Att inget har - låt oss se om vi kan simulera det igen - 809 00:45:03,330 --> 00:45:07,170 Åh, nu är det inte samarbetar. 304 sa inte ändras, 810 00:45:07,170 --> 00:45:09,170 så varför var servern svarar med? 811 00:45:09,170 --> 00:45:12,550 Jo, för effektivitet, en webbserver automatiskt för dig, 812 00:45:12,550 --> 00:45:16,570 Om filen inte har ändrats, kommer den återutsända inte hela HTML-filen. 813 00:45:16,570 --> 00:45:19,150 Det kommer bara berätta webbläsaren har inte förändrats. 814 00:45:19,150 --> 00:45:21,220 Använd bara den kopia du redan har. 815 00:45:21,220 --> 00:45:22,650 Så det finns denna föreställning om cache på webben 816 00:45:22,650 --> 00:45:25,840 för prestanda, så att du inte slösa tid och avfall bandbredd 817 00:45:25,840 --> 00:45:29,160 nedladdning av filer och om igen i onödan. 818 00:45:29,160 --> 00:45:31,460 >> Men denna webbsida, nu var super-enkel, 819 00:45:31,460 --> 00:45:34,980 och det visade bara mig HTML som kom tillbaka. 820 00:45:34,980 --> 00:45:40,940 Låt oss faktiskt använder nätet fliken nu att göra en Google-sökning som snabba bruna räven. 821 00:45:40,940 --> 00:45:43,010 Låt mig klicka CS50 sök, 822 00:45:43,010 --> 00:45:46,950 och nu märker i botten här en hel massa saker kom tillbaka 823 00:45:46,950 --> 00:45:49,900 för när jag besöker en riktig webbplats som Google.com, 824 00:45:49,900 --> 00:45:53,520 De har bilder, de har text, de har ett språk som kallas Javascript där. 825 00:45:53,520 --> 00:45:55,940 Så varje rad i denna tabell här nere 826 00:45:55,940 --> 00:46:01,490 representerar något som Google spotta ut som svar på min enda begäran. 827 00:46:01,490 --> 00:46:04,160 Det enda jag bryr mig om, är dock denna första. 828 00:46:04,160 --> 00:46:08,420 Och om jag går till sökandet, begäran klickar du på Visa källa här, 829 00:46:08,420 --> 00:46:11,300 märka det, sannerligen, kryptiskt meddelande om att min webbläsare skickade 830 00:46:11,300 --> 00:46:15,010 till Google var dessa två rader här, 831 00:46:15,010 --> 00:46:18,420 följt av några svårbegripliga uppgifter här nere som vi kommer att ignorera för nu. 832 00:46:18,420 --> 00:46:20,890 Men varsel, även vad Chrome är ganska praktiskt med, 833 00:46:20,890 --> 00:46:24,540 det är också visar mig frågesträngen som skickades in 834 00:46:24,540 --> 00:46:27,410 Så snarare än att visa mig detta, som bokstavligen sändes, 835 00:46:27,410 --> 00:46:30,800 om jag visa det avkodas, Chrome, bara för felsökning, 836 00:46:30,800 --> 00:46:34,270 för utvecklare som oss, det visar bara mig en mänsklig version av - 837 00:46:34,270 --> 00:46:36,390 det är inte hur du stavar räv, tydligen. 838 00:46:36,390 --> 00:46:40,520 Jag bara märker detta nu - men det visar dig vad jag, tydligen, skrivit. 839 00:46:40,520 --> 00:46:45,340 Samtidigt är det svar som kom tillbaka från servern igen 200 OK. 840 00:46:45,340 --> 00:46:47,930 Men ingår i detta svar, naturligtvis, 841 00:46:47,930 --> 00:46:51,920 Om vi ​​ser verkligen sidans HTML - 842 00:46:51,920 --> 00:46:55,440 ledsen, är detta en liten tangentbordsgenväg gått snett idag. 843 00:46:55,440 --> 00:46:59,020 >> Jag tar hand om det här senare. Så om vi ser verkligen sidans källkod, 844 00:46:59,020 --> 00:47:02,990 som jag kan göra här nere genom att klicka på svar, 845 00:47:02,990 --> 00:47:10,080 Detta är vad som faktiskt var spotta tillbaka, förutom att kryptiska 200 OK meddelande från servern. 846 00:47:10,080 --> 00:47:12,520 Lite kryptisk, men var allt detta kommer från? 847 00:47:12,520 --> 00:47:15,570 Nåväl, låt oss göra en sak här. Annan något-kryptisk kommando, 848 00:47:15,570 --> 00:47:20,530 men den här är ganska snyggt eftersom det avslöjar för oss exakt vad som händer under huven. 849 00:47:20,530 --> 00:47:22,530 Så jag är tillbaka på min Mac här har jag kopplad 850 00:47:22,530 --> 00:47:25,980 via ett program som heter SSH, Secure Shell, till en annan server 851 00:47:25,980 --> 00:47:28,940 eftersom de flesta av Harvard datorer blockerar kommandot vi ska köra 852 00:47:28,940 --> 00:47:31,640 eftersom det är detta kommando på vissa servrar som kallas traceroute 853 00:47:31,640 --> 00:47:34,810 som tillåter dig att spåra vägen mellan punkterna A och B, 854 00:47:34,810 --> 00:47:37,020 och hittills har vi tagit helt för givet 855 00:47:37,020 --> 00:47:40,170 att jag kan skriva i Google.com och på något sätt få tillbaka data 856 00:47:40,170 --> 00:47:43,530 från halvvägs över landet eller halvvägs över världen. 857 00:47:43,530 --> 00:47:45,810 Med traceroute kan vi faktiskt dyka i lite djupare 858 00:47:45,810 --> 00:47:49,370 om hur Internet fungerar, och se vad som händer under huven. 859 00:47:49,370 --> 00:47:54,440 Så låt oss gå vidare och godtyckligt spåra en väg till, säg, Stanford.edu, 860 00:47:54,440 --> 00:47:57,150 som är över hela landet, och tryck enter. 861 00:47:57,150 --> 00:47:59,380 Detta kommando kan vara super-snabb eller super-långsam, 862 00:47:59,380 --> 00:48:02,010 men vad vi ser nu, rad för rad, 863 00:48:02,010 --> 00:48:08,060 är var och en av de steg eller hopp mellan oss och Palo Alto, eller Stanford, 864 00:48:08,060 --> 00:48:11,010 där de har sitt webbserver. 865 00:48:11,010 --> 00:48:16,600 Så vad var och en av dessa linjer representerar mer konkret, men? 866 00:48:16,600 --> 00:48:19,100 En bit av jargong från Internet? [Student, obegripligt] 867 00:48:19,100 --> 00:48:21,570 >> Vad är det? [Student, obegripligt] 868 00:48:21,570 --> 00:48:25,390 >> Åh, så det finns tider, men vad betyder varje rad - vad jag menar med hopp? 869 00:48:25,390 --> 00:48:29,140 >> Nåväl, det är dessa saker på Internet som kallas routrar. 870 00:48:29,140 --> 00:48:33,020 Och routrar, som namnet antyder, väg information från punkt A till punkt B. 871 00:48:33,020 --> 00:48:36,920 Men det finns flera punkter bortom a och b. 872 00:48:36,920 --> 00:48:40,010 Det finns c och d och e och f mellan rad 1, 873 00:48:40,010 --> 00:48:43,480 som råkar vara min dators IP-adress, 874 00:48:43,480 --> 00:48:46,890 eller min numerisk adress som unikt identifierar datorn, 875 00:48:46,890 --> 00:48:50,300 och steg 15, som faktiskt är den sjätte webbserver, 876 00:48:50,300 --> 00:48:54,640 tydligen, som jag dra slutsatsen av detta, eller version 6 av sin webbserver på Stanford. 877 00:48:54,640 --> 00:48:56,680 Men vad är ganska snyggt är, kan vi se sökvägen 878 00:48:56,680 --> 00:49:00,480 att min 0 s och 1 s tar från min dator till Stanford. 879 00:49:00,480 --> 00:49:02,500 Så steg 1 är min egen dator adress. 880 00:49:02,500 --> 00:49:05,760 Varje dator på Internet har en unik identifierare som ser ut så här. 881 00:49:05,760 --> 00:49:08,150 Number.number.number.number. 882 00:49:08,150 --> 00:49:10,370 Någonstans på detta campus, troligen i science center, 883 00:49:10,370 --> 00:49:16,780 är en router kallas Kärna Gateway 2-te83, vad det nu betyder, 884 00:49:16,780 --> 00:49:20,590 så detta är en av Harvards stora fina routrar som dirigerar mycket av sin trafik. 885 00:49:20,590 --> 00:49:24,640 Här är en annan av Harvards routrar är detta en Border Gateway, 886 00:49:24,640 --> 00:49:28,310 gränsen mening är det förmodligen i utkanten av campus någonstans. 887 00:49:28,480 --> 00:49:32,790 Sedan finns NOx ett, rad 4, som är Norra Crossroads, 888 00:49:32,790 --> 00:49:35,070 som är en stor leverantör, Internet Service Provider, 889 00:49:35,070 --> 00:49:37,740 att platser som Harvard ansluta upp till. 890 00:49:37,740 --> 00:49:40,760 Men sedan saker och ting blir lite intressant i linje 6. 891 00:49:40,760 --> 00:49:45,960 Var är mina bitar plötsligt? Kansas. 892 00:49:45,960 --> 00:49:49,300 Världen har en vana att använda flygplatsen koder i många av dessa saker, 893 00:49:49,300 --> 00:49:52,900 eller åtminstone förkortningar för stater eller städer, 894 00:49:52,900 --> 00:49:56,490 så det ser ut, på bara 60 ms, 895 00:49:56,490 --> 00:49:59,420 ett paket av information, är 0 s och 1 från min laptop 896 00:49:59,420 --> 00:50:03,210 fick hela vägen till Kansas, och igen, i 60 ms. 897 00:50:03,210 --> 00:50:08,180 >> Dessutom, efter Kansas, tog de en tur genom Houston, förmodligen, 898 00:50:08,180 --> 00:50:10,140 som föreslagits av namnet på denna server. 899 00:50:10,140 --> 00:50:13,310 Så precis som en server på Internet måste ha en numerisk adress, 900 00:50:13,310 --> 00:50:18,360 den kan också eventuellt ha en något mer mänsklig-vänlig adress att människor kom med. 901 00:50:18,360 --> 00:50:20,510 Nu i steg 8, vet vi inte vad det är. 902 00:50:20,510 --> 00:50:22,550 Ibland routrar bara typ av ignorera dig, 903 00:50:22,550 --> 00:50:25,010 och de bara inte svara på frågorna, så det är bra. 904 00:50:25,010 --> 00:50:29,290 Det en efter steg 8 är tydligen där? L.A. 905 00:50:29,290 --> 00:50:35,290 Kallelse endast 78 ms, vad tar oss människor som 6 + timmar att göra fysiskt, 906 00:50:35,290 --> 00:50:40,110 tar paket med information på Internet 78 ms att resa så långt. 907 00:50:40,110 --> 00:50:45,890 Steg 10 är i LA också, och steg 11 verkar ha gått norrut, upp nära Stanford. 908 00:50:45,890 --> 00:50:48,750 Detta är deras gräns router eller gränsrouter. 909 00:50:48,750 --> 00:50:51,240 Ett par steg vid Stanford som ignorerar oss, 910 00:50:51,240 --> 00:50:55,610 och slutligen når vi webbservern på bara 87 ms. 911 00:50:55,610 --> 00:50:57,760 Nu är alla dessa siffror, som en sidoreplik, 912 00:50:57,760 --> 00:51:00,640 bara berätta för dig hur lång tid det tar för data att komma från mig 913 00:51:00,640 --> 00:51:03,530 till var och en av dessa routrar, och det är inte ackumulerbara. 914 00:51:03,530 --> 00:51:06,960 Vad detta program gör är skickar den först ett meddelande, i huvudsak, den första routern. 915 00:51:06,960 --> 00:51:09,490 Sedan en till den andra routern och sedan en till den tredje routern, 916 00:51:09,490 --> 00:51:12,610 mätning varje gång. Så i teorin, kommer dessa tider att växa 917 00:51:12,610 --> 00:51:14,860 eller åtminstone ganska nära varandra, 918 00:51:14,860 --> 00:51:18,090 och faktiskt de som är här på campus är super-small. 919 00:51:18,090 --> 00:51:20,820 Så snart du börjar gå över hela landet, det tar uppgifter 920 00:51:20,820 --> 00:51:24,830 lite längre tid att resa, närmare 100 ms, ge eller ta. 921 00:51:24,830 --> 00:51:28,330 Men låt oss gå åt andra hållet nu. Vad sägs om Cambridge University i Storbritannien? 922 00:51:28,330 --> 00:51:32,540 Låt mig istället köra traceroute för www.cam för Cambridge, 923 00:51:32,540 --> 00:51:36,710 . Ac för akademiska,. Storbritannien, och tryck enter här. 924 00:51:36,710 --> 00:51:38,830 Det var jäkligt snabb. 925 00:51:38,830 --> 00:51:43,300 Mina uppgifter gick bokstavligen till Cambridge, England, i den bråkdels sekund av tiden. 926 00:51:43,300 --> 00:51:45,340 >> Så låt oss se den väg som det tog. 927 00:51:45,340 --> 00:51:47,520 Harvard, Harvard, Harvard, Norra Crossroads, 928 00:51:47,520 --> 00:51:52,690 som är en ISP och då är norra Crossroads, och sedan pang. 929 00:51:52,690 --> 00:51:58,320 Vad finns i mellan stegen 6 och 7, router 6 och 7? 930 00:51:58,320 --> 00:52:02,040 Atlanten. Och vi dra slutsatsen detta från det faktum att 931 00:52:02,040 --> 00:52:06,530 Vi går från 20 ms här 80 ms här. 932 00:52:06,530 --> 00:52:10,050 Så något tog 60 ms, ge eller ta, för att komma över. 933 00:52:10,050 --> 00:52:12,910 Och det var nog en stor mängd vatten. 934 00:52:12,910 --> 00:52:15,250 Vad händer efter det? Tja, här är vi i London, 935 00:52:15,250 --> 00:52:18,860 bara 88 ms senare. More London, mer London, 936 00:52:18,860 --> 00:52:21,730 inte säker på var det är, men vi antar att det är utanför London, 937 00:52:21,730 --> 00:52:26,390 Cambridge här, och slutligen vi - bokstavligen, University of Cambridge 938 00:52:26,390 --> 00:52:29,500 . Something.net, och sedan slutligen i linje 16, 939 00:52:29,500 --> 00:52:31,720 deras webbserver är tydligen kallas Scorpius 940 00:52:31,720 --> 00:52:35,500 under huven, även om vi vet att det som www. 941 00:52:35,500 --> 00:52:38,790 Typ av otrolig, tror jag. Första gången jag någonsin gjorde detta, blåste det helt mig. 942 00:52:38,790 --> 00:52:41,670 Olyckligtvis, blockerar Harvard denna typ av trafik, typiskt, på nätverket. 943 00:52:41,670 --> 00:52:44,340 Så du kan inte göra det super enkelt. 944 00:52:44,340 --> 00:52:48,500 Inse, men är detta här möjligt. 945 00:52:48,500 --> 00:52:53,630 Okej. Låt oss ta vår 5-minuters paus här. Vi ska komma tillbaka och dyka i djupare. 946 00:52:53,630 --> 00:53:00,850 Så vi är tillbaka, och vi har typ av ambled om i några olika riktningar här. 947 00:53:00,850 --> 00:53:03,700 Så låt oss sammanfatta exakt vad som har hänt här. 948 00:53:03,700 --> 00:53:07,990 Vi började samtalet prata om detta språk kallas HTML. 949 00:53:07,990 --> 00:53:10,680 Igen, inte ett programmeringsspråk. Det är bara en märkningsspråk 950 00:53:10,680 --> 00:53:15,490 som till stor del om estetik och strukturering av innehåll i form av en webbsida. 951 00:53:15,490 --> 00:53:19,220 Men HTML behöver därför någon form av mekanism 952 00:53:19,220 --> 00:53:22,870 för resor mellan webbläsare och server. 953 00:53:22,870 --> 00:53:28,360 HTML-typ därför rider på toppen av detta andra språk, 954 00:53:28,360 --> 00:53:31,280 eller mer korrekt, ett protokoll, som kallas HTTP. 955 00:53:31,280 --> 00:53:33,730 >> Och HTTP, som vi har sett det hittills, 956 00:53:33,730 --> 00:53:37,140 är typ av analog med denna mänskliga konvention att skaka hand. 957 00:53:37,140 --> 00:53:39,940 När en webbläsare vill begära en sida från en server, 958 00:53:39,940 --> 00:53:43,450 sänder att "få" begäran från webbläsaren till servern, 959 00:53:43,450 --> 00:53:48,040 och sedan servern svarar med ett antal som 200, är ​​allt okej, 960 00:53:48,040 --> 00:53:53,290 liksom HTML eller några dåliga nummer som 404, fil hittades inte. 961 00:53:53,290 --> 00:53:58,220 Men under tiden, är HTTP själv inte Internet i sig. 962 00:53:58,220 --> 00:54:01,550 HTTP är bara en tjänst, en funktion av Internet 963 00:54:01,550 --> 00:54:05,530 likt G chatt är en annan tjänst, ungefär som e-post är en annan tjänst. 964 00:54:05,530 --> 00:54:09,180 Det finns alla möjliga saker som vi kan göra på Internet. 965 00:54:09,180 --> 00:54:12,670 HTTP är bara en av dessa ansökningar. 966 00:54:12,670 --> 00:54:17,210 Så på toppen av - HTTP är på toppen av något annat 967 00:54:17,210 --> 00:54:21,750 som vi inte nämnde vid namn, kanske du har hört talas om vid namn, TCP / IP. 968 00:54:21,750 --> 00:54:25,160 Så historien vi bara veta att det handlar om 969 00:54:25,160 --> 00:54:28,720 hur data färdas från punkt A till punkt B. 970 00:54:28,720 --> 00:54:30,950 Och i detta fall, såg vi på en mycket låg nivå 971 00:54:30,950 --> 00:54:33,060 router till router till router till router, 972 00:54:33,060 --> 00:54:35,390 hur data faktiskt överförs. 973 00:54:35,390 --> 00:54:40,510 Men längs vägen, kommer det att stöta på olika hinder. 974 00:54:40,510 --> 00:54:43,770 Förutom dessa routrar, det finns saker som kallas brandväggar på Internet, 975 00:54:43,770 --> 00:54:46,680 och så data som att vi var bara överföra 976 00:54:46,680 --> 00:54:49,720 från mig till Stanford, från mig till Cambridge, 977 00:54:49,720 --> 00:54:54,560 skickas till, på denna nivå, kallas något en IP-adress. 978 00:54:54,560 --> 00:54:57,340 Vi såg detta för en stund sedan, och en IP-adress 979 00:54:57,340 --> 00:55:02,480 är bara en numerisk adress av formen w.x.y.z, 980 00:55:02,480 --> 00:55:08,070 där var och en av dessa är mellan, ge eller ta, 0 och 255, 981 00:55:08,070 --> 00:55:10,080 om du inte kan riktigt använda alla dessa siffror. 982 00:55:10,080 --> 00:55:14,220 Men var och en av dessa platshållare är ett tal mellan 0 och 255. 983 00:55:14,220 --> 00:55:16,820 Så en IP-adress i dessa dagar är 32 bitar. 984 00:55:16,820 --> 00:55:20,780 >> Nu, som ger oss hur många möjliga IP-adresser i världen? 985 00:55:20,780 --> 00:55:24,420 Ungefär 4 miljarder, eftersom varje gång vi räknar i befogenheter 2 986 00:55:24,420 --> 00:55:27,760 hela vägen upp till 32 av något, som ger oss vanligtvis 4 miljarder. 987 00:55:27,760 --> 00:55:30,160 Så det är en hel del IP-adresser, men du kanske har läst, 988 00:55:30,160 --> 00:55:32,410 eller du kanske nu märker i den populära pressen, 989 00:55:32,410 --> 00:55:36,020 en push mot en ny version av IP som kallas IPv6. 990 00:55:36,020 --> 00:55:38,290 Just nu vi använder version 4. 991 00:55:38,290 --> 00:55:41,060 Det finns verkligen inte varit en version 5, vi hoppar bara rätt till 6. 992 00:55:41,060 --> 00:55:46,760 Version 6 kommer att använda 128 bitar för IP-adresser, vilket freaking enorm. 993 00:55:46,760 --> 00:55:49,430 Vi bör inte ta slut ganska länge nu, 994 00:55:49,430 --> 00:55:52,980 men vi har börjat slut på version 4 IP-adresser, 995 00:55:52,980 --> 00:55:56,110 eftersom vi alla har inte bara saker som bärbara och stationära datorer, 996 00:55:56,110 --> 00:55:58,700 många av oss har telefoner, många av oss har andra enheter 997 00:55:58,700 --> 00:56:01,600 Liksom TiVo och liknande som har IP-adresser själva. 998 00:56:01,600 --> 00:56:03,720 Harvard själv har tiotusentals datorer. 999 00:56:03,720 --> 00:56:07,970 Så världen verkligen slut på IP-adresser, åtminstone i detta formulär. 1000 00:56:07,970 --> 00:56:10,340 Så under de närmaste åren, kommer ni att se adresserna 1001 00:56:10,340 --> 00:56:12,870 på dina egna datorer förmodligen långsamt förändras 1002 00:56:12,870 --> 00:56:16,740 eftersom fler och fler företag och universitet börjar stödja den nyare versionen. 1003 00:56:16,740 --> 00:56:22,770 Men en IP-adress är inte tillräckligt för datorn en att begära data från dator B. 1004 00:56:22,770 --> 00:56:24,950 Eftersom dator B kan vara en server, 1005 00:56:24,950 --> 00:56:27,600 och en server, som jag nämnde tidigare, kan göra klasar av saker. 1006 00:56:27,600 --> 00:56:29,940 Den kan vara värd webbsidor, kan det vara en e-postserver, 1007 00:56:29,940 --> 00:56:32,310 det kan vara en Skypeservern, kan det vara en G chattserver. 1008 00:56:32,310 --> 00:56:35,870 >> Alla dessa olika tjänster som kan tillhandahållas på en server 1009 00:56:35,870 --> 00:56:38,330 kunde alla, fysiskt vara på samma maskin. 1010 00:56:38,330 --> 00:56:40,380 Så förutom IP-adresser, 1011 00:56:40,380 --> 00:56:43,250 världen har saker som kallas portar på Internet. 1012 00:56:43,250 --> 00:56:47,830 En port är bara ett nummer, så det är ett unikt nummer för HTTP. 1013 00:56:47,830 --> 00:56:50,280 Dess nummer är 80. 1014 00:56:50,280 --> 00:56:55,870 HTTP använder också nummer 443, men mer specifikt för krypterade HTTPS. 1015 00:56:55,870 --> 00:57:00,030 När du ser s, för säker, är att använda ett annat nummer. 1016 00:57:00,030 --> 00:57:06,580 Det finns andra siffror, som 25, som används för något som kallas SMTP, annars känd som e-post. 1017 00:57:06,580 --> 00:57:09,620 Det finns något som kallas 22 för SSH, 1018 00:57:09,620 --> 00:57:11,850 och det finns en hel massa andra hamnar där ute. 1019 00:57:11,850 --> 00:57:14,460 Nu vi människor ser sällan dessa nummer. 1020 00:57:14,460 --> 00:57:21,970 Men när du skriver in en adress som http://www.facebook.com, 1021 00:57:21,970 --> 00:57:26,560 webbläsaren hemlighet sätter 80, eftersom du använder HTTP. 1022 00:57:26,560 --> 00:57:30,630 Om du istället typ HTTPS, det sätter hemlighet 443. 1023 00:57:30,630 --> 00:57:35,180 Och vi kan typ av se detta manuellt om jag dra upp en Brower 1024 00:57:35,180 --> 00:57:41,850 och gå till http://www.facebook.com:80. 1025 00:57:41,850 --> 00:57:44,550 Därför uttryckligen citerar inte bara namnet på webbplatsen 1026 00:57:44,550 --> 00:57:47,650 men porten som jag vill tala med och tryck enter. 1027 00:57:47,650 --> 00:57:50,170 Märker det försvinner, eftersom webbläsaren förutsätter 1028 00:57:50,170 --> 00:57:53,360 Åh, 80, jag är inte ens kommer att bry visar att till dig. 1029 00:57:53,360 --> 00:57:56,400 Men anledningen till detta är att om jag verkligen ville skicka någon e-post, 1030 00:57:56,400 --> 00:58:02,340 Jag skulle verkligen vara att skicka det till dem på port 25, att vara SMTP. 1031 00:58:02,340 --> 00:58:04,890 En bit av en grov förenkling, men några av er har vänner 1032 00:58:04,890 --> 00:58:09,290 som faktiskt arbetar på Facebook, och de likaså har servrar som tar emot e-post. 1033 00:58:09,290 --> 00:58:12,610 >> Varje gång du skickar ett e-postmeddelande, vad gmail gör för dig 1034 00:58:12,610 --> 00:58:14,960 eller Outlook eller vad programmet du använder, 1035 00:58:14,960 --> 00:58:19,270 Det blir liksom hemlighet sätta den siffran också, 25 i så fall. 1036 00:58:19,270 --> 00:58:24,490 Det är denna kombination av IP-adress och nummer som unikt identifierar 1037 00:58:24,490 --> 00:58:29,190 en dator på Internet och en viss tjänst på datorn. 1038 00:58:29,190 --> 00:58:33,460 Nu, naturligtvis, har de flesta av oss förmodligen aldrig skrivit IP-adressen manuellt. 1039 00:58:33,460 --> 00:58:37,340 Kanske du har i maskinen, men i den verkliga världen, inte så mycket. 1040 00:58:37,340 --> 00:58:42,750 Varför skriver vi inte IP-adresser i webbläsare? 1041 00:58:42,750 --> 00:58:45,860 Det skulle fungera, i själva verket kan vi se detta, låt mig visa dig 1042 00:58:45,860 --> 00:58:50,000 en annan kommando som ska fungera mest var som helst på Harvards campus på en Mac eller PC. 1043 00:58:50,000 --> 00:58:53,970 Det är detta kommando kallas nslookup, namnserver uppslag. 1044 00:58:53,970 --> 00:58:59,960 Om jag tittar upp www.cnn.com, visar det sig att CNN har - Åh, intressant. 1045 00:58:59,960 --> 00:59:03,180 CNN har börjat använda Amazon Web Services. 1046 00:59:03,180 --> 00:59:06,380 Du kanske känner till cloud computing, Amazons ett av de stora aktörerna inom cloud computing. 1047 00:59:06,380 --> 00:59:10,240 Vad jag just gjorde var, jag sa: "Ge mig adressen till CNN: s webbserver" 1048 00:59:10,240 --> 00:59:14,090 men det visar sig att CNN: s webbserver hanteras av Amazon, 1049 00:59:14,090 --> 00:59:16,030 Amazon Web Services, tyder detta. 1050 00:59:16,030 --> 00:59:19,680 Och adressen till den server är det här. 1051 00:59:19,680 --> 00:59:22,350 Så jag är inte säker på om detta kommer att fungera, eftersom de inte använde Amazon. 1052 00:59:22,350 --> 00:59:32,830 Men låt oss försöka detta, http://, IP-adress, ange, och - 1053 00:59:32,830 --> 00:59:35,690 kommer det att fungera? 1054 00:59:35,690 --> 00:59:39,280 Ja. Det kommer att fungera. Internet är super-slow idag. 1055 00:59:39,280 --> 00:59:43,680 Men i ett ögonblick, kommer du att se några nyhet. 1056 00:59:43,680 --> 00:59:48,360 Där kör vi. Bank of America är att bli stämd. Okej. 1057 00:59:48,360 --> 00:59:54,000 >> Detta beror på att denna IP-adress bara råkar genom synonymt med www.cnn.com. 1058 00:59:54,000 --> 00:59:59,920 Naturligtvis skulle det vara hemskt marknadsföring att säga, besök oss på webben på 50.112.94.127. 1059 00:59:59,920 --> 01:00:02,370 Du skulle aldrig komma ihåg. Så även i dessa dagar kanske du minns saker 1060 01:00:02,370 --> 01:00:07,210 Liksom 1-800-COLLECT eller mnemonics världen kom med för telefonnummer. 1061 01:00:07,210 --> 01:00:09,540 Som före mobiltelefoner, var ganska svårt att komma ihåg 1062 01:00:09,540 --> 01:00:11,800 tills du kan bara skriva in den och glömma det. 1063 01:00:11,800 --> 01:00:15,730 Så webben också har denna konvention av namn och IP-adresser, 1064 01:00:15,730 --> 01:00:17,770 och det är dessa saker där ute som heter DNS-servrar, 1065 01:00:17,770 --> 01:00:23,870 domännamn system servrar, som översätter IP-adresser till namn och vice versa. 1066 01:00:23,870 --> 01:00:26,340 Så det är vad som händer under huven. 1067 01:00:26,340 --> 01:00:29,540 I slutändan har vi TCP / IP, som är denna mycket låga nivå protokoll 1068 01:00:29,540 --> 01:00:32,570 det, egentligen, blir bara 0 s och 1 s över Internet, 1069 01:00:32,570 --> 01:00:36,030 och den gör det genom att sätta dem i en virtuell kuvert, 1070 01:00:36,030 --> 01:00:38,820 om du vill, och skriva på utsidan av kuvertet 1071 01:00:38,820 --> 01:00:43,930 IP-adressen för destinationen liksom den numeriska portnummer 1072 01:00:43,930 --> 01:00:47,520 av tjänsten på den destination som man vill prata med. 1073 01:00:47,520 --> 01:00:51,060 Samtidigt på kuvertet finns också något som kallas en returadress, 1074 01:00:51,060 --> 01:00:55,600 som är din IP-adress, så att när CNN får ett informationspaket från dig, 1075 01:00:55,600 --> 01:00:58,710 öppnar denna virtuella kuvert, ser att du vill att hemsidan, 1076 01:00:58,710 --> 01:01:04,630 det vet från avsändaren del av denna virtuella kuvert som att skicka HTML-tillbaka till. 1077 01:01:04,630 --> 01:01:07,470 Så låt oss ta en titt på denna i lite mer detalj. 1078 01:01:07,470 --> 01:01:11,370 Detta är från ett företag som heter Ericson från ett par år tillbaka. 1079 01:01:11,370 --> 01:01:14,780 Och de tog några friheter med hur Internet faktiskt fungerar, 1080 01:01:14,780 --> 01:01:18,920 men det ger en mycket mer visuell bild än bara krita upp här. 1081 01:01:18,920 --> 01:01:26,690 Så jag ger dig "en bit av internet." 1082 01:02:26,660 --> 01:02:29,840 >> [Berättare] För första gången i historien, 1083 01:02:29,840 --> 01:02:35,260 människor och maskiner arbetar tillsammans, förverkliga en dröm. 1084 01:02:35,260 --> 01:02:38,910 En sammanhållande kraft som inte känner några geografiska gränser. 1085 01:02:38,910 --> 01:02:43,230 Utan hänsyn till ras, religion eller färg. 1086 01:02:43,230 --> 01:02:47,770 En ny era där kommunikation verkligen sammanför människor. 1087 01:02:47,770 --> 01:02:50,070 Detta är 1088 01:02:50,070 --> 01:02:54,980 Gryningen av nätet. 1089 01:02:54,980 --> 01:03:04,640 Vill du veta hur det fungerar? Klicka här för att börja din resa till nätet. 1090 01:03:04,640 --> 01:03:07,890 Nu hände exakt vad när du klickade på länken? 1091 01:03:07,890 --> 01:03:10,150 Du startade ett flöde av information. 1092 01:03:10,150 --> 01:03:13,310 Denna information färdas ner till din egen personliga postrummet 1093 01:03:13,310 --> 01:03:18,500 där Mr IP-paket det märker det, och skickar den på väg. 1094 01:03:18,500 --> 01:03:20,960 Varje paket är begränsad i sin storlek. 1095 01:03:20,960 --> 01:03:23,880 Postrummet måste bestämma hur man kan dela informationen 1096 01:03:23,880 --> 01:03:26,070 och hur man paketerar den. 1097 01:03:26,070 --> 01:03:29,550 Nu behöver paketet en etikett som innehåller viktig information 1098 01:03:29,550 --> 01:03:35,570 såsom avsändarens adress, mottagarens adress och vilken typ av paket det är. 1099 01:03:51,700 --> 01:03:54,980 Eftersom denna paket går ut på Internet, 1100 01:03:54,980 --> 01:03:57,720 det blir också en adress för proxyservern, 1101 01:03:57,720 --> 01:04:01,520 som har en speciell funktion, som vi kommer att se senare. 1102 01:04:01,520 --> 01:04:06,650 Paketet är nu lanseras på ditt lokala nätverk eller LAN. 1103 01:04:06,650 --> 01:04:10,160 Detta nätverk används för att ansluta alla de lokala datorer " 1104 01:04:10,160 --> 01:04:15,900 routrar, skrivare, etc, för informationsutbyte inom de fysiska byggnadens väggar. 1105 01:04:15,900 --> 01:04:20,290 LAN är en ganska okontrollerad plats, och tyvärr, 1106 01:04:20,290 --> 01:04:23,950 olyckor kan hända. 1107 01:04:31,190 --> 01:04:34,710 Motorvägen av LAN är fullmatad med alla typer av information. 1108 01:04:34,710 --> 01:04:38,900 Dessa är IP-paket, Novell paket, AppleTalk-paket. 1109 01:04:38,900 --> 01:04:41,270 De går emot trafik som vanligt. 1110 01:04:41,270 --> 01:04:44,260 Den lokala routern läser adressen och, om så är nödvändigt, 1111 01:04:44,260 --> 01:04:48,520 lyfter paketet till ett annat nätverk. 1112 01:04:48,520 --> 01:04:54,270 Ah, routern. En symbol för kontroll i en till synes oorganiserat värld. 1113 01:04:54,270 --> 01:05:05,480 [Router mummel och pratar med sig själv] 1114 01:05:05,480 --> 01:05:10,030 >> [Berättare] Där är han, systematisk, likgiltig, metodisk, 1115 01:05:10,030 --> 01:05:14,150 konservativ och ibland inte riktigt upp farten. 1116 01:05:14,150 --> 01:05:17,680 Men åtminstone han är exakt, för det mesta. 1117 01:05:32,270 --> 01:05:36,820 Eftersom paketen lämnar routern, de gör sig in i företagets Internet 1118 01:05:36,820 --> 01:05:40,830 och chef för routern switch. 1119 01:05:40,830 --> 01:05:46,250 Lite mer effektiv än routern spelar routern omkopplaren snabbt och löst med IP-paket, 1120 01:05:46,250 --> 01:05:48,920 skickligt leda dem längs vägen. 1121 01:05:48,920 --> 01:05:52,130 En digital-flipperspel guiden "om man så vill. 1122 01:05:52,130 --> 01:06:04,270 [Router omkopplare talar för sig själv] 1123 01:06:09,830 --> 01:06:12,150 [Berättare] Som paket når sin destination, 1124 01:06:12,150 --> 01:06:14,740 de är plockas upp av nätverksgränssnittet, 1125 01:06:14,740 --> 01:06:18,040 redo att skickas till nästa nivå. 1126 01:06:18,040 --> 01:06:21,010 I detta fall, proxyn. 1127 01:06:21,010 --> 01:06:25,040 Fullmakten används av många företag som en slags mellanhand 1128 01:06:25,040 --> 01:06:27,630 För att minska belastningen på Internet-anslutningen 1129 01:06:27,630 --> 01:06:32,240 och av säkerhetsskäl, liksom. 1130 01:06:32,240 --> 01:06:38,750 Som ni kan se, paketen är alla olika storlekar beroende på deras innehåll. 1131 01:06:55,210 --> 01:07:01,890 Fullmakten öppnar paketet och ser till en webbadress eller URL. 1132 01:07:01,890 --> 01:07:04,950 Beroende på huruvida adressen är acceptabel, 1133 01:07:04,950 --> 01:07:08,000 paketet sänds på Internet. 1134 01:07:13,890 --> 01:07:19,630 Det finns dock vissa adresser som inte uppfyller efter godkännande av ombudet. 1135 01:07:19,630 --> 01:07:25,680 Det vill säga, företag eller förvaltning riktlinjer. 1136 01:07:25,680 --> 01:07:30,580 Dessa summariskt behandlas. 1137 01:07:30,580 --> 01:07:32,410 Vi får inget av detta. 1138 01:07:32,410 --> 01:07:36,350 För dem som gör det, det är på väg igen. 1139 01:07:46,850 --> 01:07:53,310 >> Nästa upp, brandväggen. 1140 01:07:53,310 --> 01:07:57,410 Företagets brandvägg tjänar två syften. 1141 01:07:57,410 --> 01:08:02,420 Det förhindrar några ganska elaka saker från Internet från att komma in på intranätet, 1142 01:08:02,420 --> 01:08:10,280 och det kan också förhindra att känslig företagsinformation från att sändas ut på Internet. 1143 01:08:10,280 --> 01:08:12,980 När genom brandväggen, plockar en router upp paketet 1144 01:08:12,980 --> 01:08:18,180 och placerar den på en mycket smalare väg, eller bandbredd, som vi säger. 1145 01:08:18,180 --> 01:08:23,720 Självklart är vägen inte bred nog att ta dem alla. 1146 01:08:23,720 --> 01:08:29,319 Nu kanske du undrar vad som händer med alla de paket som inte gör det på vägen. 1147 01:08:29,319 --> 01:08:32,270 Jo, det när Mr IP inte får en bekräftelse 1148 01:08:32,270 --> 01:08:35,000 att ett paket har mottagits i rätt tid, 1149 01:08:35,000 --> 01:08:39,890 han sänder helt enkelt en ersättning paket. 1150 01:08:39,890 --> 01:08:44,760 Vi är nu redo att gå in i världen av internet. 1151 01:08:44,760 --> 01:08:49,370 En spiderweb sammankopplade nät som spänner hela vår glob. 1152 01:08:49,370 --> 01:08:56,050 Här routrar och switchar upprätta förbindelser mellan näten. 1153 01:08:56,050 --> 01:08:59,200 Nu är nätet en helt annan miljö än du hittar 1154 01:08:59,200 --> 01:09:01,569 inom de skyddande väggarna i ditt nätverk. 1155 01:09:01,569 --> 01:09:04,060 Här ute är det Vilda Västern. 1156 01:09:04,060 --> 01:09:06,359 Gott om utrymme, massor av möjligheter, 1157 01:09:06,359 --> 01:09:09,760 massor av saker att utforska och platser att gå. 1158 01:09:09,760 --> 01:09:12,760 Tack vare mycket liten kontroll och reglering, 1159 01:09:12,760 --> 01:09:18,300 nya idéer finner bördig jord för att tänja på gränserna för sina möjligheter. 1160 01:09:18,300 --> 01:09:22,330 Men på grund av denna frihet, vissa faror lurar också. 1161 01:09:22,330 --> 01:09:27,000 Du kommer aldrig veta när du möter den fruktade Ping of Death, 1162 01:09:27,000 --> 01:09:29,890 en speciell version av en vanlig begäran ping, 1163 01:09:29,890 --> 01:09:35,720 som någon idiot trodde upp att röra upp intet ont anande värdar. 1164 01:09:35,720 --> 01:09:39,130 Vägen våra paket tar kan vara via satellit, 1165 01:09:39,130 --> 01:09:43,090 telefonlinjer, trådlösa, eller ens transoceana kabel. 1166 01:09:43,090 --> 01:09:46,520 De tar inte alltid den snabbaste eller kortaste rutterna möjligt, 1167 01:09:46,520 --> 01:09:50,290 men de kommer att få det så småningom. 1168 01:09:50,290 --> 01:09:55,230 Kanske det är därför det kallas ibland "World Wide Wait." 1169 01:09:55,230 --> 01:09:57,980 Men när allt fungerar smidigt, 1170 01:09:57,980 --> 01:10:03,800 Du kan kringgå jorden fem gånger vid släpp av en hatt, bokstavligen. 1171 01:10:03,800 --> 01:10:08,230 Och alla för kostnaden för ett lokalsamtal eller mindre. 1172 01:10:08,230 --> 01:10:15,070 Nära slutet av vår destination, hittar vi en annan brandvägg. 1173 01:10:15,070 --> 01:10:18,420 >> Beroende på ditt perspektiv som ett datapaket, 1174 01:10:18,420 --> 01:10:23,730 brandväggen kan vara en bastion för säkerhet eller en fruktad motståndare. 1175 01:10:23,730 --> 01:10:28,530 Det beror helt på vilken sida du är på och vad dina avsikter är. 1176 01:10:28,530 --> 01:10:34,990 Brandväggen är utformad för att släppa in endast de paket som uppfyller dess kriterier. 1177 01:10:34,990 --> 01:10:39,360 Denna brandvägg fungerar på portarna 80 och 25. 1178 01:10:39,360 --> 01:10:46,630 Alla försök att komma in genom andra portar är stängda för företag. 1179 01:10:57,660 --> 01:11:03,480 Port 25 används för e-paket, 1180 01:11:03,480 --> 01:11:10,720 medan porten 80 är ingången för paket från Internet till webbservern. 1181 01:11:10,720 --> 01:11:15,080 Innanför brandväggen är paket screenas mer ingående. 1182 01:11:15,080 --> 01:11:17,970 Vissa paket gör det lätt genom tullen, 1183 01:11:17,970 --> 01:11:21,420 medan andra ser bara lite tveksam. 1184 01:11:21,420 --> 01:11:24,060 Nu är brandväggen officer inte lätt luras, 1185 01:11:24,060 --> 01:11:32,120 som t.ex. när det Ping of Death paket försöker dölja sig som en normal ping paket. 1186 01:11:32,120 --> 01:11:37,520 [Brandvägg officer talar med paket] 1187 01:11:37,520 --> 01:11:40,510 [Berättare] För dessa paket lyckliga nog att göra det här långt, 1188 01:11:40,510 --> 01:11:45,730 resan är nästan över. 1189 01:11:45,730 --> 01:11:52,130 Det är bara en linje upp på gränssnittet som skall tas upp i webbservern. 1190 01:11:52,130 --> 01:11:55,440 Numera kan en webbserver köras på många saker, 1191 01:11:55,440 --> 01:11:59,230 från en stordator till en webbkamera till datorn på skrivbordet. 1192 01:11:59,230 --> 01:12:01,720 Varför inte ditt kylskåp? 1193 01:12:01,720 --> 01:12:04,870 Med rätt inställningar kan du ta reda på om du har ärendes 1194 01:12:04,870 --> 01:12:08,390 för kyckling Cacciatore, eller om du måste gå och handla. 1195 01:12:08,390 --> 01:12:11,760 Kom ihåg, detta gryningen av nätet. 1196 01:12:11,760 --> 01:12:17,310 Nästan allt är möjligt. 1197 01:12:17,310 --> 01:12:20,440 En efter en, är paketen emot, 1198 01:12:20,440 --> 01:12:26,320 öppnas och packas upp. 1199 01:12:26,320 --> 01:12:31,200 Den information de innehåller, det vill säga din begäran om information, 1200 01:12:31,200 --> 01:12:34,830 skickas vidare till webbservern programmet. 1201 01:12:41,540 --> 01:12:47,140 Paketet i sig är återvunnet, 1202 01:12:47,140 --> 01:12:57,570 redo att användas igen, och fylld med begärd information, 1203 01:12:57,570 --> 01:13:03,340 upp, och skickade ut på väg tillbaka till dig. 1204 01:13:03,340 --> 01:13:13,250 Tillbaka förbi brandväggen, routrar, och vidare genom till Internet. 1205 01:13:13,250 --> 01:13:21,020 Tillbaka genom företagets brandvägg 1206 01:13:21,020 --> 01:13:24,180 och på ditt gränssnitt, 1207 01:13:24,180 --> 01:13:31,180 redo att leverera din webbläsare med den information du har begärt. 1208 01:13:31,180 --> 01:13:39,840 Det vill säga den här filmen. 1209 01:13:39,840 --> 01:13:43,550 Nöjda med sina insatser, och lita bättre värld, 1210 01:13:43,550 --> 01:13:50,250 våra trogna datapaket rida ut lyckligt i solnedgången på en annan dag, 1211 01:13:50,250 --> 01:13:56,880 vet helt de har tjänat sina herrar väl. 1212 01:13:56,880 --> 01:14:02,560 Nu är inte det ett lyckligt slut? 1213 01:14:02,560 --> 01:14:07,040 [Malan] Okej, det räcker. Vi ses nästa vecka. 1214 01:14:07,040 --> 01:14:10,040 [CS50.TV]