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 perintahperintahnya. 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 Source codenya 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 :
3. Text : Text Alignment Source Codenya sebagai berikut :
4. Color gradient (linear dan radial) Source codenya sebagai berikut :
5. Transform : a. Rotate Source codenya sebagai berikut :
b. Scale Source codenya sebagai berikut :
c. Tranlate
Source codenya 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 ;

Faizal Laporan

Diunggah oleh

Informasi Dokumen

Hak Cipta

Format Tersedia

Bagikan dokumen Ini

Bagikan atau Tanam Dokumen

Opsi Berbagi

Apakah menurut Anda dokumen ini bermanfaat?

Apakah konten ini tidak pantas?

Hak Cipta:

Format Tersedia

Faizal Laporan

Diunggah oleh

Hak Cipta:

Format Tersedia

Laporan Praktikum Komputer Grafik (HTML, SVG, Google Sketchup, X3D)

Jurusan Teknik Geodesi Fakultas Teknik Universitas Gadjah Mada 2011

Yogyakarta, 11 Desember 2012

BAB I Landasan Teori

adalah bahasa yang sangat tepat dipakai untuk menampilkan

Struktur Dokumen HTML

2. SVG (SCALABLE VECTOR GRAPHICS)

Apa itu SVG?

BAB II LANGKAH KERJA

Dari source code diatas didapat hasil seperti berikut :

Dari source code diatas diperoleh hasil sebagai berikut :

Dari source code diatas diperoleh hasil sebagai berikut :

Dari source code diatas didapat hasil sebagai berikut :

Dari source code diatas didapat hasil sebagai berikut :

Dari source code diatas didapat hasil sebagai berikut :

Dari source code diatas didapat hasil sebagai berikut :

8. Gambar DalamHTML, gambar didefinisikan dengan tag<img>.

Dari source code diatas didapat hasil sebagai berikut :

SVG (SCALABLE VECTOR GRAPHICS)

a) Lingkaran, segi empat, dan ellips

Source codenya ialah sebagai berikut :

Dari source code diatas didapat hasil sebagai berikut :

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 :

Source codenya sebagai berikut :

Dari source code diatas diperoleh hasil sebagai berikut :

6. Pembuatan Peta Fakultas Teknik

2. pull and push

3. Move and copy Move

4. Component and material Material

Contoh aplikasi Google SketchUp Modelling Gedung (KPFT)

KPFT Pada Google Earth

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 ;

Anda mungkin juga menyukai