1 00:00:00,000 --> 00:00:02,500 [Powered by Google Translate] [Seminar] [Web Development: Dari Ide ke Implementasi] 2 00:00:02,500 --> 00:00:04,200 [Ben Kuhn] [Billy Janitsch] [Harvard University] 3 00:00:04,200 --> 00:00:07,250 [Ini adalah CS50] [CS50.TV] 4 00:00:07,250 --> 00:00:10,840 [Billy] Hi, aku Billy dan ini adalah Ben. >> [Ben] Hi. 5 00:00:10,840 --> 00:00:12,840 Kita akan berbicara tentang pengembangan web saat ini. 6 00:00:12,840 --> 00:00:14,840 [Webdev] [Billy Janitsch dan Ben Kuhn] 7 00:00:14,840 --> 00:00:16,840 Sedikit tentang kami pertama. 8 00:00:16,840 --> 00:00:19,590 Ben adalah semacam orang back-end. Dia membuat sesuatu bekerja. 9 00:00:19,590 --> 00:00:21,870 Kemudian aku masuk dan membuat mereka cantik. 10 00:00:21,870 --> 00:00:26,610 Saya sebagian besar terlibat dengan lebih front-end desain tata letak semacam itu, 11 00:00:26,610 --> 00:00:31,260 dan Ben, di sisi lain, tahu apa yang dia lakukan sehingga dia bekerja pada hal-hal back-end. 12 00:00:31,260 --> 00:00:34,050 Bersama-sama kami telah membuat beberapa hal. 13 00:00:34,050 --> 00:00:38,710 Sebagai contoh, tahun lalu kami bekerja pada Gimblium yang merupakan studio pengembangan game online. 14 00:00:38,710 --> 00:00:40,400 Itu adalah tugas akhir untuk kelas, 15 00:00:40,400 --> 00:00:42,780 dan sejak itu kami telah membuat Harvard Kelas 16 00:00:42,780 --> 00:00:47,860 yang merupakan kerangka kerja online untuk browsing dan program belanja di Harvard. 17 00:00:47,860 --> 00:00:53,180 >> Kita akan mulai dengan ide ini untuk website kami. 18 00:00:53,180 --> 00:00:57,480 Kita akan membuat Facebook, tapi untuk kucing. 19 00:00:57,480 --> 00:00:59,520 Sebelum Anda benar-benar membuat website ini, 20 00:00:59,520 --> 00:01:02,520 tidak membuat website ini karena itu tidak baik, tetapi kami akan menggunakannya sebagai kerangka kerja 21 00:01:02,520 --> 00:01:05,349 dan pergi melalui proses bagaimana kita mengambil ide ini 22 00:01:05,349 --> 00:01:07,450 dan mengubahnya menjadi sebuah situs yang sebenarnya bisa kita gunakan. 23 00:01:07,450 --> 00:01:11,940 Kita akan mulai dengan memecah website bawah. 24 00:01:11,940 --> 00:01:13,190 Seperti Anda sudah melakukan di CS50, 25 00:01:13,190 --> 00:01:17,360 Anda ingin untuk berpikir tentang apa saja komponen yang sebenarnya yang masuk ke website ini. 26 00:01:17,360 --> 00:01:21,290 Pada dasarnya mengubahnya dari sebuah ide yang hanya semacam konsep abstrak 27 00:01:21,290 --> 00:01:23,590 menjadi nyata, hal nyata yang Anda bisa membuat. 28 00:01:23,590 --> 00:01:25,910 Kita mulai dengan mengajukan beberapa pertanyaan. 29 00:01:25,910 --> 00:01:28,070 Apakah website ini? Mengapa kita membuatnya? 30 00:01:28,070 --> 00:01:30,670 Apa itu akan digunakan untuk? Hal semacam itu. 31 00:01:30,670 --> 00:01:33,660 Dalam kasus Facebook Cat, 32 00:01:33,660 --> 00:01:37,730 kita pada dasarnya menginginkan situs web yang memungkinkan kucing jejaring sosial satu sama lain. 33 00:01:37,730 --> 00:01:41,260 Idenya adalah bahwa mereka dapat posting di dinding masing-masing, 34 00:01:41,260 --> 00:01:43,510 mereka dapat membuat komentar, hal semacam itu. 35 00:01:43,510 --> 00:01:46,720 Dan di situlah kita masuk ke dalam komponen fungsional. 36 00:01:46,720 --> 00:01:51,270 Kami sekarang memiliki semacam ini kerangka - kami memiliki profil pengguna, 37 00:01:51,270 --> 00:01:53,990 kami memiliki komentar, dan kita bisa posting. 38 00:01:53,990 --> 00:01:57,390 Mungkin suatu hari nanti kita akan berpengaruh terhadap suka dan hal semacam itu. 39 00:01:57,390 --> 00:02:00,410 Dan kami seperti ingin memprioritaskan fitur ini akan masuk 40 00:02:00,410 --> 00:02:03,340 Kami ingin mengatakan seperti, oke, itu benar-benar penting bahwa setiap orang memiliki profil 41 00:02:03,340 --> 00:02:06,440 dan semua orang yang dapat posting di dinding masing-masing. 42 00:02:06,440 --> 00:02:08,509 Sekunder itu, komentar akan menyenangkan. 43 00:02:08,509 --> 00:02:10,180 Mungkin nanti kita akan berpengaruh terhadap sejenisnya. 44 00:02:10,180 --> 00:02:13,700 Jadi, Anda ingin memiliki gagasan tentang apa yang penting untuk proyek Anda 45 00:02:13,700 --> 00:02:17,260 dan apa jenis fitur yang lebih umum yang dapat diterapkan nanti. 46 00:02:17,260 --> 00:02:20,870 Anda ingin semacam memiliki daftar tertentu dalam pikiran, 47 00:02:20,870 --> 00:02:24,090 tapi proyek yang Anda mulai dengan tidak akan menjadi proyek yang selesai dengan. 48 00:02:24,090 --> 00:02:27,100 Dengan kata lain, hal-hal yang akan berubah saat Anda sedang mengembangkan situs, 49 00:02:27,100 --> 00:02:30,090 dan Anda ingin meninggalkan ruang untuk itu. 50 00:02:30,090 --> 00:02:34,470 Aku akan menyerahkannya kepada Ben siapa yang akan berbicara sedikit tentang struktur. 51 00:02:34,470 --> 00:02:39,610 >> [Ben] Aku akan berbicara tentang sisi yang lebih teknis pengembangan web. 52 00:02:39,610 --> 00:02:42,370 Mari kita membahas beberapa dasar-dasar pertama. 53 00:02:42,370 --> 00:02:45,730 Ketika Anda melakukan aplikasi web, 54 00:02:45,730 --> 00:02:50,470 divisi utama yang Anda akan miliki adalah 55 00:02:50,470 --> 00:02:52,700 Anda akan memiliki beberapa hal yang terjadi di sisi klien - 56 00:02:52,700 --> 00:02:56,700 yaitu, kode yang Anda browser yang mengambil dari situs 57 00:02:56,700 --> 00:03:01,910 dan JavaScript, HTML, CSS barang. 58 00:03:01,910 --> 00:03:04,490 Itu semua di sisi klien. 59 00:03:04,490 --> 00:03:08,680 Anda akan memiliki kode lain yang berjalan pada sisi server 60 00:03:08,680 --> 00:03:10,770 yang melacak semua data bahwa orang mengirimkan kepada Anda, 61 00:03:10,770 --> 00:03:15,060 memutuskan siapa yang harus memberikan apa, hal-hal seperti itu. 62 00:03:15,060 --> 00:03:20,380 Ini hanya beberapa terminologi sehingga kalian semua akrab dengan apa yang sedang kita bicarakan. 63 00:03:20,380 --> 00:03:28,600 Selain divisi yang ada baiknya untuk memikirkan aplikasi web Anda dalam hal 64 00:03:28,600 --> 00:03:32,500 beberapa komponen yang berbeda. 65 00:03:32,500 --> 00:03:35,270 Ketika Anda melakukan pengembangan web 66 00:03:35,270 --> 00:03:41,710 salah satu hal yang Anda harus selalu coba lakukan adalah untuk mengurangi kompleksitas. 67 00:03:41,710 --> 00:03:45,710 Kode Anda lebih kompleks adalah semakin banyak kesempatan yang ada untuk membuat bug, 68 00:03:45,710 --> 00:03:47,710 semakin sulit untuk berubah nanti. 69 00:03:47,710 --> 00:03:50,140 Jadi, jika Anda dapat memecah aplikasi Anda ke dalam beberapa bidang fungsional yang berbeda 70 00:03:50,140 --> 00:03:57,640 yang akan - dan Anda dapat mengurangi semacam jumlah komunikasi lintas daerah - 71 00:03:57,640 --> 00:04:03,530 yang akan banyak membantu Anda dalam jangka panjang dalam hal mengurangi bug. 72 00:04:03,530 --> 00:04:07,950 >> Untuk menjadi beton, biasanya orang membagi sebuah aplikasi web ke - 73 00:04:07,950 --> 00:04:13,190 ini adalah jenis kata buzz sekarang, tapi mereka masih berguna. 74 00:04:13,190 --> 00:04:17,940 Anda mungkin pernah mendengar orang berbicara tentang model, tampilan, dan controller. 75 00:04:17,940 --> 00:04:23,210 Model adalah data aktual bahwa aplikasi Anda akan berurusan dengan. 76 00:04:23,210 --> 00:04:28,260 Misalnya, di Cat Anda Facebook, model Anda akan - 77 00:04:28,260 --> 00:04:35,340 Anda akan memiliki model untuk posting seperti, dan model untuk profil pengguna, hal-hal seperti itu. 78 00:04:35,340 --> 00:04:41,090 Pendapat Anda bagaimana Anda menyajikan data itu untuk pengguna Anda. 79 00:04:41,090 --> 00:04:46,660 Anda mungkin memiliki 1 view untuk melihat sebuah posting tunggal dan semua komentar 80 00:04:46,660 --> 00:04:51,720 dan pandangan yang berbeda untuk dinding Anda yang memiliki daftar semua posting 81 00:04:51,720 --> 00:04:57,170 yang ditujukan kepada Anda, dan pandangan yang berbeda untuk feed berita Anda - hal-hal seperti itu. 82 00:04:57,170 --> 00:05:00,610 Akhirnya, Anda memiliki kontroler yang pada dasarnya ketika orang mengirimkan posting 83 00:05:00,610 --> 00:05:03,310 dan Anda membuat pembaruan sistem back-end Anda, 84 00:05:03,310 --> 00:05:06,400 Anda kenaikan sekelompok counter, dan apa pun. 85 00:05:06,400 --> 00:05:07,860 Mereka adalah pengendali Anda. 86 00:05:07,860 --> 00:05:11,030 >> Aku akan berbicara terutama tentang model. 87 00:05:11,030 --> 00:05:14,030 Tampilan secara teknis tidak sulit dan masalah ini lebih banyak dengan merancang mereka 88 00:05:14,030 --> 00:05:22,040 Controller akan menjadi spesifik untuk apa pun yang Anda merancang. 89 00:05:22,040 --> 00:05:25,220 Tapi ada beberapa teknik yang cukup umum yang dapat Anda gunakan 90 00:05:25,220 --> 00:05:30,220 untuk membuat model Anda lebih baik dan lebih mudah untuk bekerja dengan yang saya pikir sangat membantu. 91 00:05:30,220 --> 00:05:35,860 Hal ini sebagian besar akan menjadi tentang bagaimana untuk menangani data aplikasi web Anda dengan cara yang baik. 92 00:05:35,860 --> 00:05:40,420 Isu-isu utama dengan model 93 00:05:40,420 --> 00:05:44,540 adalah bahwa mereka hidup pada client dan server dan Anda harus mencari tahu 94 00:05:44,540 --> 00:05:51,170 a) bagaimana untuk mendapatkan mereka - semua yang relevan - dari server ke klien, 95 00:05:51,170 --> 00:05:53,440 dan b) bagaimana untuk menjaga mereka dalam sync. 96 00:05:53,440 --> 00:05:58,700 Pengguna Anda akan ingin untuk membuat beberapa update. 97 00:05:58,700 --> 00:06:00,470 Mereka akan ingin membuat posting baru. 98 00:06:00,470 --> 00:06:04,800 Mereka akan ingin seperti hal-hal dan hal-hal jika Anda memiliki orang-orang seperti. 99 00:06:04,800 --> 00:06:11,490 Mereka adalah tantangan teknis utama berurusan dengan model. 100 00:06:11,490 --> 00:06:15,680 Hal pertama yang Anda akan ingin bertanya pada diri sendiri adalah 101 00:06:15,680 --> 00:06:18,420 apa jenis data yang masuk dalam model ini dan jenis pertanyaan yang akan kita ingin lakukan - 102 00:06:18,420 --> 00:06:24,290 yaitu, bagaimana kita akan melihat model? 103 00:06:24,290 --> 00:06:26,940 Sebagai contoh Cat Facebook Anda, 104 00:06:26,940 --> 00:06:31,520 posting Anda akan memiliki seorang penulis yang terkait dengan itu, 105 00:06:31,520 --> 00:06:35,660 beberapa posting dinding teks, dan penerima pos dinding. 106 00:06:35,660 --> 00:06:38,470 Dan maka Anda mungkin ingin query bahwa dalam banyak cara yang berbeda. 107 00:06:38,470 --> 00:06:42,220 Anda akan ingin melihat dengan yang menulis posting yang, 108 00:06:42,220 --> 00:06:46,620 oleh yang menerima yang posting, mungkin dengan tanggal mereka diposting. 109 00:06:46,620 --> 00:06:50,340 Tetapi jika Anda akan melakukannya dengan tanggal, maka Anda harus menambahkan bidang lain untuk posting Anda 110 00:06:50,340 --> 00:06:52,490 ketika itu benar-benar diposting. 111 00:06:52,490 --> 00:07:00,220 Ini 2 faktor - data apa yang ingin Anda gunakan dan bagaimana Anda ingin melihatnya - 112 00:07:00,220 --> 00:07:04,200 Anda harus berpikir tentang mereka pertama karena mereka bergantung satu sama lain, 113 00:07:04,200 --> 00:07:08,030 dan itu akan lebih sulit untuk menambahkan mereka nanti. 114 00:07:08,030 --> 00:07:12,750 >> Ada beberapa pertimbangan lain. 115 00:07:12,750 --> 00:07:17,540 Ketika Anda berpikir tentang bagaimana Anda menangani model pada server 116 00:07:17,540 --> 00:07:20,540 apa yang ingin Anda lihat adalah - 117 00:07:20,540 --> 00:07:27,440 Anda pada dasarnya ingin membuat server sesederhana mungkin. 118 00:07:29,440 --> 00:07:35,500 Melakukan hal-hal di sisi client umumnya jauh lebih cepat jika Anda dapat melakukannya murni pada klien 119 00:07:35,500 --> 00:07:38,230 tanpa melakukan apapun permintaan jaringan. 120 00:07:38,230 --> 00:07:47,860 Idenya adalah untuk melakukan sebanyak mungkin pertanyaan yang Anda bisa pada klien. 121 00:07:47,860 --> 00:07:51,560 Satu-satunya masalah dengan itu 122 00:07:51,560 --> 00:07:54,160 adalah bahwa jika Anda meminta semua data Anda di awal 123 00:07:54,160 --> 00:07:57,160 maka itu akan membutuhkan waktu lama untuk load. 124 00:07:57,160 --> 00:08:02,290 Jadi, idenya adalah untuk menyerang media senang antara memiliki cukup data pada klien 125 00:08:02,290 --> 00:08:07,640 bahwa Anda dapat melakukan sebagian besar pekerjaan Anda di sana tetapi tidak hanya mengambil semuanya sekaligus 126 00:08:07,640 --> 00:08:09,710 sehingga Anda mendapatkan beban kali benar-benar lambat di awal. 127 00:08:09,710 --> 00:08:12,610 Sebagai contoh, untuk data kucing Anda 128 00:08:12,610 --> 00:08:20,340 Anda mungkin ingin mengambil sekelompok posting dinding baru-baru ini. 129 00:08:20,340 --> 00:08:23,790 Anda tidak ingin mengambil semua dari mereka karena itu bisa kembali beberapa tahun. 130 00:08:23,790 --> 00:08:25,470 Tapi Anda tidak ingin mengambil mereka satu per satu 131 00:08:25,470 --> 00:08:28,740 karena itu akan memperkenalkan banyak overhead jaringan. 132 00:08:28,740 --> 00:08:33,620 >> Ini sering cukup sulit - setelah Anda memiliki database yang berjalan - 133 00:08:33,620 --> 00:08:37,210 hal ini sering cukup sulit untuk mengubah apa data yang Anda miliki di dalamnya - 134 00:08:37,210 --> 00:08:40,510 yaitu, menambahkan kolom database baru atau sesuatu - 135 00:08:40,510 --> 00:08:43,510 jadi salah satu strategi yang baik sebenarnya hanya untuk menyimpan banyak data Anda dalam gumpalan teks - 136 00:08:43,510 --> 00:08:53,880 JSON gumpalan - JSON menjadi JavaScript Object Notation - 137 00:08:53,880 --> 00:08:58,330 Alasan yang berguna adalah karena Anda dapat menambahkan properti baru 138 00:08:58,330 --> 00:09:01,920 untuk semua ini gumpalan JSON tanpa mengubah database Anda. 139 00:09:01,920 --> 00:09:06,860 Satu-satunya downside itu adalah bahwa jika Anda memiliki banyak bidang 140 00:09:06,860 --> 00:09:09,890 yang Anda tambahkan di kemudian hari - seperti yang tersembunyi dalam JSON gumpalan - 141 00:09:09,890 --> 00:09:12,850 maka lebih sulit untuk permintaan mereka dalam database. 142 00:09:12,850 --> 00:09:17,690 Misalnya, jika Anda kemudian - jika Anda memiliki model yang posting Anda yang telah kita bahas sebelumnya 143 00:09:17,690 --> 00:09:25,380 hanya dengan penulis, penerima dan teks - 144 00:09:25,380 --> 00:09:29,000 Anda juga bisa memiliki JSON gumpalan dan kemudian jika Anda kemudian ingin menambahkan sebuah field tanggal 145 00:09:29,000 --> 00:09:31,000 Anda tidak harus mengubah database Anda. 146 00:09:31,000 --> 00:09:36,140 Anda bisa menambahkan tanggal untuk semua bidang teks. 147 00:09:36,140 --> 00:09:39,640 Dan kemudian Anda akan dapat melihat mereka di sisi client, 148 00:09:39,640 --> 00:09:42,430 tetapi Anda tidak akan dapat permintaan mereka pada sisi server 149 00:09:42,430 --> 00:09:44,430 karena itu tersembunyi di dalam teks itu. 150 00:09:44,430 --> 00:09:49,920 >> Masalah lain yang ingin Anda pikirkan 151 00:09:49,920 --> 00:09:52,400 adalah bagaimana klien dan server Anda akan berkomunikasi. 152 00:09:52,400 --> 00:09:56,040 Anda biasanya ingin menyimpan ini sesederhana mungkin. 153 00:09:56,040 --> 00:10:02,230 Anda hanya dapat memiliki seperti get-me-request ini data, 154 00:10:02,230 --> 00:10:09,140 a membuat-a-baru-obyek hal, dan permintaan update-an-old-obyek. 155 00:10:09,140 --> 00:10:12,930 Dan ini semua akan URL yang berbeda pada server yang Anda - 156 00:10:12,930 --> 00:10:20,030 bahwa browser akan - Anda dapat menggunakan permintaan AJAX untuk semua ini 157 00:10:20,030 --> 00:10:24,000 dan baik menerima atau data pos. 158 00:10:24,000 --> 00:10:26,600 Sekali lagi, untuk Cat kami Facebook contoh, 159 00:10:26,600 --> 00:10:32,350 Anda bisa memiliki URL yang mendapatkan posting individu, 160 00:10:32,350 --> 00:10:39,750 dan Anda akan memiliki URL untuk membuat posting dinding baru 161 00:10:39,750 --> 00:10:45,670 dan mungkin URL untuk meng-upload foto profil Anda, hal-hal seperti itu. 162 00:10:45,670 --> 00:10:51,730 Tapi sekali lagi, itu untuk pra-mengambil sebagian besar data Anda sehingga Anda tidak harus terus 163 00:10:51,730 --> 00:10:53,360 membuat permintaan jaringan. 164 00:10:53,360 --> 00:10:59,030 Untuk alasan itu, Anda mungkin tidak ingin memiliki permintaan mendapatkan individu untuk single post, 165 00:10:59,030 --> 00:11:03,210 dan sebagai gantinya Anda hanya ingin 1 mendapatkan permintaan untuk seluruh dinding. 166 00:11:03,210 --> 00:11:06,110 Dan kemudian jika Anda mencoba untuk keseimbangan karena - 167 00:11:06,110 --> 00:11:10,970 ini juga akan tergantung pada aplikasi Anda. 168 00:11:10,970 --> 00:11:13,430 Karena jika Anda mengharapkan bahwa orang hanya memiliki 10 atau 20 postingan di dinding 169 00:11:13,430 --> 00:11:15,430 yang akan baik-baik saja. 170 00:11:15,430 --> 00:11:17,390 Tapi jika Anda mengharapkan mereka akan memiliki ribuan maka permintaan itu akan memakan waktu terlalu lama, 171 00:11:17,390 --> 00:11:23,580 dan sehingga Anda mungkin ingin menambahkan get-all-posts-sejak parameter. 172 00:11:23,580 --> 00:11:26,580 >> Untuk semua ini Anda mungkin akan ingin untuk melakukan sinkronisasi data Anda di JSON - 173 00:11:26,580 --> 00:11:29,260 JavaScript Object Notation. 174 00:11:29,260 --> 00:11:34,600 Pretty much setiap bahasa berhubungan dengan JSON sangat baik. 175 00:11:34,600 --> 00:11:40,880 JQuery memiliki fungsi ini getJSON bagus yang akan melakukan semua kerja keras untuk Anda. 176 00:11:40,880 --> 00:11:47,390 Dan pada PHP ada juga sangat bagus fungsi komunikasi JSON. 177 00:11:47,390 --> 00:11:52,660 Jadi, itu mungkin format terbaik untuk mengirim model Anda bolak-balik. 178 00:11:52,660 --> 00:11:56,570 >> Sebagai contoh dari apa yang telah kita bicarakan sejauh ini, 179 00:11:56,570 --> 00:12:00,520 inilah aliran contoh untuk aplikasi Facebook Cat Anda. 180 00:12:00,520 --> 00:12:07,760 Ini dimulai dengan browser Anda meminta URL situs dasar. 181 00:12:07,760 --> 00:12:15,470 Server mungkin akan mengirim lebih dari HTML statis dan beberapa JavaScript dan CSS. 182 00:12:15,470 --> 00:12:19,170 Ini biasanya terbaik untuk tidak melakukan render pada server. 183 00:12:19,170 --> 00:12:23,370 Anda mungkin tidak ingin - 184 00:12:23,370 --> 00:12:28,360 apa server tidak lakukan di sana akan turun daftar posting dinding 185 00:12:28,360 --> 00:12:31,120 dan menghasilkan beberapa HTML untuk masing-masing dan mengirimkan lebih. 186 00:12:31,120 --> 00:12:34,960 Ini biasanya terbaik untuk melakukannya di sisi klien karena jika tidak 187 00:12:34,960 --> 00:12:38,580 setiap kali Anda ingin menarik kembali sesuatu, Anda harus membuat permintaan server. 188 00:12:38,580 --> 00:12:42,450 Dan itu sangat cepat memberikan Anda banyak overhead. 189 00:12:42,450 --> 00:12:47,430 Ini biasanya yang terbaik hanya untuk kapal turunkan statis HTML 190 00:12:47,430 --> 00:12:50,660 dan kemudian JavaScript dan CSS yang akan melakukan rendering pada sisi klien. 191 00:12:50,660 --> 00:12:56,750 Segera setelah hal-hal yang masuk, 192 00:12:56,750 --> 00:13:03,500 maka Anda dapat memiliki - dalam JavaScript - Anda dapat melakukan permintaan untuk data dinding 193 00:13:03,500 --> 00:13:08,740 dan hal-hal seperti itu, dan setelah itu server pada dasarnya hanya melakukan query database 194 00:13:08,740 --> 00:13:10,740 dan memeriksa perizinan. 195 00:13:10,740 --> 00:13:16,690 Satu-satunya hal yang penting adalah bahwa hal itu tidak dapat mengirim lebih dari beberapa pengguna posting dinding lainnya 196 00:13:16,690 --> 00:13:19,220 bahwa Anda tidak diizinkan untuk melihat. 197 00:13:19,220 --> 00:13:28,050 Hal ini pada dasarnya dapat menjadi lapisan akses sangat tipis ke database Anda, 198 00:13:28,050 --> 00:13:32,820 dan kemudian semua menampilkan data - semua pandangan dan barang-barang - 199 00:13:32,820 --> 00:13:37,280 tersebut dapat terjadi di browser Anda, dan kemudian ketika Anda ingin membuat posting atau sesuatu 200 00:13:37,280 --> 00:13:40,000 Anda hanya mengirim permintaan lain. 201 00:13:40,000 --> 00:13:45,350 >> Ada juga beberapa barang-barang mewah yang dapat Anda lakukan di atas ini. 202 00:13:45,350 --> 00:13:49,550 Dalam hal informasi teknis yang lebih spesifik, 203 00:13:49,550 --> 00:13:53,360 berkembang di dataran JavaScript dapat menjadi sedikit menyakitkan, 204 00:13:53,360 --> 00:13:56,220 jadi ada beberapa perpustakaan dan alat-alat yang akan banyak membantu Anda dengan itu. 205 00:13:56,220 --> 00:14:03,690 Saya pikir Anda semua mungkin pernah mendengar tentang jQuery yang membuat HTML melakukan render 206 00:14:03,690 --> 00:14:08,890 dan manipulasi jauh lebih mudah - memiliki banyak fungsi mewah untuk memudar masuk dan keluar, 207 00:14:08,890 --> 00:14:12,020 dan melakukan animasi bergairah. 208 00:14:12,020 --> 00:14:13,720 Ada juga perpustakaan ini disebut Underscore.js. 209 00:14:13,720 --> 00:14:20,760 Ini memiliki banyak fungsi utilitas yang berguna, hal-hal yang Anda harapkan JavaScript untuk memiliki 210 00:14:20,760 --> 00:14:24,740 bahwa itu benar-benar doesnt - hal-hal seperti menyeret sebuah array, 211 00:14:24,740 --> 00:14:28,900 menghapus duplikat dari daftar, atau meratakan daftar daftar. 212 00:14:28,900 --> 00:14:30,900 Ini hanyalah sebuah contoh kode kecil. 213 00:14:30,900 --> 00:14:36,520 Garis bawah memiliki satu ton ini fungsi bagus bahwa Anda berharap Anda akan memiliki semua waktu. 214 00:14:36,520 --> 00:14:38,840 >> Dan kemudian ada 1 perpustakaan lagi bahwa saya ingin menghabiskan sedikit waktu di 215 00:14:38,840 --> 00:14:44,800 disebut Backbone.js karena Backbone benar-benar membantu Anda berhubungan dengan model pada sisi client 216 00:14:44,800 --> 00:14:47,210 dan banyak kebingungan yang bisa menyebabkan. 217 00:14:47,210 --> 00:14:53,550 Backbone memberikan konsep model dan koleksi 218 00:14:53,550 --> 00:14:58,300 dalam JavaScript yang pada dasarnya persis seperti objek JavaScript 219 00:14:58,300 --> 00:15:04,900 dalam JavaScript array tetapi mereka memiliki acara ketika Anda mengubah sifat mereka. 220 00:15:04,900 --> 00:15:09,090 Sama seperti di JavaScript, Anda dapat memiliki sebuah acara ketika sebuah tombol diklik atau sesuatu 221 00:15:09,090 --> 00:15:14,800 model Backbone ini dan koleksi Backbone akan menyiarkan hal-hal seperti 222 00:15:14,800 --> 00:15:17,510 bahwa ketika mereka berubah. 223 00:15:17,510 --> 00:15:22,270 Itu berarti bahwa Anda hanya bisa menulis sesuatu seperti potongan kode di sini - 224 00:15:22,270 --> 00:15:27,530 ini mengatakan, setiap kali Anda menambahkan sesuatu ke posting array yang Anda redraw seluruh dinding. 225 00:15:27,530 --> 00:15:34,270 Dan ini akan mengatakan setiap kali jumlah posting tentang suka perubahan, 226 00:15:34,270 --> 00:15:38,970 Anda memberitahu pengguna bahwa seseorang menyukai posting mereka. 227 00:15:38,970 --> 00:15:45,210 Atau setiap kali ada milik posting perubahan Anda redraw pos. 228 00:15:45,210 --> 00:15:51,050 Hal-hal seperti itu akan menghemat ton kompleksitas karena jika 229 00:15:51,050 --> 00:15:55,440 jika Anda tidak memiliki beberapa kerangka kerja seperti ini maka setiap kali dalam kode Anda bahwa Anda mengubah 230 00:15:55,440 --> 00:16:04,280 apa-apa tentang posting, Anda harus ingat diri untuk memanggil semua membuat fungsi 231 00:16:04,280 --> 00:16:07,680 dan hal-hal seperti itu, dan jika Anda ingin menambahkan sesuatu yang baru yang terjadi 232 00:16:07,680 --> 00:16:10,680 setiap kali Anda mengubah posting Anda akan harus melalui setiap tempat di Anda 233 00:16:10,680 --> 00:16:14,610 kode yang Anda diubah posting dan menambahkan bahwa hal yang baru. 234 00:16:14,610 --> 00:16:21,450 Kerangka kerja seperti ini akan menghapus banyak bahwa komunikasi antara lapisan- 235 00:16:21,450 --> 00:16:28,280 yang membuat kode Anda yang kompleks dan sulit untuk mempertahankan. 236 00:16:28,280 --> 00:16:31,170 >> Ada sedikit tentang pandangan juga. 237 00:16:31,170 --> 00:16:35,960 Aku akan meninggalkan sebagian besar ini kepada Billy karena mereka secara teknis tidak terlalu sulit. 238 00:16:35,960 --> 00:16:43,540 Gunakan jQuery untuk pandangan Anda. Ini hampir seperti kebutuhan pada saat ini. 239 00:16:43,540 --> 00:16:46,290 Itu hanya membuat segalanya jadi lebih mudah. 240 00:16:46,290 --> 00:16:48,290 Ada banyak perpustakaan. 241 00:16:48,290 --> 00:16:49,970 Jika Anda telah rumit elemen user interface, 242 00:16:49,970 --> 00:16:57,250 jika Anda ingin hal auto-lengkap atau seperti salah satu mewah multi-penyeleksi - 243 00:16:57,250 --> 00:17:04,790 jika Anda menginginkan sesuatu seperti itu, Anda mungkin harus hanya mencari di sekitar 244 00:17:04,790 --> 00:17:08,130 dan Anda dapat menemukan sebuah perpustakaan yang baik yang akan melakukan apa yang Anda inginkan. 245 00:17:08,130 --> 00:17:11,579 Billy akan menjelaskan lebih lanjut tentang bagian-bagian benar-benar sulit dilihat. 246 00:17:11,579 --> 00:17:17,530 Juga, sebagai catatan, Backbone memiliki beberapa fungsi untuk membuat tampilan berkomunikasi 247 00:17:17,530 --> 00:17:22,800 baik dengan model - melihat dokumentasi untuk semua perpustakaan tersebut, sebenarnya. 248 00:17:22,800 --> 00:17:28,270 Hanya melihat dokumentasi. Mereka sangat baik tertulis dan mudah diikuti. 249 00:17:28,270 --> 00:17:33,890 Secara umum, Anda dapat cukup banyak hanya Google jika Anda memiliki masalah. 250 00:17:33,890 --> 00:17:36,370 Ada banyak orang yang menggunakan mereka. 251 00:17:36,370 --> 00:17:42,020 Saya rasa ini adalah sebagai catatan akhir. 252 00:17:42,020 --> 00:17:48,770 >> Ada juga beberapa hal yang lebih canggih yang dapat Anda lakukan 253 00:17:48,770 --> 00:17:53,400 jika Anda ingin membuat aplikasi web Anda ekstra mengagumkan. 254 00:17:53,400 --> 00:17:59,760 Anda dapat melakukan - HTML5 spesifikasi baru memiliki banyak hal mewah yang dapat Anda lakukan. 255 00:17:59,760 --> 00:18:05,780 Penyimpanan lokal - yang Anda dapat menyimpan data dalam browser - 256 00:18:05,780 --> 00:18:09,470 daripada harus kembali dan membaca dengan teliti server untuk semuanya, 257 00:18:09,470 --> 00:18:12,470 Anda dapat menyimpan beberapa pada klien dan bahkan memungkinkan orang - 258 00:18:12,470 --> 00:18:20,850 dalam beberapa kasus bahkan dapat membiarkan Anda menggunakan offline halaman web. 259 00:18:20,850 --> 00:18:26,980 Ada hal yang disebut WebSockets yang berbagai jenis jaringan komunikasi 260 00:18:26,980 --> 00:18:30,930 di mana bukan hanya Anda membuat satu permintaan, Anda mendapatkan respon dan Anda sudah selesai, 261 00:18:30,930 --> 00:18:35,240 Anda tetap membuka koneksi ke server dan sehingga Anda dapat melakukan hal-hal seperti 262 00:18:35,240 --> 00:18:37,240 update real-time. 263 00:18:37,240 --> 00:18:42,020 Jadi, jika Anda sedang mencoba untuk membuat aplikasi chatting, Anda bisa menggunakan WebSockets 264 00:18:42,020 --> 00:18:43,790 untuk berkomunikasi bolak-balik sehingga Anda tidak harus terus meminta, 265 00:18:43,790 --> 00:18:48,410 "Oh, Server, apakah ada yang mengirim saya mengobrol?" setiap 10 detik atau sesuatu. 266 00:18:48,410 --> 00:18:55,620 Ada juga fitur HTML5 yang menarik di mana Anda dapat membuatnya terlihat seperti 267 00:18:55,620 --> 00:18:58,340 URL halaman berubah tanpa harus benar-benar ulang itu. 268 00:18:58,340 --> 00:19:03,230 Anda dapat menggunakan kembali dan maju tombol tanpa melakukan banyak permintaan jaringan. 269 00:19:03,230 --> 00:19:14,660 Hal-hal seperti itu benar-benar berguna dalam hal membuat cepat tetapi juga bekerja seperti aplikasi web seharusnya. 270 00:19:14,660 --> 00:19:17,680 >> Ada juga hal ini disebut CoffeeScript. 271 00:19:17,680 --> 00:19:24,450 CoffeeScript merupakan bahasa yang berbeda, sebenarnya, yang mengkompilasi ke JavaScript. 272 00:19:24,450 --> 00:19:30,080 Anda akan menulis semua kode Anda di CoffeeScript, dan kemudian Anda menjalankan kompiler ini, 273 00:19:30,080 --> 00:19:33,300 dan meludah keluar file JavaScript yang dapat Anda masukkan dalam halaman web Anda. 274 00:19:33,300 --> 00:19:38,860 Alasan bahwa CoffeeScript bagus karena itu akan menghilangkan banyak 275 00:19:38,860 --> 00:19:44,760 kasus aneh yang memiliki JavaScript mana sama sederajat, 276 00:19:44,760 --> 00:19:51,130 dan sama sama dengan melakukan hal yang berbeda, atau suka - 277 00:19:51,130 --> 00:19:55,740 memiliki sintaks yang lebih baik untuk berurusan dengan array dan fungsi. 278 00:19:55,740 --> 00:20:00,460 Ini adalah potongan kecil dari CoffeeScript yang menghasilkan daftar semua kotak 279 00:20:00,460 --> 00:20:04,900 dari 10 ^ 2 sampai 1 ^ 2 dalam urutan terbalik. 280 00:20:04,900 --> 00:20:08,410 Seperti yang Anda lihat, CoffeeScript sering memungkinkan Anda mengekspresikan dalam 1 baris 281 00:20:08,410 --> 00:20:10,890 apa yang akan mengambil 5 baris JavaScript. 282 00:20:10,890 --> 00:20:13,230 Hal ini dapat membuat hal-hal yang jauh lebih mudah. 283 00:20:13,230 --> 00:20:15,390 Ini sedikit sintaks baru untuk belajar pada awalnya, 284 00:20:15,390 --> 00:20:18,010 tapi pasti akan membuat Anda lebih produktif dalam jangka panjang. 285 00:20:18,010 --> 00:20:22,050 >> Anda juga dapat menggunakan bahasa lain pada server daripada PHP - 286 00:20:22,050 --> 00:20:27,570 bahasa seperti Ruby, Python, atau bahkan ada proyek yang disebut node.js 287 00:20:27,570 --> 00:20:31,450 yang akan membiarkan Anda menggunakan JavaScript pada server. 288 00:20:31,450 --> 00:20:34,700 Secara pribadi, saya benar-benar, benar-benar benci PHP. 289 00:20:34,700 --> 00:20:38,310 Aku hanya tidak senang bekerja dengannya. 290 00:20:38,310 --> 00:20:43,450 Jika Anda juga berpikir bahwa itu adalah cluge sekali bahasa, 291 00:20:43,450 --> 00:20:46,160 maka Anda dapat menggunakan salah satu dari ini sebagai gantinya. 292 00:20:46,160 --> 00:20:54,780 Secara umum, jika Anda ingin melakukan sesuatu dan Anda tidak benar-benar tahu bagaimana Anda akan melakukannya, 293 00:20:54,780 --> 00:20:56,780 hanya mencari di Internet. 294 00:20:56,780 --> 00:20:59,990 Ada ton dan ton sumber daya terutama pada - 295 00:20:59,990 --> 00:21:03,260 StackOverflow adalah salah besar. 296 00:21:03,260 --> 00:21:06,400 Ini website ini di mana programmer saling bertanya. 297 00:21:06,400 --> 00:21:09,690 Anda mungkin telah mengalami hal itu jika Anda mengalami kesulitan pada masalah CS50 set. 298 00:21:09,690 --> 00:21:16,820 Dan ada ton perpustakaan untuk melakukan cukup banyak apa pun yang Anda inginkan. 299 00:21:16,820 --> 00:21:21,710 Jika Anda ingin melakukan sesuatu dan Anda tidak tahu bagaimana melakukannya, 300 00:21:21,710 --> 00:21:23,710 jangan menganggap bahwa itu tidak mungkin. 301 00:21:23,710 --> 00:21:26,160 Hanya melihat-lihat dan Anda mungkin menemukan beberapa sumber daya yang baik. 302 00:21:26,160 --> 00:21:29,280 >> Sebagai seorang jenderal membungkus, 303 00:21:29,280 --> 00:21:33,650 takeaways utama adalah menjaga hal-hal sederhana. 304 00:21:33,650 --> 00:21:36,010 Semakin kompleks kode Anda di awal 305 00:21:36,010 --> 00:21:40,370 dan semakin Anda mencoba dan melakukan hal-hal mewah, 306 00:21:40,370 --> 00:21:43,300 semakin lama waktu yang dibutuhkan untuk mendapatkan sesuatu benar-benar fungsional 307 00:21:43,300 --> 00:21:46,480 dan semakin sulit akan berubah nanti. 308 00:21:46,480 --> 00:21:49,580 Jadi, melakukan hal-hal bodoh, cara mudah pertama. 309 00:21:49,580 --> 00:21:51,720 Untuk pergi bersama dengan itu, 310 00:21:51,720 --> 00:21:59,070 jangan takut membuang kode lama atau membersihkannya banyak. 311 00:21:59,070 --> 00:22:05,320 Secara umum, setelah Anda benar-benar memiliki sesuatu yang bekerja, 312 00:22:05,320 --> 00:22:09,640 itu jauh lebih mudah untuk berpikir tentang daripada ketika Anda masih dalam tahap awal 313 00:22:09,640 --> 00:22:12,610 bagaimana saya menempatkan ini semua bersama-sama. 314 00:22:12,610 --> 00:22:17,500 Yang terbaik untuk membuat desain paling bodoh mungkin yang bekerja 315 00:22:17,500 --> 00:22:22,270 dan kemudian memperbaikinya iteratif daripada mencoba untuk mendapatkan segalanya dengan benar pertama kalinya. 316 00:22:22,270 --> 00:22:28,330 Dalam hal pembagian client-server, mencoba dan menjaga server Anda sangat sederhana - 317 00:22:28,330 --> 00:22:33,030 hanya sebuah database dan beberapa otentikasi dan tidak melakukan kerja keras di sana. 318 00:22:33,030 --> 00:22:37,540 Apakah semua hal yang rumit Anda di sisi klien dalam browser 319 00:22:37,540 --> 00:22:40,650 dalam JavaScript sebanyak yang Anda bisa. 320 00:22:40,650 --> 00:22:43,420 Lihatlah ke sekeliling untuk perpustakaan yang membuat hidup Anda lebih baik. 321 00:22:43,420 --> 00:22:46,850 Selalu lebih baik untuk menggunakan kode yang orang lain menulis 322 00:22:46,850 --> 00:22:49,850 jika Anda - dan tidak menulis sendiri. 323 00:22:49,850 --> 00:22:57,560 Ada banyak hal di Internet. Google adalah teman terbaik Anda. 324 00:22:57,560 --> 00:22:59,560 Google adalah teman terbaik programmer. 325 00:22:59,560 --> 00:23:07,620 Ya, pasti tidak takut untuk melihat-lihat untuk barang-barang. 326 00:23:07,620 --> 00:23:11,860 Baik. Dan ke Billy. 327 00:23:11,860 --> 00:23:14,600 >> [Billy] Sebenarnya, sebelum saya mulai dengan beberapa hal desain, 328 00:23:14,600 --> 00:23:17,250 apakah ada yang punya pertanyaan untuk Ben tentang apa saja yang dia bicarakan? 329 00:23:17,250 --> 00:23:20,290 Oke, bagus. 330 00:23:20,290 --> 00:23:22,220 Sekali lagi, mari kita tahu jika sesuatu tidak jelas 331 00:23:22,220 --> 00:23:25,420 atau jika Anda ingin kami untuk pergi ke sesuatu yang sedikit lebih. 332 00:23:25,420 --> 00:23:30,330 Aku akan mundur sedikit dan berbicara tentang bagian-bagian yang lebih mendasar dari desain. 333 00:23:30,330 --> 00:23:34,840 Ben menyebutkan model yang disebut - maaf, model tampilan kontroler sistem 334 00:23:34,840 --> 00:23:38,520 yang merupakan semacam aspek teknis, jadi aku akan melihat pandangan khusus, 335 00:23:38,520 --> 00:23:42,930 dan aku akan mulai dengan bagaimana Anda akan merancang tampilan yang terlihat bagus. 336 00:23:42,930 --> 00:23:50,540 Berikut adalah jenis template benar-benar dasar untuk Cat kami Facebook. 337 00:23:50,540 --> 00:23:54,190 Saya pikir ada beberapa dasar-dasar dalam desain UI yang modern 338 00:23:54,190 --> 00:23:56,190 yang patut mengambil. 339 00:23:56,190 --> 00:23:58,210 Anda dapat melihat ada banyak ruang putih di seluruh halaman, 340 00:23:58,210 --> 00:24:00,790 banyak ruang untuk hal-hal. 341 00:24:00,790 --> 00:24:02,580 Jangan merasa seperti Anda harus labu hal-hal ke dalam halaman. 342 00:24:02,580 --> 00:24:06,700 Anda ingin meninggalkan banyak ruang terbuka, dan jika Anda pergi ke hampir semua situs web modern 343 00:24:06,700 --> 00:24:08,380 Anda akan melihat ada putih di mana-mana. 344 00:24:08,380 --> 00:24:10,380 Ada putih di tempat-tempat yang tidak Anda harapkan. 345 00:24:10,380 --> 00:24:14,570 Anda memiliki palet warna ini, dan itu bijaksana di awal 346 00:24:14,570 --> 00:24:17,880 untuk memilih palet warna yang Anda akan bekerja dengan dan berkembang. 347 00:24:17,880 --> 00:24:22,250 Anda juga - hal ini membantu untuk memilih jenis huruf, dan dengan cara itu Anda semacam bekerja dengan 348 00:24:22,250 --> 00:24:24,450 fundamental ini beton desain. 349 00:24:24,450 --> 00:24:26,910 Anda memiliki jenis Anda, Anda memiliki warna Anda, dan kemudian Anda dapat jenis 350 00:24:26,910 --> 00:24:29,380 cocok segala sesuatu yang lain sebagai dibutuhkan. 351 00:24:29,380 --> 00:24:37,710 Jadi, seperti yang saya katakan, dengan skema warna Anda, Anda ingin menggunakan warna lebih berani dari skema warna Anda 352 00:24:37,710 --> 00:24:40,320 hemat. Header bagus. Tombol yang baik untuk memiliki benar-benar besar, warna mencolok. 353 00:24:40,320 --> 00:24:43,710 Tapi secara umum, jika Anda memiliki situs Web yang memiliki warna di mana-mana, 354 00:24:43,710 --> 00:24:47,250 semua menatap wajahmu, itu hanya tampak berantakan, dan itu tidak baik. 355 00:24:47,250 --> 00:24:50,430 Anda ingin umumnya menggunakan warna terang. 356 00:24:50,430 --> 00:24:52,890 Cobalah untuk, sekali lagi, memilih skema warna yang cukup koheren. 357 00:24:52,890 --> 00:24:56,640 Anda dapat memiliki ini percikan kecil dari banyak warna - 358 00:24:56,640 --> 00:25:00,240 yang dapat terlihat cukup bagus, tetapi Anda ingin menggunakannya cukup hemat. 359 00:25:00,240 --> 00:25:04,270 >> Seperti yang saya katakan, Anda ingin menjadi minimal. Kurang hampir selalu lebih. 360 00:25:04,270 --> 00:25:07,430 Jika Anda dapat menampilkan sesuatu atau tidak menampilkan sesuatu, 361 00:25:07,430 --> 00:25:10,230 dan Anda jenis yakin apakah itu harus ada secara default - 362 00:25:10,230 --> 00:25:13,400 mungkin Anda terbaik dari meninggalkannya keluar. Anda selalu dapat menambahkannya nanti. 363 00:25:13,400 --> 00:25:16,620 Ya, menjaga hal-hal sederhana. 364 00:25:16,620 --> 00:25:19,510 Tapi yang paling penting, Anda ingin mempertimbangkan beberapa desain. 365 00:25:19,510 --> 00:25:23,520 Jangan berpikir bahwa ketika Anda membuat sebuah situs, Anda memilikinya di kepala Anda bahwa Anda akan 366 00:25:23,520 --> 00:25:26,310 membuat situs dengan cara tertentu, dan itu akan terlihat persis seperti ini. 367 00:25:26,310 --> 00:25:29,830 Ini akan memiliki header biru di bagian atas dan side bar biru 368 00:25:29,830 --> 00:25:32,670 dan kemudian hal sub-header yang kuning. 369 00:25:32,670 --> 00:25:34,670 Anda ingin membuat beberapa template. 370 00:25:34,670 --> 00:25:37,350 Anda dapat - jika Anda baik dengan Photo Shop, Anda dapat membuka bahwa sampai dan semacam 371 00:25:37,350 --> 00:25:39,600 merancang sebuah situs web yang Anda inginkan untuk melihat. 372 00:25:39,600 --> 00:25:41,680 Jika tidak, Anda hanya dapat menggunakan pena dan kertas, 373 00:25:41,680 --> 00:25:44,000 tapi menggaruk beberapa desain. 374 00:25:44,000 --> 00:25:47,000 Anda ingin pada dasarnya memiliki mengatur di mana Anda memiliki banyak desain yang berbeda, 375 00:25:47,000 --> 00:25:50,810 dan jika seseorang akhirnya bekerja, maka itu bagus. 376 00:25:50,810 --> 00:25:53,370 Jika seseorang berakhir sampai gagal, maka Anda selalu memiliki satu sama lain untuk berpaling. 377 00:25:53,370 --> 00:25:57,960 Secara umum, tidak merasa seperti Anda harus dibatasi 378 00:25:57,960 --> 00:26:00,830 desain apa pun yang Anda awalnya memutuskan. 379 00:26:00,830 --> 00:26:04,420 Desain sangat bervariasi, dan bagian dari pentingnya model 380 00:26:04,420 --> 00:26:09,480 controller tampilan sistem adalah bahwa Anda dapat swap masuk dan keluar pandangan yang berbeda yang Anda inginkan. 381 00:26:09,480 --> 00:26:13,510 Anda dapat bergoyang data satu arah, dan kemudian memutuskan, oh, sebenarnya, yang tidak bekerja dengan baik. 382 00:26:13,510 --> 00:26:19,190 Saya pikir itu agak terlalu rumit atau ada bagian di sini yang tidak benar-benar bekerja, 383 00:26:19,190 --> 00:26:22,150 jadi aku hanya akan benar-benar meninggalkan pandangan ini dan swap yang benar-benar baru. 384 00:26:22,150 --> 00:26:24,790 Kita masih bisa menggunakan model lama dan pengendali tua. 385 00:26:24,790 --> 00:26:27,490 Kita bisa melakukan segala sesuatu di server dan client seperti yang kita akan sebelumnya. 386 00:26:27,490 --> 00:26:32,850 Tapi gelombang sebenarnya dari data yang ditampilkan akan menjadi sedikit berbeda. 387 00:26:32,850 --> 00:26:35,840 >> Sejauh benar-benar menerapkan desain yang Anda inginkan, 388 00:26:35,840 --> 00:26:39,330 setelah Anda memiliki beberapa desain sketsa di atas kertas atau di Photo Shop atau apa pun, 389 00:26:39,330 --> 00:26:42,120 ada sejumlah alat yang dibuat tersedia untuk Anda. 390 00:26:42,120 --> 00:26:45,700 Yang pertama Anda sangat akrab dengan yang HTML, PHP, atau apa pun 391 00:26:45,700 --> 00:26:48,990 bahasa yang Anda gunakan hanya untuk kode halaman statis di situs Web Anda. 392 00:26:48,990 --> 00:26:51,990 Anda telah banyak bekerja dengan HTML yang jenis memberikan tag ini 393 00:26:51,990 --> 00:26:57,820 bahwa Anda dapat memasukkan sesuatu ke dalam, dan pada dasarnya itu adalah cara mengatur konten Anda. 394 00:26:57,820 --> 00:27:00,990 Misalnya, Anda memiliki header di atas sana, sehingga Anda akan memiliki tag header, 395 00:27:00,990 --> 00:27:05,770 dan itu akan memiliki beberapa teks di dalamnya yang mungkin akan di tag lain. 396 00:27:05,770 --> 00:27:08,380 Maka Anda memiliki sidebar mungkin dengan beberapa link yang berbeda, 397 00:27:08,380 --> 00:27:10,160 dan mereka akan semua berada dalam tag terpisah. 398 00:27:10,160 --> 00:27:13,870 Jadi, pada dasarnya HTML pada intinya adalah cara membagi halaman bagaimana 399 00:27:13,870 --> 00:27:16,980 Anda akhirnya ingin format itu. 400 00:27:16,980 --> 00:27:18,980 Jadi sekali lagi, Anda telah melihat itu sebelumnya. 401 00:27:18,980 --> 00:27:20,540 Kau cukup nyaman dengan bekerja sama dengan sekarang 402 00:27:20,540 --> 00:27:23,120 mengingat bahwa Anda sudah melakukan pset lalu mudah-mudahan, 403 00:27:23,120 --> 00:27:26,150 sehingga seharusnya tidak ada masalah. 404 00:27:26,150 --> 00:27:31,280 >> Maka Anda memiliki CSS yang pada dasarnya menangani semua aspek statis desain. 405 00:27:31,280 --> 00:27:35,320 Ini akan menangani semua warna, semua posisi unsur yang berbeda, 406 00:27:35,320 --> 00:27:36,840 di mana mereka pergi dengan menghormati satu sama lain, 407 00:27:36,840 --> 00:27:41,530 seberapa besar mereka, berbagai jenis positioning yang akan Anda miliki - 408 00:27:41,530 --> 00:27:46,030 dengan kata lain, Anda dapat memiliki hal-hal yang tetap sehingga ketika Anda gulir ke bawah mereka tinggal, 409 00:27:46,030 --> 00:27:48,700 atau Anda dapat memiliki hal-hal relatif terhadap unsur-unsur lain. 410 00:27:48,700 --> 00:27:50,730 Semua hal-hal seperti ini di CSS. 411 00:27:50,730 --> 00:27:54,630 Selanjutnya, Anda dapat melakukan dekorasi yang berbeda, Anda dapat memiliki warna teks, 412 00:27:54,630 --> 00:27:56,630 efek teks, semua hal semacam itu. 413 00:27:56,630 --> 00:28:00,360 Ben memberikan seminar yang benar-benar baik pada akhir pekan lalu ini, 414 00:28:00,360 --> 00:28:04,450 dan jadi saya pasti akan memeriksa yang keluar jika Anda berencana untuk melakukan beberapa hal mewah dengan CSS. 415 00:28:04,450 --> 00:28:09,850 CSS3 sebenarnya versi terbaru dari CSS, dan dapat melakukan segala macam hal yang benar-benar bagus. 416 00:28:09,850 --> 00:28:14,750 Hal ini dapat melakukan gradien, Anda dapat memiliki bagus, sudut bulat, Anda dapat melakukan segala macam hal 417 00:28:14,750 --> 00:28:17,940 untuk membuat website Anda terlihat lebih modern dan mewah. 418 00:28:17,940 --> 00:28:22,150 >> Alat berikutnya adalah JavaScript dan jQuery yang Ben berbicara sedikit tentang, 419 00:28:22,150 --> 00:28:24,150 tapi aku akan mendapatkan sedikit lebih jauh ke dalam. 420 00:28:24,150 --> 00:28:28,100 JavaScript, karena Anda telah bekerja dengan itu sedikit, atau setidaknya melihatnya dalam kuliah, 421 00:28:28,100 --> 00:28:31,870 adalah jenis cara dinamis melakukan hal-hal dalam HTML. 422 00:28:31,870 --> 00:28:35,950 HTML, seperti yang Anda tahu, statis, sehingga setelah Anda memiliki HTML Anda tidak dapat memodifikasinya. 423 00:28:35,950 --> 00:28:40,050 Tapi JavaScript, dalam beberapa hal, adalah cara untuk dapat memodifikasi HTML. 424 00:28:40,050 --> 00:28:44,520 Jadi Anda bisa melakukan itu, dan itu bagus, tapi JavaScript benar-benar adalah rasa sakit untuk bekerja dengan. 425 00:28:44,520 --> 00:28:49,050 Ini sangat panjang dan tumpul dan untuk melakukan bahkan hal-hal yang paling sederhana 426 00:28:49,050 --> 00:28:51,630 membutuhkan banyak baris JavaScript. 427 00:28:51,630 --> 00:28:55,410 Jadi, pada dasarnya jQuery adalah library JavaScript untuk yang menyederhanakan semua itu. 428 00:28:55,410 --> 00:28:59,880 Ia mengatakan, oke, jika Anda ingin memiliki sebuah kotak persegi datang dari kiri 429 00:28:59,880 --> 00:29:03,980 dan memudar ke halaman sehingga itu di tengah, dalam JavaScript yang akan mengambil - 430 00:29:03,980 --> 00:29:06,340 Saya tidak tahu, seratus baris yang harus dilakukan, dan itu akan menjadi sakit, 431 00:29:06,340 --> 00:29:10,540 dan Anda keluar dari itu membenci segala sesuatu tentang pemrograman web. 432 00:29:10,540 --> 00:29:15,380 JQuery pada dasarnya Anda memiliki elemen-dot-fade-in, atau sesuatu seperti itu. 433 00:29:15,380 --> 00:29:18,580 Jadi fungsi, sangat, sangat sederhana yang akan membiarkan Anda melakukan segala macam animasi keren 434 00:29:18,580 --> 00:29:20,580 dan hal semacam itu. 435 00:29:20,580 --> 00:29:23,300 Hal lain yang 2 ini benar-benar baik untuk hanya melakukan hal-hal yang dinamis 436 00:29:23,300 --> 00:29:25,300 dengan situs web. 437 00:29:25,300 --> 00:29:28,370 Jadi, bukan hanya memiliki halaman HTML Anda - yang menampilkan beberapa data tetapi tidak benar-benar 438 00:29:28,370 --> 00:29:32,130 melakukan apa-apa - JavaScript dan jQuery akan membiarkan Anda memiliki tombol yang dapat Anda klik, 439 00:29:32,130 --> 00:29:37,960 dan Anda dapat menarik elemen dan re-order mereka dan menyortir mereka, dan memiliki unsur-unsur baru 440 00:29:37,960 --> 00:29:40,500 ditambahkan atau dihapus. Anda dapat menambahkan-delete, hal semacam itu. 441 00:29:40,500 --> 00:29:44,570 Jadi, jQuery melakukan banyak hal keren. 442 00:29:44,570 --> 00:29:48,840 Dan Vipul sebenarnya memberikan seminar pada hari ini, saya percaya, pada 5-jam, 443 00:29:48,840 --> 00:29:51,220 jadi jika Anda dapat bertahan selama itu, yang akan - 5 atau 4? 444 00:29:51,220 --> 00:29:54,930 Empat. Maaf. Ini benar-benar tepat setelah ini, jadi saya akan merekomendasikan 445 00:29:54,930 --> 00:29:56,680 menempel di sekitar untuk itu jika Anda bisa. 446 00:29:56,680 --> 00:30:00,180 JQuery super, super berguna, dan Anda akan dapat melakukan banyak hal yang benar-benar bagus dengan itu 447 00:30:00,180 --> 00:30:03,460 untuk hampir semua proyek pengembangan web. 448 00:30:03,460 --> 00:30:06,200 >> Sekarang aku akan masuk ke jenis perbedaan. 449 00:30:06,200 --> 00:30:08,210 Saya telah berbicara pada dasarnya tentang antarmuka pengguna. 450 00:30:08,210 --> 00:30:11,510 User interface hanya desain situs. 451 00:30:11,510 --> 00:30:13,780 Tapi ada semacam konsep lain yang pengalaman pengguna. 452 00:30:13,780 --> 00:30:15,900 Keduanya sangat berbeda. 453 00:30:15,900 --> 00:30:19,440 Antarmuka jelas bagian dari pengalaman. 454 00:30:19,440 --> 00:30:21,340 Dengan kata lain, ketika Anda pergi ke sebuah situs, Anda melihat antarmuka. 455 00:30:21,340 --> 00:30:22,960 Itu bagian dari bagaimana Anda mengalami situs. 456 00:30:22,960 --> 00:30:24,960 Tapi pengalaman pengguna yang lebih dari itu. 457 00:30:24,960 --> 00:30:29,910 Pengalaman pengguna tentang apa kesan bahwa pengguna mendapatkan dari situs Anda. 458 00:30:29,910 --> 00:30:31,910 Jadi, jelas, antarmuka adalah bagian dari itu. 459 00:30:31,910 --> 00:30:35,340 Dan itu pasti bagian penting, tapi itu tidak cukup. 460 00:30:35,340 --> 00:30:38,790 Dengan kata lain, jika Anda memiliki antarmuka yang bagus, dan itu cukup dan berwarna-warni dan semua itu, 461 00:30:38,790 --> 00:30:43,650 itu bagus, tetapi jika pengguna pergi ke situs Anda, melihat tata letak cantik dan itu bingung dengan 462 00:30:43,650 --> 00:30:47,060 segala sesuatu, tidak tahu bagaimana untuk melakukan sesuatu, maka jelas Anda buat benar-benar 463 00:30:47,060 --> 00:30:48,930 website miskin. 464 00:30:48,930 --> 00:30:50,930 Itu semacam mana pengalaman pengguna masuk 465 00:30:50,930 --> 00:30:54,570 Aku akan berbicara sedikit tentang desain UX - UX adalah singkatan dari pengalaman pengguna - 466 00:30:54,570 --> 00:30:58,050 dan jenis bagaimana Anda dapat memastikan bahwa Anda memiliki pengalaman pengguna yang baik. 467 00:30:58,050 --> 00:31:04,330 Poin pertama adalah bahwa Anda dapat merancang sebuah situs web di mana pengguna dapat melakukan apa pun yang 468 00:31:04,330 --> 00:31:06,820 pengguna yang mungkin ingin. 469 00:31:06,820 --> 00:31:08,940 Tapi jika pengguna tidak tahu bagaimana melakukan hal-hal - 470 00:31:08,940 --> 00:31:12,850 dengan kata lain, jika pengguna tidak memiliki ide yang baik ketika mereka pergi ke situs Anda, 471 00:31:12,850 --> 00:31:17,660 "Oh, jika saya ingin memperbarui profil saya, kemudian saya klik tombol ini, atau jika saya ingin posting di 472 00:31:17,660 --> 00:31:20,850 wall seseorang, maka saya pergi ke dinding mereka dan klik pada kotak kecil. " 473 00:31:20,850 --> 00:31:24,410 Jika pengguna tidak tahu itu, maka Anda belum benar-benar efektif 474 00:31:24,410 --> 00:31:27,080 menerapkan fungsi yang benar. 475 00:31:27,080 --> 00:31:30,900 Bagian dari pelaksanaan fungsi adalah bahwa pengguna sebenarnya dapat menggunakannya. 476 00:31:30,900 --> 00:31:34,810 Dan mungkin frustasi - Anda bisa membuat sebuah situs, dan dapat melakukan segala macam 477 00:31:34,810 --> 00:31:37,810 hal-hal indah, tapi kemudian Anda akan memiliki orang-orang menguji dan berkata, "Ini tidak bisa melakukan ini. 478 00:31:37,810 --> 00:31:39,770 Mengapa tidak bisa melakukan ini? "Dan Anda akan mengatakan kembali kepada mereka, 479 00:31:39,770 --> 00:31:44,420 "Yah, itu bisa. Anda hanya perlu masuk ke menu drop-down-7 ini jelas 480 00:31:44,420 --> 00:31:48,470 Halaman yang hanya ditemukan oleh link di sudut kanan bawah tangan "atau sesuatu. 481 00:31:48,470 --> 00:31:50,430 Jelas, Anda tidak ingin itu. 482 00:31:50,430 --> 00:31:53,420 Anda ingin menjadi jelas bagi pengguna Anda apa yang seharusnya mereka lakukan, 483 00:31:53,420 --> 00:31:56,240 dan itu harus sederhana dan intuitif bagi mereka. 484 00:31:56,240 --> 00:32:01,180 >> Hal lain yang ingin Anda coba lakukan adalah, jika seseorang akan pergi ke situs Anda 485 00:32:01,180 --> 00:32:05,520 dan 9 dari 10 kali melakukan tindakan A, dan 1 dari 10 kali melakukan tindakan B, 486 00:32:05,520 --> 00:32:08,950 Anda mungkin ingin fokus pengalaman mereka pada tindakan A. 487 00:32:08,950 --> 00:32:12,240 Dengan kata lain, Anda ingin membuatnya betapa sangat, sangat jelas untuk melakukan A. 488 00:32:12,240 --> 00:32:15,980 A harus depan-dan-pusat - pergi ke situs, melihatnya, oh, itu ada di sana. 489 00:32:15,980 --> 00:32:20,850 Sedangkan B jelas Anda ingin menjadi jelas, tapi Anda dapat meninggalkan sedikit lebih 490 00:32:20,850 --> 00:32:22,850 di latar belakang. 491 00:32:22,850 --> 00:32:24,640 David memberi contoh yang baik dari ini dalam kuliah, 492 00:32:24,640 --> 00:32:26,640 yang merupakan sistem Boston T. 493 00:32:26,640 --> 00:32:29,440 Ketika Anda pergi ke Boston T dan Anda ingin membeli tiket, 494 00:32:29,440 --> 00:32:32,700 Anda harus masuk ke menu 5 sebelum Anda benar-benar dapat membeli tiket 495 00:32:32,700 --> 00:32:37,130 untuk $ 2, $ 2,50 nilai, yang adalah berapa banyak yang dibutuhkan untuk naik kereta bawah tanah 496 00:32:37,130 --> 00:32:39,130 dalam satu arah. 497 00:32:39,130 --> 00:32:41,600 Itu masalah karena kebanyakan orang yang naik kereta bawah tanah 498 00:32:41,600 --> 00:32:44,880 mungkin hanya ingin pergi ke satu tempat, membeli tiket mereka, mendapatkan segera. 499 00:32:44,880 --> 00:32:47,550 Ini tidak masuk akal bahwa mereka harus melalui banyak menu yang berbeda 500 00:32:47,550 --> 00:32:49,550 untuk sampai ke sana. 501 00:32:49,550 --> 00:32:51,760 Sebuah pengalaman pengguna yang lebih baik akan menjadi tombol cepat pada halaman pertama 502 00:32:51,760 --> 00:32:54,760 itu hanya mengatakan, 'membeli tiket sekali jalan, dan itu akan dimasukkan ke dalam semua standar 503 00:32:54,760 --> 00:32:58,550 nilai-nilai default, dan kemudian jika seseorang ingin membeli tiket yang berbeda dari itu, 504 00:32:58,550 --> 00:33:01,690 mereka masih, tentu saja, memiliki pilihan untuk, tetapi Anda sudah dioptimalkan untuk 505 00:33:01,690 --> 00:33:04,080 kasus umum digunakan yang benar-benar penting. 506 00:33:04,080 --> 00:33:06,830 Anda dapat melihat contoh ini di Facebook, kan? 507 00:33:06,830 --> 00:33:09,410 Jika Anda pergi ke Facebook dan Anda ingin memposting status, 508 00:33:09,410 --> 00:33:11,710 itu tepat di atas yang adalah apa yang sering Anda ingin lakukan. 509 00:33:11,710 --> 00:33:14,730 Segera setelah Anda memasuki halaman, Anda dapat melakukan hal-hal yang paling umum yang 510 00:33:14,730 --> 00:33:16,730 Anda ingin lakukan. 511 00:33:16,730 --> 00:33:17,550 Jika Anda ingin melakukan hal-hal yang sedikit lebih rumit seperti, 512 00:33:17,550 --> 00:33:21,070 mengatakan saya ingin pergi ke dinding teman saya dan posting gambar di atasnya - 513 00:33:21,070 --> 00:33:24,810 yang saya akan ingin melakukan sering, tapi tidak sesering memposting update status - 514 00:33:24,810 --> 00:33:28,200 sehingga dalam hal ini, saya ketik nama mereka di kotak di bagian atas, klik pada profil mereka, 515 00:33:28,200 --> 00:33:31,680 dan kemudian, masih, itu tepat di atas sana sekali aku sudah pada profilnya. 516 00:33:31,680 --> 00:33:38,240 Sekali lagi, saya sudah dioptimalkan dalam prioritas untuk kasus-kasus yang paling umum digunakan. 517 00:33:38,240 --> 00:33:41,800 >> Hal lain yang penting adalah bahwa sering orang akan semacam mencoba untuk mendapatkan sekitar ini 518 00:33:41,800 --> 00:33:44,890 dengan mengatakan, oke, jadi saya telah membuat situs dan orang yang menemukan itu membingungkan, 519 00:33:44,890 --> 00:33:46,110 dan itu masalah, kan? 520 00:33:46,110 --> 00:33:49,210 Jelas, saya tidak ingin orang menjadi bingung oleh isi dari situs saya. 521 00:33:49,210 --> 00:33:53,210 Tapi cara untuk memecahkan yang tidak memiliki sesuatu pop up mengatakan, 522 00:33:53,210 --> 00:33:55,290 hey, aku akan mengajarkan Anda bagaimana menggunakan situs ini. 523 00:33:55,290 --> 00:33:58,130 Langkah 1 - klik tombol ini. Langkah 2 - pergi di sini. 524 00:33:58,130 --> 00:34:03,080 Tentu, itu adalah jalan lain - ini adalah cara yang dapat Anda memberitahu orang-orang apa yang harus dilakukan, tapi itu 525 00:34:03,080 --> 00:34:05,080 benar-benar bukan cara optimal. 526 00:34:05,080 --> 00:34:07,420 Jika saya pergi ke sebuah situs web dan tiba-tiba aku dibombardir dengan tutorial ini yang menceritakan 527 00:34:07,420 --> 00:34:11,739 apa yang harus dilakukan dan ke mana harus pergi dan semua itu, itu tidak menyenangkan bagi saya. 528 00:34:11,739 --> 00:34:13,739 Ini bukan pengalaman yang baik bagi saya. 529 00:34:13,739 --> 00:34:17,130 Ini semacam rasa sakit. Saya hanya ingin mulai melakukan hal-hal. 530 00:34:17,130 --> 00:34:19,449 Orang-orang akan menutup kotak dialog mereka, 531 00:34:19,449 --> 00:34:23,580 atau keluar dari tutorial, tidak tahu apa yang harus dilakukan, dan kemudian mengeluh karena 532 00:34:23,580 --> 00:34:25,580 Anda belum memberitahu mereka apa yang harus dilakukan. 533 00:34:25,580 --> 00:34:29,530 Cara untuk mengatasi ini bukan dengan memberikan segala jenis tutorial atau arah - 534 00:34:29,530 --> 00:34:31,530 sesuatu seperti itu. 535 00:34:31,530 --> 00:34:33,719 Sebanyak yang Anda bisa menghindari hal itu, Anda benar-benar ingin menunjukkan pengguna apa yang harus dilakukan 536 00:34:33,719 --> 00:34:36,429 hanya dengan sifat bagaimana website ini ditata. 537 00:34:36,429 --> 00:34:39,090 Dengan kata lain, jika saya pergi ke Facebook tanpa login, 538 00:34:39,090 --> 00:34:40,920 hal pertama yang saya lihat pada halaman utama - 539 00:34:40,920 --> 00:34:44,480 itu adalah kotak login sedikit. Jadi, duh. Aku harus log in Itu ada di sana. 540 00:34:44,480 --> 00:34:48,030 Padahal, jika saya pergi ke Facebook dan saya harus mengklik link kecil di bagian bawah 541 00:34:48,030 --> 00:34:51,920 yang mengatakan 'log in' dan sisa halaman itu hanya beberapa jenis gambar atau sesuatu, 542 00:34:51,920 --> 00:34:54,820 Aku tidak akan benar-benar tahu apa yang harus dilakukan, kan? Saya akan bingung. 543 00:34:54,820 --> 00:34:58,590 Jadi, bisa memberitahu saya untuk pergi ke sana dan klik tombol untuk log in, 544 00:34:58,590 --> 00:35:01,080 atau log di tombol bisa tepat di atas di mana aku akan melihatnya. 545 00:35:01,080 --> 00:35:04,780 Anda ingin selalu menunjukkan pengguna apa yang harus dilakukan, 546 00:35:04,780 --> 00:35:06,750 dan yang harus melekat dalam halaman itu sendiri. 547 00:35:06,750 --> 00:35:09,880 >> Ketika Anda berpikir tentang desain dan mengejek cara-cara yang berbeda 548 00:35:09,880 --> 00:35:13,810 mengekspresikan situs Anda, Anda benar-benar ingin untuk berpikir tentang apa yang pengguna akan 549 00:35:13,810 --> 00:35:19,380 lakukan dan bagaimana Anda dapat menunjukkan kepada mereka apa yang harus dilakukan. 550 00:35:19,380 --> 00:35:23,530 Satu hal terakhir adalah pengujian benar-benar, benar-benar penting. 551 00:35:23,530 --> 00:35:27,400 It is great untuk mendapatkan seseorang - mendapatkan teman, mendapatkan seseorang yang Anda tidak tahu bahkan - 552 00:35:27,400 --> 00:35:30,420 siapa yang pernah melihat situs sebelum menggunakan situs. 553 00:35:30,420 --> 00:35:33,650 Karena Anda telah bekerja di situs selama berjam-jam, Anda sudah menatap itu, 554 00:35:33,650 --> 00:35:36,670 dan Anda tahu persis apa yang harus dilakukan jadi jelas Anda akan menguji 555 00:35:36,670 --> 00:35:39,520 hal-hal yang Anda telah bekerja dan bahwa Anda tahu pekerjaan. 556 00:35:39,520 --> 00:35:42,680 Tetapi jika orang lain datang dan menggunakan situs yang belum pernah menggunakannya sebelumnya, 557 00:35:42,680 --> 00:35:46,880 itu adalah pengalaman yang unik karena Anda memiliki seseorang yang tidak memiliki pengetahuan sebelumnya 558 00:35:46,880 --> 00:35:51,530 situs akan ke dalamnya, sehingga mereka akan secara efektif tidak tahu apa yang harus dilakukan 559 00:35:51,530 --> 00:35:54,890 atau apa jenis kasus penggunaan yang hadir untuk mereka. 560 00:35:54,890 --> 00:36:00,930 Itu bagus. Itu unik karena mereka pada dasarnya orang dengan kosong untuk pikiran. 561 00:36:00,930 --> 00:36:03,750 Mereka dapat memberitahu Anda jika ada sesuatu yang membingungkan atau tidak jelas. 562 00:36:03,750 --> 00:36:07,580 Mereka dapat memberikan gambaran tepat apa pengalaman pengguna dari situs Anda. 563 00:36:07,580 --> 00:36:10,630 Ini bisa sangat sulit untuk mengatakan bahwa diri sendiri, jadi pasti saya akan mendorong Anda 564 00:36:10,630 --> 00:36:13,640 karena Anda sedang mengembangkan proyek Anda - jika Anda melakukan proyek-proyek berbasis web - 565 00:36:13,640 --> 00:36:18,290 untuk membuat orang menggunakan situs ini sedini Anda memiliki semacam demo fungsional. 566 00:36:18,290 --> 00:36:25,330 >> Sekarang aku akan berbicara sedikit tentang bagaimana mengelola sebuah proyek pengembangan web. 567 00:36:25,330 --> 00:36:28,900 Kami sudah lebih dari bagaimana Anda dapat melakukan sisi back-end teknis, 568 00:36:28,900 --> 00:36:31,050 bagaimana Anda dapat merancang situs yang sangat baik, 569 00:36:31,050 --> 00:36:34,150 dan itu bagus jika Anda bekerja sendiri tetapi - 570 00:36:34,150 --> 00:36:37,300 bahkan jika Anda bekerja sendiri dan terutama jika Anda bekerja dalam sebuah tim, 571 00:36:37,300 --> 00:36:39,580 manajemen proyek menjadi masalah besar. 572 00:36:39,580 --> 00:36:42,340 Kau semacam mendengar tentang manajemen proyek dalam bentuk yang berbeda sejak 573 00:36:42,340 --> 00:36:45,410 sekolah dasar ketika Anda diberitahu kerja kelompok. 574 00:36:45,410 --> 00:36:46,820 Anda harus bekerja sama, berkomunikasi, semua itu. 575 00:36:46,820 --> 00:36:49,620 Itu semua masih berlaku di sini, tapi ada beberapa situasi yang unik dengan 576 00:36:49,620 --> 00:36:54,910 ilmu komputer yang Anda ingin menjadi sadar, dan Anda ingin memastikan Anda menangani dengan baik. 577 00:36:54,910 --> 00:36:58,050 Aku akan bicara lebih dulu sedikit tentang tim yang Anda akan masuk 578 00:36:58,050 --> 00:37:03,280 Ini sangat penting untuk memilih ukuran yang tepat dari sebuah tim untuk dapat bekerja pada, 579 00:37:03,280 --> 00:37:05,890 dan dalam proyek akhir Anda, saya pikir Anda memiliki pilihan untuk memilih 580 00:37:05,890 --> 00:37:08,610 antara 1 dan 4 orang jika aku benar. 581 00:37:08,610 --> 00:37:12,050 Anda ingin memastikan bahwa Anda tidak hanya memilih jumlah orang 582 00:37:12,050 --> 00:37:14,950 bahwa Anda ingin bekerja dengan karena mereka teman. 583 00:37:14,950 --> 00:37:18,170 Anda ingin memilih tim yang ukuran yang baik dan yang akan mendapatkan pekerjaan yang dilakukan. 584 00:37:18,170 --> 00:37:22,700 Ada trade off dalam memiliki lebih banyak orang dibandingkan orang yang kurang. 585 00:37:22,700 --> 00:37:25,320 Jika Anda memiliki lebih banyak orang, jelas lebih banyak pekerjaan yang bisa dilakukan 586 00:37:25,320 --> 00:37:28,450 karena Anda memiliki banyak orang, banyak kode, banyak ide-ide, 587 00:37:28,450 --> 00:37:29,870 dan itu semua besar. 588 00:37:29,870 --> 00:37:32,590 Tetapi juga membutuhkan lebih banyak manajemen dan lebih banyak komunikasi. 589 00:37:32,590 --> 00:37:34,720 Dengan kata lain, jika Anda memiliki 4 orang yang bekerja pada proyek yang sama 590 00:37:34,720 --> 00:37:39,200 dan mereka semua mengedit kode yang sama, lebih atau kurang mereka semua jenis kebutuhan untuk mengetahui 591 00:37:39,200 --> 00:37:40,920 apa yang terjadi sehingga memerlukan Anda - 592 00:37:40,920 --> 00:37:44,580 jika Anda menambahkan beberapa fungsi baru Anda semacam harus memberitahu orang - aku menambahkan ini, 593 00:37:44,580 --> 00:37:48,510 Aku ganti ini dengan cara ini - terutama jika Anda masuk ke hal-hal yang benar-benar mendalam 594 00:37:48,510 --> 00:37:52,730 seperti model dan kontroler yang benar-benar akan mempengaruhi bagaimana situs ini bekerja. 595 00:37:52,730 --> 00:37:54,500 Seluruh tim harus menyadari hal itu, 596 00:37:54,500 --> 00:37:58,140 sehingga Anda perlu memastikan bahwa Anda tidak memilih terlalu besar tim yang akan sulit 597 00:37:58,140 --> 00:37:59,970 untuk membuat komunikasi itu. 598 00:37:59,970 --> 00:38:02,930 Anda juga tidak ingin memilih tim yang cukup kecil bahwa Anda tidak akan 599 00:38:02,930 --> 00:38:06,250 dapat berkomunikasi karena hanya Anda. 600 00:38:06,250 --> 00:38:11,270 >> Hal lain yang perlu dipertimbangkan adalah keseimbangan di mana orang keterampilan adalah. 601 00:38:11,270 --> 00:38:14,350 Ini bagus jika Anda semua programmer benar-benar baik. 602 00:38:14,350 --> 00:38:17,050 Tapi jika Anda semua orang back-end, maka situs Anda tidak akan terlihat sangat baik 603 00:38:17,050 --> 00:38:20,860 karena Anda memiliki database yang besar ini, dan tidak permintaan pencarian super cepat - 604 00:38:20,860 --> 00:38:26,130 yang besar - tapi ketika Anda pergi ke sana, itu seperti sebuah situs 1990-an dengan warna merah dan biru 605 00:38:26,130 --> 00:38:30,370 di mana-mana, dan itu tidak baik baik. 606 00:38:30,370 --> 00:38:34,210 Perhatikan bahwa Ben dan saya bekerja sebagai tim yang sangat bagus karena aku semacam lebih 607 00:38:34,210 --> 00:38:38,030 di ujung depan, kami berdua berinteraksi di tengah-end, dan Ben benar-benar baik dengan hal-hal back-end, 608 00:38:38,030 --> 00:38:43,550 sehingga bekerja dengan sangat baik karena kita dapat merancang situs manapun dan pada dasarnya lubang 609 00:38:43,550 --> 00:38:47,580 di situs yang yang perlu diisi dapat diisi oleh salah satu dari kami, atau mungkin keduanya. 610 00:38:47,580 --> 00:38:50,210 Anda ingin memastikan bahwa tidak ada lubang di tim Anda. 611 00:38:50,210 --> 00:38:51,180 Tidak apa-apa jika ada sedikit tumpang tindih. 612 00:38:51,180 --> 00:38:53,670 Dengan kata lain, jika Anda memiliki 2 orang yang sama-sama baik dengan back-end, 613 00:38:53,670 --> 00:38:57,250 yang bisa baik juga karena mereka dapat saling membantu dengan masalah 614 00:38:57,250 --> 00:38:58,820 bahwa mereka memiliki. 615 00:38:58,820 --> 00:39:02,590 Hal ini dapat menjadi masalah jika Anda hanya memiliki 1 orang yang bertanggung jawab untuk hal tertentu 616 00:39:02,590 --> 00:39:06,650 dan mereka mengalami masalah, sehingga Anda ingin memiliki sedikit tumpang tindih 617 00:39:06,650 --> 00:39:10,760 tapi yang paling penting Anda ingin memastikan bahwa semua lubang yang mungkin diisi. 618 00:39:10,760 --> 00:39:17,550 >> Hal terakhir - dan ini harus jelas, tetapi sering tidak. 619 00:39:17,550 --> 00:39:19,550 Anda benar-benar ingin bersenang-senang. 620 00:39:19,550 --> 00:39:23,360 Titik tugas akhir ini di CS50 dan sering titik pengembangan web pada umumnya 621 00:39:23,360 --> 00:39:26,360 tidak hanya melakukan pekerjaan karena itu perlu dilakukan. 622 00:39:26,360 --> 00:39:29,140 Anda benar-benar ingin bersenang-senang, dan Anda ingin membuat sesuatu 623 00:39:29,140 --> 00:39:31,180 yang memotivasi Anda untuk bekerja di dalamnya. 624 00:39:31,180 --> 00:39:33,650 Jika apa yang Anda membuat adalah rasa sakit untuk duduk dan bekerja pada, 625 00:39:33,650 --> 00:39:35,650 maka Anda tidak memilih proyek yang tepat. 626 00:39:35,650 --> 00:39:37,730 Anda ingin memilih sesuatu yang Anda anggap menarik, 627 00:39:37,730 --> 00:39:41,150 Anda benar-benar ingin melihat hasilnya, Anda sangat gembira ketika Anda mendapatkan ide baru tentang 628 00:39:41,150 --> 00:39:44,700 sesuatu yang dapat Anda lakukan - jadi tidak semua jenis proyek di sana yang saya yakin 629 00:39:44,700 --> 00:39:47,290 Anda dapat menemukan - setiap orang memiliki sesuatu yang benar-benar akan intrik mereka 630 00:39:47,290 --> 00:39:49,290 jika mereka melakukan proyek berbasis web. 631 00:39:49,290 --> 00:39:52,210 Aku akan mengatakannya lagi sekarang. 632 00:39:52,210 --> 00:39:54,520 Jika proyek Anda tampaknya seperti rasa sakit dan Anda tidak ingin bekerja di atasnya, 633 00:39:54,520 --> 00:39:57,260 memilih proyek lain. Pilih sesuatu yang benar-benar menginspirasi Anda. 634 00:39:57,260 --> 00:40:00,260 >> Ben menyebutkan konsep ini iterasi sedikit, dan saya ingin pergi lebih sedikit. 635 00:40:00,260 --> 00:40:08,250 Ini sangat penting untuk bekerja di spurts di mana Anda mendapatkan sesuatu yang fungsional. 636 00:40:08,250 --> 00:40:13,420 Hal ini dapat menjadi besar jika Anda memiliki rencana ini untuk situs Web yang akan melakukan A, B, dan C, 637 00:40:13,420 --> 00:40:16,000 dan akhirnya akan sampai di sana. 638 00:40:16,000 --> 00:40:18,600 Tapi kau terjebak dalam fase ini di mana Anda bekerja di atasnya dan bekerja di atasnya, 639 00:40:18,600 --> 00:40:23,330 tapi tidak ada yang mendapatkan dilakukan. Anda tidak memiliki apa-apa untuk melihat dan nyata, hal fungsional. 640 00:40:23,330 --> 00:40:27,940 Apa yang Anda benar-benar ingin melakukan sebanyak itu tampaknya agak sakit kadang-kadang untuk 641 00:40:27,940 --> 00:40:32,300 mengerjakan sesuatu dan kemudian semacam topi itu off sehingga setidaknya pada stabil, berjalan 642 00:40:32,300 --> 00:40:34,910 Versi bahkan jika tidak memiliki semua fitur yang Anda inginkan. 643 00:40:34,910 --> 00:40:37,690 Dan mungkin ada beberapa fitur yang Anda benar-benar ingin menambahkan tetapi Anda hanya tidak bisa 644 00:40:37,690 --> 00:40:41,830 karena Anda ingin mendapatkan situs ini ke titik fungsional. 645 00:40:41,830 --> 00:40:44,400 Dan sehingga Anda ingin jenis memiliki seluruh proses pembangunan terlihat seperti itu. 646 00:40:44,400 --> 00:40:47,810 Anda ingin memulai suatu tempat fungsional - atau pada dasarnya mulai dengan apa-apa - 647 00:40:47,810 --> 00:40:49,890 tetapi Anda ingin mendapatkan suatu tempat yang sangat dasar dan fungsional. 648 00:40:49,890 --> 00:40:54,940 Dan sekali lagi, membuat semacam melompat dan mendapatkan suatu tempat fungsional lagi. 649 00:40:54,940 --> 00:40:59,190 Anda perlahan-lahan akan membangun, dan mungkin pergi sedikit lebih lambat daripada itu akan sebaliknya, 650 00:40:59,190 --> 00:41:03,000 tetapi dalam jangka panjang jika Anda terus-menerus terjebak dalam fase jalan tengah ini di mana Anda 651 00:41:03,000 --> 00:41:06,380 tidak benar-benar memiliki sesuatu yang bekerja, itu bisa menjadi frustrasi yang sangat besar 652 00:41:06,380 --> 00:41:09,970 untuk bekerja pada proyek Anda karena kau selalu begitu dekat dengan mendapatkan itu bekerja, 653 00:41:09,970 --> 00:41:12,130 dan itu tidak pernah benar-benar bekerja. 654 00:41:12,130 --> 00:41:14,810 Anda ingin bekerja di spurts ini fungsional, 655 00:41:14,810 --> 00:41:17,950 dan Anda juga ingin melakukan refleksi setelah masing-masing. 656 00:41:17,950 --> 00:41:21,260 Dengan kata lain, setelah Anda berada pada titik di mana situs tersebut sekarang bekerja - 657 00:41:21,260 --> 00:41:24,790 itu tidak memiliki semua yang anda suka tapi itu melakukan beberapa hal - 658 00:41:24,790 --> 00:41:28,870 Anda ingin berpikir, oke, adalah situs ini mencapai tujuan yang saya mulai lakukan? 659 00:41:28,870 --> 00:41:33,410 Dengan kata lain, jika situs tersebut akan melakukan X, adalah apa yang saya bekerja di arah X? 660 00:41:33,410 --> 00:41:36,450 Apakah semua fungsi yang saya inginkan di sana? 661 00:41:36,450 --> 00:41:39,340 Dan apalagi, itu melayani tujuan keseluruhan yang saya inginkan? 662 00:41:39,340 --> 00:41:43,200 Jika Anda menemukan bahwa situs Anda mulai membelok ke arah yang berbeda 663 00:41:43,200 --> 00:41:47,330 atau mungkin hal-hal yang hanya jenis tidak bekerja, mungkin sudah saatnya untuk pindah gigi sedikit. 664 00:41:47,330 --> 00:41:51,700 Dengan kata lain, ada baiknya mempertimbangkan - itu layak membuang ide jika diperlukan 665 00:41:51,700 --> 00:41:57,950 dan mengingat saya benar-benar bekerja untuk apa yang saya inginkan. 666 00:41:57,950 --> 00:42:00,760 >> Saya percaya bahwa poin saya berikutnya. Jangan takut untuk meninggalkan ide-ide. 667 00:42:00,760 --> 00:42:03,750 Hanya karena Anda menghabiskan banyak jam kerja pada fitur 668 00:42:03,750 --> 00:42:07,890 dan akhirnya berhasil bekerja tapi itu benar-benar tidak akan begitu baik - 669 00:42:07,890 --> 00:42:12,690 seperti itu tidak berguna atau pengguna mengalami kesulitan menggunakannya - hal semacam itu - 670 00:42:12,690 --> 00:42:15,300 jangan takut untuk membuangnya. 671 00:42:15,300 --> 00:42:17,650 Menyebalkan bahwa Anda telah menghabiskan banyak waktu bekerja di atasnya, 672 00:42:17,650 --> 00:42:21,870 tapi pada akhirnya Anda tidak ingin situs yang semacam disatukan oleh potongan-potongan ini yang 673 00:42:21,870 --> 00:42:25,380 jenis pekerjaan tetapi tidak dilayani dengan baik. 674 00:42:25,380 --> 00:42:27,990 Juga, jangan takut untuk merangkul ide-ide baru. 675 00:42:27,990 --> 00:42:30,050 Jika seseorang datang dan berkata, hey, situs yang terlihat benar-benar keren tapi 676 00:42:30,050 --> 00:42:32,290 tidak akan bahkan lebih bagus lagi jika ia juga melakukan ini? 677 00:42:32,290 --> 00:42:36,220 Hanya karena itu sesuatu yang tidak anda inginkan dan sesuatu yang tidak Anda 678 00:42:36,220 --> 00:42:37,900 spesifikasi, sesuatu yang Anda belum ditetapkan untuk dilakukan, 679 00:42:37,900 --> 00:42:40,860 jangan takut untuk menerimanya dan kemudian bekerja dengannya. 680 00:42:40,860 --> 00:42:43,680 Karena sering ide-ide yang Anda jalankan dengan seluruh program pembangunan 681 00:42:43,680 --> 00:42:47,630 berakhir menjadi fitur yang sangat keren dari situs web. 682 00:42:47,630 --> 00:42:49,630 >> Aku sudah mengatakan ini sebelumnya. Saya akan mengatakannya lagi. 683 00:42:49,630 --> 00:42:51,630 Penguji super, super berguna. 684 00:42:51,630 --> 00:42:56,350 Cobalah untuk mendapatkan orang-orang yang belum pernah melihat situs sebelum untuk log on dan melihat apa yang terjadi 685 00:42:56,350 --> 00:42:59,080 karena mereka tidak hanya dapat menguji kegunaan dari situs dan pengalaman pengguna, 686 00:42:59,080 --> 00:43:02,070 tetapi mereka juga dapat menguji fungsionalitas dengan cara yang Anda tidak bisa. 687 00:43:02,070 --> 00:43:06,430 Jika Anda membuat beberapa fitur yang melakukan hal tertentu 688 00:43:06,430 --> 00:43:11,620 dan kau tahu itu akan melakukan hal yang sama dengan benar setiap saat, itu bagus. 689 00:43:11,620 --> 00:43:16,610 Tapi itu sering bisa sulit untuk menjelaskan kasus sudut mana kekuatan pengguna 690 00:43:16,610 --> 00:43:19,500 ketik sesuatu yang Anda tidak mengharapkan - justru karena Anda didefinisikan 691 00:43:19,500 --> 00:43:21,500 fitur sendiri. 692 00:43:21,500 --> 00:43:23,730 Jadi, untuk memiliki seseorang datang pada yang tidak tahu bagaimana menggunakan situs ini 693 00:43:23,730 --> 00:43:26,840 dan hanya istirahat dengan cara apa pun yang dapat mereka lakukan adalah benar-benar berguna karena Anda 694 00:43:26,840 --> 00:43:30,340 mendapatkan ide dari perspektif yang sama sekali berbeda dari apa yang di situs Anda bekerja 695 00:43:30,340 --> 00:43:33,300 dan apa yang perlu perbaikan. 696 00:43:33,300 --> 00:43:37,070 >> Terakhir, saya akan berbicara tentang beberapa praktek yang baik umum, 697 00:43:37,070 --> 00:43:42,470 dan Anda telah melihat banyak ini di CS50, tetapi mereka juga benar-benar, benar-benar berlaku dalam pengaturan proyek. 698 00:43:42,470 --> 00:43:47,600 Salah satunya adalah komentar. Selalu komentar kode Anda terutama jika Anda bekerja di sebuah tim besar. 699 00:43:47,600 --> 00:43:51,230 Hal ini dapat sangat mengganggu untuk hanya memiliki blok raksasa kode bahwa seseorang ditulis 700 00:43:51,230 --> 00:43:54,230 dan mungkin bekerja, mungkin tidak, tetapi Anda tidak tahu apa yang dilakukannya, 701 00:43:54,230 --> 00:43:58,010 sehingga Anda tidak tahu apakah itu berguna atau tidak atau apakah itu harus ada atau tidak, 702 00:43:58,010 --> 00:44:00,200 dan jika Anda bekerja pada sesuatu yang lain itu bahkan mungkin yang sedang Anda kerjakan 703 00:44:00,200 --> 00:44:06,590 hal yang sama, jadi hanya menjadi sangat, sangat berhati-hati untuk menjadi perhatian rekan-rekan Anda 704 00:44:06,590 --> 00:44:09,710 dan menulis kode yang didokumentasikan dengan baik. 705 00:44:09,710 --> 00:44:13,580 Anda tidak harus pergi sejauh untuk melakukan semuanya di mana seperti jika Anda kenaikan 706 00:44:13,580 --> 00:44:16,620 counter memiliki komentar yang mengatakan, saya menambahkan 1 ke konter ini. 707 00:44:16,620 --> 00:44:20,450 Tidak harus yang rinci, tetapi untuk setiap fungsi yang Anda pernah menulis 708 00:44:20,450 --> 00:44:23,160 Anda harus memiliki beberapa dokumentasi apa fungsi yang tepatnya, 709 00:44:23,160 --> 00:44:25,140 apa input, dan apa harus kembali. 710 00:44:25,140 --> 00:44:27,800 Dengan cara itu Anda dapat menggunakan komponen masyarakat lain dari situs 711 00:44:27,800 --> 00:44:31,990 dan Anda dapat bekerja untuk membangun sesuatu yang besar. 712 00:44:31,990 --> 00:44:34,100 >> Hal lain yang penting adalah yang ingin Anda lakukan secara teratur bersih-up. 713 00:44:34,100 --> 00:44:40,490 Kode akan berantakan. Jangan merasa buruk jika kode Anda hanya benar-benar dibaca dan berantakan raksasa. 714 00:44:40,490 --> 00:44:42,770 Itu terjadi dalam pengembangan web selalu. 715 00:44:42,770 --> 00:44:46,530 Anda menambahkan fitur baru, menghapus yang lama. Stuff akan berada di sana yang tidak seharusnya. 716 00:44:46,530 --> 00:44:49,330 Itu baik-baik saja, tetapi Anda ingin memastikan untuk menghadapi itu secara teratur. 717 00:44:49,330 --> 00:44:53,430 Anda tidak ingin membiarkan hal itu membangun ke titik di mana Anda tidak bisa menemukan apa-apa 718 00:44:53,430 --> 00:44:56,430 dalam kode Anda, dan Anda tidak tahu apa apa tidak. 719 00:44:56,430 --> 00:44:58,430 Itulah halnya dengan HTML. 720 00:44:58,430 --> 00:44:59,490 Kadang-kadang Anda akan berakhir dengan benda-benda yang tidak mengandung apa-apa, 721 00:44:59,490 --> 00:45:01,320 dan Anda akan ingin menyingkirkan orang-orang. 722 00:45:01,320 --> 00:45:04,610 Dalam CSS, Anda dapat mengacu pada unsur-unsur yang tidak ada lagi, 723 00:45:04,610 --> 00:45:06,340 sehingga Anda ingin menyingkirkan kode tersebut. 724 00:45:06,340 --> 00:45:09,900 Dalam JavaScript, Anda mungkin telah menghapus sesuatu dari HTML. 725 00:45:09,900 --> 00:45:13,150 Jadi, Anda ingin memastikan bahwa Anda selalu membersihkan, membuat hal-hal yang cukup 726 00:45:13,150 --> 00:45:17,450 sebanyak yang Anda bisa secara teratur. 727 00:45:17,450 --> 00:45:21,060 >> Hal lain yang benar-benar berguna yang saya tidak berpikir diuraikan sangat banyak di CS50 728 00:45:21,060 --> 00:45:23,430 tapi ada baiknya masuk ke kontrol versi. 729 00:45:23,430 --> 00:45:27,180 Ide kontrol versi adalah ketika Anda pada dasarnya melacak semua kemajuan 730 00:45:27,180 --> 00:45:30,820 Anda telah membuat ke situs Anda dan jika pada titik tertentu Anda menyadari, oh, ini bekerja 731 00:45:30,820 --> 00:45:35,220 beberapa waktu lalu tapi itu tidak bekerja lagi, Anda dapat kembali ke versi sebelumnya 732 00:45:35,220 --> 00:45:37,720 dan melihat apa yang telah berubah sejak saat itu dan hal semacam itu. 733 00:45:37,720 --> 00:45:41,670 Cara utama untuk melakukannya adalah dengan Git, dan Git seluruh sistem semacam ini yang 734 00:45:41,670 --> 00:45:46,390 Saya percaya Tommy MacWilliam memberikan seminar tentang tahun lalu. 735 00:45:46,390 --> 00:45:51,520 Jika Anda pergi ke seminar CS50 untuk 2011, Anda dapat melihat seminar nya itu. 736 00:45:51,520 --> 00:45:57,070 Ide dasarnya adalah bahwa Git secara berkala Anda membuat komitmen ini 737 00:45:57,070 --> 00:46:01,430 yang merupakan cara untuk mengatakan situs yang ada di versi cukup stabil sekarang jadi 738 00:46:01,430 --> 00:46:05,910 Aku kemasan itu dan mengirimnya pergi ke server, dan kemudian Anda dapat pergi ke server yang 739 00:46:05,910 --> 00:46:07,910 dan melihat semua versi sebelumnya dari kode Anda dan melihat bagaimana hal itu berkembang 740 00:46:07,910 --> 00:46:12,210 dan semua hal semacam hal yang baik. 741 00:46:12,210 --> 00:46:14,210 Jadi, itu pada dasarnya itu. 742 00:46:14,210 --> 00:46:17,870 Sejauh pengembangan web, kami senang untuk bertahan dan menjawab 743 00:46:17,870 --> 00:46:20,570 pertanyaan sejauh presentasi kami. 744 00:46:20,570 --> 00:46:22,900 Itu saja. Terima kasih. >> [Ben] Terima kasih. 745 00:46:22,900 --> 00:46:28,480 [Tepuk tangan] 746 00:46:28,480 --> 00:46:30,950 >> [Billy] Staf, apakah ada yang memiliki pertanyaan tentang hal-hal yang telah kita pelajari 747 00:46:30,950 --> 00:46:33,950 atau hal-hal yang kita tidak tercakup bahwa mereka berharap kami akan menutupi? 748 00:46:33,950 --> 00:46:35,950 Kami akan dengan senang hati menjawab mereka. Siapa saja? 749 00:46:35,950 --> 00:46:50,360 [Penonton] Apa pro dan kontra dari menggunakan Ruby atau Python menggunakan? 750 00:46:50,360 --> 00:46:58,660 [Ben] Pertanyaannya adalah, apa yang pro dan kontra dari menggunakan Ruby atau Python 751 00:46:58,660 --> 00:46:59,900 bukan seperti PHP. 752 00:46:59,900 --> 00:47:11,340 Pro adalah bahwa Ruby dan Python adalah bahasa yang jauh lebih baik daripada PHP. 753 00:47:11,340 --> 00:47:14,920 Setidaknya menurut saya, dan saya pikir dalam banyak pendapat orang lain juga. 754 00:47:14,920 --> 00:47:20,990 Mereka dirancang lebih untuk melakukan hal-hal yang kompleks, 755 00:47:20,990 --> 00:47:25,380 dan kurang untuk memukul bersama-sama halaman web sangat cepat dengan 756 00:47:25,380 --> 00:47:28,400 sedikit konten dinamis. 757 00:47:28,400 --> 00:47:35,180 Yang kontra adalah bahwa ada sedikit - ada lebih dari kurva belajar 758 00:47:35,180 --> 00:47:37,220 untuk mendapatkan mereka mengatur. 759 00:47:37,220 --> 00:47:41,010 Artinya, seperti di PHP, Anda hanya dapat memiliki file HTML dan Anda menulis kurang, 760 00:47:41,010 --> 00:47:43,060 tanda tanya, dan kemudian Anda menulis beberapa kode, dan kemudian Anda menulis tanda tanya, 761 00:47:43,060 --> 00:47:45,700 lebih besar-daripada, dan kemudian Anda sudah selesai. 762 00:47:45,700 --> 00:47:50,300 Dalam bahasa lain seperti Ruby atau Python, 763 00:47:50,300 --> 00:47:56,810 Anda harus melalui sedikit lebih banyak pekerjaan untuk mendapatkan tempat awal berjalan. 764 00:47:56,810 --> 00:48:02,730 Ada juga - setidaknya itu digunakan untuk menjadi kasus - bahwa ada lebih banyak dokumentasi 765 00:48:02,730 --> 00:48:05,480 tersedia untuk PHP hanya karena ada lebih banyak orang menggunakannya. 766 00:48:05,480 --> 00:48:09,370 Saya pikir itu tidak banyak masalah lagi. 767 00:48:09,370 --> 00:48:12,520 Ada tentu dokumentasi yang sangat baik untuk hal-hal seperti Ruby on Rails 768 00:48:12,520 --> 00:48:16,080 atau Django untuk Python adalah setara. 769 00:48:16,080 --> 00:48:25,910 PHP adalah salah satu yang semua orang telah menggunakan selama bertahun-tahun, dan Anda tahu cara kerjanya. 770 00:48:25,910 --> 00:48:28,460 Ruby dan Python yang sedikit kurang matang. 771 00:48:28,460 --> 00:48:33,130 >> [Penonton] Jika Anda adalah untuk memilih antara salah satu dari mereka untuk belajar atau mengambil, 772 00:48:33,130 --> 00:48:36,130 yang akan Anda inginkan? 773 00:48:36,130 --> 00:48:38,870 Sejujurnya, saya pikir itu tergantung pada orang. 774 00:48:38,870 --> 00:48:45,450 Maafkan aku. Pertanyaan itu yang akan Anda pilih bagi seseorang untuk belajar? 775 00:48:45,450 --> 00:48:50,230 Saya menemukan Python yang terbaik secara pribadi. 776 00:48:50,230 --> 00:48:55,360 Ada banyak orang yang - Saya melakukan proyek dev pertama saya di web Python dan Django. 777 00:48:55,360 --> 00:49:00,300 Ada banyak orang yang suka Ruby on Rails juga. 778 00:49:00,300 --> 00:49:02,650 Mungkin banyak orang yang tahu Ruby on Rails. 779 00:49:02,650 --> 00:49:05,270 Jujur, saya hanya akan pergi dengan apa pun orang-orang di sekitar Anda tahu 780 00:49:05,270 --> 00:49:09,680 sehingga Anda memiliki orang-orang untuk mengajukan pertanyaan. 781 00:49:19,640 --> 00:49:24,170 >> Pertanyaannya adalah - pada server bersama itu agak sulit untuk bekerja pada Python? 782 00:49:24,170 --> 00:49:26,170 Itu tergantung pada hosting Anda. 783 00:49:26,170 --> 00:49:29,400 Ada beberapa web host yang akan mengirim barang Python. 784 00:49:29,400 --> 00:49:31,400 WebFaction melakukan itu, kan? 785 00:49:31,400 --> 00:49:34,400 WebFaction adalah salah satu yang Billy dan saya telah digunakan untuk beberapa proyek. 786 00:49:34,400 --> 00:49:37,750 Mereka benar-benar hebat. Mereka mendukung banyak bahasa. 787 00:49:37,750 --> 00:49:40,020 Tapi itu benar bahwa PHP jauh lebih luas didukung. 788 00:49:40,020 --> 00:49:45,210 Jadi, jika Anda terjebak pada host web yang hanya melakukan PHP, itu alasan yang baik untuk menggunakan PHP. 789 00:49:45,210 --> 00:49:56,010 >> [Penonton anggota] Aku baru saja menjadi belajar bagaimana query beberapa database, 790 00:49:56,010 --> 00:50:00,680 dan aku tahu SQL saya adalah seluruh tempat, tapi saya baru saja terkena - 791 00:50:00,680 --> 00:50:04,470 dan Anda menunjuk keluar. Anda lihat JSON dan database diupgrade. 792 00:50:04,470 --> 00:50:14,580 SQL saya masih di semua tempat. Bagaimana Anda melihat itu terjadi? 793 00:50:14,580 --> 00:50:21,330 Apakah ada akan menjadi kecenderungan yang berkembang untuk lebih diperluas (tak terdengar)? 794 00:50:21,330 --> 00:50:30,100 Pertanyaannya adalah - saya pikir ada akan menjadi kecenderungan database non-SQL. 795 00:50:30,100 --> 00:50:33,850 Misalnya, seperti MongoDB. Saya pikir itu pasti benar. 796 00:50:33,850 --> 00:50:38,730 Saran saya sebagian besar mySQL terkait di sini hanya karena mySQL adalah 797 00:50:38,730 --> 00:50:40,950 standar industri. 798 00:50:40,950 --> 00:50:45,950 Secara pribadi, saya lebih memilih database yang tidak memiliki schemos seperti MongoDB 799 00:50:45,950 --> 00:50:49,520 di mana Anda tidak memiliki masalah, oh, saya harus menambahkan kolom lain. 800 00:50:49,520 --> 00:50:51,600 Celakalah aku, seperti apa pun yang harus saya lakukan? 801 00:50:51,600 --> 00:50:55,840 Ini sangat sulit untuk melakukan itu pada mySQL, tetapi ketika Anda memiliki sesuatu seperti Mongo 802 00:50:55,840 --> 00:50:57,840 itu jauh lebih baik. 803 00:50:57,840 --> 00:51:03,780 Lain hal yang baik tentang Mongo adalah bahwa catatan Anda sebenarnya objek JavaScript. 804 00:51:03,780 --> 00:51:10,110 Tidak ada semacam langkah konversi di mana Anda perlu mengambil database baris ini 805 00:51:10,110 --> 00:51:13,140 dan mengubahnya menjadi objek JavaScript dan kemudian mengirimkannya melalui kawat. 806 00:51:13,140 --> 00:51:20,290 Saya pikir hal-hal seperti itu akan menjadi sangat, sangat berguna untuk pengembangan web yang cepat di masa depan. 807 00:51:20,290 --> 00:51:23,060 >> [Billy] Sesuatu yang saya akan menambahkan yang hanya titik umum adalah bahwa 808 00:51:23,060 --> 00:51:26,580 tidak merasa seperti Anda harus belajar semua bahasa yang telah kita bahas 809 00:51:26,580 --> 00:51:28,580 dari seminar kami. 810 00:51:28,580 --> 00:51:30,560 Jelas intinya adalah untuk memberikan gambaran tentang apa yang ada di luar sana, 811 00:51:30,560 --> 00:51:33,450 dan jika Anda tertarik dengan salah satu dari hal-hal yang telah kami sebutkan Anda dapat Google mereka 812 00:51:33,450 --> 00:51:35,830 dan membaca tentang mereka. 813 00:51:35,830 --> 00:51:38,750 Dan seperti yang saya sebutkan, ada beberapa seminar yang berhubungan dengan tepat hal-hal ini. 814 00:51:38,750 --> 00:51:41,660 Ada seminar lebih banyak lagi yang belum saya sebutkan bahwa mungkin masuk ke 815 00:51:41,660 --> 00:51:43,660 hal ini juga. 816 00:51:43,660 --> 00:51:46,610 Idenya adalah bahwa jika Anda ingin mengerjakan sesuatu, di sini adalah alat yang Anda inginkan. 817 00:51:46,610 --> 00:51:51,630 Jangan merasa kewalahan jika Anda tidak benar-benar yakin apa alat ini melakukan persis, 818 00:51:51,630 --> 00:51:54,830 tapi tahu bahwa mereka di luar sana dan bahwa Anda dapat menggunakan luas mereka 819 00:51:54,830 --> 00:51:56,830 oleh Google. 820 00:51:56,830 --> 00:51:59,960 >> [Penonton] Apa jenis hal-hal yang perlu Anda lakukan untuk memastikan situs web Anda 821 00:51:59,960 --> 00:52:02,530 terlihat baik pada perangkat mobile? 822 00:52:02,530 --> 00:52:05,590 [Billy] Perangkat mobile agak sulit. 823 00:52:05,590 --> 00:52:07,590 Ada 2 cara Anda dapat mendekatinya. 824 00:52:07,590 --> 00:52:11,500 Cara pertama adalah bahwa Anda benar-benar memiliki situs web mobile. 825 00:52:11,500 --> 00:52:14,660 Dengan kata lain, Anda melakukan semacam deteksi di awal 826 00:52:14,660 --> 00:52:18,830 ketika browser membuat permintaan tersebut ke website Anda yang baik mengatakan 827 00:52:18,830 --> 00:52:25,240 kembali pandangan ini - yang akan menjadi tampilan untuk desktop atau laptop browser - 828 00:52:25,240 --> 00:52:27,710 dan pandangan ini lain untuk perangkat mobile. 829 00:52:27,710 --> 00:52:33,090 Itu adalah tempat di mana pandangan yang benar-benar bagus bahwa Anda dapat cukup banyak swap 830 00:52:33,090 --> 00:52:37,580 dua dan memiliki antarmuka yang bekerja dengan sangat baik pada perangkat mobile 831 00:52:37,580 --> 00:52:40,770 dan memiliki satu sama sekali berbeda yang bekerja dengan baik pada perangkat peramban. 832 00:52:40,770 --> 00:52:43,770 Masalah dengan itu adalah dibutuhkan waktu yang lama karena itu berarti coding 833 00:52:43,770 --> 00:52:47,060 antarmuka yang sama sekali berbeda. 834 00:52:47,060 --> 00:52:49,720 Cara lain yang dapat Anda lakukan adalah - 835 00:52:49,720 --> 00:52:55,250 banyak ponsel modern akan menampilkan website dan mencoba untuk membuat mereka sebagai browser akan, 836 00:52:55,250 --> 00:52:57,680 dan mereka melakukan yang terbaik. 837 00:52:57,680 --> 00:53:04,340 Anda dapat jenis mencoba untuk tetap cahaya pada jumlah jQuery JavaScript yang Anda gunakan 838 00:53:04,340 --> 00:53:07,360 yang cenderung mana hal-hal yang bisa salah sedikit. 839 00:53:07,360 --> 00:53:13,430 Ini adalah semacam cara yang harus Anda gunakan jika Anda tidak punya banyak waktu. 840 00:53:13,430 --> 00:53:18,540 Jika Anda memiliki waktu untuk bekerja pada antarmuka mobile, itu jelas pilihan terbaik Anda. 841 00:53:18,540 --> 00:53:23,320 >> Saya pikir umumnya untuk proyek CS50, Anda akan ingin memilih satu atau yang lain. 842 00:53:23,320 --> 00:53:27,990 Dengan kata lain, Anda ingin membuat aplikasi mobile atau Anda ingin membuat website dekstop. 843 00:53:27,990 --> 00:53:32,200 Dan itu semacam menentukan di mana Anda pergi dengan itu. 844 00:53:32,200 --> 00:53:35,360 Tetapi jika Anda ingin memperluas keluar nanti, mungkin Anda terbaik adalah 845 00:53:35,360 --> 00:53:37,360 untuk membuat antarmuka lain untuk yang lain. 846 00:53:51,650 --> 00:53:56,340 Saya memiliki sedikit pengalaman dalam mengembangkan situs Wordpress berbasis. 847 00:53:56,340 --> 00:53:58,670 Saya menjadi tuan rumah situs pribadi pada WordPress untuk sementara. 848 00:53:58,670 --> 00:54:02,310 Mereka jenis kerangka kerja dapat hal-hal seperti sangat dasar yang bagus. 849 00:54:02,310 --> 00:54:07,050 Sering kali Anda hanya akan mengalami banyak masalah customizability sekalipun. 850 00:54:07,050 --> 00:54:10,940 Anda akan ingin memiliki sesuatu yang terlihat dengan cara tertentu atau menjadi cara tertentu 851 00:54:10,940 --> 00:54:14,510 dan Anda hanya tidak bisa karena itu terprogram ke dalam sistem yang 852 00:54:14,510 --> 00:54:17,480 ini adalah bagaimana Anda harus melakukan hal-hal yang dapat menjadi sedikit masalah. 853 00:54:17,480 --> 00:54:22,020 Sejak itu saya sudah agak lebih cenderung untuk bekerja dengan situs dari bawah ke atas. 854 00:54:22,020 --> 00:54:26,840 Untuk hal-hal seperti blog database dan hal semacam itu benar-benar tidak sulit untuk membangun sebuah kerangka kerja. 855 00:54:26,840 --> 00:54:29,970 Jika Anda benar-benar membentang waktu, tentunya Anda bisa menggunakan sesuatu seperti WordPress 856 00:54:29,970 --> 00:54:33,120 atau hal semacam itu untuk sebuah blog. 857 00:54:33,120 --> 00:54:38,790 Jenis-jenis hal yang toko blog dan melakukan tidak benar-benar cukup keras bahwa 858 00:54:38,790 --> 00:54:41,500 jika Anda menjalankan ke salah satu dari orang-orang macam hal, Anda mungkin terbaik hanya untuk 859 00:54:41,500 --> 00:54:43,500 membuat versi in-house. 860 00:54:43,500 --> 00:54:48,350 >> Saya pikir itu saja, jadi terima kasih lagi untuk datang. 861 00:54:48,350 --> 00:54:51,960 Kami benar-benar menikmati berbicara kepada kalian dan berharap bahwa Anda belajar beberapa hal. 862 00:54:51,960 --> 00:54:55,350 [Ben] Kami senang untuk berbicara - kita harus pergi tapi kami senang untuk berbicara lebih banyak di luar 863 00:54:55,350 --> 00:55:01,650 jika Anda memiliki pertanyaan lain. Terima kasih lagi. [Tepuk tangan] 864 00:55:03,750 --> 00:55:06,000 [CS50.TV]