Redesign UI MHEWS

[milakhaerunnisa]

Multi Hazard Early Warning System (MHEWS) yang dibuat Tim GEO dialih bahasakan penamaannya menjadi Sistem Peringatan Dini Multi Ancaman. Sistem ini merupakan redesign dari http://geostech.org/mhews/index.php. Design ini dibuat belum melihat source backend secara keseluruhan. Jika source pada backend tidak tersedia, maka menu-menu yang ada pada design ini akan dieleminir.

Halaman Muka

Running Text: Berisikan informasi bencana terbaru yang diambil dari source di backend (terdapat source pasifnya: berdasarkan info pak udrekh).

Kotak Informasi: Berisikan informasi sistem yang sedang dibangun, tim pastigana, dan update kegiatan terakhir pastigana.

Contoh:

SISTEM PERINGATAN DINI MULTI ANCAMAN Sistem Peringatan Dini Multi Ancaman yang dikembangkan oleh Badan Nasional Penanggulangan Bencana (BNPB), Badan Pengkajian Penerapan Teknologi (BPPT), Badan Meteorologi Klimatologi dan Geofisika (BMKG), Pusat Litbang Sumber Daya Air Kementerian Pekerjaan Umum dan Perumahan Rakyat (PusAir KemenPUPR), Pusat Vulkanologi dan Mitigasi Bencana Geologi Kementerian Energi dan Sumber Daya Mineral (PVMBG Kementerian ESDM), Lembaga Penerbangan dan Antariksa Nasional (LAPAN), dan Universitas ITB.

Menu: Berisikan menu menu yang ada pada sistem, yaitu:

1. Prediksi Cuaca Prediksi cuaca yang ditampilkan meliputi informasi cuaca dan maritim tiga hari kedepan. 
2. Indeks InaRISK Indeks Risiko Bencana Alam seluruh Indonesia. 
3. Prediksi Bencana Prediksi Bencana Alam yang dikeluarkan oleh kementerian/lembaga terkait dengan berbagai status Bencana (Aman, Siaga, Waspada, dan Awas)
4. Peringatan Bencana Peringatan Bencana Alam dalam Status Bencana AWAS!  
5. Kontak Kami Hubungi Kami untuk informasi lebih lanjut, saran dan masukan untuk sistem ini.  

Berikut di bawah ini untuk tampilan UI nya:

Halaman Prediksi Cuaca

Tanggal dan Jam: Tampilan default untuk tanggal dan jam adalah pada saat user membuka halaman. Ketika dipilih tanggal dan jam lainnya, maka user dapat memperoleh informasi prediksi yang diinginkan

Informasi Cuaca:

• Curah Hujan Terdiri dari informasi curah hujan yang berasal dari Satelit Himawari, Prediksi Smartclim ITB dan Radar Cuaca
• Temperatur Udara
• Tekanan Udara
• Kelembaban
• Kecepatan Angin

Informasi Maritim:

• Gelombang
• Arus
• Pasang Surut
• Temperatur Permukaan Laut
• Tekanan Permukaan Laut

Animasi:

• Angin
• Gelombang

Base Map:

• BIG (Badan Informasi Geospasial) Maps
• Google Maps

Icon Lain:

• Lokasi
• Zoom In
• Zoom Out

Legenda: Berisikan legenda data yang sedang ditampilkan.

Running Text: Berisikan informasi bencana terbaru yang diambil dari source di backend.

Berikut di bawah ini untuk tampilan UI nya:

Halaman Indeks InaRISK

Jenis Bencana Alam: Terdiri dari indeks jenis bencana alam yang ada di Indonesia.

• Banjir
• Banjir Bandang
• Cuaca Ekstrem
• Gelombang Tinggi
• Tsunami
• Kebakaran Hutan dan Lahan
• Kekeringan
• Gerakan Tanah
• Gempa Bumi
• Erupsi Gunung Api

Base Map:

• BIG Maps
• Google Maps

Icon Lain:

• Lokasi
• Zoom In
• Zoom Out

Legenda: Berisikan legenda data yang sedang ditampilkan.

Running Text: Berisikan informasi bencana terbaru yang diambil dari source di backend.

Berikut di bawah ini untuk tampilan UI nya:

Halaman Prediksi Bencana

Halaman ini hanya bisa dilihat user yang memiliki akun login. Dan akan dibuat jika pada backend terdapat source nya.

Tanggal dan Jam: Tampilan default untuk tanggal dan jam adalah pada saat user membuka halaman. Ketika dipilih tanggal dan jam lainnya, maka user dapat memperoleh informasi prediksi yang diinginkan.

Jenis Bencana: Terdiri dari jenis bencana alam yang ada di Indonesia

• Banjir
• Banjir Bandang
• Cuaca Ekstrem
• Gelombang Tinggi
• Tsunami
• Kebakaran Hutan dan Lahan
• Kekeringan
• Gerakan Tanah
• Gempa Bumi
• Erupsi Gunung Api

Tampalan Unsur Cuaca:

• Curah Hujan Terdiri dari informasi curah hujan yang berasal dari Satelit Himawari, Prediksi Smartclim ITB dan Radar Cuaca
• Angin

Base Map:

• BIG Maps
• Google Maps

Icon Lain:

• Lokasi
• Zoom In
• Zoom Out

Legenda: Berisikan legenda data status bencana

• Awas
• Waspada
• Siaga
• Aman

Running Text: Berisikan informasi bencana terbaru yang diambil dari source di backend.

Berikut di bawah ini untuk tampilan UI nya:

Peringatan Bencana

Tanggal dan Jam: Tampilan default untuk tanggal dan jam adalah pada saat user membuka halaman. Ketika dipilih tanggal dan jam lainnya, maka user dapat memperoleh informasi prediksi yang diinginkan. Tanggal dan jam yang dipilih hanya bisa menampilkan data di hari dan jam sebelumnya.

Jenis Bencana: Terdiri dari jenis bencana alam yang ada di Indonesia

• Banjir
• Banjir Bandang
• Cuaca Ekstrem
• Gelombang Tinggi
• Tsunami
• Kebakaran Hutan dan Lahan
• Kekeringan
• Gerakan Tanah
• Gempa Bumi
• Erupsi Gunung Api

Tampalan Unsur Cuaca:

• Curah Hujan Terdiri dari informasi curah hujan yang berasal dari Satelit Himawari, Prediksi Smartclim ITB dan Radar Cuaca
• Angin

Base Map:

• BIG Maps
• Google Maps

Icon Lain:

• Lokasi
• Zoom In
• Zoom Out

Legenda: Berisikan legenda data status bencana Awas!

Running Text: Berisikan informasi bencana terbaru yang diambil dari source di backend.

Berikut di bawah ini untuk tampilan UI nya:

Kontak Kami

Kontak Kami:

• Nama
• Email
• No. Telepon
• Subjek
• Pesan
• Captcha
• Kirim

Maps:

• Peta lokasi BNPB (Menggunakan Google Maps)
• Alamat
• No. Telepon
• No. Faksimile
• Email
• Website

Running Text: Berisikan informasi bencana terbaru yang diambil dari source di backend.

Update 12 April 2017: Alamat BNPB Badan Nasional Pengelola Bencana (BNPB) Deputi Bidang Pencegahan dan Kesipsiagaan Direktorat Kesiapsiagaan  Gedung Graha BNPB Lantai 14 Jalan Pramuka Raya No. 38 RT 10/5 Utan Kayu Utara, Matraman Kota Jakarta Timur  DKI Jakarta Indonesia 13120 (021) 298 27 793           (021) 212 81 200           contact@bnpb.go.id           http://www.bnpb.go.id/ 

Berikut di bawah ini untuk tampilan UI nya:

Member Login

Member login ini berlaku untuk user pada saat akan membuka Halaman Prediksi Bencana yang akan terjadi.

• Nama
• Kata Sandi
• Ingat Saya
• Lupa Sandi

Berikut di bawah ini untuk tampilan UI nya:

Terdapat restriction untuk masing masing jenis group user:

• Group admin dapat menambahkan akun dan mengubah konfigurasi

• Group user Pastigana BNPB dapat melihat Prediksi Cuaca, Indeks InaRISK, Kontak Kami dari publik, Prediksi Bencana dan mendownload laporan dari database untuk Peringatan Bencana

• Group user publik dapat melihat Prediksi Cuaca, Indeks InaRISK dan Peringatan Bencana

Catatan

NB: Design ini sudah dikonfirmasikan kepada Pak Bambang, Pak Maryanto, dan Mas Ridho namun belum secara langsung kepada Pak Udrekh (baru konfirmasi via wa). Terima Kasih

[senoadiw]

This issue was moved to pastigana/mhews#8