Part #2 : Konversi PSD Tumblr to XHTML/CSS + Responsive — Perubahan struktur

Pada postingan kali ini, saya akan menlanjutkan seri kedua dari artikel berkelanjutan--cara conversi PSD to XHTML CSS + responsive

Always positive thinking! Unknown

Pada postingan kali ini, saya akan menlanjutkan seri kedua dari artikel berkelanjutan--cara conversi PSD to XHTML CSS + responsive

Last Modif at June 7th, 2012

Sebelum mambaca tutorial ini, pastikan Anda membaca seri sebelumnya–dimari:

Sebelumnya saya minta maaf karena baru bisa share part keduanya; Bukan karena tidak ingin berbagi ataupun nulis–beberapa bulan ini saya memang sedikit sibuk. Dan dengan terpaksa saya harus meninggalkan beberapa aktifitas yang saya anggap kurang penting–ngeblog.
Ok, mari kita lanjutkan part 2 dari artikel bersambung–Cara konversi mockup PSD to XHTML/CSS–responsive + WordPress themes(Insha Allah).

Perubahan Markup;

Pada tutorial bagian pertama, kami menyusun markup XHTML-nya seperti ini;

Konversi PSD to html/css strutur lama
Klik gambar untuk perbesar

Jika diperhatikan susunan markup diatatas kurang baik untuk spider mesin pencari–Karena itu; kami, mengubah susunanya menjadi seperti ini;

Konversi PSD to html/css strutur baru
Klik gambar untuk perbesar

Klik untuk perbesaran;

Kenapa diubah?

Sebenarnya ini hanya optional saja, alias ngga wajib. Namun karena kami memikirkan markup yang ramah dengan Spider search engine, jadi kami merubahnya seperti itu. Coba perhatikan susunan sebelumnya; spider search engine memulai pembacaaan markup dari sidebar kemudaian content. Sedangankan pada susunan baru; spider memulai pembacaan dari header, content kemudian sidebar lalu footer.

Benarkah susunan yang baru ini lebih ramah SE0?

Hah, saya hanya termakan teori SE0 saja, namun saya rasa itu ada benarnya. Diibaratkan, kami mendahulukan content, ketimbang sidebar, karena saya rasa apa yang ada pada content lebih penting ketimbang apa yang ada pada sidebar. Pada intinya, dahulukan elemen yang lebih penting, ketimbang elemen yang kurang penting;

Perubahan: File dan folder.

Kami juga merubah susunan file dan folder, ini agar lebih dimudahkan dalam proses editing, berikut adalah susunan folder lama;

Konversi PSD to html/css susunan folder lama
Klik gambar untuk perbesar

Dan berikut adalah susunan folder yang baru;

Konversi PSD to html/css susunan folder baru
Klik gambar untuk perbesar

Keterangan;

Perubahan yang paling nyata terletak pada style CSSnya; Pada susunan baru, kami membuat sebuah folder baru dengan nama “css”, lalu didalamnya adalah file-file CSS; berikut adalah daftar file didalam folder CSS;

  • default.css
  • class.css
  • template.css
  • comments.css
  • print.css
  • 1280px.css
  • 800px.css
  • 650px.css
  • 400px.css
  • 240px.css
  • msie
    • ie.css
    • i7.css

Lalu untuk memanggil file-file tadi(file didalam folder CSS), kami menggunakan metode import, yang dimana pada style.css kami menulisnya seperti ini;


/* Import CSS Styling */
@import url(css/default.css);
@import url(css/class.css);
@import url(css/template.css);
@import url(font/font.css);
@import url(css/comments.css);
@import url(css/print.css);
@import url(css/1280px.css);
@import url(css/800px.css);
@import url(css/650px.css);
@import url(css/400px.css);
@import url(css/240px.css);
/* End import CSS Styling */

Dengan truktur sperti diatas, kita akan lebih mudah dalam penulisan maupun pengeditan style, karena filenya dipisah-pisah, jadi filenya ngga numpuk-numpuk gituh.

Perubahan pada nilai background-images

Untuk menampilkan gambar latar–pada bagian pertama; kami menulisnya seperti ini;


html{
background:#f0f0f0 url('images/latar.png') repeat fixed center;
}

Untuk keterangan baca part 1;

Dan pada part dua–untuk menampilkan gambar latar, atau menggunakan gambar sebagai latar, kami menulis style CSS-nya seperti ini;


html{
background:#f0f0f0 url('../images/background.png') repeat fixed center
}

Keterangan

Perhatikan nilai pada url, awalnya kami menulis seperti ini images/latar.png lalu pada sintaks yang kedua, berubah menjadi seperti ini; images/background.png kenapa bisa sperti itu? Karena kami merename(merubah nama) gambar latar yang awalnya “latar” menjadi “background”; Sehingga jika tetap menggunakan code style lama, maka gambar tidak akan ditemukan; Lalu yang kedua url('../images digunakan karena lokasi folder “images” berada satu tingkat dibelakang file CSS itu sendiri; lihat template.css yang berada didalam folder CSS.

Perubahan penting lainya;

Kami juga merubah nama gambar latar yang awalnya latar.png menjadi background.png, kenapa? karena–untuk proyek skala global, dalam hal ini untuk semua orang; sangat direkomendasikan untuk menggunakan bahasa inggris! Pada contoh kasus diatas “latar”, siapa yang mengerti maksud dari “latar?” yah, paling hanya bangsa melayu dan sebagian orang asing yang netap di daratan melayu. Nah bagaimana jika code kita dilihat oleh ras Arab atu Cina, apakah mereka ngerti?
Sama juga, jika diumpamakan bangsa spanyol, itali, atau bangsa-bangsa lainya; menggunakan bahasa mereka untuk nama file, apakah anda sebagai orang Indonesia–mengerti apa yang mereka tulis?
Ini juga berlaku untuk semua kode/script apapun yang Anda tulis, pokoknya harus pakai bahasa inggris! Please remember it! Jangan egois!

Download file revision:

Next Part tutorial

  • Konversi PSD Tumblr to XHTML/CSS + Responsive–Merancangn header
  • Konversi PSD Tumblr to XHTML/CSS + Responsive–Merancangn content
  • Konversi PSD Tumblr to XHTML/CSS + Responsive–Merancangn sidebar
  • Konversi PSD Tumblr to XHTML/CSS + Responsive–Merancangn footer
  • Konversi PSD Tumblr to XHTML/CSS + Responsive–Debugger IE
  • Konversi PSD Tumblr to XHTML/CSS + Responsive–Hack responsive
  • Konversi PSD Tumblr to XHTML/CSS + Responsive–Set responsive to max-width-device 800px
  • Konversi PSD Tumblr to XHTML/CSS + Responsive–Set responsive to max-width-device 650px
  • Konversi PSD Tumblr to XHTML/CSS + Responsive–Set responsive to max-width-device 450px
  • Konversi PSD Tumblr to XHTML/CSS + Responsive–Set responsive to max-width-device 250px
Keterangan tambahan

Karena struktur code dan file + foldernya dirubah, jadi untuk kedepanya; kami akan fokus dengan perubahan baru ini; Jadi, susunan lama diabaikan saja

Catatan Untuk Copaster

Saya tidak melarang Anda untuk mengcopy-paste apapun di blog ini. Itulah kenapa saya menggunakan Picasa Web Album untuk menyimpan file gambar dan file-file lainya; Ini agar bandwidth di hosting saya tidak terkuras. Dan karena menggunakan pica web album sebagai image hosting itu ribet–saya memutuskan untuk menyimpan file gambarnya di hosting sendiri. Jadi, jika Anda ingin mengcopy Artikel ini–Silakan Download gambarnya terlebih dahulu–lalu upload ulang di hosting sendiri, JANGAN MALAS!

Untuk sementara File hotlink tidak saya aktifkan, namun jika suatu hari membebani hosting saya. Dengan sedikit keterpakasaan, fasilitas itu akan saya aktifkan. So, mohon kerja samanya

Indam

A geek, frontend developer. Like you, coding & experiment.
#web #design #ui #ux #standard #dreamer
#welding #interisti #beer #coffee

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Disclaimer, FAQ & License

Hello Gaes, untuk tujuan apapun semua content text di blog ini dapat di copas, tanpa harus menulis sumbernya. Namun content yang berupa gambar--harus Anda periksa kembali lisensinya.

Adapun(mungkin) sebagian content blog ini sudah kadaluarsa atau sudah tidak relevan, contoh :'Theme default WordPress 3+ adalah Twentyten 'apakah selamanya Twentyten?' ngga kan? Indam selaku pengelolah berharap melaporkan jika menemukan content basi yang mungkin dapat menimbulkan salah persepsi tentang content dan konsep itu sendiri. Oia, karena blog ini bersifat pribadi dan bukan untuk komersil, mungkin anda juga akan menemukan tulisan tentang aku dan hal-hal rancu yang sama sekali ngga ada hubungan dengan web dan blog-blogan. Perlu dicatat: Indam selaku pengelolah tidak bertanggung jawab atas kerugian materi, waktu, tenaga, pikiran yang mungkin ditimbulkan dari sini. So, pandai-pandai yah dalam memilah informasi. Thanks for reading.

Quote

Ketika Anda melihat orang lain mengangkat dirinya dengan cara merendahkan orang lain, sebenarnya orang itu lebih rendah dari mereka yang direndahkan. Phidias--greece filsuf

+
-