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

Saran dalam Membuat langkah-langkah Tutorial di Nettuts+

by
Length:MediumLanguages:

Indonesian (Bahasa Indonesia) translation by Husain Ali Yahya (you can also view the original English article)

Artikel ini membahas satu pendekatan dalam menulis tutorial. Sementara fokus di sini untuk NETTUTS, banyak pendekatan lain bisa diterapkan di situs lain. Jika kamu berencana menulis tutorial untuk NETTUTS, kamu harus membaca artikel ni. Di sini juga ada sebuah artikel paralel di PSDTUTS yang editor Sean hodge tulis, yang sebenarnya terinspirasi dari sini.

Perlengkapan Skill

NETTUTS berisi tutorial pengembangan situs. Ini berarti koding yang berbasis browser web, yang membutuhkan setidaknya pemahaman dari HTML, sedikit CSS, dan juga beberapa bahasa pemograman. Semuanya tergantung dari hal yang diliput tutorialmu. Ini bisa jadi CMS / Pemograman blog, PHP, Javascript, CSS frameworks, database dan lain sebagainya.

Kamu mungkin menyadari bahwa tutorial terpopuler di sini berfokus pada pengembangan situs dan desain. Jadi mengetahui bagaimana cara menggunakan software grafis seperti Photoshop atau Fireworks bisa membantu. Setidaknya, tahu bagaimana untuk mendapatkan sebuah screenshot, semenjak ini menjadi hal yang kamu harus masukkan ke dalam bagian visual dari tutorialmu.

Rencana dan buat sebuah daftar kegiatan

Kamu tidak benar-benar harus menjadi terlalu formal, hanya saja kamu perlu merencanakan tutorial dan menerapkan daftar kegiatan. Ini saran dari daftar kegiatan, walau kamj bisa merubahnya dengan bebas sesuai yang kamu inginkan.

  1. Rencanakan tutorialmu.
  2. Tulis daftar kegiatanmu.
  3. Cari code libraries, plugins, dan teknik.
  4. Tentukan code yang dingin dicontohkan
  5. Tulis kodemu, tes, dan perbaiki hingga puas.
  6. Tulis tutorialmu.
  7. Masukkan kode demo ke dalam snippet di tutorialmu (seperti di Panduan Tuturial)
  8. Daftar kekurangan dari kode yang kamu sadari (contoh tidak bekerja di Internet Explorer 6.0+ dan lain sebagainya)
  9. Sediakan elemen visual yang sesuai (gambar, screenshot, animasi dan lainnya) tidak lebi lebar dari 600 piksel.
  10. Edit tutorial dan nomor dari setiap bagian dengan "langkah 1", "langkah 2" dst.
  11. Jika kamu menggunakan hambar yang bukan milikmu, kamu harus memberikan atribusi dan memiliki baik izin secara implisit (  CC license di Flickr ) mauoun eksplisit untuk menggunakannya. Termasuk gambar yang muncul di tutorial maupun demomu. 
  12. Siapkan source code untuk di download dalam bentuk ZIP. Masukkan juga berkas demomu,

Buat jadi mudah

Ada beberapa cara agar bisa tampil di NETTUTS. Salah satunya dengan mengirimkan file demomu yang bekerja, source code, teks tutprial dan gambar (dalam bentuk zip) melalui link di halaman Panduan Tutorial. Dengan begini, kamu akan mendapat jawaban lebih cepat, namun lebih banyak yang harus dikerjakan jika itu tidak sesuai dengan NETTUTS. (Hal ini masih direkomendasikan jika kamu belum pernah mengirim sebuah tutorial)

Buat jadi mudah. Daripada menulis kode demo dan tutorial terlebih dahulu. Csrilah ide terlebih dahulu. Sesungguhnha ini direkomendasikan sebelum kamu mengirim tutorial walauoun tidak dipublikasikan.

  1. Datang degan sebuah ide dan kirim ke saya melalui formulir di Panduan Tutorial (gunakan file ZIP kosong karena formulirnya membutuhkan itu) atau jika kamu sebelumnya pernah mengirim ide ke saya, kamu memiliki emailNETTUTS saya dan kamu bisa menghubungi saya langsung.
  2. Jika kamu belum pernah menulis tutorial sebelumnya untuk situs ini. Berijut ada beberapa tahapan:
    1. Tertarik dengan idemu bukan jaminan dari publikasi. Setelah melihat ide dan tertarik, kamu harus menunjukkan kode demo (walauoun hanya menggunakan servermu)
    2. Jika kamu tidak memiliki kode demo dan cocok untuk NETTUTS, maka aku akan menanyakannya - bukan meminta - jika kamu ingin menulis tutorial, namun tanpa jaminan akan dipublikasikan.
    3. Ingat, bahwa ini mungkin terdengar tidak adil. Tapi memang tidak ada bedanya denganmu yang langsung mengirim tutorialnya secara penuh. Dengan begini, kamu memiliki beberapa tahap di mana kamu dapat mengubah pikiranmu, mengurangi kurasan tenaga. Jika kamu ingin langsung mengirim tutorial beserta berkasnya langsung, itu juga tidak apa-apa.
  3. Di sisi lain, jika kamu telah menulis sebuah tutorial yang bagus namun butuh sedikit perubahan. Aku tidak akan jadi kaku. Kamu bisa mendapatkan idenya, katakan padaku, dan menulis tutorialnya.

Dalam kedua kasus, jika demonya terlihat potensial namun tutorialnya masih butuh perbaikan, saya akan berusaha untuk menghubungi dalam siklus yang terbatas untuk meningkatkan tulisannya. Namun, saya tidak bisa menulis untukmu. Setumpuk snippet code dan beberapa teks yang hanya menjelaskan apa yang terjadi bukanlah sebuah tutorial.

Membuat Editor Menjadi Lebih Mudah

Seiring pembaca di NETTUTS bertambah, saya memiliki waktu lebih sedikit untuk menilai apaklah sebuah tutorial cocok untuk NETTUTS. Buatlah ini menjadi mudah bagiku, buat saya ingin menggunakan tutroial dan demomu:

  1. Gunakan nama dan email aslimu saat pengiriman. (Kamu juga harus memiliki akun PayPal sehingga kami dapat membayarmu.)
  2. Jelaskan dengan terang apa yang akan muncul di tutorialmu, dan demo yang akan disajikan.
  3. Kirim demomu yang bekerja dan tidak membuat saya harus melakukan banyak pengaturan (melewati meng-upload berkas ke server)
  4. Jangan kirim demo yang membutuhkan saya untuk mengirim gambar saya sendiri atau yang lainnya, terutama jika kamu tidak menanyakannya sebelumnya. Saya ingin membantumu di waktu yang sempit.
  5. Keseluruhan, kurangi jumlah waktu yang harus saya habiskan dalam mengatur demomu untuk dinilai. Semakin banyak usaha yang dikeluarkan, semakin besar kemungkinan itu akan dikembalikan. (Kamu bisa selalu memulai demo di salah situsmu, meskipun pada akhirnya kamu harus mengirim berkasnya kepada saya)

Taruh dirimu pada posisiku dan pikirkan apa yang saya inginkan agar menerima tutorialmu, Jangan kirim sebuah seri jika kamu belum memiliki tutorial yang diterbitkan. Hal yang sama berlaku untuk seri lintas situs (yang bagian 1 untuj PSDTUTS, bagian 2 untuk NETTUTS)

Jelaskan Tiap Bagian Secara Menyeluruh

Terutama, tutorial ini untuk pembaca situs, bukan untukku. Jika judul tutorialnya menarik mereka, dan jika mereka membaca tutorialnya setelah melihat demo dan konten visual (gambar, diagram, dsb.) mereka akan ingin belajar. Sementara kamu tidak perlu menahan dan menjelaskan setiap baris kode seakan-akan mereka tidak pernah ngoding sebelumnya, kamu perlu menjelaskan baris yang membutuhkan penjelasan spesifik mengenai library, plugin maupun teknik yang kamu gunakan.

Masalah terbesar sejauh ini adalah: penggunaan code library atau plugin, memunculkan snippet code tapi tidak menjelaskan hal relevan dengannya. Mengatakan, "Ini adalah kode untuk melakukan X", tidak cukup. Mengapa pembaca mau membaca tutorialmu jika kamu tidak mengungkapkan cara melakukan sesuatu.

 Nada dan Gaya Menulis

Sebelum kamu mengirim teks tutorial yang asli, baca beberapa tutorial Collis di sini, sebagai titik awal. sementara adalah hal yang bagus jika kamu memiliki gayamu sendiri, kamu juga harus ingat bahwa kebanyakan pembaca memiliki sedikit ( atau banyak ) pengalaman menulis kode. Bicara dengan mereka, bukan pada mereka ( saya bukan tipe yang bertele-tele, yang datang dari sekolah asisten mengajar atau instruktur lab untuk siswa tanpa komputer yang mengambil mata kuliah wajib komputer)

Panduan dan Format

Telah ada halaman Panduan Tutorial, yang terhubung dengan sebuah ZIP tutorial kosong. Buka halaman ini dan gunakan template ZIP yang ada.

Tentukan Topikmu

Apakah kamu tahu tutorial apa yang ingin kamu buat? Tidak menyasar seseorang di sini, tapi beberapa dari kiriman di sini seperti hanya ingin mencari pamor dari publikasi di situs seperti NETTUTS. Tutorial dan demo mereka tidak jelas, dan tidak menarik.

Brainstorming

Satu cara terbaik untuk merencanakan dan membuat sebuah tutorial adalah dengan menggambar idemu dan hal-hal yang akan ada seperti yang akan kamu demosntrasikan. Semenjak tutorial NETTUTS berbasis pada kode, kamu memiliki persyaratan tambahan untuk memiliki kode untuk ditampilkan. Ini adalah hal-hal yang sukai dalam proses pembuatan tutorial - namun jangan lupa daftar kegiatan yang saya sebut sebelumnya:

  1. Brainstrom beberapa ide.
  2. Cari library, plugin, fitur, batas. dsb yang diperlukan.
  3. Garis besari fitur yang dinginkan, gambar atau replikasi layar browser ( ingat, kamu bisa menggunakan snapshot dari replika yang telah selesai di tutorialmu.)
  4. Tulis kode, tes dan perbaiki. ( Tes di Browsershots, dijelaskan di bagian berikutnya.)
  5. Tulis tutorial di sekitar kodemu, dan gabungkan dengan snippet, buat sesuai format di Panduan Tutorial.
  6. Edit tutorial jika diperlukan. anggap dirimu adalah pembaca. Jika mereka bertanya pada tutorialmu karena judul yang menarik, mereka mungkin tidak akan paham kodemu tanpa penjelasan yang tepat. JAngan hanya menampilkan kode dan menganggap pembaca harus paham. Jika begitu kamu menulis kode, bukan tutorial.
  7. Tambahkan elemen visual ( screenshot. dsb) Lihat bagian visual di bawah.

Demo dan masalah lintas Browser

Sementara bagus jika kodemu bisa bekerja di semua browser. Hal itu tidak selalu mungkin. Beberapa pustaka kode seperti jQuery tidak mendukung browser lama. Setidaknya kdoemu harus bekerja di browser yang mendukung pustaka kodemu.

Ngomong-ngomong,daripada protes para pembaca di komentar NETTUTS, Firefox 3 tidak banyak digunakan saat ini ditulis. Itu juga penuh dengan masalah teknis dan memori, berdasarkan para pengguna Twitter dan Plurk. Kami harus mempertimbangkan masalah kompabilitas browser dalam kasus demi kasus, namun kami juga coba meliputi browser yang paling stabil sekarang. Nyatakan jika kodemu tidak bekerja di suatu browser, dan jelaskan kenapa..

Salah satu yang dapat membantumu mengetesnya adalah Browsershots, yang merupakan cara mudah untuk mengetes kodemu di berbagai browser (virtual) di Linux, Windows, Mac OS, dan BSD)

Visual

Tidak seperti situs PSDTUTS, ketika datang ke pengembangan situs, ini tidak selalu datang dengan gambar yang menarik. Namun, tetap saja visual membuat sesuatu tampak menarik, dan juga membantu mengilustrasikan konsep. Jadi bagian visual adalah kewajiban dan kamu harus jadi kreatif. ini adalah beberapa pilihan:

  1. Gamabr relevan
  2. Snapshot dari layar aplikasimu dalam berbagai keadaan.
  3. Screencast aplikasimu saat digunakan atau yang relevan dengan tutorialmu.
  4. Sebuah diagram mewakili beberapa informasi tentang aplikasimu, kegunaan, ataupun desainnya.
  5. Video yang relevan, atau mungkin screencast dari kodemu saat digunakan.

Menggabungkan visual sesering dan seawal mungkin dari tutorial. Banyak tutorial yang dikembalikan karena tidak terdapat gambar. Tidak sulit untuk mengambil gambar layar dari aplikasimu, atau replikasi layar yang diproduksi dengan Photoshop, atau apapun yang relevan. Kamu tidak butuh lusinan gambar tapi beberapa dari yang penting sudah cukup.

Catatan: Jika visualmu dari sumber lain - baik dalam teks tutorial maupun demo- kamu harus memiliki izin eksplisit dan implisit dan memberi sitasi sumbernya. Contohnya, kamu bisa mengambil gambar dari Flickr, dibawah CC Commecial license

Sitasikan Sumbermu

Selain sitasi pada gambar, pastikan kamu memberi sitasi pada pustaka, atau sumber apapun. Ini tidak berarti kamu bisa menunjukkan pekerjaan orang lain sebagai milikmu, tapi lebih ke kamu memiliki tutorial yang lebih besar yang menggunakan teknik orang lain, sitasikan pada mereka.

Artikel

Selain tutorial, kami juga mempublikasikan satu artikel tiap minggu terkait pengembangan situs. Artikel kontribusi sekali tiap dua minggu. Sumber artikel dari kandidat yang bagus, seperti CSS Grid Framework - meskipun tidak harus sangat panjang.

Saya suka menerima artikel dari orang yang berpengalaman, walaupun kamu tidak harus menulis tutorial karena gayanya berbeda.

Respon

Saya berusaha untuk memberi respon kepada semua orang secepat mungkin, meskipun beberapa minggu ini jumlah kiriman menjadi sangat tinggi sehingga saya dapat kehilanagan jejak. Saya akan merespon, dan kamu bisa senggol saya jika tidak mendengar kabar beberapa minggu setelah mengirim ide atau tutorial.

kesimpulan

Saya menunggu untuk ide dan kiriman dari pembaca NETTUTS. Jika kamu tidak tahu harus mulai dari mana, Tutorial Collis di NETTUTS dan PSDTUTS adalah contoh yang baik. Keduanya menampilkan layar visual, kode dan gaya menulis yang baik.

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.