Selasa, 09 Juni 2020

Praktikum 15 - Otomasi Lintas Aplikasi


1. Tujuan 
Mahasiswa dapat mempelajari visual programming melalui tool untuk integrasi antar aplikasi

2. Alat
- Zapier (https://zapier.com/)
- EasyWebinar
- Microsoft Excel


3. Bahan 
tanpa bahan 


4. Dasar Teori 
Zapier adalah sebuah platform agregator atau penghubung antara aplikasi satu dengan aplikasi yang lainnya
EasyWebinar adalah platform webinar dimana pengguna dapat mengubah antara webinar langsung dan otomatis/evergree
Microsoft Excel adalah suatu program atau aplikasi yang merupakan bagian dari Microsoft Office yang berfungsi untuk mengolah angka yang terdiri dari baris dan kolom.
5. Tugas Praktikum
Menggunakan fasilitas pada Zapier untuk mengintegrasi antara EasyWebinar dengan Microsoft Excel. Fasilitas yang tersedia adalah merekap setiap pendaftaran webinar pada sebuah file Excel.
6. Petunjuk Praktikum
- Gunakan fasilitas integrasi EasyWebinar dan Zapier pada link berikut https://zapier.com/apps/easywebinar/integrations/excel
- Pilih New Webinar Registration sebagai Trigger dan Add Row
Ikuti langkah-langkah yang diperlukan seperti membuat akun Zapier dan EasyWebinar
- Lakukan pengujian antar teman dimana ada yang bagian membuat webinar, kemudian teman yang lain join ke webinar tersebut.
-Dokumentasikan semua yang telah dilakukan baik berhasil maupun gagal

7. Hasil Praktikum 


 












Klik link yang tersedia, kemudian isi New Webinar Registration sebagai Trigger dan Add Row. Selanjutnya klik tombol berwarna biru.











Tahap selanjutnya membuat akun, disini saya mendaftar menggunakan akun google.










Setelah mendaftar akan muncul halaman seperti atas, kemudian klik sign in EasyWebinar.









Setelah sign in akan di arahkan ke halaman baru, kemudian saya mengklik Zapier Integration namun terjadi error seperti gambar dibawah ini.








Akun Zapier error.










Setelah akun Zapier error, saya mencoba membuat akun EasyWebinar dengan link yang sudah tersedia, ketika saya ingin membuat akun kemudian diarahkan ke halaman beriku







Saya sudah mencoba untuk mengklik trial dan login tetep tidak bisa dan kembali ke halaman sebelumnya dan mewajibkan untuk membayar.







Kembali ke halaman ini



8. Kesimpulan 
Pada praktikum kali ini dapat disimpulkan bahwa saya mendapat pelajaran baru, yaitu melakukan programming menggunakan tool untuk integrasi antara aplikasi EasyWebinar dan Ms. Excel dengan menggunakan Zapier. Kendala yang saya alami saat praktikum adalah Zapier error dan ketika saya coba login ke EasyWebinar diharuskan membayar dan tidak bisa free trial.

9. Daftar Pustaka

Praktikum 13 - Membuat Rangkuman dari Tanya Jawab


1.     Apakah ada Bahasa khusus yang digunakan pada program visual?
- Bahasa visual, dan Bahasa programming
2.     Apakah setiap pemrograman dapat visualisasikan
- Bisa, tergantung logika programming dan visualnya
3.     Apakah ada proses penelitian sebelum sebuah aplikasi program visual dijalankan?
- Dengan teori user testing
4.     Jika ada complain dengan visual program, apakah perlu desain ulang?
- Tergantung hasil user testing dan tujuan pembuatan aplikasi
5.     Apa tujuan visual programming dengan coding biasa sama?
- Sama, hanya divisualkan saja
6.     Apa goals mata kuliah visual programming membuat program melalui visprog?
- Ya
7.     Apakah software unity termasuk visual programming?
- Tergantung hal apa yang dikerjakan dalam unity, tidak semua elemen unity masuk visual programming
8.     Apakah ada implementasi vis prog dalam bidang broadcast?
- Ada
9.     Software apakah?
- Tidak ada yang spesifik sama
10.  Apa ada dasar untuk mempelajari visual programming?
- Programming dan logika visual

Praktikum 12 - Resize Image Dengan Script di Adobe Photoshop


1. Tujuan 
Mahasiswa dapat mempelajari programming melalui kegiatan praktikum merisize ukuran pada photoshop

2. Alat
 Adobe Photoshop

3. Bahan 
Beberapa foto dalam satu folder

4. Dasar Teori 
Adobe Photoshop adalah aplikasi yang menganimasikan gambar dengan bagus atau dapat didefinisikan sebagai software editor citra yang dibuat oleh adobe systems yang berfungsi untuk mengidet foto atau gambar dan pembuatan efek.

5. Tugas Praktikum
Melakukan resize image dengan menggunakan scripting adobe photoshop

6. Hasil Praktikum 
- Buka Software adobe photoshop
- Setelah itu pilih File > Scripts > Image Processor


                                                             Gambar 1 Tampilan proses scripting

- Lalu pilih folder foto yang akan diresize
Gambar 2 Bagian untuk memilih folder dan mengatur ukuran untuk di resize

Gambar 3 gambar sebelum di resize

Gambar 4 gambar sesudah di resize

8. Kesimpulan 
Pada praktikum kali ini dapat disimpulkan bahwa praktikum pemrograman visual kali ini dapat melakukan me-resize foto pada adobe photoshop. Cara melakukannya mudah dengan pilih folder dan masukkan ukuran yang diinginkan. Hal tersebut juga sangat membantu saya, karena me-resize langsung satu folder. 

9. Daftar Pustaka

Praktikum 11 - Rangkuman


1. Tujuan 
Mahasiswa dapat menyimpulkan selama praktikum yang telah dilakukan dan keterkaitannya dengan mata kuliah pemrogaman visual.

2.Hasil Praktikum
PraksoftwareProject/ tujuanKaitannya dengan Prog vis
1Ms Word, Ms ExcelMembuat kumpulan sertifikatPada bagian mail mergeSplit and merge, menggabungkan dua aplikasi
2Ms Word, Ms ExcelMembuat kumpulan ID card/ name tagPada bagian mail merge, Split and merge, menggabungkan dua aplikasi
3Ms ExcelMembuat table rencana anggaranMenggunakan formula SUM untuk mengolah banyak data secara otomatis. 
5Hour of code hourofcode.comMenyelesaikan sebuah permainan hour of codeMenggunakan arah dan perintah yang sudah tersedia 
6Ms ExcelMenghitung nilai mata kuliahMenggunakan formula SUM untuk mengolah data otomatis
7Ms ExcelMenghitung nilai mata kuliah dengan VLOOKUPMenggunakan formula VLOOKUP untuk mengolah nilai otomatis
8Mendix.comMembuat satu aplikasiPengimportan file excel untuk ke mendix. Menggubah file excel menjadi aplikasi
9Google formMembuat google form pendaftaran untuk eventPengatur pertanyaan yang muncul berdasarkan jawaban secara otomatis
10Ms wordMembuat daftar isi otomatisDaftar isi dapat dibuat otomatis pada bagian table of contens

Jumat, 03 April 2020

Latihan Dasar Programming Multimedia - HTML Audio Playlist 2

HTML - Audio Playlist 

1. Tujuan 
Belajar Programming Multimedia dengan melakukan beberapa tutorial. 

2. Alat 
  • Visual Studio Code  
  • Browser (​Chrome​ / ​Firefox​) 
3. Bahan 
(Tanpa bahan) 

4. Dasar Teori

Javascript adalah sebuah bahasa komputer atau kode pemrograman yang digunakan pada website agar website tersebut menjadi lebih interaktif dan dinamis. Javascript adalah jenis bahasa pemrograman client side. Penggunaan kode javascript pada sebuah website bersifat opsional, artinya tidak harus selalu ada. Namun, website-website maupun blog modern saat ini hampir semuanya menggunakan kode javascript walaupun sedikit.
javascript berfungsi membuat sebuah halaman website lebih interaktif dan dinamis. Penggunaan kode javascript sangat dibutuhkan untuk website-website yang berorientasi pada kenyamanan pengakses (user-experience). Namun, penggunaan kode javascript ini tidak akan maksimal jika tidak dibarengi dengan penggunaan css karena javascript juga tidak akan lepas dari html.

  1. HTML: Memungkinkan Anda untuk menambahkan konten ke halaman web.
  2. CSS: Menentukan layout, style, serta keselarasan halaman website.
  3. JavaScript: Menyempurnakan tampilan dan sistem halaman web.
5. Tugas Praktikum 
Praktekkan 3 tutorial dari beberapa tutorial yang disediakan. 
Jika Tugas Akhir yang dikerjakan memiliki korelasi dengan mata kuliah ini, maka tugas  praktikum diganti dengan progress Tugas Akhir. Korelasi mata kuliah ditentukan oleh dosen. 

6. Petunjuk Praktikum 
1. Pilih 3 tutorial dari beberapa tutorial yang disediakan  
2. Praktekkan tutorial tersebut dalam waktu maksimal sebelum UTS  
3. Jika ada sisa waktu, boleh menambah 1 atau lebih tutorial yang disukai di luar tutorial  yang disediakan 
Berikut adalah daftar tutorial yang disediakan: 

Video / Webcam 
1. Build a Webcam Filter & Picture App With WebRTC & Canvas 
2. How to Take Picture From Webcam in Javascript Using Webcam.js | Webcam Capture in  Javascript
3. 11.8: Video Effects with Seriously.js - p5.js Tutorial
4. Create A Custom HTML5 Video Player
5. Custom HTML5 Video Player - #JavaScript30 11/30
6. Custom Video Player | CSS - JavaScript Tutorial
7. Teachable Machine  

Image 
8. Image Filters in JS | JavaScript Tutorials | Web Development Tutorials
9. ​CamanJS - Build An Image Filter Web App
10. JAVASCRIPT Grayscale filter script
11. 360° Image Panorama View using HTML,CSS and Javascript 

Gallery / Slideshow / Slider 
12. Portfolio Gallery Filter in Javascript
13. Simple JavaScript Slideshow In 5 Minutes
14. How To Create a Slider or Carousel in Minutes Using Glide.js
15. Responsive Touch Slider Using Html CSS & Swiper.js - 3D Responsive Slider Using  Swiper.js 

Audio 
16. Custom Audio Player | CSS - JavaScript Tutorial
17. How to Play Audio with JavaScript
18. HTML - Audio Playlist 

Animation 
19. Let's animate like Apple using GSAP and ScrollMagic for beginners - PART 1
20. Animated Page Transitions Tutorial: SERIES 2 - Barba JS and GSAP - PART 1
21. Creating Page Transition Animations EASILY with Swup
22. JavaScript Animation Tutorial with Anime.js 
23. Javascript Scroll Animation Tutorial | GSAP and ScrollMagic Tutorial 
24. Text Typing Effects By Using JavaScript
25.Text Animation using jquery plugin textillate - Advanced Technology
26. Learn Web Animation 

AR / VR / MR / XR / ... 
27. Easily code a virtual reality web experience with A-Frame (WebVR)
28.Augmented Reality with A-Frame
29. Easy Augmented Reality (AR) With JavaScript | AR.js | A-Frame
30. Augmented Reality in 10 lines of HTML 

7. Hasil Praktikum
https://youtu.be/vtZCMTtP-0Y



Pengerjaan di Visual Studio Code

Hasil Record

8. Kesimpulan
Pada praktikum kali ini dapat disimpulkan bahwa kita dapat membuat HTML - Audio Playlist dengan mudah menggunakan bahasa Javascript. kesulitan yang saya alami tidak terlalu banyak, hanya saja saya  kurang teliti pada saat mengerjakan, oleh sebab itu judul pada lagu tidak muncul. Tetapi pada saat saya mencoba lagi, judul lagu dapat muncul sesuai contoh yang diberikan.   

9. Referensi

Latihan Dasar Programming Multimedia - Text Typing Effects by Using Javascript 2

Text Typing Effects by Using Javascript

1. Tujuan 
Belajar Programming Multimedia dengan melakukan beberapa tutorial. 

2. Alat 
  • Visual Studio Code  
  • Browser (​Chrome​ / ​Firefox​) 
3. Bahan 
(Tanpa bahan) 

4. Dasar Teori

Javascript adalah sebuah bahasa komputer atau kode pemrograman yang digunakan pada website agar website tersebut menjadi lebih interaktif dan dinamis. Javascript adalah jenis bahasa pemrograman client side. Penggunaan kode javascript pada sebuah website bersifat opsional, artinya tidak harus selalu ada. Namun, website-website maupun blog modern saat ini hampir semuanya menggunakan kode javascript walaupun sedikit.
javascript berfungsi membuat sebuah halaman website lebih interaktif dan dinamis. Penggunaan kode javascript sangat dibutuhkan untuk website-website yang berorientasi pada kenyamanan pengakses (user-experience). Namun, penggunaan kode javascript ini tidak akan maksimal jika tidak dibarengi dengan penggunaan css karena javascript juga tidak akan lepas dari html.

  1. HTML: Memungkinkan Anda untuk menambahkan konten ke halaman web.
  2. CSS: Menentukan layout, style, serta keselarasan halaman website.
  3. JavaScript: Menyempurnakan tampilan dan sistem halaman web.
5. Tugas Praktikum 
Praktekkan 3 tutorial dari beberapa tutorial yang disediakan. 
Jika Tugas Akhir yang dikerjakan memiliki korelasi dengan mata kuliah ini, maka tugas  praktikum diganti dengan progress Tugas Akhir. Korelasi mata kuliah ditentukan oleh dosen. 

6. Petunjuk Praktikum 
1. Pilih 3 tutorial dari beberapa tutorial yang disediakan  
2. Praktekkan tutorial tersebut dalam waktu maksimal sebelum UTS  
3. Jika ada sisa waktu, boleh menambah 1 atau lebih tutorial yang disukai di luar tutorial  yang disediakan 
Berikut adalah daftar tutorial yang disediakan: 

Video / Webcam 
1. Build a Webcam Filter & Picture App With WebRTC & Canvas 
2. How to Take Picture From Webcam in Javascript Using Webcam.js | Webcam Capture in  Javascript
3. 11.8: Video Effects with Seriously.js - p5.js Tutorial
4. Create A Custom HTML5 Video Player
5. Custom HTML5 Video Player - #JavaScript30 11/30
6. Custom Video Player | CSS - JavaScript Tutorial
7. Teachable Machine  

Image 
8. Image Filters in JS | JavaScript Tutorials | Web Development Tutorials
9. ​CamanJS - Build An Image Filter Web App
10. JAVASCRIPT Grayscale filter script
11. 360° Image Panorama View using HTML,CSS and Javascript 

Gallery / Slideshow / Slider 
12. Portfolio Gallery Filter in Javascript
13. Simple JavaScript Slideshow In 5 Minutes
14. How To Create a Slider or Carousel in Minutes Using Glide.js
15. Responsive Touch Slider Using Html CSS & Swiper.js - 3D Responsive Slider Using  Swiper.js 

Audio 
16. Custom Audio Player | CSS - JavaScript Tutorial
17. How to Play Audio with JavaScript
18. HTML - Audio Playlist 

Animation 
19. Let's animate like Apple using GSAP and ScrollMagic for beginners - PART 1
20. Animated Page Transitions Tutorial: SERIES 2 - Barba JS and GSAP - PART 1
21. Creating Page Transition Animations EASILY with Swup
22. JavaScript Animation Tutorial with Anime.js 
23. Javascript Scroll Animation Tutorial | GSAP and ScrollMagic Tutorial 
24. Text Typing Effects By Using JavaScript
25.Text Animation using jquery plugin textillate - Advanced Technology
26. Learn Web Animation 

AR / VR / MR / XR / ... 
27. Easily code a virtual reality web experience with A-Frame (WebVR)
28.Augmented Reality with A-Frame
29. Easy Augmented Reality (AR) With JavaScript | AR.js | A-Frame
30. Augmented Reality in 10 lines of HTML 

7. Hasil Praktikum
https://youtu.be/5lo_QdeWm_g


Pengerjaan di Visual Studio Code

Hasil Record

8. Kesimpulan
Pada praktikum kali ini dapat disimpulkan bahwa kita dapat membuat Text Typing Effect dengan mudah menggunakan bahasa Javascript. kesulitan yang saya alami tidak terlalu banyak, hanya saja saya  kurang teliti pada saat mengerjakan, oleh sebab itu teks tidak muncul. Tetapi saya mencoba terus beberapa kali, dan akhirnya teks dapat muncul sesuai contoh yang diberikan.   

9. Referensi

Praktikum 15 - Otomasi Lintas Aplikasi

1. Tujuan  Mahasiswa dapat mempelajari visual programming melalui tool untuk integrasi antar aplikasi 2. Alat - Zapier (https://zapier....