Postingan

Menampilkan postingan dari 2016

Prak 11 - Menggunakan Google Fonts

Gambar
1. Tujuan Belajar menggunakan external font dari Google Fonts 2. Alat 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 Percobaan

Prak 10 – Membuat Ads Banner (part 2)

Gambar
1. Tujuan Belajar membuat Ads Banner berbasis HTML5. 2. Alat Adobe Photoshop CS6 jsfiddle.net 3. Bahan 4. Dasar Teori Linear Gradient Tipe gradasi warna ini terdiri dari dua atau lebih susunan warna dan disusun secara lurus (Linear). Syntax dasarnya seperti berikut : background-image:linear-gradient(titik-awal/derajat, warna1, warna2, warna-n); 5. Hasil Praktikum REFERENSI http://www.colorzilla.com/gradient-editor/

Prak 08 – Membuat Ads Banner

Gambar
1. Tujuan Belajar membuat Ads Banner berbasis HTML5. 2. Alat jsfiddle 3. Bahan 4. Dasar Teori Banner ads adalah bentuk iklan yang dipakai di jaringan Internet. Bentuk iklan 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. Flash based banner adalah iklan yang terdapat pada halaman website yang dibuat dengan software flash sedangkan HTML5 banner merupakan iklan yang dibuat menggunakan HTML5. 5. Hasil Praktikum

Prak 07 – Membuat CSS Spritesheet

Gambar
1. Tujuan Mengenal dan membuat CSS Spritesheet dari kumpulan gambar. 2. Alat Adobe Photoshop CS6 3. Bahan 4. 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

Praktikum 6 – Intro to GreenSock Animation Platform

Tujuan Mengenal GreenSock Animation Platform. Yaitu sebuah library javascript untuk membuat animasi. Alat 1.  jsfiddle 2.  GreenSock JS Hasil Praktikum Basic Tween Easing Delay Animate Multiple Properties From Tweens Relative Tweens Multiple Target Use jQuery with GSAP JS Event Callback Reference A Tween Control Playback Repeat A Tween any Number of Times Stagger Multiple Animation TimelineLite Basic Syntax

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++ 2.  https://davidwalsh.name/browser-camera Hasil Praktikum klik disini

Praktikum 4 - Image Editor dengan CamanJs

Praktikum 4 - Image Editor dengan CamanJs  Tujuan  Mengenal cara menyajikan file gambar dilengkapi button filter menggunakan camanjs. Alat  Notepad ++ Bahan  Jquery Bootstrap Camanjs 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. Tugas Praktikum  Menyajikan gambar dan tombol untuk mengubah filter gambar. Hasil Praktikum

Praktikum 3 - Video Tag with jQuery Button and Slider

Tujuan Mengenal cara menyajikan file video dilengkapi control dan slider menggunakan HTML5, jquery ui dan bootstrap Alat Notepad ++ Bahan · Jquery UI · Bootstrap 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. Sama halnya styles dalam aplikasi pengolahan kata seperti Microsoft Word yang dapat mengatur beberapa style, misalnya heading, subbab, bodytext, footer, images, dan style lainnya untuk dapat digunakan bersama-sama dalam beberapa berkas (file). Pada umumnya CSS dipakai untuk memformat tampilan halaman web yang dibuat dengan bahasa HTML dan XHTML. CSS dapat mengendalikan ukuran gambar, warna bagian tubuh pada teks, warna tabel, ukuran border, warna border, warna hyperlink, warna mouse over, spasi antar paragraf, spasi antar teks, margin kiri, kanan, atas, bawah, dan parameter lainnya. CSS adalah bahasa style sheet yang digunakan

Praktikum 02 – HTML5 Audio tag dengan button dan slider

Gambar
Praktikum 02 – HTML5 Audio tag dengan button dan slider 1. Tujuan Mengenal cara menyajikan file audio dilengkapi control dan slider menggunakan HTML5, jquery ui dan bootstrap 2. Alat Notepad ++ 3. Bahan · Jquery UI · Bootstrap  4. 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 (me

Prak 01 – HTML5 Audio Tag

Gambar
1. Tujuan Mengenal cara menyajikan file audio menggunakan HTML5 2. Alat Notepad++ 3. Bahan Stance Gives You Balance by Hogan Grip download info 4. Dasar Teori - HTML HTML adalah kependekan dari Hypertext Markup Language dan pengertiannya adalah sekumpulan text atau file ASCII yang berisi intruksi atau perintah program untuk web browser untuk menampilkan tampilan grafis sebuah halaman website. File HTML dapat dibuat menggunakan aplikasi text editor pada semua system operasi,contohnya adalah Notepad di windows atau simple text di Macintosh. HTML merupakan cross platform karena walau pembuatannya menggunakan operating system tertentu, namun akan memiliki tampilan yang sama disemua operating system. - HTML5 HTML5 adalah Generasi selanjutnya dari HTML sebelumnya. HTML5 diciptakan dalam pengembangan bahasa HTML untuk memperbaiki konten dan memperbarui teknologi multimedia yang sudah ada padaHTML 4 dan versi sebelumnya agar mudah dijalankan oleh browser dan