VISUALmagz: Your Creative Booster » Tutorial http://visualmagz.com VISUALmagz: Your Creative Booster Mon, 10 May 2010 10:57:16 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 Tutorial Dasar Membuat Theme WordPress http://visualmagz.com/tutorial/tutorial-dasar-membuat-theme-wordpress/ http://visualmagz.com/tutorial/tutorial-dasar-membuat-theme-wordpress/#comments Wed, 23 Dec 2009 15:46:12 +0000 sigit http://visualmagz.com/?p=252 Penggunaan Content Management System (CMS) untuk mengelola suatu website saat ini menunjukkan perkembangan yang sangat pesat. Hal ini mengakibatkan munculnya ‘profesi-profesi’ baru seperti CMS theme/template developer, CMS module/plugins/extension developer, CMS customization expert, dan lain-lain. Tutorial ini akan difokuskan pada bagiamana menjadi CMS theme/template developer, dimana CMS yang digunakan adalah WordPress. Tutorial ini akan memberikan kemampuan dasar bagi Anda untuk membuat sebuah theme bagi CMS WordPress. Jika nanti Anda sudah expert, maka Anda dapat memanfaatkan kemampuan Anda untuk memperoleh uang dengan menjual premium theme buatan Anda ke marketplace seperti WooThemes atau ThemeForest siapa tau Anda dapat memperoleh 40000US dolar dalam 3 bln.

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.

]]> http://visualmagz.com/tutorial/tutorial-dasar-membuat-theme-wordpress/feed/ 5 Desain Menu Dengan Fireworks http://visualmagz.com/web-design/desain-menu-dengan-fireworks/ http://visualmagz.com/web-design/desain-menu-dengan-fireworks/#comments Mon, 07 Dec 2009 08:10:31 +0000 den http://visualmagz.com/?p=248 Kali ini saya akan menjelaskan langkah-langkah mendesain sebuah menu website. Saya menggunakan Adobe Fireworks, software yang sudah saya pakai ± 3 tahun untuk mendesain website. Desain menu yang kita akan kita bahas ini bergaya modern. Sebagai referensi / inspirasi silahkan baca:

Hasil akhirnya:

Desain Menu Dengan Fireworks

Langkah Langkah sebagai berikut:

Langkah #1. Pertama-tama buatlah sebuah bar dengan “Rectangle Tool”
01

Langkah #2. Kemudian pilih [Gradient] – [Linear] – atur 2 warna gradasinya.
02

Langkah #3. Buatlah 2 buah garis horisontal, masing-masing height :1pixel. Salah satu berwarna lebih terang dan lainnya berwarna lebih gelap. Letakan kedua garis tersebut di bagian bawah bar. Untuk menghemat waktu, copy-paste 2 garis tadi lalu letakkan pula diatas bar.
03

Langkah #4. Ketikkan menu item yang diinginkan
04

Langkah #5. Sekarang kita harus membuat pemisah antara setiap menu item. Langkahnya serupa dengan #3, yaitu membuat 2 garis, salah satu berwarna lebih terang dan lainnya berwarna lebih gelap, hanya saja kali ini dengan posisi vertikal, masing-masing width:1pixel.
05

Langkah #6. Kita akan mulai membuat efek mouse hover.
Buatlah bar, menyerupai langkah #1 dengan width yang menyesuaikan salah satu menu item.
06

Langkah #7. Kemudian pilih [Gradient] – [Linear] – atur 2 warna gradasinya. Catatan: warna lebih gelap dari bar langkah #1.
07

Langkah #8. Membuat efek shadow sebanyak 2 kali, langkahnya sbb: [Filter] – [Shadow & Glow] – [Inner Glow].
08 08

Begini hasil sementara:
hasil sementara

Langkah #9. Sentuhan akhir adalah dengan memberi efek shadow yang diletakkan di bawah dan diatas menu bar.
09

Hasil akhirnya:

Sebuah design menu website sudah selesai!
Desain Menu Dengan Fireworks

Download file hasil akhir format .PNG Fireworks

ps: artikel selanjutnya akan dijelaskan tutorial mengubah desain menu ini menjadi css & xhtml

]]> http://visualmagz.com/web-design/desain-menu-dengan-fireworks/feed/ 6 Tutorial Desain Website Format Kartunama dengan 960 Grid System http://visualmagz.com/web-design/tutorial-desain-website-format-kartunama-dengan-960-grid-system/ http://visualmagz.com/web-design/tutorial-desain-website-format-kartunama-dengan-960-grid-system/#comments Mon, 26 Oct 2009 08:01:07 +0000 sigit http://visualmagz.com/?p=167 Tutorial ini merupakan kelanjutan dari tutorial yang sudah di buat oleh Richard Fang di situs Jurus Grafis dengan judul Merancang Desain Website Seperti Kartunama. Saya tertarik untuk menjawab permintaan Richard di akhir tutorialnya.

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.

]]> http://visualmagz.com/web-design/tutorial-desain-website-format-kartunama-dengan-960-grid-system/feed/ 15 Tutorial Membangun Layout Website dengan Grid System http://visualmagz.com/web-design/tutorial-membangun-layout-website-dengan-grid-system/ http://visualmagz.com/web-design/tutorial-membangun-layout-website-dengan-grid-system/#comments Tue, 28 Jul 2009 08:54:50 +0000 sigit http://visualmagz.com/?p=65 Salah satu tahap yang memakan waktu lama pada saat membangun sebuah website adalah ketika membuat desain visual website (mockup) dan mengkonversi desain visual tersebut ke dalam CSS dan XHTML. Pada tutorial yang terdahulu (Tutorial Dasar Desain Website dengan Grid System), telah dijelaskan bagaimana mendesain website menggunakan CSS Framework. CSS framework digunakan karena mampu mempercepat proses pembuatan desain visual website dan juga konversi desain visual website tersebut ke dalam CSS dan XHTML. Hal ini dikarenakan sudah ada panduan yang disediakan oleh CSS framework, baik ketika melakukan proses pembuatan desain visual maupun ketika mengkonversi desain visual tersebut ke dalam CSS dan XHTML. Tutorial ini akan menjelaskan langkah-langkah dasar membangun layout website dengan memanfaatkan CSS Framework (960 Grid System varian 12 kolom dengan lebar masing-masing kolom 60 piksel) dan XHTML. Desain Website yang akan dikonversi menjadi dokumen CSS dan XHTML adalah sebagai berikut:

VisualMagz Mockup dengan Grid System

VisualMagz Mockup dengan Grid System

Step 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.

Step 2
Stelah 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);

Step 3
Layout dapat dibuat dengan terlebih dahulu memanggil class selector CSS container dengan format container_XX di mana XX menyatakan varian yang dipakai (container_12). Setelah itu kita tinggal memanggil class selector CSS grid dengan format grid_XX untuk membuat kolom-kolomnya. Jika ingin menghilangkan margin kiri dari suatu kolom, dapat dilakukan dengan menambahkan alpha (grid_XX alpha). Sedangkan untuk menghilangkan margin kanan dapat dilakukan dengan menambahkan omega (grid_XX omega). Untuk membuat layout sesuai dengan desain yang telah dihasilkan pada tutorial sebelumnya, maka kode/tags XHTML-nya adalah sebagai berikut:


<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>

Kode/tags di atas sudah menyertakan atribut id untuk setiap bagian layout yang nantinya akan diatur style-nya melalui kode CSS.

Step 4
Setelah layout terbentuk, maka langkah selanjutnya adalah menambahkan elemen yang dibutuhkan ke dalam bagian dokumen XHTML dan mengatur style-nya melalui CSS. Untuk bagian header, elemen yang ditambahkan adalah image logo Visualmagz. Berikut ini adalah kode XHTML dan CSS untuk bagian header:

XHTML


<img src="images/visualmagz-logo.png" alt="VISUALmagz: Your Creative Booster" />

CSS


#header {
margin-top: 20px;
margin-bottom: 20px;
border-bottom: 5px solid #cc9966;
}

Untuk bagian delicious (sidenotes), elemen yang ditambahkan adalah heading dan list untuk menampilkan item sidenotes. Berikut ini adalah kode XHTML dan CSS untuk bagian delicious:

XHTML


h2>Delicious</h2>
<ul>
<li><a href="#">Lorem Ipsum</a><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque dictum. Fuscerisus massa, posuere at</p></li>
<li><a href="#">Lorem Ipsum</a><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque dictum. Fuscerisus massa, posuere at</p></li>
<li><a href="#">Lorem Ipsum</a><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque dictum. Fuscerisus massa, posuere at</p></li>
<li><a href="#">Lorem Ipsum</a><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque dictum. Fuscerisus massa, posuere at</p></li>
<li><a href="#">Lorem Ipsum</a><p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque dictum. Fuscerisus massa, posuere at</p></li>
</ul>

CSS


#delicious {
float: left;
}
#delicious h2 {
color: #6b000a;
margin: 0px;
padding: 0px;
font: normal 20px "Trebuchet MS", Arial, Helvetica, sans-serif;
border-bottom: 3px solid #cccccc;
}
#delicious ul {
margin:0px;
padding:0px;
background-color: #f0f0f0;
border-bottom: 3px solid #cccccc;
}
#delicious ul li {
margin: 0px;
padding: 5px 5px 0 10px;
font: bold 12px Arial, Helvetica, sans-serif;
text-align:left;
list-style:none;
display:block;
color: #000;
}
#delicious ul li a {
text-decoration:none;
color:#000000;
}
#delicious ul li p {
padding: 0 0 5px 0;
font: normal 11px Arial, Helvetica, sans-serif;
border-bottom: 1px solid #ffffff;
}

Untuk bagian content, elemen yang ditambahkan adalah heading untuk judul artikel, keterangan tentang publikasi artikel (meta data), thumbnail image yang mewakili artikel, dan paragraph yang berisi artikel. Berikut ini adalah kode XHTML dan CSS untuk bagian content:

XHTML


<h2>Lorem Ipsum Dolor Sit Amet</h2>
<div class="meta">Published: 26 March 2008 - Category: Music</div>
<div class="thumb">
<img src="images/thumbnail.png" />
</div>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur ac elit cursus eros blandit cursus. Mauris non justo. Etiam interdum euismod nisi. Mauris nec turpis. Nunc eleifend diam sed nisl. Vestibulum convallis sagittis erat. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Nulla at ipsum. Nullam odio sem, pellentesque vitae, fermentum eu, feugiat eget, felis. Pellentesque habitant morbi</p>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur ac elit cursus eros blandit cursus. Mauris non justo. Etiam interdum euismod nisi. Mauris nec turpis. Nunc eleifend diam sed nisl. Vestibulum convallis sagittis erat.</p>

CSS


#content {
float: left;
}
#content h2 {
margin: 0px;
padding: 0px;
font: normal 20px "Trebuchet MS", Arial, Helvetica, sans-serif;
border-bottom: 3px solid #cccccc;
width: auto;
color: #6b000a;
display:block;
}
#content .meta {
font: normal 11px Arial, Helvetica, sans-serif;
color: #999999;
border-bottom: 1px solid #cccccc;
padding: 5px 0 5px 10px;
background-color: #f0f0f0;
}
#content p {
font: normal 12px Arial, Helvetica, sans-serif;
line-height: 150%;
}
#content .thumb {
margin: 10px 0 5px 0;
padding: 0px;
}
#content .thumb img {
width: 120px;
float: left;
margin-right: 10px;
padding: 4px;
border: 1px solid #cccccc;
}

Untuk bagian gallery, elemen yang ditambahkan adalah heading dan gambar. Berikut ini adalah kode XHTML dan CSS untuk bagian gallery:

XHTML


<h2>Galleries</h2>
<div class="separator"></div>
<div class="gallery_thumb">
<img src="images/thumbnail.png" />
<img src="images/thumbnail.png" />
<img src="images/thumbnail.png" />
</div>

CSS


#gallery {
float: left;
}
#gallery h2 {
margin: 0px;
padding: 0px;
font: normal 20px "Trebuchet MS", Arial, Helvetica, sans-serif;
color: #6b000a;
display:block;
}
#gallery .separator {
height: 32px;
background: transparent url('../images/separator.png') no-repeat top left;
}
#gallery .gallery_thumb {
margin: 10px 0 5px 0;
padding: 0px;
}
#gallery .gallery_thumb img {
width: 190px;
float: left;
margin: 4px 10px 0 0;
padding: 4px;
border: 1px solid #cccccc;
}

Untuk bagian footer, elemen yang ditambahkan adalah paragraph. Berikut ini adalah kode XHTML dan CSS untuk bagian footer:

XHTML


<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Curabitur ac elit cursus eros blandit cursus.<br />
&copy; 2009 VISUALmagz.com</p>

CSS


#footer {
margin: 10px 0 0 10px;
height: 88px;
background-color: #cc9966;
}

#footer p {
padding: 25px;
font: normal 12px Arial, Helvetica, sans-serif;
line-height: 150%;
}

Hasil Akhir
Hasil akhir dari tutorial ini dapat dilihat di sini.

]]> http://visualmagz.com/web-design/tutorial-membangun-layout-website-dengan-grid-system/feed/ 9 Tutorial Dasar Desain Website dengan Grid System http://visualmagz.com/web-design/tutorial-dasar-desain-website-dengan-grid-system/ http://visualmagz.com/web-design/tutorial-dasar-desain-website-dengan-grid-system/#comments Tue, 07 Jul 2009 10:23:19 +0000 sigit http://visualmagz.com/?p=23 Tutorial ini akan menjelaskan langkah-langkah dasar menggunakan Adobe Fireworks CS3 untuk membuat mockup suatu website dengan memanfaatkan 960 Grid System.

Hasil Akhir
Hasil akhir dari tutorial ini dapat dilihat pada gambar berikut:

VisualMagz Mockup dengan Grid System

Step 1
Langkah pertama adalah mendownload template 960 Grid System dari situs resminya (Download). 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. Pada tutorial ini akan menggunakan template Fireworks yang varian 12 kolom.

960 Grid System 12 Column

Step 2
Langkah berikutnya adalah membuka file 960_grid_12_col.png yang ada di folder templates – fireworks dengan menggunakan Adobe Fireworks CS3. Sebelum kita menambahkan objek desain yang akan digunakan dalam tutorial ini, kita simpan terlebih dahulu melalui File – Save As kemudian isikan tut-mockup-960gs-basic.png pada bagian File Name dan tekan Save.

Save As Dialog Window

Step 3
Langkah selanjutnya adalah membuat bagian header dari mockup website. Bagian header pada tutorial ini hanya terdiri dari objek logo saja. Langkah untuk menambahkan logo adalah dengan menggunakan menu File – Import dan pilih file visualmagz-logo.png kemudian pilih Open.

Import Dialog Window

Setelah itu, kita harus menempatkan objek logo tersebut dengan melakukan drag sesuai dengan posisi dan ukuran yang diinginkan. Pada tutorial ini, ukurannya adalah 220×63 piksel dan ditempatkan pada koordinat X:40,Y:30. Setelah logo kita tempatkan, langkah berikutnya adalah menambahkan rectangle berukuran 940×4 piksel dengan warna #B39A79 menggunakan Rectangle tool dan ditempatkan pada koordinat X:40,Y:94. Untuk mengatur properti dari objek dapat dilakukan dengan mengisikan nilai-nilai tersebut pada Properties Windows.

Property Window

Hasil dari langkah ini adalah sebagai berikut.

Logo Import Result

Step 4
Langkah selanjutnya adalah membuat bagian sidebar sebelah kiri dari mockup website. Bagian sidebar ini akan digunakan untuk Sidenotes dan terdiri dari objek teks untuk heading dan item sidenotes serta rectangle untuk border dan background. Untuk membuat teks Sidenotes dan item sidenotes digunakan Text tool, sedangkan untuk membuat border dan background digunakan Rectangle tool. Property untuk teks Sidenotes menggunakan font Trebuchet MS, size 20, warna #6B000A, dan koordinat X:40, Y:112. Item sidenotes menggunakan font Arial Bold, size 12, dan koordinat X:50, Y:158 untuk judul item dan Arial, size 11, dan koordinat X:50, Y:179 untuk deskripsi item yang pertama (NB: untuk item sidenotes lainnya, penempatannya menyesuaikan).

Untuk background kita buat rectangle berukuran 220×600 piksel dengan warna #F0F0F0 dan kita posisikan pada koordinat X:40, Y:139. Objek border heading Sidenotes menggunakan rectangle berukuran 220×3 piksel dengan warna #CCCCCC, sedangkan untuk border separator item sidenotes menggunakan rectangle berukuran 200×1 dengan warna #FFFFFF.

Sidenotes

Agar tidak perlu membuat satu per satu item sidenotes, langkah yang dapat dilakukan adalah memilih item judul, deskripsi, dan border separator yang telah dibuat dengan kombinasi klik mouse dan tombol Shift kemudian klik kanan dan pilih menu Group. Setelah proses grouping selesai dilakukan, maka kita tinggal mengcopy sebanyak yang kita inginkan.

Item Grouping

Step 5
Bagian Header dan Sidenotes telah selesai dibuat, langkah selanjutnya adalah membuat bagian utama yang akan digunakan untuk konten berita atau post dari websites. Konten berita atau post terdiri dari objek Judul, meta data (dipublikasikan kapan dan dikategori apa), gambar thumbnail, dan teks isi konten berita atau post. Langkah untuk menambahkan objek teks seperti pada langkah sebelumnya yaitu menggunakan Text tool, sedangkan untuk menambahkan gambar thumbnail menggunakan menu File – Import seperti pada saat menambahkan objek logo. Background dan border bagian meta data ditambahkan dengan menggunakan Rectangle tool.
Property masing-masing objek dapat diatur melalui Properties Windows. Property objek judul sama dengan property untuk objek teks Sidenotes, sedangkan objek teks meta data menggunakan Arial, size 11 dan objek teks isi konten Arial , size 12. Objek gambar thumbnail berukuran 120×120 piksel dan bordernya menggunakan objek rectangle berukuran 130×130 piksel. Property koordinat menyesuaikan dengan area yang ada dan jangan lupa memperhatikan grid dalam penempatan setiap objek. Proses pembuatan item berita atau post berikutnya dapat menggunakan konsep grouping seperti langkah sebelumnya. Hasil akhir dari langkah ini adalah sebagai berikut.

Header and Sidenotes Result

Step 6
Langkah berikutnya adalah menambahkan bagian Galleries pada sidebar kanan. Prosesnya sama dengan pada saat menambahkan objek teks pada langkah sebelumnya. Hal yang sama juga berlaku untuk proses menambahkan objek gambar atau photo (termasuk menambahkan objek image color pallete) yaitu dengan menggunakan File – Import. Yang berbeda hanya property ukuran gambar atau photonya yaitu 190×155 piksel dengan rectangle untuk border berukuran 200×165 piksel.

Gallery

Step 7
Langkah terakhir adalah menambahkan bagian Footer yang terdiri dari objek teks dan rectangle. Prosesnya juga sama dengan pada saat menambahkan objek teks maupun rectangle pada langkah sebelumnya. Warna yang digunakan untuk objek rectangle adalah #B39A79.

Footer

]]> http://visualmagz.com/web-design/tutorial-dasar-desain-website-dengan-grid-system/feed/ 1