MODUL

PERA

YOKI FIRMANSYAH M.KOM

FAKULTAS TEKNOLOGI INFORMASI

PRODI SISTEM INFORMASI

UNIVERSITAS BINA SARANA INFORMATIKA

i

MODUL KULIAH

ANCANGAN WEBSITE

DISUSUN OLEH

YOKI FIRMANSYAH M.KOM

FAKULTAS TEKNOLOGI INFORMASI

PRODI SISTEM INFORMASI

SITAS BINA SARANA INFORMATIKA

FAKULTAS TEKNOLOGI INFORMASI

SITAS BINA SARANA INFORMATIKA

ii

Kata Pengantar

Bismillahirrahmanirrahim

Segala puji dan syukur alhamdulillah penulis panjatkan kehadirat Allah SWT atas segala rahmat dan hidayahNya sehingga penulis dapat menyelesaikan ini guna untuk mahasiswa Universitas Bina Sarana Informatika

Modul sistem ini dirancang khusus untuk membantu mahasiswa memahami hal hal yang berkaitan dengan perancangan website yang merupakan salah satu mata kuliah yang ada di Universitas Bina Sarana Informatika.

Sesuai dengan tujuan penulis, modul ini dimaksudkan sebagai bacaan dasar tentang sistem informasi managemen. Isi modul ini telah disesuaikan sedemikian rupa agar dapat dibahas habis selama 1 semester dengan jumlah jam kuliah sebanyak 3 x 40 menit (dengan 14 minggu per semester).

Dalam penulisan dan menyelesaikan Modul ini, penulisan banyak mendapat bimbingan dan saran dari berbagai pihak dan secara khusus dalam kesempatan ini, dengan segala kerendahan dan keikhlasan hati penulis mengucapkan rasa hormat dan terima kasih yang sebesar-besarnya kepada :

1. Orang tua serta Saudara tercinta yang telah banyak memberikan bantuan dan dorongan selama

penulis menyelesaikan penulisan modul ini 2. Orang orang disekitar saya yang selalu memberikan dorongan dan motivasi bagi saya selama

penyelesaian Modul ini 3. Kepada Rekan-rekan dan Sahabat baik berada didalam maupun diluar lingkungan Universitas

Bina Sarana Informatika yang telah memberi kritik, komentar maupun saran yang membangun untuk perbaikannya, penulis mengucapkan terima kasih. Saran dan kritik yang sangat membantu dan berguna adalah untuk penyelesaian isi dari modul ini.

Semoga atas izin dan hidayah ALLAH SWT, Modul ini dapat memberikan manfaat

khususnya bagi diri Saya pribadi dan dapat memberi sumbangan ilmu bagi mereka yang memerlukannya, dengan harapan akan ada pula pandangan-pandangan dan saran-saran perbaikan untuk dimasa yang akan datang.

Alhamdulillahirabbil ‘Alamin

TTD

Yoki Firmansyah M.Kom

iii

DAFTAR ISI

KATA PENGANTAR ...................................................................... Error! Bookmark not defined.

DAFTAR ISI................................................................................................................................. iii

BAB I. TERMINOLOGI PERANCANGAN WEBSITE .......................................................... 1

1.1. Terminologi ...................................................................................................................... 1

1.2. Evolusi Web ..................................................................................................................... 6

1.3. Pengembangan Aplikasi website ...................................................................................... 9

BAB II MERANCANG DAN MEMBANGUN WEBSITE ..................................................... 12

2.1. Aturan Membuat Website .................................................................................................. 12

2.2. Software Untuk Merancang Website ................................................................................. 13

2.3. Elemen Desain Web ........................................................................................................... 14

BAB III MANAJEMEN SITUS WEBSITE ............................................................................. 17

3.1. Elemen Situs Website..................................................................................................... 17

3.2. Content managemen System (CMS) .............................................................................. 28

BAB IV PENGUJIAN APLIKASI WEBSITE............................................................................. 32

4.1. Aplikasi berbasis Web (Web Application ).................................................................... 32

4.2. Langkah Langkah pengujian Aplikasi website .............................................................. 32

BAB V PROMOSI DAN PEMELIHARAAN WEBSITE ....................................................... 34

5.1. Promosi Website ............................................................................................................ 34

5.2. Pemeliharaan Website .................................................................................................... 41

DAFTAR PUSTAKA .................................................................................................................. 42

1

BAB I. TERMINOLOGI PERANCANGAN WEBSITE

1.1. Terminologi Web Site atau sering juga disebut Web, dapat diartikan suatu kumpulan-kumpulan halaman

yang menampilkan berbagai macam informasi teks, data, gambar diam ataupun bergerak, data animasi, suara, video maupun gabungan dari semuanya, baik itu yang bersifat statis maupun yang dinamis, yang dimana membentuk satu rangkaian bangunan yang saling berkaitan dimana masing-masing dihubungkan dengan jaringan halaman atau hyperlink.

A. Web Desaign

Web Desain adalah istilah umum yang digunakan untuk mencakup bagaimana isi web konten ditampilkan, (biasanya berupa hypertext atau hypermedia) yang dikirimkan ke pengguna akhir melalui World Wide Web, dengan menggunakan sebuah browser web atau perangkat lunak berbasis web. Web Design adalah jenis desain grafis yang ditujukan untuk pengembangan dan styling obyek lingkungan informasi Internet untuk menyediakan dengan fitur konsumen high-end dan kualitas estetika. Definisi yang ditawarkan memisahkan desain web dari pemrograman web, menekankan fitur fungsional dari sebuah situs web, serta desain posisi web sebagai semacam desain grafis. Terdapat beberapa tujuan dari web desain yaitu sebagai berikut Untuk membuat situs web atau dokumen elektronik dan aplikasi yang berada pada

web server dan menampilkan konten dan fitur antarmuka interaktif kepada pengguna akhir dalam bentuk halaman Web. Seperti unsur-unsur teks, gambar (gif, jpeg) untuk ditempatkan pada halaman menggunakan HTML / XHTML / tag XML.

Menampilkan media yang lebih kompleks (vektor grafis, animasi, video, suara) membutuhkan plug-in seperti Adobe Flash, QuickTime, Java run-time dan lain-lain. Plug-in juga dimasukkan ke dalam halaman web dengan menggunakan HTML / tag XHTML.

Perbaikan sesuai browser dengan standar W3C diminta penerimaan luas dan penggunaan XHTML / XML bersama dengan Cascading Style Sheets (CSS) untuk posisi dan memanipulasi unsur-unsur halaman web dan objek. Kemampuan browser untuk mengirimkan berbagai konten dan pilihan aksesibilitas kepada klien tanpa menggunakan plug-in.

Dengan spesialisasi yang tumbuh di bidang teknologi informasi ada kecenderungan kuat untuk membedakan antara desain web (web design) dan pengembangan web (web development).

Adapun Fungsi dari Web Desaign adalah :

1. Fungsi Komunikasi Situs web tang berfungsi sebagai komunikasi pada umumnya adalah web dinamis.Karena dibuat menggunakan pemrograman web(server side) maka dilengkapi dengan fasilitas yang memberikan fungsi-fungsi komunikasi seperti web mail ,formanthec,chatting,forum dll.

2

2. Fungsi Informasi Menekankan pada kualitas konten,karena tujuan situs ini menyampaikan

isinya Sebaiknya berisi teks dan grafik Fasilitas yang memberikan fungsi informasi, news, file, company, library,

prefences dll. 3. Fungsi Entertainment

Sebagai sarana hiburan/penggunaan animasi gambar dan element bergerak dapat meningkatkan mutu persentasi design,meski tetap harus mempertimbangkan kecepatan downloadnya. Contoh fungsi Entertaiment: game online,film online,music online dll.

4. Fungsi Transaksi Situs web dapat dijadikan transaksi bisnis baik barang jasa,dll.situs web menghubungkan perusahaan konsumen dan komunitas tertentu melalui sarana elektronik.Pembayarannya bisa memudahkan kartu kredit, transfer ataupun membayar langsung.

B. Web Engineering (Rekayasa Web) Rekayasa Web ( RW ) yaitu suatu model rekayasa perangkat lunak yang digunakan untuk pengembangan aplikasi-aplikasi berbasis web, sedangkan menurut Pressman,2005 -> Rekayasa Web adalah suatu proses yang digunakan untuk membuat aplikasi web yang berkualitas tinggi. Rekayasa Web tidak sama persis dengan RPL (rekayasa perangkat lunak), tetapi RW memiliki konsep dan prinsip mendasar dari RPL. Proses di RW lebih ditekankan pada aktivitas teknis dan menajemen yang hampir sama. Beberapa karakteristik yang perlu diperhatikan dari aplikasi web yaitu : - Kesiapan ( Immediacy ) Pengembang harus memiliki metode untuk melakukan

perencanaan, analisis, desain, implementasi dan pengujian yang telah disesuaikan dengan waktu singkat sesuai kebutuhan dalam pengembangan aplikasi web, serta perkembangan teknologi yang semakin pesat menuntut para pengembang untuk kesiapannya.

- Keamanan ( Security ) Untuk melindungi data yang sensitive dan memberikan transmisi data yang yang aman, maka perlu diimplementasikan system keamanan yang kuat pada infrastruktur pendukung pada aplikasi web itu sendiri.

- Estetika Bagian yang sangat penting bagi daya taruj sebuah aplikasi web adalah tampilannya. Bagi sebuah aplikasi yang ditargetkan untuk dipasarkan, estetika memiliki tingkat kepentingan yang sama dengan desain teknisnya.

- Public User Aplikasi web ditujukan untuk digunakan oleh komunitas user yang besar, beragam dan sejumlah user yang tak dikenali. Oleh karena itu pada saat mengembangkan aplikasi web, user interface dan fitur‐fitur kemudahan dalam penggunaan (usability features) harus mampu menjawab kebutuhan dari semua user tersebut tanpa harus melalui suatu program latihan. Semua hal ini merupakan gabungan dari Human Web Interaction ( HWI ), user interface, dan information presentation.

- Compatible Media pengiriman konten untuk aplikasi web sangat berbeda dengan software tradisional. Apliakasi web membutuhkan kecocokan dengan berbagai jenis

3

perangkat display, format tampilan, dukungan hardware, software dan lain lain yang dirasa berhubungan dengan media pengiriman.

Tahapan-tahapan dalam rekayasa web antara lain : - Customer communication

Komunikasi yang baik dengan user merupakan sarana efektif dalam membuat atau menerjemahkan apa saja yang user inginkan (requirements).

- Planning Yaitu tahap penggabungan requirement (kebutuhan) dan informasi dari user dan perencanaan teknis serta menanggapi respon (tanggapan) dari user. Perencanaan teknis dilakukan dengan mengidentifikasi perangkat lunak maupun perangkat keras apa saja yang dibutuhkan, respon dari pengguna dapat dilakukan dengan cara menyebarkan kuisioner kepada user maupun kepada targetan lain selain user (mahasiswa dan masyarakat umum) tergantung kesepakatan pengembang.

- Modeling ( Pemodelan ) a. Analysis modeling merupakan tahap berikutnya dari planning dan komunikasi

dengan user. Analisis isi (content) -> merumuskan kebutuhan (requirements) dari user

serta permasalahan apa yang akan diselesaikan. Analisis interaksi -> mengidentifikasi interaksi antara user denagn system

berdasarkan hak akses pengguna Analisis fungsional -> mengidentifikasi operasi-operasi apa saja yang akan

dijalankan di dalam system maupun terpisah dengan system tetapi sangat penting bagi user.

Analisis konfigurasi -> mengidentifikasi lingkungan dan instruktur apa yang tepat untuk aplikasi yang akan dibuat.

b. Design modeling Desain antarmuka ( Interface ) -> memeriksa kumpulan informasi yang

telah dilakukan dalam tahap analisis, kemudian buat sketsa antarmuka, memetakan obyektif user ke dalam antarmuka uang spesifik.

Desain estetika -> merancang tampilan halaman dengan kombinasi warn, teks, dan gambar yang sesuai dengan isi dan tujuan aplikasi web.

Desain isi ( content ) -> merancang content dari aplikasi web itu sendiri. Desain tersebut dirancang berdasarkan kebutuhan informasi yang telah di identifikasi pada tahap analisis. Sedangkan desain basis data yang dilakukan yaitu : desain model konseptual, desain model logic, dan desain model fisik.

Desain navigasi -> hanya dilakukan ketika aplikasi web itu memiliki aturan-aturan atau hak otorisasi buat user sesuai dengan alur kerja system.

Desain arsitektur -> difokuskan pada aplikasi yang berstruktur hypermedia. Struktur arsitektur berkaitan erat dengan tujuan dari pengembangan situs, content yang disediakan dan user yang mengunjungi web.

- Construction (kontruksi) a. Implementasi ( coding ) Implementasi dilakukan dengan mengaplikasikan

halaman web dalam bentuk HTML berdasarkan hasil perancangan isi pada

4

aktivitas pada non technical member sedangkan implementasi isi dan fungsi logika dibuat dalam bentuk PHP.

b. Pengujian ( testing ) Dilakukan untuk mengetahui kemungkinan terjadinya kesalahan seperti kesalahan pada skrip atau form, navigasi ataupun tampilan, maupun bagian lainnya.

- Delivery & Feedback Serah terima dan respon dilakukan dengan cara menyebarkan kuisioner kepada user berupa respon untuk mendapatkan penilaian dari setiap kriteria sebagai hasil evaluasi bagi pengembang. Kriteria yang dilakukan biasanya usability, functionality, serta reliability.

Kategori dalam aplikasi web yaitu : - Document Centric Web Site

a. Model ini adalah genarasi awal dari aplikasi web. b. Halaman web disimpan di dalam sebuah web server sebagai halaman yang

sudah jadi, dan bersifat static, biasa dibuat dalam format HTML. c. Dikirim ke web‐client sebagai respon terhadap adanya request. d. Halaman Web diupdate secara manual menggunakan tools tertentu. e. Untuk kasus Websites yang membutuhkan perubahan berkala, dengan sejumlah

halaman, maka akan membutuhkan faktor biaya yang signifikan dan biasanya berdampak terhadap infromasi yang out of date.

f. Kelebihan model ini adalah pada kesederhanaan dan kestabilan web site g. Static Home Pages, Web cast, dan simple web termasuk ke dalam kategori ini.

- Interactive Web Application a. Dengan diperkenalkannya konsep CGI (Common Gateway Interface) yang

dapat diintegrasikan ke dalam form HTML, maka model static web mulai bergeser ke dalam bentuk interaktif web.

b. Pada generasi awal masih bersifat sederhana, tersedia form interaktif dalam bentuk rasio button, dan seleksi menu.

c. Halaman web dan link ke halaman lainnya di hasilkan secara dinamis sesuai dengan input yang diberikan user.

d. Contoh untuk kategori ini antara lain : situs berita dan timetable information. - Transactional Web Application

a. Jenis aplikasi ini dibuat untuk menyedia fasilitas interaktif yang lebih baik. b. Memungkinkan user untuk berinteraksi dengan aplikasi, tidak hanya dalam

bentuk read‐only, tetapi juga memungkinkan untuk mengupdate data atau mengubah isi, dimana dibutuhkan system basis data.

c. Memungkinkan untuk melakukan queri secara terstruktur. d. Online banking, online shopping, dan booking systems termasuk ke dalam

kategori ini. - Work flow‐based Web applications

a. Pada model ini memungkinkan untuk menangani transaksi aplikasi dalam atau antar perusahaan, user publik dan user private.

b. Katersediaan Data (Availability) merupakan salah satu layanan web dengan jeminan interroperabilitas (memungkinkan bagi system yang berbeda untuk dapat saling berkomunikasi).

c. Kekompleksan layanan dalam sistem ini merupakan salah satu kuncinya

5

d. Woekf low ini salah satu bentuknya adalah B2B Solution (Bussiness‐to‐Bussiness Solution), baik dalam e‐Commerce, aplikasi e‐Government dalama era administrasi publik atau dukungan berbasis web bagi pasien dalam sektor kesehatan.

- Collaborative Web applications a. Digunakan dalam membentuk suatu (groupware). b. Kebutuhan untuk komunikasi diantara user yang berkolaborasi. c. Collaborative Web applications mendukung proses berbagi informasi dan

workspaces. d. Mereka juga menggunakan logs dengan sejumlah entri data dan edit data

(seperti pada weblog) sebagai mediator pertemuan atau berdiskusi. e. Mendukung komunikasi diantara member, contohnya dalam bentuk chatting.

- Social Web a. Suatu bentuk layanan web yang memungkinkan orang‐orang saling

berinteraksi social meskipun tidak bertemu secara langsung. b. Dapat digunakan untuk orang‐orang yang mempunyai interest yang sama. c. Facebook.com dan myspace.com adalah salah bentuk social web yang terkenal

saat ini. - Portal‐oriented Web applications

a. Menyediakan satu tujuan akses dalam bentuk akses terpisah‐pisah, berpotensi untuk dijadikan sebagai sumber informasi dan layanan yang heterogen.

b. Sebagai tambahan pada portal umum, terdapat berbagai jenis portal dengan kegunaan khusus, seperti portal bisnis, portal pasar dalam bentuk mall belanja online, portal komunitas dan portal akademik yang mana hampir dipakai di tiap Universitas Negeri di Indonesia, contoh akademik.unsri.ac.id

- Ubiquitous Web applications a. Menyediakan layanan yang dapat dikutomisasi oleh usernya, kapanpun,

dimanapun dan untuk perangkat apapun, semuanya itu merupakan layanan akses yang ada dimana‐mana.

b. Sebagai contoh misalnya aplikasi web yang menyediakan layanan bagi orang yang bermobilitas tinggi untuk mengetahui restoran yang buka pada tengah malam contohnya.

- Semantic Web a. Seiring dengan semakin berkembangnya industri TIMEES

(Telecommunications, Information technology, Multimedia, Education dan Entertainment, dan Security), maka permintaan akan ketersediaan layanan dimanapun dan jenis layanan apapun akan mendominasi pasar aplikasi web, maka dibutuhkan suatu pengembangan aplikasi web yang disebut dengan Semantic Web.

b. Tujuan Semantic Web adalah menydiakan informasi yang tidak hanya untuk manusia, tetapi juga informasi yang bersifat machine readable form.

c. Semantic Web menyediakan suatu knowledge manegement pada web baik dalam bentuk link atau konten yang dapat digunakan kembali (content syndication)(Emozha, 2011)

6

C. Desainer Web Web designer adalah seseorang yang bekerja dengan unsur-unsur visual pada suatu

halaman web. Dia adalah orang yang membuat wajah halaman web tampak begitu “cantik”. Para web design mengintegrasikan komponen seperti gambar, file flash, atau multimedia ke dalam halaman web untuk menambah pengalaman visual user, atau untuk melengkapi content page.

Pemahaman tentang Client-side scripting, HTML, CSS, cara memanipulasi image dan animasi merupakan beberapa hal yang dikuasai oleh web designer. Berikut adalah bagian hal yang harus dipahami oleh seorang web designer: - Client-side scripting: JavaScript - Server-Side scripting: PHP, ASP, dsb. - Cascading Style Sheets - HTML - Manipulasi image : Adobe Photosop, GIMP, Corel Draw, dsb. - Animasi, biasanya berupa flash.

Seorang perancang web memang harus membutuhkan keterampilan tersendiri.

Pasalnya harus mengetahui lebih banyak bagaimana kode situs web harus dijalankan.

Apalagi perancang web sebetulnya menuntut dua kemampuan sekaligus, yakni design

dan programming. Karena itulah, dibutuhkan ketekunan dan kedisiplinan saat memulai

berkarier menjadi perancang website. Mengingat dunia digital semakin berkembang

pesat, banyak pula orang awam yang ingin menjadi web designer. Padahal menjadi

perancang web tersebut bukan hanya menguasai kemampuan HTML dan CSS, tetapi

banyak bahasa pemograman yang harus dipelajari. Berikut adalah 14 skill yang

diperlukan untuk menjadi web designer.

1.2. Evolusi Web A. Sejarah Website

Website pertama kali ditemukan oleh Sir Timothy John, Tim Berners-Lee. Pada tahun

1991 website terhubung dengan jaringan.Ttujuan dari dibuatnya website pada saat itu

yakni untuk mempermudah tukar menukar dan memperbaharui informasi kepada sesama

peneliti di tempat mereka bekerja. Dengan demikian pengertian website saat itu masih

sebatas tukar menukar informasi, bukan pengertian website secara terminologi.

Website dipublikasikan ke publik setelah adanya pengumuman dari CERN pada tanggal

30 april 1993. CERN menyatakan bahwa website dapat digunakan secara gratis oleh

semua orang. Pada saat ini pengertian website sudah masuk ke dalam ranah publik karena

sudah bisa digunakan oleh semua orang dimanapun dan kapanpun.

Secara garis besar, website bisa digolongkan menjadi 3 bagian yaitu:

- Website Statis adalah web yang mempunyai halaman tidak berubah. Artinya adalah

untuk melakukan perubahan pada suatu halaman dilakukan secara manual dengan

mengedit code yang menjadi struktur dari website tersebut.

- Website Dinamis merupakan website yang secara struktur diperuntukan untuk

update sesering mungkin. Biasanya selain utama yang bisa diakses oleh user pada

7

umumnya, juga disediakan halaman backend untuk mengedit kontent dari website.

Contoh umum mengenai website dinamis adalah web berita atau web portal yang

didalamnya terdapat fasilitas berita, polling dan sebagainya.

- Website Interaktif adalah web yang saat ini memang sedang booming. Salah satu

contoh website interaktif adalah blog dan forum. Di website ini user bisa

berinteraksi dan beradu argument mengenai apa yang menjadi pemikiran mereka.

Biasanya website seperti memiliki moderator untuk mengatur supaya topik yang

diperbincangkan tidak keluar jalur.

Ketiga jenis website diatas merupakan jenis website yang sering dibuat oleh setiap

developer di Indonesia seperti jasa pembuatan website, dimana yang paling diminati

adalah jenis yang DINAMIS, dikarenakan pemilik website dapat melakukan pengubahan

content secara mandiri.

B. Perkembangan website

Web sedemikian berkembangnya sehingga para ahli telah memberikan penomoran untuk

mengklasifikasikan generasi teknologi Web yang digunakan, yaitu :

- Web 1.0 (1990–2000)

Web1.0 adalah generasi pertama dari website di internet. Dalam web 1.0 para pengunjung

dapat mencari dan browsing data yang ada di dalam web, namun pengunjung tidak

memiliki akses untuk memasukkan data atau informasi ke dalam situs. Pada masa web

1.0, layanan internet masih berkisar diantara static website yang saling dihubungkan

dengan hyperlink. Website pada kala itu, hanya menyampaikan informasi satu arah dalam

bentuk brosur online. Pada tahun 1998 Google berdiri dan internet semakin mudah untuk

digunakan. Pada masa itu, website dengan format portal berita dan took online (example:

Amazon.com) menjadi website yang paling diminati oleh para investor.

- Web 2.0 (2001–2010)

Pada Web 2.0 pengembangan dimulai. Pada era ini, pengunjung dapat melakukan

interaksi dengan diatur oleh system yang ada pada web. Web 2.0 sendiri merupakan

istilah yang dicetuskan pada tahun 2003 oleh O’reilly Media lalu kemudia dipopulerkan

pada konfrensi web 2.0 pada tahun 2004. Web 2.0 memiliki beberapa ciri khas, yaitu:

share, collaborate dan exploit. Di dalam era web 2.0 penggunaan web untuk berbagi

pertemanan, kolaborasi menjadi sesuatu yang penting.

Web 2.0 adalah revolusi bisnis di industri komputer yang disebabkan oleh

penggunaan internet sebagai platform, dan merupakan suatu percobaan untuk memahami

berbagai aturan untuk mencapai keberhasilan pada platform baru tersebut. Salah satu

aturan terutama adalah: Membangun aplikasi yang mengeksploitasi efek jaringan untuk

mendapatkan lebih banyak lagi pengguna aplikasi tersebut.

Berbagai layanan berbasis web seperti jejaring sosial, wiki dan folksonomies (misalnya:

“flickr.com”, “del.icio.us”) merupakan teknologi Web 2.0 yang menambah interaktifitas

8

di antara para pengguna Web. Pada umumnya, Website yang dibangun dengan

menggunakan teknologi Web 2.0 memiliki fitur-fitur sebagai berikut:

• CSS (Cascading Style Sheets)

• Aplikasi Rich Internet atau berbasis Ajax

• Markup XHTML

• Sindikasi dan agregasi data menggunakan RSS/Atom

• URL yang valid

• Folksonomies

• Aplikasi wiki pada sebagian atau seluruh Website

• XML Web-Service API

- Web 3.0 (2005-now)

Pada masa ini, lambat laun kebiasaan dan kebutuhan para pengunjung dunia maya

semakin bertambah dan selalu berubah. Hal ini juga sejalan dengan semakin cepatnya

akses internet broadband dan teknologi komputer yang semakin canggih.

Walaupun masih dalam perdebatan di kalangan analis dan peneliti, istilah Web 3.0 tetap

berpotensi menjadi generasi teknologi di dunia Internet. Saat ini, definisi untuk Web 3.0

sangat beragam mulai dari pengaksesan broadband secara mobile sampai kepada layanan

Web berisikan perangkat lunak bersifat on-demand. Namun, menurut John Markoff, Web

3.0 adalah sekumpulan teknologi yang menawarkan cara baru yang efisien dalam

membantu komputer mengorganisasi dan menarik kesimpulan dari data online.

Berdasarkan definisi yang dikemukakan tersebut, maka pada dasarnya Semantic Web

memiliki tujuan yang sama karena Semantic Web memiliki isi Web yang tidak dapat

hanya diekpresikan di dalam bahasa alami yang dimengerti manusia, tetapi juga di dalam

bentuk yang dapat dimengerti, diinterpretasi dan digunakan oleh perangkat lunak

(software agents). Melalui Semantic Web inilah, berbagai perangkat lunak akan mampu

mencari, membagi, dan mengintegrasikan informasi dengan cara yang lebih mudah.

Web 3.0 terdiri dari: Web semantic, Format mikro, Pencarian dalam bahasa pengguna,

Penyimpanan data dalam jumlah besar, Pembelajaran lewat mesin, Agen rekomendasi

yang merujuk pada kecerdasan buatan Web.

Sekarang perkembangan web sangat beragam baik disisi tampilanya maupun di sisi

bahasa pemrograman yang digunakan. Sehingga setiap orang akan lebih mudah tentunya

dalam membuat web dan mempergunakanya. Karena tentu saja kembali ke fungsi

teknologi sendiri, yaitu untuk memudahkan manusia dalam melakukna sesuatu hal.

Berdasarkan definisi yang dikemukakan tersebut, maka pada dasarnya Semantic Web

memiliki tujuan yang sama karena Semantic Web memiliki isi Web yang tidak dapat

hanya diekpresikan di dalam bahasa alami yang dimengerti manusia, tetapi juga di dalam

bentuk yang dapat dimengerti, diinterpretasi dan digunakan oleh perangkat lunak

(software agents). Melalui Semantic Web inilah, berbagai perangkat lunak akan mampu

mencari, membagi, dan mengintegrasikan informasi dengan cara yang lebih mudah

9

1.3. Pengembangan Aplikasi website Web adalah suatu media komunikasi masa yang baru. Untuk membuat website yang efektif

dengan desain yang baik dibutuhkan beberapa keahlian seperti : information architecture, desain komunikasi visual, komunikasi masa, pemrograman komputer, administrasi bisnis, dan psikologi konsumen.

Proses pengembangan website meliputi beberapa tahap, yaitu : a. Requirement Analysis and Development Plan Hal-hal yang harus ditentukan dalam

tahap ini adalah : • Apa yang dibutuhkan untuk menyelesaikan pembuatan website? • Masalah klien apa yang ingin Anda pecahkan? • Siapa target audiens website? • Pekerjaan desain dan pemrograman apa sajakah yang harus dilakukan? • Sumber daya dan informasi apakah yang perlu disediakan dalam website? • Siapa yang akan menyediakan konten informasi website dalam dalam format apa? • Sumber daya apa yang diperlukan dan disediakan : konten tekstual, photo-photo,

gambar-gambar, audio, video, logo-logo, identitas standar perusahaan, copyright, credits, footers?

Tentukan jawaban dari pertanyaan-pertanyaan diatas dan buat perencanaan, buat dan kelompokkan konten, fungsional, dan kebutuhan tampilan. Dan tentukan tujuan dan milestone untuk pengembangan website.

b. Arsitektur Situs Tentukan arsitektur yang tepat untuk situs. Arsitektur situs dipengaruhi oleh cenderung ke interior decoration daripada architecture. Bagaimanapun, architecture dan dekorasi eksterior/interior adalah dua hal yang sangat berhubungan. Tahap ini menghasilkan cetak biru untuk pengembangan website. Cetak biru adalah spesifikasi dari komponenkomponen dan konten-kontennya, fungsionalitas, hubungan, konektivitas, dan interaksi. Implementasi website mengikuti arsitekturnya. Aspek penting dari arsitektur situs adalah sistem navigasi bagi pengunjung untuk melihat isi website. sifat informasi yang akan disajikan dan cara penyajiannya. Information Architecture (IA) website berkaitan dengan susunan, hubungan, konektivitas, organisasi logik, dan interaksi dinamis diantara bagian-bagian pokok website. Dalam setiap halaman web, pertimbangkan perihal penempatan, tata letak, efek visual, font dan style teks, dan lain-lain. Hal-hal tersebut juga penting tetapi mungkin lebih

c. Text-only Site Framework Tahap ini untuk menyiapkan kerangka situs sebagai sebuah fondamen untuk membuat penyesuaian dan untuk pekerjaan selanjutnya untuk melengkapi situs. Konten : buat daftar konten, siapkan file-file konten untuk dimasukkan kedalam

halaman-halaman web. Site map : buat diagram hubungan dari seluruh halaman web yang akan dibuat

untuk situs, tentukan judul yang tepat untuk setiap halaman, tampilkan kelompok halaman, link dalam dan luar situs, bedakan halaman-halaman statis dan dinamis.

Skeletal site/kerangka situs : halaman masuk, homepage, sub halaman dan sub-sub halaman yang khas, konten tekstual (dapat berupa ringkasan), formform HTML dengan tata letak tekstualnya, struktur hirarki file situs.

10

d. Navigasi : gunakan arsitektur situs dan sitemap untuk menghubungkan halaman-halaman web, gunakan link navigasi tekstual dengan penempatan perkiraannya (left, right, top, bottom), hindari halaman yang deadend dan membuat user bingung. Desain Artistik dan Komunikasi Visual Konsep desain : feature-feature, karakteristik dan tampilan serta citarasa situs. Desain harus merefleksikan identitas klien dan tujuan situs. Story boards : sketsa tata letak sederhana berdasarkan teks situs untuk halaman-halaman yang khas, form-form HTML, dan halaman-halaman tanggapan form HTML; header, footer, margin, batang navigasi, logo, dan elemen grafis lainnya untuk mendukung penyajian konten; umpan balik klien dan persetujuan terhadap story boards. Page layout : pengelompokkan dan hirarki konten; grid-grid, perataan, konstanta dan variabel pada halaman; penempatan dan ukuran dari chart, grafik, ilustrasi, dan foto; penggunaan kreatif ruang dan variasi dari font, grid, dan warna; variasi dan pilihan style. Homepage/entry page : visual untuk mendukung tujuan dan fungsi unik dari pintu masuk ke situs dan homepage seperti dideskripsikan dalam arsitektur situs.

e. Site Production Page templates buat template untuk halaman-halaman yang khas dari seluruh level. Template adalah file-file kerangka yang digunakan membuat halaman web dengan menyisipkan teks, grafis dan konten lain pada tempat bertanda dalam template. Dengan kata lain, template adalah suatu kerangka halaman dengan desain tertentu, tata letak dan grafis tertentu, yang siap disisipi dengan teks, link, grafis, audio, video, dan konten lainnya. Sebuah halaman template menyediakan file-file HTML, CSS, javascript, dan untuk template yang lebih komplit juga menyediakan fitur-fitur server side Prototype page : Gunakan template untuk membuat prototype page, perlihatkan kepada klien dan dapatkan umpan balik dan persetujuan klien. Pastikan sistem layout didesain secara luwes untuk mengakomodasi kemungkinan perubahan konten. Client Side Programming : tambahkan script yang dapat ditampilkan pada browser klien dan kemungkinan penggunaan browser lainnya. Script dapat terdiri dari CSS dan javascript yang akan membuat situs lebih interaktif dan responsif Server Side Programming : buat program untuk memproses form, pembuatan halaman secara dinamis, akses database, fitur e-bisnis dan e-commerce Finished Pages : berdasarkan halaman prototype yang telah dibuat, tambahkan teks, grafis, photo, animasi, audio, dan video ke template untuk menghasilkan seluruh halaman web yang dibutuhkan, lakukan penyesuaian akhir.

f. Error Checking and Validation Gunakan tools untuk memeriksa halaman web untuk menghilangkan ejaan yang salah, link yang putus, dan permasalahan pengkodean HTML. Periksa juga waktu loading halaman.

g. Testing Cek situs dengan menggunakan berbagai jenis browser dari berbagai lokasi. Periksa lagi kebutuhan dan arsitektur situs.

h. Deploying Upload situs ke web, buat URLnya diketahui pengguna internet, dan daftarkan situs dengan menggunakan search engine

11

i. Documentation Tulis deskripsi website, fungsi, dan desainnya, struktur filenya, lokasi penempatan file-file sumber untuk aspek seni dan

j. Maintenance Lanjutkan operasi dan evolusi dari website(dinus repository, n.d.)

12

BAB II MERANCANG DAN MEMBANGUN WEBSITE

2.1. Aturan Membuat Website

Sering kita temui website yang tipikal: "Welcome to my homepage," animasi e-mail, background dengan tulisan miring (diagonal), animasi garis pembatas, tabel dengan border tiga-dimesi dan lain-lain. Hal ini terjadi akibat dari fasilitas Template yang disediakan oleh software pembuat web seperti: FrontpageT, Corel WebDesignerT, dan sebagainya yang ditujukan untuk mempermudah penggunanya dalam membangun website.

Jika anda puas dengan hasil kerja anda membangun website dengan fasilitas template, sudahlah cukup sampai disini. Tetapi jika anda tidak puas dengan apa yang anda buat, dan anda merasa ingin lebih baik, maka anda perlu mengetahui bagaimana Web Designer membangun suatu Website, terlepas anda punya bakat seni atau tidak. a. Unik : Dalam membuat karya apapun seorang designer mempunyai kesadaran untuk tidak

meniru atau menggunakan karya orang lain. Begitu pula seorang Web Designer harus mempunyai budaya malu untuk menggunakan icon, animasi, button, dll, yang telah digunakan atau dibuat oleh orang lain.

b. Komposisi : Seorang Web Designer selalu memperhatikan komposisi warna yang akan digunakan dalam website yang dibuatnya. Pergunakan selalu Palette 216 WebColor, yang dapat diperoleh dari Adobe.com, hal ini untuk mencegah terjadinya dither pada image yang berformat GIF. Dalam membangun website suatu perusahaan, Web Designer selalu menyesuaikan warna yang digunakan dengan Corporate Color perusahaan tersebut. Sebagai contoh: Telkom Corporate Color-nya adalah biru, Coca-Cola : merah dan putih, Standard-Chartered : hijau dan biru, dsb. Untuk kemudian warna-warna tadi digunakan sebagai warna dominan atau sebagai elemen pendukung (garis, background, button, dsb).

c. Simple : Web Designer banyak yang menggunakan prinsip "Keep it Simple", hal ini ditujukan agar tampilan website tersebut terlihat rapi, bersih dan juga informatif. Semiotik : Semiotika adalah ilmu yang mempelajari tentang tanda-tanda. Dalam hal ini diharapkan dengan melihat tanda atau gambar, user/ audience dapat dengan mudah dan cepat mengerti. Sebagai contoh: Jangan membuat gambar/image yang berkesan tombol, padahal itu bukan tombol/ link.

d. Ergonomis : Web Designer selalu memperhatikan aspek ergonomi. Ergonomi disini adalah dalam hal kenyamanan user dalam membaca dan kecepatan user dalam menelusuri website tersebut. Web Designer memilih ukuran Fonts yang tepat sehingga mudah dibaca, Web Designer menempatkan link sedemikian rupa sehingga mudah dan cepat untuk di akses dan lebih penting lagi adalah Informatif.

e. Fokus : Tentukan hirarki prioritas dari pesan yang akan disampaikan, misalnya: Judul harus besar, tetapi jangan sampai akhirnya akan konflik dengan subjudul yang berukuran hampir sama. Hal ini akan membingungkan user/audience untuk menentukan pesan mana yang harus lebih dahulu dibaca/ dilihat.

f. Konsisten : Tentukan font apa yang akan digunakan sebagai Body-text, Judul, Sub Judul dan sebagainya, sehingga website tersebut akan terlihat disiplin dan rapi. Sesuaikan jenis huruf yang digunakan dengan misi dan visi website tersebut, misalnya: hindari menggunakan font Comic dalam membangun website suatu perusahaan resmi.

13

2.2. Software Untuk Merancang Website

Desain : Untuk membuat desain suatu homepage biasanya para web designer dimulai dengan

software ini sebagai tampilan sementara atau dalam membuat layout homepage.

Adobe Photoshop : Desain berbasis titik ( bitmap )

Adobe Image Ready : Memotong gambar-gambar ke dalam format html

Adobe Illustrator : Desain berbasis vector

CorelDraw : Desain berbasis vector

Macromedia Freehand : Desain berbasis vector

Efek Desain : Hal ini dilakukan untuk menghidupkan desain yang telah kita rancang. Seperti

menambah efek cahaya, textur dan manipulasi teks.

Macromedia Firework : Efek teks

Painter : Memberikan efek lukisan

Ulead Photo Impact : Efek frame dan merancangan icon yang cantik.

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.

3D Studio Max : Untuk membuat objek dan animasi 3D.

Gif Construction Set : Membuat animasi file gif

Macromedia Flash : Menampilkan animasi berbasis vector yang berukuran kecil.

Microsoft Gif Animator : Membuat animasi file gif

Swift 3D : Merancang animasi 3D dengan format file FLASH.

Swish : Membuat berbagai macam efek text dengan format file FLASH.

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.

Alaire Homesite

Cold Fusion

Microsoft Frontpage

Macromedia Dreamweaver

Net Object Fusion

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 Microsoft Frontpage atau Macromedia

Dreamweaver agar lebih mengenal aturan-aturan membuat homepage dan mengenal bahasa

html. Setelah itu baru Adobe Photoshop yang dipakai kebanyakan para desainer.

14

2.3. Elemen Desain Web

Sebetulnya tidak ada aturan khusus tentang bagaimana desain website yang baik. Setiap

desain akan disesuaikan dengan maksud dan tujuan masing-masing website. Tetapi,

memahami hal-hal dasar tentang desain yang baik dan buruk akan membantu membuat website

terlihat lebih baik. Desain itu sendiri adalah proses membuat dan mengkomunikasikan gagasan

dalam bentuk gambar atau visual. Tujuan adanya desain adalah untuk menciptakan suatu

harmoni dan mencapai satu kesatuan. Elemen-elemen desain web yang dimaksud adalah logo,

icon, blok teks, dan foto yang ada dalam suatu halaman web. Untuk lebih jelasnya, berikut akan

dijelaskan elemen-elemen desain web.

a. Titik (Point), Line (Garis), dan Bidang (Plane) Semua komposisi atau tata letak bisa diuraikan menjadi elemen-elemen desain web sederhana, hasil kombinasi dari titik, garis dan bidang. Space adalah jarak antara satu bentuk dengan bentuk lainnya. Dalam ilmu desain, jarak artinya memberi ruang untuk “istirahat” atau memberi kesan nyaman. Jarak juga akan memberikan penekanan pada objek visual di suatu halaman.

b. Kesatuan dan Variasi Penjelasan sederhana unity adalah sebuah gabungan gambar. Gabungan elemen-elemen desain web seperti teks, grafis, dan shapes menjadi gambar yang disebut sebagai suatu harmoni. Hal penting untuk mencapai sebuah kesatuan adalah proximity, repetition, continuation. Tampilan secara keseluruhan harus dominan dari elemen-elemen desain web pembentuknya. Continuation merupakan suatu susunan yang terencana dari berbagai macam bentuk. Jika sebuah website menempatkan margin, jarak antar teks, dan jarak antara logo dengan headline secara konsisten, pengunjung akan lebih tertarik untuk menelusuri gambar dari atas ke bawah, dari satu sisi ke sisi yang lain. Elemen desain web penting lainnya dalam desain web adalah ukuran dan gaya font, warna background halaman, penempatan navigasi, hyperlink dan format layout yang konsisten. Mencapai suatu kesatuan dengan konsisten memang penting, namun tidak semua aspek harus seragam. Tampilan tetap harus ada variasi lain untuk menambah daya tarik dan tidak terkesan monoton. Lalu bagaimana cara yang benar untuk mendesain sebuah web? Tidak ada cara tertentu yang bisa membuat desain web menjadi baik. Mendesain adalah sebuah proses kreatif.

c. Emphasis, Focal Point, dan Hirarki Ketika seorang pengunjung datang ke web, ia akan memulai customer journey dengan memilih sebuah titik mulai (starting point) untuk memperoleh kesan visual. Titik mulai atau starting point dalam desain disebut dengan titik focal (focal point). Titik focal adalah tempat paling menonjol dalam sebuah desain. Desainer biasa menggunakan isolasi, ukuran, dan nilai untuk membuat titik focal.

d. Titik focal bisa berupa logo, headline atau gambar yang menyatakan sesuatu secara langsung mengenai suatu konten dalam web. Titik focal pada situs komersial biasanya adalah sebuah headline, nama perusahaan, logo, dan gambar lain yang akan membuat pengunjung menuju

15

ke halaman informasi. Penjelasan sederhana terkait hirarki adalah urutan dari sesuatu yang dilihat oleh pengunjung. Urutan tersebut ditentukan oleh pentingnya dari masing-masing elemen dan pesan yang ingin disampaikan kepada pengunjung. Navigasi juga merupakan komponen penting dalam sebuah web, namun tidak harus ditekankan di setiap halaman. Sama seperti rambu-rambu jalan raya, mudah terlihat dan memberikan informasi yang efektif tanpa menguasai seluruh jalan raya.

e. Kontras dan Fungsinya Kontras dalam desain bisa digunakan untuk menyampaikan sesuatu yang berlawanan, hitam dan putih, tebal dan tipis, kecil dan besar. Maka, kontras dalam desain adalah tampilan yang berlawanan.komponen dasar dalam kontras adalah figure-ground relationship atau biasa disebut dengan ruang positif dan negatif. Manfaat dasar dari adanya kontras adalah untuk membuat variasi visual suatu komposisi dan meningkatkan efek visual keseluruhan. Kontras pada layar komputer adalah untuk membantu mata membedakan elemen. Kontras juga bisa meningkatkan readability (keterbacaan) dan bisa membuat sebuah pesan terkesan lantang atau halus. Ukuran sebuah bentuk biasanya akan menarik perhatian. Foto dengan ukuran besar, layar besar, atau kapal yang besar akan menarik perhatian karena ukurannya. Sebaliknya pun demikian, ukuran yang sangat kecil namun detail juga akan menarik perhatian. Itulah mengapa ukuran merupakan elemen desain web penting dalam desain visual website. Nilai adalah sarana lain untuk mengatur kontras. Nilai akan berhubungan dengan tingkat kegelapan atau terang sebuah objek. Dalam seni desain, nilai juga bisa digunakan untuk membuat bentuk tiga dimensi atau untuk menunjukan sumber cahaya.

f. Typography Typography adalah perpaduan antara seni dan teknik mengatur tulisan. Pengolahan tipografi tidak terbatas pada pilihan jenis huruf, ukuran, atau dekorasi. Tipografi juga mempertimbangkan adanya tata letak vertikal atau horizontal tulisan pada sebuah desain. Tipografi untuk web tidak sebebas tipografi untuk media cetak. Perancang desain web hanya memiliki sedikit kebebasan untuk menentukan tipografi. Tidak semua jenis komputer pengguna memiliki spesifikasi yang sama. Perbedaan browser dan dukungan standar dalam CSS membuat tipografi web tidak memiliki bentuk jika tidak cocok untuk ditampilkan.

g. Elemen Warna Warna pada website ecommerce pasti berbeda dengan warna pada website untuk blog. Itulah mengapa, seorang desainer web juga harus memahami dasar-dasar psikologi warna. Pemilihan warna akan menentukan kesan dan penilaian terhadap website. Seperti warna merah, warna tersebut akan cocok jika digunakan pada sebuah ecommerce, namun akan kurang tepat jika digunakan dalam website berita.

h. Elemen Keseimbangan Desain sebuah web tidak hanya harus terlihat bagus dan menarik, tetapi juga harus seimbang. Keseimbangan ada dalam aturan kekontrasan visual. Desainer bisa saja membuat bentuk yang asimetris, namun ia juga harus membuat layout dengan teliti supaya kesan seimbang tersebut tetap terlihat. Misalnya ketika seorang desainer ingin membuat bentuk yang asimetris, bentuk tersebut bisa dibuat dengan ukuran yang besar, kemudian diimbangi

16

dengan menambahkan teks. Desainer harus bisa memastikan elemen utama tetap terlihat tanpa terganggu dengan bentuk yang asimetris. Cara sederhana lain untuk menyeimbangkan desain asimetris dalam web adalah memasangkan gambar dengan teks. Selain memasangkan gambar dengan teks, keseimbangan bisa didapat dari latar depan dan latar belakang. Cara ini akan menciptakan dinamika yang menarik, dimana latar belakang terlihat lebih fungsional sebagai bagian dari konten.

17

BAB III MANAJEMEN SITUS WEBSITE

3.1. Elemen Situs Website

Desain web, sama seperti fesyen, selalu berubah mengikuti perkembangan zaman. Ada trend

yang sama sekali baru, ada pula yang merupakan pengulangan dari trend beberapa tahun ke

belakang. Tapi, elemen-elemen esensial di dalamnya tidak banyak berubah.

Elemen desain web bukan hanya agar web elok dipandang, tapi juga agar memudahkan

pembaca dan Google Crawler ketika menjelajahi web kita. Dengan kata lain, meningkatkan user

experience (UX).

A. Elemen #1: Layout Layout sebuah situs web hendaklah mempertimbangkan letak penyusunan elemen-elemen desain yang memudahkan pembaca untuk mencerna aliran informasi. Perhatikan hierarki dan keseimbangan layout secara keseluruhan. Susunan paling umum adalah atas-bawah-kiri-kanan.

18

Tip: Buat susunan atau aliran informasi yang mudah diikuti oleh mata pembaca. Susun elemen berdasarkan skala prioritas dari paling penting → penting → kurang

penting. Sebagian besar orang terbiasa membaca dari kiri ke kanan, maka letakkan main

post di sebelah kiri sedangkan sidebar di sebelah kanan. Perhatikan pula keseimbangan susunan elemen desain.

B. Elemen #2: White Space White space berguna untuk membantu mata manusia mengorganisasi data. Bagi Anda yang belum begitu familiar dengan istilah desain, white space bisa diartikan sebagai ruang kosong yang memisahkan antara satu elemen dengan elemen lainnya. Situs web adalah sebuah ruang berisi berbagai informasi, agar informasi itu dapat diolah dengan baik oleh mata pembaca, maka ruang kosong berfungsi sebagai jeda. Fungsi ruang kosong (Lia Anggraini S. & Kirana Nathalia, 2014:82):

Berfungsi sebagai separator untuk setiap elemen desain. Memberi fokus terhadap elemen yang ingin ditonjolkan. Memberi kesan desain yang lebih clean dan relaxing. Menciptakan layout yang lebih seimbang dan harmonis. Meningkatkan keterbacaan teks.

Tip: Gunakan ruang kosong dengan jarak yang sama antara satu elemen dengan elemen

lainnya. White space juga termasuk jarak antarbaris dan antarparagraf dalam body text.

C. Elemen #3: Jenis Huruf Prinsip memilih huruf untuk web (materi cetak seperti brosur, pamflet, buku, atau materi cetak lainnya. Sebab ketika membaca di layar, mata manusia lebih cepat lelah daripada ketika membaca di atas kertas.Berikut beberapa hal yang harus diperhati

Klasifikasi huruf. Kenali klasifikasi huruf dan karakternya masingSetidaknya ada 4 klasifikasi dasar huruf: serif, sans serif,

1. Serif memberikan kesan klasik, resmi, dan elegan. Biasapada buku, surat kabar, dan konten formal atau semi formal. Contoh: Times New Roman (TNR), Garamond, Georgia, Cambria.

2. Sans Serifmemiliki tingkatdibandingkan dengan huruf serif. Memberikan kesan formal sekaligus kasual. Contoh: Helvetica, Arial, Trebuchet, Verdana, Josefin Sans.

3. Script memiliki banyak sekali variasi (memberikan kesan klasik, santai, seperti huruf tegak bersambung (bersambung), jenis hurufmenggunakan jenis huruf ini untuk judulmenggunakannya untuk

4. Dekoratif, sama sepertivariasi dari mulai yang betultertentu. Huruf dekoratif tidak terlalu cocok digunakan untuk web fonts baik untuk judul maupunjenis ini untuk tulisan dibukan untuk kalimat panjang.

19

Gunakan ruang kosong dengan jarak yang sama antara satu elemen dengan elemen

juga termasuk jarak antarbaris dan antarparagraf dalam body text.

Prinsip memilih huruf untuk web (web fonts) agak berbeda dengan ketika memilih huruf untuk materi cetak seperti brosur, pamflet, buku, atau materi cetak lainnya. Sebab ketika membaca di layar, mata manusia lebih cepat lelah daripada ketika membaca di atas kertas. Berikut beberapa hal yang harus diperhatikan ketika memilih jenis huruf untuk web:

Kenali klasifikasi huruf dan karakternya masingSetidaknya ada 4 klasifikasi dasar huruf: serif, sans serif, script, dan dekoratif.

memberikan kesan klasik, resmi, dan elegan. Biasabuku, surat kabar, dan konten formal atau semi formal. Contoh: Times

New Roman (TNR), Garamond, Georgia, Cambria. Sans Serif adalah huruf yang paling cocok untuk digunakan karena memiliki tingkat readibility yang lebih tinggi di layar kodibandingkan dengan huruf serif. Memberikan kesan formal sekaligus kasual. Contoh: Helvetica, Arial, Trebuchet, Verdana, Josefin Sans.

memiliki banyak sekali variasi (brush, handwriting,memberikan kesan klasik, santai, dan kasual. Karena karakternya yang seperti huruf tegak bersambung (well, ini memang huruf tegak bersambung), jenis huruf script lebih sulit dibaca di layar. Anda bisa menggunakan jenis huruf ini untuk judul post, tapi hindari menggunakannya untuk body text.

, sama seperti script, huruf dekoratif juga memiliki banyak sekali variasi dari mulai yang betul-betul alfabet, simbol, hingga ikontertentu. Huruf dekoratif tidak terlalu cocok digunakan untuk web fonts baik untuk judul maupun body text. Tapi, Anda bisa menggunakan huruf jenis ini untuk tulisan di image asalkan hanya untuk satu atau dua kata, bukan untuk kalimat panjang.

Gunakan ruang kosong dengan jarak yang sama antara satu elemen dengan elemen

juga termasuk jarak antarbaris dan antarparagraf dalam body text.

berbeda dengan ketika memilih huruf untuk materi cetak seperti brosur, pamflet, buku, atau materi cetak lainnya. Sebab ketika membaca di

kan ketika memilih jenis huruf untuk web: Kenali klasifikasi huruf dan karakternya masing-masing.

, dan dekoratif. memberikan kesan klasik, resmi, dan elegan. Biasanya digunakan buku, surat kabar, dan konten formal atau semi formal. Contoh: Times

untuk digunakan karena yang lebih tinggi di layar komputer jika

dibandingkan dengan huruf serif. Memberikan kesan formal sekaligus kasual. Contoh: Helvetica, Arial, Trebuchet, Verdana, Josefin Sans.

brush, handwriting, kaligrafi, dll), dan kasual. Karena karakternya yang

, ini memang huruf tegak lebih sulit dibaca di layar. Anda bisa

, tapi hindari

, huruf dekoratif juga memiliki banyak sekali betul alfabet, simbol, hingga ikon-ikon

tertentu. Huruf dekoratif tidak terlalu cocok digunakan untuk web fonts Tapi, Anda bisa menggunakan huruf

asalkan hanya untuk satu atau dua kata,

Karakter. Huruf memiliki psikologinya sendiridengan karakter situs web atau

Legibility. Adalah tingkat kemudahan mata mengenali suatu karakter/huruf tanpa

harus bersusah payah (Lia Anggraini S. & Kirana Nathalia, 2014:64). Ada beberapa jenis huruf yang sulit dibaca sehingga pesan yang ingin disampaikan pun sulit oleh pembaca, misalnya jenishuruf di bawah, keduanya memakai jenis huruf yang sama, tetapi memiliki legibility yang berbeda. Kata pertama menggunakankombinasi huruf besar dan kekapital.

Readibility. Readibility

huruf lain. Jenis huruf yang memiliki tinggi bervariasi lebih mudah dibaca daripada huruf yang memiliki tinggi sama.antarhuruf dan jarak antarkata.

20

Huruf memiliki psikologinya sendiri-sendiri, pilih jenis huruf yang sesuai dengan karakter situs web atau produk Anda.

. Adalah tingkat kemudahan mata mengenali suatu karakter/huruf tanpa harus bersusah payah (Lia Anggraini S. & Kirana Nathalia, 2014:64). Ada beberapa jenis huruf yang sulit dibaca sehingga pesan yang ingin disampaikan pun sulit oleh pembaca, misalnya jenis-jenis huruf script atau dekoratif. Perhatikan contoh huruf di bawah, keduanya memakai jenis huruf yang sama, tetapi

yang berbeda. Kata pertama menggunakankombinasi huruf besar dan kecil, sedangkan yang kedua memakai

Readibility berkaitan dengan bentuk huruf dan hubungannya dengan huruf lain. Jenis huruf yang memiliki tinggi bervariasi lebih mudah dibaca daripada huruf yang memiliki tinggi sama. Readibility juga berhubungan dengan jarak antarhuruf dan jarak antarkata.

sendiri, pilih jenis huruf yang sesuai

. Adalah tingkat kemudahan mata mengenali suatu karakter/huruf tanpa harus bersusah payah (Lia Anggraini S. & Kirana Nathalia, 2014:64). Ada beberapa jenis huruf yang sulit dibaca sehingga pesan yang ingin disampaikan pun sulit diolah

atau dekoratif. Perhatikan contoh huruf di bawah, keduanya memakai jenis huruf yang sama, tetapi

yang berbeda. Kata pertama menggunakan tittle case atau cil, sedangkan yang kedua memakai all caps atau

bentuk huruf dan hubungannya dengan huruf lain. Jenis huruf yang memiliki tinggi bervariasi lebih mudah dibaca daripada

juga berhubungan dengan jarak

Warna. Apa pun warna favorit Anda, entah itu merah, ungu, biru, atau merah muda, Anda tidak bisa begitu saja mengaplikasikannya ke dalambaik untuk body text adalah hitam atau gradasi abutext hanya dipergunakan untukhuruf berwarna-warni untuk judul atau judulgunakan konsisten.

Ukuran. Ukuran berpengaruh terhadap

tidak bisa membaca huruf yang terlalu kecil juga huruf yang terlalu besar. Ukuran paling pas untuk body textelemen lainnya bisa Anda sesuaikan dengan bidang

21

. Apa pun warna favorit Anda, entah itu merah, ungu, biru, atau merah muda,

Anda tidak bisa begitu saja mengaplikasikannya ke dalam web fonts.adalah hitam atau gradasi abu-abu tua. Warna lain di dalam

hanya dipergunakan untuk link atau subjudul. Judul? Boleh, Anda boleh memakai warni untuk judul atau judul sidebar, tapi pastikan warna yang Anda

. Ukuran berpengaruh terhadap readibility. Dalam jarak dekat, mata manusia tidak bisa membaca huruf yang terlalu kecil juga huruf yang terlalu besar. Ukuran

body text biasanya antara 10-12px. Untuk judul, header, sidebar,lainnya bisa Anda sesuaikan dengan bidang layout.

. Apa pun warna favorit Anda, entah itu merah, ungu, biru, atau merah muda, web fonts. Warna paling

abu tua. Warna lain di dalam body atau subjudul. Judul? Boleh, Anda boleh memakai

, tapi pastikan warna yang Anda

. Dalam jarak dekat, mata manusia tidak bisa membaca huruf yang terlalu kecil juga huruf yang terlalu besar. Ukuran

header, sidebar, dan

Tip: Jenis huruf sans serif paling baik untuk digunakan di layar. Gunakan MAKSIMAL 2 jenis huruf di dalam satu situs web. Anda bisa

mengkombinasikan antara huruf serif dengan sans serif atauMisalnya, Georgia untuk judul dan Helvetica untuk

Gunakan variasi ukuran huruf untuk menandai skala prioritas aliran informasi. Misalnya, 12px untukuntuk footer.

Anda bisa memilih kombinasi huruf yang paling cocok di

D. Elemen #4: Pilihan WarnaSitus web bukan kanvas berisi lukisan abstrak, kita sedang menyampaikan informasi kepada

pembaca, bukan sedang mendistraksi mata mereka. Yang terpenting dari situs web adalah konten, jangan sampai warna latar yang Anda gunakan lebih ramai dari konten itu sendiri.Warna juga memengaruhi psikologi pembaca, menciptakanbawah sadar. Warna, bisa menyampaikan simbol dirinya sendirinya bahkan tanpa disertai oleh teks. Itu sebabnya mengapa pemilihan warna merupakan salah satu elemen penting dari desain sebuah web.

22

Jenis huruf sans serif paling baik untuk digunakan di layar. Gunakan MAKSIMAL 2 jenis huruf di dalam satu situs web. Anda bisa mengkombinasikan antara huruf serif dengan sans serif atau script denganMisalnya, Georgia untuk judul dan Helvetica untuk body text. Gunakan variasi ukuran huruf untuk menandai skala prioritas aliran informasi. Misalnya, 12px untuk body text, 10 px untuk text snippet di sidebar, 8 atau 9px

memilih kombinasi huruf yang paling cocok di Google Fonts

Elemen #4: Pilihan Warna Situs web bukan kanvas berisi lukisan abstrak, kita sedang menyampaikan informasi kepada

mendistraksi mata mereka. Yang terpenting dari situs web adalah konten, jangan sampai warna latar yang Anda gunakan lebih ramai dari konten itu sendiri.Warna juga memengaruhi psikologi pembaca, menciptakan mood, bahkan menyelusup ke alam

a, bisa menyampaikan simbol dirinya sendirinya bahkan tanpa disertai oleh teks. Itu sebabnya mengapa pemilihan warna merupakan salah satu elemen penting dari desain

Gunakan MAKSIMAL 2 jenis huruf di dalam satu situs web. Anda bisa dengan sans serif.

Gunakan variasi ukuran huruf untuk menandai skala prioritas aliran informasi. di sidebar, 8 atau 9px

Google Fonts.

Situs web bukan kanvas berisi lukisan abstrak, kita sedang menyampaikan informasi kepada mendistraksi mata mereka. Yang terpenting dari situs web adalah

konten, jangan sampai warna latar yang Anda gunakan lebih ramai dari konten itu sendiri. , bahkan menyelusup ke alam

a, bisa menyampaikan simbol dirinya sendirinya bahkan tanpa disertai oleh teks. Itu sebabnya mengapa pemilihan warna merupakan salah satu elemen penting dari desain

Tip: Gunakan warna muda untuk latar dan warna tua untuk teks, bukan

Misalnya, latar putih atau abuhuruf body text.

Jika Anda tidak yakin dengan pilihan warna yang sesuai, gunakan gradasi abu(grayscale).

Hindari menggunakan warnajutaan gradasi warna di dunia ini, Anda bisa memilih satu di antaranya.

Pilih hanya SATU warna yang akan dimenggunakan warna lain tapi dengan

E. Elemen #5: Navigasi Navigasi ibarat denah atau petunjuk jalan yang memudahkan pembaca untuk mencari

kategori konten atau produk apa pun yang mereka inginkan. Letakkan navigasi di tempat yang mudah ditemukan, juga pilih bentuk navigasi yang mudah diguberlama-lama di situs Anda. Navigasi juga bertujuan seperti sistem kearsipan: mudah menyimpan dan menemukan data.

23

Gunakan warna muda untuk latar dan warna tua untuk teks, bukan latar putih atau abu-abu muda untuk latar dan hitam atau abu

Jika Anda tidak yakin dengan pilihan warna yang sesuai, gunakan gradasi abu

Hindari menggunakan warna-warna primer untuk latar: merah, biru, kuning. Ada jutaan gradasi warna di dunia ini, Anda bisa memilih satu di antaranya.Pilih hanya SATU warna yang akan di-highlight. Untuk variasi, Anda bisa menggunakan warna lain tapi dengan tone yang sama atau gradasi dari warna utama.

Navigasi ibarat denah atau petunjuk jalan yang memudahkan pembaca untuk mencari kategori konten atau produk apa pun yang mereka inginkan. Letakkan navigasi di tempat yang mudah ditemukan, juga pilih bentuk navigasi yang mudah digunakan agar pembaca betah

seperti sistem kearsipan: mudah menyimpan dan menemukan data.

Gunakan warna muda untuk latar dan warna tua untuk teks, bukan sebaliknya. abu muda untuk latar dan hitam atau abu-abu tua untuk

Jika Anda tidak yakin dengan pilihan warna yang sesuai, gunakan gradasi abu-abu

latar: merah, biru, kuning. Ada jutaan gradasi warna di dunia ini, Anda bisa memilih satu di antaranya.

. Untuk variasi, Anda bisa yang sama atau gradasi dari warna utama.

Navigasi ibarat denah atau petunjuk jalan yang memudahkan pembaca untuk mencari kategori konten atau produk apa pun yang mereka inginkan. Letakkan navigasi di tempat yang

nakan agar pembaca betah

seperti sistem kearsipan: mudah menyimpan dan menemukan data.

Tip: Letakkan navigasi di bagian paling atas layout. Bisa di bawah atau di atas Kategorikan navigasi Untuk pengalaman pengguna yang lebih baik, sebaiknya hanya gunakan SATU baris

navigasi. Gunakan menu dropdown Anda bisa menggunakan navigasi l

F. Elemen #6: Tombol “Search”Tidak ada yang lebih menyebalkan selain ketika berkunjung ke sebuah situs web dan tidak menemukan tombol search. Kita tidak akan pernah tahu apa yang ingin ditemukan oleh pembaca ketika datang ke situs web kita. Navigasi, kategori, dan label adalah opsi yang kita berikan, sedangkan tombol search adalah kebebasan. Pembaca tidak memiliki waktu yang cukup untuk mencari dari satu kategori ke kategori lain atau dari satu konten ke konten lain.

24

Letakkan navigasi di bagian paling atas layout. Bisa di bawah atau di atasKategorikan navigasi berdasarkan produk atau subtopik utama dari situs web Anda.Untuk pengalaman pengguna yang lebih baik, sebaiknya hanya gunakan SATU baris

dropdown untuk memisahkan antara subtopik dengan subAnda bisa menggunakan navigasi linear atau navigasi hamburger.

Elemen #6: Tombol “Search” Tidak ada yang lebih menyebalkan selain ketika berkunjung ke sebuah situs web dan tidak

. Kita tidak akan pernah tahu apa yang ingin ditemukan oleh pembaca situs web kita. Navigasi, kategori, dan label adalah opsi yang kita berikan,

adalah kebebasan. Pembaca tidak memiliki waktu yang cukup untuk mencari dari satu kategori ke kategori lain atau dari satu konten ke konten lain.

Letakkan navigasi di bagian paling atas layout. Bisa di bawah atau di atas header. berdasarkan produk atau subtopik utama dari situs web Anda.

Untuk pengalaman pengguna yang lebih baik, sebaiknya hanya gunakan SATU baris

untuk memisahkan antara subtopik dengan sub-subtopik.

Tidak ada yang lebih menyebalkan selain ketika berkunjung ke sebuah situs web dan tidak . Kita tidak akan pernah tahu apa yang ingin ditemukan oleh pembaca

situs web kita. Navigasi, kategori, dan label adalah opsi yang kita berikan, adalah kebebasan. Pembaca tidak memiliki waktu yang cukup untuk

25

Tip: Letakkan tombol di tempat yang mudah dilihat. Biasanya di sebelah navigasi atau di

bawah header. Gunakan tombol berupa huruf atau simbol. Jika menggunakan simbol, HANYA

gunakan simbol lup yang merupakan simbol universal. Untuk pengalaman pengguna yang lebih baik, Anda bisa menggunakan fitur Google

custom search. G. Elemen #7: Laman “About Me/Us” Jika Anda bukan perusahaan besar, tidak memiliki jenis bisnis yang spesifik, bergerak di bidang bisnis yang sama sekali baru, atau bukan pemilik situs web yang sangat terkenal, laman “About Me/Us” memiliki beberapa fungsi:

Memperkenalkan diri/perusahaan Anda. Memperkenalkan jasa/produk yang Anda miliki. Menjelaskan secara spesifik bidang yang Anda geluti. Membangun engagement dengan pembaca. Percaya atau tidak, pembaca lebih suka

membaca tulisan dari seseorang yang dia “kenal” daripada dari penulis misterius. Jika Anda adalah blogger, laman “About Me” akan memudahkan calon klien

menemukan informasi tentang siapa Anda. Tip:

Letakkan laman “About Me/Us” di navigasi agar mudah ditemukan. Laman “About Us” bisa dipergunakan untuk menceritakan visi dan misi perusahaan

atau organisasi. Berikan informasi yang jelas dan tidak bertele-tele. Anda bisa menceritakan tentang

siapa diri Anda, tapi hanya jika itu relevan atau berpengaruh terhadap citra diri yang ingin Anda tonjolkan. Tidak, tidak usah terlalu panjang, ini profil, bukan cerpen.

Anda juga bisa memasukkan informasi yang berguna seperti prestasi, testimoni, atau seluruh akun media sosial. Kontak? Ya, Anda bisa memasukkan juga kontak di laman “About Me”.

Foto? Well, ya, tentu saja boleh. Satu album? Tidak, gunakan satu saja dengan pose yang sekiranya membentuk citra diri Anda.

Sejarah Anda ngeblog? Kalau Anda bisa menceritakan itu dalam satu paragraf berisi tidak lebih dari lima kalimat, silakan. Kalau cerita itu menghabiskan 500 kata, sebaiknya buat post tersendiri.

Jika Anda adalah profesional, sertakan juga skill dan jasa yang Anda berikan. Ratecard? Nggg … sebaiknya tidak.

Catatan: Laman “About Me” di atas hany

foto asli untuk melindungi identitas staf kami dari serbuan para penggemarmembuat laman “About Me”, tentu saja Anda harus menggunakan foto Anda sendiri.H. Elemen #8: Laman KontakLaman kontak berpengaruh terhadap autoritas. Pembaca dan klien tentu harus tahu apakah situs yang mereka kunjungi benar-benar dikelola oleh perusahaan atau orang asli, bukan fiktif. Laman kontak juga mempermudah mereka untuk menghubungi kita. Karena terus terang, seseoyang sulit dihubungi sering kali membuat frustrasi.Anda bisa meletakkan laman kontak di beberapa tempat:

Apa saja yang harus ada di laman kontak:

Perusahaan: Alamat lengkap, jam operasional, nomor telepon, surel. Personal: Alamat (lengkap atau hanya nama kota), nomor telepon (opsional), surel. Form (opsional).

26

Catatan: Laman “About Me” di atas hanya contoh. Kami memang sengaja tidak menggunakan

foto asli untuk melindungi identitas staf kami dari serbuan para penggemarmembuat laman “About Me”, tentu saja Anda harus menggunakan foto Anda sendiri.

Elemen #8: Laman Kontak berpengaruh terhadap autoritas. Pembaca dan klien tentu harus tahu apakah situs

benar dikelola oleh perusahaan atau orang asli, bukan fiktif. Laman kontak juga mempermudah mereka untuk menghubungi kita. Karena terus terang, seseoyang sulit dihubungi sering kali membuat frustrasi. Anda bisa meletakkan laman kontak di beberapa tempat: navigasi, header, footer.

Apa saja yang harus ada di laman kontak: Perusahaan: Alamat lengkap, jam operasional, nomor telepon, surel. Personal: Alamat (lengkap atau hanya nama kota), nomor telepon (opsional), surel.

a contoh. Kami memang sengaja tidak menggunakan

foto asli untuk melindungi identitas staf kami dari serbuan para penggemar . Ketika membuat laman “About Me”, tentu saja Anda harus menggunakan foto Anda sendiri.

berpengaruh terhadap autoritas. Pembaca dan klien tentu harus tahu apakah situs benar dikelola oleh perusahaan atau orang asli, bukan fiktif. Laman

kontak juga mempermudah mereka untuk menghubungi kita. Karena terus terang, seseorang

header, footer.

Personal: Alamat (lengkap atau hanya nama kota), nomor telepon (opsional), surel.

27

I. Elemen #9: Footer yang Informatif

Footer bisa saja berisi pengulangan informasi dengan catatan informasi tersebut memang krusial. Bisa juga berupa tambahan informasi berupa sitemaps, copyright, privacy policy, atau informasi lain yang memudahkan pembaca.

J. Elemen #10: Kualitas Image Walau bagaimanapun, kita harus tetap mempertimbangkan aspek-aspek visual untuk memikat pembaca. Selain itu, ilustrasi dan foto memiliki fungsi untuk menjelaskan dan melengkapi konten.

28

Tip: Gunakan foto atau ilustrasi dengan resolusi yang cukup agar tidak blur, minimal 150

PPI. Jika Anda belum familiar dengan ini, Anda bisa melihatnya di properties. Klik kanan image → properties → details.

Gunakan file PNG agar meskipun ukurannya dikompres, resolusi dan ketajaman warnanya tidak berubah.

Akan lebih baik jika Anda menggunakan foto atau ilustrasi sendiri. Jika Anda menggunakan foto dari stock images, pastikan Anda memakai foto gratis,

bukan yang berlisensi seperti Shutterstock, Depositphotos, dll. Jika menggunakan dari penyedia images berbayar, pastikan Anda memang MEMBELINYA, bukan hanya mencomot begitu saja dari Internet lalu menggunakannya di blog Anda. Oh, dan tolong jangan coba-coba mengedit atau menghilangkan watermark-nya.

Gunakan foto yang relevan dengan konten. Jika menggunakan foto dari situs web lain, sebutkan sumbernya berupa direct link,

bukan hanya menyebutkan “Foto: Google”. Sebab Google adalah mesin pencari, bukan penyedia foto gratis.

Jika Anda menggunakan foto sendiri dan ingin menggunakan watermark, gunakan watermark sewajarnya. Iya, itu foto Anda dan Anda tidak ingin siapapun mencurinya, tapi jangan sampai watermark mengganggu images secara keseluruhan.

Anda yang menggunakan CMS WordPress bisa memanfaatkan plugin image editing untuk mengatur tampilan images.

Template apa pun yang Anda gunakan, CMS apa pun yang terbiasa Anda pakai, tampilan web tetap saja impresi pertama yang akan mengatakan siapa Anda, seberapa profesionalkah bisnis Anda, atau sampai di mana pengetahuan Anda tentang teknologi. Apakah Anda harus jago mendesain web untuk mempraktikkan poin-poin di atas? Tidak, tidak perlu. Elemen-elemen tersebut biasanya sudah bawaan template, kok. Anda hanya perlu mengeditnya sedikit-sedikit.

3.2.Content managemen System (CMS)

Saat ini dalam membangun dan mengelola sebuah website sudah semakin mudah , tidak

seperti dulu dimana kita harus membuat sistem sendiri dengan ratusan bahkan ribuan baris

kodingan. Dengan bantuan CMS (content management system) kita dapat dengan mudah

mengelola website yang kita buat tanpa harus membuat sistem dari awal.

29

A. Apa Itu CMS

CMS (Content management System) atau dalam bahasa indonesia disebut dengan sistem manajemen konten adalah perangkat lunak yang digunakan untuk menambahkan atau memanipulasi (mengubah) isi dari suatu situs web. Biasanya CMS terdiri dari 2 elemen yaitu CMA (Content Management Application) CDA (content delivery application) CMA digunakan untuk mengelola konten dengan mudah, dan biasanya tidak diperlukan pengetahuan khusus dalam bahasa pemrograman web seperti HTML, CSS, Javascript, dan PHP. sedangkan CDA menggunakan dan menghimpun informasi-informasi yang sebelumnya telah ditambah, dikurangi atau diubah oleh pemilik situs web untuk memperbaharui situs web tersebut. CMS pada umumnya memiliki 2 tampilan , pertama tampilan admin yang berfungsi untuk mengubah tampilan web, memposting artikel atau konten dan juga untuk menghubungkan ke database. selain tampilan admin ada juga tampilan user atau front, yang tampil saat diakses public. Kecanggihan dan fitur masing-masing CMS bergantung pada CMS yang digunakan. Penggunaan sistem hirarki pengguna yang diterapkan CMS dalam hak aksesnyapun sangat bervariasi sesuai CMS masing-masing. Mulai dari level akses user anggota yang hanya dapat mengirimkan data tertentu berupa komentar, kemudian editor yang dapat mengirimkan suatu artikel/berita (untuk CMS yang menyediakan fasilitas ini), hingga level administrator yang dapat melakukan semua fitur yang ada. CMS yang sering digunakan :

Drupal Joomla

30

WordPress Plone VBulletin Moodle MediaWiki Opencart PrestaShop

Sama seperti linux, yang gratis dan opensource, CMS pun berkembang pesat karena memiliki komunitas yang aktif. dengan bantuan CMS , kita hanya perlu mengetahui dasar dari pemrograman web. karena semua fitur sudah tersedia , dan tidak kalah dibandingkan web yang dibuat oleh web developer hebat. terbukti dengan banyaknya website tidak hanya perorangan tapi perusahaan dan pemerintahan pun menggunakan CMS.

B. Fungsi CMS

Dari pengertian dan fungsi dari CMS diatas mungkin masih ada yang kurang, yaitu

penjelasan tentang fungsi dari CMS. Well, dari pengertian apa itu CMS diatas anda

pastinnya sudah memiliki gambaran akan digunakan untuk apa CMS itu.

Jadi, Fungsi utama dari CMS adalah sebagai platform atau aplikasi web dengan fokus pada

pengelolaan konten. Biasanya website atau situs yang menggunakan CMS adalah website

yang yang menyajikan banyak konten atau artikel seperti blog. CMS memudahkan pengguna

melakukan pengeditan artikel secara cepat dan mudah. Semakin blog anda memiliki banyak

artikel maka akan semakin sulit untuk menyortirnya.

Karena ketika ingin melakukan pengeditan pada artikel yang lama perlu waktu untuk

mencarinya. Namun dengan CMS hal tersebut mudah dilakukan karena pengguna tinggal

melakukan pencarian berdasarkan nama judul artikel. Dapat juga melakukan pencarian

berdasarkan tanggal posting dan sebagainya sehingga pasti akan sangat memudahkan

pengguna. Selain memberi kemudahan dan efisiensi, CMS memiliki fungsi lain yang tidak

kalah penting yaitu mampu menjaga kualitas design dari website anda. Jika website anda

memiliki tampilan yang bagus pastinya hal ini akan menjadi nilai tambah tersendiri bagi

suatu web untuk menarik minat dari pengunjung. Dan juga, Jika pada umumnya suatu

website tidak menyediakan administrator sebagai sarana pengelolaan web maka beda halnya

dengan CMS, karena anda akan mendapatkanya secara gratis. Contoh salah satunya adalah

WordPress admin yang cukup populer sampai saat ini.

C. Kelebihan & Kekurangan CMS

Terdapat beberapa kelebihan dan kekurangan dari penggunaan CMS, adapun kelebihannya

yaitu sebagai berikut :

- Mengurangi biaya pengeluaran dan mempercepat pembaruan informasi di dalam website

Karena CMS memungkinkan perubahan konten tanpa teknologi atau pengetahuan

khusus, maka Anda bisa mengubahnya sendiri. Anda tidak perlu lagi mengeluarkan biaya

untuk mengubah konten web Anda. Selain itu, informasi atau konten yang ingin Anda

31

upload di dalam web juga akan cepat tersedia tanpa harus menunggu pihak produksi

untuk melakukannya.

- Anda dapat memposting konten baru kapan saja Anda mau. Anda dapat memposting

konten baru ke dalam website kapan saja Anda mau tanpa perlu khawatir akan biaya yang

harus dikeluarkan. Dengan kemudahan yang ditawarkan, Anda juga dapat memposting

konten secara rutin untuk meningkatkan traffic website Anda.

- Tidak perlu instalasi, CMS merupakan sistem yang berjalan di server internet, sehingga

Anda tidak perlu menginstal CMS di setiap komputer yang Anda gunakan. Selama Anda

memiliki jaringan internet dan browser, Anda dapat memperbarui website kapan saja dan

di mana saja.

- Lebih Efisien Anda dapat membuat beberapa user ID dan mengijinkan beberapa orang

untuk membantu memperbarui serta mengelola website. Dengan demikian pembaruan

konten dapat berjalan dengan cara yang lebih efisien.

- Mencegah perubahan tampilan web yang tidak konsisten Di dalam CMS terdapat

template desain dan navigasi standar. Hal ini dilakukan untuk mencegah situasi dimana

pengelola web mengubah desain dan sususan navigasi yang menyebabkan tampilan web

berubah-ubah atau tidak konsisten.

- Pembaruan desain yang mudah, CMS memiliki template desain yang terpisah dari isi

konten. Jika Anda ingin mengubah desain web, maka Anda hanya perlu mengganti

template desain sesuai dengan yang Anda inginkan tanpa perlu khawatir jika terjadi

perubahan isi konten.

Namun Dibalik banyak kelebihan tentunya juga terdapat kekurangan, adapun kekurangan dari penggunaan CMS adalah sebagai berikut : - Harus mempelajari fungsi CMS dan cara pengoperasiannya terlebih dahulu. Walau CMS

dapat dengan mudah digunakan untuk memperbarui konten website, namun pada awal penggunaannya Anda harus mempelajari fungsi dan cara mengoperasikannya terlebih dahlu. Pengguna harus memiliki sedikit pengetahuan tentang CMS yang digunakan serta membiasakan diri untuk menggunakan fungsi-fungsi di dalamnya.

- Kebebasan desain yang terbatas. Karena adanya template desain, CMS tidak dapat membuat halaman dengan desain yang berbeda di luar template yang telah disediakan.

- Masalah keamanan, Meskipun Anda dapat memperbarui data kapan pun dan dimana pun selama terdapat koneksi internet dan browser, namun penggunaan CMS rentan terkena cyber attack dan akses ilegal.

32

BAB IV PENGUJIAN APLIKASI WEBSITE

4.1. Aplikasi berbasis Web (Web Application ) Aplikasi berbasis WEB (WEB Application) adalah sebuah aplikasi yang diakses melalui

internet maupun intranet (Anonim, 2010). Aplikasi ini dibangu menggunakan bahasa

pemrograman WEB (HTML, PHP, Javascript dan lain-lain). WEB Application menjadi populer

dikarenakan banyak pengguna yang menggunakan jaringan internet dalam sehari-harinya.

Pengguna menggunakan aplikasi yang biasa disebut WEB browser untuk mengakses internet.

WEB browser memberi kemudahan kepada pengguna dalam mengakses aplikasi berbasis WEB.

Pengguna tidak membutuhkan spesifikasi komputer yang tinggi untuk dapat mengakses aplikasi

berbasis WEB. Aplikasi berbasis WEB ini dianggap lebih praktis daripada aplikasi biasa, karena

pengguna tidak perlu menginstal aplikasi di setiap komputer. Aplikasi berbasis WEB cukup

terinstal pada sebuah komputerserver. Berikut ini beberapa perbedaan antara aplikasi berbasis

WEB dengan aplikasi biasa, diantaranya adalah :

- Aplikasi berbasis web hanya memerlukan satu host / server dimana aplikasi tersebut

diinstall, user yang banyak, sebagai client dapat menggunakan aplikasi tersebut melalui

browser.

- Aplikasi berbasis web bersifat cross-platform (platform independent), karena dapat diakses

melalui berbagai sistem operasi (Windows, Linux, MacOS).

4.2. Langkah Langkah pengujian Aplikasi website

Pengujian terhadap aplikasi berbasis WEB perlu dilakukan sebelum aplikasi tersebut digunakan. Pengujian merupakan salah satu bagian yang paling penting dalam jaminan kualitas aplikasi. Pengujian ini dilakukan untuk menemukan beberapa kesalahan yang disebabkan oleh proses perancangan maupun proses implementasi yang belum benar. Biasanya sebuah pengujian dilakukan oleh sekelompok tim yang sudah teroganisir. Dalam pengujian aplikasi berbasis WEB ini tim tersebut akan menyusun beberapa langkah. Menurut Krishen Kota terdapat 10 langkah dalam pengujian aplikasi berbasis WEB diantaranya adalah : a. Menentukan Sasaran Pengujian (Objective)

Sebelum melakukan sebuah pengujian kita harus menentukan beberapa sasaran pengujian, agar pengujian yang akan dilakukan terarah. Sehingga seorang penguji dapat menentukan beberapa prioritas pengujian dalam sebuah pengujian aplikasi.

b. Menentukan Proses dan Pelaporan Pengujian Dengan menentukan proses pengujian dan susunan pelaporan pengujian, maka setiap anggota dalam sebuah tim penguji akan mengerti aliran dari sebuah proses pengujian.

c. Memantau Hasil Pengujian (Tracking Results) Ketika kita sudah memulai sebuah proses pengujian aplikasi, kita akan menemukan beberapa error, bug, defect, dan sebagainya. Sehingga tim penguji membutuhkan cara untuk menyimpan, mengorganisir dan mendistribusikan informasi tersebut kepada semua anggota tim penguji. Tim juga akan membutuhkan cara untuk menjaga tim agar tetap mendapat informasi status dari sebuah proses pengujian. Oleh karena itu, dalam sebuah pengujian dibutuhkan pemantauan hasil (tracking results).

33

d. Menentukan Area Pengujian (Environment Test)

Menentukan area pengujian disini diartikan sebagai pembagian wilayah kerja dari sebuah

tim, misalkan sebuah tim penguji dibagi menjadi tiga area pengujian yaitu WEB server,

database server, danapplication server.

e. Pengujian Kegunaan Aplikasi (Usability Testing)

Dalam tahap usability test ini kita akan mencoba meneliti tiga aspek yang berkaitan dengan

user’s experience diantaranya adalah :

- Apakah WEB application tersebut memiliki desain antarmuka yang konsisten?

- Seberapa mudahkah navigasi dari WEB application tersebut?

- Apakah feed back yang diberikan WEB application tersebut sesuai dengan keinginan

pengguna?

g. Pengujian Unit (Unit Testing)

Unit testing ini merupakan pengujian yang hanya fokus pada beberapa bagian kecil dari

fungsionalitasWEB application. Misalnya menguji kebenaran dari penyimpanan data setelah

pengguna menekan tombol “submit”.

h. Pengujian Kode HTML

Pengujian kode HTML ini bertujuan untuk menguji apakah aplikasi tersebut dapat

dijalankan pada bermacam-macam browser, resolusi layar dan OS yang berbeda. Pengujian

ini dapat dilakukan melaluihttp://validator.w3.org.

i. Load Testing

Pengujian ini dimaksudkan untuk mengukur seberapa lamakah sebuah halaman WEB

application di-loadkedalam browser milik pengguna. Pada umumnya, sebuah halaman dapat

di-load kurang dari 15 detik.

j. User Acceptance Testing

Dengan melakukan pengujian ini, tim akan mengetahui apakah WEB application tersebut

sudah memiliki fungsi yang sesuai dengan keinginan pengguna atau belum. Pengujian ini

dapat dilakukan dengan menguji aplikasi versi Beta.

k. Pengujian Keamanan (Security Testing)

Tahap ini merupakan tahap akhir yang penting untuk mengetahui apakah WEB application

tersebut sudah memiliki sistem keamanan yang baik atau belum. Kita juga harus menguji

apakah WEB applicationtersebut aman terhadap serangan dari dalam maupun luar

sistem.(Hermiyanty, Wandira Ayu Bertin, 2017)

34

BAB V PROMOSI DAN PEMELIHARAAN WEBSITE

5.1. Promosi Website

A. Promosi Secara Offline Secara umum kita ketahui Promosi Website adalah secara online. tetapi tidak menutup

kemungkinan cara promosi website offline ini lebih mudah dan efektif. Agar website kita terkenal maka kita harus mempromosikannya. Biasanya cara mempromosikan website secara offline tidak ada salahnya jika anda mencoba mempromosikan website anda secara offline alias berpromosi di dunia nyata alias berpromosi langsung ke masyarakat. Mengapa promosi website secara offline penting?

Ada beberapa alasan mengapa promosi offline dipandang penting: Tidak semua orang memiliki waktu atau kesempatan yang cukup untuk mencari-cari

sebuah URL/website. Banyak di antara klien-klien potensial yang tidak suka mencari-cari. Tidak semua pengguna Internet faham bagaimana menggunakan search engine atau

direktori web online untuk menemukan alamat website kita. Perebutan posisi website dalam hasil pencarian search engine atau direktori web online

semakin ketat sehingga kemungkinan orang-orang menemukan URL kita semakin kecil. Semakin banyak URL kita diekspos, semakin mudah orang mengingatnya dan semakin

tinggi trafik kunjungan ke website kita. Peluang keberuntungan semakin dekat pada mereka yang berusaha lebih keras. Menimbang alasan-alasan inilah, maka jalur promosi offline tidak bisa diabaikan. Dibawah

ini adalah beberapa tip atau metode promosi offline yang bisa kita tempuh untukmempopulerkan website kita.

- Cantumkan URL (www.websitekita.com) Kita pada Alat-Alat Tulis Kantor (ATK) Sebagai usaha sederhana, mulailah dengan memasukkan URL di semua ATK kita: pensil, bolpen, penggaris, kartu nama, kop surat, amplop, invoice/nota, kwitansi, brosur,kartu promosi, dan selebaran-selebaran perusahaan lainnya. Saat klien, partner bisnis, pelanggan, atau siapa pun memang salah satu dokumen atau barang-barang ini, mereka dapat melihat dengan jelas alamat website kita dan berfikir bahwa di sana lah informasi lebih banyak akan ditemukan.

- Ciptakan Brand Melalui Kendaraan Dinas Banyak perusahaan megaprofit mengekspos nama atau logo perusahaan mereka pada kendaraan-kendaraan dinas. Mengapa kita tidak mengikuti jejak mereka? Ini adalah upaya letarung-petarung besar menunjukkan brand dan identitas dihadapan masyarakat luas, yang membuat mereka semakin diakui dan disegani. Oleh karena itu, pastikan tidak ada kendaraan dinas kita yang tidak berlabelkan nama dan logo perusahaan, juga alamat email dan URL website. Paling tidak, sebuah stiker kecil menempel pada kaca belakang mobil.

- Aksesoris & Souvenir Kita juga harus gencar mempromosikan URL website melalui asesoris atau pernik- pernik kecil, seperti kalender, stiker, mouse pad, cangkir kopi, t-shirt, topi, payung, sapu tangan, handuk, dan masih banyak lagi. Untuk tujuan ini, kita bisa bekerjasama dengan pabrik-pabrik yang berhubungan.

35

1. Berikan pernik-pernik ini secara cuma-cuma. 2. Utamakan diberikan kepada member. 3. Bagikan kepada komunitas yang sekiranya bisa menjadi klien/pelanggan potensial

(pelajar/mahasiswa, karyawan kantor, anggota perkumpulan). 4. Lakukan riset tentang siapa saja kiranya yang dapat menjadi target yang tepat.- Sekali

lagi, jangan merasa sayang. Kesuksesan terkadang harus dibayar dengan sedikit pengorbanan.

- Bangun Logo dan Nama Perusahaan di Gerbang Utama Kantor dengan Megah Membangun tugu logo dan nama perusahaan di sekitar pintu gerbang merupakan simbol kepercayaan diri, memberikan spirit bagi perusahaan dan karyawan, sekaligus mengiklankan diri kepada masyarakat luas, terutama kepada penduduk di sekitar, orang-orang yang lewat, dan tamu-tamu yang berkunjung. Meskipun belum ada data pasti seberapa besar pengaruh yang bisa dihasilkan, tetapi percayalah bahwa usaha ini tidak akan sia-sia dan bisa memberikan dampak positif terhadap popularitas perusahaan/organisasi kita.

- Pasang Papan Iklan atau Reklame di Lokasi-Lokasi Strategis Ini merupakan senjata utama para salesman dari zaman ke zaman untuk mempromosikan produk-produk mereka, mulai dari mie rebus rasa ayam bawang sampai mie goreng berhadiah miliaran rupiah!. Dapatkah metoda papan reklame dapat mempromosikan situs kita secara efektif? Tidak ada jawaban yang bijaksana sebelum Anda menengok ilustrasi berikut. Ada beberapa strategi untuk mengiklankan situs atau URL pada papan-papan reklame: 1. Buatlah iklan-iklan reklame yang berkualitas. 2. Untuk solusi murah meriah, gunakan spanduk atau baliho dengan beragam ukuran. 3. Pasang reklame atau spanduk di lokasi-lokasi strategis, seperti pusat perbelanjaan,

persimpangan jalan utama, toko buku, internet cafe, di depan kampus ternama, kantin, dll.

- Pasang Iklan di Media Konvensional Jangan pernah mengabaikan media-media konvensional. Surat kabar harian pagi dan majalah rumpi masih merupakan tradisi di banyak rumah. Iklan surat kabar memang mahal, tetapi kita bisa memulai dari yang kecil-kecilan. Beriklan di surat kabar lokal biasanya lebih murah. Kita akan segera menyadari bahwa mengiklankan website melalui media-media konvensional dapat memberi pengaruh besar terhadap peningkatan trafik kunjungan.

- Pasang Iklan di Media Elektronik Tentu saja radio dan televisi juga sangat efektif untuk mengiklankan website karena dapat menjangkau pemlirsa yang luas. Hanya dalam beberapa durasi tayang, pesan kita akan tersampaikan ke jutaan orang. Sayangnya, iklan jenis ini dapat menyita anggaran yang sangat besar. Meskipun demikian, jika perusahaan kita masih kecil atau baru berkembang, kita bisa mencoba beriklan di televisi atau radio lokal.

36

- Berpartisipasi dalam Kegiatan Sosial Ide yang mulia jika perusahaan kita terjun secara aktif dalam kegiatan-kegiatan amal dan sosial. Ada banyak keuntungan yang bisa diraih. Yang jelas, secara alami kita akan dikenal dan mendapat pengakuan yang luas, meskipun tidak memintanya. Jadi, jangan menunda waktu untuk berbuat!

- Sebarkan Pamflet dan Brosur Brosur dan pamflet dapat juga menjadi solusi murah-meriah untuk memperkenalkan URL kita ke banyak orang.Buatlah brosur berisi artikel-artikel “how-to” yang menerangkan cara melakukan sesuatu. Jika kita menjual komputer misalnya, mungkin brosur kita dapat berisi tip dan trik merawat komputer, panduan upgrade dan reparasi, atau info peripheral terbaru.Sebarkan brosur ke masyarakat luas, terutama ke sentra-sentra calon pelanggan potensial.

- Plat Nomor Kendaraan Ini merupakan trik yang banyak dilakukan oleh kaum muda. Kita berusaha mendapatkan lisensi nomor mobil personal yang unik dari aparat setempat, dengan nama situs kita atau nama bisnis kita.

- Kartu Nama Keampuhan kartu nama dalam memperkenalkan alamat website dapat mengimbangi kop-kop surat dan selebaran perusahaan. Jadi, pastikan kartu nama kita mencantumkan alamat e-mail dan URL website. Bawalah selalu 5-10 kartu dalam dompet kita, berikan kepada teman, saudara, tetangga, rekan bisnis, kenalan di jalan, atau siapa saja.

- Poster Poster memang benda bisu, tetapi banyak “cerita” yang bisa diungkapkan oleh sebuah poster. Gambar dapat memberikan sejuta makna bagi yang melihatnya. Begitu pula dengan kata-kata yang tertulis di Atasnya.Ia bisa menyampaikan banyak pesan membuat si pembaca terharu, tersentuh emosinya, atau melakukan sesuatu di luar kesadarannya. Oleh karena itu, gunakanlah peluang ini untuk mendukung bisnis kita.Buatlah poster-poster yang menampilkan URL situs kita. Gunakan teknik desain profesional. Gunakan teknologi cetak terkini Sampaikan banyak pesan bermanfaat kepada khalayak; pesan kemanusiaan, moral,kesehatan, religi dan sebagainya.Pasang atau sebarkan poster di pusat-pusat layanan public, seperti rumah sakit, ruang kerja dokter, ruang tunggu tamu, lembaga pendidikan, lembaga sosial, instansi pemerintah, dll.

- Kartu Pos Kebanyakan orang akan senang saat mendapat kiriman kartu pos, terlebih kaum muda. Meskipun sederhana dan murah, tetapi makna di balik itu sangatlah besar. Orang-orang akan merasa diakui sebagai sahabat dekat, klien/partner penting, atau orang spesial bagi si pengirim. Karena dampaknya yang positif, kartu pos dapat menjadi alat yang efektif untuk memperkenalkan alamat website kita ke banyak orang.

37

- Acara Talkshow Radio dan Televisi Tampil di acara talkshow radio dan televisi merupakan kesempatan langka, namun dampaknya sangat fantastis dalam mempopulerkan nama dan bisnis kita. Tidak semua orang berkesempatan tampil di acara radio dan televisi.Untuk mendapatkannya, biasanya kita harus melakukan sesuatu yang dipandang besar,istimewa, atau luar biasa-meskipun tidak selalu demikian. Acara talkshow seringkali gratis, namun pengaruhnya terhadap popularitas bisamengalahkan iklan-iklan yang berbiaya mahal. Ketika kita diundang oleh stasiun radio atau televisi untuk tampil, JANGAN BUANG KESEMPATAN INI! Ada beberapa tip yang dapat membantu meningkatkan kesempatan tampil di acaratalkshow radio dan televisi: 1. Pastikan bisnis kita membuat gebrakan baru yang membuat orang-orang berdecak. 2. Mencoba menawarkan diri kepada stasiun radio/televisi untuk tampil di acara

talkshow dan usulkan topik apa yang akan diusung. 3. Untuk memulai, kita bisa mengajukan talkshow ke stasiun-stasiun radio dan televise

lokal. Peluang untuk diterima umumnya lebih besar. 4. Koneksi orang dalam adalah penting. Jadi, usahakan kita mengenal baik salah seorang

staf kunci yang bekerja di stasiun radio/televisi setempat.

- Menyelenggarakan Event Marketing Jika bisnis kita besar, jangan ragu untuk menyelenggarakan event-event marketing, baik tunggal maupun gabungan. Event marketing bisa menciptakan antusiasme yang besar atas produk dan jasa kita, termasuk website. Pada event marketing, perwakilan perusahaan memiliki kesempatan untuk berbicara kepada media, mengunjungi para pelanggan, dan menggelar konferensi atau press release. Event marketing yang cukup dikenal adalah pameran. Jadi, pastikan kita menyelenggarakan event ini secara berkala dan di berbagai kota berbeda.

- Tampil di Acara Seminar Dampak dari menyelenggarakan atau tampil pada acara seminar hampir serupa dengan menyelenggarakan event marketing. Di sini, kita bisa mendapatkan pengakuan dan kepercayaan dari audiens. Terbuka juga kesempatan untuk berbicara kepada media, tanya-jawab langsung dengan klien atau pelanggan, dan menggelar konferensi atau press release.

- Public Relation Website dapat juga dipromosikan melalui acara-acara news release. Biasanya bersamaan dengan peluncuran produk, jasa, keunggulan baru, atau mengumumkan infomzasi penting dan formal kepada masyarakat melalui media lokal atau nasional. Ketika news release ini muncul di media, ia bukan hanya menjadi promosi bisnis tetapijuga berita aktual.

- Menggandeng Partner Besar Berpromosi dengan menggandeng partner besar dapat disamakan dengan simbiosis mutualisme. Artinya, kedua belah pihak bisa mendapatkan keuntungan. Website yang bekerjasama dengan perusahaan yang telah mapan, atau memiliki brandname, diakui dapat ikut terangkat dan lebih cepat populer dibandingkan website-website yang berdiri sendiri. Sebagai contoh, website e-commerce dapat menjalin kerjasama dengan majalah bisnis atau

38

perusahaan media yang telah terkenal. Dengan demikian, website ecommerce akan mudah mendapatkan peluang diekspos dan promosi di media “inang” bersangkutan.

- Informasi Mulut ke Mulut Kabar dari mulut ke mulut memiliki daya tarik yang menakjubkan. Sesuatu yang masuk akal, tetapi banyak orang yang melewatkannya. Berpromosi mulut ke mulut dikenal juga sebagai word-of-mouth marketing. Ini adalah metoda tradisional, tetapi merupakan taktik terbaik untuk meraih trafik jangka panjang. Kekuatan dari promosi mulut ke mulut sangat ditentukan oleh pendekatan kita. Memiliki banyak teman dan relasi adalah awal yang berharga, terlebih jika secara khusus kita memilih beberapa teman terpercaya yang mampu menyampaikan berita ke kawan-kawan lain. Ini adalah aset yang besar! Target promosi website mulut ke mulut biasanya para remaja, anak-anak sekolah, mahasiswa kampus, dan terkadang juga asosiasi ibu-ibu rumah tangga. Menyebarkan berita di kelas atau kampus dapat dengan cepat menarik ribuan hit per hari. Kita mungkin telah mengenal situs-situs populer seperti multiply.com, blogspot.com,flickr.com, atau youtube.com. Boleh ditebak bahwa sebagian besar pembaca mengenal situs-situs ini dari kabar orang lain! Betul begitu, bukan…? Beberapa faktor kunci yang mendukung suksesnya promosi website mulut ke mulut adalah: 1. Menjaga komunikasi dan selalu menghormati pengunjung. 2. Membangun layanan yang unik dan spesial bagi pengunjung. 3. Meng-update website secara berkala.

- Sms Ucapan Selamat : Tahun Baru, Hari Raya, Ulang Tahun, Dll

Dengan mengirimkan SMS ucapan secara personal kepada existing client maupun sahabat dan rekan bisnis (jangan lupa menuliskan nama lengkap dan url bisnis) sehingga penerima SMS akan ingat dengan kita dan otomatis dengan bisnis kita.Jika kita rajin mengirimkan setiap tahun, garansi selama itu pula persahabatan dan komunikasi akan terus terjaga.

B. Promosi Secara Online

Selain menggunanakan cara offline tentunya cara online juga sangat efektif untuk mempromosikan website, ada beberapa trik yang dapat digunakan yaitu sebagai berikut - Promosi website menggunakan sosial media

Kita tahu, sosial media adalah salah satu keajaiban dunia abad ini. Kehadiran sosial media membuat pola interaksi manusia menjadi berubah secara berlahan. Walaupun kondisi ini sebenarnya belum menyentuh seluruh masyarakat dunia. Saat ini, sosial media. Terutama facebook, twitter dan instagram adalah media yang menjadi tempat berkumpulnya banyak orang. Hampir setiap hari mereka melihat dan mengecek facebook. Bahkan, saat bangun tidur yang mereka lihat terlebih dahulu adalah facebook.

Beberapa sumber kredibel mengatakan : “Setidaknya pengguna membuka facebook selama 20 menit setiap harinya. Dan kami yakin banyak yang lebih dari angka tersebut“.

39

Tentu saja kondisi ini tidak boleh anda lewatkan begitu saja tanpa mendapatkan manfaat darinya. Anda bisa mempromosikan website anda menggunakan sosial media dengan membagikannya di timeline anda atau mungkin juga bisa menggunakan fanspage yang sudah anda buat sebelumnya Jika konten yang anda bagikan ini menarik apalagi bermanfaat bagi mereka, mereka tanpa diminta akan membagikannya kepada teman-temannya yang lain. Dan begitu seterusnya Semakin sering dibagikan, semakin banyak orang melihatnya. Dan semakin terkenal pula website anda. Jika anda mempromosikan produk atau jasa, bisa saja akan terjadi penjualan Sangat sederhana. Mudah dan praktis Cara diatas adalah cara promosi website gratisan menggunakan Facebook. Jika anda ingin mendapatkan hasil yang lebih maksimal, anda juga bisa menggunakan fitur ads yang disediakan oleh facebook. Salah satu keuntungan menggunakan fitur berbayar dari Facebook adalah kita bisa manargetkan orang yang tepat dengan produk maupun jasa yang ditawarkan. Baik itu jenis kelamin, usia, lokasi serta behaviour lainnya.

- Promosi website menggunakan mesin pencari Cara promosi website berikutnya bisa anda lakukan dengan menggunakan mesin pencari seperti Google, Yahoo, Bing dan lain sebagainya. Karena mesin pencari yang populer itu adalah google, maka akan ambil sampelnya dari google. Promosi website menggunakan mesin pencari termasuk cara yang paling klasik. Sudah digunakan oleh para blogger dan webmaster sejak lama. Cara yang paling populer adalah SEO (Search Engine Optimization). Dan itu pula yang kami lakukan. SEO adalah kependekan dari Search Engine Optimization. Sebuah upaya yang dilakukan webmaster dengan mengoptimasi websitenya agar disukai Google dan kemudian ditampilkan di halaman 1 google untuk frasa kata yang ditarget. Sebenarnya SEO tidak terlalu sulit. Namun, bagi pemula tentu saja tetap membingungkan. Itulah mengapa saat ini banyak sekali kita temukan Jasa SEO di Internet. Untuk anda yang tidak ingin repot melakukan optimasi website menggunakan SEO,

- Promosi menggunakan Marketplace local Selain menggunakan SEO. Anda juga bisa menggunakan marketplace lokal untuk mempromosikan website anda. Ada banyak sekali marketplace yang bisa anda manfaatkan. Seperti Olx, tokopedia, bukalapak, indotrading dan marketplace yang lainnya Ketika anda mempromosikan produk disana, jangan lupa cantumkan juga alamat website anda. Sehingga pengunjung yang datang, selain membeli produk anda, juga mengunjungi website anda. Lambat laun website anda akan dikenal banyak orang Selain itu anda juga bisa menawarkan potongan khusus jika mereka belanja melalui website toko online anda. Misalnya jika belanja di Marketplace mereka dibebani ongkos kirim, maka ketika belanja melalui toko online anda mereka diberikan promo Gratis Ongkos kirim. Dengan strategi ini, pengunjung website anda semakin ramai dan semakin terkenal dikalangan pembeli. Untuk info lebih lanjut tentang strategi sukses pemasaran online, silahkan lihat disini : Strategi Sukses pemasaran online. Jangan lupa praktekan.

40

- Promosi website menggunakan Artikel Review

Nah, jika anda ingin mempromosikan website sekaligus menjual produk yang anda tawarkan, maka artikel rewiew adalah pilihan yang tepat. Cara ini sebenarnya mirip-mirip dengan Content Placement.Menggunakan artikel review ini, produk anda akan direview secara lengkap oleh pemilik blog. Selain cara yang bagus untuk mengedukasi market, cara ini juga sangat bagus untuk mempromosikan website anda. Ada 3 keuntungan yang anda dapatkan saat menggunakan trik ini dalam mempromosikan website.

1. Market anda teredukasi dengan baik, 2. Otoritas website anda akan naik karena mendapatkan backlink kontekstual, 3. Pengunjung website anda akan terus naik dari waktu ke waktu.

Hanya saja, promosi website menggunakan artikel review ini termasuk cara berbayar. Anda harus menyiapkan sejumlah anggaran untuk melakukannya. Sementara untuk biayanya, sangat tergantung pada blog yang akan memberikan review terhadap website anda. Untuk budget artikel review ini relatif murah. Biasanya berkisar antara 50ribu hingga 500ribuan sekali riview. Sangat tergantung pada website yang memberikan review terhadap website anda. Saya sangat merekomendasikan anda untuk mencobanya

- Promosi website menggunakan iklan banner Berikutnya, anda bisa mengiklankan website anda menggunakan banner. Baik dipasang di website anda sendiri maupun di website teman-teman blogger yang lain Sama halnya dengan artikel review, cara ini juga termasuk cara iklan website berbayar. Anda harus mengeluar uang untuk mempraktekan cara ini. Kecuali anda bisa melobi teman-teman blogger anda untuk memberikannya secara gratis pada anda

Yang perlu anda perhatikan ketika menggunakan cara ini adalah desain banner anda. Pastikan desain yang anda gunakan adalah desain yang menarik. Desain yang mendorong pengunjung untuk klik banner tersebut

41

5.2. Pemeliharaan Website

Memelihara website memang tidak mudah, tapi kegiatan ini harus terus dilakukan secara berkala untuk mengoptimalkan tampilan dan konten dari website. Berikut ini cara maintenance website yang mudah dan cocok untuk para pemula: a. Melakukan Update Konten

Mungkin Anda berpikir tidak perlu update konten karena tidak ada produk atau jasa baru yang ingin dipromosikan. Faktanya, konten-konten yang diposting di halaman website itu bertujuan untuk memberikan informasi pada pengunjung, jika Anda tidak pernah update konten lagi, pengunjung bisa berpikir website Anda sudah tidak aktif lagi karena update-an terakhir terjadi beberapa bulan lalu. Selain efektif untuk menaikan traffic, update konten juga baik untuk menjaga kepercayaan pelanggan terhadap usaha yang Anda jalankan.

b. Melakukan Update Tampilan Jika Anda mudah merasa bosan terhadap sesuatu, tentunya kegiatan maintenance ini tidak akan menyulitkan. Setiap minggu atau sebulan sekali, Anda bisa update tampilan situs. Gunakan tema yang berbeda agar viewer tertarik untuk mengunjungi situs Anda. Namun ketika anda sudah yakin dengan tampilan website anda, jangan sering-sering juga untuk melakukan perubahan. Pastikan setiap perubahan tampilan atau hal lainnya sesuai dengan kebutuhan saat itu, misalkan menambahkan keyword dan sebagainya.

c. Melakukan Back Up Data Salah satu cara memelihara website atau situs adalah dengan melakukan back up data. Karena kita tidak tahu kapan virus atau serangan hacker akan muncul dan mengganggu kerahasiaan data perusahaan. Dengan melakukan pemeliharaan, setidaknya kita bisa mengurangi resiko kehilangan data atau pencurian data yang dilakukan oleh hacker. Dan misalkan kita mengalami hal tersebut, situs kita bisa segera untuk dikembalikan.

d. Monitoring Statistis Website Selama melakukan pemeliharan situs, kita tidak hanya menambahkan konten-konten terbaru namun turut memonitoring statistic website. Cara ini efektif untuk memantau jumlah viewers yang datang ke halaman situs Anda, apakah sudah sesuai dengan harapan atau belum. Jika jumlah viewers belum sesuai harapan, Anda bisa melakukan pengembangan situs dengan mencoba ide baru yang unik.

e. Menambah Fitur Baru Yang Attractive Ada beberapa fitur baru yang dikeluarkan dari platform website yang bisa Anda gunakan untuk mengoptimalkan tampilan website seperti fasilitas chatting, pesan langsung ke WA dan fitur menarik lainnya. Semoga dengan mengaplikasikan cara memelihara website atau situs ini, jumlah viewers di situs Anda akan terus bertambah yang secara tidak langsung akan ikut berpengaruh dengan traffic penjualan.

42

DAFTAR PUSTAKA

Dinus repository. (n.d.). Prinsip-prinsip dasar desain web. 1–43.

Emozha, F. A. (2011). Rekayasa Web (Web Engineering). https://id.scribd.com

Hermiyanty, Wandira Ayu Bertin, D. S. (2017). Pengujian Aplikasi Berbasis Web. Journal of

Chemical Information and Modeling, 8(9), 1–58.

https://doi.org/10.1017/CBO9781107415324.004

https://bungdesain.blogspot.com/2018/02/pengertian-web-design-beserta-tujuan.html

https://www.rumahweb.com/journal/web-developer-web-designer-dan-webmaster/

https://medium.com/@muhammad.1384/perkembangan-web-dan-inovasi-tentang-industri-4-0-

dan-society-5-0-3948b2f834b3

https://www.domainesia.com/berita/7-elemen-desain-web/

https://www.dewaweb.com/blog/10-elemen-penting-desain-web/

https://iambehokky.com/cara-promosi-website-secara-offline/

http://www.azhima.id/cara-mempromosikan-website

https://onmeso.co.id/cara-memelihara-website-atau-situs-yang-baik-dan-benar/