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

Praktikum 6 – Intro to GreenSock Animation Platform

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

ALAT
Codepen

Greensock JS

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

KESIMPULAN

REFERENSI

https://greensock.com/jump-start-js

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