Prak 15 - Membuat Versi DIVI dari User Interface yang telah Dibuat dan Hosting (Bagian 2)

1. Tujuan

• Mahasiswa dapat lebih mengetahui tentang Desain Web dengan membuat Desain User Interface.
• Mahasiswa dapat lebih mengenal DIVI untuk mendesain sebuah Web (statis).
• Mahasiswa dapat meng-hosting web yang telah dibuat

2. Alat dan Bahan

• WordPress Tema ‘DIVI’
• Assets yang telah dibuat
• Web untuk Hosting gratis

3. Dasar Teori

Divi Theme adalah salah satu dari 87 theme WordPress premium Elegant Themes yang banyak diminati, ada sekitar +300.000 Website menggunakan Divi sebagai theme Mereka, Anda bisa lihat di divithemeexamples.com. Harga theme ini adalah $89 pertahun atau jika di rupiahkan sekitar Rp 1,179,873 an pertahun termasuk 87 Themes & 3 Plugins Premium lainnya yang bebas di gunakan tanpa batas.

Divi Theme ini merupakan theme multi guna atau multifungsi yang dapat di gunakan untuk berbagai jenis kebutuhan website, seperti kegiatan bloging, bisnis, toko online, agency dan lain sebagainya, fitur andalan Divi Theme ini adalah Page Buildernya yang sangat menakjubkan, Kita bisa membuat atau mendesain halaman website dengan mudah, hanya perlu drag & drop tanpa harus menulis code HTML atau CSS, namun jika ingin memberikan sedikit sentuhan CSS maka itu akan sangat baik.

Berdasarkan informasi yang ada di Elengan Themes kita dapat mempelajari fitur-fitur dari Divi Builder yaitu:

• Real Time Design: Ketika kita membuat perubahan disai pada suatu halaman, maka disain akan berubah secara instan pada saat itu juga.
• Klik dan ketik: Dengan menggunakan divi kita tidak perlu membuka panel untuk menambahkan content. Kita dapat dengan mudah melakukan klik dan memulai mengerik isi halaman.
• Customize Everything: Setiap elemen dapat dikuskom mulai dengan font, warna, ukuran, spacing dan juga custom CSS.
• Responsive Editing :Fitur ini akan menampilkan live resposive preview.
• Pengaturan yang mudah: Kemudahan menambah baris dan kolom.
• Global Elemen: Sinkronisasi item yang bersifat global pada banyak halaman.
• 46 Content Element: Pada waktu artikel ini ditulis, Divi memiliki 46 Content Elemen.
• Import dan Export: Kita dapat menyimpan layout ke dalam library untuk digunakan kemudian.
• Sedikit atau tanpa loading: Divi builder bekerja cepat, sehingga sedikit atau tanpa loading.
• Premade Layouts: Divi Builder menyediakan lebih dari 20 layout yang sudah dipersiapkan sebelumnya.

Hosting (disebut juga Web Hosting / sewa hosting) adalah penyewaan tempat untuk menampung data-data yang diperlukan oleh sebuah website dan sehingga dapat diakses lewat Internet. Data disini dapat berupa file, gambar, email, aplikasi/program/script dan database.

4. Tugas Praktikum

• Membuat versi DIVI dari Desain User Interface dengan minimal 1 buah elemen

5. Hasil Praktikum
Pada saat mendaftar untuk hosting web pada https://www.000webhost.com

Membuat desain pada wordpress yang telah online

Tampilan pada website yang telah diedit dengan menggunakan DIVI pada Wordpress

Tampilan pada mock up

Pada praktikum kali ini kami membuat website "BACK TO NATURE" pada Wordpress dengan menggunakan DIVI. Terdapat beberapa perbedaan pada website yang kami kerjakan dengan mock up yang telah kami buat. Letak perbedaan terdapat pada font yang kami gunakan untuk tulisan "back to" dan tulisan "NATURE" karena jenis font yang kami gunakan tidak terdapat pada pilihan font di DIVI editor. Namun kami mencari alternatif font yang masih dekat dan sesuai dengan mock up. Selain itu terdapat perbedaan background image karena background yang kami gunakan pada mock up ketika kami upload untuk background website gambar menjadi pecah, sehingga kami mencari gambar lain yang masih sesuai dengan tema website kami yaitu alam. Kemudian terdapat perbedaan pada kolom pencarian "Search", dimana pada mock up kami tidak terdapat tombol "search" pada sisi kanan kolom tersebut namun hanya icon. Hal ini terjadi karena kami masih belum menemukan cara untuk mengganti tulisan "search" tersebut menjadi icon.
6. Kesimpulan

Pada praktikum kali ini, kami melanjutkan untuk mengedit dan membuat desain UI web pada wordpress yang telah online atau ter-hosting pada alamat https://sekarrwis.000webhostapp.com/home

7. Referensi

http://www.topwp.org/blog/review-divi-theme/

https://www.proweb.co.id/articles/wp/divi_builder.html
http://www.idebagus.com/help/tanya-jawab/hosting/apa-yang-dimaksud-dengan-hosting

Prak 14 - Membuat Versi DIVI dari User Interface yang telah Dibuat dan Hosting

1. Tujuan

• Mahasiswa dapat lebih mengetahui tentang Desain Web dengan membuat Desain User Interface.
• Mahasiswa dapat lebih mengenal DIVI untuk mendesain sebuah Web (statis).
• Mahasiswa dapat meng-hosting web yang telah dibuat

2. Alat dan Bahan

• WordPress Tema ‘DIVI’
• Assets yang telah dibuat
• Web untuk Hosting gratis

3. Dasar Teori

Divi Theme adalah salah satu dari 87 theme WordPress premium Elegant Themes yang banyak diminati, ada sekitar +300.000 Website menggunakan Divi sebagai theme Mereka, Anda bisa lihat di divithemeexamples.com. Harga theme ini adalah $89 pertahun atau jika di rupiahkan sekitar Rp 1,179,873 an pertahun termasuk 87 Themes & 3 Plugins Premium lainnya yang bebas di gunakan tanpa batas.

Divi Theme ini merupakan theme multi guna atau multifungsi yang dapat di gunakan untuk berbagai jenis kebutuhan website, seperti kegiatan bloging, bisnis, toko online, agency dan lain sebagainya, fitur andalan Divi Theme ini adalah Page Buildernya yang sangat menakjubkan, Kita bisa membuat atau mendesain halaman website dengan mudah, hanya perlu drag & drop tanpa harus menulis code HTML atau CSS, namun jika ingin memberikan sedikit sentuhan CSS maka itu akan sangat baik.

Berdasarkan informasi yang ada di Elengan Themes kita dapat mempelajari fitur-fitur dari Divi Builder yaitu:

• Real Time Design: Ketika kita membuat perubahan disai pada suatu halaman, maka disain akan berubah secara instan pada saat itu juga.
• Klik dan ketik: Dengan menggunakan divi kita tidak perlu membuka panel untuk menambahkan content. Kita dapat dengan mudah melakukan klik dan memulai mengerik isi halaman.
• Customize Everything: Setiap elemen dapat dikuskom mulai dengan font, warna, ukuran, spacing dan juga custom CSS.
• Responsive Editing :Fitur ini akan menampilkan live resposive preview.
• Pengaturan yang mudah: Kemudahan menambah baris dan kolom.
• Global Elemen: Sinkronisasi item yang bersifat global pada banyak halaman.
• 46 Content Element: Pada waktu artikel ini ditulis, Divi memiliki 46 Content Elemen.
• Import dan Export: Kita dapat menyimpan layout ke dalam library untuk digunakan kemudian.
• Sedikit atau tanpa loading: Divi builder bekerja cepat, sehingga sedikit atau tanpa loading.
• Premade Layouts: Divi Builder menyediakan lebih dari 20 layout yang sudah dipersiapkan sebelumnya.

Hosting (disebut juga Web Hosting / sewa hosting) adalah penyewaan tempat untuk menampung data-data yang diperlukan oleh sebuah website dan sehingga dapat diakses lewat Internet. Data disini dapat berupa file, gambar, email, aplikasi/program/script dan database.

4. Tugas Praktikum

• Membuat versi DIVI dari Desain User Interface dengan minimal 1 buah elemen

5. Hasil Praktikum

6. Kesimpulan

Setelah kami mengaplikasikan desain yang telah kami buat pada wordpress melalui local host, kami mencoba untuk langsung meng-hosting nya, namun tidak bisa, sehingga pada praktikum ini kami hanya mendaftarkan web yang akan kami buat pada website hosting gratis yaitu https://www.000webhost.com

7. Referensi

http://www.topwp.org/blog/review-divi-theme/

https://www.proweb.co.id/articles/wp/divi_builder.html
http://www.idebagus.com/help/tanya-jawab/hosting/apa-yang-dimaksud-dengan-hosting

Prak 13 - Membuat Versi DIVI dari User Interface yang telah Dibuat

1. Tujuan

• Mahasiswa dapat lebih mengetahui tentang Desain Web dengan membuat Desain User Interface.
• Mahasiswa dapat lebih mengenal DIVI untuk mendesain sebuah Web (statis).

2. Alat dan Bahan

• WordPress Tema ‘DIVI’
• Assets yang telah dibuat

3. Dasar Teori

Divi Theme adalah salah satu dari 87 theme WordPress premium Elegant Themes yang banyak diminati, ada sekitar +300.000 Website menggunakan Divi sebagai theme Mereka, Anda bisa lihat di divithemeexamples.com. Harga theme ini adalah $89 pertahun atau jika di rupiahkan sekitar Rp 1,179,873 an pertahun termasuk 87 Themes & 3 Plugins Premium lainnya yang bebas di gunakan tanpa batas.

Divi Theme ini merupakan theme multi guna atau multifungsi yang dapat di gunakan untuk berbagai jenis kebutuhan website, seperti kegiatan bloging, bisnis, toko online, agency dan lain sebagainya, fitur andalan Divi Theme ini adalah Page Buildernya yang sangat menakjubkan, Kita bisa membuat atau mendesain halaman website dengan mudah, hanya perlu drag & drop tanpa harus menulis code HTML atau CSS, namun jika ingin memberikan sedikit sentuhan CSS maka itu akan sangat baik.

Berdasarkan informasi yang ada di Elengan Themes kita dapat mempelajari fitur-fitur dari Divi Builder yaitu:

• Real Time Design: Ketika kita membuat perubahan disai pada suatu halaman, maka disain akan berubah secara instan pada saat itu juga.
• Klik dan ketik: Dengan menggunakan divi kita tidak perlu membuka panel untuk menambahkan content. Kita dapat dengan mudah melakukan klik dan memulai mengerik isi halaman.
• Customize Everything: Setiap elemen dapat dikuskom mulai dengan font, warna, ukuran, spacing dan juga custom CSS.
• Responsive Editing :Fitur ini akan menampilkan live resposive preview.
• Pengaturan yang mudah: Kemudahan menambah baris dan kolom.
• Global Elemen: Sinkronisasi item yang bersifat global pada banyak halaman.
• 46 Content Element: Pada waktu artikel ini ditulis, Divi memiliki 46 Content Elemen.
• Import dan Export: Kita dapat menyimpan layout ke dalam library untuk digunakan kemudian.
• Sedikit atau tanpa loading: Divi builder bekerja cepat, sehingga sedikit atau tanpa loading.
• Premade Layouts: Divi Builder menyediakan lebih dari 20 layout yang sudah dipersiapkan sebelumnya.

4. Tugas Praktikum

• Membuat versi DIVI dari Desain User Interface dengan minimal 1 buah elemen

5. Hasil Praktikum

6. Kesimpulan

Pada praktikum kali ini kami membuat Divi melalui localhost agar dapat disunting tanpa jaringan internet dan lebih aman. Kami menggunakan XAMPP untuk membantu dalam membuat database dan pembuatan wordpress nya

7. Referensi

http://www.topwp.org/blog/review-divi-theme/

https://www.proweb.co.id/articles/wp/divi_builder.html

Prak 12 - Membuat Versi HTML dari User Interface yang Telah Dibuat (Bagian 2)

1. Tujuan

• Mahasiswa dapat lebih mengetahui tentang Desain Web dengan membuat Desain User Interface.
• Mahasiswa dapat lebih mengenal HTML untuk mendesain sebuah Web.

2. Alat dan Bahan

• Visual Studio Code
• W3School + Bootstrap
• Assets yang telah dibuat

3. Dasar Teori

HyperText Markup Language (HTML) adalah sebuah bahasa markup yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah Penjelajah web Internet dan formating hypertext sederhana yang ditulis kedalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi. Dengan kata lain, berkas yang dibuat dalam perangkat lunak pengolah kata dan disimpan kedalam format ASCII normal sehingga menjadi home page dengan perintah-perintah HTML.

Bermula dari sebuah bahasa yang sebelumnya banyak digunakan di dunia penerbitan dan percetakan yang disebut dengan SGML (Standard Generalized Markup Language), HTML adalah sebuah standar yang digunakan secara luas untuk menampilkan halaman web. HTML saat ini merupakan standar Internet yang didefinisikan dan dikendalikan penggunaannya oleh World Wide Web Consortium (W3C). HTML dibuat oleh kolaborasi Caillau TIM dengan Berners-Lee Robert ketika mereka bekerja di CERN (lembaga penelitian fisika energi tinggi di Jenewa) pada tahun 1989.

HTML atau singkatan dari HyperText Markup Language ialah suatu bahasa pemrograman yang menggunakan beberapa tanda-tanda tertentu (tag) dalam menyatakan kode-kode yang mesti ditafsirkan oleh browser supaya halaman web tersebut bisa ditampilkan secara benar.

Pada umunya yang saya ketahui, fungsi dari HTML ialah untuk mengelola serangkaian data dan juga informasi sehingga sebuah dokumen bisa diakses serta ditampilkan di Internet melalui layanan web.

Fungsi HTML yang lebih spesifik yakni :

1. Membuat dan mengatur halaman web.

2. Menampilkan beragam jenis informasi di dalam sebuah browser Internet.

3. Membuat link ke halaman web lain dengan kode-kode tertentu (hypertext).

4.Tugas Praktikum

• Membuat versi HTML dari Desain User Interface minimal 1 buah desain

5. Hasil Praktikum

Asset yang digunakan:

Hasil Akhir:

Atau bisa membuka link ini: https://drive.google.com/drive/folders/1PBW1DuEGzEkreEd8L3GGq0qnbDISbHqJ

6. Kesimpulan

Pada praktikum kali ini kami telah menyelesaikan versi HTML dari 1 desain kami, sudah dengan NavBar berupa Slider di sisi kiri web. Namun kesulitan yang kami temukan ialah Log In Button serta NavBar Button belum berada di posisi yang seharusnya, ketika kami ubah-ubah atau atur malah turun dan backgroundnya ikut tercopy maka kami putuskan untuk mendiamkan seperti itu saja. Tim kami juga telah divalidasi oleh Pak Hasbi dan diperbolehkan, langsung dibungkus saja dijadikan laporan.

7. Referensi

https://www.sekolahpendidikan.com/2017/04/pengertian-dan-fungsi-html.html

https://id.wikibooks.org/wiki/Pemrograman_HTML

Prak 11 - Membuat Versi HTML dari User Interface yang Telah Dibuat

1. Tujuan

• Mahasiswa dapat lebih mengetahui tentang Desain Web dengan membuat Desain User Interface.
• Mahasiswa dapat lebih mengenal HTML untuk mendesain sebuah Web.

2. Alat dan Bahan

• Visual Studio Code
• W3School + Bootstrap
• Assets yang telah dibuat

3. Dasar Teori

HyperText Markup Language (HTML) adalah sebuah bahasa markup yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah Penjelajah web Internet dan formating hypertext sederhana yang ditulis kedalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi. Dengan kata lain, berkas yang dibuat dalam perangkat lunak pengolah kata dan disimpan kedalam format ASCII normal sehingga menjadi home page dengan perintah-perintah HTML.

Bermula dari sebuah bahasa yang sebelumnya banyak digunakan di dunia penerbitan dan percetakan yang disebut dengan SGML (Standard Generalized Markup Language), HTML adalah sebuah standar yang digunakan secara luas untuk menampilkan halaman web. HTML saat ini merupakan standar Internet yang didefinisikan dan dikendalikan penggunaannya oleh World Wide Web Consortium (W3C). HTML dibuat oleh kolaborasi Caillau TIM dengan Berners-Lee Robert ketika mereka bekerja di CERN (lembaga penelitian fisika energi tinggi di Jenewa) pada tahun 1989.

HTML atau singkatan dari HyperText Markup Language ialah suatu bahasa pemrograman yang menggunakan beberapa tanda-tanda tertentu (tag) dalam menyatakan kode-kode yang mesti ditafsirkan oleh browser supaya halaman web tersebut bisa ditampilkan secara benar.

Pada umunya yang saya ketahui, fungsi dari HTML ialah untuk mengelola serangkaian data dan juga informasi sehingga sebuah dokumen bisa diakses serta ditampilkan di Internet melalui layanan web.

Fungsi HTML yang lebih spesifik yakni :

1. Membuat dan mengatur halaman web.

2. Menampilkan beragam jenis informasi di dalam sebuah browser Internet.

3. Membuat link ke halaman web lain dengan kode-kode tertentu (hypertext).

4.Tugas Praktikum

• Membuat versi HTML dari Desain User Interface minimal 1 buah desain

5. Hasil Praktikum

Mock Up yang akan direalisasikan ke bentuk HTML:

6. Kesimpulan

Pada praktikum kali ini kami masih belajar mengenai Visual Studio Code dan HTML melalui W3School serta Bootstrap. Tahap pertama yang baru saya lakukan ialah memasang background dengan ukuran yang pas serta menuliskan Judul Web kami saja.

7. Referensi

https://www.sekolahpendidikan.com/2017/04/pengertian-dan-fungsi-html.html

Prak 10 - Membuat Desain User Interface Sebuah Web

1. Tujuan

• Mahasiswa dapat lebih mengetahui tentang Desain Web dengan membuat Desain User Interface.

2. Alat dan Bahan

• Adobe Photoshop CC
• Foto Pemandangan Lokasi Wisata

3. Dasar Teori

User interface adalah cara program dan user berkomunikasi. Istilah user interface atau interface kadang-kadang digunakan sebagai penggati istilah HCI (Human Computer Interaction). HCI (Human Computer Interface) adalah semua aspek dari interaksi pengguna dan computer, tidak hanya hardware. Semuanya yang terlhat dilayar, membaca dalam dokumentasi dan dimanipulasi dengan keyboard (atau mouse) merupaka bagian dari user interface.

User Interface berfungsi untuk menghubungkan atau penterjemah informasi antara pengguna dengan system operasi, sehingga computer dapat digunakan. Dengan demikian, user interface bisa juga diartikan sebagai mekanisme inter-relasi atau integrasi total dari perangkat keras dan lunak yang membentuk pengalaman bekomputer. Use interface dari sisi software bias berbentuk Graphical User Interface (GUI) atau Command Line Interfae (CLI), sedangkan dari sisi hardware bias berbentuk Aplle Desktop Bus (ADB), USB, dan fire wire.

Tujuan sebuah user interface adalah mengkomunikasikan fitur-fitur sistem yang tersedia agar user mengerti dan dapat menggunakan sistem tersebut. Dalam hal ini penggunaan bahasa amat efektif untuk membantu pengertian, karena bahasa merupakan alat tertua yang dipakai orang untuk berkomunikasi sehari-harinya. Praktis semua pengguna komputer dan Interface dapat mengerti tulisan.

Meski pada umumnya panduan user interface menyarankan agar ikon tidak diberi tulisan supaya tetap mandiri dari bahasa, namun elemen user interface lain seperti teks pada tombol, caption window, atau teks-teks singkat di sebelah kotak input dan tombol pilihan semua menggunakan bahasa. Tanpa bahasa pun kadang ikon bisa tidak jelas maknanya, sebab tidak semua lambang ikon bisa bersifat universal.

4. Tugas Praktikum

• Membuat Desain User Interface minimal 3 buah

5. Hasil Praktikum

6. Kesimpulan

     Pada praktikum kali ini berbentuk kelompok dan kebetulan saya memiliki kelompok yang tetap pada praktikum sebelumnya maka kami memiliki 10 desain User Interface yang telah kami desain.

7. Referensi

http://senalastiansah.blogspot.com/2012/10/pengertian-user-interface-user.html

Prak 9 - Deploy Melalui Firebase (Bagian 2)

1. Tujuan

• Mahasiswa dapat mendeploy web miliknya melalui FireBase.
• Mahasiswa dapat lebih mengetahui tentang FireBase.

2. Alat dan Bahan

• Laptop
• Jaringan No Proxy
• Google serta Akun FireBase
• Command Prompt (Windows)

3. Dasar Teori

Web Deploy adalah alat klien-server yang dapat diperluas untuk menyinkronkan konten dan konfigurasi ke IIS. Web Deploy digunakan terutama dalam dua skenario:

• Pengembang menggunakannya untuk menyinkronkan (alias ‘menerbitkan’) aplikasi web yang dikompilasi (ASP .Net, PHP dll) dari alat pengembang (Visual Studio, WebMatrix, dll) ke IIS.
• Profesional IT menggunakannya untuk memigrasikan situs web & aplikasi dari sistem operasi yang menjalankan versi IIS lama seperti IIS6 ke sistem operasi yang menjalankan versi IIS yang lebih baru seperti IIS 7.5.

4. Tugas Praktikum

• Deploying Web

5. Hasil Praktikum

• Tampilan tulisan ‘Hello World’ yang berhasil dideploy ulang:

6. Kesimpulan

Pada praktikum kali ini, saya berhasil melakukan deploy web dan berhasil menuliskan ‘Hello World !” di dalamnya. Sebelumnya saya gagal menuliskan “Hello World !” dikarenakan saya salah penamaan folder maka dari itu file di dalam folder tersebut tidak dapat saya deploy ulang ke FireBase.

7. Referensi

https://docs.microsoft.com/en-us/iis/publish/using-web-deploy/introduction-to-web-deploy

Prak 8 - Deploy Melalui Firebase

1. Tujuan

• Mahasiswa dapat mendeploy web miliknya melalui FireBase.
• Mahasiswa dapat lebih mengetahui tentang FireBase.

2. Alat dan Bahan

• Laptop
• Jaringan No Proxy
• Google serta Akun FireBase
• Command Prompt (Windows)

3. Dasar Teori

Web Deploy adalah alat klien-server yang dapat diperluas untuk menyinkronkan konten dan konfigurasi ke IIS. Web Deploy digunakan terutama dalam dua skenario:

Pengembang menggunakannya untuk menyinkronkan (alias ‘menerbitkan’) aplikasi web yang dikompilasi (ASP .Net, PHP dll) dari alat pengembang (Visual Studio, WebMatrix, dll) ke IIS.

Profesional IT menggunakannya untuk memigrasikan situs web & aplikasi dari sistem operasi yang menjalankan versi IIS lama seperti IIS6 ke sistem operasi yang menjalankan versi IIS yang lebih baru seperti IIS 7.5.

4. Tugas Praktikum

• Deploying Web

5. Hasil Praktikum

• Tahap menginstall awal:

• Tampilan install yang sudah selesai:

• Tampilan setelah berhasil melakukan perintah firebase login dan firebase init:

• Tampilan saat melakukan perintah firebase deploy:

6. Kesimpulan

Pada praktikum kali ini, saya berhasil melakukan deploy web namun belum melakukan hello world di dalamnya karena sebuah kesalahan saat proses mendeploy-nya.

7. Referensi

https://docs.microsoft.com/en-us/iis/publish/using-web-deploy/introduction-to-web-deploy

Prak 7 - Hosting Web Melalui Firebase (Bagian 2)

1. Tujuan

• Mahasiswa dapat menghostingkan web miliknya melalui FireBase.
• Mahasiswa dapat lebih mengetahui tentang FireBase.

2. Alat dan Bahan

• Laptop
• Jaringan No Proxy
• Google serta Akun FireBase
• Command Prompt (Windows)

3. Dasar Teori

Firebase Hosting adalah layanan hosting konten web yang berkelas produksi untuk developer. Hanya dengan satu perintah, Anda dapat menerapkan aplikasi web serta menyajikan konten dinamis dan statis ke jaringan penayangan konten (CDN) global dengan cepat dan mudah.

Firebase Hosting dibuat untuk developer web modern. Dengan hadirnya framework JavaScript front-end seperti Angular dan fitur generator statis seperti Jekyll, situs dan aplikasi kini jadi lebih tangguh daripada sebelumnya. Jika Anda menerapkan halaman landing aplikasi yang sederhana atau Progressive Web App (PWA) yang kompleks, Hosting menyediakan infrastruktur, fitur, dan rangkaian sarana yang disesuaikan untuk menerapkan serta mengelola situs dan aplikasi.

4. Tugas Praktikum

• Hosting Web

5. Hasil Praktikum

6. Kesimpulan

            Pada praktikum kali ini, saya berhasil menginstall node js dan npm yang ditandai dengan berhasilnya pengecekan versi dari node js dan npm melalui cmd (command prompt). Penginstallan node js dan npm ini tidak bisa dilakukan dengan jaringan yang memakai proxy.

7. Referensi

https://firebase.google.com/docs/hosting/?hl=id 

Prak 5 - Presentasi Hasil Desain Web atau User Interface

1. Tujuan

• Mahasiswa dapat lebih mengetahui tentang Desain Web dengan membuat Desain User Interface.
• Mahasiswa lebih memahami tentang Desain User Interface dengan membreakdown setiap elemennya.

2. Alat dan Bahan

• Microsoft Power Point
• 10 buah hasil Desain User Interface yang telah dibuat sebelumnya.

3. Dasar Teori

User interface adalah cara program dan user berkomunikasi. Istilah user interface atau interface kadang-kadang digunakan sebagai penggati istilah HCI (Human Computer Interaction). HCI (Human Computer Interface) adalah semua aspek dari interaksi pengguna dan computer, tidak hanya hardware. Semuanya yang terlhat dilayar, membaca dalam dokumentasi dan dimanipulasi dengan keyboard (atau mouse) merupakan bagian dari user interface.

User Interface berfungsi untuk menghubungkan atau penterjemah informasi antara pengguna dengan system operasi, sehingga computer dapat digunakan. Dengan demikian, user interface bisa juga diartikan sebagai mekanisme inter-relasi atau integrasi total dari perangkat keras dan lunak yang membentuk pengalaman bekomputer. Use interface dari sisi software bias berbentuk Graphical User Interface (GUI) atau Command Line Interfae (CLI), sedangkan dari sisi hardware bias berbentuk Aplle Desktop Bus (ADB), USB, dan fire wire.

Tujuan sebuah user interface adalah mengkomunikasikan fitur-fitur sistem yang tersedia agar user mengerti dan dapat menggunakan sistem tersebut. Dalam hal ini penggunaan bahasa amat efektif untuk membantu pengertian, karena bahasa merupakan alat tertua yang dipakai orang untuk berkomunikasi sehari-harinya. Praktis semua pengguna komputer dan Interface dapat mengerti tulisan.

Meski pada umumnya panduan user interface menyarankan agar ikon tidak diberi tulisan supaya tetap mandiri dari bahasa, namun elemen user interface lain seperti teks pada tombol, caption window, atau teks-teks singkat di sebelah kotak input dan tombol pilihan semua menggunakan bahasa. Tanpa bahasa pun kadang ikon bisa tidak jelas maknanya, sebab tidak semua lambang ikon bisa bersifat universal.

4. Tugas Praktikum

• Mempresentasikan Hasil Desain Web atau User Interface yang telah dirancang dan dibuat sebelumnya

5. Hasil Praktikum

https://www.slideshare.net/WindasariDwiastuti/presentasi-hasil-dari-desain-web-atau-desain-user-interface

Berikut ialah 2 contoh web yang memiliki konsep yang sama:

6. Kesimpulan

Pada presentasi hasil desain User Interface ini, tim kami mendapatkan beberapa revisi seperti tidak adanya Navbar atau Navigasi Bar yangmana menurut tim kami, kami memang mendesain Navbar dibagian kiri web dengan menekan Button terlebih dahulu, membuat web menjadi lebih interaktif. Kemudian, tidak adanya Tagline yang membuat halaman muka menjadi ambigu serta mempengaruhi Kolom ‘Search’ karena tidak adanya Tagline atau penjelas web tersebut maka Kolom ‘Search’ ikut menjadi ambigu juga.

7. Referensi

http://senalastiansah.blogspot.com/2012/10/pengertian-user-interface-user.html