Praktikum 11- Menggunakan Google Fonts

1. Tujuan

Belajar menggunakan external font dari Google Fonts

2. Alat dan Bahan

Notepad
Browser
Js Fiddle
spritesheet.png
spriteshheet.css

3. Dasar Teori

Google Font adalah salah satu layanan yang disediakan Google untuk memudahkan web developer dalam menghasilkan desain yang menarik dengan meyediakan font-font gratis. Fitur ini dapat anda akses pada alamat: https://www.google.com/fonts.

Google menyediakan 3 cara untuk ‘menghubungkan’ Google font dengan halaman HTML kita, yakni dengan menggunakan tag <link></link>, perintah CSS @import, dan dengan JavaScript. Ketiga cara ini relatif tidak terlalu berbeda dari cara penggunaanya. Tnggal copy paste kode tersebut ke halaman HTML.


4. Hasil Praktikum

Without Adding Google Font

Adding Google Font
5. Referensi

www.google.com/fonts

http://www.duniailkom.com/tutorial-belajar-css-cara-menggunakan-google-font-dengan-css/

Prak 10 – Membuat Ads Banner (part 2)

1. Tujuan

Belajar membuat Ads Banner berbasis HTML5.

2. Alat

Text Editor
Browser

3. Bahan

spritesheet.png
spritesheet.css

4. Dasar Teori

Gunakan pertanyaan berikut untuk menuliskan dasar teori yang relevan

Jelaskan yang dimaksud dengan CSS Linear Gradient!

Jelaskan teknik horizontal centering di CSS!

5. Hasil Praktikum

6. Referensi

Creating an HTML5 Banner Ad with GreenSock (GSAP)

Aku dan Surabaya : Kuliah Pulkam - Kuliah Pulkam (Kupu-kupu)

Banyak temen-temen yang bilang bahwa saya ada adalah orang yang kaku, kaku dalam artian setelah kuliah pulang, kuliah pulang.. jadi mahasiswa kupu-kupu, tetapi.

Praktikum 08 – Membuat Ads Banner

1. Tujuan

Belajar membuat Ads Banner berbasis HTML5.

2. Alat

Text Editor
Browser

3. Bahan

spritesheet.png
spritesheet.css

4. Dasar Teori

Gunakan pertanyaan berikut untuk menuliskan dasar teori yang relevan

Jelaskan yang dimaksud dengan banner ads!

Jelaskan perbedaan antara Flash based banner dengan HTML5 banner!

5. Hasil Praktikum

Prak 07 – Membuat CSS Spritesheet

1. Tujuan

Mengenal dan membuat CSS Spritesheet dari kumpulan gambar.

2. Alat

Adobe Photoshop / Gimp / Preview / Power Point

3. Bahan

royalti free image

4. Dasar Teori

Gunakan pertanyaan berikut untuk menuliskan dasar teori yang relevan

Jelaskan yang dimaksud dengan CSS SpriteSheet!

Jelaskan kelebihan dari CSS SpriteSheet!

Bagaimana cara membuat CSS SpriteSheet?

5. Tugas Praktikum

berikut adalah beberapa tugas praktikum yang harus dikerjakan

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

6. Hasil Praktikum

7. Referensi

CSS Sprites: What They Are, Why They’re Cool, and How To Use Them

Prak 06 – Intro to GreenSock Animation Platform

1. Tujuan

Mengenal GreenSock Animation Platform. Yaitu sebuah library javascript untuk membuat animasi.

2. Alat

Atom 1.3.2
GreenSock JS

3. Bahan

sembarang image

4. Dasar Teori

Gunakan pertanyaan berikut untuk menuliskan dasar teori yang relevan

1. Jelaskan yang dimaksud dengan Animation Platform!
2. Sebutkan beberapa contoh penggunaan GSAP!

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

  6. Hasil Praktikum

7. Referensi

Green Sock Jump Start