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

Prak 3 - Mencari Referensi Tiga Judul TA

1. Judul

          Mencari Referensi Tiga Judul TA

2. Tujuan

          Mahasiswa mampu membuat hasil tinjauan pustaka

3. Alat dan Bahan

          Buku Tugas Akhir

4. Dasar Teori

          Website adalah sebuah halaman yang menyajikan informasi baik dalam bentuk tulisan, gambar, suara, atau video yang diletakkan di dalam sebuah server/hosting di mana untuk mengaksesnya diperlukan jaringan internet. Website sering juga disebut sebagai web, site, situs, atau situs web. Sebuah website agar bisa diakses di internet diperlukan 2 komponen yang harus ada yaitu Domain dan Hosting.

5. Tugas Praktikum

          Mencari referensi tiga judul Tugas Akhir yang berkaitan dengan konsep Web Desain masing - masing kelompok

6. Hasil Praktikum

          Pada praktikum kali ini, kelompok kami hanya menemukan 2 referensi judul yang mana salah satunya adalah saran dari dosen yaitu Aplikasi Informasi Angkutan Umum di Surabaya dan untuk judul yang kedua kami mencari di internet yang sesuai dengan konsep web yang kami inginkan yaitu ranselkecil.com

          Pada blog tersebut sangat sesuai dengan konsep yang kelompok kami angkat yaitu membuat sebuah website yang dapat menaungi para traveler untuk berbagi cerita perjalanannya atau dapat juga disebut dengan Blog Travel Community.

7. Kesimpulan

          Dari hasil praktikum ini dapat disimpulkan jika belum adanya inovasi baru atau judul baru pada Tugas Akhir (yang setema dengan ide kelompok kami) maka hal ini dapat menjadi peluang baru kami sebagai mahasiswa untuk menjadikannya sebagai Judul Tugas Akhir.

8. Referensi

          https://belajarbisnisinternet.com/pengertian-website-tiga-jenis-website-paling-umum/

Prak 2 - Kaitan Fiqh Desain dengan Mata Kuliah Desain Web

     1. Tujuan :

     Mahasiswa dapat mengetahui kaitan atau realisasi Fiqh Desain dengan Mata Kuliah Desain Web.

      2. Dasar Teori :

      Fiqh Desain adalah suatu aturan atau hukum yang sesuai syariat islam dimana mengatur tentang desain dan semacamnya.

Desain Web atau perancangan web adalah istilah umum yang digunakan untuk mencakup bagaimana isi web konten ditampilkan, (biasanya berupa hypertext atau hypermedia) yang dikirimkan ke pengguna akhir melalui World Wide Web, dengan menggunakan sebuah browser web atau perangkat lunak berbasis web. Tujuan dari web design adalah untuk membuat website—sekumpulan konten online termasuk dokumen dan aplikasi yang berada pada server web / server. Sebuah website dapat berupa sekumpulan teks, gambar, suara dan konten lainnya, serta dapat bersifat interaktif ataupun statis.

       3. Tugas Praktikum

      Membuat rangkuman tentang video “Serial Kelas Kreatif KPMI: Seputar Fiqh Desain oleh Ust. Andi Fahmi Halim, Lc

        4. Hasil Praktikum

      Membuat rangkuman tentang video “Serial Kelas Kreatif KPMI: Seputar Fiqh Desain oleh Ust. Andi Fahmi Halim, Lc

Kaitan dan korelasi dengan mata kuliah Desain Web

Desain Web juga termasuk dalam desain, dan desain web juga dapat menjadi salah satu mata percaharian atau sebuah bisnis. Namun dalam menjalankan bisnis desain web kami perlu mengetahui aturan dan rambu-rambu dalam menjalankannya. Terdapat niat yang harus didahulukan, kita tidak boleh mengambil hak cipta orang lain, tidak melanggar undang-undang. Desain web yang akan kita buat nantinya tidak boleh terdapat unsur provokasi untuk memecah belah umat, dan tidak sesuai dengan syariat-syariat islam.

5. Kesimpulan

1. Ketika kita mendesain, apa yg ingin kita sampaikan harus nyata dan apa adanya, tidak boleh dilebih-lebihkan. Karena kebanyakan iklan ada unsur bohongnya, hal inilah yg membuat desain tidak barokah didalamnya. Keberkahan akan tercapai apabila tidak ada kebohongan didalamnya, dan bagaimana sistem jual belinya.
2. Tidak boleh melanggar hak cipta orang lain, bahkan hal ini telah diatur dalam perundang-undangan. Apabila dalam mendesain kita mencontoh desain dari orang lain, dalam mencontoh desain orang lain apabila sudah memiliki hak cipta, maka kita tidak diperbolehkan mencontohnya, karena hal tersebut termasuk memakan harta orang lain dengan cara yang bathil. Meskipun kita hanya disuruh oleh client untuk meniru desain orang lain atau menirunya untuk tujuan komersil, kita tidak boleh menurutinya karena hal tersebut termasuk dalam membantu dalam hal keburukan atau kebohongan. Sehingga kita harus teliti dalam hal ini.
3. Kita tidak  diperbolehkan mendesain atau menggambar yang didalamnya terdapat unsur maksiatnya. Apalagi terdapat gambar-gambar yang menampakkan aurat. Kita harus pilih-pilih, apakah hal tersebut melanggar syariat islam atau tidak. Kita tidak diperbolehkan melanggar aturan perundang-undangan.
4. Ketika menggambar atau mendesain khususnya produk, tidak boleh berlebihan dalam mencantumkan keutamaan atau kelebihannya, (misal : terenak, terlaris, dll) apabila belum pernah ada yg mensurvey terlebih dahulu. Dan yang paling tidak diperbolehkan adalah kata-kata “terbaik”. Sehingga kita harus menghindari kata-kata ter- dan paling, sebelum kita melakukan survey atau membuktikannya.
5. Menghindari hal-hal yang menimbulkan perpecahan atau permusuhan kaum muslimin, yang bersifat provokasi, baik itu masalah dakwah maupun jual beli, yang mengandung unsur menjelek-jelekkan produk sejenis.
6. Ketika menggambar kita harus menghindari menggambar makhluk hidup, seolah-olah kita menciptakannya (terdapat proses membuatnya seperti membuat mulutnya, kepalanya dll). Rasulullah SAW menceritakan “dahulu apabila ada orang-orang yang meninggal akan dibuatkan masjid kemudian mereka menggambar dan menempelkannya di didinding masjid Rasulullah berkata “seburuk – buruk makhluk disisi ALLAH SWT dihari kiamat kelak” hal ini merupakan bibit-bibit syirik yang akan muncul dan menyekutukan ALLAH SWT. Rasulullah SAW bersabda “sesungguhnya manusia yang paling pedih adzabnya diakhirat kelak adalah orang-orang yang menggambar (menggambar manusia)” Sehingga kita tidak boleh menggambar makhluk hidup, nantinya ALLAH akan memerintahkan kita untuk menghidupkannya, namun kita tidak memiliki kemampuan untuk melakukannya.

6. Referensi

https://id.wikipedia.org/wiki/Fikih

https://id.wikipedia.org/wiki/Perancangan_web
https://www.youtube.com/watch?v=uNCAAZtHTnc&t=37s

Prak 1 - Membuat User Interface Untuk Sebuah Website

1. Tujuan :
     Mahasiswa dapat lebih mengetahui tentang Desain Web dengan membuat Desain User Interface.

2. Alat :

• Adobe Photoshop CC

3. Bahan :

• Logo dan pemandangan Lokasi Wisata

4. 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.
      Web Design adalah jenis desain grafis yang ditujukan untuk pengembangan dan styling obyek lingkungan informasi Internet untuk menyediakan dengan fitur konsumen high-end dan kualitas estetika. Definisi yang ditawarkan memisahkan desain web dari pemrograman web, menekankan fitur fungsional dari sebuah situs web, serta desain posisi web sebagai semacam desain grafis. Tujuan dari web design adalah untuk membuat website—sekumpulan konten online termasuk dokumen dan aplikasi yang berada pada server web / server. Sebuah website dapat berupa sekumpulan teks, gambar, suara dan konten lainnya, serta dapat bersifat interaktif ataupun statis.
      Secara umum fungsi situs web adalah sebagai berikut:

1. Fungsi Komunikasi 

Situs web berfungsi sebagai komunikasi pada umumnya adalah web dinamis.Karena dibuat menggunakan pemrograman web (server side) maka dilengkapi dengan fasilitas yang memberikan fungsi-fungsi komunikasi seperti web mail ,formanthec, chatting, forum dan lain sebagainya.

      2. Fungsi Informasi

Menekankan pada kualitas konten,karena tujuan situs ini mnyampaikan isinya. Sebaiknya berisi teks dan grafik. Fasilitas yang memberikan fungsi informasi,news, file, company, library, prefences dan lain sebagainya.

      3. Fungsi Entertainment

Sebagai sarana hiburan/penggunaan animasi gambar dan element bergerak dapat meningkatkan mutu persentasi design, meski tetap harus mempertimbangkan kecepatan downloadnya. Contoh fungsi entertaiment: game online, film online, music online dan lain sebagainya

      4. Fungsi Transaksi

Situs web dapat dijadikan transaksi bisnis baik barang jasa, dan lain sebagainya. Situs web menghubungkan perusahaan konsumen dan komunitas tertentu melalui sarana elektronik. Pembayarannya bisa memudahkan kartu kredit, transfer ataupun membayar langsung.

5. Tugas Praktikum

      Membuat Desain Web

6. Hasil Praktikum

7. Kesimpulan

      Pada praktikum minggu ini, saya bersama tim membuat desain web Traveling dimana web ini adalah web yang menyediakan kolom untuk bercerita bagi para traveller dengan traveller lain disertai dengan foto asli dari mereka sendiri.

8. Referensi

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

https://tempatkursuskomputerautocad.wordpress.com/2016/05/27/656/amp/

https://id.wikipedia.org/wiki/Perancangan_web

Tugas Animasi 3D - Pekerjaan Animasi 3D

Animasi adalah gambar begerak berbentuk dari sekumpulan objek (gambar) yang disusun secara beraturan mengikuti alur pergerakan yang telah ditentukan pada setiap pertambahan hitungan waktu yang terjadi. Gambar tersebut dapat berupa gambar makhluk hidup, benda mati, ataupun tulisan.

Animator adalah seorang seniman yang menciptakan berbagai ragam gambar yang akan membentuk ilusi seolah-olah bergerak pada saat ditayangkan dengan cepat yang disebut dengan frame. Animator dapat bekerja dalam berbagai bidang seperti film, televisi, video game, dan Internet.

Berikut ini adalah beberapa lowongan pekerjaan untuk animator 3D dari dalam negeri :

1. 3D Animator BOBO.ID 

   Kompas Gramedia Group of Magazine dengan persyaratan: Min. Diploma Degree from Animation, Design Graphic, Illustration or equivalent. - Highly proficient in Software Blender, Maya, Flash, After Effects. Jakarta Barat (Jakarta Raya) - Kebon Jeruk

2. Senior 3D Artist

   PT Agate International, persyaratan yang dibutuhkan : Responsibilities Create high-quality concept and game assets. Partner with Game Designer to define the art direction and final looks of the games. Bandung (Jawa Barat)

3. 3D Animator

   PT Lyto Datarindo Fortuna, persyaratan yang dibutuhkan : Mampu membuat animasi dengan program Maya, 3DMax, Blender, Flash, After Effects. Kreatif dan detail. Mampu bekerja dalam tim. Mampu bekerja dengan. Jakarta Raya

Referensi :

• https://www.jobstreet.co.id/id/job-search/animator-jobs/
• Animator - Wikipedia bahasa Indonesia, ensiklopedia bebas
• Apa Itu Animasi? - IDS | International Design School