Praktikum 6 - Intro to GreenSock Animation Platform

1. Tujuan

Mengenal GreenSock Animation Platform. Yaitu sebuah library javascript untuk membuat animasi.

2. Alat dan Bahan

GreenSock JS

JS Fiddle

3. Dasar Teori

Arti dari Animation Platform

contoh penggunaan GSAP

4. Tugas Praktikum

Tulis kembali semua demo yang disediakan oleh GSAP JumpStart. Buat JSFiddle untuk masing-masing slide dari demo tersebut. Sehingga diperoleh kurang lebih 10 JSFiddle.

5. Hasil Praktikum

a. Basic tween

b.Relative Tween

c. Easing

d. Delay

e. Animate Multiple Properties

f. From Tweens

g. Mutiple Targets

h. Event Callbacks

j. Tween Reference

k. Control Playback

6. Referensi

Greensock Jump Start

Read more »

Praktikum 5 - Image Capture With Browser

1. Tujuan
Mengenal contoh kode untuk mengakses webcam dan melakukan snapshot.

2.Alat

1. Komputer
2. Notepad ++
3. HTTPS server

3. Dasar Teori

GetUserMedia 

GetUserMedia merupakan sebuah sintaks baru yang ada dalam HTML5 yang berguna untuk mengambil multimedia berupa kamera dan mikrofon dari alat komunikasi yang ada seperti notebook dan smartphone. Dengan sintaks ini penulis dapat mengambil data gambar dari kamera dan memasukannya kedalam HTML5 sehingga dapat diproses langsung oleh berbagai web browser

HTTPS

Hypertext Transfer Protokol Secure (HTTPS) adalah versi aman dari HTTP, protokol komunikasi dari World Wide Web. Ditemukan oleh Netscape Communications Corporation untuk menyediakan autentikasi dan komunikasi tersandi dan penggunaan dalam komersi elektris.

4.Tugas praktikum

Buatlah file index.html yang berisi kode untuk mengakses kamera dan tombol snapshot. Upload file tersebut ke hosting yang support HTTPS.

 

5.Hasil Praktikum

 

Demo Praktikum (klik) 

6. Referensi

https://davidwalsh.name/browser-camera

 

Read more »

Praktikum 4 - Editor gambar menggunakan Caman JS

1. Tujuan

Mengenal cara menyajikan file gambar dilengkapi button filter menggunakan camanjs.

2. Alat

Notepad ++

3. Bahan

• Jquery
• Bootstrap
• Camanjs

4. Dasar teori

Caman js
CamanJS kepanjangan dari  Canvas Manipulation JavaScript adalah manipulasi kanvas  dalam Javascript. Ini adalah kombinasi dari interface yang sederhana digunakan dengan teknik editing gambar / kanvas yang canggih dan efisien.
CamanJS sangat mudah untuk memperluas atau memberikan filter baru dan plugin, dan dilengkapi dengan beragam fungsi editing gambar. Camanjs adalah library independen yang bekerja baik dalam NodeJS dan browser.

5. Tugas Praktikum 
Menyajikan gambar dan tombol untuk mengubah filter gambar.

6. Hasil Praktikum
Demo Hasil Praktikum (kilk) 

7. Referensi

http://www.sitepoint.com/manipulating-images-web-pages-camanjs/

Read more »