Praktikum 10 Membuat Ads Banner (part 2)

Prak 10 – Membuat Ads Banner (part 2)

1. Tujuan

Belajar membuat Ads Banner berbasis HTML 5

2.Alat & Bahan

Text Editor
Browser
spritesheet.png
spritesheet.css

3. Dasar Teori

1. Pengertian CSS Linear Gradient

adalah sebuah CSS untuk membuat warna gradiasi yang terdiri dari dua atau lebih susunan warna dan disusun secara lurus (Linear). Dalam penulisan nya di CSS sebagai berikut :
background: linear-gradient (titik awal / derajar, warna 1, warna 2, warna-n);.

2. Teknik horizontal centering di CSS 

Yaitu dengan mengatur margin: 0; position: absolute; left: 0; right: 0;
dengan memberi angka margin = 0 maka otomatis akan berada di center / tengah
dengan posisi absolute maka posisi menjadi tetap dan left right = 0 agar bagian kiri dan kanan tetap 0 alias tidak bergeser ke kanan dan ke kiri tetap di tengah.

4. Tugas Praktikum

Menirukan petunjuk praktikum yang di berikan.

5. Hasil Praktikum

1. Mengaplikasikan CSS Linear Gradient



2. Menambahkan Sprite berikut nya



3. Me-resize sprite menggunakan CSS

REFERENSI

http://www.mohhasbias.com/prak-10-membuat-ads-banner-part-2/
http://www.ariona.net/bermain-main-dengan-css3-gradient/

Read More

Praktikum 8 Membuat Ads Banner

Prak 08 – Membuat Ads Banner

1. Tujuan

Belajar membuat Ads Banner berbasis HTML 5

2.Alat & Bahan

Text Editor
Browser
spritesheet.png
spritesheet.css

3. Dasar Teori

1. Pengertian Banner Ads

adalah Iklan yang ditampilkan dalam bentuk banner kepada target audience di situs yang sudah ditentukan untuk meningkatkan awareness dan menstimulasi tindakan yang berakhir ke penjualan.

2. Perbedaan Flash Based Banner dengan HTML 5 Banner

Flash banner ads adalah iklan yang berupa animasi tulisan bergerak. Html5 banner adalah membuat iklan website dengan basis html5 atau web berbasis html5

4. Tugas Praktikum

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 Praktikum





REFERENSI

http://www.mohhasbias.com/prak-08-membuat-ads-banner/

Read More

Praktikum 7 Membuat CSS Spritesheet

Prak 07 – Membuat CSS Spritesheet

1. Tujuan

Mengenal dan membuat CSS Spritesheet dari kumpulan gambar

2.Alat & Bahan

Adobe Photoshop / Gimp / Preview / PowerPoint
Royalti Free Image

3. Dasar Teori

1. CSS Spritesheet

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

2. Kelebihan CSS Spritesheet

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.

3.Cara Membuat CSS Spritesheet

Untuk membuat image dan CSS sprites dapat secara manual atau menggunakan CSS sprites generator yang banyak tersedia secara online. Tapi kalau tidak puas atau bingung dengan CSS sprites generator, dapat membuatnya sendiri. Untuk membuat css sprites, hal pertama yang harus dilakukan membuat image sprites atau gambar yang merupakan hasil penyatukan gambar-gambar yang akan digunakan. bisa gunakan tool favorit atau image merge online atau memakai GIMP.

4. Tugas Praktikum

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 Praktikum





REFERENSI

http://www.mohhasbias.com/prak-07-membuat-css-spritesheet/

Read More