Menkonversi Personal Website Sederhana dari PSD ke HTML5 (Bagian 2)
Tutorial berikut ini adalah lanjutan dari tutorial sebelumnya dan merupakan bagian terakhir dimana kita akan membuat markup dengan HTML5 beserta beberapa fungsi jQuery untuk penambahan UX.
Dalam tutorial kali ini akan membantu memulai penggunaan HTML5 pada website, dengan beberapa tag HTML5 yang akan sering kita jumpai nantinya, seperti header, footer, nav, section, dan article.
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:
<!DOCTYPE html> <html lang="en"> <head> <meta charset="utf-8"> <title>RumahDot Personal Website</title> <meta name="description" content="It's Rumahdot's home sweet home"> <link rel="shortcut icon" href="favicon.ico"> <link rel="stylesheet" href="css/general.css"> <script src="js/libs/jquery-1.4.2.min.js"></script> <script src="js/libs/modernizr-1.6.min.js"></script> </head> <body> <!-- Content Here --> <script src="js/script.js"></script> </body> </html>
Doctype yang singkat sebagai ciri khas HTML5:
<!DOCTYPE html>
Pada HTML5 beberapa atribut tidak perlu digunakan dan merupakan kode yang valid seperti:
Meta Charset
<meta charset="utf-8">
Link dan Script Tanpa Atribute Type
<link rel="stylesheet" href="css/general.css"> <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:
<header role="banner"> <!-- Header Title --> </header> <div> <!-- Search Form --> </div> <nav> <!-- top nav --> </nav> <div> <!-- Slider Banner --> </div> <section> <!-- About Me --> </section> <article> <!-- Recent News --> </article> <footer> <section> <!-- Site map --> </section> <section> <!-- Contact Information --> </section> </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:
<header role="banner"> <h1>Famous Me</h1> </header> <div> <form action="#" role="search"> <input type="text" name="search" value="Type a keyword and hit enter" /> </form> </div>
Kemudian Navigasi Utama:
<nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">About</a></li> <li><a href="#">Gallery</a></li> <li><a href="#">Media Appearance</a></li> <li><a href="#">Contact</a></li> </ul> </nav>
Bagian berikutnya adalah home slider:
<div> <div id="slider"> <ul> <li> <span><img src="images/pic_1.jpg" alt="Picture 1" /></span> <p><strong>Lorem Ipsum Do Lor Sit Amet</strong><br />Contrary to popular believes, lorem ipsum is not simply random text.</p> </li> </ul> <div id="slider-paging"> </div> </div> </div>
Untuk slider kita menggunakan plugin jQuery Cycle-nya Pakdhe Malsup.
Bagian About Me:
<div> <section> <h2>About Me</h2> <span><img src="images/ava_1.jpg" alt="Avatar 1" /></span> <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> <div id="social-links"> <h3><img src="images/stay-connected.png" alt="Stay Connected" /></h3> <ul> <li><a href="#">Facebook</a></li> <li><a href="#">Twitter</a></li> <li><a href="#">Myspace</a></li> <li><a href="#">Flickr</a></li> <li><a href="#">Linkedin</a></li> <li><a href="#">Skype</a></li> </ul> </div><br /> </section> </div>
Bagian Recent News:
<div> <article> <h2>Recent News</h2> <div id="recent-news"> <ul> <li> <span>5</span> <div> <h3>Songs of Desperation, I Played Them for You</h3> <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> </div> </li> <li> <span>9</span> <div> <h3>Sweet Disposition, Never Too Soon</h3> <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> </div> </li> </ul> <div id="news-paging"> </div> </div><br /> </article> </div>
Dan kemudian kita mulai untuk membuat markup footer, yang meliputi:
Footer Related Links:
<section> <h2><img src="images/sitemap.png" alt="Sitemap" /></h2> <ul> <li><a href="#">Homepage</a></li> <li><a href="#">Recent News</a></li> <li><a href="#">About Me</a></li> <li><a href="#">Contact</a></li> <li><a href="#">Gallery</a></li> </ul> </section>
Dan Contact Information:
<section> <h2><img src="images/contact-information.png" alt="Contact Information" /></h2> <div id=""> <div> <p><span>A Very Long St</span>, <span> Hidden City</span>, <span> Whatthestate</span> <span> 89247</span></p> </div> <div>Phone: <span>+6221 563 5666</span></div> <div>Email: <a href="mailto:you@mine.com">you@mine.com</a></div> </div> </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:
@import url('reset.css');
@import url('960.css');
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section {
display:block;
}
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:
body {
background: #EEEEEE url('../images/body-bg.png');
font-family: Arial, sans-serif;
line-height: 1.3em;
overflow-x: hidden
}
p {
font-size: 12px
}
a {
text-decoration: none
}
a:hover {
text-decoration: underline
}
/** Header **/
.site-header, .search {
padding: 30px 0
}
.site-header h1 {
font: normal 39px Jura, Georgia, sans-serif;
text-shadow: 1px 1px 1px #FFFFFF
}
.search form {
float: right;
margin-top: 5px
}
.search form input {
padding: 7px 25px 9px 9px;
width: 190px;
background: #FFFFFF url('../images/icon-search.png') no-repeat 97% 50%;
font-size: 12px;
color: #CCCCCC;
border: none;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px
}
/** End Header **/
/** Top Navigation **/
.top-nav {
background: url('../images/top-nav-bg.png') repeat-x left top;
height: 55px
}
.top-nav ul {
float: left;
margin-top: 21px
}
.top-nav ul li {
float: left
}
.top-nav ul a {
display: inline-block;
float: left;
margin: 0 25px;
font: normal 13px Titillium, Arial, sans-serif;
text-transform: uppercase;
color: #999999
}
.top-nav ul a:hover {
text-decoration: none;
color: #333333;
border-bottom: 1px dotted #333333
}
/** End Top Navigation **/
/** Slider **/
.slider-wrap {
position: relative;
background: url('../images/shadow-1.png') no-repeat center bottom;
padding-bottom: 20px;
margin-top: 30px;
margin-bottom: 30px
}
#slider {
background: #FFFFFF;
position: relative;
padding-top: 9px
}
#slider ul {
width: 922px;
height: 443px;
margin: 0 auto;
overflow: hidden
}
.slider-text {
color: #cccccc;
margin: 9px 0;
font: normal 13px Titillium, Arial, sans-serif
}
.slider-text strong {
color: #333333;
text-transform: uppercase;
font-weight: normal
}
/** End Slider **/
/** Sub Content **/
.sub-content {
padding-bottom: 13px;
background: url('../images/shadow-2.png') no-repeat center bottom;
position: relative;
margin-bottom: 30px
}
.sub-about, .sub-news {
background: #FFFFFF;
padding: 9px;
height: 256px
}
.sub-about h2, .sub-news h2 {
font: bold 29px Ballpark, Georgia, serif;
padding: 9px 0;
margin-bottom: 15px;
border-bottom: 1px dotted #cccccc;
text-shadow: 1px 1px 1px #cccccc
}
/** End Sub Content **/
/** About **/
.avatar {
width: 80px;
height: 80px;
padding: 5px;
border: 1px solid #eeeeee;
float: left
}
.about-text {
width: 300px;
margin-left: 9px;
margin-top: -5px;
float: left
}
.about-text a {
color: #23C3F8;
font-style: italic
}
#social-links {
float: left;
margin-top: 15px
}
#social-links ul {
float: left
}
#social-links ul li {
float: left
}
#social-links ul a {
display: inline-block;
width: 32px;
height: 32px;
margin-right: 9px;
text-indent: -9999px;
float: left
}
.links-fb {
background: url('../images/icon-socials.png') no-repeat 0 0
}
.links-twitter {
background: url('../images/icon-socials.png') no-repeat 0 -32px
}
.links-flickr {
background: url('../images/icon-socials.png') no-repeat 0 -64px
}
.links-myspace {
background: url('../images/icon-socials.png') no-repeat 0 -96px
}
.links-linkedin {
background: url('../images/icon-socials.png') no-repeat 0 -128px
}
.links-skype {
background: url('../images/icon-socials.png') no-repeat 0 -160px
}
/** End About **/
/** Recent News **/
#recent-news {
position: relative;
float: left
}
#recent-news ul {
float: left
}
#recent-news li {
float: left
}
.comments {
width: 42px;
height: 34px;
background: url('../images/icon-comment.png') no-repeat center;
float: left
}
.comments span{
display: inline-block;
width: 42px;
margin-top: 4px;
text-align: center;
font: normal 18px Ballpark, Georgia, serif
}
.news-item {
width: 375px;
margin-left: 15px;
margin-bottom: 15px;
float: left
}
.news-item h3 {
font: bold 13px Arial, sans-serif
}
.news-item a {
color: #23C3F8;
font-style: italic
}
/** End Recent News **/
/** Sitemap **/
.sitemap h2, .contact-info h2 {
margin-bottom: 9px
}
.sitemap {
position: relative;
padding-bottom: 30px
}
.sitemap ul {
width: 300px;
float: left;
}
.sitemap ul li {
width: 150px;
float: left
}
.sitemap ul a {
font: normal 13px Titillium, Arial, sans-serif;
color: #BBBBBB
}
/** End Sitemap **/
/** Contact Information **/
.contact-info p, .contact-info a {
font: normal 13px Titillium, Arial, sans-serif;
color: #BBBBBB;
line-height: 1.5em
}
/** End Contact Information **/
@font-face {
font-family: 'Jura';
src: url('wfs/jura-webfont.eot');
src: local('?'), url('wfs/jura-webfont.woff') format('woff'), url('wfs/jura-webfont.ttf') format('truetype'), url('wfs/jura-webfont.svg#webfontndntrgZk') format('svg');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Ballpark';
src: url('wfs/ball_park_by_oopsfaboulous-webfont.eot');
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');
font-weight: normal;
font-style: normal;
}
@font-face {
font-family: 'Titillium';
src: url('wfs/titilliumtext250wt-webfont.eot');
src: local('?'), url('wfs/titilliumtext250wt-webfont.woff') format('woff'), url('wfs/titilliumtext250wt-webfont.ttf') format('truetype'), url('wfs/titilliumtext250wt-webfont.svg#webfontlIqANnt2') format('svg');
font-weight: normal;
font-style: normal;
}
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:
$(document).ready(function(){
}
Bagian pertama kita mulai dengan home slider. Karenan menggunakan jQuery cycle, maka kita hanya perlu menuliskan fungsinya sebagai berikut:
$(function(){
$('#slider ul').cycle({
timeout: 5000,
fx: 'fade',
pager: '#slider-paging',
pause: 0,
cleartypeNoBg: true,
pauseOnPagerHover: 0
});
});
Kemudian pada CSS nya kita sesuaikan dengan menambah baris sebagai berikut untuk pengaturan slider paging:
#slider-paging {
position: absolute;
bottom: 13px;
right: 9px;
z-index: 9999
}
#slider-paging a {
display: block;
width: 13px;
height: 13px;
overflow: hidden;
margin-right: 5px;
float: left;
text-indent: -9999px;
background: url('../images/slider-links.png') no-repeat 0 0
}
#slider-paging a:hover, #slider-paging a.activeSlide {
background: url('../images/slider-links.png') no-repeat 0 -13px
}
Begitu juga dengan slider untuk Recent News kita gunakan fungsi sama seperti sebelumnya:
$(function(){
$('#recent-news ul').cycle({
timeout: 0,
fx: 'fade',
pager: '#news-paging',
pause: 0,
cleartypeNoBg: true,
pauseOnPagerHover: 0
});
});
Lalu sesuaikan CSSnya sebagai berikut:
#news-paging {
position: absolute;
bottom: -25px;
right: 15px
}
#news-paging a {
display: block;
width: 17px;
height: 17px;
overflow: hidden;
margin-left: 5px;
text-indent: -9999px;
float: left;
background: url('../images/recent-nav.png') no-repeat 0 0
}
#news-paging a+a {
background: url('../images/recent-nav.png') no-repeat 0 -17px
}
Kemudian fungsi berikut adalah untuk efek Clear Input pada form pencarian:
$.fn.clearInput = function(){
var obj = $(this);
$.data(this, 'default', obj.val())
var defaultvalue = $.data(this, 'default');
function clear() { if(obj.val()==defaultvalue) obj.val('') }
function reset() { if(obj.val()=='') obj.val(defaultvalue) }
$(this).focus(clear).blur(reset);
}
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:
$('.search form input').clearInput();
Selesai! Anda baru saja menyelesaikan konversi dari PSD ke HTML5 dengan hasil seperti berikut ini.
Semoga bermanfaat, hehe.
Web designer dan front-end developer muda yang belum terlalu jelas dari spesies mana dia berasal. Pada sebuah eksperimen, dia mampu bertahan di dalam air selama 323,007645 detik, dan bisa melayang di udara dengan ketinggian mencapai 15,23 meter. Karena sering berpindah habitat, kini ia memutuskan untuk berada di darat dan menekuni dunia Web Design, HTML5, CSS, dan jQuery.
kok keren sih gan ?
Hehe bisa aja ni master. Silakan dicoba. Hehe.
Wowww. mastah.. thumbup…
Bagus sekali pelajaran HTML5 nya.
kebetulan ane lagi mau belajar tentang ini yang sprtinya tidak lama lagi akan menjadi standard (atau udah ya?) hahaha… good joobss gan… ehhehe
Opss… itu tadi pujiannya…
berikut kita simak, makiannya:
- Tidak ada korelasi antara artikel ini dengan artikel sebelumnya.
- Semacam catatan perjalanan bagaimana penulis melakukan pekerjaan tersebut, bukan sebuah tutorial.
kesimpulannya:
ngaciiiiiiiiiiiiiiiiirrrrr….
yang sebelumnya pan slicing
hehehe
Kalau Anda menyimak tutorial bagian pertama, pasti akan lebih jelas korelasinya
Penjelasan tutorial sengaja saya buat persis seperti langkah2 yang saya lakukan secara urut, agar pembaca lebih mudah memahami dan mempraktekannya.
Wah.., keren gan..,
ah… ini dia yg dtunggu tungu… mksh boss… klo ada kndala ntar aku nanya yah…
silakan, semoga bermanfaat
saya gk diripli
wah mastah HTML5 XHTML nih sangat membantu
mantap… ijin bookmark soalnya tutorial kaya gini musti di praktekan.
ijin menyimak