Praktikum 11 - Google Fonts

Tujuan

Belajar menggunakan external font dari Google Fonts

Alat

Text Editor
Browser

Bahan

spritesheet.png
spritesheet.css

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, yakni dengan menggunakan tag <link>, perintah CSS @import, dan dengan JavaScript. Ketiga cara ini relatif tidak terlalu berbeda dari cara penggunaanya. Anda tinggal copy paste kode tersebut ke halaman HTML. Untuk kali ini, saya akan menggunakan cara dengan tag <link>.

Hasil Praktikum

Kesimpulan

Pada praktikum ini digunakan perintah CSS @import untuk menghubungkan google fonts dengan web. Untuk jenis font yang digunakan disini adalah Open Sans Italic.

Praktikum 10 - Membuat Ads Banner [Part 2]

Tujuan

Belajar membuat Ads Banner berbasis HTML5.

Alat

Text Editor
Browser

Bahan

spritesheet.png
spritesheet.css

Dasar Teori

CSS linear-gradient adalah sebuah visual effect yang dihasilkan oleh perubahan dan pergeseran warna (gradasi) diantara 2 warna atau lebih. Arah gradasi atau perubahan warna ini dapat terjadi secara vertikal (dari atas ke bawah atau sebaliknya) dan secara horizontal (dari kiri ke kanan atau sebaliknya).

Teknik horizontal centering di CSS merupakan penggunaan beberapa properti untuk menyelaraskan elemen horizontal. Beberapa properti yang digunakan seperti margin, position dan lain sebagainya.

Tugas Praktikum

tirukan petunjuk praktikum yang diberikan

Petunjuk Praktikum

1. Mengaplikasikan CSS Linear Gradient

2. Menambahkan sprite berikutnya

3. Me-resize sprite menggunakan CSS

Hasil Praktikum

Kesimpulan

Untuk mendapat gambar yang berlayer pada spritesheet kita bisa menggunakan css linear-gradient untuk mengatur gradasi warna yang sesuai dengan spritesheet. Kemudian apabila kita ingin me-resize spritesheet menggunakan css, kita cukup mengatur ukuran div dengan merubah nilai pada width dan height dan kemudian mengatur letak posisi gambar dan ukuran dari background yang diinginkan.

Referensi

http://www.mohhasbias.com/prak-10-membuat-ads-banner-part-2/

Praktikum 8 – Membuat Ads Banner

Tujuan
Belajar membuat Ads Banner berbasis HTML5.

Alat
Codepen
Browser

Bahan
spritesheet.png
spritesheet.css

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.

Tugas Praktikum
tirukan petunjuk praktikum yang diberikan

Petunjuk Praktikum
1.Membuat container

2. Menambahkan 2 aset

Hasil Praktikum

Praktikum 7 - CSS Spritesheet

Tujuan

Mengenal dan membuat CSS Spritesheet dari kumpulan gambar.

Alat

Codepen

Bahan

royalti free image

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

Tugas Praktikum

Kesimpulan

Praktikum 6 – Intro to GreenSock Animation Platform

TUJUAN
Mengetahui cara merekam gambar pada browser dengan menggunakan HTML dan Javascript

ALAT
Codepen

Greensock JS

BAHAN

sembarang image

DASAR TEORI

                          ------------------x------------------

TUGAS PRAKTIKUM
Menulis kembali demo yang disediakan oleh GSAP JumpStart

HASIL PRAKTIKUM

Pada praktikum ini saya menggunakan Codepen bukan jsFiddle.

Screenrecord:

1. Basic Tween

2. Easing

3. Delay

4. Animate Multiple Properties

5. From Tweens

6. Relative Tweens

7. Multiple Targets

8. Tween Reference

9. Control Playbacks

10. Repeat

KESIMPULAN

REFERENSI

https://greensock.com/jump-start-js

Praktikum 5 - Camera Capture with HTML 5

Tujuan
Mengetahui cara merekam gambar pada browser dengan menggunakan HTML dan Javascript

Alat
Notepad ++

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.

Tugas Praktikum 
Menyajikan gambar dan tombol untuk mengubah filter gambar.

Hasil Praktikum

Camera capture akan berhasil dijalankan dengan catatan dibuka dengan menggunakan alamat "https://" didepannya.. apabila link diatas tidak berhasil, silahkan kunjungi lihat demo

Praktikum 4 - Image Editor dengan CamanJs

Tujuan
Mengenal cara menyajikan file gambar dilengkapi button filter menggunakan camanjs.

Alat
Notepad ++

Bahan

• Jquery
• Bootstrap
• Camanjs

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.

Tugas Praktikum 
Menyajikan gambar dan tombol untuk mengubah filter gambar.

Hasil Praktikum