Di masa lalu saya telah melakukan beberapa pengkodean HTML, CSS dan PHP, tetapi saya hanya pernah mengerjakan hal-hal yang sudah "selesai" dan saya belum pernah memulai situs web dari awal. Namun, saya baru-baru ini membeli domain dan hosting dengan harga murah, dan saya berharap untuk meningkatkan keterampilan HTML, CSS, dan Javascript sehingga saya bisa menjadi sedikit lebih berharga sebagai pengembang web / webmaster.

Biasanya, proses apa yang Anda gunakan untuk memulai situs web? Apakah Anda menggambar tata letak di atas kertas dan kemudian melakukan kode? Atau apakah Anda baru saja mulai coding dan tweak output sesuai keinginan Anda?

Proses saya umumnya terlihat sedikit seperti ini:

1. Fitur . Dengan pensil dan kertas, tata letak fitur / halaman berbeda yang akan membentuk situs. Ini menimbulkan pertanyaan umum - apakah Anda membuat info dan situs grafik sederhana untuk ibu Anda? solusi e-niaga untuk bisnis kecil? blog / galeri untuk teman fotografer? Jawaban Anda akan menentukan banyak tentang jalur pembuatan yang perlu Anda ikuti. Tahap ini juga dapat melibatkan diskusi besar dengan klien atau siapa pun yang mengemudikan kapal (jika bukan Anda).

2. Bingkai foto . Dengan semua fitur yang diperlukan, buat bingkai foto. Baik di atas kertas atau dengan alat seperti kembang api yang akan memungkinkan Anda untuk membangun fungsionalitas navigasi yang sangat sederhana. Jika Anda bekerja dengan CMS seperti wordpress, bagaimana konten statis Anda akan ditangani? Ini mungkin juga saat yang tepat untuk mulai berpikir tentang struktur file. Jika proyek Anda memerlukan basis data khusus, sekarang juga saatnya untuk mulai merencanakan desain dan implementasinya. Ini adalah tahap yang kritis, karena perencanaan yang cerdas akan menghemat banyak backtracking dan pengerjaan ulang, jika kesalahan terjadi, atau proyek creep terjadi.

3. Teknologi . Setelah tahap perencanaan relatif berhasil - pilih teknologi Anda. Apakah Anda melakukan html langsung? a php cms di lingkungan lampu? .net mvc storefront? Pertanyaan-pertanyaan ini dapat mempengaruhi lingkungan hosting apa yang akan dibutuhkan, serta biaya untuk menjalankannya. Jika Anda melakukan etalase, keamanan adalah masalah utama di sini (SSL dan kepatuhan PCI, misalnya). Pastikan Anda memiliki lingkungan pengujian yang bagus (localhost, atau lainnya).

4. Desain / Tata Letak . Ketika daftar fitur dan gambar rangka Anda cukup ditentukan, Anda dapat mulai berpikir tentang desain situs. Mengetahui apa yang akan mengisi halaman jelas merupakan prasyarat. Saya suka bekerja di photoshop, dan banyak menggunakan folder sebagai analog dengan struktur markup Anda. Saya melangkah lebih jauh dengan memberi nama mereka dengan markup dan pengidentifikasi css yang dimaksud. Meskipun mungkin bijaksana untuk membuat beberapa gambar formulir gratis sebelum Anda benar-benar detail. Saya cenderung memanfaatkan file "layout" yang akan saya tarik elemennya, dan menempatkannya ke dalam file "proses" - file yang saya gunakan untuk menampilkan grafis produksi.

5. Markup / CSS . Setelah desain yang cukup bersih dikerjakan (mengingat bahwa itu pasti akan sedikit melentur, saat Anda masuk ke mode produksi), Anda dapat mulai menulis markup. Saya umumnya suka memiliki tata letak standar yang akan mengakomodasi semua konten di situs. Jadi - bersih dan fleksibel harus menjadi titik kunci di sini. Layup markup harus cukup lengkap sebelum Anda mulai menulis CSS, tetapi saya menemukan mereka melakukan banyak hal untuk menginformasikan satu sama lain. Anda juga akan melakukan banyak optimasi SEO di tahap ini (penamaan gambar atau tag yang tepat, info meta, doctypes dll ...) Hati-hati.

5.1 Manajemen Tema . Jika Anda bekerja dengan CMS, dan desain Anda akan digunakan sebagai tema yang disesuaikan, temukan beberapa tutorial tentang bagaimana tepatnya melakukannya untuk aplikasi yang Anda inginkan. Ini bisa menakutkan, terus terang;) Saya akan selalu membangun tata letak markup statis dengan CSS yang cukup lengkap sebelum memotongnya menjadi elemen tema.

6. Perilaku . Ketika markup dan css Anda terlihat cukup lengkap, dan mungkin tema Anda sudah ada, Anda dapat mulai mengembangkan perilaku (rollover, dll.) Javascript yang tidak penting itu penting, kecuali jika Anda menggunakan fitur yang benar-benar memerlukannya (ajax-heavy) galeri, atau konten flash berbasis data). Aturan umumnya adalah - jika seseorang mengunjungi situs Anda dengan javascript dimatikan, apa yang akan mereka lihat? Saya terkadang menghapus elemen statis dan menggantinya dengan versi interaktif saat runtime.

7. Konten . Kecuali jika desainnya bergantung pada konten (gambar terkadang konten, misalnya) = Saya biasanya menggunakan teks / gambar placeholder hingga desain dan perilaku cukup mapan. Hindari melakukan pekerjaan lebih dari sekali. Jika Anda mengisi data produk, pemeriksaan dan pengujian kesalahan yang cermat akan diperlukan.

Pada titik itu, sepertinya selalu ada periode pengerjaan ulang dan perbaikan dan pemolesan. Tapi, pada dasarnya, saatnya untuk membuatnya hidup. Lalu pergi makan camilan.

Hmmm. Saya kira itu lebih dari sekadar "bagaimana memulai". Tapi mungkin itu membantu. Semoga berhasil!

Ketika mendesain situs web saya mulai dengan bertanya mengapa?

Bagian pertama dari alur kerja saya adalah bertanya MENGAPA? Jika saya bekerja dengan klien, saya perlu memastikan mereka memiliki visi yang jelas tentang apa yang mereka ingin capai situs web.

1. Pertanyaan Mengapa.

• Ceritakan sedikit tentang diri Anda dan mengapa Anda melakukan ini.

• Siapa pelanggan? Apa kebutuhan khusus mereka? Harap dapat memberi saya - beberapa contoh spesifik dari berbagai jenis pelanggan, apa yang mereka butuhkan, apa yang akan dilakukan situs web untuk mereka.

• Ceritakan tentang bisnis ini. Apa yang sebenarnya Anda lakukan?

• Apa yang membuat Anda lebih baik daripada pria berikutnya?

• Jika Anda mencari layanan yang disediakan bisnis Anda, apa yang akan Anda ketik di Google untuk menemukannya?

Jika Anda membangun situs untuk diri sendiri maka Anda sebaiknya sudah tahu apa jawaban ini.

Jika Anda menentukan berdasarkan jawaban atas pertanyaan di atas bahwa orang-orang ini serius dan benar-benar punya ide bagus. Kemudian lanjutkan (Ingat Anda belum dibayar tetapi Anda lebih baik melepas kaus kaki mereka jika Anda ingin mereka mempekerjakan Anda.)

2. Penelitian.

Luangkan waktu untuk meneliti klien dan bisnisnya. Cari tahu kesuksesan mereka di masa lalu dan masalah apa pun yang mereka temui. Apakah Anda pengembang ketiga yang mereka sewa? Apa yang terjadi dengan 2 orang lainnya?

Cari tahu apa yang dibutuhkan pelanggan. Untuk siapa Anda akan membangun situs ini. Apakah pelanggan seorang pensiunan veteran berusia 60 tahun atau bocah berwajah jerawat berusia 16 tahun yang bermain Farmville di Facebook sepanjang hari.

Cari tahu siapa kompetitornya. Mereka bahkan mungkin tidak tahu. Lakukan analisis kompetitif dari 5 hingga 10 pesaing dan cari tahu siapa yang perlu ditendang di Serps. Ini adalah tahap yang Anda perlu tahu apa target kata kunci. Terlambat dan Anda sudah gagal.

2b Proposal

Singkirkan mereka dengan pengetahuan Anda tentang bisnis mereka dan buatlah perjanjian / proposal situs web dan siap dengan kontrak Anda begitu mereka setuju. Dapatkan kontrak yang ditandatangani dan deposit 50% kemudian lanjutkan ke langkah 3.

3. Misi - Miliki satu

Ada tema umum di sini: dalam semua kasus ini, misinya bukan tentang produk. Misinya adalah "hanya" sesuatu yang, jika Anda benar-benar serius, mengharuskan produk itu menjadi benar-benar luar biasa, sehingga Anda mewujudkannya. Jika Anda lebih suka: semua misi ini adalah jawabannya, mengapa kami baru saja menambahkan fitur baru itu ?, bukan, fitur baru apa yang kami tambahkan? - Benjamin Pollack.

Garis waktu perlu ditetapkan sehingga semua orang akan memiliki harapan mereka dalam perspektif.

4. Alur Kerja

Di sinilah kebanyakan orang mulai jadi saya akan menjelaskan proses saya tetapi Anda harus memutuskan alur kerja apa yang terbaik untuk situasi Anda, tim, klien dll.

1. Bagi saya , Konten lebih dulu. Saya memastikan bahwa klien telah melakukan sebagian besar sebelum kode apa pun ditulis. Kami tidak berbicara tentang penyuntingan bukti draft akhir tetapi lebih atau kurang kata-kata teks yang akan ada di halaman. Jika tim pemasaran terlibat, ini bisa memakan waktu cukup lama.

2. Anda seharusnya sudah memiliki gambaran tentang seperti apa situs itu nantinya. Anda harus memiliki kontennya. Sekarang Anda perlu bekerja pada tata letak dan prinsip-prinsip desain umum yang akan mencapai tujuan yang Anda buat pada langkah 3.

   Saya BENCI gambar rangka tetapi mengerti bahwa itu perlu. Hanya karena Anda tahu seperti apa situs itu, klien Anda mungkin tidak. Ini untuk perlindungan Anda dan klien. Ketika semua orang senang membuat mereka menandatangani sesuatu yang mengatakan "Ini adalah apa yang kami bayar untuk Anda bangun".

3. Pengembangan frontend dan UI - HTML, CSS, dan DESAIN DI BROWSER , teknik Hardboiled Andy Clarke. Aku bosan menghabiskan begitu banyak waktu di Photoshop ketika aku tahu dapat menunjukkan mockup yang lebih realistis lebih cepat yang juga memberi saya awal dalam pengembangan.

4b. Basis kode

Anda akhirnya bisa bersenang-senang. Untuk Anda dan klien, manfaatkan mengatur VERSION CONTROL sebelum Anda memulai. Karena kontrol versi melakukan Anda, Anda harus melanjutkan dan mengatur PELACAKAN BUG saat Anda melakukannya.

4c. Salin Mengedit

Ingat konten yang kita miliki? Sekarang saatnya copy harus diedit. Saya payah dalam hal ini jadi saya mencoba dan mempekerjakan orang lain atau memastikan banyak orang membacanya. Periksa dan pastikan kata kunci yang kita bicarakan di langkah 2 dioptimalkan untuk SEO. Jika konten kami hebat dan sebenarnya tentang kata-kata kunci ini harus datang secara alami.

5. Pengujian Beta dan UI

Dapatkan beberapa manusia yang hidup bernapas nyata untuk duduk di depan situs Anda dan mulai menggunakannya. Saya suka meminta ibu saya yang kadang-kadang menelepon dan ingin tahu mengapa printernya tidak mau mencetak (Plug plug Mom, harus dicolokkan terlebih dahulu). Pengguna seperti ini harus dapat menavigasi situs Anda kecuali tentu saja menggunakan contoh anak berusia 16 tahun yang dihadapi jerawat di atas.

6. Rencana Perawatan dan SEO

Pastikan semua orang tahu siapa yang bertanggung jawab melawan monster server .

Dalam sebulan merujuk kembali ke analisis kompetitif yang kami lakukan dan membandingkan situs kami dengan yang kami analisis. Gunakan data ini untuk membuat rencana SEO Anda dan TIDAK. Saya tidak berbicara tentang SEO minyak ular, saya berbicara tentang memastikan Anda masih menghasilkan konten yang relevan, situs secara alami terhubung ke Anda (karena Anda begitu hebat) dan tag judul Anda cocok dengan teks isi. SEO adalah proses yang panjang kecuali Stack Overflow Anda dan memiliki pasukan 14,1 juta pengguna untuk menghasilkan konten berkualitas untuk Anda.

Ada perbedaan besar antara konten berkualitas dan hal-hal yang Anda temukan di "situs ditulis dgn tanda penghubung", yang saya tidak akan ditautkan. (Untuk mencegah jus no-follow dari bahkan menetes pada mereka).

7. Luncurkan

Semuanya bekerja? Misi membangun kedahsyatan tercapai? Miliki rencana peluncuran dan jalankan.

Jika Anda melakukan segalanya dengan benar pada langkah 1 - 6 peluncuran Anda akan sangat mudah , Anda mungkin akan mengalami masalah. Bersiaplah untuk mereka dan perbaiki kesalahan apa pun.

Kirim faktur, bilas, dan ulangi.

Saya suka memulai <!DOCTYPE html>

Serius ... prioritas pertama:

1. Cari tahu apa yang diinginkan klien. Gambar sketsa kasar untuk tata letak dasar, muncul dengan skema warna, dll.
2. Lakukan navigasi dasar dan tata letak mock up (statis) dan bekerja dengan klien untuk memperbaikinya.
3. Produksi aktual. Dapatkan CMS dan / atau konten statis di tempatnya. Berunding dengan klien lagi untuk memastikan itu yang mereka cari dan mereka dapat menangani CMS / CMS dapat menangani kebutuhan mereka.
4. Perbaiki dan ulangi 3 sampai klien bahagia.
5. ????
6. Keuntungan!

Pertama-tama saya akan menggambar tata letak dasar dan mendesainnya di atas kertas sebelum memulai pengkodean. Setelah menyelesaikan desain dasar di atas kertas, mudah untuk mengkodekannya dengan cara modular. Kursus php & css akan menjadi cara terbaik untuk menyesuaikannya.

Saya selalu suka memulai dengan membuat mockup menggunakan beberapa jenis perangkat lunak photoshop sehingga dapat menggabungkan setiap dan semua gambar di situs Anda.

Sebagian besar jawabannya sudah mendalam, izinkan saya menambahkan bahwa Anda harus menggunakan beberapa kerangka kerja atau template sehingga Anda tidak membuang waktu menulis ulang dasar-dasarnya.

Ada banyak kerangka kerja PHP yang tersedia di luar sana ( Kohana adalah favorit pribadi saya) atau banyak orang menggunakan Wordpress sebagai basis. Anda juga dapat menggunakan kerangka kerja CSS, sekali lagi ada banyak di luar sana, salah satu yang paling populer adalah sistem grid 960

Saat mendesain situs web, bagaimana Anda biasanya memulai ?

Seperti Anda, saya menemukan kebutuhan untuk memasarkan diri saya sebagai pengembang / desainer web beberapa tahun yang lalu. Saya menemukan tempat awal saya untuk memahami dalam pikiran saya sendiri, informasi, gambar dan pesan apa yang ingin saya tawarkan kepada pengunjung yang mengunjungi situs web saya? dan apa yang saya ingin pengguna lakukan saat mengunjungi situs web saya .

Setelah saya mengerti bahwa proses desain menjadi jauh lebih jelas. Itu memungkinkan saya untuk menulis elemen-elemen beranda saya dan halaman berikutnya yang akan mengkomunikasikan barang-barang itu.

Misalnya saya sangat ingin membuat CV saya mudah ditemukan dan diunduh. Jadi ketika merancang situs saya, saya memastikan bahwa informasi tentang CV saya dan di mana itu dapat ditemukan di mana tersedia.

Moral cerita harus relevan. Segala sesuatu di situs web Anda harus memiliki tujuan, jika tidak, itu hanya suara tidak perlu.