Unlimited Wordpress themes, plugins, graphics & courses! Unlimited asset downloads! From $16.50/m
Advertisement
  1. Web Design
  2. Complete Websites

Membuat Protofolio yang Adaptif dan dapat Disaring Menggunakan jQuery Isotope

by
Read Time:15 minsLanguages:

Indonesian (Bahasa Indonesia) translation by Baba Baddolo (you can also view the original English article)

Hari ini kita akan mengambil  tata letak Portofolio PSD  dari ThemeForest, mereplikakannya secara menyeluruh pada HTML & CSS sementara tetap membuatnya adaptif.  Kita akan membahasnya lebih jauh dan menyatukan plug in Isotope jQuery untuk membuatnya portofolio berfungsi filter seutuhnya.


Langkah 1: Mengorganisir Proyek

Kita akan mulai dengan membuat struktur proyek sederhana sehingga segala halnya tetap terorganisir.  Kita akan membuat tiga folder:

  • css – untuk file CSS kita
  • gambar – semua gambar akan ditempatkan di sini 
  • js – untuk plugin jQuery dan skrip custom kita.


Langkah 2: Dokumen

Sebelum kita terjebak pada coding kita akan membuat file index.html yang dapat diletakkan pada root proyek Anda.  Kita akan melemparkan template HTML5 dasar, tertaut pada file CSS pada head.  Sebagai tambahan, kita akan perlu untuk menautkan beberapa file lainnya:

  • jQuery Library – kita perlu menautkan jQuery library siap ketika nanti kita menggunakan plugin Isotope, kita akan melanjutkan dan memasukkannya sekarang.  Saya telah menggunakan library yang disediakan Google (sangat direkomendasikan). 
  • HTML5 Shiv – karena kita akan menggunakan elemen HTML5, kita akan memastikan kita ter-link dengan HTML5 Shiv untuk mengizinkan elemen untuk dikenali pada versi IE yang lebih lama.
  • Google Web Fonts – jika Anda melihat PSD Anda akan memperhatikan font PT Sans yang digunakan.  Karena font ini tidak tersedia lokal untuk banyak pengguna, kita kan membuat link padanya mengguakan jasa Google Web Font.

Lagnkah 3: Menambahkan Style Umum

Kita sekarang akan membutuhkan beberapa style umum pada file CSS kita.  Hal ini akan melibatkan beberapa reset sederhana yang dapat Anda tambahkan pada file CSS teratas Anda.


Langkah 4: Mulai dengan Header

Sekarang kita akan mulai membangun struktur situs!  Kita akan mulai dengan header dan melakukannya dengan menggunakan elemen Header HTML5.

Selanjutnya kita akan menambahkan beberapa CSS untuk header kita.  Kita akan menerapkan beberapa stye dasar di sini, tetapi aspek utamnya untuk dilakukan lebih dahulu adalah peletakan.  Di sini, kita menggunakan sebuah posisi tetao kemudian 0 pada bagian atas, kiti dan kanan.  Hal ini ajan memastikan header kita tetap berada di atas jendela ketika kita mengulir ke bawah- dan ia memenuhi semua ketinggian browser.


Langkah 5: Logo dan badge “Pekerjakan Saya”

Demi kesederhanaan, kedua bagian ini akan diterapkan menggunakan gambar, tetapi kita juga akan membungkusnya di dalam tag jangkar dan memberikan kelas sehingga kita dapat mengatur style untuk peletakan.

Kedua hal ini akan memiliki style yang mirip, keduanya diletakkan benar-benar (header bertindak sebagai hirarki paling atas) dengan 0 pada bagian atas.  Logo memiliki bagian kiri 0 untu menjaganya tetap berada pada bagian kiri dan badge pekerjakan saya pada bagian kanan sejauh 20px untuk mendorongnya sedikit dari bagian kanan.

Anda harusnya akan memilikinya terlihat seperti ini:



Langkah 6: Sidebar

Sekali lagi kita akan mengambil kegunaan dari markup HTML5 dan membuat sidebar kita menggunakan elemen aside.

Pada CSS untuk sidebar, Anda akan melihat kita menggunakan posisi tetap lagi, secara teknis ini tidak terlalu terterapkan di sini karena slider akan memnuhi tinggi halaman.


Langkah 7: Latar Belakang Sidebar!

Anda akan melihat bahwa kita gagal menentukan latar belakang kita. Kita akan menerapkan latar belakang sidebar; kita akan menerapkannya pada badan dan mengulanginya pada sumbu-y seingga ia akan mengalir dari atas ke bawah.  Sebuah posisi kiri juga akan digunakan untuk memastikan latar belakang kita diletakkan pada bagian kiri halaman dari sidebar.

Melihat ini sebagai style badan situs mungkin masuk akal untuk bergulir ke aras pada file CSS Anda dan meletakkannya di dekat atas,  saya juga melakukannya dan menambahkan properti font pelembut untuk webkit browser.

Kita sekarang telah menyelesaikan dasar dari sidebar kita!



Langkah 8: Waktunya Navigasi

Sekarang sidebar telah dibuat, kita dapat menambahkan navigasi padanya.  Kita akan membuat daftar tidak teratur dan membungkusnya dengan elemen Nav HTML5.

Sekarang beberapa dasar styling untuk navigasi, menambahkan latar belakang, style font dan juga keluarga font dari Google Web Fonts – PT Sans.


Langkah 9: Membuat Area Konten Utama

Kita sekarang akan perlu untuk membuat konteiner pembungkus yang akan menyangga entri portofolio. Juga, kita harus menambahkan beberapa margin dan padding untuk memastikan entri tampil pada tempat yang tepat. Hal ini dapat dilakukan dengan pertama memindahkaan elemen entri menjauh dari header dan sidebar.

Jika kita kita melihat header setinggi 70px kita perlu margin atas 70px. Sidebar dengan lebar 150px sehingga kita akan menerapkan 150px margin kiri. Terakhit adalah 20px untuk padding pada bagian atas dan kiri untuk mendorong entri menjauh dari header dan sidebar.


Langkah 10: Menambahkan Entri Portofolio

Waktunya emulai dengan entri portofolio. Teruskan dan mulai membuat sebuah div dengan kelas portfolio di dalam area utama kita, hal ini akan menjaga item portofolio kita menjadi satu. Entri portofolio kita dibuat dari sebuah figure (lagi-lagi sebuah elemen HTML5) yang digunakan untuk menunjukkan sebuah tempat penyimpanan untuk media dan sejenisnya.

Kita kemudian akan memiliki sebuah gambar dengan dua bentangan; satu untuk pita dan satu untuk hover. Anda juga dapat menggunakan elemen pseudo untuk hal ini, yang akan mencerahkan markup, walau akan mengurangi kompatibilitas halaman.


Langkah 11: Styling Item Portofolio

Styling untuk portofolio adalah hal yang mendasar.  Kita akan mengambang ke kiri dan menambahkan margin kanan dan bawah 20px.  Untuk membuat tepi putih kita cukup menambahkan beberapa padding dan kemudian latar belakang, ini akan diakhiri dengan tepi sederhana – dengan radius 5px (sembari mengingat prefix).  Terakhir, sebuah bayangan kotak akan diterapkan. 

Sembari kita menerapkan margin 20px ke kanan entri kita perlu untuk mengurangi parent container (div portofolio).


Lagnkah 12: Menambahkan Pita Entri

Kita telah membuat markup ribbon/pita ketika menambahkan item portofolio. (walaupu, sekali lagi, Anda mungkin menggunakan elemen-pseudo), kita sekarang akan perlu untuk memberikan style menggunakan CSS.


Langkah 13: Portofolio State Hover

Hal terakhir untuk kita lakukan pada portofolio adalah untuk menambahkan state hover.  Hal ini dapat dicapai dengan bentang yang kita telah buat sebelumnya, semua yang kita perlu lakukan adalah styling.  Kita akan menggunakan semuah gambar dan latar belakang hitam dengan opacity/kegelapan alfa 70%.  Kita juga menambahkan transisi CSS3 untuk membuat efek melayang yang lancar.  Terakhir adalah untuk menambahkan opacity:1; untuk ketika melayang pada entri, yang akan memudar pada bagian hover/melayang.

Sekarang item portofolio telah selesai, Anda bebas untuk menambahkannya sendiri dan mengubah gambarnya!



Langkah 14: Kebaikan Adaptif

Sekarang kita telah mereplika PSD menjadi desain yang bekerja, kita akan malanjutkan dan membuatnya adaptif.  Kita tidak menggunakan grid fleksibel seutuhnya, yang juga mengapa apa yang kita praktikkan secara teknis tidak begitu responsif.  Kita akan menggunakan CSS Media Queries untuk mengubah dan menyunting tata letak ketika pada mode tinjau yang berbeda.  Kita akan menggunakan dimensi kasar, memeberikan kita apa yang dapat lebih-atau-kurand dapat diterima sebagai Tablet Portrait Orientation, Tablet Landscape Orientation, Mobile Portrain Orientation, dan terakhir, Mobile Landscape Orientation.

Sebelum kita memulai menyunting tata letak, kita perlu melakukan dua hal.  Pertama, kita akan menambahkan tag viewport meta yang akan membuat situs kita dapat dilihat dengan benar pada mobile dan tablet, jika Anda ingin mengetahui lebih jauh tentang hal ini pastikan untuk mempelajari article ini oleh Ian Yates.  Terakhir adalah untuk menambahkan sedikit CSS untuk membuat gambar kita menjadi lebih cair:


Langkah 15: Tablet Portrait

Kita akan meulai dengan menargetkan tablet dengan orientasi portrait.  Hanya sedikit penyuntingan yang diperlukan untuk mengatur tata letak Anda.  Hal utamanya adalah untuk memperhatikan entri ini; entri akan dibuat lebih kecil untuk mengakomodasi lebih banyak entri pada masing-masing baris.


Langkah 16: Tablet Landscape

Biasanya Anda tidak akan menargetkan orientasi landscape untuk tablet kecuali Anda harus sekali, tetapi karena desain halaman ini maka hal ini akan sangat membantu kita.  Kita tidak akan menggunakan luas minimal dan maksimal untuk  menentukan ukuran viewport – kita akan menargetkannya berdasarkan orientasi. Kali ini kita akan menggunakan kode yang lebih sedikit hany dengan mengubah luas entri portofolio.


Langkah 17: Mobile Portrait

Kita akan berpindah pada mobile sekarang, memulai dengan orientasi portrait. Kali ini kita akan harus memberikan lebih banyak penyuntingan. Kita akan mengatur tata letak sekarang, karena layar menjadi semakin kecil kita tidak lagi dapat mengakomodasi sidebar pada bagian kiri dengan entri pada bagian kanan. Kita akan memindahkan sidebar ke atas sebelum entri dan membuatnya memenuhi seluruh luas layar.

Juga, karena header tersedia dalam ukuran yang besar dengan sidebar/navigasi di bawahnya, Anda mungkin tidak dapat melihat banyak entri. Kita akan menghilangkan position: fixed dan ubahlah menjadi absolute sehingga header sekarang akan bergulir dan bukan diam pada bagian atas halaman.


Langkah 18: Memperbaiki Permasalahan Penempatan

Baik, serang kita harus menghadapi masalah. Sidebar telah diatur dengan baik pada tata letak layar, tetapi entri portofolio terletak tidak tepat. Kita perlu kembali pada markup kita dan menambahkan dua lagi divisi, satu dengan id pembungkus yang akan mengemas semua kecuali header dan yang lain dengan halaman kelas yag akan mengemas area konten utama.

Setelah menambahkan beberapa markup yang dibutuhkan, kita harus menambahkan beberapa style. Kembali bergulir ke atas pada file CSS Anda dan tambahkan hal berikut:


Langkah 19: Mobile Landscape

Baik, terakhir orientasi landscape pada mobile. Jika Anda meletakkannya setelah CSS mobile portrait yang baru saja kita buat maka ia akan memberikan style itu, misal, sidebar luas penuh, dll. Semua yang perlu kita lakukan sekarang adalah mengubah luas entri.



Langkah 20: Memperkenalkan Isotope

Sekarang kita telah selesai dengan pembuatan desain. Sekarang kita dapat mulai memberikan beberapa fungsi! Kita akan menggunakan plugin isotope yang cemerlang oleh David DeSandro. Isotope digunakan untuk membuat tata letak, penyaringan, dan pemilihan. Ini umumnya digunakan pada portofolio untuk menyaring beberapa penggal pekerjaan mendi kategori yang berbeda- sebagai contoh Desain Web, Fotografi, dan Ilustrasi. Dengan catatan tersebut, mari mulai!

Sebelum kita dapat menambahkannya pada desain kita, kita perlu mengunduhnya. Pergilah ke http://isotope.metafizzy.co/jquery.isotope.min.js. Anda sekarang akan melihat file javascript Isotope, cukup pergi ke File > Save dan simpanlah pada folder js yang kita buat di awal. Kita kemudian akan perlu untuk menautkannya pada skrip menggunakan file HTML Anda.


Langkah 21: Proses Penyaringan

Untuk membuat item portofolio kita dapat disaring, kita harus mengubah markup kita lagi. Kita akan mulai dengan navigasi yang akan menyaring untuk kita. Isotope menggunakan HTML5 Custom Data Attributes, atau spesifiknya data-filter="". Kita mengatur nilai berdasarkan katgori, penggunaan Desain Web .web (catat: kita perlu menambahkan titik sebelum nilai kategori). Tag jangkar untuk kategori All/Semua tidak harus menggunakan .all, ia menggunakan tanda bintang.


Langkah 22: Menyaring Item Portofolio

Bagian terakhir dari proses penyaringan adalah untuk menyunting item portofolio. Setelah menambahkan nilai data-filter Anda harus menambahkan nilai yang merujuk pada masing-masing entri. Jika entri yang aktif pada kategori video, Anda harus menambahkan kelas video. Perlu diingat bahwa jika nilai data-filter Anda diketik dengan huruf kecil makan Anda harus menggunakan huruf kecil untuk kelas entri.


Langkah 23: Mengaitkan Plugin

Sekarang waktunya untuk mengaktifkan Isotope yang akan kita lakukan dalam dua bagian. Pertama, kita harus mengaitkan bagian yang akan menyortir entri protofolio kita. Mulai dengan membuat file baru bernama “custom.js” dan letakkan pada folder js Anda.


Langkah 24: Fungsi Klik

Bagian kedua akan mangaitkan navigasi untuk mengizinkan penyaringan terjadi.


Lagnkah 25: Menambahkan State Aktif

Yang ditunjukkan pada PSD adalah state aktif untuk jangkar navigasi terpilih. Kita harus menambahkan beberapa markup, beberapa CSS lagi dan terakhir beberapa jQuery. Mulai dengan kembali pada file HTML Anda dan tambahkan class=”selected” pada tag jangkar pertama.

Selanjutnya, Anda harus menambahkan CSS lagi, sehingga tambahkan tepat di bawah style navigasi.

Bagian terakhir adalah jQuery, ini akan menambahkan beberapa kelas ketika diklik untuk menunjukkan tombol yang aktif/kategori yang aktif.


Langkah 26: Kita Melupakan Sesuatu Ya?

Jika Anda melanjutkan dan mengklik tombol navigasi Anda akan melihat bahwa penyaringan tengah bekerja! Tapi tunggu, transisinya tidak bergerak dengan lancar! Itu karena kita perlu menambahkan beberapa transisi CSS lagi.


Kesimpulan

Itu dia, tutorial bermanfaat lainnya telah selesai! Anda bebas untuk menggunakan metode ini pada desain apapun yang Anda miliki. Mulai dan bersenang-senanglah dengan ini.


Saya harap Anda menikmati tutorial ini, terima kasih telah membaca!

Advertisement
Advertisement
Looking for something to help kick start your next project?
Envato Market has a range of items for sale to help get you started.