Perancangan Multimedia untuk World Wide Web

Matakuliah
Tahun
: T0732 / Sistem Multimedia
: 2007
Perancangan Multimedia untuk
World Wide Web
Pertemuan 12
Learning Outcomes
Pada akhir pertemuan ini, diharapkan mahasiswa akan
mampu :
• menyesuaikan desain aplikasi multimedia untuk
penggunaan di World Wide Web
Bina Nusantara
1
Outline Materi
•
•
•
•
Teknologi WWW
Authoring Tools untuk WWW
Desain untuk WWW
Konsiderasi untuk Elemen-Elemen Multimedia
Bina Nusantara
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.
Bina Nusantara
2
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 sumbersumber eksternal
Bina Nusantara
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
Bina Nusantara
3
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
Bina Nusantara
Authoring Tools untuk WWW
• Macromedia Dreamweaver
• Microsoft Frontpage
Bina Nusantara
4
Hal Berkaitan Dengan Desain
•
•
•
•
•
Browser yang berbeda
Ukuran monitor dan window
Bandwidth
Accessibility
Usability
http://www.apis.ca/Understanding_Websites/Good_Sites_Bad_Sites/What_makes_a_good_website.htm
Bina Nusantara
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
Warna background
Warna Hypertext
Image Autodownloading
Ukuran window
Bina Nusantara
5
Statistik Browser
Bina Nusantara
IE 6
IE 7
Firefox
Netscape
51%
21%
12%
11%
Safari
IE 5
Opera
Mobile
3%
1%
1%
0.3%
http://www.thecounter.com/
http://www.upsdell.com/BrowserNews/stat.htm
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)
Bina Nusantara
6
Liquid Design
• Liquid design Æ website yang dapat menyesuaikan diri
pada ruang yang tersedia, seperti air yang mengambil
ruang dalam gelas
Bina Nusantara
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
Bina Nusantara
7
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
• Bagaimana accessible dari site anda ?
http://www.w3.org/WAI/ER/existingtools.htm
Bina Nusantara
Accessibility – ALT text
Bina Nusantara
8
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
Bina Nusantara
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
Bina Nusantara
9
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
Bina Nusantara
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
Bina Nusantara
10
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
Bina Nusantara
3D untuk Web
• VRML
• Macromedia Director
Bina Nusantara
11
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
Bina Nusantara
Video untuk Web
• Elemen multimedia 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
Bina Nusantara
12
Website yang baik atau buruk ?
• http://www.coolhomepages.com/
• http://www.webpagesthatsuck.com/
Bina Nusantara
Baik atau Buruk ?
Bina Nusantara
13