[PWEB-8] ETS
1. Jelaskan apa yang dimaksud dengan web responsive? Bagaimana cara membangunnya?
Secara sederhana, website responsive adalah sebutan untuk website yang dapat menyesuaikan layout pada tampilan dengan setiap device menggunakan ukuran berbeda ketika mengaksesnya. Lebih lengkapnya, website responsive adalah teknik atau metode bagi pengembang website, untuk membuat layout website dapat menyesuaikan dengan berbagai device yang memiliki ukuran layar berbeda-beda. Penyesuaian website responsive adalah proses yang melibatkan ukuran huruf, user interface, gambar, serta layout yang bisa tampil dengan ukuran layar dan resolusi device yang digunakan oleh pengguna. Oleh karena itu, website responsive dapat meningkatkan kenyamanan pengguna ketika mengakses suatu website. Perlu diketahui, terdapat beberapa kelebihan dari website responsive, di antaranya yaitu:
- Mudah Diakses Oleh Berbagai Device dengan Ukuran Berbeda
- Menghemat Anggaran
- Mudah dalam Maintenance Website
- Halaman Website Mudah Diakses
Nah, untuk membuat website responsive, kita bisa mengikuti cara membuat website responsive di bawah ini.
- Definisikan Meta Tag
Saat mengatur website agar responsive pada mobile browser, biasanya kamu harus mengatur skala halaman HTML yang disesuaikan dengan lebar viewport. Untuk melakukannya, kamu perlu menggunakan meta tag viewport. Tag ini berfungsi untuk menginformasikan browser agar menonaktifkan skala awal. Kamu bisa menggunakan meta tag di bawah ini:
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
Kamu juga membutuhkan bantuan dari media-queries.js atau respond.js agar bisa responsif untuk browser internet explorer versi 8 atau lebih rendah. Gunakan tag seperti di bawah ini:
<!–[if lt IE 9]> <script src=”http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js”></script> <![endif]–>- Tentukan Struktur HTML Website
Struktur HTML biasanya terdiri dari header, content, sidebar dan juga footer. Header biasanya bisa diatur dengan ukuran lebar dan tinggi sesuai kebutuhan.
- Membuat Media Query di CSS
Cara ini berfungsi untuk memerintahkan browser, kamu bisa menggunakan CSS3. CSS3 ini juga sudah canggih dan menggunakan kondisi (IF) seperti bahasa pemrograman PHP dan JS. Cara kerjanya adalah CSS code akan memberitahu browser ketika lebar layar 960px, untuk menjalankan script dan mengatur lebar sesuai script. Biasanya sebelum diatur, lebar wrapper adalah 965 dari lebar layar, sedangkan konten membutuhkan ukuran lebar 66%, dan sidebar menjadi 30%.
Kamu bisa menggunakan kode di bawah ini:
@media screen and (max-width: 680px)(
#maincontent{
width: auto;
float: none;
}
#sidebar{
width: auto;
float: none;
}
}
Kemudian, jika ingin mengatur layar menjadi 480px atau lebih rendah, kamu bisa menyembunyikan sidebar dan atur tinggi header menjadi auto. Kamu bisa menggunakan kode di bawah ini:
@media screen and (max-width: 480px) { #header{ height: auto; } #sidebar{ display: none; } }
2. Buatlah screenshot dari aplikasi yang telah dikerjakan, kemudian buat link ke tugas source codenya.
.jpeg)
3. Sebuah perusahaan ingin membuat aplikasi web untuk portal berita. Fungsi aplikasi untuk display berita terbaru, pengelompokan kategori, lowongan pekerjaan, informasi iklan atau event kegiatan. Selain itu tersedia juga form untuk pembaca memasukkan artikel atau opini yang ingin dimuat di portal berita. Desainkan front end website portal berita.
4. Implementasikan desainmu dan buat dokumentasi.
Source code: GitHub
5. Presentasikan dalam video youtube, dan diembedded ke dalam blog dokumentasi.
Komentar
Posting Komentar