[Powered by Google Translate] [Seminár] [Web Development: od nápadu k realizácii]
[Ben Kuhn] [Billy Janitsch] [Harvard University]
[To je CS50] [CS50.TV]
[Billy] Ahoj, ja som Billy a toto je Ben. >> [Ben] Ahoj.
Budeme sa dnes hovorí o vývoj webových aplikácií.
[Webdev] [Billy Janitsch a Ben Kuhn]
Niečo o nás ako prvý.
Ben je niečo ako back-end chlap. On robí veci fungujú.
A potom som sa ísť a robiť je dosť.
Som z veľkej časti podieľa sa viac front-end návrhu rozvrhnutie druh vecí,
a Ben, na druhej strane, vie, čo robí, takže sa pracuje na back-end veci.
Spoločne sme urobili pár vecí.
Napríklad v minulom roku sme pracovali na Gimblium, ktorý je on-line hra vývoj štúdio.
To bol náš konečný projekt pre triedu,
a od tej doby sme urobili Harvard Class
čo je on-line rámec pre prezeranie a nakupovanie kurzy na Harvarde.
>> Chystáme sa začať s týmto nápadom na našich webových stránkach.
Chystáme sa robiť Facebook, ale pre mačky.
Predtým, ako ste vlastne túto webovú stránku,
nerobia tento web, pretože to nie je dobré, ale budeme ho použiť ako rámec
a prejsť procesom, ako sme sa túto myšlienku
a premeniť ju v reálnom stránkach môžeme použiť.
Začneme tým, že rozbije webové stránky nadol.
Rovnako ako si robil v CS50,
Ak chcete premýšľať o tom, aké sú skutočné komponenty, ktoré idú do týchto stránok.
V podstate to odbočka z nápadu, ktorý je len trochu abstraktný pojem
do skutočné, hmatateľné veci, ktoré by ste mohli robiť.
Začneme tým, že žiada niekoľko otázok.
Čo je to za web? Prečo sme to robiť?
Čo je to chystá použiť? Také veci.
V prípade Facebooku Cat,
sme v podstate chceme webové stránky, ktoré vám umožnia mačky sociálne siete navzájom.
Myšlienka je, že sa môžu zakladať na vzájomne stien,
môžu vzniesť pripomienky, také veci.
A to je miesto, kde sa dostávame do funkčných komponentov.
Teraz máme tento druh rámca - máme užívateľských profilov,
máme pripomienky, a môžeme písať.
Možno, že jedného dňa budeme prítoku rád a také veci.
A sme trochu chcieť uprednostniť tieto funkcie idú dovnútra
Chceme povedať, ako, jo, je to naozaj dôležité, že každý má profil
a že každý môže zakladať na vzájomne stien.
Sekundárne sa, že komentáre by bolo pekné.
Možno, že neskôr budeme prítoku páči.
Takže, chcete mať predstavu o tom, čo je základom projektu
a to, čo je trochu všeobecnejší funkcie, ktoré by mohli byť použité neskôr.
Ak chcete druh má konkrétny zoznam v pamäti,
ale projekt, ktorý začína sa nebude projekt, ktorý dokončíte.
Inými slovami, všetko sa zmení, keď vyvíjate stránky,
a chcete ponechať priestor pre to.
Zapnem ju Benovi, ktorý sa chystá hovoriť trochu o štruktúre.
>> [Ben] Budem hovoriť o viac technickej časti vývoj webových aplikácií.
Poďme jednoducho ísť cez niektoré základy prvej.
Keď robíte webovú aplikáciu,
hlavné divízie, ktoré budete mať, je
budete mať nejaké veci sa deje v strane klienta -
to znamená, že kód, ktorý ste prehliadač má z webu
a JavaScript, HTML, CSS veci.
To je všetko, na strane klienta.
Budeš mať iný kód, ktorý beží na strane servera
ktorá udržuje všetky údaje, ktoré ľudia poslať k tebe,
rozhodne, kto sa dať čo, také veci.
To je len niektoré terminológie, takže vy ste všetci oboznámení s tým, čo hovoríme.
Za týmto rozdelením je dobré myslieť na svoje webové aplikácie, pokiaľ ide o
niekoľko rôznych komponentov.
Keď robíte vývoj webových aplikácií
jedna z vecí, ktoré by ste mali vždy sa snaží urobiť, je znížiť zložitosť.
Čím zložitejší je váš kód je väčšia šanca je robiť chyby,
ťažšie je neskôr zmeniť.
Takže, ak môžete rozbiť svoje aplikácie do niekoľkých rôznych funkčných oblastí
že bude - a môžete znížiť druh množstvo cross-oblasti komunikácie -
ktoré vám pomôže veľa v dlhodobom horizonte, pokiaľ ide o zníženie chyby.
>> Ak chcete byť konkrétny, väčšinou ľudí rozdeliť do webovej aplikácie do -
Jedná sa o druh slovíčkami teraz, ale sú stále užitočné.
Možno ste už počuli ľudí hovoriť o modely, pohľady a regulátory.
Modely sú skutočné údaje, že vaša aplikácia bude zaoberať.
Napríklad, v Cat Facebook, vaše modely by mohol byť -
budeš mať model, ako miesta, a model pre užívateľské profily, tak podobne.
Vaše názory sú, ako sa prezentujete, že dáta pre svojich užívateľov.
Môžete mať jeden pohľad na pri pohľade na jedného príspevku a všetky komentáre
a iný pohľad na stenu, ktorá obsahuje zoznam všetkých miest
ktoré sú zamerané na vás, a iný pohľad na vašu noviniek - a tak podobne.
Nakoniec, máte ovládače, ktoré sú v podstate, keď vám ľudia posielať príspevky
a urobíte aktualizácie back-end systému,
môžete zvýšiť veľa čítače, a čokoľvek.
To sú vaše regulátory.
>> Budem hovoriť hlavne o modely.
Pohľady sú technicky nie je tak ťažké, a problém je s ich navrhovanie
Regulátory sa bude špecifické pre čo ste navrhovaní.
Ale tam sú niektoré docela všeobecné techniky, ktoré môžete použiť
aby sa vaše modely krajšie a jednoduchšiu prácu s tým si myslím, sú veľmi užitočné.
Toto je väčšinou bude o tom, ako sa vysporiadať s vašej webovej aplikácie dát v príjemnom spôsobom.
Hlavnými problémami s modelmi
je, že žijú na klientom a serverom a vy budete musieť prísť na to,
), Ako ich dostať - všetky relevantné tie - zo servera na klienta,
a b) ako sa udržať je v synchronizácii.
Vaši užívatelia budú chcieť, aby sa niektoré aktualizácie.
Chystajú sa chcete vykonať nové príspevky.
Chystajú sa chcú páčiť veci, a tak, ak máte rád.
To sú hlavné technické problémy nakladania s modelmi.
Prvá vec, ktorú budete chcieť sa pýtať sami seba, je
aký druh dát ide v tomto modeli a aké otázky sa budeme chcieť urobiť -
to znamená, že ako sa budeme pozerať na modely?
Pre Vaše mačka Facebook Napríklad,
Váš príspevok bude mať autor s ním spojené,
niektoré steny po texte, a príjemca steny poštou.
A potom budete chcieť otázku, že v veľa rôznych spôsobov.
Budete chcieť, aby sa na neho, ktorý napísal aký príspevok,
podľa toho, kto prijal, ktoré urobíte, možno podľa dátumu, kedy boli zverejnené.
Ale ak sa chystáte robiť to podľa dátumu, potom sa budete musieť pridať ďalšie pole do svojho príspevku
kedy to bolo skutočne vyslaný.
Tieto dva faktory - aké dáta chcete použiť, a ako chcete zobraziť -
mali by ste uvažovať o nich ako prvé, pretože sú závislé na seba navzájom,
a to bude oveľa ťažšie je pridať neskôr.
>> Tam sú niektoré ďalšie aspekty.
Keď uvažujete o tom, ako sa vysporiadať s modelmi na serveri
to, čo budete chcieť pozrieť na je -
ste v podstate chcete, aby server tak jednoduché, ako je to možné.
Robiť veci na strane klienta je všeobecne oveľa rýchlejšie, ak môžete to urobiť čisto na klientovi
bez toho, aby nejaký druh požiadavke siete.
Cieľom je, aby to toľko otázok, ako môžete na strane klienta.
Jediným problémom, ktorý
je, že ak budete požadovať všetky vaše dáta na začiatku
potom, že to bude trvať dlho, aby zaťaženie.
Takže myšlienka je nájsť zlatá stredná cesta medzi tým dostatok dát na strane klienta
že môžete robiť väčšinu práce tam, ale nielen načítanie všetko naraz
tak, že dostanete naozaj pomalé zaťaženie časy na začiatku.
Napríklad, pre vaše mačky dát
budete pravdepodobne chcieť, aby priniesla veľa nedávnych nástenných pracovných miest.
Tie by nechcel, aby priniesla všetkým z nich, pretože to mohol vrátiť o pár rokov.
Ale nechcete, aby im zabehnúť jeden po druhom
preto, že by zaviedol veľa réžia siete.
>> Je to často veľmi ťažké - akonáhle budete mať databázy beží -
to je často veľmi ťažké zmeniť, aké údaje máte v ňom -
to znamená, pridať nový databázový stĺpec, alebo tak niečo -
takže jedna dobrá stratégia je vlastne len držať veľa vašich dát v textovom blob -
JSON blob - JSON je JavaScript Object Notation -
Dôvodom je to užitočné, pretože je potom môžete pridať nové vlastnosti
ku všetkým týmto JSON guličky bezo zmeny databázy.
Jediná nevýhoda, že je, že ak máte veľa odborov
že ste pridali neskôr - rovnako ako skryté v tomto JSON blob -
potom je to ťažšie je dotaz v databáze.
Napríklad, ak sa neskôr - ak ste mal svoj model post, ktoré sme diskutovali skôr
sa len autora, príjemcu a text -
môžete mať tiež JSON blob, a potom, ak ste neskôr chceli pridať polia pre dátum
nebudete musieť zmeniť svoje databáze.
Dalo by sa len pridať dáta do všetkých textových polí.
A potom by ste mali byť schopní pozrieť sa na tie, na strane klienta,
ale nebudete môcť pýtať na strane servera
pretože je to skryté vo vnútri tohto textu.
>> Ďalší problém, ktorý budete chcieť premýšľať o tom,
je, ako váš klient a server sa bude komunikovať.
Tie zvyčajne chcú, aby to tak jednoduché, ako je to možné.
Môžete mať rovnako ako-me-túto požiadavku GET dát a,
create-a-new-object vec, a požiadať o update-an-old-objekt.
A to by všetko byť rôzne adresy URL na serveri, ktorý -
že by prehliadač - môžete použiť požiadavky AJAX pre všetky z nich
a to buď prijať, alebo rozmiestniť svoje údaje.
Opäť platí, že pre naše mačka Facebook Napríklad,
môžete mať túto adresu URL získať individuálny príspevok,
a budeš mať URL pre vytvorenie nového múr príspevok
a možno URL pre nahrávanie vášho profilu obrázok, a tak podobne.
Ale opäť, to je pre-fetch väčšina vašich dát, takže nemusíte mať na
Vďaka sieťové požiadavky.
Z tohto dôvodu, možno nebudete chcieť, aby to individuálne žiadosť get pre jeden post,
a namiesto toho sa len chcete jedna žiadosť get pre celú stenu.
A potom, ak sa snažíte nájsť rovnováhu, pretože -
to bude tiež závisieť na vašej žiadosti.
Pretože ak ste očakával, že ľudia majú len 10 alebo 20 Príspevky na stene
že bude v poriadku.
Ale ak ste očakával, že budú mať tisíce a potom, že žiadosť by trvalo príliš dlho,
a tak možno budete chcieť pridať parameter get-všetky-príspevky-od.
>> Pre všetky z nich budete pravdepodobne chcieť synchronizovať dáta v JSON -
JavaScript Object Notation.
Skoro každý jazyk sa zaoberá JSON veľmi dobre.
JQuery má túto peknú funkciu getJSON, ktorý bude robiť všetky tvrdej práce pre vás.
A na PHP je tu tiež veľmi pekné JSON komunikačné funkcie.
Tak, to je asi najlepší formát pre zasielanie modelov tam a späť.
>> Ako príklad toho, čo sme hovorili o tom tak ďaleko,
Tu je príklad toku pre vašu mačku Facebook aplikácie.
Začína s prehliadačom, ktorý požaduje základné adresu URL webových stránok.
Server pravdepodobne pošle cez statické HTML a niektoré JavaScript a CSS.
Obvykle je najlepšie nerobiť žiadnu vykresľovanie na serveri.
Vy asi nechcete -
čo server nie je tam robí sa deje sa ustanovuje zoznam nástenných príspevkov
a vytvorením HTML pre každú z nich a odoslanie, ktoré v priebehu.
Obvykle je najlepšie k tomu, že na strane klienta, pretože inak
zakaždým, keď budete chcieť znova kresliť niečo, čo musíte urobiť požiadavka servera.
A to vám veľmi rýchlo dáva veľa nad hlavou.
Je to zvyčajne najlepšie len preto, aby loď pošle statické HTML
a potom JavaScript a CSS, ktorý bude robiť vykresľovanie na strane klienta.
Akonáhle že veci príde,
potom môžete mať - v JavaScripte - môžete urobiť požiadavky na údaje na stenu
a tak podobne, a potom, že server je v podstate len to, databázové dotazy
a kontrolu oprávnenia.
Jediná dôležitá vec je, že to nie je možné odosielať cez niektoré ďalšie používatelia nástenné príspevky
že nesmieš vidieť.
To môže byť v zásade veľmi tenká vrstva prístupu k databáze,
a potom všetci ukazovať dáta - všetky pohľady a tak -
ktoré sa môže stať vo svojom prehliadači, a potom, keď chcete, aby sa príspevok alebo tak niečo
stačí poslať ďalšiu žiadosť.
>> Tam je tiež nejaký ozdobný veci môžete robiť na vrchole tejto.
Pokiaľ ide o ďalšie konkrétne technické informácie,
rozvíja v prostom JavaScript môže byť trochu bolestivá,
takže tam sú niektoré knižnice a nástroje, ktoré vám pomôžu veľa s tým.
Myslím, že ste všetci asi počuli o jQuery čo robí HTML renderovanie
a manipulácia oveľa jednoduchšie - majú veľa efektných funkcií pre blednutiu dovnútra a von,
a robí Zippy animácie.
K dispozícii je tiež táto knižnica s názvom Underscore.js.
Má veľa užitočných funkcií nástroje, veci, ktoré by ste očakávali JavaScript, aby sa
že je to naozaj doesnt - veci ako miešanie pole,
odstránenie duplicít zo zoznamu, alebo sploštenie zoznam zoznamov.
To je len malá ukážka kódu.
Underscore má veľa týchto pekných funkcií, ktoré si prajete by ste mať po celú dobu.
>> A potom je tu 1 ďalšie knižnice, ktoré by som chcel stráviť trochu času na
tzv Backbone.js pretože chrbtica naozaj pomáha sa vysporiadať s modelmi na strane klienta
a mnoho zmätku, ktorý to môže spôsobiť.
Chrbticovej vám toto poňatie modelov a kolekcií
v JavaScripte, ktoré sú v podstate úplne rovnako ako objekty JavaScriptu
v poliach JavaScriptu, ale majú udalosti, keď zmeníte ich vlastnosti.
Rovnako ako v JavaScripte, môžete mať udalosť, keď sa kliknutí na tlačidlo alebo tak niečo
Tieto chrbticovej modely a chrbtice zbierky bude vysielať veci, ako je
, Že keď sa mení.
To znamená, že môžete len napísať niečo také fragment kódu tu -
to hovorí, keď pridáte niečo na príspevky pole môžete prekresliť celú stenu.
A to by som povedal, keď počet post zo rád zmeny,
môžete užívateľa upozorniť, že niekto mal rád svoj príspevok.
Alebo ak je niektorá vlastnosť príspevku zmení ste prekreslenie príspevok.
Veci ako, že vám ušetrí veľa zložitosťou, pretože inak
ak nemáte niektorých rámcových ako je tento a potom zakaždým, keď vo svojom kóde, ktorý zmení
niečo o miesto, mali by ste mať na pamäti, sami volať všetky vykreslenie funkcie sa
a tak podobne, a ak ste chceli pridať niečo nové, čo sa stalo
zakaždým, keď zmeníte príspevok budete musieť prejsť každé miesto vo vašom
kód, ktorý ste zmenili príspevok a dodáva, že nové veci.
Rámec takto odstráni veľa, že medzi-vrstvy komunikácie
že je váš kód zložité a ťažké udržať.
>> Tam je to trochu o názory tiež.
Chystám sa opustiť väčšinu to Billy, pretože to technicky nie je príliš ťažké.
Použitie jQuery pre vaše názory. Je to prakticky ako nutnosť v tomto bode.
Je to proste robí všetko tak oveľa jednoduchšie.
Existuje mnoho knižníc.
Ak ste zložité prvky užívateľského rozhrania,
Ak chcete automatické dokončovanie vec, alebo ako jeden z tých fantázie multi-selektora -
Ak chcete niečo také, mali by ste asi len okolo hľadať
a môžete nájsť dobrú knižnicu, ktorá bude robiť to, čo chcete.
Billy sa vysvetliť viac o skutočne zložitých dielov názorov.
Tiež, ako vedľajší poznámku, chrbtica má niektoré funkcie pre vytváranie zobrazenie komunikovať
pekne s modelmi - pozrite sa na dokumentáciu pre všetky z týchto knižníc, v skutočnosti.
Stačí sa pozrieť na dokumenty. Sú to veľmi dobre napísaný a ľahko sledovať.
Všeobecne platí, že môžete skoro len Google, ak máte problémy.
Existuje veľa ľudí, ich použitie.
Myslím, že to je ako poslednú poznámku.
>> Tam sú tiež niektoré pokročilejšie veci, ktoré môžete urobiť
Ak hľadáte, aby vaše webové aplikácie navyše úžasné.
Môžete to urobiť - nová špecifikácia HTML5 má veľa fantázie, čo môžete urobiť.
Miestne úložisko - čo je môžete ukladať dáta v prehliadači -
skôr než sa vrátiť a preštudovať server pre všetko,
môžete mať niektoré z nich na klienta, a to dokonca umožňuje ľuďom -
v niektorých prípadoch môže dokonca vám umožní použiť webové stránky v režime offline.
Tam je to, čomu sa hovorí WebSockets, ktoré sú rôzne druhy sieťovej komunikácie
kde miesto len urobíte jednu žiadosť, dostanete odpoveď, a máte hotovo,
budete mať otvoriť pripojenie k serveru, a tak si môžete robiť veci, ako je
Aktualizácie v reálnom čase.
Takže, ak ste sa snažia zarobiť na aplikáciu pre chat, môžete použiť WebSockets
komunikovať tam a späť, takže by ste nemuseli držať vyžiadanie,
"Ach, server, to mi niekto poslať porozprávať?" každých 10 sekúnd alebo tak niečo.
K dispozícii je tiež zaujímavá HTML5 funkcie, kde si môžete, aby to vyzeralo, ako
URL stránky sa mení, bez toho aby ste museli skutočne vložte ho.
Môžete použiť tlačidlá Späť a Vpred, bez robili veľa žiadostí siete.
Veci ako, že je skutočne užitočné, pokiaľ ide o robiť to rýchle, ale tiež pracovať ako webové aplikácie by mala.
>> K dispozícii je tiež to, čomu sa hovorí CoffeeScript.
CoffeeScript je iný jazyk, v skutočnosti, že zostavuje až JavaScript.
Tie by sa napísať celý kód v CoffeeScript, a potom spustiť tento kompilátor,
a to vypľuje súbor JavaScriptu, ktorý môžete zahrnúť do svojej webovej stránky.
Dôvod, že CoffeeScript je pekné je, pretože to zbaví mnohých
podivné prípady, že JavaScript ak má sa rovná rovná,
a rovná sa rovná robiť rôzne veci, alebo chcete -
má krajší syntax pre riešenie polí a funkcií.
To je malý úryvok z CoffeeScript, ktoré vytvára zoznam všetkých štvorcov
od 10 ^ 2-1 ^ 2 v opačnom poradí.
Ako môžete vidieť, CoffeeScript často umožňuje vyjadriť v 1. riadku
čo by sa päť riadkov JavaScript.
To môže robiť veci oveľa jednoduchšie.
Je to trochu o novej syntaxi učiť na prvú,
ale je to určite vám bude viac produktívne v dlhodobom horizonte.
>> Môžete použiť aj iné jazyky na serveri, ako PHP -
jazyky ako Ruby, Python, alebo tam je aj projekt s názvom Node.js
ktoré vám umožnia používať JavaScript na serveri.
Osobne som naozaj, ale naozaj neznášam PHP.
Ja jednoducho baví práca s ním.
Ak ste tiež, myslím, že to je hrozné cluge jazyka,
potom môžete použiť jeden z nich miesto.
Všeobecne platí, že ak chcete niečo urobiť, a vy naozaj neviem, ako by to urobil,
stačí hľadať na internete.
Tam sú tony a tony zdrojov, najmä na -
StackOverflow je skvelá jedna.
Je to webová stránka, kde programátori klásť navzájom otázky.
Možno ste naraziť na to, ak ste boli s problémami na CS50 problémových sád.
A tam sú tony knižníc pre to čokoľvek by ste chceli.
Ak chcete niečo urobiť a neviete ako na to,
Nepredpokladáme, že je to nemožné.
Stačí sa pozrieť okolo seba a vy by ste mohli nájsť nejaké dobré zdroje.
>> Ako všeobecné zabaliť,
hlavný stánok s jedlom je udržať veci jednoduché.
Zložitejšie váš kód je na začiatku
a viac sa snažiť a robiť efektné veci,
tým dlhšie bude trvať, než niečo skutočne funkčný
a tým ťažšie to bude neskôr zmeniť.
Takže, robiť veci hlúpe, jednoduchý spôsob, ako prvý.
Ak chcete ísť spolu s tým,
neboj sa o zahodili starý kód alebo čistenie to veľa.
Všeobecne platí, že akonáhle ste skutočne niečo prácu,
je to oveľa jednoduchšie premýšľať o tom, ako keď ste stále v počiatočných fázach
ako mám dať to všetko dohromady.
Je to najlepšie, aby najhlúpejší možný dizajn, ktorý funguje
a potom ho zlepšiť opakované než sa snažiť, aby si všetko hneď na prvýkrát.
Pokiaľ ide o rozdelenie klient-server, a pokúsiť sa udržať svoj server veľmi jednoduché -
len databázy a niektoré overovanie a nerobia tam žiadnu ťažkú ​​prácu.
Vykonajte všetky svoje komplikované veci na strane klienta v prehliadači
v JavaScripte, rovnako ako môžete.
Rozhliadnite sa okolo seba pre knižnice, ktoré robia váš život lepšie.
Vždy lepšie použiť kód, ktorý niekto napísal
ak - a nie, aby to napísať sám.
Je tu veľa vecí na internete. Google je váš najlepší priateľ.
Google je najlepší priateľ programátora.
Jo, rozhodne sa nebojte sa porozhliadnuť na veci.
Dobrá. A na Billyho.
>> [Billy] V skutočnosti, než začnem s nejakou konštrukčné veci,
má niekto nejaké otázky Ben o ničom, že hovoril o?
Dobre, dobre.
Opäť platí, dajte nám vedieť, ak niečo nie je jasné,
alebo ak by ste chceli, aby sme šli nad niečím trochu viac.
Idem krok späť trochu a hovoriť o viacerých základných častí konštrukcie.
Ben spomenul model s názvom - sorry, model pohľad kontrolór systém
čo je druh technického hľadiska, tak idem sa pozrieť na názory špecificky,
a ja idem začať s tým, ako by ste navrhnúť, že vyzerá pekne.
Tu je trochu naozaj základné šablóny pre naše mačka na Facebooku.
Myslím, že tam sú niektoré základy v modernom dizajne používateľského rozhrania
že stojí za vyzdvihnutie.
Môžete si všimnúť, že je veľa prázdneho miesta po celej stránke,
dostatok priestoru pre veci.
Nemajte pocit, ako by ste mali na squash veci do stránky.
Ak chcete ponechať dostatok priestoru otvorené, a keď idete do takmer každej modernej webovej stránky
uvidíte, že je to biela všade.
K dispozícii je biela v miestach, by ste nečakali.
Máte tento paletu farieb, a je múdre na začiatku
vybrať farebnú paletu, že budete pracovať a rozvíjať sa.
Môžete tiež - to pomáha vybrať písmo, a to tak, ako to trochu práce s
Tieto betónové základy designu.
Máte svoj typ, budete mať svoje farby, a potom môžete druh
vojde všetko ostatné podľa potreby.
Takže, ako som povedal, s farebnou schémou chcete použiť odvážnejšie farby vášho farebnej schémy
striedmo. Hlavičky sú pekné. Tlačidlá sú pekné mať naozaj veľké, efektné farby.
Ale všeobecne, ak máte webové stránky, ktorá má farby všade,
všetky vás hľadí tvárou v tvár, to jednoducho vyzerá neprehľadne, a to nie je dobré.
Ak chcete všeobecne používajú svetlé farby.
Snažte sa, opäť, vybrať celkom koherentné farebnú schému.
Môžete mať tieto malé postriekania množstvom farieb -
ktoré môžu vyzerať celkom pekné, ale chcete používať dosť striedmo.
>> Ako som povedal, chcete byť minimálna. Menej je takmer vždy viac.
Ak môžete zobraziť niečo, alebo nie zobraziť niečo,
a vy ste celkom istý, či by to malo byť, že v predvolenom nastavení -
Pravdepodobne ste najlepší, keď odchádza von. Vždy sa môžete pridať neskôr.
Jo, udržať veci jednoduché.
Ale čo je najdôležitejšie, budete chcieť, aby zvážila niekoľko návrhov.
Nemyslite si, že keď urobíte stránky, budete mať v hlave, že budete na
aby miesto v určitým spôsobom, a bude to vyzerať presne takto.
Bude to mať modré záhlavie v hornej a modrej bočné lišty
a potom žlté sub-header vec.
Ak chcete vytvoriť viac šablón.
Môžete buď - ak ste dobrý s Photo Shop, môžete otvoriť, že sa aj trochu
vytvoriť webové stránky, ako sa vám páči, aby to vyzeralo.
Ak nie, stačí použiť ceruzku a papier,
ale poškriabať sa viac návrhov.
Ak chcete mať v podstate nastaviť, kde budete mať veľa rôznych vzorov,
a ak jeden skončí v práci, potom je to skvelé.
Ak jeden skončí nedarí, potom budete mať vždy iný sa obrátiť.
Všeobecne platí, že nemajú pocit, že by mala byť obmedzená
do akéhokoľvek dizajnu ste pôvodne rozhodovať o
Návrhy sú veľmi variabilné, a časť významu modelu
pohľad radič je systém, ktorý môžete vymeniť dovnútra a von rôzne pohľady, ktoré chcete.
Môžete ovplyvniť dáta, na jednu stranu, a potom sa rozhodnúť, oh, vlastne, že nefunguje tak dobre.
Myslím, že je to trochu príliš zložitá alebo tú časť tu, že to nie je naozaj funguje,
tak som len tak úplne opustiť tento názor a swapu v úplne novej.
Môžeme stále používať staré modely a staré ovládače.
Môžeme robiť všetko na serveri a klientovi, ako by sme predtým.
Ale skutočná vlna dáta sú zobrazené sa bude mierne líšiť.
>> Čo sa týka skutočnosti, ktorým sa vykonáva návrh, ktorý chcete,
Akonáhle budete mať niekoľko návrhov načrtol na papier alebo na Photo Shop, alebo čokoľvek,
existuje rad nástrojov, ktoré sú vám k dispozícii.
Prvý, že ste veľmi dobre oboznámení s, čo je vaša HTML, PHP, alebo čokoľvek
jazyk, ktorý používate len pre kódovanie statických stránok na vašich webových stránkach.
Vy ste veľa pracoval s HTML, ktoré vám trochu dáva tieto tagy
že si môžete dať veci do, a v podstate je to spôsob, ako organizovať svoj obsah.
Napríklad, máte hlavičku hore, takže budete mať značku záhlavie,
a to bude mať nejaký text vnútri nej, ktorá sa pravdepodobne bude v inom tagu.
Potom máte sidebar možná s niektorými rôzne odkazy,
a tie budú všetci v samostatných značiek.
Takže, v podstate HTML vo svojom srdci je spôsob, ako rozdeliť stránky ako
budete nakoniec chcieť naformátovať.
Takže ešte raz, čo ste videl, že.
Si celkom spokojní s prácu s ním teraz
za predpokladu, že ste urobili posledný pset dúfajme,
tak, že by nemal byť problém.
>> Potom máte CSS, ktoré v podstate spracováva všetky dizajnu statických aspektov.
To by zvládnuť všetky farby, všetky polohy rôznych prvkov,
kam idú voči sebe navzájom,
ako sú veľké, rôzne druhy positionings, ktoré by mohli mať -
Inými slovami, môžete mať veci pevne, takže pri posúvaní nadol zostávajú,
alebo môžete mať veci vo vzťahu k ostatným prvkom.
Všetko o tomto druhu vecí je v CSS.
Okrem toho môžete robiť rôzne dekorácie, môžete mať farbu textu,
textové efekty, všetky takéto veci.
Ben dal naozaj dobrý seminár o tomto víkende,
a tak by som určite skontrolovať, či, či máte v pláne robiť nejaké efektné veci s CSS.
CSS3 je vlastne najnovšia verzia CSS, a to môže robiť všetky druhy naozaj pekné veci.
To môže robiť sklony, môžete mať pekné, zaoblené rohy, môžete robiť všetky možné veci
aby vaše webové stránky vyzerať moderné a fantázie.
>> Ďalší nástroj je JavaScript a jQuery, ktoré Ben hovoril trochu o,
ale budem trochu ďalej do.
JavaScript, ako ste pracovali s ním trochu, alebo aspoň videli v prednáške,
je druh spôsob, ako dynamicky robiť veci v HTML.
HTML, ako viete, je statická, takže až budete mať HTML nemôžete ju zmeniť.
Ale JavaScript, v niektorých ohľadoch, je spôsob, ako byť schopný modifikovať HTML.
Takže si môžete urobiť, a to je skvelé, ale JavaScript je naozaj bolesť s ním pracovať.
Je to tak dlho a tupé, a to dokonca aj tie najjednoduchšie veci
vyžaduje veľa riadkov JavaScriptu.
Takže, jQuery je v podstate knižnica JavaScript, ktorá zjednodušuje všetko.
To hovorí, dobre, ak chcete mať štvorcový rámček prišiel z ľavej strany
a ustúpiť do strany tak, že je v strede, v JavaScripte, ktoré by sa brať -
Ja neviem, sto riadkov robiť, a to by bolesť,
a vyjdete z toho nenávidieť všetko o programovanie pre web.
JQuery ste v podstate máte element-dot-fade-in, alebo niečo také.
Takže, veľmi, veľmi jednoduché funkcie, ktoré vám umožní robiť všetky druhy skvelých animácií
a že takéto veci.
Ďalšia vec, že ​​tieto 2 sú naozaj dobré je len to, dynamické veci
s webovými stránkami.
Takže, skôr než len s vašou HTML stránky - ktorý zobrazuje niektoré údaje, ale nie je v skutočnosti
nič robiť - budú JavaScript a jQuery nech máte tlačidlá, ktoré môžete kliknúť na,
a môžete pretiahnuť prvky a re-objednávať je a triediť ich, a majú nové prvky
pridané alebo odstránené. Môžete pridať, mazať, také veci.
Takže, jQuery robí veľa skvelých vecí.
A Vipul je vlastne dáva seminár o tom dnes, verím, že na 5-hodín,
takže ak môžete držať okolo tak dlho, že by - 5 alebo 4?
Štyri. Prepáčte. Je to vlastne hneď po to, tak by som odporučil
držať okolo pre neho, ak je to možné.
JQuery je super, super užitočné, a vy budete môcť robiť veľa naozaj pekných vecí s ním
pre skoro akýkoľvek vývoj webových projektov.
>> Teraz idem sa dostať do druhu rozlišovania.
Hovoril som v podstate o užívateľskom rozhraní.
Užívateľské rozhranie je len dizajn stránok.
Ale je to trochu iný koncept, ktorý je užívateľské skúsenosti.
Obaja sú veľmi odlišné.
Rozhranie je určite súčasťou skúsenosti.
Inými slovami, keď idete na webe, môžete sa pozrieť na rozhraní.
To je súčasťou toho, ako sa u Vás objaví na webe.
Ale skúsenosť užívateľa je viac než to.
Užívateľ skúsenosť je o tom, čo dojem, že používateľ dostane z vášho webu je.
Takže, samozrejme, rozhranie je súčasťou.
A to je určite nevyhnutnou súčasťou, ale to nestačí.
Inými slovami, ak máte príjemné rozhranie, a je to pekné a farebné a to všetko,
To je skvelé, ale v prípade, že používateľ prejde na vaše stránky, vidí peknú rozloženie a je zmätený
všetko, nemá potuchy, ako to urobiť nič, potom samozrejme ste urobili naozaj
zlá webové stránky.
Je to druh, kde užívateľské skúsenosti vypovedaciu
Ja budem hovoriť trochu o UX dizajne - UX je skratka pre užívateľské skúsenosti -
a trochu o tom, ako sa môžete uistiť, že máte dobrú užívateľskú skúsenosť.
Prvým bodom je, že môžete vytvoriť webové stránky, kde si používateľ môže robiť čokoľvek, čo
že používateľ pravdepodobne chce.
Ale v prípade, že používateľ nemôže prísť na to, ako robiť tie veci -
Inými slovami, v prípade, že používateľ nemá dobrý nápad, keď idú na vaše stránky mesta,
"No, keď chcem aktualizovať svoj profil, potom som kliknite na toto tlačidlo, alebo keď chcem písať o
niečí stenu, potom som sa ísť na ich stene a kliknite na škatuľke. "
Ak používateľ nevie, že, potom ste skutočne majú v skutočnosti
vykonané správne, že funkčnosť.
Súčasťou implementácie funkcie je, že užívatelia sú skutočne schopní ju používať.
A to môže byť frustrujúce - môžete urobiť stránky, a to môže robiť všetky druhy
úžasné veci, ale potom budete mať ľudia vyskúšať a povedal: "To nemôžete urobiť.
Prečo nemôže to urobiť? "A budete hovoriť späť k nim,
"No, je to možné. Musíš ísť do 7. rozbaľovacej ponuke na tento temný
Stránka, ktorá sa nachádza iba pomocou odkazu v pravom dolnom pravom rohu ", alebo tak niečo.
Je zrejmé, že nechcete, že.
Chceš, aby to bolo jasné pre užívateľov, čo majú robiť,
a to by malo byť jednoduché a intuitívne pre ne.
>> Ďalšia vec, ktorú chcete, aby sa pokúsili urobiť, je, ak niekto pôjde na vaše stránky
a 9 z 10 krát robiť akcie A a 1 z 10 krát robiť akčné B,
pravdepodobne budete chcieť zamerať svoje skúsenosti na akcie A.
Inými slovami, chcete, aby sa to veľmi, veľmi jasné, ako to urobiť A.
By mala byť predné a-centrum - k dispozícii na webe, pozri to, ach, je to tu.
Vzhľadom k tomu, B, samozrejme chcete, aby bolo jasné, ale môžete ju nechať trochu viac
v pozadí.
David dáva dobrý príklad tohto v prednáške,
čo je systém Boston T.
Keď idete do Bostonu T a chcete si kúpiť lístok,
musíte sa dostať do 5 menu, než budete môcť skutočne kúpiť lístok
za $ 2, 2,50 dolár hodnotu, ktorá je, ako veľmi to má jazdiť metrom
v jednom smere.
To je problém, pretože väčšina ľudí, ktorí sú na koni na metro
pravdepodobne len chcem ísť na jednom mieste, kúpiť vstupenku, sa na hneď.
To nedáva zmysel, že budú musieť prejsť mnohými rôznymi ponukami
sa tam dostať.
Lepší užívateľský zážitok bude rýchly tlačidlo na prvej stránke
že len hovorí, "kúpiť jednosmernú letenku," a že by sa dal vo všetkých štandarde
predvolené hodnoty, a potom, ak niekto chce kúpiť inú letenku, než to,
stále, samozrejme, majú možnosť, ale vy ste optimalizované pre
v prípade spoločného použitia, ktorý je naozaj dôležité.
Môžete vidieť príklady tohto na Facebooku, že jo?
Ak sa vydáte na Facebook a chcete písať stavu,
to je priamo na vrchole, ktorý je to, čo často chcete robiť.
Akonáhle vstúpite na stránku, môžete tak urobiť najbežnejšie veci, ktoré
chcete robiť.
Ak chcete urobiť niečo zložitejšie veci, ako je,
že chcem ísť do steny môjho priateľa, a možno vystaviť obrázok na ňom -
ktoré budem chcieť robiť často, ale nie tak často, ako vysielanie aktualizácie stavu -
tak v tom prípade, by som zadajte svoje meno do poľa hore, kliknite na ich profile,
a potom, ešte, že je to priamo na vrchole, akonáhle som sa dostal do ich profilu.
Opäť som optimalizované priority pre prípady najčastejšie použitie.
>> Ďalšou dôležitou vecou je, že často ľudia budú trochu snažiť, aby tento postup obísť
tým, že hovorí, dobre, tak som robil miesto a ľudia zisťujú, že je mätúce,
a to je problém, nie?
Je zrejmé, že nechcem, aby sa ľudia zmätení obsah môjho webu.
Ale spôsob, ako vyriešiť to, že nemá čo vyskočí hovorí,
hej, budem vás naučí, ako používať túto stránku.
Krok 1 - kliknite na toto tlačidlo. Krok 2 - nájdete tu.
Jasne, že je to spôsob, ako okolo neho - to je spôsob, ako môžete povedať ľuďom, čo majú robiť, ale je to
naozaj nie je optimálny spôsob.
Ak by som ísť na webové stránky, a zrazu som bombardovaný s týmto tutorial, ktorý ma hovorí
čo majú robiť a kam ísť, a to všetko, že to nie je zábava pre mňa.
Nie je to dobrá skúsenosť pre mňa.
Je to trochu bolesti. Chcem len začať robiť veci.
Ľudia idú uzavrieť z dialógového okna svojho,
alebo vypadni z tutoriálu, neviem, čo robiť, a potom sa sťažujú, pretože
ste im povedal, čo majú robiť.
Spôsob, ako vyriešiť tento problém tým, že nie je žiadny druh kurzu a smery -
niečo také.
Rovnako ako sa môžete vyhnúť, naozaj chcete ukázať užívateľovi, čo má robiť
práve vzhľadom k povahe toho, ako sa webové stránky stanovený.
Inými slovami, keď pôjdem na Facebooku bez prihlásenia,
Prvá vec, ktorú vidím na hlavnú stránku -
je to trochu prihlasovacie okno. Takže, duh. Musím sa prihlásiť Je to priamo tam.
Vzhľadom k tomu, keď som išiel na Facebook a musel som kliknúť na malý odkaz v dolnej časti
že povedal "prihlásiť" a zvyšok stránky bol len nejaký obrázok alebo tak niečo,
Ja by som naozaj neviem, čo mám robiť, že jo? Chcel by som byť zmätený.
Takže by mi to, aby som sa tam dole a kliknite na tlačidlo pre prihlásenie,
alebo Prihlásiť tlačidlá by mohla byť na vrchole, kde budem vidieť pravdu.
Chcete byť vždy ukazuje užívateľovi, čo má robiť,
a ktoré by mali byť vlastné samotnej stránke.
>> Ak uvažujete o návrhy a zosmiešňovať sa rôzne spôsoby
vyjadruje svoje stránky, chcete naozaj premýšľať o tom, čo používatelia budú
robiť a ako môžete ukázať im, čo majú robiť.
Jedna posledná vec je testovanie je naozaj, ale naozaj dôležité.
Je skvelé dostať niekoho - získať priateľa, niekoho, koho nepoznáte ani -
kto nikdy nevidel miesto, než používať stránky.
Vzhľadom k tomu, že ste pracoval na mieste niekoľko hodín, ste na neho pozeral,
a budete presne vedieť, čo robiť, takže zrejme budete testovať
veci, ktoré ste pracovali ďalej a že viete, práca.
Ale keď niekto príde a používa web, ktorý sa nikdy nepoužívali,
to je jedinečný zážitok, pretože budete mať niekoho, kto nemá žiadne predchádzajúce znalosti
na mieste ísť do neho, takže budete musieť účinne potuchy, čo robiť
alebo aký druh prípadov použitia sú prítomné pre ne.
To je skvelé. To je unikátny, pretože oni sú v podstate človek s prázdnou pre myseľ.
Môžu povedať, či niečo je mätúce alebo nejasné.
Môžu vám predstavu o tom, čo presne užívateľské skúsenosti vašich stránok je.
To môže byť veľmi ťažké povedať, že sám seba, takže určite by som vás povzbudiť
ako budete rozvíjať svoje projekty - ak robíte webových projektov -
aby si ľudia pomocou stránky ako skoro ako máte nejaké funkčné demo.
>> Teraz budem hovoriť trochu o tom, ako riadiť vývoj webových aplikácií projektu.
Išli sme nad tým, ako si môžete urobiť technickú back-end stranu,
ako si môžete vytvoriť naozaj dobré miesto,
a to je skvelé, ak pracujete sami, ale -
aj keď pracujete sami, a to najmä v prípade, že pracujete v tíme,
riadenie projektu sa stáva veľkým problémom.
Vy ste trochu počul o riadení projektov v rôznych formách od
základná škola, keď si povedal, skupinovú prácu.
Musíte spolupracovať, komunikovať, všetko.
To všetko stále platí tu, ale tam sú niektoré jedinečné okolnosti
počítačová veda, že chcete byť vedomí, a chcete sa uistiť, že zvládnuť dobre.
Porozprávam si najskôr niečo o tíme, ktorý budete mať palcov
Je veľmi dôležité vybrať správnu veľkosť tímu sa pracuje,
a ja som vo svojom poslednom projekte, že máte možnosť zvoliť
medzi 1 a 4 osoby, ak sa nemýlim.
Chcete, aby sa ubezpečil, že nie ste len výber počtu osôb
že chcete pracovať s, pretože sú vaši priatelia.
Ak si chcete vybrať tím, ktorý je dobré veľkosti, a že budú mať prácu.
Tam je kompromis v tom, že viac ľudí, oproti menej ľudí.
Ak máte viac ľudí, samozrejme viac práce môže byť vykonané
preto, že máte veľa ľudí, veľa kódu, veľa nápadov,
a to je všetko skvelé.
Ale je to tiež vyžaduje oveľa viac konaní a omnoho viac komunikácie.
Inými slovami, ak máte 4 ľudí pracujúcich na rovnakom projekte
a oni sú všetci editácia rovnaký kód, viac či menej, že všetky druhy potrebujú vedieť,
čo sa deje tak, že vyžaduje, aby ste -
ak pridáte nejakú novú funkciu, ktorú nejako musieť hovoriť ľuďom - Ja pridanie to,
Mením to týmto spôsobom - a to najmä, ak sa dostanete do naozaj hlbokej veci
ako modely a regulátorov, ktoré sú v skutočnosti idú ovplyvniť, ako web funguje.
Celý tím musí byť vedomí toho,
takže je potrebné sa uistiť, že nie ste výberom príliš veľký tím, ktorý to bude ťažké
aby túto komunikáciu.
Tiež nechcete si vybrať malý dosť tím, ktorý vám nebudeme
byť schopný komunikovať, pretože je to len vy.
>> Ďalšia vec, aby zvážila, je rovnováha, kde zručností ľudí sú.
Je to skvelé, keby ste všetci naozaj dobrí programátori.
Ale ak ste všetky back-end ľudí, potom sa vaše stránky nebude vyzerať veľmi dobre
preto, že máte túto veľkú databázu, a to robí super-rýchlych vyhľadávacích dotazov -
čo je skvelé - ale keď idete na to, je to ako na webe 1990 je s červená a modrá
všade, a to nie je dobré.
Všimnite si, že Ben a som pracovať ako tím, sú veľmi pekné, pretože som trochu viac
v prednej časti, obaja sme komunikovať v strednej-end, a Ben je naozaj dobrý s back-end veci,
takže funguje naozaj dobre, pretože môžeme vytvoriť ľubovoľnú webovú stránku a v podstate diery
v tomto mieste, ktoré je potrebné vyplnené môžu byť vyplnené buď jeden z nás, alebo prípadne oboje.
Chcete, aby sa ubezpečil, že sú vo vašom tíme žiadne diery.
To je v poriadku, ak tam je trochu prekrývajú.
Inými slovami, ak máte dvoch ľudí, ktorí sú obaja dobré sa zadnom konci,
ktoré môžu byť dobré aj preto, že môžu navzájom pomáhať s problémami
, Ktoré majú.
To môže byť problém, ak máte len 1 osobu, ktorá je zodpovedná za určitú vec
a oni narazia na problém, takže vy chcete mať trochu prekrývajú
ale čo je najdôležitejšie, chcete, aby sa ubezpečil, že všetky možné otvory sú vyplnené.
>> Posledná vec - a to by malo byť zrejmé, ale je to často nie je.
Naozaj chceš, aby sa baví.
Zmyslom tohto posledného projektu CS50 a často bodom vývoj webových aplikácií všeobecne
nie je len robiť prácu, pretože je potrebné robiť.
Naozaj chceš, aby sa bavia, a chcete, aby sa robiť niečo
že motivuje vás na ňom pracovať.
Ak čokoľvek robíte, je bolesť sadnúť a pracovať,
potom nie ste výberom vhodného projektu.
Ak si chcete vybrať niečo, čo nájdete zaujímavý,
naozaj chcete vidieť výsledok, ste radi, keď dostanete novú predstavu o tom,
niečo, čo by ste mohli urobiť - takže je tu všetky druhy projektov tam, že som si istý,
nájdete - každý má niečo, čo by naozaj intrigy im
ak robíte projekt, internetový.
Poviem to ešte raz teraz.
Ak váš projekt javí ako bolesť, a nechcete pracovať na tom,
vybrať iný projekt. Vyberte si niečo, čo vás naozaj inšpiruje.
>> Ben spomenul tento pojem iterácie trochu, a ja chcem ísť na to trochu.
Je to naozaj dôležité pracovať v prúdoch, kde môžete získať niečo funkčné.
To môže byť skvelé, ak máte tento plán pre webové stránky, ktoré sa chystáte, B a C,
a nakoniec to bude sa tam dostať.
Ale vy ste uviazol v tejto fáze, kedy ste na ňom pracovali a pracujú na tom,
ale nič sa stále vykonáva. Nemusíte nič vidieť a hmatateľný, funkčná vec.
To, čo naozaj chcete robiť, čo sa zdá, druh bolesti niekedy
pracovať na niečom a potom nejako viečko ju tak, že je to prinajmenšom stabilný, beží
verzie, aj keď to nemá všetky funkcie, ktoré chcete.
A možno, že tam sú niektoré funkcie, ktoré naozaj chcete pridať, ale jednoducho nemôže
preto, že chcete, aby sa na túto stránku do funkčného hľadiska.
A tak si chcete trochu mať Celý proces vývoja vyzerať, že.
Ak chcete začať niekde funkčné - alebo v podstate začať s ničím -
ale chcete dostať niekam veľmi jednoduchý a funkčný.
A potom znova, aby akýsi skok a dostať sa zase niekde funkčné.
Budete sa pomaly budovať, a to by mohlo ísť o niečo pomalší, než by inak,
ale v dlhodobom horizonte, ak ste stále uviazol v tejto strednej fáze krajiny, kde sa
nie sú v skutočnosti nič pracuje, môže to byť naozaj veľká frustrácia
pracovať na projekte, pretože si vždy tak blízko k získaniu to funguje,
a je to vlastne nikdy pracovať.
Chcete pracovať v týchto funkčných prúdoch,
a budete tiež chcieť urobiť nejaké reflexii po každej z nich.
Inými slovami, akonáhle ste na mieste, kde stránka je teraz pracuje -
to nemá čo sa vám páči, ale to robí niektoré veci -
Ak chcete si, jo, je to miesto plnenia cieľa, ktorý som sa rozhodol robiť?
Inými slovami, v prípade, že web bude robiť X, je to, čo som pracoval v smere X?
Sú všetky funkcie, ktoré som tam chcel?
A naviac, je to slúži celkový účel, ktorý chcem?
Ak máte zistenie, že vaše stránky sa začína zatáčať v inom smere
alebo možno veci tak nejako nefungujú, môže to byť čas, aby radiť trochu.
Inými slovami, je to stojí za úvahu - stojí to za vyhadzovali nápady pokiaľ je to nutné
a vzhľadom k tomu mám naozaj funguje na to, čo chcem byť.
>> Verím, že je to môj ďalší bod. Nebojte sa vzdať myšlienky.
Len preto, že ste strávil veľa hodín práce na funkciu
a konečne dostal to funguje, ale je to naozaj nebude tak dobre -
ako že to nie je tak užitočné, alebo užívatelia majú problémy s jeho použitím - také veci -
nebojte sa vyhodiť.
Je to na hovno, že ste strávil veľa času pracovať na tom,
ale nakoniec nechcete web, ktorý sa trochu dať dohromady týmito kúskami, ktoré
druh práce, ale nie sú tak dobre slúžil.
Tiež, nebojte sa prijímať nové myšlienky.
Ak niekto príde a povie, hele, to miesto vyzerá naozaj cool, ale
nebolo by to ani byť skvelé, keby to aj urobil?
Len preto, že to je niečo, čo nemal v úmysle, a niečo, čo nie je vo vašom
špecifikácia, niečo, čo ste si predsavzali,
nebojte sa vziať ju a potom sa s ním pracovať.
Pretože často myšlienky, ktoré spustíte pomocou priebehu vývoja
skončí tým, že sa naozaj cool funkcie webových stránok.
>> Povedal som to predtým. Poviem to ešte raz.
Testerov sú super, super užitočné.
Snažte sa získať ľudí, ktorí nikdy nevideli stránky skôr, ako sa prihlásiť a vidieť, čo sa deje
pretože môžete vyskúšať nielen užitočnosť stránky a užívateľské skúsenosti,
ale oni môžu tiež otestovať funkčnosť spôsobom, že nemôžete.
Ak urobíte nejakú funkciu, ktorá robí určitú vec
a viete, že to bude robiť, že to isté správne zakaždým, to je skvelé.
Ale to môže byť často ťažké vysvetliť rohových prípadoch, kedy užívateľ môže
napíšte niečo, čo ste nečakali - práve preto, že ste definovali
funkcie sám.
Tak, aby sa niekto prísť na to, kto nemá potuchy, ako používať stránky
a len zlomiť to v akejkoľvek spôsoby, ktoré môžete urobiť, je naozaj užitočné, pretože vám
získať predstavu z úplne iného pohľadu, čo na vašom webe funguje
a čo je potrebné opraviť.
>> Posledný, budem hovoriť o niektorých všeobecných osvedčených postupov,
a vy ste videl veľa z nich v CS50, ale aj naozaj, ale naozaj platí v nastavení projektu.
Jedným z nich je komentár. Vždy komentár kód najmä ak pracujete na veľkom tímu.
To môže byť tak nepríjemné len obrie blok kódu, ktorý niekto napísal
a možno to funguje, možno nie, ale nemáte tušenie, čo to robí,
takže máte tušenie, či je to užitočné, alebo nie, alebo či by malo byť tam, alebo nie,
a ak pracujete na niečom inom, že je dokonca možné, že pracujete na
to isté, takže len veľmi, veľmi opatrní, byť ohľaduplní vašich rovesníkov
a písať kód, ktorý je dobre zdokumentované.
Nemusíte zájsť tak ďaleko, ako to urobiť celú vec, kde radi, ak si zvýšiť
Počítadlo mať komentár, ktorý hovorí, som pridať 1 k tejto prepážke.
To nemusí byť tak podrobné, ale pre akúkoľvek funkciu, že ste niekedy písať
mali by ste mať nejakú dokumentáciu o tom, čo táto funkcia presne robí,
aké sú jeho vstupy sú, a aké by mal vrátiť.
Týmto spôsobom môžete použiť aj iné komponenty ľudí z miesta
a môžete pracovať na budovaní niečoho veľkého.
>> Ďalšia dôležitá vec je, že chcete robiť pravidelné očistenie.
Kód dostane chaotický. Necítim sa zle, ak váš kód je len úplne nečitateľný a obrie neporiadok.
To sa stáva pri vývoji webových aplikácií vždy.
Tie pridávanie nových funkcií, odstránenie starej. Veci sa bude tam, že by nemal byť.
To je v poriadku, ale chcete, aby sa ubezpečil, aby sa s tým vysporiadať pravidelne.
Nechcete to nechať vybudovať do bodu, kedy si jednoducho nemôže nájsť nič
v kóde, a nemáte potuchy, čo všetko robí.
To je prípad s HTML.
Niekedy budete skončiť s objektmi, ktoré neobsahujú nič,
a budete chcieť zbaviť tých.
V CSS, môžete byť s odkazom na prvky, ktoré sú už tam nie je,
takže sa chcete zbaviť tohto kódu.
V JavaScriptu, ste mohli odstrániť niečo z HTML.
Takže, chcete, aby sa ubezpečil, že ste vždy upratovať, robiť veci celkom
rovnako ako si môžete na pravidelnom základe.
>> Ďalšia naozaj užitočná vec, ktoré som si nemyslím, že je uvedené veľmi veľa CS50
ale je to stojí za to dostať do je riadenie verzií.
Myšlienka riadenie verzií je, keď ste v podstate udržať prehľad o všetkých pokroku
ste sa na vašich stránkach, a ak v každom okamihu si uvedomíte, ach, to bola práca
pred chvíľou, ale to nefunguje o nič viac, môžete sa vrátiť späť na predchádzajúcu verziu
a vidieť, čo sa zmenilo od tej doby, a také veci.
Primárny spôsob, ako to urobiť, je s Git, a Git je celý tento druh systému, ktorý
Verím, že Tommy MacWilliam dal seminár o posledný rok.
Ak pôjdete do CS50 seminárov pre rok 2011, môžete vidieť jeho seminár na to.
Myšlienka Git je v podstate, že v pravidelných intervaloch budete robiť tieto záväzky
ktoré sú spôsoby, ako hovoriť miesto je v celkom stabilná verzia práve teraz, takže
Ja ich balenie a odosielanie preč na server, a potom môžete ísť na tomto serveri
a pozrieť sa na všetkých predchádzajúcich verzií kódu a uvidíte, ako to postupovalo
a všetko, čo nejako dobré veci.
Tak, to je v podstate to.
Pokiaľ ide o vývoj webových aplikácií, sme radi, že držať okolo a zodpovie všetky
otázky, pokiaľ ide o našej prezentácii.
To je to. Vďaka. >> [Ben] Vďaka.
[Potlesk]
>> [Billy] Zamestnanci, má niekto nejaké otázky týkajúce sa veci, ktoré sme na ktoré sa vzťahuje
alebo veci, ktoré sme sa nevzťahuje že dúfali, že by sme pokryť?
Boli by sme radi zodpovieme ty. Každý, kto?
[Z publika] Aké sú výhody a nevýhody použitia Ruby alebo Python?
[Ben] Otázkou bolo, aké sú výhody a nevýhody použitia Ruby alebo Python
miesto ako PHP.
Klady sú, že Ruby a Python sú oveľa lepšie, než jazyky PHP.
Aspoň podľa môjho názoru, a myslím, že v mnohých názorov iných ľudí rovnako.
Boli navrhnuté viac pre to zložitejšie veci,
a menej pre nárez spolu webové stránky veľmi rýchlo sa
trochu dynamického obsahu.
Nevýhody sú, že tam je trochu - je to skôr učenie
aby si ich nastaviť.
To je, ako v PHP, stačí mať súbor HTML a píšete menej než
otáznik, a potom napísať nejaký kód, a potom môžete napísať otáznik,
väčšie ako, a potom máte hotovo.
V iných jazykoch, ako je Ruby alebo Python,
budete musieť prejsť trochu viac práce, aby sa počiatočné stránky bežia.
K dispozícii je tiež - aspoň to bolo v prípade - že tam je viac dokumentácie
k dispozícii pre PHP len preto, že existuje viac ľudí, ktorí používajú to.
Myslím, že to nie je tak moc problém už.
Tam je určite veľmi dobrá dokumentácia pre veci, ako je Ruby on Rails
alebo Django pre Python je ekvivalentná.
PHP je ten, ktorý každého z nás používa niekoľko rokov, a viete, ako to funguje.
Ruby a Python sú trochu menej vyspelé.
>> [Z publika] Ak by ste mali vybrať medzi jedným z nich učiť, alebo vyzdvihnúť,
ktoré by ste dali prednosť?
Úprimne povedané, myslím, že záleží na osobe.
Je mi to ľúto. Otázkou bolo, ktorý by si vyberiete pre niekoho naučiť?
Zistil som, Python najkrajší osobne.
Existuje mnoho ľudí, ktorí - Urobil som môj prvý web dev projekt v jazyku Python a Django.
Existuje veľa ľudí, ktorí majú radi Ruby on Rails tiež.
Asi viac ľudí, ktorí vedia, Ruby on Rails.
Úprimne povedané, ja by som jednoducho ísť s tým, čo ľudia okolo vás vedieť
takže budete mať ľudia klásť otázky.
>> Otázka bola - na zdieľaných serveroch je to docela ťažké pracovať na Python?
To záleží na vašom hostingu.
Existuje celý rad internetových hostiteľov, ktorí budú písať Python veci.
WebFaction robí, že jo?
WebFaction je, že Billy a ja som použil pre niektoré projekty.
Sú to naozaj skvelé. Podporujú väčšinu jazykov.
Ale je pravda, že PHP je veľa viac široko podporovaný.
Takže, ak ste prilepené na web hostiteľa, ktorý len robí PHP, to je dobrý dôvod pre použitie PHP.
>> [Z publika] som sa dostal do učenia, ako sa pýtať niekoľko databáz,
a viem, že môj SQL je všade možne, ale v poslednej dobe som sa dostal vystavený -
a to poukázal. Vidíte, JSON a rozšíriteľné databázy.
My SQL je stále všade. Ako vidíš, že deje?
Je tam bude rastúca tendencia pre viac rozšíriteľnú (nepočuteľné)?
Otázka znela - si myslím, že to bude trend non-SQL databáz.
Napríklad, ako MongoDB. Myslím, že to je určite pravda.
Moja rada bola väčšinou mySQL súvisiacich tu len preto, že MySQL je
priemyselný štandard.
Osobne by som radšej databázy, ktoré nemajú schemos ako MongoDB
kde nemáte problém, oh, musím pridať ďalší stĺpec.
Beda mi, ako robiť to, čo mám robiť?
Je to veľmi ťažké urobiť, že na MySQL, ale keď máte niečo ako Mongo
je to oveľa krajšie.
Ďalšia pekná vec, o Mongo je, že vaše záznamy sú v skutočnosti objekty JavaScript.
Neexistuje žiadny druh konverzie kroku, kde je potrebné, aby sa tieto databázové riadky
a premeniť ich v objekte JavaScript a poslať ich cez drôt.
Myslím, že veci, ako že bude veľmi, veľmi užitočné pre rýchly vývoj webových aplikácií v budúcnosti.
>> [Billy] Niečo, čo by som dodal, čo je len všeobecný názor je, že
nemáte pocit, že by ste sa naučili všetky jazyky sme diskutovali
z nášho seminára.
Je zrejmé, že ide o to, aby vám predstavu o tom, čo je tam vonku,
a ak ste prekvapený z toho, čo sme vyššie, môžete spoločnosť Google
a prečítať si na ne.
A ako som už spomenul, existuje niekoľko seminárov, ktoré sa zaoberajú práve týchto vecí.
K dispozícii sú aj ďalšie semináre, ktoré som sa zmienil, že pravdepodobne dostanú do
tohle rovnako.
Myšlienka je, že ak chcete pracovať na niečom, tu sú nástroje k dispozícii.
Nemajte pocit, ohromený, ak si nie ste istí, čo tieto nástroje robiť presne to,
ale viem, že sú tam, a že si môžete robiť široké využitie z nich
Google.
>> [Z publika] Aké veci to, čo musíte urobiť, aby sa ubezpečil, vaše webové stránky
vyzerá dobre na mobilných zariadeniach?
[Billy] Mobilné zariadenia sú trochu ťažké.
K dispozícii je 2 spôsoby, ako môžete pristupovať ho.
Prvý spôsob je, že ste skutočne mobilné webové stránky.
Inými slovami, môžete vykonať nejakú detekcie na začiatku
keď je prehliadač, ktorý podáva žiadosť, aby vaše webové stránky, ktoré buď hovorí
vrátiť tento názor - ktorý bude pohľad na stolnom alebo prenosnom prehliadačov -
a ten druhý pohľad na mobilné zariadenia.
To je miesto, kde pohľady sú naozaj pekné v tom, že môžete celkom veľa swapu
dva von a rozhrania, ktoré pracuje naozaj dobre na mobilných zariadeniach
a majú úplne iný, ktorý funguje pekne na zariadeniach prehliadača.
Problém s tým je, že trvá dlhú dobu, pretože to znamená, že kódovanie
úplne iný interface.
Ďalší spôsob, ktorý môžete urobiť, je -
Veľa moderných telefónov bude zobrazovať webové stránky a snaží sa im poskytnúť ako prehliadač by,
a robia ich najlepšie.
Môžete druh pokúsiť sa zostať svetlo na množstvo jQuery JavaScript, ktorý používate
ktorá má tendenciu byť tam, kde sa veci môžu pokaziť trochu.
To je niečo na spôsob, že by ste mali použiť, ak nemáte toľko času.
Ak máte čas, pracovať na mobilné rozhranie, ktoré je zrejme najlepšia voľba.
>> Myslím, že všeobecne pre CS50 projekty, budete chcieť vybrať jedno alebo druhé.
Inými slovami, chcete, aby sa mobilné aplikácie, alebo chcete, aby webové stránky na ploche.
A to druh určuje, kam idete s tým.
Ale ak si chcete rozšíriť ju neskôr, pravdepodobne je najlepší
aby ďalšie rozhranie pre ostatné.
Mám trochu skúseností s vývojom webov WordPress báze.
Aj hostil osobné webové stránky na WordPress na chvíľu.
Tieto druhy rámcov môže byť pekné, rovnako ako veľmi základné veci.
Častokrát budete len naraziť na veľa otázok prispôsobiteľnosť hoci.
Budete chcieť mať niečo vyzerať určitým spôsobom, alebo sa určitým spôsobom
a vy jednoducho nemôže, pretože je to napevno do systému, ktorý
je to, ako budete musieť robiť veci, ktoré môžu byť trochu problém.
Od tej doby som trochu bol viac naklonený k práci s weby od základov.
Pre veci, ako je blog databáz a také veci, že to naozaj nie je tak ťažké vytvoriť rámec.
Ak ste naozaj pretiahol na dobu, môžete samozrejme použiť niečo ako WordPress
alebo, že niečo také na blogu.
Na veľa vecí, ktoré blogy obchod a to je naozaj dosť ťažké, že
ak vediete do niektorej z týchto druhov vecí, ty si asi najlepšie len preto, aby
vykonať verzii in-house.
>> Myslím, že je to o tom, takže ešte raz vďaka za účasť.
Naozaj sme si užili hovoriť na vás a dúfame, že ste sa naučili nejaké veci.
[Ben] Sme radi, že hovoriť - musíme ísť, ale my sme radi, že hovoriť viac mimo
Ak máte ďalšie otázky. Ešte raz vďaka. [Potlesk]
[CS50.TV]