Praktikum - 10 Membuat Ads Banner (part2)

Membuat Ads Banner (part2)

1. Tujuan

Belajar membuat Ads Banner berbasis HTML5.

2. Alat dan Bahan

JSFiddle

spritesheet.png
spritesheet.css

3. Dasar Teori

CSS Linear Gradient

Teknik Horizontal Centering

salah satu teknik horizontal centering untuk image adalah dengan menggunakan property text-align: center;. property ini bisa digunakan pada elemen HTML yang memiliki property display: block. sebagai ilustrasi, perhatikan kode berikut. kode tersebut mensimulasikan sebuah skenario dimana terdapat container dari sebuah gambar yang memiliki ukuran lebih besar dari gambar tersebut.

4. Tugas 

Mengaplikasikan CSS Linear Gradient

Menambahkan sprite berikutnya

Me-resize sprite menggunakan CSS

5. Hasil Praktikum 

 a. Mengaplikasikan CSS Linear Gradient

b. Menambahkan sprite berikutnya



 c. Me-resize sprite menggunakan CSS

 6. Referensi

www.mohhasbias.com
http://mohhasbias.github.io/blog/2014/06/07/absolute-center-using-css/
Creating an HTML5 Banner Ad with GreenSock (GSAP)

Read more »

Praktikum7-membuat Css Spritesheet

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

6. Refrensi

www.mohhasbias.com

Read more »

Praktikum8-membuat Ads banner dengan HTML 5

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

6. Referensi

www.mohhasbias.com

Read more »