Iman Brotoseno (Indonesia Film Director and Photographer)

Mas Iman, kalau saya lihat di website Mas Iman, Mas Iman ‘mendeklarasikan diri’ sebagai underwater photographer, apakah ada alasan khusus mengapa memilih bidang ini?

Indonesia sebagai negara kepulauan terluas di dunia memiliki potensi kekayaan dan keindahan alam bawah lautnya, termasuk diantaranya kehidupan terumbu karang dan keanekaragaman hayatinya. Hanya saja, dokumentasi mengenai eksplorasi bawah laut sebagian besar masih dilakukan oleh bangsa asing. Hal ini patut disayangi, mengingat jika National Geographics, di tahun tahun mendatang hanya memfokuskan untuk melakukan eksplorasi di wilayah Afrika, Indonesia dan Papua Nuigini. Ini menunjukkan justru orang asing sendiri yang pada akhirnya memiliki dokumentasi kekayaan alam bawah laut Indonesia.
Saya tergerak untuk lebih mendalami bidang yang masih sedikit sekali digeluti photographer bangsa sendiri.

Dari pengalaman Mas Iman selama menjadi underwater photographer, apa sih perbedaan yang paling mencolok antara bidang ini dengan bidang photography lainnya?

Fotografer bawah laut harus memiliki kemampuan menyelam yang baik. Bahkan diatas rata rata. Saya menyelam diatas seratus kali baru berani membawa kamera ke bawah laut. Ditambah hal hal yang bisa membuat stress ketika melakukan pemotretan seperti, arus air – current, ombak. Seorang fotografer harus membebaskan dari rasa kuatir ketika ia memasuki dunia bawah laut. Tidak seperti pemotretan di darat yang bisa dilakukan seharian penuh tanpa beristirahat. Memotret di dalam air mempunyai batasan batasan waktu yang disesuaikan dengan profile penyelaman kita. Dalam menyelam kita tergantung dengan jumlah pasokan udara di tabung yang kita bawa. Sebagaimana prinsip penyelaman, bahwa semakin dalam kita menyelam, konsumsi kebutuhan oksigen semakin cepat dan boros yang dikarenakan tekanan air laut yang semakin besar pula. Sehingga dengan rata rata waktu penyelaman sekitar 1 jam saja, seorang kameramen penyelam harus sudah kembali kepermukaan, dan mempunyai surface interval yang cukup sebelum bisa kembali menyelam. Mengapa membutuhkan masa istirahat atau interval yang cukup? Karena udara yang kita hirup dari tabung, tidak berisi oksigen murni melainkan kombinasi campuran dengan nitrogen (umumnya kadar oksigen hanya 21 % dan sisanya 79 % terdiri dari nitrogen). Semakin lama dan semakin dalam kita menyelam , semakin banyak pula kadar nitrogen yang terserap ke dalam tubuh kita, sehingga kita membutuhkan beberapa waktu baik di safety stop setidaknya 5 meter dibawah air sebelum kembali kepermukaan, atau ketika sudah berada di permukaan. Ini untuk memberikan nitrogen yang terserap ke dalam tubuh perlahan mengalir keluar dari tubuh kita. Logikanya semakin lama kita menyelam , berarti akumalasi nitrogen yang terserap di tubuh kita semakin banyak, dan hal ini bisa berakibat fatal jika tidak terbuang keluar, seperti kelumpuhan bahkan kematian.

Untuk masalah gadget gimana Mas Iman? Gadget seperti apa yang harus disiapkan untuk melakukan underwater photography?

Masalah gadget, yang pasti harus memiliki camera housing (tergantung jenis camera, dari compact camera sampai DSLR). Kemudian lampu strobe (flash). Jenis kamera. Jaman dahulu kamera bawah air dibuat khusus. Namun sesuai perkembangan jaman, sekarang kamera yang biasa dipakai di darat (pocket, DSLR/ SLR , compact) bisa dibawa ke bawah laut dengan memakai housing khusus. Untuk jenis housing DSLR/SLR , memakai port yang berbeda untuk pemakaian lensa yang berbeda pula.

Apa saja tantangan yang dihadapi oleh Mas Iman ketika melakukan sesi underwater photography?

Karena sebuah seni dari underwater photography adalah bagaimana memadukan menyelam dengan kemampuan teknis mengambil gambar dengan kamera. Sebagai contoh, seorang penyelam berpengalaman akan mampu mengatur persediaan udara di tabungnya selama mungkin dengan pola pernafasan tertentu, bagaimana bermanuver di bawah air sambil membawa kamera seandainya timbul arus deras, sampai bagaimana bisa mendekati obyek hewan tanpa membuat mereka lari menghindar. Juga mengatur framing sebuah object, sambil mengatur posisi badan agar bisa bertahan stabil, tidak naik turun yang tentu saja akan membuat gambar menjadi shaking atau tidak stabil. Pengetahuan tentang habitat dunia bawah laut. Apakah biota ini menyengat atau tidak. Hewan buas atau tidak, Sebagian ikan hanya keluar pada waktu dan jam tertentu dari persembunyiannya di balik karang. Memotret biota yang pemalu kadang bisa membuat frustasi. Banyak membaca tentang literature biota bawah laut serta bantuan pemandu lokal kita akan mendapatkan foto-foto yang bagus. Pencahayaan merupakan teknik yang paling sulit. Perlu diketahui karena prinsip prinsip dasar spectrum cahaya sinar matahari yang masuk ke dalam air, membuat sebagian warna perlahan lahan menghilang semakin dalam kita menyelam. Warna merah akan menghilang di kedalam 5 meter, lalu kuning di kedalaman 10 meter, sampai akhirnya tinggal warna biru dan hijau saja diatas kedalaman 18 meter. Untuk itu diperlukan sumber cahaya untuk memunculkan kembali warna warna yang hilang. Saya memakai 2 buah strobe untuk wide angle, sementara macro bisa butuh satu lampu, walau kadang kita bisa mengkombinasikan dengan dua lampu strobe yang berbeda intensitas kekuatan cahayanya. Untuk wide angle, kita harus mengkombinasikan antara avalailable light (cahaya matahari yang masuk) dengan fill in dari lampu strobe. Karena cahaya hanya bisa merambat dalam jarak pendek di dalam air. Kita tidak mungkin menerangi seluruh area.

Misal ada pembaca yang ingin melakukan sesi underwater photography, tips dari Mas Iman apa saja?

Waktu pemotretan di bawah laut, sangat tergantung dengan kondisi laut itu sendiri seperti sinar matahari, visibility atau jarak pandang, arus, serta waktu yang tepat. Kita harus tahu musim atau prediksi cuaca pada saat penyelaman dilakukan. Visibility di dasar laut,bisa suatu saat hanya berkisar 3 meter tetapi disuatu waktu dalam kondisi yang lain, bisa mencapai jarak katakanlah 40 meter. Tentu saja semakin bagus visibility akan membuat gambar yang dihasilkan semakin indah .Menurut pengalaman saya, mengambil gambar wide adalah pagi hari, ketika pasokan cahaya matahari berlimpah. Karena jika semakin siang dan sore, pasokan intensitas cahaya matahari sudah mulai berkurang , dan kondisi air laut juga sudah menjadi low tide atau surut, yang membuat banyak partikel partikel terangkat sehingga bisa air cenderung keruh dan membuat visibility berkurang. Pemfocusan akurat kadang sulit dilakukan, karena refraksi sinar dibawah air yang membuat obyek tampak lebih dekat dan lebih besar dari aslinya. Hal itu harus diperhitungkan. Saya sering memakai manual focus atau auto. Pemotretan juga bisa dilakukan dengan mode manual , atau dengan mode aperture priority (prioritas pada diafragma) yang dianjurkan untuk mendapatkan depth of field terbaik memotret wide angle.

Ide eksperimen underwater photography seperti apa nih yang menjadi impian/rencana Mas Iman?

Idea apa/eksperimen apa yang ingin dilakukan? Sepertinya banyak. Karena ide ide itu tak ada batasnya. Mulai dari simpel sampai hal hal yang dianggap ‘ gila ‘ atau mustahil. Di luar negeri, umumnya photography under water tidak melulu laut. Sudah merupakan bidang disain advertising. Lihat saja web sitenya http://www.zenaholloway.com/zena.html.

Last question nih Mas… Bagaimana komentar Mas Iman tentang situs VisualMagz.com?

Situs yang bermanfaat, karena memang masih sedikit situs yang memberikan inspirasi tentang dunia creative. Sepertinya pas dengan tagline ‘ your creative booster ‘.

Terimakasih banyak atas kesediaan Mas Iman Brotoseno untuk berbagi ilmu tentang Underwater Photography.

#1: Plentong

Plentong (Dhimas Ronggobramantyo) adalah desainer web lokal yang tinggal di Yogyakarta dan menjadi member ThemeForest sejak April 2009. Sampai saat ini, Plentong telah men-submit 24 item karya di ThemeForest dan membukukan penjualan sejumlah 1783 dengan total nilai penjualan antara $10.000 s.d. $50.000. Dengan hasil penjualan tersebut, Plentong termasuk salah satu top author online marketplace ThemeForest (peringkat 35).  Salah satu portfolio-nya yang membukukan penjualan paling tinggi adalah Clean Blue and Black Mac Style Software Template (price: $17, sales: 158 sales). Porfolio item yang telah di-submit Plentong di ThemeForest dapat dilihat pada gambar-gambar berikut:

#2: Indonez

Indonez (note: saya tidak memperoleh data nama aslinya) adalah desainer web lokal yang menawarkan desain web yang unik dan simple. Indonez menjadi member ThemeForest sejak November 2009 dan sampai saat ini, telah men-submit 13 item karya di ThemeForest dan membukukan penjualan sejumlah 1298 dengan total nilai penjualan antara $10.000 s.d. $50.000.  Dengan hasil penjualan tersebut, Indonez juga termasuk salah satu top author online markeplace ThemeForest (peringkat 36, satu tingkat di bawah Plentong). Salah satu portfolio-nya yang membukukan penjualan paling tinggi adalah Centita: Minimalis BusinessWordPress Theme (price: $27, sales: 399 sales). Porfolio item yang telah di-submit Indonez di ThemeForest dapat dilihat pada gambar-gambar berikut:

#3: Faiq Fardian

Faiq Fardian adalah desainer web lokal yang tinggal di Yogyakarta dan menjadi member ThemeForest sejak Oktober 2009. Sampai saat ini, Faiq Fardian telah men-submit 2 item karya di ThemeForest dan membukukan penjualan sejumlah 149 dengan total nilai penjualan antara $1000 s.d. $5000. Sejauh yang saya ketahui, Faiq Fardian memiliki Web Agency dengan nama Codepth.   Salah satu portfolio-nya yang membukukan penjualan paling tinggi adalah Liquid Gallery (harga: $27, sales: 107 sales). Porfolio item yang telah di-submit Faiq Fardian di ThemeForest dapat dilihat pada gambar-gambar berikut:

#4: IMediaPixel

Tidak banyak informasi yang saya peroleh mengenai identitas IMediaPixel selain menjadi member ThemeForest sejak Juli 2009. Sampai saat ini, IMediaPixel telah men-submit 2 item karya di ThemeForest dan membukukan penjualan sejumlah 133 dengan total nilai penjualan antara $1000 s.d. $5000. Salah satu portfolio-nya yang membukukan penjualan paling tinggi adalah Majalah (harga: $27, sales: 94 sales). Porfolio item yang telah di-submit IMEdiaPixel di ThemeForest dapat dilihat pada gambar-gambar berikut:

Bagaiamana dengan Anda?

Bagaimana dengan Anda? Apakah Anda tertarik untuk bergabung di online marketplace seperti ThemeForest atau lainnya (WooThemes)? Selain sebagai individu, sebenarnya online marketplace ini juga dapat dimanfaatkan oleh perusahaan yang bergerak di bidang desain web untuk menjual karya-karyanya. Kalau melihat daftar di atas, hampir semua desainer lokal yang terdaftar di online marketplace ThemeForest adalah member baru (terdaftar mulai tahun 2009) tetapi nilai penjualannya sudah bisa dikatakan lumayan. Tertarik?

Form

Dalam beberapa website, seringkali ketika pengunjung harus mengisi suatu form (Sign Up, Sign In atau tipe form lainnya), form tersebut akan dimunculkan pada halaman web yang lain atau melalui popup yang dimunculkan dalam jendela browser yang berbeda. Penggunaan modal windows dapat membuat form yang dimunculkan menyatu dengan halaman yang sebelumnya sedang diakses oleh pengguna. Salah satu contoh penggunaan modal windows dalam menampilkan form dapat dilihat pada Contact Form yang ada pada website SprocketHouse.

Gallery Preview

Jika sebuah website memiliki fitur gallery, seringkali galerry tersebut memakan ruang yang ada dalam sebuah halaman web karena beberapa item gallery langsung ditampilkan dalam halaman tersebut. Permasalah ini dapat diatasi dengan menggunakan modal windows untuk menampilkan item pertama yang ada dalam gallery kemudian pengguna dapat mengakses item gallery lainnya dengan menu interaktif yang tersedia. Seringkali modal windows juga digunakan untuk melihat preview dari sebuah item yang ada di gallery, baik yang berupa photo maupun theme seperti pada saat kita melihat preview sebuah theme di WordPress.

Feedback

Dalam sebuah interaksi, feedback menjadi salah satu komponen yang sangat penting. Feedback dapat menjadi sarana untuk memberitahukan pengguna mengenai status atau kondisi yang sedang terjadi (terkait dengan faktor observabilitas). Salah satu contoh penggunaan feedback dalam desain web adalah untuk menampilkan status mengenai proses upload/download yang sedang dilakukan oleh pengguna. Modal windows juga dapat digunakan untuk keperluan ini.

Untuk mengetahui lebih lanjut tentang penggunaan modal windows, dapat membaca artikel berikut ini:

1. Modal Windows In Modern Web Design
2. 33 Examples of Modal Windows in Web Design
3. Inspirational Modal Windows in web design

Bagaimana menurut pendapat Anda? Selain ketiga hal tersebut, modal windows tepat digunakan di mana saja ketika Anda mendesain web? Silahkan memberikan jawaban Anda melalui fasilitas komentar.

Apa itu Framework?

Framework dalam dunia software dapat diartikan sebagai sebuah abstraksi dimana di dalamnya terdapat kode-kode program yang menyediakan fungsi generik yang dapat dikustomisasi oleh pengguna framework sesuai dengan kebutuhannya. Penggunaan framework dapat memberikan berbagai keuntungan, misal:

• Dapat dilakukan standarisasi proses pengembangan atau development
• Developer dapat berkonsentrasi pada masalah-masalah bisnis yang spesifik
• Mencegah pekerjaan yang berulang (redundant)
• Meningkatkan produktivitas

Meski dapat memberikan keuntungan, penggunaan framework juga ada sisi negatifnya, yaitu:

• Para programmer mungkin akan menemukan batasan-batasan ketika merancang aplikasi menggunakan framework
• Kemungkinan akan menambah biaya development apabila framework yg digunakan kurang terdokumentasi dan kurang di support
• Performa dan kecepatan eksekusi

Sumber: City of Minnetrista Website

Framework Apa Saja yang Dibutuhkan Desainer Web?

XHTML/CSS Framework

XHTML/CSS Framework dapat digunakan oleh desainer web ketika membuat desain dan kemudian menterjemahkan hasil desain yang telah dibuat ke dalam code XHTML/CSS. Saat ini sudah tersedia berbagai macam XHTML/CSS Framework di antaranya 960 Grid System, Blueprint CSS, Malo, YUI Grids, YAML, Elastic, Emastic, snowdust, CSScaffold, Baseline, EZ-CSS, Unobtrusive CSS, atatonic, xCSS, The Golden Grid, dan lain-lain.

Contoh Website dengan 960 Grid System

Contoh bagaimana menggunakan XHTML/CSS Framework 960 Grid System:

<div class="container_12">
<!-- Header Section -->
<div id="header" class="grid_12">
...
</div>
<!-- End of Header Section -->

<!-- Main Section -->
<div id="delicious" class="grid_3">
...
</div>
<div id="content" class="grid_6">
...
</div>
<div id="gallery" class="grid_3">
...
</div>
<!-- End of Main Section -->

<!-- Footer Section -->
<div id="footer" class="grid_12">
...
</div>
<!-- End of Footer Section -->
</div>

JavaScript Framework

JavaScript Framework dapat digunakan oleh desainer web ketika akan menambahkan sisi interaktivitas dalam web. Beberapa sintaks/perintah JavaScript yang rumit dan panjang, dikemas sedemikian rupa sehingga menjadi lebih sederhana bagi desainer web. Salah satu Javascript Framework yang terkenal adalah jQuery, sedangkan yang lainnya ada MooTools, The Dojo Toolkit, Google Web Toolkit, script. aculo.us, Yahoo! UI Library, dan lain-lain.

Contoh Tutorial dengan jQuery

Contoh bagaimana menggunakan JavaScript Framework jQuery:

 $(document).ready(function(){
   $("a").toggle(function(){
     $(".slide").animate({ height: 'hide', opacity: 'hide' }, 'slow');
   },function(){
     $(".slide").animate({ height: 'show', opacity: 'show' }, 'fast');
   });
 });

 $(document).ready(function(){
   $("a").toggle(function(){
     $(".slide").hide('fast');
   },function(){
     $(".slide").show('slow');

   });
 });

PHP Framework

PHP Framework dapat digunakan oleh desainer web ketika mereka ‘terpaksa’ melakukan coding yang terkait dengan fungsionalitas web seperti akses ke basisdata, pengelolaan session, dan lain-lain. Framework ini juga menyederhanakan code yang harus ditulis oleh desainer web. Contoh PHP Framework adalah CodeIgniter, Zend Framework, Prado, CakePHP, Symfoni dan lain-lain.

Contoh Website dengan CodeIgniter

Contoh bagaimana menggunakan PHP Framework CodeIgniter:

<?php

class Book extends Controller {
    function Book()
    {
        parent::Controller();
    }

    function GetAll()
    {
        $this->load->model('book_model');
        $data['query'] = $this->book_model->book_getall();
        $this->load->view('book_view_new',$data);
    }

    function GetByID($id)
    {
        $this->load->model('book_model');
        $data['query'] = $this->book_model->book_getbyid($id);
        $this->load->view('book_view_new',$data);
    }
}
?>

Terlalu Banyak Pilihan?

Terlalu banyak pilihan ya? Sejauh pengalaman saya, untuk XHTML/CSS Framework saya lebih memilih 960 Grid System, untuk JavaScript Framework saya lebih memilih jQuery, dan untuk PHP Framework saya lebih memilih CodeIgniter. Bagaimana dengan pilihan Anda?

Bali Web Creator aka I Made Suastika

Bali Web Creator :http://www.baliwebcreator.com

Bagaimana awalnya Bli Made sampai memutuskan untuk memilih karir sebagai seorang Web designer?

Awal karir saya di bidang web design sebenarnya dimulai secara tidak sengaja, yaitu pada saat ada seorang teman menawarkan saya perkerjaan untuk bantu2 cropping image di perusahaan web developer nya (sebelumnya saya bekerja sebagai teknisi ATM) kira-kira tahun 2002. Disana awal mula saya mengenal photoshop dan kemudian berlanjut mengenal Dreamweaver. Setelah saya jalani beberapa lama ternyata pekerjaan ini membuat saya enjoy, sehingga saya memutuskan untuk focus di bidang web design.

Kalau saya perhatikan, banyak Web designer Indonesia maupun manca negara yang memilih bekerja sebagai seorang freelancer dibandingkan bekerja di perusahaan? Bagaimana pandangan Bli terhadap hal tersebut?

Klo menurut saya, seorang freelancer lebih memiliki kebebasan di
didalam berkreasi sehingga karya-karya yang dihasilkan betul-betul ide mereka tanpa ada intervensi dari atasan. Begitu pula dalam management waktu, mereka dapat memanage waktu mereka sesuai dengan keadaan mereka namun tetap mengikuti tenggat waktu yang diberikan oleh client.

Bagaimana proses kreatif Bli selama ini mulai dari membuat konsep sampai akhirnya menjadi sebuah web yang siap untuk dipublish/diserahkan ke klien?

Langkah2nya secara singkat yaitu saya mencari tahu apa keinginan client(baik dair segi design maupun system). Kemudian dilanjutkan dengan membuat draft design untuk dipilih oleh client. Lalu revisi-revisi sedikit di bagian design. Berikutnya adalah mengubah design menjadi file HTML/XHTML untuk dimasukan ke dalam system. Terakhir yaitu membangun system dan upload.

Dalam proses kreatif, inspirasinya biasanya dari mana dan style apa yang menjadi ciri khas Bli dalam mebuat desain web?

Inspirasi saya bisa dari mana saja namun kebanyakan dari web2 gallery seperti cssmania.com, thedesigninspiration.com, cssremix.com dsb. Untuk masalah style, tidak ada yang specific namun khusus untuk web pribadi saya, saya ingin memberikan suatu nuansa hijau (itung2 ikutan kampanye GO GREEN).

Tools apa sajakah yang biasanya Bli gunakan? Apakah ada tips khusus bagi pembaca yang masih bingung dalam memilih tools?

Untuk masalah tools, kayaknya sama dengan web designer kebanyakan yaitu Photoshop, Illustrator, Dreamweaver serta FLASH. Tips dari saya sih nggak ada, yang penting dalam berkreasi kita bisa menggunakan tools tersebut secara maksimal dan sesuai dengan keperluan.

Bagaimana pengalaman Bli dalam mendapatkan klien? Apakah ada tips khusus untuk pembaca VisualMagz?

Sejauh ini client saya mengetahui tentang saya dari search engine dan dari mulut ke mulut. Tips saya untuk mendapatkan client sih biasa aja yaitu maksimalkan hasil kerja kita dan sebarkan informasi tentang diri kita melalui fasilitas2 online yang ada seperti search engine, blogs, ataupun melalui web gallery. Klo ada dana lebih bisa juga dengan pasang iklan. He he he..

Siapa saja yang pernah menjadi klien Bli dan apa tantangan terbesar yang pernah Bli hadapi dalam mengerjakan projek? Bagaimana akhirnya mengatasinya?

Yang pernah menjadi client saya ada villa, travel, diving, café, property magazine, photography dll. Hampir semua adalah tantangan buat saya. Cara mengatasinya yaitu dengan tidak pernah berhenti untuk terus belajar.

Biasanya proses desain web terdiri dari 2 (dua) bagian yaitu membuat mockup dan mengkonversi mockup ke XHTML dan CSS? Kalau menurut Bli bagian mana yang paling menyita waktu dan membutuhkan usaha yang lebih?

Klo menurut saya ada 3 bagian dimana bagian yang terakhir adalah pembuatan systemnya. Dan bagian inilah yang paling banyak menyita waktu terutama untuk website dengan skala yang besar seperti portal dsb. Hal itu dikarenakan kita harus mempelajari terlebih dahulu system yg diinginkan oleh client kita kemudian menuangkannya ke dalam program. Klo bisa saya
ibaratkan seperti membuat alur cerita dalam sebuah film atau novel.

Biasanya desainer identik dengan Mac, kalau menurut Bli bagaimana?

Wah kalau saya sih nggak identik sama sekali dengan Mac…soalnya gak punya, habisnya kemahalan dan juga susah makenya. He he he…. Saya sudah terbiasa dengan PC biasa, yang penting ada photoshop dan dreamweaver nya.

Finally, apa pendapat Bli tentang VisualMagz?

Menurut saya website ini bagus dan informatif. Keep on moving…..

“Terimakasih kepada Bli I Made Suastika aka Bali Web Creator atas kesediaannya untuk di Interview. Semoga dapat memberi inspirasi bagi para web designer Indonesia lainnya. Salam”

Struktur Dasar Theme pada CMS WordPress

Struktur dasar theme pada WordPress terbagi menjadi beberapa bagian yang dipisahkan dalam beberapa file. Bagian-bagian tersebut adalah header (header.php), index (index.php), sidebar (sidebar.php), dan footer (footer.php) yang berfungsi untuk layout. Selain itu masih terdapat bagian untuk menampilkan single post (single.php), menampilkan pages (pages.php) menampilkan bagian komentar (comments.php), menampilkan arsip (archieve.php), dan menampilkan form pencarian (searchform.php) dan hasil pencarian (search.php). Informasi selengkapnya mengenai hal ini dapat di lihat di sini.

Pada tutorial ini hanya akan difokuskan pada struktur dasar yang terdiri dari bagian header, index, sidebar dan footer saja dengan menggunakan studi kasus website Electronic Journals Universitas Atma Jaya Yogyakarta.

Bagian Header

Struktur untuk bagian header biasanya terdiri dari elemen-elemen untuk mendeklarasikan DOCTYPE, elemen header dari dokumen XHTML (title, meta, link, script, dll), dan komponen header dari layout website.

Langkah 1 untuk Bagian Header

Buatlah sebuah file dengan menggunakan text editor (misal Notepad++) dan simpan dengan nama file header.php.

Langkah 2 untuk Bagian Header

Langkah selanjutnya adalah menambahkan kode XHTML/PHP untuk mendeklarasikan DOCTYPE dan beberapa elemen head XHTML. Pada bagian ini, kita akan menggunakan beberapa fungsi/template tags dari WordPress yaitu:

1. language_attributes()
   Fungsi ini digunakan untuk menampilkan atribut language dan nilai dari tag html.
2. bloginfo()
   Template tags ini digunakan untuk mengambil informari dari beberapa parameter User Profile maupun General  Options dari website. Jika parameternya ‘name’, maka akan mengambil nilai nama blog/website yang kita isikan pada saat melakukan instalasi WordPress. Jika parameternya ‘stylesheet_url’ maka akan mengambil nilai URL dari stylesheet yang kita pakai dalam theme yang dibuat. Informasi lengkap mengenai template tags ini dapat dilihat di sini.
3. is_single()
   Fungsi ini digunakan untuk mendeteksi apakah halaman yang disajikan merupakan halaman tunggal atau bukan. Fungsi lain yang terkait adalah is_home() untuk mendeteksi apakah sedang berada di halaman home atau bukan. Informasi mengenai conditional tags lainnya dapat dilihat di sini.
4. wp_title()
   Template tags ini digunakan untuk menampilkan judul dari sebuah post/page.
5. wp_head()
   Template tags ini digunakan untuk menampilkan beberapa elemen head dari dokumen XHTML.

Kode selengkapnya untuk bagiam header adalah sebagai berikut:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>>

<head profile="http://gmpg.org/xfn/11">
 <title><?php bloginfo('name'); ?> <?php if ( is_single() ) { ?> &raquo; Blog Archive <?php } ?> <?php wp_title(); ?></title>

 <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" />
 <meta name="robots" content="index, follow" />
 <meta name="keywords" content="jurnal teknologi industri, fakultas teknologi industri, universitas atma jaya yogyakarta" />
 <meta name="description" content="Website Jurnal Teknologi Industri Universitas Atma Jaya Yogyakarta" />

 <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" />
 <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" media="screen" />

 <?php wp_head(); ?>

</head>

Bagian Index (Layout)

Bagian index digunakan untuk menyatukan bagian-bagian yang lain (header, sidebar dan footer) dan ditambahkan dengan bagian untuk menampilkan posting dari website.

Langkah 1 untuk Bagian Index

Buatlah sebuah file dengan menggunakan text editor (misal Notepad++) dan simpan dengan nama file index.php.

Langkah 2 untuk Bagian Index

Langkah selanjutnya adalah menambahkan kode PHP untuk memanggil bagian header. Template tags yang digunakan adalah get_header().

<?php get_header(); ?>

Langkah 3 untuk Bagian Index

Langkah selanjutnya adalah menambahkan kode XHTML/PHP untuk menampilkan posting pada website. Pada bagian ini, kita akan menggunakan beberapa fungsi/template tags dari WordPress yaitu:

1. WP_Query()
   WP_Query merupakan class dari WordPress yang digunakan untuk menampilkan posting. Parameter yang digunakan dalam template ini adalah “category_name=edisi&showposts=1″ karena hanya akan menampilkan satu posting terbaru dari kategori edisi. Informasi selengkapnya mengenai template tags WP_Query dapat dilihat di sini.
2. have_post() dan the_post()
   Template tags ini digunakan untuk proses looping (The Loop) terkait dengan hasil dari pemanggilan fungsi WP_Query() sebelumnya.
3. get_post_custom_values() dan get_post_meta()
   Template tags get_post_custom_values() digunakan untuk mengambil nilai custom fields yang kita tambahkan dalam posting. Pada kasus ini custom field-nya adalah cover yang menyimpan nilai lokasi file gambar cover dari jurnal. Template tags get_post_meta() digunakan untuk mengambil meta data dari posting seperti pengarang dan tanggal posting.
4. the_title()
   Template tags ini digunakan untuk menampilkan judul posting/page.
5. the_content()
   Template tags ini digunakan untuk menampilkan konten dari suatu post/page. Jika dtambahkan parameter ‘(Selengkapnya…)’ maka jika konten ditampilkan hanya sebagian, maka di akhir konten akan diberikan teks (Selengkapnya…) untuk melihat konten secara lengkap.

Kode yang digunakan untuk menampilkan konten yang diposting adalah sebagai berikut:

    <div id="main">
         <div id="content">
             <h2>Edisi Terbaru</h2>

             <?php
                 $br = new WP_Query("category_name=edisi&showposts=1");
                 if($br->have_posts()) {
                     $br->the_post(); ?>
                     <img src="<?php $values = get_post_custom_values("cover"); if (isset($values[0])) { $key="cover"; } ?><?php echo get_post_meta($post->ID, $key, true);?>" />
                     <h3><?php the_title(); ?></h3>
                     <p>Jurnal Teknik Sipil adalah wadah informasi bidang Teknik Sipil berupa hasil penelitian, studi kepustakaan maupun tulisan ilmiah terkait. Terbit pertama kali Oktober tahun 2000 dengan frekuensi terbit tiga kali setahun pada bulan Oktober, Pebruari dan Juni. (ISSN 1411-660X).</p>
                     <div class="clear"></div>

                     <?php the_content("(Selengkapnya...)"); ?>

                 <?php } ?>
         </div>

Langkah 4 untuk Bagian Index

Langkah selanjutnya adalah menambahkan kode PHP untuk memanggil bagian sidebar dan footer. Template tags yang digunakan adalah get_sidebar() dan get_footer().

<?php get_sidebar(); ?>
<?php get_footer(); ?>

Bagian Sidebar

Bagian sidebar biasanya digunakan untuk menyajikan informasi mengenai judul posting sebelumnya (recent posts), pages (bisa ditempatkan di header sebagai menu), dan informasi lainnya. Pada sidebar juga dapat ditambahkan Sidebar Widget sehingga konten sidebar bisa diatur secara dinamis melalui panel Dashboard Admin. Untuk kasus ini, bagian sidebar akan digunakan untuk menampilkan posting sebelumnya dan daftar page.

Langkah 1 untuk Bagian Sidebar

Buatlah sebuah file dengan menggunakan text editor (misal Notepad++) dan simpan dengan nama file sidebar.php.

Langkah 2 untuk Bagian Sidebar

Langkah selanjutnya adalah menambahkan kode XHTML/PHP untuk menambahkan form pencarian pada bagian Sidebar. Pada bagian ini kita menggunakan template tags bloginfo() yang sudah kita bahas di atas dengan parameter ‘url’ dan template tags the_search_query() yang digunakan untuk menampilkan query yang digunakan dalam komponen form.

   <div id="sidebar">
       <form method="get" id="searchform" action="<?php bloginfo('url'); ?>/">
           <input type="text" value="<?php the_search_query(); ?>" name="s" id="s" />
           <input type="submit" id="searchsubmit" value="Search" />
       </form>

Langkah 3 untuk Bagian Sidebar

Langkah selanjutnya adalah menambahkan kode XHTML/PHP untuk menampilkan daftar posting sebelumnya pada bagian Sidebar. Pada bagian ini kita menggunakan template tags wp_get_archives() yang digunakan untuk menampilkan daftar posting dari website dalam format list (<li></li>).

            <h2>Edisi Sebelumnya</h2>
            <ul>
                <?php wp_get_archives('type=postbypost'); ?>
            </ul>

Langkah 4 untuk Bagian Sidebar

Langkah selanjutnya adalah menambahkan kode XHTML/PHP untuk menampilkan keterangan dan daftar page pada bagian Sidebar. Pada bagian ini kita menggunakan template tags wp_list_pages() yang digunakan untuk menampilkan daftar pages/halaman dari website dalam format list (<li></li>).

             <h2>Tentang Jurnal</h2>
             <p>Jurnal Teknik Sipil adalah wadah informasi bidang Teknik Sipil berupa hasil penelitian, studi kepustakaan maupun tulisan ilmiah terkait. Terbit pertama kali Oktober tahun 2000 dengan frekuensi terbit tiga kali setahun pada bulan Oktober, Pebruari dan Juni. (ISSN 1411-660X).</p>

	     <ul>
		<?php wp_list_pages('title_li='); ?>
	     </ul>

	    </div>
	</div>
	<div class="clear"></div>

Bagian Footer

Langkah terakhir adalah membuat bagian footer, dimana konten dari bagian ini tergantung dari desain yang dibuat (bisa berisi informasi mengenai copyrights, dan lainnya).

Langkah 1 untuk Bagian Footer

Buatlah sebuah file dengan menggunakan text editor (misal Notepad++) dan simpan dengan nama file footer.php.

Langkah 2 untuk Bagian Footer

Langkah ini akan menambahkan elemen-elemen yang ada pada bagian footer dari website. Pada bagian ini kita menggunakan template tags wp_footer().

<div id="footer">
 <?php wp_footer(); ?>
 <p>Copyrights by Kantor Sistem Informasi 2009.</p>
 </div>

 </div>
</body>
</html>

Hasil akhir dari theme ini dapat dilihat pada website Electronic Journals Universitas Atma Jaya Yogyakarta.

Ketika kita menggunakan WordPress sebagai CMS, biasanya ada beberapa hal yang perlu dikustomisasi/di-hacks agar sesuai dengan kebutuhan kita. Sebagai contoh, kita mengharapkan dapat menambahkan custom fields yang berbeda untuk masing-masing kategori artikel yang kita post, misal untuk kategori agenda, maka ada custom fields waktu pelaksanaan dan lokasi. Selain itu, kita juga mengharapkan agar proses posting artikel menjadi lebih mudah dan tidak perlu mengklik beberapa level menu yang ada pada Dashboard untuk melakukan posting. Permasalahan-permasalahan di atas dapat kita tangani dengan menggunakan Plugins Flutter.

Flutter memiliki beberapa fitur, diantaranya:

1. Custom Write Panels (baik untuk Posts, Pages, maupun Themes)
   Fitur ini dapat digunakan untuk menambahkan panel di halaman Dashboard WordPress sehingga proses posting menjadi lebih cepat. Selain itu kita bisa menambahkan beberapa field maupun group field untuk setiap panel sesuai dengan kebutuhan. Bahkan field yang ditambahkan dapat memiliki beberapa tipe, seperti untuk upload file, audio, maupun video, membuat checkbox, dropdown, dan lain-lain.
2. Simple Templating
   Fitur ini sangat membantu ketika kita berhadapan dengan proses coding template/theme. Kita dapat mengakses field-field yang telah ditambahkan melalui fungsi get dengan parameter nama variabel yang mewakili nama field, misal echo get(‘variable’).

Jika Anda ingin mengetahui lebih jauh mengenai fitur-fitur dari Flutter, silahkan Anda mem-play video berikut ini:

Case Study: Website Universitas Atma Jaya Yogyakarta

Studi kasus pada artikel ini adalah Website Universitas Atma Jaya Yogyakarta. Plugins Flutter digunakan untuk menambahkan Custom Write Panel pada halaman Dashboard WordPress sehingga pengguna lebih mudah ketika akan melakukan posting. Proses bagaimana menambahkan panel dapat Anda lihat pada gambar-gambar berikut:

Selain itu, Plugins Flutter juga digunakan untuk melakukan custom fields hacks pada beberapa kategori posting, dalam hal ini Agenda dan Lowongan. Pada kategori Agenda ada dua custom fields yang ditambahkan yaitu Waktu Pelaksanaan dan Lokasi, sedangkan pada kategori Lowongan ada satu custom field yang ditambahkan yaitu Deadline. Berikut ini adalah gambar contoh implementasi dan proses menambahkan field-nya melalui Flutter.

Sudahkah Anda melakukan hacks pada CMS yang Anda gunakan? Jika belum, mungkin Flutter adalah salah satu Plugins WordPress yang bisa Anda coba untuk melakukan hacks terhadap CMS Anda. Selamat mencoba dan bereksplorasi!

DesignMakerSyndicate aka Denny Budy Susetyo

WOW Magazine : http://www.wowmagz.com/

deviantART : http://www.designmakersyndicate.deviantart.com/

BehanceNetwork : http://www.behance.net/HelloDMS

Halo Mas Denny, kenapa memilih designmakersyndicate sebagai brand/identitas?

Halu Halu…. sebenarnya Saat Ini lebih Sering menggunakan Nick “DMS” karena lebih singkat dan Mudah diingat. ^^

Sejak kapan Mas Denny tertarik dengan dunia disain?

Pastina Sejak SMP sudah suka menggambar… dikelas tiap hari nggambar terus sampai SMA, hingga suatu hari kenalan dengan Corel Draw 09 tapi masih sekedar coba2 gak tau harus diapain haha…

Baru tertarik dan minat banget setelah Lulus SMA… oh ternyata Corel Bisa buat begini begitong yang nggak bisa aku buat dengan tangan, akhirnya dari situ sampe sekarang serius belajar software digital seperti Corel dan Photoshop.

Apakah Mas Denny belajar di sekolah desain grafis atau belajar sendiri secara otodidak? Dan menurut pendapat Mas Denny apa pro dan kontra dari kedua hal tersebut?

Saya sekolah Di Teknik Informatika yg Materi desainnya hanya sekedar 30 % jadi lebih banyak berguru ke teman2 dan browsing referensi di internet.

Sebenarnya Tidak ada yang salah dengan Jalur Resmi Desain ato Secara Otodidak.. .banyak desainer yg sukses di luar sana tidak lulus kuliah dsb. bagaimana kita bisa memanfaatkan skill yang kita punya bagi kemajuan diri sendiri dan masyarakat itu lebih penting, tidak peduli dia Sarjana Desain Atau tidak.

Dalam desain Mas Denny, style seperti apa yang dikembangkan?

Saat ini saya menambahkan “Colors Orgasm” di belakang Nick “DMS” dengan harapan bisa lebih menguatkan benang merah DMS style, clean ornamental, fresh dan colorfull.

Saya Juga lagi senang bermain Digital Imaging walaupun masih sederhana… Ke depannya saya ingin membuat digital imaging dengan tone yang khas DMS.

Bagaimana proses kreatif Mas Denny selama ini, mulai dari membuat konsep sampai jadi final artwork?

Untuk Artwrks Portfolio Pribadi ( Digital Illustration) saya lebih suka mengedit Model Cewek. Otomatis Browsing si Model ke Beberapa Teman Fotografer.. atau di situs penyedia gambar. Setelah dapat baru atur komposisi objek2 secara kasar dulu langsung di Kompie dengan Adobe PS.. Komposisi objek fix baru benar2 di edit sesuai gambaran kasar.. retouch Foto, pemilihan Warna, hingga Final Toning sampai jadi Final Artwrks

Sedangkan untuk project komersial tentu saja brainstorming , menganalisa, creative process dan mencari Stok yang diperlukan

Dalam proses kreatif Mas Denny, biasanya inspirasinya dari mana?

Banyak Banget.. Musik juga mempengaruhi.. kalo saya berkarya saya sudah Siapin Playlist DMS ost soundtrack di winamp hahaha… lagu2na tentu yang Sesuai dengan style saya..Inspirasi utama tentu saja tetap berkhayal bro.. gak tau aja kalo udah didepan komputer dan pegang mouse.. inspirasi ngalir gitu aja… tentu saja dengan tetap mencari referensi Artwrks dari media internet dsb.

Hal yang biasa Mas Denny lakukan agar tetap bisa kreatif apa saja?

Nonton Film… inspirasi utama saya.:D

Tools yang biasa Mas Denny gunakan dalam proses kreatif apa saja?

Komputer dan Mouse tentunya serta Full Adobe Photoshop, pensil , Kadang2 bermain dengan Illustrator juga.

Siapa yang menjadi idola Mas Denny di bidang desain grafis, dan beri tahu kami mengapa mengidolakan mereka, apa yang membuat mereka istimewa?

Global desainer all around The World..

Siapa saja yang pernah menjadi klien Mas Denny?

yang lumayan besar aja yah ada NUS( national University of singapore) dan 2 Clothing company dari Aussie.

Apa salah satu tantangan terbesar yang pernah Mas Denny hadapi dalam mengerjakan projek? Bagaimana akhirnya mengatasinya?

Setiap Projek adalah Tantangan, Komersil ataupun tidak.

Di antara sekian banyak portfolio yang sudah Mas Denny hasilkan, mana yang paling berkesan? Mengapa?

Semuanya berkesan mas bro asli.. dari yang masih cupu dan standart saja saya sudah sangat terkesan Karena setiap kita mengerjakan artwrks dari situ secara tidak langsung sudah menimbulkan passion untuk artwrks2 selanjutnya.

Menurut Mas Denny, bagaimana prospek karir bidang disain grafis di Indonesia saat ini dan ke depan?

Sebenarnya cukup menjanjikan.. cuman ya gak tau aja kalo di Indo agak gimana gitu..dari segi klien saja sudah jauh banget mereka berani bayar mahal karena sesuai kualitas.. kalo disini.. semua tarik Murah..bahkan di kota saya Malang. Biaya Desain sampai gratis ya ampun ckckck….ya ga tau juga pengalaman saya begitu sih…

Finally, apa pendapat Mas Denny tentang VisualMagz?

Akan lebih bagus dibuat Ezine beneran bro.. dalam bentuk pdf atau flipping.. sedangkan di website di isi artist pilihan saja. Dan jangan Lupa tetap eksis Oke.. Salut deh

Fresh For Death(Sukcerhead) aka Eno

Official Website    : http://www.freshfordeath.com

deviantART           : http://suckerhead.deviantart.com

BehanceNetwork : http://www.behance.net/suckerhead

Halo Mas, kenapa memilih freshfordeath sebagai brand/identitas? Kesannya kan serem?

Hemm langsung aja yah, lagi sok sibuk nih hehehehehe Brand? ok, sebetulnya itu reinkarnasi dari nama sebelumnya “SUCKERHEAD” tp terlalu weird artinya :D kebetulan saya masih muda belia konsep dari nama itu sih sederhana saja “Masih Muda Mari berkarya, jangan menyerah dulu atau jangan mati dulu”

Sejak kapan Mas tertarik dengan dunia desain?

Tertarik, mungkin sejak lulus SMA kali yah itu dikarenakan saya ingin masuk kuliah multimedia tetapi apa daya orang tua ga sanggup membiayai kuliah itu, jadi ya belajar sendiri dengan komputer teman.

Apakah Mas belajar di sekolah desain grafis atau belajar sendiri secara otodidak? Dan menurut pendapat Mas apa pro dan kontra dari kedua hal tersebut?

Kan sudah dijawab di no 2 :D, klo masalah pro kontra itu sebetulnya ya masing2 punya alasan menurut pengalaman saya sbg autodidak, kebanyakan seorang otodidak lebih kuat di ART basenya dibanding konsepnya nah klo yg sempet kuliah DKV atau sejenisnya biasanya kuat di COPY atau CONCEPTnya, oiya klo otodidak biasanya sangat idealis untuk artworknya dan sering juga di hire agency karena idealist nya itu.

Dalam desain Mas, style seperti apa yang dikembangkan?

Kalau style saya ga milih, tapi gw paling suka dengan bermain lighting style sih standar sebatas vektor dan digital art. Kenapa saya ga milih style karena itu hanya membatasi diri dan kurang berkembang.

Bagaimana proses kreatif Mas selama ini, mulai dari membuat konsep sampai jadi final artwork?

Biasanya sih turun brief, kebanyakan briefnya sudah menyertakan referensi dari artwork sebelumnya dan gw tinggal mengulangnya lagi dengan warna komposisi yg beda. sambil nunggu revisi biasanya facebookan hehehehehehe klo udah ok baru buat final artworknya dan kirim tagihan :D

Dalam proses kreatif Mas, biasanya inspirasinya dari mana?

Inspirasi biasanya datang dari mana aja, kehidupan sehari-hari, coba2, temen-temen internet sudah pasti lah.

Hal yang biasa Mas lakukan agar tetap bisa kreatif apa saja?

Terus belajar biarpun udah cape kerja, luangkan waktu minimal seminggu sekali untuk experiment.

Tools yang biasa Mas gunakan dalam proses kreatif apa saja?

Cuma 2 yang paling berasa Photoshop & illustrator

Siapa yang menjadi idola Mas di bidang desain grafis, dan beri tahu kami mengapa mengidolakan mereka, apa yang membuat mereka istimewa?

Klo dari Indo Tony Ariawan (area105.com) & Jogja Force Family hehehehe klo dari luar Pete Harison a.k.a Aeiko.net

Siapa saja yang pernah menjadi klien Mas?

Terakhir Panasonic, Indosat, Honda, Jans Food dan klien2 kecil lainya.

Apa salah satu tantangan terbesar yang pernah Mas hadapi dalam mengerjakan projek? Bagaimana akhirnya mengatasinya?

Deadline mepet, rokok abis, kopi abis, lupa makan, komputer crash!!! cara mengatasi kerjain buruan, jgn ngroko sama ngopi terus nanti ga kelar2, komputer restart klo masih gitu juga shutdown dulu tinggal makan biar ngaso komputernya hehehehehe.

Di antara sekian banyak portfolio yang sudah Mas hasilkan, mana yang paling berkesan? Mengapa?

Smua juga punya kesan sih smuanya seru dengan klien yg beda-beda karakternya smua jadi indah.

Menurut Mas, bagaimana prospek karir bidang disain grafis di Indonesia saat ini dan ke depan?

Untuk saat ini lagi maju2nya, dulu waktu saya masih SMA blo bisa nyalain komputer, anak sekarang dah jago2 pake software design cuman diluar sana lg krisis ekonomi jadi klien suka mikir2 klo mau kasih kerjaan misal dapetpun kecil biasanya.STOP NGEBAJAK karya plisss kasian yang ga pernah bajak.

Finally, apa pendapat Mas tentang VisualMagz?

Ok koq, tinggal di update lagi tutorial yang lain SEMANGAT VISUALMAGZ!!!

Bagi yang berbaik hati ingin mengkoding website kartunama ini silakan, tolong beritahu saya dan kita bisa bagikan gratis kepada para pembaca Jurus Grafis, mau sekalian di buat tutorial koding nya di blog kamu juga boleh. :) …

Mungkin Anda bertanya-tanya mengapa website menggunakan format kartunama? Seperti yang disampaikan oleh Richard di tutorialnya, sekarang ini website dengan format kartu nama sedang tren karena gaya visualnya yang biasanya minimalis dan to the point. Sehingga waktu loading yang di butuhkan lebih cepat di banding website portfolio biasa. So, selamat menikmati dan mencoba tutorial ini.

Langkah 1

Langkah pertama adalah mendownload template 960 Grid System dari situs resminya (http://960.gs/files/960_download.zip). 960 Grid System adalah CSS framework yang dikembangkan oleh Nathan Smith dan menggunakan lebar kolom 960 piksel. CSS framework ini memiliki 2 varian yaitu varian 12 kolom dengan lebar masing-masing kolom 60 piksel dan varian 16 kolom dengan lebar masing-masing kolom 40 piksel, dimana setiap kolomnya memiliki lebar 10 piksel.

Langkah 2

Setelah berhasil didownload, maka langkah berikutnya adalah memanggil 960 Grid System dari dokumen XHTML yang telah dibuat. Proses pemanggilan 960 Grid System dapat dilakukan dengan menambahkan tags berikut ini ke dalam bagian head dari dokumen XHTML*:

<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/text.css" />
<link rel="stylesheet" type="text/css" media="all" href="css/960.css" />

* Catatan:
Nilai atribut href tergantung lokasi file 960 Grid System dan file dokumen XHTML yang telah dibuat.
Pemanggilan 960 Grid System juga dapat dilakukan melalui dokumen CSS dengan menggunakan perintah @import seperti berikut:

@import url(css/reset.css);
@import url(css/text.css);
@import url(css/960.css);

Langkah 3

Layout dapat dibuat dengan terlebih dahulu memanggil class selector CSS container dengan format container_XX di mana XX menyatakan varian yang dipakai. Pada tutorial kali ini, varian yang akan digunakan adalah 12 kolom (mengikuti desain mockup yang telah di buat).  Pada kasus website dengan format kartu nama, kita tidak akan menggunakan ke-12 kolom yang ada. Pada kasus ini, kita hanya akan menggunakan 6 kolom sebagai kontainer dari website.

Karena hanya 6 kolom yang digunakan, maka kita perlu ’menghilangkan’ kolom sisanya, baik di kiri maupun kanan (ingat, container yang kita gunakan adalah 12 kolom). Hal ini dapat dilakukan dengan menambahkan nilai prefix_XX (prefix_3) dan suffix_XX (suffix_3) pada atribut class dari grid_6. Selain itu, kita juga harus menghilangkan margin yang ada di samping kiri dan kanan dari grid_6. Untuk melakukan hal ini, kita tinggal menambahkan nilai alpha dan omega. Berikut ini adalah code XHTML untuk grid system.

<div class="container_12">
    <div class="grid_6 alpha omega prefix_3 suffix_3">
        …
    </div>
</div>

Langkah 4

Setelah selesai menentukan layout dengan menggunakan 960 Grid System, maka langkah selanjutnya adalah mengidentifikasi struktur dari website. Pada contoh kasus ini, struktur website akan saya bagi menjadi 3, yaitu header, main dan footer. Header akan digunakan untuk konten menu. Main digunakan untuk konten utama (about, works, dan contact). Footer digunakan untuk konten footer (copyright).

Berikut ini adalah code XHTML untuk struktur konten website (diletakkan di dalam div grid_6).

<div class="header">
   ...
</div>
<div class="main">>
   ...
</div>
<div class="footer">>
   ...
</div>

Langkah 5

Langkah selanjutnya adalah membuat dokumen XHTML dan CSS rule untuk bagian header yang digunakan untuk konten menu. Untuk membuat konten menu, saya menggunakan unordered list. Unordered list ini akan diletakkan di dalam layer menu (div id=”menu”). Code XHTML-nya adalah sebagai berikut.

<div id="menu">
   <ul>
      <li><a href="index.html">About</a></li>
      <li><a href="works.html">Works</a></li>
      <li><a href="contact.html">Contact</a></li>
   </ul>
</div>

CSS rule yang dibuat untuk mengatur header ada beberapa bagian. Bagian pertama digunakan untuk mengatur area header yang diatur dengan menggunakan class selector header. CSS property yang digunakan adalah untuk mengatur margin, lebar, tinggi dan background dari bagian header. Code CSS rulenya adalah sebagai berkut.

.header {
    margin-top: 145px;
    background: url(../images/header-card.png) no-repeat;
    width: 500px;
    height: 60px;
}

Setelah membuat CSS rule untuk bagian header, maka langkah selanjutnya adalah membuat CSS rule untuk konten menu. Yang pertama adalah membuat CSS rule untuk layer menu.

#menu {
   width: 460px;
   margin-left: 20px;
   padding: 0px;
}

Kemudian dilanjutkan dengan membuat CSS rule untuk mengatur menu yang dibuat dengan unordered list. Agar list item yang ada penyajiannya tidak menurun (inline) seperti list item biasa, maka digunakan CSS property float dengan nilai left. Selain itu juga harus di atur agar list item tidak ditampilkan dengan bullet standar, dengan menambahkan CSS property list-style-type dan dengan nilai none.

ul {
   margin: 0px;
   padding: 0px;
}
ul li  {
   float: left;
   width: 134px;
   height: 31px;
   list-style-type: none;
   margin: 22px 0 0 15px;
   text-align: center;
   font: bold italic 15px Georgia;
   background: url(../images/bg-menu.png) no-repeat;
   padding-top: 4px;
}

Konten menu digunakan sebagai hyperlink, maka perlu diatur juga bagaimana CSS rule untuk menunjukkan menu yang sedang aktif. Code CSS-nya adalah sebagai berikut.

ul li a {
   text-decoration: none;
   color: #fff;
}
ul li.aktif {
   background: url(../images/bg-menu-aktif.png) no-repeat;
}

Hasil langkah ini adalah sebagai berikut

Langkah 6

Setelah bagian header selesai, langkah selanjutnya adalah membuat dokumen XHTML dan CSS rule untuk bagian main. Bagian ini akan digunakan untuk konten utama (about, works, dan contact). Untuk konten about terdiri dari elemen image, heading dan paragraf. Code XHTML untuk konten about adalah sebagai berikut.

<div id="content">
   <img src="images/merapi-at-sunset.jpg" alt="Merapi at Sunset" />
   <h1>Halo Teman!</h1>
   <p>Nama saya <strong>Richard Fang</strong>, sangat menikmati proses rancang website, khusus nya dari sisi tampilan antar muka dan penggunaan.</p>
   <p>Tidak bisa hidup tanpa Gmail, Google Reader dan Twitter. Sering menghabiskan waktu mengarungi samudra informasi.</p>
</div>

Bagian konten works digunakan untuk menampikan portfolio yang berupa gambar dan navigasi. Code XHTML-nya adalah sebagai berikut.

<div id="content">
   <img src="images/merapi-at-sunset.jpg" alt="Merapi at Sunset" />
   <img src="images/merapi-at-sunset.jpg" alt="Merapi at Sunset" />
   <img src="images/merapi-at-sunset.jpg" alt="Merapi at Sunset" />
   <img src="images/merapi-at-sunset.jpg" alt="Merapi at Sunset" />
   <div id="nav">
      <img src="images/btn-prev-off.png" alt="Prev" />
      <img src="images/btn-next.png" alt="Next" />
   </div>
</div>

Bagian konten contact digunakan untuk menampikan formulir bagi pengunjung jika ingin mengirimkan pesan. Code XHTML-nya adalah sebagai berikut.

<div id="content">
   <h1>Kirim Pesan</h1>
   <form>
      <p><label for="name">Name</label>
         <input type="text" size="46" /></p>
      <p><label for="email">Email</label>
         <input type="text" size="46" /></p>
      <p><label for="message">Message</label>
         <textarea rows="5" cols="35"></textarea></p>
      <input type="submit" value="Send!" />
   </form>
</div>

CSS rule yang dibuat untuk mengatur bagian main ada beberapa bagian. Bagian pertama digunakan untuk mengatur area main yang diatur dengan menggunakan class selector main. CSS property yang digunakan adalah untuk mengatur padding, lebar, tinggi dan background dari bagian main. Code CSS rulenya adalah sebagai berikut.

.main {
   background: url(../images/bg_content.png) no-repeat;
   height: 330px;
   width: 500px;
   padding-top: 10px;
}

Bagian selanjutnya adalah CSS rule untuk mengatur bagian layer content. Code CSS rulenya adalah sebagai berikut.

#content {
   background: url(../images/bg-content.png) no-repeat;
   width: 426px;
   margin-left: 35px;
   padding: 10px 20px 20px 20px;
}

Selanjutnya adalah CSS rule yang digunakan untuk mengatur elemen dari dokumen XHTML yang ada dimasing-masing dokumen. Untuk dokumen about terdiri dari image, heading dan paragraf. Code CSS rulenya adalah sebagai berikut.

img {
   width: 150px;
   height: 200px;
   border: 4px solid #fff;
   float: left;
   margin-right : 10px;
   margin-bottom: 4px;
   margin-top: 4px;
}

h1 {
   font: bold 36px Geogia;
   color: #c13a3a;
}

p{
   font: normal 14px Geogia;
   color: #989898;
   padding-right: 20px;
   margin: 14px;
}

strong {
   color: #000;
}

Untuk dokumen works terdiri dari image (thumbnail) dan navigasi. Code CSS rulenya adalah sebagai berikut.

.thumb {
   border: none;
   margin: 0px;
   padding: 4px;
   float: left;
   width: 90px;
   height: 222px;
}

#nav {
   clear: both;
   width: 426px;
   padding-top: 10px;
}

.left {
   width: 15px;
   height: 25px;
   float: left;
   border: none;
}

.right {
   width: 15px;
   height: 25px;
   float: right;
   border: none;
   margin-right: 35px;
}

Untuk dokumen contact terdiri dari elemen label, input, dan text area. Code CSS rulenya adalah sebagai berikut.

label {
   float: left;
   width: 70px;
}

input, textarea {
   padding: 3px;
   border: 1px solid #989898;
}

.button {
   border: none;
   float: right;
   margin-right: 40px;
   font: bold 16px Geogia;
   color: #fff;
   width: 75px;
   height: 32px;
   background: url(../images/bg-button.png) no-repeat;
}

Hasil dari langkah ini adalah sebagai berikut.

Langkah 7

Langkah terakhir adalah membuat dokumen XHTML dan CSS rule untuk bagian footer. Code XHTML untuk konten footer adalah sebagai berikut.

<div>
   <p>&copy; 2009 Jurus Grafis. All Rights Reserved.</p>
</div>

CSS rulesnya adalah sebagai berikut.

.footer p {
   margin-top: 10px;
   text-align: center;
   font: 14px Geogia;
   color: #989898;
}

Hasil akhirnya adalah sebagai berikut

Preview hasil tutorial dapat Anda lihat dengan mengklik di sini, dan untuk mendownload filenya silahkan klik di sini.