David J. MALAN: Goed. Ons is terug. So, die doel van hierdie finale sessie is om nog 'n paar konsepte bekend te stel maar ook vir almal 'n kans soort strek jou vingers en eintlik iets te doen 'n bietjie hande-op. Die doel is nie om te draai ons almal in die web-ontwikkelaars op enige manier, maar eintlik net julle 'n voorsmakie van 'n paar te gee van die fundamentele boustene van wat gaan in web ontwikkeling en vandag web ontwikkeling, sodat die statiese kant van things-- geen logika, geen ontwikkeling taal, net statiese inhoud. En dit sal vir ons 'n geleentheid te gee om werklik te sien wat 'n webbediener is, Kyk wat 'n HTML-lêer is, sien wat Dit is HTTP is eintlik bedien word. Maar voordat ons duik in, enige terugwerkende vrae oor wolk rekenaar of sekuriteit of enigiets tussenin? Geen? Goed, goed, kom ons doen dit, net in geval die proses van die ondertekening vir iets neem 'n paar minute. Ons sal jou laat dit doen dit in die agtergrond. Gaan voort, as jy kon, hierdie URL here-- c9.io. Dit is 'n derde party service-- platform as 'n diens, as jy will-- wat gaan om jou te nooi aan te meld vir 'n rekening, en dit gaan aan elkeen van julle gee 'n rekening in die sogenaamde wolk op infrastruktuur iemand anders se, 'n maatskappy genaamd Cloud9. Maar wat is lekker oor hiervoor is dat hulle jou gee 'n benadering van 'n werklike werklike ontwikkeling omgewing, al is dit in die wolk en in 'n webblaaier, en ons sal dit gebruik om werklik eksperimenteer 'n bietjie vandag. En dan voort te gaan en net te navigeer jou pad na die aanmelding proses as jy kon. So gebeur ons om dit te gebruik in die klas Ek leer vir al ons studente, beide op die kampus en af ​​nou, en dit vervang wat histories was anders aflaaibare sagteware. So, wat jy toegang verkry tot is een van die virtuele masjiene, in wese, dat ek vroeër beskryf. So hierdie maatskappy Cloud9 waarskynlik huurgeld van 'n derde party-- inderdaad in hierdie geval, Google-- geheel n klomp van die virtuele masjiene dat hulle een of ander manier kap in die illusie van individuele bedieners dat elkeen van ons het volle beheer oor. Dit is nie heeltemal akkuraat om te sê dat hulle virtuele masjiene, al is, want wat Cloud9 gebruik eintlik is 'n bietjie nuwer tegnologie genoem behouering. En laat ek dié foto gryp hier om hierdie foto te verf. 

'N houer, indien jy onthou die prentjie van vroeër, 'n bietjie ligter gewig as 'n virtuele masjien. Trouens, terwyl verlede tyd het ons gepraat oor daar om 'n bedryfstelsel stelsel en 'n hypervisor en dan gas bedryfstelsel, gas bedryfstelsel, gas bedryfstelsel stelsel, op die top van jou fisiese hardeware, die verskil met hierdie nuwe tegnologie, behouering, is dat hulle almal een of ander manier deel dieselfde bedryfstelsel. Maar hulle het steeds skep die illusie van almal met sy of haar eie eksklusiewe administratiewe regte en lêers op die bediener. Maar daar is minder sagteware in tussen jou en die hardeware. Die gevolg daarvan is, in teorie, 'n hoër prestasie, want jy gebruik of mors minder hulpbronne op daardie sogenaamde skynwerklikmaking laag. So dit staan ​​bekend as behouering van nature by wyse van 'n tegnologie genaamd Docker, wat baie kom tot sy reg. En dit is iets wat ingenieurs by jou maatskappy dalk soort soort begin praat oor gou as hulle nie reeds, al is daar is beslis geen rede om te spring oor enige bandwagons. 

So met wat gesê het, wat jy waarskynlik sien nou is 'n skerm wat 'n bietjie lyk soos volg. OK. En net noem my oor as dit nie. En as so-- Ek sal oor kom as dit nie. Gaan voort en klik dat groot plus 'n werkplek te skep, en jy sal 'n skerm soos hierdie te sien. Jy kan die werkplek te bel noem enigiets wat jy wil vir eers. En net eintlik vir eenvoud, gaan and-- goed, sommige van julle reeds werkruimtes. Noem dit wat jy besigheid want--, Harvard, Donderdag alles wat jy wil. Jy hoef nie 'n beskrywing. Jy kan dit te laat private, tensy jy het reeds 'n klomp van die werkruimtes. As jy gedwing is dit openbaar te maak, dit is goed vir die doel van vandag. Ook hier is een van die upsells. Jy kry een private werkplek deur verstek. Maar as jy wil meer, jy het om te betaal vir meer. Andersins, dit dwing jou om jou werk openbaar te maak. Maar dit is goed, want hulle het ook teiken hierdie by open-source gemeenskappe om mense aan te moedig eintlik saam. 

En die laaste ding wat belangrik is, al is, is, nadat jy 'n naam kies en nadat jy private of openbare kies, Klik HTML5, die groot oranje ikoon tweede van links, en kliek Skep Workspace. En dit sal waarskynlik neem 'n minuut of so, maar jy sal dan 'n omgewing, sodra jy dit doen, wat herinner aan lyk wat ek het op die skerm hier nou. Maar, weer, is dit dalk 'n rukkie neem of meer om na hierdie skerm Sodra jy geklik Skep Workspace. Maar net vlag vir my oor as jy my wil 'n blik op iets of advies te neem. Alles reg. So ek gaan agtergrond dit vir nou. Bel my oor as jy lyk enige tegniese probleme. Maar, weer, kan dit neem 'n bietjie vir daardie oop te maak. En laat ons gaan voort en praat oor wat Dit beteken eintlik om 'n webblad te maak, wat HTML is, en hoe dit alles nou met mekaar verbind as ons begin om werklik te gebruik 'n paar van die tegnologie. So dit blyk dat ek kan gaan op my klein Mac hier, maak 'n eenvoudige program genaamd Text Editor, of op Windows ek kon oop iets genoem Notepad.exe. En ek kon net eenvoudig iets te doen soos this-- "hallo, wêreld." En dan kan ek dit stoor as hello.txt So geen magic daar. Dit het niks te doen met die web ontwikkeling, niks te doen met HTML. Net die skep van 'n eenvoudige teks lêer. Maar dit blyk dat 'n web bladsy is letterlik net dat. Dit is 'n eenvoudige teks lêer met teks dat jy kan tik op die sleutelbord, maar dit tipies maar nie altyd eindig in nie txt maar Html of htm. En jy hoef nie net tik woorde in die lêer. Jy het eintlik om dinge genoem gebruik tags of, meer algemeen, iets genoem opmaak taal. 

So ek gaan baie vinnig tik en dan die volgende te verduidelik. Ek gaan eerste tik hierdie, wat sê: hey, leser, hier kom 'n webblad geskryf in HTML. En hierdie twee dinge saam sê, hey, leser, die volgende is inderdaad HTML. Hey, die leser, hier kom die hoof of die top van my bladsy. Hey, die leser, binnekant van die top van my bladsy, sit 'n titel wat, "hallo, wêreld. " Hey, die leser, nadat die hoof van my bladsy, hier kom die liggaam van my bladsy. En, hey, leser, die liggaam van my bladsy moet ook sê, "hello world." So, wat is die belangrikste besonderhede hier? Dit is wat oor die algemeen bekend as 'n dokument tipe verklaring, en, eerlik, dit is 'n bietjie moeilik om hierdie memoriseer by die eerste. Jy moet net soort kopieer-plak dit. Dit is die formele manier om te sê, hey, leser, Ek gebruik HTML-weergawe 5 wat uitgekom ietwat onlangs. Dit is 'n magiese inkantasie dat sommige mense met 'n swak sin vir ontwerp besluit op die om te sit top van die lêer. Selfs al is dit 'n bietjie arcane, dis al dit means-- hey, leser, hier kom met weergawe 5 van HTML. 

Die res van hierdie is met ons vir 'n geruime tyd nou, histories, maar dit is in beweging, en dit is waarskynlik 'n bietjie makliker. Let 'n paar eienskappe van wat ek uitgelig. Daar is hierdie dinge met skuins brackets-- links hakkie en die reg bracket. En let op die simmetrie hier. En deur simmetrie, ek bedoel, net soos ek hierdie begin tag hier of 'n oop tag as jy wil, hier af het ek 'n naby tag of 'n einde tag dit is verskillende slegs vir sover dit hierdie streep aan die begin van die woord HTML. En jy kan dink dit as ek was terloops stel voor, hey, leser, hier kom 'n paar HTML. En omgekeerd, hey, leser, dit is dit vir die HTML-- begin en einde. 

Intussen hey, leser, hier kom die hoof van my bladsy. Hey, die leser, dit is dit vir die kop. Hey, die leser, hier is die liggaam van my bladsy. Hey, die leser, dit is dit vir die liggaam. En binnekant van dit is 'n paar arbitrêre teks vir nou. En binnekant van die kop, intussen, is 'n paar arbitrêre maar gemerk, om so te praat, teks wat sê, die titel van my bladsy sal wees "hallo, wêreld." Nou, vir nou, kan jy aanvaar dat bruisers het only-- of, eerder, webblaaie het slegs twee parts-- die kop en die liggaam. En die hoof is oor die algemeen net soos die menubalk, die dinge eintlik net by die heel boonste. En die liggaam is die ingewande van die bladsy, alles in daardie groot reghoek wat vul die skerm. So ek gaan om voort te gaan en dit te doen. Ek gaan om voort te gaan en Klik Save, lêer te stoor. En ek gaan om te spaar dit as hello.html, en ek is net gaan sit dit op my lessenaar. En ek gaan om te gaan voort en klik op Save. En notice-- my Mac by Minstens is skree op my. Is jy seker jy wil dit doen? En ek gaan om te sê, ja, gebruik HTML. Ek weet beter in hierdie geval. En nou gaan ek na my lessenaar waar ek hierdie lêer skielik. En ek gaan dubbel-kliek dit. En jy sal agterkom dat, deur standaard, Chrome oopgemaak. Dit is omdat dit is my standaard leser. En dit net sê, "Hallo, wêreld." Maar dit sê "hallo, wêreld "op twee plekke. Let links bo. Baie moeilik om te mis nie. Dit is 'n groot en sterk. En waar anders lyk dit om te sê, "Hallo, wêreld"? 

Gehoor: Die blad. 

David J. MALAN: Ja, die blad self. So wanneer ek sê die hoof van die bladsy is alles tot top-- en inderdaad is dit die titel. Dis net in die blad hier. En ek kan hierdie blad trek uit sodat dit nie te verwar. Dit is net 'n enkele blad nou, en inderdaad sien ons "hallo, wêreld" hier en "hallo, wêreld" hier neer. So baie simpel. Maar dit is ook redelik eenvoudig. En eintlik, ek ingezoomd. Ek kan die lettergrootte net verander om te vergroot vir toeganklikheid. Maar laat ons nou iets te doen 'n bietjie meer interessant. 

Ek gaan go-- Oeps, laat my kom terug na my tekslêer. Ek is terug te gaan na my tekslêer, en ek gaan om dit te verander en sê "Hallo, Disney World." Red. En gaan terug na my leser en kliek Reload. En nou, natuurlik, dit sê "Disney World." En ek gaan kunsmatig vergroot in net sodat dit makliker is om te sien. So nou, helaas, ek soort wil aan- Eintlik is dit 'n Mac funksie. Ek wil om te klik op Disney World en gaan iewers soos disney.com, maar dit beteken nie werk nie. So 'n basiese beginsel van die web is hiperskakels, skakels wat elders gaan. So, hoe doen ek dit? Wel, ek kan net sê, "Hallo, http://www.disney.com." Slaan hierdie. Reload. Maar dit ook nie klikbare. En wat is lekker hier, selfs al dit is nog nie funksionele, is dat dit blyk dat die leser nie letterlik net wat Ek sê dit te doen. So as ek tik net 'n URL soos hierdie, dit is net gaan om te wys my die URL. Ek nodig het om etikette of opmaak gebruik taal om werklik vertel die leser om nog meer te doen. So ek gaan om voort te gaan en verwyder dit vir 'n oomblik. En ek gaan om te sê, hey, leser, begin 'n anker hier, 'n skakel om so te praat. En die hiper-verwysing, die bestemming van daardie anker, moet hierdie URL wees. En let op my aanhalings. Ek kon aanhalingstekens gebruik ook maar jy het om konsekwent te wees, en Ek sal oor die algemeen net gebruik dubbele aanhalingstekens om dit eenvoudig te hou. Let Ek gaan die etiket sluit. En dan hier gaan ek om te sê, "Disney World." En nou het ek moet 'n paar symmetry-- oop bracket, / a, gesluit bracket. 

So, wat het ek voorgestel? Ons het 'n paar etikette reeds. HTML, Hoof, titel, Body, is almal etikette, so te sê, met 'n oop en geslote eweknieë. Maar kennisgewing, hierdie is 'n soort van fundamenteel anders. Dit is wat ons sal noem in HTML 'n kenmerk. En 'n kenmerk is net 'n sleutel-waarde paar. Dit is 'n algemene ding in rekenaar science-- sleutel-waarde paar. Dit is soort van die instrument van die handel. 'N Belangrike en 'n waarde. 'N Woord en dan 'n paar ander woord of woorde. En in hierdie geval, die sleutel is href, en die waarde is wat vol URL. En wat 'n kenmerk doen, is dit beïnvloed die gedrag van 'n tag. En in hierdie geval, moet ons beïnvloed die gedrag van die anker tag, want ons moet anker hierdie skakel na iewers. En hoe jy dit doen is deur middel van die eienskap. 

So ek gaan om voort te gaan en nou stoor die lêer. Gaan terug na my leser en herlaai. En siedaar, ons het nou die begin van 'n wettige webblad. Super-eenvoudige, maar as ek hover oor this-- kennisgewing in die onderste linkerhoek, dit is super-klein. Maar jy doen sien www.disney.com. En as ek klik nie, wel hierdie gardes my trek na disney.com. Nou, die snaakse ding hier is dat dit nie die best-- die mees bemarkbare URL, maar dit is goed, want hierdie lêer nie doen bestaan ​​op die World Wide Web. Dit bestaan ​​as 'n plaaslike lêer in glo my Gebruikers directory-- / jharvard-- Want Johannes Harvard-- / lessenaar. Maar dit het 'n URL. Dit gebeur net plaaslike te wees. Ongelukkig kan niemand van julle te besoek hierdie, want as jy hierdie URL tik, jy word vertel die leser, kyk vir 'n lêer met die naam hello.html op jou hardeskyf. En, natuurlik, tensy jy het is met die hand volgende saam, dit gaan nie daar bestaan. 

So is dit goed. Ons moet nog 'n manier, uiteindelik, gebruik hierdie prent kry in die web, maar laat ons terg uitmekaar n paar implikasies sekuriteit van wat ons net sien en bind dit terug na die vorige bespreking van vanoggend. Dit blyk dat, indien 'n leser letterlik net doen wat Ek sê dit te doen, en dit lyk om die saak wat 'n anker tag is nie beïnvloed deur die waarde van hierdie kenmerk genaamd href maar dit gee hierdie teks, sou dit lyk om te impliseer dat ek die URL kon sit in beide plekke en dan herlaai en nou sien die URL en gaan na die URL. Let op, as ek hover oor die onderste linkerkantse, Ek is inderdaad nog gaan disney.com. 

So as jy ooit was phished-- P-H-ek-S-H-E-D-- met een van daardie valse e-pos uit soos PayPal jou bank, jy waarskynlik gekry skakels binne van die e-pos wat jy lees dat vertel jy kliek hier om te bevestig gaan jou wagwoord of bevestig jou geboortedatum of sosiale of iets sosiaal ingenieurswese jy openbaar inligting. Wel, ek kon soort neem voordeel van hierdie, kan ek nie? Ek kon iets sê soos, www.paypal.com. En in plaas van disney.com, ek kon gaan, soos, badguy.com. Reload. En hoe maklik is dit om die bos lei, veral 'n nie-tegniese leser of 'n vlugtig lees leser as om te klik 'n skakel soos hierdie, wat as ek klik it-- Ek het eintlik nie wil badguy.com gaan. Ek weet nie wat is eintlik daar. So paypal.com, kennisgewing, is wat dit sê dit gaan, Maar natuurlik, as ek afkyk super-lae, dit is 'n bietjie vaag, maar dit sê badguy.com. Dit is die enigste vertel nou dat ek gaan die verkeerde plek. Toe ek vroeër gesê het dat banke moet regtig nie aan te moedig of te lei gebruikers in te klik links, hierdie is net een manifestasie daarvan. En dis so eenvoudig nie. Jy is nou 'n teenstander as jy so iets doen en probeer om 'n gebruiker te mislei in die besoek van jou webwerf. Maar vir nou, sal ons hou dinge mooi en skoon. Ons gaan om voort te gaan en rewind hierdie veranderinge. Herlaai die bladsy. En ek gaan terug na disney.com. 

Kom ons kyk of ons nie kan terg hierdie uitmekaar 'n bietjie meer. So "hallo, Disney World." Ek gaan hier af sê. Miskien gaan ek 'n paar plek te maak. "Ons hoop jy geniet jou verblyf!" Red. Reload. Dit is nie rea-- dis nie wat ek bedoel, reg? Ek bedoel, as ek die behandeling van my teks lêer soos 'n woordverwerker, Wat het jy hoop sal hier gebeur? Ja, ek voel asof daar moet 'n lynbreuk hier wees, sodat dit voel karretjie in een of ander manier. Maar dit is eintlik doelbewuste, want net soos voorheen, die leser word slegs gaan doen wat jy dit vertel om te doen. Ek het nie gesê dit om lyne te breek. Ek het nie gesê dit om af te beweeg, selfs al is, intuïtief, ek voel soos ek gedoen het. So dit blyk ons ​​nodig het 'n bietjie meer opmaak, en ek gaan dit op te los soos volg. Ek gaan dit eers voorwoord hallo met wat 'n lid tag genoem. En dan gaan ek voort te gaan en draai hierdie ander sin in 'n ander lid tag, selfs al hulle is super-kort paragrawe. Nou gaan ek om te spaar. Reload. En nou het ons dit ruimte, en ons soort het die semantiek van twee afsonderlike paragrawe. 

Dit is alles goed en wel, maar dit sou lekker wees om 'n beeld te voeg tot hierdie bladsy, so ek gaan om te gaan kyk vir Mickey Mouse op Google Images. En net vir die pret, ek is gaan hierdie beeld te gryp. Ek gaan nou voort te gaan en gryp die URL van die beeld, alhoewel daar verskillende maniere om dit te doen. Vir nou, is ek net gaan die URL kopieer. Ek gaan om terug te gaan na my teks lêer, en ek gaan hier sê, img src = quote unquote dat URL, super-lang. En dan is die idee van 'n Beeld is 'n bietjie anders. Daar is regtig geen idee van beginspan 'n beeld en eindig 'n beeld, soos 'n begin te merk 'n einde tag. Dit voel so 'n bietjie vreemd om my semanties om dit te doen, 'n close-beeld tag het. Dit is nie korrek nie. Dit is perfek korrek, en dit is aangemoedig, maar daar is snelskrifnotasie. Ek kan soort gelyktydig oop en toe dieselfde tag, en dit sal die leser gelukkig te maak. So dit is net 'n bietjie meer bondige vir dinge wat konseptueel regtig nie sin maak om te begin en einde. Hulle is net daar, of hulle is nie. 

So ek gaan hierdie red en gaan terug om my "hallo, wêreld" bladsy en herlaai. En dit is 'n bietjie buite beheer, want dit beeld is eintlik 'n bietjie groot, maar dit is OK. Ek kon dit verander in 'n program. Of jy weet wat. Net om te wys, is ek gaan eintlik sê dat die wydte van so iets slegs 200 pixels, 200 punte. Laat my gaan voort en red en herlaai, en nou die bladsy lyk 'n bietjie meer redelik is. Maar let op die patroon. Wel, ek het soort van onderrig julle almal van HTML in 'n sekere sin, ten minste konseptueel, want al HTML is is hierdie tags-- oop etikette, gesluit etikette, en eienskappe wat hul gedrag te verander. En, glo, elke tag kan nul of een het of twee of meer spesifieke eienskappe, elk van wat doen iets 'n bietjie anders. Nou, hoe weet jy wat bestaan? Jy luister net na iemand soos ek jou vertel wat bestaan, of jy net Google om vir 'n tutoriaal op HTML, en dit is werklik die eenvoudige. 

Voorwaar, toe ek 'n voorgraadse jaar gelede en geleer HTML, een van my wiskunde onderrig assistente net spandeer 'n bietjie van die tyd tutor my vir soos 'n halfuur, 'n uur, en dan was ek op my pad. Ek was op pad na die maak die mees afskuwelike webtuistes ooit, wat blykbaar Ek het nie regtig bowe. Maar die punt is dat, sodra jy verstaan ​​hierdie eenvoudige ideas-- As arcane text-- maar hierdie eenvoudige idees van die begin van 'n gedagte en die sluiting van 'n gedagte, hou alles mooi gebalanseer, soek iets op, die wysiging van die gedrag van daardie etiket, dit is regtig al daar is om dit. En in werklikheid, as ons nou na iets soos eintlik google.com--, Kom ons gaan 'n plek 'n bietjie meer reasonable-- stanford.edu. En ek gaan om te gaan om te sien, Ontwikkelaars, Bron. Dit is lelik, maar notice-- en ek sal in kennis te vergroot 'n paar dinge wat vertroud is reeds. Daar is hierdie hier, wat is 'n leser. Hier kom HTML5. Daar is HTML. Blykbaar is daar 'n skryf wat ek gedoen het nie gebruik wat spesifiseer die taal van die bladsy, en dit kan help met 'n outomatiese vertaling en dinge soos dat. Hier is die hoof van die bladsy. Hier is die titel van bladsy Stanford se. Daar is 'n tag ek nie gedoen praat oor yet-- Meta tag. Dis net soort agtergrond inligting. Dit help met SEO, of soekenjin optimalisering, of Google-resultate en dies meer. Maar as ons hou op soek, hou soek, hier is die Liggaam tag. En daar is trosse van ander Tags ons nog nie gepraat oor. Maar Div is een vir 'n afdeling van die bladsy. Dit is soos 'n onsigbare reghoek As jy soort wil geestelik verdeel jou bladsy in verskillende eenhede aanlyn. En dan baie divs ek sien, iets genaamd Klas, maar ons sal terug kom. 

Dit is interesting-- Vorms. Vorms is regoor die web. Enige soekkassie jy ooit gebruik is 'n vorm. En, wel, kom ons eintlik sien. Vorm. Aksie. Die optrede van hierdie vorm, om watter historiese redes, is dat URL. Metode is "post." Blyk dat HTTP-versoek kan gebruik die werkwoord "kry," soos ons voor gesien, of "post." En sal 'n verskil te sien van hierdie in 'n oomblik. Kom ons eintlik sien wat dit is. Laat my terug na bladsy Stanford gaan. Wat vorm hulle praat oor, dink jy? Wat spring uit by jou? 

Publiek: soekkassie. 

David J. MALAN: Ja. So het bo aan die regterkant hier is dit soekkassie. En dit is hoe hulle geïmplementeer it-- n tag dit is letterlik oop bracket vorm. En dan kom ons soek vir iets. Kom ons soek vir 'n buddy van mine-- "Nick Parlante." Tik. En natuurlik, dit gaan 'n effens ander URL. Laat my terug hier gaan. Kom ons soek vir "kursusse." Vervloek dit. Het na 'n ander URL. So, Stanford se toevoeging van 'n paar magic sodat hulle my geen jy neem om die URL wat ons gesien het in die optrede kenmerk daar. Maar hierdie vorm hier is suiwer geïmplementeer deur middel van hierdie opmaak hier, hierdie tags. Trouens, hier is die insette vir die tipe soek wat jy wil. Hier is die insette vir 'n ander soort soek. Hier is die insette vir die string self. En so het die doel is nie om te draai ons gedagtes rondom al hierdie etikette maar net om te sien. Dit is net die opening van en die sluiting van etikette en soek dinge op. Ja? Victoria? 

Gehoor: [onhoorbaar] David J. MALAN: Dis 'n goeie vraag. Dit is 'n bietjie moeiliker om te sien. Laat my terug te kom na wat vraag in 'n paar minute wanneer ons kyk na iets genoem CSS, of Cascading Style Sheets, en ons kan probeer om af te lei soveel van die bladsy. So as ons nou 'n blik op google.com, Kom ons kyk wat hul page lyk. Jy sal they're-- dis oulik vandag. OK. Alles klaar. Goed, so Bron. Mens sou dink Google het baie mooi bronkode. So, glo, wat hier aan die gang? En in werklikheid, dit is nie eens HTML. Dit is iets JavaScript genoem. En laat ons die gang te hou en gaan. Ek weet nie eens waar die bladsy begin. Ek gaan Command gebruik Vrou, oop bracket HTML. Goed, daar is dit. Ek het gevind dat die begin van die bladsy, en daar is so baie dinge in hier. 

Wat is eintlik aan die gang? Wel, jy weet wat, kan ons hierdie skoon te maak. As ek in plaas gaan na hierdie Inspekteer nutsbalk, hierdie spesiale diagnostiese hulpmiddel, en gaan nie om te netwerk, waar ons hou gaan vandag, maar as ek gaan na elemente, wat is regtig nice is dat 'n leser het 'n baie baie beter oë as ek. En die leser kan lees wat gemors van 'n webblad, dat HTML-pos ons net kyk na, en dit kan ontleed dit of gelees en ontleed en te formatteer dit in 'n mooi mens-vriendelike manier. So, wat ek nou sien in hierdie skerm hier onder elemente, presies dieselfde inhoud, maar hulle het alles ingekeep, hulle het dit gekleurde, maar dis presies dieselfde teks dat ek van die bediener afgelaai. 

En wat is nou mooi is ek kan sien in die liggaam, vir instance-- kennisgewing, die bladsy nog bestaan van net 'n kop en 'n liggaam, en ek kan hierargies duik in hier. Let daarop dat Google blyk te hê om hierdie een en hierdie een divs--. Ek kan uit te brei nie. Daar is 'n hele klomp van die ander divs. Dit is dus 'n bietjie kompleks. Maar wag. Dit lyk soveel meer leesbare, relatief, as dit nie. Hoekom is Google verleentheid self deur net die stuur hierdie groot gemors van die kode van 'n paar sorteer net om iets te implementeer wat lyk so eenvoudig met die eerste oogopslag? Soos, hoekom nie hulle meer ruimte te voeg? Hoekom het hulle nie druk Enter soos ek gedoen het? Kyk hoe goed ek was by die skryf van 'n webblad. Ek druk Enter so ywerig. Ek ingekeep so alles is so mooi en leesbaar. Waarom Google nie dieselfde oefen? 

Gehoor: [onhoorbaar] David J. MALAN: Goed. Baie mooi. Hulle het nie 'n paar het persoon op Google met die hand opdatering van die tuisblad meer. Dit is nie 1999 nie. So het hulle sagteware. Hulle het ander instrumente wat genereer dinamiese hulle HTML. Natuurlik, dat kode self is geskryf deur die mens, maar die werklikheid is, dit is nogal redelik om te sê, die leser nie seker nie om hoe slordig die kode is. Maar daar is 'n selfs meer dwingende tegniese rede dat Google versprei hul HTML kode sodanig slordige, skynbaar oorweldigende manier almal saam verpak met baie min way-- baie min in die middel van opmaak soos wat ek gedoen het. 

Gehoor: [onhoorbaar] 

David J. MALAN: Faster? Hoekom? En wat het jy gesê, Lydia? Vinniger? Hoekom vinniger? Gehoor: [onhoorbaar] David J. MALAN: Daar is geen ruimte om te lees. Ja. So dink oor wat 'n ruimte is. So elke karakter op die sleutelbord neem 'n bedrag van ruimte te verteenwoordig, hetsy fisies, soos dit neem dat daar nog baie ruimte, of een of ander manier onder die kap, wat geheue benodig. En as 'n aside-- en ons sal praat meer oor hierdie tomorrow-- elke karakter op die sleutelbord vereis tipies 8 stukkies, of een byte. So 'n patroon van 8 nulle of kinders, of net 1 byte, soos ons mens sou tipies sê. So dit is klein, maar dit is nog steeds nie-nul. Dit is nog 'n paar bedrag van die ruimte. So as 'n ingenieur of Google treffers die spasie balk net een keer, en veronderstel Google-- dis super-popular-- veronderstel dat 'n miljard mense besoek hul tuisblad per dag, of 'n aantal mense Besoek die tuisblad 'n miljard keer per dag, hoeveel bykomende grepe het dat sagteware-ingenieur net kos Google deur slaan sy of haar space bar keer? 

Gehoor: [onhoorbaar] David J. MALAN: Nie heeltemal so sleg nie. Net een byte keer per miljard. so a-- Publiek: 8000000000 GB. David J. MALAN: Nie 8000000000. 8 miljard grepe. Maar 1 GB. 1 GB sou die eenheid van meet wees. As hy of sy doen twee ruimtes, 2 GB. Drie GB. Reg? Dit skale duur. En so in gevalle soos Google, wat toegestaan ​​word, is uiterste gevalle, Daar is ander kwessies wat net ontstaan deur baie billike besluite of neem baie eenvoudige menslike optrede, want dit het daardie vergroting van krag. So een van die redes dit lyk so saamgeperste is presies soos Victoria said-- dit was net wat deur rekenaars in elk geval. So geen big deal. Laat die leser dit uitwerk. Maar dit het ook doelbewus nie veel ruimte het, omdat die ruimte is nie nodig nie. En die ruimte kos eintlik geld. 

Dit óf kos tyd, want net te druk dat daar nog baie meer data uit google.com se hoofkwartier net het 'n paar bedrag van te neem tyd, selfs al is dit millisekondes of mikrosekondes, maar dit dra by tot oor so baie gebruikers, of meer waarskynlik, dit waarskynlik kos geld. Google waarskynlik verbind tot iemand anders in die wêreld, een van diegene loer punte, en as hulle 'n soort van finansiële verhouding waardeur hul data kos geld, hulle kan net so goed verminder hoeveel data hulle spoeg uit op hul internet verbinding. 

So het die snaakse ding, al is, uiteindelik, of dalk die gerusstellende ding, is dat selfs al is dit lyk vreeslik oorweldigend, aan die einde van die dag, dit is nog steeds presies dieselfde beginsels as hierdie baie eenvoudige bladsy hier van 'n HTML bladsy. Dus net om op te som en sodat jy 'n kanonieke weergawe as jy nie was volgende saam uit eie keuse hier, hier dalk die eenvoudigste van webblaaie, so iets om mee te speel dalk later. 

Wel, laat ons voer 'n paar ander idees nou. Ons is op die punt om in te voer iets genaamd 'n styl tag. Ons kan hierdie bladsy stileer in meer interessante maniere. So terwyl HTML e-pos is alles oor die merk op die data, soort spesifiseer om 'n leser hoe om die datastruktuur, waar om dit gestel het, CSS, of Cascading Style Sheets, is 'n tweede taal wat oor die algemeen kry commingled met HTML soos ons sal see-- maar ons kan skoon wat in 'n moment-- wat neem dit die finale myl, en dit stylizes dit. Dit raak die kleure net reg, die skif groottes net reg, die plasing net reg. Dit gaan alles oor die estetika of opmaak, nie oor die fundamentele data self. En die maklikste manier om te wys dit is dalk deur 'n voorbeeld. So ek gaan om te gaan oor om my eenvoudige teks lêer. En in 'n oomblik, sal ek loop ons deur die proses om dit te doen onsself. 

Ek gaan terug na my lêer hier en herlaai die bladsy net om te bevestig hoe dit lyk. Dit is waar ons is op die oomblik. Ek voel soos kinders sal geniet met 'n bietjie kleur aan hierdie web bladsy. So ek gaan hier gaan in die kop van die bladsy. En ek gaan styl, / styl doen. En dan binnekant van hierdie, ek gaan om die liggaam van my page-- vertel en dit opmaak is, by Met die eerste oogopslag, miskien 'n bietjie vreemd, maar konvensionele. Ek gaan om te sê dat die agtergrond kleur van hierdie bladsy moet groen wees. En dit is ongelukkig soort nie die beste ontwerp. Let daarop dat voorheen in die wêreld van HTML, Ek het gesê dat eienskappe is hierdie sleutel-waarde pare. Iets gelyk kwotasie unquote "iets." In die wêreld van CSS, wat was ontwerp deur sommige ander mense, Hulle het besluit dat, in hul wêreld, sleutel-waarde pare sou woord kolon iets wees. Dit is dus dieselfde idee, al is. Dit assosieer 'n waarde met 'n paar sleutel wat een of ander manier beïnvloed die gedrag van hierdie bladsy. 

En jy kan seker raai. Wat is dit waarskynlik gaan om te doen, selfs as jy nog nooit gesien HTML of CSS voor? Publiek: Verander die agtergrond. David J. MALAN: Ja, verander die agtergrond. En spesifiek die agtergrond van die liggaam. Maar sover die liggaam vir nou is die web page-- dis die enigste ding onder die titel bar really-- dit is waarskynlik gaan om beïnvloed dieselfde ding. So laat ons sien. Kom ons hierdie red. Gaan hier en herlaai. Dit is redelik afskuwelike. En wat gaan aan hier is 'n newe-effek. Ek het net het hierdie beeld lukraak. Hoekom is die groen nie deurdringende agter Mickey? Gehoor: [onhoorbaar] David J. MALAN: Presies. Dit blyk dat beelde, mooi veel al die foto's wat ons kan gebruik, is almal rectangles-- van reghoeke. Selfs as Mickey het 'n paar draaie om homself en het 'n agtergrond, dié agtergrond het om iets te wees. Dit het wit te wees. Dit het swart of iets anders te wees. Dit kan deursigtig wees. En in werklikheid, ek kon oop Mickey Mouse hier in 'n program met die naam Photoshop of iets soortgelyks en verander dit alles wit agtergrond deursigtig, sodat die groen sou skyn deur. Maar dit is iets wat ek nodig sou wees vra myself of 'n grafiese kunstenaar of 'n ontwerper by my maatskappy, byvoorbeeld, om te doen, veral omdat ek net geleen hierdie een van die internet. Maar dit is hoekom dit gebeur. 

So wat anders kan ons wil doen? Wel, ons wil dalk ons ​​sê regtig hoop jy geniet jou verblyf. En vir klem, ek wil om hierdie sterk maak, en so sal ek sê oop sterk en sluit sterk en dan herlaai. En dit is 'n bietjie moeilik om te sien op die projektor maar miskien regtig nou spring uit by jou 'n bietjie meer. So jy kan kursief voeg in hierdie manier, vet gesig staar op hierdie manier. Ons kan die kleure verander. Trouens, net vir skoppe, is ek gaan om voort te gaan en dit te doen. Ek het nie regtig soos hoe my paragrawe is dit naby aan mekaar, sodat ek iets soos dit te doen. Ek gaan die leser vertel, verander elke paragraaf tag om te hê, Kom ons say-- eintlik, jy weet wat, Kom ons in lyn te bring dit text-align, sentrum. En weer, ek weet dit net omdat iemand geleer dit vir my of ek gelyk het dit opgerig in 'n aanlyn verwysing. So laat ek dit red. En gesê: Ag, nou het ek gesentreerde die beeld daar. En eintlik, jy weet wat, indien Ek beweeg my beeld in 'n paragraaf tag-- so 'n derde paragraaf, selfs al is dit nie die teks. Kom ons red en herlaai. Nou die bladsy begin soort kyk of-- Ek bedoel, dit is nog redelik lelik, maar ten minste dit lyk asof ek spandeer twee minute in plaas van een minuut maak dit. 

En so, inkrementeel, kan ons hierdie estetiese veranderinge nou na die bladsy? Ek het nie regtig verander die data in die bladsy behalwe die toevoeging van die woord werklik. Ek het metadata bygevoeg, as jy wil. Hey, die leser, maak die woord "regtig" vet. Maar die data is nie sterk. Dis metadata. Die data is "regtig." Dus het ons nog 'n paar van dieselfde konsepte soos voorheen. Nou, natuurlik, dit is nie op die web, so ek gaan 'n laaste stap hier doen. 

Ek gaan om te gaan na hello.html en net na vore te bring en 'n afskrif van hierdie. En nou gaan ek gaan in Cloud9, wat Ek sal loop jy deur in net 'n oomblik. En die kans is jy sal gou wees, indien nie reeds op 'n skerm soos hierdie. En laat my net gee jou 'n vinnige toer wat Cloud9 eintlik is. So weer wolk 9 is hierdie wolk-gebaseerde diens wat gee jou en my die illusie van ons eie virtuele masjien in die wolk, tegnies 'n houer in die wolk, dat ons volle administratiewe voorregte. So in teorie, niemand anders in die wêreld het toegang tot die skerm Ek is kyk na nou, behalwe miskien die mense wat loop die webwerf, want tegnies het hulle fisiese toegang en dies meer. 

So wat sien ons in hierdie omgewing? Ek gaan om te vergroot, want dit is 'n bietjie klein. En laat my wys oor hier vir net 'n oomblik. Op die linkerkant van my en jou skerm, daar is 'n lêer leser aan die linkerkant. So soortgelyke in gees Mac OS en Windows. Dit is al die lêers in my rekening. En by verstek, as jou rekening is soos myne, jy sal sien of gou te sien helloworld.html en readme.md. Hier aan die regterkant, dit is waar my tekslêers gaan om te gaan. As jy al ooit gebruik Microsoft Word of Notepad of Text Editor, dit is die woord van my redigering van lêers gaan om te gaan. En dan is die mees arcane kenmerk van hierdie omgewing dat ons sal nie regtig nodig het om te gebruik is af hier bekend as 'n terminale venster. As jy gebruik DOS uit weleer, dit is die Linux of die Linux ekwivalent van DOS. Dit is 'n teks-gebaseerde interface-- geen muis klik, geen sleep. Al wat jy kan doen is tik opdragte, maar die instruksies kan lêers te skep, beweeg lêers, oop dopgehou, naby dopgehou, doen 'n aantal dinge. Maar vir nou, sal ons net spandeer ons tyd hier. 

En so laat ons dit doen. As jy in hierdie omgewing, wat jy moet wees as jy 'n werkplek geskep reeds, gaan voort en net optrek na File, New vir 'n oomblik. En dit sal julle 'n nuwe gee blad hier in die middel. En ek just-- en laat ons gaan voort en doen dit. Kom ons gaan voort en nou weet File, Save en gaan voort en noem dit hello.html, moet nie verwar word met helloworld.html, wat kom met jou nuwe gratis rekening, wat net 'n voorbeeld lêer. Jy sal sien dit skielik verskyn, waarskynlik op die linkerkant, en die blad sal steeds oop. En laat ek jou nou aanmoedig om te herskep hierdie lêer of 'n variante daarvan. En as jy kan nie heeltemal sien dit op die skerm, dit is identies aan die skyfies dat jy waarskynlik in 'n ander blad. 

So in kort, maak jou eerste webblad, stoor dit, en dan in 'n oomblik, Ek sal jou wys hoe jy kan dit werklik sien. Maar verander ten minste een ding. Verander Hello World aan iets van jou eie keuse, sodat jy oortuig is dat dit jou lêer en nie die een wat ek nou net gemaak het. Alles reg. En wanneer jy ready-- geen rush-- wanneer jy klaar is, gaan voort en stoor die lêer Sodra jy hierdie veranderinge gemaak het. En as jy die klik Begin knoppie op die top van hierdie moet 'n nuwe blad wat sal vertel oopmaak jy wat URL wat jy kan jou lêer te besoek by, maar dit kan 'n oomblik te neem kwotasie unquote "begin Apache," wat is die naam van die web bediener. So wees versigtig om presies te doen Wat is in die lêer uiteindelik. So nou, sal ek in zoom. As ek begin tik oop-bracket HTML, kennisgewing dit waarna ek my denke te voltooi. En as ek klaar my gedagte, is dit gee my outomaties die sluiting tag. Maar die verwagting is dan sal ek getref Gee, en beweeg dan binnekant daar en moenie kop binne en dan doen ek liggaam binne. En dit is 'n bietjie vreemd op die eerste, want dit is die werk te doen vir jou, maar besef dat uiteindelik Dit spaar jou toetsaanslagen. En in werklikheid, 'n baie algemene verskynsel in die Programmeer Omgevingen deesdae beide vir web-ontwikkeling soos hierdie en werklike ontwikkeling, wat ons sal praat oor môre, is hierdie motor-volledige funksies, dinge wat net toelaat dat 'n programmeerder of 'n ontwerper minder toetsaanslagen te tik bereik dieselfde ding. Soms is dit goed, al is. Soms is dit net irriterende. En, weer, as jy eers getranskribeer die skyfie of 'n variant daarvan, jy kan kliek op die Run knoppie op die top. En dan in die onderste venster, sal jy in kennis gestel word op watter URL wat jy kan besoek jou webblad. Myne, byvoorbeeld, is op business-daharvard.c9users.io en dies meer. Goed, so, laat me-- enige vrae? Enige ander vrae oor net om hierdie werk voordat ons funksies by te voeg? En laat my stel, net kry mense comfortable-- want dit is een ding om net kopie-plak blindelings wat ek gedoen het. Maar net sodat mense worstel met ten minste een to-do, Ek gaan om te draai op 'n paar musiek. Ek gaan 'n lys van voor dinge wat jy kan potensieel voeg. En jy kan seker gebruik Google. En hoekom doen ons nie net stel voor dat jy probeer om op te los ten minste een hier spesifieke probleem. Dus, in terme van etikette, laat my onthou hierdie hier. 

Eintlik, laat ek dit in 'n tekstuele vorm. Kom ons sê dat een van die etikette wat ons kan gebruik hier is 'n paar etikette hier. Ons het die punt tag gesien. Nou gaan dit outomaties aan te vul. Paragraaf tag, die anker tag. Kom ons sê jy wil maak iets groter, sodat jy kan like-- die span tag kan help. Wel, jy kan 'n paar hulp nodig vir daardie in net 'n oomblik. Ons het div gesien. Jy sal sien daar is tafel. Daar is iets genaamd tr, td. Do, td. Kom terug na wat in 'n oomblik. Wat anders kan handig wees? Daar is 'n sterk. Daar is klem, of eerder em. There's-- wat anders kan jy hier fancy? Wel, sal ons 'n kyk na wat saam. Vorm, wat ons gesien het. Daar is vorm. Daar is insette en 'n paar ander. Goed, so laat ons dit doen. Om te antwoord n ​​Victoria's vraag, laat my toe om eers maak net seker dat almal in staat om hul hallo werk te kry. laat my dan stel 'n paar ander idees. Dan sal ons laat mense op te los 'n probleem op hul eie. Dan sal ons eintlik terug te kom aan daardie idee van 'n vorm, en ons sal eintlik weer te implementeer saam die front-end-koppelvlak, om so te praat nie, want Google self. Ons sal Google gebruik as die agterkant en laat hulle doen die harde werk, die soek, maar ons sal herskep die voorkant Google en die search form dat hulle op hul eie tuisblad. En so sal ons terug te kom na hierdie tags in net 'n oomblik. 

So dit is wat ek voorgestelde net 'n oomblik gelede. Ons kan die stilering voeg tot 'n bladsy binnekant van hierdie styl tag, en ons kan die agtergrond stileer kleur, die teks belyning, of dit nou sentrum of links of regs. Maar baie vinnig jy sou vind of 'n web ontwerper sou vind dat hierdie 'n bietjie lomp, omdat jy doen wat genoem vermenging inhoud met die aanbieding daarvan. Jy meng jou data en die estetika daarvan. En in werklikheid, as jy kyk na wat gaan gebeur oor time-- dit is 'n baie klein webblad, natuurlik. Maar as ek die inhoud toe te voeg tot hierdie bladsy en ek voeg styl aan hierdie blad, die bladsy baie vinnig kry langer en langer. En dink wat ek wil 'n tweede webblad wat deel sommige van hierdie eienskappe. Veronderstel my tweede webblad vir my site-- ook, ek wil alles sentrum, en ek wil ook alles met 'n groen agtergrond. Ek is pretty much gaan hê kopieer en plak 'n paar van hierdie lyne in die tweede lêer, wat fyn voel. Dit sal die probleem op te los. 

Maar wat as ek wil 'n derde bladsy of 'n 30 bladsy of 'n 40 bladsy? Nou gaan ek te kopieer en plak 'n klomp duplikaat-kode in veelvuldige lêers. En so dink dat Ek besluit of ek vertel, hey, ons is nie die gebruik van 'n groen agtergrond nie. Ons gaan begin met oranje. Wat het jy om te verander? Wel, jy het om die styl te verander van groen na oranje in hoeveel plekke? Soos 30 of 40 plekke. Dit is vervelig. Dit is geneig om foute. Daar is 'n aantal redes waar jy nie wil hê om te oorreed daardie soort pyn vir jouself. En so sou dit nie lekker wees As ons kon neem wat ek nou net sit tussen hierdie twee geel tags, hierdie styl etikette, faktor dit uitgetrek en al my stilering in een sentrale lêer dat al 30 of 40 van my ander lêers leen of een of ander manier verwys, nie in teenstelling met die netwerk diagramme ons doen voordat? 

So as ek gaan hier, ek is gaan eintlik stel dat ons die plek van die styl tag met iets bekend as die skakel tag, wat is verskriklik, verskriklik genoem, omdat jy nie gebruik maak van die skakel tag om wat te skep Ons mense weet as 'n skakel in 'n web bladsy. Vir dit wat tag gebruik jy? Hoe kan jy 'n skakel in 'n web bladsy te skep? Gehoor: Die a. David J. MALAN: Die a, of anker tag, wat voor geloop om Disney. Die skakel tag hier sê this-- skakel na 'n lêer met die naam styles.css, die verhouding waartoe gaan wees dat dit my style. So, dit is een van die S se CSS-- Cascading Style Sheets. Styl sheet-- twee van die S in CSS. Cascading Style Sheets. Dit beteken net, hey, leser, gaan vind styles.css op die plaaslike bediener en gebruik dit as jou style, wat beteken binnekant van die lêer gaan al die wees stylizations dat ons net gedoen het. En so what wat lêer kan lyk is dit. En ek sal net doen dit is 'n vinnige Byvoorbeeld, want ons hoef nie om te veel in die onkruid hier te kry. Maar as ek dit kopieer, wat ek voorstel is dat 'n programmeerder 'n nuwe lêer, plak in die lines-- whoops-- plak in die lyne, stoor dit as styles.css, en dan, in die ander lêer, verwyder dit alles en vervang dit plaas met hierdie skakel tag. Sodat as ek 'n skakel href = "styles.css", die verhouding sal "style" wees naby tag. Spaar dit. Gaan terug na my Hello World. Reload. 

Letterlik niks gebeur het nie. Dit is 'n goeie ding, want dit beteken dit eintlik werk nie. Om soveel bewys, dink ek 'n tikfout, en ek noem dit "Styles.css" met 'n kapitaal S, wat is verkeerd is, en dan herlaai. Nou kan jy sien dit net nie werk nie. Nou, hoekom? Wel, laat ons gebruik 'n tegniek van vroeër. Laat my gaan voort en, in my leser, in Chrome, ek is gaan oop dat spesiale blad netwerk soos voorheen, en laat my tot die bladsy laai. Wat is jy nie verbaas wees om nou te sien? Of miskien het jy verbaas wees om te sien. In ieder geval, wat sien jy nou? Gehoor: [onhoorbaar] David J. MALAN: Dit is nie gevind nie. Hoekom is dit nie gevind word? Wel, Styles.css-- kapitaal S-- bestaan ​​nie. Ek Verkeerd benoem dit. Eenvoudige tikfout. Maar ek kry verstaanbaar nou 'n 404, omdat die bediener is te sê: hey, dit is nie gevind. Letterlik, weet ek nie waar die lêer is. So as 'n gevolg, die leser wys jou wat dit kan, die rou inhoud van die bladsy, wat 'n 200, die HTML, maar die stilering kan nie daarna bygevoeg word. En dit is wat bedoel word met waterval. Jy kan soort voeg dit na, en dit soort verfyn die estetika van die webblad. En jy kan selfs ignoreer diegene style met nog ander style lêers as jy wil. Dit is nie gevind nie, al is, in hierdie geval, want natuurlik, ek Verkeerd benoem dit. So ek wil hê om eerste op te los nie. 

So laat ons gaan voort en stel die volgende. Kom ons gaan voort en doen dit. Begin met miskien jou Hello World lêer, laat my net te nooi 'n paar van funksie voorstelle. So, Victoria, jy wou maak 'n paar teks groter, reg? Goed, so ons kan moenie teks groter te maak. En ons sal elke aftrek net een probleem op te los. Maak teks groter. Ek gaan nie te pla skryf wanneer ons het koeël tegnologie reg hier. So 'n paar probleme. So ons gaan probeer teks groter te maak. Alles reg. Wat anders sou iemand voorstel? Wat anders kan ons wil om te doen in 'n webblad? Kom ons kom met 'n kortlys van dinge en dan delegeer aan die groep om hierdie uit te vind. 

Gehoor: [onhoorbaar] 

David J. MALAN: OK, posisie teks op verskillende kante van die bladsy? Alles reg. Iets anders. 

Gehoor: [onhoorbaar] David J. MALAN: Dit is. So 'n gif is net 'n verskillende lêer formaat. Ons het net gebruik, wat 'n png of 'n jpg waarskynlik? Ons gebruik 'n jpg. As jy nuuskierig, 'n oormatige is antwoord op jou vraag is 'n jpg is oor die algemeen gebruik word vir foto's, want dit ondersteun miljoene kleure of 24-bis kleur. A gif is oor die algemeen gebruik word vir, soos, internet nooi hierdie days-- animasies, soos animated gifs. Maar dit gebeur met 'n kleiner kleur gebruik palet, net 256 moontlike kleure, maar dit word ondersteun deur deursigtigheid en animasie. En dan is daar png, wat ondersteun deursigtigheid en meer kleure maar nie animasie. Dit is dus 'n trade-off. So die toevoeging van 'n gif, al is, sou funksioneel wees gelykstaande aan die toevoeging van 'n PNG of JPG. Ja. Image bron gelyk. So iets anders. Kom ons kom met iets wat ons gestuur om Victoria om hier te doen. 

Publiek: knoppies Voeg 'n vorm. David J. MALAN: OK. So knoppies by te voeg vir 'n vorm. En ons sal dit een saam te doen. Sodat jy 'n perfekte segue wees direk na hierdie uitdaging. Enigiets anders? Wat kan jy doen? Die web voel baie underwhelming As dit is al wat ons kan doen. Publiek: Verander die kleur van die teks. David J. MALAN: Verander die wat? Publiek: Kleur van die teks. David J. MALAN: Verandering kleur van die teks. Alles reg. So, laat ons dit doen. Net weer sodat jy nie net uit die hoof, doen presies wat ek doen, Ek gaan om te draai op die musiek vir miskien vyf minute hier. Jy is welkom om Google te gebruik. Jy is welkom om my te vra, en Ek sal 'n wenk fluister in jou oor. Jy is welkom om te kyk oor op ander se skouers. Maar los net een van hierdie probleme. Maar ons sal die laaste een, die doen vorm een, as ons kon, saam. So vyf minute om op te los enige een van hierdie probleme met behulp van Google, intuïsie, of enige 'n ander manier aan u beskikbaar. 

[Speel van musiek] Alles reg. Geen sorge as jy wil om te hou geknutsel, maar ek sal 'n paar bederf van hierdie antwoorde. Dus is die eerste voorstel van Victoria was om die teks groter te maak. Daar is dus 'n paar maniere om dit te doen. Ek het tans herstel my skerm om hierdie grootte, al het ek het ingezoomd kunsmatig net om dinge te sien. En laat ons dit doen. Laat my gaan voort en gryp sommige generiese Latynse teks net so het ons iets om mee te werk. So gee my net 'n oomblik. Ek sal drie paragrawe te maak. OK. Dit sal 'n beter voorbeeld wees. So vir die nuuskierige, in my hello.html, ek het net geplak drie nonsens Latyns-paragrawe net so ons het 'n paar teks mee te werk. En Victoria se doel was om maak 'n paar van die teks groter. So ek kon, soos voorheen, gaan hier. En laat ek doen dit op die regte manier. Ek gaan 'n skakel het tag wat verwys na 'n lêer genoem "styles.css," die verhouding waarvan weer "style." En dan gaan ek te red en oop te stel hierdie "styles.css." 

So, soos voorheen, ek het die vermoë in hierdie CSS-lêer om werklik oorheers die standaard estetika van 'n webblad, en die standaard estetika, natuurlik, is redelik dof. Dit is soort van normale lettergrootte, swart teks, wit agtergrond, en so meer. So dink ek wil maak al hierdie teks groter. Ek kon 'n paar dinge te doen. In my styles.css lêer, ek kon sê, jy weet wat, pas die volgende te die liggaam van my bladsy. Gaan voort en maak die lettergrootte 24 punte, wat is 'n aantal ek kan gebruik in Microsoft Word. Laat my terug na my web bladsy hier en herlaai, en jy kan sien dat dit is reeds baie groter. En ons kan 'n bietjie mal, net soos ons kan op 'n desktop-- Maak dit 96 punte. Reload. En dit is om 'n bietjie lomp op hierdie punt. 

Maar ek kon 'n bietjie meer presies te wees. In plaas daarvan om die toepassing van hierdie style om die liggaam van my bladsy, Wat anders kan ek pas dit toe op plaas, watter ander tag wat dalk nog funksie op dieselfde manier? 

Gehoor: Die p tag? David J. MALAN: P tag. So het die hoof sou nie korrek is, omdat die hoof, jy kan nie eintlik beheer oor die estetika van. Daar is daar of nie óf teks. Maar die p tag-- Ek kan duik in 'n bietjie dieper, so te sê, om die punt tags. En selfs al is daar drie, dit is heeltemal fyn, want in CSS, as ek sê net "p" hierdie beteken die toepassing van die volgende om enige etiket wat ooreenstem met hierdie selector, die selector net synde die naam van die etiket. So waar jy sien 'n "P" pas die lettergrootte, en laat ons dit meer redelike again-- 24 punt. En jy weet wat, net vir 'n Goeie maat, Kom ons maak die kleur rooi net vir die oomblik. En nou as ek herlaai, nou is ons sien drie lelike paragrawe. 

Maar nou dink dat ek soort of-- Ek wil die eerste paragraaf om uit te spring op die gebruiker. Ek wil nie net verhoog die lettergrootte van alles. En so het ek wil eintlik om te identifiseer of onderskei tussen hierdie paragrawe. So laat ons ontslae te raak van die rooi, want dit is net soort van taai, en laat ons gaan voort en maak die lettergrootte 12-punt by verstek, sodat ons terug na iets 'n bietjie meer redelik is. En nou wil ek net die verhoog lettergrootte van die eerste paragraaf. Ek kan dit doen in 'n paar maniere, maar een manier is dit miskien die meeste instruksionele by die oomblik is om die volgende te doen. Laat my gaan voort en sê: hierdie paragraaf het 'n unieke ID van "eerste." Ek kan dit iets wat ek wil noem. Ek kon hierdie "cat" noem of enige ander woord, maar ek gaan dit 'n paar te gee semanties betekenisvolle naam soos "eerste." Dit is die unieke identifikasie, die ID, vir my eerste paragraaf. 

Wat ek nou kan doen in my style is 'n bietjie meer presies. In plaas daarvan om te sê, toe te pas die volgende aan die p tag, Ek kan sê dat die following-- Pas die volgende, of kies die HTML element wat het 'n unieke ID van "eerste." Wat wil ek om aansoek te doen om dit? 'N lettergrootte van 24-punt. So ek het twee keurders nou. Een maak al die paragrawe 12-punt. Maar hierdie een, veral omdat dit kom second-- dit kom laaste in die file-- dit het 'n waterval effek. Ek het net gemaak al my paragraaftag 12-punt, maar dit nou watervalle en oorheers dat vir enige elemente in die bladsy, enige merker in die bladsy se unieke ID is kwotasie unquote "eerste." En die hashtag in hierdie konteks net beteken "unieke identifiseerder." Ek het nie sit dit in die HTML-lêer. Ek, hier, net sê kwotasie unquote "eerste." 

So laat ek herlaai. En nou sien ek: Ag, OK. Ek bedoel, dit is nie so mooi, maar dit is soort van soos die voorwoord tot 'n boek of iets soos dit, waar die eerste paragraaf is groter. Kon selfs meer akkurate wees met net die eerste letters, maar ten minste Ek het meer beheer uitgeoefen. Nou maybe-- Miskien wil ek om dit te doen soms vir watter rede ook al, en so kan ek nie hierdie wil van toepassing op net een HTML tag. Inteendeel, laat ons say-- laat ook die volgende doen. Class = "invoer." AANGESIEN 'n ID word gebruik om uniek identifiseer een ding, een tag, in jou webblad, is 'n klas bedoel om te wees gebruik op 'n aantal elemente of etikette op jou webblad. Dit is dus herbruikbare. 'N ID is nie herbruikbare. 'N Klas is herbruikbare. 

En jy weet wat, om watter filosofiese reasons-- Ek het nie klaar my thought-- ek gaan om te sê dat die eerste paragraaf en die tweede paragraaf is belangrik. So ek gaan die klas genoem toepassing "Belangrik" dat, as ek slaan my lêer en herlaai, het geen funksionele impak nie. Maar ek het 'n paar bygevoeg metadata om die lêer, soort van iets afsonderlike uit die kern data van die lêer, sodat nou in my style, as ek plaas sê ".important" - jy weet, enigiets wat belangrik is, is ek gaan font-kleur, red-- of liewer nie skrif kleur, net kleur. Daar is teenstrydighede in CSS ongelukkig. En herlaai. Let nou op die eerste twee paragrawe is rooi maar nie die derde nie, want ek het net toegepas die klas van "belangrike" om die eerste twee van daardie dinge. 

So in ID's, jy het die vermoë om presies te spesifiseer. Met klasse, jy herbruikbaarheid. Maar in beide gevalle, sien die soort van goeie-ontwerpbeginsel waar ek ingereken uit al die estetika my styles.css lêer. Daar is dus geen messiness hier. Daar is geen melding gemaak van rooi of vet front of lettergrootte in hierdie lêer. Eerder Ek het semanties, sinvol gekenmerk my data as, hier is 'n paar belangrike inligting. Hier is 'n paar meer belangrike inligting. Verder, hier is die "Eerste" van my belangrike inligting. So HTML is alles oor soort van kodering, letterlik, woorde en paragrawe en konstrukte in jou bladsy met hierdie klein wenke, as jy wil nie, dat jy kan een of ander manier te benut deur gebruik te maak ander tegnieke soos CSS op hierdie manier. 

So in antwoord op die vraag Victoria se kan ons teks groter in daardie plek te maak. Daar is so baie ander maniere, maar die skrif tag-- oop bracket "font" - is eintlik 'n paar jaar oud is. En dit is die probleem, Ook met net vertrou op online resources-- hulle is geneig om verouderd wees. En inderdaad, wat al afgekeur, want die wêreld het besef, Wat beteken "font-size = 7" beteken? Dit maak nie. En so is dit vir baie jare en hierdie day-- een van die newe notas hier is dat dit eintlik ongelooflik pynlik nog soms webwerwe vir die ontwikkeling van web, omdat Microsoft en Google en Mozilla en ander dikwels verskil oor hoe 'n spesifikasie soos HTML interpreteer. 

Daar is 'n reëlboek vir HTML wat oor die algemeen sê wat elke tag beteken. Maar soms is dit oorgelaat aan die diskresie implementering se diskresie en Google Microsoft se. En so sal jy baie dikwels sien op 'n webwerf iets lyk anders op 'n rekenaar as dit nie op 'n Mac, en dit is werklik, want aan die einde van die dag, hulle het nie toets dit goed op twee platforms. Maar dit is ook omdat redelike, slim mense sal saamstem en maatskappye sal nie saamstem nie, en so Een van die uitdagings van ontwikkeling vir die web of ontwerp dinge vir die web skryf jou webwerf op 'n manier wat werk op elke webblaaier. Maar selfs dit is onredelik, reg? Daar is so baie weergawes van soveel blaaiers daar buite wat, op 'n sekere punt, jy moet ook 'n oordeel oproep maak en jy het om te besluit as 'n maatskappy, veral vir e-handel-styl plekke waar jy probeer om die nuutste en beste gebruik tegnologie om 'n baie goeie gebruiker gee ervaring. Maar sommige persentasie van jou gebruikers mag steeds met behulp van Internet Explorer 6 of 7 of 8, veral na gelang van die land wat hulle vandaan kom. 

En so baie algemeen geraadpleegde is iets soos "statistieke webblaaier." En as ons gaan aan- laat ons sien Wikipedia en sien hoe up-to-date hierdie grafiek is As daar een is. So hier kan jy sien waar blaaier eintlik is, volgens Desember 2015, volgens die Amerikaanse regering. Chrome is op 42% markaandeel, gevolg deur IE grootliks in korporatiewe instellings of PC instellings, natuurlik, gevolg deur Firefox, dan Safari, dan Opera het nie maak die kaart hier vir een of ander rede, en dan ander. Miskien is dit onder ander. Maar meer problematies as wat is-- Kom ons kyk of Wikipedia het ook weergawes van webblaaiers version-- 

Kom ons gaan na die statistieke leser. Internet Explorer. Selfs dit is nie genoeg nie. Leser statistieke. My weergawe. Dit gaan nie om reg te wees. Kom ons kyk weergawes. Leser markaandeel. Kom ons kyk of hierdie opkom. OK. Nou is dit om 'n bietjie meer bruikbaar. So hier, sien dat ons almal verskillende weergawes van webblaaiers. En my God, as jy look-- Chrome 48, Chrome 47, Chrome 31, Chrome 45. Ek bedoel, implementeer toenemend opgedateer, en soms 'n paar van die veranderings is belangrik in terme van funksionaliteit. En so op 'n sekere punt, die produk bestuurders of die ingenieurs moet 'n decision-- maak jy weet wat, net 1% van die wêreld is nog steeds met behulp Internet Explorer 7. Om die hel met hulle. Ons is net nie gaan ondersteun dat die leser. En wat beteken dit nie te ondersteun? Dit kan beteken dat knoppies werk nie op jou webblad, of dit kan beteken die opmaak is heeltemal af. Of jy kan hê om te maak dat dieselfde oordeel oproep in mobiele deesdae, waar, ons is nie van plan om IOS 5 meer ondersteun. So mense moet net op te gradeer. Of ons gaan nie Cupcake ondersteun op Android-bedryfstelsel vir Android-toestelle, want as die world-- as die tegnologie wêreld wil om vorentoe te beweeg, dit soort wil die sleep wêreld met dit, sodat hulle dit nie doen nie moet voortgaan om te wees backwards compatible sodat hulle kan nuwe en goeie eienskappe aan te bied. Dit is inderdaad een van die redes waarom so baie maatskappye uitrol outomatiese updates en soort van dwing die nuutste weergawes van sagteware op ons. En selfs maatskappye soos Apple sal soort byna dwing of te dwing jy in terme van markkragte om 'n nuwe selfoon te koop, want hulle het net sal nie jou ou selfoon meer te werk. So jy mis nie uit op die nuutste en beste eienskappe, want dit is duur om hulle as 'n maatskappy om ouer te handhaaf, waarskynlik minderwaardige weergawes van sagteware. Maar die netto effek is dat Ons ly ook hierdie so goed. 

So laat ons 'n blik op net 'n paar finale dinge hier. Kom ons klap real vinnig 'n paar van die ander koeëls, indien nuuskierig. So as jy probeer, byvoorbeeld posisie die teks op verskillende kante van die bladsy, ek gaan 'n vinnige manier doen, maar daar is verskillende maniere om dit te doen. Laat my gaan voort en eliminate-- vereenvoudig dit soos volg. Laat ek net terug te gaan na my eenvoudige, eenvoudige paragrawe. Laat my terug na my styles.css. En ek gaan net na die simple-- gebruik wat jy kan sien op Google of onthou van earlier-- text-align reg. En herlaai die bladsy. Nou is alles lyk na regs-gebonde wees, soos jy kan sien op die oorhoofse hier. 

Ons kan maak dat dit lyk 'n bietjie meer boek-agtige, en ons kan sê "regverdig" en herlaai. Nou dit is lekker en vierkante op beide kante, wat is 'n soort van lekker. Nog 'n doelwit wat ons hier gehad was verander van kleur van die teks. So het ons gesien dat met my rooi teks. En nou knoppies by te voeg vir 'n vorm. So hoekom nie ons probeer om presies dit te doen? Maar eers wil ek gaan na 'n webwerf wat die meeste van ons gebruik elke day-- Google. En laat ons 'n blik op hoe Google eintlik werk. Maar ek gaan om dit te doen. Eerste laat my dit doen in-- yep, dat ek kan gaan na Google eerste. Ek gaan om te gaan in Google-instellings, want ek wil afskakel iets genoem onmiddellik resultate. 

So jy dalk opgemerk het in Google hierdie days-- laat my terug te gaan en draai dit op. So as ek begin soek vir "katte" soos hierdie, agterkom dat nie alleen self doen nie Ek kry outomaties voltooi het top, almal van 'n skielike, die bladsy self lyk redelik vinnig verander so goed, en dit is Google gebruik van 'n taal JavaScript genoem probeer om behulpsaam te wees. Maar helaas, dit soort van rommel op ons bespreking van wat eintlik gebeur onder die enjinkap hier. So ek net soort van vinnig afdraai onmiddellik resultate. En ek gaan klik op Save. En nou gaan ek maak wat diagnostiese nutsbalk dat ek hou opening onder die blad Netwerk. So laat ons dit doen. Laat me-- whoops-- blaai dit neer 'n bietjie. En laat ek soek vir "katte." 

En nou notice-- eintlik, dit is 'n goeie geleentheid om te bespreek vir 'n oomblik. Let op die oomblik het ek type-- dit te stop. Hou op. OK. Let op die oomblik het ek tik die letter C, kyk na die onderkant van die skerm. A- T S. Wat beteken die onderkant van hierdie skerm, my blad Netwerk, raai gebeur elke keer dat ek 'n brief te tik? Ongelukkig het die padda is baie steurende vandag of die Shamrock of wat ook al hy is. Wat gebeur elke keer as ek getik? En laat my duidelik dat die buffer en tik dit weer. So-- Oeps. Elke keer as ek tik 'n brief, C- A- T-- sodat 'n nuwe ry hou natuurlik verskyn. Wat beteken elk van die rye verteenwoordig, op grond van wat ons gesien het en bespreek so vêr? Publiek: N soektog? David J. MALAN: 'n search, of meer generies, 'n HTTP-versoek uit my leser te bediener. Wel, waarom word my leser maak 'n HTTP versoek elke keer as ek tik 'n brief? 

Gehoor: [onhoorbaar] David J. MALAN: Ja, dit gee My nou al motor-volledige uitslae. Soos, waar hierdie doen resultate vandaan? Wel, elke keer as ek tik 'n brief, Google stuur meer en meer en meer van die woord wat ek tik. Hoekom? Want hulle wil my 'n beter en beter, beter voorstel, 'n lys van voorstelle, vir watter antwoord Ek probeer om werklik voltooi. So dit is om letterlik elke sê karakter wat jy tik in Google gestuur word, wat uiteindelik in grootmaat, maar ook soms 'n op 'n tyd om te implementeer hierdie motor-volledige funksies toe die data is, natuurlik, op die web. 

Nou, laat ons 'n blik op wat eintlik gebeur wanneer ek op Google Search. En dan sal ons dit self te benut. So as ek blaai nou na die baie eerste versoek dat net gebeur. Let op die volgende. Dit is gestuur na 'n taamlike lang URL-- https://www.google.com/search? en dan 'n hele klomp van die dinge. Kom ons kyk na hierdie eintlik in die blad leser self. Kom ons ontslae te raak van die nutsbalk hier. Hier is die bladsy van die resultate. En kennis hier is die URL. Nou, kan jy waarskynlik dink wat gaan aan hier in deel. So in die eerste plek, 'n definisie. Dit is blykbaar die bestemming waar die vorm ingedien word. So toe ek getik in die woorde "katte" en druk Enter, blykbaar Google gestuur my teks invoer om hierdie URL wat ek uitgelig daar, streep soek. Turns out, in 'n URL, iets wat gebeur nadat 'n vraagteken is, as ons hou die woorde: 'n sleutel-waarde pair wat getik in die vorm of een of ander manier oorgedra vanaf die leser om die bediener. 

So 'n tyd wat jy tik insette in 'n vorm op die web en dit is gestuur soos ons bespreek, via 'n get, een van hierdie virtuele koeverte, die inhoud van daardie envelope-- ja, hou om fisies gestop in die koevert in die klas vandag, maar tegnologies dit is eintlik sit in die URL. So in werklikheid, laat my sif deur hierdie. Waar sien jy die gebruiker se toevoer? Waar sien jy iets dat ek myself getik hier? Ja, so "katte." Reg? So laat ek dit distilleer in iets eenvoudiger. Ek gaan alles skrap oor hierdie URL wat ek nie verstaan ​​nie, en Ek gaan net om te gaan dit as this-- / soek? q = katte. Ons sal sien waar Q kom uit in 'n oomblik, maar wat voel soos die minimum hoeveelheid inligting wat ek verskaf. En nou gaan ek druk Enter. En sien dit nog steeds werk. Ons kry nog steeds terug 'n hele klomp van die katte. So Google is liefhebber as hierdie deesdae. Dis 2016, nie 1999. Daar is dus ander dinge wat my leser stuur na die bediener. Maar dit is minimaal al wat nodig is. 

So wat gaan aan? Wel, laat my gaan voort en gaan Terug na Cloud9 en laat my gaan voort en vroeër sluit my oortjies. En ek sal dit op my besit net vir 'n oomblik. Ek gaan om voort te gaan en die skep van nuwe lêer. En ek gaan om dit te verlos as google.html. En ek gaan baie quickly-- Ek gaan om te steel, eintlik, sommige van hierdie teks net om tyd te bespaar. Ek gaan hierdie plak hier. Ek gaan nie te pla met enige stilering hierdie tyd. Ons gaan hierdie skakel "My Google." En ek gaan om ontslae te raak kry van alles in die liggaam. En ek gaan die volgende te doen. Laat my in zoom. Vorm action-- en as ek kortliks genoem earlier-- whoops-- as ek kortliks vroeër genoem, die optrede van 'n vorm is waar jy die data te stuur na. So google.com/search. En die metode wat ek wil gebruik kan een van twee dinge. Dit kan óf "te kry," as ons hou bespreek, of dit kan wees "post." Vir nou, die fundamentele verskil is, as jy gebruik "kry," al die inligting wat die gebruiker verskaf kry gestuur in die URL. 

Dit is ideaal vir dinge soos soek enjins en 'n paar ander programme, maar in watter omstandighede sou jy nie wil hê om in te vul 'n vorm en het die inligting uiteindelik die URL, soos in jou blaaier se adresbalk? Watter soort vorme doen you-- Gehoor: [onhoorbaar] David J. MALAN: Ja, soos wat? Publiek: wagwoorde. David J. MALAN: Ja, so jy inteken in te Facebook of 'n webwerf. Dit is die gebruiker se toevoer van 'n vorm, 'n tekskassie, maar jy sal waarskynlik wil dit nie vertoon in URL die leser se. Hoekom? Ek bedoel, miskien is daar is 'n paar implikasies sekuriteit op die netwerk, maar more-- hou, meer eenvoudig, wat as jou kamermaat, jou beduidende ander, jou kinders, jou gade lyk deur die leser geskiedenis? Daar is jou wagwoord reg daar in die geskiedenis van die leser. Dit voel nie soos 'n goeie ontwerp. Of selfs meer tegnies, veronderstel jy probeer om 'n foto te Flickr laai of Facebook of wherever-- dit is die gebruiker se toevoer, selfs al dit is 'n bietjie meer interesting-- hoe ek gedrang 'n beeld in die URL bar? Jy kan soort van soort nie. Jy soort kan. Maar, regtig, ek is hard-pressed om te dink dat doen. So ek moet 'n ander metode vir oplaai van foto's na 'n webwerf, en dat ander metode staan ​​bekend as "post." Maar vir nou, sal ons net praat oor "Kry," wat is die eenvoudiger van die twee. Dit plaas net al die toevoer van die gebruiker in die URL. 

So hier is die vorm wat ek skep. Ek wil 'n bydrae. En weet jy wat? Ek gaan 'n raaiskoot hier neem. Ek gaan onthou my insette "Q" vir "navraag." En ek dink dit is een van die oorspronklike ontwerpe, miskien, vanaf 1999. En dan is die tipe van hierdie insette is net gaan om te wees "teks." En dan gaan ek na 'n ander insette het dit beteken 'n naam nie nodig, want ons sal gou sien, die tipe wat is "in te dien." En dit gaan Gee my 'n spesiale knoppie. En dit is dit. 

So laat ek gaan voort en behalwe hierdie lêer. Ek gaan terug na my leser en gaan na google.html. Tik. En dit is soort van yl om die minste te sê. Maar laat my gaan voort en soek vir "katte." En sien ek is op die oomblik op hierdie Cloud9 URL. Maar die oomblik toe ek op hierdie, waar jy hoop ek sal beland? 

Publiek: Google. 

David J. Malan Google. So laat ons kliek Stuur. En inderdaad Ek het weer in werking gestel Google. Reg? Dit is makliker. Dit is ligter. Ek bedoel, my kode is duidelik beter as s'n, ​​uit die gemors wat ons gesien het vroeër. En weet jy wat? Ek gaan hierdie kikker 'n bietjie. Ek het dit nie vroeër noem. Daar is etikette soos H1, vir Heading 1, die belangrikste opskrif in 'n bladsy. "My Google," ek sal dit noem. Laat my herlaai. Dit is op soek na 'n bietjie beter reeds. En eintlik, jy weet wat? Ek het already-- ek gelieg. Ek het gesê ek is nie van plan om hierdie styl, maar ek gaan hierdie styl soos tevore. En my liggaam gaan wees, kom ons sê, teks-align sentrum. Dit is op soek na meer soos Google reeds. 

Ek het 'n reëlbreuk, al is, vir daardie Submit knoppie. En dit blyk dat jy kan paragrawe gebruik, of jy kan meer letterlik net sê, Gee my 'n lynbreuk here-- die br tag. En as ek dit laai, nou gaan dit daar. Dit is 'n bietjie lelik, so ek veelvuldige lyn breek kon doen, maar laat ons nie hier te gulsig te kry. So nou kom ons kyk of dit werk vir "honde." Dit blyk te werk vir "honde," sowel. So, wat is die dwingende afhaal hier? One-- was nie 'n groot sprong na stel 'n paar etikette, soos die vorm merker in die insette tag. Maar meer fundamenteel is, alles wat ons doen is gebruik te maak van ons begrip van HTTP en die feit dat vorme uiteindelik verander Wat is in die URL van die leser, en so, Daarom kan ons meganies insette lewer om 'n bediener deur 'n HTML-vorm en die wete dat die bediener verstaan ​​HTTP, net soos ons liggaam verstaan, soos, skud my hand aanneem, sodat dieselfde protokol, en so kry ons terug die reaksie dat ons uiteindelik verwag. 

So kom ons probeer om een ​​te doen laaste ding wat nou met selfoon, en Ek sal make-- Ek sal voeg hierdie kode om die skyfies. So as jy wil geknoei, jy kan beslis neem dit van daar af. Maar ek gaan om te gaan voort en doen een ding. Ek gaan om voort te gaan en oop te stel my indeks page-- my hallo bladsy soos voorheen, wat het 'n baie van hierdie faux-Latynse teks, of betekenisloos Latynse teks, en has-- dit lyk soos hierdie by hierdie lettergrootte. Maar laat my gaan voort en doen dit. Ek gaan in Cloud9 te gaan. En jy hoef nie hierdie stap doen. Ek sal net doen dit self. Ek gaan klik Deel. En dit is 'n funksie net van Cloud9, waardeur Ek kan my omgewing openbaar te maak. 

En net ter wille van demonstrasie, laat my dit doen. Ek gaan my aansoek openbaar te maak. Let daarop dat dit se waarskuwing my, is Ek seker ek wil om dit te doen, want dit gaan almal maak in die wêreld, of dit nou hier nou of later na die video kyk op die internet kan sien wat ek sien. Maar dis OK. Ek gaan om te sê "Klaar." En laat ek jou aanmoedig, as ek gedoen het hierdie correctly-- laat my toe om eers te toets. Gaan voort, as jy nie mind-- in 'n leser op jou rekenaar, gaan na hierdie URL, en hopelik jy sal my Latynse teks sien. En duidelik te wees, is dit loop nie op my laptop. Dit is in die wolk. Dit is op Cloud9, letterlik, maar Ek het my werkplek openbaar gemaak sodat almal op die internet kan toegang tot my Latyns-tuisblad. 

Gaan na dieselfde adres op jou selfoon, as jy kon. As dit jy kos, al is, jy kan net kyk oor 'n skouer. Gehoor: [onhoorbaar] David J. MALAN: Ek is jammer? Gehoor: [onhoorbaar] David J. MALAN: Net Latynse woorde. Dis al. Maar dit is wat jy moet sien. 

Gehoor: Ja. David J. MALAN: Ja. Ja. OK. So kan ek dan jou telefoon vir 'n oomblik? So, hopelik, as jy toegang Dit is, moet dit lyk byna onleesbaar. Dis still-- Ek bedoel, dis deurmekaar as gevolg van die Latyn. Maar dit is ook deurmekaar vir watter ander rede? Soos wat welbehaaglik jy hieroor? GEHOOR: Dis klein. David J. MALAN: Dis super, super klein. So, hoe kan ons dit regmaak? Dit is super, super klein op Victoria se selfoon en, as jy het getrek it up jouself, waarskynlik klein op jou selfoon sowel, tensy jy het toeganklikheid instellings aangeskakel. Wat is dit? Jy kan net knyp en Klik op die, wat is werkbare, maar dan moet jy net sien 'n paar woorde op 'n slag. So wag 'n minuut. Ek weet hoe om dit op te los. Reg? Ek kon gebruik CSS, en ek kon die verander lettergrootte van 12-punt tot 24-punt. Maar die newe-effek van daardie, natuurlik, gaan nou, op 'n rekenaar of 'n skootrekenaar, nou die teks is twee keer so groot. En so sou dit soort van lekker wees om te onderskei tussen toestelle, en dit blyk daar is maniere om dit te doen. Daar is 'n hele paar verskillende maniere, in werklikheid, waardeur die gebruik van CSS en liefhebber funksies dat ons nie in gaan in groot detail, jy kan in wese navraag die leser en sê: As jou skerm is kleiner as hierdie baie pixels, gebruik hierdie lettergrootte. As jou skerm is groter as hierdie baie pixels, gebruik hierdie ander lettergrootte. 

Jy kan selfs liefhebber steeds. As jy al ooit besoek 'n webblad wat, op 'n lessenaar, het 'n groot spyskaart miskien af ​​na die kant, en dan al die inhoud is aan die kant van daardie menu-- dit is soort van 'n gemeenskaplike paradigma. Menu aan die linkerkant, inhoud op reg, of andersom. Maak nie regtig werk op mobiele wanneer jou skerm is net hierdie baie pixels wyd. So meer algemeen op die selfoon is, jou spyskaart sal skielik kry duie gestort het, en jy het om te klik op 'n knoppie om dit te sien, of die webwerf sal die spyskaart sit bo en sit die inhoud daaronder. En jy kan dit te implementeer dinge in verskeie maniere, ook. Jy kan jou programmeerders vra, hey, span, enige tyd jy sien 'n HTTP-versoek van 'n Android- toestel, 'n Microsoft toestel, 'n Google toestel, 'n Apple-toestel, gebruik hierdie lettergrootte en gebruik hierdie kieslys uitleg, of anders gebruik hierdie standaard groter uitleg. 

Nou, met behulp van watter fundamentele tegniek vandag kon die ingenieurs gebruik om te weet of dit 'n iPhone, 'n Android-selfoon, 'n skootrekenaar, 'n lessenaar besoek bediener die maatskappy se? Daarin kry hulle daardie inligting? 

Publiek: Selected 

David J. MALAN: Ja, die HTTP-header. Daarop trek al die HTTP-versoek kom van hul kliënte hul bedieners sluit, binne daardie virtuele koevert, 'n hele klomp van HTTP-hoofde, waarvan een is die leser en die bedryfstelsel selfs, as jy omgee om dat die vlak van detail. Nou, dit is 'n kriptiese lyk string, maar Daar bestaan ​​sagteware wat jou sal net vereenvoudig dat, en jy kan net vra in programmering code-- PHP, Java, C ++, whatever-- wat telefoon is this-- Watter toestel is hierdie gebruiker met behulp van? En dan kan jy sê, wys hulle hierdie weergawe van die webwerf as dit 'n selfoon. Wys hulle hierdie weergawe van die webwerf as dit 'n laptop of desktop. Maar jy hoef nie eens bediener-kant kompleksiteit. Jy kan selfs die eenvoudigste dinge te doen. 

Ek gaan om dit te doen. Ek gaan om voort te gaan na my Cloud9 omgewing, en ek gaan 'n tag voeg wat jy gesien het in Google voor. Dit is bekend as die metatag. En ek onthou nog nooit hierdie een, sodat Ek gaan dit hier neer te skryf. Meta name = "vertoonvenster" en dan inhoud = "width = breedte toestel, intital skaal = 1 "en dit is dit. 

So dit kan net so goed wees soos 'n magiese inkantasie. Dit is nie al wat duidelik nie, maar dit het iets te doen met die vertoonvenster, en die vertoonvenster is net die liggaam van 'n webblad, die reghoekige gebied wat definieer die meeste van die bladsy. En dit is net te vertel die leser, jy weet wat? Maak die wydte van hierdie bladsy effektief gelyk aan die wydte toestel. Met ander woorde, moenie aanneem dat jy het soort van 'n onbeperkte ruimte. Aanvaar jy net soveel ruimte as die toestel self is groot. En so nou, as ek dit herlaai in my leser, sien ek geen verandering. Maar as ek dit gedoen het correctly-- en laat ek my fingers-- steek as jy al herlaai jou fone, doen jy sien 'n dwingende verandering? Ja, is that-- 

Gehoor: [onhoorbaar] David J. MALAN: Ja. OK. So waarskynlik meer leesbare nou? Nog klein, om eerlik te wees, maar nie so klein as om onbeheerbaar wees. En ek kon beslis hierdie oorheers verder met CSS of op die bediener kant, maar hoe meer wat jy sien is meer en meer funksies bygevoeg om kliënt-kant environments-- JavaScript, soos ons sal bespreek môre, CSS, en HTML-- so dat al hierdie navrae kan gedoen word op die kliënt ten einde die moeite bediener 'n baie minder en nie hê om tred te hou met, vir Byvoorbeeld, die konstante aanslag van nuwe bedryfstelsel weergawes, nuwe leser weergawes. Jy kan net laat die leser vra die toestel, hoe groot is U, en dan maak 'n bietjie logiese besluite wat gebaseer is op daardie. Maar ons sal sien meer geleenthede vir logiese besluite môre in die konteks van 'n programmeertaal. 

So, enige vrae, dan, op web ontwikkeling? Vandag is nie web ontwikkeling, per SE, aangesien die meeste alles wat ons gedoen het was baie estetiese, as jy wil. Daar is geen besluitneming in die kode wat ons geskryf het, en so is dit hoekom HTML is 'n opmaak taal, nie 'n programmeertaal. Maar môre sal ons neem 'n vinnige blik, uiteindelik, op JavaScript, wat 'n werklike ontwikkeling taal waarmee ons 'n bietjie meer te doen. 

Enige vrae? Wel, laat ek stel twee geleenthede opsioneel vir huiswerk. Een is-- hierdie Cloud9 rekeninge sal nie verval. Jy is welkom om te gebruik hulle geknoei met. Dit is die vrye vlak van diens. Besef dat, as wanneer die skep van jou werkspasie, jy dit openbaar gemaak, wat beteken nie dat enige iemand op die internet kan sien wat jy tik. So miskien net oorweeg jouself nie verleentheid As jy om jou eerste web bladsy daar buite in die openbaar ongeluk, maar niemand gaan weet daar in elk geval sien. 

En two-- laat my gooi hierdie URL sowel, veral as jy het in vandag 'n bietjie minder gemaklik as ander, onseker wat al hierdie dinge beteken. Besef dat baie meer van hierdie video, wat beide 'n goeie manier om aan die slaap raak en ook om te lag terwyl Sodoende het ook 'n baie maatschappelijk interessante en sekuriteit-relevante besprekings daarop uit John Oliver, hoewel 'n komediant. 

Maar as daar geen verdere vrae, dit bring ons by die onthaal. So hoekom nie ek draai op die musiek. Daar moet drankies en snacks buite. Ek is bly om te meng vir so Solank as wat mense wil, beantwoord vrae meer een-tot-een. Maar, anders, jy is welkom af te neem op enige punt, en ons sal julle weer sien môreoggend vir 'n bietjie meer. Goed, dankie.