Elemen-elemen Grafis

Elemen grafis erat kaitannya dengan pembuatan layout. Dalam menghasilkan

karya visual desain grafis yang menarik dan bernilai seni, pemahaman terhadap

elemen – elemen grafis sangat diperlukan. Elemen-elemen tersebut adalah :

-GARIS

Garis adalah sekumpulan titik yang berdampingan secara memanjang dan

memiliki dua buah ujung.. Garis memiliki dimensi panjang, pendek, tipis, tebal.

Garis dapat saling berhubungan satu sama lain membentuk apa yang dinamakan

garis sejajar/paralel, garis memancar atau garis berlawanan. Dalam media

komunikasi visual, garis dapat menjadi pembatas kolom, member kesan tertentu,

menjadi pembatas antara unsur grafis satu dengan lainnya, dan digunakan

sebagai penunjuk bagian-bagian tertentu dengan tujuan sebagai penjelas kepada

pembaca.

Garis dalam desain grafis dibagi menjadi 4, yaitu :

1. Vertikal (garis tegak lurus)
memberi kesan stabilitas, kekuatan, dan kemegahan yang menggerakkan mata ke
atas, tinggi, gagah.

2. Horizontal (garis lurus)
memberi kesan sugesti kesenangan atau sesuatu yang bergerak.

3. Diagonal (garis miring)
memberi kesan sesuatu yang bergerak, dinamis, keadaan yang tidak stabil.

4. Kurva (garis melengkung)
memberi kesan kehalusan dan keanggunan.

-BENTUK

Bentuk atau shape adalah suatu bidang yang memiliki tinggi dan lebar, terjadi
karena dibatasi oleh sebuah kontur (garis) dan atau dibatasi oleh adanya warna
yang berbeda atau oleh gelap terang pada arsiran atau karena adanya tekstur.
Bentuk bisa berupa wujud alam (seperti binatang, tanaman dan manusia), dan
tidak berwujud alam/abstrak (seperti ikon, grafik, ilustrasi). Bentuk benda berisi
garis-garis di dalamnya. Sebuah benda terdiri dari fill dan stroke/garis tepi.Garis
lurus dan lengkung dapat menyusun suatu bentuk, misalnya menyusun tiga garis
miring yang bertemu pada setiap ujungnya akan membentuk sebuah bangun
segitiga. Bentuk lengkung yang disusun mengelilingi titik pusat 3600 akan
membentuk sebuah lingkaran. Bentuk-bentuk yang dihasilkan merupakan bentuk
dasar yang sering digunakan untuk desain, bisa dua dimensi maupun tiga
dimensi. Dua dimensi misalnya persegi panjang, jajaran genjang, segitiga,
polygon, dan sebagainya. Tiga dimensi seperti kerucut, kubus, silinder, prisma,
bola, piramid dan lainnya

-TEKSTUR

Tekstur adalah unsur rupa yang menunjukkan rasa permukaan bahan (material),
yang sengaja dibuat dan dihadirkan dalam susunan untuk mencapai bentuk rupa,
baik dalam bentuk nyata ataupun semu. Misalnya kesan tekstur kayu, bulu atau
gelas.

-RUANG atau SPACE

Ruang adalah jarak antara atau daerah atau sekitar sesuatu. Memisahkan ruang
atau unifies, highlight, dan memberikan mata visual istirahat.
Ruang dapat digunakan untuk:Memberikan mata visual istirahat

-WARNA

Warna bisa mewakili emosi dari karya tersebut sehingga pesan dari karya
tersebut bisa lebih mudah diterima oleh audience. Warna juga dapat digunakan
untuk menyorot elemen penting dan utama seperti subheads, member sinyal di
mana pembaca untuk melihat terlebih dahulu dan memprovokasi emosi

Unsur-unsur Estetika

Unsur-unsur Estetika

Tidak semua karya grafis mampu memenuhi unsur-unsur estetika secara penuh.

Namun demikian desainer pasti selalu ingin tampil khas didalam merancang,

termasuk dalam menggunakan pendekatan-pendekatan estetis. Unsur fungsi

semata kurang berarti tanpa unsur keindahan. Desainer harus memperhatikan

elemen-elemen grafis dan prinsip-prinsip desain. Seperti telah disebutkan bahwa

estetika juga menyangkut komposisi sebagai satu kesatuan yang menarik,

nikmat untuk dipandang, tidak berlebihan, dan memberikan kesan. Apa yang

dikomposisikan adalah elemen-elemen desain mengikuti prinsip-prinsip desain

tertentu secara terarah.

Menurut A.M. Djelantik, unsur-unsur dari estetika ada tiga yaitu :

1. Wujud/rupa (appereance)

Menyangkut bentuk (unsur yang mendasar) dan susunan atau struktur.

2. Bobot/isi (content/substance)

Menyangkut apa yang dilihat dan dirasakan sebagai makna dari wujud,

seperti suasana (mood), gagasan (idea) dan ibarat/pesan.

3. Penampilan/penyajian (presentation)

Menyangkut cara penyajian karya kepada pemerhati atau penikmat.

Penampilan sangat dipengaruhi oleh bakat (talent), keterampilan (skill),

dan sarana/media (medium).

FaiqHMarwan

Melakukan perawatan Pada PC

Melakukan perawatan PC

Ada dua tipe perawatan yang bisa kita lakukan, yaitu perawatan pasif dan paerawatan aktif. Kita namakan pasif, karena perawatan ini lebih mengarah kepada faktor lingkungan dan benda-benda non komputer yang membantu kinerja PC Anda. Sedangkan perawatan aktif adalah perawatan yang kita lakukan dalam tubuh PC itu sendiri meliputi software dan hardware.

Metode Perawatan Pasif

Perawatan ini meliputi langkah-langkah yang biasa kita gunakan untuk melakukan proteksi sistem terhadap lingkungan yang normal, baik secara fisik dan elektrikal. Hal fisik meliputi temperatur yang baik, thermal stress dari power, kontaminasi debu atau asap dan gangguan lain seperti getaran atau guncangan. Hal elektrikal meliputi ESD (electro-static discharge)/listrik statis, kebisingan power dan gangguan frekwensi radio.

Tahap-tahap melakukan perawatan pasif :

Ø  Memilih lokasi untuk komputer yang bebas dari polusi udara seperti asap, debu, kotoran dan polusi yang lain.

Ø  Memperkecil kemungkinan terjadinya variasi suhu di dalam ruangan. Misalnya, dengan memberi AC atau tidak menempatkan komputer dekat jendela agar komputer tidak terkena sinar matahari secara langsung ataupun percikan air hujan.

Ø  Menyediakan outlet ground dari power yang sudah stabil dan bebas dari gangguan elektris dan interferensi. Hal ini berfungsi menghindari listrik statis.dan resiko tersengat listrik dari casing computer.

Ø  Bila memungkinkan, jauhkan komputer Anda dari pemancar atau sumber-sumber frekwensi radio.

Ada baiknya juga, pada fase persiapan lokasi instalasi komputer, kita bisa memperhatikan beberapa faktor di bawah ini :

Ø  Sediakan sirkuit (MCB) tersendiri untuk aliran listrik komputer Anda

Ø  Sirkuit harus diperiksa dengan baik tentang low resistance ground, tegangan yang memadai, bebas dari interferensi dan bebas dari naik turunnya tegangan.

Ø  Sirkuit tiga kabel harus ada. Namun bila tidak, gunakan adapter tambahan ground untuk menyesuaikan penempatan ground pada soket dua kabel

Ø  Untuk mengurangi resistansi, hindari pemakaian panjang kabel yang tidak perlu. Permasalahan power low noise akan menambah resistansi sirkuit yang mengikuti ukuran kabel dan panjangnya.

Ø  Bila memungkinkan, sediakan power sirkuit terpisah untuk peralatan non komputer seperti: AC, coffee maker, mesin copy, laser printer, pemanas ruangan, vacum cleaner dan peralatan lain.

                                                        

Metode perawatan aktif

Intensitas melakukan perawatan aktif sangatlah tergantung dari lingkungan dan kwalitas komponen komputer. Bila lingkungan kita kotor dan berdebu, kita harus membersihkan komputer paling tidak tiga kali dalam sebulan. Namun untuk lingkungan kantor normal, pembersihan komputer dapat dilakukan beberapa bulan sekali dalam setahun. Namun jika kita membuka komputer setelah satu tahun ternyata di dalamnya telah penuh debu, ada baiknya kita memperpendek interval pembersihan.

Tahap-tahap melakukan perawatan aktif :

Untuk hardware ,non Operating System :

Ø  Membersihkan debu di luar dan dalam CPU serta monitor dengan vacuum cleaner/kuas

Ø  Membersihkan keyboard dan mouse

Ø  Membersihkan konektor dan kontak pada konektor slot, konektor power supply, konektor keyboard, konektor mouse dan konektor speaker.

Ø  Sebaiknya untuk perawatan hardware dilakukan di tempat terbuka/berfentilasi baik.

Peralatan Perawatan Komputer

Peralatan Perawatan Komputer

Untungnya, dengan sedikit upaya dan tool yang tepat, pemeliharaan dan perbaikan PC menjadi mudah untuk kebanyakan orang. Inilah tool/peralatan standar  yang biasa digunakan dalam perawatan komputer.

11)    Obeng: Kita membutuhkan dua obeng kecil: satu dengan kepala pipih standar, dan yang satu lagi dengan kepala kembang. Biasanya kurang dari enam inci panjangnya dan pastikan semuanya tidak bermagnet.

 

2)    Kuas

3)    Senter: Bahkan di ruangan yang terang-benderang, bisa saja sulit melihat kabel-kabel kecil dan konektor di bagian dalam casing komputer.

4)    Wadah komponen: Wadah kecil yang berpenutup penting untuk menyimpan sekrup dan jumper. Cangkir plastik atau botol obat lama juga bisa dipakai.

5)    Tang berujung runcing: Tang kecil berujung runcing berguna untuk menjangkau bagian-bagian dan menekuk kawat dan potongan logam.

6)    Vacum cleaner kecil/sedang bila ada untuk membersihkan bedu dalam casing computer.bila tidak ada cukup mengunakan kuas yang agak besar dan pembersihan dilakukan di luar ruangan yang berventilasi baik.

7)    Anti static trap/wistrap

8)    Thermal grease/pasta prosesor.

9)    Semprotan udara bila ada.

PENANGANAN EVENT

PENANGANAN EVENT

Pemberian event onclick pada obyek HTML

1.  <div>info 1</div>

2.  <div id="info2"><b>info 2</b></div>

3.  <script src="jquery-2.0.3.js"></script>

4.  <script>

5.  $(document).ready(function(){

6.    $('#info2').click(function(){

7.          alert($('#info2').html());

8.    });

9.  });

10.    </script>

Pada skrip ini penambahan event onclick dilakukan pada obyek dengan id info2, yakni tag div. Skripnya ditunjukkan pada baris 6-8. Apabila tag tersebut diklik maka akan ada alert yang ditampilkan. Hasilnya dapat dilihat pada gambar berikut.

Mengakses obyek HTML melalui atribut class

Mengakses obyek HTML melalui atribut class

1.  <div>info 1</div>

2.  <div class="info2">info 2</div>

3.  <script src="jquery-2.0.3.js"></script>

4.  <script>

5.  $(document).ready(function(){

6.    $('.info2').html('<u>info 2</u>');

7.  });

8.  </script>

Apabila program ini dijalankan akan memberikan tampilan yang sama pada contoh sebelumnya. Kalau pada contoh sebelumnya atribut id ditunjuk dengan menggunakan tanda #, disini penunjukkan kelas dilakukan dengan menggunakan tanda titik (.) diawal nama kelasnya.

MANIPULASI OBYEK HTML (DOM Traversal)

MANIPULASI OBYEK HTML (DOM Traversal)

Mengakses obyek HTML melalui tag

1.  <div>info 1</div>

2.  <div>info 2</div>

3.  <script src="jquery-2.0.3.js"></script>

4.  <script>

5.  $(document).ready(function(){

6.    $('div').html('<u>info 2</u>');

7.  });

8.  </script>

Perintah pada baris 5 dan 7 pada skrip diatas digunakan sebagai perintah jquery untuk menangani event ready dari dokumen HTML. Event ready adalah event yang dikirimkan pada saat dokumen selesai di tampilkan oleh browser. Sedangkan perintah pada baris 6 digunakan untuk mengakses obyek HTML dengan tag div, $(‘div’), dan mengisinya dengan HTML <ul>info 2</u>.

Mengakses obyek HTML melalui atribut id

1.  <div>info 1</div>

2.  <div id="info2">info 2</div>

3.  <script src="jquery-2.0.3.js"></script>

4.  <script>

5.  $(document).ready(function(){

6.    $('#info2').html('<u>info 2</u>');

7.  });

8.  </script>

Program Javascript pada contoh diatas ini mirip dengan contoh sebelumnya, bedanya pada baris 6, obyek HTML pada contoh ini diakses melalui atribud id yang ditambahkan pada tag div. Penunjukkan atribut id oleh jQuery dilakukan dengan menambahkan tanda pagar (#) diawal id dari tag yang akan diakses. Penerapan atribut id tidak hanya dapat diberikan pada tag div namun juga untuk tag lainnya.

Penerapan Pustaka Eksternal

Penerapan Pustaka Eksternal

Selain menyediakan pustaka bawaan, pada pemrograman Javascript juga dimungkinkan untuk menggunakan pustaka dari pengembang (programmer) Javascript lainnya. Pustaka eksternal sebenarnya adalah program Javascript seperti umumnya yang dikembangkan oleh perorangan atau instansi agar dapat digunakan oleh orang atau instansi lainnya. Ada banyak pustaka Javascript yang telah dikembangkan, seperti Dojo, Ext JS, YUI, dan jQuery. Bentuknya ada yang bersifat terbuka dan tertutup tergantung dari pengembangnya. Adanya penambahan pustaka eksternal ini akan dapat menambah fitur dari halaman web yang dihasilkan. Selain itu juga dapat memberikan kemudahan dalam pengembangan karena adanya penyederhanaan sejumlah operasi umum dalam Javascript, seperti fungsi-fungsi untuk mengakses obyek ataupun menjaga kompatibilitas antar browser.

Berikut ini format perintah yang dapat digunakan untuk menyertakan pustaka eksternal tersebut ke dalam halaman web.

<script src=”lokasi/file/pustaka.js”></script>

Sebagai contoh, apabila menggunakan jQuery dengan file pustakanya jquery/jquery.min.js dan berada pada lokasi yang sama dengan aplikasi webnya, maka penyertaannya dapat menggunakan perintah.

<script src=”jquery/jquery.min.js”></script>

Pada pembelajaran kali ini pembahasan pustaka eksternal akan difokuskan pada penerapan pustaka jQuery.

jQuery saat ini telah sampai pada rilis 1.11.0 untuk yang versi 1 dan 2.1.0 untuk versi 2. Pustaka ini dapat didownload pada alamat http://jquery.com. Ini merupakan salah satu pustaka yang banyak diterapkan saat ini dan memiliki sejumlah turunan, diantaranya adalah jQuery UI, jQuery Mobile dan Twitter Bootstrap. Perkembangan yang pesat dari jQuery ini dimungkinkan karena sifatnya yang terbuka. Keterbukaannya ini memungkinkan banyak programmer Javascript untuk berkontribusi mengembangkan fitur-fitur yang ada pada pustaka ini.

Melalui jQuery permasalahan kompatibilitas aplikasi antar web browser yang berbeda-beda dapat diatasi, seperti pada contoh kasus penerapan AJAX pada kegiatan belajar sebelumnya. Beberapa fitur yang dapat dimanfaatkan dari pustaka ini adalah manipulasi obyek HTML, penanganan event dan AJAX. Berikut ini merupakan beberapa contoh penerapan pustaka jQuery terkait fitur-fitur diatas.

Format Dinamis Dengan Javascript

Format Dinamis Dengan Javascript

Selain karena adanya interaksi aplikasi web juga dapat lebih menarik apabila dilengkap dengan kemampuan untuk visualisasi setiap interaksi yang terjadi. Penerapan visualisasi interaksi ini dapat dilakukan dengan menggunakan CSS. Selain dapat digunakan untuk memodifikasi elemen HTML, Javascript juga dapat digunakan untuk mengubah style dari suatu elemen HTML. Pengubahan style ini dilakukan dengan menerapkan metode :

obyectHTML.style.properti = “style baru”;

obyekHTML disini merupakan obyek yang dihasilkan dari pemanggilan fungsi getElementById(), getElementsByName() atau getElementsByTagName(). Sedangkan properti disini menunjukkan nama style CSS yang akan dimodifikasi dari obyek tersebut. Berikut ini beberapa daftar properti yang dapat digunakan.

Properti	Penjelasan
color	Menentukan warna dari elemen. Alternatif nilainya: a.    format hexa (#XXXXXX), contoh: “#121212” b.    nama warna, contoh: “blue” c.    format desimal (rgb(r, g, b)), contoh: “rgb(100, 20, 200)”
backgroundColor	Menentukan warna latar belakang dari elemen. Alternatif nilainya sama seperti color diatas.
visibility	Menentukan status visual dari suatu elemen. Nilainya: “visible” / “hidden”
width	Menentukan lebar dari suatu elemen. Alternatif nilainya: d.    auto e.    inherit f.     persentase, contoh: “56%” g.    pixel, contoh: “100px”
height	Menentukan tinggi dari suatu elemen. Pemberian nilainya sama seperti properti width.

Daftar yang lebih lengkap untuk properti style yang dapat dimodifikasi dapat mengunjungi link berikut http://www.w3schools.com/jsref/dom_obj_style.asp. Contoh programnya diberikan sebagai berikut :

Pengubahan warna

<p style="background-color: orange; color: white">contoh halaman web yang menampilkan perubahan warna</p>

<script>

var par = document.getElementsByTagName("p")[0];

par.style.backgroundColor = "red";

</script>

Pengubahan ukuran teks area

<textarea id="info" style="width: 100px; height: 100px;">contoh halaman web yang menampilkan perubahan ukuran</textarea>

<script>

var info = document.getElementById("info");

info.style.width = "200px";

</script>

Halaman web diatas ini apabila ditampilkan akan mengubah ukuran lebar dari obyek HTML dengan id info menjadi 200px. Perlu diketahui disini bahwa nilai 200px ditambahkan ke properti width dari style obyek info dengan menggunakan tanda kutip.

Pengubahan penampakan suatu komponen

<button onclick="tampilkanInfo()">Tampilkan Info</button>

<button onclick="sembunyikanInfo()">Sembunyikan Info</button>

<p id="info">contoh halaman web yang menampilkan perubahan penampakan</p>

<script>

function tampilkanInfo(){

    var info = document.getElementById("info");

    info.style.visibility = "visible";

}

function sembunyikanInfo(){

    var info = document.getElementById("info");

    info.style.visibility = "hidden";

}

</script>