Pages

Minggu, 24 April 2016

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
› Read More
Diposting oleh di 0 komentar

Praktikum 6

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
JSFiddle

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

 

 

› Read More
Diposting oleh di 0 komentar

Selasa, 19 April 2016

Praktikum 4 - 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. Tugas Praktikum 
Menyajikan gambar mengubah filter gambar.

6. Hasil Praktikum


<!DOCTYPE html>
<html>
<head>
 <script src='https://cdnjs.cloudflare.com/ajax/libs/camanjs/4.1.2/caman.full.min.js'></script>
 <script type="text/javascript">
 Caman('#my-image', function() {
 this.brightness(10);
 this.contrast(30);
 this.sepia(60);
 this.saturation(-30);
 this.render()
 });
 </script>
</head>
<body>
<img id="my-image" src="pallet.jpg">
</body>
</html>
<html>
 <head>
  <title> Menambahkan Audio HTML5 </title>
 </head>
 <body>
  <video id="pemain" src="video/Choir paduan suara korea.mp4"></video>

</body>
</html>
Demo: http://hamidahnh.mb.student.pens.ac.id/Pemograman/praktikum4.html
7. Referensi
http://www.sitepoint.com/manipulating-images-web-pages-camanjs/
› Read More
Diposting oleh di 0 komentar

Praktikum 5 - Camera Capture

Praktikum 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

<!DOCTYPE html>
<html>
<head>
</head>
<body>
<video id="video" width="640" height="480" autoplay></video>
<button id="snap">Snap Photo</button>
<canvas id="canvas" width="640" height="480"></canvas>
</body>
</html>
<script>
// Put event listeners into place
window.addEventListener("DOMContentLoaded", function() {
 // Grab elements, create settings, etc.
 var canvas = document.getElementById("canvas"),
  context = canvas.getContext("2d"),
  video = document.getElementById("video"),
  videoObj = { "video": true },
  errBack = function(error) {
   console.log("Video capture error: ", error.code);
  };

 // Put video listeners into place
 if(navigator.getUserMedia) { // Standard
  navigator.getUserMedia(videoObj, function(stream) {
   video.src = stream;
   video.play();
  }, errBack);
 } else if(navigator.webkitGetUserMedia) { // WebKit-prefixed
  navigator.webkitGetUserMedia(videoObj, function(stream){
   video.src = window.webkitURL.createObjectURL(stream);
   video.play();
  }, errBack);
 }
 else if(navigator.mozGetUserMedia) { // Firefox-prefixed
  navigator.mozGetUserMedia(videoObj, function(stream){
   video.src = window.URL.createObjectURL(stream);
   video.play();
  }, errBack);
 }
 // Trigger photo take
document.getElementById("snap").addEventListener("click", function() {
 context.drawImage(video, 0, 0, 640, 480);
});
}, false);

</script>

Demo: http://hamidahnh.mb.student.pens.ac.id/Pemograman/praktikum5.html
› Read More
Diposting oleh di 0 komentar
Langganan: Postingan (Atom)
 

Blogger news

Blogroll

About

Hamidah Nur Hidayati|D3 Teknologi Multimedia Broadcasting 2013| Politeknik Elektronika Negeri Surabaya