119 web yang bagus, ada beberapa prinsip-prinsip desain yang harus
diperhatikan: •
Proximity Prinsip, yang pertama ini berkaitan dengan kelengkapan
dari sebuah field. Ini menjadi hal yang wajib dimiliki website. Kelengkapan akan menentukan bagaimana tampilan website mampu
membuat pengunjung tertarik dan semakin nyaman berkunjung. •
Clarity , Layaknya sebuah toko konvensional, desain website juga
mengusung hal yang sama. Desain website sebaiknya mampu menyampaikan pesan yang tidak perlu disampaikan melalui kata-kata.
Clarity ini berarti sebuah website harus mempunyai kejelasan untuk apa website tersebut dibuat. Oleh karena itu, ada perbedaan khusus
antara toko online dengan website yang menyediakan berita. •
Alignment Prinsip, yang satu ini memang tidak berkaitan langsung
dengan desain website. Akan tetapi, pengaruh terhadap sebuah desain website sangat kuat. Alligment adalah kerapian dalam tulisan. Tulisan
yang rapi akan mampu menarik minat pengunjung sehingga diharapkan pengunjung betah membaca konten yang yang ada di
sebuah website. •
Contrast , Seperti awal tujuan pembuatan website, menarik menjadi
kunci utama. Dengan membuat desain website yang menarik, pengunjung akan merasa nyaman membaca serta menjelajah website.
Dalam hal ini, kenyamanan bisa ditunjukkan dengan menerapkan prinsip contrast. Ini berhubungan dengan kombinasi warna yang
dipakai oleh seorang desainer website. Inilah yang menjadi alasan kenapa pemilihan warna sangat penting dalam proses mendesain
sebuah website. •
Consistency , Ini adalah prinsip yang terakhir yang tak kalah penting
dengan empat prinsip sebelumya. Prinsip ini berarti sebuah website harus mengusung kesan konsisten dalam tema yang diangkat. Selain
membuat website menarik, consistency akan mempermudah pebisnis online dalam hal branding juga.
120
3. Bootstrap Web Framework
Bootstrap adalah sebuah framework HTML, CSS dan JavaScript yang menyediakan kumpulan komponen-komponen antarmuka dasar pada web
yang telah dirancang sedemikian rupa untuk digunakan bersama-sama. Selain komponen antarmuka, Bootstrap juga menyediakan sarana untuk
membangun layout halaman dengan mudah dan rapi, serta modifikasi pada tampilan dasar HTML untuk membuat seluruh halaman web yang
dikembangkan senada dengan komponen-komponen lainnya. Bootstrap dibuat untuk memberikan sekumpulan perangkat yang dapat digunakan
untuk membangun website sederhana dengan mudah.
4. Cara Menggunakan Bootstrap
Untuk menggunakan Boostrap pada aplikasi kita, tentunya kita harus memiliki Bootstrap terlebih dahulu. Buka website resmi Bootstrap,
http:getbootstrap.com dan klik tombol “Download Bootstrap” untuk
memulai download Bootstrap. Atau anda bisa meng-copy file bootstrap yang sudah disediakan dalam CD modul ini.
Selesai download, anda akan memiliki file
bootstrap.zip
yang berisi file- file yang dibutuhkan untuk menggunakan Bootstrap. Ekstrak file tersebut
sehingga sekarang kita memiliki file seperti berikut:
isi dari masing-masing direktori yaitu:
1.
Direktori “css” memiliki enam buah file di dalamnya, yaitu: •
bootstrap.css •
bootstrap.min.css •
bootstrap.min.css.map •
bootstrap-theme.css •
bootstrap-theme.css.map •
bootstrap-theme.min.css
2.
Direktori “fonts” memiliki lima buah file di dalamnya, yaitu:
121 •
glyphicons-halflings-regular.eot •
glyphicons-halflings-regular.svg •
glyphicons-halflings-regular.ttf •
glyphicons-halflings-regular.woff •
glyphicons-halflings-regular.woff2
3.
Direktori “js” memiliki tiga buah file di dalamnya, yaitu: •
bootstrap.js •
bootstrap.min.js •
npm.js
D. Aktifitas Pembelajaran 1. Mendesain Halaman Home, Caruosel dan Menu
Buat folder dalam derektori C:\xampp\htdocs dengan nama topik4-1, copy file bootstrap.rar yang ada dalam CD kedalam forder topik4-1 dan ektrak file,
copy juga folder image dan style yang ada dalam CD paste satu folder dengan
file bootstap. Sehinga diperoleh file seperti gambar dibawah ini didalam folder topik4-1.
kemudian tulis kode dibawah ini dan simpan dengan nama home.html dan dalam folder topik4-1 yang telah anda buat tadi. Lalu akses jalankan melalui
browser
C:xampphtdocstopik4-1home.html
1 2
3 4
5 DOCTYPE html
html lang
= en
head title
Nama Proyek title
meta charset
= utf-8
