faizal laporan

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

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/

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

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:

<HTML>

<HEAD>

<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.

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

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:

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).

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.

BAB II

LANGKAH KERJA

I. HTML

1. Tampilan dasar dari HTML yang berisi head, title, body, source codenya

seperti dibawah ini :

Dari source code diatas didapat hasil seperti berikut :

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:

Dari source code diatas diperoleh hasil sebagai berikut :

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 :


4. Line Break

Line break mempunyai fungsi yaitu untuk membuat baris baru.

Line break membuat baris baru tanpa memberi baris kosong. Berikut

penggunaanya:

Dari source code diatas didapat hasil sebagai berikut :

5. Font

Untuk mengganti ukuran huruf dalam format html bisa menggunakan

, berikut ini merupakan source code untuk merubah font

size.

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:

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 :

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 :


II. SVG (SCALABLE VECTOR GRAPHICS)

1. Objek Dasar

a) Lingkaran, segi empat, dan ellips

Source codenya ialah sebagai berikut :

b) Line (garis)

Source codenya sebagai berikut :


c) Polyline



d) Polygon


Dari source code diatas diperoleh hasil sebgai berikut :

2. Style : Stroke dan Fill


3. Text : Text Alignment

Source Codenya sebagai berikut :


4. Color gradient (linear dan radial)



5. Transform :

a. Rotate



b. Scale



c. Tranlate



6. Pembuatan Peta Fakultas Teknik

III. GOOGLE SKETCHUP

1.Basic Object

2. pull and push

3. Move and copy

Move

Copy

4. Component and material

Material

Component

Contoh aplikasi Google SketchUp

Modelling Gedung (KPFT)

KPFT Pada Google Earth

IV. X3D

a. Box

b. Sphere

c. Cylinder

d. Cone

e. Extrusion


Dari source code diatas diperoleh hasil sebagai berikut (OCTAGA) :

f. IndexedFace Set


Dari source code diatas diperoleh hasil sebagai berikut (OCTAGA) :

g. Elevation Grid

Source Codenya sebagai berikut (OCTAGA) :

Dari hasil source code diatas didapatkan tampilan sebagai berikut ;

faizal laporan

Documents