Praktikum 11 - Menggunakan Google Fonts

1. Tujuan

• Belajar menggunakan external font dari Google Fonts

2. Alat

• Text Editor
• Browser

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, yakni dengan menggunakan tag <link>, perintah CSS @import, dan dengan JavaScript. Ketiga cara ini relatif tidak terlalu berbeda dari cara penggunaanya. Anda tinggal copy paste kode tersebut ke halaman HTML. Untuk kali ini, saya akan menggunakan cara dengan tag <link>.

5. Hasil Praktikum

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

Efek Linear Gradient atau gradasi warna linear adalah sebuah visual effect yang dihasilkan olehperubahan dan bergeseran warna (gradasi) diatara 2 warna atau lebih. Arah gradasi atau perubahan warna ini dapat terjadi secara vertical (dari atas ke bawah atau dari bawah ke atas), secara horizontal (dari kiri ke kanan atau kanan ke kiri). Salah satu teknik horizontal centering untuk image adalah dengan menggunakan property text-align: center;. property ini bisa digunakan pada elemen HTML yang memiliki property display: block. untuk membuatnya horizontal center, maka container perlu di set text-align: center

5. Petunjuk Praktikum

1. Mengaplikasikan CSS Linear Gradient



2. Menambahkan sprite berikutnya



3. Me-resize sprite menggunakan CSS

6. Hasil Praktikum 

8. Referensi

• Creating an HTML5 Banner Ad with GreenSock (GSAP)

Praktikum 7 - CSS Spritesheet

Tujuan

• Mengenal dan membuat CSS Spritesheet dari kumpulan gambar.

Alat

• JSFiddle
• 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

Hasil Praktikum

Praktikum 8 - Membuat Ads Banner

Tujuan

• Belajar membuat Ads Banner berbasis HTML5.

Alat

• Text Editor
• Browser

Bahan

• spritesheet.png
• spritesheet.css

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.

Tugas Praktikum

Tirukan petunjuk praktikum yang diberikan

Petunjuk Praktikum

1. Membuat container

2. Menambahkan 2 aset

Hasil Praktikum 

Praktikum 6 – Intro to GreenSock Animation Platform

Tujuan

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

Alat

• Atom 1.3.2
• GreenSock JS

Dasar Teori

GSAP animates anything JavaScript can touch (CSS properties, canvas library objects, SVG, generic objects, whatever) and it solves lots of browser inconsistencies, all with blazing speed (up to 20x faster than jQuery). See the "Why GSAP?" article for details. Other libraries like jQuery, Velocity, Transit, and Zepto only tween CSS properties. Plus, their sequencing abilities and runtime controls pale by comparison. Simply put, GSAP is the most flexible high-performance animation library on the planet, which is probably why Google recommends it for JS-based animations. And unlike monolithic frameworks like Famo.us or Angular that dictate how you structure your apps, GSAP simply owns the animation layer; sprinkle it wherever you want. GSAP consists of the following core tools, plus quite a few plugins, eases, and special utilities like Draggable and SplitText.

The GreenSock Animation Platform is a suite of tools for scripted animation. It includes:

• TweenLite: the core of the engine which handles animating just about any property of any object. It is relatively lightweight yet full-featured and can be expanded using optional plugins (like CSSPlugin for animating DOM element styles in the browser, or ScrollToPlugin scrolling to a specific location on a page or div, etc.)
• TweenMax: TweenLite's beefy big brother; it does everything TweenLite can do plus non-essentials like repeat, yoyo, repeatDelay, etc. It includes many common plugins too like CSSPlugin so that you don't need to load as many files. The focus is on being full-featured rather than lightweight.
• TimelineLite: a powerful, lightweight sequencing tool that acts like a container for tweens, making it simple to control them as a whole and precisely manage their timing in relation to each other. You can even nest timelines inside other timelines as deeply as you want. This allows you to modularize your animation workflow easily.
• TimelineMax: extends TimelineLite, offering exactly the same functionality plus useful (but non-essential) features like repeat, repeatDelay, yoyo, currentLabel(), and many more. Again, just like TweenMax does for TweenLite, TimelineMax aims to be the ultimate full-featured tool rather than lightweight.

Tugas Praktikum

1. Basic Tween  
2. Easing 
3. Delay  
4. Animate Multiple Properties  
5. From Tweens  
6. Relative Tweens  
7. Multiple Target  

Kesimpulan

• 
  

Referensi

• Green Sock Jump Start

Praktikum 5 - Camera Capture

Tujuan

• Membuat camera capture melalui browser.

Alat

• Notepad++

Tugas Praktikum

• Membuat Camera Capture di browser.

Hasil Praktikum

----------------DEMO----------------


Referensi

• DavidWalsh

Praktikum 4 - Image Editor dengan Caman Js

Tujuan

• Membuat foto editor dalam web browser dengan menggunakan CamanJS.

Alat

• Notepad ++

Bahan

• Jquery
• Camanjs

Dasar teori

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 adalah library javascript yang dapat memanipulasi canvas HTML dan dapat memberir efek dan filter terhadap photo.

Tugas Praktikum 

• Mebuat foto editor pada web browser.

Hasil Praktikum

Referensi

• Tutorialzine

Praktikum 3 - Video Tag with jQuery Button and Slider

Tujuan

• Mengenal cara menyajikan file video dilengkapi control dan slider menggunakan HTML5 & jQuery UI.

Alat 

• Notepad ++

Bahan 

• Jquery UI

Dasar Teori

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.

Tugas Praktikum 

• Membuat dan mendesain tombol, slider video di web

Hasil Praktikum 

Praktikum 2 - HTML Audio Tag Slider

Tujuan

• Mengetahui cara membuat pemutar musik sederhana dengan dilengkapi kontrol berupa slider dengan jQuery dan CSS.

Alat

• Notepad++

Bahan

• CSS
• jQuery

Dasar Teori

jQuery

Jquery adalah libary javascript. Maksdud dari libary disini bukan perpustakaan kayak di sekolah yah. Tapi libary disini adalah kode siap pakai yang langsung bisa kita terapkan. Sehingga kita tidak perlu membuat kode dari nol lagi.

Jquery UI

Jquery UI adalah plugin dari jquery yang berguna untuk membuat efek-efek interaktif pada halaman web. Karena Jquery UI adalah bagian tambahan dari Jquery, maka kita tidak bisa menggunakan Jquery UI sendiri. Hubungannya seperti gula dan semut dah. Ibaratnya ada Jquery UI, harus ada Jquery pula.

Hasil Praktikum

Referensi

• JagoCoding

Praktikum 1 - HTML5 Audio Tag

Tujuan

• Mengenal cara menyajikan file audio menggunakan HTML5

Alat

• Atom 1.3.2

Bahan

• Stance Gives You Balance by Hogan Grip download info

Dasar Teori

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

Kemudian untuk mengontrol audio menggunakan javascript DOM. dimulai dengan memberi ID pada tag audio untuk bisa diaccess menggunakan document.getElementByID(). setelah DOM-nya diperoleh, dapat digunakan perintah play(), pause() untuk fungsi play dan pause. dan bisa menggunakan properti currentTime untuk menggeser slidernya.

Tugas Praktikum

• Tampilkan file audio yang diberikan ke dalam sebuah halaman web menggunakan HTML5 Audio Tag
• Buat screenrecord yang menunjukkan percobaan tentang manipulasi audio tag melalui Javascript. Diantaranya adalah penggunaan perintah play(), pause(), dan properti currentTime untuk button play menggunakan script perintah play()

Petunjuk Praktikum

Gunakan <audio></audio> tag untuk menyajikan file mp3 kemudian gunakan tag <source> untuk menentukan file mp3 yang ingin dimainkan untuk mengontrol audio menggunakan javascript DOM. dimulai dengan memberi ID pada tag audio untuk bisa diaccess menggunakan document.getElementByID(). setelah DOM-nya diperoleh, dapat digunakan perintah play(), pause() untuk fungsi play dan pause. dan bisa menggunakan properti currentTime untuk menggeser slidernya.

Hasil Praktikum

HTML

Javascript

HTML

Kesimpulan

• untuk button play menggunakan script perintah play()
• untuk button play menggunakan script perintah pause()
• untuk button play menggunakan script perintah currentTime()

Referensi

• W3C HTML5 Audio Tag
• W3C HTML Audio/Video DOM play() method
• Atom Text Editor