1 00:00:00,000 --> 00:00:00,127 2 00:00:00,127 --> 00:00:01,210 DAVID J. MALAN: Oké. 3 00:00:01,210 --> 00:00:02,160 We zijn terug. 4 00:00:02,160 --> 00:00:05,810 Dus, het doel van deze laatste sessie is een paar concepten te introduceren 5 00:00:05,810 --> 00:00:09,290 maar geven ook iedereen een kans van de soort strek je vingers 6 00:00:09,290 --> 00:00:11,270 en eigenlijk iets te doen een beetje hands-on. 7 00:00:11,270 --> 00:00:13,897 Het doel is te draaien ons allemaal in webontwikkelaars 8 00:00:13,897 --> 00:00:16,230 met alle middelen, maar eigenlijk gewoon om u een voorproefje van enkele geven 9 00:00:16,230 --> 00:00:21,750 van de fundamentele constructen wat gaat in web programmeren en vandaag web 10 00:00:21,750 --> 00:00:23,980 ontwikkeling, zodat de statische kant van things-- 11 00:00:23,980 --> 00:00:26,660 geen logica, geen programmering taal, maar statische content. 12 00:00:26,660 --> 00:00:29,660 En het zal ons een kans te geven om daadwerkelijk te zien wat een webserver, 13 00:00:29,660 --> 00:00:34,140 Zie wat een HTML-bestand is, zien wat HTTP is eigenlijk serveren. 14 00:00:34,140 --> 00:00:38,600 Maar voordat we een duik in, terugwerkende kracht vragen over cloud computing 15 00:00:38,600 --> 00:00:43,922 of de veiligheid of iets daar tussenin? 16 00:00:43,922 --> 00:00:44,890 >> Nee? 17 00:00:44,890 --> 00:00:47,181 Oké, goed, laten we Dit doen, voor het geval 18 00:00:47,181 --> 00:00:49,680 het proces van het aanmelden voor iets duurt een paar minuten. 19 00:00:49,680 --> 00:00:51,221 We zullen laten doen het op de achtergrond. 20 00:00:51,221 --> 00:00:56,860 Ga je gang, als je zou kunnen, naar deze URL hier-- c9.io. 21 00:00:56,860 --> 00:01:02,810 Dit is een third-party service-- platform as a service, als je will-- 22 00:01:02,810 --> 00:01:05,190 dat gaat u uit te nodigen aan te melden voor een account, 23 00:01:05,190 --> 00:01:08,650 en het gaat om een ​​ieder van jullie geven een rekening in de zogenaamde cloud 24 00:01:08,650 --> 00:01:11,330 op de infrastructuur van iemand anders, een bedrijf genaamd Cloud9. 25 00:01:11,330 --> 00:01:13,350 Maar wat er leuk is hiervoor is dat ze je geven 26 00:01:13,350 --> 00:01:15,990 een benadering van een werkelijke real-world ontwikkeling 27 00:01:15,990 --> 00:01:18,530 omgeving, zij het in de wolk en in een webbrowser, 28 00:01:18,530 --> 00:01:21,175 en we zullen dit gebruiken om daadwerkelijk een beetje experimenteren vandaag. 29 00:01:21,175 --> 00:01:27,116 30 00:01:27,116 --> 00:01:30,260 En dan ga je gang en gewoon navigeren je weg naar de sign-up proces 31 00:01:30,260 --> 00:01:32,630 als je zou kunnen. 32 00:01:32,630 --> 00:01:36,080 Dus gebeuren dat we om dit te gebruiken in de klas Ik geef les voor al onze studenten, 33 00:01:36,080 --> 00:01:39,140 zowel op de campus en off nu, en het is vervangen wat historisch gezien 34 00:01:39,140 --> 00:01:41,390 was anders downloadbare software. 35 00:01:41,390 --> 00:01:44,620 Dus wat je toegang verkrijgen tot is een van deze virtuele machines, 36 00:01:44,620 --> 00:01:46,460 in wezen, dat ik eerder beschreef. 37 00:01:46,460 --> 00:01:50,260 Dus dit bedrijf Cloud9 waarschijnlijk huurt van een derde Party-- inderdaad 38 00:01:50,260 --> 00:01:52,760 in dit geval Google als geheel bos van virtuele machines 39 00:01:52,760 --> 00:01:56,500 dat ze een of andere manier hakken in de illusie van afzonderlijke servers 40 00:01:56,500 --> 00:01:58,610 dat ieder van ons heeft de volledige controle over. 41 00:01:58,610 --> 00:02:01,640 Het is niet helemaal juist om te zeggen dat ze virtuele machines, 42 00:02:01,640 --> 00:02:04,550 maar, want wat Cloud9 gebruikt eigenlijk 43 00:02:04,550 --> 00:02:07,570 is een enigszins nieuwere technologie genaamd containerisatie. 44 00:02:07,570 --> 00:02:13,150 En laat me deze foto te grijpen hier om deze foto te schilderen. 45 00:02:13,150 --> 00:02:16,540 >> Een container, indien Herinnert u zich de foto 46 00:02:16,540 --> 00:02:19,900 uit eerder, een beetje lichter gewicht dan een virtuele machine. 47 00:02:19,900 --> 00:02:22,090 In feite, terwijl de laatste tijd hebben we gesproken over daar 48 00:02:22,090 --> 00:02:25,170 zijnde een operationeel -systeem en een hypervisor 49 00:02:25,170 --> 00:02:28,260 en dan gast-besturingssysteem, gast besturingssysteem, gastbesturingssystemen 50 00:02:28,260 --> 00:02:30,940 systeem, op de top van je fysieke hardware, 51 00:02:30,940 --> 00:02:33,740 Het verschil met deze nieuwere technologie, containerisatie, 52 00:02:33,740 --> 00:02:37,290 is dat ze allemaal ergens delen hetzelfde besturingssysteem. 53 00:02:37,290 --> 00:02:39,970 Maar ze nog steeds te maken de illusie van iedereen 54 00:02:39,970 --> 00:02:44,590 het hebben van zijn of haar eigen exclusieve beheerdersrechten en bestanden 55 00:02:44,590 --> 00:02:45,400 op de server. 56 00:02:45,400 --> 00:02:48,230 Maar er is minder software in tussen u en de hardware. 57 00:02:48,230 --> 00:02:52,260 Het resultaat daarvan is, in theorie, een hogere prestatie, 58 00:02:52,260 --> 00:02:55,470 want je gebruikt of verspillen minder middelen 59 00:02:55,470 --> 00:02:57,360 op die zogenaamde virtualisatie laag. 60 00:02:57,360 --> 00:02:59,420 Dus dit wordt genoemd containerisatie door de natuur 61 00:02:59,420 --> 00:03:02,920 door middel van een technologie genaamd Docker, dat is heel erg komt tot zijn recht. 62 00:03:02,920 --> 00:03:05,086 En dit is iets dat ingenieurs bij uw bedrijf 63 00:03:05,086 --> 00:03:08,610 misschien soort soort beginnen te praten over snel als ze dat nog niet gedaan, 64 00:03:08,610 --> 00:03:11,590 al is er zeker geen reden om te springen op een bandwagons. 65 00:03:11,590 --> 00:03:15,410 >> Dus met dat gezegd, wat je waarschijnlijk nu zien 66 00:03:15,410 --> 00:03:22,670 is een scherm dat een beetje lijkt op dit. 67 00:03:22,670 --> 00:03:23,170 OK. 68 00:03:23,170 --> 00:03:25,260 En bel me dan zo niet. 69 00:03:25,260 --> 00:03:27,440 En als so-- ik zal komen, zo niet. 70 00:03:27,440 --> 00:03:30,244 Ga je gang en klik op die grote plus een werkruimte te maken, 71 00:03:30,244 --> 00:03:31,660 en je krijgt een scherm zoals dit te zien. 72 00:03:31,660 --> 00:03:35,020 U kunt de werkruimte bellen noem alles wat je wilt voor nu. 73 00:03:35,020 --> 00:03:38,660 En net eigenlijk voor eenvoud, ga en-- goed, sommigen van jullie 74 00:03:38,660 --> 00:03:39,660 al werkruimten. 75 00:03:39,660 --> 00:03:47,050 Noem het wat je zaken want--, Harvard, donderdag, wat je wilt. 76 00:03:47,050 --> 00:03:48,800 U hoeft niet een beschrijving. 77 00:03:48,800 --> 00:03:52,380 Laat je hem gewoon privé, tenzij je hebben al een heleboel werkruimten. 78 00:03:52,380 --> 00:03:55,280 Als je gedwongen deze openbaar te maken, dat is prima voor de doeleinden van vandaag. 79 00:03:55,280 --> 00:03:56,750 Ook hier is een van de upsells. 80 00:03:56,750 --> 00:03:59,939 Je krijgt een private werkruimte door standaard. Maar als je meer wilt, 81 00:03:59,939 --> 00:04:00,980 je moet betalen voor meer. 82 00:04:00,980 --> 00:04:02,870 Anders, ze dwingen je om uw werk openbaar te maken. 83 00:04:02,870 --> 00:04:05,600 Maar dat is prima, want ze ook richten deze op open-source communities 84 00:04:05,600 --> 00:04:07,700 om mensen te stimuleren daadwerkelijk samenwerken. 85 00:04:07,700 --> 00:04:10,699 >> En het laatste wat dat is belangrijk, is echter, nadat u een naam te kiezen 86 00:04:10,699 --> 00:04:17,140 en nadat u private of publieke kiezen, klik op HTML5, de grote oranje icoontje 87 00:04:17,140 --> 00:04:22,430 tweede van links, en klik vervolgens op Maken Workspace. 88 00:04:22,430 --> 00:04:24,580 En het zal waarschijnlijk neem een ​​minuut of zo, 89 00:04:24,580 --> 00:04:26,540 maar je zult dan een milieu, als je eenmaal 90 00:04:26,540 --> 00:04:30,544 dat doen, dat doet denken aan kijkt wat ik heb op het scherm nu hier. 91 00:04:30,544 --> 00:04:33,210 Maar, nogmaals, het kan even duren of meer om naar dit scherm te krijgen 92 00:04:33,210 --> 00:04:34,770 als je eenmaal hebt geklikt Maak Workspace. 93 00:04:34,770 --> 00:04:37,936 Maar vlag me over als je me wilt een kijkje nemen op iets of advies te nemen. 94 00:04:37,936 --> 00:04:40,191 95 00:04:40,191 --> 00:04:40,690 Okee. 96 00:04:40,690 --> 00:04:42,390 Dus ik ga naar de achtergrond dit voor nu. 97 00:04:42,390 --> 00:04:44,260 Bel me over als je lijkt te technische problemen. 98 00:04:44,260 --> 00:04:46,210 Maar, nogmaals, misschien neem een iets daarvoor te openen. 99 00:04:46,210 --> 00:04:49,570 En laten we gaan en praten over wat Het betekent in feite om een ​​webpagina te maken, 100 00:04:49,570 --> 00:04:52,780 wat HTML is, en hoe dit alles Nu verbindt als we beginnen 101 00:04:52,780 --> 00:04:54,730 daadwerkelijk te gebruiken deel van de technologie. 102 00:04:54,730 --> 00:04:58,310 Dus het blijkt dat ik kan ga op mijn kleine Mac hier, 103 00:04:58,310 --> 00:05:01,650 open een eenvoudig programma genaamd TextEdit of Windows ik kon 104 00:05:01,650 --> 00:05:04,480 geopend iets genaamd Notepad.exe. 105 00:05:04,480 --> 00:05:08,260 En ik kon gewoon iets te doen zoals dit-- "hello, world." 106 00:05:08,260 --> 00:05:12,020 En toen kon ik dit op te slaan als hello.txt Dus geen magie daar. 107 00:05:12,020 --> 00:05:15,200 Dit heeft niets te maken met web programmering, niets te maken met HTML. 108 00:05:15,200 --> 00:05:16,790 Gewoon het creëren van een eenvoudig tekstbestand. 109 00:05:16,790 --> 00:05:20,600 Maar het blijkt dat een web pagina is letterlijk alleen dat. 110 00:05:20,600 --> 00:05:24,020 Het is een eenvoudig tekstbestand met tekst dat je zou kunnen typen op uw toetsenbord, 111 00:05:24,020 --> 00:05:30,070 maar gewoonlijk maar niet altijd eindigt niet .txt, maar .html of .htm. 112 00:05:30,070 --> 00:05:32,050 En je niet zomaar Typ woorden in het bestand. 113 00:05:32,050 --> 00:05:35,280 U eigenlijk om dingen geroepen te gebruiken markeringen of meer in het algemeen iets 114 00:05:35,280 --> 00:05:37,190 genaamd opmaaktaal. 115 00:05:37,190 --> 00:05:40,510 >> Dus ik ga heel snel typen en dan het volgende uit te leggen. 116 00:05:40,510 --> 00:05:42,290 Ik ga eerst typ dit, die zegt: 117 00:05:42,290 --> 00:05:45,730 hey, browser, hier komt een webpagina geschreven in HTML. 118 00:05:45,730 --> 00:05:51,850 En deze twee dingen samen zeggen: hey, browser, de volgende inderdaad HTML. 119 00:05:51,850 --> 00:05:55,790 Hey, browser, hier komt de hoofd of de top van mijn pagina. 120 00:05:55,790 --> 00:05:59,900 Hey, browser, de binnenkant van de top van mijn pagina, zet een titel die, "hallo, 121 00:05:59,900 --> 00:06:01,610 wereld." 122 00:06:01,610 --> 00:06:08,370 Hey, browser, nadat het hoofd van mijn pagina, hier komt het lichaam van mijn pagina. 123 00:06:08,370 --> 00:06:12,170 En, hey, browser, het lichaam van mijn pagina moet ook zeggen, "hallo wereld." 124 00:06:12,170 --> 00:06:15,500 Dus wat zijn de meest opvallende gegevens hier? 125 00:06:15,500 --> 00:06:17,960 Dit is wat over het algemeen riep een doc-type verklaring, 126 00:06:17,960 --> 00:06:20,190 en, eerlijk gezegd, het is een beetje moeilijk om dit eerst memoriseren. 127 00:06:20,190 --> 00:06:21,481 Je gewoon een soort van kopiëren-plakken. 128 00:06:21,481 --> 00:06:23,760 Dit is de formele weg te zeggen, hey, browser, 129 00:06:23,760 --> 00:06:28,030 Ik ben met behulp van HTML-versie 5, die kwam enigszins onlangs. 130 00:06:28,030 --> 00:06:31,380 Het is een magische bezwering dat sommige mensen met een slecht gevoel voor design 131 00:06:31,380 --> 00:06:33,640 besloten op de te zetten top van het bestand. 132 00:06:33,640 --> 00:06:35,473 Ook al is het een beetje mysterieus, dat is alles 133 00:06:35,473 --> 00:06:38,250 Het means-- hey, browser, hier wordt geleverd met versie 5 van HTML. 134 00:06:38,250 --> 00:06:41,741 >> De rest van deze is bij ons al enige tijd, historisch gezien, 135 00:06:41,741 --> 00:06:44,740 maar het is in ontwikkeling geweest, en het is waarschijnlijk een beetje eenvoudiger. 136 00:06:44,740 --> 00:06:47,320 Let op een paar kenmerken van wat ik heb gemarkeerd. 137 00:06:47,320 --> 00:06:49,890 Er zijn deze dingen met haakse brackets-- de linker beugel 138 00:06:49,890 --> 00:06:51,040 en de rechter beugel. 139 00:06:51,040 --> 00:06:52,490 En let op de symmetrie hier. 140 00:06:52,490 --> 00:06:57,340 En door symmetrie, ik bedoel, net zoals ik hebben deze start tag hier of een open tag 141 00:06:57,340 --> 00:07:01,560 als je wil, hier beneden Ik heb een sluit tag of een eind tag dat is 142 00:07:01,560 --> 00:07:06,460 verschillende voor zover zij deze slash aan het begin van het woord 143 00:07:06,460 --> 00:07:07,360 HTML. 144 00:07:07,360 --> 00:07:09,360 En je kunt bedenken dit als ik was terloops 145 00:07:09,360 --> 00:07:12,280 voorstellen voor, hey, browser, hier komt een aantal HTML. 146 00:07:12,280 --> 00:07:16,060 En omgekeerd, hey, browser, dat is het voor de HTML-- begin en einde. 147 00:07:16,060 --> 00:07:18,440 >> Ondertussen hey, browser, hier komt het hoofd van mijn pagina. 148 00:07:18,440 --> 00:07:20,140 Hey, browser, dat is het voor het hoofd. 149 00:07:20,140 --> 00:07:22,240 Hey, browser, hier is het lichaam van mijn pagina. 150 00:07:22,240 --> 00:07:24,020 Hey, browser, dat is het voor het lichaam. 151 00:07:24,020 --> 00:07:26,940 En de binnenkant van dat sommige willekeurige tekst voor nu. 152 00:07:26,940 --> 00:07:30,520 En de binnenkant van het hoofd, ondertussen, is een willekeurig, maar hebben, 153 00:07:30,520 --> 00:07:34,410 zo te zeggen, tekst die zegt, de titel van mijn pagina zal worden "hello, world." 154 00:07:34,410 --> 00:07:37,470 Nu, voor nu, kunt u veronderstellen dat browsers 155 00:07:37,470 --> 00:07:41,762 hebben only-- of liever, webpagina's slechts twee parts-- de kop en het lichaam. 156 00:07:41,762 --> 00:07:44,220 En het hoofd is over het algemeen gewoon zoals de menubalk, het spul 157 00:07:44,220 --> 00:07:45,510 eigenlijk alleen maar aan de top. 158 00:07:45,510 --> 00:07:48,910 En het lichaam is het lef van de pagina, alles in die grote rechthoek 159 00:07:48,910 --> 00:07:50,239 dat vult het scherm. 160 00:07:50,239 --> 00:07:51,780 Dus ik ga om te gaan en dit te doen. 161 00:07:51,780 --> 00:07:54,400 Ik ga om verder te gaan en klik op Opslaan, Bestand opslaan. 162 00:07:54,400 --> 00:07:58,580 En ik ga op te slaan dit als hello.html, 163 00:07:58,580 --> 00:08:00,870 en ik ga gewoon zet het op mijn desktop. 164 00:08:00,870 --> 00:08:03,520 En ik ga om te gaan vooruit en klik op Opslaan. 165 00:08:03,520 --> 00:08:05,806 En notice-- mijn Mac bij minimaal is schreeuwen tegen me. 166 00:08:05,806 --> 00:08:07,180 Weet je zeker dat je dit wilt doen? 167 00:08:07,180 --> 00:08:08,710 En ik ga zeggen, ja, HTML gebruiken. 168 00:08:08,710 --> 00:08:10,400 Ik weet wel beter in dit geval. 169 00:08:10,400 --> 00:08:14,686 En nu ga ik naar mijn desktop waar ik dit bestand plotseling. 170 00:08:14,686 --> 00:08:16,060 En ik ga dubbelklik erop. 171 00:08:16,060 --> 00:08:18,268 En je zult merken dat, door Standaard Chrome geopend. 172 00:08:18,268 --> 00:08:19,996 Dat is want dat is mijn standaard browser. 173 00:08:19,996 --> 00:08:21,370 En het is gewoon zegt: "hello, world." 174 00:08:21,370 --> 00:08:23,078 Maar het zegt "hello, wereld 'op twee plaatsen. 175 00:08:23,078 --> 00:08:23,979 Let linksboven. 176 00:08:23,979 --> 00:08:25,020 Vrij moeilijk te missen. 177 00:08:25,020 --> 00:08:26,180 Het is groot en vet. 178 00:08:26,180 --> 00:08:30,690 En waar anders lijkt het te zeggen: "hello, world"? 179 00:08:30,690 --> 00:08:31,470 >> Publiek: Het tabblad. 180 00:08:31,470 --> 00:08:33,100 >> DAVID J. MALAN: Ja, het tabblad zelf. 181 00:08:33,100 --> 00:08:35,159 Dus toen ik zei het hoofd van de page is alles up top-- 182 00:08:35,159 --> 00:08:36,367 en in feite is dit de titel. 183 00:08:36,367 --> 00:08:37,710 Het is gewoon op het tabblad hier. 184 00:08:37,710 --> 00:08:40,320 En ik kan dit tabblad trekken uit om niet te verwarren. 185 00:08:40,320 --> 00:08:43,360 Dit is slechts een enkele tab nu, en inderdaad zien we "hello, world" 186 00:08:43,360 --> 00:08:45,970 hier en "hello, world" hier beneden. 187 00:08:45,970 --> 00:08:47,160 Dus vrij eenvoudig. 188 00:08:47,160 --> 00:08:49,050 Maar het is ook vrij eenvoudig. 189 00:08:49,050 --> 00:08:50,440 En, eigenlijk, ik ingezoomd. 190 00:08:50,440 --> 00:08:53,272 Ik kan de lettergrootte verander gewoon te vergroten voor toegankelijkheid. 191 00:08:53,272 --> 00:08:56,830 Maar laten we nu iets te doen een beetje meer interessant. 192 00:08:56,830 --> 00:08:59,760 >> Ik ga gaan-- whoops, laat me terug naar mijn tekstbestand. 193 00:08:59,760 --> 00:09:02,400 Ik ga terug naar mijn tekstbestand, en ik ga 194 00:09:02,400 --> 00:09:06,320 om dit te veranderen en te zeggen "Hallo, Disney World." 195 00:09:06,320 --> 00:09:07,970 Besparen. 196 00:09:07,970 --> 00:09:10,919 En ga terug naar mijn browser en klik op vernieuwen. 197 00:09:10,919 --> 00:09:12,710 En nu, natuurlijk, het zegt: "Disney World." 198 00:09:12,710 --> 00:09:15,500 En ik ga kunstmatig zoomen in slechts zodat het makkelijker is om te zien. 199 00:09:15,500 --> 00:09:19,012 Dus nu, helaas, ik soort van wil to-- eigenlijk, dat is een Mac-functie. 200 00:09:19,012 --> 00:09:21,720 Ik wil om te klikken op Disney World en ga ergens zoals disney.com, 201 00:09:21,720 --> 00:09:23,290 maar dat werkt niet. 202 00:09:23,290 --> 00:09:26,850 Dus een basisprincipe van het web is hyperlinks, links die ergens anders heen gaan. 203 00:09:26,850 --> 00:09:28,390 Dus hoe kan ik dat doen? 204 00:09:28,390 --> 00:09:34,690 Nou, ik kan alleen maar zeggen, "Hallo, http://www.disney.com." 205 00:09:34,690 --> 00:09:36,110 Red Dit. 206 00:09:36,110 --> 00:09:37,620 Herladen. 207 00:09:37,620 --> 00:09:39,400 Maar dit ook niet klikbaar. 208 00:09:39,400 --> 00:09:42,930 En wat is leuk hier, ook al Dit is nog niet functioneel, 209 00:09:42,930 --> 00:09:45,930 is dat het lijkt dat de browser doet letterlijk alleen 210 00:09:45,930 --> 00:09:46,950 wat ik vertel het aan te doen. 211 00:09:46,950 --> 00:09:50,110 Dus als ik typ gewoon een URL zoals deze, het is gewoon om te laten zien me de URL. 212 00:09:50,110 --> 00:09:54,270 Ik moet om tags of markup taal om daadwerkelijk te vertellen 213 00:09:54,270 --> 00:09:55,621 de browser om nog meer te doen. 214 00:09:55,621 --> 00:09:57,870 Dus ik ga om te gaan en verwijder dit voor een moment. 215 00:09:57,870 --> 00:10:00,980 En ik ga zeggen, hey, browser, start een anker hier, 216 00:10:00,980 --> 00:10:02,650 een link om zo te zeggen. 217 00:10:02,650 --> 00:10:07,500 En de hyper-verwijzing, de bestemming van dat anker moet deze URL. 218 00:10:07,500 --> 00:10:08,750 En merk mijn quotes. 219 00:10:08,750 --> 00:10:11,590 Ik kon enkele aanhalingstekens te gebruiken, ook, maar je moet consequent zijn, 220 00:10:11,590 --> 00:10:14,270 en ik zou in het algemeen gewoon gebruik dubbele aanhalingstekens om het simpel te houden. 221 00:10:14,270 --> 00:10:16,820 Let op, ik ga naar de tag te sluiten. 222 00:10:16,820 --> 00:10:21,160 En dan hier ga ik te zeggen: "Disney World." 223 00:10:21,160 --> 00:10:26,890 En nu moet ik wat symmetry-- geopend beugel / a, gesloten beugel. 224 00:10:26,890 --> 00:10:28,090 >> Dus wat heb ik geïntroduceerd? 225 00:10:28,090 --> 00:10:30,100 We hebben een paar labels al gehad. 226 00:10:30,100 --> 00:10:32,410 HTML, hoofd, titel, Body, zijn alle tags zogezegd, 227 00:10:32,410 --> 00:10:34,280 met open en gesloten tegenhangers. 228 00:10:34,280 --> 00:10:36,530 Maar let op, dit is een soort van fundamenteel verschillend. 229 00:10:36,530 --> 00:10:39,140 Dit is wat we zullen noemen in HTML een attribuut. 230 00:10:39,140 --> 00:10:41,451 En een attribuut slechts een key-waarde paar. 231 00:10:41,451 --> 00:10:43,950 Dit is een gemeenschappelijk ding in computer science-- key-waarde paar. 232 00:10:43,950 --> 00:10:45,770 Het is een soort van het gereedschap van de handel. 233 00:10:45,770 --> 00:10:47,040 Een sleutel en een waarde. 234 00:10:47,040 --> 00:10:49,390 Het woord en vervolgens een aantal ander woord of woorden. 235 00:10:49,390 --> 00:10:53,790 En in dit geval, de sleutel href, en de waarde die volledige URL. 236 00:10:53,790 --> 00:10:57,890 En wat een attribuut doet is het beïnvloedt het gedrag van een label. 237 00:10:57,890 --> 00:11:01,010 En in dit geval, moeten we beïnvloeden het gedrag van de ankertag, 238 00:11:01,010 --> 00:11:04,140 want we moeten verankeren Deze link ergens. 239 00:11:04,140 --> 00:11:06,960 En hoe je dat doet is door middel van het attribuut. 240 00:11:06,960 --> 00:11:08,970 >> Dus ik ga om verder te gaan en nu sla het bestand op. 241 00:11:08,970 --> 00:11:11,300 Ga terug naar mijn browser en herladen. 242 00:11:11,300 --> 00:11:14,580 En voila, we hebben nu de begin van een legitieme webpagina. 243 00:11:14,580 --> 00:11:18,420 Super-eenvoudig, maar als ik de muisaanwijzer over dit-- mededeling in de linkerbenedenhoek, 244 00:11:18,420 --> 00:11:19,830 het is super-klein. 245 00:11:19,830 --> 00:11:21,730 Maar je ziet www.disney.com. 246 00:11:21,730 --> 00:11:27,076 En als ik erop klik, inderdaad dit gardes me weg te disney.com. 247 00:11:27,076 --> 00:11:29,380 Nu is het merkwaardig Hier is dat het niet 248 00:11:29,380 --> 00:11:33,940 de best-- de meest verkoopbare URL, maar dat is prima, want dit bestand niet doet 249 00:11:33,940 --> 00:11:35,360 bestaan ​​op het World Wide Web. 250 00:11:35,360 --> 00:11:39,740 Het bestaat als een lokaal bestand in schijnbaar mijn Gebruikers directory-- / jharvard-- 251 00:11:39,740 --> 00:11:41,890 voor John Harvard-- / desktop. 252 00:11:41,890 --> 00:11:42,634 Maar het heeft een URL. 253 00:11:42,634 --> 00:11:43,800 Het gebeurt gewoon lokaal te zijn. 254 00:11:43,800 --> 00:11:47,050 Helaas kan niemand van jullie te bezoeken dit, want als je deze URL typt, 255 00:11:47,050 --> 00:11:49,980 je zou vertellen van uw browser, zoek naar een bestand met de naam hello.html 256 00:11:49,980 --> 00:11:50,772 op uw harde schijf. 257 00:11:50,772 --> 00:11:53,271 En, natuurlijk, tenzij je hebt handmatig volgende mee, 258 00:11:53,271 --> 00:11:54,530 het gaat niet om er te bestaan. 259 00:11:54,530 --> 00:11:55,190 >> Dus dat is prima. 260 00:11:55,190 --> 00:11:57,815 We moeten nog een manier, uiteindelijk, om dit bestand te krijgen in het web, 261 00:11:57,815 --> 00:12:01,180 maar laten we plagen elkaar een paar gevolgen voor de beveiliging van wat we zojuist 262 00:12:01,180 --> 00:12:04,850 zag en bind het terug naar de vroegere bespreking van deze ochtend. 263 00:12:04,850 --> 00:12:08,200 Het blijkt dat, indien een browser letterlijk net doet 264 00:12:08,200 --> 00:12:12,560 wat ik vertel het aan te doen, en het lijkt het geval dat een anker tag is zijn 265 00:12:12,560 --> 00:12:17,380 beïnvloed door de waarde van dit kenmerk genoemd href 266 00:12:17,380 --> 00:12:20,810 maar het toont dit tekst, deze lijkt 267 00:12:20,810 --> 00:12:26,520 te impliceren dat ik de URL kon zetten in beide plaatsen en vervolgens opnieuw 268 00:12:26,520 --> 00:12:29,100 en nu de URL en ga naar de URL. 269 00:12:29,100 --> 00:12:32,680 Let op, als ik de muisaanwijzer op de bottom-links, Ik ben inderdaad nog steeds te disney.com. 270 00:12:32,680 --> 00:12:38,340 >> Dus als je ooit bent geweest phished-- P-H-I-S-H-E-D-- 271 00:12:38,340 --> 00:12:42,820 met een van die valse e-mails uit zoals PayPal uw bank, 272 00:12:42,820 --> 00:12:46,470 je hebt waarschijnlijk gekregen links in van de e-mail die je leest dat 273 00:12:46,470 --> 00:12:49,970 vertelt u hier klikken om te bevestigen gaan uw wachtwoord of bevestig uw geboortedatum 274 00:12:49,970 --> 00:12:53,840 of sociale of iets sociaal Techniek u bekend te maken 275 00:12:53,840 --> 00:12:54,920 informatie. 276 00:12:54,920 --> 00:12:57,625 Nou, ik kon soort nemen Voordeel van deze, kon ik niet? 277 00:12:57,625 --> 00:13:01,240 Ik zou iets kunnen zeggen zoals, www.paypal.com. 278 00:13:01,240 --> 00:13:11,340 En in plaats van disney.com, I zou kunnen gaan, als, badguy.com. 279 00:13:11,340 --> 00:13:12,850 Herladen. 280 00:13:12,850 --> 00:13:16,620 En hoe gemakkelijk is het om dupe, met name een niet-technische lezer 281 00:13:16,620 --> 00:13:20,649 of een vluchtig lezen reader dan te klikken 282 00:13:20,649 --> 00:13:23,940 een link als deze, die, als ik klik het-- Ik eigenlijk niet willen badguy.com gaan. 283 00:13:23,940 --> 00:13:25,398 Ik weet niet wat er eigenlijk. 284 00:13:25,398 --> 00:13:30,080 Dus paypal.com, bericht, is wat het zegt dat het gaat om, 285 00:13:30,080 --> 00:13:33,210 maar natuurlijk, als ik kijk naar beneden super-laag, het is een beetje wazig, 286 00:13:33,210 --> 00:13:34,230 maar het zegt badguy.com. 287 00:13:34,230 --> 00:13:38,644 Dat is de enige nu vertellen dat ik ga naar de verkeerde plaats. 288 00:13:38,644 --> 00:13:41,560 En toen ik zei eerder dat de banken moet echt niet aanmoedigen of trein 289 00:13:41,560 --> 00:13:44,510 gebruikers in het klikken op koppelingen, deze is slechts een manifestatie van. 290 00:13:44,510 --> 00:13:45,430 En het is zo simpel. 291 00:13:45,430 --> 00:13:48,120 Je bent nu een tegenstander als je zoiets als dit te doen 292 00:13:48,120 --> 00:13:51,000 en proberen om een ​​gebruiker te misleiden in het bezoeken van uw website. 293 00:13:51,000 --> 00:13:53,320 Maar voor nu, we houden dingen mooi en schoon. 294 00:13:53,320 --> 00:13:55,640 We gaan om verder te gaan en terugspoelen deze veranderingen. 295 00:13:55,640 --> 00:13:56,530 Vernieuw de pagina. 296 00:13:56,530 --> 00:13:57,740 En ik ga terug naar disney.com. 297 00:13:57,740 --> 00:14:00,660 >> Laten we eens kijken of we niet kunnen plagen Dit apart een beetje meer. 298 00:14:00,660 --> 00:14:04,160 Dus "hallo, Disney World." 299 00:14:04,160 --> 00:14:05,950 Ik ga om hier te zeggen. 300 00:14:05,950 --> 00:14:08,220 Misschien ga ik wat ruimte te maken. 301 00:14:08,220 --> 00:14:12,730 "Wij hopen dat u geniet van uw verblijf!" 302 00:14:12,730 --> 00:14:13,830 Besparen. 303 00:14:13,830 --> 00:14:15,850 Herladen. 304 00:14:15,850 --> 00:14:19,010 Het is niet rea-- dat is niet wat ik van plan was, toch? 305 00:14:19,010 --> 00:14:21,870 Ik bedoel, als ik de behandeling van mijn tekst bestand als een tekstverwerker, 306 00:14:21,870 --> 00:14:24,894 wat heb je hopen zou hier gebeuren? 307 00:14:24,894 --> 00:14:27,060 Ja, ik voel me alsof er moet een lijn break hier te zijn, 308 00:14:27,060 --> 00:14:28,799 dus het voelt buggy op een bepaalde manier. 309 00:14:28,799 --> 00:14:31,090 Maar dat is eigenlijk opzettelijk, want net als voorheen, 310 00:14:31,090 --> 00:14:33,381 de browser zal alleen maar doe wat je hem vertelt wat te doen. 311 00:14:33,381 --> 00:14:34,806 Ik heb niet verteld dat het om lijnen te breken. 312 00:14:34,806 --> 00:14:37,930 Ik heb niet verteld dat het naar beneden te bewegen, zelfs hoewel, intuïtief, ik voel me alsof ik deed. 313 00:14:37,930 --> 00:14:39,805 Dus het blijkt dat we nodig hebben een beetje meer markup, 314 00:14:39,805 --> 00:14:41,390 en ik ga om dit te bevestigen als volgt. 315 00:14:41,390 --> 00:14:46,160 Ik ga dit eerst voorafgaan hello met wat een paragraaf tag genoemd. 316 00:14:46,160 --> 00:14:48,920 En dan ga ik om verder te gaan en wikkel deze andere zin 317 00:14:48,920 --> 00:14:54,370 in een andere paragraaf tag, ook al ze zijn super-korte alinea's. 318 00:14:54,370 --> 00:14:55,930 Nu ga ik om op te slaan. 319 00:14:55,930 --> 00:14:57,160 Herladen. 320 00:14:57,160 --> 00:14:59,070 En nu hebben we dat ruimte, en we soort 321 00:14:59,070 --> 00:15:01,680 de semantiek van twee aparte paragrafen. 322 00:15:01,680 --> 00:15:05,290 >> Dat is allemaal prima en goed, maar het zou leuk zijn om een ​​afbeelding toe te voegen aan deze pagina 323 00:15:05,290 --> 00:15:08,710 dus ik ga om te gaan kijken voor Mickey Mouse op Google Afbeeldingen. 324 00:15:08,710 --> 00:15:12,830 En gewoon voor de lol, ik ben gaat deze afbeelding te grijpen. 325 00:15:12,830 --> 00:15:15,350 Ik ga nu verder te gaan en pak de URL van het beeld 326 00:15:15,350 --> 00:15:16,510 hoewel er verschillende manieren om dit te doen. 327 00:15:16,510 --> 00:15:18,520 Voor nu, ga ik gewoon naar de URL te kopiëren. 328 00:15:18,520 --> 00:15:24,770 Ik ga terug te gaan in mijn tekst bestand, en ik ga hier te zeggen, 329 00:15:24,770 --> 00:15:31,160 img src = citaat unquote dat URL, super-lang. 330 00:15:31,160 --> 00:15:34,580 En dan is het idee van een beeld is een beetje anders. 331 00:15:34,580 --> 00:15:38,640 Er is echt geen notie van start een beeld en eindigt een beeld, 332 00:15:38,640 --> 00:15:40,630 als een start van een label een eind tag. 333 00:15:40,630 --> 00:15:43,840 het voelt zo een beetje raar om semantisch me om dit te doen, 334 00:15:43,840 --> 00:15:45,390 een close-image-tag hebben. 335 00:15:45,390 --> 00:15:46,780 Het is niet onjuist. 336 00:15:46,780 --> 00:15:48,840 Het is volkomen juist, en het wordt aangemoedigd, 337 00:15:48,840 --> 00:15:50,870 maar er is verkorte schrijfwijze. 338 00:15:50,870 --> 00:15:53,780 Ik kan soort tegelijk openen en sluiten hetzelfde label, 339 00:15:53,780 --> 00:15:55,510 en dat zal de browser gelukkig maken. 340 00:15:55,510 --> 00:15:56,950 Dus het is gewoon een beetje beknopter voor zaken 341 00:15:56,950 --> 00:15:59,408 dat conceptueel echt niet zin om te beginnen en eindigen. 342 00:15:59,408 --> 00:16:01,190 Ze zijn er gewoon, of zijn ze niet. 343 00:16:01,190 --> 00:16:06,020 >> Dus ik ga dit op te slaan en terug te gaan mijn "hello, world" pagina en reload. 344 00:16:06,020 --> 00:16:09,880 En het is een beetje uit de hand, want dat imago is eigenlijk 345 00:16:09,880 --> 00:16:12,210 een beetje groot, maar dat is OK. 346 00:16:12,210 --> 00:16:13,710 Ik kon het formaat in een programma. 347 00:16:13,710 --> 00:16:14,900 Of weet je wat. 348 00:16:14,900 --> 00:16:17,350 Gewoon om te laten zien, ik ben gaat eigenlijk zeggen 349 00:16:17,350 --> 00:16:21,760 dat de breedte van dit ding moet slechts 200 pixels, 200 dots. 350 00:16:21,760 --> 00:16:24,360 Laat me ga je gang en op te slaan en herladen, en nu de pagina 351 00:16:24,360 --> 00:16:25,690 ziet er een beetje meer redelijk. 352 00:16:25,690 --> 00:16:27,260 Maar let op het patroon. 353 00:16:27,260 --> 00:16:30,030 Nou, ik heb soort onderwezen jullie allemaal HTML in zekere zin ten minste 354 00:16:30,030 --> 00:16:33,531 conceptueel, omdat alle HTML is is deze tags-- geopend labels, gesloten markeringen, 355 00:16:33,531 --> 00:16:35,280 en attributen die hun gedrag aan te passen. 356 00:16:35,280 --> 00:16:38,380 En blijkbaar elke tag kan nul of één hebben 357 00:16:38,380 --> 00:16:43,005 of twee of meer attributen, waarbij elk van die wel iets anders. 358 00:16:43,005 --> 00:16:44,380 Nu, hoe weet je wat bestaat? 359 00:16:44,380 --> 00:16:46,800 Je luistert alleen maar naar iemand zoals ik je vertellen wat er bestaat, 360 00:16:46,800 --> 00:16:50,860 of als je gewoon Google rond voor een tutorial op HTML, en het is echt zo eenvoudig. 361 00:16:50,860 --> 00:16:54,030 >> Waarlijk, toen ik een undergrad jaar geleden en leerde HTML, 362 00:16:54,030 --> 00:16:56,530 een van mijn wiskunde onderwijs assistenten brachten 363 00:16:56,530 --> 00:16:59,600 een beetje tijd begeleiding me voor als een half uur, een uur, 364 00:16:59,600 --> 00:17:00,660 en toen was ik op mijn weg. 365 00:17:00,660 --> 00:17:03,300 Ik was op weg naar het maken van de meest afschuwelijke websites ooit, 366 00:17:03,300 --> 00:17:05,549 die blijkbaar heb ik niet echt verder gekomen dan. 367 00:17:05,549 --> 00:17:09,849 Maar het punt is dat, als je eenmaal begrijpen deze eenvoudige ideas-- 368 00:17:09,849 --> 00:17:13,450 Als mysterieuze text-- maar deze eenvoudige ideeën van het starten van een gedachte 369 00:17:13,450 --> 00:17:15,960 en het sluiten van een gedachte, het houden alles mooi in balans, 370 00:17:15,960 --> 00:17:19,150 op zoek naar iets omhoog, het wijzigen van de gedrag van die tag, dat is echt alles 371 00:17:19,150 --> 00:17:20,079 daar is aan het. 372 00:17:20,079 --> 00:17:28,140 En inderdaad, als we nu naar zoiets eigenlijk google.com--, 373 00:17:28,140 --> 00:17:31,920 laten we gaan een plek een beetje meer reasonable-- stanford.edu. 374 00:17:31,920 --> 00:17:37,800 En ik ga om te gaan bekijken, Developer, Bron weergeven. 375 00:17:37,800 --> 00:17:41,400 Het is lelijk, maar notice-- en ik zal in de mededeling te zoomen 376 00:17:41,400 --> 00:17:43,432 sommige dingen die vertrouwd is reeds. 377 00:17:43,432 --> 00:17:45,140 Er is dit hier, die een browser. 378 00:17:45,140 --> 00:17:46,800 Hier komt HTML5. 379 00:17:46,800 --> 00:17:47,634 Er is HTML. 380 00:17:47,634 --> 00:17:49,550 Blijkbaar is er een toeschrijven dat ik niet 381 00:17:49,550 --> 00:17:51,540 Gebruik dat specificeert de taal van de pagina, 382 00:17:51,540 --> 00:17:54,380 en dit kan helpen met automatische vertaling en dat soort dingen. 383 00:17:54,380 --> 00:17:55,546 Hier is de kop van de pagina. 384 00:17:55,546 --> 00:17:57,790 Hier is de titel van de pagina Stanford. 385 00:17:57,790 --> 00:17:59,832 Er is een tag ik niet praten over yet-- Meta tag. 386 00:17:59,832 --> 00:18:01,540 Het is gewoon een soort van achtergrond informatie. 387 00:18:01,540 --> 00:18:04,210 Het helpt met SEO, of zoek machine optimalisatie, 388 00:18:04,210 --> 00:18:06,320 of Google-zoekresultaten of iets dergelijks. 389 00:18:06,320 --> 00:18:09,029 Maar als we blijven zoeken, blijven kijken, hier is de Body tag. 390 00:18:09,029 --> 00:18:11,570 En er is trossen van andere labels hebben we nog niet over gesproken. 391 00:18:11,570 --> 00:18:13,750 Maar Div is een ten verdeling van de pagina. 392 00:18:13,750 --> 00:18:16,680 Het is alsof een onzichtbare rechthoek als je soort wilt mentaal 393 00:18:16,680 --> 00:18:20,160 verdeel uw pagina in verschillende eenheden online. 394 00:18:20,160 --> 00:18:22,650 En dan veel divs I zie, iets genaamd Class, 395 00:18:22,650 --> 00:18:24,440 maar we zullen hierop terugkomen. 396 00:18:24,440 --> 00:18:26,200 >> Dit is interesting-- Forms. 397 00:18:26,200 --> 00:18:27,730 Formulieren zijn over het hele web. 398 00:18:27,730 --> 00:18:30,310 Elke zoekvak je bent ooit gebruikt is een vorm. 399 00:18:30,310 --> 00:18:31,490 En, ja, laten we eigenlijk zien. 400 00:18:31,490 --> 00:18:32,790 Formulier. 401 00:18:32,790 --> 00:18:33,910 Actie. 402 00:18:33,910 --> 00:18:37,660 De werking van dit formulier, om welke historische redenen, is dat URL. 403 00:18:37,660 --> 00:18:38,840 Methode is "post." 404 00:18:38,840 --> 00:18:44,060 Blijkt dat HTTP-verzoeken kunnen gebruiken het werkwoord "krijgen", zoals we eerder zagen, 405 00:18:44,060 --> 00:18:45,070 of "post." 406 00:18:45,070 --> 00:18:47,030 En zal een verschil te zien dit in een moment. 407 00:18:47,030 --> 00:18:48,363 Laten we eens echt zien wat dit is. 408 00:18:48,363 --> 00:18:49,830 Laat me terug naar pagina Stanford gaan. 409 00:18:49,830 --> 00:18:53,330 Welke vorm hebben ze het over, denk je? 410 00:18:53,330 --> 00:18:54,485 Wat springt uit bij u? 411 00:18:54,485 --> 00:18:54,970 >> PUBLIEK: zoekvak. 412 00:18:54,970 --> 00:18:55,845 >> DAVID J. MALAN: Yeah. 413 00:18:55,845 --> 00:18:58,410 Dus op naar de rechterbovenhoek hier is dit zoekvak. 414 00:18:58,410 --> 00:19:02,441 En dat is hoe ze geïmplementeerd het-- een tag dat is letterlijk open beugel vorm. 415 00:19:02,441 --> 00:19:03,940 En dan laten we zoeken naar iets. 416 00:19:03,940 --> 00:19:09,220 Laten we zoeken naar een buddy van mine-- "Nick Parlante." 417 00:19:09,220 --> 00:19:11,380 Enter. 418 00:19:11,380 --> 00:19:13,750 En natuurlijk, het ging om een iets andere URL. 419 00:19:13,750 --> 00:19:15,140 Laat me hier terug te gaan. 420 00:19:15,140 --> 00:19:18,960 Laten we zoeken voor "cursussen." 421 00:19:18,960 --> 00:19:19,460 Verdorie. 422 00:19:19,460 --> 00:19:20,484 We gingen naar een andere URL. 423 00:19:20,484 --> 00:19:23,400 Dus, Stanford's toe te voegen wat magie dat ze me niet re nemen om de URL 424 00:19:23,400 --> 00:19:25,820 die we zagen in de actie toeschrijven daar. 425 00:19:25,820 --> 00:19:32,480 Maar deze vorm hier is louter geïmplementeerd door middel van deze markup hier, deze tags. 426 00:19:32,480 --> 00:19:35,710 In feite, hier is de input voor het type zoekopdracht dat u wilt. 427 00:19:35,710 --> 00:19:38,940 Hier is de input voor een ander type zoekopdracht. 428 00:19:38,940 --> 00:19:41,960 Hier is de input voor de string zelf. 429 00:19:41,960 --> 00:19:45,394 En zo het doel is niet om te wikkelen onze gedachten rond al deze tags 430 00:19:45,394 --> 00:19:46,060 maar gewoon om te zien. 431 00:19:46,060 --> 00:19:48,300 Het is gewoon het openen en sluiten labels en op zoek dingen. 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 >> PUBLIEK: [ONVERSTAANBAAR] 435 00:19:49,795 --> 00:19:51,925 436 00:19:51,925 --> 00:19:53,550 DAVID J. MALAN: Dat is een goede vraag. 437 00:19:53,550 --> 00:19:54,660 Dat is een beetje lastiger te zien. 438 00:19:54,660 --> 00:19:56,300 Laat me terug te komen op dat vraag in slechts een paar minuten 439 00:19:56,300 --> 00:19:59,000 wanneer we kijken naar iets genaamd CSS of cascading style sheets, 440 00:19:59,000 --> 00:20:02,500 en we kunnen proberen af ​​te leiden zo veel van de pagina. 441 00:20:02,500 --> 00:20:08,090 Dus als we nu een kijkje nemen op google.com, laten we zien wat hun pagina eruit ziet. 442 00:20:08,090 --> 00:20:09,840 Je zou they're-- dat is leuk vandaag. 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 Helemaal klaar. 446 00:20:13,690 --> 00:20:15,260 Oké, dus Bron weergeven. 447 00:20:15,260 --> 00:20:19,590 Je zou denken dat Google heeft echt leuk broncode. 448 00:20:19,590 --> 00:20:24,970 Dus, blijkbaar, wat is hier aan de hand? 449 00:20:24,970 --> 00:20:27,880 En in feite is dit zelfs HTML. 450 00:20:27,880 --> 00:20:30,930 Dit is iets JavaScript genoemd. 451 00:20:30,930 --> 00:20:32,344 En laten we blijven gaan en gaan. 452 00:20:32,344 --> 00:20:34,010 Ik weet niet eens weten waar de pagina begint. 453 00:20:34,010 --> 00:20:37,240 Ik ga Command gebruiken F, geopend beugel HTML. 454 00:20:37,240 --> 00:20:38,200 Oké, daar is het. 455 00:20:38,200 --> 00:20:44,150 Ik vond het begin van de pagina en er is zo veel spullen in hier. 456 00:20:44,150 --> 00:20:45,310 >> Wat is er eigenlijk aan de hand? 457 00:20:45,310 --> 00:20:47,460 Nou, weet je wat, kunnen we dit opruimen. 458 00:20:47,460 --> 00:20:52,109 Als ik in plaats daarvan ga naar deze Inspect toolbar, deze speciale diagnose-instrument, 459 00:20:52,109 --> 00:20:54,150 en ga niet om te netwerken, waar we blijven gaan vandaag, 460 00:20:54,150 --> 00:20:56,420 maar als ik naar Elements, wat is echt leuk 461 00:20:56,420 --> 00:20:59,990 is dat een browser een stuk veel beter ogen dan ik. 462 00:20:59,990 --> 00:21:02,670 En de browser kan lezen die rotzooi van een webpagina, 463 00:21:02,670 --> 00:21:04,700 dat HTML-mail we gewoon bekeken, en kan 464 00:21:04,700 --> 00:21:08,340 ontleden het of lezen en analyseren en formatteren 465 00:21:08,340 --> 00:21:09,910 in een mooi mens-vriendelijke manier. 466 00:21:09,910 --> 00:21:11,740 Dus wat ik nu zien in dit scherm hier 467 00:21:11,740 --> 00:21:15,470 onder Elements, exact dezelfde inhoud, maar ze hebben alles ingesprongen, 468 00:21:15,470 --> 00:21:18,140 ze hebben het ingekleurd, maar Het is exact dezelfde tekst 469 00:21:18,140 --> 00:21:19,620 dat ik gedownload van de server. 470 00:21:19,620 --> 00:21:23,630 >> En wat is nu mooi is dat ik kan zien in het lichaam, voor instance-- bericht, 471 00:21:23,630 --> 00:21:26,480 de pagina is nog steeds bestaat van slechts een kop en een lichaam, 472 00:21:26,480 --> 00:21:28,660 en ik kan hiërarchisch duiken hier. 473 00:21:28,660 --> 00:21:32,420 Merk op dat Google lijkt te hebben om deze en deze divs--. 474 00:21:32,420 --> 00:21:33,310 Ik kan uitbreiden dat. 475 00:21:33,310 --> 00:21:35,370 Er is een hele boel andere divs. 476 00:21:35,370 --> 00:21:36,900 Dus het is een beetje complex. 477 00:21:36,900 --> 00:21:37,400 Maar wacht. 478 00:21:37,400 --> 00:21:40,970 Dit lijkt zo veel meer leesbare, relatief, dan dit. 479 00:21:40,970 --> 00:21:43,840 Waarom is Google gênant zich door alleen het verzenden 480 00:21:43,840 --> 00:21:50,400 deze enorme puinhoop van code van een aantal sort gewoon iets uit te voeren 481 00:21:50,400 --> 00:21:53,640 dat ziet er zo eenvoudig op het eerste gezicht? 482 00:21:53,640 --> 00:21:55,270 Zoals, waarom niet ze meer ruimte toe te voegen? 483 00:21:55,270 --> 00:21:56,811 Waarom hebben ze geen druk op Enter zoals ik deed? 484 00:21:56,811 --> 00:21:59,110 Kijk eens hoe goed ik was bij het schrijven van een webpagina. 485 00:21:59,110 --> 00:22:00,680 Ik druk op Enter zo ijverig. 486 00:22:00,680 --> 00:22:03,760 Ik ingesprongen dus alles is zo mooi en leesbaar. 487 00:22:03,760 --> 00:22:08,463 Waarom heeft Google niet dezelfde praktijk? 488 00:22:08,463 --> 00:22:11,409 >> PUBLIEK: [ONVERSTAANBAAR] 489 00:22:11,409 --> 00:22:12,305 490 00:22:12,305 --> 00:22:13,180 DAVID J. MALAN: Goed. 491 00:22:13,180 --> 00:22:14,270 Heel eerlijk. 492 00:22:14,270 --> 00:22:16,650 Ze hebben geen enkele hebben persoon bij Google handmatig 493 00:22:16,650 --> 00:22:18,160 bijwerken van de home page meer. 494 00:22:18,160 --> 00:22:20,010 Het is geen 1999 meer. 495 00:22:20,010 --> 00:22:21,140 Dus ze hebben software. 496 00:22:21,140 --> 00:22:25,397 Ze hebben andere tools die genereren dynamisch ze HTML. 497 00:22:25,397 --> 00:22:27,480 Natuurlijk, dat code zelf werd geschreven door mensen, 498 00:22:27,480 --> 00:22:30,220 maar de realiteit is, het is heel eerlijk om te zeggen, 499 00:22:30,220 --> 00:22:33,340 de browser doet zeker niet schelen hoe rommelig de code. 500 00:22:33,340 --> 00:22:35,940 Maar er is een nog dwingende technische reden 501 00:22:35,940 --> 00:22:42,580 dat Google verdeelt hun HTML code in zo'n slordige, schijnbaar 502 00:22:42,580 --> 00:22:48,350 overweldigende manier allemaal bij elkaar gepakt met zeer weinig way-- zeer weinig 503 00:22:48,350 --> 00:22:51,274 in de manier van het formatteren zoals ik deed. 504 00:22:51,274 --> 00:22:52,570 >> PUBLIEK: [ONVERSTAANBAAR] 505 00:22:52,570 --> 00:22:53,528 >> DAVID J. MALAN: Sneller? 506 00:22:53,528 --> 00:22:54,040 Waarom? 507 00:22:54,040 --> 00:22:55,680 En wat zei je, Lydia? 508 00:22:55,680 --> 00:22:56,240 Sneller? 509 00:22:56,240 --> 00:22:57,281 Waarom sneller? 510 00:22:57,281 --> 00:22:58,156 PUBLIEK: [ONVERSTAANBAAR] 511 00:22:58,156 --> 00:23:00,522 512 00:23:00,522 --> 00:23:02,230 DAVID J. MALAN: Er is geen ruimte om te lezen. 513 00:23:02,230 --> 00:23:02,730 Ja. 514 00:23:02,730 --> 00:23:04,560 Dus na te denken over wat een ruimte. 515 00:23:04,560 --> 00:23:08,394 Dus elk teken op het toetsenbord neemt een bepaalde hoeveelheid ruimte te vertegenwoordigen, 516 00:23:08,394 --> 00:23:10,560 hetzij fysiek, alsof het neemt dat er veel ruimte, 517 00:23:10,560 --> 00:23:13,250 of ergens onder de motorkap, dat het geheugen vereist. 518 00:23:13,250 --> 00:23:15,740 En als een aside-- en we zullen praten meer over dit tomorrow-- 519 00:23:15,740 --> 00:23:19,930 elk teken op het toetsenbord vereist meestal 8 bits of een byte. 520 00:23:19,930 --> 00:23:23,360 Dus een patroon van 8 nullen of degenen, of slechts 1 byte, zoals we 521 00:23:23,360 --> 00:23:24,720 mensen zouden in het algemeen zeggen. 522 00:23:24,720 --> 00:23:27,690 Dus dat is klein, maar het is nog steeds niet-nul. 523 00:23:27,690 --> 00:23:29,940 Het is nog een bepaalde hoeveelheid ruimte. 524 00:23:29,940 --> 00:23:36,082 Dus als een ingenieur of Google raakt de spatiebalk maar een keer, en veronderstellen 525 00:23:36,082 --> 00:23:38,540 Google als super-popular-- veronderstellen dat een miljard mensen 526 00:23:38,540 --> 00:23:40,780 bezoek hun home page per dag, of een aantal mensen 527 00:23:40,780 --> 00:23:43,290 Ga naar de home page van een miljard keer per dag, 528 00:23:43,290 --> 00:23:48,890 hoeveel extra bytes heeft dat software engineer kosten slechts Google 529 00:23:48,890 --> 00:23:51,310 door het raken van zijn of haar spatiebalk een keer? 530 00:23:51,310 --> 00:23:52,692 >> PUBLIEK: [ONVERSTAANBAAR] 531 00:23:52,692 --> 00:23:54,150 DAVID J. MALAN: Niet helemaal zo slecht. 532 00:23:54,150 --> 00:23:57,070 Slechts één byte keer per miljard. 533 00:23:57,070 --> 00:23:57,871 dus een-- 534 00:23:57,871 --> 00:23:59,120 Publiek: 8 miljard gigabytes. 535 00:23:59,120 --> 00:24:00,370 DAVID J. MALAN: Niet 8 miljard. 536 00:24:00,370 --> 00:24:01,240 8 miljard bytes. 537 00:24:01,240 --> 00:24:02,410 Maar 1 gigabyte. 538 00:24:02,410 --> 00:24:04,080 1 gigabyte zou de eenheid van de maatregel. 539 00:24:04,080 --> 00:24:08,240 Als hij of zij doet twee ruimten, 2 gigabyte. 540 00:24:08,240 --> 00:24:09,030 Drie gigabytes. 541 00:24:09,030 --> 00:24:09,530 Rechts? 542 00:24:09,530 --> 00:24:11,860 Het schalen duur. 543 00:24:11,860 --> 00:24:16,150 En dus in gevallen als Google, die, toegegeven, zijn extreme gevallen, 544 00:24:16,150 --> 00:24:21,450 Er zijn andere zaken die gewoon ontstaan door het maken van zeer redelijke beslissingen 545 00:24:21,450 --> 00:24:25,744 of het nemen van zeer eenvoudige menselijk handelen, omdat het deze vergrote effect. 546 00:24:25,744 --> 00:24:27,660 Dus een van de redenen dit ziet er zo gecomprimeerd 547 00:24:27,660 --> 00:24:30,660 is precies zoals Victoria said-- het was gewoon gegenereerd door computers toch. 548 00:24:30,660 --> 00:24:31,900 Dus geen big deal. 549 00:24:31,900 --> 00:24:33,309 Laat de browser figure it out. 550 00:24:33,309 --> 00:24:35,350 Maar ook bewust niet veel ruimte, 551 00:24:35,350 --> 00:24:36,766 omdat de ruimte is niet noodzakelijk. 552 00:24:36,766 --> 00:24:38,250 En de ruimte kost daadwerkelijk geld. 553 00:24:38,250 --> 00:24:40,670 >> Het ofwel kost tijd, want net te duwen 554 00:24:40,670 --> 00:24:44,670 dat er veel meer gegevens uit google.com hoofdkwartier net 555 00:24:44,670 --> 00:24:47,710 heeft om een ​​bepaalde hoeveelheid van te nemen tijd, zelfs als het milliseconden 556 00:24:47,710 --> 00:24:51,190 of microseconden, maar dat draagt ​​bij tot dan zo veel gebruikers, of meer waarschijnlijk, 557 00:24:51,190 --> 00:24:52,270 het waarschijnlijk kost geld. 558 00:24:52,270 --> 00:24:54,690 Google waarschijnlijk aangesloten op iemand anders in de wereld, een 559 00:24:54,690 --> 00:24:56,398 van deze turen punten, en als ze 560 00:24:56,398 --> 00:24:59,880 een soort van financiële relatie waarbij hun gegevens kost geld, 561 00:24:59,880 --> 00:25:01,730 ze kan net zo goed minimaliseren hoeveel gegevens 562 00:25:01,730 --> 00:25:04,530 ze spugen op hun internetverbinding. 563 00:25:04,530 --> 00:25:07,630 >> Dus de grappig ding, maar uiteindelijk, of misschien de geruststellende ding, 564 00:25:07,630 --> 00:25:11,030 is dat, hoewel dit ziet er vreselijk overweldigend, aan het eind van de dag, 565 00:25:11,030 --> 00:25:16,750 het is nog steeds exact dezelfde principes als Deze zeer eenvoudige pagina hier van een HTML 566 00:25:16,750 --> 00:25:17,390 pagina. 567 00:25:17,390 --> 00:25:20,610 Dus gewoon samen te vatten en zodat u hebben een canonieke versie als je niet 568 00:25:20,610 --> 00:25:25,900 volgende samen met de keuze hier, hier misschien wel de meest eenvoudige webpagina's, 569 00:25:25,900 --> 00:25:28,240 dus iets om mee te spelen met misschien later. 570 00:25:28,240 --> 00:25:30,790 >> Nou, laten we de invoering van een paar andere ideeën nu. 571 00:25:30,790 --> 00:25:33,420 We staan ​​op het punt in te voeren zoiets als een stijl tag. 572 00:25:33,420 --> 00:25:38,110 We kunnen deze pagina stileren in meer interessante manieren. 573 00:25:38,110 --> 00:25:40,860 Dus terwijl HTML e-mail heeft alles te markeren 574 00:25:40,860 --> 00:25:44,470 de gegevens, een soort van het specificeren van een browser hoe de data te structureren, 575 00:25:44,470 --> 00:25:48,110 waar te zetten, CSS, of cascading style sheets, 576 00:25:48,110 --> 00:25:52,640 is een tweede taal over het algemeen wordt vermengd met HTML 577 00:25:52,640 --> 00:25:55,670 zoals we zullen see-- maar we kunnen reinigen dat in een moment-- die draait 578 00:25:55,670 --> 00:25:59,850 zij de laatste mijl, en het stileert het. 579 00:25:59,850 --> 00:26:02,460 Het krijgt de kleuren precies goed, de lettergroottes precies goed, 580 00:26:02,460 --> 00:26:03,860 de plaatsing precies goed. 581 00:26:03,860 --> 00:26:06,510 Het draait allemaal om de esthetiek of formatteren, niet over 582 00:26:06,510 --> 00:26:08,330 de fundamentele gegevens zelf. 583 00:26:08,330 --> 00:26:11,390 En de makkelijkste manier om te tonen Dit is misschien wel het goede voorbeeld. 584 00:26:11,390 --> 00:26:15,320 Dus ik ga om te gaan over aan mijn eenvoudig tekstbestand. 585 00:26:15,320 --> 00:26:17,970 En in slechts een moment, zal ik wandelen ons door het proces 586 00:26:17,970 --> 00:26:19,360 om dit te doen onszelf. 587 00:26:19,360 --> 00:26:23,310 >> Ik ga terug naar mijn dossier hier en reload de pagina gewoon 588 00:26:23,310 --> 00:26:25,800 om te bevestigen hoe het eruit ziet. 589 00:26:25,800 --> 00:26:27,190 Dat is waar we op nu. 590 00:26:27,190 --> 00:26:31,170 Ik voel me als kinderen zou genieten met wat kleur aan deze webpagina. 591 00:26:31,170 --> 00:26:34,480 Dus ik ga hier te gaan in de kop van de pagina. 592 00:26:34,480 --> 00:26:38,130 En ik ga stijl / style doen. 593 00:26:38,130 --> 00:26:44,060 En dan binnenkant van deze, ga ik het lichaam van mijn page-- vertellen 594 00:26:44,060 --> 00:26:46,870 en deze opmaak is, op het eerste gezicht misschien een beetje 595 00:26:46,870 --> 00:26:49,400 vreemd, maar conventioneel. 596 00:26:49,400 --> 00:26:55,010 Ik ga om te zeggen dat de achtergrond kleur van deze pagina moet groen zijn. 597 00:26:55,010 --> 00:26:57,960 En dit is helaas soort niet het beste ontwerp. 598 00:26:57,960 --> 00:27:00,710 Merk op dat eerder in de wereld van HTML, 599 00:27:00,710 --> 00:27:03,190 Ik zei dat attributen zijn deze key-waarde paren. 600 00:27:03,190 --> 00:27:05,760 Iets gelijk citaat unquote "iets." 601 00:27:05,760 --> 00:27:08,810 In de wereld van CSS, die ontworpen door een aantal verschillende mensen, 602 00:27:08,810 --> 00:27:11,020 zij besloten dat in hun wereld, key-value pairs 603 00:27:11,020 --> 00:27:13,920 zou woord colon iets te zijn. 604 00:27:13,920 --> 00:27:15,220 Dus het is hetzelfde idee, dat wel. 605 00:27:15,220 --> 00:27:18,620 Het associëren van een waarde met enkele sleutel die een of andere manier 606 00:27:18,620 --> 00:27:20,330 invloed op het gedrag van deze pagina. 607 00:27:20,330 --> 00:27:21,901 >> En je kunt waarschijnlijk wel raden. 608 00:27:21,901 --> 00:27:24,150 Wat is dit waarschijnlijk te doen, zelfs als je nog nooit hebt 609 00:27:24,150 --> 00:27:27,867 gezien HTML of CSS voor? 610 00:27:27,867 --> 00:27:29,450 PUBLIEK: Verander de achtergrondkleur. 611 00:27:29,450 --> 00:27:30,560 DAVID J. MALAN: Ja, verander de achtergrondkleur. 612 00:27:30,560 --> 00:27:33,280 En in het bijzonder de achtergrondkleur van het lichaam. 613 00:27:33,280 --> 00:27:36,290 Maar voor zover orgaan voor nu is het web 614 00:27:36,290 --> 00:27:38,870 page-- het is het enige onder de titelbalk really-- 615 00:27:38,870 --> 00:27:40,870 Het gaat waarschijnlijk om beïnvloeden hetzelfde. 616 00:27:40,870 --> 00:27:41,430 Dus laten we eens kijken. 617 00:27:41,430 --> 00:27:42,490 Laten we dit op te slaan. 618 00:27:42,490 --> 00:27:44,310 Ga hier en herladen. 619 00:27:44,310 --> 00:27:46,140 Het is vrij afschuwelijk. 620 00:27:46,140 --> 00:27:48,070 En wat er aan de hand Hier is een neveneffect. 621 00:27:48,070 --> 00:27:49,850 Ik dacht dat ik koos voor deze afbeelding willekeurig. 622 00:27:49,850 --> 00:27:53,305 Waarom is de green niet doordringt achter Mickey? 623 00:27:53,305 --> 00:27:54,180 PUBLIEK: [ONVERSTAANBAAR] 624 00:27:54,180 --> 00:27:56,880 625 00:27:56,880 --> 00:27:57,880 DAVID J. MALAN: Precies. 626 00:27:57,880 --> 00:28:01,750 Het blijkt dat de beelden, vrij veel Alle beelden die we zouden kunnen gebruiken, 627 00:28:01,750 --> 00:28:03,670 zijn rectangles-- van rechthoeken. 628 00:28:03,670 --> 00:28:07,710 Zelfs als Mickey heeft een aantal bochten zichzelf en heeft een achtergrond, 629 00:28:07,710 --> 00:28:09,330 In deze context moet iets zijn. 630 00:28:09,330 --> 00:28:10,280 Het heeft wit zijn. 631 00:28:10,280 --> 00:28:11,910 Het is zwart of iets anders te zijn. 632 00:28:11,910 --> 00:28:13,650 Het kan transparant zijn. 633 00:28:13,650 --> 00:28:16,100 En in feite, ik kon Open Mickey Mouse hier 634 00:28:16,100 --> 00:28:18,590 in een programma genaamd Photoshop of iets dergelijks 635 00:28:18,590 --> 00:28:21,176 en verander dat alles wit achtergrond transparant, 636 00:28:21,176 --> 00:28:22,550 zodat de groene zou doorschemeren. 637 00:28:22,550 --> 00:28:25,980 Maar dat is iets wat ik nodig zou hebben om te vragen van mijzelf of een graficus 638 00:28:25,980 --> 00:28:28,130 of ontwerper bij mijn bedrijf, bijvoorbeeld, 639 00:28:28,130 --> 00:28:31,490 te doen, vooral omdat ik gewoon leende deze van het internet. 640 00:28:31,490 --> 00:28:33,030 Maar dat is waarom dit gebeurt. 641 00:28:33,030 --> 00:28:34,980 >> Dus wat zouden we willen doen? 642 00:28:34,980 --> 00:28:41,040 Nou, we zouden willen we zeggen: hoop echt dat u geniet van uw verblijf. 643 00:28:41,040 --> 00:28:44,150 En voor nadruk, ik wil deze sterk te maken, 644 00:28:44,150 --> 00:28:48,310 en dus ik zal zeggen geopend sterk en sluit sterk en vervolgens opnieuw. 645 00:28:48,310 --> 00:28:50,320 En het is een beetje moeilijk te zien op de projector 646 00:28:50,320 --> 00:28:53,250 maar misschien nu echt springt uit bij u een beetje meer. 647 00:28:53,250 --> 00:28:56,180 Zo kunt u cursief te plaatsen in deze Zo vet facing op deze manier. 648 00:28:56,180 --> 00:28:57,500 We kunnen de kleuren te veranderen. 649 00:28:57,500 --> 00:29:01,610 In feite, enkel voor de kick, ik ben gaan om verder te gaan en dit te doen. 650 00:29:01,610 --> 00:29:05,120 Ik hou er niet echt hoe mijn alinea's zijn zo dicht bij elkaar, 651 00:29:05,120 --> 00:29:06,870 dus ik zou zoiets als dit te doen. 652 00:29:06,870 --> 00:29:13,310 Ik ga naar de browser te vertellen, veranderen elke paragraaf tag te hebben, 653 00:29:13,310 --> 00:29:16,952 laten we say-- eigenlijk, weet je wat, laten we lijn het text-align, center. 654 00:29:16,952 --> 00:29:19,410 En nogmaals, ik weet dat dit alleen omdat iemand leerde het me 655 00:29:19,410 --> 00:29:21,118 of ik heb het opgezocht in een online naslagwerk. 656 00:29:21,118 --> 00:29:22,450 Dus laat me dit op te slaan. 657 00:29:22,450 --> 00:29:25,070 En, ah, nu heb ik gecentreerd het beeld daar. 658 00:29:25,070 --> 00:29:28,490 En eigenlijk, weet je wat, als Ik beweeg mijn afbeelding in een paragraaf 659 00:29:28,490 --> 00:29:34,510 tag-- dus een derde paragraaf, ook al is het niet tekst. 660 00:29:34,510 --> 00:29:36,917 Laten we behalve dat en herladen. 661 00:29:36,917 --> 00:29:40,000 Nu is de pagina begint te soort kijken van-- Ik bedoel, het is nog steeds vrij lelijk, 662 00:29:40,000 --> 00:29:43,180 maar in ieder geval lijkt het alsof ik bracht twee minuten in plaats van één minuut 663 00:29:43,180 --> 00:29:43,950 het maken. 664 00:29:43,950 --> 00:29:47,200 >> En zo, stapsgewijs, kunnen wij Deze esthetische veranderingen nu naar de pagina? 665 00:29:47,200 --> 00:29:50,860 Ik heb niet echt veranderd de gegevens in de pagina anders dan toevoeging van het woord echt. 666 00:29:50,860 --> 00:29:52,650 Ik heb metadata toegevoegd, als je wil. 667 00:29:52,650 --> 00:29:54,830 Hey, browser, maken het woord "echt" bold. 668 00:29:54,830 --> 00:29:56,940 De gegevens zijn echter niet sterk. 669 00:29:56,940 --> 00:29:57,830 Dat is metadata. 670 00:29:57,830 --> 00:29:59,410 De data is "echt." 671 00:29:59,410 --> 00:30:02,200 Dus hebben we nog een aantal van dezelfde concepten als voorheen. 672 00:30:02,200 --> 00:30:05,990 Nu, natuurlijk, dit is niet op het web, dus ik ga nog een laatste stap doen hier. 673 00:30:05,990 --> 00:30:10,300 >> Ik ga om te gaan naar hello.html en gewoon te markeren en kopieer deze. 674 00:30:10,300 --> 00:30:12,285 En nu ga ik gaan in Cloud9, waarin 675 00:30:12,285 --> 00:30:13,910 Ik zal u door in slechts een moment. 676 00:30:13,910 --> 00:30:17,080 En de kans groot dat je snel zijn, als niet reeds op een scherm als dit. 677 00:30:17,080 --> 00:30:21,080 En laat ik geef je een snelle tour van wat Cloud9 eigenlijk is. 678 00:30:21,080 --> 00:30:26,590 Dus nogmaals Cloud 9 is Deze cloud-based service 679 00:30:26,590 --> 00:30:30,580 dat geeft jou en mij de illusie van het hebben van onze eigen virtuele machine 680 00:30:30,580 --> 00:30:33,090 in de cloud, technisch een container in de cloud, 681 00:30:33,090 --> 00:30:35,160 dat we vol beheerdersrechten aan. 682 00:30:35,160 --> 00:30:37,130 Dus in theorie, niemand anders in de wereld heeft 683 00:30:37,130 --> 00:30:39,152 toegang tot het scherm ik ben op zoek naar rechts nu, 684 00:30:39,152 --> 00:30:40,860 behalve misschien het volk die lopen van de site, 685 00:30:40,860 --> 00:30:43,470 omdat technisch ze hebben fysieke toegang enzovoort. 686 00:30:43,470 --> 00:30:44,740 >> Dus wat zien we in deze omgeving? 687 00:30:44,740 --> 00:30:46,230 Ik ga om uit te zoomen, want het is een beetje klein. 688 00:30:46,230 --> 00:30:48,104 En laat me wijzen op hier slechts voor een ogenblik. 689 00:30:48,104 --> 00:30:53,210 Aan de linkerkant van mijn en uw scherm, is er een bestandsbrowser aan de linkerzijde. 690 00:30:53,210 --> 00:30:55,362 Zo op elkaar lijken in de geest Mac OS en Windows. 691 00:30:55,362 --> 00:30:57,070 Dit zijn alle bestanden in mijn rekening. 692 00:30:57,070 --> 00:30:59,250 En standaard, als uw rekening is als de mijne, 693 00:30:59,250 --> 00:31:05,090 je zult zien of binnenkort helloworld.html en readme.md. 694 00:31:05,090 --> 00:31:07,950 Hier aan de rechterkant, dit is waar mijn tekstbestanden gaan om te gaan. 695 00:31:07,950 --> 00:31:11,620 Als je ooit hebt gebruikt Microsoft Word of Kladblok of TextEdit, 696 00:31:11,620 --> 00:31:14,100 dit is mijn woord editing van bestanden gaat om te gaan. 697 00:31:14,100 --> 00:31:16,540 En dan is de meest mysterieuze kenmerk van deze omgeving 698 00:31:16,540 --> 00:31:20,100 dat we niet echt nodig om te gebruiken is hier beneden riep een Terminal-venster. 699 00:31:20,100 --> 00:31:23,390 Als u hebt gebruikt DOS uit vroeger, dit is de Linux 700 00:31:23,390 --> 00:31:25,450 of de Linux-equivalent van DOS. 701 00:31:25,450 --> 00:31:28,190 Het is een op tekst gebaseerde interface-- geen muisklikken, geen slepen. 702 00:31:28,190 --> 00:31:30,770 Alles wat je kunt doen is het type commando, maar die commando 703 00:31:30,770 --> 00:31:34,400 kan bestanden maken, bestanden verplaatsen, geopend directories, dicht directories, 704 00:31:34,400 --> 00:31:35,740 doen een aantal dingen. 705 00:31:35,740 --> 00:31:38,060 Maar voor nu, zullen we gewoon besteden onze tijd hier. 706 00:31:38,060 --> 00:31:39,050 >> En dus laten we dit doen. 707 00:31:39,050 --> 00:31:41,008 Als je in deze omgeving, die je moet 708 00:31:41,008 --> 00:31:45,900 als je een werkplek gecreëerd al, ga je gang en gewoon gaan omhoog 709 00:31:45,900 --> 00:31:48,690 naar Bestand, Nieuw voor een moment. 710 00:31:48,690 --> 00:31:51,740 En dat zal u een nieuw te geven tab hier in het midden. 711 00:31:51,740 --> 00:31:54,250 En ik gewoon-- en laten ga je gang en dit te doen. 712 00:31:54,250 --> 00:31:59,910 Laten we ga je gang en nu doen Bestand, Opslaan en ga je gang en noemen het hello.html, 713 00:31:59,910 --> 00:32:02,740 niet te verwarren met helloworld.html, die 714 00:32:02,740 --> 00:32:06,910 kwam met uw nieuwe gratis account, dat is gewoon een voorbeeld bestand. 715 00:32:06,910 --> 00:32:11,020 U ziet het plotseling verschijnen, waarschijnlijk op de linkerzijde, 716 00:32:11,020 --> 00:32:12,810 en het tabblad nog steeds open. 717 00:32:12,810 --> 00:32:21,300 En laat me je nu aan te moedigen om te recreëren Dit bestand of een aantal varianten daarvan. 718 00:32:21,300 --> 00:32:24,607 En als je niet helemaal kan zien op de scherm is identiek aan de objectglaasjes 719 00:32:24,607 --> 00:32:26,190 dat heb je waarschijnlijk in een ander tabblad. 720 00:32:26,190 --> 00:32:29,296 >> Dus in het kort, maak uw eerste webpagina, opslaan, en vervolgens in slechts een moment, 721 00:32:29,296 --> 00:32:31,170 Ik zal je laten zien hoe je kan dit ook daadwerkelijk te bekijken. 722 00:32:31,170 --> 00:32:32,970 Maar veranderen ten minste één ding. 723 00:32:32,970 --> 00:32:35,400 Verander helloworld naar iets van je eigen keuze, 724 00:32:35,400 --> 00:32:39,821 zodat u ervan overtuigd bent dat het jouw bestand en niet degene die ik zojuist hebt gemaakt. 725 00:32:39,821 --> 00:32:40,320 Okee. 726 00:32:40,320 --> 00:32:43,804 En als je geen ready-- rush-- als je klaar bent, 727 00:32:43,804 --> 00:32:46,220 ga je gang en sla het bestand op Zodra u deze wijzigingen heeft aangebracht. 728 00:32:46,220 --> 00:32:49,540 En als je het klikt Run knop omhoog top, dit 729 00:32:49,540 --> 00:32:53,610 moet een nieuwe tab die zal vertellen openen je wat URL kunt u uw bestand bezoeken, 730 00:32:53,610 --> 00:32:56,380 maar het kan een moment te nemen citaat unquote "start Apache," die 731 00:32:56,380 --> 00:32:58,820 is de naam van de webserver. 732 00:32:58,820 --> 00:33:02,430 Dus wees voorzichtig om precies te doen wat er in het dossier uiteindelijk. 733 00:33:02,430 --> 00:33:04,610 Dus nu, zal ik in te zoomen. 734 00:33:04,610 --> 00:33:07,780 Als ik begin te typen open beugel HTML, bericht 735 00:33:07,780 --> 00:33:09,650 het is gevraagd mij om mijn gedachten af ​​te maken. 736 00:33:09,650 --> 00:33:13,750 En als ik klaar met mijn gedachte, dat geeft mij automatisch de afsluitende tag. 737 00:33:13,750 --> 00:33:17,190 Maar de verwachting is dan zal ik hit Enter, en ga dan binnen is er 738 00:33:17,190 --> 00:33:21,180 en doen het hoofd binnen en dan doe ik het lichaam binnen. 739 00:33:21,180 --> 00:33:24,430 En het is een beetje raar op het eerste, want het doet het werk voor u, 740 00:33:24,430 --> 00:33:27,110 maar beseffen dat uiteindelijk het bespaart u toetsaanslagen. 741 00:33:27,110 --> 00:33:30,500 En inderdaad, een gemeenschappelijk kenmerk van programmeeromgevingen deze dagen 742 00:33:30,500 --> 00:33:33,260 zowel voor webontwikkeling zoals Hierdoor en werkelijke programmering, 743 00:33:33,260 --> 00:33:36,960 die we zullen praten over morgen, is deze auto-complete functies, 744 00:33:36,960 --> 00:33:39,710 dingen die gewoon toestaan ​​dat een programmeur of ontwerper 745 00:33:39,710 --> 00:33:42,010 minder toetsaanslagen te typen volbrengen hetzelfde. 746 00:33:42,010 --> 00:33:43,176 Soms is het goed, dat wel. 747 00:33:43,176 --> 00:33:44,560 Soms is het gewoon vervelend. 748 00:33:44,560 --> 00:33:49,290 749 00:33:49,290 --> 00:33:54,010 En, nogmaals, als je eenmaal hebt getranscribeerd de schuif of een variant daarvan, 750 00:33:54,010 --> 00:33:57,360 klikt u op de knop Uitvoeren boven. 751 00:33:57,360 --> 00:33:59,910 En vervolgens in de bodem venster, zult u worden geïnformeerd 752 00:33:59,910 --> 00:34:04,290 op welke URL kunt u een bezoek uw webpagina. 753 00:34:04,290 --> 00:34:08,790 Mine, bijvoorbeeld ten business-daharvard.c9users.io 754 00:34:08,790 --> 00:34:11,480 enzovoorts. 755 00:34:11,480 --> 00:34:14,580 Oké, zo is, laat mij-- vragen? 756 00:34:14,580 --> 00:34:19,460 Een andere vragen over het net dit werkt voordat we functies toe te voegen? 757 00:34:19,460 --> 00:34:21,692 En laat me voor te stellen, maar te krijgen mensen comfortable-- 758 00:34:21,692 --> 00:34:24,400 want het is één ding om gewoon copy-paste blindelings wat ik heb gedaan. 759 00:34:24,400 --> 00:34:27,177 Maar gewoon zo dat mensen worstelen met ten minste een takenlijst, 760 00:34:27,177 --> 00:34:28,510 Ik ga aan te zetten wat muziek. 761 00:34:28,510 --> 00:34:32,630 Ik ga een lijst met voorstellen dingen die je kan mogelijk toevoegen. 762 00:34:32,630 --> 00:34:34,086 En je kan zeker gebruik maken van Google. 763 00:34:34,086 --> 00:34:36,210 En waarom doen we niet gewoon stel voor dat je probeert op te lossen 764 00:34:36,210 --> 00:34:38,710 ten minste één hier bepaald probleem. 765 00:34:38,710 --> 00:34:45,090 Dus in termen van markeringen, laat me hergebruiken deze hier. 766 00:34:45,090 --> 00:34:48,280 >> Eigenlijk, laat ik in tekstvorm. 767 00:34:48,280 --> 00:35:02,380 Laten we zeggen dat er onder de labels we misschien Gebruik hier zijn enkele labels hier. 768 00:35:02,380 --> 00:35:06,090 We hebben de paragraaf tag gezien. 769 00:35:06,090 --> 00:35:07,850 Nu het gaat om auto-complete. 770 00:35:07,850 --> 00:35:12,220 Paragraaf tag, het anker tag. 771 00:35:12,220 --> 00:35:15,250 Laten we zeggen dat je wilt maken iets groters, 772 00:35:15,250 --> 00:35:19,480 dus je zou like-- de overspanning tag kan helpen. 773 00:35:19,480 --> 00:35:23,010 Nou, je zou wat hulp nodig voor dat in slechts een moment. 774 00:35:23,010 --> 00:35:24,830 We hebben div gezien. 775 00:35:24,830 --> 00:35:26,170 Je zult zien dat er tabel. 776 00:35:26,170 --> 00:35:27,928 Er iets genaamd tr, 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 terug naar dat in een moment. 780 00:35:34,770 --> 00:35:36,590 Wat anders zou handig zijn? 781 00:35:36,590 --> 00:35:38,310 Er is sterk. 782 00:35:38,310 --> 00:35:43,640 Er is aandacht, of liever em. 783 00:35:43,640 --> 00:35:50,110 There's-- wat anders zou je hier zin in? 784 00:35:50,110 --> 00:35:51,930 Nou, we nemen een kijk naar die samen. 785 00:35:51,930 --> 00:35:53,230 Vorm, die we hebben gezien. 786 00:35:53,230 --> 00:35:54,130 Er is vorm. 787 00:35:54,130 --> 00:35:56,500 Er is input en een paar anderen. 788 00:35:56,500 --> 00:35:58,924 789 00:35:58,924 --> 00:36:00,090 Oké, laten we dit doen. 790 00:36:00,090 --> 00:36:02,330 Te beantwoorden van een Victoria's vraag, laat ik eerst 791 00:36:02,330 --> 00:36:05,020 maar zorg ervoor dat iedereen in staat om hun gedag werkend te krijgen. 792 00:36:05,020 --> 00:36:06,900 Dan laat ik me even een paar andere ideeën. 793 00:36:06,900 --> 00:36:09,209 Dan zullen we laten mensen op te lossen een probleem op hun eigen. 794 00:36:09,209 --> 00:36:11,500 Dan zullen we eigenlijk terugkomen die begrip vorm, 795 00:36:11,500 --> 00:36:14,950 en we eigenlijk opnieuw te implementeren samen het front-end interface, 796 00:36:14,950 --> 00:36:16,450 zo te zeggen, voor Google zelf. 797 00:36:16,450 --> 00:36:19,700 We zullen gebruik maken van Google als de back-end en laat ze doen het harde werk, het zoeken, 798 00:36:19,700 --> 00:36:22,760 maar we zullen opnieuw de front-end van Google en het zoekformulier 799 00:36:22,760 --> 00:36:24,520 dat ze op hun eigen home page. 800 00:36:24,520 --> 00:36:27,050 En dus zullen we terugkomen naar deze tags in slechts een moment. 801 00:36:27,050 --> 00:36:30,270 >> Dus dit was wat ik voorgesteld slechts een moment geleden. 802 00:36:30,270 --> 00:36:33,940 We kunnen de stilering toevoegen aan een pagina binnenkant van deze stijl tag, 803 00:36:33,940 --> 00:36:36,950 en we kunnen de achtergrond stileren kleur, de tekst uitlijning, 804 00:36:36,950 --> 00:36:39,000 of het midden of links of rechts. 805 00:36:39,000 --> 00:36:41,630 Maar heel snel je zou te vinden of een webdesigner 806 00:36:41,630 --> 00:36:44,060 zou ontdekken dat dit wordt een beetje onhandig, 807 00:36:44,060 --> 00:36:48,330 want je doet wat genoemd mengen inhoud 808 00:36:48,330 --> 00:36:50,120 met de presentatie daarvan. 809 00:36:50,120 --> 00:36:53,756 Je bent het mengen van uw gegevens en de esthetiek daarvan. 810 00:36:53,756 --> 00:36:56,380 En in feite, als je bedenkt wat er gaat gebeuren 'tijd-- 811 00:36:56,380 --> 00:36:58,350 Dit is een zeer klein webpagina, natuurlijk. 812 00:36:58,350 --> 00:37:01,590 Maar als ik de inhoud toe te voegen aan deze pagina en ik stijl toe te voegen aan deze pagina 813 00:37:01,590 --> 00:37:04,650 de pagina zeer snel weer steeds langer en langer. 814 00:37:04,650 --> 00:37:07,510 En stel dat ik wil hebben een tweede webpagina die 815 00:37:07,510 --> 00:37:09,010 deelt een aantal van deze attributen. 816 00:37:09,010 --> 00:37:12,350 Stel dat mijn tweede website voor mijn site-- ook, ik wil alles center, 817 00:37:12,350 --> 00:37:14,960 en ik wil ook alles met een groene achtergrond. 818 00:37:14,960 --> 00:37:17,940 Ik ben er vrij veel aan de hand te hebben Kopieer en plak een aantal van deze lijnen 819 00:37:17,940 --> 00:37:20,730 in die tweede bestand, wat prima voelt. 820 00:37:20,730 --> 00:37:22,030 Het zal het probleem op te lossen. 821 00:37:22,030 --> 00:37:26,060 >> Maar wat als ik wil een derde pagina of een 30 pagina of een 40 pagina? 822 00:37:26,060 --> 00:37:28,730 Nu ga ik om te kopiëren en te plakken veel dubbele code 823 00:37:28,730 --> 00:37:30,430 in meerdere bestanden. 824 00:37:30,430 --> 00:37:32,600 En zo veronderstellen dat Ik beslis of ik word verteld, 825 00:37:32,600 --> 00:37:34,780 hey, we zijn niet met behulp van een groene achtergrond meer. 826 00:37:34,780 --> 00:37:36,380 We gaan aan de slag met oranje. 827 00:37:36,380 --> 00:37:38,690 Wat heb je te veranderen? 828 00:37:38,690 --> 00:37:42,900 Nou, dan moet je die stijl te veranderen van groen naar oranje in hoeveel plaatsen? 829 00:37:42,900 --> 00:37:44,920 Net als 30 of 40 plaatsen. 830 00:37:44,920 --> 00:37:45,900 Het is vervelend. 831 00:37:45,900 --> 00:37:47,039 Het is foutgevoelig. 832 00:37:47,039 --> 00:37:49,580 Er is een aantal redenen waar je niet zou willen opwekken 833 00:37:49,580 --> 00:37:51,840 dat soort pijn voor jezelf. 834 00:37:51,840 --> 00:37:54,760 En dus zou het niet leuk zijn als we konden nemen wat ik zojuist 835 00:37:54,760 --> 00:37:58,240 gebracht tussen deze twee gele labels, die stijltags, 836 00:37:58,240 --> 00:38:04,050 factor het uit, en zet al mijn stilering in een centraal bestand 837 00:38:04,050 --> 00:38:08,470 alle 30 of 40 van mijn andere bestanden lenen van of andere manier verwijzen, 838 00:38:08,470 --> 00:38:11,640 niet anders dan de netwerken diagrammen we deden voordat? 839 00:38:11,640 --> 00:38:15,030 >> Dus als ik ga hier, ik ben gaan om daadwerkelijk te stellen 840 00:38:15,030 --> 00:38:17,880 dat we de plaats van de stijl tag met iets 841 00:38:17,880 --> 00:38:21,620 riep de link tag, die is verschrikkelijk, afschuwelijk genoemd, 842 00:38:21,620 --> 00:38:24,370 omdat je niet gebruik maken van de koppeling tag aan wat te maken 843 00:38:24,370 --> 00:38:26,380 wij mensen kennen als een link in een webpagina. 844 00:38:26,380 --> 00:38:29,750 Daarvoor, die tag gebruikt u? 845 00:38:29,750 --> 00:38:31,464 Hoe maak je een link in een webpagina? 846 00:38:31,464 --> 00:38:32,130 Publiek in een. 847 00:38:32,130 --> 00:38:34,870 DAVID J. MALAN: De een of anker tag, die voorgingen naar Disney. 848 00:38:34,870 --> 00:38:39,090 De link tag hier zegt dit-- link naar een bestand genaamd 849 00:38:39,090 --> 00:38:44,350 styles.css de relatie waarin gaat worden dat het mijn stylesheet. 850 00:38:44,350 --> 00:38:48,290 Dus dit is een van de S in CSS-- cascading style sheets. 851 00:38:48,290 --> 00:38:50,490 Style sheet-- twee van de S in CSS. 852 00:38:50,490 --> 00:38:52,550 Cascading style sheet. 853 00:38:52,550 --> 00:38:58,640 Dit betekent gewoon, hey, browser, ga vind styles.css op de lokale server 854 00:38:58,640 --> 00:39:01,870 en gebruik het als uw stylesheet, waardoor binnenkant van dat bestand 855 00:39:01,870 --> 00:39:05,310 gaat alle worden stylizations dat we net hebben gedaan. 856 00:39:05,310 --> 00:39:07,396 En dus wat dat bestand eruit zou kunnen zien is het volgende. 857 00:39:07,396 --> 00:39:10,020 En ik zal gewoon dit te doen is een snelle Bijvoorbeeld, omdat we niet nodig hebben 858 00:39:10,020 --> 00:39:12,000 te veel in het onkruid hier te komen. 859 00:39:12,000 --> 00:39:17,840 Maar als ik dit te kopiëren, wat ik voorstellen is dat een programmeur een nieuw bestand, 860 00:39:17,840 --> 00:39:24,450 plakken in die lines-- whoops-- plakken in die lijnen, 861 00:39:24,450 --> 00:39:32,270 opslaan als styles.css, en vervolgens in het andere bestand, verwijdert u dat allemaal 862 00:39:32,270 --> 00:39:35,450 en te vervangen in plaats daarvan via deze link tag. 863 00:39:35,450 --> 00:39:43,090 Zodat als ik een link href = "styles.css", de relatie zal "stylesheet" te zijn 864 00:39:43,090 --> 00:39:44,170 close tag. 865 00:39:44,170 --> 00:39:45,250 Bewaar het. 866 00:39:45,250 --> 00:39:47,000 Ga terug naar mijn helloworld. 867 00:39:47,000 --> 00:39:48,690 Herladen. 868 00:39:48,690 --> 00:39:51,290 >> Letterlijk niets is gebeurd. 869 00:39:51,290 --> 00:39:54,710 Dat is een goede zaak, want het betekent dat het eigenlijk allemaal werken. 870 00:39:54,710 --> 00:39:58,860 Om zo veel te bewijzen, veronderstel ik een typo, en ik noem dit "styles.css" 871 00:39:58,860 --> 00:40:03,080 met een hoofdletter S, dat is incorrect, en vervolgens opnieuw. 872 00:40:03,080 --> 00:40:05,470 Nu kun je zien dat het werkt gewoon niet. 873 00:40:05,470 --> 00:40:06,362 Nu, waarom? 874 00:40:06,362 --> 00:40:08,070 Nou, laten we gebruik maken van een techniek uit de eerder. 875 00:40:08,070 --> 00:40:10,153 Laat me ga je gang en, in mijn browser, Chrome, ik ben 876 00:40:10,153 --> 00:40:12,900 gaat openen die speciale tabblad Netwerk als voorheen, 877 00:40:12,900 --> 00:40:15,560 en laat me opnieuw te laden de pagina. 878 00:40:15,560 --> 00:40:19,341 Wat ben je niet verbaasd zijn om nu te zien? 879 00:40:19,341 --> 00:40:20,840 Of misschien bent u verbaasd om het te zien. 880 00:40:20,840 --> 00:40:23,225 Hoe dan ook, wat zie je nu? 881 00:40:23,225 --> 00:40:24,100 PUBLIEK: [ONVERSTAANBAAR] 882 00:40:24,100 --> 00:40:24,770 DAVID J. MALAN: Het is niet gevonden. 883 00:40:24,770 --> 00:40:25,680 Waarom is het niet gevonden? 884 00:40:25,680 --> 00:40:28,480 Nou, Styles.css-- hoofdstad S-- bestaat niet. 885 00:40:28,480 --> 00:40:29,230 Ik verkeerde naam het. 886 00:40:29,230 --> 00:40:30,430 Eenvoudige typo. 887 00:40:30,430 --> 00:40:33,816 Maar ik krijg begrijpelijkerwijs nu 404, omdat de server zegt, hey, 888 00:40:33,816 --> 00:40:34,440 het is niet gevonden. 889 00:40:34,440 --> 00:40:36,300 Letterlijk, ik weet het niet wanneer dat bestand is. 890 00:40:36,300 --> 00:40:38,880 Teneinde daardoor de browser laat je zien wat het kan, 891 00:40:38,880 --> 00:40:42,860 de ruwe inhoud van de pagina, die een 200, de HTML, 892 00:40:42,860 --> 00:40:45,390 maar de stilering kan niet daarna worden toegevoegd. 893 00:40:45,390 --> 00:40:47,120 En dit is wat er bedoeld wordt met het draperen. 894 00:40:47,120 --> 00:40:49,070 U kunt soort toevoegen na, en het soort 895 00:40:49,070 --> 00:40:50,874 verfijnt de esthetiek van de webpagina. 896 00:40:50,874 --> 00:40:53,790 En je kunt zelfs overschrijven die stijlen met nog een andere stylesheet bestanden 897 00:40:53,790 --> 00:40:54,700 als je wil. 898 00:40:54,700 --> 00:40:57,780 Het is niet gevonden, maar in dit geval, want natuurlijk, ik verkeerde naam het. 899 00:40:57,780 --> 00:41:00,330 Zo zou ik moet eerst vast te stellen dat. 900 00:41:00,330 --> 00:41:04,667 >> Dus laten we gaan vooruit en stellen het volgende. 901 00:41:04,667 --> 00:41:07,410 902 00:41:07,410 --> 00:41:11,140 Laten we gaan en dit te doen. 903 00:41:11,140 --> 00:41:14,220 Beginnend met misschien uw helloworld bestand, 904 00:41:14,220 --> 00:41:17,740 laat me gewoon uit te nodigen een paar van zijn voorzien van suggesties. 905 00:41:17,740 --> 00:41:20,400 Dus, Victoria, je wilde maak wat tekst groter, toch? 906 00:41:20,400 --> 00:41:24,555 Oké, dus we kunnen do tekst groter te maken. 907 00:41:24,555 --> 00:41:26,860 En we zullen elkaar afrukken slechts een probleem op te lossen. 908 00:41:26,860 --> 00:41:30,867 Maak tekst groter. 909 00:41:30,867 --> 00:41:32,700 Ik ben niet van plan om te vallen het schrijven van dit toen we 910 00:41:32,700 --> 00:41:35,600 hebben bullet technologie recht over hier. 911 00:41:35,600 --> 00:41:39,970 Dus sommige problemen. 912 00:41:39,970 --> 00:41:44,670 Dus we gaan proberen om tekst groter te maken. 913 00:41:44,670 --> 00:41:45,170 Okee. 914 00:41:45,170 --> 00:41:48,360 Wat anders zou iemand voor te stellen? 915 00:41:48,360 --> 00:41:50,332 Wat zouden we willen om te doen in een webpagina? 916 00:41:50,332 --> 00:41:52,040 Laten we komen met een korte lijst van dingen 917 00:41:52,040 --> 00:41:55,366 en dan delegeren aan de groep om dit uit te zoeken. 918 00:41:55,366 --> 00:41:56,270 >> PUBLIEK: [ONVERSTAANBAAR] 919 00:41:56,270 --> 00:42:02,251 >> DAVID J. MALAN: OK, positie tekst aan verschillende kanten van de pagina? 920 00:42:02,251 --> 00:42:02,750 Okee. 921 00:42:02,750 --> 00:42:04,620 Iets anders. 922 00:42:04,620 --> 00:42:05,784 >> PUBLIEK: [ONVERSTAANBAAR] 923 00:42:05,784 --> 00:42:06,700 DAVID J. MALAN: Het is. 924 00:42:06,700 --> 00:42:08,720 Dus een gif is slechts een ander bestandsformaat. 925 00:42:08,720 --> 00:42:12,830 We gebruikten gewoon, wat een png of jpg waarschijnlijk? 926 00:42:12,830 --> 00:42:14,480 We gebruikten een jpg. 927 00:42:14,480 --> 00:42:16,780 Als je nieuwsgierig, een buitensporige bent antwoord op uw vraag 928 00:42:16,780 --> 00:42:19,404 wordt een jpg wordt meestal gebruikt voor foto, want het ondersteunt 929 00:42:19,404 --> 00:42:21,500 miljoenen kleuren of 24-bits kleuren. 930 00:42:21,500 --> 00:42:26,930 Een gif wordt meestal gebruikt voor, zoals, internet memes deze dagen-- animaties, 931 00:42:26,930 --> 00:42:28,810 als animated gifs. 932 00:42:28,810 --> 00:42:32,320 Maar het gebeurt om een ​​kleinere kleur te gebruiken palet, slechts 256 mogelijke kleuren, 933 00:42:32,320 --> 00:42:35,230 maar het ondersteunt transparantie en animatie. 934 00:42:35,230 --> 00:42:40,330 En dan is er nog png, die steunt transparantie en meer kleuren 935 00:42:40,330 --> 00:42:41,300 maar niet animatie. 936 00:42:41,300 --> 00:42:42,133 Dus het is een trade-off. 937 00:42:42,133 --> 00:42:44,144 938 00:42:44,144 --> 00:42:46,060 Dus het toevoegen van een gif, maar, zou functioneel 939 00:42:46,060 --> 00:42:48,396 gelijk aan het toevoegen van een png of jpg. 940 00:42:48,396 --> 00:42:49,110 Ja. 941 00:42:49,110 --> 00:42:50,550 Bron van het beeld gelijk. 942 00:42:50,550 --> 00:42:51,590 Dus iets anders. 943 00:42:51,590 --> 00:42:57,288 Laten we komen met iets dat stuurden we naar Victoria te doen hier. 944 00:42:57,288 --> 00:42:59,209 >> PUBLIEK: knoppen toevoegen voor een formulier. 945 00:42:59,209 --> 00:43:00,000 DAVID J. MALAN: OK. 946 00:43:00,000 --> 00:43:02,179 Dus knoppen toe te voegen voor een formulier. 947 00:43:02,179 --> 00:43:03,470 En we zullen dat men samen doen. 948 00:43:03,470 --> 00:43:07,220 Dus dat zal een perfecte segue zijn direct na deze uitdaging. 949 00:43:07,220 --> 00:43:10,357 Nog iets anders? 950 00:43:10,357 --> 00:43:11,440 Wat zou je graag willen doen? 951 00:43:11,440 --> 00:43:14,040 952 00:43:14,040 --> 00:43:16,516 Het web voelt erg underwhelming als dit is alles wat we kunnen doen. 953 00:43:16,516 --> 00:43:18,140 PUBLIEK: Verander de kleur van de tekst. 954 00:43:18,140 --> 00:43:19,500 DAVID J. MALAN: Verander de wat? 955 00:43:19,500 --> 00:43:20,666 PUBLIEK: kleur van de tekst. 956 00:43:20,666 --> 00:43:22,311 DAVID J. MALAN: Verander de kleur van de tekst. 957 00:43:22,311 --> 00:43:22,810 Okee. 958 00:43:22,810 --> 00:43:23,790 Dus, laten we dit doen. 959 00:43:23,790 --> 00:43:27,209 Gewoon weer zo dat je niet, enkel uit het hoofd, doen precies wat ik doe, 960 00:43:27,209 --> 00:43:29,500 Ik ga om te schakelen muziek voor misschien vijf minuten hier. 961 00:43:29,500 --> 00:43:30,450 U bent welkom om Google te gebruiken. 962 00:43:30,450 --> 00:43:33,130 U bent van harte welkom om te vragen, en Ik zal een hint in je oor fluisteren. 963 00:43:33,130 --> 00:43:35,171 U bent van harte welkom om te kijken Dan op elkaars schouders. 964 00:43:35,171 --> 00:43:37,340 Maar lossen slechts een van deze problemen. 965 00:43:37,340 --> 00:43:40,190 Maar we zullen de laatste, het doen vormt een, als we konden, samen. 966 00:43:40,190 --> 00:43:42,790 Dus vijf minuten op te lossen een van deze problemen 967 00:43:42,790 --> 00:43:46,780 met behulp van Google, intuïtie, of een een andere manier voor u beschikbaar. 968 00:43:46,780 --> 00:43:48,630 >> [Muziek] 969 00:43:48,630 --> 00:43:49,130 Okee. 970 00:43:49,130 --> 00:43:50,838 Geen zorgen als je wilt te blijven sleutelen, 971 00:43:50,838 --> 00:43:53,880 maar ik zal een paar bederven Deze antwoorden. 972 00:43:53,880 --> 00:43:57,986 Dus de eerste suggestie van Victoria was om tekst groter te maken. 973 00:43:57,986 --> 00:43:59,360 Dus er is een paar manieren om dit te doen. 974 00:43:59,360 --> 00:44:01,530 Ik heb momenteel gerestaureerd mijn scherm van deze omvang, 975 00:44:01,530 --> 00:44:04,310 al heb ik ingezoomd kunstmatig alleen maar om dingen te zien. 976 00:44:04,310 --> 00:44:07,470 En laten we dit doen. 977 00:44:07,470 --> 00:44:11,380 Laat me ga je gang en grijp een aantal generieke Latijnse tekst 978 00:44:11,380 --> 00:44:19,540 gewoon zo hebben we iets om mee te werken. 979 00:44:19,540 --> 00:44:20,715 Dus geef me maar een moment. 980 00:44:20,715 --> 00:44:21,840 Ik zal drie alinea's te maken. 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 Dit zal een beter voorbeeld zijn. 984 00:44:55,560 --> 00:44:57,840 Dus voor de nieuwsgierigen, in mijn hello.html, ik heb net 985 00:44:57,840 --> 00:45:01,645 geplakt drie onzinnige Latijns-leden 986 00:45:01,645 --> 00:45:03,270 zodat we wat tekst om mee te werken. 987 00:45:03,270 --> 00:45:06,720 En Victoria's doel was om een aantal van de tekst groter. 988 00:45:06,720 --> 00:45:09,879 Dus ik kon, zoals voorheen, ga hier. 989 00:45:09,879 --> 00:45:11,170 En laat ik doe het op de juiste manier. 990 00:45:11,170 --> 00:45:13,253 Ik ga om een ​​link te hebben tag die verwijst naar een bestand 991 00:45:13,253 --> 00:45:20,560 genaamd "styles.css," de relatie waarvan again "stylesheet." 992 00:45:20,560 --> 00:45:25,221 En dan ga ik te redden en openen van deze "styles.css." 993 00:45:25,221 --> 00:45:28,940 >> Dus, zoals voorheen, heb ik de bekwaamheid op dit CSS-bestand 994 00:45:28,940 --> 00:45:31,569 om daadwerkelijk te overschrijven de standaard esthetiek van een webpagina, 995 00:45:31,569 --> 00:45:33,860 en de standaard esthetiek, Natuurlijk zijn behoorlijk saai. 996 00:45:33,860 --> 00:45:36,943 Het is een soort van normale lettergrootte, zwart tekst, witte achtergrond, enzovoort. 997 00:45:36,943 --> 00:45:39,440 Dus stel ik wil maken alles Tekst vergroten. 998 00:45:39,440 --> 00:45:40,460 Ik kon een paar dingen doen. 999 00:45:40,460 --> 00:45:43,750 In mijn styles.css bestand, I zou kunnen zeggen, weet je wat, 1000 00:45:43,750 --> 00:45:46,950 gelden de volgende aan het lichaam van mijn pagina. 1001 00:45:46,950 --> 00:45:51,390 Ga je gang en maak de lettergrootte 24 punten, 1002 00:45:51,390 --> 00:45:54,130 dat is een nummer dat ik zou kunnen te gebruiken in Microsoft Word. 1003 00:45:54,130 --> 00:45:57,620 Laat me terug naar mijn web pagina hier en herladen, 1004 00:45:57,620 --> 00:45:59,640 en je kunt zien dat het is al veel groter. 1005 00:45:59,640 --> 00:46:02,223 En we kunnen krijgen een beetje gek, net als wij kan op een desktop-- 1006 00:46:02,223 --> 00:46:03,670 maken het 96 punten. 1007 00:46:03,670 --> 00:46:04,950 Herladen. 1008 00:46:04,950 --> 00:46:07,610 En het wordt steeds een beetje logge op dit punt. 1009 00:46:07,610 --> 00:46:09,500 >> Maar ik kon een beetje meer precies te zijn. 1010 00:46:09,500 --> 00:46:14,530 In plaats van dit stylesheet om het lichaam van mijn pagina, 1011 00:46:14,530 --> 00:46:21,740 wat anders zou ik pas het toe in plaats daarvan, wat andere tag die misschien nog steeds 1012 00:46:21,740 --> 00:46:25,445 werken op dezelfde manier? 1013 00:46:25,445 --> 00:46:26,444 >> Publiek: De 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 Zodat de kop zou niet juist omdat het hoofd, 1016 00:46:29,350 --> 00:46:31,300 je kunt eigenlijk niet de controle van de esthetiek van. 1017 00:46:31,300 --> 00:46:32,700 Er is daar of niet zowel tekst. 1018 00:46:32,700 --> 00:46:36,760 Maar de p tag-- ik kan duiken in een klein diepere, zo te zeggen, de paragraaf 1019 00:46:36,760 --> 00:46:37,350 labels. 1020 00:46:37,350 --> 00:46:41,600 En hoewel er drie, dat is prima, want in CSS, 1021 00:46:41,600 --> 00:46:44,900 als ik zeg gewoon "p", dit betekent gelden de volgende 1022 00:46:44,900 --> 00:46:48,300 elke tag die overeenkomt met deze selector, de selector gewoon 1023 00:46:48,300 --> 00:46:49,430 is de naam van het label. 1024 00:46:49,430 --> 00:46:52,350 Dus waar zie je een "P", gelden de lettergrootte, 1025 00:46:52,350 --> 00:46:55,222 en laten we maken het meer redelijke again-- 24 punt. 1026 00:46:55,222 --> 00:46:56,930 En weet je wat, gewoon voor een goede maatregel, 1027 00:46:56,930 --> 00:46:59,810 laten we de kleur rood net voor het moment. 1028 00:46:59,810 --> 00:47:03,740 En nu als ik herladen, nu zijn we zie drie lelijke paragrafen. 1029 00:47:03,740 --> 00:47:07,180 >> Maar nu denk dat ik een soort van-- Ik wil dat de eerste paragraaf 1030 00:47:07,180 --> 00:47:08,210 te springen op de gebruiker. 1031 00:47:08,210 --> 00:47:11,150 Ik wil niet alleen maar toenemen de lettergrootte van alles. 1032 00:47:11,150 --> 00:47:16,105 En dus wil ik eigenlijk te identificeren of onderscheid tussen deze punten. 1033 00:47:16,105 --> 00:47:18,730 Dus laten we te ontdoen van de rode, want dat is gewoon een soort van plakkerig, 1034 00:47:18,730 --> 00:47:23,885 en laten we gaan vooruit en maken de lettergrootte 12-punts standaard 1035 00:47:23,885 --> 00:47:26,260 zodat we weer iets een beetje meer redelijk. 1036 00:47:26,260 --> 00:47:29,190 En nu wil ik alleen maar om het te vergroten lettergrootte van de eerste paragraaf. 1037 00:47:29,190 --> 00:47:31,440 Ik kan dit doen in een paar wegen, maar een manier die 1038 00:47:31,440 --> 00:47:37,180 misschien wel het meest educatieve aan de Momenteel is het volgende doen. 1039 00:47:37,180 --> 00:47:43,280 Laat me gaan en zeggen dat dit paragraaf heeft een unieke ID van de "eerste." 1040 00:47:43,280 --> 00:47:45,000 Ik kon dit wat ik wil bellen. 1041 00:47:45,000 --> 00:47:46,874 Ik zou deze "foo" noemen of enig ander woord, 1042 00:47:46,874 --> 00:47:49,290 maar ik ga het sommige geven semantisch betekenisvolle naam 1043 00:47:49,290 --> 00:47:50,320 zoals "de eerste." 1044 00:47:50,320 --> 00:47:54,790 Dit is de unieke identificatie, de ID, voor mijn eerste paragraaf. 1045 00:47:54,790 --> 00:47:59,360 >> Wat ik nu kan doen in mijn stylesheet is een beetje nauwkeuriger. 1046 00:47:59,360 --> 00:48:02,330 In plaats van te zeggen, toe te passen het volgende aan de p-tag, 1047 00:48:02,330 --> 00:48:04,890 Ik kan zeggen dat de following-- gelden de volgende 1048 00:48:04,890 --> 00:48:11,000 of selecteer het HTML-element dat heeft een unieke ID van de "eerste." 1049 00:48:11,000 --> 00:48:12,350 Wat wil ik van toepassing zijn? 1050 00:48:12,350 --> 00:48:15,250 Een lettergrootte van 24 punten. 1051 00:48:15,250 --> 00:48:16,640 Dus ik heb twee selectors nu. 1052 00:48:16,640 --> 00:48:19,690 Men maakt alle van de punten 12 punten. 1053 00:48:19,690 --> 00:48:24,960 Maar deze, vooral omdat het gaat second-- komt het laatste in de file-- 1054 00:48:24,960 --> 00:48:27,090 Dit heeft een cascade-effect. 1055 00:48:27,090 --> 00:48:30,200 Ik heb zojuist al mijn paragraaf-tags 12-punts, 1056 00:48:30,200 --> 00:48:34,350 maar dit nu cascades en overschrijft dat voor alle elementen 1057 00:48:34,350 --> 00:48:38,800 in de pagina, elke tag in de pagina waarvan unieke ID is citaat unquote "eerst." 1058 00:48:38,800 --> 00:48:41,720 En hashtag in deze context gewoon betekent "unieke identificatie." 1059 00:48:41,720 --> 00:48:43,750 Ik zet het niet in het HTML-bestand. 1060 00:48:43,750 --> 00:48:46,880 Ik, hier, gewoon zeggen citaat unquote "eerst." 1061 00:48:46,880 --> 00:48:48,470 >> Dus laat me opnieuw te laden. 1062 00:48:48,470 --> 00:48:49,919 En nu zie ik, ah, OK. 1063 00:48:49,919 --> 00:48:51,710 Ik bedoel, het is niet zo mooi, maar het is een soort 1064 00:48:51,710 --> 00:48:53,600 of zoals het voorwoord van een boek of iets dergelijks, 1065 00:48:53,600 --> 00:48:55,100 waar de eerste paragraaf is groter. 1066 00:48:55,100 --> 00:48:57,933 Kon nog preciezer zijn met slechts de eerste letters, maar in ieder geval 1067 00:48:57,933 --> 00:48:59,110 Ik heb meer controle uitgeoefend. 1068 00:48:59,110 --> 00:49:04,760 Nu maybe-- misschien wil ik dit doen af en toe om wat voor reden dan ook, 1069 00:49:04,760 --> 00:49:09,010 en dus heb ik dit niet wil van toepassing op slechts één HTML-tag. 1070 00:49:09,010 --> 00:49:15,110 In plaats daarvan laten we say-- laten Ook het volgende doen. 1071 00:49:15,110 --> 00:49:18,810 Class = "import". 1072 00:49:18,810 --> 00:49:23,970 Overwegende dat een ID wordt gebruikt om op unieke wijze identificeren één ding, een tag, 1073 00:49:23,970 --> 00:49:30,190 in uw webpagina, wordt een klasse bedoeld om te worden gebruikt op een aantal elementen of markeringen 1074 00:49:30,190 --> 00:49:30,950 op uw webpagina. 1075 00:49:30,950 --> 00:49:31,710 Dus het is herbruikbaar. 1076 00:49:31,710 --> 00:49:33,090 Een ID is niet herbruikbaar. 1077 00:49:33,090 --> 00:49:34,450 Een klasse is herbruikbaar. 1078 00:49:34,450 --> 00:49:37,830 >> En weet je wat, om welke filosofische reasons-- 1079 00:49:37,830 --> 00:49:40,180 Ik heb niet het einde van mijn thought-- ik ga zeggen 1080 00:49:40,180 --> 00:49:44,300 dat de eerste paragraaf en de tweede paragraaf zijn belangrijk. 1081 00:49:44,300 --> 00:49:48,600 Dus ik ga naar de klasse met de naam van toepassing "Belangrijk", dat, als ik spaar mijn dossier 1082 00:49:48,600 --> 00:49:51,510 en herladen, heeft geen functionele gevolgen nog niet. 1083 00:49:51,510 --> 00:49:53,780 Maar ik heb een aantal extra metadata naar het bestand, 1084 00:49:53,780 --> 00:49:56,610 soort van iets apart de kerngegevens van het bestand, 1085 00:49:56,610 --> 00:50:02,300 zodat nu in mijn stylesheet, als ik in plaats daarvan zeggen ".important '- je weet wel, 1086 00:50:02,300 --> 00:50:07,110 iets dat is belangrijk, ik ben gaat font-kleur te maken, red-- 1087 00:50:07,110 --> 00:50:09,930 of liever niet font-kleur, maar kleur. 1088 00:50:09,930 --> 00:50:12,930 Er is inconsistenties in CSS helaas. 1089 00:50:12,930 --> 00:50:14,120 En herladen. 1090 00:50:14,120 --> 00:50:17,640 Let nu op de eerste twee alinea's zijn rood 1091 00:50:17,640 --> 00:50:20,880 maar niet de derde, omdat ik alleen maar paste de klasse van "belangrijke" 1092 00:50:20,880 --> 00:50:25,020 de eerste twee van deze dingen. 1093 00:50:25,020 --> 00:50:28,030 >> Dus in IDs, heb je de mogelijkheid om heel precies te specificeren. 1094 00:50:28,030 --> 00:50:30,110 Met klassen, je hebt herbruikbaarheid. 1095 00:50:30,110 --> 00:50:33,800 Maar in beide gevallen, let op de soort van goed-ontwerpprincipe 1096 00:50:33,800 --> 00:50:39,072 waar ik meegenomen uit alle van de esthetiek aan mijn styles.css bestand. 1097 00:50:39,072 --> 00:50:40,280 Dus er is geen slordigheid hier. 1098 00:50:40,280 --> 00:50:44,490 Er is geen melding gemaakt van rood of vet-facing of lettergrootte in dit bestand. 1099 00:50:44,490 --> 00:50:49,430 Eerder heb ik semantisch, betekenisvol gekenmerkt mijn gegevens, 1100 00:50:49,430 --> 00:50:51,240 hier is een aantal belangrijke gegevens. 1101 00:50:51,240 --> 00:50:52,800 Hier is wat meer belangrijke gegevens. 1102 00:50:52,800 --> 00:50:56,500 Bovendien is hier de "Eerste" van mijn belangrijke gegevens. 1103 00:50:56,500 --> 00:51:01,050 Dus HTML is alles over het soort van tagging, letterlijk, woorden 1104 00:51:01,050 --> 00:51:05,270 en alinea's en constructies in uw pagina met deze kleine hints, als je 1105 00:51:05,270 --> 00:51:07,640 wil, dat u kunt een of andere manier profiteren van het gebruik van 1106 00:51:07,640 --> 00:51:10,880 andere technieken zoals CSS op deze manier. 1107 00:51:10,880 --> 00:51:14,760 >> Dus in antwoord op de vraag van Victoria's, kunnen we tekst groter op die manier te maken. 1108 00:51:14,760 --> 00:51:18,380 Er zijn zo veel andere manieren, maar De lettergrootte tag-- geopend beugel "font" - 1109 00:51:18,380 --> 00:51:19,770 is eigenlijk verschillende jaren oud. 1110 00:51:19,770 --> 00:51:21,410 En dit is het probleem, Ook met slechts een beroep 1111 00:51:21,410 --> 00:51:23,485 over online resources-- hebben ze de neiging om te worden achterhaald. 1112 00:51:23,485 --> 00:51:26,110 En inderdaad, die is afgekeurd, omdat de wereld gerealiseerd 1113 00:51:26,110 --> 00:51:28,970 wat betekent "font-size = 7" bedoel je? 1114 00:51:28,970 --> 00:51:29,670 Het maakt niet. 1115 00:51:29,670 --> 00:51:32,770 En zo vele jaren en dit dag-- één van de kant 1116 00:51:32,770 --> 00:51:36,060 merkt is dat het eigenlijk ongelooflijk pijnlijk soms nog steeds 1117 00:51:36,060 --> 00:51:38,900 naar locaties voor de ontwikkeling van web, omdat Microsoft 1118 00:51:38,900 --> 00:51:44,220 en Google en Mozilla en anderen vaak oneens over de wijze waarop 1119 00:51:44,220 --> 00:51:47,480 een specificatie zoals HTML interpreteren. 1120 00:51:47,480 --> 00:51:52,490 >> Er is een reglement voor HTML die over het algemeen zegt wat elk label betekent. 1121 00:51:52,490 --> 00:51:55,690 Maar soms is het overgelaten aan de discretie implementatie's, 1122 00:51:55,690 --> 00:51:57,290 discretie en Google Microsoft's. 1123 00:51:57,290 --> 00:52:00,000 En dus zul je heel vaak zien op een website iets 1124 00:52:00,000 --> 00:52:04,954 ziet er anders op een PC dan het doet op een Mac, 1125 00:52:04,954 --> 00:52:06,995 en dat is echt, want, aan het einde van de dag, 1126 00:52:06,995 --> 00:52:08,891 ze niet testen goed op beide platforms. 1127 00:52:08,891 --> 00:52:11,390 Maar het is ook omdat redelijk, slimme mensen zullen het niet eens 1128 00:52:11,390 --> 00:52:14,970 en bedrijven zullen het niet eens, en zo Een van de uitdagingen van de programmering 1129 00:52:14,970 --> 00:52:16,980 voor het web of het ontwerpen dingen voor het web 1130 00:52:16,980 --> 00:52:21,700 is het schrijven van uw website op een manier dat werkt op elke webbrowser. 1131 00:52:21,700 --> 00:52:23,410 Maar zelfs dat is onredelijk, toch? 1132 00:52:23,410 --> 00:52:27,807 Er zijn zo veel versies van zoveel browsers die er zijn die, op een bepaald punt, 1133 00:52:27,807 --> 00:52:30,890 heb je ook een oordeel te bellen en je hebt om te beslissen als een bedrijf, 1134 00:52:30,890 --> 00:52:33,082 in het bijzonder voor e-commerce-stijl sites waar je bent 1135 00:52:33,082 --> 00:52:36,290 proberen om de nieuwste en beste gebruiken technologieën om een ​​echt goede gebruikerservaring te geven 1136 00:52:36,290 --> 00:52:37,110 ervaring. 1137 00:52:37,110 --> 00:52:41,019 Maar sommige percentage van uw gebruikers zouden nog steeds met behulp van Internet Explorer 6 of 7 1138 00:52:41,019 --> 00:52:43,810 of 8, met name afhankelijk van de land waar ze vandaan komen. 1139 00:52:43,810 --> 00:52:46,760 >> En zo zeer vaak geraadpleegde is iets 1140 00:52:46,760 --> 00:52:50,920 zoals "statistieken web browser." 1141 00:52:50,920 --> 00:52:56,560 En als we gaan to-- laten we eens kijken Wikipedia en zie hoe up-to-date deze grafiek is 1142 00:52:56,560 --> 00:52:59,320 indien aanwezig. 1143 00:52:59,320 --> 00:53:02,420 Dus hier kun je zien waar de browsers eigenlijk 1144 00:53:02,420 --> 00:53:06,160 zijn volgens december 2015 volgens de Amerikaanse regering. 1145 00:53:06,160 --> 00:53:11,170 Chrome is op 42% marktaandeel, gevolgd door IE grotendeels in de corporate-instellingen 1146 00:53:11,170 --> 00:53:14,490 of PC instellingen natuurlijk gevolgd door Firefox, 1147 00:53:14,490 --> 00:53:17,440 dan Safari, dan is Opera niet maken de kaart hier om wat voor reden, 1148 00:53:17,440 --> 00:53:18,210 en dan anderen. 1149 00:53:18,210 --> 00:53:19,500 Misschien is het onder anderen. 1150 00:53:19,500 --> 00:53:27,700 Maar problematischer dan dat is-- laten we kijken of Wikipedia heeft ook 1151 00:53:27,700 --> 00:53:35,194 versies van browsers version-- 1152 00:53:35,194 --> 00:53:36,160 1153 00:53:36,160 --> 00:53:39,190 >> Laten we naar de statistieken browser. 1154 00:53:39,190 --> 00:53:40,680 D.W.Z. 1155 00:53:40,680 --> 00:53:42,030 Zelfs dat is niet genoeg. 1156 00:53:42,030 --> 00:53:44,854 Browser statistieken. 1157 00:53:44,854 --> 00:53:45,353 Mijn versie. 1158 00:53:45,353 --> 00:53:48,980 1159 00:53:48,980 --> 00:53:50,540 Dat gaat niet om gelijk te hebben. 1160 00:53:50,540 --> 00:53:53,414 Laten we eens kijken versies. 1161 00:53:53,414 --> 00:53:54,830 Browser marktaandeel. 1162 00:53:54,830 --> 00:53:57,110 Laten we eens zien of dit komt. 1163 00:53:57,110 --> 00:53:57,610 OK. 1164 00:53:57,610 --> 00:54:00,010 Nu wordt dit steeds wat nuttiger. 1165 00:54:00,010 --> 00:54:04,870 Dus hier, merken dat we alle verschillende versies van browsers. 1166 00:54:04,870 --> 00:54:09,887 En, mijn god, als je look-- Chrome 48, Chrome 47, Chrome 31, Chrome 45. 1167 00:54:09,887 --> 00:54:12,970 Ik bedoel, browsers steeds bijgewerkt, en soms enkele van deze veranderingen 1168 00:54:12,970 --> 00:54:16,430 dat significant termen van functionaliteit. 1169 00:54:16,430 --> 00:54:20,630 En dus op een gegeven moment, het product managers of engineers 1170 00:54:20,630 --> 00:54:23,620 moet een decision-- je Weet je wat, slechts 1% van de wereld 1171 00:54:23,620 --> 00:54:24,740 is nog steeds met behulp van IE 7. 1172 00:54:24,740 --> 00:54:25,490 Naar de hel met hen. 1173 00:54:25,490 --> 00:54:27,470 We zijn gewoon niet van plan om ondersteunen die browser. 1174 00:54:27,470 --> 00:54:28,740 En wat betekent het niet te steunen? 1175 00:54:28,740 --> 00:54:31,170 Het zou kunnen betekenen dat de knoppen werken niet op uw webpagina, 1176 00:54:31,170 --> 00:54:33,050 of het zou kunnen betekenen van de formatteren is volledig uitgeschakeld. 1177 00:54:33,050 --> 00:54:35,091 Of je zou moeten maken diezelfde beslissing call 1178 00:54:35,091 --> 00:54:39,089 in mobiele deze dagen, waar we zijn niet van plan om IOS 5 niet meer te steunen. 1179 00:54:39,089 --> 00:54:40,380 Dus mensen moeten gewoon om te upgraden. 1180 00:54:40,380 --> 00:54:45,850 Of we gaan niet Cupcake ondersteunen op Android OS voor Android-apparaten, 1181 00:54:45,850 --> 00:54:48,629 want de wereld-- de tech wereld wil om vooruit te komen, 1182 00:54:48,629 --> 00:54:51,170 Het soort wil het slepen wereld mee zodat ze niet 1183 00:54:51,170 --> 00:54:53,295 moeten blijven achterwaarts compatibel, zodat ze 1184 00:54:53,295 --> 00:54:54,920 kunnen nieuwe en goede voorzieningen voor mindervaliden. 1185 00:54:54,920 --> 00:54:57,878 Dit is inderdaad een van de redenen waarom zo veel bedrijven zijn het uitrollen 1186 00:54:57,878 --> 00:55:01,440 automatische updates en soort dwingen de nieuwste versies van de software op ons. 1187 00:55:01,440 --> 00:55:04,010 En zelfs bedrijven zoals Apple zal sorteren van 1188 00:55:04,010 --> 00:55:07,280 bijna dwingen of verplichten u in termen van marktwerking 1189 00:55:07,280 --> 00:55:11,164 om een ​​nieuwe telefoon te kopen omdat ze gewoon zal niet uw oude telefoon niet meer te werken. 1190 00:55:11,164 --> 00:55:13,330 Dus u missen op de nieuwste en beste features, 1191 00:55:13,330 --> 00:55:17,520 omdat het duur daarvan als bedrijf om oudere te behouden, misschien wel 1192 00:55:17,520 --> 00:55:19,330 inferieure softwareversies. 1193 00:55:19,330 --> 00:55:23,660 Maar het netto effect is dat we lijden ook dit zo goed. 1194 00:55:23,660 --> 00:55:26,550 >> Dus laten we eens een kijkje nemen op iets een paar van de laatste dingen hier. 1195 00:55:26,550 --> 00:55:29,740 Laten we kloppen echt snel een aantal van die andere kogels, zo nieuwsgierig. 1196 00:55:29,740 --> 00:55:33,440 Dus als je probeert om, bijvoorbeeld positie 1197 00:55:33,440 --> 00:55:36,420 de tekst aan verschillende zijden van de pagina, ik ga naar een snelle manier te doen, 1198 00:55:36,420 --> 00:55:38,360 maar er is anders manieren om dit te doen. 1199 00:55:38,360 --> 00:55:42,610 Laat me ga je gang en eliminate-- vereenvoudigen dit als volgt. 1200 00:55:42,610 --> 00:55:45,330 Laat me gewoon terug naar mijn eenvoudige, eenvoudig paragrafen. 1201 00:55:45,330 --> 00:55:47,760 Laat me terug naar mijn styles.css. 1202 00:55:47,760 --> 00:55:51,040 En ik ga gewoon naar de simple-- gebruiken die je misschien al hebt gezien op Google 1203 00:55:51,040 --> 00:55:54,430 of herinneren van earlier-- text-align rechts. 1204 00:55:54,430 --> 00:55:56,220 En de pagina verversen. 1205 00:55:56,220 --> 00:55:58,470 Nu lijkt alles naar rechts uitgelijnd zijn, 1206 00:55:58,470 --> 00:56:00,770 zoals je kunt zien op de overhead hier. 1207 00:56:00,770 --> 00:56:04,470 >> We kunnen het er een beetje meer boek-achtig, en we kunnen zeggen: "rechtvaardigen" 1208 00:56:04,470 --> 00:56:05,640 en herladen. 1209 00:56:05,640 --> 00:56:09,870 Nu is het mooi en vierkant op beide kanten, dat is wel leuk. 1210 00:56:09,870 --> 00:56:12,220 Een ander doel dat we hier hadden was de verandering kleur van de tekst. 1211 00:56:12,220 --> 00:56:13,650 Zo zagen we dat met mijn rode tekst. 1212 00:56:13,650 --> 00:56:15,630 En nu knoppen toe te voegen voor een formulier. 1213 00:56:15,630 --> 00:56:19,390 Dus waarom niet proberen we juist dit te doen? 1214 00:56:19,390 --> 00:56:23,656 Maar eerst laat me gaan naar een site die de meesten van ons gebruiken elke dag-- Google. 1215 00:56:23,656 --> 00:56:25,780 En laten we eens een kijkje nemen op hoe Google werkt. 1216 00:56:25,780 --> 00:56:26,821 Maar ik ga om dit te doen. 1217 00:56:26,821 --> 00:56:31,930 Allereerst wil ik het doen in-- yep, laat me gaan naar Google eerst. 1218 00:56:31,930 --> 00:56:34,530 Ik ga om te gaan in Google-instellingen, 1219 00:56:34,530 --> 00:56:40,660 want ik wil uitschakelen iets genaamd Instant Results. 1220 00:56:40,660 --> 00:56:43,580 >> Dus je zou kunnen hebben gemerkt in Google deze dagen-- laat me terug te gaan 1221 00:56:43,580 --> 00:56:44,850 en zet deze op. 1222 00:56:44,850 --> 00:56:47,900 Dus als ik beginnen met zoeken voor "katten", zoals deze, 1223 00:56:47,900 --> 00:56:50,120 merken dat niet alleen Ik krijg auto-voltooien up 1224 00:56:50,120 --> 00:56:54,520 top, alle van een plotselinge, de pagina zelf lijkt vrij snel veranderen als goed, 1225 00:56:54,520 --> 00:56:58,750 en dat is Google met behulp van een taal JavaScript geroepen proberen om behulpzaam te zijn. 1226 00:56:58,750 --> 00:57:01,540 Maar helaas, het soort van messes up onze bespreking 1227 00:57:01,540 --> 00:57:04,010 van wat er daadwerkelijk gebeurt onder de motorkap hier. 1228 00:57:04,010 --> 00:57:09,070 Dus ik ben gewoon een soort van snel uit te schakelen direct resultaat. 1229 00:57:09,070 --> 00:57:11,510 En ik ga op Opslaan. 1230 00:57:11,510 --> 00:57:13,930 En nu ga ik om te openen dat de diagnostische werkbalk die ik 1231 00:57:13,930 --> 00:57:16,150 houden opening onder het tabblad Netwerk. 1232 00:57:16,150 --> 00:57:17,720 Dus laten we dit doen. 1233 00:57:17,720 --> 00:57:21,960 Laat mij-- whoops-- scroll dit een beetje. 1234 00:57:21,960 --> 00:57:24,410 En laat me zoeken naar "katten." 1235 00:57:24,410 --> 00:57:26,790 >> En nu notice-- eigenlijk, Dit is een goede gelegenheid 1236 00:57:26,790 --> 00:57:28,840 om te bespreken voor een moment. 1237 00:57:28,840 --> 00:57:32,460 Let op het moment dat ik Motortype- het te stoppen. 1238 00:57:32,460 --> 00:57:35,250 Hou op. 1239 00:57:35,250 --> 00:57:35,790 OK. 1240 00:57:35,790 --> 00:57:40,870 Let op het moment dat ik de letter C, kijken naar de onderkant van het scherm. 1241 00:57:40,870 --> 00:57:48,600 A- T- S. Wat doet de bodem van dit scherm, mijn tabblad Netwerk 1242 00:57:48,600 --> 00:57:53,320 suggereren gebeurt elk keer dat ik een brief typen? 1243 00:57:53,320 --> 00:57:57,700 Helaas, de kikker is zeer afleidende vandaag of de klaver 1244 00:57:57,700 --> 00:58:00,339 of wat hij is. 1245 00:58:00,339 --> 00:58:01,880 Wat gebeurde er elke keer als ik typte? 1246 00:58:01,880 --> 00:58:04,230 En laat me duidelijk de buffer en typ het opnieuw. 1247 00:58:04,230 --> 00:58:06,580 So-- whoops. 1248 00:58:06,580 --> 00:58:13,280 Elke keer als ik typ een letter, C- A- T-- zodat een nieuwe rij houdt uiteraard verschijnen. 1249 00:58:13,280 --> 00:58:16,530 Wat betekent elk van die rijen te vertegenwoordigen, op basis van wat we hebben gezien en besproken 1250 00:58:16,530 --> 00:58:17,339 zo ver? 1251 00:58:17,339 --> 00:58:18,130 PUBLIEK: Een zoektocht? 1252 00:58:18,130 --> 00:58:21,770 DAVID J. MALAN: Een zoektocht, of Meer in het algemeen, een HTTP-verzoek 1253 00:58:21,770 --> 00:58:23,125 van mijn browser naar de server. 1254 00:58:23,125 --> 00:58:29,090 Nou ja, waarom is mijn browser het maken van een HTTP vragen elke keer als ik typ een brief? 1255 00:58:29,090 --> 00:58:30,502 >> PUBLIEK: [ONVERSTAANBAAR] 1256 00:58:30,502 --> 00:58:33,210 DAVID J. MALAN: Ja, het geven van mij deze auto-complete resultaten. 1257 00:58:33,210 --> 00:58:35,190 Zoals, waar deze nog zoekresultaten vandaan? 1258 00:58:35,190 --> 00:58:38,120 Nou, elke keer als ik typ een letter, Google stuurt meer 1259 00:58:38,120 --> 00:58:40,460 en steeds meer het woord dat ik ben het typen. 1260 00:58:40,460 --> 00:58:41,040 Waarom? 1261 00:58:41,040 --> 00:58:44,540 Omdat ze willen me een beter en beter, een betere suggestie, 1262 00:58:44,540 --> 00:58:48,880 een lijst met suggesties voor welk woord Ik probeer eigenlijk compleet. 1263 00:58:48,880 --> 00:58:53,030 Dus dit is letterlijk elke zeggen teken dat u typt in Google 1264 00:58:53,030 --> 00:58:56,900 wordt verzonden, uiteindelijk in bulk, maar soms ook een 1265 00:58:56,900 --> 00:59:00,620 op een moment voor de tenuitvoerlegging deze auto-complete functies bij 1266 00:59:00,620 --> 00:59:03,000 de gegevens uiteraard op het web. 1267 00:59:03,000 --> 00:59:08,780 >> Laten we nu eens een kijkje nemen op wat er werkelijk gebeurt er als ik op Google Search. 1268 00:59:08,780 --> 00:59:10,420 En dan zullen we dit zelf benutten. 1269 00:59:10,420 --> 00:59:15,320 Dus als ik nu scroll naar beneden naar de zeer eerste verzoek dat gebeurde gewoon. 1270 00:59:15,320 --> 00:59:17,130 Let op de volgende. 1271 00:59:17,130 --> 00:59:25,550 Het werd verzonden naar een vrij lange URL-- https://www.google.com/search? 1272 00:59:25,550 --> 00:59:27,100 en dan een hele hoop dingen. 1273 00:59:27,100 --> 00:59:29,620 Laten we nu zien dit ook daadwerkelijk in het tabblad browser zelf. 1274 00:59:29,620 --> 00:59:31,310 Laten we te ontdoen van de toolbar hier. 1275 00:59:31,310 --> 00:59:33,140 Hier is de pagina van de zoekresultaten. 1276 00:59:33,140 --> 00:59:34,790 En merk hier is de URL. 1277 00:59:34,790 --> 00:59:37,430 Nu, kunt u waarschijnlijk wel raden wat is hier aan de hand voor een deel. 1278 00:59:37,430 --> 00:59:39,090 Dus allereerst een definitie. 1279 00:59:39,090 --> 00:59:42,570 Dit is blijkbaar de bestemming wanneer het formulier wordt ingediend. 1280 00:59:42,570 --> 00:59:44,910 Dus toen ik getypt in de woorden "katten" en druk op Enter, 1281 00:59:44,910 --> 00:59:48,460 blijkbaar Google verzonden mijn tekstinvoer naar deze URL 1282 00:59:48,460 --> 00:59:50,770 die ik heb gewezen op daar slash zoeken. 1283 00:59:50,770 --> 00:59:56,530 Blijkt dat, in een URL, iets dat gebeurt er na een vraagteken is, 1284 00:59:56,530 --> 01:00:01,270 als we blijven zeggen, een key-value pair die werd ingevoerd in de vorm of andere manier 1285 01:00:01,270 --> 01:00:04,500 uitgezonden door de browser naar de server. 1286 01:00:04,500 --> 01:00:07,180 >> Dus elke keer dat je typt ingang in een vorm op het web 1287 01:00:07,180 --> 01:00:10,000 en het is verzonden als wij hebben besproken, via een get, 1288 01:00:10,000 --> 01:00:12,400 een van deze virtuele enveloppen, de inhoud 1289 01:00:12,400 --> 01:00:15,510 van die envelope-- ja, houden krijgen fysiek gevulde 1290 01:00:15,510 --> 01:00:19,010 in de omhulling van klasse vandaag, maar technologisch 1291 01:00:19,010 --> 01:00:21,110 het is eigenlijk zet in de URL. 1292 01:00:21,110 --> 01:00:22,940 Dus in feite, laat me uitpluizen dit. 1293 01:00:22,940 --> 01:00:25,010 Waar zie je input van de gebruiker? 1294 01:00:25,010 --> 01:00:27,490 Waar zie je iets dat ik mezelf getypt hier? 1295 01:00:27,490 --> 01:00:32,100 1296 01:00:32,100 --> 01:00:33,491 Ja, dus "katten." 1297 01:00:33,491 --> 01:00:33,990 Rechts? 1298 01:00:33,990 --> 01:00:36,380 Dus laat me dit destilleren in iets eenvoudiger. 1299 01:00:36,380 --> 01:00:39,917 Ik ga om alles te verwijderen over deze URL die ik niet begrijp, 1300 01:00:39,917 --> 01:00:42,250 en ik ga gewoon om te vertrekken het als dit-- / search? q = katten. 1301 01:00:42,250 --> 01:00:45,640 1302 01:00:45,640 --> 01:00:47,890 We zullen zien waar q komt uit in een moment, 1303 01:00:47,890 --> 01:00:51,220 maar dat voelt als het minimum hoeveelheid informatie die ik verstrekt. 1304 01:00:51,220 --> 01:00:53,050 En nu ga ik druk op Enter. 1305 01:00:53,050 --> 01:00:55,520 En let het werkt nog steeds. 1306 01:00:55,520 --> 01:00:57,950 We krijgen nog steeds terug een hele hoop katten. 1307 01:00:57,950 --> 01:01:00,340 Dus Google is liefhebber dan dat deze dagen. 1308 01:01:00,340 --> 01:01:01,934 Het is 2016, niet 1999. 1309 01:01:01,934 --> 01:01:04,600 Dus er is andere dingen die mijn browser stuurt naar de server. 1310 01:01:04,600 --> 01:01:07,100 Maar dit is minimaal alles wat nodig is. 1311 01:01:07,100 --> 01:01:08,380 >> Dus wat is er aan de hand? 1312 01:01:08,380 --> 01:01:14,320 Nou, laat ik eerst ga je gang en ga terug naar Cloud9 en laat me ga je gang 1313 01:01:14,320 --> 01:01:15,620 en eerder sluit mijn tabbladen. 1314 01:01:15,620 --> 01:01:18,230 En ik zal dit doen op mijn bezitten slechts voor een moment. 1315 01:01:18,230 --> 01:01:20,730 Ik ga om verder te gaan en het creëren van nieuw bestand. 1316 01:01:20,730 --> 01:01:23,739 En ik ga het op te slaan als google.html. 1317 01:01:23,739 --> 01:01:26,280 En ik ga heel quickly-- Ik ga om te stelen, eigenlijk, 1318 01:01:26,280 --> 01:01:28,510 sommige van deze tekst alleen maar om tijd te besparen. 1319 01:01:28,510 --> 01:01:30,610 Ik ga dit plakken in hier. 1320 01:01:30,610 --> 01:01:33,850 Ik ga niet lastig te vallen met elk stilering deze tijd. 1321 01:01:33,850 --> 01:01:38,340 We gaan noemen dit "My Google." 1322 01:01:38,340 --> 01:01:41,230 En ik ga om zich te ontdoen krijgen alles in het lichaam. 1323 01:01:41,230 --> 01:01:42,740 En ik ga het volgende doen. 1324 01:01:42,740 --> 01:01:45,690 Laat me in te zoomen. 1325 01:01:45,690 --> 01:01:50,620 Vorm Action-- en zoals ik in het kort gezegd earlier-- whoops-- als ik in het kort 1326 01:01:50,620 --> 01:01:54,130 eerder vermeld, de werking van een formulier is waar u de gegevens te sturen naar. 1327 01:01:54,130 --> 01:01:56,620 Dus google.com/search. 1328 01:01:56,620 --> 01:01:59,390 En de methode die ik wil gebruiken kan een van twee dingen. 1329 01:01:59,390 --> 01:02:02,870 Het kan ofwel "krijgen", zoals we houden bespreken of het kan "post." 1330 01:02:02,870 --> 01:02:05,340 Voor nu, de fundamentele verschil is, als je gebruik "krijgen" 1331 01:02:05,340 --> 01:02:09,590 alle informatie die de gebruiker levert wordt verzonden in de URL. 1332 01:02:09,590 --> 01:02:13,530 >> Dat is geweldig voor dingen zoals zoeken motoren en een paar andere toepassingen, 1333 01:02:13,530 --> 01:02:17,080 maar in welke omstandigheden zou je niet wilt een formulier invullen 1334 01:02:17,080 --> 01:02:21,620 en hebben de informatie uiteindelijk de URL, net als in de adresbalk van uw browser? 1335 01:02:21,620 --> 01:02:25,470 1336 01:02:25,470 --> 01:02:26,605 Wat voor soort vormen doen je-- 1337 01:02:26,605 --> 01:02:27,480 PUBLIEK: [ONVERSTAANBAAR] 1338 01:02:27,480 --> 01:02:28,450 DAVID J. MALAN: Ja, zoals wat? 1339 01:02:28,450 --> 01:02:29,270 PUBLIEK: Wachtwoorden. 1340 01:02:29,270 --> 01:02:31,936 DAVID J. MALAN: Ja, dus u zich aanmeldt in op Facebook of een website. 1341 01:02:31,936 --> 01:02:34,395 Dat is de input van de gebruiker uit een vorm, een tekstvak, 1342 01:02:34,395 --> 01:02:37,020 maar je waarschijnlijk niet wilt weergegeven in de URL van de browser. 1343 01:02:37,020 --> 01:02:38,121 Waarom? 1344 01:02:38,121 --> 01:02:40,870 Ik bedoel, misschien zijn er een aantal gevolgen voor de veiligheid in het netwerk, 1345 01:02:40,870 --> 01:02:44,830 maar more-- willen, meer gewoon, wat als je kamergenoot, uw significante andere, 1346 01:02:44,830 --> 01:02:47,710 uw kinderen, uw echtgenoot kijkt via uw browser geschiedenis? 1347 01:02:47,710 --> 01:02:50,762 Er is uw wachtwoord rechts er in de geschiedenis van uw browser. 1348 01:02:50,762 --> 01:02:52,220 Dat voelt niet als een goed ontwerp. 1349 01:02:52,220 --> 01:02:54,500 Of zelfs meer technisch, neem aan dat je probeert 1350 01:02:54,500 --> 01:02:59,180 om een ​​foto te uploaden Flickr of Facebook of wherever-- 1351 01:02:59,180 --> 01:03:03,010 dat wil gebruikersinvoer, hoewel het is een beetje meer interesting-- hoe 1352 01:03:03,010 --> 01:03:05,530 ik proppen een afbeelding in de URL-balk? 1353 01:03:05,530 --> 01:03:06,730 U kunt de vorm van een soort van niet. 1354 01:03:06,730 --> 01:03:07,396 U soort kan. 1355 01:03:07,396 --> 01:03:10,210 Maar, echt, ik ben hard ingedrukt voor te stellen dat te doen. 1356 01:03:10,210 --> 01:03:13,470 Dus ik moet een andere methode voor het uploaden van foto's naar een website, 1357 01:03:13,470 --> 01:03:15,657 en dat andere methode wordt "post." 1358 01:03:15,657 --> 01:03:18,740 Maar voor nu, zullen we gewoon praten over "Krijgen" dat het eenvoudiger van de twee. 1359 01:03:18,740 --> 01:03:21,100 Het zet gewoon alle gebruikersinvoer in de URL. 1360 01:03:21,100 --> 01:03:22,830 >> Dus hier is de vorm Ik ben het creëren van. 1361 01:03:22,830 --> 01:03:24,070 Ik wil een input. 1362 01:03:24,070 --> 01:03:24,820 En weet je wat? 1363 01:03:24,820 --> 01:03:26,111 Ik ga een gok hier te nemen. 1364 01:03:26,111 --> 01:03:31,600 Ik ga om te herinneren mijn ingang "q" voor "query." 1365 01:03:31,600 --> 01:03:34,970 En ik denk dat dit een van de originele ontwerpen, misschien, vanaf 1999. 1366 01:03:34,970 --> 01:03:39,560 En dan is het type van deze ingang is gewoon gaat worden "tekst." 1367 01:03:39,560 --> 01:03:43,040 En dan ga ik naar een andere input dat betekent geen naam nodig heeft, zoals we zullen binnenkort 1368 01:03:43,040 --> 01:03:45,120 zie, het type dat "in te dienen." 1369 01:03:45,120 --> 01:03:47,070 En dit gaat geef me een speciale knop. 1370 01:03:47,070 --> 01:03:48,320 En dat is het. 1371 01:03:48,320 --> 01:03:50,790 >> Dus laat me ga je gang en sla het bestand. 1372 01:03:50,790 --> 01:03:54,910 Ik ga terug naar mijn browser en ga naar google.html. 1373 01:03:54,910 --> 01:03:56,140 Enter. 1374 01:03:56,140 --> 01:03:59,680 En het is een soort van sparse op zijn zachtst gezegd. 1375 01:03:59,680 --> 01:04:03,110 Maar laat me ga je gang en zoek naar "katten." 1376 01:04:03,110 --> 01:04:06,510 En let op, ik ben momenteel Dit Cloud9 URL. 1377 01:04:06,510 --> 01:04:09,240 Maar het moment dat ik op deze, waar denk je hoop dat ik terecht? 1378 01:04:09,240 --> 01:04:10,160 >> PUBLIEK: Google. 1379 01:04:10,160 --> 01:04:11,118 >> DAVID J. MALAN: Google. 1380 01:04:11,118 --> 01:04:12,740 Dus laten we klik op Verzenden. 1381 01:04:12,740 --> 01:04:15,200 En inderdaad heb ik opnieuw geïmplementeerd Google. 1382 01:04:15,200 --> 01:04:15,700 Rechts? 1383 01:04:15,700 --> 01:04:16,480 Het is eenvoudiger. 1384 01:04:16,480 --> 01:04:17,120 Het is lichter. 1385 01:04:17,120 --> 01:04:20,350 Ik bedoel, mijn code is duidelijk beter dan van hen, uit de puinhoop die we eerder zagen. 1386 01:04:20,350 --> 01:04:21,100 En weet je wat? 1387 01:04:21,100 --> 01:04:22,610 Ik ga dit kruid omhoog een beetje. 1388 01:04:22,610 --> 01:04:23,860 Ik heb dit niet eerder te noemen. 1389 01:04:23,860 --> 01:04:27,860 Er zijn tags zoals H1, voor rubriek 1, de belangrijkste rubriek van een pagina. 1390 01:04:27,860 --> 01:04:30,570 "My Google:" Ik zal deze oproep. 1391 01:04:30,570 --> 01:04:31,940 Laat me herladen. 1392 01:04:31,940 --> 01:04:33,772 Het ziet er een beetje beter al. 1393 01:04:33,772 --> 01:04:34,980 En, eigenlijk, weet je wat? 1394 01:04:34,980 --> 01:04:36,430 Ik heb already-- ik loog. 1395 01:04:36,430 --> 01:04:40,200 Ik zei dat ik was niet van plan om deze stijl, maar ik ga deze stijl als voorheen. 1396 01:04:40,200 --> 01:04:46,860 En mijn lichaam gaat worden, laten we zeggen, text-align center. 1397 01:04:46,860 --> 01:04:48,800 Het ziet er meer als Google al. 1398 01:04:48,800 --> 01:04:51,090 >> Ik heb een nieuwe regel, hoewel, voor die Submit knop. 1399 01:04:51,090 --> 01:04:52,798 En het blijkt, je kunnen de leden gebruik maken, 1400 01:04:52,798 --> 01:04:57,320 of u kunt meer letterlijk gewoon zeggen, geef me een regeleinde hier-- de br tag. 1401 01:04:57,320 --> 01:04:59,319 En als ik deze opnieuw te laden, nu gaat het daar. 1402 01:04:59,319 --> 01:05:01,610 Het is een beetje lelijk, dus ik meerdere regeleinden kon doen, 1403 01:05:01,610 --> 01:05:03,310 maar laten we hier niet te hebberig te krijgen. 1404 01:05:03,310 --> 01:05:06,430 Dus nu laten we eens kijken of het werkt voor "honden." 1405 01:05:06,430 --> 01:05:08,640 Het lijkt te werken voor "honden" bevatten, alsmede. 1406 01:05:08,640 --> 01:05:10,780 Dus wat is het dwingende afhaalmaaltijd hier? 1407 01:05:10,780 --> 01:05:13,600 Een-- was niet een enorme sprong naar invoering van een paar meer tags, 1408 01:05:13,600 --> 01:05:15,370 zoals de vorm tag in de input-tag. 1409 01:05:15,370 --> 01:05:17,120 Maar fundamenteler is, alles wat we doen 1410 01:05:17,120 --> 01:05:20,610 is gebruik te maken van onze kennis van HTTP en het feit 1411 01:05:20,610 --> 01:05:24,900 dat formulieren uiteindelijk veranderen wat er in de URL van de browser, 1412 01:05:24,900 --> 01:05:28,540 en zo, daarom kunnen we mechanisch bijdrage te leveren tot een server 1413 01:05:28,540 --> 01:05:33,600 door het maken van een HTML-formulier en weten begrijpt dat de server HTTP, 1414 01:05:33,600 --> 01:05:36,890 net als ons lichaam begrijpt, als, schudde mijn hand, dat hetzelfde protocol, 1415 01:05:36,890 --> 01:05:40,920 en zo krijgen we terug de reactie dat we uiteindelijk verwachten. 1416 01:05:40,920 --> 01:05:44,050 >> Dus laten we proberen om een ​​te doen laatste wat nu met mobiele, 1417 01:05:44,050 --> 01:05:47,052 en ik zal make-- ik zal toevoegen Dit stelt dia. 1418 01:05:47,052 --> 01:05:49,760 Dus als je wilt sleutelen, u kan zeker neem het van daar. 1419 01:05:49,760 --> 01:05:51,551 Maar ik ga om te gaan gang en doe een ding. 1420 01:05:51,551 --> 01:05:54,120 Ik ga om te gaan en open mijn index page-- 1421 01:05:54,120 --> 01:05:59,030 hallo mijn pagina als voorheen, die heeft veel van deze faux-Latijnse tekst, 1422 01:05:59,030 --> 01:06:05,470 of betekenisloze Latijnse tekst en has-- het lijkt erop dat dit in dit lettertype. 1423 01:06:05,470 --> 01:06:07,850 Maar laat me gaan en dit te doen. 1424 01:06:07,850 --> 01:06:09,300 Ik ga in Cloud9 om te gaan. 1425 01:06:09,300 --> 01:06:10,380 En je hoeft niet om deze stap te doen. 1426 01:06:10,380 --> 01:06:11,420 Ik zal gewoon doen het zelf. 1427 01:06:11,420 --> 01:06:12,890 Ik ga naar klik op Delen. 1428 01:06:12,890 --> 01:06:15,170 En dit is een functie net van Cloud9, waarbij 1429 01:06:15,170 --> 01:06:17,710 Ik kan mijn omgeving openbaar maken. 1430 01:06:17,710 --> 01:06:20,240 >> En alleen omwille van demonstratie, laat mij dit te doen. 1431 01:06:20,240 --> 01:06:22,870 Ik ga mijn aanvraag openbaar te maken. 1432 01:06:22,870 --> 01:06:25,230 Merk op dat het waarschuwt me, ben Ik zeker dat ik dit wil doen, 1433 01:06:25,230 --> 01:06:28,438 want dit gaat maken voor iedereen in de wereld, of ze nu hier 1434 01:06:28,438 --> 01:06:33,560 of later het bekijken van de video op de internet in staat om te zien wat ik zie. 1435 01:06:33,560 --> 01:06:34,440 Maar dat is oke. 1436 01:06:34,440 --> 01:06:37,870 Ik ga om te zeggen "Klaar." 1437 01:06:37,870 --> 01:06:42,080 En laat me raden u aan, als ik dat deed Dit correctly-- laat ik eerst testen. 1438 01:06:42,080 --> 01:06:45,590 Ga je gang, als je niet mind-- in een browser op uw computer, 1439 01:06:45,590 --> 01:06:49,900 ga naar deze URL, en hopelijk je zal mijn Latijnse tekst te zien. 1440 01:06:49,900 --> 01:06:52,820 En om duidelijk te zijn, is het loopt niet op mijn laptop. 1441 01:06:52,820 --> 01:06:53,610 Het is in de cloud. 1442 01:06:53,610 --> 01:06:58,120 Het is op Cloud9, letterlijk, maar Ik heb mijn werkruimte openbaar gemaakt 1443 01:06:58,120 --> 01:07:03,450 zodat iedereen op het internet kan toegang tot mijn Latijns-startpagina. 1444 01:07:03,450 --> 01:07:07,209 >> Ga naar dezelfde URL op je telefoon, als je kon. 1445 01:07:07,209 --> 01:07:09,750 Als het u zal kosten, hoewel, je kan gewoon kijken over een schouder. 1446 01:07:09,750 --> 01:07:40,688 1447 01:07:40,688 --> 01:07:42,467 PUBLIEK: [ONVERSTAANBAAR] 1448 01:07:42,467 --> 01:07:43,550 DAVID J. MALAN: Het spijt me? 1449 01:07:43,550 --> 01:07:45,390 PUBLIEK: [ONVERSTAANBAAR] 1450 01:07:45,390 --> 01:07:47,710 DAVID J. MALAN: Just Latijnse woorden. 1451 01:07:47,710 --> 01:07:48,210 Dat is alles. 1452 01:07:48,210 --> 01:07:49,250 Maar dat is wat je moet zien. 1453 01:07:49,250 --> 01:07:49,875 >> Publiek: Ja. 1454 01:07:49,875 --> 01:07:50,790 DAVID J. MALAN: Yeah. 1455 01:07:50,790 --> 01:07:51,300 Ja. 1456 01:07:51,300 --> 01:07:51,540 OK. 1457 01:07:51,540 --> 01:07:53,530 Dus ik kan houden van uw telefoon voor slechts een moment? 1458 01:07:53,530 --> 01:07:57,504 Dus, hopelijk, als je de toegang tot het, moet het er bijna onleesbaar. 1459 01:07:57,504 --> 01:07:59,920 Het is still-- Ik bedoel, het is onleesbaar vanwege het Latijn. 1460 01:07:59,920 --> 01:08:01,920 Maar het is ook onleesbaar voor welke andere reden? 1461 01:08:01,920 --> 01:08:03,775 Zoals, wat mishaagt u hierover? 1462 01:08:03,775 --> 01:08:04,650 Publiek: Het is klein. 1463 01:08:04,650 --> 01:08:06,420 DAVID J. MALAN: Het is super, super klein. 1464 01:08:06,420 --> 01:08:07,920 Dus hoe kunnen we dit oplossen? 1465 01:08:07,920 --> 01:08:09,730 Het is super, super klein op Victoria's telefoon 1466 01:08:09,730 --> 01:08:11,400 en, als je hebt getrokken het op jezelf, waarschijnlijk 1467 01:08:11,400 --> 01:08:14,660 kleine op je telefoon als goed, tenzij je hebben toegankelijkheidsinstellingen ingeschakeld. 1468 01:08:14,660 --> 01:08:15,530 Wat is dat? 1469 01:08:15,530 --> 01:08:18,497 Je kon gewoon knijpen en zoom, die werkbaar is, 1470 01:08:18,497 --> 01:08:20,330 maar dan zie je alleen een paar woorden tegelijk. 1471 01:08:20,330 --> 01:08:20,859 Dus wacht een minuut. 1472 01:08:20,859 --> 01:08:21,720 Ik weet hoe dit op te lossen. 1473 01:08:21,720 --> 01:08:22,219 Rechts? 1474 01:08:22,219 --> 01:08:26,130 Ik kon gebruik maken van CSS, en ik kon het veranderen lettergrootte van 12 punten tot 24 punten. 1475 01:08:26,130 --> 01:08:29,020 Maar als neveneffect dat, Uiteraard zal nu, 1476 01:08:29,020 --> 01:08:32,630 op een desktop of een laptop, Nu de tekst is twee keer zo groot. 1477 01:08:32,630 --> 01:08:35,810 En zo zou het wel leuk zijn onderscheid tussen apparaten, 1478 01:08:35,810 --> 01:08:37,840 en het blijkt dat er zijn manieren om dat te doen. 1479 01:08:37,840 --> 01:08:39,590 Er zijn meerdere verschillende manieren, in feite, 1480 01:08:39,590 --> 01:08:44,189 waarbij met behulp van CSS en liefhebber functies dat we niet in zal gaan in groot detail, 1481 01:08:44,189 --> 01:08:46,960 je kunt in wezen opvragen de browser en zeggen: 1482 01:08:46,960 --> 01:08:51,550 Als uw scherm kleiner is dan deze veel pixels Gebruik deze lettergrootte. 1483 01:08:51,550 --> 01:08:55,180 Als uw scherm is groter dan deze veel pixels, gebruik dan deze andere lettergrootte. 1484 01:08:55,180 --> 01:08:57,080 >> U kunt zelfs liefhebber nog steeds. 1485 01:08:57,080 --> 01:09:00,140 Als je ooit hebt bezocht een webpagina die, op een desktop, 1486 01:09:00,140 --> 01:09:04,404 heeft een groot menu misschien af ​​naar de kant, en vervolgens alle inhoud 1487 01:09:04,404 --> 01:09:07,029 is aan de zijkant van die menu-- dat is een soort van een gemeenschappelijk paradigma. 1488 01:09:07,029 --> 01:09:09,670 Menu links, content rechts, of vice versa. 1489 01:09:09,670 --> 01:09:13,569 Niet echt werken op mobiele wanneer uw scherm is alleen zoveel pixels breed. 1490 01:09:13,569 --> 01:09:16,233 Dus vaker op mobiel is, het menu zal plotseling krijgen 1491 01:09:16,233 --> 01:09:18,399 ingestort, en je moet klik op een knop om het te zien, 1492 01:09:18,399 --> 01:09:22,404 of de website zal het menu te zetten erboven en zet de inhoud eronder. 1493 01:09:22,404 --> 01:09:24,779 En u kunt deze implementeren dingen op meerdere manieren, ook. 1494 01:09:24,779 --> 01:09:28,340 U kunt uw programmeurs vragen, hey, team, op elk moment 1495 01:09:28,340 --> 01:09:34,450 zie je een HTTP-verzoek vanaf een Android apparaat, een Microsoft-apparaat, een Google 1496 01:09:34,450 --> 01:09:39,930 apparaat, een Apple-apparaat Gebruik deze lettergrootte en het gebruik van dit menu lay-out, 1497 01:09:39,930 --> 01:09:42,670 of anders te gebruiken deze standaard grotere lay-out. 1498 01:09:42,670 --> 01:09:45,410 >> Nu, met behulp van wat fundamentele techniek vandaag 1499 01:09:45,410 --> 01:09:48,529 konden de ingenieurs gebruiken om te weten of het 1500 01:09:48,529 --> 01:09:53,660 een iPhone, een Android-telefoon, een laptop, een desktop een bezoek aan de server van het bedrijf? 1501 01:09:53,660 --> 01:09:55,310 Waarin krijgen ze die informatie? 1502 01:09:55,310 --> 01:09:56,080 >> PUBLIEK: header? 1503 01:09:56,080 --> 01:09:57,740 >> DAVID J. MALAN: Ja, de HTTP-header. 1504 01:09:57,740 --> 01:10:01,714 Dus elke HTTP request uit hun klanten aan hun servers 1505 01:10:01,714 --> 01:10:03,880 omvatten, in die virtuele envelop, een hele hoop 1506 01:10:03,880 --> 01:10:08,260 HTTP headers, waarvan een de browser en het besturingssysteem 1507 01:10:08,260 --> 01:10:10,290 zelfs, als je de zorg om dat niveau van detail. 1508 01:10:10,290 --> 01:10:13,790 Nu, het is een cryptische uitziende koord, maar bestaat er software die maar 1509 01:10:13,790 --> 01:10:18,530 vereenvoudigen dat, en je kunt gewoon vragen in de programmering code-- PHP, Java, C ++, 1510 01:10:18,530 --> 01:10:23,650 whatever-- welke telefoon is dit-- welk apparaat is deze gebruiker met behulp van? 1511 01:10:23,650 --> 01:10:27,501 En dan kun je zeggen, laat ze dit versie van de website als het een telefoon. 1512 01:10:27,501 --> 01:10:30,250 Laat ze deze versie van de website als het een laptop of desktop. 1513 01:10:30,250 --> 01:10:32,316 Maar je hoeft niet eens nodig server-side complexiteit. 1514 01:10:32,316 --> 01:10:33,940 U kunt zelfs de eenvoudigste dingen te doen. 1515 01:10:33,940 --> 01:10:34,815 >> Ik ga dit doen. 1516 01:10:34,815 --> 01:10:38,995 Ik ga om verder te gaan in Cloud9 mijn omgeving, 1517 01:10:38,995 --> 01:10:41,370 en ik ga om een ​​tag toe te voegen die je zag in Google voor. 1518 01:10:41,370 --> 01:10:42,770 Het heet de metatag. 1519 01:10:42,770 --> 01:10:45,520 En ik herinner me nog nooit zo een, dus Ik ga het hier transcriberen. 1520 01:10:45,520 --> 01:10:50,552 Meta name = "viewport" en dan content = "width = breedte apparaat, intital 1521 01:10:50,552 --> 01:11:02,060 schaal = 1 "en dat is het. 1522 01:11:02,060 --> 01:11:06,230 >> Dus het kan net zo goed als een magische bezwering. 1523 01:11:06,230 --> 01:11:11,300 Het is niet zo duidelijk, maar dit heeft iets te maken met de viewport, 1524 01:11:11,300 --> 01:11:15,070 en het kijkvenster is slechts het lichaam van een webpagina, het rechthoekige gebied dat 1525 01:11:15,070 --> 01:11:16,690 definieert het grootste deel van de pagina. 1526 01:11:16,690 --> 01:11:19,060 En dit is gewoon te vertellen de browser, weet je wat? 1527 01:11:19,060 --> 01:11:22,589 Maak de breedte van deze pagina in feite gelijk aan de breedte apparaat. 1528 01:11:22,589 --> 01:11:25,380 Met andere woorden, niet van uit dat je hebt een soort van onbeperkte ruimte. 1529 01:11:25,380 --> 01:11:29,920 Stel dat u alleen zo veel ruimte het apparaat zelf groot. 1530 01:11:29,920 --> 01:11:34,454 En nu, als ik dit opnieuw te laden in mijn browser, zie ik geen verandering. 1531 01:11:34,454 --> 01:11:37,370 Maar als ik deed dit correctly-- en laat me mijn fingers-- steken als je alle 1532 01:11:37,370 --> 01:11:42,920 herlaad je telefoon, heb je zie een dwingende verandering? 1533 01:11:42,920 --> 01:11:43,620 Ja, is dat-- 1534 01:11:43,620 --> 01:11:45,067 >> PUBLIEK: [ONVERSTAANBAAR] 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 Dus misschien wel beter leesbaar nu? 1538 01:11:47,850 --> 01:11:53,070 Nog klein, om eerlijk te zijn, maar niet zo klein als te onhandelbaar zijn. 1539 01:11:53,070 --> 01:11:56,920 En ik zou zeker dit overschrijven verder met CSS of op de server, 1540 01:11:56,920 --> 01:12:00,120 maar in toenemende mate wat je bent zien is meer en meer functies 1541 01:12:00,120 --> 01:12:02,900 wordt toegevoegd aan client-side environments-- 1542 01:12:02,900 --> 01:12:06,530 JavaScript, zoals we zullen bespreken morgen, CSS, en dus HTML-- 1543 01:12:06,530 --> 01:12:09,190 dat al deze vragen kan op de client 1544 01:12:09,190 --> 01:12:11,910 teneinde de last server een stuk minder en niet 1545 01:12:11,910 --> 01:12:14,530 moeten bijhouden, voor Zo is de constante aanval 1546 01:12:14,530 --> 01:12:17,210 nieuwe besturingssysteem versies, nieuwe browserversies. 1547 01:12:17,210 --> 01:12:20,190 Je kunt gewoon laten de browser vraagt ​​het apparaat, hoe groot bent u, 1548 01:12:20,190 --> 01:12:22,890 en vervolgens enigszins logisch beslissingen op basis van dat. 1549 01:12:22,890 --> 01:12:25,140 Maar we zullen zien meer kansen voor logische beslissingen 1550 01:12:25,140 --> 01:12:27,223 morgen in het kader van een programmeertaal. 1551 01:12:27,223 --> 01:12:29,800 1552 01:12:29,800 --> 01:12:32,760 >> Dus, nog vragen, dan, on web development? 1553 01:12:32,760 --> 01:12:36,130 Vandaag is het niet web programmeren, per se, omdat de meeste alles wat we deden 1554 01:12:36,130 --> 01:12:38,370 was zeer esthetisch, als je wil. 1555 01:12:38,370 --> 01:12:41,750 Er is geen besluitvorming in de code die we hebben geschreven, 1556 01:12:41,750 --> 01:12:44,990 en dus dat is waarom HTML is een markup taal, niet een programmeertaal. 1557 01:12:44,990 --> 01:12:47,140 Maar morgen zullen we nemen een snelle blik, uiteindelijk, 1558 01:12:47,140 --> 01:12:49,340 in JavaScript, die een effectief programmering 1559 01:12:49,340 --> 01:12:54,220 taal die laat ons een beetje meer te doen. 1560 01:12:54,220 --> 01:12:56,800 >> Nog vragen? 1561 01:12:56,800 --> 01:13:00,480 Nou, laat me stellen twee mogelijkheden optioneel voor huiswerk. 1562 01:13:00,480 --> 01:13:02,900 Eén is-- deze Cloud9 accounts niet verlopen. 1563 01:13:02,900 --> 01:13:04,669 U bent van harte welkom om te gebruiken ze te sleutelen aan. 1564 01:13:04,669 --> 01:13:05,960 Het is het gratis niveau van de dienstverlening. 1565 01:13:05,960 --> 01:13:08,754 Realiseer je dat, als bij het maken van uw werkruimte, je het openbaar worden gemaakt, 1566 01:13:08,754 --> 01:13:11,670 dat betekent wel dat iedereen op de internet kan zien wat je aan het typen bent. 1567 01:13:11,670 --> 01:13:15,104 Dus misschien maar eens kijken jezelf niet gênant 1568 01:13:15,104 --> 01:13:18,020 als je het zetten van uw eerste web pagina die er publiekelijk ongeluk, 1569 01:13:18,020 --> 01:13:20,134 maar niemand gaat weet er toch kijken. 1570 01:13:20,134 --> 01:13:23,760 >> En two-- laat me gooien up deze URL als goed, 1571 01:13:23,760 --> 01:13:28,250 vooral als je binnen kwam vandaag een iets minder comfortabel dan anderen, 1572 01:13:28,250 --> 01:13:30,430 niet zeker wat dit allemaal betekent. 1573 01:13:30,430 --> 01:13:36,780 Realiseer je dat nog veel meer van deze video, die zowel een goede manier om in slaap te vallen 1574 01:13:36,780 --> 01:13:39,380 en ook om te lachen, terwijl Daarbij heeft ook 1575 01:13:39,380 --> 01:13:44,300 veel maatschappelijk interessante en security-relevante discussies 1576 01:13:44,300 --> 01:13:47,370 daarin van John Oliver, zij het een komiek. 1577 01:13:47,370 --> 01:13:55,456 >> Maar als er geen verdere vragen, dat brengt ons bij de receptie. 1578 01:13:55,456 --> 01:13:56,830 Dus waarom niet ik weer op de muziek. 1579 01:13:56,830 --> 01:13:58,610 Er moeten drankjes en snacks buiten. 1580 01:13:58,610 --> 01:14:00,220 Ik ben blij om zich te mengen voor zo Zolang mensen zouden willen, 1581 01:14:00,220 --> 01:14:01,600 vragen te beantwoorden meer één-op-één. 1582 01:14:01,600 --> 01:14:03,330 Maar, anders, u bent van harte welkom af te nemen op elk punt, 1583 01:14:03,330 --> 01:14:05,740 en we zullen je weer te zien morgen voor een beetje meer. 1584 01:14:05,740 --> 01:14:07,290 Oke, dankjewel. 1585 01:14:07,290 --> 01:14:10,428