Membuat Kotak Pencarian Responsive di Sidebar Blog

Cara Membuat Kotak Pencarian (Search Box) atau Tombol Cari (Search Button) Responsive di Sidebar Blog

KOTAK Pencarian  wajib ada di situs web atau blog. Gunanya untuk memudahkan pengunjung mencari informasi yang mereka butuhkan.

Kotak pencarian juga sangat dibutuhkan blogger untuk menemukan posting yang, misalnya, akan dijadilan internal link di sebuah posting baru.

Berikut ini cara membuat kotak pencarian responsif (mobile friendly), fleksibel, dan fast loading di sidebar blog. Contohnya ada di sidebar blog CB ini.

1. Template > Customize > Advance > Add CSS
2. Masukkan kode di bawah ini:

#search-box {
position: relative;
width: 100%;
margin: -15px 0px -20px 0;
}

#search-form
{
height: 40px;
border: 1px solid #999;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
background-color: #fff;
overflow: hidden;
}
#search-text
{
font-size: 14px;
color: #ddd;
border-width: 0;
background: transparent;
}

#search-box input[type="text"]
{
width: 90%;
padding: 11px 0 12px 1em;
color: #333;
outline: none;
}

#search-button {
position: absolute;
top: 0;
right: 0;
height: 42px;
width: 80px;
font-size: 14px;
color: #fff;
text-align: center;
line-height: 42px;
border-width: 0;
background-color: #4d90fe;
-webkit-border-radius: 0px 5px 5px 0px;
-moz-border-radius: 0px 5px 5px 0px;
border-radius: 0px 5px 5px 0px;
cursor: pointer;
}

3. Klik "Apply to Blog"

4. Back to Blogger

Catatan:
Bisa juga dengan cara: Template > Edit HTML > Copas kode di atas tepat di atas kode ]]</b:skin>lalu "Save Template".

5. Klik "Layout" > Add a Gadget > Edit HTML/Javascript

6. Copas kode di bawah ini di kolom "Content"

<div id='search-box'>
<form action='/search' id='search-form' method='get' target='_top'>
<input id='search-text' name='q' placeholder='Search here...' type='text'/>
<button id='search-button' type='submit'><span>Search</span></button>
</form>
</div>

7. Save!

Kini Kotak Pencarian Responsive sudah muncul di Sidebar Blog Anda. Good Luck! 

#A3

Digital Imaging Dengan Photoshop

Tutorial Digital Imaging Dengan Photoshop adalah suatu teknik penggabungan beberpa gambar yang menghasilkan gambar yang sedikit dramatis. Tutorial Digital Imaging Dengan Photoshop  kali ini saya tidak menganjurkan untuk pengguna baru photoshop. Hmm rumit, hehehe

Untuk melihat lebih jelas klik pada setiap gambar. :)

1. Siapkan Stok photonya, anda bisa mencari di mbah google.

1.       2. Buka File dengan menekan CTRL + O, setelah terbuka, Lakukan seleksi objek menggunakan tool yang biasa anda lakukan untuk memotong object, apabila ada yang belum mengerti tetang bagaimana cara pemotongan bisa di checkdi mari.

3. Disini saya mengatur contrat warna menggunakan Create Ne fill Adjusment Layer seperti terlihat pada gambar

4.    Atur pengaturan warna menggunakan Color Balance & Hue Saturation seperti terlihat pada gambar.

5. Setelah pengaturan warna kita gunakan tool Dodge & Burn untuk menerangkan dan menggelapkan bagian-bagian tertentu sesuai arah cahaya. Dengan cara menggosok’y secara perlahan dengan menggunakan brush soft round diameter disesuaikan, dan untuk exposure max = 25 yang biasa saya gunakan. Lalu gabungkan semua layer menjadi satu layer.

6. Buka kembali kedua background yang sudah kita sediakan atur dan tarik dengan menggunakan CTRL + T, tarik dan sesuaikan

1.  7. Lakukan teknik masking seperti terlihat pada gambar dengan menggunakan Brush soft round dengan diameter di sesuaikan dan gosok secara perlahan di bagian pemutus antara awan dan padi.

8. Gunakan kembali tool Dodge & Burn sesuai dengan arah cahaya yang kita inginkan, seperti terlihat pada gambar

9. Dan sekarang untuk membuat olahan agar lebih dramatis, saya akan menggunakan teknik efek kabut dengan teknik masking seperti terlihat pada gambar

10. Untuk membuat masking menjadi warna hitam gunakan shortcut tool CTR+I sehingga gambar background Nampak kembali. Seperti terlihat pada gambar

11. Gosok bagian pemutus antara awan dan padi menggunakan brush soft round dengan diameter di sesuaikan, dengan mengurangi flow nya max 5 %, gosok secara perlahan dengan terus mengatur diameter brush, untuk mendapatkan hasil yang maksimal

12. Drag Object yang sudah kita potong ke background yang sudah kita edit.

1.     13. Untuk selanjutnya disini saya akan membuat ROL (Ray Of Light) atau cahaya yang jatuh dari langit menggunakan Brush Beam of Light dengan warna putih, bagi yang belum punyadownload aja dulu seperti terlihat pada gambar. Setelah arah cahaya ditentukan jangan lupa untuk mengatur ketajaman & kehalusan brushnya, bisa juga menggunakanfilter>>blur>>Gaussian bluruntuk menghaluskannya.

114. Karna bagian kaki masih terlihat tidak natural, kita manipulasi dengan mengcopy jerami yang sudah ada untuk menutupinya. Bisa menggunakan clone Stamp, ataupun dengan mencopy sebagian dari jerami tersebut lalu menggunakan eraser tool. Gimana enaknya aja.

1.  Kita atur kembali arah cahaya kiri dengan menggunakan Gradient Tool, blendingnyasoftlight.

16. Buka kembali stok gambar pohon yang sudah disediakan. Disini saya akan seleksi foto tersebut menggunakan channel

Setelah kita masuk ke channel pilih Blue lalu matikan semua gambar mata yang ada kecuali yang blue seperti terlihat pada gambar, lalu klik kanan duplicate Channel ok

Lalu atur level CTRL+L tarik point hitam dan putih seperti terlihat pada gambar

 Lalu klik Select>>load selection ubah menjadi invert OK sehingga semua terseleksi seperti terlihat pada gambar.

Centang kembali point mata RGB tersebut dan tutup mata yang blue. Lalu kembali ke layer utama dan CTRL+J untuk menduplikasinya

Hasil akhir.

Drag hasil seleksi pohon tersebut ke project kita lagi

1. Atur komposisi warna agar sama dengan project yang kita buat dengan Create New Fill Adjustment layer, lalu klik kanan Clipping Mask  terlihat gambar panah kebawah untuk menyeleksi bagian pohonnya saja sedangkan background tidak akan ikut berubah. Atur keselurannya seperti terlihat pada gambar

19. 1.       Untuk finishing,kita atur tone colornnya, disini saya menggunakan Gradient Mapblending Multiply Opacity 20 s/d 25 % seperti terlihat pada gambar dan photo filter yellow 42%. Lalu kita atur Hue-Saturation klik OK

Lalu kita atur Hue-Saturation klik OK

Lalu pilih Image>>Apply Image pilih Invert seperti terlihat pada gambar lalu OK

Apabila pengaturan warna masih kurang cocok disini saya baiasa menggunaka NIK COLOR untuk Finishingnya.

Silahkan di coba, Terima Kasih untuk Agi Manik Laga yang telah menyumbangkan Tutorial Digital Imaging Dengan Photoshop.

#A3

Tips Memaksimalkan SEO Onpage Blogspot Untuk Pemula

Tips Memaksimalkan SEO Onpage Blogspot Untuk Pemula - Optimasi seo onpage sampai saat ini masih memberikan kontribusi yang baik untuk artikel anda agar lebih ramah dimata mesin pencari, sehingga artikel blog yang kita miliki lebih mudah untuk ditemukan di mesin pencari terutama google, berbicara mengenai segala sesuatu yang berkaitan dengan SEO tidak akan lepas dari Optimasi seo onpage dan optimasi seo offpage, optimasi seo onpage menitikberatkan terhadap segala sesuatu yang berkaitan dengan segala upaya optimasi yang kita lakukan dari dalam blog atau situs yang bersangkutan, baik itu dari aspek template maupun dari aspek artikel yang sering kita buat, sedangkan optimasi seo offpage segala sesuatu yang berhubungan dengan upaya optimasi di luar situs yang bersangkutan, baik itu promosi secara offline, backlink maupun promosi online, namun sebisa mungkin harus memberikan efek positif terhadap blog yang bersangkutan.

Optimasi yang pertama kali harus kita perhatikan adalah optimasi seo onpage, dan tujuan utama yang harus kita prioritaskan adalah manusia bukan mesin pencari artinya bagaimana cara kita menyajikan sebuah artikel yang bermanfaat, informatif bagi manusia dan original, namun di balik itu kita bumbui dengan optimasi seo onpage, sehingga artikel bukan hanya berkualitas di mata manuasia atau pengguna internet yang mengunjungi blog anda juga dimata mesin pencari atau search enggine.

MEMAKSIMALKAN OPTIMASI SEO ONPAGE BLOG DALAM 3 TAHAP

Uptimasi seo onpage, menitik beratkan segala upaya optimasi yang bisa kita mulai dari template blog yang anda gunakan, seting blogspot yang disarankan, kemudian dilanjutkan bagaimana cara kita menyajikan artikel yang baik dan ramah seo, berikut beberapa hal yang bisa anda upayakan yang berkaitan dengan optimasi seo onpage agar optimasi seo onpage anda maksimal:

Tahap #1: Pilih Template yang SEO Friendly

Segala hal yang berkaitan dengan template, barangkali kita bisa memilih antara menggunakan template bawaan blogspot atau template, yang sudah dimodifikasi, namun dari kedua jenis template yang bisa kita gunakan disarankan untuk memilih template yang sudah dimodifikasi dan memiliki sifat seo Friendly (ramah seo), karena pada umumnya template bawaan kurang mendukung unsur-unsur seo sedangkan template seo friendly sudah dilibatkan unsur-unsur seo didalamnya, segala faktor seo yang dilibatkan di dalam template blog SEO Friendly tidak lepas dari hasil analisa para fakar seo yang diterapkan ke dalam template sehingga struktur template ketika menggenerate konten artikel postingan blog akan memiliki faktor seo yang lebih disukai oleh mesin pencari.

Banyak sekali tersedia template blog gratisan maupun berbayar yang bisa anda pilih untuk anda gunakan pada blog anda, namun dari banyaknya template yang tersedia yang harus anda pilih adalah template seo friendly yang ringan, karena ternyata meskipun di klaim sebagai template seo tidak sedikit yang kurang memperhatikan keringanan loading, bahkan banyak kode-kode di dalam template yang tidak digunakan tapi tidak dihapus sehingga kode template tidak clean dan dapat mempengaruhi loading halaman blog semakin berat. padahal ringannya loading itu merupakan salah satu dari 200+ google ranking faktor
Beberapa ciri template blog seo friendly:

Judul Pada tag H1 dan hanya memiliki tag H1 sebanyak 1 di setiap halaman, template blog yang mendukung optimasi seo onpage biasanya mengandung tag h1 berjumlah satu untuk setiap halaman, dan biasanaya tag H1 digunakan untuk judul artikel atau judul blog




Isi Konten di sebelah kiri dan sidebar di kanan, ini harus dipastikan dan sesuai dengan struktur template, ketika proses loading halaman blog akan lebih memprioritaskan konten terlebih dahulu untuk tampil baru kemudian sidebar,


Tahap #2: Optimalkan Setingan Blogspot Anda

Hal kedua yang harus anda perhatikan adalah melakukan pengaturan setingan blogspot anda yang berkaitan dengan hal hal yang dapat mendukung optimasi seo onpage blog anda. ada beberapa setingan blog yang benar-benar harus anda perhatikan agar optimasi seo onpage blog anda semakin maksimal, bebertapa setingan yang harus anda atur adalah sebagai berikut:

#1. Aktifkan moderasi komentar pada blog anda

Jika blog anda memberlakukan komentar, sebaiknya komentar anda moderasi, moderasi komentar berguna untuk meninjau terlebih dahulu setiap komentar blog yang masuk sehingga anda bisa menilai setiap komentar tersebut apakah layak untuk diterbitkan atau tidak, jika komentar dianggap tidak layak dan merupakan jenis komentar spam atau isi komentar tidak ada sangkut pautnya dengan artikel yang dibahas sebaiknya anda kategorikan dan masukan ke dalam kotak spam atau dihapus saja, namun jika komentar berkaitan erat relevan dengan isi artikel secara keseluruhan anda bisa menebitkannya.

Komentar memang sangat perlu untuk dimoderasi untuk meminimalisir komentar-komentar link spam yang malah tidak bermanfaat dan bisa mengotori blog anda. untuk mengatur moderasi komentar langkah-langkahnya adalah sebagai berikut:

a. Masuk ke halaman utama akun blogspot anda, kemudian pilih blog yang dimaksud

b. Pada bilah menu sisi kiri, silahkan anda pilih menu "Setelan", kemudian pilih sub menu "Pos dan Komentar" seperti terlihat pada gambar dibawah ini.

c. Lakukan setingan seperti terlihat pada gambar diatas, jika selesai jangan lupa tekan tombol "Simpan stelan"


#2. Aktifkan Meta Deskripsi blog anda

salah satu yang tidak kalah penting yang dapat mendukung optimasi seo onpage blogspot anda adalah keberadaan meta deskripsi, meskipun meta deskripsi saat ini bukan merupakan bagian dari 200+ google ranking faktor (faktor-faktor seo) namun keberadaan deskripsi ternyata masih memiliki peran untuk meningkatkan sinyal relevansi dimata mesin pencari, semakin kuat sinyal relevansi maka mesin pencari google akan bisa membedakan dan memilih artikel yang benar-benar relevan dengan kriteria pencarian pengguna internet. untuk mengaktifkan meta deskripsi blog, langkah-langkahnya adalah sebagai berikut:

a. Masuk ke halaman utama akun blogspot anda, kemudian pilih blog yang dimaksud

b. Pada bilah menu sisi kiri, silahkan anda pilih menu "Setelan", kemudian pilih sub menu "Preferensi Penelusuran".

c. Di bagian kanan atas pada Label "Deskripsi ?", pada Aktifkan deskripsi penelusuran silahkan pilih "Ya", kemudian di bagian kotak isian deskripsi silahkan anda masukan deskripsi blog anda, terlihat seperti gambar dibawah ini:

Silahkan masukan deskripsi yang mewakili niche atau topik yang dibahas pada blog anda, idealnya jumlah karakter untuk deskripsi blog maksimal 150 karakter dan upayakan tidak memiliki kata yang berulang lebih dari 2 kali, jika sudah kemudian tekan tombol "Simpan Perubahan",

Deskripsi ini adalah deskripsi penelusan untuk alamat homepage blog anda, jika anda mengaktifkan deskripsi penelusuran ini, maka ini secara otomatis akan mengaktifkan juga deskripsi penelusuran untuk setiap artikel anda nanti, dan anda bisa memasukan deskripsi penelusuran artikel blog di editor blog ketika membuat artikel postingan blog.

#3. Batasi Umpan Situs atau RSS Feed Blog anda

blog berflatform blogspot memiliki rss feed yang digenerate secara otomatis oleh mesin blogspot itu sendiri, rss feed sebenarnya berfungsi untuk memudahkan para pelanggan artikel blog yang bersangkutan agar lebih mudah menerima informasi update artikel terbaru sehingga mereka lebih mudah untuk membaca artikel blog dengan bantuan tool rss reader tanpa harus mengunjungi blog yang digemarinya satu-persatu.

Namun terkadang jalur rss feed sering digunakan oleh pihak-pihak tidak bertanggung jawab tukang kopi paste untuk melakukan pencurian konten otomatis melalui teknk Auto Blog, mereka menggunakan jalur rss feed untuk mendapatkan konten dari blog tertentu agar terbit juga secara otomatis di blog miliknya. tentu ini sangat tidak diiinginkan oleh si empunya konten asli, tanpa sepengatetahuannya artikel yang dengan susah peyah mereka buat tiba-tiba artikel tersebut secara otomatis terbit juga di blog orang lain.

Efek buruk dari autoblog akan menimbulkan duplikat konten yang bermunculan dimana-mana dan ini tidak baik dimata mesin pencari untuk blog pemilik konten aslinya, malah kemungkinan besar reputasi blog bisa merosot dimata mesin pencari.

oleh karena itu salah satu cara untuk menghindari pencurian konten dengan Auto Blog seperti itu salah satunya adalah dengan membatasi rss feed blog anda menjadi singkat, langkah-langkahnya adalah sebagai berikut:

a. Masuk ke halaman utama akun blogspot anda, kemudian pilih blog yang dimaksud

b. Pada bilah menu sisi kiri, silahkan anda pilih menu "Setelan", kemudian pilih submenu "Lainnya".

c. Kemudian pada label "Izin umpan situs blog" pilih Singkat, terlihat seperti tambilan gambar dibawah ini:

Silahkan anda lakukan pengaturan seperti gambar diatas, kemudian jika sudah Tekan tombol "Simpan Setelan"

Tahap #3: Optimalkan Faktor SEO Pada Artikel Postingan Blog Anda

Selain mempersiapkan blog dengan memilih template blog SEO friendly kemudian dilanjutkan dengan melakukan pengaturan setingan blogspot yang disarankan, satu lagi yang tidak kalah penting adalah mengoptimalkan faktor seo onpage didalam artikel postingan yang kita buat,dengan cara selalu melibatkan segala sesuatu yang berkaitan dengan pendukung optimasi seo onpage dalam artikel.

Berikut beberapa cara untuk mengoptimalkan optimasi seo onpage dalam artikel postingan blog:

#1. Buat artikel panjang, berkualitas dan original

Untuk memaksimalkan seo onpage artikel anda bisa membuat artikel postingan yang terdiri dari 1000 kata atau lebih, banyak praktisi seo yang sudah melakukan penelitian mengenai hubungan antara artikel panjang dengan peringkat di mesin pencari, mereka menyimpulkan bahwa semakin banyak, informatif dan original itu akan semakin baik.


#2. Optimasi Gambar pada Area Postingan

Jika anda memutuskan untuk menyertakan gambar pada area postingan sebaiknya, jangan lupa untuk mengoptimasi gambar tersebut agar lebih seo, caranya adalah mengaktifkan attribut ALT pada gambar tersebut, langkah-langkahnya adalah sebagai berikut:

Masukan gambar pada area postingan


Klik gambar di area editor postingan, kemudian pada menu yang muncul pilih Properties seperti terlihat pada gambar dibawah ini:

Silahkan anda klik menu properties tersebut maka akan disajikan tampilan untuk mengisi title gambar dan juga alt text untuk gambar tesebut yang harus anda isi:

Silahkan isi title tag dan alt tag yang mewakili gambar tersebut, kemudian tekan tombol Ok


#3. Persingkat Link URL (Permalink) untuk artikel yang bersangkutan

Saran dari beberapa Pakar seo, sebaiknya url artikel postingan bisa kita buat sesingkat mungkin namun masih memiliki relevansi yang sama dengan judul, umumnya pada blogspot URL secara otomatis akan mengikuti judul artikel yang bersangkutan yang dipisahkan dengan tanda -, jika judul panjang maka URL pun akan mengikuti, oleh karena itu anda harus memodifikasinya agar kelihatan pendek, lebih pendek itu lebih baik.

Untuk memodifikasi perma link untuk URL artikel postingan langkah-langkahnya adalah sebagai berikut:

Pada editor artikel postingan, pada menu sebelah kanan pilih menu Link:

Silahkan isi permalink sesingkat mungkin namun harus memiliki relevansi dengan judul artkel yang anda buat, ganti spasi dengan tanda min -, kemudian tekan tombol selesai.




#4. Aktifkan meta deskripsi artikel

Sekali lagi, meta deskripsi meskipun tidak termasuk kedalam 200+ goole ranking faktor, namun dianggap memiliki andil dalam memperkuat sinyal relevansi artikel dimata mesin pencari, oleh karena itu untuk setiap artikel postingan yang anda buat sebaiknya dilengkapi dengan deskripsi penelusuran, agar artikel memiliki peluang yang baik di hasil pencarian google.

Untuk memasukan deskripsi penelusan artikel postingan blog, langkah-langkahnya adalah sebagai berikut:

Di editor artikel postingan, pada menu di samping kanan klik Menu "Deskripsi Penelusuran", seperti terlihat pada gambar dibawah ini:

Silahkan anda isi dekripsi blog yang relevan dengan isi artikel secara keseluruhan, disarankan jangan mengandung lebih dari 2 kata yang sama, dan maksimal 160 karakter. kemudian tekan tombol "Selesai".




#5. Masukan Label blog

Label pada blog atau lebih dikenal dengan istilah tag fungsinya adalah untuk mengkategorikan artikel yang dimaksud agar terorganisir dengan baik, dengan memberikan label pada artikel blog, maka label tersebut bisa dijadikan referensi untuk menu, dan juga breadcrumb.

Langkah-langkah untuk memasukan label untuk artikel blog adalah sebagai berikut:
Di editor artikel postingan, pada menu di samping kanan klik Menu "Label", seperti terlihat pada gambar dibawah ini:

Silahkan anda masukan kategori untuk blog anda tersebut, atau anda bisa klik salah satu kategori blog yang sebelumnya anda buat, lihat tulisan berwarna biru di bawah silahkan klik pada text tersebut untuk kategori artikel yang bersangkutan, kemudian tekan tombol "Selesai"

Sebenarnya untuk mengoptimalkan seo onpage untuk blog berflatform blogspot sampai tahap diatas sudah cukup untuk mendukung optimasi seo onpage blog anda.

Setelah artikel selesai anda publish anda bisa lanjutkan untuk mengupayakan agar artikel yang anda terbitkan tersebut lebih cepat untunk diindex dan dikenali oleh mesin pencari google.

Demikian informasi sederhana yang mungkin berguna untuk anda tentang Tips Memaksimalkan SEO Onpage Blogspot Untuk Pemula, selamat mencoba dan semoga bermanfaat.

sumber : strukturkode.blogspot.com

#A3

Cara Daftarkan Situs Web ke Google, Yahoo, Bing, dll

Sudah tahu tentunya dengan yang namanya search engine. Kalau belum tahu kebangetaaan bingit. Pokoknya search engine itu adalah mesin pencari, hehe ya iya lah, iya sih, iya dong, salah satunya yang paling populer adalah google.com.

Okay saat ini penulis akan berbagi macam-macam search engine dan cara untuk mendaftarkan situs web anda agar dapat ter-index, gak tau juga? subhanallaah... beuh parah, sama dulu penulis juga begicu cuy, hehe. Maksudnya agar web terdaftar oleh mesin pencari. Oke langsung saja , berikut daftarnya :

1. Google.com
https://www.google.com/webmasters/tools/submit-url?continue=

2. Bing.com dan Yahoo.com
http://www.bing.com/toolbox/submit-site-url

Setahu saya keduanya sudah bekerjasama. Dibuktikan dengan pada saat saya mencoba membuka yahoo.com, lalu pada pojok bawah kanan ada tulisan kirimkan situs anda -> "submit your site for free". Maka akan diarahkan ke mesin pencari bing.

3. submitexpress.com
http://www.submitexpress.com/free-submission.html

4. Official search.com
http://officialsearch.com/submit.html

5. freewebsubmission.com
http://freewebsubmission.com/

6. Baidu.com
http://www.baidu.com/search/url_submit.html

Naah begitu lah... sebenarnya masih banyak lagi cuy.  Demikian info yang dapat penulis sampaikan untuk para pembaca, jangan kapok ya berkunjung ke web saya.
Salam

#A3

Download Balsamiq Mockups 3 Full Gratis

Sambil nunggu sahur, kali ini mimin mau share software khusus buat kalian nih yang berprofesi sebagai webdesigner.. Balsamiq Mockups 3! software yang berguna untuk membuat mockup / konsep desain web secara instant! mudah! dan berguna tentunya! ^_^

"Seperti apa software Balsamiq Mockup ini??" berikut adalah screenshot nya :



Seperti itulah penampakan software Balsamic Mockups ini, untuk sobat yang sudah tidak sabar ingin mendownload software tersebut, silahkan download melalui link di bawah ini :

Download Blasamiq Mockups 3 Full + Serial Number

#A3

Langkah Langkah Membuat Website

Dalam membuat website ada bebrapa langkah yang harus dipelajari salah satunya adalah belajar HTML
Namun apabila anda kurang mengenal HTML dan susah untuk belajar karena tidak mempunyai biki panduan, jangan kuatir karena banyak yang menyediakn tutorial di berbagai situs

A.Langkah Membuat Website

Bermacam-macam langkah yang digunakan profesi web kita untuk membuat suatu homepage. Berikut ini adalah proses secara umum yang dilakukan kebanyakan profesi web di Indonesia untuk membuat web.
1. Membuat Sketsa Desain : Desainer bisa saja menuangkan ide dalam membuat interface suatu homepage dalam bentuk sketsa di kertas dahulu. Untuk kebanyakan orang, biasanya langkah ini dilewatkan dan langsung pada langkah membuat layout desain dengan menggunakan software.
2. Membuat Layout Desain : Setelah sketsa sudah jadi, kita menggunakan software seperti Adobe Photoshop, Adobe Illustrator, Macromedia / Adobe Fireworks dan Macromedia / Adobe Freehand untuk memperhalus sketsa desain.
3. Membagi gambar menjadi potongan kecil-kecil : Setelah layout desain homepage sudah jadi. File gambarb tersebut dipecah menjadi potongan kecil-kecil untuk mengoptimize waktu download. Untuk melakukan hal tersebut dapat menggunakan software Adobe Image Ready. Software ini dapat langsung memotong gambar yang besar tadi dan otomatis juga menjadikannya ke dalam format html. Langkah ini bisa saja dilewatkan bila ukuran gambar kita tidak terlalu besar.
4. Membuat Animasi : Animasi diperlukan untuk menghidupkan homepage kita agar menarik pengunjung. Macromedia / Adobe Flash dan Gif Construction Set dapat dipakai untuk melakukan hal tersebut.
5. Membuat HTML : Setelah itu kita merapikan layout desain kita seperti menempatkan beberapa tombol dan gambar, menambah text, mengedit script HTML, membuat layout form ke dalam format HTML. Untuk itu kita perlu software HTML Editor seperti Macromedia / Adobe Dreamweaver, Microsoft Frontpage dan Allaire Homesite.
6. Programming dan Script : Untuk website e-commerce, iklan baris, lelang, database, membuat guestbook, counter dan forum diskusi. File HTML kita perlu programming untuk melakukan aktivitas semacam itu. Programming dan script ini bisa dibuat dengan menggunakan ASP, Borland Delphy, CGI, PHP, Visual Basic. Dan perlu diperhatikan bahwa programming dan script ini biasanya dilakukan setelah desain homepage kita telah jadi.
7. Upload HTML : Setelah file kita telah menjadi html beserta gambar dan scriptnya. Kita perlu meng-upload file kita ke suatu tempat ( hosting ), agar semua orang di dunia dapat mengakses halaman html kita. Biasanya Macromedia / Adobe Dreamweaver dengan fasilitas site FTP dan Microsoft Frontpage dengan Publishnya telah menyediakan fasilitas upload ini. Atau dapat menggunakan software seperti WS-FTP, Cute FTP, Bullet FTP.
8. Homepage Pribadi : Untuk homepage pribadi atau yang sekedar ingin coba-coba biasanya setelah file html sudah jadi dapat hosting di tempat-tempat gratis, memakai guestbook dan counter gratis dan menambah macam-macam accesories dalam mempercantik homepage pribadi tersebut.

B. Tools Software Pembuatan Website
________________________________________
Berikut ini software-software yang sering digunakan dalam mebuat suatu web, mulai dari disain, efek disain, animasi, web editor, programing, sound editor hingga software untuk meng-upload web ke tempat hosting.
Desain : Untuk membuat desain suatu homepage biasanya para web designer dimulai dengan software ini sebagai tampilan sementara atau dalam membuat layout homepage.
1. Adobe Photoshop : Desain berbasis titik ( bitmap )
2. Adobe Image Ready : Memotong gambar-gambar ke dalam format html
3. Adobe Illustrator : Desain berbasis vector
4. CorelDraw : Desain berbasis vector
5. Macromedia / Adobe Freehand : Desain berbasis vector
Efek Desain : Hal ini dilakukan untuk menghidupkan desain yang telah kita rancang. Seperti menambah efek cahaya, textur dan manipulasi teks.
1. Macromedia / Adobe Firework : Efek teks
2. Painter : Memberikan efek lukisan
3. Ulead Photo Impact : Efek frame dan merancangan icon yang cantik.
4. Plugins Photoshop : Seperti Andromeda, Alien Skin, Eye Candy, Kai’s Power Tool dan Xenofex juga sangat mendukung untuk memberi efek desain sewaktu anda mendesain layout homepage di Photoshop.
Animasi : Penambahan animasi perlu untuk membuat homepage agar kelihatan menarik dan hidup.
1. 3D Studio Max : Untuk membuat objek dan animasi 3D.
2. Gif Construction Set : Membuat animasi file gif
3. Macromedia / Adobe Flash : Menampilkan animasi berbasis vector yang berukuran kecil.
4. Microsoft Gif Animator : Membuat animasi file gif
5. Swift 3D : Merancang animasi 3D dengan format file FLASH.
6. Swish : Membuat berbagai macam efek text dengan format file FLASH.
7. Ulead Cool 3D : Membuat animasi efek text 3D.
Web Editor : Menyatukan keseluruhan gambar dan tata letak desain, animasi, mengisi halaman web dengan teks dan sedikit bahasa script.
1. Alaire Homesite
2. Cold Fusion
3. Microsoft Frontpage
4. Macromedia Dreamweaver
5. Net Object Fusion
Programming : Hal ini dilakukan setelah sebagian besar desain homepage telah rampung. Programming bertugas sebagai akses database, form isian dan membuat web lebih interaktif. Contoh : Membuat guestbook, Form isian, Forum, Chatting, Portal, Lelang dan Iklanbaris.
1. ASP ( Active Server Page )
2. Borland Delphy
3. CGI ( Common Gateway Interface )
4. PHP
5. Perl
Upload : File html kita perlu di letakkan ( upload ) di suatu tempat ( hosting ) agar orang di seluruh dunia dapat melihat homepage kita.
1. Bullet FTP
2. Cute FTP
3. WS-FTP
4. Macromedia / Adobe Dreamweaver : dengan fasilitas Site FTP
5. Microsoft Frontpage : dengan fasilitas Publish
Sound Editor : Homepage kita belum hidup tanpa musik. Untuk mengedit file midi atau wav, perlu alat khusus untuk itu.
1. Sound Forge : Mengedit dan menambah efek file yang berformat mp3 dan wav.
2. Cakewalk : Mengedit dan menambah efek untuk file yang berformat midi.
Banyak sekali memang software untuk membuat suatu homepage dan kita tidak perlu mempelajari semua software tersebut di atas. Tapi untuk mempermudah, bagi pemula lebih baik dimulai terlebih dulu dengan mempelajari software Adobe Dreamweaver agar lebih mengenal aturan-aturan membuat homepage dan mengenal bahasa html. Setelah itu baru Adobe Photoshop yang dipakai kebanyakan para desainer.

SELAMAT MENCOBA. . .

#A3

Persiapan Software Desain Web

Persiapan Software Desain Web

Dalam pembuatan sebuah web design, tentunya kita membutuhkan beberapa software pendukung, ada banyak sekali software yang bisa kita gunakan, ratusan bahkan ribuan. Namun yang akan penulis bahas disini berdasarkan pengalaman pribadi. Adapun software atau aplikasi yang perlu kalian persiapkan dalam membuat sebuah web design adalah sebagai berikut :

1. Adobe Dreamweaver
2. Web Browser (Modzila Firefox, Google Chrome, dsb)
3. XAMPP
4. Adobe Photoshop
5. Adobe Flash
6. Corel Draw

Itulah minimal software yang perlu ada. Kenapa penulis menomor satukan Adobe Dreamweafer? Karena dengan software tersebutlah kita akan merancangnya dari nol sampai akhir, bahkan bisa dikatakan sebenarnya bisa desain web tanpa perlu bantuan editor/creator grapich seperti Adobe Photoshop dan Corel Draw. Seiring perkembangan zaman dan tekhnologi, kini Adobe Dreamweaver memberikan kemudahan bagi penggunanya, bahkan merupakan software terstandard perusahaan web design saat ini. Kemudian XAMPP sebagai penyimpanan dan penghubung database website kita nantinya untuk daat dilihat dari hosting lokal atau localhost. Aobe Photoshop dan Coreldraw sebagai pendukung, jika anda kurang puas dengan design yang hanya melalui fasilitas Dreamweaver. Software ini sebagai kreasi design dan juga edit gambar. Sedangkan Adobe Flash adalah sebagai salah satu software untuk gambar bergerak dengan format gif, fly, dan masih banyak lagi.... Yang kemudian kita gunakan sebagai slider di halaman beranda website supaya lebih menarik. Demikianlah persiapan awal dalam membangun desain web.

#A3