ETS PWEB B

 Nama : Muhammad Hafidh Rosyadi

NRP : 5025211013

Kelas : PWEB B

SOAL

 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.

Web responsif adalah pendekatan dalam desain dan pengembangan situs web yang dirancang untuk menyesuaikan tampilan dan tata letak situs dengan berbagai perangkat dan ukuran layar. Tujuan utama dari desain web responsif adalah memberikan pengalaman pengguna yang optimal, baik pengguna mengakses situs web melalui komputer desktop, laptop, tablet, atau ponsel cerdas. Hal ini penting karena perangkat dan ukuran layar beragam, dan situs web responsif memastikan tampilan dan fungsionalitas situs tetap baik, mudah dinavigasi, dan mudah dibaca di semua perangkat.

Cara membangun situs web responsif melibatkan beberapa langkah:

1. Perencanaan: Mulai dengan merencanakan desain situs web . Rencanakan mengenai struktur, tata letak, dan konten apa yang harus disertakan. Pertimbangkan bagaimana elemen-elemen ini akan disesuaikan dengan ukuran layar yang berbeda.

2. Penggunaan CSS Media Queries: Media queries adalah alat yang penting dalam desain web responsif. Ini memungkinkan untuk mengatur gaya CSS berdasarkan karakteristik perangkat, seperti lebar layar. Dengan media queries, dapat menentukan gaya tampilan yang berbeda untuk perangkat berbeda.

3. Fluid Grid Layout: Gunakan grid layout yang fleksibel dengan persentase daripada nilai piksel tetap. Ini akan memungkinkan elemen-elemen situs web yang telah dibuat untuk mengubah ukurannya sesuai dengan lebar layar.

4. Mobile-First Approach: Sebuah pendekatan yang umum digunakan adalah "mobile-first," yang berarti merancang situs web terlebih dahulu untuk perangkat seluler, lalu menambahkan tampilan yang lebih besar secara bertahap. Ini memastikan bahwa situs web yang telah dibuat berkinerja baik di perangkat kecil dan besar.

5. Tes Cross-Browser dan Cross-Device: menguji tampilannya di berbagai peramban web dan perangkat. Ini akan membantu memastikan bahwa situs yang telah dibuat responsif di seluruh spektrum.

6. Gunakan Framework Responsif: menggunakan kerangka kerja responsif seperti Bootstrap atau Foundation yang menyediakan alat dan komponen yang dapat mempercepat proses pengembangan.

7. Monitor Kinerja: Pantau kinerja situs dan pastikan bahwa situs web responsif memuat dengan cepat di berbagai perangkat. Optimalisasi gambar dan penggunaan teknik-teknik lain untuk meningkatkan kinerja.

Situs web responsif sangat penting dalam era perangkat beragam. Membangunnya memerlukan perhatian yang cermat terhadap desain dan pengembangan, serta kemampuan untuk menguji dan menyempurnakan situs di berbagai perangkat dan peramban.

 

2.  

- CV

 

 

Link Dokumentasi : https://github.com/Hfdrsyd/CV-PWEB-B-Tugas-1

Link Deploy : https://hfdrsyd.github.io/CV-PWEB-B-Tugas-1/

 

- WEB Portal Berita

 

link Repo : https://github.com/Hfdrsyd/Portal-Berita-PWEB-B-Tugas-2.git

Link deploy :https://hfdrsyd.github.io/Portal-Berita-PWEB-B-Tugas-2/

 

 - WEB Undangan pernikahan

 

Project Link    : https://github.com/Hfdrsyd/Undangan-Pernikahan-PWEB-B-Tugas-3

Deployment Link    : https://hfdrsyd.github.io/Undangan-Pernikahan-PWEB-B-Tugas-3/

 

- WEB validation Form Javascript

 

 

 

Link Repo :  https://github.com/Hfdrsyd/ValidationForm-PWEB-B

Link Deploy : https://hfdrsyd.github.io/ValidationForm-PWEB-B/

 

- WEB Form dengan Bootstrap

 

link repo : https://github.com/Hfdrsyd/BootstrapForm-PWEB-B

link deploy : https://hfdrsyd.github.io/BootstrapForm-PWEB-B/  

 

 

 

 

3.

Berikut merupakan design prototipe yang akan saya kembangkan:

Link: https://www.figma.com/file/0IjNMJrY7usVwUZtTBhI9I/Prototipe-design-web-portal-berita?type=design&node-id=0%3A1&mode=design&t=ieSrIYj8yOpLw8LC-1

 

4. Link Deploy : https://hfdrsyd.github.io/PortalBerita-ETS-PWEB-B/index.html

 Link Repo : https://github.com/Hfdrsyd/PortalBerita-ETS-PWEB-B

- Halaman Utama:

 - Halaman Kategori:

- Form untuk menghubungi/meminta:

 - Form untuk Beropini / Berkomentar

 

 

5.