[Powered by Google Translate] [Seminar] [Web Development: Dari Ide ke Implementasi] [Ben Kuhn] [Billy Janitsch] [Harvard University] [Ini adalah CS50] [CS50.TV] [Billy] Hi, aku Billy dan ini adalah Ben. >> [Ben] Hi. Kita akan berbicara tentang pengembangan web saat ini. [Webdev] [Billy Janitsch dan Ben Kuhn] Sedikit tentang kami pertama. Ben adalah semacam orang back-end. Dia membuat sesuatu bekerja. Kemudian aku masuk dan membuat mereka cantik. Saya sebagian besar terlibat dengan lebih front-end desain tata letak semacam itu, dan Ben, di sisi lain, tahu apa yang dia lakukan sehingga dia bekerja pada hal-hal back-end. Bersama-sama kami telah membuat beberapa hal. Sebagai contoh, tahun lalu kami bekerja pada Gimblium yang merupakan studio pengembangan game online. Itu adalah tugas akhir untuk kelas, dan sejak itu kami telah membuat Harvard Kelas yang merupakan kerangka kerja online untuk browsing dan program belanja di Harvard. 

Kita akan mulai dengan ide ini untuk website kami. Kita akan membuat Facebook, tapi untuk kucing. Sebelum Anda benar-benar membuat website ini, tidak membuat website ini karena itu tidak baik, tetapi kami akan menggunakannya sebagai kerangka kerja dan pergi melalui proses bagaimana kita mengambil ide ini dan mengubahnya menjadi sebuah situs yang sebenarnya bisa kita gunakan. Kita akan mulai dengan memecah website bawah. Seperti Anda sudah melakukan di CS50, Anda ingin untuk berpikir tentang apa saja komponen yang sebenarnya yang masuk ke website ini. Pada dasarnya mengubahnya dari sebuah ide yang hanya semacam konsep abstrak menjadi nyata, hal nyata yang Anda bisa membuat. Kita mulai dengan mengajukan beberapa pertanyaan. Apakah website ini? Mengapa kita membuatnya? Apa itu akan digunakan untuk? Hal semacam itu. Dalam kasus Facebook Cat, kita pada dasarnya menginginkan situs web yang memungkinkan kucing jejaring sosial satu sama lain. Idenya adalah bahwa mereka dapat posting di dinding masing-masing, mereka dapat membuat komentar, hal semacam itu. Dan di situlah kita masuk ke dalam komponen fungsional. Kami sekarang memiliki semacam ini kerangka - kami memiliki profil pengguna, kami memiliki komentar, dan kita bisa posting. Mungkin suatu hari nanti kita akan berpengaruh terhadap suka dan hal semacam itu. Dan kami seperti ingin memprioritaskan fitur ini akan masuk Kami ingin mengatakan seperti, oke, itu benar-benar penting bahwa setiap orang memiliki profil dan semua orang yang dapat posting di dinding masing-masing. Sekunder itu, komentar akan menyenangkan. Mungkin nanti kita akan berpengaruh terhadap sejenisnya. Jadi, Anda ingin memiliki gagasan tentang apa yang penting untuk proyek Anda dan apa jenis fitur yang lebih umum yang dapat diterapkan nanti. Anda ingin semacam memiliki daftar tertentu dalam pikiran, tapi proyek yang Anda mulai dengan tidak akan menjadi proyek yang selesai dengan. Dengan kata lain, hal-hal yang akan berubah saat Anda sedang mengembangkan situs, dan Anda ingin meninggalkan ruang untuk itu. Aku akan menyerahkannya kepada Ben siapa yang akan berbicara sedikit tentang struktur. 

[Ben] Aku akan berbicara tentang sisi yang lebih teknis pengembangan web. Mari kita membahas beberapa dasar-dasar pertama. Ketika Anda melakukan aplikasi web, divisi utama yang Anda akan miliki adalah Anda akan memiliki beberapa hal yang terjadi di sisi klien - yaitu, kode yang Anda browser yang mengambil dari situs dan JavaScript, HTML, CSS barang. Itu semua di sisi klien. Anda akan memiliki kode lain yang berjalan pada sisi server yang melacak semua data bahwa orang mengirimkan kepada Anda, memutuskan siapa yang harus memberikan apa, hal-hal seperti itu. Ini hanya beberapa terminologi sehingga kalian semua akrab dengan apa yang sedang kita bicarakan. Selain divisi yang ada baiknya untuk memikirkan aplikasi web Anda dalam hal beberapa komponen yang berbeda. Ketika Anda melakukan pengembangan web salah satu hal yang Anda harus selalu coba lakukan adalah untuk mengurangi kompleksitas. Kode Anda lebih kompleks adalah semakin banyak kesempatan yang ada untuk membuat bug, semakin sulit untuk berubah nanti. Jadi, jika Anda dapat memecah aplikasi Anda ke dalam beberapa bidang fungsional yang berbeda yang akan - dan Anda dapat mengurangi semacam jumlah komunikasi lintas daerah - yang akan banyak membantu Anda dalam jangka panjang dalam hal mengurangi bug. 

Untuk menjadi beton, biasanya orang membagi sebuah aplikasi web ke - ini adalah jenis kata buzz sekarang, tapi mereka masih berguna. Anda mungkin pernah mendengar orang berbicara tentang model, tampilan, dan controller. Model adalah data aktual bahwa aplikasi Anda akan berurusan dengan. Misalnya, di Cat Anda Facebook, model Anda akan - Anda akan memiliki model untuk posting seperti, dan model untuk profil pengguna, hal-hal seperti itu. Pendapat Anda bagaimana Anda menyajikan data itu untuk pengguna Anda. Anda mungkin memiliki 1 view untuk melihat sebuah posting tunggal dan semua komentar dan pandangan yang berbeda untuk dinding Anda yang memiliki daftar semua posting yang ditujukan kepada Anda, dan pandangan yang berbeda untuk feed berita Anda - hal-hal seperti itu. Akhirnya, Anda memiliki kontroler yang pada dasarnya ketika orang mengirimkan posting dan Anda membuat pembaruan sistem back-end Anda, Anda kenaikan sekelompok counter, dan apa pun. Mereka adalah pengendali Anda. 

Aku akan berbicara terutama tentang model. Tampilan secara teknis tidak sulit dan masalah ini lebih banyak dengan merancang mereka Controller akan menjadi spesifik untuk apa pun yang Anda merancang. Tapi ada beberapa teknik yang cukup umum yang dapat Anda gunakan untuk membuat model Anda lebih baik dan lebih mudah untuk bekerja dengan yang saya pikir sangat membantu. Hal ini sebagian besar akan menjadi tentang bagaimana untuk menangani data aplikasi web Anda dengan cara yang baik. Isu-isu utama dengan model adalah bahwa mereka hidup pada client dan server dan Anda harus mencari tahu a) bagaimana untuk mendapatkan mereka - semua yang relevan - dari server ke klien, dan b) bagaimana untuk menjaga mereka dalam sync. Pengguna Anda akan ingin untuk membuat beberapa update. Mereka akan ingin membuat posting baru. Mereka akan ingin seperti hal-hal dan hal-hal jika Anda memiliki orang-orang seperti. Mereka adalah tantangan teknis utama berurusan dengan model. Hal pertama yang Anda akan ingin bertanya pada diri sendiri adalah apa jenis data yang masuk dalam model ini dan jenis pertanyaan yang akan kita ingin lakukan - yaitu, bagaimana kita akan melihat model? Sebagai contoh Cat Facebook Anda, posting Anda akan memiliki seorang penulis yang terkait dengan itu, beberapa posting dinding teks, dan penerima pos dinding. Dan maka Anda mungkin ingin query bahwa dalam banyak cara yang berbeda. Anda akan ingin melihat dengan yang menulis posting yang, oleh yang menerima yang posting, mungkin dengan tanggal mereka diposting. Tetapi jika Anda akan melakukannya dengan tanggal, maka Anda harus menambahkan bidang lain untuk posting Anda ketika itu benar-benar diposting. Ini 2 faktor - data apa yang ingin Anda gunakan dan bagaimana Anda ingin melihatnya - Anda harus berpikir tentang mereka pertama karena mereka bergantung satu sama lain, dan itu akan lebih sulit untuk menambahkan mereka nanti. 

Ada beberapa pertimbangan lain. Ketika Anda berpikir tentang bagaimana Anda menangani model pada server apa yang ingin Anda lihat adalah - Anda pada dasarnya ingin membuat server sesederhana mungkin. Melakukan hal-hal di sisi client umumnya jauh lebih cepat jika Anda dapat melakukannya murni pada klien tanpa melakukan apapun permintaan jaringan. Idenya adalah untuk melakukan sebanyak mungkin pertanyaan yang Anda bisa pada klien. Satu-satunya masalah dengan itu adalah bahwa jika Anda meminta semua data Anda di awal maka itu akan membutuhkan waktu lama untuk load. Jadi, idenya adalah untuk menyerang media senang antara memiliki cukup data pada klien bahwa Anda dapat melakukan sebagian besar pekerjaan Anda di sana tetapi tidak hanya mengambil semuanya sekaligus sehingga Anda mendapatkan beban kali benar-benar lambat di awal. Sebagai contoh, untuk data kucing Anda Anda mungkin ingin mengambil sekelompok posting dinding baru-baru ini. Anda tidak ingin mengambil semua dari mereka karena itu bisa kembali beberapa tahun. Tapi Anda tidak ingin mengambil mereka satu per satu karena itu akan memperkenalkan banyak overhead jaringan. 

Ini sering cukup sulit - setelah Anda memiliki database yang berjalan - hal ini sering cukup sulit untuk mengubah apa data yang Anda miliki di dalamnya - yaitu, menambahkan kolom database baru atau sesuatu - jadi salah satu strategi yang baik sebenarnya hanya untuk menyimpan banyak data Anda dalam gumpalan teks - JSON gumpalan - JSON menjadi JavaScript Object Notation - Alasan yang berguna adalah karena Anda dapat menambahkan properti baru untuk semua ini gumpalan JSON tanpa mengubah database Anda. Satu-satunya downside itu adalah bahwa jika Anda memiliki banyak bidang yang Anda tambahkan di kemudian hari - seperti yang tersembunyi dalam JSON gumpalan - maka lebih sulit untuk permintaan mereka dalam database. Misalnya, jika Anda kemudian - jika Anda memiliki model yang posting Anda yang telah kita bahas sebelumnya hanya dengan penulis, penerima dan teks - Anda juga bisa memiliki JSON gumpalan dan kemudian jika Anda kemudian ingin menambahkan sebuah field tanggal Anda tidak harus mengubah database Anda. Anda bisa menambahkan tanggal untuk semua bidang teks. Dan kemudian Anda akan dapat melihat mereka di sisi client, tetapi Anda tidak akan dapat permintaan mereka pada sisi server karena itu tersembunyi di dalam teks itu. 

Masalah lain yang ingin Anda pikirkan adalah bagaimana klien dan server Anda akan berkomunikasi. Anda biasanya ingin menyimpan ini sesederhana mungkin. Anda hanya dapat memiliki seperti get-me-request ini data, a membuat-a-baru-obyek hal, dan permintaan update-an-old-obyek. Dan ini semua akan URL yang berbeda pada server yang Anda - bahwa browser akan - Anda dapat menggunakan permintaan AJAX untuk semua ini dan baik menerima atau data pos. Sekali lagi, untuk Cat kami Facebook contoh, Anda bisa memiliki URL yang mendapatkan posting individu, dan Anda akan memiliki URL untuk membuat posting dinding baru dan mungkin URL untuk meng-upload foto profil Anda, hal-hal seperti itu. Tapi sekali lagi, itu untuk pra-mengambil sebagian besar data Anda sehingga Anda tidak harus terus membuat permintaan jaringan. Untuk alasan itu, Anda mungkin tidak ingin memiliki permintaan mendapatkan individu untuk single post, dan sebagai gantinya Anda hanya ingin 1 mendapatkan permintaan untuk seluruh dinding. Dan kemudian jika Anda mencoba untuk keseimbangan karena - ini juga akan tergantung pada aplikasi Anda. Karena jika Anda mengharapkan bahwa orang hanya memiliki 10 atau 20 postingan di dinding yang akan baik-baik saja. Tapi jika Anda mengharapkan mereka akan memiliki ribuan maka permintaan itu akan memakan waktu terlalu lama, dan sehingga Anda mungkin ingin menambahkan get-all-posts-sejak parameter. 

Untuk semua ini Anda mungkin akan ingin untuk melakukan sinkronisasi data Anda di JSON - JavaScript Object Notation. Pretty much setiap bahasa berhubungan dengan JSON sangat baik. JQuery memiliki fungsi ini getJSON bagus yang akan melakukan semua kerja keras untuk Anda. Dan pada PHP ada juga sangat bagus fungsi komunikasi JSON. Jadi, itu mungkin format terbaik untuk mengirim model Anda bolak-balik. 

Sebagai contoh dari apa yang telah kita bicarakan sejauh ini, inilah aliran contoh untuk aplikasi Facebook Cat Anda. Ini dimulai dengan browser Anda meminta URL situs dasar. Server mungkin akan mengirim lebih dari HTML statis dan beberapa JavaScript dan CSS. Ini biasanya terbaik untuk tidak melakukan render pada server. Anda mungkin tidak ingin - apa server tidak lakukan di sana akan turun daftar posting dinding dan menghasilkan beberapa HTML untuk masing-masing dan mengirimkan lebih. Ini biasanya terbaik untuk melakukannya di sisi klien karena jika tidak setiap kali Anda ingin menarik kembali sesuatu, Anda harus membuat permintaan server. Dan itu sangat cepat memberikan Anda banyak overhead. Ini biasanya yang terbaik hanya untuk kapal turunkan statis HTML dan kemudian JavaScript dan CSS yang akan melakukan rendering pada sisi klien. Segera setelah hal-hal yang masuk, maka Anda dapat memiliki - dalam JavaScript - Anda dapat melakukan permintaan untuk data dinding dan hal-hal seperti itu, dan setelah itu server pada dasarnya hanya melakukan query database dan memeriksa perizinan. Satu-satunya hal yang penting adalah bahwa hal itu tidak dapat mengirim lebih dari beberapa pengguna posting dinding lainnya bahwa Anda tidak diizinkan untuk melihat. Hal ini pada dasarnya dapat menjadi lapisan akses sangat tipis ke database Anda, dan kemudian semua menampilkan data - semua pandangan dan barang-barang - tersebut dapat terjadi di browser Anda, dan kemudian ketika Anda ingin membuat posting atau sesuatu Anda hanya mengirim permintaan lain. 

Ada juga beberapa barang-barang mewah yang dapat Anda lakukan di atas ini. Dalam hal informasi teknis yang lebih spesifik, berkembang di dataran JavaScript dapat menjadi sedikit menyakitkan, jadi ada beberapa perpustakaan dan alat-alat yang akan banyak membantu Anda dengan itu. Saya pikir Anda semua mungkin pernah mendengar tentang jQuery yang membuat HTML melakukan render dan manipulasi jauh lebih mudah - memiliki banyak fungsi mewah untuk memudar masuk dan keluar, dan melakukan animasi bergairah. Ada juga perpustakaan ini disebut Underscore.js. Ini memiliki banyak fungsi utilitas yang berguna, hal-hal yang Anda harapkan JavaScript untuk memiliki bahwa itu benar-benar doesnt - hal-hal seperti menyeret sebuah array, menghapus duplikat dari daftar, atau meratakan daftar daftar. Ini hanyalah sebuah contoh kode kecil. Garis bawah memiliki satu ton ini fungsi bagus bahwa Anda berharap Anda akan memiliki semua waktu. 

Dan kemudian ada 1 perpustakaan lagi bahwa saya ingin menghabiskan sedikit waktu di disebut Backbone.js karena Backbone benar-benar membantu Anda berhubungan dengan model pada sisi client dan banyak kebingungan yang bisa menyebabkan. Backbone memberikan konsep model dan koleksi dalam JavaScript yang pada dasarnya persis seperti objek JavaScript dalam JavaScript array tetapi mereka memiliki acara ketika Anda mengubah sifat mereka. Sama seperti di JavaScript, Anda dapat memiliki sebuah acara ketika sebuah tombol diklik atau sesuatu model Backbone ini dan koleksi Backbone akan menyiarkan hal-hal seperti bahwa ketika mereka berubah. Itu berarti bahwa Anda hanya bisa menulis sesuatu seperti potongan kode di sini - ini mengatakan, setiap kali Anda menambahkan sesuatu ke posting array yang Anda redraw seluruh dinding. Dan ini akan mengatakan setiap kali jumlah posting tentang suka perubahan, Anda memberitahu pengguna bahwa seseorang menyukai posting mereka. Atau setiap kali ada milik posting perubahan Anda redraw pos. Hal-hal seperti itu akan menghemat ton kompleksitas karena jika jika Anda tidak memiliki beberapa kerangka kerja seperti ini maka setiap kali dalam kode Anda bahwa Anda mengubah apa-apa tentang posting, Anda harus ingat diri untuk memanggil semua membuat fungsi dan hal-hal seperti itu, dan jika Anda ingin menambahkan sesuatu yang baru yang terjadi setiap kali Anda mengubah posting Anda akan harus melalui setiap tempat di Anda kode yang Anda diubah posting dan menambahkan bahwa hal yang baru. Kerangka kerja seperti ini akan menghapus banyak bahwa komunikasi antara lapisan- yang membuat kode Anda yang kompleks dan sulit untuk mempertahankan. 

Ada sedikit tentang pandangan juga. Aku akan meninggalkan sebagian besar ini kepada Billy karena mereka secara teknis tidak terlalu sulit. Gunakan jQuery untuk pandangan Anda. Ini hampir seperti kebutuhan pada saat ini. Itu hanya membuat segalanya jadi lebih mudah. Ada banyak perpustakaan. Jika Anda telah rumit elemen user interface, jika Anda ingin hal auto-lengkap atau seperti salah satu mewah multi-penyeleksi - jika Anda menginginkan sesuatu seperti itu, Anda mungkin harus hanya mencari di sekitar dan Anda dapat menemukan sebuah perpustakaan yang baik yang akan melakukan apa yang Anda inginkan. Billy akan menjelaskan lebih lanjut tentang bagian-bagian benar-benar sulit dilihat. Juga, sebagai catatan, Backbone memiliki beberapa fungsi untuk membuat tampilan berkomunikasi baik dengan model - melihat dokumentasi untuk semua perpustakaan tersebut, sebenarnya. Hanya melihat dokumentasi. Mereka sangat baik tertulis dan mudah diikuti. Secara umum, Anda dapat cukup banyak hanya Google jika Anda memiliki masalah. Ada banyak orang yang menggunakan mereka. Saya rasa ini adalah sebagai catatan akhir. 

Ada juga beberapa hal yang lebih canggih yang dapat Anda lakukan jika Anda ingin membuat aplikasi web Anda ekstra mengagumkan. Anda dapat melakukan - HTML5 spesifikasi baru memiliki banyak hal mewah yang dapat Anda lakukan. Penyimpanan lokal - yang Anda dapat menyimpan data dalam browser - daripada harus kembali dan membaca dengan teliti server untuk semuanya, Anda dapat menyimpan beberapa pada klien dan bahkan memungkinkan orang - dalam beberapa kasus bahkan dapat membiarkan Anda menggunakan offline halaman web. Ada hal yang disebut WebSockets yang berbagai jenis jaringan komunikasi di mana bukan hanya Anda membuat satu permintaan, Anda mendapatkan respon dan Anda sudah selesai, Anda tetap membuka koneksi ke server dan sehingga Anda dapat melakukan hal-hal seperti update real-time. Jadi, jika Anda sedang mencoba untuk membuat aplikasi chatting, Anda bisa menggunakan WebSockets untuk berkomunikasi bolak-balik sehingga Anda tidak harus terus meminta, "Oh, Server, apakah ada yang mengirim saya mengobrol?" setiap 10 detik atau sesuatu. Ada juga fitur HTML5 yang menarik di mana Anda dapat membuatnya terlihat seperti URL halaman berubah tanpa harus benar-benar ulang itu. Anda dapat menggunakan kembali dan maju tombol tanpa melakukan banyak permintaan jaringan. Hal-hal seperti itu benar-benar berguna dalam hal membuat cepat tetapi juga bekerja seperti aplikasi web seharusnya. 

Ada juga hal ini disebut CoffeeScript. CoffeeScript merupakan bahasa yang berbeda, sebenarnya, yang mengkompilasi ke JavaScript. Anda akan menulis semua kode Anda di CoffeeScript, dan kemudian Anda menjalankan kompiler ini, dan meludah keluar file JavaScript yang dapat Anda masukkan dalam halaman web Anda. Alasan bahwa CoffeeScript bagus karena itu akan menghilangkan banyak kasus aneh yang memiliki JavaScript mana sama sederajat, dan sama sama dengan melakukan hal yang berbeda, atau suka - memiliki sintaks yang lebih baik untuk berurusan dengan array dan fungsi. Ini adalah potongan kecil dari CoffeeScript yang menghasilkan daftar semua kotak dari 10 ^ 2 sampai 1 ^ 2 dalam urutan terbalik. Seperti yang Anda lihat, CoffeeScript sering memungkinkan Anda mengekspresikan dalam 1 baris apa yang akan mengambil 5 baris JavaScript. Hal ini dapat membuat hal-hal yang jauh lebih mudah. Ini sedikit sintaks baru untuk belajar pada awalnya, tapi pasti akan membuat Anda lebih produktif dalam jangka panjang. 

Anda juga dapat menggunakan bahasa lain pada server daripada PHP - bahasa seperti Ruby, Python, atau bahkan ada proyek yang disebut node.js yang akan membiarkan Anda menggunakan JavaScript pada server. Secara pribadi, saya benar-benar, benar-benar benci PHP. Aku hanya tidak senang bekerja dengannya. Jika Anda juga berpikir bahwa itu adalah cluge sekali bahasa, maka Anda dapat menggunakan salah satu dari ini sebagai gantinya. Secara umum, jika Anda ingin melakukan sesuatu dan Anda tidak benar-benar tahu bagaimana Anda akan melakukannya, hanya mencari di Internet. Ada ton dan ton sumber daya terutama pada - StackOverflow adalah salah besar. Ini website ini di mana programmer saling bertanya. Anda mungkin telah mengalami hal itu jika Anda mengalami kesulitan pada masalah CS50 set. Dan ada ton perpustakaan untuk melakukan cukup banyak apa pun yang Anda inginkan. Jika Anda ingin melakukan sesuatu dan Anda tidak tahu bagaimana melakukannya, jangan menganggap bahwa itu tidak mungkin. Hanya melihat-lihat dan Anda mungkin menemukan beberapa sumber daya yang baik. 

Sebagai seorang jenderal membungkus, takeaways utama adalah menjaga hal-hal sederhana. Semakin kompleks kode Anda di awal dan semakin Anda mencoba dan melakukan hal-hal mewah, semakin lama waktu yang dibutuhkan untuk mendapatkan sesuatu benar-benar fungsional dan semakin sulit akan berubah nanti. Jadi, melakukan hal-hal bodoh, cara mudah pertama. Untuk pergi bersama dengan itu, jangan takut membuang kode lama atau membersihkannya banyak. Secara umum, setelah Anda benar-benar memiliki sesuatu yang bekerja, itu jauh lebih mudah untuk berpikir tentang daripada ketika Anda masih dalam tahap awal bagaimana saya menempatkan ini semua bersama-sama. Yang terbaik untuk membuat desain paling bodoh mungkin yang bekerja dan kemudian memperbaikinya iteratif daripada mencoba untuk mendapatkan segalanya dengan benar pertama kalinya. Dalam hal pembagian client-server, mencoba dan menjaga server Anda sangat sederhana - hanya sebuah database dan beberapa otentikasi dan tidak melakukan kerja keras di sana. Apakah semua hal yang rumit Anda di sisi klien dalam browser dalam JavaScript sebanyak yang Anda bisa. Lihatlah ke sekeliling untuk perpustakaan yang membuat hidup Anda lebih baik. Selalu lebih baik untuk menggunakan kode yang orang lain menulis jika Anda - dan tidak menulis sendiri. Ada banyak hal di Internet. Google adalah teman terbaik Anda. Google adalah teman terbaik programmer. Ya, pasti tidak takut untuk melihat-lihat untuk barang-barang. Baik. Dan ke Billy. 

[Billy] Sebenarnya, sebelum saya mulai dengan beberapa hal desain, apakah ada yang punya pertanyaan untuk Ben tentang apa saja yang dia bicarakan? Oke, bagus. Sekali lagi, mari kita tahu jika sesuatu tidak jelas atau jika Anda ingin kami untuk pergi ke sesuatu yang sedikit lebih. Aku akan mundur sedikit dan berbicara tentang bagian-bagian yang lebih mendasar dari desain. Ben menyebutkan model yang disebut - maaf, model tampilan kontroler sistem yang merupakan semacam aspek teknis, jadi aku akan melihat pandangan khusus, dan aku akan mulai dengan bagaimana Anda akan merancang tampilan yang terlihat bagus. Berikut adalah jenis template benar-benar dasar untuk Cat kami Facebook. Saya pikir ada beberapa dasar-dasar dalam desain UI yang modern yang patut mengambil. Anda dapat melihat ada banyak ruang putih di seluruh halaman, banyak ruang untuk hal-hal. Jangan merasa seperti Anda harus labu hal-hal ke dalam halaman. Anda ingin meninggalkan banyak ruang terbuka, dan jika Anda pergi ke hampir semua situs web modern Anda akan melihat ada putih di mana-mana. Ada putih di tempat-tempat yang tidak Anda harapkan. Anda memiliki palet warna ini, dan itu bijaksana di awal untuk memilih palet warna yang Anda akan bekerja dengan dan berkembang. Anda juga - hal ini membantu untuk memilih jenis huruf, dan dengan cara itu Anda semacam bekerja dengan fundamental ini beton desain. Anda memiliki jenis Anda, Anda memiliki warna Anda, dan kemudian Anda dapat jenis cocok segala sesuatu yang lain sebagai dibutuhkan. Jadi, seperti yang saya katakan, dengan skema warna Anda, Anda ingin menggunakan warna lebih berani dari skema warna Anda hemat. Header bagus. Tombol yang baik untuk memiliki benar-benar besar, warna mencolok. Tapi secara umum, jika Anda memiliki situs Web yang memiliki warna di mana-mana, semua menatap wajahmu, itu hanya tampak berantakan, dan itu tidak baik. Anda ingin umumnya menggunakan warna terang. Cobalah untuk, sekali lagi, memilih skema warna yang cukup koheren. Anda dapat memiliki ini percikan kecil dari banyak warna - yang dapat terlihat cukup bagus, tetapi Anda ingin menggunakannya cukup hemat. 

Seperti yang saya katakan, Anda ingin menjadi minimal. Kurang hampir selalu lebih. Jika Anda dapat menampilkan sesuatu atau tidak menampilkan sesuatu, dan Anda jenis yakin apakah itu harus ada secara default - mungkin Anda terbaik dari meninggalkannya keluar. Anda selalu dapat menambahkannya nanti. Ya, menjaga hal-hal sederhana. Tapi yang paling penting, Anda ingin mempertimbangkan beberapa desain. Jangan berpikir bahwa ketika Anda membuat sebuah situs, Anda memilikinya di kepala Anda bahwa Anda akan membuat situs dengan cara tertentu, dan itu akan terlihat persis seperti ini. Ini akan memiliki header biru di bagian atas dan side bar biru dan kemudian hal sub-header yang kuning. Anda ingin membuat beberapa template. Anda dapat - jika Anda baik dengan Photo Shop, Anda dapat membuka bahwa sampai dan semacam merancang sebuah situs web yang Anda inginkan untuk melihat. Jika tidak, Anda hanya dapat menggunakan pena dan kertas, tapi menggaruk beberapa desain. Anda ingin pada dasarnya memiliki mengatur di mana Anda memiliki banyak desain yang berbeda, dan jika seseorang akhirnya bekerja, maka itu bagus. Jika seseorang berakhir sampai gagal, maka Anda selalu memiliki satu sama lain untuk berpaling. Secara umum, tidak merasa seperti Anda harus dibatasi desain apa pun yang Anda awalnya memutuskan. Desain sangat bervariasi, dan bagian dari pentingnya model controller tampilan sistem adalah bahwa Anda dapat swap masuk dan keluar pandangan yang berbeda yang Anda inginkan. Anda dapat bergoyang data satu arah, dan kemudian memutuskan, oh, sebenarnya, yang tidak bekerja dengan baik. Saya pikir itu agak terlalu rumit atau ada bagian di sini yang tidak benar-benar bekerja, jadi aku hanya akan benar-benar meninggalkan pandangan ini dan swap yang benar-benar baru. Kita masih bisa menggunakan model lama dan pengendali tua. Kita bisa melakukan segala sesuatu di server dan client seperti yang kita akan sebelumnya. Tapi gelombang sebenarnya dari data yang ditampilkan akan menjadi sedikit berbeda. 

Sejauh benar-benar menerapkan desain yang Anda inginkan, setelah Anda memiliki beberapa desain sketsa di atas kertas atau di Photo Shop atau apa pun, ada sejumlah alat yang dibuat tersedia untuk Anda. Yang pertama Anda sangat akrab dengan yang HTML, PHP, atau apa pun bahasa yang Anda gunakan hanya untuk kode halaman statis di situs Web Anda. Anda telah banyak bekerja dengan HTML yang jenis memberikan tag ini bahwa Anda dapat memasukkan sesuatu ke dalam, dan pada dasarnya itu adalah cara mengatur konten Anda. Misalnya, Anda memiliki header di atas sana, sehingga Anda akan memiliki tag header, dan itu akan memiliki beberapa teks di dalamnya yang mungkin akan di tag lain. Maka Anda memiliki sidebar mungkin dengan beberapa link yang berbeda, dan mereka akan semua berada dalam tag terpisah. Jadi, pada dasarnya HTML pada intinya adalah cara membagi halaman bagaimana Anda akhirnya ingin format itu. Jadi sekali lagi, Anda telah melihat itu sebelumnya. Kau cukup nyaman dengan bekerja sama dengan sekarang mengingat bahwa Anda sudah melakukan pset lalu mudah-mudahan, sehingga seharusnya tidak ada masalah. 

Maka Anda memiliki CSS yang pada dasarnya menangani semua aspek statis desain. Ini akan menangani semua warna, semua posisi unsur yang berbeda, di mana mereka pergi dengan menghormati satu sama lain, seberapa besar mereka, berbagai jenis positioning yang akan Anda miliki - dengan kata lain, Anda dapat memiliki hal-hal yang tetap sehingga ketika Anda gulir ke bawah mereka tinggal, atau Anda dapat memiliki hal-hal relatif terhadap unsur-unsur lain. Semua hal-hal seperti ini di CSS. Selanjutnya, Anda dapat melakukan dekorasi yang berbeda, Anda dapat memiliki warna teks, efek teks, semua hal semacam itu. Ben memberikan seminar yang benar-benar baik pada akhir pekan lalu ini, dan jadi saya pasti akan memeriksa yang keluar jika Anda berencana untuk melakukan beberapa hal mewah dengan CSS. CSS3 sebenarnya versi terbaru dari CSS, dan dapat melakukan segala macam hal yang benar-benar bagus. Hal ini dapat melakukan gradien, Anda dapat memiliki bagus, sudut bulat, Anda dapat melakukan segala macam hal untuk membuat website Anda terlihat lebih modern dan mewah. 

Alat berikutnya adalah JavaScript dan jQuery yang Ben berbicara sedikit tentang, tapi aku akan mendapatkan sedikit lebih jauh ke dalam. JavaScript, karena Anda telah bekerja dengan itu sedikit, atau setidaknya melihatnya dalam kuliah, adalah jenis cara dinamis melakukan hal-hal dalam HTML. HTML, seperti yang Anda tahu, statis, sehingga setelah Anda memiliki HTML Anda tidak dapat memodifikasinya. Tapi JavaScript, dalam beberapa hal, adalah cara untuk dapat memodifikasi HTML. Jadi Anda bisa melakukan itu, dan itu bagus, tapi JavaScript benar-benar adalah rasa sakit untuk bekerja dengan. Ini sangat panjang dan tumpul dan untuk melakukan bahkan hal-hal yang paling sederhana membutuhkan banyak baris JavaScript. Jadi, pada dasarnya jQuery adalah library JavaScript untuk yang menyederhanakan semua itu. Ia mengatakan, oke, jika Anda ingin memiliki sebuah kotak persegi datang dari kiri dan memudar ke halaman sehingga itu di tengah, dalam JavaScript yang akan mengambil - Saya tidak tahu, seratus baris yang harus dilakukan, dan itu akan menjadi sakit, dan Anda keluar dari itu membenci segala sesuatu tentang pemrograman web. JQuery pada dasarnya Anda memiliki elemen-dot-fade-in, atau sesuatu seperti itu. Jadi fungsi, sangat, sangat sederhana yang akan membiarkan Anda melakukan segala macam animasi keren dan hal semacam itu. Hal lain yang 2 ini benar-benar baik untuk hanya melakukan hal-hal yang dinamis dengan situs web. Jadi, bukan hanya memiliki halaman HTML Anda - yang menampilkan beberapa data tetapi tidak benar-benar melakukan apa-apa - JavaScript dan jQuery akan membiarkan Anda memiliki tombol yang dapat Anda klik, dan Anda dapat menarik elemen dan re-order mereka dan menyortir mereka, dan memiliki unsur-unsur baru ditambahkan atau dihapus. Anda dapat menambahkan-delete, hal semacam itu. Jadi, jQuery melakukan banyak hal keren. Dan Vipul sebenarnya memberikan seminar pada hari ini, saya percaya, pada 5-jam, jadi jika Anda dapat bertahan selama itu, yang akan - 5 atau 4? Empat. Maaf. Ini benar-benar tepat setelah ini, jadi saya akan merekomendasikan menempel di sekitar untuk itu jika Anda bisa. JQuery super, super berguna, dan Anda akan dapat melakukan banyak hal yang benar-benar bagus dengan itu untuk hampir semua proyek pengembangan web. 

Sekarang aku akan masuk ke jenis perbedaan. Saya telah berbicara pada dasarnya tentang antarmuka pengguna. User interface hanya desain situs. Tapi ada semacam konsep lain yang pengalaman pengguna. Keduanya sangat berbeda. Antarmuka jelas bagian dari pengalaman. Dengan kata lain, ketika Anda pergi ke sebuah situs, Anda melihat antarmuka. Itu bagian dari bagaimana Anda mengalami situs. Tapi pengalaman pengguna yang lebih dari itu. Pengalaman pengguna tentang apa kesan bahwa pengguna mendapatkan dari situs Anda. Jadi, jelas, antarmuka adalah bagian dari itu. Dan itu pasti bagian penting, tapi itu tidak cukup. Dengan kata lain, jika Anda memiliki antarmuka yang bagus, dan itu cukup dan berwarna-warni dan semua itu, itu bagus, tetapi jika pengguna pergi ke situs Anda, melihat tata letak cantik dan itu bingung dengan segala sesuatu, tidak tahu bagaimana untuk melakukan sesuatu, maka jelas Anda buat benar-benar website miskin. Itu semacam mana pengalaman pengguna masuk Aku akan berbicara sedikit tentang desain UX - UX adalah singkatan dari pengalaman pengguna - dan jenis bagaimana Anda dapat memastikan bahwa Anda memiliki pengalaman pengguna yang baik. Poin pertama adalah bahwa Anda dapat merancang sebuah situs web di mana pengguna dapat melakukan apa pun yang pengguna yang mungkin ingin. Tapi jika pengguna tidak tahu bagaimana melakukan hal-hal - dengan kata lain, jika pengguna tidak memiliki ide yang baik ketika mereka pergi ke situs Anda, "Oh, jika saya ingin memperbarui profil saya, kemudian saya klik tombol ini, atau jika saya ingin posting di wall seseorang, maka saya pergi ke dinding mereka dan klik pada kotak kecil. " Jika pengguna tidak tahu itu, maka Anda belum benar-benar efektif menerapkan fungsi yang benar. Bagian dari pelaksanaan fungsi adalah bahwa pengguna sebenarnya dapat menggunakannya. Dan mungkin frustasi - Anda bisa membuat sebuah situs, dan dapat melakukan segala macam hal-hal indah, tapi kemudian Anda akan memiliki orang-orang menguji dan berkata, "Ini tidak bisa melakukan ini. Mengapa tidak bisa melakukan ini? "Dan Anda akan mengatakan kembali kepada mereka, "Yah, itu bisa. Anda hanya perlu masuk ke menu drop-down-7 ini jelas Halaman yang hanya ditemukan oleh link di sudut kanan bawah tangan "atau sesuatu. Jelas, Anda tidak ingin itu. Anda ingin menjadi jelas bagi pengguna Anda apa yang seharusnya mereka lakukan, dan itu harus sederhana dan intuitif bagi mereka. 

Hal lain yang ingin Anda coba lakukan adalah, jika seseorang akan pergi ke situs Anda dan 9 dari 10 kali melakukan tindakan A, dan 1 dari 10 kali melakukan tindakan B, Anda mungkin ingin fokus pengalaman mereka pada tindakan A. Dengan kata lain, Anda ingin membuatnya betapa sangat, sangat jelas untuk melakukan A. A harus depan-dan-pusat - pergi ke situs, melihatnya, oh, itu ada di sana. Sedangkan B jelas Anda ingin menjadi jelas, tapi Anda dapat meninggalkan sedikit lebih di latar belakang. David memberi contoh yang baik dari ini dalam kuliah, yang merupakan sistem Boston T. Ketika Anda pergi ke Boston T dan Anda ingin membeli tiket, Anda harus masuk ke menu 5 sebelum Anda benar-benar dapat membeli tiket untuk $ 2, $ 2,50 nilai, yang adalah berapa banyak yang dibutuhkan untuk naik kereta bawah tanah dalam satu arah. Itu masalah karena kebanyakan orang yang naik kereta bawah tanah mungkin hanya ingin pergi ke satu tempat, membeli tiket mereka, mendapatkan segera. Ini tidak masuk akal bahwa mereka harus melalui banyak menu yang berbeda untuk sampai ke sana. Sebuah pengalaman pengguna yang lebih baik akan menjadi tombol cepat pada halaman pertama itu hanya mengatakan, 'membeli tiket sekali jalan, dan itu akan dimasukkan ke dalam semua standar nilai-nilai default, dan kemudian jika seseorang ingin membeli tiket yang berbeda dari itu, mereka masih, tentu saja, memiliki pilihan untuk, tetapi Anda sudah dioptimalkan untuk kasus umum digunakan yang benar-benar penting. Anda dapat melihat contoh ini di Facebook, kan? Jika Anda pergi ke Facebook dan Anda ingin memposting status, itu tepat di atas yang adalah apa yang sering Anda ingin lakukan. Segera setelah Anda memasuki halaman, Anda dapat melakukan hal-hal yang paling umum yang Anda ingin lakukan. Jika Anda ingin melakukan hal-hal yang sedikit lebih rumit seperti, mengatakan saya ingin pergi ke dinding teman saya dan posting gambar di atasnya - yang saya akan ingin melakukan sering, tapi tidak sesering memposting update status - sehingga dalam hal ini, saya ketik nama mereka di kotak di bagian atas, klik pada profil mereka, dan kemudian, masih, itu tepat di atas sana sekali aku sudah pada profilnya. Sekali lagi, saya sudah dioptimalkan dalam prioritas untuk kasus-kasus yang paling umum digunakan. 

Hal lain yang penting adalah bahwa sering orang akan semacam mencoba untuk mendapatkan sekitar ini dengan mengatakan, oke, jadi saya telah membuat situs dan orang yang menemukan itu membingungkan, dan itu masalah, kan? Jelas, saya tidak ingin orang menjadi bingung oleh isi dari situs saya. Tapi cara untuk memecahkan yang tidak memiliki sesuatu pop up mengatakan, hey, aku akan mengajarkan Anda bagaimana menggunakan situs ini. Langkah 1 - klik tombol ini. Langkah 2 - pergi di sini. Tentu, itu adalah jalan lain - ini adalah cara yang dapat Anda memberitahu orang-orang apa yang harus dilakukan, tapi itu benar-benar bukan cara optimal. Jika saya pergi ke sebuah situs web dan tiba-tiba aku dibombardir dengan tutorial ini yang menceritakan apa yang harus dilakukan dan ke mana harus pergi dan semua itu, itu tidak menyenangkan bagi saya. Ini bukan pengalaman yang baik bagi saya. Ini semacam rasa sakit. Saya hanya ingin mulai melakukan hal-hal. Orang-orang akan menutup kotak dialog mereka, atau keluar dari tutorial, tidak tahu apa yang harus dilakukan, dan kemudian mengeluh karena Anda belum memberitahu mereka apa yang harus dilakukan. Cara untuk mengatasi ini bukan dengan memberikan segala jenis tutorial atau arah - sesuatu seperti itu. Sebanyak yang Anda bisa menghindari hal itu, Anda benar-benar ingin menunjukkan pengguna apa yang harus dilakukan hanya dengan sifat bagaimana website ini ditata. Dengan kata lain, jika saya pergi ke Facebook tanpa login, hal pertama yang saya lihat pada halaman utama - itu adalah kotak login sedikit. Jadi, duh. Aku harus log in Itu ada di sana. Padahal, jika saya pergi ke Facebook dan saya harus mengklik link kecil di bagian bawah yang mengatakan 'log in' dan sisa halaman itu hanya beberapa jenis gambar atau sesuatu, Aku tidak akan benar-benar tahu apa yang harus dilakukan, kan? Saya akan bingung. Jadi, bisa memberitahu saya untuk pergi ke sana dan klik tombol untuk log in, atau log di tombol bisa tepat di atas di mana aku akan melihatnya. Anda ingin selalu menunjukkan pengguna apa yang harus dilakukan, dan yang harus melekat dalam halaman itu sendiri. 

Ketika Anda berpikir tentang desain dan mengejek cara-cara yang berbeda mengekspresikan situs Anda, Anda benar-benar ingin untuk berpikir tentang apa yang pengguna akan lakukan dan bagaimana Anda dapat menunjukkan kepada mereka apa yang harus dilakukan. Satu hal terakhir adalah pengujian benar-benar, benar-benar penting. It is great untuk mendapatkan seseorang - mendapatkan teman, mendapatkan seseorang yang Anda tidak tahu bahkan - siapa yang pernah melihat situs sebelum menggunakan situs. Karena Anda telah bekerja di situs selama berjam-jam, Anda sudah menatap itu, dan Anda tahu persis apa yang harus dilakukan jadi jelas Anda akan menguji hal-hal yang Anda telah bekerja dan bahwa Anda tahu pekerjaan. Tetapi jika orang lain datang dan menggunakan situs yang belum pernah menggunakannya sebelumnya, itu adalah pengalaman yang unik karena Anda memiliki seseorang yang tidak memiliki pengetahuan sebelumnya situs akan ke dalamnya, sehingga mereka akan secara efektif tidak tahu apa yang harus dilakukan atau apa jenis kasus penggunaan yang hadir untuk mereka. Itu bagus. Itu unik karena mereka pada dasarnya orang dengan kosong untuk pikiran. Mereka dapat memberitahu Anda jika ada sesuatu yang membingungkan atau tidak jelas. Mereka dapat memberikan gambaran tepat apa pengalaman pengguna dari situs Anda. Ini bisa sangat sulit untuk mengatakan bahwa diri sendiri, jadi pasti saya akan mendorong Anda karena Anda sedang mengembangkan proyek Anda - jika Anda melakukan proyek-proyek berbasis web - untuk membuat orang menggunakan situs ini sedini Anda memiliki semacam demo fungsional. 

Sekarang aku akan berbicara sedikit tentang bagaimana mengelola sebuah proyek pengembangan web. Kami sudah lebih dari bagaimana Anda dapat melakukan sisi back-end teknis, bagaimana Anda dapat merancang situs yang sangat baik, dan itu bagus jika Anda bekerja sendiri tetapi - bahkan jika Anda bekerja sendiri dan terutama jika Anda bekerja dalam sebuah tim, manajemen proyek menjadi masalah besar. Kau semacam mendengar tentang manajemen proyek dalam bentuk yang berbeda sejak sekolah dasar ketika Anda diberitahu kerja kelompok. Anda harus bekerja sama, berkomunikasi, semua itu. Itu semua masih berlaku di sini, tapi ada beberapa situasi yang unik dengan ilmu komputer yang Anda ingin menjadi sadar, dan Anda ingin memastikan Anda menangani dengan baik. Aku akan bicara lebih dulu sedikit tentang tim yang Anda akan masuk Ini sangat penting untuk memilih ukuran yang tepat dari sebuah tim untuk dapat bekerja pada, dan dalam proyek akhir Anda, saya pikir Anda memiliki pilihan untuk memilih antara 1 dan 4 orang jika aku benar. Anda ingin memastikan bahwa Anda tidak hanya memilih jumlah orang bahwa Anda ingin bekerja dengan karena mereka teman. Anda ingin memilih tim yang ukuran yang baik dan yang akan mendapatkan pekerjaan yang dilakukan. Ada trade off dalam memiliki lebih banyak orang dibandingkan orang yang kurang. Jika Anda memiliki lebih banyak orang, jelas lebih banyak pekerjaan yang bisa dilakukan karena Anda memiliki banyak orang, banyak kode, banyak ide-ide, dan itu semua besar. Tetapi juga membutuhkan lebih banyak manajemen dan lebih banyak komunikasi. Dengan kata lain, jika Anda memiliki 4 orang yang bekerja pada proyek yang sama dan mereka semua mengedit kode yang sama, lebih atau kurang mereka semua jenis kebutuhan untuk mengetahui apa yang terjadi sehingga memerlukan Anda - jika Anda menambahkan beberapa fungsi baru Anda semacam harus memberitahu orang - aku menambahkan ini, Aku ganti ini dengan cara ini - terutama jika Anda masuk ke hal-hal yang benar-benar mendalam seperti model dan kontroler yang benar-benar akan mempengaruhi bagaimana situs ini bekerja. Seluruh tim harus menyadari hal itu, sehingga Anda perlu memastikan bahwa Anda tidak memilih terlalu besar tim yang akan sulit untuk membuat komunikasi itu. Anda juga tidak ingin memilih tim yang cukup kecil bahwa Anda tidak akan dapat berkomunikasi karena hanya Anda. 

Hal lain yang perlu dipertimbangkan adalah keseimbangan di mana orang keterampilan adalah. Ini bagus jika Anda semua programmer benar-benar baik. Tapi jika Anda semua orang back-end, maka situs Anda tidak akan terlihat sangat baik karena Anda memiliki database yang besar ini, dan tidak permintaan pencarian super cepat - yang besar - tapi ketika Anda pergi ke sana, itu seperti sebuah situs 1990-an dengan warna merah dan biru di mana-mana, dan itu tidak baik baik. Perhatikan bahwa Ben dan saya bekerja sebagai tim yang sangat bagus karena aku semacam lebih di ujung depan, kami berdua berinteraksi di tengah-end, dan Ben benar-benar baik dengan hal-hal back-end, sehingga bekerja dengan sangat baik karena kita dapat merancang situs manapun dan pada dasarnya lubang di situs yang yang perlu diisi dapat diisi oleh salah satu dari kami, atau mungkin keduanya. Anda ingin memastikan bahwa tidak ada lubang di tim Anda. Tidak apa-apa jika ada sedikit tumpang tindih. Dengan kata lain, jika Anda memiliki 2 orang yang sama-sama baik dengan back-end, yang bisa baik juga karena mereka dapat saling membantu dengan masalah bahwa mereka memiliki. Hal ini dapat menjadi masalah jika Anda hanya memiliki 1 orang yang bertanggung jawab untuk hal tertentu dan mereka mengalami masalah, sehingga Anda ingin memiliki sedikit tumpang tindih tapi yang paling penting Anda ingin memastikan bahwa semua lubang yang mungkin diisi. 

Hal terakhir - dan ini harus jelas, tetapi sering tidak. Anda benar-benar ingin bersenang-senang. Titik tugas akhir ini di CS50 dan sering titik pengembangan web pada umumnya tidak hanya melakukan pekerjaan karena itu perlu dilakukan. Anda benar-benar ingin bersenang-senang, dan Anda ingin membuat sesuatu yang memotivasi Anda untuk bekerja di dalamnya. Jika apa yang Anda membuat adalah rasa sakit untuk duduk dan bekerja pada, maka Anda tidak memilih proyek yang tepat. Anda ingin memilih sesuatu yang Anda anggap menarik, Anda benar-benar ingin melihat hasilnya, Anda sangat gembira ketika Anda mendapatkan ide baru tentang sesuatu yang dapat Anda lakukan - jadi tidak semua jenis proyek di sana yang saya yakin Anda dapat menemukan - setiap orang memiliki sesuatu yang benar-benar akan intrik mereka jika mereka melakukan proyek berbasis web. Aku akan mengatakannya lagi sekarang. Jika proyek Anda tampaknya seperti rasa sakit dan Anda tidak ingin bekerja di atasnya, memilih proyek lain. Pilih sesuatu yang benar-benar menginspirasi Anda. 

Ben menyebutkan konsep ini iterasi sedikit, dan saya ingin pergi lebih sedikit. Ini sangat penting untuk bekerja di spurts di mana Anda mendapatkan sesuatu yang fungsional. Hal ini dapat menjadi besar jika Anda memiliki rencana ini untuk situs Web yang akan melakukan A, B, dan C, dan akhirnya akan sampai di sana. Tapi kau terjebak dalam fase ini di mana Anda bekerja di atasnya dan bekerja di atasnya, tapi tidak ada yang mendapatkan dilakukan. Anda tidak memiliki apa-apa untuk melihat dan nyata, hal fungsional. Apa yang Anda benar-benar ingin melakukan sebanyak itu tampaknya agak sakit kadang-kadang untuk mengerjakan sesuatu dan kemudian semacam topi itu off sehingga setidaknya pada stabil, berjalan Versi bahkan jika tidak memiliki semua fitur yang Anda inginkan. Dan mungkin ada beberapa fitur yang Anda benar-benar ingin menambahkan tetapi Anda hanya tidak bisa karena Anda ingin mendapatkan situs ini ke titik fungsional. Dan sehingga Anda ingin jenis memiliki seluruh proses pembangunan terlihat seperti itu. Anda ingin memulai suatu tempat fungsional - atau pada dasarnya mulai dengan apa-apa - tetapi Anda ingin mendapatkan suatu tempat yang sangat dasar dan fungsional. Dan sekali lagi, membuat semacam melompat dan mendapatkan suatu tempat fungsional lagi. Anda perlahan-lahan akan membangun, dan mungkin pergi sedikit lebih lambat daripada itu akan sebaliknya, tetapi dalam jangka panjang jika Anda terus-menerus terjebak dalam fase jalan tengah ini di mana Anda tidak benar-benar memiliki sesuatu yang bekerja, itu bisa menjadi frustrasi yang sangat besar untuk bekerja pada proyek Anda karena kau selalu begitu dekat dengan mendapatkan itu bekerja, dan itu tidak pernah benar-benar bekerja. Anda ingin bekerja di spurts ini fungsional, dan Anda juga ingin melakukan refleksi setelah masing-masing. Dengan kata lain, setelah Anda berada pada titik di mana situs tersebut sekarang bekerja - itu tidak memiliki semua yang anda suka tapi itu melakukan beberapa hal - Anda ingin berpikir, oke, adalah situs ini mencapai tujuan yang saya mulai lakukan? Dengan kata lain, jika situs tersebut akan melakukan X, adalah apa yang saya bekerja di arah X? Apakah semua fungsi yang saya inginkan di sana? Dan apalagi, itu melayani tujuan keseluruhan yang saya inginkan? Jika Anda menemukan bahwa situs Anda mulai membelok ke arah yang berbeda atau mungkin hal-hal yang hanya jenis tidak bekerja, mungkin sudah saatnya untuk pindah gigi sedikit. Dengan kata lain, ada baiknya mempertimbangkan - itu layak membuang ide jika diperlukan dan mengingat saya benar-benar bekerja untuk apa yang saya inginkan. 

Saya percaya bahwa poin saya berikutnya. Jangan takut untuk meninggalkan ide-ide. Hanya karena Anda menghabiskan banyak jam kerja pada fitur dan akhirnya berhasil bekerja tapi itu benar-benar tidak akan begitu baik - seperti itu tidak berguna atau pengguna mengalami kesulitan menggunakannya - hal semacam itu - jangan takut untuk membuangnya. Menyebalkan bahwa Anda telah menghabiskan banyak waktu bekerja di atasnya, tapi pada akhirnya Anda tidak ingin situs yang semacam disatukan oleh potongan-potongan ini yang jenis pekerjaan tetapi tidak dilayani dengan baik. Juga, jangan takut untuk merangkul ide-ide baru. Jika seseorang datang dan berkata, hey, situs yang terlihat benar-benar keren tapi tidak akan bahkan lebih bagus lagi jika ia juga melakukan ini? Hanya karena itu sesuatu yang tidak anda inginkan dan sesuatu yang tidak Anda spesifikasi, sesuatu yang Anda belum ditetapkan untuk dilakukan, jangan takut untuk menerimanya dan kemudian bekerja dengannya. Karena sering ide-ide yang Anda jalankan dengan seluruh program pembangunan berakhir menjadi fitur yang sangat keren dari situs web. 

Aku sudah mengatakan ini sebelumnya. Saya akan mengatakannya lagi. Penguji super, super berguna. Cobalah untuk mendapatkan orang-orang yang belum pernah melihat situs sebelum untuk log on dan melihat apa yang terjadi karena mereka tidak hanya dapat menguji kegunaan dari situs dan pengalaman pengguna, tetapi mereka juga dapat menguji fungsionalitas dengan cara yang Anda tidak bisa. Jika Anda membuat beberapa fitur yang melakukan hal tertentu dan kau tahu itu akan melakukan hal yang sama dengan benar setiap saat, itu bagus. Tapi itu sering bisa sulit untuk menjelaskan kasus sudut mana kekuatan pengguna ketik sesuatu yang Anda tidak mengharapkan - justru karena Anda didefinisikan fitur sendiri. Jadi, untuk memiliki seseorang datang pada yang tidak tahu bagaimana menggunakan situs ini dan hanya istirahat dengan cara apa pun yang dapat mereka lakukan adalah benar-benar berguna karena Anda mendapatkan ide dari perspektif yang sama sekali berbeda dari apa yang di situs Anda bekerja dan apa yang perlu perbaikan. 

Terakhir, saya akan berbicara tentang beberapa praktek yang baik umum, dan Anda telah melihat banyak ini di CS50, tetapi mereka juga benar-benar, benar-benar berlaku dalam pengaturan proyek. Salah satunya adalah komentar. Selalu komentar kode Anda terutama jika Anda bekerja di sebuah tim besar. Hal ini dapat sangat mengganggu untuk hanya memiliki blok raksasa kode bahwa seseorang ditulis dan mungkin bekerja, mungkin tidak, tetapi Anda tidak tahu apa yang dilakukannya, sehingga Anda tidak tahu apakah itu berguna atau tidak atau apakah itu harus ada atau tidak, dan jika Anda bekerja pada sesuatu yang lain itu bahkan mungkin yang sedang Anda kerjakan hal yang sama, jadi hanya menjadi sangat, sangat berhati-hati untuk menjadi perhatian rekan-rekan Anda dan menulis kode yang didokumentasikan dengan baik. Anda tidak harus pergi sejauh untuk melakukan semuanya di mana seperti jika Anda kenaikan counter memiliki komentar yang mengatakan, saya menambahkan 1 ke konter ini. Tidak harus yang rinci, tetapi untuk setiap fungsi yang Anda pernah menulis Anda harus memiliki beberapa dokumentasi apa fungsi yang tepatnya, apa input, dan apa harus kembali. Dengan cara itu Anda dapat menggunakan komponen masyarakat lain dari situs dan Anda dapat bekerja untuk membangun sesuatu yang besar. 

Hal lain yang penting adalah yang ingin Anda lakukan secara teratur bersih-up. Kode akan berantakan. Jangan merasa buruk jika kode Anda hanya benar-benar dibaca dan berantakan raksasa. Itu terjadi dalam pengembangan web selalu. Anda menambahkan fitur baru, menghapus yang lama. Stuff akan berada di sana yang tidak seharusnya. Itu baik-baik saja, tetapi Anda ingin memastikan untuk menghadapi itu secara teratur. Anda tidak ingin membiarkan hal itu membangun ke titik di mana Anda tidak bisa menemukan apa-apa dalam kode Anda, dan Anda tidak tahu apa apa tidak. Itulah halnya dengan HTML. Kadang-kadang Anda akan berakhir dengan benda-benda yang tidak mengandung apa-apa, dan Anda akan ingin menyingkirkan orang-orang. Dalam CSS, Anda dapat mengacu pada unsur-unsur yang tidak ada lagi, sehingga Anda ingin menyingkirkan kode tersebut. Dalam JavaScript, Anda mungkin telah menghapus sesuatu dari HTML. Jadi, Anda ingin memastikan bahwa Anda selalu membersihkan, membuat hal-hal yang cukup sebanyak yang Anda bisa secara teratur. 

Hal lain yang benar-benar berguna yang saya tidak berpikir diuraikan sangat banyak di CS50 tapi ada baiknya masuk ke kontrol versi. Ide kontrol versi adalah ketika Anda pada dasarnya melacak semua kemajuan Anda telah membuat ke situs Anda dan jika pada titik tertentu Anda menyadari, oh, ini bekerja beberapa waktu lalu tapi itu tidak bekerja lagi, Anda dapat kembali ke versi sebelumnya dan melihat apa yang telah berubah sejak saat itu dan hal semacam itu. Cara utama untuk melakukannya adalah dengan Git, dan Git seluruh sistem semacam ini yang Saya percaya Tommy MacWilliam memberikan seminar tentang tahun lalu. Jika Anda pergi ke seminar CS50 untuk 2011, Anda dapat melihat seminar nya itu. Ide dasarnya adalah bahwa Git secara berkala Anda membuat komitmen ini yang merupakan cara untuk mengatakan situs yang ada di versi cukup stabil sekarang jadi Aku kemasan itu dan mengirimnya pergi ke server, dan kemudian Anda dapat pergi ke server yang dan melihat semua versi sebelumnya dari kode Anda dan melihat bagaimana hal itu berkembang dan semua hal semacam hal yang baik. Jadi, itu pada dasarnya itu. Sejauh pengembangan web, kami senang untuk bertahan dan menjawab pertanyaan sejauh presentasi kami. Itu saja. Terima kasih. >> [Ben] Terima kasih. [Tepuk tangan] 

[Billy] Staf, apakah ada yang memiliki pertanyaan tentang hal-hal yang telah kita pelajari atau hal-hal yang kita tidak tercakup bahwa mereka berharap kami akan menutupi? Kami akan dengan senang hati menjawab mereka. Siapa saja? [Penonton] Apa pro dan kontra dari menggunakan Ruby atau Python menggunakan? [Ben] Pertanyaannya adalah, apa yang pro dan kontra dari menggunakan Ruby atau Python bukan seperti PHP. Pro adalah bahwa Ruby dan Python adalah bahasa yang jauh lebih baik daripada PHP. Setidaknya menurut saya, dan saya pikir dalam banyak pendapat orang lain juga. Mereka dirancang lebih untuk melakukan hal-hal yang kompleks, dan kurang untuk memukul bersama-sama halaman web sangat cepat dengan sedikit konten dinamis. Yang kontra adalah bahwa ada sedikit - ada lebih dari kurva belajar untuk mendapatkan mereka mengatur. Artinya, seperti di PHP, Anda hanya dapat memiliki file HTML dan Anda menulis kurang, tanda tanya, dan kemudian Anda menulis beberapa kode, dan kemudian Anda menulis tanda tanya, lebih besar-daripada, dan kemudian Anda sudah selesai. Dalam bahasa lain seperti Ruby atau Python, Anda harus melalui sedikit lebih banyak pekerjaan untuk mendapatkan tempat awal berjalan. Ada juga - setidaknya itu digunakan untuk menjadi kasus - bahwa ada lebih banyak dokumentasi tersedia untuk PHP hanya karena ada lebih banyak orang menggunakannya. Saya pikir itu tidak banyak masalah lagi. Ada tentu dokumentasi yang sangat baik untuk hal-hal seperti Ruby on Rails atau Django untuk Python adalah setara. PHP adalah salah satu yang semua orang telah menggunakan selama bertahun-tahun, dan Anda tahu cara kerjanya. Ruby dan Python yang sedikit kurang matang. 

[Penonton] Jika Anda adalah untuk memilih antara salah satu dari mereka untuk belajar atau mengambil, yang akan Anda inginkan? Sejujurnya, saya pikir itu tergantung pada orang. Maafkan aku. Pertanyaan itu yang akan Anda pilih bagi seseorang untuk belajar? Saya menemukan Python yang terbaik secara pribadi. Ada banyak orang yang - Saya melakukan proyek dev pertama saya di web Python dan Django. Ada banyak orang yang suka Ruby on Rails juga. Mungkin banyak orang yang tahu Ruby on Rails. Jujur, saya hanya akan pergi dengan apa pun orang-orang di sekitar Anda tahu sehingga Anda memiliki orang-orang untuk mengajukan pertanyaan. 

Pertanyaannya adalah - pada server bersama itu agak sulit untuk bekerja pada Python? Itu tergantung pada hosting Anda. Ada beberapa web host yang akan mengirim barang Python. WebFaction melakukan itu, kan? WebFaction adalah salah satu yang Billy dan saya telah digunakan untuk beberapa proyek. Mereka benar-benar hebat. Mereka mendukung banyak bahasa. Tapi itu benar bahwa PHP jauh lebih luas didukung. Jadi, jika Anda terjebak pada host web yang hanya melakukan PHP, itu alasan yang baik untuk menggunakan PHP. 

[Penonton anggota] Aku baru saja menjadi belajar bagaimana query beberapa database, dan aku tahu SQL saya adalah seluruh tempat, tapi saya baru saja terkena - dan Anda menunjuk keluar. Anda lihat JSON dan database diupgrade. SQL saya masih di semua tempat. Bagaimana Anda melihat itu terjadi? Apakah ada akan menjadi kecenderungan yang berkembang untuk lebih diperluas (tak terdengar)? Pertanyaannya adalah - saya pikir ada akan menjadi kecenderungan database non-SQL. Misalnya, seperti MongoDB. Saya pikir itu pasti benar. Saran saya sebagian besar mySQL terkait di sini hanya karena mySQL adalah standar industri. Secara pribadi, saya lebih memilih database yang tidak memiliki schemos seperti MongoDB di mana Anda tidak memiliki masalah, oh, saya harus menambahkan kolom lain. Celakalah aku, seperti apa pun yang harus saya lakukan? Ini sangat sulit untuk melakukan itu pada mySQL, tetapi ketika Anda memiliki sesuatu seperti Mongo itu jauh lebih baik. Lain hal yang baik tentang Mongo adalah bahwa catatan Anda sebenarnya objek JavaScript. Tidak ada semacam langkah konversi di mana Anda perlu mengambil database baris ini dan mengubahnya menjadi objek JavaScript dan kemudian mengirimkannya melalui kawat. Saya pikir hal-hal seperti itu akan menjadi sangat, sangat berguna untuk pengembangan web yang cepat di masa depan. 

[Billy] Sesuatu yang saya akan menambahkan yang hanya titik umum adalah bahwa tidak merasa seperti Anda harus belajar semua bahasa yang telah kita bahas dari seminar kami. Jelas intinya adalah untuk memberikan gambaran tentang apa yang ada di luar sana, dan jika Anda tertarik dengan salah satu dari hal-hal yang telah kami sebutkan Anda dapat Google mereka dan membaca tentang mereka. Dan seperti yang saya sebutkan, ada beberapa seminar yang berhubungan dengan tepat hal-hal ini. Ada seminar lebih banyak lagi yang belum saya sebutkan bahwa mungkin masuk ke hal ini juga. Idenya adalah bahwa jika Anda ingin mengerjakan sesuatu, di sini adalah alat yang Anda inginkan. Jangan merasa kewalahan jika Anda tidak benar-benar yakin apa alat ini melakukan persis, tapi tahu bahwa mereka di luar sana dan bahwa Anda dapat menggunakan luas mereka oleh Google. 

[Penonton] Apa jenis hal-hal yang perlu Anda lakukan untuk memastikan situs web Anda terlihat baik pada perangkat mobile? [Billy] Perangkat mobile agak sulit. Ada 2 cara Anda dapat mendekatinya. Cara pertama adalah bahwa Anda benar-benar memiliki situs web mobile. Dengan kata lain, Anda melakukan semacam deteksi di awal ketika browser membuat permintaan tersebut ke website Anda yang baik mengatakan kembali pandangan ini - yang akan menjadi tampilan untuk desktop atau laptop browser - dan pandangan ini lain untuk perangkat mobile. Itu adalah tempat di mana pandangan yang benar-benar bagus bahwa Anda dapat cukup banyak swap dua dan memiliki antarmuka yang bekerja dengan sangat baik pada perangkat mobile dan memiliki satu sama sekali berbeda yang bekerja dengan baik pada perangkat peramban. Masalah dengan itu adalah dibutuhkan waktu yang lama karena itu berarti coding antarmuka yang sama sekali berbeda. Cara lain yang dapat Anda lakukan adalah - banyak ponsel modern akan menampilkan website dan mencoba untuk membuat mereka sebagai browser akan, dan mereka melakukan yang terbaik. Anda dapat jenis mencoba untuk tetap cahaya pada jumlah jQuery JavaScript yang Anda gunakan yang cenderung mana hal-hal yang bisa salah sedikit. Ini adalah semacam cara yang harus Anda gunakan jika Anda tidak punya banyak waktu. Jika Anda memiliki waktu untuk bekerja pada antarmuka mobile, itu jelas pilihan terbaik Anda. 

Saya pikir umumnya untuk proyek CS50, Anda akan ingin memilih satu atau yang lain. Dengan kata lain, Anda ingin membuat aplikasi mobile atau Anda ingin membuat website dekstop. Dan itu semacam menentukan di mana Anda pergi dengan itu. Tetapi jika Anda ingin memperluas keluar nanti, mungkin Anda terbaik adalah untuk membuat antarmuka lain untuk yang lain. Saya memiliki sedikit pengalaman dalam mengembangkan situs Wordpress berbasis. Saya menjadi tuan rumah situs pribadi pada WordPress untuk sementara. Mereka jenis kerangka kerja dapat hal-hal seperti sangat dasar yang bagus. Sering kali Anda hanya akan mengalami banyak masalah customizability sekalipun. Anda akan ingin memiliki sesuatu yang terlihat dengan cara tertentu atau menjadi cara tertentu dan Anda hanya tidak bisa karena itu terprogram ke dalam sistem yang ini adalah bagaimana Anda harus melakukan hal-hal yang dapat menjadi sedikit masalah. Sejak itu saya sudah agak lebih cenderung untuk bekerja dengan situs dari bawah ke atas. Untuk hal-hal seperti blog database dan hal semacam itu benar-benar tidak sulit untuk membangun sebuah kerangka kerja. Jika Anda benar-benar membentang waktu, tentunya Anda bisa menggunakan sesuatu seperti WordPress atau hal semacam itu untuk sebuah blog. Jenis-jenis hal yang toko blog dan melakukan tidak benar-benar cukup keras bahwa jika Anda menjalankan ke salah satu dari orang-orang macam hal, Anda mungkin terbaik hanya untuk membuat versi in-house. 

Saya pikir itu saja, jadi terima kasih lagi untuk datang. Kami benar-benar menikmati berbicara kepada kalian dan berharap bahwa Anda belajar beberapa hal. [Ben] Kami senang untuk berbicara - kita harus pergi tapi kami senang untuk berbicara lebih banyak di luar jika Anda memiliki pertanyaan lain. Terima kasih lagi. [Tepuk tangan] [CS50.TV]