Contoh Web Editor

Software pada kategori ini hanya bertugas untuk mengolah skrip HTML, CSS, PHP, atau JavaScript yang hanya terdiri dari teks. Jadi sebenarnya gak perlu software berat yang ribet-ribet amat. Hanya dengan Notepad bawaan Windows sebenarnya sudah bisa, tapi menggunakan aplikasi yang bukan dibuat untuk web editor tentu ada kekurangannya.

Dalam suatu file teks bisa saja terdapat berbagai skrip pemrograman web. Maka diperlukan sebuah web editor yang cerdas yang dapat membantu Anda membedakannya. Cara umum yang digunakan web editor adalah dengan memberikan warna yang berbeda pada masing-masing bahasa pemrograman juga perintah-perintahnya.

Salah satu web editor populer adalah Adobe Dreamweaver (dulu bernama Macromedia Dreamweaver). Web editor ini juga menggunakan sistem WYSIWYG (What You See Is What You Get). Jadi desain web yang Anda lihat pada Adobe Dreamweaver itulah yang akan Anda lihat pada browser. Selain fitur membedakan warna (syntax coloring) terdapat juga berbagai fasilitas lain yang banyak membantu seorang web designer.

Kalau mau cari yang gratisan tapi hebat maka pilihan saya jatuh kepada notepad++. Berbagai macam bahasa pemrograman juga didukungnya, kira-kira ada 48 bahasa pemrograman. Kekurangannya adalah Notepad++ bukan web editor WYSIWYG. Jadi Anda hanya akan melihat skrip yang berisi kumpulan sintaks pemrograman tanpa melihat tampilan aslinya sedikitpun. Oleh sebab itu biasanya Notepad++ jarang digunakan oleh web designer pemula karena lebih ditujukan bagi mereka yang suka coding secara murni. Jadi mau pilih Adobe Dreamweaver atau Notepad++

Pemahaman Web Designer

Desainer Web atau Web Designer adalah orang yang mempunyai keahlian menciptakan konten presentasi (biasanya hypertext atau hypermedia) yang dikirimkan ke pengguna-akhir melalui World Wide Web, melalui Web browser atau perangkat lunak Web-enabled lain seperti televisi internet, Microblogging, pembaca RSS.

Halaman Web dan situs Web dapat halaman statis, atau dapat diprogram untuk halaman dinamis yang secara otomatis mengadaptasi konten atau tampilan visual tergantung pada berbagai faktor, seperti masukan dari pengguna akhir, masukan dari para Webmaster atau perubahan dalam lingkungan komputasi (seperti situs yang terkait dengan database yang telah diubah).

Tugas seorang Desainer Web secara umum adalah menentukan ? look and feel? dari sebuah situs Web. Secara langsung atau tidak, kita harus menguasai dan memahami hal-hal yang berkaitan dengan tampilan dari sebuah situs Web. Seorang desainer Web harus pula memahami penerapan aspek-aspek yang terdapat di dalam desain Web, walaupuan tidak menguasai. Seperti halnya Java Script, kita tidak wajib mengetahui dan mampu membuat Java Script sendiri untuk kebutuhan desain, namun bagaimana dan estetika penerapan Java Script pada desain akan sangat menguntungkan bila kita memahaminya.

Dalam membuat Web, seorang desainer Web menentukan aspek-aspek desain yang diperlukan seperti pemilihan Font, warna, tataletak, dan lainnya. Tugas seorang desainer Web tidaklah semudah yang dibayangkan, penguasaan software-software grafis dan animasi dan HTML authoring saja tidak cukup untuk membuat situs Web yang baik. Banyak hal yang harus menjadi pertimbangan, terlebih bila dihadapkan dengan keinginan Klien, kita akan dihadapkan dengan kepuasan klien. Terkadang idealisme kita sebagai desainer Web akan kalah dengan idealisme klien.

Tujuan Perancangan Web

Desain   website adalah langkah awal sebelum melakukan  pembuatan website. Langkah desain   Web ini diawali dari tujuan pembuatan  website, diantaranya :

• Sarana presentasi profil perusahaan yang bisa   diakses di seluruh Indonesia dan dunia.
• Sarana promosi produk dan jasa.
• Media Komunikasi antar individu dan saling bertukar informasi misalnya jejaring sosial.
• Media expresi pribadi maupun kelompok.
• Menyediakan sarana penyebar ilmu pengetahuan.
• Tempat untuk belajar baik dengan interaktif langsung maupun forum.   
• Sarana berbagi file baik berupa program maupun data.
• Sebagai alat transaksi online sehingga memudahkan melakukan transaksi dimana saja dan   kapan saja.

Memahami Maksud Klien dalam Merancang Web

1. Tujuan Dari Bisnis
Hampir setiap bisnis yang dijalankan klien memiliki Visi dan Misi. Memahami dasar dari mengapa bisnis klien kita exist sangatlah penting jika kita ingin merancang sebuah situs web yang benar-benar mencerminkan bisnis kilen yang efektif bagi para pengunjungnya.

2. Spesifikasi Produk dan Layanan Klien
Setelah kita paham dan mengerti dasar bisnis klien, selanjutnya hal penting yang harus kita tau adalah apa yang ditawarkan klien kita kepada pelanggannya sehingga klien kita mendapatkan income dari bisnisnya. Apapun jenis website yang akan kita buat baik e-commerce atau macam-macam website yang lainnya, sangat penting untuk mengetahui apa yang klien kita tawarkan kepada pengunjung website.

3. Demografi Klien dan Pelanggan Klien Kita
Dapatkan informasi tentang demografi bisnis klien dan pelanggannya sebanyak-banyaknya, seperti informasi tentang usia, jenis kelamin, pekerjaan, pendapatan dari klien akan benar-benar membantu kita dalam menentukan gaya design dari website

4. Budaya Perusahaan
Website yang baik adalah website yang mencerminkan bisnis. Dengan demikian untuk dapat membuat website yang baik, kita harus memahami budaya dari perusahaan. Kita bisa memahami hal itu dengan cara beberapa kali berkunjung ke perusahaan dan melakukan observasi jika memungkinkan, atau melihat materi-materi bisnis yang ada seperti brosur, business card atau iklan-iklan klien kita.

5. Menentukan EstimasiProyek
Sebagai seorang desainer, tentunya penting bagi kita untuk membuat estimasi yang baik dengan desain yang akan dibuat, kita harus bisa mencerminkan bisnis klien dan memposisikan area-area yang memudahkan para pengunjung dalam mendapatkan informasi perusahaan. Sehingga proyek kita baru dikatakan sukses apabila tingkat penjualan klien kita meningkat

Tips Membuat CSS

1. Memberi Jarak yang Tepat
Berilah jarak indentasi saat menuliskan properti CSS, pisahkan antara properti CSS yang satu dengan yang lainya bila memang propertinya banyak. Pemberian jarak akan membuat kode CSS terorganisasi dengan baik sehingga mudah untuk menemukan properti yang kita cari. Bayangkan bila menuliskan CSS seperti sebuah paragraph cerita pendek dan memiliki 500 baris kode tentu mata kita akan tegang dan pusing saat menelusuri kode.


2. Penulisan Kode Secara Singkat
penulisan yang pendek akan mempercepat proses penulisan kode, selain itu juga akan mempercepat tingkat cluster dalam css sehingga bisa lebih cepat juga di render oleh browser.


3. Lakukan CSS Dengan Benar
Anda tidak boleh membuat file CSS sebelum anda selesai melakukan markup terhadap HTML anda. Buatlah dulu keseluruhan markup di HTML mulai dari kepala sampai kaki. CSS tidak bernilai sama sekali tanpa format Dokumen HTML yang baik.


4. Membuat Comment
membuat comment di setiap bagian pengerjaan adalah hal yang baik untuk membuat penulisan kita tetap bersih dan terorganisir dengan baik. ini juga membantu anda untuk mempermudah penelusuran kode.


5. Menulis Secara Terstruktur
sepertihalnya menggambar manusia anda akan menggambar kepalanya dahulu sebelum menggambar kaki, begitu juga dalam menuliskan kode sebaiknya anda mulai dari kepala HTML (header) terstruktur hingga bagian kaki (Footer). Penulisan kode secara tidak terstruktur akan memusingkan anda sendiri.


6. Hapus Kode Tak Terpakai
Mungkin saat menuliskan kode banyak atribut Class dan ID yang tidak jadi dipakai, buanglah segera semua atribut class dan ID yang tidak terpakai atau pisahkan dalam file referensi yang berbeda. Apabila anda belakangan ingin merubah CSS anda, anda tidak akan di pusingkan dengan banyaknya atribut class dan ID yang sudah tidak digunakan

Pemahaman HTML

HTML adalah sebuah bahasa markup yang digunakan untuk membuat sebuah halaman web dan menampilkan berbagai informasi di dalam sebuah browser Internet. Bermula dari sebuah bahasa yang sebelumnya banyak digunakan di dunia penerbitan dan percetakan yang disebut dengan SGML (Standard Generalized Markup Language), HTML adalah sebuah standar yang digunakan secara luas untuk menampilkan halaman web. HTML saat ini merupakan standar Internet yang didefinisikan dan dikendalikan penggunaannya oleh World Wide Web Consortium (W3C).

HTML berupa kode-kode tag yang menginstruksikan browser untuk menghasilkan tampilan sesuai dengan yang diinginkan. Sebuah file yang merupakan file HTML dapat dibuka dengan menggunakan browser web seperti Mozilla Firefox, Microsoft Internet Explorer, Google chrome dan beberapa browser lain.

Kode HTML,dalam setiap kodenya di awali dengan tanda <> dan di akhiri dengan </>

Contoh:

<html> merupakan penandaan bahwa halaman HTML di mulai

</html> merupakan tanda bahwa halaman html ditutup

<Head> ini adalah awal kepala

</Head> ini artinya merupakan akhir bagian kepala

<Title> menujukkan judul yang akan keluar pada Bar atas yang ditutup dengan </title>

<center> ini awal agar text berada di tengah

</center> ini merupakan akhir bagian dari membuat text rata tengah tersebut

<body> isi dari halaman tesebut,seperti contoh HTML diatas,isinya berupa kata "MY FIRST WEB"
yang ditutup dengan akhir isi halaman,yaitu </body>

Sedangkan tanda <p> yaitu pembentukan alinea baru,seperti halnya anda menekan Enter pada Microsoft Word untuk membentuk kursor baru pada alinea baru,yang mana diakhiri pula dengan tanda </p>
Untuk membentuk alinea baru bisa juga menggunakan kode <br> dan diakhiri dengan </br>

Pengertian CSS

 CSS adalah singkatan dari Cascending Style Sheet, digunakan untuk mengatur style atau tampilan dari dokumen HTML. CSS ini bersifat embeded pada tag HTML yang artinya menempel atau melekat pada tag HTML. Sebagai Contoh embeded seperti di bawah ini <h1 class=”header”>Pengantar</h1>.

Dengan CSS ini, kita bisa mengontrol/mengatur seluruh tampilan halaman web dengan hanya sebuah dokument CSS, biasan ekstensi untuk file CSS adalah .css (dot css).

Selain itu, CSS juga dapat menggantikan fungsi tabel dan dapat meminimalkan ukuran file HTML. Bayangkan jika Anda membuat sebuah kotak dengan tabel dan CSS jauh lebih efesien. Terdapat tiga jenis CSS yaitu : 
- Inline CSS
- Internal CSS
- External CSS

CSS merupakan alternatif bahasa pemrograman web masa yang akan datang, dimana mempunyai banyak keuntungan, diantaranya :

- Ukuran file lebih kecil

- Load file lebih cepat

- Dapat berkolaborasi dengan JavaScript

- Pasangan setia XHTML

- Menghemat pekerjaan tentunya, dimana hanya membuat 1 halaman CSS.

- Mudah mengganti-ganti tampilan dengan hanya merubah file CSS nya saja.

- Dan banyak lagi yang lainnya

Tips Agar Web Populer

1.Proses Loading Situs Web Harus Cepat

Para pengguna internet menginginkan informasi yang tersaji dengan cepat. Bayangkan saja betapa bosannya seorang pengunjung web manakala harus menunggu relatif lama untuk dapat mendownload keseluruhan sebuah halaman web. Ia bisa saja mengklik tombol Stop untuk mematikan proses download halaman kemudian mematikan fasilitas auto load image dari browsernya atau malah pindah ke halaman lain yang lebih cepat.Itu bisa terjadi bila situs tersebut membutuhkan waktu yang sangat lama untuk loadingnya (terutama masalah loading image) dan hal ini akan membuat pengunjung situs menjadi bosan.

Oleh karenanya, dalam membuat suatu situs perlu diperhatikan pembuatan desain web maupun grafis yang indah tapi dari segi ukuran file-filenya cukup kecil. Hal tersebut perlu dipikirkan untuk mengantisipasi para pengunjung situs yang koneksi internetnya tidak terlalu cepat.

2.Gunakan Teknologi Web yang Canggih

Ada beberapa situs yang dibuat dengan menggunakan bantuan software-software canggih seperti Flash, Dreamweaver ataupun menggunakan teknologi Active X, Dynamic HTML, Java, JavaScript, dan lain-lain. Beberapa diantara situs-situs tersebut  memang dimaksudkan untuk menunjukkan kepiawaian pengelola/desainer situs web memasukkan beragam teknologi tersebut ke dalam situs mereka dan ditujukan untuk pengunjung situs yang memiliki koneksi yang cepat ke internet.

3.Buat Isi Homepage Anda Selalu Baru (Update)

Suatu situs web yang baik akan selalu menunjukkan aktivitas updating content yang baik. Dengan semakin seringnya content diperbaharui (ditambah, diganti, dikoreksi, diperiksa link-nya, dan lain-lain) menunjukkan kepada penjelajah situs bahwa memang situs anda adalah situs yang benar-benar terurus.

Hal seperti ini sangat direkomendasikan untuk situs-situs penyedia informasi di mana informasinya itu sering berkembang dalam rentang waktu yang singkat, seperti situs-situs majalah, koran, bursa, dan lain-lain.

4.Menambahkan  feature-feature yang menarik.

Dari berbagai teknologi web yang telah dikenal maka Anda dapat membuat suatu layanan/feature khusus dari situs web Anda yang dapat menarik perhatian pengunjung. Ide dasarnya adalah menarik pengunjung dengan fasilitas/layanan yang disediakan kemudian membuat mereka penasaran untuk  mengeksplorasi lebih lanjut situs web kita.

Beberapa contoh layanan tersebut adalah eCard, search engine, discussion room, chat room, free hit counter, dan lain-lain.

Yang Dihindari dalam Merancang Web

1.Tampilan Font Jelas

Dalam penulisan artikel perlu diatur font yang ukuran dan warnanya pas agar dapat mudah dibaca oleh user.

2. Judul Halaman Sulit Ditemukan

Usahakan judul halaman merupakan text yang unik dan relevan, yang cukup menggambarkan isi dari situs agar dapat ditemukan oleh mesin pencarian.

3. Tidak Menjawab Pertanyaan User
Kegagalan utama dari desain suatu web adalah user tidak mampu mendapatkan informasi dari web tersebut dimana informasi tersebut seharusnya ada di sana.

Langkah - Langkah Perancangan Web

1. Tentukan  Nama Domain.
Anda memerlukan sebuah nama/alamat untuk website yang anda buat, agar orang lain bisa mengenali dan mengaksesnya. Misalnya untuk akhiran .com, .net, .org harganya berkisar Rp.75 ribu hingga Rp. 100 ribu

2. Struktur Website.
Kemudian tentukan halaman-halaman apa saja yang ditampilkan pada web anda dan hubungannya antara satu halaman dengan halaman yang lain saling terhubung. Misalnya homepage berada pada Top Level/First Leve, kemudian pada halaman selanjutnya berupa Second Level yang bisa berupa halaman About Us,Service,Product dan lain sebagainya.

3.Konten pada Web.
Konten pada web biasanya bisa berupa text,image,animasi. Konten ini akan dimasukan ke dalam desain tampilan website nantinya.

4.Desain Tampilan.
Agar web anda menarik, anda perlu men-desain terlebih dahulu tampilannya. Anda bisa mengatur tata letak text, link atau navigasi untuk menuju ke halaman-halaman lain yang telah anda buat strukturnya tadi. Biasanya tugas ini dilakukan oleh web desingner.

5. Mempublish Web ke Internet.
Tujuan mempublish web ke internet adalah agar web anda dapat disiarkan kepada semua orang, memberi informasi yang bermanfaat tentunya. Langkah terakhir adalah setelah website anda jadi adalah menaruhnya di sebuah komputer server yang beroperasi 24 , anda tidak perlu bingung menyiapkan komputer server ini. Provider-provider web hosting biasanya telah menyediakan paket-paket langganan yang sesuai dengan kebutuhan anda. Anda tinggal pilih salah satu. Jika web hosting asudah aktif anda bisa memulai untuk meng-upload lewat FTP dengan menggunakan account yang telah diberikan oleh provider web hsoting tempat anda berlangganan.