Buat Halaman Demo menggunakan DATA URI

Ok setelah kemarin aku udah membahas apa itu DATA URI sekarang mari kita coba memanfaatkan kecanggihan DATA URI ini Untuk membuat Halaman Demo Tanpa bantuan blog lain ataupun Tools online.

1. Masuk ke data: URI Generator
2. Pilih Provide text
3. Masukan Kode Ini didalamnya

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("#x").click(function(){
$("body").css("background-color","#700");
});
});
</script>
<style>
#pesan {
background: #000;
padding: 10px;
width: 500px;
margin: 10px auto;
color: #999;
font: normal 12px/20px Arial,sans-serif;
text-align: center;
border: 5px solid #888
}
</style>
<div id='pesan'>
<div>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</div>
<button id='x'>KLIK BUTTON INI</button>
</div>

4. Klik Generate DATA URI
5. Ambil kode Hasil Generate nya, kodenya seperti dibawah ini.

data:text/plain;charset=utf-8;base64,PHNjcmlwdCBzcmM9Imh0dHA6Ly9hamF4Lmdvb2dsZWFwaXMuY29tL2FqYXgvbGlicy9qcXVlcnkvMS43LjEvanF1ZXJ5Lm1pbi5qcyIgdHlwZT0idGV4dC9qYXZhc2NyaXB0Ij48L3NjcmlwdD4NCjxzY3JpcHQgdHlwZT0idGV4dC9qYXZhc2NyaXB0Ij4NCiQoZnVuY3Rpb24oKXsNCiQoIiN4IikuY2xpY2soZnVuY3Rpb24oKXsNCiQoImJvZHkiKS5jc3MoImJhY2tncm91bmQtY29sb3IiLCIjNzAwIik7DQp9KTsNCn0pOw0KPC9zY3JpcHQ+DQo8c3R5bGU+DQojcGVzYW4gew0KYmFja2dyb3VuZDogIzAwMDsNCnBhZGRpbmc6IDEwcHg7DQp3aWR0aDogNTAwcHg7DQptYXJnaW46IDEwcHggYXV0bzsNCmNvbG9yOiAjOTk5Ow0KZm9udDogbm9ybWFsIDEycHgvMjBweCBBcmlhbCxzYW5zLXNlcmlmOw0KdGV4dC1hbGlnbjogY2VudGVyOw0KYm9yZGVyOiA1cHggc29saWQgIzg4OA0KfQ0KPC9zdHlsZT4NCjxkaXYgaWQ9J3Blc2FuJz4NCjxkaXY+TG9yZW0gSXBzdW0gaXMgc2ltcGx5IGR1bW15IHRleHQgb2YgdGhlIHByaW50aW5nIGFuZCB0eXBlc2V0dGluZyBpbmR1c3RyeS4gTG9yZW0gSXBzdW0gaGFzIGJlZW4gdGhlIGluZHVzdHJ5J3Mgc3RhbmRhcmQgZHVtbXkgdGV4dCBldmVyIHNpbmNlIHRoZSAxNTAwcywgd2hlbiBhbiB1bmtub3duIHByaW50ZXIgdG9vayBhIGdhbGxleSBvZiB0eXBlIGFuZCBzY3JhbWJsZWQgaXQgdG8gbWFrZSBhIHR5cGUgc3BlY2ltZW4gYm9vay4gSXQgaGFzIHN1cnZpdmVkIG5vdCBvbmx5IGZpdmUgY2VudHVyaWVzLCBidXQgYWxzbyB0aGUgbGVhcCBpbnRvIGVsZWN0cm9uaWMgdHlwZXNldHRpbmcsIHJlbWFpbmluZyBlc3NlbnRpYWxseSB1bmNoYW5nZWQuIEl0IHdhcyBwb3B1bGFyaXNlZCBpbiB0aGUgMTk2MHMgd2l0aCB0aGUgcmVsZWFzZSBvZiBMZXRyYXNldCBzaGVldHMgY29udGFpbmluZyBMb3JlbSBJcHN1bSBwYXNzYWdlcywgYW5kIG1vcmUgcmVjZW50bHkgd2l0aCBkZXNrdG9wIHB1Ymxpc2hpbmcgc29mdHdhcmUgbGlrZSBBbGR1cyBQYWdlTWFrZXIgaW5jbHVkaW5nIHZlcnNpb25zIG9mIExvcmVtIElwc3VtLjwvZGl2Pg0KPGJ1dHRvbiBpZD0neCc+S0xJSyBCVVRUT04gSU5JPC9idXR0b24+DQo8L2Rpdj4=

6. Ganti kata plain dengan html Lalu copy kodenya dan paste dibrowser anda lalu ENTER, dan lihat kodenya bekerja dengan sempurna, jadi kita gak perlu menggunakan Tools ataupun blog demo. Cara ini bisa anda terapkan jika kode atau tulisan yang anda gunakan tidak terlalu banyak, karena kekurangan kode ini adalah saat kode di generate menjadi base64 maka tulisannya akan menjadi banyak sekali tergantung size/ukuran dari file tersebut.

data:text/plain adalah MIME-type silahkan Lihat pada postingan sebelumnya Disini mengenai MIME-type.

Pasti anda bertanya bagaimana menggunakannya sebagai halaman demo, cukup mudah isi href link anda dengan hasil generate base64 tadi, contoh seperti ini.

<a href="data:text/html;charset=utf-8;base64,PHNjcmlwdCBzcmM9Imh0dHA6Ly9hamF4Lmdvb2dsZWFwaXMuY29tL2FqYXgvbGlicy9qcXVlcnkvMS43LjEvanF1ZXJ5Lm1pbi5qcyIgdHlwZT0idGV4dC9qYXZhc2NyaXB0Ij48L3NjcmlwdD4NCjxzY3JpcHQgdHlwZT0idGV4dC9qYXZhc2NyaXB0Ij4NCiQoZnVuY3Rpb24oKXsNCiQoIiN4IikuY2xpY2soZnVuY3Rpb24oKXsNCiQoImJvZHkiKS5jc3MoImJhY2tncm91bmQtY29sb3IiLCIjNzAwIik7DQp9KTsNCn0pOw0KPC9zY3JpcHQ+DQo8c3R5bGU+DQojcGVzYW4gew0KYmFja2dyb3VuZDogIzAwMDsNCnBhZGRpbmc6IDEwcHg7DQp3aWR0aDogNTAwcHg7DQptYXJnaW46IDEwcHggYXV0bzsNCmNvbG9yOiAjOTk5Ow0KZm9udDogbm9ybWFsIDEycHgvMjBweCBBcmlhbCxzYW5zLXNlcmlmOw0KdGV4dC1hbGlnbjogY2VudGVyOw0KYm9yZGVyOiA1cHggc29saWQgIzg4OA0KfQ0KPC9zdHlsZT4NCjxkaXYgaWQ9J3Blc2FuJz4NCjxkaXY+TG9yZW0gSXBzdW0gaXMgc2ltcGx5IGR1bW15IHRleHQgb2YgdGhlIHByaW50aW5nIGFuZCB0eXBlc2V0dGluZyBpbmR1c3RyeS4gTG9yZW0gSXBzdW0gaGFzIGJlZW4gdGhlIGluZHVzdHJ5J3Mgc3RhbmRhcmQgZHVtbXkgdGV4dCBldmVyIHNpbmNlIHRoZSAxNTAwcywgd2hlbiBhbiB1bmtub3duIHByaW50ZXIgdG9vayBhIGdhbGxleSBvZiB0eXBlIGFuZCBzY3JhbWJsZWQgaXQgdG8gbWFrZSBhIHR5cGUgc3BlY2ltZW4gYm9vay4gSXQgaGFzIHN1cnZpdmVkIG5vdCBvbmx5IGZpdmUgY2VudHVyaWVzLCBidXQgYWxzbyB0aGUgbGVhcCBpbnRvIGVsZWN0cm9uaWMgdHlwZXNldHRpbmcsIHJlbWFpbmluZyBlc3NlbnRpYWxseSB1bmNoYW5nZWQuIEl0IHdhcyBwb3B1bGFyaXNlZCBpbiB0aGUgMTk2MHMgd2l0aCB0aGUgcmVsZWFzZSBvZiBMZXRyYXNldCBzaGVldHMgY29udGFpbmluZyBMb3JlbSBJcHN1bSBwYXNzYWdlcywgYW5kIG1vcmUgcmVjZW50bHkgd2l0aCBkZXNrdG9wIHB1Ymxpc2hpbmcgc29mdHdhcmUgbGlrZSBBbGR1cyBQYWdlTWFrZXIgaW5jbHVkaW5nIHZlcnNpb25zIG9mIExvcmVtIElwc3VtLjwvZGl2Pg0KPGJ1dHRvbiBpZD0neCc+S0xJSyBCVVRUT04gSU5JPC9idXR0b24+DQo8L2Rpdj4=">DEMO</a>

Nah sekarang aku jelasin, kenapa plain tadi kita rubah menjadi html karena datanya berupa kode html jika isinya hanya berupa teks maka kodenya menggunakan plain ( Terkait ).

Kesimpulan, Jika anda ingin membuat demo dari sebuah kode atau apapun itu dan tidak ingin menggunakan Tools online atau blog demo mungkin cara ini bisa anda manfaatkan.