Evaluasi Tengah Semester - Pemrograman Web (B)

 

ETS

Kamis, 19 Oktober 2023

Nama    : Alfan Lukeyan Rizki 

NRP      : 5025211046

Pada pertemuan yang ke-8, dilakukan nya evaluasi tengah semester. Mahasiswa di berikan beberapa soal penugasan, berikut merupakan soal nya.

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

[Video Demo Website] :  https://youtu.be/U9c5JymFlNM

Pembahasan :

Website responsive adalah desain yang memungkinkan situs dapat ditampilkan sesuai ukuran layar perangkat. Ini sangat penting karena ada berbagai jenis perangkat yang digunakan oleh pengguna, seperti mobile, desktop, dan tablet. Website responsive adalah situs yang tampilan layout-nya bisa menyesuaikan dengan jenis device dan ukuran layar berbeda. Cara membuat website responsive dilakukan dengan mengkomposisikan seluruh aspek desain seperti antarmuka, huruf, gambar, dan sebagainya sesuai resolusi perangkat.

Berikut adalah beberapa langkah dasar dalam membangun web responsive:

• Definisikan Meta Tag: Meta tag digunakan untuk mengatur tampilan halaman web pada berbagai perangkat. Misalnya, meta tag viewport digunakan untuk mengontrol lebar dan skala halaman web.
• Tentukan Struktur HTML: Struktur HTML yang baik sangat penting untuk web responsive. Hal ini mempengaruhi bagaimana elemen-elemen pada halaman web akan ditampilkan pada berbagai ukuran layar.
• Membuat Media Query di CSS: Media query digunakan untuk menerapkan gaya CSS yang berbeda untuk berbagai ukuran layar. Dengan media query, Anda dapat menentukan gaya CSS khusus untuk layar dengan lebar tertentu.

Berikut merupakan rangkuman aplikasi yang telah di kerjakan sebelumnya :

• CV

[Source Code]        : https://github.com/AlfanLukeyan/cv-pweb

[Deploy]                 : alfanlukeyan.github.io/cv-pweb/

[Desktop View]      :

• Latihan Layout

[source code]          : https://github.com/AlfanLukeyan/learn-layout-html-css

[deploy website]     : alfanlukeyan.github.io/learn-layout-html-css/

[desktop view]        : 

• Online Course

[Source Code]         : https://github.com/AlfanLukeyan/online-courses

[Deploy Website]    : alfanlukeyan.github.io/online-courses/

[Desktop View]        : 

• Wedding Invitation

[figma] : https://www.figma.com/file/gVPNYdCm3eeEcSs8hJK4LZ/wedding-invitation?type=design&node-id=0%3A1&mode=design&t=u3slrHuPC75ILQhi-1

[source code] : https://github.com/AlfanLukeyan/wedding-invitation

[deploy website] : https://alfanlukeyan.github.io/wedding-invitation/

[desktop view] :

• From Registrasi

[source code] : https://github.com/AlfanLukeyan/registration-form

[deploy website] : https://alfanlukeyan.github.io/registration-form/

Berikut merupakan tampilan dari registrasion form nya:

• [Desktop View]
  
  
  
• [Tablet View]
  
  
  
• [Handphone View]
  

Berikut merupakan tampilan dari portal berita nya:

• [Desktop View]

[Source Code]            : https://github.com/AlfanLukeyan/portal-berita

[Deploy Website]       : alfanlukeyan.github.io/portal-berita/
[Video Demo Website] :  https://youtu.be/U9c5JymFlNM