konversi psd ke html5

Berikut ini adalah design yang akan kita konversi ke HTML5:

Sebelum membuat markup-nya, kita bisa menggunakan online tool untuk mempermudah pemakaian @font-face. Tool yang biasa saya gunakan adalah @font-face generator dari fontsquirrel. Custom fonts yang dipakai dalam website ini adalah: Ballpark, Jura, dan Titillium. Tutorial ini juga menggunakan 960.gs CSS Framework yang bisa didownload di sini.

Basic Mark Up

Untuk kerangka markup secara sederhana bisa kita mulai dengan kode berikut:

01
02<html lang="en">
03<head>
04 <meta charset="utf-8">
05 <title>RumahDot Personal Websitetitle>
06 <meta name="description" content="It's Rumahdot's home sweet home">
07 <link rel="shortcut icon" href="favicon.ico">
08 <link rel="stylesheet" href="css/general.css">
09 <script src="js/libs/jquery-1.4.2.min.js">script>
10 <script src="js/libs/modernizr-1.6.min.js">script>
11head>
12 
13<body>
14 
15 
16 <script src="js/script.js">script>
17body>
18html>

Doctype yang singkat sebagai ciri khas HTML5:

1

Pada HTML5 beberapa atribut tidak perlu digunakan dan merupakan kode yang valid seperti:

Meta Charset

`1`	`<meta` `charset="utf-8">`

Link dan Script Tanpa Atribute Type

1<link rel="stylesheet" href="css/general.css">
2 <script src="js/libs/jquery-1.4.2.min.js">script>

Library Javascript yang digunakan di antaranya adalah Modernizr untuk memastikan browser-browser lama bisa menerjemahkan elemen-elemen HTML5 dengan benar. Dan untuk konten sendiri, kita akan menggunakan markup sebagai berikut:

01<header role="banner">
02 
03 header>
04 <div>
05 
06 div>
07 
08 <nav>
09 
10 nav>
11 
12 <div>
13 
14 div>
15 
16 <section>
17 
18 section>
19 <article>
20 
21 article>
22 
23 <footer>
24 <section>
25 
26 section>
27 <section>
28 
29 section>
30 footer>

Ada beberapa tag HTML5 yang kita pakai, meliputi:
Header
Elemen ini digunakan sebagai ‘header’ pada sebuah dokumen atau bagian dokumen yang biasanya mengandung heading dan subheading. Tapi selain itu bisa juga digunakan sebagai area untuk menempatkan informasi versi atau tanggal publikasi sebuah post.
Di kode yang saya tulis di atas, bisa dilihat ada atribut role yang kita gunakan sebagai landmark roles.
Nav
Elemen ini memuat kumpulan link yang menuju pada dokumen lain, atau bagian lain dalam sebuah dokumen.
Section
Merupakan bagian pada sebuah dokumen HTML5 yang memuat kumpulan dari beberapa konten sejenis. Biasanya mengandung elemen header, dan atau sebuah elemen footer. Anda bisa menggunakan HTML Outliner untuk mengetahui penggunaan section secara tepat, karena elemen ini seharusnya memiliki sebuah heading yang ‘natural’ sebagai identifikasi setiap section pada sebuah dokumen.
Article
Bagian ini hampir sama dengan section, memuat beberapa konten sejenis, tetapi yang membedakan adalah bagian ini bersifat: bisa berdiri sendiri (independen).
Barangkali sering kita jumpai beberapa penjelasan yang membingungkan dan rancu antara elemen section dan article. Tapi selama ini saya menitikberatkan pada poin independen tersebut di atas. Jadi bayangkan bila sebuah bagian dokumen dipisahkan dari bagian-bagian lain dalam dokumen tersebut. Dan bagian ini juga bersifat reusable dan distributable, yang ‘masuk akal’ jika dibaca melalui sebuah feed reader.
Footer
Bagian yang merupakan ‘footer’ dokumen atau bagian dokumen, yang biasanya mengandung metadata seperti link terkait, informassi kontak dan sebagainya. Perlu diingat bahwa elemen header maupun footer tidak harus mengacu pada lokasi/penempatan elemen ini di mana masih banyak yang beranggapan bahwa pada sebuah dokumen hanya memiliki satu header dan satu footer. Kenyataanya adalah setiap section atau article pada dokumenpun bisa juga mengandung elemen header atau footer.

Content Markup

Kita mulai dengan bagian header dan form pencarian:

1<header role="banner">
2 <h1>Famous Meh1>
3 header>
4 <div>
5 <form action="#" role="search">
6 <input type="text" name="search" value="Type a keyword and hit enter" />
7 form>
8 div>

Kemudian Navigasi Utama:

1<nav>
2 <ul>
3 <li><a href="#">Homea>li>
4 <li><a href="#">Abouta>li>
5 <li><a href="#">Gallerya>li>
6 <li><a href="#">Media Appearancea>li>
7 <li><a href="#">Contacta>li>
8 ul>
9 nav>

Bagian berikutnya adalah home slider:

01<div>
02 <div id="slider">
03 <ul>
04 <li>
05 <span><img src="images/pic_1.jpg" alt="Picture 1" />span>
06 <p><strong>Lorem Ipsum Do Lor Sit Ametstrong><br />Contrary to popular believes, lorem ipsum is not simply random text.p>
07 li>
08 ul>
09 <div id="slider-paging"> div>
10 div>
11 div>

Untuk slider kita menggunakan plugin jQuery Cycle-nya Pakdhe Malsup.
Bagian About Me:

01<div>
02 <section>
03 <h2>About Meh2>
04 <span><img src="images/ava_1.jpg" alt="Avatar 1" />span>
05 <p>Contrary  to popular belief, Lorem Ipsum is not simply random text. It has roots  in a piece of classical Latin literature from 45 BC, making it over 2000  years old. Richard McClintock … <a href="#">Continue Reading →a>p>
06 
07 <div id="social-links">
08 <h3><img src="images/stay-connected.png" alt="Stay Connected" />h3>
09 <ul>
10 <li><a href="#">Facebooka>li>
11 <li><a href="#">Twittera>li>
12 <li><a href="#">Myspacea>li>
13 <li><a href="#">Flickra>li>
14 <li><a href="#">Linkedina>li>
15 <li><a href="#">Skypea>li>
16 ul>
17 div><br />
18 section>
19 div>

Bagian Recent News:

01<div>
02 <article>
03 <h2>Recent Newsh2>
04 <div id="recent-news">
05 <ul>
06 <li>
07 <span>5span>
08 <div>
09 <h3>Songs of Desperation, I Played Them for Youh3>
10 <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical … <a href="#">Continue Reading →a>p>
11 div>
12 li>
13 <li>
14 <span>9span>
15 <div>
16 <h3>Sweet Disposition, Never Too Soonh3>
17 <p>Contrary to popular belief, Lorem Ipsum is not simply random text. It has roots in a piece of classical … <a href="#">Continue Reading →a>p>
18 div>
19 li>
20 ul>
21 <div id="news-paging"> div>
22 div><br />
23 article>
24 div>

Dan kemudian kita mulai untuk membuat markup footer, yang meliputi:
Footer Related Links:

01<section>
02 <h2><img src="images/sitemap.png" alt="Sitemap" />h2>
03 <ul>
04 <li><a href="#">Homepagea>li>
05 <li><a href="#">Recent Newsa>li>
06 <li><a href="#">About Mea>li>
07 <li><a href="#">Contacta>li>
08 <li><a href="#">Gallerya>li>
09 ul>
10 section>

Dan Contact Information:

01<section>
02 <h2><img src="images/contact-information.png" alt="Contact Information" />h2>
03 <div id="">
04 <div>
05 <p><span>A Very Long Stspan>,
06 <span> Hidden Cityspan>,
07 <span> Whatthestatespan>
08 <span> 89247span>p>
09 div>
10 <div>Phone: <span>+6221 563 5666span>div>
11 <div>Email: <a href="mailto:you@mine.com">you@mine.coma>div>
12 div>
13 section>

Bila Anda ingin menggunakan markup sehingga data kontak bisa diekstrak ataupun memiliki makna yang lebih semantic, Anda bisa mencoba Microformats.
Untuk styling dasar kita membuat satu file bernama general.css yang berisi kode berikut:

1@import url('reset.css');
2@import url('960.css');
3 
4article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
5 display:block;
6}

Karena menggunakan framework 960.css kita perlu mengimport file-file CSS yang diperlukan seperti reset.css dan 960.css. Kemudian untuk elemen-elemen HTML5 kita perlu menambahkan property: value → display: block agar browser lama bisa membaca tag-tag tersebut sebagai block elements.
Sejauh ini kita telah membuat markup dan style dasar yang hasilnya seperti ini.
Kemudian kita membuat styling untuk keseluruhan markup:

001body {
002 background: #EEEEEE url('../images/body-bg.png');
003 font-family: Arial, sans-serif;
004 line-height: 1.3em;
005 overflow-x: hidden
006}
007 
008p {
009 font-size: 12px
010}
011 
012a {
013 text-decoration: none
014}
015 
016a:hover {
017 text-decoration: underline
018}
019 
020/** Header **/
021 
022.site-header, .search {
023 padding: 30px 0
024}
025 
026.site-header h1 {
027 font: normal 39px Jura, Georgia, sans-serif;
028 text-shadow: 1px 1px 1px #FFFFFF
029}
030 
031.search form {
032 float: right;
033 margin-top: 5px
034}
035 
036.search form input {
037 padding: 7px 25px 9px 9px;
038 width: 190px;
039 background: #FFFFFF url('../images/icon-search.png') no-repeat 97% 50%;
040 font-size: 12px;
041 color: #CCCCCC;
042 border: none;
043 border-radius: 5px;
044 -moz-border-radius: 5px;
045 -webkit-border-radius: 5px
046}
047 
048/** End Header **/
049 
050/** Top Navigation **/
051 
052.top-nav {
053 background: url('../images/top-nav-bg.png') repeat-x left top;
054 height: 55px
055}
056 
057.top-nav ul {
058 float: left;
059 margin-top: 21px
060}
061 
062.top-nav ul li {
063 float: left
064}
065 
066.top-nav ul a {
067 display: inline-block;
068 float: left;
069 margin: 0 25px;
070 font: normal 13px Titillium, Arial, sans-serif;
071 text-transform: uppercase;
072 color: #999999
073}
074 
075.top-nav ul a:hover {
076 text-decoration: none;
077 color: #333333;
078 border-bottom: 1px dotted #333333
079}
080 
081/** End Top Navigation **/
082 
083/** Slider **/
084 
085.slider-wrap {
086 position: relative;
087 background: url('../images/shadow-1.png') no-repeat center bottom;
088 padding-bottom: 20px;
089 margin-top: 30px;
090 margin-bottom: 30px
091}
092 
093#slider {
094 background: #FFFFFF;
095 position: relative;
096 padding-top: 9px
097}
098 
099#slider ul {
100 width: 922px;
101 height: 443px;
102 margin: 0 auto;
103 overflow: hidden
104}
105 
106.slider-text {
107 color: #cccccc;
108 margin: 9px 0;
109 font: normal 13px Titillium, Arial, sans-serif
110}
111 
112.slider-text strong {
113 color: #333333;
114 text-transform: uppercase;
115 font-weight: normal
116}
117 
118/** End Slider **/
119 
120/** Sub Content **/
121 
122.sub-content {
123 padding-bottom: 13px;
124 background: url('../images/shadow-2.png') no-repeat center bottom;
125 position: relative;
126 margin-bottom: 30px
127}
128 
129.sub-about, .sub-news {
130 background: #FFFFFF;
131 padding: 9px;
132 height: 256px
133}
134 
135.sub-about h2, .sub-news h2 {
136 font: bold 29px Ballpark, Georgia, serif;
137 padding: 9px 0;
138 margin-bottom: 15px;
139 border-bottom: 1px dotted #cccccc;
140 text-shadow: 1px 1px 1px #cccccc
141}
142 
143/** End Sub Content **/
144 
145/** About **/
146 
147.avatar {
148 width: 80px;
149 height: 80px;
150 padding: 5px;
151 border: 1px solid #eeeeee;
152 float: left
153}
154 
155.about-text {
156 width: 300px;
157 margin-left: 9px;
158 margin-top: -5px;
159 float: left
160}
161 
162.about-text a {
163 color: #23C3F8;
164 font-style: italic
165}
166 
167#social-links {
168 float: left;
169 margin-top: 15px
170}
171 
172#social-links ul {
173 float: left
174}
175 
176#social-links ul li {
177 float: left
178}
179 
180#social-links ul a {
181 display: inline-block;
182 width: 32px;
183 height: 32px;
184 margin-right: 9px;
185 text-indent: -9999px;
186 float: left
187}
188 
189.links-fb {
190 background: url('../images/icon-socials.png') no-repeat 0 0
191}
192 
193.links-twitter {
194 background: url('../images/icon-socials.png') no-repeat 0 -32px
195}
196 
197.links-flickr {
198 background: url('../images/icon-socials.png') no-repeat 0 -64px
199}
200 
201.links-myspace {
202 background: url('../images/icon-socials.png') no-repeat 0 -96px
203}
204 
205.links-linkedin {
206 background: url('../images/icon-socials.png') no-repeat 0 -128px
207}
208 
209.links-skype {
210 background: url('../images/icon-socials.png') no-repeat 0 -160px
211}
212 
213/** End About **/
214 
215/** Recent News **/
216 
217#recent-news {
218 position: relative;
219 float: left
220}
221 
222#recent-news ul {
223 float: left
224}
225 
226#recent-news li {
227 float: left
228}
229 
230.comments {
231 width: 42px;
232 height: 34px;
233 background: url('../images/icon-comment.png') no-repeat center;
234 float: left
235}
236 
237.comments span{
238 display: inline-block;
239 width: 42px;
240 margin-top: 4px;
241 text-align: center;
242 font: normal 18px Ballpark, Georgia, serif
243}
244 
245.news-item {
246 width: 375px;
247 margin-left: 15px;
248 margin-bottom: 15px;
249 float: left
250}
251 
252.news-item h3 {
253 font: bold 13px Arial, sans-serif
254}
255 
256.news-item a {
257 color: #23C3F8;
258 font-style: italic
259}
260 
261/** End Recent News **/
262 
263/** Sitemap **/
264 
265.sitemap h2, .contact-info h2 {
266 margin-bottom: 9px
267}
268 
269.sitemap {
270 position: relative;
271 padding-bottom: 30px
272}
273 
274.sitemap ul {
275 width: 300px;
276 float: left;
277}
278 
279.sitemap ul li {
280 width: 150px;
281 float: left
282}
283 
284.sitemap ul a {
285 font: normal 13px Titillium, Arial, sans-serif;
286 color: #BBBBBB
287}
288 
289/** End Sitemap **/
290 
291/** Contact Information **/
292 
293.contact-info p, .contact-info a {
294 font: normal 13px Titillium, Arial, sans-serif;
295 color: #BBBBBB;
296 line-height: 1.5em
297}
298 
299/** End Contact Information **/
300 
301@font-face {
302 font-family: 'Jura';
303 src: url('wfs/jura-webfont.eot');
304 src: local('?'), url('wfs/jura-webfont.woff') format('woff'), url('wfs/jura-webfont.ttf') format('truetype'), url('wfs/jura-webfont.svg#webfontndntrgZk') format('svg');
305 font-weight: normal;
306 font-style: normal;
307}
308 
309@font-face {
310 font-family: 'Ballpark';
311 src: url('wfs/ball_park_by_oopsfaboulous-webfont.eot');
312 src: local('?'), url('wfs/ball_park_by_oopsfaboulous-webfont.woff') format('woff'), url('wfs/ball_park_by_oopsfaboulous-webfont.ttf') format('truetype'), url('wfs/ball_park_by_oopsfaboulous-webfont.svg#webfontjWLDzJVm') format('svg');
313 font-weight: normal;
314 font-style: normal;
315}
316 
317@font-face {
318 font-family: 'Titillium';
319 src: url('wfs/titilliumtext250wt-webfont.eot');
320 src: local('?'), url('wfs/titilliumtext250wt-webfont.woff') format('woff'), url('wfs/titilliumtext250wt-webfont.ttf') format('truetype'), url('wfs/titilliumtext250wt-webfont.svg#webfontlIqANnt2') format('svg');
321 font-weight: normal;
322 font-style: normal;
323}

Beberapa property CSS3 kita gunakan, seperti text-shadow, border-radius, dan juga font-face seperti yang saya jelaskan di bagian awal tutorial ini. Hasil sementara bisa dilihat di sini.
Berikutnya kita mulai masuk ke bagian javascriptnya dengan menggunakan jQuery.
Buat file baru bernama script.js:

1$(document).ready(function(){
2 
3}

Bagian pertama kita mulai dengan home slider. Karenan menggunakan jQuery cycle, maka kita hanya perlu menuliskan fungsinya sebagai berikut:

01$(function(){
02 $('#slider ul').cycle({
03 timeout: 5000,
04 fx:      'fade',
05 pager:   '#slider-paging',
06 pause:   0,
07 cleartypeNoBg: true,
08 pauseOnPagerHover: 0
09 });
10 });

Kemudian pada CSS nya kita sesuaikan dengan menambah baris sebagai berikut untuk pengaturan slider paging:

01#slider-paging {
02 position: absolute;
03 bottom: 13px;
04 right: 9px;
05 z-index: 9999
06}
07 
08#slider-paging a {
09 display: block;
10 width: 13px;
11 height: 13px;
12 overflow: hidden;
13 margin-right: 5px;
14 float: left;
15 text-indent: -9999px;
16 background: url('../images/slider-links.png') no-repeat 0 0
17}
18 
19#slider-paging a:hover, #slider-paging a.activeSlide {
20 background: url('../images/slider-links.png') no-repeat 0 -13px
21}

Begitu juga dengan slider untuk Recent News kita gunakan fungsi sama seperti sebelumnya:

01$(function(){
02 $('#recent-news ul').cycle({
03 timeout: 0,
04 fx:      'fade',
05 pager:   '#news-paging',
06 pause:   0,
07 cleartypeNoBg: true,
08 pauseOnPagerHover: 0
09 });
10 });

Lalu sesuaikan CSSnya sebagai berikut:

01#news-paging {
02 position: absolute;
03 bottom: -25px;
04 right: 15px
05}
06 
07#news-paging a {
08 display: block;
09 width: 17px;
10 height: 17px;
11 overflow: hidden;
12 margin-left: 5px;
13 text-indent: -9999px;
14 float: left;
15 background: url('../images/recent-nav.png') no-repeat 0 0
16}
17 
18#news-paging a+a {
19 background: url('../images/recent-nav.png') no-repeat 0 -17px
20}

Kemudian fungsi berikut adalah untuk efek Clear Input pada form pencarian:

1$.fn.clearInput = function(){
2 var obj = $(this);
3 $.data(this, 'default', obj.val())
4 var defaultvalue = $.data(this, 'default');
5 function clear() { if(obj.val()==defaultvalue) obj.val('') }
6 function reset() { if(obj.val()=='') obj.val(defaultvalue) }
7 $(this).focus(clear).blur(reset);
8 }

Secara singkat konsepnya adalah: menyimpan value yang kita isikan sebelumnya sebagai nilai default menggunakan metode jQuery.data, kemudian membuat dua fungsi baru yaitu clear untuk membersihkan isian input pencarian jika value-nya sama dengan default, dan fungsi reset untuk mengembalikan nilai default jika value tidak tersedia. Kemudian memanggil fungsi clear pada event focus dan fungsi reset pada event blur. Terakhir, kita panggil fungsi di atas dengan cara sebagai berikut: