Rabu, 08 Juni 2016

Praktikum 11 Google Fonts

Prak 11 – Google Fonts

1. Tujuan
Belajar menggunakan external font dari google fonts

2.Alat & Bahan
Text Editor
Browser
spritesheet.png
spritesheet.css


3. Dasar Teori

1. Pengertian Google Font

adalah salah satu layanan yang disediakan Google untuk memudahkan web developer dalam menghasilkan desain yang menarik dengan menyediakan font-font gratis. Fitur ini dapat anda akses pada alamat : https://www.google.com/fonts.
Google menyediakan 3 cara untuk menghubungkan Google fonts dengan halaman HTML kita, yakni dengan menggunakan tag <link>, perintah CSS @import, dan dengan javascript. Ketiga cara ini relatif tidak terlalu berbeda dari cara penggunaannya. Tinggal copy paste kode tersebut ke halaman HTML.

4. Hasil Praktikum

1. Menggunakan Google Fonts



2. Tanpa Google Fonts
 

REFERENSI :

https://www.google.com/fonts

http://www.duniailkom.com/tutorial-belajar-css-cara-menggunakan-google-font-dengan-css/

Selasa, 24 Mei 2016

Praktikum 10 Membuat Ads Banner (part 2)

Prak 10 – Membuat Ads Banner (part 2)

1. Tujuan
Belajar membuat Ads Banner berbasis HTML 5

2.Alat & Bahan
Text Editor
Browser
spritesheet.png
spritesheet.css


3. Dasar Teori

1. Pengertian CSS Linear Gradient

adalah sebuah CSS untuk membuat warna gradiasi yang terdiri dari dua atau lebih susunan warna dan disusun secara lurus (Linear). Dalam penulisan nya di CSS sebagai berikut :
background: linear-gradient (titik awal / derajar, warna 1, warna 2, warna-n);.

2. Teknik horizontal centering di CSS 

Yaitu dengan mengatur margin: 0; position: absolute; left: 0; right: 0;
dengan memberi angka margin = 0 maka otomatis akan berada di center / tengah
dengan posisi absolute maka posisi menjadi tetap dan left right = 0 agar bagian kiri dan kanan tetap 0 alias tidak bergeser ke kanan dan ke kiri tetap di tengah.


4. Tugas Praktikum

Menirukan petunjuk praktikum yang di berikan.

5. Hasil Praktikum

1. Mengaplikasikan CSS Linear Gradient



2. Menambahkan Sprite berikut nya



3. Me-resize sprite menggunakan CSS

REFERENSI

http://www.mohhasbias.com/prak-10-membuat-ads-banner-part-2/

http://www.ariona.net/bermain-main-dengan-css3-gradient/

Rabu, 11 Mei 2016

Praktikum 8 Membuat Ads Banner

Prak 08 – Membuat Ads Banner

1. Tujuan
Belajar membuat Ads Banner berbasis HTML 5

2.Alat & Bahan
Text Editor
Browser
spritesheet.png
spritesheet.css


3. Dasar Teori


1. Pengertian Banner Ads

adalah Iklan yang ditampilkan dalam bentuk banner kepada target audience di situs yang sudah ditentukan untuk meningkatkan awareness dan menstimulasi tindakan yang berakhir ke penjualan.

2. Perbedaan Flash Based Banner dengan HTML 5 Banner

Flash banner ads adalah iklan yang berupa animasi tulisan bergerak. Html5 banner adalah membuat iklan website dengan basis html5 atau web berbasis html5


4. Tugas Praktikum

A. Mencari royalti free assets atau CC (Creative Commons)
carilah kumpulan gambar yang bersifat royalti free dengan kategori berikut:
1. pin point marker
2. shadow
3. surf board
4. gambar pantai dengan langit dihapus
5. gambar langit dengan awan
6. gambar berisi tulisan

B. Gabung 6 gambar tersebut dalam 1 gambar dengan format PNG with transparency
C. Buat file CSS yang berisi definisi spritesheet dari gambar tersebut
D. Buat file HTML untuk mengecek CSS Spritesheet yang dibuat
5. Hasil Praktikum





REFERENSI

http://www.mohhasbias.com/prak-08-membuat-ads-banner/

Praktikum 7 Membuat CSS Spritesheet

Prak 07 – Membuat CSS Spritesheet

1. Tujuan
Mengenal dan membuat CSS Spritesheet dari kumpulan gambar

2.Alat & Bahan
Adobe Photoshop / Gimp / Preview / PowerPoint
Royalti Free Image

3. Dasar Teori


1. CSS Spritesheet


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



2. Kelebihan CSS Spritesheet


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.



3.Cara Membuat CSS Spritesheet

Untuk membuat image dan CSS sprites dapat secara manual atau menggunakan CSS sprites generator yang banyak tersedia secara online. Tapi kalau tidak puas atau bingung dengan CSS sprites generator, dapat membuatnya sendiri. Untuk membuat css sprites, hal pertama yang harus dilakukan membuat image sprites atau gambar yang merupakan hasil penyatukan gambar-gambar yang akan digunakan. bisa gunakan tool favorit atau image merge online atau memakai GIMP.


4. Tugas Praktikum

A. Mencari royalti free assets atau CC (Creative Commons)
carilah kumpulan gambar yang bersifat royalti free dengan kategori berikut:
1. pin point marker
2. shadow
3. surf board
4. gambar pantai dengan langit dihapus
5. gambar langit dengan awan
6. gambar berisi tulisan

B. Gabung 6 gambar tersebut dalam 1 gambar dengan format PNG with transparency
C. Buat file CSS yang berisi definisi spritesheet dari gambar tersebut
D. Buat file HTML untuk mengecek CSS Spritesheet yang dibuat
5. Hasil Praktikum





REFERENSI

http://www.mohhasbias.com/prak-07-membuat-css-spritesheet/

Kamis, 21 April 2016

Praktikum 6 Intro to greenSock Animation

Prak 06 – intro to greensock animation

1. Tujuan
Mengenal GreenSock Animation Platform. Yaitu sebuah library javascript untuk membuat animasi.

2.Alat & Bahan
RapidPHP

3. Dasar Teori
Arti dari Animation Platform
contoh penggunaan GSAP

4. Hasil Praktikum
1.Relative Tween



2. Basic Tween




3. Easing




4. Delay


5. Multiple Properties

6. From Tweens


7. Multiple Targets



8. Event Callbacks



9. Tween Reference


10. Control Playback


Praktikum 2 Audio Tag

Audio Tag

Prak 02 – Audio Tag dengan button dan slider

1. Tujuan
Mengubah tampilan HTML5 Audio Player menggunakan CSS

2.Alat & Bahan
RapidPHP

3. Dasar Teori

1. HTMLHyper Text Markup Language (HTML)
adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi.

2. HTML5
HTML5 adalah sebuah bahasa markah untuk menstrukturkan dan menampilkan isi dari Waring Wera Wanua, sebuah teknologi inti dari Internet. HTML5 adalah revisi kelima dari HTML (yang pertama kali diciptakan pada tahun 1990 dan versi keempatnya, HTML4, pada tahun 1997) dan hingga bulan Juni 2011 masih dalam pengembangan.

3.HTML TAG
HTML dokumen tersebut mirip dengan dokumen teks biasa, hanya dalam dokumen ini sebuah teks bisa memuat instruksi yang ditandai dengan kode atau lebih dikenal dengan TAG tertentu. Dalam penggunaannya sebagian besar kode HTML tersebut harus terletak di antara tag kontainer. Yaitu diawali dengan <namatag> dan diakhiri dengan </namatag> (terdapat tanda “/”).Sebuah halaman web minimal mempunyai empat buat tag, yaitu :<HTML> Sebagai tanda awal dokumen HTML.<HEAD> Sebagai informasi page header. Di dalam tag ini kita bisa meletakkan tag-tag TITLE, BASE, ISINDEX, LINK, SCRIPT, STYLE & META.<TITLE> Sebagai titel atau judul halaman. Kalimat yang terletak di dalam tag ini akan muncul pada bagian paling atas browser Anda (pada title bar).<BODY> Sebagai isi dari sebuah halaman website. Di dalam tag ini bisa diletakkan berbagai page attribute seperti warna latar belakang, warna teks, warna link, warna visited link, warna active link dan lain-lain.

Tag-tag lainnyaHTML code + Keterangan

<!– –> Memberi komentar atau keterangan.

Kalimat yang terletak pada tag kontiner ini tidak akan terlihat pada browser<a href> Membuat link ke halaman lain atau ke bagian lain dari halaman tersebut<a name> Membuat nama bagian yang didefinisikan pada link pada halaman yang sama<applet> Sebagai awal dari Java applets<area> Mendefinisikan daerah yang dapat diklik (link) pada image map<b> Membuat teks tebal<basefont> Membuat atribut teks default seperti jenis, ukuran dan warna font<bgsound> Memberi (suara latar) background sound pada halaman web<big> Memperbesar ukuran teks sebesar satu point dari defaultnya<blink> Membuat teks berkedip<br> Pindah baris<caption> Membuat caption pada tabel<center> Untuk perataan tengah terhadap teks atau gambar<comment> Meletakkan komentar pada halaman web tidak tidak akan nampak pada browser<dd> Indents teks<div> Represents different sections of text.<embed> Menambahkan sound or file avi ke halaman web<fn> Seperti tag <a name><font> Mengganti jenis, ukuran, warna huruf yang akan digunakan utk teks<form> Mendefinisikan input form<frame> Mendefinisikan frame<frameset> Mendefinisikan attribut halaman yang akan menggunakan frame<h1>…<h6> Ukuran font<hr> Membuat garis horizontal<html> Bararti dokumen html<i> Membuat teks miring<img> Image, imagemap atau an animation<input> Mendefinisikan input field pada form<li> Membuat bullet point atau baris baru pada list (berpasangan dengan tag <dir>, <menu>, <ol> and <ul> )<map> Mendefinisikan client-side map<marquee> Membuat scrolling teks (teks berjalan)<nobr> Mencegah ganti baris pada teks atau images<noframes> Jika browser user tidak mendukung frame<ol> Mendefinisikan awal dan akhir list<p> Ganti paragraf<pre> Membuat teks dengan ukuran huruf yg sama<script> Mendefinisikan awal script<table> Membuat tabel<td> Kolom pada tabel<tr> Baris pada tabel<u> Membuat teks bergaris bawah

4. HTML5 AUDIO TAG
HTML audio element menunjukkan sebuah sound atau audio yang dapat disisipkan pada halaman web dan diputar untuk didengarkan.Modern browser mendukung beberapa format file audio diantaranya: mp3, ogg dan wav.Konten lain (seperti teks) dapat disisipkan untuk browser yang tidak mendukung HTML5 audio, dan apabila audio file tidak dapat diputar, maka konten ini akan muncul sebagai gantinya (fallback).Menentukkan bahwa controls audio ditampilkan. Controls, dapat dilihat seperti player yang biasanya berisi perintah seperti tombol play/pause, slider, volume dan sebagainya. Setiap browser memiliki tampilan controls yang berbeda.Contoh:<audio src="../../../media/audio/kucing.mp3" controls></audio>

5. MENGENDALIKAN FUNGSI PLAY, PAUSE, RESET DENGAN JAVASCRIPTDimulai dengan memberi ID pada tag audio untuk bisa diakses menggunakan document.getElementById(). Setelah itu dapat menggunakan perintah play(), pause() untuk fungsi play dan pause, dan bisa menggunakan perintah currentTime=0 untuk mereset audio.

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

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

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


5. Hasil Praktikum





REFERENSI

http://jsbin.com/IYUxImU/4/edit?html,css,js,output

Praktikum 1 - HTML5 Audio Tag

Audio Tag

Prak 01 – Audio Tag 

1. Tujuan
Mahasiswa dapat mengenal cara menyajikan file audio menggunakan HTML

2.Alat & Bahan
RapidPHP

3. Dasar Teori


1. HTMLHyper Text Markup Language (HTML)

adalah sebuah bahasa markah yang digunakan untuk membuat sebuah halaman web, menampilkan berbagai informasi di dalam sebuah penjelajah web Internet dan pemformatan hiperteks sederhana yang ditulis dalam berkas format ASCII agar dapat menghasilkan tampilan wujud yang terintegerasi.

2. HTML5

HTML5 adalah sebuah bahasa markah untuk menstrukturkan dan menampilkan isi dari Waring Wera Wanua, sebuah teknologi inti dari Internet. HTML5 adalah revisi kelima dari HTML (yang pertama kali diciptakan pada tahun 1990 dan versi keempatnya, HTML4, pada tahun 1997) dan hingga bulan Juni 2011 masih dalam pengembangan.

3.HTML TAG

HTML dokumen tersebut mirip dengan dokumen teks biasa, hanya dalam dokumen ini sebuah teks bisa memuat instruksi yang ditandai dengan kode atau lebih dikenal dengan TAG tertentu. Dalam penggunaannya sebagian besar kode HTML tersebut harus terletak di antara tag kontainer. Yaitu diawali dengan <namatag> dan diakhiri dengan </namatag> (terdapat tanda “/”).Sebuah halaman web minimal mempunyai empat buat tag, yaitu :<HTML> Sebagai tanda awal dokumen HTML.<HEAD> Sebagai informasi page header. Di dalam tag ini kita bisa meletakkan tag-tag TITLE, BASE, ISINDEX, LINK, SCRIPT, STYLE & META.<TITLE> Sebagai titel atau judul halaman. Kalimat yang terletak di dalam tag ini akan muncul pada bagian paling atas browser Anda (pada title bar).<BODY> Sebagai isi dari sebuah halaman website. Di dalam tag ini bisa diletakkan berbagai page attribute seperti warna latar belakang, warna teks, warna link, warna visited link, warna active link dan lain-lain.

Tag-tag lainnyaHTML code + Keterangan

<!– –> Memberi komentar atau keterangan.

Kalimat yang terletak pada tag kontiner ini tidak akan terlihat pada browser<a href> Membuat link ke halaman lain atau ke bagian lain dari halaman tersebut<a name> Membuat nama bagian yang didefinisikan pada link pada halaman yang sama<applet> Sebagai awal dari Java applets<area> Mendefinisikan daerah yang dapat diklik (link) pada image map<b> Membuat teks tebal<basefont> Membuat atribut teks default seperti jenis, ukuran dan warna font<bgsound> Memberi (suara latar) background sound pada halaman web<big> Memperbesar ukuran teks sebesar satu point dari defaultnya<blink> Membuat teks berkedip<br> Pindah baris<caption> Membuat caption pada tabel<center> Untuk perataan tengah terhadap teks atau gambar<comment> Meletakkan komentar pada halaman web tidak tidak akan nampak pada browser<dd> Indents teks<div> Represents different sections of text.<embed> Menambahkan sound or file avi ke halaman web<fn> Seperti tag <a name><font> Mengganti jenis, ukuran, warna huruf yang akan digunakan utk teks<form> Mendefinisikan input form<frame> Mendefinisikan frame<frameset> Mendefinisikan attribut halaman yang akan menggunakan frame<h1>…<h6> Ukuran font<hr> Membuat garis horizontal<html> Bararti dokumen html<i> Membuat teks miring<img> Image, imagemap atau an animation<input> Mendefinisikan input field pada form<li> Membuat bullet point atau baris baru pada list (berpasangan dengan tag <dir>, <menu>, <ol> and <ul> )<map> Mendefinisikan client-side map<marquee> Membuat scrolling teks (teks berjalan)<nobr> Mencegah ganti baris pada teks atau images<noframes> Jika browser user tidak mendukung frame<ol> Mendefinisikan awal dan akhir list<p> Ganti paragraf<pre> Membuat teks dengan ukuran huruf yg sama<script> Mendefinisikan awal script<table> Membuat tabel<td> Kolom pada tabel<tr> Baris pada tabel<u> Membuat teks bergaris bawah

4. HTML5 AUDIO TAG

HTML audio element menunjukkan sebuah sound atau audio yang dapat disisipkan pada halaman web dan diputar untuk didengarkan.Modern browser mendukung beberapa format file audio diantaranya: mp3, ogg dan wav.Konten lain (seperti teks) dapat disisipkan untuk browser yang tidak mendukung HTML5 audio, dan apabila audio file tidak dapat diputar, maka konten ini akan muncul sebagai gantinya (fallback).Menentukkan bahwa controls audio ditampilkan. Controls, dapat dilihat seperti player yang biasanya berisi perintah seperti tombol play/pause, slider, volume dan sebagainya. Setiap browser memiliki tampilan controls yang berbeda.Contoh:<audio src="../../../media/audio/kucing.mp3" controls></audio>5. MENGENDALIKAN FUNGSI PLAY, PAUSE, RESET DENGAN JAVASCRIPTDimulai dengan memberi ID pada tag audio untuk bisa diakses menggunakan document.getElementById(). Setelah itu dapat menggunakan perintah play(), pause() untuk fungsi play dan pause, dan bisa menggunakan perintah currentTime=0 untuk mereset audio.

5. Hasil Praktikum
percobaan 1


percobaan 2


hasil percobaan 1


hasil percobaan 2



KESIMPULAN
kesimpulan dari percobaan ini yaitu untuk memutar file audio seperti MP3, OGG dan WAV di dalam browser dengan menggunakan tag <audio></audio>, untuk perintah seperti tombol play/pause, slider, volume dan sebagainya menggunakan controls serta javascript seperti play(), pause(), currentTime = "0"
REFERENSI
https://justalittlebite.wordpress.com/2009/10/04/pengertian-html-dan-tag-tag-html/
http://dul.web.id/belajar/html/tag-element/audio.php

Kamis, 31 Maret 2016

Praktikum 5 - Camera dan video control

amera dan Video Control with HTML5

Prak 05 - Camera dan Video Control with HTML5

1. Tujuan

Mengenal contoh kode untuk mengakses webcam dan melakukan snapshot.

2.Alat & Bahan

1. Komputer
2. Notepad ++
3. CamanJS


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

Hypertext Transfer Protokol Secure (HTTPS)
adalah versi aman dari HTTP, protokol komunikasi dari World Wide Web. Ditemukan oleh Netscape Communications Corporation untuk menyediakan autentikasi dan komunikasi tersandi dan penggunaan dalam komersi elektris.

5. Hasil Praktikum

Rabu, 30 Maret 2016

Praktikum 4 - CamanJS

amanJS

Prak 04 - Image Editor dengan Caman JS 

1. Tujuan

Mengenal library javascript untuk image editing.

2.Alat & Bahan

1. Komputer
2. Notepad ++
3. CamanJS


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


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. Hasil Praktikum

Rabu, 23 Maret 2016

Praktikum 3 Video Player

Prak 03 – HTML5 Video 

1. Tujuan

  • Mengenal cara menyajikan file Video menggunakan HTML5 dan Jquery.
  • Membuat Icon pada tombol di video seperti play,pause,stop menggunakan font awesome

2.Alat & Bahan

1. Komputer
2. Notepad ++


3. 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
jQuery adalah merupakan JavaScript multiplatform yang dirancang untuk memudahkan penyusunan client-side script pada file HTML. Digunakan oleh 60 persen dari 10000 situs web paling banyak dikunjungi di dunia, jQuery adalah library JavaScript yang paling populer saat ini. jQuery merupakan sebuah perangkat lunak bebas sumber terbuka yang berada di bawah 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.


Font Awesome
Font Awesome” adalah kumpulan icon yang telah dibuat sedemikian rupa, dan menggunakan system “Font Icon” yang memungkinkan kita untuk merubah warna dan ukuran font dengan menggunakan CSS tanpa takut Icon menjadi Pecah-pecah dan tantunya lebih ringan daripada Image Icon..

5. Hasil Praktikum
Review di Plunker