Praktikum 8 - Membuat Ads Banner

Membuat Ads Banner berbasis HTML5

1. Tujuan

Belajar membuat Ads Banner berbasis HTML5.

2. Alat dan Bahan

JS Fiddle

spritesheet.css

spritesheet.png

3. Dasar Teori

Banner ads adalah bentuk iklan yang dipakai di jaringan Internet. Bentuk iklan daring ini biasanya merupakan bagian dari suatu halaman web yang dipakai untuk menarik perhatian penjelajah supaya mengunjungi situs web yang dimaksud. Spanduk ini biasanya dibuat menggunakan format gambar (JPG, GIF, PNG), skrip Java, dan objek multimedia lainnya. Spanduk modern bahkan sudah disertai suara dan animasi sehingga terlihat lebih menarik. Ada berbagai ukuran yang dipakai, mulai dari yang sangat kecil, melebar, memanjang, hingga yang melintang.

4. Tugas

membuat Ads Banner berbasis HTML5

5. Hasil

Read More [...]

Praktikum 7 - Membuat CSS Spitesheet

Membuat CSS Spritesheet

1. Tujuan

Mengenal dan membuat CSS Spritesheet dari kumpulan gambar.

2. Alat dan Bahan

Adobe Photoshop

image
JS Fiddle

3. 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

4. Tugas 

A. Mencari royalti free assets atau CC (Creative Commons)

carilah kumpulan gambar yang bersifat royalti free dengan kategori berikut:
1. pin point marker
2. shadow
3. surf board
4. gambar pantai dengan langit dihapus
5. gambar langit dengan awan
6. gambar berisi tulisan

B. Gabung 6 gambar tersebut dalam 1 gambar dengan format PNG with transparency

C. Buat file CSS yang berisi definisi spritesheet dari gambar tersebut

D. Buat file HTML untuk mengecek CSS Spritesheet yang dibuat

5. Hasil

Read More [...]

Intro to GreenSock Animation Platform

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

 image

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

1. Relative Tween

2. Basic tween

3. Easing

4. Delay

5. Multiple properties
6. From Tweens

Read More [...]