Faizal Laporan

(1)

Laporan Praktikum

Komputer Grafik

(HTML, SVG, Google Sketchup, X3D)

Rd A Faizal P S (11/319127/TK/38258)

Jurusan Teknik Geodesi

Fakultas Teknik

Universitas Gadjah Mada

2011

(2)

KATA PENGANTAR

Puji dan syukur saya panjatkan kehadirat Tuhan Yang Maha Esa karena berkat karunia-Nya saya dapat menyelesaikan Laporan Akhir Praktikum Komputer Grafik ini.

Pada kesempatan ini saya mengucapkan terima kasih kepada :

Bapak Trias AKM, ST,M.Sc, Ph,D. selaku dosen mata kuliah komputer grafik. Bapak Istarno,Dipl.LIS,MT. selaku dosen mata kuliah komputer grafik,

Bapak Purnama Budi S., ST, M.App.Sc. selaku dosen pengajar mata kuliah komputer grafik, Mas Ivan, Mas Ajung, dan Mas Hanif selaku Asisten Dosen mata kuliah komputer grafik, orang tua saya yang selalu memberikan dukungan baik moral maupun materiil, dan teman-teman jurusan Teknik Geodesi angkatan 2011 Universitas Gadjah Mada Yogyakarta sehingga saya dapat menyusun dan menyelesaikan Laporan Akhir Praktikum komputer grafik ini dengan sebaik-baiknya.

Maaf apabila masih ada kekurangan pada penulisan laporan ini. Semoga laporan akhir praktikum komputer grafik ini bermanfaat bagi saya pada khususnya dan para pembaca pada umumnya.

Yogyakarta, 11 Desember 2012

Rd A Faizal P S 11/319127/TK/

(3)

BAB I

Landasan Teori

Dalam matakuliah komputer grafik di Jurusan Teknik Geodesi,disampaikan sejumlah materi yang dapat menunjang perkembangan di bidang Geodesi.Karena seiring perkembangan zaman,maka tuntutan dan permintaan penyajian peta dari 2D menjadi 3D semakin banyak, hal ini ditunjang adanya kecenderungan masyarakat yang lebih memilih data yang bersifat digital dan dapat diakses kapan saja secara online.Oleh karena itu,dalam mata kuliah komputer grafik,disampaikan sejumlah materi sebagai berikut yang membantu penyajian peta secara digital.

1. HTML

1.1 Memulai HTML

HTML adalah bahasa yang sangat tepat dipakai untuk menampilkan informasi pada halaman Web karena HTML menampilkan informasi dalam bentuk hypertext dan juga mendukung sekumpulan perintah yang dapat digunakan untuk mengatur tampilnya informasi tersebut. Sesuai dengan namanya, bahasa ini menggunakan tanda (markup) untuk menandai perintah-perintahnya. Saat ini banyak sekali aplikasi yang dapat digunakan untuk membuat Web Page secara mudah, seperti Microsoft FrontPage, Adobe Golive dan lainnya. Namun demikian untuk seorang Web Developer harus memiliki kemampuan dasar menguasai perintah HTML, untuk dapat menggunakan HTML, Anda membutuhkan beberapa hal, diantaranya adalah:

a. Anda memerlukan teks editor untuk mengetikkan HTML Anda. Klik Start | Program kemudian Accessories lalu pilih Notepad

b. Anda membutuhkan sebuah web browser untuk mempublikasikan HTML Anda. Anda dapat menggunakan Microsoft Internet Explorer.

c. Anda membutuhkan tempat penyimpanan. Gunakan hard disk, floppy disk, atau web server. Anda tidak harus bekerja online dengan internet, Anda

(4)

dapat menulis HTML kemudian menggunakan web browser secara offline di komputer.

1.2 Struktur Dokumen HTML

Di bawah ini adalah struktur dari dokumen HTML , buka Notepad kemudian ketikkan teks di bawah ini:

<TITLE>contoh1.htm</TITLE> </HEAD>

<BODY>

Kepala atau kop dokumen

Isi dokumen </BODY> </HTML>

Setelah selesai klik menu "File" menu dan pilih "Save As" . Akan muncul kotak Save yang akan menyimpan dokumen Anda. Lalu ketikkan contoh1.htm . Pada kotak yang paling bawah Anda dapat melihat "Save file as Type" or "Save as Type". Defaultnya adalah .txt, jadi Anda harus mengubahnya ke All Files(*.*). Lalu Anda dapat mengklik Save. Buka Microsoft Internet Explorer dengan mengklik Start, Program lalu pilih Internet Explorer. Internet Explorer akan terbuka lalu Anda dapat memilih menu File, Open lalu cari lokasi file di disket Anda. Struktur di atas diapit oleh tag <HTML> dan </HTML> yang menandai awal dan akhir dari sebuah dokumen yang digunakan untuk menyisipkan informasi mengenai dokumen, misalkan versi, revisi dan sebagainya. Sedangkan bagian yang diapit oleh tag <TITLE> dan </TITLE> menunjukkan judul dari halaman web Anda. Bagian kedua yang diapit <BODY> dan </BODY> berisi dokumen atau informasi yang hendak disajikan.

(5)

2. SVG (SCALABLE VECTOR GRAPHICS)

SVG merupakan bahasa yang digunakan untuk grafik 2 dimensi dan aplikasi grafis dalam format XML. Untuk mempelajari SVG perlu dasar tentang pemrograman web yaitu menggunakan HMTL dan dasar-dasar XML.

Apa itu SVG?

 SVG merupakan singkatan dari Scalable Vector Graphics

 SVG digunakan untuk membuat grafik dengan mendefinisikan vector,yang akan digunakan dalam halaman web.

 SVG mendefinisikan dalam format XML

 SVG menghasilkan grafik yang tidak akan berkurang kualitasnya sebagai akibat proses zoomming maupun resizing.

 Elemen dan attribut dalam SVG dapat dianimaai

 SVG direkomendasikan oleh World Wide Web Consortium (W3C)  SVG terintegrasi dengan standar W3C lainnya misalnya DOM dan XSL

Sejarah dan Keuntungan Penggunaan SVG

SVG 1.1 direkomendasikan oleh W3C pada Januari 2003. Sun Microsystems,Adobe,Apple,IBM,dan Kodak merupakan beberapa organisasi yang terlibat dalam pendefinisian SVG.Keuntungan penggunaan SVG dibanding format gambar yang lain (misalnya JPEG dan GIF) antara lain:

 File sumber SVG dapat dibaca dan modifikasi dengan menggunakan hampir semua tool/text (misalnya notepad)

 File sumber SVG berukuran lebih kecil dan dapat dikompresi dibanding dengan format gambar JPEG dan GIF

 Gambar dalam format SVG bersifat scalable/diresizing

 Gambar dalam format SVG dapat dicetak dengan kualitas yang tinggi dan sama baiknya pada berbagai resolusi

(6)

 Gambar dalam format SVG bersifat zoomable. Setiap bagian dari gambar dapat di zoom tanpa degradasi mutu

 Text dalam SVG “selectable” dan “searchable” (sangat berguna dalam peta)  SVG dapat bekerja dengan Teknologi Java

 SVG merupakan “open standard”  SVG merupakan murni XML

Pesaing utama dari SVG adalah Flash. Kelebihan utama dari SVG dibanding Flash adalah bahwa SVG “compliance” dengan standar yang lain (misalnya XSL dan DOM). Flash berlandasan pada teknologi yang tidak open source. Sampai saat ini SVG belum sepenuhnya disupport oleh semua browser. Mozilla,Firefox,dan Opera sudah mendukung SVG,Microsoft baru pada tahap rencana untuk mendukung SVG. Beberapa SVG editor tersedia,salah satu diantaranya adalah Adobe GoLive 5.

Menampilkan File SVG

Untuk menampilkan file dalam format SVG,kita perlu meng- install sebuah plug-in misalnya Adobe SVG Viewer. Jika browser yang kita gunakan tidak mendukung SVG,makan perlu men- download sebuah SVG viewer untuk menampilkan file SVG. Jika kita menggunakan browser Firefox 1.5 atau Opera 9 yang sudah mendukung SVG tidak diperlukan sebuah plug-in/ SVG viewer.

3. GOOGLE SKETCH UP

Google SketchUp adalah sebuah perangkat lunak desain grafis yang dikembangkan oleh Google. Pendesain grafis ini dapat digunakan untuk membuat berbagai jenis model, dan model yang dibuat dapat diletakkan di Google Earth atau dipamerkan di Google 3D Warehouse.

Google SketchUp yang simple dan mudah digunakan ini pasti dibaliknya mempunyai kelebihan dan kelemahan, antara lain:

(7)

KELEBIHAN

1. Interface yang menarik dan simpel

2. Mudah digunakan oleh golongan pemula sekalipun

3. Banyak open source plugin yang mendukung dan melengkapi kinerja google sketchup

4. Terdapat fitur import file ke ekstensi 3ds (untuk 3ds max), dwg (untuk autocad), kmz (untuk google earth), pdf, jpg, bmp, dxf, dan lain-lain.

KEKURANGAN

1. Karena kesederhanaan sketchup menjadikan susahnya pemodelan tingkat lanjut meski memakai plugin sekalipun

2. Terjadi crash apabila terdapat banyak permukaan patch dan vertex (kasus ini terjadi apabila mengimpor model tingkat lanjut misal model manusia dari 3ds max ke google sketchup )

3. Hasil gambar kurang memuaskan.

4. Tersedia dua versi SketchUp, yaitu : Google SketchUp (gratis) dan Google SketchUp Pro (harga sekitar USD 459.00).

4. X3D

X3D adalah ISO standar berbasis XML format file untuk mewakili komputer grafis 3D, penerus Modeling Language Virtual Reality (VRML) [1]. X3D fitur ekstensi untuk VRML (misalnya Humanoid animasi, NURBS, GeoVRML dll), kemampuan untuk mengkodekan adegan menggunakan sintaks XML serta sintaks Inventor seperti Open VRML97, atau format biner, dan antarmuka pemrograman ditingkatkan aplikasi (API).

(8)

Ekstensi X3D mendukung render multi-tahap dan multi-tekstur, ia juga mendukung shader dengan lightmap dan normalmap. Pada tahun 2010 X3D mendukung arsitektur render ditangguhkan. Sekarang X3D dapat mengimpor SSAO, CSM dan Lingkungan Realtime Refleksi / Lighting, tetapi tidak perlu perawatan banyak tentang jumlah poligon. Pengguna juga dapat menggunakan optimasi seperti BSP / quadtree / OctTree atau pemusnahan dalam adegan X3D. X3D juga manfaat dari standar open source lainnya seperti XML, DOM dan XPath. Pengguna dengan mudah dapat mengembangkan alat konten seperti eksportir dan editor yang membuat pembuatan konten dan tugas optimasi menjadi lebih mudah.

(9)

BAB II

LANGKAH KERJA

I. HTML

1. Tampilan dasar dari HTML yang berisi head, title, body, source codenya seperti dibawah ini :

(10)

2. Heading

Heading merupakan sekumpulan kata yang menjadi judul atau subjudul dalam suatu dokumen, besar heading tergantung dari level headingnya. Berikut contoh penulisan source code untuk melihat perbedaan heading:

(11)

3. Paragraf

Untuk membuat paragraf, dalam html diperlukan sebagai tanda akan memulai paragraph baru serta dengan sebagai penutup dari paragraph tersebut, berikut ialah source code contoh paragraf :

(12)

Dari source code diatas diperoleh hasil sebagai berikut :

4. Line Break

Line break mempunyai fungsi yaitu untuk membuat baris baru. Line break membuat baris baru tanpa memberi baris kosong. Berikut penggunaanya:

(13)

5. Font

Untuk mengganti ukuran huruf dalam format html bisa menggunakan , berikut ini merupakan source code untuk merubah font size.

(14)

6. Warna dan Jenis Huruf

Untuk mengganti warna huruf atau font color, dapat menggunakan , dan untuk jenis huruf, dapat menggunakan ,berikut merupakan source code untuk mengganti font color dan face:

(15)

7. Link

Tag <a> HTML mendefinisikan hyperlink. Sebuah hyperlink (atau link) adalah kata, kelompok kata, atau gambar yang dapat Anda klik untuk melompat ke dokumen lain.

Source codenya seperti dibawah ini :

Dari source code diatas didapat hasil sebagai berikut :

(16)

8. Gambar

DalamHTML, gambar didefinisikan dengan tag<img>. Tag<img>kosong, yang berarti bahwa mengandung atribut saja,dan tidak memilikitag penutup. Atribut tinggi dan lebar yang digunakan untuk menentukan tinggi dan lebar dari suatu gambar. Nilai-nilai atribut yang ditetapkan dalam piksel secara default. Source codenya seperti dibawah ini :

(17)

II. SVG (SCALABLE VECTOR GRAPHICS)

1. Objek Dasar

a) Lingkaran, segi empat, dan ellips

Source codenya ialah sebagai berikut :

(18)

b) Line (garis)

Source codenya sebagai berikut :

(19)

c) Polyline

d) Polygon

(20)

2. Style : Stroke dan Fill

(21)

3. Text : Text Alignment

Source Codenya sebagai berikut :

(22)

4. Color gradient (linear dan radial)

(23)

5. Transform : a. Rotate

b. Scale

(24)

c. Tranlate

(25)

(26)

III. GOOGLE SKETCHUP

1.Basic Object

(27)

3. Move and copy

Move

(28)

4. Component and material

Material

(29)

Contoh aplikasi Google SketchUp

Modelling Gedung (KPFT)

(30)

(31)

IV. X3D

(32)

(33)

(34)

(35)

e. Extrusion

(36)

f. IndexedFace Set

(37)

g. Elevation Grid

Source Codenya sebagai berikut (OCTAGA) :

(38)