Text dan Hypertext
Pertemuan 3
Matakuliah
: T0732 / Sistem Multimedia
Tahun
: 2007
Bina Nusantara
Learning Outcomes
Pada akhir pertemuan ini, diharapkan mahasiswa akan
mampu :
• Menunjukkan Penggunaan Teks dan Hypertext pada
Aplikasi Multimedia
Bina NusantaraOutline Materi
• Definisi Text
• Teknologi Text
• Fonts
• Text Data File
• Menggunakan Text
• Hypertext dan Hypermedia
Bina Nusantara
Apakah Text Itu ?
• Media dasar untuk banyak sistem multimedia
• Text dalam bentuk kata, kalimat, paragraf digunakan
untuk mengkomunikasikan pikiran, ide, fakta dalam
hampir setiap aspek kehidupan.
• Produk Multimedia bergantung pada text dalam banyak
hal :
– Menjelaskan bagaimana aplikasi berjalan – Membimbing user ber-navigasi dalam aplikasi
– Menyampaikan informasi sebagai tujuan rancangan aplikasi
Bina Nusantara
Teknologi Text
• Didasarkan pada pembuatan huruf, angka dan special
karakter.
• Text element dapat dikategorikan dalam :
– Karakter Alphabet : A - Z – Angka : 0 - 9
– Karakter Special : Punctuation [. , ; ‘ …] , Tanda atau Simbol [* & ^ % $ £ ! /\ ~ # @ .…]
– Juga dikenal sebagai Character Sets
• Termasuk juga spesial icon atau simbol gambar, simbol
matematika, huruf Yunani dll.
Bina Nusantara
Typeface, Font dan Point
• Typefaces
– Representasi grafik dari alfabet, angka dan spesial karakter – Biasanya beragam tergantung ukuran dan style
• Fonts
– Ukuran tertentu suatu typeface
– Ragam ditentukan dengan ukuran dan style – Ukuran diukur dalam point
• Satu point adalah 1/72” atau 0.0138 inc”
– Ukuran diukur dari ujung atas huruf kapital (mis : ‘A’ atau ‘P’) ke ujung bawah dari descenders (mis : ‘y’, ‘p’, ‘q’)
Bina Nusantara
Efek Font
• Beberapa efek yang berguna untuk menarik perhatian
pembaca pada suatu content :
– Case: UPPER dan lower letter
– Bold, Italic, Underline,
superscriptatau
subscript
–
–
Embossed
Embossed
atau
Shadow
Shadow
–
–
C
C
o
o
l
l
o
o
u
u
r
r
s
s
Bina Nusantara
Tipe-Tipe Font
• Font terbagi dalam 2 kelas : Serif atau Sans Serif• Font bertipe Serif menggunakan tips atau flag dekoratif pada bagian akhir ujung sebuah huruf
• Font bertipe Sans Serif tidak memiliki tips atau flag ini • Font bertipe Serif biasanya digunakan untuk dokumen atau
layar yang mengandung banyak text
– Hal ini disebabkan serif membantu membimbing mata pembaca selama membaca text
• Untuk tampilan komputer, font bertipe Sans Serif dianggap lebih baik karena mempunyai kontrast yang lebih tajam
Bina Nusantara
Anatomi Font
Bina Nusantara
Tracking, Kerning dan Leading
Av
A
v
Unkerned
Kerned
Bina Nusantara
Tracking, Kerning dan Leading
Reading Line One
Reading Line One
Reading Line One
Reading Line One
Leading
Ascender :garis di atas rata-rata untuk lower case karakter Descender : garis di bawah rata-rata untuk lower case karakter Leading : spasi antar baris
Tracking : spasi antar karakter
Kerning : spasi antara sepasang karakter, biasanya sebagai
overlap untuk memperbaiki tampilan
Bina Nusantara
Jaggies dan Antialiasing
• Jaggies merupakan batas kasar / patah-patah pada bitmapped image biasanya terlihat jika image diperbesar
• Merupakan konsekuensi dari array of pixel yang merupakan dasar dari suatu image
• Antialiasing merupakan teknik untuk mengeliminasi batas kasar tersebut
• Teknik untuk menggantikan pixel dengan warna lain sehingga batas kasar terlihat seperti garis yang berkesinambungan • Teknik ini digunakan untuk menyatukan font dengan
background nya dengan memberikan warna transisi dari font dengan background nya
• Teknik ini meminimalisasi batas patah-patah dan membuat tampilan yang lebih halus secara keseluruhan
Bina Nusantara
Jaggies dan Antialiasing
Bina Nusantara
Text Data Files
• Format data encoding yang umum untuk text adalah : • Plain text (ASCII) merupakan text dalam format elektronik
yang dapat dibaca dan dinterpretasikan oleh manusia • Rich text mirip dengan Plain text tapi juga mengandung
karakter pengendali spesial untuk feature tambahan • Hypertext merupakan advance rich text yang memungkinkan
pembaca untuk melompat ke bagian berbeda dalam dokumen atau juga ke dokumen baru
Bina Nusantara
Text Data Files
Plain text
This is plain text. It is readable by humans. It can contains numbers (01234) and punctuation (.,#@*&) since it uses the ASCII character set.
Plain text
Plain text
This is plain text. It is readable by humans. It can contains numbers (01234) and punctuation (.,#@*&) since it uses the ASCII character set.
Rich text
This is <bold>rich text</bold>.<br><center>It is also readable by humans but contains additional tags which control the presentation of the text.</center>
Rich text
Rich text
This is <bold>rich text</bold>.<br><center>It is also readable by humans but contains additional tags which control the presentation of the text.</center>
Hypertext
This is <a href=“http://www.w3c.org/”>hypertext</a>. It uses the rich text format shown above but adds the ability to hyperlink to other documents.<hr><img src=“logo.gif”>
Hypertext
Hypertext
This is <a href=“http://www.w3c.org/”>hypertext</a>. It uses the rich text format shown above but adds the ability to hyperlink to other documents.<hr><img src=“logo.gif”>
Bina Nusantara
Working With Text
• Yang perlu diperhatikan dan guidelines
saat menggunakan text :
– Singkat dan jelas (Concise)
– Gunakan typeface dan font yang tepat
– Mudah dibaca
– Perhatikan type style dan warna
– Batasi dan konsisten
Bina Nusantara
Mudah Terbaca
Can you read me?
Can you read me?
Bina Nusantara
Mudah Terbaca
• The buzzword being splashed around is
Convergence and by it we mean the
convergence of multimedia technology
with the telecommunications industry.
• The buzzword being splashed around is
Convergence and by it we mean the
convergence of multimedia technology
with the telecommunications industry.
Bina Nusantara
Working With Text
• Text dalam jumlah besar
– Pertimbangkan alternatif lain - animasi, video,
narasi.
– Tampilkan preview dan mungkinkan user
untuk mendapatkan lebih
• Hyper linking
• Pop-up messages, scroll bars, drop-down menus
Bina Nusantara
Menggunakan Text Secara Efektif
• Mengkomunikasikan data
– Nama dan alamat pelanggan
– Informasi harga produk
• Menjelaskan konsep dan ide
– Pernyataan misi perusahaan
– Perbandingan prosedur medis
• Menjelaskan media lain
– Label pada button, icon dan screen
– Captions dan callouts untuk graphics
Bina Nusantara
Keuntungan dan Kerugian Penggunaan Text
• Keuntungan
– Relative murah dalam produksi – Mempresentasikan ide secara efektif – Menjelaskan media lain
– Menjaga kerahasiaan / privacy – Mudah dirubah dan diperbaharui
• Kerugian
– Mudah dilupakan daripada media visual yang lain – Membutuhkan perhatian lebih dari user daripada media lain – Tidak teratur
Bina Nusantara
Hypertext dan Hypermedia
• Hypertext
– Dokumen berbasis text dengan tambah data statis, misal : gambar dan tabel
– Referensi Silang (cross referencing) antar bagian melalui kata kunci (keyword) yang berfungsi sebagai penghubung ke bagian lain
– Terdiri dari jaringan node yang terhubung melalui link yang dapat dikunjungi oleh user
• Hypermedia
– Data Multimedia yang tersimpan dalam struktur hypertext terhubung
– Setiap node adalah presentasi. User dapat melompat dari satu presentasi ke presentasi lain
Bina Nusantara A F E D C B
A Small Hypertext Structure
(having six nodes and nine links)
Bina Nusantara
Definisi Hypertext
• Sebuah link menghubungkan dua node dan biasanya terarah
– Source node – Destination node
– Biasanya terhubung dengan bagian tertentu dari source node
• Anchor
– Kadang destination adalah bagian dari sebuah node
• Source anchor • Destination anchor
• Kebanyakan fasilitas hypertext memiliki fasilitas backtrack • Memungkinkan terjadinya lingkaran pengulangan (loop) • Beberapa sistem hypertext memberikan indikasi jika sebuah link
Bina Nusantara
Definisi
• Nodes + Links = Hyperdocument
– Konten Informasi
• Hypertext system
– Piranti Lunak (Software) yang digunakan untuk
membaca dan menulis hyperdocument
• Hypertext
– Sistem hypertext yang berisi sebuah hyperdocument
Bina Nusantara
Navigasi Hypertext
• User harus bisa mengikuti link dan bisa mengetahui
mana informasi yang sudah dibaca dan mana yang
belum
• Users dari hypertext bisa menjadi bingung
– Mudah tersesat
– Walaupun dalam dokumen kecil, user mengalami fenomena ‘lost in hyperspace’
• Navigasi user dalam hyperdocument dipengaruhi oleh
– Struktur Hyperdocument
– Bantuan navigasi yang disediakan oleh sistem hypertext – Strategi browsing yang diterapkan oleh user
Bina Nusantara
Navigasi Hypertext
• Lost in hyperspace
– Sebuah node yang menarik mungkin susah untuk
ditemukan lagi di masa datang
• Bookmarks
– Ketika browsing, user dapat menjadi bingung tentang
posisi
• Tidak ada petunjuk arah dalam hyperspace • Tampilan Fish-eye
– Menampilkan hanya bagian tertentu dari sebuah hyperdocument secara detil
• Tampilan Birds-eye
– Peta yang detil
– Mungkin terlalu besar untuk ditampilkan secara keseluruhan sekaligus
Bina Nusantara