1 / 31

Pertemuan 3 Multimedia di Internet dan World Wide Web

Pertemuan 3 Multimedia di Internet dan World Wide Web. Matakuliah : D0514 / Aplikasi Software Komputer Tahun : 2005 Versi : 1. Learning Outcomes. Pada akhir pertemuan ini, diharapkan mahasiswa akan mampu : Mahasiswa dapat menunjukkan hubungan antara hypertext dan hypermedia.

cirila
Télécharger la présentation

Pertemuan 3 Multimedia di Internet dan World Wide Web

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Pertemuan 3Multimedia di Internet dan World Wide Web Matakuliah : D0514 / Aplikasi Software Komputer Tahun : 2005 Versi : 1

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

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

  4. 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.

  5. 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.

  6. 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

  7. 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

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

  9. 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.

  10. 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.

  11. 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.

  12. 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)

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

  14. 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).

  15. 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.

  16. 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.

  17. 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)

  18. .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.

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

  20. 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.

  21. 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.

  22. 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.

  23. 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.

  24. 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

  25. 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). • Aplikasi pembantu atau plugin.

  26. 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.

  27. 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

  28. 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.

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

  30. 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”> ... </par> </switch>

  31. 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>

More Related