[7 Kesalahan Terbesar Perancang Website] – WYSIWYG

08Okt08

Diterbitkan setiap hari Rabu. Arc pertama di rangkaian artikel Perancangan Website.

Ep. 1: WYSIWYG

Selamat datang di seri “7 Kesalahan Terbesar Seorang Perancang Website” oleh saya, Steax. Kita akan memulai perjalanan kita mencaci maki para perancang lainnya dengan menyalahkan program-program kesayangan banyak perancang: program yang biasa disebut “WYSIWYG”.

Whisiwig – panggilang, err, akrab, untuk tipe program ini, merupakan salah satu hambatan terbesar dalam menuju dunia internet yang optimal. Kepanjangannya adalah What You See Is What You Get – apa yang anda lihat, itu yang akan dibuat. Jaman dahulu kala, yang paling bertanggung jawab atas hal ini adalah sebuah buronan yang disebut Frontpage, dari si gendut Microsoft, yang sampai sekarang pun masih diajarkan secara luas (seberapapun menyedihkan itu). Tak lama kemudian, datang raksasa baru yang disebut Macromedia dengan program Dreamweaver. Anda kenal, kan? Mungkin sampai sekarang anda masih ada yang mengunakan Dreamweaver. Tidak heran; Dreamweaver ribuan kali lebih efisien daripada Frontpage.

Masalahnya, tampilan dasar dari Dreamweaver, yang menampilkan halaman yang sedang anda rancang secara visual dan mencontohkan layout dan tipografi anda secara langsung, merupakan contoh WYSIWYG. Jika anda masih belum menangkap maksudnya: WYSIWYG adalah gaya perancangan yang bersifat visual, seperti layaknya anda menulis dokumen di Word. Padahal, website seharusnya dibuat dengan HTML, yang murni bersifat teks.

Begini. Dulu, waktu internet baru diciptakan, tidak ada yang mengira bahwa kita akan mengembangkannya sampai seperti sekarang. Semua orang mengira kalau internet akan tetap lambat, dan halaman-halaman yang kita lihat perlu sebesar-besarnya berisi teks untuk dibaca. Sekarang tentunya sudah berubah, dan perancang menginginkan desain yang lebih kompleks dan menarik. Hal ini masih bisa dilakukan dalam HTML, tapi karena perancang malas mencari-cari teknik dan metode yang berputar-putar, diciptakanlah WYSIWYG. Anda berkata, “bagus dong. Masalahnya apa?”

WYSIWYG itu berlebih dan memaksa! Mereka itu robot yang menerima perintah majikannya dan memaksakan melaksanakannya – seberapa mahal atau berat hasilnya. Tentunya si perancang tak pernah menyadari seberapa bagus (atau buruk!) pekerjaan si robot sampai terjadi sesuatu yang menakutkan. Sebagai robot, mereka tidak bisa improvisasi atau berkembang seperti kita. Mereka juga memiliki keterbatasan dalam kemampuan mengerti perintah yang diberikan.

Beberapa Kesalahan Terbesar WYSIWYG

Salah satu hal yang sering disebut adalah tidak efisiennya layout yang dibuat dalam WYSIWYG. Sebagian besar dari mereka akan menggunakan “tabel” untuk membuat layout. Tabel secara HTML. Ini disebabkan karena tabel lebih fleksibel di hasil akhir. Tapi jika anda melihat HTML di balik layarnya – hancur! Banyak sampah-sampah berserakan dan tidak teratur. Program tidak dapat berpikir logis layaknya manusia, dan pekerjaannya pun “asal jadi” saja. Ketika anda mengubah desain anda sedikit, maka kadang-kadang program akan menyisakan tag-tag HTML kosong atau bekas-bekas lainnya yang tidak diperlukan. Sangat tidak efektif, apalagi bila dibandingkan dengan hasil yang dapat dibuat seorang perancang manusia dengan bantuan CSS. (Kebetulan, CSS mudah dipahami manusia yang mengerti cara kerjanya dari HTML. Tapi bagi si robot yang harus berkerja dari perintah visual – bingung dia.) Saya akan membahas lebih banyak tentang sia-sianya <table> di episode berikutnya.

Ngomong-ngomong soal CSS, WYSIWYG juga sering bersalah dalam membuat sampah ketika berusaha memberi pengertian visual pada teks. Misalnya mau membuat teks yang tebal; WYSIWYG tidak mengerti apa yang mau anda lakukan, jadi dia dengan mudah menambah tag-tag baru dan memaksakan agar teks itu dicetak tebal. Dalam proses ini pun banyak hal-hal ditambah-tambah dan berserakan. CSS dan seorang perancang yang kompeten dapat dengan jauh lebih sederhana memberi tag dan CSS yang sesuai. Hal ini disebut HTML yang semantis – saya akan sering menyebutkannya dalam seri ini.

Dreamweaver tidak sepenuhnya bersalah. Mereka memiliki code view yang memberikan tampilan HTML yang baik, tidak seperti design view yang sebenarnya sekedar WYSIWYG yang keji. Dreamweaver cukup baik dalam code view tersebut; jauh-jauhlah dari design view! Frontpage sudah saatnya dibuang. Jika anda melihat banyak software untuk perancangan web modern, maka anda akan menyadari bahwa sebagian besar merupakan editor HTML, CSS, dan pendampingnya. WYSIWYG akan segera mati – akhirnya. Di Indonesia, banyak perancang yang belum siap untuk berpindah. Saya akan katakan ini sekarang: jauh-jauh dari WYSIWYG. Adopsi HTML!

Masalah Lainnya

Ada beberapa hal yang seharusnya diperhatikan oleh perancang namun dilewatkan oleh program WYSIWYG. Salah satunya adalah menyesuaikan untuk beragam browser dan alat baca website. Seringkali, rancangan indah yang telah dibuat program hanya bisa bekerja dengan benar pada kondisi tertentu. Jika ada fitur di browser yang dimatikan atau disalahgunakan, maka desain pun pecah. Kadang-kadang bahkan desain itu hanya bekerja dengan benar di satu browser, dan rusak di browser lainnya. Jika pengguna mematikan tampilan gambar, misalnya, maka yang akan ditunjukkan adalah “alt text”, yang dipasang dengan atribut “alt” di tag <img>. Ada kebiasaan di pengguna WYSIWYG untuk munafik dan lupa untuk beradaptasi, sehingga terlalu percaya pada programnya dan lupa menguji desainnya seperti seharusnya.

Kadang-kadang si program akan cukup berbaik hati untuk menyediakan fitur-fitur untuk menyelesaikan masalah ini, namun karena gaya WYSIWYG lebih berfokus pada penampilan dan pengguna pun tidak memperhatikan hal-hal tersebut, fitur ini terbengkalai. Dreamweaver, misalnya, memiliki fitur untuk memberi teks alternatif pada gambar, tapi ini jarang digunakan.

Hal lainnya adalah hilangnya kendali tingkat kecil. Ada fungsi-fungsi tingkat lanjut untuk integrasi dengan aplikasi lainnya (misalnya PHP atau Javascript) yang interaksinya langsung pada HTML. Penggunaan program WYSIWYG seringkali akan menutup-nutupi apa yang terjadi di HTML sehingga sulit mengintegrasi seperti ini. Biasanya, ketika anda mulai berkutat dengan bahasa server-side (ASP, PHP, dkk) atau Javascript, WYSIWYG akan menjadi keterbatasan besar bagi anda.

Terkahir, tapi mungkin terparah, adalah WYSIWYG membodohi penggunanya. Program akan melakukan semua kerja keras, dan pengguna tidak pernah merasakan apa yang sebenarnya terjadi. Mereka sering dengan senang hati menambah ribuan gambar ke satu halaman, atau memberi animasi gila-gilaan, sekedar karena si program membuatnya gampang. Untuk menjadi perancang profesional, ini menjadi masalah besar. Percayalah, WYSIWYG memiliki keterbatasan, dan anda akan menemukan suatu titik di mana program itu lebih menghambat daripada membantu.

Jadi Seharusnya?

HTML dan CSS merupakan bahasa yang sederhana dan diterima secara global. Sebagian besar perancang professional menggunakan HTML dan CSS dalam prosesnya. WYSIWYG telah ditinggalkan dalam kebanyakan tim desain (karena berbagai alasan), Namur terkadang masih ditemui dalam pendidikan formal.

Untuk editor, saya menyarankan Notepad++, yang berfungsi sebagai editor teks sehingga dapat bekerja sebagai editor HTML maupun CSS dengan fitur-fitur seperti syntax highlighting, yang dapat membantu anda menghindari kesalahan kecil seperti lupa menutup tag atau salah ketik.

Saya pribadi belajar dari website bernama HTML Dog, yang mungkin anda temukan berguna untuk membangun dasar-dasar HTML dan CSS. Kemudian, berkelilinglah ke website yang berisi artikel seperti A List Apart, yang dapat membantu anda beradaptasi dari WYSIWYG ke tulisan tangan, jika diperlukan.

Catatan Terakhir

Penggunaan WYSIWYG merupakan hal yang hampir telah ditinggalkan seluruhnya secara international. Saya tetap mencantumkan post ini, karena di Indonesia (terutama di pendidikan formal) penggunaan WYSIWYG merupakan hal yang masih umum. Jangan terbawa ya.

Glossary

  • HTML: Hypertext Markup Language. Bahasa dasar untuk menulis kode halaman website.
  • HTML Semantis: Gaya penulisan HTML yang memisahkan konten dengan penampilan. Akan dijelaskan lebih lanjut di episode selanjutnya.
  • CSS: Cascading Style Sheet. Bahasa yang ditujukan untuk mengatur penampilan halaman.

Terkait



21 Responses to “[7 Kesalahan Terbesar Perancang Website] – WYSIWYG”

  1. Hahaha, memang mencerahkeun.:mrgreen:

    Saya pribadi juga memakai Notepad++ (dan makasih juga untuk Opera Dragonfly dan Firebug), tak heran di laptop sama sekali tak ada perangkat pembangun website secara WYSIWYG.

    ..bahkan saya matin visual editor saat menulis entry dan menulis dengan coding manual.😐

    *lanjut komennya, mau makan ke angkringan dulu*

  2. Enakan manual di wordpress juga. Saya rasa segala macem fitur-fitur kayak uploader ini itu malah bikin repot, enakan yang tothepoint aja. Saya nggak bisa hidup tanpa Firebug dan Notepad++ tentunya.πŸ˜‰

  3. wah jadi tau nih tentang WYSIWYG itu….
    kalo masalah coding website sy masih pemula, masih suka pake yg instant2 ajaπŸ™‚

  4. Awalnya pakai yang instan-instan sih nggak ada salahnya, untuk bereksperimen. Tapi kalau sudah sampai tingkat di mana hasil kita harus praktis dan akan dipakai secara umum, ada baiknya kita tinggalkan para editor WYSIWYG…πŸ˜€

  5. Setujuuu. WYSIWYG sucks at certain points.πŸ˜› Kalau saya sering tuh di editor WordPress, visualnya munculnya begini, tapi begitu di preview jadinya begitu. Akhirnya saya lebih melirik code editor aja.πŸ˜›

    Btw,

    Seringkali, rancangan indah yang telah dibuat program hanya bisa bekerja dengan benar pada kondisi tertentu.

    Soal ini, saya pernah bertemu dengan website yang menurut pemiliknya hanya kompatibel di IE. Sudah agak lama sih, pas Firefox masih versi 1 koma. Berhubung saya membuka situsnya agak bermasalah lewat Fx, saya usul supaya situsnya dibikin lebih kompatibel. Lhadalah, pemiliknya malah bilang kalau situs itu bagusnya dilihat pakai IE. Non-IE mending keluar aja.😐

  6. WYSIWYG masih populer kalo dibandingin dengan basic language seperti html, javascript.
    ya karena praktis tadi, orang milih cepet selesai dan nggak sadar ada apa dibalik desain indahnya.

    mendingan belajar basic dulu baru kalo mo coba yang WYSIWYG ya cuman sekedar tahu2 saja…

    saya aja nggak begitu sering nengok design-view di dreamweaver…

  7. errr… tujuh?

    apa saya salah baca?

  8. 8 rizkivmaster

    Untung gak pake WYSIWYG. Make dreamweaver sih, tapi memang kayaknya kalo emang niatnya integrasi web dgn PHP ato ASP, kayaknya memang “haram” pake gituan. Kalo cuma pasang2 muka di web sih, pake itu doank dah cukup. Yang terparahnya, kalo yg beginnernya dah ketagihan, mesti belajar coding dr awal lg kan. Ya, saran tambahan, mending coding web pake standar web punya Firefox, coz Firefox sendiri lulus standar W3C >98%.
    Btw, Mr. Steax koq dah lama g posting? Kuliahnya makin sibuk ya?

  9. Iya nih, ada masalah sama koneksi jadi blom bisa baca komentar teman-teman dengan jelas atau post episot brikut dari seri ini. Om strife, ini bagian dari seri dengan 7 edisi.πŸ˜‰

    Pusing juga kuliah. Besok libur jadi bisa berblog ria deh.πŸ˜€

  10. I prefer the Code than the Visual, jadi saya juga memilih membuat dalam bentuk code daripada bentuk aslinya

  11. lbh enak lg kl editor wysiwyg-nya udah mengadopsi standar dan aksesibilitas w3c..πŸ˜€

  12. Yap. Saya juga termasuk pemuja kode XHTML. Dan, tolong, saya menginstall Dreamweaver tanpa pernah memakainya…:mrgreen: Soal saya sudah enak dengan filosofi yang sudah – sudah; “Proses lebih dihargai daripada hasil”.πŸ˜€

  13. Kalo urusane dengan rasa dan selera memang susah. saya baca di artikel2 para pecinta wiswig mereka mendewakan aplikasi2 wiswig tsb. meski memang disadari ada beberapa keterbatasan2 didalamnya. dan merekapun mencari solusi2 untuk menutupi keterbatasan tsb.bagaimanapun caranya…tetep ada hasilnya. aku melamun…..”wah ini jangan2 kemasukan yg namanya setan BUSINESS.versi x, versi Y dan sebagainya”.akupun tersadar “Yah wis tak tunggu versi selanjutnya.aku melamun lagi…”sehebat apa yah team pembuat wiswig itu ?” wah gak nyucuk ilmuku. tersadar lagi sembari acung jempol…4 jempol malah.
    lalu kubaca beberapa artikel para pecinta scripting, coding, yah gak beda jauh dengan apa yg sudah anda baca dibawah.
    tapi bukan itu sebenarnya yang harus dipermasalahkan. berikut beberapa rangkuman pengalaman untuk menempatkan diri kapan kita dijalur wiswig dan kapan dijalur scripting :
    1. Lihat nilai projeknya dan jenis projeknya.
    – murah statis dan gak terlalu banyak rule dari pemesannya, gunakan wiswig.
    – mahal, dinamic, dan banyak aturan gunakan semua kemampuan sampai titik darah penghabisan.
    2. Lihat dengan siapa kita bekerja (TIM)
    dalam struktur projek ada kalanya perancangan sebuah website dibagi menjadi web design dan web programming. permasalahannya adalah kadang apa yg menjadi hasil akhir dari seorang designer yang menggunakan wiswig dan di disetujui oleh pemesan menjadi ATHG (Ancaman, Tantangan, Hambatan dan Gangguan) saat tongkat estafet tsb jatuh ketangan web programmer. Sebagai seniman (aku bilang designer dan programmer itu seniman ya itu krn idealisnya itu) harusnya saling arif dan menghargai.mosok programmer bilang “koen iku parah des-des, design mu iki susah diimplementasekno”. Tantangan seorang programmer justru disitu, tidak merusak design hasil karya orang lain tapi tujuan tetep tercapai. scripting jalan dan saat dibuka pakai wiswig nya designer itu masih bisa dinikmati.susah ????? ah siapa bilang. yg penting koordinasi dan membuat rambu2 kesepakan yang gak boleh dilanggar antara designer dengan programmer.
    3. yang terakhir….jaga kesehatan. jangan lupa ibadah. jangan lupa makan, jangan lupa pacar, anak, istri dan keluarga.
    4. ada yg ketingalan, kalo pusing jangan liat bokep.hehehehehe.

  14. woooaaaa.,. mantap bro., kena langsung ke gw.,!! hahahaha.,

    gw salah satu yang make WYSIWYG dreamweaver., make dreamwever emang pilihannya para newbie., karena belajar kode HMTL dari awal cukup sulit dan memusingkan., hehehe.,

    postingan selanjutnya ditunggu.,πŸ˜€ dan kalo bisa postingkan informasi untuk dasar2 desain layout web yang baik dan benar., agar kesannya bukan asal jadi atau dipaksakan seperti yang anda maksudkan diatas.,

    btw., saya buat website 99% dengan menggunakan dreamweaver., kalo anda berkenan mungkin bisa melihat page source-nya, dan bisa mengomentari untuk layoutnya.,
    tolong ya., newbie butuh masukan nih.,πŸ˜›

  15. nice postπŸ˜€

  16. Dremweaver bagusnya banyak auto code html, dan ada panel untuk mengatur css secara otomatis. skarang ada plug in dari dreamweaver untuk membuat div beserta stylenya secara otomatis, tapi hrus bayar. website saya http://www.bagusanyoto.phpnet.us 100% TANPA TABEL. jaman gini yg ngetik 100 % coding bakalan ketinggalan jaman bro..

  17. Saya sebagai Desainer Grafis atau istilah Indonesianya Perancang Gambar/grafis..
    yang terkadang juga harus merancang tampilan Website, selalu menggunakan yang namanya WYSIWYG….karena saya tidak kenal yang namanya CSS, HTML, PHP, ASP atau bahasa pemrograman web lainnya.

    Kenapa ?? Buat apa ada programer …?? Buat apa ada sekolah Khusus jurusan web programing…. ??? Serahin aja ke mereka yang ngerti pemrograman… enak thooo..

    saya mendesain.. anda yang programer bikin jadinya…

    sehingga terciptalah lapangan kerja … ga maruk programer merangkap desainer web, atau desainer merangkap jadi programer… hasilnya rata rata acak kadut…

    Jadi programer sama desainer web ada baiknya saling berbagi.. berbagi pekerjaan dan penghasilan demi kualitas hasil yang maksimal.. kalau ada kesulitan dari salah satu pihak tinggal di bicarakan.. enak thooo….

  18. 18 saya

    i love wysiwyg
    css ke laut aje

  19. 19 Noname

    tergantung user nyaman pakek yang mana..
    mo simpel. wyswyg…

    mo ribet.. dreamweaver…
    bereskan :))

  20. e Your real age really need to be more 18 years old months or even
    years effective at listed below 19 you can’t ended up being licensed recycle online.

  21. Normally the amount of money is shipped to your internet page followed by it’s got
    exchanged down the road once you have most of the bucks about the have a look
    at him or her. Essentially, this is the short-term functionality advance,
    and that is approved onto your approaching take-home
    pay allow effective financial aid on the entrance.


Tinggalkan Balasan

Isikan data di bawah atau klik salah satu ikon untuk log in:

Logo WordPress.com

You are commenting using your WordPress.com account. Logout / Ubah )

Gambar Twitter

You are commenting using your Twitter account. Logout / Ubah )

Foto Facebook

You are commenting using your Facebook account. Logout / Ubah )

Foto Google+

You are commenting using your Google+ account. Logout / Ubah )

Connecting to %s


%d blogger menyukai ini: