Pages

Senin, 06 Juni 2016

Prak 11 – Menggunakan Google Fonts

1. Tujuan
Belajar menggunakan external font dari Google Fonts

2. Alat
Text Editor
Browser

Js Fiddle

3. Bahan
4. 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 untuk menghubungkan’ Google font dengan halaman HTML kita, yakni dengan menggunakan tag <link>, perintah CSS @import, dan dengan JavaScript. Ketiga cara ini relatif tidak terlalu berbeda dari cara penggunaanya. Tnggal copy paste kode tersebut ke halaman HTML.

5. Hasil Praktikum
 Menggunakan Google Fonts "Open Sans"

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


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

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

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

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

 

 

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/

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
 

Blogger news

Blogroll

About

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