Modul Praktikum Web
Membuat Website Sederhana dengan Responsive Web Design
Nur Alamsyah M Kom
FAKULTAS TEKNOLOGI INFORMASI UNIVERSITAS ISLAM KALIMANTAN (UNISKA) MUHAMMAD ARSYAD ALBANJARY BANJARMASIN 2015
DAFTAR ISI
Halaman Modul Praktikum Web.............................................................................................................i DAFTAR ISI............................................................................................................................ ii DAFTAR GAMBAR .............................................................................................................. iii BAB I MENGENAL RESPONSIVE WEB DESIGN ........................................................... 1 1.1 Apa Itu Responsive Web ................................................................................................. 1 1.2 Perbedaan Desain Web Static, liquid, Adaptive dan Responsive .................................... 6 1.3 Framework untuk Responsive Web Design ................................................................... 10 BAB II MENDESAIN WEB DENGAN BOOTSTRAP ..................................................... 12 2.1 Apa itu Bootstrap ? ........................................................................................................ 12 2.2 Fitur Bootstrap ............................................................................................................... 12 2.3 Komponen Bootstrap ..................................................................................................... 13 2.3.1 CSS Component ...................................................................................................... 13 2.3.2 Base Component ..................................................................................................... 16 2.3.3 Javascript Component ............................................................................................. 21 BAB III DESAIN SEDERHANA HALAMAN WEB DENGAN BOOTSTRAP ............. 24 3.1 Tools Yang digunakan ................................................................................................... 24 3.2 Cara menggunakan Bootstrap ........................................................................................ 24 3.3 Membuat Menu Dropdwon ............................................................................................ 26 3.4 Membuat Bagian Banner Halaman ................................................................................ 28 3.5 Membuat Bagian Konten Halaman Web ....................................................................... 29 DAFTARPUSTAKA .............................................................................................................. 30
ii
DAFTAR GAMBAR
Gambar 1. 1 Beberapa ukuran layar yang ada (sumber gambar: http://line25.com) ................. 2 Gambar 1. 2 Tampilan Website Okezone .................................................................................. 3 Gambar 1. 3 Tampilan Website stephencaver ........................................................................... 4 Gambar 1. 4 Tampilan Website Teixido .................................................................................... 5 Gambar 1. 5 Tampilan Website cognition ................................................................................. 5 Gambar 1. 6 Desain web antar device ....................................................................................... 6 Gambar 1. 7 Web Responsive Design ....................................................................................... 9 Gambar 1. 8 Halaman Dokumentasi bootstrap ........................................................................ 10 Gambar 1. 9 Framework Foundation ....................................................................................... 10 Gambar 1. 10 Framework Metro UI ........................................................................................ 11 Gambar 2. 1 Browser Support ................................................................................................. 12 Gambar 2. 2 Grid System......................................................................................................... 13 Gambar 2. 3 Typography ......................................................................................................... 14 Gambar 2. 4 Tables .................................................................................................................. 14 Gambar 2. 5 Forms .................................................................................................................. 15 Gambar 2. 6 Buttons ................................................................................................................ 15 Gambar 2. 7 Images ................................................................................................................. 16 Gambar 2. 8 Glyphicons .......................................................................................................... 16 Gambar 2. 9 Dropdown............................................................................................................ 17 Gambar 2. 10 Navbar ............................................................................................................... 17 Gambar 2. 11 Pagination.......................................................................................................... 18 Gambar 2. 12 Jumbotron.......................................................................................................... 18 Gambar 2. 13 Thumbnails........................................................................................................ 19 Gambar 2. 14 Alerts ................................................................................................................. 19 Gambar 2. 15 Progress Bar ...................................................................................................... 20 iii
Gambar 2. 16 List Group ......................................................................................................... 20 Gambar 2. 17 Panels ................................................................................................................ 20 Gambar 2. 18 Modal ................................................................................................................ 21 Gambar 2. 19 Tab .................................................................................................................... 21 Gambar 2. 20 Tooltip ............................................................................................................... 22 Gambar 2. 21 Popover ............................................................................................................. 22 Gambar 2. 22 Alert .................................................................................................................. 22 Gambar 2. 23 Collapse ............................................................................................................. 23 Gambar 2. 24 Corousel ............................................................................................................ 23 Gambar 3. 1 Folder Praktikum................................................................................................. 24 Gambar 3. 2 Folder js............................................................................................................... 25 Gambar 3. 3 Menu ................................................................................................................... 27 Gambar 3. 4 Menu Dropdown ................................................................................................. 27 Gambar 3. 5 Banner Halaman .................................................................................................. 28 Gambar 3. 6 Hasil Akhir Halaman Web Sederhana yang Responsive .................................... 29
iv
BAB I MENGENAL RESPONSIVE WEB DESIGN 1.1 Apa Itu Responsive Web Mungkin kita sudah tidak asing lagi dengan halaman web seperti facebook.com, twitter.com, detik.com dan sebagainya. Jika kita mengunjungi halaman – halaman tersebut menggunakan perangkat mobile, maka kita akan didirect (dialihkan) menuju halaman web versi mobile mereka (m.facebook.com, m.twitter.com, m.detik.com, dst) yang terpisah dengan halaman fullsitenya (halaman versi desktop). (Mulhim, 2014) Dari hal tersebut, sebagai seorang web programmer, maka kita harus membuat dua buah tampilan website untuk versi fullsite dan mobile. Itu artinya kita harus kerja ekstra, bagi pemilik website maka ini bearti biaya ekstra yang harus dikeluarkan, belum lagi kerepotan dalam mengupdate konten dan maintenance website yang harus dilakukan pada kedua versi website(fullsite dan mobile). Dengan berkembangnya teknologi, khususnya dalam pemrograman web, maka muncul sebuah gagasan baru yaitu bagaimana caranya membuat sebuah halaman web yang dapat menyesuaikan tampilannya/ layoutnya secara otomatis dengan ukuran layar perangkat ataupun jendela web browser. Ketika ukuran layar perangkat kecil atau jendela web browser dikecilkan beberapa elemen web akan menyesuaikan baik dari segi ukuran maupun posisi, misal pada menu navigasi yang berada diatas dan sidebar yang berada disebelah kanan akan berpindah kebawah. Lalu gambar-gambar akan ikut mengecil seiring mengecilnya layar perangkat ataupun jendela web browser. Hal demikian diartikan bahwa halaman web tersebut sudah menerapkan teknik Responsive Web Design (RWD). Responsive Web Design (RWD) semakin popular sekitar pertengahan 2010 lalu, ini berawal dari sebuah artikel Desain Web Responsif yang ditulis oleh Ethan Marcotte pada website alistapart.com. Pada artikel tersebut mengusulkan bagaimana sebuah desain web bisa menyesuaikan sendiri baik dari segi ukuran maupun komponen website pada perangkat mobile dan Desktop secara fleksibel tanpa harus membuat desain yang berbeda untuk perangkat berbeda dengan konten isinya sama. Dari situ maka lahirlah sebuah konsep Responsive Web Design yang lebih fleksibel dan bisa beradaptasi hampir disemua layar berbeda. Anda dapat membacanya dengan mengunjungi halaman http://alistapart.com/article/responsive-webdesign/ (Marcotte, 2010) 1
2 Pengertian Responsive Web Design menurut http://www.wikipedia.org/ yang dalam bahasa indonesianya: “Responsive Web Desain adalah sebuah desain web/situs yang dibuat untuk memberikan pengalaman menjelajah web secara optimal, mudah dibaca dan bernavigasi, dengan minimum resizing, panning dan scrolling diberbagai perangkat (desktop dan mobile).” Secara sederhana teknik Responsive Web Design adalah membuat website dapat dibuka melalui media apa saja baik desktop maupun mobile tanpa kehilangan konten atau isi dari website tersebut dan tetap mudah dalam hal navigasi dan membaca isi dari web tersebut.
Gambar 1. 1 Beberapa ukuran layar yang ada (sumber gambar: http://line25.com)
Responsive Web Design sangat popular ditahun 2013 dan bisa dipastikan terus berlanjut, mengingat semakin banyak orang yang mengakses internet menggunakan perangkat mobile yang memiliki ukuran layar serta resolusi yang berbeda satu sama lain. Berikut ini adalah gambaran seperti apa sebuah website yang menerapkan teknik Responsive Web Design.
3 1. http://www.okezone.com/ Desktop (Widescreen)
Tablet (Potrait)
Smartphone (Potrait)
Gambar 1. 2 Tampilan Website Okezone
4 2. http://stephencaver.com/ Desktop (Widescreen)
Tablet (Potrait)
Smartphone (Potrait)
Gambar 1. 3 Tampilan Website stephencaver
5 3. http://teixido.co/
Gambar 1. 4 Tampilan Website Teixido
4. http://cognition.happycog.com/
Gambar 1. 5 Tampilan Website cognition
6
Dan masih banyak website lainnya yang menggunakan Responsive Web Design seperti: http://seesparkbox.com/ http://foodsense.is/ http://www.bostonglobe.com/ http://teegallery.com/ http://www.about.com/ https://yiibu.com/ 1.2 Perbedaan Desain Web Static, liquid, Adaptive dan Responsive Membuat sebuah desain web yang baik dan menarik harus menjadi prioritas mutlak. Terlebih lagi dengan perkembangan sekarang, desainer web dituntut agar dapat membuat desain web yang dapat berjalan diberbagai perangkat dan web browser.
Gambar 1. 6 Desain web antar device
Mari sejenak kita memperhatikan apa sih sebenarnya perbedaan diantara desain web static, liquid, adaptive dan responsive ? Mana yang harus dipilih seandainya saya akan mendesain sebuah web ? Cobalah untuk me-resize (mengecilkan & membesarkan) tampilan web browser agar Anda dapat melihat perbedaan setiap desainnya. http://www.liquidapsive.com/
7
1. Desain Web Static Desain web static (statis) atau juga disebut fixed merupakan teknik desain web tradisional. Desain web ini memiliki desain yang sama di semua perangkat baik di desktop, ponsel ataupun tablet. Umumnya ketika proses pembuatan desain, desainer akan fokus pada 1 perangkat (resolusi saja) misal 1024 px. Ketika membuka desain web ini di perangkat dengan resolusi yang kecil seperti ponsel misalnya, maka Anda membutuhkan scroll horizontal untuk dapat melihat keseluruhan desain web. Kelebihan : -
Ketika proses pembuatan, waktu yang dibutuhkan lebih cepat dan biasanya juga lebih murah
-
Dalam proses desain, persiapan dan kebutuhan yang diperlukan sangat kecil
Kekurangan : -
Pengunjung akan memiliki kesan yang buruk, terlebih jika mereka menggunakan perangkat dengan resolusi yang kecil (ponsel)
-
Tidak memiliki desain optional pada ukuran layar yang berbeda
-
Harus membuat situs terpisah untuk pengguna ponsel
2. Desain Web Liquid Desain web liquid (atau fluid) merupakan desain web yang menggunakan perhitungan persentase (%) dalam implementasinya. Desain ini bisa dikatakan “sedikit lebih baik” dibandingkan desain web static terlebih untuk membuatnya juga sangat mudah. Namun perlu diingat, hampir bisa dipastikan jika web ini dibuka diperangkat ponsel akan terlihat sangat buruk. Kelebihan : -
Lebih fleksibel dari desain web static
-
Baik digunakan untuk target pengunjung yang menggunakan perangkat komputer desktop
8 Kekurangan : -
Hasil desain web akan terlihat buruk di layar perangkat ponsel dan tablet yang kecil
-
Tampilan konten web terlihat tidak konsisten
3. Desain Web Adaptive Desain web adaptive merupakan desain web yang memiliki layout yang berbeda untuk resolusi yang berbeda. Desain web ini dibuat dengan target resolusi tertentu misal untuk perangkat ponsel, tablet dan desktop. Teknik desain web adaptive bisa dikatakan hampir sama dengan teknik desain web static, dimana desain web dibuat dengan teknik static namun memiliki beragam desain untuk perangkat tertentu. Kelebihan : -
Desain web tersedia pada perangkat tertentu
-
Lebih memanjakan pengunjung karena desain web tersedia dalam beberapa perangkat
Kekurangan : -
Dibutuhkan waktu yang relatif lama dalam proses pembuatannya.
-
Desain web hanya ter-target pada perangkat tertentu, sehingga akan terlihat tidak optimal pada perangkat dengan resolusi yang unik
4. Desain Web Responsive Desain web responsive ialah gabungan 2 desain web utama yaitu desain web liquid dan responsive. Desain web responsive ialah pilihan desain web terbaik untuk saat ini. Dengan desain web responsive, secara otomatis tampilan konten akan menyesuaikan diri (beradaptasi) dengan berbagai resolusi perangkat. Perlu diingat, desain web responsive tidak dibuat hanya untuk resolusi tertentu melainkan desain dapat menyesuaikan diri pada berbagai perangkat dan resolusi.
9 Kelebihan : -
Sangat baik, dikarenakan desain web tersedia untuk semua perangkat & resolusi
-
Pengelolaan web akan sangat mudah terutama dalam hal desain
Kekurangan : -
Membutuhkan perencanaan dan persiapan yang lebih (matang) pada tahap desain
-
Membutuhkan waktu yang lama dalam proses pembuatannya
Kesimpulan Dengan mengetahui perbedaan, kelebihan serta kekurangan setiap desain, nantinya Anda dapat menentukan pilihan mana yang terbaik sesuai dengan kebutuhan. Pemilihan desain yang tepat akan sangat berbengaruh ketika proses pembuatan dan pengembangan sebuah desain web nantinya. Dengan harapan, setiap desain yang dihasilkan dapat memberikan kemudahan serta nilai lebih kepada pengunjung.
Gambar 1. 7 Web Responsive Design
10 1.3 Framework untuk Responsive Web Design Jika kita ingin membuat sebuah desain web yang responsive dengan cara yang cepat dan instant tanpa direpotkan menulis code dari awal, maka diperlukan kerangka kerja (framework) yang dapat digunakan untuk proyek desain web responsive diantaranya:
1. Bootstrap Bootstrap adalah salah satu framework untuk mengembangkan website dengan tampilan yang responsive secara cepat dan mudah tanpa perlu membuat code yang rumit dan panjang. Bootstrap juga dikenal dengan Twitter Bootstrap bisa diunduh di http://getbootstrap.com/
Gambar 1. 8 Halaman Dokumentasi bootstrap
2. Foundation Selain menggunakan Bootstrap, ada alternative lain sebagai pilihan dalam mendesain web responsive secara cepat yaitu foundation, dengan menggunakan framework ini kita dapat dengan mudah membuat website dengan kerangka yang sudah disediakan dan konsisten diberbagai browser. Bisa diunduh di http://foundation.zurb.com/develop/download.html
Gambar 1. 9 Framework Foundation
11
3. Metro UI Metro UI merupakan sebuah framework untuk mendesain tampilan web yang responsive secara cepat dan mudah. Metro UI mempunyai tampilan seperti Windows 8. Bisa diunduh di http://metroui.org.ua/
Gambar 1. 10 Framework Metro UI
BAB II MENDESAIN WEB DENGAN BOOTSTRAP
2.1 Apa itu Bootstrap ? Bootstrap merupakan sebuah framework yang dikembangkan oleh tim Twitter yang berfungsi sebagai kerangka kerja untuk memudahkan dan mempercepat dalam membuat tampilan website yang responsive dan terstandar. Bootstrap menyediakan komponen-komponen antarmuka siap pakai yang telah dirancang sedemikian rupa untuk digunakan dalam membuat tampilan halaman website responsive. Bootstrap juga menyediakan sarana untuk membuat layout halaman web dengan mudah dan rapi yaitu menggunakan grid system 12 kolom. Bootstrap dibangun dengan teknologi HTML, CSS dan Javascript yang dapat membuat layout halaman website, table, tombol, form, navigasi, dan komponen lainnya dalam sebuah website hanya dengan memanggil fungsi class dalam berkas HTML. 2.2 Fitur Bootstrap Bootstrap sudah mendukung kompatibilitas untuk hamper semua browser terbaru saat ini. Sejak versi 2.0 bootstrap juga sudah mendukung untuk desain responsive, ini berarti tata letak komponen dalam halaman web dapat menyesuaikan secara dinamis dengan mempertimbangkan karakteristik dari perangkat yang digunakan (desktop maupun mobile) untuk informasi kompatibilitas browser yang didukung oleh bootstrap dapat dilihat pada gambar 2.1 berikut ini
Gambar 2. 1 Browser Support
12
13
2.3 Komponen Bootstrap Bootstrap memiliki banyak komponen-komponen yang dapat digunakan dalam membuat sebuah tampilan halaman web yang responsive. Bootstrap memiliki 3 jenis komponen, yaitu CSS Component, Base Component dan Javascript Component. 2.3.1 CSS Component Terdapat beberapa komponen diantaranya:
Grid System Grid System menggunakan system grid 12 kolom yang akan memudahkan dalam melayout sebuah halaman web, berikut contoh grid system bootstrap.
Gambar 2. 2 Grid System
Typography Typography akan membuat tampilan teks pada halaman web menjadi rapi, mudah dibaca, dan nyaman dilihat dengan menggunakan font dan ukuran huruf tertentu
14
Gambar 2. 3 Typography
Tables Tampilan komponen Tabel yang memiliki style menarik sehingga data yang ditampilkan lebih rapi.
Gambar 2. 4 Tables
15
Forms Untuk membuat formulir inputan pada halaman web.
Gambar 2. 5 Forms
Buttons Komponen buttons yang disediakan memiliki banyak tema warna yang menarik.
Gambar 2. 6 Buttons
16
Images Komponen images dapat disesuaikan dengan beberapa jenis style
Gambar 2. 7 Images
2.3.2 Base Component Membuat tampilan halaman website tampak menarik dengan tampilan yang khas ala twitter. Komponen-komponen tersebut antara lain adalah sebagai berikut:
Glyphicons Icon-icon yang dapat digunakan untuk mempercantik tampilan
Gambar 2. 8 Glyphicons
17
Dropdown Dengan komponen Dropdown yang disediakan akan memudahkan jika ingin membuat sebuah menu dropdown.
Gambar 2. 9 Dropdown
Navbar Navbar merupakan salah satu komponen yang dapat digunakan sebagai header navigasi pada halaman web.
Gambar 2. 10 Navbar
18
Pagination Tampilan navigasi halaman yang sederhana.
Gambar 2. 11 Pagination
Jumbotron Sebuah komponen yang ringan, fleksibel yang dapat digunakan untuk menampilkan content penting dari website.
Gambar 2. 12 Jumbotron
19
Thumbnails Thumbnails Bootstrap dirancang untuk menampilkan gambar yang terkait dengan link.
Gambar 2. 13 Thumbnails
Alerts Komponen Alerts dirancang untuk menampilkan tanda atau peringatan tertentu pada halaman web dengan banyak pilihan tema warna.
Gambar 2. 14 Alerts
20
Progress Bar Komponen Progress Bar dapat digunakan untuk menampilkan kemajuan proses secara up to date
Gambar 2. 15 Progress Bar
List Group List Group merupakan komponen yang fleksibel untuk menampilkan daftar dengan konten yang dapat disesuaikan.
Gambar 2. 16 List Group
Panels Panels untuk menampilkan daya atau konten tertentu dalam sebuah kotak.
Gambar 2. 17 Panels
21
2.3.3 Javascript Component Tampilan dengan efek-efek dan animasi yang sangat menarik, berikut beberapa komponen javascript Bootsatrap
Modal Menampilkan dialog propmpt
Gambar 2. 18 Modal
Tabs Menampilkan konten web dalam beberapa tab
Gambar 2. 19 Tab
22
Tooltip Menampilkan informasi tambahan pada elemen tertentu misal pada sebuah teks
Gambar 2. 20 Tooltip
Popover Menampilkan informasi tambahan dengan menampilkan popup
Gambar 2. 21 Popover
Alert Untuk menampilkan pesan kesalahan
Gambar 2. 22 Alert
23
Collapse Memiliki tampilan yang fleksibel, content didalamnya dapat dibuka dan ditutup
Gambar 2. 23 Collapse
Carousel Untuk menampilkan slideshow image atau gambar yang dapat berjalan otomatis
Gambar 2. 24 Corousel
BAB III DESAIN SEDERHANA HALAMAN WEB DENGAN BOOTSTRAP 3.1 Tools Yang digunakan 1. File Bootstrap ( bisa diunduh di http://getbootstrap.com/ ). 2. jQuery (bisa diunduh di http://jquery.com/ ) dan cara menggunakannya bisa lihat di http://www.ilmugrafis.com/web-jquery.php?page=caramenggunakan-jquery (Johan, 2013) 3. Text Editor Silahkan gunakan text editor yang disukai seperti: -
Notepad
-
Notepad++ ( https://notepad-plus-plus.org/ )
-
Sublime Text ( http://www.sublimetext.com/ )
-
Adobe Dreamweaver (versi Terserah aja)
3.2 Cara menggunakan Bootstrap Pertama, download http://getbootstrap.com/ (saya menggunakan versi 3.3.4) buat folder (nama terserah, misal praktikum). Ekstrak zip bootstrap, copy semua folder (css, img, js) ke dalam folder praktikum. lalu buat file dengan nama index.html .
Gambar 3. 1 Folder Praktikum
24
25
Kedua, download jQuery di http://jquery.com/download/ dan letakkan file nya di folder js seperti dibawah ini:
Gambar 3. 2 Folder js
Ketiga, isi file index.html jangan lupa untuk menambahkan !DOCTYPE di awal karena kita akan menggunakan HTML5
Tambahkan seperti dibawah ini:
26
Penjelasan: 1. meta name="viewport" umumnya digunakan untuk mengatur tampilan browser pada mobile device dan tablet. 2. Pada tag content="width=device-width untuk mengatur lebar tampilan awal browser disesuaikan dengan lebar layar mobile device. 3. Pada tag initial-scale=1.0 untuk mengatur level zoom dari tampilan pada saat ditampilkan. Semakin besar nilai scale nya semakin besar tampilannya.
3.3 Membuat Menu Dropdwon Tambahkan link ke file bootstrap.css di folder css dalam tag dan include javascript files di paling akhir dari tag , jangan di atas. 1
3
2
27
Gambar 3. 3 Menu
Kalau dikecilkan layarnya maka menjadi seperti ini:
Gambar 3. 4 Menu Dropdown
28
3.4 Membuat Bagian Banner Halaman Tambahkan Coding berikut:
Kemudian tambahkan css di head
Kemudian untuk merapikan tampilannya ubah navbar-static-top menjadi navbarfixed-top
Gambar 3. 5 Banner Halaman
29
3.5 Membuat Bagian Konten Halaman Web Untuk membuat konten halaman atau isi halaman web silahkan ketikkan coding berikut:
untuk bagian Footer, silahkan ketikkan coding berikut:
Gambar 3. 6 Hasil Akhir Halaman Web Sederhana yang Responsive
DAFTAR PUSTAKA Johan. (2013, Maret 19). Cara Menggunakan jquery. Retrieved from http://www.ilmugrafis.com/web-jquery.php?page=cara-menggunakanjquery Marcotte, E. (2010, Mei 2010). Responsive Web Design . Retrieved from http://alistapart.com/article/responsive-web-design/ Mulhim, I. (2014). Desain Web untuk Desktop dan Mobile dengan Responsive Web Design. Palembang: maxikom.
30
