View
115
Download
20
Category
Preview:
DESCRIPTION
Laporan
Citation preview
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
<p>
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 <p> sebagai tanda
akan memulai paragraph baru serta dengan </p> sebagai penutup dari
paragraph tersebut, berikut ialah source code contoh paragraf :
Dari source code diatas diperoleh hasil sebagai berikut :
4. Line Break
Line break <br> 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
<font size = “”>, berikut ini merupakan source code untuk merubah font
size.
Dari source code diatas didapat hasil sebagai berikut :
6. Warna dan Jenis Huruf
Untuk mengganti warna huruf atau font color, dapat menggunakan
<font color = “”>, dan untuk jenis huruf, dapat menggunakan <font size
=””> ,berikut merupakan source code untuk mengganti font color dan
face:
Dari source code diatas didapat hasil sebagai berikut :
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 :
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 :
Dari source code diatas didapat hasil sebagai berikut :
II. SVG (SCALABLE VECTOR GRAPHICS)
1. Objek Dasar
a) Lingkaran, segi empat, dan ellips
Source codenya ialah sebagai berikut :
Dari source code diatas didapat hasil sebagai berikut :
b) Line (garis)
Source codenya sebagai berikut :
Dari source code diatas diperoleh hasil sebagai berikut :
c) Polyline
Source codenya sebagai berikut :
Dari source code diatas diperoleh hasil sebagai berikut :
d) Polygon
Source codenya sebagai berikut :
Dari source code diatas diperoleh hasil sebgai berikut :
2. Style : Stroke dan Fill
Source codenya sebagai berikut :
Dari source code diatas diperoleh hasil sebagai berikut :
3. Text : Text Alignment
Source Codenya sebagai berikut :
Dari source code diatas diperoleh hasil sebagai berikut :
4. Color gradient (linear dan radial)
Source codenya sebagai berikut :
Dari source code diatas diperoleh hasil sebagai berikut :
5. Transform :
a. Rotate
Source codenya sebagai berikut :
Dari source code diatas diperoleh hasil sebagai berikut :
b. Scale
Source codenya sebagai berikut :
Dari source code diatas diperoleh hasil sebagai berikut :
c. Tranlate
Source codenya sebagai berikut :
Dari source code diatas diperoleh hasil sebagai berikut :
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
Source codenya sebagai berikut :
Dari source code diatas diperoleh hasil sebagai berikut (OCTAGA) :
f. IndexedFace Set
Source codenya sebagai berikut :
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 ;
Recommended