PEMBUATAN WEBSITE DENGAN WEB BUILDER VISUAL WYSIWYG "IWEARUP.COM"

Abstract

ABSTRAK Tulisan ini membahas tentang pembuatan website dengan web builder visual "wysiwyg editor" pada iwearup.com. Perkembangan teknologi informasi bukanlah hal yang baru di Indonesia. Teknologi informasi sudah menjadi kebutuhan sehari-hari yang sangat vital. Teknologi ini dapat berupa media cetak atau media elektronik. Salah satu media elektronik yaitu website, dalam dunia website terdapat website builder. Website builder merupakan sebuah aplikasi perancang web berbasis internet yang digunakan untuk membuat sebuah website profesional dengan cepat, mudah, dan murah. Lalu dalam sebuah website tersebut terdapat wysiwyng html editor, yaitu sebuah teks/konten editor yang biasanya ada pada sebuah website dinamis, biasanya wysiwyg html editor ini berada di halaman administrator, wysiwyg html editor memiliki fitur yang mirip dengan microsoft word. Webite telah digunakan diberbagai bidang kehidupan,termasuk dalam bidang bisnis. Salah satunya yaitu Iwearup.com. Iwearup.com merupakan sebuah situs web yang berbasis e-commerce, di dalamnya memuat informasi mengenai pembelian, penjualan, dan pemasaran produk fashion. Kesimpulan dari tulisan ini adalah Iwearup.com merupakan salah satu contoh dari website profesional oleh website builder dalam bidang bisnis, atau bisa dikatan e-commerce. Tujuannya agar desain situs web selaras dengan konten yang akan dimuat dalam hal perancangan situs web dan menambah pengetahuan mengenai hierarki visual desain situs serta kaitannya dengan antarmuka pengguna (user interface). Kata kunci : website builder , wysiwyng editor, iwearup.com

Full text

PEMBUATAN WEBSITE DENGAN WEB BUILDER VISUAL
WYSIWYG “IWEARUP.COM”
Rika Restyana Ridwan, Ismi Noer Pratiwi, Nur Asiah, Gesit Arga
Rossandy, Handayani Rahayu Ningsih
Universitas Pendidikan Indonesia
Universitas Negeri Surabaya
ABSTRAK
Tulisan ini membahas tentang pembuatan website dengan web builder visual “wysiwyg
editor” pada iwearup.com. Perkembangan teknologi informasi bukanlah hal yang baru di
Indonesia. Teknologi informasi sudah menjadi kebutuhan sehari-hari yang sangat vital.
Teknologi ini dapat berupa media cetak atau media elektronik. Salah satu media elektronik
yaitu website, dalam dunia website terdapat website builder. Website builder merupakan
sebuah aplikasi perancang web berbasis internet yang digunakan untuk membuat sebuah
website profesional dengan cepat, mudah, dan murah. Lalu dalam sebuah website tersebut
terdapat wysiwyng html editor, yaitu sebuah teks/konten editor yang biasanya ada pada
sebuah website dinamis, biasanya wysiwyg html editor ini berada di halaman administrator,
wysiwyg html editor memiliki fitur yang mirip dengan microsoft word. Webite telah
digunakan diberbagai bidang kehidupan,termasuk dalam bidang bisnis. Salah satunya yaitu
Iwearup.com. Iwearup.com merupakan sebuah situs web yang berbasis e-commerce, di
dalamnya memuat informasi mengenai pembelian, penjualan, dan pemasaran produk fashion.
Kesimpulan dari tulisan ini adalah Iwearup.com merupakan salah satu contoh dari website
profesional oleh website builder dalam bidang bisnis, atau bisa dikatan e-commerce.
Tujuannya agar desain situs web selaras dengan konten yang akan dimuat dalam hal
perancangan situs web dan menambah pengetahuan mengenai hierarki visual desain situs
serta kaitannya dengan antarmuka pengguna (user interface).
Kata kunci : website builder , wysiwyng editor, iwearup.com

PENDAHLUAN
Saat dunia bergerak pada era web ada kebutuhan yang semakin meningkat untuk
memanfaatkan halaman web sebagai platform komputasi yang memungkinkan pengguna
membangun aplikasi mereka sendiri. Misalnya, di Facebook dan Ya- hoo! Grup, grup
pengguna yang berbeda memiliki kebutuhan yang berbeda, dan sulit bagi situs web ini untuk
membangun aplikasi yang memenuhi semua kebutuhan ini. Dengan demikian, situs web
mulai membuka API mereka untuk pengguna tingkat lanjut sehingga mereka dapat
membangun aplikasi baru yang dapat diintegrasikan secara mendalam dengan situs web(Yang
et al., 2008). Terinspirasi oleh bagaimana pengguna biasanya berinteraksi dengan benda
sehari-hari, sebuah metode interaksi gerak non-kontak baru berdasarkan apa yang anda lihat
adalah apa yang anda dapatkan (WYSIWYG) untuk hasil terjemahan volume yang diusulkan
dalam koran ini. WYSIWYG (yang anda lihat adalah apa yang anda dapatkan), offline-
pertama, dan mode kolaborasi. WYSIWYG adalah singkatan dari “What You See Is What
You Get“. WYSIWYG html editor adalah solusi yang sempurna untuk setiap CMS, LMS
ataupun konten berbasis web yang digunakan untuk mengatur konten dan teks tanpa harus
memerlukan bantuan dari seorang designer ataupun developer.WYSIWYG HTML editor
memungkinkan pengguna dan klien mengatur tata letak konten dengan mudah, memasukan
gambar, menentukan ukuran tulisan, mengatur indentasi, bullet & numbering. Hampir mirip
dengan fitur-fitur yang ada di Microsoft Word. WYSIWYG: Sejak pertama rilis tahun 1981,
Microsoft Word mempunyai slogan WYSIWYG atau What You See Is What You Get. Hal ini
untuk meyakinkan pengguna bahwa apa yang dilihat di layar monitor adalah apa yang akan
Editor WYSIWYG (atau "What You See Is What You Get") adalah jenis editor HTML yang
dapat digunakan untuk mengedit laman web dalam tampilan sederhana dan tanpa kode yang
terlihat serupa dengan tata letak laman yang sebenarnya. Ada dua jenis yang umum: Editor
tampilan kode menunjukkan kepada Anda tampilan Desain/Normal, Pratinjau, dan HTML.
Anda dapat menggunakan tampilan HTML untuk mengedit kode. Editor Penyisipan HTML
menggunakan tab menu "Sisipkan" untuk melakukan pengeditan HTML. IWEARUP. COM
merupakan sebuah situs web yang berbasis e-commerce, di dalamnya memuat informasi
mengenai pembelian, penjualan, dan pemasaran produk fashion. Sebuah situs web merupakan
salah satu contoh aplikasi desain sebagai alat pemasaran. Desain situs web yang baik harus
dapat menampilkan informasi dengan jelas. Terutama bagaimana menampilkan antarmuka
(interface) sebaik mungkin agar pengunjung situs tidak kebingungan dengan informasi yang
ditampilkan. Antarmuka yang buruk berpengaruh terhadap pengguna (user) dalam

produktivitas atau pengalaman mengunjungi sebuah situs web. Hal ini dibantu dengan
hierarki visual yang merupakan salah satu prinsip terpenting dibalik setiap desain situs web.
Maka dilakukan kajian pada situs web IWEARUP. COM dengan studi kasus instrumental
guna menghasilkan suatu kesimpulan yang dapat diaplikasikan dalam perancangan sebuah
situs web berbasis ecommerce. Tujuannya agar desain situs web selaras dengan konten yang
akan dimuat dalam hal perancangan situs web dan menambah pengetahuan mengenai hierarki
visual desain situs serta kaitannya dengan antarmuka pengguna (user interface).
METODE
Tulisan ini merupakan penelitian pustaka yang memusatkan perhatian pada isu-isu
penting seputar metode kualitatif. Kajian ini berangkat dari suatu cara pandang bahwa
metode kualitatif banyak disalahartikan secara aneka ragam, seperti ”gampangan”, rumit,
bahkan dianggap inferior dan marginal dibandingkan saudara tirinya, metode kuantitatif.
Salah satu penyebab mendasar dari hal ini adalah para peneliti kualitatif gagal memahami
dan menerapkan prinsip-prinsip metode ini secara benar. Diskusi kritis mengenai kekuatan
dan kelemahan metode kualitatif dan kuantitatif akan dibahas pada bagian dua. Bagian ini
penting dikemukakan, agar kita semua melihat secara jelas kesetaraan metodologi. Yaitu,
masing-masing metode mempunyai paradigma teoritik, gaya, asumsiparadimatik, serta
kekuatan dan kelemahan sendiri. Bagian tiga dari tulisan ini akan menguraikan secara
lengkap jenis, orientasi dan prinsip dasar metode kualitatif. Diskusi mengenai hal ini adalah
mendasar, karena seringkali kita keliru dalam menempatkan metode dalam konteks
penelitian yang bersifat idiografis. Sedangkan perdebatan seputar metode kualitatif dalam
praktek penelitian sosial dibahas pada bagian keempat. Pada bagian ini akan diskusikan
metode sebagai proses “sell” and “trade”, ranah data kualitatif dan dimensi etika. Bagian
kelima akan diisi oleh uraian mengenai “penteorian” metode kualitatif. Diskusi di bagian ini
memperlihatkan keterjalinan antara metode dan teori yang merupakan ciri dari sosiologi
kualitatif. Bagian penutup akan berisi catatan mengenai kontribusi metode kualitatif pada
pengembangan ilmu sosial khususnya sosiologi di Indonesia. metode kualitatif dipengaruhi
oleh paradigma naturalistik-interpretatif Weberian, perspektif post-positivistik kelompok
teori kritis serta post-modernisme seperti dikembangkan oleh Baudrillard, Lyotard, dan
Derrida (Cresswell, 1994). “Gaya” penelitian kualitatif berusaha mengkonstruksi realitas dan
memahami maknanya. Sehingga, penelitian kualitatif biasanya sangat memperhatikan
proses, peristiwa dan otentisitas. Memang dalam penelitian kualitatif kehadiran nilai peneliti
bersifat eksplisit dalam situasi yang terbatas, melibatkan subjek dengan jumlah relatif

sedikit. Dengan demikian, hal yang umum dilakukan ia berkutat dengan analisa tematik.
Peneliti kualitatif biasanya terlibat dalam interaksi dengan realitas yang ditelitinya.
Sebagaimana dijelaskan sebelumnya, metode penelitian mempunyai pula asumsi
paradigmatik. John W. Cresswell menilik beberapa dimensi asumsi paradigmatik yang
membedakan penelitian kuantitatif dengan kualitatif. Dimensi- dimensi tersebut mencakup
ontologis, epistemologis, axiologis, retorik, serta pendekatan metodologis. Secara ontologis,
peneliti kuantitatif memandang realitas sebagai “objektif” dan dalam kacamata “out there”,
serta independen dari dirinya. Sementara itu, peneiliti kualitatif memandang realitas
merupakan hasil rekonstruksi oleh individu yang terlibat dalam situasi sosial. Secara
epistemologis, peneliti kuantitatif bersikap independen dan menjaga jarak (detachment)
dengan realitas yang diteliti. Sementara peneliti kualitatif, menjalin interaksi secara intens
dengan realitas yang ditelitinya. Secara retoris atau penggunaan bahasa, penelitian
kuantitatif biasanya menggunakan bahasa-bahasa penelitian yang bersifat formal dan
impersonal melalui angka atau data-data statistik.
PEMBAHASAN
What You See Is What You Get, Si Text Editor Untuk Halaman Website WYSIWYG,
tak asing lagi dengan istilah tersebut bukan? WYSIWYG merupakan singkatan dari What
You See Is What You Get yang mana biasanya berarti suatu editor yang digunakan oleh suatu
aplikasi untuk menggambarkan bahwa konten yang sedang disunting akan terlihat sama
persis dengan hasil akhirnya.
Text editor WYSIWYG sangat ramah dengan penggunanya jika dibandingkan dengan text
editor yang lain. Mengapa demikian? Hal itu menunjuk kepada kemampuan yang dimiliki
oleh software atau program aplikasi yang sudah di operasikan serta sejumlah kemampuan lain
yang dimilikinya. Bahkan bagi sobat pemula sekalipun dengan menggunakan text editor ini,
sobat tidak akan mengalami banyak kesukaran untuk mengoperasikan sebuah program
aplikasi. Dalam penggunaannya, text editor ini tidak memerlukan penulisan sintaks seperti
pada text editor yang lain karena sudah dilengkapi dengan icon-icon dimana sobat hanya
perlu mengklik salah satu dari icon yang akan digunakan dan secara otomatis akan terformat.
Selain itu, text editor ini juga mempunyai keuntungan lain seperti mampu menampilkan teks
satu halaman, integrasi dengan grafik, speadsheet, foto dalam satu dokumen, auto correct,
hypermedia, hypertext, dan masih banyak lagi.
Apa aja sih yang termasuk text editor WYSIWYG untuk halaman website?

Mungkin pertanyaan tersebut yang sering sobat tanyakan, baiklah berikut beberapa text editor
WYSIWYG untuk halaman website:
1. CKEditor
CKEditor merupakan HTML text editor yang digunakan dan didesain untuk memudahkan
sobat dalam membuat serta mengatur tata letak konten. Text editor ini memiliki banyak fitur
lengkap di dalamnya antara lain seperti dapat dipindahkan dari Microsoft Word, terdapat
widgets atau tools tambahan, mampu melakukan drag dan drop image serta file upload, dan
masih banyak lagi.
2. TinyMCE
TinyMCE adalah sebuah platform web independen yang berbasis Javascript, text editor ini
dirilis sebagai sebuah aplikasi open source dibawah lisensi LGPL. Text editor ini dirancang
untuk mudah diintegrasikan dengan library JavaScript seperti React, Vue.js, AngularJS serta
content management systems seperti Joomla dan WordPress. Selain itu, text editor ini juga
memiliki banyak fitur lengkap, terdiri dari 4 paket yakni Community (gratis), Premium
($0.40/m), Pro ($1.00/m) dan Enterprice (call). Untuk paket gratis sebenarnya sudah cukup
lengkap, namun tidak disediakan fitur untuk upload gambar.
3. Summernote
Summernote merupakan text editor yang sangat simple dan gratis. Text editor ini
menggunakan pengkodean base64 sehingga dapat digunakan tidak hanya untuk mengedit
text, melainkan sobat juga bisa upload gambar secara langsung tanpa perlu menerapkan
penanganan gambar sama sekali. Text editor ini dibuat dengan jQuery dan Bootstrap, yang
mana UInya sederhana sehingga sobat bisa lebih mudah untuk mengkostum tampilan ataupun
menambah dan mengurangi toolbar.
4. Froala
Froala merupakan HTML WYSIWYG editor yang mudah untuk diintegrasikan dan mudah
untuk digunakan tanpa harus mengetik banyak kode. Plugin ini membutuhkan jQuery versi
1.11.0 atau lebih tinggi dan Font Awesome 4.4.0. Plugin ini menyediakan SDK sisi server
untuk PHP, Node.JS, .NET, Java dan Python. Plugin ini tersedia dibawah 4 lisensi yaitu:
lisensi situs web tunggal, lisensi pengembang, lisensi bisnis, dan lisensi OEM. Plugin ini juga
memiliki konektor dengan beberapa development framework seperti: CakePHP, Joomla,
Symfony, Yii, Django, Ruby on Rails, AngularJS, Meteor.
5. Redactor
Redactor adalah content editor yang memberikan desain yang smooth dan clean, fleksibel
serta memiliki dukungan yang tak terbatas bagi para penggunanya. Content editor ini

terintegrasi erat dengan MODX yang menawarkan user interface yang sederhana dan
dilengkapi dengan icon, modem, serta fungsi yang jelas dan dapat dipahami. Fitur-fitur
canggih yang tersedia dapat diaktifkan maupun dinonaktifkan sesuai kebutuhan sehingga
dapat mengontrol aktivitas pengguna.
6. Quilljs
Quilljs merupakan text editor yang 100% gratis, tampilannya simple dan elegant. Text editor
ini menyediakan konfigurasi dimana sobat bisa melakukan kostum tampilan serta menambah
dan mengurangi toolbar. Text editor ini juga di dorong oleh API sehingga dapat bekerja
secara konsisten dan deterministik dengan JSON sebagai input dan outputnya. Selain itu, text
editor ini lintas platform sehingga mendukung semua browser modern di desktop, tablet
maupun ponsel.
Dalam penelitian ini dibahas mengenai user interface dalam sebuah situs web fashion
bernama UP (www.iwearup.com). Secara visual terdapat beberapa unsur yang menarik
perhatian ketika melihat tampilan situs IWEARUP.COM ini. UP merupakan situs web
fashion yang menarik segmentasi pasar dari kalangan remaja khususnya perempuan. Secara
keseluruhan tampilan situs web IWEARUP.COM memiliki kesan girly (kewanitaan/feminin)
yang terlihat dari pemilihan warna maupun konten dalam situs web tersebut. Hal inilah yang
menjadi daya tarik utama yang membuat situs web ini penting untuk diteliti, karena secara
tampilan, situs web UP berbeda dari situs web e-commerce yang lainnya. IWEARUP.COM
User interface merupakan sarana untuk interaksi antara manusia dengan sistem (Stone, 2011).
Bisa diterjemahkan juga sebagai ruang dimana interaksi antara manusia dan mesin
berlangsung. User interface bukan hanya mengenai tampilan saja, akan tetapi lebih
menekankan kepada usaha dalam kemudahan interaksi antara pengguna dengan sistem
aplikasi, disesuaikan dengan tujuan interaksi manusia dengan sistem. Tujuan utama
perancangan user interface adalah untuk memudahkan pengoprasian sistem dalam
penyampaian konten informasi. Efisiens (Efficiency) Berdasarkan pengamatan yang
dilakukan, situs web IWEARUP.COM ini cukup efisien. Hal ini terlihat dalam penempatan
menu yang ada di tengah atas (header section) sudah cukup proporsional sehingga lebih
memudahkan pengguna untuk merujuk ke menu tanpa harus menggeserkan scrollbar.
Ditambah lagi semua produk disusun berdasarkan kategori sehingga memudahkan
pengunjung dalam pencarian data.
Pengampunan (Forgiveness) Situs web IWEARUP.COM ini sudah menerapkan aspek
forgiveness Yaitu dengan cara menyediakan kolom bantuan pada halaman “I Need Help!”
sehingga memudahkan pengunjung situs web tersebut dalam penanganan kesalahan. Selain

itu ketika user melakukan kesalahan pada saat tidak memilih layanan kurir (shipping service)
ataupun tidak memilih metode pembayaran (payment method), akan muncul peringatan untuk
tidak melakukan kesalahan tersebut. Peringatan kesalahan user ini ditampilkan dengan kotak
berwarna merah yang terletak di kanan atas halaman browser ,Tampilan Kesalahan Pengguna
Interface dalam sebuah situs web sangat penting sebagai sarana interaksi manusia (user) dan
komputer (system). Selain itu, prinsip hierarki visual dalam mendesain situs web juga harus
diperhatikan. Pengguna situs akan merasa dimudahkan dengan adanya menu/navigasi,
gambar, dan juga tombol-tombol yang ada dalam sebuah situs web.
Desain interface haruslah menarik, interaktif, dan yang pasti user friendly agar
pengguna merasa mudah dan nyaman untuk mengakses situs web tersebut. Selain itu terdapat
kekurangan dalam situs web IWEARUP.COM diantaranya:
• Fitur search engine sama sekali tidak berfungsi, sehingga sulit bagi pengguna (user) untuk
mencari informasi yang lebih spesifik di dalam situs.
• Tidak adanya fasilitas komentar, sehingga tidak dapat melakukan umpan balik (feedback)
yang informatif.
• Jenis huruf (tipografi) yang digunakan kurang membangun tampilan situs web, sehingga
karakter situsnya tidak tertampilkan dengan baik.
• Tidak tersedianya pilihan bahasa, khususnya bahasa Indonesia. Situs web ini hanya
menggunakan bahasa Inggris saja.
• Tidak adanya peta situs (sitemap) (Rochmawati, 2019).
KESIMPULAN
Dari pembahasan diatas, dapat disimpulkan IWEARUP.COM merupakan sebuah situs
web yang berbasis e-commerce, di dalamnya memuat informasi mengenai pembelian,
penjualan, dan pemasaran produk fashion. Sebuah situs web merupakan salah satu contoh
aplikasi desain sebagai alat pemasaran. Desain situs web yang baik harus dapat menampilkan
informasi dengan jelas. . Hal ini dibantu dengan hierarki visual yang merupakan salah satu
prinsip terpenting dibalik setiap desain situs web. Maka dilakukan kajian pada situs web
IWEARUP.COM dengan studi kasus instrumental guna menghasilkan suatu kesimpulan yang
dapat diaplikasikan dalam perancangan sebuah situs web berbasis ecommerce. Tujuannya
agar desain situs web selaras dengan konten yang akan dimuat dalam hal perancangan situs
web dan menambah pengetahuan mengenai hierarki visual desain situs serta kaitannya
dengan antarmuka pengguna (user interface).

Secara keseluruhan tampilan situs web IWEARUP.COM memiliki kesan girly
(kewanitaan/feminin) yang terlihat dari pemilihan warna maupun konten dalam situs web
tersebut. Hal inilah yang menjadi daya tarik utama yang membuat situs web ini penting untuk
diteliti, karena secara tampilan, situs web UP berbeda dari situs web e-commerce yang
lainnya. IWEARUP.COM User interface merupakan sarana untuk interaksi antara manusia
dengan sistem (Stone, 2011). Bisa diterjemahkan juga sebagai ruang dimana interaksi antara
manusia dan mesin berlangsung. User interface bukan hanya mengenai tampilan saja, akan
tetapi lebih menekankan kepada usaha dalam kemudahan interaksi antara pengguna dengan
sistem aplikasi, disesuaikan dengan tujuan interaksi manusia dengan sistem. Tujuan utama
perancangan user interface adalah untuk memudahkan pengoprasian sistem dalam
penyampaian konten informasi.
DAFTAR PUSTAKA
Rochmawati, I. (2019). Analisis User Interface Situs Web iwearup.com. Visualita, 7(2), 14.
Yang, F., Gupta, N., Botev, C., Cornell, U., Churchill, E. F., Levchenko, G.,
Shanmugasundaram, J., Penelitian, Y., & Clara, S. (2008). WYSIWYG Pengembangan
Aplikasi Web Berbasis Data. 23–28.
Rochmawati, I. (2019). Analisis User Interface Situs Web iwearup.com. Visualita, 7(2), 14.
https://ojs.unikom.ac.id/index.php/visualita/article/download/1459/1006
sevima. (2016). Tahapan Membuat Website Baru yang Harus Diketahui. 27 September 2016.
https://sevima.com/tahapan-membuat-website-baru/