Sistem Multimedia

Teks – Richi Dwi Agustia

TEKNIK INFORMATIKA
UNIKOM
KONVERGENSI ELEMEN MULTIMEDIA

Konvergensi adalah
Teks
Kolaborasi atau penyatuan
yang saling terkait antar
elemen – elemen
Animasi Gambar
penyusun multimedia
Multimedia

Keterkaitan antar elemen

membentuk elemen yang
Video Suara homogen (tidak berdiri
sendiri)
TEKS

Untuk memperjelas tujuan

penampilan pesan visual
lewat gambar maka
elemen teks ditampilkan
dalam kadar tertentu.
THE POWER OF MEANING
THE POWER OF MEANING

Green
THE POWER OF MEANING

BISA
THE POWER OF MEANING

GEDANG
THE POWER OF MEANING

¡ Suatu kata dapat memiliki lebih dari satu makna

¡ Penggunaan kata yang tepat diperlukan ketika mendesain multimedia (sangat penting dalam Navigasi
dan Menu)

¡ Pemilihan kata tergantung dari beberapa factor seperti demography, budaya ataupun Bahasa.
SEJARAH TEKS

Sistem simbol teks

digunakan oleh manusia
dalam komunikasi sejak
6000 tahun lalu

Teks bukan merupakan

media paling kuno yang
digunakan oleh manusia
SEJARAH TEKS (2)

Pada abad ke-15

Johannes Gensfleisch
zur Laden zum
Gutenberg membuat
sebuah mesin tik bergerak
sebagai mesin pencetak
teks
SEJARAH TEKS (3)

Dalam dunia komputer,

teks adalah sistem symbol
yang paling awal dan juga
paling sederhana

Teks digunakan oleh

ARPANET (dikenal
INTERNET) di tahun
1970-an sebagai media
komunikasi
TEKS DALAM MULTIMEDIA
¡ Elemen teks baik bentuk dan wujudnya tidak terlalu sulit untuk diidentifikasi. Apa yang dibaca sekarang
adalah contoh paling sederhana dari penampilan teks. Namun ketika elemen teks menjadi salah satu
unsur pembangun multimedia, teks bukan perkara yang sederhana.
¡ Setiap teks dalam multimedia memiliki atribut, propertis dan nilai.
¡ Teks Bersifat statis atau dinamis
¡ Kebutuhan teks bergantung pada kegunaan aplikasi media.
¡ Game lebih sedikit menggunakan teks
¡ Ensiklopedia menggunakan banyak teks

¡ Teknologi teks didalam multimedia berkaitan dengan bagaimana teks dibuat, disimpan dan
dikembangkan.
¡ Dalam pengembangan web, teks disimpan dalam bentuk HTML.
¡ Hypertext membuat teks bisa terhubung dengan sumber daya dalam halaman web (navigasi).
¡ Markuplanguage membuat penyajian informasi menjadi menarik dan bermakna (penambahan efek).
KEGUNAAN TEKS DALAM MULTIMEDIA

¡ Teks digunakan untuk menyampaikan suatu ide, buah pikiran dan fakta yang berkaitan dengan aspek
apapun.
¡ Teks digunakan untuk menjelaskan bagaimana suatu aplikasi bekerja, membantu pengguna didalam suatu
aplikasi dan untuk menyebarkan informasi.
ELEMEN TEKS
Elemen – elemen teks dikategorikan menjadi :
¡ Abjad dan huruf yang terdiri dari karakter alphabet A-Z (termasuk huruf kecil dan besar).
¡ Nomor terdiri dari 0 – 9
¡ Huruf- huruf khusus seperti tanda bacaan ( . , ; : ‘ “) , tanda-tanda ($+-=) dan huruf tidak tercetak
(carriare return, line feed)
FONTS AND FACES

¡ Typeface: a family of graphic characters that usually includes many type sizes and styles.

¡ Font: is a collection of characters of a single size and style belonging to a particular typeface family.

¡ Styles: Bold or Italic

¡ Attributes: Underlining, strokes, font size, color etc..

KARAKTERISTIK TEKS

¡ Ascender – merupakan huruf-huruf yang

mempunyai upstroke seperti huruf ‘h’ , ‘b’
dan ‘d’.
¡ Descender – merupakan huruf-huruf
mempunyai downstroke yang terletak di bawah
garis dasar seperti huruf ‘p’ , ‘q’ dan ‘y’.
¡ Leading – merupakan ruang antara font yang
berada di atas font yang berada di bawah ruang
diantara baris (line spacing).
¡ Tracking – merupakan jarak diantara huruf.
¡ Kerning – merupakan ruang diantara dua huruf
yang biasanya kelihatan seperti berdempetan
¡ Serif – merupakan bendera/flag atau dekorasi
pada ujung suatu huruf yang mempunyai stroke
KERNING OR TRACKING

¡ the process of adjusting the spacing ¡ The consistent degree of increase (or
between characters in a proportional font, sometimes decrease) of space between letters
usually to achieve a visually pleasing result. to affect density in a line or block of text.
KERNING OR TRACKING
SERIF VS SANS SERIF

Serif dan Sans Serif merupakan cara yang paling sederhana untuk mengelompokan sebuah teks. Serif
merupakan dekorasi kecil pada ujung-ujung huruf sedangkan Sans dalam bahasa perancis bearti tanpa

Times New Roman, Century Schollbook, Helvetica, Verdana, Arial, Optima dan Avant
Bookman Old Style dan Palatino Garde
SERIF VS SANS SERIF

¡ Serif:
¡ Used in printed media for large blocks of text (newspapers, magazines, novels
etc..)

¡ Sans serif:
¡ Large Advertisements
¡ Newspaper Headlines
¡ Web content
KELEBIHAN DAN KEKURANGAN TEKS
Menurut Gatot (2004), Kelebihan dan kekurangan elemen teks multimedia adalah sebagai berikut
¡ Kelebihan
¡ Teks digunakan untuk menyampaikan informasi yang padat (condensed)
¡ Teks digunakan untuk penyampaian materi rumit dan komples seperti rumus-rumus matematika atau penjelasan suatu proses
panjang
¡ Teks digunakan sebagai media input maupun umpan balik (feedback)
¡ Teks membutuhkan media penyimpanan yang berukuran kecil
¡ Menampilkan teks pada layar komputer jauh lebih sederhana dibandingkan media lain

¡ Kekurangan
¡ Kurang tepat untuk digunakan sebagai media memberikan motivasi
¡ Materi melalui teks yang panjang dan pada layar komputer mengakibatkan mata lelah dan gangguan fisik lainnya.
JENIS – JENIS TEKS (2)
Teks merupakan data dalam bentuk kumpulan karakter. Jenis teks yang bisa diproses oleh komputer yaitu :
1. Font Bitmap
Font Bitmap tersimpan sebagai karakter tunggal, yang terdiri dari kumpulan titik-titik yang nampak di layar ketika
diperlukan. Apabila ukuran font tidak terinstall di komputer maka font akan disesuaikan ukurannya secara
matematis sehingga hasilnya kurang bagus.
Font Bitmap dibentuk dengan cara yang sangat sederhana yaitu dengan menggunakan bilangan biner (bit), proses
pembuatan cepat, sangat cocok untuk font pada pengolah kata, jika diperbesar pada ukuran tertentu font yang
dihasilkan akan menjadi rusak

Metode Bitmapped (Raster)

JENIS – JENIS TEKS (2)
2. Font Outline
Font Outline terdiri dari outlines yang terisi suatu warna/objek yang terbentuk setiap kali digunakan. Outline fonts
selalu kelihatan halus dan bentuknya rata berapapun ukurannya.
Pembentukan font pada aplikasi-aplikasi grafik, font tersebut dibuat dengan menggunakan rumus matematika
sehingga proses pembuatan lama dan memiliki kualitas yang baik jika diperbesar . Contoh : postscript dan true
type

Metode Outline
BITMAP VS OUTLINE
JENIS TEKS

Jenis teks yang dapat digunakan dalam suatu pembangunan sistem multimedia adalah :
¡ Plain Text (Unformatted Teks)
¡ Formatted Text (Rich Text Format)
¡ Hypertext

Teks adalah data dalam bentuk kumpulan karakter

PLAIN TEXT

Yaitu kumpulan karakter murni, tanpa ada embedded information didalamnya. Notepad
(.txt)
¡ Teks dalam hal ini adalah kode ASCII (American Standard Code for Information Interchange) dan
ASCII extension seperti UNICODE murni. Tiap-tiap karakter direpresentasikan oleh 7 bit “binary
digit” (desimal = 0-127).
¡ Plain Text berjenis MIME text/plain.
¡ Teks file tidak terenkrispsi, tidak mengandung embedded information, seperti informasi font, tidak
mengandung link, dan inline-image.
PLAIN TEXT

M = 1001101
N = 1001110
FORMATED TEXT

Serangkaian karakter format yang telah didefinisikan. Contoh rich text adalah pada saat kita mengetik
dengan menggunakan Wordpad (.rtf).

Pada Wordpad plain teks telah diformat sedemikian rupa dengan menggunakan aturan (tag/tanda) tertentu
sehingga teks tersebut dapat dibold, italics, underline, diwarna, diganti font, dan lain-lain
FORMATED TEXT

Contoh dokumen RTF

HYPERTEXT

Teks yang digunakan untuk membangun situs/website. Memiliki aturan penulisan khusus. (HTML atau
XML)
¡ HTML à standard bahasa yang digunakan untuk menampilkan document web.
KELEBIHAN HTML
Adapun kemampuan yang dimiliki oleh HTML adalah sebagai berikut :
¡ Mengontrol tampilan dari web page dan contentnya.
¡ Mempublikasikan document secara online sehingga bisa di akses dari seluruh dunia.
¡ Membuat online form yang bisa di gunakan untuk menangani pendaftaran, transaksi secara
online.
¡ Menambahkan object-object seperti image, audio, video dan juga java applet dalam
document HTML.
¡ Mendukung link (sebuah hubungan dari satu dokumen ke dokumen lain) antar dokumen. Link
pada umunya berwarna biru, dan jika sudah pernah diklik berwarna ungu
XML
KELEBIHAN XML

Adapun kemampuan yang dimiliki oleh XML adalah sebagai berikut :

¡ Simple, karena XML tidak serumit HTML, strukturnya jelas, dan sederhana.
¡ Intelligence, karena XML mampu menangani berbagai komplesitas markup bertingkat-tingkat.
¡ Portable, karena memisahkan data dan presentasi
¡ Fast, pencarian data cepat
¡ Extensible, dapat ditukar/digabung dengan dokumen XML lain.
¡ Linking, XML dapat melakukan linking yang lebih baik daripada HTML, bahkan dapat melink
satu atau lebih poin dari dalam maupun luar data.
¡ Maintenance, XML mudah untuk diatur dan dipelihara, karena hanya berupa data, stylesheet
dan link terpisah dari XML.
DESAIN TEKS

¡ Presentations:
¡ Font size 18 or larger
¡ Bullet Points
¡ Short sentences

¡ Websites:
¡ Crammed text on the screen is common
¡ Clear design and columns
¡ Font size can be 10-12 points and be acceptable.
MEMILIH TEKS

¡ For small type, use the most

legible font available. Decorative
fonts that cannot be read are
useless, as shown at right.
MEMILIH TEKS

¡ Use as few different faces as

possible in the same work.
Intercap/Dropcap
¡ Vary the weight and size of
your typeface using italic and
bold styles where they look
good.
¡ Using too many fonts on
the same page is called
ransom note typography.
MEMILIH TEKS

¡ Pick the fonts that seem right to

you for getting your message
across, then double-check your
choice against other opinions.

¡ Learn to accept criticism.

¡ (Never use Comic Sans)

MEMBACA TEKS

Media Cetak lebih mudah dibaca dibandingkan dengan menggunakan layar komputer
FONTS WARS
FONT OUTLINE

Komputer Multimedia dengan sistem operasi Windows mempunyai jenis font yang berbeda pada sistem
operasi UNIX ( Mac OS dan LINUX). Microsoft Windows memberikan font-font standar diantaranya
adalah times new roman, Courier, Verdana dll. Font-font yang tidak lazim disuatu pada satu OS belum
tentu ada di OS lain sehingga menjadi kendala tersendiri ketika membuat multimedia. Adapun jenis font
yang dapat di proses suatu komputer terdiri atas:
1. PostScript
2. Adobe Type Manager
3. True type
POSTSCRIPT
Metode pendeskripsian image dalam hal kontruksi matematis (kurva Bezier) sehingga tidak hanya
digunakan untuk mendeskripsikan karakter individu dari sebuah font tetapi juga untuk mendeskripsikan
keseluruhan ilustrasi dan semua halaman teks. Post Script menggunakan formula matematika. 24 titik atau
92 titik karakter dengan skala kecil/besar tetap bagus untuk digunakan.

Ada 2 macam type yang digunakan yaitu type 3 dan type 1. Teknologi type 3 lebih tua daripada type 1 dan
hanya digunakan untuk output printer sehingga sangat jarang digunakan untuk pembangunan multimedia
ADOBE TYPE MANAGER

ATM dikembangakan oleh adobe yang pada awalnya ditunjukan untuk komputer apple dan macintosh
supaya dapat menampilkan PostScript pada monitor mereka dan font yang ditampilkan halus tanpa
bergerigi ketika diberi skala. Postscript yang dapat bekerja pada ATM hanyalah postscript type 1
TRUETYPE

Apple dan Microsoft (1989) bersama-sama mengembangkan sebuah metodologi outline font kurva
kuadrat yang menurut mereka lebih baik dan cepat. True Type font ini menjadikan apple dan Microsoft
tidak perlu melisensi teknologi postscript dari Adobe. True type mendukung pembentukan karakter pada
resolusi 72 dpi atau 96 dpi.
OPENTYPE

Dibangun pada tahun 2007 oleh adobe&microsoft untuk penggunaan free secara umum
TEKS DALAM GRAFIK
Proses atau teknik didalam pengendalian teks dalam grafik adalah :
¡ Rasterization : Rasterization merupakan sistem bergrafik yang mampu menggunakan font untuk suatu
proses. Rasterization terbentuk apabila komputer melukis font ke atas penyajian 1 pixel pada waktu-
waktu tertentu. Font yang dihasilkan bergantung pada ukuran dan bilangan pixel tidak tetap yang akan
menyebabkan teks yang dihasilkan sulit untuk dibaca dan kelihatan tidak jelas.
¡ Anti-aliasing : Anti-aliasing merupakan teknik yang digunakan untuk menggabungkan font dengan latar
belakang melalui pemindahan dari warna font ke warna latar belakang. Teknik ini akan meminimakan
sudut-sudut yang tidak rapi agar penyajian keseluruhan yang dihasilkan kelihatan jelas dan rata.
Digunakan di dalam paket program ‘paint’ dan ‘drawing’ di mana menekankan pemindahan diantara
latar belakang gambar dan elemen-elemen teks supaya kelihatan lebih jelas
TEKS DALAM GRAFIK (2)
TEKS DALAM APLIKASI MULTIMEDIA
Penggunaan teks dalam pengembangan sebuah aplikasi multimedia perlu memperhatikan cara atau teknik
berikut ini:
1. Penggunaan teks yang ringkas tetapi padat sebisa mungkin hindarkan penggunaan teks yang terlalu
banyak. Kombinasi teks dengan media lain untuk menyampaikan informasi lebih bermakna. “A picture
is worth a thousand words”. Untuk desain sebuah aplikasi multimedia, teks yang digunakan haruslah
kurang dari separuh penggunaan layar/screen.
2. Gunakan typeface dan font yang sesuai. Pemilihan typeface dan font yang disesuaikan dengan isi
materi, konsep, pengguna sasaran serta mood sebuah aplikasi multimedia sangat penting di dalam
menentukan kebermaknaan penyampaian suatu informasi.
3. Pastikan teks bisa dibaca. Pastikan jenis tulisan bisa dibaca dengan mudah. Ukuran teks yang
digunakan sesuai dan bisa dibaca.
TEKS DALAM APLIKASI MULTIMEDIA (2)

4. Pemilihan gaya tulisan dan warna teks. Gaya tulisan yang biasa digunakan adalah bold, italic dan
underline. Biasanya untuk memberikan penekanan suatu isi materi. Hindarkan penggunaan latar
belakang dan teks yang mempunyai warna hampir sama. Seperti teks warna kuning dan latarbelakang
warna hijau. Kombinasi warna yang baik diantaranya hitam dan putih, hitam dan kuning, serta biru
dan putih.
5. Pemilihan font dan konsep secara konsisten. Pengembang multimedia haruslah menekankan konsep
konsistensi atau keseragaman dalam penggunaan teks. Pastikan pemilihan font untuk pengembangan
agar bisa dimainkan di dalam sistem komputer yang digunakan untuk tujuan umpan balik. Teks dalam
bentuk grafik untuk memudahkan penyesuaian dengan sistem komputer. Teks grafik sesuai untuk judul
utama atau subjudul
HIPERMEDIA DAN HIPERTEKS
Multimedia interaktif menjadi hipermedia ketika desainernya menyediakan suatu struktur dari elemen-
elemen yang ditautkan dengan pengguna yang dapat bernavigasi dan berinteraksi. Istilah hypermedia
diperkenalkan oleh Ted Nelson. Adapun istilah-istilah yang terdapat pada hypermedia adalah sebagai
berikut :
1. Nodes
¡ Menyimpan informasi lengkap sistem dan menampilkannya kepada pemakai, dapat berisi beragam informasi
seperti teks dan grafik.
¡ Sistem hypermedia modern memungkinkan ragam informasi yang lebih kaya: teks, gambar, audio, video,animasi
disimpan sebagai nodes
2. Links
¡ Links adalah sarana untuk menghubungkan nodes
¡ Fungsi utama links adalah menyediakan mekanisme navigasi logis dalam dokumen hypertext
(unidirectional/bidirectional)
HIPERMEDIA DAN HIPERTEKS (2)

3. Hirarki
¡ Struktur hierarkis meningkatkan navigasi dan mengurangi kesesatan dalam hypertext.
¡ Struktur hierarkis memaksa pembuat sistem hypertext menyusun nodes dalam himpunan-himpunan dan
membuat kategorisasi (pengelompokan nodes tergantung pada jenisnya).
¡ Struktur hierarkis juga memungkinkan node utama (“parent”) terhubung pada beberapa nodes di sepanjang
hierarchical tree (“child”).
STRUKTUR HIPERMEDIA

Cara paling sederhana untuk menavigasikan struktur hypermedia adalah via tombol yang mengijinkan pengguna untuk
mengakses link informasi (teks, grafis, dan suara) yang termuat dalam node. Struktur Navigasi dapat dilihat pada
gamabr berikut
STRUKTUR HIPERMEDIA

Navigasi menjadi lebih kompleks bila ditambahkan link asosiatif yang mengkoneksikan elemen secara tidak langsung
dalam hirarki atau urutan. Penanda lokasi dibutuhkan untuk mencegah pengguna tersesat didalam sistem. Link dapat
mengarahkan pada sebuah node yang menyediakan link lebih jauh.
KASUS

Cari 3 buah website yang berbeda (Edukasi, Berita/Hiburan dan Komersial)

¡ Analisis halaman berandanya, karakteristik teks apa saja yang dimiliki oleh halaman tersebut (size,
font, color, dan jumlah teks yang disajikan)
¡ Gambarkan Struktur navigasi masing-masing web !
¡ Berikan penjelasan ringkas diantara website tersebut mana yang menurut anda baik dari sisi desain
teksnya.
¡ 5 Kata Umum apa yang sering digunakan pada website - website tersebut ?
Thanks!
Do you have any questions?

richi@email.unikom.ac.id

CREDITS: This presentation template was created by Slidesgo, including

icons by Flaticon, infographics & images by Freepik