Multimedia di Internet dan World Wide Web Matakuliah : pemrograman web Tahun : 2010 Multimedia di Internet dan World Wide Web

Learning Outcomes Pada akhir pertemuan ini, diharapkan mahasiswa akan mampu : Mahasiswa dapat menunjukkan hubungan antara hypertext dan hypermedia.

Outline Materi World Wide Web Markup languages Teknologi pendukung Web Beberapa alat bantu pendukung Web Penyampaian multimedia di Web Synchronized Multimedia Integrated Language (SMIL)

World Wide Web Layanan perolehan informasi di Internet, yang memberikan akses kepada banyak sekali dokumen yang terkoneksi satu sama lain melalui hypertext atau hypermedia. WWW sebagai sistem hypermedia terdistribusi memberikan potensi bidang aplikasi: Pertukaran informasi global yang dapat berisi rich media misalnya email yang diseritai audio dan video. Pembuatan lingkungan baru untuk bisnis, pendidikan, hiburan, serta berita dan informasi.

World Wide Web (Lanjutan) WWW mengikuti arsitektur tiga level HAM dari Campbell & Goodman (Sesi 11) Database level: server-server yang saling terhubung dan berisi berbagai jenis informasi. HAM level: Format standar HTML (Hypertext Markup Language) melalui protokol komunikasi HTTP (Hypertext Transfer Protocol). Presentation level: Web browser di komputer klien.

Markup Languages Markup adalah: Semua bagian dokumen yang bukan materi isi (content). Di ketikan tradisional, notasi tertulis yang diberi oleh perancang pada dokumen yang diketik; berisi instruksi kepada typesetter tentang bagaimana tata letak tulisan dan typeface apa yang digunakan. Ada dua jenis markup: Procedural markup Descriptive markup

Markup Languages (Lanjutan) Procedural Markup Descriptive Markup Times New Roman 24 Chapter Heading Times New Roman 16 Chapter Sub-Heading Arial 12 Body text Paragraph

Beberapa Markup Languages SGML (Standard Generalized Markup Language) HTML (Hypertext Markup Language) XML (Extensible Markup Language)

SGML (Standard Generalized Markup Language) Standar internasional (ISO 8879) yang diterbitkan pada 1986. Memberikan format standar untuk menambahkan markup deskriptif dalam sebuah dokumen. Juga menspesifikasikan metode standar untuk menggambarkan struktur dokumen.

HTML (Hypertext Markup Language) HTML adalah markup language berbasis SGML untuk dokumen WWW. HTML dikembangkan oleh Tim Berners-Lee di CERN (Pusat Riset Fisika Nuklir Eropa), Switzerland.

XML (Extensible Markup Language) Bukan merupakan bahasa yang mempunyai format tetap seperti HTML yang telah didefinisikan. Merupakan meta-language, yaitu bahasa untuk menggambarkan bahasa lain. Memungkinkan perancang membuat markup languages sendiri untuk berbagai jenis dokumen yang berbeda.

Beberapa Bahasa Berbasis XML XHTML (Extensible HTML), perluasan HTML sebagai aplikasi XML. MathML (Mathematics Markup Language) WML (WAP Markup Language) SMIL (Synchronized Multimedia Integrated Language)

Teknologi Pendukung Web Java Client-side scripting languages CGI (Common Gateway Interface) Server-side scripting technologies .NET

Java Awalnya bernama Oak. Dikembangkan oleh Sun Microsystems dengan sasaran membuat teknologi yang dapat berjalan di semua platform. Dua sisi di mana Java berjalan: Sisi client (Java Applet) Sisi server (Java Server Pages, Servlet, dan Enterprise Java Beans).

Client-Side Scripting Languages JavaScript Dikembangkan Netscape Corporation dan Sun Microsystems. Versi Microsoft dari JavaScript dinamai JScript. Menjadi standar ECMA. Dapat memformat dan menampilkan HTML serta mengendalikan beberapa perilaku browser. Dikembangkan menjadi bahasa scripting pada aplikasi lain, seperti Macromedia Flash (dinamai ActionScript) VBScript (Visual Basic Scripting Edition) Dikembangkan oleh Microsoft. Mempunyai kemampuan yang sama dengan JavaScript.

CGI (Common Gateway Interface) Kemampuan web server untuk berkomunikasi dengan program lain yang dapat berjalan di server. Program CGI dapat ditulis dalam bahasa pemrograman apa pun yang dapat menghasilkan executable program. Bahasa yang umum dipakai: Perl, C, C++, Tcl. Beberapa contoh pemakaian CGI: pengolahan data formulir, akses database, autentikasi dan autorisasi.

Server-Side Scripting Technologies Microsoft ASP (Active Server Pages) Menggunakan file HTML yang disertai instruksi- instruksi bahasa scripting (VBScript, JScript, dll.) yang diolah di web server. PHP (PHP Hypertext Preprocessor) Program open-source yang seperti ASP, menggunakan file HTML yang disertai instruksi- instruksi bahasa scripting. Bahasa yang digunakan juga bernama PHP. Macromedia ColdFusion MX Bahasa CFML (ColdFusion Markup Language)

.NET Platform Microsoft untuk mengembangkan aplikasi berkelas enterprise. Di Web, menggunakan lingkungan ASP.NET. Tidak seperti ASP, ASP.NET menggunakan bahasa pemrograman kompatibel .NET seperti Visual Basic .NET, C#, JScript .NET, Managed C++, dan J#. Dikompilasi, tidak diinterpretasi.

Beberapa Alat Bantu Pendukung Web Web authoring tools E-Commerce tools Management tools Search and database tools

Web Authoring Tools Macromedia DreamWeaver MX Memudahkan web author untuk menambahkan kemampuan multimedia di sisi client. Erat dengan produk multimedia dan grafis Macromedia. Dapat digunakan untuk mengedit file HTML, ASP, PHP, JSP, ASP.NET. Microsoft Visual Studio .NET dan Microsoft Web Matrix Memudahkan pengeditan ASP.NET dalam aplikasi Web. Editor WYSIWYG tidak sebaik DreamWeaver.

Web Authoring Tools (Lanjutan) Microsoft FrontPage Sangat bias ke arah visi dan alat bantu Microsoft. Mudah dipakai oleh pemakai pemula. Tidak menyenangkan bagi desainer web mahir. Adobe GoLive Erat dengan produk grafik Adobe lainnya. Dukungan alat bantu desain dan teknologi yang baik.

E-Commerce Tools AuctionBuilder Untuk membuat dan mengelola situs lelang. DX Cart & DX Shop Untuk membuat situs belanja. xCommerce Lingkungan visual yang ditujukan terutama untuk analisis bisnis dan pemrograman tingkat scripting. DreamWeaver UltraDev Memungkinkan penghasilan aplikasi Web yang dirancang secara visual.

Management Tools Webfeedback Memberikan informasi grafis tentang fungsionalitas situs web serta informasi yang berguna untuk optimisasi dan peningkatan situs. WebTrends Analysis Suite Memberikan informasi yang bermanfaat tentang kelakuan pengunjung situs, termasuk dari mana datangnya pengunjung dan halaman-halaman yang sering dikunjungi.

Search & Database Tools Customized search engines yang dapat dipasang di situs kita: Google Excite Database tools yang umum dipakai: Microsoft SQL Server Oracle MySQL PostgreSQL

Penyampaian Multimedia di Web Teks dan grafik dapat langsung dipasang menggunakan alat bantu native yaitu HTML. Animasi Animated GIF (GIF89a). Aplikasi pembantu atau plugin. Audio dan video Tag HTML <bgsound> (hanya Internet Explorer).

Streaming Audio/Video Streaming audio/video adalah audio/video yang disampaikan kepada pemakai sambil didownload dari situs sehingga dapat didengar/ditonton sebelum seluruhnya selesai didownload. Keuntungan: Waktu tunggu sangat sedikit dari awal akses sampai ketika audio/video mulai dimainkan. Beberapa format streaming audio/video: RealAudio/RealVideo dari Real Networks. Advanced Streaming Format (ASF) dari Microsoft.

Multimedia Interaktif di Web Client-side scripting languages Memanipulasi objek-objek HTML. Java Applet Menggunakan bahasa pemrograman Java. Teknologi Shockwave Shockwave Flash (SWF): format paling populer untuk aplikasi multimedia interaktif di web. Utamanya dibangun dari grafik vektor. Shockwave Director: penyampaian movie Macromedia Director di Internet. Memungkinkan animasi 3D. Plug-in lainnya

Synchronized Multimedia Integrated Language (SMIL) SMIL (dibaca ‘smile’) memungkinkan authoring sederhana presentasi audiovisual interaktif. Umumnya digunakan untuk presentasi multimedia yang mengintegrasikan streaming audio & video dengan gambar, teks dan media lainnya. Bahasanya berbasis XML.

SMIL (Lanjutan) Fungsionalitas lingkungan web yang ditambahkan oleh SMIL 2: Linking Media objects Metainformati on Structure Transitions Timing Time manipulations Animation Content control Layout

Synchronized Multimedia Integrated Language (SMIL) Salah satu inti SMIL adalah kemampuan browser menentukan keputusan presentasi. Contoh: kecepatan koneksi Internet <switch> <par systemBitRate=“56000”> ... </par> <par systemBitRate=“9600”> </switch>

Synchronized Multimedia Integrated Language (SMIL) Contoh SMIL: <smil> <head> <layout><!– Main Window Setting  <root-layout height=“550” width=“550” backgroundColor=“black” /> <region id=“Region0” backgroundColor=“#602030”> <region id=“Region1” backgroundColor=“#602030” fit=“fill” width=“500” height=“500”> </layout> </head> <body> ... </body> </smil>