WYSIWYG yani What You See Is What You Get (Ne görürsen onu alırsın) editörler birçok web yazılımı üstünde yer almaya başladı. Bu uygulamalar arasına bir süre önce Wordpress te TinyMCE ile katılmıştı. WYSIWYG editörler sayesinde sanki Word üzerinde biçimlendirme yaparcasına rahat bir şekilde metinlerin rengini, fontunu v.b. değiştirebiliyorsunuz.

Peki kaç farklı ve kullanımı bedava olan WYSIWYG editör var? Buyrun burada birçoğu 
 

Whizzywig
Ana sayfa | Demo | İndir
Tarayıcı uyumu: IE 7 ve Firefox 2 üzerinde çalışabiliyor.

FreeRTE
Ana sayfa | Demo | İndir
Tarayıcı uyumu: Internet Explorer 6 (Microsoft Windows), Internet Explorer 7 (Microsoft Windows), Mozilla Firefox 1.5+ (Microsoft Windows), Mozilla Firefox 1.5+ (Apple Macintosh), Opera 9 (Microsoft Windows), Safari 1.3+ (Apple Macintosh)

TinyMCE
Ana sayfa | Demo | İndir
Tarayıcı uyumu: Mozilla (PC, Mac ve Linux), MSIE (PC) ve FireFox (PC, Mac ve Linux) ve birkaç Safari sürümü.

Rich Textarea
Ana sayfa | Demo | İndir
Tarayıcı uyumu: IE 5.5+ , Mozilla 1.5.1 +, ve Firefox 1.0+.

BlueShoes (Wysiwyg) Editor
Ana sayfa | Demo | İndir
Tarayıcı uyumu: Internet Explorer 6+

Indite
Ana sayfa | Demo | İndir
Tarayıcı uyumu: Internet Explorer 5.5+, Mozilla, Firefox

HyperTextArea
Ana sayfa | Demo | İndir
Tarayıcı uyumu: Internet Explorer 5.5+, Mozilla, Firefox

SPAW Editor
Ana sayfa | Demo | İndir
Tarayıcı uyumu: Internet Explorer 5.5+, Mozilla, Firefox

EditThis!
Ana sayfa | Demo | İndir
Tarayıcı uyumu: Internet Explorer 5.5+

FCKeditor
Ana sayfa | Demo | İndir
Tarayıcı uyumu: IE 5.5+ (Windows), Firefox 1.0+, Mozilla 1.3+, Safari ve Netscape 7+

openWYSIWYG
Ana sayfa | Demo | İndir
Tarayıcı uyumu: IE 5.5+ (Windows), Firefox 1.0+, Mozilla 1.3+ ve Netscape 7+

Kimi zaman istatistik grafiklerinden kimi zamanda yüklenme grafiklerinde, ilerleme durum çubukları oluşturabiliyoruz. Bunlar için genelde resim dosyaları kullanmaktayız ya da tablolar. Fakat resim dosyadan olmadan bu işi css ile basit bir şekilde halledebilirsiniz

Super simple CSS bars başlığında bu yöntem anlatılmış. Oradan örnek alacak olursak yapmamız gerekenler şöyle.

Öncelikle kullanacağımız html kodumuz şunlar.

HTML:

  1. <div class="progress-container">         
  2.     <div style="width: 95%"></div>
  3. </div>

 

Ve css kodları ise şöyle.

CSS:

  1. div.progress-container {
  2.   border: 1px solid #ccc;
  3.   width: 100px;
  4.   margin: 2px 5px 2px 0;
  5.   padding: 1px;
  6.   float: left;
  7.   background: white;
  8. }
  9. div.progress-container> div {
  10.   background-color: #ACE97C;
  11.   height: 12px
  12. }

 

Sonuç olaraksa alttaki gibi grafikler elde ediyoruz 

div.progress-container {border: 1px solid #ccc; width: 100px; margin: 2px 5px 2px 0; padding: 1px; float: left; background: white;}div.progress-container> div {background-color: #ACE97C; height: 12px}

%95

%100

%60

%40, artalan turuncu

Ben Kimim ?

Celiker BahceciMerhabalar, ben Çeliker BAHÇECİ. 2004 den beri özel sektörde bilgisayar mühendisligi ve egitmenlik yapıyorum. Yine aynı yılın Ekim ayından beri sitemde .Net ile programlama ve hayat görüşüm ile ilgili makalelerimi yayınlıyorum. Blogum dışında Yazgelistir.com, mobilnedir.com gibi ineta kapsamındaki bir çok siteye Microsoft teknolojileri ile ilgili yazılar yazmaktayım.
Bu site ile sizinde hayatınızı anlamlandırmanızda bir parça katkımın olması dilegiyle...