TUGAS AKHIR
Nama : Firmansyah Kharisma P.
NIM : 09510160056
Program Jurusan
: :
DIV (Diploma Empat) Komputer Multimedia
SEKOLAH TINGGI
MANAJEMEN INFORMATIKA & TEKNIK KOMPUTER SURABAYA
2013
STIKOM
viii
Firmansyah Kharisma Pradana1) Karsam, MA., Ph.D Pembimbing I
Sutikno Pembimbing II
1)D4 Komputer Multimedia, STIKOM Surabaya, email: [email protected]
Developing technology as well as the development of means of communication, one website. Website is one of the effective means of communication, judging from the ease of access and coverage are up in every corner of the globe. Effectiveness to create a website can be used as media promotion, marketing, information, education and communication media (Kusuma Ardhana, 2012). These benefits certainly needed a company that requires a medium to introduce the company and accessible to all people, other than that the company would need a website that can keep track of the time in order to view the website look more modern and attractive. Website in order to keep abreast of the times would need to use latest programming language, and is currently being developed a programming language that is cleaner, simpler, and faster to access, namely HTML5 (Jubilee Enterprise, 2012). A website that uses HTML5 programming language would be very effective in showing the profile of a company and facilitate pengkases to find information about the company.
Keyword: Website, HTML5.
STIKOM
xi
DAFTAR ISI ... xi
DAFTAR GAMBAR ... xiv
DAFTAR LAMPIRAN ... xvi
BAB I PENDAHULUAN ... 1
1.1 Latar Belakang Masalah ... 1
1.2 Rumusan Masalah ... 3
1.3 Batasan Masalah ... 3
1.4 Tujuan ... 3
1.5 Manfaat ... 4
BAB II LANDASAN TEORI ... 5
2.1 Definisi Rancang Bangun ... 5
2.2 WWW (World Web Wide) ... 5
2.3 Website ... 6
2.3.1 Macam- Macam Website ... 8
2.4 Bahasa Pemrograman ... 16
2.5 HTML (Hypertext Markup Language) ... 17
2.6 HTML5 ... 17
2.6.1 Karakteristik HTML5 ... 18
2.7 Model Struktur Navigasi ... 19
STIKOM
xii
2.8.2 Visi ... 24
2.8.3 Misi ... 24
2.8.4 Alamat ... 25
2.9 Warna ... 27
2.10 Tipografi ... 27
BAB III METODOLOGI DAN PERANCANGAN KARYA ... 29
3.1 Tahap Planning ... 29
3.1.1 Metode Pengumpulan Data ... 30
3.1.2 Sumber Data ... 31
3.1.3 Teknik Pengumpulan Data ... 31
3.1.4 Teknik Analisa Data ... 32
3.2 Tahap Analisa ... 33
3.2.1 Studi Eksisting ... 33
3.2.2 STP (Segmenting, Targeting, Positioning) ... 37
3.2.3 Keyword ... 38
3.2.4 Analisis Warna ... 39
3.3 Tahap Perancangan ... 40
3.4 Rancangan Publikasi Karya ... 48
STIKOM
xiii
4.1.1 Desain Per Bagian Halaman Menu Utama ... 51
4.1.2 Desain Utuh Halaman Menu Utama ... 56
4.2 Proses Desain Halaman Administrator Site ... 57
4.2.1 Desain Halaman Login Admin ... 57
4.2.2 Desain Halaman Admin Panel ... 58
4.3 Proses Desain Halaman Galeri Karya ... 59
4.3.1 Desain Halaman Galeri Karya ... 59
4.3.2 Desain Halaman Keterangan Karya ... 60
4.4 Finishing ... 60
4.5 Publikasi Karya ... 60
BAB V PENUTUP ... 63
5.1 Kesimpulan ... 63
5.2 Saran ... 64
DAFTAR PUSTAKA ... 65
DAFTAR RIWAYAT HIDUP ... 67
LAMPIRAN ... 68
STIKOM
1
1.1Latar Belakang Masalah
Keyna Galeri merupakan lembaga baru yang bergerak di bidang kesenian
terutama di bidang Seni Pahat dan Seni Batik. Selain itu, Keyna Galeri juga
mengoleksi karya multimedia dan buku dari para seniman dan mahasiswa. Saat
ini, Keyna Galeri ingin memperluas informasi. Salah satu bentuk upaya untuk
memperluas informasi pada Keyna Galeri adalah dibuatnya website yang
berisikan tentang Keyna Galeri, produk-produk yang dihasilkan, tempat dan
kegiatan ukir serta membatik yang sering diadakan di Keyna Galeri.
Website menurut Hendra W Saputro (www.balebengong.net) merupakan
kumpulan halaman-halaman yang digunakan untuk menampilkan informasi teks,
gambar diam atau gerak, animasi, suara, dan atau gabungan dari semuanya itu
baik yang bersifat statis maupun dinamis yang membentuk satu rangkaian
bangunan yang saling terkait dimana masing-masing dihubungkan dengan
jaringan-jaringan halaman (hyperlink). Tujuan pembuatan website ini sebagai
media perluasan promosi Keyna Galeri selain menggunakan Company Profile
yang digunakan sebagai media presentasi bagi masyarakat yang datang ke sana.
Dalam hal ini Keyna Galeri membutuhkan website yang tidak saja bagus di
grafis namun memiliki inovasi yang baru. Dari kajian terdahulu, inovasi menurut
(Clark and Guy, 1997: 5) adalah aplikasi komersial yang pertama kali dari suatu
produk atau proses yang baru. Dengan adanya inovasi tersebut terbentuklah
STIKOM
sebuah konsep pembuatan website dengan menggunakan bahasa pemrograman
HTML5. Dan dari pihak Keyna Galeri setuju dengan website dengan bahasa
pemrograman HTML5.
HTML5 menurut Satank Mkr dalam website (www.mkr-site.blogspot.com)
merupakan hasil proyek dari W3C (Word Wide Web Consortium) dan WHATWG
(Web Hypertext Application Technology Working Group). Dimana WHATWG
bekerja dengan bentuk web dan aplikasi sedangkan W3C merupakan pengembang
dari XHTML 2.0 pada tahun 2006, mereka memutuskan untuk bekerja sama dan
membentuk versi baru dari HTML.
Kriteria website yang baik menurut CNET/Builder (http://ict.perbanas
.ac.id/) ada tujuh kriteria, yaitu: kriteria pertama adalah Usability, kriteria kedua
adalah Sistem Navigasi, kriteria ketiga adalah Grafik Desain, kriteria keempat
adalah Konten, kriteria kelima adalah Kompabilitas, kriteria keenam adalah
Waktu Akses dan kriteria ketujuh adalah Fungsional.
Bahasa pemrograman HTML5 yang akan digunakan dalam pembuatan
website Keyna Galeri berfungsi untuk memudahkan akses informasi tentang
Galeri, fasilitas Galeri, dan mempromosikan hasil-hasil produk seni yang terdapat
di Keyna Galeri kepada masyarakat luas dan membantu mengembangkan Keyna
Galeri untuk ke depannya.
STIKOM
1.2Rumusan Masalah
Dari latar belakang di atas dapat dirumuskan masalah sebagai berikut:
1. Bagaimana membuat website yang berisikan tentang informasi kegiatan
workshop dan karya seni di Keyna Galeri?
2. Bagaimana membuat website Keyna Galeri dengan menggunakan bahasa
pemrograman HTML5?
1.3Batasan Masalah
Batasan masalah yang dapat diambil dari rumusan masalah di atas antara
lain:
1. Membuat website yang memuat informasi workshop dan karya seni di Keyna
Galeri.
2. Bahasa pemrograman yang digunakan adalah HTML5, PHP, CSS3 dan
MYSQL.
1.4Tujuan
Tujuan yang ingin dicapai adalah:
1. Membuat website Keyna Galeri yang dapat memberikan kemudahan pada
masyarakat luas untuk memperoleh informasi tentang workshop dan karya
seni.
2. Membuat website Keyna Galeri dengan menggunakan bahasa pemrograman
HTML5.
STIKOM
3. Membuat website Keyna Galeri yang ditujukan untuk semua lapisan
masyarakat.
1.5Manfaat
Adapun manfaat yang diharapkan dari karya Tugas Akhir adalah:
1. Klien akan lebih mudah mendapatkan informasi tentang karya seni di Keyna
Galeri tanpa harus bertemu secara langsung.
2. Kemudahan untuk mendapatkan relasi bisnis baru.
3. Penghematan biaya promosi, karena dapat dilakukan melalui website.
STIKOM
5
Pada Bab ini akan membahas mengenai pembuatan website Keyna Galeri
dengan bahasa pemrograman HTML5, di sini akan dijelaskan beberapa literatur
atau referensi yang menjadi dasar suatu landasan teori.
2.1 Definisi Rancang Bangun
Rancang bangun menurut Hairun Nisya (hairun-nisya.blogspot.com) adalah
proses perencanaan yang menggambarkan urutan kegiatan (sistematika) mengenai
suatu program. Rancang bangun memiliki 3 unsur penting dalam pengerjaannya.
Antara lain: tujuan (apa yang harus dicapai), metode (bagaimana mencapai tujuan)
dan format (bagaimana rancang bangun itu dibuat).
2.2 WWW (World Web Wide)
Kusuma Ardhana (2012: 3) menjelaskan bahwa WWW merupakan suatu
layanan sajian informasi yang menggunakan konsep hyperlink (tautan), yang
memudahkan surfer (sebutan para pemakai komputer yang melakukan browsing
atau penelusuran informasi melalui internet.
WWW mengizinkan pemberian highlight (penyorotan/penggaris bawahan)
pada kata-kata atau gambar dalam sebuah dokumen untuk menghubungkan atau
menunjuk ke media lain seperti dokumen, frase,movie clip atau file suara. Web
dapat menghubungkan dari sembarang tempat dalam sebuah dokumen atau
STIKOM
gambar ke sembarang tempat di dokumen lain. Dengan sebuah browser yang
support HTML5, link-link dapat dihubungkan ke tujuannya dengan menunjuk link
tersebut dengan mouse dan menekannya.
2.3 Website
Website atau situs menurut Anne Ahira (www.anneahira.com) merupakan
kumpulan halaman yang menampilkan informasi, data, teks, gambar, data
animasi, suara dan gabungan dari semuanya, baik yang bersifat statis maupun
yang bersifat dinamis yang membentuk suatu rangkaian bangunan yang saling
terkait dengan jaringan-jaringan halaman (hyperlink). Website pertama kali
ditemukan oleh Sir Timothy John dan Tim Berners Lee pada tahun 1991. Tujuan
dari dibuatnya website pada saat itu yakni untuk mempermudah tukar-menukar
dan memperbaharui informasi kepada sesama peneliti di tempat mereka bekerja.
Website dipublikasikan ke publik setelah adanya pengumuman dari CERN
(Conseil Européene pour la Recherche Nucléaire) pada tanggal 30 April 1993.
CERN menyatakan bahwa website bisa digunakan secara gratis oleh semua orang.
Sejak saat itu website semakin dikenal oleh publik dan terus berkembang karena
dapat digunakan oleh siapapun dan kapanpun.
Adapun keuntungan memiliki website menurut Kusuma Ardhana (2012: 6)
antara lain:
1. Sebagai Media Promosi
Sebagai media promosi dapat dibedakan menjadi media promosi utama,
misalnya website yang berfungsi sebagai search engine atau toko Online,
STIKOM
atau sebagai penunjang promosi utama, namun website dapat berisi informasi
yang lebih lengkap daripada media promosi offline seperti koran atau
majalah.
2. Sebagai Media Pemasaran
Pada toko online atau system afiliasi, website merupakan media pemasaran
yang cukup baik, karena dibandingkan dengan toko sebagaimana di dunia
nyata, untuk membangun toko online diperlukan modal yang relatif lebih
kecil, dan dapat beroperasi 24 jam walaupun pemilik website tersebut sedang
istirahat atau sedang tidak ditempat, serta dapat diakses darimana saja.
3. Sebagai Media Informasi
Website portal dan radio serta TV Online menyediakan informasi yang
bersifat global karena dapat diakses dari mana saja selama dapat terhubung ke
internet, sehingga dapat menjangkau lebih luas daripada media informasi
konvensional seperti koran, majalah, radio atau televisi yang bersifat lokal.
4. Sebagai Media Pendidikan
Ada komunitas yang membangun website khusus berisi informasi atau artikel
yang sarat dengan informasi ilmiah misalnya Wikipedia.
5. Sebagai Media Komunikasi
Sekarang banyak terdapat website yang dibangun khusus untuk
berkomunikasi seperti forum yang dapat memberikan fasilitas bagi
anggotanya untuk saling berbagi informasi atau membantu pemecahan
masalah tertentu.
STIKOM
2.3.1 Macam-Macam Website
Website menurut Anne Ahira (www.anneahira.com) dibedakan menjadi 2
jenis berdasarkan pada CMS (Content Management System), yakni website statis
dan website dinamis. Pengertian website statis, yakni website yang informasinya
satu arah. Yakni berasal dari pemilik website saja. Umumnya website ini bersifat
tetap, jarang berubah dan hanya bisa diupdate oleh pemiliknya. Contohnya
website profil perusahaan. Sedangkan website dinamis adalah website yang
memiliki arus informasi 2 arah, yakni yang berasal dari pengguna dan pemilik,
sehingga pengupdate-an dapat dilakukan oleh pengguna dan pemilik website.
Contohnya Friendster dan Facebook.
Sedangkan website menurut Rachmat Hidayat (dhayhat-crew.blogspot.com)
dibedakan menjadi 15 jenis berdasarkan pada fungsi dan kebutuhannya. Yakni:
1. Search Engine atau Mesin Pencarian
Search Engine atau mesin pencari adalah website yang khusus
mengumpulkan semua daftar link dan konten seluruh website yang bisa
ditemukan di internet dalam indeks mereka kemudian menampilkan daftar
indeks ini berdasarkan kata kunci atau “keywords” yang sesuai yang dicari
oleh user. Mayoritas pengguna internet sudah familiar dengan situs search
engine ini untuk mencari informasi yang mereka butuhkan melalui internet.
Beberapa contoh search engine antara lain: Google Search, Bing, Yahoo
Search dan lain-lain.
STIKOM
2. Web Portal
Web Portal adalah situs yang mengumpulkan dan menyediakan aneka
informasi dari berbagai sumber untuk ditampilkan kepada user, jika user
tertarik untuk mengetahui informasi yang ada dengan lebih lengkap, user
akan diarahkan ke sumber yang aslinya. Namun pada umumnya web portal
tidak hanya menampilkan informasi dari sumber luar, kadang mereka juga
menampilkan informasi-informasi dalam website mereka sendiri. Beberapa
contoh web portal antara lain: Yahoo, msn, msnbc dan lain-lain.
3. Wiki
Website wiki yang paling terkenal saat ini adalah wikipedia. Website wiki
adalah website yang mengijinkan pengunjung untuk ikut menulis dan
mengedit artikel yang ada dalam website tersebut dengan
peraturan-peraturan tertentu. Masing-masing website wiki memiliki aturan yang
berbeda-beda. Biasanya, meskipun semua pengunjung bebas untuk menulis
dan mengedit artikel di website ini, namun ada sekelompok orang yang
bertugas untuk memeriksa konten yang dimuat apakah layak atau tidak
untuk website tersebut. Meskipun website wiki sering menjadi sumber
referensi namun tidak semua informasi yang ada dapat dipercaya 100%.
4. Archieve Site
Archieve site atau situs arsip adalah website yang dibuat untuk
mengumpulkan dan menyimpan materi-materi elektronik berupa
konten-konten dan halaman-halaman website agar tidak hilang/punah. Contohnya
archieve.org dan google groups.
STIKOM
5. Social Networking
Social networking termasuk salah satu fenomena yang luar biasa hingga saat
ini, khususnya diwakili oleh Facebook. situs social networking atau situs
pertemanan online adalah situs yang disediakan bagi para membernya untuk
bertukar informasi dan media elektronik lainnya seperti foto, musik dan
video. Beberapa situs social networking yang terkenal sebelum fenomena
Facebook dan Twitter antara lain Multiply, Friendster dan MySpace. setelah
tergusur Facebook dan Twitter, Friendster saat ini telah mengubah konsep
sebagai situs game online dan Multiply yang tadinya mengusung konsep
social networking dalam bentuk blog, kini lebih mengutamakan fitur portal
toko online.
6. Forum
Forum termasuk salah satu jenis website yang pernah menjamur di
Indonesia. Apalagi sejak fenomena KasKus sebagai forum no 1 dan juga
website dengan pengunjung terbanyak di Indonesia. Forum dibuat untuk
ajang diskusi dan tukar informasi. Ada yang spesifik ada juga yang bersifat
umum, dan dalam forum ini terdapat sub-sub forum berdasarkan
kategori-kategori tertentu yang ditetapkan oleh admin. Untuk membangun sebuah
forum yang lengkap membutuhkan waktu yang sangat banyak. Untungnya
sudah tersedia software-software pembuat forum yang siap pakai, baik yang
gratis ataupun berbayar. Software pembuat forum yang terkenal adalah
vBulletin, yang digunakan oleh kaskus dan banyak forum-forum internet
lainnya. Sedangkan beberapa forum gratisan dan open-source antara lain:
STIKOM
yabb, vanilla, SMF, phpbb dan lain-lain. Sedangkan contoh website forum
antara lain Kaskus, Modifikasi, detikForum dan lain-lain.
7. News Site
News site atau situs berita adalah situs yang memuat berita-berita dan
artikel-artikel untuk dibaca pengunjung. Bisa juga berisi opini dan
komentar-komentar seputar politik, teknologi dan lain-lain. Situs-situs berita
ini seperti layaknya koran, majalah dan buletin online. Konsep dan
karakteristik situs berita berbeda-beda sesuai dengan jenis berita dan target
pembacanya. Beberapa contoh situs berita adalah detik, kompas,
cosmopolitan dan lain-lain.
8. Social Bookmarking
Social bookmarking adalah situs yang mengijinkan user untuk memasukan
informasi atau sumber informasi artikel-artikel tertentu untuk dibaca atau
di-rating dan dikomentari oleh user lainnya. Situs jenis ini sering digunakan
oleh pemilik situs berita, blog dan situs-situs lainnya untuk mempromosikan
konten situs mereka. Beberapa situs social bookmarking yang terkenal
adalah Lintas Berita, Digg dan stumbleupon
9. Media Sharing
Situs ini khusus disediakan bagi user untuk meng-upload media-media
elektroknik seperti gambar, musik dan video agar dapat dilihat atau di
download oleh pengunjung lain. Contohnya adalah Youtube, Flickr,
Imageshack dll.
STIKOM
10. Company Profile
Company profile biasanya berupa website sederhana untuk menampilkan
profil dan produk atau jasa serta portfolio sebuah perusahaan. Website jenis
ini hanya untuk memperkenalkan profil perusahaan meskipun juga dapat
menjadi alat promosi jika dikelola dengan benar. Selain profil,produk dan
portfolio berupa konten teks dan foto atau video, fitur form kontak termasuk
yang penting dalam website ini agar pengunjung dapat dengan mudah
menghubungi perusahaan pemilik website jika mereka memerlukan produk
atau jasa perusahaan tersebut. Namun belakangan ini situs Company Profile
semakin berkembang dengan menambahkan fitur-fitur tertentu seperti
artikel-artikel terkait, bahkan forum diskusi. Tujuannya adalah untuk
memperbanyak konten dan menjaring pengunjung lebih banyak. Contoh
website company profile antara lain : Remax Capital, Pratama Jaya Jasa dan
lain-lain.
11. Corporate Website
Berbeda dengan company profile, Corporate Website biasanya lebih
kompleks. Website ini berisi informasi lengkap dari latar belakang hingga
kegiatan-kegiatan suatu perusahaan, organisasi atau yayasan sosial baik
yang bersifat profitable ataupun non-profit. Informasi-informasi dalam
corporate website bisa berupa profile perusahaan/organisasi, latar belakang,
visi dan misi, daftar founder dan pengurus, informasi investor dan klien
hingga laporan keuangan, afiliasi dan lain-lain serta artikel-artikel dan
berita-berita yang terkait dengan kegiatan perusahaan/organisasi tersebut.
STIKOM
Contoh corporate website antara lain, Pertamina, General Motors dan
lain-lain.
12. Brand Building Website
Brand Building Website dibuat untuk memperkenalkan serta membangun
image sebuah brand. Yang paling menonjol dari website seperti ini adalah
konsep untuk menyampaikan pesan sesuai dengan image yang akan
dibangun. Fiturnya sangat beragam dan biasanya cukup kompleks seperti
animasi, game, video dan fitur-fitur interaktif lainnya. Belakangan Brand
Building website juga sering diintegrasikan dengan social media seperti
Facebook, Twitter hingga blog. Brand Building website sering
dimanfaatkan oleh produk-produk fast moving consumer goods misalnya
groseri, soft drinks, snack dan lain-lain.
13. Online Store
Online store atau toko online sudah jelas peruntukannya adalah untuk
menjual barang secara online. Fitur-fitur utama online store adalah katalog
produk dengan informasi yang lengkap serta shopping cart, yaitu fitur untuk
pengunjung untuk melakukan pemesanan produk secara online. Online store
bisa bermacam-macam bentuk dan konsepnya. Fitur-fitur online store juga
bisa bermacam-macam disesuaikan dengan budget dan kemudahan yang
didapatkan. Baik kemudahan mengelola online store itu sendiri ataupun
kemudahan bagi pengunjung untuk memilih dan berbelanja produk.
Menjamurnya online store di internet memicu munculnya banyak software
open source untuk membangun online store. Dengan software-software
STIKOM
open-source, siapa saja dapat membangun online storenya sendiri jika tidak
memiliki budget untuk menyewa jasa pembuatan website. Namun
menggunakan tentunya membangun online store dengan menggunakan
software open source juga bukan hal mudah. Diperlukan waktu untuk
menguasai penggunaan software. Belum lagi harus mengerti tentang cara
hosting dan mengatur konfigurasi hosting. Dan yang paling penting adalah
bagaimana membuat tampilan website open source menjadi menarik dan
profesional. Yang sangat disayangkan, banyak jasa pembuatan website yang
membangun toko online klien mereka dengan menggunakan open source
seperti oscommerce, joomla dan wordpress. Jasa-jasa seperti ini relatif lebih
murah, namun klien pemilik website baru akan menyadari belakangan
kesulitan-kesulitan mereka dalam mengelola toko online tersebut karena
konfigurasi CMS atau admin area toko online yang dihasilkan dari software
open source sangatlah rumit dan kompleks. Kelemahan lainnya, biasanya
software opensource harus diupdate secara rutin karena sifatnya yang
“terbuka” sehingga mudah dicari kelemahaannya dan gampang di bobol
oleh hacker. Software online store opensource memang disediakan bagi
mereka yang ingin membangun toko onlinenya sendiri dan mengelola
sendiri.
14. Katalog/Portfolio Online
Katalog/portfolio online hampir mirip dengan online store, hanya jenis
website ini lebih mengutamakan katalog atau portfolio dengan informasi
lengkap bagi pengunjung tanpa ada fitur transaksi online. Jika pengunjung
STIKOM
tertarik dengan produk-produk atau jasa yang ditawarkan, diharapkan
pengunjung akan langsung menghubungi pemilik website untuk melakukan
pemesanan atau negosiasi.
15. Blog
Blog adalah sebuah website yang berbentuk seperti jurnal atau diari online.
Biasa digunakan seorang blogger untuk mengeskpresikan pemikiran dan
opini-opininya. Bisa juga artikel-artikel seputar kegiatan blogger. Bisa berisi
tulisan maupun media gambar, video dan lainnya. Setiap artikel biasanya
disertai kolom komentar dimana pengunjung blog bisa meninggalkan
komentar atau berdiskusi mengenai artikel yang ditulis. Blog juga dianggap
sebagai salah satu social media karena para blogger biasanya saling
berinteraksi melalui blog. Belakangan blog tidak hanya digunakan sebagai
media jurnal atau diari pribadi, namun juga dimanfaatkan sebagai fitur-fitur
tambahan oleh website-website besar untuk menginformasikan
update-update terbaru seputar produk dan kegiatan mereka. Blog juga sangat cocok
digunakan bagi profesional yang ingin menjual jasa berdasarkan keahlian
yang mereka miliki, misalnya fotografer, konsultan, fashion stylist hingga
artis. Menggunakan blog mereka dapat menulis artikel-artikel terkait seputar
keahlian mereka atau kegiatan-kegiatan yang berhubungan dengan portfolio.
STIKOM
2.4 Bahasa Pemrograman
Bahasa Pemrograman menurut Fikrul Huda (www.fixhack.blogspot.com)
adalah suatu komando atau perintah yang dibuat manusia untuk membuat
komputer menjadi memiliki fungsi tertentu. bahasa pemrograman ini adalah suatu
susunan aturan penulisan (sintaks) yang membentuk kode kode yang kemudian
akan diterjemahkan oleh program kompiler menjadi bahasa rakitan (assembly)
dan terus diolah hingga dimengerti oleh mesin. Komputer hanya mengerti bahasa
mesin. menurut tingkat kedekatannya bahasa pemrograman terdiri dari:
1. Bahasa mesin, yaitu bahasa yang digunakan untuk memprogram komputer
dengan menggunakan kode semacam kode biner. Misalnya
00100001010100100.
2. Bahasa tingkat rendah, yaitu memberikan perintah kepada komputer dengan
memakai kode-kode singkat, contohnya MOV, SUB, CMP, JMP, JGE, JL,
LOOP, dsb.
3. Bahasa tingkat menengah, yaitu bahasa komputer yang memakai campuran
instruksi dalam kata-kata bahasa manusia dan instruksi yang bersifat simbolik
({, }, ?, <<, >>, &&, ||, dsb.). Contohnya HTML5.
4. Bahasa tingkat tinggi, yaitu bahasa komputer yang memakai instruksi berasal
dari unsur kata-kata bahasa manusia, contohnya begin, end, if, for, while, and,
or, dsb.
STIKOM
2.5 HTML (Hypertext Markup Language)
Kusuma Ardhana (2012: 42) menjelaskan bahwa HTML merupakan suatu
bahasa yang dikenali oleh web browser untuk menampilkan informasi seperti
teks, gambar, suara, animasi bahkan video.
Dalam prakteknya, HTML (Hypertext) berwujud sebuah link yang bisa
mengantar surfer (sebutan untuk para peselancar dunia maya) ke dunia internet
yang sangat luas. Untuk membantu si pengakses berpindah dari satu tempat ke
tempat lainnya, dibuatlah semacam dokumen yang nanti akan disebut dengan
istilah website. Untuk membuat website, kita membutuhkan Markup, yaitu Tag
(semacam kode) yang mengatur bagaimana website itu akan ditampilkan di
jendela browser, seperti layout dan tampilan-tampilan visual yang biasa kita lihat
di dalam sebuah website.
2.6 HTML5
HTML5 pertama kali dikembangkan pada tahun 2004 oleh sebuah
organisasi yang lantas menamai dirinya sebagai “WHAT” Working Group
(WHATWG). Orang-orang yang menjadi aanggota WHATWG berasal dari
gabungan Apple, Mozilla, dan Opera. Lantas pada tahun 2006, World Wide Web
Consortium (W3C), lembaga yang bertanggung jawab terhadap perkembangan
internet, termasuk HTML, memutuskan untuk menghentikan “riset” terhadap
XHTML dan memilih bekerja sama dengan WHATWG untuk mengembangkan
HTML5.
STIKOM
Dua tahun kemudian, 2008, HTML5 versi perdana diperkenalkan. Ditulis
pertama kali oleh Ian Hickson, HTML5 masih terus dikembangkan hingga kini
(Jubile Enterprise, 2012: 1).
Perkembangan HTML5 tampaknya mulai mendapat sambutan positif
setelah para developer besar menciptakan layanan berbasis HTML5. Contohnya,
Youtube yang memperkenalkan player video berbasis HTML5. Langkah ini
disusul pula oleh Scribd yang bergerak di bidang distribusi dokumen-dokumen
dan Disney yang membeli perusahaan startup yang membuat permainan online
berbasis HTML5.
2.6.1 Karakteristik HTML5
Seperti halnya aplikasi atau script yang baru untuk mengembangkan versi
yang lebih lama, HTML5 memiliki karakteristik-karakteristik baru. Berikut
beberapa karakteristik HTML5 yang perlu untuk diketahui:
1. HTML5 lebih bersih dan sederhana. Dibanding cara penulisan XHTML,
cara penulisan HTML5 lebih sederhana dan simpel. Sebagai contoh, untuk
memulai penulisan script HTML5 saja, hanyalah tag <!DOCTYPE HTML>.
2. Tag-tag baru yang ada di dalam HTML5 lebih bersifat semantik. Oleh
karena itu, satu browser dengan lainnya memiliki cara menampilkan tag
yang agak berbeda. Sebagai contoh, jika menulis tag <h1> maka yang
terlihat adalah teks berukuran besar tanpa menyuruh kita menspesifikasikan
berapa ukuran font yang digunakan dan jenis font yang dipakai.
STIKOM
3. HTML5 tetap terikat CSS (Cascading Style Sheet). Dalam dunia desain
website saat ini, script HTML5 saja kurang cukup mumpuni karena tag-tag
di dalamnya tidak didesain secara penuh untuk mempercantik tampilan
website itu. Sebaiknya untuk mempercantik desain, digunakanlah CSS. Jadi
dapat diibaratkan, tag HTML5 berfungsi untuk menentukan
pengaturan-pengaturan bagian dan fungsi tiap-tiap elemen di dalam sebuah website.
Sedangkan CSS mengatur bagaimana bagian-bagian dan fungsi itu akan
terlihat di dalam website.
4. HTML5 sering berinteraksi dengan JavaScript. Ada beberapa tag yang tidak
bisa bekerja dengan optimal jika tidak dilengkapi dengan JavaScript.
Misalnya saja tag <canvas>.
2.7 Model Struktur Navigasi
Model struktur navigasi menurut Alit Mahendra (www.oke.or.id) adalah
alur yang digunakan dalam aplikasi yang dibuat. Sebelum menyusun aplikasi
multimedia ke dalam sebuah software, kita harus menentukan terlebih dahulu alur
apa yang akan digunakan dalam aplikasi yang dibuat. Model struktur navigasi
terdiri dari 4 (empat) macam, yaitu:
1. Model Struktur Navigasi Linier, merupakan model struktur yang mempunyai
satu rangkaian cerita berurutan. Struktur ini menampilkan satu demi satu
tampilan layer secara berurutan menurut aturannya. Model struktur navigasi
linier dapat dilihat pada gambar 2.1.
STIKOM
Gambar 2.1 Model Struktur Navigasi Linier
2. Model Struktur Navigasi Hirarki, sering disebut dengan navigasi bercabang,
yaitu merupakan model struktur yang mengandalkan percabangan untuk
menampilkan data atau gambar pada layer dengan kriteria tertentu. Tampilan
pada menu utama disebut master page (halaman utama satu), halaman
tersebut mempunyai halaman percabangan yang disebut slave page (halaman
pendukung) dan jika dipilih akan menjadi halaman kedua, begitu seterusnya.
Model struktur navigasi Hirarki dapat dilihat pada gambar 2.2.
Gambar 2.2 Model Struktur Navigasi Hirarki
3. Model struktur Navigasi Non Linier (tidak berurut), merupakan
pengembangan dari model struktur navigasi linier, hanya saja pada model
struktur ini diperkenankan untuk membuat percabangan. Percabangan pada
struktur non linier berbeda dengan percabangan pada struktur hirarki, pada
model struktur ini semua kedudukan page sama, sehingga tidak kenal adanya
STIKOM
master atau slave page. begitu seterusnya. Model struktur navigasi non linier
dapat dilihat pada gambar 2.3.
Gambar 2.3 Model Struktur Navigasi Non Linier
4. Model struktur Navigasi Campuran (Composite), struktur ini merupakan
gabungan dari model struktur sebelumnya dan disebut juga model struktur
navigasi bebas, maksudnya adalah jika suatu tampilan membutuhkan
percabangan maka dibuat percabangan. Model struktur ini paling banyak
digunakan dalam pembuatan aplikasi multimedia. Model struktur navigasi
composite dapat dilihat pada gambar 2.4.
Gambar 2.4 Model Struktur Navigasi Composite
STIKOM
2.8 Galeri
Deskripsi galeri adalah ruangan atau gedung tempat memamerkan benda
atau karya seni. Menurut kajian terdahulu galeri atau Gallery, berasal dari bahasa
latin: Galleria yang dapat diartikan sebagai ruang beratap dengan satu sisi terbuka.
Di Indonesia, galeri sering digunakan untuk memamerkan karya seni
(Ensiklopedia Nasional Indonesia XVIII, 1991).
Dari ulasan di atas, dapat disimpulkan bahwa Keyna Galeri adalah sebuah
wadah yang digunakan untuk memamerkan karya-karya seni dan multimedia.
2.8.1 Keyna Galeri
KEYNA GALERI digagas dan didirikan oleh Karsam, S.Pd., MA., Ph.D.
Kerja sehari-hari sebagai dosen tetap STIKOM Surabaya pada Program Studi DIV
Komputer Multimedia dan S1 Desain Komunikasi Visual. Secara informal
KEYNA GALERI telah dibuka pada tanggal 5 Juli 2011 bertepatan dengan Ulang
Tahun Karsam yang ke – 43 tahun. Acara pembukaan ini dihadiri tidak kurang
dari 75 orang yang terdiri dari para mahasiswa STIKOM, tetangga dan keluarga
terdekat.
KEYNA GALERI bermaksud untuk mewadahi atau menjadi fasilitas para
seniman (khususnya seniman Jawa Timur) untuk memamerkan karya-karyanya
dan sebagai sarana edukasi, rekreasi serta pengembangan kreativitas dan apresiasi
seni. Selain itu secara khusus KEYNA GALERI bermaksud membantu
meningkatkan pendidikan kesenian bagi para pelajar dan mahasiswa yang ada di
STIKOM
Kabupaten Jombang serta menciptakan kesadaran berkesenian diantara
masyarakatnya.
Konsep pendirian KEYNA GALERI ini adalah memberi wadah untuk
apresiasi seni kepada para pelajar, mahasiswa dan masyarakat umum secara gratis. Yang dimaksud pelajar ini adalah meliputi siswa-siswi TK, SD/MI, SMP/MTS, SMA/SMK. Berdasarkan segmen ini, maka karya yang akan
disajikan/dipamerkan dapat dikelompokkan menjadi 2 kelompok, yaitu:
1. Kelompok TK dan SD/MI.
2. Kelompok SMP/MTS, SMA/SMK, Mahasiswa dan masyarakat umum.
Cara penyajian/pemajangan karya bisa dibedakan menjadi 2 cara, yaitu:
1. Disajikan secara bersama dengan cara pengelompokkan karya, sehingga
semua pengunjung dapat mengunjungi galeri pada waktu yang sama.
2. Disajikan dalam waktu yang berbeda, sehingga ada penjadwalan pengunjung,
yakni pengunjung kelompok TK, SD/MI dan kelompok SMP/MTS,
SMA/SMK, Mahasiswa dan masyarakat umum.
Galeri ini diberi nama “KEYNA GALERI SENI DAN MULTIMEDIA”.
Kata “KEYNA” diambil dari nama kedua anak Karsam selaku pendiri galeri, yaitu dari nama panggilan anak pertama “Keysa” (KEY) dan nama panggilan anak kedua “Krisna” (NA), jika digambungkan menjadi “KEYNA”.
Penggunaan kata multimedia. Multimedia dapat berhubungan dengan alat
(gadget) dan elektronika. Pada masa ini banyak karya seni yang diciptakan dengan
menggunakan media multimedia. Karya-karya multimedia yang dihasilkan seperti
STIKOM
film, iklan, poster dan lain-lain. Sehingga galeri ini akan memadai karya-karya
seni dan multimedia.
2.8.2 Visi
Visi Keyna Galeri pada tahun 2015 terwujudnya galeri seni dan multimedia
sebagai wadah apresiasi, edukasi dan wisata seni secara komunikatif, produktif,
inovatif, dan nyaman bagi pelajar, mahasiswa dan masyarakat umum.
2.8.3 Misi
Misi Keyna Galeri adalah sebagai berikut:
1. Membangun galeri seni dan multimedia dengan menampilkan
keanekaragaman karya seni dan multimedia untuk apresiasi, edukasi dan
rekreasi bagi semua pelajar, mahasiswa dan masyarakat Jombang khususnya
dan Jawa Timur umumnya.
2. Melakukan pendekatan atau kerja sama baik secara kelembagaan maupun
individu terhadap pencipta atau penghasil karya untuk kelengkapan dan
keberlangsungan galeri.
3. Melakukan kegiatan yang bersifat pemberdayaan bagi pelajar, mahasiswa dan
masyarakat dengan pengajaran kreatifitas seni dan multimedia secara gratis
dengan target terciptanya masyarakat yang aktif, kreatif dan apresiatif.
4. Melakukan pembenahan secara kontinu baik sarana prasarana, sumber daya
manusia maupun managemennya agar terwujudnya keberlangsungan galeri
yang komunikatif, produktif, inovatif, dan nyaman.
STIKOM
Adapun tujuan dari Keyna Galeri adalah sebagai berikut:
1. Dapat memberikan wadah bagi para pelajar, mahasiswa dan masyarakat yang
berkeinginan untuk meningkatkan daya kreatifitas dan apresiasi seni.
2. Dapat memberikan wadah bagi para pelajar, mahasiswa dan masyarakat
untuk apresiasi, edukasi dan rekreasi
3. Dapat membantu meningkatkan terciptanya pelajar, mahasiswa dan
masyarakat yang aktif, kreatif dan apresiatif.
4. Dapat melakukan bimbingan, pembinaan, pelatihan dan apresiasi seni untuk
para pelajar, mahasiswa, dan masyarakat sehingga mereka terberdaya.
5. Dapat membantu mempromosikan dan meningkatkan kualitas seni dan
multimedia yang dihasilkan oleh para pelajar, mahasiswa dan seniman.
6. Dapat membantu menciptakan kesadaran, pemahaman, penghargaan dan
penghormatan terhadap karya seni dan multimedia.
Bangunan KEYNA GALERI tidak berdiri sendiri, namun berada di lantai II
rumah Karsam selaku pemilik galeri.
2.8.4 Alamat
Alamat: Jalan Joyo Lengkoro No. 30 Dukuh Ploso, Desa Ploso, Kecamatan Ploso
Kabupaten Jombang.
Telpon : 081331850498, 081332705445
Email : [email protected] atau [email protected]
STIKOM
Alamat ini bisa dilihat pada peta berikut ini:
1. Peta ke Keyna Galeri
Gambar 2.5 Peta Keyna Galeri
Gambar 2.6 Peta Keyna Galeri
STIKOM
2.9 Warna
Warna merupakan elemen yang sangat penting dalam desain grafis dan
menentukan komposisi desain agar bisa menjadi menarik. Warna adalah yang
cukup penting dalam desain grafis. Warna adalah bagian esensial karena dengan
menggunakan warna suatu desain bisa terlihat hidup (Komputer, 2009: 148).
Menurut Russel dan Verrill (1986, 416) warna dapat digunakan untuk
beberapa alasan, khususnya dalam periklanan, diantaranya:
1. Warna merupakan alat untuk menarik perhatian.
2. Beberapa produk akan menjadi realistis, jika ditampilkan dengan
menggunakan warna.
3. Dapat memperlihatkan atau memberikan suatu penekanan pada elemen
tertentu dalam karya desain.
Warna dapat memperlihatkan mood tertentu yang menunjukan akan adanya
kesan psikologis tersendiri.
2.10 Tipografi
Tipografi atau tata huruf merupakan suatu ilmu dalam memilih dan menata
huruf dengan pengaturan penyebarannya pada ruang-ruang yang tersedia, untuk
menciptakan kesan tertentu, sehingga dapat menolong pembaca mendapatkan
kenyamanan membaca semaksimal mungkin. Menurut (Kusrianto, 2010: 1)
“Tipografi dalam pengertian yang lebih bersifat ilmiah adalah seni dan teknik
dalam merancang maupun menata aksara dalam kaitannya untuk menyusun
publikasi visual, baik cetak maupun non cetak. Adapun pengelompokan aksara
STIKOM
atau huruf atau Font menurut jenis kaitnya yang terbagi atas dua jenis, yaitu Serif
dan Sans Serif.
Huruf Serif memiliki garis-garis kecil yang disebut Counterstoke pada ujung
hampir semua letter. Garis-garis kecil itu posisinya berdiri horizontal terhadap
badan huruf. Huruf Serif ini dikenal lebih legible dan readable karena garis-garis
horizontal pada masing-masing kaki huruf itu membantu menuntun pandangan
mata pembaca pada garis teks yang tengah dibacanya.
Huruf Sans Serif adalah huruf yang tanpa serif (garis kait), di mana dalam
bahasa perancis, sans artinya tanpa. Huruf Sans Serif ini memiliki sifat yang
streamline, fungsional, modern dan kontenporer.
Menurut kutipan dari buku Danton Sihombing MFA, yang perlu
diperhatikan adalah Clarity (suatu jenis huruf yang bisa dilihat secara jelas),
Readibility (keterbacaan dari jenis huruf tersebut), Legibility (lebih menekankan
apakah kita bisa membacanya atau tidak), Visibility (lebih menekankan pada
keindahan jenis huruf).
Dalam pembuatan website suatu perusahaan atau institusi atau lembaga
seperti halnya pembuatan Website Company Profile Keyna Galeri yang sangat
diperlukan sekali adalah font yang akan digunakan. Oleh sebab itu, untuk memilih
font atau tipografi harus sangat selektif.
STIKOM
29
Laporan Tugas Akhir pada BAB III ini, menjelaskan tentang isi dari
metodologi dan perancangan karya dalam proses pembuatan Website Keyna
Galeri. Pada BAB ini terdapat penjelasan konsep atau pokok pikiran utama yang
akan menjadi dasar rancangan karya yang akan dibuat. Adapun metode penelitian
yang digunakan untuk proses pembuatan Website Keyna Galeri ini dilakukan
berdasarkan SDLC (System Development Life Cycle) dimana SDLC didefinisikan
oleh Dewan Perwakilan Rakyat AS sebagai proses pengembangan software yang
digunakan oleh analis sistem untuk mengembangkan sebuah sistem informasi.
Tahapan-tahapan yang digunakan dalam SDLC diantaranya adalah
Planning, Analisa, Desain, Implementasi, Testing dan Maintenance.
3.1 Tahap Planning
Untuk menghasilan sebuah website diperlukan sebuah perencanaan yang
matang yaitu dengan melakukan studi kelayakan tentang metode yang digunakan
dalam proses pengumpulan data. Studi kelayakan yang dilakukan diantaranya
adalah metode pengumpulan data, sumber data, teknik pengumpulan data dan
teknik analisa data.
STIKOM
Metode pengumpulan data dilakukan dengan mengidentifikasi dan membuat
alur perancangan yang akan dilaksanakan, agar dalam proses pencarian data tidak
terjadi penyimpangan dalam mengemukakan tujuan yang ingin dicapai. Dalam
tahapan ini, rancangan perencanaan yang dilakukan dalam pembuatan Tugas
Akhir ini dapat dilihat dalam diagram metodologi perancangan berdasarkan
metode SDLC berikut ini:
Gambar 3.1 Diagram Metode Perancangan menggunakan Sistem SDLC
STIKOM
Setelah melakukan identifikasi dan membuat alur perancangan dalam proses
pengumpulan data, langkah selanjutnya yang dilakukan dalam proses pembuatan
website ini yaitu menentukan sumber data. Sumber data yang digunakan dalam
penelitian ini, sebagian besar merupakan data sekunder yang merupakan data yang
sudah diolah, data yang diperoleh dengan mengambil data-data laporan,
catatan-catatan dan hasil penelitian atau kajian terdahulu yang berhubungan langsung
dengan masalah yang dibahas. Sumber data tersebut diantaranya bersumber dari:
buku literasi, wawancara dan website milik beberapa ahli di bidang multimedia.
3.1.3 Teknik Pengumpulan Data
Teknik pengumpulan data dalam kegiatan pembuatan website ini dilakukan
dengan 3 cara, yaitu: studi pustaka, wawancara, dan observasi.
1. Studi pustaka, yaitu pengumpulan data dari perpustakaan yang dilakukan
dengan cara membaca dan mempelajari buku literatur, majalah, artikel
internet dan informasi lainnya sebagai bahan tinjauan pustaka yang berkaitan
dengan pembuatan website ini.
2. Wawancara, mencari data dengan cara melakukan tanya jawab pada pihak
terkait, yang mempunyai wewenang atas data-data yang berhubungan dengan
obyek penelitian (Keyna Galeri).
3. Observasi, pada tahapan ini diadakan kegiatan pengamatan mengenai struktur
dan navigasi website yang akan dibangun, agar dapat menjadi website yang
user friendly.
STIKOM
Teknik analisis data pada proses pembuatan website ini menggunakan
metode kualitatif, yaitu metode pembahasan yang menganalisis serta membahas
permasalahan dalam bentuk kalimat yang kemudian dilakukan analisis guna
mendapat kesimpulan.
Menggunakan metode kualitatif karena data kualitatif bersifat induktif.
Artinya, suatu analisis berdasarkan data yang diperoleh, kemudian dikembangkan
sesuai dengan pola tertentu untuk menjadi hipotesis. Teknik analisis data
penelitian kualitatif dilakukan dalam 3 tahap berikut, diantaranya adalah analisis
data sebelum di lapangan, analisis data di lapangan dan data selesai di lapangan.
1. Analisis data sebelum di lapangan, dalam tahapan ini dilakukan analisa
terhadap data hasil studi pendahuluan, atau data sekunder yang akan
digunakan untuk menentukan arah fokus penelitian. Fokus penelitian dalam
tahap ini masih bersifat sementara, dan akan berkembang setelah melakukan
penelitian di lapangan.
2. Analisa selama di lapangan, pada tahap ini analisis data dilakukan dengan
mengumpulkan data secara langsung melalui wawancara dengan Bapak
Karsam, MA., Ph.D selaku pemilik sekaligus pengelola Keyna Galeri serta
observasi secara langsung di Keyna Galeri. Pada tahap ini, wawancara
dilakukan sampai peneliti memperoleh data yang valid mengenai pentingnya
website untuk Keyna Galeri.
STIKOM
data yang telah diperoleh untuk memperoleh sebuah gambaran umum dan
menyuruh dari obyek penelitian atau situasi. Proses selanjutnya adalah
menyusun dan menentukan hipotesa ataupun kesimpulan sehingga dapat
menentukan tema yang dihasilkan.
3.2 Tahap Analisa
Tujuan dari analisa sistem adalah untuk menentukan masalah dalam upaya
memperbaiki sistem. Sehingga diharapkan dengan dilakukannya analisa sistem,
maka permasalahan yang ada akan teratasi dan menghasilkan suatu sistem yang
sempurna.
3.2.1 Studi Eksisting
Dalam pembuatan suatu website dibutuhkan studi eksisting yang berfungsi
untuk mengamati sebuah karya yang sudah ada. Obyek atau karya yang menjadi
sampel studi eksisting akan dikaji mempelajari kelebihan dari sampel yang akan
dikaji. Kajian dilakukan terhadap beberapa karya yang serupa.
Berikut beberapa sampel yang menjadi studi eksisting dalam pembuatan
website diantaranya adalah Galeri Nasional Indonesia, The National Gallery
London, dan The National Gallery Australia.
STIKOM
1. Galeri Nasional Indonesia (www.galeri-nasional.or.id) adalah salah satu
website galeri terkenal yang menggunakan HTML5. Dapat diperhatikan
dalam gambar di bawah berupa screenshot dari website Galeri Nasional
Indonesia.
Gambar 3.2 Screenshot Website Galeri Nasional Indonesia
Berikut ini adalah penjelasan tentang website Galeri Nasional Indonesia.
yang merupakan website dengan bahasa pemrograman HTML5. Setelah
memperhatikan website source ini dan bahasa pemrograman HTML5
diaplikasikan pada halaman utama dengan menampilkan berbagai macam
gambar yang mewakili berita yang dibuat.
Dengan menggerakkan mouse ke arah gambar, maka muncul transisi
berwarna biru dengan keterangan dari gambar tersebut. Selain itu, ketika
tombol panah di kiri dan kanan di tekan maka akan bergeser secara halus
ke kiri dan ke kanan.
STIKOM
2. The National Gallery London (www.nationalgallery.org.uk) adalah
website gallery internasional yang menggunakan bahasa pemrograman
HTML5. Dapat diperhatikan dalam gambar di bawah berupa screenshot
dari website The National Gallery London.
Gambar 3.3 Screenshot Website The National Gallery London
Berikut ini adalah penjelasan tentang website The National Gallery
London. Website The National Gallery London merupakan website
galeri luar negeri yang menggunakan bahasa pemrograman HTML5.
Pada awal membuka website ini sudah disajikan deskripsi dari produk
yang mereka jual. Dengan warna yang senada tulisan di atas begitu
jelas terlihat. Selain itu ketika tombol panah kanan dan kiri ditekan
maka gambar produk di tengah akan bergeser searah atau berlawanan
arah berganti dengan gambar produk lainnya. Bahasa pemrograman
HTML5 digunakan di semua halaman website ini.
STIKOM
merupakan sebuah website galeri luar negeri yang menggunakan bahasa
pemrograman HTML5. Website ini berisikan tentang profil dari galeri
mereka. HTML5 digunakan pada semua halaman. Yang menarik adalah
gambar di tengah selalu berubah-ubah dengan arah gerakan yang
berbeda-beda. Berikut ini screenshot-nya.
Gambar 3.4 Screenshot Website The National Gallery Australia
Setelah melakukan analisa dan kajian pada interaktif yang sudah diproduksi
dan yang sudah beredar di masyarakat, dapat disimpulkan bahwa desain Website
Keyna Galeri yang dibuat akan berdasarkan beberapa poin berikut ini:
1. Desain harus sesuai dengan ciri khas Keyna Galeri.
2. Penggunaan HTML5 secara keseluruhan.
3. Memberikan materi informasi lengkap tentang Keyna Galeri.
STIKOM
Pada dasarnya Keyna Galeri diperuntukan kepada semua kalangan. Namun
demikian pada pembuatan Website ini ditekankan kepada usia 15-45 tahun. Atas
dasar usia 15 tahun sudah diperkenalkan teknologi komputer dan usia 15 tahun ini
ada di bangku Sekolah Menengah Pertama atau kelas 9. Pembagian segmentasi,
target audien dan posisi interaktif sangat diperhatikan agar interaktif yang akan
dihasilkan bisa sesuai dengan kondisi masyarakat sekitar, yang secara tidak
langsung dapat membuat Website lebih efisien dalam proses pengerjaan.
Pembagian STP pada Website ini dibagi dalam dua segmen, yaitu segmentasi
secara demografis dan geografis.
1. Demografis:
a. Usia: 15-45 Tahun.
b. Jenis kelamin: laki-laki, perempuan.
c. Kelas Sosial: Semua Kalangan (dari anak-anak sampai dengan dewasa)
2. Geografis:
a. Negara: Indonesia
b. Daerah: Perkotaan dan Pedesaan
3. Target audien interaktif ini adalah semua kalangan dari Sekolah Dasar,
Sekolah Menengah Pertama, Sekolah Menengah Atas, Mahasiswa, Para
Seniman dan masyarakat pecinta seni.
4. Positioning, Website ini dibuat untuk memberikan informasi tentang jati diri
Keyna Galeri, dapat memperkenalkan profil Keyna Galeri pada khalayak
umum dengan mudah, untuk mempermudah audience dalam memahami dan
STIKOM
Keyna Galeri.
3.2.3 Keyword
Keyword atau kata kunci, pada gambar 3.5 ini merupakan hal penting dalam
mencari poin utama proyek penelitian, dan dengan meninjau kembali hasil dari
STP. Semua Kalangan Nyaman Suka Belajar Sopan Terlatih Cultivate Usia 15-45 tahun Serba Cepat Selektif Konsumtif Pemikir Simple CHIC SD SMP SMA Mahasiswa Seniman Pandai Ingin Tahu Ulet Disiplin Rajin Artistik Perkotaan dan Pedesaan Padat Pekerja Keras Disiplin Maju Provinsial
Gambar 3.5 Diagram alur Keyword yang digunakan
Berdasarkan bagan di atas, hasil analisis dalam pencarian keyword adalah
kata chic. Keyword chic ini jika dilambangkan dengan warna dapat diartikan
STIKOM
dalam Website Keyna Galeri
3.2.4 Analisis Warna
Berdasarkan gambar 3.6 warna-warna pada color Kobayashi, warna yang
sesuai dengan keyword yang dibutuhkan mengarah pada daerah provincial, chic.
Gambar 3.6 Diagram Warna Kobayashi
Warna dengan sifat provincial juga disertakan dalam desain yang akan
diterapkan karena warna ini memiliki hubungan dengan Keyna Galeri. Dari kata
provincial yang diartikan provinsi, Keyna Galeri ingin dikenal lebih luas lagi dan
STIKOM
Website harus dapat memberikan informasi yang jelas kepada seluruh lapisan
masyarakat.
3.3 Tahap Perancangan
Tahap perancangan merupakan salah satu tahapan yang penting dalam
pembuatan suatu karya multimedia. Pada tahap ini, terdapat beberapa teknis
perancangan yang diperlukan untuk menerjemahkan metode perancangan yang
telah dibuat. Teknik perancangan yang diperlukan, diataranya adalah ide, konsep,
struktur navigasi, alur sistem navigasi dan tipografi.
1. Ide awal dalam pembuatan Website untuk Keyna Galeri ini setelah
mengetahui sebuah galeri seni baru yang bertempatkan di Ploso Jombang dan
dikelola oleh Bapak Karsam, belum memiliki media promosi Online atau
media untuk memperkenalkan galerinya kepada masyarakat di Indonesia
secara luas. Keyna Galeri hanya memiliki media interaktif Company Profile
untuk mempresentasikan terhadap kalangan masyarakat sekitar. Itulah yang
mendasari penulis untuk membuat Website untuk Keyna Galeri.
2. Konsep Website Keyna Galeri ini berawal dari saya melihat sebuah website
dengan menggunakan bahasa pemrograman HTML5 jauh lebih praktis dan
ringkas dalam penulisan script. Selain itu, tampilannya jauh lebih beragam
dibanding menggunakan HTML4. Dari hal itu terpikirkan untuk
menggunakan bahasa pemrograman HTML5 untuk membuat website Keyna
Galeri.
STIKOM
memberikan keterkaitan informasinya lebih baik. Untuk menggambarkan
model tersebut dapat digunakan ilustrasi dengan tree. Menurut Hasyim
Alkhawarizmi (http://hasim319.wordpress.com). Maka dari itu struktur dari
Website ini menggunakan navigasi campuran yang bertujuan agar user
friendly. Model campuran tersebut dapat dilihat pada gambar 3.7.
Gambar 3.7 Model Struktur Navigasi Composite (Campuran).
STIKOM
Model struktur navigasi pada website Keyna Galeri dibagi menjadi 2 macam,
yaitu:
a. Model Struktur Navigasi Front Site Keyna Galeri
Menu Utama Berita Keyna Pera turan Pari wisata Seni dan Budaya Pen didikan Olah raga Album Keyna Galeri
Lain-Lain Artikel
Menu Utama
Profil Keyna
Album
Karya Agenda Download Kontak
Gambar 3.8 Bagan Model Struktur Navigasi Front Site Keyna Galeri
Model struktur Navigasi pada gambar 3.8 di atas merupakan model
struktur navigasi yang terdapat pada Website Keyna Galeri pada User
Side. Dengan menyesuaikan struktur navigasi hirarki yang digunakan
untuk Website Keyna Galeri ini.
STIKOM
Login Home Manj. Modul Manj. User Iden
titas Berita
Down load Album Karya Galeri Karya Album Keyna Galeri Keyna
Edit Delete
Update Cancel
Gambar 3.9 Bagan Model Struktur Navigasi Back Site Keyna Galeri
Model struktur navigasi pada gambar 3.9 diatas merupakan sistem yang
terdapat pada Website Keyna Galeri pada Back Side. Dengan
menyesuaikan struktur navigasi hirarki yang digunakan untuk Website
Keyna Galeri ini.
5. Tipografi
Tipografi yang digunakan dalam interaktif ini adalah serif. Menurut Adi
Kusrianto dalam bukunya Pengantar Tipografi (Adi Kusrianto, 2010:48)
menjelaskan font serif ini dikenal lebih legible dan readable karena garis
horizontal pada masing-masing kaki font membantu menuntun pandangan
STIKOM
yang nantinya akan dipilih dan digunakan untuk pembuatan Website Keyna
Galeri yang disesuaikan berdasarkan keyword dan legiblenya. Dapat
diperhatikan jenis-jenis hurup tersebut pada gambar 3.10, gambar 3.11 dan
gambar 3.12.
a. Black Chancery
Gambar 3.10 Font Black Chancery
b. Gabriola
Gambar 3.11 Font Gabriola
c. Toms Handwriting
Gambar 3.12 Font Toms Handwriting
Berdasarkan dari keyword dan legible font yang akan digunakan dalam
pembuatan interaktif company profile adalah font Black Chancery untuk
bagian judul dan pada bagian konten akan digunakan font Gabriola.
STIKOM
Layout Rancangan dibedakan menjadi 2 jenis, yaitu:
a. User Side
berikut ini sketsa rencana rancangan User Side yang nantinya akan
diaplikasikan ke dalam Website Company Profile Keyna Galeri.
1) Layout Menu Utama
Gambar 3.13 Layout Menu Utama
STIKOM
Gambar 3.14 Layout Hal. Galeri Karya 3) Layout Keterangan Karya
Gambar 3.15 Layout Keterangan Karya
STIKOM
berikut ini layout rencana rancangan Admin Side yang nantinya akan
diaplikasikan ke dalam Website Company Profile Keyna Galeri.
1) Layout Menu Login Admin
[image:52.595.45.553.155.701.2]Gambar 3.16 Layout Menu Login Admin 2) Layout Halaman Admin Panel
Gambar 3.17 Layout Halaman Admin Panel
STIKOM
Pada rancangan publikasi karya berisi tentang media publikasi seperti
poster, cover CD, sampul CD yang berisi konsep dan sketsa dari media publikasi.
1. Poster
a. Konsep
Konsep poster menggunakan header dari desain Website, judul berada di
header, agar judul Website menjadi padangan pertama untuk
ditampilkan, dan pada content tengah merupakan background bernuansa
Keyna Galeri dengan tambahan bubble chat. Point interest terdapat pada
gambaran objek yang disajikan di tengah. Untuk keterangan dari poster
diletakan dibawah beserta logo, sehingga komposisi poster menjadi
seimbang.
[image:53.595.40.555.155.724.2]b. Layout
Gambar 3.18 Layout Poster
STIKOM
a. Konsep
CD sebagai penampung data dari Website, dengan desain cover yang
minimalis, menyederhanakan sebuah visi misi dari Keyna Galeri dengan
menonjolkan sisi streamline dan kubis.
b. Layout
Gambar 3.19 Layout Cover CD bagian dalam
3. Sampul CD
a. Konsep
Sampul CD adalah tempat untuk menyimpan CD dan melindungi CD
dengan desain yang terbagi 2 bagian, tampak depan dan belakang. Pada
sampul depan, judul berada pada bagian atas, dan logo berada di bagian
STIKOM
poster. Pada bagian belakang terdapat keterangan singkat dan jelas
mengenai isi dari dalam CD.
b. Layout
Gambar 3.20 Layout Sampul depan belakang
STIKOM
51
Pada bab ini penulis membahas tentang proses implementasi karya Desain
Website Keyna Galeri dari proses perancangan yang dilakukan sebelumnya.
Implementasi karya ini meliputi 5 tahapan yaitu: Proses Desain Halaman Menu
Utama, Proses Desain Halaman Administrator Site, Proses Desain Halaman
Galeri Karya, Proses Penciptaan Sistem Website dan Finishing.
4.1 Proses Desain Halaman Menu Utama
Proses desain halaman Website merupakan tahapan penciptaan karya yang
pertama. Di sini dilakukan implementasi atau penciptaan karya dari rancangan
yang telah dibuat sebelumnya. Proses desain ini meliputi beberapa hal di
antaranya:
4.1.1 Desain Per Bagian Halaman Menu Utama
Penerapan desain halaman menu utama mengacu pada navigasi website
yang telah ditentukan dari bab sebelumnya. Dalam halaman menu utama terdapat
beberapa bagian di antaranya:
1. Bagian Header
Dalam bagian header ini ditempatkan logo keyna galeri, tulisan keyna galeri
dan alamatnya serta background coklat dengan tekstur bunga. Dipilihnya
tekstur bunga sebagai background adalah untuk pencitraan keyna galeri
STIKOM
sebagai galeri yang menghasilkan karya seni pahat dan batik dengan corak
bunga.
Gambar 4.1 Header Halaman Menu Utama
Tanggal dan penunjuk waktu pada gambar header di atas akan ter-update
otomatis selama website itu dibuka.
Penggunaan warna dalam header, yaitu:#af9274
2. Bagian Isi atau Tengah
a. Menu Statis
Dalam bagian menu statis digunakan tabel yang terdiri dari 1 colomn dan
1 rows. Tabel tersebut berisi tentang Menu Utama, Profil Keyna, Album
Karya, Agenda, Download dan Kontak seperti yang terlihat pada gambar
4.2.
Gambar 4.2 Menu Statis Halaman Menu Utama Penggunaan warna dalam menu statis, yaitu:#cccccc
Menu Statis ini berisikan navigasi primer.
b. Sub Menu
Dalam sub menu ini digunakan tabel yang terdiri dari 1 colomn serta
beberapa rows yang disesuaikan dengan berapa banyak menu yang ingin
ditampilkan. Tabel tersebut berisi tentang Berita Keyna, Peraturan,
STIKOM
Pariwisata, Seni & Budaya, Pendidikan, Olahraga, Lain-lain dan Artikel
seperti yang terlihat pada gambar 4.3.
Gambar 4.3 Sub Menu Halaman Menu Utama Penggunaan warna dalam sub menu, yaitu: #a60326
Sub menu berisikan katagori dari berita yang ada di Keyna Galeri yang
di-posting-kan oleh admin website.
c. Isi (Slideshow dan Accordion Tabs)
Dalam bagian isi digunakan tabel yang terdiri dari 1 colomn serta
beberapa rows yang disesuaikan dengan banyaknya katagori berita yang
ingin ditampilkan. Tabel tersebut berisi tentang Berita Utama, Isi Berita
[image:58.595.48.556.162.714.2]Keyna Galeri dan Direktori Keyna Galeri seperti yang terlihat pada
gambar 4.4.
STIKOM
Gambar 4.4 Isi Halaman Menu Utama (Slideshow dan Accordion Tabs) Penggunaan warna dalam isi, yaitu: #af9274
Isi berisikan berita terkini dan katagori berita serta berapa kali berita itu
dibaca. Di slideshow berita akan memberikan detail berita sesuai judul
yang dipilih.
STIKOM
d. Menu kanan
Dalam bagian menu kanan digunakan tabel yang terdiri dari 1 colomn
dan 12 rows. Tabel tersebut berisi tentang Pencarian, Social Media,
Agenda, Bank Data dan Polling seperti yang terlihat pada gambar 4.5.
Gambar 4.5 Menu Kanan Halaman Menu Utama Penggunaan warna dalam menu kanan, yaitu: #af9274
STIKOM
Menu kanan digunakan untuk memasang komponen-komponen yang
mendukung website agar terkesan lebih dinamis. Seperti search button,
social button, yahoo messenger, agenda, download dan polling.
e. Footer
Dalam bagian footer berisikan teks biasa yang berisikan copyright dari
website ini dengan background tribal seperti yang terlihat pada gambar
4.6.
Gambar 4.6 Footer Halaman Menu Utama Penggunaan warna dalam footer, yaitu: #af9274
4.1.2 Desain Utuh Halaman Menu Utama
Dalam halaman menu utama tidak banyak terdapat perbedaan
pengaplikasian desain dengan halaman utama dan statis. Halaman-halaman menu
lebih ditekankan sebagai halaman penjelasan dari setiap menu yang ada di website
seperti yang terlihat pada gambar 4.7.
STIKOM
Gambar 4.7 Tampilan Halaman Menu Utama 4.2 Proses Desain Halaman Administrator Site
Proses desain halaman administrator site dilakukan setelah proses desain
halaman menu utama website selesai. Proses desain ini meliputi beberapa hal di
antaranya:
4.2.1 Desain Halaman Login Admin
Dalam bagian halaman login ini ditempatkan logo keyna galeri, tulisan
keyna galeri dan alamatnya situsnya seperti yang terlihat pada gambar 4.8.
STIKOM
Gambar 4.8 Tampilan Halaman Login Admin
Di bagian tengah terdapat table yang terdiri dari 2 colomn dan 3 rows,
gunanya untuk memasukkan username dan password.
4.2.2 Desain Halaman Admin Panel
Pembuatan halaman admin panel ini terdiri atas 2 bagian, yaitu bagian menu
kiri dan bagian menu tengah. Pada bagian menu kiri diwakili oleh icon pada
[image:63.595.40.545.113.723.2]menu tengah seperti yang terlihat pada gambar 4.9.
Gambar 4.9 Tampilan Halaman Admin Panel
STIKOM
Halaman ini merupakan halaman utama bagi admin side. Fungsinya untuk
meng-update berita dan karya yang dibuat oleh Keyna Galeri.
4.3 Proses Desain Halaman Galeri Karya
Proses desain halaman galeri karya dilakukan setelah proses desain halaman
administrator site selesai. Proses desain ini meliputi beberapa hal di antaranya:
4.3.1 Desain Halaman Galeri Karya
Pada halaman ini karya yang ditampilkan sesuai dengan yang ada di Keyna
Galeri. Pada gambar di bawah dapat dilihat tiap karya ditampikan
memanjang sebanyak 5 karya. Selebihnya secara otomatis akan berada d
ibawah karya yang telah ada sebelumnya.
Gambar 4.10 Tampilan Halaman Galeri Karya
Halaman di atas dapat dikelompokkan berdasarkan jenis karyanya. Dengan
hanya membuat album galeri di admin site.
STIKOM
4.3.2 Desain Halaman Keterangan Karya
Pada halaman ini karya akan ditampilkan secara individu. Pada halaman ini
akan ditampilkan karya dengan ukuran lebih besar beserta informasi
mengenai karya tersebut.
Gambar 4.11 Tampilan Halaman Keterangan Karya
4.4 Finishing
Ini adalah fase terakhir dalam sebuah rancang bangun website, pada tahapan
ini adalah tahap publikasi atau extract file ke dalam sebuah winrar yang berformat
rar. Hal ini bertujuan agar animasi atau aplikasi interaktif dapat digunakan di
media komputer atau laptop, tanpa kendala perbedaan sistem operasi.
4.5 Publikasi Karya
Pada publikasi karya ini berisi media publikasi seperti poster, cover CD dan
sampul CD yang berisikan konsep juga sketsa dari media publikasi.
STIKOM
1. Poster Publikasi
Gambar 4.12 Poster Publikasi Keyna Galeri
Pada gambar 4.12 adalah poster website sebagai media publikasi, dengan
format cetak A1. Dengan tampilan yang disesuaikan dengan tampilan website
Keyna Galeri.
[image:66.595.226.556.142.385.2]2. Cover CD
Gambar 4.13 Cover CD
STIKOM
Pada gambar 4.13 merupakan desain cover CD dengan penataan yang
seimbang dan sederhana.
