Panduan Pemula untuk Membangun dan Menghosting Halaman Web

 Panduan Pemula untuk Membangun dan Menghosting Halaman Web

Social networking service concept. Streaming video. Video library. Social networking service concept. Streaming video. Video library. web stock pictures, royalty-free photos & images

Panduan pemula untuk Membangun dan Menghosting Halaman Web Desain dan pengembangan web sangat menyenangkan. Bagi mereka yang baru memulai, saya telah mengembangkan panduan berikut untuk memandu Anda melalui semua langkah yang diperlukan agar berhasil memulai petualangan desain dan pengembangan web Anda!

A) Indeks:

PRA: 3 D

1. Gathering
2. Konsep
3. Photoshop
4. Persetujuan Klien # 1
5. HTML (front-end)
6. Kode (back-end)
7. Persetujuan Klien # 2
8. Mengupload & Menguji

B) Alat yang Dibutuhkan: (Saya akan membahas semua alat ini secara mendetail di bawah)

1. Pensil
2. Kertas
3. Photoshop (atau alat desain lainnya)
4. Dreamweaver (atau alat pengembangan web lainnya)
5. Salinan dari semua browser umum (lihat di bawah untuk info lebih lanjut)
6. Filezilla (atau alat FTP lainnya untuk berkomunikasi dengan server web Anda)
7. Nama Domain (alamat www. Anda)
8. Host Web seperti GoDaddy (atau yang serupa)
9. Komputer
10. Semangat untuk menjadi kreatif!

-------------------------------------------------- ------------------------------

A) Indeks:

PRA: 3 D

Semua website di dunia membutuhkan 3 hal.

Nama Domain. Melalui perusahaan seperti GoDaddy, Anda dapat membeli nama dengan sedikit biaya per tahun. Jika nama yang Anda inginkan adalah sesuatu yang populer, pertimbangkan untuk membelinya di awal proses pembuatan Anda, lagipula, itu bagus untuk satu tahun.

Host Khusus Setelah Anda memilih paket hosting, Anda harus masuk dan mengatur semuanya. Anda harus menunjuk, atau memarkir nama domain Anda di pengaturan hosting Anda juga. Setelah semua selesai, atur program FTP Anda sehingga koneksi ke server Anda berfungsi.

Situs Web yang Dirancang dan Dikembangkan (barang Anda!). Tutorial ini akan menutupi yang satu ini!

1. Berkumpul

Jenis situs yang Anda gunakan dan alat yang Anda perlukan akan sangat bervariasi tergantung pada kebutuhan klien Anda. Sebuah situs web yang dibangun untuk tidak melakukan apa pun selain menampilkan gambar akan memiliki teknologi yang sangat berbeda di bagian belakang daripada halaman yang dibuat untuk memungkinkan diskusi. Demikian pula, situs yang dibangun untuk keamanan dengan data karyawan dan sistem login akan terlihat sangat berbeda.

Mengetahui apa yang dibutuhkan klien Anda adalah langkah nyata pertama dalam proses pembangunan. Buatlah daftar periksa untuk diri Anda sendiri dan bawalah saat Anda berbicara dengan klien Anda. Seiring waktu, kembangkan daftar periksa menjadi dokumen konsultasi yang komprehensif. Bersiaplah untuk obrolan tambahan. Komponen paling penting dari pembuatan web awal adalah komunikasi yang tepat untuk memastikan Anda dan klien Anda tetap berada di halaman 'desain' yang sama. Hal terakhir yang ingin Anda lakukan adalah salah menafsirkan minat mereka dan menghabiskan 5-6 jam membangun sesuatu yang tidak mereka inginkan.

2. Konsep

Anda sudah mendapatkan semua informasi awal Anda. Sekarang saatnya membuat sketsa desain konsep kita. Anda TIDAK perlu menjadi seniman untuk ini. Tujuan dari fase konsep ini adalah untuk menghilangkan komputer dan gangguan lainnya sehingga Anda dapat memvisualisasikan desain di kepala Anda.

Sepanjang tahap ini, kami mencari tema umum. Warna apa yang akan kita gunakan, tata letak header / body / footer apa yang akan kita gunakan? 2 kolom vs 3 kolom? Tata letak tetap atau cair? Akankah berita ditampilkan di sini, atau di sana? Menu navigasi seperti apa yang kita inginkan, berbasis gambar atau berbasis CSS? Buat sketsa sampai jari-jari kecil Anda yang cantik berdarah. Anda ingin memiliki desain yang sebenarnya di atas kertas, sesuatu yang Anda sukai. Sangat mudah untuk memulai kembali saat Anda menggunakan pensil tetapi 3 jam ke sesi perancangan di Photoshop BUKAN di tempat yang Anda inginkan ketika Anda menyadari sudut kuning dan bulat terong bukanlah cara yang tepat ...

3. Photoshop

Jadi kami memiliki konsep kami di atas kertas, sekarang saatnya untuk mentransfer desain ini ke Photoshop (atau program serupa lainnya).

Fase ini sangat penting untuk memastikan kami memiliki metode yang fleksibel untuk melakukan perubahan di kemudian hari. Ini juga terpenting dalam memastikan halaman web kami kompatibel lintas-browser nanti.

Saya akan menganggap Anda menggunakan Photoshop dan saya juga akan menganggap Anda tahu sesuatu tentangnya, yaitu: lapisan apa yang merupakan proses umum pembuatan grafik dengan menggunakan beberapa lapisan untuk menjaga agar elemen tetap terpisah. Jika Anda tidak terbiasa dengan proses ini, pergilah ke SINI dan luangkan waktu untuk mempelajari dasar-dasar.

Dengan asumsi semua itu (saya berasumsi banyak, saya tahu!) Mari kita mulai ...

Biasanya jika saya membuat gambar di Photoshop, sebuah rumah di danau, dengan matahari di atasnya, saya akan melakukan hal berikut:

1. Hapus latar belakang nanti.

2. Buat 'halaman' baru nanti untuk menampung semuanya.

3. Buat layer baru 'rumah'.

4. Buat layer baru DI BAWAH 'danau' itu.

5. Buat layer baru DI BAWAH kedua 'matahari' tersebut.

Dengan cara ini, saya akan secara otomatis mengatur kedalaman gambar saya. Matahari akan muncul di balik danau, yang akan muncul di belakang rumah. Saya kemudian dapat mendesain dalam setiap lapisan untuk menjaga semuanya tetap teratur.

Saat mendesain situs web, Anda mengikuti prinsip yang sama, tetapi dengan cara yang jauh lebih lengkap.

Jika kita menganggap halaman web pada umumnya memiliki 4 komponen, komponen tersebut adalah: PAGE (atau WRAP) untuk menampung semuanya, HEADER, BODY, FOOTER. Dengan mengingat hal ini, di photoshop kami membuat 'grup lapisan (atau kumpulan di versi lama)' yang mengikuti alur yang sama.

1. Buat grup lapisan baru bernama 'halaman'.

2. Di dalamnya, buat grup layer baru bernama 'header', 'body', dan 'footer'.

3. Di dalam masing-masing, buat lapisan individu (bukan set) untuk memecah berbagai elemen desain.

Ketika Anda selesai di Photoshop, jika Anda melihat ke kanan, Anda benar-benar harus memiliki hierarki elemen desain yang dapat dilipat yang semuanya runtuh menjadi satu tingkat atas.

elemen yang disebut 'halaman'. Mengklik satu grup lapisan itu akan menampilkan 3 grup lapisan dalam yang disebut header, body dan footer. Saya telah meninggalkan navigasi dan sidebar dll tetapi itu akan memiliki set lapisan mereka sendiri juga jika Anda membangunnya.

Dengan mengikuti metode ini, Anda akan memiliki tata letak yang sangat teratur dan jelas. Anda dapat kembali dan mengedit bagian tertentu nanti tanpa harus khawatir tentang pelapisan, kedalaman, atau pemindahan komponen yang salah, dll.

4. Persetujuan Klien # 1

Ini bukan waktunya untuk menunjukkan kepada klien kami desain Photoshop (atau serupa) kami. Pada titik ini, ini hanyalah gambar. Kita harus memasukkan teks placeholder dan tautan sehingga itu muncul persis seperti halaman web tertulis yang lengkap akan terlihat. Gunakan gambar palsu jika perlu. Kami ingin ini mewakili halaman web semirip mungkin.

Kami akan bolak-balik dalam fase ini sampai klien menyetujui desain grafis kami. Setelah selesai - selamat! Pekerjaan desain selesai!

5. HTML (ujung depan)

Buka Photoshop dan pastikan semua layer individual Anda disimpan sebagai .GIF atau .JPG atau .PNG, atau format apa pun yang ingin Anda gunakan. Kami akan membutuhkan semuanya dalam format itu untuk web.

CATATAN: Saat menyimpan di Photoshop, pastikan Anda memilih 'simpan untuk web atau perangkat' karena ini menawarkan beberapa opsi kompresi tambahan untuk lingkungan bandwidth rendah.

Buka Dreamweaver (saya tahu, saya tahu, Anda senang!) Dan buat halaman XHTML baru. Ya, saya mengatakan XHTML, bukan HTML (meskipun mereka dapat diberi label yang sama saat memilih dari menu 'baru' Dreamweaver. Jika Anda ingin tahu alasannya, lihat artikel ini. Singkatnya, lebih baik, lebih bersih, lebih tepat, dan akan memastikan kode Anda lebih berfungsi dan valid.

Halaman web kosong baru Anda akan terlihat seperti ini:

<head> <meta http-equiv = "Content-Type" content = "text / html; charset = utf-8 & # 8243; /> <title> Dokumen Tanpa Judul </title> </head> <body> </ body > </html>
Mulailah dengan membuat tata letak dasar kami dengan DIV. Ini akan terlihat seperti ini setelah selesai.

<head> <meta http-equiv = "Content-Type" content = "text / html; charset = utf-8 & # 8243; /> <title> Dokumen Tanpa Judul </title> </head> <body> <div id = "page"> <div id = "header"> Ini adalah headernya! </div> <div id = "body"> Ini isinya! </div> <div id = "footer"> Ini adalah footer! </div> </div> </body> </html>
Setelah selesai, buat halaman Anda, tempatkan elemen desain ke tempat yang sesuai. Setelah Anda mendapatkan satu halaman XHTML ini yang berfungsi, di beberapa browser, Anda dapat berhenti jika Anda menginginkannya pada tahap ini. Namun, ada beberapa langkah lagi yang dapat kami lakukan untuk lebih membersihkan kode kami.

Saat ini, halaman ini besar dan berat. Saat kami menambahkan konten, akan menjadi sulit untuk membedakan di mana pada halaman hal-hal tertentu dimulai dan diakhiri. Untuk mengatasi ini, kita dapat menggunakan file PHP untuk menyimpan konten kita dan cukup memasukkannya ke dalam halaman indeks kita. Catatan, untuk melakukan ini Anda perlu mengubah halaman indeks Anda dari halaman XHTML ke halaman PHP.

Saya tidak akan membahas penyertaan, tetapi pada dasarnya ini adalah tampilan halaman setelah Anda selesai memasukkan semuanya.

<? php include ('header.php');?> <? php include ('navigation.php');?> <div> Ini adalah satu-satunya konten aktual di halaman kami. Segala sesuatu yang lain disertakan menggunakan PHP. Tidak peduli seberapa besar file lainnya, hanya ini yang akan kita lihat saat kita bekerja dalam mode pengembangan di halaman ini. Bersihkan eh!?! </div> <? php include ('sidebar.php');?> <? php include ('footer.php');?>
INGAT: Tidak ada yang dinamis pada saat ini, kami sedang membangun halaman statis dasar, dengan berita default, gambar palsu, dll. Tidak ada kode di back-end pada saat ini.

Terlepas dari seberapa sedikit atau seberapa banyak organisasi Anda bekerja dalam tata letak halaman Anda, tujuan dari seluruh fase ini adalah memiliki halaman STATIC, yang terlihat persis seperti halaman photoshop kami, yang berfungsi di banyak browser. Jika kita sudah sampai sejauh ini, kita hampir sampai!

6. Kode (ujung belakang)

Selain tombol navigasi berfungsi, semua yang lain di situs mungkin rusak. Kami telah menulis secara manual di semua teks kami, dan tidak ada gadget kami yang berfungsi.

Pada titik ini kami ingin memulai pengkodean di bagian belakang, gadget demi gadget.

Sebagai contoh. Jika kami memiliki rubrik berita di halaman kami, saat ini di halaman statis kami, kami baru saja menulis berita itu di sana. Sebaliknya, kami ingin berita tersebut dimasukkan secara otomatis saat kami membuat artikel baru, dengan beberapa program otomatis yang tidak melibatkan pembukaan Dreamweaver setiap saat. Inilah yang kami sebut 'Sistem Manajemen Konten' atau CMS.

Ada berbagai bentuk di luar sana. Saya tidak akan membahasnya sama sekali, tetapi Joomla dan WordPress adalah yang terbaik untuk memulai.

Atau, jika Anda seperti saya dan suka mempelajari cara kerja roda gigi dari bawah ke atas, Anda dapat menantang diri Anda sendiri untuk mempelajari MYSQL dan PHP secara lebih ekstensif dan cukup menulis gadget berita kecil yang membaca dan menulis ke database - sepenuhnya terserah kamu!

Apa pun itu, bagian penting dari fase ini adalah membiarkan desain dan bekerja untuk menambahkan kehidupan ke semua gadget dan widget di halaman Anda. Buat sistem login itu, buat sistem pengguna itu, bagaimana dengan galeri, kalender, CMS, mungkin buku tamu atau kotak komentar ... sepenuhnya terserah Anda. Ingat, untuk setiap gadget, Anda harus mendesainnya terlebih dahulu sehingga Anda memilikinya di Photoshop sebagai desain. Dengan cara itu komponen desain hilang dan Anda hanya mengkodekan bagian belakangnya.

Jika Anda terjebak mencoba mendesain, DAN membuat kode sesuatu pada saat yang sama, percayalah ... itu dapat menghabiskan hari-hari Anda saat Anda berjuang untuk bertarung dengan kotak CSS yang tidak sejajar, dll.

Rancang, lalu Kembangkan. Bilasan. Ulang. Keberhasilan.

7. Persetujuan Klien # 2

Saatnya kembali ke klien dan menunjukkan kepada mereka pekerjaan pengembangan yang telah Anda lakukan. Pamerkan sistem login Anda, pamerkan galeri Anda. WOW mereka! Jika mereka tidak WOW, kembali dan sesuaikan beberapa hal, terkadang kembali ke fase desain.

Bilas dan ulangi sampai Anda, dan klien Anda, merasa nyaman dan puas dengan situs saat ini.

8. Mengupload dan Menguji

Sampai saat ini, Anda akan membangun semuanya secara lokal dan mengunggahnya untuk diuji di server web, ATAU, Anda mungkin telah menggunakan program seperti WAMP untuk menjalankan server lokal.

Jika Anda telah mengunggah semuanya ke server web, Anda sudah selesai! Situs webnya sudah ada di sana.

Jika Anda telah menjalankan semuanya secara lokal dan menggunakan sesuatu seperti localhost untuk menguji situs, Anda sekarang harus mengunggah semuanya ke server web Anda. Setelah selesai, Anda harus menguji semuanya lagi. Basis data MYSQL kemungkinan akan rusak dan perlu diarahkan ulang, juga hal-hal mungkin beroperasi sedikit berbeda di server itu karena alasan apa pun.

Pergi melalui dan pastikan semuanya berfungsi di server.

Setelah selesai, Anda sudah selesai! Selamat, Anda telah membangun dan mengupload halaman web pertama Anda!

-------------------------------------------------- ------------------------------

B) Alat yang Dibutuhkan:

1. Pensil

Pensil atau pulpen, tidak terlalu penting. Anda akan membutuhkan sesuatu untuk melakukan desain konseptual.

2. Kertas

Untuk menggunakan pensil atau pulpen

3. Photoshop (atau alat desain lainnya)

Anda memerlukan sesuatu untuk mengerjakan desain grafis. Photoshop sendiri cukup mahal. Jika itu bukan pilihan untuk Anda, atau jika Anda tidak memiliki akses melalui beberapa sumber daya bersama, lakukan riset dan temukan beberapa alternatif gratis atau murah. Saya tidak akan mengomentari mereka di sini karena saya pribadi menggunakan Photoshop.

4. Dreamweaver (atau alat pengembangan web lainnya)

Ini roti dan mentega Anda. Ini adalah alat yang akan menghabiskan sebagian besar waktu Anda. Ini adalah alat yang memungkinkan Anda untuk benar-benar membangun halaman web, untuk menulis kode, untuk membuat fungsi Anda, untuk mengikat kejeniusan grafis Anda dengan tombol, formulir dan konten dinamis.

Sejujurnya, Dreamweaver sendiri adalah yang paling lengkap dan berdasarkan survei, alat paling populer untuk pekerjaan itu. Jika Anda berencana untuk masuk ke desain dan pengembangan dengan serius, ini sepadan dengan harganya.

Namun, ada alternatif lain jika Anda tidak mampu membelinya. Sekali lagi, lakukan riset dan Anda akan menemukan beberapa alternatif yang lebih murah / gratis yang akan melakukan pekerjaan itu juga.

5. Salinan dari semua browser umum

Saya tidak akan secara khusus merujuk browser yang harus Anda kodekan. Maksud artikel ini adalah agar berlaku lebih dari sekedar beberapa bulan saat artikel ini ditulis.

Meskipun demikian, kunjungi sumber daya WC3 ini untuk mendapatkan daftar browser yang saat ini digunakan dan pangsa pasar internet mereka. Daftar pada hari ini, terlihat seperti ini:

2010 IE8 IE7 IE6 Firefox Chrome Safari Opera

16,2% April 9,3% 7,9% 46,4% 13,6% 3,7% 2,2%

15,3% 10,7% 8,9% 46,2% 12,3% 3,7% 2,2% Maret

Februari 14,7% 11,0% 9,6% 46,5% 11,6% 3,8% 2,1%

Januari 14,3% 11,7% 10,2% 46,3% 10,8% 3,7% 2,2%

Jika saya membangun situs hari ini untuk klien, saya akan memastikan itu kompatibel dengan Firefox, Chrome dan IE 7+. Itu 85% dari pasar. Secara pribadi saya tidak percaya dalam mendesain situs ke belakang untuk mencapai 3 revisi browser belakang (IE 6). Jenis peretasan dan perbaikan yang diperlukan agar situs beroperasi dengan benar sejauh itu tidak sepadan dengan waktu. Tembak 85% dan Anda akan menjadi emas.

6. FileZilla (atau alat FTP lainnya)

Anda memerlukan alat seperti ini untuk mengunggah dan mengunduh file dari server web Anda. Ini akan menjadi tugas yang umum untuk Anda setelah Anda mulai, jadi temukan sesuatu yang Anda sukai dan pertahankan.

7. Nama Domain (alamat www Anda)

Setiap situs membutuhkan nama terdaftar. Saya akan membahas lebih spesifik dalam instruksi tetapi pada dasarnya, Anda pada titik tertentu akan membutuhkan ini sebelum Anda dapat menyelesaikan situs web klien Anda.

8. Host Web (seperti GoDaddy)

Setiap situs membutuhkan ruang fisik di suatu tempat di web. Perusahaan hosting menyediakan ini. Perusahaan seperti GoDaddy menjual Anda ruang di salah satu server mereka tempat Anda dapat memarkir file situs web Anda. Untuk ini, Anda membayar sedikit biaya bulanan.

Secara pribadi saya telah sukses luar biasa dengan GoDaddy, tetapi ada banyak pilihan di luar sana.

9. Komputer

Maaf teman-teman, bukan pilihan. Laptop bekerja dengan baik juga untuk Anda pembuat kode kedai kopi

10. Semangat untuk menjadi kreatif!

Corny, tapi benar. Ini BUKAN bisnis yang dilakukan hanya karena Anda ingin membayar tagihan dan memiliki keterampilan komputer yang baik. Jika Anda tidak benar-benar tertarik, dan tertarik pada pekerjaan yang Anda lakukan, itu akan terlihat dalam desain yang tidak bersemangat, pengkodean yang terburu-buru, dan pekerjaan ceroboh yang Anda lakukan.

Bantulah diri Anda sendiri, tanyakan pada diri Anda pertanyaan ini: "Bisakah saya membangun situs web sebagai hobi dan menikmatinya?" Jika Anda menjawab "ya" maka ini adalah bisnis yang bagus untuk dimasuki.

Subscribe to receive free email updates:

0 Response to "Panduan Pemula untuk Membangun dan Menghosting Halaman Web"

Posting Komentar