TA : Rancang Bangun Website Keyna Galeri Dengan Menggunakan Bahasa Pemrograman HTML5.

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: hanzo_warlord@yahoo.com}

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 : karsam@stikom.edu atau karsam_sri@yahoo.com

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

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.

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 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 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.

2. Cover CD

Gambar 4.13 Cover CD

STIKOM

Pada gambar 4.13 merupakan desain cover CD dengan penataan yang seimbang dan sederhana.

3. Sampul CD

Gambar 4.14 Sampul CD

Pada gambar 4.14 merupakan sampul untuk melindungi CD dengan komposisi yang menyesuaikan dengan poster sehingga informasi dari poster juga dapat tersampaikan pada sampul CD ini.

STIKOM

63 5.1 Kesimpulan

Dari penelitian yang dilakukan dapat disimpulkan bahwa:

1. Pembuatan website Keyna Galeri dengan menggunakan bahasa pemrograman HTML5 mampu memberikan informasi kegiatan workshop dan karya seni yang ada di Keyna Galeri. Dengan penggunaan bahasa pemrograman HTML5 dapat mempermudah search engine dalam mengidentifikasi website Keyna Galeri sehingga mempermudah masyarakat dalam mencari website Keyna galeri melalui search engine.

2. Membuat website Keyna Galeri dengan menggunakan bahasa pemrograman HTML5 cukup mudah untuk dilakukan. Adapun caranya adalah sebagai berikut:

a. Buka aplikasi web design Adobe Dreamweaver CS3. b. Setelah itu pilih option “Create New” .

c. Lalu pilih lagi option di bawahnya “HTML”.

d. Setelah halaman baru telah dibuat, klik tabs di pojok kiri atas, yaitu pada pilihan “Show Code View”.

e. Pada 2 baris teratas pada halaman HTML akan terlihat code sebagai berikut:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

STIKOM

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"> f. Hapus code di atas dan ganti dengan code sebagai berikut:

<!DOCTYPE HTML>

g. Terakhir, save halaman HTML5 di atas.

5.2 Saran

Ke depannya dalam pembuatan website dengan bahasa pemrograman HTML5 hendaknya dibuat lebih interaktif. Di mana dalam website itu terdapat fitur post comment yang memungkinkan pengunjung website untuk memberikan komentar dan atau masukan terhadap website tersebut. Sehingga fungsi website tidak hanya sebagai media promosi tapi dapat juga berfungsi sebagai media untuk mengeluarkan aspirasi dan inspirasi. Selain itu, dipikirkan pula sebuah konsep promosi yang unik agar website menjadi lebih dikenal oleh masyarakat luas. Diharapkan untuk pengembang bahasa pemrograman HTML5 lebih memperhatikan perkembangan fitur bahasa pemrograman HTML5 agar tidak ketinggalan dengan kemajuan dunia maya. Kunci dari pembuatan bahasa pemrograman HTML5 ini adalah teliti dan tekun dalam mencari informasi yang berhubungan dengan HTML5.

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

60

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.

2. Cover CD

Gambar 4.13 Cover CD

STIKOM

62

Pada gambar 4.13 merupakan desain cover CD dengan penataan yang seimbang dan sederhana.

3. Sampul CD

Gambar 4.14 Sampul CD

Pada gambar 4.14 merupakan sampul untuk melindungi CD dengan komposisi yang menyesuaikan dengan poster sehingga informasi dari poster juga dapat tersampaikan pada sampul CD ini.

STIKOM

63 5.1 Kesimpulan

Dari penelitian yang dilakukan dapat disimpulkan bahwa:

1. Pembuatan website Keyna Galeri dengan menggunakan bahasa pemrograman HTML5 mampu memberikan informasi kegiatan workshop dan karya seni yang ada di Keyna Galeri. Dengan penggunaan bahasa pemrograman HTML5 dapat mempermudah search engine dalam mengidentifikasi website Keyna Galeri sehingga mempermudah masyarakat dalam mencari website Keyna galeri melalui search engine.

2. Membuat website Keyna Galeri dengan menggunakan bahasa pemrograman HTML5 cukup mudah untuk dilakukan. Adapun caranya adalah sebagai berikut:

a. Buka aplikasi web design Adobe Dreamweaver CS3. b. Setelah itu pilih option “Create New” .

c. Lalu pilih lagi option di bawahnya “HTML”.

d. Setelah halaman baru telah dibuat, klik tabs di pojok kiri atas, yaitu pada pilihan “Show Code View”.

e. Pada 2 baris teratas pada halaman HTML akan terlihat code sebagai berikut:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0

Transitional//EN"

STIKOM

64

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml"> f. Hapus code di atas dan ganti dengan code sebagai berikut:

<!DOCTYPE HTML>

g. Terakhir, save halaman HTML5 di atas.

5.2 Saran

Ke depannya dalam pembuatan website dengan bahasa pemrograman HTML5 hendaknya dibuat lebih interaktif. Di mana dalam website itu terdapat fitur post comment yang memungkinkan pengunjung website untuk memberikan komentar dan atau masukan terhadap website tersebut. Sehingga fungsi website tidak hanya sebagai media promosi tapi dapat juga berfungsi sebagai media untuk mengeluarkan aspirasi dan inspirasi. Selain itu, dipikirkan pula sebuah konsep promosi yang unik agar website menjadi lebih dikenal oleh masyarakat luas. Diharapkan untuk pengembang bahasa pemrograman HTML5 lebih memperhatikan perkembangan fitur bahasa pemrograman HTML5 agar tidak ketinggalan dengan kemajuan dunia maya. Kunci dari pembuatan bahasa pemrograman HTML5 ini adalah teliti dan tekun dalam mencari informasi yang berhubungan dengan HTML5.

STIKOM