Prak 11 – Menggunakan Google Fonts

1. Tujuan

Belajar menggunakan external font dari Google Fonts

2. Alat

Text Editor
Browser
Js Fiddle

3. Bahan

spritesheet.png
spritesheet.css

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"

› Read More

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

Praktikum 10 - Membuat Ads Banner (Part 2)

1. Tujuan

Belajar membuat Ads Banner berbasis HTML5.

2. Alat

Text Editor
Browser

3. Bahan

spritesheet.png
spritesheet.css

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

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

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

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

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

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 

http://hamidahnh.mb.student.pens.ac.id/Pemograman/Menambahkan%20Video%20HTML5.htm

› Read More

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 :

Link youtube:https://youtu.be/hhDOHfEjymw

› Read More

PEMOGRAMAN MULTIMEDIA PRAKTIKUM 1

Praktikum I

HTML 5 Audio

Surabaya, 3 Maret 2016

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 memahami element <audio> pada HTML5

II.            Alat & Bahan

Alat dan bahan yang digunakan diantaranya:

1.      Komputer

2.      Modul Praktikum 3

III.            Dasar Teori

HTML adalah singkatan dari HyperText Markup Language yaitu bahasa pemrograman  standar yang digunakan untuk membuat sebuah halaman web, yang kemudian dapat diakses untuk menampilkan berbagai informasi di dalam sebuah penjelajah web Internet (Browser). HTML dapat juga digunakan sebagai link link antara file-file dalam situs atau dalam komputer dengan menggunakan localhost, atau link yang menghubungkan antar situs dalam dunia internet.

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".

Tag merupakan suatu pasangan yang terdiri 2 bagian yang disebut dengan tag awal dan tag akhir. Tag awal dinyatakan dalam bentuk <nama tag> dan tag akhir ddinyatakan dalam bentuk </nama tag>. Format penulisan suatu tag adalah sebagai berikut :

<nama tag> ... </nama tag>

Contoh :

<blink> Teks yang akan ditampilkan </blink>

Sedangkan atribut adalah suatu karakteristik yang menyertai/ada di dalam suatu tag awal. Tag awal dapat memiliki lebih dari satu atribut yang menyatakan karakteristik dari tag tersebut. Format penulisan atributdalam suatu tag bisa dituliskan seperti ini <tag atribut1="value" atribut2="value" ... > dan ditutup dengan tag akhir yaitu </tag>.

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.

V.            Hasil Praktikum

1.      Memasukkan audio HTML 5

·         Script Coding

 

·         Hasil pada Chrome

2.      Memasukkan Button Player dengan JavaScript

·         Script Code

·         Hasil Pada Chrome

 

Hasil Player

LINK YOUTUBE: https://youtu.be/YBy19rGCAIA

› Read More