Friday, April 22, 2016

Praktikum 7 - CSS Spritesheet

Tujuan
Mengenal dan membuat CSS Spritesheet dari kumpulan gambar.

Alat
Codepen

Bahan
royalti free image

Dasar Teori

CSS Sprite
Teknik css sprite adalah teknik untuk menggabungkan beberapa images menjadi satu supaya dalam pemanggilan images hanya satu yang dipanggil meski yang digunakan adalah images yang berbeda sekaligus mengurangi permintaan http://. 
Untuk membuat CSS Sprite, yang harus diperhatikan adalah posisi gambar (background-position), ukuran gambar (width - height), dan pengulangan gambar (background-repeat). Posisi dan ukuran gambar nantinya akan menentukan peletakan gambar, sedangkan pengulangan gambar akan berpengaruh terhadap tampilan gambar yang dihasilkan. Untuk itu gunakan CSS Sprite ini pada gambar - gambar yang tidak diulang (no-repeat)

Kelebihan CSS Sprite
Menggunakan css sprite bisa  mempercepat  dalam loading gambar karena dengan meletakkan beberapa gambar dalam 1 file gambar, dapat menghemat proses request gambar ke server. Keuntungan yang lainnya, dan merupakan keuntungan utama dari penggunaan CSS sprite adalah penggunaan bandwidth akan menjadi semakin hemat

Tugas Praktikum




Kesimpulan

Wednesday, April 13, 2016

Praktikum 6 – Intro to GreenSock Animation Platform

TUJUAN
Mengetahui cara merekam gambar pada browser dengan menggunakan HTML dan Javascript

ALAT
Codepen


BAHAN
sembarang image


DASAR TEORI

                          ------------------x------------------

TUGAS PRAKTIKUM
Menulis kembali demo yang disediakan oleh GSAP JumpStart


HASIL PRAKTIKUM
Pada praktikum ini saya menggunakan Codepen bukan jsFiddle.
Screenrecord:


1. Basic Tween

2. Easing

3. Delay

4. Animate Multiple Properties

5. From Tweens

6. Relative Tweens

7. Multiple Targets

8. Tween Reference

9. Control Playbacks

10. Repeat

Thursday, April 7, 2016

Praktikum 5 - Camera Capture with HTML 5

Tujuan
Mengetahui cara merekam gambar pada browser dengan menggunakan HTML dan Javascript


Alat
Notepad ++


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.

Tugas Praktikum 
Menyajikan gambar dan tombol untuk mengubah filter gambar.



Hasil Praktikum


Camera capture akan berhasil dijalankan dengan catatan dibuka dengan menggunakan alamat "https://" didepannya.. apabila link diatas tidak berhasil, silahkan kunjungi lihat demo