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 »

Praktikum 6 - 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

Arti dari Animation Platform

contoh penggunaan GSAP

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

a. Basic tween

b.Relative Tween

c. Easing

d. Delay

e. Animate Multiple Properties

f. From Tweens

g. Mutiple Targets

h. Event Callbacks

j. Tween Reference

k. Control Playback

6. Referensi

Greensock Jump Start

Read more »

Praktikum 5 - Image Capture With Browser

1. Tujuan
Mengenal contoh kode untuk mengakses webcam dan melakukan snapshot.

2.Alat

1. Komputer
2. Notepad ++
3. HTTPS server

3. Dasar Teori

GetUserMedia 

GetUserMedia merupakan sebuah sintaks baru yang ada dalam HTML5 yang berguna untuk mengambil multimedia berupa kamera dan mikrofon dari alat komunikasi yang ada seperti notebook dan smartphone. Dengan sintaks ini penulis dapat mengambil data gambar dari kamera dan memasukannya kedalam HTML5 sehingga dapat diproses langsung oleh berbagai web browser

HTTPS

Hypertext Transfer Protokol Secure (HTTPS) adalah versi aman dari HTTP, protokol komunikasi dari World Wide Web. Ditemukan oleh Netscape Communications Corporation untuk menyediakan autentikasi dan komunikasi tersandi dan penggunaan dalam komersi elektris.

4.Tugas praktikum

Buatlah file index.html yang berisi kode untuk mengakses kamera dan tombol snapshot. Upload file tersebut ke hosting yang support HTTPS.

 

5.Hasil Praktikum

 

Demo Praktikum (klik) 

6. Referensi

https://davidwalsh.name/browser-camera

 

Read more »

Praktikum 4 - Editor gambar menggunakan 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. Tugas Praktikum 
Menyajikan gambar dan tombol untuk mengubah filter gambar.

6. Hasil Praktikum
Demo Hasil Praktikum (kilk) 

7. Referensi

http://www.sitepoint.com/manipulating-images-web-pages-camanjs/

Read more »

VIDEO TAG HTML5

Praktikum 3

I.            TUJUAN

Mengenal cara menyajikan file audio menggunakan HTML5

II.            ALAT DAN BAHAN

Notepad++

III.            DASAR TEORI

HTML5, CSS, Javascript
HTML5 adalah sebuah bahasa markah untuk menstrukturkan dan menampilkan isi dari World Wide Web, sebuah teknologi inti dari Internet. HTML5 adalah revisi kelima dari HTML dan hingga bulan Juni 2011 masih dalam pengembangan. Meskipun HTML5 telah dikenal luas oleh para pengembang web sejak lama, HTML5 baru mencuat pada April 2010 setelah CEO Apple Inc., Steve Jobs, mengatakan bahwa dengan pengembangan HTML5, "Adobe Flash sudah tidak dibutuhkan lagi untuk menyaksikan video atau menyaksikan konten apapun di web".

 

Kemudian untuk mengontrol audio menggunakan javascript DOM. Dimulai dengan memberi ID pada tag audio untuk bisa diakses menggunakan document.getElementById(). Setelah itu dapat menggunakan perintah play(), pause() untuk fungsi play dan pause, dan bisa menggunakan perintah currentTime=0 untuk mereset audio.
Sedangkan Cascading Style Sheet (CSS) adalah bahasa pemrograman web yang digunakan untuk memberi hiasan dan mengatur gaya tampilan / layout halaman web supaya lebih menarik..

HTML5 Video Tag

HTML <video> element digunakan untuk merujuk sumber file video, sehingga dapat diputar (dimainkan) pada halaman web.

Dalam merujuk sumber file video, digunakan attribute src yang menunjukkan source (sumber) yang mengarah pada link file video tersebut berada (disimpan), ditulis baik didalam element <video> itu sendiri atau didalam element <source> yang merepresentasikan sumber video lebih dari satu format, sehingga browser dapat memilih format video yang tepat (didukung) .

 

 

IV. Hasil Praktikum


Silahkan Test 


V. Kesimpulan

Pada praktikum ini saya menggunakan <video> untuk menambahkan video kedalam sebuah web yang akan saya buat.

 

 

 

 

 

 

 

 

 

Read more »