David J. MALAN: Va bene. Siamo tornati. Quindi, l'obiettivo di questa sessione finale è quello di introdurre un paio di concetti ma anche dare a tutti la possibilità al tipo di allungare le dita ed effettivamente fare qualcosa un po 'hands-on. L'obiettivo non è di trasformare tutti noi in sviluppatori web con qualsiasi mezzo, ma in realtà solo per darvi un assaggio di alcuni dei costrutti fondamentali quali va in programmazione web e oggi web sviluppo, quindi la parte statica di things-- nessuna logica, nessuna programmazione lingua, solo contenuto statico. E ci darà l'opportunità per vedere in realtà ciò che un server web è, Vedere che cosa è un file HTML, vedere che cosa è HTTP è in realtà servendo. Ma prima di tuffarci in, qualsiasi retrospettiva domande su cloud computing o la sicurezza o nulla in mezzo? No? D'accordo, beh, diciamo fare questo, nel caso in cui il processo di firma per qualcosa richiede pochi minuti. Ci lasciar fare in background. Vai avanti, se si potesse, a c9.io. questo URL qui-- Si tratta di una terza parte Clienti-- Platform as a Service, se si will-- che sta per invitarvi a firmare per un account, e sta andando a dare a ciascuno di voi un conto nella cosiddetta nuvola sulle infrastrutture di qualcun altro, una società denominata Cloud9. Ma cosa c'è di bello questo è che ti danno un'approssimazione di attuale di sviluppo del mondo reale ambiente, pur nella nuvola e in un browser web, e useremo questo per davvero sperimentare un po 'di oggi. E poi andare avanti e basta navigare la strada per il processo di iscrizione se potessi. Così ci capita di utilizzare questo in classe Insegno per tutti i nostri studenti, sia nel campus e fuori ora, e è sostituito quello che storicamente Era software altrimenti scaricabile. Quindi, quello che l'accesso ai è una di queste macchine virtuali, in sostanza, che ho descritto in precedenza. Così questa azienda Cloud9 probabilmente canoni di locazione da un terzo Party-- davvero in questo caso, Google-- un intero mucchio di macchine virtuali che in qualche modo chop fino in l'illusione di singoli server che ognuno di noi ha il pieno controllo. Non è del tutto esatto dire che sono le macchine virtuali, però, perché ciò che Cloud9 in realtà usa è una tecnologia leggermente più recente chiamato containerizzazione. E mi permetta di afferrare questa immagine qui per dipingere questo quadro. 

Un contenitore è, se si richiama l'immagine da prima, un po 'più leggero peso che una macchina virtuale. Infatti, mentre lo scorso ora abbiamo parlato di lì essendo un esercizio del sistema e un hypervisor e poi il sistema operativo guest, guest sistema operativo, operativo guest sistema, in cima alla vostra hardware fisico, la differenza con questa nuova La tecnologia, containerizzazione, è che tutti in qualche modo condividono lo stesso sistema operativo. Ma ancora creano l'illusione di tutti avendo la propria esclusiva diritti amministrativi e file sul server. Ma c'è meno software tra l'utente e l'hardware. Il risultato che è, in teoria, un rendimento elevato, perché si sta utilizzando o sprecare meno risorse su tale cosiddetto strato virtualizzazione. Quindi, questo è chiamato containerizzazione per natura per mezzo di una tecnologia chiamata Docker, che è molto affermando la propria identità. E questo è qualcosa che ingegneri della vostra azienda potrebbe sorta di sorta di cominciare a parlare su presto se non l'hanno già, anche se non c'è certamente motivo per saltare su qualsiasi carro dei vincitori. 

Quindi, con quello detto, ciò che probabilmente vede ora è uno schermo che sembra un po 'come questo. OK. E appena mi chiamano sopra se non. E se so-- vengo sopra se non. Andare avanti e fare clic su tale grande oltre a creare uno spazio di lavoro, e vedrete una schermata come questa. È possibile chiamare l'area di lavoro nome tutto quello che vuoi per il momento. E proprio in realtà per semplicità, andare e- bene, alcuni di voi già avere aree di lavoro. Chiamatela quello che want-- affari, Harvard, Giovedi, qualunque cosa vuoi. Non hai bisogno di una descrizione. Si può lasciare privata, a meno che non già avere un gruppo di spazi di lavoro. Se si è costretti a renderlo pubblico, che va bene per scopi di oggi. Anche qui, è uno dei upsell. È possibile ottenere uno spazio di lavoro privato per predefinito. Ma se si vuole di più, si deve pagare di più. In caso contrario, ti obbligano per rendere il vostro lavoro pubblico. Ma va bene, perché anche obiettivo questo a comunità open-source per incoraggiare le persone a in realtà collaborare. 

E l'ultima cosa che è importante, però, è, dopo aver scelto un nome e dopo aver scelto privato o pubblico, clicca HTML5, l'icona grande arancione secondo da sinistra, e quindi fare clic su Crea area di lavoro. E probabilmente prendere un minuto o giù di lì, ma avrete poi avere un ambiente, una volta che si farlo, che sembra che ricorda quello che ho sullo schermo qui ora. Ma, ancora una volta, si potrebbe prendere un minuto o più per arrivare a questa schermata una volta che hai cliccato Crea area di lavoro. Ma solo a me Bandiera oltre se vuoi me a dare un'occhiata a qualche cosa o consigli. Tutto ok. Quindi ho intenzione di sfondo questo per ora. Chiamami su se ti sembra di avere difficoltà tecniche. Ma, ancora una volta, si potrebbe prendere un po 'per che per aprire. E andiamo avanti e parlare di ciò che significa in realtà per fare una pagina web, ciò che HTML è, e come tutto questo ora interconnette come stiamo iniziando utilizzare effettivamente alcune delle tecnologie. Così si scopre che posso andare sul mio piccolo Mac qui, aprire un semplice programma chiamato TextEdit, o su Windows ho potuto aperto qualcosa chiamato Notepad.exe. E potrei semplicemente fare qualcosa come questo-- "ciao, mondo". E poi ho potuto salvare questo come ciao.txt Quindi nessuna magia lì. Questo non ha nulla a che fare con il web programmazione, niente a che fare con l'HTML. Basta creare un semplice file di testo. Ma si scopre che un web pagina è letteralmente proprio questo. Si tratta di un semplice file di testo contenente il testo che è possibile digitare a vostra tastiera, ma tipicamente ma non sempre finisce in non .txt ma .html o .htm. E non lo fai solo digitare parole del file. In realtà usare cose chiamate tag o, più in generale, qualcosa chiamato linguaggio di markup. 

Quindi ho intenzione di digitare molto rapidamente e poi spiegare il seguente. Sto per primo digitare questo, che dice: Hey, il browser, ecco che arriva un pagina web scritta in HTML. E queste due cose insieme dicono, hey, del browser, il seguente è davvero HTML. Hey, il browser, ecco che arriva la testa o la parte superiore della mia pagina. Hey, il browser, all'interno della parte superiore del la mia pagina, mettere un titolo che è, "ciao, mondo." Hey, il browser, dopo la testa del mio pagina, ecco che arriva il corpo della pagina. E, ehi, il browser, il corpo di mia pagina dovrebbe anche dire, "Ciao mondo". Ma quali sono i dati salienti in questo modo? Questo è ciò che è generalmente chiamato una dichiarazione di doc-tipo, e, francamente, è un po ' difficile memorizzare questo all'inizio. È solo tipo di copia-incolla. Questo è il modo convenzionale di dire, ehi, il browser, Sto usando la versione HTML 5, che è venuto fuori un po 'di recente. Si tratta di una formula magica che alcuni gli esseri umani con un scarso senso del design ha deciso di mettere a molto all'inizio del file. Anche se si tratta di un poco arcane, questo è tutto esso designa: hey, il browser, qui viene fornito con la versione 5 di HTML. 

Il resto di questo è stato con noi da qualche tempo, storicamente, ma è stato in continua evoluzione, ed è probabilmente stato sempre un po 'più semplice. Notare alcune caratteristiche di quello che ho evidenziato. Ci sono queste cose con angolato brackets-- la staffa sinistra e la staffa destra. E notare la simmetria qui. E per simmetria, voglio dire, come io avere questo tag di inizio qui o un tag aperto se si vuole, qui ho una tag di chiusura o di un tag di chiusura che è diverso solo in quanto ha questa tagliare all'inizio della parola HTML. E si può pensare di questo come mi è stato casualmente proponendo prima, hey, del browser, ecco che arriva un po 'di HTML. E, viceversa, hey, il browser, che è per l'inizio e la fine HTML--. 

Nel frattempo hey, il browser, qui arriva il capo della mia pagina. Hey, il browser, questo è tutto per la testa. Hey, il browser, qui è il corpo della pagina. Hey, il browser, il gioco è fatto per il corpo. E all'interno di questo è certa testo arbitrario per ora. E all'interno della testa, nel frattempo, è un po 'arbitrario, ma etichettato, per così dire, testo che dice, il titolo della mia pagina sarà "ciao, mondo". Ora, per il momento, è possibile supporre che i browser hanno only-- o, meglio, le pagine web hanno solo due parts-- la testa e il corpo. E la testa è in genere solo come la barra dei menu, la roba in realtà solo in cima. E il corpo è il coraggio della pagina, tutto in quella grande rettangolo che riempie lo schermo. Quindi ho intenzione di andare avanti e fare questo. Ho intenzione di andare avanti e di fare clic su Salva, File Salva. E ho intenzione di salvare questo come hello.html, e sto solo andando a metterlo sul mio desktop. E ho intenzione di andare avanti e fare clic su Salva. E notice-- mio Mac a almeno sta urlando contro di me. Sei sicuro di volerlo fare? E ho intenzione di dire, sì, utilizzare HTML. So meglio in questo caso. E ora ho intenzione di andare al mio desktop dove ho questo file improvvisamente. E ho intenzione di fare doppio clic su di esso. E si noterà che, per predefinita, Chrome aperto. Ecco perché è come browser predefinito. E si dice solo: "ciao, mondo". Ma si dice "ciao, mondo "in due punti. Si noti in alto a sinistra. Abbastanza duro da mancare questo. E 'grande e grassetto. E dove altro non sembra per dire, "ciao, mondo"? 

PUBBLICO: la scheda. 

David J. MALAN: Sì, la scheda stessa. Così, quando ho detto che il capo della pagina è tutto fino top-- e in effetti questo è il titolo. E 'solo nella scheda qui. E posso tirare questa scheda in modo da non confondere. Questa è solo una scheda singola ora, e in effetti si vede "ciao, mondo" qui e "ciao, mondo" quaggiù. Così abbastanza semplice. Ma è anche abbastanza semplice. E, in realtà, ho ingrandito. Posso cambiare la dimensione del carattere solo per ingrandire per l'accessibilità. Ma andiamo ora fare qualcosa un po 'più interessante. 

Ho intenzione di go-- whoops, lasciare mi tornare al mio file di testo. Io torno al mio file di testo, e ho intenzione di cambiare questo e dire "Ciao, Disney World." Salvare. E tornare al mio browser e fare clic su Ricarica. E ora, naturalmente, dice "Disney World". E ho intenzione di ingrandire artificialmente nel solo così è più facile da vedere. Così ora, purtroppo, io tipo di voglio a-- in realtà, questa è una caratteristica di Mac. Voglio cliccare su Disney World e andare da qualche parte, come disney.com, ma questo non funziona. Quindi, un principio fondamentale del web è collegamenti ipertestuali, i collegamenti che vanno altrove. Allora, come faccio a farlo? Beh, ho potuto solo dire, "Ciao, http://www.disney.com." Salva questo. Ricaricare. Ma anche questo, non è cliccabile. E ciò che è bello qui, anche se questo non è ancora funzionale, è che sembra che la il browser fa letteralmente solo quello che io dico di fare. Quindi, se ho appena digita un URL come questo, è solo andare a farmi vedere l'URL. Ho bisogno di usare tag o markup lingua per raccontare realtà il browser per fare ancora di più. Quindi ho intenzione di andare avanti e eliminare questo per un momento. E ho intenzione di dire, hey, del browser, avviare un ancoraggio qui, un link per così dire. E l'iper-di riferimento, la destinazione di che ancora, dovrebbe essere questo URL. E notare mie citazioni. Potrei usare le virgolette singole, troppo, ma bisogna essere coerenti, e vorrei in genere basta usare doppi apici per mantenere le cose semplici. Si noti che ho intenzione di chiudere il tag. E poi qui ho intenzione per dire, "Disney World". E ora ho bisogno di un po symmetry-- parentesi aperta, / a, staffa chiusa. 

Quindi che cosa ho introdotto? Abbiamo avuto un paio di tag già. HTML, Head, Titolo, Corpo, sono tutti i tag, per così dire, con le controparti aperti e chiusi. Ma notate, questo è una sorta di fondamentalmente diverso. Questo è ciò che chiameremo in HTML un attributo. Ed è un attributo solo una coppia chiave-valore. Questa è una cosa comune in coppia chiave-valore del computer science--. È un po 'lo strumento del commercio. Una chiave e un valore. Una parola e poi alcuni altra parola o le parole. E in questo caso, la chiave è href, e il valore è che la piena URL. E che un attributo fa è influenza il comportamento di un tag. E in questo caso, dobbiamo influenzare il comportamento del tag di ancoraggio, perché abbiamo bisogno di ancorare questo link da qualche parte. E come si fa che è mediante dell'attributo. 

Quindi ho intenzione di andare avanti e salvare il file ora. Torna al mio browser e ricarica. E, voilà, ora abbiamo la inizio di una pagina web legittima. Super-semplice, ma se mi passa il mouse sopra avviso questo-- nell'angolo in basso a sinistra, è super-piccole. Ma si fa vedere www.disney.com. E se lo scatto, in effetti questo mi rapisce a disney.com. Ora, la cosa curiosa ecco che non è il best-- l'URL più commerciabili, ma va bene, perché questo file non lo fa esistono sul World Wide Web. Esiste come un file locale a quanto pare I miei utenti directory-- / jharvard-- per John Harvard-- / desktop. Ma ha un URL. Succede solo per essere locale. Purtroppo, nessuno di voi può visitare questo, perché se si digita questo URL, si sarebbe dire al vostro browser cercare un file chiamato hello.html sul disco rigido. E, naturalmente, a meno che non hai stato seguito lungo manualmente, non sta andando ad esistere lì. 

Così va bene. Abbiamo ancora bisogno di un modo, in ultima analisi, per ottenere questo file nel web, ma cerchiamo di prendere in giro a parte un paio di implicazioni per la sicurezza di ciò che abbiamo appena visto e legare di nuovo al precedente discussione da questa mattina. Risulta che, se un del browser letteralmente appena fa quello che io dico di fare, e sembra essere il caso che un tag di ancoraggio è influenzato dal valore questo attributo chiamato href ma visualizza questo testo, questo sembra implicare che ho potuto mettere l'URL in entrambi i posti e quindi ricaricare e ora vedere l'URL e accedere all'URL. Avviso, se mi passa il mouse sopra la parte inferiore a sinistra, Sono infatti in corso ancora da disney.com. 

Quindi, se siete mai stati phished-- P-H-I-S-H-E-D-- con uno di quei messaggi di posta elettronica fasulli da come PayPal vostra banca, probabilmente avete ottenuto i collegamenti all'interno dell'e-mail che stai leggendo che ti dice di fare clic qui per andare conferma la password o confermare la data di nascita o sociale o qualcosa di socialmente si ingegneria di divulgare informazioni. Beh, potrei tipo di prendere Il vantaggio di questo, non avrei potuto? Potrei dire qualcosa come, www.paypal.com. E invece di disney.com, I potrebbe andare a, come, badguy.com. Ricaricare. E come è facile di ingannare, in particolare un lettore non tecnico o un cursorily lettura lettore di cliccare un link come questo, che se clicco it-- Io in realtà non voglio andare badguy.com. Non so che cosa è in realtà c'è. Così paypal.com, avviso, è quello che dice che sta andando, ma naturalmente, se guardo verso il basso super-basso, è un po 'sfocata, ma si dice badguy.com. Questo è l'unico dicono in questo momento che sto andando al posto sbagliato. E quando ho detto prima che le banche in realtà non dovrebbe incoraggiare o treno utenti in link cliccando, questo è solo una manifestazione di esso. Ed è così semplice. Ora sei un avversario, se si fa qualcosa di simile e cercare di ingannare un utente a visitare il tuo sito web. Ma per ora, vi terremo le cose belle e pulite. Stiamo per andare avanti e riavvolgere questi cambiamenti. Ricaricare la pagina. E torno a disney.com. 

Vediamo se non siamo in grado di prendere in giro questo a parte un po 'di più. Quindi, "ciao, Disney World." Sto per dire qui. Forse sto andando a fare un po 'di spazio. "Ci auguriamo che il vostro soggiorno!" Salvare. Ricaricare. Non è che non è rea-- quello che intendevo, giusto? Voglio dire, se io sto trattando il mio testo presentare come un word processor, che cosa speri sarebbe successo qui? Sì, mi sento come se ci dovrebbe essere una interruzione di linea qui, così ci si sente buggy in qualche modo. Ma che in realtà è deliberata, perché come prima, il browser sta solo fai quello che gli si dice di fare. Non l'ho detto a rompere le linee. Non ho detto che a muoversi verso il basso, anche però, intuitivamente, mi sento come ho fatto io. Così si scopre che dobbiamo un po 'più markup, e ho intenzione di risolvere il problema nel modo seguente. Ho intenzione di precedere questo primo ciao con quello che viene chiamato un tag di paragrafo. E poi ho intenzione di andare avanti e avvolgere quest'altra frase in un altro tag di paragrafo, anche se sono paragrafi super-corti. Ora ho intenzione di risparmiare. Ricaricare. E ora abbiamo che spazio, e specie di avere la semantica di due paragrafi distinti. 

Questo è tutto bello e buono, ma sarebbe bello poter aggiungere un'immagine a questa pagina, così ho intenzione di andare a cercare Topolino su Google Immagini. E solo per divertimento, io sono andando a prendere questa immagine. Ho intenzione di andare avanti ora e afferrare l'URL di questa immagine, anche se non c'è diverso modi per farlo. Per ora, sto solo andando a copiare l'URL. Ho intenzione di tornare nel mio testo file e ho intenzione di dire qui, img src = tra virgolette tale URL, super-lungo. E poi l'idea di un immagine è un po 'diverso. Non c'è davvero alcuna nozione di partenza un'immagine e termina un'immagine, come un inizio contrassegnare un tag di chiusura. Così ci si sente un po 'strano per Mi semanticamente per fare questo, di avere un tag vicino immagine. Non è corretto. E 'perfettamente corretto, ed è incoraggiato, ma c'è notazione abbreviata. Posso tipo di simultaneamente aprire e chiudere lo stesso tag, e che farà felice il browser. Quindi è solo un po ' più succinta per le cose che concettualmente in realtà non fare dare un senso a inizio e fine. Hanno appena ci sono, o non lo sono. 

Quindi ho intenzione di salvare questo e tornare al mio "ciao, mondo" ed ricarica. Ed è un po 'fuori controllo, perché l'immagine è in realtà un po 'grande, ma va bene. Ho potuto ridimensionare in un programma. O se si sa che cosa. Proprio per dimostrare, io sono andando a dire in realtà che la larghezza di questa cosa dovrebbe solo 200 pixel, 200 punti. Lasciami andare avanti e salvare e ricaricare, e ora la pagina sembra un po 'più ragionevole. Ma notare il modello. Beh, ho tipo di insegnato a tutti voi di HTML in un certo senso, almeno concettualmente, perché tutto è HTML è questi tags-- tag aperti, i tag chiusi, e gli attributi che modificare il loro comportamento. E, a quanto pare, ogni tag può avere zero o un o due o più attributi, ciascuno di che fa qualcosa di un po 'diverso. Ora, come fai a sapere ciò che esiste? Basta ascoltare qualcuno come vi dica ciò che esiste, o semplicemente Google in giro per un tutorial su HTML, ed è davvero così semplice. 

In verità, quando ero un undergrad anni fa e ho imparato HTML, uno del mio insegnamento di matematica assistenti appena trascorso un po 'di tempo mi tutoraggio per come mezz'ora, un'ora, e poi sono stato per la mia strada. Ero sul mio cammino verso la realizzazione le più orribili siti di sempre, che, a quanto pare, non ho davvero progredito oltre. Ma il punto è che, una volta che si capire queste semplici ideas-- se arcana text-- ma questi semplici idee di iniziare un pensiero e la chiusura di un pensiero, mantenendo tutto ben equilibrato, guardando qualcosa, modificando il comportamento di quel tag, che è davvero tutto c'è da esso. E infatti, se ora andiamo a qualcosa come google.com-- in realtà, andiamo un posto un po 'più reasonable-- stanford.edu. E ho intenzione di andare a Visualizza, ,. Developer Visualizza sorgente E 'brutto, ma notice-- e io lo zoom in comunicazione alcune cose che è già familiare. C'è questo qui, che è un browser. Ecco che arriva HTML5. C'è HTML. A quanto pare, c'è un attributo che non ho uso che specifica il lingua della pagina, e questo può aiutare con automatica traduzione e cose del genere. Ecco la testa della pagina. Ecco il titolo della pagina Stanford. C'è un tag non ho parlare di yet-- meta-tag. E 'solo una sorta di informazioni di base. Aiuta con SEO, o ottimizzazione del motore di ricerca, o risultati di Google-ricerca o simili. Ma se continuiamo a guardare, tenere cercando, ecco il tag body. E ci sono mazzi di altri tag non abbiamo ancora parlato. Ma Div è uno per un divisione della pagina. E 'come un rettangolo invisibile se di tipo desidera mentalmente suddividere la pagina in diverse unità online. E poi un sacco di div I vedere, qualcosa che si chiama classe, ma ci torneremo a questo. 

Si tratta di forme interesting--. Le forme sono in tutto il web. Ogni casella di ricerca si è mai usato è una forma. E, così, cerchiamo di vedere in realtà. Modulo. Azione. L'azione di questo modulo, per qualsiasi ragioni storiche, è tale URL. Metodo è "post". Risulta che le richieste HTTP possono utilizzare il verbo "avere", come abbiamo visto prima, o "post". E vedrà la differenza questo in un momento. Andiamo a vedere in realtà che cosa si tratta. Lasciatemi tornare alla pagina di Stanford. Quale forma stanno parlando A proposito, cosa ne pensi? Ciò che salta fuori di te? 

PUBBLICO: Casella di ricerca. 

David J. MALAN: Sì. Così fino in alto a destra qui è questa casella di ricerca. Ed è così che hanno implementato un it-- tag che letteralmente forma open-staffa. E poi cerchiamo di cercare qualcosa. Andiamo a cercare un compagno di mine-- "Nick Parlante". Invio. E, naturalmente, è andato a un URL leggermente diverso. Mi permetta di tornare qui. Facciamo della ricerca di "corsi". Accidenti. È andato a un URL diverso. Quindi, Stanford di aggiungere un po 'di magia che non mi stanno prendendo all'URL che abbiamo visto nella azione attributo lì. Ma questa forma qui è implementato puramente per mezzo di questo markup qui, questi tag. In realtà, qui è l'ingresso per il tipo di ricerca che si desidera. Qui è l'ingresso per un altro tipo di ricerca. Qui è l'ingresso per la stringa stessa. E così l'obiettivo non è quello di avvolgere le nostre menti intorno a tutti questi tag ma solo per vedere. E 'solo l'apertura e chiusura tag e guardando le cose. Sì? Victoria? 

PUBBLICO: [INAUDIBLE] David J. MALAN: Questa è una buona domanda. Questo è un po 'più complicato da vedere. Mi permetta di tornare a quella domanda in pochi minuti quando guardiamo qualcosa chiamato fogli CSS, o di stile CSS, e possiamo cercare di dedurre tanto dalla pagina. Quindi, se oggi diamo uno sguardo a google.com, vediamo cosa loro pagina assomiglia. Si potrebbe they're-- che carino oggi. OK. Tutto fatto. Va bene, quindi Visualizza origine. Si potrebbe pensare che Google ha codice sorgente veramente bello. Quindi, a quanto pare, quello che sta succedendo qui? Ed infatti, questo non è nemmeno HTML. Questo è qualcosa che si chiama JavaScript. E cerchiamo di andare avanti e andare avanti. Io non so nemmeno dove la pagina inizia. Ho intenzione di usare Command F, aperto staffa HTML. Va bene, non vi è. Ho trovato l'inizio della pagina, e c'è così tanta roba qui dentro. 

Che cosa sta realmente succedendo? Beh, sai una cosa, possiamo pulire questo in su. Se io invece vado a questo Ispezionare barra degli strumenti, questo strumento diagnostico speciale, e non andare a rete, dove continuiamo a oggi, ma se vado a Elements, ciò che è veramente bello è che un browser ha molto occhi molto meglio di me. E il browser in grado di leggere quel casino di una pagina web, che la posta HTML abbiamo appena guardato, e può analizzarlo o leggere e analizzarlo e lo riformatta in un bel modo human-friendly. Quindi quello che sto vedendo ora in questa schermata qui sotto Elementi, esattamente lo stesso contenuto, ma sono rientrate tutto, hanno colorized, ma è lo stesso testo esatto che ho scaricato dal server. 

E ciò che è bello è ora posso vedere nel corpo, per la comunicazione instance--, La pagina è ancora composto di solo una testa e un corpo, e posso gerarchicamente immergersi qui. Si noti che Google sembra avere a divs-- questo e questo. Posso espandere tale. C'è un sacco di altri div. Quindi è un po 'complessa. Ma aspetta. Questo sembra molto di più leggibile, relativamente, di questo. Perché Google imbarazzante stesso semplicemente inviando questo enorme pasticcio di codice di alcuni sorta proprio per implementare qualcosa che sembra così semplice a prima vista? Come, perché non aggiungono più spazi? Perché non hanno colpito Inserisci come ho fatto? Guardate quanto è buono sono stato a scrivere una pagina web. Mi ha colpito Enter così diligentemente. I rientrato quindi tutto è così bella e leggibile. Perché Google non pratica la stessa cosa? 

PUBBLICO: [INAUDIBLE] David J. MALAN: Good. Molto giusto. Non hanno un po ' persona a Google manualmente l'aggiornamento più la home page. Non è 1.999 più. Così hanno software. Hanno altri strumenti generare dinamicamente sono HTML. Naturalmente, tale codice stesso è stato scritto da esseri umani, ma la realtà è, è abbastanza giusto dire, il browser di certo non lo fa importa quanto disordinato il codice è. Ma c'è un ancor più ragione tecnica convincente che Google distribuisce la loro HTML codice in un tale sloppy, apparentemente modo schiacciante tutto imballato insieme con pochissimo way-- pochissimo nel modo di formattazione come ho fatto io. 

PUBBLICO: [INAUDIBLE] 

David J. MALAN: più veloce? Perché? E che cosa hai detto, Lydia? Più veloce? Perché più veloce? PUBBLICO: [INAUDIBLE] David J. MALAN: Non c'è spazio per leggere. Sì. Quindi, pensare a quello che è uno spazio. Così ogni carattere sulla tastiera prende una certa quantità di spazio per rappresentare, sia fisicamente, come se fosse occupa molto spazio, o in qualche modo sotto il Cappuccio, che richiede la memoria. E come un aside-- e faremo comunicare di più circa questo tomorrow-- ogni carattere sulla tastiera tipicamente richiede 8 bit o un byte. Così un reticolo di 8 zeri o quelli, o solo 1 byte, come noi gli esseri umani sarebbero tipicamente dire. Ecco, questo è piccolo, ma è ancora non-zero. E 'ancora una certa quantità di spazio. Quindi, se un ingegnere o Google colpisce la barra spaziatrice una sola volta, e supponiamo Google-- è super-popular-- supporre che un miliardo di persone visitare la loro home page al giorno, o un numero di persone visitare la home page di un miliardo di volte al giorno, quanti byte aggiuntivi che ha ingegnere del software appena costato Google colpendo il suo spazio bar una volta? 

PUBBLICO: [INAUDIBLE] David J. MALAN: non è così male. Solo uno volte byte un miliardo. Così a-- PUBBLICO: 8 miliardi di gigabyte. David J. MALAN: Non 8 miliardi. 8 miliardi di byte. Ma 1 gigabyte. 1 gigabyte sarebbe l'unità di misura. Se lui o lei fa due spazi, 2 gigabyte. Tre gigabyte. Destra? Si scale costoso. E così, in casi come Google, che, scontato, sono casi estremi, ci sono altre questioni che sorgono appena prendendo decisioni molto ragionevoli o prendendo molto semplici azioni umane, perché ha questo effetto amplificato. Quindi uno dei motivi questo sembra così compresso è esattamente come Victoria said-- era appena generato da computer in ogni caso. Quindi un grosso problema. Lasciate che il browser capirlo. Ma è anche volutamente non ha molto spazio, perché lo spazio non è necessaria. E lo spazio in realtà costa denaro. 

E 'uno costa tempo, perché solo a spingere che molti più dati su sede di google.com solo ha avuto modo di prendere una certa quantità di tempo, anche se è millisecondi o microsecondi, ma che aggiunge fino in tanti utenti, o più probabilmente, probabilmente costa denaro. Google probabilmente si connette a qualcun altro nel mondo, uno di quelli peering punti, e se hanno qualche tipo di rapporto finanziario il quale i costi i loro dati denaro, si potrebbe anche ridurre al minimo la quantità di dati stanno sputando su la loro connessione internet. 

Quindi la cosa divertente, anche se, in ultima analisi, o forse la cosa rassicurante, è che anche se questo sembra terribilmente schiacciante, alla fine della giornata, è ancora gli stessi principi esatto questo molto semplice pagina qui di HTML pagina. Quindi, solo per riassumere e in modo che si avere una versione canonica se non erano in seguito insieme per scelta qui, qui potrebbe essere la più semplice delle pagine web, quindi qualcosa di giocare con forse più tardi. 

Bene, introdurre un paio di altre idee ora. Stiamo per introdurre qualcosa chiamato un tag di stile. Siamo in grado di stilizzare questa pagina in modi più interessanti. Così, mentre e-mail HTML è tutta una questione di marcatura fino i dati, sorta di specificare un browser come strutturare i dati, dove metterlo, CSS, o Fogli di stile, è una seconda lingua generalmente viene mescolate ad HTML come vedremo see-- ma possiamo pulire che in un moment-- che prende è il miglio finale, e stilizza esso. Ottiene i colori giusto, la dimensioni dei caratteri appena a destra, il posizionamento giusto. E 'tutta una questione di estetica o la formattazione, non si tratta di i dati fondamentali in sé. E il modo più semplice per mostrare questo è forse l'esempio. Quindi ho intenzione di andare oltre al mio semplice file di testo. E in un momento, io noi a piedi attraverso il processo di fare questo noi stessi. 

Ho intenzione di tornare al mio file qui e ricaricare la pagina appena per confermare quello che sembra. Ecco dove siamo ora. Mi sento come figli godrebbero avendo un pò di colore a questa pagina web. Quindi ho intenzione di andare qui nella testa della pagina. E ho intenzione di fare stile, / style. E poi all'interno di questo, sto andando a dire il corpo del mio page-- e questa formattazione è, a prima vista, forse un po ' strano ma convenzionale. Io vado a dire che lo sfondo il colore di questa pagina deve essere di colore verde. E questo è, purtroppo, sorta di non il miglior design. Si noti che in precedenza nel mondo di HTML, Ho detto che gli attributi sono queste coppie chiave-valore. Qualcosa è uguale a quote unquote "qualcosa". Nel mondo dei CSS, che era progettato da alcune persone diverse, hanno deciso che, nella loro mondo, coppie chiave-valore sarebbe parola colon qualcosa. Quindi è la stessa idea, però. E 'associare un valore con qualche chiave che in qualche modo influenza il comportamento di questa pagina. 

E si può intuire. Che cosa è questo probabilmente sta andando da fare anche se non hai mai visto HTML o CSS prima? AUDIENCE: Cambiare il colore di sfondo. David J. MALAN: Sì, cambiare il colore di sfondo. E in particolare il colore di sfondo del corpo. Ma nella misura in cui la corpo per ora è il web page-- è l'unica cosa al di sotto della barra del titolo really-- è probabilmente andando a influenzare la stessa cosa. Quindi vediamo. Salviamo questo. Vai qui e ricaricare. E 'piuttosto orribile. E cosa sta succedendo qui è un effetto collaterale. Ho appena scelto questa immagine in modo casuale. Perché il non verde permea dietro Mickey? PUBBLICO: [INAUDIBLE] David J. MALAN: Esattamente. Si scopre che le immagini, piuttosto molto tutte le immagini che potremmo utilizzare, sono tutti rectangles-- di rettangoli. Anche se Mickey ha alcune curve a se stesso e ha un background, In tale contesto deve essere qualcosa. Deve essere bianco. Deve essere nero o qualcosa d'altro. Può essere trasparente. E infatti, ho potuto aprire Topolino qui in un programma chiamato Photoshop o qualcosa di simile e cambiare tutto questo bianco sfondo trasparente, in modo che il verde sarebbe trasparire. Ma questo è qualcosa che avrei bisogno a chiedere di me stesso o un artista grafico o un designer al mio società, ad esempio, da fare, soprattutto perché ho appena preso in prestito questo uno da internet. Ma questo è il motivo per cui questo sta accadendo. 

Quindi, che cosa potremmo desiderare di fare? Beh, potremmo voler dire che veramente auguriamo che il vostro soggiorno. E per dare enfasi, voglio per rendere questo forte, e così ti dico forte e aperto chiudere forte e quindi ricaricare. Ed è un po 'difficile per vedere il proiettore ma forse proprio ora salta fuori di te un po 'di più. Quindi è possibile aggiungere il corsivo in questo modo, rivestimento in grassetto in questo modo. Potremmo cambiare i colori. In realtà, solo per calci, io sono intenzione di andare avanti e fare questo. Non mi piace molto come la mia paragrafi sono così vicino insieme, così potrei fare qualcosa di simile. Io vado a dire al browser, cambiare ogni tag di paragrafo di avere, cerchiamo di say-- in realtà, si sa che cosa, cerchiamo di allinearlo text-align, centro. E ancora, so che questo solo perché qualcuno ha insegnato a me o Ho cercato in un punto di riferimento on-line. Quindi, mi permetta di salvare questo. E, ah, ora ho centrato l'immagine lì. E in realtà, si sa che cosa, se Mi muovo la mia immagine in un paragrafo tag-- così un terzo paragrafo, anche se non del testo. Salviamo che e ricaricare. Ora la pagina sta cominciando a sembrare tipo di-- Voglio dire, è ancora abbastanza brutto, ma almeno sembra che ho trascorso due minuti invece del minuto realizzandolo. 

E così, in modo incrementale, possiamo fare queste modifiche estetiche ora alla pagina? Non ho davvero cambiato i dati nel pagina diversa aggiungendo la parola davvero. Ho metadati aggiunti, se si vuole. Hey, il browser, rendono la parola "veramente" in grassetto. Ma i dati non è forte. Ecco i metadati. I dati sono "davvero". Così abbiamo ancora un po 'di gli stessi concetti come prima. Ora, naturalmente, questo non è sul web, così ho intenzione di fare un passo finale qui. 

Ho intenzione di andare a hello.html e basta evidenziare e copiare questo. E ora ho intenzione di andare in Cloud9, che Ti accompagno attraverso in un attimo. E le probabilità sono sarete presto, se Non già, in una schermata come questa. E vorrei solo darvi un rapido giro di ciò che Cloud9 è in realtà. Quindi, di nuovo Cloud 9 è questo servizio basato su cloud che voi e mi dà l'illusione di avere la nostra macchina virtuale in the cloud, tecnicamente un contenitore in the cloud, che abbiamo piena privilegi amministrativi a. Quindi, in teoria, nessuno altra parte del mondo ha l'accesso alla schermata Sono guardando in questo momento, tranne forse la gente che gestiscono il sito, perché tecnicamente hanno accesso fisico e così via. 

Quindi, cosa vediamo in questo ambiente? Ho intenzione di diminuire, perché è un po 'piccola. E vorrei sottolineare sopra qui solo per un momento. Sul lato sinistro del mio e vostro schermo, c'è un browser di file a sinistra. Quindi, simile nello spirito per Mac OS e Windows. Queste sono tutte le i file nel mio conto. E per impostazione predefinita, se il vostro conto è come la mia, vedrete o subito vedere HelloWorld.html e readme.md. Qui a destra, questo è dove i miei file di testo stanno per andare. Se avete mai utilizzato Microsoft Word o Blocco note o TextEdit, questa è la parola il mio editing di file sta per andare. E poi il più arcano caratteristica di questo ambiente che non sarà davvero bisogno di usare è qui chiamato una finestra terminale. Se hai utilizzato DOS da altri tempi, questo è il Linux o l'equivalente Linux di DOS. Si tratta di un interface-- basato su testo nessun clic del mouse, senza trascinamento. Tutto quello che puoi fare è digitare comandi, ma questi comandi in grado di creare file, spostare file, aperto directory, directory, chiudere fare qualsiasi numero di cose. Ma per ora, ci limiteremo a passare il nostro tempo qui. 

E così facciamo questo. Se siete in questa ambiente, che si dovrebbe essere se è stato creato uno spazio di lavoro già, andare avanti e basta salire File, Nuovo per un momento. E che vi darà una nuova scheda a destra qui in mezzo. E io solo-- e andiamo andare avanti e fare questo. Andiamo avanti e ora non File, Salva e andare avanti e chiamare hello.html, da non confondere con HelloWorld.html, che è venuto con il nuovo account gratuito, che è solo un file di esempio. Vedrete apparire improvvisamente, probabilmente sul lato sinistro, e la scheda sarà ancora aperta. E lasciate che vi incoraggio ora di ricreare questo file o alcune loro varianti. E se non riesco a vedere sul schermo, questo è identica alle slitte che probabilmente avete in un'altra scheda. 

Così, in breve, effettuare la prima pagina web, salvarlo, e poi in un attimo, Ti faccio vedere come si può effettivamente vedere questo. Ma cambiare almeno una cosa. Cambiare HelloWorld a qualcosa di vostra scelta, in modo che sei convinto che è il tuo di file e non quello che ho appena creato. Tutto ok. E quando sei ready-- no rush-- quando si è pronti, andare avanti e salvare il file una volta che hai fatto queste modifiche. E se si fa clic sul button up Esegui superiore, questo dovrebbe aprire una nuova scheda che vi dirà che cosa URL si può visitare il file in, ma potrebbe prendere un momento per tra virgolette "start Apache", che è il nome del server web. Quindi state attenti a fare esattamente cosa c'è nel file in ultima analisi. Quindi in questo momento, io Zoom avanti. Se si digita open-staffa HTML, avviso mi sta spingendo a finire il mio pensiero. E se ho finito il mio pensiero, mi dà automaticamente il tag di chiusura. Ma l'attesa viene poi mi ha colpito Invio, e quindi spostare all'interno vi e non la testa dentro e poi faccio corpo all'interno. Ed è un po 'strano in un primo momento, perché sta facendo il lavoro per voi, ma rendersi conto che in ultima analisi, esso consente di risparmiare battute. Ed in effetti, una caratteristica molto comune programmazione ambienti in questi giorni sia per lo sviluppo web come questo e programmazione attuale, che parleremo domani, è queste funzionalità di completamento automatico, cose che solo consentono una programmatore o un designer digitare un minor numero di tasti a ottenere la stessa cosa. A volte è bello, però. A volte è solo fastidioso. E, ancora una volta, una volta che hai trascritto diapositiva o qualche variante di esso, è possibile fare clic sul pulsante Esegui sulla parte superiore. E poi sul fondo finestra, sarai informato a che cosa URL è possibile visitare la vostra pagina web. Miniera, per esempio, è business-daharvard.c9users.io e così via. Va bene, quindi, lasciare che me-- delle domande? Tutte le altre domande circa ottenere giusto questo lavoro prima di aggiungere funzioni? E mi permetta di proporre, basta per ottenere la gente comfortable-- perché è una cosa da poco copia-incollare ciecamente quello che ho fatto. Ma solo in modo che la gente lottare con almeno una delle cose da fare, Ho intenzione di accendere po 'di musica. Ho intenzione di proporre un elenco di cose che si possono potenzialmente aggiungere. E si può certamente utilizzare Google. E perché non abbiamo solo propone che si tenta di risolvere almeno un particolare problema qui. Quindi, in termini di tag, mi permetta di riutilizzare questo qui. 

A dire il vero, mi permetta di mettere in una forma testuale. Diciamo che tra i tag che potremmo usare qui ci sono alcuni tag qui. Abbiamo visto il tag di paragrafo. Ora sta andando per il completamento automatico. tag di paragrafo, il tag di ancoraggio. Diciamo che si desidera fare qualcosa di più grande, così si potrebbe like-- il tag span può aiutare. Beh, potrebbe essere necessario qualche aiuto per questo in un momento. Abbiamo visto div. Vedrete c'è tavolo. C'è qualcosa chiamato TR, td. Th, TD. Tornate a che in un attimo. Che altro potrebbe essere a portata di mano? C'è forte. Non c'è enfasi, o meglio em. There's-- che altro Potrebbe avete voglia di qui? Bene, prenderemo un guarda che insieme. Modulo, che abbiamo visto. C'è modulo. C'è di ingresso e pochi altri. Va bene, quindi cerchiamo di fare questo. Per rispondere ad una Victoria domanda, mi lascia prima basta assicurarsi che tutti siano in grado di ottenere il loro lavoro ciao. Allora mi permetta di introdurre un paio di altre idee. Poi lasceremo la gente a risolvere i qualche problema da soli. Poi ci troveremo a tornare a questa nozione di una forma, e faremo in realtà re-implementare insieme l'interfaccia front-end, per così dire, per Google stessa. Useremo Google come il back-end e lasciare loro fare il duro lavoro, la ricerca, ma staremo a ricreare il front-end di Google e il modulo di ricerca che essi hanno sulla propria home page. E così torneremo a questi tag in un attimo. 

Quindi questo è stato quello che ho proposto solo un momento fa. Possiamo aggiungere la stilizzazione di un pagina interna di questo tag stile, e siamo in grado di stilizzare sullo sfondo colore, l'allineamento del testo, che si tratti di centro o di sinistra o di destra. Ma molto rapidamente si farebbe trovare o un web designer avrebbe trovato che questo diventa un po 'ingombrante, perché si sta facendo ciò che è chiamato il contenuto di miscelazione con la presentazione della stessa. Si sta mescolando i dati e l'estetica della stessa. E in effetti, se si considera cosa sta per accadere nel corso tempo-- questa è una molto piccola La pagina web, ovviamente. Ma se posso aggiungere contenuti di questa pagina e aggiungo lo stile a questa pagina, Nella pagina diventa molto rapidamente più a lungo e più a lungo e più a lungo. E immagino che voglio avere una seconda pagina web che condivide alcuni di questi attributi. Supponiamo che la mia pagina web per il mio secondo site-- anche, voglio il centro di tutto, e voglio anche tutto con uno sfondo verde. Sto praticamente andando ad avere per copiare e incollare alcune di queste linee in quel secondo file, che si sente bene. Si risolverà il problema. 

Ma cosa succede se voglio una terza pagina o una pagina 30 o una pagina 40? Ora ho intenzione di essere la copia e incollando un sacco di codice duplicato in più file. E così supporre che Decido o mi è stato detto, Ehi, non stiamo utilizzando un sfondo verde più. Stiamo per iniziare a utilizzare arancione. Che cosa si deve cambiare? Ebbene, devi cambiare quello stile da verde a arancione in quanti posti? Come 30 o 40 posti. E 'noioso. E 'soggetto ad errori. C'è un certo numero di ragioni dove non si vorrebbe indurre quel tipo di dolore per te stesso. E così non sarebbe bello se potessimo prendere quello che ho appena mettere tra queste due gialli tag, questi tag di stile, fattore fuori, e mettere tutto il mio stilizzazione in un unico file centrale che tutti i 30 o 40 dei miei altri file prendere in prestito da o in qualche modo riferimento, Non dissimile la messa in rete diagrammi stavamo facendo prima? 

Quindi, se vado a qui, sono andare a proporre realtà che si sostituisce la tag di stile con qualcosa chiamato il tag link, che è terribilmente, terribilmente nome, perché non si usa il tag link per creare quello che noi umani conosciamo come un link in una pagina web. Per questo, è possibile utilizzare quale tag? Come si crea un collegamento a una pagina web? PUBBLICO: L'a. David J. MALAN: The a, o ancora tag, che è andato a Disney prima. Il tag link qui sta dicendo questo-- link a un file chiamato styles.css, il rapporto cui sta per essere che è il mio foglio di stile. Quindi questo è uno dei S di a fogli di stile CSS CSS--. Stile sheet-- due delle S di in CSS. Foglio di stile a cascata. Questo significa solo, hey, il browser, andare trovare styles.css sul server locale e usarlo come il foglio di stile, il che significa all'interno di quel file sta per essere tutte le stilizzazioni che abbiamo appena fatto. E così quello che quel file potrebbe essere simile è questo. E mi limiterò a fare questo un breve esempio, perché non abbiamo bisogno di per ottenere troppo nelle erbacce qui. Ma se copio questo, quello che sto proponendo è che un programmatore creare un nuovo file, incollare in quei lines-- whoops-- incollare in quelle righe, salvarlo come styles.css, e poi, in l'altro file, cancellare tutto questo e sostituirlo invece con questo tag link. In modo che se io link href = "styles.css", il rapporto è "foglio di stile" tag di chiusura. Salvarla. Torna al mio helloworld. Ricaricare. 

Letteralmente non è successo nulla. Questa è una buona cosa, perché significa che è in realtà tutto lavoro. Per dimostrare tanto, supponiamo che io faccio un errore di battitura, e io chiamo questo "Styles.css" con un capitale S, che è non corretta, e quindi ricaricare. Ora si può vedere semplicemente non funziona. Ora, perché? Bene, usiamo un tecnica di prima. Lasciami andare avanti e, in mio browser, in Chrome, sono andando ad aprire quella speciale scheda di rete come prima, e mi permetta di ricaricare la pagina. Quello che non sei sorpreso di vedere ora? O forse sei sorpreso di vederlo. In entrambi i casi, cosa vedi adesso? PUBBLICO: [INAUDIBLE] David J. MALAN: Non è stato trovato. Perché non è trovato? Ebbene, il capitale Styles.css-- S-- non esiste. I misnamed esso. errore di battitura semplice. Ma sto comprensibilmente ora un 404, perché il server sta dicendo, hey, non è stato trovato. Letteralmente, non lo so dove il file è. Così come risultato, il browser vi mostra quello che può, il contenuto grezzo della pagina, che era 200, il HTML, ma la stilizzazione non può essere aggiunti successivamente. E questo è ciò che si intende con cascata. È possibile sorta di aggiungerlo dopo, ed è una sorta di affina l'estetica della pagina web. E si può anche ignorare quelli stili con ancora altri fogli di stile se vuoi. Non è trovato, tuttavia, in questo caso, perché naturalmente, ho misnamed esso. Così avrei dovuto sistemare le cose prima. 

Quindi andiamo avanti e proporre la seguente. Andiamo avanti e fare questo. Partendo forse il file HelloWorld, vorrei solo invitare una coppia di caratterizzare suggerimenti. Così, Victoria, si voleva rendere il testo più grande, giusto? Va bene, in modo che possiamo non rendere il testo più grande. E faremo ogni pizzichiamo off solo un problema da risolvere. Rendere il testo più grande. Non ho intenzione di preoccuparsi scrivere questo quando abbiamo avere la tecnologia proiettile proprio qui. Così alcuni problemi. Quindi stiamo andando a provare per rendere il testo più grande. Tutto ok. Che altro qualcuno dovrebbe proporre? Cos'altro potremmo desiderare di fare in una pagina web? Veniamo con un breve elenco di cose e poi delegare alla gruppo di conoscere questo numero. 

PUBBLICO: [INAUDIBLE] 

David J. MALAN: OK, testo della posizione su diversi lati della pagina? Tutto ok. Qualcos'altro. 

PUBBLICO: [INAUDIBLE] David J. MALAN: E '. Quindi un GIF è solo un formato di file diverso. Abbiamo usato solo, quello che, una png o jpg probabilmente? Abbiamo usato un jpg. Se siete curiosi, un eccessivo risposta alla tua domanda è un jpg viene generalmente utilizzato per fotografie, perché sostiene milioni di colori o di colori a 24 bit. Una gif è generalmente utilizzato per, come, memi internet queste animazioni days--, gif animate come. Ma succede usare un colore più piccolo tavolozza, solo 256 colori possibili, ma supporta la trasparenza e l'animazione. E poi c'è il png, che supporta trasparenza e più colori ma non l'animazione. Quindi è un trade-off. Quindi, l'aggiunta di una gif, però, sarebbe funzionalmente equivalente ad aggiungere un png o jpg. Sì. Immagine fonte è uguale. Quindi, qualcosa di diverso. Veniamo con qualcosa che abbiamo inviato a Victoria da fare qui. 

PUBBLICO: Aggiungere i pulsanti per un modulo. David J. MALAN: OK. Così pulsanti aggiungere un modulo. E lo faremo uno insieme. In modo che sarà un perfetto segue subito dopo questa sfida. Qualunque altra cosa? Che cosa potrebbe desideri fare? Il web si sente molto deludente se questo è tutto quello che possiamo fare. AUDIENCE: Cambiare il colore del testo. David J. MALAN: Cambiare la cosa? PUBBLICO: Il colore del testo. David J. MALAN: Cambia il colore del testo. Tutto ok. Quindi, cerchiamo di fare questo. Proprio di nuovo in modo non che sei, semplicemente a memoria, facendo esattamente quello che sto facendo, Ho intenzione di attivare la musica per forse cinque minuti qui. Siete invitati a utilizzare Google. Sei il benvenuto a chiedere a me, e Io sussurro un suggerimento in un orecchio. Sei il benvenuto a guardare Oltre di altre spalle. Ma risolvere solo uno di questi problemi. Ma faremo l'ultimo, il forma uno, se potessimo, insieme. Così cinque minuti per risolvere uno qualsiasi di questi problemi utilizzando Google, l'intuizione, o qualsiasi altri mezzi a vostra disposizione. 

[RIPRODUZIONE DI BRANI MUSICALI] Tutto ok. Nessun problema se si desidera per mantenere armeggiare, ma io rovinare una coppia di queste risposte. Quindi il primo consiglio da Victoria era per rendere il testo più grande. Quindi c'è un paio di modi per farlo. Ho attualmente ripristinato il mio schermo di queste dimensioni, se ho zoomato artificialmente solo per vedere le cose. E facciamo questo. Lasciami andare avanti e afferrare un po 'di testo latino generica solo così abbiamo qualcosa su cui lavorare. Quindi, dammi solo un momento. Farò tre paragrafi. OK. Questo sarà un esempio migliore. Così, per i curiosi, in il mio hello.html, ho solo incollato a tre senza senso paragrafi in latino solo così abbiamo un testo con cui lavorare. E l'obiettivo di Victoria è stato quello di far parte del testo più grande. Così ho potuto, come prima, andate qui. E mi permetta di fare nel modo giusto. Ho intenzione di avere un collegamento tag che punta a un file chiamato "styles.css," il rapporto dei quali è di nuovo "foglio di stile." E poi ho intenzione di salvare quella e di aprire questo "styles.css." 

Quindi, come prima, ho la capacità in questo file CSS per ignorare realmente il default estetica di una pagina web, e l'estetica predefinite, naturalmente, sono abbastanza noiosa. È una specie di normale dimensione del carattere, il nero il testo, sfondo bianco, e così via. Quindi supponiamo che io voglio fare tutto questo testo più grande. Ho potuto fare un paio di cose. Nel mio file styles.css, io potrebbe dire, si sa che cosa, applicare la seguente alle il corpo della pagina. Andare avanti e fare la dimensione del carattere 24 punti, che è un numero che potrebbe utilizzare in Microsoft Word. Mi permetta di tornare nel mio spazio web pagina qui e ricaricare, e si può vedere che è già molto più grande. E siamo in grado di ottenere un po 'pazzo, proprio come abbiamo può su un desktop-- renderlo 96 punti. Ricaricare. E si sta facendo un po ' ingombrante a questo punto. 

Ma potrei essere un po 'più preciso. Invece di applicare questa foglio di stile per il corpo della pagina, Che altro potrei applicarlo a posto, Quali altri tag che potrebbe ancora funzionano nello stesso modo? 

PUBBLICO: Il tag p? David J. MALAN: tag P. Quindi la testa non sarebbe corretta, perché la testa, non si può effettivamente controllare l'estetica. C'è sia il testo c'è o non c'è. Ma il p tag-- che può immergersi in un po ' profondo, per così dire, al punto tag. E anche se ci sono tre, questo è perfettamente bene, perché in CSS, quando dico solo "p", questo significa applicare la seguente a qualsiasi tag che corrisponde a questo selettore, il selettore basta è il nome del tag. Quindi, ovunque si vede un "P", applicare la dimensione del carattere, e facciamo più ragionevole again-- 24 punti. E sai una cosa, per buona misura, facciamo il colore solo rosso per il momento. E ora se ricarico, ora ci vedere tre brutti paragrafi. 

Ma ora immagino che Sono una specie di-- Voglio che il primo paragrafo saltare fuori presso l'utente. Non voglio aumentare solo la dimensione del carattere di ogni cosa. E così io in realtà voglio identificare o distinguere tra questi paragrafi. Quindi cerchiamo di sbarazzarsi del rosso, perché questo è solo tipo di cattivo gusto, e andiamo avanti e fare il dimensione del carattere di 12 punti per impostazione predefinita, così che siamo tornati a qualcosa un po 'più ragionevole. E ora ho solo voglia di aumentare il la dimensione del carattere del primo paragrafo. Posso fare questo in pochi modi, ma in un modo che è forse più didattico al momento è quello di fare quanto segue. Lasciami andare avanti e dire, questo paragrafo ha un ID univoco di "prima". Potrei chiamare questo tutto quello che voglio. Potrei chiamare questo "foo" o qualsiasi altra parola, ma ho intenzione di dargli un po ' Nome semanticamente significative come "prima". Questo è l'identificatore univoco, l'ID, per il mio primo paragrafo. 

Che cosa posso ora fare nel mio foglio di stile è un po 'più precisa. Invece di dire, si applicano il seguente al tag p, Posso dire che il following-- applica quanto segue, o selezionare l'elemento HTML che ha un ID univoco di "prima". Cosa voglio di applicare ad esso? Una dimensione del carattere di 24 punti. Così ho due selettori ora. Si fa tutto il punti 12 punti. Ma questo, soprattutto perché si tratta secondo-- si tratta ultimo in file-- questo ha un effetto a cascata. Ho appena fatto tutti i miei tag di paragrafo 12 punti, ma questo ora cascate e sostituzioni per tutti gli elementi nella pagina, un tag nella pagina di cui ID univoco è tra virgolette "prima". E il hashtag in questo contesto significa semplicemente "identificatore unico". Io non metto in file HTML. Io, qui, solo dire tra virgolette "prima". 

Quindi, mi permetta di ricaricare. E ora vedo, ah, OK. Voglio dire, non è che bella, ma è una specie di come la prefazione a un libro o qualcosa del genere, dove il primo paragrafo è grande. Potrebbe essere ancora più preciso con solo le prime lettere, ma almeno Ho esercitato un maggiore controllo. Ora maybe-- forse io voglio fare questo di tanto in tanto per qualsiasi motivo, e quindi non voglio che questo applicare a un solo tag HTML. Piuttosto, cerchiamo di say-- facciamo anche effettuare le seguenti operazioni. Class = "importazione". Considerando che un ID univoco viene utilizzato per individuare una cosa, un tag, nella vostra pagina web, una classe è destinata ad essere utilizzato su qualsiasi numero di elementi o tag sulla tua pagina web. Quindi è riutilizzabile. Un ID non è riutilizzabile. Una classe è riutilizzabile. 

E sai una cosa, per qualsiasi reasons-- filosofica Non ho finito la mia thought-- ho intenzione di dire che il primo paragrafo e la secondo comma sono importanti. Quindi ho intenzione di applicare la classe chiamata "Importante", che, se io salvo il mio file e ricaricare, non ha impatto funzionale ancora. Ma ho aggiunto un po ' metadati del file, sorta di qualcosa di separato dai dati di base del file, così che ora nel mio foglio di stile, se io invece dire ".important" - si sa, tutto ciò che è importante, io sono andando a fare font-colore, red-- o meglio, non font-colore, solo il colore. C'è incongruenze in CSS purtroppo. E ricaricare. Ora notate la prima due paragrafi sono di colore rosso ma non il terzo, perché solo applicata la classe di "importante" al primo due di queste cose. 

Quindi, in ID, si avrà la possibilità secondo molto preciso. Con le classi, si dispone di riutilizzabilità. In entrambi i casi, si noti il sorta di principio di buona progettazione dove ho scomposto fuori tutto il estetica per il mio file styles.css. Quindi non c'è alcuna confusione qui. Non c'è alcuna menzione di rosso o grassetto esposta o la dimensione del carattere in questo file. Piuttosto ho semanticamente, significato caratterizzato i miei dati, ecco alcuni dati importanti. Ecco alcuni dati più importanti. Inoltre, ecco il "Prima" dei miei dati importanti. Così HTML è tutto di sorta del tagging, letteralmente, le parole e paragrafi e costrutti nella vostra Pagina con questi piccoli suggerimenti, se si volontà, che si può in qualche modo sfruttare utilizzando altre tecniche come CSS in questo modo. 

Quindi, in risposta alla domanda di Victoria, siamo in grado di rendere il testo più grande in questo modo. Ci sono tanti altri modi, ma il tipo di carattere tag-- parentesi aperta "carattere" - è in realtà diversi anni. E questo è il problema, Anche con contando solo su resources-- on-line essi tendono ad essere superata. E in effetti, che è stato sconsigliato, perché il mondo si rese conto, cosa significa "font-size = 7" significa? Non è così. E così per molti anni e questo giorno-- uno dei lati osserva qui è che è effettivamente incredibilmente dolorosa ancora a volte per sviluppare siti per la web, perché Microsoft e Google e Mozilla e gli altri sono spesso in disaccordo su come di interpretare una specifica come HTML. 

C'è un libro di regole per HTML che generalmente dice che cosa significa ogni tag. Ma a volte è lasciato al discrezione di implementazione, discrezione di Microsoft e Google. E così sarete molto spesso vedere su un sito web qualcosa un aspetto diverso su un PC di quanto non faccia su un Mac, e questo è proprio perché, alla fine del giorno, essi non testarlo bene su entrambe le piattaforme. Ma è anche perché ragionevole, le persone intelligenti non saranno d'accordo e le aziende non saranno d'accordo, e così una delle sfide di programmazione per il web o la progettazione cose per il web sta scrivendo il tuo sito web in un modo che funziona su tutti i browser web. Ma anche questo è irragionevole, giusto? Ci sono così tante versioni di tanti i browser là fuori che, ad un certo punto, si hanno anche per effettuare una chiamata in giudizio e si deve decidere come azienda, in particolare per il commercio elettronico in stile siti dove sei cercando di utilizzare la versione più recente tecnologie per dare un ottimo utente Esperienza. Ma una certa percentuale di utenti potrebbero essere ancora utilizzando Internet Explorer 6 o 7 o 8, in particolare a seconda del paese che stanno venendo da. 

E così molto comunemente consultati è qualcosa come "le statistiche del browser web." E se andiamo a-- vediamo Wikipedia e vedere come up-to-date questo grafico è se ce n'è uno. Così qui si può vedere dove i browser in realtà sono, secondo dicembre 2015, secondo il governo degli Stati Uniti. Chrome è a quota di mercato del 42%, seguita da IE in gran parte in ambienti aziendali o impostazioni del PC, ovviamente, seguito da Firefox, poi Safari, quindi Opera non ha fatto rendere la mappa qui per qualche motivo, e poi gli altri. Forse è sotto gli altri. Ma più problematico di quello è-- Vediamo se Wikipedia ha anche versioni dei browser version-- 

Andiamo alle statistiche del browser. IE. Anche questo non è sufficiente. Statistiche browser. La mia versione. Che non sta andando essere di destra. Vediamo le versioni. quota di mercato del browser. Vediamo se questo viene in su. OK. Ora, questo sta diventando un po 'più utile. Così qui, si noti che abbiamo tutti diverse versioni di browser. E, mio ​​Dio, se si look-- Chrome 48, Chrome 47, Chrome 31, Chrome 45. Voglio dire, i browser sempre più aggiornato, e talvolta alcuni di questi cambiamenti sono significativi in termini di funzionalità. Così ad un certo punto, la product manager o gli ingegneri bisogno di fare un decision-- voi sapere che cosa, solo l'1% del mondo sta ancora utilizzando IE 7. Al diavolo con loro. Non stiamo solo andando a sostenere questo browser. E cosa significa non sostenere? Potrebbe significare che i pulsanti non funzionano sulla tua pagina web, o potrebbe significare la formattazione è completamente spento. Oppure si potrebbe dover fare quella stessa chiamata in giudizio nei telefoni in questi giorni, in cui, stiamo non andare a sostenere IOS 5 più. Quindi, le persone hanno solo per l'aggiornamento. O non stiamo andando a sostenere Cupcake su sistema operativo Android per i dispositivi Android, perché come il world-- come il mondo tecnologico vuole andare avanti, che tipo di vuole trascinare la mondo con esso in modo che essi non continuare ad essere compatibile in modo da in grado di offrire nuove e buone caratteristiche. Questo è infatti uno dei motivi perché così molte aziende stanno rotolando fuori aggiornamenti automatici e sorta di forzatura le ultime versioni del software su di noi. E anche le aziende come Apple ordinerà di costringerà quasi o costringere voi in termini di forze di mercato di acquistare un nuovo telefono cellulare, perché solo non aggiornerà più il vecchio telefono. Così si perde sul più recenti e più grandi caratteristiche, perché è costoso per loro come un società di mantenere più vecchio, forse versioni inferiori del software. Ma l'effetto netto è che abbiamo anche soffrire questo. 

Quindi, diamo uno sguardo a solo un paio di cose finale qui. Facciamo staccare veloce reale alcune delle quegli altri proiettili, se curioso. Quindi, se si stava tentando di, per esempio, la posizione il testo su lati diversi della pagina, ho intenzione di fare in un modo rapido, ma c'è diverso modi di fare questo. Lasciami andare avanti e eliminate-- semplificare questo come segue. Lasciatemi tornare al mio semplici, paragrafi semplici. Lasciatemi tornare al mio styles.css. E sto solo andando a utilizzare il simple-- che si potrebbe avere visto su Google o richiamare da earlier-- text-align destra. E ricarica questa pagina. Ora tutto sembra di essere allineato a destra, come si può vedere sulla testa qui. 

Siamo in grado di farlo sembrare un po 'più a libro, e possiamo dire "giustificare" e ricaricare. Ora è bello e la piazza su entrambi lati, che è una specie di piacevole. Un altro obiettivo che abbiamo avuto qui era il cambiamento di colore del testo. Così abbiamo visto che con il mio testo rosso. E ora aggiungere i pulsanti per un modulo. Allora perché non proviamo a fare esattamente questo? Ma prima lasciatemi andare a un sito che la maggior parte di noi utilizza ogni giorno-- Google. E diamo uno sguardo a come Google funziona realmente. Ma ho intenzione di farlo. Prima di tutto lasciatemi farlo dentro-- sì, lasciami andare a Google prima. Ho intenzione di andare in Impostazioni di Google, perché voglio disabilitare una cosa chiamata risultati immediati. 

Così si potrebbe aver notato in Google questi days-- Torniamo e attivare questa opzione. Quindi, se mi metto a cercare per i "gatti" come questo, notare che non solo Ottengo auto-completamento up top, tutto ad un tratto, la pagina stessa sembra cambiare abbastanza rapidamente, così, e questo è Google utilizzando un linguaggio chiamato JavaScript cercando di essere utile. Ma, purtroppo, esso genere di scombina nostra discussione di ciò che sta realmente accadendo sotto il cofano qui. Quindi io sono solo un po 'in fretta spegnere risultati immediati. E ho intenzione di fare clic su Salva. E ora vado ad aprire quella barra degli strumenti di diagnostica che ho mantenere l'apertura sotto la scheda di rete. Quindi cerchiamo di fare questo. Let me-- whoops-- scorrere questo un po '. E mi permetta di ricerca di "gatti". 

E ora notice-- in realtà, questa è una buona opportunità a discutere per un momento. Si noti il ​​momento in cui ho type-- fermarlo. Smettila. OK. Si noti il ​​momento in cui si digita la lettera C, guardare la parte inferiore dello schermo. A- T- S. Che cosa significa il fondo di questo schermo, la mia scheda di rete, suggerire che sta accadendo ogni volta che si digita una lettera? Purtroppo, la rana è molto oggi distrazione o il trifoglio o quello che è. Quello che stava accadendo ogni volta che ho digitato? E mi permetta di cancellare il tampone e digitare di nuovo. whoops So--. Ogni volta che si digita una lettera, C- A- T-- così una nuova riga mantiene ovviamente apparire. Che cosa significa ciascuna di queste righe rappresentano, sulla base di ciò che abbiamo visto e discusso finora? PUBBLICO: una ricerca? David J. MALAN: Una ricerca, o più genericamente, una richiesta HTTP dal mio browser al server. Bene, perché è il mio browser facendo un HTTP richiedere ogni volta che si digita una lettera? 

PUBBLICO: [INAUDIBLE] David J. MALAN: Sì, è dando me questi risultati completamento automatico. Come, dove fare queste risultati della ricerca vengono? Bene, ogni volta che si digita una lettera, Google invia più e sempre più di la parola che sto scrivendo. Perché? Perché vogliono darmi un meglio, meglio suggerimento, un elenco di suggerimenti, per quale parola Sto cercando di realmente completa. Quindi questo è per dire letteralmente ogni carattere digitato in Google viene inviato, in ultima analisi, in alla rinfusa, ma anche a volte uno in un momento per attuare queste funzionalità di completamento automatico quando dati è, ovviamente, sul web. 

Ora, diamo uno sguardo a ciò che è effettivamente succede quando si fa clic su Google Search. E poi ci sfruttare questo noi stessi. Quindi, se ho scorrere verso il basso ora al molto prima richiesta che è appena accaduto. Si noti quanto segue. E 'stato inviato a un tempo abbastanza lungo URL-- https://www.google.com/search? e poi un sacco di roba. Vediamo questo in realtà ora nella scheda del browser stesso. Liberiamoci della barra degli strumenti qui. Ecco la pagina dei risultati di ricerca. E notate ecco l'URL. Ora, si può intuire quello che sta succedendo qui in parte. Quindi, prima di tutto, una definizione. Questo a quanto pare è la destinazione in cui il modulo viene inviato. Così, quando ho digitato nel parole "gatti" e premere invio, a quanto pare Google ha inviato il mio input di testo a questo URL che ho evidenziato lì, tagliare ricerca. Si scopre che, in un URL, tutto ciò che succede dopo un punto di domanda è, come noi continuiamo a dire, una coppia chiave-valore che è stato digitato nella forma o in qualche modo trasmessa dalla browser al server. 

Così ogni volta che si digita ingresso in una forma sul web ed è inviato come abbiamo discusso, tramite un GET, uno di questi virtuali buste, i contenuti di che envelope-- sì, tenere ottenendo farcito fisicamente nella busta in classe oggi, ma tecnologicamente in realtà è messo in URL. Quindi, in realtà, mi permetta di vagliare attraverso questo. Dove si vede l'input dell'utente? Dove si vede qualcosa che io stesso digitato qui? Sì, così "gatti". Destra? Quindi, mi permetta di distillare questo in qualcosa di più semplice. Ho intenzione di eliminare tutto ciò che riguarda questo URL che non capisco, e sto solo andando a lasciare come questo-- / search? q = gatti. Vedremo dove q proviene da in un momento, ma che si sente come il minimo quantità di informazioni che ho fornito. E ora ho intenzione di premere Invio. E notate funziona ancora. Abbiamo comunque tornare indietro un sacco di gatti. Quindi Google è più elaborato rispetto a questo in questi giorni. E 'il 2016, non 1999. Quindi non c'è altra roba che il mio browser invia al server. Ma questo è minimamente tutto ciò che è necessario. 

Allora, cosa sta succedendo? Beh, in primo luogo mi permetta di andare avanti e andare torna a Cloud9 e lasciami andare avanti e chiudere le mie schede in precedenza. E io farò questo sul mio possedere solo per un momento. Ho intenzione di andare avanti e creare un nuovo file. E ho intenzione di salvarlo come google.html. E ho intenzione di molto quickly-- Ho intenzione di rubare, in realtà, alcuni di questo testo solo per risparmiare tempo. Io vado a incollare questo qui. Io non ho intenzione di perdere tempo con qualsiasi stilizzazione questa volta. Stiamo andando a chiamare questo "My Google." E ho intenzione di sbarazzarsi del tutto nel corpo. E ho intenzione di fare quanto segue. Mi permetta di zoom avanti. Forma Action-- e come ho brevemente accennato earlier-- whoops-- come ho brevemente accennato in precedenza, l'azione di un modulo è dove vengono inviati i dati. Così google.com/search. E il metodo che si desidera utilizzare può essere una delle due cose. Può essere sia "get", come continuiamo a discutendo, oppure può essere "post". Per ora, il fondamentale differenza è, se si usa "get" tutte le informazioni che il utente fornisce viene inviato nella URL. 

Che è grande per le cose come la ricerca motori e poche altre applicazioni, ma in quali circostanze sarebbe Non si vuole compilare un modulo e avere le informazioni finire il URL, come nella barra degli indirizzi del browser? Che tipo di forme fare you-- PUBBLICO: [INAUDIBLE] David J. MALAN: Sì, come cosa? PUBBLICO: Le password. David J. MALAN: Sì, così si accede a facebook o qualche sito web. Questo è l'input dell'utente da una forma, una casella di testo, ma probabilmente non vuole mostrando in URL del browser. Perché? Voglio dire, forse ci sono alcuni implicazioni per la sicurezza sulla rete, ma more-- come, più semplicemente, che cosa se il tuo compagno di stanza, il vostro altro significativo, i vostri figli, il coniuge sembra attraverso la cronologia del browser? Vi è il vostro diritto della password lì nella storia del browser. Che non si sente come un buon design. O anche più tecnicamente, supponiamo che si sta cercando caricare una foto su Flickr o Facebook o wherever-- cioè l'input dell'utente, anche se è un po 'più interesting-- come faccio a stipare un'immagine nella barra degli indirizzi? È sorta di sorta di no. Si tipo di possibile. Ma, in realtà, io sono hard-premuto a immaginare di fare questo. Quindi ho bisogno di un altro metodo per caricamento di foto a un sito web, e tale altro metodo è chiamato "post". Ma per ora, ci limiteremo a parlare di "Get", che è il più semplice dei due. E 'appena mette tutto il input dell'utente nell'URL. 

Quindi, ecco la forma sto creando. Voglio un ingresso. E sai una cosa? Vado a prendere una supposizione qui. Ho intenzione di ricordare il mio ingresso "q" per "interrogazione". E credo che questo è uno dei più disegni originali, forse, a partire dal 1999. E quindi il tipo di questo ingresso è solo andare a essere "testo". E poi ho intenzione di avere un altro ingresso che non ha bisogno di un nome, come vedremo a breve vedere, il tipo dei quali è "Invia". E questo sta per dammi un apposito pulsante. E questo è tutto. 

Quindi, mi permetta di andare avanti e salvare il file. Ho intenzione di tornare al mio browser e andare a google.html. Invio. Ed è una specie di rada per non dire altro. Ma mi permetta di andare avanti e cercare "gatti". E noto che sono attualmente a questo URL Cloud9. Ma il momento in cui fare clic su questo, dove speri finirò? 

PUBBLICO: Google. 

David J. MALAN: Google. Quindi cerchiamo di fare clic su Invia. E infatti ho ri-implementato Google. Destra? E 'più semplice. E 'più leggero. Voglio dire, il mio codice è chiaramente migliore rispetto loro, dal caos che abbiamo visto prima. E sai una cosa? Ho intenzione di rendere questo un po '. Non ho menzionato questo in precedenza. Ci sono tag come H1, per la rubrica 1, la voce più importante in una pagina. "Il mio Google," Ti chiamo questo. Mi permetta di ricaricare. Si sta cercando un po 'meglio già. E, in realtà, sai una cosa? Ho already-- ho mentito. Ho detto che non avevo intenzione di stile questo, ma ho intenzione di stile questo come prima. E il mio corpo sta per essere, diciamo, centro text-align. E 'guardando più come Google già. 

Ho bisogno di una interruzione di linea, però, per quel pulsante Invia. E si scopre, si può usare i paragrafi, oppure si può più letteralmente solo dire, dammi una linea di interruzione qui-- il tag br. E se ricarico questo, ora si va lì. E 'un po' brutto, così ho potrebbe fare di più interruzioni di linea, ma cerchiamo di non arrivare troppo avidi qui. Così ora vediamo se funziona per "cani". Sembra funzionare per "cani", come pure. Allora qual è il takeaway convincente qui? Tra-- non è stato un salto enorme per introdurre un paio di tag, come il tag form nel tag di ingresso. Ma più fondamentalmente è, tutto quello che stiamo facendo sta sfruttando la nostra comprensione di HTTP e il fatto che le forme in ultima analisi, alterano cosa c'è nella URL del browser, e così, di conseguenza, possiamo fornire meccanicamente input per un server elaborando un form HTML e conoscere che il server comprende HTTP, proprio come il nostro corpo capisce, come, stringendomi la mano, lo stesso protocollo, e così torniamo alla risposta che in ultima analisi, aspettiamo. 

Quindi cerchiamo di fare una ultima cosa che ora con il mobile, e io make-- io aggiungo questo codice per diapositive. Quindi, se si desidera sperimentare, è può certamente prendere da lì. Ma ho intenzione di andare avanti e fare una cosa. Ho intenzione di andare avanti e aprire il mio indice page-- la mia pagina ciao come prima, che ha un sacco di questo testo finto-latino, o senza senso testo latino, e has-- sembra che questo in questo dimensione del carattere. Ma mi permetta di andare avanti e fare questo. Ho intenzione di andare in Cloud9. E non c'è bisogno di fare questo passo. Mi limiterò a farlo io. Ho intenzione di fare clic su Condividi. E questa è una caratteristica solo di Cloud9, per cui Posso fare il mio ambiente pubblico. 

E solo per il gusto di dimostrazione, mi permetta di fare questo. Io vado a fare la mia domanda pubblica. Si noti mi sta avvertimento, sono Sono sicuro che voglio fare questo, perché questo sta andando a rendere tutti nel mondo, sia che si trovino qui ora o guardare il video in seguito alla Internet in grado di vedere ciò che vedo. Ma va bene. Sto per dire "Done". E lasciate che vi incoraggio, se l'ho fatto questo correctly-- mi permetta di provarlo prima. Vai avanti, se non mind-- in un browser del computer, andare a questo URL, e si spera vedrete il mio testo latino. E per essere chiari, è non è in esecuzione sul mio portatile. E 'in the cloud. E 'su Cloud9, letteralmente, ma Ho fatto il mio lavoro pubblico così che chiunque su Internet può accedere alla mia home page Latina. 

Vai allo stesso URL su il telefono, se fosse possibile. Se ti costerà, però, può solo guardare sopra una spalla. PUBBLICO: [INAUDIBLE] David J. MALAN: mi dispiace? PUBBLICO: [INAUDIBLE] David J. MALAN: Solo parole latine. È tutto. Ma questo è ciò che si dovrebbe vedere. 

PUBBLICO: Sì. David J. MALAN: Sì. Sì. OK. Così posso tenere il vostro telefono solo per un momento? Così, si spera, se si sta accedendo esso, dovrebbe essere quasi illeggibile. E 'still-- Voglio dire, e' illeggibile a causa del latino. Ma è anche illeggibile per quale altro motivo? Come, quello che dispiace di questo? PUBBLICO: E 'piccola. David J. MALAN: E 'super, super piccolo. Quindi, come possiamo risolvere questo problema? E 'super, super piccoli sul telefono di Victoria e, se hai tirato su voi stessi, probabilmente piccolo sul telefono, così, a meno che non hanno impostazioni di accessibilità abilitate. Cos'è quello? Si potrebbe semplicemente stringere e zoom, che è praticabile, ma poi si vede solo poche parole alla volta. Quindi, aspetta un minuto. Io so come risolvere questo problema. Destra? Potrei usare i CSS, e ho potuto cambiare il dimensione del carattere da 12 punti a 24 punti. Ma l'effetto collaterale di questo, ovviamente, sta per essere ora, su un desktop o un laptop, Ora il testo è due volte più grande. E così sarebbe sorta di bello per distinguere tra i dispositivi, e si scopre là sono modi di farlo. Ce ne sono diversi modi diversi, infatti, per cui usando CSS e caratteristiche amatore che non andremo in in grande dettaglio, si può sostanzialmente interrogare il browser e dire, se lo schermo è più piccolo di questo numero di pixel, usano questa dimensione del carattere. Se lo schermo è più grande di questo numero di pixel, utilizzano quest'altra dimensione del carattere. 

Si può essere ancora più elaborato ancora. Se avete mai visitato un pagina web che, su un desktop, ha un menu grande forse fuori al lato, e quindi tutto il contenuto è al lato di tale menu-- che è una specie di paradigma comune. Menu a sinistra, contenuti sulla destra, o viceversa. in realtà non funziona sul cellulare quando il schermo è solo questo molti pixel di larghezza. Quindi più comune sul cellulare è, il vostro menu improvvisamente ottenere crollato, e si deve fare clic su un pulsante per vederlo, o il sito web metterà il menu sopra di esso e mettere il contenuto sotto di esso. E si può implementare questi cose in molteplici modi. Si può chiedere ai tuoi programmatori, Hey, squadra, in qualsiasi momento si vede una richiesta HTTP da un Android dispositivo, un dispositivo di Microsoft, Google dispositivo, un dispositivo Apple, utilizzare questo dimensione del carattere e utilizzare questo layout del menu, oppure utilizzare il layout di default questa grande. 

Ora, utilizzando ciò che tecnica fondamentale oggi potrebbero usare gli ingegneri per sapere se si tratta di un iPhone, un telefono Android, un computer portatile, un desktop visita del server della società? In cui ottengono queste informazioni? 

PUBBLICO: Intestazione? 

David J. MALAN: Sì, l'header HTTP. Così ogni richiesta HTTP proveniente da i loro clienti ai loro server includere, all'interno di quella virtuale busta, un intero gruppo di intestazioni HTTP, uno dei quali è il browser e il sistema operativo anche, se si cura di che livello di dettaglio. Ora, si tratta di una stringa criptica di bell'aspetto, ma esiste un software che appena sarà semplificare questo, e si può solo chiedere nella programmazione code-- PHP, Java, C ++, whatever-- ciò telefono è questo-- quale dispositivo è questo utente utilizzando? E allora si può dire, mostrare loro questo versione del sito web se si tratta di un telefono cellulare. Mostrate loro questa versione del sito web, se si tratta di un computer portatile o desktop. Ma non è nemmeno necessario complessità lato server. Si può fare anche la più semplice delle cose. 

Ho intenzione di fare questo. Ho intenzione di andare avanti in il mio ambiente Cloud9, e ho intenzione di aggiungere un tag che si è visto in Google prima. Si chiama il metatag. E non ho mai ricordo di questo, quindi Ho intenzione di trascrivere qui. meta name = "viewport" e poi content = "width = larghezza del dispositivo, intital scala = 1 "e il gioco è fatto. 

Quindi potrebbe anche essere come una formula magica. E non è tutto chiaro, ma questo ha qualcosa a che fare con la finestra, e la finestra è solo il corpo di un pagina web, l'area rettangolare che definisce maggior parte della pagina. E questo è solo dicendo il browser, sai una cosa? Rendere la larghezza di questa pagina effettivamente uguale alla larghezza del dispositivo. In altre parole, non assumere che si ha una sorta di spazio illimitato. Si supponga di avere solo la quantità di spazio come il dispositivo stesso è grande. E così ora, se ricaricare questa nel mio browser, non vedo nessun cambiamento. Ma se ho fatto questo correctly-- e mi permetta di attraversare la mia fingers-- se tutti ricaricare i telefoni, si fa vedere un cambiamento interessante? Sì, è che-- 

PUBBLICO: [INAUDIBLE] David J. MALAN: Sì. OK. Quindi forse più leggibile ora? Ancora piccolo, ad essere onesti, ma non così piccola da essere ingestibile. E potrei certamente ignorare questa ulteriormente con CSS o sul lato server, ma sempre più quello che sei vedendo è sempre più funzioni essendo aggiunto environments-- lato client JavaScript, come vedremo domani, CSS, e così HTML-- che tutte queste query può essere fatto sul client in modo da fastidio la server di molto meno e non di dover tenere il passo con, per esempio, l'attacco costante di un nuovo sistema operativo versioni, le nuove versioni del browser. Si può solo lasciare che il browser chiedere al dispositivo, quanto grande sei, e poi fare un po 'logico decisioni basate su questo. Ma vedremo più opportunità per le decisioni logiche domani nel contesto di un linguaggio di programmazione. 

Quindi, tutte le domande, poi, sullo sviluppo web? Oggi non è programmazione web, per SE, poiché la maggior parte tutto quello che abbiamo fatto era molto estetico, se si vuole. Non vi è alcun processo decisionale in il codice che abbiamo scritto, e così è per questo che HTML è un markup linguaggio, non un linguaggio di programmazione. Ma domani prenderemo un rapido sguardo, in ultima analisi, in JavaScript, che è una programmazione vera lingua che ci permette di fare un po 'di più. 

Qualsiasi domanda? Beh, mi permetta di proporre due opportunità opzionali per fare i compiti. Una è-- questi Cloud9 conti non scadono. Siete invitati ad utilizzare loro di armeggiare con. E 'il livello gratuito del servizio. Rendetevi conto che, se al momento della creazione l'area di lavoro, è reso pubblico, che vuol dire che chiunque su Internet può vedere ciò che si sta digitando. Quindi, forse solo prendere in considerazione Non imbarazzante se stessi se avete deciso di mettere la prima web Pagina là fuori accidentalmente pubblicamente, ma nessuno sta andando a sapere di guardare comunque. 

E two-- lasciato Passami questa URL, nonche, soprattutto se siete venuti a oggi poco meno confortevole rispetto ad altri, sicuri del significato di tutta questa roba. Rendetevi conto che molto di più di questo video, che è sia un buon modo per addormentarsi e anche a ridere, mentre Così facendo, ha anche un sacco di interessanti societally e discussioni relative alla sicurezza in esso da John Oliver, anche se un comico. 

Ma se non ci sono altre domande, questo ci porta alla reception. Allora, perché non posso attivare la musica. Non ci dovrebbero essere le bevande e spuntini fuori. Sono felice di mescolarsi per quanto Finché la gente vorrebbe, rispondere alle domande più one-to-one. Ma, in caso contrario, sei il benvenuto a decollare in qualsiasi momento, e vedremo di nuovo domani mattina per un po 'di più. Va bene grazie.