Menggunakan Google Fonts

Prak 11 – Menggunakan Google Fonts

1. Tujuan

Belajar menggunakan external font dari Google Fonts

2. Alat

Text Editor
Browser
Js Fiddle

3. Bahan

spritesheet.png
spritesheet.css

4. 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>, perintah CSS @import, dan dengan JavaScript. Ketiga cara ini relatif tidak terlalu berbeda dari cara penggunaanya. Tnggal copy paste kode tersebut ke halaman HTML.

5. Hasil Praktikum

    Menggunakan Google Fonts "Open Sans"

5. Referensi
https://www.google.com/fonts#QuickUsePlace:quickUse

Membuat Ads Banner (part 2)

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

Efek Linear Gradient atau gradasi warna linear adalah sebuah visual effect yang dihasilkan olehperubahan dan bergeseran warna (gradasi) diatara 2 warna atau lebih. Arah gradasi atau perubahan warna ini dapat terjadi secara vertical (dari atas ke bawah atau dari bawah ke atas), secara horizontal (dari kiri ke kanan atau kanan ke kiri).

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. untuk membuatnya horizontal center, maka container perlu di set text-align: center

5. Hasil Praktikum

1. Mengaplikasikan CSS Linear Gradient
2. Menambahkan Sprite berikutnya
3. Me-resize sprite menggunakan CSS

6. Referensi

   Creating an HTML5 Banner Ad with GreenSock (GSAP)

   www.mohhasbias.com

Membuat Ads Banner

Prak 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

  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.

5. Hasil Praktikum

Membuat CSS Spritesheet

Prak 07 – Membuat CSS Spritesheet

1. Tujuan

Mengenal dan membuat CSS Spritesheet dari kumpulan gambar.

2. Alat

Power Point

3. Bahan

royalti free image

4. 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.\

5. Tugas Praktikum

6. Kesimpulan

Intro to GreenSock Animation Platform

Prak 06 - 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

3. Dasar Teori

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. Basic tween


2. Easing


3. Delay


4. Animate Multiple Properties


5. From Tweens


6. Relative Tweens


7. Multiple Targets


8. Use jQuery As Selector


9.  Event Callbacks

10. Tween Reference


11. Control Playback

6. Referensi 

Greensock Jump Start

Camera Capture

Prak 5 - Camera Capture

Tujuan

1. Mahasiswa memahami cara menambahkan kamera pada halaman website.
2. Mahasiswa dapat menyajikan kamera yang dilengkapi dengan button untuk snap photo menggunakan HTML5
3. Mahasiswa dapat menampilkan hasil dari capture camera.

Alat dan Bahan
1. Notepad++

Hasil Praktikum

-script

Hasil Klik Disini


Referensi :  https://davidwalsh.name/browser-camera

Image Editor dengan Caman Js

Praktikum 4 - Image Editor dengan Caman Js

1. Tujuan

Mengenal cara menyajikan file gambar dilengkapi button filter menggunakan camanjs.

2. Alat

Notepad ++

3. Bahan

• Jquery
• Bootstrap
• Camanjs

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

5. Hasil Praktikum 
Klik Disini