KUIS ETS

October 18, 2023

Pertanyaan

1. Jelaskan apa yang dimaksud dengan web responsive? Bagaimana cara membangunnya?

2. Buatlah screenshot dari aplikasi yang telah dikerjakan, kemudian buat link ke tugas source codenya.

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

4. Implementasikan desainmu dan buat dokumentasi.

5. Presentasikan dalam video youtube, dan diembedded ke dalam blog dokumentasi.

Jawaban

1. Website responsive adalah sebuah teknik untuk membuat layout dapat secara otomatis apat menyesuaikan diri sesuai dengan dengan berbagai device ukuran layar pengguna, baik mobile maupun komputer meja. Penyesuaian website responsive ini melibatkan ukuran huruf, user interface, gambar, serta layout yang bisa tampil dengan ukuran layar dan resolusi device yang digunakan oleh pengguna.

Kita dapat membuat web responsive dengan mengikut cara berikut :

1. Set the Viewport Untuk Desain Responsive

Viewport merupakan area yang dapat dilihat oleh pengguna kita pada halaman website. Ukuran viewport bervariasi berdasarkan peranti. Namun, biasanya mobile browser akan mengatur skala halaman html sesuai lebar viewport agar dapat tampil di layar mobile. Kita bisa menggunakan tag meta viewport untuk mereset ulang ini. Tag viewport sendiri digunakan untuk memberitahu browser agar menonaktifkan skala awal.

2. Typography Units

Dalam penerapan font, kita juga perlu menggunakan satuan relatif seperti em, rem, vw dan vh. Satuan tersebut dapat menyesuaikan ketika ukuran layar atau ukuran font itu sendiri diubah.

2. Ukuran Relatif Unit

Dalam pembuatan tampilan yang responsive, lebar suatu elemen web tidak menggunakan satuan tetap seperti px-piksel tetapi dengan persentase (%).

4. Set the Breakpoint untuk membuat Media Query di CSS dalam memerintahkan Browser

Dengan menetapkan sebuah breakpoint kita dapat mengatur sebuah styling element berdasarkan viewport. Maka dengan begitu konten yang kita tampilkan pada halaman dapat disesuaikan dengan berbagai peranti, baik itu tata letak ataupun ukuran font. Breakpoint dituliskan dalam styling atau CSS menggunakan @media query dan diikuti dengan ukuran viewport. Namun, disini CSS hanya memberikan kondisi bagaimana browser harus melakukan rendering halaman untuk viewport yang telah di atur lebarnya dan sebaiknya jangan menetapkan sebuah breakpoint berdasarkan kelas perangkat karena akan menyulitkan maintenance

5. Grid System

Grid system di CSS biasanya menyediakan sistem tata-letak yang membagi layar menjadi maksimal 12 kolom. Pembagian layar hampir menyerupai sebuah tabel normal, akan tetapi jumlah kolom dan baris dapat berubah secara dinamis mengikuti lebar layar peranti. Ini disebut dengan fluid design.

6. Tentukan Struktur HTML

Langkah kedua yang bisa kamu lakukan yaitu menentukan struktur HTML Website, yang biasanya terdiri dari header, content, sidebar serta footer.

2. Ini merupakan form registrasi yang dibuat menggunakan Javascript :