Mencetak Lewat CSS dalam Web Design

Hal yang sering terlupakan oleh web developer atau web designer adalah bahwa cukup banyak pengunjung situs yang ingin mencetak atau mem-print halaman web yang mereka kunjungi. Halaman tertentu memang akan lebih sering dicetak daripada halaman yang lain. Web designer lebih sering mengandalkan default printer setting untuk hal ini atau membuat dokumen pdf untuk didownload dan kemudian dicetak.

Dokumen pdf ini memiliki keunggulan berupa format dan keindahan web design secara keseluruhan dapat terjaga dengan sempurna, namun kelemahan utama dari sistem ini adalah diperlukan energi dan sumber daya yang cukup besar untuk memutakhirkan atau mengupdate dokumen pdf tersebut terutama untuk halaman website yang sering sekali berubah. Bahkan untuk kasus-kasus tertentu sangatlah mustahil membuat dokumen pdf tersebut.

Permasalahan ini sebenarnya dapat disederhanakan dengan teknik cetak melalui CSS, hal yang harus dibahas dan direncanakan pada saat memulai pekerjaan web design.

Hal-hal yang perlu diperhatikan dalam mencetak lewat CSS
Dalam mendesign halaman web kita sangat bergantung pada monitor untuk menampilkan warna (meskipun akan ada variasi warna dari monitor ke monitor karena mungkin tidak melalukan color management).

Pelajari Lebih Jauh Cara Mencetak Web Design lewat CSS

Pentas Tari Kontemporer di Tembi Rumah Budaya

Sekitar lima menit telinga para penonton digempur oleh suara mirip pukulan palu di atas lembaran logam. Sebagian penonton mulai mengeluh sakit telinganya. Sementara seorang perempuan bule asyik meliuk-liuk, meloncat dan memutar tubuh diantara empat buah saka guru pendopo Tembi Rumah Budaya, Bantul, Yogyakarta, Sabtu (27/3) malam. Selain mengeluh sakit telinga, sebagian penonton mengaku tak mengerti arti gerakan-gerakan yang dibawakan perempuan itu. “Memang tidak ada artinya. dia hanya memperagakan gerakan-gerakan dasar tari kontemporer barat,” jelas Bambang Paningron, penyelenggara acara, kepada Tempo.

Perempuan bule itu adalah Katerina Valdivia Bruch, seorang penari kontemporer asal Jerman. Ia sedang membawakan tari hasil kreasinya sendiri berjudul Frame. Tarian ini merupakan sebuah eksplorasi bagaimana tubuh beradaptasi untuk bergerak di ruangan terbatas. Itu sebabnya, Bruch sering terlihat membuat gerakan-gerakan kecil dengan kedua tangannya dalam posisi tubuh berjongkok. Hanya sesekali ia melompat atau memutar tubuh.

Sebelumnya, tiga penari Tembi Dance Company yang beranggotakan Mila Rosinta, Sekar Kinanti Rahina dan Made Dyah Agustina tampil ke atas pentas membawakan tarian berjudul Nafas. Seluruh gerak dan komposisi tarian Nafas ditangani oleh Katerina Valdivia Bruch. Gerak pada tarian ini terinspirasi oleh nafas dan gerak tubuh alamiah.

Tarian Nafas diawali dengan tiga penari duduk bersimpuh dengan sebuah lampu senter dijepit diantara lututnya. Dalam kondisi panggung gelap, penari membuat gerakan-gerakan dengan kedua telapak tangan diatas sorot lampu senter. Saat lampu panggung menyala penuh, ketiga penari membuat kompisi gerak khas tarian balet : berguling di lantai, meloncat dan memutar tubuh dengan satu tumpuan kaki.

Ketiga penari Tembi Dance Company ini juga memperagakan gerakan-gerakan dasar tari kontemporer barat yang mereka peroleh dari Bruch. Slama tiga bulan Bruch tinggal di Bantul dan memberikan worskshop tentang dasar-dasar tari kontemporer barat kepada Tembi Dance Company. “Materi yang diberikan adalah dasar-dasar tari kontemporer barat ala Martha Graham,” jelas Bambang Paningron.

Menurut Paningron, kedatangan Bruch ke Bantul memang untuk memberi dasar-dasar tari kontemporer barat kepada Tembi Dance Company. Para anggota Tembi Dance Company yang juga mahasiswa jurusan senitari Institut Seni Indonesia (ISI) Yogyakarta ini pada dasarnya sudah menguasai tari-tarian tradisi.

“Workshop ini sebenarnya bagian dari persiapan Tembi Dance Company untuk menjadi penari profesional. Saat ini mereka sedang dalam taraf pengayaan gerak. Diharapkan nantinya akan lahir komposisi tari yang menggabungkan antara gerakan tari kontemporer barat dengan gerakan tari tradisi,” jelas Bambang Paningron.

CSS Sprite Dalam Web Design

CSS sprites bukanlah barang baru bahkan CSS sprites adalah cara lama yang ampuh dan sudah menjadi hal yang biasa dalam web development. Meskipun CSS sprites bukanlah hal yang penting tetapi dalam situasi tertentu CSS sprites ini dapat memberikan manfaat dan keuntungan yang nyata, terutama apabila beban server menjadi salah satu pertimbangan dalam mendesign sebuah website.

Kata sprite ini berasal dari kosa kata komputer graphic yang berarti sebuah obyek grafis yang digabungkan kedalam 2d atau 3d animasi melalui prosesor graphic. Sprite ini dikembangkan karena ranah video games yang makin kompleks dan memerlukan cara pengolahan gambar berkualitas tinggi yang cerdas tanpa mengganggu pola alur permainan itu sendiri.

Seiring dengan berjalannya waktu, pada era tahun 2000-an banyak web designer yang progresif dan futuristic mulai mencari cara alternatif untuk menampilkan design menu yang menarik tanpa memakai JavaScripts, ketika inilah sprites mulai memasuki ranah web design dan development. Dengan masuknya CSS dalam arus utama web design pemakaian sprites dalam web design dimungkinkan dan semakin mudah, handal, cepat serta sederhana daripada memakai tehnik JavaScripts yang mulai ketinggalan zaman.

Pemakaian sprites dalam pendekatan CSS pada web design juga memakai metoda yang telah melegenda dalam dunia video games, dimana banyak gambar dipakai disemua website yang dijadikan satu melalui dengan apa yang disebut “master image”. Pemakaian sprite dalam mendesing web berbasis CSS hanya tinggal mengatur posisi tampilan dengan properti yang terdapat dalam CSS, begitu juga dengan penampilan hover, active atau focus. Semuanya menjadi sangat mudah melalui sprites ini.

Ketika sebuah halaman web diload, gambar tidak ditampilkan satu persatu akan tetapi seluruh master image. Sekilas hal ini tidak terlihat perbaikan apapun yang nyata, akan tetapi apabila dilihat lebih mendalam efek JavaScripts mouse rollover memerlukan dua kali HTTP request dimana akan menyebabkan terjadi kedipan pada gambar atau bahkan tidak ada gambar sama sekali apabila koneksi internet sedang buruk. Memakai tehnik CSS sprite dalam web design ini tidak akan ada sama sekali kedipan karena semua gambar telah diload ketika mengupload master image.

Salah satu cara populer adalah dengan mengembangkan design master yang kemudian dikeluarkan secara selektif ketika dibutuhkan oleh sebuah code yang dipetakan kedalam posisi unik dari masing-masing design untuk kemudian ditampilkan dalam layar. Sprites ini banyak digunakan untuk gambar statis maupun dinamis dimana posisi dari masing-masing gambar design ditentukan oleh hardware controller. Contoh gambar dibawah ini adalah design sprites untuk Pokemon.

Pelajari Lebih Jauh: CSS Sprite dalam Web Design

CSS Quotation dari Web Designer

CSS walaupun telah lama berkembang dalam web design tetapi selalu menarik untuk dicermati maupun dipelajari karena standar dari CSS selalu berkembang dan adaptasi atau intepretasi dari masing-masing browser terhadap CSS ini selalu tidak sama sehingga apabila tidak hati-hati maka design yang telah kita buat akan terlihat berantakan. Dalam hal ini Internet Explorer adalah raja dari ketidakmampuan beradaptasi dengan CSS, mungkin karena terbiasa memakai tabel seperti excel.

Dibawah ini adalah kumpulan CSS quotation ringan dan menarik dalam dunia web design:

CSS adalah seperti melukis dan menggambar, saya selalu mendapatkan hasil sesuai yang saya inginkan

CSS adalah seperti sungai yang selalu mengalir, anda tidak dapat melawan tetapi harus mengikutinya

Apabila tubuh anda seperti HTML, maka CSS adalah pakaian anda, seberapapun kerennya tubuh anda tanpa pakaian yang tepat selalu akan terlihat tidak pantas.

HTML dan CSS ibarat baju dan celana, anda selalu dapat memilih untuk tidak memakainya tetapi tanpa celana anda akan terlihat memalukan.

CSS seperti bermain dengan kubus Rubik, terkadang anda dapat dapat membuat satu warna segaris tetapi merusak harmoni yang lain. Diperlukan ketrampilan tinggi untuk membuatnya sempurna.

Lihat semua CSS Quotation: CSS Web Design Quotation

Mengungkap Misteri Yang Tersembunyi Pada Photoshop

Easter egg adalah pesan kecil, kejuatan yang biasanya lucu dan tersembunyi dalam sebuah aplikasi, paling tidak hal tersebut tidak terdapat dalam dokumentasi resmi. Easter egg ini dapat berupa tulisan, gambar maupun suara yang tersembunyi. Photoshop sebagai sebuah aplikasi bantu design graphic juga tidak terkecuali dalam hal ini. Menemukan easter egg ini kadang kala menjadi sesuatu yang menyenangkan.

Pada saat ini tidaknya aplikasi saja yang memiliki easter eggs namun DVD dan websitepun banyak berisikan pesan-pesan easter eggs dari para programmernya.

Photoshop CS4 juga memiliki easter eggs, apabila tidak salah ada dua buah easter egg dalam photoshop versi ini

Pertama: Merlin Lives
Untuk melihat Merlin sang penyihir ini, langkah pertama buka photoshop setelah itu pilih Path Palette (Windows >> Path) kemudian klik dari Path Palette Option sambil menekan tombol Option pada keyboard dan pilih Palette Options. Ketika hal tersebut selesai dilakukan akan muncul sebuah palette kecil (dan bukan palette option yang seperti biasa) yang berisikan gambar sang penyihir Merlin beserta sebuah tombol dengan kata begone yang apabila diklik akan menghilangkan dialog box tersebut.

Temukan Jawaban Misterinya:

Mengungkap Misteri Yang Tersembunyi Pada Photoshop

Tutorial: Cara Memperbesar Foto Atau Gambar Dengan Photoshop

Sering kali kita mendapatkan sebuah gambar atau foto dengan kualitas rendah untuk diolah dalam design kita. Meskipun semua aplikasi untuk mengolah gambar menyediakan alat untuk memperbesar gambar namun tidak semua cara dapat menghasilkan kualitas gambar yang terjaga baik.

Trik dibawah ini dapat digunakan untuk memperbesar sebuah foto atau gambar dan tetap terjaga kualitasnya. Salah satu cara umum yang dilakukan untuk memperbesar sebuah foto atau adalah dengan menggunakan scalling tools pada photoshop (edit>transform>scale) tetapi dalam banyak kasus cara ini malah akan mengurangi kualitas dan ketajaman dari foto atau gambar tersebut apabila kita memperbesarnya terlalu banyak.

Untuk mengatasi masalah ini dapat dilakukan dengan memakai Image Size Tool (image>image size). Dalam dialog box yang muncul pakailah persentase dalam pixel dimension dan bukan pixel sebagaimana nilai defaultnya dan untuk resample image gunakanlah bicubic sharpen. Tambahlah pixel dimension dengan nilai maksimum 10 persen setiap kali pembesaran dan ulangilah langkah tersebut sebanyak yang dibutuhkan sampai besar yang diinginkan.

Metoda pembesaran ini lebih baik daripada menggunakan Scalling Tool namun tetap saja tidak ada yang dapat menggantikan foto atau gambar dengan kualitas dan resolusi yang tinggi.

Lihat lengkapnya tutorial:

Tutorial: Cara Memperbesar Foto Atau Gambar Dengan Photoshop

Pemakaian Div dan Tabel Dalam Web Design

Dalam mendesign sebuah web site, seringkali terjadi argumentasi tentang mana yang lebih baik memakai mark up div atau table. Apabila kita mendesign website dari awal dengan menggunakan software maka hampir pasti layout yang dibuat akan menggunakan table yang tentu saja sudah ketinggalan zaman dan sangat tidak serach engine friendly, bahkan Adobe Dreamwever CS3 masih menggunakan layout berdasarkan table.

Dalam praktek web design saat ini, banyak kecendrungan terjadi untuk mengganti semua table tag dengan div tags. Dalam banyak hal, memakai table tag akan menghasilkan lebih sedikit tags daripada menggunakan div. Dalam mendesign layout sebuah website, pemakaian div akan sangat lebih baik daripada table. Tidak ada satu search engine pun yang menghukum sebuah halaman karena terlalu banyak menggunakan div tags, ini bertolak belakang dengan pemakaian HTML tabel tags untuk layout.

Banyak sekali kekurangan dari pemakaian table tag untuk layout seperti kesulitan untuk mencetak halaman web, tidak bersahabat untuk dilihat dengan mobile device hingga sulitnya bernavigasi dalam halaman web yang menggunakan table bagi pengguna screen reader. Para pengguna screen reader seringkali harus berhadapan dengan mesin yang menyebutkan “tabel dengan 5 kolom dan lima baris etc etc” yang tentu saja sangat mengganggu dan tidak mudah dimengerti. Tetapi apabila menggunakan div tags, hal tersebut dapat dihindari karena secara default screen reader tidak membaca div tags hingga isi dari table tersebut dapat didesign sedemikian rupa sehingga dapat dimengerti oleh para pemakai screen reader.

Dengan memakai HTML table tags, search engine akan selalu mendapatkan struktur yang benar karena tiap kolom akan berelasi secara benar dengan kolom yang lain dan hal ini tidak terjadi dengan memakai div tags. Hal in menyebabkan table tags sangat tidak efesien untuk menjabarkan design layout sebuah website.

Lebih Jauh tentang pemakain div dan table dalam web design