Unlimited Plugins, WordPress themes, videos & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Code
  2. Tools & Tips
Code

Bagaimana Menggunakan Diagram Negara dapat Membuat Coder Web Anda yang Lebih Baik 

by
Difficulty:IntermediateLength:LongLanguages:

Indonesian (Bahasa Indonesia) translation by nila sardi (you can also view the original English article)

Satu tool yang harus di web coding gudang adalah diagram negara. Diagram negara menunjukkan berbagai "Serikat" (reaksi) yang aplikasi Anda (misalnya, situs web) dapat digunakan, serta tindakan apa atau masukan (dari pengguna) diperlukan untuk sampai ke keadaan tertentu. Diagram negara yang membantu untuk membuat beton dalam pikiran Anda semua interaksi pengguna/aplikasi mungkin. Hal ini meningkatkan kemungkinan bahwa Anda akan setidaknya mempertimbangkan coding untuk semua kemungkinan hanya karena Anda sekarang tahu mereka semua - yang mengurangi kemungkinan bahwa Anda memiliki kode kereta atau lebih buruk, lupa untuk menangani fungsi tertentu.

Mengapa menggunakan Diagram negara?

Diagram negara terdiri dari dua komponen: lingkaran untuk mewakili negara (aplikasi reaksi / output) dan panah untuk mewakili transisi (tindakan pengguna / masukan). Diagram negara sangat berguna untuk aplikasi kompleks dan tidak begitu kompleks komputer apapun. Namun, ketika datang ke pengembangan website, diagram negara yang tidak selalu menggunakan:

  1. Jika Anda memiliki sebuah situs web statis yang mana navigasi menjamin bahwa setiap satu halaman link ke setiap halaman lain, maka negara diagram berlebihan. (Di cabang matematika yang disebut teori grafik, situasi ini dikenal sebagai "grafik sepenuhnya terhubung". Grafik adalah seperangkat tepi dan node - yaitu, transisi dan Serikat.)
  2. Jika Anda memiliki website dinamis berjalan pada CMS (Content Management System) - yang meliputi blog platform - kemudian begitu banyak transisi negara sudah kode ke situs Anda. Jadi sekali lagi, sebuah diagram negara ini tidak banyak berguna.

Di sisi lain, jika Anda sedang membangun sebuah situs web di mana Anda harus menangani transisi khusus, maka diagram negara dapat sangat bermanfaat:

  1. Penanganan input pengguna istimewa, dimana apa yang mereka pilih memutuskan negara berikutnya. (Misalnya, bentuk atau menu yang memiliki daftar tarik-turun atau dinamis.)
  2. AJAX-y situs mana bahkan setelah tindakan pengguna signifikan, URL tidak berubah. (Apakah konten, URL tidak.)

Bagaimana Anda membuat diagram negara?

Hal yang mengejutkan adalah keadaan diagram tidak semua yang rumit untuk menghasilkan. Namun dalam pengalaman saya, mereka tidak digunakan semua yang sering oleh kebanyakan programmer, meskipun manfaat (pemahaman yang lebih dalam interaksi pengguna; kohesi coding usaha). Aku bersumpah dengan mereka - atau lakukan ketika saya adalah pengkodean setiap hari di berbagai pekerjaan.

Dianjurkan bahwa Anda menghasilkan negara diagram di atas kertas pertama, kemudian transfer ke sebuah salinan digital jika dan hanya jika itu diperlukan. (Ada sesuatu tentang rasa perabaan sketsa masukan tampilan hubungan pada kertas yang membuat mereka lebih konkret dalam pikiran Anda, sehingga lebih mudah untuk mengakomodasi semua interaksi yang tersedia dan dengan demikian mengurangi bug dalam aplikasi Anda.)

Diagram negara terdiri dari:

  • Label panah baris untuk menunjukkan masukan/tindakan pengguna (transisi).
  • Lingkaran berlabel tampilan dihasilkan konten (aplikasi negara).
  • Mulai negara dengan lingkaran ganda-perbatasan.
  • Serikat akhir (tapi tidak ketika aplikasi berbasis web. Lihat di bawah untuk penjelasan.)

Anda dapat melihat langsung di bawah ini - contoh sederhana yang akan diperluas pada nanti dalam artikel ini:

Berikut adalah langkah-langkah untuk membuat diagram negara (dengan yang condong ke arah aplikasi berbasis situs):

  1. Buatlah daftar semua kemungkinan input oleh pengguna aplikasi, dari setiap negara yang tunggal.
  2. Menggambar negara mulai - lingkaran ganda-perbatasan label dengan "S". Dengan sebuah situs web, keadaan awal adalah halaman rumah dan tampilan default.
  3. Menggambar lingkaran untuk mungkin unik negara atau negara sub. Untuk situs statis, setiap halaman web adalah sebuah negara yang terpisah. Jika untuk web aplikasi dapat memiliki Serikat sub berbeda untuk URL yang sama, maka Anda perlu untuk menggambar lingkaran negara terpisah.
  4. Untuk setiap tindakan yang mungkin dari negara mulai, menggambar berlabel panah (transisi) lingkaran negara mungkin berikutnya.
  5. Ulangi langkah ini dari setiap negara sampai Anda memiliki sebuah diagram negara penuh untuk aplikasi.
  6. Jangan lupa tentang transisi melingkar. Misalnya, dari satu negara ke sendiri (mungkin karena kembali mengklik link yang sama dua kali).
  7. Berulang transisi dari sekelompok negara terkait dapat diwakili dengan beberapa bentuk pendek, sebagaimana akan dibahas di bawah ini.
  8. Negara diagram untuk non-Web aplikasi hampir selalu memiliki keadaan "Akhir". Namun, Web dikatakan "kewarganegaraan" karena di web browser, setiap negara satu keadaan akhir. Anda dapat mengambil tindakan dan pergi, atau mengambil tindakan lain dan kemudian meninggalkan, dll. Jadi untuk aplikasi web, ada tidak perlu menggambar keadaan akhir.

Untuk memperluas #7 di atas, perlu diingat bahwa situs-situs, mungkin ada banyak pengulangan dari tindakan. Sebagai contoh jika setiap halaman termasuk menu navigasi yang sama, ada tidak perlu untuk menunjukkan transisi yang berulang-ulang dan mengacaukan diagram negara. Hanya mewakili berkerumun tindakan dengan beberapa bentuk pendek notasi / simbol.

(Ini jauh lebih mudah untuk memahami diagram negara jika Anda adalah orang yang menggambar itu, satu langkah pada satu waktu. Jika Anda adalah orang yang memandang status penyelesaian diagram, mungkin menakutkan. Untuk alasan ini, negara diagram sering hidup hanya kertas - dengan asumsi Anda menggunakan mereka.

Bagaimana negara diagram berlaku untuk aplikasi berbasis Website?

Untuk situs web statis yang menggunakan tidak ada fitur AJAX-y (yaitu, setiap fitur yang mana URL tidak berubah), sebuah diagram negara cukup mudah untuk menghasilkan tapi umumnya tidak perlu. Sebagai contoh, website statis yang di mana setiap halaman terhubung ke setiap halaman lain hasil dalam diagram negara yang kadang-kadang disebut sebagai "sepenuhnya terhubung" grafik. Diagram negara tersebut biasanya sia-sia karena tidak ada penanganan khusus untuk memvisualisasikan. Setiap negara bagian terhubung ke setiap negara lain)

Mana negara diagram paling berguna adalah untuk situs dinamis - didebat dengan fitur AJAX-y (seperti menu drop, Slider, akordion, Galeri, dll.). Dalam kasus terakhir, URL dalam browser mungkin tidak mengubah tapi konten halaman yang tidak begitu sebagian. Hal ini sulit untuk memvisualisasikan semua Serikat mungkin dan transisi (tindakan) karena "halaman" dapat memiliki Serikat sub kelipatan.

Diagram negara (atau set semakin rinci diagram) datang sangat berguna dalam hal ini - terutama jika ada tim coders (dan kadang-kadang desainer) untuk bekerja dengan.

Contoh penggunaan negara Diagram

Dalam tutorial yang akan datang aku akan menunjukkan kepada Anda bagaimana kode jQuery untuk efek dua yang saya gunakan dalam template AboutMe saya. Halaman yang live memiliki beberapa glitches CSS yang harus diseterika keluar pertama. Saya juga ingin menambahkan beberapa fitur lebih berbasis jQuery jika ada cukup waktu. Fitur-fitur tambahan akan menjadi subjek dari contoh kami.

Di masa depan, template ini akan berubah menjadi sebuah tema WordPress gratis yang ditujukan untuk freelancer yang ingin menampilkan pengalaman kerja (pertunjukan). Untuk sekarang, saya ingin menunjukkan bagaimana negara diagram dapat membantu Anda memahami diperlukan penyebab/reaksi (alias masukan/transisi) untuk Galeri "Saat ini pertunjukan" terlihat di atas. Memahami transisi diperlukan membantu Anda kode lebih percaya diri, dan itu semua pengkodean bahasa-independen. Sehingga Anda dapat memutuskan pada kode Perpustakaan/bahasa setelah membuat diagram negara.

Fitur aplikasi yang diinginkan

Jika Anda melihat galeri "Saat ini pertunjukan" di pusat yang tersisa dari gambar di atas, atau pada halaman hidup, Anda akan melihat bahwa ini adalah konsep yang sama pada dasarnya sebagai galeri foto. Klik link dan rincian yang "manggung" akan muncul. Namun, ketika saya membangun halaman yang live, ada tidak jQuery tutorial tentang cara untuk membuang teks ke dalam campuran, untuk setiap "kerangka" lemari kaca. Aku harus datang dengan kode saya sendiri.

Untuk melakukan itu, aku harus terlebih dahulu memahami semua interaksi pengguna. Diagram negara sangat ideal untuk ini. Mari kita naik ante, meskipun. Apa yang saya inginkan adalah area pameran yang menunjukkan pertunjukan saat ini dan masa lalu Gigs. Itu adalah semacam seperti visual C.V. (Curriculum Vitae, alias "melanjutkan"), menampilkan galeri pengalaman kerja. Pertunjukan setiap bingkai berisi snap layar Beranda situs terkait, bersama dengan beberapa teks memberikan rincian pekerjaan saya lakukan / saya lakukan di sana.

Untuk saat ini, halaman hanya memiliki "Saat ini pertunjukan", tetapi harus memiliki "Selama pertunjukan" juga. Berikut adalah daftar persyaratan fungsional untuk apa yang seharusnya daerah showcase:

  1. Tabbed jQuery interface, tetapi "tak terlihat". Daripada menggunakan tab biasa, menggunakan mini-spanduk mirip dengan grafis "Saat ini pertunjukan".
  2. Ketika "tab" diklik (saat ini pertunjukan, pertunjukan masa lalu), daftar pertunjukan sesuai ditampilkan, bersama dengan bingkai (rincian) item pertama.
  3. Default showcase adalah "Saat ini pertunjukan".
  4. Bila seseorang mengklik "Masa lalu Gigs", kemudian daftar pertunjukan terakhir harus menunjukkan, bersama dengan rangka rincian item pertama dalam daftar itu.
  5. Pertunjukan daftar. Setiap "tab" akan memberikan daftar pertunjukan diposisikan di sebelah kiri yang menggunakan grid CSS cetak biru.
  6. Pertunjukan daftar item akan teks link.
  7. Menampilkan setiap akan memiliki link yang sama sekali berbeda (masa lalu dan kini bekerja). Jadi "pengalaman pekerjaan" hanya dapat muncul dalam satu showcase pada suatu waktu.
  8. Ketika item dalam daftar pertunjukan diklik, pertunjukan rincian "bingkai" akan muncul. Setiap frame akan menunjukkan snap layar (disimpan sebelumnya) dan deskripsi pekerjaan terkait. Cetak biru CSS grid kerangka akan digunakan untuk posisi elemen showcase. (Ini tidak diperlukan, tetapi itu adalah apa yang saya bertujuan untuk.)

Jadi untuk mengulangi, tujuannya adalah untuk memiliki sebuah antarmuka tab di mana tab berlabel "Saat ini pertunjukan" dan "Masa lalu pertunjukan". Hal ini memungkinkan untuk lebih tab kemudian, hanya dibatasi oleh lebar tiap label dan lebar ruang showcase (590 piksel). Tapi aku ingin tab untuk menjadi "tak terlihat", seperti yang disebutkan. Bukan tab yang khas dalam antarmuka tab, saya ingin menggunakan mini-banner. Jika Anda melihat halaman pengujian hidup, ada sebuah spanduk mini yang berlabel "Saat ini pertunjukan", dan lain berlabel "Masa lalu Gigs". Mereka akan tab. Berikut ini adalah snap layar closeup dari apa daerah showcase akhir mungkin terlihat seperti, dengan pengaturan default.

Membuat Diagram negara

Untuk membuat diagram negara, pertama kita harus menghitung setiap negara mungkin unik, masukan dan tindakan:

  1. Mulai negara: atas beban home page:
    1. Menyembunyikan (bebas-display) semua pertunjukan frame menggunakan CSS.
    2. Etalase "Saat ini pertunjukan" hadir sebagai default.
    3. Dalam default showcase, hadir frame untuk 1 item dalam daftar pertunjukan sebagai default. Jadi setiap kali seseorang mengklik pertunjukan saat ini "tab", showcase akan mengatur ulang itu sendiri.
  2. Mungkin generik tindakan dari negara mulai:
    1. Klik pada "tab". Reaksi / transisi: membuat pameran yang sesuai dengan tab yang diklik.
    2. Klik pada item daftar pertunjukan. Reaksi / transisi: membuat pertunjukan item frame yang sesuai.
  3. Mungkin generik tindakan dari negara-negara lain: persis sama. Kami beruntung dalam hal ini, karena ini membuat diagram negara jauh lebih sederhana.

Catatan: saat ini, kita khawatir hanya dengan apa yang terjadi di C.V. showcase. Dalam diagram negara, kita tidak peduli tentang tindakan yang mempengaruhi bagian lain dari halaman web. Kami hanya menampilkan tindakan / reaksi yang mempengaruhi C.V. menampilkan.

Berikut adalah contoh negara diagram untuk fungsi di atas.

Beberapa catatan tentang diagram ini:

  1. Untuk tujuan diskusi ini, hal ini tidak semua yang penting apa yang masing-masing label benar-benar adalah. Di sini, masing-masing mewakili sebuah website yang saya digunakan untuk menulis atau menulis sekarang.
  2. Tidak rumit seperti yang terlihat. Hanya fokus pada satu transisi pada satu waktu dan itu akan jelas apa yang terjadi. [Berikut, label tindakan adalah sama dengan label negara. Itu tidak selalu terjadi.] Hal ini biasanya jauh lebih jelas ketika Anda menggambar diagram diri sendiri, menambahkan baru negara lingkaran dan transisi panah satu pada satu waktu.
  3. Transisi, alias tindakan pengguna, yang diwakili oleh panah berlabel. (Biasanya label akan teks lengkap, bukan bentuk pendek yang digunakan di sini.)
  4. Serikat, alias reaksi, yang diwakili oleh lingkaran. Keadaan mulai selalu ditandai dengan lingkaran ganda dan "S".
  5. Bentuk pendek yang digunakan untuk kedua jenis label, untuk menjaga diagram kurang berantakan.
  6. Serikat dan sub Serikat adalah warna berdasarkan apakah mereka primer atau sekunder di alam. Sebagai contoh, biru mewakili negara-negara utama (dan transisi). Anda dapat pergi dari mulai negara ke negara biru dengan satu klik link yang sesuai. Anda tidak dapat pergi ke keadaan (sekunder) ungu dari awal tanpa pertama melewati sebuah negara utama.
  7. Karena ada banyak transisi berulang (i.e., dari pertunjukan item lain), Rombongan transisi ditampilkan dengan salah satu panah diuraikan tebal (biru atau ungu isi). Sebagai contoh, sewaktu melihat rincian pertunjukan FF (FreelanceFolder), Anda dapat klik pada salah satu item pertunjukan yang tercantum untuk menampilkan CG (saat ini pertunjukan), termasuk FF itu sendiri. Atau Anda dapat klik pada CG "tab" dan me-reset lemari kaca. Anda tidak bisa pergi dari pertunjukan "saat ini" bingkai ke bingkai pertunjukan yang "masa lalu", atau sebaliknya.
  8. Panah biru pendek, diuraikan termasuk transisi kembali ke kondisi bawaan CG's. Pendek, diuraikan panah ungu tidak termasuk transisi kembali ke kondisi bawaan PG itu. (Itu adalah karena transisi yang sudah ditunjukkan secara eksplisit. Mereka bukanlah untuk CG karena diagram akan terlalu berantakan.)

Memperluas pada titik #5 di atas, aturan adalah bahwa jika ada beberapa berulang transisi dari sekelompok terkait Serikat, Anda dapat anotasi transisi dengan semacam formulir singkat. Anda hanya ingin mendapatkan rasa penting transisi sehingga mereka terkemuka di pikiran Anda. Pendekatan lain adalah untuk mengambil sebuah diagram kompleks dan dibagi menjadi bagian: Ikhtisar utama, kemudian "meledak" versi transisi cluster.

Sebagai contoh, diagram di atas bisa memiliki sebuah diagram negara utama yang berisi node S, CG dan PG. Kemudian akan ada dua rinci diagram. Satu akan memiliki S, CG, dan Serikat sub sesuai mewakili berbagai pertunjukan. Diagram rinci lainnya akan memiliki S, PG, dan Serikat sub pertunjukan sesuai.

Akhir Pikiran

Secara keseluruhan, Anda seharusnya sudah memiliki gambaran mental lebih jelas tentang bagaimana fungsi bagian showcase. Aku tidak akan masuk ke bagaimana untuk berpindah dari diagram negara kode aktual. Yang seharusnya menjadi jelas setelah Anda memahami semua interaksi pengguna. Negara diagram - dan pemahaman Anda mereka akan membantu Anda untuk menulis kode lebih kohesif, mengurangi kemungkinan sebuah aplikasi kereta. Teknik pengkodean Anda tidak berubah.

Advertisement
Advertisement
Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.