[Powered by Google Translate] [Seminario] [Sviluppo Web: Dall'idea alla realizzazione]
[Ben Kuhn] [Billy Janitsch] [Harvard University]
[Questo è CS50] [CS50.TV]
[Billy] Ciao, mi chiamo Billy e questo è Ben. >> [Ben] Ciao.
Stiamo per parlare di sviluppo web di oggi.
[Webdev] [Billy Janitsch e Ben Kuhn]
Un po 'di noi in primo luogo.
Ben è una sorta di ragazzo di back-end. Fa le cose funzionano.
E poi vado e faccio loro abbastanza.
Sono in gran parte coinvolto con più front-end tipo di progettazione del layout di roba,
e Ben, d'altra parte, sa quello che sta facendo così egli lavora su roba di back-end.
Insieme abbiamo fatto un paio di cose.
Ad esempio, l'anno scorso abbiamo lavorato su Gimblium che è uno studio di sviluppo del gioco online.
Questo era il nostro progetto finale per la classe,
e da allora abbiamo fatto Harvard Class
che è un quadro in linea per la navigazione e corsi di shopping a Harvard.
>> Stiamo per iniziare con questa idea per il nostro sito.
Stiamo andando a fare su Facebook, ma per i gatti.
Prima che effettivamente fare questo sito,
non fare questo sito, perché non è bene, ma useremo come un quadro
e passare attraverso il processo di come prendiamo questa idea
e trasformarlo in un vero e proprio sito web che possiamo usare.
Inizieremo rompendo il sito verso il basso.
Come hai fatto a CS50,
si vuole pensare a quello che sono i componenti effettivi che vanno in questo sito web.
Fondamentalmente trasformandolo da un'idea che è solo una sorta di un concetto astratto
in una vera e propria, cosa tangibile che si potrebbe fare.
Partiamo da alcune domande.
Cos'è questo sito? Perché stiamo facendo questo?
Che sta andando ad essere utilizzati per? Questo genere di cose.
Nel caso di Facebook Cat,
abbiamo praticamente vogliamo un sito web che permette di gatti social network con l'altro.
L'idea è che si possono inserire sulle rispettive pareti,
possono fare commenti, quel genere di cose.
Ed è qui che entriamo in componenti funzionali.
Ora abbiamo questa sorta di quadro - abbiamo profili utente,
abbiamo commenti, e possiamo pubblicare.
Forse un giorno saremo influenti simpatie e quel genere di cose.
E noi vogliamo sorta di priorità queste caratteristiche e si trovi
Vogliamo dire come, va bene, è davvero importante che ognuno di noi ha un profilo
e che tutti possono postare sulle rispettive pareti.
Secondaria a ciò, i commenti sarebbe bello.
Forse più tardi ci influenti simili.
Quindi, si vuole avere un'idea di ciò che è fondamentale per il vostro progetto
e che cosa è una sorta di caratteristica più generale che potrebbe essere applicato in seguito.
Volete avere una sorta di elenco specifico in mente,
ma il progetto che si avvia con non sta andando essere il progetto che hai finito con.
In altre parole, le cose stanno per cambiare mentre si sta sviluppando il sito,
e si vuole lasciare spazio a questo.
Io la parola a Ben che sta per parlare un po 'della struttura.
>> [Ben] ho intenzione di parlare di la parte più tecnica di sviluppo web.
Diciamo basta andare su alcune basi prima.
Quando stai facendo una web app,
la divisione principale che si sta andando ad avere è
si sta andando ad avere alcune cose in corso nel lato client -
cioè il codice che sei il browser prende dal sito
e, HTML, CSS JavaScript roba.
Questo è tutto sul lato client.
Stai andando ad avere un altro codice che viene eseguito sul lato server
che tiene traccia di tutti i dati che le persone mandano a voi,
decide a chi dare cosa, cose del genere.
Questo è solo un po 'di terminologia in modo che voi ragazzi siete tutti a conoscenza di cosa stiamo parlando.
Al di là di questa divisione è bene pensare alla vostra applicazione web in termini di
un paio di componenti distinti.
Quando si sta facendo lo sviluppo del web
una delle cose che si dovrebbe sempre cercare di fare è ridurre la complessità.
Più complesso il codice è il più possibilità ci sono di fare errori,
più difficile è da cambiare in seguito.
Quindi, se si può spezzare la vostra applicazione in alcune aree funzionali distinte
che verrà - e si può ridurre la quantità di specie di comunicazione cross-zona -
che vi aiuterà molto nel lungo periodo in termini di riduzione bug.
>> Per essere concreti, di solito le persone dividono una web app in -
questi sono i tipi di parole d'ordine ora, ma sono ancora utili.
Potreste aver sentito parlare di modelli, visualizzazioni e controller.
I modelli sono i dati reali che la vostra applicazione sta per affrontare.
Ad esempio, nel vostro gatto Facebook, i modelli sarebbero -
si avrebbe un modello per posti simili, e un modello per i profili utente, cose del genere.
Le vostre opinioni sono come presentare i dati agli utenti.
Si potrebbe avere 1 visita per guardare un singolo post e tutti i commenti
e una visione diversa per il vostro muro che ha una lista di tutti i post
che sono diretti a te, e una visione diversa per il vostro feed di notizie - cose del genere.
Infine, hai i controller che sono fondamentalmente quando la gente si inviano messaggi
e fate gli aggiornamenti al sistema di back-end,
si incrementa un mucchio di contatori, e quant'altro.
Quelli sono i controller.
>> Ho intenzione di parlare soprattutto di modelli.
Vista non sono tecnicamente difficili e che la questione è più con loro progettazione
Controller stanno per essere specifico per quello che stai progettando.
Ma ci sono alcune tecniche piuttosto generali che è possibile utilizzare
per rendere i vostri modelli più bello e più facile da lavorare che penso siano molto utili.
Questo è in gran parte sarà su come trattare con i vostri dati applicazioni web in un bel modo.
I principali problemi con i modelli
sono che vivono sul client e sul server e si deve capire
a) come ottenerli - tutti quelli rilevanti - dal server al client,
e b) come tenerli in sincronia.
Gli utenti stanno andando a voler fare alcuni aggiornamenti.
Stanno andando a voler fare nuovi posti.
Stanno andando a voler piacere le cose e cose se avete gusti.
Queste sono le principali sfide tecniche di trattare con i modelli.
La prima cosa che si sta andando a voler porsi è
che tipo di dati va in questo modello e che tipo di query stiamo andando a voler fare -
cioè, come stiamo andando a guardare i modelli?
Per il vostro gatto Facebook esempio,
il tuo post sta per avere un autore ad esso associati,
testo posta muro, e un destinatario del post muro.
E allora si potrebbe desiderare di query che in un sacco di modi diversi.
Si vorrebbe guardare da chi ha scritto che dopo,
da chi ha ricevuto quali inviare, forse dalla data in cui sono state inviate.
Ma se avete intenzione di farlo per data, allora si deve aggiungere un altro campo al tuo post
quando è stato effettivamente pubblicato.
Questi due fattori - quali sono i dati che si desidera utilizzare e come volete vederlo -
si dovrebbe pensare a loro in primo luogo perché dipendono l'uno dall'altro,
e sarà più difficile aggiungere in seguito.
>> Ci sono alcune altre considerazioni.
Quando stai pensando a come trattare con i modelli sul server
ciò che si desidera guardare è -
desideri fondamentalmente per rendere il server più semplice possibile.
Facendo roba sul lato client è in genere molto più veloce se è possibile farlo esclusivamente sul client
senza fare alcun tipo di richiesta di rete.
L'idea è di fare come molte delle domande che puoi sul client.
L'unico problema che
è che se si richiede tutti i dati all'inizio
poi che sta andando a prendere molto tempo per caricare.
Quindi, l'idea è di trovare una via di mezzo tra l'avere abbastanza dati sul client
che si può fare la maggior parte del vostro lavoro lì, ma non solo andare a prendere tutto in una volta
in modo da ottenere tempi di caricamento molto lento all'inizio.
Ad esempio, per i dati gatto
probabilmente farete bene a prendere un po 'di messaggi in bacheca recenti.
Lei non vorrebbe andare a prendere tutti loro, perché questo potrebbe tornare indietro di un paio di anni.
Ma non si vuole andare a prendere uno alla volta
perché sarebbe introdurre un sacco di sovraccarico della rete.
>> E 'spesso molto difficile - una volta che si dispone di un database di esecuzione -
è spesso molto difficile da cambiare i dati che hai dentro -
cioè, aggiungere una nuova colonna di database o qualcosa del genere -
così una buona strategia è in realtà solo di tenere un sacco di dati in un blob di testo -
un blob JSON - JSON essendo JavaScript Object Notation -
La ragione per cui è utile perché puoi aggiungere nuove proprietà
a tutte queste macchie JSON senza modificare il database.
L'unico lato negativo è che se hai un sacco di campi
che si è aggiunto in seguito - come nascosta in quella JSON blob -
allora è più difficile per interrogare loro all'interno del database.
Per esempio, se in seguito - se tu avessi il modello post che abbiamo discusso in precedenza
con solo l'autore, il destinatario e il testo -
si potrebbe anche avere un blob JSON e poi se in seguito si voleva aggiungere un campo data
non avrebbe dovuto cambiare il vostro database.
Si può solo aggiungere date a tutti i campi di testo.
E allora si sarebbe in grado di guardare quelli sul lato client,
ma non sarebbe in grado di interrogare loro sul lato server
perché è nascosto all'interno di quel testo.
>> L'altro problema che si vuole pensare
è come il client e il server stanno per comunicare.
Di solito si vuole mantenere questo il più semplice possibile.
Si può solo avere come-me-get questa richiesta di dati,
una create-a-new-object cosa, e una richiesta di aggiornamento-an-old-oggetto.
E questi sarebbero tutti diversi URL su un server che si -
che il browser sarebbe - è possibile utilizzare richieste AJAX per tutti questi
e ricevere o dati post.
Anche in questo caso, per il nostro gatto Facebook esempio,
si potrebbe avere l'URL per ottenere un singolo post,
e devi avere un URL per la creazione di un nuovo post muro
e forse un URL per il caricamento di foto del profilo, cose del genere.
Ma ancora una volta, che è pre-fetch maggior parte dei dati in modo che non c'è bisogno di tenere
fare richieste di rete.
Per questo motivo, non si potrebbe desiderare di avere quella richiesta get individuale per un singolo post,
e invece si vorrebbe solo 1 richiesta GET per l'intera parete.
E poi se si sta cercando di trovare un equilibrio, perché -
questo è anche andando a dipendere dalla vostra applicazione.
Perché se vi aspettate che le persone hanno solo 10 o 20 messaggi in bacheca
che andrà bene.
Ma se vi aspettate che avranno migliaia quindi che la richiesta sarebbe troppo lungo,
e così si potrebbe desiderare di aggiungere un parametro get-tutti-post-da.
>> Per tutti questi probabilmente stai andando a voler sincronizzare i dati in JSON -
JavaScript Object Notation.
Praticamente ogni lingua si occupa di JSON molto bene.
JQuery ha questa funzione getJSON bello che farà tutto il lavoro duro per voi.
E su PHP c'è anche funzioni di comunicazione JSON molto belle.
Quindi, questo è probabilmente il miglior format per inviare i vostri modelli avanti e indietro.
>> Come esempio di ciò di cui abbiamo parlato finora,
ecco un esempio di flusso per il vostro gatto applicazione Facebook.
Si inizia con il browser che richiede la URL del sito web di base.
Il server probabilmente avrebbe mandato su HTML statico e alcuni JavaScript e CSS.
Di solito è meglio non fare alcuna rappresentazione sul server.
Probabilmente non si vuole -
ciò che il server non sta facendo ci sta andando giù l'elenco dei messaggi in bacheca
e la generazione di codice HTML per ognuno e l'invio che oltre.
Di solito è meglio farlo sul lato client perché altrimenti
ogni volta che si desidera ri-disegnare qualcosa, devi fare una richiesta del server.
E che ti dà molto rapidamente un sacco di overhead.
Di solito è meglio solo per la nave fa scendere statico HTML
e poi Javascript e CSS che farà il rendering sul lato client.
Appena quella roba entra,
allora si può avere - in JavaScript - si può fare richiesta per i dati muro
e cose del genere, e dopo che il server è fondamentalmente solo facendo query di database
e la verifica delle autorizzazioni.
L'unica cosa importante è che non può inviare più di altri posti della parete utenti
che non sei autorizzato a vedere.
Si può sostanzialmente essere uno strato molto sottile di accesso al database,
e poi tutto il mostrando dati - tutti i punti di vista e roba -
questi possono accadere nel browser, e poi quando si vuole fare un post o qualcosa del genere
basta inviare un'altra richiesta.
>> Ci sono anche alcune cose di fantasia si può fare in cima a questa.
In termini di informazioni tecniche più specifiche,
sviluppando in pianura JavaScript può essere un po 'doloroso,
quindi ci sono alcune librerie e strumenti che ti aiuteranno molto in questo.
Credo che tu abbia tutti probabilmente sentito parlare di jQuery che fa fare il rendering HTML
e la manipolazione molto più facile - hanno un sacco di funzioni di fantasia per dissolvenza dentro e fuori,
e facendo animazioni zippy.
C'è anche questa biblioteca chiamato Underscore.js.
Ha un sacco di funzioni di utilità utili, roba che ci si aspetterebbe Javascript per avere
che in realtà doesnt - cose come mischiare un array,
rimuovendo i duplicati da una lista, o appiattimento una lista di liste.
Questo è solo un piccolo esempio di codice.
Underscore ha una tonnellata di queste simpatiche funzioni che si desidera si avrebbe tutto il tempo.
>> E poi c'è uno più libreria che mi piacerebbe spendere un po 'di tempo su
chiamato Backbone.js perché Backbone aiuta davvero a trattare con i modelli sul lato client
e un sacco di confusione che può causare.
Backbone ti dà questo concetto di modelli e collezioni
in JavaScript che sono fondamentalmente esattamente come oggetti JavaScript
in array JavaScript ma hanno gli eventi quando si modificano le loro proprietà.
Proprio come in JavaScript, è possibile avere un evento quando un pulsante viene cliccato o qualcosa del genere
questi modelli Backbone e collezioni Backbone trasmetteranno le cose come
che quando cambiano.
Ciò significa che si può solo scrivere qualcosa di simile a questo frammento di codice qui -
dice questo, ogni volta che si aggiunge nulla alla post matrice di ridisegnare l'intera parete.
E questo sarebbe dire ogni volta che il numero di un posto di calibro cambia,
si notifica l'utente che qualcuno piaceva il loro posto.
Oppure ogni volta che la proprietà di un post modifiche di ridisegnare il palo.
Cose del genere vi farà risparmiare tonnellate di complessità perché altrimenti
se non si dispone di un quadro di riferimento come questo allora ogni volta che nel codice che si cambia
nulla di un post, avrebbe dovuto ricordare a voi stessi di richiamare tutte le funzioni di rendering
e cose del genere, e se si voleva aggiungere qualcosa di nuovo che è accaduto
ogni volta che si è modificato un post che avrebbe dovuto passare attraverso ogni posto nella vostra
codice che si è modificato un post e aggiungere quella cosa nuova.
Un quadro come questo eliminerà un sacco di che la comunicazione tra strato
che rende complesso il codice e difficile da mantenere.
>> C'è un po 'di vista anche.
Ho intenzione di lasciare la maggior parte di questo per Billy perché non sono tecnicamente molto difficile.
Usare jQuery per le vostre opinioni. E 'praticamente come una necessità a questo punto.
E 'appena rende tutto molto più facile.
Ci sono molte librerie.
Se avete complicato elementi dell'interfaccia utente,
se vuoi una cosa completamento automatico o come uno di quegli fantasia multi-selettori -
se volete qualcosa di simile, probabilmente si dovrebbe solo cercare in giro
e si può trovare una buona biblioteca che farà quello che vuoi.
Billy spiegherà più sulle parti effettivamente difficili di vista.
Inoltre, come nota a margine, Backbone ha alcune funzionalità per effettuare visite comunicare
piacevolmente con i modelli - guardare la documentazione per tutte queste librerie, in realtà.
Basta guardare la documentazione. Sono molto ben scritto e facile da seguire.
In generale, si può praticamente solo Google se avete problemi.
Ci sono un sacco di persone che li utilizzano.
Penso che questo sia come nota finale.
>> Ci sono anche alcune cose più avanzate che si possono fare
se stai cercando di fare la vostra applicazione web in più impressionante.
Si può fare - la nuova specifica HTML5 ha un sacco di cose di fantasia si possono fare.
Archiviazione locale - che è è possibile memorizzare dati nel browser -
piuttosto che dover tornare indietro e sfogliare il server per tutto,
è possibile mantenere un po 'di esso sul client e che permette anche le persone -
in alcuni casi può anche consentire di utilizzare la pagina web offline.
C'è questa cosa chiamata WebSockets che sono un diverso tipo di comunicazione di rete
dove invece di appena fai una richiesta, si ottiene la risposta e il gioco è fatto,
si mantiene aprire una connessione al server e in modo da poter fare le cose come
aggiornamenti in tempo reale.
Quindi, se si stava tentando di fare una chiacchierata app, è possibile utilizzare WebSockets
per comunicare avanti e indietro in modo che non avrebbe dovuto tenere richiedente,
"Oh, il server, qualcuno mi mandi una chat?" ogni 10 secondi o qualcosa del genere.
C'è anche una funzione di HTML5 interessante dove si può far sembrare
l'URL della pagina sta cambiando, senza dover mai ricaricare realtà.
È possibile utilizzare pulsanti Indietro e Avanti senza fare un mucchio di richieste di rete.
Cose del genere è veramente utile in termini di renderlo veloce, ma anche funziona come una web app dovrebbe.
>> C'è anche questa cosa chiamata CoffeeScript.
CoffeeScript è un linguaggio diverso, in realtà, che compila giù a JavaScript.
Si potrebbe scrivere tutto il codice in CoffeeScript, e quindi si esegue questo compilatore,
e sputa fuori un file JavaScript che è possibile includere nella vostra pagina web.
La ragione per cui CoffeeScript è bello è perché si sbarazza di un sacco di
casi strani che JavaScript è dove è uguale uguale,
e gli uguali uguali fanno cose diverse, o piace -
ha più bello sintassi per trattare con gli array e le funzioni.
Questo è un piccolo frammento di CoffeeScript che produce un elenco di tutte le piazze
dal 10 ^ 2 a 1 ^ 2 in ordine inverso.
Come potete vedere, CoffeeScript spesso permette di esprimere in 1 linea
ciò che avrebbe preso 5 righe di JavaScript.
Si può rendere le cose molto più facili.
E 'un po' di nuova sintassi da imparare in un primo momento,
ma sicuramente vi renderà più produttivi nel lungo periodo.
>> È inoltre possibile utilizzare altri linguaggi sul server di PHP -
linguaggi come Ruby, Python, o c'è anche un progetto chiamato node.js
che vi permetterà di utilizzare Javascript sul server.
Personalmente, ho davvero, davvero odio PHP.
Io proprio non piace lavorare con esso.
Se anche voi pensate che si tratta di un cluge terribile di una lingua,
quindi è possibile utilizzare uno di questi, invece.
In generale, se si vuole fare qualcosa e non si sa davvero come si dovrebbe fare,
basta cercare su Internet.
Ci sono tonnellate e tonnellate di risorse in particolare sul -
StackOverflow è un grande.
E 'questo il sito dove i programmatori chiedono ogni altre domande.
Si potrebbe avere incontrato, se si stavano avendo problemi su insiemi di problemi CS50.
E ci sono tonnellate di librerie per fare praticamente tutto quello che si vorrebbe.
Se si vuole fare qualcosa e non sai come farlo,
non date per scontato che è impossibile.
Basta guardarsi intorno e si potrebbe trovare alcune buone risorse.
>> In generale concludere,
i principali take away sono mantenere le cose semplici.
Più complesso il codice è all'inizio
e più si cerca di fare cose di fantasia,
più tempo ci vorrà per ottenere qualcosa di realmente funzionale
e tanto più difficile sarà quello di cambiare in seguito.
Quindi, fare le cose nel modo stupido semplice prima.
Per andare avanti con questo,
non aver paura di buttare via il vecchio codice o pulire un sacco.
In generale, una volta che in realtà hanno qualcosa di lavoro,
è molto più facile pensare che quando si è ancora nelle fasi iniziali
come faccio a mettere tutto questo insieme.
E 'meglio per rendere il più stupida possibile progetto che funziona
e poi migliorarlo in modo iterativo che cercare di ottenere tutto giusto la prima volta.
In termini di divisione client-server, cercare di mantenere il vostro server molto semplice -
solo un database e un po 'di autenticazione e non fanno alcuna fatica lì.
Fate tutte le vostre cose complicate sul lato client nel browser
in JavaScript, per quanto possibile.
Guardatevi intorno per le librerie che rendono la vita migliore.
Sempre meglio usare il codice che qualcun altro ha scritto
se - e di non scrivere da soli.
C'è un sacco di roba su Internet. Google è il tuo migliore amico.
Google è il migliore amico del programmatore.
Sì, sicuramente non abbiate paura di guardarsi intorno per le cose.
Bene. E oltre a Billy.
>> [Billy] In realtà, prima di iniziare con alcune cose di design,
qualcuno ha delle domande per Ben su tutto ciò che ha parlato?
Ok, bene.
Anche in questo caso, fateci sapere se qualcosa non è chiaro
o se volete che andiamo su qualcosa di un po 'di più.
Ho intenzione di fare un passo indietro un po 'e parlare le parti più fondamentali del design.
Ben citato il modello chiamato - scusate, il sistema di visualizzazione del controller modello
che è una sorta di aspetto tecnico, quindi sto andando a guardare di vista specifico,
e ho intenzione di iniziare con come ci si progetta una visione che sembra piacevole.
Ecco una sorta di modello davvero fondamentale per il nostro gatto Facebook.
Penso che ci sono alcuni principi fondamentali nella progettazione di interfacce utente moderno
che vale la pena raccogliere.
Si può notare c'è un sacco di spazio bianco per tutta la pagina,
un sacco di spazio per le cose.
Non si sentono come si deve schiacciare le cose in una pagina.
Vuoi lasciare un sacco di spazio aperto, e se si va a quasi qualsiasi sito web moderno
vedrete c'è bianco ovunque.
Non c'è bianco in posti che non ci si aspetterebbe.
Hai questa tavolozza di colori, ed è saggio all'inizio
per scegliere una tavolozza di colori che si sta andando a lavorare e svilupparsi.
È anche - aiuta a scegliere un carattere tipografico, e in questo modo si sta sorta di lavorare con
questi fondamenti concreti di progettazione.
Tu hai il tuo tipo, avete i colori, e quindi è possibile tipo di
montare tutto il resto in base alle necessità.
Quindi, come ho detto, con la combinazione di colori che si desidera utilizzare i colori più audaci del tuo schema di colori
con parsimonia. Basette sono belle. I pulsanti sono bello avere veramente grandi, colori sgargianti.
Ma in generale, se avete un sito web che ha colori ovunque,
tutto si guardava in faccia, sembra proprio ingombra, e non va bene.
Si desidera utilizzare generalmente colori chiari.
Provare a, ancora una volta, scegliere una combinazione di colori abbastanza coerente.
Si possono avere questi piccoli tocchi di un sacco di colore -
che può guardare piuttosto bello, ma si desidera usarli piuttosto parsimonia.
>> Come ho detto, si vuole essere minimo. Meno è quasi sempre più.
Se è possibile visualizzare qualcosa o non visualizzare qualcosa,
e sei specie di incerto se debba essere lì per impostazione predefinita -
probabilmente si sta meglio fuori lasciando fuori. È sempre possibile aggiungere in un secondo momento.
Sì, mantenere le cose semplici.
Ma soprattutto, si vuole considerare più progetti.
Non pensate che quando si effettua un sito, ce l'hai nella tua testa che si sta andando a
rendere il sito in un certo modo, e sta andando a guardare esattamente come questo.
E 'intenzione di avere l'intestazione blu in alto e la barra laterale blu
e poi il giallo sub-header cosa.
Si vuole fare più modelli.
È possibile - se sei bravo con Photo Shop, è possibile aprire e che tipo di
la progettazione di un sito web come ti piace guardare.
In caso contrario, è possibile utilizzare solo carta e penna,
ma graffiare multipli disegni.
Volete avere fondamentalmente un set up in cui hai un sacco di disegni diversi,
e se uno finisce per lavorare, allora va benissimo.
Se si finisce per fallire, allora si ha sempre un altro a cui rivolgersi.
In generale, non si sentono come si dovrebbe essere costretti
a qualsiasi disegno che inizialmente decidere.
I disegni sono molto variabili, e parte della importanza del modello
Vista controller di sistema è che si può scambiare dentro e fuori diversi punti di vista che si desidera.
È possibile influenzare i dati in un modo, e poi decidere, oh, in realtà, che non funziona bene.
Penso che sia una specie di troppo complicato o c'è una parte che qui non sta realmente lavorando,
quindi sto solo andando ad abbandonare totalmente questo punto di vista e di swap in maniera del tutto nuova.
Possiamo ancora utilizzare i vecchi modelli e le vecchie controllori.
Possiamo fare tutto sul server e client come faremmo prima.
Ma l'ondata effettiva dei dati come indicato sta per essere leggermente diverso.
>> Per quanto riguarda in realtà l'attuazione del disegno che volete,
una volta che hai un paio di idee abbozzate su carta o su Photo Shop o qualsiasi altra cosa,
ci sono una serie di strumenti che sono messi a disposizione per voi.
Il primo sei molto familiare con la quale è il vostro HTML, PHP, o qualsiasi altra cosa
lingua che si sta utilizzando solo per codificare le pagine statiche sul tuo sito web.
Hai lavorato molto con HTML che tipo di ti dà questi tag
che si può mettere le cose in, e fondamentalmente si tratta di un modo di organizzare i tuoi contenuti.
Ad esempio, si ha l'intestazione lassù, così si sta andando ad avere un tag di intestazione,
e sta andando ad avere qualche testo all'interno di esso che è destinata probabilmente ad essere in un altro tag.
Allora avete una barra laterale magari con qualche diversi link,
e quelli stanno per essere tutti in separare i tag.
Quindi, in sostanza HTML al suo cuore è un modo di dividere la pagina come
alla fine si desidera formattarlo.
Quindi, di nuovo, hai visto prima.
Sei abbastanza agio con il lavoro con la guida
dato che hai fatto l'ultimo pset si spera,
così che dovrebbe essere un problema.
>> Allora avete CSS che gestisce praticamente tutti gli aspetti statici di progettazione.
Sarebbe gestire tutti i colori, tutto il posizionamento di elementi diversi,
dove vanno l'uno rispetto all'altro,
quanto sono grandi, i diversi tipi di posizionamenti che si avrebbe -
in altre parole, è possibile avere le cose fissati in modo che quando si scorre verso il basso rimangono,
oppure si può avere le cose rispetto ad altri elementi.
Tutto questo genere di cose è in CSS.
Inoltre, si possono fare diverse decorazioni, si può avere colori del testo,
effetti di testo, tutto questo genere di cose.
Ben ha dato davvero un buon seminario su questo ultimo fine settimana,
e così avrei sicuramente verificare che se si ha intenzione di fare alcune cose di fantasia con i CSS.
CSS3 è in realtà l'ultima versione di CSS, e può fare ogni sorta di cose veramente belle.
Si può fare sfumature, si può avere piacevoli, angoli arrotondati, si può fare ogni genere di cose
per rendere il vostro sito un aspetto più moderno e fantasia.
>> Il prossimo strumento è JavaScript e jQuery che Ben ha parlato un po 'su,
ma mi prendo un po 'più in.
JavaScript, come hai lavorato con un po ', o almeno visto in conferenza,
è una specie di un modo di fare dinamicamente roba in HTML.
HTML, come sapete, è statico, quindi una volta che avete HTML non è possibile modificarlo.
Ma JavaScript, per certi versi, è un modo per essere in grado di modificare HTML.
Così si può farlo, e questo è grande, ma JavaScript è davvero un dolore con cui lavorare.
E 'così a lungo e ottuso e per fare anche le cose più semplici
richiede un sacco di righe di JavaScript.
Quindi, jQuery è fondamentalmente una libreria per JavaScript che semplifica tutto questo.
Si dice, va bene, se si vuole avere una scatola quadrata provenire da sinistra
e dissolvenza nella pagina in modo che sia in mezzo, in JavaScript che avrebbe preso -
Non lo so, un centinaio di linee a fare, e sarebbe un dolore,
e vieni fuori odiare tutto ciò che riguarda la programmazione web.
JQuery è fondamentalmente hanno l'elemento-dot-fade-in, o qualcosa del genere.
Funzioni Così, molto, molto semplici che ti permetteranno di fare tutti i tipi di animazioni fresco
e quel genere di cose.
L'altra cosa che questi due sono veramente buone per sta solo facendo le cose dinamici
con il sito.
Quindi, piuttosto che avere la vostra pagina HTML - che mostra alcuni dati, ma in realtà non
fare qualsiasi cosa - JavaScript e jQuery ti consente di avere pulsanti che è possibile fare clic su,
ed è possibile trascinare elementi e re-ordinarli e ordinarli, ed avere nuovi elementi
aggiunti o rimossi. È possibile aggiungere, cancellare, quel genere di cose.
Quindi, jQuery fa un sacco di cose interessanti.
E Vipul è in realtà dando un seminario su di esso oggi, credo, a 5 ore,
quindi se si può restare per così tanto tempo, che sarebbe - 5 o 4?
Quattro. Scusi. In realtà è proprio dopo questo, quindi mi sento di raccomandare
attaccare in giro per esso, se potete.
JQuery è super, super utile, e sarete in grado di fare un sacco di cose veramente belle con esso
per praticamente qualsiasi progetto di sviluppo web.
>> Ora ho intenzione di entrare in una specie di distinzione.
Ho parlato fondamentalmente di interfaccia utente.
L'interfaccia utente è solo il design del sito.
Ma c'è una sorta di un altro concetto che è l'esperienza degli utenti.
I due sono molto diversi.
Interface è sicuramente parte dell'esperienza.
In altre parole, quando si va a un sito, si guarda l'interfaccia.
Ecco parte di quanto si verifica il sito.
Ma l'esperienza utente è più di questo.
L'esperienza dell'utente è su ciò che l'impressione che l'utente ottiene dal tuo sito è.
Così, ovviamente, l'interfaccia è una parte di questo.
Ed è sicuramente una parte necessaria, ma non è sufficiente.
In altre parole, se si dispone di una gradevole interfaccia, ed è bella e colorata e tutto il resto,
che è grande, ma se l'utente va al vostro sito, vede un layout abbastanza ed è confuso da
tutto ciò, non ha idea di come fare nulla, allora ovviamente hai fatto davvero un
sito poveri.
Questo è il genere di cui l'esperienza utente entra in gioco
Ho intenzione di parlare un po 'di progettazione UX - UX è l'abbreviazione di user experience -
e il tipo di come si può fare in modo di avere una buona esperienza utente.
Il primo punto è che si può progettare un sito web in cui un utente può fare tutto ciò che
quell'utente eventualmente vuole.
Ma se l'utente non riesce a capire come fare queste cose -
in altre parole, se l'utente non dispone di una buona idea quando vanno al tuo sito di,
"Oh, se voglio aggiornare il mio profilo, quindi clicco su questo pulsante, o se voglio postare su
muro di qualcuno, poi vado al loro muro e clicca su una piccola scatola. "
Se l'utente non sa che, allora effettivamente non hai effettivamente
implementato tale funzionalità corretta.
Parte di attuazione di una funzionalità è che gli utenti sono effettivamente in grado di usarlo.
E potrebbe essere frustrante - si potrebbe fare un sito, e può fare tutti i tipi di
cose meravigliose, ma poi avrete la gente prova e dicono: "Non si può fare questo.
Perché non può fare questo? "E potrai dire di nuovo loro,
«Be ', si può. Basta andare nel menu a discesa settimo su questo oscuro
La pagina che si trova solo da un link in basso a destra "o qualcosa del genere.
Ovviamente, non si vuole che.
Si vuole che sia chiaro agli utenti che cosa si dovrebbe fare,
e dovrebbe essere semplice ed intuitivo per loro.
>> Un'altra cosa che si vuole provare a fare è, se qualcuno sta per andare al tuo sito
e 9 volte su 10 fanno azione A, e 1 su 10 volte fanno azione B,
probabilmente si vuole mettere a fuoco la loro esperienza sull'azione A.
In altre parole, si vuole fare molto, molto chiaro come fare A.
A dovrebbero essere-e-anteriore centrale - andare sul sito, vede, oh, è proprio lì.
Mentre B, ovviamente, si vuole essere chiari, ma si può lasciare un po 'di più
in background.
David dà un buon esempio di questo in conferenza,
che è il sistema Boston T.
Quando si va al Boston T e si desidera acquistare un biglietto,
dovete ottenere in 5 menu prima di poter effettivamente acquistare un biglietto
per 2 dollari, 2,50 dollari di valore, che è quanto ci vuole per guidare la metropolitana
in una direzione.
Questo è un problema perché la maggior parte delle persone che stanno cavalcando la metropolitana
probabilmente vogliono solo andare in un posto, acquistare il biglietto, prendere subito.
Non ha senso che devono passare attraverso un sacco di diversi menu
per arrivarci.
Una migliore esperienza utente sarebbe un pulsante rapido sulla prima pagina
che dice solo, 'comprare un biglietto di sola andata,' e che metterebbe in tutti gli standard
valori predefiniti, e poi se qualcuno vuole acquistare un biglietto diverso da quello,
ancora, ovviamente, hanno la possibilità di, ma che hai ottimizzati per
caso di uso comune che è veramente importante.
È possibile vedere esempi di questo su Facebook, giusto?
Se andate su Facebook e vuoi pubblicare uno stato,
è proprio in cima che è quello che spesso vuole fare.
Appena si entra nella pagina, si possono fare le cose più comuni che
si vuole fare.
Se volete fare le cose un po 'più complicate come,
dico che voglio andare a muro del mio amico e postare una foto su di esso -
che io voglio fare spesso, ma non così spesso come postare aggiornamenti di stato -
quindi in questo caso, digito il loro nome nella casella in alto, fare clic sul loro profilo,
e poi, ancora, è proprio in cima una volta ho ricevuto al proprio profilo.
Ancora una volta, ho ottimizzato in priorità per i casi più comuni di uso.
>> Un'altra cosa importante è che spesso la gente sorta di cercare di aggirare questa
dicendo: va bene, così ho fatto il sito e le persone stanno trovando confusione,
e questo è un problema, giusto?
Ovviamente, io non voglio che la gente a essere confusi dal contenuto del mio sito.
Ma il modo per risolvere ciò che non è di avere qualcosa di pop up dicendo:
hey, ho intenzione di insegnare come utilizzare questo sito.
Fase 1 - fare clic su questo pulsante. Fase 2 - andate qui.
Certo, questo è un modo intorno ad esso - è un modo che si può dire alla gente cosa fare, ma è
in realtà non è il modo ottimale.
Se vado a un sito web e improvvisamente ho bombardato con questo tutorial che mi sta dicendo
cosa fare e dove andare e tutto questo, che non è divertente per me.
Non è una buona esperienza per me.
E 'una specie di dolore. Voglio iniziare facendo solo cose.
La gente sta andando a chiudere fuori dalla loro finestra di dialogo,
o uscire dal tutorial, non so cosa fare, e poi si lamentano perché
non hai detto loro cosa fare.
Il modo per risolvere questo problema non è quello di dare alcun tipo di tutorial o indicazioni -
qualcosa di simile.
Per quanto lo si può evitare, davvero si vuole mostrare all'utente cosa fare
solo dalla natura come il sito è strutturato.
In altre parole, se vado a Facebook senza effettuare il login,
la prima cosa che vedo nella pagina principale -
si tratta di una piccola scatola di login. Quindi, duh. Devo accedere E 'proprio lì.
Considerando che, se sono andato a Facebook e ho dovuto scegliere un po 'di link in fondo
che ha detto 'login' e il resto della pagina era solo una specie di foto o qualcosa del genere,
Io non so davvero cosa fare, giusto? Sarei confuso.
Quindi, potrebbe dirmi di andare lì e fare clic sul pulsante per accedere,
o il log in tasto potrebbe essere proprio in cima dove sto andando a vederlo.
Vuoi essere sempre mostrando all'utente cosa fare,
e che dovrebbe essere insita nella pagina stessa.
>> Quando stai pensando di disegni e beffardo su diversi modi di
esprimendo il vostro sito, si vuole veramente pensare a ciò che gli utenti stanno per
essere facendo e come si può mostrare loro cosa fare.
Un'ultima cosa è il test è molto, molto importante.
E 'bello avere qualcuno - avere un amico, avere qualcuno che non conosci nemmeno -
che non ha mai visto il sito prima di utilizzare il sito.
Perché hai lavorato sul sito per ore, sei stato a fissarlo,
e si sa esattamente cosa fare in modo, ovviamente, si sta andando ad essere testare la
cose che hai lavorato e che sapete di lavoro.
Ma se qualcuno arriva e utilizza il sito che non ha mai usato prima,
questa è una esperienza unica, perché c'è qualcuno che non ha alcuna conoscenza preliminare
del sito in corso in esso, in modo che sta andando ad avere efficacia alcuna idea di cosa fare
o che tipo di casi d'uso sono presenti per loro.
E 'fantastico. Quello è unico perché sono essenzialmente una persona con uno spazio vuoto per una mente.
Si può dire se qualcosa è confusa o poco chiare.
Essi possono dare un'idea di esattamente ciò che l'esperienza utente del sito è.
Può essere molto difficile da dire che da soli, quindi sicuramente vorrei incoraggiarvi
come si sta sviluppando i vostri progetti - se si sta facendo progetti web-based -
per ottenere la gente tramite il sito il più presto avete qualche tipo di demo funzionale.
>> Ora ho intenzione di parlare un po 'su come gestire un progetto di sviluppo web.
Siamo andati su come si può fare il lato tecnico di back-end,
come si può progettare un sito veramente buono,
e questo è grande se si sta lavorando da soli, ma -
anche se si sta lavorando da soli e soprattutto se si sta lavorando su una squadra,
gestione del progetto diventa un grosso problema.
Avete sentito parlare di una sorta di gestione del progetto in forme diverse dal
scuola elementare quando ti hanno detto lavoro di gruppo.
Bisogna collaborare, comunicare, tutto questo.
Ciò vale ancora tutti qui, ma ci sono alcune circostanze unici con
informatica che si vuole essere consapevoli, e si vuole fare in modo di gestire bene.
Parlerò prima un po 'la squadra che sarete dentro
E 'molto importante scegliere la giusta dimensione di un team di lavorare su,
e nel tuo progetto finale penso che tu abbia la possibilità di scegliere
da 1 a 4 persone se sono corrette.
Si vuole fare in modo che non sei solo di scegliere il numero di persone
che si desidera utilizzare perché sono tuoi amici.
Si desidera scegliere una squadra che è una buona dimensione e che otterrà il lavoro fatto.
C'è un largo commercio di avere più persone rispetto a meno persone.
Se si dispone di più persone, ovviamente più lavoro può essere svolto
perché hai un sacco di gente, un sacco di codice, un sacco di idee,
e questo è tutto fantastico.
Ma richiede anche molto più gestione e molto più comunicazione.
In altre parole, se si dispone di 4 persone che lavorano sullo stesso progetto
e sono tutti modificando lo stesso codice, più o meno tutti i tipi di necessità di sapere
quello che sta succedendo in modo che richiede -
se si aggiunge qualche nuova funzione è una sorta di bisogno di dire alla gente - sto aggiungendo questo,
Sto cambiando questo in questo modo - soprattutto se si entra in cose veramente profondo
come i modelli ei controller che sono in realtà andando a influenzare come funziona il sito.
Tutta la squadra deve essere consapevole di esso,
quindi è necessario assicurarsi che non stai scegliendo troppo grande una squadra che sta andando essere duro
per rendere tale comunicazione.
Anche voi non volete scegliere una squadra abbastanza piccolo che non stai andando a
essere in grado di comunicare perché è solo per te.
>> Un'altra cosa da considerare è l'equilibrio di cui le competenze delle persone sono.
E 'fantastico se siete tutti veramente buoni programmatori.
Ma se siete tutte le persone di back-end, allora il vostro sito non è andare a guardare molto bene
perché avete questa grande banca dati, e lo fa query di ricerca super-veloce -
che è grande - ma quando si va ad esso, è come un sito del 1990 con il rosso e blu
ovunque, e questo non è buono.
Si noti che Ben e io lavorare come una squadra sono molto belle perché sono una sorta di più
nel front-end, abbiamo entrambi interagiamo nel centro-end, e Ben è veramente buona con roba di back-end,
così che funziona davvero bene, perché siamo in grado di progettare qualsiasi sito e fondamentalmente i fori
in quel sito che devono essere riempiti può essere riempito da uno di noi, o forse entrambe le cose.
Si vuole fare in modo che non ci siano buchi nel vostro team.
Va bene se c'è un po 'di sovrapposizione.
In altre parole, se avete due persone che sono entrambi buoni con back-end,
che può essere buono come bene perché possono aiutarsi a vicenda con i problemi
che stanno avendo.
Può essere un problema se hai solo 1 persona che è responsabile di una certa cosa
e si imbattono in un problema, quindi non vuole avere un po 'di sovrapposizione
ma si vuole soprattutto fare in modo che tutti i possibili fori sono riempiti.
>> L'ultima cosa - e questo dovrebbe essere ovvio, ma non lo è spesso.
Si vuole veramente essere divertirsi.
Il punto di questo progetto finale CS50 e spesso il punto di sviluppo web in generale
non è quello di fare solo un lavoro perché ha bisogno di fare.
Si vuole veramente essere divertirsi, e si vuole essere fare qualcosa
che si sta motivare a lavorare su di esso.
Se quello che stai facendo è un dolore di sedersi e lavorare,
allora non stai scegliendo il progetto giusto.
Si desidera scegliere qualcosa che trovi interessante,
davvero si vuole vedere il risultato, sei eccitato quando si ottiene una nuova idea su
qualcosa che si potrebbe fare - quindi ci sono tutti i tipi di progetti lì che sono sicuro
si può trovare - ognuno ha qualcosa che sarebbe davvero li incuriosire
se stanno facendo un progetto web-based.
Io lo ripeto adesso.
Se il progetto sembra un dolore e non si vuole lavorare su di essa,
scegliere un altro progetto. Scegli qualcosa che ti ispira davvero.
>> Ben detto questo concetto di iterazione un po ', e voglio andare su di esso un po'.
E 'molto importante lavorare a scatti in cui si ottengono qualcosa di funzionale.
Esso può essere grande se si dispone di questo piano per un sito web che sta per fare A, B, e C,
e alla fine arriveremo.
Ma sei bloccato in questa fase in cui si sta lavorando su di esso e lavorare su di esso,
ma niente è sempre fatto. Non hai nulla da vedere e una cosa tangibile, funzionale.
Che cosa si vuole veramente fare quanto sembra una specie di dolore a volte
lavorare su qualcosa e poi una sorta di coronare il tutto in modo che sia almeno una stalla, in esecuzione
versione anche se non ha tutte le caratteristiche desiderate.
E forse ci sono alcune caratteristiche che davvero si vuole aggiungere, ma proprio non può
perché si vuole ottenere questo sito ad un punto funzionale.
E così si vuole avere genere di tutto il processo di sviluppo sembra quella.
Si vuole iniziare da qualche parte funzionale - o essenzialmente cominciare con niente -
ma si vuole arrivare da qualche parte molto essenziale e funzionale.
E poi ancora, fare una sorta di salto e ottenere di nuovo da qualche parte funzionale.
Potrai lentamente costruire, e potrebbe andare un po 'più lento di quanto sarebbe altrimenti,
ma nel lungo periodo se si è costantemente bloccato in questa fase centrale terra dove si
non realtà non hanno nulla a lavorare, può essere davvero un grande frustrazione
a lavorare sul progetto, perché sei sempre così vicino a farlo funzionare,
e non è mai effettivamente lavorando.
Volete lavorare in questi scatti funzionali,
e anche voi volete fare qualche riflessione dopo ciascuno di essi.
In altre parole, una volta che sei in un punto dove il sito è ora lavorando -
non ha tutto quello che vuoi ma fa alcune cose -
si vuole pensare, va bene, è questo sito realizzare l'obiettivo che ho deciso di fare?
In altre parole, se il sito sta per fare X, è quello che ho lavorare in direzione X?
Sono tutte le funzionalità che volevo lì?
E inoltre, è vero che ha lo scopo generale che voglio?
Se stai trovando che il sito sta iniziando a virare in una direzione diversa
o forse le cose solo un po 'non sono lavorando fuori, potrebbe essere il momento di cambiare marcia un po'.
In altre parole, vale la pena considerare - vale la pena di buttare fuori le idee, se necessario,
e considerando sto davvero lavorando verso quello che voglio essere.
>> Credo che il mio punto successivo. Non abbiate paura di abbandonare le idee.
Solo perché hai speso un sacco di ore di lavoro su una funzione
e finalmente farlo funzionare ma in realtà non sta andando così bene -
come non è utile o che gli utenti stanno avendo problemi ad usarlo - quel genere di cose -
non abbiate paura di buttare via.
Fa schifo che hai speso un sacco di tempo lavorando su di esso,
ma alla fine non si vuole un sito che tipo di messo insieme da questi pezzi che
tipo di lavoro, ma non sono così ben servita.
Inoltre, non abbiate paura di abbracciare nuove idee.
Se qualcuno arriva e dice, ehi, quel sito sembra davvero cool, ma
non sarebbe nemmeno bello se anche ha fatto questo?
Solo perché è qualcosa che non hai intenzione e qualcosa che non è nel vostro
specifiche, qualcosa che non avete proposto di fare,
non abbiate paura di prendere su e poi lavorare con esso.
Poiché spesso le idee che si esegue con tutto il corso dello sviluppo
finiscono per essere le caratteristiche davvero cool del sito.
>> Ho detto prima. Io dirò di nuovo.
Tester sono super, super utile.
Cercare di convincere la gente che non hanno mai visto il sito prima di accedere e vedere cosa sta succedendo
perché possono verificare non solo l'utilità del sito e l'esperienza dell'utente,
ma possono anche testare la funzionalità in modi che non si può.
Se fate qualche caratteristica che fa una certa cosa
e sai che sta per fare la stessa cosa correttamente ogni singola volta, che è grande.
Ma spesso può essere difficile da spiegare casi angolo dove A potrebbe utente
digitare qualcosa che non ti aspettavi - proprio perché definito
le caratteristiche te.
Quindi, per fare venire qualcuno da chi non ha idea di come utilizzare il sito
e di rompere solo che in qualsiasi modo che possono fare è molto utile perché si
avere un'idea da una prospettiva completamente diversa di ciò che il tuo sito sta lavorando
e ciò che deve riparare.
>> Infine, ho intenzione di parlare di alcune buone pratiche generali,
e hai visto un sacco di questi in CS50, ma anche molto, molto applicato in un ambiente di progetto.
Uno è commenti. Commentare sempre il codice, soprattutto se stai lavorando su una grande squadra.
Si può essere così fastidioso avere solo un gigantesco blocco di codice che qualcuno è scritto
e forse funziona, forse non lo fa, ma non avete idea di ciò che fa,
modo da non avere idea se sia utile o meno, o se debba esserci o no,
e se si sta lavorando su qualcosa d'altro è anche possibile che si sta lavorando
la stessa cosa, quindi basta essere molto, molto attenti a essere rispettosi dei vostri coetanei
e scrivere il codice che è ben documentata.
Non dovete andare fino al punto di fare il tutto dove piace se si incrementa
un contatore ha un commento che dice, sto aggiungendo 1 a questo contatore.
Esso non deve essere così dettagliato, ma per qualsiasi funzione che si sta mai scrivere
si dovrebbe avere qualche documentazione di ciò che funzione fa esattamente,
quali sono i suoi ingressi sono, e che cosa dovrebbero restituire.
In questo modo è possibile utilizzare altri componenti del sito della gente
e si può lavorare per costruire qualcosa di grande.
>> Un'altra cosa importante è che si vuole fare regolari clean-up.
Codice ottiene disordinato. Non sento male se il codice è solo totalmente illeggibile, e un pasticcio gigante.
Questo accade nello sviluppo web sempre.
Stai aggiunta di nuove funzionalità, eliminando quelli vecchi. Roba sarà lì che non dovrebbe essere.
Va bene, ma si vuole fare in modo di affrontare questa regolarità.
Tu non vuoi lasciarlo costruire fino al punto in cui non riesci a trovare nulla
nel codice, e non avete idea di che cosa fa nulla.
Questo è il caso di HTML.
A volte vi ritroverete con oggetti che non contengono nulla,
e ti vuole sbarazzarsi di quelli.
In CSS, è possibile riferirsi a elementi che non sono più lì,
così si vuole sbarazzarsi di quel codice.
In JavaScript, potreste aver tolto qualcosa dal HTML.
Quindi, si vuole fare in modo che si sta sempre pulendo, facendo cose abbastanza
quanto più possibile su base regolare.
>> Un'altra cosa molto utile che non credo che si delinea molto in CS50
ma vale la pena entrare in è controllo di versione.
L'idea del controllo di versione è quando si sta praticamente tenendo traccia di tutti i progressi
hai fatto verso il vostro sito e, se in qualsiasi momento ti rendi conto, oh, questo stava lavorando
qualche tempo fa, ma non funziona più, si può tornare a versioni precedenti
e vedere cosa è cambiato da allora e quel genere di cose.
Il modo principale per farlo è con Git e Git è tutto questo tipo di sistema che
Credo che Tommy MacWilliam ha tenuto un seminario su l'anno scorso.
Se si va in seminari CS50 per il 2011, si può vedere il suo seminario su questo.
L'idea di Git è, fondamentalmente, che a intervalli regolari si sta facendo questi impegni
che sono modi di dire il sito è in una versione abbastanza stabile in questo momento così
Sto imballaggio su e inviarlo via a un server, e quindi si può andare a quel server
e guardare a tutte le versioni precedenti del codice e vedere come è progredito
e tutto quel genere di roba buona.
Quindi, questo è fondamentalmente.
Per quanto riguarda lo sviluppo del web, siamo felici di restare e rispondere a qualsiasi
domande per quanto riguarda la nostra presentazione.
Tutto qui. Grazie. >> [Ben] Grazie.
[Applausi]
>> [Billy] Staff, qualcuno ha domande su cose che abbiamo trattato
o le cose che non abbiamo coperto che speravano ci piacerebbe coprire?
Saremmo lieti di rispondere a quelle. Chiunque?
[Membro del pubblico] Quali sono i pro ei contro di utilizzare Ruby o con Python?
[Ben] La domanda era: quali sono i pro ei contro di utilizzare Ruby o Python
invece di come PHP.
I pro sono che Ruby e Python sono linguaggi molto meglio di PHP.
Almeno a mio parere, e penso che in un sacco di opinioni di altre persone pure.
Sono stati progettati più per fare cose complesse,
e meno per whacking insieme le pagine web molto rapidamente con
un po 'di contenuti dinamici.
I contro sono che c'è un po 'di - c'è più di una curva di apprendimento
per farli impostare.
Cioè, come in PHP, si può solo avere un file HTML e scrivere di meno-che,
punto interrogativo, e poi si scrive del codice, e poi si scrive il punto interrogativo,
di maggiore, e quindi il gioco è fatto.
In altri linguaggi come Ruby o Python,
si deve passare attraverso un po 'più di lavoro per ottenere il sito marcia iniziale.
C'è anche - almeno ha usato per essere il caso - che non c'è più documentazione
disponibili per PHP solo perché ci sono più persone che utilizzano esso.
Penso che non è tanto di più un problema.
C'è sicuramente molto buona documentazione per cose come Ruby on Rails
o Django per Python è l'equivalente.
PHP è quello che tutti si utilizza da anni, e si sa come funziona.
Ruby e Python sono un po 'meno maturo.
>> [Membro del pubblico] Se si dovesse scegliere tra uno di loro di imparare o pick up,
che preferireste?
Onestamente, penso che dipende dalla persona.
Mi dispiace. La domanda era quale sceglieresti per qualcuno per imparare?
Trovo Python il più bello personalmente.
Ci sono un sacco di persone che - ho fatto il mio primo progetto dev web in Python e Django.
Ci sono un sacco di persone che amano Ruby on Rails anche.
Probabilmente più persone che conoscono Ruby on Rails.
Onestamente, vorrei solo andare con qualsiasi cosa le persone intorno a voi conoscono
in modo da avere le persone di porre domande.
>> La domanda era - su server condivisi è un po 'difficile da lavorare su Python?
Dipende dal vostro hosting.
Ci sono un certo numero di host web che pubblicheremo Python roba.
WebFaction lo fa, giusto?
WebFaction è uno che Billy e ho usato per alcuni progetti.
Sono davvero grande. Essi sostengono la maggior parte delle lingue.
Ma è vero che PHP è molto più ampiamente supportato.
Quindi, se sei bloccato su un host web che fa solo PHP, che è un buon motivo per utilizzare PHP.
>> [Membro del pubblico] Ho appena ricevuto in imparare a interrogare alcuni database,
e so che il mio SQL è dappertutto, ma di recente ho preso esposto a -
e lei ha fuori. Vedete JSON e banche dati espandibili.
My SQL è ancora dappertutto. Come si fa a vedere che succede?
È lì sarà una tendenza crescente per più espandibile (non udibile)?
La domanda era - non penso che ci sara 'una tendenza database non SQL.
Ad esempio, come MongoDB. Penso che sia sicuramente vero.
Il mio consiglio era per lo più mySQL correlati qui solo perché mySQL è
standard del settore.
Personalmente, preferisco di gran lunga i database che non hanno schemos come MongoDB
dove non si ha il problema della, oh, ho bisogno di aggiungere un'altra colonna.
Guai a me, come qualunque cosa faccio?
E 'molto difficile da fare che in mySQL, ma quando si ha qualcosa come Mongo
è molto più bello.
L'altra cosa bella di Mongo è che i record sono in realtà oggetti JavaScript.
Non c'è una sorta di passaggio di conversione in cui è necessario prendere queste righe di database
e li trasformano in un oggetto JavaScript e poi inviarli in rete.
Penso che cose del genere sta per essere molto, molto utile per un rapido sviluppo web in futuro.
>> [Billy] Qualcosa vorrei aggiungere che è solo un punto generale è che
non si sentono come dovreste aver imparato tutte le lingue che abbiamo discusso
dal nostro seminario.
Ovviamente il punto è quello di dare un'idea di cosa c'è là fuori,
e se siete incuriositi da nessuna delle cose che abbiamo detto è possibile su Google
e leggere su di loro.
E come ho già detto, ci sono un paio di seminari che si occupano proprio di queste cose.
Ci sono ancora più di seminari che non ho menzionato che, probabilmente, entrare in
questa roba pure.
L'idea è che se si vuole lavorare su qualcosa, qui sono gli strumenti a vostra disposizione.
Non si sentono sopraffatti se non sei veramente sicuro di quello che questi strumenti fanno esattamente,
ma sanno che sono là fuori e che si può fare largo uso di essi
da Google.
>> [Membro del pubblico] Che tipo di cose hai bisogno di fare per rendere sicuro il vostro sito
guarda bene sui dispositivi mobili?
[Billy] I dispositivi mobili sono un po 'difficile.
Ci sono due modi per avvicinarsi.
Il primo modo è che in realtà hanno un sito web mobile.
In altre parole, si esegue una qualche sorta di rilevamento all'inizio
quando il browser sta facendo la richiesta al tuo sito web che sia, dice
restituire questo punto di vista - che sarà la visualizzazione per desktop o laptop browser -
e questo altro punto di vista per i dispositivi mobili.
Questo è un luogo dove panorami sono veramente bello dal fatto che si può tranquillamente swap
due fuori e avere un'interfaccia che funziona davvero bene su dispositivi mobili
e hanno uno completamente diverso che funziona bene sui dispositivi del browser.
Il problema è che ci vuole molto tempo perché significa codifica
un'interfaccia completamente diverso.
L'altro modo che si può fare è -
un sacco di telefoni moderni mostrerà siti web e cercare di renderli come un browser sarebbe,
e fanno del loro meglio.
È possibile tipo di cercare di rimanere in luce la quantità di jQuery JavaScript stai usando
che tende ad essere dove le cose possono andare male un po '.
Questa è una sorta di modo che si dovrebbe usare se non si ha molto tempo.
Se si ha il tempo per lavorare su un interfaccia mobile, che è ovviamente la soluzione migliore.
>> Penso che in generale per i progetti CS50, si sta andando a voler scegliere uno o l'altro.
In altre parole, si vuole fare un app mobile o se si vuole fare un sito web desktop.
E quel tipo di determina dove si va con quello.
Ma se si desidera espandere fuori più tardi, probabilmente la soluzione migliore è
per fare un'altra interfaccia per l'altro.
Ho un po 'di esperienza nello sviluppo di siti basati su WordPress.
Ho ospitato un sito personale su WordPress per un po '.
Questi tipi di strutture possono essere belle cose altrettanto molto semplici.
Spesso ti basta esegue in un sacco di problemi Personalizzabilità però.
Avrai voglia di avere qualcosa di guardare un certo modo o in un certo modo
e basta non è possibile perché è hard-wired nel sistema che
questo è come devi fare le cose che possono essere un po 'un problema.
Da allora ho sorta di stato più propenso a lavorare con i siti da zero.
Per cose come i database del blog e quel genere di cose non è poi così difficile costruire un quadro.
Se sei veramente allungato per tempo, potete naturalmente usare qualcosa come WordPress
o cose del genere per un blog.
I tipi di cose che i blog negozio e fare non sono davvero abbastanza difficile che
se si sta eseguendo in nessuna di queste genere di cose, probabilmente siete meglio solo per
fare una versione in-house.
>> Penso che su di esso, quindi grazie ancora per essere venuti.
Abbiamo apprezzato molto parlare con voi ragazzi e speriamo che hai imparato alcune cose.
[Ben] Siamo felici di parlare - dobbiamo andare, ma siamo felici di parlare di più al di fuori
se hai un'altra domanda. Grazie ancora. [Applausi]
[CS50.TV]