1 00:00:00,000 --> 00:00:00,127 2 00:00:00,127 --> 00:00:01,210 DAVID J. MALAN: Greit. 3 00:00:01,210 --> 00:00:02,160 Vi er tilbake. 4 00:00:02,160 --> 00:00:05,810 Så målet med denne siste økten er å innføre noen flere konsepter 5 00:00:05,810 --> 00:00:09,290 men også gi alle en sjanse til slags strekke fingrene 6 00:00:09,290 --> 00:00:11,270 og faktisk gjøre noe litt hands-on. 7 00:00:11,270 --> 00:00:13,897 Målet er ikke å snu oss alle inn webutviklere 8 00:00:13,897 --> 00:00:16,230 på noen måte, men egentlig bare for å gi deg en smak av noen 9 00:00:16,230 --> 00:00:21,750 av de grunnleggende konstruksjoner av hva går inn i web-programmering og i dag web 10 00:00:21,750 --> 00:00:23,980 utvikling, så statisk side av things-- 11 00:00:23,980 --> 00:00:26,660 ingen logikk, ingen programmering språk, bare statisk innhold. 12 00:00:26,660 --> 00:00:29,660 Og det vil gi oss en mulighet å faktisk se hva en web server er, 13 00:00:29,660 --> 00:00:34,140 Se hva som en HTML-fil er, se hva det er HTTP faktisk tjene opp. 14 00:00:34,140 --> 00:00:38,600 Men før vi dykker i, noen retrospektive spørsmål om cloud computing 15 00:00:38,600 --> 00:00:43,922 eller sikkerhet eller noe midt i mellom? 16 00:00:43,922 --> 00:00:44,890 >> Nei? 17 00:00:44,890 --> 00:00:47,181 Greit, vel, la oss gjøre dette, bare i tilfelle 18 00:00:47,181 --> 00:00:49,680 prosessen med å registrere deg for noe tar noen få minutter. 19 00:00:49,680 --> 00:00:51,221 Vi skal la den gjøre det i bakgrunnen. 20 00:00:51,221 --> 00:00:56,860 Kom igjen, hvis du kan, til denne nettadressen her-- c9.io. 21 00:00:56,860 --> 00:01:02,810 Dette er en tredjeparts service-- plattform som en tjeneste, hvis du will-- 22 00:01:02,810 --> 00:01:05,190 som kommer til å invitere deg å registrere deg for en konto, 23 00:01:05,190 --> 00:01:08,650 og det kommer til å gi hver av dere en konto i den såkalte nettskyen 24 00:01:08,650 --> 00:01:11,330 på andres infrastruktur, et firma som heter Cloud9. 25 00:01:11,330 --> 00:01:13,350 Men hva er fint om dette er at de gir deg 26 00:01:13,350 --> 00:01:15,990 en tilnærming av en faktiske reelle utvikling 27 00:01:15,990 --> 00:01:18,530 miljø, om enn i sky og i en nettleser, 28 00:01:18,530 --> 00:01:21,175 og vi vil bruke dette til å faktisk eksperimentere litt i dag. 29 00:01:21,175 --> 00:01:27,116 30 00:01:27,116 --> 00:01:30,260 Og deretter gå videre og bare navigere veien til registreringsprosessen 31 00:01:30,260 --> 00:01:32,630 hvis du kunne. 32 00:01:32,630 --> 00:01:36,080 Så vi måtte bruke dette i klassen Jeg underviser for alle våre studenter, 33 00:01:36,080 --> 00:01:39,140 både på campus og off nå, og det er erstattet hva historisk 34 00:01:39,140 --> 00:01:41,390 var ellers nedlastbar programvare. 35 00:01:41,390 --> 00:01:44,620 Så det du får tilgang til er en av disse virtuelle maskiner 36 00:01:44,620 --> 00:01:46,460 hovedsak, som jeg beskrev tidligere. 37 00:01:46,460 --> 00:01:50,260 Så dette selskapet Cloud9 sannsynligvis leier fra en tredje party-- faktisk 38 00:01:50,260 --> 00:01:52,760 i dette tilfellet, Google-- en hel haug av virtuelle maskiner 39 00:01:52,760 --> 00:01:56,500 at de en eller annen måte hogge opp i illusjonen av individuelle servere 40 00:01:56,500 --> 00:01:58,610 at hver av oss har full kontroll over. 41 00:01:58,610 --> 00:02:01,640 Det er ikke helt riktig å si at de er virtuelle maskiner, 42 00:02:01,640 --> 00:02:04,550 skjønt, fordi det Cloud9 faktisk bruker 43 00:02:04,550 --> 00:02:07,570 er en noe nyere teknologi kalt containerization. 44 00:02:07,570 --> 00:02:13,150 Og la meg ta dette bildet her for å male dette bildet. 45 00:02:13,150 --> 00:02:16,540 >> En beholder er, hvis du husker bildet 46 00:02:16,540 --> 00:02:19,900 fra tidligere, litt lysere vekt enn en virtuell maskin. 47 00:02:19,900 --> 00:02:22,090 Faktisk, mens siste Da vi snakket om det 48 00:02:22,090 --> 00:02:25,170 å være en drifts system og en hypervisor 49 00:02:25,170 --> 00:02:28,260 og deretter gjesteoperativsystem, gjest operativsystem, gjest drifts 50 00:02:28,260 --> 00:02:30,940 system, på toppen av din fysisk maskinvare, 51 00:02:30,940 --> 00:02:33,740 forskjellen med denne nyere teknologi, containerization, 52 00:02:33,740 --> 00:02:37,290 er at de alle en eller annen måte dele det samme operativsystemet. 53 00:02:37,290 --> 00:02:39,970 Men de fortsatt lage illusjonen av alle 54 00:02:39,970 --> 00:02:44,590 har sin egen eksklusive administrative rettigheter og filer 55 00:02:44,590 --> 00:02:45,400 på serveren. 56 00:02:45,400 --> 00:02:48,230 Men det er mindre programvare i mellom deg og maskinvare. 57 00:02:48,230 --> 00:02:52,260 Resultatet av dette er, i teori, en høyere ytelse, 58 00:02:52,260 --> 00:02:55,470 fordi du bruker eller sløse færre ressurser 59 00:02:55,470 --> 00:02:57,360 på den såkalte virtualiseringslaget. 60 00:02:57,360 --> 00:02:59,420 Så dette kalles containerization av natur 61 00:02:59,420 --> 00:03:02,920 ved hjelp av en teknologi som kalles Docker, som er veldig mye som kommer til sin rett. 62 00:03:02,920 --> 00:03:05,086 Og dette er noe som ingeniører i bedriften 63 00:03:05,086 --> 00:03:08,610 kan slags liksom begynne å snakke om snart hvis de ikke allerede har gjort, 64 00:03:08,610 --> 00:03:11,590 men det er absolutt ingen grunn til å hoppe på noen bandwagons. 65 00:03:11,590 --> 00:03:15,410 >> Så med det sagt, hva du sannsynligvis se nå 66 00:03:15,410 --> 00:03:22,670 er en skjerm som ser litt ut som dette. 67 00:03:22,670 --> 00:03:23,170 OK. 68 00:03:23,170 --> 00:03:25,260 Og bare kalle meg over hvis ikke. 69 00:03:25,260 --> 00:03:27,440 Og hvis Slik: Jeg kommer over hvis ikke. 70 00:03:27,440 --> 00:03:30,244 Gå videre og klikk på den store pluss å skape en arbeidsplass, 71 00:03:30,244 --> 00:03:31,660 og du vil se en skjerm som dette. 72 00:03:31,660 --> 00:03:35,020 Du kan ringe arbeidsområdet nevne noe du ønsker for nå. 73 00:03:35,020 --> 00:03:38,660 Og bare faktisk for enkelhet, gå og-- vel, noen av dere 74 00:03:38,660 --> 00:03:39,660 allerede har arbeidsområder. 75 00:03:39,660 --> 00:03:47,050 Kall det hva du want-- virksomhet, Harvard, torsdag, uansett hva du ønsker. 76 00:03:47,050 --> 00:03:48,800 Du trenger ikke en beskrivelse. 77 00:03:48,800 --> 00:03:52,380 Du kan la det private, med mindre du allerede har en haug med arbeidsområder. 78 00:03:52,380 --> 00:03:55,280 Hvis du er tvunget til å gjøre det offentlig, det er greit for dagens formål. 79 00:03:55,280 --> 00:03:56,750 Også her er en av de oppgraderingsmuligheter. 80 00:03:56,750 --> 00:03:59,939 Du får en privat arbeidsplass ved misligholde. Men hvis du vil ha mer, 81 00:03:59,939 --> 00:04:00,980 du må betale for mer. 82 00:04:00,980 --> 00:04:02,870 Hvis ikke, de tvinge deg å gjøre arbeidet ditt publikum. 83 00:04:02,870 --> 00:04:05,600 Men det er greit, fordi de også målrette denne på åpen kildekode-miljøer 84 00:04:05,600 --> 00:04:07,700 å oppmuntre folk til faktisk samarbeide. 85 00:04:07,700 --> 00:04:10,699 >> Og det siste som er viktig, skjønt, er, etter at du velger et navn 86 00:04:10,699 --> 00:04:17,140 og etter du velger privat eller offentlig, Klikk HTML5, den store oransje ikon 87 00:04:17,140 --> 00:04:22,430 andre fra venstre, og klikk deretter Opprett arbeidsområde. 88 00:04:22,430 --> 00:04:24,580 Og det vil sannsynligvis ta et minutt eller så, 89 00:04:24,580 --> 00:04:26,540 men du vil da ha en miljø, når du 90 00:04:26,540 --> 00:04:30,544 gjøre det, som ser ut som minner om hva jeg har på skjermen her nå. 91 00:04:30,544 --> 00:04:33,210 Men, igjen, kan det ta et minutt eller mer for å få til dette skjermbildet 92 00:04:33,210 --> 00:04:34,770 når du har klikket Opprett arbeidsområde. 93 00:04:34,770 --> 00:04:37,936 Men bare flagg meg over hvis du vil at jeg å ta en titt på noe eller råd. 94 00:04:37,936 --> 00:04:40,191 95 00:04:40,191 --> 00:04:40,690 Greit. 96 00:04:40,690 --> 00:04:42,390 Så jeg kommer til bakgrunns dette for nå. 97 00:04:42,390 --> 00:04:44,260 Ring meg over hvis du synes å har noen tekniske problemer. 98 00:04:44,260 --> 00:04:46,210 Men, igjen, kan det ta litt for at det skal åpnes. 99 00:04:46,210 --> 00:04:49,570 Og la oss gå videre og snakke om hva det faktisk betyr å lage en nettside, 100 00:04:49,570 --> 00:04:52,780 hva HTML er, og hvordan alt dette Nå sammenkoblinger som vi begynner 101 00:04:52,780 --> 00:04:54,730 å faktisk bruke noe av teknologien. 102 00:04:54,730 --> 00:04:58,310 Så det viser seg at jeg kan gå på min lille Mac her, 103 00:04:58,310 --> 00:05:01,650 åpne et enkelt program som heter TextEdit, eller på Windows jeg kunne 104 00:05:01,650 --> 00:05:04,480 åpne noe som kalles Notepad.exe. 105 00:05:04,480 --> 00:05:08,260 Og jeg kunne bare rett og slett gjøre noe Slik: "Hei, verden." 106 00:05:08,260 --> 00:05:12,020 Og da kunne jeg lagre dette som hello.txt Så ingen magi der. 107 00:05:12,020 --> 00:05:15,200 Dette har ingenting å gjøre med web programmering, ingenting å gjøre med HTML. 108 00:05:15,200 --> 00:05:16,790 Bare å lage en enkel tekstfil. 109 00:05:16,790 --> 00:05:20,600 Men det viser seg at en web side er bokstavelig talt nettopp det. 110 00:05:20,600 --> 00:05:24,020 Det er en enkel tekstfil som inneholder tekst at du kan skrive på tastaturet, 111 00:05:24,020 --> 00:05:30,070 men det vanligvis, men ikke alltid slutter i ikke .txt men .html eller .htm. 112 00:05:30,070 --> 00:05:32,050 Og du ikke bare skriv ord i filen. 113 00:05:32,050 --> 00:05:35,280 Du faktisk må bruke ting som kalles tags eller, mer generelt, noe 114 00:05:35,280 --> 00:05:37,190 kalt kodespråk. 115 00:05:37,190 --> 00:05:40,510 >> Så jeg kommer til å raskt skrive og deretter forklare følgende. 116 00:05:40,510 --> 00:05:42,290 Jeg kommer til å først skriver dette, som sier: 117 00:05:42,290 --> 00:05:45,730 hei, nettleser, her kommer en nettside skrevet i HTML. 118 00:05:45,730 --> 00:05:51,850 Og disse to tingene sammen si hei, Nettleseren er følgende faktisk HTML. 119 00:05:51,850 --> 00:05:55,790 Hei, nettleser, her kommer hodet eller øverst på siden min. 120 00:05:55,790 --> 00:05:59,900 Hei, nettleser, innsiden av toppen av min side, sette en tittel som er "hallo, 121 00:05:59,900 --> 00:06:01,610 verden." 122 00:06:01,610 --> 00:06:08,370 Hei, nettleser, etter hodet mitt side, her kommer teksten på siden min. 123 00:06:08,370 --> 00:06:12,170 Og hei, nettleser, kroppen min side må også si, "hello world". 124 00:06:12,170 --> 00:06:15,500 Så hva er de viktigste detaljene her? 125 00:06:15,500 --> 00:06:17,960 Dette er hva som er generelt kalles en doc-typedeklarasjon, 126 00:06:17,960 --> 00:06:20,190 og, ærlig, det er en liten vanskelig å huske dette først. 127 00:06:20,190 --> 00:06:21,481 Du bare slags kopiere den. 128 00:06:21,481 --> 00:06:23,760 Dette er den formelle måten for å si hei, nettleser, 129 00:06:23,760 --> 00:06:28,030 Jeg bruker HTML-versjon 5 som kom ut noe nylig. 130 00:06:28,030 --> 00:06:31,380 Det er en magisk besvergelse at noen mennesker med en dårlig følelse av design 131 00:06:31,380 --> 00:06:33,640 bestemte seg for å sette på toppen av filen. 132 00:06:33,640 --> 00:06:35,473 Selv om det er en litt uforståelige, det er alt 133 00:06:35,473 --> 00:06:38,250 det means-- hei, nettleser, her kommer med versjon 5 av HTML. 134 00:06:38,250 --> 00:06:41,741 >> Resten av dette har vært med oss for noen tid nå, historisk, 135 00:06:41,741 --> 00:06:44,740 men det har vært under utvikling, og det er sannsynligvis fått en litt enklere. 136 00:06:44,740 --> 00:06:47,320 Legg merke til noen kjennetegn av det jeg har uthevet. 137 00:06:47,320 --> 00:06:49,890 Det er disse tingene med vinklet brackets-- venstre brakett 138 00:06:49,890 --> 00:06:51,040 og høyre brakett. 139 00:06:51,040 --> 00:06:52,490 Og legg merke til symmetrien her. 140 00:06:52,490 --> 00:06:57,340 Og etter symmetri, jeg mener, akkurat som jeg har denne start tag her eller en åpen tag 141 00:06:57,340 --> 00:07:01,560 om du vil, her nede har jeg en sluttkode eller en slutt tag som er 142 00:07:01,560 --> 00:07:06,460 annerledes bare i den utstrekning det har denne slash på begynnelsen av ordet 143 00:07:06,460 --> 00:07:07,360 HTML. 144 00:07:07,360 --> 00:07:09,360 Og du kan tenke på dette som jeg var tilfeldig 145 00:07:09,360 --> 00:07:12,280 foreslår før, hei, nettleser, her kommer noen HTML. 146 00:07:12,280 --> 00:07:16,060 Og omvendt, hei, er nettleseren som det for HTML-- start og slutt. 147 00:07:16,060 --> 00:07:18,440 >> I mellomtiden hei, nettleser, her kommer hodet på siden min. 148 00:07:18,440 --> 00:07:20,140 Hei, er nettleseren som det for hodet. 149 00:07:20,140 --> 00:07:22,240 Hei, nettleser, her er kroppen min side. 150 00:07:22,240 --> 00:07:24,020 Hei, er nettleseren som det for kroppen. 151 00:07:24,020 --> 00:07:26,940 Og innsiden av det er noen vilkårlig tekst for nå. 152 00:07:26,940 --> 00:07:30,520 Og inne i hodet, i mellomtiden, er en oppkonstruert men merket, 153 00:07:30,520 --> 00:07:34,410 så å si, tekst som sier, tittelen på siden min skal være "Hei, verden." 154 00:07:34,410 --> 00:07:37,470 Nå, for nå kan du anta at nettlesere 155 00:07:37,470 --> 00:07:41,762 har only-- eller, rettere sagt, websider har bare to parts-- hodet og kroppen. 156 00:07:41,762 --> 00:07:44,220 Og hodet er vanligvis bare som menylinjen, ting 157 00:07:44,220 --> 00:07:45,510 egentlig bare på toppen. 158 00:07:45,510 --> 00:07:48,910 Og kroppen er tøff nok av siden, alt i det store rektangelet 159 00:07:48,910 --> 00:07:50,239 som fyller skjermen. 160 00:07:50,239 --> 00:07:51,780 Så jeg kommer til å gå videre og gjøre dette. 161 00:07:51,780 --> 00:07:54,400 Jeg kommer til å gå videre og Klikk Lagre, File Save. 162 00:07:54,400 --> 00:07:58,580 Og jeg kommer til å spare dette som hello.html, 163 00:07:58,580 --> 00:08:00,870 og jeg skal bare sette den på skrivebordet mitt. 164 00:08:00,870 --> 00:08:03,520 Og jeg kommer til å gå videre og klikk på Lagre. 165 00:08:03,520 --> 00:08:05,806 Og notice-- min Mac på minst er roping på meg. 166 00:08:05,806 --> 00:08:07,180 Er du sikker på at du vil gjøre dette? 167 00:08:07,180 --> 00:08:08,710 Og jeg kommer til å si, ja, bruke HTML. 168 00:08:08,710 --> 00:08:10,400 Jeg vet bedre i dette tilfellet. 169 00:08:10,400 --> 00:08:14,686 Og nå kommer jeg til å gå til skrivebordet mitt hvor jeg har denne filen plutselig. 170 00:08:14,686 --> 00:08:16,060 Og jeg kommer til å dobbeltklikke den. 171 00:08:16,060 --> 00:08:18,268 Og du vil legge merke til at ved å standard, Chrome åpnet opp. 172 00:08:18,268 --> 00:08:19,996 Det er fordi det er standard nettleser. 173 00:08:19,996 --> 00:08:21,370 Og det bare sier, "Hei, verden." 174 00:08:21,370 --> 00:08:23,078 Men det står "Hei, verden "på to steder. 175 00:08:23,078 --> 00:08:23,979 Legg merke øverst til venstre. 176 00:08:23,979 --> 00:08:25,020 Ganske vanskelig å gå glipp av det. 177 00:08:25,020 --> 00:08:26,180 Det er stor og fet. 178 00:08:26,180 --> 00:08:30,690 Og hvor ellers virker det å si: "Hei, verden"? 179 00:08:30,690 --> 00:08:31,470 >> PUBLIKUM: Fanen. 180 00:08:31,470 --> 00:08:33,100 >> DAVID J. MALAN: Ja, selve fanen. 181 00:08:33,100 --> 00:08:35,159 Så når jeg sa leder av side er alt opp top-- 182 00:08:35,159 --> 00:08:36,367 og dette er faktisk tittelen. 183 00:08:36,367 --> 00:08:37,710 Det er bare i den kategorien her. 184 00:08:37,710 --> 00:08:40,320 Og jeg kan trekke denne kategorien ut for ikke å forvirre. 185 00:08:40,320 --> 00:08:43,360 Dette er bare en enkelt fane nå, og faktisk vi se "Hei, verden" 186 00:08:43,360 --> 00:08:45,970 opp her og "Hallo, verden" her nede. 187 00:08:45,970 --> 00:08:47,160 Så ganske grei. 188 00:08:47,160 --> 00:08:49,050 Men det er også ganske enkel. 189 00:08:49,050 --> 00:08:50,440 Og, faktisk, jeg zoomet inn. 190 00:08:50,440 --> 00:08:53,272 Jeg kan endre skriftstørrelsen bare å foredle for tilgjengelighet. 191 00:08:53,272 --> 00:08:56,830 Men la oss nå gjøre noe litt mer interessant. 192 00:08:56,830 --> 00:08:59,760 >> Jeg kommer til å Vær så god Uff, la meg komme tilbake til min tekstfil. 193 00:08:59,760 --> 00:09:02,400 Jeg kommer tilbake til min tekstfil, og jeg kommer 194 00:09:02,400 --> 00:09:06,320 å endre dette og si "Hallo, Disney World." 195 00:09:06,320 --> 00:09:07,970 Spare. 196 00:09:07,970 --> 00:09:10,919 Og gå tilbake til min nettleser og klikk Reload. 197 00:09:10,919 --> 00:09:12,710 Og nå, selvfølgelig, det sier "Disney World." 198 00:09:12,710 --> 00:09:15,500 Og jeg kommer til kunstig zoome i så er det lettere å se. 199 00:09:15,500 --> 00:09:19,012 Så nå, dessverre, jeg slags ønsker to-- faktisk, det er en Mac-funksjonen. 200 00:09:19,012 --> 00:09:21,720 Jeg ønsker å klikke på Disney World og gå et sted som disney.com, 201 00:09:21,720 --> 00:09:23,290 men som ikke fungerer. 202 00:09:23,290 --> 00:09:26,850 Så en grunnleggende læresetning av nettet er hyperkoblinger, lenker som går andre steder. 203 00:09:26,850 --> 00:09:28,390 Så hvordan gjør jeg det? 204 00:09:28,390 --> 00:09:34,690 Vel, jeg kan bare si, "Hei, http://www.disney.com." 205 00:09:34,690 --> 00:09:36,110 Lagre dette. 206 00:09:36,110 --> 00:09:37,620 Last. 207 00:09:37,620 --> 00:09:39,400 Men dette også, ikke klikkbare. 208 00:09:39,400 --> 00:09:42,930 Og hva er fint her, selv om dette er ikke funksjonell ennå, 209 00:09:42,930 --> 00:09:45,930 er at det virker som om Nettleseren bokstavelig talt bare gjør 210 00:09:45,930 --> 00:09:46,950 det jeg ber den om. 211 00:09:46,950 --> 00:09:50,110 Så hvis jeg bare skriver inn en nettadresse som dette, det bare kommer til å vise meg nettadressen. 212 00:09:50,110 --> 00:09:54,270 Jeg trenger å bruke koder eller markering språk for å faktisk fortelle 213 00:09:54,270 --> 00:09:55,621 leseren til å gjøre enda mer. 214 00:09:55,621 --> 00:09:57,870 Så jeg kommer til å gå videre og slette dette for et øyeblikk. 215 00:09:57,870 --> 00:10:00,980 Og jeg kommer til å si hei, leseren, starte et anker her, 216 00:10:00,980 --> 00:10:02,650 en link så å si. 217 00:10:02,650 --> 00:10:07,500 Og hyper-referanse, reisemålet av at ankeret, bør denne nettadressen. 218 00:10:07,500 --> 00:10:08,750 Og legg merke til mine sitater. 219 00:10:08,750 --> 00:10:11,590 Jeg kunne bruke enkle anførselstegn, også, men du må være konsekvent, 220 00:10:11,590 --> 00:10:14,270 og jeg ville vanligvis bare bruke doble anførselstegn for å holde det enkelt. 221 00:10:14,270 --> 00:10:16,820 Legg merke til jeg kommer til å lukke taggen. 222 00:10:16,820 --> 00:10:21,160 Og så her kommer jeg å si, "Disney World." 223 00:10:21,160 --> 00:10:26,890 Og nå trenger jeg noen symmetry-- åpen brakett, / a, lukket brakett. 224 00:10:26,890 --> 00:10:28,090 >> Så hva har jeg introdusert? 225 00:10:28,090 --> 00:10:30,100 Vi har hatt noen tags allerede. 226 00:10:30,100 --> 00:10:32,410 HTML, Head, tittel, Body, er alle tagger, så å si, 227 00:10:32,410 --> 00:10:34,280 med åpne og lukkede kolleger. 228 00:10:34,280 --> 00:10:36,530 Men legg merke til, er denne typen av fundamentalt forskjellig. 229 00:10:36,530 --> 00:10:39,140 Dette er hva vi kaller i HTML et attributt. 230 00:10:39,140 --> 00:10:41,451 Og et attributt er bare en nøkkelverdi-par. 231 00:10:41,451 --> 00:10:43,950 Dette er en vanlig ting i datamaskin science-- nøkkelverdi-paret. 232 00:10:43,950 --> 00:10:45,770 Det er liksom verktøy av handelen. 233 00:10:45,770 --> 00:10:47,040 En nøkkel og en verdi. 234 00:10:47,040 --> 00:10:49,390 Et ord og litt til andre ord eller ord. 235 00:10:49,390 --> 00:10:53,790 Og i dette tilfelle er nøkkelen href, og verdien er at full URL. 236 00:10:53,790 --> 00:10:57,890 Og hva en egenskap gjør er det påvirker atferden til en tag. 237 00:10:57,890 --> 00:11:01,010 Og i dette tilfellet, må vi påvirke oppførselen til ankerkoden, 238 00:11:01,010 --> 00:11:04,140 fordi vi trenger å forankre denne linken til et sted. 239 00:11:04,140 --> 00:11:06,960 Og hvordan du gjør det er ved hjelp av attributtet. 240 00:11:06,960 --> 00:11:08,970 >> Så jeg kommer til å gå videre og lagre filen nå. 241 00:11:08,970 --> 00:11:11,300 Gå tilbake til nettleseren min og reload. 242 00:11:11,300 --> 00:11:14,580 Og voila, har vi nå Begynnelsen av en legitim nettside. 243 00:11:14,580 --> 00:11:18,420 Super-enkel, men hvis jeg sveve over dette-- varsel i nederste venstre hjørne, 244 00:11:18,420 --> 00:11:19,830 det er super-liten. 245 00:11:19,830 --> 00:11:21,730 Men du ser www.disney.com. 246 00:11:21,730 --> 00:11:27,076 Og hvis jeg klikker på den, ja dette visper meg bort til disney.com. 247 00:11:27,076 --> 00:11:29,380 Nå, nysgjerrige ting her er at det ikke er 248 00:11:29,380 --> 00:11:33,940 den best-- den mest salgbare URL, men det er greit, fordi denne filen ikke 249 00:11:33,940 --> 00:11:35,360 eksisterer på World Wide Web. 250 00:11:35,360 --> 00:11:39,740 Det eksisterer som en lokal fil i tilsynelatende mine Brukere directory-- / jharvard-- 251 00:11:39,740 --> 00:11:41,890 for John Harvard-- / desktop. 252 00:11:41,890 --> 00:11:42,634 Men det har en nettadresse. 253 00:11:42,634 --> 00:11:43,800 Det skjer bare for å være lokale. 254 00:11:43,800 --> 00:11:47,050 Dessverre kan ingen av du besøker dette, fordi hvis du skriver denne nettadressen, 255 00:11:47,050 --> 00:11:49,980 du ville være å fortelle nettleseren din, se etter en fil som heter hello.html 256 00:11:49,980 --> 00:11:50,772 på harddisken. 257 00:11:50,772 --> 00:11:53,271 Og, selvfølgelig, med mindre du har fulgt sammen manuelt, 258 00:11:53,271 --> 00:11:54,530 det er ikke til å eksistere der. 259 00:11:54,530 --> 00:11:55,190 >> Så det er greit. 260 00:11:55,190 --> 00:11:57,815 Vi trenger fortsatt en vei, til slutt, å få denne filen inn i nettet, 261 00:11:57,815 --> 00:12:01,180 men la oss erte hverandre et par sikkerhetsmessige konsekvensene av det vi nettopp 262 00:12:01,180 --> 00:12:04,850 så og knytte det tilbake til den tidligere diskusjonen fra i morges. 263 00:12:04,850 --> 00:12:08,200 Det viser seg at, hvis en Nettleseren bokstavelig talt bare gjør 264 00:12:08,200 --> 00:12:12,560 det jeg ber den om, og det virker å være slik at en ankerkode er 265 00:12:12,560 --> 00:12:17,380 påvirket av verdien av dette attributt kalt href 266 00:12:17,380 --> 00:12:20,810 men det viser denne tekst, vil dette virke 267 00:12:20,810 --> 00:12:26,520 å antyde at jeg kunne sette URL på begge steder og legg 268 00:12:26,520 --> 00:12:29,100 og nå ser det URL og gå til nettadressen. 269 00:12:29,100 --> 00:12:32,680 Legg merke til, hvis jeg holde musepekeren over nederste venstre, Jeg faktisk kommer fortsatt til disney.com. 270 00:12:32,680 --> 00:12:38,340 >> Så hvis du noen gang har vært phished-- P-H-I-S-H-E-D-- 271 00:12:38,340 --> 00:12:42,820 med en av disse falske e-poster fra som PayPal banken din, 272 00:12:42,820 --> 00:12:46,470 du har sikkert fått linker inne av e-post som du leser det 273 00:12:46,470 --> 00:12:49,970 forteller du klikke her for å gå confirm passordet eller bekrefte din fødselsdato 274 00:12:49,970 --> 00:12:53,840 eller sosial eller noe sosialt ingeniør du å avsløre 275 00:12:53,840 --> 00:12:54,920 informasjon. 276 00:12:54,920 --> 00:12:57,625 Vel, jeg kunne slags ta nytte av dette, kunne ikke jeg? 277 00:12:57,625 --> 00:13:01,240 Jeg kunne si noe som, www.paypal.com. 278 00:13:01,240 --> 00:13:11,340 Og i stedet for disney.com, jeg kunne gå til, som, badguy.com. 279 00:13:11,340 --> 00:13:12,850 Last. 280 00:13:12,850 --> 00:13:16,620 Og hvor lett er det å lure, spesielt en ikke-teknisk-leser 281 00:13:16,620 --> 00:13:20,649 eller en cursorily leser leseren enn å klikke 282 00:13:20,649 --> 00:13:23,940 en link som dette, som hvis jeg klikker it-- Jeg faktisk ikke ønsker å gå badguy.com. 283 00:13:23,940 --> 00:13:25,398 Jeg vet ikke hva som faktisk er der. 284 00:13:25,398 --> 00:13:30,080 Så paypal.com, varsel, er hva den sier det kommer til å, 285 00:13:30,080 --> 00:13:33,210 men selvfølgelig, hvis jeg ser ned super-lav, er det litt uskarpt, 286 00:13:33,210 --> 00:13:34,230 men det sier badguy.com. 287 00:13:34,230 --> 00:13:38,644 Det er den eneste fortelle akkurat nå at jeg kommer til feil sted. 288 00:13:38,644 --> 00:13:41,560 Og da jeg sa tidligere at bankene bør ikke oppfordre eller tog 289 00:13:41,560 --> 00:13:44,510 brukere til å klikke linker, dette er bare en manifestasjon av det. 290 00:13:44,510 --> 00:13:45,430 Og det er så enkelt. 291 00:13:45,430 --> 00:13:48,120 Du er nå en motstander hvis du gjør noe sånt som dette 292 00:13:48,120 --> 00:13:51,000 og prøve å lure en bruker til å besøke nettstedet ditt. 293 00:13:51,000 --> 00:13:53,320 Men for nå, vil vi holde ting rent og pent. 294 00:13:53,320 --> 00:13:55,640 Vi kommer til å gå videre og spole disse endringene. 295 00:13:55,640 --> 00:13:56,530 Oppdater siden. 296 00:13:56,530 --> 00:13:57,740 Og jeg går tilbake til disney.com. 297 00:13:57,740 --> 00:14:00,660 >> La oss se om vi ikke kan erte Dette leilighets litt mer. 298 00:14:00,660 --> 00:14:04,160 Så "hallo, Disney World." 299 00:14:04,160 --> 00:14:05,950 Jeg kommer til å si her nede. 300 00:14:05,950 --> 00:14:08,220 Kanskje jeg kommer til å gjøre noen plass. 301 00:14:08,220 --> 00:14:12,730 "Vi håper du trives!" 302 00:14:12,730 --> 00:14:13,830 Spare. 303 00:14:13,830 --> 00:14:15,850 Last. 304 00:14:15,850 --> 00:14:19,010 Det er ikke rea-- det er ikke hva jeg skal, ikke sant? 305 00:14:19,010 --> 00:14:21,870 Jeg mener, hvis jeg behandler min tekst fil som en tekstbehandler, 306 00:14:21,870 --> 00:14:24,894 hva gjorde du håper vil skje her? 307 00:14:24,894 --> 00:14:27,060 Ja, jeg føler det bør være et linjeskift her, 308 00:14:27,060 --> 00:14:28,799 så det føles buggy på noen måte. 309 00:14:28,799 --> 00:14:31,090 Men det er faktisk bevisst, fordi på samme måte som før, 310 00:14:31,090 --> 00:14:33,381 leseren er bare kommer til gjør det du ber den om. 311 00:14:33,381 --> 00:14:34,806 Jeg har ikke fortalt det til å bryte linjene. 312 00:14:34,806 --> 00:14:37,930 Jeg har ikke fortalt det til å gå ned, selv skjønt, intuitivt, jeg føler at jeg gjorde. 313 00:14:37,930 --> 00:14:39,805 Så det viser seg at vi trenger litt mer markering, 314 00:14:39,805 --> 00:14:41,390 og jeg kommer til å fikse dette på følgende måte. 315 00:14:41,390 --> 00:14:46,160 Jeg kommer til å forord denne første hallo med det som kalles et avsnitt tag. 316 00:14:46,160 --> 00:14:48,920 Og så kommer jeg til å gå videre og pakk denne andre setningen 317 00:14:48,920 --> 00:14:54,370 i en annen paragraf tag, selv om de er super-korte avsnitt. 318 00:14:54,370 --> 00:14:55,930 Nå kommer jeg til å redde. 319 00:14:55,930 --> 00:14:57,160 Last. 320 00:14:57,160 --> 00:14:59,070 Og nå har vi at plass, og vi liksom 321 00:14:59,070 --> 00:15:01,680 har semantikk to separate avsnitt. 322 00:15:01,680 --> 00:15:05,290 >> Det er alt fint og bra, men det ville være fint å legge til et bilde til denne siden 323 00:15:05,290 --> 00:15:08,710 så jeg kommer til å lete etter Mikke Mus på Google Images. 324 00:15:08,710 --> 00:15:12,830 Og bare for moro skyld, jeg er kommer til å ta dette bildet. 325 00:15:12,830 --> 00:15:15,350 Jeg kommer til å gå videre nå og gripe inn nettadressen til dette bildet, 326 00:15:15,350 --> 00:15:16,510 selv om det er annerledes måter å gjøre dette. 327 00:15:16,510 --> 00:15:18,520 For nå er jeg bare kommer til å kopiere URL. 328 00:15:18,520 --> 00:15:24,770 Jeg kommer til å gå tilbake til min tekst fil, og jeg kommer til å si her, 329 00:15:24,770 --> 00:15:31,160 img src = quote unquote som URL, super-lang. 330 00:15:31,160 --> 00:15:34,580 Og da forestillingen om en Bildet er litt annerledes. 331 00:15:34,580 --> 00:15:38,640 Det er egentlig ingen forestilling om start et bilde og slutter et bilde, 332 00:15:38,640 --> 00:15:40,630 som en start tagge en slutt tag. 333 00:15:40,630 --> 00:15:43,840 Så det føles litt rart å meg semantisk å gjøre dette, 334 00:15:43,840 --> 00:15:45,390 å ha en nær-bildekode. 335 00:15:45,390 --> 00:15:46,780 Det er ikke feil. 336 00:15:46,780 --> 00:15:48,840 Det er helt riktig, og det er oppmuntret, 337 00:15:48,840 --> 00:15:50,870 men det er stenografi notasjon. 338 00:15:50,870 --> 00:15:53,780 Jeg kan slags samtidig åpner og lukker den samme koden, 339 00:15:53,780 --> 00:15:55,510 og som vil gjøre nettleseren lykkelig. 340 00:15:55,510 --> 00:15:56,950 Så det er bare en liten mer konsis for ting 341 00:15:56,950 --> 00:15:59,408 som konseptuelt egentlig ikke fornuftig å starte og slutte. 342 00:15:59,408 --> 00:16:01,190 De bare er der, eller er de ikke. 343 00:16:01,190 --> 00:16:06,020 >> Så jeg kommer til å spare dette og gå tilbake til min "Hei, verden" side og reload. 344 00:16:06,020 --> 00:16:09,880 Og det er litt ute av kontroll, fordi det bildet er faktisk 345 00:16:09,880 --> 00:16:12,210 en litt stor, men det er OK. 346 00:16:12,210 --> 00:16:13,710 Jeg kunne endre størrelsen på det i et program. 347 00:16:13,710 --> 00:16:14,900 Eller vet du hva. 348 00:16:14,900 --> 00:16:17,350 Bare for å demonstrere, jeg er kommer til å faktisk si 349 00:16:17,350 --> 00:16:21,760 at bredden av denne tingen bør bare være 200 piksler, 200 prikker. 350 00:16:21,760 --> 00:16:24,360 La meg gå videre og lagre og laste, og nå siden 351 00:16:24,360 --> 00:16:25,690 ser litt mer fornuftig. 352 00:16:25,690 --> 00:16:27,260 Men legg merke til mønsteret. 353 00:16:27,260 --> 00:16:30,030 Vel, jeg har på en måte lært deg alt av HTML i noen forstand, i det minste 354 00:16:30,030 --> 00:16:33,531 konseptuelt, fordi all HTML er er disse tags-- åpne koder, lukket koder, 355 00:16:33,531 --> 00:16:35,280 og egenskaper som endre sin atferd. 356 00:16:35,280 --> 00:16:38,380 Og tilsynelatende, hver tag kan ha null eller ett 357 00:16:38,380 --> 00:16:43,005 eller to eller flere attributter, hver av som gjør noe litt annerledes. 358 00:16:43,005 --> 00:16:44,380 Nå, hvordan vet du hva som finnes? 359 00:16:44,380 --> 00:16:46,800 Du bare lytte til noen som meg fortelle deg hva som finnes, 360 00:16:46,800 --> 00:16:50,860 eller du bare Google rundt for en tutorial på HTML, og det er virkelig dette enkelt. 361 00:16:50,860 --> 00:16:54,030 >> Sannelig, da jeg var en undergrad år siden, og lærte HTML, 362 00:16:54,030 --> 00:16:56,530 en av min matte undervisning assistenter nettopp tilbrakt 363 00:16:56,530 --> 00:16:59,600 litt tid veiledning meg for som en halv time, en time, 364 00:16:59,600 --> 00:17:00,660 og da jeg var på vei. 365 00:17:00,660 --> 00:17:03,300 Jeg var på vei mot å gjøre de mest grusomme nettsteder noensinne, 366 00:17:03,300 --> 00:17:05,549 som, tilsynelatende, har jeg ikke virkelig kommet lenger. 367 00:17:05,549 --> 00:17:09,849 Men poenget er at når du forstå disse enkle ideas-- 368 00:17:09,849 --> 00:17:13,450 hvis uforståelige text-- men disse enkle ideer om å starte en tanke 369 00:17:13,450 --> 00:17:15,960 og lukke en tanke, holde alt pent balansert, 370 00:17:15,960 --> 00:17:19,150 ser noe opp, modifisere oppførsel av dette merket, det er egentlig alt 371 00:17:19,150 --> 00:17:20,079 det som skal til. 372 00:17:20,079 --> 00:17:28,140 Og faktisk, hvis vi nå gå til noe som google.com-- faktisk, 373 00:17:28,140 --> 00:17:31,920 la oss gå et sted litt mer reasonable-- stanford.edu. 374 00:17:31,920 --> 00:17:37,800 Og jeg kommer til å gå til Vis, Utvikler, Vis kilde. 375 00:17:37,800 --> 00:17:41,400 Det er stygt, men notice-- og jeg skal zoome inn varsel 376 00:17:41,400 --> 00:17:43,432 noen ting som er kjent allerede. 377 00:17:43,432 --> 00:17:45,140 Det er dette opp her, som er en nettleser. 378 00:17:45,140 --> 00:17:46,800 Her kommer HTML5. 379 00:17:46,800 --> 00:17:47,634 Det er HTML. 380 00:17:47,634 --> 00:17:49,550 Angivelig, det er en tilskriver at jeg ikke 381 00:17:49,550 --> 00:17:51,540 bruker som angir språket på siden, 382 00:17:51,540 --> 00:17:54,380 og dette kan hjelpe med automatisk oversettelse og sånne ting. 383 00:17:54,380 --> 00:17:55,546 Her er hodet på siden. 384 00:17:55,546 --> 00:17:57,790 Her er tittelen på Stanford side. 385 00:17:57,790 --> 00:17:59,832 Det er et merke jeg ikke snakke om yet-- Meta tag. 386 00:17:59,832 --> 00:18:01,540 Det er bare en slags bakgrunnsinformasjon. 387 00:18:01,540 --> 00:18:04,210 Det hjelper med SEO, eller søkemotor-optimalisering, 388 00:18:04,210 --> 00:18:06,320 eller Google-søkeresultater eller lignende. 389 00:18:06,320 --> 00:18:09,029 Men hvis vi holde utkikk, holde ser, her er Body tag. 390 00:18:09,029 --> 00:18:11,570 Og det er bunter av andre koder vi ikke har snakket om ennå. 391 00:18:11,570 --> 00:18:13,750 Men Div er en for en divisjon på siden. 392 00:18:13,750 --> 00:18:16,680 Det er som en usynlig rektangel hvis du slags ønsker å mentalt 393 00:18:16,680 --> 00:18:20,160 dele siden inn ulike enheter online. 394 00:18:20,160 --> 00:18:22,650 Og så mange divs jeg se, noe som kalles klasse, 395 00:18:22,650 --> 00:18:24,440 men vi vil komme tilbake til det. 396 00:18:24,440 --> 00:18:26,200 >> Dette er interesting-- Forms. 397 00:18:26,200 --> 00:18:27,730 Skjemaer er over hele nettet. 398 00:18:27,730 --> 00:18:30,310 Enhver søkefelt du er inne har brukt er en form. 399 00:18:30,310 --> 00:18:31,490 Og så, la oss faktisk se. 400 00:18:31,490 --> 00:18:32,790 Form. 401 00:18:32,790 --> 00:18:33,910 Handling. 402 00:18:33,910 --> 00:18:37,660 Handlingen i dette skjemaet, uansett historiske årsaker, er at nettadressen. 403 00:18:37,660 --> 00:18:38,840 Metode er "post". 404 00:18:38,840 --> 00:18:44,060 Viser seg at HTTP-forespørsler kan bruke verbet "bli", som vi så før, 405 00:18:44,060 --> 00:18:45,070 eller "post". 406 00:18:45,070 --> 00:18:47,030 Og vil du se en forskjell av dette i et øyeblikk. 407 00:18:47,030 --> 00:18:48,363 La oss faktisk se hva dette er. 408 00:18:48,363 --> 00:18:49,830 La meg gå tilbake til Stanford side. 409 00:18:49,830 --> 00:18:53,330 Hvilken form de snakker om, tror du? 410 00:18:53,330 --> 00:18:54,485 Hva hopper ut av deg? 411 00:18:54,485 --> 00:18:54,970 >> PUBLIKUM: Søk-boksen. 412 00:18:54,970 --> 00:18:55,845 >> DAVID J. MALAN: Ja. 413 00:18:55,845 --> 00:18:58,410 Så opp øverst til høyre her er denne søkeboksen. 414 00:18:58,410 --> 00:19:02,441 Og det er hvordan de implementeres it-- en kode som er bokstavelig talt åpen brakett form. 415 00:19:02,441 --> 00:19:03,940 Og så la oss søke etter noe. 416 00:19:03,940 --> 00:19:09,220 La oss søke etter en kompis av mine-- "Nick Parlante." 417 00:19:09,220 --> 00:19:11,380 Gå. 418 00:19:11,380 --> 00:19:13,750 Og selvfølgelig, det gikk til en litt annen nettadresse. 419 00:19:13,750 --> 00:19:15,140 La meg gå tilbake hit. 420 00:19:15,140 --> 00:19:18,960 La oss søke etter "kurs". 421 00:19:18,960 --> 00:19:19,460 Pokker. 422 00:19:19,460 --> 00:19:20,484 Gikk til en annen nettadresse. 423 00:19:20,484 --> 00:19:23,400 Så, Stanford og legger litt magi at de ikke tar meg til URL 424 00:19:23,400 --> 00:19:25,820 som vi så i handling attributt der. 425 00:19:25,820 --> 00:19:32,480 Men denne formen her er implementert rent ved hjelp av denne markup her, disse kodene. 426 00:19:32,480 --> 00:19:35,710 Faktisk, her er inngang for den type søk som du ønsker. 427 00:19:35,710 --> 00:19:38,940 Her er en inngang for en annen type søk. 428 00:19:38,940 --> 00:19:41,960 Her er inngangen for selve strengen. 429 00:19:41,960 --> 00:19:45,394 Og så målet er ikke å vikle våre sinn rundt alle disse kodene 430 00:19:45,394 --> 00:19:46,060 men bare for å se. 431 00:19:46,060 --> 00:19:48,300 Det er bare å åpne og lukke koder og ser ting opp. 432 00:19:48,300 --> 00:19:48,560 Ja? 433 00:19:48,560 --> 00:19:48,920 Victoria? 434 00:19:48,920 --> 00:19:49,795 >> PUBLIKUM: [uhørlig] 435 00:19:49,795 --> 00:19:51,925 436 00:19:51,925 --> 00:19:53,550 DAVID J. MALAN: Det er et godt spørsmål. 437 00:19:53,550 --> 00:19:54,660 Det er litt vanskeligere å se. 438 00:19:54,660 --> 00:19:56,300 La meg komme tilbake til spørsmålet i løpet av få minutter 439 00:19:56,300 --> 00:19:59,000 når vi ser på noe som kalles CSS, eller Cascading Style Sheets, 440 00:19:59,000 --> 00:20:02,500 og vi kan prøve å antyde så mye fra siden. 441 00:20:02,500 --> 00:20:08,090 Så hvis vi nå ta en titt på google.com, la oss se hva deres side ser ut. 442 00:20:08,090 --> 00:20:09,840 Du ville they're-- som er søt i dag. 443 00:20:09,840 --> 00:20:12,490 444 00:20:12,490 --> 00:20:12,990 OK. 445 00:20:12,990 --> 00:20:13,690 Ferdig. 446 00:20:13,690 --> 00:20:15,260 Greit, så View Source. 447 00:20:15,260 --> 00:20:19,590 Du tror Google har veldig hyggelig kildekode. 448 00:20:19,590 --> 00:20:24,970 Så, tilsynelatende, er hva som skjer her? 449 00:20:24,970 --> 00:20:27,880 Og faktisk, dette er ikke engang HTML. 450 00:20:27,880 --> 00:20:30,930 Dette er noe som kalles Javascript. 451 00:20:30,930 --> 00:20:32,344 Og la oss fortsette og fortsette. 452 00:20:32,344 --> 00:20:34,010 Jeg vet ikke engang hvor siden starter. 453 00:20:34,010 --> 00:20:37,240 Jeg kommer til å bruke Command F, åpen brakett HTML. 454 00:20:37,240 --> 00:20:38,200 Greit, det er det. 455 00:20:38,200 --> 00:20:44,150 Jeg fant starten av siden, og det er så mye ting i her. 456 00:20:44,150 --> 00:20:45,310 >> Hva som faktisk skjer? 457 00:20:45,310 --> 00:20:47,460 Vel, vet du hva, vi kan rydde opp dette. 458 00:20:47,460 --> 00:20:52,109 Hvis jeg i stedet gå til denne Inspiser verktøylinjen, denne spesielle diagnostiske verktøy, 459 00:20:52,109 --> 00:20:54,150 og gå ikke til nettverk, hvor vi holder det gående i dag, 460 00:20:54,150 --> 00:20:56,420 men hvis jeg går til Elements, hva som er virkelig fint 461 00:20:56,420 --> 00:20:59,990 er at en nettleser har mye mye bedre øyne enn jeg gjør. 462 00:20:59,990 --> 00:21:02,670 Og leseren kan lese at rot av en web-side, 463 00:21:02,670 --> 00:21:04,700 at HTML mail vi bare sett på, og det kan 464 00:21:04,700 --> 00:21:08,340 analysere den eller lese og analysere den og reformatere den 465 00:21:08,340 --> 00:21:09,910 i et hyggelig menneske-vennlig måte. 466 00:21:09,910 --> 00:21:11,740 Så det jeg ser nå i dette skjermbildet her 467 00:21:11,740 --> 00:21:15,470 henhold Elements, nøyaktig samme innhold, men de har rykket inn alt, 468 00:21:15,470 --> 00:21:18,140 de har fargelegges det, men Det er nøyaktig samme tekst 469 00:21:18,140 --> 00:21:19,620 som jeg lastet ned fra serveren. 470 00:21:19,620 --> 00:21:23,630 >> Og hva er fint nå er at jeg kan se i kroppen, for instance-- varsel, 471 00:21:23,630 --> 00:21:26,480 siden er fortsatt sammensatt for bare et hode og en kropp, 472 00:21:26,480 --> 00:21:28,660 og jeg kan hierarkisk dykke her. 473 00:21:28,660 --> 00:21:32,420 Legg merke til at Google ser ut til å ha å divs-- denne og denne. 474 00:21:32,420 --> 00:21:33,310 Jeg kan utvide den. 475 00:21:33,310 --> 00:21:35,370 Det er en hel haug med andre divs. 476 00:21:35,370 --> 00:21:36,900 Så det er litt komplisert. 477 00:21:36,900 --> 00:21:37,400 Men vent. 478 00:21:37,400 --> 00:21:40,970 Dette virker så mye mer lesbar, relativt, enn dette. 479 00:21:40,970 --> 00:21:43,840 Hvorfor er Google pinlig selv bare ved å sende 480 00:21:43,840 --> 00:21:50,400 denne enorme rotet med kode av noe liksom bare for å gjennomføre noe 481 00:21:50,400 --> 00:21:53,640 som ser så enkelt ved første øyekast? 482 00:21:53,640 --> 00:21:55,270 Liker, hvorfor ikke de legge til flere områder? 483 00:21:55,270 --> 00:21:56,811 Hvorfor gjorde de ikke trykk Enter som jeg gjorde? 484 00:21:56,811 --> 00:21:59,110 Se hvor god jeg var på å skrive en nettside. 485 00:21:59,110 --> 00:22:00,680 Jeg trykker Enter så flittig. 486 00:22:00,680 --> 00:22:03,760 Jeg rykket så alt er så pen og lesbar. 487 00:22:03,760 --> 00:22:08,463 Hvorfor ikke Google praktiserer det samme? 488 00:22:08,463 --> 00:22:11,409 >> PUBLIKUM: [uhørlig] 489 00:22:11,409 --> 00:22:12,305 490 00:22:12,305 --> 00:22:13,180 DAVID J. MALAN: Good. 491 00:22:13,180 --> 00:22:14,270 Veldig rettferdig. 492 00:22:14,270 --> 00:22:16,650 De har ikke noen person på Google manuelt 493 00:22:16,650 --> 00:22:18,160 oppdatere hjemmesiden lenger. 494 00:22:18,160 --> 00:22:20,010 Det er ikke 1999 lenger. 495 00:22:20,010 --> 00:22:21,140 Så de har programvare. 496 00:22:21,140 --> 00:22:25,397 De har andre verktøy som generere dynamisk de er HTML. 497 00:22:25,397 --> 00:22:27,480 Selvsagt at koden selv ble skrevet av mennesker, 498 00:22:27,480 --> 00:22:30,220 men realiteten er, det er ganske rimelig å si, 499 00:22:30,220 --> 00:22:33,340 leseren absolutt ikke bryr seg hvor rotete koden er. 500 00:22:33,340 --> 00:22:35,940 Men det er en enda mer overbevisende teknisk årsak 501 00:22:35,940 --> 00:22:42,580 at Google distribuerer deres HTML kode i en slik slurvet, tilsynelatende 502 00:22:42,580 --> 00:22:48,350 overveldende måte alt pakket sammen med meget lite måte-- meget lite 503 00:22:48,350 --> 00:22:51,274 i veien for formatering som jeg gjorde. 504 00:22:51,274 --> 00:22:52,570 >> PUBLIKUM: [uhørlig] 505 00:22:52,570 --> 00:22:53,528 >> DAVID J. MALAN: Raskere? 506 00:22:53,528 --> 00:22:54,040 Hvorfor? 507 00:22:54,040 --> 00:22:55,680 Og hva sa du, Lydia? 508 00:22:55,680 --> 00:22:56,240 Raskere? 509 00:22:56,240 --> 00:22:57,281 Hvorfor raskere? 510 00:22:57,281 --> 00:22:58,156 PUBLIKUM: [uhørlig] 511 00:22:58,156 --> 00:23:00,522 512 00:23:00,522 --> 00:23:02,230 DAVID J. MALAN: Det er ingen plass til å lese. 513 00:23:02,230 --> 00:23:02,730 Yeah. 514 00:23:02,730 --> 00:23:04,560 Så tenk på hva en plass. 515 00:23:04,560 --> 00:23:08,394 Så hvert tegn på tastaturet tar noen mengde plass til å representere, 516 00:23:08,394 --> 00:23:10,560 enten fysisk, liker det tar opp så mye plass, 517 00:23:10,560 --> 00:23:13,250 eller annen måte under hette, som krever minne. 518 00:23:13,250 --> 00:23:15,740 Og som en aside-- og vi vil snakke mer om dette tomorrow-- 519 00:23:15,740 --> 00:23:19,930 hvert tegn på tastaturet vanligvis krever 8 biter, eller en byte. 520 00:23:19,930 --> 00:23:23,360 Så et mønster av 8 nuller eller seg, eller bare en byte, som vi 521 00:23:23,360 --> 00:23:24,720 mennesker vanligvis ville si. 522 00:23:24,720 --> 00:23:27,690 Så det er liten, men det er fortsatt ikke er null. 523 00:23:27,690 --> 00:23:29,940 Det er fortsatt en viss mengde plass. 524 00:23:29,940 --> 00:23:36,082 Så hvis en ingeniør eller Google treffer space bare én gang, og antar 525 00:23:36,082 --> 00:23:38,540 Google-- det er super-popular-- anta at en milliard mennesker 526 00:23:38,540 --> 00:23:40,780 besøke deres hjemmeside en dag, eller et antall personer 527 00:23:40,780 --> 00:23:43,290 besøke hjemmesiden en milliard ganger om dagen, 528 00:23:43,290 --> 00:23:48,890 hvor mange flere byte har som programvare ingeniør bare koste Google 529 00:23:48,890 --> 00:23:51,310 ved å treffe sin mellomromstasten en gang? 530 00:23:51,310 --> 00:23:52,692 >> PUBLIKUM: [uhørlig] 531 00:23:52,692 --> 00:23:54,150 DAVID J. MALAN: Ikke fullt så ille. 532 00:23:54,150 --> 00:23:57,070 Bare én byte ganger en milliard. 533 00:23:57,070 --> 00:23:57,871 så a-- 534 00:23:57,871 --> 00:23:59,120 PUBLIKUM: 8 milliarder gigabyte. 535 00:23:59,120 --> 00:24:00,370 DAVID J. MALAN: Ikke 8000000000. 536 00:24:00,370 --> 00:24:01,240 8 milliarder bytes. 537 00:24:01,240 --> 00:24:02,410 Men en gigabyte. 538 00:24:02,410 --> 00:24:04,080 1 gigabyte vil være måleenheten. 539 00:24:04,080 --> 00:24:08,240 Hvis han eller hun gjør to mellomrom, 2 gigabyte. 540 00:24:08,240 --> 00:24:09,030 Tre gigabyte. 541 00:24:09,030 --> 00:24:09,530 Høyre? 542 00:24:09,530 --> 00:24:11,860 Det skalerer ligere. 543 00:24:11,860 --> 00:24:16,150 Og så i tilfeller som Google, som, gitt, er ekstreme tilfeller, 544 00:24:16,150 --> 00:24:21,450 det er andre problemer som oppstår bare ved å gjøre svært fornuftige beslutninger 545 00:24:21,450 --> 00:24:25,744 eller tar svært enkle menneskelige handlinger, fordi det har denne forstørret effekt. 546 00:24:25,744 --> 00:24:27,660 Slik at en av grunnene Dette ser så komprimert 547 00:24:27,660 --> 00:24:30,660 er akkurat som Victoria said-- det var bare generert av datamaskiner uansett. 548 00:24:30,660 --> 00:24:31,900 Så ingen big deal. 549 00:24:31,900 --> 00:24:33,309 La leseren finne ut av det. 550 00:24:33,309 --> 00:24:35,350 Men det også bevisst har ikke mye plass, 551 00:24:35,350 --> 00:24:36,766 fordi plassen er ikke nødvendig. 552 00:24:36,766 --> 00:24:38,250 Og plassen faktisk koster penger. 553 00:24:38,250 --> 00:24:40,670 >> Det enten koster tid, fordi bare for å presse 554 00:24:40,670 --> 00:24:44,670 at mye mer data ut av google.com hovedkvarter bare 555 00:24:44,670 --> 00:24:47,710 har fått til å ta en viss mengde tid, selv om det er millisekunder 556 00:24:47,710 --> 00:24:51,190 eller mikrosekunder, men som legger opp i løpet av så mange brukere, eller mer sannsynlig, 557 00:24:51,190 --> 00:24:52,270 det koster sannsynligvis penger. 558 00:24:52,270 --> 00:24:54,690 Google kobler sannsynligvis til noen andre i verden, en 559 00:24:54,690 --> 00:24:56,398 av dem peering punkter, og hvis de har 560 00:24:56,398 --> 00:24:59,880 noen form for økonomisk sammenheng hvorved sine data koster penger, 561 00:24:59,880 --> 00:25:01,730 de kan like godt minimere hvor mye data 562 00:25:01,730 --> 00:25:04,530 de spytter ut Internett-tilkoblingen. 563 00:25:04,530 --> 00:25:07,630 >> Så det morsomme, men til syvende og sist eller kanskje betryggende ting, 564 00:25:07,630 --> 00:25:11,030 er at selv om dette ser fryktelig overveldende, på slutten av dagen, 565 00:25:11,030 --> 00:25:16,750 det er fortsatt de samme prinsippene som dette veldig enkelt siden her av en HTML 566 00:25:16,750 --> 00:25:17,390 side. 567 00:25:17,390 --> 00:25:20,610 Så bare for å oppsummere og slik at du har en kanonisk versjon hvis du ikke var 568 00:25:20,610 --> 00:25:25,900 følge med ved valg her, her kan være den enkleste av nettsider, 569 00:25:25,900 --> 00:25:28,240 så noe å leke med kanskje senere. 570 00:25:28,240 --> 00:25:30,790 >> Vel, la oss innføre en par andre ideer nå. 571 00:25:30,790 --> 00:25:33,420 Vi er i ferd med å introdusere noe som kalles en stil tag. 572 00:25:33,420 --> 00:25:38,110 Vi kan stilisere denne siden i mer interessante måter. 573 00:25:38,110 --> 00:25:40,860 Så mens HTML e-post handler om merking opp 574 00:25:40,860 --> 00:25:44,470 dataene, liksom spesifisere til en leseren hvordan å strukturere dataene, 575 00:25:44,470 --> 00:25:48,110 hvor du skal plassere det, CSS, eller Cascading Style Sheets, 576 00:25:48,110 --> 00:25:52,640 er et andrespråk som generelt blir blandet med HTML 577 00:25:52,640 --> 00:25:55,670 som vi vil see-- men vi kan rense som opp i en moment-- som tar 578 00:25:55,670 --> 00:25:59,850 det siste mil, og det stylizes det. 579 00:25:59,850 --> 00:26:02,460 Det blir fargene helt rett, skriftstørrelser akkurat, 580 00:26:02,460 --> 00:26:03,860 posisjonering akkurat. 581 00:26:03,860 --> 00:26:06,510 Det handler om estetikk eller formatering, ikke om 582 00:26:06,510 --> 00:26:08,330 den grunnleggende data selv. 583 00:26:08,330 --> 00:26:11,390 Og den enkleste måten å vise Dette er kanskje ved eksempel. 584 00:26:11,390 --> 00:26:15,320 Så jeg kommer til å gå over til min enkel tekstfil. 585 00:26:15,320 --> 00:26:17,970 Og i et øyeblikk, vil jeg lede oss gjennom prosessen 586 00:26:17,970 --> 00:26:19,360 å gjøre dette selv. 587 00:26:19,360 --> 00:26:23,310 >> Jeg kommer til å gå tilbake til min fil her og oppdater siden bare 588 00:26:23,310 --> 00:26:25,800 for å bekrefte hvordan det ser ut. 589 00:26:25,800 --> 00:26:27,190 Det er der vi er nå. 590 00:26:27,190 --> 00:26:31,170 Jeg føler meg som barn ville nyte å ha litt farge på denne nettsiden. 591 00:26:31,170 --> 00:26:34,480 Så jeg kommer til å gå opp her inn i hodet på siden. 592 00:26:34,480 --> 00:26:38,130 Og jeg kommer til å gjøre stilen, / stil. 593 00:26:38,130 --> 00:26:44,060 Og så innsiden av dette, kommer jeg å fortelle kroppen min page-- 594 00:26:44,060 --> 00:26:46,870 og denne formateringen er, på første øyekast, kanskje litt 595 00:26:46,870 --> 00:26:49,400 merkelig, men konvensjonelle. 596 00:26:49,400 --> 00:26:55,010 Jeg kommer til å si at bakgrunnen fargen på denne siden skal være grønn. 597 00:26:55,010 --> 00:26:57,960 Og dette er dessverre liksom ikke den beste design. 598 00:26:57,960 --> 00:27:00,710 Legg merke til at tidligere i verden av HTML, 599 00:27:00,710 --> 00:27:03,190 Jeg sa at attributter er disse nøkkelverdi-par. 600 00:27:03,190 --> 00:27:05,760 Noe lik sitat unquote "noe". 601 00:27:05,760 --> 00:27:08,810 I en verden av CSS, som var designet av noen forskjellige mennesker, 602 00:27:08,810 --> 00:27:11,020 de bestemte seg for at i deres verden, nøkkelverdi-par 603 00:27:11,020 --> 00:27:13,920 ville være ordet kolon noe. 604 00:27:13,920 --> 00:27:15,220 Så det er den samme ideen, skjønt. 605 00:27:15,220 --> 00:27:18,620 Det å knytte en verdi med noen viktige som liksom 606 00:27:18,620 --> 00:27:20,330 påvirker oppførselen til denne siden. 607 00:27:20,330 --> 00:27:21,901 >> Og du kan sikkert gjette. 608 00:27:21,901 --> 00:27:24,150 Hva er dette trolig kommer å gjøre selv om du har aldri 609 00:27:24,150 --> 00:27:27,867 sett HTML eller CSS før? 610 00:27:27,867 --> 00:27:29,450 PUBLIKUM: Endre bakgrunnsfargen. 611 00:27:29,450 --> 00:27:30,560 DAVID J. MALAN: Ja, endre bakgrunnsfargen. 612 00:27:30,560 --> 00:27:33,280 Og spesielt bakgrunnsfarge på kroppen. 613 00:27:33,280 --> 00:27:36,290 Men i den grad det kroppen for nå er nettet 614 00:27:36,290 --> 00:27:38,870 page-- det er den eneste under tittellinjen really-- 615 00:27:38,870 --> 00:27:40,870 det er trolig kommer til å påvirker det samme. 616 00:27:40,870 --> 00:27:41,430 Så la oss se. 617 00:27:41,430 --> 00:27:42,490 La oss lagre dette. 618 00:27:42,490 --> 00:27:44,310 Gå hit og lesse. 619 00:27:44,310 --> 00:27:46,140 Det er ganske heslig. 620 00:27:46,140 --> 00:27:48,070 Og hva som skjer her er en bivirkning. 621 00:27:48,070 --> 00:27:49,850 Jeg valgte nettopp dette bildet tilfeldig. 622 00:27:49,850 --> 00:27:53,305 Hvorfor er det grønne ikke gjennomtrengende bak Mickey? 623 00:27:53,305 --> 00:27:54,180 PUBLIKUM: [uhørlig] 624 00:27:54,180 --> 00:27:56,880 625 00:27:56,880 --> 00:27:57,880 DAVID J. MALAN: Nettopp. 626 00:27:57,880 --> 00:28:01,750 Det viser seg at bilder, pen mye alle bilder som vi kan bruke, 627 00:28:01,750 --> 00:28:03,670 er alle rectangles-- av rektangler. 628 00:28:03,670 --> 00:28:07,710 Selv om Mickey har noen kurver til seg selv og har en bakgrunn, 629 00:28:07,710 --> 00:28:09,330 som bakgrunn må være noe. 630 00:28:09,330 --> 00:28:10,280 Det må være hvit. 631 00:28:10,280 --> 00:28:11,910 Det må være svart eller noe annet. 632 00:28:11,910 --> 00:28:13,650 Det kan være gjennomsiktig. 633 00:28:13,650 --> 00:28:16,100 Og faktisk, jeg kunne åpne Mikke Mus her 634 00:28:16,100 --> 00:28:18,590 i et program som heter Photoshop eller noe lignende 635 00:28:18,590 --> 00:28:21,176 og endre alle som hvit Bakgrunnen for gjennomsiktig, 636 00:28:21,176 --> 00:28:22,550 så den grønne ville skinne gjennom. 637 00:28:22,550 --> 00:28:25,980 Men det er noe jeg trenger å be for meg selv eller en grafiker 638 00:28:25,980 --> 00:28:28,130 eller en designer på min selskap, for eksempel, 639 00:28:28,130 --> 00:28:31,490 å gjøre, spesielt siden jeg bare lånt denne fra internett. 640 00:28:31,490 --> 00:28:33,030 Men det er hvorfor dette skjer. 641 00:28:33,030 --> 00:28:34,980 >> Så hva annet kan vi ønsker å gjøre? 642 00:28:34,980 --> 00:28:41,040 Vel, vi vil kanskje si at vi håper virkelig du trives. 643 00:28:41,040 --> 00:28:44,150 Og for å understreke, jeg vil ha for å gjøre denne sterke, 644 00:28:44,150 --> 00:28:48,310 og så jeg vil si åpent sterk og lukke sterk og legg. 645 00:28:48,310 --> 00:28:50,320 Og det er litt vanskelig å se på projektoren 646 00:28:50,320 --> 00:28:53,250 men kanskje egentlig nå hopper ut på deg litt mer. 647 00:28:53,250 --> 00:28:56,180 Så du kan legge kursiv i denne måte, fet vendt på denne måten. 648 00:28:56,180 --> 00:28:57,500 Vi kunne endre fargene. 649 00:28:57,500 --> 00:29:01,610 Faktisk, bare for moro skyld, jeg er kommer til å gå videre og gjøre dette. 650 00:29:01,610 --> 00:29:05,120 Jeg vet egentlig ikke hvordan min avsnitt er så tett sammen, 651 00:29:05,120 --> 00:29:06,870 så jeg kan gjøre noe som dette. 652 00:29:06,870 --> 00:29:13,310 Jeg kommer til å fortelle leseren, endre alle ledd tag å ha, 653 00:29:13,310 --> 00:29:16,952 la oss say-- faktisk, vet du hva, la oss justere den text-align, senter. 654 00:29:16,952 --> 00:29:19,410 Og igjen, jeg vet at dette bare fordi noen lært det til meg 655 00:29:19,410 --> 00:29:21,118 eller jeg kikket opp i en online referanse. 656 00:29:21,118 --> 00:29:22,450 Så la meg lagre dette. 657 00:29:22,450 --> 00:29:25,070 Og, ah, nå har jeg sentrert på bildet der. 658 00:29:25,070 --> 00:29:28,490 Og faktisk, vet du hva, hvis Jeg flytter mitt bilde i et avsnitt 659 00:29:28,490 --> 00:29:34,510 tag-- så en tredje ledd, selv om det ikke er tekst. 660 00:29:34,510 --> 00:29:36,917 La oss lagre det og laste. 661 00:29:36,917 --> 00:29:40,000 Nå siden begynner å se hva slags of-- Jeg mener, det er fortsatt ganske stygg, 662 00:29:40,000 --> 00:29:43,180 men minst ser det ut som jeg har brukt to minutter i stedet for ett minutt 663 00:29:43,180 --> 00:29:43,950 gjør det. 664 00:29:43,950 --> 00:29:47,200 >> Og så, gradvis, kan vi gjøre disse estetiske endringer nå på siden? 665 00:29:47,200 --> 00:29:50,860 Jeg har egentlig ikke endret data i side annet enn å legge ordet egentlig. 666 00:29:50,860 --> 00:29:52,650 Jeg har lagt til metadata, hvis du vil. 667 00:29:52,650 --> 00:29:54,830 Hei, nettleser, gjør Ordet "virkelig" fet. 668 00:29:54,830 --> 00:29:56,940 Men dataene ikke er sterk. 669 00:29:56,940 --> 00:29:57,830 Det er metadata. 670 00:29:57,830 --> 00:29:59,410 Dataene er "virkelig". 671 00:29:59,410 --> 00:30:02,200 Så vi har fortsatt noen av de samme begrepene som før. 672 00:30:02,200 --> 00:30:05,990 Nå, selvfølgelig, er dette ikke på nettet, så jeg kommer til å gjøre en siste trinnet her. 673 00:30:05,990 --> 00:30:10,300 >> Jeg kommer til å gå til hello.html og bare markere og kopiere dette. 674 00:30:10,300 --> 00:30:12,285 Og nå skal jeg gå inn Cloud9, som 675 00:30:12,285 --> 00:30:13,910 Jeg vil gå gjennom i løpet av et øyeblikk. 676 00:30:13,910 --> 00:30:17,080 Og oddsen er vil du snart være, hvis ikke allerede, på en skjerm som dette. 677 00:30:17,080 --> 00:30:21,080 Og la meg bare gi deg en rask gjennomgang av hva Cloud9 faktisk er. 678 00:30:21,080 --> 00:30:26,590 Så igjen Cloud 9 er Dette skybasert tjeneste 679 00:30:26,590 --> 00:30:30,580 som gir deg og meg illusjonen av å ha vår egen virtuell maskin 680 00:30:30,580 --> 00:30:33,090 i skyen, teknisk en container i skyen, 681 00:30:33,090 --> 00:30:35,160 at vi har full administrative rettigheter til. 682 00:30:35,160 --> 00:30:37,130 Så i teorien, ingen ellers i verden har 683 00:30:37,130 --> 00:30:39,152 tilgang til skjermen jeg er ser på akkurat nå, 684 00:30:39,152 --> 00:30:40,860 bortsett fra kanskje folk som driver nettstedet, 685 00:30:40,860 --> 00:30:43,470 fordi teknisk de har fysisk tilgang og så videre. 686 00:30:43,470 --> 00:30:44,740 >> Så hva ser vi i dette miljøet? 687 00:30:44,740 --> 00:30:46,230 Jeg kommer til å zoome ut, fordi det er litt lite. 688 00:30:46,230 --> 00:30:48,104 Og la meg peke løpet her for bare et øyeblikk. 689 00:30:48,104 --> 00:30:53,210 På venstre side av min og din skjermen, det er en fil nettleser til venstre. 690 00:30:53,210 --> 00:30:55,362 Så like i ånden til Mac OS og Windows. 691 00:30:55,362 --> 00:30:57,070 Disse er alle av filer i min konto. 692 00:30:57,070 --> 00:30:59,250 Og som standard, hvis din konto er som min, 693 00:30:59,250 --> 00:31:05,090 du vil se eller snart se helloworld.html og readme.md. 694 00:31:05,090 --> 00:31:07,950 Over her til høyre, er dette hvor mine tekstfiler kommer til å gå. 695 00:31:07,950 --> 00:31:11,620 Hvis du noen gang har brukt Microsoft Word eller Notepad eller TextEdit, 696 00:31:11,620 --> 00:31:14,100 Dette er ordet mitt redigering filer kommer til å gå. 697 00:31:14,100 --> 00:31:16,540 Og så er det mest uforståelige funksjon i dette miljøet 698 00:31:16,540 --> 00:31:20,100 at vi ikke egentlig trenger å bruke er ned her kalles et terminalvindu. 699 00:31:20,100 --> 00:31:23,390 Hvis du har brukt DOS fra yesteryear, dette er Linux 700 00:31:23,390 --> 00:31:25,450 eller Linux tilsvarer DOS. 701 00:31:25,450 --> 00:31:28,190 Det er et tekstbasert interface-- ingen museklikk, uten å dra. 702 00:31:28,190 --> 00:31:30,770 Alt du kan gjøre er å skrive kommandoer, men disse kommandoene 703 00:31:30,770 --> 00:31:34,400 kan opprette filer, flytte filer, åpne kataloger, nær kataloger, 704 00:31:34,400 --> 00:31:35,740 gjøre en rekke ting. 705 00:31:35,740 --> 00:31:38,060 Men for nå, vil vi bare bruke vår tid her oppe. 706 00:31:38,060 --> 00:31:39,050 >> Og så la oss gjøre dette. 707 00:31:39,050 --> 00:31:41,008 Hvis du er i denne miljø, som du bør 708 00:31:41,008 --> 00:31:45,900 være hvis du opprettet et arbeidsområde allerede, gå videre og bare gå opp 709 00:31:45,900 --> 00:31:48,690 til fil, New for et øyeblikk. 710 00:31:48,690 --> 00:31:51,740 Og som vil gi deg en ny Kategorien her i midten. 711 00:31:51,740 --> 00:31:54,250 Og jeg just-- og la oss gå videre og gjøre dette. 712 00:31:54,250 --> 00:31:59,910 La oss gå videre og nå trenger Fil, Lagre og gå videre og kaller det hello.html, 713 00:31:59,910 --> 00:32:02,740 må ikke forveksles med helloworld.html, som 714 00:32:02,740 --> 00:32:06,910 kom med den nye gratis konto, som er bare et utvalg fil. 715 00:32:06,910 --> 00:32:11,020 Du vil se det plutselig dukke opp, mest sannsynlig på venstre side, 716 00:32:11,020 --> 00:32:12,810 og kategorien vil fortsatt være åpen. 717 00:32:12,810 --> 00:32:21,300 Og la meg oppfordrer deg nå til å gjenskape denne filen eller noen varianter av disse. 718 00:32:21,300 --> 00:32:24,607 Og hvis du kan ikke helt se det på skjerm, er denne identisk med skinnene 719 00:32:24,607 --> 00:32:26,190 at du sannsynligvis har i en annen fane. 720 00:32:26,190 --> 00:32:29,296 >> Så kort sagt, gjør ditt første web side, lagre den, og deretter i et øyeblikk, 721 00:32:29,296 --> 00:32:31,170 Jeg skal vise deg hvordan du faktisk kan se dette. 722 00:32:31,170 --> 00:32:32,970 Men endre minst én ting. 723 00:32:32,970 --> 00:32:35,400 Endre Helloworld til noe av ditt eget valg, 724 00:32:35,400 --> 00:32:39,821 slik at du er overbevist om at det er din fil og ikke den jeg nettopp laget. 725 00:32:39,821 --> 00:32:40,320 Greit. 726 00:32:40,320 --> 00:32:43,804 Og når du er ready-- no rush-- når du er klar, 727 00:32:43,804 --> 00:32:46,220 gå videre og lagre filen når du har gjort disse endringene. 728 00:32:46,220 --> 00:32:49,540 Og hvis du klikker på Kjør knappen opp toppen, dette 729 00:32:49,540 --> 00:32:53,610 bør åpne en ny fane som vil fortelle du hva URL du kan besøke filen på, 730 00:32:53,610 --> 00:32:56,380 men det kan ta en stund å quote unquote "start Apache", som 731 00:32:56,380 --> 00:32:58,820 er navnet på webserveren. 732 00:32:58,820 --> 00:33:02,430 Så vær forsiktig med å gjøre akkurat hva som er i filen slutt. 733 00:33:02,430 --> 00:33:04,610 Så akkurat nå, vil jeg zoome inn. 734 00:33:04,610 --> 00:33:07,780 Hvis jeg begynner å skrive åpen brakett HTML, varsel 735 00:33:07,780 --> 00:33:09,650 det er å spørre meg å fullføre min tanke. 736 00:33:09,650 --> 00:33:13,750 Og hvis jeg ferdig med min tanke, det gir meg automatisk den avsluttende koden. 737 00:33:13,750 --> 00:33:17,190 Men forventningen så skal jeg treffe Enter, og deretter flytte inn der 738 00:33:17,190 --> 00:33:21,180 og har hodet inni og så gjør jeg kroppen innvendig. 739 00:33:21,180 --> 00:33:24,430 Og det er litt rart i begynnelsen, fordi det gjør jobben for deg, 740 00:33:24,430 --> 00:33:27,110 men innser at til syvende og sist det sparer deg for tastetrykk. 741 00:33:27,110 --> 00:33:30,500 Og i virkeligheten en meget vanlig funksjon av programmering miljøer i disse dager 742 00:33:30,500 --> 00:33:33,260 både for webutvikling som dette og selve programmeringen, 743 00:33:33,260 --> 00:33:36,960 som vi skal snakke om i morgen, er disse auto-fullføre funksjoner, 744 00:33:36,960 --> 00:33:39,710 ting som bare tillater en programmerer eller en designer 745 00:33:39,710 --> 00:33:42,010 å skrive færre tastetrykk til oppnå det samme. 746 00:33:42,010 --> 00:33:43,176 Noen ganger er det bra, skjønt. 747 00:33:43,176 --> 00:33:44,560 Noen ganger er det bare irriterende. 748 00:33:44,560 --> 00:33:49,290 749 00:33:49,290 --> 00:33:54,010 Og igjen, når du har transkribert lysbildet eller annen variant av denne, 750 00:33:54,010 --> 00:33:57,360 du kan klikke på knappen Kjør opp toppen. 751 00:33:57,360 --> 00:33:59,910 Og deretter i den nederste vindu, vil du bli informert 752 00:33:59,910 --> 00:34:04,290 hva URL kan du besøke nettsiden din. 753 00:34:04,290 --> 00:34:08,790 Mine, for eksempel, er på business-daharvard.c9users.io 754 00:34:08,790 --> 00:34:11,480 og så videre. 755 00:34:11,480 --> 00:34:14,580 Greit, så, la me-- noen spørsmål? 756 00:34:14,580 --> 00:34:19,460 Eventuelle andre spørsmål om bare å få dette arbeidet før vi legge til funksjoner? 757 00:34:19,460 --> 00:34:21,692 Og la meg foreslå, bare å få folk komfortabel-- 758 00:34:21,692 --> 00:34:24,400 fordi det er en ting å bare copy-paste blindt hva jeg har gjort. 759 00:34:24,400 --> 00:34:27,177 Men bare slik at folk kjempe med minst en to-do, 760 00:34:27,177 --> 00:34:28,510 Jeg kommer til å slå på litt musikk. 761 00:34:28,510 --> 00:34:32,630 Jeg kommer til å foreslå en liste over ting du potensielt kan legge. 762 00:34:32,630 --> 00:34:34,086 Og du kan sikkert bruke Google. 763 00:34:34,086 --> 00:34:36,210 Og hvorfor gjør vi ikke bare foreslår at du prøver å løse 764 00:34:36,210 --> 00:34:38,710 i det minste ett bestemt problem her. 765 00:34:38,710 --> 00:34:45,090 Så i form av koder, la meg bruke dette her. 766 00:34:45,090 --> 00:34:48,280 >> Egentlig, la meg sette det i en tekstlig form. 767 00:34:48,280 --> 00:35:02,380 La oss si at blant de kodene vi kan bruke her er noen tags over her. 768 00:35:02,380 --> 00:35:06,090 Vi har sett avsnittet tag. 769 00:35:06,090 --> 00:35:07,850 Nå kommer det til å auto-fullføre. 770 00:35:07,850 --> 00:35:12,220 Avsnitt tag, ankerkoden. 771 00:35:12,220 --> 00:35:15,250 La oss si at du ønsker å gjøre noe større, 772 00:35:15,250 --> 00:35:19,480 slik at du kan like-- span tag kan hjelpe. 773 00:35:19,480 --> 00:35:23,010 Vel, kanskje du trenger litt hjelp for at det i bare et øyeblikk. 774 00:35:23,010 --> 00:35:24,830 Vi har sett div. 775 00:35:24,830 --> 00:35:26,170 Du vil se det er tabellen. 776 00:35:26,170 --> 00:35:27,928 Det noe som heter st, td. 777 00:35:27,928 --> 00:35:30,736 778 00:35:30,736 --> 00:35:32,860 Th, td. 779 00:35:32,860 --> 00:35:34,770 Kom tilbake til det i et øyeblikk. 780 00:35:34,770 --> 00:35:36,590 Hva annet kan være nyttig? 781 00:35:36,590 --> 00:35:38,310 Det er sterk. 782 00:35:38,310 --> 00:35:43,640 Det er lagt vekt, eller snarere em. 783 00:35:43,640 --> 00:35:50,110 There's-- hva annet kanskje du har lyst på her? 784 00:35:50,110 --> 00:35:51,930 Vel, vi tar en se på det sammen. 785 00:35:51,930 --> 00:35:53,230 Form, som vi har sett. 786 00:35:53,230 --> 00:35:54,130 Det er form. 787 00:35:54,130 --> 00:35:56,500 Det er inngang og noen få andre. 788 00:35:56,500 --> 00:35:58,924 789 00:35:58,924 --> 00:36:00,090 Greit, så la oss gjøre dette. 790 00:36:00,090 --> 00:36:02,330 For å svare på en Victorias spørsmålet, la meg først 791 00:36:02,330 --> 00:36:05,020 bare sørg for at alle er i stand til å få sin hallo arbeider. 792 00:36:05,020 --> 00:36:06,900 Så la meg presentere et par andre ideer. 793 00:36:06,900 --> 00:36:09,209 Så får vi la folk løse noen problem på egenhånd. 794 00:36:09,209 --> 00:36:11,500 Så får vi faktisk kommer tilbake til at oppfatningen av en form, 795 00:36:11,500 --> 00:36:14,950 og vi vil faktisk re-implementere sammen front-end grensesnitt, 796 00:36:14,950 --> 00:36:16,450 så å si, for Google selv. 797 00:36:16,450 --> 00:36:19,700 Vi kommer til å bruke Google som bakenden og la dem gjøre det harde arbeidet, søking, 798 00:36:19,700 --> 00:36:22,760 men vi vil gjenskape fronten Google og søkeskjemaet 799 00:36:22,760 --> 00:36:24,520 som de har på sin egen hjemmeside. 800 00:36:24,520 --> 00:36:27,050 Og så vil vi komme tilbake til disse kodene i bare et øyeblikk. 801 00:36:27,050 --> 00:36:30,270 >> Så dette var det jeg foreslått bare et øyeblikk siden. 802 00:36:30,270 --> 00:36:33,940 Vi kan legge til stilisering til en side inne i denne stilen tag, 803 00:36:33,940 --> 00:36:36,950 og vi kan stylize bakgrunnen farge, tekstjustering, 804 00:36:36,950 --> 00:36:39,000 enten det er sentrum eller til venstre eller høyre. 805 00:36:39,000 --> 00:36:41,630 Men svært raskt du ville finne eller en webdesigner 806 00:36:41,630 --> 00:36:44,060 vil finne at denne blir litt uhåndterlig, 807 00:36:44,060 --> 00:36:48,330 fordi du gjør det som er kalt blande innhold 808 00:36:48,330 --> 00:36:50,120 med presentasjon av disse. 809 00:36:50,120 --> 00:36:53,756 Du blande din data og estetikk av disse. 810 00:36:53,756 --> 00:36:56,380 Og faktisk, hvis du anser hva kommer til å skje over tid-- 811 00:36:56,380 --> 00:36:58,350 dette er en veldig liten nettside, selvfølgelig. 812 00:36:58,350 --> 00:37:01,590 Men hvis jeg legger innhold til denne siden og jeg legge stil til denne siden 813 00:37:01,590 --> 00:37:04,650 siden blir veldig fort lengre og lengre og lengre. 814 00:37:04,650 --> 00:37:07,510 Og antar at jeg vil ha har en annen nettside som 815 00:37:07,510 --> 00:37:09,010 deler noen av disse egenskapene. 816 00:37:09,010 --> 00:37:12,350 Anta at min andre nettside for min site-- også, jeg vil ha alt sentrum, 817 00:37:12,350 --> 00:37:14,960 og jeg ønsker også alt med en grønn bakgrunn. 818 00:37:14,960 --> 00:37:17,940 Jeg er ganske mye nødt til å kopiere og lime inn noen av disse linjene 819 00:37:17,940 --> 00:37:20,730 inn i den andre fil, som føles bra. 820 00:37:20,730 --> 00:37:22,030 Det vil løse problemet. 821 00:37:22,030 --> 00:37:26,060 >> Men hva om jeg vil ha en tredje siden eller en 30 side eller en 40-side? 822 00:37:26,060 --> 00:37:28,730 Nå kommer jeg til å bli kopiert og lime mye likt kode 823 00:37:28,730 --> 00:37:30,430 i flere filer. 824 00:37:30,430 --> 00:37:32,600 Og så anta at Jeg bestemmer meg eller jeg er blitt fortalt, 825 00:37:32,600 --> 00:37:34,780 hei, vi bruker ikke en grønn bakgrunn lenger. 826 00:37:34,780 --> 00:37:36,380 Vi kommer til å begynne å bruke oransje. 827 00:37:36,380 --> 00:37:38,690 Hva har du å endre? 828 00:37:38,690 --> 00:37:42,900 Vel, må du endre stilen fra grønt til oransje i hvor mange steder? 829 00:37:42,900 --> 00:37:44,920 Som 30 eller 40 plasser. 830 00:37:44,920 --> 00:37:45,900 Det er kjedelig. 831 00:37:45,900 --> 00:37:47,039 Det er utsatt for feil. 832 00:37:47,039 --> 00:37:49,580 Det er en rekke årsaker der du ikke ønsker å indusere 833 00:37:49,580 --> 00:37:51,840 den slags smerte for deg selv. 834 00:37:51,840 --> 00:37:54,760 Og så ville det ikke vært fint om vi kunne ta det jeg nettopp 835 00:37:54,760 --> 00:37:58,240 satt mellom disse to gule koder, disse stil koder, 836 00:37:58,240 --> 00:38:04,050 faktor det ut, og sette alle mine stilisering i en sentral fil 837 00:38:04,050 --> 00:38:08,470 at alle 30 eller 40 av mine andre filer låne fra eller annen referanse, 838 00:38:08,470 --> 00:38:11,640 ikke ulikt nettverk diagrammer vi gjorde før? 839 00:38:11,640 --> 00:38:15,030 >> Så hvis jeg går inn her, jeg kommer til å faktisk foreslå 840 00:38:15,030 --> 00:38:17,880 at vi erstatter stil tag med noe 841 00:38:17,880 --> 00:38:21,620 kalt link tag, som er forferdelig, forferdelig navngitt, 842 00:38:21,620 --> 00:38:24,370 fordi du ikke bruker link tag for å skape det 843 00:38:24,370 --> 00:38:26,380 vi mennesker kjenner som en link i en nettside. 844 00:38:26,380 --> 00:38:29,750 For det, kan du bruke hvilken tag? 845 00:38:29,750 --> 00:38:31,464 Hvordan skaper du en link i en nettside? 846 00:38:31,464 --> 00:38:32,130 PUBLIKUM: The en. 847 00:38:32,130 --> 00:38:34,870 DAVID J. MALAN: The en eller anker tag, som gikk til Disney før. 848 00:38:34,870 --> 00:38:39,090 Koblingen tag her sier dette-- lenke til en fil som heter 849 00:38:39,090 --> 00:38:44,350 styles.css, forholdet til hvilken kommer til å være at det er min stilark. 850 00:38:44,350 --> 00:38:48,290 Så dette er en av de S 'i CSS-- Cascading Style Sheets. 851 00:38:48,290 --> 00:38:50,490 Stil sheet-- to av S 'i CSS. 852 00:38:50,490 --> 00:38:52,550 Cascading Style Sheet. 853 00:38:52,550 --> 00:38:58,640 Dette betyr bare, hei, nettleser, gå finne styles.css på den lokale serveren 854 00:38:58,640 --> 00:39:01,870 og bruke den som din stilark, som betyr innsiden av den filen 855 00:39:01,870 --> 00:39:05,310 kommer til å være hele stiliseringer som vi nettopp har gjort. 856 00:39:05,310 --> 00:39:07,396 Og så hva denne filen kan se ut som dette er. 857 00:39:07,396 --> 00:39:10,020 Og jeg vil bare gjøre dette på er en rask eksempel, fordi vi ikke trenger 858 00:39:10,020 --> 00:39:12,000 å få for mye inn i ugress her. 859 00:39:12,000 --> 00:39:17,840 Men hvis jeg kopierer dette, hva jeg foreslår er at en programmerer oppretter en ny fil, 860 00:39:17,840 --> 00:39:24,450 lim i disse lines-- whoops-- lim i disse linjene, 861 00:39:24,450 --> 00:39:32,270 lagre det som styles.css, og deretter, i den andre filen, slette alt dette 862 00:39:32,270 --> 00:39:35,450 og erstatte den i stedet med denne link tag. 863 00:39:35,450 --> 00:39:43,090 Slik at hvis jeg knytter href = "styles.css", forholdet skal være "stylesheet" 864 00:39:43,090 --> 00:39:44,170 sluttkode. 865 00:39:44,170 --> 00:39:45,250 Lagre det. 866 00:39:45,250 --> 00:39:47,000 Gå tilbake til min Helloworld. 867 00:39:47,000 --> 00:39:48,690 Last. 868 00:39:48,690 --> 00:39:51,290 >> Bokstavelig talt ingenting har skjedd. 869 00:39:51,290 --> 00:39:54,710 Det er en god ting, fordi det betyr at det er faktisk alt fungerer. 870 00:39:54,710 --> 00:39:58,860 For å bevise så mye, antar jeg lage en skrivefeil, og jeg kaller dette "Styles.css" 871 00:39:58,860 --> 00:40:03,080 med en stor S, som er feil, og legg. 872 00:40:03,080 --> 00:40:05,470 Nå kan du se det fungerer bare ikke. 873 00:40:05,470 --> 00:40:06,362 Nå, hvorfor? 874 00:40:06,362 --> 00:40:08,070 Vel, la oss bruke en teknikk fra tidligere. 875 00:40:08,070 --> 00:40:10,153 La meg gå videre og, i nettleseren min, i Chrome, jeg 876 00:40:10,153 --> 00:40:12,900 kommer til å åpne opp den spesielle nettverk fanen som før, 877 00:40:12,900 --> 00:40:15,560 og la meg laste siden på nytt. 878 00:40:15,560 --> 00:40:19,341 Hva er du ikke overrasket over å se nå? 879 00:40:19,341 --> 00:40:20,840 Eller kanskje du er overrasket over å se den. 880 00:40:20,840 --> 00:40:23,225 Uansett, hva ser du nå? 881 00:40:23,225 --> 00:40:24,100 PUBLIKUM: [uhørlig] 882 00:40:24,100 --> 00:40:24,770 DAVID J. MALAN: Det er ikke funnet. 883 00:40:24,770 --> 00:40:25,680 Hvorfor er det ikke funnet? 884 00:40:25,680 --> 00:40:28,480 Vel, Styles.css-- kapital S- finnes ikke. 885 00:40:28,480 --> 00:40:29,230 Jeg misnamed det. 886 00:40:29,230 --> 00:40:30,430 Enkel skrivefeil. 887 00:40:30,430 --> 00:40:33,816 Men jeg får forståelig nok nå en 404, fordi serveren sier, hei, 888 00:40:33,816 --> 00:40:34,440 det er ikke funnet. 889 00:40:34,440 --> 00:40:36,300 Bokstavelig talt, jeg vet ikke hvor filen er. 890 00:40:36,300 --> 00:40:38,880 Så som et resultat av leseren viser deg hva det kan, 891 00:40:38,880 --> 00:40:42,860 rå innholdet på siden, som var en 200, HTML, 892 00:40:42,860 --> 00:40:45,390 men stilisering kan ikke legges deretter. 893 00:40:45,390 --> 00:40:47,120 Og dette er hva som menes med gjennomgripende. 894 00:40:47,120 --> 00:40:49,070 Du kan liksom legge den etter, og den slags 895 00:40:49,070 --> 00:40:50,874 foredler estetikk av websiden. 896 00:40:50,874 --> 00:40:53,790 Og du kan selv overstyre de stiler med ennå andre stilark filer 897 00:40:53,790 --> 00:40:54,700 hvis du vil. 898 00:40:54,700 --> 00:40:57,780 Det er ikke funnet, men i dette tilfellet fordi selvfølgelig, jeg misnamed det. 899 00:40:57,780 --> 00:41:00,330 Så jeg måtte fikse det først. 900 00:41:00,330 --> 00:41:04,667 >> Så la oss gå videre og foreslå følgende. 901 00:41:04,667 --> 00:41:07,410 902 00:41:07,410 --> 00:41:11,140 La oss gå videre og gjøre dette. 903 00:41:11,140 --> 00:41:14,220 Fra og med kanskje din Helloworld fil, 904 00:41:14,220 --> 00:41:17,740 la meg bare invitere et par av funksjonen forslag. 905 00:41:17,740 --> 00:41:20,400 Så, Victoria, ville at du skulle gjøre noen teksten større, ikke sant? 906 00:41:20,400 --> 00:41:24,555 Greit, så vi kan gjør teksten større. 907 00:41:24,555 --> 00:41:26,860 Og vi vil hver nappe ut bare ett problem å løse. 908 00:41:26,860 --> 00:41:30,867 Gjør teksten større. 909 00:41:30,867 --> 00:41:32,700 Jeg kommer ikke til å bry seg skriver dette når vi 910 00:41:32,700 --> 00:41:35,600 har bullet teknologi rett over her. 911 00:41:35,600 --> 00:41:39,970 Så noen problemer. 912 00:41:39,970 --> 00:41:44,670 Så vi kommer til å prøve for å gjøre teksten større. 913 00:41:44,670 --> 00:41:45,170 Greit. 914 00:41:45,170 --> 00:41:48,360 Hva annet ville noen foreslå? 915 00:41:48,360 --> 00:41:50,332 Hva annet kan vi ønsker å gjøre i en web-side? 916 00:41:50,332 --> 00:41:52,040 La oss komme opp med en kort liste over ting 917 00:41:52,040 --> 00:41:55,366 og deretter delegere til gruppe for å finne ut av dette. 918 00:41:55,366 --> 00:41:56,270 >> PUBLIKUM: [uhørlig] 919 00:41:56,270 --> 00:42:02,251 >> DAVID J. MALAN: OK, posisjon tekst på forskjellige sider av papiret? 920 00:42:02,251 --> 00:42:02,750 Greit. 921 00:42:02,750 --> 00:42:04,620 Noe annet. 922 00:42:04,620 --> 00:42:05,784 >> PUBLIKUM: [uhørlig] 923 00:42:05,784 --> 00:42:06,700 DAVID J. MALAN: Det er det. 924 00:42:06,700 --> 00:42:08,720 Så en gif er bare en annet filformat. 925 00:42:08,720 --> 00:42:12,830 Vi brukte bare, hva, en png eller jpg sannsynligvis? 926 00:42:12,830 --> 00:42:14,480 Vi brukte en jpg. 927 00:42:14,480 --> 00:42:16,780 Hvis du er nysgjerrig, en overdreven svare på spørsmålet ditt 928 00:42:16,780 --> 00:42:19,404 er en jpg brukes vanligvis for fotografier, fordi den støtter 929 00:42:19,404 --> 00:42:21,500 millioner av farger eller 24-bits farger. 930 00:42:21,500 --> 00:42:26,930 En gif er vanligvis brukt for, som, internett memes disse days-- animasjoner, 931 00:42:26,930 --> 00:42:28,810 som animerte GIF-filer. 932 00:42:28,810 --> 00:42:32,320 Men det skjer for å bruke en mindre farge palett, bare 256 mulige farger, 933 00:42:32,320 --> 00:42:35,230 men den støtter gjennomsiktighet og animasjon. 934 00:42:35,230 --> 00:42:40,330 Og så er det png, som støtter åpenhet og mer farger 935 00:42:40,330 --> 00:42:41,300 men ikke animasjon. 936 00:42:41,300 --> 00:42:42,133 Så det er en avveining. 937 00:42:42,133 --> 00:42:44,144 938 00:42:44,144 --> 00:42:46,060 Så legger en gif, skjønt, ville være funksjonelt 939 00:42:46,060 --> 00:42:48,396 tilsvarer å legge til en png eller jpg. 940 00:42:48,396 --> 00:42:49,110 Yeah. 941 00:42:49,110 --> 00:42:50,550 Bildekilde lik. 942 00:42:50,550 --> 00:42:51,590 Så noe annet. 943 00:42:51,590 --> 00:42:57,288 La oss komme opp med noe som vi sendte til Victoria for å gjøre her. 944 00:42:57,288 --> 00:42:59,209 >> PUBLIKUM: Legg til knapper for et skjema. 945 00:42:59,209 --> 00:43:00,000 DAVID J. MALAN: OK. 946 00:43:00,000 --> 00:43:02,179 Så legge til knapper for et skjema. 947 00:43:02,179 --> 00:43:03,470 Og vi vil gjøre at en sammen. 948 00:43:03,470 --> 00:43:07,220 Så det vil være en perfekt segue rett etter denne utfordringen. 949 00:43:07,220 --> 00:43:10,357 Alt annet? 950 00:43:10,357 --> 00:43:11,440 Hva kan du gjøre? 951 00:43:11,440 --> 00:43:14,040 952 00:43:14,040 --> 00:43:16,516 Nettet føles veldig uimponerende hvis dette er alt vi kan gjøre. 953 00:43:16,516 --> 00:43:18,140 PUBLIKUM: Endre fargen på teksten. 954 00:43:18,140 --> 00:43:19,500 DAVID J. MALAN: Endre hva? 955 00:43:19,500 --> 00:43:20,666 PUBLIKUM: Farge på teksten. 956 00:43:20,666 --> 00:43:22,311 DAVID J. MALAN: Endre farge på tekst. 957 00:43:22,311 --> 00:43:22,810 Greit. 958 00:43:22,810 --> 00:43:23,790 Så, la oss gjøre dette. 959 00:43:23,790 --> 00:43:27,209 Bare en gang slik at du ikke bare utenat, gjøre akkurat hva jeg gjør, 960 00:43:27,209 --> 00:43:29,500 Jeg kommer til å slå på musikk for kanskje fem minutter her. 961 00:43:29,500 --> 00:43:30,450 Du er velkommen til å bruke Google. 962 00:43:30,450 --> 00:43:33,130 Du er velkommen til å spørre meg, og Jeg skal hviske et hint i øret. 963 00:43:33,130 --> 00:43:35,171 Du er velkommen til å se over på andre skuldre. 964 00:43:35,171 --> 00:43:37,340 Men løse bare ett av disse problemene. 965 00:43:37,340 --> 00:43:40,190 Men vi vil gjøre det siste, danner en, hvis vi kunne, sammen. 966 00:43:40,190 --> 00:43:42,790 Så fem minutter for å løse hvilken som helst av disse problemene 967 00:43:42,790 --> 00:43:46,780 ved hjelp av Google, intuisjon, eller en hvilken som helst andre midler tilgjengelig for deg. 968 00:43:46,780 --> 00:43:48,630 >> [MUSIKK] 969 00:43:48,630 --> 00:43:49,130 Greit. 970 00:43:49,130 --> 00:43:50,838 Ingen grunn til bekymring dersom du ønsker å holde fiksing og triksing, 971 00:43:50,838 --> 00:43:53,880 men jeg vil ødelegge et par av disse svarene. 972 00:43:53,880 --> 00:43:57,986 Så det første forslaget fra Victoria var å gjøre teksten større. 973 00:43:57,986 --> 00:43:59,360 Så det er noen måter å gjøre dette. 974 00:43:59,360 --> 00:44:01,530 Jeg har for tiden restaurert min skjerm på denne størrelsen, 975 00:44:01,530 --> 00:44:04,310 selv om jeg har zoomet inn kunstig bare for å se ting. 976 00:44:04,310 --> 00:44:07,470 Og la oss gjøre dette. 977 00:44:07,470 --> 00:44:11,380 La meg gå videre og grip noen generiske latinske teksten 978 00:44:11,380 --> 00:44:19,540 bare så vi har noe å jobbe med. 979 00:44:19,540 --> 00:44:20,715 Så gi meg bare et øyeblikk. 980 00:44:20,715 --> 00:44:21,840 Jeg skal lage tre avsnitt. 981 00:44:21,840 --> 00:44:53,430 982 00:44:53,430 --> 00:44:53,930 OK. 983 00:44:53,930 --> 00:44:55,560 Dette vil være en bedre eksempel. 984 00:44:55,560 --> 00:44:57,840 Så for de nysgjerrige, i min hello.html, jeg bare 985 00:44:57,840 --> 00:45:01,645 limt tre nonsens Latin avsnitt 986 00:45:01,645 --> 00:45:03,270 bare så vi har litt tekst å jobbe med. 987 00:45:03,270 --> 00:45:06,720 Og Victoria mål var å gjøre noe av teksten større. 988 00:45:06,720 --> 00:45:09,879 Så jeg kunne, som før, gå inn her. 989 00:45:09,879 --> 00:45:11,170 Og la meg gjøre det på den riktige måten. 990 00:45:11,170 --> 00:45:13,253 Jeg kommer til å ha en link tag som peker til en fil 991 00:45:13,253 --> 00:45:20,560 kalt "styles.css," forholdet som er igjen "stylesheet". 992 00:45:20,560 --> 00:45:25,221 Og så kommer jeg til å lagre og åpne opp denne "styles.css." 993 00:45:25,221 --> 00:45:28,940 >> Så, som før, har jeg evne i denne CSS-fil 994 00:45:28,940 --> 00:45:31,569 å faktisk overstyre standard estetikk på en nettside, 995 00:45:31,569 --> 00:45:33,860 og standard estetikk, selvfølgelig, er ganske kjedelig. 996 00:45:33,860 --> 00:45:36,943 Det er liksom normal skriftstørrelse, svart tekst, hvit bakgrunn, og så videre. 997 00:45:36,943 --> 00:45:39,440 Så antar jeg ønsker å gjøre alt dette tekst større. 998 00:45:39,440 --> 00:45:40,460 Jeg kunne gjøre et par ting. 999 00:45:40,460 --> 00:45:43,750 I min styles.css fil, jeg kunne si, vet du hva, 1000 00:45:43,750 --> 00:45:46,950 gjelder følgende for å kroppen min side. 1001 00:45:46,950 --> 00:45:51,390 Gå videre og gjøre skriftstørrelse 24 poeng, 1002 00:45:51,390 --> 00:45:54,130 som er et tall jeg kan bruke i Word. 1003 00:45:54,130 --> 00:45:57,620 La meg gå tilbake til min web side her og laste, 1004 00:45:57,620 --> 00:45:59,640 og du kan se at det er allerede mye større. 1005 00:45:59,640 --> 00:46:02,223 Og vi kan få litt gal, akkurat som vi kan på en desktop-- 1006 00:46:02,223 --> 00:46:03,670 gjøre det 96 poeng. 1007 00:46:03,670 --> 00:46:04,950 Last. 1008 00:46:04,950 --> 00:46:07,610 Og det blir litt uhåndterlig på dette punktet. 1009 00:46:07,610 --> 00:46:09,500 >> Men jeg kunne være litt mer presis. 1010 00:46:09,500 --> 00:46:14,530 I stedet for å bruke dette stilark til kroppen min side, 1011 00:46:14,530 --> 00:46:21,740 hva annet kan jeg bruke det på stedet, hva andre kode som kanskje fortsatt 1012 00:46:21,740 --> 00:46:25,445 funksjon på samme måte? 1013 00:46:25,445 --> 00:46:26,444 >> PUBLIKUM: The p tag? 1014 00:46:26,444 --> 00:46:27,360 DAVID J. MALAN: P tag. 1015 00:46:27,360 --> 00:46:29,350 Så hodet ville ikke være riktig, fordi hodet, 1016 00:46:29,350 --> 00:46:31,300 du kan faktisk ikke kontrollere estetikk. 1017 00:46:31,300 --> 00:46:32,700 Det er enten tekst der eller ikke. 1018 00:46:32,700 --> 00:46:36,760 Men p tag-- jeg kan dykke i en liten dypere, så å si, for å avsnittet 1019 00:46:36,760 --> 00:46:37,350 tags. 1020 00:46:37,350 --> 00:46:41,600 Og selv om det er tre, det er helt greit, fordi i CSS, 1021 00:46:41,600 --> 00:46:44,900 når jeg bare si "p", denne betyr gjelder følgende 1022 00:46:44,900 --> 00:46:48,300 til hvilken som helst kode som samsvarer med dette velgeren, velger bare 1023 00:46:48,300 --> 00:46:49,430 er navnet på taggen. 1024 00:46:49,430 --> 00:46:52,350 Så uansett hvor du ser en "P", gjelder skriftstørrelsen, 1025 00:46:52,350 --> 00:46:55,222 og la oss gjøre det mer rimelig igjen-- 24 poeng. 1026 00:46:55,222 --> 00:46:56,930 Og vet du hva, bare for godt mål, 1027 00:46:56,930 --> 00:46:59,810 la oss gjøre fargen rød bare for øyeblikket. 1028 00:46:59,810 --> 00:47:03,740 Og nå hvis jeg laste, nå er vi se tre stygge avsnitt. 1029 00:47:03,740 --> 00:47:07,180 >> Men nå antar at jeg er liksom of-- Jeg vil første ledd 1030 00:47:07,180 --> 00:47:08,210 å hoppe ut på brukeren. 1031 00:47:08,210 --> 00:47:11,150 Jeg ønsker ikke å bare øke skriftstørrelsen på alt. 1032 00:47:11,150 --> 00:47:16,105 Og så jeg faktisk ønsker å identifisere eller skille mellom disse punktene. 1033 00:47:16,105 --> 00:47:18,730 Så la oss bli kvitt de røde, fordi det er bare slags klebrig, 1034 00:47:18,730 --> 00:47:23,885 og la oss gå videre og gjøre skriftstørrelse 12 punkt som standard, 1035 00:47:23,885 --> 00:47:26,260 slik at vi er tilbake til noe litt mer fornuftig. 1036 00:47:26,260 --> 00:47:29,190 Og nå vil jeg bare til å øke skriftstørrelsen i første ledd. 1037 00:47:29,190 --> 00:47:31,440 Jeg kan gjøre dette i noen måter, men en måte som er 1038 00:47:31,440 --> 00:47:37,180 kanskje mest instruksjons på øyeblikket er å gjøre følgende. 1039 00:47:37,180 --> 00:47:43,280 La meg gå videre og si, dette avsnitt har en unik ID "først." 1040 00:47:43,280 --> 00:47:45,000 Jeg kunne kalle dette noe jeg vil. 1041 00:47:45,000 --> 00:47:46,874 Jeg kan kalle dette "foo" eller noe annet ord, 1042 00:47:46,874 --> 00:47:49,290 men jeg kommer til å gi den enkelte semantisk meningsfullt navn 1043 00:47:49,290 --> 00:47:50,320 som "først." 1044 00:47:50,320 --> 00:47:54,790 Dette er en unik identifikator, ID, for min første ledd. 1045 00:47:54,790 --> 00:47:59,360 >> Hva kan jeg nå gjøre i mitt stil er å være litt mer presis. 1046 00:47:59,360 --> 00:48:02,330 Istedenfor å si, gjelder følgende til p-taggen, 1047 00:48:02,330 --> 00:48:04,890 Jeg kan si following-- gjelder følgende, 1048 00:48:04,890 --> 00:48:11,000 eller velg, HTML-elementet som har en unik ID "først." 1049 00:48:11,000 --> 00:48:12,350 Hva ønsker jeg å bruke den? 1050 00:48:12,350 --> 00:48:15,250 En skriftstørrelsen på 24-punkt. 1051 00:48:15,250 --> 00:48:16,640 Så jeg har to velgere nå. 1052 00:48:16,640 --> 00:48:19,690 En gjør alle pkt 12-punkt. 1053 00:48:19,690 --> 00:48:24,960 Men dette, spesielt siden det kommer second-- det kommer sist i av filen 1054 00:48:24,960 --> 00:48:27,090 dette har en gjennomgripende effekt. 1055 00:48:27,090 --> 00:48:30,200 Jeg har bare gjort hele mitt ledd koder 12-punkts, 1056 00:48:30,200 --> 00:48:34,350 men dette nå kaskader og styrer at for alle elementer 1057 00:48:34,350 --> 00:48:38,800 på siden, noe tag på siden der unik ID er sitat unquote "først." 1058 00:48:38,800 --> 00:48:41,720 Og hashtag i denne sammenheng bare betyr "unik identifikator." 1059 00:48:41,720 --> 00:48:43,750 Jeg vil ikke sette det i HTML-filen. 1060 00:48:43,750 --> 00:48:46,880 Jeg, over her, bare si quote unquote "først." 1061 00:48:46,880 --> 00:48:48,470 >> Så la meg laste. 1062 00:48:48,470 --> 00:48:49,919 Og nå ser jeg, ah, OK. 1063 00:48:49,919 --> 00:48:51,710 Jeg mener, det er ikke så pen, men det er slags 1064 00:48:51,710 --> 00:48:53,600 av som forordet til en bok eller noe sånt, 1065 00:48:53,600 --> 00:48:55,100 der første ledd er større. 1066 00:48:55,100 --> 00:48:57,933 Kan være enda mer presis med bare de første bokstavene, men i det minste 1067 00:48:57,933 --> 00:48:59,110 Jeg har trent i mer kontroll. 1068 00:48:59,110 --> 00:49:04,760 Nå maybe-- kanskje jeg ønsker å gjøre dette noen ganger uansett grunn, 1069 00:49:04,760 --> 00:49:09,010 og så jeg vil ikke at dette skal gjelder bare en HTML-kode. 1070 00:49:09,010 --> 00:49:15,110 Snarere, la oss say-- la oss også gjøre følgende. 1071 00:49:15,110 --> 00:49:18,810 Class = "import". 1072 00:49:18,810 --> 00:49:23,970 Mens en ID brukes til entydig identifisere en ting, en tag, 1073 00:49:23,970 --> 00:49:30,190 i din web side, er en klasse ment å være brukes på en rekke elementer eller koder 1074 00:49:30,190 --> 00:49:30,950 på nettsiden din. 1075 00:49:30,950 --> 00:49:31,710 Så det er gjenbrukbare. 1076 00:49:31,710 --> 00:49:33,090 En ID er ikke gjenbrukes. 1077 00:49:33,090 --> 00:49:34,450 En klasse er gjenbrukbare. 1078 00:49:34,450 --> 00:49:37,830 >> Og vet du hva, uansett filosofisk reasons-- 1079 00:49:37,830 --> 00:49:40,180 Jeg ble ikke ferdig min thought-- jeg kommer til å si 1080 00:49:40,180 --> 00:49:44,300 at første ledd og andre ledd er viktig. 1081 00:49:44,300 --> 00:49:48,600 Så jeg kommer til å bruke klasse kalt "Viktig", som, hvis jeg lagre filen 1082 00:49:48,600 --> 00:49:51,510 og reload, har ingen funksjonell innvirkning ennå. 1083 00:49:51,510 --> 00:49:53,780 Men jeg har lagt noen metadata til filen, 1084 00:49:53,780 --> 00:49:56,610 liksom noe eget fra kjernedata i filen, 1085 00:49:56,610 --> 00:50:02,300 slik at nå i min stilark, hvis jeg i stedet si ".important" - du vet, 1086 00:50:02,300 --> 00:50:07,110 noe som er viktig, er jeg kommer til å gjøre font-farge, red-- 1087 00:50:07,110 --> 00:50:09,930 eller snarere ikke font-farge, bare farge. 1088 00:50:09,930 --> 00:50:12,930 Det er uoverensstemmelser i CSS dessverre. 1089 00:50:12,930 --> 00:50:14,120 Og lesse. 1090 00:50:14,120 --> 00:50:17,640 Legg merke til nå den første to avsnittene er røde 1091 00:50:17,640 --> 00:50:20,880 men ikke den tredje, fordi jeg bare anvendt klassen av "viktig" 1092 00:50:20,880 --> 00:50:25,020 til de to første av disse tingene. 1093 00:50:25,020 --> 00:50:28,030 >> Så i IDer, har du muligheten for å angi meget nøyaktig. 1094 00:50:28,030 --> 00:50:30,110 Med klasser, har du gjenbruk. 1095 00:50:30,110 --> 00:50:33,800 Men i begge tilfeller merke slags god design prinsipp 1096 00:50:33,800 --> 00:50:39,072 hvor jeg tatt ut alle estetikk til min styles.css fil. 1097 00:50:39,072 --> 00:50:40,280 Så det er ingen messi her. 1098 00:50:40,280 --> 00:50:44,490 Det er ingen omtale av rød eller fet vendt eller skriftstørrelsen i denne filen. 1099 00:50:44,490 --> 00:50:49,430 Snarere har jeg semantisk, menings preget mine data, 1100 00:50:49,430 --> 00:50:51,240 her er noen viktige data. 1101 00:50:51,240 --> 00:50:52,800 Her er noen flere viktige data. 1102 00:50:52,800 --> 00:50:56,500 Dessuten er det her "Første" av mine viktige data. 1103 00:50:56,500 --> 00:51:01,050 Så HTML handler om sortering av tagging, bokstavelig talt, ord 1104 00:51:01,050 --> 00:51:05,270 og avsnitt og konstruksjoner i din side med disse små hint, hvis du 1105 00:51:05,270 --> 00:51:07,640 vil, som du kan en eller annen måte utnytte hjelp 1106 00:51:07,640 --> 00:51:10,880 andre teknikker som CSS på denne måten. 1107 00:51:10,880 --> 00:51:14,760 >> Så som svar på Victoria spørsmål, vi kan gjøre teksten større på den måten. 1108 00:51:14,760 --> 00:51:18,380 Det er så mange andre måter, men skrift tag-- åpen brakett "font" - 1109 00:51:18,380 --> 00:51:19,770 er faktisk flere år gammel. 1110 00:51:19,770 --> 00:51:21,410 Og dette er problemet, også, med å stole bare 1111 00:51:21,410 --> 00:51:23,485 på nettet resources-- de har en tendens til å være utdatert. 1112 00:51:23,485 --> 00:51:26,110 Og ja, som er blitt foreldet, fordi verden realisert, 1113 00:51:26,110 --> 00:51:28,970 hva betyr "font-size = 7" betyr? 1114 00:51:28,970 --> 00:51:29,670 Det gjør det ikke. 1115 00:51:29,670 --> 00:51:32,770 Og det i mange år, og for å denne day-- en av side 1116 00:51:32,770 --> 00:51:36,060 bemerker her er at det faktisk er utrolig smertefullt fortsatt noen ganger 1117 00:51:36,060 --> 00:51:38,900 for å utvikle områder for web, fordi Microsoft 1118 00:51:38,900 --> 00:51:44,220 og Google og Mozilla og andre ofte uenige om hvordan 1119 00:51:44,220 --> 00:51:47,480 å tolke en spesifikasjon som HTML. 1120 00:51:47,480 --> 00:51:52,490 >> Det er en regelbok for HTML som vanligvis sier hva hver tag betyr. 1121 00:51:52,490 --> 00:51:55,690 Men noen ganger er det overlatt til implementering skjønn, 1122 00:51:55,690 --> 00:51:57,290 Microsoft skjønn og Google. 1123 00:51:57,290 --> 00:52:00,000 Og så vil du veldig ofte se på en nettside noe 1124 00:52:00,000 --> 00:52:04,954 ser annerledes på en PC enn det gjør på en Mac, 1125 00:52:04,954 --> 00:52:06,995 og det er egentlig fordi, på slutten av dagen, 1126 00:52:06,995 --> 00:52:08,891 de ikke teste det godt på begge plattformer. 1127 00:52:08,891 --> 00:52:11,390 Men det er også fordi rimelig, smarte mennesker vil være uenige 1128 00:52:11,390 --> 00:52:14,970 og selskaper vil være uenige, og så en av utfordringene i programmering 1129 00:52:14,970 --> 00:52:16,980 for web eller design ting for web 1130 00:52:16,980 --> 00:52:21,700 skriver nettstedet ditt på en måte som fungerer på alle nettlesere. 1131 00:52:21,700 --> 00:52:23,410 Men selv det er urimelig, ikke sant? 1132 00:52:23,410 --> 00:52:27,807 Det er så mange versjoner av så mange lesere der ute som, på et tidspunkt, 1133 00:52:27,807 --> 00:52:30,890 du må også gjøre en vurderingssak og du må bestemme som selskap, 1134 00:52:30,890 --> 00:52:33,082 spesielt for e-handel-stil nettsteder der du er 1135 00:52:33,082 --> 00:52:36,290 prøver å bruke den nyeste og beste teknologier for å gi en virkelig god brukeropplevelse 1136 00:52:36,290 --> 00:52:37,110 erfaring. 1137 00:52:37,110 --> 00:52:41,019 Men noen prosent av brukerne kanskje fortsatt være å bruke Internet Explorer 6 eller 7 1138 00:52:41,019 --> 00:52:43,810 eller 8, særlig avhengig land som de kommer fra. 1139 00:52:43,810 --> 00:52:46,760 >> Og så veldig ofte konsultert er noe 1140 00:52:46,760 --> 00:52:50,920 som "nettleser statistikk." 1141 00:52:50,920 --> 00:52:56,560 Og hvis vi går to-- la oss se Wikipedia og se hvordan up-to-date dette diagrammet er 1142 00:52:56,560 --> 00:52:59,320 hvis det er én. 1143 00:52:59,320 --> 00:53:02,420 Så her kan du se hvor nettlesere faktisk 1144 00:53:02,420 --> 00:53:06,160 er ifølge desember 2015, i henhold til den amerikanske regjeringen. 1145 00:53:06,160 --> 00:53:11,170 Chrome er på 42% markedsandel, etterfulgt av IE i stor grad i bedriftens innstillinger 1146 00:53:11,170 --> 00:53:14,490 eller PC-innstillinger, selvfølgelig, etterfulgt av Firefox, 1147 00:53:14,490 --> 00:53:17,440 deretter Safari, så Opera gjorde ikke gjøre kartet her for noen grunn, 1148 00:53:17,440 --> 00:53:18,210 og deretter andre. 1149 00:53:18,210 --> 00:53:19,500 Kanskje det er under Andre. 1150 00:53:19,500 --> 00:53:27,700 Men mer problematisk enn det er-- la oss se om Wikipedia har også 1151 00:53:27,700 --> 00:53:35,194 versjoner av nettlesere version-- 1152 00:53:35,194 --> 00:53:36,160 1153 00:53:36,160 --> 00:53:39,190 >> La oss gå til nettleserens statistikk. 1154 00:53:39,190 --> 00:53:40,680 DVS. 1155 00:53:40,680 --> 00:53:42,030 Selv det er ikke nok. 1156 00:53:42,030 --> 00:53:44,854 Nettleserstatistikk. 1157 00:53:44,854 --> 00:53:45,353 Min versjon. 1158 00:53:45,353 --> 00:53:48,980 1159 00:53:48,980 --> 00:53:50,540 Det kommer ikke til å være riktig. 1160 00:53:50,540 --> 00:53:53,414 La oss se versjoner. 1161 00:53:53,414 --> 00:53:54,830 Browser markedsandel. 1162 00:53:54,830 --> 00:53:57,110 La oss se om dette kommer opp. 1163 00:53:57,110 --> 00:53:57,610 OK. 1164 00:53:57,610 --> 00:54:00,010 Nå blir litt mer nyttig. 1165 00:54:00,010 --> 00:54:04,870 Så her, ser at vi har alt ulike versjoner av nettlesere. 1166 00:54:04,870 --> 00:54:09,887 Og herregud, hvis du look-- Chrome 48, Chrome 47, Chrome 31, Chrome 45. 1167 00:54:09,887 --> 00:54:12,970 Jeg mener, nettlesere stadig oppdatert, og noen ganger noen av disse endringene 1168 00:54:12,970 --> 00:54:16,430 er betydelige i når det gjelder funksjonalitet. 1169 00:54:16,430 --> 00:54:20,630 Og så på et eller annet tidspunkt, produktsjefer eller ingeniørene 1170 00:54:20,630 --> 00:54:23,620 trenger for å gjøre en decision-- deg vet hva, bare 1% av verdens 1171 00:54:23,620 --> 00:54:24,740 fortsatt bruker IE 7. 1172 00:54:24,740 --> 00:54:25,490 Til helvete med dem. 1173 00:54:25,490 --> 00:54:27,470 Vi er bare ikke til å støtte den nettleseren. 1174 00:54:27,470 --> 00:54:28,740 Og hva betyr det å ikke støtte? 1175 00:54:28,740 --> 00:54:31,170 Det kan bety at knappene fungerer ikke på din nettside, 1176 00:54:31,170 --> 00:54:33,050 eller det kan bety formatering er helt av. 1177 00:54:33,050 --> 00:54:35,091 Eller du kan ha å gjøre det samme dom samtale 1178 00:54:35,091 --> 00:54:39,089 i mobile disse dager, hvor, men vi kan ikke kommer til å støtte IOS 5 lenger. 1179 00:54:39,089 --> 00:54:40,380 Så folk må bare oppgradere. 1180 00:54:40,380 --> 00:54:45,850 Eller vi kommer ikke til å støtte Cupcake på Android OS for Android-enheter, 1181 00:54:45,850 --> 00:54:48,629 fordi som world-- som tech verden ønsker å gå videre, 1182 00:54:48,629 --> 00:54:51,170 den slags ønsker å dra verden med det, slik at de ikke gjør 1183 00:54:51,170 --> 00:54:53,295 må fortsette å bli bakoverkompatibel slik at de 1184 00:54:53,295 --> 00:54:54,920 kan tilby nye og gode funksjoner. 1185 00:54:54,920 --> 00:54:57,878 Dette er faktisk en av grunnene hvorfor så mange bedrifter er å rulle ut 1186 00:54:57,878 --> 00:55:01,440 automatiske oppdateringer og liksom tvinge de siste versjonene av programvaren på oss. 1187 00:55:01,440 --> 00:55:04,010 Og selv om selskapene som Apple vil sortere av 1188 00:55:04,010 --> 00:55:07,280 tvinge deg nesten eller tvinge deg i form av markedskreftene 1189 00:55:07,280 --> 00:55:11,164 å kjøpe en ny telefon fordi de bare vil ikke oppdatere den gamle telefonen lenger. 1190 00:55:11,164 --> 00:55:13,330 Så du gå glipp av nyeste og beste funksjonene, 1191 00:55:13,330 --> 00:55:17,520 fordi det er kostbart for dem som selskapet å opprettholde eldre, uten tvil 1192 00:55:17,520 --> 00:55:19,330 mindreverdig versjoner av programvare. 1193 00:55:19,330 --> 00:55:23,660 Men nettoeffekten er at Vi lider også dette også. 1194 00:55:23,660 --> 00:55:26,550 >> Så la oss ta en titt på et par siste ting her. 1195 00:55:26,550 --> 00:55:29,740 La oss kutte ut virkelig fort noen av de andre kuler, hvis nysgjerrig. 1196 00:55:29,740 --> 00:55:33,440 Så hvis du prøvde å, for eksempel, plassering 1197 00:55:33,440 --> 00:55:36,420 teksten på forskjellige sider av side, kommer jeg til å gjøre en rask måte, 1198 00:55:36,420 --> 00:55:38,360 men det er annerledes måter å gjøre dette. 1199 00:55:38,360 --> 00:55:42,610 La meg gå videre og eliminate-- forenkle dette som følger. 1200 00:55:42,610 --> 00:55:45,330 La meg bare gå tilbake til min enkle, enkle avsnitt. 1201 00:55:45,330 --> 00:55:47,760 La meg gå tilbake til min styles.css. 1202 00:55:47,760 --> 00:55:51,040 Og jeg bare kommer til å bruke simple-- som du kanskje har sett på Google 1203 00:55:51,040 --> 00:55:54,430 eller husker fra earlier-- text-align høyre. 1204 00:55:54,430 --> 00:55:56,220 Og oppdater denne siden. 1205 00:55:56,220 --> 00:55:58,470 Nå er alt virker å være høyrestilt, 1206 00:55:58,470 --> 00:56:00,770 som du kan se på overhead her. 1207 00:56:00,770 --> 00:56:04,470 >> Vi kan gjøre det ser litt mer bestiller-aktig, og vi kan si "rettferdiggjøre" 1208 00:56:04,470 --> 00:56:05,640 og lesse. 1209 00:56:05,640 --> 00:56:09,870 Nå er det fint og plassen på begge sider, som er slags hyggelig. 1210 00:56:09,870 --> 00:56:12,220 Et annet mål som vi hadde her var endre farge på teksten. 1211 00:56:12,220 --> 00:56:13,650 Så vi så at med min rød tekst. 1212 00:56:13,650 --> 00:56:15,630 Og nå legge til knapper for et skjema. 1213 00:56:15,630 --> 00:56:19,390 Så hvorfor ikke vi prøve å gjøre akkurat dette? 1214 00:56:19,390 --> 00:56:23,656 Men først la meg gå til et nettsted som de fleste av oss bruker hver day-- Google. 1215 00:56:23,656 --> 00:56:25,780 Og la oss ta en titt på hvordan Google faktisk fungerer. 1216 00:56:25,780 --> 00:56:26,821 Men jeg kommer til å gjøre dette. 1217 00:56:26,821 --> 00:56:31,930 Først la meg gjøre det in-- Jepp, la meg gå til Google først. 1218 00:56:31,930 --> 00:56:34,530 Jeg kommer til å gå i Google Innstillinger, 1219 00:56:34,530 --> 00:56:40,660 fordi jeg ønsker å deaktivere noe som kalles øyeblikkelige resultater. 1220 00:56:40,660 --> 00:56:43,580 >> Så du kanskje har lagt merke til i Google disse days-- la meg gå tilbake 1221 00:56:43,580 --> 00:56:44,850 og slå dette på. 1222 00:56:44,850 --> 00:56:47,900 Så hvis jeg begynne å søke for "katter" som dette, 1223 00:56:47,900 --> 00:56:50,120 Legg merke til at ikke bare gjøre Jeg får auto-fullføre opp 1224 00:56:50,120 --> 00:56:54,520 toppen, plutselig, selve siden ser ut til å endre ganske raskt også, 1225 00:56:54,520 --> 00:56:58,750 og det er Google bruker et språk kalt Javascript prøver å være nyttig. 1226 00:56:58,750 --> 00:57:01,540 Men dessverre, det slag av søl opp vår diskusjon 1227 00:57:01,540 --> 00:57:04,010 av hva som faktisk skjer under panseret her. 1228 00:57:04,010 --> 00:57:09,070 Så jeg er bare litt raskt slå av øyeblikkelige resultater. 1229 00:57:09,070 --> 00:57:11,510 Og jeg kommer til å klikke på Lagre. 1230 00:57:11,510 --> 00:57:13,930 Og nå kommer jeg til å åpne som diagnostisk verktøylinje som jeg 1231 00:57:13,930 --> 00:57:16,150 holde åpningen under kategorien Nettverk. 1232 00:57:16,150 --> 00:57:17,720 Så la oss gjøre dette. 1233 00:57:17,720 --> 00:57:21,960 La me-- whoops-- bla dette ned litt. 1234 00:57:21,960 --> 00:57:24,410 Og la meg søke etter "katter." 1235 00:57:24,410 --> 00:57:26,790 >> Og nå notice-- faktisk, Dette er en god mulighet 1236 00:57:26,790 --> 00:57:28,840 for å diskutere et øyeblikk. 1237 00:57:28,840 --> 00:57:32,460 Legg merke til det øyeblikket jeg type-- stoppe det. 1238 00:57:32,460 --> 00:57:35,250 Slutt med det. 1239 00:57:35,250 --> 00:57:35,790 OK. 1240 00:57:35,790 --> 00:57:40,870 Legg merke til det øyeblikket jeg skriver bokstaven C, se nederst på skjermen. 1241 00:57:40,870 --> 00:57:48,600 A- T- S. Hva gjør bunnen av denne skjermen, min kategorien Network, 1242 00:57:48,600 --> 00:57:53,320 foreslår som skjer hver gang jeg skriver et brev? 1243 00:57:53,320 --> 00:57:57,700 Dessverre er frosken veldig distraherende dag eller shamrock 1244 00:57:57,700 --> 00:58:00,339 eller hva han er. 1245 00:58:00,339 --> 00:58:01,880 Hva som skjedde hver gang jeg skrev? 1246 00:58:01,880 --> 00:58:04,230 Og la meg tømme buffer og skriv det på nytt. 1247 00:58:04,230 --> 00:58:06,580 Slik: Uff da. 1248 00:58:06,580 --> 00:58:13,280 Hver gang jeg skriver et brev, C- A- T-- så en ny rad åpenbart fortsatt vises. 1249 00:58:13,280 --> 00:58:16,530 Hva gjør hver av disse radene representerer, basert på hva vi har sett og diskutert 1250 00:58:16,530 --> 00:58:17,339 så langt? 1251 00:58:17,339 --> 00:58:18,130 PUBLIKUM: Et søk? 1252 00:58:18,130 --> 00:58:21,770 DAVID J. MALAN: Et søk, eller mer generelt, en HTTP-forespørsel 1253 00:58:21,770 --> 00:58:23,125 fra nettleseren til serveren. 1254 00:58:23,125 --> 00:58:29,090 Vel, hvorfor er nettleseren min å gjøre en HTTP be hver gang jeg skriver et brev? 1255 00:58:29,090 --> 00:58:30,502 >> PUBLIKUM: [uhørlig] 1256 00:58:30,502 --> 00:58:33,210 DAVID J. MALAN: Ja, det er å gi meg disse auto-fullføre resultater. 1257 00:58:33,210 --> 00:58:35,190 Liker, hvor gjøre disse søkeresultatene kommer fra? 1258 00:58:35,190 --> 00:58:38,120 Vel, hver gang jeg skriver inn et brev, sender Google mer 1259 00:58:38,120 --> 00:58:40,460 og mer og mer av ordet jeg skriver. 1260 00:58:40,460 --> 00:58:41,040 Hvorfor? 1261 00:58:41,040 --> 00:58:44,540 Fordi de ønsker å gi meg en bedre og bedre, bedre forslag, 1262 00:58:44,540 --> 00:58:48,880 en liste med forslag, for hva ordet Jeg prøver å faktisk ferdig. 1263 00:58:48,880 --> 00:58:53,030 Så dette er å si bokstavelig talt hver tegn du skriver inn i Google 1264 00:58:53,030 --> 00:58:56,900 blir sendt, til slutt i bulk, men også noen ganger en 1265 00:58:56,900 --> 00:59:00,620 i en tid for å gjennomføre disse auto-fullføre funksjoner når 1266 00:59:00,620 --> 00:59:03,000 dataene er naturligvis på nettet. 1267 00:59:03,000 --> 00:59:08,780 >> Nå, la oss ta en titt på hva som faktisk skjer når jeg klikker Google Search. 1268 00:59:08,780 --> 00:59:10,420 Og så skal vi utnytte dette selv. 1269 00:59:10,420 --> 00:59:15,320 Så hvis jeg ruller nedover nå til meget første forespørselen som nettopp skjedde. 1270 00:59:15,320 --> 00:59:17,130 Legg merke til følgende. 1271 00:59:17,130 --> 00:59:25,550 Den ble sendt til en ganske lang URL-- https://www.google.com/search? 1272 00:59:25,550 --> 00:59:27,100 og deretter en hel haug med ting. 1273 00:59:27,100 --> 00:59:29,620 La oss se dette faktisk nå i kategorien leseren selv. 1274 00:59:29,620 --> 00:59:31,310 La oss bli kvitt verktøylinjen her. 1275 00:59:31,310 --> 00:59:33,140 Her er siden med søkeresultater. 1276 00:59:33,140 --> 00:59:34,790 Og legg merke til her er nettadressen. 1277 00:59:34,790 --> 00:59:37,430 Nå kan du sikkert gjette hva som skjer her delvis. 1278 00:59:37,430 --> 00:59:39,090 Så først av alt, en definisjon. 1279 00:59:39,090 --> 00:59:42,570 Dette er tilsynelatende reisemålet hvor det er sendt inn skjemaet. 1280 00:59:42,570 --> 00:59:44,910 Så når jeg skrev i ordene "cats" og trykk Enter, 1281 00:59:44,910 --> 00:59:48,460 tilsynelatende Google sendte min skriving til denne nettadressen 1282 00:59:48,460 --> 00:59:50,770 som jeg har uthevet der, slash søk. 1283 00:59:50,770 --> 00:59:56,530 Slår ut, i en URL, noe som skjer etter et spørsmålstegn er, 1284 00:59:56,530 --> 01:00:01,270 som vi fortsetter å si, en nøkkelverdi-par som ble skrevet inn i skjema eller annen måte 1285 01:00:01,270 --> 01:00:04,500 overføres fra leseren til serveren. 1286 01:00:04,500 --> 01:00:07,180 >> Så når du skriver inn inn i et skjema på nettet 1287 01:00:07,180 --> 01:00:10,000 og det er sendt som vi har vært diskutert, via en bli, 1288 01:00:10,000 --> 01:00:12,400 en av disse virtuelle konvolutter, innholdet 1289 01:00:12,400 --> 01:00:15,510 av at envelope-- ja, holde får fylt fysisk 1290 01:00:15,510 --> 01:00:19,010 i konvolutten i klassen i dag, men teknologisk 1291 01:00:19,010 --> 01:00:21,110 det er faktisk satt i nettadressen. 1292 01:00:21,110 --> 01:00:22,940 Så faktisk, la meg sile gjennom dette. 1293 01:00:22,940 --> 01:00:25,010 Hvor ser du brukerundersøkelser? 1294 01:00:25,010 --> 01:00:27,490 Hvor ser du noe at jeg selv har skrevet opp her? 1295 01:00:27,490 --> 01:00:32,100 1296 01:00:32,100 --> 01:00:33,491 Ja, så "katter." 1297 01:00:33,491 --> 01:00:33,990 Høyre? 1298 01:00:33,990 --> 01:00:36,380 Så la meg destillere dette til noe enklere. 1299 01:00:36,380 --> 01:00:39,917 Jeg kommer til å slette alt om denne nettadressen som jeg ikke forstår, 1300 01:00:39,917 --> 01:00:42,250 og jeg bare kommer til å forlate det som dette-- / søke? q = katter. 1301 01:00:42,250 --> 01:00:45,640 1302 01:00:45,640 --> 01:00:47,890 Vi får se hvor q kommer fra i et øyeblikk, 1303 01:00:47,890 --> 01:00:51,220 men det føles som et minimum mengden av informasjon som jeg gitt. 1304 01:00:51,220 --> 01:00:53,050 Og nå kommer jeg til å trykke Enter. 1305 01:00:53,050 --> 01:00:55,520 Og legg merke til den fortsatt fungerer. 1306 01:00:55,520 --> 01:00:57,950 Vi fortsatt få tilbake en hel haug med katter. 1307 01:00:57,950 --> 01:01:00,340 Så Google er mer avansert enn dette i disse dager. 1308 01:01:00,340 --> 01:01:01,934 Det er 2016, ikke 1999. 1309 01:01:01,934 --> 01:01:04,600 Så det er andre ting som min leseren sender til serveren. 1310 01:01:04,600 --> 01:01:07,100 Men dette er minimalt alt som er nødvendig. 1311 01:01:07,100 --> 01:01:08,380 >> Så hva skjer? 1312 01:01:08,380 --> 01:01:14,320 Vel, først la meg gå videre og gå tilbake til Cloud9 og la meg gå videre 1313 01:01:14,320 --> 01:01:15,620 og lukker faner tidligere. 1314 01:01:15,620 --> 01:01:18,230 Og jeg vil gjøre dette på min eier bare for et øyeblikk. 1315 01:01:18,230 --> 01:01:20,730 Jeg kommer til å gå videre og opprette ny fil. 1316 01:01:20,730 --> 01:01:23,739 Og jeg kommer til å lagre det som google.html. 1317 01:01:23,739 --> 01:01:26,280 Og jeg kommer til å veldig quickly-- Jeg kommer til å stjele, faktisk, 1318 01:01:26,280 --> 01:01:28,510 noe av denne teksten bare for å spare tid. 1319 01:01:28,510 --> 01:01:30,610 Jeg kommer til å lime dette inn her. 1320 01:01:30,610 --> 01:01:33,850 Jeg kommer ikke til å bry seg med noen stilisering denne gangen. 1321 01:01:33,850 --> 01:01:38,340 Vi kommer til å kalle dette "My Google." 1322 01:01:38,340 --> 01:01:41,230 Og jeg kommer til å bli kvitt av alt i kroppen. 1323 01:01:41,230 --> 01:01:42,740 Og jeg kommer til å gjøre følgende. 1324 01:01:42,740 --> 01:01:45,690 La meg zoome inn. 1325 01:01:45,690 --> 01:01:50,620 Form action-- og som jeg kort nevnt earlier-- whoops-- som jeg kort 1326 01:01:50,620 --> 01:01:54,130 nevnt tidligere, virkningen av en formen er der du sender data til. 1327 01:01:54,130 --> 01:01:56,620 Så google.com/search. 1328 01:01:56,620 --> 01:01:59,390 Og den metoden jeg vil bruke kan være en av to ting. 1329 01:01:59,390 --> 01:02:02,870 Det kan enten være "få", som vi holder diskutere, eller det kan være "post". 1330 01:02:02,870 --> 01:02:05,340 For nå, den grunnleggende Forskjellen er, hvis du bruker "bli" 1331 01:02:05,340 --> 01:02:09,590 all informasjon som bruker gir blir sendt i nettadressen. 1332 01:02:09,590 --> 01:02:13,530 >> Det er flott for ting som søk motorer og noen få andre programmer, 1333 01:02:13,530 --> 01:02:17,080 men under hvilke omstendigheter ville du ikke ønsker å fylle ut et skjema 1334 01:02:17,080 --> 01:02:21,620 og har den informasjonen ender opp URL, som i adresselinjen i nettleseren? 1335 01:02:21,620 --> 01:02:25,470 1336 01:02:25,470 --> 01:02:26,605 Hva slags former gjør you-- 1337 01:02:26,605 --> 01:02:27,480 PUBLIKUM: [uhørlig] 1338 01:02:27,480 --> 01:02:28,450 DAVID J. MALAN: Ja, som hva? 1339 01:02:28,450 --> 01:02:29,270 PUBLIKUM: Passord. 1340 01:02:29,270 --> 01:02:31,936 DAVID J. MALAN: Ja, så du logger på Facebook eller noen nettside. 1341 01:02:31,936 --> 01:02:34,395 Det er brukerundersøkelser fra et skjema, en tekstboks, 1342 01:02:34,395 --> 01:02:37,020 men du sannsynligvis ikke vil ha det dukke opp i nettleserens URL. 1343 01:02:37,020 --> 01:02:38,121 Hvorfor? 1344 01:02:38,121 --> 01:02:40,870 Jeg mener, kanskje det er noen sikkerhetsrisikoen på nettverket, 1345 01:02:40,870 --> 01:02:44,830 men mer-- liker, enklere, hva om romkameraten, signifikante andre, 1346 01:02:44,830 --> 01:02:47,710 barna, ser din ektefelle via nettleseren din historie? 1347 01:02:47,710 --> 01:02:50,762 Det er ditt passord riktig der i nettleserens historikk. 1348 01:02:50,762 --> 01:02:52,220 Det føles ikke som god design. 1349 01:02:52,220 --> 01:02:54,500 Eller enda mer teknisk, anta at du prøver 1350 01:02:54,500 --> 01:02:59,180 å laste opp et bilde til Flickr eller Facebook eller wherever-- 1351 01:02:59,180 --> 01:03:03,010 som er brukerundersøkelser, selv om det er litt mer interesting-- hvordan 1352 01:03:03,010 --> 01:03:05,530 skal jeg stappe et bilde i adresselinjen? 1353 01:03:05,530 --> 01:03:06,730 Du slags liksom ikke kan. 1354 01:03:06,730 --> 01:03:07,396 Du slags kan. 1355 01:03:07,396 --> 01:03:10,210 Men egentlig er jeg hardt pressede å forestille seg å gjøre det. 1356 01:03:10,210 --> 01:03:13,470 Så jeg trenger en annen metode for laste opp bilder til et nettsted, 1357 01:03:13,470 --> 01:03:15,657 og at andre metoden kalles "post". 1358 01:03:15,657 --> 01:03:18,740 Men for nå, vil vi bare snakke om "Få", som er den enkleste av de to. 1359 01:03:18,740 --> 01:03:21,100 Det setter bare alle brukerundersøkelser i URL. 1360 01:03:21,100 --> 01:03:22,830 >> Så her er formen jeg skaper. 1361 01:03:22,830 --> 01:03:24,070 Jeg vil ha en inngang. 1362 01:03:24,070 --> 01:03:24,820 Og vet du hva? 1363 01:03:24,820 --> 01:03:26,111 Jeg kommer til å ta en gjetning her. 1364 01:03:26,111 --> 01:03:31,600 Jeg kommer til å huske min input "q" for "spørring." 1365 01:03:31,600 --> 01:03:34,970 Og jeg tror dette er en av de opprinnelige design, kanskje, fra 1999. 1366 01:03:34,970 --> 01:03:39,560 Og deretter hvilken type denne inngangen bare kommer til å være "tekst". 1367 01:03:39,560 --> 01:03:43,040 Og så kommer jeg til å ha en annen inngang som ikke trenger et navn, så vi vil snart 1368 01:03:43,040 --> 01:03:45,120 se, den type som er "send". 1369 01:03:45,120 --> 01:03:47,070 Og dette kommer til å gi meg en spesiell knapp. 1370 01:03:47,070 --> 01:03:48,320 Og det er det. 1371 01:03:48,320 --> 01:03:50,790 >> Så la meg gå videre og lagre denne filen. 1372 01:03:50,790 --> 01:03:54,910 Jeg kommer til å gå tilbake til min nettleser og gå til google.html. 1373 01:03:54,910 --> 01:03:56,140 Gå. 1374 01:03:56,140 --> 01:03:59,680 Og det er litt sparsom å si det mildt. 1375 01:03:59,680 --> 01:04:03,110 Men la meg gå videre og søk etter "katter." 1376 01:04:03,110 --> 01:04:06,510 Og legg merke til jeg er for tiden på dette Cloud9 URL. 1377 01:04:06,510 --> 01:04:09,240 Men i det øyeblikket jeg klikker på denne, hvor du håper jeg vil ende opp med? 1378 01:04:09,240 --> 01:04:10,160 >> PUBLIKUM: Google. 1379 01:04:10,160 --> 01:04:11,118 >> DAVID J. MALAN: Google. 1380 01:04:11,118 --> 01:04:12,740 Så la oss klikk Send. 1381 01:04:12,740 --> 01:04:15,200 Og ja jeg har re-implementert Google. 1382 01:04:15,200 --> 01:04:15,700 Høyre? 1383 01:04:15,700 --> 01:04:16,480 Det er enklere. 1384 01:04:16,480 --> 01:04:17,120 Det er lettere. 1385 01:04:17,120 --> 01:04:20,350 Jeg mener, min kode er klart bedre enn deres, fra rotet vi så tidligere. 1386 01:04:20,350 --> 01:04:21,100 Og vet du hva? 1387 01:04:21,100 --> 01:04:22,610 Jeg kommer til å krydre dette opp litt. 1388 01:04:22,610 --> 01:04:23,860 Jeg nevnte ikke dette tidligere. 1389 01:04:23,860 --> 01:04:27,860 Det er tagger som H1, for Overskrift 1, den viktigste overskriften på en side. 1390 01:04:27,860 --> 01:04:30,570 "My Google," Jeg vil kalle dette. 1391 01:04:30,570 --> 01:04:31,940 La meg lesse. 1392 01:04:31,940 --> 01:04:33,772 Det ser litt bedre allerede. 1393 01:04:33,772 --> 01:04:34,980 Og, faktisk, vet du hva? 1394 01:04:34,980 --> 01:04:36,430 Jeg har already-- jeg løy. 1395 01:04:36,430 --> 01:04:40,200 Jeg sa at jeg ikke kom til å style denne, men jeg kommer til å style dette som før. 1396 01:04:40,200 --> 01:04:46,860 Og kroppen min kommer til å være, la oss si, text-align center. 1397 01:04:46,860 --> 01:04:48,800 Det ser mer ut som Google allerede. 1398 01:04:48,800 --> 01:04:51,090 >> Jeg trenger et linjeskift, skjønt, for at Send-knappen. 1399 01:04:51,090 --> 01:04:52,798 Og det viser seg, du kan bruke avsnitt, 1400 01:04:52,798 --> 01:04:57,320 eller du kan mer bokstavelig talt bare si, gi meg et linjeskift her-- BR tag. 1401 01:04:57,320 --> 01:04:59,319 Og hvis jeg laste dette, nå går det der. 1402 01:04:59,319 --> 01:05:01,610 Det er litt stygg, så jeg kunne gjøre flere linjeskift, 1403 01:05:01,610 --> 01:05:03,310 men la oss ikke bli for grådig her. 1404 01:05:03,310 --> 01:05:06,430 Så nå får vi se om det fungerer for "hunder". 1405 01:05:06,430 --> 01:05:08,640 Det ser ut til å jobbe for "hunder", også. 1406 01:05:08,640 --> 01:05:10,780 Så hva er den overbevisende takeaway her? 1407 01:05:10,780 --> 01:05:13,600 One-- var ikke et stort sprang å introdusere noen flere koder, 1408 01:05:13,600 --> 01:05:15,370 som skjemaet tag i inngangslappen. 1409 01:05:15,370 --> 01:05:17,120 Men mer fundamentalt er, er alt vi gjør 1410 01:05:17,120 --> 01:05:20,610 er å utnytte vår forståelse av HTTP og det faktum 1411 01:05:20,610 --> 01:05:24,900 som danner til slutt endre hva som er i nettadressen i nettleseren, 1412 01:05:24,900 --> 01:05:28,540 og så derfor kan vi mekanisk gi innspill til en server 1413 01:05:28,540 --> 01:05:33,600 Legg inn et HTML-skjema og vite at serveren forstår HTTP, 1414 01:05:33,600 --> 01:05:36,890 akkurat som kroppen vår forstår, som, rister hånden min, den samme protokollen, 1415 01:05:36,890 --> 01:05:40,920 og slik at vi får tilbake svar at vi til slutt kan forvente. 1416 01:05:40,920 --> 01:05:44,050 >> Så la oss prøve å gjøre en siste ting nå med mobil, 1417 01:05:44,050 --> 01:05:47,052 og jeg skal make-- jeg vil legge denne koden til lysbildene. 1418 01:05:47,052 --> 01:05:49,760 Så hvis du ønsker å tinker, du kan sikkert ta det derfra. 1419 01:05:49,760 --> 01:05:51,551 Men jeg kommer til å gå videre og gjøre en ting. 1420 01:05:51,551 --> 01:05:54,120 Jeg kommer til å gå videre og åpne opp peke page-- 1421 01:05:54,120 --> 01:05:59,030 min hallo side som før, noe som har mye av dette faux-latinske teksten, 1422 01:05:59,030 --> 01:06:05,470 eller meningsløst latinske teksten, og has-- det ser ut som dette på denne skriftstørrelse. 1423 01:06:05,470 --> 01:06:07,850 Men la meg gå videre og gjøre dette. 1424 01:06:07,850 --> 01:06:09,300 Jeg kommer til å gå inn i Cloud9. 1425 01:06:09,300 --> 01:06:10,380 Og du trenger ikke å gjøre dette trinnet. 1426 01:06:10,380 --> 01:06:11,420 Jeg vil bare gjøre det selv. 1427 01:06:11,420 --> 01:06:12,890 Jeg kommer til å klikke på Del. 1428 01:06:12,890 --> 01:06:15,170 Og dette er en funksjon bare av Cloud9, der 1429 01:06:15,170 --> 01:06:17,710 Jeg kan gjøre mitt miljø publikum. 1430 01:06:17,710 --> 01:06:20,240 >> Og bare for moro skyld demonstrasjon, la meg gjøre dette. 1431 01:06:20,240 --> 01:06:22,870 Jeg kommer til å gjøre min søknad publikum. 1432 01:06:22,870 --> 01:06:25,230 Legg merke til det advarer meg, jeg Jeg sikker på at jeg ønsker å gjøre dette, 1433 01:06:25,230 --> 01:06:28,438 fordi dette kommer til å gjøre alle i verden, enten de er her nå 1434 01:06:28,438 --> 01:06:33,560 eller ser på video senere på Internett i stand til å se det jeg ser. 1435 01:06:33,560 --> 01:06:34,440 Men det er OK. 1436 01:06:34,440 --> 01:06:37,870 Jeg kommer til å si "Ferdig". 1437 01:06:37,870 --> 01:06:42,080 Og la meg oppmuntre deg, hvis jeg gjorde dette correctly-- la meg teste det først. 1438 01:06:42,080 --> 01:06:45,590 Kom igjen, hvis du ikke mind-- i en nettleser på datamaskinen, 1439 01:06:45,590 --> 01:06:49,900 gå til denne nettadressen, og forhåpentligvis vil du se min latinske teksten. 1440 01:06:49,900 --> 01:06:52,820 Og for å være klar, er det kjører ikke på min laptop. 1441 01:06:52,820 --> 01:06:53,610 Det er i skyen. 1442 01:06:53,610 --> 01:06:58,120 Det er på Cloud9, bokstavelig talt, men Jeg har gjort mitt arbeidsområde offentlig 1443 01:06:58,120 --> 01:07:03,450 slik at alle på internett kan få tilgang til min Latin hjemmeside. 1444 01:07:03,450 --> 01:07:07,209 >> Gå til samme nettadresse på telefonen, hvis du kunne. 1445 01:07:07,209 --> 01:07:09,750 Hvis det vil koste deg, men du kan bare se over en skulder. 1446 01:07:09,750 --> 01:07:40,688 1447 01:07:40,688 --> 01:07:42,467 PUBLIKUM: [uhørlig] 1448 01:07:42,467 --> 01:07:43,550 DAVID J. MALAN: Jeg beklager? 1449 01:07:43,550 --> 01:07:45,390 PUBLIKUM: [uhørlig] 1450 01:07:45,390 --> 01:07:47,710 DAVID J. MALAN: Bare latinske ord. 1451 01:07:47,710 --> 01:07:48,210 Det er alt. 1452 01:07:48,210 --> 01:07:49,250 Men det er hva du bør se. 1453 01:07:49,250 --> 01:07:49,875 >> PUBLIKUM: Yeah. 1454 01:07:49,875 --> 01:07:50,790 DAVID J. MALAN: Ja. 1455 01:07:50,790 --> 01:07:51,300 Yeah. 1456 01:07:51,300 --> 01:07:51,540 OK. 1457 01:07:51,540 --> 01:07:53,530 Så kan jeg holde opp telefon for bare et øyeblikk? 1458 01:07:53,530 --> 01:07:57,504 Så, forhåpentligvis, hvis du skal ha tilgang det, bør det ser nesten uleselig. 1459 01:07:57,504 --> 01:07:59,920 Det er still-- Jeg mener, det er uleselig på grunn av det latinske. 1460 01:07:59,920 --> 01:08:01,920 Men det er også uleselig for hva andre grunner? 1461 01:08:01,920 --> 01:08:03,775 Liker, hva behager du om dette? 1462 01:08:03,775 --> 01:08:04,650 PUBLIKUM: Det er liten. 1463 01:08:04,650 --> 01:08:06,420 DAVID J. MALAN: Det er super, super liten. 1464 01:08:06,420 --> 01:08:07,920 Så hvordan kan vi fikse dette? 1465 01:08:07,920 --> 01:08:09,730 Det er super, super liten på Victoria telefon 1466 01:08:09,730 --> 01:08:11,400 og hvis du har trukket det opp selv, trolig 1467 01:08:11,400 --> 01:08:14,660 lite på telefonen også, med mindre du tilgjengelighetsinnstillinger aktivert. 1468 01:08:14,660 --> 01:08:15,530 Hva er det? 1469 01:08:15,530 --> 01:08:18,497 Du kunne bare klemme og zoom, som er gjennomførbar, 1470 01:08:18,497 --> 01:08:20,330 men da må du bare se noen få ord om gangen. 1471 01:08:20,330 --> 01:08:20,859 Så vent litt. 1472 01:08:20,859 --> 01:08:21,720 Jeg vet hvordan å fikse dette. 1473 01:08:21,720 --> 01:08:22,219 Høyre? 1474 01:08:22,219 --> 01:08:26,130 Jeg kunne bruke CSS, og jeg kunne endre skriftstørrelsen fra 12-punkt til 24 punkter. 1475 01:08:26,130 --> 01:08:29,020 Men den bivirkning av dette, selvfølgelig, kommer til å være nå, 1476 01:08:29,020 --> 01:08:32,630 på en stasjonær eller en bærbar PC, Nå teksten er dobbelt så stor. 1477 01:08:32,630 --> 01:08:35,810 Og så det ville slags være hyggelig for å skille mellom enhetene, 1478 01:08:35,810 --> 01:08:37,840 og det viser seg at det er måter å gjøre det. 1479 01:08:37,840 --> 01:08:39,590 Det er flere forskjellige måter, faktisk 1480 01:08:39,590 --> 01:08:44,189 der ved hjelp av CSS og mer avansert funksjoner at vi ikke vil gå inn i stor detalj, 1481 01:08:44,189 --> 01:08:46,960 du kan faktisk spørre leseren og si: 1482 01:08:46,960 --> 01:08:51,550 Hvis skjermen er mindre enn dette mange piksler, bruker denne skriftstørrelsen. 1483 01:08:51,550 --> 01:08:55,180 Hvis skjermen er større enn dette mange piksler, bruk denne annen skriftstørrelse. 1484 01:08:55,180 --> 01:08:57,080 >> Du kan bli enda mer avansert fortsatt. 1485 01:08:57,080 --> 01:09:00,140 Hvis du noensinne har besøkt en nettside som, på et skrivebord, 1486 01:09:00,140 --> 01:09:04,404 har en stor meny kanskje ut til side, og deretter alt innholdet 1487 01:09:04,404 --> 01:09:07,029 er på siden av det menu-- det er en slags felles paradigme. 1488 01:09:07,029 --> 01:09:09,670 Meny på venstre, innhold på høyre, eller vice versa. 1489 01:09:09,670 --> 01:09:13,569 Har egentlig ikke fungerer på mobil når Skjermen er bare så mange piksler bredt. 1490 01:09:13,569 --> 01:09:16,233 Så mer vanlig på mobil er, menyen vil plutselig få 1491 01:09:16,233 --> 01:09:18,399 kollapset, og du må Klikk på en knapp for å se det, 1492 01:09:18,399 --> 01:09:22,404 eller nettsiden vil sette menyen over den og sette innholdet under. 1493 01:09:22,404 --> 01:09:24,779 Og du kan implementere disse ting på flere måter, også. 1494 01:09:24,779 --> 01:09:28,340 Du kan be dine programmerere, hei, team, som helst 1495 01:09:28,340 --> 01:09:34,450 du ser en HTTP-forespørsel fra en Android enhet, en Microsoft-enhet, et Google 1496 01:09:34,450 --> 01:09:39,930 enhet, en Apple-enhet, bruker du denne skriftstørrelse og bruke denne menyen layout, 1497 01:09:39,930 --> 01:09:42,670 ellers bruker denne standard større layout. 1498 01:09:42,670 --> 01:09:45,410 >> Nå, ved hjelp av det fundamental teknikk i dag 1499 01:09:45,410 --> 01:09:48,529 kunne ingeniørene bruke å vite om det er 1500 01:09:48,529 --> 01:09:53,660 en iPhone, en Android-telefon, en bærbar datamaskin en stasjonær besøke selskapets server? 1501 01:09:53,660 --> 01:09:55,310 Der får de denne informasjonen? 1502 01:09:55,310 --> 01:09:56,080 >> PUBLIKUM: header? 1503 01:09:56,080 --> 01:09:57,740 >> DAVID J. MALAN: Ja, HTTP-hodet. 1504 01:09:57,740 --> 01:10:01,714 Så hver HTTP-forespørsel fra sine kunder til sine servere 1505 01:10:01,714 --> 01:10:03,880 omfatter, inne som virtuell konvolutt, en hel haug 1506 01:10:03,880 --> 01:10:08,260 av HTTP-hoder, er en av dem nettleseren og operativsystemet 1507 01:10:08,260 --> 01:10:10,290 selv, hvis du har lyst til å at detaljnivået. 1508 01:10:10,290 --> 01:10:13,790 Nå er det en kryptisk utseende streng, men det finnes programvare som vil like 1509 01:10:13,790 --> 01:10:18,530 forenkle det, og du kan bare spørre i programmering code-- PHP, Java, C ++, 1510 01:10:18,530 --> 01:10:23,650 whatever-- hva telefonen er dette-- hvilken enhet er denne brukeren bruker? 1511 01:10:23,650 --> 01:10:27,501 Og så kan du si, vise dem denne versjon av nettsiden hvis det er en telefon. 1512 01:10:27,501 --> 01:10:30,250 Vis dem denne versjonen av nettside hvis det er en bærbar eller stasjonær. 1513 01:10:30,250 --> 01:10:32,316 Men du trenger ikke engang server-side kompleksitet. 1514 01:10:32,316 --> 01:10:33,940 Du kan gjøre selv de enkleste ting. 1515 01:10:33,940 --> 01:10:34,815 >> Jeg kommer til å gjøre dette. 1516 01:10:34,815 --> 01:10:38,995 Jeg kommer til å gå videre inn i min Cloud9 miljø, 1517 01:10:38,995 --> 01:10:41,370 og jeg kommer til å legge til en kode som du så i Google før. 1518 01:10:41,370 --> 01:10:42,770 Det kalles metakode. 1519 01:10:42,770 --> 01:10:45,520 Og jeg husker aldri dette, så Jeg kommer til å transkribere det her. 1520 01:10:45,520 --> 01:10:50,552 Meta name = "view" og deretter content = "width = enhetens bredde, intital 1521 01:10:50,552 --> 01:11:02,060 skala = 1 "og det er det. 1522 01:11:02,060 --> 01:11:06,230 >> Så det kan like godt være som en magisk besvergelse. 1523 01:11:06,230 --> 01:11:11,300 Det er ikke alle som klart, men dette har noe å gjøre med visningsfeltet, 1524 01:11:11,300 --> 01:11:15,070 og view er bare kroppen til en nettside, den rektangulære regionen som 1525 01:11:15,070 --> 01:11:16,690 definerer det meste av siden. 1526 01:11:16,690 --> 01:11:19,060 Og dette er bare å fortelle leseren, vet du hva? 1527 01:11:19,060 --> 01:11:22,589 Gjør bredden på denne siden effektivt lik enheten bredde. 1528 01:11:22,589 --> 01:11:25,380 Med andre ord, ikke anta at du har liksom ubegrenset plass. 1529 01:11:25,380 --> 01:11:29,920 Anta at du bare har så mye plass som selve enheten er stor. 1530 01:11:29,920 --> 01:11:34,454 Og så nå, hvis jeg laste dette i nettleseren min, ser jeg ingen endring. 1531 01:11:34,454 --> 01:11:37,370 Men hvis jeg gjorde dette correctly-- og la meg krysse min fingerbevegelsene, hvis dere alle 1532 01:11:37,370 --> 01:11:42,920 laste inn telefoner, gjør du se en overbevisende forandring? 1533 01:11:42,920 --> 01:11:43,620 Ja, er at-- 1534 01:11:43,620 --> 01:11:45,067 >> PUBLIKUM: [uhørlig] 1535 01:11:45,067 --> 01:11:45,900 DAVID J. MALAN: Ja. 1536 01:11:45,900 --> 01:11:46,400 OK. 1537 01:11:46,400 --> 01:11:47,850 Så kanskje mer lesbar nå? 1538 01:11:47,850 --> 01:11:53,070 Fortsatt liten, for å være rettferdig, men ikke så liten som å være uhåndterlig. 1539 01:11:53,070 --> 01:11:56,920 Og jeg kunne sikkert overstyre dette videre med CSS eller på serversiden, 1540 01:11:56,920 --> 01:12:00,120 men i økende grad hva du er se er flere og flere funksjoner 1541 01:12:00,120 --> 01:12:02,900 blir lagt til i klientsiden environments-- 1542 01:12:02,900 --> 01:12:06,530 Javascript, som vi vil diskutere i morgen, CSS og HTML-- så 1543 01:12:06,530 --> 01:12:09,190 at alle disse søkene kan gjøres på klienten 1544 01:12:09,190 --> 01:12:11,910 slik som å bry Serveren mye mindre og ikke 1545 01:12:11,910 --> 01:12:14,530 å ha for å holde tritt med, for eksempel, den konstante angrep 1546 01:12:14,530 --> 01:12:17,210 av nye operativsystemet versjoner, nye nettleserversjoner. 1547 01:12:17,210 --> 01:12:20,190 Du kan bare la nettleseren spør enheten, hvor stor er du, 1548 01:12:20,190 --> 01:12:22,890 og deretter gjøre noe logisk avgjørelser basert på det. 1549 01:12:22,890 --> 01:12:25,140 Men vi får se flere muligheter for logiske beslutninger 1550 01:12:25,140 --> 01:12:27,223 morgen i sammenheng av et programmeringsspråk. 1551 01:12:27,223 --> 01:12:29,800 1552 01:12:29,800 --> 01:12:32,760 >> Så, noen spørsmål, da, på web utvikling? 1553 01:12:32,760 --> 01:12:36,130 I dag er ikke web-programmering, per se, siden de fleste alt vi gjorde 1554 01:12:36,130 --> 01:12:38,370 var svært estetiske, hvis du vil. 1555 01:12:38,370 --> 01:12:41,750 Det er ingen beslutningsprosesser i koden som vi har skrevet, 1556 01:12:41,750 --> 01:12:44,990 og så det er derfor HTML er et markerings språk, ikke et programmeringsspråk. 1557 01:12:44,990 --> 01:12:47,140 Men i morgen vil vi ta en rask titt, til slutt, 1558 01:12:47,140 --> 01:12:49,340 på Javascript, noe som er en faktisk programmering 1559 01:12:49,340 --> 01:12:54,220 språk som lar oss gjøre litt mer. 1560 01:12:54,220 --> 01:12:56,800 >> Noen spørsmål? 1561 01:12:56,800 --> 01:13:00,480 Vel, la meg foreslå to muligheter valg for lekser. 1562 01:13:00,480 --> 01:13:02,900 En er-- disse Cloud9 kontoer vil ikke utløpe. 1563 01:13:02,900 --> 01:13:04,669 Du er velkommen til å bruke dem å tinker med. 1564 01:13:04,669 --> 01:13:05,960 Det er gratis servicenivået. 1565 01:13:05,960 --> 01:13:08,754 Innse at hvis når du oppretter arbeidsområdet, du har gjort det offentlig, 1566 01:13:08,754 --> 01:13:11,670 som betyr at hvem som helst på Internett kan se hva du skriver. 1567 01:13:11,670 --> 01:13:15,104 Så kanskje bare vurdere ikke pinlig selv 1568 01:13:15,104 --> 01:13:18,020 hvis du setter ditt første web side der ute offentlig uhell, 1569 01:13:18,020 --> 01:13:20,134 men ingen kommer til å vet å se det allikevel. 1570 01:13:20,134 --> 01:13:23,760 >> Og two-- la meg kaste opp denne URL også, 1571 01:13:23,760 --> 01:13:28,250 spesielt hvis du kom i dag en litt mindre behagelig enn andre, 1572 01:13:28,250 --> 01:13:30,430 usikker på hva alt dette betyr. 1573 01:13:30,430 --> 01:13:36,780 Innse at mye mer av denne videoen som er både en god måte å sovne 1574 01:13:36,780 --> 01:13:39,380 og også til å le mens å gjøre dette, har også 1575 01:13:39,380 --> 01:13:44,300 mye societally interessant og sikkerhetsrelevante diskusjoner 1576 01:13:44,300 --> 01:13:47,370 deri fra John Oliver, riktignok en komiker. 1577 01:13:47,370 --> 01:13:55,456 >> Men hvis det er noen flere spørsmål, som bringer oss til resepsjonen. 1578 01:13:55,456 --> 01:13:56,830 Så hvorfor ikke jeg slår på musikk. 1579 01:13:56,830 --> 01:13:58,610 Det bør være drikkevarer og snacks utenfor. 1580 01:13:58,610 --> 01:14:00,220 Jeg er glad for å blande for så lenge folk ønsker, 1581 01:14:00,220 --> 01:14:01,600 besvare spørsmål mer en-mot-en. 1582 01:14:01,600 --> 01:14:03,330 Men, ellers er du velkommen å ta av når som helst, 1583 01:14:03,330 --> 01:14:05,740 og vi vil se deg igjen i morgen for litt mer. 1584 01:14:05,740 --> 01:14:07,290 Greit, takk. 1585 01:14:07,290 --> 01:14:10,428