Warning: session_start() [function.session-start]: Cannot send session cookie - headers already sent by (output started at /home/mloppcom/public_html/rumahdot.com/wp-content/plugins/all-in-one-seo-pack/all_in_one_seo_pack.php:1797) in /home/mloppcom/public_html/rumahdot.com/wp-content/plugins/wpipad.php on line 27

Warning: session_start() [function.session-start]: Cannot send session cache limiter - headers already sent (output started at /home/mloppcom/public_html/rumahdot.com/wp-content/plugins/all-in-one-seo-pack/all_in_one_seo_pack.php:1797) in /home/mloppcom/public_html/rumahdot.com/wp-content/plugins/wpipad.php on line 27

Warning: Cannot modify header information - headers already sent by (output started at /home/mloppcom/public_html/rumahdot.com/wp-content/plugins/all-in-one-seo-pack/all_in_one_seo_pack.php:1797) in /home/mloppcom/public_html/rumahdot.com/wp-includes/feed-rss2.php on line 8
Web Programming - Web Design - Web Business Resources Indonesia by RumahDot.com » Web Programming http://rumahdot.com Tempat ngumpulnya para web developer indonesia Fri, 12 Apr 2013 10:56:55 +0000 en hourly 1 http://wordpress.org/?v=3.1 Mengenal dan Menggunakan Framework CSS Twitter Bootstrap http://rumahdot.com/web-programming/mengenal-dan-menggunakan-framework-css-twitter-bootstrap/ http://rumahdot.com/web-programming/mengenal-dan-menggunakan-framework-css-twitter-bootstrap/#comments Tue, 25 Sep 2012 11:54:02 +0000 edypang http://rumahdot.com/?p=24703

Kita mungkin sudah akrab menggunakan framework CSS baik fixed seperti Blueprint, 960.gs maupun yang responsive/adaptive seperti lessframework, cssgrid, skeleton, 320andup, foundation dan tentu masih banyak lagi yang lainnya. Kali ini mari kita mengenal CSS framework bernama Bootstrap yang dikembangkan developer Twitter.

Mengapa Menggunakan Bootstrap?

Bootstrap memang bukan framework baru, bahkan versi terbarunya adalah Bootstrap 2.1.1 yang support responsive design. Mengapa kita perlu mengenal CSS framework ini? Tentunya karena framework ini begitu lengkap, memiliki dokumentasi yang komplit. Selain itu bootstrap memiliki komponen-komponen dan fitur yang lengkap seperti penjelasan dibawah.

Langkah Awal Menggunakan Bootstrap

Untuk menggunakan bootstrap, silakan mendownload terlebih dahulu Twitter Bootstrap dengan mengunjungi homepagenya di http://getbootstrap.com. File yang terdownload [boostrap.zip] mengandung 3 folder aset dari bootstrap yakni seperti gambar berikut:

Berikut isi dari 3 folder aset tersebut:

bootstrap/
  ├── css/
  │   ├── bootstrap.css
  │   ├── bootstrap.min.css
  ├── js/
  │   ├── bootstrap.js
  │   ├── bootstrap.min.js
  ├── img/
  │   ├── glyphicons-halflings.png
  │   ├── glyphicons-halflings-white.png

  1. css/bootstrap.css berisi style dasar (reset, layout, typography, button) bawaan bootstrap.
  2. css/bootstrap-responsive.css berisi setting responsive desain. Kita bisa memakainya bersama bootstrap.css untuk membuat style bootstrap menjadi responsive.
  3. css/bootstrap-min.css dan
  4. css/bootstrap-responsive-min.css versi compressed dari bootstrap.css dan bootstrap-responsive.css
  1. img/glyphicons-halflings.png dan
  2. img/glyphicons-halflings-white.png, adalah icon yang digunakan pada bootstrap dengan teknik spriting.
  1. js/bootstrap.js dan
  2. js/bootstrap-min.js adalah javascript untuk mengaktifkan berbagai fitur keren bawaan bootstrap.

Ok, seperti biasa, jika anda ingin mengkonvert psd ke file html, buatlah file index.html pada folder aset bootstrap.

Berikut contoh markup beserta penjelasannya:

<br />
<!DOCTYPE html><br />
<html lang="en"><br />
<head><br />
     <meta charset="utf-8"><br />
     <title>Bootstrap Testing</title><br />
     <meta name="description" content="Deskripsi Bootstrap Testing"></p>
<p>     <!-- Sertakan css bootstrap --></p>
<link rel="stylesheet" href="css/bootstrap.css">
<p>     <!-- Sertakan css bootstrap responsive untuk layout responsive --></p>
<link rel="stylesheet" href="css/bootstrap-responsive.css">
<p>     <script src="js/libs/modernizr-1.6.min.js"></script><br />
</head></p>
<p><body><br />
      <!-- Konten Utama di Sini --></p>
<p>     <!-- Jangan lupa menyertakan Jquery --><br />
     <script src="http://code.jquery.com/jquery-latest.js"></script><br />
     <!-- Sertakan bootstrap.js --><br />
     <script src="js/bootstrap.js"></script></p>
<p></body><br />
</html><br />

Komponen-komponen yang dapat digunakan pada Bootstrap:

Sebagaimana saya sebutkan bahwa bootstrap memiliki fitur yang sangat lengkap. Anda bisa melihat dari dokumentasi yang disediakan.

Bootstrap menggunakan normalize.css untuk reset element html. normalize.css digunakan untuk tujuan menyamakan rendering semua elemen html (termasuk html5) di semua browser. Bootstrap juga terdiri dari setting body type dan link.

Bootstrap juga mendukung grid system sebagaimana yang terdapat di berbagai macam css framework. Kita tahu dengan adanya grid system kita menjadi lebih mudah dan cepat dalam mengelola layout pada posisi grid yang kita inginkan.

Contoh code:

</p>
<div class="row">
<div class="span3"> Something in Grid 3 </div>
<div class="span3"> Something in Grid 3 </div>
<div class="span6"> Something in Grid 6 </div>
</div>
<p>

Jumlah grid maksimum adalah 12, untuk membagi grid dalama satu row, kita bisa menggunakan class .span1 hingga .span12

Elemen (termasuk tag-tag html) dasar yang biasanya membutuhkan styling mendetail telah distyle secara rapi, mulai dari heading, body, Code & pre, labels & badges, table, form hingga button. Nilai plusnya lagi, bootstrap menyediakan spriting icon (menggunakan icon glyphicon) jika kita hendak memasang icon pada markup html kita dengan langkah yang cukup mudah. Total 140 icon hitam dan icon berwarna putih (untuk background gelap) dengan jumlah yang sama.

Contoh code:

<br />
<span><i class="icon-user"></i>Contoh Icon User</span><br />
<span><i class="icon-star icon-white"></i>Contoh Icon Bintang Putih</span><br />

Juga, bootstrap menyediakan fasilitas lengkap yang siap pakai dan dapat dikustomisasi meliputi dropdown, navigasi, tombol-tombol, breadcrumb, pagination dan masih banyak lagi.

Element-element javacript yang disediakan meliputi beberapa komponen-komponen seperti tooltips, popovers, modals, dropdowns, collapse (accordion) dan carousel untuk slider.

Untuk responsive webdesign ada beberapa media query yang secara efault disetting dari awal yakni untuk ukuran layar tablet sampai mobile (<767px), tablet sampai desktop (767-979px), dan desktop lebar (>1200px). Tentu saja kita bisa mengubah settingan sesuai kemauan kita. Selain itu disediakan juga tag-tag khusus untuk mendukung responsive desain seperti class visible/hidden dan responsive menu (navbar).

Next Steps

Begitulah gambaran fitur dan cara dasar menggunakan Twitter Bootstrap. Dengan lengkapnya element dan stylenyang disediakan bootstrap, kita dapat mendevelop sebuah website dengan cepat. Oh ya, tampilan dan style yang ada di Bootstrap baik warna, button style, box, font dan lain-lain memang dibuat mirip dengan yang ada di website Twitter. Tentu saja kita bisa merubahnya dengan mengedit file bootstrap.css atau menambahkan file styling untuk mereplace properti style yang ada di bootstrap.css, misalnya menambahkan style.css. Selain membuat sendiri, kita juga bisa mendownload bootstrap theme dengan style berbeda di bootswatch.com

Tertarik menggunakan Bootstrap?

]]>
http://rumahdot.com/web-programming/mengenal-dan-menggunakan-framework-css-twitter-bootstrap/feed/ 7
Membuat Form Pencarian yang Elegan dengan CSS3 http://rumahdot.com/web-programming/membuat-form-pencarian-yang-elegan-dengan-css3/ http://rumahdot.com/web-programming/membuat-form-pencarian-yang-elegan-dengan-css3/#comments Fri, 20 Jul 2012 08:56:56 +0000 Natha Fatima http://rumahdot.com/?p=24625 Form pencarian merupakan salah satu elemen UI yang paling umum digunakan, dan saya kira tidak perlu dijelaskan tentang kegunaannya. Entah itu pada sebuah website atau aplikasi berbasis web, Anda perlu membuat field pencarian tampil lebih bagus, intuitif, dan juga elegan untuk meningkatkan user experience.

DEMO - DOWNLOAD

Hari ini, kita akan belajar bagaimana membuat kotak pencarian yang bagus menggunakan CSS3 beserta pseudo-element.

Kode HTML

Mark up yang kita gunakan sangat sederhana, tidak neko-neko, dan ora umum!

<form class="form-wrapper cf">
        <input type="text" />
        <button>Cari</button>
    </form>


Anda mungkin memperhatikan atribut HTML5 seperti placeholder dan required, berikut penjelasan singkat tentang atribut-atribut ini:

  • placeholder - atribut ini menampilkan teks pada kotak pencarian jika sedang tidak berada pada kondisi focus, dan akan menyembunyikan teks tersebut jika pengguna sedang fokus berada pada kotak pencarian.
  • required - sebagai penanda bahwa elemen tersebut merupakan bagian yang wajib diisi dari sebuah form.

HTML5 juga menghadirkan sebuah nilai baru untuk type atribute yaitu: type=”search”. Karena inkonsistensi pada beberapa browser, kita tidak akan menggunakan fitur ini.

Elemen HTML seperti img dan input tidak memuat konten, sehingga pseudo-element seperti :before tidak akan berfungsi. Oleh karena itu pada artikel ini kita akan mengganti input untuk submit menjadi button. Dengan cara ini, kita tetap dapat menggunakan fungsi Enter untuk pengiriman form.

Kode CSS

Untuk keperluan float-clearing.

.cf:before, .cf:after{
    content:"";
    display:table;
}

.cf:after{
    clear:both;
}

.cf{
    zoom:1;
}


Styling elemen pada form.

/* Form wrapper */
.form-wrapper {
    width: 450px;
    padding: 15px;
    margin: 150px auto 50px auto;
    background: #444;
    background: rgba(0,0,0,.2);
    border-radius: 10px;
    box-shadow: 0 1px 1px rgba(0,0,0,.4) inset, 0 1px 0 rgba(255,255,255,.2);
}

/* Form text input */

.form-wrapper input {
    width: 330px;
    height: 20px;
    padding: 10px 5px;
    float: left;
    font: bold 15px 'lucida sans', 'trebuchet MS', 'Tahoma';
    border: 0;
    background: #eee;
    border-radius: 3px 0 0 3px;
}

.form-wrapper input:focus {
    outline: 0;
    background: #fff;
    box-shadow: 0 0 2px rgba(0,0,0,.8) inset;
}

.form-wrapper input::-webkit-input-placeholder {
   color: #999;
   font-weight: normal;
   font-style: italic;
}

.form-wrapper input:-moz-placeholder {
    color: #999;
    font-weight: normal;
    font-style: italic;
}

.form-wrapper input:-ms-input-placeholder {
    color: #999;
    font-weight: normal;
    font-style: italic;
}    

/* Form submit button */
.form-wrapper button {
    overflow: visible;
    position: relative;
    float: right;
    border: 0;
    padding: 0;
    cursor: pointer;
    height: 40px;
    width: 110px;
    font: bold 15px/40px 'lucida sans', 'trebuchet MS', 'Tahoma';
    color: #fff;
    text-transform: uppercase;
    background: #d83c3c;
    border-radius: 0 3px 3px 0;
    text-shadow: 0 -1px 0 rgba(0, 0 ,0, .3);
}   

.form-wrapper button:hover{
    background: #e54040;
}   

.form-wrapper button:active,
.form-wrapper button:focus{
    background: #c42f2f;
    outline: 0;
}

.form-wrapper button:before { /* left arrow */
    content: '';
    position: absolute;
    border-width: 8px 8px 8px 0;
    border-style: solid solid solid none;
    border-color: transparent #d83c3c transparent;
    top: 12px;
    left: -6px;
}

.form-wrapper button:hover:before{
    border-right-color: #e54040;
}

.form-wrapper button:focus:before,
.form-wrapper button:active:before{
        border-right-color: #c42f2f;
}      

.form-wrapper button::-moz-focus-inner { /* menghilangkan kelebihan spacing pada button di Mozilla Firefox */
    border: 0;
    padding: 0;
}


Selesai. Selamat mencoba!

Sunber: http://speckyboy.com

]]>
http://rumahdot.com/web-programming/membuat-form-pencarian-yang-elegan-dengan-css3/feed/ 5
Animasi Tooltip dengan CSS3 http://rumahdot.com/web-programming/animasi-tooltip-dengan-css3/ http://rumahdot.com/web-programming/animasi-tooltip-dengan-css3/#comments Tue, 17 Jul 2012 04:07:41 +0000 Natha Fatima http://rumahdot.com/?p=24620 Kali ini kita akan membuat sebuah tooltip sederhana dengan animasi CSS3, tanpa menggunakan script jQuery. Animasi CSS3 ini hanya dapat dilihat di Firefox, Safari dan Chrome, namun Anda tetap dapat menjalankan efek tooltip ini di browser manapun. Mari kita mulai!

DEMO - DOWNLOAD

Kode HTML

Tooltip ini menggunakan markup yang sangat sederhana dan mudah dipelajari, kita hanya perlu memasukkan tag <small> ke dalam tag <a>, di elemen itulah tooltip kita akan muncul.


    <ul id="mainpanel">
    	<li><a class="dribble" href="#"><small>Dribble</small></a></li>
    	<li><a class="forrst" href="#"><small>Forrst</small></a></li>
    	<li><a class="facebook" href="#"><small>Facebook</small></a></li>
    	<li><a class="twitter" href="#"><small>Twitter</small></a></li>
    	<li><a class="google" href="#"><small>Google+</small></a></li>
    	<li><a class="linked" href="#"><small>LinkedIn</small></a></li>
    </ul>


Kode CSS

Memposisikan menu bar pada bagian bawah halaman.

body {
	background: #161616 url(pattern_40.gif) top left repeat;
	margin: 0;
	padding: 0;
	font: 12px normal Verdana, Arial, Helvetica, sans-serif;
	height: 100%;
}

#masterpanel {
	background-color:#161616;
	background: -moz-linear-gradient(top, rgba(22,22,22,.7) 0%, rgba(51,51,51,.7) 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,rgba(22,22,22,.7)), color-stop(100%,rgba(51,51,51,.7)));
        background: -webkit-linear-gradient(top, rgba(22,22,22,.7) 0%,rgba(51,51,51,.7) 100%);
        background: -o-linear-gradient(top, rgba(22,22,22,.7) 0%,rgba(51,51,51,.7) 100%);
        background: linear-gradient(top, rgba(22,22,22,.7) 0%,rgba(51,51,51,.7) 100%);
	filter:progid:DXImageTransform.Microsoft.gradient(startColorstr=#B2161616,endColorstr=#B2333333);
	-moz-box-shadow:0 1px 10px #00c6ff;
	-webkit-box-shadow: 0 1px 10px #00c6ff;
	box-shadow:0 1px 10px #00c6ff;
	position:fixed;
	bottom:0;
	left:0;
	z-index:999;
	width:100%;
}


Tambahkan styling untuk unordered list nya. Perlu dicatat bahwa ini hanya untuk sample, Anda bisa mengatur tampilan sesuai kebutuhan Anda nantinya.

#masterpanel ul {
	padding:0;
	margin:0;
	float:left;
	width:80%;
	margin:0 10%;
	list-style:none;
	font-size:1em;
}

#masterpanel ul li {
	padding:0;
	margin:0;
	float:left;
	position:relative;
	border-right:1px solid #555;
}

#masterpanel ul li:first-child { border-left:1px solid #555; }

#masterpanel ul li a {
	margin:5px;
	margin-left:20px;
	margin-right:20px;
	float:left;
	height:26px;
	width:26px;
	text-decoration:none;
	color:#333;
	position:relative;
}


Tambahkan icon untuk setiap link.

a.dribble { background:url(_0050_Dribbble.png) no-repeat; width:26px;}
a.forrst 	{ background:url(_0049_Forrst.png) no-repeat; }
a.facebook      { background:url(_0048_Facebook.png) no-repeat;}
a.twitter 	{ background:url(_0046_Twitter.png) no-repeat;}
a.google 	{ background:url(google.png) no-repeat;}
a.linked	{ background:url(_0018_Linkedin.png) no-repeat;}


Selanjutnya kita menambahkan styling untuk tooltip. Secara default tag <small> akan disembunyikan dengan display: none, ketika mouse berada di atas link (hover), tooltip ditampilkan dengan display: block; dan kemudian kita tambahkan efek animasi.

#masterpanel a small {
	background:#000;
	text-align:center;
	width:70px;
	padding:5px;
	border-left:1px solid #111; border-top:1px solid #111; border-right:1px solid #333; border-bottom:1px solid #333;
	border-radius:3px;
	display:none;
	color:#fff;
	font-size:0.8em;
	text-indent:0;
}

#masterpanel a:hover small {
	display:block;
	position:absolute;
	top:0px;
	left:50%;
	margin:-40px;
	z-index:9999;
	-moz-animation:mymove .25s linear;
	-webkit-animation:mymove .25s linear;
}


Animasi ini sangat sederhana, Anda hanya menggunakan properti transform:scale(x, y), dan bermain dengan nilainya untuk menciptakan efek bouncing.

@-moz-keyframes mymove {
	0%{ -moz-transform:scale(0,0); opacity:0;}
	50%{ -moz-transform:scale(1.2,1.2); opacity:0.3; }
	75%{ -moz-transform:scale(0.9,0.9); opacity:0.7;}
	100%{ -moz-transform:scale(1,1); opacity:1;}
}

@-webkit-keyframes mymove {
	0%{ -webkit-transform:scale(0,0); opacity:0;}
	50%{ -webkit-transform:scale(1.2,1.2); opacity:0.3;}
	75%{ -webkit-transform:scale(0.9,0.9); opacity:0.7;}
	100%{ -webkit-transform:scale(1,1); opacity:1;}
}


Selamat mencoba!

Sumber: http://www.alessioatzeni.com

]]>
http://rumahdot.com/web-programming/animasi-tooltip-dengan-css3/feed/ 1
5 Trik Menarik untuk Responsive Design http://rumahdot.com/web-programming/5-trik-menarik-untuk-responsive-design/ http://rumahdot.com/web-programming/5-trik-menarik-untuk-responsive-design/#comments Sun, 15 Jul 2012 06:53:54 +0000 Natha Fatima http://rumahdot.com/?p=24569 Membuat desain menjadi responsif sangatlah mudah, tetapi menjaga elemen agar terlihat seimbang pada semua layout merupakan seni tersendiri. Pada artikel ini saya akan berbagi 5 trik CSS yang umum digunakan beserta contoh kasus untuk koding desain responsif. Trik ini memerlukan properti-properti CSS yang sederhana seperti min-width, max-width, overflow, dan nilai relatif – tetapi properti ini memainkan peranan penting dalam desain responsif.

DEMO

Responsive Video

Trik CSS responsif untuk video ini pertama kali disampaikan oleh tjkdesign.com.

.video {
	position: relative;
	padding-bottom: 56.25%;
	height: 0;
	overflow: hidden;
}

.video iframe,
.video object,
.video embed {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}


Min & Max Width

Properti max-width memungkinkan Anda untuk mengatur lebar maksimal dari elemen. Tujuannya adalah untuk mencegah elemen melewati batas maksimal yang ditentukan.

Max-Width Container

Pada contoh di bawah ini, kita menentukan container untuk menampilkan lebar 800px jika memungkinkan, tapi tidak melebihi 90% dari lebar dari parent element-nya.

.container {
	width: 800px;
	max-width: 90%;
}


Responsive Image

Anda dapat membuat auto resize pada sebuah gambar dengan menentukan batas lebar maksimum dengan menggunakan max-width: 100% dan height: auto

img {
	max-width: 100%;
	height: auto;
}

 

CSS responsif untuk gambar di atas bekerja pada IE7 dan IE9, tetapi tidak pada IE8. Untuk memperbaikinya, tambahkan width: auto. Anda dapat menerapkan conditional comment untuk IE8 atau menggunakan hack di bawah ini:

@media \0screen {
  img {
  	width: auto; /* for ie 8 */
  }
}

 

Min-Width

Min-width merupakan kebalikan dari max-width. Property ini digunakan untuk menentukan lebar minimum dari suatu elemen. Dalam contoh di bawah, min-width digunakan pada input teks untuk mencegah lebar yang terlalu kecil pada layar sempit.

Relative Values

Dalam desain responsif, menggunakan nilai relatif dapat menyederhanakan CSS dan memaksimalkan hasil layout yang baik. Berikut beberapa contohnya:

Relative Margin

Di bawah ini adalah contoh dari daftar komentar yang menggunakan nilai relatif untuk margin setiap komentar.

Relative Font Size

Dengan nilai relatif (misalnya em atau%), ukuran font, line-height dan margin dapat digunakan untuk mempermudah pengaturan setiap child elemen. Sebagai contoh, kita bisa mengubah ukuran font pada semua child element dengan hanya mengubah font-size pada parent elemennya.

Relative Padding

Screenshot di bawah ini menunjukkan penggunaan padding dengan nilai relatif lebih baik dibandingkan dengan menggunakan ukuran pixel. Kotak di sebelah kiri menunjukkan padding yang tidak seimbang jika ukuran pixel digunakan. Sedangkan kotak denga padding bernilai relatif di sebelah kanan menunjukkan bahwa area konten dapat dimaksimalkan.

Trik Overflow:hidden

Anda dapat menghilangkan sifat float hanya dengan properti overflow: hidden.

Word-break

Anda bisa memotong teks yang terlalu panjang dalam baris lain dengan properti break-word.

.break-word {
		word-wrap: break-word;
}


Sumber: http://webdesignerwall.com

]]>
http://rumahdot.com/web-programming/5-trik-menarik-untuk-responsive-design/feed/ 4
HTML5 File Upload dengan Fungsi Drag & Drop http://rumahdot.com/web-programming/html5-file-upload-dengan-fungsi-drag-drop/ http://rumahdot.com/web-programming/html5-file-upload-dengan-fungsi-drag-drop/#comments Mon, 09 Jul 2012 07:48:19 +0000 Natha Fatima http://rumahdot.com/?p=24589 Pada artikel berikut ini kita akan membuat aplikasi web sederhana yang memungkinkan pengguna untuk meng-upload foto dari komputer dengan fungsi drag & drop ke dalam browser. Aplikasi ini menggunakan HTML5 API, sehingga penggunaannya masih terbatas pada browser-browser baru yang mendukung fitur tersebut. Dalam prosesnya, gambar-gambar yang diupload akan memiliki preview dan sebuah progress bar, dan semuanya dikendalikan pada client side.

DEMO - DOWNLOAD

Apa itu HTML5 Upload File?

Meng-upload file menggunakan HTML5 sebenarnya merupakan kombinasi dari tiga teknologi – File Reader API, Drag & Drop API, dan AJAX (dengan penambahan fungsi transfer data biner). Berikut ini adalah penjelasan tentang proses HTML5 upload:

  1. Pengguna melakukan drag & drop pada satu file atau lebih dari sistem menuju browser. Browser yang mendukung Drag & Drop API akan menghasilkan informasi berupa daftar file yang sedang diproses;
  2. Menggunakan File Reader API, browser akan membaca file dalam daftar sebagai data biner, dan menyimpannya dalam memori;
  3. Kemudian, kita akan menggunakan metode sendAsBinary dari XMLHttpRequest object, dan mengirim data file ke server.

Terlihat rumit? Ya, dan untungnya, ada plugin jQuery yang dapat melakukan ini. Salah satunya adalah Filedrop, yang selain memiliki fungsi tersebut juga menyediakan fitur untuk membatasi ukuran file maksimum dan menentukan callback function, yang sangat berguna untuk mengintegrasikannya ke dalam aplikasi web Anda.

Kode HTML

Markup untuk aplikasi ini sangatlah sederhana. Kita hanya perlu menyiapkan satu elemen untuk menampung proses upload file nantinya.

<div id="dropbox">
	<span class="message">Drop images here to upload. <br />
<em>(they will only be visible to you)</em></span>
</div>

Potongan ini berisi preview dari gambar (atribut sumber akan diisi dengan DataURL gambar) dan sebuah progress bar. Preview seluruh dapat memiliki “selesai”. Kelas, yang menyebabkan “upload.” Span untuk muncul (tersembunyi secara default). Rentang ini memiliki tanda centang hijau sebagai latar belakang, dan menunjukkan proses upload selesai.Bagus, mari kita lanjutkan ke file script.js kami!

Div #Dropbox merupakan satu-satunya elemen yang akan berinteraksi dengan plugin Filedrop. Plugin tersebut akan  mendeteksi bila terdapat file yang berinteraksi di dalam elemen tersebut. Elemen span akan diperbarui jika ada kondisi terdapat kesalahan (misalnya jika browser Anda tidak mendukung salah satu API HTML5).

Kemudian, ketika kita men-drop file ke dalamnya, kode jQuery kita akan menampilkan preview dengan menambahkan markup berikut ke halaman secara dinamis:

<div class="preview done">
	<span class="imageHolder">
		<img alt="" />
		<span class="uploaded"> </span>
	</span>
	<div class="progressHolder">

	</div>
</div>

Markup di atas memuat preview dari gambar (atribut “src” akan diisi dengan DataURL dari file) dan sebuah progress bar. Ketika berhasil diupload, sebuah class bernama “.done” akan ditambahkan, dan memunculkan span dengan class “.uploaded” berupa tanda centang hijau sebagai background-nya, untuk menunjukkan bahwa proses upload telah selesai.

Kode jQuery

Karena semua fungsi transfer file akan ditangani oleh plugin Filedrop, kita hanya perlu memanggil beberapa callback. Langkah pertama adalah untuk menulis sebuah fungsi pembantu yang mengambil file object (dihasilkan oleh browser untuk setiap drop file, dan memiliki property seperti nama file, path dan ukurannya).

var template = '<div class="preview">'+
			'<span class="imageHolder">'+
			'<img alt="" />'+
			'<span class="uploaded"> </span>'+
			'</span>'+
			'<div class="progressHolder">'+
			''+
			'</div>'+
		        '</div>'; 

	function createImage(file){

		var preview = $(template),
			image = $('img', preview);

		var reader = new FileReader();

		image.width = 100;
		image.height = 100;

		reader.onload = function(e){

			// e.target.result menampung DataURL
			// yang dapat digunakan sebagai image source:

			image.attr('src',e.target.result);
		};

		// Membaca file sebagai DataURL. Setelah selesai,
		// fungsi onload di atas akan dipanggil:
		reader.readAsDataURL(file);

		message.hide();
		preview.appendTo(dropbox);

		// Menyusun preview pada container
		// dengan menggunakan jQuery $.data():

		$.data(file,preview);
	}

Variabel template memuat markup HTML5 untuk preview. Kita mengambil DataURL gambar dan menggunakannya sebagai value dari atribut src pada preview. Kemudian kita tinggal memanggil plugin filedrop:

$(function(){

	var dropbox = $('#dropbox'),
		message = $('.message', dropbox);

	dropbox.filedrop({
		// nama dari $_FILES:
		paramname:'pic',

		maxfiles: 5,
    	maxfilesize: 2,
		url: 'post_file.php',

		uploadFinished:function(i,file,response){
			$.data(file).addClass('done');
			// respon yang dihasilkan post_file.php berupa JSON object
		},

    	error: function(err, file) {
			switch(err) {
				case 'BrowserNotSupported':
					showMessage('Browser Anda tidak mendukung fitur HTML5 upload!');
					break;
				case 'TooManyFiles':
					alert('Jumlah file melampaui batas maksimal.');
					break;
				case 'FileTooLarge':
					alert('Ukuran file '+file.name+' terlalu besar.');
					break;
				default:
					break;
			}
		},

		// Fungsi yang akan dipanggil sebelum proses upload
		beforeEach: function(file){
			if(!file.type.match(/^image\//)){
				alert('Only images are allowed!');
				return false;
			}
		},

		uploadStarted:function(i, file, len){
			createImage(file);
		},

		progressUpdated: function(i, file, progress) {
			$.data(file).find('.progress').width(progress);
		}

	});

	// ... kode javascript sebelumnya di sini

	function showMessage(msg){
		message.html(msg);
	}

});

Dengan ini, setiap file gambar yang valid akan diupload melalui post_file.php, yang dapat Anda lihat di bagian berikutnya.

Kode PHP

Di dalam kode PHP, tidak ada perbedaan dengan proses upload pada umumnya.

<!--?php

// Jika Anda ingin mengabaikan file yang terupload,
// atur value $demo_mode menjadi true;

$demo_mode = false;
$upload_dir = 'uploads/';
$allowed_ext = array('jpg','jpeg','png','gif');

if(strtolower($_SERVER['REQUEST_METHOD']) != 'post'){
	exit_status('Error HTTP method!');
}

if(array_key_exists('pic',$_FILES) && $_FILES['pic']['error'] == 0 ){

	$pic = $_FILES['pic'];

	if(!in_array(get_extension($pic['name']),$allowed_ext)){
		exit_status('Hanya ekstensi berikut yang diijinkan: '.implode(',',$allowed_ext));
	}	

	if($demo_mode){

		// Dalam mode demo, kita hanya akan mencatat log-nya.

		$line = implode('		', array( date('r'), $_SERVER['REMOTE_ADDR'], $pic['size'], $pic['name']));
		file_put_contents('log.txt', $line.PHP_EOL, FILE_APPEND);

		exit_status('Anda sedang melihat mode demo.');
	}

	// Pindahkan file terupload ke
	// direktori yang telah ditentukan:

	if(move_uploaded_file($pic['tmp_name'], $upload_dir.$pic['name'])){
		exit_status('File sukses diupload');
	}

}

exit_status('Terjadi kesalah. Silakan mencoba kembali.');

// Helper functions

function exit_status($str){
	echo json_encode(array('status'=-->$str));
	exit;
}

function get_extension($file_name){
	$ext = explode('.', $file_name);
	$ext = array_pop($ext);
	return strtolower($ext);
}
?>

Script di atas akan menjalankan pengecekan pada metode HTTP yang digunakan untuk validitas ekstensi file. Jika mode demo diaktifkan, maka file yang terupload akan dihapus secara otomatis.

Stylesheet

/*-------------------------
	Dropbox Element
--------------------------*/

#dropbox{
	background:url('../img/background_tile_3.jpg');

	border-radius:3px;
	position: relative;
	margin:80px auto 90px;
	min-height: 290px;
	overflow: hidden;
	padding-bottom: 40px;
    width: 990px;

	box-shadow:0 0 4px rgba(0,0,0,0.3) inset,0 -3px 2px rgba(0,0,0,0.1);
}

#dropbox .message{
	font-size: 11px;
    text-align: center;
    padding-top:160px;
    display: block;
}

#dropbox .message i{
	color:#ccc;
	font-size:10px;
}

#dropbox:before{
	border-radius:3px 3px 0 0;
}

/*-------------------------
	Image Previews
--------------------------*/

#dropbox .preview{
	width:245px;
	height: 215px;
	float:left;
	margin: 55px 0 0 60px;
	position: relative;
	text-align: center;
}

#dropbox .preview img{
	max-width: 240px;
	max-height:180px;
	border:3px solid #fff;
	display: block;

	box-shadow:0 0 2px #000;
}

#dropbox .imageHolder{
	display: inline-block;
	position:relative;
}

#dropbox .uploaded{
	position: absolute;
	top:0;
	left:0;
	height:100%;
	width:100%;
	background: url('../img/done.png') no-repeat center center rgba(255,255,255,0.5);
	display: none;
}

#dropbox .preview.done .uploaded{
	display: block;
}

/*-------------------------
	Progress Bars
--------------------------*/

#dropbox .progressHolder{
	position: absolute;
	background-color:#252f38;
	height:12px;
	width:100%;
	left:0;
	bottom: 0;

	box-shadow:0 0 2px #000;
}

#dropbox .progress{
	background-color:#2586d0;
	position: absolute;
	height:100%;
	left:0;
	width:0;

	box-shadow: 0 0 1px rgba(255, 255, 255, 0.4) inset;

	-moz-transition:0.25s;
	-webkit-transition:0.25s;
	-o-transition:0.25s;
	transition:0.25s;
}

#dropbox .preview.done .progress{
	width:100% !important;
}

Div .progress memiliki absolute position yang akan menghasilkan indikator progress secara lebih rapi. Anda bisa menggunakan efek transisi CSS untuk menambahkan animasi. Selamat mencoba!

Sumber: http://tutorialzine.com

]]>
http://rumahdot.com/web-programming/html5-file-upload-dengan-fungsi-drag-drop/feed/ 4
Trik CSS Lainnya yang Mungkin Belum Anda Tahu http://rumahdot.com/web-programming/trik-css-lainnya-yang-mungkin-belum-anda-tahu/ http://rumahdot.com/web-programming/trik-css-lainnya-yang-mungkin-belum-anda-tahu/#comments Fri, 06 Jul 2012 04:03:37 +0000 Heri Setiawan http://rumahdot.com/?p=24581 Trik-trik berikut ini mungkin jarang digunakan, tetapi tak ada salahnya untuk mencobanya:

Menandai sebuah link kosong.

a[href = ""] {
  background: red;
  color: white;
  font-size: x-large;
}


Lihat sample: http://jsfiddle.net/2LuuK/

Menambahkan style berbeda untuk link relatif dan absolut.

a[href ^= "http"] {
    display: inline-block;
    color: green;
    -webkit-transform: rotate(180deg);
}​


Lihat sample: http://jsfiddle.net/j9hV2/

Anda bisa juga menambahkan styling untuk link yang mengarah ke luar dengan selector :not().

a[href ^= 'http']:not([href *= 'rumahdot.']) {
  background: transparent url(arrow.png) no-repeat center right;
  padding-right: 16px;
}


Lihat sample: http://jsfiddle.net/pSDVq/

Tahukah Anda bahwa elemen head dan semua elemen di dalamnya bisa ditampilkan?

head {
  display: block;
  border-bottom: 5px solid red;
}
script, style, link {
  display: block;
  white-space: pre;
  font-family: monospace;
}

Anda bisa juga menyisipkan konten dengan fungsi attr pada CSS

style:before {
  content: "<style type=\"" attr(type) "\">";
}
style:after {
  content: "< /style>";
}

link:before {
  content: "<link rel=\"" attr(rel) "\" type=\"" attr(type) "\" href=\"" attr(href) "\" />";
}

Lihat sample: http://jsfiddle.net/FsTEq/

 

Sumber: html5rocks.com

]]>
http://rumahdot.com/web-programming/trik-css-lainnya-yang-mungkin-belum-anda-tahu/feed/ 2
Saling Berbagi Pengalaman di Kumpul Developer suWec http://rumahdot.com/web-programming/saling-berbagi-pengalaman-di-kumpul-developer-suwec/ http://rumahdot.com/web-programming/saling-berbagi-pengalaman-di-kumpul-developer-suwec/#comments Wed, 04 Jul 2012 12:27:07 +0000 imam http://rumahdot.com/?p=24579 Kumpul Developer Surabaya Web Community (suWec) pertengahan Juni lalu, menjadi ajang diskusi yang hangat. Sejumlah developer hadir di kopdar itu. Ada yang masih berstatus mahasiswa, ada yang merupakan developer berpengalaman.

Setelah semua memperkenalkan diri, Zainal Zaqi membuka diskusi tentang mendevelop web menggunakan framework. Tentang keunggulan dan kekurangannya. Dan tips-tips untuk mempelajarinya.

Diskusi kemudian mengarah ke bahasan skuriti dan jaringan. Firman banyak sharing pengalamannya tentang bahasan tersebut.

Berlanjut ke bahasan selanjutnya, Dody berbagi pengalaman dan ilmu tentang mendevelop aplikasi mobile, terutama untuk android dan iOS. Dan terakhir, Junaidi bercerita seputar pengalamannya dalam mendapatkan project dan mengelola tim development.

]]>
http://rumahdot.com/web-programming/saling-berbagi-pengalaman-di-kumpul-developer-suwec/feed/ 1
Teknik Masonry dengan CSS3 http://rumahdot.com/web-programming/teknik-masonry-dengan-css3/ http://rumahdot.com/web-programming/teknik-masonry-dengan-css3/#comments Wed, 06 Jun 2012 09:28:42 +0000 Natha Fatima http://rumahdot.com/?p=24559 Bagi mereka yang belum mengenal jQuery Masonry, pada dasarnya plugin ini membantu untuk membuat floating elemen secara vertikal. Apakah CSS tidak bisa melakukannya? Sederhana saja: tidak ada model CSS untuk pengaturan layout secara vertikal. Anda boleh mencoba teknik floating, positioning, inline display, tapi percayalah Anda akan sulit menemukan solusi untuk masalah ini.

Hingga kemudian muncul satu ide di kepala: CSS Columns! Solusinya sangat sederhana, karena memang metode ini dibuat untuk mendapatkan tampilan seperti surat kabar, melalui CSS. Anda akan mendapatkan tampilan yang sama jika menggunakan jQuery Masonry. Pemakaiannya juga sangat mudah, lihat kode berikut:

Siapkan container dan konten di dalamnya:

<div>
<a href="#">Masukkan apapun di sini, teks, gambar, video, apapun.</a>
...dan sebagai-nya dan seterusnya.
</div>


Kemudian gunakan senjata ampuhnya pada CSS:

div{
-moz-column-count: 3;
-moz-column-gap: 10px;
-webkit-column-count: 3;
-webkit-column-gap: 10px;
column-count: 3;
column-gap: 10px;
width: 480px;
}


div a{
display: inline-block; /* Display inline-block, tidak perlu floating sama sekali! */
margin-bottom: 20px;
width: 100%; }


Fakta menariknya adalah: lebar dari elemen-elemen dalam setiap kolom tidak relatif terhadap lebar parent element-nya, melainkan lebar kolom itu sendiri. Dalam kasus contoh di atas width: 100% akan diterjemahkan menjadi 150px, bukan 480px (lebar parent).

Fallback dan Kompatibilitas Browser

Tentu saja, teman-teman kita di Microsoft telah ‘berbaik hati’ untuk tidak mendukung fitur CSS Columns ini *capede*. Bahkan hingga versi IE9! Dalam hal ini, saya sarankan untuk mencoba plugin jQuery Masonry dengan conditional comment:

<!--[if lte IE 9]>
< script type="text/javascript" src="js/jquery.masonry.min.js">< /script>
<![endif]-->


Tanpa perlu dibahas lagi, teknik ini bekerja (dengan sangat baik) di browser Gecko dan WebKit (Mozilla, Chrome, Safari) . Sedikit keanehan terjadi pada browser Opera. Kolom dapat disusun dengan baik, tapi biasanya muncul bug pada gap setiap kolomnya.

Lihat demonya: CSS3 Masonry

Sumber: http://sickdesigner.com

]]>
http://rumahdot.com/web-programming/teknik-masonry-dengan-css3/feed/ 0
Menggunakan Clip Property pada CSS http://rumahdot.com/web-programming/menggunakan-clip-property-pada-css/ http://rumahdot.com/web-programming/menggunakan-clip-property-pada-css/#comments Sun, 03 Jun 2012 06:25:48 +0000 Natha Fatima http://rumahdot.com/?p=24552 Anda mungkin pernah mendengar tentang properti clip pada CSS. Property ini memiliki beberapa fitur unik, dan pada artikel ini saya akan menjelaskan bagaimana menggunakan property ini. Pada bagian akhir artikel, Anda bisa menemukan link menuju ke halaman demo di mana terdapat beberapa foto yang digunakan untuk membuat animasi dari properti ini.

Sintaks

Untuk menggunakannya, Anda bisa menulis kode seperti di bawah ini:

.selector{
    position: absolute;
    clip: rect(110px, 160px, 170px, 60px);
}

Hal pertama yang perlu diketahui tentang clip adalah properti ini hanya dapat diterapkan pada elemen dengan position: absolute. Syarat tersebut mungkin menjadi kelemahan dari properti ini, tetapi terlepas dari hal itu, properti ini tetap menarik untuk dijadikan eksperimen.

Bagian selanjutnya pada sintaks di atas adalah properti clip itu sendiri. Nilainya berupa jenis shape yang telah ditentukan, atau “auto”. Nilai “auto” merupakan default untuk semua elemen. Jika anda mendefinisikan suatu jenis shape (saat ini hanya persegi panjang/rect yang diizinkan), Anda bisa melakukannya dengan menambahkan fungsi “rect ()”, dengan mengisi nilai yang mendefinisikan bentuk tersebut, dapat berupa nilai positif atau negatif dengan urutan top, right, bottom, left.

Nilai fungsi rect()

Nilai yang dimasukkan pada fungsi rect () mungkin membingungkan pada awalnya. Pada dasarnya nilai-nilai tersebut mewakili offset atas, kanan, bawah, dan kiri, seperti aturan pada margin dan padding. Dengan kata lain, dalam contoh di atas, nilai pertama menempatkan garis imajiner secara horizontal 110px dari atas (nilai pertama) dan 170px secara horizontal dari atas (nilai ketiga). Nilai kedua menempatkan sebuah garis imajiner 160px vertikal dari kiri, dan nilai terakhir menempatkan garis imajiner 60px vertikal dari kiri. Jika masih membingungkan Anda, mungkin gambar ini akan membantu:

 

Gambar di atas menggunakan semacam guide pada Photoshop untuk menunjukkan Anda di mana nilai-nilai masing-masing akan menempatkan garis imajiner secara berpotongan. Daerah yang lebih terang pada gambar adalah bagian yang akan terlihat. Sisanya akan disembunyikan. Perlu dicatat bahwa IE6 dan IE7 menfukung properti ini, tetapi bukan menggunakan koma sebagai pemisah antar nilai clipping, melainkan spasi.

 

Animasi Galeri Menggunakan Clip

Properti klip termasuk dalam daftar properti W3C yang bisa di-animasi-kan, seperti pada contoh berikut agar Anda bisa melihat bagaimana properti clip ini bekerja pada animasi menggunakan CSS3 transition: Lihat demo.

Sumber: http://www.impressivewebs.com

]]>
http://rumahdot.com/web-programming/menggunakan-clip-property-pada-css/feed/ 1
Teknik Image Replacement pada CSS yang Perlu Anda Ketahui http://rumahdot.com/web-programming/teknik-image-replacement-pada-css-yang-perlu-anda-ketahui/ http://rumahdot.com/web-programming/teknik-image-replacement-pada-css-yang-perlu-anda-ketahui/#comments Thu, 31 May 2012 04:02:15 +0000 Natha Fatima http://rumahdot.com/?p=24528 Adalah Todd Fahrner yang mengenalkan teknik ini pertama kali sekitar tahun 1999. Kemudian dikembangkan juga oleh C.Z Robertson seperti yang dijelaskan pada blog-nya. Teknik ini kemudian dipopulerkan oleh Douglas Bowman dan mungkin masih digunakan hingga sekarang, yang dikenal sebagai metode Fahrner Image Replacement.

Konsep waktu itu adalah bagaimana untuk menampilkan konten website menggunakan font selain Verdana dan Georgia. Metode yang digunakan adalah dengan memasukkan teks berupa gambar, untuk kemudian menggunakan gambar teks tersebut sebagai background.

Cara yang waktu itu digunakan kurang lebih seperti ini, pada HTML kita menggunakan kode:

<div>
  <span>Hello world!</span>
</div>

Kemudian, elemen div tersebut diatur agar menggunakan background dari gambar, seperti:

div {
  background-image:url("hello_world.gif");
  background-repeat:no-repeat;
  height:35px;
}

Negative Text Indent

Teknik di atas kemudian dikembangkan dan kemudian dikenal sebagai metode Phark yang pasti sering Anda gunakan, coba lihat kode di bawah ini untuk lebih jelasnya:

.selector{
    overflow: hidden;
    text-indent: -9999px;
}

Metode ini kadang disebut sebagai teknik Negative Text Indent. Tentu saja, meskipun populer teknik tersebut memiliki kelemahan. Hal yang paling mencolok adalah tentang bagaimana teknik ini sebenarnya bekerja pada browser. Setiap menggunakan metode tersebut, browser akan tetap membuat sebuah box selebar 9999px di luar layar monitor.

Positive Text Indent

Karena kelemahan itulah, muncul satu ide baru dari Scott Kellum, yang biasa dikenal sebagai metode Positive Text Indent. Konsepnya adalah dengan menggunakan text-indent selebar 100% sehingga teks akan tampil melebar melebihi lebar normalnya. Untuk menyembunyikan kelebihan tampilan tersebut ditambahkan property overflow. Lihat kode berikut:

.selector{
   text-indent: 100%;
   white-space: nowrap;
   overflow: hidden;
}

H5BP Image Replacement

Teknik image replacement lainnya yang kini digunakan pada proyek HTML5 Boilerplate kadang disebut juga dengan teknik Font Crushing. Rules yang digunakan adalah sebagai berikut:

.ir {
    font: 0/0 a;
    text-shadow: none;
    color: transparent;
}

Keunggulan dan kelemahan dari metode Font crushing ini secara lengkap dapat Anda simak pada link berikut: Another CSS Image Replacement Technique.

Untuk melihat bagaimana ketiga teknik di atas bekerja, silakan cek pada: http://jsfiddle.net/sBDRB/

]]>
http://rumahdot.com/web-programming/teknik-image-replacement-pada-css-yang-perlu-anda-ketahui/feed/ 0