116
117
118
MEMBANGUN FRONT END WEB MENGGUNAKAN FRAMEWORK BOOTSTRAP
A. Tujuan Pembelajaran
Melalui praktikum peserta diklat dapat menerapkan Framework Bootstrap dalam membangun front-end web application.
B. Indikator Pencapaian Kompetensi
Menerapkan Framework Bootstrap dalam membangun front-end web application.
C. Uraian Materi 1. Definisi Front-End Web
Front-End web adalah bagian utama dari sebuah web site yang berinteraksi langsung dengan pengguna atau pengunjung situs. Segala sesuatu yang
dilihat ketika melakukan navigasi dalam sebuah halaman web, baik dari font, warna, menu, dan segala yang menyangkut aspek desain yang nantinya
menjadi user interface dari aplikasi web adalah hasil penggabungan dari fungsi HTML, CSS, dan JavaScript dikontrol oleh browser pada komputer.
Front-end developer harus menguasai tiga bahasa utama: HTML, CSS, dan Javascript. Selain itu front-end developer juga harus terbiasa menggunakan
framework seperti Bootstrap, Foundation, Backbone, AngularJS, dan EmberJS untuk membantu membuat layout tetap sempurna ketika dibuka
menggunakan perangkat apapun, juga penggunakan library seperti jQuery dan LESS, sehingga proses pengembangan menjadi lebih mudah dan efisien.
2. Desain Web
Desain web merupakan bagian terpenting dalam pembangunan sebuah halaman web, dalam desain web yang baik, unsur estetika yang harus
deperhatikan adalah warna, tata letak, dan layout. Ketiga unsur tersebut dapat diatur menggunakan CSS, seperti mengatur warwa background, warna huruf,
bentuk menu, letak menu dan lain sebagainya. Dalam membangun sebuah
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.
Kategori