Sistem Multimedia Pertemuan 11

Multimedia Design for World Wide Web

Outline Materi

• Teknologi WWW

• Authoring Tools untuk WWW

• Desain untuk WWW

• Konsiderasi untuk Elemen-Elemen Multimedia

Teknologi WWW

• HTML (HyperText Markup Language)

– DHTML (Dynamic HTML)

– XML (eXtensible Markup Language)

– SMIL (Synchronized Multimedia Integration Language)

– VRML (Virtual Reality Markup Language)

• Dukungan Browser

– Plug-in media handlers: memungkinkan movie, file multimedia ditampilkan melalui native browser,seperti: shockwave plugin,Quicktime VR, real audio, acrobat reader

– JAVA Script: memungkinkan transfer dari applets, program kecil melalui HTTP dan dijalankan pada browser.

Halaman-halaman Web

• Halaman-halaman web dibuat dari text documents yang mendasar

• Halaman-halaman web dapat dibuat di text editor apapun, seperti: notepad

• Elemen-elemen multimedia (kecuali text) disimpan ke dokumen secara eksternal

• HTML mendefinisikan format (look - tampilan) dan fungsional (feel - kegunaan) dari halaman-halaman web dan menyediakan link ke sumber-sumber eksternal

Keuntungan HTML

• Ukuran file kecil

• Tidak membutuhkan authoring tools yang mahal

• Ruang web yang terjangkau

• Tidak membutuhkan ketrampilan programming

• Menyediakan link-link ke lokasi eksternal dan download

• Sekali upload, menyediakan “Publikasi instan”

• Dapat dilihat pada komputer manapun dengan software web browser yang gratis

Kerugian HTML

• Apa yang dirancang tidak akan tampil sama di setiap komputer

• Tidak ada standar HTML

• Browser yang berbeda mendukung HTML tags yang berbeda/unik

• Hardware yang berbeda mempengaruhi hasil akhir

• Hypertext hanya menyediakan interaksi yang terbatas

Authoring Tools untuk WWW

• Macromedia Dreamweaver

• Microsoft Frontpage

Hal Berkaitan Dengan Desain

• Browser yang berbeda

• Ukuran monitor dan window

• Bandwidth

• Accessibility

• Usability

Browser yang berbeda

• Tidak semua web browser mendukung fitur yang dimiliki, seperti implementasi dari DHTML yang berbeda

• Setting pada browser

mempengaruhi produk akhir

– Font yang dipilih dan di-install

– Warnabackground

– WarnaHypertext

– Image Autodownloading

– Ukuranwindow

Hal Berkaitan Dengan Monitor & Window

• Banyak orang yang menggunakan web dengan resolusi yang beragam dan layar window dengan ukuran yang berbeda

• Rekomendasi 􀃆 gunakan liquid design ketika mendesain halaman-halaman web

• Kita dapat mendesain dengan menggunakan resolusi layar yang umum

• Personal Digital Assistants (contoh : Palm, Windows CE, dan peralatan WAP lain mempunyai resolusi layar yang rendah)

Liquid Design

• Liquid design 􀃆 website yang dapat menyesuaikan diri pada ruang yang tersedia, seperti air yang mengambil ruang dalam gelas

Bandwith

• Rule of thumb (aturan dasar) bagi orang yang menggunakan modem dengan 28.8k adalah 2kps untuk

mentransfer grafik pada web

• Contoh : sebuah grafik standard 40k bisa mengambil waktu 20 detik untuk tampil pada browser dari user

Hal Berkaitan Dengan Accessibility

• Visual Impaired Users (User Tuna Netra)

– Tidak dapat mengakses image yang digunakan untuk menyampaikan konten atau untuk membantu navigasi

– Kesulitan dalam membedakan elemen layar yang penting atau text yang menggunakan image sebagai background

• Solusi

– Menyediakan ALT text untuk deskripsi singkat dari grafik, gunakan Longdesc attributes (Dalam HTML, longdesc adalah attribute yang digunakan dalam image element, frame element, atau iframe element) atau berikan link ke halaman lain untuk content yang lebih panjang.

– Banyak pergerakan, pencahayaan dan lain lain, dapat mengganggu, hadi hindari client-based refresh & redirection, banyak animasi gif dan lain sebagainya

– Hindari menggunakan frame atau table yang tidak dibutuhkan

The Ten Most Violated Homepage Design Guidelines

oleh Jacob Nielsen

1. Tampilkan dengan jelas apa yang ditawarkan oleh site anda yang berguna untuk user dan bagaimana layanan anda dibedakan dari kompetitor yang lain

2. Gunakan liquid layout yang memungkinkan mengatur ukuran homepage

3. Gunakan warna untuk membedakan links yang sudah dan belum dikunjungi

4. Gunakan graphics untuk menampilkan konten sebenarnya, bukan hanya untuk mendekorasi homepage anda

5. Masukkan tag line yang secara eksplisit menyimpulkan apa yang dilakukan oleh situs atau perusahaan

6. Mudahkan akses ke features baru dari homepage anda

7. Masukkan deskripsi singkat dari situs pada window title

8. Jangan menggunakan heading untuk memberi label pada area pencarian; lebih baik

gunakan sebuah tombol “Search” di sebelah kanan kotak

9. Untuk stock quotes, tampilkan juga persentase perubahan, bukan hanya poin yang didapat atau hilang

10. Jangan masukkan link aktif ke homepage pada homepage itu sendiri

Text untuk Web

• Pengguna boleh memilih untuk melihat website menggunakan font yang disukai (setting user preference dalam browser)

• Font Face standar : Times New Roman, Courier, dll

• Untuk fleksibilitas dalam mengatur font : CSS (Cascading Style Sheets)

– CSS tersedia dalam DHTML

Images untuk Web

• Format Standar : GIF, PNG, JPEG

• Format lain membutuhkan plug-ins khusus

• GIF dan PNG adalah kompresi lossless dan mendukung transparansi  

• PNG -> pengganti GIF

• JPEG -> kompresi lossy, sepuluh kali lebih terkompres daripada GIF

• Macromedia Fireworks dirancang khusus untuk membuat grafik bagi halaman-halaman web

Suara untuk Web

• Format standar : AU, Wav, MIDI 􀃆 embedded

• MIDI biasanya digunakan untuk latar belakang musik

• Ukuran Wav besar – 11khz, 8 bit mono 􀃆 mengurangi kualitas tetapi tetap dapat didengar

• Menggunakan plug-in : Shockwave Audio (swa), QuickTime

Animasi untuk Web

• HTML Tag : <blink> dan <marquee>

• Javascript

• Animated GIF (GIF89) dapat digunakan untuk membuat animasi cel yang sederhana

• Animation Plug-ins/players : Director, Flash, QuickTimeVR Catatan : Walaupun animasi baik untuk menarik perhatian user, tapi perhatikan untuk tidak menggunakan animasi blink untuk text bacaan

Flash atau non-Flash?

• Keuntungan Flash

– Sedang tren

– Perancanan yang bagus

– Kontrol penuh dan fleksibel bagi perancang untuk merancang interaksi dengan user

• Hal berkaitan dengan Flash

– Download yang lama bagi user dengan internet koneksi yang lama

– Membutuhkan plug-in tambahan

– Versi yang berbeda membutuhkan plug-in yang berbeda

– Tidak dapat mengakomodasi text dalam jumlah besar

– Sulit / Tidak mungkin untuk user tuna netra untuk menggunakan

Video untuk Web

• Elemenmultimedia dengan ukuran paling besar

• Low bandwidth video membutuhkan kompresi

– Pilihlah teknik kompresi yang paling sering digunakan

• Teknologi Streaming

– Data ‘streams’ (mengalir) dari server ke player

– Player mulai bekerja saat data sedang streaming (mengalir)

– Audio streaming menggunakan sebuah buffer

– Video streaming menggunakan sebuah buffer yang lebih besar

– Contoh : www.youtube.com