Pengembangan & Desain Web 101

web_development_101Ingin tahu dasar-dasar Pengembangan dan Desain Web? Luar biasa …


Tetapi ada masalah dengan garis pemikiran ini, atau beberapa dari mereka sebenarnya …

  • Apa tujuan memiliki situs web? Apakah semua orang benar-benar membutuhkannya??
  • Jika demikian, bagaimana Anda membangun situs web yang berkualitas? Atau dengan kata lain, bagaimana Anda mempelajari pengembangan dan desain web dasar yang memungkinkan Anda membuat situs web berkualitas itu sendiri?
  • Lebih penting lagi, dapatkah Anda membangun situs web berkualitas pada percobaan PERTAMA Anda? Atau apakah Anda membutuhkan pengalaman bertahun-tahun di belakang Anda, sebelum Anda dapat berharap untuk hasil di atas yang mengerikan?

Mari kita jawab semua itu dalam hal ini panduan pemula untuk pengembangan dan desain web.

[Pemberitahuan spoiler. Yap, Anda dapat membangun situs web berkualitas pada percobaan pertama Anda.]

Apa yang Tercakup dalam Panduan Ini?

Oke, hal pertama yang pertama, kami senang Anda terus membaca dan bahwa Anda telah memutuskan untuk mencoba pengembangan web! Begini cara bermainnya:

Bab-bab disajikan dengan cara yang sangat sederhana, dengan konten utama di sebelah kiri, dan item yang dapat ditindaklanjuti di sebelah kanan. Seperti itu:

Panduan pengantar: Bab 1

Sekarang, bagaimana melanjutkan:

  • Saat membaca pertama Anda: Kami sarankan Anda membaca semuanya dari atas ke bawah. Ini akan memberi Anda pandangan 10.000 kaki yang baik dari topik dan membantu Anda memahami bagian paling penting dari itu. Ini juga akan memberi Anda alat dan metode dasar tentang cara menangani tugas individu.
  • Saat membaca tanggal 2 dan selanjutnya: Gunakan TOC dan lompatlah ke bagian yang paling menarik minat Anda. Juga, jangan ragu untuk menggunakan tombol bagikan di sebelah setiap bab, dan kirimkan tautannya ke diri Anda atau ke teman / pengikut Anda yang mungkin tertarik.

Siap? Ayo pergi ke bab 1.

Untuk Siapa Panduan Ini?

Jika Anda ingin mempelajari pengembangan dan desain web dasar, panduan ini cocok untuk Anda. Apa pun motivasi Anda.

Selain itu, Anda tidak memerlukan pengetahuan teknis sebelumnya untuk memulai (selain “keterampilan web” dasar). Inti dari panduan ini adalah menjadi semacam kursus “101” untuk semua orang yang tertarik dalam membangun situs web dan mempelajari pengembangan web.

Berikut adalah beberapa alasan umum mengapa Anda mungkin tertarik:

  • 1. Anda MEMBUTUHKAN situs web untuk bisnis Anda (dan Anda ingin melihat apakah Anda dapat membangunnya sendiri).
  • 2. Anda ingin BELAJAR pengembangan web karena hasrat atau minat sementara (tidak ada hal buruk tentang itu).
  • 3. Anda MEMBUTUHKAN situs web untuk sekolah.
  • 4. Anda MEMBANTU teman atau anggota keluarga untuk membuat situs web mereka online.

Gagasan Utama Yang Akan Membimbing Kami

Ini penting! Dan tolong jangan marah kepada kami jika Anda seorang pengembang web canggih yang membaca ini, tetapi gagasan utama yang akan membimbing kami sepanjang seluruh pengembangan web dan desain 101 sumber daya ini adalah:

“Pendekatan Perlawanan Paling Sedikit”

Berikut adalah tiga prinsip pendekatan resistensi paling:

  • Kita adalah tidak memecah hal-hal pada tingkat molekuler. Yaitu. kami tidak akan membahas cara kerja bahasa pemrograman, atau cara kerja server web.
  • Kita adalah tidak menciptakan kembali roda. Yaitu. jika seseorang telah memecahkan masalah yang diberikan dan membuat solusi tersedia, kami akan menggunakannya.
  • Kita adalah membuat solusi sederhana yang luar biasa, daripada solusi yang rumit dan tampaknya lebih fungsional buggy dan tidak bisa dimengerti.

BAB 1: Rencana

Ide Anda, jenis situs web, nama domain, dan hosting.

Sebelum Membuat Situs Web, Anda Perlu Paket

Ironisnya kedengarannya – acara hit tahun 80-an “The A-Team” telah mengajarkan kita, rencana yang baik adalah kunci kesuksesan.

Jika Anda memiliki situs web yang berada di dalam diri Anda untuk sementara waktu sekarang, maka Anda pasti senang dengan gagasan satu-satunya untuk akhirnya mengeluarkannya agar orang lain membaca dan menjelajah..

Anda ingin situs web Anda menjadi luar biasa. Anda mungkin tahu seperti apa kelihatannya sampai tingkat tertentu. Atau mungkin Anda bahkan sudah memiliki logo yang sempurna.

Tapi…

Ini sama sekali bukan tempat Anda harus memulai. Jika Anda mulai dengan ekspektasi yang telah ditetapkan sebelumnya, ini hanya akan membawa Anda ke banyak kebingungan di sepanjang jalan dan hasil sub-par pada akhirnya.

Alih-alih, pikirkan hal berikut:

  1. Pisahkan diri Anda dari sasaran teknis yang mungkin Anda miliki. Seperti, misalnya, tujuan mempelajari teknologi situs web atau perangkat lunak situs web tertentu.
  2. Tanyakan pada diri Anda satu pertanyaan utama: “Untuk apa aku membutuhkan situs ini?”

Ini bukan tentang Anda, ini tentang tujuan situs.

Pertanyaan yang Perlu Anda Tanyakan pada Diri Sendiri Sebelum Membuat Situs Web Anda

  1. Apa yang ingin dicapai situs ini?
  2. Apa yang akan menjadi “hal” utama yang disajikan melalui situs ini? (mis. bisnis Anda, produk, posting blog Anda, dll.)
  3. Akankah situs web memiliki tujuan khusus? (mis. toko eCommerce, portofolio fotografer, dll.)
  4. Siapa audiens target?
  5. Mengapa mereka tertarik dengan topik situs?
  6. Kesulitan apa yang dipecahkan situs untuk anggota audiens individual?

Tentang 3 pertanyaan terakhir ini, mari kita bicara sebentar …

Ada 2 aturan utama untuk membangun situs web. Ini aturan # 1:

 Pembaca / pengunjung datang terlebih dahulu. Mereka adalah orang utama yang harus menyenangkan situs web Anda.

Di satu sisi, situs web Anda bukan milik Anda. Itu milik mereka.

(Aturan # 2 akan kita bahas sebentar lagi.)

Melupakan pedoman sederhana ini bisa membuat Anda benar-benar salah, bahkan sampai pada titik di mana Anda menemukan diri Anda dengan situs web yang membingungkan bagi semua orang di sekitar tetapi Anda.

“Ugh! Orang-orang tidak mengerti tentang apa situs ini. Bagaimana mereka bisa begitu bodoh ?! ” – Anda akhirnya berpikir. Tapi ternyata, yang bodoh itu adalah kamu.

Satu-satunya cara untuk menghindarinya adalah dengan membangun situs web Anda dengan mengingat pembaca sejak awal.

Jadi … ambil kertas itu, dan jawab semua pertanyaan di atas.

Setelah selesai, Anda memiliki serangkaian pedoman utama yang akan ditindaklanjuti saat bekerja di situs web Anda.

Jawaban-jawaban itu akan menjadi alat yang sangat kuat saat Anda melanjutkan. Anda akan dapat kembali kepada mereka setiap kali Anda dihadapkan dengan keputusan mengenai situs web Anda.

Haruskah Anda melakukan * ini * atau * itu *? Buka lembar jawaban dan cari tahu. Haruskah Anda menggunakan sidebar lebar atau sempit? Buka jawaban, cari tahu mana yang lebih beresonansi dengan pembaca target. Dan sebagainya.

Nama Domain dan Hosting Web

Jika Anda ingin menjadi pemilik situs web, Anda memerlukan nama domain dan host web.

Baiklah, oke, secara teknis, Anda dapat membangun situs web pengujian semua di komputer Anda sendiri dan kemudian menjalankannya dari server web lokal (juga diinstal sebagai perangkat lunak pada komputer Anda), tetapi itu tidak akan menjadi solusi yang dapat digunakan untuk 99% dari kasus, jadi mari kita lewati saja.

Jadi, host dan domain …

Kabar buruknya di sini adalah bahwa keduanya membutuhkan biaya.

Berita baiknya … tidak begitu banyak uang dalam skema besar ini. Selain itu, saat Anda belajar, Anda bahkan dapat meluncurkan beberapa situs web kecil dengan satu nama domain dan di bawah satu host web.

Tapi mari kita mulai dari awal.

Host web:

  • Secara sederhana, host web adalah tempat situs web Anda berada, dan di mana pengunjung Anda dapat menemukannya. Di satu sisi, host web untuk situs web sama seperti apartemen untuk manusia. Di bawah tenda, host web adalah perusahaan yang menyewakan server mereka dengan imbalan uang (… apartemen kecil untuk situs web Anda).
  • Untuk memulai, rencana hosting bersama standar akan dilakukan. Anda bisa mendapatkannya dengan harga mulai dari $ 3 / bulan. Inilah perbandingan bagus dari host web populer. Lihat dan tentukan perusahaan mana yang tampaknya tepat untuk Anda. Namun, rekomendasi kami berlaku untuk SiteGround, A2 Hosting, dan Dreamhost.

Domain:

  • Jika host web adalah apartemen, maka domain adalah alamat apartemen itu. Misalnya, domain situs web ini adalah hostingfacts.com.
  • Cara untuk memulai adalah dengan memilih nama domain yang Anda inginkan dan kemudian membelinya dari registrar. Berikut ini panduan komprehensif tentang cara membeli nama domain, dan di sini daftar generator nama domain.

 

Saran dan Kiat untuk Memilih Nama Domain

Oke, jadi pergi ke beberapa pendaftar domain dan benar-benar membeli domain adalah satu hal, tetapi bagaimana Anda memilih nama domain yang tepat?

Ada beberapa sekolah:

  • Nama domain bermerek. Itu adalah domain yang terdiri dari kata-kata yang tidak ada. Pikirkan, hal-hal seperti Google.com, atau Yahoo.com. Sebelum perusahaan itu datang, kata-kata itu tidak berarti apa-apa. Kelebihan dari nama domain bermerek adalah bahwa itu … yah, sangat bermerek, mudah diingat, dan mudah untuk membedakan situs Anda dari yang lain.
  • Nama berbasis kata kunci. Itu terdiri dari kata-kata yang ada, dimasukkan dalam urutan yang menggambarkan tujuan situs. Pikirkan, hal-hal seperti Pizza.com, atau StartBloggingOnline.com. Dengan nama domain seperti itu, pengunjung Anda akan dapat secara akurat memprediksi jenis situs web yang baru saja mereka kunjungi. Kelemahannya adalah bahwa domain tersebut umumnya kurang bermerek.
  • Nama gabungan. Itu adalah domain bermerek dan domain berbasis kata kunci disatukan. Pikirkan, Facebook.com, atau Copyblogger.com. Nama-nama seperti itu menyarankan “sebagian” bagian dari sifat situs web kepada pengunjung, tetapi mereka masih sangat bermerek.

Beberapa pedoman umum terlepas dari jenis domain yang Anda pilih:

  • Jadikan domain mudah diingat.
  • Buat itu singkat dan sederhana. Semakin lama domain, semakin membingungkan.
  • Dapatkan .com (jika mungkin). .Com adalah “domain tingkat atas” utama yang tersedia. Jangan puas dengan hal lain.
  • Cobalah untuk menghindari tanda hubung. Dapatkan nama Anda dalam bentuk gumpalan tunggal seperti “cakerecipes.com”, bukan “cake-recipes.com”

Hal-hal yang harus siap setelah bab ini:

  • Nama domain.
  • Host web.
  • Lembar jawaban Anda – tujuan situs Anda dan bagaimana ia akan melayani audiens.

butuh lebih banyak bantuan? Berikut bacaan lebih lanjut untuk Anda:

  • Mengapa berbagi hosting? Jenis host utama dibandingkan
  • 10 hal yang menjadikan web host bagus
  • 12 aturan untuk memilih nama domain yang tepat
  • Panduan perencanaan situs web yang komprehensif

BAB 2: Desain dan Wireframing

Ambil kertas dan pena dan goreskan bersama-sama dengan struktur situs web Anda

Oke, mari kita memasuki tahap desain.

Hal pertama yang pertama, inilah etos kerja yang akan kita tuju di sini:

  • Kami menggunakan pena dan kertas selama kami bisa, dan hanya kemudian beralih ke komputer. Percayalah kepada kami, setiap menit yang dihabiskan untuk mengerjakan desain Anda di atas kertas adalah satu jam yang dihemat begitu Anda mulai menyetel sesuatu di komputer.
  • Kami melakukan pekerjaan berulang-ulang … Kami melakukan »memeriksa hasil» meningkatkan »memeriksa hasil» ulangi sampai selesai.

Dalam bab 1, kami menyebutkan sesuatu yang kami sebut aturan # 1 dari pembangunan situs web. Sekarang saatnya untuk aturan # 2:

Peraturan # 2 pembangunan situs web:

Pikirkan konten terlebih dahulu.

Konten adalah hal yang penting di situs web. Bukan desain. Kandungan.

Orang-orang datang untuk mencari konten. Mereka tidak datang untuk desain. Desainnya hanya kendaraan untuk mengirimkan konten.

Jangan pernah mulai dengan tampilan situs web Anda. Mulai dengan konten. Kandungan. Kandungan. Kandungan.

Jadi apa yang kita maksud dengan “konten”? Singkatnya, itulah hal yang ingin orang dapatkan dari situs web Anda. Posting blog, produk di toko, utas forum jika Anda membangun forum, artikel berita, tawaran bisnis Anda, dan sebagainya.

“Betulkah? Terlihat benar-benar tidak masalah? ” – Anda bertanya.

Alih-alih kami mengalahkan ini, periksa halaman ini:

Situs web sederhana

Halaman web yang sederhana ini sejauh ini merupakan penjelasan terbaik tentang apa desain itu dan apa tujuannya melayani online.

Jadi ingat, konten dulu!

Konten dan Struktur Situs Web

Oke, jadi karena konten adalah hal yang paling penting, Anda perlu (sebagian besar) siap terlebih dahulu. Atau setidaknya, Anda harus memiliki gagasan yang bagus tentang berapa banyak konten yang akan ada dan dalam bentuk apa.

Catatan. Kita tahu bahwa bagian ini bisa jadi sulit. Memulai dengan konten tampaknya sangat tidak wajar untuk desain situs web, tetapi sebenarnya ini adalah cara terbaik untuk mendapatkan hasil yang luar biasa pada akhirnya. Jadi pikirkan tentang konten yang ingin Anda bagikan dengan pembaca, dan bagaimana Anda ingin menyajikannya.

Langkah selanjutnya adalah memilih masing-masing jenis halaman yang akan Anda butuhkan (seperti beranda, halaman produk, halaman kategori, halaman tentang, halaman kontak, halaman penjualan utama, beberapa halaman arahan berlangganan newsletter, daftar blog utama, posting individu, toko mungkin, dan apa pun yang tampaknya diperlukan).

Pikirkan, apa cara paling efektif untuk mengatur konten Anda di situs web?

Lakukan semua ini di atas kertas. Mungkin akan lebih mudah dan lebih cepat bagi Anda daripada mempelajari beberapa perangkat lunak menggambar grafik di tempat.

Contoh:

struktur konten

Gores Bersama Wireframe

Bingkai gambar dalam desain web hanyalah skema halaman atau cetak biru – panduan visual yang mewakili kerangka kerja situs web (Wikipedia memberi tahu kami).

Wireframes luar biasa! Kami menggunakannya untuk sebagian besar hal yang kami lakukan yang dimaksudkan untuk tampil online. Misalnya, inilah bingkai gambar untuk panduan ini:

Gosok bersama wireframe

Seperti yang Anda lihat, sekali lagi, itu ada di atas kertas. Meskipun ada beberapa aplikasi untuk pekerjaan semacam ini, kami sebenarnya tidak menyarankan untuk menggunakannya. Mereka mungkin bagus untuk desainer pro, tetapi seorang pemula atau orang menengah hanya akan kehilangan waktu untuk mempelajarinya, dan pada akhirnya, mereka tidak akan mendapatkan banyak peningkatan atas apa yang akan mereka capai melalui pena dan kertas.

Jadi, bagaimana wireframe?

Nah, ada dua pendekatan jika Anda seorang pemula:

  • Ikuti arus jika Anda merasa kuat, dan tarik saja (tidak selalu solusi sempurna).
  • Dapatkan pengetahuan singkat tentang cara memasang rangka dengan benar (biasanya lebih baik).

Untuk yang terakhir, buka di sini – panduan hebat.

(Pastikan untuk membuat bingkai gambar dari setiap jenis halaman penting yang telah Anda daftarkan pada langkah sebelumnya.)

Hal-hal yang harus siap setelah bab ini:

  • Sebagian besar konten untuk situs, atau setidaknya sebagian besar diprediksi (misalnya, jika Anda mengandalkan konten yang dibuat pengguna, maka sulit untuk memilikinya sebelumnya).
  • Struktur konten situs web Anda disiapkan sebagai grafik.
  • Gambar rangka dari masing-masing jenis halaman yang akan Anda butuhkan.

Bacaan lebih lanjut:

  • 9 langkah untuk merencanakan konten situs web
  • Baru mengenal desain web? Mulai di sini.

BAB 3: UX dan UI

Jangan pernah meremehkan pentingnya pengalaman pengguna dan antarmuka pengguna

Seperti dalam, Pengalaman Pengguna dan Antarmuka Pengguna.

WebDesignerDepot memberi kita definisi yang agak puitis dari keduanya:

UI adalah pelana, sanggurdi, dan pemerintahan.

UX adalah perasaan Anda bisa menunggang kuda, dan mengikat ternak Anda.

Untuk definisi yang lebih praktis:

  • UI adalah apa yang dilihat pengguna ketika mereka melihat situs Anda.
  • UX adalah bagaimana perasaan mereka tentang hal itu.

Pasangan ini, dan seberapa baik dieksekusi, pada dasarnya mendefinisikan kegunaan situs web Anda untuk pengguna akhir / pengunjung.

Baik desain UX dan UI adalah topik besar dalam dirinya sendiri, dan ada banyak elemen kecil yang berperan dalam hasil akhir.

Singkatnya, ada banyak hal yang perlu dipelajari jika Anda baru memulai perjalanan.

Jadi, alih-alih kami mencoba untuk meringkas seluruh kursus desain UX dan UI di sini, mari kita tunjukkan beberapa elemen penting, dan kemudian mengirim Anda ke tempat lain untuk membaca lebih lanjut..

Tujuan Pengguna

UX adalah tentang tujuan pengguna … Tidak sebanyak tujuan Anda … Tujuan pengguna.

Oke, apa artinya ini? Pertama-tama, kembali ke tujuan situs web Anda – hal yang Anda kerjakan di bab-bab sebelumnya. Alasan mengapa Anda membangun situs web dan bagaimana hal itu membantu pengguna / pengunjung.

Bagaimana cara menerjemahkannya ke dalam tujuan pengunjung? … Apa satu hal yang pengunjung ingin dapatkan atau capai ketika mereka datang ke situs Anda? Itu tujuan mereka.

Seberapa Mudah Tujuan Itu untuk Dicapai?

Selanjutnya, fokus pada pertanyaan berikut:

  • Bisakah pengunjung mencapai tujuannya dengan mudah? – Bisakah mereka mendapatkan informasi yang tepat dengan cara yang sederhana?

Untuk menjawab ini, Anda harus kembali ke bingkai gambar Anda, struktur konten Anda, dan periksa ulang hal-hal.

Pastikan bahwa struktur konten dan halaman yang Anda pikirkan masuk akal dari sudut pandang pengguna. Pastikan bahwa mereka dapat bernavigasi di antara halaman-halaman penting secara bebas dan dengan cara yang tidak membingungkan.

Pada dasarnya, di sini, kami memastikan bahwa situs web memberikan nilai kepada pengunjung Anda.

Sulit untuk memikirkan ini semua sendirian, bukan begitu?

Sangat disarankan Anda memeriksa sumber daya yang tercantum di bagian “bacaan lebih lanjut” dari bab ini … tetapi Anda juga dapat mencoba “peretasan,” jadi untuk berbicara.

Yaitu, pikirkan apa yang membuat Anda frustrasi ketika Anda mengunjungi situs web yang mirip dengan yang ingin Anda buat? Mungkin ada beberapa informasi yang benar-benar sulit didapat atau elemen antarmuka yang membuat situs ini membingungkan.

Buat catatan, buat kesimpulan, jangan membuat kesalahan yang sama dengan situs web Anda.

Menggunakan Emosi sebagai Alat

Saat bekerja di UI dan UX situs Anda, apa yang pada dasarnya Anda tuju adalah memunculkan emosi tertentu pada pengunjung Anda.

Anda ingin mereka merasakan cara tertentu, yang kemudian akan meyakinkan mereka untuk bertindak dengan cara tertentu. Dengan demikian, menjadikan situs web Anda benar-benar bermanfaat.

Untuk mengerjakan bagian emosional pekerjaan, salah satu alat terbaik adalah warna.

Warna memiliki arti berbeda dalam budaya yang berbeda. Memahami perbedaan-perbedaan itu dapat membuat pekerjaan Anda jauh lebih mudah. Ini lembar contekan yang bagus.

Setelah Anda berada di stadion baseball warna apa yang ingin Anda (mungkin) gunakan, berikut adalah beberapa panduan umum ketika bekerja dengan warna:

  • Pilih satu skema warna utama yang terdiri dari beberapa warna yang cocok bersama. Ini generator skema warna yang bagus.
  • Pilih satu warna yang akan menjadi warna aksen Anda – warna yang akan digunakan untuk tombol aksi, tombol beli, dan lain-lain. Pada dasarnya, apa pun yang membutuhkan perhatian pengguna.

Tipografi

Dalam banyak kasus, tipografi adalah tempat Anda memenangkan (atau kalah) permainan pembuatan situs web.

Sangat mudah untuk melupakan tipografi sepenuhnya dan hanya menggunakan Arial untuk semuanya.

Tidak direkomendasikan.

Saat ini, bekerja dengan font khusus sangatlah mudah, dan Anda bahkan tidak perlu melakukan apa pun teknis untuk mengaktifkan font khusus tersebut di situs Anda.

Besar, tipografi besar sangat populer saat ini, dan juga membuat karya desainer – terutama karya desainer pemula – jauh lebih mudah.

Lihat situs ini, misalnya:

bonobo

Melihat sesuatu? Yap, font-nya sangat besar, dan mereka terlihat hebat!

Berikut cara mengatasi hal ini:

  • Secara umum, setiap desain situs web membutuhkan dua jenis teks: heading dan paragraf. Dalam kebanyakan kasus, hanya satu font per masing-masing akan dilakukan.
  • Buka Google Fonts – perpustakaan Google sendiri dari font gratis yang dapat Anda gunakan di situs web Anda – dan cari font judul yang benar-benar Anda sukai.
  • Lalu, ambil nama font itu, dan cari di Font Pair – itu adalah perpustakaan pasangan font pre-made yang cocok bersama.
  • Pilih pasangan yang terlihat keren.
  • Catat nama kedua font, Anda akan membutuhkannya nanti.

Melakukannya dengan cara ini akan mempercepat proses Anda dan tetap memberi Anda hasil yang bagus.

Contoh, kami menemukan font yang disebut Bree Serif di Google Font yang cukup kami nikmati:

Bree-Serif

Kemudian, kami membawanya ke Font Pair, dan situs menyarankan agar Bree Serif berjalan baik dengan Open Sans. Sempurna:

Bree-Serif-open-sans

Struktur Terakhir

Akhirnya, langkah terakhir!

Inti dari bab ini adalah untuk mendarat di tata letak / struktur akhir yang akan Anda gunakan untuk situs Anda. Pada titik ini, Anda harus yakin tentang hal-hal yang ingin Anda lakukan dengan desain dan UI Anda.

Hal-hal yang harus siap setelah bab ini:

  • Sasaran pengguna Anda tercantum dengan jelas.
  • Bingkai gambar Anda diperiksa ulang untuk memastikan bahwa tujuan tersebut tidak membingungkan.
  • Skema warna dipilih.
  • Tipografinya menemukan.
  • Seluruh tata letak / struktur / organisasi situs web Anda.

Bacaan lebih lanjut: 

  • Majalah UX
  • Stan UX
  • Psikologi dan emosi di balik warna dalam desain web
  • Apa desain pengalaman pengguna? Tinjauan umum, alat, dan sumber daya
  • Menetapkan sasaran bisnis yang cerdas untuk situs web
  • 8 aturan untuk membuat tipografi yang efektif

BAB 4: WordPress, HTML atau Templat?

Tentukan rute mana yang harus ditempuh – sistem manajemen konten atau kode dari awal

Di sinilah pekerjaan nyata, kotor, di bawah kap dimulai!

Ini mungkin juga bagian paling menakutkan dari proses (akui saja!).

Untuk sekali, ini waktu yang tepat untuk menyisihkan pena dan kertas dan mulai bekerja dengan beberapa perangkat lunak.

Dan di luar gerbang, ada banyak pertanyaan …

  • Haruskah saya belajar HTML?
  • Bagaimana dengan CSS?
  • Akankah templat situs web HTML yang siap pakai membantu saya?
  • Apakah saya perlu belajar bahasa pemrograman seperti PHP?
  • Saya pernah mendengar WordPress adalah cara untuk membangun situs hari ini.
  • Saya melihat iklan Super Bowl Squarespace. Ada apa dengan itu?
  • Apa yang disebut Joomla ini? Atau Drupal?
  • dan terus dan terus.

Jawaban untuk semua itu adalah ya.

Seperti dalam, ya, Anda dapat melakukan salah satu atau semua hal itu, dan hanya Anda yang menentukan jalan mana yang harus dipilih.

Yang ingin kami katakan adalah bahwa tidak ada pendekatan terbaik nomor 1 di sini. Itu semua tergantung pada seberapa terlibat Anda ingin mendapatkan dengan pengembangan web, seberapa banyak dasar-dasar membangun situs web yang ingin Anda pelajari, seberapa cepat Anda memerlukan situs berkualitas, dan seberapa disesuaikan Anda ingin setelahnya.

Jadi, inilah cara kita akan melanjutkan dari bab ini ke depan. Pertama, pilih persona yang paling menentukan Anda:

  • Sebuah) Saya ingin mempelajari tentang pengembangan web, semua dasar-dasarnya, semua cara kerja dalam situs web, dan semua mekanisme yang membuat situs web berfungsi..
  • b) Saya ingin belajar cara menggunakan pembuat situs web yang andal yang akan menangani sebagian besar pekerjaan berat bagi saya.
  • c) Saya tidak tahu harus berbuat apa. Saya hanya ingin situs web yang dapat saya bangun sendiri dan itu akan berfungsi dengan baik.

Dijawab a)? Pergi ke Bab 5.

Dijawab b)? Pergi ke Bab 6.

Dijawab c)? Jangan ragu untuk membaca artikel ini dan kemudian kembali (ini akan membantu Anda memilih jalan yang sempurna):

  • 8 platform blogging dan pembuatan situs web terbaik ditinjau … Setiap platform dijelaskan bersama dengan pro dan kontra, dan sumber daya juga menyarankan pilihan terbaik yang tersedia (Wix atau SB) untuk kebutuhan spesifik Anda.

Sudahkah Anda membacanya? Bagus! Jadi, siapa di antara personas di atas yang paling menggambarkan Anda – a) atau b)?

Alat yang mungkin berguna di sepanjang jalan:

  • Grafik: Paint.NET, Gimp, Pixlr.
  • Penulisan kode: Notepad ++, TextWrangler, SublimeText.
  • Manajemen kerja: Trello.
  • Desain: skema warna, Google Font, alat-alat dari sini.
  • Fotografi: Unsplash, AllTheFreeStock

BAB 5: Pengantar HTML, CSS & Javascript

Bagaimana situs web adalah realitas bawaan

Dalam bab ini, kami akan menunjukkan dasar-dasar telanjang pengembangan web, menjelaskan istilah-istilah yang paling penting, dan kemudian mengirim Anda ke beberapa sumber daya tertentu di mana Anda dapat meningkatkan pengetahuan dan keterampilan Anda.

HTML

HTML adalah bahasa situs web. Setiap halaman web dibangun atau dikonversi ke HTML di beberapa titik.

Misalnya, untuk melihat struktur HTML panduan ini yang Anda baca di sini, cukup tekan “Ctrl + U” di keyboard Anda.

HTML mendefinisikan setiap blok yang Anda lihat di halaman web. Pada akhirnya, untuk menampilkan apa pun di halaman web, itu perlu dikonversi ke HTML.

Untuk mempelajari HTML secara efektif, kami menyarankan Anda untuk mendaftar ke salah satu kursus (gratis atau berbayar) yang tersedia di web. Beberapa yang terbaik dapat ditemukan di Codeacademy atau Treehouse.

Misalnya, inilah bagian spesifik tentang Codeacademy tentang HTML dan CSS.

Beranda CodeCademy

Jadi itulah pendekatan komprehensif untuk HTML.

CSS

CSS – untuk melewati detail teknis yang membosankan – bertanggung jawab untuk menata segala sesuatu yang terlihat di laman web.

CSS mengambil tag HTML dan kemudian menyusun dan menambahkan gaya padanya. Hal-hal seperti: teks tebal, penyesuaian warna, bayangan, tata letak, bahkan animasi, sekarang dilakukan terutama dengan CSS.

Untuk pemahaman yang lebih baik tentang bagaimana ini sebenarnya bekerja, naiklah ke kursus cepat ini di Codeacademy.

Untuk pembelajaran lebih mendalam, periksa juga bagian CSS di Codeacademy atau Treehouse.

JavaScript, jQuery, Bootstrap, dll.

JavaScript adalah bahasa pemrograman yang memungkinkan Anda memperkenalkan beberapa tindakan dinamis di situs web Anda. Misalnya, Anda dapat melakukan hal-hal seperti memvalidasi formulir web atau berinteraksi dengan pengguna dengan cara yang lebih ramping tanpa harus memuat ulang halaman tempat mereka berada. Ini tutorial yang bagus dari w3schools.

Dengan mengingat hal itu, jQuery adalah pustaka JavaScript yang memungkinkan Anda membuat hal-hal canggih dengan lebih sedikit pengkodean. Sangat berguna untuk pengembang web. Pelajari lebih lanjut di sini.

Akhirnya, Bootstrap adalah penemuan yang sangat menarik. Awalnya diperkenalkan oleh Twitter, ini pada dasarnya merupakan lingkungan front-end yang mempercepat proses membangun situs web dengan memberikan sebagian besar elemen situs umum yang sudah dibuat sebelumnya. Kedengarannya rumit, bukan begitu?

Tetapi tidak. Lihat saja kursus pemula ini di Codeacademy (omong-omong, beginilah awalnya kami belajar Bootstrap).

Hal-hal yang harus siap setelah bab ini:

  • Pada dasarnya, konsep pertama dari situs web HTML / CSS Anda sepenuhnya dibangun. Dari sana, Anda dapat mulai mengulang dan meningkatkan hasil akhir.

BAB 6: Platform Pembuatan Situs Web

Menyiapkan situs pertama Anda? Coba platform situs web gratis seperti WordPress, Joomla atau Drupal

Bab 6: Platform Pembuatan Situs Web

  • SquareSpace
  • WordPress
  • Joomla & Drupal

Ada lebih banyak pembangun situs web di luar sana daripada yang bisa Anda goyang. (Jika Anda adalah tipe orang yang gemar melakukan sesuatu.)

Oke, bercanda samping.

Jelas, jika Anda tidak memiliki keinginan untuk mempelajari cara membuat kode dengan tangan, mereka pasti adalah beberapa solusi yang dapat membantu Anda.

Catatan. Harap diingat bahwa segala sesuatu yang kita bahas dalam bab 1-4 masih berlaku di sini. Bahkan jika Anda pergi dengan solusi pembangunan-situs yang agak mudah, Anda masih perlu berhati-hati untuk membuat produk akhir ramah bagi pengguna dan selaras dengan tujuan semua orang. Alat-alat pembangunan situs itu persis seperti itu … alat.

Dimulai dengan yang paling mudah dipahami:

SquareSpace

Satu-satunya platform situs web yang mengiklankan selama Super Bowl.

Singkatnya, solusi yang sangat berguna yang dapat digunakan oleh siapa saja. Tidak diperlukan keterampilan sebelumnya.

Ini memungkinkan Anda untuk membangun situs web klasik, blog, bahkan toko eCommerce yang bahkan kami tulis ulasan tentang mereka. Antarmuka dan seluruh proses penggunaannya cukup mudah untuk dipahami, plus orang-orang Squarespace menyediakan banyak tutorial menarik. Lihat di sini.

WordPress

Jujur, kami suka WordPress.

Biasanya, ini adalah platform yang sempurna untuk membangun situs web. Ia memiliki keseimbangan sempurna antara kerumitan dan kemudahan penggunaan, dan pada dasarnya dapat disesuaikan tanpa akhir.

Animasi WordPress

Selain itu, saat ini merupakan platform situs web paling populer dari semuanya. Sebagaimana dibagikan oleh pencipta WordPress – Matt Mullenweg – WordPress sekarang memberi daya 25% dari seluruh internet. Bisakah semua orang itu salah?

Oke, jadi untuk memulai dengan WordPress Anda pada dasarnya hanya membutuhkan domain dan hosting Anda. Perangkat lunak WordPress itu sendiri sepenuhnya gratis.

Untuk memulai, jangan ragu untuk mengikuti salah satu jalan ini:

a) “Jalur mulai cepat”

  • Buka di sini untuk mempelajari cara sederhana menginstal WordPress dan meluncurkan situs Anda dalam satu sore.
  • Pilih tema gratis dari direktori resmi – pastikan tema tersebut sesuai dengan tujuan situs Anda, dan tata letak / desainnya tidak jauh dari struktur yang Anda inginkan (Anda akan sedikit menyesuaikannya).
    • Periksa kedua sumber ini untuk mempelajari cara menyesuaikan tema yang ada.
    • Sebagai alternatif, Anda dapat memilih tema premium multiguna yang dapat disesuaikan melalui antarmuka pengguna yang praktis (tidak melibatkan coding). Tema X adalah contoh yang bagus untuk hal semacam itu.
  • Instal beberapa plugin paling populer dan terbaik untuk mendapatkan fitur tambahan.

b) “Jalur yang dalam”

  • Mulailah dengan mempelajari WordPress melalui kursus online. Treehouse menawarkan yang luar biasa.
  • Pilih tema dan plugin Anda seperti di atas. Secara bergantian, bangun tema Anda sendiri dari bawah ke atas.

Pada akhirnya, WordPress mungkin adalah platform situs web yang paling serbaguna di pasar. Dengannya, Anda dapat membangun hampir semua jenis situs web, tidak hanya blog atau situs bisnis sederhana. Berikut daftar 47 (!) Cara berbeda untuk menggunakan WordPress, hanya untuk membuat Anda berpikir.

Joomla dan Drupal

Meskipun sedikit berbeda satu sama lain, Joomla dan Drupal keduanya adalah sistem manajemen konten yang sangat baik untuk proyek web yang lebih maju.

Mereka tidak sekuat desain-bijaksana, tetapi mereka sangat dapat disesuaikan dan mampu menangani segala jenis situs web yang mungkin Anda miliki dalam rencana.

Terkadang, tergantung pada kerumitan proyek Anda, mereka mungkin membutuhkan lebih banyak waktu untuk dikuasai dan lebih banyak upaya untuk itu.

Untuk pelatihan yang lebih mendalam, ada kursus luar biasa di Lynda.com, baik untuk Joomla dan Drupal.

Hal-hal yang harus siap setelah bab ini:

  • Draf pertama situs web Anda sepenuhnya dibuat, tidak masalah jika Anda memutuskan untuk menggunakan WordPress atau platform lain.
  • Pastikan itu sesuai dengan tujuan awal Anda, target audiens, dan memberikan UX yang baik.

BAB 7: Desain Responsif Seluler

Lebih dari 60% orang menggunakan ponsel dan tablet untuk menjelajahi web

Responsif seluler sekarang menjadi aspek yang sangat penting dalam pembuatan situs web, mungkin lebih dari sebelumnya.

Inilah masalah keseluruhannya:

Pada dasarnya, saat ini, ada lebih banyak orang yang menggunakan perangkat seluler untuk mengakses web daripada sebelumnya. Faktanya, diperkirakan bahwa sekarang ada lebih banyak pengguna internet seluler daripada pengguna internet desktop (75,1% vs 52,7%).

Tapi ada masalah.

Tidak semua desain situs web akan dioptimalkan untuk dilihat di perangkat seluler.

Beberapa masalah umum termasuk:

  • font terlalu kecil,
  • tata letak itu sendiri tidak menyesuaikan sama sekali ke layar yang lebih kecil,
  • atau teknologi yang digunakan untuk membangun situs yang tidak tersedia di seluler.

Di sinilah ide responsif seluler mulai berlaku.

Situs web responsif merespons lingkungan yang dilihatnya. Jika ini komputer desktop, situs web merender dengan cara tertentu. Jika ini adalah ponsel, itu dirender dengan cara lain.

Berikut penjelasan yang lebih baik: What The Heck Is Responsive Web Design?

Jadi yang harus dilakukan sekarang adalah memeriksa dan memastikan bahwa situs web Anda berfungsi pada perangkat seluler. Gunakan perangkat Anda sendiri untuk memeriksa ini, tetapi juga mencoba tes seluler Google, atau melompat ke alat seperti Penguji Desain Responsif.

Jika ada masalah, Anda harus memperbaikinya.

Beberapa solusi:

  • Desain Web Responsif – caranya
  • Cara Membuat Website Responsif Dalam Sekitar 15 Menit

BAB 8: Menyatukan semuanya

Anda tahu dasar-dasarnya, sekarang giliran Anda

Tunggu sebentar, kita hampir sampai!

Ini adalah bab terakhir dari perjalanan kami yang cukup panjang.

Pada titik ini, Anda harus membuat situs web pertama Anda … Baik itu dengan WordPress, HTML / CSS buatan tangan, beberapa pembuat situs web, atau alat apa pun yang Anda pilih untuk pekerjaan itu.

Singkatnya, selamat! Tetapi masih ada beberapa hal yang patut dilakukan:

  • Periksa kembali hal-hal yang telah kita bahas dalam bab 1 dan 2. Pastikan bahwa tujuan memang bekerja untuk pengguna akhir, dan bahwa situs web tidak membingungkan.
  • Validasi struktur kode Anda melalui layanan validasi markup W3C.
  • Periksa apakah tidak ada masalah keamanan dengan situs ini. Gunakan pemindai oleh Sucuri untuk itu.
  • Dapatkan umpan balik dari komunitas. Periksa pendapat orang lain tentang pekerjaan Anda. Forum-forum yang ada di Sitepoint bisa bagus untuk itu.

Jika itu adalah bacaan pertama Anda tentang sumber ini, maka kami sangat menyarankan Anda untuk kembali ke sana beberapa kali dan memperlakukannya sebagai file referensi untuk pendidikan Anda selanjutnya.

Seperti yang kami katakan di awal, jangan ragu untuk menggunakan TOC dan menavigasi dari bab ke bab dan sumber daya ke sumber daya sesuai keinginan Anda.

Terakhir, kami ingin tahu … apa tantangan terbesar Anda dalam hal membangun situs web, pengembangan atau desain web? Silakan bagikan dalam komentar atau melalui Twitter. Kita semua punya telinga!

Terima kasih telah membaca, Anda luar biasa!

  • Total116
  • Facebook116
  • Twitter0
Jeffrey Wilson Administrator
Sorry! The Author has not filled his profile.
follow me
    Like this post? Please share to your friends:
    Adblock
    detector
    map