INKSCAPE

 Salam sukses sahabat, saya Agus Setiawan pada pembahasan ini akan coba menjelaskan tentang satu aplikasi istimewa yaitu INKSCAPE, kira-kira apa ya inkscape itu ? ^_^

Inkscape adalah sebuah perangkat lunak editor gambar vektor yang bersifat perangkat lunak bebas dibawah lisensi GNU GPL. Tujuan utama dari Inkscape adalah menjadi perangkat grafik mutakhir yang memenuhi standar XML, SVG, dan CSS.

Inkscape bersifat cross-platform dan dapat dijalankan pada Mac OS X, sistem operasi berbasis Unix, dan Microsoft Windows. Implementasi SVG dan CSS di Inkscape belum sempurna, misalnya Inkscape tidak mendukung animasi SVG, dan font SVG, walaupun dukungan dasar untuk pembuatan font SVG telah diimplementasikan pada versi 0.47. Inkscape bersifat multibahasa, terutama untuk antarmuka dan script rumit, sesuatu yang sering terlewatkan pada sebagian besar editor grafik vektor komersil.

Bagian - Bagian Inkscape.

Setelah kita membuka aplikasi Inkscape, Kita akan melihat tampilan jendela inkscape seperti pada gambar berikut. Di tampilan inilah kita akan melakukan kegiatan gambar menggambar. Gambar di bawah memperlihatkan tampilan jendela baru Inskcape secara default.

- Menu Bar (Baris Menu).

Terletak paling atas. Sama seperti aplikasi lainnya yang semua memiliki baris menu perintah yang berfungsi untuk mengelola dokumen, objek yang di buat, efek, dan lain - lain. 

- Commands Bar (Baris Perintah)

Posisinya dibawah setelah baris menu. Terdapat banyak icon yang merupakan shortcut untuk perintah - perintah yang sering di gunakan misalnya : Print, Open, Save, etc.

- Tool Controls Bar.

Berada setelah baris perintah. Terdapat ikon - ikon untuk memodifikasi objek yang sedang dibuat pada lembar kerja Inkscape, Misalnya : memutar objek mengatur ukuran/tata letak objek. Ikon pada Tool Controls Bar akan berubah otomatis ketika kita memilih Tools yang sedang kita gunakan untuk membuat/mengedit objek. 

- Ruler (Penggaris)

Berada mengelilingi lembar kerja pada Inkscape. Berfungsi sebagai alat bantu dalam melihat ukuran panjang dan lebar suatu objek yang berada di lembar kerja.

- Lembar Kerja.

Merupakan tempat area kerja untuk membuat/menata objek yang kita buat.

- Tool box.

Berada di sebelah kanan. Dan berisi berbagai ikon tool yang berfungsi membuat dan memanipulasi objek di lembar kerja Inkscape.

- Palette.

Berada di bagian bawah. Berisi pilihan warna yang bisa di gunakan untuk memberikan warna objek. Baik warna atau warna garis pinggir objek.

- Status Bar.

Berada setelah Palette Berfungsi untuk menampilkan informasi dan status dari Lembar kerja serta objek yang ada maupun yang sedang di buat. Seperti informasi warna objek, posisi, dan lainnya.

FUNGSI TOOL PADA INKSCAPE

· Select and transform

Memilih, mengubah ukuran, memutar, menggeser dan me-refleksi objek.

· Edit paths

Mengubah posisi titik node suatu objek hingga objek berubah bentuk.

· Tweak object

Mengubah bentuk objek dengan menarik bagian isi (fill) objek.

· Zoom

Memperbesar atau memperkecil ukuran tampilan dokumen.

· Rectangle and Square

Menggambar bentuk objek kotak.

· 3D Boxes

Menggambar bentuk objek kotak 3 dimensi.

· Circle, ellipses, and arcs

Menggambar bentuk objek lingkaran, setengah lingkaran.

· Stars and polygons

Menggambar bentuk objek bintang dan persegi banyak.

· Spirals

Menggambar bentuk objek spiral.

· Freehand lines

Menggambar bentuk objek bebas seperti menggambar dengan pensil.

· Bezier curves and straight lines

Menggambar bentuk objek dengan garis-garis yang saling terhubung.

· Calligraphic or brush strokes

Menggambar bentuk objek dengan efek highlight.

· Fill bounded areas

Memberikan warna ke isi objek.

· Text

Membuat tulisan.

· Diagram connectors

Membuat garis penghubung dari satu objek ke objek lain.

· Gradients

Memberikan efek warna gradasi (perpaduan warna) ke isi objek.

· Pick colors from image

Mengambil warna-warna tertentu dari suatu gambar yang nantinya digunakan

untuk memberi warna ke isi objek.

Bagian-bagian dari Inkscape dapat Anda tampilkan maupun Anda sembunyikan melalui

menu View → Show/Hide.

MENYIMPAN DOKUMEN INKSCAPE

Dokumen yang Anda buat dengan Inkscape akan disimpan dalam bentuk file yang

berekstensi svg (nama file.svg). Untuk menyimpan dokumen, Anda dapat menggunakan

menu File → Save As atau ikon Save pada Commands bar. Program Inkscape dapat

Anda tutup dengan klik menu File→ Quit atau menekan Ctrl + Q pada keyboard.

Read More

Peringatan Hari Sumpah Pemuda SMK Daarut Tauhiid Bandung

28 oktober 2014 SMK Daarut Tauhiid boarding School Memperingati Hari Sumpah Pemuda,,,

Read More

Penjelasan menggunakan Styling CSS untuk Model Persegi Kolom - Box Model : Border, Padding, Margin, Outline

Penjelasan menggunakan Styling CSS untuk Model Persegi Kolom - Box Model : Border, Padding, Margin, Outline

      Semua bentuk elemen di HTML seperti div, p, h, ul, li dan lain sebagainya pada dasarnya adalah sebuah kolom kotak yang membungkus isi (content) HTML. Ada beberapa property dalam box model CSS diantaranya Border, Padding, Margin dan content HTML itu sendiri. Setiap box model ini memungkinkan kita untuk membuat jarak antara yang satu dengan yang lainya, jadi dengan box model ini setiap kolom bisa di beri ukuran jarak antara satu dengan yang lainya sehingga kotak-kotak kolom tidak tampil menyatu dan tampak lebih bagus untuk di lihat.

Apabila box model kita gambarkan mungkin anda bisa lebih paham, berikut ini saya tampilkan sebuah illustrasi box model

penjelasan:

·         Margin - memungkinkan kita untuk memberi jarak batas antara kolom kotak satu dengan yang lainya. margin tidak memiliki background warna (transparan)

·         Border - sama halnya dengan border memungkinkan kita memberi jarak bedanya border kita bisa mendefinisikan warna background

·         Padding - memungkinkan kita untuk membuat lapisan pada contet HTML, memiliki background tapi tergantung dari warna background content

·         Content - adalah isi seperti text dan gambar yang ada di kolom elemen HTML seperti div, p, h, dan lainnya

Bila anda menggunakan CSS box model untuk suatu elemen HTML maka aturan lebar dan tinggi dari content bisa berubah, misalnya anda menuliskan Kode CSS berikut pada sebuah div yang berukuran lebar 300px dan tinggi 200px

1 2 3 4 5 6 7

div.column {     width:300px;     height:200px;     margin:10px;     border:5px solid #000;     padding:10px;          }

berdasarkan kode diatas maka lebar dan tinggi kotak div bukanlah 300 pixel x 200 pixel, melainkan 350 pixel x 250 pixel

·         Lebar : 300 px + batas kiri (margin:10px + border:5px + padding:10px) + batas kanan (margin:10px + border:5px + padding:10px)

·         Tinggi : 200 px + batas atas (margin:10px + border:5px + padding:10px) + batas bawah (margin:10px + border:5px + padding:10px)

·         Total lebar 350px dan tinggi 250px

Maaf hanya untuk pecinta i.e ukurannya tidak akan 250 pixel, box model adalah apa yang menjadi sebuah dilema untuk banyak pengembang web mengenai kompatibiltas browser. Design CSS yang sudah mulus di browser lain banyak sekali berantakan di i.e dan sedikit yang tau untuk menyelesaikan masalah ini

i.e secara otomatis menyertakan lebar dan tinggi pada setiap elemen yang kita buat, supaya i.e tidak seenaknya menambah atau mengurangi komposisi lebar dan tinggi komposisi elemen maka tambahkan tag berikut di awal pembuatan HTML

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML <html> <head> <title></title> <style type="text/css"> div.column {     width:300px;     height:200px;     margin:10px;     border:5px solid #000;     padding:10px; } </style> </head> <body> <div class="column"> Test </div> </body> </html>

Penggunaan Border

Pada border terdapat property Border Width, Border Color, dan Border Style. Proprty border-width digunakan untuk menentukan lebar dari border, border-color untuk warna dan border-style digunakan untuk gaya borrder itu sendiri misalnya membentuk garis lurus, putus-putus, atau garis titik-titik.

Cara menuliskan border adalah sebagai berikut:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

div.column {     width:200px;     height:20px;     border-width:5px;     border-color:#39F;     border-style:solid; } /* CSS border diatas bisa juga dituliskan seperti ini*/ div.column {     width:200px;     height:20px;     border:5px #39F solid; }

Hasilnya dari penerapan border diatas :

Sample

Property dari border dan masing-masing nilainya dapat dilihat pada tabel di bawah

Property	Keterangan	Nilai
border	Menentukan semua gaya border dalam satu deklarasi	border-width border-style border-color
border-bottom	menentukan semua gaya border bawah dalam satu deklarasi	border-bottom-width border-bottom-style border-bottom-color
border-bottom-color	menentukan warna border bawah	border-color
border-bottom-style	menentukan gaya border bawah	border-style
border-bottom-width	menentukan lebar border bawah	border-width
border-color	menentukan warna kolom border	color_name hex_number rgb_number transparent inherit
border-left	menentukan semua gaya border kiri dalam satu deklarasi	border-left-width border-left-style border-left-color
border-left-color	menentukan warna border kiri	border-color
border-left-style	menentukan gaya border kiri	border-style
border-left-width	menentukan lebar border kiri	border-width
border-right	menentukan semua gaya border kanan dalam satu deklarasi	border-right-width border-right-style border-right-color
border-right-color	menentukan warna border kanan	border-color
border-right-style	menentukan gaya border kanan	border-style
border-right-width	menentukan lebar border kanan	border-width
border-style	menentukan gaya dari keseluruhan kolom border	none hidden dotted dashed solid double groove ridge inset outset inherit
border-top	menentukan semua gaya border atas dalam satu deklarasi	border-top-width border-top-style border-top-color
border-top-color	menentukan warna border kanan	border-color
border-top-style	menentukan gaya border kanan	border-style
border-top-width	menentukan lebar border kanan	border-width
border-width	menentukan lebar dari keseluruhan kolom border	thin medium thick length inherit

Penggunaan Outline

Outline jarang di gunakan tapi fungsinya untuk membuat elemen terlihat dan berada di luar garis border sangat tipis. Penulisan Outline tidak jauh berbeda dengan penulisan border, sedangkan property dari outline dapat dilihat pada tabel dibawah

	Keterangan	Nilai
outline	Menentukan semua opsi outline dalam satu deklarasi	outline-color outline-style outline-width inherit
outline-color	menentukan warna outline	color_name hex_number rgb_number invert inherit
outline-style	menentukan gaya outline	none dotted dashed solid double groove ridge inset outset inherit
outline-width	menentukan lebar outline	thin medium thick length inherit

Penggunaan Margin

Margin memberikan ruang atau jarak di sekitar elemen HTML, apabila anda menguasai microsoft office atau open office pasti lah tau apa itu margin, prinsipnya sama saja. Penulisan margin sama saja seperti penulisan HTML lainnya sedangkan property margin pada CSS dapat di lihat pada tabel di bawah.

	Keterangan	Nilai
margin	digunakan untuk memnentukan jarak margin pada satu deklarasi	margin-top margin-right margin-bottom margin-left
margin-bottom	menentukan jarak margin bawah	auto length %
margin-left	menentukan jarak margin kiri	auto length %
margin-right	menentukan jarak margin kanan	auto length %
margin-top	menentukan jarak margin atas	auto length %

Penggunaan Padding

memungkinkan kita untuk membuat lapisan pada contet HTML, memiliki background tapi tergantung dari warna background content berikut saya berikan sampel penggunaan padding dan border bersamaan:

?

1 2 3 4 5 6

div.column {     width:200px;     height:20px;     padding 20px;     border:5px #39F solid; }

Hasilnya akan seperti kolom berikut, kalau anda bandingkan dengan contoh pada border diatas akan terlihat perbedaanya:

Sample

Property dari padding dan masing-masing nilainya dapat dilihat pada tabel di bawah

Property	Description	Values
padding	Menentukan keseluruhan opsi padding dalam satu deklarasi	padding-top padding-right padding-bottom padding-left
padding-bottom	menentukan lapisan padding bawah	length %
padding-left	menentukan lapisan padding kiri	length %
padding-right	menentukan lapisan padding kanan	length %
padding-top	menentukan lapisan padding atas	length %

Baca-baca saja gak ada gunanya kalo gak di coba :)

Read More