1 00:00:00,000 --> 00:00:00,127 2 00:00:00,127 --> 00:00:01,210 David J. MALAN: Goed. 3 00:00:01,210 --> 00:00:02,160 Ons is terug. 4 00:00:02,160 --> 00:00:05,810 So, die doel van hierdie finale sessie is om nog 'n paar konsepte bekend te stel 5 00:00:05,810 --> 00:00:09,290 maar ook vir almal 'n kans soort strek jou vingers 6 00:00:09,290 --> 00:00:11,270 en eintlik iets te doen 'n bietjie hande-op. 7 00:00:11,270 --> 00:00:13,897 Die doel is nie om te draai ons almal in die web-ontwikkelaars 8 00:00:13,897 --> 00:00:16,230 op enige manier, maar eintlik net julle 'n voorsmakie van 'n paar te gee 9 00:00:16,230 --> 00:00:21,750 van die fundamentele boustene van wat gaan in web ontwikkeling en vandag web 10 00:00:21,750 --> 00:00:23,980 ontwikkeling, sodat die statiese kant van things-- 11 00:00:23,980 --> 00:00:26,660 geen logika, geen ontwikkeling taal, net statiese inhoud. 12 00:00:26,660 --> 00:00:29,660 En dit sal vir ons 'n geleentheid te gee om werklik te sien wat 'n webbediener is, 13 00:00:29,660 --> 00:00:34,140 Kyk wat 'n HTML-lêer is, sien wat Dit is HTTP is eintlik bedien word. 14 00:00:34,140 --> 00:00:38,600 Maar voordat ons duik in, enige terugwerkende vrae oor wolk rekenaar 15 00:00:38,600 --> 00:00:43,922 of sekuriteit of enigiets tussenin? 16 00:00:43,922 --> 00:00:44,890 >> Geen? 17 00:00:44,890 --> 00:00:47,181 Goed, goed, kom ons doen dit, net in geval 18 00:00:47,181 --> 00:00:49,680 die proses van die ondertekening vir iets neem 'n paar minute. 19 00:00:49,680 --> 00:00:51,221 Ons sal jou laat dit doen dit in die agtergrond. 20 00:00:51,221 --> 00:00:56,860 Gaan voort, as jy kon, hierdie URL here-- c9.io. 21 00:00:56,860 --> 00:01:02,810 Dit is 'n derde party service-- platform as 'n diens, as jy will-- 22 00:01:02,810 --> 00:01:05,190 wat gaan om jou te nooi aan te meld vir 'n rekening, 23 00:01:05,190 --> 00:01:08,650 en dit gaan aan elkeen van julle gee 'n rekening in die sogenaamde wolk 24 00:01:08,650 --> 00:01:11,330 op infrastruktuur iemand anders se, 'n maatskappy genaamd Cloud9. 25 00:01:11,330 --> 00:01:13,350 Maar wat is lekker oor hiervoor is dat hulle jou gee 26 00:01:13,350 --> 00:01:15,990 'n benadering van 'n werklike werklike ontwikkeling 27 00:01:15,990 --> 00:01:18,530 omgewing, al is dit in die wolk en in 'n webblaaier, 28 00:01:18,530 --> 00:01:21,175 en ons sal dit gebruik om werklik eksperimenteer 'n bietjie vandag. 29 00:01:21,175 --> 00:01:27,116 30 00:01:27,116 --> 00:01:30,260 En dan voort te gaan en net te navigeer jou pad na die aanmelding proses 31 00:01:30,260 --> 00:01:32,630 as jy kon. 32 00:01:32,630 --> 00:01:36,080 So gebeur ons om dit te gebruik in die klas Ek leer vir al ons studente, 33 00:01:36,080 --> 00:01:39,140 beide op die kampus en af ​​nou, en dit vervang wat histories 34 00:01:39,140 --> 00:01:41,390 was anders aflaaibare sagteware. 35 00:01:41,390 --> 00:01:44,620 So, wat jy toegang verkry tot is een van die virtuele masjiene, 36 00:01:44,620 --> 00:01:46,460 in wese, dat ek vroeër beskryf. 37 00:01:46,460 --> 00:01:50,260 So hierdie maatskappy Cloud9 waarskynlik huurgeld van 'n derde party-- inderdaad 38 00:01:50,260 --> 00:01:52,760 in hierdie geval, Google-- geheel n klomp van die virtuele masjiene 39 00:01:52,760 --> 00:01:56,500 dat hulle een of ander manier kap in die illusie van individuele bedieners 40 00:01:56,500 --> 00:01:58,610 dat elkeen van ons het volle beheer oor. 41 00:01:58,610 --> 00:02:01,640 Dit is nie heeltemal akkuraat om te sê dat hulle virtuele masjiene, 42 00:02:01,640 --> 00:02:04,550 al is, want wat Cloud9 gebruik eintlik 43 00:02:04,550 --> 00:02:07,570 is 'n bietjie nuwer tegnologie genoem behouering. 44 00:02:07,570 --> 00:02:13,150 En laat ek dié foto gryp hier om hierdie foto te verf. 45 00:02:13,150 --> 00:02:16,540 >> 'N houer, indien jy onthou die prentjie 46 00:02:16,540 --> 00:02:19,900 van vroeër, 'n bietjie ligter gewig as 'n virtuele masjien. 47 00:02:19,900 --> 00:02:22,090 Trouens, terwyl verlede tyd het ons gepraat oor daar 48 00:02:22,090 --> 00:02:25,170 om 'n bedryfstelsel stelsel en 'n hypervisor 49 00:02:25,170 --> 00:02:28,260 en dan gas bedryfstelsel, gas bedryfstelsel, gas bedryfstelsel 50 00:02:28,260 --> 00:02:30,940 stelsel, op die top van jou fisiese hardeware, 51 00:02:30,940 --> 00:02:33,740 die verskil met hierdie nuwe tegnologie, behouering, 52 00:02:33,740 --> 00:02:37,290 is dat hulle almal een of ander manier deel dieselfde bedryfstelsel. 53 00:02:37,290 --> 00:02:39,970 Maar hulle het steeds skep die illusie van almal 54 00:02:39,970 --> 00:02:44,590 met sy of haar eie eksklusiewe administratiewe regte en lêers 55 00:02:44,590 --> 00:02:45,400 op die bediener. 56 00:02:45,400 --> 00:02:48,230 Maar daar is minder sagteware in tussen jou en die hardeware. 57 00:02:48,230 --> 00:02:52,260 Die gevolg daarvan is, in teorie, 'n hoër prestasie, 58 00:02:52,260 --> 00:02:55,470 want jy gebruik of mors minder hulpbronne 59 00:02:55,470 --> 00:02:57,360 op daardie sogenaamde skynwerklikmaking laag. 60 00:02:57,360 --> 00:02:59,420 So dit staan ​​bekend as behouering van nature 61 00:02:59,420 --> 00:03:02,920 by wyse van 'n tegnologie genaamd Docker, wat baie kom tot sy reg. 62 00:03:02,920 --> 00:03:05,086 En dit is iets wat ingenieurs by jou maatskappy 63 00:03:05,086 --> 00:03:08,610 dalk soort soort begin praat oor gou as hulle nie reeds, 64 00:03:08,610 --> 00:03:11,590 al is daar is beslis geen rede om te spring oor enige bandwagons. 65 00:03:11,590 --> 00:03:15,410 >> So met wat gesê het, wat jy waarskynlik sien nou 66 00:03:15,410 --> 00:03:22,670 is 'n skerm wat 'n bietjie lyk soos volg. 67 00:03:22,670 --> 00:03:23,170 OK. 68 00:03:23,170 --> 00:03:25,260 En net noem my oor as dit nie. 69 00:03:25,260 --> 00:03:27,440 En as so-- Ek sal oor kom as dit nie. 70 00:03:27,440 --> 00:03:30,244 Gaan voort en klik dat groot plus 'n werkplek te skep, 71 00:03:30,244 --> 00:03:31,660 en jy sal 'n skerm soos hierdie te sien. 72 00:03:31,660 --> 00:03:35,020 Jy kan die werkplek te bel noem enigiets wat jy wil vir eers. 73 00:03:35,020 --> 00:03:38,660 En net eintlik vir eenvoud, gaan and-- goed, sommige van julle 74 00:03:38,660 --> 00:03:39,660 reeds werkruimtes. 75 00:03:39,660 --> 00:03:47,050 Noem dit wat jy besigheid want--, Harvard, Donderdag alles wat jy wil. 76 00:03:47,050 --> 00:03:48,800 Jy hoef nie 'n beskrywing. 77 00:03:48,800 --> 00:03:52,380 Jy kan dit te laat private, tensy jy het reeds 'n klomp van die werkruimtes. 78 00:03:52,380 --> 00:03:55,280 As jy gedwing is dit openbaar te maak, dit is goed vir die doel van vandag. 79 00:03:55,280 --> 00:03:56,750 Ook hier is een van die upsells. 80 00:03:56,750 --> 00:03:59,939 Jy kry een private werkplek deur verstek. Maar as jy wil meer, 81 00:03:59,939 --> 00:04:00,980 jy het om te betaal vir meer. 82 00:04:00,980 --> 00:04:02,870 Andersins, dit dwing jou om jou werk openbaar te maak. 83 00:04:02,870 --> 00:04:05,600 Maar dit is goed, want hulle het ook teiken hierdie by open-source gemeenskappe 84 00:04:05,600 --> 00:04:07,700 om mense aan te moedig eintlik saam. 85 00:04:07,700 --> 00:04:10,699 >> En die laaste ding wat belangrik is, al is, is, nadat jy 'n naam kies 86 00:04:10,699 --> 00:04:17,140 en nadat jy private of openbare kies, Klik HTML5, die groot oranje ikoon 87 00:04:17,140 --> 00:04:22,430 tweede van links, en kliek Skep Workspace. 88 00:04:22,430 --> 00:04:24,580 En dit sal waarskynlik neem 'n minuut of so, 89 00:04:24,580 --> 00:04:26,540 maar jy sal dan 'n omgewing, sodra jy 90 00:04:26,540 --> 00:04:30,544 dit doen, wat herinner aan lyk wat ek het op die skerm hier nou. 91 00:04:30,544 --> 00:04:33,210 Maar, weer, is dit dalk 'n rukkie neem of meer om na hierdie skerm 92 00:04:33,210 --> 00:04:34,770 Sodra jy geklik Skep Workspace. 93 00:04:34,770 --> 00:04:37,936 Maar net vlag vir my oor as jy my wil 'n blik op iets of advies te neem. 94 00:04:37,936 --> 00:04:40,191 95 00:04:40,191 --> 00:04:40,690 Alles reg. 96 00:04:40,690 --> 00:04:42,390 So ek gaan agtergrond dit vir nou. 97 00:04:42,390 --> 00:04:44,260 Bel my oor as jy lyk enige tegniese probleme. 98 00:04:44,260 --> 00:04:46,210 Maar, weer, kan dit neem 'n bietjie vir daardie oop te maak. 99 00:04:46,210 --> 00:04:49,570 En laat ons gaan voort en praat oor wat Dit beteken eintlik om 'n webblad te maak, 100 00:04:49,570 --> 00:04:52,780 wat HTML is, en hoe dit alles nou met mekaar verbind as ons begin 101 00:04:52,780 --> 00:04:54,730 om werklik te gebruik 'n paar van die tegnologie. 102 00:04:54,730 --> 00:04:58,310 So dit blyk dat ek kan gaan op my klein Mac hier, 103 00:04:58,310 --> 00:05:01,650 maak 'n eenvoudige program genaamd Text Editor, of op Windows ek kon 104 00:05:01,650 --> 00:05:04,480 oop iets genoem Notepad.exe. 105 00:05:04,480 --> 00:05:08,260 En ek kon net eenvoudig iets te doen soos this-- "hallo, wêreld." 106 00:05:08,260 --> 00:05:12,020 En dan kan ek dit stoor as hello.txt So geen magic daar. 107 00:05:12,020 --> 00:05:15,200 Dit het niks te doen met die web ontwikkeling, niks te doen met HTML. 108 00:05:15,200 --> 00:05:16,790 Net die skep van 'n eenvoudige teks lêer. 109 00:05:16,790 --> 00:05:20,600 Maar dit blyk dat 'n web bladsy is letterlik net dat. 110 00:05:20,600 --> 00:05:24,020 Dit is 'n eenvoudige teks lêer met teks dat jy kan tik op die sleutelbord, 111 00:05:24,020 --> 00:05:30,070 maar dit tipies maar nie altyd eindig in nie txt maar Html of htm. 112 00:05:30,070 --> 00:05:32,050 En jy hoef nie net tik woorde in die lêer. 113 00:05:32,050 --> 00:05:35,280 Jy het eintlik om dinge genoem gebruik tags of, meer algemeen, iets 114 00:05:35,280 --> 00:05:37,190 genoem opmaak taal. 115 00:05:37,190 --> 00:05:40,510 >> So ek gaan baie vinnig tik en dan die volgende te verduidelik. 116 00:05:40,510 --> 00:05:42,290 Ek gaan eerste tik hierdie, wat sê: 117 00:05:42,290 --> 00:05:45,730 hey, leser, hier kom 'n webblad geskryf in HTML. 118 00:05:45,730 --> 00:05:51,850 En hierdie twee dinge saam sê, hey, leser, die volgende is inderdaad HTML. 119 00:05:51,850 --> 00:05:55,790 Hey, die leser, hier kom die hoof of die top van my bladsy. 120 00:05:55,790 --> 00:05:59,900 Hey, die leser, binnekant van die top van my bladsy, sit 'n titel wat, "hallo, 121 00:05:59,900 --> 00:06:01,610 wêreld. " 122 00:06:01,610 --> 00:06:08,370 Hey, die leser, nadat die hoof van my bladsy, hier kom die liggaam van my bladsy. 123 00:06:08,370 --> 00:06:12,170 En, hey, leser, die liggaam van my bladsy moet ook sê, "hello world." 124 00:06:12,170 --> 00:06:15,500 So, wat is die belangrikste besonderhede hier? 125 00:06:15,500 --> 00:06:17,960 Dit is wat oor die algemeen bekend as 'n dokument tipe verklaring, 126 00:06:17,960 --> 00:06:20,190 en, eerlik, dit is 'n bietjie moeilik om hierdie memoriseer by die eerste. 127 00:06:20,190 --> 00:06:21,481 Jy moet net soort kopieer-plak dit. 128 00:06:21,481 --> 00:06:23,760 Dit is die formele manier om te sê, hey, leser, 129 00:06:23,760 --> 00:06:28,030 Ek gebruik HTML-weergawe 5 wat uitgekom ietwat onlangs. 130 00:06:28,030 --> 00:06:31,380 Dit is 'n magiese inkantasie dat sommige mense met 'n swak sin vir ontwerp 131 00:06:31,380 --> 00:06:33,640 besluit op die om te sit top van die lêer. 132 00:06:33,640 --> 00:06:35,473 Selfs al is dit 'n bietjie arcane, dis al 133 00:06:35,473 --> 00:06:38,250 dit means-- hey, leser, hier kom met weergawe 5 van HTML. 134 00:06:38,250 --> 00:06:41,741 >> Die res van hierdie is met ons vir 'n geruime tyd nou, histories, 135 00:06:41,741 --> 00:06:44,740 maar dit is in beweging, en dit is waarskynlik 'n bietjie makliker. 136 00:06:44,740 --> 00:06:47,320 Let 'n paar eienskappe van wat ek uitgelig. 137 00:06:47,320 --> 00:06:49,890 Daar is hierdie dinge met skuins brackets-- links hakkie 138 00:06:49,890 --> 00:06:51,040 en die reg bracket. 139 00:06:51,040 --> 00:06:52,490 En let op die simmetrie hier. 140 00:06:52,490 --> 00:06:57,340 En deur simmetrie, ek bedoel, net soos ek hierdie begin tag hier of 'n oop tag 141 00:06:57,340 --> 00:07:01,560 as jy wil, hier af het ek 'n naby tag of 'n einde tag dit is 142 00:07:01,560 --> 00:07:06,460 verskillende slegs vir sover dit hierdie streep aan die begin van die woord 143 00:07:06,460 --> 00:07:07,360 HTML. 144 00:07:07,360 --> 00:07:09,360 En jy kan dink dit as ek was terloops 145 00:07:09,360 --> 00:07:12,280 stel voor, hey, leser, hier kom 'n paar HTML. 146 00:07:12,280 --> 00:07:16,060 En omgekeerd, hey, leser, dit is dit vir die HTML-- begin en einde. 147 00:07:16,060 --> 00:07:18,440 >> Intussen hey, leser, hier kom die hoof van my bladsy. 148 00:07:18,440 --> 00:07:20,140 Hey, die leser, dit is dit vir die kop. 149 00:07:20,140 --> 00:07:22,240 Hey, die leser, hier is die liggaam van my bladsy. 150 00:07:22,240 --> 00:07:24,020 Hey, die leser, dit is dit vir die liggaam. 151 00:07:24,020 --> 00:07:26,940 En binnekant van dit is 'n paar arbitrêre teks vir nou. 152 00:07:26,940 --> 00:07:30,520 En binnekant van die kop, intussen, is 'n paar arbitrêre maar gemerk, 153 00:07:30,520 --> 00:07:34,410 om so te praat, teks wat sê, die titel van my bladsy sal wees "hallo, wêreld." 154 00:07:34,410 --> 00:07:37,470 Nou, vir nou, kan jy aanvaar dat bruisers 155 00:07:37,470 --> 00:07:41,762 het only-- of, eerder, webblaaie het slegs twee parts-- die kop en die liggaam. 156 00:07:41,762 --> 00:07:44,220 En die hoof is oor die algemeen net soos die menubalk, die dinge 157 00:07:44,220 --> 00:07:45,510 eintlik net by die heel boonste. 158 00:07:45,510 --> 00:07:48,910 En die liggaam is die ingewande van die bladsy, alles in daardie groot reghoek 159 00:07:48,910 --> 00:07:50,239 wat vul die skerm. 160 00:07:50,239 --> 00:07:51,780 So ek gaan om voort te gaan en dit te doen. 161 00:07:51,780 --> 00:07:54,400 Ek gaan om voort te gaan en Klik Save, lêer te stoor. 162 00:07:54,400 --> 00:07:58,580 En ek gaan om te spaar dit as hello.html, 163 00:07:58,580 --> 00:08:00,870 en ek is net gaan sit dit op my lessenaar. 164 00:08:00,870 --> 00:08:03,520 En ek gaan om te gaan voort en klik op Save. 165 00:08:03,520 --> 00:08:05,806 En notice-- my Mac by Minstens is skree op my. 166 00:08:05,806 --> 00:08:07,180 Is jy seker jy wil dit doen? 167 00:08:07,180 --> 00:08:08,710 En ek gaan om te sê, ja, gebruik HTML. 168 00:08:08,710 --> 00:08:10,400 Ek weet beter in hierdie geval. 169 00:08:10,400 --> 00:08:14,686 En nou gaan ek na my lessenaar waar ek hierdie lêer skielik. 170 00:08:14,686 --> 00:08:16,060 En ek gaan dubbel-kliek dit. 171 00:08:16,060 --> 00:08:18,268 En jy sal agterkom dat, deur standaard, Chrome oopgemaak. 172 00:08:18,268 --> 00:08:19,996 Dit is omdat dit is my standaard leser. 173 00:08:19,996 --> 00:08:21,370 En dit net sê, "Hallo, wêreld." 174 00:08:21,370 --> 00:08:23,078 Maar dit sê "hallo, wêreld "op twee plekke. 175 00:08:23,078 --> 00:08:23,979 Let links bo. 176 00:08:23,979 --> 00:08:25,020 Baie moeilik om te mis nie. 177 00:08:25,020 --> 00:08:26,180 Dit is 'n groot en sterk. 178 00:08:26,180 --> 00:08:30,690 En waar anders lyk dit om te sê, "Hallo, wêreld"? 179 00:08:30,690 --> 00:08:31,470 >> Gehoor: Die blad. 180 00:08:31,470 --> 00:08:33,100 >> David J. MALAN: Ja, die blad self. 181 00:08:33,100 --> 00:08:35,159 So wanneer ek sê die hoof van die bladsy is alles tot top-- 182 00:08:35,159 --> 00:08:36,367 en inderdaad is dit die titel. 183 00:08:36,367 --> 00:08:37,710 Dis net in die blad hier. 184 00:08:37,710 --> 00:08:40,320 En ek kan hierdie blad trek uit sodat dit nie te verwar. 185 00:08:40,320 --> 00:08:43,360 Dit is net 'n enkele blad nou, en inderdaad sien ons "hallo, wêreld" 186 00:08:43,360 --> 00:08:45,970 hier en "hallo, wêreld" hier neer. 187 00:08:45,970 --> 00:08:47,160 So baie simpel. 188 00:08:47,160 --> 00:08:49,050 Maar dit is ook redelik eenvoudig. 189 00:08:49,050 --> 00:08:50,440 En eintlik, ek ingezoomd. 190 00:08:50,440 --> 00:08:53,272 Ek kan die lettergrootte net verander om te vergroot vir toeganklikheid. 191 00:08:53,272 --> 00:08:56,830 Maar laat ons nou iets te doen 'n bietjie meer interessant. 192 00:08:56,830 --> 00:08:59,760 >> Ek gaan go-- Oeps, laat my kom terug na my tekslêer. 193 00:08:59,760 --> 00:09:02,400 Ek is terug te gaan na my tekslêer, en ek gaan 194 00:09:02,400 --> 00:09:06,320 om dit te verander en sê "Hallo, Disney World." 195 00:09:06,320 --> 00:09:07,970 Red. 196 00:09:07,970 --> 00:09:10,919 En gaan terug na my leser en kliek Reload. 197 00:09:10,919 --> 00:09:12,710 En nou, natuurlik, dit sê "Disney World." 198 00:09:12,710 --> 00:09:15,500 En ek gaan kunsmatig vergroot in net sodat dit makliker is om te sien. 199 00:09:15,500 --> 00:09:19,012 So nou, helaas, ek soort wil aan- Eintlik is dit 'n Mac funksie. 200 00:09:19,012 --> 00:09:21,720 Ek wil om te klik op Disney World en gaan iewers soos disney.com, 201 00:09:21,720 --> 00:09:23,290 maar dit beteken nie werk nie. 202 00:09:23,290 --> 00:09:26,850 So 'n basiese beginsel van die web is hiperskakels, skakels wat elders gaan. 203 00:09:26,850 --> 00:09:28,390 So, hoe doen ek dit? 204 00:09:28,390 --> 00:09:34,690 Wel, ek kan net sê, "Hallo, http://www.disney.com." 205 00:09:34,690 --> 00:09:36,110 Slaan hierdie. 206 00:09:36,110 --> 00:09:37,620 Reload. 207 00:09:37,620 --> 00:09:39,400 Maar dit ook nie klikbare. 208 00:09:39,400 --> 00:09:42,930 En wat is lekker hier, selfs al dit is nog nie funksionele, 209 00:09:42,930 --> 00:09:45,930 is dat dit blyk dat die leser nie letterlik net 210 00:09:45,930 --> 00:09:46,950 wat Ek sê dit te doen. 211 00:09:46,950 --> 00:09:50,110 So as ek tik net 'n URL soos hierdie, dit is net gaan om te wys my die URL. 212 00:09:50,110 --> 00:09:54,270 Ek nodig het om etikette of opmaak gebruik taal om werklik vertel 213 00:09:54,270 --> 00:09:55,621 die leser om nog meer te doen. 214 00:09:55,621 --> 00:09:57,870 So ek gaan om voort te gaan en verwyder dit vir 'n oomblik. 215 00:09:57,870 --> 00:10:00,980 En ek gaan om te sê, hey, leser, begin 'n anker hier, 216 00:10:00,980 --> 00:10:02,650 'n skakel om so te praat. 217 00:10:02,650 --> 00:10:07,500 En die hiper-verwysing, die bestemming van daardie anker, moet hierdie URL wees. 218 00:10:07,500 --> 00:10:08,750 En let op my aanhalings. 219 00:10:08,750 --> 00:10:11,590 Ek kon aanhalingstekens gebruik ook maar jy het om konsekwent te wees, 220 00:10:11,590 --> 00:10:14,270 en Ek sal oor die algemeen net gebruik dubbele aanhalingstekens om dit eenvoudig te hou. 221 00:10:14,270 --> 00:10:16,820 Let Ek gaan die etiket sluit. 222 00:10:16,820 --> 00:10:21,160 En dan hier gaan ek om te sê, "Disney World." 223 00:10:21,160 --> 00:10:26,890 En nou het ek moet 'n paar symmetry-- oop bracket, / a, gesluit bracket. 224 00:10:26,890 --> 00:10:28,090 >> So, wat het ek voorgestel? 225 00:10:28,090 --> 00:10:30,100 Ons het 'n paar etikette reeds. 226 00:10:30,100 --> 00:10:32,410 HTML, Hoof, titel, Body, is almal etikette, so te sê, 227 00:10:32,410 --> 00:10:34,280 met 'n oop en geslote eweknieë. 228 00:10:34,280 --> 00:10:36,530 Maar kennisgewing, hierdie is 'n soort van fundamenteel anders. 229 00:10:36,530 --> 00:10:39,140 Dit is wat ons sal noem in HTML 'n kenmerk. 230 00:10:39,140 --> 00:10:41,451 En 'n kenmerk is net 'n sleutel-waarde paar. 231 00:10:41,451 --> 00:10:43,950 Dit is 'n algemene ding in rekenaar science-- sleutel-waarde paar. 232 00:10:43,950 --> 00:10:45,770 Dit is soort van die instrument van die handel. 233 00:10:45,770 --> 00:10:47,040 'N Belangrike en 'n waarde. 234 00:10:47,040 --> 00:10:49,390 'N Woord en dan 'n paar ander woord of woorde. 235 00:10:49,390 --> 00:10:53,790 En in hierdie geval, die sleutel is href, en die waarde is wat vol URL. 236 00:10:53,790 --> 00:10:57,890 En wat 'n kenmerk doen, is dit beïnvloed die gedrag van 'n tag. 237 00:10:57,890 --> 00:11:01,010 En in hierdie geval, moet ons beïnvloed die gedrag van die anker tag, 238 00:11:01,010 --> 00:11:04,140 want ons moet anker hierdie skakel na iewers. 239 00:11:04,140 --> 00:11:06,960 En hoe jy dit doen is deur middel van die eienskap. 240 00:11:06,960 --> 00:11:08,970 >> So ek gaan om voort te gaan en nou stoor die lêer. 241 00:11:08,970 --> 00:11:11,300 Gaan terug na my leser en herlaai. 242 00:11:11,300 --> 00:11:14,580 En siedaar, ons het nou die begin van 'n wettige webblad. 243 00:11:14,580 --> 00:11:18,420 Super-eenvoudige, maar as ek hover oor this-- kennisgewing in die onderste linkerhoek, 244 00:11:18,420 --> 00:11:19,830 dit is super-klein. 245 00:11:19,830 --> 00:11:21,730 Maar jy doen sien www.disney.com. 246 00:11:21,730 --> 00:11:27,076 En as ek klik nie, wel hierdie gardes my trek na disney.com. 247 00:11:27,076 --> 00:11:29,380 Nou, die snaakse ding hier is dat dit nie 248 00:11:29,380 --> 00:11:33,940 die best-- die mees bemarkbare URL, maar dit is goed, want hierdie lêer nie doen 249 00:11:33,940 --> 00:11:35,360 bestaan ​​op die World Wide Web. 250 00:11:35,360 --> 00:11:39,740 Dit bestaan ​​as 'n plaaslike lêer in glo my Gebruikers directory-- / jharvard-- 251 00:11:39,740 --> 00:11:41,890 Want Johannes Harvard-- / lessenaar. 252 00:11:41,890 --> 00:11:42,634 Maar dit het 'n URL. 253 00:11:42,634 --> 00:11:43,800 Dit gebeur net plaaslike te wees. 254 00:11:43,800 --> 00:11:47,050 Ongelukkig kan niemand van julle te besoek hierdie, want as jy hierdie URL tik, 255 00:11:47,050 --> 00:11:49,980 jy word vertel die leser, kyk vir 'n lêer met die naam hello.html 256 00:11:49,980 --> 00:11:50,772 op jou hardeskyf. 257 00:11:50,772 --> 00:11:53,271 En, natuurlik, tensy jy het is met die hand volgende saam, 258 00:11:53,271 --> 00:11:54,530 dit gaan nie daar bestaan. 259 00:11:54,530 --> 00:11:55,190 >> So is dit goed. 260 00:11:55,190 --> 00:11:57,815 Ons moet nog 'n manier, uiteindelik, gebruik hierdie prent kry in die web, 261 00:11:57,815 --> 00:12:01,180 maar laat ons terg uitmekaar n paar implikasies sekuriteit van wat ons net 262 00:12:01,180 --> 00:12:04,850 sien en bind dit terug na die vorige bespreking van vanoggend. 263 00:12:04,850 --> 00:12:08,200 Dit blyk dat, indien 'n leser letterlik net doen 264 00:12:08,200 --> 00:12:12,560 wat Ek sê dit te doen, en dit lyk om die saak wat 'n anker tag is nie 265 00:12:12,560 --> 00:12:17,380 beïnvloed deur die waarde van hierdie kenmerk genaamd href 266 00:12:17,380 --> 00:12:20,810 maar dit gee hierdie teks, sou dit lyk 267 00:12:20,810 --> 00:12:26,520 om te impliseer dat ek die URL kon sit in beide plekke en dan herlaai 268 00:12:26,520 --> 00:12:29,100 en nou sien die URL en gaan na die URL. 269 00:12:29,100 --> 00:12:32,680 Let op, as ek hover oor die onderste linkerkantse, Ek is inderdaad nog gaan disney.com. 270 00:12:32,680 --> 00:12:38,340 >> So as jy ooit was phished-- P-H-ek-S-H-E-D-- 271 00:12:38,340 --> 00:12:42,820 met een van daardie valse e-pos uit soos PayPal jou bank, 272 00:12:42,820 --> 00:12:46,470 jy waarskynlik gekry skakels binne van die e-pos wat jy lees dat 273 00:12:46,470 --> 00:12:49,970 vertel jy kliek hier om te bevestig gaan jou wagwoord of bevestig jou geboortedatum 274 00:12:49,970 --> 00:12:53,840 of sosiale of iets sosiaal ingenieurswese jy openbaar 275 00:12:53,840 --> 00:12:54,920 inligting. 276 00:12:54,920 --> 00:12:57,625 Wel, ek kon soort neem voordeel van hierdie, kan ek nie? 277 00:12:57,625 --> 00:13:01,240 Ek kon iets sê soos, www.paypal.com. 278 00:13:01,240 --> 00:13:11,340 En in plaas van disney.com, ek kon gaan, soos, badguy.com. 279 00:13:11,340 --> 00:13:12,850 Reload. 280 00:13:12,850 --> 00:13:16,620 En hoe maklik is dit om die bos lei, veral 'n nie-tegniese leser 281 00:13:16,620 --> 00:13:20,649 of 'n vlugtig lees leser as om te klik 282 00:13:20,649 --> 00:13:23,940 'n skakel soos hierdie, wat as ek klik it-- Ek het eintlik nie wil badguy.com gaan. 283 00:13:23,940 --> 00:13:25,398 Ek weet nie wat is eintlik daar. 284 00:13:25,398 --> 00:13:30,080 So paypal.com, kennisgewing, is wat dit sê dit gaan, 285 00:13:30,080 --> 00:13:33,210 Maar natuurlik, as ek afkyk super-lae, dit is 'n bietjie vaag, 286 00:13:33,210 --> 00:13:34,230 maar dit sê badguy.com. 287 00:13:34,230 --> 00:13:38,644 Dit is die enigste vertel nou dat ek gaan die verkeerde plek. 288 00:13:38,644 --> 00:13:41,560 Toe ek vroeër gesê het dat banke moet regtig nie aan te moedig of te lei 289 00:13:41,560 --> 00:13:44,510 gebruikers in te klik links, hierdie is net een manifestasie daarvan. 290 00:13:44,510 --> 00:13:45,430 En dis so eenvoudig nie. 291 00:13:45,430 --> 00:13:48,120 Jy is nou 'n teenstander as jy so iets doen 292 00:13:48,120 --> 00:13:51,000 en probeer om 'n gebruiker te mislei in die besoek van jou webwerf. 293 00:13:51,000 --> 00:13:53,320 Maar vir nou, sal ons hou dinge mooi en skoon. 294 00:13:53,320 --> 00:13:55,640 Ons gaan om voort te gaan en rewind hierdie veranderinge. 295 00:13:55,640 --> 00:13:56,530 Herlaai die bladsy. 296 00:13:56,530 --> 00:13:57,740 En ek gaan terug na disney.com. 297 00:13:57,740 --> 00:14:00,660 >> Kom ons kyk of ons nie kan terg hierdie uitmekaar 'n bietjie meer. 298 00:14:00,660 --> 00:14:04,160 So "hallo, Disney World." 299 00:14:04,160 --> 00:14:05,950 Ek gaan hier af sê. 300 00:14:05,950 --> 00:14:08,220 Miskien gaan ek 'n paar plek te maak. 301 00:14:08,220 --> 00:14:12,730 "Ons hoop jy geniet jou verblyf!" 302 00:14:12,730 --> 00:14:13,830 Red. 303 00:14:13,830 --> 00:14:15,850 Reload. 304 00:14:15,850 --> 00:14:19,010 Dit is nie rea-- dis nie wat ek bedoel, reg? 305 00:14:19,010 --> 00:14:21,870 Ek bedoel, as ek die behandeling van my teks lêer soos 'n woordverwerker, 306 00:14:21,870 --> 00:14:24,894 Wat het jy hoop sal hier gebeur? 307 00:14:24,894 --> 00:14:27,060 Ja, ek voel asof daar moet 'n lynbreuk hier wees, 308 00:14:27,060 --> 00:14:28,799 sodat dit voel karretjie in een of ander manier. 309 00:14:28,799 --> 00:14:31,090 Maar dit is eintlik doelbewuste, want net soos voorheen, 310 00:14:31,090 --> 00:14:33,381 die leser word slegs gaan doen wat jy dit vertel om te doen. 311 00:14:33,381 --> 00:14:34,806 Ek het nie gesê dit om lyne te breek. 312 00:14:34,806 --> 00:14:37,930 Ek het nie gesê dit om af te beweeg, selfs al is, intuïtief, ek voel soos ek gedoen het. 313 00:14:37,930 --> 00:14:39,805 So dit blyk ons ​​nodig het 'n bietjie meer opmaak, 314 00:14:39,805 --> 00:14:41,390 en ek gaan dit op te los soos volg. 315 00:14:41,390 --> 00:14:46,160 Ek gaan dit eers voorwoord hallo met wat 'n lid tag genoem. 316 00:14:46,160 --> 00:14:48,920 En dan gaan ek voort te gaan en draai hierdie ander sin 317 00:14:48,920 --> 00:14:54,370 in 'n ander lid tag, selfs al hulle is super-kort paragrawe. 318 00:14:54,370 --> 00:14:55,930 Nou gaan ek om te spaar. 319 00:14:55,930 --> 00:14:57,160 Reload. 320 00:14:57,160 --> 00:14:59,070 En nou het ons dit ruimte, en ons soort 321 00:14:59,070 --> 00:15:01,680 het die semantiek van twee afsonderlike paragrawe. 322 00:15:01,680 --> 00:15:05,290 >> Dit is alles goed en wel, maar dit sou lekker wees om 'n beeld te voeg tot hierdie bladsy, 323 00:15:05,290 --> 00:15:08,710 so ek gaan om te gaan kyk vir Mickey Mouse op Google Images. 324 00:15:08,710 --> 00:15:12,830 En net vir die pret, ek is gaan hierdie beeld te gryp. 325 00:15:12,830 --> 00:15:15,350 Ek gaan nou voort te gaan en gryp die URL van die beeld, 326 00:15:15,350 --> 00:15:16,510 alhoewel daar verskillende maniere om dit te doen. 327 00:15:16,510 --> 00:15:18,520 Vir nou, is ek net gaan die URL kopieer. 328 00:15:18,520 --> 00:15:24,770 Ek gaan om terug te gaan na my teks lêer, en ek gaan hier sê, 329 00:15:24,770 --> 00:15:31,160 img src = quote unquote dat URL, super-lang. 330 00:15:31,160 --> 00:15:34,580 En dan is die idee van 'n Beeld is 'n bietjie anders. 331 00:15:34,580 --> 00:15:38,640 Daar is regtig geen idee van beginspan 'n beeld en eindig 'n beeld, 332 00:15:38,640 --> 00:15:40,630 soos 'n begin te merk 'n einde tag. 333 00:15:40,630 --> 00:15:43,840 Dit voel so 'n bietjie vreemd om my semanties om dit te doen, 334 00:15:43,840 --> 00:15:45,390 'n close-beeld tag het. 335 00:15:45,390 --> 00:15:46,780 Dit is nie korrek nie. 336 00:15:46,780 --> 00:15:48,840 Dit is perfek korrek, en dit is aangemoedig, 337 00:15:48,840 --> 00:15:50,870 maar daar is snelskrifnotasie. 338 00:15:50,870 --> 00:15:53,780 Ek kan soort gelyktydig oop en toe dieselfde tag, 339 00:15:53,780 --> 00:15:55,510 en dit sal die leser gelukkig te maak. 340 00:15:55,510 --> 00:15:56,950 So dit is net 'n bietjie meer bondige vir dinge 341 00:15:56,950 --> 00:15:59,408 wat konseptueel regtig nie sin maak om te begin en einde. 342 00:15:59,408 --> 00:16:01,190 Hulle is net daar, of hulle is nie. 343 00:16:01,190 --> 00:16:06,020 >> So ek gaan hierdie red en gaan terug om my "hallo, wêreld" bladsy en herlaai. 344 00:16:06,020 --> 00:16:09,880 En dit is 'n bietjie buite beheer, want dit beeld is eintlik 345 00:16:09,880 --> 00:16:12,210 'n bietjie groot, maar dit is OK. 346 00:16:12,210 --> 00:16:13,710 Ek kon dit verander in 'n program. 347 00:16:13,710 --> 00:16:14,900 Of jy weet wat. 348 00:16:14,900 --> 00:16:17,350 Net om te wys, is ek gaan eintlik sê 349 00:16:17,350 --> 00:16:21,760 dat die wydte van so iets slegs 200 pixels, 200 punte. 350 00:16:21,760 --> 00:16:24,360 Laat my gaan voort en red en herlaai, en nou die bladsy 351 00:16:24,360 --> 00:16:25,690 lyk 'n bietjie meer redelik is. 352 00:16:25,690 --> 00:16:27,260 Maar let op die patroon. 353 00:16:27,260 --> 00:16:30,030 Wel, ek het soort van onderrig julle almal van HTML in 'n sekere sin, ten minste 354 00:16:30,030 --> 00:16:33,531 konseptueel, want al HTML is is hierdie tags-- oop etikette, gesluit etikette, 355 00:16:33,531 --> 00:16:35,280 en eienskappe wat hul gedrag te verander. 356 00:16:35,280 --> 00:16:38,380 En, glo, elke tag kan nul of een het 357 00:16:38,380 --> 00:16:43,005 of twee of meer spesifieke eienskappe, elk van wat doen iets 'n bietjie anders. 358 00:16:43,005 --> 00:16:44,380 Nou, hoe weet jy wat bestaan? 359 00:16:44,380 --> 00:16:46,800 Jy luister net na iemand soos ek jou vertel wat bestaan, 360 00:16:46,800 --> 00:16:50,860 of jy net Google om vir 'n tutoriaal op HTML, en dit is werklik die eenvoudige. 361 00:16:50,860 --> 00:16:54,030 >> Voorwaar, toe ek 'n voorgraadse jaar gelede en geleer HTML, 362 00:16:54,030 --> 00:16:56,530 een van my wiskunde onderrig assistente net spandeer 363 00:16:56,530 --> 00:16:59,600 'n bietjie van die tyd tutor my vir soos 'n halfuur, 'n uur, 364 00:16:59,600 --> 00:17:00,660 en dan was ek op my pad. 365 00:17:00,660 --> 00:17:03,300 Ek was op pad na die maak die mees afskuwelike webtuistes ooit, 366 00:17:03,300 --> 00:17:05,549 wat blykbaar Ek het nie regtig bowe. 367 00:17:05,549 --> 00:17:09,849 Maar die punt is dat, sodra jy verstaan ​​hierdie eenvoudige ideas-- 368 00:17:09,849 --> 00:17:13,450 As arcane text-- maar hierdie eenvoudige idees van die begin van 'n gedagte 369 00:17:13,450 --> 00:17:15,960 en die sluiting van 'n gedagte, hou alles mooi gebalanseer, 370 00:17:15,960 --> 00:17:19,150 soek iets op, die wysiging van die gedrag van daardie etiket, dit is regtig al 371 00:17:19,150 --> 00:17:20,079 daar is om dit. 372 00:17:20,079 --> 00:17:28,140 En in werklikheid, as ons nou na iets soos eintlik google.com--, 373 00:17:28,140 --> 00:17:31,920 Kom ons gaan 'n plek 'n bietjie meer reasonable-- stanford.edu. 374 00:17:31,920 --> 00:17:37,800 En ek gaan om te gaan om te sien, Ontwikkelaars, Bron. 375 00:17:37,800 --> 00:17:41,400 Dit is lelik, maar notice-- en ek sal in kennis te vergroot 376 00:17:41,400 --> 00:17:43,432 'n paar dinge wat vertroud is reeds. 377 00:17:43,432 --> 00:17:45,140 Daar is hierdie hier, wat is 'n leser. 378 00:17:45,140 --> 00:17:46,800 Hier kom HTML5. 379 00:17:46,800 --> 00:17:47,634 Daar is HTML. 380 00:17:47,634 --> 00:17:49,550 Blykbaar is daar 'n skryf wat ek gedoen het nie 381 00:17:49,550 --> 00:17:51,540 gebruik wat spesifiseer die taal van die bladsy, 382 00:17:51,540 --> 00:17:54,380 en dit kan help met 'n outomatiese vertaling en dinge soos dat. 383 00:17:54,380 --> 00:17:55,546 Hier is die hoof van die bladsy. 384 00:17:55,546 --> 00:17:57,790 Hier is die titel van bladsy Stanford se. 385 00:17:57,790 --> 00:17:59,832 Daar is 'n tag ek nie gedoen praat oor yet-- Meta tag. 386 00:17:59,832 --> 00:18:01,540 Dis net soort agtergrond inligting. 387 00:18:01,540 --> 00:18:04,210 Dit help met SEO, of soekenjin optimalisering, 388 00:18:04,210 --> 00:18:06,320 of Google-resultate en dies meer. 389 00:18:06,320 --> 00:18:09,029 Maar as ons hou op soek, hou soek, hier is die Liggaam tag. 390 00:18:09,029 --> 00:18:11,570 En daar is trosse van ander Tags ons nog nie gepraat oor. 391 00:18:11,570 --> 00:18:13,750 Maar Div is een vir 'n afdeling van die bladsy. 392 00:18:13,750 --> 00:18:16,680 Dit is soos 'n onsigbare reghoek As jy soort wil geestelik 393 00:18:16,680 --> 00:18:20,160 verdeel jou bladsy in verskillende eenhede aanlyn. 394 00:18:20,160 --> 00:18:22,650 En dan baie divs ek sien, iets genaamd Klas, 395 00:18:22,650 --> 00:18:24,440 maar ons sal terug kom. 396 00:18:24,440 --> 00:18:26,200 >> Dit is interesting-- Vorms. 397 00:18:26,200 --> 00:18:27,730 Vorms is regoor die web. 398 00:18:27,730 --> 00:18:30,310 Enige soekkassie jy ooit gebruik is 'n vorm. 399 00:18:30,310 --> 00:18:31,490 En, wel, kom ons eintlik sien. 400 00:18:31,490 --> 00:18:32,790 Vorm. 401 00:18:32,790 --> 00:18:33,910 Aksie. 402 00:18:33,910 --> 00:18:37,660 Die optrede van hierdie vorm, om watter historiese redes, is dat URL. 403 00:18:37,660 --> 00:18:38,840 Metode is "post." 404 00:18:38,840 --> 00:18:44,060 Blyk dat HTTP-versoek kan gebruik die werkwoord "kry," soos ons voor gesien, 405 00:18:44,060 --> 00:18:45,070 of "post." 406 00:18:45,070 --> 00:18:47,030 En sal 'n verskil te sien van hierdie in 'n oomblik. 407 00:18:47,030 --> 00:18:48,363 Kom ons eintlik sien wat dit is. 408 00:18:48,363 --> 00:18:49,830 Laat my terug na bladsy Stanford gaan. 409 00:18:49,830 --> 00:18:53,330 Wat vorm hulle praat oor, dink jy? 410 00:18:53,330 --> 00:18:54,485 Wat spring uit by jou? 411 00:18:54,485 --> 00:18:54,970 >> Publiek: soekkassie. 412 00:18:54,970 --> 00:18:55,845 >> David J. MALAN: Ja. 413 00:18:55,845 --> 00:18:58,410 So het bo aan die regterkant hier is dit soekkassie. 414 00:18:58,410 --> 00:19:02,441 En dit is hoe hulle geïmplementeer it-- n tag dit is letterlik oop bracket vorm. 415 00:19:02,441 --> 00:19:03,940 En dan kom ons soek vir iets. 416 00:19:03,940 --> 00:19:09,220 Kom ons soek vir 'n buddy van mine-- "Nick Parlante." 417 00:19:09,220 --> 00:19:11,380 Tik. 418 00:19:11,380 --> 00:19:13,750 En natuurlik, dit gaan 'n effens ander URL. 419 00:19:13,750 --> 00:19:15,140 Laat my terug hier gaan. 420 00:19:15,140 --> 00:19:18,960 Kom ons soek vir "kursusse." 421 00:19:18,960 --> 00:19:19,460 Vervloek dit. 422 00:19:19,460 --> 00:19:20,484 Het na 'n ander URL. 423 00:19:20,484 --> 00:19:23,400 So, Stanford se toevoeging van 'n paar magic sodat hulle my geen jy neem om die URL 424 00:19:23,400 --> 00:19:25,820 wat ons gesien het in die optrede kenmerk daar. 425 00:19:25,820 --> 00:19:32,480 Maar hierdie vorm hier is suiwer geïmplementeer deur middel van hierdie opmaak hier, hierdie tags. 426 00:19:32,480 --> 00:19:35,710 Trouens, hier is die insette vir die tipe soek wat jy wil. 427 00:19:35,710 --> 00:19:38,940 Hier is die insette vir 'n ander soort soek. 428 00:19:38,940 --> 00:19:41,960 Hier is die insette vir die string self. 429 00:19:41,960 --> 00:19:45,394 En so het die doel is nie om te draai ons gedagtes rondom al hierdie etikette 430 00:19:45,394 --> 00:19:46,060 maar net om te sien. 431 00:19:46,060 --> 00:19:48,300 Dit is net die opening van en die sluiting van etikette en soek dinge op. 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 >> Gehoor: [onhoorbaar] 435 00:19:49,795 --> 00:19:51,925 436 00:19:51,925 --> 00:19:53,550 David J. MALAN: Dis 'n goeie vraag. 437 00:19:53,550 --> 00:19:54,660 Dit is 'n bietjie moeiliker om te sien. 438 00:19:54,660 --> 00:19:56,300 Laat my terug te kom na wat vraag in 'n paar minute 439 00:19:56,300 --> 00:19:59,000 wanneer ons kyk na iets genoem CSS, of Cascading Style Sheets, 440 00:19:59,000 --> 00:20:02,500 en ons kan probeer om af te lei soveel van die bladsy. 441 00:20:02,500 --> 00:20:08,090 So as ons nou 'n blik op google.com, Kom ons kyk wat hul page lyk. 442 00:20:08,090 --> 00:20:09,840 Jy sal they're-- dis oulik vandag. 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 Alles klaar. 446 00:20:13,690 --> 00:20:15,260 Goed, so Bron. 447 00:20:15,260 --> 00:20:19,590 Mens sou dink Google het baie mooi bronkode. 448 00:20:19,590 --> 00:20:24,970 So, glo, wat hier aan die gang? 449 00:20:24,970 --> 00:20:27,880 En in werklikheid, dit is nie eens HTML. 450 00:20:27,880 --> 00:20:30,930 Dit is iets JavaScript genoem. 451 00:20:30,930 --> 00:20:32,344 En laat ons die gang te hou en gaan. 452 00:20:32,344 --> 00:20:34,010 Ek weet nie eens waar die bladsy begin. 453 00:20:34,010 --> 00:20:37,240 Ek gaan Command gebruik Vrou, oop bracket HTML. 454 00:20:37,240 --> 00:20:38,200 Goed, daar is dit. 455 00:20:38,200 --> 00:20:44,150 Ek het gevind dat die begin van die bladsy, en daar is so baie dinge in hier. 456 00:20:44,150 --> 00:20:45,310 >> Wat is eintlik aan die gang? 457 00:20:45,310 --> 00:20:47,460 Wel, jy weet wat, kan ons hierdie skoon te maak. 458 00:20:47,460 --> 00:20:52,109 As ek in plaas gaan na hierdie Inspekteer nutsbalk, hierdie spesiale diagnostiese hulpmiddel, 459 00:20:52,109 --> 00:20:54,150 en gaan nie om te netwerk, waar ons hou gaan vandag, 460 00:20:54,150 --> 00:20:56,420 maar as ek gaan na elemente, wat is regtig nice 461 00:20:56,420 --> 00:20:59,990 is dat 'n leser het 'n baie baie beter oë as ek. 462 00:20:59,990 --> 00:21:02,670 En die leser kan lees wat gemors van 'n webblad, 463 00:21:02,670 --> 00:21:04,700 dat HTML-pos ons net kyk na, en dit kan 464 00:21:04,700 --> 00:21:08,340 ontleed dit of gelees en ontleed en te formatteer dit 465 00:21:08,340 --> 00:21:09,910 in 'n mooi mens-vriendelike manier. 466 00:21:09,910 --> 00:21:11,740 So, wat ek nou sien in hierdie skerm hier 467 00:21:11,740 --> 00:21:15,470 onder elemente, presies dieselfde inhoud, maar hulle het alles ingekeep, 468 00:21:15,470 --> 00:21:18,140 hulle het dit gekleurde, maar dis presies dieselfde teks 469 00:21:18,140 --> 00:21:19,620 dat ek van die bediener afgelaai. 470 00:21:19,620 --> 00:21:23,630 >> En wat is nou mooi is ek kan sien in die liggaam, vir instance-- kennisgewing, 471 00:21:23,630 --> 00:21:26,480 die bladsy nog bestaan van net 'n kop en 'n liggaam, 472 00:21:26,480 --> 00:21:28,660 en ek kan hierargies duik in hier. 473 00:21:28,660 --> 00:21:32,420 Let daarop dat Google blyk te hê om hierdie een en hierdie een divs--. 474 00:21:32,420 --> 00:21:33,310 Ek kan uit te brei nie. 475 00:21:33,310 --> 00:21:35,370 Daar is 'n hele klomp van die ander divs. 476 00:21:35,370 --> 00:21:36,900 Dit is dus 'n bietjie kompleks. 477 00:21:36,900 --> 00:21:37,400 Maar wag. 478 00:21:37,400 --> 00:21:40,970 Dit lyk soveel meer leesbare, relatief, as dit nie. 479 00:21:40,970 --> 00:21:43,840 Hoekom is Google verleentheid self deur net die stuur 480 00:21:43,840 --> 00:21:50,400 hierdie groot gemors van die kode van 'n paar sorteer net om iets te implementeer 481 00:21:50,400 --> 00:21:53,640 wat lyk so eenvoudig met die eerste oogopslag? 482 00:21:53,640 --> 00:21:55,270 Soos, hoekom nie hulle meer ruimte te voeg? 483 00:21:55,270 --> 00:21:56,811 Hoekom het hulle nie druk Enter soos ek gedoen het? 484 00:21:56,811 --> 00:21:59,110 Kyk hoe goed ek was by die skryf van 'n webblad. 485 00:21:59,110 --> 00:22:00,680 Ek druk Enter so ywerig. 486 00:22:00,680 --> 00:22:03,760 Ek ingekeep so alles is so mooi en leesbaar. 487 00:22:03,760 --> 00:22:08,463 Waarom Google nie dieselfde oefen? 488 00:22:08,463 --> 00:22:11,409 >> Gehoor: [onhoorbaar] 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 Baie mooi. 492 00:22:14,270 --> 00:22:16,650 Hulle het nie 'n paar het persoon op Google met die hand 493 00:22:16,650 --> 00:22:18,160 opdatering van die tuisblad meer. 494 00:22:18,160 --> 00:22:20,010 Dit is nie 1999 nie. 495 00:22:20,010 --> 00:22:21,140 So het hulle sagteware. 496 00:22:21,140 --> 00:22:25,397 Hulle het ander instrumente wat genereer dinamiese hulle HTML. 497 00:22:25,397 --> 00:22:27,480 Natuurlik, dat kode self is geskryf deur die mens, 498 00:22:27,480 --> 00:22:30,220 maar die werklikheid is, dit is nogal redelik om te sê, 499 00:22:30,220 --> 00:22:33,340 die leser nie seker nie om hoe slordig die kode is. 500 00:22:33,340 --> 00:22:35,940 Maar daar is 'n selfs meer dwingende tegniese rede 501 00:22:35,940 --> 00:22:42,580 dat Google versprei hul HTML kode sodanig slordige, skynbaar 502 00:22:42,580 --> 00:22:48,350 oorweldigende manier almal saam verpak met baie min way-- baie min 503 00:22:48,350 --> 00:22:51,274 in die middel van opmaak soos wat ek gedoen het. 504 00:22:51,274 --> 00:22:52,570 >> Gehoor: [onhoorbaar] 505 00:22:52,570 --> 00:22:53,528 >> David J. MALAN: Faster? 506 00:22:53,528 --> 00:22:54,040 Hoekom? 507 00:22:54,040 --> 00:22:55,680 En wat het jy gesê, Lydia? 508 00:22:55,680 --> 00:22:56,240 Vinniger? 509 00:22:56,240 --> 00:22:57,281 Hoekom vinniger? 510 00:22:57,281 --> 00:22:58,156 Gehoor: [onhoorbaar] 511 00:22:58,156 --> 00:23:00,522 512 00:23:00,522 --> 00:23:02,230 David J. MALAN: Daar is geen ruimte om te lees. 513 00:23:02,230 --> 00:23:02,730 Ja. 514 00:23:02,730 --> 00:23:04,560 So dink oor wat 'n ruimte is. 515 00:23:04,560 --> 00:23:08,394 So elke karakter op die sleutelbord neem 'n bedrag van ruimte te verteenwoordig, 516 00:23:08,394 --> 00:23:10,560 hetsy fisies, soos dit neem dat daar nog baie ruimte, 517 00:23:10,560 --> 00:23:13,250 of een of ander manier onder die kap, wat geheue benodig. 518 00:23:13,250 --> 00:23:15,740 En as 'n aside-- en ons sal praat meer oor hierdie tomorrow-- 519 00:23:15,740 --> 00:23:19,930 elke karakter op die sleutelbord vereis tipies 8 stukkies, of een byte. 520 00:23:19,930 --> 00:23:23,360 So 'n patroon van 8 nulle of kinders, of net 1 byte, soos ons 521 00:23:23,360 --> 00:23:24,720 mens sou tipies sê. 522 00:23:24,720 --> 00:23:27,690 So dit is klein, maar dit is nog steeds nie-nul. 523 00:23:27,690 --> 00:23:29,940 Dit is nog 'n paar bedrag van die ruimte. 524 00:23:29,940 --> 00:23:36,082 So as 'n ingenieur of Google treffers die spasie balk net een keer, en veronderstel 525 00:23:36,082 --> 00:23:38,540 Google-- dis super-popular-- veronderstel dat 'n miljard mense 526 00:23:38,540 --> 00:23:40,780 besoek hul tuisblad per dag, of 'n aantal mense 527 00:23:40,780 --> 00:23:43,290 Besoek die tuisblad 'n miljard keer per dag, 528 00:23:43,290 --> 00:23:48,890 hoeveel bykomende grepe het dat sagteware-ingenieur net kos Google 529 00:23:48,890 --> 00:23:51,310 deur slaan sy of haar space bar keer? 530 00:23:51,310 --> 00:23:52,692 >> Gehoor: [onhoorbaar] 531 00:23:52,692 --> 00:23:54,150 David J. MALAN: Nie heeltemal so sleg nie. 532 00:23:54,150 --> 00:23:57,070 Net een byte keer per miljard. 533 00:23:57,070 --> 00:23:57,871 so a-- 534 00:23:57,871 --> 00:23:59,120 Publiek: 8000000000 GB. 535 00:23:59,120 --> 00:24:00,370 David J. MALAN: Nie 8000000000. 536 00:24:00,370 --> 00:24:01,240 8 miljard grepe. 537 00:24:01,240 --> 00:24:02,410 Maar 1 GB. 538 00:24:02,410 --> 00:24:04,080 1 GB sou die eenheid van meet wees. 539 00:24:04,080 --> 00:24:08,240 As hy of sy doen twee ruimtes, 2 GB. 540 00:24:08,240 --> 00:24:09,030 Drie GB. 541 00:24:09,030 --> 00:24:09,530 Reg? 542 00:24:09,530 --> 00:24:11,860 Dit skale duur. 543 00:24:11,860 --> 00:24:16,150 En so in gevalle soos Google, wat toegestaan ​​word, is uiterste gevalle, 544 00:24:16,150 --> 00:24:21,450 Daar is ander kwessies wat net ontstaan deur baie billike besluite 545 00:24:21,450 --> 00:24:25,744 of neem baie eenvoudige menslike optrede, want dit het daardie vergroting van krag. 546 00:24:25,744 --> 00:24:27,660 So een van die redes dit lyk so saamgeperste 547 00:24:27,660 --> 00:24:30,660 is presies soos Victoria said-- dit was net wat deur rekenaars in elk geval. 548 00:24:30,660 --> 00:24:31,900 So geen big deal. 549 00:24:31,900 --> 00:24:33,309 Laat die leser dit uitwerk. 550 00:24:33,309 --> 00:24:35,350 Maar dit het ook doelbewus nie veel ruimte het, 551 00:24:35,350 --> 00:24:36,766 omdat die ruimte is nie nodig nie. 552 00:24:36,766 --> 00:24:38,250 En die ruimte kos eintlik geld. 553 00:24:38,250 --> 00:24:40,670 >> Dit óf kos tyd, want net te druk 554 00:24:40,670 --> 00:24:44,670 dat daar nog baie meer data uit google.com se hoofkwartier net 555 00:24:44,670 --> 00:24:47,710 het 'n paar bedrag van te neem tyd, selfs al is dit millisekondes 556 00:24:47,710 --> 00:24:51,190 of mikrosekondes, maar dit dra by tot oor so baie gebruikers, of meer waarskynlik, 557 00:24:51,190 --> 00:24:52,270 dit waarskynlik kos geld. 558 00:24:52,270 --> 00:24:54,690 Google waarskynlik verbind tot iemand anders in die wêreld, een 559 00:24:54,690 --> 00:24:56,398 van diegene loer punte, en as hulle 560 00:24:56,398 --> 00:24:59,880 'n soort van finansiële verhouding waardeur hul data kos geld, 561 00:24:59,880 --> 00:25:01,730 hulle kan net so goed verminder hoeveel data 562 00:25:01,730 --> 00:25:04,530 hulle spoeg uit op hul internet verbinding. 563 00:25:04,530 --> 00:25:07,630 >> So het die snaakse ding, al is, uiteindelik, of dalk die gerusstellende ding, 564 00:25:07,630 --> 00:25:11,030 is dat selfs al is dit lyk vreeslik oorweldigend, aan die einde van die dag, 565 00:25:11,030 --> 00:25:16,750 dit is nog steeds presies dieselfde beginsels as hierdie baie eenvoudige bladsy hier van 'n HTML 566 00:25:16,750 --> 00:25:17,390 bladsy. 567 00:25:17,390 --> 00:25:20,610 Dus net om op te som en sodat jy 'n kanonieke weergawe as jy nie was 568 00:25:20,610 --> 00:25:25,900 volgende saam uit eie keuse hier, hier dalk die eenvoudigste van webblaaie, 569 00:25:25,900 --> 00:25:28,240 so iets om mee te speel dalk later. 570 00:25:28,240 --> 00:25:30,790 >> Wel, laat ons voer 'n paar ander idees nou. 571 00:25:30,790 --> 00:25:33,420 Ons is op die punt om in te voer iets genaamd 'n styl tag. 572 00:25:33,420 --> 00:25:38,110 Ons kan hierdie bladsy stileer in meer interessante maniere. 573 00:25:38,110 --> 00:25:40,860 So terwyl HTML e-pos is alles oor die merk op 574 00:25:40,860 --> 00:25:44,470 die data, soort spesifiseer om 'n leser hoe om die datastruktuur, 575 00:25:44,470 --> 00:25:48,110 waar om dit gestel het, CSS, of Cascading Style Sheets, 576 00:25:48,110 --> 00:25:52,640 is 'n tweede taal wat oor die algemeen kry commingled met HTML 577 00:25:52,640 --> 00:25:55,670 soos ons sal see-- maar ons kan skoon wat in 'n moment-- wat neem 578 00:25:55,670 --> 00:25:59,850 dit die finale myl, en dit stylizes dit. 579 00:25:59,850 --> 00:26:02,460 Dit raak die kleure net reg, die skif groottes net reg, 580 00:26:02,460 --> 00:26:03,860 die plasing net reg. 581 00:26:03,860 --> 00:26:06,510 Dit gaan alles oor die estetika of opmaak, nie oor 582 00:26:06,510 --> 00:26:08,330 die fundamentele data self. 583 00:26:08,330 --> 00:26:11,390 En die maklikste manier om te wys dit is dalk deur 'n voorbeeld. 584 00:26:11,390 --> 00:26:15,320 So ek gaan om te gaan oor om my eenvoudige teks lêer. 585 00:26:15,320 --> 00:26:17,970 En in 'n oomblik, sal ek loop ons deur die proses 586 00:26:17,970 --> 00:26:19,360 om dit te doen onsself. 587 00:26:19,360 --> 00:26:23,310 >> Ek gaan terug na my lêer hier en herlaai die bladsy net 588 00:26:23,310 --> 00:26:25,800 om te bevestig hoe dit lyk. 589 00:26:25,800 --> 00:26:27,190 Dit is waar ons is op die oomblik. 590 00:26:27,190 --> 00:26:31,170 Ek voel soos kinders sal geniet met 'n bietjie kleur aan hierdie web bladsy. 591 00:26:31,170 --> 00:26:34,480 So ek gaan hier gaan in die kop van die bladsy. 592 00:26:34,480 --> 00:26:38,130 En ek gaan styl, / styl doen. 593 00:26:38,130 --> 00:26:44,060 En dan binnekant van hierdie, ek gaan om die liggaam van my page-- vertel 594 00:26:44,060 --> 00:26:46,870 en dit opmaak is, by Met die eerste oogopslag, miskien 'n bietjie 595 00:26:46,870 --> 00:26:49,400 vreemd, maar konvensionele. 596 00:26:49,400 --> 00:26:55,010 Ek gaan om te sê dat die agtergrond kleur van hierdie bladsy moet groen wees. 597 00:26:55,010 --> 00:26:57,960 En dit is ongelukkig soort nie die beste ontwerp. 598 00:26:57,960 --> 00:27:00,710 Let daarop dat voorheen in die wêreld van HTML, 599 00:27:00,710 --> 00:27:03,190 Ek het gesê dat eienskappe is hierdie sleutel-waarde pare. 600 00:27:03,190 --> 00:27:05,760 Iets gelyk kwotasie unquote "iets." 601 00:27:05,760 --> 00:27:08,810 In die wêreld van CSS, wat was ontwerp deur sommige ander mense, 602 00:27:08,810 --> 00:27:11,020 Hulle het besluit dat, in hul wêreld, sleutel-waarde pare 603 00:27:11,020 --> 00:27:13,920 sou woord kolon iets wees. 604 00:27:13,920 --> 00:27:15,220 Dit is dus dieselfde idee, al is. 605 00:27:15,220 --> 00:27:18,620 Dit assosieer 'n waarde met 'n paar sleutel wat een of ander manier 606 00:27:18,620 --> 00:27:20,330 beïnvloed die gedrag van hierdie bladsy. 607 00:27:20,330 --> 00:27:21,901 >> En jy kan seker raai. 608 00:27:21,901 --> 00:27:24,150 Wat is dit waarskynlik gaan om te doen, selfs as jy nog nooit 609 00:27:24,150 --> 00:27:27,867 gesien HTML of CSS voor? 610 00:27:27,867 --> 00:27:29,450 Publiek: Verander die agtergrond. 611 00:27:29,450 --> 00:27:30,560 David J. MALAN: Ja, verander die agtergrond. 612 00:27:30,560 --> 00:27:33,280 En spesifiek die agtergrond van die liggaam. 613 00:27:33,280 --> 00:27:36,290 Maar sover die liggaam vir nou is die web 614 00:27:36,290 --> 00:27:38,870 page-- dis die enigste ding onder die titel bar really-- 615 00:27:38,870 --> 00:27:40,870 dit is waarskynlik gaan om beïnvloed dieselfde ding. 616 00:27:40,870 --> 00:27:41,430 So laat ons sien. 617 00:27:41,430 --> 00:27:42,490 Kom ons hierdie red. 618 00:27:42,490 --> 00:27:44,310 Gaan hier en herlaai. 619 00:27:44,310 --> 00:27:46,140 Dit is redelik afskuwelike. 620 00:27:46,140 --> 00:27:48,070 En wat gaan aan hier is 'n newe-effek. 621 00:27:48,070 --> 00:27:49,850 Ek het net het hierdie beeld lukraak. 622 00:27:49,850 --> 00:27:53,305 Hoekom is die groen nie deurdringende agter Mickey? 623 00:27:53,305 --> 00:27:54,180 Gehoor: [onhoorbaar] 624 00:27:54,180 --> 00:27:56,880 625 00:27:56,880 --> 00:27:57,880 David J. MALAN: Presies. 626 00:27:57,880 --> 00:28:01,750 Dit blyk dat beelde, mooi veel al die foto's wat ons kan gebruik, 627 00:28:01,750 --> 00:28:03,670 is almal rectangles-- van reghoeke. 628 00:28:03,670 --> 00:28:07,710 Selfs as Mickey het 'n paar draaie om homself en het 'n agtergrond, 629 00:28:07,710 --> 00:28:09,330 dié agtergrond het om iets te wees. 630 00:28:09,330 --> 00:28:10,280 Dit het wit te wees. 631 00:28:10,280 --> 00:28:11,910 Dit het swart of iets anders te wees. 632 00:28:11,910 --> 00:28:13,650 Dit kan deursigtig wees. 633 00:28:13,650 --> 00:28:16,100 En in werklikheid, ek kon oop Mickey Mouse hier 634 00:28:16,100 --> 00:28:18,590 in 'n program met die naam Photoshop of iets soortgelyks 635 00:28:18,590 --> 00:28:21,176 en verander dit alles wit agtergrond deursigtig, 636 00:28:21,176 --> 00:28:22,550 sodat die groen sou skyn deur. 637 00:28:22,550 --> 00:28:25,980 Maar dit is iets wat ek nodig sou wees vra myself of 'n grafiese kunstenaar 638 00:28:25,980 --> 00:28:28,130 of 'n ontwerper by my maatskappy, byvoorbeeld, 639 00:28:28,130 --> 00:28:31,490 om te doen, veral omdat ek net geleen hierdie een van die internet. 640 00:28:31,490 --> 00:28:33,030 Maar dit is hoekom dit gebeur. 641 00:28:33,030 --> 00:28:34,980 >> So wat anders kan ons wil doen? 642 00:28:34,980 --> 00:28:41,040 Wel, ons wil dalk ons ​​sê regtig hoop jy geniet jou verblyf. 643 00:28:41,040 --> 00:28:44,150 En vir klem, ek wil om hierdie sterk maak, 644 00:28:44,150 --> 00:28:48,310 en so sal ek sê oop sterk en sluit sterk en dan herlaai. 645 00:28:48,310 --> 00:28:50,320 En dit is 'n bietjie moeilik om te sien op die projektor 646 00:28:50,320 --> 00:28:53,250 maar miskien regtig nou spring uit by jou 'n bietjie meer. 647 00:28:53,250 --> 00:28:56,180 So jy kan kursief voeg in hierdie manier, vet gesig staar op hierdie manier. 648 00:28:56,180 --> 00:28:57,500 Ons kan die kleure verander. 649 00:28:57,500 --> 00:29:01,610 Trouens, net vir skoppe, is ek gaan om voort te gaan en dit te doen. 650 00:29:01,610 --> 00:29:05,120 Ek het nie regtig soos hoe my paragrawe is dit naby aan mekaar, 651 00:29:05,120 --> 00:29:06,870 sodat ek iets soos dit te doen. 652 00:29:06,870 --> 00:29:13,310 Ek gaan die leser vertel, verander elke paragraaf tag om te hê, 653 00:29:13,310 --> 00:29:16,952 Kom ons say-- eintlik, jy weet wat, Kom ons in lyn te bring dit text-align, sentrum. 654 00:29:16,952 --> 00:29:19,410 En weer, ek weet dit net omdat iemand geleer dit vir my 655 00:29:19,410 --> 00:29:21,118 of ek gelyk het dit opgerig in 'n aanlyn verwysing. 656 00:29:21,118 --> 00:29:22,450 So laat ek dit red. 657 00:29:22,450 --> 00:29:25,070 En gesê: Ag, nou het ek gesentreerde die beeld daar. 658 00:29:25,070 --> 00:29:28,490 En eintlik, jy weet wat, indien Ek beweeg my beeld in 'n paragraaf 659 00:29:28,490 --> 00:29:34,510 tag-- so 'n derde paragraaf, selfs al is dit nie die teks. 660 00:29:34,510 --> 00:29:36,917 Kom ons red en herlaai. 661 00:29:36,917 --> 00:29:40,000 Nou die bladsy begin soort kyk of-- Ek bedoel, dit is nog redelik lelik, 662 00:29:40,000 --> 00:29:43,180 maar ten minste dit lyk asof ek spandeer twee minute in plaas van een minuut 663 00:29:43,180 --> 00:29:43,950 maak dit. 664 00:29:43,950 --> 00:29:47,200 >> En so, inkrementeel, kan ons hierdie estetiese veranderinge nou na die bladsy? 665 00:29:47,200 --> 00:29:50,860 Ek het nie regtig verander die data in die bladsy behalwe die toevoeging van die woord werklik. 666 00:29:50,860 --> 00:29:52,650 Ek het metadata bygevoeg, as jy wil. 667 00:29:52,650 --> 00:29:54,830 Hey, die leser, maak die woord "regtig" vet. 668 00:29:54,830 --> 00:29:56,940 Maar die data is nie sterk. 669 00:29:56,940 --> 00:29:57,830 Dis metadata. 670 00:29:57,830 --> 00:29:59,410 Die data is "regtig." 671 00:29:59,410 --> 00:30:02,200 Dus het ons nog 'n paar van dieselfde konsepte soos voorheen. 672 00:30:02,200 --> 00:30:05,990 Nou, natuurlik, dit is nie op die web, so ek gaan 'n laaste stap hier doen. 673 00:30:05,990 --> 00:30:10,300 >> Ek gaan om te gaan na hello.html en net na vore te bring en 'n afskrif van hierdie. 674 00:30:10,300 --> 00:30:12,285 En nou gaan ek gaan in Cloud9, wat 675 00:30:12,285 --> 00:30:13,910 Ek sal loop jy deur in net 'n oomblik. 676 00:30:13,910 --> 00:30:17,080 En die kans is jy sal gou wees, indien nie reeds op 'n skerm soos hierdie. 677 00:30:17,080 --> 00:30:21,080 En laat my net gee jou 'n vinnige toer wat Cloud9 eintlik is. 678 00:30:21,080 --> 00:30:26,590 So weer wolk 9 is hierdie wolk-gebaseerde diens 679 00:30:26,590 --> 00:30:30,580 wat gee jou en my die illusie van ons eie virtuele masjien 680 00:30:30,580 --> 00:30:33,090 in die wolk, tegnies 'n houer in die wolk, 681 00:30:33,090 --> 00:30:35,160 dat ons volle administratiewe voorregte. 682 00:30:35,160 --> 00:30:37,130 So in teorie, niemand anders in die wêreld het 683 00:30:37,130 --> 00:30:39,152 toegang tot die skerm Ek is kyk na nou, 684 00:30:39,152 --> 00:30:40,860 behalwe miskien die mense wat loop die webwerf, 685 00:30:40,860 --> 00:30:43,470 want tegnies het hulle fisiese toegang en dies meer. 686 00:30:43,470 --> 00:30:44,740 >> So wat sien ons in hierdie omgewing? 687 00:30:44,740 --> 00:30:46,230 Ek gaan om te vergroot, want dit is 'n bietjie klein. 688 00:30:46,230 --> 00:30:48,104 En laat my wys oor hier vir net 'n oomblik. 689 00:30:48,104 --> 00:30:53,210 Op die linkerkant van my en jou skerm, daar is 'n lêer leser aan die linkerkant. 690 00:30:53,210 --> 00:30:55,362 So soortgelyke in gees Mac OS en Windows. 691 00:30:55,362 --> 00:30:57,070 Dit is al die lêers in my rekening. 692 00:30:57,070 --> 00:30:59,250 En by verstek, as jou rekening is soos myne, 693 00:30:59,250 --> 00:31:05,090 jy sal sien of gou te sien helloworld.html en readme.md. 694 00:31:05,090 --> 00:31:07,950 Hier aan die regterkant, dit is waar my tekslêers gaan om te gaan. 695 00:31:07,950 --> 00:31:11,620 As jy al ooit gebruik Microsoft Word of Notepad of Text Editor, 696 00:31:11,620 --> 00:31:14,100 dit is die woord van my redigering van lêers gaan om te gaan. 697 00:31:14,100 --> 00:31:16,540 En dan is die mees arcane kenmerk van hierdie omgewing 698 00:31:16,540 --> 00:31:20,100 dat ons sal nie regtig nodig het om te gebruik is af hier bekend as 'n terminale venster. 699 00:31:20,100 --> 00:31:23,390 As jy gebruik DOS uit weleer, dit is die Linux 700 00:31:23,390 --> 00:31:25,450 of die Linux ekwivalent van DOS. 701 00:31:25,450 --> 00:31:28,190 Dit is 'n teks-gebaseerde interface-- geen muis klik, geen sleep. 702 00:31:28,190 --> 00:31:30,770 Al wat jy kan doen is tik opdragte, maar die instruksies 703 00:31:30,770 --> 00:31:34,400 kan lêers te skep, beweeg lêers, oop dopgehou, naby dopgehou, 704 00:31:34,400 --> 00:31:35,740 doen 'n aantal dinge. 705 00:31:35,740 --> 00:31:38,060 Maar vir nou, sal ons net spandeer ons tyd hier. 706 00:31:38,060 --> 00:31:39,050 >> En so laat ons dit doen. 707 00:31:39,050 --> 00:31:41,008 As jy in hierdie omgewing, wat jy moet 708 00:31:41,008 --> 00:31:45,900 wees as jy 'n werkplek geskep reeds, gaan voort en net optrek 709 00:31:45,900 --> 00:31:48,690 na File, New vir 'n oomblik. 710 00:31:48,690 --> 00:31:51,740 En dit sal julle 'n nuwe gee blad hier in die middel. 711 00:31:51,740 --> 00:31:54,250 En ek just-- en laat ons gaan voort en doen dit. 712 00:31:54,250 --> 00:31:59,910 Kom ons gaan voort en nou weet File, Save en gaan voort en noem dit hello.html, 713 00:31:59,910 --> 00:32:02,740 moet nie verwar word met helloworld.html, wat 714 00:32:02,740 --> 00:32:06,910 kom met jou nuwe gratis rekening, wat net 'n voorbeeld lêer. 715 00:32:06,910 --> 00:32:11,020 Jy sal sien dit skielik verskyn, waarskynlik op die linkerkant, 716 00:32:11,020 --> 00:32:12,810 en die blad sal steeds oop. 717 00:32:12,810 --> 00:32:21,300 En laat ek jou nou aanmoedig om te herskep hierdie lêer of 'n variante daarvan. 718 00:32:21,300 --> 00:32:24,607 En as jy kan nie heeltemal sien dit op die skerm, dit is identies aan die skyfies 719 00:32:24,607 --> 00:32:26,190 dat jy waarskynlik in 'n ander blad. 720 00:32:26,190 --> 00:32:29,296 >> So in kort, maak jou eerste webblad, stoor dit, en dan in 'n oomblik, 721 00:32:29,296 --> 00:32:31,170 Ek sal jou wys hoe jy kan dit werklik sien. 722 00:32:31,170 --> 00:32:32,970 Maar verander ten minste een ding. 723 00:32:32,970 --> 00:32:35,400 Verander Hello World aan iets van jou eie keuse, 724 00:32:35,400 --> 00:32:39,821 sodat jy oortuig is dat dit jou lêer en nie die een wat ek nou net gemaak het. 725 00:32:39,821 --> 00:32:40,320 Alles reg. 726 00:32:40,320 --> 00:32:43,804 En wanneer jy ready-- geen rush-- wanneer jy klaar is, 727 00:32:43,804 --> 00:32:46,220 gaan voort en stoor die lêer Sodra jy hierdie veranderinge gemaak het. 728 00:32:46,220 --> 00:32:49,540 En as jy die klik Begin knoppie op die top van hierdie 729 00:32:49,540 --> 00:32:53,610 moet 'n nuwe blad wat sal vertel oopmaak jy wat URL wat jy kan jou lêer te besoek by, 730 00:32:53,610 --> 00:32:56,380 maar dit kan 'n oomblik te neem kwotasie unquote "begin Apache," wat 731 00:32:56,380 --> 00:32:58,820 is die naam van die web bediener. 732 00:32:58,820 --> 00:33:02,430 So wees versigtig om presies te doen Wat is in die lêer uiteindelik. 733 00:33:02,430 --> 00:33:04,610 So nou, sal ek in zoom. 734 00:33:04,610 --> 00:33:07,780 As ek begin tik oop-bracket HTML, kennisgewing 735 00:33:07,780 --> 00:33:09,650 dit waarna ek my denke te voltooi. 736 00:33:09,650 --> 00:33:13,750 En as ek klaar my gedagte, is dit gee my outomaties die sluiting tag. 737 00:33:13,750 --> 00:33:17,190 Maar die verwagting is dan sal ek getref Gee, en beweeg dan binnekant daar 738 00:33:17,190 --> 00:33:21,180 en moenie kop binne en dan doen ek liggaam binne. 739 00:33:21,180 --> 00:33:24,430 En dit is 'n bietjie vreemd op die eerste, want dit is die werk te doen vir jou, 740 00:33:24,430 --> 00:33:27,110 maar besef dat uiteindelik Dit spaar jou toetsaanslagen. 741 00:33:27,110 --> 00:33:30,500 En in werklikheid, 'n baie algemene verskynsel in die Programmeer Omgevingen deesdae 742 00:33:30,500 --> 00:33:33,260 beide vir web-ontwikkeling soos hierdie en werklike ontwikkeling, 743 00:33:33,260 --> 00:33:36,960 wat ons sal praat oor môre, is hierdie motor-volledige funksies, 744 00:33:36,960 --> 00:33:39,710 dinge wat net toelaat dat 'n programmeerder of 'n ontwerper 745 00:33:39,710 --> 00:33:42,010 minder toetsaanslagen te tik bereik dieselfde ding. 746 00:33:42,010 --> 00:33:43,176 Soms is dit goed, al is. 747 00:33:43,176 --> 00:33:44,560 Soms is dit net irriterende. 748 00:33:44,560 --> 00:33:49,290 749 00:33:49,290 --> 00:33:54,010 En, weer, as jy eers getranskribeer die skyfie of 'n variant daarvan, 750 00:33:54,010 --> 00:33:57,360 jy kan kliek op die Run knoppie op die top. 751 00:33:57,360 --> 00:33:59,910 En dan in die onderste venster, sal jy in kennis gestel word 752 00:33:59,910 --> 00:34:04,290 op watter URL wat jy kan besoek jou webblad. 753 00:34:04,290 --> 00:34:08,790 Myne, byvoorbeeld, is op business-daharvard.c9users.io 754 00:34:08,790 --> 00:34:11,480 en dies meer. 755 00:34:11,480 --> 00:34:14,580 Goed, so, laat me-- enige vrae? 756 00:34:14,580 --> 00:34:19,460 Enige ander vrae oor net om hierdie werk voordat ons funksies by te voeg? 757 00:34:19,460 --> 00:34:21,692 En laat my stel, net kry mense comfortable-- 758 00:34:21,692 --> 00:34:24,400 want dit is een ding om net kopie-plak blindelings wat ek gedoen het. 759 00:34:24,400 --> 00:34:27,177 Maar net sodat mense worstel met ten minste een to-do, 760 00:34:27,177 --> 00:34:28,510 Ek gaan om te draai op 'n paar musiek. 761 00:34:28,510 --> 00:34:32,630 Ek gaan 'n lys van voor dinge wat jy kan potensieel voeg. 762 00:34:32,630 --> 00:34:34,086 En jy kan seker gebruik Google. 763 00:34:34,086 --> 00:34:36,210 En hoekom doen ons nie net stel voor dat jy probeer om op te los 764 00:34:36,210 --> 00:34:38,710 ten minste een hier spesifieke probleem. 765 00:34:38,710 --> 00:34:45,090 Dus, in terme van etikette, laat my onthou hierdie hier. 766 00:34:45,090 --> 00:34:48,280 >> Eintlik, laat ek dit in 'n tekstuele vorm. 767 00:34:48,280 --> 00:35:02,380 Kom ons sê dat een van die etikette wat ons kan gebruik hier is 'n paar etikette hier. 768 00:35:02,380 --> 00:35:06,090 Ons het die punt tag gesien. 769 00:35:06,090 --> 00:35:07,850 Nou gaan dit outomaties aan te vul. 770 00:35:07,850 --> 00:35:12,220 Paragraaf tag, die anker tag. 771 00:35:12,220 --> 00:35:15,250 Kom ons sê jy wil maak iets groter, 772 00:35:15,250 --> 00:35:19,480 sodat jy kan like-- die span tag kan help. 773 00:35:19,480 --> 00:35:23,010 Wel, jy kan 'n paar hulp nodig vir daardie in net 'n oomblik. 774 00:35:23,010 --> 00:35:24,830 Ons het div gesien. 775 00:35:24,830 --> 00:35:26,170 Jy sal sien daar is tafel. 776 00:35:26,170 --> 00:35:27,928 Daar is iets genaamd tr, td. 777 00:35:27,928 --> 00:35:30,736 778 00:35:30,736 --> 00:35:32,860 Do, td. 779 00:35:32,860 --> 00:35:34,770 Kom terug na wat in 'n oomblik. 780 00:35:34,770 --> 00:35:36,590 Wat anders kan handig wees? 781 00:35:36,590 --> 00:35:38,310 Daar is 'n sterk. 782 00:35:38,310 --> 00:35:43,640 Daar is klem, of eerder em. 783 00:35:43,640 --> 00:35:50,110 There's-- wat anders kan jy hier fancy? 784 00:35:50,110 --> 00:35:51,930 Wel, sal ons 'n kyk na wat saam. 785 00:35:51,930 --> 00:35:53,230 Vorm, wat ons gesien het. 786 00:35:53,230 --> 00:35:54,130 Daar is vorm. 787 00:35:54,130 --> 00:35:56,500 Daar is insette en 'n paar ander. 788 00:35:56,500 --> 00:35:58,924 789 00:35:58,924 --> 00:36:00,090 Goed, so laat ons dit doen. 790 00:36:00,090 --> 00:36:02,330 Om te antwoord n ​​Victoria's vraag, laat my toe om eers 791 00:36:02,330 --> 00:36:05,020 maak net seker dat almal in staat om hul hallo werk te kry. 792 00:36:05,020 --> 00:36:06,900 laat my dan stel 'n paar ander idees. 793 00:36:06,900 --> 00:36:09,209 Dan sal ons laat mense op te los 'n probleem op hul eie. 794 00:36:09,209 --> 00:36:11,500 Dan sal ons eintlik terug te kom aan daardie idee van 'n vorm, 795 00:36:11,500 --> 00:36:14,950 en ons sal eintlik weer te implementeer saam die front-end-koppelvlak, 796 00:36:14,950 --> 00:36:16,450 om so te praat nie, want Google self. 797 00:36:16,450 --> 00:36:19,700 Ons sal Google gebruik as die agterkant en laat hulle doen die harde werk, die soek, 798 00:36:19,700 --> 00:36:22,760 maar ons sal herskep die voorkant Google en die search form 799 00:36:22,760 --> 00:36:24,520 dat hulle op hul eie tuisblad. 800 00:36:24,520 --> 00:36:27,050 En so sal ons terug te kom na hierdie tags in net 'n oomblik. 801 00:36:27,050 --> 00:36:30,270 >> So dit is wat ek voorgestelde net 'n oomblik gelede. 802 00:36:30,270 --> 00:36:33,940 Ons kan die stilering voeg tot 'n bladsy binnekant van hierdie styl tag, 803 00:36:33,940 --> 00:36:36,950 en ons kan die agtergrond stileer kleur, die teks belyning, 804 00:36:36,950 --> 00:36:39,000 of dit nou sentrum of links of regs. 805 00:36:39,000 --> 00:36:41,630 Maar baie vinnig jy sou vind of 'n web ontwerper 806 00:36:41,630 --> 00:36:44,060 sou vind dat hierdie 'n bietjie lomp, 807 00:36:44,060 --> 00:36:48,330 omdat jy doen wat genoem vermenging inhoud 808 00:36:48,330 --> 00:36:50,120 met die aanbieding daarvan. 809 00:36:50,120 --> 00:36:53,756 Jy meng jou data en die estetika daarvan. 810 00:36:53,756 --> 00:36:56,380 En in werklikheid, as jy kyk na wat gaan gebeur oor time-- 811 00:36:56,380 --> 00:36:58,350 dit is 'n baie klein webblad, natuurlik. 812 00:36:58,350 --> 00:37:01,590 Maar as ek die inhoud toe te voeg tot hierdie bladsy en ek voeg styl aan hierdie blad, 813 00:37:01,590 --> 00:37:04,650 die bladsy baie vinnig kry langer en langer. 814 00:37:04,650 --> 00:37:07,510 En dink wat ek wil 'n tweede webblad wat 815 00:37:07,510 --> 00:37:09,010 deel sommige van hierdie eienskappe. 816 00:37:09,010 --> 00:37:12,350 Veronderstel my tweede webblad vir my site-- ook, ek wil alles sentrum, 817 00:37:12,350 --> 00:37:14,960 en ek wil ook alles met 'n groen agtergrond. 818 00:37:14,960 --> 00:37:17,940 Ek is pretty much gaan hê kopieer en plak 'n paar van hierdie lyne 819 00:37:17,940 --> 00:37:20,730 in die tweede lêer, wat fyn voel. 820 00:37:20,730 --> 00:37:22,030 Dit sal die probleem op te los. 821 00:37:22,030 --> 00:37:26,060 >> Maar wat as ek wil 'n derde bladsy of 'n 30 bladsy of 'n 40 bladsy? 822 00:37:26,060 --> 00:37:28,730 Nou gaan ek te kopieer en plak 'n klomp duplikaat-kode 823 00:37:28,730 --> 00:37:30,430 in veelvuldige lêers. 824 00:37:30,430 --> 00:37:32,600 En so dink dat Ek besluit of ek vertel, 825 00:37:32,600 --> 00:37:34,780 hey, ons is nie die gebruik van 'n groen agtergrond nie. 826 00:37:34,780 --> 00:37:36,380 Ons gaan begin met oranje. 827 00:37:36,380 --> 00:37:38,690 Wat het jy om te verander? 828 00:37:38,690 --> 00:37:42,900 Wel, jy het om die styl te verander van groen na oranje in hoeveel plekke? 829 00:37:42,900 --> 00:37:44,920 Soos 30 of 40 plekke. 830 00:37:44,920 --> 00:37:45,900 Dit is vervelig. 831 00:37:45,900 --> 00:37:47,039 Dit is geneig om foute. 832 00:37:47,039 --> 00:37:49,580 Daar is 'n aantal redes waar jy nie wil hê om te oorreed 833 00:37:49,580 --> 00:37:51,840 daardie soort pyn vir jouself. 834 00:37:51,840 --> 00:37:54,760 En so sou dit nie lekker wees As ons kon neem wat ek nou net 835 00:37:54,760 --> 00:37:58,240 sit tussen hierdie twee geel tags, hierdie styl etikette, 836 00:37:58,240 --> 00:38:04,050 faktor dit uitgetrek en al my stilering in een sentrale lêer 837 00:38:04,050 --> 00:38:08,470 dat al 30 of 40 van my ander lêers leen of een of ander manier verwys, 838 00:38:08,470 --> 00:38:11,640 nie in teenstelling met die netwerk diagramme ons doen voordat? 839 00:38:11,640 --> 00:38:15,030 >> So as ek gaan hier, ek is gaan eintlik stel 840 00:38:15,030 --> 00:38:17,880 dat ons die plek van die styl tag met iets 841 00:38:17,880 --> 00:38:21,620 bekend as die skakel tag, wat is verskriklik, verskriklik genoem, 842 00:38:21,620 --> 00:38:24,370 omdat jy nie gebruik maak van die skakel tag om wat te skep 843 00:38:24,370 --> 00:38:26,380 Ons mense weet as 'n skakel in 'n web bladsy. 844 00:38:26,380 --> 00:38:29,750 Vir dit wat tag gebruik jy? 845 00:38:29,750 --> 00:38:31,464 Hoe kan jy 'n skakel in 'n web bladsy te skep? 846 00:38:31,464 --> 00:38:32,130 Gehoor: Die a. 847 00:38:32,130 --> 00:38:34,870 David J. MALAN: Die a, of anker tag, wat voor geloop om Disney. 848 00:38:34,870 --> 00:38:39,090 Die skakel tag hier sê this-- skakel na 'n lêer met die naam 849 00:38:39,090 --> 00:38:44,350 styles.css, die verhouding waartoe gaan wees dat dit my style. 850 00:38:44,350 --> 00:38:48,290 So, dit is een van die S se CSS-- Cascading Style Sheets. 851 00:38:48,290 --> 00:38:50,490 Styl sheet-- twee van die S in CSS. 852 00:38:50,490 --> 00:38:52,550 Cascading Style Sheets. 853 00:38:52,550 --> 00:38:58,640 Dit beteken net, hey, leser, gaan vind styles.css op die plaaslike bediener 854 00:38:58,640 --> 00:39:01,870 en gebruik dit as jou style, wat beteken binnekant van die lêer 855 00:39:01,870 --> 00:39:05,310 gaan al die wees stylizations dat ons net gedoen het. 856 00:39:05,310 --> 00:39:07,396 En so what wat lêer kan lyk is dit. 857 00:39:07,396 --> 00:39:10,020 En ek sal net doen dit is 'n vinnige Byvoorbeeld, want ons hoef nie 858 00:39:10,020 --> 00:39:12,000 om te veel in die onkruid hier te kry. 859 00:39:12,000 --> 00:39:17,840 Maar as ek dit kopieer, wat ek voorstel is dat 'n programmeerder 'n nuwe lêer, 860 00:39:17,840 --> 00:39:24,450 plak in die lines-- whoops-- plak in die lyne, 861 00:39:24,450 --> 00:39:32,270 stoor dit as styles.css, en dan, in die ander lêer, verwyder dit alles 862 00:39:32,270 --> 00:39:35,450 en vervang dit plaas met hierdie skakel tag. 863 00:39:35,450 --> 00:39:43,090 Sodat as ek 'n skakel href = "styles.css", die verhouding sal "style" wees 864 00:39:43,090 --> 00:39:44,170 naby tag. 865 00:39:44,170 --> 00:39:45,250 Spaar dit. 866 00:39:45,250 --> 00:39:47,000 Gaan terug na my Hello World. 867 00:39:47,000 --> 00:39:48,690 Reload. 868 00:39:48,690 --> 00:39:51,290 >> Letterlik niks gebeur het nie. 869 00:39:51,290 --> 00:39:54,710 Dit is 'n goeie ding, want dit beteken dit eintlik werk nie. 870 00:39:54,710 --> 00:39:58,860 Om soveel bewys, dink ek 'n tikfout, en ek noem dit "Styles.css" 871 00:39:58,860 --> 00:40:03,080 met 'n kapitaal S, wat is verkeerd is, en dan herlaai. 872 00:40:03,080 --> 00:40:05,470 Nou kan jy sien dit net nie werk nie. 873 00:40:05,470 --> 00:40:06,362 Nou, hoekom? 874 00:40:06,362 --> 00:40:08,070 Wel, laat ons gebruik 'n tegniek van vroeër. 875 00:40:08,070 --> 00:40:10,153 Laat my gaan voort en, in my leser, in Chrome, ek is 876 00:40:10,153 --> 00:40:12,900 gaan oop dat spesiale blad netwerk soos voorheen, 877 00:40:12,900 --> 00:40:15,560 en laat my tot die bladsy laai. 878 00:40:15,560 --> 00:40:19,341 Wat is jy nie verbaas wees om nou te sien? 879 00:40:19,341 --> 00:40:20,840 Of miskien het jy verbaas wees om te sien. 880 00:40:20,840 --> 00:40:23,225 In ieder geval, wat sien jy nou? 881 00:40:23,225 --> 00:40:24,100 Gehoor: [onhoorbaar] 882 00:40:24,100 --> 00:40:24,770 David J. MALAN: Dit is nie gevind nie. 883 00:40:24,770 --> 00:40:25,680 Hoekom is dit nie gevind word? 884 00:40:25,680 --> 00:40:28,480 Wel, Styles.css-- kapitaal S-- bestaan ​​nie. 885 00:40:28,480 --> 00:40:29,230 Ek Verkeerd benoem dit. 886 00:40:29,230 --> 00:40:30,430 Eenvoudige tikfout. 887 00:40:30,430 --> 00:40:33,816 Maar ek kry verstaanbaar nou 'n 404, omdat die bediener is te sê: hey, 888 00:40:33,816 --> 00:40:34,440 dit is nie gevind. 889 00:40:34,440 --> 00:40:36,300 Letterlik, weet ek nie waar die lêer is. 890 00:40:36,300 --> 00:40:38,880 So as 'n gevolg, die leser wys jou wat dit kan, 891 00:40:38,880 --> 00:40:42,860 die rou inhoud van die bladsy, wat 'n 200, die HTML, 892 00:40:42,860 --> 00:40:45,390 maar die stilering kan nie daarna bygevoeg word. 893 00:40:45,390 --> 00:40:47,120 En dit is wat bedoel word met waterval. 894 00:40:47,120 --> 00:40:49,070 Jy kan soort voeg dit na, en dit soort 895 00:40:49,070 --> 00:40:50,874 verfyn die estetika van die webblad. 896 00:40:50,874 --> 00:40:53,790 En jy kan selfs ignoreer diegene style met nog ander style lêers 897 00:40:53,790 --> 00:40:54,700 as jy wil. 898 00:40:54,700 --> 00:40:57,780 Dit is nie gevind nie, al is, in hierdie geval, want natuurlik, ek Verkeerd benoem dit. 899 00:40:57,780 --> 00:41:00,330 So ek wil hê om eerste op te los nie. 900 00:41:00,330 --> 00:41:04,667 >> So laat ons gaan voort en stel die volgende. 901 00:41:04,667 --> 00:41:07,410 902 00:41:07,410 --> 00:41:11,140 Kom ons gaan voort en doen dit. 903 00:41:11,140 --> 00:41:14,220 Begin met miskien jou Hello World lêer, 904 00:41:14,220 --> 00:41:17,740 laat my net te nooi 'n paar van funksie voorstelle. 905 00:41:17,740 --> 00:41:20,400 So, Victoria, jy wou maak 'n paar teks groter, reg? 906 00:41:20,400 --> 00:41:24,555 Goed, so ons kan moenie teks groter te maak. 907 00:41:24,555 --> 00:41:26,860 En ons sal elke aftrek net een probleem op te los. 908 00:41:26,860 --> 00:41:30,867 Maak teks groter. 909 00:41:30,867 --> 00:41:32,700 Ek gaan nie te pla skryf wanneer ons 910 00:41:32,700 --> 00:41:35,600 het koeël tegnologie reg hier. 911 00:41:35,600 --> 00:41:39,970 So 'n paar probleme. 912 00:41:39,970 --> 00:41:44,670 So ons gaan probeer teks groter te maak. 913 00:41:44,670 --> 00:41:45,170 Alles reg. 914 00:41:45,170 --> 00:41:48,360 Wat anders sou iemand voorstel? 915 00:41:48,360 --> 00:41:50,332 Wat anders kan ons wil om te doen in 'n webblad? 916 00:41:50,332 --> 00:41:52,040 Kom ons kom met 'n kortlys van dinge 917 00:41:52,040 --> 00:41:55,366 en dan delegeer aan die groep om hierdie uit te vind. 918 00:41:55,366 --> 00:41:56,270 >> Gehoor: [onhoorbaar] 919 00:41:56,270 --> 00:42:02,251 >> David J. MALAN: OK, posisie teks op verskillende kante van die bladsy? 920 00:42:02,251 --> 00:42:02,750 Alles reg. 921 00:42:02,750 --> 00:42:04,620 Iets anders. 922 00:42:04,620 --> 00:42:05,784 >> Gehoor: [onhoorbaar] 923 00:42:05,784 --> 00:42:06,700 David J. MALAN: Dit is. 924 00:42:06,700 --> 00:42:08,720 So 'n gif is net 'n verskillende lêer formaat. 925 00:42:08,720 --> 00:42:12,830 Ons het net gebruik, wat 'n png of 'n jpg waarskynlik? 926 00:42:12,830 --> 00:42:14,480 Ons gebruik 'n jpg. 927 00:42:14,480 --> 00:42:16,780 As jy nuuskierig, 'n oormatige is antwoord op jou vraag 928 00:42:16,780 --> 00:42:19,404 is 'n jpg is oor die algemeen gebruik word vir foto's, want dit ondersteun 929 00:42:19,404 --> 00:42:21,500 miljoene kleure of 24-bis kleur. 930 00:42:21,500 --> 00:42:26,930 A gif is oor die algemeen gebruik word vir, soos, internet nooi hierdie days-- animasies, 931 00:42:26,930 --> 00:42:28,810 soos animated gifs. 932 00:42:28,810 --> 00:42:32,320 Maar dit gebeur met 'n kleiner kleur gebruik palet, net 256 moontlike kleure, 933 00:42:32,320 --> 00:42:35,230 maar dit word ondersteun deur deursigtigheid en animasie. 934 00:42:35,230 --> 00:42:40,330 En dan is daar png, wat ondersteun deursigtigheid en meer kleure 935 00:42:40,330 --> 00:42:41,300 maar nie animasie. 936 00:42:41,300 --> 00:42:42,133 Dit is dus 'n trade-off. 937 00:42:42,133 --> 00:42:44,144 938 00:42:44,144 --> 00:42:46,060 So die toevoeging van 'n gif, al is, sou funksioneel wees 939 00:42:46,060 --> 00:42:48,396 gelykstaande aan die toevoeging van 'n PNG of JPG. 940 00:42:48,396 --> 00:42:49,110 Ja. 941 00:42:49,110 --> 00:42:50,550 Image bron gelyk. 942 00:42:50,550 --> 00:42:51,590 So iets anders. 943 00:42:51,590 --> 00:42:57,288 Kom ons kom met iets wat ons gestuur om Victoria om hier te doen. 944 00:42:57,288 --> 00:42:59,209 >> Publiek: knoppies Voeg 'n vorm. 945 00:42:59,209 --> 00:43:00,000 David J. MALAN: OK. 946 00:43:00,000 --> 00:43:02,179 So knoppies by te voeg vir 'n vorm. 947 00:43:02,179 --> 00:43:03,470 En ons sal dit een saam te doen. 948 00:43:03,470 --> 00:43:07,220 Sodat jy 'n perfekte segue wees direk na hierdie uitdaging. 949 00:43:07,220 --> 00:43:10,357 Enigiets anders? 950 00:43:10,357 --> 00:43:11,440 Wat kan jy doen? 951 00:43:11,440 --> 00:43:14,040 952 00:43:14,040 --> 00:43:16,516 Die web voel baie underwhelming As dit is al wat ons kan doen. 953 00:43:16,516 --> 00:43:18,140 Publiek: Verander die kleur van die teks. 954 00:43:18,140 --> 00:43:19,500 David J. MALAN: Verander die wat? 955 00:43:19,500 --> 00:43:20,666 Publiek: Kleur van die teks. 956 00:43:20,666 --> 00:43:22,311 David J. MALAN: Verandering kleur van die teks. 957 00:43:22,311 --> 00:43:22,810 Alles reg. 958 00:43:22,810 --> 00:43:23,790 So, laat ons dit doen. 959 00:43:23,790 --> 00:43:27,209 Net weer sodat jy nie net uit die hoof, doen presies wat ek doen, 960 00:43:27,209 --> 00:43:29,500 Ek gaan om te draai op die musiek vir miskien vyf minute hier. 961 00:43:29,500 --> 00:43:30,450 Jy is welkom om Google te gebruik. 962 00:43:30,450 --> 00:43:33,130 Jy is welkom om my te vra, en Ek sal 'n wenk fluister in jou oor. 963 00:43:33,130 --> 00:43:35,171 Jy is welkom om te kyk oor op ander se skouers. 964 00:43:35,171 --> 00:43:37,340 Maar los net een van hierdie probleme. 965 00:43:37,340 --> 00:43:40,190 Maar ons sal die laaste een, die doen vorm een, as ons kon, saam. 966 00:43:40,190 --> 00:43:42,790 So vyf minute om op te los enige een van hierdie probleme 967 00:43:42,790 --> 00:43:46,780 met behulp van Google, intuïsie, of enige 'n ander manier aan u beskikbaar. 968 00:43:46,780 --> 00:43:48,630 >> [Speel van musiek] 969 00:43:48,630 --> 00:43:49,130 Alles reg. 970 00:43:49,130 --> 00:43:50,838 Geen sorge as jy wil om te hou geknutsel, 971 00:43:50,838 --> 00:43:53,880 maar ek sal 'n paar bederf van hierdie antwoorde. 972 00:43:53,880 --> 00:43:57,986 Dus is die eerste voorstel van Victoria was om die teks groter te maak. 973 00:43:57,986 --> 00:43:59,360 Daar is dus 'n paar maniere om dit te doen. 974 00:43:59,360 --> 00:44:01,530 Ek het tans herstel my skerm om hierdie grootte, 975 00:44:01,530 --> 00:44:04,310 al het ek het ingezoomd kunsmatig net om dinge te sien. 976 00:44:04,310 --> 00:44:07,470 En laat ons dit doen. 977 00:44:07,470 --> 00:44:11,380 Laat my gaan voort en gryp sommige generiese Latynse teks 978 00:44:11,380 --> 00:44:19,540 net so het ons iets om mee te werk. 979 00:44:19,540 --> 00:44:20,715 So gee my net 'n oomblik. 980 00:44:20,715 --> 00:44:21,840 Ek sal drie paragrawe te maak. 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 sal 'n beter voorbeeld wees. 984 00:44:55,560 --> 00:44:57,840 So vir die nuuskierige, in my hello.html, ek het net 985 00:44:57,840 --> 00:45:01,645 geplak drie nonsens Latyns-paragrawe 986 00:45:01,645 --> 00:45:03,270 net so ons het 'n paar teks mee te werk. 987 00:45:03,270 --> 00:45:06,720 En Victoria se doel was om maak 'n paar van die teks groter. 988 00:45:06,720 --> 00:45:09,879 So ek kon, soos voorheen, gaan hier. 989 00:45:09,879 --> 00:45:11,170 En laat ek doen dit op die regte manier. 990 00:45:11,170 --> 00:45:13,253 Ek gaan 'n skakel het tag wat verwys na 'n lêer 991 00:45:13,253 --> 00:45:20,560 genoem "styles.css," die verhouding waarvan weer "style." 992 00:45:20,560 --> 00:45:25,221 En dan gaan ek te red en oop te stel hierdie "styles.css." 993 00:45:25,221 --> 00:45:28,940 >> So, soos voorheen, ek het die vermoë in hierdie CSS-lêer 994 00:45:28,940 --> 00:45:31,569 om werklik oorheers die standaard estetika van 'n webblad, 995 00:45:31,569 --> 00:45:33,860 en die standaard estetika, natuurlik, is redelik dof. 996 00:45:33,860 --> 00:45:36,943 Dit is soort van normale lettergrootte, swart teks, wit agtergrond, en so meer. 997 00:45:36,943 --> 00:45:39,440 So dink ek wil maak al hierdie teks groter. 998 00:45:39,440 --> 00:45:40,460 Ek kon 'n paar dinge te doen. 999 00:45:40,460 --> 00:45:43,750 In my styles.css lêer, ek kon sê, jy weet wat, 1000 00:45:43,750 --> 00:45:46,950 pas die volgende te die liggaam van my bladsy. 1001 00:45:46,950 --> 00:45:51,390 Gaan voort en maak die lettergrootte 24 punte, 1002 00:45:51,390 --> 00:45:54,130 wat is 'n aantal ek kan gebruik in Microsoft Word. 1003 00:45:54,130 --> 00:45:57,620 Laat my terug na my web bladsy hier en herlaai, 1004 00:45:57,620 --> 00:45:59,640 en jy kan sien dat dit is reeds baie groter. 1005 00:45:59,640 --> 00:46:02,223 En ons kan 'n bietjie mal, net soos ons kan op 'n desktop-- 1006 00:46:02,223 --> 00:46:03,670 Maak dit 96 punte. 1007 00:46:03,670 --> 00:46:04,950 Reload. 1008 00:46:04,950 --> 00:46:07,610 En dit is om 'n bietjie lomp op hierdie punt. 1009 00:46:07,610 --> 00:46:09,500 >> Maar ek kon 'n bietjie meer presies te wees. 1010 00:46:09,500 --> 00:46:14,530 In plaas daarvan om die toepassing van hierdie style om die liggaam van my bladsy, 1011 00:46:14,530 --> 00:46:21,740 Wat anders kan ek pas dit toe op plaas, watter ander tag wat dalk nog 1012 00:46:21,740 --> 00:46:25,445 funksie op dieselfde manier? 1013 00:46:25,445 --> 00:46:26,444 >> Gehoor: Die 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 So het die hoof sou nie korrek is, omdat die hoof, 1016 00:46:29,350 --> 00:46:31,300 jy kan nie eintlik beheer oor die estetika van. 1017 00:46:31,300 --> 00:46:32,700 Daar is daar of nie óf teks. 1018 00:46:32,700 --> 00:46:36,760 Maar die p tag-- Ek kan duik in 'n bietjie dieper, so te sê, om die punt 1019 00:46:36,760 --> 00:46:37,350 tags. 1020 00:46:37,350 --> 00:46:41,600 En selfs al is daar drie, dit is heeltemal fyn, want in CSS, 1021 00:46:41,600 --> 00:46:44,900 as ek sê net "p" hierdie beteken die toepassing van die volgende 1022 00:46:44,900 --> 00:46:48,300 om enige etiket wat ooreenstem met hierdie selector, die selector net 1023 00:46:48,300 --> 00:46:49,430 synde die naam van die etiket. 1024 00:46:49,430 --> 00:46:52,350 So waar jy sien 'n "P" pas die lettergrootte, 1025 00:46:52,350 --> 00:46:55,222 en laat ons dit meer redelike again-- 24 punt. 1026 00:46:55,222 --> 00:46:56,930 En jy weet wat, net vir 'n Goeie maat, 1027 00:46:56,930 --> 00:46:59,810 Kom ons maak die kleur rooi net vir die oomblik. 1028 00:46:59,810 --> 00:47:03,740 En nou as ek herlaai, nou is ons sien drie lelike paragrawe. 1029 00:47:03,740 --> 00:47:07,180 >> Maar nou dink dat ek soort of-- Ek wil die eerste paragraaf 1030 00:47:07,180 --> 00:47:08,210 om uit te spring op die gebruiker. 1031 00:47:08,210 --> 00:47:11,150 Ek wil nie net verhoog die lettergrootte van alles. 1032 00:47:11,150 --> 00:47:16,105 En so het ek wil eintlik om te identifiseer of onderskei tussen hierdie paragrawe. 1033 00:47:16,105 --> 00:47:18,730 So laat ons ontslae te raak van die rooi, want dit is net soort van taai, 1034 00:47:18,730 --> 00:47:23,885 en laat ons gaan voort en maak die lettergrootte 12-punt by verstek, 1035 00:47:23,885 --> 00:47:26,260 sodat ons terug na iets 'n bietjie meer redelik is. 1036 00:47:26,260 --> 00:47:29,190 En nou wil ek net die verhoog lettergrootte van die eerste paragraaf. 1037 00:47:29,190 --> 00:47:31,440 Ek kan dit doen in 'n paar maniere, maar een manier is dit 1038 00:47:31,440 --> 00:47:37,180 miskien die meeste instruksionele by die oomblik is om die volgende te doen. 1039 00:47:37,180 --> 00:47:43,280 Laat my gaan voort en sê: hierdie paragraaf het 'n unieke ID van "eerste." 1040 00:47:43,280 --> 00:47:45,000 Ek kan dit iets wat ek wil noem. 1041 00:47:45,000 --> 00:47:46,874 Ek kon hierdie "cat" noem of enige ander woord, 1042 00:47:46,874 --> 00:47:49,290 maar ek gaan dit 'n paar te gee semanties betekenisvolle naam 1043 00:47:49,290 --> 00:47:50,320 soos "eerste." 1044 00:47:50,320 --> 00:47:54,790 Dit is die unieke identifikasie, die ID, vir my eerste paragraaf. 1045 00:47:54,790 --> 00:47:59,360 >> Wat ek nou kan doen in my style is 'n bietjie meer presies. 1046 00:47:59,360 --> 00:48:02,330 In plaas daarvan om te sê, toe te pas die volgende aan die p tag, 1047 00:48:02,330 --> 00:48:04,890 Ek kan sê dat die following-- Pas die volgende, 1048 00:48:04,890 --> 00:48:11,000 of kies die HTML element wat het 'n unieke ID van "eerste." 1049 00:48:11,000 --> 00:48:12,350 Wat wil ek om aansoek te doen om dit? 1050 00:48:12,350 --> 00:48:15,250 'N lettergrootte van 24-punt. 1051 00:48:15,250 --> 00:48:16,640 So ek het twee keurders nou. 1052 00:48:16,640 --> 00:48:19,690 Een maak al die paragrawe 12-punt. 1053 00:48:19,690 --> 00:48:24,960 Maar hierdie een, veral omdat dit kom second-- dit kom laaste in die file-- 1054 00:48:24,960 --> 00:48:27,090 dit het 'n waterval effek. 1055 00:48:27,090 --> 00:48:30,200 Ek het net gemaak al my paragraaftag 12-punt, 1056 00:48:30,200 --> 00:48:34,350 maar dit nou watervalle en oorheers dat vir enige elemente 1057 00:48:34,350 --> 00:48:38,800 in die bladsy, enige merker in die bladsy se unieke ID is kwotasie unquote "eerste." 1058 00:48:38,800 --> 00:48:41,720 En die hashtag in hierdie konteks net beteken "unieke identifiseerder." 1059 00:48:41,720 --> 00:48:43,750 Ek het nie sit dit in die HTML-lêer. 1060 00:48:43,750 --> 00:48:46,880 Ek, hier, net sê kwotasie unquote "eerste." 1061 00:48:46,880 --> 00:48:48,470 >> So laat ek herlaai. 1062 00:48:48,470 --> 00:48:49,919 En nou sien ek: Ag, OK. 1063 00:48:49,919 --> 00:48:51,710 Ek bedoel, dit is nie so mooi, maar dit is soort 1064 00:48:51,710 --> 00:48:53,600 van soos die voorwoord tot 'n boek of iets soos dit, 1065 00:48:53,600 --> 00:48:55,100 waar die eerste paragraaf is groter. 1066 00:48:55,100 --> 00:48:57,933 Kon selfs meer akkurate wees met net die eerste letters, maar ten minste 1067 00:48:57,933 --> 00:48:59,110 Ek het meer beheer uitgeoefen. 1068 00:48:59,110 --> 00:49:04,760 Nou maybe-- Miskien wil ek om dit te doen soms vir watter rede ook al, 1069 00:49:04,760 --> 00:49:09,010 en so kan ek nie hierdie wil van toepassing op net een HTML tag. 1070 00:49:09,010 --> 00:49:15,110 Inteendeel, laat ons say-- laat ook die volgende doen. 1071 00:49:15,110 --> 00:49:18,810 Class = "invoer." 1072 00:49:18,810 --> 00:49:23,970 AANGESIEN 'n ID word gebruik om uniek identifiseer een ding, een tag, 1073 00:49:23,970 --> 00:49:30,190 in jou webblad, is 'n klas bedoel om te wees gebruik op 'n aantal elemente of etikette 1074 00:49:30,190 --> 00:49:30,950 op jou webblad. 1075 00:49:30,950 --> 00:49:31,710 Dit is dus herbruikbare. 1076 00:49:31,710 --> 00:49:33,090 'N ID is nie herbruikbare. 1077 00:49:33,090 --> 00:49:34,450 'N Klas is herbruikbare. 1078 00:49:34,450 --> 00:49:37,830 >> En jy weet wat, om watter filosofiese reasons-- 1079 00:49:37,830 --> 00:49:40,180 Ek het nie klaar my thought-- ek gaan om te sê 1080 00:49:40,180 --> 00:49:44,300 dat die eerste paragraaf en die tweede paragraaf is belangrik. 1081 00:49:44,300 --> 00:49:48,600 So ek gaan die klas genoem toepassing "Belangrik" dat, as ek slaan my lêer 1082 00:49:48,600 --> 00:49:51,510 en herlaai, het geen funksionele impak nie. 1083 00:49:51,510 --> 00:49:53,780 Maar ek het 'n paar bygevoeg metadata om die lêer, 1084 00:49:53,780 --> 00:49:56,610 soort van iets afsonderlike uit die kern data van die lêer, 1085 00:49:56,610 --> 00:50:02,300 sodat nou in my style, as ek plaas sê ".important" - jy weet, 1086 00:50:02,300 --> 00:50:07,110 enigiets wat belangrik is, is ek gaan font-kleur, red-- 1087 00:50:07,110 --> 00:50:09,930 of liewer nie skrif kleur, net kleur. 1088 00:50:09,930 --> 00:50:12,930 Daar is teenstrydighede in CSS ongelukkig. 1089 00:50:12,930 --> 00:50:14,120 En herlaai. 1090 00:50:14,120 --> 00:50:17,640 Let nou op die eerste twee paragrawe is rooi 1091 00:50:17,640 --> 00:50:20,880 maar nie die derde nie, want ek het net toegepas die klas van "belangrike" 1092 00:50:20,880 --> 00:50:25,020 om die eerste twee van daardie dinge. 1093 00:50:25,020 --> 00:50:28,030 >> So in ID's, jy het die vermoë om presies te spesifiseer. 1094 00:50:28,030 --> 00:50:30,110 Met klasse, jy herbruikbaarheid. 1095 00:50:30,110 --> 00:50:33,800 Maar in beide gevalle, sien die soort van goeie-ontwerpbeginsel 1096 00:50:33,800 --> 00:50:39,072 waar ek ingereken uit al die estetika my styles.css lêer. 1097 00:50:39,072 --> 00:50:40,280 Daar is dus geen messiness hier. 1098 00:50:40,280 --> 00:50:44,490 Daar is geen melding gemaak van rooi of vet front of lettergrootte in hierdie lêer. 1099 00:50:44,490 --> 00:50:49,430 Eerder Ek het semanties, sinvol gekenmerk my data as, 1100 00:50:49,430 --> 00:50:51,240 hier is 'n paar belangrike inligting. 1101 00:50:51,240 --> 00:50:52,800 Hier is 'n paar meer belangrike inligting. 1102 00:50:52,800 --> 00:50:56,500 Verder, hier is die "Eerste" van my belangrike inligting. 1103 00:50:56,500 --> 00:51:01,050 So HTML is alles oor soort van kodering, letterlik, woorde 1104 00:51:01,050 --> 00:51:05,270 en paragrawe en konstrukte in jou bladsy met hierdie klein wenke, as jy 1105 00:51:05,270 --> 00:51:07,640 wil nie, dat jy kan een of ander manier te benut deur gebruik te maak 1106 00:51:07,640 --> 00:51:10,880 ander tegnieke soos CSS op hierdie manier. 1107 00:51:10,880 --> 00:51:14,760 >> So in antwoord op die vraag Victoria se kan ons teks groter in daardie plek te maak. 1108 00:51:14,760 --> 00:51:18,380 Daar is so baie ander maniere, maar die skrif tag-- oop bracket "font" - 1109 00:51:18,380 --> 00:51:19,770 is eintlik 'n paar jaar oud is. 1110 00:51:19,770 --> 00:51:21,410 En dit is die probleem, Ook met net vertrou 1111 00:51:21,410 --> 00:51:23,485 op online resources-- hulle is geneig om verouderd wees. 1112 00:51:23,485 --> 00:51:26,110 En inderdaad, wat al afgekeur, want die wêreld het besef, 1113 00:51:26,110 --> 00:51:28,970 Wat beteken "font-size = 7" beteken? 1114 00:51:28,970 --> 00:51:29,670 Dit maak nie. 1115 00:51:29,670 --> 00:51:32,770 En so is dit vir baie jare en hierdie day-- een van die newe 1116 00:51:32,770 --> 00:51:36,060 notas hier is dat dit eintlik ongelooflik pynlik nog soms 1117 00:51:36,060 --> 00:51:38,900 webwerwe vir die ontwikkeling van web, omdat Microsoft 1118 00:51:38,900 --> 00:51:44,220 en Google en Mozilla en ander dikwels verskil oor hoe 1119 00:51:44,220 --> 00:51:47,480 'n spesifikasie soos HTML interpreteer. 1120 00:51:47,480 --> 00:51:52,490 >> Daar is 'n reëlboek vir HTML wat oor die algemeen sê wat elke tag beteken. 1121 00:51:52,490 --> 00:51:55,690 Maar soms is dit oorgelaat aan die diskresie implementering se 1122 00:51:55,690 --> 00:51:57,290 diskresie en Google Microsoft se. 1123 00:51:57,290 --> 00:52:00,000 En so sal jy baie dikwels sien op 'n webwerf iets 1124 00:52:00,000 --> 00:52:04,954 lyk anders op 'n rekenaar as dit nie op 'n Mac, 1125 00:52:04,954 --> 00:52:06,995 en dit is werklik, want aan die einde van die dag, 1126 00:52:06,995 --> 00:52:08,891 hulle het nie toets dit goed op twee platforms. 1127 00:52:08,891 --> 00:52:11,390 Maar dit is ook omdat redelike, slim mense sal saamstem 1128 00:52:11,390 --> 00:52:14,970 en maatskappye sal nie saamstem nie, en so Een van die uitdagings van ontwikkeling 1129 00:52:14,970 --> 00:52:16,980 vir die web of ontwerp dinge vir die web 1130 00:52:16,980 --> 00:52:21,700 skryf jou webwerf op 'n manier wat werk op elke webblaaier. 1131 00:52:21,700 --> 00:52:23,410 Maar selfs dit is onredelik, reg? 1132 00:52:23,410 --> 00:52:27,807 Daar is so baie weergawes van soveel blaaiers daar buite wat, op 'n sekere punt, 1133 00:52:27,807 --> 00:52:30,890 jy moet ook 'n oordeel oproep maak en jy het om te besluit as 'n maatskappy, 1134 00:52:30,890 --> 00:52:33,082 veral vir e-handel-styl plekke waar jy 1135 00:52:33,082 --> 00:52:36,290 probeer om die nuutste en beste gebruik tegnologie om 'n baie goeie gebruiker gee 1136 00:52:36,290 --> 00:52:37,110 ervaring. 1137 00:52:37,110 --> 00:52:41,019 Maar sommige persentasie van jou gebruikers mag steeds met behulp van Internet Explorer 6 of 7 1138 00:52:41,019 --> 00:52:43,810 of 8, veral na gelang van die land wat hulle vandaan kom. 1139 00:52:43,810 --> 00:52:46,760 >> En so baie algemeen geraadpleegde is iets 1140 00:52:46,760 --> 00:52:50,920 soos "statistieke webblaaier." 1141 00:52:50,920 --> 00:52:56,560 En as ons gaan aan- laat ons sien Wikipedia en sien hoe up-to-date hierdie grafiek is 1142 00:52:56,560 --> 00:52:59,320 As daar een is. 1143 00:52:59,320 --> 00:53:02,420 So hier kan jy sien waar blaaier eintlik 1144 00:53:02,420 --> 00:53:06,160 is, volgens Desember 2015, volgens die Amerikaanse regering. 1145 00:53:06,160 --> 00:53:11,170 Chrome is op 42% markaandeel, gevolg deur IE grootliks in korporatiewe instellings 1146 00:53:11,170 --> 00:53:14,490 of PC instellings, natuurlik, gevolg deur Firefox, 1147 00:53:14,490 --> 00:53:17,440 dan Safari, dan Opera het nie maak die kaart hier vir een of ander rede, 1148 00:53:17,440 --> 00:53:18,210 en dan ander. 1149 00:53:18,210 --> 00:53:19,500 Miskien is dit onder ander. 1150 00:53:19,500 --> 00:53:27,700 Maar meer problematies as wat is-- Kom ons kyk of Wikipedia het ook 1151 00:53:27,700 --> 00:53:35,194 weergawes van webblaaiers version-- 1152 00:53:35,194 --> 00:53:36,160 1153 00:53:36,160 --> 00:53:39,190 >> Kom ons gaan na die statistieke leser. 1154 00:53:39,190 --> 00:53:40,680 Internet Explorer. 1155 00:53:40,680 --> 00:53:42,030 Selfs dit is nie genoeg nie. 1156 00:53:42,030 --> 00:53:44,854 Leser statistieke. 1157 00:53:44,854 --> 00:53:45,353 My weergawe. 1158 00:53:45,353 --> 00:53:48,980 1159 00:53:48,980 --> 00:53:50,540 Dit gaan nie om reg te wees. 1160 00:53:50,540 --> 00:53:53,414 Kom ons kyk weergawes. 1161 00:53:53,414 --> 00:53:54,830 Leser markaandeel. 1162 00:53:54,830 --> 00:53:57,110 Kom ons kyk of hierdie opkom. 1163 00:53:57,110 --> 00:53:57,610 OK. 1164 00:53:57,610 --> 00:54:00,010 Nou is dit om 'n bietjie meer bruikbaar. 1165 00:54:00,010 --> 00:54:04,870 So hier, sien dat ons almal verskillende weergawes van webblaaiers. 1166 00:54:04,870 --> 00:54:09,887 En my God, as jy look-- Chrome 48, Chrome 47, Chrome 31, Chrome 45. 1167 00:54:09,887 --> 00:54:12,970 Ek bedoel, implementeer toenemend opgedateer, en soms 'n paar van die veranderings 1168 00:54:12,970 --> 00:54:16,430 is belangrik in terme van funksionaliteit. 1169 00:54:16,430 --> 00:54:20,630 En so op 'n sekere punt, die produk bestuurders of die ingenieurs 1170 00:54:20,630 --> 00:54:23,620 moet 'n decision-- maak jy weet wat, net 1% van die wêreld 1171 00:54:23,620 --> 00:54:24,740 is nog steeds met behulp Internet Explorer 7. 1172 00:54:24,740 --> 00:54:25,490 Om die hel met hulle. 1173 00:54:25,490 --> 00:54:27,470 Ons is net nie gaan ondersteun dat die leser. 1174 00:54:27,470 --> 00:54:28,740 En wat beteken dit nie te ondersteun? 1175 00:54:28,740 --> 00:54:31,170 Dit kan beteken dat knoppies werk nie op jou webblad, 1176 00:54:31,170 --> 00:54:33,050 of dit kan beteken die opmaak is heeltemal af. 1177 00:54:33,050 --> 00:54:35,091 Of jy kan hê om te maak dat dieselfde oordeel oproep 1178 00:54:35,091 --> 00:54:39,089 in mobiele deesdae, waar, ons is nie van plan om IOS 5 meer ondersteun. 1179 00:54:39,089 --> 00:54:40,380 So mense moet net op te gradeer. 1180 00:54:40,380 --> 00:54:45,850 Of ons gaan nie Cupcake ondersteun op Android-bedryfstelsel vir Android-toestelle, 1181 00:54:45,850 --> 00:54:48,629 want as die world-- as die tegnologie wêreld wil om vorentoe te beweeg, 1182 00:54:48,629 --> 00:54:51,170 dit soort wil die sleep wêreld met dit, sodat hulle dit nie doen nie 1183 00:54:51,170 --> 00:54:53,295 moet voortgaan om te wees backwards compatible sodat hulle 1184 00:54:53,295 --> 00:54:54,920 kan nuwe en goeie eienskappe aan te bied. 1185 00:54:54,920 --> 00:54:57,878 Dit is inderdaad een van die redes waarom so baie maatskappye uitrol 1186 00:54:57,878 --> 00:55:01,440 outomatiese updates en soort van dwing die nuutste weergawes van sagteware op ons. 1187 00:55:01,440 --> 00:55:04,010 En selfs maatskappye soos Apple sal soort 1188 00:55:04,010 --> 00:55:07,280 byna dwing of te dwing jy in terme van markkragte 1189 00:55:07,280 --> 00:55:11,164 om 'n nuwe selfoon te koop, want hulle het net sal nie jou ou selfoon meer te werk. 1190 00:55:11,164 --> 00:55:13,330 So jy mis nie uit op die nuutste en beste eienskappe, 1191 00:55:13,330 --> 00:55:17,520 want dit is duur om hulle as 'n maatskappy om ouer te handhaaf, waarskynlik 1192 00:55:17,520 --> 00:55:19,330 minderwaardige weergawes van sagteware. 1193 00:55:19,330 --> 00:55:23,660 Maar die netto effek is dat Ons ly ook hierdie so goed. 1194 00:55:23,660 --> 00:55:26,550 >> So laat ons 'n blik op net 'n paar finale dinge hier. 1195 00:55:26,550 --> 00:55:29,740 Kom ons klap real vinnig 'n paar van die ander koeëls, indien nuuskierig. 1196 00:55:29,740 --> 00:55:33,440 So as jy probeer, byvoorbeeld posisie 1197 00:55:33,440 --> 00:55:36,420 die teks op verskillende kante van die bladsy, ek gaan 'n vinnige manier doen, 1198 00:55:36,420 --> 00:55:38,360 maar daar is verskillende maniere om dit te doen. 1199 00:55:38,360 --> 00:55:42,610 Laat my gaan voort en eliminate-- vereenvoudig dit soos volg. 1200 00:55:42,610 --> 00:55:45,330 Laat ek net terug te gaan na my eenvoudige, eenvoudige paragrawe. 1201 00:55:45,330 --> 00:55:47,760 Laat my terug na my styles.css. 1202 00:55:47,760 --> 00:55:51,040 En ek gaan net na die simple-- gebruik wat jy kan sien op Google 1203 00:55:51,040 --> 00:55:54,430 of onthou van earlier-- text-align reg. 1204 00:55:54,430 --> 00:55:56,220 En herlaai die bladsy. 1205 00:55:56,220 --> 00:55:58,470 Nou is alles lyk na regs-gebonde wees, 1206 00:55:58,470 --> 00:56:00,770 soos jy kan sien op die oorhoofse hier. 1207 00:56:00,770 --> 00:56:04,470 >> Ons kan maak dat dit lyk 'n bietjie meer boek-agtige, en ons kan sê "regverdig" 1208 00:56:04,470 --> 00:56:05,640 en herlaai. 1209 00:56:05,640 --> 00:56:09,870 Nou dit is lekker en vierkante op beide kante, wat is 'n soort van lekker. 1210 00:56:09,870 --> 00:56:12,220 Nog 'n doelwit wat ons hier gehad was verander van kleur van die teks. 1211 00:56:12,220 --> 00:56:13,650 So het ons gesien dat met my rooi teks. 1212 00:56:13,650 --> 00:56:15,630 En nou knoppies by te voeg vir 'n vorm. 1213 00:56:15,630 --> 00:56:19,390 So hoekom nie ons probeer om presies dit te doen? 1214 00:56:19,390 --> 00:56:23,656 Maar eers wil ek gaan na 'n webwerf wat die meeste van ons gebruik elke day-- Google. 1215 00:56:23,656 --> 00:56:25,780 En laat ons 'n blik op hoe Google eintlik werk. 1216 00:56:25,780 --> 00:56:26,821 Maar ek gaan om dit te doen. 1217 00:56:26,821 --> 00:56:31,930 Eerste laat my dit doen in-- yep, dat ek kan gaan na Google eerste. 1218 00:56:31,930 --> 00:56:34,530 Ek gaan om te gaan in Google-instellings, 1219 00:56:34,530 --> 00:56:40,660 want ek wil afskakel iets genoem onmiddellik resultate. 1220 00:56:40,660 --> 00:56:43,580 >> So jy dalk opgemerk het in Google hierdie days-- laat my terug te gaan 1221 00:56:43,580 --> 00:56:44,850 en draai dit op. 1222 00:56:44,850 --> 00:56:47,900 So as ek begin soek vir "katte" soos hierdie, 1223 00:56:47,900 --> 00:56:50,120 agterkom dat nie alleen self doen nie Ek kry outomaties voltooi het 1224 00:56:50,120 --> 00:56:54,520 top, almal van 'n skielike, die bladsy self lyk redelik vinnig verander so goed, 1225 00:56:54,520 --> 00:56:58,750 en dit is Google gebruik van 'n taal JavaScript genoem probeer om behulpsaam te wees. 1226 00:56:58,750 --> 00:57:01,540 Maar helaas, dit soort van rommel op ons bespreking 1227 00:57:01,540 --> 00:57:04,010 van wat eintlik gebeur onder die enjinkap hier. 1228 00:57:04,010 --> 00:57:09,070 So ek net soort van vinnig afdraai onmiddellik resultate. 1229 00:57:09,070 --> 00:57:11,510 En ek gaan klik op Save. 1230 00:57:11,510 --> 00:57:13,930 En nou gaan ek maak wat diagnostiese nutsbalk dat ek 1231 00:57:13,930 --> 00:57:16,150 hou opening onder die blad Netwerk. 1232 00:57:16,150 --> 00:57:17,720 So laat ons dit doen. 1233 00:57:17,720 --> 00:57:21,960 Laat me-- whoops-- blaai dit neer 'n bietjie. 1234 00:57:21,960 --> 00:57:24,410 En laat ek soek vir "katte." 1235 00:57:24,410 --> 00:57:26,790 >> En nou notice-- eintlik, dit is 'n goeie geleentheid 1236 00:57:26,790 --> 00:57:28,840 om te bespreek vir 'n oomblik. 1237 00:57:28,840 --> 00:57:32,460 Let op die oomblik het ek type-- dit te stop. 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 die oomblik het ek tik die letter C, kyk na die onderkant van die skerm. 1241 00:57:40,870 --> 00:57:48,600 A- T S. Wat beteken die onderkant van hierdie skerm, my blad Netwerk, 1242 00:57:48,600 --> 00:57:53,320 raai gebeur elke keer dat ek 'n brief te tik? 1243 00:57:53,320 --> 00:57:57,700 Ongelukkig het die padda is baie steurende vandag of die Shamrock 1244 00:57:57,700 --> 00:58:00,339 of wat ook al hy is. 1245 00:58:00,339 --> 00:58:01,880 Wat gebeur elke keer as ek getik? 1246 00:58:01,880 --> 00:58:04,230 En laat my duidelik dat die buffer en tik dit weer. 1247 00:58:04,230 --> 00:58:06,580 So-- Oeps. 1248 00:58:06,580 --> 00:58:13,280 Elke keer as ek tik 'n brief, C- A- T-- sodat 'n nuwe ry hou natuurlik verskyn. 1249 00:58:13,280 --> 00:58:16,530 Wat beteken elk van die rye verteenwoordig, op grond van wat ons gesien het en bespreek 1250 00:58:16,530 --> 00:58:17,339 so vêr? 1251 00:58:17,339 --> 00:58:18,130 Publiek: N soektog? 1252 00:58:18,130 --> 00:58:21,770 David J. MALAN: 'n search, of meer generies, 'n HTTP-versoek 1253 00:58:21,770 --> 00:58:23,125 uit my leser te bediener. 1254 00:58:23,125 --> 00:58:29,090 Wel, waarom word my leser maak 'n HTTP versoek elke keer as ek tik 'n brief? 1255 00:58:29,090 --> 00:58:30,502 >> Gehoor: [onhoorbaar] 1256 00:58:30,502 --> 00:58:33,210 David J. MALAN: Ja, dit gee My nou al motor-volledige uitslae. 1257 00:58:33,210 --> 00:58:35,190 Soos, waar hierdie doen resultate vandaan? 1258 00:58:35,190 --> 00:58:38,120 Wel, elke keer as ek tik 'n brief, Google stuur meer 1259 00:58:38,120 --> 00:58:40,460 en meer en meer van die woord wat ek tik. 1260 00:58:40,460 --> 00:58:41,040 Hoekom? 1261 00:58:41,040 --> 00:58:44,540 Want hulle wil my 'n beter en beter, beter voorstel, 1262 00:58:44,540 --> 00:58:48,880 'n lys van voorstelle, vir watter antwoord Ek probeer om werklik voltooi. 1263 00:58:48,880 --> 00:58:53,030 So dit is om letterlik elke sê karakter wat jy tik in Google 1264 00:58:53,030 --> 00:58:56,900 gestuur word, wat uiteindelik in grootmaat, maar ook soms 'n 1265 00:58:56,900 --> 00:59:00,620 op 'n tyd om te implementeer hierdie motor-volledige funksies toe 1266 00:59:00,620 --> 00:59:03,000 die data is, natuurlik, op die web. 1267 00:59:03,000 --> 00:59:08,780 >> Nou, laat ons 'n blik op wat eintlik gebeur wanneer ek op Google Search. 1268 00:59:08,780 --> 00:59:10,420 En dan sal ons dit self te benut. 1269 00:59:10,420 --> 00:59:15,320 So as ek blaai nou na die baie eerste versoek dat net gebeur. 1270 00:59:15,320 --> 00:59:17,130 Let op die volgende. 1271 00:59:17,130 --> 00:59:25,550 Dit is gestuur na 'n taamlike lang URL-- https://www.google.com/search? 1272 00:59:25,550 --> 00:59:27,100 en dan 'n hele klomp van die dinge. 1273 00:59:27,100 --> 00:59:29,620 Kom ons kyk na hierdie eintlik in die blad leser self. 1274 00:59:29,620 --> 00:59:31,310 Kom ons ontslae te raak van die nutsbalk hier. 1275 00:59:31,310 --> 00:59:33,140 Hier is die bladsy van die resultate. 1276 00:59:33,140 --> 00:59:34,790 En kennis hier is die URL. 1277 00:59:34,790 --> 00:59:37,430 Nou, kan jy waarskynlik dink wat gaan aan hier in deel. 1278 00:59:37,430 --> 00:59:39,090 So in die eerste plek, 'n definisie. 1279 00:59:39,090 --> 00:59:42,570 Dit is blykbaar die bestemming waar die vorm ingedien word. 1280 00:59:42,570 --> 00:59:44,910 So toe ek getik in die woorde "katte" en druk Enter, 1281 00:59:44,910 --> 00:59:48,460 blykbaar Google gestuur my teks invoer om hierdie URL 1282 00:59:48,460 --> 00:59:50,770 wat ek uitgelig daar, streep soek. 1283 00:59:50,770 --> 00:59:56,530 Turns out, in 'n URL, iets wat gebeur nadat 'n vraagteken is, 1284 00:59:56,530 --> 01:00:01,270 as ons hou die woorde: 'n sleutel-waarde pair wat getik in die vorm of een of ander manier 1285 01:00:01,270 --> 01:00:04,500 oorgedra vanaf die leser om die bediener. 1286 01:00:04,500 --> 01:00:07,180 >> So 'n tyd wat jy tik insette in 'n vorm op die web 1287 01:00:07,180 --> 01:00:10,000 en dit is gestuur soos ons bespreek, via 'n get, 1288 01:00:10,000 --> 01:00:12,400 een van hierdie virtuele koeverte, die inhoud 1289 01:00:12,400 --> 01:00:15,510 van daardie envelope-- ja, hou om fisies gestop 1290 01:00:15,510 --> 01:00:19,010 in die koevert in die klas vandag, maar tegnologies 1291 01:00:19,010 --> 01:00:21,110 dit is eintlik sit in die URL. 1292 01:00:21,110 --> 01:00:22,940 So in werklikheid, laat my sif deur hierdie. 1293 01:00:22,940 --> 01:00:25,010 Waar sien jy die gebruiker se toevoer? 1294 01:00:25,010 --> 01:00:27,490 Waar sien jy iets dat ek myself getik hier? 1295 01:00:27,490 --> 01:00:32,100 1296 01:00:32,100 --> 01:00:33,491 Ja, so "katte." 1297 01:00:33,491 --> 01:00:33,990 Reg? 1298 01:00:33,990 --> 01:00:36,380 So laat ek dit distilleer in iets eenvoudiger. 1299 01:00:36,380 --> 01:00:39,917 Ek gaan alles skrap oor hierdie URL wat ek nie verstaan ​​nie, 1300 01:00:39,917 --> 01:00:42,250 en Ek gaan net om te gaan dit as this-- / soek? q = katte. 1301 01:00:42,250 --> 01:00:45,640 1302 01:00:45,640 --> 01:00:47,890 Ons sal sien waar Q kom uit in 'n oomblik, 1303 01:00:47,890 --> 01:00:51,220 maar wat voel soos die minimum hoeveelheid inligting wat ek verskaf. 1304 01:00:51,220 --> 01:00:53,050 En nou gaan ek druk Enter. 1305 01:00:53,050 --> 01:00:55,520 En sien dit nog steeds werk. 1306 01:00:55,520 --> 01:00:57,950 Ons kry nog steeds terug 'n hele klomp van die katte. 1307 01:00:57,950 --> 01:01:00,340 So Google is liefhebber as hierdie deesdae. 1308 01:01:00,340 --> 01:01:01,934 Dis 2016, nie 1999. 1309 01:01:01,934 --> 01:01:04,600 Daar is dus ander dinge wat my leser stuur na die bediener. 1310 01:01:04,600 --> 01:01:07,100 Maar dit is minimaal al wat nodig is. 1311 01:01:07,100 --> 01:01:08,380 >> So wat gaan aan? 1312 01:01:08,380 --> 01:01:14,320 Wel, laat my gaan voort en gaan Terug na Cloud9 en laat my gaan voort 1313 01:01:14,320 --> 01:01:15,620 en vroeër sluit my oortjies. 1314 01:01:15,620 --> 01:01:18,230 En ek sal dit op my besit net vir 'n oomblik. 1315 01:01:18,230 --> 01:01:20,730 Ek gaan om voort te gaan en die skep van nuwe lêer. 1316 01:01:20,730 --> 01:01:23,739 En ek gaan om dit te verlos as google.html. 1317 01:01:23,739 --> 01:01:26,280 En ek gaan baie quickly-- Ek gaan om te steel, eintlik, 1318 01:01:26,280 --> 01:01:28,510 sommige van hierdie teks net om tyd te bespaar. 1319 01:01:28,510 --> 01:01:30,610 Ek gaan hierdie plak hier. 1320 01:01:30,610 --> 01:01:33,850 Ek gaan nie te pla met enige stilering hierdie tyd. 1321 01:01:33,850 --> 01:01:38,340 Ons gaan hierdie skakel "My Google." 1322 01:01:38,340 --> 01:01:41,230 En ek gaan om ontslae te raak kry van alles in die liggaam. 1323 01:01:41,230 --> 01:01:42,740 En ek gaan die volgende te doen. 1324 01:01:42,740 --> 01:01:45,690 Laat my in zoom. 1325 01:01:45,690 --> 01:01:50,620 Vorm action-- en as ek kortliks genoem earlier-- whoops-- as ek kortliks 1326 01:01:50,620 --> 01:01:54,130 vroeër genoem, die optrede van 'n vorm is waar jy die data te stuur na. 1327 01:01:54,130 --> 01:01:56,620 So google.com/search. 1328 01:01:56,620 --> 01:01:59,390 En die metode wat ek wil gebruik kan een van twee dinge. 1329 01:01:59,390 --> 01:02:02,870 Dit kan óf "te kry," as ons hou bespreek, of dit kan wees "post." 1330 01:02:02,870 --> 01:02:05,340 Vir nou, die fundamentele verskil is, as jy gebruik "kry," 1331 01:02:05,340 --> 01:02:09,590 al die inligting wat die gebruiker verskaf kry gestuur in die URL. 1332 01:02:09,590 --> 01:02:13,530 >> Dit is ideaal vir dinge soos soek enjins en 'n paar ander programme, 1333 01:02:13,530 --> 01:02:17,080 maar in watter omstandighede sou jy nie wil hê om in te vul 'n vorm 1334 01:02:17,080 --> 01:02:21,620 en het die inligting uiteindelik die URL, soos in jou blaaier se adresbalk? 1335 01:02:21,620 --> 01:02:25,470 1336 01:02:25,470 --> 01:02:26,605 Watter soort vorme doen you-- 1337 01:02:26,605 --> 01:02:27,480 Gehoor: [onhoorbaar] 1338 01:02:27,480 --> 01:02:28,450 David J. MALAN: Ja, soos wat? 1339 01:02:28,450 --> 01:02:29,270 Publiek: wagwoorde. 1340 01:02:29,270 --> 01:02:31,936 David J. MALAN: Ja, so jy inteken in te Facebook of 'n webwerf. 1341 01:02:31,936 --> 01:02:34,395 Dit is die gebruiker se toevoer van 'n vorm, 'n tekskassie, 1342 01:02:34,395 --> 01:02:37,020 maar jy sal waarskynlik wil dit nie vertoon in URL die leser se. 1343 01:02:37,020 --> 01:02:38,121 Hoekom? 1344 01:02:38,121 --> 01:02:40,870 Ek bedoel, miskien is daar is 'n paar implikasies sekuriteit op die netwerk, 1345 01:02:40,870 --> 01:02:44,830 maar more-- hou, meer eenvoudig, wat as jou kamermaat, jou beduidende ander, 1346 01:02:44,830 --> 01:02:47,710 jou kinders, jou gade lyk deur die leser geskiedenis? 1347 01:02:47,710 --> 01:02:50,762 Daar is jou wagwoord reg daar in die geskiedenis van die leser. 1348 01:02:50,762 --> 01:02:52,220 Dit voel nie soos 'n goeie ontwerp. 1349 01:02:52,220 --> 01:02:54,500 Of selfs meer tegnies, veronderstel jy probeer 1350 01:02:54,500 --> 01:02:59,180 om 'n foto te Flickr laai of Facebook of wherever-- 1351 01:02:59,180 --> 01:03:03,010 dit is die gebruiker se toevoer, selfs al dit is 'n bietjie meer interesting-- hoe 1352 01:03:03,010 --> 01:03:05,530 ek gedrang 'n beeld in die URL bar? 1353 01:03:05,530 --> 01:03:06,730 Jy kan soort van soort nie. 1354 01:03:06,730 --> 01:03:07,396 Jy soort kan. 1355 01:03:07,396 --> 01:03:10,210 Maar, regtig, ek is hard-pressed om te dink dat doen. 1356 01:03:10,210 --> 01:03:13,470 So ek moet 'n ander metode vir oplaai van foto's na 'n webwerf, 1357 01:03:13,470 --> 01:03:15,657 en dat ander metode staan ​​bekend as "post." 1358 01:03:15,657 --> 01:03:18,740 Maar vir nou, sal ons net praat oor "Kry," wat is die eenvoudiger van die twee. 1359 01:03:18,740 --> 01:03:21,100 Dit plaas net al die toevoer van die gebruiker in die URL. 1360 01:03:21,100 --> 01:03:22,830 >> So hier is die vorm wat ek skep. 1361 01:03:22,830 --> 01:03:24,070 Ek wil 'n bydrae. 1362 01:03:24,070 --> 01:03:24,820 En weet jy wat? 1363 01:03:24,820 --> 01:03:26,111 Ek gaan 'n raaiskoot hier neem. 1364 01:03:26,111 --> 01:03:31,600 Ek gaan onthou my insette "Q" vir "navraag." 1365 01:03:31,600 --> 01:03:34,970 En ek dink dit is een van die oorspronklike ontwerpe, miskien, vanaf 1999. 1366 01:03:34,970 --> 01:03:39,560 En dan is die tipe van hierdie insette is net gaan om te wees "teks." 1367 01:03:39,560 --> 01:03:43,040 En dan gaan ek na 'n ander insette het dit beteken 'n naam nie nodig, want ons sal gou 1368 01:03:43,040 --> 01:03:45,120 sien, die tipe wat is "in te dien." 1369 01:03:45,120 --> 01:03:47,070 En dit gaan Gee my 'n spesiale knoppie. 1370 01:03:47,070 --> 01:03:48,320 En dit is dit. 1371 01:03:48,320 --> 01:03:50,790 >> So laat ek gaan voort en behalwe hierdie lêer. 1372 01:03:50,790 --> 01:03:54,910 Ek gaan terug na my leser en gaan na google.html. 1373 01:03:54,910 --> 01:03:56,140 Tik. 1374 01:03:56,140 --> 01:03:59,680 En dit is soort van yl om die minste te sê. 1375 01:03:59,680 --> 01:04:03,110 Maar laat my gaan voort en soek vir "katte." 1376 01:04:03,110 --> 01:04:06,510 En sien ek is op die oomblik op hierdie Cloud9 URL. 1377 01:04:06,510 --> 01:04:09,240 Maar die oomblik toe ek op hierdie, waar jy hoop ek sal beland? 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 So laat ons kliek Stuur. 1381 01:04:12,740 --> 01:04:15,200 En inderdaad Ek het weer in werking gestel Google. 1382 01:04:15,200 --> 01:04:15,700 Reg? 1383 01:04:15,700 --> 01:04:16,480 Dit is makliker. 1384 01:04:16,480 --> 01:04:17,120 Dit is ligter. 1385 01:04:17,120 --> 01:04:20,350 Ek bedoel, my kode is duidelik beter as s'n, ​​uit die gemors wat ons gesien het vroeër. 1386 01:04:20,350 --> 01:04:21,100 En weet jy wat? 1387 01:04:21,100 --> 01:04:22,610 Ek gaan hierdie kikker 'n bietjie. 1388 01:04:22,610 --> 01:04:23,860 Ek het dit nie vroeër noem. 1389 01:04:23,860 --> 01:04:27,860 Daar is etikette soos H1, vir Heading 1, die belangrikste opskrif in 'n bladsy. 1390 01:04:27,860 --> 01:04:30,570 "My Google," ek sal dit noem. 1391 01:04:30,570 --> 01:04:31,940 Laat my herlaai. 1392 01:04:31,940 --> 01:04:33,772 Dit is op soek na 'n bietjie beter reeds. 1393 01:04:33,772 --> 01:04:34,980 En eintlik, jy weet wat? 1394 01:04:34,980 --> 01:04:36,430 Ek het already-- ek gelieg. 1395 01:04:36,430 --> 01:04:40,200 Ek het gesê ek is nie van plan om hierdie styl, maar ek gaan hierdie styl soos tevore. 1396 01:04:40,200 --> 01:04:46,860 En my liggaam gaan wees, kom ons sê, teks-align sentrum. 1397 01:04:46,860 --> 01:04:48,800 Dit is op soek na meer soos Google reeds. 1398 01:04:48,800 --> 01:04:51,090 >> Ek het 'n reëlbreuk, al is, vir daardie Submit knoppie. 1399 01:04:51,090 --> 01:04:52,798 En dit blyk dat jy kan paragrawe gebruik, 1400 01:04:52,798 --> 01:04:57,320 of jy kan meer letterlik net sê, Gee my 'n lynbreuk here-- die br tag. 1401 01:04:57,320 --> 01:04:59,319 En as ek dit laai, nou gaan dit daar. 1402 01:04:59,319 --> 01:05:01,610 Dit is 'n bietjie lelik, so ek veelvuldige lyn breek kon doen, 1403 01:05:01,610 --> 01:05:03,310 maar laat ons nie hier te gulsig te kry. 1404 01:05:03,310 --> 01:05:06,430 So nou kom ons kyk of dit werk vir "honde." 1405 01:05:06,430 --> 01:05:08,640 Dit blyk te werk vir "honde," sowel. 1406 01:05:08,640 --> 01:05:10,780 So, wat is die dwingende afhaal hier? 1407 01:05:10,780 --> 01:05:13,600 One-- was nie 'n groot sprong na stel 'n paar etikette, 1408 01:05:13,600 --> 01:05:15,370 soos die vorm merker in die insette tag. 1409 01:05:15,370 --> 01:05:17,120 Maar meer fundamenteel is, alles wat ons doen 1410 01:05:17,120 --> 01:05:20,610 is gebruik te maak van ons begrip van HTTP en die feit 1411 01:05:20,610 --> 01:05:24,900 dat vorme uiteindelik verander Wat is in die URL van die leser, 1412 01:05:24,900 --> 01:05:28,540 en so, Daarom kan ons meganies insette lewer om 'n bediener 1413 01:05:28,540 --> 01:05:33,600 deur 'n HTML-vorm en die wete dat die bediener verstaan ​​HTTP, 1414 01:05:33,600 --> 01:05:36,890 net soos ons liggaam verstaan, soos, skud my hand aanneem, sodat dieselfde protokol, 1415 01:05:36,890 --> 01:05:40,920 en so kry ons terug die reaksie dat ons uiteindelik verwag. 1416 01:05:40,920 --> 01:05:44,050 >> So kom ons probeer om een ​​te doen laaste ding wat nou met selfoon, 1417 01:05:44,050 --> 01:05:47,052 en Ek sal make-- Ek sal voeg hierdie kode om die skyfies. 1418 01:05:47,052 --> 01:05:49,760 So as jy wil geknoei, jy kan beslis neem dit van daar af. 1419 01:05:49,760 --> 01:05:51,551 Maar ek gaan om te gaan voort en doen een ding. 1420 01:05:51,551 --> 01:05:54,120 Ek gaan om voort te gaan en oop te stel my indeks page-- 1421 01:05:54,120 --> 01:05:59,030 my hallo bladsy soos voorheen, wat het 'n baie van hierdie faux-Latynse teks, 1422 01:05:59,030 --> 01:06:05,470 of betekenisloos Latynse teks, en has-- dit lyk soos hierdie by hierdie lettergrootte. 1423 01:06:05,470 --> 01:06:07,850 Maar laat my gaan voort en doen dit. 1424 01:06:07,850 --> 01:06:09,300 Ek gaan in Cloud9 te gaan. 1425 01:06:09,300 --> 01:06:10,380 En jy hoef nie hierdie stap doen. 1426 01:06:10,380 --> 01:06:11,420 Ek sal net doen dit self. 1427 01:06:11,420 --> 01:06:12,890 Ek gaan klik Deel. 1428 01:06:12,890 --> 01:06:15,170 En dit is 'n funksie net van Cloud9, waardeur 1429 01:06:15,170 --> 01:06:17,710 Ek kan my omgewing openbaar te maak. 1430 01:06:17,710 --> 01:06:20,240 >> En net ter wille van demonstrasie, laat my dit doen. 1431 01:06:20,240 --> 01:06:22,870 Ek gaan my aansoek openbaar te maak. 1432 01:06:22,870 --> 01:06:25,230 Let daarop dat dit se waarskuwing my, is Ek seker ek wil om dit te doen, 1433 01:06:25,230 --> 01:06:28,438 want dit gaan almal maak in die wêreld, of dit nou hier nou 1434 01:06:28,438 --> 01:06:33,560 of later na die video kyk op die internet kan sien wat ek sien. 1435 01:06:33,560 --> 01:06:34,440 Maar dis OK. 1436 01:06:34,440 --> 01:06:37,870 Ek gaan om te sê "Klaar." 1437 01:06:37,870 --> 01:06:42,080 En laat ek jou aanmoedig, as ek gedoen het hierdie correctly-- laat my toe om eers te toets. 1438 01:06:42,080 --> 01:06:45,590 Gaan voort, as jy nie mind-- in 'n leser op jou rekenaar, 1439 01:06:45,590 --> 01:06:49,900 gaan na hierdie URL, en hopelik jy sal my Latynse teks sien. 1440 01:06:49,900 --> 01:06:52,820 En duidelik te wees, is dit loop nie op my laptop. 1441 01:06:52,820 --> 01:06:53,610 Dit is in die wolk. 1442 01:06:53,610 --> 01:06:58,120 Dit is op Cloud9, letterlik, maar Ek het my werkplek openbaar gemaak 1443 01:06:58,120 --> 01:07:03,450 sodat almal op die internet kan toegang tot my Latyns-tuisblad. 1444 01:07:03,450 --> 01:07:07,209 >> Gaan na dieselfde adres op jou selfoon, as jy kon. 1445 01:07:07,209 --> 01:07:09,750 As dit jy kos, al is, jy kan net kyk oor 'n skouer. 1446 01:07:09,750 --> 01:07:40,688 1447 01:07:40,688 --> 01:07:42,467 Gehoor: [onhoorbaar] 1448 01:07:42,467 --> 01:07:43,550 David J. MALAN: Ek is jammer? 1449 01:07:43,550 --> 01:07:45,390 Gehoor: [onhoorbaar] 1450 01:07:45,390 --> 01:07:47,710 David J. MALAN: Net Latynse woorde. 1451 01:07:47,710 --> 01:07:48,210 Dis al. 1452 01:07:48,210 --> 01:07:49,250 Maar dit is wat jy moet sien. 1453 01:07:49,250 --> 01:07:49,875 >> Gehoor: Ja. 1454 01:07:49,875 --> 01:07:50,790 David J. MALAN: Ja. 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 So kan ek dan jou telefoon vir 'n oomblik? 1458 01:07:53,530 --> 01:07:57,504 So, hopelik, as jy toegang Dit is, moet dit lyk byna onleesbaar. 1459 01:07:57,504 --> 01:07:59,920 Dis still-- Ek bedoel, dis deurmekaar as gevolg van die Latyn. 1460 01:07:59,920 --> 01:08:01,920 Maar dit is ook deurmekaar vir watter ander rede? 1461 01:08:01,920 --> 01:08:03,775 Soos wat welbehaaglik jy hieroor? 1462 01:08:03,775 --> 01:08:04,650 GEHOOR: Dis klein. 1463 01:08:04,650 --> 01:08:06,420 David J. MALAN: Dis super, super klein. 1464 01:08:06,420 --> 01:08:07,920 So, hoe kan ons dit regmaak? 1465 01:08:07,920 --> 01:08:09,730 Dit is super, super klein op Victoria se selfoon 1466 01:08:09,730 --> 01:08:11,400 en, as jy het getrek it up jouself, waarskynlik 1467 01:08:11,400 --> 01:08:14,660 klein op jou selfoon sowel, tensy jy het toeganklikheid instellings aangeskakel. 1468 01:08:14,660 --> 01:08:15,530 Wat is dit? 1469 01:08:15,530 --> 01:08:18,497 Jy kan net knyp en Klik op die, wat is werkbare, 1470 01:08:18,497 --> 01:08:20,330 maar dan moet jy net sien 'n paar woorde op 'n slag. 1471 01:08:20,330 --> 01:08:20,859 So wag 'n minuut. 1472 01:08:20,859 --> 01:08:21,720 Ek weet hoe om dit op te los. 1473 01:08:21,720 --> 01:08:22,219 Reg? 1474 01:08:22,219 --> 01:08:26,130 Ek kon gebruik CSS, en ek kon die verander lettergrootte van 12-punt tot 24-punt. 1475 01:08:26,130 --> 01:08:29,020 Maar die newe-effek van daardie, natuurlik, gaan nou, 1476 01:08:29,020 --> 01:08:32,630 op 'n rekenaar of 'n skootrekenaar, nou die teks is twee keer so groot. 1477 01:08:32,630 --> 01:08:35,810 En so sou dit soort van lekker wees om te onderskei tussen toestelle, 1478 01:08:35,810 --> 01:08:37,840 en dit blyk daar is maniere om dit te doen. 1479 01:08:37,840 --> 01:08:39,590 Daar is 'n hele paar verskillende maniere, in werklikheid, 1480 01:08:39,590 --> 01:08:44,189 waardeur die gebruik van CSS en liefhebber funksies dat ons nie in gaan in groot detail, 1481 01:08:44,189 --> 01:08:46,960 jy kan in wese navraag die leser en sê: 1482 01:08:46,960 --> 01:08:51,550 As jou skerm is kleiner as hierdie baie pixels, gebruik hierdie lettergrootte. 1483 01:08:51,550 --> 01:08:55,180 As jou skerm is groter as hierdie baie pixels, gebruik hierdie ander lettergrootte. 1484 01:08:55,180 --> 01:08:57,080 >> Jy kan selfs liefhebber steeds. 1485 01:08:57,080 --> 01:09:00,140 As jy al ooit besoek 'n webblad wat, op 'n lessenaar, 1486 01:09:00,140 --> 01:09:04,404 het 'n groot spyskaart miskien af ​​na die kant, en dan al die inhoud 1487 01:09:04,404 --> 01:09:07,029 is aan die kant van daardie menu-- dit is soort van 'n gemeenskaplike paradigma. 1488 01:09:07,029 --> 01:09:09,670 Menu aan die linkerkant, inhoud op reg, of andersom. 1489 01:09:09,670 --> 01:09:13,569 Maak nie regtig werk op mobiele wanneer jou skerm is net hierdie baie pixels wyd. 1490 01:09:13,569 --> 01:09:16,233 So meer algemeen op die selfoon is, jou spyskaart sal skielik kry 1491 01:09:16,233 --> 01:09:18,399 duie gestort het, en jy het om te klik op 'n knoppie om dit te sien, 1492 01:09:18,399 --> 01:09:22,404 of die webwerf sal die spyskaart sit bo en sit die inhoud daaronder. 1493 01:09:22,404 --> 01:09:24,779 En jy kan dit te implementeer dinge in verskeie maniere, ook. 1494 01:09:24,779 --> 01:09:28,340 Jy kan jou programmeerders vra, hey, span, enige tyd 1495 01:09:28,340 --> 01:09:34,450 jy sien 'n HTTP-versoek van 'n Android- toestel, 'n Microsoft toestel, 'n Google 1496 01:09:34,450 --> 01:09:39,930 toestel, 'n Apple-toestel, gebruik hierdie lettergrootte en gebruik hierdie kieslys uitleg, 1497 01:09:39,930 --> 01:09:42,670 of anders gebruik hierdie standaard groter uitleg. 1498 01:09:42,670 --> 01:09:45,410 >> Nou, met behulp van watter fundamentele tegniek vandag 1499 01:09:45,410 --> 01:09:48,529 kon die ingenieurs gebruik om te weet of dit 1500 01:09:48,529 --> 01:09:53,660 'n iPhone, 'n Android-selfoon, 'n skootrekenaar, 'n lessenaar besoek bediener die maatskappy se? 1501 01:09:53,660 --> 01:09:55,310 Daarin kry hulle daardie inligting? 1502 01:09:55,310 --> 01:09:56,080 >> Publiek: Selected 1503 01:09:56,080 --> 01:09:57,740 >> David J. MALAN: Ja, die HTTP-header. 1504 01:09:57,740 --> 01:10:01,714 Daarop trek al die HTTP-versoek kom van hul kliënte hul bedieners 1505 01:10:01,714 --> 01:10:03,880 sluit, binne daardie virtuele koevert, 'n hele klomp 1506 01:10:03,880 --> 01:10:08,260 van HTTP-hoofde, waarvan een is die leser en die bedryfstelsel 1507 01:10:08,260 --> 01:10:10,290 selfs, as jy omgee om dat die vlak van detail. 1508 01:10:10,290 --> 01:10:13,790 Nou, dit is 'n kriptiese lyk string, maar Daar bestaan ​​sagteware wat jou sal net 1509 01:10:13,790 --> 01:10:18,530 vereenvoudig dat, en jy kan net vra in programmering code-- PHP, Java, C ++, 1510 01:10:18,530 --> 01:10:23,650 whatever-- wat telefoon is this-- Watter toestel is hierdie gebruiker met behulp van? 1511 01:10:23,650 --> 01:10:27,501 En dan kan jy sê, wys hulle hierdie weergawe van die webwerf as dit 'n selfoon. 1512 01:10:27,501 --> 01:10:30,250 Wys hulle hierdie weergawe van die webwerf as dit 'n laptop of desktop. 1513 01:10:30,250 --> 01:10:32,316 Maar jy hoef nie eens bediener-kant kompleksiteit. 1514 01:10:32,316 --> 01:10:33,940 Jy kan selfs die eenvoudigste dinge te doen. 1515 01:10:33,940 --> 01:10:34,815 >> Ek gaan om dit te doen. 1516 01:10:34,815 --> 01:10:38,995 Ek gaan om voort te gaan na my Cloud9 omgewing, 1517 01:10:38,995 --> 01:10:41,370 en ek gaan 'n tag voeg wat jy gesien het in Google voor. 1518 01:10:41,370 --> 01:10:42,770 Dit is bekend as die metatag. 1519 01:10:42,770 --> 01:10:45,520 En ek onthou nog nooit hierdie een, sodat Ek gaan dit hier neer te skryf. 1520 01:10:45,520 --> 01:10:50,552 Meta name = "vertoonvenster" en dan inhoud = "width = breedte toestel, intital 1521 01:10:50,552 --> 01:11:02,060 skaal = 1 "en dit is dit. 1522 01:11:02,060 --> 01:11:06,230 >> So dit kan net so goed wees soos 'n magiese inkantasie. 1523 01:11:06,230 --> 01:11:11,300 Dit is nie al wat duidelik nie, maar dit het iets te doen met die vertoonvenster, 1524 01:11:11,300 --> 01:11:15,070 en die vertoonvenster is net die liggaam van 'n webblad, die reghoekige gebied wat 1525 01:11:15,070 --> 01:11:16,690 definieer die meeste van die bladsy. 1526 01:11:16,690 --> 01:11:19,060 En dit is net te vertel die leser, jy weet wat? 1527 01:11:19,060 --> 01:11:22,589 Maak die wydte van hierdie bladsy effektief gelyk aan die wydte toestel. 1528 01:11:22,589 --> 01:11:25,380 Met ander woorde, moenie aanneem dat jy het soort van 'n onbeperkte ruimte. 1529 01:11:25,380 --> 01:11:29,920 Aanvaar jy net soveel ruimte as die toestel self is groot. 1530 01:11:29,920 --> 01:11:34,454 En so nou, as ek dit herlaai in my leser, sien ek geen verandering. 1531 01:11:34,454 --> 01:11:37,370 Maar as ek dit gedoen het correctly-- en laat ek my fingers-- steek as jy al 1532 01:11:37,370 --> 01:11:42,920 herlaai jou fone, doen jy sien 'n dwingende verandering? 1533 01:11:42,920 --> 01:11:43,620 Ja, is that-- 1534 01:11:43,620 --> 01:11:45,067 >> Gehoor: [onhoorbaar] 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 So waarskynlik meer leesbare nou? 1538 01:11:47,850 --> 01:11:53,070 Nog klein, om eerlik te wees, maar nie so klein as om onbeheerbaar wees. 1539 01:11:53,070 --> 01:11:56,920 En ek kon beslis hierdie oorheers verder met CSS of op die bediener kant, 1540 01:11:56,920 --> 01:12:00,120 maar hoe meer wat jy sien is meer en meer funksies 1541 01:12:00,120 --> 01:12:02,900 bygevoeg om kliënt-kant environments-- 1542 01:12:02,900 --> 01:12:06,530 JavaScript, soos ons sal bespreek môre, CSS, en HTML-- so 1543 01:12:06,530 --> 01:12:09,190 dat al hierdie navrae kan gedoen word op die kliënt 1544 01:12:09,190 --> 01:12:11,910 ten einde die moeite bediener 'n baie minder en nie 1545 01:12:11,910 --> 01:12:14,530 hê om tred te hou met, vir Byvoorbeeld, die konstante aanslag 1546 01:12:14,530 --> 01:12:17,210 van nuwe bedryfstelsel weergawes, nuwe leser weergawes. 1547 01:12:17,210 --> 01:12:20,190 Jy kan net laat die leser vra die toestel, hoe groot is U, 1548 01:12:20,190 --> 01:12:22,890 en dan maak 'n bietjie logiese besluite wat gebaseer is op daardie. 1549 01:12:22,890 --> 01:12:25,140 Maar ons sal sien meer geleenthede vir logiese besluite 1550 01:12:25,140 --> 01:12:27,223 môre in die konteks van 'n programmeertaal. 1551 01:12:27,223 --> 01:12:29,800 1552 01:12:29,800 --> 01:12:32,760 >> So, enige vrae, dan, op web ontwikkeling? 1553 01:12:32,760 --> 01:12:36,130 Vandag is nie web ontwikkeling, per SE, aangesien die meeste alles wat ons gedoen het 1554 01:12:36,130 --> 01:12:38,370 was baie estetiese, as jy wil. 1555 01:12:38,370 --> 01:12:41,750 Daar is geen besluitneming in die kode wat ons geskryf het, 1556 01:12:41,750 --> 01:12:44,990 en so is dit hoekom HTML is 'n opmaak taal, nie 'n programmeertaal. 1557 01:12:44,990 --> 01:12:47,140 Maar môre sal ons neem 'n vinnige blik, uiteindelik, 1558 01:12:47,140 --> 01:12:49,340 op JavaScript, wat 'n werklike ontwikkeling 1559 01:12:49,340 --> 01:12:54,220 taal waarmee ons 'n bietjie meer te doen. 1560 01:12:54,220 --> 01:12:56,800 >> Enige vrae? 1561 01:12:56,800 --> 01:13:00,480 Wel, laat ek stel twee geleenthede opsioneel vir huiswerk. 1562 01:13:00,480 --> 01:13:02,900 Een is-- hierdie Cloud9 rekeninge sal nie verval. 1563 01:13:02,900 --> 01:13:04,669 Jy is welkom om te gebruik hulle geknoei met. 1564 01:13:04,669 --> 01:13:05,960 Dit is die vrye vlak van diens. 1565 01:13:05,960 --> 01:13:08,754 Besef dat, as wanneer die skep van jou werkspasie, jy dit openbaar gemaak, 1566 01:13:08,754 --> 01:13:11,670 wat beteken nie dat enige iemand op die internet kan sien wat jy tik. 1567 01:13:11,670 --> 01:13:15,104 So miskien net oorweeg jouself nie verleentheid 1568 01:13:15,104 --> 01:13:18,020 As jy om jou eerste web bladsy daar buite in die openbaar ongeluk, 1569 01:13:18,020 --> 01:13:20,134 maar niemand gaan weet daar in elk geval sien. 1570 01:13:20,134 --> 01:13:23,760 >> En two-- laat my gooi hierdie URL sowel, 1571 01:13:23,760 --> 01:13:28,250 veral as jy het in vandag 'n bietjie minder gemaklik as ander, 1572 01:13:28,250 --> 01:13:30,430 onseker wat al hierdie dinge beteken. 1573 01:13:30,430 --> 01:13:36,780 Besef dat baie meer van hierdie video, wat beide 'n goeie manier om aan die slaap raak 1574 01:13:36,780 --> 01:13:39,380 en ook om te lag terwyl Sodoende het ook 1575 01:13:39,380 --> 01:13:44,300 'n baie maatschappelijk interessante en sekuriteit-relevante besprekings 1576 01:13:44,300 --> 01:13:47,370 daarop uit John Oliver, hoewel 'n komediant. 1577 01:13:47,370 --> 01:13:55,456 >> Maar as daar geen verdere vrae, dit bring ons by die onthaal. 1578 01:13:55,456 --> 01:13:56,830 So hoekom nie ek draai op die musiek. 1579 01:13:56,830 --> 01:13:58,610 Daar moet drankies en snacks buite. 1580 01:13:58,610 --> 01:14:00,220 Ek is bly om te meng vir so Solank as wat mense wil, 1581 01:14:00,220 --> 01:14:01,600 beantwoord vrae meer een-tot-een. 1582 01:14:01,600 --> 01:14:03,330 Maar, anders, jy is welkom af te neem op enige punt, 1583 01:14:03,330 --> 01:14:05,740 en ons sal julle weer sien môreoggend vir 'n bietjie meer. 1584 01:14:05,740 --> 01:14:07,290 Goed, dankie. 1585 01:14:07,290 --> 01:14:10,428