materi 2 (Teks, Gambar, &, Grafik)

Teks, Gambar, & GrafikErick Kurniawan, S.Kom, M.Kom

Jenis-jenis Teks• Plain Text (Unformatted Text)• Teks adalah data dalam bentuk karakter• Teks dalam hal ini adalah kode ASCII (AmericanStandard Code for Information Interchange) danASCII extension seperti UNICODE murni• Tiap-tiap karakter direpresentasikan oleh 7 bit“binary digit” (desimal = 0-127)

Jenis-jenis Teks• Plain Text (Unformatted Text)• Teks adalah data dalam bentuk karakter• Teks dalam hal ini adalah kode ASCII (AmericanStandard Code for Information Interchange) danASCII extension seperti UNICODE murni• Tiap-tiap karakter direpresentasikan oleh 7 bit“binary digit” (desimal = 0-127)• Contoh plain text adalah pada saat kita mengetikdengan menggunakan notepad (.txt)

Jenis-jenis Teks• Plain Text berjenis MIME text/plain• Teks file tidak terenkrispsi, tidak mengandungembedded information, seperti informasi font,tidak mengandung link, dan inline-image• ASCII -> berdasarkan english alphabet

Jenis-jenis Teks• Formatted Text (Rich Text Format)• Serangkaian karakter format yang telahdidefinisikan• Contoh rich text adalah pada saat kita mengetikdengan menggunakan Wordpad (.rtf)• Pada Wordpad plain teks telah diformatsedemikian rupa dengan menggunakan aturan(tag/tanda) tertentu sehingga teks tersebutdapat dibold, italics, underline, diwarna, digantifont, dan lain-lain

Jenis-jenis TeksContoh dokumen RTF:{\rtfHello!\parThis is some {\b bold} text.\par}Yang akan diterjemahkan dan ditampikan sebagai berikut:Hello!This is some bold text.

Jenis-jenis Teks• Backslash merupakan “RTF start control code”.\par berarti newline, \b berarti bold, dan { }digunakan untuk grouping• Terdapat 2 jenis formated text, yaitu bitmappedfonts dan outline fonts

Bitmapped Font (Raster Font)

Outline Font(PostScript dan TrueType )

Jenis-jenis Teks• Hypertext• Diperkenalkan oleh Ted Nelson (1965)• Hypertext adalah teks yang memiliki fasilitaslinking• Contoh hypertext :• HTML : Hypertext Markup Language• XML : eXtensible Markup Language• Yang lain (MathML, SMIL, WML)

HTML• Merupakan standard bahasa yang digunakanuntuk menampilkan document web. Yang bisakita lakukan dengan HTML:• Mengontrol tampilan dari web page dancontentnya• Mempublikasikan document secara onlinesehingga bisa di akses dari seluruh dunia• Membuat online form yang bisa di gunakan untukmenangani pendaftaran, transaksi secara online

HTML• Menambahkan object-object seperti image,audio, video, flash dan juga java applet dalamdocument HTML.• Mendukung link (sebuah hubungan dari satudokumen ke dokumen lain) antar dokumen. Linkpada umunya berwarna biru

XML• HTML berkembang ke XHTML• Strukturnya lebih jelas dan punya arti• Intelligence, karena XML mampu menanganiberbagai komplesitas markup bertingkat-tingkat.• Portable, karena memisahkan data danpresentasi• Extensible, dapat ditukar/digabung dengandokumen XML lain• Maintenance, XML mudah untuk diatur dandipelihara

Gambar / Image• Gambar (image) merupakan suatu representasispatial dari suatu obyek, dalam pandangan 2Datau 3D• Gambar digital merupakan suatu fungsi dengannilai-nilai yang berupa intensitas cahaya padatiap-tiap titik pada bidang yang telahdiquantisasikan (diambil sampelnya pada intervaldiskrit)• Titik dimana suatu gambar di-samplingdisebut picture element (pixel)

Gambar / Image• Nilai intensitas warna pada suatu pixel disebutgray scale level• 1 bit → binary-valued image (0 - 1)• 8 bits → gray level (0 - 255)• 16 bits → high color (2^16)• 24 bits → 2^24 true color• 32 bits → true color (2^32)• 8 bits = 1 byte

Gambar / Image• Format gambar digital memiliki 2 parameter:• spatial resolution pixels X pixels• color encoding bits / pixel

Gambar / Image• Misal: terdapat gambar berukuran 100 pixels x100 pixels dengan color encoding 24 bits denganR=8bits, G=8bits, B=8bits per pixel• Maka color encoding akan mampu mewakili 0 ..16.777.215 (mewakili 16 juta warna)• Ruang disk yang dibutuhkan = 100 * 100 * 3byte (karena RGB) = 30.000 bytes = 30KB atau100 * 100 * 24bits = 240000bits• 1 KB = 1000 bytes

Tabel Resolusi Display &Kebutuhan MemoryStandardResolusiWarnaKebutuhan memory/ frame (bytes)VGA640 x 4808 bit307.2 KBXGA640 x 4801024 x 76816 bit8 bit614.4 KB786.432 KBSVGA800 x 6001024 x 7681024 x 76816 bit8 bit24 bit960 KB786.432 KB2359.296 KB

Gambar / Image• Jika suatu gambar disimpan maka yang disimpanadalah array 2D• Dimana masing-masing merepresentasikan datayang berhubungan dengan pixel tersebut.Array[x,y] = warna pixel• Setiap pixel dapat mempunyai informasitambahan yang berhubungan dengan pixeltersebut• Masing-masing gambar juga memiliki informasitambahan seperti lebar X panjang gambar,kedalaman gambar, pembuat, dll

GRAFIK (GRAPHICS)• Ada 2 jenis grafik:• Raster: dimana setiap pixel didefinisikan secaraterpisah (Bitmap Graphic)• Vector: dimana formula matematika digunakanuntuk menggambar graphics primitives (garis,kotak, lingkaran,elips, dll) dan menggunakanattributnya (Vector Graphic)• Gambar vektor biasanya berukuran lebih kecil,gambar tidak pecah, semua manipulasi dilakukanmelalui rumus

GRAFIK (GRAPHICS)• Grafik tidak hanya terdiri dari gambar-gambarstatis. Grafik tersebut dapat dimanipulasi secaradinamis:• motion dynamics : obyek / backgroundbergerak• update dynamics : obyek berubah bentuk,warna, dll

Bitmap vs VectorBitmapVektorDisplay speedImage QualityXXMemory UsageEase of EdittingDisplay IndependenceXXX

TRANSMISI GAMBAR• Gambar digital ditransmisikan kepada penerimamelalui jaringan komputer• Persyaratan jaringan untuk transmisi gambar :• Jaringan dapat mengakomodasi transportasi datadengan ukuran besar• Transmisi gambar memerlukan transportasi yangreliable• Tidak bersifat time dependent (berbeda dengantransmisi audio/video)

TRANSMISI GAMBAR• Transmisi berdasar format representasi gambar• Raw image data transmission• Gambar di-generate melalui video digitizer danditransmisikan dalam format digital dari videodigitizer• Kapasitas transmisi = spatial resolution * pixelquantization• Resolusi 640 x 480 pixel dgn pixel quantization 8bit per pixel, butuh 307200 bytes untuk transmisi

TRANSMISI GAMBAR• Compressed image data transmission• Gambar di-generate oleh video digitizer dandikompres terlebih dahulu sebelumditransmisikan• Penurunan ukuran gambar tergantung padametode kompresi dan compression rate yangdipergunakan• Contoh : JPEG, MPEG

TRANSMISI GAMBAR• Symbolic image data transmission• Gambar di presentasikan melalui symbolic datarepresentation sebagai image primitive (bentukdasar 2D atau 3D), atribut, dan informasi kontrollain• Metode ini dipergunakan dalam computergraphics

TRANSMISI GAMBAR• Contoh :• Waktu yang diperlukan untuk mengirimkangambar:• VGA – 8 bit compatible• SVGA - 24 bit compatible• Pada jaringan dengan kecepatan 64 Kbps dan1.5 Mbps?

TRANSMISI GAMBAR• Jawab:• Ukuran tiap-tiap gambar :• VGA 640 x 480 x 8 = 2457600 bits• SVGA 1024 x 768 x 24 = 18874368 bits• Waktu yang dibutuhkan ?

TRANSMISI GAMBAR• Pada kecepatan 64 Kbps2457600 bVGA = = 38, 4s64000 bSVGA =18874368 b64000 b=294,912 s

TRANSMISI GAMBAR• Pada kecepatan 1,5 Mbps2457600 bVGA ==16,348 s1500000SVGA =18874368 b1500000 b=12.5829 s

FORMAT FILE GAMBAR• Bitmap (.BMP)• Format gambar yang paling umum dan merupakanformat standar Windows• Ukuran filenya sangat besar karena bisa mencapaiukuran Megabytes• File ini merupakan format yang belum terkompresidan menggunakan sistem warna RGB (Red, Green,Blue) dimana masing-masing warna pixelnyaterdiri dari 3 komponen, R, G, dan B yangdicampur menjadi satu

FORMAT FILE GAMBAR• File BMP dapat dibuka dengan berbagai macamsoftware pembuka gambar seperti ACDSee, Paint,IrvanView dan lain-lain• File BMP tidak bisa (sangat jarang) digunakan diweb (internet) karena ukurannya yang besar

Bitmap (BMP)File HeaderImage HeaderColor TablePixel Data

FILE HEADERField NameSize in BytesDescriptionbfTypebfSizebfReserved1242Contains the character “BM”that identify the file typeFile sizeUnusedbfReserved22UnusedbfOffBits4Offset to start pixel data

FORMAT FILE GAMBAR• Joint Photographic Expert Group(.JPEG/JPG)• Format JPG merupakan format yang palingterkenal sekarang ini• Hal ini karena sifatnya yang berukuran kecil(hanya puluhan/ratusan KB saja), dan bersifatportable• File ini sering digunakan pada bidang fotografiuntuk menyimpan file foto• File ini bisa digunakan di web (internet)

FORMAT FILE GAMBAR• Graphics Interchange Format (.GIF)• Format GIF ini berukuran kecil dan mendukunggambar yang terdiri dari banyak frame sehinggabisa disebut sebagai gambar animasi (gambarbergerak)• Format ini sering sekali digunakan di internetuntuk menampilkan gambar-gambar di web

FORMAT FILE GAMBAR• Portable Network Graphics (.PNG)• Format yang standar dan sering digunakan diinternet untuk menampilkan gambar ataupengiriman gambar• Ukuran file ini cukup kecil dan setara denganukuran gif dengan kualitas yang bagus• Namun tidak mendukung animasi (gambarbergerak)

FORMAT FILE GAMBAR• Sebenarnya masih banyak format file gambar lainseperti TIFF (Tagged Image File Format), ICO(Icon), EMF (Enchanced Windows Metafile), PCX,ANI (Animation), CUR (Cursor), WBMP (WAPBMP), PSD (Adobe Photoshop Document), danCDR (Corel Draw)