02.teks gambar & grafik
TRANSCRIPT
![Page 1: 02.Teks Gambar & Grafik](https://reader033.vdocuments.site/reader033/viewer/2022061609/55cf96af550346d0338d1b82/html5/thumbnails/1.jpg)
TEKS GAMBAR DAN GRAFIK
Oleh :Nugroho Agung P, ST, M.Kom
![Page 2: 02.Teks Gambar & Grafik](https://reader033.vdocuments.site/reader033/viewer/2022061609/55cf96af550346d0338d1b82/html5/thumbnails/2.jpg)
Agenda
• 1. Jenis Teks: Unformatted, Formatted dan Hypertext
• 2. Gambar: definisi, format
• 3. Grafik: definisi, hardware (input dan output)
• 4. Transmisi gambar
• 5. Contoh Software
![Page 3: 02.Teks Gambar & Grafik](https://reader033.vdocuments.site/reader033/viewer/2022061609/55cf96af550346d0338d1b82/html5/thumbnails/3.jpg)
TEKS (TEXT)
• Teks adalah data dalam bentuk karakter.
• Merupakan bentuk kode ASCII.
• Tiap-tiap karakter direpresentasikan oleh 7 bit “binary digit” (desimal = 0-127).
• Terdapat beberapa jenis teks :
– Plain Text (Unformatted Text)
– Formatted Text (Rich Text Format)
– Hypertext
![Page 4: 02.Teks Gambar & Grafik](https://reader033.vdocuments.site/reader033/viewer/2022061609/55cf96af550346d0338d1b82/html5/thumbnails/4.jpg)
Plain Text (Unformatted Text) (1)
• Contoh plain text adalah pada saat kita mengetik dengan menggunakan notepad (.txt).
• Plain Text berjenis MIME text/plain.
• Teks file tidak terenkripsi, tidak mengandung embedded information, seperti 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.
![Page 5: 02.Teks Gambar & Grafik](https://reader033.vdocuments.site/reader033/viewer/2022061609/55cf96af550346d0338d1b82/html5/thumbnails/5.jpg)
Plain Text (Unformatted Text) (2)
Contoh :- Huruf A : 100 0001- Huruf a : 110 0001
![Page 6: 02.Teks Gambar & Grafik](https://reader033.vdocuments.site/reader033/viewer/2022061609/55cf96af550346d0338d1b82/html5/thumbnails/6.jpg)
ASCII (1)
• ASCII, (American Standard Code for Information Interchange), merupakan karakter yang di encoding berdasarkan pada English alphabet.
• Kode ASCII direpresentasikan dalam bentuk text pada komputer dan perangkat komunikasi dan perangkat lain yang bekerja menggunakan teks.
• Sebagian besar karakter enkoding modern, yang mendukung banyak karakter lain memiliki basis sejarah ASCII
• ASCII diciptakan pada tahun 1963, di publikasikan pada tahun 1967 dan diupdate tahun1986.
![Page 7: 02.Teks Gambar & Grafik](https://reader033.vdocuments.site/reader033/viewer/2022061609/55cf96af550346d0338d1b82/html5/thumbnails/7.jpg)
ASCII (2)
•Terdiri dari 95
(32-space, 33-
126) karakter
yang printable
dan 32 (0-31)
karakter non-
printable/control
character.
•Contoh :
![Page 8: 02.Teks Gambar & Grafik](https://reader033.vdocuments.site/reader033/viewer/2022061609/55cf96af550346d0338d1b82/html5/thumbnails/8.jpg)
ASCII (3)
• Contoh Karakter Kontrol
![Page 9: 02.Teks Gambar & Grafik](https://reader033.vdocuments.site/reader033/viewer/2022061609/55cf96af550346d0338d1b82/html5/thumbnails/9.jpg)
Formatted Text (Rich Text Format) (1)
• Serangkaian karakter format yang telah didefinisikan.
• Contoh rich text adalah pada saat kita mengetik dengan menggunakan Wordpad (.rtf).
• Pada Wordpad plain teks telah diformat aturan (tag/tanda) tertentu sehingga teks tersebut dapat dibold, italics, underline, diwarna, diganti font, dan lain-lain.
• Contoh :
![Page 10: 02.Teks Gambar & Grafik](https://reader033.vdocuments.site/reader033/viewer/2022061609/55cf96af550346d0338d1b82/html5/thumbnails/10.jpg)
Formatted Text (Rich Text Format) (2)
• Contoh Dokumen RTF :
{\rtf
Hello Informatica!\par
It’s the {\b bold} text.\par
}
• Yang diterjemahkan dalam bentuk tampilan layar sbb:
• Hello Informatica!
• It’s the bold text.
![Page 11: 02.Teks Gambar & Grafik](https://reader033.vdocuments.site/reader033/viewer/2022061609/55cf96af550346d0338d1b82/html5/thumbnails/11.jpg)
Formatted Text (Rich Text Format) (3)
Keterangan :
– Backslash “\” ->RTF start control code
– \par -> new line
– \b -> bold
– {} -> grouping
![Page 12: 02.Teks Gambar & Grafik](https://reader033.vdocuments.site/reader033/viewer/2022061609/55cf96af550346d0338d1b82/html5/thumbnails/12.jpg)
Formatted Text (Rich Text Format) (4)
• Terdapat 2 jenis formated text :
– bitmapped fonts
– Outline fonts.
![Page 13: 02.Teks Gambar & Grafik](https://reader033.vdocuments.site/reader033/viewer/2022061609/55cf96af550346d0338d1b82/html5/thumbnails/13.jpg)
Formatted Text (Rich Text Format) (5)
• Cara penulisan Bitmapped Font (Raster Font)
![Page 14: 02.Teks Gambar & Grafik](https://reader033.vdocuments.site/reader033/viewer/2022061609/55cf96af550346d0338d1b82/html5/thumbnails/14.jpg)
Formatted Text (Rich Text Format) (6)
![Page 15: 02.Teks Gambar & Grafik](https://reader033.vdocuments.site/reader033/viewer/2022061609/55cf96af550346d0338d1b82/html5/thumbnails/15.jpg)
Formatted Text (Rich Text Format) (7)
• Cara penulisan Outline Font, contoh: PostScript dan TrueType
![Page 16: 02.Teks Gambar & Grafik](https://reader033.vdocuments.site/reader033/viewer/2022061609/55cf96af550346d0338d1b82/html5/thumbnails/16.jpg)
Hypertext
• Hypertext adalah teks yang memiliki fasilitas linking (Kaitan dengan teks lain).
• Diperkenalkan oleh Ted Nelson (1965)
• Contoh hypertext :
– HTML : Hypertext Markup Language
– XML : eXtensible Markup Language
![Page 17: 02.Teks Gambar & Grafik](https://reader033.vdocuments.site/reader033/viewer/2022061609/55cf96af550346d0338d1b82/html5/thumbnails/17.jpg)
HTML
• HTML (Hypertext Mark Up Language), merupakan standard bahasa yang digunakan untuk menampilkan document web.
• Kemampuan HTML yaitu:
– Mengontrol tampilan dari web page dan contentnya.
– Mempublikasikan document secara online.
– Membuat online form -> pendaftaran transaksi secara online.
– Menambahkan object lain seperti image, audio, video dan juga java applet.
– Mendukung link.
![Page 18: 02.Teks Gambar & Grafik](https://reader033.vdocuments.site/reader033/viewer/2022061609/55cf96af550346d0338d1b82/html5/thumbnails/18.jpg)
XML (1)
• XML (Extention Mark Up Language).
• Merupakan satu bentuk format dokumen yang mempunyai Keunggulan dan keuntungan, yaitu :
– 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
![Page 19: 02.Teks Gambar & Grafik](https://reader033.vdocuments.site/reader033/viewer/2022061609/55cf96af550346d0338d1b82/html5/thumbnails/19.jpg)
XML (2)
– 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.
![Page 20: 02.Teks Gambar & Grafik](https://reader033.vdocuments.site/reader033/viewer/2022061609/55cf96af550346d0338d1b82/html5/thumbnails/20.jpg)
GAMBAR (IMAGE) (1)
• Gambar (image) merupakan suatu representasi spatial dari suatu obyek, dalam pandangan 2D atau 3D.
• Menurut wikipedia.org: image/picture is an artifact that reproduces the likeness of some subject—usually a physical object or a person.
• Gambar 2 dimensi bisa berasal dari: kamera, kaca, lensa, teleskop.
• 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).
![Page 21: 02.Teks Gambar & Grafik](https://reader033.vdocuments.site/reader033/viewer/2022061609/55cf96af550346d0338d1b82/html5/thumbnails/21.jpg)
GAMBAR (IMAGE) (2)
• Titik merupakan suatu gambar yang di-sampling -> picture element (pixel).
• Nilai intensitas warna pada suatu pixel disebut gray scale level.
– 1 bit → binary-valued image (0 - 1)
– 8 bits → gray level (0 - 255)
– 16 bits → high color (216)
– 24 bits → 224 true color
– 32 bits → true color (232)
![Page 22: 02.Teks Gambar & Grafik](https://reader033.vdocuments.site/reader033/viewer/2022061609/55cf96af550346d0338d1b82/html5/thumbnails/22.jpg)
GAMBAR (IMAGE) (4)
• Format gambar digital memiliki 2 parameter:
– spatial resolution pixels X pixels
– color encoding bits / pixel
• Misal: terdapat 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),
• Ruang disk yang dibutuhkan = 100 * 100 * 3 byte (karena RGB) = 30.000 bytes = 30KB atau 100 * 100 * 24bits = 240000 bits
![Page 23: 02.Teks Gambar & Grafik](https://reader033.vdocuments.site/reader033/viewer/2022061609/55cf96af550346d0338d1b82/html5/thumbnails/23.jpg)
GAMBAR (IMAGE) (5)
• Tabel resolusi display dan kebutuhan memory
![Page 24: 02.Teks Gambar & Grafik](https://reader033.vdocuments.site/reader033/viewer/2022061609/55cf96af550346d0338d1b82/html5/thumbnails/24.jpg)
GRAFIK (GRAPHICS) (1)
• Wikipedia.org: Graphics are visual presentations on some surface such as a wall, canvas, computer screen, paper or stone to inform, illustrate or entertain.
• Ada 2 jenis grafik:
1. Raster: dimana setiap pixel didefinisikan secara terpisah.
2. Vector: dimana formula matematika digunakan untuk menggambar graphics primitives (garis, kotak, lingkaran,elips, dll) dan menggunakan attributnya.
Gambar vektor berukuran lebih kecil, gambar tidak pecah, semua manipulasi dilakukan melalui rumus.
![Page 25: 02.Teks Gambar & Grafik](https://reader033.vdocuments.site/reader033/viewer/2022061609/55cf96af550346d0338d1b82/html5/thumbnails/25.jpg)
GRAFIK (GRAPHICS) (2)
• Grafik tidak hanya terdiri dari gambar-gambar statis. Grafik tersebut dapat dimanipulasi secara dinamis:
– motion dynamics obyek / background bergerak
– update dynamics obyek berubah bentuk, warna, dll.
![Page 26: 02.Teks Gambar & Grafik](https://reader033.vdocuments.site/reader033/viewer/2022061609/55cf96af550346d0338d1b82/html5/thumbnails/26.jpg)
GRAFIK (GRAPHICS) (3)
• Perbedaan Bitmap vs Vektor
![Page 27: 02.Teks Gambar & Grafik](https://reader033.vdocuments.site/reader033/viewer/2022061609/55cf96af550346d0338d1b82/html5/thumbnails/27.jpg)
FORMAT FILE GAMBAR (1)
• Bitmap (.BMP)
– 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) dimana masing-masing warna pixelnya terdiri dari 3 komponen, R, G, dan B yang dicampur menjadi satu.
![Page 28: 02.Teks Gambar & Grafik](https://reader033.vdocuments.site/reader033/viewer/2022061609/55cf96af550346d0338d1b82/html5/thumbnails/28.jpg)
FORMAT FILE GAMBAR (2)
– 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.
• Joint Photographic Expert Group (.JPEG/JPG)
– Format JPG merupakan format yang paling terkenal sekarang ini.
– Hal ini karena sifatnya yang berukuran kecil (hanya puluhan/ratusan KB saja), dan bersifat portable.
![Page 29: 02.Teks Gambar & Grafik](https://reader033.vdocuments.site/reader033/viewer/2022061609/55cf96af550346d0338d1b82/html5/thumbnails/29.jpg)
FORMAT FILE GAMBAR (3)
– File ini sering digunakan pada bidang fotografi untuk menyimpan file foto.
– File ini bisa digunakan di web (internet).
• Graphics Interchange Format (.GIF)
– 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.
![Page 30: 02.Teks Gambar & Grafik](https://reader033.vdocuments.site/reader033/viewer/2022061609/55cf96af550346d0338d1b82/html5/thumbnails/30.jpg)
FORMAT FILE GAMBAR (4)
• Portable Network Graphics (.PNG)
– Format yang standar dan sering digunakan di internet untuk menampilkan gambar atau pengiriman gambar.
– Ukuran file ini cukup kecil dan setara dengan ukuran gif dengan kualitas yang bagus.
– Tidak mendukung animasi (gambar bergerak).
![Page 31: 02.Teks Gambar & Grafik](https://reader033.vdocuments.site/reader033/viewer/2022061609/55cf96af550346d0338d1b82/html5/thumbnails/31.jpg)
FORMAT FILE GAMBAR (5)
• Format lain :
– TIFF (Tagged Image FileFormat),
– ICO (Icon),
– EMF (Enchanced Windows Metafile),
– PCX, ANI (Animation),
– CUR (Cursor),
– WBMP (WAP BMP),
– PSD (Adobe Photoshop Document), dan
– CDR (Corel Draw).
![Page 32: 02.Teks Gambar & Grafik](https://reader033.vdocuments.site/reader033/viewer/2022061609/55cf96af550346d0338d1b82/html5/thumbnails/32.jpg)
TRANSMISI GAMBAR (1)
• 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)
![Page 33: 02.Teks Gambar & Grafik](https://reader033.vdocuments.site/reader033/viewer/2022061609/55cf96af550346d0338d1b82/html5/thumbnails/33.jpg)
TRANSMISI GAMBAR (2)
• Transmisi berdasar format representasi gambar :
1. Raw image data transmission
– Gambar di-generate melalui video digitizer dan diitransmisikan 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.
![Page 34: 02.Teks Gambar & Grafik](https://reader033.vdocuments.site/reader033/viewer/2022061609/55cf96af550346d0338d1b82/html5/thumbnails/34.jpg)
TRANSMISI GAMBAR (3)
2. 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
![Page 35: 02.Teks Gambar & Grafik](https://reader033.vdocuments.site/reader033/viewer/2022061609/55cf96af550346d0338d1b82/html5/thumbnails/35.jpg)
TRANSMISI GAMBAR (4)
3. Symbolic image data transmission
– Gambar di presentasikan melalui symbolic data representation sebagai image primitive (bentuk dasar 2D atau 3D), atribut, dan informasi kontrol lain.
– Metode ini dipergunakan dalam computer graphics
![Page 36: 02.Teks Gambar & Grafik](https://reader033.vdocuments.site/reader033/viewer/2022061609/55cf96af550346d0338d1b82/html5/thumbnails/36.jpg)
SOFTWARE TEKS, GAMBAR & GRAFIK (1)
• Sasaran utama paket komputer berbasis multimedia, antara lain :
1. Pengolah /manipulasi tekstual (data dalam bentuk string disimpan dalam bentuk string juga)
• Pemilihan : font, ukuran, simbol dan karakter
• Perawarnaan, style huruf
• aligment, spasi, numbering
• Replace/find text.
![Page 37: 02.Teks Gambar & Grafik](https://reader033.vdocuments.site/reader033/viewer/2022061609/55cf96af550346d0338d1b82/html5/thumbnails/37.jpg)
SOFTWARE TEKS, GAMBAR & GRAFIK (2)
2. Paket pengilah grafis harus mampu:
• Menentukan koordinat x dan y, serta warna
• Penggantian warna, penghapusan pixel
• Membuat, menyimpan obyek
• Memindahkan obyek,mengkopi obyek
• Mewarnai isinya
• Dirotasi, flip
![Page 38: 02.Teks Gambar & Grafik](https://reader033.vdocuments.site/reader033/viewer/2022061609/55cf96af550346d0338d1b82/html5/thumbnails/38.jpg)
SOFTWARE TEKS, GAMBAR & GRAFIK (3)
• Contoh-contoh software :
![Page 39: 02.Teks Gambar & Grafik](https://reader033.vdocuments.site/reader033/viewer/2022061609/55cf96af550346d0338d1b82/html5/thumbnails/39.jpg)