Pages

Rabu, 25 Mei 2016

Prak 08 - Ads Banner Dengan HTML

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 Praktikum


› Read More
Diposting oleh di 0 komentar

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
Langganan: Postingan (Atom)
 

Blogger news

Blogroll

About

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