[Powered by Google Translate] [Seminar] [Dezvoltare Web: de la idee la implementare]
[Ben Kuhn] [Billy Janitsch] [Universitatea Harvard]
[Acest lucru este CS50] [CS50.TV]
[Billy] Bună, eu sunt Billy și acest lucru este Ben. >> [Ben] Bună.
Vom vorbi despre dezvoltare web ziua de azi.
[Webdev] [Billy Janitsch și Ben Kuhn]
Un pic despre noi mai întâi.
Ben este un fel de tip back-end. El face lucrurile să meargă.
Și apoi mă duc în și să le facă destul.
Sunt în mare parte implicat cu mai mult de front-end design layout fel de lucruri,
Ben și, pe de altă parte, știe ce are de a face acest lucru el lucrează la chestii de back-end.
Împreună am făcut câteva lucruri.
De exemplu, anul trecut am lucrat la Gimblium care este un studio de dezvoltare de jocuri on-line.
Asta a fost proiectul nostru final pentru clasa,
și de atunci ne-am făcut la Harvard Class
care este un cadru on-line pentru navigare și cursuri de cumpărături la Harvard.
>> Vom începe cu această idee pentru site-ul nostru.
Vom face Facebook, dar pentru pisici.
Înainte de a face de fapt acest site,
nu fac acest site pentru că nu e bine, dar o vom folosi ca un cadru
și du-te prin procesul de modul în care vom lua această idee
și-l transforma într-un site web real, putem folosi.
Vom începe prin spargerea site-ul în jos.
Ca și cum ați făcut în CS50,
pe care doriți să se gândească la ceea ce sunt componentele reale care intra in acest site.
Practic se transforma de la o idee, care este doar un fel de concept abstract
într-un lucru real, tangibil pe care le-ar putea face.
Vom începe prin a cere câteva întrebări.
Ce este acest site? De ce am face?
Ce este de gând să fie utilizate pentru? Ca un fel de lucru.
În cazul de Facebook Cat,
ne-o dorim de fapt un site web care permite pisicile rețea socială cu fiecare alte.
Ideea fiind că acestea pot posta pe pereții reciproc,
ei pot face comentarii, chestii din astea.
Și asta e în cazul în care vom intra în componentele funcționale.
Acum avem acest tip de cadru de - avem profiluri de utilizator,
avem comentarii, și putem posta.
Poate că într-o zi vom influente place și acest tip de lucru.
Și ne-am cam vrea să acorde prioritate aceste caracteristici merg inch
Vrem sa spunem ca, bine, e foarte important ca toată lumea are un profil
și că oricine poate posta pe pereții reciproc.
Secundar la care, comentarii ar fi frumos.
Poate mai târziu ne vom influent place.
Deci, doriți să aveți o idee de ceea ce este fundamental pentru proiectul dvs.
și ceea ce este un fel de o caracteristică mai generală, care ar putea fi aplicată mai târziu.
Vrei să fel de avea o anumită listă în minte,
dar proiectul care începe cu nu va fi proiectul pe care ați terminat cu.
Cu alte cuvinte, lucrurile se vor schimba în timp ce în curs de dezvoltare site-ul,
și doriți să lase loc pentru asta.
Voi preda Ben cine va vorbi un pic despre structura.
>> [Ben] am de gând să fie vorba despre partea mai tehnica de dezvoltare web.
Să trecem peste unele elementele de bază primul.
Când faci o aplicatie web,
diviziunea principală pe care ai de gând să trebuie să aibă este
ai de gând să aibă unele lucruri se întâmplă în partea de client -
că este, cod care sunteți browser duce de la site-ul
și JavaScript, HTML, CSS chestii.
Asta e tot pe partea de client.
Ai de gând să aibă alt cod care ruleaza pe partea de server
care ține evidența tuturor datelor pe care oamenii trimite la tine,
decide care să dea ceea ce, chestii de genul asta.
Aceasta este doar o terminologie ca voi sunt familiarizați cu ceea ce vorbim.
Dincolo de faptul că divizia e bine să se gândească de aplicația web din punct de vedere
câteva componente distincte.
Când faci dezvoltare web
unul din lucrurile pe care ar trebui să fie întotdeauna încercarea de a face este de a reduce complexitatea.
Mai complex Codul dvs. este mai mult șansa de acolo este de a face bug-uri,
cu atat mai greu este de a schimba mai târziu.
Deci, dacă vă puteți rupe aplicația în unele zone funcționale distincte
care va - și vă poate reduce fel de suma de comunicare cross-zona -
care vă va ajuta foarte mult pe termen lung în ceea ce privește reducerea bug-uri.
>> Pentru a fi din beton, de obicei, oamenii împartă o aplicatie web în -
acestea sunt un fel de cuvinte buzz acum, dar ele sunt încă utile.
Este posibil să fi auzit de oameni vorbesc despre modele, vederi, și controlere.
Modelele sunt datele reale care aplicația este de gând să se ocupe de.
De exemplu, în Cat dvs. Facebook, modelul ar fi -
ai avea un model pentru posturi, cum ar fi, și un model pentru profiluri de utilizator, chestii de genul asta.
Opiniile dumneavoastră sunt modul în care prezentăm ca datele pentru utilizatori.
S-ar putea avea o vedere de a privi la un singur post și toate comentariile
și un punct de vedere diferit de perete, care are o listă a tuturor posturilor
care sunt îndreptate spre tine, și un punct de vedere diferit pentru feed-ul dvs. de știri - chestii de genul asta.
În cele din urmă, aveți controlorii care sunt, practic, atunci când oamenii vă trimită mesaje
și voi face modificari la sistemul de back-end,
să incrementați o grămadă de contoare, și orice.
Acestea sunt controlere dumneavoastră.
>> Am de gând să fie vorba despre cea mai mare parte de modele.
Opinii nu sunt punct de vedere tehnic atât de dificil și problema este mai mult cu proiectarea ei
Controlere de gând să fie specific pentru orice ai proiectare.
Dar există unele tehnici destul de generale care le puteți utiliza
pentru a face modelul mai frumos și mai ușor de a lucra cu, care cred ca sunt de foarte mare ajutor.
Aceasta este cea mai mare parte va fi despre cum să se ocupe cu datele dvs. de Web Apps într-un mod frumos.
Principalele probleme cu modele
sunt că trăiesc pe client și server și va trebui să dau seama
a) cum de a le obține - toate cele relevante - de la server la client,
și b) cum să le păstrați în sincronizare.
Utilizatorii vor dori să facă unele actualizări.
Ei au de gând să vrea să facă posturi noi.
Ei au de gând să vrea să plac lucrurile și lucruri dacă aveți place.
Acestea sunt principalele provocări tehnice de a face cu modele.
Primul lucru pe care ai de gând să vrea să te întrebi este
ce fel de date merge în acest model și ce fel de întrebări vom vrei să faci -
care este, cum avem de gând să se uite la modelele?
Pentru dvs. Cat Facebook exemplu,
Postarea dvs. va avea un autor asociate cu ea,
un text mesaj perete, și un destinatar de la postul de perete.
Și atunci este posibil să doriți să interogați că într-o grămadă de moduri diferite.
Ce-ar vrea să se uite la ea prin care a scris mesaj care,
prin care a primit ceea ce a posta, poate de data la care au fost postate.
Dar dacă ai de gând să o facă prin data, atunci trebuie să adăugați un alt domeniu pentru a posta dvs.
de când a fost de fapt postat.
Acești doi factori - ce date doriți să le utilizați și modul în care doriți să-l vizualizați -
trebuie să vă gândiți în primul rând ei, deoarece ei depind unele de altele,
și că va fi mult mai dificil pentru a le adăuga mai târziu.
>> Există câteva alte considerații.
Când te gandesti cum te descurci cu modele de pe serverul
ceea ce vrei să se uite la -
tu de fapt vrei sa faci server cât mai simplu posibil.
Făcând chestii pe partea de client este, în general, mult mai repede daca se poate face doar pe client
fără a face nici un fel de cerere de rețea.
Ideea este de a face cât mai multe dintre interogările ca tine poate pe client.
Singura problemă cu care
este că, dacă solicita toate datele la început
apoi că va lua o lungă perioadă de timp să se încarce.
Deci, ideea este de a găsi un mediu fericit între a avea suficiente date cu privire la client
pe care le puteți face cele mai multe din munca ta acolo, dar nu numai preluarea totul dintr-o dată
astfel încât să obțineți de încărcare de ori într-adevăr lent la început.
De exemplu, pentru datele dvs. de pisică
, probabil, ce-ar vrea să-i aducă o grămadă de posturi de perete recente.
Tu nu ar vrea să-i aducă pe toți pentru că ar putea merge înapoi o pereche de ani.
Dar tu nu vrei să-i aducă la un moment dat
pentru că ar introduce o mulțime de deasupra capului de rețea.
>> Este de multe ori destul de greu - o dată ai o bază de date care rulează -
este de multe ori destul de greu pentru a schimba ceea ce datele pe care le au în ea -
că este, adăugați o coloană nouă bază de date sau ceva -
deci o strategie de bun este, de fapt doar pentru a păstra o mulțime de date într-o pată de cerneală de text -
o pată de cerneală JSON - JSON fiind de activarea JavaScript Object Notation -
Motivul pentru care este util este că, atunci puteți adăuga noi proprietăți
la toate aceste pete JSON, fără a schimba baza de date.
Singurul dezavantaj la care este că, dacă aveți o grămadă de domenii
pe care ați adăugat mai târziu - cum ar fi ascuns în care blob JSON -
atunci e mai greu să le interoga în baza de date.
De exemplu, dacă mai târziu - dacă ați avut modelul dvs. mesaj pe care am discutat mai devreme
cu doar autorul, destinatarul și textul -
ai putea avea, de asemenea, o pată de cerneală JSON și apoi, dacă ai vrut mai târziu pentru a adăuga un câmp dată
tu nu ar trebui să se schimbe baza de date.
Ai putea adăuga doar datele de la toate câmpurile de text.
Și apoi v-ar putea să se uite la cele de pe partea de client,
dar tu nu ar fi în măsură să le interoga pe partea de server
pentru că este ascuns în interiorul acestui text.
>> O altă problemă pe care doriți să se gândească la
este modul în care clientul dvs. și server-ul dvs. sunt de gând să comunice.
De obicei doriți să păstrați acest cât mai simplu posibil.
Puteți avea doar ca un get-me-această cerere de date,
o crea-un-nou-obiect de lucru, precum și o cerere de update-un vechi obiect.
Și acestea ar putea fi diferite de URL-uri pe un server pe care îl -
că browser-ul ar fi - puteți utiliza cereri AJAX pentru toate acestea
și, fie să primească sau date post.
Din nou, pentru Cat de Facebook exemplu,
ai putea avea ca URL-ul pentru a obține un post de individ,
și vei avea o adresă URL pentru a crea un nou post de perete
și, poate, o adresă URL pentru a încărca profilul dvs. imagine, chestii de genul asta.
Dar, din nou, că este de a verifica aduce cea mai mare parte a datelor, astfel încât să nu trebuie să țină
a face cereri de rețea.
Din acest motiv, nu ați putea dori să aibă această cerere individuală obține pentru un singur post,
și în schimb le-ar dori doar o cerere GET pentru întregul perete.
Și apoi, dacă sunteți încercarea de a găsi un echilibru, deoarece -
acest lucru este, de asemenea, va depinde de cererea dumneavoastră.
Pentru că dacă vă așteptați ca oamenii au doar 10 sau 20 de posturi de perete
că va fi bine.
Dar dacă vă așteptați că vor avea mii de atunci că cererea ar lua prea mult timp,
și așa s-ar putea să doriți să adăugați un parametru get-toate-mesajele-atunci.
>> Pentru toate acestea esti, probabil, de gând să doriți pentru a sincroniza datele din JSON -
JavaScript Object Notation.
Destul de mult, fiecare limbă se ocupa cu JSON foarte bine.
JQuery are această funcție getJSON frumos, care va face tot de munca grea pentru tine.
Și pe PHP există, de asemenea, funcții de comunicare JSON foarte frumos.
Deci, asta e, probabil, cel mai bun format pentru a trimite modelele dvs. înainte și înapoi.
>> Ca un exemplu de ceea ce am vorbit până acum,
aici este un flux de exemplu, pentru aplicația dvs. Cat Facebook.
Se incepe cu browser-ul dvs. solicită site-ul de bază URL.
Serverul, probabil, va trimite peste HTML statice și unele JavaScript și CSS.
Este, de obicei cel mai bine să nu faci nici o redare de pe server.
Probabil că nu vreau să -
ceea ce serverul nu este de a face acolo se merge în jos în lista de posturi de perete
și generatoare de unele HTML pentru fiecare în parte și trimiterea care peste.
Este, de obicei cel mai bine pentru a face acest lucru pe partea de client, deoarece altfel
de fiecare dată când doriți să re-desena ceva, va trebui să facă o cerere de server.
Și că foarte repede vă oferă o mulțime de deasupra capului.
Este, de obicei cel mai bine doar pentru a trimite nave în jos static HTML
și apoi JavaScript și CSS, care va face redarea pe partea de client.
De îndată ce lucrurile care vine în,
atunci puteți avea - în JavaScript - vă puteți face cereri de date de perete
și chestii de genul asta, și după ce că serverul este de fapt doar a face interogări ale bazei de date
și verificarea permisiuni.
Singurul lucru important este faptul că aceasta nu poate trimite peste alte utilizatori de mesaje de perete
că nu ai voie să vadă.
Acesta poate fi de fapt un strat foarte subțire de acces la baza de date,
și apoi toate arată datele - toate punctele de vedere și chestii -
cei care se poate întâmpla în browser-ul dvs., și apoi atunci când doriți să faceți un post sau ceva
va trimite doar o altă cerere.
>> Există, de asemenea, unele chestii de lux, puteți face pe partea de sus a acestei.
În ceea ce privește informații tehnice mai specifice,
în curs de dezvoltare în simplu JavaScript poate fi un pic dureros,
astfel încât există unele biblioteci și instrumente care vă vor ajuta foarte mult cu asta.
Cred că ai tot auzit, probabil, despre jQuery, ceea ce face face randare HTML
și manipulare mult mai ușor - au o mulțime de funcții de lux pentru decolorare și în afară,
și de a face animații Zippy.
Există, de asemenea, această bibliotecă, numit Underscore.js.
Ea are o mulțime de funcții de utilitate utile, lucruri pe care le-ar aștepta JavaScript pentru a avea
că într-adevăr oala> - lucruri, cum ar fi amestecarea o matrice,
eliminarea duplicatelor dintr-o listă, sau aplatizare o listă de liste.
Aceasta este doar o mostră de cod mic.
Subliniere are o tona de aceste funcții frumoase pe care doriți le-ar avea tot timpul.
>> Și apoi există o bibliotecă mai mult că mi-ar plăcea să-și petreacă un pic de timp pe
numit Backbone.js deoarece coloana vertebrală într-adevăr vă ajută să se ocupe de modele de pe partea de client
și o mulțime de confuzia care se poate produce.
Backbone vă oferă acest concept de modele și colecții
în JavaScript care sunt, practic, exact ca obiecte JavaScript
în matrice JavaScript, dar le-au evenimente, atunci când schimbă proprietățile lor.
La fel ca în JavaScript, puteți avea un eveniment atunci când un buton devine clic sau ceva
aceste modele coloana vertebrală și colecții Backbone va difuza lucruri, cum ar fi
că, atunci când se schimbă.
Asta înseamnă că puteți scrie ceva ca acest fragment de cod aici -
aceasta spune, de fiecare dată când adăugați ceva la posturile matrice te aspira tot peretele.
Și acest lucru ar spune de fiecare dată când numărul un post de apreciat schimbă,
vă anunța utilizatorul că cineva a placut postul lor.
Sau ori de câte ori orice proprietate a unui post modificările pe care le redesena post.
Chestii de genul asta te va salva de tone de complexitate, deoarece altfel
dacă nu aveți unele cadru ca acest lucru, atunci de fiecare dată în codul dvs., care vă schimbați
ceva despre un post, ar trebui să vă amintiți de a apela toate funcțiile fac
și chestii de genul asta, și dacă ai vrut să adauge ceva nou ce sa întâmplat
de fiecare dată când modificat un mesaj ce ar trebui să treacă prin fiecare loc în ta
cod care ați modificat un post și adaugă că noul lucru.
Un cadru ca acest lucru va elimina o mulțime de care comunicarea dintre straturi
care face codul de complex și greu pentru a menține.
>> Există un pic despre opiniile, de asemenea.
Am de gând să părăsească cea mai mare de acest lucru pentru a Billy, deoarece acestea nu sunt punct de vedere tehnic foarte dificil.
Utilizați jQuery pentru opiniile dumneavoastră. Este, practic, ca o necesitate în acest moment.
Doar face totul mult mai ușor.
Există o mulțime de biblioteci.
Dacă ați complicat elemente de interfață utilizator,
dacă vrei un lucru auto-complete sau ca una dintre acele fantezie multi-selectoare -
daca vrei ceva de genul asta, ar trebui, probabil, doar de căutare în jurul
și puteți găsi o bibliotecă bună, care va face ceea ce vrei.
Billy va explica mai multe despre de fapt dificile părți de opinii.
De asemenea, ca o notă separată, Backbone are unele funcționalități pentru a face vizualizări comunica
frumos cu modele - uita-te la documentația pentru toate aceste biblioteci, de fapt.
Doar uita-te la docs. Sunt foarte bine scris și ușor de urmărit.
În general, aveți posibilitatea să destul de mult doar Google dacă aveți probleme.
Există o mulțime de oameni care le folosesc.
Cred că acest lucru este ca o notă finală.
>> Există, de asemenea, unele lucruri mai avansate pe care le puteți face
dacă sunteți în căutarea de a face aplicația web suplimentare minunat.
Puteți face - noua specificație HTML5 are o multime de lucruri de lux care le puteți face.
Stocare locală - care este, puteți stoca date în browser-ul -
mai degrabă decât pentru a merge înapoi și citi cu atenție serverul de tot,
puteți să vă păstrați o parte din ea pe client și pe care chiar permite oamenilor -
în unele cazuri poate chiar vă permit să utilizați offline pagina de web.
Exista acest lucru numit websockets care sunt un alt fel de comunicare în rețea
în cazul în care în loc de doar voi face o cerere, veți obține răspuns și ați terminat,
vă păstrați deschide o conexiune la server și astfel încât să puteți face lucruri, cum ar fi
actualizări în timp real.
Deci, dacă ați fost încercarea de a face o aplicatie de chat, ai putea folosi websockets
de a comunica înainte și înapoi, astfel încât să nu ar trebui să țină solicită,
"Oh, server, au cineva sa-mi trimiteti un chat?" la fiecare 10 secunde sau ceva.
Există, de asemenea, o caracteristică interesantă HTML5 unde se pot face să arate ca
URL-ul paginii se schimbă fără a avea vreodată să-l reîncărcați de fapt.
Puteți folosi înainte și înapoi butoanele, fără a face o grămadă de cereri de rețea.
Chestii de genul asta este foarte util în ceea ce privește ceea ce face rapid, dar, de asemenea, funcționează ca o aplicație web ar trebui.
>> Există, de asemenea, acest lucru numit CoffeeScript.
CoffeeScript este o limbă diferită, de fapt, care compilează până la JavaScript.
V-ar scrie tot codul în CoffeeScript, și apoi executați acest compilator,
și-l scuipă un fișier JavaScript pe care le pot include în pagina de web.
Motivul pentru care CoffeeScript este frumos este că acesta scapa de o mulțime de
cazuri ciudate care de activarea JavaScript-are unde egal la egal la egal,
și egal la egal la egal a face lucruri diferite, sau ca -
are sintaxa mai frumos pentru a face cu tablouri și funcții.
Acesta este un mic fragment de CoffeeScript care produce o listă cu toate pătratele
de la 10 ^ 2 la 1 ^ 2 în ordine inversă.
După cum puteți vedea, CoffeeScript de multe ori vă permite să-și exprime în 1 linie
ce s-ar lua 5 linii de JavaScript.
Se poate face lucrurile mult mai ușor.
Este un pic de noua sintaxă a învăța la început,
dar cu siguranta te va face mai productiv pe termen lung.
>> Puteți folosi, de asemenea, alte limbi de pe server de PHP -
limbi, cum ar fi Ruby, Python, sau există chiar și un proiect numit node.js
care vă va permite să utilizați JavaScript pe server.
Personal, eu într-adevăr, într-adevăr urăsc PHP.
Eu pur și simplu nu-mi place de lucru cu ea.
Dacă aveți, de asemenea, cred că este o cluge îngrozitor de o limbă,
atunci puteți folosi una dintre aceste loc.
În general, dacă vrei să faci ceva și tu nu prea știu cum v-ar face,
doar de căutare pe Internet.
Nu sunt de tone și tone de resurse în special cu privire la -
StackOverflow este unul mare.
Este acest site unde programatori adresează întrebări reciproc.
S-ar putea fi rula în ea, dacă ai probleme pe seturi de probleme CS50.
Și acolo sunt tone de biblioteci pentru a face ceva destul de mult v-ar dori.
Dacă vrei să faci ceva și nu știi cum să o facă,
nu presupune că este imposibil.
Uită-te în jur și s-ar putea găsi unele resurse bune.
>> Ca un general încheia,
principalele takeaways sunt păstrați lucrurile simple.
Mai complex codul este la început
și cu atât mai mult să încercați și de a face lucruri de lux,
cu atât mai mult le va lua pentru a obține ceva de fapt, funcțional
si cu atat mai greu va fi pentru a schimba mai târziu.
Deci, a face lucrurile așa prost, ușor primul.
Pentru a merge împreună cu faptul că,
nu-ți fie frică de a arunca departe cod vechi sau de curățare, o mulțime.
În general, odată ce ai de fapt ceva de lucru,
este mult mai ușor să se gândească decât atunci când vă aflați încă în stadiile incipiente
de cum am pus totul împreună.
Cel mai bine este de a face cel mai prost posibil design care funcționează
și apoi să-l îmbunătățească iterativ decât încercarea de a obține tot ceea ce dreptul de prima dată.
În ceea ce privește divizia client-server, încercați și să păstreze server-ul dvs. foarte simplu -
doar o bază de date și unele de autentificare și nu fac nici o munca grea acolo.
Face toate lucrurile complicate pe partea de client în browser-ul
în JavaScript la fel de mult ca tine poate.
Uită-te în jurul valorii de bibliotecile care fac viața mai bună.
Întotdeauna mai bine să folosiți cod care altcineva a scris
dacă - și nu să-l scrie singur.
Există o mulțime de lucruri de pe Internet. Google este cel mai bun prieten.
Google este cel mai bun prieten al programatorului.
Da, cu siguranta nu-ți fie frică să te uiți în jurul valorii de lucruri.
Bine. Și mai mult de la Billy.
>> [Billy] De fapt, înainte de a începe cu unele chestii de design,
Are cineva vreo întrebare pentru Ben despre ceva care a vorbit despre?
Bine, bine.
Din nou, să ne anunțați dacă ceva nu este clar
sau dacă doriți pentru a trece peste ceva un pic mai mult.
Am de gând să pas înapoi un pic și să vorbească despre părțile mai fundamentale de proiectare.
Ben menționat modelul numit - îmi pare rău, modelul View Controller sistemului
care este un fel de aspectul tehnic, așa că am de gând să se uite la opinii în mod special,
și am de gând să încep cu modul în care v-ar proiecta o imagine care arată frumos.
Aici e un fel de șablon într-adevăr de bază pentru Cat de Facebook.
Cred că există unele fundamentale în design modern UI
care sunt în valoare de ridicarea.
Se poate observa există o mulțime de spațiu alb peste tot în pagina,
o multime de cameră pentru lucruri.
Nu simt ca trebuie sa suc de fructe lucrurile într-o pagină.
Vrei să părăsească o mulțime de cameră deschis, și dacă te duci la aproape orice site web moderne
veți vedea acolo este alb peste tot.
Nu e alb, în ​​locuri în care nu s-ar aștepta.
Ai această paletă de culori, și este înțelept la început
pentru a alege o paleta de culori pe care ai de gând să lucreze cu și de a dezvolta.
Puteți, de asemenea - ajută să alegeți un tip de caractere, și în acest fel esti un fel de a lucra cu
aceste fundamente concrete de proiectare.
Aveți tipul tău, ai culorile, și apoi puteți fel de
potrivi orice altceva în după cum este necesar.
Deci, așa cum am spus, cu schema de culori pe care doriți să utilizați culorile îndrăznețe de schema de culori
cumpătat. Anteturile sunt frumos. Butoane sunt frumos de a avea culori foarte mare, ostentative.
Dar, în general, dacă aveți un site care are culori peste tot,
tot te holbezi in fata, doar pare aglomerat, și nu e bine.
Pe care doriți să utilizați, în general, culori deschise.
Încercați să, din nou, alege o schemă de culori destul de coerent.
Puteți avea aceste stropi mici de o mulțime de culoare -
care se pot uita destul de frumos, dar pe care doriți să le folosească destul de cumpătat.
>> Așa cum am spus, vrei sa fie minim. Mai puțin este aproape întotdeauna mai mult.
Dacă aveți posibilitatea să afișați ceva sau nu afișa ceva,
si tu esti un fel de sigur dacă ar trebui să fie acolo în mod implicit -
probabil ca esti cel mai bun off lăsându-l afară. Puteți să-l adăugați întotdeauna mai târziu.
Da, pastram lucrurile simple.
Dar cel mai important, pe care doriți să ia în considerare mai multe modele.
Să nu credeți că atunci când faci un site, o ai în cap pe care ai de gând să
face site-ul într-un anumit fel, și-l va arăta exact ca aceasta.
Se va avea antet albastru în partea de sus și bara laterală albastru
și apoi galben lucru sub-antet.
Vrei să faci mai multe template-uri.
Puteți fie - dacă ești bun cu Photo Shop, aveți posibilitatea să deschideți că până și un fel de
proiecta un site web după cum doriți să arate.
Dacă nu, puteți folosi doar stilou și hârtie,
dar zgâria pe mai multe modele.
Vrei să aibă în principiu, un set de unde aveți o mulțime de desene sau modele diferite,
și în cazul în care se termină în sus de lucru, atunci e minunat.
În cazul în care se termină până în caz contrar, atunci veți avea întotdeauna un altul să se adreseze.
În general, nu se simt ca și cum ar trebui să fie constrâns
la orice design de a vă decide inițial pe.
Modele sunt foarte variabile, și o parte din importanța modelului
vedere controler de sistem este că puteți schimba și în afară de vedere diferite pe care doriți.
Puteți influența datele într-un fel, și apoi să decidă, oh, de fapt, că nu funcționează atât de bine.
Cred că e un fel de prea complicate sau există o parte aici, care nu este într-adevăr de lucru,
așa că eu sunt doar de gând să renunțe în totalitate acest punct de vedere și de swap într-un cu totul nou.
Putem folosi în continuare vechile modele și controlorii vechi.
Putem face totul pe server și client ca ne-ar mai înainte.
Dar valul actual al datelor afișate ca va fi ușor diferită.
>> În ceea ce privește punerea în aplicare, de fapt, designul dorit,
odată ce aveți câteva modele schițat pe hârtie sau pe Photo Shop sau orice altceva,
există o serie de instrumente care sunt făcute disponibile pentru tine.
Primul sunteți foarte familiarizat cu ceea ce este HTML, PHP, sau orice
Limba pe care îl utilizați doar pentru a coda pagini statice de pe site-ul dumneavoastră.
Ai lucrat foarte mult cu HTML ce tip de vă oferă aceste tag-uri
pe care le puteți pune lucrurile în, și, practic, este un mod de organizare a conținutului.
De exemplu, aveți antet acolo, așa că ai de gând să aibă o etichetă antet,
și-l va avea un text în interiorul acesteia, care este, probabil, va fi într-o altă etichetă.
Atunci aveți o bară laterală, poate cu unele link-uri diferite,
și cei care vor fi toate în tag-uri separate.
Deci, practic HTML la inima ei este un mod de divizare a paginii cum
în cele din urmă vă doriți să-l formatați.
Deci, din nou, ați văzut asta înainte.
Ești destul de confortabil cu care lucrează cu ea acum
dat fiind faptul că le-ați făcut în ultima PSET sperăm,
astfel încât să fie nici o problemă.
>> Apoi, aveți CSS care se ocupă practic toate aspectele de proiectare statice.
Ar ocupe de toate culorile, toate de poziționare a elementelor diferite,
unde se duc unul în raport cu altul,
cât de mari sunt, diferite tipuri de poziționări pe care le-ar fi -
cu alte cuvinte, puteți avea lucruri fixe, astfel încât, atunci când defilați în jos stau,
sau puteți avea lucruri în raport cu alte elemente.
Toate de acest tip de lucruri este în CSS.
Mai mult decât atât, puteți face diferite decoratiuni, puteți avea culori de text,
efecte de text, tot de acest gen de lucruri.
Ben a dat un seminar foarte bun în acest weekend-ul trecut,
și așa mi-ar verifica cu siguranță că dacă aveți de gând să faci unele lucruri de lux cu CSS.
CSS3 este de fapt cea mai nouă versiune de CSS, și se pot face tot felul de lucruri foarte frumoase.
Se poate face degradeuri, puteți avea frumoase colturi, rotunjite, puteti face tot felul de lucruri
pentru a face site-ul dvs. un aspect mai modern și fantezie.
>> Urmatorul instrument este JavaScript și jQuery care Ben a vorbit un pic despre,
dar voi lua un pic mai departe în.
JavaScript, ca ai lucrat cu ea un pic, sau, cel puțin văzut-o în curs,
este un fel de un mod de a face lucrurile în mod dinamic în HTML.
HTML, după cum știți, este static, astfel încât odată ce ați HTML nu se poate modifica.
Dar JavaScript, în unele privințe, este o modalitate de a putea modifica HTML.
Astfel încât să puteți face asta, și asta e minunat, dar JavaScript este cu adevărat o durere pentru a lucra cu.
Este atât de mult timp și obtuz și de a face chiar și cele mai simple lucruri
necesită o mulțime de linii de JavaScript.
Deci, jQuery este de fapt o bibliotecă de JavaScript care simplifică toate acestea.
Se spune, bine, dacă doriți să aveți o cutie pătrată provin din stânga
și se estompeze în pagină, astfel că este la mijloc, în JavaScript, care ar avea -
Nu știu, o sută de linii de a face, și ar fi o durere,
și tu ieși din ea urăște totul despre programare web.
JQuery aveți practic elementul-dot-se estompeze in, sau ceva de genul asta.
Funcțiile Deci, foarte, foarte simple, care vă va permite să faci tot felul de animații se răcească
și astfel de lucruri.
Un alt lucru pe care acestea două sunt foarte bune pentru este doar de a face lucruri dinamice
cu site-ul.
Deci, mai degrabă decât având doar pagina HTML - care afiseaza unele date, dar nu de fapt,
face nimic - JavaScript și jQuery va lăsa să aveți butoane pe care se poate face clic pe,
și aveți posibilitatea să glisați elemente și re-pentru ei și să le sortați, și au elemente noi
adăugate sau eliminate. Puteți adăuga, șterge, chestii din astea.
Deci, jQuery face de tone de lucruri interesante.
Și Vipul se da de fapt un seminar pe ea azi, cred, la 5-ora,
deci, dacă puteți lipi în jurul valorii de mult timp, care ar fi - 5 sau 4?
Patru. Scuze. Este de fapt imediat după aceasta, așa că aș recomanda
lipirea în jurul valorii de ea, dacă poți.
JQuery este super, super-util, și veți fi capabil să facă o mulțime de lucruri foarte frumoase cu ea
pentru destul de mult orice proiect de dezvoltare web.
>> Acum am de gând pentru a obține într-un fel de distincție.
Am vorbit de fapt despre interfața cu utilizatorul.
Interfața cu utilizatorul este doar de design a site-ului.
Dar există un fel de un alt concept, care este o experiență de utilizare.
Cei doi sunt foarte diferite.
Interfața este cu siguranta o parte a experienței.
Cu alte cuvinte, atunci când te duci la un site, te uiti la interfața.
Asta face parte din modul în care vă confruntați cu site-ul.
Dar experiența utilizatorului este mai mult decât atât.
Experiență de utilizare este despre ceea ce impresia că utilizatorul primeste de la site-ul dvs. este.
Deci, în mod evident, interfata este o parte din asta.
Și este cu siguranta o parte necesară, dar nu este suficient.
Cu alte cuvinte, dacă aveți o interfață frumos, și este destul de plin de culoare și toate astea,
Asta-i grozav, dar în cazul în care utilizatorul merge la site-ul dvs., vede un aspect destul de și este confuz de
totul, nu are nici o idee cum să facă ceva, atunci, evident, le-ați făcut-o într-adevăr
site-ul săraci.
Asta e un fel de experiență de utilizare în care vine inch
Am de gând să vorbesc un pic despre design UX - UX este scurt pentru o experiență de utilizare -
și un fel de modul în care puteți să vă asigurați că aveți o experiență bună de utilizator.
Primul punct este că s-ar putea proiecta un site web în cazul în care un utilizator poate face ceva care
că utilizatorul dorește, eventual.
Dar în cazul în care utilizatorul nu pot da seama cum de a face aceste lucruri -
cu alte cuvinte, în cazul în care utilizatorul nu are o idee bună atunci când se duc la site-ul dvs. de,
"Oh, dacă vreau să actualizeze profilul meu, apoi mi-am faceți clic pe acest buton, sau dacă vreau să posta pe
perete cuiva, apoi mă duc la perete lor și faceți clic pe o cutie mica. "
În cazul în care utilizatorul nu știe că, atunci în mod eficient nu au de fapt,
puse în aplicare în mod corect că funcționalitatea.
Parte a punerii în aplicare o funcționalitate este că utilizatorii sunt de fapt în măsură să-l folosească.
Și ar putea fi frustrant - s-ar putea face un site, și se poate face tot felul de
lucruri minunate, dar atunci va trebui oameni testați-l și spune, "Nu se poate face acest lucru.
De ce nu se poate face acest lucru? "Și vei spune inapoi la ei,
"Ei bine, se poate. Trebuie doar să intrați în meniul drop-al 7-lea în jos pe acest obscur
Pagina care se găsește numai printr-o legătură de la colțul din dreapta jos ", sau ceva de genul.
Evident, tu nu vrei asta.
Vrei să fie clar pentru utilizatori acestea sunt ceea ce ar trebui să fac,
și ar trebui să fie simplă și intuitivă pentru ei.
>> Un alt lucru pe care doriți să încercați să faceți este, în cazul în care cineva va merge la site-ul dvs.
și 9 din 10 ori fac acțiune A, și 1 din 10 de ori fac acțiune B,
probabil, veți dori să se concentreze pe experiența lor de acțiune A.
Cu alte cuvinte, vrei să-l cât de foarte, foarte clar de a face A.
A trebuie să fie fata-si-centru - du-te la site-ul, a se vedea ea, oh, e chiar acolo.
În timp ce B, evident, pe care doriți să fie clar, dar puteți să-l lăsați un pic mai mult
în fundal.
David oferă un bun exemplu de acest lucru în curs,
care este sistemul Boston T.
Când te duci la Boston T și doriți să cumpărați un bilet,
aveți pentru a obține în cinci meniuri înainte de a vă puteți achiziționa de fapt, un bilet
pentru o valoare de 2 dolari, 2.50 dolari, care este cât de mult este nevoie pentru a merge cu metroul
într-o singură direcție.
Asta este o problemă pentru că cei mai mulți oameni care sunt de echitatie metrou
probabil vrei doar pentru a merge la un loc, cumpăra biletul lor, pentru a primi pe imediat.
Ea nu are sens că trebuie să treacă printr-o mulțime de diferite meniuri
pentru a ajunge acolo.
O experiență de utilizare mai bună ar fi un buton rapid pe prima pagină
care spune doar, "cumpara un bilet one-way," și că ar pune în toate standardului
valori implicite, iar apoi, dacă cineva vrea să cumpere un bilet diferit decât faptul că,
ei încă, desigur, au opțiunea de a, dar le-ați optimizat pentru
cazul comun de utilizat, care este foarte important.
Puteți vedea exemple de acest lucru pe Facebook, nu?
Dacă te duci la Facebook și doriți pentru a posta un status,
este chiar în partea de sus, care este ceea ce de multe ori vrei sa faci.
De îndată ce veți intra pe pagina, poti sa faci cele mai comune lucruri pe care
vrei sa faci.
Dacă vrei să faci lucrurile puțin mai complicate, cum ar fi,
spun că vreau să merg la perete prietenul meu și posta o imagine pe ea -
pe care voi dori să fac de multe ori, dar nu la fel de des ca și publicarea unor actualizări de stare -
astfel, în acest caz, am tastați numele lor în caseta din partea de sus, faceți clic pe profilul lor,
și apoi, încă, este chiar în partea de sus acolo o dată am ajuns la profilul său.
Din nou, am optimizat în prioritate pentru cazurile cele mai frecvente de utilizare.
>> Un alt lucru important este faptul că de multe ori oamenii vor un fel de a încerca pentru a obține în jurul valorii acest
prin a spune, bine, așa că am făcut site-ul și oamenii sunt constatare este confuz,
și că este o problemă, nu?
Evident, eu nu vreau ca oamenii să fie confundat cu conținutul site-ul meu.
Dar modul de a rezolva, care nu este de a avea ceva pop-up spunând,
hei, am de gând să te învețe cum să folosească acest site.
Pasul 1 - faceți clic pe acest buton. Pasul 2 - du-te aici.
Sigur, asta e un fel în jurul ei - este o modalitate prin care puteți spune oamenilor ce să facă, dar e
într-adevăr nu un mod optim.
Dacă mă duc la un site web și dintr-o dată am bombardat cu acest tutorial, care-mi spune
ce să facă și unde să meargă și toate acestea, că nu e amuzant pentru mine.
Nu este o experiență bună pentru mine.
Este un fel de durere. Vreau să încep doar a face lucruri.
Oamenii vor să închidă din caseta de dialog lor,
sau ieși din tutorial, nu știu ce să fac, și apoi se plâng că
pe care nu le-am spus ce să facă.
Modul de a rezolva acest lucru nu este de a da orice fel de tutorial sau direcții -
ceva de genul asta.
La fel de mult ca tine poate evita, într-adevăr doriți să arate utilizatorului ce să fac
doar prin natura modului website este prevăzute.
Cu alte cuvinte, dacă mă duc la Facebook fără să vă conectați,
primul lucru pe care am vedea pe pagina principală -
este o cutie de conectare mic. Deci, duh. Trebuie să vă conectați inch Este chiar acolo.
Întrucât, în cazul în care m-am dus la Facebook și a trebuit să faceți clic pe un pic de link în partea de jos
care a spus "conectați" și restul paginii a fost doar un fel de imagine sau ceva,
Eu nu prea știu ce să fac, nu? Mi-ar fi confundat.
Deci, s-ar putea spune-mi să merg acolo jos și faceți clic pe butonul pentru a intra în,
sau jurnalul de la buton ar putea fi chiar în partea de sus, unde am de gând să-l văd.
Vrei să fii mereu arată utilizatorului ce să facă,
și că ar trebui să fie inerentă în pagina în sine.
>> Cand te gandesti la design si simularea unor moduri diferite de
exprimarea site-ul dvs., într-adevăr doriți să se gândească la ceea ce utilizatorii sunt de gând să
se face și cum le pot arăta ce să facă.
Un ultim lucru este de testare este foarte, foarte important.
Este minunat pentru a obține cineva - a obține un prieten, pe cineva nu stii chiar -
care nu a văzut site-ul înainte de a utiliza site-ul.
Pentru că ați fost de lucru pe site-ul de ore, te-ai uitat la ea,
și știi exact ce să facă acest lucru, evident, ai de gând să fie testarea
lucruri pe care le-ați fost de lucru pe și despre care știți că locul de muncă.
Dar dacă cineva vine și folosește site-ul pe care nu le-a folosit înainte,
care este o experienta unica pentru că aveți pe cineva care nu are cunoștințe anterioare
a site-ului a intra în ea, așa că va trebui în mod eficient nici o idee ce să facă
sau ce fel de cazuri de utilizare sunt prezente pentru ei.
Asta-i grozav. Care este unic, deoarece acestea sunt, în esență, o persoană cu un gol pentru o minte.
Ei pot să vă spun dacă ceva este confuz sau neclar.
Acestea vă pot oferi o idee despre exact ceea ce experiența de utilizare a site-ului este.
Ea poate fi foarte greu să spun că te, deci cu siguranta te-ar încuraja
ca esti in curs de dezvoltare de proiecte - dacă faci proiecte bazate pe web -
pentru a obține oameni folosind site-ul cât mai curând aveți un fel de demo functional.
>> Acum am de gând să vorbesc un pic despre modul de a gestiona un proiect de dezvoltare web.
Am trecut pe modul în care puteți face partea tehnică back-end,
cum se poate proiecta un site foarte bun,
și asta e minunat, dacă sunteți de lucru de unul singur, dar -
chiar dacă sunteți de lucru de unul singur și mai ales dacă sunteți de lucru pe o echipa,
management de proiect devine o problemă mare.
Care le-ați auzit despre un fel de management de proiect în diferite forme, deoarece
scoala elementara atunci când s-au spus de lucru de grup.
Aveți de a coopera, de a comunica, tot de asta.
Că toate se aplică în continuare aici, dar există unele circumstanțe unice, cu
informatică pe care doriți să fie conștienți de, și doriți să vă asigurați că descurca bine.
Voi vorbi mai întâi un pic despre echipa pe care vei fi inch
Este foarte important pentru a alege marimea potrivita a unei echipe a fi de lucru pe,
și în proiectul final cred că aveți opțiunea de a alege
între 1 și 4 persoane, dacă am dreptate.
Vă doriți să vă asigurați că nu sunteți alegerea doar a numărului de persoane
pe care doriți să lucrați cu pentru că sunt prietenii tăi.
Vrei să alegi o echipa care este o dimensiune bună și că va face treaba.
Există un comerț liber în a avea mai multe persoane, față de mai puțin de persoane.
Dacă aveți mai multe persoane, în mod evident, mai mult de lucru se poate face
pentru că aveți o mulțime de oameni, o mulțime de cod, o mulțime de idei,
și asta e tot mare.
Dar necesită, de asemenea, mult mai mult de gestionare și o mult mai mult de comunicare.
Cu alte cuvinte, dacă aveți 4 persoane lucrează la același proiect
și editați toate același cod, mai mult sau mai puțin au tot felul de necesitatea de a cunoaște
ceea ce se întâmplă așa că necesită -
dacă adăugați ceva nou funcție vă fel de trebuie să spui oamenilor - Sunt adăugarea de acest lucru,
Am schimba acest lucru în acest fel - mai ales dacă aveți în lucrurile într-adevăr profund
cum ar fi modelele și controlorii care sunt de fapt de gând să influențeze modul în care funcționează site-ul.
Întreaga echipă trebuie să fie conștienți de ea,
deci trebuie să vă asigurați că nu sunteți alegerea prea mare, o echipa care va fi greu
pentru a face comunicarea.
De asemenea, nu doresc să aleagă o echipă suficient de mic încât nu te duci la
fie capabil să comunice, pentru că doar tu.
>> Un alt lucru să ia în considerare este echilibrul în care abilitățile oamenilor sunt.
E minunat dacă ești toate programatori foarte bune.
Dar daca esti toate back-end de oameni, atunci site-ul dvs. nu este de gând să arate foarte bine
pentru că aveți această mare bază de date, și-l face interogările de căutare super-rapid -
care este mare -, dar atunci când te duci la ea, e ca un site de 1990, cu roșu și albastru
peste tot, și asta nu e bine, fie.
Observați că Ben și am de lucru ca o echipă sunt foarte frumos pentru că eu sunt un fel de mai mult
în front-end, ne-am interacționa în mijloc-end, și Ben e foarte bun cu chestii de back-end,
astfel încât funcționează foarte bine pentru că putem proiecta orice site-ul și, practic, găurile
în care site-ul care trebuie să fie completate pot fi completate de către oricare dintre noi, sau, eventual, ambele.
Vă doriți să vă asigurați că nu există găuri în echipa ta.
E în regulă dacă există un pic de suprapunere.
Cu alte cuvinte, dacă aveți 2 oameni care sunt atât de bine cu back-end,
care poate fi bun la fel de bine, deoarece acestea pot ajuta reciproc cu probleme
că acestea au.
Acesta poate fi o problemă dacă aveți doar o persoană care este responsabilă de un anumit lucru
și se execută într-o problemă, astfel încât să nu doriți să aveți un pic de suprapunere
dar cel mai important, doriți să vă asigurați că toate posibile găurile sunt umplute.
>> Ultimul lucru - și acest lucru ar trebui să fie evident, dar nu este de multe ori.
Într-adevăr doriți să se distreze.
Ideea acestui proiect final în CS50 și de multe ori punctul de dezvoltare web, în ​​general,
nu este de a face doar un loc de muncă pentru că are nevoie de a face.
Într-adevăr doriți să se distreze, și doriți să fi a face ceva
care te motivează pentru a lucra pe ea.
Dacă tot ceea ce faci este o durere să se așeze și să lucreze în,
atunci nu sunteți alegerea proiectului potrivit.
Pe care doriți să alegeți ceva care veți găsi interesant,
tu chiar vrei sa vezi rezultatul, esti entuziasmat atunci când vei ajunge o idee nouă despre
ceva ce ai putea face - deci nu e tot felul de proiecte de acolo, care sunt sigur
puteți găsi - toată lumea are ceva care le-ar intriga într-adevăr
în cazul în care faci un proiect web-based.
Eu o spun din nou acum.
Dacă proiectul dumneavoastră pare a fi o durere și tu nu vrei sa lucrezi pe el,
alege un alt proiect. Alege ceva care intr-adevar te inspiră.
>> Ben menționat acest concept de repetare un pic, și eu vreau să merg peste el un pic.
Este foarte important de a lucra în spurts în cazul în care obține ceva funcțional.
Acesta poate fi mare, dacă aveți acest plan pentru un site web care va face A, B, și C,
și în cele din urmă se va ajunge acolo.
Dar te-ai blocat în această fază în care sunteți de lucru pe ea și de lucru pe ea,
dar nimic din ce in ce face. Nu aveți nimic de a vedea și un lucru tangibil, funcțional.
Ceea ce într-adevăr vrei să faci la fel de mult ca se pare un fel de durere, uneori, pentru a
lucra la ceva și apoi un fel de ai da de capat, astfel că este cel puțin la un stabil, care rulează
versiune, chiar dacă aceasta nu are toate caracteristicile pe care doriți.
Și poate că există unele caracteristici care într-adevăr doriți să le adăugați, dar tu chiar nu se poate
pentru că doriți să obțineți acest site la un punct functional.
Și așa doriți să aveți un fel de intregul proces de dezvoltare arata ca asta.
Vrei să începem de undeva funcțional - sau, în esență, începe cu nimic -
dar doriți să obțineți undeva foarte de bază și funcțional.
Și apoi, din nou, face un fel de salt și a ajunge undeva funcțional din nou.
Veți construi încet în sus, și s-ar putea merge un pic mai lent decât ar fi altfel,
dar pe termen lung, dacă sunteți în mod constant blocat în această fază de mijloc în cazul în care
nu au de fapt nimic de lucru, aceasta poate fi o frustrare foarte mare
pentru a lucra la proiect pentru ca esti mereu atat de aproape de obtinerea-l de lucru,
și este niciodată de fapt de lucru.
Pe care doriți să lucreze în aceste spurts funcționale,
și tu, de asemenea, doriți să faceți unele reflecție după fiecare.
Cu alte cuvinte, odată ce sunteți la un punct în cazul în care site-ul este acum de lucru -
ea nu are tot ce vrea, dar face unele lucruri -
pe care doriți să cred, bine, este acest site realizarea obiectivului pe care mi-am propus să fac?
Cu alte cuvinte, în cazul în care site-ul este de gând să faci X, este ceea ce am de lucru în direcția X?
Sunt toate funcționalitățile pe care am vrut acolo?
Și, în plus, este aceasta servește scopului general pe care vreau?
Dacă ați ajuns la concluzia ca site-ul dvs. începe să vireze într-o direcție diferită
sau, poate, lucrurile doar un fel de nu sunt de lucru afară, acesta poate fi timp pentru a schimba vitezele un pic.
Cu alte cuvinte, aceasta este în valoare de vedere - este în valoare de a arunca idei dacă este necesar
și luând în considerare am de lucru într-adevăr față de ceea ce vreau să fiu.
>> Eu cred că e punctul urmatorul meu. Nu-ți fie frică să-și abandoneze idei.
Doar pentru că ai petrecut o mulțime de ore de lucru pe o caracteristică
și în cele din urmă luat-o de lucru, dar într-adevăr nu merge atât de bine -
ca nu este util sau că utilizatorii sunt probleme folosind-o - ca un fel de lucru -
nu vă fie teamă să-l arunc.
Acesta e de rahat pe care le-am petrecut o mulțime de timp de lucru pe ea,
dar în cele din urmă nu doriți un site care e un fel de a pune împreună de aceste piese care
un fel de muncă, dar nu sunt atât de bine servite.
De asemenea, nu-ți fie frică de a îmbrățișa idei noi.
Dacă cineva vine și spune, hei, că site-ul arata foarte cool, dar
nu ar fi chiar grozav dacă a făcut-o, de asemenea, acest lucru?
Doar pentru că e ceva ce nu a intenționat și ceva ce nu e în ta
specificatii, ceva ce nu s-au stabilit pentru a face,
nu vă fie teamă să-l ia pe și apoi lucra cu ea.
Pentru că de multe ori ideile pe care le execută cu tot parcursul dezvoltării
sfârșesc prin a fi caracteristici foarte interesante ale site-ului.
>> Am spus acest lucru înainte. Eu o spun din nou.
Testeri sunt super, super-util.
Să încercați să obțineți de oameni care nu au văzut site-ul înainte de a conecta și a vedea ce se întâmplă
deoarece ei pot testa nu numai utilitatea site-ului și experiența utilizatorului,
dar ele pot testa, de asemenea, funcționalitatea în moduri pe care nu poți.
Dacă ați face unele caracteristici care face un anumit lucru
și știi că va face același lucru în mod corect de fiecare dată, asta e minunat.
Dar poate fi de multe ori greu pentru a ține cont de cazurile în colțul în care un utilizator ar putea
tastați ceva ce nu au fost așteptam - tocmai pentru că ați definit
caracteristicile tine.
Deci, pentru a avea pe cineva veni pe care nu are nici o idee cum de a utiliza site-ul
și la doar rupe în orice moduri în care se poate face este foarte util pentru că
a obține o idee dintr-o perspectivă cu totul diferită de ceea ce pe site-ul dvs. este de lucru
și ceea ce are nevoie de reparații.
>> Trecut, am de gând să vorbesc despre unele bune practici generale,
și le-ați văzut o mulțime de acestea în CS50, dar ele, de asemenea, într-adevăr, se aplică într-adevăr într-un cadru de proiect.
Una dintre ele este comentarii. Comment Întotdeauna codul mai ales dacă sunteți de lucru pe o echipa mare.
Ea poate fi atât de enervant de a avea doar un bloc uriaș de cod pe care cineva a scris
și poate că funcționează, poate că nu, dar nu ai nici o idee despre ceea ce face,
astfel încât să aveți nici o idee dacă este util sau nu sau dacă ar trebui să fie acolo sau nu,
și dacă sunteți de lucru pe altceva e chiar posibil că sunteți de lucru pe
acelasi lucru, asa ca fii foarte, foarte atent să fie atenți față de colegii dumneavoastră
și codul de scriere care este bine documentat.
Nu trebuie să meargă atât de departe încât să facă totul ca în cazul în care, dacă incrementa
un contor au un comentariu care spune, eu sunt adăugarea de 1 la acest contor.
Aceasta nu trebuie să fie că detaliat, dar, pentru orice funcție pe care o vreodată scris
ar trebui să aveți unele documente din ceea ce această funcție face exact,
ceea ce intrările sale sunt, și ceea ce ar trebui să se întoarcă.
În acest fel puteți folosi alte componente oameni ale site-ului
și se poate lucra la construirea ceva mare.
>> Un alt lucru important este ce vrei să faci regulat curate-up-uri.
Codul devine murdar. Nu se simt rău în cazul în care codul este doar total de citit și un dezastru uriaș.
Asta se întâmplă în dezvoltare web mereu.
Te adăugarea de noi caracteristici, eliminarea cele vechi. Chestii va fi acolo, care nu ar trebui să fie.
Asta e bine, dar doriți să vă asigurați de a face cu asta regulat.
Nu vrei să lăsați-l să construiască până la punctul în cazul în care pur și simplu nu se poate găsi nimic
în codul dumneavoastră, și nu aveți nici o idee despre ceea ce nu face nimic.
Acesta este cazul cu HTML.
Uneori, veți termina cu obiecte care nu conțin nimic,
și veți dori să scape de ele.
În CSS, puteți fi referindu-se la elementele care nu mai sunt acolo,
așa că vrei să scapi de cod.
În JavaScript, este posibil să fi scos ceva de la HTML.
Deci, doriți să vă asigurați că sunteți mereu curat, face lucruri destul de
la fel de mult ca tine poate în mod regulat.
>> Un alt lucru foarte util pe care nu cred că este prezentat foarte mult în CS50
dar este în valoare de achiziție este în control al versiunii.
Ideea de control versiune este atunci când sunteți de fapt ține evidența tuturor progreselor
care le-ați făcut spre site-ul dvs. și în cazul în care în orice moment iti dai seama, oh, aceasta a fost de lucru
un timp în urmă, dar nu este nici mai mult de lucru, poti sa te duci înapoi la versiunile anterioare
și a vedea ce sa schimbat de atunci și acest tip de lucru.
Principalul mod de a face acest lucru este cu Git, și Git este tot acest tip de sistem care
Cred că Tommy MacWilliam a dat un seminar cu privire la anul trecut.
Dacă te duci în seminariile CS50 pentru 2011, puteți vedea seminar lui pe asta.
Ideea de Git este de fapt care la intervale regulate faci aceste angajamente
care sunt moduri de a spune pe site-ul este într-o versiune destul de stabil acum atât de
Sunt o ambalare în sus și trimite-l la distanță la un server, iar apoi poti sa te duci la acel server
si uita-te la toate versiunile anterioare de codul dumneavoastră și a vedea cum se progresat
și tot ce fel de lucruri bune.
Deci, asta e de fapt o.
În ceea ce privește dezvoltare web, suntem fericiți să stai în jur și să răspundă la orice
întrebări în ceea ce privește prezentarea noastră.
Asta e tot. Mulțumiri. >> [Ben] Multumesc.
[Aplauze]
>> [Billy] personal, nimeni nu are întrebări despre lucruri pe care le-am acoperit
sau lucruri pe care nu ne-am acoperit pe care au fost în speranța că vom acoperi?
Ne-ar fi bucuroși să răspundem la cele. Oricine?
[Membru al audienței] Care sunt argumentele pro și contra de a folosi Ruby sau folosind Python?
[Ben] Întrebarea a fost, care sunt argumentele pro și contra de a folosi Ruby sau Python
în loc de ca PHP.
Argumentele pro sunt ca Ruby și Python sunt limbi mult mai bune decât PHP.
Cel puțin în opinia mea, și cred că într-o mulțime de opiniile altor oameni, de asemenea.
Acestea au fost concepute mai mult pentru a face lucruri complexe,
și mai puțin de grozav împreună pagini web foarte repede cu
un pic de conținut dinamic.
Contra sunt că există un pic de - acolo e mai mult de o curbă de învățare
pentru a le configura.
Că este, ca și în PHP, puteți avea doar un fișier HTML și voi scrie mai puțin decât,
semn de întrebare, și apoi scrie un cod, iar apoi scrii semn de întrebare,
-mai mare, și apoi ați terminat.
În alte limbi, cum ar fi Ruby sau Python,
va trebui să treacă printr-un pic mai mult de lucru pentru a obține funcționare inițială site-ului.
Există, de asemenea - cel puțin este folosit pentru a fi cazul - că există mai multă documentație
disponibil pentru PHP doar pentru că există mai multe persoane care folosesc aceasta.
Cred că nu mai e la fel de mult de o problemă.
Există cu siguranță o documentație foarte bun pentru chestii de genul Ruby on Rails
sau Django pentru Python este echivalent.
PHP este cel care toată lumea a folosit de ani de zile, și știi cum funcționează.
Ruby și Python sunt un pic mai puțin mature.
>> [Membru al audienței] Dacă ar fi să aleagă între una dintre ele pentru a învăța sau a ridica,
ceea ce ai prefera?
Sincer, cred că depinde de persoana.
Îmi pare rău. Întrebarea a fost de ce ai alege pe cineva pentru a afla?
Mi se pare Python cele mai frumoase personal.
Există o mulțime de oameni care - am facut primul meu proiect dev web în Python și Django.
Există o mulțime de oameni cărora le place Ruby on Rails, de asemenea.
Probabil că mai multe persoane care cunosc Ruby on Rails.
Sincer, mi-ar merge doar cu ceea ce oamenii din jurul stii
astfel încât să aveți oameni de a pune întrebări.
>> Întrebarea a fost - pe serverele partajate este un fel de greu pentru a lucra la Python?
Asta depinde de dvs. de găzduire.
Există un număr de gazde web care va posta lucruri Python.
WebFaction face asta, nu?
WebFaction este una care Billy și am folosit pentru unele proiecte.
Sunt într-adevăr mare. Acestea susțin cele mai multe limbi.
Dar este adevărat că PHP este mult mai larg acceptate.
Deci, dacă te-ai blocat pe un web gazdă, care nu doar PHP, care este un motiv bun de a utiliza PHP.
>> [Membru al audienței] Tocmai am intrat în procesul de învățare cum de a interoga anumite baze de date,
și știu că SQL meu este peste tot, dar recent am fost expus la -
și l-ați arătat. Veți vedea JSON și baze de date extensibile.
SQL meu este încă peste tot. Cum vedeți că se întâmplă?
Este acolo va fi o tendință de creștere pentru mai multe expandabile (fără sunet)?
Întrebarea a fost - nu cred că va fi o tendință de baze de date non-SQL.
De exemplu, cum ar fi MongoDB. Cred că este cu siguranță adevărat.
Sfatul meu a fost în mare parte legate de MySQL-aici doar pentru că MySQL este
standard în industrie.
Personal, eu prefer mai mult baze de date care nu au schemos ca MongoDB
în cazul în care nu au problema, oh, am nevoie pentru a adăuga o altă coloană.
Vai de mine, ca și cum tot ce trebuie să fac?
Este foarte greu să faci asta pe MySQL, dar atunci când ai ceva de genul Mongo
e mult mai frumos.
Un alt lucru frumos despre Mongo este că înregistrările sunt de fapt obiecte JavaScript.
Nu e nici un fel de pas de conversie în cazul în care aveți nevoie pentru a lua aceste rânduri de baze de date
și le transformă într-un obiect de activarea JavaScript-și apoi le trimite pe fir.
Cred chestii de genul asta va fi foarte, foarte util pentru dezvoltarea web rapidă în viitor.
>> [Billy] Ceva ce mi-ar adăuga, care este doar un punct generală este că
Nu mă simt ca și cum ar fi învățat toate limbile pe care le-am discutat
de la seminarul nostru.
Evident, ideea este de a vă oferi o idee de ceea ce este acolo,
și dacă sunteți intrigat de oricare dintre lucrurile pe care le-am menționat le puteți Google
și citiți pe ele.
Și, după cum am menționat, există câteva seminarii care se ocupă cu exact aceste lucruri.
Există chiar mai multe seminarii pe care nu le-am menționat că, probabil, ajunge în
chestia asta la fel de bine.
Ideea este că, dacă doriți să lucrați la ceva, aici sunt instrumentele la dispoziția dumneavoastră.
Nu te simți copleșit, dacă nu sunteți sigur ce aceste instrumente face exact,
dar știu că sunt acolo și pe care le puteți face utilizarea pe scară largă de ele
de către Google.
>> [Membru al audienței] Ce fel de lucruri ce trebuie să faceți pentru a vă asigura site-ul dvs.
arata bine pe dispozitive mobile?
[Billy] Dispozitivele mobile sunt un pic cam greu.
Există două moduri în care puteți aborda.
Primul mod este că aveți de fapt, un site web mobil.
Cu alte cuvinte, de a efectua un fel de detectare la început
atunci când browser-ul este de a face cererea de pe site-ul dvs., care spune, fie
întoarcă acest punct de vedere - care va fi punctul de vedere pentru desktop sau laptop browsere -
și acest alt vedere pentru dispozitive mobile.
Acesta este un loc în care puncte de vedere sunt foarte frumos ca sa poti destul de mult de swap
doi afară și au o interfață, care funcționează într-adevăr frumos pe dispozitive mobile
și au o unul complet diferit, care funcționează bine pe dispozitive browser.
Problema cu care este este nevoie de o perioadă lungă de timp, deoarece aceasta înseamnă de codificare
o interfață cu totul diferit.
Un alt mod pe care o puteți face este -
o mulțime de telefoane moderne va afișa site-uri web și să încerce să le facă ca un browser ar fi,
și ce fac ei cel mai bine lor.
Puteți fel de încercați să stați lumina cu privire la cantitatea de jQuery JavaScript pe care îl utilizați
care tinde să fie în cazul în care lucrurile pot merge prost un pic.
Aceasta este un fel de modul în care ar trebui să utilizați dacă nu ai prea mult timp.
Dacă aveți timp pentru a lucra la o interfață mobil, care este, evident, cea mai bună opțiune.
>> Cred că, în general, pentru proiecte CS50, ai de gând să vrea să aleagă una sau alta.
Cu alte cuvinte, vrei sa faci o aplicatie de mobil sau vrei sa faci un site web desktop.
Și că un fel de determină în cazul în care te duci cu asta.
Dar dacă doriți să-l extindă mai târziu, probabil cel mai bun pariu este de
pentru a face o altă interfață pentru celălalt.
Am un pic de experienta in dezvoltarea de site-uri WordPress bazate pe.
Am găzduit un site personal pe WordPress pentru o vreme.
Aceste tipuri de cadre pot fi frumoase lucruri la fel de foarte de bază.
Deseori veți rula doar într-o mulțime de probleme de personalizare, deși.
Veți dori să aibă ceva uite un anumit fel sau să fie un anumit fel
și tu chiar nu se poate pentru că este hard-wired în sistemul care
acest lucru este modul în care trebuie să facem lucruri care pot fi un pic de o problemă.
De atunci m-am cam fost mai înclinați să lucreze cu site-uri de la sol în sus.
Pentru lucruri cum ar fi baze de date blog și chestii de genul ăsta nu e chiar asa de greu pentru a construi un cadru.
Dacă sunteți într-adevăr întins de timp, puteți utiliza, desigur, ceva de genul WordPress
sau ca un fel de lucru pentru un blog.
Felul de lucruri pe care bloguri magazin și nu sunt foarte greu de ajuns că
dacă rulați în oricare dintre aceste tipuri de lucruri, esti, probabil, cel mai bine doar la
face o versiune in-house.
>> Cred că e vorba de asta, asa ca va multumesc din nou pentru venit.
Ne-am bucurat cu adevărat să vorbesc cu voi si speram ca ati invatat unele lucruri.
[Ben] Suntem fericiți să vorbim - trebuie să mergem, dar suntem fericiți să vorbim mai mult în afara
dacă aveți o altă întrebare. Multumesc din nou. [Aplauze]
[CS50.TV]