<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0"
	xmlns:content="http://purl.org/rss/1.0/modules/content/"
	xmlns:wfw="http://wellformedweb.org/CommentAPI/"
	xmlns:dc="http://purl.org/dc/elements/1.1/"
	xmlns:atom="http://www.w3.org/2005/Atom"
	xmlns:sy="http://purl.org/rss/1.0/modules/syndication/"
	xmlns:slash="http://purl.org/rss/1.0/modules/slash/"
	>

<channel>
	<title>maseko's weblog &#187; Web Design</title>
	<atom:link href="http://maseko.com/category/web-design/feed/" rel="self" type="application/rss+xml" />
	<link>http://maseko.com</link>
	<description>Blog pribadi Eko Pramuyanto a.k.a. maseko berisi catatan, tips dan trik, hasil percobaan, dan info lainnya seputar teknologi informasi, khususnya komputer dan internet.</description>
	<lastBuildDate>Fri, 09 Jul 2010 04:53:42 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.3.2</generator>
		<item>
		<title>Adobe Browserlab</title>
		<link>http://maseko.com/2009/06/06/adobe-browserlab/</link>
		<comments>http://maseko.com/2009/06/06/adobe-browserlab/#comments</comments>
		<pubDate>Sat, 06 Jun 2009 14:44:05 +0000</pubDate>
		<dc:creator>maseko</dc:creator>
				<category><![CDATA[Firefox]]></category>
		<category><![CDATA[Internet]]></category>
		<category><![CDATA[Web Application]]></category>
		<category><![CDATA[Web Design]]></category>

		<guid isPermaLink="false">http://maseko.com/2009/06/06/adobe-browserlab/</guid>
		<description><![CDATA[Salah satu hal yang perlu diperhatikan dalam mendesign website atau blog adalah sedapat mungkin membuat tampilannya sesuai dengan yang diinginkan dalam berbagai browser yang mungkin akan digunakan oleh pengakses. Dalam pembuatan design website atau blog, sedapat mungkin mencoba sendiri membuka tampilannya dalam beberapa browser. Jalan lain yang dapat diambil untuk mencoba melihat tampilan website dalam [...]]]></description>
			<content:encoded><![CDATA[<p><img style="border-bottom: 0px; border-left: 0px; margin: 0px 10px 0px 0px; display: inline; border-top: 0px; border-right: 0px" title="adobe-browserlab" border="0" alt="adobe-browserlab" align="left" src="http://maseko.com/wp-content/uploads/2009/06/adobebrowserlab.jpg" width="260" height="67" /> Salah satu hal yang perlu diperhatikan dalam mendesign website atau blog adalah sedapat mungkin membuat tampilannya sesuai dengan yang diinginkan dalam berbagai browser yang mungkin akan digunakan oleh pengakses. Dalam pembuatan design website atau blog, sedapat mungkin mencoba sendiri membuka tampilannya dalam beberapa browser. Jalan lain yang dapat diambil untuk mencoba melihat tampilan website dalam berbagai browser adalah menggunakan layanan seperti <a title="Browsershots" href="http://maseko.com/2007/03/15/browsershots-screenshot-halaman-web-dari-berbagai-browser/">Browsershots</a> yang pernah saya tuliskan dua tahun lalu. Saat ini layanan sejenis juga disediakan oleh Adobe yang bernama <strong>Adobe Browserlab</strong>.</p>
<p><span id="more-2084"></span></p>
<p>Untuk menggunakan layanan Adobe Browserlab ini, Anda terlebih dahulu login dengan Adobe Account. Setelahnya Anda dapat langsung memasukkan alamat web yang akan dilihat. Di sini dapat dipilih untuk melihat satu tampilan per halaman, dua tampilan per halaman, dan juga tampilan gabungan dua tampilan yang dipilih (Onion Skin view) yang dapat diatur persentase penggabungannya.</p>
<p><img style="border-bottom: 0px; border-left: 0px; margin: 0px; display: inline; border-top: 0px; border-right: 0px" title="adobe-browserlab-works" border="0" alt="adobe-browserlab-works" src="http://maseko.com/wp-content/uploads/2009/06/adobebrowserlabworks.jpg" width="520" height="316" /> </p>
<p>Dibandingkan dengan Browsershots, jenis browser yang didukung oleh Adobe Browserlab jauh lebih sedikit, yang saat ini baru menyediakan pilihan Firefox 2.0 dan 3.0 pada Windows XP, Firefox 2.0 dan 3.0 pada OSX, Internet Explorer 6 dan 7 pada Windows XP, dan Safari 3.0 pada OSX. Ya, belum ada Opera dan belum ada hasil borowser yang berjalan pada sistem operasi berbasis Linux di sini.</p>
<p>Dalam memproses tampilan, Adobe Browserlab dilakukan secara langsung dan harus ditunggu sampai dengan proses selesai. Sayangnya, beberapa kali mencoba ada saatnya proses berhenti dengan menyuguhkan pesan error terkait jaringan, dan proses harus diulang kembali.</p>
<p>&#8211; <a title="Adobe Browserlab" href="http://browserlab.adobe.com/">Adobe Browserlab</a></p>
]]></content:encoded>
			<wfw:commentRss>http://maseko.com/2009/06/06/adobe-browserlab/feed/</wfw:commentRss>
		<slash:comments>18</slash:comments>
		</item>
		<item>
		<title>Mengenal Profil Browser Pengunjung</title>
		<link>http://maseko.com/2009/01/18/mengenal-profil-browser-pengunjung/</link>
		<comments>http://maseko.com/2009/01/18/mengenal-profil-browser-pengunjung/#comments</comments>
		<pubDate>Sun, 18 Jan 2009 05:52:30 +0000</pubDate>
		<dc:creator>maseko</dc:creator>
				<category><![CDATA[Blogging]]></category>
		<category><![CDATA[Web Design]]></category>
		<category><![CDATA[Web Development]]></category>
		<category><![CDATA[browsers]]></category>
		<category><![CDATA[web development]]></category>

		<guid isPermaLink="false">http://maseko.com/2009/01/18/mengenal-profil-browser-pengunjung/</guid>
		<description><![CDATA[Seberapa pentingkah kehadiran pengunjung bagi website atau blog yang Anda kelola? Jika memang Anda menganggap bahwa kehadiran pengunjung itu penting, sangat penting, atau bahkan mungkin dijadikan parameter sukses atau tidaknya website atau blog yang Anda kelola tentunya Anda akan berupa menarik sebanyak mungkin pengunjung yang datang. Segala informasi mengenai pengunjung sudah seharusnya dipantau seperti jumlah [...]]]></description>
			<content:encoded><![CDATA[<p><img title="webstat-browser" style="border-top-width: 0px; display: inline; border-left-width: 0px; border-bottom-width: 0px; margin: 0px 10px 0px 0px; border-right-width: 0px" height="115" alt="webstat-browser" src="http://maseko.com/wp-content/uploads/2009/01/webstatbrowser.jpg" width="260" align="left" border="0" /> Seberapa pentingkah kehadiran pengunjung bagi website atau blog yang Anda kelola? Jika memang Anda menganggap bahwa kehadiran pengunjung itu penting, sangat penting, atau bahkan mungkin dijadikan parameter sukses atau tidaknya website atau blog yang Anda kelola tentunya Anda akan berupa menarik sebanyak mungkin pengunjung yang datang. Segala informasi mengenai pengunjung sudah seharusnya dipantau seperti jumlah kunjungan (hit), jumlah pembukaan halaman (pageview), dari mana mereka mengakses, apa yang paling banyak dicari pengunjung, halaman mana yang paling sering dibuka, dan masih banyak lagi data statistik yang dapat dijadikan acuan terkait dengan pengunjung termasuk pentingnya mengenali profil pengunjung berdasarkan apa yang mereka gunakan untuk mengakses website atau blog Anda.</p>
<p><span id="more-1823"></span></p>
<p>Sebuah komputer dengan layar monitor serta browser adalah alat yang umum digunakan pengunjung untuk dapat melihat dan menggunakan fasilitas yang ada pada website atau blog. Mengenali apa yang kebanyakan pengunjung gunakan seperti browser dan resolusi monitor dapat Anda manfaatkan untuk memberikan fitur, design, dan layout website yang sesuai untuk kebanyakan pengunjung dengan tujuan memberikan kenyamanan saat mengakses website Anda.</p>
<p>Data statistik mengenai apa yang digunakan oleh pengunjung dapat Anda peroleh dari fasilitas website statistics yang disediakan penyedia layanan hosting seperti Awstats atau Webalizer atau menggunakan layanan website tracking lain seperti <a title="Google Analytics" href="https://www.google.com/analytics/">Google Analytics</a>, <a title="W3Counter" href="https://www.w3counter.com/stats/">W3Counter</a>, <a title="StatCounter" href="http://www.statcounter.com/">StatCounter</a>,&#160; atau lainnya. Berikut statistik data browser, resolusi monitor, dan sistem operasi yang paling banyak digunakan berdasarkan data <a title="Global Web Stats W3Counter" href="http://www.w3counter.com/globalstats.php">Global Web Stats W3Counter</a> dan pengunjung maseko.com untuk periode Desember 2008.&#160; Global stats dapat dijadikan acuan secara umum terutama bagi website yang tidak atau belum mempunyai data statistik.</p>
<p><img title="webstat-browsers" style="border-top-width: 0px; display: inline; border-left-width: 0px; border-bottom-width: 0px; margin: 0px; border-right-width: 0px" height="190" alt="webstat-browsers" src="http://maseko.com/wp-content/uploads/2009/01/webstatbrowsers.jpg" width="520" border="0" /> </p>
<p>Secara global memang Internet Explorer masih mendominasi sebagai browser yang paling banya digunakan, tetapi pengunjung maseko.com paling banyak menggunakan Mozilla Firefox. Dari sini, saya berusaha agar ketika ditampilkan melalui Firefox, fitur dan design blog ini dapat berjalan dan ditampilkan secara baik, dan tentu saja tetap mempertimbangkan pengguna browser lainnya. Jangan sampai saya menyiapkan blog ini tampil dan berjalan baik di Internet Explorer tetapi ternyata tidak berjalan baik di Firefox. Ketika mendesign atau menambah fitur baru sebaiknya diuji coba diakses dari berbagai browser yang berbeda.</p>
<p><img title="webstat-resolution" style="border-top-width: 0px; display: inline; border-left-width: 0px; border-bottom-width: 0px; margin: 0px; border-right-width: 0px" height="174" alt="webstat-resolution" src="http://maseko.com/wp-content/uploads/2009/01/webstatresolution.jpg" width="520" border="0" /></p>
<p>Besar resolusi monitor yang umum digunakan pengunjung dapat dijadikan dasar untuk menentukan seberapa lebar tampilan web dalam satuan pixel. Sepengetahuan saya, jika suatu web lebih panjang dari ukuran tinggi resolusi monitor, akan tetap dapat diterima pengunjung dan bersedia men-scroll atas-bawah. Tetapi jika, selain perlu menggulung atas-bawah juga dituntut geser kanan-kiri, menurut pandangan saya itu akan merepotkan, dan itu sebabnya saya lebih mempertimbangkan unsur lebar resolusi yang digunakan, mengingat dalam layout saya menetukannya secara absolut dalam pixel bukan relatif dalam persentase terhadap lebar. Ketika awal mengembangkan blog ini saya menggunakan resolusi 800&#215;600 sebagai acuan agar pengguna pada resolusi ini tidak perlu men-scroll ke kanan, dan dalam perkembangannya pengguna dengan monitor beresolusi ini makin mengecil dan saya berkeputusan menaikannya menjadi 1024&#215;768 dengan pertimbangan pengguna resolusi layar yang lebih tinggi makin banyak, sehingga pada layar mereka tidak nampak area kosong di kanan atau kiri tampilan blog.</p>
<p><img title="webstat-os" style="border-top-width: 0px; display: inline; border-left-width: 0px; border-bottom-width: 0px; margin: 0px; border-right-width: 0px" height="180" alt="webstat-os" src="http://maseko.com/wp-content/uploads/2009/01/webstatos.jpg" width="520" border="0" /> </p>
<p>Selain berdasarkan browser apa yang digunakan, mengetahui pada sistem operasi apa browser itu digunakan, akan dapat digunakan suatu saat ketika misalnya akan menyediakan fitur tertentu yang mengharuskan pengunjung mendownload software atau plugin tertentu, dan untuk melihat kesiapan kita akan teknologi yang akan diterapkan dengan melihat kebanyakan sistem operasi yang digunakan pengunjung.</p>
<p>Data mayoritas terkait browser di atas, tentunya bukan digunakan hanya untuk memanjakan pengunjung terbanyak&#160; pada suatu masa saja. Apa yang ditampilkan dan disediakan akan tetap lebih baik jika diterima secara baik oleh semua jenis browser, dan mayoritas pengguna hanya dijadikan acuan dalam menentukan prioritas tertentu.</p>
<p>Bagaimana dengan profil browser pengunjung website atau blog Anda? Apakah Anda memperhatikan juga masalah ini?</p>
]]></content:encoded>
			<wfw:commentRss>http://maseko.com/2009/01/18/mengenal-profil-browser-pengunjung/feed/</wfw:commentRss>
		<slash:comments>49</slash:comments>
		</item>
		<item>
		<title>Download Desain Logo di Logo Instant</title>
		<link>http://maseko.com/2008/12/31/download-desain-logo-di-logo-instant/</link>
		<comments>http://maseko.com/2008/12/31/download-desain-logo-di-logo-instant/#comments</comments>
		<pubDate>Tue, 30 Dec 2008 18:18:36 +0000</pubDate>
		<dc:creator>maseko</dc:creator>
				<category><![CDATA[Free Stuff]]></category>
		<category><![CDATA[Multimedia]]></category>
		<category><![CDATA[Web Design]]></category>
		<category><![CDATA[design. download]]></category>
		<category><![CDATA[logo]]></category>

		<guid isPermaLink="false">http://maseko.com/2008/12/31/download-desain-logo-di-logo-instant/</guid>
		<description><![CDATA[Keberadaan suatu logo bagi suatu produk tentunya akan penting sekali karena dapat mencirikan produk tersebut ketika orang melihatnya. Misalnya saja logo yang digunakan pada suatu website, dengan melihat logo tersebut, diharapkan orang akan mengingat website dibelakangnya. Untuk membuat logo itu sendiri tentunya diperlukan keahlian mendesign yang mampu menerjemahkan esensi produk yang diusungnya. Bagi yang tidak [...]]]></description>
			<content:encoded><![CDATA[<p><img title="logoinstant" style="border-right: 0px; border-top: 0px; display: inline; margin: 0px 10px 0px 0px; border-left: 0px; border-bottom: 0px" height="91" alt="logoinstant" src="http://maseko.com/wp-content/uploads/2008/12/logoinstant.jpg" width="260" align="left" border="0" /> Keberadaan suatu logo bagi suatu produk tentunya akan penting sekali karena dapat mencirikan produk tersebut ketika orang melihatnya. Misalnya saja logo yang digunakan pada suatu website, dengan melihat logo tersebut, diharapkan orang akan mengingat website dibelakangnya. Untuk membuat logo itu sendiri tentunya diperlukan keahlian mendesign yang mampu menerjemahkan esensi produk yang diusungnya. Bagi yang tidak atau kurang ahli dalam hal design, mungkin layanan yang diberikan oleh <strong>Logo Instant</strong> akan bermanfaat untuk mampu menghasilkan logo akhir yang sesuai.</p>
<p><span id="more-1750"></span></p>
<p>Melalui websitenya, LogoInstan menyediakan design-design logo yang dapat didownload untuk kemudian diedit baik teks maupun gambar yang sudah ada untuk disesuaikan dengan yang diinginkan. Memang, saat saya menulis ini, baru ada 25 desain logo yang tersedia, tetapi berdasarkan informasi LogoInstan, nantinya akan ada penambahan desain logo baru setiap harinya. Design logo ini gratis untuk digunakan baik untuk keperluan pribadi maupuun komersial.</p>
<p><img title="logoinstant-examples" style="border-right: 0px; border-top: 0px; display: inline; margin: 0px; border-left: 0px; border-bottom: 0px" height="255" alt="logoinstant-examples" src="http://maseko.com/wp-content/uploads/2008/12/logoinstantexamples.jpg" width="520" border="0" /> </p>
<p>Dari beberapa design logo yang dicoba saya download, design tersebut dalam format psd, yang nantinya dapat diolah atau diedit dengan aplikasi Adobe Photoshop. Dari tag line Instant Logo, logo-logo yang disediakan ini merupakan design logo web 2.0.</p>
<p>Bagaimana, Anda berminat untuk membuat logo sendiri? Coba saja memulai dari design awal yang disediakan Logo Instant.</p>
<p>&#8211; <a title="Logo Instant" href="http://www.logoinstant.com/">Logo Instant</a> | via <a title="Get professional Logo designs for free" href="http://www.ghacks.net/2008/12/30/get-professional-logo-designs-for-free/">gHacks</a></p>
]]></content:encoded>
			<wfw:commentRss>http://maseko.com/2008/12/31/download-desain-logo-di-logo-instant/feed/</wfw:commentRss>
		<slash:comments>43</slash:comments>
		</item>
		<item>
		<title>Pernak-pernik Website dari Wigflip</title>
		<link>http://maseko.com/2008/12/02/pernak-pernik-website-dari-wigflip/</link>
		<comments>http://maseko.com/2008/12/02/pernak-pernik-website-dari-wigflip/#comments</comments>
		<pubDate>Mon, 01 Dec 2008 18:19:48 +0000</pubDate>
		<dc:creator>maseko</dc:creator>
				<category><![CDATA[Fun]]></category>
		<category><![CDATA[Multimedia]]></category>
		<category><![CDATA[Web Design]]></category>

		<guid isPermaLink="false">http://maseko.com/2008/12/02/pernak-pernik-website-dari-wigflip/</guid>
		<description><![CDATA[Image animasi mesin ketik di atas merupakan salah satu hasil yang dapat diperoleh dengan menggunakan layanan Screedbot dari&#160; Wigflip. Masih ada sejumlah toys and tools lainnya yang nantinya dapat digunakan untuk menghias halaman web yang Anda miliki. Cara penggunaan masing-masing tools online yang disediakan bersifat instan, Anda memasukan teks atau foto yang diperlukan selanjutnya image [...]]]></description>
			<content:encoded><![CDATA[<p><img title="wigflip-screedbot" style="display: inline" height="42" alt="wigflip-screedbot" src="http://maseko.com/wp-content/uploads/2008/12/wigflipscreedbot1.gif" width="430" border="0" /> </p>
<p>Image animasi mesin ketik di atas merupakan salah satu hasil yang dapat diperoleh dengan menggunakan layanan Screedbot dari&#160; <strong>Wigflip</strong>. Masih ada sejumlah <em>toys and tools</em> lainnya yang nantinya dapat digunakan untuk menghias halaman web yang Anda miliki. Cara penggunaan masing-masing tools online yang disediakan bersifat instan, Anda memasukan teks atau foto yang diperlukan selanjutnya image hasilnya dapat didownload atau langsung di kirim ke Flickr atau Imageshack jika memang memungkinkan.</p>
<p> <span id="more-1599"></span>
<p>Beberapa contoh lainnya yang dapat dihasilkan dari Wigflip antara lain:</p>
<ul>
<li>Minifesto     <br /><img title="wigflip-minifesto" style="display: inline" height="68" alt="wigflip-minifesto" src="http://maseko.com/wp-content/uploads/2008/12/wigflipminifesto1.gif" width="200" /> </li>
<li>Signbot     <br /><img title="wigflip-signbot" style="display: inline" height="44" alt="wigflip-signbot" src="http://maseko.com/wp-content/uploads/2008/12/wigflipsignbot1.gif" width="240" /> </li>
<li>Superstickies     <br /><img title="wigflip-superstickies" style="border-right: 0px; border-top: 0px; display: inline; margin: 0px; border-left: 0px; border-bottom: 0px" height="212" alt="wigflip-superstickies" src="http://maseko.com/wp-content/uploads/2008/12/wigflipsuperstickies1.png" width="223" border="0" /> </li>
<li>Tinytags     <br /><img title="wigflip-tinytags" style="border-right: 0px; border-top: 0px; display: inline; margin: 0px; border-left: 0px; border-bottom: 0px" height="224" alt="wigflip-tinytags" src="http://maseko.com/wp-content/uploads/2008/12/wigfliptinytags1.png" width="126" border="0" /> </li>
<li>dan beberapa tools lainnya.</li>
</ul>
<p>Jika memang tertarik untuk menggunakannya dalam halaman blog atau website Anda, langsung saja mencoba-coba di Wigflip.</p>
<p>&#8211; <a title="Wigflip" href="http://wigflip.com/">Wigflip</a> | via <a title="Digital Inspiration" href="http://www.labnol.org/internet/scrolling-typewriter-text-effect/5753/">Digital Inspiration</a></p>
]]></content:encoded>
			<wfw:commentRss>http://maseko.com/2008/12/02/pernak-pernik-website-dari-wigflip/feed/</wfw:commentRss>
		<slash:comments>39</slash:comments>
		</item>
		<item>
		<title>Merekam Tampilan Layar dengan ScreenToaster</title>
		<link>http://maseko.com/2008/10/16/merekam-tampilan-layar-dengan-screentoaster/</link>
		<comments>http://maseko.com/2008/10/16/merekam-tampilan-layar-dengan-screentoaster/#comments</comments>
		<pubDate>Thu, 16 Oct 2008 16:22:30 +0000</pubDate>
		<dc:creator>maseko</dc:creator>
				<category><![CDATA[Multimedia]]></category>
		<category><![CDATA[Web Design]]></category>

		<guid isPermaLink="false">http://maseko.com/2008/10/16/merekam-tampilan-layar-dengan-screentoaster/</guid>
		<description><![CDATA[ScreenToaster merupakan aplikasi berbasis web yang dapat dimanfaatkan untuk melakukan perekaman tampilan layar komputer Anda baik full screen maupun area tertentu yang Anda tentukan dalam bentuk video. Sebagai aplikasi berbasis web, ScreenToaster dapat digunakan tanpa perlu melakukan instalasi dan dapat digunakan pada komputer dengan sistem operasi apapun. Namun begitu, karena Screen Toaster berjalan sebagai applet [...]]]></description>
			<content:encoded><![CDATA[<p><img title="screentoaster" style="border-top-width: 0px; display: inline; border-left-width: 0px; border-bottom-width: 0px; margin: 0px 10px 0px 0px; border-right-width: 0px" height="84" alt="screentoaster" src="http://maseko.com/wp-content/uploads/2008/10/screentoaster.jpg" width="260" align="left" border="0" /> ScreenToaster merupakan aplikasi berbasis web yang dapat dimanfaatkan untuk melakukan perekaman tampilan layar komputer Anda baik full screen maupun area tertentu yang Anda tentukan dalam bentuk video. Sebagai aplikasi berbasis web, ScreenToaster dapat digunakan tanpa perlu melakukan instalasi dan dapat digunakan pada komputer dengan sistem operasi apapun. Namun begitu, karena Screen Toaster berjalan sebagai applet Java maka pada komputer yang digunakan haruslah sudah terinstall Java runtime.</p>
<p> <span id="more-1448"></span>
<p>Untuk melalui melakukan perkeman video tampilan layar (screencasting), maka Anda perlu login ke Screen Toaster dan selanjutnya klik <strong>Start Recording</strong>. Tentukan jendela mana yang akan direkam kemudian tekan tombol <strong>[Alt+S]</strong> untuk memulai perekaman dalam mode fullscreen atau tombol <strong>[Alt+Shift+S]</strong> jika akan merekam hanya area tertentu saja. Begitu selesai, untuk mengakhiri proses recording Anda dapat menggunakan tombol <strong>[Alt+S]</strong>. </p>
<p>Setelah mengakhiri proses perekaman, Anda akan dapat melihat video hasilnya pada browser. Selanjutnya, Anda dapat memilih apakah video tersebut akan dikirim melalui email atau dipublish untuk dapat ditampilkan dalam halaman web, dan ScreenToaster akan mengupload video tersebut ke server Screen Toaster. Berikut ini contoh video yang ditampilkan dalam format Flash hasil screencasting yang saya lakukan.</p>
<div><script type="text/javascript" src="http://www.screentoaster.com/embed/Vk5UQEZNRF9eQ1VdUg=="></script></div>
<div>
<div id="ST_EmbedContainer_202" style="width: 425px; height: 344px"></div>
</p></div>
<p>Untuk contoh video berdurasi 1 menit 8 detik di atas, besar file video yang dihasilkan adalah sekitar 6 MB.</p>
<p>Saat ini, ScreenToaster masih dalam tahap private beta dan untuk dapat melakukan registrasi di sana diperlukan invitation code. Jika belum, maka Anda dapat mencoba untuk dikirimi invitation code dengan memasukkan alamat email Anda, dan dari pengalaman saya mencobanya, dalam beberapa menit invitation code tersebut akan dikirimkan melalui alamat email.</p>
<p>&#8211; <a title="ScreenToaster.com" href="http://www.screentoaster.com">ScreenToaster.com</a> | via <a title="Record your Desktop Screen Online with Screen Toaster" href="http://www.labnol.org/internet/record-video-of-desktop-screen-online/4980/">DI</a></p>
]]></content:encoded>
			<wfw:commentRss>http://maseko.com/2008/10/16/merekam-tampilan-layar-dengan-screentoaster/feed/</wfw:commentRss>
		<slash:comments>28</slash:comments>
		</item>
		<item>
		<title>Smush It</title>
		<link>http://maseko.com/2008/10/04/smush-it/</link>
		<comments>http://maseko.com/2008/10/04/smush-it/#comments</comments>
		<pubDate>Sat, 04 Oct 2008 03:01:44 +0000</pubDate>
		<dc:creator>maseko</dc:creator>
				<category><![CDATA[Web Application]]></category>
		<category><![CDATA[Web Design]]></category>
		<category><![CDATA[Web Development]]></category>
		<category><![CDATA[Webhosting]]></category>

		<guid isPermaLink="false">http://maseko.com/2008/10/04/smush-it/</guid>
		<description><![CDATA[Salah satu elemen yang biasa digunakan dalam halaman website adalah adanya gambar atau image baik untuk pendukung tulisan maupun sebagai bagian mempercantik halaman web. Akibat menampilkan image apalagi jika besar file image tersebut cukup besar adalah membuat waktu loading halaman website akan semakin lama karena besarnya data yang didownload semakin besar. Jika suatu image memang [...]]]></description>
			<content:encoded><![CDATA[<p><img title="smush-it" style="border-right: 0px; border-top: 0px; display: inline; margin: 0px 10px 0px 0px; border-left: 0px; border-bottom: 0px" height="76" alt="smush-it" src="http://maseko.com/wp-content/uploads/2008/10/smushit.jpg" width="260" align="left" border="0" /> Salah satu elemen yang biasa digunakan dalam halaman website adalah adanya gambar atau image baik untuk pendukung tulisan maupun sebagai bagian mempercantik halaman web. Akibat menampilkan image apalagi jika besar file image tersebut cukup besar adalah membuat waktu loading halaman website akan semakin lama karena besarnya data yang didownload semakin besar. Jika suatu image memang diperlukan untuk tetap ditampilkan dalam website, langkah mengoptimasi image tersebut sebelum diupload adalah cara yang dapat diambil agar besar filenya tidak sebesar aslinya disamping menurunkan ukuran file imagenya. Langkah untuk melakukan optimasi file image ini salah satunya dapt dilakukan dengan menggunakan layanan <strong>Smush It</strong>.</p>
<p> <span id="more-1416"></span>
<p>Smush It merupakan layanan web untuk keperluan optimasi file-file image baik dengan mengupload file image yang akan dioptimasi maupun dengan memberikan URL file image jika sudah terupload di internet. Selain itu, disediakan pula add-on untuk browser Mozilla Firefox untuk mempermudah memanfaatkan layanan ini.</p>
<p>Dalam melakukan optimasi image, Smush it menyatakan bahwa prosesnya tidak akan menurunkan kualitas image dengan digunakanannya <em>image format specific non-lossy image optimization tools</em>. Selanjutnya image-image yang sudah diproses ini akan dapat kita download dalam suatu file zip, dan inilah yang dapat kita upload dan nantinya ditampilkan dalam halaman web.</p>
<p><img title="smush-it-results" style="border-right: 0px; border-top: 0px; display: inline; margin: 0px; border-left: 0px; border-bottom: 0px" height="362" alt="smush-it-results" src="http://maseko.com/wp-content/uploads/2008/10/smushitresults.jpg" width="520" border="0" /> </p>
<p>Penggunaan file image yang teroptimasi ini, selain akan mempercepat loading halaman website, juga akan menghemat bandwidth atas akses image-image yang ditampilkan. </p>
<p>Bagi saya pribadi penggunaan layanan ini akan menambah kerepotan, mengingat saya lebih menyukai upload image yang terintegrasi dengan posting tulisan melalui Windows Live Writer termasuk penggunaan fasilitas pengolahannya. Tapi, bisa jadi suatu saat saya akan memerlukan layanan ini untuk mengoptimasi image yang akan ditampilkan pada setiap halaman.</p>
<p>&#8211; <a title="Smush It" href="http://www.smushit.com/">Smush It</a> | via <a title="Image Optimization With Smush It" href="http://www.ghacks.net/2008/10/04/image-optimization-with-smush-it/">gHacks</a></p>
]]></content:encoded>
			<wfw:commentRss>http://maseko.com/2008/10/04/smush-it/feed/</wfw:commentRss>
		<slash:comments>26</slash:comments>
		</item>
		<item>
		<title>Mendesain Background dengan BgPatterns</title>
		<link>http://maseko.com/2008/07/14/mendesain-background-dengan-bgpatterns/</link>
		<comments>http://maseko.com/2008/07/14/mendesain-background-dengan-bgpatterns/#comments</comments>
		<pubDate>Mon, 14 Jul 2008 16:26:58 +0000</pubDate>
		<dc:creator>maseko</dc:creator>
				<category><![CDATA[Multimedia]]></category>
		<category><![CDATA[Web Application]]></category>
		<category><![CDATA[Web Design]]></category>

		<guid isPermaLink="false">http://maseko.com/2008/07/14/mendesain-background-dengan-bgpatterns/</guid>
		<description><![CDATA[BgPatterns merupakan layanan online yang dikhususkan untuk mendesain pola tiled background yang nantinya dapat digunakan sebagai latar belakang halaman web, desktop, atau keperluan lainnya. Begitu kita masuk websitenya, saat itu pula kita dapat memulai membuat design background dengan diawali memilih warna depan dan warna latar belakang. Setelah itu, kita memilih jenis kanvas yang digunakan, kemudian [...]]]></description>
			<content:encoded><![CDATA[<p><img title="bgpatterns" style="border-right: 0px; border-top: 0px; margin: 0px 10px 0px 0px; border-left: 0px; border-bottom: 0px" height="65" alt="bgpatterns" src="http://maseko.com/wp-content/uploads/2008/07/bgpatterns.jpg" width="260" align="left" border="0" /> <strong>BgPatterns</strong> merupakan layanan online yang dikhususkan untuk mendesain pola tiled background yang nantinya dapat digunakan sebagai latar belakang halaman web, desktop, atau keperluan lainnya.</p>
<p>Begitu kita masuk websitenya, saat itu pula kita dapat memulai membuat design background dengan diawali memilih warna depan dan warna latar belakang. Setelah itu, kita memilih jenis kanvas yang digunakan, kemudian memilih image yang akan dijadikan pola yang selanjutnya dapat dirotasi sesuai keinginan kita. Setiap langkah dan perubahan yang kita lakukan, dapat dilihat langsung hasilnya pada bagian preview di sebelah kanan.</p>
<p><span id="more-1162"></span></p>
<p><img title="bgpatterns-workspace" style="border-right: 0px; border-top: 0px; margin: 0px 10px 0px 0px; border-left: 0px; border-bottom: 0px" height="266" alt="bgpatterns-workspace" src="http://maseko.com/wp-content/uploads/2008/07/bgpatternsworkspace.jpg" width="520" border="0" /> </p>
<p>Untuk melihat bagaimana hasil jadi design background yang dibuat saat diterapkan sebagai background halaman web, dengan mengklik Apply background pada bagian preview maka seketika itu juga latar belakang website BgPatterns akan berubah dengan menggunakan tiled background yang baru kita buat.</p>
<p>Jika memang apa yang kita design sudah sesuai dengan yang kita inginkan, kita dapat langsung mendownload pola background tersebut, atau dapat pula menyimpannya pada BgPatters sebagai My patterns, namun pilihan yang terkahir ini mensyaratkan kita untuk terdaftar lebih dahulu.</p>
<p>&#8211; <a href="http://bgpatterns.com/">BgPatterns</a> | via <a href="http://www.downloadsquad.com/2008/07/13/get-help-making-tiled-backgrounds-for-your-website/">DownloadSquad</a></p>
]]></content:encoded>
			<wfw:commentRss>http://maseko.com/2008/07/14/mendesain-background-dengan-bgpatterns/feed/</wfw:commentRss>
		<slash:comments>13</slash:comments>
		</item>
		<item>
		<title>Dynamic Feed Control Wizard untuk Google AJAX Feed API</title>
		<link>http://maseko.com/2008/06/15/dynamic-feed-control-wizard-untuk-google-ajax-feed-api/</link>
		<comments>http://maseko.com/2008/06/15/dynamic-feed-control-wizard-untuk-google-ajax-feed-api/#comments</comments>
		<pubDate>Sun, 15 Jun 2008 05:00:07 +0000</pubDate>
		<dc:creator>maseko</dc:creator>
				<category><![CDATA[Google]]></category>
		<category><![CDATA[Web Design]]></category>
		<category><![CDATA[Web Development]]></category>

		<guid isPermaLink="false">http://maseko.com/2008/06/15/dynamic-feed-control-wizard-untuk-google-ajax-feed-api/</guid>
		<description><![CDATA[Dynamic Feed Control Wizard merupakan cara mudah yang memanfaatkan Google AJAX Feed API untuk menyisipkan cuplikan berita, entry blog, atau isi web lainnya yang tersedia RSS atau Atom feed-nya pada halaman blog atau website. Kita dapat memilih style atau bentuk tampilan apakah Vertical, Vertical Stacked, atau Horizontal. Sayangnya wizard yang disediakan Google ini tidak memungkinkan [...]]]></description>
			<content:encoded><![CDATA[<p><img title="google-ajax-feed-api-example" style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; margin: 0px 10px 0px 0px; border-right-width: 0px" height="148" alt="google-ajax-feed-api-example" src="http://maseko.com/wp-content/uploads/2008/06/googleajaxfeedapiexample.jpg" width="260" align="left" border="0" /> Dynamic Feed Control Wizard merupakan cara mudah yang memanfaatkan Google AJAX Feed API untuk menyisipkan cuplikan berita, entry blog, atau isi web lainnya yang tersedia RSS atau Atom feed-nya pada halaman blog atau website.</p>
<p>Kita dapat memilih style atau bentuk tampilan apakah Vertical, Vertical Stacked, atau Horizontal. Sayangnya wizard yang disediakan Google ini tidak memungkinkan memasukkan langsung feed URL-nya, tetapi dengan memasukkan feed expression, seperti kata kunci&#160; yang nantinya Google sendiri yang akan menghubungkannya dengan suatu alamat feed yang ditemukan.</p>
<p><span id="more-1040"></span></p>
<p><img title="google-ajax-feed-api" style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; margin: 0px 10px 0px 0px; border-right-width: 0px" height="423" alt="google-ajax-feed-api" src="http://maseko.com/wp-content/uploads/2008/06/googleajaxfeedapi.jpg" width="520" border="0" /> </p>
<p><img title="google-ajax-feed-api-code" style="border-top-width: 0px; border-left-width: 0px; border-bottom-width: 0px; margin: 0px 10px 0px 0px; border-right-width: 0px" height="166" alt="google-ajax-feed-api-code" src="http://maseko.com/wp-content/uploads/2008/06/googleajaxfeedapicode.jpg" width="260" align="left" border="0" /> Jika dengan memasukkan Feeds Expression tidak menghasilkan Direct Feed URL yang diinginkan, mungkin dapat memasukkan sembarang ekspresi yang menghasilkan feed URL, kemudian klik Generate Code, dan pada kode yang dihasilkan coba ubah baris yang menyatakan title dan url seperti pada gambar di samping.</p>
<p>Dan apabila ingin menampilkan tulisan terakhir maseko’s weblog dalam halaman blog atau website Anda, maka Anda dapat copy-paste kode berikut dan tempatkan pada bagian dimana akan ditampilkan.</p>
<div style="border-right: gray 1px solid; padding-right: 4px; border-top: gray 1px solid; padding-left: 4px; font-size: 8pt; padding-bottom: 4px; margin: 20px 0px 10px; overflow: auto; border-left: gray 1px solid; width: 97.5%; cursor: text; max-height: 200px; line-height: 12pt; padding-top: 4px; border-bottom: gray 1px solid; font-family: consolas, &#39;Courier New&#39;, courier, monospace; background-color: #f4f4f4">
<div style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none">
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: white; border-bottom-style: none">&lt;!-- ++Begin Dynamic Feed Wizard Generated Code++ --&gt;</pre>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none">  &lt;!--</pre>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: white; border-bottom-style: none">  <span style="color: #008000">// Created with a Google AJAX Search and Feed Wizard</span></pre>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none">  <span style="color: #008000">// http://code.google.com/apis/ajaxsearch/wizards.html</span></pre>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: white; border-bottom-style: none">  --&gt;</pre>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none">&#160;</pre>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: white; border-bottom-style: none">  &lt;!--</pre>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none">  <span style="color: #008000">// The Following div element will end up holding the actual feed control.</span></pre>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: white; border-bottom-style: none">  <span style="color: #008000">// You can place this anywhere on your page.</span></pre>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none">  --&gt;</pre>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: white; border-bottom-style: none">  &lt;div id=<span style="color: #006080">&quot;feed-control&quot;</span>&gt;</pre>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none">    &lt;span style=<span style="color: #006080">&quot;color:#676767;font-size:11px;margin:10px;padding:4px;&quot;</span>&gt;Loading...&lt;/span&gt;</pre>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: white; border-bottom-style: none">  &lt;/div&gt;</pre>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none">&#160;</pre>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: white; border-bottom-style: none">  &lt;!-- Google Ajax Api</pre>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none">  --&gt;</pre>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: white; border-bottom-style: none">  &lt;script src=<span style="color: #006080">&quot;http://www.google.com/jsapi?key=notsupplied-wizard&quot;</span></pre>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none">    type=<span style="color: #006080">&quot;text/javascript&quot;</span>&gt;&lt;/script&gt;</pre>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: white; border-bottom-style: none">&#160;</pre>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none">  &lt;!-- Dynamic Feed Control and Stylesheet --&gt;</pre>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: white; border-bottom-style: none">  &lt;script src=<span style="color: #006080">&quot;http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.js&quot;</span></pre>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none">    type=<span style="color: #006080">&quot;text/javascript&quot;</span>&gt;&lt;/script&gt;</pre>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: white; border-bottom-style: none">  &lt;style type=<span style="color: #006080">&quot;text/css&quot;</span>&gt;</pre>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none">    <span style="color: #cc6633">@import</span> url(<span style="color: #006080">&quot;http://www.google.com/uds/solutions/dynamicfeed/gfdynamicfeedcontrol.css&quot;</span>);</pre>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: white; border-bottom-style: none">  &lt;/style&gt;</pre>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none">&#160;</pre>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: white; border-bottom-style: none">  &lt;script type=<span style="color: #006080">&quot;text/javascript&quot;</span>&gt;</pre>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none">    <span style="color: #0000ff">function</span> LoadDynamicFeedControl() {</pre>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: white; border-bottom-style: none">      <span style="color: #0000ff">var</span> feeds = [</pre>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none">    {title: <span style="color: #006080">'maseko'</span>,</pre>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: white; border-bottom-style: none">     url: <span style="color: #006080">'http://maseko.com/feed/'</span></pre>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none">    }];</pre>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: white; border-bottom-style: none">      <span style="color: #0000ff">var</span> options = {</pre>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none">        stacked : <span style="color: #0000ff">false</span>,</pre>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: white; border-bottom-style: none">        horizontal : <span style="color: #0000ff">true</span>,</pre>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none">        title : <span style="color: #006080">&quot;&quot;</span></pre>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: white; border-bottom-style: none">      }</pre>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none">&#160;</pre>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: white; border-bottom-style: none">      <span style="color: #0000ff">new</span> GFdynamicFeedControl(feeds, <span style="color: #006080">'feed-control'</span>, options);</pre>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none">    }</pre>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: white; border-bottom-style: none">    <span style="color: #008000">// Load the feeds API and set the onload callback.</span></pre>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none">    google.load(<span style="color: #006080">'feeds'</span>, <span style="color: #006080">'1'</span>);</pre>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: white; border-bottom-style: none">    google.setOnLoadCallback(LoadDynamicFeedControl);</pre>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: #f4f4f4; border-bottom-style: none">  &lt;/script&gt;</pre>
<pre style="padding-right: 0px; padding-left: 0px; font-size: 8pt; padding-bottom: 0px; margin: 0em; overflow: visible; width: 100%; color: black; border-top-style: none; line-height: 12pt; padding-top: 0px; font-family: consolas, &#39;Courier New&#39;, courier, monospace; border-right-style: none; border-left-style: none; background-color: white; border-bottom-style: none">&lt;!-- ++End Dynamic Feed Control Wizard Generated Code++ --&gt;</pre>
</div>
</div>
<p>&#8211; <a href="http://www.google.com/uds/solutions/wizards/dynamicfeed.html">Dynamic Feed Control Wizard</a></p>
]]></content:encoded>
			<wfw:commentRss>http://maseko.com/2008/06/15/dynamic-feed-control-wizard-untuk-google-ajax-feed-api/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>Memantau dan Menyapa Pengunjung Online dengan Digsby</title>
		<link>http://maseko.com/2008/03/02/memantau-dan-menyapa-pengunjung-online-dengan-digsby/</link>
		<comments>http://maseko.com/2008/03/02/memantau-dan-menyapa-pengunjung-online-dengan-digsby/#comments</comments>
		<pubDate>Sun, 02 Mar 2008 13:54:34 +0000</pubDate>
		<dc:creator>maseko</dc:creator>
				<category><![CDATA[Internet]]></category>
		<category><![CDATA[TipsTricks]]></category>
		<category><![CDATA[Web Design]]></category>

		<guid isPermaLink="false">http://maseko.com/2008/03/02/memantau-dan-menyapa-pengunjung-online-dengan-digsby/</guid>
		<description><![CDATA[Ketika menyebutkan adanya fasilitas widget Digsby dalam tulisan sebelumnya, saya mengira bahwa komunikasi baru dapat dilakukan ketika pengunjung website menyapa pemilik website atau blog ketika statusnya online. Karena mungkin jendela Digsby saya kosong karena sedang tidak mengaktifkan semua account instant messenger, saya baru memperhatikan adanya user yang muncul dalam jendela tersebut. Dengan melihat nama group [...]]]></description>
			<content:encoded><![CDATA[<p><img style="border-right: 0px; border-top: 0px; margin: 0px 10px 0px 0px; border-left: 0px; border-bottom: 0px" height="119" alt="digsby-whoisonline" src="http://maseko.com/wp-content/uploads/2008/03/windowslivewritermemantaudanmenyapapengunjungonlinedengan-12610digsby-whoisonline-ff3779f2-0c3d-4fb7-a2b6-a9d0125d8bdd.jpg" width="232" align="left" border="0" /> Ketika menyebutkan adanya <a href="http://maseko.com/2008/02/27/kolaborasikan-im-email-dan-social-network-dengan-digsby-dapatkan-invite-code-nya-di-sini/" target="_blank">fasilitas widget Digsby dalam tulisan sebelumnya</a>, saya mengira bahwa komunikasi baru dapat dilakukan ketika pengunjung website menyapa pemilik website atau blog ketika statusnya online. Karena mungkin jendela Digsby saya kosong karena sedang tidak mengaktifkan semua account instant messenger, saya baru memperhatikan adanya user yang muncul dalam jendela tersebut. Dengan melihat nama group di mana user itu berada, saya langsung yakin bahwa user itu muncul karena dia sedang membuka halaman blog saya yang menampilkan widget Digsby.</p>
<p><span id="more-627"></span></p>
<p>Kemudian saya pun mencoba memulai chatting dengan salah satunya, dan berhasil mendapat tanggapan. Jadi, jika widget yang dapat diubah ukuran dan warna tersebut misalnya ditempatkan pada semua halaman website atau blog, maka pada saat kita menggunakan Digsby, kita dapat melihat berapa banyak pengunjung yang sedang membuka halaman website atau blog kita. Dan jika menginginkan, kita pun dapat menyapa pengunjung-pengunjung tersebut lebih dahulu, hanya saja informasi yang kita dapat mengenai pengunjung yang datang sebatas &quot;nick&quot; (otomatis diberikan yang kemudian dapat disetel pengunjung) dan juga IP address-nya.</p>
<p>Seperti telah saya informasikan sebelumnya, jika Anda berniat mencoba <a href="http://www.digsby.com/" target="_blank">Digsby</a> yang masih beta release ini, Anda dapat menggunakan invite code: &quot;Maseko&quot;. Saya sendiri saat ini tidak bisa mengetahui sisanya tinggal berapa dari jatah 500 invite code yang diberikan.</p>
]]></content:encoded>
			<wfw:commentRss>http://maseko.com/2008/03/02/memantau-dan-menyapa-pengunjung-online-dengan-digsby/feed/</wfw:commentRss>
		<slash:comments>5</slash:comments>
		</item>
		<item>
		<title>Google Sites: Pembangun Website Wiki dari JotSpot, eh Google</title>
		<link>http://maseko.com/2008/02/29/google-sites-pembangun-website-wiki-dari-jotspot-eh-google/</link>
		<comments>http://maseko.com/2008/02/29/google-sites-pembangun-website-wiki-dari-jotspot-eh-google/#comments</comments>
		<pubDate>Fri, 29 Feb 2008 11:27:12 +0000</pubDate>
		<dc:creator>maseko</dc:creator>
				<category><![CDATA[Google]]></category>
		<category><![CDATA[Web Design]]></category>
		<category><![CDATA[Web Development]]></category>
		<category><![CDATA[Webhosting]]></category>

		<guid isPermaLink="false">http://maseko.com/2008/02/29/google-sites-pembangun-website-wiki-dari-jotspot-eh-google/</guid>
		<description><![CDATA[Melalui email, Google mengabarkan bahwa sudah menambahkan layanan baru pada Google Apps, yaitu Google Sites. Sehabis makan siang tadi, saya sempatkan masuk account saya di Google Apps untuk domain maseko.com untuk mencobanya, setelah pagi tadi memastikan adanya tambahan layanan baru yang saya lihat pada Dashboard: Sites (beta) dengan status aktif. Saya sendiri awalnya heran mengapa [...]]]></description>
			<content:encoded><![CDATA[<p><img style="border-right: 0px; border-top: 0px; margin: 0px 10px 0px 0px; border-left: 0px; border-bottom: 0px" height="85" alt="google-apps" src="http://maseko.com/wp-content/uploads/2008/02/google-apps.jpg" width="175" align="left" border="0" /> Melalui email, Google mengabarkan bahwa sudah menambahkan layanan baru pada <a href="http://www.google.com/a/" target="_blank">Google Apps</a>, yaitu Google Sites. Sehabis makan siang tadi, saya sempatkan masuk account saya di Google Apps untuk domain maseko.com untuk mencobanya, setelah pagi tadi memastikan adanya tambahan layanan baru yang saya lihat pada Dashboard: Sites (beta) dengan status aktif. Saya sendiri awalnya heran mengapa Google menawarkan sesuatu yang sebelumnya sudah ada yaitu Google Web Pages. Namun, setelah masuk dan mencobanya, layanan baru ini memang berbeda dengan sebelumnya, karena yang saya temui adalah seperti pembangun website wiki.</p>
<p><span id="more-623"></span></p>
<p>Wiki? Bukankah dulu Google pernah mengakuisisi pembangun wiki JotSpot, apakah ini ada hubungannya? Menggunakan kata kunci <strong>&quot;Google Sites&quot; JotSpot</strong> membawa saya pada <a href="http://www.webpronews.com/topnews/2008/02/28/google-sites-jotspot-returns-joins-apps" target="_blank">berita di CNET News.com</a>, dan memang benar ada kaitannya, kurang lebih di sana dikatakan Google Sites merupakan penjelmaan dari JotSpot. Saya sendiri belum pernah mencoba produk JotSpot sebelumnya, makanya setelah lebih dahulu mencobanya, saya masih belum mengenalnya.</p>
<p><img style="border-right: 0px; border-top: 0px; margin: 0px 10px 0px 0px; border-left: 0px; border-bottom: 0px" height="277" alt="google-sites-maseko" src="http://maseko.com/wp-content/uploads/2008/02/google-sites-maseko.jpg" width="519" border="0" /> </p>
<p>Saat ini, dengan menggunakan layanan tersebut pengguna Google Apps dalam suatu domain misalnya saling berkolaborasi mengembangkan website. Cara menggunakannya pun dapat dikatakan mudah, membuat dan mengisi halaman tanpa membutuhkan pengetahuan HTML atau script lainnya. Google mengatakan ini semudah mengedit dokumen, hanya saja nantinya menjadi halaman website. </p>
<p>Di Google Site, pengguna dapat mengupload file, menggunakan apliaksi lain dari Google seperti Google Docs, Picasa,&#160; Video, Calendar, YouTube, serta gadget-gadget lainnya. Bermacam theme website sudah disediakan di Google Site, dan selanjutnya dapat disetel bagaimana skema warna dan font&#160; yang digunakan dalam website, juga mengubah logo dari logo Google yang tampil default dengan file image yang kita upload.</p>
<p>Tidak hanya satu, kita dapat membuat banyak website melalui layanan ini yang masing-masing dapat disetel siapa saja yang dapat mengaksesnya: kita sendiri, anggota dalam suatu domain atau dapat mengikutsertakan anggota dari domain lain. Ada juga pilihan agar nantinya website dapat dilihat oleh publik.</p>
<p>Jika komunitas Anda memerlukan website wiki untuk mengkolaborasikan tulisan dan hal lain dari anggota-anggotanya, Google Sites dapat dijadikan alternatif, tanpa mempersiapkan hal-hal teknis seperti menginstal software wiki dan menyiapkan tempat hostingnya.&#160; </p>
]]></content:encoded>
			<wfw:commentRss>http://maseko.com/2008/02/29/google-sites-pembangun-website-wiki-dari-jotspot-eh-google/feed/</wfw:commentRss>
		<slash:comments>13</slash:comments>
		</item>
	</channel>
</rss>

