TEKS

What is text?
 Words and symbols in any form, spoken or
written, are the most common means of
communication.
 Texts in the form of words, sentences and
paragraphs is used to communicate thoughts,
ideas and facts in nearly every aspect of our lives.
 Text is a vital element of multimedia menus,
navigation systems, and content.
– Teks  data dalam bentuk karakter
 Based on creating letters, numbers and
special characters.Text elements can be
categories into:
– Alphabet characters : A – Z
– Numbers : 0 – 9
– Special characters : Punctuation [. , ; ‘ …] , Sign
or Symbols [* & ^ % $ £ ! /\ ~ # @ .…]
– Also known Character Sets
– Special icon or drawing symbols, mathematical
symbols, etc.
 Multimedia products depends on text
for many things:
– to explain how the application work.
– to guide the user in navigating through
the application.
– deliver the information for which the
application was designed.
Important of text in Multimedia
Presentation
 Factors affecting legibility of text:
– Size.
• The size of the text
– Background and foreground color.
• The color in which the text is written in / on.
– Style.
• Also known as typeface and font
– Leading.
• refers to the amount of added space between lines of
type.
Jenis-jenis teks

 Plain Text (Unformatted Text)

 Formatted Text (Rich Text Format)
 Hypertext
 Plain Text (Unformatted Text)
 Teks dalam hal ini adalah kode ASCII (American Standard
Code for Information Interchange) dan ASCII extension
seperti UNICODE murni.
 Tiap karakter direpresentasikan oleh 7 bit (desimal = 0-127)
 33 adalah karakter non-cetak
– karakter-karakter control yang mempengaruhi bagaimana sebuah
text diproses
 94 adalah karakter-karakter yang bisa di cetak.,
– spasi dianggap sebagai grafik yang tidak terlihat
 Skema pengkodean karakter ASCII adalah kumpulan atau
set karakter yang paling umum digunakan di internet.
Plain Text (Unformatted Text) (2)
 Contoh plain text adalah pada saat kita mengetik
dengan menggunakan notepad (.txt)
 Teks file tidak terenkripsi, tidak mengandung
embedded information: informasi font, tidak
mengandung link, dan inline-image
 Terdapat perbedaan antara format plain text di
Windows dan UNIX. Di Windows, akhir baris ditandai
dengan Carriage Return/CR + Line Feed/LF (\13\10)
sedangkan di UNIX ditandai dengan Line Feed/LF
(\10) saja.
ASCII

ASCII berdasarkan English Alphabet. Dipublikasikan

pada tahun 1967 dan diupdate tahun 1986.
TABLE ASCII

P = 1010000
T=
Formatted Text (Rich Text Format)
 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.

The quick brown fox jump over a lazy dog

(pangram) Lorem ipsum Cicero's IN
Catilinam (greeking)
Formatted Text (Rich Text Format) (2)

 Contoh: {\rtf
Hello!\par
This is some {\b bold} text.\par
}

Yang akan diterjemahkan dan ditampikan sebagai berikut:

Hello!
This is some bold text.

Backslash merupakan “RTF start control code”. \par

berarti newline, \b berarti bold, dan { } digunakan untuk
grouping.
 Font
 Font adalah sebuah kumpulan karakter lengkap yang memiliki
ukuran dan gaya tunggal, beberapa karakteristik font di
antaranya:
1. Weight
• ketebalan karakter font tersebut yang relatif terhadap tinggi font tersebut. Ada
tiga kategori dasar dari weights: light, normal, bold.
2. Optical size / Size
• Font memiliki ukuran yang diatur dengan satuan point atau titik,
3. Serif
• Serif adalah tipe font dengan strokes/ekor yang menghiasi tipe font ini. Contoh: Times
4.  Sans-serif
• tipe font yang tidak memiliki stroke/ekor. Ujungnya bisa berbentuk tumpul atau tajam.
Bentuk Huruf Sans-Serif yang paling polular adalah: Helvetica dan Arial
Font Sizes
 Font size is measured in points.
 Character metrics are the general measurements
applied to individual characters.

Av
 Kerning is the spacing between character pairs
 Leading is the space between lines.

Reading Line One

Leading
Reading Line Two
 Sans-serif font

Serif font

Serif font
(red serifs)

Badrus Zaman, S.Kom

Hypertext
 Diperkenalkan oleh Ted Nelson (1965)
 Hypertext adalah teks yang memiliki fasilitas linking.
 Contoh hypertext :
- HTML : Hypertext Markup Language
- XML : eXtensible Markup Language

Badrus Zaman, S.Kom

 HTML
 Merupakan standard bahasa yang digunakan untuk
menampilkan document web.
 Hal yang bisa dilakukan dengan html:
– Mengontrol tampilan dari web page dan contentnya.
– Mempublikasikan dokumen secara online
– 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 umumnya berwarna biru, dan jika
sudah pernah diklik berwarna ungu.
XML
 Keunggulan dan keuntungan dari XML adalah:
– 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.
Using Text Elements in a
Multimedia Presentation
The text elements used in multimedia
are:
– Menus for navigation.
– Interactive buttons.
– Fields for reading.
– HTML documents.
– Symbols and icons.

Badrus Zaman, S.Kom

Menus for Navigation
 A user navigates through content using a
menu.
 A simple menu consists of a text list of topics.
Interactive Buttons

 A button is a clickable object that executes a command when

activated.
 Users can create their own buttons from bitmaps and graphics.
 The design and labeling of the buttons should be treated as an
industrial art project.
Fields for Reading
 Reading a hard copy is easier and faster than
reading from the computer screen.
 A document can be printed in one of two orientations
- portrait or landscape.
HTML Documents
 HTML stands for Hypertext Markup Language.
 It is the standard document format used for
Web pages.
 HTML documents are marked using tags.
 An advanced form of HTML is DHTML.
 DHTML stands for Dynamic Hypertext Markup
Language.
 DHTML uses Cascading Style Sheets (CSS).
Symbols and Icons
 Symbols are concentrated text in the form of
stand-alone graphic constructs.
 They are used to convey meaningful
messages.
 Symbols used to convey human emotions are
called emoticons.
 Icons are symbolic representations of objects
and processes.
Using Text Elements in a
Multimedia Presentation
 Anti-aliased text must be used when a gentle
and blended look for titles and headlines is
needed.
 Ideas and concepts can be highlighted by
making the text bold or by emphasizing text.
 A pleasant look can be created by
experimenting with different font faces, sizes,
leadings, and kerning.
SOFTWARE PENGOLAH TEKS

Badrus Zaman, S.Kom

 GAMBAR (IMAGE)
 Gambar (image) merupakan suatu representasi spatial
dari suatu obyek, dalam pandangan 2D atau 3D.
 Digital Image
– sebuah representasi dari gambar dua dimensi menggunakan
gabungan satu dan nol (binary).
– Tergantung dari apakah resolusi image tersebut adalah tetap
maka image tersebut bisa jadi image bertype vector atau
raster.
– Tanpa adanya kualifikasi apapun, istilah "digital image"
biasanya lebih condong pada image raster.
 Gambar digital merupakan suatu fungsi
dengan nilai-nilai yang berupa intensitas
cahaya pada tiap-tiap titik pada bidang
yang telah diquantisasikan (diambil
sampelnya pada interval diskrit).
 Titik dimana suatu gambar di-sampling
disebut picture element (pixel).
 Nilai intensitas warna pada suatu pixel
disebut gray scale level.
Badrus Zaman, S.Kom
INTENSITAS WARNA
 1 bit binary-valued image (0 - 1)
 8 bits  gray level images (0 - 255)
 8 bits  color images
 24 bits  224 true color (255x256x256)
 32 bits  true color (232)

Badrus Zaman, S.Kom

Format gambar digital
 spatial resolution  pixels X pixels
 color encoding  bits / pixel

Badrus Zaman, S.Kom

Misal:
 Gambar berukuran 100 pixels x 100 pixels dengan
color encoding 24 bits dengan R=8bits, G=8bits,
B=8bits per pixel, maka :
- color encoding akan mampu mewakili 0 ..
16.777.215 (mewakili 16 juta warna)  224
- Space disk yang dibutuhkan
= 100 * 100 * 3 byte (karena RGB)
= 30.000 bytes
= 30KB
atau
100 * 100 * 24bits = 240000bits

Badrus Zaman, S.Kom

Tabel resolusi display dan kebutuhan memory

Badrus Zaman, S.Kom

 Jika suatu gambar disimpan maka yang
disimpan adalah array 2D dimana masing-
masing merepresentasikan data yang
berhubungan dengan pixel tersebut.
Array[x,y] = warna pixel
 Setiap pixel dapat mempunyai informasi
tambahan yang berhubungan dengan pixel
tersebut. Masing-masing gambar juga
memiliki informasi tambahan seperti lebar X
panjang gambar, kedalaman gambar,
pembuat, dll.
Badrus Zaman, S.Kom
Jenis Grafik
 Raster
Setiap pixel didefinisikan secara terpisah.
 Vector
formula matematika digunakan untuk
menggambar graphics primitives (garis,
kotak, lingkaran,elips, dll) dan menggunakan
attributnya. Gambar vektor biasanya
berukuran lebih kecil, gambar tidak pecah,
semua manipulasi dilakukan melalui rumus.

Badrus Zaman, S.Kom

TRANSMISI GAMBAR
 Gambar digital ditransmisikan kepada penerima
melalui jaringan komputer.
 Ukuran gambar bergantung pada format representasi
gambar yang dipergunakan untuk transmisi.
 Persyaratan jaringan untuk transmisi gambar :
1. Jaringan dapat mengakomodasi transportasi
data dengan ukuran besar
2. Transmisi gambar memerlukan transportasi
yang reliable
3. Tidak bersifat time dependent (berbeda dengan
transmisi audio/video)
Badrus Zaman, S.Kom
Transmisi berdasar format
representasi gambar
 Raw image data transmission
 Compressed image data
transmission
 Symbolic image data transmission

Badrus Zaman, S.Kom

Raw image data transmission

 Gambar di-generate melalui video digitizer dan

ditransmisikan dalam format digital dari video
digitizer.
Kapasitas transmisi
= spatial resolution * pixel quantization

Contoh :
Gambar dengan resolusi 640 x 480 pixel dengan
pixel quantization 8 bit per pixel.
Maka untuk transmisi diperlukan 307200 bytes pada
jaringan komputer.

Badrus Zaman, S.Kom

Compressed image data transmission
 Gambar di-generate oleh video digitizer
dan dikompres terlebih dahulu sebelum
ditransmisikan.
 Penurunan ukuran gambar tergantung
pada metode kompresi dan
compression rate yang dipergunakan.
 Contoh : JPEG, MPEG

Badrus Zaman, S.Kom

Symbolic image data transmission
 Gambar dipresentasikan melalui
symbolic data representation sebagai
image primitive (bentuk dasar 2D atau
3D), atribut, dan informasi kontrol lain.
 Metode ini dipergunakan dalam
computer graphics

Badrus Zaman, S.Kom

Contoh:
 Waktu yang diperlukan untuk
mengirimkan gambar:
- VGA – 8 bit compatible
- SVGA - 24 bit compatible
pada jaringan dengan kecepatan 64
Kbps dan 1.5 Mbps?

Badrus Zaman, S.Kom

Jawab:
 VGA 640 x 480 x 8 = 2457600 bits
 SVGA 1024 x 768 x 24 = 18874368 bits

Badrus Zaman, S.Kom

Waktu yang dibutuhkan :

Badrus Zaman, S.Kom

FORMAT FILE GAMBAR
 BMP
 JPEG/JPG
 GIF
 PNG
 ….

Badrus Zaman, S.Kom

BMP (BITMAP)
 Format gambar yang paling umum dan merupakan
format standar Windows.
 Ukuran filenya sangat besar karena bisa mencapai
ukuran Megabytes.
 File ini merupakan format yang belum terkompresi
dan menggunakan sistem warna RGB (Red, Green,
Blue)
 File BMP dapat dibuka dengan berbagai macam
software pembuka gambar seperti ACDSee, Paint,
IrvanView dan lain-lain.
 File BMP tidak bisa (sangat jarang) digunakan di web
(internet) karena ukurannya yang besar.

Badrus Zaman, S.Kom

JPEG /JPG
 Joint Photographic Expert Group
 Format JPG merupakan format yang
paling terkenal sekarang ini.
 File ini sering digunakan pada bidang
fotografi untuk menyimpan file foto.
 File ini bisa digunakan di web (internet).
 Menggunakan teknik lossy compression
 Support 16,7 juta warna
Badrus Zaman, S.Kom
GIF
 Graphics Interchange Format
 Format GIF ini berukuran kecil dan
mendukung gambar yang terdiri dari banyak
frame sehingga bisa disebut sebagai gambar
animasi (gambar bergerak).
 Format ini sering sekali digunakan di internet
untuk menampilkan gambar-gambar di web.
 Support 256 color
 Support Transparansi

Badrus Zaman, S.Kom

PNG
 Portable Network Graphics
 Format standar dan sering digunakan di
internet untuk menampilkan gambar atau
pengiriman gambar. Ukuran file ini cukup
kecil, setara dengan ukuran gif dengan
kualitas yang bagus.
 Namun tidak mendukung animasi (gambar
bergerak).
 Support transparansi, 24bit color
 rfc2083

Badrus Zaman, S.Kom

 Sebenarnya masih banyak format file
gambar lain seperti TIFF (Tagged Image
File Format), ICO (Icon), EMF
(Enchanced Windows Metafile), PCX, ANI
(Animation), CUR(Cursor), WBMP (WAP
BMP), PSD (Adobe Photoshop
Document), dan CDR (Corel Draw).

Badrus Zaman, S.Kom

APPLICATION

Badrus Zaman, S.Kom