>> [RIPRODUZIONE DI BRANI MUSICALI]
DAVID J MALAN: Va bene, bentornato.
Questo è CS50.
Questa è la fine della settimana di sette.
Ed è la fine di quel scavenger caccia dal problema impostare quattro
che si potrebbe ricordare.
Dopo aver recuperato tutti i file JPEG del personale,
siete stati sfidati, se vuoi, per fotografare te stesso con il maggior numero
di quelle persone, come si può.
Abbiamo ottenuto un sacco di presentazioni nelle ultime settimane,
anzi, un bel po 'a destra prima di mezzogiorno Oggi, alcuni dei quali sono quelli qui
catturato qui dentro-- sembra like-- Annenberg Sala in orario d'ufficio, uno qui
in Lowell Casa con Nick.
Ecco Ramon essere stato catturato al telefono.
Questo è stato a un pranzo CS50.
Questo è stato Jason Skyping con un compagno di classe più creativo,
che gli ha telefonato in questo modo.
Non sappiamo che cosa si trattava.
>> [Risate]
>> DAVID J MALAN: Ma che vale la pena un gigabyte.
Ecco Chang, che letteralmente corse giù dal palco
per evitare di essere fotografato uno giorno, ma alla fine fu catturato.
Ecco Nick.
Ed ecco Alison giù dai campi.
E Zamyla anche è stato trovato a un concorso sala da ballo.
Quindi andremo attraverso queste foto, capire
che ha presentato il più la prima, e la ricompensa
un premio favoloso, come promesso nelle specifiche.
E ci sarà anche il follow-up su lo spazio che è stato coinvolto.
>> Un paio di announcements-- così il pranzo è, ancora una volta, questo Venerdì alle 1:15 PM.
Se vuoi unirti a noi, RSVP a tale URL qui.
Jason appare di nuovo qui da un delle sezioni un paio di anni
indietro, che è accaduto a cadere su Halloween.
E in effetti, lui vestito come un zucca quel particolare anno.
Se si guarda questa sezione della sua dalla sezione 2011
otto, se siete curiosi, a CS50.tv, credo
questo è stato l'anno in cui la pompa ad aria funzionava.
>> Se quindi si guarda il sezione simile nel 2012,
vedrai questa Jason molto sgonfiato, dal momento che l'abito non ha funzionato,
che è solo per dire questo Venerdì, se si desidera
desidera scolpire una zucca con Daven e Gabe e altri, RSVP alle teste
all'indirizzo cs50.harvard.edu.
E promette di essere molto divertente.
Daven, ci è stato detto, si è ritagliato zucche tutta la sua vita.
Gabriel dal Brasile non ha mai intagliato una zucca per Halloween.
Quindi, essere lì con loro mentre si impara.
>> Seminari, meanwhile-- così imparerai presto
su ciò che le nostre aspettative sono per il progetto definitivo, che in sostanza
si riducono a progettazione e realizzazione di
la maggior parte qualsiasi progetto di interesse a si, anche se subordinata all'approvazione
e la guida dal vostro insegnamento compagni.
Verso la fine del semestre, si introduce un numero
di seminari, che sono corsi opzionali guidata dai compagni di insegnamento e di Harvard
personale, gli amici del corso di tutta campus, su vari argomenti che
sono tangente al programma di base del corso
ma comunque applicabile, divertimento, e diverso per i potenziali progetti finali.
>> Ad esempio, in primo luogo, se vuoi di registrare, testa a tale URL lì.
E questa è la scaletta per seminari di quest'anno da solo.
Ma capire che abbiamo decine di seminari degli anni passati, ognuno dei quali
sono legati nel menu Seminari scelta del sito web del corso.
Quindi, se stai pensando di andare oltre la vostra zona di comfort
o raccogliendo alcune nuove abilità, per esempio, la programmazione iPhone
applicazioni con Swift, un nuovo linguaggio da Apple o Objective-C
o Android apps o di programmazione [? cue?] lampadine, o uno qualsiasi degli argomenti
qui e di più, a causa di controllo la pagina di registrazione.
>> Così abbiamo iniziato e concluso il Lunedi con guardando HTTP.
Così veloce HTTP refresher--, HyperText Transfer Protocol.
Ma che cosa significa in realtà?
Che cosa significa in realtà?
È che una mano?
So che stai solo grattando la testa.
Ma si vuole proporre ciò che HTTP è?
>> Pubblico: Come i computer comunicare con [incomprensibile].
DAVID J MALAN: ho perso l'ultima parte.
Come i computer comunicano with--
>> Server Internet: UDIENZA.
DAVID J MALAN: buono-- con internet server, e in particolare, server web.
Perché richiamo, c'è un mucchio di servizi su internet, alcuni dei quali
si utilizza probabilmente tutti i giorni tra la chat e il messaggio, chat e web, e-mail,
e simili.
Ed è solo l'HTTP protocollo che i browser web
parlare quando si comunica con server web, e viceversa.
E l'analogo nella mondo umano potrebbe essere,
Tendo la mano a tremare un po ' altro essere umano e lui o lei
riconosce estendendo la propria mano pure.
Ecco, questo è solo un protocollo, un insieme di convenzioni.
>> E che in effetti sono tali convenzioni?
Beh, quando incomincia a bollire fino a l'invio di messaggi avanti e indietro,
come raffigurato qui.
E ci sono un paio di modi in quale è possibile inviare questi messaggi.
E forse il più comune è conosciuto come get.
E vedremo un contrasto per questo in poco tempo.
>> Ma una richiesta GET da un browser al server sembra proprio come questo.
E 'un po' di testo che mette all'interno di una busta virtuale.
All'esterno di tale busta andare un paio di pezzi di dettagli.
Che cosa ha bisogno di andare sul busta, per così dire,
al fine di ottenere una richiesta simile questo da me a un server web?
Sì.
>> PUBBLICO: Il tuo indirizzo IP.
>> DAVID J MALAN: Il mio indirizzo IP nel campo, per così dire,
e, naturalmente, la l'indirizzo IP del destinatario.
Ma nel caso di un pacchetto web, abbiamo bisogno di un po 'più in dettaglio
Non è sufficiente solo per inviare una busta a un server,
perché quel server potrebbe essere ascolto di diversi tipi
di traffico internet.
Quindi, che cosa abbiamo bisogno oltre IP del destinatario?
Sì?
>> PUBBLICO: E 'il protocollo TCP?
DAVID J MALAN: Good.
TCP--
>> PUBBLICO: Indirizzo.
>> DAVID J MALAN: Indirizzo, o la porta, come si chiama.
Chiudere, ma un numero di porta TCP.
E c'è un sacco di questi.
Ma sicuramente il più familiare dovrebbe alla fine
essere 80, che è l'impostazione predefinita quello utilizzato per il traffico web.
E un altro familiare uno presto sarà 443,
che viene utilizzato per la sicurezza web traffico, gli URL che iniziano con https.
>> Quindi questo è ciò che accade all'interno di tale busta.
E ottenere / significa semplicemente, dare me la pagina web di default.
Dammi la radice del disco guidare su quel server web.
E si spera, il web server risponderà con, OK
e il numero 200, che è solo una convenzione dicendo, sì, tutto
è davvero OK.
Ecco la pagina.
Il tipo di pagina web sta per essere testo, ma più specificamente, HTML,
che stiamo per rituffarsi in.
E il dot dot dot solo mezzi, ecco il codice HTML.
Ed è lì che prendere la storia di oggi,
in realtà la scrittura HTML, HyperText Markup Language, che
è la lingua in cui le pagine web sono scritte.
Non è un linguaggio di programmazione.
Non ci sono funzioni o loop o condizioni.
Si tratta di un linguaggio di markup, così ancora una volta vediamo oggi,
che consente di specificare come strutturare e stilizzare
esteticamente una pagina web.
>> Quindi, questo era quello e unica pagina davvero
guardato, se per breve tempo, il Lunedi.
E notare alcuni caratteristiche salienti.
C'è un sacco di aperto ad angolo staffa e chiudere la parentesi angolare.
Tra quelli ad angolo parentesi sono parole.
E stiamo per iniziare chiamando questi tag parole.
Capo staffa in modo aperto e la testa staffa chiusa
sono i tag di apertura e chiusura, o tag di inizio e fine
rispettivamente, di un elemento HTML, come lo chiameremo, chiamato testa.
E vale lo stesso gergo al corpo in HTML e così via.
>> E ciò che è bello è HTML-- e anzi, faremo
trascorrere terribilmente poco tempo su di esso, perché la maggior parte ti basta capire
quali caratteristiche ha quando si in realtà hanno un problema concreto
per solve-- troverete che un browser è abbastanza stupida.
E 'solo andando a fare-- non dissimile un computer-- quello che gli dici di fare.
E così quando hai aperto staffa HTML in cima
lì, che in sostanza significa semplicemente, hey, il browser,
ecco che arriva una pagina web scritta in HTML.
>> Quando si vede la parentesi aperta testa, che significa semplicemente,
hey, il browser, ecco che arriva la testa, o la parte più in alto della mia pagina web.
Quando si vede una staffa chiusa testa, che significa semplicemente, hey,
questo è tutto per la testa.
Standby per qualcos'altro.
E che altro c'è qualcosa che non apparentemente sarà il corpo.
E quando non si dispone di un tag, come devi solo ciao, virgola, mondo,
questo è solo sarà semplice testo che in ultima analisi, viene visualizzato sullo schermo.
>> Ora, noterete anche il rientro qui.
Probabilmente si può dedurre come stiamo stilizzandolo.
Ogni volta che apro un tag, per così dire, mi trattino.
E ogni volta che chiudo un tag, I non-trattino,
simile nello spirito a parentesi graffe.
E oltre a questo, io sono una specie di usare il mio giudizio.
Si noti che non mi sono preoccupato di colpire Inserire all'interno del tag title.
Perché?
Beh, ho appena deciso che sembrava un po 'più pulito di me, l'umano,
a poco non si preoccupano di farlo.
Quindi, di nuovo, c'è qualche giudizio chiama semplicemente
che ci sia in C o qualsiasi lingua.
>> Ma si noti anche che questo rientro si presta ad un modello mentale,
di non complicare esso.
Ma un albero, giusto?
Se si pensa di una web pagina, a quanto pare scritta
così, come ben frastagliata in questo modo,
si può quasi pensare alla parentesi aperta HTML tag staffa chiusa è che delimitano
la radice di un nodo, un albero genealogico nodo stile nello stile degli alberi
abbiamo guardato lo scorso Venerdì.
>> E in effetti, abbiamo sulla destra qui quello che chiameremo un DOM, D-O-M, documento
modello a oggetti, un modo elegante per dire un albero che rappresenta che l'HTML.
E notare che l'HTML ha, diremo, come un albero di famiglia, due figli.
A sinistra è la testa.
Sulla destra si trova il corpo.
>> E proprio come un esercizio di pensiero irrazionale, testa, ovviamente, ha quanti bambini
secondo questa struttura?
Quindi, solo uno, title-- ed è per questo che abbiamo
la freccia che va dalla testa al titolo.
Quindi è come se quella persona nella albero di famiglia aveva un solo figlio.
E poi titolo stesso può può dire di avere un figlio troppo.
>> Ricordiamo che il codice HTML aveva ciao, virgola, sotto di esso mondo.
E ho semplicemente disegnato all'interno di un ovale invece di un rettangolo appena
trasmettere semanticamente che anche se si tratta di un nodo dell'albero, per così dire,
è una specie di fondamentalmente diverso.
Non è un tag.
O più propriamente, non è un elemento.
E 'solo un nodo di testo, se si vuole.
Ma questi sono completamente convenzioni umane arbitrarie.
Questo è solo il mio modo di ora che rappresenta quello che farò come un aggregato
chiamare il documento.
>> E per inciso, la cosa a l'angolo eccellente in alto a sinistra,
parentesi aperta punto esclamativo doc Tipo di HTML, questo appare come un tag,
ma è il caso angolo stupido dove che è solo lì, copiato e incollato
per indicare i browser questa è la versione HTML 5.
Il mondo continua a cambiare ciò che il prima riga di codice in una pagina dovrebbe essere.
Questo significa che solo la versione 5.
Quindi non abbastanza guardare come gli altri.
>> Va bene, in modo che con detto, avrete ora apprezzare
questo abbastanza questo stupido tatuaggio qualcuno si è fatto.
>> [Risate]
>> DAVID J MALAN: Va bene, e ora andiamo in realtà immersione
a fare qualcosa con questo.
Vi ricorderete che l'ultima volta Ho aperto il Appliance CS50
e ho fatto qualcosa come semplice come l'apertura gedit.
E ho salvato il file anche su il mio desktop-- da nessuna parte special--
come hello.html.
>> Quindi, mi permetta di farlo again-- hello.html Invio.
E ora in questo file, ho intenzione di andare avanti e replicare quello che abbiamo appena
saw-- tipo doc html Poi ho intenzione di fare aprire html staffa staffa chiusa.
E poi ho intenzione di preventivamente aprire e chiudere il tag.
Perché?
Solo così non dimentico più tardi.
E 'solo una buona pratica, come l'apertura parentesi graffe tutti in una volta.
>> E poi che cosa è venuto dopo?
Si può pensare al tatuaggio.
>> PUBBLICO: La testa.
>> DAVID J MALAN: La testa.
E poi qui, ho aveva il titolo, credo.
E il titolo è stato arbitrariamente, ciao, mondo vicino titolo.
E poi qui, il corpo, di naturalmente-- allora chiudiamo il tag body.
E poi basta un po 'ridondante, Ho avuto la stessa cosa qui.
>> Quindi io sostengo che si tratta di una pagina web.
Questo è qualcosa che potrebbe ora vivere sul web,
anche se, naturalmente, è letteralmente che vivono sul mio desktop in questo momento.
Ma in effetti, se riduco i gedit, Ci vediamo sul mio desktop sua icona.
Anche se questo è l'apparecchio, si potrebbe fare questo su Mac OS
senza TextEdit o Finestre con Notepad ancora.
>> E se vado avanti e fare doppio clic che anche, e selezionare-- bene, cerchiamo di
Non selezionare il perché Chrome non è l'apertura.
Andiamo avanti e aprire Chrome.
E poi fare Command-O per aprire E passare al mio desktop
e aprire il file.
Questo è il modo in cui un browser interpreta HTML, dall'alto in basso, da sinistra a destra.
Ehi, ecco il browser HTML.
Ecco la testa.
Ecco il titolo.
Ecco il corpo.
E in effetti, questo è il modo in rende quella pagina web.
>> Ma bando l'URL.
Nessuno di voi potrebbe tirare su questo specifico pagina sul proprio laptop in questo momento,
anche all'interno della vostra apparecchio tramite l'URL,
perché il file: // indica in realtà è sul mio file system, il mio hard disk,
non la tua.
Quindi questo non è poi così utile.
>> Passiamo ora verso utilizzando un server web vero e proprio.
E si scopre il CS50 Appliance è molto più di un ambiente in cui
è possibile scrivere codice C e compilare ed eseguirlo come hai fatto.
Inoltre è stato configurato dal personale per rappresentare un tipico web
server che è su internet, quello che si potrebbe pagare per
o uno che è nella cosiddetta cloud.
>> Ed è in esecuzione gratuito standard open source
software, per esempio, qualcosa chiamato Apache, che è forse
ancora il web più popolare software server nel mondo
che migliaia di siti web utilizzano oggi.
Ed inoltre ha anche software come MySQL,
che è un server di database che saremo alla fine arriva a,
che è solo per dire Posso iniziare a trattare
l'apparecchio in uso come server a pieno titolo che non sto pagando per altrove.
Vive solo per conto mio computer portatile per finalità di sviluppo e di convenienza.
>> Quindi cerchiamo di andare avanti e approfittare di questo.
Ho intenzione di andare avanti e aprire una finestra di terminale.
E ho intenzione di andare avanti e move-- in realtà, prima sono
intenzione di passare a mio desktop.
Se lo faccio ls, c'è hello.html.
E ho intenzione di andare avanti e iniziare a utilizzare
una nuova directory che abbiamo non utilizzato prima di oggi.
>> hello.html-- ho intenzione di muoversi a ../vhosts per hosts-- virtuale
più che nel future-- e poi in una directory chiamata localhost,
che è il soprannome dato a quasi qualsiasi computer, che si tratti di un Mac, PC,
o Linux, e quindi in particolare in una directory che noi,
il personale già creato per voi quando si è scaricato l'apparecchio chiamato
pubblico.
E come suggerisce il nome, nulla Ho messo in questa cartella, in teoria,
sta per essere ora pubblico, almeno alle persone
che hanno una diretta il collegamento al computer.
>> Così ora lasciami andare avanti e fare cd a quella stessa directory
così posso vedere cosa c'è in corso e di tipo ls.
E in effetti, questo è il unica cosa in là.
Io sostengo che ora perché ho messo questo presentare hello.html all'interno di una directory
chiamata all'interno di una directory pubblica chiamato localhost all'interno di una directory
chiamati vhost, che grazie al personale CS50
è stato pre-configurato per essere la radice del server web,
Posso ora si spera farlo.
>> Ho intenzione di aprire una nuova scheda.
E ho intenzione di andare non al file: //.
Ho intenzione di usare effettivo http / localhost, che
ancora una volta, è il soprannome per il mio server.
E poi ho intenzione di andare a ciò che il nome del file, tanto per intenderci?
Dove si trova questa storia probabilmente andando?
hello.html.
>> Quindi, in altre parole, voglio ora questo è il mio computer, il mio apparecchio,
come se fosse un server reale.
Il suo soprannome è localhost.
Ma pensare a come localhost come Facebook.com google.com, qualunque cosa.
E 'solo il mio nome locale.
E poi il finale che voglio è nella radice del disco rigido, per così dire,
o la radice del server web, ergo la barra e poi
il nome del file hello.html.
>> Permettetemi di Zoom Out e premi invio.
E, in effetti, vi è ora la mia pagina web.
Quindi è un po 'diverso.
Ed è altrettanto deludente.
Questa è la vecchia versione.
Mi permetta di ridurre il carattere di nuovo.
Questo è il vecchio.
Questo è il nuovo.
Ma cosa sta succedendo fondamentalmente ora è che viene utilizzato HTTP.
>> Facciamo questo un po 'più chiara o, se si vuole, un po 'più complicato.
Lasciami andare in basso a destra angolo di mano l'apparecchio in uso.
E notare che tutto questo tempo, c'è stato un numero.
Questo è l'indirizzo univoco del vostro apparecchio CS50.
Si tratta di un indirizzo privato, come previsto dal 172.16,
che ha appena significa solo fisicamente possono accedere a questo server web.
Tutto è firewalled e ben protetta dal resto
del mondo a causa di questo indirizzamento.
>> E ora notare però se vado a questo indirizzo, non nel mio dispositivo,
ma in Mac OS-- Vado di tornare qui.
Questo è il mio Mac ora.
E ora ho intenzione di aprire questa versione di Chrome qui.
E ho intenzione di andare a http: //172.16.25 / E mi dimentico il rest-- 133.
>> Quindi ho intenzione di visitare dal mio Mac che l'indirizzo IP /hello.html Invio.
E ora vedo dal mio Mac che il mio CS50 Appliance, che è
Indirizzo IP è che numero, è infatti comportarsi
come un server web su Internet.
Non ha una bella facile da ricordare il nome come Facebook.com,
ma che sta utilizzando HTTP a quanto pare, anche se Chrome
è una specie di semplificare il mondo per noi, ma non ci mostra HTTP.
Ma questo è davvero esattamente questo.
Chrome è solo un po 'di risparmio sequenze di tasti in questi giorni.
Ed è quello che ora vediamo.
>> Ecco, questo è tutto bello e buono.
Ma si tratta di una pagina piuttosto deludente.
Lasciami andare e fare qualcosa un po 'diverso ora.
Quindi, mi permetta di tornare a gedit.
E invece di ciao, mondo, mettiamo un'immagine.
E ho sostenuto da before-- lasciarmi andare nella mia directory localhost pubblico.
E mi permetta di andare avanti e copiare un intero gruppo di file a partire da oggi
dalla mia cartella di Dropbox in questa sede.
>> Ora, se digito ls, guardare a tutti questi file
che ho distribuito dalla sito web di corso in anticipo di oggi,
uno dei quali è ancora hello.html.
Quindi c'è quello.
E ricordare questo uno sciocco da ultimo cat.jpg tempo--.
Quindi vorrei provare a incorporare cat.jpg all'interno della mia pagina web.
>> Ho intenzione di andare avanti e fare cat.jpg, risparmiare.
Permettetemi di tornare a Chrome.
E mi permetta di zoom nella tipo di carattere e ora ricaricare.
Oops, dove ho messo questo?
Standby-- Ho ancora il vecchio versione dal mio aperta desktop.
Quindi lasciami andare nel mio vhost, il mio localhost, il mio pubblico, e hello.html.
Così ora lasciami andare avanti e dire cat.jpg interno del corpo
dove voglio che sia visualizzato e ricaricare.
Naturalmente, questo non è corretto.
>> Quindi ho bisogno di dire al browser un po ' più deliberatamente quello che voglio fare.
Semplicemente digitando il nome è ovviamente non sufficiente.
Così ricordo che c'era un altro etichetta, immagine, IMG in breve.
Questo è solo perché gli esseri umani non mi piace il tipo di parole piene.
E poi siamo in grado di fare fonte = "cat.jpg".
>> E ora ho intenzione di fare una cosa diversa qui.
Anche se tutti i nostri tag finora hanno
avuto questa nozione di tag iniziale e un tag finale,
che in realtà non fanno senso di un'immagine, giusto?
Un'immagine è o non c'è o non c'è.
E così gli umani si sono con una convenzione semplice.
Quando si dispone di un tag che può sia iniziare e terminare nello stesso tempo--
può essere vuoto, in modo da speak-- solo mettere la barra all'interno del tag
alla fine.
Ora vorrei tornare al mio browser.
Hit Ricarica Accidenti, qualcosa non va.
Probabilmente hai già visto questo di tanto in tanto sul web,
anche se non è stata colpa tua.
E 'colpa del server web.
Cosa odi questo sembra indicare?
E 'rotto.
È lì che l'immagine appartiene.
Sì?
>> Pubblico: Ma non è così avere accesso all'immagine.
>> DAVID J MALAN: Non fa avere accesso all'immagine.
Che, o peggio ancora, forse non esiste nemmeno.
Vediamo se non siamo in grado di diagnosticare tale.
Ricordiamo dall'ultima volta che se in Chrome, all'interno dell'apparecchio,
o anche sul vostro Mac o PC, vai al menu Developer
e andare al Developer Tools opzione, che probabilmente hai
non molto usato o mai.
E se vado a Rete e ricaricare la pagina,
diamo un'occhiata alla realtà HTTP richieste che sono stati fatti.
>> Sembra che hello.html è anzi OK, quindi il 200.
Ma cat.jpg è un 403.
Quindi non è un 404.
File probabilmente esiste.
403 significa proibito.
Quindi questo è un po 'di confusione.
Ho intenzione di tornare indietro alla mia finestra di terminale.
Mi permetta di ingrandire fino qui.
E mi permetta di fare un ls.
Ci sono quegli stessi file.
>> Ora vorrei fare un ls-l, che probabilmente avete
usato prima di guardare il file dimensioni o forse timestamp.
E vediamo un sacco di informazioni travolgente.
Ma si noti alcuni dettagli.
Ecco hello.html in questo fila qui e qui c'è cat.jpg.
Ed è solo l'apparecchio sia facile da usare evidenziando JPEG di
in viola come questo.
Ma che altro è diverso accanto la dimensione del file e il nome del file?
>> PUBBLICO: [incomprensibile].
DAVID J MALAN: Sì, c'è due in più di qui R.
Notate cosa hello.html è in corso.
Così si scopre che il nome tale elenco pubblico è importante.
Tutto ciò in questa directory è destinato a essere pubblico.
Ma non è sufficiente solo per rilasciare i file in là.
È inoltre necessario modificare la modalità dei file,
modificare le autorizzazioni di il file in modo proattivo non
essere l'impostazione predefinita, che è che solo io posso leggere
e scrivere, essendo io il proprietario.
Voglio che tutto il mondo per tutti essere in grado di leggere il mio file, per così dire.
Leggere significa solo vederlo.
>> E in effetti, come si vedrà in problema set di sette, questo è ciò che media di questi R.
Questi due media di R permettere a tutti di altra parte del mondo anche leggerlo,
soprattutto ora che è in questa directory.
Quindi il modo più semplice per risolvere questo problema è quello di andare al mio pronto e fare chmod per il cambiamento
modalità e poi fanno un + r, tutto, tutti, tutti, più r per la lettura,
e poi cat.jpg Invio.
Nulla sembra accadere, che di solito significa una buona cosa.
Così ls-l again-- ora diamo un'occhiata a cat.jpg.
E questa autorizzazione sembra essere cambiato.
Per inciso, se si effettua una errore e tu, per esempio,
appena fatto your-- Non know-- saggio pubblicamente accessibili per caso,
si può fare il contrario, chmod a-r.
Anche se, francamente, non dovrebbe essere nella directory pubblica
in ogni caso se questo è il problema.
>> Così ora torniamo a il mio browser e ricarica.
E ho intenzione di fare clic su il piccolo Ghostbusters
simbolo per cancellare la parte della schermo in modo che possiamo vedere nuove richieste.
E infatti, ecco Cat grump da prima.
Ma soprattutto, tecnicamente, c'è
il numero 200, che significa che abbiamo ottenuto OK.
Va bene, in modo che è tutto bello e buono.
Ma non stiamo facendo il meglio di siti web,
né abbiamo intenzione di provare troppo difficile fare il modaiolo di siti web di oggi.
Ma andiamo almeno fare qualcosa super-familiare prima sferragliare
fuori un paio di altri tag.
Quindi supponiamo che io non voglio solo un gatto qui.
Supponiamo che io in realtà voglio questo cat per collegare a qualcosa.
>> Potrei, ad esempio, fare qualcosa di simile.
una per l'ancora href per iper equals-- riferimento
e facciamo solo fare qualcosa come www.google.com vicino
citare vicino staffa.
E ora la ricerca per i gatti.
Chiudere tag di ancoraggio.
Quindi questo ha un solo tipo di fondamentalmente nuovo dettaglio.
Il tag ovviamente, è diversa.
E 'il nome di un per l'ancora riferimento href o iper.
>> Ma ancora più importante, non c'è questa funzione sintattica qui.
Questo è ciò che inizieremo chiamando non è un tag, ma un attributo.
E un attributo è qualcosa che modifica il comportamento di un tag.
E questo attributo, href, mezzi modificare il comportamento di questo ancoraggio
in modo che quando viene cliccato, va a questo URL qui.
E, naturalmente, che l'URL è Google.
>> Nel frattempo, che cosa è questo testo qui sta per essere?
Beh, che sta per essere ciò che l'uomo in realtà
vede come sottolineato collegamento, così semplice.
Allora proviamo questo.
Mi permetta di salvarlo.
Sono ancora in hello.html.
Ma nelle versioni on-line, si vedrà i nomi di file effettivi che pre-preparati.
Lasciami andare avanti e ricaricare.
E ora è molto pagina deludente ancora.
Ma se passa il mouse sopra there-- ed è un po 'piccola,
ma-- si può vedere nella parte inferiore alto a sinistra dello schermo,
sta infatti andando a google.com.
E se clicco che, lo farà mi frusta modo per l'attuale Google.
>> Ma si noti qui l'occasione per sfruttamento, proprio come una digressione.
E torneremo ad altri questioni di sicurezza non molto.
Perché c'è questa dicotomia tra dove si va e quello che dici,
si potrebbe fare qualcosa di simile questo-- http://www.google.com.
OK, e ora se ricarico dopo aver salvato quella pagina,
sembra che ho intenzione di andare su Google.
Ma non c'è ragione per cui andare su Google, giusto?
Potevo andare a qualcosa di simile badguy.com, ricaricare la pagina qui.
E notate, sembra ancora come Google.
E solo se sono forte abbastanza per librarsi qui
vedo che sta andando anche a andare in una posizione diversa.
>> Quindi, se hai mai ottenuto una e-mail, in particolare
uno da Paypal, o apparentemente da Paypal
ti chiede di login al tuo account, questo
è il motivo per cui si dovrebbe mai mai fare clic sui link nelle e-mail,
francamente, eventuali link contenuti in email.
Se sai di avere effettivo soldi in Paypal o Bank
d'America o Fidelity o qualsiasi sito web, digitare manualmente in.
Perché guarda come è facile ingannare qualcuno nel presentare ciò che
si presenta come un link.
Ma in realtà potrebbe assolutamente andare da nessuna parte.
>> E c'è di gran lunga maggiore minacce di questo.
In realtà, questo è un po ' di tangente ora, ma uno
dei migliori che abbia mai visto che è stato successivamente chiusa,
è qualcuno portato le persone a-- quindi questo potrebbe dire,
clicca qui per accedere al tuo conto, un conto in banca.
E questa è stata Bank of the West.
>> Così qualcuno ha acquistato questo.
Ed è un po 'più facile da vedere in un font monospazio ingrandita
in un proiettore 30 piedi.
Ma quando si tratta di caratteri piccoli in un e-mail che si sta ricevendo,
questo sembra bankofthewest.com, non bankofthevvest.com,
che qualcuno aveva pagato $ 10 a comprare.
E poi questo li ha portati alla equivalente di qualche sito male.
>> E vedrai too-- in realtà possiamo fare Questa poi se vado al sito vero e proprio,
bankofthewest.com, ancora una volta, richiamo dall'ultima volta
che, se questa è la loro pagina web e sei curioso di sapere come funziona,
si può certamente andare a Strumenti di sviluppo di Chrome.
E si può vedere tutto il HTML ben formattato lì.
>> Ma più al punto, si cam-- Chiudiamo
questo-- si può andare a Visualizza Sviluppatore Visualizza origine.
Perché non solo copiare tutto questo e poi mi
può andare nella mia piccola finestra gedit qui e fare il mio sito.
Salva questo in hello.html.
E probabilmente questo sta per rompere, perché non è così facile solito.
Ma ora, se ricarico la mia pagina su il mio CS50 Appliance e ricarica colpire,
OK, alcune cose si è rotto.
Ma sono abbastanza vicino ad avere il mio sito web banking, giusto?
Tutto questo HTML--
>> [Risate]
>> DAVID J MALAN: --I non actually-- e
so che c'è qualcuno là fuori che sarebbe in realtà fare clic su questi link troppo.
Quindi, chiaramente, alcune cose si è rotto.
Ma che sta per portare siamo in una discussione,
inutilmente in questo momento, su ciò che CSS, fogli di stile CSS, sono,
e come in realtà scaricare gli altri file HTML
e JPEG file GIF che il sito potrebbe utilizzare.
Ma tutto questo è attuabile.
Ma che realmente si riduce a questi molto semplici euristiche.
>> Così ora facciamo solo sfogliare un paio di altri esempi di HTML
solo per dare un senso di che cosa altro si può fare.
Per esempio, questo è list.html.
Supponiamo che io volevo fare una pagina web con un elenco di case in quad.
Potrei utilizzare il tag ul per non ordinata lista e poi il bambino voce di elenco
e poi iterare over-- o di un elenco, rather-- le case in questione.
>> E se apro questo in su, facciamolo questo.
Andiamo a non hello.html, ma a list.html.
Accidenti.
Come posso risolvere questo problema?
E 'lo stesso problema di prima, giusto?
Perciò lasciami fare oops-- chmod-- chmod a + r di list.html.
E ora se torno a mio browser e fare clic su Ricarica, non vi è.
Quindi, se hai sempre voluto fare un elenco puntato, si può fare.
Se si vuole essere super elegante e fare una lista ordinata, non una lista non ordinata,
cambiare quelli di OL, ricaricare la pagina, e ora il browser numera per voi.
>> Che altro possiamo fare?
Beh, un paio di others-- se hai lunghi paragrafi di text--
per esempio, alcuni Testo latino come questo--
e lo si vuole in paragrafi distinti, p aprire, chiudere p per il tag di paragrafo.
E farlo ancora e ancora.
E se io ora apro questo file, paragraphs.html, beh, questo
è sempre fastidioso.
Così ora facciamo solo tornare al mio pronta, chmod a + r r stelle .html--
un bel po 'wild card per così dire.
Dovrebbe risolvere tutti questi problemi per me.
Andiamo a ricaricare.
Ci sono tre paragrafi.
>> E ora andiamo avanti e di aprire un altro.
Che ne dite di tavolo?
Noterete sguardi da tavolo un po 'più complesso.
Ma è lo stesso idea-- tag di apertura, tag di apertura,
aperto, aperto, aprire, chiudere tag, tag di apertura.
E questi capita di stare in piedi per tavolo, il cui confine è apparentemente
sta per essere uno spessore 1-- qualunque che riga della tabella means--, tavolo
dati, il che significa una cellula.
E se torno al mio browser qui e andare a table.html,
si può vedere qualcosa in questo modo, orribile.
Ma ci arriveremo al punto dove si può effettivamente
rendere le cose più bella di quella.
>> Quindi lasciate che impone, per ora.
Ci sono grappoli di più tag.
E HTML è meraviglioso per prendere perché, francamente, tutto quello che dovete fare
è guardare le pagine web esistenti con cui si ha familiarità.
E tu sei come, oh, ecco come hanno fatto questo esteticamente.
>> Oppure si può cercare qualsiasi on-line risorsa come funziona HTML,
e vedrete che c'è una tutto il vocabolario di altri tag.
Ma con il semplice modello mentale solo che quasi ogni tag si apre
deve essere chiusa, in realtà non è sufficiente per insegnare se stessi
HTML dopo capire queste idee di base di tag
e gli attributi e la buona formulazione che abbiamo parlato,
chiudere tutto ciò che potremmo aprire in modo che non confondiamo un browser.
Quindi cerchiamo di prendere questo per ora un livello più interessante
andando al reale.
E andiamo al mio Mac qui, a google.com.
E ora notice-- facciamolo.
Sto gong di andare a Impostazioni, Impostazioni di ricerca.
Voglio disattivare questo fastidioso istante Risultati della cosa in cui immediatamente
inizia a rispondere a vostra battitura a macchina.
Facciamo questa scuola vecchio, e quindi che effettivamente vediamo cosa sta succedendo.
>> Quindi ho intenzione di salvare la mia Impostazioni di Google qui.
E ora notice-- ho intenzione di cercare qualcosa come i gatti.
Ed è ancora facendo auto completo qui, ma sulla base di cose
persone hanno digitato in passato.
Ma notare ciò che sta per accadere.
>> Nel URL al momento è questo, solo google.com.
E tecnicamente, si tratta di barra.
Google è solo il salvataggio di un personaggio e non ci mostra che.
Ci stanno mostrando https, solo essere super rassicurante che siamo
ad una pagina protetta o criptata.
>> Quindi lasciami andare avanti e cerco per i gatti.
Ora, questo ha davvero travolgente rapidamente.
Guardate la lunghezza di questo URL.
Ma si scopre che la maggior parte di questa roba nell'URL è in realtà abbastanza inutile.
Ho intenzione di iniziare l'eliminazione cose che non capisco.
Vedo i gatti.
Capisco i gatti.
Non so il motivo per cui i gatti non ci sono ancora.
Io davvero non lo so cosa questa assurdità è.
Così sto solo andando a continuare a evidenziando ed eliminazione di roba
che non capisco, distillando l'URL nel proprio questa.
>> Ora mi permetta di ottenere di nuovo ENTER.
Sembra che Google funziona ancora.
Così, per qualche motivo, sono l'aggiunta di un sacco di cose da di default del loro URL.
Ma non è strettamente necessario.
Così che cosa è bella di questa?
Beh, lasciatemi andare avanti e aprire ispettore di Chrome.
C'è un po 'di scelta rapida del mouse per esso.
>> Vai alla scheda di rete.
E ora permettetemi di ricarico questa pagina di nuovo.
E sto tenendo premuto Shift.
Per inciso, i browser tendono a memorizzare nella cache o salvare
informazioni solo per amor di efficienza.
Ma di solito, tenendo premuto Maiusc e ricarico costringerà tutto
ricominciare dall'inizio.
E questo è quello che voglio fare qui.
>> E notare tutti questi righe che appena apparso.
Si scopre che in una determinata web pagina, ci potrebbe essere un solo file
involved-- hello.html-- o là potrebbe essere 52, come in questo caso.
Quando visito google.com, a quanto pare, il mio browser
prende il via 52 richieste HTTP separati.
Perché?
>> Beh, guarda cosa c'è dentro di questa pagina web sulla parte superiore.
Non c'è solo il testo, ma ci sono immagini reali
dei gatti più a destra.
C'è un logo colorato qui a sinistra.
Ci sono tutte queste icone un microfono e così via.
Ci sono un sacco di pezzi, la costruzione di blocchi, pezzi di gratta e vinci, se si vuole,
a questa pagina web.
E che il browser sta facendo su ricevendo il primo file, che
è questa riga qui, è essenzialmente iterare sopra le righe HTML
basso, da sinistra a destra, cercando cose come tag di immagine o di altri tag
che si citano altri file e quando li vede, va e li recupera
via HTTP, tutta percorribile busta metafora,
e poi li visualizza nel posizione appropriata nella pagina web.
>> Ma si noti qui se mi concentro su i primi due gatti, di ricerca,
notare che, in effetti sta usando HTTP 1.1.
E purtroppo, Google Chrome ora in versione 39
è una specie di cose buttato giù e Non che ci mostra le intestazioni attuali.
Ma ciò che è stato effettivamente inviato una richiesta per non tagliare, ma / search? q = gatti.
>> Ora, il motivo per cui è così importante?
Beh, ho intenzione di inferire da questo che se Google
supporta le query di questa forma, perché Non faccio a implementare la mia ricerca
motore per CS50, ma solo la parte anteriore fine, solo l'interfaccia utente grafica.
E noi provvederemo a esternalizzare il back-end, la ricerca vera e propria risulta Google.
>> Così come posso fare questo?
Beh, lasciatemi andare in gedit qui.
E mi permetta di andare avanti e aprire fino, diciamo, un nuovo file.
E ho intenzione di salvare questo temporaneamente come ricerca-0.html.
E poi alla fine, faremo in fretta in avanti per quello che ho pre-preparati.
>> E ho intenzione di rapidamente improvvisare tipo doc
html parentesi aperta html vicino html staffa.
Poi ho intenzione di fare testa vicino testa titolo aperto CS50
Cerca invece di ricerca di Google.
Quaggiù ho intenzione di avere il corpo, qui vicino il corpo.
E ora ho bisogno CS50 Cerca.
E in realtà, cerchiamo di costruire questo modo incrementale.
Ho intenzione di andare avanti e chiudere questo e effettivamente messo nel mio elenco pubblico.
Quindi, dammi solo un momento.
Ricerca-0.html-- ho intenzione di temporalmente chiamarlo search.html.
Ho intenzione di chmod un search.html + r.
E ora ho intenzione di aprirlo.
Va bene, così che era veloce.
Ma l'obiettivo era semplicemente per farci arrivare al punto
di avere questo testo file chiamato search.html.
Quindi non c'è molto da vedere ancora.
In effetti, se vado a mio browser, e andare a search.html, che è tutto ciò che è.
Ma sai una cosa?
Posso essere un po 'più elaborato.
Ho letto in un libro che non c'è un titolo tag chiamato h1.
E ho intenzione di andare avanti e utilizzare tale h1 aprono e si chiudono h1.
Ricaricare la pagina.
E ora è più grande e più audace, non tutto ciò che interessante,
ma almeno strutturalmente più interessante.
Ma ora permettetemi di presentarvi un altro tag.
Si scopre c'è un tag form.
E mi permetta di chiudere quel tag.
E si scopre là del un tag input che
ha un attributo tipo detto, che è il tipo di dati del campo,
se si vuole.
E sta per essere di tipo text.
E il suo valore sta andando essere CS50 Ricerca.
Chiudi tag.
E ci sara 'alcuna nozione di l'apertura e la chiusura con tag separati.
>> Torniamo qui e vedere che cosa sta succedendo, ricaricare.
Ottenere interessante.
Sembra come se fosse un campo di testo.
E in realtà, non volevo mettere un valore ci siamo ancora.
Torniamo qui e realmente ottenere liberarsi di questo valore per mantenere le cose semplici.
Invece di un valore, quello che volevo di dare questa cosa era un nome.
E io non so cosa sia, così tornerò a quello.
>> Ma al di sotto di questo, voglio fare input type = submit.
E questo valore sarà CS50 ricerca.
E vedremo il motivo per cui spostato il valore di questo.
Quando ricarico, mi sembra di avere ora l'inizio della mia ricerca
motore, super orribile, anche se, francamente, è
non un tiro lontano da ciò che Pagina di default di Google sembra.
>> Se vado qui, ora, posso digitare gatti e, auspicabilmente, fare clic su Cerca.
Ma io non sono ancora del tutto finito, perché non ho implementato,
ovviamente, un database.
Non ho strisciato la web per i risultati di ricerca.
Quindi ho bisogno di esternalizzare che a Google.
Allora, come faccio a fare questo?
>> Ebbene, innanzi tutto bisogno di aggiungere e di azione
attribuire alla mia tag forma che è http://www.google.com/search.
E so che solo da avere dedotto guardando da vicino
al loro URL.
E ora prendere una congettura.
Ciò che questo campo di testo dovrebbe probabilmente essere chiamato, in base a dove siamo arrivati
da prima?
>> PUBBLICO:? Q.
>> DAVID J MALAN:? Q.
E non abbiamo in realtà bisogno di domanda segnare si scopre, ma q è in effetti,
q per la domanda probabilmente da impostazione predefinita, solo perché questo è
ciò che Larry e Sergey si avvicinò con anni fa.
Così ora mi permetta di ricaricare questa pagina.
Non sembra poi così diversi.
Ma ora vedere cosa succede.
>> Se digito nei gatti e fare clic su CS50 Ricerca e lasciarsi andare,
Noto vengo sbattuto via di effettiva Google.
Ora, Google è essere un po ' fastidioso in quanto sono
aggiungendo un parametro aggiuntivo, se si vuole, per l'URL.
Questo è tutto accade automaticamente sul lato Google.
>> La parte importante è che mi sembra aver generato questa richiesta qui.
E in effetti, è quello che succede.
Quando si dispone di HTML che si presenta così, questo
è una sorta di notazione sviluppatori web per dire, andare avanti e creare un modulo
che quando si è presentato, che sta per andare a questo URL.
E quando l'URL ha fornito I valori per cose come q,
non andare solo a questo URL.
In realtà, passare alla domanda marchio e quindi q = gatti.
Aggiungere il parametro, il Parametro HTTP così.
>> E tanto per essere super preciso, ciò che è stato dedotto qui--
ma sarò più explicit-- è che il metodo che voglio usare
è ottenere, invece di qualcosa di simile post, che ci vediamo alla fine.
Così, in breve, semplicemente attraverso la comprensione HTML e l'utilizzo di alcune abbastanza semplici tag,
ora possiamo cominciare a creare il nostro utente front-end
interfaccia con una ricerca motore dietro di esso.
>> Ma questo, naturalmente, è piuttosto orribile.
Quindi lasciate che in realtà aprono una versione leggermente migliore.
Questo è quello che ho preparato in anticipo che ha alcuni commenti.
Ma vedrai che ho praticamente ricreato.
Quindi questo è già disponibile on-line.
E mi capita di preventivamente andare a https solo per mantenere le cose semplici.
>> E adesso apriamo un prossima iterazione di questo.
E 'la versione 1 invece di 0.
Ciò che salta fuori a voi come un po ' diverso in questo esempio?
>> PUBBLICO: [incomprensibile].
>> Sì, c'è questo centro di allineamento del testo.
Questo è un po 'strano qui.
Ma questo è davvero nuova.
E forse indovinare che cosa sta per accadere.
Se vado al mio browser ora e visita di ricerca-1.html,
è quasi la stessa cosa.
Ma si tratta di un passo avanti verso di essere un po 'più carina.
E 'ancora brutto, ma più bella in quel almeno tutto è ora centrato.
>> Così si scopre che quello che sto usando è una lingua del tutto chiamato
CSS, fogli di stile CSS.
E CSS, francamente, è una specie di, a mio parere personale,
un linguaggio atrocemente progettato.
È molto fastidioso ricordare tutti i vari dettagli.
Ma è quello che stilizza la tutto il web in tutto il mondo di oggi.
Ho offeso qualcuno.
Bene.
Quindi cerchiamo di tornare qui e vedere come stiamo in realtà usando questo.
E si scopre, almeno è in realtà un linguaggio piuttosto semplice.
E 'solo coppie di valori chiave, proprietà e valori, proprietà e valori.
In effetti, qui è una tali beni e il valore.
>> Semplicemente usando lo stile attributo sul mio tag body
e dando un valore di un Parola del colon e un'altra parola,
o una proprietà e un valore, Posso influenzare l'estetica
della pagina web, non necessariamente ancora la struttura,
ma l'estetica di esso.
E proprio da usare Google in giro, mi rendo conto che i fogli CSS, di stile CSS,
supporta una proprietà chiamata text-align, il cui valore può
da sinistra, a destra o al centro, per esempio.
>> Così ora quando ricarico questa pagina, quello che ho avuto
era una pagina centrato, ma ancora piuttosto brutto.
Andiamo avanti e aprire up versione 2 di Ricerca.
E ora accorgo che ho fatto un po 'di più.
Si noti che qui all'interno della testa tag, ci possono essere più di titolo.
In realtà, c'è un tag di stile.
Ed è qui che si ottiene solo un poco vedere CSS disordinato a volte.
>> Si noti che mi sembra di avere qualcosa che sembra strutturalmente molto diverso.
Ma qui è il nome del il tag che voglio stilizzato.
Ecco i nostri vecchi amici ricci parentesi graffe e parentesi graffa chiusa.
E poi ecco che proprietà e il suo valore.
>> Se si carica il file, search2.html, il risultato finale è identico.
Ma è un passo verso una migliore progettazione.
Con factoring questo CSS, ho non commista con il mio HTML.
E in effetti, come vedremo, ho potuto riutilizzare queste proprietà e valori.
Se avessi voluto fare mazzi di parti della mia pagina web centrate,
Non ho digitare style = text-align centro di tutto il luogo.
Posso mettere in un unico luogo forse, come nella parte superiore.
>> Ma anche questa non è la migliore disegno.
In effetti, una delle cose che imparerete come si spendono sempre più tempo con
programmazione web è che quanto più è possibile modularizzare cose e fattori di cose
come i file .h fateci fattore di roba, come helpers.c Cerchiamo di fattori di cose
un paio di p-set fa.
Allo stesso modo, potremmo voglia di raggiungere questo obiettivo.
>> Così notare nella versione tre di search.html ho
ripulito la testa di la pagina e appena messo
in questo, un tag link, che contrariamente al nome,
non ti dà un collegamento ipertestuale.
Si collega a un altro file per mezzo di un href il cui valore in questo caso,
è la ricerca-3.css
Così mi rendo conto che stiamo andando rapidamente.
Ma tutto quello che sto facendo è una specie di muovere le cose intorno.
Lasciatemi aperto di ricerca-3.css.
Vi è, davvero niente da esso.
Io ho semplicemente copiato e incollato in un nuovo FILE, proprio come abbiamo fattorizzato roba
in altri file prima.
E il result-- completamente underwhelming--
sta per essere esattamente lo stesso.
Ma ci stiamo muovendo toward-- no, non lo è.
Oh, lo so perché.
>> Così sembra essere un bug.
Ed è in un certo senso.
Ma mi permetta di aprire la mia scheda di rete.
Mi permetta di ricaricare la pagina.
Ah, perché è il CSS non viene applicata?
Beh, il file CSS, allo stesso modo, ha per essere leggibile mondo, per così dire.
Ed è troppo è attualmente vietata.
Quindi, mi permetta di fare un chmod a + r di stella dot CSS-- whoops--
siamo dot CSS è solo il estensione del file per i file CSS.
Ora vorrei tornare a il mio browser e ricarica.
OK, un po 'meglio.
>> Ora vorrei fare un'ultima cosa.
Alla ricerca-4.html.
Ho una versione che ho pensato era modo più fresco, anche se molto più
complicata.
Guardiamo il risultato prima.
Chiudi questa a darci più spazio.
Modificare questo per la ricerca-4, Invio.
>> E ora un sacco di cose sono rotti.
Ho intenzione di tornare indietro nel mio elenco qui.
E ora sto solo andando a fare un chmod di un + r su un file--
perché so che exists-- chiamato logo.gif, che è un'immagine.
E ora ricaricare.
E wow-- così ora sono molto vicino, francamente,
ad apprezzare la versione di Google del 1999, e francamente, la versione 2014 di Google,
giusto?
>> Quindi è ora di andare al loro sito web, in ultima analisi, se cerco per i gatti.
E in effetti lo è.
Ma che cosa ho fatto in modo diverso in questa versione 4?
In modo da non soffermarsi troppo su di esso qui.
Vedrete questo problema impostare sette alla fine.
Ma ho notato un paio di cose.
>> Ho introdotto un div tag, che è la divisione,
simile nello spirito di un tag di paragrafo.
Ma una divisione è proprio come, ecco una regione invisibile rettangolare
dello schermo.
Diamogli un unico identificatore, un piè di pagina, basta
in modo che si possa parlare di nel nostro HTML altrove.
Ecco un altro div della pagina il cui ID sta per essere contenuti.
È il contenuto della pagina.
E qui è l'intestazione della pagina.
>> In altre parole, ho sostanzialmente in HTML am mentalmente
la visualizzazione di questa pagina web come tre componenti, un colpo di testa
qui con questo rettangolo invisibile, il contenuto nel mezzo, e poi
il piè di pagina in basso, anche anche se non vediamo queste cose.
Perché voglio nella mia testa di pagina qui, o in un file css,
Posso usare questa sintassi.
>> Header non è un tag.
Si tratta di un ID così si trasforma che facendo #header,
Ora posso applicare una o più proprietà alla intestazione.
Posso fare lo stesso contenuto, lo stesso per contenuto qui.
>> Così, per esempio, nel piè di pagina, avviso tutte queste proprietà che sto aggiungendo.
E so che esistono solo per la lettura sulla documentazione per i CSS.
Dimensione carattere sarà smaller-- in modo un po 'la dimensione del carattere relativo.
Il peso sta per essere audaci.
Margin-- il numero di pixel intorno it-- è di 20 pixel.
E che sta per essere centrato.
>> Ma in questo momento, la pagina si presenta così.
Se non sono soddisfatto la mia copia proprio lì,
Potrei fare qualcosa di simile colore rosso.
E poi posso salvare questo, ricarico, e ora ho stilizzata il piè di pagina.
Quindi questo è solo alludendo alla potenza di cosa si può fare in una pagina web
a cambiare le cose.
>> E ancora più interessante di questo, se si vuole a curiosare con i siti web attuali,
non si può in modo permanente cambiarli.
Ma se apro Nuovo Ispettore di Chrome
e io non vado a sinistra qui, che mostra HTML di Facebook,
ma mostra sulla destra lato tutta la sua CSS,
è possibile sia e cambiare le cose al volo.
Quindi lasciami andare avanti e fare questo.
>> Lasciami andare avanti e di controllo clicca su questa parola a caso qui,
segno, e fare clic su Inspect Element.
Chrome salta molto comoda per il tag h1 che Facebook sta usando.
E notare qui Facebook ha tipo di pigramente
hardcoded dimensione del carattere come una proprietà qui.
>> Quindi, la cosa interessante è però che se io in realtà vado qui
e dire, oh, Facebook, non mi piace che 64 pixel, si possono ora cambiare Facebook.
Naturalmente, stiamo cambiando solo per me personalmente in questo momento.
Ma questo è solo un altro strumento nella nostra cassetta degli attrezzi
che sta per permetterci di modificare e capire e anche la diagnosi
problemi nelle nostre pagine web.
E potremmo allo stesso modo andare oltre qui, che è la stessa cosa.
Se davvero si vuole ottenere fantasia, ho dire, ora si può davvero mutare la pagina
e fare cose folli.
>> Perché, dunque, tutto questo è utile?
Beh, in ultima analisi, siamo andando a voler essere
in grado di creare pagine web che sono guidati dalle nostre back end,
non da solo Google e esternalizzazione del back-end lì.
Noi vogliamo che la realtà valore, per esempio,
di azione del nostro motore di ricerca attributo di andare non a qualcun altro,
ma a qualcosa come search.php, dove search.php è sul nostro server,
non di qualcun altro.
>> E così per arrivarci, abbiamo effettivamente necessità di introdurre un nuovo linguaggio.
Quindi abbiamo già esaminato uno nuovo lingua qui, o due davvero, HTML
e CSS.
Ma in realtà sono solo linguaggi strutturali ed estetiche.
Non sono la programmazione linguaggi per sé.
E questo è tanto formale al momento in cui passeremo su di loro.
Perché inizieremo ora di transizione verso PHP.
>> Così PHP è un vero e proprio linguaggio di programmazione.
E 'un linguaggio di scripting nel senso che è
vuole essere di peso più leggero di qualcosa di simile a C.
Ed è un linguaggio interpretato, il che significa che non è stato compilato.
Quindi, in poche parole, che cosa voleva dire quando abbiamo usato un linguaggio come c
e abbiamo dovuto compilarlo?
Che cosa significa per compilare il codice sorgente C?
PUBBLICO: [incomprensibile].
DAVID J MALAN: Dillo di nuovo?
PUBBLICO: [incomprensibile].
DAVID J MALAN: Perfect.
Si trasforma in binario.
Si trasforma in zero e uno dalla attuale codice sorgente Inglese-like.
E allora possiamo davvero farli funzionare zero e uno
facendoli passare attraverso la CPU facendo doppio clic su un'icona
o l'esecuzione di un comando.
>> PHP e Python e Ruby e Perl e JavaScript
e mazzi di altri lingue vengono interpretate
lingue, vale a dire non li compila.
Piuttosto, loro da mangiare come input per un programma chiamato un interprete.
E che interprete, che qualcun altro ha scritto,
legge il codice sorgente superiore verso il basso, da sinistra a destra e solo interpreta
quelle linee e fa quello che dici.
>> Quindi, se si verifica un riga che dice la stampa,
non necessariamente convertire stampa per gli zeri corrispondenti e uno.
E 'solo questo interprete come un grande se la condizione che dice,
se le istruzioni del programmatore è stampa, quindi effettuare le seguenti operazioni.
Così interpreta solo dal tipo di ragionamento
attraverso quello che si sta dicendo di fare.
>> E PHP è una di queste lingue.
E PHP anni fa, è stato progettato proprio per la programmazione web.
Ed è stato inizialmente un molto sciatto linguaggio disordinato.
E in effetti, c'è un enorme quantità di cattivo codice PHP là fuori.
Ma il linguaggio stesso ha maturato nel corso degli anni,
tanto che ora è in realtà un meraviglioso passo successivo
pedagogicamente da C perché è così dannatamente familiare a tutto
hai appena visto nelle ultime settimane.
>> L'unica differenza iniziale vedremo è che non c'è più alcuna funzione principale.
Quando si avvia la scrittura di codice, è solo intenzione di ottenere eseguito non importa cosa,
come vedremo tra un attimo.
Nel frattempo, ecco cosa un variabile si presenta come in PHP.
E 'un po' diverso, ma solo a malapena.
>> In PHP, non c'è una forte tipizzazione.
C'è settimana di battitura, che ha appena significa che ci
sono i tipi di dati come stringhe e numeri e altre cose.
Ma non si preoccupano specifica quello che sono più.
PHP figure fuori per voi.
Il simbolo del dollaro è solo una decisione che il popolo PHP fatte anni
fa in modo che qualsiasi variabile in PHP appena inizia con un segno di dollaro.
E 'in realtà tipo di utile in quanto salta fuori a voi un po 'di più.
>> Ma dopo che questo è una condizione in PHP.
Cosa c'è di diverso rispetto a C?
Trucco interrogo nulla, che in realtà è veramente bello.
Espressioni booleane in PHP-- stesso.
Espressioni booleane con e contro o, interruttori, loops, loop, loops-- OK,
questo è diverso.
>> Così si scopre c'è un paio di altre funzioni in PHP.
Uno di loro è in realtà questo, che è meravigliosamente comodo.
Se $ numeri è un array che hai dichiarato in precedenza in un programma,
avete questa fantasia per ogni costrutto che invece di fare tutto questo
fastidioso I è uguale a 0, I è meno di questo, [? I ++?],
per ogni numeri come numero, dove ogni di quei valori simbolo del dollaro è solo
una variabile, e quest'ultimo si può pensare come me
Si potrebbe chiamare tutto quello che vuoi.
Ho chiamato il numero.
Questo sta per iterare l'array chiamato i numeri.
E su ogni iterazione, è intenzione di aggiornare automaticamente
per il numero simbolo del dollaro variabile in modo che costantemente
avere accesso alla variabile che si desidera senza dover fare alcuna parentesi quadra
notazione o l'indicizzazione in un array.
>> Oltre a ciò, abbiamo anche cose come array, che sembrano quasi la stessa cosa,
tranne che è molto comune, come vedremo vedere, sia in PHP e JavaScript
di controllare la validità inizializzare un array utilizzando le parentesi quadre.
C utilizza parentesi graffe.
Quindi è un po 'diverso, anche se non abbiamo usato davvero quel trucco molto.
>> Ma ancora più potente, PHP ha array associativi,
che è un modo elegante di dire tabelle hash.
In realtà, se si desidera dichiarare un hash tavolo in PHP, a differenza di quanti C--
righe di codice ci è voluto per in realtà implementare una tabella hash in C?
O il numero di righe di codice è prendendo per implementare una tabella hash in C?
Quindi è probabilmente molto, giusto?
Si tratta di qualche decina, forse 100 o 200.
E 'banale.
Oppure sta per essere, come vedrete presto, non banale
di attuare una tabella hash [Incomprensibile] e anche una prova.
Ma in PHP-- e francamente, io probabilmente non si dovrebbe dire a questo
fino Monday-- in PHP, se volete un tavolo, fatto.
Questo è un hash table-- così con una riga di codice.
E
>> Un sacco di lingue farlo.
Buon divertimento con pset cinque.
Così un sacco di lingue farlo.
Ti danno queste astrazioni che altre persone, altri programmatori,
hanno creato per voi in modo che si può stare sulle spalle
e iniziare a utilizzare le idee che sono super convincente, come tabelle hash e gli alberi
e cerca.
Ma non devono necessariamente implementare queste cose da soli.
>> E così in ultima analisi, ciò che stiamo andando a utilizzare PHP per
è potenzialmente la scrittura di programmi della cosiddetta linea di comando.
Potremmo ricreare ogni programma abbiamo scritto questo semestre finora,
tranne forse Breakout che utilizza SPL, che è specifico per C al momento.
Ma ogni altro problema impostato, certamente Mario e Cesare
e Vigenere e [? Crack?] E poi, abbiamo
potrebbe re-implementare in PHP, e probabilmente un po 'più facilmente.
>> Ma quello che stiamo andando in ultima analisi, a utilizzare PHP per la programmazione web è.
E stiamo andando a presentare il prossimo settimana un modello mentale, un paradigma chiamato
MVC, controller di vista del modello, che se hai fatto la programmazione
prima in Python o Rubino o altrove, si
potrebbe sapere di questa squadra con Rails e Django e simili.
Ma se siete nuovi a anche questo, si vedrà
che questo è in realtà molto naturale estensione della fattorizzazione
e il tipo di disegno di codice che abbiamo
state facendo in C. Stiamo per ora applicare un po 'di quelle lezioni di PHP
così che alla fine, siamo attuazione nostri siti web.
E se sei una sorta di ipnotizzato o stupito
che stiamo andando a fare tutti i così rapidamente,
rendersi conto che quasi ogni semestre, quasi il 90%
di studenti CS50, compresi quelli che non hanno mai programmato prima,
finiscono per fare progetti finali che sono basate su programmazione web.
E così potrete vedere che i rendimenti sono alte nelle settimane a venire.
Così vedremo poi il Lunedi.
>> SPEAKER 1: Ed ora, Profondo Pensieri di Daven Farnham.
Tabelle hash.
>> [Risate]