Teknologi Multimedia untuk Teknologi Web

dokumen-dokumen yang mirip
LAPORAN RESMI. PRAKTIKUM TEKNOLOGI WEB Flash Audio Video

BAB II Landasan Teori 2.1 Kajian Pustaka

UKDW BAB 1 PENDAHULUAN. 1.1 Latar Belakang Masalah

Sistem Grafika Komputer. Sistem yang memungkinkan operator untuk berdialog langsung dengan yang terlihat dilayar komputer

Program Studi DIII Farmasi POLITEKNIK KESEHATAN PERMATA INDONESIA

Aplikasi Pengolah Grafis. Oleh: Hesti Khuzaimah Nurul Yusufiyah

Multimedia Lanjut. Sri Siswanti, S.Kom, M.Kom No. HP/WA :

Multimedia. Semester Pendek - Pertemuan 1 Tema : Gambar. By In Wahyu Widodo

LAPORAN RESMI. Flash, Audio dan Video. Dosen Pembimbing : Dwi SusantoS. ST, MT. Oleh Hamidah Nur Hidayati

Tips dan Trik dalam Mendesain Web

BAB 1 PENDAHULUAN. 1.1 Latar Belakang Masalah

BAB IV IMPLEMENTASI DAN PENGUJIAN

APLIKASI PINNACLE STUDIO

BAB IV HASIL DAN PEMBAHASAN

BAB II LANDASAN TEORI

SOFTWARE TERBAIK UNTUK VIDEO EDITING

Bab 1 Perkenalan Awal untuk Anda yang Pemula

MACROMEDIA DIRECTOR. Sumber-sumber:

FERNANDYA RISKI HARTANTRI / F DASAR-DASAR HTML

BAB II TINJAUAN PUSTAKA. Tutorial interaktif adalah media pembelajaran yang menjelaskan tentang langkah langkah

PENGANTAR APLIKASI KOMPUTER

BAB III DATA DAN ANALISA

UKDW BAB 1 PENDAHULUAN

Desain Grafis. Sistem Informasi Fery Antony, S.T., M.Kom

Modul Web Design. Dosen: Nofiyati, S.Kom, M.Kom Program Studi Teknik Informatika Universitas Jenderal Soedirman

BAB III LANDASAN TEORI. Multimedia terdiri dari dua kata yaitu Multi dan Media. Multi yang berarti

ADOBE MASTER COLLECTION DAN FUNGSINYA

Animasi Objek 2 Dimensi GAMBAR BITMAP

BAB I Pengantar Desain Grafis

BAB I PENDAHULUAN A. Latar Belakang Masalah

1.Pengenalan Digital Book

Latar belakang Desain grafis

Desain Grafis. Oleh: Hadi Sisyanto, S. Kom.

Definisi, Tujuan, dan Manfaat Desain Grafis

BAB II TINJAUAN PUSTAKA

MENGENAL GRAFIS dan PROGRAM APLIKASINYA

PEMROGRAMAN MULTIMEDIA

BAB 1 PENDAHULUAN. Animasi berasal dari kata Animation yang ada dalam kata bahasa inggris to

5 Software Video Editor Terbaik

II. TINJAUAN PUSTAKA. grafik, animasi, dan video. Beberapa definisi menurut beberapa ahli: 1. Kombinasi dari komputer dan video (Rosch, 1996).

KARTU SOAL TAHUN 2007 BUTIR SOAL 1

Belajar Dasar Illustrator : Apa itu Illustrator?

BAB IV IMPLEMENTASI DAN PENGUJIAN

C. Ms Powerpoint D. Notepad E. Ms Acces

BAB II TINJAUAN PUSTAKA. Multimedia dapat diartikan sebagai penggunaan beberapa media

FORMAT FILE VIDEO. 1. ASF ( Advanced Streaming Format / Advanced System Format )

BAB 1 PENDAHULUAN. adalah aplikasi perkantoran (Microsoft office: word, excel, power point) yang seluruh

Desain Grafis. Arie Sopiana.

Perkembangan Desain Grafis Online

BAB III METODOLOGI PENELITIAN

Perangkat Lunak Multimedia

Pembuatan Media Pembelajaran Menggunakan Camtasia Studio

PEMBUATAN BUKU DIGITAL

PENGERTIAN WEB web adalah

GIMP & INKSCAPE. Materi Ujian Sekolah Tertulis (Grade 12)

BAB 2 LANDASAN TEORI. Animasi berasal dari kata Animation yang dalam bahasa Inggris to animate yang

PENGUMPULAN DATA DAN ANALISIS

BAB 2 LANDASAN TEORI. Istilah sistem berasal dari bahasa Yunani yaitu systema yang mengandung arti kesatuan

Membuat obyek,tabel,grafik dan video pada power point

MUATAN LOKAL MEMBUAT WEB STATIS

BAB IV DESAIN DAN IMPLEMENTASI

Silabus Mata Kuliah Perancangan Web

Komunikasi Multimedia

APLIKASI ULEAD VIDEO STUDIO

BAB 2 LANDASAN TEORI. Kata komputer (computer) berasal dari bahasa latin computare yang berarti

Manfaat CSS dalam Pembuatan Website

Dasar Pemrograman Web. Pemrograman Web. Adam Hendra Brata

ULANGAN AKHIR SEMESTER GENAP TAHUN PELAJARAN 2011 / 2012

SMP Kristen Tirtamarta hal 1

LAPORAN PRAKTIKUM 2 FLASH, VIDEO DAN AUDIO

Tutorial Software Lecture Maker

Modul 7 IMPORT DAN EXPORT MEDIA

BAB 13 MEMPERCANTIK TAMPIL WEB

Pert 11 DASAR-DASAR WEB DESIGN

BAB IV. PENGALAMAN KERJA PRAKTEK

Desain Grafis. Heni Handayani.

BAB III METODOLOGI 3.1 Analisis Kebutuhan

Bab 5. Cascading Style Sheet (CSS)

SOAL REMEDIAL UTS TIK KELAS XII SMT GANJIL 2012

BAB 4 IMPLEMENTASI DAN EVALUASI. membutuhkan spesifikasi Perangkat Keras (Hardware) dan Perangkat Lunak (Software)

DASAR-DASAR WEB DESIGN

IV KONSEP PERANCANGAN

Mode Warna pada Image Ada beberapa mode warna yang dapat digunakan pada Photoshop. Masingmasing mode warna mempunyai maksud dan tujuan yang berbeda, y

Adobe Photoshop. Heni Handayani.

pembuatan animasi ini adalah

HTML 5 TIMOTIUS FLOREAN,

BAB V KARYA PERANCANGAN

LAPORAN PRAKTIKUM MONITORING BERBASIS WEB

Iwan Sonjaya, ST.MMT.MT. Gambar bitmap atau yang sering juga disebut

Format File BAB 9. PSD (Photoshop Document) Format file ini merupakan format asli dokumen Adobe Photoshop. Format ini mampu menyimpan informasi layer

BAB II TINJAUAN PUSTAKA

MENYISIPKAN VIDEO YOUTUBE KE WEB DENGAN HTML5

HANDOUT DASAR ANIMASI

PEMERINTAH KOTA KEDIRI DINAS PENDIDIKAN SEKOLAH MENENGAH ATAS (SMA) NEGERI 8 KEDIRI Jl. Pahlawan Kusuma Bangsa No 77 (0354) Kediri 64124

BAB IV IMPLEMENTASI DAN PENGUJIAN

BAB III ANALISA & PERANCANGAN. 3.1 Menggabungkan Konten Media ke Dalam Aplikasi JavaFX

Sistem Multimedia. Image. Donny Reza, S.Kom

RPP KOMPUTER GRAFIS COURSE CONTENT

Interactive Broadcasting

Contoh dari aplikasi grafis bitmap adalah Adobe Photoshop, Corel Photopaint, Microsoft Photo Editor, Macromedia Fireworks, dll.

Transkripsi:

Teknologi Multimedia untuk Teknologi Web Multimedia mencakup segala sesuatu yang dapat dilihat dan/atau didengar baik dalam media cetak, elektronik maupun yang lainnya. Multimedia sangat dibutuhkan dalam berbagai hal: periklanan, pendidikan, kedokteran, web, dan lain-lain. Dalam web, multimedia hadir dalam berbagai format seperti gambar, musik, suara, video, rekaman, film, animasi, dan lain sebagainya. Agar konten-konten multimedia dapat direalisasikan dalam suatu halaman web dengan baik, dibutuhkan alat pendukung diantaranya sebagai berikut: Web browser generasi pertama hanya mendukung text dengan satu font dan satu warna. Seiring perkembangan zaman, web browser dapat mendukung berbagai font dan warna serta gambar. Untuk suara, animasi, dan video, web browser yang berbeda memiliki cara berbeda satu sama lain dalam menampilkannya, dan beberapa format membutuhkan program pembantu tambahan (plug-ins) untuk dapat berjalan. yang sering digunakan di antaranya sebagai berikut: Adobe Flash - berfungsi untuk menampilkan konten flash yang biasanya terdapat pada video online, game online, dan lain sebagainya. Java - digunakan untuk mengakses aplikasi web, game online, home banking, dan lain sebagainya. Microsoft Silverlight - sama dengan Adobe Flash, Microsoft Silverlight juga mendukung konten flash, namun hanya berjalan pada sistem operasi buatan Microsoft, Windows. http://alfa-komar.xyz/ 1 of 5

Google Voice and Video Chat - sesuai namanya, plug-in ini mendukung obrolan suara dan video melalui web browser. Namun belakangan plug-in sudah semakin tidak dibutuhkan karena telah hadir HTML5 yang mendukung konten multimedia. Kini semua browser yang mendukung HTML5 dapat memutar musik, menampilkan animasi, memainkan video, mengakses apliakasi web hingga menjalankan game dan lain-lain tanpa membutuhkan plug-in. Konten yang terdapat pada halaman web harus memenuhi konsep multimedia agar mudah dipahami sehingga maksud dari pemilik web dapat tersampaikan dengan baik kepada para pengunjung web. Untuk memenuhi hal tersebut, maka dibutuhkan aplikasi pengolah, baik untuk gambar, suara, maupun video. Ada banyak aplikasi yang dapat digunakan untuk mengolah berbagai macam media. Berikut beberapa jenis aplikasi dan fungsinya yang dapat memenuhi kebutuhan multimedia untuk web: Pengolah Gambar Dalam dunia digital, gambar terbagi menjadi dua macam: gambar bitmap dan gambar vector. Gambar bitmap terdiri dari hamparan pixel, semenara gambar vector terdiri dari kurva dan garis yang melalui titik-titik koordinat tertentu. Gambar bitmap Gambar dalam web digunakan untuk mempercantik halaman: dijadikan sebagai background, http://alfa-komar.xyz/ 2 of 5

gambar ilustrasi, icon dan lain-lain. Beberapa jenis gambar yang biasa digunakan untuk kebutuhan tersebut biasanya gambar bitmap dengan extensions.gif,.jpg, ataupun.png. Aplikasi pengolah gambar dibutuhkan bukan hanya untuk mengedit suatu gambar agar terlihat lebih menarik dalam tampilan web, namun juga dibutuhkan untuk membuat rancangan suatu halaman web. Jenis gambar yang sering digunakan untuk membuat rancangan ini biasanya gambar bitmap. Beberapa aplikasi pengolah gambar bitmap yang dapat digunakan diantaranya Adobe Photoshop, Corel Photo Paint, GIMP, Acorn, dan lain-lain. Dalam perancangannya, halaman web biasanya digambar terlebih dahulu menggunakan pengolah gambar sampai didapatkan tampilan yang sesuai keinginan sebelum akhirnya direalisasikan menggunakan sekumpulan koding. Fitur yang paling dibutuhkan dalam perancangan ini diantaranya: Color picker, digunakan untuk mengetahui kode warna dalam suatu gambar, misalnya warna merah dapat ditampilkan dengan kode #ff0000 atau kode #00ff00 yang didapatkan dari warna hijau. Slice, fitur ini dapat memberikan informasi posisi suatu elemen gambar, biasanya dalam satuan pixel. Ini memudahkan dalam menentukan posisi suatu elemen dalam halaman web. Layer, Image editor yang memisahkan komponen gambar berdasarkan layer - dapat mempermudah perancangan web terutama ketika salah satu komponen gambar ingin dijadikan sebagai salah satu elemen pada halaman web. Gambar vector Gambar vector saat ini masih jarang digunakan dalam halaman web, karena sebelumnya halaman web tidak mendukung gambar vector untuk ditampilkan. Namun dengan hadirnya HTML5, halaman web dapat menampilkan gambar vector melalui tag <svg> ataupun memasukkan gambar dengan extenstions.svg ke dalam tag <img>. http://alfa-komar.xyz/ 3 of 5

Gambar vector memiliki ukuran file yang jauh lebih kecil dibanding gambar bitmap, sehingga gambar vector akan lebih cepat dimuat dibandingkan dengan gambar bitmap. Selain itu, gambar vector memiliki sifat scalable, yang artinya dapat diperbesar ataupun diperkecil ukurannya tanpa mengurangi kualitasnya. Gambar vector sangat cocok untuk digunakan menjadi icon, pengganti elemen-elemen yang berbentuk tidak lazim dan lain-lain. Gambar Bitmap Gambar Vector Saat ini, HTML5 dapat memenuhi kebutuhan pembuatan gambar vector langsung melalui sekumpulan koding di dalam file HTML itu sendiri, namun ini akan membutuhkan tenaga ekstra dan memakan waktu yang cukup lama untuk membuat suatu gambar yang sedikit rumit. Sebagai gantinya, kita dapat memanfaatkan aplikasi pengolah gambar vector seperti Adobe Illustrator, CorelDraw dan lain-lain, lalu meng-export-nya ke dalam format.svg. Pengolah Video Terdapat banyak sekali format video, seperti MPEG, AVI, WMV, QuickTime, RealVideo, Flash, Ogg, WebM, MP4 dan lain-lain, namun hanya beberapa yang didukung oleh HTML5 yaitu MP4, Ogg dan WebM. Maka pengolah video dibutuhkan untuk mengubah format video agar dapat ditampilkan ke dalam halaman web tanpa membutuhkan plug-in khusus. Bukan hanya untuk merubah format file, pengolah video juga dapat digunakan untuk memperkecil ukuran video agar tidak terlalu berat dimuat secara online pada halaman web. Situs jejaring sosial Youtube menyediakan beberapa format untuk sebuah video, mulai dari video dengan kualitas standar (SQ), kualitas tinggi (HQ), hingga video dengan definisi tinggi (HD). Ini http://alfa-komar.xyz/ 4 of 5

dimaksudkan untuk menyesuaikan video dengan kualitas perangkat dan koneksi internet pengguna sehingga koneksi yang relatif lebih lambat tetap dapat memutar video melalui Youtube walaupun ketika diunggah, video tersebut memiliki kualitas HD. Aplikasi pengolah video yang sering digunakan diantaranya Windows Movie Maker, Adobe Premiere, MovieStorm, Lightworks, CyberLink PowerDirector, Pinnacle Studio, dll. Pengolah Animasi Animasi bisa diartikan sebagai gambar bergerak, dan gambar yang digunakan bisa berjenis bitmap ataupun vector. Animasi dalam web bisa digunakan sebagai media untuk mengilustrasikan sesuatu, menarik perhatian pengunjung, ataupun mengatur bagaimana suatu halaman akan ditampilkan. Untuk menampilkan halaman web yang atraktif, animasi dapat dibuat menggunakan CSS (Cascade Stylesheet) versi 3. CSS adalah sekumpulan koding yang digunakan untuk memberikan style khusus pada HTML. Dengan CSS, HTML dapat terlihat lebih menarik dengan warna, bentuk, layout, dan gerakan-gerakan tertentu pada elemen-elemennya. http://alfa-komar.xyz/ 5 of 5