<?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>CatyCat İnternet &#187; Form Style Generator</title>
	<atom:link href="http://www.catycat.net/tag/form-style-generator/feed" rel="self" type="application/rss+xml" />
	<link>http://www.catycat.net</link>
	<description>Web teknolojilerine alternatif bakış açısı</description>
	<lastBuildDate>Wed, 24 Feb 2010 18:42:32 +0000</lastBuildDate>
	<language>en</language>
	<sy:updatePeriod>hourly</sy:updatePeriod>
	<sy:updateFrequency>1</sy:updateFrequency>
	<generator>http://wordpress.org/?v=3.0</generator>
		<item>
		<title>Online Web 2.0 Tasarım Araçları</title>
		<link>http://www.catycat.net/online-web-20-tasarim-araclari</link>
		<comments>http://www.catycat.net/online-web-20-tasarim-araclari#comments</comments>
		<pubDate>Sat, 26 Jul 2008 18:14:00 +0000</pubDate>
		<dc:creator></dc:creator>
				<category><![CDATA[Web 2.0]]></category>
		<category><![CDATA[İnternet]]></category>
		<category><![CDATA[Form Style Generator]]></category>
		<category><![CDATA[My Cool Button]]></category>
		<category><![CDATA[Online]]></category>
		<category><![CDATA[Stripemania]]></category>
		<category><![CDATA[Web 2.0 Badges]]></category>

		<guid isPermaLink="false">http://www.catycat.net/?p=7</guid>
		<description><![CDATA[Logoease Logoease online olarak logo veya banner oluşturabileceğiniz bir site. 3 adımda size özel logonuzu yaratabilirsiniz. İlk olarak çeşitli kategoriler altında size sunulan seçeneklerden en uygununu seçiyorsunuz. Daha sonra düzenleme ekranında renk, yazı ve arkaplan öğelerini düzenledikten sonra son olarak çalışmanızı kayıt olurken verdiğiniz e-posta adresine .jpg, .png, .tiff formatlarında 3 farklı boyutta gönderiyorlar. Örnek [...]]]></description>
			<content:encoded><![CDATA[<p><strong>Logoease</strong></p>
<div class="separator" style="text-align: center; clear: both;"><a style="border: 0pt none ; background-color: transparent; clear: left; margin-bottom: 1em; float: left; margin-right: 1em;" href="http://bp1.blogger.com/_BA3bQ9vN1N8/SI3q20nfsQI/AAAAAAAAACQ/5VvH2WcWBu0/s1600-h/logo_logoease.jpg"><img style="border: 0pt none ;" src="http://bp1.blogger.com/_BA3bQ9vN1N8/SI3q20nfsQI/AAAAAAAAACQ/09i0s5mBmTo/s200-R/logo_logoease.jpg" alt="" /></a></div>
<p><a href="http://www.logoease.com/">Logoease</a> online olarak logo veya banner oluşturabileceğiniz bir site. 3 adımda size özel logonuzu yaratabilirsiniz. İlk olarak çeşitli kategoriler altında size sunulan seçeneklerden en uygununu seçiyorsunuz. Daha sonra düzenleme ekranında renk, yazı ve arkaplan öğelerini düzenledikten sonra son olarak çalışmanızı kayıt olurken verdiğiniz e-posta adresine .jpg, .png, .tiff formatlarında 3 farklı boyutta gönderiyorlar. Örnek görmek isterseniz <a href="http://www.logoease.com/LogoSamples.aspx">şu adresteki</a> daha önceden hazırlanmış logolara bakabilirsiniz. İlaveten bu blogda gördüğünüz logo da <a href="http://www.logoease.com/">Logoease</a> kullanılarak hazırlandı.<br />
<span id="more-7"></span><br />
<strong>Stripemania</strong></p>
<div class="separator" style="text-align: center; clear: both;"><a style="border: 0pt none ; background-color: transparent; clear: left; margin-bottom: 1em; float: left; margin-right: 1em;" href="http://bp3.blogger.com/_BA3bQ9vN1N8/SI3uLxsJY_I/AAAAAAAAACY/IY6JrbXDIjM/s1600-h/stripemania.jpg"><img style="border: 0pt none ;" src="http://bp3.blogger.com/_BA3bQ9vN1N8/SI3uLxsJY_I/AAAAAAAAACY/lV-Mv9Q03vY/s200-R/stripemania.jpg" alt="" /></a></div>
<p><a href="http://www.stripemania.com/">Stripemania</a> web siteleri için genellikle arkaplanlar için kullanılan resimleri oluşturabileceğiniz kullanışlı bir araç. Size uygun olan renkleri (background color), çizgi kalınlığını (stripe width), çizgiler arasındaki boşluğu (spacing width) seçtikten sonra, hazırladığınız arkaplanı normal veya transparan hallerini bloglarınızda veya sitelerinizde kullanabilirsiniz. Örnekler için <a href="http://www.stripemania.com/stripe.licious/">buradan</a>, nasıl kullanabileceğiniz öğrenmek için ise <a href="http://www.stripemania.com/tutorials/">Tutorials</a> linkine bakabilirsiniz.<br />
<strong>Form Style Generator</strong></p>
<p><a style="border: 0pt none ; background-color: transparent; clear: left; margin-bottom: 1em; float: left; margin-right: 1em;" href="http://bp0.blogger.com/_BA3bQ9vN1N8/SI3xNOuxYDI/AAAAAAAAACo/nam4avdzU5I/s1600-h/logo_fsg.jpg"><img style="border: 0pt none ;" src="http://bp0.blogger.com/_BA3bQ9vN1N8/SI3xNOuxYDI/AAAAAAAAACo/c0JcR9kLXHE/s200-R/logo_fsg.jpg" alt="" /></a><a href="http://www.formstylegenerator.com/">Form Style Generator</a> ile formlarınıza güzellik katabilir, Web 2.0 görünümüne sokabilirsiniz. Sol taraftaki &#8220;design&#8221; bölümünden formunuzun rengini (design.your background), çizgi stilini (design.your border), formunuzun yazı tipini (design.your font and text) kendinize uygun biçimde seçebilirsiniz. Ayrıca form elamanlarınızın onHover ve onFocus olaylarında arkaplan rengi, çizgi rengi vb. özelliklerini değiştirerek kullanıcı dostu bir görünüm sağlayabilirsiniz.</p>
<p>Tüm işlemlerinizi bitirdikten sonra &#8220;Download&#8221; linkine tıklayarak CSS kodunuzu alıp kendi CSS kodlarınızı altına ekleyip, gerekli düzenlemeleri yaptıktan sonra istediğiniz gibi kullanabilirsiniz.</p>
<p><strong>My Cool Button</strong></p>
<p><a style="border: 0pt none ; background-color: transparent; clear: left; margin-bottom: 1em; float: left; margin-right: 1em;" href="http://bp0.blogger.com/_BA3bQ9vN1N8/SI36H9O2SdI/AAAAAAAAACw/jRmVf-bKB2o/s1600-h/logo_mcb.png"><img style="border: 0pt none ;" src="http://bp0.blogger.com/_BA3bQ9vN1N8/SI36H9O2SdI/AAAAAAAAACw/sqw8nj27jWk/s320-R/logo_mcb.png" alt="" /></a><a href="http://www.mycoolbutton.com/">My Cool Button</a> isminden de anlaşılacağı gibi bir buton oluşturma aracı. Bu tip sitelerdeki genel kurala uygun olarak önce butonunuzun şeklini (shape) seçiyorsunuz. Daha sonra Web 2.0 renklerinden veya kendi HEX kodunuzu girerek renginizi (colors) belirtiyorsunuz. Son olarak ise kullanacağınız yazı fontunu (text) seçtikten sonra butonunuz hazır hale geliyor. Artı olarak butonunuza ikon eklemek isterseniz (Örneğin RSS, Youtube, Flicker vb.) hazır ikonlardan birini seçebilir veya kendi ikonunuzu upload edebilirsiniz. Örnekleri görmek isterseniz <a href="http://www.mycoolbutton.com/buttons.php">Demo</a> bölümüne bakabilirsiniz.</p>
<p>NOT: Butondan kasıt resim tabanlı link vermedir. Ayrıntılı bilgi için aşağıdaki örneği inceleyebilirsiniz.</p>
<pre class="sh_html">&lt;a href="http://feeds.feedburner.com/ersinhan"&gt;
&lt;img src="http://www.host.com/rozet.png" title="RSS ile takip et!" /&gt;
&lt;/a&gt;</pre>
<div class="separator" style="text-align: center; clear: both;"><a style="border: 0pt none ; background-color: transparent; clear: left; margin-bottom: 1em; float: left; margin-right: 1em;" href="http://feeds.feedburner.com/ersinhan"><img style="border: 0pt none ;" src="http://bp2.blogger.com/_BA3bQ9vN1N8/SI39Kb6WrXI/AAAAAAAAAC4/BirMvgOdLSc/s320-R/www.STADTAUS.com_btn74251863.png" alt="" /></a></div>
<p>Yukarıdaki kodların ekran çıktısı yandaki gibi olacaktır.</p>
<p><strong>Web 2.0 Badges</strong></p>
<div class="separator" style="text-align: center; clear: both;"><a style="border: 0pt none ; background-color: transparent; clear: left; margin-bottom: 1em; float: left; margin-right: 1em;" href="http://bp0.blogger.com/_BA3bQ9vN1N8/SI3-pVhYjzI/AAAAAAAAADA/MnXb4lQ46VY/s1600-h/logo_web2.0badges.gif"><img style="border: 0pt none ;" src="http://bp0.blogger.com/_BA3bQ9vN1N8/SI3-pVhYjzI/AAAAAAAAADA/Osd1Pcgllhg/s320-R/logo_web2.0badges.gif" alt="" /></a></div>
<p><a href="http://www.web20badges.com/">Web 2.0 Badges</a> siteleriniz için &#8220;badge&#8221; olarak adlandırılan rozetler hazırlamanızı sağlayan web tabanlı bir araç. Önceden hazırlanmış şekillerden birini seçerek rozetinizi hazırlamaya başlıyorsunuz. Daha sonra içerisine ekleyeceğiniz yazıyı, yazının fontu rengi vb. özellikleri ayarladıktan sonra önizlemede baktığınız resme &#8220;sağ tıklayıp&#8221; kaydedebilirsiniz. Örnekler için sitenin en altına bakabilir veya <a href="http://www.eburhan.com/">eburhan</a>&#8216; ın 2. versiyon temasına bakabilirsiniz. Hazırladığınız rozeti sürükle-bırak tekniğiyle nasıl oluşturacağınızı ise <a href="http://www.eburhan.com/jquery-ile-cek-birak-ozellikli-nesneler-olusturmak/">buradaki</a> yazısında anlatmış.</p>
<p>Sanırım bugünlük bu kadar araç tanıtımı yeterli. Bu araçları tanıyın, kullanan kullana eskitin o zaman alternatiflerini, daha yenilerini anlatmaya, bulmaya çalışırım. Şimdiden hepinize kolay gelsin.</p>
]]></content:encoded>
			<wfw:commentRss>http://www.catycat.net/online-web-20-tasarim-araclari/feed</wfw:commentRss>
		<slash:comments>1</slash:comments>
		</item>
	</channel>
</rss>
