[Powered by Google Translate] [Seminarium] [Web Development: od pomysłu do realizacji] [Ben Kuhn] [Billy Janitsch] [Harvard University] [To jest CS50] [CS50.TV] [Billy] Cześć, jestem Billy i to jest Ben. >> [Ben] Witam. Mamy zamiar rozmawiać o rozwoju sieci dzisiaj. [Webdev] [Billy Janitsch i Ben Kuhn] Najpierw trochę o nas. Ben jest swego rodzaju zaplecza faceta. On sprawia, że ​​wszystko działa. A potem iść i się ich dość. Jestem w dużym stopniu zaangażowany w więcej frontonu projektowania układ typu rzeczy, i Ben, z drugiej strony, wie co robi, więc pracuje na back-end rzeczy. Wspólnie zrobiliśmy kilka rzeczy. Na przykład, w zeszłym roku pracowaliśmy nad Gimblium który jest on-line, studio rozwoju gier. To był nasz ostateczny projekt dla klasy, i od tego czasu zrobiliśmy Harvard Class Ramy, które jest do przeglądania on-line i kursach handlowych na Harvardzie. 

Mamy zamiar zacząć z tym pomysłem na naszej stronie internetowej. Jedziemy do Facebook, ale dla kotów. Przed rzeczywiście zrobić z tej strony, nie rób z tej strony, bo to nie jest dobre, ale użyjemy go jako ramy i przejść przez proces, w jaki sposób wykorzystać tę ideę i przekształcić go w prawdziwy stronie internetowej możemy wykorzystać. Zaczniemy od zerwania stronę w dół. Jak robiłeś w CS50, warto pomyśleć o tym, co jest rzeczywiste elementy, które go do tej witryny. Zasadniczo obracając go od pomysłu, który jest po prostu swego rodzaju abstrakcyjne pojęcie do prawdziwego, namacalnego rzeczy, które można zrobić. Zaczynamy od pytania na kilka pytań. Co to jest strona internetowa? Dlaczego jesteśmy co to? Co to będzie używać? Tego typu rzeczy. W przypadku Facebooka Kot, my w zasadzie chcą strony internetowej, która pozwala koty sieci społecznych ze sobą. Pomysł jest, że mogą pisać na ścianach siebie nawzajem, mogą zgłaszać uwagi, tego rodzaju rzeczy. I w tym miejscu dochodzimy do elementów funkcjonalnych. Teraz mamy tego rodzaju ramy - mamy profile użytkowników, mamy komentarz, a my możemy odpowiedzieć. Być może pewnego dnia będziemy wpływający sympatie i tego typu rzeczy. A my niby chcą priorytety te funkcje, które wykraczają w. Chcemy powiedzieć, jak, dobrze, to naprawdę ważne, że każdy ma profil i że każdy może pisać na ścianach nawzajem. Wtórne do tego, komentarzy byłoby miło. Może później będziemy wpływający sympatie. Więc, chcesz mieć pomysł, co jest fundamentalne dla projektu a co jakby bardziej ogólnej funkcji, które mogą być stosowane później. Chcesz rodzaju mają określoną listę w pamięci, ale projekt, który rozpoczyna się nie będzie projekt, który zakończy się. Innymi słowy, wszystko się zmieni, gdy jesteś rozwój witryny, i chcesz, aby pozostawić miejsce na to. Oddam go do Bena, który zamierza porozmawiać trochę o strukturze. 

[Ben] Mam zamiar mówić o boku bardziej technicznego rozwoju internetowej. Chodźmy na niektórych podstaw pierwsza. Kiedy robisz aplikację, Główny podział, że masz zamiar mieć to będziesz mieć kilka rzeczy dzieje się po stronie klienta - to znaczy, że jesteś Kod przeglądarka wykonuje z witryny i JavaScript, HTML, CSS rzeczy. To wszystko po stronie klienta. Będziesz mieć inny kod, który działa po stronie serwera który śledzi wszystkie dane, które ludzie wysyłają do ciebie, decyduje, kto dać co, takie rzeczy. To tylko niektóre terminy tak, że chłopaki są znane z tego, co mówimy. Poza tym podziałem dobrze jest pomyśleć o swojej aplikacji internetowej w kategoriach Kilka różnych składników. Kiedy robisz tworzenie stron internetowych jedną z rzeczy, które należy zawsze staramy się robić to w celu zmniejszenia złożoności. Bardziej złożony kod jest większa szansa jest, aby błędy, trudniej jest zmienić później. Tak więc, jeśli można zerwać swoją aplikację do kilku odrębnych obszarów funkcjonalnych że będzie - i można zmniejszyć rodzaju ilości komunikacji cross-kierunkowym - że będzie Ci dużo w długim okresie w odniesieniu do zmniejszenia błędów. 

Być konkretne, zazwyczaj ludzie dzielą się na aplikację do - to rodzaj słowa buzz teraz, ale są nadal użyteczne. Może słyszeliście ludzie mówią o modeli, widoków i kontrolerów. Modele są rzeczywiste dane, że Twoja aplikacja będzie się zajmować. Na przykład, w swoim Cat Facebooka, Twoje modele będą - że masz model jak posty i model dla profili użytkowników, takie tam. Twoje poglądy są jak przedstawić te dane do swoich użytkowników. Może masz 1 widok na patrząc na jednym wątku i wszystkie komentarze i inny widok na ścianie, że ma listę wszystkich postów , które są skierowane do Ciebie, i inne spojrzenie na kanale wiadomości - takie rzeczy. Wreszcie masz sterowników, które są w zasadzie kiedy ludzie wysłać posty i dokonać aktualizacji do systemu back-end, można zwiększyć kilka liczników, a co. To są twoje kontrolery. 

Idę się mówić głównie o modelach. Poglądy nie są technicznie trudne i problem jest bardziej z ich projektowania Sterowniki będą specyficzne dla co jesteś projektowania. Ale jest kilka dość ogólnych technik można użyć aby Twoje modele ładniejsze i łatwiejsze do pracy z tym myślę, że są bardzo pomocne. Jest to najczęściej będzie o tym, jak radzić sobie z danych aplikacji internetowych w miły sposób. Główne problemy związane z modelami są, że żyją na kliencie i na serwerze i musisz dowiedzieć się, ) jak je zdobyć - wszystkie te właściwe - z serwera do klienta, oraz b) w jaki sposób, aby utrzymać je w synchronizacji. Użytkownicy będą chcieli wprowadzić kilka nowości. Oni chcieli, aby nowe posty. Oni będą chcieli jak rzeczy i rzeczy, jeśli masz upodobania. To są główne wyzwania techniczne czynienia z modelami. Pierwszą rzeczą, którą będziesz chciał zadać sobie jaki rodzaj danych idzie w tym modelu i jakie pytania będziemy chcieli zrobić - czyli jak będziemy patrzeć na modele? Dla kota Facebooku przykład Twój post będzie miał autor z nim związane, Ściana po jakiś tekst, a odbiorca postu ściennego. A potem możesz zapytać, że w kilka różnych sposobów. Co chcesz na to patrzeć przez który napisał która słupek, przez który otrzymał która zakładać, może przez daty ich opublikowania. Ale jeśli masz zamiar zrobić to teraz, to trzeba dodać kolejne pole do postu od kiedy to było rzeczywiście pisał. Te 2 czynniki - jakie dane chcesz użyć i jak chcesz go zobaczyć - warto pomyśleć o nich w pierwszej kolejności, ponieważ zależą one od siebie, i to będzie trudniejsze, aby dodać je później. 

Są też inne względy. Kiedy myślisz o tym, jak radzić sobie z modeli na serwerze to, co chcesz, aby spojrzeć na to - w zasadzie chcesz, aby serwer tak proste, jak to tylko możliwe. Robi rzeczy po stronie klienta jest na ogół znacznie szybciej, jeśli można to zrobić wyłącznie na kliencie bez wykonywania jakichkolwiek kryteriów sieci. Chodzi o to, aby zrobić jak wiele pytań, jak można na kliencie. Jedyny problem z tym jest to, że jeśli wniosek wszystkich danych na początek wtedy, że zajmie dużo czasu, aby załadować. Więc pomysł jest złoty środek pomiędzy posiadaniem wystarczającej ilości danych na kliencie że można zrobić większość pracy, ale nie tylko nie wszystko na raz ściągam tak, że masz bardzo powolny czas ładowania na początku. Na przykład, dla danych kot będzie prawdopodobnie chcesz pobrać kilka ostatnich postów ściennych. Nie chcesz, aby pobrać wszystkie z nich ze względu, że może wrócić na kilka lat. Ale ty nie chcesz, aby pobrać je jeden na raz bo to by wprowadzić wiele napowietrznych sieci. 

Jest to często bardzo trudne - skoro masz Uruchomienie bazy danych - to często bardzo trudne do zmiany, jakie dane trzeba w nim - czyli dodać nową kolumnę bazy danych lub coś - więc jedna dobra strategia jest właściwie tylko zachować dużo danych w blob tekstu - JSON blob - JSON jest JavaScript Object Notation - Dlatego, że jest przydatna, ponieważ wtedy można dodawać nowe właściwości aby wszystkie te plamy JSON bez zmiany bazy danych. Jedynym minusem jest to, że jeśli masz kilka pól że dodane później - jak ukryte w tym JSON blob - to jest to trudniejsze do kwerendy je w bazie danych. Na przykład, jeśli później - jeśli miał swój model postu, który omawialiśmy wcześniej z tylko autora, odbiorcy i tekst - może mieć również blob JSON a następnie, jeśli później chciałem dodać pole daty nie będzie musiał zmienić bazę danych. Możesz po prostu dodać daty do wszystkich pól tekstowych. I wtedy będzie można spojrzeć na te po stronie klienta, ale nie można sprawdzać je na stronie serwera ponieważ jest ukryty wewnątrz tego tekstu. 

Inna sprawa, że ​​warto pomyśleć o jest to, jak klient i serwer będą się komunikować. Zwykle chcą mieć to tak proste, jak to tylko możliwe. Możesz po prostu jak-me-to get żądanie danych, create-a-new-object rzecz i żądanie aktualizacji--stary obiekt. I to będzie wszystko być różne adresy URL na serwerze, który - że przeglądarka będzie - można użyć żądań AJAX dla wszystkich tych i albo odbierać lub dane POST. Ponownie, dla naszego kota Facebooku przykład można mieć ten adres URL, aby uzyskać indywidualne stanowisko, i chcesz mieć adres URL do tworzenia nowego posta ściany a może URL przesyłania obrazu profilu, takie rzeczy. Ale znowu, to jest pre-fetch większości danych, tak, że nie trzeba zachować żądania sieciowe. Z tego powodu może nie chcą mieć, że indywidualne żądanie GET do jednego postu, a zamiast tego chcesz tylko 1 Get wniosek o całej ściany. A potem, jeśli starasz się zachować równowagę, ponieważ - jest to również będzie zależeć od zastosowania. Bo jeśli spodziewasz się, że ludzie mają tylko 10 lub 20 wiadomości na tablicy że będzie dobrze. Ale jeśli spodziewasz oni mają tysiące wtedy, że wniosek będzie zbyt długo, i tak możesz dodać parametr dostać-wszystko-posty-od. 

Dla wszystkich z nich pewnie będzie chciał zsynchronizować dane w formacie JSON - JavaScript Object Notation. Prawie każdy język dotyczy JSON bardzo dobrze. JQuery ma ten miły funkcji getJSON, że zrobi wszystko, ciężkiej pracy dla Ciebie. I PHP jest również bardzo ładne funkcje komunikacyjne JSON. Tak, to jest to chyba najlepszy format do przesyłania modeli iz powrotem. 

Jako przykład tego, co mówiliśmy o tak daleko, oto przykład przepływu dla aplikacji Cat Facebooku. Zaczyna się z przeglądarką internetową bazą żądaniem URL. Serwer prawdopodobnie wyśle ​​na statyczny HTML i niektóre JavaScript i CSS. To najlepiej nie robić żadnych renderowania na serwerze. Prawdopodobnie nie chcesz - co serwer nie robi tam spada do wykazu punktów ściennych i generowania niektóre HTML dla każdego z nich i wysyłanie że ponad. To najlepiej zrobić to po stronie klienta, ponieważ w przeciwnym wypadku każdym razem, gdy chcesz, aby ponownie narysować coś, musisz złożyć wniosek do serwera. I to bardzo szybko daje dużo napowietrznych. To najlepiej po prostu statek zsyła statyczny HTML a następnie, JavaScript i CSS, które zrobi renderowania po stronie klienta. Tak szybko, jak to jest w rzeczy, to możesz mieć - w JavaScript - możesz zrobić wnioski dla danych ściany i takie tam, i po tym serwer jest w zasadzie tylko robi zapytań do bazy danych i sprawdzanie uprawnień. Jedyną ważną rzeczą jest to, że nie można wysyłać na kilka innych użytkowników wiadomości na tablicy że nie wolno nam zobaczyć. To może w zasadzie być bardzo cienka warstwa dostępu do bazy danych, a potem wszystko pokazując dane - wszystkie widoki i rzeczy - te mogą się zdarzyć w przeglądarce, a następnie, gdy chcesz zrobić post, czy coś wystarczy przesłać zapytanie. 

Jest też wymyślnej rzeczy można zrobić na szczycie tego. W kategoriach bardziej szczegółowych informacji technicznych, rozwija się w zwykły JavaScript może być trochę bolesne, więc jest kilka bibliotek i narzędzi, które pomogą Ci dużo z tym. Myślę, że wszyscy zapewne słyszeli o jQuery, która sprawia, że ​​robi renderowania HTML i manipulacji wiele łatwiej - mają wiele funkcji fantazyjne dla blaknięcie i obecnie, i robi zippy animacje. Jest też biblioteka ta nazywa Underscore.js. Posiada wiele przydatnych funkcji użytkowych, rzeczy, które można oczekiwać obsługa JavaScript, żeby mieć że tak naprawdę czyż - takie rzeczy jak tasowanie tablicy, usuwanie duplikatów z listy, lub spłaszczenie listę list. To tylko mała próbka kodu. Podkreślenia ma mnóstwo tych miłych funkcji, które chcesz to masz cały czas. 

A potem jest jeszcze 1. Biblioteka, że ​​chciałbym, aby spędzić trochę czasu na Kręgosłup nazywany Backbone.js bo naprawdę pomaga radzić sobie z modeli na stronie klienta i wiele zamieszania, że ​​może to powodować. Kręgosłup daje to pojęcie modeli i kolekcji w JavaScript, które są w zasadzie tak samo jak obiekty JavaScript w tablicy JavaScript ale mają wydarzenia podczas zmiany ich właściwości. Podobnie jak w JavaScript, możesz mieć zdarzenie, gdy przycisk zostanie kliknięty lub coś te modele i kolekcje Backbone Backbone będzie nadawać takie rzeczy jak że gdy zmienia. Oznacza to, że można po prostu napisać coś takiego fragmentu kodu tutaj - to mówi, kiedy tylko coś dodać do tablicy posty można przerysować całą ścianę. A to znaczy, gdy liczba tych z posterunku m.in. zmienia, powiadomić użytkownika, że ​​ktoś lubił swoje stanowisko. Lub gdy wszelkie właściwość postu zmienia Ci przerysować w słupek. Takie rzeczy pozwoli Ci zaoszczędzić mnóstwo komplikacji, bo inaczej jeśli nie masz jakiegoś frameworka takiego jak to potem za każdym razem, w kodzie, że zmiany nic o stanowisku, że trzeba pamiętać samemu wywołać wszystkie funkcje czynią i takie tam, a jeśli chcesz dodać coś nowego, co się stało każdym razem, gdy modyfikacja stanowiska trzeba było przejść przez każdego miejsca w swoim Kod, który został zmodyfikowany post i dodać, że nowe rzeczy. Ramy tak usunie dużo tej warstwy komunikacji między- sprawia, że ​​kompleks kod i trudne do utrzymania. 

Jest trochę o widoki również. Zamierzam opuścić większość to Billy, bo nie są one technicznie bardzo trudne. Użyj jQuery dla swoich poglądów. To praktycznie jak konieczność w tym momencie. To właśnie sprawia, że ​​wszystko o wiele łatwiej. Istnieje wiele bibliotek. Jeśli skomplikowane elementy interfejsu użytkownika, jeśli chcesz coś autouzupełniania lub jak jeden z tych fantazyjnych multi-selektorów - jeśli chcesz coś takiego, należy pewnie szukać wokół i można znaleźć dobre biblioteki, które będą robić to, co chcesz. Billy wyjaśni więcej o rzeczywiście trudnych częściach poglądów. Ponadto, jak marginesie, Kręgosłup ma jakieś funkcje do tworzenia wywołań komunikować ładnie z modeli - spójrz na dokumentacji wszystkich tych bibliotek, faktycznie. Wystarczy spojrzeć na docs. Są bardzo dobrze napisane i łatwe do naśladowania. Ogólnie rzecz biorąc, można dość dużo tylko Google, jeśli masz problemy. Istnieje wiele osób, wykorzystując je. Myślę, że to jest w końcowej nocie. 

Istnieją również bardziej zaawansowane rzeczy, które możesz zrobić jeśli szukasz, aby Twoja aplikacja internetowa extra super. Można zrobić - nowa specyfikacja HTML5 ma wiele fantazyjnych rzeczy można zrobić. Lokalna pamięć - co można przechowywać dane w przeglądarce - zamiast wrócić i czytać serwera na wszystko, można zachować niektóre z nich na kliencie i pozwala nawet ludziom - w niektórych przypadkach może nawet pozwalają użyć strony internetowej w trybie offline. Jest to coś, co nazywa WebSockets które są różne rodzaje komunikacji sieciowej gdzie zamiast po prostu zrobić jeden wniosek, uzyskać odpowiedź i to wszystko, zachować otworzyć połączenie z serwerem i tak można robić takie rzeczy jak aktualizacje w czasie rzeczywistym. Tak więc, jeśli starali się zrobić aplikację czatu, możesz użyć WebSockets komunikować się w tę iz powrotem, tak że nie będzie musiał utrzymać zainteresowanie, "Och, serwer, czy ktoś wysłać mi porozmawiać?" co 10 sekund, czy coś. Istnieje również interesującą cechą HTML5 gdzie można upozorować URL strony zmienia się bez konieczności faktycznie załaduj ponownie. Możesz użyć przycisków Wstecz i Dalej, nie robiąc kilka zapytań sieciowych. Rzeczy, jak to jest naprawdę użyteczne z punktu widzenia zarówno szybki, ale również działa jak aplikacja internetowa powinna. 

Jest to również coś, co nazywa CoffeeScript. CoffeeScript jest inny język, w rzeczywistości, że kompiluje się do JavaScript. Można by napisać cały kod w CoffeeScript, a następnie uruchomić ten kompilator, i wypluwa plik JavaScript, który można zawierać na swojej stronie internetowej. Dlatego, że jest ładna to CoffeeScript ponieważ pozbywa się wielu dziwne przypadki, że JavaScript ma gdzie taniej równych, i wynosi równe robić różne rzeczy, lub jak - ma ładniejszy składnię czynienia z tablic i funkcji. To jest trochę fragment CoffeeScript że tworzy listę wszystkich kwadratów od 2 do 10 ^ 1 ^ 2, w odwrotnej kolejności. Jak widać, CoffeeScript często pozwala wyrazić w 1 linii co by się 5 linii kodu JavaScript. Może to zrobić rzeczy o wiele łatwiejsze. To trochę nowej składni, aby dowiedzieć się, w pierwszym, ale na pewno sprawi, że będziesz bardziej wydajne w dłuższej perspektywie. 

Można również korzystać z innych języków na serwerze niż PHP - języki, takie jak Ruby, Python, lub jest nawet projekt o nazwie node.js które pozwoli na korzystanie z JavaScript na serwerze. Osobiście, ja naprawdę, naprawdę nienawidzę PHP. Ja po prostu nie lubię pracować z nim. Jeżeli ty też, że to jest okropne cluge języka, można użyć jednego z nich, zamiast. W ogóle, jeśli chcesz coś zrobić, a tak naprawdę nie wiem, jak można to zrobić, wystarczy poszukać w Internecie. Istnieje mnóstwo i mnóstwo zasobów, zwłaszcza na - StackOverflow jest świetny. To jest ta strona, gdzie programiści zadać sobie nawzajem pytania. Być może uruchomić do niego, jeśli były problemy w zestawach problemowych CS50. I jest mnóstwo bibliotek dla robić prawie wszystko, co chcesz. Jeśli chcesz coś zrobić, a nie wiesz jak to zrobić, nie zakładaj, że to jest niemożliwe. Wystarczy rozejrzeć się wokół i można znaleźć kilka dobrych zasobów. 

Jak ogólnie zakończyć, Główne dania na wynos jest zachować rzeczy proste. Bardziej złożony kod jest na początku i więcej spróbować zrobić wymyślnych rzeczy, dłużej trwa, żeby coś rzeczywiście funkcjonalne i trudniej będzie zmieniać później. Tak, robić rzeczy głupie, w łatwy sposób pierwszy. , Aby przejść wraz z tym, nie bój się wyrzucać starego kodu lub czyszczenia go dużo. W ogóle, kiedy rzeczywiście coś pracy, jest dużo łatwiej myśleć niż gdy jesteś jeszcze w początkowych etapach w jaki sposób mogę umieścić to wszystko razem. Najlepiej, aby najgłupszy możliwy projekt, który działa a następnie poprawić to iteracyjnie niż próbuje wszystko dobrze za pierwszym razem. Pod względem podziału klient-serwer, spróbować utrzymać serwer bardzo prosta - tylko bazy danych, a niektóre uwierzytelniania i nie zrobić tam żadnej ciężkiej pracy. Czy wszystkie swoje skomplikowane rzeczy po stronie klienta w przeglądarce w JavaScript tak dużo, jak to możliwe. Rozejrzyj się wokół bibliotek, które czynią życie lepszym. Zawsze lepiej jest używać kodu, który napisał ktoś inny jeśli - i nie to napisać samemu. Jest wiele rzeczy w Internecie. Google jest twoim najlepszym przyjacielem. Google jest najlepszym przyjacielem programisty. Tak, na pewno nie bój się rozejrzeć za rzeczy. Dobrze. I ponad Billy'emu. 

[Billy] Właściwie, zanim zacznę z jakimś wzorem rzeczy, Czy ktoś ma jakieś pytania do Bena o niczym, że mówił o? Dobra, dobra. Ponownie, daj nam znać, jeśli coś nie jest jasne, lub jeśli chcesz nam przejść nad czymś nieco więcej. Zamierzam cofnąć trochę i mówić o bardziej podstawowych elementów konstrukcji. Ben wspomniano model o nazwie - przepraszam, widok kontroler model systemu który jest rodzajem aspekcie technicznym, więc będę patrzeć poglądów specjalnie, i mam zamiar zacząć jak chcesz zaprojektować, że ładnie wygląda. Oto rodzaj naprawdę podstawowego szablonu dla naszej Cat Facebooku. Myślę, że są pewne podstawy w nowoczesny design UI które są warte podnoszenia. Można zauważyć, że jest dużo białej przestrzeni całej strony, dużo miejsca na rzeczy. Nie czuję się jak trzeba zgnieść rzeczy na stronę. Chcesz zostawić dużo miejsca otwarte, a jeśli się do prawie każdej nowoczesnej strony internetowej zobaczysz tam biały wszędzie. Jest biały w miejscach nie można spodziewać. Masz tę paletę kolorów, i to jest mądry na początku wybrać paletę kolorów, że masz zamiar pracować i rozwijać się. Także - pomaga wybrać krój pisma, a w ten sposób jesteś w rodzaju pracy z te konkretne podstawy projektowania. Masz swój typ, masz swoje kolory, a następnie można rodzaj pasuje wszystko inne w miarę potrzeb. Tak, jak powiedziałem, z kolorów chcesz używać odważniejsze kolory swojej kolorystyce oszczędnie. Nagłówki są ładne. Przyciski są miło mieć naprawdę duże, krzykliwe kolory. Ale w ogóle, jeśli masz stronę internetową, która ma kolory wszędzie, wszystko wpatrując się w twarz, że wygląda po prostu bałagan, a to nie jest dobre. Chcesz ogólnie używać jasnych kolorów. Postaraj się, ponownie, wybrać całkiem spójną kolorystykę. Możesz mieć te małe plamy partii koloru - które mogą wyglądać całkiem ładny, ale chcesz ich używać dość oszczędnie. 

Jak powiedziałem, chcesz być minimalne. Mniej jest prawie zawsze bardziej. Jeśli coś można wyświetlać wyświetlić coś, czy nie, i jesteś rodzaju pewności, czy powinien być tam domyślnie - Prawdopodobnie jesteś najlepszy off pozostawiając ją. Zawsze możesz go dodać później. Tak, zachować rzeczy proste. Ale co najważniejsze, warto rozważyć wiele wzorów. Nie myśl, że w momencie tworzenia witryny, masz to w głowie, że masz zamiar sprawiają, że witryny w określony sposób, a to będzie wyglądać dokładnie tak, jak to. To będzie miał niebieski nagłówek na górze i niebieski pasek boczny a następnie pod-nagłówek żółty rzeczą. Chcesz mieć wiele szablonów. Możesz albo - jeśli jesteś dobry z Photo Shop, który można otworzyć i rodzaj projekt strony internetowej, jak chcesz go szukać. Jeśli nie, możesz po prostu użyć pióra i papieru, ale porysować się wiele wzorów. Chcesz po prostu mieć ustawić gdzie masz wiele różnych wzorów, i jeśli ktoś kończy pracę, to fajnie. Jeśli jedna kończy się w przypadku braku, to zawsze masz jeszcze do kogo się zwrócić. W ogóle, nie czujesz się jak powinno być ograniczone do jakiegokolwiek projektu początkowo zdecydować się na. Projekty są bardzo zróżnicowane, a część na znaczenie modelu zobacz kontroler systemu jest to, że można zamienić i obecnie różne widoki, które chcesz. Możesz kołysać DANE jeden sposób, a następnie podjąć decyzję, o, faktycznie, że nie działa tak dobrze. Myślę, że to trochę zbyt skomplikowane lub jest częścią tego, że nie jest tak naprawdę działa, więc jestem po prostu się całkowicie porzucić ten pogląd i swap w zupełnie nowym. Nadal możemy używać starych modeli i stare sterowniki. Możemy robić wszystko na serwer i klienta, jak my by wcześniej. Ale rzeczywista fala danych jak wyświetlany będzie nieco inny. 

O ile rzeczywiście realizacji projektu, który chcesz, skoro masz kilka wzorów naszkicował na papierze lub na Photo Shop lub cokolwiek, istnieje wiele narzędzi, które są udostępnione do Ciebie. Najpierw jesteś zaznajomiony z którym jest twój HTML, PHP, czy cokolwiek język używasz tylko do kodu statycznych stron na twojej witrynie. Pracowałeś dużo z HTML, który niby daje te tagi , które można umieścić rzeczy do, iw zasadzie jest to sposób organizacji treści. Na przykład, masz nagłówek tam, więc będziesz mieć tagu nagłówka, i to będzie mieć jakiś tekst wewnątrz niego, który prawdopodobnie będzie w innym znacznikiem. To masz pasek boczny może z kilku różnych połączeń, a te będą wszyscy być w oddzielnych znaczników. Tak więc, w zasadzie HTML w jego sercu jest sposób podziału strony, jak w końcu chcesz go sformatować. Więc jeszcze raz, widziałem, że przed. Jesteś bardzo wygodne z pracy z nim teraz biorąc pod uwagę, że zrobiłeś ostatni pset miejmy nadzieję, tak że powinno być żadnego problemu. 

Wtedy masz CSS, które w zasadzie obsługuje wszystkie aspekty projektowania statycznych. By obsłużyć wszystkie kolory, wszystkie położenia różnych elementów gdzie iść w stosunku do siebie, jak duże są, różne rodzaje pozycjonowanie, że masz - Innymi słowy, można mieć wszystko ustalone tak, że podczas przewijania w dół ich pobyt, czy można mieć rzeczy w stosunku do innych elementów. Wszystkie tego typu rzeczy jest w CSS. Ponadto, można robić różne ozdoby, można mieć kolory tekstu, efekty tekstowe, wszystkie tego rodzaju rzeczy. Ben dał naprawdę dobrą seminarium na ten ostatni weekend, i tak na pewno sprawdzić, czy masz zamiar robić jakieś wymyślne rzeczy z CSS. CSS3 jest rzeczywiście najnowsza wersja CSS, a to może zrobić wiele bardzo miłych rzeczy. Może zrobić gradienty, można mieć ładne, zaokrąglone narożniki, można zrobić wiele rzeczy, aby Twoja strona wyglądać bardziej nowoczesne i fantazyjne. 

Kolejnym narzędziem jest obsługa JavaScript i jQuery, które Ben mówił trochę o, ale ja się trochę dalej do. JavaScript, jak pracowałem z nim trochę, lub przynajmniej widział ją w wykładzie niby sposób dynamicznie robi rzeczy w HTML. HTML, jak wiesz, jest statyczna, więc skoro masz HTML nie można go modyfikować. Ale obsługa JavaScript, w pewnym sensie, jest to sposób, aby być w stanie modyfikować kod HTML. Więc można zrobić, i to jest super, ale obsługa JavaScript jest naprawdę ból pracować. To jest tak długa i tępy i zrobić nawet najprostszych rzeczy wymaga wiele linii kodu JavaScript. Tak, jQuery jest w zasadzie biblioteka JavaScript, która upraszcza wszystko. Mówi, dobrze, jeśli chcesz mieć pole kwadratu z lewej przyjść i nikną w stronę tak, że jest w środku, w JavaScript, który wziąłby - Nie wiem, o sto linii zrobić, i to będzie ból, i wyjdzie z jej nienawidzić wszystko o programowaniu WWW. JQuery w zasadzie mają dot-element na blaknięcie, czy coś takiego. Tak, bardzo, bardzo proste funkcje, które pozwolą Ci zrobić wszelkiego rodzaju fajne animacje i tego typu rzeczy. Inna rzecz, że te 2 są naprawdę dobre, jest po prostu robi rzeczy dynamicznych ze strony internetowej. Tak, a nie tylko o swoje strony HTML - który wyświetla pewne dane, ale w rzeczywistości nie niczego - JavaScript i jQuery pozwoli Ci mieć przyciski, które można kliknąć, i można przeciągać elementy i zmieniać kolejność ich i sortować je, i nowe elementy dodane lub usunięte. Możesz dodać-delete, tego typu rzeczy. Tak, jQuery ma mnóstwo fajnych rzeczy. I Vipul faktycznie daje seminarium na nim dzisiaj, jak sądzę, w wieku 5 rano, więc jeśli można trzymać się tak długo, że będzie - 5 lub 4? Cztery. Przepraszam. To rzeczywiście zaraz po tym, więc polecam przyklejania się do niego, jeśli możesz. JQuery jest bardzo, bardzo przydatne, a będziesz w stanie zrobić wiele bardzo miłych rzeczy z nim na prawie każdym projekcie tworzenia stron WWW. 

Teraz mam zamiar dostać się do rodzaju wyróżnieniem. Rozmawiałem w zasadzie o interfejsie użytkownika. Interfejs użytkownika jest tylko projekt strony. Ale jest jakby inna koncepcja, która ma doświadczenie użytkownika. Dwa bardzo różne. Interfejs jest na pewno częścią doświadczenia. Innymi słowy, gdy idziesz do miejsca, spojrzeć na interfejs. To część jak wystąpić na stronie. Ale doświadczenie użytkownika jest więcej. Interfejs użytkownika jest tym, co wrażenie, że użytkownik otrzymuje od swojej strony. Więc, oczywiście, interfejs jest częścią. I to jest na pewno niezbędna część, ale to nie jest wystarczające. Innymi słowy, jeśli masz ładny interfejs i jest ładny i kolorowy, a wszystko to, to świetnie, ale jeśli użytkownik przejdzie do witryny, widzi ładny wygląd i jest zdezorientowany wszystko, nie ma pojęcia, jak to zrobić wszystko, to oczywiście już się naprawdę słaba strona. To coś w rodzaju, w których doświadczenie użytkownika jest cala Zamierzam porozmawiać trochę o UX design - UX to skrót doświadczenia użytkownika - i niby w jaki sposób można upewnić się, że masz dobre doświadczenia użytkownika. Pierwszym punktem jest to, że można zaprojektować stronę internetową, gdzie użytkownik może zrobić wszystko, co że użytkownik może chce. Ale jeśli użytkownik nie może dowiedzieć się, jak zrobić te rzeczy - innymi słowy, jeśli użytkownik nie ma dobry pomysł, gdy udają się do miejsca, "Och, jeśli chcę, aby zaktualizować swój profil, a następnie kliknięciu przycisku, lub jeśli chcę zamieścić na czyjaś ściany, a następnie przejść do ich ściany i kliknij na małym polu. " Jeśli użytkownik nie wie, że, to w rzeczywistości nie mają skutecznie realizowane tę funkcjonalność w pełnym zakresie. Część realizacji funkcji jest to, że użytkownicy są rzeczywiście w stanie go używać. I może to być frustrujące - może zrobić stronę, a to może zrobić wszystkie rodzaje cudowne rzeczy, ale wtedy będziesz musiał go przetestować, a ludzie mówią: "Nie mogę tego zrobić. Dlaczego nie może tego zrobić? "I powiesz powrotem do nich, "Cóż, to może. Wystarczy przejść do menu rozwijanego 7th na to niejasne Strona, która występuje tylko przez link w prawym dolnym rogu strony "czy coś. Oczywiście, nie chcę tego. Chcesz to być jasne dla użytkowników, co oni mają robić, i powinien być prosty i intuicyjny nich. 

Inna sprawa, że ​​chcesz spróbować zrobić to, jeśli ktoś zamierza przejść do witryny i 9 na 10 razy do akcji, a 1 z 10 razy do akcji B, prawdopodobnie chcesz, aby skoncentrować swoje doświadczenia na działania A. Innymi słowy, chcesz zrobić to bardzo, bardzo jasne, jak to zrobić A. Powinien być z przodu i-Centrum - przejść do witryny, to widzę, oh, to właśnie tam. Natomiast B oczywiście chcesz być jasne, ale można go zostawić nieco więcej w tle. David daje dobry przykład tego, w wykładzie, który jest systemem Boston T. Kiedy idziesz do Boston T i chcesz kupić bilet, trzeba dostać się do 5 menu, zanim będzie można rzeczywiście kupić bilet do $ 2, 2,50 dolarów, czyli wartość, ile potrzeba, aby jeździć metrem w jednym kierunku. To jest problem, ponieważ większość ludzi, którzy są jazdy metrem prawdopodobnie po prostu chce iść do jednego miejsca, kupują bilet, wsiąść od razu. To nie ma sensu, że muszą przejść przez wiele różnych menu aby się tam dostać. Lepsze doświadczenie użytkownika byłoby szybkie przycisk na pierwszej stronie że po prostu mówi: "kupić bilet w jedną stronę", i że wprowadzenie standardu wszystkich wartości domyślne, a następnie, jeśli ktoś chce kupić inny bilet niż to, nadal, oczywiście, mają możliwość, ale już zoptymalizowany dla przypadku wspólnego użytku, które jest bardzo ważne. Możesz zobaczyć przykłady to na Facebooku, prawda? Jeśli pójdziesz do Facebooka i chcesz zamieścić status, to prawo w górę, która jest, co często chcą zrobić. Jak tylko wejść na stronę, można zrobić najbardziej typowych rzeczy, które chcesz zrobić. Jeśli chcesz zrobić trochę bardziej skomplikowane rzeczy, jak, że chcę iść do mojej przyjaciółki ścianie i umieścić obraz na nim - które będę chciał często, ale nie tak często, jak opublikowania aktualizacji statusu - tak w tym przypadku, to wpisz ich nazwę w polu u góry, kliknij na ich profilu, a następnie, nadal, to na samym szczycie nie raz stałam na ich profil. Ponownie, już zoptymalizowany w priorytecie przypadków najczęściej zastosowania. 

Kolejną ważną rzeczą jest to, że często ludzie jakby próbować obejść mówiąc, dobrze, więc zrobiłem stronę i ludzie napotykają dziwne, i to jest problem, prawda? Oczywiście, nie chcę ludzi mylić treścią mojej strony. Ale droga do rozwiązania, że ​​nie jest to coś co pojawi się mówiąc, hej, mam zamiar nauczyć się, jak korzystać z tej strony. Krok 1 - kliknij ten przycisk. Krok 2 - kliknij tutaj. Jasne, że to sposób wokół niego - jest to sposób, że można powiedzieć ludziom, co robić, ale to Naprawdę nie optymalny sposób. Jeśli pójdę do strony i nagle jestem bombardowany tym tutorialu, który mi mówi co robić i gdzie iść i to wszystko, to nie jest zabawa dla mnie. Nie jest to dobre doświadczenie dla mnie. Jest to rodzaj bólu. Chcę po prostu zacząć robić rzeczy. Ludzie idą do zamknięcia ich w oknie dialogowym, lub wyjść z samouczka, nie wiedzą, co robić, a potem narzekać, gdyż nie powiedzieli im, co robić. Sposobem rozwiązania to nie dając żadnego rodzaju samouczka lub kierunkach - coś w tym stylu. Jak można go uniknąć, na pewno chcesz, aby pokazać użytkownikowi, co robić tylko ze względu na charakter, jak strona jest określone. Innymi słowy, jeśli pójdę na Facebooku bez logowania, Pierwszą rzeczą, którą widzę na stronie głównej - to trochę pole logowania. Tak, duh. Mam do zalogowania się tam. Natomiast, gdybym poszedł z Facebookiem i musiałem kliknąć małą link na dole który powiedział: "zaloguj się", a reszta strony był tylko jakiś obraz czy coś, Naprawdę nie wiem, co robić, prawda? Chciałbym się mylić. Tak, to może mi powiedzieć, aby przejść na dół i kliknij przycisk, aby zalogować się, lub zaloguj się przycisk może być na samym szczycie, gdzie mam zamiar go zobaczyć. Chcesz być zawsze pokazuje użytkownikowi, co robić, i że powinien być nieodłączną częścią samej strony. 

Kiedy myślisz o wzory i przedrzeźniając się różne sposoby wyrażając swoją witrynę, na pewno chcesz, aby myśleć o tym, co użytkownicy będą robić i jak można pokazać im, co robić. Ostatnią rzeczą jest testowanie jest bardzo, bardzo ważne. Wspaniale jest znaleźć kogoś - dostać przyjaciela, kogoś, kogo nie znasz, nawet - kto nigdy nie widział miejsce przed korzystać z witryny. Ponieważ pracuję w miejscu przez kilka godzin, to już patrząc na niego, a wiesz dokładnie co robić, więc oczywiście masz zamiar testować rzeczy, że już pracują nad i, że wiesz pracę. Ale jeśli ktoś inny przyjdzie i wykorzystuje witrynę, nigdy nie używany, zanim, to wyjątkowe doświadczenie, bo masz kogoś, kto ma żadnej wiedzy z witryny idzie do niego, tak, że będziemy mieć skutecznie nie wiem, co robić lub jakie są obecne przypadków użycia dla nich. To świetnie. To jest wyjątkowy, ponieważ są one w zasadzie osoba z pustym dla umysłu. Mogą powiedzieć, czy coś jest niejasne lub niejasne. Mogą dać wyobrażenie o właśnie doświadczenie użytkownika z witryny jest. To może być bardzo trudno powiedzieć, że się, więc na pewno będę was zachęcać jak jesteś rozwijając swoje projekty - jeśli robisz projektów webowych - aby ludzie z tej witryny, jak już masz jakieś demo funkcjonalnej. 

Teraz mam zamiar powiedzieć trochę o tym, jak zarządzać projektem programistycznym. Przeszliśmy nad tym, jak można wykonać back-end technicznej strony, w jaki sposób można zaprojektować naprawdę dobrą stronę, i to jest świetne, jeśli pracujesz samodzielnie, ale - Nawet jeśli pracujesz samodzielnie, zwłaszcza jeśli pracujesz w zespole, zarządzanie projektami staje się dużym problemem. Masz jakby słyszał o zarządzaniu projektami w różnych formach od szkoły podstawowej, kiedy powiedziano nam pracę grupową. Trzeba współpracować, komunikować się, to wszystko. Że wszystko nadal obowiązuje tutaj, ale są pewne wyjątkowe okoliczności informatyka, że ​​chcesz być świadomy, i chcesz się upewnić, że dobrze obsłużyć. Porozmawiam najpierw trochę o zespole, że będziesz w w. To bardzo ważne, aby wybrać odpowiedni rozmiar zespołu, aby pracować na, i w ostatecznym projekcie Myślę, że masz możliwość wyboru od 1 do 4 osób, jeśli się nie mylę. Chcesz, aby upewnić się, że nie jesteś po prostu wybierając liczbę osób że chcesz pracować z powodu, że są twoimi przyjaciółmi. Chcesz wybrać zespół, który jest dobry rozmiar i że będzie to zadanie. Jest kompromis w posiadające więcej ludzi versus mniej ludzi. Jeśli masz więcej osób, oczywiście bardziej praca może być wykonywana bo masz dużo ludzi, dużo kodu, wiele pomysłów, i to jest wspaniałe. Ale to też wymaga dużo więcej zarządzania i wiele więcej komunikację. Innymi słowy, jeśli masz 4 osoby pracujące na tym samym projekcie i oni wszyscy edycji tego samego kodu, mniej lub bardziej, że wszelkiego rodzaju potrzeby wiedzieć co się dzieje, więc to wymaga - jeśli dodać kilka nowych funkcji, jakby powiedzieć ludziom - jestem dodając, Jestem zmienia to w ten sposób - szczególnie, jeśli dostanie się do bardzo głębokiego rzeczy jak modele i kontrolerów, które są rzeczywiście będzie wpływ na to jak strona działa. Cały zespół musi być świadomy, więc musisz upewnić się, że nie masz wyboru zbyt duży zespół, który będzie trudno do tego komunikatu. Ty też nie chcesz wybrać wystarczająco mały zespół, który nie zamierzasz być w stanie komunikować się, ponieważ jest to tylko ty. 

Kolejną rzeczą wymagającą rozważenia jest bilans, gdzie umiejętności ludzi są. To wspaniałe, jeśli wszyscy naprawdę dobrych programistów. Ale jeśli wszystkie osoby, back-end, to nie jest twoja strona będzie wyglądać bardzo dobre bo masz to wielkie bazy danych, i to nie super-szybkich zapytań - co jest - ale gdy idziesz do niego, to jak witryny z 1990 roku czerwony i niebieski wszędzie, a to nie jest dobre. Zauważ, że Ben i pracy w zespole są bardzo dobre, bo jestem jakby bardziej w przedniej, oboje w środku interakcji koniec, a Ben jest naprawdę dobry z back-end rzeczy, tak, że działa bardzo dobrze, bo możemy zaprojektować dowolną witrynę i zasadniczo otwory w tym miejscu, które muszą być wypełnione może być wypełniony przez każdą z nas, czy może jedno i drugie. Chcesz się upewnić, że nie ma żadnych dziur w swojej drużynie. Jest w porządku, jeśli nie trochę pokrywają. Innymi słowy, jeśli masz 2 osoby, które są zarówno dobre, z tylnym końcu, , które mogą być również dobre, ponieważ mogą pomóc sobie nawzajem z problemami że mają. To może być problem, jeśli masz tylko 1 osobę, która jest odpowiedzialna za pewną rzecz i prowadzą do problemu, więc chcę trochę pokrywają ale przede wszystkim chcą się upewnić, że wszystkie możliwe otwory są wypełnione. 

Ostatnia rzecz - i to powinno być oczywiste, ale często nie jest. Naprawdę chcesz się bawić. Celem tego projektu końcowego i często CS50 punkt rozwoju internetowej w ogóle nie jest po prostu wykonać zadanie, ponieważ musi robić. Naprawdę chcesz się bawić, i chcesz robić coś który jest motywowanie do pracy nad nią. Jeśli cokolwiek robisz jest ból usiąść i pracować, to nie jesteś w wyborze projektu. Chcesz się wybrać coś, co można znaleźć ciekawe, naprawdę chcesz zobaczyć wynik, jesteś podekscytowany, gdy pojawi się nowy pomysł na temat coś można zrobić - więc nie wszystkie rodzaje projektów, nie jestem pewien, że można znaleźć - każdy ma coś, co naprawdę ich intrygi jeśli robią projekt webowy. Powiem to jeszcze raz teraz. Jeśli projekt wydaje się bólu i nie chcesz, aby nad nim pracować, wybrać inny projekt. Wybierz coś, co naprawdę inspiruje. 

Ben wspomniał to pojęcie iteracji trochę, a ja chcę iść nad nim trochę. To naprawdę ważne, aby działać w sposób urywany, gdzie można uzyskać coś funkcjonalnego. To może być wielki, jeśli masz ten plan na stronie internetowej, że zamierza zrobić A, B, i C, i ostatecznie to będzie się tam dostać. Ale utkniesz w tej fazie, gdy pracujesz na nim i nad nim pracuje, ale nic nie zrobił zaczyna. Nie musisz niczego widzieć i namacalnego, coś funkcjonalnego. , Co naprawdę chcesz robić tyle, ile wydaje się rodzaj bólu czasami pracować nad czymś, a potem coś w rodzaju cap go tak, że jest to co najmniej na stałym poziomie, z systemem wersja, nawet jeśli nie ma wszystkie funkcje, które chcesz. A może istnieją pewne cechy, które naprawdę chcą dodać, ale po prostu nie można bo chcesz dostać tę stronę funkcjonalnego punktu. A więc chcesz rodzaju mają cały proces rozwoju wyglądać. Chcesz rozpocząć gdzieś funkcjonalne - lub zasadniczo zacząć z niczym - ale chcesz dostać się gdzieś bardzo prosty i funkcjonalny. A potem jeszcze raz, coś w rodzaju skoku i uzyskać ponownie gdzieś funkcjonalne. Będziesz powoli budować, i to może iść nieco wolniej niż miałoby to miejsce w przeciwnym razie, ale na dłuższą metę, jeśli jesteś ciągle tkwi w tej środkowej fazie ziemi, gdzie Czy rzeczywiście nie ma nic pracy, może być naprawdę duży zawód do pracy nad projektem, ponieważ zawsze jesteś tak blisko do coraz to działa, i nigdy rzeczywiście działa. Chcesz pracować w tych tryska funkcjonalnych, i chcemy także zrobić kilka refleksji po każdej z nich. Innymi słowy, gdy jesteś w punkcie, w którym miejscu jest teraz pracy - to nie wszystko, czego się nie podoba, ale to robi pewne rzeczy - warto pomyśleć, ok, to ta strona cel jaki wyruszyłem zrobić? Innymi słowy, jeśli witryna ma zamiar zrobić X, jest to, co działa w kierunku X? Są wszystkie funkcje, które chciałem tam? I co więcej, jest to porcja ogólny cel, który chcę? Jeśli stwierdzenie, że witryna zaczyna skręcać w innym kierunku a może po prostu rodzaj rzeczy są nie pracuje, może to być czas do zmiany biegów trochę. Innymi słowy, jest to warte rozważenia - warto rzucać pomysły, jeśli to konieczne i biorąc pod uwagę, ja naprawdę pracuje nad to, co chcę mieć. 

Uważam, że mój następny punkt. Nie bój się do porzucenia idei. Tylko dlatego, że spędził wiele godzin pracy na funkcji i wreszcie dostałem to działa, ale to naprawdę nie jest tak dobrze - jak nie jest to przydatne lub użytkownicy mają problemy z wykorzystaniem go - tego typu rzeczy - nie bój się go wyrzucić. To jest do bani, że spędziłem dużo czasu pracy na nim, ale ostatecznie nie chcesz stronę, która jest rodzajem ułożyła te kawałki, które rodzaj pracy, ale nie są tak dobrze służył. Ponadto, nie bój się przyjąć nowych pomysłów. Jeśli ktoś przychodzi i mówi, hej, że witryna wygląda naprawdę super, ale Nie byłoby wręcz wspaniale, gdyby to miało również to? Tylko dlatego, że jest coś, czego nie zamierzał i coś, co nie jest w twoim specyfikacje, coś, czego nie starali się zrobić, nie bój się wziąć go na, a następnie pracować z nim. Ponieważ często pomysły, które działają w całym toku rozwoju w końcu jest to naprawdę fajne funkcje na stronie internetowej. 

Mówiłem to już wcześniej. Powiem to jeszcze raz. Testery są super, bardzo przydatna. Postaraj się, aby ludzie, którzy nigdy nie widzieli miejsce przed, aby zalogować się i zobaczyć, co się dzieje ponieważ mogą one badać nie tylko użyteczność strony i doświadczenia użytkownika, ale mogą również sprawdzić działanie w sposób, że nie można. Jeśli się trochę funkcji, które wykonuje pewne rzeczy i wiesz, że to zrobi, że samo za każdym razem prawidłowo, to świetnie. Ale może to być często trudne do uwzględnienia przypadków, w których może narożników użytkownika wpisz coś, czego nie spodziewaliśmy się - właśnie dlatego, że określone samemu funkcje. Tak, aby ktoś się o tym, kto nie ma pojęcia, w jaki sposób korzystać z witryny i po prostu złamać go w jakikolwiek sposób mogą zrobić, to bardzo przydatne, ponieważ zorientować się z zupełnie innej perspektywy, co na swojej stronie działa i co wymaga naprawy. 

Ostatnio, mam zamiar mówić o pewnych ogólnych dobrych praktyk, i widziałem wiele z nich w CS50, ale także naprawdę zastosowania w otoczeniu projektu. Jednym z nich jest komentarzy. Zawsze komentować kod zwłaszcza jeśli pracujesz na dużym zespole. To może być tak denerwujące tylko gigantyczny blok kodu, który ktoś napisał i być może to działa, może nie, ale nie masz pojęcia, co robi, więc nie mam pojęcia, czy jest to przydatne, czy nie, czy powinno być, czy nie, i jeśli pracujesz na coś innego, że to w ogóle możliwe, że pracujesz na to samo, więc po prostu bardzo, bardzo uważać, aby nie zakłócać waszych rówieśników i pisać kod, który jest dobrze udokumentowany. Nie musisz iść tak daleko, aby zrobić to wszystko, gdzie się nie podoba, jeśli przyrost Licznik posiada komentarz, który mówi, jestem dodanie 1 do licznika. To nie musi być tak szczegółowe, ale dla każdej funkcji, że jesteś coraz pisania należy mieć dokumentację, co to dokładnie robi funkcja, co jej wejścia są, i to, co powinien powrócić. W ten sposób można korzystać z innych składników ludzi na miejscu i można pracować nad czymś dużym budynku. 

Kolejną ważną rzeczą jest to, chcesz zrobić regularne clean-up. Kod dostaje bałagan. Nie czuj się źle, jeśli kod jest po prostu całkowicie nieczytelny i gigantyczny bałagan. Co dzieje się w tworzenie stron internetowych zawsze. Jesteś dodawanie nowych funkcji, usuwania starych. Rzeczy będzie tam, że nie powinno być. To jest w porządku, ale chcesz się upewnić, że do czynienia z regularnie. Nie chcesz, aby to zbudować do punktu, w którym po prostu nie można znaleźć nic w kodzie, a nie masz pojęcia, co nic nie robi. To sprawa z HTML. Czasami kończy się z obiektów, które nie zawierają niczego, i będziesz chciał się pozbyć tych. W CSS, można odnosić się do elementów, które nie są już tam, więc chcesz pozbyć się tego kodu. W JavaScript, które mogą Ci się usunąć coś z HTML. Więc, chcesz się upewnić, że jesteś zawsze sprzątanie, tworzenie rzeczy dość jak można na bieżąco. 

Innym bardzo przydatna rzecz, że ja nie sądzę, jest opisana bardzo w CS50 ale warto jest się do kontroli wersji. Idea kontroli wersji jest, gdy jesteś w zasadzie śledzenie wszystkich postępów dokonaniu w kierunku swojej stronie i jeśli w dowolnym momencie zdajesz sobie sprawę, och, to działa jakiś czas temu, ale to nie działa więcej, można wrócić do poprzednich wersji i zobaczyć, co się zmieniło od tamtego czasu i tego typu rzeczy. Podstawowym sposobem na to jest z Git i Git jest cały ten rodzaj systemu, który Wierzę Tommy MacWilliam dał seminarium na temat ostatniego roku. Jeśli pójdziesz do seminariów CS50 na 2011, można zobaczyć jego seminarium na ten temat. Pomysł Git jest w zasadzie, że w regularnych odstępach czasu robisz te zobowiązania które są sposoby mówiąc strona jest w dość stabilnej wersji teraz tak Jestem pakowania go i wysyłając ją na serwerze, a następnie można przejść do tego serwera i patrzeć na wszystkich poprzednich wersji kodu i zobaczyć, jak to jest postęp i wszystkie tego typu dobrych rzeczy. Tak, że w zasadzie jest. W miarę rozwoju sieci web, jesteśmy szczęśliwi, aby trzymać się i odpowiedzieć na wszelkie Pytania miarę naszej prezentacji. To jest to. Dzięki. >> [Ben] Dzięki. [Oklaski] 

[Billy] Personel, czy ktoś ma jakieś pytania dotyczące rzeczy, które omówiliśmy lub rzeczy, które nie zostały pokryte, że były one nadzieję, że zajmujemy? Chętnie odpowiemy ci. Ktoś? [Widz] Jakie są wady i zalety korzystania z wykorzystaniem Ruby lub Python? [Ben] pytanie, jakie są wady i zalety korzystania z Ruby lub Python zamiast jak PHP. Plusy są takie, że Ruby i Python są znacznie lepsze niż w językach PHP. Przynajmniej w mojej opinii, i myślę, że w wielu opiniach innych ludzi, jak również. Zostały one zaprojektowane w sposób bardziej kompleksowy rzeczy, a mniej na kolosalny razem stron internetowych bardzo szybko z trochę dynamicznej zawartości. Minusy są takie, że jest trochę - nie więcej z krzywej uczenia się aby je skonfigurować. Oznacza to, że podobnie jak w PHP, możesz po prostu plik HTML i pisać mniej niż, znak zapytania, a następnie napisać kod, a następnie napisać znak zapytania, większy niż, a następnie gotowe. W innych językach, takich jak Ruby lub Python, trzeba przejść przez nieco więcej pracy, aby uzyskać początkowym działaniu witryny. Jest też - przynajmniej kiedyś przypadek - że dokumentacja jest więcej dostępny dla PHP, tylko dlatego że jest więcej osób z niej korzystających. Myślę, że nie jest tak wiele kwestii już. Jest to z pewnością bardzo dobra dokumentacja do rzeczy, jak Ruby on Rails lub Django dla Pythona jest odpowiednik. PHP jest jeden, że wszyscy używają od lat, a wiesz, jak to działa. Ruby i Python są nieco mniej dojrzałe. 

[Widz] Gdybyś miał wybrać jedną z nich, aby dowiedzieć się, czy odebrać, które wolisz? Szczerze mówiąc, myślę, że to zależy od osoby. Przykro mi. Pytanie, które wybrać, aby ktoś się nauczyć? Uważam Python najpiękniejszy osobiście. Istnieje wielu ludzi, którzy - Zrobiłem mój pierwszy internetowy projekt dev w Pythonie i Django. Istnieje wiele osób, które lubią Ruby on Rails również. Prawdopodobnie więcej ludzi, którzy wiedzą, Ruby on Rails. Szczerze mówiąc, chciałbym po prostu iść z tym, co ludzie wokół was wie tak, że masz ludzi do zadawania pytań. 

Pytanie - na wspólnych serwerach jest to trochę trudne do pracy na Python? To zależy od Twojego hostingu. Istnieje kilka hostów internetowych, które będą pisać Pythona rzeczy. WebFaction robi, prawda? WebFaction jest, że Billy i użyłem dla niektórych projektów. Są naprawdę świetne. Wspierają one większość języków. Ale to prawda, że ​​PHP jest o wiele bardziej powszechnie obsługiwane. Tak więc, jeśli utkniesz na hostingowego, że tylko nie PHP, to jest dobry powód, aby korzystać z PHP. 

[Widz] Właśnie do uczenia się, jak zapytać kilka baz danych, i wiem, że moje SQL jest w każdym miejscu, ale niedawno został wystawiony na działanie - i zwrócił na to uwagę. Widzisz JSON i rozszerzalne baz danych. My SQL jest nadal w każdym miejscu. Jak widzisz, że dzieje? Czy tam będzie rosnąca tendencja do bardziej rozszerzalna (niesłyszalne)? Pytanie było - nie sądzę, że będzie to tendencja do baz danych innych niż SQL. Na przykład, jak MongoDB. Myślę, że to na pewno prawda. Moja rada była głównie związana mySQL-tutaj tylko dlatego, że MySQL jest standard. Osobiście wiele chętniej baz danych, które nie mają schemos jak MongoDB gdzie nie ma problemu, no, muszę dodać kolejną kolumnę. Biada mi, jak cokolwiek zrobić? To jest bardzo trudne do zrobienia, że ​​na MySQL, ale kiedy masz coś Mongo to jest o wiele ładniejszy. Inne Zaletą Mongo jest to, że zapisy są właściwie obiekty JavaScript. Nie ma rodzaj etapie konwersji, w których trzeba podjąć te wiersze bazy danych i włączyć je do obiektu JavaScript, a następnie wysłać je na drucie. Myślę, że takie rzeczy, że będzie bardzo, bardzo przydatne do szybkiego tworzenia stron internetowych w przyszłości. 

[Billy] Coś Dodam, który jest po prostu chodzi o to, że ogólnie nie czuć się jak należy nauczyli wszystkich językach Omówiliśmy z naszego seminarium. Oczywiście chodzi o to, aby dać wyobrażenie o tym, co tam jest, i jeśli jesteś zaintrygowany żadnej z wymienionych rzeczy mamy Google można je i poczytać o nich. I jak już wspomniałem, istnieje kilka seminariów, które zajmują się dokładnie te rzeczy. Jest jeszcze więcej seminariów, że nie wspomniał, że prawdopodobnie się do to rzeczy, jak również. Chodzi o to, że jeśli chcesz pracować nad czymś, tu są narzędzia do Państwa dyspozycji. Nie czują się przytłoczeni, jeśli nie jesteś pewien, co zrobić dokładnie te narzędzia, ale wiem, że są tam i że można zrobić z nich szerokie zastosowanie przez Google. 

[Widz] Jakie rzeczy nie trzeba zrobić, aby upewnić się, że strona wygląda dobrze na urządzeniach mobilnych? [Billy] Urządzenia mobilne są trochę trudne. Jest 2 sposoby można go podejścia. Pierwszy sposób jest to, że rzeczywiście posiada telefon internetowej. Innymi słowy, można wykonać jakąś wykrywania na początku gdy przeglądarka wysyła żądanie do witryny, które albo mówi powrót ten pogląd - który będzie widok na stacjonarnych lub laptopów przeglądarek - a ten drugi widok urządzeń mobilnych. To jest miejsce, gdzie widoki są naprawdę ładne, w które można dość dużo Swap dwa na zewnątrz i mieć interfejs, który działa bardzo dobrze na urządzeniach mobilnych i mają zupełnie inny, który działa dobrze na urządzeniach przeglądarce. Problem z tym jest to, że zajmuje dużo czasu, ponieważ oznacza to, kodowanie zupełnie inny interfejs. Inny sposób, że można zrobić to jest - Wiele nowoczesnych telefonów wyświetla strony internetowe i spróbować uczynić je jak przeglądarka będzie, i robią wszystko. Możesz trochę staram się zatrzymać światło na wysokości jQuery JavaScript używasz który wydaje się być, gdy coś może pójść nie tak trochę. Jest to swego rodzaju sposób, że należy wykorzystać, jeśli nie masz tyle czasu. Jeśli nie masz czasu na pracę z telefonu interfejs, który jest oczywiście najlepszym rozwiązaniem. 

Myślę, że ogólnie na projekty CS50, będziesz chciał wybrać jedno lub drugie. Innymi słowy, chcesz zrobić z telefonu aplikację lub chcesz stworzyć stronę internetową na pulpicie. I tego typu określa, gdzie udać się z tym. Ale jeśli chcesz go rozwinąć się później, prawdopodobnie najlepiej jest aby inny interfejs dla innych. Mam trochę doświadczenia w tworzeniu witryn opartych na WordPress. Prowadziłem osobistej stronie internetowej na WordPress na chwilę. Te rodzaje ram może być ładne, tak jak bardzo podstawowe rzeczy. Często musisz po prostu uruchomić na wiele kwestii dostosowywania chociaż. Będziesz chciał mieć coś wyglądać w określony sposób lub być w pewien sposób i po prostu nie można, bo to jest podłączone na stałe do systemu, który to jest jak trzeba robić rzeczy, które mogą być trochę problem. Od tego czasu mam trochę bardziej skłonni do pracy z terenów od podstaw. Na takie rzeczy jak bazy danych bloga i tego rodzaju rzeczy to naprawdę nie jest takie trudne do zbudowania ramy. Jeśli jesteś naprawdę wyciągnął do czasu, można oczywiście użyć coś jak WordPress lub tego typu rzeczy na blogu. Takie rzeczy, że blogi sklepu i naprawdę nie są na tyle, że trudno jeśli używasz do żadnego z tych rodzajów rzeczy, jesteś prawdopodobnie najlepiej po prostu zrobić wersję w firmie. 

Myślę, że to o niej, więc jeszcze raz dziękuję za przybycie. Jesteśmy bardzo zadowoleni z rozmowy z wami i mam nadzieję, że nauczyłeś się kilka rzeczy. [Ben] Jesteśmy szczęśliwi rozmawiać - musimy iść, ale jesteśmy szczęśliwi, aby porozmawiać na zewnątrz jeśli masz inne pytanie. Jeszcze raz dziękuję. [Oklaski] [CS50.TV]