David J. MALAN: Bine. Ne-am intors. Așa că, obiectivul acestei sesiuni finale este de a introduce câteva concepte dar, de asemenea, da tuturor o șansă să se întindă un fel de degete și de fapt, a face ceva un pic hands-on. Scopul nu este de a transforma noi toți în dezvoltatori web prin orice mijloace, dar într-adevăr doar pentru a vă oferi un gust de unele din construcțiile fundamentale ale ceea ce merge în programare web și astăzi web dezvoltare, astfel încât partea statica a lucruri-- nici o logică, nici o programare limbă, doar conținut static. Și ne va da o oportunitate pentru a vedea de fapt ce este un server de web este, vezi ce un fișier HTML este, a se vedea ce este HTTP este, de fapt care servește în sus. Dar înainte de a se arunca cu capul în orice retrospectivă întrebări despre cloud computing sau de securitate sau orice altceva între? Nu? Bine, bine, hai a face acest lucru, doar în cazul în procesul de înscriere pentru ceva durează câteva minute. Ne vom lăsa să-l facem în fundal. Du-te mai departe, dacă ai putea, la această adresă URL aici-- c9.io. Aceasta este o terță parte service-- platforma ca un serviciu, în cazul în care will-- care va va invita să se înscrie pentru un cont, și va da fiecăruia dintre voi un cont în așa-numitul nor pe infrastructura altcuiva, o companie numita Cloud9. Dar ceea ce e frumos despre acest lucru este că ei vă dau o aproximare a unei actual de dezvoltare, lumea reală mediu, chiar dacă în nor și într-un browser web, și vom folosi asta de fapt experiment un pic astăzi. Și apoi mergeți mai departe și doar să navigați drumul spre procesul de înscriere dacă ai putea. Așa că se întâmplă să folosească acest lucru în clasa Eu predau pentru toți studenții noștri, atât în ​​campus și în afara acum, și este înlocuit ceea ce punct de vedere istoric a fost software-ul în alt mod descărcabil. Deci, ce ai avea acces la este una dintre aceste mașini virtuale, în esență, că am descris mai devreme. Așa că această companie Cloud9, probabil, chiriile de la un al treilea, într-adevăr party-- în acest caz, Google-- un întreg grămadă de mașini virtuale că ei cumva se taie în sus, în iluzia de servere individuale că fiecare dintre noi are un control deplin asupra. Nu e destul de precisă pentru a spune că acestea sunt mașini virtuale, deși, pentru că ceea ce Cloud9 folosește de fapt este o tehnologie relativ nouă numita conteinerizare. Și lasă-mă apuca de această imagine aici pentru a picta această imagine. 

Un container este, dacă vă amintiți imaginea de la mai devreme, un pic mai usor greutate decât o mașină virtuală. De fapt, în timp ce ultima timp despre care am vorbit acolo fiind o funcționare sistem și un hypervisor și apoi sistemul de operare oaspete, vizitatorule sistem de operare, de operare vizitator sistem, pe partea de sus a ta hardware fizic, diferența cu această nouă tehnologie, containerizare, este că toate acestea într-un fel împărtășesc același sistem de operare. Dar ei încă creează iluzia tuturor având propriul său exclusiv drepturi administrative și fișiere pe server. Dar nu e mai puțin software între tine și hardware-ul. Rezultatul, care este, în Teoretic, o performanță mai mare, deoarece utilizați sau pierdem mai puține resurse pe faptul că așa-numitul strat de virtualizare. Deci, acest lucru se numește conteinerizare prin natura prin intermediul unei tehnologii numite Docker, care este foarte mult să intre în propria sa. Și acest lucru este ceva ce inginerii de la compania dvs. ar putea un fel de tip începe să vorbești despre curând dacă acestea nu au deja, deși nu există cu siguranță nici motiv pentru a sari pe orice aliniază. 

Deci, cu care a spus, ce probabil te vezi acum este un ecran care arata un pic ca asta. O.K. Și, sună-mă dacă nu peste. Și, dacă deci-- voi veni dacă nu. Mergeți mai departe și faceți clic pe acel mare în plus pentru a crea un spațiu de lucru, și veți vedea un ecran de genul asta. Puteți apela în spațiul de lucru nume tot ce vrei acum. Și, de fapt, doar pentru simplitate, du-te si-- bine, unii dintre voi au deja spații de lucru. Spune-i cum ai afaceri o doresti, Harvard, joi, orice doriți. Nu aveți nevoie de o descriere. Puteți să-l lăsați un privat, cu excepția cazului în tine au deja o grămadă de spații de lucru. În cazul în care ești forțat să o facă publică, e bine pentru scopurile de azi. Aici, de asemenea, este una dintre upsells. Primești un singur spațiu de lucru privat de Mod implicit. Dar, dacă vrei mai mult, va trebui să plătească pentru mai mult. În caz contrar, ei te forța pentru a face publice dvs. de lucru. Dar asta e bine, pentru că, de asemenea, țintă acest lucru la comunitățile open-source pentru a încuraja oamenii să de fapt, să colaboreze. 

Și ultimul lucru important, deși, este, după ce alegeți un nume și după ce alegeți privat sau public, faceți clic pe HTML5, pictograma mare portocaliu al doilea din stânga, și apoi faceți clic pe Creare spațiu de lucru. Și va, probabil, să ia un minut sau cam asa ceva, dar veți avea atunci un mediu, odată ce face acest lucru, care arată amintește de ceea ce am pe ecran aici, acum. Dar, din nou, ar putea dura un minut sau mai mult pentru a ajunge la acest ecran odată ce ați făcut clic pe Creare spațiu de lucru. Dar, pur și simplu mă semnalați peste dacă m-ai dori pentru a arunca o privire la orice sau sfătui. In regula. Asa ca voi fundal asta pentru acum. Sună-mă dacă ai peste par să aveți dificultăți tehnice. Dar, din nou, ar putea dura puțin pentru că, pentru a deschide. Și să mergem mai departe și să vorbim despre ce aceasta înseamnă de fapt pentru a face o pagină web, ce HTML este, și cum toate acestea acum interconectează așa cum începem să utilizeze efectiv o parte din tehnologia. Deci, se pare că eu pot du-te pe micul meu Mac aici, deschide un simplu program numit TextEdit, sau pe Windows am putut ceva deschis numit Notepad.exe. Și aș putea pur și simplu, pur și simplu face ceva cum ar fi astea-- "Bună ziua, lume." Și apoi am putea salva acest lucru ca hello.txt Deci, nici o magie acolo. Acest lucru nu are nimic de-a face cu web programare, nimic de-a face cu HTML. Doar crearea unui fișier text simplu. Dar se pare că un web pagina doar este literalmente. Este un text simplu fișier text care conține că s-ar putea tastați la tastatură, dar de obicei, dar nu întotdeauna se termină în care nu .txt, dar .html sau .htm. Și tu nu faci doar tastați cuvinte în fișierul. de fapt, va trebui să utilizați lucruri numite tag-uri sau, mai general, ceva numit limbaj de marcare. 

Așa că am de gând să tastați foarte repede și apoi să explice următoarele. Mă duc să mai întâi acest tip, care spune, hei, browser-ul, aici vine un pagina de web scrise în HTML. Și aceste două lucruri împreună spun, hei, browser-ul, cu următorul text este într-adevăr HTML. Hei, browser-ul, aici vine cap sau în partea de sus a paginii mele. Hei, browser-ul, în interiorul vârfului pagina mea, a pus un titlu care este, "Bună ziua, lume." Hei, browser-ul, după ce șeful meu pagina, aici vine corpul paginii mele. Si, hei, browser-ul, corpul meu pagină ar trebui să spun, de asemenea, "Hello World". Deci, ce sunt detaliile importante aici? Aceasta este ceea ce este, în general, numit o declarație de tip doc, și, sincer, este un pic greu să memoreze acest lucru la început. Pur si simplu un fel de copy-paste-l. Aceasta este calea formală de a spune, hei, browser-ul, Sunt folosind HTML versiunea 5, care a ieșit oarecum recent. Este o incantație magică pe care unii oamenii cu un sentiment de proiectare slaba a decis să pună la foarte de sus a fișierului. Chiar daca este o putin arcane, asta e tot ea hei înseamnă:, browser-ul, aici vine cu versiunea 5 a HTML. 

Restul a fost cu noi de ceva timp, punct de vedere istoric, dar a evoluat, și este probabil a fost obtinerea un pic mai simplu. Observă câteva caracteristici din ceea ce am evidențiat. Există aceste lucruri cu unghi brackets-- consola stângă și suportul de dreapta. Și observați simetrie aici. Și prin simetrie, vreau să spun, la fel cum am au această etichetă de început aici sau o etichetă deschisă dacă vrei, aici am o tag închidere sau un tag final care este diferită numai în măsura în care acest lucru are slash la începutul cuvântului HTML. Și vă puteți gândi acest lucru ca am fost la întâmplare înainte de a propune, hei, browser-ul, aici vine unele HTML. Și, în schimb, hei, browser-ul, asta ea pentru începutul și sfârșitul anului HTML--. 

Între timp, hei, browser-ul, aici vine capul paginii mele. Hei, browser-ul, asta-i pentru cap. Hei, browser-ul, aici este corpul paginii mele. Hei, browser-ul, asta este pentru corp. Și în interiorul, care este o parte text arbitrar pentru acum. Și în interiorul capului, între timp, este o parte arbitrară, dar etichetată, ca să spunem așa, textul care spune, titlul pagina mea va fi "Bună ziua, lume." Acum, pentru acum, poți presupunem că browsere au only-- sau, mai degrabă, pagini web au doar două parts-- capul și corpul. Și capul este, în general, doar cum ar fi bara de meniu, chestii într-adevăr doar la foarte sus. Iar corpul este intestinele paginii, tot în acel dreptunghi mare care umple ecranul. Așa că am de gând să merg mai departe și de a face acest lucru. Am de gând să merg mai departe și faceți clic pe Salvare, Salvare fișier. Si voi salva acest lucru ca hello.html, și eu sunt doar de gând să pune-l pe desktop-ul meu. Iar eu mă duc înainte și faceți clic pe Salvare. Si notice-- Mac-ul meu la cel țipă la mine. Sunteți sigur că vrei să faci asta? Si eu voi spune, da, utilizați HTML. Știu mai bine în acest caz. Și acum am de gând să merg la desktop-ul meu în cazul în care am acest fișier dintr-o dată. Și am de gând să faceți dublu-clic. Și veți observa că, prin implicit, Chrome deschis. Asta pentru asta browser-ul prestabilit. Și se spune: "Bună ziua, lume." Dar se spune "Bună ziua, Lumea "în două locuri. Observă partea din stânga sus. Destul de greu să ratezi asta. Este mare și îndrăzneț. Si unde altundeva nu pare să spună: "Bună ziua, lume"? 

AUDIENTA: fila. 

David J. MALAN: Da, tab-ul în sine. Așa că, atunci când am spus șeful de Pagina este totul top-- și într-adevăr, acest lucru este titlul. Doar în tab-ul aici. Și eu pot trage această filă astfel încât să nu se confunde. Aceasta este doar o singură filă acum, și într-adevăr, vom vedea "Bună ziua, lume" aici și "Bună ziua, lume" aici jos. Așa că destul de simplă. Dar este, de asemenea, destul de simplu. Si, de fapt, am mărită. Pot schimba dimensiunea fontului doar pentru a mări pentru accesibilitate. Dar hai să facem acum ceva un pic mai interesant. 

Mă duc la go-- hopa, să mă întorc la fișierul meu text. Mă duc înapoi pentru a-mi fișier text, și voi pentru a schimba acest lucru și spune "Bună ziua, Disney World." Salvați. Și du-te înapoi pentru a-mi browser-ul și faceți clic pe Reîncărcare. Și acum, desigur, spune ca "Disney World." Și voi mări în mod artificial în doar așa că este mai ușor de văzut. Așa că acum, din păcate, am cam vreau sa-- de fapt, este o caracteristică pentru Mac. Vreau să faceți clic pe Disney World și du-te undeva ca disney.com, dar care nu funcționează. Deci, un principiu de bază al web este hyperlink-uri, link-uri care merg în altă parte. Deci, cum fac asta? Ei bine, aș putea spune, "Bună ziua, http://www.disney.com." Salvați această. Reload. Dar acest lucru prea, nu se poate face clic. Și ce e frumos aici, chiar dacă acest lucru nu este funcțional încă, este că se pare că browser-ul nu literalmente numai ce-am spus să fac. Așa că, dacă am introduce o adresă URL de genul asta, este doar o să-mi arate adresa URL. Am nevoie pentru a utiliza tag-uri sau de marcare limba pentru a spune de fapt browser-ul pentru a face chiar mai mult. Așa că am de gând să merg mai departe și șterge acest lucru pentru un moment. Si eu voi spune, hei, browser-ul, începe o ancora aici, un link ca să spunem așa. Iar hiper-referință, destinația din această ancoră, ar trebui să fie această adresă URL. Și observați citatele mele. Aș putea folosi ghilimele simple, de asemenea, dar trebuie să fie coerente, și, în general, aș folosi doar ghilimele duble să-l păstrați simplu. Observă am de gând să închidă tag-ul. Și apoi aici voi să spunem, "Disney World." Și acum am nevoie de niște symmetry-- Suport deschis, / o, închis paranteză. 

Deci, ce am introdus? Am avut deja câteva tag-uri. HTML, Head, titlu, Trup, sunt toate etichetele, ca să spunem așa, cu omologii deschise și închise. Dar observați, acest lucru este un fel de fundamental diferite. Aceasta este ceea ce vom numi în HTML un atribut. Și un atribut este doar o pereche de chei-valoare. Acesta este un lucru obișnuit în calculator science-- pereche cheie-valoare. Este un fel de instrument al comerțului. O cheie și o valoare. Un cuvânt și apoi unele alt cuvânt sau cuvinte. Și, în acest caz, cheia este href, iar valoarea este acea adresă URL completă. Și ce un atribut nu este influențează comportamentul unei etichete. Și, în acest caz, avem nevoie de a influența comportamentul etichetei ancoră, pentru că avem nevoie pentru a ancora această legătură undeva. Si cum faci asta este prin intermediul atributului. 

Așa că am de gând să merg mai departe și salvați fișierul acum. Du-te înapoi la browser-ul si reincarca. Și voila, avem acum începutul unei pagini web legitime. Super-simplu, dar dacă eu plutesc peste Notă astea-- în colțul din stânga jos, E super-mici. Dar, vezi tu faci www.disney.com. Și, dacă faceți clic pe el, într-adevăr, acest lucru mă whisks departe de disney.com. Acum, lucru curios aici este că nu este URL-ul best-- cea mai vandabilă, dar asta e bine, deoarece acest fișier nu exista pe World Wide Web. Ea există ca un fișier local în aparență Utilizatorii mei directory-- / jharvard-- pentru John Harvard-- / pentru desktop. Dar ea are o adresă URL. Se întâmplă să fie locale. Din păcate, nici unul dintre voi nu poate vizita acest lucru, pentru că dacă tastați această adresă URL, v-ar fi spune browser-ul dvs., căutați un fișier numit hello.html pe hard disk-ul. Și, desigur, cu excepția cazului în care ați urmat de-a lungul manual, nu va exista acolo. 

Deci asta e bine. Avem încă nevoie de un mod, în cele din urmă, pentru a obține acest fișier în web, dar hai sa tachineze in afara de un cuplu implicațiile de securitate a ceea ce tocmai am a văzut și cravată-l înapoi la mai devreme discuția din această dimineață. Se dovedește că, în cazul în care un browser-ul literalmente face ce-am spus să fac, și se pare că pentru a fi cazul în care o etichetă ancoră este influențat de valoarea acest atribut numit href dar afișează acest lucru text, acest lucru s-ar părea pentru a sugera că aș putea pune URL în ambele locuri și apoi reîncărcați și vedeți acum URL-ul și du-te la URL-ul. Observați, dacă treceți cursorul peste partea de jos-stânga, Mă duc într-adevăr, încă disney.com. 

Așa că, dacă ai fost vreodată phished-- P-H-I-S-H-E-D-- cu unul dintre aceste e-mailuri false de la PayPal cum ar fi banca ta, ați ajuns, probabil, link-uri în interiorul din e-mail pe care le citești asta vă spune să faceți clic aici pentru a merge de confirmare parola sau confirmați data de naștere sau socială sau ceva de vedere social inginerie să dezvăluie informație. Aș putea lua un fel de Avantajul acestui fapt, nu aș putea? Aș putea spune ceva cum ar fi, www.paypal.com. Și în loc de disney.com, eu ar putea merge la, cum ar fi, badguy.com. Reload. Și, cât de ușor este să păcălească, în special un cititor de non-tehnic sau o citire cu curiozitate cititor decât să faceți clic un link ca aceasta, care, dacă am it-- clic pe Eu de fapt, nu vreau să merg badguy.com. Nu știu ce e de fapt acolo. Așa că paypal.com, anunț, este ceea ce spune că va, dar, desigur, dacă mă uit în jos super-redus, este un pic neclare, dar spune badguy.com. Asta e chiar acum spune doar că mă duc la locul nepotrivit. Iar când am spus mai devreme că băncile într-adevăr, nu ar trebui să încurajeze sau să tren utilizatorii în linkuri clic, acest lucru este doar o manifestare a acesteia. Și este atât de simplu. Acum ești un adversar dacă ai face ceva de genul asta și să încerce să păcălească un utilizator să viziteze site-ul tau. Dar, pentru moment, vom păstra lucruri frumoase și curate. Vom merge mai departe și înapoi aceste modificări. Reîncarcă pagina. Și mă duc înapoi la disney.com. 

Să vedem dacă nu putem șicana acest lucru în afară un pic mai mult. Deci, "Bună ziua, Disney World." Mă duc să spun aici jos. Poate că voi face loc. "Sperăm să vă bucurați-vă șederea!" Salvați. Reload. Nu e rea-- asta nu e ceea ce am intenționat, nu? Vreau să spun, dacă îmi tratez textul meu fișier ca un procesor de text, Ce ai spera s-ar întâmpla aici? Da, mă simt ca acolo ar trebui să fie o pauză de linie aici, asa ca se simte buggy într-un fel. Dar asta e de fapt în mod deliberat, pentru că la fel ca înainte, browser-ul merge doar faci ce spune sa faci. Nu l-am spus să se rupă de linii. Nu am spus să se mute în jos, chiar deși, în mod intuitiv, mă simt ca și cum am făcut-o. Deci, se pare că avem nevoie un mai mic marcaj, și voi rezolva această problemă, după cum urmează. Voi prefața la această primă salut cu ceea ce se numește un paragraf etichetă. Și apoi am de gând să merg mai departe și încheiem altă teză într-un alt paragraf tag-ul, chiar dacă acestea sunt punctele de super-scurt. Acum am de gând să salveze. Reload. Și acum avem asta spațiu, și am un fel de au semantica două paragrafe separate. 

Asta e tot fin și bun, dar ar fi frumos pentru a adăuga o imagine la această pagină, așa că am de gând să merg caut Mickey Mouse-ul pe Google Images. Și doar pentru distracție, sunt va apuca această imagine. Mă duc să merg mai departe acum și apuca URL-ul acestei imagini, deși există diferite moduri de a face acest lucru. Deocamdată, eu sunt doar de gând să copiați URL-ul. Mă duc să mă întorc în textul meu fișier, și voi spune aici, img src = citat unquote că URL-ul, super-lung. Și apoi noțiunea de imagine este un pic diferit. Nu există într-adevăr nici o noțiune de pornire o imagine și se încheie o imagine, cum ar fi un start tag-ul o eticheta de final. Deci, se simte un pic ciudat la mă să fac acest lucru semantically, să aibă o etichetă close-imagine. Nu e incorect. Este perfect corect, și este încurajată, dar există notație prescurtare. Pot cam simultan deschide și închide aceeași etichetă, și care va face browser-ul fericit. Deci, e doar un pic mai succinte pentru lucruri că într-adevăr nu conceptual sens pentru a începe și se termină. Ei pur și simplu sunt acolo, sau nu sunt. 

Așa că am de gând să salveze și du-te înapoi pentru a-mi "Bună ziua, lume", pagina de reîncărcare. Și este un pic de sub control, pentru că această imagine este de fapt un pic mai mare, dar asta e în regulă. Am putea redimensiona într-un program. Sau știi ce. Doar pentru a demonstra, sunt va spune de fapt că lățimea acestui lucru ar trebui fie doar 200 de pixeli, 200 puncte. Lasă-mă să merg mai departe și de a salva și reîncărcați, iar acum pagina arată un pic mai rezonabil. Dar observați modelul. Ei bine, m-am cam învățat voi toți de HTML într-un anumit sens, cel puțin conceptual, deoarece toate HTML este este aceste tags-- tag-uri deschise, tag-uri închise, și atribute care modifice comportamentul lor. Si, se pare că, în fiecare tag-ul poate avea zero sau unu sau două sau mai multe atribute, fiecare dintre care face ceva un pic diferit. Acum, de unde știi ce există? Trebuie doar sa asculti pe cineva ca mine să-ți spun ce există, sau pur și simplu ai Google în jurul pentru un tutorial pe HTML, și într-adevăr este atât de simplu. 

Într-adevăr, când am fost un student de ani în urmă și am învățat HTML, unul dintre învățătura mea matematică asistenți tocmai a cheltuit un pic de timp mă tutoring pentru ca și o jumătate de oră, o oră, și apoi am fost pe drum. Eram pe drum spre a face site-urile cele mai hidoase vreodată, care, aparent, nu am într-adevăr a progresat dincolo. Dar ideea este că, odată ce să înțeleagă aceste ideas-- simplu dacă text-- Arcane, dar acestea simplu idei de a începe un gând și închiderea unui gând, păstrarea totul frumos echilibrat, cauta ceva, care modifică Comportamentul acestei tag-ul, asta e tot există la acesta. Și, de fapt, dacă am du-te acum la ceva de genul google.com-- de fapt, Să mergem un loc un pic mai mult reasonable-- stanford.edu. Și am de gând să merg la View, Dezvoltator, View Source. Este urât, dar notice-- și voi mări Notă unele lucruri pe care e familiarizat deja. Nu e asta de aici, care este un browser. Aici vine HTML5. Nu există HTML. Se pare că există o atribut pe care nu am făcut-o utilizați care specifică limba paginii, iar acest lucru poate ajuta cu automată Traducere și chestii de genul asta. Iată capul paginii. Iată titlul paginii Stanford. E o etichetă nu am vorbesc despre tag-ul yet-- Meta. E doar un fel de informații generale. El ajută cu SEO, sau Optimizare motor de căutare, sau rezultate Google de căutare sau altele asemenea. Dar, dacă vom căuta în continuare, să păstreze în căutarea, aici e tot corpul tag-ul. Și nu există buchete de altele tag-uri noi nu am vorbit încă. Dar Div este una pentru o diviziune a paginii. E ca un dreptunghi invizibil în cazul în care un fel de care doriți să mental împărțiți pagina în diferite unități on-line. Și apoi o mulțime de divuri I a se vedea, ceva numit clasa, dar vom reveni la asta. 

Acest lucru este Formulare interesting--. Formele sunt peste tot pe web. Orice casetă de căutare pe folosit vreodată este o formă. Si, deci, să vedem de fapt. Formă. Acțiune. Acțiunea acestei forme, oricare ar fi din motive istorice, este acea adresă URL. Metoda este "post." Se pare că cererile HTTP pot utiliza verbul "a lua", așa cum am văzut mai înainte, sau "post." Și se va vedea o diferență din acest lucru într-un moment. Hai să vedem de fapt ce este asta. Lasă-mă să mă întorc la pagina Stanford. Ce formă sunt ele vorbesc despre, crezi? Ce sare la tine? 

AUDIENTA: caseta de căutare. 

David J. MALAN: Da. Așa că până la partea din dreapta sus aici este această casetă de căutare. Și asta e modul în care au pus în aplicare un it-- tag-ul, care este literalmente formă agatate deschisă. Și apoi să caute ceva. Să căutăm un amic din mine-- "Nick Parlante." Introduce. Și, desigur, a mers la un ușor URL-uri diferite. Lasă-mă să mă întorc aici. Să căutăm pentru "cursuri". La naiba. Am fost la o altă adresă URL. Așa că, Stanford adăugând ceva magie că nu mă duci la adresa URL că am văzut în acțiune atribut acolo. Dar, acest formular aici este pus în aplicare pur prin intermediul acestui marcaj aici, aceste tag-uri. De fapt, aici e intrarea pentru tipul de căutare pe care doriți. Aici este de intrare pentru un alt tip de căutare. Aici este de intrare pentru șirul în sine. Și astfel, scopul nu este să-și încheie mintea noastră în jurul valorii de toate aceste tag-uri ci doar pentru a vedea. Doar că deschiderea și închiderea tag-uri și lucruri uita în sus. Da? Victoria? 

AUDIENTA: [inaudibil] David J. MALAN: E o întrebare bună. Asta e un pic mai complicat pentru a vedea. Lasă-mă să vin înapoi la asta întrebare în doar câteva minute atunci când ne uităm la ceva numit foi CSS, sau de stil în cascadă, și putem încerca să deducem la fel de mult din pagina. Așa că, dacă luăm acum o privire la google.com, să vedem ce pagina lor arată. Te-ar Sunt-- că e drăguț azi. O.K. Totul este gata. Bine, deci View Source. Ați crede că Google are într-adevăr frumos codul sursă. Așa că, se pare, ce se întâmplă aici? Și, de fapt, acest lucru nu este chiar HTML. Acest lucru este ceva numit JavaScript. Și să păstreze merge și merge. Nici nu știu de unde începe pagina. Am de gând să folosiți comanda F, HTML placuta deschis. Bine, acolo este. Am găsit începutul paginii, și există atât de multe lucruri aici. 

Ce este, de fapt se întâmplă? Ei bine, știi ce, putem curăța asta. Dacă, în schimb mă duc la această Inspect Bara de instrumente, acest instrument special de diagnosticare, și du-te să nu de rețea, unde ne continuăm astăzi, dar dacă mă duc la elemente, ceea ce este într-adevăr frumos este că un browser are o mulțime ochi mult mai bine decât mine. Iar browser-ul poate citi mizeria unei pagini web, că HTML e-mail noi doar sa uitat la, și poate analiza sau citit și analizati si reformata-l într-un mod uman prietenos frumos. Deci, ce mă văd acum în acest ecran aici sub elemente, același conținut exact, dar au crestate totul, le-l colorized, dar este exact același text, pe care am descarcat de pe server. 

Și ce e frumos este acum eu pot vedea în organism, pentru o notificare instance--, pagina este încă compusă de doar un cap și un corp, și mă pot arunca cu capul ierarhic aici. Observați că Google pare să aibă la divs-- acesta și acesta. Pot extinde asta. Există o întreagă grămadă de alte divuri. Deci, e un pic mai complexă. Dar asteapta. Acest lucru pare atât de mult mai mult care poate fi citit, relativ, decât aceasta. De ce este Google jenant în sine doar prin trimiterea această mare mizerie de cod unora sortare doar pentru a pune în aplicare ceva care arată atât de simplu la prima vedere? Cum ar fi, de ce nu adăuga mai multe spații? De ce nu l-au lovit Enter așa cum am făcut-o? Uite ce bine am fost la scrierea unei pagini web. Am lovit Enter atât de sârguință. I indentate astfel încât totul este atât de frumos și ușor de citit. De ce Google nu practică același lucru? 

AUDIENTA: [inaudibil] David J. MALAN: Bine. Foarte corect. Ei nu au unele persoană la Google manual actualizarea paginii de start mai. Nu-i mai 1999. Deci, ei au software-ul. Ei au alte instrumente care genera în mod dinamic sunt HTML. Desigur, acest cod în sine a fost scris de oameni, dar realitatea este, este destul de corect să spunem, browser-ul cu siguranță nu de îngrijire cât de murdar este codul. Dar, există o chiar mai mult motiv tehnic convingător că Google distribuie HTML lor cod într-un astfel de neglijent, aparent mod copleșitor toate ambalate împreună cu foarte puțin way-- foarte puțin în modul de formatare așa cum am făcut-o. 

AUDIENTA: [inaudibil] 

David J. MALAN: Mai repede? De ce? Și ce i-ai spus, Lydia? Mai repede? De ce mai repede? AUDIENTA: [inaudibil] David J. MALAN: E nici un spațiu pentru a citi. Da. Deci, gândiți ce este un spațiu. Astfel încât fiecare personaj pe tastatură ia o anumită cantitate de spațiu pentru a reprezenta, fie fizic, cum ar fi ea ocupă mult spațiu că, sau cumva sub hota, care are nevoie de memorie. Și, ca un aside-- și o vom vorbesc mai multe despre aceasta mâine fiecare caracter de pe tastatură necesită în mod obișnuit de 8 biți, sau un octet. Deci, un model de 8 zerouri sau cele, sau doar 1 octet, așa cum am oamenii s-ar spune în mod tipic. Deci asta e mic, dar este încă non-zero. Este încă o anumită cantitate de spațiu. Prin urmare, dacă un inginer sau Google hit-uri bara de spațiu doar o dată, și să presupunem Google-- este super-popular-- să presupunem că un miliard de oameni vizita pagina lor de origine o zi, sau un număr de persoane vizitați pagina de start A miliarde de ori pe zi, cati bytes suplimentari are acea inginer de software pur și simplu costa Google prin lovirea lui sau ei spațiu bar de o dată? 

AUDIENTA: [inaudibil] David J. MALAN: Nu chiar așa de rău. Doar un singur ori byte un miliard. Așa că a-- Audiența: 8 miliarde de GB. David J. MALAN: Nu a fost de 8 miliarde. 8 miliarde de bytes. Dar, 1 gigabyte. 1 gigabyte ar fi unitatea de măsură. În cazul în care el sau ea are două spatii, 2 gigaocteți. Trei gigaocteți. Dreapta? Ea cântare costisitoare. Și astfel, în cazuri cum ar fi Google, care, acordat, sunt cazuri extreme, există și alte probleme care apar doar prin luarea de decizii foarte rezonabile sau de a lua măsuri umane foarte simplu, deoarece are acest efect amplificat. Unul din motivele acest lucru pare atât de comprimat este exact așa cum a fost Victoria said-- doar generate de calculatoare oricum. Așa că nu e mare. Lasa browser-l dau seama. Dar, de asemenea în mod deliberat nu are prea mult spațiu, deoarece spațiul nu este necesar. Iar spațiul de fapt, costurile de bani. 

Ori costă timp, pentru că pur și simplu pentru a împinge că mult mai multe date din Sediul google.com tocmai a ajuns să ia o anumită cantitate de timp, chiar dacă este milisecunde sau microsecunde, dar care se adaugă până peste atât de mulți utilizatori, sau mai probabil, probabil costă bani. probabil Google se conectează la altcineva din lume, unul din cei peering puncte, iar în cazul în care acestea au un fel de relație financiară prin care datele lor costurile de bani, s-ar putea la fel de bine a minimiza date cât de mult acestea sunt scuipand pe conexiunea lor la internet. 

Așa că amuzant lucru, cu toate că, în cele din urmă, sau poate un lucru liniștitor, este faptul că, chiar dacă acest lucru pare teribil copleșitoare, la sfârșitul zilei, este încă exact aceleași principii ca această pagină foarte simplu aici de HTML pagină. Deci, doar pentru a rezuma și astfel încât să au o versiune canonică, dacă nu au fost în urma de-a lungul de alegere aici, aici ar putea fi cel mai simplu de pagini web, astfel încât ceva să se joace cu, probabil, mai târziu. 

Ei bine, să introducă un alte câteva idei acum. Suntem pe cale să se introducă ceva numit un tag stil. Noi putem stiliza această pagină într-un mod mai interesant. Așadar, în timp HTML e-mail este totul despre marcarea datele, un fel de specificarea unui browser-ul modul de structurare a datelor, în cazul în care să-l pună, CSS, sau foi de stil în cascadă, este oa doua limbă pe care în general, devine cu HTML amestecat așa cum vom see-- dar putem curăța că într-un moment-- care ia ea mila finală, și-l stylizes. Ea devine culorile doar dreapta, font dimensiuni doar dreptul, pozitionarea doar dreapta. Este vorba de estetica sau formatare, nu despre datele fundamentale în sine. Si cel mai simplu mod de a arăta acest lucru este, probabil, de exemplu. Așa că am de gând să merg peste la fișierul meu text simplu. Și, în doar un moment, eu voi ne-a lungul procesului de de a face acest lucru noi înșine. 

Mă duc să mă întorc la dosarul meu aici și reîncărcați pagina doar pentru a confirma ceea ce pare. Asta e în cazul în care ne aflăm acum. Mă simt ca și cum s-ar bucura de copii având o anumită culoare la această pagină web. Așa că am de gând să merg aici în capul paginii. Si am de gând să fac stil, / stil. Și apoi în interiorul acestui fapt, voi pentru a spune corpul page-- meu iar acest format este, în prima vedere, probabil, un pic ciudat, dar convențional. Am de gând să spun că fundalul Culoarea acestei pagini ar trebui să fie de culoare verde. Și acest lucru este, din păcate, un fel nu, cel mai bun design. Observați că anterior în lumea HTML, Am spus că atributele sunt aceste perechi cheie-valoare. Ceva este egal cu citat unquote "ceva." În lumea CSS, care a fost proiectat de unii oameni diferiți, au decis că, în lor lume, perechi cheie-valoare ar fi un cuvânt de colon ceva. Deci, e aceeași idee, totuși. Este asocierea unei valori cu unele cheie pe care într-un fel influențează comportamentul acestei pagini. 

Și probabil poți ghici. Ce este acest lucru, probabil, va pentru a face chiar dacă nu ai niciodată văzut HTML sau CSS inainte? Audiența: Modificarea culorii de fundal. David J. MALAN: Da, schimba culoarea de fundal. Și în mod specific culoarea de fond a corpului. Dar, în măsura în care corp pentru acum este web page-- este singurul lucru sub really-- bara de titlu este, probabil, va influențează același lucru. Așa că hai să vedem. Hai să salvăm acest lucru. Du-te aici și reîncărcați. Este destul de oribil. Și ce se întâmplă aici este un efect secundar. Am ales această imagine la întâmplare. De ce nu este verde pătrunzând în spatele Mickey? AUDIENTA: [inaudibil] David J. MALAN: Exact. Se pare că, imagini, destul de mult toate imaginile pe care le-ar putea folosi, sunt toate rectangles-- de dreptunghiuri. Chiar dacă Mickey are unele curbe pentru el însuși și are un fundal, acest context trebuie să fie ceva. Ea trebuie să fie de culoare albă. Ea trebuie să fie negru sau altceva. Acesta poate fi transparent. Și, de fapt, am putut Deschide Mickey Mouse aici într-un program numit Photoshop sau ceva similar și schimbe toate că alb fundal transparent, astfel încât verdele să strălucească. Dar asta e ceva ce ar avea nevoie de pentru a cere de la mine sau de un artist grafic sau un designer de la meu companie, de exemplu, de a face, mai ales că eu doar împrumutat asta de pe internet. Dar, de aceea acest lucru se întâmplă. 

Deci, ce altceva ar putea să vrem să facem? Ei bine, ne-am putea dori să spunem chiar sper sa se bucure de șederea. Și, pentru a sublinia, vreau pentru a face acest lucru puternic, și așa că voi spune deschis și puternic închide puternic și apoi reîncărcați. Și e un pic cam greu pentru a vedea pe proiector dar, poate, într-adevăr acum sare la tine un pic mai mult. Astfel încât să puteți adăuga caractere cursive în acest Astfel, cu care se confruntă cu caractere aldine în acest fel. Am putea schimba culorile. De fapt, doar pentru lovituri, eu sunt O să meargă mai departe și de a face acest lucru. Nu-mi place foarte mult cum mi paragrafe sunt atât de aproape împreună, așa că s-ar putea face ceva de genul asta. Mă duc să-i spun browser-ul, schimba in fiecare paragraf tag-ul pentru a avea, Să say-- de fapt, știi ce, să alinieze-l text-align, centru. Și din nou, știu doar pentru că cineva a învățat să-mi sau l-am uitat în sus, în o referință on-line. Așa că lasă-mă să salveze acest lucru. Si, ah, acum am centrat pe imaginea acolo. Și, de fapt, știi ce, dacă Am muta imaginea mea într-un paragraf tag-- astfel încât un al treilea paragraf, chiar dacă nu este text. Hai să salvăm asta și reîncărcați. Acum pagina incepe sa arate un fel de-- Vreau sa spun, este încă destul de urât, dar cel puțin se pare ca am petrecut de două minute, în loc un minut făcându-l. 

Și astfel, treptat, putem face aceste modificări estetice acum pagina? Nu am schimbat cu adevărat datele cuprinse în pagina, altele decât adăugarea cuvântului într-adevăr. Am adăugat metadate, dacă vreți. Hei, browser-ul, efectuați cuvântul "într-adevăr" caractere aldine. Dar datele nu este puternic. Asta e metadate. Datele sunt "într-adevăr." Așa că mai avem încă unele aceleași concepte ca și mai înainte. Acum, desigur, acest lucru nu este pe web, așa că am de gând să fac un singur pas final aici. 

Mă duc să merg la hello.html și doar evidențiați și copiați-l. Și acum voi du-te în Cloud9, care O să te plimbi printr-în doar o clipă. Și cotele sunt vei fi în curând, dacă nu a fost deja, la un ecran de genul asta. Și lasă-mă să-ți dau un rapid tur a ceea ce Cloud9 este de fapt. Deci, din nou nor 9 este acest serviciu bazat pe cloud că tu și-mi dă iluzia de a avea propria noastră mașină virtuală în nor, punct de vedere tehnic un container în nor, că avem deplină privilegii administrative. Deci, în teorie, nimeni nu altcineva din lume nu are accesul la ecran Sunt uita la dreapta acum, cu excepția, poate, oamenii care conduc site-ul, pentru că ei au punct de vedere tehnic acces fizic și așa mai departe. 

Deci ce vedem în acest mediu? Mă duc să micșora, pentru că este un pic mai mic. Și lasă-mă peste punctul aici doar pentru un moment. Pe partea stângă a mea și a ta ecran, există un browser de fișiere de la stânga. Atât de asemănătoare în spirit pentru Mac OS și Windows. Acestea sunt toate de fișierele din contul meu. Și, în mod implicit, dacă dumneavoastră cont este ca a mea, veți vedea sau a se vedea în curând helloworld.html și readme.md. Aici pe dreapta, acest lucru este în cazul în care fișierele text mele vor merge. Dacă v-ați folosit vreodată Microsoft Word sau Notepad sau TextEdit, acest lucru este cuvântul de editare mea de fișiere este de gând să meargă. Și apoi cel mai Arcane caracteristică a acestui mediu că nu vom cu adevărat nevoie să utilizați este aici numit-o fereastră Terminal. Dacă ați utilizat DOS de la odinioară, acest lucru este Linux sau echivalentul Linux DOS. Este un interface-- bazat pe text fără clicuri de mouse, fără tragere. Tot ce poți face este de tip comenzi, dar aceste comenzi poate crea fișiere, muta fișiere, deschide directoare, directoare apropiate, face orice număr de lucruri. Dar, pentru moment, vom doar petrece timpul aici. 

Și așa să facem acest lucru. Dacă vă aflați în această mediu, care trebuie fie în cazul în care ați creat un spațiu de lucru deja, du-te mai departe și doar du-te în sus la File, New pentru un moment. Și asta îți va da o nouă tab-ul chiar aici în mijloc. Iar eu doar-- și hai mergeți mai departe și de a face acest lucru. Hai să mergem mai departe și acum fac fișier, Salvare și mergeți mai departe și numesc hello.html, nu trebuie confundat cu helloworld.html, care a venit cu noul dvs. cont gratuit, care este doar un fișier mostră. Veti vedea apare dintr-o dată, cel mai probabil, pe partea stângă, iar tab-ul va fi în continuare deschis. Și lasă-mă să vă încurajez acum să recreeze acest fișier sau unele variante ale acestora. Și, dacă nu se poate chiar vedea pe ecran, acest lucru este identic cu slide-uri că, probabil, aveți într-o altă filă. 

Deci, pe scurt, face prima pagină web, salvați-l, și apoi într-o clipă, O să-ți arăt cum se poate vedea de fapt acest lucru. Dar, schimba cel puțin un lucru. Helloworld schimba la ceva din propria ta alegere, astfel încât să fiți convinși că este ta fișier și nu cel pe care tocmai l-am creat. In regula. Iar atunci când nu ready-- rush-- când ești gata, mergeți mai departe și salvați fișierul odată ce ați făcut aceste modificări. Și, dacă faceți clic pe Butonul sus alerga sus, acest lucru ar trebui să deschidă o nouă filă, care va spune vă ce adresă URL puteți accesa fișierul la, dar ar putea dura un moment pentru a citat unquote "start Apache", care este numele serverului web. Deci, să fie atent pentru a face exact ceea ce este în dosar în cele din urmă. Deci, chiar acum, voi mări. Dacă aș începe să tastați Agatate deschis HTML, Notă Mi-a determinat să termin gândul meu. Și, dacă am terminat gândul meu, ea automat îmi dă eticheta de închidere. Dar așteptarea este atunci voi lovi Enter și apoi mutați în interiorul acolo și de a face cap în interior și atunci eu fac corp înăuntru. Și e un pic ciudat la început, pentru că face de lucru pentru tine, dar dau seama că în cele din urmă vă salvează intrarile de la tastatura. Și, de fapt, o caracteristică foarte comună Programarea medii aceste zile atât pentru dezvoltarea web cum ar fi acest lucru și programarea efectivă, care vom vorbi despre mâine, este aceste caracteristici auto-complete, lucruri care pur și simplu permit o programator sau un designer pentru a introduce mai puține taste pentru realiza același lucru. Uneori e bine, totuși. Uneori e doar enervant. Și, din nou, odată ce ați transcris diapozitiv sau o variantă a acesteia, aveți posibilitatea să faceți clic pe butonul Executare până sus. Și apoi, în partea de jos fereastră, veți fi informat la ce adresă URL, puteți vizita pagina web. A mea, de exemplu, este la business-daharvard.c9users.io si asa mai departe. Bine, deci, să mine-- întrebări? Orice alte întrebări despre doar obtinerea acest lucru de lucru înainte de a adăuga caracteristici? Și lasă-mă să propună, doar pentru a obține oameni comfortable-- pentru că este un lucru doar la copy-paste orbește ceea ce am făcut. Dar, pur și simplu, astfel încât oamenii se luptă cu cel puțin un to-do, Voi porni muzica. Voi propune o listă de lucruri pe care le puteți adăuga potențial. Și vă puteți folosi cu siguranță Google. Și de ce nu ne-am propun să încercați să rezolve cel puțin o problemă particulară aici. Deci, în termeni de tag-uri, lasă-mă să reutilizați asta aici. 

De fapt, dați-mi voie într-o formă textuală. Hai să spunem că printre tag-uri s-ar putea utilizați aici sunt unele etichete aici. Am văzut punctul tag-ul. Acum se va auto-complete. Punctul tag-ul, tag-ul ancora. Să presupunem că doriți să face ceva mai mare, astfel încât s-ar putea like-- tag-ul etalon poate ajuta. Ei bine, ai putea avea nevoie de ajutor pentru că, în doar un moment. Am mai văzut div. Vei vedea acolo e masă. Există ceva numit tr, td. Th, td. Întoarce-te la asta într-un moment. Ce altceva ar putea fi la îndemână? Acolo e puternic. Nu există un accent, sau mai degrabă em. There's-- ce altceva ar putea să vă place aici? Ei bine, vom lua o uita-te la asta împreună. Formularul, pe care le-am văzut. Nu există formă. Nu există intrare și alte câteva. Bine, așa că hai să facem acest lucru. Pentru a răspunde la un Victoria întrebare, lasă-mă mai întâi doar asigurați-vă că toată lumea este capabil de a obține lor de lucru salut. Atunci lasă-mă să introducă un cuplu alte idei. Apoi, vom lăsa oameni rezolva unele probleme pe cont propriu. Apoi vom veni de fapt înapoi la această noțiune de o formă, și vom de fapt re-punerea în aplicare împreună interfața front-end, ca să spunem așa, pentru Google în sine. Vom folosi Google ca la sfârșitul spate și lăsați le face munca grea, căutarea, dar vom recrea front-end Google și formularul de căutare că ei au pe pagina lor de origine proprii. Și așa ne vom întoarce la aceste tag-uri în doar un moment. 

Deci, acest lucru a fost ceea ce am a propus doar un moment în urmă. Putem adăuga stilizarea unui pagină în interiorul acestui tag stil, și putem stiliza fundalul culoare, alinierea textului, fie că e vorba de centru sau la stânga sau la dreapta. Dar, foarte repede v-ar găsi sau un web designer s-ar găsi că această devine un pic mai dificil de gestionat, pentru că tu faci ce-i numitul conținut de amestecare cu prezentarea acestora. În care amestecați datele și estetica acestora. Și, de fapt, dacă ia în considerare ce se va întâmpla peste time-- aceasta este o foarte mică pagina de web, desigur. Dar, dacă am adăuga conținut la această pagină și am adăuga stil la această pagină, pagina devine foarte repede mai mult și mai mult și mai mult. Și să presupunem că vreau au oa doua pagină web care împărtășește unele dintre aceste atribute. Să presupunem că pagina mea de web a doua pentru meu site-- De asemenea, vreau centru totul, și eu doresc, de asemenea, totul cu un fundal verde. Sunt destul de mult va trebui să copiați și inserați unele dintre aceste linii în acest al doilea dosar, care se simte bine. Acesta va rezolva problema. 

Dar dacă vreau oa treia pagină sau o pagină de 30 sau o pagină de 40? Acum am de gând să fie copiat și lipirea o mulțime de cod duplicat în mai multe fișiere. Și așa să presupunem că Eu decid sau mi-am spus, hei, nu utilizăm un fundal verde mai. Vom incepe folosind portocaliu. Ce trebuie să schimbi? Ei bine, trebuie să schimbi acest stil de la verde la portocaliu în cât de multe locuri? La fel ca 30 sau 40 de locuri. Este plictisitor. Este predispus la erori. Exista o serie de motive în cazul în care nu s-ar dori să inducă acest tip de durere pentru tine. Și așa n-ar fi frumos dacă am putea lua ceea ce tocmai am a pus între aceste două galbene tag-uri, aceste etichete de stil, factor-l, și pune toate mele stilizare într-un singur fișier central că toate cele 30 sau 40 de alte fișiere mele imprumuta de la sau într-un fel de referință, nu spre deosebire de rețea diagrame am făcut mai înainte? 

Așa că, dacă mă duc aici, eu sunt va propune de fapt, că înlocuim tag-ul stil cu ceva numit tag-ul link-ul, care este oribil, oribil cu numele, pentru că nu utilizați link-ul tag-ul pentru a crea ceea ce noi, oamenii stiu ca un link dintr-o pagină web. Pentru asta, utilizați tag-ul pe care? Cum creati un link dintr-o pagină web? AUDIENTA: 'A. David J. MALAN: A, sau ancora tag-ul, care a mers la Disney inainte. Link-ul de tag-ul de aici este de a spune astea-- link către un fișier numit styles.css, relația cu care va fi că este stylesheet meu. Deci, aceasta este una dintre cele mai S. în foi de stil în cascadă. CSS-- Stilul sheet-- doi dintre S. în CSS. Cascadă foaie de stil. Acest lucru înseamnă pur și simplu, hei, browser-ul, du-te găsi styles.css pe serverul local și-l utilizați ca foaia de stil, ceea ce înseamnă în interiorul acelui fișier va fi cele de mai stilizări pe care le-am făcut doar. Și ce acel fișier ar putea arata ca este aceasta. Și eu voi face doar acest lucru este un rapid de exemplu, pentru că nu avem nevoie pentru a obține prea mult în buruienile de aici. Dar, dacă am copia asta, ce propun eu este faptul că un programator a crea un nou fișier, paste în aceste lines-- whoops-- lipiți în aceste linii, salvați-l ca styles.css, și apoi, în celălalt fișier, ștergeți toate acestea și înlocuiți-l în schimb cu acest link tag. Astfel că, dacă am link-ului href = "styles.css", relația trebuie să fie "stylesheet" close tag-ul. Salvați-l. Du-te înapoi la helloworld meu. Reload. 

Literalmente nu sa întâmplat nimic. Acesta este un lucru bun, deoarece înseamnă că este de fapt totul de lucru. Pentru a dovedi la fel de mult, să presupunem că eu fac o typo, și eu numesc acest "styles.css" cu un capital de S, care este incorecte, și apoi reîncărcați. Acum puteți vedea pur și simplu nu funcționează. Acum, de ce? Ei bine, hai să folosim un Tehnica de mai devreme. Lasă-mă să merg mai departe și, în browser-ul meu, în Chrome, sunt O să deschidă acea specială tab-ul de rețea ca și mai înainte, și lasă-mă să reîncărcați pagina. Ceea ce nu te surprins să vezi acum? Sau poate că ești surprins să-l văd. Oricum ar fi, ce vezi acum? AUDIENTA: [inaudibil] David J. MALAN: Nu găsit. De ce nu este găsit? Ei bine, capitala Styles.css-- Nu există S-. L-am greșit în botezarea. greșeală de tipar simplu. Dar eu sunt obtinerea de înțeles acum 404, deoarece serverul este de a spune, hei, nu a găsit. La propriu, nu știu în cazul în care fișierul este. Deci, ca urmare, browser vă arată ce poate, conținutul brut al paginii, care a fost de 200, HTML, dar stilizarea nu poate se adaugă ulterior. Și acest lucru este ceea ce se înțelege prin cascadă. Poti adauga un fel de după, și un fel de rafinează estetica paginii web. Și tu poți trece peste chiar și cele stiluri cu încă alte fișiere stylesheet daca vrei. Nu a găsit, totuși, în acest caz, pentru că, desigur, am greșit în botezarea. Așa că va trebui să se stabilească faptul că mai întâi. 

Așa că hai să mergem mai departe și propune următoarele. Hai să mergem mai departe și de a face acest lucru. Incepand cu probabil fișierul helloworld, permiteți-mi să invitați un cuplu caracteristicii sugestii. Așa că, Victoria, ai vrut să face un text mai mare, nu? Bine, deci putem fac text mai mare. Și ne vom smulge fiecare off doar o singură problemă pentru a rezolva. Asigurați-text mai mare. Nu am de gând să deranjez scris acest lucru atunci când ne au tehnologie glonț chiar aici. Deci, unele probleme. Asa ca vom incerca pentru a face text mai mare. In regula. Ce altceva ar propune cineva? Ce altceva ar putea să ne-o dorim pentru a face într-o pagină web? Hai să vină cu un lista scurtă de lucruri și apoi delegat la grup pentru a figura asta. 

AUDIENTA: [inaudibil] 

David J. MALAN: OK, textul poziției pe diferite părți ale paginii? In regula. Altceva. 

AUDIENTA: [inaudibil] David J. MALAN: Este. Deci, un gif este doar un format de fișier diferit. Tocmai ne-am folosit, ceea ce, un png sau jpg, probabil? Am folosit un jpg. Dacă sunteți curios, un exces răspuns la întrebarea dvs. este un jpg este folosit în general pentru fotografii, deoarece acceptă milioane de culori sau pe 24 de biți de culoare. Un gif este utilizat în general pentru, cum ar fi, meme internet aceste animatii days--, gif-uri animate, cum ar fi. Dar se întâmplă să folosească o culoare mai mică paleta, numai 256 de culori posibile, dar suporta transparență și de animație. Și apoi există png, care sprijină transparență și mai multe culori dar nu și animație. Deci, e un compromis. Adăugând astfel un gif, deși, ar fi funcțional echivalent cu adăugarea unui fișier jpg sau png. Da. Image source este egal. Așa că altceva. Hai să vină cu ceva care am trimis la Victoria pentru a face aici. 

AUDIENTA: Adăugați butoane pentru un formular. David J. MALAN: OK. Așa că adăugați butoane pentru un formular. Si noi vom face asta una împreună. Astfel că va fi o Segue perfectă imediat după această provocare. Altceva? Ce s-ar putea plăcea să faci? Web-ul se simte foarte SCENARIUL în cazul în care acest lucru este tot ce putem face. AUDIENTA: Schimbarea culorii textului. David J. MALAN: Schimbarea ce? Audiența: Culoarea textului. David J. MALAN: Schimbarea culorii textului. In regula. Așa că, hai să facem asta. Pur și simplu din nou, astfel încât să nu că tu ești, pur și simplu pe de rost, fac exact ceea ce fac, Mă duc să activați muzica timp de cinci minute, poate, aici. Sunteți binevenit să utilizați Google. Sunteți binevenit să mă întrebi, și O să șoptesc un indiciu în ureche. Sunteți binevenit să se uite peste pe umerii celuilalt. Dar, rezolva doar una dintre aceste probleme. Dar, vom face ultima, formează una, dacă am putea, împreună. Deci cinci minute pentru a rezolva oricare dintre aceste probleme utilizând Google, intuiție, sau orice alte mijloace disponibile pentru tine. 

[MUZICĂ] In regula. Nu vă faceți griji în cazul în care doriți pentru a păstra tinkering, dar voi strica un cuplu din aceste răspunsuri. Deci, prima sugestie de la Victoria a fost de a face text mai mare. Așa că există câteva modalități de a face acest lucru. Am restaurat în prezent ecranul meu la această dimensiune, deși am mărit în mod artificial doar pentru a vedea lucrurile. Și să facem acest lucru. Lasă-mă să merg mai departe și apuca un text generic latin doar așa că avem ceva de a lucra cu. Așa că dă-mi doar un moment. Voi face trei paragrafe. O.K. Acesta va fi un exemplu mai bun. Deci, pentru curioși, în hello.html mea, eu doar lipite trei fără sens punctele latine doar așa că avem un text pentru a lucra cu. Și scopul Victoria a fost acela de a fac parte din text mai mare. Așa că am putea, la fel ca înainte, du-te aici. Și lasă-mă să o fac drumul corect. Am de gând să aibă o legătură tag-ul care indică spre un fișier numita "styles.css," relația din care este din nou "stylesheet". Și apoi am de gând să salveze și deschide acest "styles.css." 

Așa că, la fel ca înainte, am abilitate în acest fișier CSS pentru a suprascrie de fapt implicit estetica unei pagini web, și estetica implicit, desigur, sunt destul de plictisitoare. Este un fel de dimensiunea normală a fontului, negru text, fundal alb, și așa mai departe. Așa că să presupunem că vreau să fac toate acestea text mai mare. Aș putea face câteva lucruri. În fișierul meu styles.css, am ar putea spune, știi ce, se aplică următoarele la corpul paginii mele. Du-te mai departe și să facă dimensiunea fontului 24 de puncte, care este un număr I s-ar putea utilizați în Microsoft Word. Lasă-mă să mă întorc la mea web pagină aici și reîncărca, și puteți vedea că este deja mult mai mare. Și noi putem obține un pic nebun, la fel ca și cum putem pe un desktop-- face cu 96 de puncte. Reload. Și este un pic cam greu de manipulat în acest moment. 

Dar, aș putea fi un pic mai precis. În loc să aplice acest stylesheet la corpul paginii mele, ce altceva s-ar putea să o aplice în schimb, ce alte tag-ul care s-ar putea încă funcționează în același mod? 

AUDIENTA: p tag-ul? David J. MALAN: P tag-ul. Astfel încât capul nu ar fi corectă, deoarece capul, nu poți de fapt controlul estetica. Nu e fie text acolo sau nu. Dar p tag-- mă pot arunca cu capul într-un pic mai adânc, ca să spunem așa, la paragraful Etichete. Și chiar dacă există trei, asta e foarte bine, pentru că în CSS, când eu spun doar "p", acest lucru înseamnă aplică următoarele la orice etichetă care se potrivește cu această Selector, selectorul doar fiind numele etichetei. Așa că ori de câte ori vedeți o "P", aplica dimensiunea fontului, și să-l facă mai mult rezonabil again-- 24 puncte. Și știi ce, doar pentru o bună măsură, hai să facem culoarea doar roșu pentru moment. Și acum, dacă reincarc, acum a se vedea trei paragrafe urâte. 

Dar acum, să presupunem că eu sunt un fel de-- Vreau primul paragraf să sară la utilizator. Nu vreau să crească doar dimensiunea fontului totul. Și, așa că am dori de fapt să identifice sau distinge între aceste paragrafe. Așa că hai să scăpăm de roșu, pentru că e doar un fel de prost gust, și să mergem mai departe și să facă dimensiunea fontului 12 puncte în mod implicit, astfel încât să ne întoarcem la ceva un pic mai rezonabil. Și acum vreau doar să se sporească dimensiunea fontului din primul paragraf. Pot face acest lucru în câteva moduri, dar într-un fel care este probabil cel mai de instruire la cele mai moment este de a face următoarele. Lasă-mă să merg mai departe și spun, acest lucru alineatul are un ID unic "primul". Aș putea numi asta orice vreau. Aș putea numi asta "foo" sau orice alt cuvânt, dar am de gând să-l dau câteva nume semnificativ semantically cum ar fi "mai întâi." Acesta este identificatorul unic, ID-ul, pentru primul meu paragraf. 

Ce pot face acum în stylesheet mea este un pic mai precis. În loc de a spune, se aplică următoarele la p tag-ul, Pot spune following-- se aplică următoarele, sau selectați, elementul HTML care are un ID unic "primul". Ce vreau să i se aplice? O dimensiune font de 24 puncte. Asa ca am doi selectori acum. Unul face ca cele de mai punctele 12 puncte. Dar asta, mai ales că este vorba second-- ea vine ultimul în file-- acest lucru are un efect în cascadă. Tocmai am făcut toate mele punctul etichete 12 puncte, dar acest lucru acum și cascade suprascrie ca pentru orice element în pagina, orice etichetă din pagină a cărei ID-ul unic este citat unquote "mai întâi." Iar hashtag-ul în acest context, înseamnă doar "identificator unic." Nu-l pune în fișierul HTML. Eu, aici, spun doar citat unquote "mai întâi." 

Așa că lasă-mă să reîncărcați. Și acum văd, ah, OK. Adică, nu e așa destul, dar este un fel de cum ar fi prefața la o carte sau ceva de genul asta, în cazul în care primul paragraf este mai mare. Ar putea fi chiar și mai precis, cu doar primele litere, dar cel puțin Am exercitat mai mult control. Acum maybe-- poate că vreau să fac acest lucru ocazional, indiferent de motiv, și așa că nu vreau asta se aplică doar o singură etichetă HTML. Mai degrabă, să say-- să face, de asemenea, următoarele. Class = "import". Întrucât un ID unic este utilizat pentru a identifica un singur lucru, o etichetă, în pagina de web, o clasă este menit să fie utilizat pe orice număr de elemente sau tag-uri pe pagina web. Deci, e de unică folosință. Un ID-ul nu este de unică folosință. O clasă este de unică folosință. 

Și știi ce, pentru orice reasons-- filosofică N-am terminat meu thought-- am de gând să spun că primul paragraf și al al doilea paragraf sunt importante. Așa că am de gând să aplice clasa numită "Important", că, dacă am salva fișierul meu și reîncărcați, nu are nici o Impactul funcțional încă. Dar am adăugat niște metadate la dosar, un fel de ceva separat din datele de bază ale fișierului, astfel încât acum în stylesheet mea, dacă am în loc să spunem ".important" - știi, tot ceea ce este important, sunt va face font-culoare, red-- sau mai degrabă nu font-culoare, doar culoarea. Nu există neconcordanțe în CSS, din păcate. Și reîncărcați. Acum observați prima două paragrafe sunt roșii dar nu și al treilea, pentru că numai eu aplicată clasei de "importante" la primele două din aceste lucruri. 

Deci, în ID-uri, aveți posibilitatea pentru a specifica foarte precis. Cu clase, ai reutilizabil. Dar, în ambele cazuri, observați un fel de principiu bun-design unde am luat toate din estetica la dosarul meu. styles.css Deci, nu există nici o messiness aici. Nu există nici o mențiune de roșu sau îndrăzneț cu care se confruntă sau dimensiunea fontului în acest fișier. Mai degrabă am semantically, caracterizat prin aceea ca in mod semnificativ datele mele, aici este unele date importante. Iată câteva date mai importante. Mai mult decât atât, aici este "Primul" datele mele importante. Așa că HTML este totul despre un fel de etichetare, literalmente, cuvinte și paragrafe și construcții din contul dvs. pagina cu aceste indicii mici, dacă vă va, că poți într-un fel de pârghie folosind alte tehnici, cum ar fi CSS în acest fel. 

Deci, în răspuns la întrebarea Victoria, putem face text mai mare în acest fel. Sunt atât de multe alte moduri, dar font tag-- paranteză deschis "font" - este de fapt vechi de mai mulți ani. Și aceasta este problema, de asemenea, cu bazându-se doar pe resources-- on-line ele tind să fie depășite. Și într-adevăr, asta este depreciat, pentru că lumea a realizat, ce inseamna "font-size = 7" înseamnă? Nu. Și așa de mulți ani și să aceasta ziua-- una dintre latura observă aici este că acesta este de fapt incredibil de dureros, uneori, încă pentru a dezvolta situri pentru web, deoarece Microsoft și Google și Mozilla și alții de multe ori nu sunt de acord cu privire la modul în care pentru a interpreta o specificație cum ar fi HTML. 

Există un set de reguli pentru HTML în general, spune ceea ce înseamnă că fiecare etichetă. Dar, uneori, este lăsată în seama marjă de apreciere de punere în aplicare a lui, discreția Microsoft și Google. Astfel că nu veți foarte des a se vedea pe un site ceva arată diferit pe un PC decât o face pe un Mac, și asta e într-adevăr, deoarece, la sfarsitul zilei, ei nu l-am testat bine pe ambele platforme. Dar este, de asemenea, pentru că rezonabil, oameni inteligenți vor fi de acord iar companiile nu sunt de acord, și așa mai departe una dintre provocările programării pentru web sau proiectarea lucruri pentru web este scris site-ul dvs. într-un mod care funcționează pe orice browser web. Dar chiar și asta este rezonabil, nu? Sunt atât de multe versiuni de atât de multe browsere acolo, care, la un moment dat, trebuie, de asemenea, să facă un apel hotărâre și va trebui să decidă ca o companie, în special pentru e-commerce-stil site-uri în cazul în care sunteți încercând să folosească cele mai recente și mai mare tehnologii pentru a da un utilizator foarte bun experienţă. Dar unii procent de utilizatori s-ar putea fie în continuare folosind Internet Explorer 6 sau 7 sau 8, în special în funcție de țară care provin aceștia. 

Și așa foarte frecvent este ceva consultat cum ar fi "statisticile browser-ul web." Și dacă vom merge sa-- să vedem Wikipedia și a vedea modul în care până la data de această diagramă este dacă există unul. Deci, aici puteți vedea în cazul în care de fapt browsere sunt, în conformitate cu decembrie 2015, potrivit guvernului Statelor Unite. Chrome este la cota de piață de 42%, urmat de IE în mare măsură în setările corporative sau setările PC, desigur, urmat de Firefox, apoi Safari, Opera apoi nu a făcut-o face harta aici pentru un motiv oarecare, și apoi alții. Poate e sub alții. Dar, mai problematică decât este-- Să vedem dacă Wikipedia are, de asemenea, versiuni de browsere version-- 

Hai să mergem la statisticile browser. IE. Chiar și asta nu e suficient. Statistica de browser. Versiunea mea. Asta nu va fi corect. Hai să vedem versiuni. cota de piață browser-ul. Hai să vedem dacă asta vine în sus. O.K. Acum, acest lucru este obtinerea un pic mai util. Deci, aici, observați că avem toate versiuni diferite de browsere. Si, Doamne, dacă ai look-- Chrome 48, Chrome 47, Chrome 31, Chrome 45. Vreau să spun, browsere actualizate din ce în ce, și, uneori, unele dintre aceste modificări sunt semnificative în termeni de funcționalitate. Și așa, la un moment dat, manageri de produs sau inginerii au nevoie pentru a face o decision-- tine știu ce, doar 1% din lume este în continuare folosind IE 7. La dracu cu ei. pur și simplu nu ne vom susține că browser-ul. Și ce înseamnă să nu sprijine? S-ar putea însemna că butoanele nu funcționează pe pagina web, sau ar putea însemna Formatarea este complet oprit. Sau s-ar putea să facă că același apel hotărâre în aceste zile mobile, în cazul în care, suntem nu va mai sprijini IOS 5. Așa că oamenii trebuie doar să faceți upgrade. Sau nu ne vom sprijini Cupcake pe Android sistem de operare pentru dispozitive Android, deoarece ca world-- sub numele de tech vrea mondială să avanseze, este un fel de vrea să trageți lume cu ea, astfel încât acestea să nu facă trebuie să continue să fie înapoi compatibile, astfel încât acestea poate oferi caracteristici noi și bune. Acesta este într-adevăr unul dintre motivele de ce atât de multe companii rulare actualizări automate și un fel de forțând cele mai recente versiuni ale software-ului pe noi. Și chiar și companii ca Apple va sorta de ai forța aproape sau să oblige vă în ceea ce privește forțele pieței pentru a cumpăra un telefon nou, deoarece ei doar nu va actualiza vechiul telefon mai. Astfel încât să ratați cele mai recente și cele mai mari caracteristici, pentru că este costisitor pentru ei ca companie pentru a menține mai în vârstă, fără îndoială Versiunile inferioare ale software-ului. Dar efectul net este că suferim, de asemenea, acest lucru, de asemenea. 

Așa că hai să aruncăm o privire la doar câteva lucruri finale aici. Hai să bat foarte repede unele aceste alte gloanțe, dacă este curios. Așa că, dacă ați încercat să, de exemplu, poziția textul de pe părți diferite ale pagină, am de gând să fac o modalitate rapidă, dar există diferite moduri de a face acest lucru. Lasă-mă să merg mai departe și eliminate-- simplifica acest lucru, după cum urmează. Lasă-mă să mă întorc pentru a-mi , paragrafe simple, simple. Lasă-mă să mă întorc la styles.css mea. Si eu sunt doar de gând să folosească simple-- pe care le-ar fi văzut pe Google sau amintesc de la earlier-- text aliniat dreapta. Și reîncărcați această pagină. Acum totul pare să fie aliniate la dreapta, după cum s-ar putea vedea pe deasupra capului aici. 

Noi putem face sa para un pic mai mult carte cum ar fi, și putem spune "justifica" și reîncărcați. Acum este frumos și pătrat pe ambele părți, care este un fel de frumos. Un alt scop pe care am avut-o aici a fost schimbarea culorii textului. Așa că am văzut că cu textul meu roșu. Și acum adăugați butoane pentru un formular. Deci, de ce nu încercăm să facem exact acest lucru? Dar, mai întâi lasă-mă să merg la un site care majoritatea dintre noi folosim fiecare ziua-- Google. Și să aruncăm o privire la modul în care Google lucrează efectiv. Dar, voi face asta. Mai întâi lasă-mă să fac in-- Yep, lasă-mă să merg la Google. Voi trebuie să mergeți în Setări Google, pentru că vreau să dezactivați ceva numit rezultate instantanee. 

Așa că s-ar putea fi observat în Google aceste days-- lasă-mă să mă întorc și rândul său, acest lucru mai departe. Deci, dacă am începe căutarea pentru "pisici" ca aceasta, observați că nu numai Primesc auto-complete în sus de sus, dintr-o dată, pagina în sine pare să se schimbe destul de repede, de asemenea, și că este Google folosind un limbaj numita JavaScript încearcă să fie de ajutor. Dar, din păcate, este un fel a incurca discuția noastră din ceea ce se întâmplă de fapt sub capota aici. Deci, eu sunt doar un fel de rapid dezactivați rezultate instantanee. Și am de gând să faceți clic pe Salvare. Și acum am de gând să deschidă că bara de instrumente de diagnosticare pe care am păstrați deschidere sub fila Rețea. Așa că hai să facem acest lucru. Lasa mine-- whoops-- derulați în acest jos un pic. Și lasă-mă caute pentru "pisici". 

Și acum notice-- de fapt, aceasta este o oportunitate bună pentru a discuta pentru un moment. Remarcați momentul în care am type---l opresc. Încetează. O.K. Remarcați momentul în care am tastați litera C, ceas în partea de jos a ecranului. A- T S. Ce fund din acest ecran, fila mea de rețea, sugerează se întâmplă în fiecare timp introduc o scrisoare? Din păcate, broasca este foarte astăzi distrage atenția sau Shamrock sau ce este. Ceea ce se întâmplă de fiecare dată când am tastat? Și să-mi Golește tampon și introduceți-l din nou. Hopa deci--. De fiecare dată când am introduce o literă, C- A- T-- astfel încât un nou rând, evident, continuă să apară. Ce face fiecare dintre aceste rânduri reprezintă, bazat pe ceea ce am văzut și discutat până aici? Audiența: O căutare? David J. MALAN: O căutare, sau mai generic, o solicitare HTTP din browser-ul meu de la server. Ei bine, de ce este browser-ul meu face un HTTP să solicite de fiecare dată când introduc o scrisoare? 

AUDIENTA: [inaudibil] David J. MALAN: Da, dă mi aceste rezultate auto-complete. Cum ar fi, în cazul în care acestea fac Rezultatele căutării provin de la? Ei bine, de fiecare dată când introduc o scrisoare, Google trimite mai mult și mai mult de cuvântul Sunt tastarea. De ce? Pentru că ei doresc să-mi dea un mai bine și mai bine, mai bine sugestie, o listă de sugestii, pentru ce cuvânt Am încercat să efectiv complet. Deci, acest lucru este de a spune literalmente fiecare caractere ce tastați în Google este trimis, în cele din urmă în în vrac, dar, de asemenea, uneori unul la un moment dat, în scopul de a pune în aplicare aceste funcții auto complet atunci când datele sunt, desigur, pe web. 

Acum, hai să aruncăm o privire la ceea ce de fapt se întâmplă când fac clic pe Google Search. Si atunci vom parghie acest lucru noi înșine. Deci, dacă am defila în jos acum la foarte prima cerere care tocmai sa întâmplat. Observați următoarele. Acesta a fost trimis la o destul de lungă URL-- https://www.google.com/search? și apoi o grămadă de lucruri. Hai să vedem acest fapt acum în tab-ul browser-ul propriu-zis. Să scăpăm de bara de instrumente aici. Iată pagina cu rezultate ale căutării. Și remarcați aici e URL-ul. Acum, puteți ghici, probabil, ce se întâmplă aici, în parte. Așa că în primul rând, o definiție. Acest lucru aparent este destinația în cazul în care se depune formularul. Așa că, atunci când am introdus manual date în cuvintele "pisici" și apăsați pe Enter, se pare că Google a trimis de introducere a textului meu la această adresă URL pe care l-am evidențiat acolo, slash de căutare. Se pare că, într-o adresă URL, orice se întâmplă după un semn de întrebare este, așa cum tot spun, o pereche de chei-valoare care a fost introdus în formă sau într-un fel transmisă de la browser-ul la server. 

Așa că de fiecare dată când tastați intrare într-o formă pe web și este trimis după cum ne-am au discutat, printr-o prezentare, una dintre acestea virtuale plicuri, conținutul din care envelope-- da, păstrați obtinerea umplute fizic în plicul în clasa în prezent, dar tehnologic este de fapt pus în URL-ul. Așa că, de fapt, să-mi trece prin asta. Unde vezi datele introduse de utilizator? Unde vezi ceva că m-am scris aici? Da, "pisici." Dreapta? Așa că lasă-mă să distileze acest lucru în ceva mai simplu. Voi șterge totul despre această adresă URL pe care eu nu înțeleg, și eu sunt doar de gând să plece l ca astea-- / search? q = pisici. Vom vedea unde q vine de la un moment, dar care se simte ca minimul cantitate de informații pe care am furnizat. Și acum am de gând să lovi Enter. Și observați încă mai funcționează. Noi încă ne întoarcem o grămadă de pisici. Așa că Google este crescatorul decât aceasta în aceste zile. Este 2016, nu 1999. Deci, nu există alte lucruri pe care mi Browser-ul trimite la server. Dar acest lucru este minim tot ceea ce este necesar. 

Deci ce se întâmplă? Ei bine, mai întâi lasă-mă să merg mai departe și du-te înapoi la Cloud9 și lasă-mă să merg mai departe și închideți filele mele anterioare. Iar eu voi face acest lucru pe meu proprii doar pentru un moment. Mă duc să merg mai departe și de a crea fișier nou. Și mă duc să-l salvați ca google.html. Si voi foarte quickly-- Mă duc să fur, de fapt, o parte din acest text doar pentru a economisi timp. Am de gând să lipiți asta aici. Nu am de gând să deranjez cu orice stilizare acest moment. Noi vom numi acest "My Google." Și mă duc să scap din tot în organism. Si eu voi face următoarele. Lasă-mă să măriți. Forma action-- și după cum am menționat pe scurt earlier-- whoops-- ca am pe scurt menționat mai devreme, acțiunea unui Formularul este locul unde trimiteți datele. Așa că google.com/search. Și metoda vreau să folosesc poate fi una din cele două lucruri. Acesta poate fi fie "get", după cum ne păstrăm discuta, sau poate fi "post." Deocamdată, fundamentale diferența este, dacă utilizați "get" toate informa iile pe care utilizatorul afișează este trimis în adresa URL. 

Care este mare pentru lucruri cum ar fi căutare motoare și alte câteva aplicații, dar în ce condiții nu doriți să completați un formular și au informațiile sfarsesc URL-ul, la fel ca în bara de adrese a browserului dvs.? Ce fel de formulare do Tu-- AUDIENTA: [inaudibil] David J. MALAN: Da, cum ar fi ce? AUDIENTA: parole. David J. MALAN: Da, deci log în Facebook sau unele site-ul. Asta e de la intrare de utilizator o formă, o casetă de text, dar tu, probabil, nu vrei afișarea în URL-ul browser-ului. De ce? Adică, poate că există unele implicații de securitate în rețea, dar more-- ca, mai simplu, ce se întâmplă dacă colegul tău de cameră, celălalt dvs. semnificative, copiii dumneavoastră, soțul tău arată prin istoria browser-ul dvs.? Există, dreptul de parolă acolo, în istoria browser-ului. Care nu se simte ca un design bun. Sau chiar mai punct de vedere tehnic, să presupunem că încerci pentru a încărca o fotografie pe Flickr sau Facebook sau wherever-- care este introdus de utilizator, chiar dacă este un pic mai mult interesting-- cum pot ghiftui o imagine în bara de adrese URL? Sunteți un fel de tip nu se poate. Te cam poți. Dar, într-adevăr, eu sunt greu de presat să-și imagineze a face asta. Așa că am nevoie de o altă metodă pentru încărcarea fotografiilor pe un site web, și că o altă metodă se numește "post." Dar, pentru moment, vom vorbi doar despre "Get", care este cel mai simplu dintre cele două. Pur și simplu pune toate datele introduse de utilizator în URL-ul. 

Deci, aici e formularul Creez. Vreau o intrare. Si tu ce știi? Mă duc să iau o presupunere aici. Mă duc să-mi amintesc intrare "q" pentru "interogare." Și cred că acest lucru este unul dintre cele mai desene sau modele originale, probabil, din 1999. Apoi tipul de această intrare este doar de gând să fie "text". Și apoi voi avea o altă intrare care nu are nevoie de un nume, cum vom mai curând a se vedea, tipul de care este "submit". Și acest lucru se va da-mi un buton special. Si asta e. 

Așa că lasă-mă să merg mai departe și salvați acest fișier. Mă duc să mă întorc pentru a-mi browser-ul și du-te la google.html. Introduce. Și este un fel de rare cel putin. Dar, lasă-mă să merg mai departe și căutați "pisici." Și observați că sunt în prezent la această adresă URL Cloud9. Dar momentul în care am clic pe asta, unde crezi sper că voi sfârși? 

AUDIENTA: Google. 

David J. MALAN: Google. Așa că să faceți clic pe Trimite. Și, într-adevăr, am re-puse în aplicare Google. Dreapta? Este mai simplu. Este mai ușor. Vreau să spun, codul meu este în mod clar mai bine decât al lor, din mizeria am văzut mai devreme. Si tu ce știi? Mă duc să condimenteze asta un pic. Nu am menționat acest lucru mai devreme. Nu există tag-uri, cum ar fi H1, pentru rubrica 1, cea mai importantă poziție într-o pagină. "My Google" O să sun asta. Lasă-mă să reîncărcați. Este în căutarea un pic mai bine deja. Si, de fapt, tu ce știi? Am already-- am mințit. Am spus că nu am fost de gând să stil acest lucru, dar am de gând să stil asta ca inainte. Iar trupul meu va fi, să zicem, centru de text-align. Se caută mai mult cum ar fi Google deja. 

Am nevoie de o pauză de linie, totuși, pentru că butonul Submit. Și se pare, tu pot utiliza paragrafe, sau poti mai mult literalmente spune doar, da-mi o linie de pauza aici-- tag-ul br. Și, dacă reîncarcă, acum merge acolo. E un pic urât, așa că am ar putea face mai multe pauze de linie, dar să nu te prea lacomi aici. Așa că acum să vedem dacă merge pentru "câini". Pare să lucreze pentru "câini", la fel de bine. Deci, ce-i MENIUL convingătoare aici? Nu a fost un Unu salt uriaș introduce mai multe câteva tag-uri, cum ar fi sub formă tag-ul în tag-ul de intrare. Dar, în mod fundamental, este, tot ce facem parghie este înțelegerea noastră HTTP și faptul care se formează în cele din urmă să modifice ceea ce este în adresa URL a browser-ului, și așa mai departe, prin urmare, putem furnizează mecanic de intrare la un server prin a face un formular HTML și cunoașterea că serverul HTTP înțelege, ca doar corpul nostru o înțelege, cum ar fi, tremura mâna mea, că același protocol, și așa ne întoarcem răspunsul că ne așteptăm ca în cele din urmă. 

Așa că hai să încercăm să facem o ultimul lucru pe care acum cu telefonul mobil, și voi make-- voi adăuga acest cod pentru slide-uri. Așa că, dacă doriți să se joace, tu poate lua cu siguranță de acolo. Dar am de gând să merg înainte și de a face un singur lucru. Mă duc să merg mai departe și deschide indexul meu page-- pagina mea de salut ca și mai înainte, care are o mulțime de acest text faux-latin, sau text latin fără sens, și has-- se pare ca acest lucru la această dimensiune a fontului. Dar, lasă-mă să merg mai departe și fac acest lucru. Mă duc să intru în Cloud9. Și tu nu trebuie să faci acest pas. O să o fac doar eu. Am de gând să faceți clic pe Partajare. Si aceasta este o caracteristică doar de Cloud9, prin care Pot face publice mediul meu. 

Și doar de dragul demonstrație, lasă-mă să fac asta. Mă duc să fac publice cererea mea. Observați că mă avertizează, am Eu sigur că vreau să fac acest lucru, pentru că acest lucru va face toată lumea în lume, indiferent dacă acestea sunt aici acum sau vizionarea video mai târziu, pe internet pentru a putea vedea ceea ce văd eu. Dar asta e în regulă. Am de gând să spun "Done". Și lasă-mă să te încurajeze, dacă am făcut-o acest correctly-- lasa-ma sa-l testeze mai întâi. Du-te mai departe, dacă nu mind-- într-un browser de pe computer, du-te la această adresă URL, și sperăm veți vedea textul meu latin. Și ca să fie clar, este nu rulează pe laptop-ul meu. Este în nor. Este pe Cloud9, literalmente, dar Am făcut public meu spațiu de lucru astfel încât oricine de pe internet pot accesa pagina mea de start latină. 

Du-te la aceeași adresă URL telefonul, dacă ai putea. În cazul în care va costa, deși, se pot uita doar peste un umăr. AUDIENTA: [inaudibil] David J. MALAN: Îmi pare rău? AUDIENTA: [inaudibil] David J. MALAN: Doar cuvinte latine. Asta e tot. Dar asta e ceea ce ar trebui să vedeți. 

AUDIENTA: Da. David J. MALAN: Da. Da. O.K. Pot să rezista ta telefon pentru o clipă? Așa că, să sperăm, dacă accesați aceasta, ar trebui să arate aproape imposibil de citit. E still-- Vreau să spun, că e imposibil de citit din cauza latină. Dar este, de asemenea, nu poate fi citit pentru ce alt motiv? Cum ar fi, ce displeases despre asta? AUDIENTA: Este mic. David J. MALAN: Este super, super mici. Deci, cum am putea rezolva această problemă? Este super, super-mici pe telefonul Victoria și, dacă le-ați tras -l singur, probabil, mici de pe telefon, de asemenea, dacă nu au setări de accesibilitate activate. Ce e aia? Ai putea doar să prindeți și zoom-ul, care este fezabil, dar atunci vezi numai câteva cuvinte la un moment dat. Stai un minut. Știu cum să se stabilească acest lucru. Dreapta? Aș putea folosi CSS și am putea schimba dimensiunea fontului de la 12 puncte la 24 de puncte. Dar efectul secundar al că, desigur, va fi acum, pe un desktop sau un laptop, acum textul este de două ori mai mare. Și așa ar fi un fel de frumos să se facă distincția între dispozitive, și se pare că acolo sunt moduri de a face asta. Sunt câteva moduri diferite, de fapt, prin utilizarea CSS și caracteristici fancier că nu vom intra în în detaliu, puteți interoga în esență browser-ul și spune, în cazul în care ecranul este mai mic decât valoarea mulți pixeli, utilizați această dimensiune font. În cazul în care ecranul este mai mare decât acest mulți pixeli, folosiți această altă dimensiune a fontului. 

Poți fi chiar columbofil încă. Dacă v-ați vizitat vreodată un pagina web, care, pe un desktop, are un meniu mare poate off la parte, și apoi toate conținut este de partea care menu-- asta e un fel de paradigmă comună. Meniu pe stânga, conținut pe dreapta, sau vice-versa. Nu funcționează cu adevărat pe mobil atunci când vă Ecranul este doar atât de mulți pixeli. Așa că mai frecvente pe telefonul mobil este, meniul va primi dintr-o dată sa prăbușit, și trebuie să faceți clic pe un buton pentru a vedea, sau site-ul va pune meniul deasupra și pune conținutul de dedesubt. Și aveți posibilitatea să pună în aplicare aceste lucrurile în mai multe moduri, de asemenea. Puteți cere, programatori, hei, echipa, în orice moment vedeți o cerere HTTP de la un dispozitiv Android dispozitiv, un dispozitiv de Microsoft, un Google dispozitiv, un dispozitiv Apple, utilizați acest dimensiunea fontului și de a folosi acest aspect meniu, sau altfel utiliza aspect acest implicit mai mare. 

Acum, folosind ceea ce tehnica fundamentală astăzi ar putea folosi inginerii pentru a ști dacă este un iPhone, un telefon Android, un laptop, un desktop vizita serverul companiei? Care nu primesc aceste informații? 

AUDIENTA: Header? 

David J. MALAN: Da, antetul HTTP. Deci, în fiecare cerere HTTP care vine de la clienții lor la serverele lor includ, în interiorul acelui virtuale plic, un întreg buchet antetelor HTTP, unul dintre care este browser-ul și sistemul de operare chiar, în cazul în care aveți grijă să acel nivel de detaliu. Acum, este un șir criptic aspect, dar există software care va doar simplifica asta și vă puteți cere in programare PHP code--, Java, C ++, whatever-- ce telefon este astea-- ce dispozitiv este acest utilizator folosind? Si atunci se poate spune, arată-le acest lucru versiune a site-ului, dacă este un telefon. Arătați-le această versiune a site-ul în cazul în care este un laptop sau desktop. Dar tu nici măcar nu au nevoie complexitate server-side. Puteți face o chiar și cele mai simple lucruri. 

Voi face asta. Mă duc să merg mai departe în mediul meu Cloud9, și am de gând să adăugați o etichetă pe care l-ai văzut în Google înainte. Se numește metatag. Si nu-mi amintesc asta, așa că Mă duc să-l transcriu aici. meta name = "portul de vizualizare" și apoi content = "width = lățimea dispozitivului, intital scală = 1 "și asta este. 

Așa că s-ar putea fi la fel de bine ca o incantație magică. Nu e tot ce clar, dar acest lucru are ceva de-a face cu portul de vizualizare, iar portul de vizualizare este doar corpul unui pagina de web, regiunea dreptunghiulară care definește cea mai mare parte a paginii. Și acesta este doar a spune browser-ul, știi ce? Asigurați-vă lățimea paginii efectiv egală cu lățimea dispozitivului. Cu alte cuvinte, nu presupune că aveți un fel de spațiu nelimitat. Să presupunem că aveți doar la fel de mult spațiu ca dispozitivul în sine este mare. Și așa acum, dacă reîncarcă în browser-ul meu, nu văd nici o schimbare. Dar, dacă am făcut acest lucru și correctly-- lasă-mă să trec fingers-- mea, dacă voi toți reîncărcați telefoanele, nu-i a se vedea o schimbare convingătoare? Da, este that-- 

AUDIENTA: [inaudibil] David J. MALAN: Da. O.K. Așa că, fără îndoială, mai ușor de citit acum? Încă mici, pentru a fi corect, dar nu atât de mic încât să fie imposibil de gestionat. Și aș putea înlocui cu siguranță acest lucru în continuare cu CSS sau pe partea de server, dar din ce în ce ceea ce ești văzând este tot mai multe caracteristici fiind adăugate environments-- client-side JavaScript, așa cum vom discuta mâine, CSS, si HTML-- asa că toate aceste cereri se poate face pe client astfel încât să se deranjeze server de mult mai puțin și nu să trebuie să țină pasul cu, pentru exemplu, atacul constant din nou sistem de operare versiuni, noi versiuni de browser. Puteți lăsa pur și simplu browser-ul întrebați aparatul, cât de mare ești, și apoi face oarecum logic decizii bazate pe asta. Dar vom vedea mai multe oportunități pentru decizii logice mâine, în contextul a unui limbaj de programare. 

Așa că, orice întrebări, atunci, pe web development? Astăzi nu este programare web, pe se, din moment ce majoritatea tot ceea ce am făcut-o a fost foarte estetic, dacă vreți. Nu există nici o luare a deciziilor în codul pe care l-am scris, și așa mai departe de aceea HTML este un marcaj limbă, nu un limbaj de programare. Dar, mâine vom lua o privire rapidă, în cele din urmă, la JavaScript, care este o programare reală un limbaj care ne permite să facem un pic mai mult. 

Alte intrebari? Ei bine, lasă-mă să propun două oportunități opționale pentru temele. Una este-- aceste Cloud9 conturi nu vor expira. Sunteți binevenit să utilizați le să se joace cu. Este nivelul liber al serviciului. Dau seama că, în cazul în care atunci când crearea spațiul de lucru, ați făcut-o publică, asta înseamnă că orice persoană de pe Internet poate vedea ceea ce tastați. Deci, poate doar ia în considerare nu te jenant dacă vă pune primul web pagină acolo în mod public în mod accidental, dar nimeni nu va știu să se uite acolo, oricum. 

Și two-- lasă-mă să arunce up această adresă URL, de asemenea, mai ales dacă ați venit astăzi mai puțin confortabilă decât altele, sigur ce înseamnă toate aceste lucruri. Dau seama că mult mai mult din acest film, care este în același timp o modalitate buna de a adormi și, de asemenea, să râdă în timp ce Procedând astfel, de asemenea, are o mulțime de societally interesante și discuții de securitate relevante în aceasta din John Oliver, chiar comic. 

Dar, dacă nu există alte întrebări, care ne aduce la recepție. Deci, de ce nu pornesc muzica. Ar trebui să existe băuturi și gustări din afara. Sunt fericit să se amestece pentru ca atâta timp cât oameni ar dori, răspundă la mai multe întrebări unu-la-unu. Dar, în caz contrar, esti binevenit să decoleze în orice moment, și ne vom vedea din nou mâine dimineață pentru un pic mai mult. Bine, mulțumesc.