Pages

Rabu, 18 Mei 2016

Praktikum 10 - Membuat Ads Banner (Part 2)

1. Tujuan
Belajar membuat Ads Banner berbasis HTML5.

2. Alat
Text Editor
Browser



3. Bahan
4. 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.
5. Hasil Praktikum
Mengaplikasikan CSS Linear Gradient
Menambahkan Sprite berikutnya


Me-resize sprite menggunakan CSS
› Read More
Diposting oleh di 0 komentar

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

Selasa, 22 Maret 2016

Praktikum III HTML 5 Video Tag Dengan Button Dan Slider

Praktikum III
HTML 5 Video Tag Dengan Button Dan Slider
I.     Tujuan
Tujuan dari praktikum ini adalah:
1. Mahasiswa memahami cara menambahkan dokumen Flash ke halaman website
2. Mahasiswa memahami cara menambahkan video dan audio ke halaman website
3.  Mahasiswa dapat menyajikan file audio dilengkapi control dan slider menggunakan HTML5, Jquery UI dan Bootstrap. 

II.   Alat & Bahan
Alat dan bahan yang digunakan diantaranya:
1.      Komputer
2.      Jquery UI
3.      Bootstrap
III.  Dasar Teori
Css 
Cascading Style Sheet (CSS) merupakan salah satu bahasa pemrograman web untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam. 

Bootstrap 
Bootstrap adalah sebuah framework css yang dapat digunakan untuk mempermudah membangun tampilan web. Bootstrap pertama kali di kembangkan pada pertangahan 2010 di Twitter oleh Mark Otto dan Jacob Thornton. Saat ini Bootstrap dikembangkan secara open source dengan lisensi MIT. 

Jquery UI 
JQuery UI adalah plugin komponen user interface (hal-hal yang berhubungan dengan antarmuka pengguna) berupa interaksi, widget berfitur lengkap dan efek animasi yang berada di bawah framework JQuery.Setiap komponen dibangun sesuai dengan arsitektur kerja JQuery (menemukan sesuatu, kemudian memanipulasinya) dan memiliki kemampuan untuk menerima tema yang bermacam-macam sesuai dengan keperluan desain Slider, button, dialog boxkotak dialog/modal, accordion, tooltip, tabs, dihasilkan dari jquery ui. 
IV.  Praktikum
Berikut ini langkah kerja yang perlu anda lakukan selama menyelesaikan semua percobaan yang ada pada praktikum ini
1. Tempatkan folder “Praktikum1” beserta isinya pada lokasi yang anda inginkan
2. Pastikan anda menyimpan semua hasil percobaan pada praktikum ini di dalam folder tersebut
3.  Buka teks editor pilihan anda
4.  Ketikkan semua kode yang ada pada tiap percobaan
5. Setiap kali anda menyelesaikan satu percobaan, simpan dengan nama file sesuai nomor percobaan dengan ekstensi .html
6. Apabila anda menggunakan notepad, pastikan anda merubah pilihan tipe file pada “Save asType” menjadi “All Files”
7.  Apabila anda menggunakan notepad++, pada pilihan tipe file, pilih yang bertipe HTML
Hasil Praktikum 

› Read More
Diposting oleh di 0 komentar

Rabu, 16 Maret 2016

Audio Tag dengan tambahan Slider

I. Tujuan
Mahasiswa mampu dan mengetahui cara menampilkan slider untuk mengontrol file audio yang telah ditambatkan.
II. Alat dan Bahan
  • Notepad++
  • Jquerry UI
  • Bootstrap
III. Dasar Teori

CSS
Cascading Style Sheet (CSS) merupakan salah satu bahasa pemrograman web untuk mengendalikan beberapa komponen dalam sebuah web sehingga akan lebih terstruktur dan seragam.

BOOTSTRAP
Bootstrap adalah sebuah framework css yang dapat digunakan untuk mempermudah membangun tampilan web. Bootstrap pertama kali di kembangkan pada pertangahan 2010 di Twitter oleh Mark Otto dan Jacob Thornton. Saat ini Bootstrap dikembangkan secara open source dengan lisensi MIT.

JQUERY UI
JQuery UI adalah plugin komponen user interface (hal-hal yang berhubungan dengan antarmuka pengguna) berupa interaksi, widget berfitur lengkap dan efek animasi yang berada di bawah framework JQuery.Setiap komponen dibangun sesuai dengan arsitektur kerja JQuery (menemukan sesuatu, kemudian memanipulasinya) dan memiliki kemampuan untuk menerima tema yang bermacam-macam sesuai dengan keperluan desain Slider, button, dialog boxkotak dialog/modal, accordion, tooltip, tabs, dihasilkan dari jquery ui. 
IV. Tugas

  Dibawah ini merupakan hasil praktikum yang telah saya lakukan :
› 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