Pembangunan & Reka Bentuk Web 101

web_pembangunan_101Ingin mengetahui asas-asas Pembangunan dan Reka Bentuk Web? Hebat …


Tetapi ada masalah dengan pemikiran ini, atau sebilangannya sebenarnya …

  • Apa tujuan memiliki laman web? Adakah semua orang memerlukan satu?
  • Sekiranya demikian, bagaimana anda membina laman web yang berkualiti? Atau dengan kata lain, bagaimana anda mempelajari pembangunan dan reka bentuk web asas yang membolehkan anda membina laman web berkualiti itu sendiri?
  • Lebih penting lagi, bolehkah anda membina laman web berkualiti pada percubaan PERTAMA anda? Atau adakah anda memerlukan pengalaman bertahun-tahun di belakang anda, sebelum anda dapat mengharapkan hasil di atas yang mengerikan?

Mari jawab semua itu dalam ini panduan pemula untuk pembangunan dan reka bentuk web.

[Makluman spoiler. Ya, anda boleh membina laman web berkualiti pada percubaan pertama anda.]

Perkara yang Diliputi dalam Panduan ini?

Baiklah, pertama-tama, kami gembira anda terus membaca dan anda telah memutuskan untuk mencuba pengembangan web! Beginilah kaedahnya:

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

Pengenalan panduan: Bab 1

Sekarang, bagaimana untuk meneruskan:

  • Semasa membaca pertama anda: Kami mengesyorkan anda membaca keseluruhannya dari atas ke bawah. Ini akan memberi anda pandangan yang baik tentang topik sejauh 10.000 kaki dan membantu anda memahami bahagian yang paling penting daripadanya. Ini juga akan memberi anda alat dan kaedah asas mengenai bagaimana menangani tugas individu.
  • Semasa pada bacaan ke-2 anda dan seterusnya: Gunakan TOC dan pergi ke bahagian yang paling menarik minat anda. Jangan ragu untuk menggunakan butang kongsi di sebelah setiap bab, dan hantarkan pautan kepada diri sendiri atau rakan / pengikut anda yang mungkin berminat.

Sedia? Mari kita pergi ke bab 1.

Panduan Ini Untuk Siapa?

Sekiranya anda ingin mempelajari pembangunan dan reka bentuk web asas, panduan ini sesuai untuk anda. Apa pun motivasi anda.

Anda juga tidak memerlukan pengetahuan teknikal sebelumnya untuk memulakan (selain “kemahiran web” asas). Inti keseluruhan panduan ini adalah menjadi semacam kursus “101” untuk semua orang yang berminat membina laman web dan mempelajari pengembangan web.

Berikut adalah beberapa sebab biasa mengapa anda mungkin berminat:

  • 1. Anda MEMERLUKAN laman web untuk perniagaan anda (dan anda ingin melihat sama ada anda boleh membinanya sendiri).
  • 2. Anda ingin BELAJAR pembangunan web kerana minat atau minat sementara (tidak ada yang buruk tentang itu).
  • 3. Anda PERLU laman web untuk sekolah.
  • 4. Anda MEMBANTU rakan atau ahli keluarga untuk mendapatkan laman web mereka dalam talian.

Idea Utama Yang Akan Membimbing Kami

Ini sangat penting! Dan jangan marah kepada kami jika anda seorang pembangun web yang maju yang membaca ini, tetapi idea utama yang akan membimbing kami sepanjang keseluruhan pengembangan web dan reka bentuk 101 ini adalah:

“Pendekatan Perlawanan Paling Tidak”

Berikut adalah tiga prinsip pendekatan rintangan paling sedikit:

  • Kami sudah tidak memecahkan sesuatu pada tahap molekul. I.E. kita tidak akan sampai ke bawah bagaimana bahasa pengaturcaraan berfungsi, atau bagaimana pelayan web berfungsi.
  • Kami sudah tidak mencipta semula roda. I.E. jika seseorang telah menyelesaikan masalah tertentu dan menyediakan penyelesaiannya, kami akan menggunakannya.
  • Kami sudah menjadikan penyelesaian mudah yang hebat, daripada penyelesaian yang rumit dan nampaknya lebih berfungsi dan tidak dapat difahami.

BAB 1: Rancangan

Idea anda, jenis laman web, nama domain, dan hosting.

Sebelum Anda Menyiapkan Laman Web, Anda Perlu Pelan

Ironisnya seperti yang terdengar – pertunjukan hit tahun 80-an “The A-Team” telah mengajar kami, rancangan yang baik adalah kunci kejayaan.

Sekiranya anda mempunyai laman web untuk sementara waktu, maka anda pasti teruja dengan satu-satunya idea akhirnya mengeluarkannya untuk dibaca dan dilayari oleh orang lain.

Anda mahu laman web anda menjadi hebat. Anda mungkin tahu bagaimana keadaannya hingga tahap tertentu. Atau mungkin anda mempunyai logo yang sempurna.

Tetapi …

Ini tidak semestinya anda bermula. Sekiranya anda memulakan dengan jangkaan yang telah ditetapkan, ini hanya akan membawa anda kepada banyak kekeliruan dan hasil sub-par pada akhirnya.

Sebaliknya, fikirkan perkara berikut:

  1. Pisahkan diri anda dari sebarang tujuan teknikal yang mungkin anda miliki. Seperti, misalnya, tujuan mempelajari teknologi laman web atau perisian laman web tertentu.
  2. Tanya pada diri anda satu soalan utama: “Untuk apa saya memerlukan laman web ini?”

Ini bukan mengenai anda, ini adalah mengenai matlamat laman web ini.

Soalan-soalan Yang Perlu Anda Tanyakan Sebelum Menyiapkan Laman Web Anda

  1. Apa yang ingin dicapai oleh laman web ini?
  2. Apakah “perkara” utama yang disampaikan melalui laman web ini? (mis. perniagaan, produk, catatan blog anda, dll.)
  3. Adakah laman web mempunyai tujuan khas? (mis. kedai eCommerce, portfolio jurugambar, dll.)
  4. Siapa khalayak sasaran?
  5. Mengapa mereka berminat dengan topik laman web ini?
  6. Apa kesakitan yang diselesaikan laman web untuk setiap ahli khalayak?

Mengenai 3 soalan terakhir ini, mari kita bincangkan khalayak sebentar …

Terdapat 2 peraturan utama untuk pembinaan laman web. Inilah peraturan # 1:

 Pembaca / pelawat mendahului. Mereka adalah orang utama yang mesti disukai oleh laman web anda.

Dengan cara tertentu, laman web anda bukan milik anda. Itu milik mereka.

(Peraturan # 2 kita akan bincangkan dalam satu minit.)

Melupakan garis panduan mudah ini boleh membawa anda cara yang benar-benar salah, bahkan sehingga anda mendapati diri anda dengan laman web yang membingungkan semua orang tetapi anda.

“Ugh! Orang tidak faham tentang apa laman web ini. Bagaimana mereka boleh jadi jahil ?! ” – anda akhirnya berfikir. Tetapi ternyata, orang yang tidak tahu adalah anda.

Satu-satunya cara untuk mengelakkannya adalah dengan membina laman web anda dengan mempertimbangkan pembaca dari awal.

Oleh itu … ambil kertas itu, dan jawab semua soalan di atas.

Setelah selesai, anda mempunyai sekumpulan panduan utama yang akan anda laksanakan semasa bekerja di laman web anda.

Jawapan itu akan menjadi alat yang sangat hebat semasa anda mengikuti. Anda akan dapat kembali kepada mereka setiap kali anda menghadapi keputusan mengenai laman web anda.

Sekiranya anda melakukan * ini * atau * itu *? Pergi ke kertas jawapan dan cari tahu. Sekiranya anda menggunakan bar sisi yang lebar atau sempit? Pergi ke jawapan, cari mana yang lebih sesuai dengan pembaca sasaran. Dan lain-lain.

Nama Domain dan Web Hosting

Sekiranya anda ingin menjadi pemilik laman web, anda memerlukan nama domain dan host web.

Baiklah, secara teknikal, anda boleh membina laman web ujian di komputer anda sendiri dan kemudian menjalankannya dari pelayan web tempatan (juga dipasang sebagai perisian di komputer anda), tetapi itu bukan penyelesaian yang boleh digunakan untuk 99% kes, jadi mari kita langkau.

Jadi, hos dan domain …

Berita buruk di sini ialah kedua-duanya memerlukan wang.

Berita baik … tidak banyak wang dalam skema besar. Selain itu, semasa anda belajar, anda bahkan boleh melancarkan beberapa laman web kecil pada satu nama domain dan di bawah satu host web.

Tetapi mari kita mulakan pada awalnya.

Host web:

  • Secara sederhana, hos web adalah tempat laman web anda berada, dan tempat pelawat anda dapat menemuinya. Dengan cara tertentu, hos web untuk laman web sama seperti pangsapuri untuk manusia. Di bawah bimbingan, hos web adalah syarikat yang menyewakan pelayan mereka sebagai pertukaran wang (… pangsapuri kecil untuk laman web anda).
  • Untuk memulakan, rancangan hosting bersama standard akan dilakukan. Anda boleh mendapatkannya dengan harga bermula dari $ 3 / bulan. Berikut adalah perbandingan baik dari hos web yang popular. Periksa dan tentukan syarikat mana yang sesuai untuk anda. Walau bagaimanapun, cadangan kami adalah untuk SiteGround, A2 Hosting, dan Dreamhost.

Domain:

  • Sekiranya hos web adalah pangsapuri, maka domain adalah alamat pangsapuri tersebut. Contohnya, domain laman web ini adalah hostingfacts.com.
  • Cara untuk memulakannya adalah dengan memilih nama domain yang anda inginkan dan kemudian membelinya dari pendaftar. Berikut adalah panduan komprehensif mengenai cara membeli nama domain, dan berikut adalah senarai penjana nama domain.

 

Cadangan dan Petua Memilih Nama Domain

Baiklah, jadi pergi ke beberapa pendaftar domain dan benar-benar membeli domain adalah satu perkara, tetapi bagaimana anda memilih nama domain yang betul?

Terdapat beberapa sekolah:

  • Nama domain berjenama. Itu adalah domain yang terdiri daripada kata-kata yang tidak ada. Fikirkan, perkara seperti Google.com atau Yahoo.com. Sebelum syarikat-syarikat itu muncul, kata-kata itu tidak bermakna. Kelebihan nama domain berjenama ialah… baik, sangat berjenama, tidak dapat dilupakan, dan mudah membezakan laman web anda dengan yang lain.
  • Nama berdasarkan kata kunci. Itu terdiri dari kata-kata yang ada, dimasukkan dalam urutan yang menerangkan tujuan laman web ini. Fikirkan, perkara seperti Pizza.com, atau StartBloggingOnline.com. Dengan nama domain seperti itu, pelawat anda akan dapat meramalkan jenis laman web yang akan mereka lawati dengan tepat. Kelemahannya adalah bahawa domain tersebut pada umumnya kurang berjenama.
  • Nama gabungan. Itu adalah domain berjenama dan domain berdasarkan kata kunci yang digabungkan. Fikirkan, Facebook.com, atau Copyblogger.com. Nama sebegini menunjukkan “sebahagian” dari sifat laman web kepada pengunjung, tetapi mereka masih sangat berjenama.

Beberapa panduan umum tanpa mengira jenis domain yang anda pilih:

  • Jadikan domain mudah dihafal.
  • Jadikannya pendek dan ringkas. Semakin lama domain itu, semakin membingungkan.
  • Dapatkan .com (jika boleh). .Com adalah “domain tingkat atas” utama yang tersedia. Jangan berpuas hati dengan perkara lain.
  • Cuba elakkan tanda hubung. Dapatkan nama anda dalam bentuk single-gumpalan seperti “cakerecipes.com” dan bukannya “cake-recipes.com”

Perkara yang perlu disiapkan selepas bab ini:

  • Nama domain.
  • Hos web.
  • Lembaran jawapan anda – matlamat laman web anda dan bagaimana ia melayani khalayak.

Perlukan lebih banyak pertolongan? Inilah bacaan selanjutnya untuk anda:

  • Mengapa hosting dikongsi? Jenis hos utama dibandingkan
  • 10 perkara yang menjadikan web host menjadi baik
  • 12 peraturan untuk memilih nama domain yang betul
  • Panduan perancangan laman web yang komprehensif

BAB 2: Merancang dan Membentuk Kawat

Ambil kertas dan pen dan gores bersama struktur laman web anda

Baiklah, mari kita memasuki fasa reka bentuk.

Perkara pertama yang pertama, inilah etika kerja yang akan kita lalui di sini:

  • Kami menggunakan pen dan kertas selama yang kami boleh, dan hanya kemudian beralih ke komputer. Percayalah, setiap minit yang dihabiskan untuk mengusahakan reka bentuk anda di atas kertas adalah satu jam yang dijimatkan sebaik sahaja anda mula menyesuaikan perkara di komputer.
  • Kami melakukan kerja berulang … Kami melakukan “memeriksa hasilnya” memperbaiki “memeriksa hasil” mengulangi sehingga selesai.

Dalam bab 1, kami menyebutkan sesuatu yang kami namakan sebagai peraturan # 1 pembinaan laman web. Sekarang adalah masa untuk peraturan # 2:

Peraturan # 2 pembinaan laman web:

Fikirkan kandungan terlebih dahulu.

Kandungan adalah perkara penting di laman web. Bukan rekaan. Kandungan.

Orang ramai datang untuk kandungan. Mereka tidak datang untuk reka bentuk. Reka bentuknya hanyalah kenderaan untuk menyampaikan kandungan.

Jangan sekali-kali bermula dengan penampilan laman web anda. Mulakan dengan kandungan. Kandungan. Kandungan. Kandungan.

Jadi apa yang kita maksudkan dengan “kandungan”? Ringkasnya, perkara yang orang ingin dapatkan dari laman web anda. Catatan blog, produk di kedai, utas forum jika anda membina forum, artikel berita, tawaran perniagaan anda, dan lain-lain.

“Benarkah? Tampaknya tidak penting? ” – Anda bertanya.

Daripada kita mengalahkan ini, lihat halaman ini:

Laman web ringkas

Laman web ringkas ini adalah penjelasan terbaik mengenai reka bentuk dan tujuannya dalam talian.

Jadi ingat, isi dahulu!

Kandungan dan Struktur Laman Web

Baiklah, kerana kandungannya adalah perkara yang paling penting, anda mesti menyediakannya (sebahagian besar) terlebih dahulu. Atau sekurang-kurangnya, anda harus mempunyai idea yang baik tentang berapa banyak kandungan yang akan ada dan dalam bentuk apa.

Nota. Kami tahu bahawa bahagian ini boleh menjadi sukar. Bermula dengan kandungan nampaknya agak tidak wajar untuk reka bentuk laman web, tetapi ini adalah cara terbaik untuk mendapatkan hasil yang luar biasa pada akhirnya. Oleh itu, fikirkan tentang kandungan yang ingin anda kongsikan dengan pembaca, dan bagaimana anda ingin membentangkannya.

Langkah seterusnya adalah memilih jenis halaman yang anda perlukan (seperti halaman utama, halaman produk, halaman kategori, halaman mengenai, halaman kenalan, halaman penjualan utama, beberapa halaman arahan langganan buletin, senarai blog utama, catatan individu, kedai mungkin, dan apa sahaja yang kelihatannya diperlukan).

Fikirkan, apakah kaedah paling berkesan untuk mengatur kandungan anda di laman web?

Lakukan semua ini di atas kertas. Mungkin lebih mudah dan cepat untuk anda daripada mempelajari beberapa perisian melukis carta di tempat.

Contoh:

kandungan-struktur

Gores Bersama Bingkai Kawat

Rangka kawat dalam reka bentuk web hanyalah skema halaman atau cetak biru – panduan visual yang mewakili kerangka laman web (Wikipedia memberitahu kami).

Rangka wayar sangat hebat! Kami menggunakannya untuk kebanyakan perkara yang kami lakukan untuk muncul dalam talian. Contohnya, berikut adalah rangka untuk panduan ini:

Gores bingkai wayar bersama

Seperti yang anda lihat, sekali lagi, itu ada di atas kertas. Walaupun terdapat banyak aplikasi untuk jenis pekerjaan ini, kami sebenarnya tidak menyarankan untuk menggunakannya. Mereka mungkin bagus untuk pereka pro, tetapi pemula atau orang perantaraan hanya akan kehilangan masa untuk mempelajarinya, dan pada akhirnya, mereka tidak akan mendapat banyak peningkatan daripada apa yang akan mereka capai melalui pen dan kertas.

Jadi, bagaimana cara wireframe?

Terdapat dua pendekatan sekiranya anda seorang pemula:

  • Ikuti arus jika anda merasa kuat, dan tarik sahaja (bukan selalu penyelesaian yang sempurna).
  • Dapatkan pengetahuan cepat mengenai cara memasang bingkai dengan betul (biasanya lebih baik).

Untuk yang terakhir, pergi ke sini – panduan hebat.

(Pastikan untuk membuat bingkai kawat dari setiap jenis halaman penting yang telah anda senaraikan pada langkah sebelumnya.)

Perkara yang perlu disiapkan selepas bab ini:

  • Sebilangan besar kandungan untuk laman web, atau paling tidak kebanyakannya diramalkan (misalnya, jika anda bergantung pada kandungan yang dihasilkan pengguna, maka sukar untuk mendapatkannya sebelumnya).
  • Struktur kandungan laman web anda disediakan sebagai grafik.
  • Rangka wayar dari setiap jenis halaman yang anda perlukan.

Bacaan lanjut:

  • 9 langkah merancang kandungan laman web
  • Baru dalam reka bentuk web? Mulakan di sini.

BAB 3: UX dan UI

Jangan sekali-kali memandang rendah kepentingan pengalaman pengguna dan antara muka pengguna

Seperti dalam, Pengalaman Pengguna dan Antara Muka Pengguna.

WebDesignerDepot memberi kita definisi yang agak puitis untuk kedua-duanya:

UI adalah pelana, sanggul, dan pemerintahan.

UX adalah perasaan anda dapat menunggang kuda, dan mengikat ternak anda.

Untuk definisi yang lebih praktikal:

  • UI adalah apa yang dilihat oleh pengguna semasa mereka melihat laman web anda.
  • UX adalah bagaimana perasaan mereka mengenainya.

Pasangan ini, dan seberapa baik ia dilaksanakan, pada dasarnya menentukan kegunaan laman web anda untuk pengguna akhir / pelawat.

Kedua-dua reka bentuk UX dan UI adalah topik yang besar dalam diri mereka, dan terdapat banyak elemen yang lebih kecil yang berperanan dalam hasil akhir.

Pendek kata, ada banyak yang perlu dipelajari jika anda baru memulakan perjalanan.

Oleh itu, alih-alih kita berusaha untuk merangkumi keseluruhan kursus reka bentuk UX dan UI di sini, mari kita menunjukkan beberapa elemen penting, dan kemudian menghantar anda ke tempat lain untuk bacaan selanjutnya.

Matlamat Pengguna

UX adalah mengenai matlamat pengguna … Tidak sebanyak matlamat anda … Matlamat pengguna.

Baiklah, apa maksudnya ini? Pertama sekali, kembali ke tujuan laman web anda – perkara yang anda kerjakan dalam bab sebelumnya. Sebab mengapa anda membina laman web dan bagaimana ia membantu pengguna / pelawat.

Bagaimana ia diterjemahkan ke dalam tujuan pelawat? … Apa satu perkara yang ingin dicapai atau dicapai oleh pengunjung ketika mereka datang ke laman web anda? Itulah matlamat mereka.

Betapa Mudahnya Matlamat tersebut Untuk dicapai?

Seterusnya, fokuskan pada soalan berikut:

  • Bolehkah pelawat mencapai tujuan mereka dengan mudah? – Bolehkah mereka mendapatkan maklumat yang tepat yang mereka cari dengan cara yang mudah?

Untuk menjawabnya, anda perlu kembali ke bingkai kawat, struktur kandungan anda, dan periksa semula perkara.

Pastikan struktur kandungan dan halaman yang anda fikirkan masuk akal dari sudut pandang pengguna. Pastikan ada kemungkinan mereka menavigasi antara halaman penting dengan bebas dan tidak membingungkan.

Pada dasarnya, di sini, kami memastikan bahawa laman web memberi nilai kepada pelawat anda.

Sukar untuk memikirkan ini sendiri, bukan?

Sangat disarankan anda melihat sumber yang disenaraikan di bahagian “bacaan lebih lanjut” bab ini … tetapi anda juga boleh mencuba “peretasan”,.

Yaitu, fikirkan apa yang membuat anda kecewa apabila anda melayari laman web yang serupa dengan yang anda mahu bina? Mungkin ada beberapa maklumat yang sangat sukar untuk dihubungi atau beberapa elemen antara muka yang membuat laman web membingungkan.

Buat nota, buat kesimpulan, jangan buat kesalahan yang sama dengan laman web anda.

Menggunakan Emosi sebagai Alat

Semasa mengerjakan UI dan UX laman web anda, apa yang pada dasarnya anda impikan adalah menimbulkan emosi tertentu pada pelawat anda.

Anda mahu mereka merasakan cara tertentu, yang kemudian akan meyakinkan mereka untuk bertindak dengan cara tertentu. Oleh itu, menjadikan laman web anda benar-benar bermanfaat.

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

Warna mempunyai makna yang berbeza dalam budaya yang berbeza. Memahami perbezaan tersebut dapat menjadikan kerja anda lebih mudah. Inilah lembaran cheat yang bagus.

Sebaik sahaja anda menggunakan taman warna apa yang anda mahu (mungkin) gunakan, berikut adalah beberapa panduan umum ketika bekerja dengan warna:

  • Pilih satu skema warna utama yang terdiri daripada beberapa warna yang sesuai. Inilah penjana skema warna yang hebat.
  • Pilih satu warna yang akan menjadi warna aksen anda – warna yang akan digunakan untuk butang tindakan, butang beli, dan lain-lain. Pada dasarnya, apa sahaja yang memerlukan perhatian pengguna.

Tipografi

Dalam banyak kes, tipografi adalah tempat anda memenangi (atau kalah) permainan membina laman web.

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

Tidak digalakkan.

Hari-hari ini, bekerja dengan fon tersuai sangat mudah, dan anda tidak perlu melakukan apa-apa teknikal untuk mengaktifkan fon tersuai di laman web anda.

Tipografi yang besar dan hebat kini sangat digemari fesyen, dan ini juga menjadikan karya pereka – terutamanya karya pereka pemula – lebih mudah.

Lihat laman web ini, sebagai contoh:

bonobos

Perasan apa-apa? Ya, fonnya besar dan kelihatan hebat!

Inilah cara mengatasinya:

  • Secara amnya, setiap reka bentuk laman web memerlukan dua jenis teks: tajuk dan perenggan. Dalam kebanyakan kes, hanya satu fon sahaja.
  • Pergi ke Google Font – pustaka fon percuma milik Google yang boleh anda gunakan di laman web anda – dan cari fon utama yang sangat anda gemari.
  • Kemudian, ambil nama fon itu, dan cari di Font Pair – ini adalah perpustakaan penggabungan fon yang telah dibuat dengan baik.
  • Pilih pasangan yang kelihatan hebat.
  • Tuliskan nama kedua fon tersebut, anda memerlukannya kemudian.

Melakukannya dengan cara ini akan mempercepat proses anda dan tetap memberikan hasil yang baik.

Contohnya, kami menjumpai fon bernama Bree Serif di Font Google yang kami cukup nikmati:

Bree-Serif

Kemudian, kami membawanya ke Font Pair, dan laman web tersebut menyarankan agar Bree Serif sesuai dengan Open Sans. Sempurna:

Bree-Serif-buka-sans

Struktur Akhir

Akhirnya, langkah terakhir!

Inti keseluruhan bab ini adalah menggunakan susun atur / struktur akhir yang akan anda gunakan untuk laman web anda. Pada ketika ini, anda harus yakin dengan perkara yang ingin anda lakukan dengan reka bentuk dan UI anda.

Perkara yang perlu disiapkan selepas bab ini:

  • Tujuan pengguna anda disenaraikan dengan jelas.
  • Kerangka kawat anda diperiksa semula untuk memastikan bahawa matlamat tersebut tidak membingungkan.
  • Skema warna yang dipilih.
  • Tipografi telah diketahui.
  • Susun atur / struktur / organisasi laman web keseluruhan laman web anda.

Bacaan lanjut: 

  • Majalah UX
  • UX Booth
  • Psikologi dan emosi di sebalik warna dalam reka bentuk web
  • Apakah reka bentuk pengalaman pengguna? Gambaran keseluruhan, alat dan sumber
  • Menetapkan matlamat perniagaan pintar untuk laman web
  • 8 peraturan untuk mewujudkan tipografi yang berkesan

BAB 4: WordPress, HTML atau Templat?

Tentukan jalan mana yang hendak dituju – sistem pengurusan kandungan atau kodkannya dari awal

Di sinilah bermulanya kerja sebenar, kotor tangan, tanpa tudung!

Ini mungkin juga merupakan bahagian yang paling menakutkan dari proses ini (mengakuinya!).

Sekali sekala, ini adalah masa yang tepat untuk menyisihkan pen dan kertas dan mula menggunakan beberapa perisian.

Dan keluar dari pintu, ada banyak soalan …

  • Sekiranya saya belajar HTML?
  • Bagaimana dengan CSS?
  • Adakah templat laman web HTML yang siap pakai akan menjadi muslihat bagi saya?
  • Adakah saya perlu belajar bahasa pengaturcaraan seperti PHP?
  • Saya telah mendengar bahawa WordPress adalah cara untuk membina laman web hari ini.
  • Saya melihat iklan Squarespace Super Bowl itu. Ada apa dengan itu?
  • Apa benda ini dipanggil Joomla? Atau Drupal?
  • dan terus dan terus.

Jawapan untuk semua itu adalah ya.

Seperti di dalam, ya, anda boleh melakukan salah satu atau semua perkara itu, dan anda hanya perlu memutuskan jalan mana yang harus anda pilih.

Apa yang kami cuba katakan ialah tidak ada pendekatan terbaik # 1 di sini. Semuanya bergantung pada seberapa terlibat anda ingin dengan pengembangan web, seberapa banyak asas pembinaan laman web yang ingin anda pelajari, seberapa cepat anda memerlukan laman web berkualiti, dan seberapa disesuaikan anda menginginkannya sesudahnya.

Oleh itu, kita akan teruskan dari bab ini. Pertama, pilih persona yang menentukan anda yang terbaik:

  • a) Saya ingin mengetahui apa itu pembangunan web, semua asas, semua cara kerja laman web, dan semua mekanisme yang menjadikan laman web berfungsi.
  • b) Saya ingin belajar bagaimana menggunakan pembangun laman web yang boleh menangani sebahagian besar pengangkatan berat bagi saya.
  • c) Saya tidak tahu apa yang perlu dibuat. Saya hanya mahukan laman web yang boleh saya buat sendiri dan 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 (ia akan membantu anda memilih jalan yang sempurna):

  • 8 platform blogging dan pembinaan laman web terbaik dikaji … Setiap platform dijelaskan bersama kebaikan dan keburukannya, dan sumbernya juga mencadangkan pilihan terbaik yang tersedia (Wix atau SB) untuk keperluan khusus anda.

Adakah anda sudah membacanya? Hebat! Oleh itu, antara personas di atas yang manakah paling sesuai untuk anda – a) atau b)?

Alat yang mungkin berguna sepanjang perjalanan:

  • Grafik: Paint.NET, Gimp, Pixlr.
  • Penulisan kod: Notepad ++, TextWrangler, SublimeText.
  • Pengurusan kerja: Trello.
  • Reka bentuk: skema warna, Font Google, alat dari sini.
  • Fotografi: Unsplash, AllTheFreeStock

BAB 5: Pengenalan HTML, CSS & Javascript

Bagaimana laman web adalah realiti terbina dalam

Dalam bab ini, kami akan menunjukkan asas-asas pengembangan web yang jelas, menerangkan istilah yang paling penting, dan kemudian menghantar anda ke beberapa sumber tertentu di mana anda dapat meningkatkan pengetahuan dan kemahiran anda.

HTML

HTML adalah bahasa laman web. Setiap laman web dibina atau diubah menjadi HTML pada satu ketika.

Sebagai contoh, untuk melihat struktur HTML panduan ini yang anda baca di sini, cukup tekan “Ctrl + U” pada papan kekunci anda.

HTML menentukan setiap blok yang anda lihat di laman web. Pada penghujung hari, untuk memaparkan apa sahaja di laman web, ia perlu ditukar menjadi HTML.

Untuk mempelajari HTML dengan berkesan, kami menasihatkan anda untuk mendaftar ke salah satu kursus (percuma atau berbayar) yang terdapat di web. Beberapa yang terbaik boleh didapati di Codeacademy atau Treehouse.

Sebagai contoh, berikut adalah bahagian khusus di Codeacademy mengenai HTML dan CSS.

Laman utama CodeCademy

Jadi itulah pendekatan menyeluruh untuk HTML.

CSS

CSS – untuk melangkau butiran teknikal yang membosankan – bertanggungjawab untuk menggayakan semua yang kelihatan di laman web.

CSS mengambil tag HTML dan kemudian membuat struktur dan menambah gaya kepada mereka. Perkara seperti: teks tebal, penyesuaian warna, bayangan, susun atur, bahkan animasi, kini dilakukan terutamanya dengan CSS.

Untuk pemahaman yang lebih baik mengenai bagaimana ini betul-betul berfungsi, pergi ke kursus ringkas ini di Codeacademy.

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

JavaScript, jQuery, Bootstrap, dll.

JavaScript adalah bahasa pengaturcaraan yang memungkinkan anda memperkenalkan beberapa tindakan dinamis di laman web anda. Contohnya, anda boleh melakukan perkara seperti mengesahkan borang web atau berinteraksi dengan pengguna dengan cara yang lebih lancar tanpa perlu memuat semula halaman yang mereka buka. Inilah tutorial bagus oleh w3schools.

Oleh itu, jQuery adalah pustaka JavaScript yang membolehkan anda membuat perkara lanjutan dengan pengekodan yang kurang. Sangat berguna untuk pembangun web. Ketahui lebih lanjut di sini.

Akhirnya, Bootstrap adalah penemuan yang sangat menarik. Mula-mula diperkenalkan oleh Twitter, pada dasarnya ini adalah persekitaran front-end yang mempercepat proses pembinaan laman web dengan menyampaikan sebahagian besar elemen laman web biasa yang sudah dibina sebelumnya. Kedengarannya rumit, bukan?

Tetapi tidak. Cukup lihat kursus permulaan ini di Codeacademy (by the way, inilah cara kami mula-mula belajar Bootstrap).

Perkara yang perlu disiapkan selepas bab ini:

  • Pada dasarnya, draf pertama laman web HTML / CSS anda dibina sepenuhnya. Dari sana, anda boleh memulakan berulang dan meningkatkan hasil akhir.

BAB 6: Platform Pembinaan Laman Web

Menyiapkan laman web pertama anda? Cuba platform laman web percuma seperti WordPress, Joomla atau Drupal

Bab 6: Platform Pembinaan Laman Web

  • Ruang Segi Empat
  • WordPress
  • Joomla & Drupal

Terdapat lebih banyak pembangun laman web di luar sana daripada yang boleh anda gunakan. (Sekiranya anda jenis orang yang mengguncang sesuatu.)

Okey, bergurau.

Jelas, jika anda tidak mempunyai keinginan untuk belajar bagaimana membuat kod dengan tangan, mereka pasti ada banyak penyelesaian yang dapat membantu anda.

Nota. Perlu diingat bahawa semua perkara lain yang kita bincangkan dalam bab 1-4 masih berlaku di sini. Walaupun anda menggunakan penyelesaian pembinaan laman web yang mudah dilakukan, anda masih perlu berhati-hati untuk menjadikan produk akhir mesra pengguna dan selaras dengan tujuan semua orang. Alat pembinaan laman web itu betul-betul… alat.

Bermula dengan yang paling mudah difahami:

Ruang Segi Empat

Satu-satunya platform laman web yang mengiklankan semasa Super Bowl.

Ringkasnya, penyelesaian yang sangat berguna yang boleh digunakan oleh sesiapa sahaja. Tidak memerlukan kemahiran sebelumnya.

Ini membolehkan anda membina laman web klasik, blog, bahkan kedai eCommerce bahkan kami menulis ulasan mengenainya. Antaramuka dan keseluruhan proses menggunakannya cukup mudah dipahami, ditambah dengan lelaki Squarespace yang menyediakan banyak tutorial menarik. Lihat di sini.

WordPress

Secara jujur, kami menyukai WordPress.

Selalunya, ia adalah platform yang tepat untuk membina laman web. Ia mempunyai keseimbangan yang sempurna antara kerumitan dan kemudahan penggunaan, dan pada dasarnya dapat disesuaikan tanpa henti.

Animasi WordPress

Juga, platform platform laman web paling popular buat masa ini. Seperti yang dikongsi oleh pencipta WordPress – Matt Mullenweg – WordPress kini menguasakan 25% dari keseluruhan internet. Bolehkah semua orang itu salah?

Baiklah, jadi untuk memulakan WordPress, anda hanya memerlukan domain dan hosting anda. Perisian WordPress itu sendiri adalah percuma.

Untuk memulakan, sila ikuti salah satu jalan berikut:

a) “Jalan permulaan cepat”

  • Pergi ke sini untuk mengetahui cara mudah memasang WordPress dan melancarkan laman web anda pada sebelah petang.
  • Pilih tema percuma dari direktori rasmi – pastikan tema tersebut sesuai dengan tujuan laman web anda, dan susun atur / reka bentuknya tidak jauh dari struktur yang anda mahukan (anda akan menyesuaikannya sedikit).
    • Periksa kedua sumber ini untuk mengetahui cara menyesuaikan tema yang ada.
    • Sebagai pilihan, anda boleh memilih tema premium serbaguna yang dapat disesuaikan melalui antara muka pengguna yang berguna (tidak memerlukan pengekodan). Tema X adalah contoh yang baik dari perkara tersebut.
  • Pasang beberapa plugin yang paling popular dan terbaik untuk mendapatkan ciri tambahan.

b) “Jalan yang mendalam”

  • Mulakan dengan belajar WordPress melalui kursus dalam talian. Treehouse menawarkan yang hebat.
  • Pilih tema dan pemalam anda seperti di atas. Sebagai alternatif, bina tema anda sendiri dari bawah ke atas.

Pada akhirnya, WordPress mungkin merupakan platform laman web yang paling serba boleh di pasaran. Dengan itu, anda boleh membina hampir semua jenis laman web, bukan sahaja blog atau laman web perniagaan sederhana. Berikut adalah senarai 47 (!) Cara berbeza untuk menggunakan WordPress, hanya untuk membuat anda berfikir.

Joomla dan Drupal

Walaupun sedikit berbeza antara satu sama lain, Joomla dan Drupal adalah sistem pengurusan kandungan yang sangat baik untuk projek web yang lebih maju.

Mereka tidak sebijak reka bentuk yang kuat, tetapi mereka sangat disesuaikan dan mampu mengendalikan apa sahaja jenis laman web yang mungkin anda ada dalam rancangan.

Kadang-kadang, bergantung pada kerumitan projek anda, mereka mungkin memerlukan lebih banyak masa untuk dikuasai dan lebih banyak usaha untuk itu.

Untuk latihan yang lebih mendalam, terdapat kursus hebat di Lynda.com, baik untuk Joomla dan Drupal.

Perkara yang perlu disiapkan selepas bab ini:

  • Draf pertama laman web anda dibina sepenuhnya, tidak kira sama ada anda memutuskan untuk menggunakan WordPress atau platform lain.
  • Pastikan ia sesuai dengan tujuan awal anda, khalayak sasaran, dan memberikan UX yang baik.

BAB 7: Reka Bentuk Responsif Mudah Alih

Lebih daripada 60% orang menggunakan telefon bimbit dan tablet untuk melayari laman web

Tindak balas mudah alih kini merupakan aspek yang sangat penting dalam pembinaan laman web, mungkin lebih daripada sebelumnya.

Inilah masalah keseluruhannya:

Pada dasarnya, sekarang ini, terdapat lebih banyak orang yang menggunakan peranti mudah alih untuk mengakses web daripada sebelumnya. Sebenarnya, dianggarkan kini terdapat lebih banyak pengguna internet mudah alih daripada pengguna internet desktop (75.1% berbanding 52.7%).

Tetapi ada masalah.

Tidak semua reka bentuk laman web akan dioptimumkan untuk dilihat pada peranti mudah alih di luar pintu.

Beberapa masalah biasa termasuk:

  • fonnya terlalu kecil,
  • susun atur itu sendiri tidak menyesuaikan diri sama sekali ke skrin yang lebih kecil,
  • atau teknologi yang digunakan untuk membina laman web yang tidak tersedia di telefon bimbit.

Di sinilah idea responsif mudah alih dimainkan.

Laman web yang responsif bertindak balas terhadap persekitaran yang dilihatnya. Sekiranya komputer desktop, laman web dibuat dengan cara tertentu. Sekiranya ia bergerak, ia akan dibuat dengan cara lain.

Berikut adalah penjelasan yang lebih baik: Apa Reka Bentuk Web Responsifnya?

Oleh itu, perkara yang perlu dilakukan sekarang ialah memeriksa dan memastikan laman web anda berfungsi pada peranti mudah alih. Gunakan peranti anda sendiri untuk memeriksa ini, tetapi juga mencuba ujian mudah alih Google, atau beralih ke alat seperti Tester Reka Bentuk Responsif.

Sekiranya terdapat masalah, anda perlu memperbaikinya.

Beberapa penyelesaian:

  • Reka Bentuk Web Responsif – caranya
  • Cara Membuat Laman Web Responsif Dalam Masa Lebih kurang 15 Minit

BAB 8: Gabungkan semuanya

Anda tahu asasnya, sekarang giliran anda

Tunggu, kita hampir sampai!

Ini adalah bab terakhir dalam perjalanan kita yang cukup panjang.

Pada ketika ini, anda mesti membina laman web pertama anda … Jadilah dengan WordPress, HTML / CSS buatan tangan, beberapa pembangun laman web, atau apa sahaja alat lain yang anda pilih untuk pekerjaan itu.

Ringkasnya, selamat! Tetapi masih ada beberapa perkara yang perlu dilakukan:

  • Periksa semula perkara yang telah kita bincangkan dalam bab 1 dan 2. Pastikan matlamatnya benar-benar berfungsi untuk pengguna akhir dan laman web tidak mengelirukan.
  • Sahkan struktur kod anda melalui perkhidmatan pengesahan markup W3C.
  • Periksa sama ada tidak ada masalah keselamatan dengan laman web ini. Gunakan pengimbas oleh Sucuri untuk itu.
  • Dapatkan maklum balas daripada komuniti. Periksa pendapat orang lain mengenai pekerjaan anda. Forum di Sitepoint boleh menjadi baik untuk itu.

Sekiranya ini adalah bacaan pertama anda mengenai sumber ini, maka kami sangat mendorong anda untuk mengulanginya beberapa kali dan menganggapnya sebagai fail rujukan untuk pendidikan lanjutan anda.

Seperti yang kami katakan di awal, jangan ragu untuk menggunakan TOC dan arahkan dari bab ke bab dan sumber ke sumber yang anda rasa sesuai.

Terakhir, kami ingin tahu … apakah cabaran terbesar anda dalam hal pembangunan laman web, pengembangan web atau reka bentuk? Sila kongsi komen atau melalui Twitter. Kita semua telinga!

Terima kasih kerana membaca, anda hebat!

  • Jumlah116
  • 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