Prak.13 – Merangkum Sesi Tanya Jawab

1. Tujuan

Belajar Programming melalui kegiatan merangkum jawaban dari pertanyaan yang diajukan

2. Alat

  1. Catatan

3. Bahan

  1. (Tanpa bahan)

4. Dasar Teori

Visual programming adalah pembuatan program tanpa menggunakan metode konvensional   (mengetik dalam bentuk code). Pemrograman secara visual menghemat banyak waktu dan tenaga   karena mudah dan code yang   dihasilkan dari design secara visual adalah “computer generated”   sehingga mengurangi   kemungkinan terjadinya kesalahan. pemrograman visual sendiri   memanfaatkan atau mengunakan   visualisasi dimana didalamnya terdapat penggunaan refrensentasi   visual (grafik, gambar atau   animasi) untuk menggambarkan program,data,struktur atau tingkah   laku dinamis system yang   kompleks.

 

Dalam pengeksekusian kode programnya, pemrograman visual menggunakan konsep event-driven, yaitu pengeksekusian yang didasarkan atas kejadian tertentu. Setiap kejadian tersebut mempunyai kode program sendiri yang disimpan dalam sebuah fungsi. Berbeda dengan pemrograman terstruktur atau procedural yang mengeksekusi kode-kode programnya mulai dari awal sampai akhir program secara beruntun.

5. Tugas Praktikum

Buatlah rangkuman dengan jawaban dari pertanyaan yang didiskusikan

6. Hasil Praktikum

  1. Program visual apa ada bahasa khusus yang umumnya digunakan?

= belum ada >bahasa visual

  1. Setiap pemrograman apakah dapat di visualkan?

=bisa

  1. Untuk mempermudah user untuk berinteraksi apakah aplikasi program visual juga memerlukan penelitian data dari user sebelum dibuat?

= ada yang namanya user testing

  1. Apa jika user memberi banyak komplain terkait program yang dibuat apa perlu di desain ulang?

= itu juga termasuk user testing, pengambilan data dari user.

  1. Program visual apa tujuan nya berbeda dengan pemrograman yang biasa/ngoding?

= sama tujuannya.

  1. Apa nanti goals dari mata kuliah kita akan membuat sebuah program melalui vispro?

= Ya

  1. Apakah software unity termasuk vispro?

= tergantung

  1. Apakah implementasi visual programming di bidang broadcast?

=Ada

  1. software visual programming yang biasanya dipakai di industri multimedia Broadcasting

=tidak ada yang spesifik, ada yang msp

  1. Dasar yang diperlukan untuk mempelajari visual programming?

=programming

8. Kesimpulan

Setelah mengikuti sesi tanya jawab, dapat disimpulkan bahwa program visual bertujuan sama dengan program Coding, namun dengan software dan pengerjaan yang berbeda.

Prak.8 Image Filter

1. Tujuan

Mahasiswa dapat mempelajari programming multimedia dengan melakukan beberapa tutorial.

2. Alat

1. Visual Studio Code
2. Browser

3. Bahan

Tanpa bahan

4. Dasar Teori

Bahasa pemrograman multimedia adalah bahasa – bahasa yang dipakai programmer untuk menuliskan kumpulan – kumpulan intruksi (program) dalam multimedia.

5. Tugas Praktikum

Mempraktikkan bebrapa tutorial yang telah disediakan pada modul.

6. Petunjuk Praktikum

– Memilih 3 tutorial
– Mempraktikkan tutorial dalam waktu maksimal sebelum UTS
– Jika ada sisa waktu, boleh menambah 1 tutorial

7. Hasil Praktikum

Screenshot (93).png

Screenshot (94).png

8. Kesimpulan

dari percobaan diatas, saya telah menyelesaikannya dari percobaan sebelumnya dan berhasil ,saya dapat membuat image filter sesuai dengan tutorial yang telah diberikan.

Prak.7 Image Filter

1. Tujuan

Mahasiswa dapat mempelajari programming multimedia dengan melakukan beberapa tutorial.

2. Alat

1. Visual Studio Code
2. Browser

3. Bahan

Tanpa bahan

4. Dasar Teori

Bahasa pemrograman multimedia adalah bahasa – bahasa yang dipakai programmer untuk menuliskan kumpulan – kumpulan intruksi (program) dalam multimedia.

5. Tugas Praktikum

Mempraktikkan bebrapa tutorial yang telah disediakan pada modul.

6. Petunjuk Praktikum

– Memilih 3 tutorial
– Mempraktikkan tutorial dalam waktu maksimal sebelum UTS
– Jika ada sisa waktu, boleh menambah 1 tutorial

7. Hasil Praktikum

Screenshot (90).png

8. Kesimpulan

dari percobaan diatas, saya belum menyelesaikan codingannya sehingga masih membutuhkan beberapa waktu.

Prak.6 360 Panorama

1. Tujuan

Belajar Programming Multimedia dengan melakukan beberapa tutorial.

2. Alat

  1. Visual Studio Code
  2. Browser (Chrome / Firefox)

3. Bahan

Laptop

4. Dasar Teori

JavaScript adalah salah satu bahasa pemrograman yang paling banyak digunakan dalam kurun waktu dua puluh tahun ini. Bahkan JavaScript juga dikenal sebagai salah satu dari tiga bahasa pemrograman utama bagi web developer:

  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.

Javascript membuat website menjadi lebih responsif jadi apabila tidak ada tidak masalah tapi akan sangat berpengaruh pada tampilan website. Anda bisa mengibaratkan pada rumah Anda. Mungkin tidak masalah tidak menggunakan lampu atau tidak dipasang pintu tapi tentu kesannya rumah akan suram dan kurang menarik. Begitu pula dengan website, tidak adanya javascript membuat website kurang menarik.

5. Tugas Praktikum

Praktekkan 3 tutorial dari beberapa tutorial yang disediakan.

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

7. Hasil Praktikum

Screenshot (88).png

8. Kesimpulan

dari percobaan diatas, saya dapat menampilkan gambar dalam bentuk 360 panorama menggunakan html sesuai dengan tutorial yang telah diberikan.

Prak.5 Audio Player

1. Tujuan

Belajar Programming Multimedia dengan melakukan beberapa tutorial.

2. Alat

  1. Visual Studio Code
  2. Browser (Chrome / Firefox)

3. Bahan

Laptop

4. Dasar Teori

JavaScript adalah salah satu bahasa pemrograman yang paling banyak digunakan dalam kurun waktu dua puluh tahun ini. Bahkan JavaScript juga dikenal sebagai salah satu dari tiga bahasa pemrograman utama bagi web developer:

  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.

JavaScript digunakan pada Web pages untuk meningkatkan design,
validate forms, detect browsers, create cookies, GUI dsb

Java dan JavaScript adalah dua bahasa yang berbeda baik dari sisi konsep maupun dari sisi desain. Java (dikembangkan oleh Sun Microsystems) adalah sebuah bahasa pemrograman yang powerful & sangat kompleks – sama dengan C & C++.

  • JavaScript dirancang untuk menambah interaktif HTML pages
  •  JavaScript adalah bahasa scripting (bahasa scripting adalah sebuah
    lightweight programming language)
  •  JavaScript terdiri dari baris-baris code executable computer
  •  JavaScript biasanya embedded secara langsung pada HTML pages
  •  JavaScript adalah interpreted language (artinya bahwa scripts dijalankan
    tanpa di kompile terlebih dahulu)
  •  Setiap orang dapat menggunakan JavaScript tanpa harus membeli license

5. Tugas Praktikum

Praktekkan 3 tutorial dari beberapa tutorial yang disediakan.

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

7. Hasil Praktikum

Screenshot (86).png

Screenshot (87).png

Screenshot (85).png

8. Kesimpulan

dari percobaan diatas, saya dapat membuat audio player menggunakan html dan javasript sesuai tutorial yang telah diberikan tanpa ada kendala ,karena di laptop saya hanya ada 2 audio, jadi saya hanya bisa menginputkan 2 audio saja.

Prak.4 JavaScript Slide Show

1. Tujuan

Belajar Programming Multimedia dengan melakukan beberapa tutorial.

2. Alat

  1. Visual Studio Code
  2. Browser (Chrome / Firefox)

3. Bahan

Laptop

4. Dasar Teori

JavaScript adalah salah satu bahasa pemrograman yang paling banyak digunakan dalam kurun waktu dua puluh tahun ini. Bahkan JavaScript juga dikenal sebagai salah satu dari tiga bahasa pemrograman utama bagi web developer:

  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.

JavaScript digunakan pada Web pages untuk meningkatkan design,
validate forms, detect browsers, create cookies, GUI dsb

Java dan JavaScript adalah dua bahasa yang berbeda baik dari sisi konsep maupun dari sisi desain. Java (dikembangkan oleh Sun Microsystems) adalah sebuah bahasa pemrograman yang powerful & sangat kompleks – sama dengan C & C++.

  • JavaScript dirancang untuk menambah interaktif HTML pages
  •  JavaScript adalah bahasa scripting (bahasa scripting adalah sebuah
    lightweight programming language)
  •  JavaScript terdiri dari baris-baris code executable computer
  •  JavaScript biasanya embedded secara langsung pada HTML pages
  •  JavaScript adalah interpreted language (artinya bahwa scripts dijalankan
    tanpa di kompile terlebih dahulu)
  •  Setiap orang dapat menggunakan JavaScript tanpa harus membeli license

5. Tugas Praktikum

Praktekkan 3 tutorial dari beberapa tutorial yang disediakan.

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

7. Hasil Praktikum

Screenshot (84).png

Screenshot (83).png

8. Kesimpulan

dari percobaan diatas, saya dapat membuat image slide show menggunakan html berdasarkan tutorial yang telah di berikan, tidak ada kendala yang saya alami selama mencoba.

Prak.3 Text typing Effect

1. Tujuan

Belajar Programming Multimedia dengan melakukan beberapa tutorial.

2. Alat

  1. Visual Studio Code
  2. Browser (Chrome / Firefox)

3. Bahan

  1. Laptop

4. Dasar Teori

Multimedia adalah penggunaan komputer untuk menyajikan dan menggabungkan teks, suara, gambar, animasi, audio dan video dengan alat bantu (tool) dan koneksi (link) sehingga pengguna dapat melakukan navigasi, berinteraksi, berkarya dan berkomunikasi. Sedangkan Programming sendiri adalah sebuah proses seseorang menulis, memperbaiki, menguji, dan memelihara kode-kode dalam membuat sebuah program komputer.

HTML adalah bahasa mark up web yang utama dan dijalankan secara alami di setiap browser serta di-maintain oleh World Wide Web Consortium.

Berdasarkan cara kerja HTML, Anda bisa menggunakannya untuk membuat struktur konten pada website dan aplikasi web. HTML merupakan level terbawah dari teknologi frontend dan berfungsi sebagai dasar styling yang bisa Anda tambahkan dengan CSS dan fungsionalitas yang dapat dijalakan menggunakan JavaScript.

5. Tugas Praktikum

Mempraktikkan 3 tutorial dari beberapa tutorial yang disediakan.

6. Hasil Praktikum

  1. Hasil praktikum yang pertama saya membuat text typing effect menggunakan javascript. Disini saya menggunakan software visual code.

Berikut merupakan hasil percobaan saya.

Screenshot (77).png

7. Kesimpulan

dari percobaan diatas, saya dapat membuat text typing effect tanpa anda kendala karena tutorial sudah sangat jelas

Prak.2 Latihan Dasar Programming Multimedia

1. Tujuan

Belajar Programming Multimedia dengan melakukan beberapa tutorial.

2. Alat

  1. Adobe Dreamweaver CC 2015
  2. Google Chrome

3. Bahan

File Video

4. Dasar Teori

 

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

  1. Image Filters in JS | JavaScript Tutorials | Web Development Tutorials
  2.  CamanJS – Build An Image Filter Web App
  3. JAVASCRIPT Grayscale filter script
  4. 360° Image Panorama View using HTML,CSS and Javascript

Gallery / Slideshow / Slider

  1. Portfolio Gallery Filter in Javascript
  2. Simple JavaScript Slideshow In 5 Minutes
  3. How To Create a Slider or Carousel in Minutes Using Glide.js
  4. Responsive Touch Slider Using Html CSS & Swiper.js – 3D Responsive Slider Using Swiper.js

Audio

  1. Custom Audio Player | CSS – JavaScript Tutorial
  2. How to Play Audio with JavaScript
  3. HTML – Audio Playlist

Animation

  1. Let’s animate like Apple using GSAP and ScrollMagic for beginners – PART 1
  2. Animated Page Transitions Tutorial: SERIES 2 – Barba JS and GSAP – PART 1
  3. Creating Page Transition Animations EASILY with Swup
  4. JavaScript Animation Tutorial with Anime.js
  5. Javascript Scroll Animation Tutorial | GSAP and ScrollMagic Tutorial
  6. Text Typing Effects By Using JavaScript
  7. Text Animation using jquery plugin textillate – Advanced Technology
  8. Learn Web Animation

AR / VR / MR / XR / …

  1. Easily code a virtual reality web experience with A-Frame (WebVR)
  2. Augmented Reality with A-Frame
  3. Easy Augmented Reality (AR) With JavaScript | AR.js | A-Frame
  4. Augmented Reality in 10 lines of HTML

7. Hasil Praktikum

Screenshot (51).png

 

 

 

8. Kesimpulan

dari percobaan diatas, saya mencoba untuk mengikuti tutorial membuat video player dengan HTML5 dan javascript, dan saya berhasil membuat video player dengan HTML5 dan javascript

Prak.1 Latihan Dasar Programming Multimedia

1. Tujuan

Belajar Programming Multimedia dengan melakukan beberapa tutorial.

2. Alat

  1. Adobe Dreamweaver CC 2015
  2. Google Chrome

3. Bahan

File Video

4. Dasar Teori

 

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

  1. Image Filters in JS | JavaScript Tutorials | Web Development Tutorials
  2.  CamanJS – Build An Image Filter Web App
  3. JAVASCRIPT Grayscale filter script
  4. 360° Image Panorama View using HTML,CSS and Javascript

Gallery / Slideshow / Slider

  1. Portfolio Gallery Filter in Javascript
  2. Simple JavaScript Slideshow In 5 Minutes
  3. How To Create a Slider or Carousel in Minutes Using Glide.js
  4. Responsive Touch Slider Using Html CSS & Swiper.js – 3D Responsive Slider Using Swiper.js

Audio

  1. Custom Audio Player | CSS – JavaScript Tutorial
  2. How to Play Audio with JavaScript
  3. HTML – Audio Playlist

Animation

  1. Let’s animate like Apple using GSAP and ScrollMagic for beginners – PART 1
  2. Animated Page Transitions Tutorial: SERIES 2 – Barba JS and GSAP – PART 1
  3. Creating Page Transition Animations EASILY with Swup
  4. JavaScript Animation Tutorial with Anime.js
  5. Javascript Scroll Animation Tutorial | GSAP and ScrollMagic Tutorial
  6. Text Typing Effects By Using JavaScript
  7. Text Animation using jquery plugin textillate – Advanced Technology
  8. Learn Web Animation

AR / VR / MR / XR / …

  1. Easily code a virtual reality web experience with A-Frame (WebVR)
  2. Augmented Reality with A-Frame
  3. Easy Augmented Reality (AR) With JavaScript | AR.js | A-Frame
  4. Augmented Reality in 10 lines of HTML

7. Hasil Praktikum

Screenshot (51).png

Screenshot (50).png

 

 

8. Kesimpulan

dari percobaan diatas, saya mencoba untuk mengikuti tutorial membuat video player dengan HTML5 dan javascript, namun percobaan saya belum selesai dan masih sampai di tahap modifikasi tampilan dari video player tersebut

Prak.12 Menggunakan Fasilitas Otomasi dalam Photoshop

Tujuan

Belajar Programming yang dikemas dalam bentuk non-formal pada aplikasi design contohnya Photoshop.

Alat dan Bahan

  • Adobe Photoshop (Actions)
  • Kumpulan Foto

Dasar teori

Adobe Photoshop, atau biasa disebut Photoshop, adalah perangkat lunak editor citra buatan Adobe Systems yang dikhususkan untuk pengeditan foto/gambar dan pembuatan efek. Perangkat lunak ini banyak digunakan oleh fotografer digital dan perusahaan iklan sehingga dianggap sebagai pemimpin pasar (market leader) untuk perangkat lunak pengolah gambar/foto, dan, bersama Adobe Acrobat, dianggap sebagai produk terbaik yang pernah diproduksi oleh Adobe Systems. Versi kedelapan aplikasi ini disebut dengan nama Photoshop CS (Creative Suite), versi sembilan disebut Adobe Photoshop CS2, versi sepuluh disebut Adobe Photoshop CS3, versi kesebelas adalah Adobe Photoshop CS4, versi keduabelas adalah Adobe Photoshop CS5, versi ketigabelas adalah CS6, dan versi terbaru adalah Adobe Photoshop CC.[1]

Hasil Praktikum

  • Siapkan folder yang berisi beberapa foto dan buka software adobe.
  • Klik tools file, scripts, dan image processor
  • Pilih folder yang akan dipilih
  • Ubah ukuran gambar sesuai keinginan. disini saya merubahnya menjadi 640px.
  • Setelah di run, folder akan secara otomatis membuat folder baru yang berisikan seluruh gambar dengan ukuran yang telah disesuaikan.
  • Proses resize telah selesai. setelah di cek kembali, ukuran awal pada foto adalah sebagai berikut.
  • Kemudian setelah di resize hasilnya seperti dibawah ini.

Kesimpulan

dari percobaan diatas saya dapat mengubah ukuran gambar menggunakan scripting tool pada adobe photoshop