Nah, jika kamu punya skill Desain Grafis atau Fotografi yang bagus, kamu harus ikutan kompetisi ini.

Ya, kamu bisa menjadi The Next Label Designer Aqua selanjutnya. Caranya gampang, silahkan kunjungi www.temukanindonesiamu.com  dan submit karyamu disana.

Untuk 1 pemenang kategori desain, karyanya akan menjadi menghiasi label botol AQUA selanjutnya dan mendapat Hadiah Uang sebesar Rp 10 juta.
- Untuk 1 pemenang kategori foto, karya fotonya akan dipajang di 16 titik billboard AQUA se-Indonesia dan mendapat Hadiah Uang sebesar Rp 10 juta.
- 10 finalis teratas akan mendapat kesempatan memajang karyanya bersama 40 karya seniman Indonesia.
Syarat dan ketentuan berlaku.

Karya yang kamu upload akan ditinjau dalam waktu 24 jam. Setelah karya disetujui, share karyamu untuk mendapat vote dari teman lewat Facebook atau Twitter. Akan ada 2 pemenang mingguan yang diseleksi berdasarkan jumlah vote, jadi pastikan karyamu mendapat vote sebanyak-banyaknya.
Tonton video ini (http://youtu.be/_99j2Mu8gnQ ) untuk petunjuk cara mengikuti kompetisi ini.

Selain itu, AQUA Bekerja sama dengan grafitti artists untuk mendesain bus shelter AQUA seperti video dibawah ini

Tunggu apalagi, ayo ikutan, dan jadilah Label desainer bersama Aqua.

Tags

Dalam postingan ini akan saya jelaskan bagaimana mengelompokan sebuah gallery menggunakan jQuery Filters yang ringan dan sangat mudah dalam penggunaannya.

Pertama,kita siapkan beberapa image yang berbeda kategori.

Kedua,kita buat file javascript untuk animasinya

$('.filters').filters({

filter: {
 name: 'filter', // (string) class name for links container
 element: 'a', // (string) HTML selector
 active: 'active' // (string) class name for active element
 },
 container: {
 name: 'container', // (string) class name for items container
 element: 'li' // (string) HTML selector
 },
 css3: {
 init: true, // (bool) use CSS3 transitions
 children: 'a', // (string) HTML selector (children of filter.element)
 property: 'all 1s ease', // (string) CSS3 property for transitions
 transform: { // (object) CSS3 transform properties, please use: scale, rotate, skew
 scale: '0'
 }
 },
 move: {
 init: true, // (bool) set the true if you want fixed position of elements
 easing: 'linear', // (string) set the easing of the animation,
you can also use: jQuery Easing plugin: http://gsgd.co.uk/sandbox/jquery/easing/
 duration: 500 // (int) set the speed of the easing animation in milliseconds
 },
 fade: {
 duration: [500, 500], // (array) set the speed of the fading animation in milliseconds - [fadeOut, fadeIn]
 opacity: [0, 1] // (array) set the opacity of elements
 },
 fixed: false, // (bool) setthe true if you want adjust height of the container
 onclick: function(filter, element){}</em>

});

Javascript diatas merupakan settingan default animasi yang akan kita gunakan dalam sort image gallery kita.

Ketiga,kita buat file html yang terintegrasi dengan javascript tersebut

<div class="filters">
	<div class="filter">
		<a href="#" rel="collection_name_1">Collection #1</a>
		<a href="#" rel="collection_name_2">Collection #2</a>
		<a href="#" rel="all">All</a>
	</div>
	<div class="container">
		<ul>
			<li class="collection_name_1"> .. </li>
			<li class="collection_name_2"> .. </li>
			<li class="collection_name_1"> .. </li>
			<!-- etc. -->
		</ul>
	</div>
</div>

Untuk download script dan dokumentasi lengkap nya bisa disini. Contoh penggunaannya bisa dilihat disini

Selamat mencoba !

Tags

Flat design sangat cantik kalau kita tahu cara penggunaan warna yang pas pada setiap elemen website, tidak ada gradasi pada desain web flat, hanya 1 warna yang digabung dengan warna lain dengan takaran warna yang pas sehingga enak dilihat.

Pada inspirasi desain web kali ini saya menghadirkan 10 website dengan flat desain, semoga menginspirasi

www.fhoke.com

2012.twitter.com

www.datadrivenlondon.com

sumall.com

yourkarma.com

osbornbarr.com

futureinsightslive.com

www.squarespace.com

scriptogr.am

www.snowbird.com

Tags

Nah, sekarang konsep Pull To Refresh sudah bisa kita pakai di web, ya Hook.js membuat konsep ini hadir di web.

Sekedar informasi bahwa konsep Pull To Resfresh sudah di patenkan oleh Twitter, mereka yang pertama kali menemukan konsep ini, tapi mereka membebaskan untuk siapa saja menggunakannya.

Instalasi

Anda Download Hook.js disini

kemudian panggil script tersebut bersama jQuery di bagian

<script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script>
<link rel="stylesheet" href="hook/hook.css" type="text/css" />
<script src="hook/hook.js" type="text/javascript"></script>

Pada bagian letakkan kode berikut

<div id="hook">
	<div id="loader">
		<div class="spinner"></div>
	</div>
	<span id="hook-text">Reloading...</span>
</div>

Implementasi konsep ini sangat mudah, jika ingin melihat hasilnya silahkan kunjungi website Hook.js

Menurutmu, apakah konsep ini akan sesukses ketika hadir di ponsel & tablet?

Tags

Untuk pemula seperti saya, dokumentasi Bootstrap menjadi page yang wajib dibuka. Ekstensi ini, memungkinkan Anda mengakses dokumentasi Bootstrap secara offline. Jika sudah terinstall pada chrome Anda, dokumentasi dapat diakses dengan melakukan klik pada ikon di toolbar sisi kanan atas.

Selain akses melalui toolbar, Anda dapat mengakses setiap bagian dari dokumentasi melalui omnibox/addres bar dengan mengetikan keyword bt lalu tekan tab pada keyboard, selanjutnya ketik help untuk melihat kata kunci apa saja yang bisa dipakai sebagai shortcut. Pada halaman option, Anda dapat menambahkan kata kunci sesuai keinginan Anda yang nanti akan digunakan sebagai shortcut untuk mengakses setiap bagian dari halaman dokumentasi.

Contoh jika anda ingin melihat dokumentasi tentang tombol pada Boostrap, Anda hanya perlu mengetikan bt button pada omnibox dan anda akan otomatis diarahkan ke bagian tersebut.

Ekstensi ini, bisa anda gunakan ketika mengakses dokumentasi Bootstrap(secara online) pada halaman Customize. Jika ekstensi ini sudah enabled pada chrome Anda, maka anda akan menemui label untuk variabel yang mewakli nilai warna akan berubah warna sesuai dengan kode hex (seperti #FFF) yang dipilih. Jadi ketika  anda mengubah nilai variabel warna, kita akan langsung tahu apa warna yang kita pilih.

Bisa dibilang, ekstensi ini adalah yang paling fun karena dengan ekstensi ini semua halaman web bisa disulap menjadi seperti Bootstrap. Hanya dengan satu kali klik. Boom.. Semua berubah! Tapi karena tidak semua web mempunyai struktur markup yang ‘bootstrapable’, jadi tidak semua web bisa optimal di sulap menjadi seperti Bootstrap.

Dengan ekstensi ini, Anda akan dengan mudah melakukan konversi bentuk raw JSON menjadi lebih readable dengan bentuk html tabel. Hanya dengan memasukan link dari sumber data JSON Anda dan klik tombol Get, maka hasil tabel akan muncul di dalam popup ekstensi. Ekstensi ini akan sangat berguna untuk melakukan analisa ketika  sedang mempelajari API yang memberikan respon dalam bentuk JSON.

Ekstensi ini, akan menampilkan semacam grid pada jenis layout fluid dan non-fluid pada halaman Bootstrap. Untuk saya yang tidak terlalu paham mengenai konsep grid, saya hanya tau jika ekstensi ini hanya akan menampilkan grid.

Kelima ekstensi diatas, patut dicoba untuk menambah kemudahan dalam eksplorasi Bootsrap. Silahkan klik pada judul ekstensi untuk ke menuju ke halaman masing-masing ekstensi.

Tags

Sebagai seorang web developer kita merangcang bangun sebuah website untuk mendapatkan hasil yang bagus, website di buka oleh orang dengan keadaan rapi dan sempurna, tapi apakah kita tahu dibalik semua tampilan itu terdapat beribu baris kode yang amburadul? ya amburadul!

Oke gini, pernahkan Anda mendapatkan proyek revisi sebuah website yang dulunya dikerjakan oleh orang lain? Ketika Anda intip kodenya ternyata Anda tercengang dan bingung dengan amburadulnya struktur kode tersebut dan Anda akan bilang, Gimana kalau kita develop dari awal saja? karena akan membutuhkan waktu yang lama bagi saya untuk memahami kode yang aneh ini ) *pingsan.

Karena CSS terlalu mainstream, maka mari kita berkenalan dengan sebuah harapan masa depan yaitu Compass dan Sass.

Apa itu Sass?

Sass (Syntactically Awesome Stylesheets) adalah sebuah pengembangan dari CSS3 dengan menambahkan nested rules, variables, mixins, selector inheritance, dan banyak lagi. dia menerjemahkan css dengan struktur yang lebih baik.

Sass makes CSS fun again. Sass is CSS, plus nested rules, variables, mixins, and more, all in a concise, readable syntax. – Hampton Catlin

Apa kelebihan Sass?

• CSS yang dihasilkan akan rapi dan mudah di mengerti.
• Otomatis akan berjalan dengan baik di setiap browser.
• Hasil output CSS akan lebih terstruktur.

Variable

Kita bisa mendivinisikan sebuah variable dan memenggilnya pada baris dimanapun kita butuhkan, juga kita bisa menggunakan perhitungan matematika sederhana.

/* .scss */
$blue: #3bbfce;
$margin: 16px;

.content-navigation {
  border-color: $blue;
  color:
    darken($blue, 9%);
}

.border {
  padding: $margin / 2;
  margin: $margin / 2;
  border-color: $blue;
}

Ketika di compile maka akan menjadi

/* CSS */

.content-navigation {
  border-color: #3bbfce;
  color: #2b9eab;
}

.border {
  padding: 8px;
  margin: 8px;
  border-color: #3bbfce;
}

Nesting

Jika kita pakai Sass maka akan memungkinkan kita menulis baris kode yang bertingkat dengan hasil compile yang rapi dan mudah di pahami

/* .scss */

table.hl {
  margin: 2em 0;
  td.ln {
    text-align: right;
  }
}

li {
  font: {
    family: serif;
    weight: bold;
    size: 1.2em;
  }
}

ketika di compile maka akan menjadi

/* CSS */

table.hl {
  margin: 2em 0;
}
table.hl td.ln {
  text-align: right;
}

li {
  font-family: serif;
  font-weight: bold;
  font-size: 1.2em;
}

Mixin

Mixin lebih bagus dari Variable yang memungkinkan kita menggunakan kembali potongan kode css. misalkan jika kita banyak menggunakan rounded corner, maka tinggal dibuatkan sebuah mixin dan bisa kita panggil/pakai berulang.

/* .scss */

@mixin table-base {
  th {
    text-align: center;
    font-weight: bold;
  }
  td, th {padding: 2px}
}

@mixin left($dist) {
  float: left;
  margin-left: $dist;
}

#data {
  @include left(10px);
  @include table-base;
}

ketika di compile maka akan menjadi

/* CSS */

#data {
  float: left;
  margin-left: 10px;
}
#data th {
  text-align: center;
  font-weight: bold;
}
#data td, #data th {
  padding: 2px;
}

Selector Inheritance

Dengan selector inheritance kita dapat menggunakan properties yang sama dan membedakannya tanpa duplikasi css.

/* .scss */

.error {
  border: 1px #f00;
  background: #fdd;
}
.error.intrusion {
  font-size: 1.3em;
  font-weight: bold;
}

.badError {
  @extend .error;
  border-width: 3px;
}

ketika kita compile maka akan menjadi

/* CSS */

.error, .badError {
  border: 1px #f00;
  background: #fdd;
}

.error.intrusion,
.badError.intrusion {
  font-size: 1.3em;
  font-weight: bold;
}

.badError {
  border-width: 3px;
}

Dan masih banyak lagi fitur dari Sass yang layak kita gali.

Apa itu Compass

Compass adalah sebuah CSS Framework Open Source yang menggunakan bahasa Sass Stylesheet untuk membuat gaya penulisan stylesheet lebih powerful & mudah. Compass juga menyediakan sejumlah module dan mixin untuk membantu mengintegrasikan pola desain yang populer di web. Compass juga mendukung X-Browser CSS3 mixins: Rounded Corners, Gradients, Box Shadow, Text Shadow, dll.

Cara Install Compass & Sass

Pastikan komputer Anda sudah terpasang Ruby, jika Anda pengguna windows Anda dapat unduh Ruby disini. Untuk linux Unduhnya Ruby disini. untuk Mac & linux biasanya sudah tersedia.

Install Sass

Buka Terminal.app atau windows command dan ketikkan

windows
gem install compass

Mac / Linux
sudo gem install compass

jika proses installasi berjalan baik maka akan tampil kira-kira seperti ini
$ sudo gem install compass
Fetching: sass-3.1.3.gem (100%)
Fetching: compass-0.11.3.gem (100%)
Successfully installed sass-3.1.3
Successfully installed chunky_png-1.2.0
Successfully installed fssm-0.2.7
Successfully installed compass-0.11.3
4 gems installed

Dari sini Anda sudah berhasil install compass sass.

Membuat Project dengan Compass Sass

pada terminal ketikkan
compass create namafolder

Maka akan menghasilkan file seperti dibawah ini

Compile Sass ke CSS

Iya, ketika kita menggunakan Compass & Sass ini kita harus meng-compile agar menjadi file .css dengan mengetikkan
compass watch

Untuk lebih jelasnya dan dokumentasi lengkap Compass dan Sass Anda klik link ini Compass & Sass

Cukup mudah bukan? pada tutorial selanjutnya kita akan coba latihan bikin sebuah contoh project menggunakan Compass dan Sass. Selamat Mencoba!

Tags

ColorLabs & Company adalah sebuah perusahaan lokal (Indonesia) yang fokus menjual produk Theme WordPress Premium, baru-baru ini mereka merilis sebuah Plugin WordPress InstaFX dan OmniGallery, berikut reviewnya :

InstaFX

Plugin InstaFX adalah Plugin yang memungkinkan kita untuk menambahkan efek filter foto yang beragam seperti layaknya sebuah filter di Instagram, Plugin ini akan menambahkan pilihan efek waktu kita upload sebuah foto disebuah post/page.

Untuk lebih jelasnya cara menggunakan Plugin ini silahkan simak Video berikut ini :

Download InstaFX WordPress Plugin

OmniGallery

Plugin ini memungkinkan kita untuk membuat sebuah galeri foto dari sosial media yang Anda punya seperti Pinterest, Instagram, Picasa, Flickr dan Facebook. Cara penggunaannya pun tidak ribet, kita hanya harus menghubungkan akun social media kita.

Untuk cara Install dan penggunaannya silahkan simak Video berikut :

Download OmniGallery WordPress Plugin

Tags

1. Download file YII nya terlebih dahulu di situs resmi Yii framework . Saya menggunakan versi 1.1.12.

 2. Lalu setelah download selesai. Maka ekstrak folder YII ke dalam htdocs pada xampp kalian.

3. Lalu buka command prompt kalian dan ketikkan cd c:\xampp\php untuk masuk ke dalam direktori xampp dan php, lalu tekan enter. Seperti gambar ini.

4. Lalu  untuk membuat kerangka aplikasi YII, saya ketikkan php.exe C:\xampp\htdocs\yii\framework\yiic webapp C:\xampp\htdocs\testyii. Perintah ini bertujuan untuk membuat folder bernama testyii ke dalam root directory c:\xampp\htdocs\ yang berdasarkan aturan yang telah dibuat oleh YII, yaitu YII telah saya copy paste ke dalam C:\xampp\htdocs\yii. Lalu setelah tekan enter maka akan muncul pertanyaan dan ketik “yes” dan tekan enter.

5. Lalu akan muncul proses instalasi seperti gambar di bawah ini. Tunggu sampai selesai.

6. Selamat YII telah terinstall dan untuk mengetahui apakah YII telah terinstal dengan baik. Buka xampp,aktifkan apache dan mysql. Lalu buka browser dan ketikkan localhost/testyii/.

Selamat Mencoba!

Tags

Font yang digunakan:

• Untuk font berukuran besar menggunakan Fredoka ( Google Font  )
• Sedangkan body text menggunakan Open sans ( Google Font )

File PSD  bisa di download disini :

Download

Ditunggu kritik & sarannya, jangan lupa komen ya masbroh & mbakbroh.

Tags

Harapan kami, semoga Elemen desain ini bisa digunakan oleh kawan-kawan sebijak mungkin. Selain Free to Download, desain ini juga Free to Edit.  Barangkali ada kawan – kawan yang ingin menyesuaikan warna dengan tema websitenya. Silahkan.

Download Ceudah PSD

Tags

CRAP yang saya maksud di sini adalah Contrast, Repetition, Alignment, Proximity. Keempat prinsip desain ini dimuat dalam buku The Non-Designer’s Design Book oleh Robin Williams pada tahun 1994. Berikut ini saya jelaskan secara singkat definisi CRAP.

• Contrast . Jika ada dua elemen yang berbeda tapi berdekatan atau saling bertumpuk, maka buatlah dua elemen tersebut berbeda satu sama lain. Contoh sederhananya bisa kita lihat tipe button mbah Google yang berlatar warna merah dan tulisan kontras berwarna putih.
• Repetition. Pengulangan, atau lebih halusnya lagi konsistensi, menjadi hal yang penting saat Anda menjadi seorang desainer web (percayalah, desain saya dulu sering dikritik oleh partner/klien kalau tidak konsisten). Coba perhatikan konsistensi penggunaan heading (panah merah) level 3 (H3) yang berwarna abu-abu dengan ukuran font yang sama. Perhatikan juga warna link (panah hijau) yang tetap biru walaupun berbeda level (heading dan paragraf).
•  Alignment. Prinsip yang ketiga ini diperlukan salah satunya agar desain kita mudah dibaca. Perhatikan gambar dibawah ini, penjelasan buku diatur menjadi 2 kolom, kolom pertama (garis bawah merah) berisi gambar dan kolom kedua (garis bawah hijau) berisi penjelasan singkat dari buku tersebut. Pada bagian penjelasan, masing-masing komponen dipisahkan dengan [enter] seperti: share button, penulis, rating, deskripsi, dsb.
• Proximity. Kata ini bisa diartikan sebagai kedekatan atau hubungan. Dalam desain web, kita mengelompokkan elemen yang dekat/sama dan juga elemen yang saling berhubungan, agar memudahkan user menjelajahi desain kita. Perhatikan pengelompokan link dan navigasi pada gambar di bawah ini:
  

Karena keterkaitan yang sangat erat, biasanya keempat prinsip ini digunakan secara bersamaan. Proximity yang sudah benar akan terasa kurang jika Contrast belum maksimal. Begitu pula dengan Repetition yang biasanya bergandengan tangan dengan Alignment yang baik.

Jadi, apakah desain Anda sudah memiliki dan mengimplementasikan dengan maksimal keempat prinsip ini?

Tags

Web Platform Docs hadir sebagai sebuah komunitas terbuka yang didukung oleh technology leaders seperti Google, Microsoft dan Adobe. Dengan dukungan dari berbagai pihak yang terbukti powerfull, sepertinya Web Platform Docs akan menjadi sebuah komunitas yang kuat dan dapat menjadi rujukan utama web developer dunia.

Sampai saat ini, konten Web Platform masih dalam versi alpha, tapi anda sudah bisa signup untuk mendapatkan akun dan melihat beberapa dokumentasi yang sudah dibuat.

Tertarik berkontribusi ? “Join the community, and start learning and sharing today“—Paul Irish.

Tags

Khusus untuk gambar (foto), saya merasa kesulitan untuk mendapatkan gambar yang bagus dan keren sehingga membuat desain website yang biasa saya buat kelihatan lebih keren dan nuansanya pas. Dulunya saya sering minta stok gambar ke teman-teman photografer amatiran, minta ijin untuk dipakai di desain, berhubung banyaknya jenis desain yang saya buat, foto tersebut kadang kurang pas, untuk beli kan agak mahal tuh *lirik dompet*

Berikut situs yang menyediakan gambar (image) yang boleh kita pakai untuk desain kita

1. CreativeCommons Search

Website ini untuk pencarian file yang bisa kita atur apakah mau cari file yang bisa dikomersilkan atau file yang bisa di modifikasi dll, kita bisa cari file gambar/foto, musik, web, dan media lainnya

2. FlickrCC

Website ini khusus untuk mencari gambar lisensi cc (creative commons) yang ada di website Flickr, koleksinya juga lumayan banyak dan bagus-bagus

3. Dummy Image Generator

Meskipun koleksi gambar di website ini tidak sebanyak di flickr, tapi anda layak untuk mencobanya

4. Flickr

Ya, flickr adalah gudangnya stok foto, dengan koleksi yang keren-keren pula, kita bisa manfaatkan tuh pencarian disana untuk mencari gambar/foto dengan lisensi cc. Klik Advanced Search untuk opsinya

Jika Anda tahu dimana lagi bisa menggunakan gambar/foto yang gratis silakan tambahkan di komentar, atau mau ngasih saya koleksi foto yang bagus-bagus? saya tunggu

Tags

Sama seperti Google Web Font, Adobe Edge Web-Font ini menyediakan beberapa font yang bisa kita pakai diwebsite kita secara gratis

Layanan ini tidak hanya menyediakan font yang disediakan oleh Adobe sendiri, tapi Google Web Font juga ada didalamnya.

Cara Pemakaian

untuk menggunakan Adobe Web-Font ini caranya sangat mudah, Anda tinggal tambahkan kode javascript yang disediakan oleh Adobe Edge Web-Font ini di halaman web Anda

<script src="http://use.edgefonts.net/acme.js"></script>

dan tambahkan kode CSS di file CSS Anda

h1 {
  font-family: acme, serif;
}

Contoh diatas saya menggunakan font dengan nama Acme. Untuk dokumentasi yang lebih lengkap silakan kunjungi halaman berikut ini

cukup sederhana bukan? Selamat mencoba!

Tags

Jadi, disini Saya ingin membahas masalah THUMBNAIL. Ada yang tahu gak ya Thumbnail itu apa?

• Thumb menurut bahasa : JEMPOL
  Nih buktinya http://translate.google.co.id/#en/id/thumb
• Thumbnail menurut bahasa : KUKU IBU JARI
  Nih buktinya : http://translate.google.co.id/#en/id/thumbnail
• Thumbnail menurut WIKIPEDIA : “Thumbnails are reduced-size versions of pictures, used to blablabla…”
  Nih buktinya : http://en.wikipedia.org/wiki/Thumbnail

Ok, jadi yang saya maksud Thumbnail disini yaitu yang menurut Mbak Wiki, yaitu sebuah ukuran lain (lebih kecil) dari suatu gambar yang berfungsi sekedar sebagai preview dalam sebuah website, agar load suatu website tidak terlalu besar.

Cara biasanya dalam membuat thumbnail ada 2 macam :

1. SCRIPT : Developer membuat script/plugin sendiri yang bekerja ketika gambar di upload/gambar di download dan disimpan di server agar bisa digunakan diwaktu yang lain. Script ini bertujuan untuk me-resize gambar asli menjadi ukuran thumb yang diinginkan.
2. MANUAL : Nah, ini yang bener-bener kelewatan Cara ini dengan me-resize sendiri gambar dengan image editor (sotosop, dll) dan diupload secara manual ke server. Kebayang gak kalau gambarnya sampai ribuan?

Nah, ada cara baru nih dalam membuat thumbnail yang sangat mudah, yaitu dengan bantuan www.ReThumb.com.Nah kebayang gak bagaimana cara kerjanya?

Cara Kerja ReThumb :

Bayangkan kamu punya gambar (image) diserver :

http://blog.ardistudio.com/wp-content/uploads/2012/09/beach.jpg

Nah, untuk bikin gambar thumbnail dengan ukuran width = 100px, maka cukup dengan URL berikut :

http://api.rethumb.com/v1/width/100/http://blog.ardistudio.com/wp-content/uploads/2012/09/beach.jpg

Cukup mudah bukan?
Masih banyak fitur lain yang bisa dinikmati… penasaran? Langsung saja buka website resminya dan pelajari API yang disediakan oleh ReThumb.com

Semoga membantu

Tags

Pada artikel ini akan kita bahas salah satu cara tips untuk meringankan website , yaitu bagaimana cara memperkecil ukuran script css/js dan mempercepat proses downloadnya. Salah satu caranya adalah menggunakan sebuah PHP5 App bernama Minify (sumber : http://code.google.com/p/minify).

Berikut beberapa cara kerja Minify :

1. Menggabungkan beberapa file script css atau js.
2. Compress file css/js dengan menghilangkan whitespace yang tidak berguna dan menghilangkan comments.
3. Menyimpan hasil compressing dan kombinasi file css/js dalam sebuah file cache (step1 & 2 dikerjakan hanya 1x selama tidak ada salah satu file yang dimodifikasi)

Dari cara kerjanya, kita bisa mendapatkan beberapa 2 manfaat utama Minify, yaitu :

Total File Size : 387,24 KB (10 request)

Total File Size : 100,89KB (3 request)

Tags

Tidak semua programmer bisa men-design dan sebaliknya sebagian besar designer tidak bisa memrogram. Disaat terjadi masalah, keduanya mempertahankan pendapat masing-masing.

Designer: banyak membuat ornamen-ornamen yang terkadang tidak jelas gunanya apa, walaupun enak dipandang.
Programmer: meskipun bisa dibikin, tapi keseringan mereka malas untuk membuatnya satu-persatu.

Designer: bertahan dengan argumennya bahwa dengan banyak ornamen maka website lebih menarik (memang iya).
Programmer: menolak pendapat designer karena semakin banyak ornamen makan akan semakin berat loading website-nya.

Designer: terlalu murah untuk memberikan semua layout per page, meskipun bagus dan bisa menjadi variasi.
Programmer: ingin menggunakan layout general, jadi tidak perlu banyak-banyak membuat template.

Designer: membuat design yang menurut mereka bagus tanpa memperdulikan feedback-nya pada website itu.
Programmer: membuat program yang bisa mendapat feedback yang bagus.

Designer: tidak terlalu tahu bagaimana hasil design mereka nantinya akan seperti apa implementasinya.
Programmer: mengerti benar bagaimana implementasi website yang bagus.

Dari kasus-kasus diatas, maka seharusnya designer dan programmer harus sering-sering berkomunikasi. Sering terjadi adalah client akan berekspektasi bahwa website yang mereka dapat akan seperti hasil design. Jika hasil design sudah melalui tahap seleksi mungkin tidak akan menjadi masalah. Namun, jika yang terjadi tanpa ada pemeriksaan terlebih dahulu dan ada sesuatu yang tidak mungkin untuk dilakukan, itulah masalahnya.

Solusi yang tepat untuk masalah-masalah seperti ini adalah membuat sebuah aturan bagi para designer, apa yang boleh dan apa yang tidak. karena lagi-lagi, yang membuat design bisa diterapkan dengan baik di website adalah programmer.

Tags

Saya baru dapat ilmu bagaimana mengganti sroller browser ini dengan CSS3. berikut kode CSS nya :

/* scroller browser */
::-webkit-scrollbar {
	width: 5px;
}

/* Track */
::-webkit-scrollbar-track {
	-webkit-box-shadow: inset 0 0 5px rgba(0,0,0,0.1); 
	-webkit-border-radius: 10px;
	border-radius: 10px;
}

/* Handle */
::-webkit-scrollbar-thumb {
	-webkit-border-radius: 10px;
	border-radius: 10px;
	background: #a6a5a5;
	-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.1); 
}
::-webkit-scrollbar-thumb:window-inactive {
	background: rgba(0,0,0,0.4); 
}

Untuk lebar scroller bisa disesuaikan, saya disini pakai 5px;

dari kode diatas itu tampilannya akan seperti di demo ini

Tags

Berikut sejarah HTML dan perkembangannya :

by Wix. Browse more Technology infographics.

Tags

Untuk mendapatkannya download framework Zend terlebih dahulu disini http://www.zend.com/community/download dan jika sudah mendapatkannya extract file tersebut.

Di dalam hasil extract terdapat dua buah folder bin dan library, copy-kan  dua folder tersebut ke sebuah direktori sebagai contoh saya copy ke E:\LearnZend.

Setelah itu kita harus menambahkan Variable Value alamat direktori bin pada path. Caranya masuk ke Control Panel lalu pilih View advance system settings, lalu klik button Environment Variables.. Setelah masuk form Environment Variables klik dua kali pada Variable Path, kemudian tambahkan ;E:\LearnZend\bin pada Variable Value.

Jika sudah menambahkan path lalu restart Windows.

Sekarang kita akan membuat sebuah project dengan menggunakan Command Prompt. Ketikkan zf create project LearnZend .

Nah sekarang pada folder htdocs terdapat folder LearnZend dan didalamnya dengan struktur file dan folder seperti ini.

Kemudian sekarang copy folder library/Zend dari yang file yang diekstrak di awal ke dalam folder LearnZend/library.

Nah sekarang kita siap untuk membuat aplikasi menggunakan framework Zend. Untuk mengaksesnya ketikkan pada browser http://localhost/LearnZend/public/. Jika instalasi dan pembuatan project telah berhasil maka pada browser akan seperti ini

Tags

Kesulitan saya adalah mendesain di Photoshop dengan tampilan grid Bootstrap, saya mencari tapi tidak ketemu, ketemunya cuma free PSD template grid bootstrap, dan itu tidak membantu saya karena harus copy paste file PSD tersebut.

Akhirnya saya membuat action bootstrap ini untuk photoshop, kenapa harus action? karena sangat efisian, gak perlu copy paste file, tinggal jalankan action tersebut.

Action yang saya buat adalah untuk grid system 12 column dengan layar 1024 dan 1280.

Download Action

Tags

Bagaimana kalau Breadcrumb tersebut dipakai di website yang menggunakan WordPress? mudah sekali.

Cari file function.php di theme WordPress Anda, dan masukkan code dibawah ini

function the_breadcrumb() {
	if (!is_home()) {
		echo '<a href="';
		echo get_option('home');
		echo '">';
		bloginfo('name');
		echo "</a> / ";
		if (is_category() || is_single()) {
			the_category(', ');
			if (is_single()) {
				echo " / ";
				the_title();
			}
		} elseif (is_page()) {
			echo the_title();
		}
	}
}

Sedangkan untuk memunculkan Breadcrumb tersebut tinggal panggil dengan

<?php the_breadcrumb(); ?>

Dari Kode di atas akan menghasilkan tampilan seperti ini

Dengan Kode diatas bisa kalian kembangkan sesuai kebutuhan, bisa menggunakan list (li) atau lainnya.

Selamat Mencoba!

Tags

Cewek 25 tahun ini pegang 2 gelar sarjana S1; akutansi dan desain komunikasi visual. Pekerjaan sebelumnya adalah desainer website di sebuah biro jasa website di Surabaya. Dari portofolio yang bisa saya lacak, karya-karyanya cukup bagus. Malah istimewa kalau boleh sedikit memberi apresiasi lebih. Tapi kenapa ia membidik posisi administrasi alih-alih posisi desainer web yang juga ditawarkan?

Ternyata tak perlu waktu lama untuk tahu motifnya. Dia takut ketika bilang bisa bikin (desain) website, orang akan melihat dirinya bisa bikin dari keseluruhan proses produksi website, A-Z. Padahal dia ‘cuma bisa’ mendesainkan saja. Paling sampai urusan slicing, menggal-menggal worksheet desain sesuai dengan struktur elemen kebutuhannya.

Saya bisa langsung memaklumi ketakutannya. Dari banyak pengalaman saya pun sering menemukan kondisi banyak orang yang tak bisa membedakan peran designer web dan web programmer dalam proses produksi website. Apalagi di kota saya, Jogja. Di sini banyak pemilik bisnis yang sudah melek internet dan merasa butuh punya website. Tapi prinsip hemat sering jadi panglima. Kalau bisa dibikin oleh satu orang, ora perlu lah harus setim segala.

Sayangnya yang salah melihat ini bukan cuma orang luar saja, para pelaku jasa pembuatan website pun rancu membedakan antara designer dan programmer. Diperparah oleh munculnya banyak blog engine (wordpress, jomla, tumblr dll) yang kian memudahkan orang membuat website. Satu lagi dampak dari teknologi yang cenderung ‘instant’, bisa bikin orang tak lagi melihat esensi.

Pastinya itu cuma efek samping saja, pasti masih banyak hal baik yang didapat dari berbagai solusi teknologi termasuk blog engine. Tak jarang saya dengar cerita rekan yang sedang memprospek calon klien pembuatan website. Sering harga yang mereka beri ditanggapi dengan, “koq mahal ya. Kan sekarang bikin website itu gratis”.

Tim dalam produksi website
Dalam pembuatan website ada banyak fungsi yang berperan, tergantung kompleksitas website yang akan dibuat. Fungsi ini yang diartikan sebagai pelaku yang terlibat. Setidaknya dalam proses pembuatan website yang terlibat ada 3 fungsi; desainer, programmer dan yang bertanggung jawab urusan isi (content).

Desainer beda dengan programmer. Desainer berada di area estetis, upaya menyentuh perasaan tentang keindahan. Programmer berada di wilayah teknis matematis. Designer bekerja dengan imaginasi, programmer dengan logika.
Dalam sebuah kerja tim, desainer bertugas menangkap preferensi persepsi pengunjung agar bisa dengan mudah tertarik (user experience) dan gampang memahami isi  pesan webite (navigasi). Programmer bertanggungjawab mewujudkan imaginasi desainer dengan fungsi dan bahasa yang dimengerti oleh sistem jejaring internet; HTML, PHP, SQL, Java, Ajax, Delphi, Oracle, Ruby dan lain-lain.

Analoginya seperti membangun gedung, perlu ada arsitek yang berimaginasi tentang gedung yang artistik, fungsional, bikin betah penghuninya atau bahkan bikin kagum orang. Lalu ada insinyur sipil yang berperan mewujudkan imaginasi ini melalui pendekatan ilmiah dan matematis.

Kalau penanggung jawab isi berperan pada materi yang akan dimuat oleh website. Menyiapkan struktur isi website, isi menu tiap menu, narasi, copywriting dan lain-lain. Kadang 3 peran ini sering perlu ada 1 orang koordinator yang mampu menjembatani 3 fungsi tadi. Biasanya ini dipegang oleh seorang manajer proyek, dia mengawal dari perumusan konsep kreatif website yang mampu menjawab kebutuhan pemilik website sampai website siap tersaji.

Kadang website masih perlu keterlibatan pihak lain. Misal dalam ranah visual bisa perlu ada fotografer, ilustrator dan lainnya. Programmer pun bisa perlu bantuan programmer lain; misal programmer data base bila data yang dikelola begitu masif. Atau tester bila situs tersebut perlu menseriusi masalah keamanan website agar ndak gampang diretas orang.

Atas nama ‘semua bisa disederhanakan’
Kerancuan programmer dan desainer pun juga terjadi dalam analogi bikin gedung atau rumah. Ada yang menyederhanakan arsitek juga bisa diserahin tugas hingga tahap pembangunan. Atau ahli sipil pun bisa diminta membuat desain arsitekturnya.

Tak salah memang. Dalam keilmuan mereka pasti ada potongan area yang sama. Arsitek pun pasti belajar mengenai dasar-dasar ketekniksipilan, meski cuma mendasar. Secara etika profesional pun memungkinkan arsitek menangani tahapan pembangunan pada gedung dengan batasan hingga 3 lantai. Lebih itu harus pakai ahli sipil, setidaknya ini perkara keamanan gedung.

Ahli sipil pun pasti juga bisa ‘dipaksa’ membuat desain arsitektur bangunan maupun rumah. Apalagi kalau yang pesan tak terlalu mikirin orisionalitas. Banyak desain yang bisa dicomot. Atau sekedar bangunan ala kadarnya yang tak memusingkan estetika.

Kondisi yang sama, programmer pun pasti bisa bikin website tanpa bantu desainer web. Programmer pasti ndak kesulitan megang aplikasi desain yang sering dipakai buat desain web semacam fireworks, photoshop, in-design atau malah coreldraw. Tapi jangan berharap solusi kreatif atau orisionalitas atas user experience dan navigasi. Toh sekarang juga banyak website yang menyediakan templete atau contoh desain yang bisa dipakai sebagai referensi.

Pun designer bisa bikin website tanpa programmer. Kini ada banyak blog engine yang bisa menyederhanakan tahapan koding dan desain. Fenomena ini begitu banyak kita lihat, programmer dan desainer menjual jasa mereka secara mandiri tanpa keterlibatan yang lain.

Seperti ahli sipil dan arsitek, programmer dan designer web pun punya irisan area. Designer yang baik pasti dia akan mengikuti perkembangan teknologi proggraming web. Ia perlu tahu imaginasi yang bisa diwujudkan dengan HTML5 ataupun CSS3. Ia juga paham konsep tableless ataupun responsive web yang kini sedang marak. Cuma pastinya pemahaman ini tak menuntut dia paham detil hingga pada aspek teknis.

Lalu bagaimana urusan isi web? Ini juga bisa disederhanakan lagi. Boleh lah ada ahli yang bilang bikin website itu content matter, isi adalah panglima. Cuma banyak orang yang tak memusingkan masalah ini. Website kafe, hotel atau studio foto sudah ada pakemnya harus diisi apa, ndak usahlah mikir sesuatu yang baru di situ. Ndak usah mikir karakteristik tiap entitas bisnis dan konsep komunikasi pemasaran yang lebih komunikatif.

Tak ada yang salah dengan kondisi ini, selain sekedar banyak yang sudah tak lagi membedakan fungsi dasar mengapa ada istilah ‘programmer’ dan ‘designer’. Toh kebutuhan pasar memang masih banyak yang membutuhkan kesederhanaan ini. Mereka perlu punya website hanya untuk memastikan lembaga mereka tersedia di internet. Kayak mereka punya kartu nama, selain logonya tak ada elemen yang beda dengan kartu nama-kartu nama lainnya.

Entitas yang merasa perlu websitenya ditangani dengan pendekatan yang benar lazimnya memang sudah sadar bahwa mereka perlu berinvestasi membangun mereknya (branding). Mereka merasa perlu ada pembeda (distinctive) dalam setiap identitas yang ia bikin (corporate identity) untuk bisa terlihat diantara bejibun pesaing. Mereka yang sudah sadar membabangun ikatan emosi merek dengan pelanggan. Mereka sudah berpikir mengenai modifikasi persepsi untuk membangun citra positif yang akan berdampak pada reputasi.

Sekarang, jenis programmer web atau designer web seperti apakah dirimu?

Tags

Salah satu masalah dalam pengaturan thumbnail adalah ukuran image. Ketika kita tidak memiliki kontrol terhadap ukuran image yang digunakan (misalnya pada web user-generated content), ukuran image thumbnail seringkali tidak sesuai yang kita harapkan seperti pada gambar 1.1.

Gambar 1.1 — Diambil dari bukalapak.com 3 Juni 2012

Pada contoh di atas, ukuran thumbnail yang digunakan adalah 100px × 100px. Tetapi, karena gambar yang digunakan tingginya kurang dari 100px (atau gambar berbentuk persegi panjang) sehingga terdapat ruang kosong di bawah gambar (seperti yang ditunjukkan oleh tanda panah).

Berikut ini adalah salah satu trik HTML & CSS yang dapat digunakan untuk menyiasati masalah tersebut:

CSS:

div.figure {
        width:100px;
        height:100px;
        overflow:hidden;
    }
    div.figure > div {
        width:100px;
        height:100px;
        display:table-cell;
        vertical-align:middle;
    }
    div.figure > div img {
        *width:100px;
        max-width:100px;
        display:block;
        margin:0 auto;
    }

HTML

<div class="figure">
        <div>
            <img src="images.jpg" alt="" />
        </div>
    </div>

Kita bisa menggunakan CSS display:table-cell dan vertical-align:middle untuk menyiasati agar gambar selalu berada di tengah secara vertikal. Sedangkan untuk posisi horisontal (misalnya ketika ukuran lebar image kurang dari 100px) ditambahkan display:block;margin:0 auto; agar posisinya tetap di tengah.

Karena fungsi overflow tidak bisa digunakan pada elemen display:table-cell; maka kita tambahkan CSS overflow:hidden; pada elemen <div class="figure"> agar thumbnail tidak melar ke bawah ketika tinggi image yang digunakan lebih dari 100px.

Untuk demo, dapat dilihat disini(JSFiddle).

Happy coding…

Tags

Bagi pengguna WordPress sekarang kita bisa menambahkan efek jadul seperti yang ada di instagram tersebut, ya ini adalah plugin wordpress yang memberikan efek foto jadul.

VintageJs adalah plugin yang memberikan efek yang unik seperti di instagram, plugin ini menggunakan elemen canvas HTML5 sehingga menggasilkan efek jadul.

Cara pakainya sangat sederhana, download dan install plugin seperti bisa, dan upload file di wordpress seperti biasa juga, nanti plugin tersebut akan menambahkan Vintage Filter di jendela upload seperti dibawah ini

Sekarang kita bandingkan yang pakai efek sama yang tidak

Download VintageJs dan selamat mencoba!

Tags

Drupal mulai dikembangkan pada tahun 1999 oleh lelaki Belgia bernama Dries Buytaert. Sama seperti kebanyakan CMS open source lainnya, Drupal mulai dikembangkan oleh sebuah komunitas kecil. Semula mereka menamakan website mereka Drop.org. Kemudian ketika dirilis secara resmi pada tahun 2001, Dries menamakan teknologi web mereka Drupal yang merupakan kata serapan bahasa Inggris dalam bahasa Belanda yang berarti “tetesan”. Nama ini juga menginspirasi logo mereka berupa sesosok wajah yang dibentuk dari tetesan air lengkap dengan mata, hidung, dan senyuman yang optimis.

Drupal ditulis dalam bahasa pemrograman PHP dengan menggunakan MySQL atau PostgreSQL sebagai databasenya. Sejak versi terbarunya (7.0) Drupal mulai support dengan fasilitas database lainnya seperti MarinaDB.

CMS ini terkenal sangat ringan dan dinamis. File instalasinya hanya sebesar 1,1 Mb. Namun setelah instalasi kita akan tertarik untuk menambahkan beberapa modul pelengkap yang menyebabkan file instalasinya menjadi besar. Modul-modul ini yang akan membantu kita membangun website berbasis Drupal dengan berbagai macam bentuk misalnya personal blog, forum, web e-commerce, web komunitas, sampai multisite.

Setiap konten yang dibuat oleh user (user generated content) selalu disimpan dalam “node”. Di sinilah kunci fleksibilitas Drupal. Bagi web desainer pasti tidak akan percaya betapa mudahnya mengatur tampilan konten di dalam Drupal. Untuk memahami alur tampilannya bisa dilihat di bawah ini.

Saya belum lama mengoprek Drupal, namun bisa saya sebutkan beberapa keunggulan Drupal :

1. Saat ini ada 17.354 orang pengembang yang resmi.
2. Terdapat 15 ribu lebih modul.
3. Sangat fleksibel dan dinamis.
4. Untuk mempermudah desain web ada beberapa pilihan theme framework.
5. Komunitas yang dikelola dengan rapi sehingga mudah mencari technical support.

Selanjutnya tunggu posting-posting saya selanjutnya yang akan share tentang modul-modul dan juga beberapa theme framework yang penting digunakan saat mengembangkan web Drupal.

Sumber :

1. Murad, Maulana. 2009. Membangun Website Dinamis Tanpa Background IT dengan CMS Drupal 6.0. Jakarta:Penerbit Andi
2. www.drupal.org

Tags

Persyaratan

Dalam penulisan tutorial ini saya mengasumsikan anda telah mengetahui HTML, CSS dan Javascript. Tutorial ini menggunakan Javascript dan dijalankan pada browser. Regex juga telah didukung oleh banyak programming/scripting language seperti PHP dan Ruby, dan memiliki implementasi yang berbeda-beda tergantung masing-masing bahasa. Browser yang saya gunakan adalah Google Chrome 18.0.1025.162 m.

Saya mungkin menggunakan istilah-istilah saya sendiri yang mungkin tidak umum digunakan. Oleh karena itu saya menyarankan anda lebih baik mengerti maksud dari istilah yang saya gunakan dari pada mengingat nama-nama istilahnya. Tuturial ini bersifat amatiran dan bukan profesional, segala kekurangan dalam tulisan ini harap dimaklumi.

Bahasan Tutorial

Bahasan tutorial ini tentang dasar-dasar regex yang mencakup sintak, modifier, wildcard, grouping, group indexing, backrefrences index dan skip indexing. Untuk modifier, yang akan dibahas hanya Global (g) dan Case-insensitive (i). Modifier Multiline (m) saya pikir lebih cocok dibahas bersama anchor regex (^ dan $).

Persiapan

Persiapan yang diperlukan untuk mengikuti tutorial ini adalah teks editor, browser, dan dua file. File yang saya gunakan bernama index.html dan init.js. Isi file index.html adalah sebagai berikut

<!DOCTYPE html>
<html>
    <head>
        <title>RegExp</title>
        <style>
            #regex {
                font-size: 16px;
                line-height: 1.5;
            }
            code mark:nth-child(odd) {
                background-color: #0ff;
            }
        </style>
        <script type="text/javascript">
            RegExp.prototype.match = function(str) {
                document.getElementById("regex").innerHTML += "<code>" + str.replace(this, function(v) {
                    return "<mark>" + document.createTextNode(v).data + "</mark>";
                }) + "</code>\n";
            };
        </script>
    </head>
    <body>
        <pre id="regex"></pre>
        <script type="text/javascript" src="init.js"></script>
    </body>
</html>

index.html ini hanya berfungsi sebagi “viewer”. Anda tidak perlu mengubah isi file tersebut selama mengikuti tutorial ini. Kita hanya akan mengubah isi file init.js dan melihat hasilnya di index.html. Jadi, broswer anda hanya akan membuka index.html sedangkan teks editor anda membuka init.js. Isi file init.js sebagai berikut

(function() {

})();

kode2 yang dituliskan nanti sebaiknya berada diantara (function() { dan })();. untuk mengetahui apakah kode berjalan sesuai yang diinginkan, maka tuliskan kode dibawah ini dalam file init.js.

/dunia/.match("Halo dunia desain web");

/dunia/g.match("Halo dunia desain web dari dunia lain");

sebelumnya perlu diingat bahwa kode diatas hanya parsial. Keseluruhan isi file init.js adalah seperti dibawah ini.

(function() {
/dunia/.match("Halo dunia desain web");

/dunia/g.match("Halo dunia desain web dari dunia lain");
})();

Jika sudah, maka buka/refresh file index.html pada browser anda. Jika tampilan seperti pada gambar 1, maka persiapan telah selesai dan kita siap kelangkah selanjutnya.

gambar 1. Tampilan index.html jika persiapan berhasil

ah iya, dalam gambar diatas, saya mengakses index.html dari URL http://www.lab.local/regexp/. Kasus anda mungkin berbeda tergantung dimana anda menyimpan file index.html.

Sintak

Regex memiliki sintak yang terdiri dari delimiter, pattern dan modifier. Pada contoh /dunia/g, / (garis miring) adalah delimiter, string dunia adalah pattern dan g adalah modifier. Delimiter digunakan untuk menentukan dimana pattern berawal dan berakhir. Pada javascript, anda hanya bisa menggunakan garing sebagai delimiter. Pattern adalah pola string yang ingin ditemukan atau dicocokan. Modifier adalah mode regex meng-handle hasil pencarian string atau teks.

Regex yang anda bangun akan mencari substring yang sesuai dengan pola (pattern). Pada gambar 1, substring “dunia” yang ter-highlight adalah substing yang “ditemukan” regex, tidak perduli dimanapun substring “dunia” tersebut berada. Perhatikan hasil regex berikut untuk lebih jelasnya.

/dunia/.match("dunia diawal string");
/dunia/.match("string diakhiri dunia");
/dunia/.match("mencariduniadimanapunkeberadaannya");

Modifier

Seperti yang telah dijelaskan sebelumnya, modifier berfungsi untuk mengatur hasil pencarian regex. Terdapat 3 modifier umum yang di-support berbagai bahasa pemograman, yaitu Global, Case-insensitive dan Multiline. Berikut ini yang akan saya coba jelaskan adalan modifier Global dan Case-insensitive. Multiline akan dibahas berikutnya bersama dengan anchor.

g : Global

Contoh dari gambar 1 hanya terdapat 2 regex yang mencari substring “dunia” dalam teks “Halo dunia desain web” dan “Halo dunia desain web dari dunia lain”. Regex pertama /dunia/ tidak mengunakan modifier apapun. Keadaan ini biasanya disebut mode standart. Dalam mode standart, regex hanya mencari satu substring saja yang cocok dengan pattern. Coba anda masukkan kode dibawah ini dan lihat hasilnya.

/dunia/.match("Halo dunia desain web dari dunia lain");

hasilnya sebagai berikut

gambar 2. standart mode

Anda bisa lihat, walaupun terdapat 2 substring “dunia” dalam input string “Halo dunia desain web dari dunia lain”, hasil pencarian regex hanya menghasilkan satu kata “dunia” yang sesuai dengan pattern (dunia). Jika anda ingin mencari semua substing pada input string yang sesuai dengan pattern, maka anda bisa menggunakan modifier g seperti pada gambar 1.

i : Case-insensitive

Mode standart bersifat case-sensitive, artinya huruf besar dan kecil diperhitungkan dalam mencari substring yang sesuai dengan pattern. Anda dapat membuat pencarian regex bersifat incase-sensitive dangan menambahkan modifier i. untuk lebih jelasnya, perhatikan kode berikut dan hasilnya.

var regexpEl = document.getElementById("regex");

regexpEl.innerHTML += "<b>standar mode</b>\n";
/dunia/.match("dunia DUNIA duNiA lain");
/DUNIA/.match("dunia DUNIA duNiA lain");
/Dunia/.match("dunia DUNIA duNiA lain");

regexpEl.innerHTML += "--------------------------\n";
regexpEl.innerHTML += "<b>case-insensitive mode</b>\n";
/dunia/i.match("dunia DUNIA duNiA lain");
/DUNIA/i.match("dunia DUNIA duNiA lain");
/Dunia/i.match("dunia DUNIA duNiA lain");

regexpEl.innerHTML += "--------------------------\n";
regexpEl.innerHTML += "<b>case-insensitive dan global mode</b>\n";
/dunia/ig.match("dunia DUNIA duNiA lain");
/DUNIA/ig.match("dunia DUNIA duNiA lain");
/Dunia/ig.match("dunia DUNIA duNiA lain");

hasil kode diatas adalah sebagai berikut

gambar 3. incase-sensitive modifier

Matacharaters

Dalam contoh-contoh sebelumnya, pattern regex yang digunakan hanyalah string biasa, seperti “dunia”. String-string seperti itu biasanya disebut literal string, yang tiap karakternya benar-benar dicocokan persis antara pattern dan string inputnya. Terdapat karakter-karakter yang tidak bersifat literal yang disabut metacharacter. Metacharacter adalah karakter-karakter yang memiliki arti spesial dalam pattern regex tergantung dimana karakter tersebut digunakan. Metacharacter dalam regex adalah . \ + * ? [ ^ ] $ ( ) { } = ! < > | : -.

Escaping

Escaping metacharacter adalah blackslash (\). Escaping maksudnya mengabaikan arti spesial dari karakter sehingga bersifat literal. Escaping hanya berlaku pada metacharacter dan delimiter, sedangkan penggunaan backslash pada karakter lain dapat memiliki arti berbeda. Backslash digunakan tepat sebelum karakter yang akan diescape.

Kasus escaping misalnya pada pattern yang memiliki karakter garing yang merupakan delimiter. Anda tidak bisa menuliskan pattern “http://” dalam regex anda seperti /http:///i, kode tersebut akan menganggap pattern anda adalah “http:” karena string tersebut berada diantara delimiter (/http:///i) dan garing setelahnya (/http:///i) akan dianggap sebagai modifier yang tidak diketahui sehingga bersifat error.
Jadi, untuk mengabaikan arti karekater garing sebagai delimiter, anda perlu meng-escape-nya. perhatikan contoh berikut dan hasilnya pada gambar 4.

/http:\/\//.match("http://www.belajarwebdesign.com");
/http:\/\//.match("ftp://www.belajarwebdesign.com");

gambar 4. escape backslash pada karakter slash (garis miring)

hmmm… tapi tunggu dulu! bukankah dalam pattern /http:\/\//i diatas ada karekter titik dua (:) yang juga merupakan metacharacter, kenapa tidak diescape? inilah maksud saya sebelumnya bahwa “arti spesial dalam pattern regex tergantung dimana karakter tersebut digunakan“. Dalam contoh ini karakter titik dua tidak bersifat metacharacter, kita akan membicarakan kapan titik dua bersifat metacharakter nantinya.

Backslash dan Special Character

Bakckslah juga dipakai sebagai pembentuk special character, contohnya control character dan ASCII karakter yang tidak ada pada keyboard standart. Penggunaan karakter backslash (“\”) sebelum katarter “t” akan memiliki arti bahwa kedua karater tersebut adalah satu karakter, yaitu horizontal tab (tab). Jadi regex /\t\t/ akan mencocokan dua karater tab, bukan string dengan karakter berurutan “backslash, t, backslash, t”. Control characters yang dapat anda gunakan pada regex adalah sebagai berikut.

• \a alert (bell).
• \b backspace
• \e ASCII escape character
• \f form feed
• \n newline
• \r carriage return
• \t horizontal tab
• \v vertical tab

Selain itu, anda juga dapat mengases karakter dari code hexadecimal Unicode dengan format \x<code><code> atau \u<code><code><code><code>. Misalnya katakter copyright (©) dapat ditulis dengan \xA9 atau \u00A9. Perlu diketehui bahwa format tersebut berlaku dalam javascript, beberapa bahasa pemograman memiliki formatnya sendiri, seperti PHP mengguanakan \x dibandingkan \u.

Wildcard

Karakter wildcard dalam regex adalah titik (.). Wildcard dapat dicocokan dengan “hampir apa saja”, bisa huruf, angka atau tanda baca termasuk titik. Karakter yang tidak bisa dicocokan dengan wildcard adalah baris baru (“\n“). Satu wildcard hanya cocok dengan satu karakter. Contoh kode regex wildcard seperti dibawah ini, dan hasilnya pada gambar 5.

/w.b/g.match("web wwb w3b w@b w.b w?b w b w\nb w\tb w\xA5b woob");

gambar 5. wildcard cocok dengan semua karakter kecuali baris baru ("\n")

Anda perlu teliti ketika menggunakan wildcard, karena pemula regex biasanya tertipu saat menggunakan wildcard. Contohnya anda ingin mencari apakah kata “file.js” ada dalam suatu path file. Regex /file.js/ memang cocok dengan string yang memiliki substring “file.js” seperti yang diinginkan. Akan tetapi, regex tersebut juga akan cocok dengan substring “file-js”, “fileOjs”, “file5js” dll. Jadi, regex untuk mencari hanya substring “file.js” adalah /file\.js/.

Alternation

Alternation digunakan untuk membuat subpattern. hmmmm… subpattern? ini sebenarnya istilah saya sendiri hehehehe, saya akan mencontohkan agar anda mengerti subpattern yang saya maksudkan. Misalnya anda ingin mancari substring “jpg”, “gif” dan “png” dalam suatu string, maka pattern masing-masing substring tersebut adalah /jpg/, /gif/ dan /png/. Hal tersebut tidak efisien jika anda menggunakan 3 pattern untuk satu input string. Tiga pattern tersebut dapat digabung dan memiliki makna “alternatif”. Patternnya adalah jpg|gif|png. Anda bisa lihat bahwa karakter pipe (|) adalah metacharacter untuk alternation. Regex /jpg|gif|png/ memiliki arti cari substring “jpg” atau “gif” atau “png”. Perhatikan hasil kode regex berikut pada browser (index.html) anda.

/jpg|gif|png/g.match("avatar.gif");
/jpg|gif|png/g.match("avatar.png");
/jpg|gif|png/g.match("banner.png");
/jpg|gif|png/g.match("banner.jpg");
/jpg|gif|png/g.match("pngjpggif");

Grouping

Grouping adalah pengelompokan subpattern (ekpresi) tertentu sehingga dapat dibedakan dengan ekspresi lainnya. Groping menggunakan buka kurung (“(“) dan tutup kurung (“)”) dan ekspresi diletakan diantara buka kurung dan tutup kurung. Kasus penggunaan grouping misalnya mencocokan file dengan nama “banner” yang memiliki ektensi “jpg”, “gif” atau “png”. Pattern yang dapat digunakan adalah /banner\.jpg|banner\.gif|banner\.png/. Dari pattern tersebut anda bisa melihat bahwa hanya terdapat perbedaan pada ektensi jpg, gif dan png. Ekstensi tersebut dapat digabung dalam satu alternation menjadi jpg|gif|png, dan untuk membedakan bahwa jpg|gif|png adalah kelompok tersendiri, maka dilakukan grouping, sehingga regex akhirnya adalah /banner\.(jpg|gif|png)/. Regex /banner\.jpg|banner\.gif|banner\.png/ memiliki arti cari substring “banner.jpg” atau “banner.gif” atau “banner.png”, sedangkan regex /gambar\.(jpg|gif|png)/ memiliki arti cari substring “banner.” diikuti dengan substring “jpg” atau “gif” atau “png”. perhatikan contoh kode dibawah ini dan hasilnya pada gambar 6.

/banner\.jpg|banner\.gif|banner\.png/.match("path/avatar.gif");
/banner\.jpg|banner\.gif|banner\.png/.match("path/banner.gif\n");

/banner\.(jpg|gif|png)/.match("path/avatar.gif");
/banner\.(jpg|gif|png)/.match("path/banner.gif\n");

/banner\.(jpg|gif|png)/.match("path/banner.png");
/banner\.(jpg|gif|png)/.match("path/banner.jpg");

gambar 6. grouping regex

Nesting Grouping

Groping juga dapat dilakukan dalam grouping lain, yang disebut nesting grouping atau pengelompokan bersarang. Misalnya anda ingin mencocokan suatu pola filepath seperti “gambar/banner.png”. Sebut saja “gambar” adalah dirname dan “banner.png” adalah filename, dimana filename terdiri dari basename yaitu “banner” dan extension yaitu “png”. Kasusnya adalah nama extension bisa “jpg”, “gif” atau “png”, nama basename bisa “banner” atau “top”, format filename adalah basename
diikuti titik (.) lalu extension, nama dirname bisa “gambar” atau “image” dan format filepath adalah dirname diikuti garing (/) lalu filename. Regex untuk kasus tersebut dapat ditulis /((gambar|image)\/((banner|top)\.(jpg|gif|png)))/. Regex tersebut memiliki 5 kelopok (groups). Pengelompokan dibaca dari kiri ke kanan, sehingga urutan kelompok dari pattern tersebut adalah:

1. filepath (/((gambar|image)\/((banner|top)\.(jpg|gif|png)))/)
2. dirname (/((gambar|image)\/((banner|top)\.(jpg|gif|png)))/)
3. filename (/((gambar|image)\/((banner|top)\.(jpg|gif|png)))/)
4. basename (/((gambar|image)\/((banner|top)\.(jpg|gif|png)))/)
5. extension (/((gambar|image)\/((banner|top)\.(jpg|gif|png)))/)

Jadi, jika regex /((gambar|image)\/((banner|top)\.(jpg|gif|png)))/ digunakan untuk mencocokan string “asset/gambar/top.jpg”, maka nilai dari pengelompokannya adalah:

1. filepath (gambar/top.jpg)
2. dirname (gambar)
3. filename (top.jpg)
4. basename (top)
5. extension (jpg)

Contoh nesting kode nesting group dan hasilnya dapat dilihat pada kode dibawai ini dan gambar 7.

/((gambar|image)\/((banner|top)\.(jpg|gif|png)))/
    .match("gambar/top.gif");
    
/((gambar|image)\/((banner|top)\.(jpg|gif|png)))/
    .match("asset/gambar/top.jpg");
    
/((gambar|image)\/((banner|top)\.(jpg|gif|png)))/
    .match("image/banner.png");
    
/((gambar|image)\/((banner|top)\.(jpg|gif|png)))/
    .match("image/banner.jpeg");

gambar 7. nesting grouping

Backrefrences Index Group

Urutan pengelompokan pada penjelasan diatas disebut index group. Index group ini dapat anda pakai lagi dalam pattern regex dengan menggunakan backrefrences index atau indexing. Indexing dilakukan dengan menggunakan backslash (\) diikuti nomor index, contohnya \1, \2, \3 dst. Untuk mempermudah penjelasan saya akan menggunakan contoh kasus.

Misalnya anda ingin membuat pola attribute HTML yang memiliki tanda petik (quote) yang harus sama antara open dan close-nya, contohnya adalah src=”banner.png” atau src=’banner.png’. Anda tidak bisa membuat regex seperti /src=("|')banner\.png("|')/ untuk kasus ini. regex tersebut memang akan cocok dengan src=”banner.png” dan src=’banner.png’, tetapi cocok juga dengan src=“banner.png‘ atau src=‘banner.png“ (perhatikan kedua quotenya) dimana string tersebut seharusnya tidak valid. Disinilah indexing berfungsi, anda hanya perlu meng-group open quote, dan close quote akan menyesuaikan open quote, jadi jika open quote adalah tanda petik, maka close quote juga tanda petik, demikian halnya dengan petik tunggal. Regexnya adalah /src=("|')banner.png\1/. Backrefence \1 digunakan karena group ("|') berada pada index 1, jika misalnya anda melakukan gruoping lebih dari satu, maka anda perlu teliti terhadap urutan index yang anda inginkan. Contoh kode dan hasilnya dapat anda lihat dibawah ini.

/src=("|')banner.png\1/.match("src=\"banner.png\"");
/src=("|')banner.png\1/.match("src=\'banner.png'");
/src=("|')banner.png\1/.match("src=\"banner.png'");
/src=("|')banner.png\1/.match("src='banner.png\"");

gambar 8. backrefrences index

Skip Indexing

Grouping regex secara otomatis akan mengindex hasil grouping sehingga dapat digunakan untuk backrefrences. Indexing dapat di-skip dalam gruoping dengan menggunakan 2 metacharater yaitu tanda tanya dan titik dua (?:), yang diletakkan setelah kurung buka (“(“). Mari gunakan kembali contoh grouping pattern /((gambar|image)\/((banner|top)\.(jpg|gif|png)))/ sebelumnya. Jika anda ingin men-skip filename, maka anda dapat mengubah gruoping terhadap filename dari ((banner|top)\.(jpg|gif|png)) menjadi (?:(banner|top)\.(jpg|gif|png)) sehingga pattern lengkapnya adalah /((gambar|image)\/(?:(banner|top)\.(jpg|gif|png)))/. Hasil indexing akan mengabaikan group filename, dan melihat grouping berikutnya yaitu basename. Jika group basename juga di-skip, maka indexing akan dilakukan pada group berikutnya, dalam kasus ini adalah extension, demikian seterusnya. Regex /((gambar|image)\/((banner|top)\.(jpg|gif|png)))/ dan /(?:(?:gambar|image)\/(?:(?:banner|top)\.(jpg|gif|png)))/ memiliki hasil kecocokan yang sama terhadap suatu string, yang berbeda hanyalah urutan indexnya, dimana regex kedua hanya mengindex extension sehingga extension berada pada index pertama.

Penutup

Regex memiliki topik yang cukup luas, akan terlalu banyak jika dibahas dalam satu postingan. Jika ada kesempatan, saya akan melanjutkan tulisan ini dalam postingan lainnya. Jika anda ingin melanjutkan memahami regex setelah membaca tutorial ini, maka saya sarankan anda lanjutkan dengan memahami character class, character type, anchor dan repetation. Silahkan googling topik-topik regex tersebut.

Tags

Desain website yang bagus dan menarik sangat menyenangkan untuk dilihat, apalagi kalau desainnya lucu, cute dan menggemaskan . Desain website yang girly (cewek banget) bisa dilihat dari elemen-elemen yang ada semisal warnanya yang soft, pink, biru soft dll.

dan ternyata untuk mendesain website yang girly ini tidak mudah, apalagi buat webdesigner cowok, Anda harus memahami dulu apa itu cewek, apa yang diinginkan cewek, apa yang cewek suka *loh kok malah gini hehehe…

Oke lansung saja, berikut 10 inspirasi website yang cewek banget (girly)

Veerle’s Blog

Bienvenido

Super Gilr

Playtend

Anne Koning

O’lala

Aisha

Gisele Jaquenod

Caleste du Preez

Putzengel

Semoga Terinspirasi!

Tags

Nah.. pasti anda mengria kalau itu adalah sebuah image/gambar.  Itu adalah segitiga yang dibuat dengan border. nahh bagaimana cara membuatnya…??

Dari berbagai tutorial yang saya baca, saya belum mengerti betul bagaimana membuat segitiga karena tutorialnya tidak menjelaskan darimana segitiga itu berasal.. hanay dikasih kode-kode CSSnya saja.

Nah oleh karena itu saya melakukan eksperimen hehehehe…

OK.. pertama buat sebuah BOX dulu dengan ukuran 200 x 200 pixel, dengan border solid berukuran 100px, kalau bisa berikan warna yang berbeda-beda disetiap bordernya. contoh hasilnya akan seperti ini:

Kalau kesulitan membuatnya ini saya kasih kode CSSnya:

.coba{width: 200px;
height: 200px;
border-top: 100px solid #c0c0c0;
border-bottom: 100px solid green;
border-left: 100px solid #00ff00;
border-right: 100px solid #212121;}

Nahh.. bagaimana udah apa belumm…??? sekarang coba ganti ukuran BOXnya menjadi 0px “nol pixel” maka boxnya akan menjadi seperti ini:

Nahh… lihatt tuh segitiganya udah terbentuk.. ada empat segitiga.  Eh, itu persegi dodol?? .. Yaa itu memang persegit tapi lihat diagonalnya donk.. kalau dipecah bisa jadi segitiga.. mau bukti!!!

OK, sekarang coba hilangkan 3 segitiga pada persegi tersebut. Caranya ganti warna 3 segitiga yang mau dihilangkan menjadi transparent.

Jadi jika saya ingin membuat segitiga yang menghadap ke atas maka kodenya menjadi seperti ini:

.coba{width: 0px;
height: 0px;
border-top: 100px solid transparent;
border-bottom: 100px solid green;
border-left: 100px solid transparent;
border-right: 100px solid transparent;}

Lihat kode tersebut border-top, border-left dan border-right warnanya transparent. jadi yang akan tampak adalah border-bottom saja. udah mengerti kan maksud saya??

OK lahh kalau begitu sekian dulu tutorial dari saya.. semoga bermanfaat.. jika anda masih belum mengerti silahkan diskusikan di komentar yaa..!! hhehehe..

Selamat mencoba!

Tags

Kode HTML

<div id="ardianta">
    <h2>Tab 1</h2>
    <div class="isi">
        Tab pertama.. isi apa yaa???
    </div>
    <h2>Tab 2</h2>
    <div class="isi">
        Aku yang selalu menunggumu
    </div>
    <h2>Tab 3</h2>
    <div class="isi">
      <a href="https://www.facebook.com/groups/tkj.smkn2kuripan/">Aku ingin bertanya?</a>
    </div>
    <h2>Tab 4</h2>
    <div class="isi">
        <a href="http://www.ardianta.tk/2012/04/vartical-tab-view-dengan-jquery.html" rel="dofollow" target="blank">View Tutorial</a>
    </div>
    <h2>Tab 5</h2>
    <div class="isi">
        Ini tab terakhir [www.ardianta.tk]
    </div>
</div>?

Kode Javascript

$(function() {
 $('#ardianta .isi').hide();
 $('#ardianta h2:first').addClass('active').next().slideDown('show');
 $('#ardianta h2').click(function() {
 if($(this).next().is(':hidden')) {
 $('#ardianta h2').removeClass('active').next().slideUp('slow');
 $(this).toggleClass('active').next().slideDown('slow');
 }
 });
 });

Kode CSS

#ardianta {
 width:90%;
 margin:10px auto;
 border:2px solid white;
 -webkit-box-shadow:0px 1px 3px rgba(0,0,0,0.4);
 -moz-box-shadow:0px 1px 3px rgba(0,0,0,0.4);
 box-shadow:0px 1px 3px rgba(0,0,0,0.4);
}

#ardianta h2 {
 cursor:pointer;
 margin:0px 0px;
 padding:7px 15px;
 background-color:black;
 font:bold 11px Verdana,Arial,Sans-Serif;
 color:#e6e6e6;
 text-shadow:0px 1px 0px rgba(0,0,0,0.4);
}

#ardianta .isi {
 background-color:#ddd;
 padding:10px 15px;
 color:black;
 height:120px;    
}

#ardianta h2.active {
 background-color:#4BB347;   
}?

Note:

$(‘#ardianta h2:first’).addClass(‘active’).next().slideDown(‘show’); ini maksudnya adalah tab pertama ditampilkan untuk mengganti supaya tab pertama agar tidak ditampilkan maka ganti slideDown(‘show’) menjadi slideUp(‘hide’).

Demonya bisa dilihat di: http://jsfiddle.net/ardiantasisgo/w3ugh/

Karena saya baru mempelajari tentang JQuery, jadi pengetahuan saya tentang JQuery kurang banyak, jadi mungkin jika saya sudah menguasai JQuery saya akan kelupas lebih  dalam lagi.

Selamat mencoba!

Tags

Sejarah Singkat

Sedikit cerita tentang Web Typography. Awalnya setiap browser memiliki standar format font masing-masing dari “TrueDoc”, “EOT”, “OTF/TTF”, akhirnya muncul “Web Open Font Format” atau biasa disingkat “WOFF”. Dalam perjalanannya, Web typography banyak mengalami kendala, terutama masalah “Lisensi”. Dengan menyertakan/embed @font-face maka dengan mudah orang akan mendapatkan font tersebut. Hal ini dikarenakan akses menuju font yang dimaksud berupa tautan, dan setiap orang bisa mengakses font tersebut.

Bertolak belakang dengan cara yang mudah tadi, artis typography merasa kuatir dengan cara tersebut. Ini berarti orang akan dengan mudah mendapatkan font mereka secara gratis. Tak perlu saya jelaskan panjang lebar, tentunya kita tahu, mereka juga cari makan. So, we must respect them too. Kita juga harus menyiapkan biaya ekstra untuk lisensi font mereka (untuk yang berbayar). Jika kita ingin dihargai oleh mereka kita juga harus menghargai mereka. Toh sama-sama menguntungkan.

Mungkin saya cukupkan untuk latar belakang dari Web Typography ini, jika ingin membaca lebih lanjut silahkan baca tautan dari referensi yang saya sertakan.

Generic Fonts

Ada 5 generic fonts yang digunakan dalam web. Font tersebut adalah: Sans-Serif, Serif, Monospace, Cursive, dan Fantasy. Kita tidak perlu menambahkan font ekstra untuk kelima font tersebut, karena secara default browser bisa merender font-font tersebut.

Hasil Render MacOS

Hasil Render Linux

Hasil Render Windows

Hasil Render iPhone

Hasil Render iPad

Hasil Render Mozilla Mobile

Hasil Render Android Mobile

Hasil Render Android Tab

Gambar diatas adalah hasil render font dari pelbagai media. Setiap media memiliki generic font masing-masing. Kita para developer dituntut untuk membuat font tersebut tampil identik di setiap media.

Dasar Styling Font

Pada dasarnya, untuk menampilkan sebuah font type untuk sebuah desain situs cukup melampirkan jenis font tersebut ke sebuah elemen HTML. Berikut adalah cara dasarnya

p { font-family: sans-serif;}
.header { font-family: serif;}

Tentu saja jika hanya menyertakan salah satu diantara 5 font dasar, maka sebuah situs akan terlihat monoton. Maka untuk mempercantik desain situs perlu menambahkan font diluar font dasar. Namun, perlu diperhatikan juga kompatibilitas font tersebut, apakah dapat tampil di semua browser dengan identik atau tidak. Jika tidak, harus ada font alternatif yang serupa tapi tak sama untuk tampil identik di semua browser dan segala jenis OS dan media. Berikut contoh dasar menyertakan font yang kita targetkan beserta alternatif fontnya.

p { font-family: helvetica, arial, verdana, sans-serif;}
.header { font-family: “times new roman”, times, georgia, serif;}

Kode css diatas dapat dibaca sebagai berikut

“Tampilkan elemen p menggunakan font helvetica, jika tidak ada gunakan font arial, jika tidak ada gunakan font verdana, jika tidak ada gunakan sans-serif”

“Tampilkan elemen .header menggunakan font times new roman, jika tidak ada gunakan font times, jika tidak ada gunakan font georgia, jika tidak ada gunakan font serif”

Kode diatas hanyalah contoh. Untuk pemula, saya sarankan untuk memperhatikan bentuk font yang akan disertakan berada dalam kelompok mana. Untuk referensi, saya sertakan tabel bentuk font menurut kelompoknya.

Untuk kompatibilitas font berdasarkan dari OS, saya sertakan tabel dibawah.

Tabel-tabel diatas berisi tentang generic font yang didukung oleh OS. Perhatikan dengan seksama font-family yang cocok dengan font yang sesuai dengan desain. Mungkin untuk pengelompokan font, ikuti tabel-tabel sebelumnya.

Embed Font Eksternal

Jika generic font dirasa kurang untuk mempercantik desain situs. Maka kita perlu embed font eksternal. Dalam melakukan embed ini, perhatikan juga tentang “bagaimana format font yang dapat tampil identik disemua browser”. Dengan tetap menyertakan font-family agar jika format font tidak dapat diterima oleh browser, ada alternatif font lain yang dapat ditampilkan (setidaknya bentuk font tidak lari terlalu jauh).

Dasar embed font sangatlah mudah, seperti membuat tautan dalam HTML.

@font-face { font-family: font-sans-serif; src: url(fonts/sans-serif-custom.ttf); font-size: normal; font-weight: normal;}
p { font-family: fontsans-serif, arial, helvetica, sans-serif; }

Dalam melakukan embed font, yang terpenting adalah dimana letak font tersebut, sisanya menyesuaikan. Font family yang terdapat di @font-face adalah alias nama font yang akan kita embed.

Cara paling aman untuk embed font adalah menggunakan pihak ketiga. Sejak saya menjadi front-end web dev, saya hanya tahu 2 situs yang menyediakan layanan ini, mungkin teman-teman ada yang mau menambahkan, saya persilahkan.

www.fontsquirrel.com

www.google.com/webfonts

Berikut saya sertakan hasil render dari masing-masing browser di 3 OS berbeda.

Linux

Windows

MacOS

Mobile

Font yang saya gunakan adalah “Droid” untuk Squirrel font dan “Share” untuk Google font. Khusus untuk Google font, saya bereksperimen untuk menggunakan langsung pada server Google dan font yang saya unduh sendiri dalam format woff.

Untuk Squirrel font dengan tulisan “Font Mix”. Font family ini menggunakan kode sebagai berikut.

@font-face {
font-family: 'DroidSerifRegular';
src: url('droid/DroidSerif-Regular-webfont.eot');
src: url('droid/DroidSerif-Regular-webfont.eot?#iefix') format('embedded-opentype'),
url('droid/DroidSerif-Regular-webfont.woff') format('woff'),
url('droid/DroidSerif-Regular-webfont.ttf') format('truetype'),
url('droid/DroidSerif-Regular-webfont.svg#DroidSerifRegular') format('svg');
font-weight: normal;
font-style: normal;
}

Mungkin cukup sekian artikel tentang webfont kali ini. Semoga bermanfaat

Referensi:

http://jontangerine.com/log/2008/10/font-face-in-ie-making-web-fonts-work
http://www.upsdell.com/BrowserNews/res_fonts.htm
http://www.w3schools.com/cssref/css_websafe_fonts.asp
http://en.wikipedia.org/wiki/Web_typography

Tags

Nah, kali ini saya menemukan sebuah plugin wordpress yang bisa menjadikan website WordPress kita seperti groupon, dan kabar baiknya adalah Plugin ini bisa didapatkan secara gratis tis tis tis!!! Jika cloning groupon lainnya harganya berkisar $250 -$500 , maka plugin ini GRATIS!

WPDeals nama pluginnya, Anda bisa mendapatkannya di Plugin Directory WordPress dan mengunduhnya secara gratis, Plugin ini sendiri masih baru, dirilis pada 20 januari 2012 dan yang sangat membanggakan adalah ini buatan orang Indonesia.

WPDeals ini bagian dari Tokokoo Network yaitu sebuah startup dari Bandung yang memang fokus dalam membuat produk berbasis WordPress, Bagi yang belum mengenal @tokokoo bisa lihat tulisan ini : Interview : Anggi Krisna dari @Tokokoo

Tampilan setelah plugin WPDeals kita install

wpdeals plugin

Disamping sidebar kiri ada 2 menu tambahan yaitu Deals dan WP Deals. Deals seperti umumnya post disitu kita bisa nambahkan barang-barang deals yang ingin kita tawarkan, bisa juga menambahkan Deal Category dan Deal Tags seperti umumnya post biasa.

Sedangkan untuk WP Deals adalah untuk pengaturan website kita, seperti nama website, sistem pembayaran dan lain-lain.

Pada menu Add New Deal tampilan seperti post biasa cuma ada tambahan deal detail disebelah kanan

Add New Deals

Kita bisa menambahkan Regular Price, Discount, Stock, End Time & Set Expired, untuk lainnya sama seperti post biasa.

Dibagian bawah editor ada area untuk upload file

Deals File

Apa saja fitur yang ada di WPDeals?

1. Deals
2. Accounts
3. Paypal Payment Gateway
4. Reporting and Stats
5. Lifetime Support Updates
6. WordPress Core
7. Automation
8. Social Media Integration
9. Fully Customization
10. Newsletter Integration
11. Dedicated Blog
12. Easy Management
13. Modern Browser Support
14. Clean & Extensible Code
15. Table-less HTML Overrides

Payment Gateway : Kita bisa memilih menggunakan bank account atau Paypal

Paypal

Plugin ini bisa kita pakai pada theme bawaan WordPress seperti Twenty Ten dan Twenty Eleven, untuk Demo bisa lihat disini : Demo WP Deals

WPDeals sendiri sudah menyediakan 3 Theme Premium yang support dengan plugin ini

WPDeals Themes

Bagi teman-teman yang ingin membuat theme sendiri untuk wpdeals ini gak usah khawatir, Anda bisa mempelajarinya disini

Maju terus Developer WordPress Indonesia!

Tags

The Psychology of Color by Tech King

Courtesy of NowSourcing, Inc

Tags

psikologi warna,psikologi desain,tentang warna,psikologi web desain,psikologi warna website,warna,warna web,warna web desain,psikolog warna,sikologi warna,design warna,psikologi desain adalah,psikologi warna tosca,psikologi dan desain,psikologi warna pada web,web psikologi,desain web dan psikologi,psikologi desain warna,tips mendesain infografik,psiokologi warna web

]]> http://belajarwebdesign.com/off-topic/psikologi-warna-web-designer-harus-lihat/feed/ 11 http://belajarwebdesign.com/off-topic/psikologi-warna-web-designer-harus-lihat/ http://feedproxy.google.com/~r/Belajarwebdesign/~3/kd6GAd3Q-bI/ http://belajarwebdesign.com/web-programming/php-iteration-2-for/#comments Fri, 17 Feb 2012 03:31:36 +0000 zenzaqi http://belajarwebdesign.com/?p=1511 Setelah mengenal iterasi atau loop while dan do While, berikut adalah loop dengan menggunakan syntax for

For
Secara umum syntax for menyerupai syntax yang pada bahasa pemrograman C. Berikut syntax umumnya :

for (expr1; expr2; expr3) statement

syntax di atas menjelaskan bahwa expr1 adalah kondisi awal, sedangkan expr2 adalah kondisi pembatasan, dan expr3 akan dieksekusi pada setiap perulangan berjalan. Statement juga dijalankan pada setiap perulangan.

Contoh :

for($i=0;$i<10;$++)  echo "Hello World!";

Keterangan: Syntax di atas akan melakukan sebanyak 10 kali, dari mulai $i=0 s/d $i=9 dimana kenaikan $i adalah 1. Statement echo “Helloword!”; dieksekusi selama perulangan, sehingga di layar akan menampilkan ‘Hello World!’ sebanyak 10 kali.

Syntax di atas hanya berlaku untuk one line statement (satu baris statemen), jika ingin mengeksekusi banyak statemen maka syntax umumnya seperti berikut :

for (expr1; expr2; expr3) {
statement-1;
statement-2;
…
…
statement-n;
}

Contoh :

for($i=0;$i<10;$i++){
   echo "Hello World!";
   echo "Learn PHP";
}

Keterangan: Syntax di atas akan melakukan sebanyak 10 kali, dari mulai $i=0 s/d $i=9 di mana kenaikan $i adalah 1. Statement echo “Hello Word!”; dan echo “Learn PHP”; dieksekusi selama perulangan, sehingga di layar akan menampilkan ‘Hello World!’ dan ‘Learn PHP’ sebanyak 10 kali.

Contoh :

for ($i = 1; ; $i++) {
    if ($i > 10) {
        break;
    }
    echo $i;
}

Keterangan: perulangan for bisa juga dihentikan secara paksa dengan syntax break

Contoh :

$i = 1;
for (; ; ) {
    if ($i > 10) {
        break;
    }
    echo $i;
    $i++;
}

Keterangan: pada contoh di atas expr1, expr2 dan expr3 dikosongkan, akan tetapi pembatas looping terjadi di body statemen dengan memanfaat kenaikan value $i dan syntax break

Contoh :

for ($i = 1; $i <= 10; echo $i, $i++);

Keterangan: expr3 bisa jadi berupa syntax yang lebih dari satu nilai/statemen

Disamping penggunaan syntax di atas, php juga mendukung penggunaan secara dua pintu/titik, berikut syntax umumnya :

for (expr1; expr2; expr3): statement; …; endfor;

Selamat mencoba !!!

Tags

contoh syntax php,syntax bahasa c,contoh program while for pada php,syntax pada php,syntax bahasa pemrograman,penggunaan while pada php,contoh sintax php,contoh php perulangan,syntax pengulangan,contoh program while pada PHP,contoh program while,syntax pengulangan php,syntax php perulangan,contoh program php,program menampilkan inputan dan perulangan php,contoh syntax php lengkap,bahasa pemrograman web design,syntax php,syntax bahasa pemrograman C,pengertian syntax web

]]> http://belajarwebdesign.com/web-programming/php-iteration-2-for/feed/ 1 http://belajarwebdesign.com/web-programming/php-iteration-2-for/ http://feedproxy.google.com/~r/Belajarwebdesign/~3/0FIzgC3iwgk/ http://belajarwebdesign.com/webdesign/membuat-css-image-gallery-tanpa-javascript/#comments Tue, 14 Feb 2012 03:19:57 +0000 Arif Widipratomo http://belajarwebdesign.com/?p=2751 Tutorial kali ini saya akan membuat image gallery dengan CSS, ya CSS saja tanpa menggunakan jQuery atau library javascript lainnya. Saya akan memanfaatkan CSS pseudo selector :target.

CSS Images Gallery tanpa Javascript

Markup

Saya menggunakan desain dari Orman Clark yang dapat di unduh disini. Struktur HTML nya terdiri dari gambar thumbnail dan gambar gallery yang besar. Gambar gallery yang besar memiliki id masing-masing, ini digunakan untuk memilih gambar mana yang akan muncul ketika thumbnail di klik.

<div class="gallery">
    <!-- Big Gallery -->
    <div class="image-slide" id="slide1"><img src="images/slide/slide-1.jpg" alt="Slide 1"></div>
    <div class="image-slide" id="slide2"><img src="images/slide/slide-2.jpg" alt="Slide 2"></div>
    <div class="image-slide" id="slide3"><img src="images/slide/slide-3.jpg" alt="Slide 3"></div>
    <!-- /Big Gallery -->

    <!-- Gallery Thumbnail -->
    <ul class="image-list">
        <li>
            <a href="#slide1" title="Slide 1" id="link-slide1"><img src="images/thumb/slide1.jpg" alt="slide1"></a>
        </li>
        <li>
            <a href="#slide2" title="Slide 2" id="link-slide2"><img src="images/thumb/slide2.jpg" alt="slide2"></a>
        </li>
        <li>
            <a href="#slide3" title="Slide 2" id="link-slide3"><img src="images/thumb/slide3.jpg" alt="slide2"></a>
        </li>
    <ul>
    <!-- /Gallery Thumbnail -->
</div>

Setiap anchor di dalam gallery thumbnail saya beri id masing-masing, ini berfungsi nanti saat thumbnail dalam posisi active.

CSS

Pertama kita rapikan terlebih dahulu layout nya. Noise background dapat kamu slice dari file PSD atau ambil dari source code dari saya.

html {
    background: url(images/background-noise.jpg)
}
.gallery {
    width: 640px;
    position: relative;
    margin: 60px auto 0
}
.image-slide {
    width: 400px;
    height: 235px;
    position: absolute
}
.image-list {
    top: 0;
    right: 0;
    margin: 0;
    padding: 0;
    width: 240px;
    list-style: none;
    position: absolute
}
.image-list li {
    float: left;
    position: relative;
    margin: 0 0 10px 10px
}
.image-list img {
    display: block
}

Sampai sini gallery kamu akan terlihat seperti ini.

Jika kamu lihat pada desainnya, ada border-radius dan border 1px pada gallery thumbnail. Border-radius tidak dapat diterapkan pada image begitu juga dengan inset box-shadow. Jadi saya menggunakan image untuk mendapatkan efek itu. Sebenarnya dengan bantuan javascript efek tersebut dapat diterapkan tanpa menggunakan image, tapi disini saya tidak akan menggunakan javascript.

Image akan ditambahkan dengan memanfaatkan pseudo element :after dan :before, dengan cara ini kita tidak perlu mengubah HTML markup. Image pada Gallery disembunyikan kecuali image gallery yang pertama.

.image-slide {
    opacity: 0
}
.image-slide:first-child {
    opacity: 1
}
.image-slide:after {
    content: "";
    left: 0;
    width: 415px;
    height: 245px;
    position: absolute;
    background: url(images/image-overlay-big.png) -7px -7px no-repeat
}
.image-list li a:before, .image-list li a:after {
    content: "";
    top: 0;
    left: 0;
    width: 76px;
    height: 76px;
    position: absolute
}
.image-list li a:before {
    background: url(images/image-overlay.png) -7px -7px no-repeat
}

Sekarang kita gunakan pseudo selector :target untuk mengganti image gallery pada saat gallery thumbnail di klik.

.image-slide:target {
    opacity: 1
}
/* Efek Transisi */
.image-slide {
    -webkit-transition: all 0.5s ease;
       -moz-transition: all 0.5s ease;
        -ms-transition: all 0.5s ease;
         -o-transition: all 0.5s ease;
            transition: all 0.5s ease
}

Hasilnya akan seperti ini, coba klik salah satu thumbnail gallery.

Langkah yang terakhir adalah dengan menambahkan active state pada gallery thumbnail yang sedang aktif. Saya akan menggunakan sibling selector (~) untuk menghasilkan active state.

#slide1:target ~ .image-list #link-slide1:after,
#slide2:target ~ .image-list #link-slide2:after,
#slide3:target ~ .image-list #link-slide3:after {
    top: -2px;
    left: -3px;
    background: url(images/image-border.png) no-repeat
}

Sedikit penjelasan tentang sibling selector, selector ini akan memilih element yang berada satu level dengan element pada selector pertama pada deklarasi CSS. Bingung? Saya beri contoh,

<article>
    <p>Paragraph Satu</p>
    <div>Section Satu</div>
    <p>Paragraph Dua</p>
    <p>Paragraph Tiga</p>
</article>

Pada markup di atas, jika menggunakan selector p ~ p semua element p ikut termasuk, tapi jika menggunakan selector div ~ p semua element p setelah div ikut termasuk tapi tidak dengan element p sebelum div.

Yap CSS Gallery sudah selesai, ada keuntungan dan kerugian membuat Gallery dengan CSS saja. Keuntungannya, page load jadi lebih cepat karena tidak membutuhkan library javascript. Kerugiannya, IE (lagi-lagi IE) tidak support pseudo selector :target kecuali IE 9.

Demo Download

Tags

membuat image slideshow dengan php,membuat image slider dengan css,keuntungan css,membuat gallery foto dengan php,css image gallery,membuat image gallery dengan php,membuat gallery dengan jquery,membuat galeri foto dengan css,membuat galeri foto dengan javascript,css image slider,image gallery css,tutorial menggunakan jquery,membuat galeri foto dengan html,membuat image slideshow dengan javascript,membuat gallery foto dengan javascript,membuat image gallery,membuat gallery foto dengan html,membuat slide image dengan css,membuat foto gallery dengan php,membuat image gallery dengan javascript

]]> http://belajarwebdesign.com/webdesign/membuat-css-image-gallery-tanpa-javascript/feed/ 19 http://belajarwebdesign.com/webdesign/membuat-css-image-gallery-tanpa-javascript/ http://feedproxy.google.com/~r/Belajarwebdesign/~3/6fDMGMvHtOE/ http://belajarwebdesign.com/uncategorized/mysql-memilih-tipe-data-tipe-numerik/#comments Thu, 02 Feb 2012 01:26:11 +0000 zenzaqi http://belajarwebdesign.com/?p=2392 MySQL mendukung beberapa tipe data yang dikelompokkan menjadi tiga bagian :
- Numerik (Angka)
- Date dan time (tanggal dan jam)
- String (Huruf)

Tipe Data Numerik
MySQL mendukung semua tipe data numerik standar SQL. Di antaranya adalah tipe data exact (INTEGER, SMALLINT, DECIMAL, and NUMERIC), juga tipe data perluasannya (FLOAT, REAL, and DOUBLE PRECISION).
Berikut adalah tipe data numerik utama dan batasan nilainya.

Type	Storage	Minimum Value	Maximum Value
	(Bytes)	(Signed/Unsigned)	Signed/Unsigned)
TINYINT	1	-128	127
		0	255
SMALLINT	2	-32768	32767
		0	65535
MEDIUMINT	3	-8388608	8388607
		0	16777215
INT	4	-2147483648	2147483647
		0	4294967295
BIGINT	8	-9223372036854775808	9223372036854775807
		0	18446744073709551615

Disamping tipe data numerik di atas juga terdapat perluasan tipe data di atas
1. Floating-point
Yang termasuk dalam tipe ini adalah FLOAT(M,D), REAL(M,D), DOUBLE(M,D). M adalah panjang numeriknya sedangkan D adalah nilai desimalnya di belakang koma.

2. Fix-point
Termasuk dalam kategori ini adalah DECIMAL(M,D). Jika disebutkan DECIMAL(M) tanpa penulisan D, maka D dianggap 0 yang berarti tanpa ada angka dibelakang koma.

3. Bit-value
Tipe data bit-value adalah BIT(M), nilainya adalah nilai binary digit dari 0 sampai dengan 64.

4. Atribut Numerik
Dari tipe data utama di atas dapat didefiniskan secara khusus berapa panjangnya INT(N). Misal INT(2), yang berarti INTEGER dengan 2 bit data.

Disamping penggunaan di atas, tipe numerik juga menyediakan metode AUTO_INCREMENT yang otomatis menaikkan nilainya (squence) ketika terjadi penambahan record. Ketika di set AUTO_INCREMENT otomatis data tersebut akan mempunyai atribut UNSIGNED.
Atribut SIGNED berarti data memungkinkan bertanda minus (-), sedangkan UNSIGNED berarti data tidak boleh minus (-).

Jadi, setelah kita mengetahui tipe data ini, kita dapat menentukan tipe data apa yang cocok dengan data yang kita hendaki. Sesuaikan dengan panjang data atau jenis datanya, dengan pemilihan tipe data yang bijak tentu akan lebih meningkatkan performa dan tidak menyia-nyiakan penggunaan memori yang tidak perlu. Sebagai contoh, jangan pernah membuat tipe data numerik pada data yang tidak pernah dilakukan perhitungan, meskipun berupa angka data tersebut, semisal nomor telepon ato nomor induk.

Ok sobat, itulah sekedar sharing dari saya, semoga membantu. Tetap semangat !!!

Tags

contoh data numerik,data numerik,tipe data mysql,data numerik adalah,tipe data numerik,numerik adalah,contoh data,tipe data di mysql,tipe data numeric,numeric adalah,tipe data untuk nomor telepon,tipe data pada mysql,pengertian tipe data numeric,contoh data numeric,data value adalah,pengertian tipe data numerik,tipe data no telp,contoh tipe data numerik,tipe data numerik mysql,tipe data float mysql

]]> http://belajarwebdesign.com/uncategorized/mysql-memilih-tipe-data-tipe-numerik/feed/ 1 http://belajarwebdesign.com/uncategorized/mysql-memilih-tipe-data-tipe-numerik/ http://feedproxy.google.com/~r/Belajarwebdesign/~3/7QrTSVYPjk0/ http://belajarwebdesign.com/interview/interview-mohammad-jeprie-founder-desaindigital/#comments Fri, 20 Jan 2012 03:21:43 +0000 Admin http://belajarwebdesign.com/?p=2712 Pada kesempatan kali ini saya akan mewawancarai seorang penulis buku desain yaitu Mohammad Jeprie. Anda bisa follow akun twitternya di @desaindigital Jeprie juga seorang penulis profesional yang beberapa tulisan tutorialnya sudah dimuat di berbagai website ternama seperti Tutsplus.com (Psdtuts+ & Vectortuts+), Design Instruct, 1stwebdesigner dan banyak lagi.

Oke mari kita simak wawancara saya bersama Mas jeprie.

Hallo Mas Jeprie, apa kabar? Coba perkenalkan diri Anda ke pembaca @belajar_web.

Hai! Saya menganggap diri sendiri sebagai penulis. Saya saat ini tidak memiliki pekerjaan tetap dan sering kali menyamarkan status pengangguran saya dengan menyebutnya pekerja freelance.

Lagi sibuk apa sekarang?

Hari ini, saya sedang mengedit naskah untuk buku Photoshop terbaru. Di samping itu, saya mempunyai jadwal untuk menulis di beberapa situs, mendesain beberapa mockup PSD gratis di Psdfreemium, dan mendesain mockup PSD premium.

PSDfremium & DesainDigital

Saya mengetahui Anda dari website Tutsplus+, waktu itu saya lagi baca tutorial dan melihat author (penulisnya) namanya kok indonesia banget, dan ternyata memang orang indonesia. Boleh tahu latar belakang Anda sehingga mahir dalam hal desain?

Sebetulnya saya sendiri heran jika dikatakan mahir mendesain. Yang saya lakukan hingga saat ini hanya meniru desain-desain yang telah ada kemudian sedikit memodifikasinya.

Saya sama sekali tidak memiliki latar desain atau seni. Terakhir, kuliah formal saya adalah jurusan Matematika dan itu pun tidak sampai selesai. Desain dan seni adalah bidang yang sangat baru bagi saya. Sejak kecil, saya bercita-cita menjadi seorang ilmuwan yang fokus meneliti teori asal muasal semesta dan menjadi orang pertama yang menemukan mesin waktu. Tapi, waktu membawa saya ke bidang ini. Walaupun bertolak belakang, latar pendidikan saya yang dipengaruhi science sangat membantu dalam logika mendesain.

Mengenai banyak tulisan tutorial Anda di website-website terkemuka itu, bagaimana Anda bisa menulis disana?

Saya tipe orang yang tidak memiliki rencana. Saya hanya menjalaninya begitu saja dan menangkap setiap kesempatan yang tersedia. Saya tidak pernah berkeinginan untuk menulis di situs-situs besar. Keinginan awal saya sederhana, berbagi pengetahuan. Saya memulainya dengan menulis tutorial-tutorial gratis di Desaindigital. Melihat respon pembaca cukup baik, saya kemudian mencoba menawarkan ke situs-situs luar yang memiliki jangkauan pembaca lebih luas. Setiap kesempatan membuka kesempatan lebih besar lagi. Salah satunya adalah muncul tawaran untuk menulis di situs-situs besar seperti Psdtuts+ dan Hongkiat.

Saya tidak bisa bicara banyak tentang cara memperoleh klien. Satu hal yang saya tahu adalah jika karya kita cukup bagus, entah dari mana datangnya, klien selalu ada.

Saya mendengar sih untuk menulis di website luar sana tidak mudah meskipun skill kita sudah bagus, bagaimana menurut Anda?

Sebetulnya tidak juga. Saya adalah salah satu contoh penulis dengan skill pas-pasan yang bisa dimuat di sana. Yang paling penting menurut saya adalah keberanian untuk menulis dan berbagi. Hanya dengan itu saja, biasanya para pembaca sudah menghargai niat baik Anda. Tentu saja skill memadai akan membuat Anda lebih menonjol.

Tool apa saja yang Anda pakai dalam membuat sebuah karya desain?

Kekuatan saya ada di Adobe Photoshop. Saya mempelajarinya sejak versi 5. Jadi, saya sangat terbiasa dengan cara kerjanya. Sebagai alat bantu, saya juga menggunakan Adobe Illustrator untuk menggambar vektor. Dalam menulis buku, saya menggunakan InDesign karena sangat efektif dalam pengaturan layoutnya.

Dalam mendesain, saya juga sangat bergantung dengan pen Wacom Bamboo. Wacom membantu dalam menghasilkan goresan brush yang alami di Photoshop dan mempermudah proses tracing vektor, selain itu mampu menghindarkan saya dari sindrom Carpal Tunnel. Setiap orang yang menggunakan komputer lebih dari 8 jam per hari harus memiliki Wacom!

Pertama kali Anda menulis tutorial desain tentang apa? Masih ingat? Dan di-publish di mana?

Saya pertama kali menulis tutorial Photoshop untuk buku di PT. Elex Media Komputindo. Buku pertama itu sesungguhnya dokumentasi belajar Photoshop saya. Isinya 100% contekan dari situs tutorial Photoshop lokal. Waktu itu, tanpa disadari saya telah melanggar semua kode etik seorang penulis. Saat ini, bukunya sudah hilang dan saya tidak mau melihatnya lagi.

Di internet, saya pertama kali menulis di situs gratis wordpress, masteringphotoshop.wordpress.com. Di sanalah saya pertama kali belajar ngeblog.

Tentu tidak mudah dalam menulis tutorial karena harus menulis sekaligus mendesain, Berapa lama Anda membuat tulisan tersebut?

Saya tidak pernah menulis sekaligus mendesain dan tidak ada seorang pun yang begitu. Proses yang benar adalah mendesain dahulu baru menulis. Ya, jelas tidak mudah. Saya tidak pernah menghitung waktu rata-rata yang dibutuhkan untuk setiap tutorial. Biasanya saya mengerjakan tiga atau empat pekerjaan sekaligus. Dengan kondisi seperti ini, biasanya sebuah tutorial bisa selesai dalam 3 atau 4 minggu. Tapi, jika bisa fokus untuk projek tutorial itu saja, saya bisa menyelesaikannya dalam seminggu.

Sebagai seorang desainer, Anda tentu mempunyai idola dalam bidang tersebut, siapa? dan kenapa?

Saya lebih suka menyebut diri saya sebagai penulis yang membahas desain. Titel desainer rasanya terlalu tinggi buat saya.

Alex Beltechi, Constantin Potorac, Matt Kloskowski, Scott Kelby, dan Deke mcClelland adalah beberapa penulis Photoshop terbaik yang pernah saya temui. Saya berharap bisa melampaui mereka semua. Namun, setidaknya saya, Alex, Constantin, dan Matt sudah sama-sama jadi penulis di Psdtuts+.

Alex dan Constantin bisa mengajarkan banyak teknik hebat dalam setiap tutorialnya. Dari satu tutorial mereka, kita bisa belajar lebih banyak materi dari pada yang ada di satu karung buku-buku. Sementara Matt dan Scott bisa menjelaskan materi rumit dengan cara yang paling mudah.

Deke mcClelland itu spesial. Deke is just not Photoshop guru, he’s a Photoshop god. Anda bisa tertawa lepas hanya dengan membaca buku atau tutorial Photoshop-nya. Dia adalah satu-satunya penulis yang bisa membahas algoritma dan perhitungan di balik teknik rumit Photoshop semacam interpolasi pixel atau kompresi lossless dan membuat harimu tetap ceria.

Tipe karya bagaimana yang Anda suka?

Saat ini, saya menyukai setiap desain ikon dan interface yang perfect pixel.

Bisa kasih tahu apa saja karya-karya Anda yang paling spesial?

Tulisan saya yang paling berkesan adalah mendesain ikon TV retro. Itu adalah tulisan pertama saya untuk Psdtuts+. Saya pertama kali belajar teknik-teknik professional dari Psdtuts+ dan saya juga selalu memberikan referensi pada setiap orang (termasuk pembaca buku saya) untuk belajar lebih lanjut di sana. Persetujuan editor Psdtuts+, saat itu masih dipegang Sean Hodge, untuk tutorial ini saya peroleh via email jam 11 malam. Malam itu saya hampir tidak bisa tidur karena tidak sabar untuk memulai karir sebagai penulis Psdtuts+. Hingga saat ini, menulis untuk psdtuts selalu menjadi projek favorit saya.

Create a Detailed Vintage Television Icon in Photoshop

Beberapa tulisan Jeprie di TutsPlus+

Projek favorit saya yang lain adalah mendesain mockup untuk Steven Snell di Vandelaypremier. Sebelumnya, saya adalah salah satu penggemar artikel Steven di Freelanceswitch, Smashing Magazine, dan beberapa situs besar lain. Sangat menyenangkan bisa berkontribusi pada orang-orang yang secara tidak langsung telah menjadi guru kita.

Saya juga tahu Anda adalah penulis buku, sudah berapa buku yang Anda hasilkan?

Saya sudah tidak lagi menghitung jumlahnya. Seingat saya sudah lebih dari 15 buku.

Bisa didapatkan di mana? Barangkali pembaca @belajar_web ingin membelinya buat pembelajaran desain.

Semua buku-buku saya diterbitkan oleh PT. Elex Media Komputindo dan terdapat di toko-toko buku besar seperti Gramedia.

Bisa kasih saran kepada teman-teman @belajar_web agar bisa sukses seperti Anda?

No, ini masih in progress. Masih jauh untuk dikatakan sukses. Saran saya, setidaknya berjanjilah untuk menjadi seorang perfeksionis dan selalu menepati janji itu.

Terima kasih Mas Jeprie atas kesediaannya diwawancarai, semoga memberikan inspirasi dan semangat buat pembaca @belajar_web, kami tunggu karya-karya Anda

Sama-sama. Saya juga berterima kasih atas kesediaan @belajar_web berbagi skill dan informasi melalui situsnya.

Demikian interview saya dengan Mas Jeprie, semoga memberikan inspirasi & semangat untuk terus belajar!

Tags

mock up adalah,contoh media pembelajaran,siapa yang melihat twitter kita,contoh tutorial,referensi design,macam-macam layout,buku desain web,desaindigital,yang melihat twitter kita,desain digital,macam layout,latar belakang web design,macam macam layout,cara melihat favorite twitter,belajar wp mu,buku web design,contoh media,artikel macam macam layout,macam desain layout,web design bagus

]]> http://belajarwebdesign.com/interview/interview-mohammad-jeprie-founder-desaindigital/feed/ 11 http://belajarwebdesign.com/interview/interview-mohammad-jeprie-founder-desaindigital/ http://feedproxy.google.com/~r/Belajarwebdesign/~3/nkpZZ0oXFkI/ http://belajarwebdesign.com/webdesign/photoshop-atau-fireworks/#comments Sun, 15 Jan 2012 23:25:46 +0000 isatrio http://belajarwebdesign.com/?p=2671 Mungkin dari beberapa teman-teman familiar dengan “Photoshop” dan Adobe family. Tapi pernahkah mencoba menggunakan Fireworks untuk mendesain sebuah kerangka web? Untuk yang sudah pernah, mungkin tahu bahwa dengan menggunakan Fireworks untuk mendesain web sangat membantu ketimbang menggunakan Photoshop, terutama untuk front end web developer seperti saya.

Artikel Terkait

• Tutorial Konversi PSD ke HTML & CSS
• Cara Sederhana Membuat Responsive Web
• Hologram Social Media Pack
• Lezzat : Free PSD Template
• Membuat Tombol Sederhana dengan Teknik CSS Sprites

Sebelum membahas lebih lanjut tentang mengapa para desainer perlu menggunakan Fireworks untuk mendesain sebuah web, ada baiknya anda paham tentang tahap dalam pembuatan sebuah template web. Berikut tahapannya:

1. Strukturisasi Web
2. Layout Web
3. Slicing Desain
4. Convert to HTML
5. Testing

Fireworks tidak berbeda jauh dengan saudara-saudaranya, Photoshop, Illustrator, InDesign. Namun Fireworks diciptakan khusus untuk melakukan pekerjaan Desain Web. Fireworks memiliki fitur dari kedua pendahulunya yaitu Photoshop yang bersifat pixel dan Illustrator yang bersifat vektor. Secara desain, Fireworks menganut vektor tetapi sebenarnya sama halnya dengan Photoshop bentuk vektor yang dianut adalah pixel.

Vektor

Pixel

Gambar diatas adalah contoh dari hasil Fireworks. Dengan cara seperti ini berarti, untuk desainer jadi lebih mudah, dan untuk converter pun jadi lebih mudah pula karena untuk melakukan konversi desain ke HTML berdasarkan pixel.

Selain keunggulan tersebut, ada unggulan lain yang dimiliki oleh Fireworks

Mudah Untuk Slicing

Hasil Slicing

Export sebagai…

Mengatur besar file

Meskipun Photoshop dan Illustrator bisa melakukan slicing, tapi tak semudah Fireworks. Jadi silahkan pilih, masih mau menggunakan Photoshop atau Fireworks?

Tags

fungsi adobe fireworks,belajar adobe fireworks,cara menggunakan adobe fireworks,fungsi firework,belajar fireworks,belajar adobe firework,belajar firework,cara menggunakan adobe firework,tutorial adobe fireworks,firework web design,apa fungsi adobe fireworks,cara menggunakan fireworks,tutorial fireworks,gambar bersifat vektor,perbedaan photoshop,teknik slice pada fireworks,perbedaan firework dan photoshop,cara jadi web designer,adobe fireworks,perbedaan fireworks

]]> http://belajarwebdesign.com/webdesign/photoshop-atau-fireworks/feed/ 15 http://belajarwebdesign.com/webdesign/photoshop-atau-fireworks/ http://feedproxy.google.com/~r/Belajarwebdesign/~3/IN1O7KMnqbE/ http://belajarwebdesign.com/uncategorized/code-igniter-membuat-halaman-input-sederhana-guestbook/#comments Wed, 04 Jan 2012 04:10:49 +0000 zenzaqi http://belajarwebdesign.com/?p=2381 Tentu Anda tidak lupa dengan konsep MVC -ny CI bukan??
Ya, Anda harus membuat ketiga file terserbuat yakni Conctroller, Model dan View.

Artikel Terkait

• Code Igniter : Base URL dinamis
• PHP, akses database #1 (MySQL)
• Mengenal CMS Drupal
• Code Igniter burn your code
• Mysql, pilih MyISAM atau InnoDB ?

Berikut contoh membuat Guestbook sederhana

Database
Nama tabel yang digunakan ‘guestbook’, jalankan scriptnya berikut pada database mysql Anda

CREATE TABLE `guestbook` (
  `guestid` INT NOT NULL AUTO_INCREMENT PRIMARY KEY ,
  `name` VARCHAR( 50 ) NOT NULL ,
  `email` VARCHAR( 65 ) NOT NULL ,
  `facebook` VARCHAR( 65 ) NULL ,
  `twitter` VARCHAR( 65 ) NULL ,
  `message` VARCHAR( 255 ) NOT NULL
);

Model
Umumnya penamaanya menggunakan prefix m_, tapi sebenarnya terserah Anda menamakannya
nama file : m_guestbook, digunakan untuk akses database

<?php

class M_guestbook extends Model{
		
		//constructor
		function M_guestbook() {
			parent::Model();
		}
		
		function simpan($name,
						$email,
						$facebook,
						$twitter,
						$message){
			
			$data = array(
				"name"=>$name, 
				"email"=>$email, 
				"facebook"=>$facebook, 
				"twitter"=>$twitter, 
				"message"=>$message
			);
			$this->db->insert('guestbook', $data); 
			if($this->db->affected_rows())
				return '1';
			else
				return '0';
			
		}		
}
?>

digunakan affected rows, untuk mengecek apakah data berhasil disimpan ke dalam database atau tidak

Controller
Umumnya penamaanya menggunakan prefix c_, tapi sebenarnya terserah Anda menamakannya
nama file : c_guestbook, digunakan untuk event control terhadap page

<?php
class C_guestbook extends Controller {

	//constructor
	function C_guestbook(){
		parent::Controller();
		session_start();
		$this->load->model('m_guestbook', '', TRUE);
	}
	
	//set index
	function index(){
		$this->load->view('v_guestbook.php');
	}
	
	function simpan(){
		//POST varible here
		//auto increment, don't accept anything from form values
		$name=trim(@$_POST["name"]);
		$name=str_replace("/(<\/?)(p)([^>]*>)", "",$name);
		$name=htmlspecialchars($name,ENT_QUOTES);
		$email=trim(@$_POST["email"]);
		$email=str_replace("/(<\/?)(p)([^>]*>)", "",$email);
		$email=htmlspecialchars($email,ENT_QUOTES);
		$facebook=trim(@$_POST["facebook"]);
		$facebook=str_replace("/(<\/?)(p)([^>]*>)", "",$facebook);
		$facebook=htmlspecialchars($facebook,ENT_QUOTES);
		$twitter=trim(@$_POST["twitter"]);
		$twitter=str_replace("/(<\/?)(p)([^>]*>)", "",$twitter);
		$twitter=htmlspecialchars($twitter,ENT_QUOTES);
		$message=trim(@$_POST["message"]);
		$message=str_replace("/(<\/?)(p)([^>]*>)", "",$message);
		$message=htmlspecialchars($message,ENT_QUOTES);
		
		$result=$this->m_guestbook->simpan($name,
											 $email,
											 $facebook,
											 $twitter,
											 $message);
		
		if($result=='0'){
			$data["msg"]="Data tidak bisa disimpan";
		}else{
			$data["msg"]="Data sukses disimpan";
		}
		$this->load->vars($data);
		$this->index();
	}
	
}
?>

• Penerimaan variable post dilakukan di dalam fungsi simpan
• Fungsi str_replace di atas untuk menghilangkan inputan yang berupa code php/html agar tidak menjadi spam code
• Fungsi htmlspecialchars, ENT_QUOTES digunakan agar bisa mengubah single quote ato double quote ke dalam bentuk code html (ASCII) sehingga tidak jadi masalah ketika disimpan ke dalam database

View
Umumnya penamaanya menggunakan prefix v_, tapi sebenarnya terserah Anda menamakannya
nama file : v_guestbook, digunakan untuk layout view page

<html>
<body>
<?php if(@$msg<>"") echo @$msg; ?>
<form action="<?php echo base_url();?>index.php?c=c_guestbook&m=simpan" method="post">
<table>
<tr>
	<td colspan="2" align="center"><h1>GUESTBOOK</h1></td>
</tr>
<tr>
	<td>Name</td>
	<td><input id="name" name="name" type="text" size="30" maxlength="50" /></td>
</tr>
<tr>
	<td>Email</td>
	<td><input id="email" name="email" type="text" size="30" maxlength="65" /></td>
</tr>
<tr>
	<td>Facebook</td>
	<td><input id="facebook" name="facebook" type="text" size="30" maxlength="65" /></td>
</tr>
<tr>
	<td>Twitter</td><td><input id="twitter" name="twitter" type="text" size="30" maxlength="65" /></td>
</tr>
<tr>
	<td>Message</td>
	<td><textarea id="message" name="message" cols="30" rows="3"></textarea></td>
</tr>
<tr>
	<td colspan="2" align="center"> <input type="submit" value="Simpan" name="simpan">  </td>
</tr>
</table>
</form>
</body>
</html>

Perhatikan form actionnya :

<form action="<?php echo base_url();?>index.php?c=c_guestbook&m=simpan" method="post">

arahkan m (fuction) ke function ‘simpan’ sesuai yang ada pada controller

Dan inilah nampak hasil screen shootnya

Dan ini setelah proses input

Ok, contoh singkat di atas semoga bisa membantu

Semoga berhasil, semangat selalu. Ignite your code !!!

Tags

codeigniter,contoh web dengan codeigniter,belajar codeigniter 2 1 0,Guestbook codeigniter,input ,membuat form dengan codeigniter,form input codeigniter,codeigniter guestbook,form input php,tutorial codeigniter 2 1 0 indonesia,membuat berita dengan CodeIgniter,membuat codeigniter,membuat form codeigniter,membuat guestbook dengan codeigniter,tutorial codeigniter 2 1 0,membuat form sederhana dengan codeigniter,belajar codeigniter 2 1,codeigniter sederhana,coding codeigniter,contoh sederhana codeigniter

]]> http://belajarwebdesign.com/uncategorized/code-igniter-membuat-halaman-input-sederhana-guestbook/feed/ 9 http://belajarwebdesign.com/uncategorized/code-igniter-membuat-halaman-input-sederhana-guestbook/ http://feedproxy.google.com/~r/Belajarwebdesign/~3/WLh8y0kRSa0/ http://belajarwebdesign.com/webdesign/belajar-html5-html5-cheat-sheets/#comments Mon, 02 Jan 2012 08:53:43 +0000 zulsdesign http://belajarwebdesign.com/?p=2659 Sudahkah Anda belajar HTML5? kalau Anda sudah familiar dengan HTML sebalumnya mungkin dibuat agak susah karena pada HTML5 kali ini ada penambahan tag-tag baru.

Berikut saya sajikan beberapa tag-tag HTML5 yang didalamnya meliputi :

• Tags
• Event Handler Attributes
• Browser Support

HTML5 Cheat Sheet – Tags

HTML5 Cheat Sheet By InMotion Hosting – A Virtual Private Servers Provider

HTML5 Cheat Sheet – Event Handler Attributes

HTML5 Cheat Sheet By InMotion Hosting – A Web Hosting Provider

HTML5 Cheat Sheet – Browser Support

HTML5 Cheat Sheet By InMotion Hosting – A Dedicated Server Provider

Tags

bootstrap cheatsheet,desain web cantik dengan html5 dan css,belajar cheat web browser online,code membuat segitiga dengan * menggunakan java script,belajar web html 5,Cheat-Sheet HTML 5,perkembangan ilmu web design 2012,web server html5 belajar,belajar desain web html5,belajar hml5,belajar html5 dan css download,css tutorial belajar html5,desain tulisan cantik pada html dan css dan hasilnya,tutorial belajar dengan html 5,event handler,web design pake html,inspirasi personal web dengan html 5,html 5 support by web browser,cheat sheet css,cheat html 5

]]> http://belajarwebdesign.com/webdesign/belajar-html5-html5-cheat-sheets/feed/ 3 http://belajarwebdesign.com/webdesign/belajar-html5-html5-cheat-sheets/ http://feedproxy.google.com/~r/Belajarwebdesign/~3/O7P99wAZOPs/ http://belajarwebdesign.com/webdesign/10-inspirasi-desain-web-dengan-ukuran-gambar-besar/#comments Fri, 30 Dec 2011 14:36:02 +0000 Admin http://belajarwebdesign.com/?p=2611 Semakin kesini perkembangan desain website sungguh menarik untuk disimak, banyak desain-desain website yang dibuat dengan background (Latar Belakang) gambar yang sangat besar, hampir seluruh halaman digunakan sebuah gambar/foto yang ukurannya besar, Cara seperti ini adalah penekanan disebuah gambar tersebut, dari segi layout biasanya sederhana, tapi yang membuat website itu “Wah!” adalah gambar/foto yang besar tersebut.

Artikel Terkait

• 10 Webdesign Inspiration #4 : Flat Desain
• 10 Webdesign Inspiration #1
• 10 Webdesign Inspiration #2
• 10 Webdesign Inpiration Bernuansa Girly
• 10 Webdesign Inspiration #3: Ilustrasi Grafis

Berikut 10 inspirasi desain yang menggunakan background gambar yang besar

http://www.momentskis.com/

http://www.360langstrasse.sf.tv/page/

http://www.pioneer-steez.com/eu/en/

http://www.starvedforattention.org/

http://www.fashionphotography.com/

http://www.beetle.com/

http://epopee.me/

http://www.hyundai-veloster.eu/

http://www.tatchies.com/

http://rouxatparliamentsquare.co.uk/

Catatan : Gambar background yang besar membantu sekali dalam mempercantik tampilan website apalagi kalau kualitas fotonya jernih, tapi kalau diterapkan untuk website di Indonesia sepertinya harus dipikirkan matang-matang, agar tidak memberatkan pengunjung yang fakir bandwidth

Tags

ukuran website,background ukuran besar,ukuran desain web,gamBar DESaiN WEB,baground ukuran besar,situs gambar ukuran besar,inspirasi website,background foto keren,latar belakang web,background berukuran besar,gambar besar,baground tulisan,ukuran gambar besar,background foto ukuran besar,foto ukuran besar,desain web inspiratif,inspirasi baground,ukuran background image website,ukuran untuk desain web,gambar besar background foto

]]> http://belajarwebdesign.com/webdesign/10-inspirasi-desain-web-dengan-ukuran-gambar-besar/feed/ 6 http://belajarwebdesign.com/webdesign/10-inspirasi-desain-web-dengan-ukuran-gambar-besar/ http://feedproxy.google.com/~r/Belajarwebdesign/~3/gm34l7nPWzs/ http://belajarwebdesign.com/webdesign/haml/#comments Wed, 14 Dec 2011 13:31:59 +0000 virtualpain http://belajarwebdesign.com/?p=2509 Haml adalah markup seperti Html, tetapi lebih indah, human-readable (enak dibaca) dan dapat memangkas banyak waktu. Haml sendiri adalah library dari bahasa pemprograman Ruby (atau biasa disebut Gem) yang meng-compile file .haml ke file .html jadi kita tidak perlu menginstall ruby di server karena proses compile dapat dilakukan di komputer lokal. Tapi kita tetap harus menginstall Ruby di komputer lokal kita.

Haml

Untuk menginstall ruby, jika anda menggunakan sistem Window$, anda bisa mengunduh installernya di http://rubyinstaller.org/downloads/ dan pilih versi 1.9.2 untuk kestabilan. Di Linux dan Mac anda bisa menggunakan RVM, Ruby Version Manager di http://beginrescueend.com/. Untuk mengetes apa ruby sudah terinstall, buka command-line atau terminal (di Windows, Start > run > ketik ‘cmd’, atau Start > accesscories > command line)

Setelah menginstall ruby, sekarang kita perlu menginstall library dari Haml itu sendiri. Mudah kok, cukup dengan perintah pada command-line:

gem install haml

atau diawali dengan kata `sudo’ pada Linux atau Mac OS X.

Baiklah kini Haml (dan Ruby) sudah ter-install, saatnya kita belajar Haml dari contoh file:

!!!
%html
	%head
		%title Judul Halaman
		%link{:rel => 'stylesheet', :href => 'style.css'}
	%body
		%h1 Heading 1

		%p
			Lorem ipsum dolor sit amet,
			%strong consectetur
			adipiscing elit. Praesent pretium justo non nibh commodo iaculis. Maecenas rhoncus varius egestas. Quisque vulputate quam eget augue rhoncus semper.

		.container
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pretium justo non nibh commodo iaculis. Maecenas rhoncus varius egestas. Quisque vulputate quam eget augue rhoncus semper.
		#wrapper
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pretium justo non nibh commodo iaculis. Maecenas rhoncus varius egestas. Quisque vulputate quam eget augue rhoncus semper.
		%div{ :class => 'container', :id => 'wrapper'}
			Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pretium justo non nibh commodo iaculis. Maecenas rhoncus varius egestas. Quisque vulputate quam eget augue rhoncus semper. 

Simpan file diatas dengan nama index.haml (atau nama lain) lalu ketikkan di command line/terminal perintah:

haml index.haml index.html

Dimana ‘haml’ adalah nama perintah untuk meng-compile file haml, ‘index.haml’ adalah nama dari file input berupa Haml yang kita buat diatas, sedang ‘index.html’ adalah file output hasil kompilasi dari file haml. Saya sarankan file output dan file input namanya sama, misal index.haml untuk index.html, view.haml untuk view.html, dan seterusnya.

Hasilnya dalam index.html:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
  <head>
    <title>Judul Halaman</title>
    <link href='style.css' rel='stylesheet' />
  </head>
  <body>
    <h1>Heading 1</h1>
    <p>
      Lorem ipsum dolor sit amet,
      <strong>consectetur</strong>
      adipiscing elit. Praesent pretium justo non nibh commodo iaculis. Maecenas rhoncus varius egestas. Quisque vulputate quam eget augue rhoncus semper.
    </p>
    <div class='container'>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pretium justo non nibh commodo iaculis. Maecenas rhoncus varius egestas. Quisque vulputate quam eget augue rhoncus semper.
    </div>
    <div id='wrapper'>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pretium justo non nibh commodo iaculis. Maecenas rhoncus varius egestas. Quisque vulputate quam eget augue rhoncus semper.
    </div>
    <div class='container' id='wrapper'>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent pretium justo non nibh commodo iaculis. Maecenas rhoncus varius egestas. Quisque vulputate quam eget augue rhoncus semper.
    </div>
  </body>
</html>

Tag dalam Haml, seperti dalam file Haml diatas cukup dengan tanda % di depan nama tag. Misal %html, %title, dan sebagainya.

Sedangkan untuk Tag yang berada di dalam tag lain, Haml menggunakan konsep indentasi. Biasanya indentasi dalam Haml adalah 1 tab atau 2 spasi (ala Ruby), untuk lebih jelasnya apa maksud penggunaan indentasi dalam Haml, lihat contoh berikut ini:

       %body
			%p
				Lorem ipsum dolor sit amet, consectetur adipiscing elit.
				%strong
					Praesent pretium justo
					%em
						non nibh commodo iaculis.
				Maecenas rhoncus varius egestas. Quisque vulputate quam eget augue rhoncus semper.

Dan jika di-compile maka hasilnya:

    <body>
      <p>
        Lorem ipsum dolor sit amet, consectetur adipiscing elit.
        <strong>
          Praesent pretium justo
          <em>
            non nibh commodo iaculis.
          </em>
        </strong>
        Maecenas rhoncus varius egestas. Quisque vulputate quam eget augue rhoncus semper.
      </p>
    </body>

Bagaimana? Sudah jelas maksud indentasinya? Ya, Indentasi Haml berfungsi sebagai pengganti tag nesting pada Html. Sebuah indentasi bisa berupa 1 tab atau beberapa spasi. Syaratnya, jumlahnya harus sama dan konsisten.

Sedangkan tanda !!! diawal dokumen adalah doctype dari html. !!! melambangkan xhtml 1, dan !!! 5 adalah html 5.

Bagaimana dengan atribut Html seperti href dan title pada tag a (anchor), description dan content pada tag meta? Untuk memberikan atribut html, bisa dilakukan dengan memberi tanda kurung kurawal setelah nama tag tanpa spasi. Contohnya:

%a{ :href => '/page.html', :title => 'Link ke sebuah halaman'} Link

dituliskan dalam bentuk haml seperti ini:

<a href='/page.html' title='Link ke sebuah halaman'>Link</a>

Contoh-contoh diatas adalah sebagian kecil dari fitur Haml. Haml tidak hanya memperindah kode (dan lebih human-readable), tapi juga memangkas waktu penulisan tag-tag Html biasa. Haml banyak digunakan oleh developer Rails sebagai pengganti Erb atau developer PHP sebagai pengganti tag Html biasa.

Selamat Mencoba

Tags

tab dalam html,alamat haml,tabulasi pada html,haml,pengganti tab di script html,Contoh php menggunakan for,contoh-contoh web html,download web html sudah jadi,belajar web design haml,contoh desain web html unik,pengganti html,web surat dengan CI,judul halaman link,contoh program web menggunakan html,contoh tentang html,contoh web dengan html5,contoh web html keren css 5,contoh web yg dibuat dengan php,contoh webhtml,contoh-contoh file html

]]> http://belajarwebdesign.com/webdesign/haml/feed/ 15 http://belajarwebdesign.com/webdesign/haml/ http://feedproxy.google.com/~r/Belajarwebdesign/~3/y1wdfQA3Ndg/ http://belajarwebdesign.com/webdesign/tutorial-konversi-psd-ke-html-css/#comments Tue, 13 Dec 2011 15:28:16 +0000 Izul Chaniago http://belajarwebdesign.com/?p=2523 Kemaren malam saya iseng-iseng membuat design website dengan Photoshop dan langsung di convert dari PSD ke HTML, tadinya mau bikin desain untuk web pribadi yang kebetulan tidak terawat, tapi di tengah pembuatan malah jadi pengen bikin web bertema lain. Jadi campur aduk :p

Dan begini lah hasil nya, lumayan lah, tidak terlalu bagus, dan tidak terlalu jelek juga, silahkan download PSD nya, Anda juga bisa download HTML dan Video tutorial nya.
Kita bisa menggunakan template ini untuk website kecil-kecilan yang tidak membutuhkan banyak variasi bentuk halaman.

Download PSD
Download HTML&CSS
Video Slicing PSD
Demo

Proses Desain

Dalam tulisan ini saya tidak akan menjelaskan bagaimana membuat desain nya step by step, tapi sebenernya tidak terlalu sulit membuat desain seperti itu, karena desain seperti itu hanya bagaimana kita menempatkan Layer. Tidak ada bagian layer yang komplek dan detail. Dengan melihat susunan layer di PSD nya saya rasa anda bisa membuat jauh lebih baik dari yang saya buat.

Proses Slicing

Untuk slicing sudah saya buat struktur elemen2 apa saja yang akan kita slice, untuk melihat bagian apa saja yang saya slice, tinggal buka file PSD dan klik Slice Tool atau tekan tombol K pada keyboard.
Jika anda melihat Nomor dan garis yang ditandai dengan warna biru, itulah bagian yang saya slice, selain warna biru berarti itu otomatis dibuat oleh Photoshop.

Selanjutnya Pilih menu File – Save For Web & Devices (Alt + Shift + Ctrl + S)
Tentukan lokasi penyimpanan, setelah di save otomatis photoshop akan menaruh seluruh file kedalam satu folder bernama images.
Anda dapat menghapus file-file yang tidak diinginkan, sisakan file-file yang tadi di slice, yang tadi kita ditandai dengan warna biru. Lalu Rename setiap file sehingga akan terlihat hasil sebagai berikut.

Video Slicing

Jika bingung bagaimana cara slicing nya, berikut ini ada video yang telah saya rekam saat melakukan Slicing dan Pembuatan Struktur HTML dan CSS

Mohon maaf jika video nya tidak terlalu bagus, maklum dibuat buru2 disela-sela istirahat Real Madrid VS Barcelona

Proses Coding

Struktur HTML

Sekarang kita masuk ke proses pengkodean website, buat sebuat file dengan nama index.html
lalu buat struktur HTML seperti ini, untuk menulis kode saya menggunakan Notepad++ (Editor yang sangat – sangat ringan).

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

<head>
	<title>Izul Cyber Cafe</title>
	<link rel="stylesheet" type="text/css" href="style.css" />	
</head>
<body>
	
	<div id="container">
	
		<div id="header"> </div> <!-- End Header -->
		
		
		<div id="content"> </div> <!-- End Content -->

		
		<div id="footer"> </div> <!-- End Footer -->
		
	</div> <!-- End Container -->
	
</body>	
</html>

Code bagian Header

Setelah selesai membuat struktur kita buat isi dari setiap DIV, pertama kita akan membuat isi dari Header yang terdiri dari Nama Website dan Deskripsi singkat tentang web.

		<div id="header">
		
			<div id="menu">
				<ul>
					<li><a href="#" class="current"><span>Home</span></a></li>
					<li><a href="#">About</a></li>
					<li><a href="#">Menus</a></li>
					<li><a href="#">Contact</a></li>
				</ul>
			</div>
			<a href="#"><h1>Izul Cyber Cafe</h1></a>
			<p>The most comfortable coffee shop in the world</p>
			
		</div> <!-- End Header -->

Code bagian Content

Setelah selesai dengan bagian header, sekarang kita akan menulis kode untuk bagian Header. Bagian header terdiri dari Sidebar(kiri) dan Main(Halaman utama di sebelah kanan)

		<div id="content">
		
			<div id="sidebar" class="column">
				<h2>The Menyyyuu</h2>
				<div class="product">
					<img src="images/product1.jpg" />
					<p class="product-title"> <a href="#">Capuchino</a> </p>
				</div>
				<div class="product">
					<img src="images/product2.jpg" />
					<p class="product-title"> <a href="#">Coffe Mate</a> </p>
				</div>
				<div class="product">
					<img src="images/java.jpg" />
					<p class="product-title"> <a href="#">Java Coffe</a> </p>
				</div>
			</div> <!-- End Sidebar -->
			
			<div id="main" class="column">
				
				<div id="welcome">
					<h2>Halaa Welcome</h2>
					<div>
						<img src="images/owner.png" />
						<p>Hallow...Selamat datang di warung kopi terbaik, ternyaman dan terlengkap didunia</p>
						<p>Kami akan menyuguhkan secangkir kopi untuk anda, kami yakin anda akan menambah</p>
						<p align="right">owner - <b>Izul Chaniago</b></p>
					</div>
				</div> <!-- End Welcome -->
				
				<div id="recent-news">
					<h2>Latest News (Demo)</h2>
					<div class="post">
						<h2><a href="#">Felis at pharetra accumsan</a></h2>
						<p class="meta">Written by Izul Chaniago | 10 December 2011</p>
						<img src="images/big.png" />
						<p>Quisque ultricies, felis at pharetra accumsan, nunc nisl ullamcorper dolor, rhoncus suscipit nibh massa ac 

purus. Quisque convallis, purus a blandit adipiscing, metus erat vulputate ipsum... <span class="more"><a href="#">Read more</a></span></p>
					</div>
				
					<div class="post">
						<h2><a href="#">Felis at pharetra accumsan</a></h2>
						<p class="meta">Written by Izul Chaniago | 10 December 2011</p>
						<img src="images/post1.jpg" />
						<p>Nunc nisl ullamcorper dolor Quisque ultricies, felis at pharetra accumsan, nunc nisl ullamcorper dolor, 

rhoncus suscipit nibh massa ac purus. Quisque convallis, purus a blandit adipiscing, metus erat vulputate ipsum... <span class="more"><a href="#">Read 

more</a></span></p>
					</div>
					<p class="product-title"><a href="#">View All</a></p>
				</div> <!-- End Recent News -->
			</div> <!-- End Main -->
			
		</div> <!-- End Content -->

Jquery Equal Height Column (sidebar & main)

Di bagian Kontent, kita memiliki 2 kolom, kiri dan kanan, kolom kiri dan kanan memiliki konten yang tidak sama, hal ini bisa menyebabkan bagian kiri dan
kanan tidak sama tinggi, kadang kiri lebih tinggi, terkadang kanan lebih tinggi, untuk menyamakan maka sisipkan Jquery dan Script untuk menyamakan tinggi div.
Div sidebar dan Main kita kasih Class=”column”. Dengan script ini, div yang memiliki nama class ‘column’ akan

dibuat otomatis memiliki tinggi yang sama.

Cara penggunaannya sisipkan script berikut di antara dan

	
	 // Jquery Equal Height Column 
		function equalHeight(group) {
			tallest = 0;
			group.each(function() {
				thisHeight = $(this).height();
				if(thisHeight > tallest) {
					tallest = thisHeight;
				}
			});
			group.height(tallest);
		}
		$(document).ready(function() {
			equalHeight($(".column"));
		}); // End Jquery Equal Height Column 
	

Di Bagian content tambahkan class=”column” di Sidebar dan Main, sehingga terlihat seperti berikut

<div id="sidebar" class="column">

<div id="main" class="column">

Code bagian Footer

Bagian akhir yaitu footer, difooter kita memiliki Menu dan Copyright, code nya adalah sebagai berikut.

		<div id="footer">
		
			<div id="footer-menu">
				<ul>
					<li><a href="#">Home</a></li>
					<li><a href="#">About</a></li>
					<li><a href="#">Menus</a></li>
					<li><a href="#">Photos</a></li>
					<li><a href="#">Contact</a></li>
					<li><a href="#">Blog</a></li>
				</ul>
			</div> <!-- End Footer Menu -->
			
			<div id="copyright">
				Copyright &copy; 2011 | Designed by <span><a href="http://izulcybercafe.com">Izul Cyber Cafe</a></span>
			</div> <!-- End Copyright -->
			
		</div> <!-- End Footer -->

CSS

style.css

Setelah selesai membuat code HTML dari Header sampai dengan Footer, kini saatnya kita mempercantik website dengan CSS

Berikut adalah code CSS yang kita gunakan

body{
	font-family: verdana, arial;
	margin:0;
	padding:0;
	background:url('images/bg-grid.jpg') right top;
	color:#847a52;
	line-height:1.5em;
	letter-spacing:0.7px;
}
h2{margin:0; padding:10px 0 0 0;color:#9c9062;border-bottom:1px dotted #ece3c8; font-size:18px;font-family: 'Electrolize', sans-serif;}
a{text-decoration:none; color:#9c9062; font-weight:bold}
h2 a{color:#9c9062}
a:hover{color:#000}
ul, ul li {margin:0}

#container{
	width:800px;
	padding:0 5px;
	margin:0 auto;
	background:url('images/bg_wrapper-how.png');
}

	#header{
		height:315px;
		background:transparent url('images/header.jpg') top center no-repeat;
	}

		#header #menu{
			height:120px;
			position: relative;
			top:20px;
			left:20px;
		}

			#header #menu ul{
				list-style-type:none;
				margin:0;
				padding:0;
			}

				#header #menu ul li{
					display:inline;
					margin:0;
				}

					#header #menu ul li a{
						font-weight:bold;
						color:#000;
						display:inline-block;
						padding:42px 37px;
						background:transparent url('images/circle.png') center no-repeat;
					}

						#header #menu ul li a:hover,
						#header #menu ul li a.current{
							background:transparent url('images/circle-hover.png') center no-repeat;
						}
		#header h1{
			color:#9d211c;
			width:415px;
			height:51px;
			margin:20px 20px 0px 65px;
			font-size:50px;
			text-shadow: 1px 1px 1px #fbf0d0, 3px 3px 5px #d8ba59;
			background:url('images/izulcybercafe.png') top left no-repeat; /* Delete jika ingin menggunakan Teks  */
		}
		#header p{
			width:425px;
			text-align:right;
			margin-left:95px;
			margin-top:0;
		}

#content{
	overflow:hidden;
	border-top:1px solid #fbf0d0;
	margin:0px; padding:0px;
	background:url('images/bg.jpg');
}
#content #sidebar{
	float:left;
	width:224px;
	padding:0 25px;
	background:url('images/sidebar.jpg') left repeat-y;
}
	.product{margin:10px 0;}
	.product img{padding:3px; background:#f4f4f4; box-shadow: 1px 1px 1px #fbf0d0, 3px 3px 5px #f0e3be;}
	.product img:hover{box-shadow: 1px 1px 1px #fbf0d0, 3px 3px 5px #d8ba59;}
	.product-title{text-align:right}


#main{
	float:right;
	width:500px;
	padding:0 10px;
}
	#main #welcome{
		overflow:hidden;
	}
		#main #welcome div{
			font-style:italic;
		}
		#main #welcome img{
			float:right;
		}

	#main  .post{
		border-bottom:1px solid #ece3c8;
		margin:10px 0;
	}
		#main p.meta{font-size:small}
		#main .post img{
			float:left;
			background:#f7f7f7;
			padding:5px;
			margin:0 10px 10px 0;
			box-shadow: 1px 1px 1px #fbf0d0, 3px 3px 5px #f0e3be;
		}
		#main .post img:hover{box-shadow: 1px 1px 1px #fbf0d0, 3px 3px 5px #d8ba59;}
		#main .comment-post{
			margin:5px;
			display:block;
			border-bottom:1px dotted #9c9062;
			min-height:130px;
		}
		#main .comment-post img{
			background:#f7f7f7;
			float:left;
			padding:5px;
			margin:0 10px 10px 0;
		}
		
#footer{
	clear:both;
	font-size:small;
	height:37px;
	padding:2px 0 18px 0;
	text-align:center;
	color:#f5df9f;
	background:url('images/footer.jpg') repeat-x;
}
#footer a{color:#eddeb2}
#footer #footer-menu ul{
	list-style:none;
}
#footer #footer-menu ul li,
#footer #footer-menu ul li a {display:inline;color:#f5df9f; padding:0 5px}

Oke sekian tutorial ini, Jika ada yang mau merubahnya menjadi template wordpress silahkan

Maju terus web design Indonesia.

Tags

membuat web dengan jquery,cara convert psd ke html,cara membuat website menggunakan css,belajar div,convert psd ke html,web yang sudah jadi,membuat kotak dengan css,how to convert psd to html,cara mengkonversi psd ke html,tutorial web design dengan notepad,belajar web design dengan notepad,cara menambahkan css,slicing,cara konversi psd ke html,photoshop to html tutorial,photoshop to html,cara psd to html,belajar desain web dengan notepad,cara convert PSD ke css,cara convert psd to wordpress

]]> http://belajarwebdesign.com/webdesign/tutorial-konversi-psd-ke-html-css/feed/ 57 http://belajarwebdesign.com/webdesign/tutorial-konversi-psd-ke-html-css/ http://feedproxy.google.com/~r/Belajarwebdesign/~3/870fU0sQ5qY/ http://belajarwebdesign.com/wordpress/menampilkan-post-berdasarkan-categories-wordpress/#comments Mon, 12 Dec 2011 01:30:50 +0000 finnfirrior http://belajarwebdesign.com/?p=2437 Sudah cukup lama tidak menulis di BW, kebetulan baru dapet trick dari master edypang. Disini aku ingin berbagi tutorial bagaimana menampilkan post dari category.

Untuk memudahkan aku akan membuat perbandingan antara cara menampilkan post biasa dalam wordpress dan cara menampilkan post dari category

contoh 1: menampilkan post dalam wordpress:

<?php if (have_posts()) : ?>
<?php while (have_posts()) : the_post(); ?>
<div>
  <div>
    <span><?php the_time(d); ?></span>
    <span><?php the_time(M); ?></span>
  </div>
  <div>
   <h2><a href="<?php the_permalink() ?>"><?php the_title();?></a></h2>
    <p>posted in <a href="#"><?php the_category(', '); ?></a> - <a href="<?php the_permalink()?>;#comments">
    <?php comments_number('No Comment','1 Comment','%comments') ?></a></p>
    <p><?php the_excerpt(); ?>
    <a href="<?php the_permalink() ?>">Continue</a></p>
  </div>
  <div></div>
</div>
<?php endwhile; ?>
<?php else : ?>
<?php /* Error 404 */ ?>
<?php $filename = TEMPLATEPATH . '/404.php'; if (file_exists($filename)) { include($filename); } ?>
<?php endif; ?>

penjelasan: script 1 dan 2: mencari apakah ada post dalam WP lalu setelah itu di looping sesuai dengan script 3-16. script 17 -21: berhenti looping
Nah… Sekrang bagaimana menampilkan post berdasarkan Category? ternyata cukup mudah. Silakan cari cari perbedaan dari 2 script berikut

Contoh 2: Post dari Category

<?php if (query_posts('cat=22')) : ?>
<?php while (have_posts()) : the_post(); ?>
<div>
  <div>
    <span><?php the_time(d); ?></span>
    <span><?php the_time(M); ?></span>
  </div>
  <div>
   <h2><a href="<?php the_permalink() ?>"><?php the_title();?></a></h2>
    <p>posted in <a href="#"><?php the_category(', '); ?></a> - <a href="<?php the_permalink()?>;#comments">
    <?php comments_number('No Comment','1 Comment','%comments') ?></a></p>
    <p><?php the_excerpt(); ?>
    <a href="<?php the_permalink() ?>">Continue</a></p>
  </div>
  <div></div>
</div>
<?php endwhile; ?>
<?php else : ?>
<?php /* Error 404 */ ?>
<?php $filename = TEMPLATEPATH . '/404.php'; if (file_exists($filename)) { include($filename); } ?>
<?php endif; ?>

penjelasan: ternyata setelah mencari perbedaannya, pada script 1 berubah? apa maksudnya?

Tujuan dari menganti code tersebut ialah dengan menganti script tersebut maka WP akan mencari apakah di query category berID 22 ada post? jika ada maka akan di tampilan

Cara Penulisan: “query_posts(‘cat=*nomer id categories’)”, sbagai contoh pada kasus di atas nomer ID category yang ingin aku pakai ber ID “22″

Tips untuk mengetahuinya: klik link kategorynya lalu perhatikan pada address barnya.

 

Ada beberapa cara untuk mengetahui ID kategory ada beberapa cara, tapi itu adalah salah satu caranya. SEMOGA MEMBANTU

Tags

contoh tampilan desain web,mendesain tampilan web,membuat wordpres,menampilkan posting berdasarkan kategori wordpress,penjelasan upload,menampilkan post berdasarkan kategori wordpress,menampilkan post per category,menampilkan artikel berdasarkan tags pada wordpress,membuat menu,looping php,mendesain tampilan web dengan php,menampilkan post berdasarkan kategori di wordpress,cara menampilkan satu kategori di wordpress,bagaimana menampilkan tools di power designer,menampilkan posting sesuai kategori wp,menampilkan category di post wordpress com,menampilkan category di wordpress,script menampilkan postingan per kategori wordpress,wordpress menampilkan posting sesuai category,script php menampilkan gallery foto post di wp

]]> http://belajarwebdesign.com/wordpress/menampilkan-post-berdasarkan-categories-wordpress/feed/ 13 http://belajarwebdesign.com/wordpress/menampilkan-post-berdasarkan-categories-wordpress/ http://feedproxy.google.com/~r/Belajarwebdesign/~3/TEA1rgHFCqQ/ http://belajarwebdesign.com/off-topic/infographic-mengenal-google-lebih-lagi/#comments Sat, 03 Dec 2011 02:10:15 +0000 Jogi Silalahi http://belajarwebdesign.com/?p=2482 Pasti anda dalam keseharian menggantungkan diri kepada hasil pencarian Google, bukan? Apalagi ketika sedang kerja design atau develop website, paling tidak ada searching beberapa resource yang mungkin berguna / dibutuhkan. Atau mungkin yang lagi programming, ada mentok masalah coding, dan akhirnya memutuskan minta bantuan kepada Google untuk membantu mencari solusinya.

Nah, ternyata ada beberapa tips dan trik ketika kita ingin research dengan bantuan Google.  Berikut adalah beberapa diantaranya. Kredit infographic oleh HackCollege.

 

Tags

Infographic tentang google,cara kerja web design,cara kerja google,cara kerja web designer,tentang google hacking

]]> http://belajarwebdesign.com/off-topic/infographic-mengenal-google-lebih-lagi/feed/ 4 http://belajarwebdesign.com/off-topic/infographic-mengenal-google-lebih-lagi/ http://feedproxy.google.com/~r/Belajarwebdesign/~3/TlG6OxMUtKM/ http://belajarwebdesign.com/webdesign/bootstrap-toolkit-dari-twitter/#comments Fri, 02 Dec 2011 02:05:32 +0000 Jogi Silalahi http://belajarwebdesign.com/?p=2488 Beberapa bulan yang lalu, saya membaca mengenai web design di salah satu online magazine terkenal. Dari sana saya mengetahui tentang Bootstrap ini. Karena tertarik, saya coba-coba sedikit dan wow, saya suka dengan toolkitnya. Dari sisi antar muka, toolkit yang satu ini cukup lengkap. Saya sekarang bisa bangun web dan menghemat waktu dalam urusan antarmuka.

Bootstrap adalah toolkit yang dibuat oleh Twitter. Jadi kita sedikit terbantu untuk membuat web application ataupun website. Di dalam Bootstrap sudah ada CSS dan juga HTML untuk  typography, forms, buttons, tables, grids, navigation dll. Cukup lengkap, bukan?

Bootstrap from Twitter

Bootstrap juga sudah kompatibel dengan berbagai macam browser seperti Safari, Google Chrome, Firefox, Internet Explorer dan juga Opera. Jadi gak perlu takut hasilnya berlainan ketika di buka di browser yang berbeda. Iya memang, urusan keseragaman di berbagai macam browser ini cukup membuat para designer pusing.

Oh ya, untuk mencobanya, silahkan  langsung menuju situsnya Bootstrap. Disana juga ada dokumentasinya sehingga anda bisa mudah mengerti bagaimana cara mengimplementasikannya.

Nah, untuk melihat beberapa website yang dibangun menggunakan Bootstrap, bisa lihat di BuildWithBootstrap. Oh ya, apakah ada diantara kita yang menggunakan Bootstrap ini? Anda juga bisa submit website / web application yang di bangun dengan menggunakan toolkit ini di sana. 

Tags

cara menggunakan bootstrap,cara mengetahui siapa yang melihat twitter kita,bootstrap adalah,cara desain tumblr,cara pakai tumblr,belajar bootstrap,apa itu github,twitter bootstrap adalah,cara melihat siapa yang melihat twitter kita,cara mengoperasikan tumblr,menggunakan tumblr,menggunakan bootstrap,bootstrap,tutorial menggunakan bootstrap,cara penggunaan tumblr,belajar twitter bootstrap,twitter bootstrap,cara menggunakan twitter bootstrap,mengetahui siapa yang melihat twitter kita,cara melihat yang melihat twitter kita

]]> http://belajarwebdesign.com/webdesign/bootstrap-toolkit-dari-twitter/feed/ 9 http://belajarwebdesign.com/webdesign/bootstrap-toolkit-dari-twitter/ http://feedproxy.google.com/~r/Belajarwebdesign/~3/ROzcp5rAqAg/ http://belajarwebdesign.com/wordpress/interview-anggi-krisna-dari-tokokoo/#comments Wed, 30 Nov 2011 08:11:51 +0000 Admin http://belajarwebdesign.com/?p=2472 Pada kesempatan kali ini saya akan mewawancarai seseorang founder dari Tokokoo. dia adalah Anggi Krisna @anggikrisna. Semoga bisa memberikan inspirasi bagi anda yang mau terjun dalam bisnis jualan Theme WordPress atau sejenisnya

Halo Mas Anggi apa kabar?
Alhamdulillah, (sejauh ini selalu) baik..

Saya mengenal anda sebagai founder dari iCreativeLabs & juga @Tokokoo, tapi sekarang saya ingin bertanya tentang @Tokokoo. Coba ceritakan apa itu tokokoo?
Tokokoo adalah pembuat WordPress theme yang berfokus di bidang e-commerce. Semua themes di sini 100% asli buatan orang Indonesia.

Tokokoo | Premium WordPress eCommerce Themes

Fokus tokokoo adalah dalam menyediakan desain theme wordpress khusus untuk jualan/ecommerce. kenapa?
Sebab, WordPress e-commerce itu seperti blue ocean, belum terjamah. Masih sedikit pihak yang menggarap bidang WordPress e-commerce theme.

Kalau boleh tahu, apa latar belakang Anda? Sehingga bisa mendirikan sebuah perusahaan yang fokus pengembangan Theme WordPress?
Latar belakang saya adalah lulusan Fakultas Perikanan dan Ilmu Kelautan IPB, hahaha. Memilih fokus pengembangan WordPress themes karena ada yang mau membayarkan jerih payah kami saja. Berhubung yang kami jual adalah themes, satu kali proses pembuatan pun bisa menghasilkan ratusan transaksi. Ibaratnya, sekali tanam tapi panen terus (passive income).

Pangsa pasar yang paling besar tentu pasar luar negeri, seperti Amerika & Eropa, bagaimana dengan Asia? Indonesia?
Benar sekali, mayoritas pembeli berasal dari Amerika dan Eropa karena mereka sudah melek teknologi. Dari Asia pun lumayan banyak, diantaranya dari Jepang dan Singapura.

Adakah pembeli dari Indonesia? Hehe..
Sejauh ini, 98% pelanggan kita adalah orang luar negeri. Hanya sekitar 2% yang orang Indonesia. Tapi makin ke sini mulai banyak pembeli baru berdatangan dari Indonesia.

Apa theme wordpress pertama yang dibuat @tokokoo?
AppCloud. Setelah rilis AppCloud membawa banyak respon positif, nggak disangka kami bisa nampang di SmashingMagazine. Alhasil, sedikit demi sedikit nama Tokokoo mulai ‘terdengar’.

Berapa banyak Themes yang dihasilkan oleh tokokoo sampai sekarang?
Sejauh ini ada 12 themes yang nangkring di galeri. Uniknya themes kami adalah segmentasi untuk tiap industri seperti: musik, furnitur, aplikasi, penerbitan, dll. Untuk lebih lengkapnya bisa lihat http://tokokoo.com/tokokoo-themes/.

Themes WordPress yang banyak dijual kan Premium, Apa ada yang Free?
Yup, kami menyediakan versi Lite untuk beberapa themes, bisa dilihat di http://tokokoo.com/tokokoo-themes-free/. Beberapa waktu lalu kami bahkan meluncurkan BuySell free WordPress e-commerce theme (http://tokokoo.com/portfolio/buysell/) yang diprakarsai dari kerja sama dengan GetShopped.

BuySell Theme

Apakah @tokokoo juga melayani Support untuk Themes yang dijualnya? Coba ceritakan kenapa lebih memilih menjual Themes WordPress sendiri ketimbang menjualnya di Themeforest & sejenisnya?
Ya, pembeli themes kami bisa menyampaikan pertanyaan dan keluhan seputar themes ke fasilitas support ticket yang akan direspon langsung oleh developer kami pada jam kerja.

Kenapa nggak jualan di Themeforest? Sebab, awalnya memang saya sudah jualan sendiri. Kalau berjualan di marketplace harganya bisa beda jauh.

Tapi buat newbie, saran saya lebih baik berjualan di marketplace. The real world sangatlah kejam. *bercanda* *tapi serius*

Menurut Anda Themes yang bagus itu seperti apa? Apa dari segi desain atau dari segi fungsinya?
Themes yang bagus itu yang dibutuhkan oleh user-nya. Buat apa desain keren tetapi tidak menyelesaikan masalah yang dihadapi user? Desain menjadi nomor sekian, toh saat ini sudah semakin banyak orang yang jago desain.

Persaingan penjual Themes WordPress sekarang ini kan ketat, peluangnya bagaimana?
Peluangnya memang semakin berat untuk ditemukan. Jadi, pandai-pandailah mencari ceruk pasar (market niche) baru.

Bisa kasih masukan buat teman-teman @belajar_web yang ingin berjualan theme wordpress seperti @tokokoo?
Sering-seringlah meneliti pasar, baik dari segi user maupun provider. Cari apa yang mereka mau, dan sediakan. Jangan selalu menjadi follower. Saat ini, ada baiknya mencoba di marketplace untuk meminimalisasi cost.

Terakhir, Apa rencana @tokokoo kedepan?
Kita ingin menjadi one-stop e-commerce solution untuk kancah nasional dan internasional. Sekiranya berkenan, minta doanya, ya.

Terima Kasih Mas Anggi atas waktunya, semoga @tokokoo bisa sukses dan mengharumkan nama indonesia di panggung themes dunia

Gambar : http://sunaryohadi.tumblr.com

Tags

tema tumblr keren,cara buat portfolio,theme tumblr keren,tema tumblr keren gratis,latar belakang website,tema tumblr free,theme tumblr unik,tema untuk tumblr,latar belakang desain web,cara membuat portofolio programmer,tema untuk tumblr free,anggi krisna,tema-tema tumblr,tema unik untuk tumblr,tema tumblr keren free,membuat portofolio dengan wordpress,jualan di themeforest,cara jual tema,tokokoo,cara menjual theme wordpress

]]> http://belajarwebdesign.com/wordpress/interview-anggi-krisna-dari-tokokoo/feed/ 19 http://belajarwebdesign.com/wordpress/interview-anggi-krisna-dari-tokokoo/ http://feedproxy.google.com/~r/Belajarwebdesign/~3/JG0QIM5rcRY/ http://belajarwebdesign.com/web-programming/code-igniter-base-url-dinamis/#comments Fri, 25 Nov 2011 01:33:17 +0000 zenzaqi http://belajarwebdesign.com/?p=2374 Ketika pertama kali develop dengan CodeIgniter, tentu harus mengatur base URL, begitu juga ketika hendak mendeploy (implementasi). Base URL ini digunakan untuk link tetap mengakses resource dan link-link page, bisanya adalah URL utama tersebut.
Setting base URL diatur di dalam file config.php pada folder config, berikut isinya :

$config['base_url'] ='http://www.domainanda.com'

atau jika dalam masa development

$config['base_url'] ='http://localhost/website'

Ketika Anda hendak memindahkan isi website ke domain atau host lain yang berbeda dengan denga URL awal, tentu Anda harus mengatur ulang, betapa repotnya jika Anda hendak menduplikasi atau melakukan pemindahan ke alamat URL baru.

Berikut cara sederhana untuk mengubahnya menjadi dinamis :

$http = 'http' . ((isset($_SERVER['HTTPS']) && $_SERVER['HTTPS'] == 'on') ? 's' : '') . '://';
$newurl = str_replace("index.php","", $_SERVER['SCRIPT_NAME']);
$config['base_url']    = "$http" . $_SERVER['SERVER_NAME'] . "" . $newurl;

Nah, dengan cara di atas, Anda tidak perlu repot-repot mengubahnya berkali-kali ketika deploy ke server, alamat baru.

Silakan mencoba, semoga sukses !!! Ignite your code !!!

Tags

cara hosting codeigniter,belajar codeigniter untuk pemula,array dinamis php,pyrocms tutorial,base url codeigniter,menu dinamis codeigniter,cara link di codeigniter,mengatur url codeigniter,base_url codeigniter,base url php,membuat link codeigniter,programmer codeigniter,link codeigniter,url dinamis,belajar url codeigniter,panduan hosting codeigniter,setting dinamis config di ci,link di codeigniter,cara menggunakan baseurl,codeigniter link page

]]> http://belajarwebdesign.com/web-programming/code-igniter-base-url-dinamis/feed/ 8 http://belajarwebdesign.com/web-programming/code-igniter-base-url-dinamis/ http://feedproxy.google.com/~r/Belajarwebdesign/~3/9bZEcwB4ORU/ http://belajarwebdesign.com/off-topic/mengenal-auto-batch-pada-photoshop/#comments Tue, 22 Nov 2011 05:26:42 +0000 ariesmallville http://belajarwebdesign.com/?p=2406 Pernakah teman-teman mengalami tugas atau kegiatan untuk mengedit beberapa image dengan efek yang sama berulang-ulang? Contoh yang paling mudah atau sering ditemui adalah meresize beberapa image item suatu produk agar sesuai dengan layout yang telah disediakan di website. 

Studi kasus yang akan saya angkat adalah : Saya ingin me-resize kumpulan image raw sebuah product ecommerce dalam suatu folder.

Langkah 1 – Persiapkan Actions 

Buka 1 file gambar yang akan di edit terlebih dahulu. Persiapkan Actions (Alt+F9) untuk membuat guideline

Pilih Create New Set , kemudian pilih Create New Actions, dan beri nama pada kolom actions (contoh : MyResize). Pilih Begin Recording dan kegiatan edit pun siap di rekam.

Langkah 2 - Edit Gambar sebagai Guideline

Contoh simple yang akan saya tunjukkan sebagai guideline adalah :

1. Mengubah gambar ke ukuran 191×191 pixel (hanya contoh)

2. Menyimpan optimasi ke web dan menyimpannya pada suatu folder yang telah ditentukan

3. Menutup file raw dan tidak menyimpannya

4. Stop Recording (pada Actions) , maka hasil yang didapat adalah sebagai berikut :

Langkah 3 – Auto Batch File Raw

1. Pilih File – Automate – Batch

2. Set Actions yang akan digunakan, dan pilih folder gambar yang akan di edit otomatis

3. Tunggu sampai proses auto batch me-resize gambar-gambar yang ada dalam source folder. Dan perhatikan apa yang terjadi.

4. Folder hasil auto batch akan berada pada tempat anda mensetting pada Langkah 2.2.

Selamat menikmati…

Tags

contoh web design yang sudah jadi,contoh web desain,kumpulan web e-commerce,kumpulan theme wordpress,Kumpulan Tema WordPress,kumpulan web css,photoshop otomatis,kumpulan web e commerce,ecommerce wordpress free,kumpulan web ecomerce,batch photoshop,photoshop actions layout webdesign,kumpulan website ecommerce,folder auto action photoshop,e-commerce kumpulan website,theme wordpress ecommerce,kumpulan theme,kumpulan website ecomerce,galeri foto,kumpulan themes wordpress

]]> http://belajarwebdesign.com/off-topic/mengenal-auto-batch-pada-photoshop/feed/ 2 http://belajarwebdesign.com/off-topic/mengenal-auto-batch-pada-photoshop/ http://feedproxy.google.com/~r/Belajarwebdesign/~3/_kPJs4y8rlw/ http://belajarwebdesign.com/webdesign/konfigurasi-photoshop-untuk-menghasilkan-desain-yang-pixel-perfect/#comments Thu, 10 Nov 2011 02:30:18 +0000 Admin http://belajarwebdesign.com/?p=2315 Software Adobe Photoshop memang dari awal dibuat untuk mengolah gambar agar bisa di modifikasi sedemikian rupa untuk menghasilkan desain yang bagus dan keren dengan penambahan berbagai efek tanpa mempertimbangkan detail desain.

Perkembangan desain sekarang ini mengharuskan kita untuk membuat sebuah desain dengan mempertimbangkan hal yang sangat mendetail (Pixel Perfect) agar desain website yang kita buat bisa enak dilihat oleh pengunjung website kita.

Apa itu Pixel Perfect?

Pixel Perfect adalah proses menyelaraskan objek yang membentuk sebuah desain/layout pada ukuran pixel yang tepat.

Memang secara default pada photoshop ketika kita membuat sebuah objek pada beberapa sisi kadang masih ada bayangan-bayangan, itu terjadi karena pada ujung sebuah objek tersebut tidak berhenti pada pixel yang tepat.

Contoh Pixel Perfect

Langkah Konfigurasi Pixel Perfect di Photoshop

Setting pada bagian Units & Rules > Unit : Ubah bagian Ruler dari cm ke pixel.

Units & Rulers

Atur Guides, Grid & Slice > Grid : ubah ke Gridline Every 10 pixel, dan Subdivition 1

Guides, Grid & Slices

Setup Snap : View > Snap to = guide, grid, document bound

Set Snap To: Guides, Grid, Document Bounds

jangan lupa centang Snap To Pixel seperti dibawah ini

Snap to Pixel

Oke, sudah selesai.
Langkah diatas adalah membantu kita dalam meminimalisir terjadinya objek yang keluar dari pixel.

Tags

contoh html yang sudah jadi,contoh website keren,contoh desain web keren,contoh web design keren,contoh design web yang bagus,web keren,contoh website yang sudah jadi,contoh web yang sudah jadi,contoh desain web dengan php,contoh web jadi,website yang sudah jadi,photoshop,download website yang sudah jadi,contoh website jadi,web design keren,contoh website,download web sudah jadi,web jadi,contoh website design,apa yang harus ada di website

]]> http://belajarwebdesign.com/webdesign/konfigurasi-photoshop-untuk-menghasilkan-desain-yang-pixel-perfect/feed/ 9 http://belajarwebdesign.com/webdesign/konfigurasi-photoshop-untuk-menghasilkan-desain-yang-pixel-perfect/ nonadult